@threlte/xr 0.0.2

package/dist/components/XR.svelte

@@ -0,0 +1,114 @@
+<!--
+
+@component
+`<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
+
+This should be placed within a Threlte `<Canvas />`.
+
+```svelte
+  <XR
+    foveation={1}
+    frameRate={90}
+    referenceSpace='local-floor'
+    on:sessionstart={(event: XREvent<XRManagerEvent>) => {}}
+    on:sessionend={(event: XREvent<XRManagerEvent>) => {}}
+    on:visibilitychange={(event: XREvent<XRSessionEvent>) => {}}
+    on:inputsourceschange={(event: XREvent<XRSessionEvent>) => {}}
+  />
+```
+
+-->
+
+<script>import { onDestroy } from "svelte";
+import { useThrelte, createRawEventDispatcher } from "@threlte/core";
+import { session, referenceSpaceType, isPresenting, isHandTracking, initialized, xr as xrStore } from "../internal/stores";
+export let foveation = 1;
+export let frameRate = void 0;
+export let referenceSpace = "local-floor";
+const dispatch = createRawEventDispatcher();
+const { renderer, frameloop } = useThrelte();
+const { xr } = renderer;
+const handleSessionStart = (event) => {
+  $isPresenting = true;
+  dispatch("sessionstart", { ...event, target: $session });
+};
+const handleSessionEnd = (event) => {
+  dispatch("sessionend", { ...event, target: $session });
+  $isPresenting = false;
+  $session = void 0;
+};
+const handleVisibilityChange = (event) => {
+  dispatch("visibilitychange", { ...event, target: $session });
+};
+const handleInputSourcesChange = (event) => {
+  $isHandTracking = Object.values($session.inputSources).some((source) => source.hand);
+  dispatch("inputsourceschange", { ...event, target: $session });
+};
+const handleFramerateChange = (event) => {
+  dispatch("visibilitychange", { ...event, target: $session });
+};
+const updateTargetFrameRate = (frameRate2) => {
+  if (frameRate2 === void 0)
+    return;
+  try {
+    $session?.updateTargetFrameRate(frameRate2);
+  } catch {
+  }
+};
+const cleanupSession = (currentSession) => {
+  if (currentSession === void 0)
+    return;
+  currentSession.removeEventListener("visibilitychange", handleVisibilityChange);
+  currentSession.removeEventListener("inputsourceschange", handleInputSourcesChange);
+  currentSession.removeEventListener("frameratechange", handleFramerateChange);
+};
+const updateSession = async (currentSession) => {
+  if (currentSession === void 0)
+    return;
+  currentSession.addEventListener("visibilitychange", handleVisibilityChange);
+  currentSession.addEventListener("inputsourceschange", handleInputSourcesChange);
+  currentSession.addEventListener("frameratechange", handleFramerateChange);
+  xr.setFoveation(foveation);
+  updateTargetFrameRate(frameRate);
+};
+let lastSession;
+$initialized = true;
+$xrStore = xr;
+xr.enabled = true;
+xr.addEventListener("sessionstart", handleSessionStart);
+xr.addEventListener("sessionend", handleSessionEnd);
+onDestroy(() => {
+  $initialized = false;
+  $xrStore = void 0;
+  xr.enabled = false;
+  xr.removeEventListener("sessionstart", handleSessionStart);
+  xr.removeEventListener("sessionend", handleSessionEnd);
+});
+$: {
+  xr.setReferenceSpaceType(referenceSpace);
+  $referenceSpaceType = referenceSpace;
+}
+$:
+  if (lastSession !== $session) {
+    cleanupSession(lastSession);
+    updateSession($session);
+    lastSession = $session;
+  }
+let originalFrameloop = $frameloop;
+$frameloop = "always";
+$:
+  if ($isPresenting) {
+    originalFrameloop = $frameloop;
+    $frameloop = "always";
+  } else {
+    $frameloop = originalFrameloop;
+  }
+$:
+  updateTargetFrameRate(frameRate);
+$:
+  xr.setFoveation(foveation);
+</script>
+
+{#if $isPresenting}
+  <slot />
+{/if}

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

@@ -0,0 +1,59 @@
+/// <reference types="webxr" />
+import { SvelteComponent } from "svelte";
+import type { XRSessionEvent } from '../types';
+declare const __propDef: {
+    props: {
+        /**
+           * Enables foveated rendering. Default is `1`, the three.js default.
+           *
+           * 0 = no foveation, full resolution
+           *
+           * 1 = maximum foveation, the edges render at lower resolution
+           */ foveation?: number;
+        /**
+           * The target framerate for the XRSystem. Smaller rates give more CPU headroom at the cost of responsiveness.
+           * Recommended range is `72`-`120`. Default is unset and left to the device.
+           * @note If your experience cannot effectively reach the target framerate, it will be subject to frame reprojection
+           * which will halve the effective framerate. Choose a conservative estimate that balances responsiveness and
+           * headroom based on your experience.
+           * @see https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Rendering#refresh_rate_and_frame_rate
+           */ frameRate?: number | undefined;
+        /** Type of WebXR reference space to use. Default is `local-floor` */ referenceSpace?: XRReferenceSpaceType;
+    };
+    slots: {
+        default: {};
+    };
+    events: {
+        /** Called as an XRSession is requested */
+        sessionstart: XRSessionEvent<'sessionstart'>;
+        /** Called after an XRSession is terminated */
+        sessionend: XRSessionEvent<'sessionend'>;
+        /** Called when an XRSession is hidden or unfocused. */
+        visibilitychange: globalThis.XRSessionEvent;
+        /** Called when available inputsources change */
+        inputsourceschange: globalThis.XRSessionEvent;
+    };
+};
+export type XrProps = typeof __propDef.props;
+export type XrEvents = typeof __propDef.events;
+export type XrSlots = typeof __propDef.slots;
+/**
+ * `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
+ *
+ * This should be placed within a Threlte `<Canvas />`.
+ *
+ * ```svelte
+ * <XR
+ *   foveation={1}
+ *   frameRate={90}
+ *   referenceSpace='local-floor'
+ *   on:sessionstart={(event: XREvent<XRManagerEvent>) => {}}
+ *   on:sessionend={(event: XREvent<XRManagerEvent>) => {}}
+ *   on:visibilitychange={(event: XREvent<XRSessionEvent>) => {}}
+ *   on:inputsourceschange={(event: XREvent<XRSessionEvent>) => {}}
+ * />
+ * ```
+ */
+export default class Xr extends SvelteComponent<XrProps, XrEvents, XrSlots> {
+}
+export {};

