@ericchen1990/pano-view 3.6.0 → 3.6.1

package/dist/index.mjs

@@ -2587,6 +2587,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
   const { camera, gl } = useThree();
   const xrSession = useXR((state) => state.session);
   const xrSessionRef = useRef(xrSession);
+  const pointerRevisionRef = useRef(0);
   const viewRef = useRef({ ...initialView });
   const targetViewRef = useRef({ ...initialView });
   const initialViewRef = useRef({ ...initialView });
@@ -2681,6 +2682,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
   };
   const acquireInteractionLock = () => {
     cancelNavigation();
+    pointerRevisionRef.current += 1;
     interactionLockCountRef.current += 1;
     stopVelocity();
     if (mouseActiveRef.current) {
@@ -2712,6 +2714,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       legacyFovRef.current.maxFov
     );
     if (JSON.stringify(next) === JSON.stringify(limitsRef.current)) return;
+    pointerRevisionRef.current += 1;
     limitsRef.current = next;
     cancelNavigation();
     stopVelocity();
@@ -2727,6 +2730,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
   };
   const setView = (view, setOptions) => {
     cancelNavigation();
+    pointerRevisionRef.current += 1;
     const nextView = hardConstrainView(view);
     if (gyroActiveRef.current) {
       gyroOffsetRef.current = {
@@ -2746,6 +2750,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     if (xrSessionRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0) {
       return Promise.resolve({ status: "cancelled" });
     }
+    pointerRevisionRef.current += 1;
     const from = { ...viewRef.current };
     const safeTargetInput = {
       yaw: targetInput.yaw !== void 0 && Number.isFinite(targetInput.yaw) ? targetInput.yaw : from.yaw,
@@ -2810,19 +2815,24 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       return false;
     }
     const current = targetViewRef.current;
+    const origin = !gyroActiveRef.current ? applyOptions?.pointerOrigin : void 0;
+    const reference = origin ?? current;
     const gyroMode = gyroTouchModeRef.current;
     const gyroControlsView = gyroActiveRef.current;
     const appliesTouchMode = gyroControlsView && applyOptions?.source === "touch";
     const acceptsYaw = !appliesTouchMode || gyroMode === "horizontaloffset" || gyroMode === "full";
     const acceptsPitch = !appliesTouchMode || gyroMode === "full";
-    const nextYaw = acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw) ? applyLimitedYawDelta(current.yaw, delta.yaw, limitsRef.current.yaw) : current.yaw;
-    const nextPitch = acceptsPitch && delta.pitch !== void 0 && Number.isFinite(delta.pitch) ? current.pitch + delta.pitch : current.pitch;
+    const nextYaw = acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw) ? applyLimitedYawDelta(reference.yaw, delta.yaw, limitsRef.current.yaw) : current.yaw;
+    const nextPitch = acceptsPitch && delta.pitch !== void 0 && Number.isFinite(delta.pitch) ? reference.pitch + delta.pitch : current.pitch;
     const nextFov = delta.fov !== void 0 && Number.isFinite(delta.fov) ? current.fov + delta.fov : current.fov;
     targetViewRef.current = softConstrainView({
       yaw: nextYaw,
       pitch: nextPitch,
       fov: nextFov
     });
+    if (origin) {
+      viewRef.current = { ...viewRef.current, yaw: targetViewRef.current.yaw, pitch: targetViewRef.current.pitch };
+    }
     if (gyroControlsView) {
       if (acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw)) {
         gyroOffsetRef.current.yaw = shortestYawDelta(gyroPoseRef.current.yaw, targetViewRef.current.yaw);
@@ -2838,10 +2848,10 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       const elapsed = previousAt === null ? 1 / 60 : Math.max((now - previousAt) / 1e3, 1 / 120);
       lastVelocitySampleAtRef.current = now;
       if (delta.yaw !== void 0 && Number.isFinite(delta.yaw)) {
-        yawVelocityRef.current = delta.yaw / elapsed;
+        yawVelocityRef.current = limitedYawDelta(current.yaw, targetViewRef.current.yaw, limitsRef.current.yaw) / elapsed;
       }
       if (delta.pitch !== void 0 && Number.isFinite(delta.pitch)) {
-        pitchVelocityRef.current = delta.pitch / elapsed;
+        pitchVelocityRef.current = (targetViewRef.current.pitch - current.pitch) / elapsed;
       }
       if (delta.fov !== void 0 && Number.isFinite(delta.fov)) {
         zoomVelocityRef.current = clamp(delta.fov / elapsed, -180, 180);
@@ -2855,6 +2865,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     ref,
     () => ({
       getView: () => ({ ...viewRef.current }),
+      getPointerDragState: () => ({ revision: pointerRevisionRef.current, anchored: !gyroActiveRef.current && xrSessionRef.current == null }),
       setSceneViewLimits: (limits) => {
         sceneLimitsRef.current = parseViewLimits(limits);
         refreshLimits();
@@ -2894,6 +2905,9 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
         }
         syncInteracting();
         if (active && !wasActive) {
+          if (!gyroActiveRef.current) {
+            targetViewRef.current = { ...targetViewRef.current, yaw: viewRef.current.yaw, pitch: viewRef.current.pitch };
+          }
           eventBusRef.current.emit("viewinteractionstart", { source });
         } else if (!active && wasActive) {
           eventBusRef.current.emit("viewinteractionend", { source });
@@ -2913,6 +2927,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       isInteractionLocked: () => interactionLockCountRef.current > 0,
       isUserInteracting,
       setGyroActive: (active) => {
+        if (gyroActiveRef.current !== active) pointerRevisionRef.current += 1;
         if (active) {
           cancelNavigation();
         }
@@ -3668,8 +3683,151 @@ function KeyboardControls({
 }
 
 // src/mouse-controls.tsx
-import { useThree as useThree3 } from "@react-three/fiber";
+import { useFrame as useFrame4, useThree as useThree3 } from "@react-three/fiber";
 import { useContext as useContext5, useEffect as useEffect5, useRef as useRef5 } from "react";
+
+// src/pointer-drag.ts
+import { Euler as Euler2, MathUtils as MathUtils2, PerspectiveCamera as PerspectiveCamera2, Vector3 } from "three";
+var DEFAULT_POINTER_DRAG_SPEED = 0.35;
+var POINTER_FOLLOW_TIME_SECONDS = 0.01;
+var PointerDragAnchor = class {
+  constructor(start, origin, rect, projection) {
+    this.start = start;
+    this.origin = origin;
+    this.rect = rect;
+    this.projection = projection;
+    this.local = new Vector3();
+    this.rotation = new Euler2(0, 0, 0, "YXZ");
+    this.anchor = this.ray(start).clone().applyEuler(this.rotation.set(
+      MathUtils2.degToRad(origin.pitch),
+      MathUtils2.degToRad(-origin.yaw),
+      0,
+      "YXZ"
+    ));
+  }
+  ray(point) {
+    return this.local.set(
+      (point.x - this.rect.left) / Math.max(this.rect.width, 1) * 2 - 1,
+      1 - (point.y - this.rect.top) / Math.max(this.rect.height, 1) * 2,
+      0.5
+    ).applyMatrix4(this.projection.projectionMatrixInverse).normalize();
+  }
+  solve(point, speed = DEFAULT_POINTER_DRAG_SPEED, invert = false) {
+    const multiplier = (Number.isFinite(speed) && speed >= 0 ? speed : DEFAULT_POINTER_DRAG_SPEED) / DEFAULT_POINTER_DRAG_SPEED * (invert ? -1 : 1);
+    if (multiplier === 0) return { yaw: 0, pitch: 0 };
+    const ray = this.ray({
+      x: this.start.x + (point.x - this.start.x) * multiplier,
+      y: this.start.y + (point.y - this.start.y) * multiplier
+    });
+    const latitude = Math.asin(MathUtils2.clamp(this.anchor.y / Math.max(Math.hypot(ray.y, ray.z), 1e-12), -1, 1));
+    const offset = Math.atan2(ray.y, -ray.z);
+    const originPitch = MathUtils2.degToRad(this.origin.pitch);
+    const candidates = [latitude - offset, Math.PI - latitude - offset, -Math.PI - latitude - offset];
+    let pitch = candidates[0];
+    let distance = Infinity;
+    for (const candidate of candidates) {
+      const bounded = MathUtils2.clamp(candidate, -Math.PI / 2, Math.PI / 2);
+      const nextDistance = Math.abs(candidate - bounded) * 10 + Math.abs(bounded - originPitch);
+      if (nextDistance < distance) {
+        pitch = bounded;
+        distance = nextDistance;
+      }
+    }
+    const z = Math.sin(pitch) * ray.y + Math.cos(pitch) * ray.z;
+    const yaw = MathUtils2.radToDeg(Math.atan2(this.anchor.x, -this.anchor.z) - Math.atan2(ray.x, -z));
+    return { yaw: normalizeViewYaw(yaw - this.origin.yaw), pitch: MathUtils2.radToDeg(pitch) - this.origin.pitch };
+  }
+};
+function createPointerDrag(camera, element, runtime, source) {
+  let anchor;
+  let revision = -1;
+  let projectionKey = "";
+  let pending;
+  let displayed;
+  let lastPoint;
+  let fresh = false;
+  let lastFrameDelta = 1 / 60;
+  const key = (rect) => `${rect.left},${rect.top},${rect.width},${rect.height},${camera.projectionMatrix.elements.join(",")}`;
+  const start = (point) => {
+    const handle = runtime();
+    displayed = { ...point };
+    lastPoint = { ...point };
+    pending = void 0;
+    revision = handle?.getPointerDragState().revision ?? -1;
+    anchor = void 0;
+    if (!(camera instanceof PerspectiveCamera2) || !handle?.getPointerDragState().anchored) return;
+    const rect = element.getBoundingClientRect();
+    projectionKey = key(rect);
+    anchor = new PointerDragAnchor(point, handle.getView(), rect, camera.clone());
+  };
+  const apply = (point, previous, speed, invert, recordVelocity) => {
+    const handle = runtime();
+    if (!handle) return;
+    const rect = element.getBoundingClientRect();
+    if (anchor && key(rect) !== projectionKey) {
+      const queued = pending;
+      start(displayed ?? previous);
+      pending = queued;
+    }
+    if (anchor) {
+      handle.applyViewDelta(anchor.solve(point, speed, invert), {
+        pointerOrigin: anchor.origin,
+        recordVelocity,
+        source
+      });
+    } else {
+      handle.applyViewDelta({
+        yaw: -(point.x - previous.x) * 360 * speed / Math.max(rect.width, 1) * (invert ? -1 : 1),
+        pitch: (point.y - previous.y) * 180 * speed / Math.max(rect.height, 1) * (invert ? -1 : 1)
+      }, { recordVelocity, source });
+    }
+  };
+  return {
+    start,
+    valid: () => revision === (runtime()?.getPointerDragState().revision ?? -1) && !runtime()?.isInteractionLocked(),
+    clear: () => {
+      anchor = void 0;
+      revision = -1;
+      pending = void 0;
+      displayed = void 0;
+    },
+    suspend: () => {
+      anchor = void 0;
+      pending = void 0;
+      displayed = void 0;
+    },
+    move(point, previous, speed, invert) {
+      fresh = true;
+      pending = { point, previous: lastPoint ?? previous, speed, invert };
+    },
+    flush(deltaSeconds = lastFrameDelta, immediate = false) {
+      lastFrameDelta = deltaSeconds;
+      if (!pending) return;
+      const sample = pending;
+      if (!anchor || immediate) {
+        pending = void 0;
+        apply(sample.point, sample.previous, sample.speed, sample.invert, fresh);
+        fresh = false;
+        lastPoint = sample.point;
+        displayed = sample.point;
+        return;
+      }
+      const previousDisplay = displayed ?? sample.previous;
+      const dx = sample.point.x - previousDisplay.x;
+      const dy = sample.point.y - previousDisplay.y;
+      const distance = Math.hypot(dx, dy);
+      const ratio = distance > 0.01 ? POINTER_FOLLOW_TIME_SECONDS / (POINTER_FOLLOW_TIME_SECONDS + deltaSeconds) : 0;
+      const point = { x: sample.point.x - dx * ratio, y: sample.point.y - dy * ratio };
+      apply(point, sample.previous, sample.speed, sample.invert, fresh);
+      fresh = false;
+      lastPoint = sample.point;
+      displayed = point;
+      if (ratio === 0) pending = void 0;
+    }
+  };
+}
+
+// src/mouse-controls.tsx
 var DEFAULT_ROTATE_SPEED2 = 0.35;
 var DEFAULT_ZOOM_SPEED2 = 0.08;
 var BUTTON_FLAG = {
@@ -3695,7 +3853,9 @@ function MouseControls({
 }) {
   useClaimControlChannel("mouse");
   const controlsRef = useContext5(PanoramaViewContext);
-  const { gl } = useThree3();
+  const { gl, camera } = useThree3();
+  const validateDragRef = useRef5(void 0);
+  useFrame4((_, delta) => validateDragRef.current?.(delta), -1);
   const pointersRef = useRef5(
     /* @__PURE__ */ new Map()
   );
@@ -3718,6 +3878,7 @@ function MouseControls({
   };
   useEffect5(() => {
     const element = gl.domElement;
+    const drag = createPointerDrag(camera, element, () => controlsRef.current, "mouse");
     const allowedButtons = resolveButtons(buttons);
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
@@ -3726,8 +3887,13 @@ function MouseControls({
         }
       }
       pointersRef.current.clear();
+      drag.clear();
       controlsRef.current?.setPointerActive("mouse", false, { cancelled: true });
     };
+    validateDragRef.current = (delta) => {
+      if (pointersRef.current.size && !drag.valid()) clearPointers();
+      else drag.flush(delta);
+    };
     if (!enabled) {
       clearPointers();
       return;
@@ -3758,6 +3924,7 @@ function MouseControls({
       });
       element.setPointerCapture?.(event.pointerId);
       syncActive();
+      drag.start({ x: event.clientX, y: event.clientY });
     };
     const onPointerMove = (event) => {
       if (!isMouseLike(event)) {
@@ -3777,24 +3944,16 @@ function MouseControls({
         at: performance.now()
       };
       pointersRef.current.set(event.pointerId, next);
-      const rect = element.getBoundingClientRect();
-      const speed = resolveSpeed2(
-        optionsRef.current.rotateSpeed,
-        DEFAULT_ROTATE_SPEED2
-      );
-      const sign = optionsRef.current.invert ? -1 : 1;
-      const deltaYaw = sign * -(next.x - previous.x) * 360 * speed / Math.max(rect.width, 1);
-      const deltaPitch = sign * (next.y - previous.y) * 180 * speed / Math.max(rect.height, 1);
-      controlsRef.current?.applyViewDelta(
-        { yaw: deltaYaw, pitch: deltaPitch },
-        { recordVelocity: true, source: "mouse" }
-      );
+      const speed = resolveSpeed2(optionsRef.current.rotateSpeed, DEFAULT_ROTATE_SPEED2);
+      drag.move(next, previous, speed, optionsRef.current.invert);
     };
     const releasePointer = (event) => {
       if (!pointersRef.current.has(event.pointerId)) {
         return;
       }
+      if (event.type === "pointerup") drag.flush();
       pointersRef.current.delete(event.pointerId);
+      drag.clear();
       if (element.hasPointerCapture?.(event.pointerId)) {
         element.releasePointerCapture?.(event.pointerId);
       }
@@ -3830,6 +3989,7 @@ function MouseControls({
     element.addEventListener("lostpointercapture", releasePointer);
     element.addEventListener("wheel", onWheel, { passive: false });
     return () => {
+      validateDragRef.current = void 0;
       element.removeEventListener("pointerdown", onPointerDown);
       element.removeEventListener("pointermove", onPointerMove);
       element.removeEventListener("pointerup", releasePointer);
@@ -3838,7 +3998,7 @@ function MouseControls({
       element.removeEventListener("wheel", onWheel);
       clearPointers();
     };
-  }, [buttons, controlsRef, enabled, gl]);
+  }, [buttons, controlsRef, enabled, gl, camera]);
   return null;
 }
 
@@ -4863,7 +5023,7 @@ function PanoCursorController({
 }
 
 // src/pano-events.tsx
-import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
+import { useFrame as useFrame5, useThree as useThree5 } from "@react-three/fiber";
 import { useContext as useContext10, useEffect as useEffect9, useRef as useRef9 } from "react";
 var DEFAULT_IDLE_TIME_MS = 2e3;
 function resolveIdleTime(value) {
@@ -5118,7 +5278,7 @@ function usePanoEvents({
       observer.disconnect();
     };
   }, [gl]);
-  useFrame4((_, deltaSeconds) => {
+  useFrame5((_, deltaSeconds) => {
     const interacting = controlsRef.current?.isUserInteracting() ?? false;
     if (interacting) {
       idleElapsedRef.current = 0;
@@ -5276,10 +5436,10 @@ function usePanoOverlayHost(isFullscreen) {
 // src/panorama-event-surface.tsx
 import { useThree as useThree6 } from "@react-three/fiber";
 import { useContext as useContext12, useEffect as useEffect10 } from "react";
-import { BackSide, Raycaster, Vector2, Vector3 as Vector32 } from "three";
+import { BackSide, Raycaster, Vector2, Vector3 as Vector33 } from "three";
 
 // src/hotspot/coordinates.ts
-import { MathUtils as MathUtils2, Vector3 } from "three";
+import { MathUtils as MathUtils3, Vector3 as Vector32 } from "three";
 
 // src/hotspot/types.ts
 var MAX_HOTSPOT_PITCH = 90;
@@ -5302,13 +5462,13 @@ function normalizePanoYaw(yaw) {
   if (!Number.isFinite(yaw)) {
     return 0;
   }
-  return MathUtils2.euclideanModulo(yaw + 180, 360) - 180;
+  return MathUtils3.euclideanModulo(yaw + 180, 360) - 180;
 }
 function clampPanoPitch(pitch) {
   if (!Number.isFinite(pitch)) {
     return 0;
   }
-  const clamped = MathUtils2.clamp(
+  const clamped = MathUtils3.clamp(
     pitch,
     -MAX_HOTSPOT_PITCH,
     MAX_HOTSPOT_PITCH
@@ -5325,10 +5485,10 @@ function normalizePanoPosition(position) {
 function panoPositionToVector3(position, radius = 1) {
   const normalized = normalizePanoPosition(position);
   const safeRadius = Number.isFinite(radius) ? Math.max(0, radius) : 1;
-  const yaw = MathUtils2.degToRad(normalized.yaw);
-  const pitch = MathUtils2.degToRad(normalized.pitch);
+  const yaw = MathUtils3.degToRad(normalized.yaw);
+  const pitch = MathUtils3.degToRad(normalized.pitch);
   const cosPitch = Math.cos(pitch);
-  return new Vector3(
+  return new Vector32(
     cosPitch * Math.sin(yaw) * safeRadius,
     Math.sin(pitch) * safeRadius,
     -cosPitch * Math.cos(yaw) * safeRadius
@@ -5340,9 +5500,9 @@ function vector3ToPanoPosition(vector) {
     return { yaw: 0, pitch: 0 };
   }
   return normalizePanoPosition({
-    yaw: MathUtils2.radToDeg(Math.atan2(vector.x, -vector.z)),
-    pitch: MathUtils2.radToDeg(
-      Math.asin(MathUtils2.clamp(vector.y / length, -1, 1))
+    yaw: MathUtils3.radToDeg(Math.atan2(vector.x, -vector.z)),
+    pitch: MathUtils3.radToDeg(
+      Math.asin(MathUtils3.clamp(vector.y / length, -1, 1))
     )
   });
 }
@@ -5377,7 +5537,7 @@ function PanoramaEventSurface() {
     const element = gl.domElement;
     const ndc = new Vector2();
     const raycaster = new Raycaster();
-    const direction = new Vector32();
+    const direction = new Vector33();
     const handleContextMenu = (nativeEvent) => {
       const rect = element.getBoundingClientRect();
       if (rect.width <= 0 || rect.height <= 0) {
@@ -5456,7 +5616,7 @@ function notifyScenesHost(host) {
 }
 
 // src/touch-controls.tsx
-import { useThree as useThree7 } from "@react-three/fiber";
+import { useFrame as useFrame6, useThree as useThree7 } from "@react-three/fiber";
 import { useContext as useContext13, useEffect as useEffect11, useRef as useRef10 } from "react";
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function resolveSpeed3(value, fallback) {
@@ -5473,7 +5633,9 @@ function TouchControls({
 }) {
   useClaimControlChannel("touch");
   const controlsRef = useContext13(PanoramaViewContext);
-  const { gl } = useThree7();
+  const { gl, camera } = useThree7();
+  const validateDragRef = useRef10(void 0);
+  useFrame6((_, delta) => validateDragRef.current?.(delta), -1);
   const pointersRef = useRef10(/* @__PURE__ */ new Map());
   const pinchDistanceRef = useRef10(null);
   const optionsRef = useRef10({ rotateSpeed, invert, pinchZoom });
@@ -5483,6 +5645,7 @@ function TouchControls({
   optionsRef.current = { rotateSpeed, invert, pinchZoom };
   useEffect11(() => {
     const element = gl.domElement;
+    const drag = createPointerDrag(camera, element, () => controlsRef.current, "touch");
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
         if (element.hasPointerCapture?.(pointerId)) {
@@ -5490,9 +5653,14 @@ function TouchControls({
         }
       }
       pointersRef.current.clear();
+      drag.clear();
       pinchDistanceRef.current = null;
       controlsRef.current?.setPointerActive("touch", false, { cancelled: true });
     };
+    validateDragRef.current = (delta) => {
+      if (pointersRef.current.size && !drag.valid()) clearPointers();
+      else drag.flush(delta);
+    };
     if (!enabled) {
       clearPointers();
       return;
@@ -5519,7 +5687,9 @@ function TouchControls({
       });
       element.setPointerCapture?.(event.pointerId);
       syncActive();
-      if (pointersRef.current.size === 2) {
+      drag.start({ x: event.clientX, y: event.clientY });
+      if (pointersRef.current.size >= 2) {
+        drag.suspend();
         const [first, second] = Array.from(pointersRef.current.values());
         pinchDistanceRef.current = pointerDistance(first, second);
       }
@@ -5544,6 +5714,7 @@ function TouchControls({
       pointersRef.current.set(event.pointerId, next);
       const pointers = Array.from(pointersRef.current.values());
       if (pointers.length >= 2) {
+        drag.suspend();
         if (!optionsRef.current.pinchZoom) {
           return;
         }
@@ -5562,24 +5733,16 @@ function TouchControls({
         }
         return;
       }
-      const rect = element.getBoundingClientRect();
-      const speed = resolveSpeed3(
-        optionsRef.current.rotateSpeed,
-        DEFAULT_ROTATE_SPEED3
-      );
-      const sign = optionsRef.current.invert ? -1 : 1;
-      const deltaYaw = sign * -(next.x - previous.x) * 360 * speed / Math.max(rect.width, 1);
-      const deltaPitch = sign * (next.y - previous.y) * 180 * speed / Math.max(rect.height, 1);
-      controlsRef.current?.applyViewDelta(
-        { yaw: deltaYaw, pitch: deltaPitch },
-        { recordVelocity: true, source: "touch" }
-      );
+      const speed = resolveSpeed3(optionsRef.current.rotateSpeed, DEFAULT_ROTATE_SPEED3);
+      drag.move(next, previous, speed, optionsRef.current.invert);
     };
     const releasePointer = (event) => {
       if (!pointersRef.current.has(event.pointerId)) {
         return;
       }
+      if (event.type === "pointerup") drag.flush();
       pointersRef.current.delete(event.pointerId);
+      drag.clear();
       if (element.hasPointerCapture?.(event.pointerId)) {
         element.releasePointerCapture?.(event.pointerId);
       }
@@ -5587,6 +5750,8 @@ function TouchControls({
         pinchDistanceRef.current = null;
       }
       syncActive(event.type !== "pointerup");
+      const remaining = pointersRef.current.values().next().value;
+      if (remaining) drag.start(remaining);
     };
     element.addEventListener("pointerdown", onPointerDown);
     element.addEventListener("pointermove", onPointerMove);
@@ -5594,6 +5759,7 @@ function TouchControls({
     element.addEventListener("pointercancel", releasePointer);
     element.addEventListener("lostpointercapture", releasePointer);
     return () => {
+      validateDragRef.current = void 0;
       element.removeEventListener("pointerdown", onPointerDown);
       element.removeEventListener("pointermove", onPointerMove);
       element.removeEventListener("pointerup", releasePointer);
@@ -5601,7 +5767,7 @@ function TouchControls({
       element.removeEventListener("lostpointercapture", releasePointer);
       clearPointers();
     };
-  }, [controlsRef, enabled, gl]);
+  }, [controlsRef, enabled, gl, camera]);
   return null;
 }
 
@@ -7233,8 +7399,8 @@ function WebVRChromeBridge({ host }) {
 }
 
 // src/webvr/stereo-view.ts
-import { StereoCamera, Vector3 as Vector33 } from "three";
-var PROJECT = new Vector33();
+import { StereoCamera, Vector3 as Vector34 } from "three";
+var PROJECT = new Vector34();
 function createWebVRStereoView() {
   return {
     active: false,
@@ -7259,17 +7425,17 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 }
 
 // src/webvr/xr-origin.tsx
-import { useFrame as useFrame5, useThree as useThree8 } from "@react-three/fiber";
+import { useFrame as useFrame7, useThree as useThree8 } from "@react-three/fiber";
 import { useXR as useXR2, XROrigin } from "@react-three/xr";
 import { useRef as useRef12 } from "react";
-import { Vector3 as Vector34 } from "three";
+import { Vector3 as Vector35 } from "three";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function PanoramaXROrigin() {
   const originRef = useRef12(null);
-  const localHeadPositionRef = useRef12(new Vector34());
+  const localHeadPositionRef = useRef12(new Vector35());
   const session2 = useXR2((state) => state.session);
   const gl = useThree8((state) => state.gl);
-  useFrame5(() => {
+  useFrame7(() => {
     const origin = originRef.current;
     if (!session2 || !origin || !gl.xr.isPresenting) {
       return;
@@ -8018,7 +8184,7 @@ import {
 } from "react";
 
 // src/scenes.tsx
-import { useFrame as useFrame11, useThree as useThree16 } from "@react-three/fiber";
+import { useFrame as useFrame13, useThree as useThree16 } from "@react-three/fiber";
 import {
   Fragment as Fragment4,
   useCallback as useCallback8,
@@ -8102,9 +8268,9 @@ function isSnapshotTransition(preset) {
 }
 
 // src/scene-transitions/snapshot-hold.tsx
-import { useFrame as useFrame6, useThree as useThree9 } from "@react-three/fiber";
+import { useFrame as useFrame8, useThree as useThree9 } from "@react-three/fiber";
 import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef14 } from "react";
-import { Vector3 as Vector36 } from "three";
+import { Vector3 as Vector37 } from "three";
 
 // src/scene-transitions/overlay-utils.ts
 import { PlaneGeometry } from "three";
@@ -8440,13 +8606,13 @@ import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function SnapshotHold({ snapshot }) {
   const { camera, gl } = useThree9();
   const meshRef = useRef14(null);
-  const directionRef = useRef14(new Vector36());
+  const directionRef = useRef14(new Vector37());
   const material = useMemo9(
     () => createSnapshotMaterial("crossfade", snapshot.texture),
     [snapshot.texture]
   );
   useEffect14(() => () => material.dispose(), [material]);
-  useFrame6(() => {
+  useFrame8(() => {
     const mesh = meshRef.current;
     if (!mesh || !isPerspectiveCamera(camera)) {
       return;
@@ -8522,7 +8688,7 @@ function phaseAfterSnapshot(preset, hold) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-import { useFrame as useFrame7, useThree as useThree10 } from "@react-three/fiber";
+import { useFrame as useFrame9, useThree as useThree10 } from "@react-three/fiber";
 import { useEffect as useEffect15, useMemo as useMemo10, useRef as useRef15 } from "react";
 import {
   DoubleSide as DoubleSide2,
@@ -8531,7 +8697,7 @@ import {
   PlaneGeometry as PlaneGeometry2,
   ShaderMaterial as ShaderMaterial2,
   Vector2 as Vector23,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
@@ -8613,7 +8779,7 @@ function ParticleOverlay({
   const meshRef = useRef15(null);
   const startRef = useRef15(null);
   const finishedRef = useRef15(false);
-  const directionRef = useRef15(new Vector37());
+  const directionRef = useRef15(new Vector38());
   const geometry = useMemo10(() => createParticleGeometry(), []);
   const material = useMemo10(
     () => new ShaderMaterial2({
@@ -8638,7 +8804,7 @@ function ParticleOverlay({
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
   }, [material, runId]);
-  useFrame7((state) => {
+  useFrame9((state) => {
     const mesh = meshRef.current;
     if (!mesh || !isPerspectiveCamera(camera)) {
       return;
@@ -8668,9 +8834,9 @@ function ParticleOverlay({
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-import { useFrame as useFrame8, useThree as useThree11 } from "@react-three/fiber";
+import { useFrame as useFrame10, useThree as useThree11 } from "@react-three/fiber";
 import { useEffect as useEffect16, useMemo as useMemo11, useRef as useRef16 } from "react";
-import { Vector3 as Vector38 } from "three";
+import { Vector3 as Vector39 } from "three";
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
@@ -8683,7 +8849,7 @@ function SnapshotOverlay({
   const meshRef = useRef16(null);
   const startRef = useRef16(null);
   const finishedRef = useRef16(false);
-  const directionRef = useRef16(new Vector38());
+  const directionRef = useRef16(new Vector39());
   const material = useMemo11(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
@@ -8698,7 +8864,7 @@ function SnapshotOverlay({
       material.uniforms.progress.value = 0;
     }
   }, [material, runId]);
-  useFrame8((state) => {
+  useFrame10((state) => {
     const mesh = meshRef.current;
     if (!mesh || !material || !isPerspectiveCamera(camera)) {
       return;
@@ -8778,7 +8944,7 @@ import {
   BackSide as BackSide2,
   LinearFilter,
   LinearMipmapLinearFilter,
-  MathUtils as MathUtils3,
+  MathUtils as MathUtils4,
   RepeatWrapping,
   SRGBColorSpace,
   TextureLoader
@@ -9144,7 +9310,7 @@ function Sphere({
   return /* @__PURE__ */ jsxs9(
     "mesh",
     {
-      rotation: [0, MathUtils3.degToRad(90 + yawOffset2), 0],
+      rotation: [0, MathUtils4.degToRad(90 + yawOffset2), 0],
       visible,
       children: [
         /* @__PURE__ */ jsx18("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
@@ -9162,9 +9328,9 @@ function Sphere({
 }
 
 // src/sphere-tile/sphere-tile.tsx
-import { useFrame as useFrame9, useThree as useThree14 } from "@react-three/fiber";
+import { useFrame as useFrame11, useThree as useThree14 } from "@react-three/fiber";
 import { memo, useCallback as useCallback7, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef20, useState as useState9 } from "react";
-import { BackSide as BackSide3, Frustum, Matrix4 as Matrix42, PerspectiveCamera as PerspectiveCamera3 } from "three";
+import { BackSide as BackSide3, Frustum, Matrix4 as Matrix42, PerspectiveCamera as PerspectiveCamera4 } from "three";
 
 // src/tile/texture-manager.ts
 import {
@@ -9516,8 +9682,8 @@ import {
   Box3,
   BufferGeometry,
   Float32BufferAttribute,
-  MathUtils as MathUtils4,
-  Vector3 as Vector39
+  MathUtils as MathUtils5,
+  Vector3 as Vector310
 } from "three";
 function positiveInteger2(value, name) {
   if (!Number.isSafeInteger(value) || value <= 0) {
@@ -9589,9 +9755,9 @@ function sphereTileRange(address) {
   };
 }
 function spherePoint(u, v, yawOffset2 = 0, radius = DEFAULT_PANORAMA_RADIUS) {
-  const yaw = (u - 0.5) * Math.PI * 2 + MathUtils4.degToRad(yawOffset2);
+  const yaw = (u - 0.5) * Math.PI * 2 + MathUtils5.degToRad(yawOffset2);
   const pitch = (0.5 - v) * Math.PI;
-  return new Vector39(
+  return new Vector310(
     Math.sin(yaw) * Math.cos(pitch) * radius,
     Math.sin(pitch) * radius,
     -Math.cos(yaw) * Math.cos(pitch) * radius
@@ -9821,7 +9987,7 @@ function SphereTileSource({
   const targetKeysRef = useRef20([]);
   const scratch = useMemo15(
     () => ({
-      camera: new PerspectiveCamera3(),
+      camera: new PerspectiveCamera4(),
       frustum: new Frustum(),
       matrix: new Matrix42(),
       quaternion: camera.quaternion.clone(),
@@ -9837,8 +10003,8 @@ function SphereTileSource({
     }),
     [camera, candidates]
   );
-  useFrame9(() => {
-    if (!(camera instanceof PerspectiveCamera3)) return;
+  useFrame11(() => {
+    if (!(camera instanceof PerspectiveCamera4)) return;
     const now = performance.now(), dpr = gl.getPixelRatio();
     const managerChanged = scratch.manager !== manager;
     const loadModeChanged = scratch.loadMode !== loadMode;
@@ -9940,22 +10106,22 @@ function SphereTile({ multires, ...props }) {
 }
 
 // src/tile/tile.tsx
-import { useFrame as useFrame10, useThree as useThree15 } from "@react-three/fiber";
+import { useFrame as useFrame12, useThree as useThree15 } from "@react-three/fiber";
 import { memo as memo2, useEffect as useEffect21, useMemo as useMemo16, useRef as useRef21, useState as useState10 } from "react";
 import {
   Frustum as Frustum2,
   Matrix4 as Matrix43,
   PlaneGeometry as PlaneGeometry3,
-  PerspectiveCamera as PerspectiveCamera4,
-  Vector3 as Vector311
+  PerspectiveCamera as PerspectiveCamera5,
+  Vector3 as Vector312
 } from "three";
 
 // src/tile/face-layout.ts
 import {
   Box3 as Box32,
-  Euler as Euler2,
+  Euler as Euler3,
   Quaternion,
-  Vector3 as Vector310
+  Vector3 as Vector311
 } from "three";
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
@@ -10008,7 +10174,7 @@ function getFaceQuaternion(face) {
   }
   const transform = getFaceTransform(face);
   const quaternion = new Quaternion().setFromEuler(
-    new Euler2(...transform.rotation, "XYZ")
+    new Euler3(...transform.rotation, "XYZ")
   );
   faceQuaternionCache.set(face, quaternion);
   return quaternion;
@@ -10019,12 +10185,12 @@ function getTileBoundingBox(address, radius = CUBE_RADIUS) {
   const halfWidth = local.width / 2;
   const halfHeight = local.height / 2;
   const quaternion = getFaceQuaternion(address.face);
-  const position = new Vector310(...transform.position);
+  const position = new Vector311(...transform.position);
   const corners = [
-    new Vector310(local.x - halfWidth, local.y - halfHeight, 0),
-    new Vector310(local.x + halfWidth, local.y - halfHeight, 0),
-    new Vector310(local.x - halfWidth, local.y + halfHeight, 0),
-    new Vector310(local.x + halfWidth, local.y + halfHeight, 0)
+    new Vector311(local.x - halfWidth, local.y - halfHeight, 0),
+    new Vector311(local.x + halfWidth, local.y - halfHeight, 0),
+    new Vector311(local.x - halfWidth, local.y + halfHeight, 0),
+    new Vector311(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
@@ -10298,8 +10464,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new Vector311());
-  const center = new Vector311();
+  const direction = camera.getWorldDirection(new Vector312());
+  const center = new Vector312();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -10446,7 +10612,7 @@ function Tile({
   const lastViewportRef = useRef21({ width: 0, height: 0, dpr: 0 });
   const frustumRef = useRef21(new Frustum2());
   const projectionMatrixRef = useRef21(new Matrix43());
-  const visibilityCameraRef = useRef21(new PerspectiveCamera4());
+  const visibilityCameraRef = useRef21(new PerspectiveCamera5());
   const trackedLoadModeRef = useRef21(loadMode);
   const targetKeysRef = useRef21([]);
   const detailTokenRef = useRef21("");
@@ -10473,8 +10639,8 @@ function Tile({
       setLayers(nextLayers);
     }
   };
-  useFrame10(() => {
-    if (!(camera instanceof PerspectiveCamera4)) {
+  useFrame12(() => {
+    if (!(camera instanceof PerspectiveCamera5)) {
       return;
     }
     if (loadMode === "preview") {
@@ -10644,7 +10810,7 @@ function SnapshotCapture({
     },
     []
   );
-  useFrame11(() => {
+  useFrame13(() => {
     if (requestId === 0 || requestId === capturedRequestRef.current) {
       return;
     }
@@ -11220,7 +11386,7 @@ import {
 } from "three";
 
 // src/hotspot/hotspot-anchor.tsx
-import { useFrame as useFrame14, useThree as useThree19 } from "@react-three/fiber";
+import { useFrame as useFrame16, useThree as useThree19 } from "@react-three/fiber";
 import {
   useContext as useContext21,
   useEffect as useEffect24,
@@ -11232,20 +11398,20 @@ import {
 import {
   Box3 as Box34,
   EdgesGeometry,
-  MathUtils as MathUtils7,
+  MathUtils as MathUtils8,
   Matrix4 as Matrix44,
   Plane,
   PlaneGeometry as PlaneGeometry4,
   Quaternion as Quaternion3,
   Ray,
-  Vector3 as Vector315
+  Vector3 as Vector316
 } from "three";
 
 // src/hotspot/hotspot-tooltip.tsx
 import { useEffect as useEffect23, useMemo as useMemo18, useState as useState12 } from "react";
 
 // src/webvr/stereo-html.tsx
-import { useFrame as useFrame12, useThree as useThree17 } from "@react-three/fiber";
+import { useFrame as useFrame14, useThree as useThree17 } from "@react-three/fiber";
 import {
   useContext as useContext20,
   useLayoutEffect as useLayoutEffect5,
@@ -11253,7 +11419,7 @@ import {
   useSyncExternalStore as useSyncExternalStore7
 } from "react";
 import { createRoot } from "react-dom/client";
-import { Vector3 as Vector312 } from "three";
+import { Vector3 as Vector313 } from "three";
 import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function useFallbackStereoView() {
   const runtime = useContext20(WebVRRuntimeContext);
@@ -11276,7 +11442,7 @@ function ProjectedHtml({
   const { camera, gl, events, size } = useThree17();
   const group = useRef23(null);
   const overlay = useRef23(null);
-  const scratch = useRef23(new Vector312());
+  const scratch = useRef23(new Vector313());
   const target = events.connected || gl.domElement.parentElement;
   const updatePosition = () => {
     const anchor = group.current;
@@ -11335,7 +11501,7 @@ function ProjectedHtml({
     );
     updatePosition();
   });
-  useFrame12(updatePosition);
+  useFrame14(updatePosition);
   return /* @__PURE__ */ jsx23("group", { ref: group });
 }
 function PanoHtml(props) {
@@ -11477,21 +11643,21 @@ function HotspotTooltip({
 
 // src/hotspot/transform.ts
 import {
-  MathUtils as MathUtils5,
-  PerspectiveCamera as PerspectiveCamera5,
-  Vector3 as Vector313
+  MathUtils as MathUtils6,
+  PerspectiveCamera as PerspectiveCamera6,
+  Vector3 as Vector314
 } from "three";
-var LOCAL_FORWARD = new Vector313(0, 0, 1);
-var CAMERA_POSITION = new Vector313();
+var LOCAL_FORWARD = new Vector314(0, 0, 1);
+var CAMERA_POSITION = new Vector314();
 function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight, distance) {
   if (orientation2 === "billboard") {
     group.quaternion.copy(camera.quaternion);
   } else {
     group.quaternion.copy(surfaceQuaternion3);
   }
-  group.rotateOnAxis(LOCAL_FORWARD, MathUtils5.degToRad(-rotation));
-  let scaleFactor = scaleMode === "fixed" && camera instanceof PerspectiveCamera5 ? fixedScaleFactor(camera.fov, referenceFov) : 1;
-  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof PerspectiveCamera5) {
+  group.rotateOnAxis(LOCAL_FORWARD, MathUtils6.degToRad(-rotation));
+  let scaleFactor = scaleMode === "fixed" && camera instanceof PerspectiveCamera6 ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof PerspectiveCamera6) {
     group.updateWorldMatrix(true, false);
     CAMERA_POSITION.setFromMatrixPosition(group.matrixWorld).applyMatrix4(
       camera.matrixWorldInverse
@@ -11506,21 +11672,21 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   group.updateMatrixWorld();
 }
 function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = MathUtils5.clamp(referenceFov, 1, 179);
-  return Math.tan(MathUtils5.degToRad(cameraFov) / 2) / Math.tan(MathUtils5.degToRad(safeReferenceFov) / 2);
+  const safeReferenceFov = MathUtils6.clamp(referenceFov, 1, 179);
+  return Math.tan(MathUtils6.degToRad(cameraFov) / 2) / Math.tan(MathUtils6.degToRad(safeReferenceFov) / 2);
 }
 
 // src/hotspot/hotspot-stroke-line.tsx
 import { Line } from "@react-three/drei";
-import { useFrame as useFrame13, useThree as useThree18 } from "@react-three/fiber";
+import { useFrame as useFrame15, useThree as useThree18 } from "@react-three/fiber";
 import { useLayoutEffect as useLayoutEffect6, useRef as useRef24 } from "react";
 import {
-  MathUtils as MathUtils6,
-  PerspectiveCamera as PerspectiveCamera6,
-  Vector3 as Vector314
+  MathUtils as MathUtils7,
+  PerspectiveCamera as PerspectiveCamera7,
+  Vector3 as Vector315
 } from "three";
 import { jsx as jsx25 } from "react/jsx-runtime";
-var LINE_WORLD_POSITION = new Vector314();
+var LINE_WORLD_POSITION = new Vector315();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -11528,8 +11694,8 @@ function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   }
   object.getWorldPosition(LINE_WORLD_POSITION);
   const depth = Math.max(camera.position.distanceTo(LINE_WORLD_POSITION), 1);
-  const fov = camera instanceof PerspectiveCamera6 ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils6.degToRad(fov) * 0.5) * depth);
+  const fov = camera instanceof PerspectiveCamera7 ? camera.fov : 75;
+  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils7.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -11559,7 +11725,7 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, camera, size.height);
   }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
-  useFrame13((state) => {
+  useFrame15((state) => {
     if (!dash.dashed) {
       return;
     }
@@ -11604,25 +11770,25 @@ var SELECTION_BORDER_POINTS = [
 ];
 var TOOLTIP_WORLD_BOX = new Box34();
 var TOOLTIP_LOCAL_BOX = new Box34();
-var TOOLTIP_CORNER = new Vector315();
+var TOOLTIP_CORNER = new Vector316();
 var TOOLTIP_INVERSE = new Matrix44();
-var TOOLTIP_WORLD_CORNER = new Vector315();
-var TOOLTIP_PROJECTED = new Vector315();
-var TOOLTIP_RAY_ORIGIN = new Vector315();
-var TOOLTIP_RAY_FAR = new Vector315();
-var TOOLTIP_RAY_DIRECTION = new Vector315();
+var TOOLTIP_WORLD_CORNER = new Vector316();
+var TOOLTIP_PROJECTED = new Vector316();
+var TOOLTIP_RAY_ORIGIN = new Vector316();
+var TOOLTIP_RAY_FAR = new Vector316();
+var TOOLTIP_RAY_DIRECTION = new Vector316();
 var TOOLTIP_RAY = new Ray();
 var TOOLTIP_PLANE = new Plane();
-var TOOLTIP_INTERSECTION = new Vector315();
-var TOOLTIP_PLANE_NORMAL = new Vector315();
-var TOOLTIP_PLANE_POINT = new Vector315();
+var TOOLTIP_INTERSECTION = new Vector316();
+var TOOLTIP_PLANE_NORMAL = new Vector316();
+var TOOLTIP_PLANE_POINT = new Vector316();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? MathUtils7.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(MathUtils7.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? MathUtils8.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(MathUtils8.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -11635,32 +11801,32 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return MathUtils7.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return MathUtils8.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = MathUtils7.clamp(
+  const safeWidth = MathUtils8.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = MathUtils7.clamp(
+  const safeHeight = MathUtils8.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(MathUtils7.degToRad(safeWidth) / 2),
-    Math.tan(MathUtils7.degToRad(safeHeight) / 2)
+    Math.tan(MathUtils8.degToRad(safeWidth) / 2),
+    Math.tan(MathUtils8.degToRad(safeHeight) / 2)
   );
   return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
 }
 function createSurfaceQuaternion(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = MathUtils7.degToRad(position.pitch);
-  const yaw = MathUtils7.degToRad(position.yaw);
-  const localUp = new Vector315(
+  const pitch = MathUtils8.degToRad(position.pitch);
+  const yaw = MathUtils8.degToRad(position.yaw);
+  const localUp = new Vector316(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -11680,7 +11846,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return MathUtils7.radToDeg(aVector.angleTo(bVector));
+  return MathUtils8.radToDeg(aVector.angleTo(bVector));
 }
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
@@ -12093,7 +12259,7 @@ function HotspotAnchor({
     worldHeight,
     worldWidth
   ]);
-  useFrame14((state) => {
+  useFrame16((state) => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -12708,7 +12874,7 @@ function GraphicHotspot(props) {
 }
 
 // src/hotspot/sequence-hotspot.tsx
-import { useFrame as useFrame15, useThree as useThree21 } from "@react-three/fiber";
+import { useFrame as useFrame17, useThree as useThree21 } from "@react-three/fiber";
 import { useEffect as useEffect27, useRef as useRef28, useState as useState16 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
@@ -12863,7 +13029,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  useFrame15((_, deltaSeconds) => {
+  useFrame17((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -13188,7 +13354,7 @@ function VideoHotspot({
 }
 
 // src/hotspot/audio-hotspot.tsx
-import { useFrame as useFrame16, useThree as useThree23 } from "@react-three/fiber";
+import { useFrame as useFrame18, useThree as useThree23 } from "@react-three/fiber";
 import { useEffect as useEffect29, useRef as useRef30, useState as useState18 } from "react";
 import {
   CanvasTexture as CanvasTexture2,
@@ -13200,10 +13366,10 @@ import {
 } from "three";
 
 // src/hotspot/audio-spatial.ts
-import { MathUtils as MathUtils8, Vector3 as Vector316 } from "three";
-var LOOK_DIR = new Vector316();
-var SOURCE_DIR = new Vector316();
-var RIGHT_DIR = new Vector316();
+import { MathUtils as MathUtils9, Vector3 as Vector317 } from "three";
+var LOOK_DIR = new Vector317();
+var SOURCE_DIR = new Vector317();
+var RIGHT_DIR = new Vector317();
 function clampAudioVolume(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -13228,11 +13394,11 @@ function lookRangeGain(angleDegrees, range) {
 function audioSpatialFromView(camera, position, range) {
   camera.getWorldDirection(LOOK_DIR);
   SOURCE_DIR.copy(panoPositionToVector3(position)).normalize();
-  const angleDegrees = MathUtils8.radToDeg(
-    Math.acos(MathUtils8.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
+  const angleDegrees = MathUtils9.radToDeg(
+    Math.acos(MathUtils9.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
   );
   RIGHT_DIR.set(1, 0, 0).applyQuaternion(camera.quaternion);
-  const pan = MathUtils8.clamp(
+  const pan = MathUtils9.clamp(
     Math.atan2(SOURCE_DIR.dot(RIGHT_DIR), SOURCE_DIR.dot(LOOK_DIR)) / (Math.PI / 2),
     -1,
     1
@@ -13521,7 +13687,7 @@ function AudioHotspot({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [howl, pauseWhenHidden]);
-  useFrame16(() => {
+  useFrame18(() => {
     if (!howl) {
       return;
     }
@@ -13539,13 +13705,13 @@ function AudioHotspot({
 
 // src/hotspot/text-hotspot.tsx
 import { useEffect as useEffect30, useRef as useRef31, useState as useState19 } from "react";
-import { useFrame as useFrame17, useThree as useThree24 } from "@react-three/fiber";
+import { useFrame as useFrame19, useThree as useThree24 } from "@react-three/fiber";
 import {
   CanvasTexture as CanvasTexture3,
   ClampToEdgeWrapping as ClampToEdgeWrapping8,
   LinearFilter as LinearFilter10,
-  MathUtils as MathUtils9,
-  PerspectiveCamera as PerspectiveCamera7,
+  MathUtils as MathUtils10,
+  PerspectiveCamera as PerspectiveCamera8,
   SRGBColorSpace as SRGBColorSpace9
 } from "three";
 import { jsx as jsx33 } from "react/jsx-runtime";
@@ -13619,7 +13785,7 @@ function projectedDevicePixels(angleDeg, fovDeg, viewportHeight) {
   }
   const fov = Math.min(179, Math.max(1, resolvePositive(fovDeg, DEFAULT_REFERENCE_FOV2)));
   const angle = Math.min(179, Math.max(0.01, Math.abs(angleDeg)));
-  return Math.tan(MathUtils9.degToRad(angle) / 2) / Math.tan(MathUtils9.degToRad(fov) / 2) * viewportHeight;
+  return Math.tan(MathUtils10.degToRad(angle) / 2) / Math.tan(MathUtils10.degToRad(fov) / 2) * viewportHeight;
 }
 function snapRasterLongSide(screenLong, layoutLong) {
   if (!(screenLong > 0)) {
@@ -13821,7 +13987,7 @@ function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
   const measure = () => {
     const pixelRatio = getPixelRatio();
     const viewportHeight = size.height * (Number.isFinite(pixelRatio) && pixelRatio > 0 ? pixelRatio : 1);
-    const cameraFov = camera instanceof PerspectiveCamera7 ? camera.fov : DEFAULT_REFERENCE_FOV2;
+    const cameraFov = camera instanceof PerspectiveCamera8 ? camera.fov : DEFAULT_REFERENCE_FOV2;
     const screenLong = Math.max(
       projectedDevicePixels(
         width * resolveScale2(scale),
@@ -13845,7 +14011,7 @@ function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
   if (measured !== rasterLong) {
     setRasterLong(measured);
   }
-  useFrame17(() => {
+  useFrame19(() => {
     const next = measure();
     setRasterLong((current) => current === next ? current : next);
   });
@@ -14099,7 +14265,7 @@ import {
   Quaternion as Quaternion4,
   ShapeUtils,
   Vector2 as Vector25,
-  Vector3 as Vector317
+  Vector3 as Vector318
 } from "three";
 import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
@@ -14173,7 +14339,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new Vector317()];
+  const candidates = [new Vector318()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14197,7 +14363,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new Vector317(0, 1, 0)) || polygonContainsDirection(normalized, new Vector317(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new Vector318(0, 1, 0)) || polygonContainsDirection(normalized, new Vector318(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14208,7 +14374,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector317()
+    new Vector318()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14217,7 +14383,7 @@ function surfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = position.pitch * Math.PI / 180;
   const yaw = position.yaw * Math.PI / 180;
-  const localUp = new Vector317(
+  const localUp = new Vector318(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -14230,7 +14396,7 @@ function makeWorldToLocal(center) {
   return new Matrix45().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new Vector317(1, 1, 1)
+    new Vector318(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14456,10 +14622,10 @@ function PolygonHotspot({
 // src/hotspot/polyline-hotspot.tsx
 import { useEffect as useEffect32, useMemo as useMemo21, useRef as useRef33 } from "react";
 import {
-  MathUtils as MathUtils10,
+  MathUtils as MathUtils11,
   Matrix4 as Matrix46,
   Quaternion as Quaternion5,
-  Vector3 as Vector318
+  Vector3 as Vector319
 } from "three";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
@@ -14486,16 +14652,16 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector318()
+    new Vector319()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
 function surfaceQuaternion2(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = MathUtils10.degToRad(position.pitch);
-  const yaw = MathUtils10.degToRad(position.yaw);
-  const localUp = new Vector318(
+  const pitch = MathUtils11.degToRad(position.pitch);
+  const yaw = MathUtils11.degToRad(position.yaw);
+  const localUp = new Vector319(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -14508,7 +14674,7 @@ function makeWorldToLocal2(center) {
   return new Matrix46().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new Vector318(1, 1, 1)
+    new Vector319(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -14523,7 +14689,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(MathUtils10.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(MathUtils11.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -15286,7 +15452,7 @@ function PanoFilter({
 }
 
 // src/gyro.tsx
-import { useFrame as useFrame18, useThree as useThree25 } from "@react-three/fiber";
+import { useFrame as useFrame20, useThree as useThree25 } from "@react-three/fiber";
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback9,
@@ -15298,12 +15464,12 @@ import {
 } from "react";
 
 // src/gyro-orientation.ts
-import { Euler as Euler3, MathUtils as MathUtils11, Quaternion as Quaternion6, Vector3 as Vector319 } from "three";
+import { Euler as Euler4, MathUtils as MathUtils12, Quaternion as Quaternion6, Vector3 as Vector320 } from "three";
 var DEVICE_FORWARD_CORRECTION = new Quaternion6().setFromAxisAngle(
-  new Vector319(1, 0, 0),
+  new Vector320(1, 0, 0),
   -Math.PI / 2
 );
-var SCREEN_AXIS = new Vector319(0, 0, 1);
+var SCREEN_AXIS = new Vector320(0, 0, 1);
 function getScreenOrientationAngle() {
   if (typeof window === "undefined") {
     return 0;
@@ -15317,31 +15483,31 @@ function getScreenOrientationAngle() {
 }
 function deviceOrientationToQuaternion(sample, screenOrientation) {
   const alpha = Number.isFinite(sample.compassHeading) ? 360 - sample.compassHeading : sample.alpha;
-  const deviceEuler = new Euler3(
-    MathUtils11.degToRad(sample.beta),
-    MathUtils11.degToRad(alpha),
-    MathUtils11.degToRad(-sample.gamma),
+  const deviceEuler = new Euler4(
+    MathUtils12.degToRad(sample.beta),
+    MathUtils12.degToRad(alpha),
+    MathUtils12.degToRad(-sample.gamma),
     "YXZ"
   );
   const screenCorrection = new Quaternion6().setFromAxisAngle(
     SCREEN_AXIS,
-    -MathUtils11.degToRad(screenOrientation)
+    -MathUtils12.degToRad(screenOrientation)
   );
   return new Quaternion6().setFromEuler(deviceEuler).multiply(DEVICE_FORWARD_CORRECTION).multiply(screenCorrection).normalize();
 }
 function quaternionToGyroPose(quaternion) {
-  const euler = new Euler3().setFromQuaternion(quaternion, "YXZ");
+  const euler = new Euler4().setFromQuaternion(quaternion, "YXZ");
   return {
-    yaw: MathUtils11.radToDeg(-euler.y),
-    pitch: MathUtils11.radToDeg(euler.x),
-    roll: MathUtils11.radToDeg(euler.z)
+    yaw: MathUtils12.radToDeg(-euler.y),
+    pitch: MathUtils12.radToDeg(euler.x),
+    roll: MathUtils12.radToDeg(euler.z)
   };
 }
 function createRelativeCalibration(deviceQuaternion, yaw, pitch) {
   const targetQuaternion = new Quaternion6().setFromEuler(
-    new Euler3(
-      MathUtils11.degToRad(pitch),
-      MathUtils11.degToRad(-yaw),
+    new Euler4(
+      MathUtils12.degToRad(pitch),
+      MathUtils12.degToRad(-yaw),
       0,
       "YXZ"
     )
@@ -15686,7 +15852,7 @@ var Gyro = forwardRef3(function Gyro2({
     internallyDisabled,
     requestPermission
   ]);
-  useFrame18((_, deltaSeconds) => {
+  useFrame20((_, deltaSeconds) => {
     const rawQuaternion = rawQuaternionRef.current;
     if (!activeRef.current || !rawQuaternion) {
       return;
@@ -15779,13 +15945,13 @@ async function detectWebVRCapabilities() {
 }
 
 // src/webvr/reticle.tsx
-import { useFrame as useFrame19, useThree as useThree26 } from "@react-three/fiber";
+import { useFrame as useFrame21, useThree as useThree26 } from "@react-three/fiber";
 import { useRef as useRef36 } from "react";
 import {
   DoubleSide as DoubleSide6,
   Raycaster as Raycaster3,
   Vector2 as Vector26,
-  Vector3 as Vector320
+  Vector3 as Vector321
 } from "three";
 import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
 var CENTER_NDC = new Vector26(0, 0);
@@ -15873,13 +16039,13 @@ function WebVRReticle({
 }) {
   const groupRef = useRef36(null);
   const ringMeshRef = useRef36(null);
-  const directionRef = useRef36(new Vector320());
+  const directionRef = useRef36(new Vector321());
   const raycasterRef = useRef36(new Raycaster3());
   const hoveredRef = useRef36(null);
   const dwellRef = useRef36(0);
   const clickedRef = useRef36(false);
   const { camera, gl, scene } = useThree26();
-  useFrame19((_, deltaSeconds) => {
+  useFrame21((_, deltaSeconds) => {
     const group = groupRef.current;
     const ringMesh = ringMeshRef.current;
     if (!visible || !group) {
@@ -16039,12 +16205,12 @@ function WebVRReticle({
 }
 
 // src/webvr/stereo.tsx
-import { useFrame as useFrame20, useThree as useThree27 } from "@react-three/fiber";
+import { useFrame as useFrame22, useThree as useThree27 } from "@react-three/fiber";
 import { useContext as useContext26, useEffect as useEffect36, useMemo as useMemo25, useRef as useRef37 } from "react";
 import {
   Mesh as Mesh6,
   OrthographicCamera,
-  PerspectiveCamera as PerspectiveCamera8,
+  PerspectiveCamera as PerspectiveCamera9,
   PlaneGeometry as PlaneGeometry5,
   Scene,
   ShaderMaterial as ShaderMaterial3,
@@ -16155,7 +16321,7 @@ function WebVRStereoRenderer({
   useEffect36(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
-      if (!stereoActiveRef.current || !(cameraToRender instanceof PerspectiveCamera8)) {
+      if (!stereoActiveRef.current || !(cameraToRender instanceof PerspectiveCamera9)) {
         originalRender(sceneToRender, cameraToRender);
         return;
       }
@@ -16224,13 +16390,13 @@ function WebVRStereoRenderer({
     },
     [runtime]
   );
-  useFrame20(() => {
+  useFrame22(() => {
     const fallback = isFallbackStereoMode(mode);
     stereoActiveRef.current = fallback;
     if (runtime) {
       runtime.stereoView.active = fallback;
     }
-    if (fallback && camera instanceof PerspectiveCamera8) {
+    if (fallback && camera instanceof PerspectiveCamera9) {
       syncStereoCameras(
         stereoRef.current,
         camera,
@@ -16241,7 +16407,7 @@ function WebVRStereoRenderer({
       );
       return;
     }
-    if (originalFovRef.current !== null && camera instanceof PerspectiveCamera8) {
+    if (originalFovRef.current !== null && camera instanceof PerspectiveCamera9) {
       camera.fov = originalFovRef.current;
       camera.updateProjectionMatrix();
       originalFovRef.current = null;
@@ -16935,7 +17101,7 @@ import {
   BackSide as BackSide4,
   LinearFilter as LinearFilter11,
   LinearMipmapLinearFilter as LinearMipmapLinearFilter7,
-  MathUtils as MathUtils12,
+  MathUtils as MathUtils13,
   RepeatWrapping as RepeatWrapping2,
   SRGBColorSpace as SRGBColorSpace10,
   TextureLoader as TextureLoader8,
@@ -17644,7 +17810,7 @@ function PanoVideo({
     activeTexture ? /* @__PURE__ */ jsxs21(
       "mesh",
       {
-        rotation: [0, MathUtils12.degToRad(90 + yawOffset2), 0],
+        rotation: [0, MathUtils13.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
           /* @__PURE__ */ jsx40("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),