@relu-interactives/spatial-ecs 0.8.0 → 0.9.0

package/dist/{chunk-JIJQFW6P.js → chunk-VYIWOXAY.js}

@@ -1,9 +1,9 @@
 import { getRendererKindOf, readWorldRenderBackend, readWorldRendererKind } from './chunk-OHCNPPMX.js';
-import { resolveScriptCtor, Behaviour, normalizeScriptData, defaultModuleLoader, reportScriptError, serializeDataForStorage, toErrorMessage, readScriptPhase, withScriptPhase, mergeDataByCurrentDefaults, resolveInputData, resolvePrefabAssetUrl, reportBehaviourHookError } from './chunk-U727NTWQ.js';
-import { createGLTFLoader, SHARED_MODEL_RESOURCE_FLAG, applyTransform, findModelBone } from './chunk-G4XJ53LS.js';
-import { AnimationComponent, ModelComponent, CameraComponent, Object3DRef, normalizeEnvironmentLighting, Environment, Postprocessing, TransformComponent, PhysicsComponent, setPhysicsLiveRef, LightComponent, MaterialComponent, DEFAULT_MESH_GEOMETRY_PARAMETERS, MeshGeometryComponent, InstancedMeshComponent, ScriptComponent, ScriptObjectComponent, AudioComponent, VideoComponent, XRInteractableComponent, XRRigComponent, VRTeleportAreaComponent, ParentId, XREnvironmentComponent, UIButtonComponent, UIToggleComponent, UISliderComponent, Name, UIPanelComponent, UITextComponent, XRAnchorComponent, IKComponent, XRInteractorComponent, XRInteractorSideComponent, handPoseDefinitionFor, getHandPosePreset, XRHandPoseComponent } from './chunk-NNDUOQ7O.js';
+import { resolveScriptCtor, Behaviour, normalizeScriptData, defaultModuleLoader, reportScriptError, serializeDataForStorage, toErrorMessage, readScriptPhase, withScriptPhase, mergeDataByCurrentDefaults, resolveInputData, resolvePrefabAssetUrl, reportBehaviourHookError } from './chunk-WWP46AEF.js';
+import { createGLTFLoader, SHARED_MODEL_RESOURCE_FLAG, applyTransform, findModelBone } from './chunk-JEPUCLZX.js';
+import { AnimationComponent, ModelComponent, CameraComponent, Object3DRef, normalizeEnvironmentLighting, Environment, Postprocessing, TransformComponent, PhysicsComponent, setPhysicsLiveRef, LightComponent, MaterialComponent, DEFAULT_MESH_GEOMETRY_PARAMETERS, MeshGeometryComponent, InstancedMeshComponent, ScriptComponent, ScriptObjectComponent, AudioComponent, VideoComponent, UIPanelComponent, UITextComponent, UIButtonComponent, UIToggleComponent, UISliderComponent, ParentId, XRInteractableComponent, XRRigComponent, VRTeleportAreaComponent, XREnvironmentComponent, Name, resolveChrome, chromeBleed, resolveText, resolveToken, styleAssets, XRAnchorComponent, IKComponent, XRInteractorComponent, XRInteractorSideComponent, handPoseDefinitionFor, getHandPosePreset, XRHandPoseComponent } from './chunk-JNYPJB55.js';
 import { __name } from './chunk-XE4OXN2W.js';
