@ericchen1990/pano-view 3.6.4 → 3.6.6

package/dist/index.mjs

@@ -2537,7 +2537,136 @@ import {
   useLayoutEffect,
   useRef
 } from "react";
-import { Euler, MathUtils, PerspectiveCamera } from "three";
+import { Euler as Euler2, MathUtils as MathUtils2, PerspectiveCamera } from "three";
+
+// src/gyro-orientation.ts
+import { Euler, MathUtils, Quaternion, Vector3 } from "three";
+
+// src/gyro-types.ts
+var GYRO_POSE_EPSILON = 0.02;
+var GYRO_DISCONTINUITY_ANGLE_DEG = 15;
+var GYRO_DISCONTINUITY_SPEED_DEG_PER_S = 1200;
+
+// src/gyro-orientation.ts
+var DEVICE_FORWARD_CORRECTION = new Quaternion().setFromAxisAngle(
+  new Vector3(1, 0, 0),
+  -Math.PI / 2
+);
+var SCREEN_AXIS = new Vector3(0, 0, 1);
+var LOOK_LOCAL = new Vector3(0, 0, -1);
+var UP_LOCAL = new Vector3(0, 1, 0);
+var scratchEuler = new Euler(0, 0, 0, "YXZ");
+var scratchScreenCorrection = new Quaternion();
+var scratchInvert = new Quaternion();
+var scratchWithoutRoll = new Quaternion();
+var scratchForward = new Vector3();
+var scratchUp = new Vector3();
+var scratchExpectedUp = new Vector3();
+var ZENITH_PITCH_DEG = 89;
+function getScreenOrientationAngle() {
+  if (typeof window === "undefined") {
+    return 0;
+  }
+  const angle = window.screen.orientation?.angle;
+  if (Number.isFinite(angle)) {
+    return angle;
+  }
+  const legacyAngle = window.orientation;
+  return Number.isFinite(legacyAngle) ? legacyAngle : 0;
+}
+function normalizeGyroYaw(value) {
+  return ((value + 180) % 360 + 360) % 360 - 180;
+}
+function shortestGyroYawDelta(from, to) {
+  return normalizeGyroYaw(to - from);
+}
+function deviceOrientationToQuaternion(sample, screenOrientation, target) {
+  const alpha = Number.isFinite(sample.compassHeading) ? 360 - sample.compassHeading : sample.alpha;
+  scratchEuler.set(
+    MathUtils.degToRad(sample.beta),
+    MathUtils.degToRad(alpha),
+    MathUtils.degToRad(-sample.gamma),
+    "YXZ"
+  );
+  scratchScreenCorrection.setFromAxisAngle(
+    SCREEN_AXIS,
+    -MathUtils.degToRad(screenOrientation)
+  );
+  return target.setFromEuler(scratchEuler).multiply(DEVICE_FORWARD_CORRECTION).multiply(scratchScreenCorrection).normalize();
+}
+function quaternionToGyroPose(quaternion, previousYaw) {
+  scratchForward.copy(LOOK_LOCAL).applyQuaternion(quaternion);
+  const pitchRad = Math.asin(MathUtils.clamp(scratchForward.y, -1, 1));
+  const pitch = MathUtils.radToDeg(pitchRad);
+  const nearZenith = Math.abs(pitch) >= ZENITH_PITCH_DEG;
+  const yaw = nearZenith && previousYaw !== void 0 ? previousYaw : MathUtils.radToDeg(Math.atan2(scratchForward.x, -scratchForward.z));
+  scratchEuler.set(pitchRad, -MathUtils.degToRad(yaw), 0, "YXZ");
+  scratchWithoutRoll.setFromEuler(scratchEuler);
+  scratchUp.copy(UP_LOCAL).applyQuaternion(quaternion);
+  scratchExpectedUp.copy(UP_LOCAL).applyQuaternion(scratchWithoutRoll);
+  const look = scratchForward;
+  const crossX = scratchUp.y * scratchExpectedUp.z - scratchUp.z * scratchExpectedUp.y;
+  const crossY = scratchUp.z * scratchExpectedUp.x - scratchUp.x * scratchExpectedUp.z;
+  const crossZ = scratchUp.x * scratchExpectedUp.y - scratchUp.y * scratchExpectedUp.x;
+  const sinTwist = crossX * look.x + crossY * look.y + crossZ * look.z;
+  const cosTwist = MathUtils.clamp(scratchExpectedUp.dot(scratchUp), -1, 1);
+  const roll = MathUtils.radToDeg(Math.atan2(sinTwist, cosTwist));
+  return {
+    yaw: normalizeGyroYaw(yaw),
+    pitch,
+    roll
+  };
+}
+function createRelativeCalibration(deviceQuaternion, yaw, pitch, target) {
+  scratchInvert.copy(deviceQuaternion).invert();
+  scratchEuler.set(
+    MathUtils.degToRad(pitch),
+    MathUtils.degToRad(-yaw),
+    0,
+    "YXZ"
+  );
+  return target.setFromEuler(scratchEuler).multiply(scratchInvert).normalize();
+}
+function applyGyroCalibration(deviceQuaternion, calibration, target, previousYaw) {
+  return quaternionToGyroPose(
+    target.copy(calibration).multiply(deviceQuaternion).normalize(),
+    previousYaw
+  );
+}
+function reduceGyroPitchOffset(offset, pitchDelta) {
+  if (offset === 0 || pitchDelta === 0) {
+    return offset;
+  }
+  const absDelta = Math.abs(pitchDelta);
+  if (offset > 0) {
+    return Math.max(0, offset - absDelta);
+  }
+  return Math.min(0, offset + absDelta);
+}
+function reclaimGyroOffsets(poseYaw, posePitch, constrainedYaw, constrainedPitch) {
+  return {
+    yaw: shortestGyroYawDelta(poseYaw, constrainedYaw),
+    pitch: constrainedPitch - posePitch
+  };
+}
+function gyroPoseAngleDelta(from, to) {
+  return Math.max(
+    Math.abs(shortestGyroYawDelta(from.yaw, to.yaw)),
+    Math.abs(to.pitch - from.pitch),
+    Math.abs(shortestGyroYawDelta(from.roll, to.roll))
+  );
+}
+function shouldReanchorGyro(angleDeltaDegrees, deltaSeconds) {
+  if (!(deltaSeconds > 0) || angleDeltaDegrees <= GYRO_DISCONTINUITY_ANGLE_DEG) {
+    return false;
+  }
+  return angleDeltaDegrees / deltaSeconds >= GYRO_DISCONTINUITY_SPEED_DEG_PER_S;
+}
+function posesNearlyEqual(a, b, epsilon = GYRO_POSE_EPSILON) {
+  return Math.abs(shortestGyroYawDelta(a.yaw, b.yaw)) < epsilon && Math.abs(a.pitch - b.pitch) < epsilon && Math.abs(a.roll - b.roll) < epsilon;
+}
+
+// src/panorama-view-runtime.tsx
 var MAX_PITCH = 90;
 var BOUNCE_OVERSHOOT_PITCH = 12;
 var BOUNCE_OVERSHOOT_FOV_RATIO = 0.15;
