@relu-interactives/spatial-ecs 0.4.4 → 0.5.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var THREE51 = require('three');
+var THREE56 = require('three');
 var SkeletonUtils_js = require('three/examples/jsm/utils/SkeletonUtils.js');
 var RectAreaLightHelper_js = require('three/examples/jsm/helpers/RectAreaLightHelper.js');
 var DRACOLoader_js = require('three/examples/jsm/loaders/DRACOLoader.js');
@@ -41,7 +41,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE51__namespace = /*#__PURE__*/_interopNamespace(THREE51);
+var THREE56__namespace = /*#__PURE__*/_interopNamespace(THREE56);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -605,14 +605,14 @@ var _AnimationComponent = class _AnimationComponent extends Component {
       return;
     }
     this.importedClips = clips.map((entry) => {
-      if (entry instanceof THREE51__namespace.AnimationClip) {
+      if (entry instanceof THREE56__namespace.AnimationClip) {
         return { clip: entry, sourceUrl: null };
       }
       if (!entry || typeof entry !== "object") {
         return null;
       }
       const candidate = entry;
-      if (!(candidate.clip instanceof THREE51__namespace.AnimationClip)) {
+      if (!(candidate.clip instanceof THREE56__namespace.AnimationClip)) {
         return null;
       }
       return {
@@ -820,11 +820,11 @@ function normalizeDistanceModel(distanceModel) {
 }
 __name(normalizeDistanceModel, "normalizeDistanceModel");
 function createConfiguredAudio(listener, options) {
-  const sound = options.positional ? new THREE51__namespace.PositionalAudio(listener) : new THREE51__namespace.Audio(listener);
+  const sound = options.positional ? new THREE56__namespace.PositionalAudio(listener) : new THREE56__namespace.Audio(listener);
   sound.setLoop(options.loop);
   sound.setVolume(options.volume);
   sound.setPlaybackRate(options.pitch);
-  if (sound instanceof THREE51__namespace.PositionalAudio) {
+  if (sound instanceof THREE56__namespace.PositionalAudio) {
     sound.setRefDistance(options.refDistance);
     sound.setDistanceModel(normalizeDistanceModel(options.distanceModel));
     sound.setRolloffFactor(options.rolloffFactor);
@@ -834,16 +834,16 @@ function createConfiguredAudio(listener, options) {
 __name(createConfiguredAudio, "createConfiguredAudio");
 function createAudioEditorHelper() {
   if (typeof document === "undefined") {
-    const geometry = new THREE51__namespace.EdgesGeometry(
-      new THREE51__namespace.OctahedronGeometry(0.22, 0)
+    const geometry = new THREE56__namespace.EdgesGeometry(
+      new THREE56__namespace.OctahedronGeometry(0.22, 0)
     );
-    const material2 = new THREE51__namespace.LineBasicMaterial({
+    const material2 = new THREE56__namespace.LineBasicMaterial({
       color: "#8bc8ff",
       transparent: true,
       opacity: 0.95,
       depthTest: false
     });
-    const fallback = new THREE51__namespace.LineSegments(geometry, material2);
+    const fallback = new THREE56__namespace.LineSegments(geometry, material2);
     fallback.renderOrder = 10;
     fallback.userData.ecsHelper = true;
     fallback.visible = false;
@@ -855,7 +855,7 @@ function createAudioEditorHelper() {
   canvas.height = size;
   const ctx = canvas.getContext("2d");
   if (!ctx) {
-    return new THREE51__namespace.Object3D();
+    return new THREE56__namespace.Object3D();
   }
   ctx.clearRect(0, 0, size, size);
   ctx.fillStyle = "rgba(27, 35, 52, 0.9)";
@@ -886,14 +886,14 @@ function createAudioEditorHelper() {
   ctx.beginPath();
   ctx.arc(56, 48, 16, -0.8, 0.8);
   ctx.stroke();
-  const texture = new THREE51__namespace.CanvasTexture(canvas);
+  const texture = new THREE56__namespace.CanvasTexture(canvas);
   texture.needsUpdate = true;
-  const material = new THREE51__namespace.SpriteMaterial({
+  const material = new THREE56__namespace.SpriteMaterial({
     map: texture,
     transparent: true,
     depthTest: false
   });
-  const helper = new THREE51__namespace.Sprite(material);
+  const helper = new THREE56__namespace.Sprite(material);
   helper.scale.set(0.68, 0.68, 0.68);
   helper.renderOrder = 10;
   helper.userData.ecsHelper = true;
@@ -927,7 +927,7 @@ var DEFAULT_ORTHO_TOP = 5;
 var DEFAULT_ORTHO_BOTTOM = -5;
 var DEFAULT_ZOOM = 1;
 function inferProjection(camera) {
-  if (camera instanceof THREE51__namespace.OrthographicCamera) {
+  if (camera instanceof THREE56__namespace.OrthographicCamera) {
     return "orthographic";
   }
   return "perspective";
@@ -948,7 +948,7 @@ function readCameraFar(camera) {
 }
 __name(readCameraFar, "readCameraFar");
 function inferFov(camera) {
-  if (camera instanceof THREE51__namespace.PerspectiveCamera && Number.isFinite(camera.fov)) {
+  if (camera instanceof THREE56__namespace.PerspectiveCamera && Number.isFinite(camera.fov)) {
     return camera.fov;
   }
   return DEFAULT_FOV;
@@ -971,28 +971,28 @@ function inferFar(camera) {
 }
 __name(inferFar, "inferFar");
 function inferOrthoLeft(camera) {
-  if (camera instanceof THREE51__namespace.OrthographicCamera && Number.isFinite(camera.left)) {
+  if (camera instanceof THREE56__namespace.OrthographicCamera && Number.isFinite(camera.left)) {
     return camera.left;
   }
   return DEFAULT_ORTHO_LEFT;
 }
 __name(inferOrthoLeft, "inferOrthoLeft");
 function inferOrthoRight(camera) {
-  if (camera instanceof THREE51__namespace.OrthographicCamera && Number.isFinite(camera.right)) {
+  if (camera instanceof THREE56__namespace.OrthographicCamera && Number.isFinite(camera.right)) {
     return camera.right;
   }
   return DEFAULT_ORTHO_RIGHT;
 }
 __name(inferOrthoRight, "inferOrthoRight");
 function inferOrthoTop(camera) {
-  if (camera instanceof THREE51__namespace.OrthographicCamera && Number.isFinite(camera.top)) {
+  if (camera instanceof THREE56__namespace.OrthographicCamera && Number.isFinite(camera.top)) {
     return camera.top;
   }
   return DEFAULT_ORTHO_TOP;
 }
 __name(inferOrthoTop, "inferOrthoTop");
 function inferOrthoBottom(camera) {
-  if (camera instanceof THREE51__namespace.OrthographicCamera && Number.isFinite(camera.bottom)) {
+  if (camera instanceof THREE56__namespace.OrthographicCamera && Number.isFinite(camera.bottom)) {
     return camera.bottom;
   }
   return DEFAULT_ORTHO_BOTTOM;
@@ -1008,7 +1008,7 @@ __name(inferZoom, "inferZoom");
 var _CameraComponent = class _CameraComponent extends Component {
   constructor(payload = {}) {
     super();
-    this.camera = payload.camera ?? new THREE51__namespace.PerspectiveCamera();
+    this.camera = payload.camera ?? new THREE56__namespace.PerspectiveCamera();
     this.type = payload.type ?? "3d";
     this.isDefault = typeof payload.isDefault === "boolean" ? payload.isDefault : false;
     this.projection = payload.projection ?? inferProjection(payload.camera);
@@ -1039,7 +1039,7 @@ var Object3DRef = _Object3DRef;
 // core/factories/components/CameraFactory.ts
 function createCameraComponent(world, entityId, payload = {}) {
   const object = world.getComponent(entityId, Object3DRef)?.object;
-  const objectCamera = object instanceof THREE51__namespace.Camera ? object : void 0;
+  const objectCamera = object instanceof THREE56__namespace.Camera ? object : void 0;
   const component = new CameraComponent({
     ...payload,
     camera: payload.camera ?? objectCamera
@@ -1609,15 +1609,15 @@ function createValueState(light) {
     castShadow: light.castShadow ?? false,
     frustumCulling: light.frustumCulled
   };
-  if (light instanceof THREE51__namespace.PointLight) {
+  if (light instanceof THREE56__namespace.PointLight) {
     base.distance = light.distance;
     base.decay = light.decay;
-  } else if (light instanceof THREE51__namespace.SpotLight) {
+  } else if (light instanceof THREE56__namespace.SpotLight) {
     base.distance = light.distance;
     base.decay = light.decay;
     base.angle = light.angle;
     base.penumbra = light.penumbra;
-  } else if (light instanceof THREE51__namespace.RectAreaLight) {
+  } else if (light instanceof THREE56__namespace.RectAreaLight) {
     base.width = light.width;
     base.height = light.height;
   }
@@ -1660,13 +1660,13 @@ function toHexColor2(value, fallback) {
 }
 __name(toHexColor2, "toHexColor");
 function getMaterialType(material) {
-  if (material instanceof THREE51__namespace.MeshPhysicalMaterial) {
+  if (material instanceof THREE56__namespace.MeshPhysicalMaterial) {
     return "physical";
   }
-  if (material instanceof THREE51__namespace.MeshPhongMaterial) {
+  if (material instanceof THREE56__namespace.MeshPhongMaterial) {
     return "phong";
   }
-  if (material instanceof THREE51__namespace.MeshBasicMaterial) {
+  if (material instanceof THREE56__namespace.MeshBasicMaterial) {
     return "basic";
   }
   return "standard";
@@ -1701,8 +1701,8 @@ function createMaterialValue(material) {
     opacity: typeof materialRecord.opacity === "number" ? materialRecord.opacity : 1,
     emissive: toHexColor2(materialRecord.emissive, "#000000"),
     emissiveIntensity: typeof materialRecord.emissiveIntensity === "number" ? materialRecord.emissiveIntensity : 0,
-    side: typeof materialRecord.side === "number" ? materialRecord.side : THREE51__namespace.FrontSide,
-    blending: typeof materialRecord.blending === "number" ? materialRecord.blending : THREE51__namespace.NormalBlending,
+    side: typeof materialRecord.side === "number" ? materialRecord.side : THREE56__namespace.FrontSide,
+    blending: typeof materialRecord.blending === "number" ? materialRecord.blending : THREE56__namespace.NormalBlending,
     depthTest: materialRecord.depthTest !== false,
     depthWrite: materialRecord.depthWrite !== false,
     wireframe: Boolean(materialRecord.wireframe),
@@ -1734,7 +1734,7 @@ function createMaterialValue(material) {
       materialRecord.lightMap
     ),
     envMap: textureImageSrc(materialRecord.envMap),
-    textureFiltering: map?.magFilter === THREE51__namespace.NearestFilter ? "sharp" : "smooth",
+    textureFiltering: map?.magFilter === THREE56__namespace.NearestFilter ? "sharp" : "smooth",
     useMipmaps: map?.generateMipmaps !== false
   };
 }
@@ -1749,8 +1749,8 @@ function defaultMaterialValue() {
     opacity: 1,
     emissive: "#000000",
     emissiveIntensity: 0,
-    side: THREE51__namespace.FrontSide,
-    blending: THREE51__namespace.NormalBlending,
+    side: THREE56__namespace.FrontSide,
+    blending: THREE56__namespace.NormalBlending,
     depthTest: true,
     depthWrite: true,
     wireframe: false,
@@ -2327,14 +2327,14 @@ var _TransformComponent = class _TransformComponent extends Component {
       z: scale.z ?? 1
     };
   }
-  toPositionVector3(target = new THREE51.Vector3()) {
+  toPositionVector3(target = new THREE56.Vector3()) {
     return target.set(this.position.x, this.position.y, this.position.z);
   }
-  toRotationEuler(target = new THREE51.Euler(), order = "XYZ") {
+  toRotationEuler(target = new THREE56.Euler(), order = "XYZ") {
     return target.set(this.rotation.x, this.rotation.y, this.rotation.z, order);
   }
-  toRotationQuaternion(target = new THREE51.Quaternion(), order = "XYZ") {
-    const euler = new THREE51.Euler(
+  toRotationQuaternion(target = new THREE56.Quaternion(), order = "XYZ") {
+    const euler = new THREE56.Euler(
       this.rotation.x,
       this.rotation.y,
       this.rotation.z,
@@ -2342,7 +2342,7 @@ var _TransformComponent = class _TransformComponent extends Component {
     );
     return target.setFromEuler(euler);
   }
-  toScaleVector3(target = new THREE51.Vector3()) {
+  toScaleVector3(target = new THREE56.Vector3()) {
     return target.set(this.scale.x, this.scale.y, this.scale.z);
   }
   setPosition(input) {
@@ -2360,8 +2360,8 @@ var _TransformComponent = class _TransformComponent extends Component {
     return this;
   }
   setRotation(input, order = "XYZ") {
-    if (input instanceof THREE51.Quaternion) {
-      const euler = new THREE51.Euler().setFromQuaternion(input, order);
+    if (input instanceof THREE56.Quaternion) {
+      const euler = new THREE56.Euler().setFromQuaternion(input, order);
       this.rotation.x = euler.x;
       this.rotation.y = euler.y;
       this.rotation.z = euler.z;
@@ -2978,6 +2978,140 @@ function createXRInteractorSideComponent(world, entityId, ...args) {
 }
 __name(createXRInteractorSideComponent, "createXRInteractorSideComponent");
 
+// core/components/UIButton.ts
+var _UIButtonComponent = class _UIButtonComponent extends Component {
+  constructor(options) {
+    super();
+    this.label = options?.label ?? "Button";
+    this.actionId = options?.actionId ?? "";
+    this.width = options?.width ?? 0.3;
+    this.height = options?.height ?? 0.1;
+    this.fontSize = options?.fontSize ?? 0.03;
+    this.fontWeight = options?.fontWeight ?? 600;
+    this.textColor = options?.textColor ?? "#ffffff";
+    this.backgroundColor = options?.backgroundColor ?? "#2a2a2a";
+    this.backgroundOpacity = options?.backgroundOpacity ?? 1;
+    this.cornerRadius = options?.cornerRadius ?? 0.02;
+    this.borderWidth = options?.borderWidth ?? 2e-3;
+    this.borderColor = options?.borderColor ?? "#3a3a3a";
+  }
+};
+__name(_UIButtonComponent, "UIButtonComponent");
+var UIButtonComponent = _UIButtonComponent;
+
+// core/factories/components/UIButtonComponentFactory.ts
+function createUIButtonComponent(world, entityId, ...args) {
+  const component = new UIButtonComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createUIButtonComponent, "createUIButtonComponent");
+
+// core/components/UIPanel.ts
+var _UIPanelComponent = class _UIPanelComponent extends Component {
+  constructor(options) {
+    super();
+    this.width = options?.width ?? 0.6;
+    this.height = options?.height ?? 0.4;
+    this.backgroundColor = options?.backgroundColor ?? "#1c1c1c";
+    this.backgroundOpacity = options?.backgroundOpacity ?? 0.92;
+    this.cornerRadius = options?.cornerRadius ?? 0.02;
+    this.borderWidth = options?.borderWidth ?? 0;
+    this.borderColor = options?.borderColor ?? "#333333";
+    this.pixelDensity = options?.pixelDensity ?? 1024;
+    this.follow = options?.follow ?? "world";
+  }
+};
+__name(_UIPanelComponent, "UIPanelComponent");
+var UIPanelComponent = _UIPanelComponent;
+
+// core/factories/components/UIPanelComponentFactory.ts
+function createUIPanelComponent(world, entityId, ...args) {
+  const component = new UIPanelComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createUIPanelComponent, "createUIPanelComponent");
+
+// core/components/UISlider.ts
+var _UISliderComponent = class _UISliderComponent extends Component {
+  constructor(options) {
+    super();
+    this.min = options?.min ?? 0;
+    this.max = options?.max ?? Math.max(1, this.min + 1);
+    if (this.max <= this.min) this.max = this.min + 1;
+    const v = options?.value ?? (this.min + this.max) / 2;
+    this.value = Math.min(this.max, Math.max(this.min, v));
+    this.actionId = options?.actionId ?? "";
+    this.width = options?.width ?? 0.4;
+    this.height = options?.height ?? 0.06;
+    this.trackColor = options?.trackColor ?? "#2a2a2a";
+    this.accentColor = options?.accentColor ?? "#ff6b35";
+    this.knobColor = options?.knobColor ?? "#ffffff";
+  }
+};
+__name(_UISliderComponent, "UISliderComponent");
+var UISliderComponent = _UISliderComponent;
+
+// core/factories/components/UISliderComponentFactory.ts
+function createUISliderComponent(world, entityId, ...args) {
+  const component = new UISliderComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createUISliderComponent, "createUISliderComponent");
+
+// core/components/UIText.ts
+var _UITextComponent = class _UITextComponent extends Component {
+  constructor(options) {
+    super();
+    this.text = options?.text ?? "Text";
+    this.width = options?.width ?? 0.5;
+    this.height = options?.height ?? 0.12;
+    this.fontSize = options?.fontSize ?? 0.035;
+    this.fontWeight = options?.fontWeight ?? 500;
+    this.color = options?.color ?? "#ffffff";
+    this.align = options?.align ?? "center";
+    this.valign = options?.valign ?? "middle";
+    this.lineHeight = options?.lineHeight ?? 1.25;
+    this.padding = options?.padding ?? 0.01;
+  }
+};
+__name(_UITextComponent, "UITextComponent");
+var UITextComponent = _UITextComponent;
+
+// core/factories/components/UITextComponentFactory.ts
+function createUITextComponent(world, entityId, ...args) {
+  const component = new UITextComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createUITextComponent, "createUITextComponent");
+
+// core/components/UIToggle.ts
+var _UIToggleComponent = class _UIToggleComponent extends Component {
+  constructor(options) {
+    super();
+    this.value = options?.value ?? false;
+    this.actionId = options?.actionId ?? "";
+    this.width = options?.width ?? 0.14;
+    this.height = options?.height ?? 0.07;
+    this.trackColor = options?.trackColor ?? "#2a2a2a";
+    this.accentColor = options?.accentColor ?? "#ff6b35";
+    this.knobColor = options?.knobColor ?? "#ffffff";
+  }
+};
+__name(_UIToggleComponent, "UIToggleComponent");
+var UIToggleComponent = _UIToggleComponent;
+
+// core/factories/components/UIToggleComponentFactory.ts
+function createUIToggleComponent(world, entityId, ...args) {
+  const component = new UIToggleComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createUIToggleComponent, "createUIToggleComponent");
+
 // core/factories/registerDefaultComponentFactories.ts
 function registerDefaultComponentFactories(objectManagementSystem) {
   objectManagementSystem.registerComponentFactory("animation", createAnimationComponent);
@@ -2991,6 +3125,11 @@ function registerDefaultComponentFactories(objectManagementSystem) {
   objectManagementSystem.registerComponentFactory("vrTeleportArea", createVRTeleportAreaComponent);
   objectManagementSystem.registerComponentFactory("xrHandPose", createXRHandPoseComponent);
   objectManagementSystem.registerComponentFactory("xrAnchor", createXRAnchorComponent);
+  objectManagementSystem.registerComponentFactory("uiPanel", createUIPanelComponent);
+  objectManagementSystem.registerComponentFactory("uiText", createUITextComponent);
+  objectManagementSystem.registerComponentFactory("uiButton", createUIButtonComponent);
+  objectManagementSystem.registerComponentFactory("uiToggle", createUIToggleComponent);
+  objectManagementSystem.registerComponentFactory("uiSlider", createUISliderComponent);
   objectManagementSystem.registerComponentFactory("xrInteractable", createXRInteractableComponent);
   objectManagementSystem.registerComponentFactory("xrInteractor", createXRInteractorComponent);
   objectManagementSystem.registerComponentFactory("xrInteractorSide", createXRInteractorSideComponent);
@@ -3037,7 +3176,7 @@ var SHARED_MODEL_RESOURCE_FLAG = "spatialEcsSharedModelResource";
 var modelCache = /* @__PURE__ */ new Map();
 function markSharedResources(root) {
   root.traverse((child) => {
-    if (!(child instanceof THREE51__namespace.Mesh)) {
+    if (!(child instanceof THREE56__namespace.Mesh)) {
       return;
     }
     if (child.geometry) {
@@ -3116,10 +3255,10 @@ var _ObjectManagementSystem = class _ObjectManagementSystem {
   }
   getOrCreateAudioListener() {
     const existing = this.camera.userData.ecsAudioListener;
-    if (existing instanceof THREE51__namespace.AudioListener) {
+    if (existing instanceof THREE56__namespace.AudioListener) {
       return existing;
     }
-    const listener = new THREE51__namespace.AudioListener();
+    const listener = new THREE56__namespace.AudioListener();
     this.camera.add(listener);
     this.camera.userData.ecsAudioListener = listener;
     return listener;
@@ -3193,7 +3332,7 @@ var _ObjectManagementSystem = class _ObjectManagementSystem {
     }
     if (dispose && object3d) {
       object3d.traverse((child) => {
-        if (child instanceof THREE51__namespace.Mesh) {
+        if (child instanceof THREE56__namespace.Mesh) {
           if (!child.geometry?.userData?.[SHARED_MODEL_RESOURCE_FLAG]) {
             child.geometry?.dispose();
           }
@@ -3330,10 +3469,10 @@ __name(createBaseEntity, "createBaseEntity");
 // core/factories/objects/AudioFactory.ts
 function getOrCreateListener(camera) {
   const existing = camera.userData.ecsAudioListener;
-  if (existing instanceof THREE51__namespace.AudioListener) {
+  if (existing instanceof THREE56__namespace.AudioListener) {
     return existing;
   }
-  const listener = new THREE51__namespace.AudioListener();
+  const listener = new THREE56__namespace.AudioListener();
   camera.add(listener);
   camera.userData.ecsAudioListener = listener;
   return listener;
@@ -3346,7 +3485,7 @@ function createAudio({
   payload,
   isEditor
 }) {
-  const anchor = new THREE51__namespace.Object3D();
+  const anchor = new THREE56__namespace.Object3D();
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Audio",
     entityType: "audio",
@@ -3368,7 +3507,7 @@ function createAudio({
     return entityId;
   }
   if (!isEditor) {
-    const loader = new THREE51__namespace.AudioLoader();
+    const loader = new THREE56__namespace.AudioLoader();
     loader.load(
       audio.path,
       (buffer) => {
@@ -3443,7 +3582,7 @@ function applyCameraSettings(camera, options) {
   const near = typeof options.near === "number" ? options.near : DEFAULT_NEAR2;
   const far = typeof options.far === "number" ? options.far : DEFAULT_FAR2;
   const projection = options.projection;
-  if (camera instanceof THREE51__namespace.PerspectiveCamera) {
+  if (camera instanceof THREE56__namespace.PerspectiveCamera) {
     if (!projection || projection === "perspective") {
       camera.fov = typeof options.fov === "number" ? options.fov : DEFAULT_FOV2;
     }
@@ -3453,7 +3592,7 @@ function applyCameraSettings(camera, options) {
     camera.updateProjectionMatrix();
     return;
   }
-  if (camera instanceof THREE51__namespace.OrthographicCamera) {
+  if (camera instanceof THREE56__namespace.OrthographicCamera) {
     camera.left = typeof options.left === "number" ? options.left : -DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
     camera.right = typeof options.right === "number" ? options.right : DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
     camera.top = typeof options.top === "number" ? options.top : DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
@@ -3474,7 +3613,7 @@ function createCameraObject(options) {
     const bottom = options.bottom ?? -DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
     const left = options.left ?? -DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
     const right = options.right ?? DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
-    const camera = new THREE51__namespace.OrthographicCamera(
+    const camera = new THREE56__namespace.OrthographicCamera(
       left,
       right,
       top,
@@ -3486,7 +3625,7 @@ function createCameraObject(options) {
     camera.updateProjectionMatrix();
     return camera;
   }
-  return new THREE51__namespace.PerspectiveCamera(
+  return new THREE56__namespace.PerspectiveCamera(
     options.fov ?? DEFAULT_FOV2,
     readViewportAspect(),
     near,
@@ -3504,7 +3643,7 @@ function createCamera({ world, scene, camera, payload, isEditor }) {
     transformInput: payload.transform
   });
   const objectRef = world.getComponent(entityId, Object3DRef);
-  if (objectRef?.object instanceof THREE51__namespace.Camera) {
+  if (objectRef?.object instanceof THREE56__namespace.Camera) {
     objectRef.object.userData.entityId = entityId;
   }
   const componentOptions = {
@@ -3536,9 +3675,9 @@ function createCapsule({
   scene,
   payload
 }) {
-  const geometry = new THREE51__namespace.CapsuleGeometry(0.5, 1, 4, 8);
-  const material = new THREE51__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE51__namespace.Mesh(geometry, material);
+  const geometry = new THREE56__namespace.CapsuleGeometry(0.5, 1, 4, 8);
+  const material = new THREE56__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE56__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Capsule",
     entityType: "capsule",
@@ -3558,9 +3697,9 @@ function createCapsule({
 }
 __name(createCapsule, "createCapsule");
 function createCube({ world, scene, payload }) {
-  const geometry = new THREE51__namespace.BoxGeometry(1, 1, 1);
-  const material = new THREE51__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE51__namespace.Mesh(geometry, material);
+  const geometry = new THREE56__namespace.BoxGeometry(1, 1, 1);
+  const material = new THREE56__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE56__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Cube",
     entityType: "cube",
@@ -3585,9 +3724,9 @@ function createCylinder({
   scene,
   payload
 }) {
-  const geometry = new THREE51__namespace.CylinderGeometry(0.5, 0.5, 1, 20);
-  const material = new THREE51__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE51__namespace.Mesh(geometry, material);
+  const geometry = new THREE56__namespace.CylinderGeometry(0.5, 0.5, 1, 20);
+  const material = new THREE56__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE56__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Cylinder",
     entityType: "cylinder",
@@ -3607,7 +3746,7 @@ function createCylinder({
 }
 __name(createCylinder, "createCylinder");
 function createEmpty({ world, scene, payload, isEditor }) {
-  const object = new THREE51__namespace.Group();
+  const object = new THREE56__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Empty",
     entityType: "empty",
@@ -3618,7 +3757,7 @@ function createEmpty({ world, scene, payload, isEditor }) {
 }
 __name(createEmpty, "createEmpty");
 function createImage({ world, scene, payload }) {
-  const anchor = new THREE51__namespace.Object3D();
+  const anchor = new THREE56__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Image",
@@ -3631,7 +3770,7 @@ function createImage({ world, scene, payload }) {
   if (!imagePath) {
     return entityId;
   }
-  const loader = new THREE51__namespace.TextureLoader();
+  const loader = new THREE56__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -3639,13 +3778,13 @@ function createImage({ world, scene, payload }) {
         texture.dispose();
         return;
       }
-      const material = new THREE51__namespace.MeshBasicMaterial({
+      const material = new THREE56__namespace.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE51__namespace.DoubleSide
+        side: THREE56__namespace.DoubleSide
       });
-      const geometry = new THREE51__namespace.PlaneGeometry(1, 1);
-      const plane = new THREE51__namespace.Mesh(geometry, material);
+      const geometry = new THREE56__namespace.PlaneGeometry(1, 1);
+      const plane = new THREE56__namespace.Mesh(geometry, material);
       plane.userData.entityId = entityId;
       const textureImage = texture.image;
       const width = textureImage?.width ?? 1;
@@ -3691,7 +3830,7 @@ function createImageTarget({
   payload,
   isEditor
 }) {
-  const anchor = new THREE51__namespace.Object3D();
+  const anchor = new THREE56__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Image Target",
@@ -3708,7 +3847,7 @@ function createImageTarget({
   if (!isEditor || !imagePath) {
     return entityId;
   }
-  const loader = new THREE51__namespace.TextureLoader();
+  const loader = new THREE56__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -3716,13 +3855,13 @@ function createImageTarget({
         texture.dispose();
         return;
       }
-      const material = new THREE51__namespace.MeshBasicMaterial({
+      const material = new THREE56__namespace.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE51__namespace.DoubleSide
+        side: THREE56__namespace.DoubleSide
       });
-      const geometry = new THREE51__namespace.PlaneGeometry(1, 1);
-      const plane = new THREE51__namespace.Mesh(geometry, material);
+      const geometry = new THREE56__namespace.PlaneGeometry(1, 1);
+      const plane = new THREE56__namespace.Mesh(geometry, material);
       plane.userData.entityId = entityId;
       const textureImage = texture.image;
       const width = textureImage?.width ?? 1;
@@ -3773,7 +3912,7 @@ function createInstancedMesh({
   scene,
   payload
 }) {
-  const anchor = new THREE51__namespace.Object3D();
+  const anchor = new THREE56__namespace.Object3D();
   const opts = payload.options ?? {};
   const meshKind = isInstancedMeshKind(opts.meshKind) ? opts.meshKind : "cube";
   const meshParameters = opts.meshParameters && typeof opts.meshParameters === "object" ? opts.meshParameters : void 0;
@@ -3844,7 +3983,7 @@ function createAmbientLight({
   scene,
   payload
 }) {
-  const light = new THREE51__namespace.AmbientLight("#ffffff", 0.6);
+  const light = new THREE56__namespace.AmbientLight("#ffffff", 0.6);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Ambient Light",
     entityType: "ambientLight",
@@ -3861,7 +4000,7 @@ function createAreaLight({
   payload,
   isEditor
 }) {
-  const light = new THREE51__namespace.RectAreaLight("#ffffff", 5, 4, 4);
+  const light = new THREE56__namespace.RectAreaLight("#ffffff", 5, 4, 4);
   light.lookAt(0, 0, 0);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Area Light",
@@ -3890,7 +4029,7 @@ function createDirectionalLight({
   payload,
   isEditor
 }) {
-  const light = new THREE51__namespace.DirectionalLight("#ffffff", 1.5);
+  const light = new THREE56__namespace.DirectionalLight("#ffffff", 1.5);
   light.castShadow = true;
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Directional Light",
@@ -3901,7 +4040,7 @@ function createDirectionalLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE51__namespace.DirectionalLightHelper(light, 1.8, "#38bdf8");
+    const helper = new THREE56__namespace.DirectionalLightHelper(light, 1.8, "#38bdf8");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -3919,7 +4058,7 @@ function createPointLight({
   payload,
   isEditor
 }) {
-  const light = new THREE51__namespace.PointLight("#ffffff", 1, 10);
+  const light = new THREE56__namespace.PointLight("#ffffff", 1, 10);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Point Light",
     entityType: "pointLight",
@@ -3929,7 +4068,7 @@ function createPointLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE51__namespace.PointLightHelper(light, 0.35, "#fbbf24");
+    const helper = new THREE56__namespace.PointLightHelper(light, 0.35, "#fbbf24");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -3947,7 +4086,7 @@ function createSpotLight({
   payload,
   isEditor
 }) {
-  const light = new THREE51__namespace.SpotLight("#ffffff", 1, 20, Math.PI / 6, 0.1, 1);
+  const light = new THREE56__namespace.SpotLight("#ffffff", 1, 20, Math.PI / 6, 0.1, 1);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Spot Light",
     entityType: "spotLight",
@@ -3957,7 +4096,7 @@ function createSpotLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE51__namespace.SpotLightHelper(light, "#f59e0b");
+    const helper = new THREE56__namespace.SpotLightHelper(light, "#f59e0b");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -4042,6 +4181,11 @@ __export(components_exports, {
   SelectionTransformState: () => SelectionTransformState,
   SpriteComponent: () => SpriteComponent,
   TransformComponent: () => TransformComponent,
+  UIButtonComponent: () => UIButtonComponent,
+  UIPanelComponent: () => UIPanelComponent,
+  UISliderComponent: () => UISliderComponent,
+  UITextComponent: () => UITextComponent,
+  UIToggleComponent: () => UIToggleComponent,
   VRTeleportAreaComponent: () => VRTeleportAreaComponent,
   VideoComponent: () => VideoComponent,
   XRAnchorComponent: () => XRAnchorComponent,
@@ -4124,7 +4268,7 @@ function createModel({
   payload,
   isEditor
 }) {
-  const anchor = new THREE51__namespace.Object3D();
+  const anchor = new THREE56__namespace.Object3D();
   const modelPath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Model",
@@ -4190,12 +4334,12 @@ function createModel({
 }
 __name(createModel, "createModel");
 function createPlane({ world, scene, payload }) {
-  const geometry = new THREE51__namespace.PlaneGeometry(100, 100);
-  const material = new THREE51__namespace.MeshStandardMaterial({
+  const geometry = new THREE56__namespace.PlaneGeometry(100, 100);
+  const material = new THREE56__namespace.MeshStandardMaterial({
     color: "#ffffff",
-    side: THREE51__namespace.DoubleSide
+    side: THREE56__namespace.DoubleSide
   });
-  const mesh = new THREE51__namespace.Mesh(geometry, material);
+  const mesh = new THREE56__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(
     world,
     mesh,
@@ -4231,7 +4375,7 @@ function createScriptObject({
   scene,
   payload
 }) {
-  const object = new THREE51__namespace.Group();
+  const object = new THREE56__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Script Object",
     entityType: "scriptObject",
@@ -4256,15 +4400,15 @@ function createTeleportArea({
   const options = payload.options ?? {};
   const width = typeof options.width === "number" ? options.width : 10;
   const depth = typeof options.depth === "number" ? options.depth : 10;
-  const geometry = new THREE51__namespace.PlaneGeometry(width, depth);
-  const material = new THREE51__namespace.MeshBasicMaterial({
+  const geometry = new THREE56__namespace.PlaneGeometry(width, depth);
+  const material = new THREE56__namespace.MeshBasicMaterial({
     color: "#4da3ff",
     transparent: true,
     opacity: 0.18,
-    side: THREE51__namespace.DoubleSide,
+    side: THREE56__namespace.DoubleSide,
     depthWrite: false
   });
-  const object = new THREE51__namespace.Mesh(geometry, material);
+  const object = new THREE56__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Teleport Area",
     entityType: "teleportArea",
@@ -4292,7 +4436,7 @@ function createXRInteractor({
   scene,
   payload
 }) {
-  const root = new THREE51__namespace.Group();
+  const root = new THREE56__namespace.Group();
   const options = payload.options ?? {};
   const entityId = createBaseEntity(world, root, {
     label: payload.name ?? "XR Interactor",
@@ -4305,7 +4449,7 @@ function createXRInteractor({
     return entityId;
   }
   for (const side of ["left", "right"]) {
-    const slot = new THREE51__namespace.Group();
+    const slot = new THREE56__namespace.Group();
     const label = side === "left" ? "Left Interactor" : "Right Interactor";
     const slotEntityId = createBaseEntity(world, slot, {
       label,
@@ -4318,12 +4462,121 @@ function createXRInteractor({
   return entityId;
 }
 __name(createXRInteractor, "createXRInteractor");
+function createUIButton({
+  world,
+  scene,
+  payload
+}) {
+  const object = new THREE56__namespace.Group();
+  const entityId = createBaseEntity(world, object, {
+    label: payload.name ?? "UI Button",
+    entityType: "uiButton",
+    transformInput: payload.transform
+  });
+  const options = payload.options ?? {};
+  world.addComponent(entityId, new UIButtonComponent(options));
+  world.addComponent(
+    entityId,
+    new XRInteractableComponent({
+      grabbable: false,
+      pointable: true,
+      hoverBehavior: "color"
+    })
+  );
+  scene.add(object);
+  return entityId;
+}
+__name(createUIButton, "createUIButton");
+function createUIPanel({
+  world,
+  scene,
+  payload
+}) {
+  const object = new THREE56__namespace.Group();
+  const entityId = createBaseEntity(world, object, {
+    label: payload.name ?? "UI Panel",
+    entityType: "uiPanel",
+    transformInput: payload.transform
+  });
+  const options = payload.options ?? {};
+  world.addComponent(entityId, new UIPanelComponent(options));
+  scene.add(object);
+  return entityId;
+}
+__name(createUIPanel, "createUIPanel");
+function createUISlider({
+  world,
+  scene,
+  payload
+}) {
+  const object = new THREE56__namespace.Group();
+  const entityId = createBaseEntity(world, object, {
+    label: payload.name ?? "UI Slider",
+    entityType: "uiSlider",
+    transformInput: payload.transform
+  });
+  const options = payload.options ?? {};
+  world.addComponent(entityId, new UISliderComponent(options));
+  world.addComponent(
+    entityId,
+    new XRInteractableComponent({
+      grabbable: false,
+      pointable: true,
+      hoverBehavior: "none"
+    })
+  );
+  scene.add(object);
+  return entityId;
+}
+__name(createUISlider, "createUISlider");
+function createUIText({
+  world,
+  scene,
+  payload
+}) {
+  const object = new THREE56__namespace.Group();
+  const entityId = createBaseEntity(world, object, {
+    label: payload.name ?? "UI Text",
+    entityType: "uiText",
+    transformInput: payload.transform
+  });
+  const options = payload.options ?? {};
+  world.addComponent(entityId, new UITextComponent(options));
+  scene.add(object);
+  return entityId;
+}
+__name(createUIText, "createUIText");
+function createUIToggle({
+  world,
+  scene,
+  payload
+}) {
+  const object = new THREE56__namespace.Group();
+  const entityId = createBaseEntity(world, object, {
+    label: payload.name ?? "UI Toggle",
+    entityType: "uiToggle",
+    transformInput: payload.transform
+  });
+  const options = payload.options ?? {};
+  world.addComponent(entityId, new UIToggleComponent(options));
+  world.addComponent(
+    entityId,
+    new XRInteractableComponent({
+      grabbable: false,
+      pointable: true,
+      hoverBehavior: "color"
+    })
+  );
+  scene.add(object);
+  return entityId;
+}
+__name(createUIToggle, "createUIToggle");
 function createXRRig({
   world,
   scene,
   payload
 }) {
-  const object = new THREE51__namespace.Group();
+  const object = new THREE56__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "XR Rig",
     entityType: "xrRig",
@@ -4336,7 +4589,7 @@ function createXRRig({
 }
 __name(createXRRig, "createXRRig");
 function createSprite({ world, scene, payload }) {
-  const anchor = new THREE51__namespace.Object3D();
+  const anchor = new THREE56__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Sprite",
@@ -4348,7 +4601,7 @@ function createSprite({ world, scene, payload }) {
   if (!imagePath) {
     return entityId;
   }
-  const loader = new THREE51__namespace.TextureLoader();
+  const loader = new THREE56__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -4356,11 +4609,11 @@ function createSprite({ world, scene, payload }) {
         texture.dispose();
         return;
       }
-      const material = new THREE51__namespace.SpriteMaterial({
+      const material = new THREE56__namespace.SpriteMaterial({
         map: texture,
         transparent: true
       });
-      const sprite = new THREE51__namespace.Sprite(material);
+      const sprite = new THREE56__namespace.Sprite(material);
       sprite.userData.entityId = entityId;
       const textureImage = texture.image;
       spriteComponent.width = textureImage?.width ?? 1;
@@ -4378,9 +4631,9 @@ function createSprite({ world, scene, payload }) {
 }
 __name(createSprite, "createSprite");
 function createSphere({ world, scene, payload }) {
-  const geometry = new THREE51__namespace.SphereGeometry(0.5, 24, 24);
-  const material = new THREE51__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE51__namespace.Mesh(geometry, material);
+  const geometry = new THREE56__namespace.SphereGeometry(0.5, 24, 24);
+  const material = new THREE56__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE56__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Sphere",
     entityType: "sphere",
@@ -4400,10 +4653,10 @@ function createSphere({ world, scene, payload }) {
 __name(createSphere, "createSphere");
 function getOrCreateListener2(camera) {
   const existing = camera.userData.ecsAudioListener;
-  if (existing instanceof THREE51__namespace.AudioListener) {
+  if (existing instanceof THREE56__namespace.AudioListener) {
     return existing;
   }
-  const listener = new THREE51__namespace.AudioListener();
+  const listener = new THREE56__namespace.AudioListener();
   camera.add(listener);
   camera.userData.ecsAudioListener = listener;
   return listener;
@@ -4453,10 +4706,10 @@ function normalizeOptions(input) {
 }
 __name(normalizeOptions, "normalizeOptions");
 function createChromaMaterial(texture, options) {
-  return new THREE51__namespace.ShaderMaterial({
+  return new THREE56__namespace.ShaderMaterial({
     uniforms: {
       tex: { value: texture },
-      keyColor: { value: new THREE51__namespace.Color(options.backgroundColor) },
+      keyColor: { value: new THREE56__namespace.Color(options.backgroundColor) },
       similarity: { value: options.similarity },
       smoothness: { value: options.smoothness },
       spill: { value: options.spill }
@@ -4488,22 +4741,22 @@ function createChromaMaterial(texture, options) {
       }
     `,
     transparent: true,
-    side: THREE51__namespace.DoubleSide
+    side: THREE56__namespace.DoubleSide
   });
 }
 __name(createChromaMaterial, "createChromaMaterial");
 function createStandardMaterial(texture) {
-  return new THREE51__namespace.MeshBasicMaterial({
+  return new THREE56__namespace.MeshBasicMaterial({
     map: texture,
     transparent: true,
-    side: THREE51__namespace.DoubleSide
+    side: THREE56__namespace.DoubleSide
   });
 }
 __name(createStandardMaterial, "createStandardMaterial");
 function createVideoMesh(entityId, texture, options) {
-  const geometry = new THREE51__namespace.PlaneGeometry(1, 1);
+  const geometry = new THREE56__namespace.PlaneGeometry(1, 1);
   const material = options.isGreenScreen ? createChromaMaterial(texture, options) : createStandardMaterial(texture);
-  const mesh = new THREE51__namespace.Mesh(geometry, material);
+  const mesh = new THREE56__namespace.Mesh(geometry, material);
   mesh.userData.entityId = entityId;
   mesh.scale.set(options.width, options.height, 1);
   return { mesh, material };
@@ -4538,7 +4791,7 @@ function createVideo({
   payload,
   isEditor
 }) {
-  const anchor = new THREE51__namespace.Object3D();
+  const anchor = new THREE56__namespace.Object3D();
   const path = payload.path ?? "";
   const options = normalizeOptions(payload.options);
   const entityId = createBaseEntity(world, anchor, {
@@ -4553,8 +4806,8 @@ function createVideo({
     return entityId;
   }
   const video = createVideoElement(path, options);
-  const texture = new THREE51__namespace.VideoTexture(video);
-  texture.colorSpace = THREE51__namespace.SRGBColorSpace;
+  const texture = new THREE56__namespace.VideoTexture(video);
+  texture.colorSpace = THREE56__namespace.SRGBColorSpace;
   texture.needsUpdate = true;
   const { mesh, material } = createVideoMesh(entityId, texture, options);
   anchor.add(mesh);
@@ -4570,7 +4823,7 @@ function createVideo({
   });
   if (!isEditor && options.positional) {
     const listener = getOrCreateListener2(camera);
-    const audioNode = new THREE51__namespace.PositionalAudio(listener);
+    const audioNode = new THREE56__namespace.PositionalAudio(listener);
     audioNode.setVolume(options.volume);
     audioNode.setRefDistance(options.refDistance);
     audioNode.setDistanceModel(normalizeDistanceModel2(options.distanceModel));
@@ -4613,6 +4866,11 @@ function registerDefaultFactories(objectManagementSystem) {
   objectManagementSystem.register("xrRig", createXRRig);
   objectManagementSystem.register("xrInteractor", createXRInteractor);
   objectManagementSystem.register("teleportArea", createTeleportArea);
+  objectManagementSystem.register("uiPanel", createUIPanel);
+  objectManagementSystem.register("uiText", createUIText);
+  objectManagementSystem.register("uiButton", createUIButton);
+  objectManagementSystem.register("uiToggle", createUIToggle);
+  objectManagementSystem.register("uiSlider", createUISlider);
   registerDefaultComponentFactories(objectManagementSystem);
 }
 __name(registerDefaultFactories, "registerDefaultFactories");
@@ -4763,6 +5021,11 @@ function buildComponentValueMaps(snapshot) {
       "XRHandPoseComponent"
     ),
     xrAnchorValues: readByComponent(snapshot.components, "XRAnchorComponent"),
+    uiPanelValues: readByComponent(snapshot.components, "UIPanelComponent"),
+    uiTextValues: readByComponent(snapshot.components, "UITextComponent"),
+    uiButtonValues: readByComponent(snapshot.components, "UIButtonComponent"),
+    uiToggleValues: readByComponent(snapshot.components, "UIToggleComponent"),
+    uiSliderValues: readByComponent(snapshot.components, "UISliderComponent"),
     xrInteractorSideValues: readByComponent(
       snapshot.components,
       "XRInteractorSideComponent"
@@ -5084,6 +5347,49 @@ function restorePostCreateComponents(world, objectManagementSystem, targetEntity
       }
     }
   }
+  {
+    const restoreUi = /* @__PURE__ */ __name((map, Ctor, existing) => {
+      const source = asRecord3(map.get(sourceEntityId));
+      if (!source) return;
+      let component = existing;
+      if (!component) {
+        component = new Ctor();
+        world.addComponent(targetEntityId, component);
+      }
+      const target = component;
+      for (const [key, value] of Object.entries(source)) {
+        const current = target[key];
+        if ((typeof value === "string" || typeof value === "number" || typeof value === "boolean") && typeof current === typeof value) {
+          target[key] = value;
+        }
+      }
+    }, "restoreUi");
+    restoreUi(
+      values.uiPanelValues,
+      UIPanelComponent,
+      world.getComponent(targetEntityId, UIPanelComponent)
+    );
+    restoreUi(
+      values.uiTextValues,
+      UITextComponent,
+      world.getComponent(targetEntityId, UITextComponent)
+    );
+    restoreUi(
+      values.uiButtonValues,
+      UIButtonComponent,
+      world.getComponent(targetEntityId, UIButtonComponent)
+    );
+    restoreUi(
+      values.uiToggleValues,
+      UIToggleComponent,
+      world.getComponent(targetEntityId, UIToggleComponent)
+    );
+    restoreUi(
+      values.uiSliderValues,
+      UISliderComponent,
+      world.getComponent(targetEntityId, UISliderComponent)
+    );
+  }
   {
     const sourceInteractor = asRecord3(
       values.xrInteractorValues.get(sourceEntityId)
@@ -6841,7 +7147,7 @@ function transitionToClip(runtime, nextClipId, crossFadeDuration) {
 }
 __name(transitionToClip, "transitionToClip");
 function applyActionState(action, component, paused, shouldLoop) {
-  const loopMode = shouldLoop ? THREE51__namespace.LoopRepeat : THREE51__namespace.LoopOnce;
+  const loopMode = shouldLoop ? THREE56__namespace.LoopRepeat : THREE56__namespace.LoopOnce;
   const repetitions = shouldLoop ? Infinity : 1;
   action.setLoop(loopMode, repetitions);
   action.clampWhenFinished = !shouldLoop;
@@ -7014,7 +7320,7 @@ var _AnimationSystem = class _AnimationSystem {
         if (runtime) {
           stopAllActions(runtime);
         }
-        const mixer = new THREE51__namespace.AnimationMixer(root);
+        const mixer = new THREE56__namespace.AnimationMixer(root);
         const entries2 = readRuntimeClipEntries(animation);
         const indexedActions = createActions(mixer, entries2);
         runtime = {
@@ -7140,11 +7446,11 @@ function normalizeOrthoBounds(component) {
 }
 __name(normalizeOrthoBounds, "normalizeOrthoBounds");
 function isPerspectiveCamera(camera) {
-  return camera instanceof THREE51__namespace.PerspectiveCamera;
+  return camera instanceof THREE56__namespace.PerspectiveCamera;
 }
 __name(isPerspectiveCamera, "isPerspectiveCamera");
 function isOrthographicCamera(camera) {
-  return camera instanceof THREE51__namespace.OrthographicCamera;
+  return camera instanceof THREE56__namespace.OrthographicCamera;
 }
 __name(isOrthographicCamera, "isOrthographicCamera");
 function readWindowAspect() {
@@ -7198,7 +7504,7 @@ var _CameraSyncSystem = class _CameraSyncSystem {
         continue;
       }
       const camera = objectRef.object;
-      if (!(camera instanceof THREE51__namespace.Camera)) {
+      if (!(camera instanceof THREE56__namespace.Camera)) {
         continue;
       }
       if (xrCamera !== null && camera === xrCamera) {
@@ -7265,7 +7571,7 @@ var MIN_DENSITY = 0;
 function createGradientTexture(effect, colors) {
   if (typeof document === "undefined") {
     const pixel = new Uint8Array([30, 30, 30, 255]);
-    const fallback = new THREE51__namespace.DataTexture(pixel, 1, 1, THREE51__namespace.RGBAFormat);
+    const fallback = new THREE56__namespace.DataTexture(pixel, 1, 1, THREE56__namespace.RGBAFormat);
     fallback.needsUpdate = true;
     return fallback;
   }
@@ -7274,7 +7580,7 @@ function createGradientTexture(effect, colors) {
   canvas.height = 512;
   const context = canvas.getContext("2d");
   if (!context) {
-    const fallback = new THREE51__namespace.CanvasTexture(canvas);
+    const fallback = new THREE56__namespace.CanvasTexture(canvas);
     fallback.needsUpdate = true;
     return fallback;
   }
@@ -7302,15 +7608,15 @@ function createGradientTexture(effect, colors) {
     context.fillRect(0, 0, 512, 512);
     context.globalCompositeOperation = "source-over";
   }
-  const texture = new THREE51__namespace.CanvasTexture(canvas);
-  texture.colorSpace = THREE51__namespace.SRGBColorSpace;
+  const texture = new THREE56__namespace.CanvasTexture(canvas);
+  texture.colorSpace = THREE56__namespace.SRGBColorSpace;
   texture.needsUpdate = true;
   return texture;
 }
 __name(createGradientTexture, "createGradientTexture");
 var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
   constructor(scene) {
-    this.textureLoader = new THREE51__namespace.TextureLoader();
+    this.textureLoader = new THREE56__namespace.TextureLoader();
     this.signature = null;
     this.activeTexture = null;
     this.pendingImageUrl = null;
@@ -7335,7 +7641,7 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
     if (skybox.type === "color") {
       this.disposeActiveTexture();
       this.pendingImageUrl = null;
-      this.scene.background = new THREE51__namespace.Color(skybox.color || "#1e1e1e");
+      this.scene.background = new THREE56__namespace.Color(skybox.color || "#1e1e1e");
       return;
     }
     if (skybox.type === "gradient") {
@@ -7369,7 +7675,7 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
           texture.dispose();
           return;
         }
-        texture.colorSpace = THREE51__namespace.SRGBColorSpace;
+        texture.colorSpace = THREE56__namespace.SRGBColorSpace;
         this.activeTexture = texture;
         this.scene.background = texture;
       },
@@ -7388,16 +7694,16 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
       this.scene.fog = null;
       return;
     }
-    const fogColor = new THREE51__namespace.Color(fog.color || "#1e1e1e");
+    const fogColor = new THREE56__namespace.Color(fog.color || "#1e1e1e");
     if (fog.type === "linear") {
       const near = Number.isFinite(fog.linear.near) ? fog.linear.near : 1;
       const farCandidate = Number.isFinite(fog.linear.far) ? fog.linear.far : near + 10;
       const far = Math.max(near + MIN_FOG_DELTA, farCandidate);
-      this.scene.fog = new THREE51__namespace.Fog(fogColor, near, far);
+      this.scene.fog = new THREE56__namespace.Fog(fogColor, near, far);
       return;
     }
     const density = Number.isFinite(fog.exponential.density) ? Math.max(MIN_DENSITY, fog.exponential.density) : 2e-3;
-    this.scene.fog = new THREE51__namespace.FogExp2(fogColor, density);
+    this.scene.fog = new THREE56__namespace.FogExp2(fogColor, density);
   }
   update(world) {
     const passthrough = world.isXrPassthrough();
@@ -7491,10 +7797,10 @@ var _PostprocessingSyncSystem = class _PostprocessingSyncSystem {
       );
     }
     if (values.bloom.enabled) {
-      const size = this.renderer.getSize(new THREE51__namespace.Vector2());
+      const size = this.renderer.getSize(new THREE56__namespace.Vector2());
       composer.addPass(
         new UnrealBloomPass_js.UnrealBloomPass(
-          new THREE51__namespace.Vector2(size.width, size.height),
+          new THREE56__namespace.Vector2(size.width, size.height),
           values.bloom.intensity,
           values.bloom.radius,
           values.bloom.threshold
@@ -7539,7 +7845,7 @@ var _PostprocessingSyncSystem = class _PostprocessingSyncSystem {
     if (values.dotScreen.enabled) {
       composer.addPass(
         new DotScreenPass_js.DotScreenPass(
-          new THREE51__namespace.Vector2(0, 0),
+          new THREE56__namespace.Vector2(0, 0),
           values.dotScreen.angle ?? values.dotScreen.dotScreenAngle,
           values.dotScreen.scale ?? values.dotScreen.dotScreenScale
         )
@@ -7627,7 +7933,7 @@ function computeColliderState(colliderValues, object) {
   if (!object) {
     return colliderValues;
   }
-  const scale = new THREE51__namespace.Vector3();
+  const scale = new THREE56__namespace.Vector3();
   object.getWorldScale(scale);
   return {
     ...colliderValues,
@@ -7678,8 +7984,8 @@ function createColliderDesc(RAPIER, values, triMeshData) {
     values.offsetPosition.y,
     values.offsetPosition.z
   );
-  const offsetQuaternion = new THREE51__namespace.Quaternion().setFromEuler(
-    new THREE51__namespace.Euler(
+  const offsetQuaternion = new THREE56__namespace.Quaternion().setFromEuler(
+    new THREE56__namespace.Euler(
       values.offsetRotation.x,
       values.offsetRotation.y,
       values.offsetRotation.z
@@ -7694,17 +8000,17 @@ function collectTriMeshParts(object) {
     return null;
   }
   object.updateWorldMatrix(true, true);
-  const worldScale = new THREE51__namespace.Vector3();
+  const worldScale = new THREE56__namespace.Vector3();
   object.getWorldScale(worldScale);
   const scale = {
     x: Math.abs(worldScale.x) || 1,
     y: Math.abs(worldScale.y) || 1,
     z: Math.abs(worldScale.z) || 1
   };
-  const worldToObject = new THREE51__namespace.Matrix4().copy(object.matrixWorld).invert();
+  const worldToObject = new THREE56__namespace.Matrix4().copy(object.matrixWorld).invert();
   const parts = [];
   object.traverse((child) => {
-    if (!(child instanceof THREE51__namespace.Mesh) || !child.geometry) {
+    if (!(child instanceof THREE56__namespace.Mesh) || !child.geometry) {
       return;
     }
     const geometry = child.geometry;
@@ -7721,7 +8027,7 @@ function collectTriMeshParts(object) {
     if (indexCount < 3) {
       return;
     }
-    const relativeMatrix = new THREE51__namespace.Matrix4().multiplyMatrices(
+    const relativeMatrix = new THREE56__namespace.Matrix4().multiplyMatrices(
       worldToObject,
       child.matrixWorld
     );
@@ -7762,7 +8068,7 @@ function createTriMeshData(collected) {
   }
   const vertices = new Float32Array(vertexTotal * 3);
   const indices = new Uint32Array(indexTotal);
-  const point = new THREE51__namespace.Vector3();
+  const point = new THREE56__namespace.Vector3();
   let vertexOffset = 0;
   let indexOffset = 0;
   for (const part of parts) {
@@ -7794,8 +8100,8 @@ function createTriMeshData(collected) {
 }
 __name(createTriMeshData, "createTriMeshData");
 function syncBodyFromTransform(body, transform) {
-  const quaternion = new THREE51__namespace.Quaternion().setFromEuler(
-    new THREE51__namespace.Euler(transform.rotation.x, transform.rotation.y, transform.rotation.z)
+  const quaternion = new THREE56__namespace.Quaternion().setFromEuler(
+    new THREE56__namespace.Euler(transform.rotation.x, transform.rotation.y, transform.rotation.z)
   );
   body.setTranslation(
     {
@@ -7822,8 +8128,8 @@ function syncTransformFromBody(transform, body) {
   transform.position.x = position.x;
   transform.position.y = position.y;
   transform.position.z = position.z;
-  const euler = new THREE51__namespace.Euler().setFromQuaternion(
-    new THREE51__namespace.Quaternion(rotation.x, rotation.y, rotation.z, rotation.w)
+  const euler = new THREE56__namespace.Euler().setFromQuaternion(
+    new THREE56__namespace.Quaternion(rotation.x, rotation.y, rotation.z, rotation.w)
   );
   transform.rotation.x = euler.x;
   transform.rotation.y = euler.y;
@@ -7936,8 +8242,8 @@ var _PhysicsSyncSystem = class _PhysicsSyncSystem {
           transform.position.y,
           transform.position.z
         );
-        const quaternion = new THREE51__namespace.Quaternion().setFromEuler(
-          new THREE51__namespace.Euler(
+        const quaternion = new THREE56__namespace.Quaternion().setFromEuler(
+          new THREE56__namespace.Euler(
             transform.rotation.x,
             transform.rotation.y,
             transform.rotation.z
@@ -8535,7 +8841,7 @@ function applyLightValues(lightComponent) {
       values.castShadow
     );
   }
-  if (light instanceof THREE51__namespace.PointLight) {
+  if (light instanceof THREE56__namespace.PointLight) {
     if (typeof values.distance === "number" && Number.isFinite(values.distance)) {
       light.distance = Math.max(MIN_LIGHT_DISTANCE, values.distance);
     }
@@ -8543,7 +8849,7 @@ function applyLightValues(lightComponent) {
       light.decay = Math.max(0, values.decay);
     }
   }
-  if (light instanceof THREE51__namespace.SpotLight) {
+  if (light instanceof THREE56__namespace.SpotLight) {
     if (typeof values.distance === "number" && Number.isFinite(values.distance)) {
       light.distance = Math.max(MIN_LIGHT_DISTANCE, values.distance);
     }
@@ -8557,7 +8863,7 @@ function applyLightValues(lightComponent) {
       light.penumbra = Math.max(0, Math.min(1, values.penumbra));
     }
   }
-  if (light instanceof THREE51__namespace.RectAreaLight) {
+  if (light instanceof THREE56__namespace.RectAreaLight) {
     if (typeof values.width === "number" && Number.isFinite(values.width)) {
       light.width = Math.max(MIN_AREA_SIZE, values.width);
     }
@@ -8618,15 +8924,15 @@ function resolveMaterialPropertyKey(key) {
 __name(resolveMaterialPropertyKey, "resolveMaterialPropertyKey");
 function createMaterialByType(type) {
   if (type === "basic") {
-    return new THREE51__namespace.MeshBasicMaterial();
+    return new THREE56__namespace.MeshBasicMaterial();
   }
   if (type === "phong") {
-    return new THREE51__namespace.MeshPhongMaterial();
+    return new THREE56__namespace.MeshPhongMaterial();
   }
   if (type === "physical") {
-    return new THREE51__namespace.MeshPhysicalMaterial();
+    return new THREE56__namespace.MeshPhysicalMaterial();
   }
-  return new THREE51__namespace.MeshStandardMaterial();
+  return new THREE56__namespace.MeshStandardMaterial();
 }
 __name(createMaterialByType, "createMaterialByType");
 function replaceMaterialAcrossObject(object, previous, next) {
@@ -8685,12 +8991,12 @@ function applyTextureFiltering(material, filtering) {
   const target = material;
   for (const slot of materialTextureSlots) {
     const texture = target[slot];
-    if (!texture || !(texture instanceof THREE51__namespace.Texture)) {
+    if (!texture || !(texture instanceof THREE56__namespace.Texture)) {
       continue;
     }
     const useMipmaps = texture.generateMipmaps !== false;
-    texture.magFilter = sharp ? THREE51__namespace.NearestFilter : THREE51__namespace.LinearFilter;
-    texture.minFilter = useMipmaps ? sharp ? THREE51__namespace.NearestMipmapNearestFilter : THREE51__namespace.LinearMipmapLinearFilter : sharp ? THREE51__namespace.NearestFilter : THREE51__namespace.LinearFilter;
+    texture.magFilter = sharp ? THREE56__namespace.NearestFilter : THREE56__namespace.LinearFilter;
+    texture.minFilter = useMipmaps ? sharp ? THREE56__namespace.NearestMipmapNearestFilter : THREE56__namespace.LinearMipmapLinearFilter : sharp ? THREE56__namespace.NearestFilter : THREE56__namespace.LinearFilter;
     texture.needsUpdate = true;
   }
   material.needsUpdate = true;
@@ -8700,12 +9006,12 @@ function setTextureMipmaps(material, enabled) {
   const target = material;
   for (const slot of materialTextureSlots) {
     const texture = target[slot];
-    if (!texture || !(texture instanceof THREE51__namespace.Texture)) {
+    if (!texture || !(texture instanceof THREE56__namespace.Texture)) {
       continue;
     }
     texture.generateMipmaps = enabled;
-    const sharp = texture.magFilter === THREE51__namespace.NearestFilter;
-    texture.minFilter = enabled ? sharp ? THREE51__namespace.NearestMipmapNearestFilter : THREE51__namespace.LinearMipmapLinearFilter : sharp ? THREE51__namespace.NearestFilter : THREE51__namespace.LinearFilter;
+    const sharp = texture.magFilter === THREE56__namespace.NearestFilter;
+    texture.minFilter = enabled ? sharp ? THREE56__namespace.NearestMipmapNearestFilter : THREE56__namespace.LinearMipmapLinearFilter : sharp ? THREE56__namespace.NearestFilter : THREE56__namespace.LinearFilter;
     texture.needsUpdate = true;
   }
   material.needsUpdate = true;
@@ -8716,7 +9022,7 @@ function assignMaterialTexture(material, rawKey, url, textureCache) {
   const key = resolveMaterialPropertyKey(rawKey);
   let texture = textureCache.get(url);
   if (!texture) {
-    texture = new THREE51__namespace.TextureLoader().load(url);
+    texture = new THREE56__namespace.TextureLoader().load(url);
     textureCache.set(url, texture);
   }
   target[key] = texture;
@@ -8754,7 +9060,7 @@ function applyMaterialState(material, value, textureCache) {
   }
   target.side = value.side;
   target.blending = value.blending;
-  target.premultipliedAlpha = value.blending === THREE51__namespace.MultiplyBlending || value.blending === THREE51__namespace.SubtractiveBlending;
+  target.premultipliedAlpha = value.blending === THREE56__namespace.MultiplyBlending || value.blending === THREE56__namespace.SubtractiveBlending;
   target.depthTest = value.depthTest;
   target.depthWrite = value.depthWrite;
   target.wireframe = value.wireframe;
@@ -8915,12 +9221,12 @@ function resolvePrimaryMesh(object) {
   if (!object) {
     return null;
   }
-  if (object instanceof THREE51__namespace.Mesh) {
+  if (object instanceof THREE56__namespace.Mesh) {
     return object;
   }
   let found = null;
   object.traverse((child) => {
-    if (!found && child instanceof THREE51__namespace.Mesh) {
+    if (!found && child instanceof THREE56__namespace.Mesh) {
       found = child;
     }
   });
@@ -8941,22 +9247,22 @@ function applyGeometry(component) {
   switch (component.kind) {
     case "cube": {
       const params = sanitized;
-      nextGeometry = new THREE51__namespace.BoxGeometry(params.width, params.height, params.depth);
+      nextGeometry = new THREE56__namespace.BoxGeometry(params.width, params.height, params.depth);
       break;
     }
     case "plane": {
       const params = sanitized;
-      nextGeometry = new THREE51__namespace.PlaneGeometry(params.width, params.height);
+      nextGeometry = new THREE56__namespace.PlaneGeometry(params.width, params.height);
       break;
     }
     case "sphere": {
       const params = sanitized;
-      nextGeometry = new THREE51__namespace.SphereGeometry(params.radius, 24, 24);
+      nextGeometry = new THREE56__namespace.SphereGeometry(params.radius, 24, 24);
       break;
     }
     case "cylinder": {
       const params = sanitized;
-      nextGeometry = new THREE51__namespace.CylinderGeometry(
+      nextGeometry = new THREE56__namespace.CylinderGeometry(
         params.radius,
         params.radius,
         params.height,
@@ -8966,7 +9272,7 @@ function applyGeometry(component) {
     }
     case "capsule": {
       const params = sanitized;
-      nextGeometry = new THREE51__namespace.CapsuleGeometry(params.radius, params.height, 4, 8);
+      nextGeometry = new THREE56__namespace.CapsuleGeometry(params.radius, params.height, 4, 8);
       break;
     }
     default:
@@ -8982,7 +9288,7 @@ function applyShadowFlags(component) {
     return;
   }
   component.object.traverse((child) => {
-    if (child instanceof THREE51__namespace.Mesh) {
+    if (child instanceof THREE56__namespace.Mesh) {
       child.castShadow = component.castShadow;
       child.receiveShadow = component.receiveShadow;
     }
@@ -9065,35 +9371,35 @@ function buildGeometry(component) {
   switch (component.meshKind) {
     case "cube": {
       const params = p;
-      return new THREE51__namespace.BoxGeometry(params.width, params.height, params.depth);
+      return new THREE56__namespace.BoxGeometry(params.width, params.height, params.depth);
     }
     case "plane": {
       const params = p;
-      return new THREE51__namespace.PlaneGeometry(params.width, params.height);
+      return new THREE56__namespace.PlaneGeometry(params.width, params.height);
     }
     case "sphere": {
       const params = p;
-      return new THREE51__namespace.SphereGeometry(params.radius, 24, 24);
+      return new THREE56__namespace.SphereGeometry(params.radius, 24, 24);
     }
     case "cylinder": {
       const params = p;
-      return new THREE51__namespace.CylinderGeometry(params.radius, params.radius, params.height, 20);
+      return new THREE56__namespace.CylinderGeometry(params.radius, params.radius, params.height, 20);
     }
     case "capsule": {
       const params = p;
-      return new THREE51__namespace.CapsuleGeometry(params.radius, params.height, 4, 8);
+      return new THREE56__namespace.CapsuleGeometry(params.radius, params.height, 4, 8);
     }
     default:
-      return new THREE51__namespace.BoxGeometry(1, 1, 1);
+      return new THREE56__namespace.BoxGeometry(1, 1, 1);
   }
 }
 __name(buildGeometry, "buildGeometry");
-var _position = new THREE51__namespace.Vector3();
-var _quaternion = new THREE51__namespace.Quaternion();
-var _euler = new THREE51__namespace.Euler();
-var _scale = new THREE51__namespace.Vector3();
-var _matrix = new THREE51__namespace.Matrix4();
-var _modelMatrix = new THREE51__namespace.Matrix4();
+var _position = new THREE56__namespace.Vector3();
+var _quaternion = new THREE56__namespace.Quaternion();
+var _euler = new THREE56__namespace.Euler();
+var _scale = new THREE56__namespace.Vector3();
+var _matrix = new THREE56__namespace.Matrix4();
+var _modelMatrix = new THREE56__namespace.Matrix4();
 function instanceTransformFromComponent(transform, out) {
   _position.set(transform.position.x, transform.position.y, transform.position.z);
   _euler.set(transform.rotation.x, transform.rotation.y, transform.rotation.z, "XYZ");
@@ -9246,7 +9552,7 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
                 const sourceMaterial = Array.isArray(meshChild.material) ? meshChild.material.map((m) => m.clone()) : meshChild.material.clone();
                 meshChild.updateWorldMatrix(true, false);
                 const localMatrix = meshChild.matrixWorld.clone();
-                const instancedMesh2 = new THREE51__namespace.InstancedMesh(
+                const instancedMesh2 = new THREE56__namespace.InstancedMesh(
                   geometry2,
                   Array.isArray(sourceMaterial) ? sourceMaterial : sourceMaterial,
                   count2
@@ -9271,7 +9577,7 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
                 this.loadingSignatures.delete(targetEntityId);
                 return;
               }
-              const group = new THREE51__namespace.Group();
+              const group = new THREE56__namespace.Group();
               for (const entry of entries) {
                 group.add(entry.instancedMesh);
               }
@@ -9289,8 +9595,8 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
         }
         const count = instanceCount;
         const geometry = buildGeometry(comp);
-        const material = new THREE51__namespace.MeshStandardMaterial({ color: "#ffffff" });
-        const instancedMesh = new THREE51__namespace.InstancedMesh(geometry, material, count);
+        const material = new THREE56__namespace.MeshStandardMaterial({ color: "#ffffff" });
+        const instancedMesh = new THREE56__namespace.InstancedMesh(geometry, material, count);
         instancedMesh.castShadow = comp.castShadow;
         instancedMesh.receiveShadow = comp.receiveShadow;
         for (let i = 0; i < count; i++) {
@@ -9473,7 +9779,7 @@ var _Behaviour = class _Behaviour {
     if (!this.threeRef) {
       return null;
     }
-    const position = new THREE51__namespace.Vector3();
+    const position = new THREE56__namespace.Vector3();
     this.threeRef.object.getWorldPosition(position);
     return position;
   }
@@ -9485,7 +9791,7 @@ var _Behaviour = class _Behaviour {
     if (!this.threeRef) {
       return null;
     }
-    const target = new THREE51__namespace.Vector3();
+    const target = new THREE56__namespace.Vector3();
     this.threeRef.object.getWorldDirection(target);
     return target;
   }
@@ -9547,7 +9853,7 @@ var _Behaviour = class _Behaviour {
     if (!this.threeRef) {
       return;
     }
-    const rotation = new THREE51__namespace.Quaternion();
+    const rotation = new THREE56__namespace.Quaternion();
     this.threeRef.object.getWorldQuaternion(rotation);
     rotation.slerp(targetRotation, alpha);
     this.transform.setRotation(rotation);
@@ -9564,7 +9870,7 @@ var _Behaviour = class _Behaviour {
       return;
     }
     const clone3 = this.threeRef.object.clone();
-    const rotation = new THREE51__namespace.Quaternion();
+    const rotation = new THREE56__namespace.Quaternion();
     clone3.lookAt(targetPosition);
     clone3.getWorldQuaternion(rotation);
     this.transform.setRotation(rotation);
@@ -9729,6 +10035,23 @@ var _Behaviour = class _Behaviour {
   /** Called when this entity is released. Optional XR hook. */
   onRelease(input) {
   }
+  /** A UI button on this entity (or a descendant) was clicked. Clicks fire on
+   * RELEASE while still pointing at the widget — sliding off cancels. */
+  onUiPress(_event) {
+  }
+  /** A pointer began hovering a UI widget on this entity (or a descendant). */
+  onUiHoverStart(_event) {
+  }
+  /** The pointer left the widget. */
+  onUiHoverEnd(_event) {
+  }
+  /** A UI toggle flipped; `event.value` is the new boolean. */
+  onUiToggle(_event) {
+  }
+  /** A UI slider moved; `event.value` is the new number. Fires on real value
+   * changes during the drag and once more on release. */
+  onUiChange(_event) {
+  }
 };
 __name(_Behaviour, "Behaviour");
 /**
@@ -9930,8 +10253,8 @@ var _ScriptBehaviourSystem = class _ScriptBehaviourSystem {
     }, "onPointerUp");
     this.moduleLoader = moduleLoader ?? defaultModuleLoader;
     this.selectionCtx = selectionContext ?? null;
-    this.raycaster = new THREE51__namespace.Raycaster();
-    this.ndcPointer = new THREE51__namespace.Vector2();
+    this.raycaster = new THREE56__namespace.Raycaster();
+    this.ndcPointer = new THREE56__namespace.Vector2();
     if (this.selectionCtx) {
       this.selectionCtx.domElement.addEventListener("pointerdown", this.onPointerDown);
       this.selectionCtx.domElement.addEventListener("pointerup", this.onPointerUp);
@@ -10310,7 +10633,7 @@ function disposeBuiltObject(root) {
     for (const mat of materials) {
       if (mat.userData?.[SHARED_MODEL_RESOURCE_FLAG]) continue;
       for (const value of Object.values(mat)) {
-        if (value instanceof THREE51__namespace.Texture) value.dispose();
+        if (value instanceof THREE56__namespace.Texture) value.dispose();
       }
       mat.dispose?.();
     }
@@ -10674,7 +10997,7 @@ var _AudioSystem = class _AudioSystem {
     if (!prev || prev.volume !== opts.volume) {
       sound.setVolume(opts.volume);
     }
-    if (opts.positional && sound instanceof THREE51__namespace.PositionalAudio) {
+    if (opts.positional && sound instanceof THREE56__namespace.PositionalAudio) {
       if (!prev || prev.refDistance !== opts.refDistance) {
         sound.setRefDistance(opts.refDistance);
       }
@@ -10800,7 +11123,7 @@ var _VideoSystem = class _VideoSystem {
       component.object.scale.set(opts.width, opts.height, 1);
     }
     const material = component.material;
-    if (material instanceof THREE51__namespace.ShaderMaterial) {
+    if (material instanceof THREE56__namespace.ShaderMaterial) {
       if (!prev || prev.backgroundColor !== opts.backgroundColor) {
         material.uniforms.keyColor.value.set(opts.backgroundColor);
       }
@@ -10814,7 +11137,7 @@ var _VideoSystem = class _VideoSystem {
         material.uniforms.spill.value = opts.spill;
       }
     }
-    if (opts.positional && component.audioNode instanceof THREE51__namespace.PositionalAudio) {
+    if (opts.positional && component.audioNode instanceof THREE56__namespace.PositionalAudio) {
       const posAudio = component.audioNode;
       if (!prev || prev.refDistance !== opts.refDistance) {
         posAudio.setRefDistance(opts.refDistance);
@@ -10854,8 +11177,8 @@ function blankState(source) {
     handedness: handednessOf(source),
     kind: kindOf(source),
     connected: true,
-    rayOrigin: new THREE51__namespace.Vector3(),
-    rayDirection: new THREE51__namespace.Vector3(0, 0, -1),
+    rayOrigin: new THREE56__namespace.Vector3(),
+    rayDirection: new THREE56__namespace.Vector3(0, 0, -1),
     gripPosition: null,
     gripQuaternion: null,
     select: false,
@@ -10881,7 +11204,7 @@ function readHandJoints(frame, hand, referenceSpace, rigMatrix, existing) {
   }
   if (spaces.length === 0) return null;
   const target = existing ?? {};
-  const matrix = new THREE51__namespace.Matrix4();
+  const matrix = new THREE56__namespace.Matrix4();
   const buffer = spaces.length * 16 <= JOINT_MATRIX_BUFFER.length ? JOINT_MATRIX_BUFFER : new Float32Array(spaces.length * 16);
   const fillPoses = frame.fillPoses;
   if (typeof fillPoses === "function") {
@@ -10894,7 +11217,7 @@ function readHandJoints(frame, hand, referenceSpace, rigMatrix, existing) {
     if (filled) {
       for (let i = 0; i < names.length; i += 1) {
         matrix.fromArray(buffer, i * 16).premultiply(rigMatrix);
-        const vector = target[names[i]] ?? new THREE51__namespace.Vector3();
+        const vector = target[names[i]] ?? new THREE56__namespace.Vector3();
         vector.setFromMatrixPosition(matrix);
         target[names[i]] = vector;
       }
@@ -10912,7 +11235,7 @@ function readHandJoints(frame, hand, referenceSpace, rigMatrix, existing) {
       continue;
     }
     matrix.fromArray(pose.transform.matrix).premultiply(rigMatrix);
-    const vector = target[names[i]] ?? new THREE51__namespace.Vector3();
+    const vector = target[names[i]] ?? new THREE56__namespace.Vector3();
     vector.setFromMatrixPosition(matrix);
     target[names[i]] = vector;
     anyTracked = true;
@@ -10924,7 +11247,7 @@ var _XRInputSystem = class _XRInputSystem {
   constructor() {
     this.records = /* @__PURE__ */ new Map();
     /** Reference-space → world matrix, rebuilt each frame from the XR rig. */
-    this.referenceToWorld = new THREE51__namespace.Matrix4();
+    this.referenceToWorld = new THREE56__namespace.Matrix4();
     this.session = null;
     this.onSelectStart = /* @__PURE__ */ __name((event) => this.mark(event, "pendingSelectStart"), "onSelectStart");
     this.onSelectEnd = /* @__PURE__ */ __name((event) => this.mark(event, "pendingSelectEnd"), "onSelectEnd");
@@ -11022,19 +11345,19 @@ var _XRInputSystem = class _XRInputSystem {
       if (frame && referenceSpace && source.targetRaySpace) {
         const pose = frame.getPose(source.targetRaySpace, referenceSpace);
         if (pose) {
-          const m = new THREE51__namespace.Matrix4().fromArray(pose.transform.matrix).premultiply(rigMatrix);
+          const m = new THREE56__namespace.Matrix4().fromArray(pose.transform.matrix).premultiply(rigMatrix);
           state.rayOrigin.setFromMatrixPosition(m);
           state.rayDirection.set(0, 0, -1).applyQuaternion(
-            new THREE51__namespace.Quaternion().setFromRotationMatrix(m)
+            new THREE56__namespace.Quaternion().setFromRotationMatrix(m)
           ).normalize();
         }
       }
       if (frame && referenceSpace && source.gripSpace) {
         const gripPose = frame.getPose(source.gripSpace, referenceSpace);
         if (gripPose) {
-          const m = new THREE51__namespace.Matrix4().fromArray(gripPose.transform.matrix).premultiply(rigMatrix);
-          state.gripPosition ?? (state.gripPosition = new THREE51__namespace.Vector3());
-          state.gripQuaternion ?? (state.gripQuaternion = new THREE51__namespace.Quaternion());
+          const m = new THREE56__namespace.Matrix4().fromArray(gripPose.transform.matrix).premultiply(rigMatrix);
+          state.gripPosition ?? (state.gripPosition = new THREE56__namespace.Vector3());
+          state.gripQuaternion ?? (state.gripQuaternion = new THREE56__namespace.Quaternion());
           state.gripPosition.setFromMatrixPosition(m);
           state.gripQuaternion.setFromRotationMatrix(m);
         }
@@ -11162,15 +11485,15 @@ var _ThrowVelocityTracker = class _ThrowVelocityTracker {
     const fresh = this.samples.filter(
       (sample) => now - sample.time <= MAX_SAMPLE_AGE_SECONDS
     );
-    if (fresh.length < 2) return new THREE51__namespace.Vector3();
-    let best = new THREE51__namespace.Vector3();
+    if (fresh.length < 2) return new THREE56__namespace.Vector3();
+    let best = new THREE56__namespace.Vector3();
     let bestSpeed = 0;
     for (let i = 1; i < fresh.length; i += 1) {
       const previous = fresh[i - 1];
       const current = fresh[i];
       const dt = current.time - previous.time;
       if (dt <= 1e-5) continue;
-      const velocity = new THREE51__namespace.Vector3().subVectors(current.position, previous.position).divideScalar(dt);
+      const velocity = new THREE56__namespace.Vector3().subVectors(current.position, previous.position).divideScalar(dt);
       const speed = velocity.length();
       if (speed > MAX_PLAUSIBLE_SPEED) continue;
       if (speed > bestSpeed) {
@@ -11187,15 +11510,15 @@ var _ThrowVelocityTracker = class _ThrowVelocityTracker {
 __name(_ThrowVelocityTracker, "ThrowVelocityTracker");
 var ThrowVelocityTracker = _ThrowVelocityTracker;
 function angularVelocityFrom(previous, current, deltaTime) {
-  if (deltaTime <= 1e-5) return new THREE51__namespace.Vector3();
+  if (deltaTime <= 1e-5) return new THREE56__namespace.Vector3();
   const delta = current.clone().multiply(previous.clone().invert());
   if (delta.w < 0) {
     delta.set(-delta.x, -delta.y, -delta.z, -delta.w);
   }
-  const angle = 2 * Math.acos(THREE51__namespace.MathUtils.clamp(delta.w, -1, 1));
+  const angle = 2 * Math.acos(THREE56__namespace.MathUtils.clamp(delta.w, -1, 1));
   const sinHalf = Math.sqrt(Math.max(0, 1 - delta.w * delta.w));
-  if (sinHalf < 1e-6 || angle < 1e-6) return new THREE51__namespace.Vector3();
-  return new THREE51__namespace.Vector3(delta.x, delta.y, delta.z).divideScalar(sinHalf).multiplyScalar(angle / deltaTime);
+  if (sinHalf < 1e-6 || angle < 1e-6) return new THREE56__namespace.Vector3();
+  return new THREE56__namespace.Vector3(delta.x, delta.y, delta.z).divideScalar(sinHalf).multiplyScalar(angle / deltaTime);
 }
 __name(angularVelocityFrom, "angularVelocityFrom");
 var MIN_HAND_SEPARATION = 0.06;
@@ -11203,7 +11526,7 @@ var MIN_ANCHOR_SEPARATION = 1e-3;
 var SCALE_DEADZONE = 0.05;
 function solveTwoHandTransform(primary, secondary, basis, options) {
   const separation = primary.position.distanceTo(secondary.position);
-  const anchorDelta = new THREE51__namespace.Vector3().subVectors(
+  const anchorDelta = new THREE56__namespace.Vector3().subVectors(
     basis.secondaryLocal,
     basis.primaryLocal
   );
@@ -11227,8 +11550,8 @@ function solveTwoHandTransform(primary, secondary, basis, options) {
   } else {
     const axisLocal = anchorDelta.clone().normalize();
     const currentAxis = axisLocal.clone().applyQuaternion(base).normalize();
-    const desiredAxis = new THREE51__namespace.Vector3().subVectors(secondary.position, primary.position).normalize();
-    const correction = new THREE51__namespace.Quaternion().setFromUnitVectors(
+    const desiredAxis = new THREE56__namespace.Vector3().subVectors(secondary.position, primary.position).normalize();
+    const correction = new THREE56__namespace.Quaternion().setFromUnitVectors(
       currentAxis,
       desiredAxis
     );
@@ -11243,11 +11566,11 @@ __name(solveTwoHandTransform, "solveTwoHandTransform");
 // core/systems/XRInteractionSystem.ts
 var RAYLESS_HOLD_DISTANCE = 0.5;
 function quatFromEulerVec(r) {
-  return new THREE51__namespace.Quaternion().setFromEuler(new THREE51__namespace.Euler(r.x, r.y, r.z));
+  return new THREE56__namespace.Quaternion().setFromEuler(new THREE56__namespace.Euler(r.x, r.y, r.z));
 }
 __name(quatFromEulerVec, "quatFromEulerVec");
 function writeEuler(target, q) {
-  const euler = new THREE51__namespace.Euler().setFromQuaternion(q);
+  const euler = new THREE56__namespace.Euler().setFromQuaternion(q);
   target.x = euler.x;
   target.y = euler.y;
   target.z = euler.z;
@@ -11255,10 +11578,11 @@ function writeEuler(target, q) {
 __name(writeEuler, "writeEuler");
 var _XRInteractionSystem = class _XRInteractionSystem {
   constructor(inputSystem) {
-    this.raycaster = new THREE51__namespace.Raycaster();
+    this.raycaster = new THREE56__namespace.Raycaster();
     this.grabs = /* @__PURE__ */ new Map();
     this.hoveredEntityId = null;
     /** Per-hand hover, with the hit distance so the ray can stop at the surface. */
+    this.busyContributors = [];
     this.hovers = /* @__PURE__ */ new Map();
     /** Monotonic seconds, accumulated from deltaTime for velocity sampling. */
     this.elapsed = 0;
@@ -11267,6 +11591,8 @@ var _XRInteractionSystem = class _XRInteractionSystem {
   update(world, deltaTime) {
     if (!world.isXrPresenting()) {
       this.releaseAll(world);
+      this.hovers.clear();
+      this.hoveredEntityId = null;
       return;
     }
     this.elapsed += Math.max(0, deltaTime);
@@ -11363,7 +11689,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     const hand = this.handPosition(input);
     const handQuaternion = this.handQuaternion(input);
     const objectQuaternion = quatFromEulerVec(transform.rotation);
-    record.offset = new THREE51__namespace.Vector3(
+    record.offset = new THREE56__namespace.Vector3(
       transform.position.x - hand.x,
       transform.position.y - hand.y,
       transform.position.z - hand.z
@@ -11395,7 +11721,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     primary.record.twoHand = {
       primaryLocal,
       secondaryLocal,
-      initialScale: new THREE51__namespace.Vector3(
+      initialScale: new THREE56__namespace.Vector3(
         transform.scale.x,
         transform.scale.y,
         transform.scale.z
@@ -11411,7 +11737,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
   /** World point → the object's UNSCALED local space. */
   objectLocalPoint(transform, worldPoint) {
     const local = worldPoint.clone().sub(
-      new THREE51__namespace.Vector3(
+      new THREE56__namespace.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
@@ -11469,7 +11795,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       );
       if (!interactable2) continue;
       if (interactable2.grabReach === "distance") continue;
-      const position = new THREE51__namespace.Vector3();
+      const position = new THREE56__namespace.Vector3();
       entry.object.getWorldPosition(position);
       const distance = position.distanceTo(hand);
       if (distance <= interactable2.grabRadius && distance < nearestDistance) {
@@ -11541,13 +11867,13 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       this.holdersOf(entityId).map((holder) => holder.record.attachPointId).filter((id) => id !== null)
     );
     const hand = this.handPosition(input);
-    const objectPosition = new THREE51__namespace.Vector3(
+    const objectPosition = new THREE56__namespace.Vector3(
       transform.position.x,
       transform.position.y,
       transform.position.z
     );
     const objectQuaternion = quatFromEulerVec(transform.rotation);
-    const scale = new THREE51__namespace.Vector3(
+    const scale = new THREE56__namespace.Vector3(
       transform.scale.x,
       transform.scale.y,
       transform.scale.z
@@ -11558,7 +11884,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       if (taken.has(point.id)) continue;
       if (point.hand !== "any" && point.hand !== input.handedness) continue;
       if (point.role !== "any" && point.role !== role) continue;
-      const world3 = new THREE51__namespace.Vector3(
+      const world3 = new THREE56__namespace.Vector3(
         point.position.x,
         point.position.y,
         point.position.z
@@ -11581,21 +11907,21 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     let offset;
     let remoteDistance = 0;
     if (remote) {
-      const position = new THREE51__namespace.Vector3(
+      const position = new THREE56__namespace.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
       );
       remoteDistance = position.distanceTo(input.rayOrigin);
-      offset = new THREE51__namespace.Vector3();
+      offset = new THREE56__namespace.Vector3();
     } else if (viaDistance) {
-      offset = new THREE51__namespace.Vector3(
+      offset = new THREE56__namespace.Vector3(
         interactable.grabOffsetPosition.x,
         interactable.grabOffsetPosition.y,
         interactable.grabOffsetPosition.z
       );
     } else {
-      offset = new THREE51__namespace.Vector3(
+      offset = new THREE56__namespace.Vector3(
         transform.position.x - hand.x,
         transform.position.y - hand.y,
         transform.position.z - hand.z
@@ -11622,7 +11948,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       entityId,
       role,
       attachPointId: attachPoint?.id ?? null,
-      attachLocal: attachPoint ? new THREE51__namespace.Vector3(
+      attachLocal: attachPoint ? new THREE56__namespace.Vector3(
         attachPoint.position.x,
         attachPoint.position.y,
         attachPoint.position.z
@@ -11631,8 +11957,8 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       handRotationOffset,
       twoHand: null,
       offset,
-      rotationOffset: new THREE51__namespace.Quaternion().setFromEuler(
-        new THREE51__namespace.Euler(
+      rotationOffset: new THREE56__namespace.Quaternion().setFromEuler(
+        new THREE56__namespace.Euler(
           interactable.grabOffsetRotation.x,
           interactable.grabOffsetRotation.y,
           interactable.grabOffsetRotation.z
@@ -11643,7 +11969,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       restoreBodyType,
       tracker,
       lastHandQuaternion: handQuaternion.clone(),
-      angularVelocity: new THREE51__namespace.Vector3()
+      angularVelocity: new THREE56__namespace.Vector3()
     });
     if (role === "primary") {
       this.dispatch(world, entityId, (b) => b.onGrab(input));
@@ -11716,14 +12042,14 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     const handQuaternion = this.handQuaternion(input);
     const objectQuaternion = held.attachQuaternion ? handQuaternion.clone().multiply(held.rotationOffset).multiply(held.attachQuaternion.clone().invert()) : handQuaternion.clone().multiply(held.handRotationOffset);
     if (held.remote) {
-      const target = new THREE51__namespace.Vector3().copy(input.rayDirection).multiplyScalar(held.remoteDistance).add(input.rayOrigin);
+      const target = new THREE56__namespace.Vector3().copy(input.rayDirection).multiplyScalar(held.remoteDistance).add(input.rayOrigin);
       transform.position.x = target.x;
       transform.position.y = target.y;
       transform.position.z = target.z;
       writeEuler(transform.rotation, objectQuaternion);
     } else if (held.attachLocal) {
       const anchor = held.attachLocal.clone().multiply(
-        new THREE51__namespace.Vector3(
+        new THREE56__namespace.Vector3(
           transform.scale.x,
           transform.scale.y,
           transform.scale.z
@@ -11741,7 +12067,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       writeEuler(transform.rotation, objectQuaternion);
     }
     held.tracker.record(
-      held.remote ? new THREE51__namespace.Vector3(
+      held.remote ? new THREE56__namespace.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
@@ -11815,7 +12141,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
    */
   handPosition(input) {
     if (input.gripPosition) return input.gripPosition;
-    return new THREE51__namespace.Vector3().copy(input.rayDirection).multiplyScalar(RAYLESS_HOLD_DISTANCE).add(input.rayOrigin);
+    return new THREE56__namespace.Vector3().copy(input.rayDirection).multiplyScalar(RAYLESS_HOLD_DISTANCE).add(input.rayOrigin);
   }
   /**
    * Hand orientation. Grip-less sources (gaze / transient-pointer) have none,
@@ -11823,8 +12149,8 @@ var _XRInteractionSystem = class _XRInteractionSystem {
    */
   handQuaternion(input) {
     if (input.gripQuaternion) return input.gripQuaternion.clone();
-    return new THREE51__namespace.Quaternion().setFromUnitVectors(
-      new THREE51__namespace.Vector3(0, 0, -1),
+    return new THREE56__namespace.Quaternion().setFromUnitVectors(
+      new THREE56__namespace.Vector3(0, 0, -1),
       input.rayDirection.clone().normalize()
     );
   }
@@ -11889,13 +12215,30 @@ var _XRInteractionSystem = class _XRInteractionSystem {
    */
   isSourceBusy(world, input) {
     if (this.grabs.has(input)) return true;
+    for (const contributor of this.busyContributors) {
+      try {
+        if (contributor(world, input)) return true;
+      } catch {
+      }
+    }
     const hover = this.hovers.get(input);
     if (!hover) return false;
     const interactable = world.getComponent(
       hover.entityId,
       XRInteractableComponent
     );
-    return Boolean(interactable?.enabled && interactable.grabbable);
+    return Boolean(
+      interactable?.enabled && (interactable.grabbable || interactable.pointable)
+    );
+  }
+  /** OR-ed into isSourceBusy; see the comment there. */
+  registerBusyContributor(contributor) {
+    this.busyContributors.push(contributor);
+  }
+  /** Hover for a specific input source (handedness-free — Vision Pro's
+   * transient pointers all report handedness "none"). */
+  getHoverForInput(input) {
+    return this.hovers.get(input) ?? null;
   }
   /** True when THIS hand is holding something. */
   isGrabbingWith(handedness) {
@@ -11944,7 +12287,7 @@ function sampleTeleportArc(origin, direction, out = [], options) {
   for (let i = 0; i < steps; i += 1) {
     const t = i / (steps - 1) * maxTime;
     out.push(
-      new THREE51__namespace.Vector3(
+      new THREE56__namespace.Vector3(
         origin.x + velocity.x * t,
         origin.y + velocity.y * t - 0.5 * gravity * t * t,
         origin.z + velocity.z * t
@@ -11961,7 +12304,7 @@ function arcGroundCrossing(points, groundY) {
     if (previous.y >= groundY && current.y <= groundY) {
       const span = previous.y - current.y;
       const alpha = span > 1e-6 ? (previous.y - groundY) / span : 0;
-      return new THREE51__namespace.Vector3().lerpVectors(previous, current, alpha);
+      return new THREE56__namespace.Vector3().lerpVectors(previous, current, alpha);
     }
   }
   return null;
@@ -12005,11 +12348,11 @@ __name(_TeleportAimGate, "TeleportAimGate");
 var TeleportAimGate = _TeleportAimGate;
 
 // core/systems/XRLocomotionSystem.ts
-var UP = new THREE51__namespace.Vector3(0, 1, 0);
+var UP = new THREE56__namespace.Vector3(0, 1, 0);
 var AXIS_DEADZONE = 0.5;
 var _XRLocomotionSystem = class _XRLocomotionSystem {
   constructor(inputSystem) {
-    this.raycaster = new THREE51__namespace.Raycaster();
+    this.raycaster = new THREE56__namespace.Raycaster();
     /** Per-source latch so one stick push yields exactly one snap turn. */
     this.turnLatched = /* @__PURE__ */ new WeakSet();
     /** Reused arc buffer — aiming runs every frame. */
@@ -12059,6 +12402,7 @@ var _XRLocomotionSystem = class _XRLocomotionSystem {
     const rig = world.getComponent(rigEntityId, XRRigComponent);
     const rigTransform = world.getComponent(rigEntityId, TransformComponent);
     if (!rig || !rigTransform) return;
+    if (world.isXrPassthrough()) return;
     const inputs = this.inputSystem.getInputs();
     if (inputs.length === 0) return;
     if (rig.snapTurn) {
@@ -12134,7 +12478,7 @@ var _XRLocomotionSystem = class _XRLocomotionSystem {
       }
       if (this.turnLatched.has(source)) continue;
       this.turnLatched.add(source);
-      transform.rotation.y -= Math.sign(x) * THREE51__namespace.MathUtils.degToRad(rig.snapTurnDegrees);
+      transform.rotation.y -= Math.sign(x) * THREE56__namespace.MathUtils.degToRad(rig.snapTurnDegrees);
     }
   }
   applySmoothMove(world, rig, transform, inputs, deltaTime) {
@@ -12144,12 +12488,12 @@ var _XRLocomotionSystem = class _XRLocomotionSystem {
       const y = input.axes[1] ?? 0;
       if (Math.abs(x) < 0.15 && Math.abs(y) < 0.15) continue;
       const camera = world.getCamera();
-      const forward = new THREE51__namespace.Vector3();
+      const forward = new THREE56__namespace.Vector3();
       camera.getWorldDirection(forward);
       forward.y = 0;
       if (forward.lengthSq() < 1e-6) continue;
       forward.normalize();
-      const right = new THREE51__namespace.Vector3().crossVectors(forward, UP).normalize();
+      const right = new THREE56__namespace.Vector3().crossVectors(forward, UP).normalize();
       const step = rig.moveSpeed * Math.max(0, deltaTime);
       transform.position.x += (forward.x * -y + right.x * x) * step;
       transform.position.z += (forward.z * -y + right.z * x) * step;
@@ -12230,7 +12574,7 @@ var _XRLocomotionSystem = class _XRLocomotionSystem {
     for (let i = 1; i < points.length; i += 1) {
       const from = points[i - 1];
       const to = points[i];
-      const delta = new THREE51__namespace.Vector3().subVectors(to, from);
+      const delta = new THREE56__namespace.Vector3().subVectors(to, from);
       const distance = delta.length();
       if (distance < 1e-6) continue;
       this.raycaster.set(from, delta.divideScalar(distance));
@@ -12321,6 +12665,32 @@ var _XRSessionSystem = class _XRSessionSystem {
     }
     if (presenting) {
       this.dispatchInputEdges(world);
+      this.muteDepthOcclusionColor(world);
+    }
+  }
+  /**
+   * Stop three's depth-occlusion pass from writing COLOR.
+   *
+   * With depth sensing granted, three draws a full-screen, head-locked mesh
+   * every frame whose fragment shader assigns ONLY `gl_FragDepth` — that is
+   * the whole occlusion mechanism — but its material never sets
+   * `colorWrite: false`, so the colour output is UNDEFINED per GLSL. Desktop
+   * drivers happen to zero it, which is why this ships unnoticed; Quest's
+   * mobile GPU frequently leaves the last-computed temporary in the register —
+   * the sampled DEPTH value — so the pass paints the depth camera's view over
+   * the screen as faint head-locked contour bands. On device that reads as "a
+   * large wireframe dome that follows my head".
+   *
+   * The mesh is created lazily inside three's render, so this is re-checked
+   * every frame rather than hooked once; the write is idempotent and the
+   * check is two property reads. Depth-only is the mesh's entire purpose —
+   * occlusion is unaffected.
+   */
+  muteDepthOcclusionColor(world) {
+    const xr = world.getRenderer().xr;
+    const material = xr.getDepthSensingMesh?.()?.material;
+    if (material && material.colorWrite !== false) {
+      material.colorWrite = false;
     }
   }
   handleSessionStart(world) {
@@ -12473,23 +12843,27 @@ function planeColliderFromPolygon(polygon) {
 }
 __name(planeColliderFromPolygon, "planeColliderFromPolygon");
 function writeXrMeshGeometry(vertices, indices, existing) {
-  const geometry = existing ?? new THREE51__namespace.BufferGeometry();
-  geometry.setAttribute("position", new THREE51__namespace.BufferAttribute(vertices, 3));
-  geometry.setIndex(new THREE51__namespace.BufferAttribute(indices, 1));
+  const geometry = existing ?? new THREE56__namespace.BufferGeometry();
+  geometry.setAttribute(
+    "position",
+    new THREE56__namespace.BufferAttribute(vertices.slice(), 3)
+  );
+  geometry.setIndex(new THREE56__namespace.BufferAttribute(indices.slice(), 1));
+  geometry.deleteAttribute("normal");
   geometry.computeBoundingSphere();
   geometry.computeVertexNormals();
   return geometry;
 }
 __name(writeXrMeshGeometry, "writeXrMeshGeometry");
 function decomposeXrPose(matrixElements, target) {
-  const matrix = new THREE51__namespace.Matrix4().fromArray(
+  const matrix = new THREE56__namespace.Matrix4().fromArray(
     matrixElements
   );
-  const position = new THREE51__namespace.Vector3();
-  const quaternion = new THREE51__namespace.Quaternion();
-  const scale = new THREE51__namespace.Vector3();
+  const position = new THREE56__namespace.Vector3();
+  const quaternion = new THREE56__namespace.Quaternion();
+  const scale = new THREE56__namespace.Vector3();
   matrix.decompose(position, quaternion, scale);
-  const euler = new THREE51__namespace.Euler().setFromQuaternion(quaternion, "XYZ");
+  const euler = new THREE56__namespace.Euler().setFromQuaternion(quaternion, "XYZ");
   target.position.x = position.x;
   target.position.y = position.y;
   target.position.z = position.z;
@@ -12499,20 +12873,151 @@ function decomposeXrPose(matrixElements, target) {
 }
 __name(decomposeXrPose, "decomposeXrPose");
 
+// core/xr/poseStability.ts
+var GLUED_REF_SPEED = 0.12;
+var STILL_SPEED = 0.05;
+var GLUED_FRAMES_TO_FREEZE = 3;
+var STATIC_FRAMES_TO_RECOVER = 10;
+var SNAP_SPEED = 3;
+var dist = /* @__PURE__ */ __name((a, b) => Math.hypot(a.x - b.x, a.y - b.y, a.z - b.z), "dist");
+var _SurfacePoseGate = class _SurfacePoseGate {
+  constructor() {
+    this.prevRef = null;
+    this.prevView = null;
+    this.gluedStreak = 0;
+    this.staticStreak = 0;
+    this.suspect = false;
+    this.deltas = 0;
+  }
+  /** True while poses are being rejected as head-glued. */
+  get frozen() {
+    return this.suspect;
+  }
+  /**
+   * True once enough motion has been observed to classify the pose at all.
+   * Surface CREATION waits for this: an entity spawned from a glued pose
+   * materializes wherever the head happens to be — a rotated ghost copy of
+   * the room — and freezing it there is barely better than letting it follow.
+   */
+  get warmedUp() {
+    return this.deltas >= GLUED_FRAMES_TO_FREEZE;
+  }
+  /**
+   * Feed this frame's surface position in reference space and in view
+   * (viewer-relative) space. Returns true when the pose should be APPLIED,
+   * false when it should be frozen out.
+   *
+   * `viewPos` may be null when the viewer pose is unavailable (older
+   * runtimes) — the gate then passes everything through, degrading to the
+   * flag-only behavior.
+   */
+  update(refPos, viewPos, deltaTime) {
+    if (!viewPos || deltaTime <= 0) {
+      this.prevRef = { ...refPos };
+      this.prevView = viewPos ? { ...viewPos } : null;
+      return !this.suspect;
+    }
+    const prevRef = this.prevRef;
+    const prevView = this.prevView;
+    this.prevRef = { ...refPos };
+    this.prevView = { ...viewPos };
+    if (!prevRef || !prevView) return !this.suspect;
+    this.deltas += 1;
+    const refSpeed = dist(refPos, prevRef) / deltaTime;
+    const viewSpeed = dist(viewPos, prevView) / deltaTime;
+    const glued = refSpeed > GLUED_REF_SPEED && viewSpeed < STILL_SPEED;
+    const worldStatic = refSpeed < STILL_SPEED && viewSpeed > GLUED_REF_SPEED;
+    if (this.suspect) {
+      if (refSpeed > SNAP_SPEED && viewSpeed > SNAP_SPEED) {
+        this.suspect = false;
+        this.gluedStreak = 0;
+        this.staticStreak = 0;
+        return true;
+      }
+      this.staticStreak = worldStatic ? this.staticStreak + 1 : 0;
+      if (this.staticStreak >= STATIC_FRAMES_TO_RECOVER) {
+        this.suspect = false;
+        this.gluedStreak = 0;
+        this.staticStreak = 0;
+        return true;
+      }
+      return false;
+    }
+    this.gluedStreak = glued ? this.gluedStreak + 1 : 0;
+    if (this.gluedStreak >= GLUED_FRAMES_TO_FREEZE) {
+      this.suspect = true;
+      this.staticStreak = 0;
+      return false;
+    }
+    return true;
+  }
+};
+__name(_SurfacePoseGate, "SurfacePoseGate");
+var SurfacePoseGate = _SurfacePoseGate;
+
 // core/systems/XREnvironmentSystem.ts
 var DEBUG_COLOR = 5088255;
+function debugColorFor(kind, semanticLabel) {
+  switch (semanticLabel) {
+    case "floor":
+      return 5100666;
+    // green — the surface everything should rest on
+    case "ceiling":
+      return 11693055;
+    // purple
+    case "wall":
+    case "wall face":
+      return DEBUG_COLOR;
+    // blue, the family's base colour
+    case "global mesh":
+      return 9079442;
+    // dim gray — raw scan, not an object
+    default:
+      return semanticLabel ? 16747594 : DEBUG_COLOR;
+  }
+}
+__name(debugColorFor, "debugColorFor");
+var GLOBAL_MESH_DEBUG_OPACITY = 0.35;
+var DEBUG_RENDER_ORDER = 900;
 var ROOM_CAPTURE_DELAY_SECONDS = 3;
+var SYNTHETIC_FLOOR_EXTENT = 50;
+var SYNTHETIC_FLOOR_PLANE = {
+  planeSpace: {},
+  polygon: [
+    { x: -SYNTHETIC_FLOOR_EXTENT / 2, y: 0, z: -SYNTHETIC_FLOOR_EXTENT / 2 },
+    { x: SYNTHETIC_FLOOR_EXTENT / 2, y: 0, z: -SYNTHETIC_FLOOR_EXTENT / 2 },
+    { x: SYNTHETIC_FLOOR_EXTENT / 2, y: 0, z: SYNTHETIC_FLOOR_EXTENT / 2 },
+    { x: -SYNTHETIC_FLOOR_EXTENT / 2, y: 0, z: SYNTHETIC_FLOOR_EXTENT / 2 }
+  ],
+  orientation: "horizontal",
+  semanticLabel: "floor",
+  lastChangedTime: 0
+};
 var _XREnvironmentSystem = class _XREnvironmentSystem {
   constructor() {
     /** Keyed by the XRPlane/XRMesh object itself — the runtime's own identity. */
     this.planes = /* @__PURE__ */ new Map();
     this.meshes = /* @__PURE__ */ new Map();
+    /**
+     * Surfaces observed but not yet SPAWNED — their gate is still proving the
+     * pose is world-anchored. Creating from an unflagged head-glued pose (seen
+     * on-device after a suspend/resume regenerated the scan identities) plants
+     * a rotated ghost copy of the room wherever the head happens to be, which
+     * the apply-gate then freezes there — wrong forever. So admission itself
+     * is gated: a few frames of world-anchored behavior first.
+     */
+    this.pendingPlanes = /* @__PURE__ */ new Map();
+    this.pendingMeshes = /* @__PURE__ */ new Map();
     this.presenting = false;
     this.debugVisible = false;
     /** Seconds presenting, used to decide the room has genuinely nothing in it. */
     this.elapsed = 0;
     /** `initiateRoomCapture` may be called only ONCE per session. */
     this.roomCaptureRequested = false;
+    /** This frame's inverse viewer matrix, or null when unavailable. */
+    this.viewerInverse = null;
+    this.tmpViewerMatrix = new THREE56__namespace.Matrix4();
+    this.tmpViewPos = new THREE56__namespace.Vector3();
   }
   update(world, deltaTime = 0) {
     const presenting = world.isXrPresenting();
@@ -12542,16 +13047,23 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
     const frame = xr.getFrame?.();
     const referenceSpace = xr.getReferenceSpace();
     if (!frame || !referenceSpace) return;
+    if (frame.detectedPlanes === void 0 && frame.detectedMeshes === void 0) {
+      this.ensureSyntheticFloor(world);
+      return;
+    }
+    this.removeSyntheticFloor(world);
     const meshesAvailable = Boolean(frame.detectedMeshes);
     const useMesh = (mode === "mesh" || mode === "auto") && meshesAvailable;
     const usePlanes = mode === "planes" || mode === "auto" && !useMesh;
+    const viewer = frame.getViewerPose?.(referenceSpace);
+    this.viewerInverse = viewer ? this.tmpViewerMatrix.fromArray(viewer.transform.matrix).invert() : null;
     if (usePlanes) {
-      this.syncPlanes(world, frame, referenceSpace);
+      this.syncPlanes(world, frame, referenceSpace, deltaTime);
     } else if (this.planes.size > 0) {
       this.clearMap(world, this.planes);
     }
     if (useMesh) {
-      this.syncMeshes(world, frame, referenceSpace);
+      this.syncMeshes(world, frame, referenceSpace, deltaTime);
     } else if (this.meshes.size > 0) {
       this.clearMap(world, this.meshes);
     }
@@ -12588,12 +13100,57 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
   getDetectedCount() {
     return { planes: this.planes.size, meshes: this.meshes.size };
   }
+  /**
+   * A census of every surface currently spawned: what it is, where it sits and
+   * roughly how big it is. Built for the template's post-session readout, so a
+   * mystery shape on the headset can be looked up by its label instead of
+   * guessed at — a small-radius entry at head height IS the mystery shape, and
+   * a clean list means whatever was seen did not come from this system.
+   */
+  getDebugSnapshot(world) {
+    const snapshot = [];
+    for (const [plane, entry] of this.planes) {
+      const transform = world.getComponent(entry.entityId, TransformComponent);
+      const collider = planeColliderFromPolygon(plane.polygon);
+      snapshot.push({
+        kind: "plane",
+        label: plane.semanticLabel ?? null,
+        position: transform ? { ...transform.position } : { x: 0, y: 0, z: 0 },
+        radius: collider ? Math.hypot(collider.size.x, collider.size.z) / 2 : 0,
+        emulated: entry.emulated
+      });
+    }
+    for (const [mesh, entry] of this.meshes) {
+      const transform = world.getComponent(entry.entityId, TransformComponent);
+      snapshot.push({
+        kind: "mesh",
+        label: mesh.semanticLabel ?? null,
+        position: transform ? { ...transform.position } : { x: 0, y: 0, z: 0 },
+        radius: entry.geometry?.boundingSphere?.radius ?? 0,
+        emulated: entry.emulated
+      });
+    }
+    return snapshot;
+  }
+  /** Create the no-scan floor once; it lives in the ordinary plane map. */
+  ensureSyntheticFloor(world) {
+    if (this.planes.has(SYNTHETIC_FLOOR_PLANE)) return;
+    const created = this.createPlaneEntity(world, SYNTHETIC_FLOOR_PLANE);
+    if (created) this.planes.set(SYNTHETIC_FLOOR_PLANE, created);
+  }
+  /** Real scene data exists (or arrived) — the stand-in must go. */
+  removeSyntheticFloor(world) {
+    const entry = this.planes.get(SYNTHETIC_FLOOR_PLANE);
+    if (!entry) return;
+    this.destroyEntry(world, entry);
+    this.planes.delete(SYNTHETIC_FLOOR_PLANE);
+  }
   findRig(world) {
     const ids = world.query(XRRigComponent);
     if (ids.length === 0) return null;
     return world.getComponent(ids[0], XRRigComponent) ?? null;
   }
-  syncPlanes(world, frame, referenceSpace) {
+  syncPlanes(world, frame, referenceSpace, deltaTime) {
     const detected = frame.detectedPlanes;
     if (!detected) return;
     for (const [plane, entry] of this.planes) {
@@ -12602,14 +13159,22 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
         this.planes.delete(plane);
       }
     }
+    for (const plane of this.pendingPlanes.keys()) {
+      if (!detected.has(plane)) this.pendingPlanes.delete(plane);
+    }
     for (const plane of detected) {
       const pose = frame.getPose(plane.planeSpace, referenceSpace);
       if (!pose) continue;
+      const emulated = pose.emulatedPosition === true;
       let entry = this.planes.get(plane);
       const changed = plane.lastChangedTime ?? 0;
       if (!entry) {
+        if (emulated) continue;
+        const gate = this.admit(this.pendingPlanes, plane, pose, deltaTime);
+        if (!gate) continue;
         const created = this.createPlaneEntity(world, plane);
         if (!created) continue;
+        created.gate = gate;
         entry = created;
         this.planes.set(plane, entry);
       } else if (changed !== entry.lastChangedTime) {
@@ -12620,14 +13185,21 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
           if (collider) {
             entry.geometry?.dispose();
             entry.geometry = null;
-            this.attachPlaneDebug(world, entry, collider);
+            this.attachPlaneDebug(
+              world,
+              entry,
+              collider,
+              plane.semanticLabel ?? null
+            );
           }
         }
       }
-      this.applyPose(world, entry.entityId, pose);
+      const allowed = !emulated && this.gateAllows(entry.gate, pose, deltaTime);
+      entry.emulated = emulated || entry.gate.frozen;
+      if (allowed) this.applyPose(world, entry.entityId, pose);
     }
   }
-  syncMeshes(world, frame, referenceSpace) {
+  syncMeshes(world, frame, referenceSpace, deltaTime) {
     const detected = frame.detectedMeshes;
     if (!detected) return;
     for (const [mesh, entry] of this.meshes) {
@@ -12636,23 +13208,68 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
         this.meshes.delete(mesh);
       }
     }
+    for (const mesh of this.pendingMeshes.keys()) {
+      if (!detected.has(mesh)) this.pendingMeshes.delete(mesh);
+    }
     for (const mesh of detected) {
       const pose = frame.getPose(mesh.meshSpace, referenceSpace);
       if (!pose) continue;
+      const emulated = pose.emulatedPosition === true;
       let entry = this.meshes.get(mesh);
       const changed = mesh.lastChangedTime ?? 0;
       if (!entry) {
+        if (emulated) continue;
+        const gate = this.admit(this.pendingMeshes, mesh, pose, deltaTime);
+        if (!gate) continue;
         const created = this.createMeshEntity(world, mesh);
         if (!created) continue;
+        created.gate = gate;
         entry = created;
         this.meshes.set(mesh, entry);
       } else if (changed !== entry.lastChangedTime) {
         entry.lastChangedTime = changed;
         writeXrMeshGeometry(mesh.vertices, mesh.indices, entry.geometry);
       }
-      this.applyPose(world, entry.entityId, pose);
+      const allowed = !emulated && this.gateAllows(entry.gate, pose, deltaTime);
+      entry.emulated = emulated || entry.gate.frozen;
+      if (allowed) this.applyPose(world, entry.entityId, pose);
     }
   }
+  /**
+   * Admission control for a NOT-yet-spawned surface. With a viewer pose
+   * available, the surface must behave world-anchored for a few frames before
+   * an entity is created for it; without one (older runtimes, tests) it is
+   * admitted immediately — the gate can't classify anyway. Returns the
+   * warmed-up gate (carried into the entry so its motion history survives),
+   * or null while the surface must keep waiting.
+   */
+  admit(pending, key, pose, deltaTime) {
+    if (!this.viewerInverse) return new SurfacePoseGate();
+    let gate = pending.get(key);
+    if (!gate) {
+      gate = new SurfacePoseGate();
+      pending.set(key, gate);
+    }
+    const allowed = this.gateAllows(gate, pose, deltaTime);
+    if (!allowed || !gate.warmedUp) return null;
+    pending.delete(key);
+    return gate;
+  }
+  /**
+   * Run a surface's pose through its head-glue gate: position in reference
+   * space vs position relative to the viewer. Without a viewer pose the gate
+   * passes everything, degrading to the flag-only behavior.
+   */
+  gateAllows(gate, pose, deltaTime) {
+    const m = pose.transform.matrix;
+    const refPos = { x: m[12], y: m[13], z: m[14] };
+    let viewPos = null;
+    if (this.viewerInverse) {
+      const v = this.tmpViewPos.set(refPos.x, refPos.y, refPos.z).applyMatrix4(this.viewerInverse);
+      viewPos = { x: v.x, y: v.y, z: v.z };
+    }
+    return gate.update(refPos, viewPos, deltaTime);
+  }
   createPlaneEntity(world, plane) {
     const collider = planeColliderFromPolygon(plane.polygon);
     if (!collider) return null;
@@ -12670,9 +13287,13 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
       entityId,
       lastChangedTime: plane.lastChangedTime ?? 0,
       geometry: null,
-      material: null
+      material: null,
+      emulated: false,
+      gate: new SurfacePoseGate()
     };
-    if (this.debugVisible) this.attachPlaneDebug(world, entry, collider);
+    if (this.debugVisible) {
+      this.attachPlaneDebug(world, entry, collider, plane.semanticLabel ?? null);
+    }
     return entry;
   }
   applyPlaneCollider(world, entityId, plane) {
@@ -12697,15 +13318,36 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
   createMeshEntity(world, mesh) {
     if (!mesh.vertices?.length || !mesh.indices?.length) return null;
     const geometry = writeXrMeshGeometry(mesh.vertices, mesh.indices);
-    const material = new THREE51__namespace.MeshBasicMaterial({
-      color: DEBUG_COLOR,
-      wireframe: true
+    const label = mesh.semanticLabel ?? null;
+    const isGlobalMesh = label === "global mesh";
+    const material = new THREE56__namespace.MeshBasicMaterial({
+      color: debugColorFor("mesh", label),
+      wireframe: true,
+      // The global scan is a coarse triangle soup of the whole room; at full
+      // strength it reads as phantom objects rather than as context.
+      transparent: isGlobalMesh,
+      opacity: isGlobalMesh ? GLOBAL_MESH_DEBUG_OPACITY : 1,
+      // Depth-TESTED, deliberately. The overlay was X-ray for one release —
+      // introduced on the theory that depth occlusion was carving it into a
+      // head-locked dome — but that theory was falsified (the dome was the
+      // depth mesh's unset colour output, plus emulated poses; both fixed).
+      // X-ray had its own on-device failure: the global scan is DENSE, and a
+      // dense wireframe at 0.35 opacity fuses into a translucent sheet — with
+      // no depth test the walls' sheets drew through everything, stacked in
+      // front of the user's eyes ("planes covering my face"). With the depth
+      // buffer now holding CORRECT real-world depth, normal testing gives the
+      // right picture: the near wall hides the far one. depthWrite stays off
+      // so the overlay never occludes actual content.
+      depthTest: true,
+      depthWrite: false
     });
-    const root = new THREE51__namespace.Group();
-    const child = new THREE51__namespace.Mesh(geometry, material);
+    const root = new THREE56__namespace.Group();
+    const child = new THREE56__namespace.Mesh(geometry, material);
     child.visible = this.debugVisible;
+    child.renderOrder = DEBUG_RENDER_ORDER;
     root.add(child);
     const entityId = world.createEntity();
+    root.userData.entityId = entityId;
     world.addComponents(entityId, [
       new TransformComponent(),
       new Object3DRef(root),
@@ -12719,29 +13361,38 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
       entityId,
       lastChangedTime: mesh.lastChangedTime ?? 0,
       geometry,
-      material
+      material,
+      emulated: false,
+      gate: new SurfacePoseGate()
     };
   }
   /** A thin box so a detected plane can be SEEN, not just collided with. */
-  attachPlaneDebug(world, entry, collider) {
-    const geometry = new THREE51__namespace.BoxGeometry(
+  attachPlaneDebug(world, entry, collider, semanticLabel) {
+    const box = new THREE56__namespace.BoxGeometry(
       collider.size.x,
       collider.size.y,
       collider.size.z
     );
-    const material = new THREE51__namespace.MeshBasicMaterial({
-      color: DEBUG_COLOR,
-      wireframe: true
+    const geometry = new THREE56__namespace.EdgesGeometry(box);
+    box.dispose();
+    const material = new THREE56__namespace.LineBasicMaterial({
+      color: debugColorFor("plane", semanticLabel),
+      // Same depth policy as the mesh overlay — see createMeshEntity.
+      depthTest: true,
+      depthWrite: false
     });
-    const root = new THREE51__namespace.Group();
-    const child = new THREE51__namespace.Mesh(geometry, material);
+    const root = new THREE56__namespace.Group();
+    const child = new THREE56__namespace.LineSegments(geometry, material);
+    child.renderOrder = DEBUG_RENDER_ORDER;
     child.position.set(collider.offset.x, collider.offset.y, collider.offset.z);
     child.visible = this.debugVisible;
     root.add(child);
     entry.geometry = geometry;
     entry.material = material;
+    root.userData.entityId = entry.entityId;
     const existing = world.getComponent(entry.entityId, Object3DRef);
     if (existing) {
+      existing.object.removeFromParent();
       existing.object = root;
     } else {
       world.addComponent(entry.entityId, new Object3DRef(root));
@@ -12757,19 +13408,31 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
       for (const [plane, entry] of this.planes) {
         if (entry.geometry) continue;
         const collider = planeColliderFromPolygon(plane.polygon);
-        if (collider) this.attachPlaneDebug(world, entry, collider);
+        if (collider) {
+          this.attachPlaneDebug(
+            world,
+            entry,
+            collider,
+            plane.semanticLabel ?? null
+          );
+        }
       }
     }
     for (const map of [this.planes, this.meshes]) {
       for (const entry of map.values()) {
         const ref = world.getComponent(entry.entityId, Object3DRef);
         ref?.object.traverse((child) => {
-          if (child.isMesh) child.visible = this.debugVisible;
+          const drawable = child;
+          if (drawable.isMesh || drawable.isLine) {
+            child.visible = this.debugVisible;
+          }
         });
       }
     }
   }
   destroyEntry(world, entry) {
+    const ref = world.getComponent(entry.entityId, Object3DRef);
+    ref?.object.removeFromParent();
     entry.geometry?.dispose();
     entry.material?.dispose();
     world.destroyEntity(entry.entityId);
@@ -12781,6 +13444,8 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
   clearAll(world) {
     this.clearMap(world, this.planes);
     this.clearMap(world, this.meshes);
+    this.pendingPlanes.clear();
+    this.pendingMeshes.clear();
   }
   dispose(world) {
     this.clearAll(world);
@@ -12792,6 +13457,918 @@ function normalizeOrientation(value) {
   return value === "horizontal" || value === "vertical" ? value : null;
 }
 __name(normalizeOrientation, "normalizeOrientation");
+var MOUSE_CLICK_TRAVEL_PX = 6;
+var PRESS_TINT_MIN_SECONDS = 0.1;
+var PRESS_TINT = 0.72;
+var HOVER_TINT = 0.9;
+var _UIInteractionSystem = class _UIInteractionSystem {
+  /**
+   * @param interaction The XR interaction system, or null in a world with no
+   *   XR (flat 3D experiences) — the mouse path still works via
+   *   `options.inputSystem`.
+   */
+  constructor(interaction, options) {
+    this.xrPresses = /* @__PURE__ */ new Map();
+    this.mousePress = null;
+    this.mouseHover = null;
+    /** entityId → seconds of pressed-tint left to display. */
+    this.tintFloors = /* @__PURE__ */ new Map();
+    this.tinted = /* @__PURE__ */ new Set();
+    this.raycaster = new THREE56__namespace.Raycaster();
+    this.interaction = interaction;
+    this.inputSystem = options?.inputSystem ?? null;
+    interaction?.registerBusyContributor(
+      (_world, input) => this.xrPresses.has(input)
+    );
+  }
+  update(world, deltaTime = 0) {
+    if (world.isEditorMode()) return;
+    if (world.isXrPresenting()) {
+      this.updateXr(world);
+    } else {
+      this.updateMouse(world);
+    }
+    this.updateTints(world, deltaTime);
+  }
+  // ── XR path ────────────────────────────────────────────────────────────────
+  updateXr(world) {
+    const interaction = this.interaction;
+    if (!interaction) return;
+    const xrInput = interaction.inputSystem;
+    const inputs = xrInput.getInputs();
+    for (const input of inputs) {
+      const hover = interaction.getHoverForInput(input);
+      const hovered = hover ? this.widgetKind(world, hover.entityId) : null;
+      if (input.selectStart && hover && hovered) {
+        this.xrPresses.set(input, {
+          entityId: hover.entityId,
+          kind: hovered,
+          travelPx: 0
+        });
+        this.beginPressTint(world, hover.entityId);
+      }
+      const press = this.xrPresses.get(input);
+      if (press && press.kind === "slider") {
+        this.dragSlider(world, press.entityId, input);
+      }
+      if (input.selectEnd || !input.connected) {
+        if (press) {
+          this.xrPresses.delete(input);
+          const stillOn = hover?.entityId === press.entityId || // Vision Pro: the transient source is gone from the hover map on
+          // its release frame — confirm against the last latched ray.
+          this.rayHitsWidget(world, press.entityId, input);
+          if (stillOn || press.kind === "slider") {
+            this.fire(world, press, input);
+          }
+          this.endPressTint(press.entityId);
+        }
+      }
+    }
+    for (const [input] of this.xrPresses) {
+      if (!inputs.includes(input)) this.xrPresses.delete(input);
+    }
+  }
+  // ── Mouse path (flat preview) ──────────────────────────────────────────────
+  updateMouse(world) {
+    const input = this.inputSystem;
+    if (!input) return;
+    const hit = this.raycastMouse(world);
+    const hovered = hit && this.widgetKind(world, hit) ? hit : null;
+    if (hovered !== this.mouseHover) {
+      if (this.mouseHover !== null) {
+        this.setTint(world, this.mouseHover, 1);
+        this.dispatchBubbling(
+          world,
+          this.mouseHover,
+          (b, e) => b.onUiHoverEnd(e)
+        );
+      }
+      if (hovered !== null) {
+        this.setTint(world, hovered, HOVER_TINT);
+        this.dispatchBubbling(world, hovered, (b, e) => b.onUiHoverStart(e));
+      }
+      this.mouseHover = hovered;
+    }
+    if (input.getMouseDown("left") && hovered) {
+      const kind = this.widgetKind(world, hovered);
+      if (kind) {
+        this.mousePress = { entityId: hovered, kind, travelPx: 0 };
+        this.beginPressTint(world, hovered);
+      }
+    }
+    if (this.mousePress) {
+      const delta = input.getMouseDelta();
+      this.mousePress.travelPx += Math.hypot(delta.x, delta.y);
+      if (this.mousePress.kind === "slider") {
+        this.dragSliderMouse(world, this.mousePress.entityId);
+      }
+    }
+    if (input.getMouseUp("left") && this.mousePress) {
+      const press = this.mousePress;
+      this.mousePress = null;
+      const stillOn = hovered === press.entityId;
+      const withinTravel = press.travelPx <= MOUSE_CLICK_TRAVEL_PX;
+      if (press.kind === "slider" || stillOn && withinTravel) {
+        this.fire(world, press, null);
+      }
+      this.endPressTint(press.entityId);
+    }
+  }
+  raycastMouse(world) {
+    const input = this.inputSystem;
+    if (!input) return null;
+    const dom = world.getRenderer().domElement;
+    const rect = dom.getBoundingClientRect();
+    let ndcX = 0;
+    let ndcY = 0;
+    if (input.isMousePointerLocked()) {
+      ndcX = 0;
+      ndcY = 0;
+    } else {
+      const pos = input.getMousePosition();
+      ndcX = (pos.x - rect.left) / Math.max(1, rect.width) * 2 - 1;
+      ndcY = -((pos.y - rect.top) / Math.max(1, rect.height) * 2 - 1);
+      if (ndcX < -1 || ndcX > 1 || ndcY < -1 || ndcY > 1) return null;
+    }
+    this.raycaster.setFromCamera(new THREE56__namespace.Vector2(ndcX, ndcY), world.getCamera());
+    const hits = world.raycast(
+      this.raycaster.ray.origin,
+      this.raycaster.ray.direction
+    );
+    for (const hit of hits) {
+      if (typeof hit.entityId !== "number") continue;
+      if (this.widgetKind(world, hit.entityId)) return hit.entityId;
+      return null;
+    }
+    return null;
+  }
+  // ── Shared machinery ───────────────────────────────────────────────────────
+  widgetKind(world, entityId) {
+    if (world.getComponent(entityId, UIButtonComponent)) return "button";
+    if (world.getComponent(entityId, UIToggleComponent)) return "toggle";
+    if (world.getComponent(entityId, UISliderComponent)) return "slider";
+    return null;
+  }
+  fire(world, press, input) {
+    if (press.kind === "button") {
+      this.dispatchBubbling(world, press.entityId, (b, e) => b.onUiPress(e), input);
+      return;
+    }
+    if (press.kind === "toggle") {
+      const toggle = world.getComponent(press.entityId, UIToggleComponent);
+      if (!toggle) return;
+      toggle.value = !toggle.value;
+      this.dispatchBubbling(
+        world,
+        press.entityId,
+        (b, e) => b.onUiToggle(e),
+        input,
+        toggle.value
+      );
+      return;
+    }
+    const slider = world.getComponent(press.entityId, UISliderComponent);
+    if (!slider) return;
+    this.dispatchBubbling(
+      world,
+      press.entityId,
+      (b, e) => b.onUiChange(e),
+      input,
+      slider.value
+    );
+  }
+  dragSlider(world, entityId, input) {
+    const point = this.rayPointOnWidget(world, entityId, input);
+    if (point) this.applySliderPoint(world, entityId, point, input);
+  }
+  dragSliderMouse(world, entityId) {
+    const object = this.widgetObject(world, entityId);
+    if (!object) return;
+    const hits = this.raycaster.intersectObject(object, true);
+    if (hits.length > 0) this.applySliderPoint(world, entityId, hits[0].point, null);
+  }
+  applySliderPoint(world, entityId, worldPoint, input) {
+    const slider = world.getComponent(entityId, UISliderComponent);
+    const object = this.widgetObject(world, entityId);
+    if (!slider || !object) return;
+    const local = object.worldToLocal(worldPoint.clone());
+    const inset = slider.height / 2;
+    const usable = Math.max(1e-3, slider.width - inset * 2);
+    const t = Math.min(1, Math.max(0, local.x / usable + 0.5));
+    const next = slider.min + t * (slider.max - slider.min);
+    if (Math.abs(next - slider.value) < 1e-4) return;
+    slider.value = next;
+    this.dispatchBubbling(
+      world,
+      entityId,
+      (b, e) => b.onUiChange(e),
+      input,
+      next
+    );
+  }
+  widgetObject(world, entityId) {
+    return world.getComponent(entityId, Object3DRef)?.object;
+  }
+  rayHitsWidget(world, entityId, input) {
+    const object = this.widgetObject(world, entityId);
+    if (!object) return false;
+    this.raycaster.set(
+      input.rayOrigin.clone(),
+      input.rayDirection.clone().normalize()
+    );
+    return this.raycaster.intersectObject(object, true).length > 0;
+  }
+  rayPointOnWidget(world, entityId, input) {
+    const object = this.widgetObject(world, entityId);
+    if (!object) return null;
+    this.raycaster.set(
+      input.rayOrigin.clone(),
+      input.rayDirection.clone().normalize()
+    );
+    const hits = this.raycaster.intersectObject(object, true);
+    return hits.length > 0 ? hits[0].point : null;
+  }
+  /**
+   * Dispatch to the widget's Behaviours, then BUBBLE up the parent chain so a
+   * panel script hears its children. Bubbling (not a world broadcast) keeps
+   * two spawned copies of the same menu prefab independent.
+   */
+  dispatchBubbling(world, entityId, visit, input = null, value) {
+    const event = {
+      targetEntityId: entityId,
+      actionId: this.actionIdOf(world, entityId),
+      input,
+      ...value === void 0 ? {} : { value }
+    };
+    const visited = /* @__PURE__ */ new Set();
+    let current = entityId;
+    for (; ; ) {
+      if (visited.has(current)) break;
+      visited.add(current);
+      const script = world.getComponent(current, ScriptComponent);
+      const instances = script?.scriptInstances;
+      if (instances) {
+        for (const instance of instances.values()) {
+          if (!(instance instanceof Behaviour)) continue;
+          try {
+            visit(instance, event);
+          } catch (error) {
+            console.error("[UIInteractionSystem] hook failed:", error);
+          }
+        }
+      }
+      const parentId = world.getComponent(current, ParentId)?.value;
+      if (typeof parentId !== "number") break;
+      current = parentId;
+    }
+  }
+  actionIdOf(world, entityId) {
+    const button = world.getComponent(entityId, UIButtonComponent);
+    if (button?.actionId) return button.actionId;
+    const toggle = world.getComponent(entityId, UIToggleComponent);
+    if (toggle?.actionId) return toggle.actionId;
+    const slider = world.getComponent(entityId, UISliderComponent);
+    if (slider?.actionId) return slider.actionId;
+    const name = world.getComponent(entityId, Name)?.value;
+    return typeof name === "string" ? name : String(entityId);
+  }
+  // ── Pressed/hover tint ─────────────────────────────────────────────────────
+  beginPressTint(world, entityId) {
+    this.setTint(world, entityId, PRESS_TINT);
+    this.tintFloors.set(entityId, PRESS_TINT_MIN_SECONDS);
+  }
+  endPressTint(entityId) {
+    if (!this.tintFloors.has(entityId)) {
+      this.tintFloors.set(entityId, 0);
+    }
+  }
+  updateTints(world, deltaTime) {
+    for (const [entityId, remaining] of this.tintFloors) {
+      const next = remaining - deltaTime;
+      const stillHeld = [...this.xrPresses.values()].some((p) => p.entityId === entityId) || this.mousePress?.entityId === entityId;
+      if (stillHeld) continue;
+      if (next <= 0) {
+        this.tintFloors.delete(entityId);
+        this.setTint(
+          world,
+          entityId,
+          this.mouseHover === entityId ? HOVER_TINT : 1
+        );
+      } else {
+        this.tintFloors.set(entityId, next);
+      }
+    }
+  }
+  setTint(world, entityId, scalar) {
+    const object = this.widgetObject(world, entityId);
+    if (!object) return;
+    if (scalar === 1) this.tinted.delete(entityId);
+    else this.tinted.add(entityId);
+    object.traverse((child) => {
+      const material = child.material;
+      if (material?.color) material.color.setScalar(scalar);
+    });
+  }
+};
+__name(_UIInteractionSystem, "UIInteractionSystem");
+var UIInteractionSystem = _UIInteractionSystem;
+
+// core/ui/uiCanvas.ts
+var DEFAULT_PIXELS_PER_METER = 1024;
+var MIN_PIXELS_PER_METER = 256;
+var MAX_PIXELS_PER_METER = 2048;
+var MAX_CANVAS_SIDE = 2048;
+function resolveCanvasSize(widthMeters, heightMeters, pixelDensity = DEFAULT_PIXELS_PER_METER) {
+  const w = Math.max(0.01, widthMeters);
+  const h = Math.max(0.01, heightMeters);
+  const authored = Math.min(
+    MAX_PIXELS_PER_METER,
+    Math.max(MIN_PIXELS_PER_METER, pixelDensity)
+  );
+  const density = Math.min(authored, MAX_CANVAS_SIDE / Math.max(w, h));
+  const even = /* @__PURE__ */ __name((v) => Math.max(2, 2 * Math.round(v * density / 2)), "even");
+  return { pxWidth: even(w), pxHeight: even(h), density };
+}
+__name(resolveCanvasSize, "resolveCanvasSize");
+function wrapText(measure, text, maxWidthPx) {
+  const lines = [];
+  for (const paragraph of text.split("\n")) {
+    const words = paragraph.split(/\s+/).filter((w) => w.length > 0);
+    if (words.length === 0) {
+      lines.push("");
+      continue;
+    }
+    let line = "";
+    for (const word of words) {
+      const candidate = line ? `${line} ${word}` : word;
+      if (measure(candidate) <= maxWidthPx) {
+        line = candidate;
+        continue;
+      }
+      if (line) {
+        lines.push(line);
+        line = "";
+      }
+      if (measure(word) <= maxWidthPx) {
+        line = word;
+        continue;
+      }
+      let chunk = "";
+      for (const char of word) {
+        const next = chunk + char;
+        if (measure(next) <= maxWidthPx || chunk.length === 0) {
+          chunk = next;
+        } else {
+          lines.push(chunk);
+          chunk = char;
+        }
+      }
+      line = chunk;
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+__name(wrapText, "wrapText");
+var ELLIPSIS = "\u2026";
+function clampLines(measure, lines, maxLines, maxWidthPx) {
+  if (maxLines <= 0) return [];
+  if (lines.length <= maxLines) return lines;
+  const kept = lines.slice(0, maxLines);
+  let last = kept[maxLines - 1];
+  while (last.length > 0 && measure(last + ELLIPSIS) > maxWidthPx) {
+    last = last.slice(0, -1);
+  }
+  kept[maxLines - 1] = last + ELLIPSIS;
+  return kept;
+}
+__name(clampLines, "clampLines");
+var UI_FONT_STACK = '-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+function tracePath(ctx, x, y, w, h, r) {
+  const radius = Math.max(0, Math.min(r, w / 2, h / 2));
+  ctx.beginPath();
+  if (typeof ctx.roundRect === "function") {
+    ctx.roundRect(x, y, w, h, radius);
+    return;
+  }
+  ctx.moveTo(x + radius, y);
+  ctx.arcTo(x + w, y, x + w, y + h, radius);
+  ctx.arcTo(x + w, y + h, x, y + h, radius);
+  ctx.arcTo(x, y + h, x, y, radius);
+  ctx.arcTo(x, y, x + w, y, radius);
+  ctx.closePath();
+}
+__name(tracePath, "tracePath");
+function withOpacity(ctx, color, opacity) {
+  if (opacity >= 1) return color;
+  ctx.save();
+  ctx.fillStyle = color;
+  const parsed = ctx.fillStyle;
+  ctx.restore();
+  if (parsed.startsWith("#") && (parsed.length === 7 || parsed.length === 4)) {
+    const hex = parsed.length === 4 ? `#${parsed[1]}${parsed[1]}${parsed[2]}${parsed[2]}${parsed[3]}${parsed[3]}` : parsed;
+    const r = Number.parseInt(hex.slice(1, 3), 16);
+    const g = Number.parseInt(hex.slice(3, 5), 16);
+    const b = Number.parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return parsed;
+}
+__name(withOpacity, "withOpacity");
+function drawChrome(ctx, pxWidth, pxHeight, density, style) {
+  ctx.clearRect(0, 0, pxWidth, pxHeight);
+  const border = Math.max(0, style.borderWidthMeters * density);
+  const radius = style.cornerRadiusMeters * density;
+  tracePath(ctx, 0, 0, pxWidth, pxHeight, radius);
+  ctx.fillStyle = withOpacity(
+    ctx,
+    style.backgroundColor,
+    Math.max(0, Math.min(1, style.backgroundOpacity))
+  );
+  ctx.fill();
+  if (border > 0) {
+    tracePath(
+      ctx,
+      border / 2,
+      border / 2,
+      pxWidth - border,
+      pxHeight - border,
+      Math.max(0, radius - border / 2)
+    );
+    ctx.strokeStyle = style.borderColor;
+    ctx.lineWidth = border;
+    ctx.stroke();
+  }
+}
+__name(drawChrome, "drawChrome");
+function drawTextBlock(ctx, pxWidth, pxHeight, density, text, style) {
+  const fontPx = Math.max(4, style.fontSizeMeters * density);
+  const paddingPx = style.paddingMeters * density;
+  const contentW = Math.max(1, pxWidth - paddingPx * 2);
+  const contentH = Math.max(1, pxHeight - paddingPx * 2);
+  const lineHeightPx = fontPx * style.lineHeight;
+  ctx.font = `${style.fontWeight} ${fontPx}px ${UI_FONT_STACK}`;
+  const measure = /* @__PURE__ */ __name((s) => ctx.measureText(s).width, "measure");
+  const maxLines = Math.max(1, Math.floor(contentH / lineHeightPx));
+  const lines = clampLines(
+    measure,
+    wrapText(measure, text, contentW),
+    maxLines,
+    contentW
+  );
+  const blockH = lines.length * lineHeightPx;
+  const top = style.valign === "top" ? paddingPx : style.valign === "bottom" ? pxHeight - paddingPx - blockH : (pxHeight - blockH) / 2;
+  const anchorX = style.align === "left" ? paddingPx : style.align === "right" ? pxWidth - paddingPx : pxWidth / 2;
+  ctx.save();
+  tracePath(ctx, 0, 0, pxWidth, pxHeight, 0);
+  ctx.clip();
+  ctx.fillStyle = style.color;
+  ctx.textAlign = style.align;
+  ctx.textBaseline = "middle";
+  for (let i = 0; i < lines.length; i += 1) {
+    ctx.fillText(lines[i], anchorX, top + (i + 0.5) * lineHeightPx);
+  }
+  ctx.restore();
+}
+__name(drawTextBlock, "drawTextBlock");
+function panelSignature(widthM, heightM, size, style) {
+  return JSON.stringify([
+    widthM,
+    heightM,
+    size.pxWidth,
+    size.pxHeight,
+    style.backgroundColor,
+    style.backgroundOpacity,
+    style.cornerRadiusMeters,
+    style.borderWidthMeters,
+    style.borderColor
+  ]);
+}
+__name(panelSignature, "panelSignature");
+function textSignature(widthM, heightM, size, text, style) {
+  return JSON.stringify([
+    widthM,
+    heightM,
+    size.pxWidth,
+    size.pxHeight,
+    text,
+    style.fontSizeMeters,
+    style.fontWeight,
+    style.color,
+    style.align,
+    style.valign,
+    style.lineHeight,
+    style.paddingMeters
+  ]);
+}
+__name(textSignature, "textSignature");
+function buttonSignature(widthM, heightM, size, panel, label, text) {
+  return JSON.stringify([
+    panelSignature(widthM, heightM, size, panel),
+    label,
+    text.fontSizeMeters,
+    text.fontWeight,
+    text.color
+  ]);
+}
+__name(buttonSignature, "buttonSignature");
+function trackSignature(widthM, heightM, size, panel, accentColor, knobColor) {
+  return JSON.stringify([
+    panelSignature(widthM, heightM, size, panel),
+    accentColor,
+    knobColor
+  ]);
+}
+__name(trackSignature, "trackSignature");
+function drawRoundedBar(ctx, pxX, pxY, pxW, pxH, color) {
+  tracePath(ctx, pxX, pxY, pxW, pxH, pxH / 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+__name(drawRoundedBar, "drawRoundedBar");
+
+// core/systems/UIPanelSystem.ts
+var FACE_RENDER_ORDER = 10;
+var CHILD_Z = 2e-3;
+var _UIPanelSystem = class _UIPanelSystem {
+  constructor(options) {
+    this.entries = /* @__PURE__ */ new Map();
+    this.createCanvas = options?.createCanvas ?? (() => document.createElement("canvas"));
+  }
+  update(world, deltaTime = 0) {
+    const live = /* @__PURE__ */ new Set();
+    for (const entityId of world.query(UIPanelComponent, Object3DRef)) {
+      const panel = world.getComponent(entityId, UIPanelComponent);
+      if (!panel) continue;
+      live.add(entityId);
+      this.syncPanel(world, entityId, panel);
+      this.applyFollow(world, entityId, panel);
+    }
+    for (const entityId of world.query(UITextComponent, Object3DRef)) {
+      const text = world.getComponent(entityId, UITextComponent);
+      if (!text) continue;
+      live.add(entityId);
+      this.syncText(world, entityId, text);
+    }
+    for (const entityId of world.query(UIButtonComponent, Object3DRef)) {
+      const button = world.getComponent(entityId, UIButtonComponent);
+      if (!button) continue;
+      live.add(entityId);
+      this.syncButton(world, entityId, button);
+    }
+    for (const entityId of world.query(UIToggleComponent, Object3DRef)) {
+      const toggle = world.getComponent(entityId, UIToggleComponent);
+      if (!toggle) continue;
+      live.add(entityId);
+      this.syncToggle(world, entityId, toggle, deltaTime);
+    }
+    for (const entityId of world.query(UISliderComponent, Object3DRef)) {
+      const slider = world.getComponent(entityId, UISliderComponent);
+      if (!slider) continue;
+      live.add(entityId);
+      this.syncSlider(world, entityId, slider);
+    }
+    for (const [entityId, entry] of this.entries) {
+      if (!live.has(entityId)) {
+        this.destroyEntry(entry);
+        this.entries.delete(entityId);
+      }
+    }
+  }
+  /** All GPU/canvas resources; call on world teardown. */
+  dispose() {
+    for (const entry of this.entries.values()) this.destroyEntry(entry);
+    this.entries.clear();
+  }
+  // ── Widgets ────────────────────────────────────────────────────────────────
+  syncPanel(world, entityId, panel) {
+    const size = resolveCanvasSize(panel.width, panel.height, panel.pixelDensity);
+    const style = {
+      backgroundColor: panel.backgroundColor,
+      backgroundOpacity: panel.backgroundOpacity,
+      cornerRadiusMeters: panel.cornerRadius,
+      borderWidthMeters: panel.borderWidth,
+      borderColor: panel.borderColor
+    };
+    const signature = panelSignature(panel.width, panel.height, size, style);
+    this.rebuildIfChanged(world, entityId, signature, panel.width, panel.height, size, (ctx) => {
+      drawChrome(ctx, size.pxWidth, size.pxHeight, size.density, style);
+    });
+  }
+  syncText(world, entityId, text) {
+    const size = resolveCanvasSize(text.width, text.height);
+    const style = {
+      fontSizeMeters: text.fontSize,
+      fontWeight: text.fontWeight,
+      color: text.color,
+      align: text.align,
+      valign: text.valign,
+      lineHeight: text.lineHeight,
+      paddingMeters: text.padding
+    };
+    const signature = textSignature(text.width, text.height, size, text.text, style);
+    this.rebuildIfChanged(world, entityId, signature, text.width, text.height, size, (ctx) => {
+      ctx.clearRect(0, 0, size.pxWidth, size.pxHeight);
+      drawTextBlock(ctx, size.pxWidth, size.pxHeight, size.density, text.text, style);
+    });
+  }
+  syncButton(world, entityId, button) {
+    const size = resolveCanvasSize(button.width, button.height);
+    const chrome = {
+      backgroundColor: button.backgroundColor,
+      backgroundOpacity: button.backgroundOpacity,
+      cornerRadiusMeters: button.cornerRadius,
+      borderWidthMeters: button.borderWidth,
+      borderColor: button.borderColor
+    };
+    const label = {
+      fontSizeMeters: button.fontSize,
+      fontWeight: button.fontWeight,
+      color: button.textColor,
+      align: "center",
+      valign: "middle",
+      lineHeight: 1.2,
+      paddingMeters: 0.01
+    };
+    const signature = buttonSignature(
+      button.width,
+      button.height,
+      size,
+      chrome,
+      button.label,
+      label
+    );
+    this.rebuildIfChanged(world, entityId, signature, button.width, button.height, size, (ctx) => {
+      drawChrome(ctx, size.pxWidth, size.pxHeight, size.density, chrome);
+      drawTextBlock(ctx, size.pxWidth, size.pxHeight, size.density, button.label, label);
+    });
+  }
+  syncToggle(world, entityId, toggle, deltaTime) {
+    const size = resolveCanvasSize(toggle.width, toggle.height);
+    const chrome = {
+      backgroundColor: toggle.value ? toggle.accentColor : toggle.trackColor,
+      backgroundOpacity: 1,
+      cornerRadiusMeters: toggle.height / 2,
+      borderWidthMeters: 0,
+      borderColor: "#000000"
+    };
+    const signature = JSON.stringify([
+      trackSignature(
+        toggle.width,
+        toggle.height,
+        size,
+        chrome,
+        toggle.accentColor,
+        toggle.knobColor
+      ),
+      toggle.value
+    ]);
+    const entry = this.rebuildIfChanged(
+      world,
+      entityId,
+      signature,
+      toggle.width,
+      toggle.height,
+      size,
+      (ctx) => {
+        drawChrome(ctx, size.pxWidth, size.pxHeight, size.density, chrome);
+      }
+    );
+    if (!entry) return;
+    if (!entry.knob) {
+      entry.knob = this.makeDisc(
+        toggle.height * 0.4,
+        toggle.knobColor,
+        entry.face.parent,
+        CHILD_Z
+      );
+    }
+    const inset = toggle.height / 2;
+    const target = toggle.value ? toggle.width / 2 - inset : -(toggle.width / 2 - inset);
+    const knob = entry.knob;
+    const ease = Math.min(1, deltaTime * 14);
+    knob.position.x += (target - knob.position.x) * (deltaTime > 0 ? ease : 1);
+    knob.position.z = CHILD_Z;
+  }
+  syncSlider(world, entityId, slider) {
+    const size = resolveCanvasSize(slider.width, slider.height);
+    const trackThickness = slider.height * 0.32;
+    const knobRadius = slider.height * 0.45;
+    const usable = Math.max(1e-3, slider.width - slider.height);
+    const chrome = {
+      backgroundColor: slider.trackColor,
+      backgroundOpacity: 1,
+      cornerRadiusMeters: trackThickness / 2,
+      borderWidthMeters: 0,
+      borderColor: "#000000"
+    };
+    const signature = trackSignature(
+      slider.width,
+      slider.height,
+      size,
+      chrome,
+      slider.accentColor,
+      slider.knobColor
+    );
+    const entry = this.rebuildIfChanged(
+      world,
+      entityId,
+      signature,
+      slider.width,
+      slider.height,
+      size,
+      (ctx) => {
+        ctx.clearRect(0, 0, size.pxWidth, size.pxHeight);
+        const trackWidthM = usable + trackThickness;
+        drawRoundedBar(
+          ctx,
+          (slider.width - trackWidthM) / 2 * size.density,
+          (slider.height - trackThickness) / 2 * size.density,
+          trackWidthM * size.density,
+          trackThickness * size.density,
+          slider.trackColor
+        );
+      }
+    );
+    if (!entry) return;
+    if (!entry.fill) {
+      entry.fill = this.makeQuad(
+        1,
+        trackThickness,
+        slider.accentColor,
+        entry.face.parent,
+        CHILD_Z / 2
+      );
+      entry.cap = this.makeDisc(
+        trackThickness / 2,
+        slider.accentColor,
+        entry.face.parent,
+        CHILD_Z / 2,
+        Math.PI / 2,
+        Math.PI
+      );
+      entry.cap.position.x = -usable / 2;
+    }
+    if (!entry.knob) {
+      entry.knob = this.makeDisc(
+        knobRadius,
+        slider.knobColor,
+        entry.face.parent,
+        CHILD_Z
+      );
+    }
+    const range = Math.max(1e-6, slider.max - slider.min);
+    const t = Math.min(1, Math.max(0, (slider.value - slider.min) / range));
+    entry.knob.position.x = -usable / 2 + t * usable;
+    entry.knob.position.z = CHILD_Z;
+    entry.fill.scale.x = Math.max(1e-4, t * usable);
+    entry.fill.position.x = -usable / 2 + t * usable / 2;
+    entry.fill.position.z = CHILD_Z / 2;
+  }
+  // ── Machinery ──────────────────────────────────────────────────────────────
+  rebuildIfChanged(world, entityId, signature, widthM, heightM, size, draw) {
+    const root = world.getComponent(entityId, Object3DRef)?.object;
+    if (!root) return null;
+    let entry = this.entries.get(entityId);
+    if (entry && entry.signature === signature) return entry;
+    if (entry) this.disposeMovingParts(entry);
+    if (!entry) {
+      const canvas2 = this.createCanvas();
+      const texture = new THREE56__namespace.CanvasTexture(
+        canvas2
+      );
+      this.configureTexture(world, texture);
+      const material = new THREE56__namespace.MeshBasicMaterial({
+        map: texture,
+        transparent: true,
+        depthWrite: false,
+        // UI colours are authored absolutes; scene tone mapping would shift
+        // them (the classic "why is my white UI beige" bug).
+        toneMapped: false,
+        side: THREE56__namespace.DoubleSide,
+        premultipliedAlpha: true
+      });
+      const face = new THREE56__namespace.Mesh(
+        new THREE56__namespace.PlaneGeometry(widthM, heightM),
+        material
+      );
+      face.renderOrder = FACE_RENDER_ORDER;
+      root.add(face);
+      entry = {
+        signature: "",
+        face,
+        texture,
+        material,
+        canvas: canvas2,
+        knob: null,
+        fill: null,
+        cap: null
+      };
+      this.entries.set(entityId, entry);
+    }
+    const { canvas } = entry;
+    if (canvas.width !== size.pxWidth || canvas.height !== size.pxHeight) {
+      canvas.width = size.pxWidth;
+      canvas.height = size.pxHeight;
+    }
+    const params = entry.face.geometry.parameters;
+    if (params.width !== widthM || params.height !== heightM) {
+      entry.face.geometry.dispose();
+      entry.face.geometry = new THREE56__namespace.PlaneGeometry(widthM, heightM);
+    }
+    const ctx = canvas.getContext("2d");
+    if (ctx) draw(ctx);
+    entry.texture.needsUpdate = true;
+    entry.signature = signature;
+    return entry;
+  }
+  configureTexture(world, texture) {
+    texture.colorSpace = THREE56__namespace.SRGBColorSpace;
+    texture.generateMipmaps = true;
+    texture.minFilter = THREE56__namespace.LinearMipmapLinearFilter;
+    texture.magFilter = THREE56__namespace.LinearFilter;
+    texture.premultiplyAlpha = true;
+    try {
+      const max = world.getRenderer().capabilities?.getMaxAnisotropy?.();
+      if (typeof max === "number") texture.anisotropy = Math.min(8, max);
+    } catch {
+    }
+  }
+  makeQuad(widthM, heightM, color, parent, z) {
+    return this.addPart(
+      new THREE56__namespace.PlaneGeometry(widthM, heightM),
+      color,
+      parent,
+      z
+    );
+  }
+  /** A filled disc (or arc segment, for the fill's rounded cap). */
+  makeDisc(radiusM, color, parent, z, thetaStart = 0, thetaLength = Math.PI * 2) {
+    return this.addPart(
+      new THREE56__namespace.CircleGeometry(radiusM, 32, thetaStart, thetaLength),
+      color,
+      parent,
+      z
+    );
+  }
+  addPart(geometry, color, parent, z) {
+    const mesh = new THREE56__namespace.Mesh(
+      geometry,
+      new THREE56__namespace.MeshBasicMaterial({
+        color,
+        transparent: true,
+        depthWrite: false,
+        toneMapped: false,
+        side: THREE56__namespace.DoubleSide
+      })
+    );
+    mesh.renderOrder = FACE_RENDER_ORDER + 1;
+    mesh.position.z = z;
+    mesh.raycast = () => {
+    };
+    parent?.add(mesh);
+    return mesh;
+  }
+  /** Remove + dispose knob/fill/cap so a sync pass rebuilds them fresh. */
+  disposeMovingParts(entry) {
+    for (const key of ["knob", "fill", "cap"]) {
+      const mesh = entry[key];
+      if (!mesh) continue;
+      mesh.removeFromParent();
+      mesh.geometry.dispose();
+      mesh.material.dispose();
+      entry[key] = null;
+    }
+  }
+  /**
+   * Billboard: yaw the ENTITY TRANSFORM toward the camera. Writing the
+   * Object3D directly would be overwritten by `TransformSyncSystem` (which
+   * runs after this system, before render) — the same reason locomotion
+   * writes the rig transform. Skipped in the editor so the gizmo and the
+   * authored rotation stay in charge while authoring.
+   */
+  applyFollow(world, entityId, panel) {
+    if (panel.follow !== "billboard" || world.isEditorMode()) return;
+    const transform = world.getComponent(entityId, TransformComponent);
+    const object = world.getComponent(entityId, Object3DRef)?.object;
+    if (!transform || !object) return;
+    const camera = world.getCamera();
+    const cam = new THREE56__namespace.Vector3();
+    const self = new THREE56__namespace.Vector3();
+    camera.getWorldPosition(cam);
+    object.getWorldPosition(self);
+    transform.rotation.y = Math.atan2(cam.x - self.x, cam.z - self.z);
+  }
+  destroyEntry(entry) {
+    this.disposeMovingParts(entry);
+    entry.face.removeFromParent();
+    entry.face.geometry.dispose();
+    entry.face.material.dispose();
+    entry.texture.dispose();
+  }
+};
+__name(_UIPanelSystem, "UIPanelSystem");
+var UIPanelSystem = _UIPanelSystem;
 var _XRHitTestSystem = class _XRHitTestSystem {
   constructor() {
     this.sources = /* @__PURE__ */ new Map();
@@ -12828,12 +14405,12 @@ var _XRHitTestSystem = class _XRHitTestSystem {
       if (!hits || hits.length === 0) continue;
       const pose = hits[0].getPose(referenceSpace);
       if (!pose) continue;
-      const matrix = new THREE51__namespace.Matrix4().fromArray(
+      const matrix = new THREE56__namespace.Matrix4().fromArray(
         pose.transform.matrix
       );
-      const position = new THREE51__namespace.Vector3();
-      const quaternion = new THREE51__namespace.Quaternion();
-      matrix.decompose(position, quaternion, new THREE51__namespace.Vector3());
+      const position = new THREE56__namespace.Vector3();
+      const quaternion = new THREE56__namespace.Quaternion();
+      matrix.decompose(position, quaternion, new THREE56__namespace.Vector3());
       this.results.set(key, { position, quaternion });
     }
   }
@@ -12904,9 +14481,13 @@ var _XRAnchorSystem = class _XRAnchorSystem {
     this.anchors = /* @__PURE__ */ new Map();
     /** In-flight creations, so one entity is not anchored twice. */
     this.pending = /* @__PURE__ */ new Set();
+    /** Per-anchor head-glue gates — see XREnvironmentSystem's TrackedEntry. */
+    this.gates = /* @__PURE__ */ new Map();
     this.presenting = false;
+    this.tmpViewerMatrix = new THREE56__namespace.Matrix4();
+    this.tmpViewPos = new THREE56__namespace.Vector3();
   }
-  update(world) {
+  update(world, deltaTime = 0) {
     const presenting = world.isXrPresenting();
     if (!presenting) {
       if (this.presenting) {
@@ -12926,8 +14507,11 @@ var _XRAnchorSystem = class _XRAnchorSystem {
       if (!live.has(entityId)) {
         anchor.delete?.();
         this.anchors.delete(entityId);
+        this.gates.delete(entityId);
       }
     }
+    const viewer = frame.getViewerPose?.(referenceSpace);
+    const viewerInverse = viewer ? this.tmpViewerMatrix.fromArray(viewer.transform.matrix).invert() : null;
     for (const entityId of entityIds) {
       const component = world.getComponent(entityId, XRAnchorComponent);
       const transform = world.getComponent(entityId, TransformComponent);
@@ -12937,6 +14521,7 @@ var _XRAnchorSystem = class _XRAnchorSystem {
         if (existing) {
           existing.delete?.();
           this.anchors.delete(entityId);
+          this.gates.delete(entityId);
         }
         continue;
       }
@@ -12946,7 +14531,23 @@ var _XRAnchorSystem = class _XRAnchorSystem {
         continue;
       }
       const pose = frame.getPose(anchor.anchorSpace, referenceSpace);
-      if (pose) decomposeXrPose(pose.transform.matrix, transform);
+      if (pose && pose.emulatedPosition !== true) {
+        let gate = this.gates.get(entityId);
+        if (!gate) {
+          gate = new SurfacePoseGate();
+          this.gates.set(entityId, gate);
+        }
+        const m = pose.transform.matrix;
+        const refPos = { x: m[12], y: m[13], z: m[14] };
+        let viewPos = null;
+        if (viewerInverse) {
+          const v = this.tmpViewPos.set(refPos.x, refPos.y, refPos.z).applyMatrix4(viewerInverse);
+          viewPos = { x: v.x, y: v.y, z: v.z };
+        }
+        if (gate.update(refPos, viewPos, deltaTime)) {
+          decomposeXrPose(pose.transform.matrix, transform);
+        }
+      }
     }
   }
   /** Whether this entity's pose is currently being driven by an anchor. */
@@ -12958,8 +14559,8 @@ var _XRAnchorSystem = class _XRAnchorSystem {
     if (typeof frame.createAnchor !== "function") return;
     const RigidTransform = globalThis.XRRigidTransform;
     if (!RigidTransform) return;
-    const quaternion = new THREE51__namespace.Quaternion().setFromEuler(
-      new THREE51__namespace.Euler(
+    const quaternion = new THREE56__namespace.Quaternion().setFromEuler(
+      new THREE56__namespace.Euler(
         transform.rotation.x,
         transform.rotation.y,
         transform.rotation.z,
@@ -12990,6 +14591,7 @@ var _XRAnchorSystem = class _XRAnchorSystem {
     }).finally(() => this.pending.delete(entityId));
   }
   releaseAll() {
+    this.gates.clear();
     for (const anchor of this.anchors.values()) anchor.delete?.();
     this.anchors.clear();
     this.pending.clear();
@@ -13004,9 +14606,9 @@ var XRAnchorSystem = _XRAnchorSystem;
 function buildGeometry2(area) {
   if (area.shape === "circle") {
     const radius = Math.max(5e-3, area.width / 2);
-    return new THREE51__namespace.CircleGeometry(radius, 48);
+    return new THREE56__namespace.CircleGeometry(radius, 48);
   }
-  return new THREE51__namespace.PlaneGeometry(
+  return new THREE56__namespace.PlaneGeometry(
     Math.max(0.01, area.width),
     Math.max(0.01, area.depth)
   );
@@ -13029,7 +14631,7 @@ var _VRTeleportAreaSystem = class _VRTeleportAreaSystem {
     for (const entityId of entityIds) {
       const area = world.getComponent(entityId, VRTeleportAreaComponent);
       const object = world.getComponent(entityId, Object3DRef)?.object;
-      if (!area || !(object instanceof THREE51__namespace.Mesh)) continue;
+      if (!area || !(object instanceof THREE56__namespace.Mesh)) continue;
       const signature = signatureOf(area);
       if (this.signatures.get(entityId) === signature) continue;
       this.signatures.set(entityId, signature);
@@ -13041,18 +14643,18 @@ var _VRTeleportAreaSystem = class _VRTeleportAreaSystem {
 __name(_VRTeleportAreaSystem, "VRTeleportAreaSystem");
 var VRTeleportAreaSystem = _VRTeleportAreaSystem;
 function createHandMaterial(preset, options) {
-  const color = new THREE51__namespace.Color(options.color);
+  const color = new THREE56__namespace.Color(options.color);
   switch (preset) {
     case "ghost":
-      return new THREE51__namespace.MeshBasicMaterial({
+      return new THREE56__namespace.MeshBasicMaterial({
         color,
         transparent: true,
         opacity: Math.min(1, Math.max(0.05, options.opacity * 0.45)),
         depthWrite: false,
-        side: THREE51__namespace.DoubleSide
+        side: THREE56__namespace.DoubleSide
       });
     case "neon":
-      return new THREE51__namespace.MeshStandardMaterial({
+      return new THREE56__namespace.MeshStandardMaterial({
         color,
         emissive: color,
         emissiveIntensity: Math.max(0.5, options.emissiveIntensity || 2),
@@ -13062,7 +14664,7 @@ function createHandMaterial(preset, options) {
         opacity: options.opacity
       });
     case "skeleton":
-      return new THREE51__namespace.MeshBasicMaterial({
+      return new THREE56__namespace.MeshBasicMaterial({
         color,
         wireframe: true,
         transparent: true,
@@ -13070,7 +14672,7 @@ function createHandMaterial(preset, options) {
       });
     case "custom":
     case "default":
-      return new THREE51__namespace.MeshStandardMaterial({
+      return new THREE56__namespace.MeshStandardMaterial({
         color,
         roughness: 0.85,
         metalness: 0,
@@ -13078,10 +14680,10 @@ function createHandMaterial(preset, options) {
         emissiveIntensity: Math.max(0, options.emissiveIntensity),
         transparent: options.opacity < 1,
         opacity: options.opacity,
-        side: THREE51__namespace.DoubleSide
+        side: THREE56__namespace.DoubleSide
       });
     default: {
-      return new THREE51__namespace.MeshStandardMaterial({ color });
+      return new THREE56__namespace.MeshStandardMaterial({ color });
     }
   }
 }
@@ -13106,9 +14708,9 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
   constructor(options) {
     this.controllerModelFactory = new XRControllerModelFactory_js.XRControllerModelFactory();
     this.handModelFactory = new XRHandModelFactory_js.XRHandModelFactory();
-    this.group = new THREE51__namespace.Group();
+    this.group = new THREE56__namespace.Group();
     /** Reused so a per-frame colour compare allocates nothing. */
-    this.rayColorScratch = new THREE51__namespace.Color();
+    this.rayColorScratch = new THREE56__namespace.Color();
     this.slots = /* @__PURE__ */ new Map();
     this.attachedTo = null;
     /** Last applied preset signature, so materials rebuild only on real change. */
@@ -13295,17 +14897,17 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
    * without pulling in a line-rendering extension.
    */
   createRay() {
-    const geometry = new THREE51__namespace.CylinderGeometry(RAY_RADIUS, RAY_RADIUS, 1, 8, 1);
+    const geometry = new THREE56__namespace.CylinderGeometry(RAY_RADIUS, RAY_RADIUS, 1, 8, 1);
     geometry.rotateX(-Math.PI / 2);
     geometry.translate(0, 0, -0.5);
-    const material = new THREE51__namespace.MeshBasicMaterial({
+    const material = new THREE56__namespace.MeshBasicMaterial({
       color: "#4da3ff",
       transparent: true,
       opacity: 0.75,
       depthTest: false,
       depthWrite: false
     });
-    const mesh = new THREE51__namespace.Mesh(geometry, material);
+    const mesh = new THREE56__namespace.Mesh(geometry, material);
     mesh.name = "XRPointerRay";
     mesh.renderOrder = 999;
     mesh.visible = false;
@@ -13336,14 +14938,14 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
 __name(_XRControllerVisualSystem, "XRControllerVisualSystem");
 var XRControllerVisualSystem = _XRControllerVisualSystem;
 var MARKER_RADIUS = 0.28;
-var ACCENT = new THREE51__namespace.Color("#4da3ff");
-var SEGMENT_AXIS = new THREE51__namespace.Vector3(0, 1, 0);
+var ACCENT = new THREE56__namespace.Color("#4da3ff");
+var SEGMENT_AXIS = new THREE56__namespace.Vector3(0, 1, 0);
 var HEAD_CLEARANCE = 0.25;
 var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
   constructor(locomotionSystem) {
-    this.group = new THREE51__namespace.Group();
+    this.group = new THREE56__namespace.Group();
     /** Holds the segment chain that draws the arc. */
-    this.arc = new THREE51__namespace.Group();
+    this.arc = new THREE56__namespace.Group();
     /**
      * Unit cylinder along +Y, reused by every segment.
      *
@@ -13352,14 +14954,14 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
      * scaled cylinders gives real thickness while rebuilding no geometry: each
      * frame only moves, rotates and scales meshes that already exist.
      */
-    this.segmentGeometry = new THREE51__namespace.CylinderGeometry(1, 1, 1, 6, 1);
+    this.segmentGeometry = new THREE56__namespace.CylinderGeometry(1, 1, 1, 6, 1);
     this.segments = [];
-    this.marker = new THREE51__namespace.Group();
+    this.marker = new THREE56__namespace.Group();
     this.attached = false;
-    this.scratchDirection = new THREE51__namespace.Vector3();
-    this.scratchHead = new THREE51__namespace.Vector3();
-    this.validColor = new THREE51__namespace.Color();
-    this.invalidColor = new THREE51__namespace.Color();
+    this.scratchDirection = new THREE56__namespace.Vector3();
+    this.scratchHead = new THREE56__namespace.Vector3();
+    this.validColor = new THREE56__namespace.Color();
+    this.invalidColor = new THREE56__namespace.Color();
     this.locomotionSystem = locomotionSystem;
     this.group.name = "XRTeleportVisuals";
     this.group.userData.ecsPreviewHidden = true;
@@ -13437,12 +15039,12 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
   /** Grow the segment pool to cover the current arc. */
   ensureSegments(count) {
     while (this.segments.length < count) {
-      const material = new THREE51__namespace.MeshBasicMaterial({
+      const material = new THREE56__namespace.MeshBasicMaterial({
         transparent: true,
         depthTest: false,
         depthWrite: false
       });
-      const mesh = new THREE51__namespace.Mesh(this.segmentGeometry, material);
+      const mesh = new THREE56__namespace.Mesh(this.segmentGeometry, material);
       mesh.frustumCulled = false;
       mesh.renderOrder = 998;
       mesh.raycast = () => {
@@ -13466,33 +15068,33 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
     return world.getComponent(entityId, XRRigComponent) ?? null;
   }
   createRing() {
-    const geometry = new THREE51__namespace.RingGeometry(
+    const geometry = new THREE56__namespace.RingGeometry(
       MARKER_RADIUS * 0.72,
       MARKER_RADIUS,
       48
     );
     geometry.rotateX(-Math.PI / 2);
-    return new THREE51__namespace.Mesh(
+    return new THREE56__namespace.Mesh(
       geometry,
-      new THREE51__namespace.MeshBasicMaterial({
+      new THREE56__namespace.MeshBasicMaterial({
         color: ACCENT,
         transparent: true,
         opacity: 0.9,
-        side: THREE51__namespace.DoubleSide,
+        side: THREE56__namespace.DoubleSide,
         depthTest: false
       })
     );
   }
   createDot() {
-    const geometry = new THREE51__namespace.CircleGeometry(MARKER_RADIUS * 0.16, 24);
+    const geometry = new THREE56__namespace.CircleGeometry(MARKER_RADIUS * 0.16, 24);
     geometry.rotateX(-Math.PI / 2);
-    return new THREE51__namespace.Mesh(
+    return new THREE56__namespace.Mesh(
       geometry,
-      new THREE51__namespace.MeshBasicMaterial({
+      new THREE56__namespace.MeshBasicMaterial({
         color: ACCENT,
         transparent: true,
         opacity: 0.55,
-        side: THREE51__namespace.DoubleSide,
+        side: THREE56__namespace.DoubleSide,
         depthTest: false
       })
     );
@@ -13603,7 +15205,7 @@ function boneDirections(joints, finger) {
     const from = joints[chain[i - 1]];
     const to = joints[chain[i]];
     if (!from || !to) return null;
-    const direction = new THREE51__namespace.Vector3().subVectors(to, from);
+    const direction = new THREE56__namespace.Vector3().subVectors(to, from);
     if (direction.lengthSq() < 1e-12) return null;
     directions.push(direction.normalize());
   }
@@ -13676,8 +15278,8 @@ function computeSpread(joints, a, b) {
   const bBase = joints[METACARPAL_JOINTS[b]];
   const bTip = joints[TIP_JOINTS[b]];
   if (!aBase || !aTip || !bBase || !bTip) return null;
-  const dirA = new THREE51__namespace.Vector3().subVectors(aTip, aBase);
-  const dirB = new THREE51__namespace.Vector3().subVectors(bTip, bBase);
+  const dirA = new THREE56__namespace.Vector3().subVectors(aTip, aBase);
+  const dirB = new THREE56__namespace.Vector3().subVectors(bTip, bBase);
   if (dirA.lengthSq() < 1e-12 || dirB.lengthSq() < 1e-12) return null;
   return clamp01((1 - dirA.normalize().dot(dirB.normalize())) / 0.45);
 }
@@ -13687,18 +15289,18 @@ function computePalmPose(joints, handedness) {
   const indexBase = joints["index-finger-metacarpal"];
   const pinkyBase = joints["pinky-finger-metacarpal"];
   if (!wrist || !indexBase || !pinkyBase) return null;
-  const u = new THREE51__namespace.Vector3().subVectors(indexBase, wrist);
-  const v = new THREE51__namespace.Vector3().subVectors(pinkyBase, wrist);
-  const normal = new THREE51__namespace.Vector3().crossVectors(u, v);
+  const u = new THREE56__namespace.Vector3().subVectors(indexBase, wrist);
+  const v = new THREE56__namespace.Vector3().subVectors(pinkyBase, wrist);
+  const normal = new THREE56__namespace.Vector3().crossVectors(u, v);
   if (normal.lengthSq() < 1e-12) return null;
   normal.normalize();
   if (handedness === "left") normal.multiplyScalar(-1);
-  const right = new THREE51__namespace.Vector3().subVectors(indexBase, pinkyBase);
+  const right = new THREE56__namespace.Vector3().subVectors(indexBase, pinkyBase);
   if (right.lengthSq() < 1e-12) return null;
   right.normalize();
   if (handedness === "left") right.multiplyScalar(-1);
-  const up = new THREE51__namespace.Vector3().crossVectors(normal, right).normalize();
-  const center = new THREE51__namespace.Vector3().add(wrist).add(indexBase).add(pinkyBase).divideScalar(3);
+  const up = new THREE56__namespace.Vector3().crossVectors(normal, right).normalize();
+  const center = new THREE56__namespace.Vector3().add(wrist).add(indexBase).add(pinkyBase).divideScalar(3);
   return {
     center,
     normal,
@@ -13729,7 +15331,7 @@ function computeHandShape(joints, handedness) {
   const thumbTip = joints["thumb-tip"];
   let thumbDirection = null;
   if (thumbBase && thumbTip) {
-    const direction = new THREE51__namespace.Vector3().subVectors(thumbTip, thumbBase);
+    const direction = new THREE56__namespace.Vector3().subVectors(thumbTip, thumbBase);
     if (direction.lengthSq() > 1e-12) thumbDirection = direction.normalize();
   }
   const fingerDirections = {};
@@ -13740,7 +15342,7 @@ function computeHandShape(joints, handedness) {
       fingerDirections[finger] = null;
       continue;
     }
-    const direction = new THREE51__namespace.Vector3().subVectors(tip, base);
+    const direction = new THREE56__namespace.Vector3().subVectors(tip, base);
     fingerDirections[finger] = direction.lengthSq() > 1e-12 ? direction.normalize() : null;
   }
   return {
@@ -13774,12 +15376,12 @@ function scoreAgainst(actual, target, tolerance) {
 __name(scoreAgainst, "scoreAgainst");
 var DEFAULT_DIRECTION_TOLERANCE = 45;
 var WORLD_DIRECTIONS = {
-  up: new THREE51__namespace.Vector3(0, 1, 0),
-  down: new THREE51__namespace.Vector3(0, -1, 0),
-  forward: new THREE51__namespace.Vector3(0, 0, -1),
-  back: new THREE51__namespace.Vector3(0, 0, 1),
-  left: new THREE51__namespace.Vector3(-1, 0, 0),
-  right: new THREE51__namespace.Vector3(1, 0, 0)
+  up: new THREE56__namespace.Vector3(0, 1, 0),
+  down: new THREE56__namespace.Vector3(0, -1, 0),
+  forward: new THREE56__namespace.Vector3(0, 0, -1),
+  back: new THREE56__namespace.Vector3(0, 0, 1),
+  left: new THREE56__namespace.Vector3(-1, 0, 0),
+  right: new THREE56__namespace.Vector3(1, 0, 0)
 };
 function axisVector(shape, axis) {
   if (axis === "thumb") return shape.thumbDirection;
@@ -13794,7 +15396,7 @@ function resolveDirection(direction, shape, context) {
   const head = context?.headPosition;
   const origin = shape.palm?.center;
   if (!head || !origin) return null;
-  const toHead = new THREE51__namespace.Vector3().subVectors(head, origin);
+  const toHead = new THREE56__namespace.Vector3().subVectors(head, origin);
   if (toHead.lengthSq() < 1e-12) return null;
   toHead.normalize();
   return direction === "toward-head" ? toHead : toHead.multiplyScalar(-1);
@@ -13806,8 +15408,8 @@ function scoreDirections(actual, accepted, shape, toleranceDegrees, context) {
   for (const direction of accepted) {
     const wanted = resolveDirection(direction, shape, context);
     if (!wanted) continue;
-    const angle = THREE51__namespace.MathUtils.radToDeg(
-      Math.acos(THREE51__namespace.MathUtils.clamp(actual.dot(wanted), -1, 1))
+    const angle = THREE56__namespace.MathUtils.radToDeg(
+      Math.acos(THREE56__namespace.MathUtils.clamp(actual.dot(wanted), -1, 1))
     );
     const normalizedError = Math.max(0, angle - toleranceDegrees) / 90;
     const score = clamp01(1 - normalizedError / MATCH_FALLOFF);
@@ -13872,8 +15474,8 @@ function matchHandPose(shape, definition, context) {
     if (!handAxis || !wanted) {
       consider(0, "orientation");
     } else {
-      const angle = THREE51__namespace.MathUtils.radToDeg(
-        Math.acos(THREE51__namespace.MathUtils.clamp(handAxis.dot(wanted), -1, 1))
+      const angle = THREE56__namespace.MathUtils.radToDeg(
+        Math.acos(THREE56__namespace.MathUtils.clamp(handAxis.dot(wanted), -1, 1))
       );
       const normalizedError = Math.max(0, angle - toleranceDegrees) / 90;
       consider(clamp01(1 - normalizedError / MATCH_FALLOFF), "orientation");
@@ -13951,7 +15553,7 @@ var _XRHandPoseSystem = class _XRHandPoseSystem {
     this.trackers = /* @__PURE__ */ new Map();
     this.shapes = /* @__PURE__ */ new Map();
     /** Reused so head-relative orientation checks allocate nothing per frame. */
-    this.headPosition = new THREE51__namespace.Vector3();
+    this.headPosition = new THREE56__namespace.Vector3();
     this.elapsed = 0;
     this.warnedNoHands = false;
     this.noHandSeconds = 0;
@@ -14128,7 +15730,7 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
     const wantsColor = interactable.hoverBehavior === "color" || interactable.hoverBehavior === "both";
     this.records.set(entityId, {
       shell: wantsColor ? this.addShell(world, entityId, interactable) : null,
-      baseScale: new THREE51__namespace.Vector3(
+      baseScale: new THREE56__namespace.Vector3(
         transform.scale.x,
         transform.scale.y,
         transform.scale.z
@@ -14141,27 +15743,27 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
   addShell(world, entityId, interactable) {
     const object = world.getComponent(entityId, Object3DRef)?.object;
     if (!object) return null;
-    const material = new THREE51__namespace.MeshBasicMaterial({
-      color: new THREE51__namespace.Color(interactable.hoverColor),
+    const material = new THREE56__namespace.MeshBasicMaterial({
+      color: new THREE56__namespace.Color(interactable.hoverColor),
       // Back faces only, so the shell shows just outside the silhouette instead
       // of covering the object.
-      side: THREE51__namespace.BackSide,
+      side: THREE56__namespace.BackSide,
       transparent: true,
       opacity: 0.85,
       depthWrite: false
     });
-    const group = new THREE51__namespace.Group();
+    const group = new THREE56__namespace.Group();
     group.name = "XRHoverShell";
     group.userData[XR_HOVER_SHELL_FLAG] = true;
     group.renderOrder = 998;
     object.traverse((child) => {
-      if (!(child instanceof THREE51__namespace.Mesh) || !child.geometry) return;
+      if (!(child instanceof THREE56__namespace.Mesh) || !child.geometry) return;
       if (child.userData[XR_HOVER_SHELL_FLAG]) return;
-      const clone3 = new THREE51__namespace.Mesh(child.geometry, material);
+      const clone3 = new THREE56__namespace.Mesh(child.geometry, material);
       child.updateWorldMatrix(true, false);
       object.updateWorldMatrix(true, false);
       clone3.matrixAutoUpdate = false;
-      clone3.matrix.copy(object.matrixWorld).invert().multiply(child.matrixWorld).scale(new THREE51__namespace.Vector3(SHELL_INFLATE, SHELL_INFLATE, SHELL_INFLATE));
+      clone3.matrix.copy(object.matrixWorld).invert().multiply(child.matrixWorld).scale(new THREE56__namespace.Vector3(SHELL_INFLATE, SHELL_INFLATE, SHELL_INFLATE));
       clone3.userData[XR_HOVER_SHELL_FLAG] = true;
       clone3.raycast = () => {
       };
@@ -14210,7 +15812,7 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
     if (!shell) return;
     shell.parent?.remove(shell);
     shell.traverse((child) => {
-      if (child instanceof THREE51__namespace.Mesh) {
+      if (child instanceof THREE56__namespace.Mesh) {
         const material = child.material;
         if (Array.isArray(material)) {
           for (const entry of material) entry.dispose();
@@ -14580,6 +16182,7 @@ var _World = class _World {
     const lightSyncSystem = new LightSyncSystem();
     const materialSyncSystem = new MaterialSyncSystem();
     const vrTeleportAreaSystem = new VRTeleportAreaSystem();
+    const uiPanelSystem = new UIPanelSystem();
     const physicsSyncSystem = new PhysicsSyncSystem({
       isEditor: isEditor ?? false
     });
@@ -14610,6 +16213,7 @@ var _World = class _World {
     this.addSystems([
       ...coreSystems,
       vrTeleportAreaSystem,
+      uiPanelSystem,
       physicsSyncSystem,
       ...systems,
       objectVisibilitySystem,
@@ -14922,8 +16526,8 @@ var _World = class _World {
    * ```
    */
   raycast(origin, direction, near = 0, far = Infinity) {
-    const rayOrigin = new THREE51__namespace.Vector3(origin.x, origin.y, origin.z);
-    const rayDirection = new THREE51__namespace.Vector3(
+    const rayOrigin = new THREE56__namespace.Vector3(origin.x, origin.y, origin.z);
+    const rayDirection = new THREE56__namespace.Vector3(
       direction.x,
       direction.y,
       direction.z
@@ -14932,7 +16536,7 @@ var _World = class _World {
       return [];
     }
     rayDirection.normalize();
-    const raycaster = new THREE51__namespace.Raycaster(rayOrigin, rayDirection, near, far);
+    const raycaster = new THREE56__namespace.Raycaster(rayOrigin, rayDirection, near, far);
     const intersections = raycaster.intersectObjects(
       this.scene.children,
       true
@@ -14966,14 +16570,14 @@ var _World = class _World {
     if (!sourceObject) {
       return [];
     }
-    const rayOrigin = new THREE51__namespace.Vector3();
-    const rayDirection = new THREE51__namespace.Vector3();
+    const rayOrigin = new THREE56__namespace.Vector3();
+    const rayDirection = new THREE56__namespace.Vector3();
     sourceObject.getWorldPosition(rayOrigin);
     sourceObject.getWorldDirection(rayDirection);
     if (rayDirection.lengthSq() === 0) {
       return [];
     }
-    const raycaster = new THREE51__namespace.Raycaster(rayOrigin, rayDirection, near, far);
+    const raycaster = new THREE56__namespace.Raycaster(rayOrigin, rayDirection, near, far);
     const intersections = raycaster.intersectObjects(
       this.scene.children,
       true
@@ -15680,6 +17284,8 @@ exports.ScriptObjectSystem = ScriptObjectSystem;
 exports.TeleportAimGate = TeleportAimGate;
 exports.ThrowVelocityTracker = ThrowVelocityTracker;
 exports.TransformSyncSystem = TransformSyncSystem;
+exports.UIInteractionSystem = UIInteractionSystem;
+exports.UIPanelSystem = UIPanelSystem;
 exports.VELOCITY_SAMPLES = VELOCITY_SAMPLES;
 exports.VRTeleportAreaSystem = VRTeleportAreaSystem;
 exports.VideoSystem = VideoSystem;
@@ -15746,6 +17352,11 @@ exports.createSelectableComponent = createSelectableComponent;
 exports.createSelectionTransformStateComponent = createSelectionTransformStateComponent;
 exports.createSpriteComponent = createSpriteComponent;
 exports.createTransformComponent = createTransformComponent;
+exports.createUIButtonComponent = createUIButtonComponent;
+exports.createUIPanelComponent = createUIPanelComponent;
+exports.createUISliderComponent = createUISliderComponent;
+exports.createUITextComponent = createUITextComponent;
+exports.createUIToggleComponent = createUIToggleComponent;
 exports.createVRTeleportAreaComponent = createVRTeleportAreaComponent;
 exports.createVideoComponent = createVideoComponent;
 exports.createXRAnchorComponent = createXRAnchorComponent;