-import * as THREE19 from 'three';
+import * as THREE26 from 'three';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
 import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
 import { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
@@ -139,7 +139,7 @@ function transitionToClip(runtime, nextClipId, crossFadeDuration) {
 }
 __name(transitionToClip, "transitionToClip");
 function applyActionState(action, component, paused, shouldLoop) {
-  const loopMode = shouldLoop ? THREE19.LoopRepeat : THREE19.LoopOnce;
+  const loopMode = shouldLoop ? THREE26.LoopRepeat : THREE26.LoopOnce;
   const repetitions = shouldLoop ? Infinity : 1;
   action.setLoop(loopMode, repetitions);
   action.clampWhenFinished = !shouldLoop;
@@ -312,7 +312,7 @@ var _AnimationSystem = class _AnimationSystem {
         if (runtime) {
           stopAllActions(runtime);
         }
-        const mixer = new THREE19.AnimationMixer(root);
+        const mixer = new THREE26.AnimationMixer(root);
         const entries2 = readRuntimeClipEntries(animation);
         const indexedActions = createActions(mixer, entries2);
         runtime = {
@@ -438,11 +438,11 @@ function normalizeOrthoBounds(component) {
 }
 __name(normalizeOrthoBounds, "normalizeOrthoBounds");
 function isPerspectiveCamera(camera) {
-  return camera instanceof THREE19.PerspectiveCamera;
+  return camera instanceof THREE26.PerspectiveCamera;
 }
 __name(isPerspectiveCamera, "isPerspectiveCamera");
 function isOrthographicCamera(camera) {
-  return camera instanceof THREE19.OrthographicCamera;
+  return camera instanceof THREE26.OrthographicCamera;
 }
 __name(isOrthographicCamera, "isOrthographicCamera");
 function readWindowAspect() {
@@ -496,7 +496,7 @@ var _CameraSyncSystem = class _CameraSyncSystem {
         continue;
       }
       const camera = objectRef.object;
-      if (!(camera instanceof THREE19.Camera)) {
+      if (!(camera instanceof THREE26.Camera)) {
         continue;
       }
       if (xrCamera !== null && camera === xrCamera) {
@@ -561,8 +561,8 @@ var ObjectVisibilitySystem = _ObjectVisibilitySystem;
 function getUrlExtension(url) {
   const path = url.split(/[?#]/)[0] ?? "";
   const lastSegment = path.split("/").pop() ?? "";
-  const dot = lastSegment.lastIndexOf(".");
-  return dot >= 0 ? lastSegment.slice(dot + 1).toLowerCase() : "";
+  const dot2 = lastSegment.lastIndexOf(".");
+  return dot2 >= 0 ? lastSegment.slice(dot2 + 1).toLowerCase() : "";
 }
 __name(getUrlExtension, "getUrlExtension");
 async function loadEquirectTexture(url) {
@@ -575,10 +575,10 @@ async function loadEquirectTexture(url) {
     const { EXRLoader } = await import('three/examples/jsm/loaders/EXRLoader.js');
     texture = await new EXRLoader().loadAsync(url);
   } else {
-    texture = await new THREE19.TextureLoader().loadAsync(url);
-    texture.colorSpace = THREE19.SRGBColorSpace;
+    texture = await new THREE26.TextureLoader().loadAsync(url);
+    texture.colorSpace = THREE26.SRGBColorSpace;
   }
-  texture.mapping = THREE19.EquirectangularReflectionMapping;
+  texture.mapping = THREE26.EquirectangularReflectionMapping;
   texture.needsUpdate = true;
   return texture;
 }
@@ -587,13 +587,13 @@ var rendererStates = /* @__PURE__ */ new WeakMap();
 function toThreeToneMapping(mode) {
   switch (mode) {
     case "aces":
-      return THREE19.ACESFilmicToneMapping;
+      return THREE26.ACESFilmicToneMapping;
     case "agx":
-      return THREE19.AgXToneMapping;
+      return THREE26.AgXToneMapping;
     case "neutral":
-      return THREE19.NeutralToneMapping;
+      return THREE26.NeutralToneMapping;
     default:
-      return THREE19.NoToneMapping;
+      return THREE26.NoToneMapping;
   }
 }
 __name(toThreeToneMapping, "toThreeToneMapping");
@@ -614,7 +614,7 @@ function setRendererToneMappingSource(renderer, source, request) {
     if (request === null) return;
     state = {
       baseline: {
-        toneMapping: target.toneMapping ?? THREE19.NoToneMapping,
+        toneMapping: target.toneMapping ?? THREE26.NoToneMapping,
         exposure: typeof target.toneMappingExposure === "number" ? target.toneMappingExposure : 1
       },
       environment: null,
@@ -645,7 +645,7 @@ var MIN_DENSITY = 0;
 function createGradientTexture(effect, colors) {
   if (typeof document === "undefined") {
     const pixel = new Uint8Array([30, 30, 30, 255]);
-    const fallback = new THREE19.DataTexture(pixel, 1, 1, THREE19.RGBAFormat);
+    const fallback = new THREE26.DataTexture(pixel, 1, 1, THREE26.RGBAFormat);
     fallback.needsUpdate = true;
     return fallback;
   }
@@ -654,7 +654,7 @@ function createGradientTexture(effect, colors) {
   canvas.height = 512;
   const context = canvas.getContext("2d");
   if (!context) {
-    const fallback = new THREE19.CanvasTexture(canvas);
+    const fallback = new THREE26.CanvasTexture(canvas);
     fallback.needsUpdate = true;
     return fallback;
   }
@@ -682,8 +682,8 @@ function createGradientTexture(effect, colors) {
     context.fillRect(0, 0, 512, 512);
     context.globalCompositeOperation = "source-over";
   }
-  const texture = new THREE19.CanvasTexture(canvas);
-  texture.colorSpace = THREE19.SRGBColorSpace;
+  const texture = new THREE26.CanvasTexture(canvas);
+  texture.colorSpace = THREE26.SRGBColorSpace;
   texture.needsUpdate = true;
   return texture;
 }
@@ -700,7 +700,7 @@ function readRenderer(world) {
 __name(readRenderer, "readRenderer");
 var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
   constructor(scene) {
-    this.textureLoader = new THREE19.TextureLoader();
+    this.textureLoader = new THREE26.TextureLoader();
     /** `true` once an Environment entity has been seen (drives the reset path). */
     this.hasEnvironment = false;
     this.skyboxSignature = null;
@@ -784,7 +784,7 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
     if (skybox.type === "color") {
       this.disposeActiveTexture();
       this.pendingImageUrl = null;
-      this.setSkyboxBackground(new THREE19.Color(skybox.color || "#1e1e1e"));
+      this.setSkyboxBackground(new THREE26.Color(skybox.color || "#1e1e1e"));
       return;
     }
     if (skybox.type === "gradient") {
@@ -819,7 +819,7 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
         return;
       }
       if (!equirect) {
-        texture.colorSpace = THREE19.SRGBColorSpace;
+        texture.colorSpace = THREE26.SRGBColorSpace;
       }
       this.activeTexture = texture;
       this.setSkyboxBackground(texture);
@@ -847,16 +847,16 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
       this.scene.fog = null;
       return;
     }
-    const fogColor = new THREE19.Color(fog.color || "#1e1e1e");
+    const fogColor = new THREE26.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 THREE19.Fog(fogColor, near, far);
+      this.scene.fog = new THREE26.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 THREE19.FogExp2(fogColor, density);
+    this.scene.fog = new THREE26.FogExp2(fogColor, density);
   }
   // ── Image-based lighting ────────────────────────────────────────────────
   disposeEnvResources() {
@@ -918,7 +918,7 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
     if (!renderer || getRendererKindOf(renderer) === "webgpu") return null;
     let generator = null;
     try {
-      generator = new THREE19.PMREMGenerator(renderer);
+      generator = new THREE26.PMREMGenerator(renderer);
       return generator.fromEquirectangular(texture);
     } catch (error) {
       console.warn(
@@ -1213,7 +1213,7 @@ function computeColliderState(colliderValues, object) {
   if (!object) {
     return colliderValues;
   }
-  const scale = new THREE19.Vector3();
+  const scale = new THREE26.Vector3();
   object.getWorldScale(scale);
   return {
     ...colliderValues,
@@ -1264,8 +1264,8 @@ function createColliderDesc(RAPIER, values, triMeshData) {
     values.offsetPosition.y,
     values.offsetPosition.z
   );
-  const offsetQuaternion = new THREE19.Quaternion().setFromEuler(
-    new THREE19.Euler(
+  const offsetQuaternion = new THREE26.Quaternion().setFromEuler(
+    new THREE26.Euler(
       values.offsetRotation.x,
       values.offsetRotation.y,
       values.offsetRotation.z
@@ -1280,17 +1280,17 @@ function collectTriMeshParts(object) {
     return null;
   }
   object.updateWorldMatrix(true, true);
-  const worldScale = new THREE19.Vector3();
+  const worldScale = new THREE26.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 THREE19.Matrix4().copy(object.matrixWorld).invert();
+  const worldToObject = new THREE26.Matrix4().copy(object.matrixWorld).invert();
   const parts = [];
   object.traverse((child) => {
-    if (!(child instanceof THREE19.Mesh) || !child.geometry) {
+    if (!(child instanceof THREE26.Mesh) || !child.geometry) {
       return;
     }
     const geometry = child.geometry;
@@ -1307,7 +1307,7 @@ function collectTriMeshParts(object) {
     if (indexCount < 3) {
       return;
     }
-    const relativeMatrix = new THREE19.Matrix4().multiplyMatrices(
+    const relativeMatrix = new THREE26.Matrix4().multiplyMatrices(
       worldToObject,
       child.matrixWorld
     );
@@ -1348,7 +1348,7 @@ function createTriMeshData(collected) {
   }
   const vertices = new Float32Array(vertexTotal * 3);
   const indices = new Uint32Array(indexTotal);
-  const point = new THREE19.Vector3();
+  const point = new THREE26.Vector3();
   let vertexOffset = 0;
   let indexOffset = 0;
   for (const part of parts) {
@@ -1380,8 +1380,8 @@ function createTriMeshData(collected) {
 }
 __name(createTriMeshData, "createTriMeshData");
 function syncBodyFromTransform(body, transform) {
-  const quaternion = new THREE19.Quaternion().setFromEuler(
-    new THREE19.Euler(transform.rotation.x, transform.rotation.y, transform.rotation.z)
+  const quaternion = new THREE26.Quaternion().setFromEuler(
+    new THREE26.Euler(transform.rotation.x, transform.rotation.y, transform.rotation.z)
   );
   body.setTranslation(
     {
@@ -1408,8 +1408,8 @@ function syncTransformFromBody(transform, body) {
   transform.position.x = position.x;
   transform.position.y = position.y;
   transform.position.z = position.z;
-  const euler = new THREE19.Euler().setFromQuaternion(
-    new THREE19.Quaternion(rotation.x, rotation.y, rotation.z, rotation.w)
+  const euler = new THREE26.Euler().setFromQuaternion(
+    new THREE26.Quaternion(rotation.x, rotation.y, rotation.z, rotation.w)
   );
   transform.rotation.x = euler.x;
   transform.rotation.y = euler.y;
@@ -1522,8 +1522,8 @@ var _PhysicsSyncSystem = class _PhysicsSyncSystem {
           transform.position.y,
           transform.position.z
         );
-        const quaternion = new THREE19.Quaternion().setFromEuler(
-          new THREE19.Euler(
+        const quaternion = new THREE26.Quaternion().setFromEuler(
+          new THREE26.Euler(
             transform.rotation.x,
             transform.rotation.y,
             transform.rotation.z
@@ -2254,7 +2254,7 @@ function applyLightValues(lightComponent, rendererKind) {
       values.castShadow
     );
   }
-  if (light instanceof THREE19.PointLight) {
+  if (light instanceof THREE26.PointLight) {
     if (typeof values.distance === "number" && Number.isFinite(values.distance)) {
       light.distance = Math.max(MIN_LIGHT_DISTANCE, values.distance);
     }
@@ -2262,7 +2262,7 @@ function applyLightValues(lightComponent, rendererKind) {
       light.decay = Math.max(0, values.decay);
     }
   }
-  if (light instanceof THREE19.SpotLight) {
+  if (light instanceof THREE26.SpotLight) {
     if (typeof values.distance === "number" && Number.isFinite(values.distance)) {
       light.distance = Math.max(MIN_LIGHT_DISTANCE, values.distance);
     }
@@ -2276,7 +2276,7 @@ function applyLightValues(lightComponent, rendererKind) {
       light.penumbra = Math.max(0, Math.min(1, values.penumbra));
     }
   }
-  if (light instanceof THREE19.RectAreaLight) {
+  if (light instanceof THREE26.RectAreaLight) {
     if (typeof values.width === "number" && Number.isFinite(values.width)) {
       light.width = Math.max(MIN_AREA_SIZE, values.width);
     }
@@ -2340,15 +2340,15 @@ function resolveMaterialPropertyKey(key) {
 __name(resolveMaterialPropertyKey, "resolveMaterialPropertyKey");
 function createMaterialByType(type) {
   if (type === "basic") {
-    return new THREE19.MeshBasicMaterial();
+    return new THREE26.MeshBasicMaterial();
   }
   if (type === "phong") {
-    return new THREE19.MeshPhongMaterial();
+    return new THREE26.MeshPhongMaterial();
   }
   if (type === "physical") {
-    return new THREE19.MeshPhysicalMaterial();
+    return new THREE26.MeshPhysicalMaterial();
   }
-  return new THREE19.MeshStandardMaterial();
+  return new THREE26.MeshStandardMaterial();
 }
 __name(createMaterialByType, "createMaterialByType");
 function replaceMaterialAcrossObject(object, previous, next) {
@@ -2407,12 +2407,12 @@ function applyTextureFiltering(material, filtering) {
   const target = material;
   for (const slot of materialTextureSlots) {
     const texture = target[slot];
-    if (!texture || !(texture instanceof THREE19.Texture)) {
+    if (!texture || !(texture instanceof THREE26.Texture)) {
       continue;
     }
     const useMipmaps = texture.generateMipmaps !== false;
-    texture.magFilter = sharp ? THREE19.NearestFilter : THREE19.LinearFilter;
-    texture.minFilter = useMipmaps ? sharp ? THREE19.NearestMipmapNearestFilter : THREE19.LinearMipmapLinearFilter : sharp ? THREE19.NearestFilter : THREE19.LinearFilter;
+    texture.magFilter = sharp ? THREE26.NearestFilter : THREE26.LinearFilter;
+    texture.minFilter = useMipmaps ? sharp ? THREE26.NearestMipmapNearestFilter : THREE26.LinearMipmapLinearFilter : sharp ? THREE26.NearestFilter : THREE26.LinearFilter;
     texture.needsUpdate = true;
   }
   material.needsUpdate = true;
@@ -2422,12 +2422,12 @@ function setTextureMipmaps(material, enabled) {
   const target = material;
   for (const slot of materialTextureSlots) {
     const texture = target[slot];
-    if (!texture || !(texture instanceof THREE19.Texture)) {
+    if (!texture || !(texture instanceof THREE26.Texture)) {
       continue;
     }
     texture.generateMipmaps = enabled;
-    const sharp = texture.magFilter === THREE19.NearestFilter;
-    texture.minFilter = enabled ? sharp ? THREE19.NearestMipmapNearestFilter : THREE19.LinearMipmapLinearFilter : sharp ? THREE19.NearestFilter : THREE19.LinearFilter;
+    const sharp = texture.magFilter === THREE26.NearestFilter;
+    texture.minFilter = enabled ? sharp ? THREE26.NearestMipmapNearestFilter : THREE26.LinearMipmapLinearFilter : sharp ? THREE26.NearestFilter : THREE26.LinearFilter;
     texture.needsUpdate = true;
   }
   material.needsUpdate = true;
@@ -2438,7 +2438,7 @@ function assignMaterialTexture(material, rawKey, url, textureCache) {
   const key = resolveMaterialPropertyKey(rawKey);
   let texture = textureCache.get(url);
   if (!texture) {
-    texture = new THREE19.TextureLoader().load(url);
+    texture = new THREE26.TextureLoader().load(url);
     textureCache.set(url, texture);
   }
   target[key] = texture;
@@ -2476,7 +2476,7 @@ function applyMaterialState(material, value, textureCache) {
   }
   target.side = value.side;
   target.blending = value.blending;
-  target.premultipliedAlpha = value.blending === THREE19.MultiplyBlending || value.blending === THREE19.SubtractiveBlending;
+  target.premultipliedAlpha = value.blending === THREE26.MultiplyBlending || value.blending === THREE26.SubtractiveBlending;
   target.depthTest = value.depthTest;
   target.depthWrite = value.depthWrite;
   target.wireframe = value.wireframe;
@@ -2637,12 +2637,12 @@ function resolvePrimaryMesh(object) {
   if (!object) {
     return null;
   }
-  if (object instanceof THREE19.Mesh) {
+  if (object instanceof THREE26.Mesh) {
     return object;
   }
   let found = null;
   object.traverse((child) => {
-    if (!found && child instanceof THREE19.Mesh) {
+    if (!found && child instanceof THREE26.Mesh) {
       found = child;
     }
   });
@@ -2663,22 +2663,22 @@ function applyGeometry(component) {
   switch (component.kind) {
     case "cube": {
       const params = sanitized;
-      nextGeometry = new THREE19.BoxGeometry(params.width, params.height, params.depth);
+      nextGeometry = new THREE26.BoxGeometry(params.width, params.height, params.depth);
       break;
     }
     case "plane": {
       const params = sanitized;
-      nextGeometry = new THREE19.PlaneGeometry(params.width, params.height);
+      nextGeometry = new THREE26.PlaneGeometry(params.width, params.height);
       break;
     }
     case "sphere": {
       const params = sanitized;
-      nextGeometry = new THREE19.SphereGeometry(params.radius, 24, 24);
+      nextGeometry = new THREE26.SphereGeometry(params.radius, 24, 24);
       break;
     }
     case "cylinder": {
       const params = sanitized;
-      nextGeometry = new THREE19.CylinderGeometry(
+      nextGeometry = new THREE26.CylinderGeometry(
         params.radius,
         params.radius,
         params.height,
@@ -2688,7 +2688,7 @@ function applyGeometry(component) {
     }
     case "capsule": {
       const params = sanitized;
-      nextGeometry = new THREE19.CapsuleGeometry(params.radius, params.height, 4, 8);
+      nextGeometry = new THREE26.CapsuleGeometry(params.radius, params.height, 4, 8);
       break;
     }
     default:
@@ -2704,7 +2704,7 @@ function applyShadowFlags(component) {
     return;
   }
   component.object.traverse((child) => {
-    if (child instanceof THREE19.Mesh) {
+    if (child instanceof THREE26.Mesh) {
       child.castShadow = component.castShadow;
       child.receiveShadow = component.receiveShadow;
     }
@@ -2780,35 +2780,35 @@ function buildGeometry(component) {
   switch (component.meshKind) {
     case "cube": {
       const params = p;
-      return new THREE19.BoxGeometry(params.width, params.height, params.depth);
+      return new THREE26.BoxGeometry(params.width, params.height, params.depth);
     }
     case "plane": {
       const params = p;
-      return new THREE19.PlaneGeometry(params.width, params.height);
+      return new THREE26.PlaneGeometry(params.width, params.height);
     }
     case "sphere": {
       const params = p;
-      return new THREE19.SphereGeometry(params.radius, 24, 24);
+      return new THREE26.SphereGeometry(params.radius, 24, 24);
     }
     case "cylinder": {
       const params = p;
-      return new THREE19.CylinderGeometry(params.radius, params.radius, params.height, 20);
+      return new THREE26.CylinderGeometry(params.radius, params.radius, params.height, 20);
     }
     case "capsule": {
       const params = p;
-      return new THREE19.CapsuleGeometry(params.radius, params.height, 4, 8);
+      return new THREE26.CapsuleGeometry(params.radius, params.height, 4, 8);
     }
     default:
-      return new THREE19.BoxGeometry(1, 1, 1);
+      return new THREE26.BoxGeometry(1, 1, 1);
   }
 }
 __name(buildGeometry, "buildGeometry");
-var _position = new THREE19.Vector3();
-var _quaternion = new THREE19.Quaternion();
-var _euler = new THREE19.Euler();
-var _scale = new THREE19.Vector3();
-var _matrix = new THREE19.Matrix4();
-var _modelMatrix = new THREE19.Matrix4();
+var _position = new THREE26.Vector3();
+var _quaternion = new THREE26.Quaternion();
+var _euler = new THREE26.Euler();
+var _scale = new THREE26.Vector3();
+var _matrix = new THREE26.Matrix4();
+var _modelMatrix = new THREE26.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");
@@ -2890,9 +2890,9 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
       const instanceCount = comp.instanceEntityIds.length;
       const geometrySignature = comp.meshKind === "model" ? `model:${comp.modelPath}:${instanceCount}` : `${comp.meshKind}:${JSON.stringify(comp.meshParameters)}:${instanceCount}`;
       if (comp.instancedMesh === null) {
-        const tracked = this.trackedMeshes.get(entityId);
-        if (tracked) {
-          comp.instancedMesh = tracked;
+        const tracked2 = this.trackedMeshes.get(entityId);
+        if (tracked2) {
+          comp.instancedMesh = tracked2;
         }
       }
       const pendingLoadSignature = this.loadingSignatures.get(entityId);
@@ -2961,7 +2961,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 THREE19.InstancedMesh(
+                const instancedMesh2 = new THREE26.InstancedMesh(
                   geometry2,
                   Array.isArray(sourceMaterial) ? sourceMaterial : sourceMaterial,
                   count2
@@ -2986,7 +2986,7 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
                 this.loadingSignatures.delete(targetEntityId);
                 return;
               }
-              const group = new THREE19.Group();
+              const group = new THREE26.Group();
               for (const entry of entries) {
                 group.add(entry.instancedMesh);
               }
@@ -3004,8 +3004,8 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
         }
         const count = instanceCount;
         const geometry = buildGeometry(comp);
-        const material = new THREE19.MeshStandardMaterial({ color: "#ffffff" });
-        const instancedMesh = new THREE19.InstancedMesh(geometry, material, count);
+        const material = new THREE26.MeshStandardMaterial({ color: "#ffffff" });
+        const instancedMesh = new THREE26.InstancedMesh(geometry, material, count);
         instancedMesh.castShadow = comp.castShadow;
         instancedMesh.receiveShadow = comp.receiveShadow;
         for (let i = 0; i < count; i++) {
@@ -3213,8 +3213,8 @@ var _ScriptBehaviourSystem = class _ScriptBehaviourSystem {
     const retryDelay = options?.errorRetryDelay;
     this.errorRetryDelay = typeof retryDelay === "number" && Number.isFinite(retryDelay) ? Math.max(0, retryDelay) : DEFAULT_SCRIPT_ERROR_RETRY_DELAY;
     this.selectionCtx = selectionContext ?? null;
-    this.raycaster = new THREE19.Raycaster();
-    this.ndcPointer = new THREE19.Vector2();
+    this.raycaster = new THREE26.Raycaster();
+    this.ndcPointer = new THREE26.Vector2();
     if (this.selectionCtx) {
       this.selectionCtx.domElement.addEventListener("pointerdown", this.onPointerDown);
       this.selectionCtx.domElement.addEventListener("pointerup", this.onPointerUp);
@@ -3658,7 +3658,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 THREE19.Texture) value.dispose();
+        if (value instanceof THREE26.Texture) value.dispose();
       }
       mat.dispose?.();
     }
@@ -4259,7 +4259,7 @@ var _AudioSystem = class _AudioSystem {
     if (!prev || prev.volume !== opts.volume) {
       sound.setVolume(opts.volume);
     }
-    if (opts.positional && sound instanceof THREE19.PositionalAudio) {
+    if (opts.positional && sound instanceof THREE26.PositionalAudio) {
       if (!prev || prev.refDistance !== opts.refDistance) {
         sound.setRefDistance(opts.refDistance);
       }
@@ -4399,7 +4399,7 @@ var _VideoSystem = class _VideoSystem {
         spill: opts.spill
       });
     }
-    if (opts.positional && component.audioNode instanceof THREE19.PositionalAudio) {
+    if (opts.positional && component.audioNode instanceof THREE26.PositionalAudio) {
       const posAudio = component.audioNode;
       if (!prev || prev.refDistance !== opts.refDistance) {
         posAudio.setRefDistance(opts.refDistance);
@@ -4439,8 +4439,8 @@ function blankState(source) {
     handedness: handednessOf(source),
     kind: kindOf(source),
     connected: true,
-    rayOrigin: new THREE19.Vector3(),
-    rayDirection: new THREE19.Vector3(0, 0, -1),
+    rayOrigin: new THREE26.Vector3(),
+    rayDirection: new THREE26.Vector3(0, 0, -1),
     gripPosition: null,
     gripQuaternion: null,
     select: false,
@@ -4466,7 +4466,7 @@ function readHandJoints(frame, hand, referenceSpace, rigMatrix, existing) {
   }
   if (spaces.length === 0) return null;
   const target = existing ?? {};
-  const matrix = new THREE19.Matrix4();
+  const matrix = new THREE26.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") {
@@ -4479,7 +4479,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 THREE19.Vector3();
+        const vector = target[names[i]] ?? new THREE26.Vector3();
         vector.setFromMatrixPosition(matrix);
         target[names[i]] = vector;
       }
@@ -4497,7 +4497,7 @@ function readHandJoints(frame, hand, referenceSpace, rigMatrix, existing) {
       continue;
     }
     matrix.fromArray(pose.transform.matrix).premultiply(rigMatrix);
-    const vector = target[names[i]] ?? new THREE19.Vector3();
+    const vector = target[names[i]] ?? new THREE26.Vector3();
     vector.setFromMatrixPosition(matrix);
     target[names[i]] = vector;
     anyTracked = true;
@@ -4509,7 +4509,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 THREE19.Matrix4();
+    this.referenceToWorld = new THREE26.Matrix4();
     this.session = null;
     this.onSelectStart = /* @__PURE__ */ __name((event) => this.mark(event, "pendingSelectStart"), "onSelectStart");
     this.onSelectEnd = /* @__PURE__ */ __name((event) => this.mark(event, "pendingSelectEnd"), "onSelectEnd");
@@ -4607,19 +4607,19 @@ var _XRInputSystem = class _XRInputSystem {
       if (frame && referenceSpace && source.targetRaySpace) {
         const pose = frame.getPose(source.targetRaySpace, referenceSpace);
         if (pose) {
-          const m = new THREE19.Matrix4().fromArray(pose.transform.matrix).premultiply(rigMatrix);
+          const m = new THREE26.Matrix4().fromArray(pose.transform.matrix).premultiply(rigMatrix);
           state.rayOrigin.setFromMatrixPosition(m);
           state.rayDirection.set(0, 0, -1).applyQuaternion(
-            new THREE19.Quaternion().setFromRotationMatrix(m)
+            new THREE26.Quaternion().setFromRotationMatrix(m)
           ).normalize();
         }
       }
       if (frame && referenceSpace && source.gripSpace) {
         const gripPose = frame.getPose(source.gripSpace, referenceSpace);
         if (gripPose) {
-          const m = new THREE19.Matrix4().fromArray(gripPose.transform.matrix).premultiply(rigMatrix);
-          state.gripPosition ?? (state.gripPosition = new THREE19.Vector3());
-          state.gripQuaternion ?? (state.gripQuaternion = new THREE19.Quaternion());
+          const m = new THREE26.Matrix4().fromArray(gripPose.transform.matrix).premultiply(rigMatrix);
+          state.gripPosition ?? (state.gripPosition = new THREE26.Vector3());
+          state.gripQuaternion ?? (state.gripQuaternion = new THREE26.Quaternion());
           state.gripPosition.setFromMatrixPosition(m);
           state.gripQuaternion.setFromRotationMatrix(m);
         }
@@ -4721,6 +4721,51 @@ var _XRInputSystem = class _XRInputSystem {
 };
 __name(_XRInputSystem, "XRInputSystem");
 var XRInputSystem = _XRInputSystem;
+
+// core/ui/uiWidgetTree.ts
+var UI_PART_KEY = "__uiPart";
+function applyPartColor(mesh, tag) {
+  const material = mesh.material;
+  material.color.copy(tag.baseColor).multiplyScalar(tag.premultiplied ? tag.tint * tag.opacity : tag.tint);
+  material.opacity = tag.opacity;
+}
+__name(applyPartColor, "applyPartColor");
+function isUiWidget(world, entityId) {
+  return !!world.getComponent(entityId, UIPanelComponent) || !!world.getComponent(entityId, UITextComponent) || !!world.getComponent(entityId, UIButtonComponent) || !!world.getComponent(entityId, UIToggleComponent) || !!world.getComponent(entityId, UISliderComponent);
+}
+__name(isUiWidget, "isUiWidget");
+function isShownInScene(world, entityId) {
+  let object = world.getComponent(entityId, Object3DRef)?.object ?? null;
+  while (object) {
+    if (!object.visible) return false;
+    object = object.parent;
+  }
+  return true;
+}
+__name(isShownInScene, "isShownInScene");
+function nearestWidgetAncestor(world, entityId) {
+  const visited = /* @__PURE__ */ new Set([entityId]);
+  let current = entityId;
+  for (; ; ) {
+    const parentId = world.getComponent(current, ParentId)?.value;
+    if (typeof parentId !== "number" || visited.has(parentId)) return null;
+    if (isUiWidget(world, parentId)) return parentId;
+    visited.add(parentId);
+    current = parentId;
+  }
+}
+__name(nearestWidgetAncestor, "nearestWidgetAncestor");
+function widgetTreeRoot(world, entityId) {
+  const visited = /* @__PURE__ */ new Set([entityId]);
+  let root = entityId;
+  for (; ; ) {
+    const parent = nearestWidgetAncestor(world, root);
+    if (parent === null || visited.has(parent)) return root;
+    visited.add(parent);
+    root = parent;
+  }
+}
+__name(widgetTreeRoot, "widgetTreeRoot");
 var VELOCITY_SAMPLES = 5;
 var MAX_SAMPLE_AGE_SECONDS = 0.2;
 var MAX_PLAUSIBLE_SPEED = 20;
@@ -4747,15 +4792,15 @@ var _ThrowVelocityTracker = class _ThrowVelocityTracker {
     const fresh = this.samples.filter(
       (sample) => now - sample.time <= MAX_SAMPLE_AGE_SECONDS
     );
-    if (fresh.length < 2) return new THREE19.Vector3();
-    let best = new THREE19.Vector3();
+    if (fresh.length < 2) return new THREE26.Vector3();
+    let best = new THREE26.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 THREE19.Vector3().subVectors(current.position, previous.position).divideScalar(dt);
+      const velocity = new THREE26.Vector3().subVectors(current.position, previous.position).divideScalar(dt);
       const speed = velocity.length();
       if (speed > MAX_PLAUSIBLE_SPEED) continue;
       if (speed > bestSpeed) {
@@ -4772,15 +4817,15 @@ var _ThrowVelocityTracker = class _ThrowVelocityTracker {
 __name(_ThrowVelocityTracker, "ThrowVelocityTracker");
 var ThrowVelocityTracker = _ThrowVelocityTracker;
 function angularVelocityFrom(previous, current, deltaTime) {
-  if (deltaTime <= 1e-5) return new THREE19.Vector3();
+  if (deltaTime <= 1e-5) return new THREE26.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(THREE19.MathUtils.clamp(delta.w, -1, 1));
+  const angle = 2 * Math.acos(THREE26.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 THREE19.Vector3();
-  return new THREE19.Vector3(delta.x, delta.y, delta.z).divideScalar(sinHalf).multiplyScalar(angle / deltaTime);
+  if (sinHalf < 1e-6 || angle < 1e-6) return new THREE26.Vector3();
+  return new THREE26.Vector3(delta.x, delta.y, delta.z).divideScalar(sinHalf).multiplyScalar(angle / deltaTime);
 }
 __name(angularVelocityFrom, "angularVelocityFrom");
 var MIN_HAND_SEPARATION = 0.06;
@@ -4788,7 +4833,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 THREE19.Vector3().subVectors(
+  const anchorDelta = new THREE26.Vector3().subVectors(
     basis.secondaryLocal,
     basis.primaryLocal
   );
@@ -4812,8 +4857,8 @@ function solveTwoHandTransform(primary, secondary, basis, options) {
   } else {
     const axisLocal = anchorDelta.clone().normalize();
     const currentAxis = axisLocal.clone().applyQuaternion(base).normalize();
-    const desiredAxis = new THREE19.Vector3().subVectors(secondary.position, primary.position).normalize();
-    const correction = new THREE19.Quaternion().setFromUnitVectors(
+    const desiredAxis = new THREE26.Vector3().subVectors(secondary.position, primary.position).normalize();
+    const correction = new THREE26.Quaternion().setFromUnitVectors(
       currentAxis,
       desiredAxis
     );
@@ -4828,11 +4873,11 @@ __name(solveTwoHandTransform, "solveTwoHandTransform");
 // core/systems/XRInteractionSystem.ts
 var RAYLESS_HOLD_DISTANCE = 0.5;
 function quatFromEulerVec(r) {
-  return new THREE19.Quaternion().setFromEuler(new THREE19.Euler(r.x, r.y, r.z));
+  return new THREE26.Quaternion().setFromEuler(new THREE26.Euler(r.x, r.y, r.z));
 }
 __name(quatFromEulerVec, "quatFromEulerVec");
 function writeEuler(target, q) {
-  const euler = new THREE19.Euler().setFromQuaternion(q);
+  const euler = new THREE26.Euler().setFromQuaternion(q);
   target.x = euler.x;
   target.y = euler.y;
   target.z = euler.z;
@@ -4840,7 +4885,7 @@ function writeEuler(target, q) {
 __name(writeEuler, "writeEuler");
 var _XRInteractionSystem = class _XRInteractionSystem {
   constructor(inputSystem) {
-    this.raycaster = new THREE19.Raycaster();
+    this.raycaster = new THREE26.Raycaster();
     this.grabs = /* @__PURE__ */ new Map();
     this.hoveredEntityId = null;
     /** Per-hand hover, with the hit distance so the ray can stop at the surface. */
@@ -4951,7 +4996,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     const hand = this.handPosition(input);
     const handQuaternion = this.handQuaternion(input);
     const objectQuaternion = quatFromEulerVec(transform.rotation);
-    record.offset = new THREE19.Vector3(
+    record.offset = new THREE26.Vector3(
       transform.position.x - hand.x,
       transform.position.y - hand.y,
       transform.position.z - hand.z
@@ -4983,7 +5028,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     primary.record.twoHand = {
       primaryLocal,
       secondaryLocal,
-      initialScale: new THREE19.Vector3(
+      initialScale: new THREE26.Vector3(
         transform.scale.x,
         transform.scale.y,
         transform.scale.z
@@ -5004,7 +5049,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
   /** World point → the object's UNSCALED local space. */
   objectLocalPoint(transform, worldPoint) {
     const local = worldPoint.clone().sub(
-      new THREE19.Vector3(
+      new THREE26.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
@@ -5062,7 +5107,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       );
       if (!interactable2) continue;
       if (interactable2.grabReach === "distance") continue;
-      const position = new THREE19.Vector3();
+      const position = new THREE26.Vector3();
       entry.object.getWorldPosition(position);
       const distance = position.distanceTo(hand);
       if (distance <= interactable2.grabRadius && distance < nearestDistance) {
@@ -5094,6 +5139,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       const interactable = world.getComponent(entityId, XRInteractableComponent);
       if (!interactable?.enabled) continue;
       if (!world.isEntityVisible(entityId)) continue;
+      if (!isShownInScene(world, entityId)) continue;
       const object = world.getComponent(entityId, Object3DRef)?.object;
       if (object) {
         out.push({ entityId, object, pointable: interactable.pointable });
@@ -5134,13 +5180,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 THREE19.Vector3(
+    const objectPosition = new THREE26.Vector3(
       transform.position.x,
       transform.position.y,
       transform.position.z
     );
     const objectQuaternion = quatFromEulerVec(transform.rotation);
-    const scale = new THREE19.Vector3(
+    const scale = new THREE26.Vector3(
       transform.scale.x,
       transform.scale.y,
       transform.scale.z
@@ -5151,7 +5197,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 THREE19.Vector3(
+      const world3 = new THREE26.Vector3(
         point.position.x,
         point.position.y,
         point.position.z
@@ -5174,21 +5220,21 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     let offset;
     let remoteDistance = 0;
     if (remote) {
-      const position = new THREE19.Vector3(
+      const position = new THREE26.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
       );
       remoteDistance = position.distanceTo(input.rayOrigin);
-      offset = new THREE19.Vector3();
+      offset = new THREE26.Vector3();
     } else if (viaDistance) {
-      offset = new THREE19.Vector3(
+      offset = new THREE26.Vector3(
         interactable.grabOffsetPosition.x,
         interactable.grabOffsetPosition.y,
         interactable.grabOffsetPosition.z
       );
     } else {
-      offset = new THREE19.Vector3(
+      offset = new THREE26.Vector3(
         transform.position.x - hand.x,
         transform.position.y - hand.y,
         transform.position.z - hand.z
@@ -5215,7 +5261,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       entityId,
       role,
       attachPointId: attachPoint?.id ?? null,
-      attachLocal: attachPoint ? new THREE19.Vector3(
+      attachLocal: attachPoint ? new THREE26.Vector3(
         attachPoint.position.x,
         attachPoint.position.y,
         attachPoint.position.z
@@ -5224,8 +5270,8 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       handRotationOffset,
       twoHand: null,
       offset,
-      rotationOffset: new THREE19.Quaternion().setFromEuler(
-        new THREE19.Euler(
+      rotationOffset: new THREE26.Quaternion().setFromEuler(
+        new THREE26.Euler(
           interactable.grabOffsetRotation.x,
           interactable.grabOffsetRotation.y,
           interactable.grabOffsetRotation.z
@@ -5236,7 +5282,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       restoreBodyType,
       tracker,
       lastHandQuaternion: handQuaternion.clone(),
-      angularVelocity: new THREE19.Vector3()
+      angularVelocity: new THREE26.Vector3()
     });
     if (role === "primary") {
       this.dispatch(world, entityId, "onGrab", (b) => b.onGrab(input));
@@ -5309,14 +5355,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 THREE19.Vector3().copy(input.rayDirection).multiplyScalar(held.remoteDistance).add(input.rayOrigin);
+      const target = new THREE26.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 THREE19.Vector3(
+        new THREE26.Vector3(
           transform.scale.x,
           transform.scale.y,
           transform.scale.z
@@ -5334,7 +5380,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       writeEuler(transform.rotation, objectQuaternion);
     }
     held.tracker.record(
-      held.remote ? new THREE19.Vector3(
+      held.remote ? new THREE26.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
@@ -5409,7 +5455,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
    */
   handPosition(input) {
     if (input.gripPosition) return input.gripPosition;
-    return new THREE19.Vector3().copy(input.rayDirection).multiplyScalar(RAYLESS_HOLD_DISTANCE).add(input.rayOrigin);
+    return new THREE26.Vector3().copy(input.rayDirection).multiplyScalar(RAYLESS_HOLD_DISTANCE).add(input.rayOrigin);
   }
   /**
    * Hand orientation. Grip-less sources (gaze / transient-pointer) have none,
@@ -5417,8 +5463,8 @@ var _XRInteractionSystem = class _XRInteractionSystem {
    */
   handQuaternion(input) {
     if (input.gripQuaternion) return input.gripQuaternion.clone();
-    return new THREE19.Quaternion().setFromUnitVectors(
-      new THREE19.Vector3(0, 0, -1),
+    return new THREE26.Quaternion().setFromUnitVectors(
+      new THREE26.Vector3(0, 0, -1),
       input.rayDirection.clone().normalize()
     );
   }
@@ -5555,7 +5601,7 @@ function sampleTeleportArc(origin, direction, out = [], options) {
   for (let i = 0; i < steps; i += 1) {
     const t = i / (steps - 1) * maxTime;
     out.push(
-      new THREE19.Vector3(
+      new THREE26.Vector3(
         origin.x + velocity.x * t,
         origin.y + velocity.y * t - 0.5 * gravity * t * t,
         origin.z + velocity.z * t
@@ -5572,7 +5618,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 THREE19.Vector3().lerpVectors(previous, current, alpha);
+      return new THREE26.Vector3().lerpVectors(previous, current, alpha);
     }
   }
   return null;
@@ -5616,11 +5662,11 @@ __name(_TeleportAimGate, "TeleportAimGate");
 var TeleportAimGate = _TeleportAimGate;
 
 // core/systems/XRLocomotionSystem.ts
-var UP = new THREE19.Vector3(0, 1, 0);
+var UP = new THREE26.Vector3(0, 1, 0);
 var AXIS_DEADZONE = 0.5;
 var _XRLocomotionSystem = class _XRLocomotionSystem {
   constructor(inputSystem) {
-    this.raycaster = new THREE19.Raycaster();
+    this.raycaster = new THREE26.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. */
@@ -5746,7 +5792,7 @@ var _XRLocomotionSystem = class _XRLocomotionSystem {
       }
       if (this.turnLatched.has(source)) continue;
       this.turnLatched.add(source);
-      transform.rotation.y -= Math.sign(x) * THREE19.MathUtils.degToRad(rig.snapTurnDegrees);
+      transform.rotation.y -= Math.sign(x) * THREE26.MathUtils.degToRad(rig.snapTurnDegrees);
     }
   }
   applySmoothMove(world, rig, transform, inputs, deltaTime) {
@@ -5756,12 +5802,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 THREE19.Vector3();
+      const forward = new THREE26.Vector3();
       camera.getWorldDirection(forward);
       forward.y = 0;
       if (forward.lengthSq() < 1e-6) continue;
       forward.normalize();
-      const right = new THREE19.Vector3().crossVectors(forward, UP).normalize();
+      const right = new THREE26.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;
@@ -5842,7 +5888,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 THREE19.Vector3().subVectors(to, from);
+      const delta = new THREE26.Vector3().subVectors(to, from);
       const distance = delta.length();
       if (distance < 1e-6) continue;
       this.raycaster.set(from, delta.divideScalar(distance));
@@ -6115,12 +6161,12 @@ function planeColliderFromPolygon(polygon) {
 }
 __name(planeColliderFromPolygon, "planeColliderFromPolygon");
 function writeXrMeshGeometry(vertices, indices, existing) {
-  const geometry = existing ?? new THREE19.BufferGeometry();
+  const geometry = existing ?? new THREE26.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE19.BufferAttribute(vertices.slice(), 3)
+    new THREE26.BufferAttribute(vertices.slice(), 3)
   );
-  geometry.setIndex(new THREE19.BufferAttribute(indices.slice(), 1));
+  geometry.setIndex(new THREE26.BufferAttribute(indices.slice(), 1));
   geometry.deleteAttribute("normal");
   geometry.computeBoundingSphere();
   geometry.computeVertexNormals();
@@ -6128,14 +6174,14 @@ function writeXrMeshGeometry(vertices, indices, existing) {
 }
 __name(writeXrMeshGeometry, "writeXrMeshGeometry");
 function decomposeXrPose(matrixElements, target) {
-  const matrix = new THREE19.Matrix4().fromArray(
+  const matrix = new THREE26.Matrix4().fromArray(
     matrixElements
   );
-  const position = new THREE19.Vector3();
-  const quaternion = new THREE19.Quaternion();
-  const scale = new THREE19.Vector3();
+  const position = new THREE26.Vector3();
+  const quaternion = new THREE26.Quaternion();
+  const scale = new THREE26.Vector3();
   matrix.decompose(position, quaternion, scale);
-  const euler = new THREE19.Euler().setFromQuaternion(quaternion, "XYZ");
+  const euler = new THREE26.Euler().setFromQuaternion(quaternion, "XYZ");
   target.position.x = position.x;
   target.position.y = position.y;
   target.position.z = position.z;
@@ -6297,8 +6343,8 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
     this.viewerPos = null;
     /** The ONE global room mesh currently allowed to spawn. */
     this.electedGlobalMesh = null;
-    this.tmpViewerMatrix = new THREE19.Matrix4();
-    this.tmpViewPos = new THREE19.Vector3();
+    this.tmpViewerMatrix = new THREE26.Matrix4();
+    this.tmpViewPos = new THREE26.Vector3();
   }
   update(world, deltaTime = 0) {
     const presenting = world.isXrPresenting();
@@ -6657,7 +6703,7 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
     const geometry = writeXrMeshGeometry(mesh.vertices, mesh.indices);
     const label = mesh.semanticLabel ?? null;
     const isGlobalMesh = label === "global mesh";
-    const material = new THREE19.MeshBasicMaterial({
+    const material = new THREE26.MeshBasicMaterial({
       color: debugColorFor("mesh", label),
       wireframe: true,
       // The global scan is a coarse triangle soup of the whole room; at full
@@ -6678,8 +6724,8 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
       depthTest: true,
       depthWrite: false
     });
-    const root = new THREE19.Group();
-    const child = new THREE19.Mesh(geometry, material);
+    const root = new THREE26.Group();
+    const child = new THREE26.Mesh(geometry, material);
     child.visible = this.debugVisible;
     child.renderOrder = DEBUG_RENDER_ORDER;
     root.add(child);
@@ -6705,21 +6751,21 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
   }
   /** A thin box so a detected plane can be SEEN, not just collided with. */
   attachPlaneDebug(world, entry, collider, semanticLabel) {
-    const box = new THREE19.BoxGeometry(
+    const box = new THREE26.BoxGeometry(
       collider.size.x,
       collider.size.y,
       collider.size.z
     );
-    const geometry = new THREE19.EdgesGeometry(box);
+    const geometry = new THREE26.EdgesGeometry(box);
     box.dispose();
-    const material = new THREE19.LineBasicMaterial({
+    const material = new THREE26.LineBasicMaterial({
       color: debugColorFor("plane", semanticLabel),
       // Same depth policy as the mesh overlay — see createMeshEntity.
       depthTest: true,
       depthWrite: false
     });
-    const root = new THREE19.Group();
-    const child = new THREE19.LineSegments(geometry, material);
+    const root = new THREE26.Group();
+    const child = new THREE26.LineSegments(geometry, material);
     child.renderOrder = DEBUG_RENDER_ORDER;
     child.position.set(collider.offset.x, collider.offset.y, collider.offset.z);
     child.visible = this.debugVisible;
@@ -6795,6 +6841,14 @@ function normalizeOrientation(value) {
   return value === "horizontal" || value === "vertical" ? value : null;
 }
 __name(normalizeOrientation, "normalizeOrientation");
+var isDisplayOnlySlider = /* @__PURE__ */ __name((slider) => slider.readOnly === true || slider.variant !== void 0 && slider.variant !== "slider", "isDisplayOnlySlider");
+function snapToStep(value, slider) {
+  const { step, min, max } = slider;
+  if (!step || step <= 0) return value;
+  const snapped = min + Math.round((value - min) / step) * step;
+  return Math.min(max, Math.max(min, snapped));
+}
+__name(snapToStep, "snapToStep");
 var MOUSE_CLICK_TRAVEL_PX = 6;
 var PRESS_TINT_MIN_SECONDS = 0.1;
 var PRESS_TINT = 0.72;
@@ -6808,11 +6862,12 @@ var _UIInteractionSystem = class _UIInteractionSystem {
   constructor(interaction, options) {
     this.xrPresses = /* @__PURE__ */ new Map();
     this.mousePress = null;
-    this.mouseHover = null;
+    /** What each pointer is on. Two hands can rest on one widget. */
+    this.hovers = /* @__PURE__ */ new Map();
     /** entityId → seconds of pressed-tint left to display. */
     this.tintFloors = /* @__PURE__ */ new Map();
     this.tinted = /* @__PURE__ */ new Set();
-    this.raycaster = new THREE19.Raycaster();
+    this.raycaster = new THREE26.Raycaster();
     this.interaction = interaction;
     this.inputSystem = options?.inputSystem ?? null;
     interaction?.registerBusyContributor(
@@ -6822,8 +6877,10 @@ var _UIInteractionSystem = class _UIInteractionSystem {
   update(world, deltaTime = 0) {
     if (world.isEditorMode()) return;
     if (world.isXrPresenting()) {
+      this.setHover(world, "mouse", null, null);
       this.updateXr(world);
     } else {
+      this.dropGoneXrHovers(world, []);
       this.updateMouse(world);
     }
     this.updateTints(world, deltaTime);
@@ -6837,6 +6894,7 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     for (const input of inputs) {
       const hover = interaction.getHoverForInput(input);
       const hovered = hover ? this.widgetKind(world, hover.entityId) : null;
+      this.setHover(world, input, hover && hovered ? hover.entityId : null, input);
       if (input.selectStart && hover && hovered) {
         this.xrPresses.set(input, {
           entityId: hover.entityId,
@@ -6865,6 +6923,15 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     for (const [input] of this.xrPresses) {
       if (!inputs.includes(input)) this.xrPresses.delete(input);
     }
+    this.dropGoneXrHovers(world, inputs);
+  }
+  /** A transient source leaves with no select edge to clear its hover. */
+  dropGoneXrHovers(world, inputs) {
+    for (const source of [...this.hovers.keys()]) {
+      if (source !== "mouse" && !inputs.includes(source)) {
+        this.setHover(world, source, null, source);
+      }
+    }
   }
   // ── Mouse path (flat preview) ──────────────────────────────────────────────
   updateMouse(world) {
@@ -6872,22 +6939,7 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     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,
-          "onUiHoverEnd",
-          (b, e) => b.onUiHoverEnd(e)
-        );
-      }
-      if (hovered !== null) {
-        this.setTint(world, hovered, HOVER_TINT);
-        this.dispatchBubbling(world, hovered, "onUiHoverStart", (b, e) => b.onUiHoverStart(e));
-      }
-      this.mouseHover = hovered;
-    }
+    this.setHover(world, "mouse", hovered, null);
     if (input.getMouseDown("left") && hovered) {
       const kind = this.widgetKind(world, hovered);
       if (kind) {
@@ -6895,12 +6947,12 @@ var _UIInteractionSystem = class _UIInteractionSystem {
         this.beginPressTint(world, hovered);
       }
     }
-    if (this.mousePress) {
+    if (this.mousePress && !input.getMouseDown("left")) {
       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 (this.mousePress?.kind === "slider") {
+      this.dragSliderMouse(world, this.mousePress.entityId);
     }
     if (input.getMouseUp("left") && this.mousePress) {
       const press = this.mousePress;
@@ -6929,15 +6981,24 @@ var _UIInteractionSystem = class _UIInteractionSystem {
       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 THREE19.Vector2(ndcX, ndcY), world.getCamera());
+    this.raycaster.setFromCamera(new THREE26.Vector2(ndcX, ndcY), world.getCamera());
     const hits = world.raycast(
       this.raycaster.ray.origin,
       this.raycaster.ray.direction
     );
+    let surfaceTree = null;
     for (const hit of hits) {
-      if (typeof hit.entityId !== "number") continue;
-      if (this.widgetKind(world, hit.entityId)) return hit.entityId;
-      return null;
+      const entityId = hit.entityId;
+      if (typeof entityId !== "number") continue;
+      if (!isShownInScene(world, entityId)) continue;
+      if (this.widgetKind(world, entityId)) {
+        const sameSurface = surfaceTree === null || widgetTreeRoot(world, entityId) === surfaceTree;
+        return sameSurface ? entityId : null;
+      }
+      if (!isUiWidget(world, entityId)) return null;
+      const tree = widgetTreeRoot(world, entityId);
+      if (surfaceTree !== null && tree !== surfaceTree) return null;
+      surfaceTree = tree;
     }
     return null;
   }
@@ -6945,7 +7006,8 @@ var _UIInteractionSystem = class _UIInteractionSystem {
   widgetKind(world, entityId) {
     if (world.getComponent(entityId, UIButtonComponent)) return "button";
     if (world.getComponent(entityId, UIToggleComponent)) return "toggle";
-    if (world.getComponent(entityId, UISliderComponent)) return "slider";
+    const slider = world.getComponent(entityId, UISliderComponent);
+    if (slider && !isDisplayOnlySlider(slider)) return "slider";
     return null;
   }
   fire(world, press, input) {
@@ -6996,7 +7058,10 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     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);
+    const next = snapToStep(
+      slider.min + t * (slider.max - slider.min),
+      slider
+    );
     if (Math.abs(next - slider.value) < 1e-4) return;
     slider.value = next;
     this.dispatchBubbling(
@@ -7074,6 +7139,43 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     const name = world.getComponent(entityId, Name)?.value;
     return typeof name === "string" ? name : String(entityId);
   }
+  // ── Hover ──────────────────────────────────────────────────────────────────
+  setHover(world, source, next, input) {
+    const previous = this.hovers.get(source) ?? null;
+    if (previous === next) return;
+    if (next === null) this.hovers.delete(source);
+    else this.hovers.set(source, next);
+    if (previous !== null && !this.isHovered(previous)) {
+      if (!this.tintFloors.has(previous)) this.setTint(world, previous, 1);
+      this.dispatchBubbling(
+        world,
+        previous,
+        "onUiHoverEnd",
+        (b, e) => b.onUiHoverEnd(e),
+        input
+      );
+    }
+    if (next !== null && this.hoverCount(next) === 1) {
+      if (!this.tintFloors.has(next)) this.setTint(world, next, HOVER_TINT);
+      this.dispatchBubbling(
+        world,
+        next,
+        "onUiHoverStart",
+        (b, e) => b.onUiHoverStart(e),
+        input
+      );
+    }
+  }
+  hoverCount(entityId) {
+    let count = 0;
+    for (const hovered of this.hovers.values()) {
+      if (hovered === entityId) count += 1;
+    }
+    return count;
+  }
+  isHovered(entityId) {
+    return this.hoverCount(entityId) > 0;
+  }
   // ── Pressed/hover tint ─────────────────────────────────────────────────────
   beginPressTint(world, entityId) {
     this.setTint(world, entityId, PRESS_TINT);
@@ -7091,11 +7193,7 @@ var _UIInteractionSystem = class _UIInteractionSystem {
       if (stillHeld) continue;
       if (next <= 0) {
         this.tintFloors.delete(entityId);
-        this.setTint(
-          world,
-          entityId,
-          this.mouseHover === entityId ? HOVER_TINT : 1
-        );
+        this.setTint(world, entityId, this.isHovered(entityId) ? HOVER_TINT : 1);
       } else {
         this.tintFloors.set(entityId, next);
       }
@@ -7106,14 +7204,96 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     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);
-    });
+    for (const child of object.children) {
+      const tag = child.userData[UI_PART_KEY];
+      if (!tag) continue;
+      tag.tint = scalar;
+      applyPartColor(child, tag);
+    }
   }
 };
 __name(_UIInteractionSystem, "UIInteractionSystem");
 var UIInteractionSystem = _UIInteractionSystem;
+var fonts = /* @__PURE__ */ new Map();
+var images = /* @__PURE__ */ new Map();
+function hash(text) {
+  let value = 5381;
+  for (let i = 0; i < text.length; i += 1) {
+    value = (value * 33 ^ text.charCodeAt(i)) >>> 0;
+  }
+  return value.toString(36);
+}
+__name(hash, "hash");
+function tracked(url, work) {
+  const manager = THREE26.DefaultLoadingManager;
+  manager.itemStart(url);
+  return work.catch((error) => {
+    manager.itemError(url);
+    throw error;
+  }).finally(() => manager.itemEnd(url));
+}
+__name(tracked, "tracked");
+function uiFontFamily(src) {
+  if (typeof FontFace === "undefined" || typeof document === "undefined") {
+    return null;
+  }
+  const known = fonts.get(src);
+  if (known) return known.value;
+  const entry = { value: null, settled: false };
+  fonts.set(src, entry);
+  const url = resolvePrefabAssetUrl(src);
+  const family = `relu-ui-${hash(url)}`;
+  tracked(
+    url,
+    (async () => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const buffer = await response.arrayBuffer();
+      const face = new FontFace(family, buffer, { weight: "100 900" });
+      await face.load();
+      document.fonts.add(face);
+    })()
+  ).then(() => {
+    entry.value = family;
+  }).catch((error) => {
+    console.warn(`[spatial-ecs] Couldn't load UI font ${src}.`, error);
+  }).finally(() => {
+    entry.settled = true;
+  });
+  return null;
+}
+__name(uiFontFamily, "uiFontFamily");
+function uiImage(src) {
+  if (typeof Image === "undefined" || typeof fetch === "undefined") {
+    return null;
+  }
+  const known = images.get(src);
+  if (known) return known.value;
+  const entry = { value: null, settled: false };
+  images.set(src, entry);
+  const url = resolvePrefabAssetUrl(src);
+  tracked(
+    url,
+    (async () => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const blob = await response.blob();
+      const typed = /\.svg(\?|#|$)/i.test(url) ? new Blob([blob], { type: "image/svg+xml" }) : blob;
+      const image = new Image();
+      image.src = URL.createObjectURL(typed);
+      await image.decode();
+      return image;
+    })()
+  ).then((image) => {
+    entry.value = image;
+  }).catch((error) => {
+    console.warn(`[spatial-ecs] Couldn't load UI image ${src}.`, error);
+  }).finally(() => {
+    entry.settled = true;
+  });
+  return null;
+}
+__name(uiImage, "uiImage");
 
 // core/ui/uiCanvas.ts
 var DEFAULT_PIXELS_PER_METER = 1024;
@@ -7186,18 +7366,21 @@ function clampLines(measure, lines, maxLines, maxWidthPx) {
 }
 __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));
+var NO_ASSETS = { image: /* @__PURE__ */ __name(() => null, "image") };
+function tracePath(ctx, x, y, w, h, radii) {
+  const limit = Math.min(w / 2, h / 2);
+  const fit = /* @__PURE__ */ __name((r) => Math.max(0, Math.min(r, limit)), "fit");
+  const [tl, tr, br, bl] = (Array.isArray(radii) ? radii : [radii, radii, radii, radii]).map(fit);
   ctx.beginPath();
   if (typeof ctx.roundRect === "function") {
-    ctx.roundRect(x, y, w, h, radius);
+    ctx.roundRect(x, y, w, h, [tl, tr, br, bl]);
     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.moveTo(x + tl, y);
+  ctx.arcTo(x + w, y, x + w, y + h, tr);
+  ctx.arcTo(x + w, y + h, x, y + h, br);
+  ctx.arcTo(x, y + h, x, y, bl);
+  ctx.arcTo(x, y, x + w, y, tl);
   ctx.closePath();
 }
 __name(tracePath, "tracePath");
@@ -7217,108 +7400,244 @@ function withOpacity(ctx, color, 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))
-  );
+function fillStyleFor(ctx, paint, box, opacity) {
+  if (paint.kind === "solid") return withOpacity(ctx, paint.color, opacity);
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  let gradient;
+  if (paint.kind === "linear") {
+    const radians = paint.angle * Math.PI / 180;
+    const dx = Math.sin(radians);
+    const dy = -Math.cos(radians);
+    const half = (Math.abs(box.w * dx) + Math.abs(box.h * dy)) / 2;
+    gradient = ctx.createLinearGradient(
+      cx - dx * half,
+      cy - dy * half,
+      cx + dx * half,
+      cy + dy * half
+    );
+  } else {
+    gradient = ctx.createRadialGradient(
+      cx,
+      cy,
+      0,
+      cx,
+      cy,
+      Math.max(box.w, box.h) / 2
+    );
+  }
+  for (const stop of paint.stops) {
+    gradient.addColorStop(stop.at, withOpacity(ctx, stop.color, opacity));
+  }
+  return gradient;
+}
+__name(fillStyleFor, "fillStyleFor");
+function drawImagePaint(ctx, paint, box, assets) {
+  const image = assets.image(paint.src);
+  if (!image) return;
+  const sourceW = image.naturalWidth || box.w;
+  const sourceH = image.naturalHeight || box.h;
+  const scale = paint.fit === "fill" ? 1 : paint.fit === "cover" ? Math.max(box.w / sourceW, box.h / sourceH) : Math.min(box.w / sourceW, box.h / sourceH);
+  const w = paint.fit === "fill" ? box.w : sourceW * scale;
+  const h = paint.fit === "fill" ? box.h : sourceH * scale;
+  const x = box.x + (box.w - w) / 2;
+  const y = box.y + (box.h - h) / 2;
+  if (!paint.tint) {
+    ctx.drawImage(image, x, y, w, h);
+    return;
+  }
+  const scratch = assets.scratch?.(Math.ceil(w), Math.ceil(h));
+  if (!scratch) {
+    ctx.drawImage(image, x, y, w, h);
+    return;
+  }
+  scratch.drawImage(image, 0, 0, w, h);
+  scratch.globalCompositeOperation = "source-in";
+  scratch.fillStyle = paint.tint;
+  scratch.fillRect(0, 0, w, h);
+  ctx.drawImage(scratch.canvas, x, y, w, h);
+}
+__name(drawImagePaint, "drawImagePaint");
+function pxRadii(radius, density) {
+  return radius.map((r) => r * density);
+}
+__name(pxRadii, "pxRadii");
+function drawBoxShadow(ctx, box, radii, shadow, density) {
+  ctx.save();
+  ctx.shadowColor = shadow.color;
+  ctx.shadowBlur = shadow.blur * density;
+  ctx.shadowOffsetX = shadow.x * density;
+  ctx.shadowOffsetY = -shadow.y * density;
+  ctx.fillStyle = "#000000";
+  tracePath(ctx, box.x, box.y, box.w, box.h, radii);
   ctx.fill();
-  if (border > 0) {
+  ctx.restore();
+  ctx.save();
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.fillStyle = "#000000";
+  tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+  ctx.fill();
+  ctx.restore();
+}
+__name(drawBoxShadow, "drawBoxShadow");
+function drawChrome(ctx, box, density, chrome, assets = NO_ASSETS) {
+  const radii = pxRadii(chrome.radius, density);
+  for (const shadow of chrome.shadows) {
+    drawBoxShadow(ctx, box, radii, shadow, density);
+  }
+  const opacity = Math.max(0, Math.min(1, chrome.fillOpacity));
+  if (chrome.fill?.kind === "image") {
+    ctx.save();
+    tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+    ctx.clip();
+    ctx.globalAlpha = opacity;
+    drawImagePaint(ctx, chrome.fill, box, assets);
+    ctx.restore();
+  } else if (chrome.fill) {
+    tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+    ctx.fillStyle = fillStyleFor(ctx, chrome.fill, box, opacity);
+    ctx.fill();
+  }
+  if (chrome.edge) {
+    const width = chrome.edge.width * density;
+    ctx.save();
+    tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+    ctx.clip();
+    const fade = ctx.createLinearGradient(0, box.y, 0, box.y + box.h / 2);
+    fade.addColorStop(0, chrome.edge.color);
+    fade.addColorStop(1, withOpacity(ctx, chrome.edge.color, 0));
+    ctx.strokeStyle = fade;
+    ctx.lineWidth = width * 2;
+    tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+    ctx.stroke();
+    ctx.restore();
+  }
+  if (chrome.border) {
+    const border = chrome.border.width * density;
     tracePath(
       ctx,
-      border / 2,
-      border / 2,
-      pxWidth - border,
-      pxHeight - border,
-      Math.max(0, radius - border / 2)
+      box.x + border / 2,
+      box.y + border / 2,
+      box.w - border,
+      box.h - border,
+      radii.map((r) => Math.max(0, r - border / 2))
     );
-    ctx.strokeStyle = style.borderColor;
+    ctx.strokeStyle = chrome.border.color;
     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);
+var applyTransform2 = /* @__PURE__ */ __name((text, transform) => transform === "upper" ? text.toUpperCase() : transform === "lower" ? text.toLowerCase() : text, "applyTransform");
+function fillTracked(ctx, line, x, y, trackingPx, width) {
+  let cursor = ctx.textAlign === "center" ? x - width / 2 : ctx.textAlign === "right" ? x - width : x;
+  const align = ctx.textAlign;
+  ctx.textAlign = "left";
+  for (const glyph of line) {
+    ctx.fillText(glyph, cursor, y);
+    cursor += ctx.measureText(glyph).width + trackingPx;
+  }
+  ctx.textAlign = align;
+}
+__name(fillTracked, "fillTracked");
+function drawTextBlock(ctx, box, density, text, style, family = null, assets = NO_ASSETS) {
+  const fontPx = Math.max(4, style.fontSize * density);
+  const paddingPx = style.padding * density;
+  const contentW = Math.max(1, box.w - paddingPx * 2);
+  const contentH = Math.max(1, box.h - 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 trackingPx = style.tracking * density;
+  const stack = family ? `"${family}", ${UI_FONT_STACK}` : UI_FONT_STACK;
+  ctx.font = `${style.fontWeight} ${fontPx}px ${stack}`;
+  const nativeTracking = trackingPx !== 0 && "letterSpacing" in ctx;
+  if (nativeTracking) {
+    ctx.letterSpacing = `${trackingPx}px`;
+  }
+  const manualTracking = trackingPx !== 0 && !nativeTracking;
+  const measure = /* @__PURE__ */ __name((s) => ctx.measureText(s).width + (manualTracking ? trackingPx * s.length : 0), "measure");
+  const fits = Math.max(1, Math.floor(contentH / lineHeightPx));
+  const maxLines = style.maxLines ? Math.min(fits, style.maxLines) : fits;
   const lines = clampLines(
     measure,
-    wrapText(measure, text, contentW),
+    wrapText(measure, applyTransform2(text, style.transform), 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;
+  const top = style.valign === "top" ? box.y + paddingPx : style.valign === "bottom" ? box.y + box.h - paddingPx - blockH : box.y + (box.h - blockH) / 2;
+  const anchorX = style.align === "left" ? box.x + paddingPx : style.align === "right" ? box.x + box.w - paddingPx : box.x + box.w / 2;
   ctx.save();
-  tracePath(ctx, 0, 0, pxWidth, pxHeight, 0);
-  ctx.clip();
-  ctx.fillStyle = style.color;
+  if (style.paint.kind === "image") {
+    ctx.fillStyle = "#ffffff";
+  } else {
+    ctx.fillStyle = fillStyleFor(ctx, style.paint, box, 1);
+  }
+  if (style.shadow) {
+    ctx.shadowColor = style.shadow.color;
+    ctx.shadowBlur = style.shadow.blur * density;
+    ctx.shadowOffsetX = style.shadow.x * density;
+    ctx.shadowOffsetY = -style.shadow.y * density;
+  }
   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);
+    const y = top + (i + 0.5) * lineHeightPx;
+    if (manualTracking) {
+      fillTracked(ctx, lines[i], anchorX, y, trackingPx, measure(lines[i]));
+    } else {
+      ctx.fillText(lines[i], anchorX, y);
+    }
   }
   ctx.restore();
+  if (style.paint.kind === "image") {
+    ctx.save();
+    ctx.globalCompositeOperation = "source-atop";
+    drawImagePaint(ctx, style.paint, box, assets);
+    ctx.restore();
+  }
+  if (nativeTracking) {
+    ctx.letterSpacing = "0px";
+  }
 }
 __name(drawTextBlock, "drawTextBlock");
-function panelSignature(widthM, heightM, size, style) {
+function panelSignature(widthM, heightM, size, chrome, loaded = null) {
   return JSON.stringify([
     widthM,
     heightM,
     size.pxWidth,
     size.pxHeight,
-    style.backgroundColor,
-    style.backgroundOpacity,
-    style.cornerRadiusMeters,
-    style.borderWidthMeters,
-    style.borderColor
+    chrome,
+    loaded
   ]);
 }
 __name(panelSignature, "panelSignature");
-function textSignature(widthM, heightM, size, text, style) {
+function textSignature(widthM, heightM, size, text, style, family = null) {
   return JSON.stringify([
     widthM,
     heightM,
     size.pxWidth,
     size.pxHeight,
     text,
-    style.fontSizeMeters,
-    style.fontWeight,
-    style.color,
-    style.align,
-    style.valign,
-    style.lineHeight,
-    style.paddingMeters
+    style,
+    family
   ]);
 }
 __name(textSignature, "textSignature");
-function buttonSignature(widthM, heightM, size, panel, label, text) {
+function buttonSignature(widthM, heightM, size, chrome, label, text, family = null, loaded = null) {
   return JSON.stringify([
-    panelSignature(widthM, heightM, size, panel),
+    panelSignature(widthM, heightM, size, chrome, loaded),
     label,
-    text.fontSizeMeters,
-    text.fontWeight,
-    text.color
+    text,
+    family
   ]);
 }
 __name(buttonSignature, "buttonSignature");
-function trackSignature(widthM, heightM, size, panel, accentColor, knobColor) {
+function trackSignature(widthM, heightM, size, chrome, accentColor, knobColor, variant = null) {
   return JSON.stringify([
-    panelSignature(widthM, heightM, size, panel),
+    panelSignature(widthM, heightM, size, chrome),
     accentColor,
-    knobColor
+    knobColor,
+    variant
   ]);
 }
 __name(trackSignature, "trackSignature");
@@ -7328,17 +7647,226 @@ function drawRoundedBar(ctx, pxX, pxY, pxW, pxH, color) {
   ctx.fill();
 }
 __name(drawRoundedBar, "drawRoundedBar");
+function drawCheckMark(ctx, box, color) {
+  ctx.beginPath();
+  ctx.moveTo(box.x + box.w * 0.24, box.y + box.h * 0.54);
+  ctx.lineTo(box.x + box.w * 0.43, box.y + box.h * 0.72);
+  ctx.lineTo(box.x + box.w * 0.77, box.y + box.h * 0.3);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = box.h * 0.13;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.stroke();
+}
+__name(drawCheckMark, "drawCheckMark");
+function drawDot(ctx, cx, cy, radius, color) {
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+__name(drawDot, "drawDot");
+function drawRing(ctx, box, t, trackColor, accentColor) {
+  const thickness = Math.min(box.w, box.h) * 0.14;
+  const radius = Math.min(box.w, box.h) / 2 - thickness / 2;
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  ctx.lineWidth = thickness;
+  ctx.lineCap = "round";
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.strokeStyle = trackColor;
+  ctx.stroke();
+  if (t <= 0) return;
+  const start = -Math.PI / 2;
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, start, start + t * Math.PI * 2);
+  ctx.strokeStyle = accentColor;
+  ctx.stroke();
+}
+__name(drawRing, "drawRing");
+function drawIconLabel(ctx, box, density, label, style, family, icon, position, assets) {
+  const fontPx = style.fontSize * density;
+  const iconPx = fontPx * 1.3;
+  const gapPx = label ? fontPx * 0.5 : 0;
+  const stack = family ? `"${family}", ${UI_FONT_STACK}` : UI_FONT_STACK;
+  ctx.font = `${style.fontWeight} ${fontPx}px ${stack}`;
+  const labelPx = label ? ctx.measureText(label).width : 0;
+  const groupPx = iconPx + gapPx + labelPx;
+  const startX = box.x + (box.w - groupPx) / 2;
+  const iconX = position === "left" ? startX : startX + labelPx + gapPx;
+  const labelX = position === "left" ? startX + iconPx + gapPx : startX;
+  drawImagePaint(
+    ctx,
+    { src: icon, fit: "contain", tint: style.color },
+    { x: iconX, y: box.y + (box.h - iconPx) / 2, w: iconPx, h: iconPx },
+    assets
+  );
+  if (label) {
+    drawTextBlock(
+      ctx,
+      { x: labelX, y: box.y, w: labelPx + 2, h: box.h },
+      density,
+      label,
+      { ...style, align: "left", padding: 0 },
+      family,
+      assets
+    );
+  }
+}
+__name(drawIconLabel, "drawIconLabel");
+
+// core/ui/uiPaintOrder.ts
+var BASE_RENDER_ORDER = 10;
+var MAX_RENDER_ORDER = 890;
+var MAX_TREE_RANK = MAX_RENDER_ORDER - BASE_RENDER_ORDER - 1;
+var SLOT_STEP = 1e-4;
+var SLOTS_PER_WIDGET = 3;
+var MAX_WIDGET_INDEX = Math.floor(1 / SLOT_STEP / SLOTS_PER_WIDGET) - 1;
+var PLANE_EPSILON_METERS = 1e-3;
+var PARALLEL_DOT = 1 - 1e-4;
+var dot = /* @__PURE__ */ __name((a, b) => a.x * b.x + a.y * b.y + a.z * b.z, "dot");
+var length = /* @__PURE__ */ __name((a) => Math.sqrt(dot(a, a)), "length");
+var subtract = /* @__PURE__ */ __name((a, b) => ({
+  x: a.x - b.x,
+  y: a.y - b.y,
+  z: a.z - b.z
+}), "subtract");
+function unit(a) {
+  const len = length(a);
+  if (len < 1e-9) return { x: 0, y: 0, z: 0 };
+  return { x: a.x / len, y: a.y / len, z: a.z / len };
+}
+__name(unit, "unit");
+function normalOf(rect) {
+  const { halfX: a, halfY: b } = rect;
+  return unit({
+    x: a.y * b.z - a.z * b.y,
+    y: a.z * b.x - a.x * b.z,
+    z: a.x * b.y - a.y * b.x
+  });
+}
+__name(normalOf, "normalOf");
+var planeDistance = /* @__PURE__ */ __name((rect, normal, eye) => Math.abs(dot(subtract(eye, rect.center), normal)), "planeDistance");
+function closestPointDistance(rect, eye) {
+  const toEye = subtract(eye, rect.center);
+  const lenX = length(rect.halfX);
+  const lenY = length(rect.halfY);
+  const axisX = unit(rect.halfX);
+  const axisY = unit(rect.halfY);
+  const s = Math.max(-lenX, Math.min(lenX, dot(toEye, axisX)));
+  const t = Math.max(-lenY, Math.min(lenY, dot(toEye, axisY)));
+  return length({
+    x: toEye.x - axisX.x * s - axisY.x * t,
+    y: toEye.y - axisX.y * s - axisY.y * t,
+    z: toEye.z - axisX.z * s - axisY.z * t
+  });
+}
+__name(closestPointDistance, "closestPointDistance");
+var areaOf = /* @__PURE__ */ __name((rect) => length(rect.halfX) * length(rect.halfY), "areaOf");
+function comparePaintRects(a, b, eye) {
+  const normalA = normalOf(a);
+  const normalB = normalOf(b);
+  const parallel = Math.abs(dot(normalA, normalB)) >= PARALLEL_DOT;
+  const distanceA = parallel ? planeDistance(a, normalA, eye) : closestPointDistance(a, eye);
+  const distanceB = parallel ? planeDistance(b, normalB, eye) : closestPointDistance(b, eye);
+  if (Math.abs(distanceA - distanceB) > PLANE_EPSILON_METERS) {
+    return distanceB - distanceA;
+  }
+  const areaA = areaOf(a);
+  const areaB = areaOf(b);
+  if (areaA !== areaB) return areaB - areaA;
+  return a.id - b.id;
+}
+__name(comparePaintRects, "comparePaintRects");
+function buildPaintTrees(nodes) {
+  const known = new Set(nodes.map((node) => node.id));
+  const children = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const node of nodes) {
+    if (node.parent !== null && known.has(node.parent)) {
+      const siblings = children.get(node.parent);
+      if (siblings) siblings.push(node.id);
+      else children.set(node.parent, [node.id]);
+    } else {
+      roots.push(node.id);
+    }
+  }
+  const trees = [];
+  const visited = /* @__PURE__ */ new Set();
+  const walk = /* @__PURE__ */ __name((id, order) => {
+    if (visited.has(id)) return;
+    visited.add(id);
+    order.push(id);
+    const kids = children.get(id);
+    if (!kids) return;
+    for (const kid of [...kids].sort((a, b) => a - b)) walk(kid, order);
+  }, "walk");
+  for (const rootId of [...roots].sort((a, b) => a - b)) {
+    const order = [];
+    walk(rootId, order);
+    trees.push({ rootId, order });
+  }
+  return trees;
+}
+__name(buildPaintTrees, "buildPaintTrees");
+function paintSlots(treeRank, widgetIndex) {
+  const base = BASE_RENDER_ORDER + Math.min(treeRank, MAX_TREE_RANK);
+  const index = Math.min(widgetIndex, MAX_WIDGET_INDEX);
+  const slot = /* @__PURE__ */ __name((offset) => base + (index * SLOTS_PER_WIDGET + offset) * SLOT_STEP, "slot");
+  return { face: slot(0), parts: slot(1), descendants: slot(2) };
+}
+__name(paintSlots, "paintSlots");
+function assignPaintOrder(trees, rects, eye) {
+  const sorted = trees.filter((tree) => rects.has(tree.rootId)).sort(
+    (a, b) => comparePaintRects(
+      rects.get(a.rootId),
+      rects.get(b.rootId),
+      eye
+    )
+  );
+  const slots = /* @__PURE__ */ new Map();
+  sorted.forEach((tree, rank) => {
+    tree.order.forEach((id, index) => {
+      slots.set(id, paintSlots(rank, index));
+    });
+  });
+  return slots;
+}
+__name(assignPaintOrder, "assignPaintOrder");
 
 // core/systems/UIPanelSystem.ts
-var FACE_RENDER_ORDER = 10;
 var CHILD_Z = 2e-3;
+var DESCENDANT_WALK_INTERVAL = 30;
+var METER_STEPS = 200;
+var CLEAR_CHROME = {
+  backgroundColor: "#000000",
+  backgroundOpacity: 0,
+  cornerRadius: 0,
+  borderWidth: 0,
+  borderColor: "#000000"
+};
+var PAINT_STAMP_KEY = "__uiPaintStamp";
 var _UIPanelSystem = class _UIPanelSystem {
   constructor(options) {
     this.entries = /* @__PURE__ */ new Map();
+    this.framesUntilDescendantWalk = 0;
+    /** Whether any panel defines tokens, so plain scenes skip the parent walk. */
+    this.anyTokens = false;
+    this.drawAssets = {
+      image: /* @__PURE__ */ __name((src) => uiImage(src), "image"),
+      scratch: /* @__PURE__ */ __name((width, height) => {
+        const canvas = this.createCanvas();
+        canvas.width = width;
+        canvas.height = height;
+        return canvas.getContext("2d");
+      }, "scratch")
+    };
     this.createCanvas = options?.createCanvas ?? (() => document.createElement("canvas"));
   }
   update(world, deltaTime = 0) {
     const live = /* @__PURE__ */ new Set();
+    this.anyTokens = world.query(UIPanelComponent).some((id) => world.getComponent(id, UIPanelComponent)?.tokens);
     for (const entityId of world.query(UIPanelComponent, Object3DRef)) {
       const panel = world.getComponent(entityId, UIPanelComponent);
       if (!panel) continue;
@@ -7376,6 +7904,7 @@ var _UIPanelSystem = class _UIPanelSystem {
         this.entries.delete(entityId);
       }
     }
+    this.applyPaintOrder(world);
   }
   /** All GPU/canvas resources; call on world teardown. */
   dispose() {
@@ -7384,84 +7913,188 @@ var _UIPanelSystem = class _UIPanelSystem {
   }
   // ── 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);
-    });
+    const chrome = resolveChrome(
+      panel,
+      panel.style,
+      this.tokensFor(world, entityId)
+    );
+    const bleed = chromeBleed(chrome);
+    const size = resolveCanvasSize(
+      panel.width + bleed * 2,
+      panel.height + bleed * 2,
+      panel.pixelDensity
+    );
+    const signature = panelSignature(
+      panel.width,
+      panel.height,
+      size,
+      chrome,
+      imagesLoaded(chrome)
+    );
+    this.rebuildIfChanged(
+      world,
+      entityId,
+      signature,
+      panel,
+      bleed,
+      size,
+      (ctx) => {
+        drawChrome(
+          ctx,
+          layoutBox(panel, bleed, size.density),
+          size.density,
+          chrome,
+          this.drawAssets
+        );
+      },
+      THREE26.DoubleSide
+    );
   }
   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);
-    });
+    const tokens = this.tokensFor(world, entityId);
+    const chrome = text.style ? resolveChrome(CLEAR_CHROME, text.style, tokens) : null;
+    const bleed = chrome ? chromeBleed(chrome) : 0;
+    const size = resolveCanvasSize(
+      text.width + bleed * 2,
+      text.height + bleed * 2,
+      text.pixelDensity
+    );
+    const style = resolveText(text, text.style, tokens);
+    const family = familyOf(style.font);
+    const signature = JSON.stringify([
+      textSignature(text.width, text.height, size, text.text, style, family),
+      chrome,
+      chrome ? imagesLoaded(chrome) : null
+    ]);
+    this.rebuildIfChanged(
+      world,
+      entityId,
+      signature,
+      text,
+      bleed,
+      size,
+      (ctx) => {
+        const box = layoutBox(text, bleed, size.density);
+        if (chrome) {
+          drawChrome(ctx, box, size.density, chrome, this.drawAssets);
+        }
+        drawTextBlock(
+          ctx,
+          box,
+          size.density,
+          text.text,
+          style,
+          family,
+          this.drawAssets
+        );
+      }
+    );
   }
   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 tokens = this.tokensFor(world, entityId);
+    const chrome = resolveChrome(button, button.style, tokens);
+    const bleed = chromeBleed(chrome);
+    const size = resolveCanvasSize(
+      button.width + bleed * 2,
+      button.height + bleed * 2,
+      button.pixelDensity
+    );
+    const label = resolveText(
+      {
+        fontSize: button.fontSize,
+        fontWeight: button.fontWeight,
+        color: button.textColor,
+        align: "center",
+        valign: "middle",
+        lineHeight: 1.2,
+        padding: 0.01
+      },
+      button.style,
+      tokens
+    );
+    const family = familyOf(label.font);
+    const icon = button.icon ? resolveToken(button.icon, tokens) : null;
     const signature = buttonSignature(
       button.width,
       button.height,
       size,
       chrome,
       button.label,
-      label
+      label,
+      family,
+      [imagesLoaded(chrome), icon, icon ? !!uiImage(icon) : false]
+    );
+    this.rebuildIfChanged(
+      world,
+      entityId,
+      signature,
+      button,
+      bleed,
+      size,
+      (ctx) => {
+        const box = layoutBox(button, bleed, size.density);
+        drawChrome(ctx, box, size.density, chrome, this.drawAssets);
+        if (icon) {
+          drawIconLabel(
+            ctx,
+            box,
+            size.density,
+            button.label,
+            label,
+            family,
+            icon,
+            button.iconPosition ?? "left",
+            this.drawAssets
+          );
+        } else {
+          drawTextBlock(
+            ctx,
+            box,
+            size.density,
+            button.label,
+            label,
+            family,
+            this.drawAssets
+          );
+        }
+      }
     );
-    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 tokens = this.tokensFor(world, entityId);
+    const accent = resolveToken(toggle.accentColor, tokens);
+    const track = resolveToken(toggle.trackColor, tokens);
+    const knobColor = resolveToken(toggle.knobColor, tokens);
+    const size = resolveCanvasSize(
+      toggle.width,
+      toggle.height,
+      toggle.pixelDensity
+    );
+    const variant = toggle.variant ?? "switch";
+    if (variant !== "switch") {
+      this.syncMarkToggle(world, entityId, toggle, accent, track, knobColor);
+      return;
+    }
+    const chrome = resolveChrome(
+      {
+        backgroundColor: toggle.value ? accent : track,
+        backgroundOpacity: 1,
+        cornerRadius: toggle.height / 2,
+        borderWidth: 0,
+        borderColor: "#000000"
+      },
+      toggle.style,
+      tokens
+    );
     const signature = JSON.stringify([
       trackSignature(
         toggle.width,
         toggle.height,
         size,
         chrome,
-        toggle.accentColor,
-        toggle.knobColor
+        accent,
+        knobColor,
+        variant
       ),
       toggle.value
     ]);
@@ -7469,18 +8102,24 @@ var _UIPanelSystem = class _UIPanelSystem {
       world,
       entityId,
       signature,
-      toggle.width,
-      toggle.height,
+      toggle,
+      0,
       size,
       (ctx) => {
-        drawChrome(ctx, size.pxWidth, size.pxHeight, size.density, chrome);
+        drawChrome(
+          ctx,
+          layoutBox(toggle, 0, size.density),
+          size.density,
+          chrome,
+          this.drawAssets
+        );
       }
     );
     if (!entry) return;
     if (!entry.knob) {
       entry.knob = this.makeDisc(
         toggle.height * 0.4,
-        toggle.knobColor,
+        knobColor,
         entry.face.parent,
         CHILD_Z
       );
@@ -7492,35 +8131,95 @@ var _UIPanelSystem = class _UIPanelSystem {
     knob.position.x += (target - knob.position.x) * (deltaTime > 0 ? ease : 1);
     knob.position.z = CHILD_Z;
   }
+  /** Checkbox and radio: a box or ring at the left of the widget's area. */
+  syncMarkToggle(world, entityId, toggle, accent, track, markColor) {
+    const tokens = this.tokensFor(world, entityId);
+    const radio = toggle.variant === "radio";
+    const size = resolveCanvasSize(
+      toggle.width,
+      toggle.height,
+      toggle.pixelDensity
+    );
+    const side = toggle.height;
+    const chrome = resolveChrome(
+      {
+        backgroundColor: toggle.value ? accent : track,
+        backgroundOpacity: 1,
+        cornerRadius: radio ? side / 2 : side * 0.2,
+        borderWidth: 0,
+        borderColor: "#000000"
+      },
+      toggle.style,
+      tokens
+    );
+    const signature = JSON.stringify([
+      trackSignature(
+        toggle.width,
+        toggle.height,
+        size,
+        chrome,
+        accent,
+        markColor,
+        toggle.variant ?? null
+      ),
+      toggle.value
+    ]);
+    this.rebuildIfChanged(world, entityId, signature, toggle, 0, size, (ctx) => {
+      const px = side * size.density;
+      const box = { x: 0, y: 0, w: px, h: px };
+      drawChrome(ctx, box, size.density, chrome, this.drawAssets);
+      if (!toggle.value) return;
+      if (radio) drawDot(ctx, px / 2, px / 2, px * 0.24, markColor);
+      else drawCheckMark(ctx, box, markColor);
+    });
+  }
   syncSlider(world, entityId, slider) {
-    const size = resolveCanvasSize(slider.width, slider.height);
+    const tokens = this.tokensFor(world, entityId);
+    const accent = resolveToken(slider.accentColor, tokens);
+    const track = resolveToken(slider.trackColor, tokens);
+    const knobColor = resolveToken(slider.knobColor, tokens);
+    const size = resolveCanvasSize(
+      slider.width,
+      slider.height,
+      slider.pixelDensity
+    );
+    const range = Math.max(1e-6, slider.max - slider.min);
+    const t = Math.min(1, Math.max(0, (slider.value - slider.min) / range));
+    if (slider.variant === "progress" || slider.variant === "ring") {
+      this.syncMeter(world, entityId, slider, t, accent, track, knobColor);
+      return;
+    }
     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 chrome = resolveChrome(
+      {
+        backgroundColor: track,
+        backgroundOpacity: 1,
+        cornerRadius: trackThickness / 2,
+        borderWidth: 0,
+        borderColor: "#000000"
+      },
+      void 0,
+      null
+    );
     const signature = trackSignature(
       slider.width,
       slider.height,
       size,
       chrome,
-      slider.accentColor,
-      slider.knobColor
+      accent,
+      knobColor,
+      slider.variant ?? null
     );
     const entry = this.rebuildIfChanged(
       world,
       entityId,
       signature,
-      slider.width,
-      slider.height,
+      slider,
+      0,
       size,
       (ctx) => {
-        ctx.clearRect(0, 0, size.pxWidth, size.pxHeight);
         const trackWidthM = usable + trackThickness;
         drawRoundedBar(
           ctx,
@@ -7528,7 +8227,7 @@ var _UIPanelSystem = class _UIPanelSystem {
           (slider.height - trackThickness) / 2 * size.density,
           trackWidthM * size.density,
           trackThickness * size.density,
-          slider.trackColor
+          track
         );
       }
     );
@@ -7537,13 +8236,13 @@ var _UIPanelSystem = class _UIPanelSystem {
       entry.fill = this.makeQuad(
         1,
         trackThickness,
-        slider.accentColor,
+        accent,
         entry.face.parent,
         CHILD_Z / 2
       );
       entry.cap = this.makeDisc(
         trackThickness / 2,
-        slider.accentColor,
+        accent,
         entry.face.parent,
         CHILD_Z / 2,
         Math.PI / 2,
@@ -7554,51 +8253,124 @@ var _UIPanelSystem = class _UIPanelSystem {
     if (!entry.knob) {
       entry.knob = this.makeDisc(
         knobRadius,
-        slider.knobColor,
+        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;
   }
+  /**
+   * Progress bars and rings. Unlike a slider these change rarely and have no
+   * drag to keep smooth, so the value is drawn, in steps of half a percent.
+   */
+  syncMeter(world, entityId, slider, t, accent, track, knobColor) {
+    const size = resolveCanvasSize(
+      slider.width,
+      slider.height,
+      slider.pixelDensity
+    );
+    const shown = Math.round(t * METER_STEPS) / METER_STEPS;
+    const signature = JSON.stringify([
+      slider.width,
+      slider.height,
+      size,
+      slider.variant,
+      accent,
+      track,
+      knobColor,
+      shown
+    ]);
+    this.rebuildIfChanged(world, entityId, signature, slider, 0, size, (ctx) => {
+      const box = {
+        x: 0,
+        y: 0,
+        w: size.pxWidth,
+        h: size.pxHeight
+      };
+      if (slider.variant === "ring") {
+        drawRing(ctx, box, shown, track, accent);
+        return;
+      }
+      drawRoundedBar(ctx, 0, 0, box.w, box.h, track);
+      if (shown <= 0) return;
+      const fill = Math.max(box.h, box.w * shown);
+      drawRoundedBar(ctx, 0, 0, fill, box.h, accent);
+    });
+  }
+  /** The tokens in scope for a widget, nearest panel first. */
+  tokensFor(world, entityId) {
+    if (!this.anyTokens) return null;
+    let merged = null;
+    const visited = /* @__PURE__ */ new Set();
+    let current = entityId;
+    while (current !== null && !visited.has(current)) {
+      visited.add(current);
+      const tokens = world.getComponent(current, UIPanelComponent)?.tokens;
+      if (tokens) merged = { ...tokens, ...merged ?? {} };
+      const parent = world.getComponent(current, ParentId)?.value;
+      current = typeof parent === "number" ? parent : null;
+    }
+    return merged;
+  }
   // ── Machinery ──────────────────────────────────────────────────────────────
-  rebuildIfChanged(world, entityId, signature, widthM, heightM, size, draw) {
+  rebuildIfChanged(world, entityId, signature, widget, bleed, size, draw, side = THREE26.FrontSide) {
     const root = world.getComponent(entityId, Object3DRef)?.object;
     if (!root) return null;
+    const widthM = widget.width;
+    const heightM = widget.height;
+    const faceWidth = widthM + bleed * 2;
+    const faceHeight = heightM + bleed * 2;
     let entry = this.entries.get(entityId);
+    if (entry) entry.opacity = widget.style?.opacity ?? 1;
     if (entry && entry.signature === signature) return entry;
     if (entry) this.disposeMovingParts(entry);
     if (!entry) {
       const canvas2 = this.createCanvas();
-      const texture = new THREE19.CanvasTexture(
+      const texture = new THREE26.CanvasTexture(
         canvas2
       );
       this.configureTexture(world, texture);
-      const material = new THREE19.MeshBasicMaterial({
+      const material = new THREE26.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: THREE19.DoubleSide,
-        premultipliedAlpha: true
+        side,
+        premultipliedAlpha: false,
+        blending: THREE26.CustomBlending,
+        blendSrc: THREE26.OneFactor,
+        blendDst: THREE26.OneMinusSrcAlphaFactor,
+        blendSrcAlpha: THREE26.OneFactor,
+        blendDstAlpha: THREE26.OneMinusSrcAlphaFactor
       });
-      const face = new THREE19.Mesh(
-        new THREE19.PlaneGeometry(widthM, heightM),
+      const face = new THREE26.Mesh(
+        new THREE26.PlaneGeometry(faceWidth, faceHeight),
         material
       );
-      face.renderOrder = FACE_RENDER_ORDER;
+      tagPart(face, 16777215, true);
+      face.raycast = () => {
+      };
       root.add(face);
+      const hit = new THREE26.Mesh(
+        new THREE26.PlaneGeometry(widthM, heightM),
+        new THREE26.MeshBasicMaterial({ visible: false, side })
+      );
+      root.add(hit);
       entry = {
         signature: "",
+        root,
+        width: widthM,
+        height: heightM,
+        opacity: widget.style?.opacity ?? 1,
         face,
+        hit,
         texture,
         material,
         canvas: canvas2,
@@ -7612,23 +8384,26 @@ var _UIPanelSystem = class _UIPanelSystem {
     if (canvas.width !== size.pxWidth || canvas.height !== size.pxHeight) {
       canvas.width = size.pxWidth;
       canvas.height = size.pxHeight;
+      if (entry.signature) entry.texture.dispose();
     }
-    const params = entry.face.geometry.parameters;
-    if (params.width !== widthM || params.height !== heightM) {
-      entry.face.geometry.dispose();
-      entry.face.geometry = new THREE19.PlaneGeometry(widthM, heightM);
-    }
+    entry.width = widthM;
+    entry.height = heightM;
+    resizePlane(entry.face, faceWidth, faceHeight);
+    resizePlane(entry.hit, widthM, heightM);
     const ctx = canvas.getContext("2d");
-    if (ctx) draw(ctx);
+    if (ctx) {
+      ctx.clearRect(0, 0, size.pxWidth, size.pxHeight);
+      draw(ctx);
+    }
     entry.texture.needsUpdate = true;
     entry.signature = signature;
     return entry;
   }
   configureTexture(world, texture) {
-    texture.colorSpace = THREE19.SRGBColorSpace;
+    texture.colorSpace = THREE26.SRGBColorSpace;
     texture.generateMipmaps = true;
-    texture.minFilter = THREE19.LinearMipmapLinearFilter;
-    texture.magFilter = THREE19.LinearFilter;
+    texture.minFilter = THREE26.LinearMipmapLinearFilter;
+    texture.magFilter = THREE26.LinearFilter;
     texture.premultiplyAlpha = true;
     try {
       const renderer = world.getRenderer();
@@ -7639,7 +8414,7 @@ var _UIPanelSystem = class _UIPanelSystem {
   }
   makeQuad(widthM, heightM, color, parent, z) {
     return this.addPart(
-      new THREE19.PlaneGeometry(widthM, heightM),
+      new THREE26.PlaneGeometry(widthM, heightM),
       color,
       parent,
       z
@@ -7648,24 +8423,23 @@ var _UIPanelSystem = class _UIPanelSystem {
   /** 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 THREE19.CircleGeometry(radiusM, 32, thetaStart, thetaLength),
+      new THREE26.CircleGeometry(radiusM, 32, thetaStart, thetaLength),
       color,
       parent,
       z
     );
   }
   addPart(geometry, color, parent, z) {
-    const mesh = new THREE19.Mesh(
+    const mesh = new THREE26.Mesh(
       geometry,
-      new THREE19.MeshBasicMaterial({
+      new THREE26.MeshBasicMaterial({
         color,
         transparent: true,
         depthWrite: false,
-        toneMapped: false,
-        side: THREE19.DoubleSide
+        toneMapped: false
       })
     );
-    mesh.renderOrder = FACE_RENDER_ORDER + 1;
+    tagPart(mesh, color);
     mesh.position.z = z;
     mesh.raycast = () => {
     };
@@ -7696,22 +8470,144 @@ var _UIPanelSystem = class _UIPanelSystem {
     const object = world.getComponent(entityId, Object3DRef)?.object;
     if (!transform || !object) return;
     const camera = world.getCamera();
-    const cam = new THREE19.Vector3();
-    const self = new THREE19.Vector3();
+    const cam = new THREE26.Vector3();
+    const self = new THREE26.Vector3();
     camera.getWorldPosition(cam);
     object.getWorldPosition(self);
     transform.rotation.y = Math.atan2(cam.x - self.x, cam.z - self.z);
   }
+  /**
+   * Stamp every widget's meshes with this frame's paint order. Written each
+   * frame because the eye moves: the order between trees can change at any
+   * time, and a plain property write costs less than checking it.
+   */
+  applyPaintOrder(world) {
+    if (this.entries.size === 0) return;
+    const camera = world.getCamera();
+    camera.getWorldPosition(eyeScratch);
+    const nodes = [...this.entries.keys()].map((id) => ({
+      id,
+      parent: nearestWidgetAncestor(world, id)
+    }));
+    const trees = buildPaintTrees(nodes);
+    const rects = /* @__PURE__ */ new Map();
+    for (const tree of trees) {
+      const entry = this.entries.get(tree.rootId);
+      if (entry) rects.set(tree.rootId, rootRect(tree.rootId, entry));
+    }
+    const slots = assignPaintOrder(trees, rects, eyeScratch);
+    this.framesUntilDescendantWalk -= 1;
+    const walkDescendants = this.framesUntilDescendantWalk <= 0;
+    if (walkDescendants) {
+      this.framesUntilDescendantWalk = DESCENDANT_WALK_INTERVAL;
+    }
+    const widgetRoots = /* @__PURE__ */ new Set();
+    if (walkDescendants) {
+      for (const entry of this.entries.values()) widgetRoots.add(entry.root);
+    }
+    for (const [entityId, entry] of this.entries) {
+      const slot = slots.get(entityId);
+      if (!slot) continue;
+      entry.face.renderOrder = slot.face;
+      for (const part of [entry.knob, entry.fill, entry.cap]) {
+        if (part) part.renderOrder = slot.parts;
+      }
+      if (walkDescendants) stampDescendants(entry.root, slot, widgetRoots);
+    }
+    const effective = /* @__PURE__ */ new Map();
+    const parentOf = new Map(nodes.map((node) => [node.id, node.parent]));
+    for (const tree of trees) {
+      for (const id of tree.order) {
+        const entry = this.entries.get(id);
+        if (!entry) continue;
+        const parent = parentOf.get(id);
+        const inherited = parent != null ? effective.get(parent) ?? 1 : 1;
+        const opacity = entry.opacity * inherited;
+        effective.set(id, opacity);
+        for (const mesh of [entry.face, entry.knob, entry.fill, entry.cap]) {
+          if (!mesh) continue;
+          const tag = mesh.userData[UI_PART_KEY];
+          if (tag.opacity === opacity) continue;
+          tag.opacity = opacity;
+          applyPartColor(mesh, tag);
+        }
+      }
+    }
+  }
   destroyEntry(entry) {
     this.disposeMovingParts(entry);
     entry.face.removeFromParent();
     entry.face.geometry.dispose();
     entry.face.material.dispose();
+    entry.hit.removeFromParent();
+    entry.hit.geometry.dispose();
+    entry.hit.material.dispose();
     entry.texture.dispose();
   }
 };
 __name(_UIPanelSystem, "UIPanelSystem");
 var UIPanelSystem = _UIPanelSystem;
+var eyeScratch = new THREE26.Vector3();
+function tagPart(mesh, color, premultiplied = false) {
+  const tag = {
+    baseColor: new THREE26.Color(color),
+    tint: 1,
+    opacity: 1,
+    premultiplied
+  };
+  mesh.userData[UI_PART_KEY] = tag;
+}
+__name(tagPart, "tagPart");
+function resizePlane(mesh, width, height) {
+  const params = mesh.geometry.parameters;
+  if (params.width === width && params.height === height) return;
+  mesh.geometry.dispose();
+  mesh.geometry = new THREE26.PlaneGeometry(width, height);
+}
+__name(resizePlane, "resizePlane");
+function layoutBox(widget, bleed, density) {
+  return {
+    x: bleed * density,
+    y: bleed * density,
+    w: widget.width * density,
+    h: widget.height * density
+  };
+}
+__name(layoutBox, "layoutBox");
+function familyOf(font) {
+  return font ? uiFontFamily(font) : null;
+}
+__name(familyOf, "familyOf");
+function imagesLoaded(chrome) {
+  return styleAssets(chrome, null).images.map((src) => !!uiImage(src));
+}
+__name(imagesLoaded, "imagesLoaded");
+function rootRect(id, entry) {
+  const e = entry.root.matrixWorld.elements;
+  const halfW = entry.width / 2;
+  const halfH = entry.height / 2;
+  return {
+    id,
+    center: { x: e[12], y: e[13], z: e[14] },
+    halfX: { x: e[0] * halfW, y: e[1] * halfW, z: e[2] * halfW },
+    halfY: { x: e[4] * halfH, y: e[5] * halfH, z: e[6] * halfH }
+  };
+}
+__name(rootRect, "rootRect");
+function stampDescendants(root, slot, widgetRoots) {
+  for (const child of root.children) {
+    if (widgetRoots.has(child) || child.userData[UI_PART_KEY]) continue;
+    const material = child.material;
+    const transparent = Array.isArray(material) ? material.some((m) => m.transparent) : material?.transparent === true;
+    const untouched = child.renderOrder === 0 || child.userData[PAINT_STAMP_KEY] === child.renderOrder;
+    if (transparent && untouched) {
+      child.renderOrder = slot.descendants;
+      child.userData[PAINT_STAMP_KEY] = slot.descendants;
+    }
+    stampDescendants(child, slot, widgetRoots);
+  }
+}
+__name(stampDescendants, "stampDescendants");
 var _XRHitTestSystem = class _XRHitTestSystem {
   constructor() {
     this.sources = /* @__PURE__ */ new Map();
@@ -7748,12 +8644,12 @@ var _XRHitTestSystem = class _XRHitTestSystem {
       if (!hits || hits.length === 0) continue;
       const pose = hits[0].getPose(referenceSpace);
       if (!pose) continue;
-      const matrix = new THREE19.Matrix4().fromArray(
+      const matrix = new THREE26.Matrix4().fromArray(
         pose.transform.matrix
       );
-      const position = new THREE19.Vector3();
-      const quaternion = new THREE19.Quaternion();
-      matrix.decompose(position, quaternion, new THREE19.Vector3());
+      const position = new THREE26.Vector3();
+      const quaternion = new THREE26.Quaternion();
+      matrix.decompose(position, quaternion, new THREE26.Vector3());
       this.results.set(key, { position, quaternion });
     }
   }
@@ -7827,8 +8723,8 @@ var _XRAnchorSystem = class _XRAnchorSystem {
     /** Per-anchor head-glue gates — see XREnvironmentSystem's TrackedEntry. */
     this.gates = /* @__PURE__ */ new Map();
     this.presenting = false;
-    this.tmpViewerMatrix = new THREE19.Matrix4();
-    this.tmpViewPos = new THREE19.Vector3();
+    this.tmpViewerMatrix = new THREE26.Matrix4();
+    this.tmpViewPos = new THREE26.Vector3();
   }
   update(world, deltaTime = 0) {
     const presenting = world.isXrPresenting();
@@ -7902,8 +8798,8 @@ var _XRAnchorSystem = class _XRAnchorSystem {
     if (typeof frame.createAnchor !== "function") return;
     const RigidTransform = globalThis.XRRigidTransform;
     if (!RigidTransform) return;
-    const quaternion = new THREE19.Quaternion().setFromEuler(
-      new THREE19.Euler(
+    const quaternion = new THREE26.Quaternion().setFromEuler(
+      new THREE26.Euler(
         transform.rotation.x,
         transform.rotation.y,
         transform.rotation.z,
@@ -7946,13 +8842,13 @@ var _XRAnchorSystem = class _XRAnchorSystem {
 };
 __name(_XRAnchorSystem, "XRAnchorSystem");
 var XRAnchorSystem = _XRAnchorSystem;
-var _q = new THREE19.Quaternion();
-var _q2 = new THREE19.Quaternion();
-var _s = new THREE19.Vector3();
-var _e = new THREE19.Vector3();
-var _w = new THREE19.Vector3();
-var _v = new THREE19.Vector3();
-var _p = new THREE19.Vector3();
+var _q = new THREE26.Quaternion();
+var _q2 = new THREE26.Quaternion();
+var _s = new THREE26.Vector3();
+var _e = new THREE26.Vector3();
+var _w = new THREE26.Vector3();
+var _v = new THREE26.Vector3();
+var _p = new THREE26.Vector3();
 function setWorldQuaternion(o, q) {
   if (o.parent) {
     o.parent.getWorldQuaternion(_q2).invert();
@@ -7977,31 +8873,31 @@ function twoBoneIK(upper, lower, end, target, pole) {
   if (a < 1e-6 || b < 1e-6) return target.distanceTo(_w);
   const toT = _v.subVectors(target, _s);
   const want = toT.length();
-  const c = THREE19.MathUtils.clamp(want, Math.abs(a - b) + 1e-4, a + b - 1e-4);
+  const c = THREE26.MathUtils.clamp(want, Math.abs(a - b) + 1e-4, a + b - 1e-4);
   const dir = toT.divideScalar(want || 1).clone();
   const pv = _p.subVectors(pole, _s);
   pv.addScaledVector(dir, -pv.dot(dir));
   if (pv.lengthSq() < 1e-8) pv.set(0, -1, 0).addScaledVector(dir, dir.y);
   pv.normalize();
-  const cosA = THREE19.MathUtils.clamp((a * a + c * c - b * b) / (2 * a * c), -1, 1);
+  const cosA = THREE26.MathUtils.clamp((a * a + c * c - b * b) / (2 * a * c), -1, 1);
   const joint = _s.clone().addScaledVector(dir, a * cosA).addScaledVector(pv, a * Math.sqrt(1 - cosA * cosA));
-  turn(upper, new THREE19.Quaternion().setFromUnitVectors(_e.clone().sub(_s).normalize(), joint.clone().sub(_s).normalize()));
+  turn(upper, new THREE26.Quaternion().setFromUnitVectors(_e.clone().sub(_s).normalize(), joint.clone().sub(_s).normalize()));
   lower.getWorldPosition(_e);
   end.getWorldPosition(_w);
   const reach = _s.clone().addScaledVector(dir, c);
-  turn(lower, new THREE19.Quaternion().setFromUnitVectors(_w.clone().sub(_e).normalize(), reach.clone().sub(_e).normalize()));
+  turn(lower, new THREE26.Quaternion().setFromUnitVectors(_w.clone().sub(_e).normalize(), reach.clone().sub(_e).normalize()));
   return want - c;
 }
 __name(twoBoneIK, "twoBoneIK");
-function gripQuaternion(axis, back, forearm, out = new THREE19.Quaternion()) {
+function gripQuaternion(axis, back, forearm, out = new THREE26.Quaternion()) {
   let X = axis.clone();
   const Z = back.clone().addScaledVector(X, -back.dot(X)).normalize().negate();
-  let Y = new THREE19.Vector3().crossVectors(Z, X);
+  let Y = new THREE26.Vector3().crossVectors(Z, X);
   if (Y.dot(forearm) < 0) {
     X = X.negate();
     Y = Y.negate();
   }
-  return out.setFromRotationMatrix(new THREE19.Matrix4().makeBasis(X, Y, Z));
+  return out.setFromRotationMatrix(new THREE26.Matrix4().makeBasis(X, Y, Z));
 }
 __name(gripQuaternion, "gripQuaternion");
 
@@ -8012,10 +8908,10 @@ var LIMB_BONES = {
   leftFoot: ["leftUpperLeg", "leftLowerLeg", "leftFoot"],
   rightFoot: ["rightUpperLeg", "rightLowerLeg", "rightFoot"]
 };
-var _t = new THREE19.Vector3();
-var _p2 = new THREE19.Vector3();
-var _q3 = new THREE19.Quaternion();
-var _pq = new THREE19.Quaternion();
+var _t = new THREE26.Vector3();
+var _p2 = new THREE26.Vector3();
+var _q3 = new THREE26.Quaternion();
+var _pq = new THREE26.Quaternion();
 var _IKSystem = class _IKSystem {
   constructor() {
     this.runtimes = /* @__PURE__ */ new Map();
@@ -8076,7 +8972,7 @@ var _IKSystem = class _IKSystem {
         const [upper, lower, end] = limb.bones;
         for (const bone of [upper, lower, end]) {
           if (!runtime.written.has(bone)) {
-            runtime.written.set(bone, { before: bone.quaternion.clone(), written: new THREE19.Quaternion() });
+            runtime.written.set(bone, { before: bone.quaternion.clone(), written: new THREE26.Quaternion() });
           }
         }
         const animated = [upper.quaternion.clone(), lower.quaternion.clone(), end.quaternion.clone()];
@@ -8114,9 +9010,9 @@ var IKSystem = _IKSystem;
 function buildGeometry2(area) {
   if (area.shape === "circle") {
     const radius = Math.max(5e-3, area.width / 2);
-    return new THREE19.CircleGeometry(radius, 48);
+    return new THREE26.CircleGeometry(radius, 48);
   }
-  return new THREE19.PlaneGeometry(
+  return new THREE26.PlaneGeometry(
     Math.max(0.01, area.width),
     Math.max(0.01, area.depth)
   );
@@ -8133,13 +9029,13 @@ var _VRTeleportAreaSystem = class _VRTeleportAreaSystem {
   update(world) {
     const entityIds = world.query(VRTeleportAreaComponent, Object3DRef);
     const alive = new Set(entityIds);
-    for (const tracked of this.signatures.keys()) {
-      if (!alive.has(tracked)) this.signatures.delete(tracked);
+    for (const tracked2 of this.signatures.keys()) {
+      if (!alive.has(tracked2)) this.signatures.delete(tracked2);
     }
     for (const entityId of entityIds) {
       const area = world.getComponent(entityId, VRTeleportAreaComponent);
       const object = world.getComponent(entityId, Object3DRef)?.object;
-      if (!area || !(object instanceof THREE19.Mesh)) continue;
+      if (!area || !(object instanceof THREE26.Mesh)) continue;
       const signature = signatureOf(area);
       if (this.signatures.get(entityId) === signature) continue;
       this.signatures.set(entityId, signature);
@@ -8151,18 +9047,18 @@ var _VRTeleportAreaSystem = class _VRTeleportAreaSystem {
 __name(_VRTeleportAreaSystem, "VRTeleportAreaSystem");
 var VRTeleportAreaSystem = _VRTeleportAreaSystem;
 function createHandMaterial(preset, options) {
-  const color = new THREE19.Color(options.color);
+  const color = new THREE26.Color(options.color);
   switch (preset) {
     case "ghost":
-      return new THREE19.MeshBasicMaterial({
+      return new THREE26.MeshBasicMaterial({
         color,
         transparent: true,
         opacity: Math.min(1, Math.max(0.05, options.opacity * 0.45)),
         depthWrite: false,
-        side: THREE19.DoubleSide
+        side: THREE26.DoubleSide
       });
     case "neon":
-      return new THREE19.MeshStandardMaterial({
+      return new THREE26.MeshStandardMaterial({
         color,
         emissive: color,
         emissiveIntensity: Math.max(0.5, options.emissiveIntensity || 2),
@@ -8172,7 +9068,7 @@ function createHandMaterial(preset, options) {
         opacity: options.opacity
       });
     case "skeleton":
-      return new THREE19.MeshBasicMaterial({
+      return new THREE26.MeshBasicMaterial({
         color,
         wireframe: true,
         transparent: true,
@@ -8180,7 +9076,7 @@ function createHandMaterial(preset, options) {
       });
     case "custom":
     case "default":
-      return new THREE19.MeshStandardMaterial({
+      return new THREE26.MeshStandardMaterial({
         color,
         roughness: 0.85,
         metalness: 0,
@@ -8188,10 +9084,10 @@ function createHandMaterial(preset, options) {
         emissiveIntensity: Math.max(0, options.emissiveIntensity),
         transparent: options.opacity < 1,
         opacity: options.opacity,
-        side: THREE19.DoubleSide
+        side: THREE26.DoubleSide
       });
     default: {
-      return new THREE19.MeshStandardMaterial({ color });
+      return new THREE26.MeshStandardMaterial({ color });
     }
   }
 }
@@ -8216,9 +9112,9 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
   constructor(options) {
     this.controllerModelFactory = new XRControllerModelFactory();
     this.handModelFactory = new XRHandModelFactory();
-    this.group = new THREE19.Group();
+    this.group = new THREE26.Group();
     /** Reused so a per-frame colour compare allocates nothing. */
-    this.rayColorScratch = new THREE19.Color();
+    this.rayColorScratch = new THREE26.Color();
     this.slots = /* @__PURE__ */ new Map();
     this.attachedTo = null;
     /** Last applied preset signature, so materials rebuild only on real change. */
@@ -8355,8 +9251,8 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
    */
   fitRayToHover(ray, side) {
     const hover = this.interactionSystem?.getHoverFor(side) ?? null;
-    const length = hover && Number.isFinite(hover.distance) && hover.distance > 0 ? Math.min(hover.distance, RAY_LENGTH) : RAY_LENGTH;
-    ray.scale.z = length;
+    const length2 = hover && Number.isFinite(hover.distance) && hover.distance > 0 ? Math.min(hover.distance, RAY_LENGTH) : RAY_LENGTH;
+    ray.scale.z = length2;
   }
   /** Lazily build per-slot visuals; the device reports profiles late. */
   ensureSlots(world) {
@@ -8405,17 +9301,17 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
    * without pulling in a line-rendering extension.
    */
   createRay() {
-    const geometry = new THREE19.CylinderGeometry(RAY_RADIUS, RAY_RADIUS, 1, 8, 1);
+    const geometry = new THREE26.CylinderGeometry(RAY_RADIUS, RAY_RADIUS, 1, 8, 1);
     geometry.rotateX(-Math.PI / 2);
     geometry.translate(0, 0, -0.5);
-    const material = new THREE19.MeshBasicMaterial({
+    const material = new THREE26.MeshBasicMaterial({
       color: "#4da3ff",
       transparent: true,
       opacity: 0.75,
       depthTest: false,
       depthWrite: false
     });
-    const mesh = new THREE19.Mesh(geometry, material);
+    const mesh = new THREE26.Mesh(geometry, material);
     mesh.name = "XRPointerRay";
     mesh.renderOrder = 999;
     mesh.visible = false;
@@ -8446,14 +9342,14 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
 __name(_XRControllerVisualSystem, "XRControllerVisualSystem");
 var XRControllerVisualSystem = _XRControllerVisualSystem;
 var MARKER_RADIUS = 0.28;
-var ACCENT = new THREE19.Color("#4da3ff");
-var SEGMENT_AXIS = new THREE19.Vector3(0, 1, 0);
+var ACCENT = new THREE26.Color("#4da3ff");
+var SEGMENT_AXIS = new THREE26.Vector3(0, 1, 0);
 var HEAD_CLEARANCE = 0.25;
 var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
   constructor(locomotionSystem) {
-    this.group = new THREE19.Group();
+    this.group = new THREE26.Group();
     /** Holds the segment chain that draws the arc. */
-    this.arc = new THREE19.Group();
+    this.arc = new THREE26.Group();
     /**
      * Unit cylinder along +Y, reused by every segment.
      *
@@ -8462,14 +9358,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 THREE19.CylinderGeometry(1, 1, 1, 6, 1);
+    this.segmentGeometry = new THREE26.CylinderGeometry(1, 1, 1, 6, 1);
     this.segments = [];
-    this.marker = new THREE19.Group();
+    this.marker = new THREE26.Group();
     this.attached = false;
-    this.scratchDirection = new THREE19.Vector3();
-    this.scratchHead = new THREE19.Vector3();
-    this.validColor = new THREE19.Color();
-    this.invalidColor = new THREE19.Color();
+    this.scratchDirection = new THREE26.Vector3();
+    this.scratchHead = new THREE26.Vector3();
+    this.validColor = new THREE26.Color();
+    this.invalidColor = new THREE26.Color();
     this.locomotionSystem = locomotionSystem;
     this.group.name = "XRTeleportVisuals";
     this.group.userData.ecsPreviewHidden = true;
@@ -8527,8 +9423,8 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
       const from = curve[i];
       const to = curve[i + 1];
       this.scratchDirection.subVectors(to, from);
-      const length = this.scratchDirection.length();
-      if (length < 1e-6) {
+      const length2 = this.scratchDirection.length();
+      if (length2 < 1e-6) {
         segment.visible = false;
         continue;
       }
@@ -8536,9 +9432,9 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
       segment.position.copy(from).addScaledVector(this.scratchDirection, 0.5);
       segment.quaternion.setFromUnitVectors(
         SEGMENT_AXIS,
-        this.scratchDirection.divideScalar(length)
+        this.scratchDirection.divideScalar(length2)
       );
-      segment.scale.set(radius, length, radius);
+      segment.scale.set(radius, length2, radius);
       const t = needed > 1 ? i / (needed - 1) : 0;
       const fade = 1 - t * 0.75;
       segment.material.color.copy(tint).multiplyScalar(fade);
@@ -8547,12 +9443,12 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
   /** Grow the segment pool to cover the current arc. */
   ensureSegments(count) {
     while (this.segments.length < count) {
-      const material = new THREE19.MeshBasicMaterial({
+      const material = new THREE26.MeshBasicMaterial({
         transparent: true,
         depthTest: false,
         depthWrite: false
       });
-      const mesh = new THREE19.Mesh(this.segmentGeometry, material);
+      const mesh = new THREE26.Mesh(this.segmentGeometry, material);
       mesh.frustumCulled = false;
       mesh.renderOrder = 998;
       mesh.raycast = () => {
@@ -8576,33 +9472,33 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
     return world.getComponent(entityId, XRRigComponent) ?? null;
   }
   createRing() {
-    const geometry = new THREE19.RingGeometry(
+    const geometry = new THREE26.RingGeometry(
       MARKER_RADIUS * 0.72,
       MARKER_RADIUS,
       48
     );
     geometry.rotateX(-Math.PI / 2);
-    return new THREE19.Mesh(
+    return new THREE26.Mesh(
       geometry,
-      new THREE19.MeshBasicMaterial({
+      new THREE26.MeshBasicMaterial({
         color: ACCENT,
         transparent: true,
         opacity: 0.9,
-        side: THREE19.DoubleSide,
+        side: THREE26.DoubleSide,
         depthTest: false
       })
     );
   }
   createDot() {
-    const geometry = new THREE19.CircleGeometry(MARKER_RADIUS * 0.16, 24);
+    const geometry = new THREE26.CircleGeometry(MARKER_RADIUS * 0.16, 24);
     geometry.rotateX(-Math.PI / 2);
-    return new THREE19.Mesh(
+    return new THREE26.Mesh(
       geometry,
-      new THREE19.MeshBasicMaterial({
+      new THREE26.MeshBasicMaterial({
         color: ACCENT,
         transparent: true,
         opacity: 0.55,
-        side: THREE19.DoubleSide,
+        side: THREE26.DoubleSide,
         depthTest: false
       })
     );
@@ -8713,7 +9609,7 @@ function boneDirections(joints, finger) {
     const from = joints[chain[i - 1]];
     const to = joints[chain[i]];
     if (!from || !to) return null;
-    const direction = new THREE19.Vector3().subVectors(to, from);
+    const direction = new THREE26.Vector3().subVectors(to, from);
     if (direction.lengthSq() < 1e-12) return null;
     directions.push(direction.normalize());
   }
@@ -8786,8 +9682,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 THREE19.Vector3().subVectors(aTip, aBase);
-  const dirB = new THREE19.Vector3().subVectors(bTip, bBase);
+  const dirA = new THREE26.Vector3().subVectors(aTip, aBase);
+  const dirB = new THREE26.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);
 }
@@ -8797,18 +9693,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 THREE19.Vector3().subVectors(indexBase, wrist);
-  const v = new THREE19.Vector3().subVectors(pinkyBase, wrist);
-  const normal = new THREE19.Vector3().crossVectors(u, v);
+  const u = new THREE26.Vector3().subVectors(indexBase, wrist);
+  const v = new THREE26.Vector3().subVectors(pinkyBase, wrist);
+  const normal = new THREE26.Vector3().crossVectors(u, v);
   if (normal.lengthSq() < 1e-12) return null;
   normal.normalize();
   if (handedness === "left") normal.multiplyScalar(-1);
-  const right = new THREE19.Vector3().subVectors(indexBase, pinkyBase);
+  const right = new THREE26.Vector3().subVectors(indexBase, pinkyBase);
   if (right.lengthSq() < 1e-12) return null;
   right.normalize();
   if (handedness === "left") right.multiplyScalar(-1);
-  const up = new THREE19.Vector3().crossVectors(normal, right).normalize();
-  const center = new THREE19.Vector3().add(wrist).add(indexBase).add(pinkyBase).divideScalar(3);
+  const up = new THREE26.Vector3().crossVectors(normal, right).normalize();
+  const center = new THREE26.Vector3().add(wrist).add(indexBase).add(pinkyBase).divideScalar(3);
   return {
     center,
     normal,
@@ -8820,17 +9716,17 @@ function computePalmPose(joints, handedness) {
 __name(computePalmPose, "computePalmPose");
 function computeHandShape(joints, handedness) {
   const fingers = {};
-  let tracked = 0;
+  let tracked2 = 0;
   for (const finger of XR_FINGERS) {
     const curl = computeFingerCurl(joints, finger);
     if (curl) {
       fingers[finger] = curl;
-      tracked += 1;
+      tracked2 += 1;
     } else {
       fingers[finger] = { baseCurl: 0, tipCurl: 0, curl: 0 };
     }
   }
-  if (tracked === 0) return null;
+  if (tracked2 === 0) return null;
   const pinch = {};
   for (const finger of PINCH_FINGERS) {
     pinch[finger] = computePinch(joints, finger) ?? 0;
@@ -8839,7 +9735,7 @@ function computeHandShape(joints, handedness) {
   const thumbTip = joints["thumb-tip"];
   let thumbDirection = null;
   if (thumbBase && thumbTip) {
-    const direction = new THREE19.Vector3().subVectors(thumbTip, thumbBase);
+    const direction = new THREE26.Vector3().subVectors(thumbTip, thumbBase);
     if (direction.lengthSq() > 1e-12) thumbDirection = direction.normalize();
   }
   const fingerDirections = {};
@@ -8850,7 +9746,7 @@ function computeHandShape(joints, handedness) {
       fingerDirections[finger] = null;
       continue;
     }
-    const direction = new THREE19.Vector3().subVectors(tip, base);
+    const direction = new THREE26.Vector3().subVectors(tip, base);
     fingerDirections[finger] = direction.lengthSq() > 1e-12 ? direction.normalize() : null;
   }
   return {
@@ -8884,12 +9780,12 @@ function scoreAgainst(actual, target, tolerance) {
 __name(scoreAgainst, "scoreAgainst");
 var DEFAULT_DIRECTION_TOLERANCE = 45;
 var WORLD_DIRECTIONS = {
-  up: new THREE19.Vector3(0, 1, 0),
-  down: new THREE19.Vector3(0, -1, 0),
-  forward: new THREE19.Vector3(0, 0, -1),
-  back: new THREE19.Vector3(0, 0, 1),
-  left: new THREE19.Vector3(-1, 0, 0),
-  right: new THREE19.Vector3(1, 0, 0)
+  up: new THREE26.Vector3(0, 1, 0),
+  down: new THREE26.Vector3(0, -1, 0),
+  forward: new THREE26.Vector3(0, 0, -1),
+  back: new THREE26.Vector3(0, 0, 1),
+  left: new THREE26.Vector3(-1, 0, 0),
+  right: new THREE26.Vector3(1, 0, 0)
 };
 function axisVector(shape, axis) {
   if (axis === "thumb") return shape.thumbDirection;
@@ -8904,7 +9800,7 @@ function resolveDirection(direction, shape, context) {
   const head = context?.headPosition;
   const origin = shape.palm?.center;
   if (!head || !origin) return null;
-  const toHead = new THREE19.Vector3().subVectors(head, origin);
+  const toHead = new THREE26.Vector3().subVectors(head, origin);
   if (toHead.lengthSq() < 1e-12) return null;
   toHead.normalize();
   return direction === "toward-head" ? toHead : toHead.multiplyScalar(-1);
@@ -8916,8 +9812,8 @@ function scoreDirections(actual, accepted, shape, toleranceDegrees, context) {
   for (const direction of accepted) {
     const wanted = resolveDirection(direction, shape, context);
     if (!wanted) continue;
-    const angle = THREE19.MathUtils.radToDeg(
-      Math.acos(THREE19.MathUtils.clamp(actual.dot(wanted), -1, 1))
+    const angle = THREE26.MathUtils.radToDeg(
+      Math.acos(THREE26.MathUtils.clamp(actual.dot(wanted), -1, 1))
     );
     const normalizedError = Math.max(0, angle - toleranceDegrees) / 90;
     const score = clamp01(1 - normalizedError / MATCH_FALLOFF);
@@ -8982,8 +9878,8 @@ function matchHandPose(shape, definition, context) {
     if (!handAxis || !wanted) {
       consider(0, "orientation");
     } else {
-      const angle = THREE19.MathUtils.radToDeg(
-        Math.acos(THREE19.MathUtils.clamp(handAxis.dot(wanted), -1, 1))
+      const angle = THREE26.MathUtils.radToDeg(
+        Math.acos(THREE26.MathUtils.clamp(handAxis.dot(wanted), -1, 1))
       );
       const normalizedError = Math.max(0, angle - toleranceDegrees) / 90;
       consider(clamp01(1 - normalizedError / MATCH_FALLOFF), "orientation");
@@ -9061,7 +9957,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 THREE19.Vector3();
+    this.headPosition = new THREE26.Vector3();
     this.elapsed = 0;
     this.warnedNoHands = false;
     this.noHandSeconds = 0;
@@ -9077,8 +9973,8 @@ var _XRHandPoseSystem = class _XRHandPoseSystem {
     const entries = this.collectEntries(world);
     if (entries.length === 0) return;
     if (!this.warnedNoHands) {
-      const tracked = this.shapes.get("left") !== null || this.shapes.get("right") !== null;
-      if (tracked) {
+      const tracked2 = this.shapes.get("left") !== null || this.shapes.get("right") !== null;
+      if (tracked2) {
         this.warnedNoHands = true;
       } else {
         this.noHandSeconds += deltaTime;
@@ -9224,6 +10120,7 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
       const interactable = world.getComponent(entityId, XRInteractableComponent);
       if (!interactable?.enabled) continue;
       if (interactable.hoverBehavior === "none") continue;
+      if (isUiWidget(world, entityId)) continue;
       this.begin(world, entityId, interactable);
     }
     for (const [entityId, record] of this.records) {
@@ -9244,7 +10141,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 THREE19.Vector3(
+      baseScale: new THREE26.Vector3(
         transform.scale.x,
         transform.scale.y,
         transform.scale.z
@@ -9257,27 +10154,27 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
   addShell(world, entityId, interactable) {
     const object = world.getComponent(entityId, Object3DRef)?.object;
     if (!object) return null;
-    const material = new THREE19.MeshBasicMaterial({
-      color: new THREE19.Color(interactable.hoverColor),
+    const material = new THREE26.MeshBasicMaterial({
+      color: new THREE26.Color(interactable.hoverColor),
       // Back faces only, so the shell shows just outside the silhouette instead
       // of covering the object.
-      side: THREE19.BackSide,
+      side: THREE26.BackSide,
       transparent: true,
       opacity: 0.85,
       depthWrite: false
     });
-    const group = new THREE19.Group();
+    const group = new THREE26.Group();
     group.name = "XRHoverShell";
     group.userData[XR_HOVER_SHELL_FLAG] = true;
     group.renderOrder = 998;
     object.traverse((child) => {
-      if (!(child instanceof THREE19.Mesh) || !child.geometry) return;
+      if (!(child instanceof THREE26.Mesh) || !child.geometry) return;
       if (child.userData[XR_HOVER_SHELL_FLAG]) return;
-      const clone = new THREE19.Mesh(child.geometry, material);
+      const clone = new THREE26.Mesh(child.geometry, material);
       child.updateWorldMatrix(true, false);
       object.updateWorldMatrix(true, false);
       clone.matrixAutoUpdate = false;
-      clone.matrix.copy(object.matrixWorld).invert().multiply(child.matrixWorld).scale(new THREE19.Vector3(SHELL_INFLATE, SHELL_INFLATE, SHELL_INFLATE));
+      clone.matrix.copy(object.matrixWorld).invert().multiply(child.matrixWorld).scale(new THREE26.Vector3(SHELL_INFLATE, SHELL_INFLATE, SHELL_INFLATE));
       clone.userData[XR_HOVER_SHELL_FLAG] = true;
       clone.raycast = () => {
       };
@@ -9326,7 +10223,7 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
     if (!shell) return;
     shell.parent?.remove(shell);
     shell.traverse((child) => {
-      if (child instanceof THREE19.Mesh) {
+      if (child instanceof THREE26.Mesh) {
         const material = child.material;
         if (Array.isArray(material)) {
           for (const entry of material) entry.dispose();
@@ -9352,5 +10249,5 @@ __name(_XRHoverVisualSystem, "XRHoverVisualSystem");
 var XRHoverVisualSystem = _XRHoverVisualSystem;
 
 export { ARC_GRAVITY, ARC_MAX_TIME, ARC_SPEED, ARC_STEPS, AnimationSystem, AudioMixer, AudioSystem, CURLED_COS, CameraSyncSystem, DEFAULT_DIRECTION_TOLERANCE, DEFAULT_ENTER_CONFIDENCE, DEFAULT_EXIT_CONFIDENCE, DEFAULT_LOST_GRACE_SECONDS, DEFAULT_MIN_HOLD_SECONDS, DEFAULT_SCRIPT_ERROR_RETRY_DELAY, EnvironmentSyncSystem, FALLBACK_HAND_SCALE, HandPoseTracker, IKSystem, InputSystem, InstancedMeshSystem, KeyboardKeys, LightSyncSystem, MATCH_FALLOFF, MAX_PLAUSIBLE_SPEED, MAX_SAMPLE_AGE_SECONDS, MaterialSyncSystem, MeshGeometrySystem, NO_XR_CAPABILITIES, ObjectVisibilitySystem, PINCH_FINGERS, PhysicsSyncSystem, PostprocessingSyncSystem, RenderSystem, SCRIPT_OBJECT_ROOT_FLAG, STRAIGHT_COS, ScriptBehaviourSystem, ScriptObject, ScriptObjectSystem, SlotChooser, TeleportAimGate, ThrowVelocityTracker, TransformSyncSystem, UIInteractionSystem, UIPanelSystem, VELOCITY_SAMPLES, VRTeleportAreaSystem, VideoSystem, XRAnchorSystem, XRControllerVisualSystem, XREnvironmentSystem, XRHandPoseSystem, XRHitTestSystem, XRHoverVisualSystem, XRInputSystem, XRInteractionSystem, XRLocomotionSystem, XRSessionSystem, XRTeleportVisualSystem, XR_FINGERS, XR_HOVER_SHELL_FLAG, angularVelocityFrom, applyHandMaterial, arcGroundCrossing, computeFingerCurl, computeHandShape, computePalmPose, computePalmWidth, computePinch, computeSpread, createHandMaterial, estimateHandScale, gripQuaternion, matchHandPose, readXrCapabilities, sampleTeleportArc, setWorldQuaternion, soundBankFiles, twoBoneIK };
-//# sourceMappingURL=chunk-JIJQFW6P.js.map
-//# sourceMappingURL=chunk-JIJQFW6P.js.map
+//# sourceMappingURL=chunk-VYIWOXAY.js.map
+//# sourceMappingURL=chunk-VYIWOXAY.js.map