@mml-io/3d-web-experience-client 0.26.1 → 0.27.1

package/build/index.js

@@ -1,4 +1,3 @@
-globalThis['__css-content-9df4d1565589ce63a22b21cf2f9d3ed9__']=".AvatarSelectionUIComponent-module__menuButton_VjZ7cq__0261{z-index:102;user-select:none;width:70px;min-height:70px;position:absolute;top:0;right:0}.AvatarSelectionUIComponent-module__input_VjZ7cq__0261{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__0261:focus{background-color:#0009;border-color:#fff6;box-shadow:0 0 0 3px #ffffff26}.AvatarSelectionUIComponent-module__input_VjZ7cq__0261::placeholder{color:#ffffff80}.AvatarSelectionUIComponent-module__closeButton_VjZ7cq__0261{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__0261:hover{color:#ffffffe6;background:#000c;transform:scale(1.05)}.AvatarSelectionUIComponent-module__closeButton_VjZ7cq__0261:active{transform:scale(.95)}.AvatarSelectionUIComponent-module__openTab_VjZ7cq__0261{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__0261:hover{background:#000c;transform:scale(1.05)}.AvatarSelectionUIComponent-module__openTab_VjZ7cq__0261:active{transform:scale(.95)}.AvatarSelectionUIComponent-module__openTab_VjZ7cq__0261 img{filter:invert(80%);width:24px;height:24px;transition:all .2s ease-in-out}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0261{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__0261::-webkit-scrollbar{width:8px}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0261::-webkit-scrollbar-track{background:none}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0261::-webkit-scrollbar-thumb{background:#fff3;border:1px solid #ffffff1a;border-radius:4px}.AvatarSelectionUIComponent-module__avatarSelectionContainer_VjZ7cq__0261::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.AvatarSelectionUIComponent-module__avatarSelectionSection_VjZ7cq__0261{border-bottom:1px solid #ffffff26;padding:10px}.AvatarSelectionUIComponent-module__avatarSelectionSection_VjZ7cq__0261:last-child{border-bottom:none}.AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0261{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__0261::-webkit-scrollbar{width:6px}.AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0261::-webkit-scrollbar-track{background:none}.AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0261::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.AvatarSelectionUIComponent-module__avatarSelectionUiHeader_VjZ7cq__0261{color:#ffffffe6;text-align:center;font-weight:600;position:relative}.AvatarSelectionUIComponent-module__avatarSelectionUiCloseButton_VjZ7cq__0261{position:absolute;top:20px;right:20px}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0261{color:#ffffffe6;text-align:center;cursor:pointer;border-radius:8px;padding:4px;transition:all .2s ease-in-out}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0261:hover{background:#0000004d;transform:translateY(-2px)}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImgContainer_VjZ7cq__0261{border-radius:8px;position:relative;overflow:hidden}.AvatarSelectionUIComponent-module__avatarSelectionNoImage_VjZ7cq__0261{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__0261 img{filter:invert(70%);opacity:.7;width:40%}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0261 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__0261{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__0261 p:hover+.AvatarSelectionUIComponent-module__tooltipText_VjZ7cq__0261{opacity:1;visibility:visible;transition-delay:.5s}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImgContainer_VjZ7cq__0261 .AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImage_VjZ7cq__0261{aspect-ratio:1;border-radius:8px;width:100%;transition:all .2s ease-in-out}.AvatarSelectionUIComponent-module__selectedPill_VjZ7cq__0261{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__0261 .AvatarSelectionUIComponent-module__selectedPill_VjZ7cq__0261{z-index:2;position:absolute;top:4px;right:4px}.AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0261 img:hover{opacity:.8;transform:scale(1.05)}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261{color:#ffffffe6;border-bottom:1px solid #ffffff26;padding:10px;position:relative}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261:last-child{border-bottom:none}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 .AvatarSelectionUIComponent-module__radioGroup_VjZ7cq__0261{flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:8px;display:flex}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 .AvatarSelectionUIComponent-module__radioItem_VjZ7cq__0261{white-space:nowrap;align-items:center;gap:3px;margin-right:6px;display:flex}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 label{color:#fffc;cursor:pointer;margin:0;font-size:14px;font-weight:500;transition:color .2s ease-in-out}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 label:hover{color:#fff}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 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__0261 input[type=radio]:hover{border-color:#ffffff80}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 input[type=radio]:focus{box-shadow:0 0 0 3px #ffffff1a}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 input[type=radio]:checked{background:#ffffff1a;border-color:#fffc}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 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__0261 input[type=radio][disabled]{opacity:.4;cursor:not-allowed}.AvatarSelectionUIComponent-module__customAvatarInputSection_VjZ7cq__0261{align-items:stretch;display:flex}.AvatarSelectionUIComponent-module__setButton_VjZ7cq__0261{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__0261: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__0261:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #0003}.AvatarSelectionUIComponent-module__setButton_VjZ7cq__0261:disabled{opacity:.5;cursor:not-allowed;transform:none}.AvatarSelectionUIComponent-module__sectionHeading_VjZ7cq__0261{color:#ffffffe6;letter-spacing:-.01em;margin-bottom:8px;font-size:18px;font-weight:600}.AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261 .AvatarSelectionUIComponent-module__selectedPill_VjZ7cq__0261{margin-left:8px;position:relative;top:-2px}.AvatarSelectionUIComponent-module__displayNameSection_VjZ7cq__0261{color:#ffffffe6;border-bottom:1px solid #ffffff26;padding:10px;position:relative}.AvatarSelectionUIComponent-module__displayNameInputSection_VjZ7cq__0261{align-items:stretch;display:flex}.InputBox-module__inputWrapper_adOgOW__0261{pointer-events:all;align-items:stretch;gap:6px;display:flex}.InputBox-module__chatInput_adOgOW__0261{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__0261:focus{background:#0009;border-color:#fff6;box-shadow:0 0 0 3px #ffffff26}.InputBox-module__chatInput_adOgOW__0261::placeholder{color:#ffffff80}.InputBox-module__sendButton_adOgOW__0261{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__0261:hover{background:linear-gradient(135deg,#000c,#0009);border-color:#ffffff4d;transform:translateY(-1px);box-shadow:0 4px 8px #0000004d}.InputBox-module__sendButton_adOgOW__0261:active{transform:translateY(0);box-shadow:0 2px 4px #0003}.InputBox-module__sendButton_adOgOW__0261 .InputBox-module__svgIcon_adOgOW__0261 img{filter:invert(80%);width:18px;height:18px;transition:all .2s ease-in-out}.InputBox-module__sendButton_adOgOW__0261:hover .InputBox-module__svgIcon_adOgOW__0261 img{filter:invert(90%)}.Message-module__messageContainer_ikOQiq__0261{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__0261:hover{background:#0006;border-color:#ffffff4d}.Message-module__userName_ikOQiq__0261{color:#ffffffe6;margin-right:4px;font-weight:600}.Messages-module__messagesContainer_LXaUUW__0261{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__0261::-webkit-scrollbar{width:6px}.Messages-module__messagesContainer_LXaUUW__0261::-webkit-scrollbar-track{background:none}.Messages-module__messagesContainer_LXaUUW__0261::-webkit-scrollbar-thumb{background:#fff3;border:1px solid #ffffff1a;border-radius:3px}.Messages-module__messagesContainer_LXaUUW__0261::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.Messages-module__newMessagesButton_LXaUUW__0261{-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__0261:hover{background:#000000d9;border-color:#ffffff4d;transform:translate(-50%)translateY(-2px);box-shadow:0 6px 16px #0006}.Messages-module__newMessagesButton_LXaUUW__0261:active{transform:translate(-50%)translateY(0);box-shadow:0 2px 8px #0000004d}.TextChatUIComponent-module__uiHover_gFDdcW__0261{z-index:102;pointer-events:all;width:58px;min-height:58px;position:absolute;bottom:0;left:0}.TextChatUIComponent-module__textChatUi_gFDdcW__0261{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__0261{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__0261{opacity:1;transform:translate(0)}.TextChatUIComponent-module__fadeOut_gFDdcW__0261{opacity:.6;transform:translate(calc(-100% - 72px))}.TextChatUIComponent-module__controls_gFDdcW__0261{position:absolute;top:2px;right:0}.TextChatUIComponent-module__openTab_gFDdcW__0261{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__0261:hover{background:#000c;border-color:#ffffff4d;transform:scale(1.05)}.TextChatUIComponent-module__openTab_gFDdcW__0261:active{transform:scale(.95)}.TextChatUIComponent-module__openTab_gFDdcW__0261 img{filter:invert(80%);width:24px;height:24px;transition:all .2s ease-in-out}.TextChatUIComponent-module__stickyButton_gFDdcW__0261{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__0261:hover{background:#000c;border-color:#ffffff4d;transform:scale(1.05)}.TextChatUIComponent-module__stickyButtonFadeOut_gFDdcW__0261{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__0261{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__0261:hover{border-color:#22c55ecc;transform:scale(1.05);box-shadow:0 0 12px #22c55e66}.TextChatUIComponent-module__stickyButton_gFDdcW__0261 img,.TextChatUIComponent-module__stickyButtonFadeOut_gFDdcW__0261 img,.TextChatUIComponent-module__stickyButtonEnabled_gFDdcW__0261 img{filter:invert(70%);width:12px;height:12px;transition:all .2s ease-in-out}.TextChatUIComponent-module__stickyButton_gFDdcW__0261:hover img,.TextChatUIComponent-module__stickyButtonEnabled_gFDdcW__0261:hover img{filter:invert(90%)}.TextChatUIComponent-module__controls_gFDdcW__0261 .TextChatUIComponent-module__closeButton_gFDdcW__0261{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__0261:hover{color:#ffffffe6;background:#000c;border-color:#ffffff4d;transform:scale(1.05)}.TextChatUIComponent-module__closeButton_gFDdcW__0261:active{transform:scale(.95)}.TextChatUIComponent-module__messagesWrapper_gFDdcW__0261{direction:rtl;width:fit-content;max-height:450px;margin-bottom:8px;position:relative}.Networked3dWebExperience-module__respawnButton_7g9l0W__0261{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__0261:hover{background:linear-gradient(135deg,#000c,#0009);border-color:#ffffff4d;transform:translateY(-1px)}.Networked3dWebExperience-module__respawnButton_7g9l0W__0261:active{transform:translateY(0)}\n";globalThis['__css-digest-9df4d1565589ce63a22b21cf2f9d3ed9__']="9df4d1565589ce63a22b21cf2f9d3ed9";
 // src/Networked3dWebExperienceClient.ts
 import {
   CameraManager,
@@ -8,8 +7,8 @@ import {
   Key,
   KeyInputManager,
   LoadingScreen,
+  normalizeSpawnConfiguration,
   Vect3,
-  VirtualJoystick,
   Quat,
   getSpawnData,
   CharacterManager,
@@ -17,1054 +16,553 @@ import {
   createDefaultCharacterControllerValues,
   createDefaultCameraValues
 } from "@mml-io/3d-web-client-core";
-import { ThreeJSWorldRenderer } from "@mml-io/3d-web-threejs";
 import {
-  FROM_SERVER_CHAT_MESSAGE_TYPE,
-  FROM_CLIENT_CHAT_MESSAGE_TYPE,
-  UserNetworkingClient,
-  WebsocketStatus,
-  parseServerChatMessage,
-  DeltaNetV01ServerErrors,
-  SERVER_BROADCAST_MESSAGE_TYPE,
-  parseServerBroadcastMessage
-} from "@mml-io/3d-web-user-networking";
+  experienceClientSubProtocols
+} from "@mml-io/3d-web-experience-protocol";
+import { ThreeJSWorldRenderer } from "@mml-io/3d-web-threejs";
 import { LoadingProgressManager, registerCustomElementsToWindow } from "@mml-io/mml-web";
 
-// 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-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-var digest = globalThis['__css-digest-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-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__0261",
-  "avatarSelectionNoImage": "AvatarSelectionUIComponent-module__avatarSelectionNoImage_VjZ7cq__0261",
-  "avatarSelectionSection": "AvatarSelectionUIComponent-module__avatarSelectionSection_VjZ7cq__0261",
-  "avatarSelectionUi": "AvatarSelectionUIComponent-module__avatarSelectionUi_VjZ7cq__0261",
-  "avatarSelectionUiAvatar": "AvatarSelectionUIComponent-module__avatarSelectionUiAvatar_VjZ7cq__0261",
-  "avatarSelectionUiAvatarImage": "AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImage_VjZ7cq__0261",
-  "avatarSelectionUiAvatarImgContainer": "AvatarSelectionUIComponent-module__avatarSelectionUiAvatarImgContainer_VjZ7cq__0261",
-  "avatarSelectionUiCloseButton": "AvatarSelectionUIComponent-module__avatarSelectionUiCloseButton_VjZ7cq__0261",
-  "avatarSelectionUiHeader": "AvatarSelectionUIComponent-module__avatarSelectionUiHeader_VjZ7cq__0261",
-  "closeButton": "AvatarSelectionUIComponent-module__closeButton_VjZ7cq__0261",
-  "customAvatarInputSection": "AvatarSelectionUIComponent-module__customAvatarInputSection_VjZ7cq__0261",
-  "customAvatarSection": "AvatarSelectionUIComponent-module__customAvatarSection_VjZ7cq__0261",
-  "displayNameInputSection": "AvatarSelectionUIComponent-module__displayNameInputSection_VjZ7cq__0261",
-  "displayNameSection": "AvatarSelectionUIComponent-module__displayNameSection_VjZ7cq__0261",
-  "input": "AvatarSelectionUIComponent-module__input_VjZ7cq__0261",
-  "menuButton": "AvatarSelectionUIComponent-module__menuButton_VjZ7cq__0261",
-  "openTab": "AvatarSelectionUIComponent-module__openTab_VjZ7cq__0261",
-  "radioGroup": "AvatarSelectionUIComponent-module__radioGroup_VjZ7cq__0261",
-  "radioItem": "AvatarSelectionUIComponent-module__radioItem_VjZ7cq__0261",
-  "sectionHeading": "AvatarSelectionUIComponent-module__sectionHeading_VjZ7cq__0261",
-  "selectedPill": "AvatarSelectionUIComponent-module__selectedPill_VjZ7cq__0261",
-  "setButton": "AvatarSelectionUIComponent-module__setButton_VjZ7cq__0261",
-  "tooltipText": "AvatarSelectionUIComponent-module__tooltipText_VjZ7cq__0261"
-}, {
-  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';
+// src/ClientEventEmitter.ts
+var ClientEventEmitter = class {
+  handlers = /* @__PURE__ */ new Map();
+  on(event, handler) {
+    let set = this.handlers.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.handlers.set(event, set);
+    }
+    set.add(handler);
+  }
+  off(event, handler) {
+    var _a;
+    (_a = this.handlers.get(event)) == null ? void 0 : _a.delete(handler);
+  }
+  emit(event, ...args) {
+    const set = this.handlers.get(event);
+    if (!set) return;
+    for (const handler of [...set]) {
+      handler(...args);
     }
-  };
-  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
-          }
-        )
-      )
-    );
+  /** Remove all registered event handlers. Called during dispose to prevent leaks. */
+  clearAllHandlers() {
+    this.handlers.clear();
   }
 };
 
