@relu-interactives/spatial-ecs 0.5.3 → 0.9.0

package/dist/factories/index.cjs

@@ -1,10 +1,26 @@
 'use strict';
 
-var THREE37 = require('three');
-var SkeletonUtils_js = require('three/examples/jsm/utils/SkeletonUtils.js');
-var RectAreaLightHelper_js = require('three/examples/jsm/helpers/RectAreaLightHelper.js');
+var THREE2 = require('three');
 var DRACOLoader_js = require('three/examples/jsm/loaders/DRACOLoader.js');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
+var meshopt_decoder_module_js = require('three/examples/jsm/libs/meshopt_decoder.module.js');
+var SkeletonUtils_js = require('three/examples/jsm/utils/SkeletonUtils.js');
+var RectAreaLightHelper_js = require('three/examples/jsm/helpers/RectAreaLightHelper.js');
+var EffectComposer_js = require('three/examples/jsm/postprocessing/EffectComposer.js');
+var RenderPass_js = require('three/examples/jsm/postprocessing/RenderPass.js');
+var UnrealBloomPass_js = require('three/examples/jsm/postprocessing/UnrealBloomPass.js');
+var DotScreenPass_js = require('three/examples/jsm/postprocessing/DotScreenPass.js');
+var GlitchPass_js = require('three/examples/jsm/postprocessing/GlitchPass.js');
+var FilmPass_js = require('three/examples/jsm/postprocessing/FilmPass.js');
+var BokehPass_js = require('three/examples/jsm/postprocessing/BokehPass.js');
+var SSAOPass_js = require('three/examples/jsm/postprocessing/SSAOPass.js');
+var ShaderPass_js = require('three/examples/jsm/postprocessing/ShaderPass.js');
+var OutputPass_js = require('three/examples/jsm/postprocessing/OutputPass.js');
+var SMAAPass_js = require('three/examples/jsm/postprocessing/SMAAPass.js');
+var HueSaturationShader_js = require('three/examples/jsm/shaders/HueSaturationShader.js');
+var RGBShiftShader_js = require('three/examples/jsm/shaders/RGBShiftShader.js');
+var SepiaShader_js = require('three/examples/jsm/shaders/SepiaShader.js');
+var VignetteShader_js = require('three/examples/jsm/shaders/VignetteShader.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopNamespace(e) {
@@ -25,7 +41,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE37__namespace = /*#__PURE__*/_interopNamespace(THREE37);
+var THREE2__namespace = /*#__PURE__*/_interopNamespace(THREE2);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -298,14 +314,14 @@ var _AnimationComponent = class _AnimationComponent extends Component {
       return;
     }
     this.importedClips = clips.map((entry) => {
-      if (entry instanceof THREE37__namespace.AnimationClip) {
+      if (entry instanceof THREE2__namespace.AnimationClip) {
         return { clip: entry, sourceUrl: null };
       }
       if (!entry || typeof entry !== "object") {
         return null;
       }
       const candidate = entry;
-      if (!(candidate.clip instanceof THREE37__namespace.AnimationClip)) {
+      if (!(candidate.clip instanceof THREE2__namespace.AnimationClip)) {
         return null;
       }
       return {
@@ -448,7 +464,8 @@ var DEFAULT_AUDIO_OPTIONS = {
   positional: false,
   refDistance: 1,
   distanceModel: "inverse",
-  rolloffFactor: 1
+  rolloffFactor: 1,
+  bus: "sfx"
 };
 var _AudioComponent = class _AudioComponent extends Component {
   constructor(path, options = {}) {
@@ -513,11 +530,11 @@ function normalizeDistanceModel(distanceModel) {
 }
 __name(normalizeDistanceModel, "normalizeDistanceModel");
 function createConfiguredAudio(listener, options) {
-  const sound = options.positional ? new THREE37__namespace.PositionalAudio(listener) : new THREE37__namespace.Audio(listener);
+  const sound = options.positional ? new THREE2__namespace.PositionalAudio(listener) : new THREE2__namespace.Audio(listener);
   sound.setLoop(options.loop);
   sound.setVolume(options.volume);
   sound.setPlaybackRate(options.pitch);
-  if (sound instanceof THREE37__namespace.PositionalAudio) {
+  if (sound instanceof THREE2__namespace.PositionalAudio) {
     sound.setRefDistance(options.refDistance);
     sound.setDistanceModel(normalizeDistanceModel(options.distanceModel));
     sound.setRolloffFactor(options.rolloffFactor);
@@ -527,16 +544,16 @@ function createConfiguredAudio(listener, options) {
 __name(createConfiguredAudio, "createConfiguredAudio");
 function createAudioEditorHelper() {
   if (typeof document === "undefined") {
-    const geometry = new THREE37__namespace.EdgesGeometry(
-      new THREE37__namespace.OctahedronGeometry(0.22, 0)
+    const geometry = new THREE2__namespace.EdgesGeometry(
+      new THREE2__namespace.OctahedronGeometry(0.22, 0)
     );
-    const material2 = new THREE37__namespace.LineBasicMaterial({
+    const material2 = new THREE2__namespace.LineBasicMaterial({
       color: "#8bc8ff",
       transparent: true,
       opacity: 0.95,
       depthTest: false
     });
-    const fallback = new THREE37__namespace.LineSegments(geometry, material2);
+    const fallback = new THREE2__namespace.LineSegments(geometry, material2);
     fallback.renderOrder = 10;
     fallback.userData.ecsHelper = true;
     fallback.visible = false;
@@ -548,7 +565,7 @@ function createAudioEditorHelper() {
   canvas.height = size;
   const ctx = canvas.getContext("2d");
   if (!ctx) {
-    return new THREE37__namespace.Object3D();
+    return new THREE2__namespace.Object3D();
   }
   ctx.clearRect(0, 0, size, size);
   ctx.fillStyle = "rgba(27, 35, 52, 0.9)";
@@ -579,14 +596,14 @@ function createAudioEditorHelper() {
   ctx.beginPath();
   ctx.arc(56, 48, 16, -0.8, 0.8);
   ctx.stroke();
-  const texture = new THREE37__namespace.CanvasTexture(canvas);
+  const texture = new THREE2__namespace.CanvasTexture(canvas);
   texture.needsUpdate = true;
-  const material = new THREE37__namespace.SpriteMaterial({
+  const material = new THREE2__namespace.SpriteMaterial({
     map: texture,
     transparent: true,
     depthTest: false
   });
-  const helper = new THREE37__namespace.Sprite(material);
+  const helper = new THREE2__namespace.Sprite(material);
   helper.scale.set(0.68, 0.68, 0.68);
   helper.renderOrder = 10;
   helper.userData.ecsHelper = true;
@@ -620,7 +637,7 @@ var DEFAULT_ORTHO_TOP = 5;
 var DEFAULT_ORTHO_BOTTOM = -5;
 var DEFAULT_ZOOM = 1;
 function inferProjection(camera) {
-  if (camera instanceof THREE37__namespace.OrthographicCamera) {
+  if (camera instanceof THREE2__namespace.OrthographicCamera) {
     return "orthographic";
   }
   return "perspective";
@@ -641,7 +658,7 @@ function readCameraFar(camera) {
 }
 __name(readCameraFar, "readCameraFar");
 function inferFov(camera) {
-  if (camera instanceof THREE37__namespace.PerspectiveCamera && Number.isFinite(camera.fov)) {
+  if (camera instanceof THREE2__namespace.PerspectiveCamera && Number.isFinite(camera.fov)) {
     return camera.fov;
   }
   return DEFAULT_FOV;
@@ -664,28 +681,28 @@ function inferFar(camera) {
 }
 __name(inferFar, "inferFar");
 function inferOrthoLeft(camera) {
-  if (camera instanceof THREE37__namespace.OrthographicCamera && Number.isFinite(camera.left)) {
+  if (camera instanceof THREE2__namespace.OrthographicCamera && Number.isFinite(camera.left)) {
     return camera.left;
   }
   return DEFAULT_ORTHO_LEFT;
 }
 __name(inferOrthoLeft, "inferOrthoLeft");
 function inferOrthoRight(camera) {
-  if (camera instanceof THREE37__namespace.OrthographicCamera && Number.isFinite(camera.right)) {
+  if (camera instanceof THREE2__namespace.OrthographicCamera && Number.isFinite(camera.right)) {
     return camera.right;
   }
   return DEFAULT_ORTHO_RIGHT;
 }
 __name(inferOrthoRight, "inferOrthoRight");
 function inferOrthoTop(camera) {
-  if (camera instanceof THREE37__namespace.OrthographicCamera && Number.isFinite(camera.top)) {
+  if (camera instanceof THREE2__namespace.OrthographicCamera && Number.isFinite(camera.top)) {
     return camera.top;
   }
   return DEFAULT_ORTHO_TOP;
 }
 __name(inferOrthoTop, "inferOrthoTop");
 function inferOrthoBottom(camera) {
-  if (camera instanceof THREE37__namespace.OrthographicCamera && Number.isFinite(camera.bottom)) {
+  if (camera instanceof THREE2__namespace.OrthographicCamera && Number.isFinite(camera.bottom)) {
     return camera.bottom;
   }
   return DEFAULT_ORTHO_BOTTOM;
@@ -701,7 +718,7 @@ __name(inferZoom, "inferZoom");
 var _CameraComponent = class _CameraComponent extends Component {
   constructor(payload = {}) {
     super();
-    this.camera = payload.camera ?? new THREE37__namespace.PerspectiveCamera();
+    this.camera = payload.camera ?? new THREE2__namespace.PerspectiveCamera();
     this.type = payload.type ?? "3d";
     this.isDefault = typeof payload.isDefault === "boolean" ? payload.isDefault : false;
     this.projection = payload.projection ?? inferProjection(payload.camera);
@@ -732,7 +749,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 THREE37__namespace.Camera ? object : void 0;
+  const objectCamera = object instanceof THREE2__namespace.Camera ? object : void 0;
   const component = new CameraComponent({
     ...payload,
     camera: payload.camera ?? objectCamera
@@ -1068,6 +1085,16 @@ function createPhysicsComponent(world, entityId, values) {
 __name(createPhysicsComponent, "createPhysicsComponent");
 
 // core/components/Environment.ts
+var DEFAULT_ENVIRONMENT_LIGHTING = {
+  envMapUrl: "",
+  envIntensity: 1,
+  envRotationY: 0,
+  useAsBackground: false,
+  backgroundBlurriness: 0,
+  backgroundIntensity: 1,
+  toneMapping: "none",
+  exposure: 1
+};
 var DEFAULT_ENVIRONMENT_STATE = {
   skybox: {
     type: "none",
@@ -1140,22 +1167,62 @@ function toFiniteNumber2(value, fallback) {
   return value;
 }
 __name(toFiniteNumber2, "toFiniteNumber");
+function normalizeImageProjection(value) {
+  return value === "screen" || value === "equirect" ? value : void 0;
+}
+__name(normalizeImageProjection, "normalizeImageProjection");
+function normalizeToneMapping(value) {
+  if (value === "none" || value === "aces" || value === "agx" || value === "neutral") {
+    return value;
+  }
+  return DEFAULT_ENVIRONMENT_LIGHTING.toneMapping;
+}
+__name(normalizeToneMapping, "normalizeToneMapping");
+function normalizeEnvironmentLighting(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return void 0;
+  }
+  const lighting = value;
+  const defaults = DEFAULT_ENVIRONMENT_LIGHTING;
+  return {
+    envMapUrl: typeof lighting.envMapUrl === "string" ? lighting.envMapUrl : defaults.envMapUrl,
+    envIntensity: Math.max(0, toFiniteNumber2(lighting.envIntensity, defaults.envIntensity)),
+    envRotationY: toFiniteNumber2(lighting.envRotationY, defaults.envRotationY),
+    useAsBackground: typeof lighting.useAsBackground === "boolean" ? lighting.useAsBackground : defaults.useAsBackground,
+    backgroundBlurriness: Math.min(
+      1,
+      Math.max(0, toFiniteNumber2(lighting.backgroundBlurriness, defaults.backgroundBlurriness))
+    ),
+    backgroundIntensity: Math.max(
+      0,
+      toFiniteNumber2(lighting.backgroundIntensity, defaults.backgroundIntensity)
+    ),
+    toneMapping: normalizeToneMapping(lighting.toneMapping),
+    exposure: Math.max(0, toFiniteNumber2(lighting.exposure, defaults.exposure))
+  };
+}
+__name(normalizeEnvironmentLighting, "normalizeEnvironmentLighting");
 var _Environment = class _Environment extends Component {
   constructor(values) {
     super();
     const skybox = values?.skybox;
     const fog = values?.fog;
     const gravity = values?.gravity;
+    const skyboxState = {
+      type: normalizeSkyboxType(skybox?.type),
+      color: typeof skybox?.color === "string" ? skybox.color : DEFAULT_ENVIRONMENT_STATE.skybox.color,
+      imageUrl: typeof skybox?.imageUrl === "string" ? skybox.imageUrl : DEFAULT_ENVIRONMENT_STATE.skybox.imageUrl,
+      gradient: {
+        colors: normalizeColors(skybox?.gradient?.colors),
+        effect: normalizeGradientEffect(skybox?.gradient?.effect)
+      }
+    };
+    const imageProjection = normalizeImageProjection(skybox?.imageProjection);
+    if (imageProjection) {
+      skyboxState.imageProjection = imageProjection;
+    }
     this.values = {
-      skybox: {
-        type: normalizeSkyboxType(skybox?.type),
-        color: typeof skybox?.color === "string" ? skybox.color : DEFAULT_ENVIRONMENT_STATE.skybox.color,
-        imageUrl: typeof skybox?.imageUrl === "string" ? skybox.imageUrl : DEFAULT_ENVIRONMENT_STATE.skybox.imageUrl,
-        gradient: {
-          colors: normalizeColors(skybox?.gradient?.colors),
-          effect: normalizeGradientEffect(skybox?.gradient?.effect)
-        }
-      },
+      skybox: skyboxState,
       fog: {
         type: normalizeFogType(fog?.type),
         color: typeof fog?.color === "string" ? fog.color : DEFAULT_ENVIRONMENT_STATE.fog.color,
@@ -1186,6 +1253,10 @@ var _Environment = class _Environment extends Component {
         DEFAULT_ENVIRONMENT_STATE.fixedTimeStep
       )
     };
+    const lighting = normalizeEnvironmentLighting(values?.lighting);
+    if (lighting) {
+      this.values.lighting = lighting;
+    }
   }
 };
 __name(_Environment, "Environment");
@@ -1290,15 +1361,15 @@ function createValueState(light) {
     castShadow: light.castShadow ?? false,
     frustumCulling: light.frustumCulled
   };
-  if (light instanceof THREE37__namespace.PointLight) {
+  if (light instanceof THREE2__namespace.PointLight) {
     base.distance = light.distance;
     base.decay = light.decay;
-  } else if (light instanceof THREE37__namespace.SpotLight) {
+  } else if (light instanceof THREE2__namespace.SpotLight) {
     base.distance = light.distance;
     base.decay = light.decay;
     base.angle = light.angle;
     base.penumbra = light.penumbra;
-  } else if (light instanceof THREE37__namespace.RectAreaLight) {
+  } else if (light instanceof THREE2__namespace.RectAreaLight) {
     base.width = light.width;
     base.height = light.height;
   }
@@ -1341,13 +1412,13 @@ function toHexColor2(value, fallback) {
 }
 __name(toHexColor2, "toHexColor");
 function getMaterialType(material) {
-  if (material instanceof THREE37__namespace.MeshPhysicalMaterial) {
+  if (material instanceof THREE2__namespace.MeshPhysicalMaterial) {
     return "physical";
   }
-  if (material instanceof THREE37__namespace.MeshPhongMaterial) {
+  if (material instanceof THREE2__namespace.MeshPhongMaterial) {
     return "phong";
   }
-  if (material instanceof THREE37__namespace.MeshBasicMaterial) {
+  if (material instanceof THREE2__namespace.MeshBasicMaterial) {
     return "basic";
   }
   return "standard";
@@ -1382,8 +1453,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 : THREE37__namespace.FrontSide,
-    blending: typeof materialRecord.blending === "number" ? materialRecord.blending : THREE37__namespace.NormalBlending,
+    side: typeof materialRecord.side === "number" ? materialRecord.side : THREE2__namespace.FrontSide,
+    blending: typeof materialRecord.blending === "number" ? materialRecord.blending : THREE2__namespace.NormalBlending,
     depthTest: materialRecord.depthTest !== false,
     depthWrite: materialRecord.depthWrite !== false,
     wireframe: Boolean(materialRecord.wireframe),
@@ -1415,7 +1486,7 @@ function createMaterialValue(material) {
       materialRecord.lightMap
     ),
     envMap: textureImageSrc(materialRecord.envMap),
-    textureFiltering: map?.magFilter === THREE37__namespace.NearestFilter ? "sharp" : "smooth",
+    textureFiltering: map?.magFilter === THREE2__namespace.NearestFilter ? "sharp" : "smooth",
     useMipmaps: map?.generateMipmaps !== false
   };
 }
@@ -1430,8 +1501,8 @@ function defaultMaterialValue() {
     opacity: 1,
     emissive: "#000000",
     emissiveIntensity: 0,
-    side: THREE37__namespace.FrontSide,
-    blending: THREE37__namespace.NormalBlending,
+    side: THREE2__namespace.FrontSide,
+    blending: THREE2__namespace.NormalBlending,
     depthTest: true,
     depthWrite: true,
     wireframe: false,
@@ -1542,11 +1613,32 @@ function createMeshGeometryComponent(world, entityId, ...args) {
 __name(createMeshGeometryComponent, "createMeshGeometryComponent");
 
 // core/components/Model.ts
+var MODEL_NO_PATH_MESSAGE = "No model path set.";
+function setModelLoadState(component, state, error) {
+  Object.defineProperty(component, "loadState", {
+    value: state,
+    writable: true,
+    configurable: true,
+    enumerable: false
+  });
+  Object.defineProperty(component, "loadError", {
+    value: state === "error" ? error ?? "Failed to load model." : void 0,
+    writable: true,
+    configurable: true,
+    enumerable: false
+  });
+}
+__name(setModelLoadState, "setModelLoadState");
 var _ModelComponent = class _ModelComponent extends Component {
   constructor(path) {
     super();
     this.path = path;
     this.object = null;
+    if (path) {
+      setModelLoadState(this, "loading");
+    } else {
+      setModelLoadState(this, "error", MODEL_NO_PATH_MESSAGE);
+    }
   }
 };
 __name(_ModelComponent, "ModelComponent");
@@ -2002,14 +2094,14 @@ var _TransformComponent = class _TransformComponent extends Component {
       z: scale.z ?? 1
     };
   }
-  toPositionVector3(target = new THREE37.Vector3()) {
+  toPositionVector3(target = new THREE2.Vector3()) {
     return target.set(this.position.x, this.position.y, this.position.z);
   }
-  toRotationEuler(target = new THREE37.Euler(), order = "XYZ") {
+  toRotationEuler(target = new THREE2.Euler(), order = "XYZ") {
     return target.set(this.rotation.x, this.rotation.y, this.rotation.z, order);
   }
-  toRotationQuaternion(target = new THREE37.Quaternion(), order = "XYZ") {
-    const euler = new THREE37.Euler(
+  toRotationQuaternion(target = new THREE2.Quaternion(), order = "XYZ") {
+    const euler = new THREE2.Euler(
       this.rotation.x,
       this.rotation.y,
       this.rotation.z,
@@ -2017,7 +2109,7 @@ var _TransformComponent = class _TransformComponent extends Component {
     );
     return target.setFromEuler(euler);
   }
-  toScaleVector3(target = new THREE37.Vector3()) {
+  toScaleVector3(target = new THREE2.Vector3()) {
     return target.set(this.scale.x, this.scale.y, this.scale.z);
   }
   setPosition(input) {
@@ -2035,8 +2127,8 @@ var _TransformComponent = class _TransformComponent extends Component {
     return this;
   }
   setRotation(input, order = "XYZ") {
-    if (input instanceof THREE37.Quaternion) {
-      const euler = new THREE37.Euler().setFromQuaternion(input, order);
+    if (input instanceof THREE2.Quaternion) {
+      const euler = new THREE2.Euler().setFromQuaternion(input, order);
       this.rotation.x = euler.x;
       this.rotation.y = euler.y;
       this.rotation.z = euler.z;
@@ -2361,6 +2453,134 @@ function createXRAnchorComponent(world, entityId, ...args) {
 }
 __name(createXRAnchorComponent, "createXRAnchorComponent");
 
+// core/components/BoneAttachment.ts
+var _BoneAttachmentComponent = class _BoneAttachmentComponent extends Component {
+  constructor(options) {
+    super();
+    this.bone = options?.bone ?? "";
+    this.humanoid = options?.humanoid ?? null;
+    this.compensateScale = options?.compensateScale ?? true;
+    this.enabled = options?.enabled ?? true;
+  }
+};
+__name(_BoneAttachmentComponent, "BoneAttachmentComponent");
+var BoneAttachmentComponent = _BoneAttachmentComponent;
+
+// core/factories/components/BoneAttachmentFactory.ts
+function createBoneAttachmentComponent(world, entityId, ...args) {
+  const component = new BoneAttachmentComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createBoneAttachmentComponent, "createBoneAttachmentComponent");
+
+// core/components/IK.ts
+function normalizeIKChain(chain) {
+  const weight = typeof chain.weight === "number" && Number.isFinite(chain.weight) ? chain.weight : 1;
+  return {
+    limb: chain.limb,
+    target: typeof chain.target === "number" ? chain.target : null,
+    pole: typeof chain.pole === "number" ? chain.pole : null,
+    weight: Math.min(1, Math.max(0, weight)),
+    matchRotation: chain.matchRotation ?? false,
+    enabled: chain.enabled ?? true
+  };
+}
+__name(normalizeIKChain, "normalizeIKChain");
+var _IKComponent = class _IKComponent extends Component {
+  constructor(options) {
+    super();
+    this.chains = (options?.chains ?? []).map(normalizeIKChain);
+    this.enabled = options?.enabled ?? true;
+  }
+};
+__name(_IKComponent, "IKComponent");
+var IKComponent = _IKComponent;
+
+// core/factories/components/IKFactory.ts
+function createIKComponent(world, entityId, ...args) {
+  const component = new IKComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createIKComponent, "createIKComponent");
+
+// core/components/Network.ts
+var _NetworkIdentityComponent = class _NetworkIdentityComponent extends Component {
+  constructor() {
+    super();
+    for (const key of ["networkId", "owner"]) {
+      Object.defineProperty(this, key, {
+        value: "",
+        writable: true,
+        configurable: true,
+        enumerable: false
+      });
+    }
+  }
+};
+__name(_NetworkIdentityComponent, "NetworkIdentityComponent");
+var NetworkIdentityComponent = _NetworkIdentityComponent;
+var _NetworkTransformComponent = class _NetworkTransformComponent extends Component {
+  constructor(options = {}) {
+    super();
+    this.enabled = true;
+    /** Updates per second the owner sends. */
+    this.sendRate = 20;
+    /** How far in the past others see it, in ms. More is smoother; less is more current. */
+    this.interpolationMs = 100;
+    this.syncRotation = true;
+    /** A jump longer than this (m) snaps instead of sliding, for respawns and teleports. */
+    this.teleportDistance = 5;
+    Object.assign(this, options);
+  }
+};
+__name(_NetworkTransformComponent, "NetworkTransformComponent");
+var NetworkTransformComponent = _NetworkTransformComponent;
+var _NetworkedPropsComponent = class _NetworkedPropsComponent extends Component {
+  constructor(values = {}) {
+    super();
+    this.values = values;
+  }
+};
+__name(_NetworkedPropsComponent, "NetworkedPropsComponent");
+var NetworkedPropsComponent = _NetworkedPropsComponent;
+var _NetworkSpawnerComponent = class _NetworkSpawnerComponent extends Component {
+  constructor(playerPrefab = "", spawnRadius = 2) {
+    super();
+    this.playerPrefab = playerPrefab;
+    this.spawnRadius = spawnRadius;
+  }
+};
+__name(_NetworkSpawnerComponent, "NetworkSpawnerComponent");
+var NetworkSpawnerComponent = _NetworkSpawnerComponent;
+
+// core/factories/components/NetworkFactory.ts
+function createNetworkIdentityComponent(world, entityId) {
+  const component = new NetworkIdentityComponent();
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createNetworkIdentityComponent, "createNetworkIdentityComponent");
+function createNetworkTransformComponent(world, entityId, ...args) {
+  const component = new NetworkTransformComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createNetworkTransformComponent, "createNetworkTransformComponent");
+function createNetworkedPropsComponent(world, entityId, ...args) {
+  const component = new NetworkedPropsComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createNetworkedPropsComponent, "createNetworkedPropsComponent");
+function createNetworkSpawnerComponent(world, entityId, ...args) {
+  const component = new NetworkSpawnerComponent(...args);
+  world.addComponent(entityId, component);
+  return component;
+}
+__name(createNetworkSpawnerComponent, "createNetworkSpawnerComponent");
+
 // core/components/XRInteractable.ts
 var _XRInteractableComponent = class _XRInteractableComponent extends Component {
   constructor(options) {
@@ -2460,6 +2680,127 @@ function createXRInteractorSideComponent(world, entityId, ...args) {
 }
 __name(createXRInteractorSideComponent, "createXRInteractorSideComponent");
 
+// core/ui/uiStyle.ts
+var isRecord = /* @__PURE__ */ __name((value) => typeof value === "object" && value !== null && !Array.isArray(value), "isRecord");
+var finite = /* @__PURE__ */ __name((value) => typeof value === "number" && Number.isFinite(value), "finite");
+var nonEmpty = /* @__PURE__ */ __name((value) => typeof value === "string" && value.length > 0, "nonEmpty");
+function normalizeStops(value) {
+  if (!Array.isArray(value)) return null;
+  const stops = [];
+  for (const stop of value) {
+    if (isRecord(stop) && finite(stop.at) && nonEmpty(stop.color)) {
+      stops.push({ at: Math.min(1, Math.max(0, stop.at)), color: stop.color });
+    }
+  }
+  return stops.length >= 2 ? stops : null;
+}
+__name(normalizeStops, "normalizeStops");
+function normalizePaint(value) {
+  if (!isRecord(value)) return void 0;
+  if (value.kind === "solid" && nonEmpty(value.color)) {
+    return { kind: "solid", color: value.color };
+  }
+  if (value.kind === "linear") {
+    const stops = normalizeStops(value.stops);
+    if (stops) {
+      return {
+        kind: "linear",
+        angle: finite(value.angle) ? value.angle : 180,
+        stops
+      };
+    }
+  }
+  if (value.kind === "radial") {
+    const stops = normalizeStops(value.stops);
+    if (stops) return { kind: "radial", stops };
+  }
+  if (value.kind === "image" && nonEmpty(value.src)) {
+    const fit = value.fit === "contain" || value.fit === "fill" ? value.fit : "cover";
+    return {
+      kind: "image",
+      src: value.src,
+      fit,
+      ...nonEmpty(value.tint) ? { tint: value.tint } : {}
+    };
+  }
+  return void 0;
+}
+__name(normalizePaint, "normalizePaint");
+function normalizeShadow(value) {
+  if (!isRecord(value) || !nonEmpty(value.color)) return void 0;
+  return {
+    x: finite(value.x) ? value.x : 0,
+    y: finite(value.y) ? value.y : 0,
+    blur: finite(value.blur) ? Math.max(0, value.blur) : 0,
+    color: value.color
+  };
+}
+__name(normalizeShadow, "normalizeShadow");
+function normalizeText(value) {
+  if (!isRecord(value)) return void 0;
+  const text = {};
+  if (nonEmpty(value.font)) text.font = value.font;
+  if (finite(value.weight)) text.weight = value.weight;
+  if (finite(value.tracking)) text.tracking = value.tracking;
+  if (value.transform === "upper" || value.transform === "lower") {
+    text.transform = value.transform;
+  }
+  const paint = normalizePaint(value.paint);
+  if (paint) text.paint = paint;
+  if (finite(value.maxLines) && value.maxLines >= 1) {
+    text.maxLines = Math.floor(value.maxLines);
+  }
+  const shadow = normalizeShadow(value.shadow);
+  if (shadow) text.shadow = shadow;
+  return Object.keys(text).length > 0 ? text : void 0;
+}
+__name(normalizeText, "normalizeText");
+function normalizeUiStyle(value) {
+  if (!isRecord(value)) return void 0;
+  const style = {};
+  const fill = normalizePaint(value.fill);
+  if (fill) style.fill = fill;
+  if (isRecord(value.border) && finite(value.border.width)) {
+    const paint = normalizePaint(value.border.paint);
+    if (paint) {
+      style.border = { width: Math.max(0, value.border.width), paint };
+    }
+  }
+  if (finite(value.radius)) {
+    style.radius = Math.max(0, value.radius);
+  } else if (Array.isArray(value.radius) && value.radius.length === 4 && value.radius.every(finite)) {
+    style.radius = value.radius.map((r) => Math.max(0, r));
+  }
+  if (Array.isArray(value.shadows)) {
+    const shadows = value.shadows.map(normalizeShadow).filter((s) => !!s);
+    if (shadows.length > 0) style.shadows = shadows;
+  }
+  if (isRecord(value.edge) && finite(value.edge.width) && nonEmpty(value.edge.color)) {
+    style.edge = {
+      width: Math.max(0, value.edge.width),
+      color: value.edge.color
+    };
+  }
+  if (finite(value.opacity)) {
+    style.opacity = Math.min(1, Math.max(0, value.opacity));
+  }
+  const text = normalizeText(value.text);
+  if (text) style.text = text;
+  return Object.keys(style).length > 0 ? style : void 0;
+}
+__name(normalizeUiStyle, "normalizeUiStyle");
+function normalizeUiTokens(value) {
+  if (!isRecord(value)) return void 0;
+  const tokens = {};
+  for (const [key, token] of Object.entries(value)) {
+    if (nonEmpty(token) && key.length > 0 && !key.includes("/")) {
+      tokens[key] = token;
+    }
+  }
+  return Object.keys(tokens).length > 0 ? tokens : void 0;
+}
+__name(normalizeUiTokens, "normalizeUiTokens");
+
 // core/components/UIButton.ts
 var _UIButtonComponent = class _UIButtonComponent extends Component {
   constructor(options) {
@@ -2476,6 +2817,13 @@ var _UIButtonComponent = class _UIButtonComponent extends Component {
     this.cornerRadius = options?.cornerRadius ?? 0.02;
     this.borderWidth = options?.borderWidth ?? 2e-3;
     this.borderColor = options?.borderColor ?? "#3a3a3a";
+    if (options?.pixelDensity !== void 0) {
+      this.pixelDensity = options.pixelDensity;
+    }
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
+    if (options?.icon) this.icon = options.icon;
+    if (options?.iconPosition) this.iconPosition = options.iconPosition;
   }
 };
 __name(_UIButtonComponent, "UIButtonComponent");
@@ -2502,6 +2850,10 @@ var _UIPanelComponent = class _UIPanelComponent extends Component {
     this.borderColor = options?.borderColor ?? "#333333";
     this.pixelDensity = options?.pixelDensity ?? 1024;
     this.follow = options?.follow ?? "world";
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
+    const tokens = normalizeUiTokens(options?.tokens);
+    if (tokens) this.tokens = tokens;
   }
 };
 __name(_UIPanelComponent, "UIPanelComponent");
@@ -2530,6 +2882,14 @@ var _UISliderComponent = class _UISliderComponent extends Component {
     this.trackColor = options?.trackColor ?? "#2a2a2a";
     this.accentColor = options?.accentColor ?? "#ff6b35";
     this.knobColor = options?.knobColor ?? "#ffffff";
+    if (options?.pixelDensity !== void 0) {
+      this.pixelDensity = options.pixelDensity;
+    }
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
+    if (options?.variant) this.variant = options.variant;
+    if (options?.step !== void 0) this.step = options.step;
+    if (options?.readOnly !== void 0) this.readOnly = options.readOnly;
   }
 };
 __name(_UISliderComponent, "UISliderComponent");
@@ -2557,6 +2917,11 @@ var _UITextComponent = class _UITextComponent extends Component {
     this.valign = options?.valign ?? "middle";
     this.lineHeight = options?.lineHeight ?? 1.25;
     this.padding = options?.padding ?? 0.01;
+    if (options?.pixelDensity !== void 0) {
+      this.pixelDensity = options.pixelDensity;
+    }
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
   }
 };
 __name(_UITextComponent, "UITextComponent");
@@ -2581,6 +2946,12 @@ var _UIToggleComponent = class _UIToggleComponent extends Component {
     this.trackColor = options?.trackColor ?? "#2a2a2a";
     this.accentColor = options?.accentColor ?? "#ff6b35";
     this.knobColor = options?.knobColor ?? "#ffffff";
+    if (options?.pixelDensity !== void 0) {
+      this.pixelDensity = options.pixelDensity;
+    }
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
+    if (options?.variant) this.variant = options.variant;
   }
 };
 __name(_UIToggleComponent, "UIToggleComponent");
@@ -2607,6 +2978,12 @@ function registerDefaultComponentFactories(objectManagementSystem) {
   objectManagementSystem.registerComponentFactory("vrTeleportArea", createVRTeleportAreaComponent);
   objectManagementSystem.registerComponentFactory("xrHandPose", createXRHandPoseComponent);
   objectManagementSystem.registerComponentFactory("xrAnchor", createXRAnchorComponent);
+  objectManagementSystem.registerComponentFactory("boneAttachment", createBoneAttachmentComponent);
+  objectManagementSystem.registerComponentFactory("ik", createIKComponent);
+  objectManagementSystem.registerComponentFactory("networkIdentity", createNetworkIdentityComponent);
+  objectManagementSystem.registerComponentFactory("networkTransform", createNetworkTransformComponent);
+  objectManagementSystem.registerComponentFactory("networkedProps", createNetworkedPropsComponent);
+  objectManagementSystem.registerComponentFactory("networkSpawner", createNetworkSpawnerComponent);
   objectManagementSystem.registerComponentFactory("uiPanel", createUIPanelComponent);
   objectManagementSystem.registerComponentFactory("uiText", createUITextComponent);
   objectManagementSystem.registerComponentFactory("uiButton", createUIButtonComponent);
@@ -2654,11 +3031,49 @@ function registerDefaultComponentFactories(objectManagementSystem) {
   objectManagementSystem.registerComponentFactory("instancedMesh", createInstancedMeshComponent);
 }
 __name(registerDefaultComponentFactories, "registerDefaultComponentFactories");
+
+// core/utils/dracoDecoderPath.ts
+var LOCAL_DRACO_DECODER_RELATIVE_PATH = "./assets/draco/";
+var DRACO_DECODER_CDN_PATH = "https://www.gstatic.com/draco/versioned/decoders/1.5.7/";
+function isBlockedBrowserFileUrl(url) {
+  return url.startsWith("file://");
+}
+__name(isBlockedBrowserFileUrl, "isBlockedBrowserFileUrl");
+function resolveDracoDecoderPath() {
+  try {
+    const resolvedPath = new URL(
+      LOCAL_DRACO_DECODER_RELATIVE_PATH,
+      (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))
+    ).toString();
+    if (isBlockedBrowserFileUrl(resolvedPath)) {
+      return DRACO_DECODER_CDN_PATH;
+    }
+    return resolvedPath;
+  } catch {
+    return DRACO_DECODER_CDN_PATH;
+  }
+}
+__name(resolveDracoDecoderPath, "resolveDracoDecoderPath");
+
+// core/utils/gltfLoader.ts
+function createGLTFLoader() {
+  const loader = new GLTFLoader_js.GLTFLoader();
+  try {
+    const dracoLoader = new DRACOLoader_js.DRACOLoader();
+    dracoLoader.setDecoderPath(resolveDracoDecoderPath());
+    loader.setDRACOLoader(dracoLoader);
+  } catch (error) {
+    console.warn("DRACOLoader could not be configured. Loading non-Draco models only.", error);
+  }
+  loader.setMeshoptDecoder(meshopt_decoder_module_js.MeshoptDecoder);
+  return loader;
+}
+__name(createGLTFLoader, "createGLTFLoader");
 var SHARED_MODEL_RESOURCE_FLAG = "spatialEcsSharedModelResource";
 var modelCache = /* @__PURE__ */ new Map();
 function markSharedResources(root) {
   root.traverse((child) => {
-    if (!(child instanceof THREE37__namespace.Mesh)) {
+    if (!(child instanceof THREE2__namespace.Mesh)) {
       return;
     }
     if (child.geometry) {
@@ -2693,7 +3108,108 @@ function cloneModelScene(scene) {
 }
 __name(cloneModelScene, "cloneModelScene");
 
+// core/factories/objects/ModelFactory.ts
+function getModelFileName(path) {
+  const segments = path.split(/[\\/]/).filter(Boolean);
+  return segments[segments.length - 1] ?? "";
+}
+__name(getModelFileName, "getModelFileName");
+function createModelLoader() {
+  return createGLTFLoader();
+}
+__name(createModelLoader, "createModelLoader");
+function createModel({
+  world,
+  scene,
+  payload,
+  isEditor
+}) {
+  const anchor = new THREE2__namespace.Object3D();
+  const modelPath = payload.path ?? "";
+  const entityId = createBaseEntity(world, anchor, {
+    label: payload.name ?? "Model",
+    entityType: "model",
+    transformInput: payload.transform
+  });
+  const model = createModelComponent(world, entityId, modelPath);
+  createMeshGeometryComponent(world, entityId, "model", anchor, {}, {
+    modelName: getModelFileName(modelPath),
+    castShadow: false,
+    receiveShadow: false
+  });
+  model.object = anchor;
+  scene.add(anchor);
+  if (!modelPath) {
+    return entityId;
+  }
+  setModelLoadState(model, "loading");
+  loadModelInto({ world, entityId, anchor, modelPath, isEditor: Boolean(isEditor) });
+  return entityId;
+}
+__name(createModel, "createModel");
+function loadModelInto({
+  world,
+  entityId,
+  anchor,
+  modelPath,
+  isEditor
+}) {
+  const model = world.getComponent(entityId, ModelComponent);
+  const meshGeometry = world.getComponent(entityId, MeshGeometryComponent);
+  if (!model) return;
+  const attachLoadedModel = /* @__PURE__ */ __name((gltf, object) => {
+    if (!world.hasEntity(entityId) || world.getComponent(entityId, ModelComponent) !== model) {
+      return;
+    }
+    object.userData.entityId = entityId;
+    object.traverse((child) => {
+      child.userData.entityId = entityId;
+    });
+    anchor.add(object);
+    model.object = object;
+    if (meshGeometry) meshGeometry.object = object;
+    if (gltf.animations.length > 0) {
+      let animation = world.getComponent(entityId, AnimationComponent);
+      if (!animation) {
+        animation = createAnimationComponent(world, entityId, {
+          clips: gltf.animations,
+          externalClipSources: [],
+          paused: false,
+          reverse: false,
+          timeScale: 1,
+          crossFadeDuration: 0
+        });
+      }
+      animation.setModelClips(gltf.animations);
+    }
+    setModelLoadState(model, "loaded");
+  }, "attachLoadedModel");
+  const onLoadError = /* @__PURE__ */ __name((error) => {
+    const message = error instanceof Error && error.message ? error.message : typeof error === "string" && error ? error : `Failed to load model: ${modelPath}`;
+    setModelLoadState(model, "error", message);
+    console.error(`Failed to load model: ${modelPath}`, error);
+  }, "onLoadError");
+  if (isEditor) {
+    createModelLoader().load(
+      modelPath,
+      (gltf) => attachLoadedModel(gltf, gltf.scene),
+      void 0,
+      onLoadError
+    );
+  } else {
+    loadSharedGltf(
+      modelPath,
+      () => new Promise((resolve, reject) => {
+        createModelLoader().load(modelPath, resolve, void 0, reject);
+      })
+    ).then((gltf) => attachLoadedModel(gltf, cloneModelScene(gltf.scene))).catch(onLoadError);
+  }
+}
+__name(loadModelInto, "loadModelInto");
+
 // core/systems/ObjectManagementSystem.ts
+new THREE2__namespace.Vector3();
+new THREE2__namespace.Vector3();
 function createTransform(input) {
   return new TransformComponent(input);
 }
@@ -2732,10 +3248,10 @@ __name(createBaseEntity, "createBaseEntity");
 // core/factories/objects/AudioFactory.ts
 function getOrCreateListener(camera) {
   const existing = camera.userData.ecsAudioListener;
-  if (existing instanceof THREE37__namespace.AudioListener) {
+  if (existing instanceof THREE2__namespace.AudioListener) {
     return existing;
   }
-  const listener = new THREE37__namespace.AudioListener();
+  const listener = new THREE2__namespace.AudioListener();
   camera.add(listener);
   camera.userData.ecsAudioListener = listener;
   return listener;
@@ -2748,7 +3264,7 @@ function createAudio({
   payload,
   isEditor
 }) {
-  const anchor = new THREE37__namespace.Object3D();
+  const anchor = new THREE2__namespace.Object3D();
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Audio",
     entityType: "audio",
@@ -2770,7 +3286,7 @@ function createAudio({
     return entityId;
   }
   if (!isEditor) {
-    const loader = new THREE37__namespace.AudioLoader();
+    const loader = new THREE2__namespace.AudioLoader();
     loader.load(
       audio.path,
       (buffer) => {
@@ -2845,7 +3361,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 THREE37__namespace.PerspectiveCamera) {
+  if (camera instanceof THREE2__namespace.PerspectiveCamera) {
     if (!projection || projection === "perspective") {
       camera.fov = typeof options.fov === "number" ? options.fov : DEFAULT_FOV2;
     }
@@ -2855,7 +3371,7 @@ function applyCameraSettings(camera, options) {
     camera.updateProjectionMatrix();
     return;
   }
-  if (camera instanceof THREE37__namespace.OrthographicCamera) {
+  if (camera instanceof THREE2__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;
@@ -2876,7 +3392,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 THREE37__namespace.OrthographicCamera(
+    const camera = new THREE2__namespace.OrthographicCamera(
       left,
       right,
       top,
@@ -2888,7 +3404,7 @@ function createCameraObject(options) {
     camera.updateProjectionMatrix();
     return camera;
   }
-  return new THREE37__namespace.PerspectiveCamera(
+  return new THREE2__namespace.PerspectiveCamera(
     options.fov ?? DEFAULT_FOV2,
     readViewportAspect(),
     near,
@@ -2906,7 +3422,7 @@ function createCamera({ world, scene, camera, payload, isEditor }) {
     transformInput: payload.transform
   });
   const objectRef = world.getComponent(entityId, Object3DRef);
-  if (objectRef?.object instanceof THREE37__namespace.Camera) {
+  if (objectRef?.object instanceof THREE2__namespace.Camera) {
     objectRef.object.userData.entityId = entityId;
   }
   const componentOptions = {
@@ -2938,9 +3454,9 @@ function createCapsule({
   scene,
   payload
 }) {
-  const geometry = new THREE37__namespace.CapsuleGeometry(0.5, 1, 4, 8);
-  const material = new THREE37__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE37__namespace.Mesh(geometry, material);
+  const geometry = new THREE2__namespace.CapsuleGeometry(0.5, 1, 4, 8);
+  const material = new THREE2__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE2__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Capsule",
     entityType: "capsule",
@@ -2960,9 +3476,9 @@ function createCapsule({
 }
 __name(createCapsule, "createCapsule");
 function createCube({ world, scene, payload }) {
-  const geometry = new THREE37__namespace.BoxGeometry(1, 1, 1);
-  const material = new THREE37__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE37__namespace.Mesh(geometry, material);
+  const geometry = new THREE2__namespace.BoxGeometry(1, 1, 1);
+  const material = new THREE2__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE2__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Cube",
     entityType: "cube",
@@ -2987,9 +3503,9 @@ function createCylinder({
   scene,
   payload
 }) {
-  const geometry = new THREE37__namespace.CylinderGeometry(0.5, 0.5, 1, 20);
-  const material = new THREE37__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE37__namespace.Mesh(geometry, material);
+  const geometry = new THREE2__namespace.CylinderGeometry(0.5, 0.5, 1, 20);
+  const material = new THREE2__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE2__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Cylinder",
     entityType: "cylinder",
@@ -3009,7 +3525,7 @@ function createCylinder({
 }
 __name(createCylinder, "createCylinder");
 function createEmpty({ world, scene, payload, isEditor }) {
-  const object = new THREE37__namespace.Group();
+  const object = new THREE2__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Empty",
     entityType: "empty",
@@ -3020,7 +3536,7 @@ function createEmpty({ world, scene, payload, isEditor }) {
 }
 __name(createEmpty, "createEmpty");
 function createImage({ world, scene, payload }) {
-  const anchor = new THREE37__namespace.Object3D();
+  const anchor = new THREE2__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Image",
@@ -3033,7 +3549,7 @@ function createImage({ world, scene, payload }) {
   if (!imagePath) {
     return entityId;
   }
-  const loader = new THREE37__namespace.TextureLoader();
+  const loader = new THREE2__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -3041,13 +3557,13 @@ function createImage({ world, scene, payload }) {
         texture.dispose();
         return;
       }
-      const material = new THREE37__namespace.MeshBasicMaterial({
+      const material = new THREE2__namespace.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE37__namespace.DoubleSide
+        side: THREE2__namespace.DoubleSide
       });
-      const geometry = new THREE37__namespace.PlaneGeometry(1, 1);
-      const plane = new THREE37__namespace.Mesh(geometry, material);
+      const geometry = new THREE2__namespace.PlaneGeometry(1, 1);
+      const plane = new THREE2__namespace.Mesh(geometry, material);
       plane.userData.entityId = entityId;
       const textureImage = texture.image;
       const width = textureImage?.width ?? 1;
@@ -3093,7 +3609,7 @@ function createImageTarget({
   payload,
   isEditor
 }) {
-  const anchor = new THREE37__namespace.Object3D();
+  const anchor = new THREE2__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Image Target",
@@ -3110,7 +3626,7 @@ function createImageTarget({
   if (!isEditor || !imagePath) {
     return entityId;
   }
-  const loader = new THREE37__namespace.TextureLoader();
+  const loader = new THREE2__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -3118,13 +3634,13 @@ function createImageTarget({
         texture.dispose();
         return;
       }
-      const material = new THREE37__namespace.MeshBasicMaterial({
+      const material = new THREE2__namespace.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE37__namespace.DoubleSide
+        side: THREE2__namespace.DoubleSide
       });
-      const geometry = new THREE37__namespace.PlaneGeometry(1, 1);
-      const plane = new THREE37__namespace.Mesh(geometry, material);
+      const geometry = new THREE2__namespace.PlaneGeometry(1, 1);
+      const plane = new THREE2__namespace.Mesh(geometry, material);
       plane.userData.entityId = entityId;
       const textureImage = texture.image;
       const width = textureImage?.width ?? 1;
@@ -3175,7 +3691,7 @@ function createInstancedMesh({
   scene,
   payload
 }) {
-  const anchor = new THREE37__namespace.Object3D();
+  const anchor = new THREE2__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;
@@ -3246,7 +3762,7 @@ function createAmbientLight({
   scene,
   payload
 }) {
-  const light = new THREE37__namespace.AmbientLight("#ffffff", 0.6);
+  const light = new THREE2__namespace.AmbientLight("#ffffff", 0.6);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Ambient Light",
     entityType: "ambientLight",
@@ -3257,13 +3773,272 @@ function createAmbientLight({
   return entityId;
 }
 __name(createAmbientLight, "createAmbientLight");
+var PixelationShader = {
+  name: "PixelationShader",
+  uniforms: {
+    tDiffuse: { value: null },
+    resolution: { value: new THREE2__namespace.Vector2(1, 1) },
+    pixelSize: { value: 6 }
+  },
+  vertexShader: (
+    /* glsl */
+    `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `
+  ),
+  fragmentShader: (
+    /* glsl */
+    `
+    uniform sampler2D tDiffuse;
+    uniform vec2 resolution;
+    uniform float pixelSize;
+    varying vec2 vUv;
+    void main() {
+      vec2 block = max(pixelSize, 1.0) / resolution;
+      vec2 coord = block * (floor(vUv / block) + 0.5);
+      gl_FragColor = texture2D(tDiffuse, coord);
+    }
+  `
+  )
+};
+var _PixelationPass = class _PixelationPass extends ShaderPass_js.ShaderPass {
+  constructor(granularity, getPixelRatio) {
+    super(PixelationShader);
+    this.granularity = Math.max(1, granularity);
+    this.getPixelRatio = getPixelRatio;
+    this.updatePixelSize();
+  }
+  updatePixelSize() {
+    const uniform = this.uniforms.pixelSize;
+    if (uniform) {
+      uniform.value = this.granularity * Math.max(1, this.getPixelRatio());
+    }
+  }
+  setSize(width, height) {
+    const resolution = this.uniforms.resolution;
+    if (resolution) {
+      resolution.value.set(Math.max(1, width), Math.max(1, height));
+    }
+    this.updatePixelSize();
+  }
+};
+__name(_PixelationPass, "PixelationPass");
+var PixelationPass = _PixelationPass;
+function createWebglPostprocessing({
+  renderer: rendererInput,
+  scene,
+  camera,
+  values
+}) {
+  const renderer = rendererInput;
+  const composer = new EffectComposer_js.EffectComposer(renderer);
+  composer.addPass(new RenderPass_js.RenderPass(scene, camera));
+  if (values.dof.enabled) {
+    composer.addPass(
+      new BokehPass_js.BokehPass(scene, camera, {
+        focus: values.dof.focusDistance,
+        aperture: Math.max(0, values.dof.focalLength),
+        maxblur: Math.max(0, values.dof.bokehScale)
+      })
+    );
+  }
+  if (values.bloom.enabled) {
+    const size = renderer.getSize(new THREE2__namespace.Vector2());
+    composer.addPass(
+      new UnrealBloomPass_js.UnrealBloomPass(
+        new THREE2__namespace.Vector2(size.width, size.height),
+        values.bloom.intensity,
+        values.bloom.radius,
+        values.bloom.threshold
+      )
+    );
+  }
+  if (values.vignette.enabled) {
+    const pass = new ShaderPass_js.ShaderPass(VignetteShader_js.VignetteShader);
+    const offset = pass.uniforms.offset;
+    const darkness = pass.uniforms.darkness;
+    if (offset) {
+      offset.value = values.vignette.offset;
+    }
+    if (darkness) {
+      darkness.value = values.vignette.darkness;
+    }
+    composer.addPass(pass);
+  }
+  if (values.hueSaturation.enabled) {
+    const pass = new ShaderPass_js.ShaderPass(HueSaturationShader_js.HueSaturationShader);
+    const hue = pass.uniforms.hue;
+    const saturation = pass.uniforms.saturation;
+    if (hue) {
+      hue.value = values.hueSaturation.hue;
+    }
+    if (saturation) {
+      saturation.value = values.hueSaturation.saturation;
+    }
+    composer.addPass(pass);
+  }
+  if (values.sepia.enabled) {
+    const pass = new ShaderPass_js.ShaderPass(SepiaShader_js.SepiaShader);
+    const amount = pass.uniforms.amount;
+    if (amount) {
+      amount.value = values.sepia.intensity;
+    }
+    composer.addPass(pass);
+  }
+  if (values.noise.enabled) {
+    composer.addPass(new FilmPass_js.FilmPass(values.noise.opacity));
+  }
+  if (values.dotScreen.enabled) {
+    composer.addPass(
+      new DotScreenPass_js.DotScreenPass(
+        new THREE2__namespace.Vector2(0, 0),
+        values.dotScreen.angle ?? values.dotScreen.dotScreenAngle,
+        values.dotScreen.scale ?? values.dotScreen.dotScreenScale
+      )
+    );
+  }
+  if (values.ssao.enabled) {
+    const pass = new SSAOPass_js.SSAOPass(scene, camera);
+    pass.kernelRadius = values.ssao.radius;
+    pass.minDistance = 1e-3;
+    pass.maxDistance = Math.max(0.01, values.ssao.intensity);
+    composer.addPass(pass);
+  }
+  if (values.glitch.enabled) {
+    const pass = new GlitchPass_js.GlitchPass();
+    pass.enabled = true;
+    pass.goWild = Boolean(values.glitch.active);
+    composer.addPass(pass);
+  }
+  if (values.chromAberration.enabled) {
+    const pass = new ShaderPass_js.ShaderPass(RGBShiftShader_js.RGBShiftShader);
+    const { offsetX, offsetY } = values.chromAberration;
+    const amount = pass.uniforms.amount;
+    const angle = pass.uniforms.angle;
+    if (amount) {
+      amount.value = Math.hypot(offsetX, offsetY);
+    }
+    if (angle) {
+      angle.value = Math.atan2(offsetY, offsetX);
+    }
+    composer.addPass(pass);
+  }
+  if (values.pixelation.enabled) {
+    composer.addPass(
+      new PixelationPass(
+        values.pixelation.granularity,
+        () => typeof renderer.getPixelRatio === "function" ? renderer.getPixelRatio() : 1
+      )
+    );
+  }
+  if (values.smaa.enabled) {
+    composer.addPass(new SMAAPass_js.SMAAPass());
+  }
+  composer.addPass(new OutputPass_js.OutputPass());
+  return composer;
+}
+__name(createWebglPostprocessing, "createWebglPostprocessing");
+var CHROMA_KEY_FLAG = "ecsChromaKey";
+function createWebglChromaKeyMaterial(texture, options) {
+  const material = new THREE2__namespace.ShaderMaterial({
+    uniforms: {
+      tex: { value: texture },
+      keyColor: { value: new THREE2__namespace.Color(options.keyColor) },
+      similarity: { value: options.similarity },
+      smoothness: { value: options.smoothness },
+      spill: { value: options.spill }
+    },
+    vertexShader: `
+      varying vec2 vUv;
+      void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform sampler2D tex;
+      uniform vec3 keyColor;
+      uniform float similarity;
+      uniform float smoothness;
+      uniform float spill;
+      varying vec2 vUv;
+
+      void main() {
+        vec4 texel = texture2D(tex, vUv);
+        float chromaDist = distance(texel.rgb, keyColor);
+        float alpha = smoothstep(similarity, similarity + smoothness, chromaDist);
+
+        float spillFactor = smoothstep(similarity, similarity + spill + smoothness, chromaDist);
+        vec3 despilled = mix(vec3(dot(texel.rgb, vec3(0.299, 0.587, 0.114))), texel.rgb, spillFactor);
+
+        gl_FragColor = vec4(despilled, texel.a * alpha);
+      }
+    `,
+    transparent: true,
+    side: THREE2__namespace.DoubleSide
+  });
+  material.userData[CHROMA_KEY_FLAG] = true;
+  return material;
+}
+__name(createWebglChromaKeyMaterial, "createWebglChromaKeyMaterial");
+function updateWebglChromaKeyMaterial(material, options) {
+  if (!(material instanceof THREE2__namespace.ShaderMaterial)) return false;
+  const { keyColor, similarity, smoothness, spill } = material.uniforms;
+  if (!keyColor || !similarity || !smoothness || !spill) return false;
+  keyColor.value.set(options.keyColor);
+  similarity.value = options.similarity;
+  smoothness.value = options.smoothness;
+  spill.value = options.spill;
+  return true;
+}
+__name(updateWebglChromaKeyMaterial, "updateWebglChromaKeyMaterial");
+var areaLightTablesRequested = false;
+function prepareWebglAreaLights() {
+  if (areaLightTablesRequested) return;
+  areaLightTablesRequested = true;
+  import('three/examples/jsm/lights/RectAreaLightUniformsLib.js').then(
+    ({ RectAreaLightUniformsLib }) => {
+      RectAreaLightUniformsLib.init();
+    },
+    (error) => {
+      areaLightTablesRequested = false;
+      console.warn("[spatial-ecs] Could not load the area light tables.", error);
+    }
+  );
+}
+__name(prepareWebglAreaLights, "prepareWebglAreaLights");
+var webglBackend = {
+  kind: "webgl",
+  prepareAreaLights: prepareWebglAreaLights,
+  createPostprocessing: createWebglPostprocessing,
+  createChromaKeyMaterial: createWebglChromaKeyMaterial,
+  updateChromaKeyMaterial: updateWebglChromaKeyMaterial
+};
+
+// core/render/resolveBackend.ts
+function readWorldRenderBackend(world) {
+  const getter = world?.getRenderBackend;
+  if (typeof getter === "function") {
+    const backend = getter.call(world);
+    if (backend) return backend;
+  }
+  return webglBackend;
+}
+__name(readWorldRenderBackend, "readWorldRenderBackend");
+
+// core/factories/objects/lights/AreaLightFactory.ts
 function createAreaLight({
   world,
   scene,
   payload,
   isEditor
 }) {
-  const light = new THREE37__namespace.RectAreaLight("#ffffff", 5, 4, 4);
+  readWorldRenderBackend(world).prepareAreaLights?.(world);
+  const light = new THREE2__namespace.RectAreaLight("#ffffff", 5, 4, 4);
   light.lookAt(0, 0, 0);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Area Light",
@@ -3292,7 +4067,7 @@ function createDirectionalLight({
   payload,
   isEditor
 }) {
-  const light = new THREE37__namespace.DirectionalLight("#ffffff", 1.5);
+  const light = new THREE2__namespace.DirectionalLight("#ffffff", 1.5);
   light.castShadow = true;
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Directional Light",
@@ -3303,7 +4078,7 @@ function createDirectionalLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE37__namespace.DirectionalLightHelper(light, 1.8, "#38bdf8");
+    const helper = new THREE2__namespace.DirectionalLightHelper(light, 1.8, "#38bdf8");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -3321,7 +4096,7 @@ function createPointLight({
   payload,
   isEditor
 }) {
-  const light = new THREE37__namespace.PointLight("#ffffff", 1, 10);
+  const light = new THREE2__namespace.PointLight("#ffffff", 1, 10);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Point Light",
     entityType: "pointLight",
@@ -3331,7 +4106,7 @@ function createPointLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE37__namespace.PointLightHelper(light, 0.35, "#fbbf24");
+    const helper = new THREE2__namespace.PointLightHelper(light, 0.35, "#fbbf24");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -3349,7 +4124,7 @@ function createSpotLight({
   payload,
   isEditor
 }) {
-  const light = new THREE37__namespace.SpotLight("#ffffff", 1, 20, Math.PI / 6, 0.1, 1);
+  const light = new THREE2__namespace.SpotLight("#ffffff", 1, 20, Math.PI / 6, 0.1, 1);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Spot Light",
     entityType: "spotLight",
@@ -3359,7 +4134,7 @@ function createSpotLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE37__namespace.SpotLightHelper(light, "#f59e0b");
+    const helper = new THREE2__namespace.SpotLightHelper(light, "#f59e0b");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -3371,126 +4146,13 @@ function createSpotLight({
   return entityId;
 }
 __name(createSpotLight, "createSpotLight");
-
-// core/utils/dracoDecoderPath.ts
-var LOCAL_DRACO_DECODER_RELATIVE_PATH = "./assets/draco/";
-var DRACO_DECODER_CDN_PATH = "https://www.gstatic.com/draco/versioned/decoders/1.5.7/";
-function isBlockedBrowserFileUrl(url) {
-  return url.startsWith("file://");
-}
-__name(isBlockedBrowserFileUrl, "isBlockedBrowserFileUrl");
-function resolveDracoDecoderPath() {
-  try {
-    const resolvedPath = new URL(
-      LOCAL_DRACO_DECODER_RELATIVE_PATH,
-      (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))
-    ).toString();
-    if (isBlockedBrowserFileUrl(resolvedPath)) {
-      return DRACO_DECODER_CDN_PATH;
-    }
-    return resolvedPath;
-  } catch {
-    return DRACO_DECODER_CDN_PATH;
-  }
-}
-__name(resolveDracoDecoderPath, "resolveDracoDecoderPath");
-
-// core/factories/objects/ModelFactory.ts
-function getModelFileName(path) {
-  const segments = path.split(/[\\/]/).filter(Boolean);
-  return segments[segments.length - 1] ?? "";
-}
-__name(getModelFileName, "getModelFileName");
-function createModelLoader() {
-  const loader = new GLTFLoader_js.GLTFLoader();
-  try {
-    const dracoLoader = new DRACOLoader_js.DRACOLoader();
-    dracoLoader.setDecoderPath(resolveDracoDecoderPath());
-    loader.setDRACOLoader(dracoLoader);
-  } catch (error) {
-    console.warn("DRACOLoader could not be configured. Loading non-Draco models only.", error);
-  }
-  return loader;
-}
-__name(createModelLoader, "createModelLoader");
-function createModel({
-  world,
-  scene,
-  payload,
-  isEditor
-}) {
-  const anchor = new THREE37__namespace.Object3D();
-  const modelPath = payload.path ?? "";
-  const entityId = createBaseEntity(world, anchor, {
-    label: payload.name ?? "Model",
-    entityType: "model",
-    transformInput: payload.transform
-  });
-  const model = createModelComponent(world, entityId, modelPath);
-  const meshGeometry = createMeshGeometryComponent(world, entityId, "model", anchor, {}, {
-    modelName: getModelFileName(modelPath),
-    castShadow: false,
-    receiveShadow: false
-  });
-  model.object = anchor;
-  scene.add(anchor);
-  if (!modelPath) {
-    return entityId;
-  }
-  const attachLoadedModel = /* @__PURE__ */ __name((gltf, object) => {
-    if (!world.hasEntity(entityId)) {
-      return;
-    }
-    object.userData.entityId = entityId;
-    object.traverse((child) => {
-      child.userData.entityId = entityId;
-    });
-    anchor.add(object);
-    model.object = object;
-    meshGeometry.object = object;
-    if (gltf.animations.length > 0) {
-      let animation = world.getComponent(entityId, AnimationComponent);
-      if (!animation) {
-        animation = createAnimationComponent(world, entityId, {
-          clips: gltf.animations,
-          externalClipSources: [],
-          paused: false,
-          reverse: false,
-          timeScale: 1,
-          crossFadeDuration: 0
-        });
-      }
-      animation.setModelClips(gltf.animations);
-    }
-  }, "attachLoadedModel");
-  const onLoadError = /* @__PURE__ */ __name((error) => {
-    console.error(`Failed to load model: ${modelPath}`, error);
-  }, "onLoadError");
-  if (isEditor) {
-    createModelLoader().load(
-      modelPath,
-      (gltf) => attachLoadedModel(gltf, gltf.scene),
-      void 0,
-      onLoadError
-    );
-  } else {
-    loadSharedGltf(
-      modelPath,
-      () => new Promise((resolve, reject) => {
-        createModelLoader().load(modelPath, resolve, void 0, reject);
-      })
-    ).then((gltf) => attachLoadedModel(gltf, cloneModelScene(gltf.scene))).catch(onLoadError);
-  }
-  return entityId;
-}
-__name(createModel, "createModel");
 function createPlane({ world, scene, payload }) {
-  const geometry = new THREE37__namespace.PlaneGeometry(100, 100);
-  const material = new THREE37__namespace.MeshStandardMaterial({
+  const geometry = new THREE2__namespace.PlaneGeometry(100, 100);
+  const material = new THREE2__namespace.MeshStandardMaterial({
     color: "#ffffff",
-    side: THREE37__namespace.DoubleSide
+    side: THREE2__namespace.DoubleSide
   });
-  const mesh = new THREE37__namespace.Mesh(geometry, material);
+  const mesh = new THREE2__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(
     world,
     mesh,
@@ -3526,7 +4188,7 @@ function createScriptObject({
   scene,
   payload
 }) {
-  const object = new THREE37__namespace.Group();
+  const object = new THREE2__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Script Object",
     entityType: "scriptObject",
@@ -3551,15 +4213,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 THREE37__namespace.PlaneGeometry(width, depth);
-  const material = new THREE37__namespace.MeshBasicMaterial({
+  const geometry = new THREE2__namespace.PlaneGeometry(width, depth);
+  const material = new THREE2__namespace.MeshBasicMaterial({
     color: "#4da3ff",
     transparent: true,
     opacity: 0.18,
-    side: THREE37__namespace.DoubleSide,
+    side: THREE2__namespace.DoubleSide,
     depthWrite: false
   });
-  const object = new THREE37__namespace.Mesh(geometry, material);
+  const object = new THREE2__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Teleport Area",
     entityType: "teleportArea",
@@ -3587,7 +4249,7 @@ function createXRInteractor({
   scene,
   payload
 }) {
-  const root = new THREE37__namespace.Group();
+  const root = new THREE2__namespace.Group();
   const options = payload.options ?? {};
   const entityId = createBaseEntity(world, root, {
     label: payload.name ?? "XR Interactor",
@@ -3600,7 +4262,7 @@ function createXRInteractor({
     return entityId;
   }
   for (const side of ["left", "right"]) {
-    const slot = new THREE37__namespace.Group();
+    const slot = new THREE2__namespace.Group();
     const label = side === "left" ? "Left Interactor" : "Right Interactor";
     const slotEntityId = createBaseEntity(world, slot, {
       label,
@@ -3618,7 +4280,7 @@ function createUIButton({
   scene,
   payload
 }) {
-  const object = new THREE37__namespace.Group();
+  const object = new THREE2__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Button",
     entityType: "uiButton",
@@ -3643,7 +4305,7 @@ function createUIPanel({
   scene,
   payload
 }) {
-  const object = new THREE37__namespace.Group();
+  const object = new THREE2__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Panel",
     entityType: "uiPanel",
@@ -3660,7 +4322,7 @@ function createUISlider({
   scene,
   payload
 }) {
-  const object = new THREE37__namespace.Group();
+  const object = new THREE2__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Slider",
     entityType: "uiSlider",
@@ -3685,7 +4347,7 @@ function createUIText({
   scene,
   payload
 }) {
-  const object = new THREE37__namespace.Group();
+  const object = new THREE2__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Text",
     entityType: "uiText",
@@ -3702,7 +4364,7 @@ function createUIToggle({
   scene,
   payload
 }) {
-  const object = new THREE37__namespace.Group();
+  const object = new THREE2__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Toggle",
     entityType: "uiToggle",
@@ -3727,7 +4389,7 @@ function createXRRig({
   scene,
   payload
 }) {
-  const object = new THREE37__namespace.Group();
+  const object = new THREE2__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "XR Rig",
     entityType: "xrRig",
@@ -3740,7 +4402,7 @@ function createXRRig({
 }
 __name(createXRRig, "createXRRig");
 function createSprite({ world, scene, payload }) {
-  const anchor = new THREE37__namespace.Object3D();
+  const anchor = new THREE2__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Sprite",
@@ -3752,7 +4414,7 @@ function createSprite({ world, scene, payload }) {
   if (!imagePath) {
     return entityId;
   }
-  const loader = new THREE37__namespace.TextureLoader();
+  const loader = new THREE2__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -3760,11 +4422,11 @@ function createSprite({ world, scene, payload }) {
         texture.dispose();
         return;
       }
-      const material = new THREE37__namespace.SpriteMaterial({
+      const material = new THREE2__namespace.SpriteMaterial({
         map: texture,
         transparent: true
       });
-      const sprite = new THREE37__namespace.Sprite(material);
+      const sprite = new THREE2__namespace.Sprite(material);
       sprite.userData.entityId = entityId;
       const textureImage = texture.image;
       spriteComponent.width = textureImage?.width ?? 1;
@@ -3782,9 +4444,9 @@ function createSprite({ world, scene, payload }) {
 }
 __name(createSprite, "createSprite");
 function createSphere({ world, scene, payload }) {
-  const geometry = new THREE37__namespace.SphereGeometry(0.5, 24, 24);
-  const material = new THREE37__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE37__namespace.Mesh(geometry, material);
+  const geometry = new THREE2__namespace.SphereGeometry(0.5, 24, 24);
+  const material = new THREE2__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE2__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Sphere",
     entityType: "sphere",
@@ -3804,10 +4466,10 @@ function createSphere({ world, scene, payload }) {
 __name(createSphere, "createSphere");
 function getOrCreateListener2(camera) {
   const existing = camera.userData.ecsAudioListener;
-  if (existing instanceof THREE37__namespace.AudioListener) {
+  if (existing instanceof THREE2__namespace.AudioListener) {
     return existing;
   }
-  const listener = new THREE37__namespace.AudioListener();
+  const listener = new THREE2__namespace.AudioListener();
   camera.add(listener);
   camera.userData.ecsAudioListener = listener;
   return listener;
@@ -3856,58 +4518,23 @@ function normalizeOptions(input) {
   };
 }
 __name(normalizeOptions, "normalizeOptions");
-function createChromaMaterial(texture, options) {
-  return new THREE37__namespace.ShaderMaterial({
-    uniforms: {
-      tex: { value: texture },
-      keyColor: { value: new THREE37__namespace.Color(options.backgroundColor) },
-      similarity: { value: options.similarity },
-      smoothness: { value: options.smoothness },
-      spill: { value: options.spill }
-    },
-    vertexShader: `
-      varying vec2 vUv;
-      void main() {
-        vUv = uv;
-        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-      }
-    `,
-    fragmentShader: `
-      uniform sampler2D tex;
-      uniform vec3 keyColor;
-      uniform float similarity;
-      uniform float smoothness;
-      uniform float spill;
-      varying vec2 vUv;
-
-      void main() {
-        vec4 texel = texture2D(tex, vUv);
-        float chromaDist = distance(texel.rgb, keyColor);
-        float alpha = smoothstep(similarity, similarity + smoothness, chromaDist);
-
-        float spillFactor = smoothstep(similarity, similarity + spill + smoothness, chromaDist);
-        vec3 despilled = mix(vec3(dot(texel.rgb, vec3(0.299, 0.587, 0.114))), texel.rgb, spillFactor);
-
-        gl_FragColor = vec4(despilled, texel.a * alpha);
-      }
-    `,
-    transparent: true,
-    side: THREE37__namespace.DoubleSide
-  });
-}
-__name(createChromaMaterial, "createChromaMaterial");
 function createStandardMaterial(texture) {
-  return new THREE37__namespace.MeshBasicMaterial({
+  return new THREE2__namespace.MeshBasicMaterial({
     map: texture,
     transparent: true,
-    side: THREE37__namespace.DoubleSide
+    side: THREE2__namespace.DoubleSide
   });
 }
 __name(createStandardMaterial, "createStandardMaterial");
-function createVideoMesh(entityId, texture, options) {
-  const geometry = new THREE37__namespace.PlaneGeometry(1, 1);
-  const material = options.isGreenScreen ? createChromaMaterial(texture, options) : createStandardMaterial(texture);
-  const mesh = new THREE37__namespace.Mesh(geometry, material);
+function createVideoMesh(entityId, texture, options, backend) {
+  const geometry = new THREE2__namespace.PlaneGeometry(1, 1);
+  const material = options.isGreenScreen ? backend.createChromaKeyMaterial(texture, {
+    keyColor: options.backgroundColor,
+    similarity: options.similarity,
+    smoothness: options.smoothness,
+    spill: options.spill
+  }) : createStandardMaterial(texture);
+  const mesh = new THREE2__namespace.Mesh(geometry, material);
   mesh.userData.entityId = entityId;
   mesh.scale.set(options.width, options.height, 1);
   return { mesh, material };
@@ -3942,7 +4569,7 @@ function createVideo({
   payload,
   isEditor
 }) {
-  const anchor = new THREE37__namespace.Object3D();
+  const anchor = new THREE2__namespace.Object3D();
   const path = payload.path ?? "";
   const options = normalizeOptions(payload.options);
   const entityId = createBaseEntity(world, anchor, {
@@ -3957,10 +4584,15 @@ function createVideo({
     return entityId;
   }
   const video = createVideoElement(path, options);
-  const texture = new THREE37__namespace.VideoTexture(video);
-  texture.colorSpace = THREE37__namespace.SRGBColorSpace;
+  const texture = new THREE2__namespace.VideoTexture(video);
+  texture.colorSpace = THREE2__namespace.SRGBColorSpace;
   texture.needsUpdate = true;
-  const { mesh, material } = createVideoMesh(entityId, texture, options);
+  const { mesh, material } = createVideoMesh(
+    entityId,
+    texture,
+    options,
+    readWorldRenderBackend(world)
+  );
   anchor.add(mesh);
   videoComponent.videoElement = video;
   videoComponent.texture = texture;
@@ -3974,7 +4606,7 @@ function createVideo({
   });
   if (!isEditor && options.positional) {
     const listener = getOrCreateListener2(camera);
-    const audioNode = new THREE37__namespace.PositionalAudio(listener);
+    const audioNode = new THREE2__namespace.PositionalAudio(listener);
     audioNode.setVolume(options.volume);
     audioNode.setRefDistance(options.refDistance);
     audioNode.setDistanceModel(normalizeDistanceModel2(options.distanceModel));
@@ -4028,9 +4660,11 @@ __name(registerDefaultFactories, "registerDefaultFactories");
 
 exports.createAnimationComponent = createAnimationComponent;
 exports.createAudioComponent = createAudioComponent;
+exports.createBoneAttachmentComponent = createBoneAttachmentComponent;
 exports.createCameraComponent = createCameraComponent;
 exports.createEntityTypeComponent = createEntityTypeComponent;
 exports.createEnvironmentComponent = createEnvironmentComponent;
+exports.createIKComponent = createIKComponent;
 exports.createImageComponent = createImageComponent;
 exports.createImageTargetAnchorComponent = createImageTargetAnchorComponent;
 exports.createImageTargetComponent = createImageTargetComponent;
@@ -4042,6 +4676,10 @@ exports.createMeshComponent = createMeshComponent;
 exports.createMeshGeometryComponent = createMeshGeometryComponent;
 exports.createModelComponent = createModelComponent;
 exports.createNameComponent = createNameComponent;
+exports.createNetworkIdentityComponent = createNetworkIdentityComponent;
+exports.createNetworkSpawnerComponent = createNetworkSpawnerComponent;
+exports.createNetworkTransformComponent = createNetworkTransformComponent;
+exports.createNetworkedPropsComponent = createNetworkedPropsComponent;
 exports.createObject3DRefComponent = createObject3DRefComponent;
 exports.createParentIdComponent = createParentIdComponent;
 exports.createPhysicsComponent = createPhysicsComponent;