@mml-io/3d-web-experience-client 0.22.0 → 0.23.0

package/build/index.js

@@ -1,12 +1,11 @@
+globalThis['__css-content-693110aba86e39d3ac419c61db5456a8__']=".AvatarSelectionUIComponent-module__menuButton_VjZ7cq__0230{z-index:102;user-select:none;width:70px;min-height:70px;position:absolute;top:0;right:0}.AvatarSelectionUIComponent-module__input_VjZ7cq__0230{color:#fff;backdrop-filter:blur(10px);background-color:#0006;border:1px solid #fff3;border-radius:8px;outline:none;flex:1;margin-right:6px;padding:6px 8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;font-weight:400;transition:all .2s ease-in-out}.AvatarSelectionUIComponent-module__input_VjZ7cq__0230:focus{background-color:#0009;border-color:#fff6;box-shadow:0 0 0 3px #ffffff26}.AvatarSelectionUIComponent-module__input_VjZ7cq__0230::placeholder{color:#ffffff80}.AvatarSelectionUIComponent-module__closeButton_VjZ7cq__0230{backdrop-filter:blur(10px);color:#fffc;cursor:pointer;user-select:none;background:#0009;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:16px;font-weight:500;transition:all .2s ease-in-out;display:flex;position:absolute;top:8px;right:8px}.AvatarSelectionUIComponent-module__closeButton_VjZ7cq__0230:hover{color:#ffffffe6;background:#000c;transform:scale(1.05)}.AvatarSelectionUIComponent-module__closeButton_VjZ7cq__0230:active{transform:scale(.95)}.AvatarSelectionUIComponent-module__openTab_VjZ7cq__0230{backdrop-filter:blur(10px);cursor:pointer;user-select:none;background:#0009;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s ease-in-out;display:flex;position:absolute;top:8px;right:8px}.AvatarSelectionUIComponent-module__openTab_VjZ7cq__0230:hover{background:#000c;transform:scale(1.05)}.AvatarSelectionUIComponent-module__openTab_VjZ7cq__0230:active{transform:scale(.95)}.AvatarSelectionUIComponent-module__openTab_VjZ7cq__0230 img{filter:invert(80%);width:24px;height:24px;transition:all .2s ease-in-out}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0230{backdrop-filter:blur(20px);z-index:103;user-select:none;background:#000000bf;border:1px solid #fff3;border-radius:16px;width:400px;max-width:78vw;max-height:calc(100vh - 24px);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;position:absolute;top:8px;right:60px;overflow:hidden auto;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff1a}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0230::-webkit-scrollbar{width:8px}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0230::-webkit-scrollbar-track{background:none}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0230::-webkit-scrollbar-thumb{background:#fff3;border:1px solid #ffffff1a;border-radius:4px}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0230::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.AvatarSelectionUIComponent-module__avatarSelectionSection_VjZ7cq__0230{border-bottom:1px solid #ffffff26;padding:10px}.AvatarSelectionUIComponent-module__avatarSelectionSection_VjZ7cq__0230:last-child{border-bottom:none}.AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0230{background:#0000004d;border:1px solid #ffffff26;border-radius:12px;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:8px;max-height:320px;padding:10px;display:grid;overflow:hidden auto}.AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0230::-webkit-scrollbar{width:6px}.AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0230::-webkit-scrollbar-track{background:none}.AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0230::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.AvatarSelectionUIComponent-module__avatarSelectionUiHeader_VjZ7cq__0230{color:#ffffffe6;text-align:center;font-weight:600;position:relative}.AvatarSelectionUIComponent-module__avatarSelectionUiCloseButton_VjZ7cq__0230{position:absolute;top:20px;right:20px}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0230{color:#ffffffe6;text-align:center;cursor:pointer;border-radius:8px;padding:4px;transition:all .2s ease-in-out}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0230:hover{background:#0000004d;transform:translateY(-2px)}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImgContainer_VjZ7cq__0230{border-radius:8px;position:relative;overflow:hidden}.AvatarSelectionUIComponent-module__avatarSelectionNoImage_VjZ7cq__0230{aspect-ratio:1;box-sizing:border-box;background:#0003;border:1px solid #ffffff26;border-radius:8px;justify-content:center;align-items:center;width:100%;display:flex}.AvatarSelectionUIComponent-module__avatarSelectionNoImage_VjZ7cq__0230 img{filter:invert(70%);opacity:.7;width:40%}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0230 p{text-overflow:ellipsis;white-space:nowrap;color:#fffc;margin:4px 0 0;font-size:12px;font-weight:500;position:relative;overflow:hidden}.AvatarSelectionUIComponent-module__tooltipText_VjZ7cq__0230{pointer-events:none;z-index:1000;color:#ffffffe6;backdrop-filter:blur(10px);opacity:0;visibility:hidden;white-space:nowrap;background:#000c;border-radius:8px;margin-bottom:4px;padding:4px 6px;font-size:12px;font-weight:500;transition:opacity .2s ease-in-out;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0230 p:hover+.AvatarSelectionUIComponent-module__tooltipText_VjZ7cq__0230{opacity:1;visibility:visible;transition-delay:.5s}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImgContainer_VjZ7cq__0230 .AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImage_VjZ7cq__0230{aspect-ratio:1;border-radius:8px;width:100%;transition:all .2s ease-in-out}.AvatarSelectionUIComponent-module__selectedPill_VjZ7cq__0230{color:#fff;backdrop-filter:blur(10px);background:linear-gradient(135deg,#22c55e,#16a34a);border:1px solid #fff3;border-radius:6px;padding:2px 4px;font-size:11px;font-weight:600;box-shadow:0 2px 4px #0003}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImgContainer_VjZ7cq__0230 .AvatarSelectionUIComponent-module__selectedPill_VjZ7cq__0230{z-index:2;position:absolute;top:4px;right:4px}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0230 img:hover{opacity:.8;transform:scale(1.05)}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230{color:#ffffffe6;border-bottom:1px solid #ffffff26;padding:10px;position:relative}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230:last-child{border-bottom:none}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 .AvatarSelectionUIComponent-module__radioGroup_VjZ7cq__0230{flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:8px;display:flex}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 .AvatarSelectionUIComponent-module__radioItem_VjZ7cq__0230{white-space:nowrap;align-items:center;gap:3px;margin-right:6px;display:flex}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 label{color:#fffc;cursor:pointer;margin:0;font-size:14px;font-weight:500;transition:color .2s ease-in-out}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 label:hover{color:#fff}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 input[type=radio]{appearance:none;cursor:pointer;background:none;border:2px solid #ffffff4d;border-radius:50%;outline:none;width:18px;height:18px;transition:all .2s ease-in-out;position:relative}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 input[type=radio]:hover{border-color:#ffffff80}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 input[type=radio]:focus{box-shadow:0 0 0 3px #ffffff1a}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 input[type=radio]:checked{background:#ffffff1a;border-color:#fffc}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 input[type=radio]:checked:after{content:\"\";background:#ffffffe6;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 input[type=radio][disabled]{opacity:.4;cursor:not-allowed}.AvatarSelectionUIComponent-module__customAvatarInputSection_VjZ7cq__0230{align-items:stretch;display:flex}.AvatarSelectionUIComponent-module__setButton_VjZ7cq__0230{color:#ffffffe6;backdrop-filter:blur(10px);cursor:pointer;background:linear-gradient(135deg,#0009,#0006);border:1px solid #fff3;border-radius:8px;justify-content:center;align-items:center;height:44px;padding-left:16px;padding-right:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;font-weight:500;transition:all .2s ease-in-out;display:flex}.AvatarSelectionUIComponent-module__setButton_VjZ7cq__0230:hover:not(:disabled){background:linear-gradient(135deg,#000c,#0009);border-color:#ffffff4d;transform:translateY(-1px);box-shadow:0 4px 8px #0000004d}.AvatarSelectionUIComponent-module__setButton_VjZ7cq__0230:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #0003}.AvatarSelectionUIComponent-module__setButton_VjZ7cq__0230:disabled{opacity:.5;cursor:not-allowed;transform:none}.AvatarSelectionUIComponent-module__sectionHeading_VjZ7cq__0230{color:#ffffffe6;letter-spacing:-.01em;margin-bottom:8px;font-size:18px;font-weight:600}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230 .AvatarSelectionUIComponent-module__selectedPill_VjZ7cq__0230{margin-left:8px;position:relative;top:-2px}.AvatarSelectionUIComponent-module__displayNameSection_VjZ7cq__0230{color:#ffffffe6;border-bottom:1px solid #ffffff26;padding:10px;position:relative}.AvatarSelectionUIComponent-module__displayNameInputSection_VjZ7cq__0230{align-items:stretch;display:flex}.InputBox-module__inputWrapper_adOgOW__0230{pointer-events:all;align-items:stretch;gap:6px;display:flex}.InputBox-module__chatInput_adOgOW__0230{color:#fff;backdrop-filter:blur(10px);box-sizing:border-box;background:#0006;border:1px solid #fff3;border-radius:8px;outline:none;flex:1;height:36px;padding:0 8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;font-weight:400;transition:all .2s ease-in-out}.InputBox-module__chatInput_adOgOW__0230:focus{background:#0009;border-color:#fff6;box-shadow:0 0 0 3px #ffffff26}.InputBox-module__chatInput_adOgOW__0230::placeholder{color:#ffffff80}.InputBox-module__sendButton_adOgOW__0230{color:#ffffffe6;backdrop-filter:blur(10px);cursor:pointer;background:linear-gradient(135deg,#0009,#0006);border:1px solid #fff3;border-radius:8px;outline:none;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s ease-in-out;display:flex}.InputBox-module__sendButton_adOgOW__0230:hover{background:linear-gradient(135deg,#000c,#0009);border-color:#ffffff4d;transform:translateY(-1px);box-shadow:0 4px 8px #0000004d}.InputBox-module__sendButton_adOgOW__0230:active{transform:translateY(0);box-shadow:0 2px 4px #0003}.InputBox-module__sendButton_adOgOW__0230 .InputBox-module__svgIcon_adOgOW__0230 img{filter:invert(80%);width:18px;height:18px;transition:all .2s ease-in-out}.InputBox-module__sendButton_adOgOW__0230:hover .InputBox-module__svgIcon_adOgOW__0230 img{filter:invert(90%)}.Message-module__messageContainer_ikOQiq__0230{backdrop-filter:blur(8px);word-break:break-word;color:#ffffffe6;direction:ltr;background:#0000004d;border:1px solid #fff3;border-radius:8px;width:fit-content;margin:6px auto 6px 2px;padding:4px 8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;transition:all .2s ease-in-out;overflow-x:hidden}.Message-module__messageContainer_ikOQiq__0230:hover{background:#0006;border-color:#ffffff4d}.Message-module__userName_ikOQiq__0230{color:#ffffffe6;margin-right:4px;font-weight:600}.Messages-module__messagesContainer_LXaUUW__0230{z-index:1000;max-height:inherit;scrollbar-width:thin;scrollbar-color:#fff3 transparent;pointer-events:fill;direction:rtl;position:relative;bottom:0;left:-1px;overflow-y:auto}.Messages-module__messagesContainer_LXaUUW__0230::-webkit-scrollbar{width:6px}.Messages-module__messagesContainer_LXaUUW__0230::-webkit-scrollbar-track{background:none}.Messages-module__messagesContainer_LXaUUW__0230::-webkit-scrollbar-thumb{background:#fff3;border:1px solid #ffffff1a;border-radius:3px}.Messages-module__messagesContainer_LXaUUW__0230::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.Messages-module__newMessagesButton_LXaUUW__0230{-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;z-index:1001;direction:ltr;background:#000000bf;border:1px solid #fff3;border-radius:20px;padding:8px 16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;transition:all .2s;position:absolute;bottom:50px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0000004d}.Messages-module__newMessagesButton_LXaUUW__0230:hover{background:#000000d9;border-color:#ffffff4d;transform:translate(-50%)translateY(-2px);box-shadow:0 6px 16px #0006}.Messages-module__newMessagesButton_LXaUUW__0230:active{transform:translate(-50%)translateY(0);box-shadow:0 2px 8px #0000004d}.TextChatUIComponent-module__uiHover_gFDdcW__0230{z-index:102;pointer-events:all;width:58px;min-height:58px;position:absolute;bottom:0;left:0}.TextChatUIComponent-module__textChatUi_gFDdcW__0230{flex-direction:row;align-items:flex-end;width:100%;max-width:500px;height:0;display:flex;position:absolute;bottom:0;left:0}.TextChatUIComponent-module__textChat_gFDdcW__0230{z-index:-1;color:#fff;user-select:none;opacity:0;flex-direction:column;justify-content:space-between;width:100%;max-height:500px;margin-bottom:8px;margin-left:60px;padding:5px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;transition:opacity .25s ease-in-out,transform .2s ease-in-out;display:flex;transform:translate(-100%)}.TextChatUIComponent-module__fadeIn_gFDdcW__0230{opacity:1;transform:translate(0)}.TextChatUIComponent-module__fadeOut_gFDdcW__0230{opacity:.6;transform:translate(calc(-100% - 72px))}.TextChatUIComponent-module__controls_gFDdcW__0230{position:absolute;top:2px;right:0}.TextChatUIComponent-module__openTab_gFDdcW__0230{backdrop-filter:blur(10px);cursor:pointer;z-index:102;user-select:none;background:#0009;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s ease-in-out;display:flex;position:absolute;bottom:8px;left:8px}.TextChatUIComponent-module__openTab_gFDdcW__0230:hover{background:#000c;border-color:#ffffff4d;transform:scale(1.05)}.TextChatUIComponent-module__openTab_gFDdcW__0230:active{transform:scale(.95)}.TextChatUIComponent-module__openTab_gFDdcW__0230 img{filter:invert(80%);width:24px;height:24px;transition:all .2s ease-in-out}.TextChatUIComponent-module__stickyButton_gFDdcW__0230{z-index:103;backdrop-filter:blur(10px);cursor:pointer;user-select:none;opacity:1;background:#0009;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s ease-in-out;display:flex;position:absolute;bottom:38px;left:38px}.TextChatUIComponent-module__stickyButton_gFDdcW__0230:hover{background:#000c;border-color:#ffffff4d;transform:scale(1.05)}.TextChatUIComponent-module__stickyButtonFadeOut_gFDdcW__0230{z-index:103;backdrop-filter:blur(10px);cursor:pointer;user-select:none;opacity:0;pointer-events:none;background:#0009;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s ease-in-out;display:flex;position:absolute;bottom:42px;left:42px}.TextChatUIComponent-module__stickyButtonEnabled_gFDdcW__0230{z-index:103;backdrop-filter:blur(10px);cursor:pointer;user-select:none;background:#000c;border:1px solid #22c55e99;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s ease-in-out;display:flex;position:absolute;bottom:42px;left:42px;box-shadow:0 0 8px #22c55e4d}.TextChatUIComponent-module__stickyButtonEnabled_gFDdcW__0230:hover{border-color:#22c55ecc;transform:scale(1.05);box-shadow:0 0 12px #22c55e66}.TextChatUIComponent-module__stickyButton_gFDdcW__0230 img,.TextChatUIComponent-module__stickyButtonFadeOut_gFDdcW__0230 img,.TextChatUIComponent-module__stickyButtonEnabled_gFDdcW__0230 img{filter:invert(70%);width:12px;height:12px;transition:all .2s ease-in-out}.TextChatUIComponent-module__stickyButton_gFDdcW__0230:hover img,.TextChatUIComponent-module__stickyButtonEnabled_gFDdcW__0230:hover img{filter:invert(90%)}.TextChatUIComponent-module__controls_gFDdcW__0230 .TextChatUIComponent-module__closeButton_gFDdcW__0230{color:#fffc;backdrop-filter:blur(10px);cursor:pointer;background:#0009;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;font-weight:500;transition:all .2s ease-in-out;display:flex;position:absolute;top:3px;right:3px}.TextChatUIComponent-module__closeButton_gFDdcW__0230:hover{color:#ffffffe6;background:#000c;border-color:#ffffff4d;transform:scale(1.05)}.TextChatUIComponent-module__closeButton_gFDdcW__0230:active{transform:scale(.95)}.TextChatUIComponent-module__messagesWrapper_gFDdcW__0230{direction:rtl;width:fit-content;max-height:450px;margin-bottom:8px;position:relative}.Networked3dWebExperience-module__respawnButton_7g9l0W__0230{z-index:102;color:#ffffffe6;backdrop-filter:blur(10px);cursor:pointer;user-select:none;background:linear-gradient(135deg,#0009,#0006);border:1px solid #fff3;border-radius:8px;justify-content:center;align-items:center;padding:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;font-weight:500;transition:all .2s ease-in-out;display:flex;position:absolute;top:8px;left:8px}.Networked3dWebExperience-module__respawnButton_7g9l0W__0230:hover{background:linear-gradient(135deg,#000c,#0009);border-color:#ffffff4d;transform:translateY(-1px)}.Networked3dWebExperience-module__respawnButton_7g9l0W__0230:active{transform:translateY(0)}\n";globalThis['__css-digest-693110aba86e39d3ac419c61db5456a8__']="693110aba86e39d3ac419c61db5456a8";
 // src/Networked3dWebExperienceClient.ts
