@threlte/xr 0.1.2 → 1.0.0-next.0

package/dist/components/ARButton.svelte

@@ -9,8 +9,8 @@
   />
 ```
 -->
-
 <script>import XRButton from "./XRButton.svelte";
+let { ...props } = $props();
 </script>
 
 <XRButton
@@ -19,9 +19,6 @@
     requiredFeatures: ['plane-detection'],
     optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers', 'hit-test']
   }}
-  {...$$restProps}
-  mode='immersive-ar'
-  
-  on:click
-  on:error
+  {...props}
+  mode="immersive-ar"
 />

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

@@ -1,227 +1,16 @@
 /// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
-        type?: "button" | "reset" | "submit" | null | undefined;
-        id?: string | null | undefined;
-        name?: string | null | undefined;
-        color?: string | null | undefined;
-        translate?: "" | "yes" | "no" | null | undefined;
-        value?: string | number | string[] | null | undefined;
-        hidden?: boolean | null | undefined;
-        form?: string | null | undefined;
-        slot?: string | null | undefined;
-        style?: string | null | undefined;
-        title?: string | null | undefined;
-        dir?: string | null | undefined;
-        contextmenu?: string | null | undefined;
-        autocapitalize?: string | null | undefined;
-        draggable?: import("svelte/elements").Booleanish | null | undefined;
-        inert?: boolean | null | undefined;
-        lang?: string | null | undefined;
-        spellcheck?: import("svelte/elements").Booleanish | null | undefined;
-        part?: string | null | undefined;
-        prefix?: string | null | undefined;
-        role?: import("svelte/elements").AriaRole | null | undefined;
-        autofocus?: boolean | null | undefined;
-        disabled?: boolean | null | undefined;
-        class?: string | null | undefined;
-        typeof?: string | null | undefined;
-        radiogroup?: string | null | undefined;
-        accesskey?: string | null | undefined;
-        contenteditable?: "inherit" | import("svelte/elements").Booleanish | null | undefined;
-        enterkeyhint?: "search" | "next" | "done" | "enter" | "go" | "previous" | "send" | null | undefined;
-        placeholder?: string | null | undefined;
-        tabindex?: number | null | undefined;
-        about?: string | null | undefined;
-        datatype?: string | null | undefined;
-        inlist?: any;
-        property?: string | null | undefined;
-        resource?: string | null | undefined;
-        vocab?: string | null | undefined;
-        autocorrect?: string | null | undefined;
-        autosave?: string | null | undefined;
-        itemprop?: string | null | undefined;
-        itemscope?: boolean | null | undefined;
-        itemtype?: string | null | undefined;
-        itemid?: string | null | undefined;
-        itemref?: string | null | undefined;
-        results?: number | null | undefined;
-        security?: string | null | undefined;
-        unselectable?: "off" | "on" | null | undefined;
-        inputmode?: "search" | "numeric" | "none" | "url" | "text" | "email" | "tel" | "decimal" | null | undefined;
-        is?: string | null | undefined;
-        'bind:innerHTML'?: string | null | undefined;
-        'bind:textContent'?: string | null | undefined;
-        'bind:innerText'?: string | null | undefined;
-        'bind:contentRect'?: DOMRectReadOnly | null | undefined;
-        'bind:contentBoxSize'?: ResizeObserverSize[] | null | undefined;
-        'bind:borderBoxSize'?: ResizeObserverSize[] | null | undefined;
-        'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | null | undefined;
-        'data-sveltekit-keepfocus'?: true | "" | "off" | null | undefined;
-        'data-sveltekit-noscroll'?: true | "" | "off" | null | undefined;
-        'data-sveltekit-preload-code'?: true | "" | "off" | "eager" | "viewport" | "hover" | "tap" | null | undefined;
-        'data-sveltekit-preload-data'?: true | "" | "off" | "hover" | "tap" | null | undefined;
-        'data-sveltekit-reload'?: true | "" | "off" | null | undefined;
-        'data-sveltekit-replacestate'?: true | "" | "off" | null | undefined;
-        'aria-activedescendant'?: string | null | undefined;
-        'aria-atomic'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-autocomplete'?: "inline" | "both" | "none" | "list" | null | undefined;
-        'aria-busy'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
-        'aria-colcount'?: number | null | undefined;
-        'aria-colindex'?: number | null | undefined;
-        'aria-colspan'?: number | null | undefined;
-        'aria-controls'?: string | null | undefined;
-        'aria-current'?: "time" | "location" | "page" | import("svelte/elements").Booleanish | "step" | "date" | null | undefined;
-        'aria-describedby'?: string | null | undefined;
-        'aria-details'?: string | null | undefined;
-        'aria-disabled'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | null | undefined;
-        'aria-errormessage'?: string | null | undefined;
-        'aria-expanded'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-flowto'?: string | null | undefined;
-        'aria-grabbed'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-haspopup'?: "grid" | "dialog" | "menu" | import("svelte/elements").Booleanish | "listbox" | "tree" | null | undefined;
-        'aria-hidden'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | null | undefined;
-        'aria-keyshortcuts'?: string | null | undefined;
-        'aria-label'?: string | null | undefined;
-        'aria-labelledby'?: string | null | undefined;
-        'aria-level'?: number | null | undefined;
-        'aria-live'?: "off" | "assertive" | "polite" | null | undefined;
-        'aria-modal'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-multiline'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-multiselectable'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-orientation'?: "horizontal" | "vertical" | null | undefined;
-        'aria-owns'?: string | null | undefined;
-        'aria-placeholder'?: string | null | undefined;
-        'aria-posinset'?: number | null | undefined;
-        'aria-pressed'?: boolean | "false" | "true" | "mixed" | null | undefined;
-        'aria-readonly'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined;
-        'aria-required'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-roledescription'?: string | null | undefined;
-        'aria-rowcount'?: number | null | undefined;
-        'aria-rowindex'?: number | null | undefined;
-        'aria-rowspan'?: number | null | undefined;
-        'aria-selected'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-setsize'?: number | null | undefined;
-        'aria-sort'?: "none" | "other" | "ascending" | "descending" | null | undefined;
-        'aria-valuemax'?: number | null | undefined;
-        'aria-valuemin'?: number | null | undefined;
-        'aria-valuenow'?: number | null | undefined;
-        'aria-valuetext'?: string | null | undefined;
-        'on:copy'?: import("svelte/elements").ClipboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:cut'?: import("svelte/elements").ClipboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:paste'?: import("svelte/elements").ClipboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:compositionend'?: import("svelte/elements").CompositionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:compositionstart'?: import("svelte/elements").CompositionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:compositionupdate'?: import("svelte/elements").CompositionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:focus'?: import("svelte/elements").FocusEventHandler<HTMLButtonElement> | null | undefined;
-        'on:focusin'?: import("svelte/elements").FocusEventHandler<HTMLButtonElement> | null | undefined;
-        'on:focusout'?: import("svelte/elements").FocusEventHandler<HTMLButtonElement> | null | undefined;
-        'on:blur'?: import("svelte/elements").FocusEventHandler<HTMLButtonElement> | null | undefined;
-        'on:change'?: import("svelte/elements").FormEventHandler<HTMLButtonElement> | null | undefined;
-        'on:beforeinput'?: import("svelte/elements").EventHandler<InputEvent, HTMLButtonElement> | null | undefined;
-        'on:input'?: import("svelte/elements").FormEventHandler<HTMLButtonElement> | null | undefined;
-        'on:reset'?: import("svelte/elements").FormEventHandler<HTMLButtonElement> | null | undefined;
-        'on:submit'?: import("svelte/elements").EventHandler<SubmitEvent, HTMLButtonElement> | null | undefined;
-        'on:invalid'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:formdata'?: import("svelte/elements").EventHandler<FormDataEvent, HTMLButtonElement> | null | undefined;
-        'on:load'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
-        'on:error'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
-        'on:toggle'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:abort'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:canplay'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:cuechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:durationchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:emptied'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:encrypted'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:ended'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadeddata'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadstart'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:pause'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:play'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:playing'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:progress'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:ratechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:seeked'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:seeking'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:stalled'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:suspend'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:timeupdate'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:volumechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:waiting'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:auxclick'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:click'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:contextmenu'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dblclick'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:drag'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragend'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragenter'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragexit'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragleave'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragover'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragstart'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:drop'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mousedown'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseenter'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseleave'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mousemove'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseout'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseover'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseup'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:select'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:selectionchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:selectstart'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:touchcancel'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
-        'on:touchend'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
-        'on:touchmove'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
-        'on:touchstart'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
-        'on:gotpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointercancel'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerdown'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerenter'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerleave'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointermove'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerout'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerover'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerup'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:lostpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:scroll'?: import("svelte/elements").UIEventHandler<HTMLButtonElement> | null | undefined;
-        'on:resize'?: import("svelte/elements").UIEventHandler<HTMLButtonElement> | null | undefined;
-        'on:wheel'?: import("svelte/elements").WheelEventHandler<HTMLButtonElement> | null | undefined;
-        'on:animationstart'?: import("svelte/elements").AnimationEventHandler<HTMLButtonElement> | null | undefined;
-        'on:animationend'?: import("svelte/elements").AnimationEventHandler<HTMLButtonElement> | null | undefined;
-        'on:animationiteration'?: import("svelte/elements").AnimationEventHandler<HTMLButtonElement> | null | undefined;
-        'on:transitionstart'?: import("svelte/elements").TransitionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:transitionrun'?: import("svelte/elements").TransitionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:transitionend'?: import("svelte/elements").TransitionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:transitioncancel'?: import("svelte/elements").TransitionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:outrostart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
-        'on:outroend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
-        'on:introstart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
-        'on:introend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
-        'on:message'?: import("svelte/elements").MessageEventHandler<HTMLButtonElement> | null | undefined;
-        'on:messageerror'?: import("svelte/elements").MessageEventHandler<HTMLButtonElement> | null | undefined;
-        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:cancel'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:close'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        formaction?: string | null | undefined;
-        formenctype?: string | null | undefined;
-        formmethod?: string | null | undefined;
-        formnovalidate?: boolean | null | undefined;
-        formtarget?: string | null | undefined;
+    props: Omit<import("svelte/elements").HTMLButtonAttributes & {
+        mode: XRSessionMode;
+        sessionInit?: (XRSessionInit & {
+            domOverlay?: {
+                root: HTMLElement;
+            } | undefined;
+        }) | undefined;
         force?: "enter" | "exit" | undefined;
         styled?: boolean | undefined;
+    }, "mode" | "sessionInit"> & {
         sessionInit?: (XRSessionInit & {
             domOverlay?: {
                 root: HTMLElement;
@@ -229,12 +18,6 @@ declare const __propDef: {
         }) | undefined;
     };
     events: {
-        click: CustomEvent<{
-            state: "blocked" | "unsupported" | "insecure" | "supported";
-            nativeEvent: MouseEvent;
-        }>;
-        error: CustomEvent<Error>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/Controller.svelte

@@ -5,9 +5,9 @@
  
   context="module"
 >import { writable } from "svelte/store";
-import { T, createRawEventDispatcher } from "@threlte/core";
+import { T } from "@threlte/core";
 import { left as leftStore, right as rightStore } from "../hooks/useController";
-import { isHandTracking, pointerState, teleportState, controllerDispatchers } from "../internal/stores";
+import { isHandTracking, pointerState, teleportState, controllerEvents } from "../internal/stores";
 import PointerCursor from "./internal/PointerCursor.svelte";
 import ShortRay from "./internal/ShortRay.svelte";
 import ScenePortal from "./internal/ScenePortal.svelte";
@@ -19,28 +19,17 @@ const stores = {
 };
 </script>
 
-<script>export let left = void 0;
-export let right = void 0;
-export let hand = void 0;
-const dispatch = createRawEventDispatcher();
+<script>let { left, right, hand, ...props } = $props();
 const handedness = writable(left ? "left" : right ? "right" : hand);
-$:
-  handedness.set(left ? "left" : right ? "right" : hand);
-controllerDispatchers[$handedness].set(dispatch);
-$:
-  controllerDispatchers[$handedness].set(dispatch);
-$:
-  store = stores[$handedness];
-$:
-  grip = $store?.grip;
-$:
-  targetRay = $store?.targetRay;
-$:
-  model = $store?.model;
-$:
-  hasPointerControls = $pointerState[$handedness].enabled;
-$:
-  hasTeleportControls = $teleportState[$handedness].enabled;
+$effect.pre(() => handedness.set(left ? "left" : right ? "right" : hand));
+controllerEvents[$handedness].set(props.$$events);
+$effect.pre(() => controllerEvents[$handedness].set(props.$$events));
+let store = $derived(stores[$handedness]);
+let grip = $derived($store?.grip);
+let targetRay = $derived($store?.targetRay);
+let model = $derived($store?.model);
+let hasPointerControls = $derived($pointerState[$handedness].enabled);
+let hasTeleportControls = $derived($teleportState[$handedness].enabled);
 </script>
 
 {#if !$isHandTracking}

package/dist/components/Hand.svelte

@@ -1,8 +1,9 @@
 <script
  
   context="module"
->import { T, useThrelte, createRawEventDispatcher, useTask } from "@threlte/core";
-import { isHandTracking, handDispatchers } from "../internal/stores";
+>import { Group } from "three";
+import { T, useThrelte, useTask } from "@threlte/core";
+import { isHandTracking, handEvents } from "../internal/stores";
 import { left as leftStore, right as rightStore } from "../hooks/useHand";
 import ScenePortal from "./internal/ScenePortal.svelte";
 import { writable } from "svelte/store";
@@ -12,18 +13,13 @@ const stores = {
 };
 </script>
 
-<script>export let left = void 0;
-export let right = void 0;
-export let hand = void 0;
-const dispatch = createRawEventDispatcher();
+<script>let { left, right, hand, ...props } = $props();
 const { xr } = useThrelte().renderer;
 const space = xr.getReferenceSpace();
 const handedness = writable(left ? "left" : right ? "right" : hand);
-$:
-  handedness.set(left ? "left" : right ? "right" : hand);
-$:
-  handDispatchers[$handedness].set(dispatch);
-let children;
+$effect.pre(() => handedness.set(left ? "left" : right ? "right" : hand));
+$effect.pre(() => handEvents[$handedness].set(props.$$events));
+let children = new Group();
 const { start, stop } = useTask(
   () => {
     const frame = xr.getFrame();
@@ -39,18 +35,16 @@ const { start, stop } = useTask(
   },
   { autoStart: false }
 );
-$:
+$effect.pre(() => {
   if ($isHandTracking && ($$slots.wrist || $$slots.default) && inputSource) {
     start();
   } else {
     stop();
   }
-$:
-  store = stores[$handedness];
-$:
-  inputSource = $store?.inputSource;
-$:
-  model = $store?.model;
+});
+let store = $derived(stores[$handedness]);
+let inputSource = $derived($store?.inputSource);
+let model = $derived($store?.model);
 </script>
 
 {#if $store?.hand && $isHandTracking}
@@ -69,9 +63,9 @@ $:
 
 {#if $isHandTracking}
   <ScenePortal>
-    <T.Group bind:ref={children}>
+    <T is={children}>
       <slot name="wrist" />
       <slot />
-    </T.Group>
+    </T>
   </ScenePortal>
 {/if}

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { XRHandEvent } from '../types';
 declare const __propDef: {
-    props: {
+    props: ({
         /** Whether the XRHand should be matched with the left hand. */
         left: true;
         right?: undefined;
@@ -16,6 +16,13 @@ declare const __propDef: {
         hand: 'left' | 'right';
         left?: undefined;
         right?: undefined;
+    }) & {
+        $$events: {
+            connected: XRHandEvent<'connected'>;
+            disconnected: XRHandEvent<'disconnected'>;
+            pinchstart: XRHandEvent<'pinchstart'>;
+            pinchend: XRHandEvent<'pinchend'>;
+        };
     };
     slots: {
         'target-ray': {};

package/dist/components/Headset.svelte

@@ -1,4 +1,3 @@
-
 <script>import { T } from "@threlte/core";
 import { useHeadset } from "../hooks/useHeadset";
 import ScenePortal from "./internal/ScenePortal.svelte";
@@ -6,7 +5,7 @@ const headset = useHeadset();
 </script>
 
 <ScenePortal>
-	<T is={headset}>
-		<slot />
-	</T>
+  <T is={headset}>
+    <slot />
+  </T>
 </ScenePortal>

package/dist/components/VRButton.svelte

@@ -9,16 +9,14 @@
   />
 ```
 -->
-
 <script>import XRButton from "./XRButton.svelte";
+let { ...props } = $props();
 </script>
 
 <XRButton
   sessionInit={{
     optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
   }}
-  {...$$restProps}
-  mode='immersive-vr'
-  on:click
-  on:error
+  {...props}
+  mode="immersive-vr"
 />