-// 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-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-var digest2 = globalThis['__css-digest-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-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);
+// src/DefaultRespawnButtonPlugin.ts
+var DefaultRespawnButtonPlugin = class {
+  client = null;
+  container = null;
+  button = null;
+  mount(container, client) {
+    this.client = client;
+    this.container = container;
+  }
+  onConfigChanged(config) {
+    if (config.hud === void 0) return;
+    const enabled = config.hud !== false && config.hud.respawnButton === true;
+    if (enabled && !this.button) {
+      this.show();
+    } else if (!enabled && this.button) {
+      this.hide();
     }
-  }, 0);
-};
-
-// src/chat-ui/components/Input/InputBox.module.css
-var InputBox_default = new Proxy({
-  "chatInput": "InputBox-module__chatInput_adOgOW__0261",
-  "inputWrapper": "InputBox-module__inputWrapper_adOgOW__0261",
-  "sendButton": "InputBox-module__sendButton_adOgOW__0261",
-  "svgIcon": "InputBox-module__svgIcon_adOgOW__0261"
-}, {
-  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) => {
+  }
+  dispose() {
+    this.hide();
+    this.client = null;
+    this.container = null;
+  }
+  show() {
+    if (this.button) return;
+    this.button = document.createElement("div");
+    this.button.textContent = "RESPAWN";
+    Object.assign(this.button.style, {
+      position: "absolute",
+      top: "12px",
+      left: "12px",
+      zIndex: "102",
+      padding: "12px",
+      borderRadius: "8px",
+      border: "1px solid rgba(255, 255, 255, 0.2)",
+      color: "rgba(255, 255, 255, 0.9)",
+      background: "linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4))",
+      backdropFilter: "blur(10px)",
+      WebkitBackdropFilter: "blur(10px)",
+      fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif",
+      fontSize: "14px",
+      fontWeight: "500",
+      letterSpacing: "0.5px",
+      boxShadow: "0 4px 24px rgba(0, 0, 0, 0.4)",
+      cursor: "pointer",
+      transition: "all 0.2s ease-in-out",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      userSelect: "none"
+    });
+    this.button.addEventListener("mouseenter", () => {
+      if (!this.button) return;
+      this.button.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))";
+      this.button.style.borderColor = "rgba(255, 255, 255, 0.3)";
+      this.button.style.transform = "translateY(-1px)";
+      this.button.style.boxShadow = "0 6px 28px rgba(0, 0, 0, 0.5)";
+    });
+    this.button.addEventListener("mouseleave", () => {
+      if (!this.button) return;
+      this.button.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4))";
+      this.button.style.borderColor = "rgba(255, 255, 255, 0.2)";
+      this.button.style.transform = "";
+      this.button.style.boxShadow = "0 4px 24px rgba(0, 0, 0, 0.4)";
+    });
+    this.button.addEventListener("pointerdown", () => {
+      if (!this.button) return;
+      this.button.style.transform = "translateY(0)";
+      this.button.style.boxShadow = "0 2px 12px rgba(0, 0, 0, 0.3)";
+    });
+    this.button.addEventListener("pointerup", () => {
+      if (!this.button) return;
+      this.button.style.transform = "translateY(-1px)";
+      this.button.style.boxShadow = "0 6px 28px rgba(0, 0, 0, 0.5)";
+    });
+    this.button.addEventListener("click", () => {
       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)}` }) }) })
-    ] });
+      (_a = this.client) == null ? void 0 : _a.respawn();
+    });
+    (this.container ?? document.body).appendChild(this.button);
+  }
+  hide() {
+    var _a;
+    (_a = this.button) == null ? void 0 : _a.remove();
+    this.button = null;
   }
-);
-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-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-var digest3 = globalThis['__css-digest-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-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__0261",
-  "userName": "Message-module__userName_ikOQiq__0261"
-}, {
-  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-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-var digest4 = globalThis['__css-digest-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-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__0261",
-  "newMessagesButton": "Messages-module__newMessagesButton_LXaUUW__0261"
-}, {
-  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-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-var digest5 = globalThis['__css-digest-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-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/DefaultVirtualJoystickPlugin.ts
+import { VirtualJoystick } from "@mml-io/3d-web-client-core";
+var DefaultVirtualJoystickPlugin = class {
+  constructor(options = {}) {
+    this.options = options;
+  }
+  wrapper = null;
+  joystick = null;
+  mount(container, client) {
+    this.wrapper = document.createElement("div");
+    container.appendChild(this.wrapper);
+    this.joystick = new VirtualJoystick(this.wrapper, {
+      radius: this.options.radius ?? 70,
+      innerRadius: this.options.innerRadius ?? 20,
+      mouseSupport: this.options.mouseSupport ?? false
+    });
+    client.setAdditionalInputProvider(this.joystick);
+  }
+  dispose() {
+    var _a;
+    (_a = this.wrapper) == null ? void 0 : _a.remove();
+    this.wrapper = null;
+    this.joystick = null;
+  }
 };
 
-// src/chat-ui/components/ChatPanel/TextChatUIComponent.module.css
-var TextChatUIComponent_default = new Proxy({
-  "closeButton": "TextChatUIComponent-module__closeButton_gFDdcW__0261",
-  "controls": "TextChatUIComponent-module__controls_gFDdcW__0261",
-  "fadeIn": "TextChatUIComponent-module__fadeIn_gFDdcW__0261",
-  "fadeOut": "TextChatUIComponent-module__fadeOut_gFDdcW__0261",
-  "messagesWrapper": "TextChatUIComponent-module__messagesWrapper_gFDdcW__0261",
-  "openTab": "TextChatUIComponent-module__openTab_gFDdcW__0261",
-  "stickyButton": "TextChatUIComponent-module__stickyButton_gFDdcW__0261",
-  "stickyButtonEnabled": "TextChatUIComponent-module__stickyButtonEnabled_gFDdcW__0261",
-  "stickyButtonFadeOut": "TextChatUIComponent-module__stickyButtonFadeOut_gFDdcW__0261",
-  "textChat": "TextChatUIComponent-module__textChat_gFDdcW__0261",
-  "textChatUi": "TextChatUIComponent-module__textChatUi_gFDdcW__0261",
-  "uiHover": "TextChatUIComponent-module__uiHover_gFDdcW__0261"
-}, {
-  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;
+// src/WorldConnection.ts
+import {
+  experienceProtocolToDeltaNetSubProtocol,
+  FROM_CLIENT_CHAT_MESSAGE_TYPE,
+  FROM_SERVER_CHAT_MESSAGE_TYPE,
+  FROM_SERVER_BROADCAST_MESSAGE_TYPE,
+  FROM_SERVER_SESSION_CONFIG_MESSAGE_TYPE,
+  FROM_SERVER_WORLD_CONFIG_MESSAGE_TYPE,
+  parseServerBroadcastMessage,
+  parseServerChatMessage,
+  parseSessionConfigPayload,
+  parseWorldConfigPayload
+} from "@mml-io/3d-web-experience-protocol";
+import {
+  UserNetworkingClient,
+  WebsocketStatus,
+  DeltaNetServerErrors
+} from "@mml-io/3d-web-user-networking";
+var MAX_CHAT_HISTORY = 100;
+var WorldConnection = class {
+  client;
+  otherUsers = /* @__PURE__ */ new Map();
+  chatHistory = [];
+  eventListeners = [];
+  myConnectionId = null;
+  connected = false;
+  username;
+  connectPromise;
+  resolveConnect;
+  rejectConnect;
+  connectSettled = false;
+  worldConfigResolve = null;
+  worldConfigPromise = null;
+  latestWorldConfig = null;
+  constructor(config) {
+    this.connectPromise = new Promise((resolve, reject) => {
+      this.resolveConnect = resolve;
+      this.rejectConnect = reject;
     });
-  };
-  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);
+    this.connectPromise.catch(() => {
+    });
+    const initialUserState = config.initialUserState ?? {
+      userId: "",
+      username: null,
+      characterDescription: null,
+      colors: null
     };
-  }, [handleBlur, handleKeyDown]);
-  return /* @__PURE__ */ jsxs5("div", { className: TextChatUIComponent_default.textChatUi, children: [
-    /* @__PURE__ */ jsxs5(
-      "div",
+    this.username = initialUserState.username;
+    const initialPosition = config.initialPosition ?? { x: 0, y: 0, z: 0 };
+    const initialRotation = config.initialRotation ?? { eulerY: 0 };
+    this.client = new UserNetworkingClient(
       {
-        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
+        url: config.url,
+        sessionToken: config.sessionToken,
+        websocketFactory: config.websocketFactory,
+        statusUpdateCallback: (status) => {
+          if (status === WebsocketStatus.Connected) {
+            this.connected = true;
+            console.log("[world] Connected to server");
+            if (!this.connectSettled) {
+              this.connectSettled = true;
+              this.resolveConnect();
             }
-          ) }),
-          /* @__PURE__ */ jsx6(
-            InputBox,
-            {
-              ref: inputBoxRef,
-              onSendMessage: handleSendMessage,
-              hide,
-              setFocus
+            this.emitEvent({ type: "connected" });
+          } else if (status === WebsocketStatus.Disconnected || status === WebsocketStatus.Reconnecting) {
+            this.connected = false;
+            this.otherUsers.clear();
+            this.myConnectionId = null;
+            this.latestWorldConfig = null;
+            this.worldConfigPromise = null;
+            this.worldConfigResolve = null;
+            console.log(
+              `[world] ${status === WebsocketStatus.Disconnected ? "Disconnected from" : "Reconnecting to"} server`
+            );
+            if (status === WebsocketStatus.Disconnected && !this.connectSettled) {
+              this.connectSettled = true;
+              this.client.stop();
+              this.rejectConnect(
+                new Error("WebSocket disconnected before connection was established")
+              );
+            }
+            if (status === WebsocketStatus.Reconnecting) {
+              this.emitEvent({ type: "reconnecting" });
+            }
+            this.emitEvent({ type: "disconnected" });
+          }
+        },
+        assignedIdentity: (connectionId) => {
+          this.myConnectionId = connectionId;
+          console.log(`[world] Assigned connection ID: ${connectionId}`);
+          this.emitEvent({ type: "identity_assigned", connectionId });
+        },
+        onServerError: (error) => {
+          console.error(`[world] Server error (${error.errorType}): ${error.message}`);
+          this.emitEvent({
+            type: "server_error",
+            errorType: error.errorType,
+            message: error.message
+          });
+          if (!this.connectSettled) {
+            this.connectSettled = true;
+            switch (error.errorType) {
+              case DeltaNetServerErrors.USER_AUTHENTICATION_FAILED_ERROR_TYPE:
+                this.rejectConnect(new Error(`Authentication failed: ${error.message}`));
+                break;
+              case DeltaNetServerErrors.USER_NETWORKING_CONNECTION_LIMIT_REACHED_ERROR_TYPE:
+                this.rejectConnect(new Error(`Connection limit reached: ${error.message}`));
+                break;
+              case DeltaNetServerErrors.USER_NETWORKING_SERVER_SHUTDOWN_ERROR_TYPE:
+                console.error("[world] Server shutting down");
+                this.rejectConnect(new Error(`Server shutting down: ${error.message}`));
+                break;
+              default:
+                this.rejectConnect(new Error(error.message));
+            }
+          } else {
+            if (error.errorType === DeltaNetServerErrors.USER_NETWORKING_SERVER_SHUTDOWN_ERROR_TYPE) {
+              console.error("[world] Server shutting down");
+            }
+          }
+        },
+        onCustomMessage: (customType, contents) => {
+          if (customType === FROM_SERVER_CHAT_MESSAGE_TYPE) {
+            const parsed = parseServerChatMessage(contents);
+            if (parsed instanceof Error) {
+              console.error("[world] Invalid chat message:", parsed.message);
+              return;
+            }
+            let username;
+            if (parsed.fromConnectionId === this.myConnectionId) {
+              username = this.username ?? `User ${parsed.fromConnectionId}`;
+            } else {
+              const user = this.otherUsers.get(parsed.fromConnectionId);
+              username = (user == null ? void 0 : user.username) ?? `User ${parsed.fromConnectionId}`;
+            }
+            const chatMsg = {
+              fromConnectionId: parsed.fromConnectionId,
+              userId: parsed.userId,
+              username,
+              message: parsed.message,
+              timestamp: Date.now()
+            };
+            this.chatHistory.push(chatMsg);
+            if (this.chatHistory.length > MAX_CHAT_HISTORY) {
+              this.chatHistory.shift();
+            }
+            console.log(`[chat] ${username}: ${parsed.message}`);
+            this.emitEvent({ type: "chat", message: chatMsg });
+          } else if (customType === FROM_SERVER_SESSION_CONFIG_MESSAGE_TYPE) {
+            const parsedConfig = parseSessionConfigPayload(contents);
+            if (parsedConfig instanceof Error) {
+              console.error("[world] Invalid session config message:", parsedConfig.message);
+            } else {
+              console.log("[world] Received session config from server");
+              this.emitEvent({ type: "session_config", config: parsedConfig });
+            }
+          } else if (customType === FROM_SERVER_WORLD_CONFIG_MESSAGE_TYPE) {
+            const parsedConfig = parseWorldConfigPayload(contents);
+            if (parsedConfig instanceof Error) {
+              console.error("[world] Invalid world config message:", parsedConfig.message);
+            } else {
+              console.log("[world] Received world config from server");
+              this.latestWorldConfig = parsedConfig;
+              if (this.worldConfigResolve) {
+                this.worldConfigResolve(parsedConfig);
+                this.worldConfigResolve = null;
+              }
+              this.emitEvent({ type: "world_config", config: parsedConfig });
+            }
+          } else if (customType === FROM_SERVER_BROADCAST_MESSAGE_TYPE) {
+            const broadcastMessage = parseServerBroadcastMessage(contents);
+            if (broadcastMessage instanceof Error) {
+              console.error(`[world] Invalid server broadcast message: ${contents}`);
+            } else {
+              console.log(
+                `[world] Server broadcast (${broadcastMessage.broadcastType}):`,
+                broadcastMessage.payload
+              );
+              this.emitEvent({
+                type: "server_broadcast",
+                broadcastType: broadcastMessage.broadcastType,
+                payload: broadcastMessage.payload
+              });
+            }
+          } else {
+            console.warn(`[world] Unrecognised custom message type ${customType}`);
+          }
+        },
+        resolveProtocol: experienceProtocolToDeltaNetSubProtocol,
+        onUpdate: (update) => {
+          var _a, _b, _c, _d, _e, _f, _g, _h;
+          for (const id of update.removedConnectionIds) {
+            const leaving = this.otherUsers.get(id);
+            this.otherUsers.delete(id);
+            if (id !== this.myConnectionId) {
+              this.emitEvent({
+                type: "user_left",
+                connectionId: id,
+                userId: (leaving == null ? void 0 : leaving.userId) ?? "",
+                username: (leaving == null ? void 0 : leaving.username) ?? null
+              });
+            }
+          }
+          for (const [id, added] of update.addedConnectionIds) {
+            if (id === this.myConnectionId) continue;
+            const position = {
+              x: added.components.position.x,
+              y: added.components.position.y,
+              z: added.components.position.z
+            };
+            const userState = added.userState;
+            this.otherUsers.set(id, {
+              userId: (userState == null ? void 0 : userState.userId) ?? "",
+              username: (userState == null ? void 0 : userState.username) ?? null,
+              characterDescription: (userState == null ? void 0 : userState.characterDescription) ?? null,
+              colors: (userState == null ? void 0 : userState.colors) ?? null,
+              position
+            });
+            this.emitEvent({
+              type: "user_joined",
+              connectionId: id,
+              userId: (userState == null ? void 0 : userState.userId) ?? "",
+              username: (userState == null ? void 0 : userState.username) ?? null,
+              position
+            });
+          }
+          for (const [id, updated] of update.updatedUsers) {
+            if (id === this.myConnectionId) continue;
+            const existing = this.otherUsers.get(id);
+            if (existing) {
+              if (((_a = updated.userState) == null ? void 0 : _a.userId) !== void 0) {
+                existing.userId = updated.userState.userId;
+              }
+              if (((_b = updated.userState) == null ? void 0 : _b.username) !== void 0) {
+                existing.username = updated.userState.username;
+              }
+              if (((_c = updated.userState) == null ? void 0 : _c.characterDescription) !== void 0) {
+                existing.characterDescription = updated.userState.characterDescription;
+              }
+              if (((_d = updated.userState) == null ? void 0 : _d.colors) !== void 0) {
+                existing.colors = updated.userState.colors;
+              }
+              existing.position = {
+                x: updated.components.position.x,
+                y: updated.components.position.y,
+                z: updated.components.position.z
+              };
+            } else {
+              this.otherUsers.set(id, {
+                userId: ((_e = updated.userState) == null ? void 0 : _e.userId) ?? "",
+                username: ((_f = updated.userState) == null ? void 0 : _f.username) ?? null,
+                characterDescription: ((_g = updated.userState) == null ? void 0 : _g.characterDescription) ?? null,
+                colors: ((_h = updated.userState) == null ? void 0 : _h.colors) ?? null,
+                position: {
+                  x: updated.components.position.x,
+                  y: updated.components.position.y,
+                  z: updated.components.position.z
+                }
+              });
             }
-          )
-        ]
+          }
+          this.emitEvent({ type: "network_update", update });
+        }
+      },
+      initialUserState,
+      {
+        position: initialPosition,
+        rotation: initialRotation,
+        state: 0
       }
-    )
-  ] });
-};
-
-// 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);
+  stop() {
+    this.client.stop();
+    this.eventListeners = [];
+    if (!this.connectSettled) {
+      this.connectSettled = true;
+      this.rejectConnect(new Error("WorldConnection stopped"));
+    }
+    this.worldConfigResolve = null;
+    this.worldConfigPromise = null;
+  }
+  /**
+   * Returns a promise that settles once for the **initial** connection attempt.
+   * It resolves when the first `Connected` status is received, or rejects if
+   * the connection fails before being established.
+   *
+   * This promise does **not** re-settle on reconnection. To react to
+   * subsequent connection/disconnection events, use {@link addEventListener}
+   * and listen for `"connected"` / `"disconnected"` / `"reconnecting"` events.
+   */
+  waitForConnection() {
+    return this.connectPromise;
+  }
+  /**
+   * Wait for the server to send a world config message.
+   *
+   * The server pushes this over WebSocket after authentication. If the config
+   * has already been received, the returned promise resolves immediately with
+   * the cached value (so callers never miss a config that arrived before they
+   * called this method).
+   *
+   * Multiple concurrent callers share a single internal promise that resolves
+   * when the config arrives. Each caller gets an independent timeout --- if the
+   * timeout fires, that caller receives `null` but other callers with longer
+   * timeouts (or the shared promise itself) are unaffected.
+   *
+   * @returns The world config, or `null` if the timeout expires first.
+   */
+  waitForWorldConfig(timeoutMs = 1e4) {
+    if (this.latestWorldConfig) {
+      return Promise.resolve(this.latestWorldConfig);
+    }
+    if (!this.worldConfigPromise) {
+      this.worldConfigPromise = new Promise((resolve) => {
+        this.worldConfigResolve = resolve;
+      });
     }
+    return new Promise((resolve) => {
+      const timer = setTimeout(() => {
+        resolve(null);
+      }, timeoutMs);
+      this.worldConfigPromise.then((config) => {
+        clearTimeout(timer);
+        resolve(config);
+      });
+    });
   }
-  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
-          }
-        )
-      )
-    );
+  getWorldConfig() {
+    return this.latestWorldConfig;
   }
-};
-
-// esbuild-css-modules-plugin-ns-js::src/Networked3dWebExperience.module.css:injector.js
-var content6 = globalThis['__css-content-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-var digest6 = globalThis['__css-digest-9df4d1565589ce63a22b21cf2f9d3ed9__'];
-var inject6 = () => {
-  setTimeout(() => {
-    if (!globalThis.document) {
-      return;
+  sendUpdate(update) {
+    if (this.connected) {
+      this.client.sendUpdate(update);
     }
-    let root = globalThis.document.querySelector("head");
-    if (root && root.shadowRoot) {
-      root = root.shadowRoot;
+  }
+  getOtherUsers() {
+    const result = [];
+    for (const [connectionId, user] of this.otherUsers) {
+      result.push({ connectionId, ...user });
     }
-    if (!root) {
-      root = globalThis.document.head;
+    return result;
+  }
+  getConnectionId() {
+    return this.myConnectionId;
+  }
+  getUsername() {
+    return this.username;
+  }
+  isConnected() {
+    return this.connected;
+  }
+  sendChatMessage(message) {
+    if (!this.connected) return;
+    this.client.sendCustomMessage(FROM_CLIENT_CHAT_MESSAGE_TYPE, JSON.stringify({ message }));
+  }
+  sendCustomMessage(customType, contents) {
+    if (!this.connected) return;
+    this.client.sendCustomMessage(customType, contents);
+  }
+  updateUsername(username) {
+    this.username = username;
+    this.client.updateUsername(username);
+  }
+  updateCharacterDescription(characterDescription) {
+    this.client.updateCharacterDescription(characterDescription);
+  }
+  updateColors(colors) {
+    this.client.updateColors(colors);
+  }
+  getChatHistory(since) {
+    if (since !== void 0) {
+      return this.chatHistory.filter((m) => m.timestamp >= since);
     }
-    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);
+    return [...this.chatHistory];
+  }
+  addEventListener(listener) {
+    this.eventListeners.push(listener);
+  }
+  removeEventListener(listener) {
+    const idx = this.eventListeners.indexOf(listener);
+    if (idx !== -1) this.eventListeners.splice(idx, 1);
+  }
+  emitEvent(event) {
+    for (const listener of [...this.eventListeners]) {
+      listener(event);
     }
-  }, 0);
+  }
 };
 
-// src/Networked3dWebExperience.module.css
-var Networked3dWebExperience_default = new Proxy({
-  "respawnButton": "Networked3dWebExperience-module__respawnButton_7g9l0W__0261"
-}, {
-  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 {
-    spawnPosition: {
-      x: ((_a = spawnConfig == null ? void 0 : spawnConfig.spawnPosition) == null ? void 0 : _a.x) ?? 0,
-      y: ((_b = spawnConfig == null ? void 0 : spawnConfig.spawnPosition) == null ? void 0 : _b.y) ?? 0,
-      z: ((_c = spawnConfig == null ? void 0 : spawnConfig.spawnPosition) == null ? void 0 : _c.z) ?? 0
-    },
-    spawnPositionVariance: {
-      x: ((_d = spawnConfig == null ? void 0 : spawnConfig.spawnPositionVariance) == null ? void 0 : _d.x) ?? 0,
-      y: ((_e = spawnConfig == null ? void 0 : spawnConfig.spawnPositionVariance) == null ? void 0 : _e.y) ?? 0,
-      z: ((_f = spawnConfig == null ? void 0 : spawnConfig.spawnPositionVariance) == null ? void 0 : _f.z) ?? 0
-    },
-    spawnYRotation: (spawnConfig == null ? void 0 : spawnConfig.spawnYRotation) ?? 0,
-    respawnTrigger: {
-      minX: ((_g = spawnConfig == null ? void 0 : spawnConfig.respawnTrigger) == null ? void 0 : _g.minX) ?? Number.NEGATIVE_INFINITY,
-      maxX: ((_h = spawnConfig == null ? void 0 : spawnConfig.respawnTrigger) == null ? void 0 : _h.maxX) ?? Number.POSITIVE_INFINITY,
-      minY: ((_i = spawnConfig == null ? void 0 : spawnConfig.respawnTrigger) == null ? void 0 : _i.minY) ?? -100,
-      maxY: ((_j = spawnConfig == null ? void 0 : spawnConfig.respawnTrigger) == null ? void 0 : _j.maxY) ?? Number.POSITIVE_INFINITY,
-      minZ: ((_k = spawnConfig == null ? void 0 : spawnConfig.respawnTrigger) == null ? void 0 : _k.minZ) ?? Number.NEGATIVE_INFINITY,
-      maxZ: ((_l = spawnConfig == null ? void 0 : spawnConfig.respawnTrigger) == null ? void 0 : _l.maxZ) ?? Number.POSITIVE_INFINITY
-    },
-    enableRespawnButton: (spawnConfig == null ? void 0 : spawnConfig.enableRespawnButton) ?? false
-  };
-}
-var Networked3dWebExperienceClient = class {
+var Networked3dWebExperienceClient = class _Networked3dWebExperienceClient extends ClientEventEmitter {
   constructor(holderElement, config) {
+    super();
     this.holderElement = holderElement;
     this.config = config;
+    this.virtualJoystickPlugin = config.virtualJoystickPlugin === null ? null : config.virtualJoystickPlugin ?? new DefaultVirtualJoystickPlugin();
+    this.respawnButtonPlugin = config.respawnButtonPlugin === null ? null : config.respawnButtonPlugin ?? new DefaultRespawnButtonPlugin();
+    this.plugins = config.plugins ?? [];
     this.element = document.createElement("div");
     this.element.style.position = "absolute";
     this.element.style.width = "100%";
@@ -1077,11 +575,6 @@ var Networked3dWebExperienceClient = class {
     this.element.appendChild(this.canvasHolder);
     this.collisionsManager = new CollisionsManager();
     this.cameraManager = new CameraManager(this.canvasHolder, this.collisionsManager);
-    this.virtualJoystick = new VirtualJoystick(this.element, {
-      radius: 70,
-      innerRadius: 20,
-      mouseSupport: false
-    });
     this.tweakPane = new TweakPane(
       this.canvasHolder,
       {
@@ -1094,85 +587,108 @@ var Networked3dWebExperienceClient = class {
     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, "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;
-          this.characterManager.setLocalClientId(clientId);
+    if (!this.config.waitForWorldConfig) {
+      this.loadingProgressManager.addLoadingAsset(initialNetworkLoadRef, "network", "network");
+    }
+    this.worldConnection = new WorldConnection({
+      url: this.config.userNetworkAddress,
+      sessionToken: this.config.sessionToken,
+      websocketFactory: (url) => new WebSocket(url, [...experienceClientSubProtocols]),
+      initialUserState: { userId: "", username: null, characterDescription: null, colors: null },
+      initialPosition: spawnData.spawnPosition,
+      initialRotation: { eulerY: 2 * Math.atan2(spawnRotation.y, spawnRotation.w) }
+    });
+    this.worldConnection.addEventListener((event) => {
+      var _a, _b;
+      switch (event.type) {
+        case "disconnected":
+        case "reconnecting":
+          this.characterManager.clear();
+          this.remoteUserStates.clear();
+          this.connectionId = null;
+          this.pendingChatMessages = [];
+          break;
+        case "identity_assigned":
+          console.log(`Assigned ID: ${event.connectionId}`);
+          this.connectionId = event.connectionId;
+          this.characterManager.setLocalConnectionId(event.connectionId);
           if (this.initialLoadCompleted) {
-            const spawnData2 = getSpawnData(this.spawnConfiguration, true);
-            this.spawnCharacter(spawnData2);
-          } else {
+            this.spawnCharacter(getSpawnData(this.spawnConfiguration, true));
+          } else if (!this.config.waitForWorldConfig) {
             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 _a, _b;
-          if (customType === SERVER_BROADCAST_MESSAGE_TYPE) {
-            const serverBroadcastMessage = parseServerBroadcastMessage(contents);
-            if (serverBroadcastMessage instanceof Error) {
-              console.error(`Invalid server broadcast message: ${contents}`);
-            } else {
-              (_b = (_a = this.config).onServerBroadcast) == null ? void 0 : _b.call(_a, 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);
+          break;
+        case "server_error":
+          this.disposeWithError(event.message);
+          break;
+        case "session_config":
+          if (event.config.authToken !== void 0) {
+            this.mmlAuthToken = event.config.authToken;
+            if (this.rendererInitialized && this.config.mmlDocuments) {
+              this.renderer.setMMLConfiguration(this.config.mmlDocuments, this.mmlAuthToken);
             }
-          } else {
-            console.warn(`Did not recognize custom message type ${customType}`);
           }
+          break;
+        case "world_config": {
+          if (this.worldConfigTimeoutId !== null) {
+            clearTimeout(this.worldConfigTimeoutId);
+            this.worldConfigTimeoutId = null;
+          }
+          const parsedConfig = event.config;
+          const updatable = {};
+          if (parsedConfig.enableChat !== void 0) {
+            updatable.enableChat = parsedConfig.enableChat;
+          }
+          if (parsedConfig.mmlDocuments !== void 0) {
+            updatable.mmlDocuments = parsedConfig.mmlDocuments;
+          }
+          if (parsedConfig.environmentConfiguration !== void 0) {
+            updatable.environmentConfiguration = parsedConfig.environmentConfiguration;
+          }
+          if (parsedConfig.spawnConfiguration !== void 0) {
+            updatable.spawnConfiguration = parsedConfig.spawnConfiguration;
+          }
+          if (parsedConfig.avatarConfiguration !== void 0) {
+            updatable.avatarConfiguration = parsedConfig.avatarConfiguration;
+          }
+          if (parsedConfig.allowCustomDisplayName !== void 0) {
+            updatable.allowCustomDisplayName = parsedConfig.allowCustomDisplayName;
+          }
+          if (parsedConfig.enableTweakPane !== void 0) {
+            updatable.enableTweakPane = parsedConfig.enableTweakPane;
+          }
+          if (parsedConfig.allowOrbitalCamera !== void 0) {
+            updatable.allowOrbitalCamera = parsedConfig.allowOrbitalCamera;
+          }
+          if (parsedConfig.postProcessingEnabled !== void 0) {
+            updatable.postProcessingEnabled = parsedConfig.postProcessingEnabled;
+          }
+          if (parsedConfig.hud !== void 0) {
+            updatable.hud = parsedConfig.hud;
+          }
+          this.updateConfig(updatable);
+          this.worldConfigReceived = true;
+          this.checkReadyForInitialLoad();
+          break;
         }
-      },
-      {
-        username: null,
-        characterDescription: null,
-        colors: null
-      },
-      {
-        position: spawnData.spawnPosition,
-        rotation: {
-          quaternionY: spawnRotation.y,
-          quaternionW: spawnRotation.w
-        },
-        state: 0
+        case "server_broadcast":
+          (_b = (_a = this.config).onServerBroadcast) == null ? void 0 : _b.call(_a, {
+            broadcastType: event.broadcastType,
+            payload: event.payload
+          });
+          break;
+        case "chat":
+          this.handleChatMessage(
+            event.message.fromConnectionId,
+            event.message.userId,
+            event.message.message
+          );
+          break;
+        case "network_update":
+          this.onNetworkUpdate(event.update);
+          break;
       }
-    );
+    });
     if (this.config.allowOrbitalCamera) {
       this.keyInputManager.createKeyBinding(Key.C, () => {
         if (document.activeElement === document.body) {
@@ -1185,34 +701,41 @@ var Networked3dWebExperienceClient = class {
       collisionsManager: this.collisionsManager,
       cameraManager: this.cameraManager,
       keyInputManager: this.keyInputManager,
-      virtualJoystick: this.virtualJoystick,
       remoteUserStates: this.remoteUserStates,
       sendUpdate: (characterState) => {
-        this.networkClient.sendUpdate(characterState);
+        this.worldConnection.sendUpdate(characterState);
       },
       sendLocalCharacterColors: (colors) => {
-        this.networkClient.updateColors(colors);
+        this.worldConnection.updateColors(colors);
       },
       spawnConfiguration: this.spawnConfiguration,
       characterControllerValues: this.characterControllerValues,
-      characterResolve: (clientId) => {
-        return this.resolveCharacterData(clientId);
+      characterResolve: (connectionId) => {
+        return this.resolveCharacterData(connectionId);
       },
       updateURLLocation: this.config.updateURLLocation !== false
     });
-    if (this.spawnConfiguration.enableRespawnButton) {
-      this.respawnButton = this.createRespawnButton();
-      this.element.appendChild(this.respawnButton);
-    }
     this.loadingScreen = new LoadingScreen(this.loadingProgressManager, this.config.loadingScreen);
     this.element.append(this.loadingScreen.element);
     this.loadingProgressManager.addProgressCallback(() => {
+      var _a;
       const [, completed] = this.loadingProgressManager.toRatio();
       if (completed && !this.initialLoadCompleted) {
         this.initialLoadCompleted = true;
-        this.connectToTextChat();
-        this.mountAvatarSelectionUI();
-        this.spawnCharacter(spawnData);
+        if (this.connectionId === null || this.disposed) return;
+        for (const plugin of this.getAllPlugins()) {
+          plugin.mount(this.element, this);
+        }
+        this.emit("configChanged", this.latestConfig);
+        for (const plugin of this.getAllPlugins()) {
+          (_a = plugin.onConfigChanged) == null ? void 0 : _a.call(plugin, this.latestConfig);
+        }
+        this.spawnCharacter(getSpawnData(this.spawnConfiguration, true));
+        this.emit("ready");
+        for (const chatEvent of this.pendingChatMessages) {
+          this.emit("chat", chatEvent);
+        }
+        this.pendingChatMessages = [];
       }
     });
     registerCustomElementsToWindow(window);
@@ -1223,6 +746,7 @@ var Networked3dWebExperienceClient = class {
       spawnSun: true,
       enableTweakPane: config.enableTweakPane
     };
+    const mmlDocumentsForRenderer = this.config.waitForWorldConfig ? {} : this.config.mmlDocuments ?? {};
     if (this.config.createRenderer) {
       this.renderer = this.config.createRenderer({
         targetElement: this.canvasHolder,
@@ -1233,10 +757,15 @@ var Networked3dWebExperienceClient = class {
         mmlTargetWindow: window,
         mmlTargetElement: document.body,
         loadingProgressManager: this.loadingProgressManager,
-        mmlDocuments: this.config.mmlDocuments ?? {},
-        mmlAuthToken: this.config.authToken ?? null,
+        mmlDocuments: mmlDocumentsForRenderer,
+        mmlAuthToken: this.mmlAuthToken,
         onInitialized: () => {
-          this.loadingProgressManager.setInitialLoad(true);
+          this.rendererInitialized = true;
+          if (this.config.waitForWorldConfig) {
+            this.checkReadyForInitialLoad();
+          } else {
+            this.loadingProgressManager.setInitialLoad(true);
+          }
         }
       });
     } else {
@@ -1249,18 +778,29 @@ var Networked3dWebExperienceClient = class {
         mmlTargetWindow: window,
         mmlTargetElement: document.body,
         loadingProgressManager: this.loadingProgressManager,
-        mmlDocuments: this.config.mmlDocuments ?? {},
-        mmlAuthToken: this.config.authToken ?? null
+        mmlDocuments: mmlDocumentsForRenderer,
+        mmlAuthToken: this.mmlAuthToken
       });
-      this.loadingProgressManager.setInitialLoad(true);
+      this.rendererInitialized = true;
+      if (this.config.waitForWorldConfig) {
+        this.checkReadyForInitialLoad();
+      } else {
+        this.loadingProgressManager.setInitialLoad(true);
+      }
     }
     if (this.characterManager.localController) {
       this.characterManager.setupTweakPane(this.tweakPane);
     }
-    const resizeObserver = new ResizeObserver(() => {
+    this.resizeObserver = new ResizeObserver(() => {
       this.renderer.fitContainer();
     });
-    resizeObserver.observe(this.element);
+    this.resizeObserver.observe(this.element);
+    if (this.config.hud !== void 0) {
+      this.latestConfig.hud = this.config.hud;
+    }
+    if (this.config.enableChat !== void 0) {
+      this.latestConfig.enableChat = this.config.enableChat;
+    }
   }
   element;
   canvasHolder;
@@ -1270,22 +810,31 @@ var Networked3dWebExperienceClient = class {
   collisionsManager;
   characterManager;
   keyInputManager = new KeyInputManager();
-  virtualJoystick;
-  clientId = null;
-  networkClient;
+  resizeObserver;
+  connectionId = null;
+  worldConnection;
   remoteUserStates = /* @__PURE__ */ new Map();
   userProfiles = /* @__PURE__ */ new Map();
-  textChatUI = null;
-  avatarSelectionUI = null;
+  virtualJoystickPlugin;
+  respawnButtonPlugin;
+  plugins;
   tweakPane;
   spawnConfiguration;
   cameraValues = createDefaultCameraValues();
   characterControllerValues = createDefaultCharacterControllerValues();
   initialLoadCompleted = false;
+  pendingChatMessages = [];
+  latestConfig = {};
   loadingProgressManager = new LoadingProgressManager();
   loadingScreen;
   errorScreen;
-  respawnButton = null;
+  mmlAuthToken = null;
+  rendererInitialized = false;
+  worldConfigReceived = false;
+  worldConfigTimeoutId = null;
+  disposed = false;
+  static WORLD_CONFIG_TIMEOUT_MS = 1e4;
+  static MAX_PENDING_CHAT_MESSAGES = 100;
   // Frame timing
   currentRequestAnimationFrame = null;
   lastUpdateTimeMs = 0;
@@ -1299,6 +848,7 @@ var Networked3dWebExperienceClient = class {
     fov: 0
   };
   updateConfig(config) {
+    var _a;
     this.config = {
       ...this.config,
       ...config
@@ -1320,12 +870,6 @@ var Networked3dWebExperienceClient = class {
       };
       this.renderer.updateConfig(rendererConfigUpdate);
     }
-    if (this.avatarSelectionUI) {
-      if (config.avatarConfiguration) {
-        this.avatarSelectionUI.updateAvatarConfig(config.avatarConfiguration);
-      }
-      this.avatarSelectionUI.updateAllowCustomDisplayName(config.allowCustomDisplayName || false);
-    }
     if (config.allowOrbitalCamera !== void 0) {
       if (config.allowOrbitalCamera === false) {
         this.keyInputManager.removeKeyBinding(Key.C);
@@ -1341,27 +885,21 @@ var Networked3dWebExperienceClient = class {
         });
       }
     }
-    if (config.enableChat) {
-      if (!config.enableChat && this.textChatUI !== null) {
-        this.textChatUI.dispose();
-        this.textChatUI = null;
-      } else {
-        this.connectToTextChat();
+    if (config.spawnConfiguration !== void 0) {
+      this.spawnConfiguration = normalizeSpawnConfiguration(config.spawnConfiguration);
+      if (this.characterManager.localController) {
+        this.characterManager.localController.updateSpawnConfig(this.spawnConfiguration);
       }
     }
-    this.spawnConfiguration = normalizeSpawnConfiguration(config.spawnConfiguration);
-    if (this.characterManager.localController) {
-      this.characterManager.localController.updateSpawnConfig(this.spawnConfiguration);
-    }
-    if (this.spawnConfiguration.enableRespawnButton && !this.respawnButton) {
-      this.respawnButton = this.createRespawnButton();
-      this.element.appendChild(this.respawnButton);
-    } else if (!this.spawnConfiguration.enableRespawnButton && this.respawnButton) {
-      this.respawnButton.remove();
-      this.respawnButton = null;
-    }
     if (config.mmlDocuments !== void 0) {
-      this.renderer.setMMLConfiguration(config.mmlDocuments, this.config.authToken ?? null);
+      this.renderer.setMMLConfiguration(config.mmlDocuments, this.mmlAuthToken);
+    }
+    this.latestConfig = { ...this.latestConfig, ...config };
+    this.emit("configChanged", config);
+    if (this.initialLoadCompleted) {
+      for (const plugin of this.getAllPlugins()) {
+        (_a = plugin.onConfigChanged) == null ? void 0 : _a.call(plugin, config);
+      }
     }
   }
   static createFullscreenHolder() {
@@ -1375,125 +913,118 @@ 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;
+  getAllPlugins() {
+    const result = [];
+    if (this.virtualJoystickPlugin) result.push(this.virtualJoystickPlugin);
+    if (this.respawnButtonPlugin) result.push(this.respawnButtonPlugin);
+    result.push(...this.plugins);
+    return result;
+  }
+  checkReadyForInitialLoad() {
+    if (this.rendererInitialized && this.worldConfigReceived) {
+      if (this.worldConfigTimeoutId !== null) {
+        clearTimeout(this.worldConfigTimeoutId);
+        this.worldConfigTimeoutId = null;
+      }
+      this.loadingProgressManager.setInitialLoad(true);
+    } else if (this.rendererInitialized && !this.worldConfigReceived) {
+      if (this.worldConfigTimeoutId === null) {
+        this.worldConfigTimeoutId = setTimeout(() => {
+          this.worldConfigTimeoutId = null;
+          if (this.disposed) return;
+          if (!this.worldConfigReceived) {
+            console.warn(
+              `World config not received within ${_Networked3dWebExperienceClient.WORLD_CONFIG_TIMEOUT_MS}ms \u2014 proceeding with default configuration`
+            );
+            this.worldConfigReceived = true;
+            this.loadingProgressManager.setInitialLoad(true);
+          }
+        }, _Networked3dWebExperienceClient.WORLD_CONFIG_TIMEOUT_MS);
+      }
+    }
   }
-  resolveCharacterData(clientId) {
-    const user = this.userProfiles.get(clientId);
+  resolveCharacterData(connectionId) {
+    const user = this.userProfiles.get(connectionId);
     if (!user) {
-      throw new Error(`Failed to resolve user for clientId ${clientId}`);
+      throw new Error(`Failed to resolve user for connectionId ${connectionId}`);
     }
     return {
+      userId: user.userId,
       username: user.username,
       characterDescription: user.characterDescription,
       colors: user.colors
     };
   }
   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);
+    const { removedConnectionIds, addedConnectionIds, updatedUsers } = update;
+    for (const connId of removedConnectionIds) {
+      const profile = this.userProfiles.get(connId);
+      this.emit("userLeft", {
+        connectionId: connId,
+        userId: (profile == null ? void 0 : profile.userId) ?? "",
+        username: (profile == null ? void 0 : profile.username) ?? null
+      });
+      this.userProfiles.delete(connId);
+      this.remoteUserStates.delete(connId);
+    }
+    for (const [connId, userData] of addedConnectionIds) {
+      this.userProfiles.set(connId, userData.userState);
+      this.remoteUserStates.set(connId, userData.components);
+      if (connId !== this.connectionId) {
+        this.emit("userJoined", {
+          connectionId: connId,
+          userId: userData.userState.userId ?? "",
+          username: userData.userState.username ?? null
+        });
+      }
     }
-    for (const [clientId, userDataUpdate] of updatedUsers) {
+    for (const [connId, 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;
+        const profile = this.userProfiles.get(connId);
+        if (profile) {
+          if (userState.userId !== void 0) {
+            profile.userId = userState.userId;
+          }
+          if (userState.username !== void 0) {
+            profile.username = userState.username;
+          }
+          if (userState.characterDescription !== void 0) {
+            profile.characterDescription = userState.characterDescription;
+          }
+          if (userState.colors !== void 0) {
+            profile.colors = userState.colors;
+          }
+          this.characterManager.networkCharacterInfoUpdated(connId);
         }
-        this.characterManager.networkCharacterInfoUpdated(clientId);
-      }
-      this.remoteUserStates.set(clientId, userDataUpdate.components);
-    }
-  }
-  sendIdentityUpdateToServer(displayName, characterDescription) {
-    if (!this.clientId) {
-      throw new Error("Client ID not set");
-    }
-    this.networkClient.updateUsername(displayName);
-    this.networkClient.updateCharacterDescription(characterDescription);
-  }
-  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.renderer.addChatBubble(fromUserId, message);
+      this.remoteUserStates.set(connId, userDataUpdate.components);
     }
   }
-  connectToTextChat() {
-    if (this.clientId === null) {
-      return;
-    }
-    if (this.config.enableChat && this.textChatUI === null) {
-      const user = this.userProfiles.get(this.clientId);
-      if (!user) {
-        throw new Error("User not found");
-      }
-      const textChatUISettings = {
-        holderElement: this.canvasHolder,
-        sendMessageToServerMethod: (message) => {
-          this.renderer.onChatMessage(message);
-          this.networkClient.sendCustomMessage(
-            FROM_CLIENT_CHAT_MESSAGE_TYPE,
-            JSON.stringify({ message })
-          );
-        },
-        visibleByDefault: this.config.chatVisibleByDefault,
-        stringToHslOptions: this.config.userNameToColorOptions
-      };
-      this.textChatUI = new TextChatUI(textChatUISettings);
-      this.textChatUI.init();
+  sendIdentityUpdateToServer(displayName, characterDescription) {
+    if (this.connectionId === null) {
+      throw new Error("Connection ID not set");
     }
+    this.worldConnection.updateUsername(displayName);
+    this.worldConnection.updateCharacterDescription(characterDescription);
   }
-  mountAvatarSelectionUI() {
-    var _a, _b;
-    if (this.clientId === null) {
-      throw new Error("Client ID not set");
-    }
-    const ownIdentity = this.userProfiles.get(this.clientId);
-    if (!ownIdentity) {
-      throw new Error("Own identity not found");
+  handleChatMessage(fromConnectionId, userId, message) {
+    const isLocal = fromConnectionId === this.connectionId;
+    let username = "System";
+    if (fromConnectionId !== 0) {
+      const user = this.userProfiles.get(fromConnectionId);
+      username = (user == null ? void 0 : user.username) ?? `User ${fromConnectionId}`;
+      this.renderer.addChatBubble(fromConnectionId, message);
+    }
+    const chatEvent = { username, message, fromConnectionId, userId, isLocal };
+    if (!this.initialLoadCompleted) {
+      this.pendingChatMessages.push(chatEvent);
+      if (this.pendingChatMessages.length > _Networked3dWebExperienceClient.MAX_PENDING_CHAT_MESSAGES) {
+        this.pendingChatMessages.shift();
+      }
+      return;
     }
-    this.avatarSelectionUI = new AvatarSelectionUI({
-      holderElement: this.element,
-      visibleByDefault: false,
-      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,
-      allowCustomDisplayName: this.config.allowCustomDisplayName || false
-    });
-    this.avatarSelectionUI.init();
+    this.emit("chat", chatEvent);
   }
   update() {
     const currentTimeMs = performance.now();
@@ -1506,7 +1037,7 @@ var Networked3dWebExperienceClient = class {
     this.accumulatedTime += elapsedSeconds;
     let physicsUpdated = false;
     const updatedCharacterDescriptions = [];
-    const removedUserIds = [];
+    const removedConnectionIds = [];
     while (this.accumulatedTime >= this.fixedDeltaTime) {
       this.frameCounter++;
       const result = this.characterManager.update(this.fixedDeltaTime, this.frameCounter);
@@ -1515,9 +1046,9 @@ var Networked3dWebExperienceClient = class {
           updatedCharacterDescriptions.push(id);
         }
       }
-      for (const id of result.removedUserIds) {
-        if (!removedUserIds.includes(id)) {
-          removedUserIds.push(id);
+      for (const id of result.removedConnectionIds) {
+        if (!removedConnectionIds.includes(id)) {
+          removedConnectionIds.push(id);
         }
       }
       this.accumulatedTime -= this.fixedDeltaTime;
@@ -1545,9 +1076,9 @@ var Networked3dWebExperienceClient = class {
     const renderState = {
       characters: allCharacterStates,
       updatedCharacterDescriptions,
-      removedUserIds,
+      removedConnectionIds,
       cameraTransform: this.cachedCameraTransform,
-      localCharacterId: this.characterManager.getLocalClientId(),
+      localCharacterId: this.characterManager.getLocalConnectionId(),
       deltaTimeSeconds: this.fixedDeltaTime
     };
     this.renderer.render(renderState);
@@ -1557,14 +1088,14 @@ var Networked3dWebExperienceClient = class {
     spawnRotation,
     cameraPosition
   }) {
-    if (this.clientId === null) {
-      throw new Error("Client ID not set");
+    if (this.connectionId === null) {
+      throw new Error("Connection ID not set");
     }
-    const ownIdentity = this.userProfiles.get(this.clientId);
+    const ownIdentity = this.userProfiles.get(this.connectionId);
     if (!ownIdentity) {
       throw new Error("Own identity not found");
     }
-    this.characterManager.spawnLocalCharacter(this.clientId, spawnPosition, spawnRotation);
+    this.characterManager.spawnLocalCharacter(this.connectionId, spawnPosition, spawnRotation);
     this.characterManager.setupTweakPane(this.tweakPane);
     if (cameraPosition !== null) {
       const cameraState = this.cameraManager.getMainCameraState();
@@ -1579,11 +1110,155 @@ var Networked3dWebExperienceClient = class {
     this.errorScreen = new ErrorScreen("An error occurred", message);
     this.element.append(this.errorScreen.element);
   }
+  // ---------------------------------------------------------------------------
+  // Public API — these methods allow wrapper code (e.g. the CLI client or
+  // custom scripts) to inspect and interact with the running experience.
+  // ---------------------------------------------------------------------------
+  /**
+   * Add a plugin at runtime. If the experience has already loaded, the plugin
+   * is mounted immediately and receives the latest config. Otherwise it will
+   * be mounted alongside the other plugins when loading completes.
+   */
+  addPlugin(plugin) {
+    var _a;
+    this.plugins.push(plugin);
+    if (this.initialLoadCompleted && !this.disposed) {
+      plugin.mount(this.element, this);
+      if (Object.keys(this.latestConfig).length > 0) {
+        (_a = plugin.onConfigChanged) == null ? void 0 : _a.call(plugin, this.latestConfig);
+      }
+    }
+  }
+  /**
+   * Remove a previously added plugin. Calls `dispose()` on the plugin if the
+   * experience has already loaded (i.e. it was mounted).
+   */
+  removePlugin(plugin) {
+    const index = this.plugins.indexOf(plugin);
+    if (index === -1) return;
+    this.plugins.splice(index, 1);
+    if (this.initialLoadCompleted) {
+      plugin.dispose();
+    }
+  }
+  /** Set an additional input provider (e.g. virtual joystick) for character control. */
+  setAdditionalInputProvider(inputProvider) {
+    this.characterManager.setAdditionalInputProvider(inputProvider);
+  }
+  /** Returns the current spawn configuration (position, respawn trigger, etc.). */
+  getSpawnConfiguration() {
+    return this.spawnConfiguration;
+  }
+  /** Returns the local client's connection ID, or null before authentication. */
+  getConnectionId() {
+    return this.connectionId;
+  }
+  /** Returns position and username of the local character, or null if not yet spawned. */
+  getLocalCharacterState() {
+    if (this.connectionId === null) return null;
+    const localController = this.characterManager.localController;
+    if (!localController) return null;
+    const state = localController.networkState;
+    const profile = this.userProfiles.get(this.connectionId);
+    return {
+      connectionId: this.connectionId,
+      userId: (profile == null ? void 0 : profile.userId) ?? "",
+      position: { x: state.position.x, y: state.position.y, z: state.position.z },
+      username: (profile == null ? void 0 : profile.username) ?? ""
+    };
+  }
+  /**
+   * Returns all connected users (including local). Each entry contains
+   * the user's connection ID, userId, position, and username.
+   */
+  getCharacterStates() {
+    var _a, _b, _c;
+    const result = /* @__PURE__ */ new Map();
+    if (this.connectionId !== null) {
+      const local = this.getLocalCharacterState();
+      if (local) {
+        result.set(this.connectionId, { ...local, isLocal: true });
+      }
+    }
+    for (const [connId, update] of this.remoteUserStates) {
+      if (connId === this.connectionId) continue;
+      const profile = this.userProfiles.get(connId);
+      result.set(connId, {
+        connectionId: connId,
+        userId: (profile == null ? void 0 : profile.userId) ?? "",
+        position: {
+          x: ((_a = update.position) == null ? void 0 : _a.x) ?? 0,
+          y: ((_b = update.position) == null ? void 0 : _b.y) ?? 0,
+          z: ((_c = update.position) == null ? void 0 : _c.z) ?? 0
+        },
+        username: (profile == null ? void 0 : profile.username) ?? "",
+        isLocal: false
+      });
+    }
+    return result;
+  }
+  /** Update the character's avatar. */
+  selectAvatar(characterDescription) {
+    if (this.connectionId === null) return;
+    const profile = this.userProfiles.get(this.connectionId);
+    const displayName = (profile == null ? void 0 : profile.username) ?? "";
+    this.sendIdentityUpdateToServer(displayName, characterDescription);
+  }
+  /** Update the character's display name. */
+  setDisplayName(name) {
+    if (this.connectionId === null) return;
+    const profile = this.userProfiles.get(this.connectionId);
+    if (!(profile == null ? void 0 : profile.characterDescription)) return;
+    this.sendIdentityUpdateToServer(name, profile.characterDescription);
+  }
+  /** Respawn the local character at the configured spawn point. */
+  respawn() {
+    var _a;
+    (_a = this.characterManager.localController) == null ? void 0 : _a.resetPosition();
+  }
+  /** Send a chat message. */
+  sendChatMessage(message) {
+    if (this.connectionId === null) return;
+    this.renderer.onChatMessage(message);
+    this.worldConnection.sendChatMessage(message);
+  }
+  /** Access the underlying world connection. */
+  getWorldConnection() {
+    return this.worldConnection;
+  }
+  /** Access the renderer. */
+  getRenderer() {
+    return this.renderer;
+  }
+  /** Access the character manager (local/remote character state, spawning). */
+  getCharacterManager() {
+    return this.characterManager;
+  }
+  /** Access the camera manager. */
+  getCameraManager() {
+    return this.cameraManager;
+  }
+  /** Look up a user's profile (username, avatar, colors) by connection ID. */
+  getUserProfile(connectionId) {
+    return this.userProfiles.get(connectionId) ?? null;
+  }
+  /** Get all user profiles. */
+  getUserProfiles() {
+    return this.userProfiles;
+  }
   dispose() {
-    var _a, _b;
+    var _a;
+    this.disposed = true;
+    this.resizeObserver.disconnect();
+    if (this.worldConfigTimeoutId !== null) {
+      clearTimeout(this.worldConfigTimeoutId);
+      this.worldConfigTimeoutId = null;
+    }
     this.characterManager.dispose();
-    this.networkClient.stop();
-    (_a = this.textChatUI) == null ? void 0 : _a.dispose();
+    this.worldConnection.stop();
+    for (const plugin of this.getAllPlugins()) {
+      plugin.dispose();
+    }
     this.tweakPane.dispose();
     this.renderer.dispose();
     if (this.currentRequestAnimationFrame !== null) {
@@ -1592,10 +1267,1672 @@ var Networked3dWebExperienceClient = class {
     }
     this.cameraManager.dispose();
     this.loadingScreen.dispose();
-    (_b = this.errorScreen) == null ? void 0 : _b.dispose();
+    (_a = this.errorScreen) == null ? void 0 : _a.dispose();
+    this.emit("disposed");
+    this.clearAllHandlers();
+  }
+};
+
+// src/DefaultChatPlugin.ts
+var MAX_MESSAGES = 200;
+var NEAR_DISTANCE = 10;
+var FAR_DISTANCE = 100;
+var FILTER_THRESHOLDS = [0, 15, 30, 60];
+var PASSIVE_MAX = 5;
+var PASSIVE_LINGER_MS = 8e3;
+var PASSIVE_FADE_MS = 600;
+var ACCENT = "#ffffff";
+var PANEL_BG = "rgba(10, 14, 23, 0.85)";
+var BORDER = "1px solid rgba(255,255,255,0.08)";
+var BORDER_RADIUS = "8px";
+function getDistanceColor(distance) {
+  if (distance <= 15) return "#ffffff";
+  if (distance <= 50) return "#7a8ba6";
+  return "#4a5568";
+}
+function getProximityOpacity(distance) {
+  if (distance <= NEAR_DISTANCE) return 1;
+  if (distance >= FAR_DISTANCE) return 0.35;
+  return 1 - (distance - NEAR_DISTANCE) / (FAR_DISTANCE - NEAR_DISTANCE) * 0.65;
+}
+function getProximityFontSize(distance) {
+  if (distance <= NEAR_DISTANCE) return 14;
+  if (distance >= FAR_DISTANCE) return 11;
+  return 14 - (distance - NEAR_DISTANCE) / (FAR_DISTANCE - NEAR_DISTANCE) * 3;
+}
+var DefaultChatPlugin = class {
+  container = null;
+  scrollStyle = null;
+  client = null;
+  enabled = true;
+  messages = [];
+  nextId = 0;
+  panelOpen = false;
+  unreadCount = 0;
+  filterIndex = 0;
+  proximityMode = false;
+  userScrolledUp = false;
+  // DOM references
+  toggleBtn;
+  unreadBadge;
+  passiveArea;
+  panel;
+  messageArea;
+  input;
+  filterPill;
+  proxPill;
+  globalKeydownHandler = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  chatHandler = null;
+  mount(_container, client) {
+    this.client = client;
+    this.container = document.createElement("div");
+    Object.assign(this.container.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: "10001",
+      fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif",
+      fontSize: "13px",
+      color: "#e0e0e0"
+    });
+    _container.appendChild(this.container);
+    this.buildToggleButton();
+    this.buildPassiveArea();
+    this.buildPanel();
+    this.chatHandler = (msg) => {
+      const distance = msg.isLocal ? 0 : this.calculateDistance(msg.fromConnectionId);
+      this.addMessageToUI(msg.username, msg.message, distance, msg.fromConnectionId, msg.isLocal);
+    };
+    client.on("chat", this.chatHandler);
+  }
+  onConfigChanged(config) {
+    if (config.enableChat === void 0 || !this.container) return;
+    this.enabled = config.enableChat;
+    this.container.style.display = this.enabled ? "" : "none";
+    if (!this.enabled && this.panelOpen) {
+      this.setPanelOpen(false);
+    }
+  }
+  dispose() {
+    var _a, _b;
+    if (this.globalKeydownHandler) {
+      document.removeEventListener("keydown", this.globalKeydownHandler);
+      this.globalKeydownHandler = null;
+    }
+    if (this.chatHandler && this.client) {
+      this.client.off("chat", this.chatHandler);
+      this.chatHandler = null;
+    }
+    (_a = this.scrollStyle) == null ? void 0 : _a.remove();
+    (_b = this.container) == null ? void 0 : _b.remove();
+    this.container = null;
+    this.client = null;
+  }
+  buildToggleButton() {
+    this.toggleBtn = document.createElement("div");
+    this.toggleBtn.dataset.testid = "chat-toggle";
+    Object.assign(this.toggleBtn.style, {
+      position: "absolute",
+      bottom: "12px",
+      left: "12px",
+      width: "44px",
+      height: "44px",
+      borderRadius: "50%",
+      background: PANEL_BG,
+      border: BORDER,
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      pointerEvents: "auto",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
+      transition: "all 0.15s ease",
+      color: ACCENT,
+      fontSize: "20px",
+      userSelect: "none"
+    });
+    this.toggleBtn.textContent = "\u{1F4AC}";
+    this.container.appendChild(this.toggleBtn);
+    this.unreadBadge = document.createElement("span");
+    Object.assign(this.unreadBadge.style, {
+      position: "absolute",
+      top: "-4px",
+      right: "-4px",
+      background: ACCENT,
+      color: "#0a0e17",
+      fontSize: "10px",
+      fontWeight: "700",
+      borderRadius: "50%",
+      width: "18px",
+      height: "18px",
+      display: "none",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: "18px",
+      textAlign: "center"
+    });
+    this.toggleBtn.appendChild(this.unreadBadge);
+    this.toggleBtn.addEventListener("click", () => this.setPanelOpen(true));
+  }
+  buildPassiveArea() {
+    this.passiveArea = document.createElement("div");
+    this.passiveArea.dataset.testid = "chat-passive-area";
+    Object.assign(this.passiveArea.style, {
+      position: "absolute",
+      bottom: "64px",
+      left: "12px",
+      width: "360px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2px",
+      pointerEvents: "none"
+    });
+    this.container.appendChild(this.passiveArea);
+  }
+  buildPanel() {
+    this.panel = document.createElement("div");
+    this.panel.dataset.testid = "chat-panel";
+    Object.assign(this.panel.style, {
+      position: "absolute",
+      bottom: "12px",
+      left: "12px",
+      width: "360px",
+      maxHeight: "440px",
+      display: "none",
+      flexDirection: "column",
+      background: PANEL_BG,
+      border: BORDER,
+      borderRadius: BORDER_RADIUS,
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
+      pointerEvents: "auto",
+      overflow: "hidden"
+    });
+    this.container.appendChild(this.panel);
+    const header = document.createElement("div");
+    Object.assign(header.style, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "10px 12px",
+      borderBottom: BORDER,
+      flexShrink: "0"
+    });
+    this.panel.appendChild(header);
+    const headerLeft = document.createElement("div");
+    Object.assign(headerLeft.style, { display: "flex", alignItems: "center", gap: "10px" });
+    header.appendChild(headerLeft);
+    const chatLabel = document.createElement("span");
+    chatLabel.textContent = "CHAT";
+    Object.assign(chatLabel.style, {
+      fontWeight: "600",
+      fontSize: "12px",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase",
+      color: ACCENT
+    });
+    headerLeft.appendChild(chatLabel);
+    const headerRight = document.createElement("div");
+    Object.assign(headerRight.style, { display: "flex", alignItems: "center", gap: "6px" });
+    header.appendChild(headerRight);
+    const pillBase = {
+      fontSize: "10px",
+      padding: "2px 8px",
+      borderRadius: "4px",
+      cursor: "pointer",
+      userSelect: "none",
+      transition: "all 0.15s ease",
+      fontWeight: "600",
+      letterSpacing: "0.3px"
+    };
+    this.filterPill = document.createElement("span");
+    Object.assign(this.filterPill.style, {
+      ...pillBase,
+      border: "1px solid rgba(255,255,255,0.08)",
+      background: "transparent",
+      color: "rgba(255,255,255,0.4)"
+    });
+    this.filterPill.textContent = "ALL";
+    this.filterPill.title = "Filter by distance";
+    headerRight.appendChild(this.filterPill);
+    this.proxPill = document.createElement("span");
+    Object.assign(this.proxPill.style, {
+      ...pillBase,
+      border: "1px solid rgba(255,255,255,0.08)",
+      background: "transparent",
+      color: "rgba(255,255,255,0.4)"
+    });
+    this.proxPill.textContent = "PROX";
+    this.proxPill.title = "Proximity prominence";
+    headerRight.appendChild(this.proxPill);
+    const closeBtn = document.createElement("span");
+    Object.assign(closeBtn.style, {
+      ...pillBase,
+      border: "none",
+      background: "transparent",
+      color: "rgba(255,255,255,0.3)",
+      fontSize: "14px",
+      padding: "0 4px",
+      cursor: "pointer",
+      marginLeft: "4px"
+    });
+    closeBtn.textContent = "\u2715";
+    closeBtn.title = "Close chat";
+    headerRight.appendChild(closeBtn);
+    this.messageArea = document.createElement("div");
+    Object.assign(this.messageArea.style, {
+      flex: "1",
+      overflowY: "auto",
+      padding: "4px 0",
+      minHeight: "0",
+      maxHeight: "340px"
+    });
+    this.scrollStyle = document.createElement("style");
+    this.scrollStyle.textContent = `
+      .default-chat-messages::-webkit-scrollbar { width: 4px; }
+      .default-chat-messages::-webkit-scrollbar-track { background: transparent; }
+      .default-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
+    `;
+    document.head.appendChild(this.scrollStyle);
+    this.messageArea.className = "default-chat-messages";
+    this.panel.appendChild(this.messageArea);
+    const inputArea = document.createElement("div");
+    Object.assign(inputArea.style, {
+      display: "flex",
+      padding: "8px 12px",
+      gap: "8px",
+      borderTop: BORDER,
+      flexShrink: "0"
+    });
+    this.panel.appendChild(inputArea);
+    this.input = document.createElement("input");
+    this.input.dataset.testid = "chat-input";
+    this.input.type = "text";
+    this.input.placeholder = "Type a message...";
+    this.input.maxLength = 500;
+    Object.assign(this.input.style, {
+      flex: "1",
+      background: "rgba(255,255,255,0.06)",
+      border: "1px solid rgba(255,255,255,0.08)",
+      borderRadius: "6px",
+      padding: "6px 10px",
+      color: "#e0e0e0",
+      fontSize: "13px",
+      fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif",
+      outline: "none"
+    });
+    inputArea.appendChild(this.input);
+    const sendBtn = document.createElement("button");
+    sendBtn.dataset.testid = "chat-send";
+    sendBtn.textContent = "\u27A4";
+    Object.assign(sendBtn.style, {
+      background: ACCENT,
+      border: "none",
+      borderRadius: "6px",
+      width: "32px",
+      height: "32px",
+      color: "#0a0e17",
+      fontSize: "14px",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0",
+      transition: "opacity 0.15s ease"
+    });
+    inputArea.appendChild(sendBtn);
+    closeBtn.addEventListener("click", () => this.setPanelOpen(false));
+    this.filterPill.addEventListener("click", () => {
+      this.filterIndex = (this.filterIndex + 1) % FILTER_THRESHOLDS.length;
+      this.updateFilterPill();
+      this.rerenderMessages();
+    });
+    this.proxPill.addEventListener("click", () => {
+      this.proximityMode = !this.proximityMode;
+      this.updateProxPill();
+      this.rerenderMessages();
+    });
+    this.messageArea.addEventListener("scroll", () => {
+      const threshold = 30;
+      const diff = this.messageArea.scrollHeight - this.messageArea.scrollTop - this.messageArea.clientHeight;
+      this.userScrolledUp = diff >= threshold;
+    });
+    this.input.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter" && this.input.value.trim()) {
+        this.sendMessage(this.input.value.trim());
+        this.input.value = "";
+      }
+      if (e.key === "Escape") {
+        this.input.blur();
+        this.setPanelOpen(false);
+      }
+    });
+    this.input.addEventListener("keyup", (e) => e.stopPropagation());
+    this.input.addEventListener("keypress", (e) => e.stopPropagation());
+    sendBtn.addEventListener("click", () => {
+      if (this.input.value.trim()) {
+        this.sendMessage(this.input.value.trim());
+        this.input.value = "";
+      }
+      this.input.focus();
+    });
+    this.globalKeydownHandler = (e) => {
+      if (!this.enabled) return;
+      const active = document.activeElement;
+      const isInputFocused = active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement;
+      if (e.key === "Enter" && !isInputFocused) {
+        e.preventDefault();
+        if (!this.panelOpen) this.setPanelOpen(true);
+        setTimeout(() => this.input.focus(), 0);
+      }
+    };
+    document.addEventListener("keydown", this.globalKeydownHandler);
+  }
+  sendMessage(text) {
+    var _a;
+    (_a = this.client) == null ? void 0 : _a.sendChatMessage(text);
+  }
+  calculateDistance(fromConnectionId) {
+    if (!this.client) return null;
+    const states = this.client.getCharacterStates();
+    let localPos = null;
+    let senderPos = null;
+    for (const s of states.values()) {
+      if (s.isLocal) localPos = s.position;
+      if (s.connectionId === fromConnectionId) senderPos = s.position;
+    }
+    if (!localPos || !senderPos) return null;
+    const dx = senderPos.x - localPos.x;
+    const dz = senderPos.z - localPos.z;
+    return Math.sqrt(dx * dx + dz * dz);
+  }
+  setPanelOpen(open) {
+    this.panelOpen = open;
+    this.panel.style.display = open ? "flex" : "none";
+    this.toggleBtn.style.display = open ? "none" : "flex";
+    this.passiveArea.style.display = open ? "none" : "flex";
+    if (open) {
+      this.unreadCount = 0;
+      this.updateUnreadBadge();
+      this.scrollToBottom(true);
+    }
+  }
+  updateUnreadBadge() {
+    if (this.unreadCount > 0 && !this.panelOpen) {
+      this.unreadBadge.textContent = this.unreadCount > 9 ? "9+" : String(this.unreadCount);
+      this.unreadBadge.style.display = "flex";
+    } else {
+      this.unreadBadge.style.display = "none";
+    }
+  }
+  updateFilterPill() {
+    const threshold = FILTER_THRESHOLDS[this.filterIndex];
+    if (threshold === 0) {
+      this.filterPill.textContent = "ALL";
+      Object.assign(this.filterPill.style, {
+        background: "transparent",
+        color: "rgba(255,255,255,0.4)",
+        borderColor: "rgba(255,255,255,0.08)"
+      });
+    } else {
+      this.filterPill.textContent = `< ${threshold}m`;
+      Object.assign(this.filterPill.style, {
+        background: "rgba(255,255,255,0.08)",
+        color: ACCENT,
+        borderColor: "rgba(255,255,255,0.15)"
+      });
+    }
+  }
+  updateProxPill() {
+    if (this.proximityMode) {
+      Object.assign(this.proxPill.style, {
+        background: "rgba(255,255,255,0.08)",
+        color: ACCENT,
+        borderColor: "rgba(255,255,255,0.15)"
+      });
+    } else {
+      Object.assign(this.proxPill.style, {
+        background: "transparent",
+        color: "rgba(255,255,255,0.4)",
+        borderColor: "rgba(255,255,255,0.08)"
+      });
+    }
+  }
+  shouldShowMessage(msg) {
+    const threshold = FILTER_THRESHOLDS[this.filterIndex];
+    if (threshold === 0) return true;
+    if (msg.fromConnectionId === 0) return true;
+    if (msg.isLocal) return true;
+    if (msg.distance === null) return false;
+    return msg.distance <= threshold;
+  }
+  scrollToBottom(force = false) {
+    if (force || !this.userScrolledUp) {
+      this.messageArea.scrollTop = this.messageArea.scrollHeight;
+    }
+  }
+  createMessageElement(msg) {
+    const row = document.createElement("div");
+    Object.assign(row.style, {
+      padding: "3px 12px",
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "8px",
+      transition: "opacity 0.15s ease"
+    });
+    if (this.proximityMode && msg.distance !== null && msg.fromConnectionId !== 0) {
+      row.style.opacity = String(getProximityOpacity(msg.distance));
+      row.style.fontSize = `${getProximityFontSize(msg.distance)}px`;
+    }
+    const badge = document.createElement("span");
+    Object.assign(badge.style, {
+      fontSize: "9px",
+      padding: "1px 5px",
+      borderRadius: "4px",
+      fontWeight: "600",
+      flexShrink: "0",
+      minWidth: "32px",
+      textAlign: "center",
+      lineHeight: "16px",
+      marginTop: "2px"
+    });
+    if (msg.fromConnectionId === 0) {
+      badge.textContent = "SYS";
+      badge.style.color = "#f0c040";
+      badge.style.background = "rgba(240,192,64,0.12)";
+    } else if (msg.isLocal) {
+      badge.textContent = "YOU";
+      badge.style.color = ACCENT;
+      badge.style.background = "rgba(255,255,255,0.08)";
+    } else if (msg.distance !== null) {
+      badge.textContent = `${Math.round(msg.distance)}m`;
+      const c = getDistanceColor(msg.distance);
+      badge.style.color = c;
+      badge.style.background = c + "1f";
+    } else {
+      badge.textContent = "?";
+      badge.style.color = "rgba(255,255,255,0.3)";
+      badge.style.background = "rgba(255,255,255,0.05)";
+    }
+    row.appendChild(badge);
+    const content = document.createElement("span");
+    Object.assign(content.style, { wordBreak: "break-word", lineHeight: "1.4" });
+    const usernameSpan = document.createElement("span");
+    usernameSpan.textContent = msg.username;
+    Object.assign(usernameSpan.style, {
+      fontWeight: "600",
+      color: msg.isLocal ? ACCENT : "#ffffff",
+      marginRight: "6px"
+    });
+    content.appendChild(usernameSpan);
+    content.appendChild(document.createTextNode(msg.message));
+    row.appendChild(content);
+    return row;
+  }
+  rerenderMessages() {
+    this.messageArea.innerHTML = "";
+    for (const msg of this.messages) {
+      const el = this.createMessageElement(msg);
+      if (!this.shouldShowMessage(msg)) el.style.display = "none";
+      this.messageArea.appendChild(el);
+    }
+    this.scrollToBottom(true);
+  }
+  addPassiveMessage(msg) {
+    const el = document.createElement("div");
+    Object.assign(el.style, {
+      padding: "3px 10px",
+      background: "rgba(10, 14, 23, 0.6)",
+      borderRadius: "6px",
+      fontSize: "13px",
+      lineHeight: "1.4",
+      opacity: "0",
+      transition: `opacity ${PASSIVE_FADE_MS}ms ease`,
+      whiteSpace: "normal",
+      wordBreak: "break-word"
+    });
+    const usernameSpan = document.createElement("span");
+    usernameSpan.textContent = msg.username;
+    Object.assign(usernameSpan.style, {
+      fontWeight: "600",
+      color: msg.isLocal ? ACCENT : "#ffffff",
+      marginRight: "6px"
+    });
+    el.appendChild(usernameSpan);
+    el.appendChild(document.createTextNode(msg.message));
+    this.passiveArea.appendChild(el);
+    requestAnimationFrame(() => {
+      el.style.opacity = "0.9";
+    });
+    while (this.passiveArea.children.length > PASSIVE_MAX) {
+      this.passiveArea.removeChild(this.passiveArea.firstChild);
+    }
+    setTimeout(() => {
+      el.style.opacity = "0";
+      setTimeout(() => {
+        if (el.parentNode === this.passiveArea) this.passiveArea.removeChild(el);
+      }, PASSIVE_FADE_MS);
+    }, PASSIVE_LINGER_MS);
+  }
+  addMessageToUI(username, message, distance, fromConnectionId, isLocal) {
+    const msg = {
+      id: this.nextId++,
+      username,
+      message,
+      distance,
+      fromConnectionId,
+      isLocal,
+      timestamp: Date.now()
+    };
+    this.messages.push(msg);
+    if (this.messages.length > MAX_MESSAGES) {
+      this.messages.shift();
+      if (this.messageArea.firstChild) this.messageArea.removeChild(this.messageArea.firstChild);
+    }
+    const el = this.createMessageElement(msg);
+    if (!this.shouldShowMessage(msg)) el.style.display = "none";
+    this.messageArea.appendChild(el);
+    this.scrollToBottom();
+    if (!this.panelOpen) {
+      this.unreadCount++;
+      this.updateUnreadBadge();
+      this.addPassiveMessage(msg);
+    }
+  }
+};
+
+// src/DefaultAvatarSelectionPlugin.ts
+var ACCENT2 = "#ffffff";
+var PANEL_BG2 = "rgba(10, 14, 23, 0.85)";
+var BORDER2 = "1px solid rgba(255,255,255,0.08)";
+var BORDER_RADIUS2 = "8px";
+var DefaultAvatarSelectionPlugin = class {
+  container = null;
+  scrollStyle = null;
+  client = null;
+  panelOpen = false;
+  selectedIndex = -1;
+  avatars = [];
+  allowCustomAvatars = false;
+  allowCustomDisplayName = false;
+  customAvatarType = "mmlUrl" /* mmlUrl */;
+  // DOM references
+  toggleBtn;
+  panel;
+  grid;
+  nameInput = null;
+  customInput = null;
+  customSection = null;
+  escapeHandler = null;
+  mount(_container, client) {
+    this.client = client;
+    this.container = document.createElement("div");
+    Object.assign(this.container.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: "10001",
+      fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif",
+      fontSize: "13px",
+      color: "#e0e0e0"
+    });
+    _container.appendChild(this.container);
+    this.buildToggleButton();
+    this.buildPanel();
+  }
+  onConfigChanged(config) {
+    const cfg = config;
+    let needsRebuild = false;
+    if (cfg.avatarConfiguration) {
+      this.avatars = cfg.avatarConfiguration.availableAvatars ?? [];
+      this.allowCustomAvatars = cfg.avatarConfiguration.allowCustomAvatars ?? false;
+      needsRebuild = true;
+    }
+    if (cfg.allowCustomDisplayName !== void 0) {
+      this.allowCustomDisplayName = cfg.allowCustomDisplayName || false;
+      needsRebuild = true;
+    }
+    if (needsRebuild) {
+      this.rebuildPanel();
+    }
+  }
+  dispose() {
+    var _a, _b;
+    if (this.escapeHandler) {
+      document.removeEventListener("keydown", this.escapeHandler);
+      this.escapeHandler = null;
+    }
+    (_a = this.scrollStyle) == null ? void 0 : _a.remove();
+    (_b = this.container) == null ? void 0 : _b.remove();
+    this.container = null;
+    this.client = null;
+  }
+  buildToggleButton() {
+    this.toggleBtn = document.createElement("div");
+    Object.assign(this.toggleBtn.style, {
+      position: "absolute",
+      top: "12px",
+      right: "12px",
+      width: "44px",
+      height: "44px",
+      borderRadius: "50%",
+      background: PANEL_BG2,
+      border: BORDER2,
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      pointerEvents: "auto",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
+      transition: "all 0.15s ease",
+      color: ACCENT2,
+      fontSize: "20px",
+      userSelect: "none"
+    });
+    this.toggleBtn.textContent = "\u{1F464}";
+    this.toggleBtn.title = "Avatar & Display Name";
+    this.container.appendChild(this.toggleBtn);
+    this.toggleBtn.addEventListener("click", () => this.setPanelOpen(true));
+  }
+  rebuildPanel() {
+    var _a;
+    const wasOpen = this.panelOpen;
+    this.panel.remove();
+    (_a = this.scrollStyle) == null ? void 0 : _a.remove();
+    this.buildPanel();
+    if (wasOpen) this.setPanelOpen(true);
+  }
+  buildPanel() {
+    this.panel = document.createElement("div");
+    Object.assign(this.panel.style, {
+      position: "absolute",
+      top: "12px",
+      right: "12px",
+      width: "340px",
+      maxHeight: "calc(100vh - 24px)",
+      display: "none",
+      flexDirection: "column",
+      background: PANEL_BG2,
+      border: BORDER2,
+      borderRadius: BORDER_RADIUS2,
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
+      pointerEvents: "auto",
+      overflow: "hidden"
+    });
+    this.container.appendChild(this.panel);
+    const header = document.createElement("div");
+    Object.assign(header.style, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "10px 12px",
+      borderBottom: BORDER2,
+      flexShrink: "0"
+    });
+    this.panel.appendChild(header);
+    const headerLabel = document.createElement("span");
+    headerLabel.textContent = "AVATAR";
+    Object.assign(headerLabel.style, {
+      fontWeight: "600",
+      fontSize: "12px",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase",
+      color: ACCENT2
+    });
+    header.appendChild(headerLabel);
+    const closeBtn = document.createElement("span");
+    Object.assign(closeBtn.style, {
+      fontSize: "14px",
+      color: "rgba(255,255,255,0.3)",
+      cursor: "pointer",
+      padding: "0 4px",
+      userSelect: "none"
+    });
+    closeBtn.textContent = "\u2715";
+    closeBtn.title = "Close";
+    header.appendChild(closeBtn);
+    closeBtn.addEventListener("click", () => this.setPanelOpen(false));
+    this.nameInput = null;
+    if (this.allowCustomDisplayName) {
+      const nameSection = document.createElement("div");
+      Object.assign(nameSection.style, {
+        padding: "8px 12px",
+        borderBottom: BORDER2,
+        flexShrink: "0"
+      });
+      this.panel.appendChild(nameSection);
+      const nameLabel = document.createElement("div");
+      nameLabel.textContent = "Display Name";
+      Object.assign(nameLabel.style, {
+        fontSize: "10px",
+        fontWeight: "600",
+        letterSpacing: "0.5px",
+        textTransform: "uppercase",
+        color: "rgba(255,255,255,0.4)",
+        marginBottom: "6px"
+      });
+      nameSection.appendChild(nameLabel);
+      this.nameInput = document.createElement("input");
+      this.nameInput.type = "text";
+      this.nameInput.placeholder = "Enter display name...";
+      this.nameInput.maxLength = 30;
+      Object.assign(this.nameInput.style, {
+        width: "100%",
+        boxSizing: "border-box",
+        background: "rgba(255,255,255,0.06)",
+        border: "1px solid rgba(255,255,255,0.08)",
+        borderRadius: "6px",
+        padding: "6px 10px",
+        color: "#e0e0e0",
+        fontSize: "13px",
+        fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif",
+        outline: "none"
+      });
+      nameSection.appendChild(this.nameInput);
+      this.nameInput.addEventListener("keydown", (e) => e.stopPropagation());
+      this.nameInput.addEventListener("keyup", (e) => e.stopPropagation());
+      this.nameInput.addEventListener("keypress", (e) => e.stopPropagation());
+    }
+    const gridScroll = document.createElement("div");
+    Object.assign(gridScroll.style, {
+      flex: "1",
+      overflowY: "auto",
+      padding: "8px",
+      minHeight: "0"
+    });
+    this.scrollStyle = document.createElement("style");
+    this.scrollStyle.textContent = `
+      .default-avatar-grid::-webkit-scrollbar { width: 4px; }
+      .default-avatar-grid::-webkit-scrollbar-track { background: transparent; }
+      .default-avatar-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
+    `;
+    document.head.appendChild(this.scrollStyle);
+    gridScroll.className = "default-avatar-grid";
+    this.panel.appendChild(gridScroll);
+    this.grid = document.createElement("div");
+    Object.assign(this.grid.style, {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(70px, 1fr))",
+      gap: "6px"
+    });
+    gridScroll.appendChild(this.grid);
+    this.customInput = null;
+    this.customSection = null;
+    if (this.allowCustomAvatars) {
+      this.customSection = document.createElement("div");
+      Object.assign(this.customSection.style, {
+        padding: "8px 12px",
+        borderTop: BORDER2,
+        flexShrink: "0"
+      });
+      this.panel.appendChild(this.customSection);
+      const customLabel = document.createElement("div");
+      customLabel.textContent = "Custom Avatar";
+      Object.assign(customLabel.style, {
+        fontSize: "10px",
+        fontWeight: "600",
+        letterSpacing: "0.5px",
+        textTransform: "uppercase",
+        color: "rgba(255,255,255,0.4)",
+        marginBottom: "6px"
+      });
+      this.customSection.appendChild(customLabel);
+      this.buildCustomAvatarTypeSelector(this.customSection);
+      this.buildCustomAvatarInput(this.customSection);
+    }
+    const applyArea = document.createElement("div");
+    Object.assign(applyArea.style, {
+      padding: "8px 12px",
+      borderTop: BORDER2,
+      flexShrink: "0"
+    });
+    this.panel.appendChild(applyArea);
+    const applyBtn = document.createElement("button");
+    applyBtn.textContent = "Apply";
+    Object.assign(applyBtn.style, {
+      width: "100%",
+      background: ACCENT2,
+      border: "none",
+      borderRadius: "6px",
+      padding: "8px",
+      color: "#0a0e17",
+      fontSize: "13px",
+      fontWeight: "600",
+      cursor: "pointer",
+      transition: "opacity 0.15s ease",
+      fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif"
+    });
+    applyArea.appendChild(applyBtn);
+    applyBtn.addEventListener("click", () => this.applyChanges());
+    this.escapeHandler = (e) => {
+      if (e.key === "Escape" && this.panelOpen) this.setPanelOpen(false);
+    };
+    document.addEventListener("keydown", this.escapeHandler);
+    this.renderGrid();
+  }
+  renderGrid() {
+    this.grid.innerHTML = "";
+    this.avatars.forEach((avatar, idx) => {
+      const cell = document.createElement("div");
+      const isSelected = idx === this.selectedIndex;
+      Object.assign(cell.style, {
+        aspectRatio: "1",
+        borderRadius: "6px",
+        border: isSelected ? `2px solid ${ACCENT2}` : "2px solid rgba(255,255,255,0.06)",
+        background: isSelected ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.04)",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        transition: "all 0.1s ease",
+        position: "relative"
+      });
+      if (avatar.thumbnailUrl) {
+        const img = document.createElement("img");
+        img.src = avatar.thumbnailUrl;
+        Object.assign(img.style, {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          borderRadius: "4px"
+        });
+        img.onerror = () => {
+          img.remove();
+          this.addTextLabel(cell, avatar, idx);
+        };
+        cell.appendChild(img);
+      } else {
+        this.addTextLabel(cell, avatar, idx);
+      }
+      cell.addEventListener("click", () => {
+        this.selectedIndex = idx;
+        this.renderGrid();
+      });
+      cell.addEventListener("mouseenter", () => {
+        if (idx !== this.selectedIndex) {
+          cell.style.borderColor = "rgba(255,255,255,0.15)";
+          cell.style.background = "rgba(255,255,255,0.06)";
+        }
+      });
+      cell.addEventListener("mouseleave", () => {
+        if (idx !== this.selectedIndex) {
+          cell.style.borderColor = "rgba(255,255,255,0.06)";
+          cell.style.background = "rgba(255,255,255,0.04)";
+        }
+      });
+      this.grid.appendChild(cell);
+    });
+  }
+  buildCustomAvatarTypeSelector(parent) {
+    const radioGroup = document.createElement("div");
+    Object.assign(radioGroup.style, {
+      display: "flex",
+      gap: "12px",
+      marginBottom: "8px"
+    });
+    parent.appendChild(radioGroup);
+    const types = [
+      { type: "mmlUrl" /* mmlUrl */, label: "MML URL" },
+      { type: "mml" /* mml */, label: "MML" },
+      { type: "meshFileUrl" /* meshFileUrl */, label: "Mesh URL" }
+    ];
+    for (const { type, label } of types) {
+      const item = document.createElement("label");
+      Object.assign(item.style, {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        cursor: "pointer",
+        fontSize: "12px",
+        color: "rgba(255,255,255,0.7)"
+      });
+      const radio = document.createElement("input");
+      radio.type = "radio";
+      radio.name = "default-avatar-custom-type";
+      radio.checked = this.customAvatarType === type;
+      radio.addEventListener("change", () => {
+        this.customAvatarType = type;
+        this.rebuildCustomInput();
+      });
+      item.appendChild(radio);
+      item.appendChild(document.createTextNode(label));
+      radioGroup.appendChild(item);
+    }
+  }
+  getCustomPlaceholder() {
+    switch (this.customAvatarType) {
+      case "meshFileUrl" /* meshFileUrl */:
+        return "https://example.com/avatar.glb";
+      case "mmlUrl" /* mmlUrl */:
+        return "https://example.com/avatar.html";
+      case "mml" /* mml */:
+        return '<m-character src="https://...">\n</m-character>';
+    }
+  }
+  buildCustomAvatarInput(parent) {
+    const inputStyle = {
+      width: "100%",
+      boxSizing: "border-box",
+      background: "rgba(255,255,255,0.06)",
+      border: "1px solid rgba(255,255,255,0.08)",
+      borderRadius: "6px",
+      padding: "6px 10px",
+      color: "#e0e0e0",
+      fontSize: "12px",
+      fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif",
+      outline: "none",
+      resize: "vertical"
+    };
+    if (this.customAvatarType === "mml" /* mml */) {
+      const textarea = document.createElement("textarea");
+      textarea.rows = 4;
+      textarea.placeholder = this.getCustomPlaceholder();
+      Object.assign(textarea.style, inputStyle);
+      this.customInput = textarea;
+    } else {
+      const input = document.createElement("input");
+      input.type = "text";
+      input.placeholder = this.getCustomPlaceholder();
+      Object.assign(input.style, inputStyle);
+      this.customInput = input;
+    }
+    this.customInput.addEventListener("input", () => {
+      if (this.customInput.value.trim()) {
+        this.selectedIndex = -1;
+        this.renderGrid();
+      }
+    });
+    this.customInput.addEventListener("keydown", (e) => e.stopPropagation());
+    this.customInput.addEventListener("keyup", (e) => e.stopPropagation());
+    this.customInput.addEventListener("keypress", (e) => e.stopPropagation());
+    parent.appendChild(this.customInput);
+  }
+  rebuildCustomInput() {
+    var _a;
+    if (!this.customSection) return;
+    (_a = this.customInput) == null ? void 0 : _a.remove();
+    this.buildCustomAvatarInput(this.customSection);
+  }
+  addTextLabel(cell, avatar, idx) {
+    const label = document.createElement("span");
+    label.textContent = avatar.name || `#${idx + 1}`;
+    Object.assign(label.style, {
+      fontSize: "10px",
+      color: "rgba(255,255,255,0.5)",
+      textAlign: "center",
+      padding: "4px",
+      wordBreak: "break-word"
+    });
+    cell.appendChild(label);
+  }
+  setPanelOpen(open) {
+    this.panelOpen = open;
+    this.panel.style.display = open ? "flex" : "none";
+    this.toggleBtn.style.display = open ? "none" : "flex";
+    if (open) this.syncCurrentState();
+  }
+  syncCurrentState() {
+    if (!this.client) return;
+    const connectionId = this.client.getConnectionId();
+    if (connectionId === null) return;
+    const profile = this.client.getUserProfile(connectionId);
+    if (!profile) return;
+    if (this.nameInput && profile.username) {
+      this.nameInput.value = profile.username;
+    }
+    const desc = profile.characterDescription;
+    this.selectedIndex = this.avatars.findIndex(
+      (a) => a.meshFileUrl && a.meshFileUrl === (desc == null ? void 0 : desc.meshFileUrl) || a.mmlCharacterUrl && a.mmlCharacterUrl === (desc == null ? void 0 : desc.mmlCharacterUrl) || a.mmlCharacterString && a.mmlCharacterString === (desc == null ? void 0 : desc.mmlCharacterString)
+    );
+    if (this.customInput && this.selectedIndex === -1 && desc) {
+      if (desc.mmlCharacterString) {
+        this.customAvatarType = "mml" /* mml */;
+        this.rebuildCustomInput();
+        this.customInput.value = desc.mmlCharacterString;
+      } else if (desc.mmlCharacterUrl) {
+        this.customAvatarType = "mmlUrl" /* mmlUrl */;
+        this.rebuildCustomInput();
+        this.customInput.value = desc.mmlCharacterUrl;
+      } else if (desc.meshFileUrl) {
+        this.customAvatarType = "meshFileUrl" /* meshFileUrl */;
+        this.rebuildCustomInput();
+        this.customInput.value = desc.meshFileUrl;
+      }
+    }
+    this.renderGrid();
+  }
+  applyChanges() {
+    var _a;
+    if (!this.client) return;
+    let characterDescription = null;
+    if (this.selectedIndex >= 0 && this.selectedIndex < this.avatars.length) {
+      const avatar = this.avatars[this.selectedIndex];
+      if (avatar.meshFileUrl) {
+        characterDescription = { meshFileUrl: avatar.meshFileUrl };
+      } else if (avatar.mmlCharacterUrl) {
+        characterDescription = { mmlCharacterUrl: avatar.mmlCharacterUrl };
+      } else if (avatar.mmlCharacterString) {
+        characterDescription = { mmlCharacterString: avatar.mmlCharacterString };
+      }
+    } else if ((_a = this.customInput) == null ? void 0 : _a.value.trim()) {
+      const value = this.customInput.value.trim();
+      switch (this.customAvatarType) {
+        case "mml" /* mml */:
+          characterDescription = { mmlCharacterString: value };
+          break;
+        case "mmlUrl" /* mmlUrl */:
+          characterDescription = { mmlCharacterUrl: value };
+          break;
+        case "meshFileUrl" /* meshFileUrl */:
+          characterDescription = { meshFileUrl: value };
+          break;
+      }
+    }
+    if (characterDescription) {
+      this.client.selectAvatar(characterDescription);
+    }
+    if (this.nameInput) {
+      const newName = this.nameInput.value.trim();
+      if (newName) this.client.setDisplayName(newName);
+    }
+    this.setPanelOpen(false);
+  }
+};
+
+// src/DefaultHUDPlugin.ts
+var WORLD_HALF = 105;
+var MINIMAP_SIZE = 180;
+var VIEW_RADIUS = WORLD_HALF;
+var GRID_SPACING = 30;
+var PLAYER_LIST_UPDATE_MS = 500;
+var MINIMAP_UPDATE_MS = 100;
+var ACCENT3 = "#ffffff";
+var PANEL_BG3 = "rgba(10, 14, 23, 0.85)";
+var BORDER3 = "1px solid rgba(255,255,255,0.08)";
+var BORDER_RADIUS3 = "8px";
+function createHUD(mountTarget, client, options = {}) {
+  const showMinimap = options.minimap !== false;
+  const showPlayerList = options.playerList !== false;
+  const getCharacterStates = () => client.getCharacterStates();
+  const getCameraYaw = () => {
+    const camPos = client.getCameraManager().getCameraPosition();
+    const states = getCharacterStates();
+    const local = Array.from(states.values()).find((p) => p.isLocal);
+    if (!local) return 0;
+    return Math.atan2(camPos.x - local.position.x, camPos.z - local.position.z);
+  };
+  const container = document.createElement("div");
+  Object.assign(container.style, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: "10000",
+    fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif",
+    fontSize: "13px",
+    color: "#e0e0e0"
+  });
+  mountTarget.appendChild(container);
+  const SMALL_SCREEN_PX = 768;
+  const group = document.createElement("div");
+  Object.assign(group.style, {
+    position: "absolute",
+    bottom: "12px",
+    right: "12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    pointerEvents: "none",
+    alignItems: "flex-end"
+  });
+  container.appendChild(group);
+  let hudExpanded = window.innerWidth >= SMALL_SCREEN_PX;
+  const hudToggle = document.createElement("div");
+  Object.assign(hudToggle.style, {
+    width: "36px",
+    height: "36px",
+    borderRadius: "50%",
+    background: PANEL_BG3,
+    border: BORDER3,
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    pointerEvents: "auto",
+    boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
+    fontSize: "14px",
+    color: ACCENT3,
+    userSelect: "none",
+    flexShrink: "0"
+  });
+  hudToggle.title = "Toggle HUD";
+  hudToggle.textContent = "\u{1F5FA}";
+  group.appendChild(hudToggle);
+  const hudContent = document.createElement("div");
+  Object.assign(hudContent.style, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    pointerEvents: "none"
+  });
+  group.appendChild(hudContent);
+  function setHudExpanded(expanded) {
+    hudExpanded = expanded;
+    hudContent.style.display = expanded ? "flex" : "none";
+    hudToggle.style.display = expanded && window.innerWidth >= SMALL_SCREEN_PX ? "none" : "flex";
+  }
+  hudToggle.addEventListener("click", () => setHudExpanded(!hudExpanded));
+  const resizeHandler = () => {
+    const isSmall = window.innerWidth < SMALL_SCREEN_PX;
+    hudToggle.style.display = !hudExpanded || isSmall ? "flex" : "none";
+  };
+  window.addEventListener("resize", resizeHandler);
+  setHudExpanded(hudExpanded);
+  let highlightedPlayerId = null;
+  let playerListInterval = null;
+  if (showPlayerList) {
+    let updatePlayerList = function() {
+      const states = getCharacterStates();
+      const players = Array.from(states.values()).sort((a, b) => {
+        if (a.isLocal !== b.isLocal) return a.isLocal ? -1 : 1;
+        return (a.username || "").localeCompare(b.username || "");
+      });
+      headerTitle.textContent = `Players (${players.length})`;
+      const names = players.map((p) => `${p.connectionId}:${p.username || ""}:${p.isLocal}`).join(",");
+      if (listBody.dataset.hash === names) return;
+      listBody.dataset.hash = names;
+      listBody.innerHTML = "";
+      for (const player of players) {
+        const row = document.createElement("div");
+        Object.assign(row.style, {
+          padding: "5px 12px",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          cursor: player.isLocal ? "default" : "pointer",
+          transition: "background 0.1s ease"
+        });
+        if (!player.isLocal) {
+          row.addEventListener("mouseenter", () => {
+            highlightedPlayerId = player.connectionId;
+            row.style.background = "rgba(255,255,255,0.06)";
+          });
+          row.addEventListener("mouseleave", () => {
+            highlightedPlayerId = null;
+            row.style.background = "";
+          });
+          row.addEventListener("click", () => {
+            const currentStates = getCharacterStates();
+            const local = Array.from(currentStates.values()).find((p) => p.isLocal);
+            const target = currentStates.get(player.connectionId);
+            if (local && target) {
+              const dx = target.position.x - local.position.x;
+              const dz = target.position.z - local.position.z;
+              const angleToTarget = Math.atan2(dz, dx);
+              client.getCameraManager().setOrbitAngle(angleToTarget + Math.PI);
+            }
+          });
+        }
+        const dot = document.createElement("span");
+        Object.assign(dot.style, {
+          width: "6px",
+          height: "6px",
+          borderRadius: "50%",
+          background: player.isLocal ? ACCENT3 : "#7a8ba6",
+          flexShrink: "0"
+        });
+        row.appendChild(dot);
+        const name = document.createElement("span");
+        name.textContent = player.username || "Unknown";
+        Object.assign(name.style, {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          color: player.isLocal ? "#ffffff" : "#b0bec5",
+          fontWeight: player.isLocal ? "600" : "400",
+          fontSize: "12px"
+        });
+        row.appendChild(name);
+        if (player.isLocal) {
+          const youBadge = document.createElement("span");
+          youBadge.textContent = "you";
+          Object.assign(youBadge.style, {
+            fontSize: "9px",
+            color: ACCENT3,
+            background: "rgba(255,255,255,0.08)",
+            padding: "1px 5px",
+            borderRadius: "4px",
+            marginLeft: "auto",
+            fontWeight: "600",
+            letterSpacing: "0.5px",
+            textTransform: "uppercase",
+            flexShrink: "0"
+          });
+          row.appendChild(youBadge);
+        }
+        listBody.appendChild(row);
+      }
+    };
+    const playerList = document.createElement("div");
+    Object.assign(playerList.style, {
+      width: `${MINIMAP_SIZE}px`,
+      background: PANEL_BG3,
+      border: BORDER3,
+      borderRadius: BORDER_RADIUS3,
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      pointerEvents: "auto",
+      overflow: "hidden",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.4)"
+    });
+    hudContent.appendChild(playerList);
+    const header = document.createElement("div");
+    Object.assign(header.style, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "10px 12px",
+      cursor: "pointer",
+      userSelect: "none",
+      borderBottom: BORDER3
+    });
+    playerList.appendChild(header);
+    const headerTitle = document.createElement("span");
+    headerTitle.textContent = "Players (0)";
+    Object.assign(headerTitle.style, {
+      fontWeight: "600",
+      fontSize: "12px",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase",
+      color: ACCENT3
+    });
+    header.appendChild(headerTitle);
+    const chevron = document.createElement("span");
+    chevron.textContent = "\u25B2";
+    Object.assign(chevron.style, {
+      fontSize: "10px",
+      color: "rgba(255,255,255,0.4)",
+      transition: "transform 0.2s ease"
+    });
+    header.appendChild(chevron);
+    const listBody = document.createElement("div");
+    const reservedPx = 16 + MINIMAP_SIZE + 6 + 40 + 2 + 16;
+    Object.assign(listBody.style, {
+      maxHeight: `calc(100vh - ${reservedPx}px)`,
+      overflowY: "auto",
+      padding: "4px 0"
+    });
+    playerList.appendChild(listBody);
+    let collapsed = false;
+    header.addEventListener("click", () => {
+      collapsed = !collapsed;
+      listBody.style.display = collapsed ? "none" : "block";
+      chevron.style.transform = collapsed ? "rotate(180deg)" : "rotate(0deg)";
+      if (collapsed) highlightedPlayerId = null;
+    });
+    listBody.addEventListener("mouseleave", () => {
+      highlightedPlayerId = null;
+    });
+    playerListInterval = setInterval(updatePlayerList, PLAYER_LIST_UPDATE_MS);
+    updatePlayerList();
+  }
+  let minimapRafId = null;
+  if (showMinimap) {
+    let offsetToCanvas = function(dx, dz, rotation) {
+      let rx, ry;
+      if (rotation !== 0) {
+        const cos = Math.cos(rotation);
+        const sin = Math.sin(rotation);
+        rx = dx * cos - dz * sin;
+        ry = dx * sin + dz * cos;
+      } else {
+        rx = dx;
+        ry = dz;
+      }
+      return [C + rx * frameScale, C + ry * frameScale];
+    }, drawGrid = function(playerX, playerZ, rotation, viewRadius) {
+      ctx.strokeStyle = "rgba(255,255,255,0.05)";
+      ctx.lineWidth = 1;
+      const visibleRange = viewRadius * 1.42;
+      const minGX = Math.floor((playerX - visibleRange) / GRID_SPACING) * GRID_SPACING;
+      const maxGX = Math.ceil((playerX + visibleRange) / GRID_SPACING) * GRID_SPACING;
+      const minGZ = Math.floor((playerZ - visibleRange) / GRID_SPACING) * GRID_SPACING;
+      const maxGZ = Math.ceil((playerZ + visibleRange) / GRID_SPACING) * GRID_SPACING;
+      for (let wx = minGX; wx <= maxGX; wx += GRID_SPACING) {
+        const dx = wx - playerX;
+        const [x1, y1] = offsetToCanvas(dx, -visibleRange, rotation);
+        const [x2, y2] = offsetToCanvas(dx, visibleRange, rotation);
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+      }
+      for (let wz = minGZ; wz <= maxGZ; wz += GRID_SPACING) {
+        const dz = wz - playerZ;
+        const [x1, y1] = offsetToCanvas(-visibleRange, dz, rotation);
+        const [x2, y2] = offsetToCanvas(visibleRange, dz, rotation);
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+      }
+      ctx.strokeStyle = "rgba(255,255,255,0.1)";
+      const [ox1, oy1] = offsetToCanvas(-playerX, -visibleRange, rotation);
+      const [ox2, oy2] = offsetToCanvas(-playerX, visibleRange, rotation);
+      ctx.beginPath();
+      ctx.moveTo(ox1, oy1);
+      ctx.lineTo(ox2, oy2);
+      ctx.stroke();
+      const [zx1, zy1] = offsetToCanvas(-visibleRange, -playerZ, rotation);
+      const [zx2, zy2] = offsetToCanvas(visibleRange, -playerZ, rotation);
+      ctx.beginPath();
+      ctx.moveTo(zx1, zy1);
+      ctx.lineTo(zx2, zy2);
+      ctx.stroke();
+    }, drawNorthIndicator = function(rotation, viewRadius) {
+      const [nx, ny] = offsetToCanvas(0, -viewRadius * 0.88, rotation);
+      if (nx < 0 || nx > S || ny < 0 || ny > S) return;
+      ctx.fillStyle = "rgba(255,255,255,0.35)";
+      ctx.font = "bold 18px 'Segoe UI', system-ui, sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText("N", nx, ny);
+    }, updateMinimap = function() {
+      const states = getCharacterStates();
+      ctx.clearRect(0, 0, S, S);
+      ctx.strokeStyle = "rgba(255,255,255,0.06)";
+      ctx.lineWidth = 2;
+      ctx.strokeRect(1, 1, S - 2, S - 2);
+      const local = Array.from(states.values()).find((p) => p.isLocal) ?? null;
+      const playerX = (local == null ? void 0 : local.position.x) ?? 0;
+      const playerZ = (local == null ? void 0 : local.position.z) ?? 0;
+      let effectiveViewRadius = VIEW_RADIUS;
+      if (highlightedPlayerId !== null) {
+        const highlighted = states.get(highlightedPlayerId);
+        if (highlighted) {
+          const dx = highlighted.position.x - playerX;
+          const dz = highlighted.position.z - playerZ;
+          const dist = Math.sqrt(dx * dx + dz * dz);
+          if (dist > VIEW_RADIUS * 0.85) {
+            effectiveViewRadius = dist * 1.25;
+          }
+        }
+      }
+      frameScale = S / (effectiveViewRadius * 2);
+      const cameraYaw = getCameraYaw();
+      const rotation = cameraOriented ? cameraYaw : 0;
+      drawGrid(playerX, playerZ, rotation, effectiveViewRadius);
+      drawNorthIndicator(rotation, effectiveViewRadius);
+      const players = Array.from(states.values());
+      const remotes = players.filter((p) => !p.isLocal);
+      for (const p of remotes) {
+        const dx = p.position.x - playerX;
+        const dz = p.position.z - playerZ;
+        const [mx, my] = offsetToCanvas(dx, dz, rotation);
+        if (mx < -10 || mx > S + 10 || my < -10 || my > S + 10) continue;
+        const isHighlighted = p.connectionId === highlightedPlayerId;
+        if (isHighlighted) {
+          ctx.beginPath();
+          ctx.moveTo(C, C);
+          ctx.lineTo(mx, my);
+          ctx.strokeStyle = "rgba(255, 255, 255, 0.15)";
+          ctx.lineWidth = 2;
+          ctx.setLineDash([6, 4]);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          ctx.beginPath();
+          ctx.arc(mx, my, 14, 0, Math.PI * 2);
+          ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
+          ctx.fill();
+          ctx.beginPath();
+          ctx.arc(mx, my, 9, 0, Math.PI * 2);
+          ctx.strokeStyle = ACCENT3;
+          ctx.lineWidth = 2;
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.arc(mx, my, 6, 0, Math.PI * 2);
+          ctx.fillStyle = ACCENT3;
+          ctx.fill();
+        } else {
+          ctx.beginPath();
+          ctx.arc(mx, my, 5, 0, Math.PI * 2);
+          ctx.fillStyle = "#7a8ba6";
+          ctx.fill();
+        }
+      }
+      ctx.beginPath();
+      ctx.arc(C, C, 12, 0, Math.PI * 2);
+      ctx.fillStyle = "rgba(255, 255, 255, 0.12)";
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(C, C, 7, 0, Math.PI * 2);
+      ctx.fillStyle = ACCENT3;
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(C, C, 3, 0, Math.PI * 2);
+      ctx.fillStyle = "#ffffff";
+      ctx.fill();
+      coordLabel.textContent = `${Math.round(playerX)}, ${Math.round(playerZ)}`;
+    }, minimapLoop = function(now) {
+      if (now - lastMinimapUpdate >= MINIMAP_UPDATE_MS) {
+        updateMinimap();
+        lastMinimapUpdate = now;
+      }
+      minimapRafId = requestAnimationFrame(minimapLoop);
+    };
+    let cameraOriented = true;
+    const minimapContainer = document.createElement("div");
+    Object.assign(minimapContainer.style, {
+      position: "relative",
+      width: `${MINIMAP_SIZE}px`,
+      height: `${MINIMAP_SIZE}px`,
+      background: PANEL_BG3,
+      border: BORDER3,
+      borderRadius: BORDER_RADIUS3,
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      pointerEvents: "auto",
+      overflow: "hidden",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.4)"
+    });
+    hudContent.appendChild(minimapContainer);
+    const canvas = document.createElement("canvas");
+    canvas.width = MINIMAP_SIZE * 2;
+    canvas.height = MINIMAP_SIZE * 2;
+    Object.assign(canvas.style, {
+      width: `${MINIMAP_SIZE}px`,
+      height: `${MINIMAP_SIZE}px`,
+      display: "block"
+    });
+    minimapContainer.appendChild(canvas);
+    const ctx = canvas.getContext("2d");
+    const S = canvas.width;
+    const C = S / 2;
+    let frameScale = S / (VIEW_RADIUS * 2);
+    const toggleBtn = document.createElement("div");
+    Object.assign(toggleBtn.style, {
+      position: "absolute",
+      top: "6px",
+      right: "6px",
+      width: "22px",
+      height: "22px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "rgba(255,255,255,0.08)",
+      borderRadius: "4px",
+      cursor: "pointer",
+      userSelect: "none",
+      fontSize: "11px",
+      fontWeight: "700",
+      color: ACCENT3,
+      zIndex: "2",
+      lineHeight: "1"
+    });
+    toggleBtn.title = "Toggle north-oriented / camera-oriented";
+    toggleBtn.textContent = "C";
+    minimapContainer.appendChild(toggleBtn);
+    toggleBtn.addEventListener("click", () => {
+      cameraOriented = !cameraOriented;
+      toggleBtn.textContent = cameraOriented ? "C" : "N";
+    });
+    const coordLabel = document.createElement("div");
+    Object.assign(coordLabel.style, {
+      position: "absolute",
+      bottom: "5px",
+      left: "7px",
+      fontSize: "10px",
+      fontFamily: "'SF Mono', 'Cascadia Code', 'Consolas', monospace",
+      color: "rgba(255,255,255,0.45)",
+      zIndex: "2",
+      pointerEvents: "none",
+      textShadow: "0 1px 3px rgba(0,0,0,0.8)"
+    });
+    coordLabel.textContent = "0, 0";
+    minimapContainer.appendChild(coordLabel);
+    const tooltip = document.createElement("div");
+    Object.assign(tooltip.style, {
+      position: "absolute",
+      background: "rgba(0,0,0,0.85)",
+      color: "#fff",
+      padding: "3px 7px",
+      borderRadius: "4px",
+      fontSize: "10px",
+      pointerEvents: "none",
+      display: "none",
+      whiteSpace: "nowrap",
+      zIndex: "3"
+    });
+    minimapContainer.appendChild(tooltip);
+    canvas.addEventListener("mousemove", (e) => {
+      const states = getCharacterStates();
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+      const cx = (e.clientX - rect.left) * scaleX;
+      const cy = (e.clientY - rect.top) * scaleY;
+      const local = Array.from(states.values()).find((p) => p.isLocal) ?? null;
+      const playerX = (local == null ? void 0 : local.position.x) ?? 0;
+      const playerZ = (local == null ? void 0 : local.position.z) ?? 0;
+      const rotation = cameraOriented ? getCameraYaw() : 0;
+      let found = null;
+      for (const p of states.values()) {
+        const dx = p.position.x - playerX;
+        const dz = p.position.z - playerZ;
+        const [mx, my] = p.isLocal ? [C, C] : offsetToCanvas(dx, dz, rotation);
+        const ddx = cx - mx;
+        const ddy = cy - my;
+        if (ddx * ddx + ddy * ddy < 15 * 15) {
+          found = p.username || "Unknown";
+          break;
+        }
+      }
+      if (found) {
+        tooltip.textContent = found;
+        tooltip.style.display = "block";
+        tooltip.style.left = `${e.clientX - rect.left + 10}px`;
+        tooltip.style.top = `${e.clientY - rect.top - 20}px`;
+      } else {
+        tooltip.style.display = "none";
+      }
+    });
+    canvas.addEventListener("mouseleave", () => {
+      tooltip.style.display = "none";
+    });
+    let lastMinimapUpdate = 0;
+    minimapRafId = requestAnimationFrame(minimapLoop);
+    updateMinimap();
+  }
+  return {
+    dispose() {
+      if (playerListInterval !== null) clearInterval(playerListInterval);
+      if (minimapRafId !== null) cancelAnimationFrame(minimapRafId);
+      window.removeEventListener("resize", resizeHandler);
+      container.remove();
+    }
+  };
+}
+var DefaultHUDPlugin = class {
+  hud = null;
+  container = null;
+  client = null;
+  currentMinimap = true;
+  currentPlayerList = true;
+  // Tracks whether the HUD has been explicitly configured or default-created,
+  // so that later partial config updates without a `hud` key are no-ops.
+  hudInitialized = false;
+  mount(container, client) {
+    this.container = container;
+    this.client = client;
+  }
+  onConfigChanged(config) {
+    var _a, _b;
+    if (config.hud === void 0) {
+      if (!this.hudInitialized && !this.hud && this.container && this.client) {
+        this.hudInitialized = true;
+        this.hud = createHUD(this.container, this.client, {
+          minimap: this.currentMinimap,
+          playerList: this.currentPlayerList
+        });
+      }
+      return;
+    }
+    this.hudInitialized = true;
+    if (config.hud === false) {
+      (_a = this.hud) == null ? void 0 : _a.dispose();
+      this.hud = null;
+      return;
+    }
+    const newMinimap = config.hud.minimap !== false;
+    const newPlayerList = config.hud.playerList !== false;
+    if (newMinimap !== this.currentMinimap || newPlayerList !== this.currentPlayerList || !this.hud) {
+      (_b = this.hud) == null ? void 0 : _b.dispose();
+      this.currentMinimap = newMinimap;
+      this.currentPlayerList = newPlayerList;
+      if (this.container && this.client) {
+        this.hud = createHUD(this.container, this.client, {
+          minimap: this.currentMinimap,
+          playerList: this.currentPlayerList
+        });
+      }
+    }
+  }
+  dispose() {
+    var _a;
+    (_a = this.hud) == null ? void 0 : _a.dispose();
+    this.hud = null;
+    this.container = null;
+    this.client = null;
   }
 };
 export {
-  Networked3dWebExperienceClient
+  DefaultAvatarSelectionPlugin,
+  DefaultChatPlugin,
+  DefaultHUDPlugin,
+  DefaultRespawnButtonPlugin,
+  DefaultVirtualJoystickPlugin,
+  Networked3dWebExperienceClient,
+  WorldConnection
 };
 //# sourceMappingURL=index.js.map