-import { AvatarSelectionUI } from "@mml-io/3d-web-avatar-selection-ui";
 import {
   CameraManager,
   CharacterManager,
   CharacterModelLoader,
   CollisionsManager,
   Composer,
-  decodeCharacterAndCamera,
   ErrorScreen,
   GroundPlane,
   Key,
@@ -15,28 +14,1036 @@ import {
   MMLCompositionScene,
   TimeManager,
   TweakPane,
-  VirtualJoystick
+  Vect3,
+  VirtualJoystick,
+  Character,
+  Quat,
+  getSpawnData
 } from "@mml-io/3d-web-client-core";
 import {
-  ChatNetworkingClient,
-  TextChatUI
-} from "@mml-io/3d-web-text-chat";
-import {
-  USER_NETWORKING_AUTHENTICATION_FAILED_ERROR_TYPE,
-  USER_NETWORKING_CONNECTION_LIMIT_REACHED_ERROR_TYPE,
-  USER_NETWORKING_SERVER_SHUTDOWN_ERROR_TYPE,
-  USER_NETWORKING_USER_UPDATE_MESSAGE_TYPE,
+  FROM_SERVER_CHAT_MESSAGE_TYPE,
+  FROM_CLIENT_CHAT_MESSAGE_TYPE,
   UserNetworkingClient,
-  WebsocketStatus
+  WebsocketStatus,
+  parseServerChatMessage,
+  DeltaNetV01ServerErrors,
+  SERVER_BROADCAST_MESSAGE_TYPE,
+  parseServerBroadcastMessage
 } from "@mml-io/3d-web-user-networking";
-import { VoiceChatManager } from "@mml-io/3d-web-voice-chat";
 import {
   LoadingProgressManager,
   registerCustomElementsToWindow,
   setGlobalDocumentTimeManager,
   setGlobalMMLScene
 } from "@mml-io/mml-web";
-import { AudioListener, Euler, Scene, Vector3 } from "three";
+import { Scene, AudioListener, Vector3 } from "three";
+
+// src/avatar-selection-ui/AvatarSelectionUI.tsx
+import { forwardRef } from "react";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+
+// src/avatar-selection-ui/components/AvatarPanel/AvatarSectionUIComponent.tsx
+import {
+  useRef,
+  useState
+} from "react";
+
+// src/avatar-selection-ui/icons/Avatar.svg
+var Avatar_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/></svg>\n';
+
+// esbuild-css-modules-plugin-ns-js::src/avatar-selection-ui/components/AvatarPanel/AvatarSelectionUIComponent.module.css:injector.js
+var content = globalThis['__css-content-693110aba86e39d3ac419c61db5456a8__'];
+var digest = globalThis['__css-digest-693110aba86e39d3ac419c61db5456a8__'];
+var inject = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest;
+      const text = globalThis.document.createTextNode(content);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
+};
+
+// src/avatar-selection-ui/components/AvatarPanel/AvatarSelectionUIComponent.module.css
+var AvatarSelectionUIComponent_default = new Proxy({
+  "avatarSelectionContainer": "AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0230",
+  "avatarSelectionNoImage": "AvatarSelectionUIComponent-module__avatarSelectionNoImage_VjZ7cq__0230",
+  "avatarSelectionSection": "AvatarSelectionUIComponent-module__avatarSelectionSection_VjZ7cq__0230",
+  "avatarSelectionUi": "AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0230",
+  "avatarSelectionUiAvatar": "AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0230",
+  "avatarSelectionUiAvatarImage": "AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImage_VjZ7cq__0230",
+  "avatarSelectionUiAvatarImgContainer": "AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImgContainer_VjZ7cq__0230",
+  "avatarSelectionUiCloseButton": "AvatarSelectionUIComponent-module__avatarSelectionUiCloseButton_VjZ7cq__0230",
+  "avatarSelectionUiHeader": "AvatarSelectionUIComponent-module__avatarSelectionUiHeader_VjZ7cq__0230",
+  "closeButton": "AvatarSelectionUIComponent-module__closeButton_VjZ7cq__0230",
+  "customAvatarInputSection": "AvatarSelectionUIComponent-module__customAvatarInputSection_VjZ7cq__0230",
+  "customAvatarSection": "AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0230",
+  "displayNameInputSection": "AvatarSelectionUIComponent-module__displayNameInputSection_VjZ7cq__0230",
+  "displayNameSection": "AvatarSelectionUIComponent-module__displayNameSection_VjZ7cq__0230",
+  "input": "AvatarSelectionUIComponent-module__input_VjZ7cq__0230",
+  "menuButton": "AvatarSelectionUIComponent-module__menuButton_VjZ7cq__0230",
+  "openTab": "AvatarSelectionUIComponent-module__openTab_VjZ7cq__0230",
+  "radioGroup": "AvatarSelectionUIComponent-module__radioGroup_VjZ7cq__0230",
+  "radioItem": "AvatarSelectionUIComponent-module__radioItem_VjZ7cq__0230",
+  "sectionHeading": "AvatarSelectionUIComponent-module__sectionHeading_VjZ7cq__0230",
+  "selectedPill": "AvatarSelectionUIComponent-module__selectedPill_VjZ7cq__0230",
+  "setButton": "AvatarSelectionUIComponent-module__setButton_VjZ7cq__0230",
+  "tooltipText": "AvatarSelectionUIComponent-module__tooltipText_VjZ7cq__0230"
+}, {
+  get: function(source, key) {
+    inject();
+    return source[key];
+  }
+});
+
+// src/avatar-selection-ui/components/AvatarPanel/AvatarSectionUIComponent.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SelectedPill() {
+  return /* @__PURE__ */ jsx("span", { className: AvatarSelectionUIComponent_default.selectedPill, children: "Selected" });
+}
+var AvatarSelectionUIComponent = (props) => {
+  const visibleByDefault = props.visibleByDefault ?? false;
+  const [isVisible, setIsVisible] = useState(visibleByDefault);
+  const [selectedAvatar, setSelectedAvatar] = useState(
+    props.characterDescription
+  );
+  const [customAvatarType, setCustomAvatarType] = useState(
+    1 /* mmlUrl */
+  );
+  const [customAvatarValue, setCustomAvatarValue] = useState("");
+  const inputRef = useRef(null);
+  const textareaRef = useRef(null);
+  const [displayNameValue, setDisplayNameValue] = useState(props.displayName);
+  const displayNameRef = useRef(null);
+  const handleRootClick = (e) => {
+    e.stopPropagation();
+  };
+  const selectAvatar = (avatar) => {
+    setSelectedAvatar(avatar);
+    props.onUpdateUserAvatar(avatar);
+  };
+  const handleInputChange = (e) => {
+    setCustomAvatarValue(e.target.value);
+  };
+  const handleDisplayNameChange = (e) => {
+    setDisplayNameValue(e.target.value);
+  };
+  const setDisplayName = () => {
+    if (!displayNameValue) {
+      return;
+    }
+    props.onUpdateDisplayName(displayNameValue);
+  };
+  const addCustomAvatar = () => {
+    if (!customAvatarValue) {
+      return;
+    }
+    let newSelectedAvatar;
+    switch (customAvatarType) {
+      case 2 /* mml */:
+        newSelectedAvatar = {
+          mmlCharacterString: customAvatarValue
+        };
+        break;
+      case 1 /* mmlUrl */:
+        newSelectedAvatar = {
+          mmlCharacterUrl: customAvatarValue
+        };
+        break;
+      case 0 /* meshFileUrl */:
+        newSelectedAvatar = {
+          meshFileUrl: customAvatarValue
+        };
+        break;
+    }
+    setSelectedAvatar(newSelectedAvatar);
+    props.onUpdateUserAvatar(newSelectedAvatar);
+  };
+  const handleKeyPress = (e) => {
+    e.stopPropagation();
+  };
+  const handleAvatarInputKeyPress = (e) => {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      addCustomAvatar();
+    }
+  };
+  const handleDisplayNameKeyPress = (e) => {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      setDisplayName();
+    }
+  };
+  const handleTypeSwitch = (type) => {
+    setCustomAvatarType(type);
+    setCustomAvatarValue("");
+  };
+  const getPlaceholderByType = (type) => {
+    switch (type) {
+      case 0 /* meshFileUrl */:
+        return "https://.../avatar.glb";
+      case 1 /* mmlUrl */:
+        return "https://.../avatar.html";
+      case 2 /* mml */:
+        return '<m-character src="https://link-to-avatar">\n</m-character';
+    }
+  };
+  if (!props.availableAvatars.length && !props.allowCustomAvatars && !props.allowCustomDisplayName) {
+    return null;
+  }
+  let recognizedAvatar = false;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.menuButton, onClick: handleRootClick, children: [
+      !isVisible && /* @__PURE__ */ jsx("div", { className: AvatarSelectionUIComponent_default.openTab, onClick: () => setIsVisible(true), children: /* @__PURE__ */ jsx("img", { src: `data:image/svg+xml;utf8,${encodeURIComponent(Avatar_default)}` }) }),
+      isVisible && /* @__PURE__ */ jsx("button", { className: AvatarSelectionUIComponent_default.closeButton, onClick: (e) => setIsVisible(false), children: "X" })
+    ] }),
+    isVisible && /* @__PURE__ */ jsxs("div", { className: `${AvatarSelectionUIComponent_default.avatarSelectionContainer}`, children: [
+      props.allowCustomDisplayName && /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.displayNameSection, children: [
+        /* @__PURE__ */ jsx("div", { className: AvatarSelectionUIComponent_default.sectionHeading, children: "Display Name" }),
+        /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.displayNameInputSection, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: displayNameRef,
+              className: AvatarSelectionUIComponent_default.input,
+              value: displayNameValue,
+              onKeyDown: handleDisplayNameKeyPress,
+              onChange: handleDisplayNameChange,
+              placeholder: "Enter your display name"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: AvatarSelectionUIComponent_default.setButton,
+              disabled: !displayNameValue,
+              type: "button",
+              onClick: setDisplayName,
+              children: "Set"
+            }
+          )
+        ] })
+      ] }),
+      !!props.availableAvatars.length && /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.avatarSelectionSection, children: [
+        /* @__PURE__ */ jsx("div", { className: AvatarSelectionUIComponent_default.sectionHeading, children: "Choose your Avatar" }),
+        /* @__PURE__ */ jsx("div", { className: AvatarSelectionUIComponent_default.avatarSelectionUi, children: props.availableAvatars.map((avatar, index) => {
+          const isSelected = (selectedAvatar == null ? void 0 : selectedAvatar.meshFileUrl) && (selectedAvatar == null ? void 0 : selectedAvatar.meshFileUrl) === avatar.meshFileUrl || (selectedAvatar == null ? void 0 : selectedAvatar.mmlCharacterUrl) && (selectedAvatar == null ? void 0 : selectedAvatar.mmlCharacterUrl) === avatar.mmlCharacterUrl || (selectedAvatar == null ? void 0 : selectedAvatar.mmlCharacterString) && (selectedAvatar == null ? void 0 : selectedAvatar.mmlCharacterString) === avatar.mmlCharacterString;
+          if (isSelected) {
+            recognizedAvatar = true;
+          }
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: AvatarSelectionUIComponent_default.avatarSelectionUiAvatar,
+              onClick: () => selectAvatar(avatar),
+              children: /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.avatarSelectionUiAvatarImgContainer, children: [
+                isSelected && /* @__PURE__ */ jsx(SelectedPill, {}),
+                avatar.thumbnailUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    className: AvatarSelectionUIComponent_default.avatarSelectionUiAvatarImage,
+                    src: avatar.thumbnailUrl,
+                    alt: avatar.name
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: AvatarSelectionUIComponent_default.avatarSelectionNoImage, children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: avatar.name,
+                    src: `data:image/svg+xml;utf8,${encodeURIComponent(Avatar_default)}`
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("p", { children: avatar.name }),
+                /* @__PURE__ */ jsx("span", { className: AvatarSelectionUIComponent_default.tooltipText, children: avatar.name })
+              ] })
+            },
+            index
+          );
+        }) })
+      ] }),
+      props.allowCustomAvatars && /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.customAvatarSection, children: [
+        /* @__PURE__ */ jsx("div", { className: AvatarSelectionUIComponent_default.sectionHeading, children: "Custom Avatar" }),
+        /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.radioGroup, children: [
+          /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.radioItem, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                id: "html",
+                name: "customAvatarType",
+                onChange: () => handleTypeSwitch(1 /* mmlUrl */),
+                checked: customAvatarType === 1 /* mmlUrl */
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { htmlFor: "html", children: "MML URL" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.radioItem, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                id: "mml",
+                name: "customAvatarType",
+                onChange: () => handleTypeSwitch(2 /* mml */),
+                checked: customAvatarType === 2 /* mml */
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { htmlFor: "mml", children: "MML" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.radioItem, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                id: "glb",
+                name: "customAvatarType",
+                onChange: () => handleTypeSwitch(0 /* meshFileUrl */),
+                checked: customAvatarType === 0 /* meshFileUrl */
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { htmlFor: "glb", children: "Mesh URL" })
+          ] }),
+          !recognizedAvatar && /* @__PURE__ */ jsx(SelectedPill, {})
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: AvatarSelectionUIComponent_default.customAvatarInputSection, children: [
+          customAvatarType === 2 /* mml */ ? /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: AvatarSelectionUIComponent_default.input,
+              value: customAvatarValue,
+              onChange: handleInputChange,
+              onKeyDown: handleKeyPress,
+              placeholder: getPlaceholderByType(customAvatarType),
+              rows: 4
+            }
+          ) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              className: AvatarSelectionUIComponent_default.input,
+              value: customAvatarValue,
+              onKeyDown: handleAvatarInputKeyPress,
+              onChange: handleInputChange,
+              placeholder: getPlaceholderByType(customAvatarType)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: AvatarSelectionUIComponent_default.setButton,
+              disabled: !customAvatarValue,
+              type: "button",
+              onClick: addCustomAvatar,
+              children: "Set"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// src/avatar-selection-ui/AvatarSelectionUI.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ForwardedAvatarSelectionUIComponent = forwardRef(AvatarSelectionUIComponent);
+var AvatarSelectionUI = class {
+  constructor(config) {
+    this.config = config;
+    this.config.holderElement.appendChild(this.wrapper);
+    this.root = createRoot(this.wrapper);
+  }
+  root;
+  wrapper = document.createElement("div");
+  onUpdateUserAvatar = (avatar) => {
+    this.config.characterDescription = avatar;
+    this.config.sendIdentityUpdateToServer(this.config.displayName, avatar);
+  };
+  onUpdateDisplayName = (displayName) => {
+    this.config.displayName = displayName;
+    this.config.sendIdentityUpdateToServer(displayName, this.config.characterDescription);
+  };
+  updateAvatarConfig(avatarConfig) {
+    this.config = {
+      ...this.config,
+      ...avatarConfig
+    };
+    this.init();
+  }
+  updateAllowCustomDisplayName(allowCustomDisplayName) {
+    this.config = {
+      ...this.config,
+      allowCustomDisplayName
+    };
+    this.init();
+  }
+  init() {
+    flushSync(
+      () => this.root.render(
+        /* @__PURE__ */ jsx2(
+          ForwardedAvatarSelectionUIComponent,
+          {
+            onUpdateUserAvatar: this.onUpdateUserAvatar,
+            onUpdateDisplayName: this.onUpdateDisplayName,
+            visibleByDefault: this.config.visibleByDefault,
+            displayName: this.config.displayName,
+            characterDescription: this.config.characterDescription,
+            availableAvatars: this.config.availableAvatars,
+            allowCustomAvatars: this.config.allowCustomAvatars || false,
+            allowCustomDisplayName: this.config.allowCustomDisplayName || false
+          }
+        )
+      )
+    );
+  }
+};
+
+// src/chat-ui/TextChatUI.tsx
+import { createRef, forwardRef as forwardRef3 } from "react";
+import { flushSync as flushSync2 } from "react-dom";
+import { createRoot as createRoot2 } from "react-dom/client";
+
+// src/chat-ui/components/ChatPanel/TextChatUIComponent.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef5,
+  useState as useState5
+} from "react";
+
+// src/chat-ui/helpers.tsx
+import { useEffect, useLayoutEffect, useRef as useRef2 } from "react";
+function useClickOutside(cb) {
+  const ref = useRef2(null);
+  const refCb = useRef2(cb);
+  useLayoutEffect(() => {
+    refCb.current = cb;
+  });
+  useEffect(() => {
+    const handler = (e) => {
+      const element = ref.current;
+      if (element && !element.contains(e.target)) {
+        refCb.current(e);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("touchstart", handler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("touchstart", handler);
+    };
+  }, []);
+  return ref;
+}
+
+// src/chat-ui/icons/Chat.svg
+var Chat_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.7 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z"/></svg>';
+
+// src/chat-ui/icons/Pin.svg
+var Pin_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M32 32C32 14.3 46.3 0 64 0H320c17.7 0 32 14.3 32 32s-14.3 32-32 32H290.5l11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3H32c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64H64C46.3 64 32 49.7 32 32zM160 384h64v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384z"/></svg>';
+
+// src/chat-ui/components/Input/InputBox.tsx
+import { forwardRef as forwardRef2, useImperativeHandle, useRef as useRef3, useState as useState2 } from "react";
+
+// src/chat-ui/icons/PaperPlane.svg
+var PaperPlane_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>';
+
+// esbuild-css-modules-plugin-ns-js::src/chat-ui/components/Input/InputBox.module.css:injector.js
+var content2 = globalThis['__css-content-693110aba86e39d3ac419c61db5456a8__'];
+var digest2 = globalThis['__css-digest-693110aba86e39d3ac419c61db5456a8__'];
+var inject2 = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest2);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest2;
+      const text = globalThis.document.createTextNode(content2);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
+};
+
+// src/chat-ui/components/Input/InputBox.module.css
+var InputBox_default = new Proxy({
+  "chatInput": "InputBox-module__chatInput_adOgOW__0230",
+  "inputWrapper": "InputBox-module__inputWrapper_adOgOW__0230",
+  "sendButton": "InputBox-module__sendButton_adOgOW__0230",
+  "svgIcon": "InputBox-module__svgIcon_adOgOW__0230"
+}, {
+  get: function(source, key) {
+    inject2();
+    return source[key];
+  }
+});
+
+// src/chat-ui/components/Input/InputBox.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var InputBox = forwardRef2(
+  ({ onSendMessage, hide, setFocus }, ref) => {
+    const inputRef = useRef3(null);
+    const buttonRef = useRef3(null);
+    const [inputValue, setInputValue] = useState2("");
+    useImperativeHandle(ref, () => ({
+      focusInput: () => {
+        if (inputRef.current) inputRef.current.focus();
+      }
+    }));
+    const handleInputChange = (e) => {
+      setInputValue(e.target.value);
+    };
+    const handleSendClick = () => {
+      if (inputValue.trim() !== "") {
+        onSendMessage(inputValue.trim());
+        setInputValue("");
+      }
+    };
+    const handleKeyPress = (e) => {
+      var _a;
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        if (((_a = inputRef.current) == null ? void 0 : _a.value.trim().length) === 0) {
+          if (buttonRef.current) buttonRef.current.focus();
+          hide();
+          return;
+        }
+        handleSendClick();
+      }
+    };
+    return /* @__PURE__ */ jsxs2("div", { className: InputBox_default.inputWrapper, children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          placeholder: "Type your message here...",
+          value: inputValue,
+          onChange: handleInputChange,
+          className: InputBox_default.chatInput,
+          onKeyDown: handleKeyPress,
+          onFocus: setFocus
+        }
+      ),
+      /* @__PURE__ */ jsx3("button", { ref: buttonRef, onClick: handleSendClick, className: InputBox_default.sendButton, children: /* @__PURE__ */ jsx3("div", { className: InputBox_default.svgIcon, children: /* @__PURE__ */ jsx3("img", { src: `data:image/svg+xml;utf8,${encodeURIComponent(PaperPlane_default)}` }) }) })
+    ] });
+  }
+);
+InputBox.displayName = "InputBox";
+
+// src/chat-ui/components/Messages/Messages.tsx
+import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+
+// src/chat-ui/components/Message/Message.tsx
+import { useState as useState3, useEffect as useEffect2, useCallback } from "react";
+
+// esbuild-css-modules-plugin-ns-js::src/chat-ui/components/Message/Message.module.css:injector.js
+var content3 = globalThis['__css-content-693110aba86e39d3ac419c61db5456a8__'];
+var digest3 = globalThis['__css-digest-693110aba86e39d3ac419c61db5456a8__'];
+var inject3 = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest3);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest3;
+      const text = globalThis.document.createTextNode(content3);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
+};
+
+// src/chat-ui/components/Message/Message.module.css
+var Message_default = new Proxy({
+  "messageContainer": "Message-module__messageContainer_ikOQiq__0230",
+  "userName": "Message-module__userName_ikOQiq__0230"
+}, {
+  get: function(source, key) {
+    inject3();
+    return source[key];
+  }
+});
+
+// src/chat-ui/components/Message/Message.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ReverseHash(input) {
+  const stringLength = input.length;
+  let hash = 5381;
+  for (let i = stringLength - 1; i >= 0; i--) {
+    hash = (hash << 5) + hash + input.charCodeAt(i);
+  }
+  return hash;
+}
+function generateValueFromThresholds(hash, thresholds) {
+  const selectedThreshold = thresholds[hash % thresholds.length];
+  const min = Math.min(...selectedThreshold);
+  const max = Math.max(...selectedThreshold);
+  const thresholdRange = Math.abs(max - min);
+  return hash % thresholdRange + min;
+}
+function hslForString(input, options = DEFAULT_HSL_OPTIONS) {
+  let hash = Math.abs(ReverseHash("lightness: " + input));
+  const lightness = options.lightnessThresholds ? generateValueFromThresholds(hash, options.lightnessThresholds) : generateValueFromThresholds(hash, DEFAULT_HSL_OPTIONS.lightnessThresholds);
+  hash = Math.abs(ReverseHash("saturation:" + input));
+  const saturation = options.saturationThresholds ? generateValueFromThresholds(hash, options.saturationThresholds) : generateValueFromThresholds(hash, DEFAULT_HSL_OPTIONS.saturationThresholds);
+  hash = Math.abs(ReverseHash("hue:" + input));
+  const hue = options.hueThresholds ? generateValueFromThresholds(hash, options.hueThresholds) : generateValueFromThresholds(hash, DEFAULT_HSL_OPTIONS.hueThresholds);
+  return [hue, saturation, lightness];
+}
+var Message = ({ username, message, stringToHslOptions }) => {
+  const [userColors, setUserColors] = useState3(/* @__PURE__ */ new Map());
+  const generateColorForUsername = useCallback(() => {
+    const [hue, saturation, lightness] = hslForString(username, stringToHslOptions);
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  }, [stringToHslOptions, username]);
+  useEffect2(() => {
+    if (!userColors.has(username)) {
+      const color = generateColorForUsername();
+      setUserColors(new Map(userColors).set(username, color));
+    }
+  }, [username, userColors, generateColorForUsername]);
+  const userColor = userColors.get(username) || "hsl(0, 0%, 0%)";
+  return /* @__PURE__ */ jsxs3("div", { className: Message_default.messageContainer, children: [
+    /* @__PURE__ */ jsx4("span", { className: Message_default.userName, style: { color: userColor }, children: username }),
+    ": ",
+    message
+  ] });
+};
+var Message_default2 = Message;
+
+// esbuild-css-modules-plugin-ns-js::src/chat-ui/components/Messages/Messages.module.css:injector.js
+var content4 = globalThis['__css-content-693110aba86e39d3ac419c61db5456a8__'];
+var digest4 = globalThis['__css-digest-693110aba86e39d3ac419c61db5456a8__'];
+var inject4 = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest4);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest4;
+      const text = globalThis.document.createTextNode(content4);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
+};
+
+// src/chat-ui/components/Messages/Messages.module.css
+var Messages_default = new Proxy({
+  "messagesContainer": "Messages-module__messagesContainer_LXaUUW__0230",
+  "newMessagesButton": "Messages-module__newMessagesButton_LXaUUW__0230"
+}, {
+  get: function(source, key) {
+    inject4();
+    return source[key];
+  }
+});
+
+// src/chat-ui/components/Messages/Messages.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SCROLL_THRESHOLD_PX = 10;
+var Messages = ({ messages, stringToHslOptions, shouldAutoScroll }) => {
+  const messagesEndRef = useRef4(null);
+  const containerRef = useRef4(null);
+  const [unreadCount, setUnreadCount] = useState4(0);
+  const [lastReadMessageIndex, setLastReadMessageIndex] = useState4(0);
+  const [wasAtBottom, setWasAtBottom] = useState4(true);
+  const isAtBottom = () => {
+    if (!containerRef.current) return true;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    return Math.abs(scrollHeight - clientHeight - scrollTop) < SCROLL_THRESHOLD_PX;
+  };
+  const handleScroll = () => {
+    const atBottom = isAtBottom();
+    setWasAtBottom(atBottom);
+    if (atBottom && unreadCount > 0) {
+      setUnreadCount(0);
+      setLastReadMessageIndex(messages.length - 1);
+    }
+  };
+  const scrollToBottom = () => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+    setUnreadCount(0);
+    setLastReadMessageIndex(messages.length - 1);
+    setWasAtBottom(true);
+  };
+  useEffect3(() => {
+    if (messages.length === 0) return;
+    const shouldScroll = shouldAutoScroll || wasAtBottom;
+    if (shouldScroll) {
+      setTimeout(() => {
+        if (!isAtBottom()) {
+          if (messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+          }
+        }
+        setWasAtBottom(true);
+      }, 0);
+      setUnreadCount(0);
+      setLastReadMessageIndex(messages.length - 1);
+    } else {
+      const newUnreadCount = messages.length - 1 - lastReadMessageIndex;
+      setUnreadCount(newUnreadCount);
+    }
+  }, [messages, shouldAutoScroll, wasAtBottom, lastReadMessageIndex]);
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: Messages_default.messagesContainer, onScroll: handleScroll, children: [
+      messages.map((msg, index) => /* @__PURE__ */ jsx5(
+        Message_default2,
+        {
+          username: msg.username,
+          message: msg.message,
+          stringToHslOptions
+        },
+        index
+      )),
+      /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
+    ] }),
+    unreadCount > 0 && /* @__PURE__ */ jsxs4("button", { className: Messages_default.newMessagesButton, onClick: scrollToBottom, children: [
+      unreadCount,
+      " new message",
+      unreadCount !== 1 ? "s" : ""
+    ] })
+  ] });
+};
+
+// esbuild-css-modules-plugin-ns-js::src/chat-ui/components/ChatPanel/TextChatUIComponent.module.css:injector.js
+var content5 = globalThis['__css-content-693110aba86e39d3ac419c61db5456a8__'];
+var digest5 = globalThis['__css-digest-693110aba86e39d3ac419c61db5456a8__'];
+var inject5 = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest5);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest5;
+      const text = globalThis.document.createTextNode(content5);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
+};
+
+// src/chat-ui/components/ChatPanel/TextChatUIComponent.module.css
+var TextChatUIComponent_default = new Proxy({
+  "closeButton": "TextChatUIComponent-module__closeButton_gFDdcW__0230",
+  "controls": "TextChatUIComponent-module__controls_gFDdcW__0230",
+  "fadeIn": "TextChatUIComponent-module__fadeIn_gFDdcW__0230",
+  "fadeOut": "TextChatUIComponent-module__fadeOut_gFDdcW__0230",
+  "messagesWrapper": "TextChatUIComponent-module__messagesWrapper_gFDdcW__0230",
+  "openTab": "TextChatUIComponent-module__openTab_gFDdcW__0230",
+  "stickyButton": "TextChatUIComponent-module__stickyButton_gFDdcW__0230",
+  "stickyButtonEnabled": "TextChatUIComponent-module__stickyButtonEnabled_gFDdcW__0230",
+  "stickyButtonFadeOut": "TextChatUIComponent-module__stickyButtonFadeOut_gFDdcW__0230",
+  "textChat": "TextChatUIComponent-module__textChat_gFDdcW__0230",
+  "textChatUi": "TextChatUIComponent-module__textChatUi_gFDdcW__0230",
+  "uiHover": "TextChatUIComponent-module__uiHover_gFDdcW__0230"
+}, {
+  get: function(source, key) {
+    inject5();
+    return source[key];
+  }
+});
+
+// src/chat-ui/components/ChatPanel/TextChatUIComponent.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var MAX_MESSAGES = 50;
+var SECONDS_TO_FADE_OUT = 6;
+var AUTO_SCROLL_RESET_DELAY_MS = 100;
+var ChatUIComponent = (props, ref) => {
+  const visibleByDefault = props.visibleByDefault ?? true;
+  const [messages, setMessages] = useState5([]);
+  const [isVisible, setIsVisible] = useState5(visibleByDefault);
+  const [isSticky, setSticky] = useState5(visibleByDefault);
+  const [isFocused, setIsFocused] = useState5(false);
+  const [isOpenHovered, setOpenHovered] = useState5(false);
+  const [shouldAutoScroll, setShouldAutoScroll] = useState5(false);
+  const [panelStyle, setPanelStyle] = useState5(TextChatUIComponent_default.fadeOut);
+  const [stickyStyle, setStickyStyle] = useState5(TextChatUIComponent_default.stickyButton);
+  const stickyButtonRef = useRef5(null);
+  const closeButtonRef = useRef5(null);
+  const hideTimeoutRef = useRef5(null);
+  const inputBoxRef = useRef5(null);
+  const startHideTimeout = useCallback2(() => {
+    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    hideTimeoutRef.current = setTimeout(() => {
+      if (isVisible) {
+        setIsVisible(false);
+      }
+    }, SECONDS_TO_FADE_OUT * 1e3);
+  }, [isVisible]);
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Enter") {
+        if (!isVisible) setIsVisible(true);
+        setIsFocused(true);
+        if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+        if (inputBoxRef.current) inputBoxRef.current.focusInput();
+      }
+    },
+    [isVisible]
+  );
+  const handleBlur = useCallback2(() => {
+    if (isFocused) setIsFocused(false);
+    startHideTimeout();
+    if (closeButtonRef.current) closeButtonRef.current.focus();
+  }, [isFocused, startHideTimeout]);
+  const hide = () => {
+    setIsVisible(false);
+    setIsFocused(false);
+    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+  };
+  const handleRootClick = (e) => {
+    e.stopPropagation();
+    setOpenHovered(true);
+    if (!isVisible) setIsVisible(true);
+  };
+  const handleStickyButton = (e) => {
+    e.stopPropagation();
+    setSticky(!isSticky);
+  };
+  const handleWheel = (e) => {
+    e.stopPropagation();
+  };
+  const handleMouseLeave = () => {
+    setOpenHovered(false);
+    if (!isFocused && !isSticky && isVisible) {
+      startHideTimeout();
+    }
+  };
+  const handleMouseEnter = () => {
+    setOpenHovered(true);
+    if (!isVisible) setIsVisible(true);
+  };
+  const chatPanelRef = useClickOutside(() => {
+    if (isFocused) {
+      setIsFocused(false);
+      startHideTimeout();
+    }
+  });
+  useEffect4(() => {
+    if (isVisible && isSticky) {
+      if (chatPanelRef.current) chatPanelRef.current.style.zIndex = "100";
+    }
+    setPanelStyle(isVisible || isFocused || isSticky ? TextChatUIComponent_default.fadeIn : TextChatUIComponent_default.fadeOut);
+    setStickyStyle(
+      isSticky ? TextChatUIComponent_default.stickyButtonEnabled : isOpenHovered ? TextChatUIComponent_default.stickyButton : TextChatUIComponent_default.stickyButtonFadeOut
+    );
+    if (chatPanelRef.current && chatPanelRef.current.style.zIndex !== "100") {
+      setTimeout(() => {
+        if (chatPanelRef.current) chatPanelRef.current.style.zIndex = "100";
+      }, 2e3);
+    }
+  }, [isVisible, isSticky, isFocused, chatPanelRef, isOpenHovered]);
+  const appendMessages = (username, message) => {
+    setMessages((prev) => {
+      const newMessages = [...prev, { username, message }];
+      return newMessages.length > MAX_MESSAGES ? newMessages.slice(-MAX_MESSAGES) : newMessages;
+    });
+  };
+  useImperativeHandle2(ref, () => ({
+    addMessage: (username, message) => {
+      appendMessages(username, message);
+      if (!isVisible) setIsVisible(true);
+      startHideTimeout();
+    }
+  }));
+  const handleSendMessage = (message) => {
+    setShouldAutoScroll(true);
+    props.sendMessageToServer(message);
+    setTimeout(() => setShouldAutoScroll(false), AUTO_SCROLL_RESET_DELAY_MS);
+  };
+  const setFocus = () => setIsFocused(true);
+  useEffect4(() => {
+    window.addEventListener("keydown", handleKeyDown, false);
+    window.addEventListener("blur", handleBlur, false);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, false);
+      window.removeEventListener("blur", handleBlur, false);
+    };
+  }, [handleBlur, handleKeyDown]);
+  return /* @__PURE__ */ jsxs5("div", { className: TextChatUIComponent_default.textChatUi, children: [
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: TextChatUIComponent_default.uiHover,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleRootClick,
+        children: [
+          /* @__PURE__ */ jsx6("div", { className: TextChatUIComponent_default.openTab, onClick: hide, children: /* @__PURE__ */ jsx6("img", { src: `data:image/svg+xml;utf8,${encodeURIComponent(Chat_default)}` }) }),
+          /* @__PURE__ */ jsx6("div", { ref: stickyButtonRef, className: stickyStyle, onClick: handleStickyButton, children: /* @__PURE__ */ jsx6("img", { src: `data:image/svg+xml;utf8,${encodeURIComponent(Pin_default)}` }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: chatPanelRef,
+        style: { zIndex: -1 },
+        id: "text-chat-wrapper",
+        className: `${TextChatUIComponent_default.textChat} ${panelStyle}`,
+        onWheel: handleWheel,
+        children: [
+          /* @__PURE__ */ jsx6("div", { className: TextChatUIComponent_default.messagesWrapper, children: /* @__PURE__ */ jsx6(
+            Messages,
+            {
+              messages,
+              stringToHslOptions: props.stringToHslOptions,
+              shouldAutoScroll
+            }
+          ) }),
+          /* @__PURE__ */ jsx6(
+            InputBox,
+            {
+              ref: inputBoxRef,
+              onSendMessage: handleSendMessage,
+              hide,
+              setFocus
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/chat-ui/TextChatUI.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var DEFAULT_HUE_RANGES = [[10, 350]];
+var DEFAULT_SATURATION_RANGES = [[60, 100]];
+var DEFAULT_LIGHTNESS_RANGES = [[65, 75]];
+var DEFAULT_HSL_OPTIONS = {
+  hueThresholds: DEFAULT_HUE_RANGES,
+  saturationThresholds: DEFAULT_SATURATION_RANGES,
+  lightnessThresholds: DEFAULT_LIGHTNESS_RANGES
+};
+var ForwardedChatUIComponent = forwardRef3(ChatUIComponent);
+var TextChatUI = class {
+  constructor(config) {
+    this.config = config;
+    this.config.holderElement.appendChild(this.wrapper);
+    this.root = createRoot2(this.wrapper);
+  }
+  root;
+  appRef = createRef();
+  addTextMessage(username, message) {
+    if (this.appRef.current) {
+      this.appRef.current.addMessage(username, message);
+    }
+  }
+  wrapper = document.createElement("div");
+  dispose() {
+    this.root.unmount();
+    this.wrapper.remove();
+  }
+  init() {
+    flushSync2(
+      () => this.root.render(
+        /* @__PURE__ */ jsx7(
+          ForwardedChatUIComponent,
+          {
+            ref: this.appRef,
+            sendMessageToServer: this.config.sendMessageToServerMethod,
+            visibleByDefault: this.config.visibleByDefault,
+            stringToHslOptions: this.config.stringToHslOptions
+          }
+        )
+      )
+    );
+  }
+};
+
+// esbuild-css-modules-plugin-ns-js::src/Networked3dWebExperience.module.css:injector.js
+var content6 = globalThis['__css-content-693110aba86e39d3ac419c61db5456a8__'];
+var digest6 = globalThis['__css-digest-693110aba86e39d3ac419c61db5456a8__'];
+var inject6 = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest6);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest6;
+      const text = globalThis.document.createTextNode(content6);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
+};
+
+// src/Networked3dWebExperience.module.css
+var Networked3dWebExperience_default = new Proxy({
+  "respawnButton": "Networked3dWebExperience-module__respawnButton_7g9l0W__0230"
+}, {
+  get: function(source, key) {
+    inject6();
+    return source[key];
+  }
+});
+
+// src/Networked3dWebExperienceClient.ts
 function normalizeSpawnConfiguration(spawnConfig) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   return {
@@ -66,30 +1073,6 @@ var Networked3dWebExperienceClient = class {
   constructor(holderElement, config) {
     this.holderElement = holderElement;
     this.config = config;
-    this.scene = new Scene();
-    this.tweakPane = null;
-    this.audioListener = new AudioListener();
-    this.collisionsManager = new CollisionsManager(this.scene);
-    this.characterModelLoader = new CharacterModelLoader();
-    this.timeManager = new TimeManager();
-    this.keyInputManager = new KeyInputManager();
-    this.mmlFrames = {};
-    this.clientId = null;
-    this.remoteUserStates = /* @__PURE__ */ new Map();
-    this.userProfiles = /* @__PURE__ */ new Map();
-    this.networkChat = null;
-    this.textChatUI = null;
-    this.avatarSelectionUI = null;
-    this.voiceChatManager = null;
-    this.latestCharacterObject = {
-      characterState: null
-    };
-    this.characterControllerPaneSet = false;
-    this.initialLoadCompleted = false;
-    this.loadingProgressManager = new LoadingProgressManager();
-    this.currentRequestAnimationFrame = null;
-    this.groundPlane = null;
-    this.respawnButton = null;
     var _a;
     this.element = document.createElement("div");
     this.element.style.position = "absolute";
@@ -106,8 +1089,10 @@ var Networked3dWebExperienceClient = class {
     this.canvasHolder.style.width = "100%";
     this.canvasHolder.style.height = "100%";
     this.element.appendChild(this.canvasHolder);
+    this.collisionsManager = new CollisionsManager(this.scene);
     this.cameraManager = new CameraManager(this.canvasHolder, this.collisionsManager);
     this.cameraManager.camera.add(this.audioListener);
+    this.characterModelLoader = new CharacterModelLoader();
     this.virtualJoystick = new VirtualJoystick(this.element, {
       radius: 70,
       innerRadius: 20,
@@ -117,7 +1102,8 @@ var Networked3dWebExperienceClient = class {
       scene: this.scene,
       cameraManager: this.cameraManager,
       spawnSun: true,
-      environmentConfiguration: this.config.environmentConfiguration
+      environmentConfiguration: this.config.environmentConfiguration,
+      postProcessingEnabled: this.config.postProcessingEnabled
     });
     this.canvasHolder.appendChild(this.composer.renderer.domElement);
     if (this.config.enableTweakPane !== false) {
@@ -127,62 +1113,88 @@ var Networked3dWebExperienceClient = class {
       this.composer.fitContainer();
     });
     resizeObserver.observe(this.element);
+    this.spawnConfiguration = normalizeSpawnConfiguration(this.config.spawnConfiguration);
+    const spawnData = getSpawnData(this.spawnConfiguration, true);
+    const spawnRotation = new Quat().setFromEulerXYZ(spawnData.spawnRotation);
     const initialNetworkLoadRef = {};
     this.loadingProgressManager.addLoadingAsset(initialNetworkLoadRef, "network", "network");
-    this.networkClient = new UserNetworkingClient({
-      url: this.config.userNetworkAddress,
-      sessionToken: this.config.sessionToken,
-      websocketFactory: (url) => new WebSocket(url),
-      statusUpdateCallback: (status) => {
-        if (status === WebsocketStatus.Disconnected || status === WebsocketStatus.Reconnecting) {
-          this.characterManager.clear();
-          this.remoteUserStates.clear();
-          this.clientId = null;
-        }
-      },
-      assignedIdentity: (clientId) => {
-        console.log(`Assigned ID: ${clientId}`);
-        this.clientId = clientId;
-        if (this.initialLoadCompleted) {
-          this.spawnCharacter();
-        } else {
-          this.loadingProgressManager.completedLoadingAsset(initialNetworkLoadRef);
-        }
-      },
-      clientUpdate: (remoteClientId, userNetworkingClientUpdate) => {
-        if (userNetworkingClientUpdate === null) {
-          this.remoteUserStates.delete(remoteClientId);
-        } else {
-          this.remoteUserStates.set(remoteClientId, userNetworkingClientUpdate);
+    this.networkClient = new UserNetworkingClient(
+      {
+        url: this.config.userNetworkAddress,
+        sessionToken: this.config.sessionToken,
+        websocketFactory: (url) => new WebSocket(url, "delta-net-v0.1"),
+        statusUpdateCallback: (status) => {
+          console.log(`Websocket status: ${status}`);
+          if (status === WebsocketStatus.Disconnected || status === WebsocketStatus.Reconnecting) {
+            this.characterManager.clear();
+            this.remoteUserStates.clear();
+            this.clientId = null;
+          }
+        },
+        assignedIdentity: (clientId) => {
+          console.log(`Assigned ID: ${clientId}`);
+          this.clientId = clientId;
+          if (this.initialLoadCompleted) {
+            const spawnData2 = getSpawnData(this.spawnConfiguration, true);
+            this.spawnCharacter(spawnData2);
+          } else {
+            this.loadingProgressManager.completedLoadingAsset(initialNetworkLoadRef);
+          }
+        },
+        onUpdate: (update) => {
+          this.onNetworkUpdate(update);
+        },
+        onServerError: (error) => {
+          switch (error.errorType) {
+            case DeltaNetV01ServerErrors.USER_AUTHENTICATION_FAILED_ERROR_TYPE:
+              this.disposeWithError(error.message);
+              break;
+            case DeltaNetV01ServerErrors.USER_NETWORKING_CONNECTION_LIMIT_REACHED_ERROR_TYPE:
+              this.disposeWithError(error.message);
+              break;
+            case DeltaNetV01ServerErrors.USER_NETWORKING_SERVER_SHUTDOWN_ERROR_TYPE:
+              this.disposeWithError(error.message || "Server shutdown");
+              break;
+            default:
+              console.error(`Unhandled server error: ${error.message}`);
+              this.disposeWithError(error.message);
+          }
+        },
+        onCustomMessage: (customType, contents) => {
+          var _a2, _b;
+          if (customType === SERVER_BROADCAST_MESSAGE_TYPE) {
+            const serverBroadcastMessage = parseServerBroadcastMessage(contents);
+            if (serverBroadcastMessage instanceof Error) {
+              console.error(`Invalid server broadcast message: ${contents}`);
+            } else {
+              (_b = (_a2 = this.config).onServerBroadcast) == null ? void 0 : _b.call(_a2, serverBroadcastMessage);
+            }
+          } else if (customType === FROM_SERVER_CHAT_MESSAGE_TYPE) {
+            const serverChatMessage = parseServerChatMessage(contents);
+            if (serverChatMessage instanceof Error) {
+              console.error(`Invalid server chat message: ${contents}`);
+            } else {
+              this.handleChatMessage(serverChatMessage.fromUserId, serverChatMessage.message);
+            }
+          } else {
+            console.warn(`Did not recognize custom message type ${customType}`);
+          }
         }
       },
-      clientProfileUpdated: (clientId, username, characterDescription) => {
-        this.updateUserProfile(clientId, {
-          username,
-          characterDescription
-        });
+      {
+        username: null,
+        characterDescription: null,
+        colors: null
       },
-      onServerError: (error) => {
-        switch (error.errorType) {
-          case USER_NETWORKING_AUTHENTICATION_FAILED_ERROR_TYPE:
-            this.disposeWithError(error.message);
-            break;
-          case USER_NETWORKING_CONNECTION_LIMIT_REACHED_ERROR_TYPE:
-            this.disposeWithError(error.message);
-            break;
-          case USER_NETWORKING_SERVER_SHUTDOWN_ERROR_TYPE:
-            this.disposeWithError(error.message || "Server shutdown");
-            break;
-          default:
-            console.error(`Unhandled server error: ${error.message}`);
-            this.disposeWithError(error.message);
-        }
-      },
-      onServerBroadcast: (broadcast) => {
-        var _a2, _b;
-        (_b = (_a2 = this.config).onServerBroadcast) == null ? void 0 : _b.call(_a2, broadcast);
+      {
+        position: spawnData.spawnPosition,
+        rotation: {
+          quaternionY: spawnRotation.y,
+          quaternionW: spawnRotation.w
+        },
+        state: 0
       }
-    });
+    );
     if (this.config.allowOrbitalCamera) {
       this.keyInputManager.createKeyBinding(Key.C, () => {
         if (document.activeElement === document.body) {
@@ -191,7 +1203,10 @@ var Networked3dWebExperienceClient = class {
         }
       });
     }
-    this.spawnConfiguration = normalizeSpawnConfiguration(this.config.spawnConfiguration);
+    const animationsPromise = Character.loadAnimations(
+      this.characterModelLoader,
+      this.config.animationConfig
+    );
     this.characterManager = new CharacterManager({
       composer: this.composer,
       characterModelLoader: this.characterModelLoader,
@@ -205,7 +1220,10 @@ var Networked3dWebExperienceClient = class {
         this.latestCharacterObject.characterState = characterState;
         this.networkClient.sendUpdate(characterState);
       },
-      animationConfig: this.config.animationConfig,
+      sendLocalCharacterColors: (colors) => {
+        this.networkClient.updateColors(colors);
+      },
+      animationsPromise,
       spawnConfiguration: this.spawnConfiguration,
       characterResolve: (characterId) => {
         return this.resolveCharacterData(characterId);
@@ -214,7 +1232,8 @@ var Networked3dWebExperienceClient = class {
     });
     this.scene.add(this.characterManager.group);
     if (this.spawnConfiguration.enableRespawnButton) {
-      this.element.appendChild(this.characterManager.createRespawnButton());
+      this.respawnButton = this.createRespawnButton();
+      this.element.appendChild(this.respawnButton);
     }
     this.setGroundPlaneEnabled(((_a = this.config.environmentConfiguration) == null ? void 0 : _a.groundPlane) ?? true);
     this.setupMMLScene();
@@ -224,14 +1243,46 @@ var Networked3dWebExperienceClient = class {
       const [, completed] = this.loadingProgressManager.toRatio();
       if (completed && !this.initialLoadCompleted) {
         this.initialLoadCompleted = true;
-        this.connectToVoiceChat();
         this.connectToTextChat();
         this.mountAvatarSelectionUI();
-        this.spawnCharacter();
+        this.spawnCharacter(spawnData);
       }
     });
     this.loadingProgressManager.setInitialLoad(true);
   }
+  element;
+  canvasHolder;
+  scene = new Scene();
+  composer;
+  tweakPane = null;
+  audioListener = new AudioListener();
+  cameraManager;
+  collisionsManager;
+  characterModelLoader;
+  characterManager;
+  timeManager = new TimeManager();
+  keyInputManager = new KeyInputManager();
+  virtualJoystick;
+  mmlCompositionScene;
+  mmlFrames = {};
+  clientId = null;
+  networkClient;
+  remoteUserStates = /* @__PURE__ */ new Map();
+  userProfiles = /* @__PURE__ */ new Map();
+  textChatUI = null;
+  avatarSelectionUI = null;
+  latestCharacterObject = {
+    characterState: null
+  };
+  characterControllerPaneSet = false;
+  spawnConfiguration;
+  initialLoadCompleted = false;
+  loadingProgressManager = new LoadingProgressManager();
+  loadingScreen;
+  errorScreen;
+  groundPlane = null;
+  respawnButton = null;
+  currentRequestAnimationFrame = null;
   setGroundPlaneEnabled(enabled) {
     if (enabled && this.groundPlane === null) {
       this.groundPlane = new GroundPlane();
@@ -244,7 +1295,6 @@ var Networked3dWebExperienceClient = class {
     }
   }
   updateConfig(config) {
-    var _a;
     this.config = {
       ...this.config,
       ...config
@@ -267,6 +1317,14 @@ var Networked3dWebExperienceClient = class {
         this.setupTweakPane();
       }
     }
+    if (this.config.postProcessingEnabled !== void 0) {
+      this.composer.togglePostProcessing(this.config.postProcessingEnabled);
+      if (this.tweakPane) {
+        this.tweakPane.dispose();
+        this.tweakPane = null;
+        this.setupTweakPane();
+      }
+    }
     if (config.allowOrbitalCamera !== void 0) {
       if (config.allowOrbitalCamera === false) {
         this.keyInputManager.removeKeyBinding(Key.C);
@@ -282,11 +1340,9 @@ var Networked3dWebExperienceClient = class {
         });
       }
     }
-    if (config.chatNetworkAddress !== void 0) {
-      if (config.chatNetworkAddress === null && this.networkChat !== null) {
-        this.networkChat.stop();
-        this.networkChat = null;
-        (_a = this.textChatUI) == null ? void 0 : _a.dispose();
+    if (config.enableChat) {
+      if (!config.enableChat && this.textChatUI !== null) {
+        this.textChatUI.dispose();
         this.textChatUI = null;
       } else {
         this.connectToTextChat();
@@ -297,7 +1353,7 @@ var Networked3dWebExperienceClient = class {
       this.characterManager.localController.updateSpawnConfig(this.spawnConfiguration);
     }
     if (this.spawnConfiguration.enableRespawnButton && !this.respawnButton) {
-      this.respawnButton = this.characterManager.createRespawnButton();
+      this.respawnButton = this.createRespawnButton();
       this.element.appendChild(this.respawnButton);
     } else if (!this.spawnConfiguration.enableRespawnButton && this.respawnButton) {
       this.respawnButton.remove();
@@ -318,6 +1374,16 @@ var Networked3dWebExperienceClient = class {
     document.body.appendChild(holder);
     return holder;
   }
+  createRespawnButton() {
+    const respawnButton = document.createElement("div");
+    respawnButton.className = Networked3dWebExperience_default.respawnButton;
+    respawnButton.textContent = "RESPAWN";
+    respawnButton.addEventListener("click", () => {
+      var _a;
+      (_a = this.characterManager.localController) == null ? void 0 : _a.resetPosition();
+    });
+    return respawnButton;
+  }
   resolveCharacterData(clientId) {
     const user = this.userProfiles.get(clientId);
     if (!user) {
@@ -325,41 +1391,43 @@ var Networked3dWebExperienceClient = class {
     }
     return {
       username: user.username,
-      characterDescription: user.characterDescription
+      characterDescription: user.characterDescription,
+      colors: user.colors
     };
   }
-  updateUserProfile(id, userData) {
-    console.log(`Update user_profile for id=${id} (username=${userData.username})`);
-    this.userProfiles.set(id, userData);
-    if (this.textChatUI && id === this.clientId) {
-      this.textChatUI.setClientName(userData.username);
+  onNetworkUpdate(update) {
+    const { removedUserIds, addedUserIds, updatedUsers } = update;
+    for (const clientId of removedUserIds) {
+      this.userProfiles.delete(clientId);
+      this.remoteUserStates.delete(clientId);
+    }
+    for (const [clientId, userData] of addedUserIds) {
+      this.userProfiles.set(clientId, userData.userState);
+      this.remoteUserStates.set(clientId, userData.components);
+    }
+    for (const [clientId, userDataUpdate] of updatedUsers) {
+      const userState = userDataUpdate.userState;
+      if (userState) {
+        if (userState.username !== void 0) {
+          this.userProfiles.get(clientId).username = userState.username;
+        }
+        if (userState.characterDescription !== void 0) {
+          this.userProfiles.get(clientId).characterDescription = userState.characterDescription;
+        }
+        if (userState.colors !== void 0) {
+          this.userProfiles.get(clientId).colors = userState.colors;
+        }
+        this.characterManager.networkCharacterInfoUpdated(clientId);
+      }
+      this.remoteUserStates.set(clientId, userDataUpdate.components);
     }
-    this.characterManager.respawnIfPresent(id);
   }
   sendIdentityUpdateToServer(displayName, characterDescription) {
     if (!this.clientId) {
       throw new Error("Client ID not set");
     }
-    this.networkClient.sendMessage({
-      type: USER_NETWORKING_USER_UPDATE_MESSAGE_TYPE,
-      userIdentity: {
-        username: displayName,
-        characterDescription
-      }
-    });
-  }
-  connectToVoiceChat() {
-    if (this.clientId === null) return;
-    if (this.voiceChatManager === null && this.config.voiceChatAddress) {
-      this.voiceChatManager = new VoiceChatManager({
-        url: this.config.voiceChatAddress,
-        holderElement: this.element,
-        userId: this.clientId,
-        remoteUserStates: this.remoteUserStates,
-        latestCharacterObj: this.latestCharacterObject,
-        autoJoin: false
-      });
-    }
+    this.networkClient.updateUsername(displayName);
+    this.networkClient.updateCharacterDescription(characterDescription);
   }
   setupTweakPane() {
     if (this.tweakPane) {
@@ -369,57 +1437,53 @@ var Networked3dWebExperienceClient = class {
       this.element,
       this.composer.renderer,
       this.scene,
-      this.composer.effectComposer
+      this.composer,
+      this.config.postProcessingEnabled
     );
     this.cameraManager.setupTweakPane(this.tweakPane);
     this.composer.setupTweakPane(this.tweakPane);
   }
+  handleChatMessage(fromUserId, message) {
+    if (this.textChatUI === null) {
+      return;
+    }
+    if (fromUserId === 0) {
+      this.textChatUI.addTextMessage("System", message);
+    } else {
+      const user = this.userProfiles.get(fromUserId);
+      if (!user) {
+        console.error(`User not found for clientId ${fromUserId}`);
+        return;
+      }
+      const username = user.username ?? `Unknown User ${fromUserId}`;
+      this.textChatUI.addTextMessage(username, message);
+      this.characterManager.addChatBubble(fromUserId, message);
+    }
+  }
   connectToTextChat() {
     if (this.clientId === null) {
       return;
     }
-    if (this.networkChat === null && this.config.chatNetworkAddress) {
+    if (this.config.enableChat && this.textChatUI === null) {
       const user = this.userProfiles.get(this.clientId);
       if (!user) {
         throw new Error("User not found");
       }
-      if (this.textChatUI === null) {
-        const textChatUISettings = {
-          holderElement: this.element,
-          clientname: user.username,
-          sendMessageToServerMethod: (message) => {
-            this.characterManager.addSelfChatBubble(message);
-            this.mmlCompositionScene.onChatMessage(message);
-            if (this.clientId === null || this.networkChat === null) return;
-            this.networkChat.sendChatMessage(message);
-          },
-          visibleByDefault: this.config.chatVisibleByDefault,
-          stringToHslOptions: this.config.userNameToColorOptions
-        };
-        this.textChatUI = new TextChatUI(textChatUISettings);
-        this.textChatUI.init();
-      }
-      this.networkChat = new ChatNetworkingClient({
-        url: this.config.chatNetworkAddress,
-        sessionToken: this.config.sessionToken,
-        websocketFactory: (url) => new WebSocket(url),
-        statusUpdateCallback: (status) => {
-          if (status === WebsocketStatus.Disconnected || status === WebsocketStatus.Reconnecting) {
-          }
+      const textChatUISettings = {
+        holderElement: this.canvasHolder,
+        sendMessageToServerMethod: (message) => {
+          this.characterManager.addSelfChatBubble(message);
+          this.mmlCompositionScene.onChatMessage(message);
+          this.networkClient.sendCustomMessage(
+            FROM_CLIENT_CHAT_MESSAGE_TYPE,
+            JSON.stringify({ message })
+          );
         },
-        clientChatUpdate: (clientId, chatNetworkingUpdate) => {
-          var _a;
-          if (chatNetworkingUpdate !== null && this.textChatUI !== null) {
-            const username = ((_a = this.userProfiles.get(clientId)) == null ? void 0 : _a.username) || "Unknown";
-            this.textChatUI.addTextMessage(username, chatNetworkingUpdate.text);
-            this.characterManager.addChatBubble(clientId, chatNetworkingUpdate.text);
-          }
-        },
-        onServerError: (error) => {
-          console.error(`Chat server error: ${error.message}. errorType: ${error.errorType}`);
-          this.disposeWithError(error.message);
-        }
-      });
+        visibleByDefault: this.config.chatVisibleByDefault,
+        stringToHslOptions: this.config.userNameToColorOptions
+      };
+      this.textChatUI = new TextChatUI(textChatUISettings);
+      this.textChatUI.init();
     }
   }
   mountAvatarSelectionUI() {
@@ -434,8 +1498,10 @@ var Networked3dWebExperienceClient = class {
     this.avatarSelectionUI = new AvatarSelectionUI({
       holderElement: this.element,
       visibleByDefault: false,
-      displayName: ownIdentity.username,
-      characterDescription: ownIdentity.characterDescription,
+      displayName: ownIdentity.username ?? `Unknown User ${this.clientId}`,
+      characterDescription: ownIdentity.characterDescription ?? {
+        meshFileUrl: ""
+      },
       sendIdentityUpdateToServer: this.sendIdentityUpdateToServer.bind(this),
       availableAvatars: ((_a = this.config.avatarConfiguration) == null ? void 0 : _a.availableAvatars) ?? [],
       allowCustomAvatars: (_b = this.config.avatarConfiguration) == null ? void 0 : _b.allowCustomAvatars,
@@ -444,16 +1510,16 @@ var Networked3dWebExperienceClient = class {
     this.avatarSelectionUI.init();
   }
   update() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     this.timeManager.update();
     this.characterManager.update();
-    (_a = this.voiceChatManager) == null ? void 0 : _a.speakingParticipants.forEach((value, id) => {
-      this.characterManager.setSpeakingCharacter(id, value);
-    });
     this.cameraManager.update();
-    (_c = this.composer.sun) == null ? void 0 : _c.updateCharacterPosition((_b = this.characterManager.localCharacter) == null ? void 0 : _b.position);
+    const characterPosition = (_a = this.characterManager.localCharacter) == null ? void 0 : _a.getPosition();
+    (_b = this.composer.sun) == null ? void 0 : _b.updateCharacterPosition(
+      new Vector3((characterPosition == null ? void 0 : characterPosition.x) || 0, (characterPosition == null ? void 0 : characterPosition.y) || 0, (characterPosition == null ? void 0 : characterPosition.z) || 0)
+    );
     this.composer.render(this.timeManager);
-    if ((_d = this.tweakPane) == null ? void 0 : _d.guiVisible) {
+    if ((_c = this.tweakPane) == null ? void 0 : _c.guiVisible) {
       this.tweakPane.updateStats(this.timeManager);
       this.tweakPane.updateCameraData(this.cameraManager);
       if (this.characterManager.localCharacter && this.characterManager.localController) {
@@ -469,60 +1535,29 @@ var Networked3dWebExperienceClient = class {
       this.update();
     });
   }
-  randomWithVariance(value, variance) {
-    const min = value - variance;
-    const max = value + variance;
-    return Math.random() * (max - min) + min;
-  }
-  spawnCharacter() {
+  spawnCharacter({
+    spawnPosition,
+    spawnRotation,
+    cameraPosition
+  }) {
     if (this.clientId === null) {
       throw new Error("Client ID not set");
     }
-    const spawnPosition = new Vector3();
-    spawnPosition.set(
-      this.randomWithVariance(
-        this.spawnConfiguration.spawnPosition.x,
-        this.spawnConfiguration.spawnPositionVariance.x
-      ),
-      this.randomWithVariance(
-        this.spawnConfiguration.spawnPosition.y,
-        this.spawnConfiguration.spawnPositionVariance.y
-      ),
-      this.randomWithVariance(
-        this.spawnConfiguration.spawnPosition.z,
-        this.spawnConfiguration.spawnPositionVariance.z
-      )
-    );
-    const spawnRotation = new Euler(
-      0,
-      -this.spawnConfiguration.spawnYRotation * (Math.PI / 180),
-      0
-    );
-    let cameraPosition = null;
-    const offset = new Vector3(0, 0, 3.3);
-    offset.applyEuler(new Euler(0, spawnRotation.y, 0));
-    cameraPosition = spawnPosition.clone().sub(offset).add(this.characterManager.headTargetOffset);
-    if (window.location.hash && window.location.hash.length > 1) {
-      const urlParams = decodeCharacterAndCamera(window.location.hash.substring(1));
-      spawnPosition.copy(urlParams.character.position);
-      spawnRotation.setFromQuaternion(urlParams.character.quaternion);
-      cameraPosition = urlParams.camera.position;
-    }
     const ownIdentity = this.userProfiles.get(this.clientId);
     if (!ownIdentity) {
       throw new Error("Own identity not found");
     }
     this.characterManager.spawnLocalCharacter(
       this.clientId,
-      ownIdentity.username,
+      ownIdentity.username ?? `Unknown User ${this.clientId}`,
       ownIdentity.characterDescription,
       spawnPosition,
       spawnRotation
     );
     if (cameraPosition !== null) {
-      this.cameraManager.camera.position.copy(cameraPosition);
+      this.cameraManager.camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
       this.cameraManager.setTarget(
-        new Vector3().add(spawnPosition).add(this.characterManager.headTargetOffset)
+        new Vect3().add(spawnPosition).add(CharacterManager.headTargetOffset)
       );
       this.cameraManager.reverseUpdateFromPositions();
     }
@@ -533,24 +1568,24 @@ var Networked3dWebExperienceClient = class {
     this.element.append(this.errorScreen.element);
   }
   dispose() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
+    this.characterManager.dispose();
     this.networkClient.stop();
-    (_a = this.networkChat) == null ? void 0 : _a.stop();
     for (const [key, element] of Object.entries(this.mmlFrames)) {
       element.remove();
     }
     this.mmlFrames = {};
-    (_b = this.textChatUI) == null ? void 0 : _b.dispose();
+    (_a = this.textChatUI) == null ? void 0 : _a.dispose();
     this.mmlCompositionScene.dispose();
     this.composer.dispose();
-    (_c = this.tweakPane) == null ? void 0 : _c.dispose();
+    (_b = this.tweakPane) == null ? void 0 : _b.dispose();
     if (this.currentRequestAnimationFrame !== null) {
       cancelAnimationFrame(this.currentRequestAnimationFrame);
       this.currentRequestAnimationFrame = null;
     }
     this.cameraManager.dispose();
     this.loadingScreen.dispose();
-    (_d = this.errorScreen) == null ? void 0 : _d.dispose();
+    (_c = this.errorScreen) == null ? void 0 : _c.dispose();
   }
   setupMMLScene() {
     registerCustomElementsToWindow(window);