@threlte/xr 0.0.2

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

@@ -0,0 +1,24 @@
+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/components/Ray.svelte

@@ -0,0 +1,23 @@
+<script>import { T } from "@threlte/core";
+import { Line2 } from "three/examples/jsm/lines/Line2";
+import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+export let positions;
+export let color = "white";
+let lineGeometry = new LineGeometry();
+$:
+  if (positions) {
+    lineGeometry.setPositions(positions);
+  }
+</script>
+
+<T is={Line2}
+  {...$$restProps}
+  position.z={-0.01}
+>
+  <T is={lineGeometry} />
+  <T is={LineMaterial}
+    {color}
+    linewidth={0.004}
+  />
+</T>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        positions: Float32Array | undefined;
+        color?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RayProps = typeof __propDef.props;
+export type RayEvents = typeof __propDef.events;
+export type RaySlots = typeof __propDef.slots;
+export default class Ray extends SvelteComponent<RayProps, RayEvents, RaySlots> {
+}
+export {};

package/dist/components/ShortRay.svelte

@@ -0,0 +1,28 @@
+<script>import { T } from "@threlte/core";
+const vertexShader = `
+  uniform mat4 modelViewMatrix;                                                                                                                                                                                                  
+  uniform mat4 projectionMatrix;
+  attribute vec2 uv;
+  attribute vec3 position;
+  varying vec2 vUv;
+  void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.); }
+  `;
+const fragmentShader = `
+  varying mediump vec2 vUv;
+  void main() { gl_FragColor = vec4(1., 1., 1., pow(vUv.y - 1., 2.)); }
+  `;
+</script>
+
+<T.Mesh
+  {...$$restProps}
+  rotation.x={-Math.PI / 2}
+  position.z={-0.1}
+>
+  {@const radius = 0.002}
+  {@const height = 0.2}
+  {@const radialSegments = 16}
+  {@const heightSegments = 1}
+  {@const openEnded = false}
+  <T.CylinderGeometry args={[radius, radius, height, radialSegments, heightSegments, openEnded]} />
+  <T.RawShaderMaterial transparent {vertexShader} {fragmentShader} />
+</T.Mesh>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ShortRayProps = typeof __propDef.props;
+export type ShortRayEvents = typeof __propDef.events;
+export type ShortRaySlots = typeof __propDef.slots;
+export default class ShortRay extends SvelteComponent<ShortRayProps, ShortRayEvents, ShortRaySlots> {
+}
+export {};

package/dist/components/TeleportControls.svelte

@@ -0,0 +1,136 @@
+<!--
+@component
+
+`<TeleportControls />` creates a teleportation experience similar to that on the Quest home environment.
+
+@param handedness - Which hands to allow teleportation from.
+
+@param maxDistance - The maximum radial teleporting distance from the user's current origin, in meters.
+
+@event teleport - Fires after a teleport event.
+
+```svelte
+  <TeleportControls
+    handedness={'left' | 'right'}
+    maxDistance={10}
+    on:teleport={(event) => {}} 
+  >
+    <T.Mesh teleportSurface>
+      ...
+    </T.Mesh>
+  </TeleportControls>
+```
+-->
+
+<script>import * as THREE from "three";
+import { T, useFrame, createRawEventDispatcher } from "@threlte/core";
+import { activeTeleportController, pendingTeleportDestination } from "../internal/stores";
+import { useTeleport, useController, useGamepad } from "../hooks";
+import Ray from "../components/Ray.svelte";
+import { teleportPlugin } from "../plugins/teleportPlugin";
+export let raycaster = new THREE.Raycaster();
+export let handedness = "right";
+export let maxDistance = 20;
+const dispatch = createRawEventDispatcher();
+let destination;
+let activeController;
+const teleport = useTeleport();
+const navMeshes = [];
+const controllerPosition = new THREE.Vector3();
+const matrix4 = new THREE.Matrix4();
+const rayMidpoint = new THREE.Vector3();
+const rayDivisions = 40;
+const positions = new Float32Array(rayDivisions * 3);
+const curve = new THREE.QuadraticBezierCurve3();
+const curvePoint = new THREE.Vector3();
+$:
+  raycaster.far = maxDistance;
+$:
+  teleportController = useController(handedness);
+$:
+  teleportGamepad = useGamepad(handedness);
+const calculateRayMidpoint = (vector1, vector2) => {
+  rayMidpoint.x = (vector1.x + vector2.x) / 2;
+  rayMidpoint.y = (vector1.y + vector2.y) / 2;
+  rayMidpoint.z = (vector1.z + vector2.z) / 2;
+};
+const { start, stop } = useFrame(() => {
+  matrix4.identity().extractRotation(activeController.matrixWorld);
+  raycaster.ray.origin.setFromMatrixPosition(activeController.matrixWorld);
+  raycaster.ray.direction.set(0, 0, -1).applyMatrix4(matrix4);
+  const [intersect] = raycaster.intersectObjects(navMeshes, true);
+  if (intersect === void 0) {
+    destination = void 0;
+    $pendingTeleportDestination = void 0;
+    return;
+  }
+  destination = intersect.point;
+  $pendingTeleportDestination = destination;
+  activeController.getWorldPosition(controllerPosition);
+  calculateRayMidpoint(controllerPosition, destination);
+  rayMidpoint.y += 0.8;
+  curve.v0.copy(controllerPosition);
+  curve.v1.copy(rayMidpoint);
+  curve.v2.copy(intersect.point);
+  for (let i = 0, j = 0; i < rayDivisions; i += 1, j += 3) {
+    const t = i / rayDivisions;
+    curve.getPoint(t, curvePoint);
+    positions[j + 0] = curvePoint.x;
+    positions[j + 1] = curvePoint.y;
+    positions[j + 2] = curvePoint.z;
+  }
+}, { autostart: false });
+const handleSelectStart = (controller) => {
+  activeController = controller;
+  $activeTeleportController = controller;
+  start();
+};
+const handleSelectEnd = () => {
+  stop();
+  activeController = void 0;
+  $activeTeleportController = void 0;
+  if (destination !== void 0) {
+    teleport(destination);
+    dispatch("teleport", destination);
+  }
+};
+useFrame(() => {
+  const selecting = (teleportGamepad.current?.axes[3] ?? 0) < -0.9;
+  if (selecting && activeController === void 0) {
+    handleSelectStart(teleportController.current.controller);
+  } else if (!selecting && activeController !== void 0) {
+    handleSelectEnd();
+  }
+});
+teleportPlugin(navMeshes);
+</script>
+
+<slot />
+
+<slot name='ray'>
+  <Ray
+    visible={activeController !== undefined && destination !== undefined}
+    positions={activeController !== undefined && destination !== undefined ? positions : undefined}
+  />
+</slot>
+
+<slot name='cursor'>
+  <T.Mesh
+    visible={activeController !== undefined && destination !== undefined}
+    position.x={destination?.x}
+    position.y={destination?.y}
+    position.z={destination?.z}
+  >
+    {@const innerRadius = 0.175}
+    {@const outerRadius = 0.2}
+    {@const thetaSegments = 32}
+    <T.RingGeometry
+      args={[innerRadius, outerRadius, thetaSegments]}
+      on:create={({ ref }) => ref.rotateX(-Math.PI / 2)}
+    />
+    <T.MeshBasicMaterial
+      polygonOffset
+      polygonOffsetFactor={-1}
+    />
+  </T.Mesh>
+</slot>

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