@@ -2554,7 +2683,7 @@ function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
 function normalizeYaw(yaw) {
-  return MathUtils.euclideanModulo(yaw + 180, 360) - 180;
+  return MathUtils2.euclideanModulo(yaw + 180, 360) - 180;
 }
 function shortestYawDelta(from, to) {
   return normalizeYaw(to - from);
@@ -2602,6 +2731,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
   const interactionLockCountRef = useRef(0);
   const keyboardActiveRef = useRef(false);
   const gyroActiveRef = useRef(false);
+  const gyroPoseDrivingRef = useRef(false);
   const gyroPoseRef = useRef({ yaw: 0, pitch: 0, roll: 0 });
   const gyroOffsetRef = useRef({ yaw: 0, pitch: 0 });
   const gyroTouchModeRef = useRef("full");
@@ -2610,8 +2740,8 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
   const optionsRef = useRef(options);
   const eventBusRef = useRef(eventBus);
   const lastEmittedViewRef = useRef(null);
-  const eulerRef = useRef(new Euler(0, 0, 0, "YXZ"));
-  const xrEulerRef = useRef(new Euler(0, 0, 0, "YXZ"));
+  const eulerRef = useRef(new Euler2(0, 0, 0, "YXZ"));
+  const xrEulerRef = useRef(new Euler2(0, 0, 0, "YXZ"));
   const baseLimitsRef = useRef(viewLimits);
   const sceneLimitsRef = useRef(void 0);
   const legacyFovRef = useRef({ minFov, maxFov });
@@ -2940,6 +3070,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
         gyroOffsetRef.current = { yaw: 0, pitch: 0 };
         stopVelocity();
         if (!active) {
+          gyroPoseDrivingRef.current = false;
           cameraRollRef.current = 0;
           dirtyRef.current = true;
         }
@@ -2949,18 +3080,35 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
           return;
         }
         const previous = gyroPoseRef.current;
-        const viewMovement = Math.abs(shortestYawDelta(previous.yaw, pose.yaw)) + Math.abs(previous.pitch - pose.pitch);
+        const pitchDelta = pose.pitch - previous.pitch;
+        const viewMovement = Math.abs(shortestYawDelta(previous.yaw, pose.yaw)) + Math.abs(pitchDelta);
         const movement = viewMovement + Math.abs(previous.roll - pose.roll);
