@threlte/xr 0.0.12 → 0.1.0

package/dist/components/ARButton.svelte

@@ -17,7 +17,7 @@
   sessionInit={{
     domOverlay: typeof document !== 'undefined' ? { root: document.body } : undefined,
     requiredFeatures: ['plane-detection'],
-    optionalFeatures: ['hit-test', 'light-estimation', 'dom-overlay', 'dom-overlay-for-handheld-ar']
+    optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers', 'hit-test']
   }}
   {...$$restProps}
   mode='immersive-ar'

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 /// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
@@ -56,12 +57,12 @@ declare const __propDef: {
         results?: number | null | undefined;
         security?: string | null | undefined;
         unselectable?: "on" | "off" | null | undefined;
-        inputmode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | null | undefined;
+        inputmode?: "url" | "search" | "none" | "text" | "tel" | "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:contentRect'?: any;
         'bind:contentBoxSize'?: ResizeObserverSize[] | null | undefined;
         'bind:borderBoxSize'?: ResizeObserverSize[] | null | undefined;
         'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | null | undefined;
@@ -134,37 +135,37 @@ declare const __propDef: {
         '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:invalid'?: import("svelte/elements").EventHandler<Event<EventTarget>, 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:load'?: import("svelte/elements").EventHandler<Event<EventTarget>, Element> | null | undefined;
+        'on:error'?: import("svelte/elements").EventHandler<Event<EventTarget>, Element> | null | undefined;
+        'on:toggle'?: import("svelte/elements").EventHandler<Event<EventTarget>, 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:abort'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:canplay'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:cuechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:durationchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:emptied'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:encrypted'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:ended'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadeddata'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadstart'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:pause'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:play'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:playing'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:progress'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:ratechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:seeked'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:seeking'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:stalled'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:suspend'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:timeupdate'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:volumechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:waiting'?: import("svelte/elements").EventHandler<Event<EventTarget>, 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;
@@ -184,9 +185,9 @@ declare const __propDef: {
         '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:select'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:selectionchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:selectstart'?: import("svelte/elements").EventHandler<Event<EventTarget>, 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;
@@ -217,11 +218,11 @@ declare const __propDef: {
         '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;
+        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:cancel'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:close'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         sessionInit?: XRSessionInit & {
             domOverlay?: {
                 root: HTMLElement;

package/dist/components/Controller.svelte

@@ -4,76 +4,33 @@
 <script
  
   context="module"
->import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory";
-import { onDestroy } from "svelte";
-import { T, createRawEventDispatcher, useThrelte } from "@threlte/core";
-import { gaze, left as leftStore, right as rightStore } from "../hooks/useController";
-import { isHandTracking, pointerState, teleportState } from "../internal/stores";
-import { useHandTrackingState } from "../internal/useHandTrackingState";
+>import { writable } from "svelte/store";
+import { T, createRawEventDispatcher } from "@threlte/core";
+import { left as leftStore, right as rightStore } from "../hooks/useController";
+import { isHandTracking, pointerState, teleportState, controllerDispatchers } from "../internal/stores";
 import PointerCursor from "./internal/PointerCursor.svelte";
 import ShortRay from "./internal/ShortRay.svelte";
 import ScenePortal from "./internal/ScenePortal.svelte";
 import TeleportCursor from "./internal/TeleportCursor.svelte";
 import TeleportRay from "./internal/TeleportRay.svelte";
-const factory = new XRControllerModelFactory();
 const stores = {
   left: leftStore,
-  right: rightStore,
-  none: gaze
+  right: rightStore
 };
-const events = [
-  "select",
-  "selectstart",
-  "selectend",
-  "squeeze",
-  "squeezeend",
-  "squeezestart"
-];
-const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
 <script>export let left = void 0;
 export let right = void 0;
 export let hand = void 0;
-$:
-  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 targetData = eventMap.get(event.target);
-  if (event.data.handedness !== handedness || !targetData)
-    return;
-  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[handedness].set(void 0);
-  if (!$isHandTracking) {
-    dispatch("disconnected", event);
-  }
-  events.forEach((name) => event.target.removeEventListener(name, handleEvent));
-};
-for (const index of [0, 1]) {
-  const targetRay2 = xr.getController(index);
-  const grip2 = xr.getControllerGrip(index);
-  const model2 = factory.createControllerModel(grip2);
-  eventMap.set(targetRay2, { targetRay: targetRay2, model: model2, grip: grip2 });
-  targetRay2.addEventListener("connected", handleConnected);
-  targetRay2.addEventListener("disconnected", handleDisconnected);
-}
+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];
+  store = stores[$handedness];
 $:
   grip = $store?.grip;
 $:
@@ -81,27 +38,14 @@ $:
 $:
   model = $store?.model;
 $:
-  hasPointerControls = $pointerState[handedness].enabled;
+  hasPointerControls = $pointerState[$handedness].enabled;
 $:
-  hasTeleportControls = $teleportState[handedness].enabled;
-onDestroy(() => {
-  for (const index of [0, 1]) {
-    const controller2 = xr.getController(index);
-    controller2.removeEventListener("connected", handleConnected);
-    controller2.removeEventListener("disconnected", handleDisconnected);
-  }
-  const controller = $store?.targetRay;
-  events.forEach((name) => controller?.removeEventListener(name, handleEvent));
-  store.set(void 0);
-});
+  hasTeleportControls = $teleportState[$handedness].enabled;
 </script>
 
 {#if !$isHandTracking}
   {#if grip}
-    <T
-      is={grip}
-      name="XR controller grip {handedness}"
-    >
+    <T is={grip}>
       <slot>
         <T is={model} />
       </slot>
@@ -111,19 +55,16 @@ onDestroy(() => {
   {/if}
 
   {#if targetRay}
-    <T
-      is={targetRay}
-      name="XR controller {handedness}"
-    >
+    <T is={targetRay}>
       <slot name="target-ray" />
 
       {#if hasPointerControls || hasTeleportControls}
         {#if $$slots['pointer-ray']}
-          <ShortRay {handedness}>
+          <ShortRay handedness={$handedness}>
             <slot name="pointer-ray" />
           </ShortRay>
         {:else}
-          <ShortRay {handedness} />
+          <ShortRay handedness={$handedness} />
         {/if}
       {/if}
     </T>
@@ -133,11 +74,11 @@ onDestroy(() => {
 <ScenePortal>
   {#if hasPointerControls}
     {#if $$slots['pointer-cursor']}
-      <PointerCursor {handedness}>
+      <PointerCursor handedness={$handedness}>
         <slot name="pointer-cursor" />
       </PointerCursor>
     {:else}
-      <PointerCursor {handedness} />
+      <PointerCursor handedness={$handedness} />
     {/if}
   {/if}
 
@@ -145,23 +86,23 @@ onDestroy(() => {
     {#if $$slots['teleport-ray']}
       <TeleportRay
         {targetRay}
-        {handedness}
+        handedness={$handedness}
       >
         <slot name="teleport-ray" />
       </TeleportRay>
     {:else}
       <TeleportRay
         {targetRay}
-        {handedness}
+        handedness={$handedness}
       />
     {/if}
 
     {#if $$slots['teleport-ray']}
-      <TeleportCursor {handedness}>
+      <TeleportCursor handedness={$handedness}>
         <slot name="teleport-cursor" />
       </TeleportCursor>
     {:else}
-      <TeleportCursor {handedness} />
+      <TeleportCursor handedness={$handedness} />
     {/if}
   {/if}
 </ScenePortal>

package/dist/components/Hand.svelte

@@ -1,50 +1,26 @@
-<script context='module'>import { onDestroy } from "svelte";
-import { XRHandModelFactory } from "three/examples/jsm/webxr/XRHandModelFactory";
+<script context='module'>import { Group } from "three";
 import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
-import { isHandTracking } from "../internal/stores";
-import { useHandTrackingState } from "../internal/useHandTrackingState";
+import { isHandTracking, handDispatchers } from "../internal/stores";
 import { left as leftStore, right as rightStore } from "../hooks/useHand";
-const factory = new XRHandModelFactory();
+import ScenePortal from "./internal/ScenePortal.svelte";
+import { writable } from "svelte/store";
 const stores = {
   left: leftStore,
   right: rightStore
 };
-const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
-<script>import ScenePortal from "./internal/ScenePortal.svelte";
-export let left = void 0;
+<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();
+const handedness = writable(left ? "left" : right ? "right" : hand);
 $:
-  handedness = left ? "left" : right ? "right" : hand;
-const handleConnected = (event) => {
-  if (event.data.handedness !== handedness)
-    return;
-  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) => {
-  if (event.data.handedness !== handedness)
-    return;
-  stores[handedness].set(void 0);
-  if ($isHandTracking) {
-    dispatch("disconnected", event);
-  }
-  event.target.removeEventListener("pinchstart", handlePinchEvent);
-  event.target.removeEventListener("pinchend", handlePinchEvent);
-};
-const handlePinchEvent = (event) => {
-  dispatch(event.type, event);
-};
+  handedness.set(left ? "left" : right ? "right" : hand);
+$:
+  handDispatchers[$handedness].set(dispatch);
 let children;
 const { start, stop } = useFrame(() => {
   const frame = xr.getFrame();
@@ -59,51 +35,38 @@ const { start, stop } = useFrame(() => {
   children.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
 }, { autostart: false });
 $:
-  if (($$slots.wrist || $$slots.default) && inputSource) {
+  if ($isHandTracking && ($$slots.wrist || $$slots.default) && inputSource) {
     start();
   } else {
     stop();
   }
 $:
-  store = stores[handedness];
+  store = stores[$handedness];
 $:
   inputSource = $store?.inputSource;
 $:
   model = $store?.model;
-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 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>
 
-{#if $store?.hand}
-  <T
-    is={$store.hand}
-    name='XR hand {handedness}'
-  >
+{#if $store?.hand && $isHandTracking}
+  <T is={$store.hand}>
     {#if $$slots.default === undefined}
       <T is={model} />
     {/if}
   </T>
+
+  {#if $$slots['target-ray'] !== undefined}
+    <T is={$store.targetRay}>
+      <slot name='target-ray' />
+    </T>
+  {/if}
 {/if}
 
-<ScenePortal>
-  <T.Group bind:ref={children}>
-    <slot name='wrist' />
-    <slot />
-  </T.Group>
-</ScenePortal>
+{#if $isHandTracking}
+  <ScenePortal>
+    <T.Group bind:ref={children}>
+      <slot name='wrist' />
+      <slot />
+    </T.Group>
+  </ScenePortal>
+{/if}

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

@@ -18,6 +18,7 @@ declare const __propDef: {
         right?: undefined;
     };
     slots: {
+        'target-ray': {};
         wrist: {};
         default: {};
     };

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
@@ -55,12 +56,12 @@ declare const __propDef: {
         results?: number | null | undefined;
         security?: string | null | undefined;
         unselectable?: "on" | "off" | null | undefined;
-        inputmode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | null | undefined;
+        inputmode?: "url" | "search" | "none" | "text" | "tel" | "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:contentRect'?: any;
         'bind:contentBoxSize'?: ResizeObserverSize[] | null | undefined;
         'bind:borderBoxSize'?: ResizeObserverSize[] | null | undefined;
         'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | null | undefined;
@@ -133,37 +134,37 @@ declare const __propDef: {
         '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:invalid'?: import("svelte/elements").EventHandler<Event<EventTarget>, 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:load'?: import("svelte/elements").EventHandler<Event<EventTarget>, Element> | null | undefined;
+        'on:error'?: import("svelte/elements").EventHandler<Event<EventTarget>, Element> | null | undefined;
+        'on:toggle'?: import("svelte/elements").EventHandler<Event<EventTarget>, 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:abort'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:canplay'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:cuechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:durationchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:emptied'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:encrypted'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:ended'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadeddata'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadstart'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:pause'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:play'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:playing'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:progress'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:ratechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:seeked'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:seeking'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:stalled'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:suspend'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:timeupdate'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:volumechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:waiting'?: import("svelte/elements").EventHandler<Event<EventTarget>, 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;
@@ -183,9 +184,9 @@ declare const __propDef: {
         '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:select'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:selectionchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:selectstart'?: import("svelte/elements").EventHandler<Event<EventTarget>, 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;
@@ -216,11 +217,11 @@ declare const __propDef: {
         '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;
+        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:cancel'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:close'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
     };
     events: {
         click: CustomEvent<{