@threlte/xr 0.0.3 → 0.0.5

package/dist/components/Controller.svelte

@@ -1,6 +1,5 @@
 <!--
-@component
-`<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model.
+@component `<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model.
 -->
 <script
  
@@ -8,15 +7,10 @@
 >import { T, createRawEventDispatcher, useThrelte } from "@threlte/core";
 import { onDestroy } from "svelte";
 import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory";
-import ShortRay from "../components/ShortRay.svelte";
+import ShortRay from "./ShortRay.svelte";
 import { gaze, left as leftStore, right as rightStore } from "../hooks/useController";
-import { useControllerEvent } from "../hooks/useEvent";
-import { fire } from "../internal/events";
-import {
-  activeTeleportController,
-  isHandTracking,
-  pendingTeleportDestination
-} from "../internal/stores";
+import { activeTeleportController, pendingTeleportDestination, isHandTracking } from "../internal/stores";
+import { useHandTrackingState } from "../internal/useHandTrackingState";
 const factory = new XRControllerModelFactory();
 const stores = {
   left: leftStore,
@@ -34,63 +28,63 @@ const events = [
 const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
-<script>export let left = false;
-export let right = false;
+<script>export let left = void 0;
+export let right = void 0;
+export let hand = void 0;
 $:
-  if (left && right) {
-    throw new Error("A <Controller> component can only specify one hand.");
-  }
-$:
-  if (!left && !right) {
-    throw new Error("A <Controller> component must specify a hand.");
-  }
-$:
-  handedness = left ? "left" : "right";
+  handedness = left ? "left" : right ? "right" : hand;
 const dispatch = createRawEventDispatcher();
 const { xr } = useThrelte().renderer;
+const handTrackingNow = useHandTrackingState();
+const handleEvent = (event) => {
+  if (!handTrackingNow()) {
+    dispatch(event.type, event);
+  }
+};
 const handleConnected = (event) => {
-  const data = event.data;
-  if (data.handedness !== handedness)
+  const targetData = eventMap.get(event.target);
+  if (event.data.handedness !== handedness || !targetData)
     return;
-  stores[data.handedness].set({ ...eventMap.get(event.target), inputSource: data });
-  fire("connected", event, { input: "controller" });
+  stores[handedness].set({ ...targetData, inputSource: event.data });
+  if (!handTrackingNow()) {
+    dispatch("connected", event);
+  }
+  events.forEach((name) => event.target.addEventListener(name, handleEvent));
 };
 const handleDisconnected = (event) => {
   if (event.data.handedness !== handedness)
     return;
-  stores[event.data.handedness].set(void 0);
-  fire("disconnected", event, { input: "controller" });
+  stores[handedness].set(void 0);
+  if (!$isHandTracking) {
+    dispatch("disconnected", event);
+  }
+  events.forEach((name) => event.target.removeEventListener(name, handleEvent));
 };
-const handleEvent = (event) => fire(event.type, event);
 for (const index of [0, 1]) {
-  const controller2 = xr.getController(index);
+  const controller = xr.getController(index);
   const grip2 = xr.getControllerGrip(index);
   const model2 = factory.createControllerModel(grip2);
-  eventMap.set(controller2, { controller: controller2, model: model2, grip: grip2 });
-  controller2.addEventListener("connected", handleConnected);
-  controller2.addEventListener("disconnected", handleDisconnected);
-  events.forEach((name) => controller2.addEventListener(name, handleEvent));
+  eventMap.set(controller, { targetRay: controller, model: model2, grip: grip2 });
+  controller.addEventListener("connected", handleConnected);
+  controller.addEventListener("disconnected", handleDisconnected);
 }
 $:
-  store = left ? stores.left : stores.right;
+  store = stores[handedness];
 $:
   grip = $store?.grip;
 $:
-  controller = $store?.controller;
+  targetRay = $store?.targetRay;
 $:
   model = $store?.model;
-for (const type of ["connected", "disconnected", ...events]) {
-  useControllerEvent(type, (event) => dispatch(type, event), {
-    handedness: left ? "left" : "right"
-  });
-}
 onDestroy(() => {
   for (const index of [0, 1]) {
     const controller2 = xr.getController(index);
     controller2.removeEventListener("connected", handleConnected);
     controller2.removeEventListener("disconnected", handleDisconnected);
-    events.forEach((name) => controller2.removeEventListener(name, handleEvent));
   }
+  const controller = $store?.targetRay;
+  events.forEach((name) => controller?.removeEventListener(name, handleEvent));
+  store.set(void 0);
 });
 </script>
 
@@ -108,15 +102,15 @@ onDestroy(() => {
     </T>
   {/if}
 
-  {#if controller}
+  {#if targetRay}
     <T
-      is={controller}
+      is={targetRay}
       name="XR controller {handedness}"
       visible={!$isHandTracking}
     >
       <slot name="target-ray" />
       <ShortRay
-        visible={$activeTeleportController === controller &&
+        visible={$activeTeleportController === targetRay &&
           $pendingTeleportDestination === undefined}
       />
     </T>

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

@@ -2,8 +2,20 @@ import { SvelteComponent } from "svelte";
 import type { XRControllerEvent } from '../types';
 declare const __propDef: {
     props: {
-        /** Whether the controller should be matched with the left hand. */ left?: boolean;
-        /** Whether the controller should be matched with the right hand. */ right?: boolean;
+        /** Whether the controller should be matched with the left hand. */
+        left: true;
+        right?: undefined;
+        hand?: undefined;
+    } | {
+        /** Whether the controller should be matched with the right hand. */
+        right: true;
+        left?: undefined;
+        hand?: undefined;
+    } | {
+        /** Whether the controller should be matched with the left or right hand. */
+        hand: 'left' | 'right';
+        left?: undefined;
+        right?: undefined;
     };
     slots: {
         default: {};

package/dist/components/Hand.svelte

@@ -1,8 +1,8 @@
 <script context='module'>import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
 import { XRHandModelFactory } from "three/examples/jsm/webxr/XRHandModelFactory";
-import { fire } from "../internal/events";
+import { isHandTracking } from "../internal/stores";
+import { useHandTrackingState } from "../internal/useHandTrackingState";
 import { left as leftStore, right as rightStore } from "../hooks/useHand";
-import { useHandEvent } from "../hooks/useEvent";
 import { onDestroy } from "svelte";
 const factory = new XRHandModelFactory();
 const stores = {
@@ -12,48 +12,38 @@ const stores = {
 const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
-<script>export let left = false;
-export let right = false;
+<script>export let left = void 0;
+export let right = void 0;
+export let hand = void 0;
+const handTrackingNow = useHandTrackingState();
 const dispatch = createRawEventDispatcher();
 const { xr } = useThrelte().renderer;
 const space = xr.getReferenceSpace();
 $:
-  if (left && right) {
-    throw new Error("A <Hand> component can only specify one hand.");
-  }
-$:
-  if (!left && !right) {
-    throw new Error("A <Hand> component must specify a hand.");
-  }
-$:
-  handedness = left ? "left" : "right";
+  handedness = left ? "left" : right ? "right" : hand;
 const handleConnected = (event) => {
-  const inputSource2 = event.data.hand;
-  const eventHandedness = event.data.handedness;
-  if (eventHandedness !== handedness)
+  if (event.data.handedness !== handedness)
     return;
-  stores[handedness].set({ ...eventMap.get(event.target), inputSource: inputSource2 });
-  fire("connected", event, { input: "hand" });
+  stores[handedness].set({ ...eventMap.get(event.target), inputSource: event.data.hand });
+  if (handTrackingNow()) {
+    dispatch("connected", event);
+  }
+  event.target.addEventListener("pinchstart", handlePinchEvent);
+  event.target.addEventListener("pinchend", handlePinchEvent);
 };
 const handleDisconnected = (event) => {
-  const eventHandedness = event.data.handedness;
-  if (eventHandedness !== handedness)
+  if (event.data.handedness !== handedness)
     return;
   stores[handedness].set(void 0);
-  fire("disconnected", event, { input: "hand" });
+  if ($isHandTracking) {
+    dispatch("disconnected", event);
+  }
+  event.target.removeEventListener("pinchstart", handlePinchEvent);
+  event.target.removeEventListener("pinchend", handlePinchEvent);
 };
 const handlePinchEvent = (event) => {
-  fire(event.type, event);
+  dispatch(event.type, event);
 };
-for (const index of [0, 1]) {
-  const hand2 = xr.getHand(index);
-  const model2 = factory.createHandModel(hand2, "mesh");
-  eventMap.set(hand2, { hand: hand2, model: model2 });
-  hand2.addEventListener("connected", handleConnected);
-  hand2.addEventListener("disconnected", handleDisconnected);
-  hand2.addEventListener("pinchstart", handlePinchEvent);
-  hand2.addEventListener("pinchend", handlePinchEvent);
-}
 let children;
 const { start, stop } = useFrame(() => {
   const frame = xr.getFrame();
@@ -74,32 +64,30 @@ $:
     stop();
   }
 $:
-  store = left ? stores.left : stores.right;
+  store = stores[handedness];
 $:
   hand = $store?.hand;
 $:
   inputSource = $store?.inputSource;
 $:
   model = $store?.model;
-const handEvents = [
-  "connected",
-  "disconnected",
-  "pinchstart",
-  "pinchend"
-];
-for (const name of handEvents) {
-  useHandEvent(name, (event) => dispatch(name, event), {
-    handedness: left ? "left" : "right"
-  });
+for (const index of [0, 1]) {
+  const hand2 = xr.getHand(index);
+  const model2 = factory.createHandModel(hand2, "mesh");
+  eventMap.set(hand2, { hand: hand2, model: model2 });
+  hand2.addEventListener("connected", handleConnected);
+  hand2.addEventListener("disconnected", handleDisconnected);
 }
 onDestroy(() => {
   for (const index of [0, 1]) {
-    const hand2 = xr.getHand(index);
-    hand2.removeEventListener("connected", handleConnected);
-    hand2.removeEventListener("disconnected", handleDisconnected);
-    hand2.removeEventListener("pinchstart", handlePinchEvent);
-    hand2.removeEventListener("pinchend", handlePinchEvent);
+    const hand3 = xr.getHand(index);
+    hand3.removeEventListener("connected", handleConnected);
+    hand3.removeEventListener("disconnected", handleDisconnected);
   }
+  const hand2 = stores[handedness].current?.hand;
+  hand2?.removeEventListener("pinchstart", handlePinchEvent);
+  hand2?.removeEventListener("pinchend", handlePinchEvent);
+  stores[handedness].set(void 0);
 });
 </script>
 

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

@@ -2,18 +2,30 @@ import { SvelteComponent } from "svelte";
 import type { XRHandEvent } from '../types';
 declare const __propDef: {
     props: {
-        /** Whether the XRHand should be matched with the left hand. */ left?: boolean;
-        /** Whether the XRHand should be matched with the right hand. */ right?: boolean;
+        /** Whether the XRHand should be matched with the left hand. */
+        left: true;
+        right?: undefined;
+        hand?: undefined;
+    } | {
+        /** Whether the XRHand should be matched with the right hand. */
+        right: true;
+        left?: undefined;
+        hand?: undefined;
+    } | {
+        /** Whether the XRHand should be matched with the left or right hand. */
+        hand: 'left' | 'right';
+        left?: undefined;
+        right?: undefined;
     };
     slots: {
         wrist: {};
         default: {};
     };
     events: {
-        connected: XRHandEvent<'connected', null>;
-        disconnected: XRHandEvent<'disconnected', null>;
-        pinchstart: XRHandEvent<'pinchstart', THREE.XRHandSpace>;
-        pinchend: XRHandEvent<'pinchend', THREE.XRHandSpace>;
+        connected: XRHandEvent<'connected'>;
+        disconnected: XRHandEvent<'disconnected'>;
+        pinchstart: XRHandEvent<'pinchstart'>;
+        pinchend: XRHandEvent<'pinchend'>;
     };
 };
 export type HandProps = typeof __propDef.props;

package/dist/components/Headset.svelte

@@ -0,0 +1,44 @@
+<script>import { T, HierarchicalObject, useFrame, useThrelte } from "@threlte/core";
+import { Group } from "three";
+import { useXR } from "../hooks";
+const { isPresenting } = useXR();
+const { renderer, scene, camera } = useThrelte();
+const { xr } = renderer;
+const group = new Group();
+const immersiveFrame = useFrame(() => {
+  const space = xr.getReferenceSpace();
+  if (space === null)
+    return;
+  const pose = xr.getFrame().getViewerPose(space);
+  if (pose === void 0)
+    return;
+  const { position, orientation } = pose.transform;
+  group.position.set(position.x, position.y, position.z);
+  group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
+}, { autostart: false });
+$:
+  if ($isPresenting) {
+    immersiveFrame.start();
+  } else {
+    immersiveFrame.stop();
+  }
+const nonImmersiveFrame = useFrame(() => {
+  group.position.copy(camera.current.position);
+  group.quaternion.copy(camera.current.quaternion);
+}, { autostart: false });
+$:
+  if ($isPresenting === false) {
+    nonImmersiveFrame.start();
+  } else {
+    nonImmersiveFrame.stop();
+  }
+</script>
+
+<HierarchicalObject
+  onChildMount={(child) => { scene.add(child) }}
+  onChildDestroy={(child) => { scene.remove(child) }}
+>
+	<T is={group}>
+		<slot />
+	</T>
+</HierarchicalObject>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HeadsetProps = typeof __propDef.props;
+export type HeadsetEvents = typeof __propDef.events;
+export type HeadsetSlots = typeof __propDef.slots;
+export default class Headset extends SvelteComponent<HeadsetProps, HeadsetEvents, HeadsetSlots> {
+}
+export {};

package/dist/components/ShortRay.svelte

@@ -1,6 +1,6 @@
 <script>import { T } from "@threlte/core";
 const vertexShader = `
-  uniform mat4 modelViewMatrix;                                                                                                                                                                                                  
+  uniform mat4 modelViewMatrix;
   uniform mat4 projectionMatrix;
   attribute vec2 uv;
   attribute vec3 position;
@@ -24,5 +24,9 @@ const fragmentShader = `
   {@const heightSegments = 1}
   {@const openEnded = false}
   <T.CylinderGeometry args={[radius, radius, height, radialSegments, heightSegments, openEnded]} />
-  <T.RawShaderMaterial transparent {vertexShader} {fragmentShader} />
+  <T.RawShaderMaterial
+    transparent
+    {vertexShader}
+    {fragmentShader}
+  />
 </T.Mesh>

package/dist/components/TeleportControls.svelte

@@ -97,7 +97,7 @@ const handleSelectEnd = () => {
 useFrame(() => {
   const selecting = (teleportGamepad.current?.axes[3] ?? 0) < -0.9;
   if (selecting && activeController === void 0) {
-    handleSelectStart(teleportController.current.controller);
+    handleSelectStart(teleportController.current.targetRay);
   } else if (!selecting && activeController !== void 0) {
     handleSelectEnd();
   }
@@ -133,4 +133,4 @@ teleportPlugin(navMeshes);
       polygonOffsetFactor={-1}
     />
   </T.Mesh>
-</slot>
+</slot>

package/dist/components/XR.svelte

@@ -1,7 +1,6 @@
 <!--
 
-@component
-`<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
+@component `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
 
 This should be placed within a Threlte `<Canvas />`.
 
@@ -18,10 +17,16 @@ This should be placed within a Threlte `<Canvas />`.
 ```
 
 -->
-
 <script>import { onDestroy } from "svelte";
-import { useThrelte, createRawEventDispatcher } from "@threlte/core";
-import { session, referenceSpaceType, isPresenting, isHandTracking, initialized, xr as xrStore } from "../internal/stores";
+import { createRawEventDispatcher, useThrelte } from "@threlte/core";
+import {
+  initialized,
+  isHandTracking,
+  isPresenting,
+  referenceSpaceType,
+  session,
+  xr as xrStore
+} from "../internal/stores";
 export let foveation = 1;
 export let frameRate = void 0;
 export let referenceSpace = "local-floor";
@@ -41,7 +46,7 @@ const handleVisibilityChange = (event) => {
   dispatch("visibilitychange", { ...event, target: $session });
 };
 const handleInputSourcesChange = (event) => {
-  $isHandTracking = Object.values($session.inputSources).some((source) => source.hand);
+  $isHandTracking = Object.values(event.session.inputSources).some((source) => source.hand);
   dispatch("inputsourceschange", { ...event, target: $session });
 };
 const handleFramerateChange = (event) => {
@@ -111,4 +116,6 @@ $:
 
 {#if $isPresenting}
   <slot />
-{/if}
+{:else}
+  <slot name="fallback" />
+{/if}

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

@@ -22,6 +22,7 @@ declare const __propDef: {
     };
     slots: {
         default: {};
+        fallback: {};
     };
     events: {
         /** Called as an XRSession is requested */

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { useController, useGamepad } from './useController';
-export { useControllerEvent, useHandEvent } from './useEvent';
 export { useHand } from './useHand';
 export { useHandJoint } from './useHandJoint';
 export { useHitTest } from './useHitTest';

package/dist/hooks/index.js

@@ -1,5 +1,4 @@
 export { useController, useGamepad } from './useController';
-export { useControllerEvent, useHandEvent } from './useEvent';
 export { useHand } from './useHand';
 export { useHandJoint } from './useHandJoint';
 export { useHitTest } from './useHitTest';

package/dist/hooks/useTeleport.d.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 /**
- * Returns a callback to teleport the player to a position.
+ * Returns a callback to teleport the player from the world origin to a position and optional orientation.
  *
  * @example
  * const teleport = useTeleport()
@@ -9,5 +9,9 @@ import * as THREE from 'three';
  * vec3.set(5, 0, 5)
  *
  * teleport(vec3)
+ *
+ * const quat = new THREE.Quaternion()
+ *
+ * teleport(vec3, quat)
  */
-export declare const useTeleport: () => (position: THREE.Vector3 | THREE.Vector3Tuple, direction?: THREE.Quaternion) => void;
+export declare const useTeleport: () => (position: THREE.Vector3 | THREE.Vector3Tuple, orientation?: THREE.Quaternion) => void;

package/dist/hooks/useTeleport.js

@@ -1,11 +1,9 @@
 import * as THREE from 'three';
 import { useThrelte } from '@threlte/core';
-import { session } from '../internal/stores';
-import { onDestroy } from 'svelte';
 const quaternion = new THREE.Quaternion();
 const offset = { x: 0, y: 0, z: 0 };
 /**
- * Returns a callback to teleport the player to a position.
+ * Returns a callback to teleport the player from the world origin to a position and optional orientation.
  *
  * @example
  * const teleport = useTeleport()
@@ -14,41 +12,37 @@ const offset = { x: 0, y: 0, z: 0 };
  * vec3.set(5, 0, 5)
  *
  * teleport(vec3)
+ *
+ * const quat = new THREE.Quaternion()
+ *
+ * teleport(vec3, quat)
  */
 export const useTeleport = () => {
     const { xr } = useThrelte().renderer;
-    let baseReferenceSpace;
-    const unsub = session.subscribe((value) => {
-        if (value === undefined)
-            return;
-        baseReferenceSpace = xr.getReferenceSpace();
-    });
-    onDestroy(unsub);
+    let space = xr.getReferenceSpace();
     /**
-     * Teleports a player to a position - and optionally a direction.
+     * Teleports a player from the world origin to a position and optional orientation.
      */
-    return (position, direction = quaternion) => {
-        if (baseReferenceSpace === null || baseReferenceSpace === undefined)
+    return (position, orientation = quaternion) => {
+        space ??= xr.getReferenceSpace();
+        if (space === null)
             return;
-        let x = 0, y = 0, z = 0;
         if (Array.isArray(position)) {
-            ;
-            [x, y, z] = position;
+            offset.x = -position[0];
+            offset.y = -position[1];
+            offset.z = -position[2];
         }
         else {
-            x = position.x;
-            y = position.y;
-            z = position.z;
+            offset.x = -position.x;
+            offset.y = -position.y;
+            offset.z = -position.z;
         }
-        offset.x = -x;
-        offset.y = -y;
-        offset.z = -z;
-        const pose = xr.getFrame().getViewerPose(baseReferenceSpace);
+        const pose = xr.getFrame()?.getViewerPose(space);
         if (pose !== undefined) {
             offset.x += pose.transform.position.x;
             offset.z += pose.transform.position.z;
         }
-        const teleportOffset = new XRRigidTransform(offset, direction);
-        xr.setReferenceSpace(baseReferenceSpace.getOffsetReferenceSpace(teleportOffset));
+        const teleportOffset = new XRRigidTransform(offset, orientation);
+        xr.setReferenceSpace(space.getOffsetReferenceSpace(teleportOffset));
     };
 };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as VRButton } from './components/VRButton.svelte';
 export { default as XRButton } from './components/XRButton.svelte';
 export { default as Controller } from './components/Controller.svelte';
 export { default as Hand } from './components/Hand.svelte';
+export { default as Headset } from './components/Headset.svelte';
 export { default as TeleportControls } from './components/TeleportControls.svelte';
 export { default as XR } from './components/XR.svelte';
 export { getXRSupportState } from './lib/getXRSupportState';

package/dist/index.js

@@ -3,6 +3,7 @@ export { default as VRButton } from './components/VRButton.svelte';
 export { default as XRButton } from './components/XRButton.svelte';
 export { default as Controller } from './components/Controller.svelte';
 export { default as Hand } from './components/Hand.svelte';
+export { default as Headset } from './components/Headset.svelte';
 export { default as TeleportControls } from './components/TeleportControls.svelte';
 export { default as XR } from './components/XR.svelte';
 export { getXRSupportState } from './lib/getXRSupportState';

package/dist/internal/useHandTrackingState.d.ts

@@ -0,0 +1,5 @@
+/**
+ * There are some cases where we need to know if hand tracking is now active before an input source
+ * connection or disconnection event. This is the way to do that.
+ */
+export declare const useHandTrackingState: () => () => boolean;

package/dist/internal/useHandTrackingState.js

@@ -0,0 +1,17 @@
+import { useThrelte } from '@threlte/core';
+/**
+ * There are some cases where we need to know if hand tracking is now active before an input source
+ * connection or disconnection event. This is the way to do that.
+ */
+export const useHandTrackingState = () => {
+    const { xr } = useThrelte().renderer;
+    return () => {
+        let handTracking = false;
+        xr.getSession()?.inputSources.forEach((value) => {
+            if (value.hand) {
+                handTracking = true;
+            }
+        });
+        return handTracking;
+    };
+};

package/dist/types.d.ts

@@ -10,11 +10,11 @@ export type XRSessionEvent<Type = XRSessionEventType> = THREE.Event & {
 };
 export type XRControllerEvent<Type = XRControllerEventType> = THREE.Event & {
     type: Type;
-    target: any;
-    data?: XRInputSource;
+    target: THREE.Group;
+    data: XRInputSource;
 };
 export type XRController = {
-    controller: THREE.XRTargetRaySpace;
+    targetRay: THREE.XRTargetRaySpace;
     grip: THREE.XRGripSpace;
     model?: XRControllerModel;
     inputSource: XRInputSource;
@@ -24,8 +24,13 @@ export type XRHand = {
     model?: XRHandModel;
     inputSource: globalThis.XRHand;
 };
-export type XRHandEvent<Type = XRHandEventType, Target = null | THREE.XRHandSpace> = THREE.Event & {
+export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? {
     type: Type;
-    target: Target;
-};
+    target: THREE.XRHandSpace;
+    data: XRInputSource;
+} : Type extends 'pinchstart' | 'pinchend' ? {
+    type: Type;
+    handedness: 'left' | 'right';
+    target: null;
+} : never;
 export type HitTestCallback = (hitMatrix: THREE.Matrix4, hit: XRHitTestResult) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {

package/dist/components/Hands.svelte

@@ -1,35 +0,0 @@
-<!--
-  @component
-  Creates XRHand inputs for devices that allow hand tracking.
--->
-<script>import { createRawEventDispatcher } from "@threlte/core";
-import Hand from "./Hand.svelte";
-export let profile = "mesh";
-const dispatch = createRawEventDispatcher();
-const handedness = [void 0, void 0];
-const setHandedness = (index, event) => {
-  if (event.data) {
-    handedness[index] = event.data.handedness;
-  }
-};
-</script>
-
-{#each [0, 1] as index (index)}
-  <Hand
-    {index}
-    {profile}
-    on:connected={(event) => {
-      setHandedness(index, event)
-      dispatch(event.type, event)
-    }}
-    on:disconnected
-    on:pinchstart
-    on:pinchend
-  >
-    {#if handedness[index] === 'left'}
-      <slot name='left' />
-    {:else if handedness[index] === 'right'}
-      <slot name='right' />
-    {/if}
-  </Hand>
-{/each}

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

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { XRHandEvent } from '../types';
-declare const __propDef: {
-    props: {
-        profile?: 'mesh' | 'spheres' | 'boxes' | 'none';
-    };
-    slots: {
-        left: {};
-        right: {};
-    };
-    events: {
-        connected: XRHandEvent<'connected', null>;
-        disconnected: XRHandEvent<'disconnected', null>;
-        pinchstart: XRHandEvent<'pinchstart', THREE.XRHandSpace>;
-        pinchend: XRHandEvent<'pinchend', THREE.XRHandSpace>;
-    };
-};
-export type HandsProps = typeof __propDef.props;
-export type HandsEvents = typeof __propDef.events;
-export type HandsSlots = typeof __propDef.slots;
-/** Creates XRHand inputs for devices that allow hand tracking. */
-export default class Hands extends SvelteComponent<HandsProps, HandsEvents, HandsSlots> {
-}
-export {};

package/dist/hooks/useEvent.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="webxr" />
-import type { XRControllerEventType, XRHandEventType, XRControllerEvent, XRHandEvent } from '../types';
-/**
- * Adds listeners for controller events.
- */
-export declare const useControllerEvent: (event: XRControllerEventType, handler: (event: XRControllerEvent) => void, { handedness }?: {
-    handedness?: XRHandedness;
-}) => void;
-/**
- * Adds listeners for hand events.
- */
-export declare const useHandEvent: (event: XRHandEventType, handler: (event: XRHandEvent<XRHandEventType, null | THREE.XRHandSpace>) => void, { handedness }?: {
-    handedness?: 'left' | 'right';
-}) => void;

package/dist/hooks/useEvent.js

@@ -1,34 +0,0 @@
-import { onDestroy } from 'svelte';
-import { isHandTracking } from '../internal/stores';
-import { on, off } from '../internal/events';
-/**
- * Adds listeners for controller events.
- */
-export const useControllerEvent = (event, handler, { handedness } = {}) => {
-    const listener = (event, metadata) => {
-        if (metadata?.input === 'hand')
-            return;
-        if (handedness !== undefined && event.data?.handedness !== handedness) {
-            return;
-        }
-        handler(event);
-    };
-    on(event, listener);
-    onDestroy(() => off(event, listener));
-};
-/**
- * Adds listeners for hand events.
- */
-export const useHandEvent = (event, handler, { handedness } = {}) => {
-    const listener = (event, metadata) => {
-        if (metadata?.input === 'controller')
-            return;
-        const eventHandedness = event.handedness ?? event.data?.handedness;
-        if (handedness !== undefined && eventHandedness !== handedness) {
-            return;
-        }
-        handler(event);
-    };
-    on(event, listener);
-    onDestroy(() => off(event, listener));
-};

package/dist/internal/events.d.ts

@@ -1,5 +0,0 @@
-type Callback<T = any, O = any> = (event: T, metadata?: O) => void;
-export declare const on: <T, O = any>(name: string, cb: Callback<T, O>) => (() => void);
-export declare const off: <T>(name: string, cb: Callback<T, any>) => void;
-export declare const fire: <T, O = any>(name: string, payload: T, metadata?: O | undefined) => void;
-export {};

package/dist/internal/events.js

@@ -1,26 +0,0 @@
-const events = {};
-export const on = (name, cb) => {
-    const fns = events[name];
-    if (fns === undefined) {
-        events[name] = [cb];
-    }
-    else {
-        fns.push(cb);
-    }
-    return () => off(name, cb);
-};
-export const off = (name, cb) => {
-    const arr = events[name];
-    if (arr === undefined)
-        return;
-    arr.splice(arr.indexOf(cb), 1);
-    if (arr.length === 0)
-        delete events[name];
-};
-export const fire = (name, payload, metadata) => {
-    const fns = events[name];
-    if (fns === undefined)
-        return;
-    for (const fn of fns)
-        fn(payload, metadata);
-};