-        if (movement < 1e-4) {
+        if (movement < GYRO_POSE_EPSILON) {
           return;
         }
+        if (gyroTouchModeRef.current === "full") {
+          gyroOffsetRef.current.pitch = reduceGyroPitchOffset(
+            gyroOffsetRef.current.pitch,
+            pitchDelta
+          );
+        }
         gyroPoseRef.current = { ...pose };
-        targetViewRef.current = hardConstrainView({
+        gyroPoseDrivingRef.current = true;
+        const constrained = hardConstrainView({
           yaw: pose.yaw + gyroOffsetRef.current.yaw,
           pitch: pose.pitch + gyroOffsetRef.current.pitch
         });
+        targetViewRef.current = constrained;
+        const reclaimed = reclaimGyroOffsets(
+          pose.yaw,
+          pose.pitch,
+          constrained.yaw,
+          constrained.pitch
+        );
+        gyroOffsetRef.current.yaw = reclaimed.yaw;
+        gyroOffsetRef.current.pitch = reclaimed.pitch;
         cameraRollRef.current = pose.roll;
-        if (viewMovement >= 1e-4) {
+        if (viewMovement >= GYRO_POSE_EPSILON) {
           markDirty();
         } else {
           dirtyRef.current = true;
@@ -3006,9 +3154,9 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       const xrCamera = gl.xr.getCamera();
       xrEulerRef.current.setFromQuaternion(xrCamera.quaternion, "YXZ");
       const nextView2 = {
-        yaw: normalizeYaw(-MathUtils.radToDeg(xrEulerRef.current.y)),
+        yaw: normalizeYaw(-MathUtils2.radToDeg(xrEulerRef.current.y)),
         pitch: clamp(
-          MathUtils.radToDeg(xrEulerRef.current.x),
+          MathUtils2.radToDeg(xrEulerRef.current.x),
           -MAX_PITCH,
           MAX_PITCH
         ),
@@ -3038,14 +3186,16 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       const completed = progress === 1;
       viewRef.current = completed ? { ...navigation.target } : nextView2;
       eulerRef.current.set(
-        MathUtils.degToRad(viewRef.current.pitch),
-        MathUtils.degToRad(-viewRef.current.yaw),
-        MathUtils.degToRad(cameraRollRef.current),
+        MathUtils2.degToRad(viewRef.current.pitch),
+        MathUtils2.degToRad(-viewRef.current.yaw),
+        MathUtils2.degToRad(cameraRollRef.current),
         "YXZ"
       );
       camera.quaternion.setFromEuler(eulerRef.current);
-      camera.fov = viewRef.current.fov;
-      camera.updateProjectionMatrix();
+      if (camera.fov !== viewRef.current.fov) {
+        camera.fov = viewRef.current.fov;
+        camera.updateProjectionMatrix();
+      }
       camera.updateMatrixWorld();
       const emittedView = { ...viewRef.current };
       const lastEmitted2 = lastEmittedViewRef.current;
@@ -3114,7 +3264,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       optionsRef.current.zoomDamping,
       DEFAULT_ZOOM_DAMPING
     );
-    const rotationFactor = dampingFactor(rotateDamping, deltaSeconds);
+    const rotationFactor = gyroPoseDrivingRef.current ? 1 : dampingFactor(rotateDamping, deltaSeconds);
     const zoomFactor = dampingFactor(zoomDamping, deltaSeconds);
     const yawDelta = limitedYawDelta(viewRef.current.yaw, targetView.yaw, limitsRef.current.yaw);
     const smoothedView = {
@@ -3125,14 +3275,16 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     const hasSettled = Math.abs(shortestYawDelta(smoothedView.yaw, targetView.yaw)) < VIEW_SETTLE_EPSILON && Math.abs(smoothedView.pitch - targetView.pitch) < VIEW_SETTLE_EPSILON && Math.abs(smoothedView.fov - targetView.fov) < VIEW_SETTLE_EPSILON;
     viewRef.current = hasSettled ? { ...targetView } : smoothedView;
     eulerRef.current.set(
-      MathUtils.degToRad(viewRef.current.pitch),
-      MathUtils.degToRad(-viewRef.current.yaw),
-      MathUtils.degToRad(cameraRollRef.current),
+      MathUtils2.degToRad(viewRef.current.pitch),
+      MathUtils2.degToRad(-viewRef.current.yaw),
+      MathUtils2.degToRad(cameraRollRef.current),
       "YXZ"
     );
     camera.quaternion.setFromEuler(eulerRef.current);
-    camera.fov = viewRef.current.fov;
-    camera.updateProjectionMatrix();
+    if (camera.fov !== viewRef.current.fov) {
+      camera.fov = viewRef.current.fov;
+      camera.updateProjectionMatrix();
+    }
     camera.updateMatrixWorld();
     const nextView = { ...viewRef.current };
     const lastEmitted = lastEmittedViewRef.current;
@@ -3692,7 +3844,7 @@ 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";
+import { Euler as Euler3, MathUtils as MathUtils3, PerspectiveCamera as PerspectiveCamera2, Vector3 as Vector32 } from "three";
 var DEFAULT_POINTER_DRAG_SPEED = 0.35;
 var POINTER_FOLLOW_TIME_SECONDS = 0.01;
 var MIN_VELOCITY_SAMPLE_SECONDS = 1 / 120;
@@ -3721,18 +3873,18 @@ var PointerDragAnchor = class {
     this.origin = origin;
     this.rect = rect;
     this.projection = projection;
-    this.local = new Vector3();
-    this.rotation = new Euler2(0, 0, 0, "YXZ");
+    this.local = new Vector32();
+    this.rotation = new Euler3(0, 0, 0, "YXZ");
     const startRay = this.ray(start).clone();
     this.baseAzimuth = Math.atan2(startRay.x, -startRay.z);
     this.baseElevation = Math.atan2(startRay.y, -startRay.z);
     this.anchor = startRay.clone().applyEuler(this.rotation.set(
-      MathUtils2.degToRad(origin.pitch),
-      MathUtils2.degToRad(-origin.yaw),
+      MathUtils3.degToRad(origin.pitch),
+      MathUtils3.degToRad(-origin.yaw),
       0,
       "YXZ"
     ));
-    const originPitch = MathUtils2.degToRad(origin.pitch);
+    const originPitch = MathUtils3.degToRad(origin.pitch);
     const roots = this.pitchRoots(startRay, originPitch);
     this.useSupplementary = Math.abs(roots.supplementary - originPitch) + 1e-6 < Math.abs(roots.principal - originPitch);
   }
@@ -3745,7 +3897,7 @@ var PointerDragAnchor = class {
   }
   /** Pitch roots of the level-camera constraint. The supplementary root is unwrapped toward the press. */
   pitchRoots(ray, originPitch) {
-    const latitude = Math.asin(MathUtils2.clamp(
+    const latitude = Math.asin(MathUtils3.clamp(
       this.anchor.y / Math.max(Math.hypot(ray.y, ray.z), 1e-12),
       -1,
       1
@@ -3765,28 +3917,28 @@ var PointerDragAnchor = class {
       x: this.start.x + (point.x - this.start.x) * multiplier,
       y: this.start.y + (point.y - this.start.y) * multiplier
     });
-    const originPitch = MathUtils2.degToRad(this.origin.pitch);
+    const originPitch = MathUtils3.degToRad(this.origin.pitch);
     const roots = this.pitchRoots(ray, originPitch);
-    const exactPitch = MathUtils2.clamp(
+    const exactPitch = MathUtils3.clamp(
       this.useSupplementary ? roots.supplementary : roots.principal,
       -Math.PI / 2,
       Math.PI / 2
     );
     const stablePitch = originPitch - (Math.atan2(ray.y, -ray.z) - this.baseElevation);
     const fromPole = Math.asin(Math.min(1, Math.hypot(this.anchor.x, this.anchor.z)));
-    const pointerLock = MathUtils2.smoothstep(fromPole, MathUtils2.degToRad(8), MathUtils2.degToRad(18));
+    const pointerLock = MathUtils3.smoothstep(fromPole, MathUtils3.degToRad(8), MathUtils3.degToRad(18));
     const pitchTurn = Math.atan2(Math.sin(exactPitch - stablePitch), Math.cos(exactPitch - stablePitch));
-    const pitch = MathUtils2.clamp(
+    const pitch = MathUtils3.clamp(
       pointerLock >= 1 ? exactPitch : stablePitch + pointerLock * pitchTurn,
       -Math.PI / 2,
       Math.PI / 2
     );
     const pitchedZ = Math.sin(exactPitch) * ray.y + Math.cos(exactPitch) * ray.z;
     const exactYaw = Math.atan2(this.anchor.x, -this.anchor.z) - Math.atan2(ray.x, -pitchedZ);
-    const stableYaw = MathUtils2.degToRad(this.origin.yaw) + Math.atan2(ray.x, -ray.z) - this.baseAzimuth;
+    const stableYaw = MathUtils3.degToRad(this.origin.yaw) + Math.atan2(ray.x, -ray.z) - this.baseAzimuth;
     const yawTurn = Math.atan2(Math.sin(exactYaw - stableYaw), Math.cos(exactYaw - stableYaw));
-    const yaw = MathUtils2.radToDeg(stableYaw + pointerLock * yawTurn);
-    return { yaw: normalizeViewYaw(yaw - this.origin.yaw), pitch: MathUtils2.radToDeg(pitch) - this.origin.pitch };
+    const yaw = MathUtils3.radToDeg(stableYaw + pointerLock * yawTurn);
+    return { yaw: normalizeViewYaw(yaw - this.origin.yaw), pitch: MathUtils3.radToDeg(pitch) - this.origin.pitch };
   }
 };
 function createPointerDrag(camera, element, runtime, source) {
@@ -5561,10 +5713,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 Vector33 } from "three";
+import { BackSide, Raycaster, Vector2, Vector3 as Vector34 } from "three";
 
 // src/hotspot/coordinates.ts
-import { MathUtils as MathUtils3, Vector3 as Vector32 } from "three";
+import { MathUtils as MathUtils4, Vector3 as Vector33 } from "three";
 
 // src/hotspot/types.ts
 var MAX_HOTSPOT_PITCH = 90;
@@ -5587,13 +5739,13 @@ function normalizePanoYaw(yaw) {
   if (!Number.isFinite(yaw)) {
     return 0;
   }
-  return MathUtils3.euclideanModulo(yaw + 180, 360) - 180;
+  return MathUtils4.euclideanModulo(yaw + 180, 360) - 180;
 }
 function clampPanoPitch(pitch) {
   if (!Number.isFinite(pitch)) {
     return 0;
   }
-  const clamped = MathUtils3.clamp(
+  const clamped = MathUtils4.clamp(
     pitch,
     -MAX_HOTSPOT_PITCH,
     MAX_HOTSPOT_PITCH
@@ -5610,10 +5762,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 = MathUtils3.degToRad(normalized.yaw);
-  const pitch = MathUtils3.degToRad(normalized.pitch);
+  const yaw = MathUtils4.degToRad(normalized.yaw);
+  const pitch = MathUtils4.degToRad(normalized.pitch);
   const cosPitch = Math.cos(pitch);
-  return new Vector32(
+  return new Vector33(
     cosPitch * Math.sin(yaw) * safeRadius,
     Math.sin(pitch) * safeRadius,
     -cosPitch * Math.cos(yaw) * safeRadius
@@ -5625,9 +5777,9 @@ function vector3ToPanoPosition(vector) {
     return { yaw: 0, pitch: 0 };
   }
   return normalizePanoPosition({
-    yaw: MathUtils3.radToDeg(Math.atan2(vector.x, -vector.z)),
-    pitch: MathUtils3.radToDeg(
-      Math.asin(MathUtils3.clamp(vector.y / length, -1, 1))
+    yaw: MathUtils4.radToDeg(Math.atan2(vector.x, -vector.z)),
+    pitch: MathUtils4.radToDeg(
+      Math.asin(MathUtils4.clamp(vector.y / length, -1, 1))
     )
   });
 }
@@ -5668,7 +5820,7 @@ function PanoramaEventSurface() {
     const element = gl.domElement;
     const ndc = new Vector2();
     const raycaster = new Raycaster();
-    const direction = new Vector33();
+    const direction = new Vector34();
     const handleContextMenu = (nativeEvent) => {
       const rect = element.getBoundingClientRect();
       if (rect.width <= 0 || rect.height <= 0) {
@@ -7558,8 +7710,8 @@ function WebVRChromeBridge({ host }) {
 }
 
 // src/webvr/stereo-view.ts
-import { StereoCamera, Vector3 as Vector34 } from "three";
-var PROJECT = new Vector34();
+import { StereoCamera, Vector3 as Vector35 } from "three";
+var PROJECT = new Vector35();
 function createWebVRStereoView() {
   return {
     active: false,
@@ -7587,11 +7739,11 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 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 Vector35 } from "three";
+import { Vector3 as Vector36 } from "three";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function PanoramaXROrigin() {
   const originRef = useRef12(null);
-  const localHeadPositionRef = useRef12(new Vector35());
+  const localHeadPositionRef = useRef12(new Vector36());
   const session2 = useXR2((state) => state.session);
   const gl = useThree8((state) => state.gl);
   useFrame7(() => {
@@ -8429,7 +8581,7 @@ function isSnapshotTransition(preset) {
 // src/scene-transitions/snapshot-hold.tsx
 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 Vector37 } from "three";
+import { Vector3 as Vector38 } from "three";
 
 // src/scene-transitions/overlay-utils.ts
 import { PlaneGeometry } from "three";
@@ -8765,7 +8917,7 @@ 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 Vector37());
+  const directionRef = useRef14(new Vector38());
   const material = useMemo9(
     () => createSnapshotMaterial("crossfade", snapshot.texture),
     [snapshot.texture]
@@ -8856,7 +9008,7 @@ import {
   PlaneGeometry as PlaneGeometry2,
   ShaderMaterial as ShaderMaterial2,
   Vector2 as Vector23,
-  Vector3 as Vector38
+  Vector3 as Vector39
 } from "three";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
@@ -8938,7 +9090,7 @@ function ParticleOverlay({
   const meshRef = useRef15(null);
   const startRef = useRef15(null);
   const finishedRef = useRef15(false);
-  const directionRef = useRef15(new Vector38());
+  const directionRef = useRef15(new Vector39());
   const geometry = useMemo10(() => createParticleGeometry(), []);
   const material = useMemo10(
     () => new ShaderMaterial2({
@@ -8995,7 +9147,7 @@ function ParticleOverlay({
 // src/scene-transitions/snapshot-overlay.tsx
 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 Vector39 } from "three";
+import { Vector3 as Vector310 } from "three";
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
@@ -9008,7 +9160,7 @@ function SnapshotOverlay({
   const meshRef = useRef16(null);
   const startRef = useRef16(null);
   const finishedRef = useRef16(false);
-  const directionRef = useRef16(new Vector39());
+  const directionRef = useRef16(new Vector310());
   const material = useMemo11(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
@@ -9103,7 +9255,7 @@ import {
   BackSide as BackSide2,
   LinearFilter,
   LinearMipmapLinearFilter,
-  MathUtils as MathUtils4,
+  MathUtils as MathUtils5,
   RepeatWrapping,
   SRGBColorSpace,
   TextureLoader
@@ -9469,7 +9621,7 @@ function Sphere({
   return /* @__PURE__ */ jsxs9(
     "mesh",
     {
-      rotation: [0, MathUtils4.degToRad(90 + yawOffset2), 0],
+      rotation: [0, MathUtils5.degToRad(90 + yawOffset2), 0],
       visible,
       children: [
         /* @__PURE__ */ jsx18("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
@@ -9841,8 +9993,8 @@ import {
   Box3,
   BufferGeometry,
   Float32BufferAttribute,
-  MathUtils as MathUtils5,
-  Vector3 as Vector310
+  MathUtils as MathUtils6,
+  Vector3 as Vector311
 } from "three";
 function positiveInteger2(value, name) {
   if (!Number.isSafeInteger(value) || value <= 0) {
@@ -9914,9 +10066,9 @@ function sphereTileRange(address) {
   };
 }
 function spherePoint(u, v, yawOffset2 = 0, radius = DEFAULT_PANORAMA_RADIUS) {
-  const yaw = (u - 0.5) * Math.PI * 2 + MathUtils5.degToRad(yawOffset2);
+  const yaw = (u - 0.5) * Math.PI * 2 + MathUtils6.degToRad(yawOffset2);
   const pitch = (0.5 - v) * Math.PI;
-  return new Vector310(
+  return new Vector311(
     Math.sin(yaw) * Math.cos(pitch) * radius,
     Math.sin(pitch) * radius,
     -Math.cos(yaw) * Math.cos(pitch) * radius
@@ -10272,15 +10424,15 @@ import {
   Matrix4 as Matrix43,
   PlaneGeometry as PlaneGeometry3,
   PerspectiveCamera as PerspectiveCamera5,
-  Vector3 as Vector312
+  Vector3 as Vector313
 } from "three";
 
 // src/tile/face-layout.ts
 import {
   Box3 as Box32,
-  Euler as Euler3,
-  Quaternion,
-  Vector3 as Vector311
+  Euler as Euler4,
+  Quaternion as Quaternion2,
+  Vector3 as Vector312
 } from "three";
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
@@ -10332,8 +10484,8 @@ function getFaceQuaternion(face) {
     return cached;
   }
   const transform = getFaceTransform(face);
-  const quaternion = new Quaternion().setFromEuler(
-    new Euler3(...transform.rotation, "XYZ")
+  const quaternion = new Quaternion2().setFromEuler(
+    new Euler4(...transform.rotation, "XYZ")
   );
   faceQuaternionCache.set(face, quaternion);
   return quaternion;
@@ -10344,12 +10496,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 Vector311(...transform.position);
+  const position = new Vector312(...transform.position);
   const corners = [
-    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)
+    new Vector312(local.x - halfWidth, local.y - halfHeight, 0),
+    new Vector312(local.x + halfWidth, local.y - halfHeight, 0),
+    new Vector312(local.x - halfWidth, local.y + halfHeight, 0),
+    new Vector312(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
@@ -10623,8 +10775,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new Vector312());
-  const center = new Vector312();
+  const direction = camera.getWorldDirection(new Vector313());
+  const center = new Vector313();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -11557,16 +11709,16 @@ import {
 import {
   Box3 as Box34,
   EdgesGeometry,
-  MathUtils as MathUtils8,
+  MathUtils as MathUtils9,
   Matrix4 as Matrix44,
   PerspectiveCamera as PerspectiveCamera8,
   Plane,
   PlaneGeometry as PlaneGeometry4,
-  Quaternion as Quaternion3,
+  Quaternion as Quaternion4,
   Ray,
   Raycaster as Raycaster2,
   Vector2 as Vector24,
-  Vector3 as Vector316
+  Vector3 as Vector317
 } from "three";
 
 // src/hotspot/drag-session.ts
@@ -11632,6 +11784,7 @@ function trackPointerDrag(source, element, pointerId, onMove, onEnd) {
   element.addEventListener("lostpointercapture", onLostCapture);
   return stop;
 }
+var CAPTURE = { capture: true };
 function suppressFollowingClick(target) {
   let cleaned = false;
   const cleanup = () => {
@@ -11639,8 +11792,8 @@ function suppressFollowingClick(target) {
       return;
     }
     cleaned = true;
-    target.removeEventListener("click", swallowClick, true);
-    target.removeEventListener("pointerdown", cancel, true);
+    target.removeEventListener("click", swallowClick, CAPTURE);
+    target.removeEventListener("pointerdown", cancel, CAPTURE);
   };
   const swallowClick = (event) => {
     event.preventDefault();
@@ -11651,8 +11804,8 @@ function suppressFollowingClick(target) {
   const cancel = () => {
     cleanup();
   };
-  target.addEventListener("click", swallowClick, true);
-  target.addEventListener("pointerdown", cancel, true);
+  target.addEventListener("click", swallowClick, CAPTURE);
+  target.addEventListener("pointerdown", cancel, CAPTURE);
   setTimeout(cleanup, CLICK_SUPPRESS_MS);
 }
 
@@ -11668,7 +11821,7 @@ import {
   useSyncExternalStore as useSyncExternalStore7
 } from "react";
 import { createRoot } from "react-dom/client";
-import { Vector3 as Vector313 } from "three";
+import { Vector3 as Vector314 } from "three";
 import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function useFallbackStereoView() {
   const runtime = useContext20(WebVRRuntimeContext);
@@ -11691,7 +11844,7 @@ function ProjectedHtml({
   const { camera, gl, events, size } = useThree17();
   const group = useRef23(null);
   const overlay = useRef23(null);
-  const scratch = useRef23(new Vector313());
+  const scratch = useRef23(new Vector314());
   const target = events.connected || gl.domElement.parentElement;
   const updatePosition = () => {
     const anchor = group.current;
@@ -11892,19 +12045,19 @@ function HotspotTooltip({
 
 // src/hotspot/transform.ts
 import {
-  MathUtils as MathUtils6,
+  MathUtils as MathUtils7,
   PerspectiveCamera as PerspectiveCamera6,
-  Vector3 as Vector314
+  Vector3 as Vector315
 } from "three";
-var LOCAL_FORWARD = new Vector314(0, 0, 1);
-var CAMERA_POSITION = new Vector314();
+var LOCAL_FORWARD = new Vector315(0, 0, 1);
+var CAMERA_POSITION = new Vector315();
 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, MathUtils6.degToRad(-rotation));
+  group.rotateOnAxis(LOCAL_FORWARD, MathUtils7.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);
@@ -11921,15 +12074,15 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   group.updateMatrixWorld();
 }
 function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = MathUtils6.clamp(referenceFov, 1, 179);
-  return Math.tan(MathUtils6.degToRad(cameraFov) / 2) / Math.tan(MathUtils6.degToRad(safeReferenceFov) / 2);
+  const safeReferenceFov = MathUtils7.clamp(referenceFov, 1, 179);
+  return Math.tan(MathUtils7.degToRad(cameraFov) / 2) / Math.tan(MathUtils7.degToRad(safeReferenceFov) / 2);
 }
 function selectionFrameScale(worldScaleX, worldScaleY, cameraSpaceDepth, fovDegrees, viewportHeight, outsetPixels) {
   const pixels = Number.isFinite(outsetPixels) && outsetPixels > 0 ? outsetPixels : 0;
   const depth = Number.isFinite(cameraSpaceDepth) ? Math.max(cameraSpaceDepth, 1e-4) : 1e-4;
   const height = Number.isFinite(viewportHeight) ? Math.max(viewportHeight, 1) : 1;
-  const fov = Number.isFinite(fovDegrees) ? MathUtils6.clamp(fovDegrees, 1, 179) : 75;
-  const pixelsPerWorldUnit = height / (2 * Math.tan(MathUtils6.degToRad(fov) * 0.5) * depth);
+  const fov = Number.isFinite(fovDegrees) ? MathUtils7.clamp(fovDegrees, 1, 179) : 75;
+  const pixelsPerWorldUnit = height / (2 * Math.tan(MathUtils7.degToRad(fov) * 0.5) * depth);
   const axis = (worldScale) => {
     const pixelsPerLocalUnit = pixelsPerWorldUnit * Math.abs(worldScale);
     if (pixelsPerLocalUnit < 1e-4) {
@@ -11945,12 +12098,12 @@ import { Line } from "@react-three/drei";
 import { useFrame as useFrame15, useThree as useThree18 } from "@react-three/fiber";
 import { useLayoutEffect as useLayoutEffect6, useRef as useRef24 } from "react";
 import {
-  MathUtils as MathUtils7,
+  MathUtils as MathUtils8,
   PerspectiveCamera as PerspectiveCamera7,
-  Vector3 as Vector315
+  Vector3 as Vector316
 } from "three";
 import { jsx as jsx25 } from "react/jsx-runtime";
-var LINE_WORLD_POSITION = new Vector315();
+var LINE_WORLD_POSITION = new Vector316();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -11959,7 +12112,7 @@ 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 PerspectiveCamera7 ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils7.degToRad(fov) * 0.5) * depth);
+  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils8.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -12028,8 +12181,8 @@ var DRAG_EPSILON_DEGREES = 1e-3;
 var SELECTION_BORDER_WIDTH = 3;
 var SELECTION_BORDER_GAP = 3;
 var SELECTION_BORDER_OUTSET = SELECTION_BORDER_GAP + SELECTION_BORDER_WIDTH / 2;
-var SELECTION_CAMERA_POSITION = new Vector316();
-var SELECTION_WORLD_SCALE = new Vector316();
+var SELECTION_CAMERA_POSITION = new Vector317();
+var SELECTION_WORLD_SCALE = new Vector317();
 var SELECTION_BORDER_POINTS = [
   [-0.5, -0.5, 1e-3],
   [0.5, -0.5, 1e-3],
@@ -12039,25 +12192,25 @@ var SELECTION_BORDER_POINTS = [
 ];
 var TOOLTIP_WORLD_BOX = new Box34();
 var TOOLTIP_LOCAL_BOX = new Box34();
-var TOOLTIP_CORNER = new Vector316();
+var TOOLTIP_CORNER = new Vector317();
 var TOOLTIP_INVERSE = new Matrix44();
-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_WORLD_CORNER = new Vector317();
+var TOOLTIP_PROJECTED = new Vector317();
+var TOOLTIP_RAY_ORIGIN = new Vector317();
+var TOOLTIP_RAY_FAR = new Vector317();
+var TOOLTIP_RAY_DIRECTION = new Vector317();
 var TOOLTIP_RAY = new Ray();
 var TOOLTIP_PLANE = new Plane();
-var TOOLTIP_INTERSECTION = new Vector316();
-var TOOLTIP_PLANE_NORMAL = new Vector316();
-var TOOLTIP_PLANE_POINT = new Vector316();
+var TOOLTIP_INTERSECTION = new Vector317();
+var TOOLTIP_PLANE_NORMAL = new Vector317();
+var TOOLTIP_PLANE_POINT = new Vector317();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  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);
+  const safeSize = Number.isFinite(size) ? MathUtils9.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(MathUtils9.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -12070,39 +12223,39 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return MathUtils8.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return MathUtils9.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = MathUtils8.clamp(
+  const safeWidth = MathUtils9.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = MathUtils8.clamp(
+  const safeHeight = MathUtils9.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(MathUtils8.degToRad(safeWidth) / 2),
-    Math.tan(MathUtils8.degToRad(safeHeight) / 2)
+    Math.tan(MathUtils9.degToRad(safeWidth) / 2),
+    Math.tan(MathUtils9.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 = MathUtils8.degToRad(position.pitch);
-  const yaw = MathUtils8.degToRad(position.yaw);
-  const localUp = new Vector316(
+  const pitch = MathUtils9.degToRad(position.pitch);
+  const yaw = MathUtils9.degToRad(position.yaw);
+  const localUp = new Vector317(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
   const localRight = localUp.clone().cross(inward).normalize();
   const basis = new Matrix44().makeBasis(localRight, localUp, inward);
-  return new Quaternion3().setFromRotationMatrix(basis);
+  return new Quaternion4().setFromRotationMatrix(basis);
 }
 function makeInteractionEvent(id, position, event) {
   return {
@@ -12115,7 +12268,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return MathUtils8.radToDeg(aVector.angleTo(bVector));
+  return MathUtils9.radToDeg(aVector.angleTo(bVector));
 }
 var DRAG_POINTER = new Vector24();
 var DRAG_RAYCASTER = new Raycaster2();
@@ -13760,10 +13913,10 @@ import {
 } from "three";
 
 // src/hotspot/audio-spatial.ts
-import { MathUtils as MathUtils9, Vector3 as Vector317 } from "three";
-var LOOK_DIR = new Vector317();
-var SOURCE_DIR = new Vector317();
-var RIGHT_DIR = new Vector317();
+import { MathUtils as MathUtils10, Vector3 as Vector318 } from "three";
+var LOOK_DIR = new Vector318();
+var SOURCE_DIR = new Vector318();
+var RIGHT_DIR = new Vector318();
 function clampAudioVolume(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -13788,11 +13941,11 @@ function lookRangeGain(angleDegrees, range) {
 function audioSpatialFromView(camera, position, range) {
   camera.getWorldDirection(LOOK_DIR);
   SOURCE_DIR.copy(panoPositionToVector3(position)).normalize();
-  const angleDegrees = MathUtils9.radToDeg(
-    Math.acos(MathUtils9.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
+  const angleDegrees = MathUtils10.radToDeg(
+    Math.acos(MathUtils10.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
   );
   RIGHT_DIR.set(1, 0, 0).applyQuaternion(camera.quaternion);
-  const pan = MathUtils9.clamp(
+  const pan = MathUtils10.clamp(
     Math.atan2(SOURCE_DIR.dot(RIGHT_DIR), SOURCE_DIR.dot(LOOK_DIR)) / (Math.PI / 2),
     -1,
     1
@@ -14104,7 +14257,7 @@ import {
   CanvasTexture as CanvasTexture3,
   ClampToEdgeWrapping as ClampToEdgeWrapping8,
   LinearFilter as LinearFilter10,
-  MathUtils as MathUtils10,
+  MathUtils as MathUtils11,
   PerspectiveCamera as PerspectiveCamera9,
   SRGBColorSpace as SRGBColorSpace9
 } from "three";
@@ -14179,7 +14332,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(MathUtils10.degToRad(angle) / 2) / Math.tan(MathUtils10.degToRad(fov) / 2) * viewportHeight;
+  return Math.tan(MathUtils11.degToRad(angle) / 2) / Math.tan(MathUtils11.degToRad(fov) / 2) * viewportHeight;
 }
 function snapRasterLongSide(screenLong, layoutLong) {
   if (!(screenLong > 0)) {
@@ -14654,10 +14807,10 @@ import {
   DoubleSide as DoubleSide5,
   Float32BufferAttribute as Float32BufferAttribute2,
   Matrix4 as Matrix45,
-  Quaternion as Quaternion4,
+  Quaternion as Quaternion5,
   ShapeUtils,
   Vector2 as Vector26,
-  Vector3 as Vector318
+  Vector3 as Vector319
 } from "three";
 import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
@@ -14731,7 +14884,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new Vector318()];
+  const candidates = [new Vector319()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14755,7 +14908,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new Vector318(0, 1, 0)) || polygonContainsDirection(normalized, new Vector318(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new Vector319(0, 1, 0)) || polygonContainsDirection(normalized, new Vector319(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14766,7 +14919,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(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]);
 }
@@ -14775,12 +14928,12 @@ 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 Vector318(
+  const localUp = new Vector319(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new Quaternion4().setFromRotationMatrix(
+  return new Quaternion5().setFromRotationMatrix(
     new Matrix45().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
@@ -14788,7 +14941,7 @@ function makeWorldToLocal(center) {
   return new Matrix45().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new Vector318(1, 1, 1)
+    new Vector319(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -15014,10 +15167,10 @@ function PolygonHotspot({
 // src/hotspot/polyline-hotspot.tsx
 import { useEffect as useEffect32, useMemo as useMemo21, useRef as useRef33 } from "react";
 import {
-  MathUtils as MathUtils11,
+  MathUtils as MathUtils12,
   Matrix4 as Matrix46,
-  Quaternion as Quaternion5,
-  Vector3 as Vector319
+  Quaternion as Quaternion6,
+  Vector3 as Vector320
 } from "three";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
@@ -15044,21 +15197,21 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector319()
+    new Vector320()
   );
   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 = MathUtils11.degToRad(position.pitch);
-  const yaw = MathUtils11.degToRad(position.yaw);
-  const localUp = new Vector319(
+  const pitch = MathUtils12.degToRad(position.pitch);
+  const yaw = MathUtils12.degToRad(position.yaw);
+  const localUp = new Vector320(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new Quaternion5().setFromRotationMatrix(
+  return new Quaternion6().setFromRotationMatrix(
     new Matrix46().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
@@ -15066,7 +15219,7 @@ function makeWorldToLocal2(center) {
   return new Matrix46().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new Vector319(1, 1, 1)
+    new Vector320(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -15081,7 +15234,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(MathUtils11.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(MathUtils12.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -15854,65 +16007,7 @@ import {
   useRef as useRef35,
   useState as useState22
 } from "react";
-
-// src/gyro-orientation.ts
-import { Euler as Euler4, MathUtils as MathUtils12, Quaternion as Quaternion6, Vector3 as Vector320 } from "three";
-var DEVICE_FORWARD_CORRECTION = new Quaternion6().setFromAxisAngle(
-  new Vector320(1, 0, 0),
-  -Math.PI / 2
-);
-var SCREEN_AXIS = new Vector320(0, 0, 1);
-function getScreenOrientationAngle() {
-  if (typeof window === "undefined") {
-    return 0;
-  }
-  const angle = window.screen.orientation?.angle;
-  if (Number.isFinite(angle)) {
-    return angle;
-  }
-  const legacyAngle = window.orientation;
-  return Number.isFinite(legacyAngle) ? legacyAngle : 0;
-}
-function deviceOrientationToQuaternion(sample, screenOrientation) {
-  const alpha = Number.isFinite(sample.compassHeading) ? 360 - sample.compassHeading : sample.alpha;
-  const deviceEuler = new Euler4(
-    MathUtils12.degToRad(sample.beta),
-    MathUtils12.degToRad(alpha),
-    MathUtils12.degToRad(-sample.gamma),
-    "YXZ"
-  );
-  const screenCorrection = new Quaternion6().setFromAxisAngle(
-    SCREEN_AXIS,
-    -MathUtils12.degToRad(screenOrientation)
-  );
-  return new Quaternion6().setFromEuler(deviceEuler).multiply(DEVICE_FORWARD_CORRECTION).multiply(screenCorrection).normalize();
-}
-function quaternionToGyroPose(quaternion) {
-  const euler = new Euler4().setFromQuaternion(quaternion, "YXZ");
-  return {
-    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 Euler4(
-      MathUtils12.degToRad(pitch),
-      MathUtils12.degToRad(-yaw),
-      0,
-      "YXZ"
-    )
-  );
-  return targetQuaternion.multiply(deviceQuaternion.clone().invert()).normalize();
-}
-function applyGyroCalibration(deviceQuaternion, calibration) {
-  return quaternionToGyroPose(
-    calibration.clone().multiply(deviceQuaternion).normalize()
-  );
-}
-
-// src/gyro.tsx
+import { Quaternion as Quaternion7 } from "three";
 var deviceOrientationPermissionState = "unknown";
 function isMobileDevice() {
   if (typeof navigator === "undefined") {
@@ -15920,12 +16015,6 @@ function isMobileDevice() {
   }
   return /Android|iPad|iPhone|iPod|Mobile/i.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
 }
-function normalizeYaw2(value) {
-  return ((value + 180) % 360 + 360) % 360 - 180;
-}
-function shortestYawDelta2(from, to) {
-  return normalizeYaw2(to - from);
-}
 function finiteOr(value, fallback) {
   return Number.isFinite(value) ? value : fallback;
 }
@@ -15935,9 +16024,6 @@ function resolveFriction(value) {
 function resolveSoftstart(value) {
   return Math.max(finiteOr(value, 0.5), 0);
 }
-function posesNearlyEqual(a, b) {
-  return Math.abs(shortestYawDelta2(a.yaw, b.yaw)) < 1e-4 && Math.abs(a.pitch - b.pitch) < 1e-4 && Math.abs(a.roll - b.roll) < 1e-4;
-}
 var Gyro = forwardRef3(function Gyro2({
   enabled = false,
   camroll = true,
@@ -15957,19 +16043,30 @@ var Gyro = forwardRef3(function Gyro2({
   const eventBus = useContext25(PanoEventBusContext);
   const { gl } = useThree25();
   const [internallyDisabled, setInternallyDisabled] = useState22(false);
+  const [available, setAvailableState] = useState22(false);
   const availableRef = useRef35(false);
   const availabilityReportedRef = useRef35(null);
   const activeRef = useRef35(false);
   const permissionRef = useRef35(deviceOrientationPermissionState);
   const absoluteEventSourceRef = useRef35(null);
-  const rawQuaternionRef = useRef35(null);
-  const calibrationRef = useRef35(null);
+  const rawQuaternionRef = useRef35(new Quaternion7());
+  const hasRawQuaternionRef = useRef35(false);
+  const calibrationRef = useRef35(new Quaternion7());
+  const hasCalibrationRef = useRef35(false);
+  const calibratedQuaternionRef = useRef35(new Quaternion7());
   const absoluteOffsetRef = useRef35({ yaw: 0, pitch: 0 });
   const screenAngleRef = useRef35(getScreenOrientationAngle());
   const startPoseRef = useRef35(null);
   const enabledAtRef = useRef35(0);
   const filteredPoseRef = useRef35(null);
   const lastAppliedPoseRef = useRef35(null);
+  const lastSamplePoseRef = useRef35(null);
+  const lastSampleAtRef = useRef35(null);
+  const previousYawRef = useRef35(void 0);
+  const absoluteRef = useRef35(absolute);
+  const northRef = useRef35(north);
+  absoluteRef.current = absolute;
+  northRef.current = north;
   const callbacksRef = useRef35({
     onAvailable,
     onUnavailable,
@@ -16015,13 +16112,14 @@ var Gyro = forwardRef3(function Gyro2({
     [eventBus]
   );
   const setAvailable = useCallback9(
-    (available) => {
-      availableRef.current = available;
-      if (availabilityReportedRef.current === available) {
+    (nextAvailable) => {
+      availableRef.current = nextAvailable;
+      setAvailableState(nextAvailable);
+      if (availabilityReportedRef.current === nextAvailable) {
         return;
       }
-      availabilityReportedRef.current = available;
-      emit(available ? "gyroavailable" : "gyrounavailable");
+      availabilityReportedRef.current = nextAvailable;
+      emit(nextAvailable ? "gyroavailable" : "gyrounavailable");
     },
     [emit]
   );
@@ -16064,37 +16162,54 @@ var Gyro = forwardRef3(function Gyro2({
       controlsRef.current?.setGyroActive(false);
       emit("gyrodisable");
     }
-    rawQuaternionRef.current = null;
+    hasRawQuaternionRef.current = false;
     absoluteEventSourceRef.current = null;
-    calibrationRef.current = null;
+    hasCalibrationRef.current = false;
     filteredPoseRef.current = null;
     lastAppliedPoseRef.current = null;
+    lastSamplePoseRef.current = null;
+    lastSampleAtRef.current = null;
+    previousYawRef.current = void 0;
   }, [controlsRef, emit]);
-  const resetSensor = useCallback9(
+  const anchorToView = useCallback9(
     (yaw, pitch) => {
-      const rawQuaternion = rawQuaternionRef.current;
-      if (!rawQuaternion) {
+      if (!hasRawQuaternionRef.current) {
         return;
       }
-      const view = controlsRef.current?.getTargetView();
-      const targetYaw = finiteOr(yaw, view?.yaw ?? 0);
-      const targetPitch = finiteOr(pitch, view?.pitch ?? 0);
-      if (absolute) {
-        const rawPose = quaternionToGyroPose(rawQuaternion);
+      if (absoluteRef.current) {
+        const rawPose = quaternionToGyroPose(
+          rawQuaternionRef.current,
+          previousYawRef.current
+        );
+        previousYawRef.current = rawPose.yaw;
         absoluteOffsetRef.current = {
-          yaw: shortestYawDelta2(
-            rawPose.yaw + finiteOr(north, 0),
-            targetYaw
+          yaw: shortestGyroYawDelta(
+            rawPose.yaw + finiteOr(northRef.current, 0),
+            yaw
           ),
-          pitch: targetPitch - rawPose.pitch
+          pitch: pitch - rawPose.pitch
         };
       } else {
-        calibrationRef.current = createRelativeCalibration(
-          rawQuaternion,
-          targetYaw,
-          targetPitch
+        createRelativeCalibration(
+          rawQuaternionRef.current,
+          yaw,
+          pitch,
+          calibrationRef.current
         );
+        hasCalibrationRef.current = true;
       }
+    },
+    []
+  );
+  const resetSensor = useCallback9(
+    (yaw, pitch) => {
+      if (!hasRawQuaternionRef.current) {
+        return;
+      }
+      const view = controlsRef.current?.getTargetView();
+      const targetYaw = finiteOr(yaw, view?.yaw ?? 0);
+      const targetPitch = finiteOr(pitch, view?.pitch ?? 0);
+      anchorToView(targetYaw, targetPitch);
       startPoseRef.current = {
         yaw: targetYaw,
         pitch: targetPitch,
@@ -16102,8 +16217,10 @@ var Gyro = forwardRef3(function Gyro2({
       };
       enabledAtRef.current = performance.now();
       filteredPoseRef.current = null;
+      lastSamplePoseRef.current = null;
+      lastSampleAtRef.current = null;
     },
-    [absolute, controlsRef, north]
+    [anchorToView, controlsRef]
   );
   useImperativeHandle3(
     ref,
@@ -16123,9 +16240,6 @@ var Gyro = forwardRef3(function Gyro2({
   useEffect35(() => {
     const supported = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined" && (desktopSupport || isMobileDevice());
     setAvailable(supported);
-    return () => {
-      availableRef.current = false;
-    };
   }, [desktopSupport, setAvailable]);
   useEffect35(() => {
     controlsRef.current?.setGyroTouchMode(touchMode);
@@ -16145,7 +16259,7 @@ var Gyro = forwardRef3(function Gyro2({
     };
   }, [enabled, gl, internallyDisabled, touchMode]);
   useEffect35(() => {
-    if (!enabled || internallyDisabled || !availableRef.current) {
+    if (!enabled || internallyDisabled || !available) {
       deactivate();
       return;
     }
@@ -16174,10 +16288,12 @@ var Gyro = forwardRef3(function Gyro2({
         gamma: event.gamma,
         compassHeading: absolute && hasCompassHeading ? compassEvent.webkitCompassHeading : void 0
       };
-      rawQuaternionRef.current = deviceOrientationToQuaternion(
+      deviceOrientationToQuaternion(
         sample,
-        screenAngleRef.current
+        screenAngleRef.current,
+        rawQuaternionRef.current
       );
+      hasRawQuaternionRef.current = true;
       if (!activeRef.current) {
         const view = controlsRef.current?.getTargetView() ?? {
           yaw: 0,
@@ -16185,11 +16301,13 @@ var Gyro = forwardRef3(function Gyro2({
           fov: 75
         };
         if (!absolute) {
-          calibrationRef.current = createRelativeCalibration(
+          createRelativeCalibration(
             rawQuaternionRef.current,
             view.yaw,
-            view.pitch
+            view.pitch,
+            calibrationRef.current
           );
+          hasCalibrationRef.current = true;
         }
         absoluteOffsetRef.current = { yaw: 0, pitch: 0 };
         startPoseRef.current = { ...view, roll: 0 };
@@ -16237,6 +16355,7 @@ var Gyro = forwardRef3(function Gyro2({
     };
   }, [
     absolute,
+    available,
     controlsRef,
     deactivate,
     emit,
@@ -16245,28 +16364,84 @@ var Gyro = forwardRef3(function Gyro2({
     requestPermission
   ]);
   useFrame20((_, deltaSeconds) => {
-    const rawQuaternion = rawQuaternionRef.current;
-    if (!activeRef.current || !rawQuaternion) {
+    if (!activeRef.current || !hasRawQuaternionRef.current) {
       return;
     }
     let targetPose;
     if (absolute) {
-      const rawPose = quaternionToGyroPose(rawQuaternion);
+      const rawPose = quaternionToGyroPose(
+        rawQuaternionRef.current,
+        previousYawRef.current
+      );
+      previousYawRef.current = rawPose.yaw;
       targetPose = {
         yaw: rawPose.yaw + finiteOr(north, 0) + absoluteOffsetRef.current.yaw,
         pitch: rawPose.pitch + absoluteOffsetRef.current.pitch,
         roll: rawPose.roll
       };
     } else {
-      const calibration = calibrationRef.current;
-      if (!calibration) {
+      if (!hasCalibrationRef.current) {
         return;
       }
-      targetPose = applyGyroCalibration(rawQuaternion, calibration);
+      targetPose = applyGyroCalibration(
+        rawQuaternionRef.current,
+        calibrationRef.current,
+        calibratedQuaternionRef.current,
+        previousYawRef.current
+      );
+      previousYawRef.current = targetPose.yaw;
     }
     if (!camroll) {
       targetPose.roll = 0;
     }
+    const sampleAt = performance.now();
+    const previousSample = lastSamplePoseRef.current;
+    const previousSampleAt = lastSampleAtRef.current;
+    if (previousSample && previousSampleAt !== null) {
+      const angleDelta = gyroPoseAngleDelta(previousSample, targetPose);
+      const sampleDeltaSeconds = Math.max(
+        (sampleAt - previousSampleAt) / 1e3,
+        deltaSeconds
+      );
+      if (shouldReanchorGyro(angleDelta, sampleDeltaSeconds)) {
+        const view = controlsRef.current?.getTargetView() ?? {
+          yaw: targetPose.yaw,
+          pitch: targetPose.pitch,
+          fov: 75
+        };
+        anchorToView(view.yaw, view.pitch);
+        if (absolute) {
+          const rawPose = quaternionToGyroPose(
+            rawQuaternionRef.current,
+            previousYawRef.current
+          );
+          previousYawRef.current = rawPose.yaw;
+          targetPose = {
+            yaw: rawPose.yaw + finiteOr(north, 0) + absoluteOffsetRef.current.yaw,
+            pitch: rawPose.pitch + absoluteOffsetRef.current.pitch,
+            roll: rawPose.roll
+          };
+        } else {
+          targetPose = applyGyroCalibration(
+            rawQuaternionRef.current,
+            calibrationRef.current,
+            calibratedQuaternionRef.current,
+            previousYawRef.current
+          );
+          previousYawRef.current = targetPose.yaw;
+        }
+        if (!camroll) {
+          targetPose.roll = 0;
+        }
+        filteredPoseRef.current = {
+          yaw: view.yaw,
+          pitch: view.pitch,
+          roll: targetPose.roll
+        };
+      }
+    }
+    lastSamplePoseRef.current = { ...targetPose };
+    lastSampleAtRef.current = sampleAt;
     const softstartMs = resolveSoftstart(softstart) * 1e3;
     const startPose = startPoseRef.current;
     if (startPose && softstartMs > 0) {
@@ -16275,9 +16450,9 @@ var Gyro = forwardRef3(function Gyro2({
         1
       );
       targetPose = {
-        yaw: startPose.yaw + shortestYawDelta2(startPose.yaw, targetPose.yaw) * progress,
+        yaw: startPose.yaw + shortestGyroYawDelta(startPose.yaw, targetPose.yaw) * progress,
         pitch: startPose.pitch + (targetPose.pitch - startPose.pitch) * progress,
-        roll: startPose.roll + shortestYawDelta2(startPose.roll, targetPose.roll) * progress
+        roll: startPose.roll + shortestGyroYawDelta(startPose.roll, targetPose.roll) * progress
       };
       if (progress === 1) {
         startPoseRef.current = null;
@@ -16287,9 +16462,9 @@ var Gyro = forwardRef3(function Gyro2({
     const retention = resolveFriction(friction);
     const follow = retention === 0 ? 1 : 1 - Math.pow(retention, deltaSeconds * 60);
     const filteredPose = previous ? {
-      yaw: previous.yaw + shortestYawDelta2(previous.yaw, targetPose.yaw) * follow,
+      yaw: previous.yaw + shortestGyroYawDelta(previous.yaw, targetPose.yaw) * follow,
       pitch: previous.pitch + (targetPose.pitch - previous.pitch) * follow,
-      roll: previous.roll + shortestYawDelta2(previous.roll, targetPose.roll) * follow
+      roll: previous.roll + shortestGyroYawDelta(previous.roll, targetPose.roll) * follow
     } : targetPose;
     filteredPoseRef.current = filteredPose;
     if (controlsRef.current?.isInteractionLocked()) {
@@ -16300,7 +16475,7 @@ var Gyro = forwardRef3(function Gyro2({
       lastAppliedPoseRef.current = { ...filteredPose };
       controlsRef.current?.setGyroPose(filteredPose);
     }
-  });
+  }, -1);
   return null;
 });