@@ -0,0 +1,54 @@
+import { SvelteComponent } from "svelte";
+import * as THREE from 'three';
+declare const __propDef: {
+    props: {
+        /**
+           * The raycaster used for teleportation.
+           * @default new THREE.Raycaster()
+           */ raycaster?: THREE.Raycaster;
+        /**
+           * The controller handedness that the teleport controls is linked to.
+           * @default 'right'
+           */ handedness?: 'left' | 'right';
+        /**
+           * The maximum radial teleporting distance from the user's current origin, in meters.
+           * @default 20
+           */ maxDistance?: number;
+    };
+    slots: {
+        default: {};
+        ray: {};
+        cursor: {};
+    };
+    events: {
+        /** Fired after a teleportation occurs with the new location as the payload. */
+        teleport: THREE.Vector3;
+    };
+};
+export type TeleportControlsProps = typeof __propDef.props;
+export type TeleportControlsEvents = typeof __propDef.events;
+export type TeleportControlsSlots = typeof __propDef.slots;
+/**
+ * `<TeleportControls />` creates a teleportation experience similar to that on the Quest home environment.
+ *
+ * @param handedness - Which hands to allow teleportation from.
+ *
+ * @param maxDistance - The maximum radial teleporting distance from the user's current origin, in meters.
+ *
+ * @event teleport - Fires after a teleport event.
+ *
+ * ```svelte
+ * <TeleportControls
+ *   handedness={'left' | 'right'}
+ *   maxDistance={10}
+ *   on:teleport={(event) => {}}
+ * >
+ *   <T.Mesh teleportSurface>
+ *     ...
+ *   </T.Mesh>
+ * </TeleportControls>
+ * ```
+ */
+export default class TeleportControls extends SvelteComponent<TeleportControlsProps, TeleportControlsEvents, TeleportControlsSlots> {
+}
+export {};

package/dist/components/VRButton.svelte

@@ -0,0 +1,24 @@
+<!--
+@component
+`<VRButton />` is an HTML `<button />` that can be used to init and display info about your immersive VR session.
+
+```svelte
+  <VRButton
+    on:error={(event) => {}}
+    on:click={(event) => {}}
+  />
+```
+-->
+
+<script>import XRButton from "./XRButton.svelte";
+</script>
+
+<XRButton
+  {...$$restProps}
+  mode='immersive-vr'
+  sessionInit={{
+    optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
+  }}
+  on:click
+  on:error
+/>

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

@@ -0,0 +1,250 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        force?: "enter" | "exit";
+        styled?: boolean;
+        form?: string | null | undefined;
+        radiogroup?: string | null | undefined;
+        name?: string | null | undefined;
+        style?: string | null | undefined;
+        disabled?: boolean | null | undefined;
+        formaction?: string | null | undefined;
+        formenctype?: string | null | undefined;
+        formmethod?: string | null | undefined;
+        formnovalidate?: boolean | null | undefined;
+        formtarget?: 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;
+        tabindex?: number | null | undefined;
+        title?: string | null | undefined;
+        translate?: "" | "yes" | "no" | null | undefined;
+        inert?: boolean | 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;
+    };
+    events: {
+        click: CustomEvent<{
+            state: "unsupported" | "insecure" | "blocked" | "supported";
+        }>;
+        error: CustomEvent<Error>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VrButtonProps = typeof __propDef.props;
+export type VrButtonEvents = typeof __propDef.events;
+export type VrButtonSlots = typeof __propDef.slots;
+/**
+ * `<VRButton />` is an HTML `<button />` that can be used to init and display info about your immersive VR session.
+ *
+ * ```svelte
+ * <VRButton
+ *   on:error={(event) => {}}
+ *   on:click={(event) => {}}
+ * />
+ * ```
+ */
+export default class VrButton extends SvelteComponent<VrButtonProps, VrButtonEvents, VrButtonSlots> {
+}
+export {};