package/dist/components/XRButton.svelte

@@ -0,0 +1,79 @@
+<!--
+@component
+`<XRButton />` is an HTML `<button />` that can be used to init and
+display info about your WebXR session. This is aliased by `ARButton` and
+`VRButton` with sensible session defaults.
+
+```svelte
+  <XRButton
+    mode={'immersive-ar' | 'immersive-vr' | 'inline'}
+    sessionInit={{
+      optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
+    }}
+    force={'enter' | 'exit' | undefined}
+    styled={'true' | 'false'}
+    on:error={(event) => {}}
+    on:click={(event) => {}}
+  />
+```
+-->
+
+<script>import { createEventDispatcher } from "svelte";
+import { getXRSupportState } from "../lib/getXRSupportState";
+import { toggleXRSession } from "../lib/toggleXRSession";
+import { session, initialized } from "../internal/stores";
+export let mode;
+export let sessionInit = void 0;
+export let force = void 0;
+export let styled = true;
+const dispatch = createEventDispatcher();
+const handleButtonClick = async (state) => {
+  if (!$initialized) {
+    throw new Error("The <XR> component was not created. This is required to start an XR session.");
+  }
+  dispatch("click", { state });
+  if (state !== "supported")
+    return;
+  try {
+    await toggleXRSession(mode, sessionInit, force);
+  } catch (error) {
+    dispatch("error", error);
+  }
+};
+$:
+  modeText = {
+    "immersive-vr": "VR",
+    "immersive-ar": "AR",
+    inline: "inline"
+  }[mode];
+$:
+  if (styled) {
+    $$restProps.style = `
+      position: absolute;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 10px 20px;
+      border: 1px solid white;
+      background: rgba(0, 0, 0, 0.1);
+      color: white;
+      outline: none;
+      z-index: 10;
+      ${$$restProps.style ?? ""}
+    `;
+  }
+</script>
+
+{#await getXRSupportState(mode) then state}
+  <button {...$$restProps} on:click={() => handleButtonClick(state)}>
+    {#if state === 'unsupported'}
+      {modeText} unsupported
+    {:else if state === 'insecure'}
+      HTTPS needed
+    {:else if state === 'blocked'}
+      {modeText} blocked
+    {:else if state === 'supported'}
+      {$session ? 'Exit' : 'Enter'} {modeText}
+    {/if}
+  </button>
+{/await}

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

@@ -0,0 +1,265 @@
+/// <reference types="webxr" />
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean | null | undefined;
+        form?: string | null | undefined;
+        formaction?: string | null | undefined;
+        formenctype?: string | null | undefined;
+        formmethod?: string | null | undefined;
+        formnovalidate?: boolean | null | undefined;
+        formtarget?: string | null | undefined;
+        name?: string | null | undefined;
+        type?: "submit" | "reset" | "button" | null | undefined;
+        value?: string | number | string[] | null | undefined;
+        accesskey?: string | null | undefined;
+        autofocus?: boolean | null | undefined;
+        class?: string | null | undefined;
+        contenteditable?: import("svelte/elements").Booleanish | "inherit" | null | undefined;
+        contextmenu?: string | null | undefined;
+        dir?: string | null | undefined;
+        draggable?: import("svelte/elements").Booleanish | null | undefined;
+        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
+        hidden?: boolean | null | undefined;
+        id?: string | null | undefined;
+        lang?: string | null | undefined;
+        part?: string | null | undefined;
+        placeholder?: string | null | undefined;
+        slot?: string | null | undefined;
+        spellcheck?: import("svelte/elements").Booleanish | null | undefined;
+        style?: string | null | undefined;
+        tabindex?: number | null | undefined;
+        title?: string | null | undefined;
+        translate?: "" | "yes" | "no" | null | undefined;
+        inert?: boolean | null | undefined;
+        radiogroup?: string | null | undefined;
+        role?: import("svelte/elements").AriaRole | null | undefined;
+        about?: string | null | undefined;
+        datatype?: string | null | undefined;
+        inlist?: any;
+        prefix?: string | null | undefined;
+        property?: string | null | undefined;
+        resource?: string | null | undefined;
+        typeof?: string | null | undefined;
+        vocab?: string | null | undefined;
+        autocapitalize?: string | null | undefined;
+        autocorrect?: string | null | undefined;
+        autosave?: string | null | undefined;
+        color?: 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?: "on" | "off" | null | undefined;
+        inputmode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "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" | "list" | "none" | "both" | null | undefined;
+        'aria-busy'?: import("svelte/elements").Booleanish | null | undefined;
+        'aria-checked'?: boolean | "true" | "false" | "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'?: import("svelte/elements").Booleanish | "page" | "step" | "location" | "date" | "time" | 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" | "execute" | "move" | "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'?: import("svelte/elements").Booleanish | "dialog" | "grid" | "listbox" | "menu" | "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 | "true" | "false" | "mixed" | null | undefined;
+        'aria-readonly'?: import("svelte/elements").Booleanish | null | undefined;
+        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "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" | "ascending" | "descending" | "other" | 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;
+        mode: XRSessionMode;
+        sessionInit?: XRSessionInit & {
+            domOverlay?: {
+                root: HTMLElement;
+            } | undefined;
+        };
+        force?: 'enter' | 'exit';
+        styled?: boolean;
+    };
+    events: {
+        click: CustomEvent<{
+            state: 'unsupported' | 'insecure' | 'blocked' | 'supported';
+        }>;
+        error: CustomEvent<Error>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type XrButtonProps = typeof __propDef.props;
+export type XrButtonEvents = typeof __propDef.events;
+export type XrButtonSlots = typeof __propDef.slots;
+/**
+ * `<XRButton />` is an HTML `<button />` that can be used to init and
+ * display info about your WebXR session. This is aliased by `ARButton` and
+ * `VRButton` with sensible session defaults.
+ *
+ * ```svelte
+ * <XRButton
+ *   mode={'immersive-ar' | 'immersive-vr' | 'inline'}
+ *   sessionInit={{
+ *     optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
+ *   }}
+ *   force={'enter' | 'exit' | undefined}
+ *   styled={'true' | 'false'}
+ *   on:error={(event) => {}}
+ *   on:click={(event) => {}}
+ * />
+ * ```
+ */
+export default class XrButton extends SvelteComponent<XrButtonProps, XrButtonEvents, XrButtonSlots> {
+}
+export {};

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { useController, useGamepad } from './useController';
+export { useControllerEvent, useHandEvent } from './useEvent';
+export { useHand } from './useHand';
+export { useHandJoint } from './useHandJoint';
+export { useHitTest } from './useHitTest';
+export { useTeleport } from './useTeleport';
+export { useXR } from './useXR';

package/dist/hooks/index.js

@@ -0,0 +1,7 @@
+export { useController, useGamepad } from './useController';
+export { useControllerEvent, useHandEvent } from './useEvent';
+export { useHand } from './useHand';
+export { useHandJoint } from './useHandJoint';
+export { useHitTest } from './useHitTest';
+export { useTeleport } from './useTeleport';
+export { useXR } from './useXR';

package/dist/hooks/useController.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="webxr" />
+import { type CurrentWritable } from '@threlte/core';
+import type { XRController } from '../types';
+export declare const left: CurrentWritable<XRController | undefined>;
+export declare const right: CurrentWritable<XRController | undefined>;
+export declare const gaze: CurrentWritable<XRController | undefined>;
+/**
+ * Provides a reference to a current XRController, filtered by handedness.
+ */
+export declare const useController: (handedness: XRHandedness) => CurrentWritable<XRController | undefined>;
+/**
+ * Provides a reference to the gamepad attached to a current XRController.
+ */
+export declare const useGamepad: (handedness: 'left' | 'right') => CurrentWritable<Gamepad | undefined>;

package/dist/hooks/useController.js

@@ -0,0 +1,32 @@
+import { currentWritable } from '@threlte/core';
+export const left = currentWritable(undefined);
+export const right = currentWritable(undefined);
+export const gaze = currentWritable(undefined);
+const gamepadLeft = currentWritable(undefined);
+const gamepadRight = currentWritable(undefined);
+left.subscribe((value) => gamepadLeft.set(value?.inputSource.gamepad));
+right.subscribe((value) => gamepadRight.set(value?.inputSource.gamepad));
+/**
+ * Provides a reference to a current XRController, filtered by handedness.
+ */
+export const useController = (handedness) => {
+    switch (handedness) {
+        case 'left':
+            return left;
+        case 'right':
+            return right;
+        case 'none':
+            return gaze;
+    }
+};
+/**
+ * Provides a reference to the gamepad attached to a current XRController.
+ */
+export const useGamepad = (handedness) => {
+    switch (handedness) {
+        case 'left':
+            return gamepadLeft;
+        case 'right':
+            return gamepadRight;
+    }
+};

package/dist/hooks/useEvent.d.ts

@@ -0,0 +1,14 @@
+/// <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

@@ -0,0 +1,34 @@
+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/hooks/useHand.d.ts

@@ -0,0 +1,8 @@
+import { type CurrentWritable } from '@threlte/core';
+import type { XRHand } from '../types';
+export declare const left: CurrentWritable<XRHand | undefined>;
+export declare const right: CurrentWritable<XRHand | undefined>;
+/**
+ * Provides a reference to a current XRHand, filtered by handedness.
+ */
+export declare const useHand: (handedness: 'left' | 'right') => CurrentWritable<undefined | XRHand>;