@threlte/xr 1.5.3 → 1.5.5

package/dist/components/Controller.svelte

@@ -75,7 +75,8 @@
   const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : (hand ?? 'left'))
 
   $effect.pre(() => {
-    controllerEvents[handedness] = {
+    const key = handedness
+    controllerEvents[key] = {
       onconnected,
       ondisconnected,
       onselect,
@@ -87,7 +88,7 @@
     }
 
     return () => {
-      controllerEvents[handedness] = undefined
+      controllerEvents[key] = undefined
     }
   })
 
@@ -116,7 +117,10 @@
   {/if}
 
   {#if targetRay}
-    <T is={targetRay}>
+    <T
+      is={targetRay}
+      attach={scene}
+    >
       {@render targetRaySnippet?.()}
 
       {#if hasPointerControls || hasTeleportControls}

package/dist/components/Hand.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Group } from 'three'
-  import { T, useThrelte, useTask } from '@threlte/core'
+  import { T, useThrelte, useTask, useStage } from '@threlte/core'
   import type { XRHandEvents } from '../types.js'
   import { isHandTracking, handEvents } from '../internal/state.svelte.js'
   import { hands } from '../hooks/useHand.svelte.js'
@@ -45,12 +45,13 @@
     wrist
   }: Props = $props()
 
-  const { scene, renderer, scheduler, renderStage } = useThrelte()
+  const { scene, renderer, renderStage } = useThrelte()
 
   const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : (hand ?? 'left'))
 
   $effect.pre(() => {
-    handEvents[handedness] = {
+    const key = handedness
+    handEvents[key] = {
       onconnected,
       ondisconnected,
       onpinchend,
@@ -58,10 +59,12 @@
     }
 
     return () => {
-      handEvents[handedness] = undefined
+      handEvents[key] = undefined
     }
   })
 
+  const stage = useStage(Symbol('xr-hand-stage'), { before: renderStage })
+
   const group = new Group()
 
   /**
@@ -90,7 +93,7 @@
       group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w)
     },
     {
-      stage: scheduler.createStage(Symbol('xr-hand-stage'), { before: renderStage }),
+      stage,
       running: () =>
         isHandTracking.current &&
         (wrist !== undefined || children !== undefined) &&
@@ -114,7 +117,10 @@
   </T>
 
   {#if targetRay !== undefined}
-    <T is={xrHand.targetRay}>
+    <T
+      is={xrHand.targetRay}
+      attach={scene}
+    >
       {@render targetRay()}
     </T>
   {/if}

package/dist/components/XR.svelte

@@ -21,7 +21,7 @@ This should be placed within a Threlte `<Canvas />`.
   import type { EventListener, WebXRManager, Event as ThreeEvent } from 'three'
   import type { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js'
   import type { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js'
-  import type { Snippet } from 'svelte'
+  import { untrack, type Snippet } from 'svelte'
   import { useThrelte } from '@threlte/core'
   import {
     isHandTracking,
@@ -78,6 +78,9 @@ This should be placed within a Threlte `<Canvas />`.
 
     /** Called when available inputsources change */
     oninputsourceschange?: (event: XRSessionEvent) => void
+
+    /** Called when the session frame rate changes. */
+    onframeratechange?: (event: XRSessionEvent) => void
   }
 
   let {
@@ -88,6 +91,7 @@ This should be placed within a Threlte `<Canvas />`.
     onsessionend,
     onvisibilitychange,
     oninputsourceschange,
+    onframeratechange,
     fallback,
     children,
     handFactory,
@@ -96,8 +100,6 @@ This should be placed within a Threlte `<Canvas />`.
 
   const { renderer, renderMode } = useThrelte()
 
-  let originalRenderMode = $renderMode
-
   setupRaf()
   setupHeadset()
   setupControllers(controllerFactory)
@@ -105,12 +107,19 @@ This should be placed within a Threlte `<Canvas />`.
 
   const handleSessionStart: EventListener<object, 'sessionstart', WebXRManager> = (event) => {
     isPresenting.current = true
+    const currentSession = renderer.xr.getSession()
+    if (currentSession !== null) {
+      isHandTracking.current = Array.from(currentSession.inputSources).some(
+        (source) => source.hand !== undefined
+      )
+    }
     onsessionstart?.(event)
   }
 
   const handleSessionEnd = (event: XRSessionEvent) => {
     onsessionend?.(event)
     isPresenting.current = false
+    isHandTracking.current = false
     session.current = undefined
   }
 
@@ -119,12 +128,12 @@ This should be placed within a Threlte `<Canvas />`.
   }
 
   const handleInputSourcesChange = (event: XRInputSourcesChangeEvent) => {
-    isHandTracking.current = Object.values(event.session.inputSources).some((source) => source.hand)
+    isHandTracking.current = Array.from(event.session.inputSources).some((source) => source.hand)
     oninputsourceschange?.(event)
   }
 
   const handleFramerateChange = (event: XRSessionEvent) => {
-    onvisibilitychange?.(event)
+    onframeratechange?.(event)
   }
 
   $effect(() => {
@@ -148,11 +157,15 @@ This should be placed within a Threlte `<Canvas />`.
   })
 
   $effect.pre(() => {
-    if (isPresenting.current) {
-      originalRenderMode = renderMode.current
-      renderMode.set('always')
-    } else {
-      renderMode.set(originalRenderMode)
+    if (!isPresenting.current) return
+
+    // Capture the mode from before we forced 'always' so it survives
+    // any manual renderMode changes made during the session.
+    const saved = untrack(() => renderMode.current)
+    renderMode.set('always')
+
+    return () => {
+      renderMode.set(saved)
     }
   })
 

package/dist/components/XR.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { WebXRManager, Event as ThreeEvent } from 'three';
 import type { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
 import type { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 interface Props {
     /**
      * Enables foveated rendering. Default is `1`, the three.js default.
@@ -36,6 +36,8 @@ interface Props {
     onvisibilitychange?: (event: XRSessionEvent) => void;
     /** Called when available inputsources change */
     oninputsourceschange?: (event: XRSessionEvent) => void;
+    /** Called when the session frame rate changes. */
+    onframeratechange?: (event: XRSessionEvent) => void;
 }
 /**
  * `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.

package/dist/components/internal/Cursor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Color, DoubleSide, RawShaderMaterial, type ColorRepresentation } from 'three'
+  import { Color, DoubleSide, ShaderMaterial, type ColorRepresentation } from 'three'
   import { T } from '@threlte/core'
 
   interface Props {
@@ -11,10 +11,6 @@
   const { color = new Color('white'), size = 0.03, thickness = 0.035 }: Props = $props()
 
   const vertexShader = `
-    uniform mat4 projectionMatrix;
-    uniform mat4 modelViewMatrix;
-    attribute vec2 uv;
-    attribute vec3 position;
     varying vec2 vUv;
     void main() {
       vUv = uv;
@@ -23,14 +19,13 @@
   `
 
   const fragmentShader = `
-    precision mediump float;
     uniform float thickness;
     uniform vec3 color;
     varying vec2 vUv;
     void main() {
-      float radius = 0.1;
-      float dist = length(vUv - vec2(0.5));
-      float alpha = 1.0 - step(thickness, abs(distance(vUv, vec2(0.5)) - 0.25));
+      float d = abs(distance(vUv, vec2(0.5)) - 0.25);
+      float edge = fwidth(d);
+      float alpha = 1.0 - smoothstep(thickness - edge, thickness + edge, d);
       gl_FragColor = vec4(color, alpha);
     }
   `
@@ -40,7 +35,7 @@
     color: { value: color }
   }
 
-  const shaderMaterial = new RawShaderMaterial({
+  const shaderMaterial = new ShaderMaterial({
     vertexShader,
     fragmentShader,
     uniforms,

package/dist/components/internal/PointerCursor.svelte

@@ -11,6 +11,7 @@
 
 <script lang="ts">
   import { T, useTask, useThrelte } from '@threlte/core'
+  import { untrack } from 'svelte'
   import { pointerIntersection, pointerState } from '../../internal/state.svelte.js'
   import Cursor from './Cursor.svelte'
   import type { Snippet } from 'svelte'
@@ -28,6 +29,8 @@
 
   const ref = new Group()
 
+  const SURFACE_OFFSET = 0.002
+
   useTask(
     () => {
       if (intersection === undefined) {
@@ -43,17 +46,28 @@
 
       normalMatrix.getNormalMatrix(object.matrixWorld)
       worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
-      ref.lookAt(vec3.addVectors(point, worldNormal))
+
+      // Float the reticle just above the surface so it doesn't z-fight
+      // with the coplanar face underneath.
+      ref.position.addScaledVector(worldNormal, SURFACE_OFFSET)
+
+      ref.lookAt(vec3.addVectors(ref.position, worldNormal))
     },
     {
       running: () => hovering && intersection !== undefined
     }
   )
 
+  // Snap to the hit point on hover entry so the reticle doesn't visibly
+  // fly in from its previous location. `intersection` is read untracked
+  // so this only reruns on hover transitions, not every frame.
   $effect.pre(() => {
-    if (hovering && intersection) {
-      ref.position.copy(intersection.point)
-    }
+    if (!hovering) return
+    untrack(() => {
+      if (intersection) {
+        ref.position.copy(intersection.point)
+      }
+    })
   })
 </script>
 

package/dist/components/internal/TeleportCursor.svelte

@@ -40,7 +40,10 @@
       if (face) {
         normalMatrix.getNormalMatrix(object.matrixWorld)
         worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
-        ref.lookAt(vec3.addVectors(point, worldNormal))
+        // lookAt from the lerped position (matches PointerCursor) — using the
+        // raw hit point here causes orientation to wobble while position is
+        // still easing toward the target.
+        ref.lookAt(vec3.addVectors(ref.position, worldNormal))
       }
     },
     {

package/dist/hooks/useHandJoint.svelte.js

@@ -1,5 +1,6 @@
 import { useTask, useThrelte } from '@threlte/core';
 import { hands } from './useHand.svelte.js';
+import { isPresenting } from '../internal/state.svelte.js';
 import { toCurrentReadable } from './currentReadable.svelte.js';
 /**
  * Provides a reference to a requested hand joint, once available.
@@ -10,11 +11,18 @@ export const useHandJoint = (handedness, joint) => {
     let jointSpace = $state.raw();
     useTask(() => {
         const space = xrhand?.hand.joints[joint];
-        // The joint radius is a good indicator that the joint is ready
+        // The joint radius is a good indicator that the joint is ready.
+        // Re-check each frame so we pick up reconnects and clear on disconnect.
         if (space?.jointRadius !== undefined) {
-            jointSpace = space;
+            if (jointSpace !== space) {
+                jointSpace = space;
+                invalidate();
+            }
+        }
+        else if (jointSpace !== undefined) {
+            jointSpace = undefined;
             invalidate();
         }
-    }, { running: () => jointSpace === undefined });
+    }, { running: () => isPresenting.current });
     return toCurrentReadable(() => jointSpace);
 };

package/dist/internal/setupControllers.js

@@ -9,12 +9,12 @@ export const setupControllers = (factory) => {
     const hasHands = useHandTrackingState();
     const targetRaySpaces = [xr.getController(0), xr.getController(1)];
     const indexMap = new Map();
+    const modelFactory = factory ?? new XRControllerModelFactory();
     targetRaySpaces.forEach((targetRay, index) => {
-        const model = (factory ?? new XRControllerModelFactory()).createControllerModel(targetRay);
         indexMap.set(targetRay, {
             targetRay,
             grip: xr.getControllerGrip(index),
-            model
+            model: modelFactory.createControllerModel(targetRay)
         });
     });
     onMount(() => {
@@ -25,8 +25,13 @@ export const setupControllers = (factory) => {
             controllerEvents[data.handedness]?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
-            const { model, targetRay, grip } = indexMap.get(this);
             const { data: inputSource } = event;
+            // The targetRaySpace 'connected' event fires for both controller and
+            // hand-tracking input sources. The controllers slot represents a physical
+            // controller — setupHands handles the hand-tracking side.
+            if (inputSource.hand)
+                return;
+            const { model, targetRay, grip } = indexMap.get(this);
             controllers[event.data.handedness] = {
                 inputSource,
                 targetRay,

package/dist/internal/setupHands.js

@@ -9,12 +9,12 @@ export const setupHands = (factory) => {
     const hasHands = useHandTrackingState();
     const handSpaces = [xr.getHand(0), xr.getHand(1)];
     const map = new Map();
+    const modelFactory = factory ?? new XRHandModelFactory();
     handSpaces.forEach((handSpace, index) => {
-        const model = (factory ?? new XRHandModelFactory()).createHandModel(handSpace, 'mesh');
         map.set(handSpace, {
             hand: handSpace,
             targetRay: xr.getController(index),
-            model
+            model: modelFactory.createHandModel(handSpace, 'mesh')
         });
     });
     onMount(() => {
@@ -42,7 +42,10 @@ export const setupHands = (factory) => {
         }
         const handleDisconnected = (event) => {
             dispatch(event);
-            hands[event.data.handedness] = undefined;
+            const { handedness } = event.data;
+            if (handedness === 'left' || handedness === 'right') {
+                hands[handedness] = undefined;
+            }
         };
         for (const handSpace of handSpaces) {
             handSpace.addEventListener('connected', handleConnected);

package/dist/internal/setupHeadset.svelte.js

@@ -1,11 +1,11 @@
 import { Group } from 'three';
-import { useThrelte, useTask } from '@threlte/core';
+import { useThrelte, useTask, useStage } from '@threlte/core';
 import { isPresenting } from './state.svelte.js';
 export const headset = new Group();
 export const setupHeadset = () => {
-    const { renderer, camera, scheduler, renderStage } = useThrelte();
+    const { renderer, camera, renderStage } = useThrelte();
+    const stage = useStage(Symbol('xr-headset-stage'), { before: renderStage });
     const { xr } = renderer;
-    const stage = scheduler.createStage(Symbol('xr-headset-stage'), { before: renderStage });
     useTask(() => {
         const space = xr.getReferenceSpace();
         if (space === null)

package/dist/lib/toggleXRSession.js

@@ -15,10 +15,10 @@ export const toggleXRSession = async (sessionMode, sessionInit, force) => {
         return currentSession;
     if (force === 'exit' && !hasSession)
         return;
-    // Exit a session if entered
+    // Exit a session if entered. `session.current` is cleared by XR.svelte's
+    // `handleSessionEnd` when the 'end' event fires — don't duplicate that here.
     if (hasSession) {
         await currentSession.end();
-        session.current = undefined;
         return;
     }
     if (xr.current === undefined) {

package/dist/plugins/pointerControls/compute.js

@@ -5,6 +5,10 @@ export const defaultComputeFunction = (context, handContext) => {
     const targetRay = controllers[handContext.hand]?.targetRay;
     if (targetRay === undefined)
         return;
+    // `<Controller>` attaches targetRay to the scene root so local === world;
+    // we can read `.position`/`.quaternion` directly without a matrixWorld
+    // roundtrip (which would force-recompose the matrix three.js writes from
+    // the XR pose and introduce a drift against the visible render).
     forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);
     context.raycaster.set(targetRay.position, forward);
 };

package/dist/plugins/pointerControls/hook.js

@@ -15,6 +15,8 @@ export const usePointerControls = () => {
     };
     const removeInteractiveObject = (object) => {
         const index = context.interactiveObjects.indexOf(object);
+        if (index === -1)
+            return;
         context.interactiveObjects.splice(index, 1);
         dispatchers.delete(object);
     };

package/dist/plugins/pointerControls/index.js

@@ -5,7 +5,6 @@ import { injectPointerControlsPlugin } from './plugin.svelte.js';
 import { setupPointerControls } from './setup.svelte.js';
 import { getControlsContext, getHandContext, setControlsContext, setHandContext, setInternalContext } from './context.js';
 import { pointerState } from '../../internal/state.svelte.js';
-let controlsCounter = 0;
 export const pointerControls = (handedness, options) => {
     if (getControlsContext() === undefined) {
         injectPointerControlsPlugin();
@@ -35,8 +34,7 @@ export const pointerControls = (handedness, options) => {
     }
     const handContext = getHandContext(handedness);
     observe.pre(() => [handContext.enabled], ([enabled]) => {
-        controlsCounter += enabled ? 1 : -1;
-        pointerState[handedness].enabled = controlsCounter > 0;
+        pointerState[handedness].enabled = enabled;
     });
     observe.pre(() => [handContext.pointerOverTarget], ([hovering]) => {
         pointerState[handedness].hovering = hovering;

package/dist/plugins/pointerControls/plugin.svelte.js

@@ -1,15 +1,10 @@
-import { injectPlugin, isInstanceOf, observe } from '@threlte/core';
+import { injectPlugin, isInstanceOf } from '@threlte/core';
 import { usePointerControls } from './hook.js';
 import { events } from './types.js';
 export const injectPointerControlsPlugin = () => {
     injectPlugin('threlte-pointer-controls', (args) => {
         if (!isInstanceOf(args.ref, 'Object3D'))
             return;
-        const hasEventHandlers = Object.entries(args.props).some(([key, value]) => {
-            return value !== undefined && events.includes(key);
-        });
-        if (!hasEventHandlers)
-            return;
         const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
         $effect.pre(() => {
             const ref = args.ref;
@@ -22,10 +17,6 @@ export const injectPointerControlsPlugin = () => {
                 removeInteractiveObject(ref);
             };
         });
-        observe.pre(() => [args.ref], ([ref]) => {
-            addInteractiveObject(ref, args.props);
-            return () => removeInteractiveObject(ref);
-        });
         return {
             pluginProps: events
         };

package/dist/plugins/pointerControls/setup.svelte.js

@@ -5,8 +5,19 @@ import { controllers } from '../../hooks/useController.svelte.js';
 import { useHand } from '../../hooks/useHand.svelte.js';
 import { useFixed } from '../../internal/useFixed.js';
 import { isPresenting, pointerIntersection } from '../../internal/state.svelte.js';
+// Hover identity must match the dedup key used in `getHits`, otherwise the ID
+// changes mid-hover (e.g. the hit's face index changes as the ray sweeps a
+// plain mesh) and the object flickers between pointerout/pointerenter every
+// frame.
 const getIntersectionId = (intersection) => {
-    return `${(intersection.eventObject || intersection.object).uuid}|${intersection.index}|${intersection.instanceId}`;
+    const target = intersection.eventObject ?? intersection.object;
+    if (intersection.instanceId !== undefined) {
+        return `${target.uuid}|${intersection.instanceId}`;
+    }
+    if (intersection.object.isPoints) {
+        return `${target.uuid}|${intersection.index}`;
+    }
+    return target.uuid;
 };
 const EPSILON = 0.0001;
 export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) => {
@@ -29,24 +40,18 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         handleEvent('onpointerup', event);
     };
     const handleClick = (event) => {
-        // If a click yields no results, pass it back to the user as a miss
-        // Missed events have to come first in order to establish user-land side-effect clean up
-        if (hits.length === 0) {
-            pointerMissed(context.interactiveObjects, event);
-        }
         handleEvent('onclick', event);
     };
     function cancelPointer(intersections) {
         if (handContext.hovered.size === 0)
             return;
+        const currentIds = new Set();
+        for (const hit of intersections) {
+            currentIds.add(getIntersectionId(hit));
+        }
         const toRemove = [];
         for (const [id, hoveredObj] of handContext.hovered) {
-            // When no objects were hit or the hovered object wasn't found underneath the cursor
-            // we call pointerout and delete the object from the hovered elements map
-            if (intersections.length === 0 ||
-                !intersections.some((hit) => hit.object === hoveredObj.object &&
-                    hit.index === hoveredObj.index &&
-                    hit.instanceId === hoveredObj.instanceId)) {
+            if (!currentIds.has(id)) {
                 toRemove.push([id, hoveredObj]);
             }
         }
@@ -114,7 +119,13 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     const handleEvent = (name, event) => {
         const isPointerMove = name === 'onpointermove';
         const isClickEvent = name === 'onclick' || name === 'oncontextmenu';
-        // Take care of unhover
+        // Fire pointermissed for objects that were not under the pointer at pointerdown.
+        // Must come before the dispatch loop so user-land cleanup runs first.
+        if (isClickEvent) {
+            pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
+        }
+        // Update hover state before dispatch so that pointerout/pointerleave fire
+        // before pointerover/pointerenter on newly hit objects.
         if (isPointerMove)
             cancelPointer(hits);
         let stopped = false;
@@ -127,6 +138,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 stopped,
                 ...hit,
                 intersections: hits,
+                handedness,
                 stopPropagation() {
                     stopped = true;
                     intersectionEvent.stopped = true;
@@ -166,15 +178,11 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 // Call pointer move
                 events.onpointermove?.(intersectionEvent);
             }
-            else if ((!isClickEvent || handContext.initialHits.includes(hit.eventObject)) &&
-                events[name] !== undefined) {
-                // Missed events have to come first
-                pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
-                // Call the event
-                events[name]?.(intersectionEvent);
-            }
-            else if (isClickEvent && handContext.initialHits.includes(hit.eventObject)) {
-                pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
+            else if (events[name] !== undefined) {
+                // All other events
+                if (!isClickEvent || handContext.initialHits.includes(hit.eventObject)) {
+                    events[name]?.(intersectionEvent);
+                }
             }
             if (stopped)
                 break dispatchEvents;
@@ -194,42 +202,28 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         autoStart: false
     });
     observe.pre(() => [controller, handContext.enabled], ([controller, $enabled]) => {
-        if (controller === undefined)
+        if (controller === undefined || !$enabled)
             return;
-        const removeHandlers = () => {
+        controller.targetRay.addEventListener('selectstart', handlePointerDown);
+        controller.targetRay.addEventListener('selectend', handlePointerUp);
+        controller.targetRay.addEventListener('select', handleClick);
+        return () => {
             controller.targetRay.removeEventListener('selectstart', handlePointerDown);
             controller.targetRay.removeEventListener('selectend', handlePointerUp);
             controller.targetRay.removeEventListener('select', handleClick);
         };
-        if ($enabled) {
-            controller.targetRay.addEventListener('selectstart', handlePointerDown);
-            controller.targetRay.addEventListener('selectend', handlePointerUp);
-            controller.targetRay.addEventListener('select', handleClick);
-            return removeHandlers;
-        }
-        else {
-            removeHandlers();
-            return;
-        }
     });
     observe.pre(() => [hand, handContext.enabled], ([input, enabled]) => {
-        if (input === undefined)
+        if (input === undefined || !enabled)
             return;
-        const removeHandlers = () => {
+        input.hand.addEventListener('pinchstart', handlePointerDown);
+        input.hand.addEventListener('pinchend', handlePointerUp);
+        input.hand.addEventListener('pinchend', handleClick);
+        return () => {
             input.hand.removeEventListener('pinchstart', handlePointerDown);
             input.hand.removeEventListener('pinchend', handlePointerUp);
             input.hand.removeEventListener('pinchend', handleClick);
         };
-        if (enabled) {
-            input.hand.addEventListener('pinchstart', handlePointerDown);
-            input.hand.addEventListener('pinchend', handlePointerUp);
-            input.hand.addEventListener('pinchend', handleClick);
-            return removeHandlers;
-        }
-        else {
-            removeHandlers();
-            return;
-        }
     });
     observe.pre(() => [isPresenting.current, handContext.enabled], ([isPresenting, $enabled]) => {
         if (isPresenting && $enabled) {

package/dist/plugins/pointerControls/types.d.ts

@@ -13,6 +13,8 @@ export interface IntersectionEvent extends Intersection {
     eventObject: Object3D;
     /** An array of intersections */
     intersections: Intersection[];
+    /** Which hand dispatched this event. Each controller/hand fires enter/leave/etc. independently. */
+    handedness: 'left' | 'right';
     /** Normalized event coordinates */
     pointer: Vector3;
     /** Delta between first click and this event */

package/dist/plugins/pointerControls/types.js

@@ -7,5 +7,6 @@ export const events = [
     'onpointerout',
     'onpointerenter',
     'onpointerleave',
-    'onpointermove'
+    'onpointermove',
+    'onpointermissed'
 ];

package/dist/plugins/teleportControls/compute.js

@@ -5,6 +5,10 @@ export const defaultComputeFunction = (context, handContext) => {
     const targetRay = controllers[handContext.hand]?.targetRay;
     if (targetRay === undefined)
         return;
+    // `<Controller>` attaches targetRay to the scene root so local === world;
+    // we can read `.position`/`.quaternion` directly without a matrixWorld
+    // roundtrip (which would force-recompose the matrix three.js writes from
+    // the XR pose and introduce a drift against the visible render).
     forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);
     context.raycaster.set(targetRay.position, forward);
 };

package/dist/plugins/teleportControls/context.js

@@ -27,6 +27,8 @@ export const createTeleportContext = (compute) => {
     };
     const removeSurface = (mesh) => {
         const index = context.interactiveObjects.indexOf(mesh);
+        if (index === -1)
+            return;
         context.interactiveObjects.splice(index, 1);
         context.surfaces.delete(mesh.uuid);
         context.dispatchers.delete(mesh);
@@ -41,6 +43,8 @@ export const createTeleportContext = (compute) => {
     };
     const removeBlocker = (mesh) => {
         const index = context.interactiveObjects.indexOf(mesh);
+        if (index === -1)
+            return;
         context.interactiveObjects.splice(index, 1);
         context.blockers.delete(mesh.uuid);
     };

package/dist/plugins/teleportControls/index.js

@@ -4,7 +4,6 @@ import { injectTeleportControlsPlugin } from './plugin.svelte.js';
 import { setHandContext } from './context.js';
 import { setupTeleportControls } from './setup.svelte.js';
 import { teleportState } from '../../internal/state.svelte.js';
-let controlsCounter = 0;
 export const teleportControls = (handedness, options) => {
     if (useTeleportControls() === undefined) {
         injectTeleportControlsPlugin();
@@ -13,7 +12,6 @@ export const teleportControls = (handedness, options) => {
     const context = useTeleportControls();
     if (getHandContext(handedness) === undefined) {
         const enabled = options?.enabled ?? true;
-        controlsCounter += enabled ? 1 : -1;
         const ctx = {
             hand: handedness,
             active: currentWritable(false),
@@ -25,8 +23,7 @@ export const teleportControls = (handedness, options) => {
     }
     const handContext = getHandContext(handedness);
     observe.pre(() => [handContext.enabled], ([enabled]) => {
-        controlsCounter += enabled ? 1 : -1;
-        teleportState[handedness].enabled = controlsCounter > 0;
+        teleportState[handedness].enabled = enabled;
     });
     observe.pre(() => [handContext.active], ([hovering]) => {
         teleportState[handedness].hovering = hovering;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",
@@ -28,7 +28,8 @@
     "typescript-eslint": "^8.32.0",
     "vite": "^7.1.4",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.5.8"
+    "@threlte/core": "8.5.9",
+    "@threlte/extras": "9.14.9"
   },
   "peerDependencies": {
     "svelte": ">=5",