@ericchen1990/pano-view 3.6.4 → 3.6.6

package/dist/index.cjs

@@ -2591,7 +2591,136 @@ var PanoEventBusContext = (0, import_react2.createContext)(null);
 var import_fiber = require("@react-three/fiber");
 var import_xr = require("@react-three/xr");
 var import_react3 = require("react");
+var import_three2 = require("three");
+
+// src/gyro-orientation.ts
 var import_three = require("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 import_three.Quaternion().setFromAxisAngle(
+  new import_three.Vector3(1, 0, 0),
+  -Math.PI / 2
+);
+var SCREEN_AXIS = new import_three.Vector3(0, 0, 1);
+var LOOK_LOCAL = new import_three.Vector3(0, 0, -1);
+var UP_LOCAL = new import_three.Vector3(0, 1, 0);
+var scratchEuler = new import_three.Euler(0, 0, 0, "YXZ");
+var scratchScreenCorrection = new import_three.Quaternion();
+var scratchInvert = new import_three.Quaternion();
+var scratchWithoutRoll = new import_three.Quaternion();
+var scratchForward = new import_three.Vector3();
+var scratchUp = new import_three.Vector3();
+var scratchExpectedUp = new import_three.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(
+    import_three.MathUtils.degToRad(sample.beta),
+    import_three.MathUtils.degToRad(alpha),
+    import_three.MathUtils.degToRad(-sample.gamma),
+    "YXZ"
+  );
+  scratchScreenCorrection.setFromAxisAngle(
+    SCREEN_AXIS,
+    -import_three.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(import_three.MathUtils.clamp(scratchForward.y, -1, 1));
+  const pitch = import_three.MathUtils.radToDeg(pitchRad);
+  const nearZenith = Math.abs(pitch) >= ZENITH_PITCH_DEG;
+  const yaw = nearZenith && previousYaw !== void 0 ? previousYaw : import_three.MathUtils.radToDeg(Math.atan2(scratchForward.x, -scratchForward.z));
+  scratchEuler.set(pitchRad, -import_three.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 = import_three.MathUtils.clamp(scratchExpectedUp.dot(scratchUp), -1, 1);
+  const roll = import_three.MathUtils.radToDeg(Math.atan2(sinTwist, cosTwist));
+  return {
+    yaw: normalizeGyroYaw(yaw),
+    pitch,
+    roll
+  };
+}
+function createRelativeCalibration(deviceQuaternion, yaw, pitch, target) {
+  scratchInvert.copy(deviceQuaternion).invert();
+  scratchEuler.set(
+    import_three.MathUtils.degToRad(pitch),
+    import_three.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;
@@ -2608,7 +2737,7 @@ function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
 function normalizeYaw(yaw) {
-  return import_three.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
+  return import_three2.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
 }
 function shortestYawDelta(from, to) {
   return normalizeYaw(to - from);
@@ -2656,6 +2785,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
   const interactionLockCountRef = (0, import_react3.useRef)(0);
   const keyboardActiveRef = (0, import_react3.useRef)(false);
   const gyroActiveRef = (0, import_react3.useRef)(false);
+  const gyroPoseDrivingRef = (0, import_react3.useRef)(false);
   const gyroPoseRef = (0, import_react3.useRef)({ yaw: 0, pitch: 0, roll: 0 });
   const gyroOffsetRef = (0, import_react3.useRef)({ yaw: 0, pitch: 0 });
   const gyroTouchModeRef = (0, import_react3.useRef)("full");
@@ -2664,8 +2794,8 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
   const optionsRef = (0, import_react3.useRef)(options);
   const eventBusRef = (0, import_react3.useRef)(eventBus);
   const lastEmittedViewRef = (0, import_react3.useRef)(null);
-  const eulerRef = (0, import_react3.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
-  const xrEulerRef = (0, import_react3.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
+  const eulerRef = (0, import_react3.useRef)(new import_three2.Euler(0, 0, 0, "YXZ"));
+  const xrEulerRef = (0, import_react3.useRef)(new import_three2.Euler(0, 0, 0, "YXZ"));
   const baseLimitsRef = (0, import_react3.useRef)(viewLimits);
   const sceneLimitsRef = (0, import_react3.useRef)(void 0);
   const legacyFovRef = (0, import_react3.useRef)({ minFov, maxFov });
@@ -2994,6 +3124,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
         gyroOffsetRef.current = { yaw: 0, pitch: 0 };
         stopVelocity();
         if (!active) {
+          gyroPoseDrivingRef.current = false;
           cameraRollRef.current = 0;
           dirtyRef.current = true;
         }
@@ -3003,18 +3134,35 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
           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;
@@ -3052,7 +3200,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     setView(initialView);
   }, [initialView.fov, initialView.pitch, initialView.yaw]);
   (0, import_fiber.useFrame)((_, deltaSeconds) => {
-    if (!(camera instanceof import_three.PerspectiveCamera)) {
+    if (!(camera instanceof import_three2.PerspectiveCamera)) {
       return;
     }
     if (xrSessionRef.current && gl.xr.isPresenting) {
@@ -3060,9 +3208,9 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       const xrCamera = gl.xr.getCamera();
       xrEulerRef.current.setFromQuaternion(xrCamera.quaternion, "YXZ");
       const nextView2 = {
-        yaw: normalizeYaw(-import_three.MathUtils.radToDeg(xrEulerRef.current.y)),
+        yaw: normalizeYaw(-import_three2.MathUtils.radToDeg(xrEulerRef.current.y)),
         pitch: clamp(
-          import_three.MathUtils.radToDeg(xrEulerRef.current.x),
+          import_three2.MathUtils.radToDeg(xrEulerRef.current.x),
           -MAX_PITCH,
           MAX_PITCH
         ),
@@ -3092,14 +3240,16 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       const completed = progress === 1;
       viewRef.current = completed ? { ...navigation.target } : nextView2;
       eulerRef.current.set(
-        import_three.MathUtils.degToRad(viewRef.current.pitch),
-        import_three.MathUtils.degToRad(-viewRef.current.yaw),
-        import_three.MathUtils.degToRad(cameraRollRef.current),
+        import_three2.MathUtils.degToRad(viewRef.current.pitch),
+        import_three2.MathUtils.degToRad(-viewRef.current.yaw),
+        import_three2.MathUtils.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;
@@ -3168,7 +3318,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       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 = {
@@ -3179,14 +3329,16 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     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(
-      import_three.MathUtils.degToRad(viewRef.current.pitch),
-      import_three.MathUtils.degToRad(-viewRef.current.yaw),
-      import_three.MathUtils.degToRad(cameraRollRef.current),
+      import_three2.MathUtils.degToRad(viewRef.current.pitch),
+      import_three2.MathUtils.degToRad(-viewRef.current.yaw),
+      import_three2.MathUtils.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;
@@ -3738,7 +3890,7 @@ var import_fiber4 = require("@react-three/fiber");
 var import_react9 = require("react");
 
 // src/pointer-drag.ts
-var import_three2 = require("three");
+var import_three3 = require("three");
 var DEFAULT_POINTER_DRAG_SPEED = 0.35;
 var POINTER_FOLLOW_TIME_SECONDS = 0.01;
 var MIN_VELOCITY_SAMPLE_SECONDS = 1 / 120;
@@ -3767,18 +3919,18 @@ var PointerDragAnchor = class {
     this.origin = origin;
     this.rect = rect;
     this.projection = projection;
-    this.local = new import_three2.Vector3();
-    this.rotation = new import_three2.Euler(0, 0, 0, "YXZ");
+    this.local = new import_three3.Vector3();
+    this.rotation = new import_three3.Euler(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(
-      import_three2.MathUtils.degToRad(origin.pitch),
-      import_three2.MathUtils.degToRad(-origin.yaw),
+      import_three3.MathUtils.degToRad(origin.pitch),
+      import_three3.MathUtils.degToRad(-origin.yaw),
       0,
       "YXZ"
     ));
-    const originPitch = import_three2.MathUtils.degToRad(origin.pitch);
+    const originPitch = import_three3.MathUtils.degToRad(origin.pitch);
     const roots = this.pitchRoots(startRay, originPitch);
     this.useSupplementary = Math.abs(roots.supplementary - originPitch) + 1e-6 < Math.abs(roots.principal - originPitch);
   }
@@ -3791,7 +3943,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(import_three2.MathUtils.clamp(
+    const latitude = Math.asin(import_three3.MathUtils.clamp(
       this.anchor.y / Math.max(Math.hypot(ray.y, ray.z), 1e-12),
       -1,
       1
@@ -3811,28 +3963,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 = import_three2.MathUtils.degToRad(this.origin.pitch);
+    const originPitch = import_three3.MathUtils.degToRad(this.origin.pitch);
     const roots = this.pitchRoots(ray, originPitch);
-    const exactPitch = import_three2.MathUtils.clamp(
+    const exactPitch = import_three3.MathUtils.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 = import_three2.MathUtils.smoothstep(fromPole, import_three2.MathUtils.degToRad(8), import_three2.MathUtils.degToRad(18));
+    const pointerLock = import_three3.MathUtils.smoothstep(fromPole, import_three3.MathUtils.degToRad(8), import_three3.MathUtils.degToRad(18));
     const pitchTurn = Math.atan2(Math.sin(exactPitch - stablePitch), Math.cos(exactPitch - stablePitch));
-    const pitch = import_three2.MathUtils.clamp(
+    const pitch = import_three3.MathUtils.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 = import_three2.MathUtils.degToRad(this.origin.yaw) + Math.atan2(ray.x, -ray.z) - this.baseAzimuth;
+    const stableYaw = import_three3.MathUtils.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 = import_three2.MathUtils.radToDeg(stableYaw + pointerLock * yawTurn);
-    return { yaw: normalizeViewYaw(yaw - this.origin.yaw), pitch: import_three2.MathUtils.radToDeg(pitch) - this.origin.pitch };
+    const yaw = import_three3.MathUtils.radToDeg(stableYaw + pointerLock * yawTurn);
+    return { yaw: normalizeViewYaw(yaw - this.origin.yaw), pitch: import_three3.MathUtils.radToDeg(pitch) - this.origin.pitch };
   }
 };
 function createPointerDrag(camera, element, runtime, source) {
@@ -3855,7 +4007,7 @@ function createPointerDrag(camera, element, runtime, source) {
     pending = void 0;
     revision = handle?.getPointerDragState().revision ?? -1;
     anchor = void 0;
-    if (!(camera instanceof import_three2.PerspectiveCamera) || !handle?.getPointerDragState().anchored) return;
+    if (!(camera instanceof import_three3.PerspectiveCamera) || !handle?.getPointerDragState().anchored) return;
     const rect = element.getBoundingClientRect();
     projectionKey = key(rect);
     anchor = new PointerDragAnchor(point, handle.getView(), rect, camera.clone());
@@ -5584,10 +5736,10 @@ function usePanoOverlayHost(isFullscreen) {
 // src/panorama-event-surface.tsx
 var import_fiber7 = require("@react-three/fiber");
 var import_react16 = require("react");
-var import_three4 = require("three");
+var import_three5 = require("three");
 
 // src/hotspot/coordinates.ts
-var import_three3 = require("three");
+var import_three4 = require("three");
 
 // src/hotspot/types.ts
 var MAX_HOTSPOT_PITCH = 90;
@@ -5610,13 +5762,13 @@ function normalizePanoYaw(yaw) {
   if (!Number.isFinite(yaw)) {
     return 0;
   }
-  return import_three3.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
+  return import_three4.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
 }
 function clampPanoPitch(pitch) {
   if (!Number.isFinite(pitch)) {
     return 0;
   }
-  const clamped = import_three3.MathUtils.clamp(
+  const clamped = import_three4.MathUtils.clamp(
     pitch,
     -MAX_HOTSPOT_PITCH,
     MAX_HOTSPOT_PITCH
@@ -5633,10 +5785,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 = import_three3.MathUtils.degToRad(normalized.yaw);
-  const pitch = import_three3.MathUtils.degToRad(normalized.pitch);
+  const yaw = import_three4.MathUtils.degToRad(normalized.yaw);
+  const pitch = import_three4.MathUtils.degToRad(normalized.pitch);
   const cosPitch = Math.cos(pitch);
-  return new import_three3.Vector3(
+  return new import_three4.Vector3(
     cosPitch * Math.sin(yaw) * safeRadius,
     Math.sin(pitch) * safeRadius,
     -cosPitch * Math.cos(yaw) * safeRadius
@@ -5648,9 +5800,9 @@ function vector3ToPanoPosition(vector) {
     return { yaw: 0, pitch: 0 };
   }
   return normalizePanoPosition({
-    yaw: import_three3.MathUtils.radToDeg(Math.atan2(vector.x, -vector.z)),
-    pitch: import_three3.MathUtils.radToDeg(
-      Math.asin(import_three3.MathUtils.clamp(vector.y / length, -1, 1))
+    yaw: import_three4.MathUtils.radToDeg(Math.atan2(vector.x, -vector.z)),
+    pitch: import_three4.MathUtils.radToDeg(
+      Math.asin(import_three4.MathUtils.clamp(vector.y / length, -1, 1))
     )
   });
 }
@@ -5689,9 +5841,9 @@ function PanoramaEventSurface() {
       return;
     }
     const element = gl.domElement;
-    const ndc = new import_three4.Vector2();
-    const raycaster = new import_three4.Raycaster();
-    const direction = new import_three4.Vector3();
+    const ndc = new import_three5.Vector2();
+    const raycaster = new import_three5.Raycaster();
+    const direction = new import_three5.Vector3();
     const handleContextMenu = (nativeEvent) => {
       const rect = element.getBoundingClientRect();
       if (rect.width <= 0 || rect.height <= 0) {
@@ -5743,7 +5895,7 @@ function PanoramaEventSurface() {
             depthTest: false,
             depthWrite: false,
             opacity: 0,
-            side: import_three4.BackSide,
+            side: import_three5.BackSide,
             transparent: true
           }
         )
@@ -7572,12 +7724,12 @@ function WebVRChromeBridge({ host }) {
 }
 
 // src/webvr/stereo-view.ts
-var import_three5 = require("three");
-var PROJECT = new import_three5.Vector3();
+var import_three6 = require("three");
+var PROJECT = new import_three6.Vector3();
 function createWebVRStereoView() {
   return {
     active: false,
-    stereo: new import_three5.StereoCamera()
+    stereo: new import_three6.StereoCamera()
   };
 }
 function isFallbackStereoMode(mode) {
@@ -7601,11 +7753,11 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 var import_fiber9 = require("@react-three/fiber");
 var import_xr2 = require("@react-three/xr");
 var import_react26 = require("react");
-var import_three6 = require("three");
+var import_three7 = require("three");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function PanoramaXROrigin() {
   const originRef = (0, import_react26.useRef)(null);
-  const localHeadPositionRef = (0, import_react26.useRef)(new import_three6.Vector3());
+  const localHeadPositionRef = (0, import_react26.useRef)(new import_three7.Vector3());
   const session2 = (0, import_xr2.useXR)((state) => state.session);
   const gl = (0, import_fiber9.useThree)((state) => state.gl);
   (0, import_fiber9.useFrame)(() => {
@@ -8355,7 +8507,7 @@ var import_react51 = require("react");
 // src/scenes.tsx
 var import_fiber18 = require("@react-three/fiber");
 var import_react38 = require("react");
-var import_three20 = require("three");
+var import_three21 = require("three");
 
 // src/scene-detail.tsx
 var import_react28 = require("react");
@@ -8427,12 +8579,12 @@ function isSnapshotTransition(preset) {
 // src/scene-transitions/snapshot-hold.tsx
 var import_fiber11 = require("@react-three/fiber");
 var import_react29 = require("react");
-var import_three9 = require("three");
+var import_three10 = require("three");
 
 // src/scene-transitions/overlay-utils.ts
-var import_three7 = require("three");
+var import_three8 = require("three");
 var OVERLAY_RENDER_ORDER = 1e4;
-var FULLSCREEN_PLANE = new import_three7.PlaneGeometry(1, 1);
+var FULLSCREEN_PLANE = new import_three8.PlaneGeometry(1, 1);
 function isPerspectiveCamera(camera) {
   return camera.isPerspectiveCamera === true;
 }
@@ -8451,7 +8603,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/snapshot-shaders.ts
-var import_three8 = require("three");
+var import_three9 = require("three");
 
 // src/scene-transitions/glsl.ts
 var GLSL_COMMON = `
@@ -8743,15 +8895,15 @@ var SNAPSHOT_FRAGMENT_SHADERS = {
   `)
 };
 function createSnapshotMaterial(preset, texture) {
-  return new import_three8.ShaderMaterial({
+  return new import_three9.ShaderMaterial({
     transparent: true,
     depthTest: false,
     depthWrite: false,
-    side: import_three8.DoubleSide,
+    side: import_three9.DoubleSide,
     uniforms: {
       map: { value: texture },
       progress: { value: 0 },
-      resolution: { value: new import_three8.Vector2(1, 1) }
+      resolution: { value: new import_three9.Vector2(1, 1) }
     },
     vertexShader: SNAPSHOT_VERTEX_SHADER,
     fragmentShader: SNAPSHOT_FRAGMENT_SHADERS[preset]
@@ -8763,7 +8915,7 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
 function SnapshotHold({ snapshot }) {
   const { camera, gl } = (0, import_fiber11.useThree)();
   const meshRef = (0, import_react29.useRef)(null);
-  const directionRef = (0, import_react29.useRef)(new import_three9.Vector3());
+  const directionRef = (0, import_react29.useRef)(new import_three10.Vector3());
   const material = (0, import_react29.useMemo)(
     () => createSnapshotMaterial("crossfade", snapshot.texture),
     [snapshot.texture]
@@ -8847,7 +8999,7 @@ function phaseAfterSnapshot(preset, hold) {
 // src/scene-transitions/particle-overlay.tsx
 var import_fiber12 = require("@react-three/fiber");
 var import_react30 = require("react");
-var import_three10 = require("three");
+var import_three11 = require("three");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
@@ -8901,8 +9053,8 @@ var PARTICLE_FRAGMENT_SHADER = `
   }
 `;
 function createParticleGeometry() {
-  const quad = new import_three10.PlaneGeometry(1, 1);
-  const geometry = new import_three10.InstancedBufferGeometry();
+  const quad = new import_three11.PlaneGeometry(1, 1);
+  const geometry = new import_three11.InstancedBufferGeometry();
   if (quad.index) {
     geometry.setIndex(quad.index.clone());
   }
@@ -8912,7 +9064,7 @@ function createParticleGeometry() {
   for (let i = 0; i < PARTICLE_COUNT; i += 1) {
     indexes[i] = i;
   }
-  geometry.setAttribute("instanceIndex", new import_three10.InstancedBufferAttribute(indexes, 1));
+  geometry.setAttribute("instanceIndex", new import_three11.InstancedBufferAttribute(indexes, 1));
   geometry.instanceCount = PARTICLE_COUNT;
   quad.dispose();
   return geometry;
@@ -8928,18 +9080,18 @@ function ParticleOverlay({
   const meshRef = (0, import_react30.useRef)(null);
   const startRef = (0, import_react30.useRef)(null);
   const finishedRef = (0, import_react30.useRef)(false);
-  const directionRef = (0, import_react30.useRef)(new import_three10.Vector3());
+  const directionRef = (0, import_react30.useRef)(new import_three11.Vector3());
   const geometry = (0, import_react30.useMemo)(() => createParticleGeometry(), []);
   const material = (0, import_react30.useMemo)(
-    () => new import_three10.ShaderMaterial({
+    () => new import_three11.ShaderMaterial({
       transparent: true,
       depthTest: false,
       depthWrite: false,
-      side: import_three10.DoubleSide,
+      side: import_three11.DoubleSide,
       uniforms: {
         map: { value: snapshot.texture },
         progress: { value: 0 },
-        grid: { value: new import_three10.Vector2(PARTICLE_GRID, PARTICLE_GRID) }
+        grid: { value: new import_three11.Vector2(PARTICLE_GRID, PARTICLE_GRID) }
       },
       vertexShader: PARTICLE_VERTEX_SHADER,
       fragmentShader: PARTICLE_FRAGMENT_SHADER
@@ -8985,7 +9137,7 @@ function ParticleOverlay({
 // src/scene-transitions/snapshot-overlay.tsx
 var import_fiber13 = require("@react-three/fiber");
 var import_react31 = require("react");
-var import_three11 = require("three");
+var import_three12 = require("three");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function SnapshotOverlay({
   snapshot,
@@ -8998,7 +9150,7 @@ function SnapshotOverlay({
   const meshRef = (0, import_react31.useRef)(null);
   const startRef = (0, import_react31.useRef)(null);
   const finishedRef = (0, import_react31.useRef)(false);
-  const directionRef = (0, import_react31.useRef)(new import_three11.Vector3());
+  const directionRef = (0, import_react31.useRef)(new import_three12.Vector3());
   const material = (0, import_react31.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
@@ -9089,11 +9241,11 @@ function TransitionOverlay(props) {
 // src/sphere.tsx
 var import_fiber14 = require("@react-three/fiber");
 var import_react33 = require("react");
-var import_three13 = require("three");
+var import_three14 = require("three");
 
 // src/pano-filter/pano-basic-material.tsx
 var import_react32 = require("react");
-var import_three12 = require("three");
+var import_three13 = require("three");
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -9260,7 +9412,7 @@ function injectPanoColorMatrixShader(shader) {
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function matrixUniforms(matrix) {
   return {
-    matrix: new import_three12.Matrix4().set(
+    matrix: new import_three13.Matrix4().set(
       matrix[0],
       matrix[1],
       matrix[2],
@@ -9278,7 +9430,7 @@ function matrixUniforms(matrix) {
       matrix[17],
       matrix[18]
     ),
-    offset: new import_three12.Vector4(matrix[4], matrix[9], matrix[14], matrix[19])
+    offset: new import_three13.Vector4(matrix[4], matrix[9], matrix[14], matrix[19])
   };
 }
 function PanoBasicMaterial({
@@ -9349,7 +9501,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       return;
     }
     let active = true;
-    const loader = new import_three13.TextureLoader();
+    const loader = new import_three14.TextureLoader();
     setTexture(null);
     loader.load(
       url,
@@ -9358,13 +9510,13 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three13.SRGBColorSpace;
-        loadedTexture.wrapS = import_three13.RepeatWrapping;
+        loadedTexture.colorSpace = import_three14.SRGBColorSpace;
+        loadedTexture.wrapS = import_three14.RepeatWrapping;
         loadedTexture.repeat.x = -1;
         loadedTexture.offset.x = 1;
         loadedTexture.anisotropy = anisotropy;
-        loadedTexture.magFilter = import_three13.LinearFilter;
-        loadedTexture.minFilter = generateMipmaps ? import_three13.LinearMipmapLinearFilter : import_three13.LinearFilter;
+        loadedTexture.magFilter = import_three14.LinearFilter;
+        loadedTexture.minFilter = generateMipmaps ? import_three14.LinearMipmapLinearFilter : import_three14.LinearFilter;
         loadedTexture.generateMipmaps = generateMipmaps;
         loadedTexture.needsUpdate = true;
         setTexture(loadedTexture);
@@ -9448,7 +9600,7 @@ function Sphere({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "mesh",
     {
-      rotation: [0, import_three13.MathUtils.degToRad(90 + yawOffset2), 0],
+      rotation: [0, import_three14.MathUtils.degToRad(90 + yawOffset2), 0],
       visible,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
@@ -9456,7 +9608,7 @@ function Sphere({
           PanoBasicMaterial,
           {
             map: displayTexture,
-            side: import_three13.BackSide,
+            side: import_three14.BackSide,
             toneMapped: false
           }
         )
@@ -9468,10 +9620,10 @@ function Sphere({
 // src/sphere-tile/sphere-tile.tsx
 var import_fiber16 = require("@react-three/fiber");
 var import_react36 = require("react");
-var import_three17 = require("three");
+var import_three18 = require("three");
 
 // src/tile/texture-manager.ts
-var import_three14 = require("three");
+var import_three15 = require("three");
 var EMPTY_TEXTURE_SNAPSHOT = {
   status: "idle",
   texture: null,
@@ -9479,7 +9631,7 @@ var EMPTY_TEXTURE_SNAPSHOT = {
 };
 var TileTextureManager = class {
   constructor(options) {
-    this.loader = new import_three14.TextureLoader();
+    this.loader = new import_three15.TextureLoader();
     this.entries = /* @__PURE__ */ new Map();
     this.queue = [];
     this.activeLoads = 0;
@@ -9651,11 +9803,11 @@ var TileTextureManager = class {
     }
   }
   configureTexture(texture) {
-    texture.colorSpace = import_three14.SRGBColorSpace;
-    texture.wrapS = import_three14.ClampToEdgeWrapping;
-    texture.wrapT = import_three14.ClampToEdgeWrapping;
-    texture.magFilter = import_three14.LinearFilter;
-    texture.minFilter = import_three14.LinearFilter;
+    texture.colorSpace = import_three15.SRGBColorSpace;
+    texture.wrapS = import_three15.ClampToEdgeWrapping;
+    texture.wrapT = import_three15.ClampToEdgeWrapping;
+    texture.magFilter = import_three15.LinearFilter;
+    texture.minFilter = import_three15.LinearFilter;
     texture.generateMipmaps = false;
     texture.anisotropy = Math.min(4, this.options.anisotropy);
     texture.needsUpdate = true;
@@ -9728,7 +9880,7 @@ function useSharedTileTextureManager() {
 
 // src/tile/texture-hooks.ts
 var import_react35 = require("react");
-var import_three15 = require("three");
+var import_three16 = require("three");
 function usePreviewTexture(url, anisotropy, onError) {
   const [texture, setTexture] = (0, import_react35.useState)(null);
   const onErrorRef = (0, import_react35.useRef)(onError);
@@ -9739,7 +9891,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       return;
     }
     let active = true;
-    const loader = new import_three15.TextureLoader();
+    const loader = new import_three16.TextureLoader();
     setTexture(null);
     loader.load(
       url,
@@ -9748,11 +9900,11 @@ function usePreviewTexture(url, anisotropy, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three15.SRGBColorSpace;
-        loadedTexture.wrapS = import_three15.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three15.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three15.LinearFilter;
-        loadedTexture.minFilter = import_three15.LinearFilter;
+        loadedTexture.colorSpace = import_three16.SRGBColorSpace;
+        loadedTexture.wrapS = import_three16.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three16.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three16.LinearFilter;
+        loadedTexture.minFilter = import_three16.LinearFilter;
         loadedTexture.generateMipmaps = false;
         loadedTexture.anisotropy = Math.min(4, anisotropy);
         loadedTexture.needsUpdate = true;
@@ -9801,7 +9953,7 @@ function useManagedTexture(manager, key, url, address) {
 }
 
 // src/sphere-tile/layout.ts
-var import_three16 = require("three");
+var import_three17 = require("three");
 function positiveInteger2(value, name) {
   if (!Number.isSafeInteger(value) || value <= 0) {
     throw new Error(`${name} must be a positive safe integer`);
@@ -9872,9 +10024,9 @@ function sphereTileRange(address) {
   };
 }
 function spherePoint(u, v, yawOffset2 = 0, radius = DEFAULT_PANORAMA_RADIUS) {
-  const yaw = (u - 0.5) * Math.PI * 2 + import_three16.MathUtils.degToRad(yawOffset2);
+  const yaw = (u - 0.5) * Math.PI * 2 + import_three17.MathUtils.degToRad(yawOffset2);
   const pitch = (0.5 - v) * Math.PI;
-  return new import_three16.Vector3(
+  return new import_three17.Vector3(
     Math.sin(yaw) * Math.cos(pitch) * radius,
     Math.sin(pitch) * radius,
     -Math.cos(yaw) * Math.cos(pitch) * radius
@@ -9888,7 +10040,7 @@ function sphereTileBounds(address, yawOffset2) {
     if (u > left && u < right) us.push(u);
   }
   const vs = top < 0.5 && bottom > 0.5 ? [top, 0.5, bottom] : [top, bottom];
-  return new import_three16.Box3().setFromPoints(
+  return new import_three17.Box3().setFromPoints(
     us.flatMap((u) => vs.map((v) => spherePoint(u, v, yawOffset2)))
   );
 }
@@ -9914,9 +10066,9 @@ function sphereTileGeometry(address, yawOffset2, radius = DEFAULT_PANORAMA_RADIU
       }
     }
   }
-  const geometry = new import_three16.BufferGeometry();
-  geometry.setAttribute("position", new import_three16.Float32BufferAttribute(positions, 3));
-  geometry.setAttribute("uv", new import_three16.Float32BufferAttribute(uvs, 2));
+  const geometry = new import_three17.BufferGeometry();
+  geometry.setAttribute("position", new import_three17.Float32BufferAttribute(positions, 3));
+  geometry.setAttribute("uv", new import_three17.Float32BufferAttribute(uvs, 2));
   geometry.setIndex(indices);
   geometry.computeBoundingSphere();
   return geometry;
@@ -9962,7 +10114,7 @@ function SpherePatch({
         PanoBasicMaterial,
         {
           map: texture,
-          side: import_three17.BackSide,
+          side: import_three18.BackSide,
           depthTest: false,
           depthWrite: false,
           toneMapped: false
@@ -10104,9 +10256,9 @@ function SphereTileSource({
   const targetKeysRef = (0, import_react36.useRef)([]);
   const scratch = (0, import_react36.useMemo)(
     () => ({
-      camera: new import_three17.PerspectiveCamera(),
-      frustum: new import_three17.Frustum(),
-      matrix: new import_three17.Matrix4(),
+      camera: new import_three18.PerspectiveCamera(),
+      frustum: new import_three18.Frustum(),
+      matrix: new import_three18.Matrix4(),
       quaternion: camera.quaternion.clone(),
       fov: NaN,
       width: 0,
@@ -10121,7 +10273,7 @@ function SphereTileSource({
     [camera, candidates]
   );
   (0, import_fiber16.useFrame)(() => {
-    if (!(camera instanceof import_three17.PerspectiveCamera)) return;
+    if (!(camera instanceof import_three18.PerspectiveCamera)) return;
     const now = performance.now(), dpr = gl.getPixelRatio();
     const managerChanged = scratch.manager !== manager;
     const loadModeChanged = scratch.loadMode !== loadMode;
@@ -10225,10 +10377,10 @@ function SphereTile({ multires, ...props }) {
 // src/tile/tile.tsx
 var import_fiber17 = require("@react-three/fiber");
 var import_react37 = require("react");
-var import_three19 = require("three");
+var import_three20 = require("three");
 
 // src/tile/face-layout.ts
-var import_three18 = require("three");
+var import_three19 = require("three");
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
 var CUBE_RADIUS = DEFAULT_PANORAMA_RADIUS;
@@ -10279,8 +10431,8 @@ function getFaceQuaternion(face) {
     return cached;
   }
   const transform = getFaceTransform(face);
-  const quaternion = new import_three18.Quaternion().setFromEuler(
-    new import_three18.Euler(...transform.rotation, "XYZ")
+  const quaternion = new import_three19.Quaternion().setFromEuler(
+    new import_three19.Euler(...transform.rotation, "XYZ")
   );
   faceQuaternionCache.set(face, quaternion);
   return quaternion;
@@ -10291,17 +10443,17 @@ function getTileBoundingBox(address, radius = CUBE_RADIUS) {
   const halfWidth = local.width / 2;
   const halfHeight = local.height / 2;
   const quaternion = getFaceQuaternion(address.face);
-  const position = new import_three18.Vector3(...transform.position);
+  const position = new import_three19.Vector3(...transform.position);
   const corners = [
-    new import_three18.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
-    new import_three18.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
-    new import_three18.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
-    new import_three18.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
+    new import_three19.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
+    new import_three19.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
+    new import_three19.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
+    new import_three19.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
   }
-  return new import_three18.Box3().setFromPoints(corners);
+  return new import_three19.Box3().setFromPoints(corners);
 }
 function makeTileAddress(face, level, faceSize, tileSize, col, row) {
   const left = (col - 1) * tileSize;
@@ -10371,14 +10523,14 @@ function decideTileLodUpdate(input) {
 }
 var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
-var SHARED_TILE_GEOMETRY = new import_three19.PlaneGeometry(1, 1);
+var SHARED_TILE_GEOMETRY = new import_three20.PlaneGeometry(1, 1);
 function PreviewFace({
   face,
   texture,
   faceOrder
 }) {
   const geometry = (0, import_react37.useMemo)(() => {
-    const nextGeometry = new import_three19.PlaneGeometry(
+    const nextGeometry = new import_three20.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
     );
@@ -10570,8 +10722,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new import_three19.Vector3());
-  const center = new import_three19.Vector3();
+  const direction = camera.getWorldDirection(new import_three20.Vector3());
+  const center = new import_three20.Vector3();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -10716,9 +10868,9 @@ function Tile({
   const lastVisibilityQuaternionRef = (0, import_react37.useRef)(camera.quaternion.clone());
   const lastVisibilityFovRef = (0, import_react37.useRef)(Number.NaN);
   const lastViewportRef = (0, import_react37.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react37.useRef)(new import_three19.Frustum());
-  const projectionMatrixRef = (0, import_react37.useRef)(new import_three19.Matrix4());
-  const visibilityCameraRef = (0, import_react37.useRef)(new import_three19.PerspectiveCamera());
+  const frustumRef = (0, import_react37.useRef)(new import_three20.Frustum());
+  const projectionMatrixRef = (0, import_react37.useRef)(new import_three20.Matrix4());
+  const visibilityCameraRef = (0, import_react37.useRef)(new import_three20.PerspectiveCamera());
   const trackedLoadModeRef = (0, import_react37.useRef)(loadMode);
   const targetKeysRef = (0, import_react37.useRef)([]);
   const detailTokenRef = (0, import_react37.useRef)("");
@@ -10746,7 +10898,7 @@ function Tile({
     }
   };
   (0, import_fiber17.useFrame)(() => {
-    if (!(camera instanceof import_three19.PerspectiveCamera)) {
+    if (!(camera instanceof import_three20.PerspectiveCamera)) {
       return;
     }
     if (loadMode === "preview") {
@@ -10926,14 +11078,14 @@ function SnapshotCapture({
     const scale = Math.min(1, Math.sqrt(maxPixels / (sourceWidth * sourceHeight)));
     const width = Math.max(1, Math.floor(sourceWidth * scale));
     const height = Math.max(1, Math.floor(sourceHeight * scale));
-    const nextTarget = new import_three20.WebGLRenderTarget(width, height, {
+    const nextTarget = new import_three21.WebGLRenderTarget(width, height, {
       depthBuffer: false,
       stencilBuffer: false
     });
-    nextTarget.texture.colorSpace = import_three20.LinearSRGBColorSpace;
+    nextTarget.texture.colorSpace = import_three21.LinearSRGBColorSpace;
     nextTarget.texture.generateMipmaps = false;
-    nextTarget.texture.minFilter = import_three20.LinearFilter;
-    nextTarget.texture.magFilter = import_three20.LinearFilter;
+    nextTarget.texture.minFilter = import_three21.LinearFilter;
+    nextTarget.texture.magFilter = import_three21.LinearFilter;
     const previousTarget = gl.getRenderTarget();
     gl.setRenderTarget(nextTarget);
     gl.clear();
@@ -11483,12 +11635,12 @@ function Scenes({
 // src/hotspot/image-hotspot.tsx
 var import_fiber22 = require("@react-three/fiber");
 var import_react43 = require("react");
-var import_three26 = require("three");
+var import_three27 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
 var import_fiber21 = require("@react-three/fiber");
 var import_react42 = require("react");
-var import_three24 = require("three");
+var import_three25 = require("three");
 
 // src/hotspot/drag-session.ts
 var CLICK_SUPPRESS_MS = 1e3;
@@ -11553,6 +11705,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 = () => {
@@ -11560,8 +11713,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();
@@ -11572,8 +11725,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);
 }
 
@@ -11584,7 +11737,7 @@ var import_react40 = require("react");
 var import_fiber19 = require("@react-three/fiber");
 var import_react39 = require("react");
 var import_client = require("react-dom/client");
-var import_three21 = require("three");
+var import_three22 = require("three");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function useFallbackStereoView() {
   const runtime = (0, import_react39.useContext)(WebVRRuntimeContext);
@@ -11607,7 +11760,7 @@ function ProjectedHtml({
   const { camera, gl, events, size } = (0, import_fiber19.useThree)();
   const group = (0, import_react39.useRef)(null);
   const overlay = (0, import_react39.useRef)(null);
-  const scratch = (0, import_react39.useRef)(new import_three21.Vector3());
+  const scratch = (0, import_react39.useRef)(new import_three22.Vector3());
   const target = events.connected || gl.domElement.parentElement;
   const updatePosition = () => {
     const anchor = group.current;
@@ -11807,18 +11960,18 @@ function HotspotTooltip({
 }
 
 // src/hotspot/transform.ts
-var import_three22 = require("three");
-var LOCAL_FORWARD = new import_three22.Vector3(0, 0, 1);
-var CAMERA_POSITION = new import_three22.Vector3();
+var import_three23 = require("three");
+var LOCAL_FORWARD = new import_three23.Vector3(0, 0, 1);
+var CAMERA_POSITION = new import_three23.Vector3();
 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, import_three22.MathUtils.degToRad(-rotation));
-  let scaleFactor = scaleMode === "fixed" && camera instanceof import_three22.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
-  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof import_three22.PerspectiveCamera) {
+  group.rotateOnAxis(LOCAL_FORWARD, import_three23.MathUtils.degToRad(-rotation));
+  let scaleFactor = scaleMode === "fixed" && camera instanceof import_three23.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof import_three23.PerspectiveCamera) {
     group.updateWorldMatrix(true, false);
     CAMERA_POSITION.setFromMatrixPosition(group.matrixWorld).applyMatrix4(
       camera.matrixWorldInverse
@@ -11833,15 +11986,15 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   group.updateMatrixWorld();
 }
 function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = import_three22.MathUtils.clamp(referenceFov, 1, 179);
-  return Math.tan(import_three22.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three22.MathUtils.degToRad(safeReferenceFov) / 2);
+  const safeReferenceFov = import_three23.MathUtils.clamp(referenceFov, 1, 179);
+  return Math.tan(import_three23.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three23.MathUtils.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) ? import_three22.MathUtils.clamp(fovDegrees, 1, 179) : 75;
-  const pixelsPerWorldUnit = height / (2 * Math.tan(import_three22.MathUtils.degToRad(fov) * 0.5) * depth);
+  const fov = Number.isFinite(fovDegrees) ? import_three23.MathUtils.clamp(fovDegrees, 1, 179) : 75;
+  const pixelsPerWorldUnit = height / (2 * Math.tan(import_three23.MathUtils.degToRad(fov) * 0.5) * depth);
   const axis = (worldScale) => {
     const pixelsPerLocalUnit = pixelsPerWorldUnit * Math.abs(worldScale);
     if (pixelsPerLocalUnit < 1e-4) {
@@ -11856,9 +12009,9 @@ function selectionFrameScale(worldScaleX, worldScaleY, cameraSpaceDepth, fovDegr
 var import_drei = require("@react-three/drei");
 var import_fiber20 = require("@react-three/fiber");
 var import_react41 = require("react");
-var import_three23 = require("three");
+var import_three24 = require("three");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var LINE_WORLD_POSITION = new import_three23.Vector3();
+var LINE_WORLD_POSITION = new import_three24.Vector3();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -11866,8 +12019,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 import_three23.PerspectiveCamera ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(import_three23.MathUtils.degToRad(fov) * 0.5) * depth);
+  const fov = camera instanceof import_three24.PerspectiveCamera ? camera.fov : 75;
+  material.dashScale = viewportHeight / (2 * Math.tan(import_three24.MathUtils.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -11936,8 +12089,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 import_three24.Vector3();
-var SELECTION_WORLD_SCALE = new import_three24.Vector3();
+var SELECTION_CAMERA_POSITION = new import_three25.Vector3();
+var SELECTION_WORLD_SCALE = new import_three25.Vector3();
 var SELECTION_BORDER_POINTS = [
   [-0.5, -0.5, 1e-3],
   [0.5, -0.5, 1e-3],
@@ -11945,27 +12098,27 @@ var SELECTION_BORDER_POINTS = [
   [-0.5, 0.5, 1e-3],
   [-0.5, -0.5, 1e-3]
 ];
-var TOOLTIP_WORLD_BOX = new import_three24.Box3();
-var TOOLTIP_LOCAL_BOX = new import_three24.Box3();
-var TOOLTIP_CORNER = new import_three24.Vector3();
-var TOOLTIP_INVERSE = new import_three24.Matrix4();
-var TOOLTIP_WORLD_CORNER = new import_three24.Vector3();
-var TOOLTIP_PROJECTED = new import_three24.Vector3();
-var TOOLTIP_RAY_ORIGIN = new import_three24.Vector3();
-var TOOLTIP_RAY_FAR = new import_three24.Vector3();
-var TOOLTIP_RAY_DIRECTION = new import_three24.Vector3();
-var TOOLTIP_RAY = new import_three24.Ray();
-var TOOLTIP_PLANE = new import_three24.Plane();
-var TOOLTIP_INTERSECTION = new import_three24.Vector3();
-var TOOLTIP_PLANE_NORMAL = new import_three24.Vector3();
-var TOOLTIP_PLANE_POINT = new import_three24.Vector3();
+var TOOLTIP_WORLD_BOX = new import_three25.Box3();
+var TOOLTIP_LOCAL_BOX = new import_three25.Box3();
+var TOOLTIP_CORNER = new import_three25.Vector3();
+var TOOLTIP_INVERSE = new import_three25.Matrix4();
+var TOOLTIP_WORLD_CORNER = new import_three25.Vector3();
+var TOOLTIP_PROJECTED = new import_three25.Vector3();
+var TOOLTIP_RAY_ORIGIN = new import_three25.Vector3();
+var TOOLTIP_RAY_FAR = new import_three25.Vector3();
+var TOOLTIP_RAY_DIRECTION = new import_three25.Vector3();
+var TOOLTIP_RAY = new import_three25.Ray();
+var TOOLTIP_PLANE = new import_three25.Plane();
+var TOOLTIP_INTERSECTION = new import_three25.Vector3();
+var TOOLTIP_PLANE_NORMAL = new import_three25.Vector3();
+var TOOLTIP_PLANE_POINT = new import_three25.Vector3();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? import_three24.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(import_three24.MathUtils.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? import_three25.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(import_three25.MathUtils.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -11978,39 +12131,39 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return import_three24.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return import_three25.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = import_three24.MathUtils.clamp(
+  const safeWidth = import_three25.MathUtils.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = import_three24.MathUtils.clamp(
+  const safeHeight = import_three25.MathUtils.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(import_three24.MathUtils.degToRad(safeWidth) / 2),
-    Math.tan(import_three24.MathUtils.degToRad(safeHeight) / 2)
+    Math.tan(import_three25.MathUtils.degToRad(safeWidth) / 2),
+    Math.tan(import_three25.MathUtils.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 = import_three24.MathUtils.degToRad(position.pitch);
-  const yaw = import_three24.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three24.Vector3(
+  const pitch = import_three25.MathUtils.degToRad(position.pitch);
+  const yaw = import_three25.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three25.Vector3(
     -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 import_three24.Matrix4().makeBasis(localRight, localUp, inward);
-  return new import_three24.Quaternion().setFromRotationMatrix(basis);
+  const basis = new import_three25.Matrix4().makeBasis(localRight, localUp, inward);
+  return new import_three25.Quaternion().setFromRotationMatrix(basis);
 }
 function makeInteractionEvent(id, position, event) {
   return {
@@ -12023,10 +12176,10 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return import_three24.MathUtils.radToDeg(aVector.angleTo(bVector));
+  return import_three25.MathUtils.radToDeg(aVector.angleTo(bVector));
 }
-var DRAG_POINTER = new import_three24.Vector2();
-var DRAG_RAYCASTER = new import_three24.Raycaster();
+var DRAG_POINTER = new import_three25.Vector2();
+var DRAG_RAYCASTER = new import_three25.Raycaster();
 function aimDragRaycaster(event, element, camera) {
   const rect = element.getBoundingClientRect();
   if (!(rect.width > 0) || !(rect.height > 0)) {
@@ -12260,7 +12413,7 @@ function placeSelectionFrame(frame, group, camera, viewportHeight) {
     SELECTION_WORLD_SCALE.x,
     SELECTION_WORLD_SCALE.y,
     -SELECTION_CAMERA_POSITION.z,
-    camera instanceof import_three24.PerspectiveCamera ? camera.fov : DEFAULT_REFERENCE_FOV,
+    camera instanceof import_three25.PerspectiveCamera ? camera.fov : DEFAULT_REFERENCE_FOV,
     viewportHeight,
     SELECTION_BORDER_OUTSET
   );
@@ -12349,8 +12502,8 @@ function HotspotAnchor({
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
   const focusGeometry = (0, import_react42.useMemo)(() => {
-    const planeGeometry = new import_three24.PlaneGeometry(1, 1);
-    const geometry = new import_three24.EdgesGeometry(planeGeometry);
+    const planeGeometry = new import_three25.PlaneGeometry(1, 1);
+    const geometry = new import_three25.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
     return geometry;
   }, []);
@@ -12742,10 +12895,10 @@ function HotspotAnchor({
 }
 
 // src/hotspot/hotspot-plane.tsx
-var import_three25 = require("three");
+var import_three26 = require("three");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
-var SAMPLE_UV = new import_three25.Vector2();
+var SAMPLE_UV = new import_three26.Vector2();
 var RAYCAST_HITS = [];
 var IMAGE_DATA_CACHE = /* @__PURE__ */ new WeakMap();
 function clampOpacity(opacity) {
@@ -12819,8 +12972,8 @@ function sampleTextureAlpha(texture, u, v) {
 }
 function hotspotPlaneRaycast(raycaster, intersects2) {
   const material = Array.isArray(this.material) ? this.material[0] : this.material;
-  if (!(material instanceof import_three25.MeshBasicMaterial)) {
-    import_three25.Mesh.prototype.raycast.call(this, raycaster, intersects2);
+  if (!(material instanceof import_three26.MeshBasicMaterial)) {
+    import_three26.Mesh.prototype.raycast.call(this, raycaster, intersects2);
     return;
   }
   const cutoff = Math.max(material.alphaTest, HOTSPOT_ALPHA_CUTOFF);
@@ -12828,7 +12981,7 @@ function hotspotPlaneRaycast(raycaster, intersects2) {
     return;
   }
   RAYCAST_HITS.length = 0;
-  import_three25.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
+  import_three26.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
   const map = material.map;
   for (const hit of RAYCAST_HITS) {
     if (!map || !hit.uv) {
@@ -12854,7 +13007,7 @@ function HotspotPlane({
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
         map,
         opacity: map ? clampOpacity(opacity) : 0,
-        side: import_three25.DoubleSide,
+        side: import_three26.DoubleSide,
         toneMapped: false,
         transparent: true
       }
@@ -12879,7 +13032,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
         active = false;
       };
     }
-    const loader = new import_three26.TextureLoader();
+    const loader = new import_three27.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -12887,11 +13040,11 @@ function useHotspotImageTexture(src, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three26.SRGBColorSpace;
-        loadedTexture.wrapS = import_three26.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three26.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three26.LinearFilter;
-        loadedTexture.minFilter = import_three26.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three27.SRGBColorSpace;
+        loadedTexture.wrapS = import_three27.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three27.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three27.LinearFilter;
+        loadedTexture.minFilter = import_three27.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -12932,7 +13085,7 @@ function ImageHotspot({
 
 // src/hotspot/graphic-hotspot.tsx
 var import_react44 = require("react");
-var import_three27 = require("three");
+var import_three28 = require("three");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
@@ -13111,12 +13264,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
     throw new Error("Canvas 2D is unavailable for this graphic hotspot.");
   }
   drawGraphic(context, graphic, aspectWidth, aspectHeight);
-  const texture = new import_three27.CanvasTexture(canvas);
-  texture.colorSpace = import_three27.SRGBColorSpace;
-  texture.wrapS = import_three27.ClampToEdgeWrapping;
-  texture.wrapT = import_three27.ClampToEdgeWrapping;
-  texture.magFilter = import_three27.LinearFilter;
-  texture.minFilter = import_three27.LinearMipmapLinearFilter;
+  const texture = new import_three28.CanvasTexture(canvas);
+  texture.colorSpace = import_three28.SRGBColorSpace;
+  texture.wrapS = import_three28.ClampToEdgeWrapping;
+  texture.wrapT = import_three28.ClampToEdgeWrapping;
+  texture.magFilter = import_three28.LinearFilter;
+  texture.minFilter = import_three28.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
@@ -13167,7 +13320,7 @@ function GraphicHotspot(props) {
 // src/hotspot/sequence-hotspot.tsx
 var import_fiber23 = require("@react-three/fiber");
 var import_react45 = require("react");
-var import_three28 = require("three");
+var import_three29 = require("three");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
@@ -13197,7 +13350,7 @@ function useSpriteTexture({
         active = false;
       };
     }
-    const loader = new import_three28.TextureLoader();
+    const loader = new import_three29.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -13205,11 +13358,11 @@ function useSpriteTexture({
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three28.SRGBColorSpace;
-        loadedTexture.wrapS = import_three28.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three28.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three28.LinearFilter;
-        loadedTexture.minFilter = import_three28.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three29.SRGBColorSpace;
+        loadedTexture.wrapS = import_three29.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three29.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three29.LinearFilter;
+        loadedTexture.minFilter = import_three29.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -13350,7 +13503,7 @@ function SequenceHotspot({
 // src/hotspot/video-hotspot.tsx
 var import_fiber24 = require("@react-three/fiber");
 var import_react46 = require("react");
-var import_three29 = require("three");
+var import_three30 = require("three");
 
 // src/video/inline-playback.ts
 var INLINE_VIDEO_ATTRIBUTES = [
@@ -13423,7 +13576,7 @@ function usePosterTexture(id, poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three29.TextureLoader();
+    const loader = new import_three30.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -13431,11 +13584,11 @@ function usePosterTexture(id, poster, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three29.SRGBColorSpace;
-        loadedTexture.wrapS = import_three29.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three29.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three29.LinearFilter;
-        loadedTexture.minFilter = import_three29.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three30.SRGBColorSpace;
+        loadedTexture.wrapS = import_three30.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three30.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three30.LinearFilter;
+        loadedTexture.minFilter = import_three30.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -13490,12 +13643,12 @@ function useVideoResource({
     }
     applyInlineVideoPlayback(video, playsInline ?? true);
     video.poster = poster ?? "";
-    const texture = new import_three29.VideoTexture(video);
-    texture.colorSpace = import_three29.SRGBColorSpace;
-    texture.wrapS = import_three29.ClampToEdgeWrapping;
-    texture.wrapT = import_three29.ClampToEdgeWrapping;
-    texture.magFilter = import_three29.LinearFilter;
-    texture.minFilter = import_three29.LinearFilter;
+    const texture = new import_three30.VideoTexture(video);
+    texture.colorSpace = import_three30.SRGBColorSpace;
+    texture.wrapS = import_three30.ClampToEdgeWrapping;
+    texture.wrapT = import_three30.ClampToEdgeWrapping;
+    texture.magFilter = import_three30.LinearFilter;
+    texture.minFilter = import_three30.LinearFilter;
     texture.generateMipmaps = false;
     const notifyState = (state) => {
       if (active) {
@@ -13634,13 +13787,13 @@ function VideoHotspot({
 // src/hotspot/audio-hotspot.tsx
 var import_fiber25 = require("@react-three/fiber");
 var import_react47 = require("react");
-var import_three31 = require("three");
+var import_three32 = require("three");
 
 // src/hotspot/audio-spatial.ts
-var import_three30 = require("three");
-var LOOK_DIR = new import_three30.Vector3();
-var SOURCE_DIR = new import_three30.Vector3();
-var RIGHT_DIR = new import_three30.Vector3();
+var import_three31 = require("three");
+var LOOK_DIR = new import_three31.Vector3();
+var SOURCE_DIR = new import_three31.Vector3();
+var RIGHT_DIR = new import_three31.Vector3();
 function clampAudioVolume(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -13665,11 +13818,11 @@ function lookRangeGain(angleDegrees, range) {
 function audioSpatialFromView(camera, position, range) {
   camera.getWorldDirection(LOOK_DIR);
   SOURCE_DIR.copy(panoPositionToVector3(position)).normalize();
-  const angleDegrees = import_three30.MathUtils.radToDeg(
-    Math.acos(import_three30.MathUtils.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
+  const angleDegrees = import_three31.MathUtils.radToDeg(
+    Math.acos(import_three31.MathUtils.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
   );
   RIGHT_DIR.set(1, 0, 0).applyQuaternion(camera.quaternion);
-  const pan = import_three30.MathUtils.clamp(
+  const pan = import_three31.MathUtils.clamp(
     Math.atan2(SOURCE_DIR.dot(RIGHT_DIR), SOURCE_DIR.dot(LOOK_DIR)) / (Math.PI / 2),
     -1,
     1
@@ -13734,12 +13887,12 @@ function createSpeakerTexture(state) {
       return exhaustive;
     }
   }
-  const texture = new import_three31.CanvasTexture(canvas);
-  texture.colorSpace = import_three31.SRGBColorSpace;
-  texture.wrapS = import_three31.ClampToEdgeWrapping;
-  texture.wrapT = import_three31.ClampToEdgeWrapping;
-  texture.magFilter = import_three31.LinearFilter;
-  texture.minFilter = import_three31.LinearMipmapLinearFilter;
+  const texture = new import_three32.CanvasTexture(canvas);
+  texture.colorSpace = import_three32.SRGBColorSpace;
+  texture.wrapS = import_three32.ClampToEdgeWrapping;
+  texture.wrapT = import_three32.ClampToEdgeWrapping;
+  texture.magFilter = import_three32.LinearFilter;
+  texture.minFilter = import_three32.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
@@ -13774,7 +13927,7 @@ function useIconTexture(icon, enabled, onError, id) {
         active = false;
       };
     }
-    const loader = new import_three31.TextureLoader();
+    const loader = new import_three32.TextureLoader();
     loader.load(
       icon,
       (loadedTexture) => {
@@ -13782,11 +13935,11 @@ function useIconTexture(icon, enabled, onError, id) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three31.SRGBColorSpace;
-        loadedTexture.wrapS = import_three31.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three31.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three31.LinearFilter;
-        loadedTexture.minFilter = import_three31.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three32.SRGBColorSpace;
+        loadedTexture.wrapS = import_three32.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three32.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three32.LinearFilter;
+        loadedTexture.minFilter = import_three32.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -13977,7 +14130,7 @@ function AudioHotspot({
 // src/hotspot/text-hotspot.tsx
 var import_react48 = require("react");
 var import_fiber26 = require("@react-three/fiber");
-var import_three32 = require("three");
+var import_three33 = require("three");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var TEXT_RASTER_SUPERSAMPLE = 2;
@@ -14049,7 +14202,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(import_three32.MathUtils.degToRad(angle) / 2) / Math.tan(import_three32.MathUtils.degToRad(fov) / 2) * viewportHeight;
+  return Math.tan(import_three33.MathUtils.degToRad(angle) / 2) / Math.tan(import_three33.MathUtils.degToRad(fov) / 2) * viewportHeight;
 }
 function snapRasterLongSide(screenLong, layoutLong) {
   if (!(screenLong > 0)) {
@@ -14238,12 +14391,12 @@ function createTextTexture(text, width, height, style, rasterLong) {
     0
   );
   drawTextHotspot(context, layout.canvasWidth, layout.canvasHeight, text, style);
-  const texture = new import_three32.CanvasTexture(canvas);
-  texture.colorSpace = import_three32.SRGBColorSpace;
-  texture.wrapS = import_three32.ClampToEdgeWrapping;
-  texture.wrapT = import_three32.ClampToEdgeWrapping;
-  texture.magFilter = import_three32.LinearFilter;
-  texture.minFilter = import_three32.LinearFilter;
+  const texture = new import_three33.CanvasTexture(canvas);
+  texture.colorSpace = import_three33.SRGBColorSpace;
+  texture.wrapS = import_three33.ClampToEdgeWrapping;
+  texture.wrapT = import_three33.ClampToEdgeWrapping;
+  texture.magFilter = import_three33.LinearFilter;
+  texture.minFilter = import_three33.LinearFilter;
   texture.generateMipmaps = false;
   texture.needsUpdate = true;
   return texture;
@@ -14255,7 +14408,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 import_three32.PerspectiveCamera ? camera.fov : DEFAULT_REFERENCE_FOV2;
+    const cameraFov = camera instanceof import_three33.PerspectiveCamera ? camera.fov : DEFAULT_REFERENCE_FOV2;
     const screenLong = Math.max(
       projectedDevicePixels(
         width * resolveScale2(scale),
@@ -14401,7 +14554,7 @@ function TextHotspot({
 
 // src/hotspot/iframe-hotspot.tsx
 var import_drei2 = require("@react-three/drei");
-var import_three33 = require("three");
+var import_three34 = require("three");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
@@ -14475,7 +14628,7 @@ function IframeHotspot({
             {
               depthWrite: false,
               opacity: 0,
-              side: import_three33.DoubleSide,
+              side: import_three34.DoubleSide,
               toneMapped: false,
               transparent: true
             }
@@ -14519,7 +14672,7 @@ function IframeHotspot({
 
 // src/hotspot/polygon-hotspot.tsx
 var import_react49 = require("react");
-var import_three34 = require("three");
+var import_three35 = require("three");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
@@ -14555,7 +14708,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new import_three34.Vector2(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new import_three35.Vector2(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -14592,7 +14745,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new import_three34.Vector3()];
+  const candidates = [new import_three35.Vector3()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14616,7 +14769,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new import_three34.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three34.Vector3(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new import_three35.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three35.Vector3(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14627,7 +14780,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three34.Vector3()
+    new import_three35.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14636,20 +14789,20 @@ 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 import_three34.Vector3(
+  const localUp = new import_three35.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three34.Quaternion().setFromRotationMatrix(
-    new import_three34.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three35.Quaternion().setFromRotationMatrix(
+    new import_three35.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal(center) {
-  return new import_three34.Matrix4().compose(
+  return new import_three35.Matrix4().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new import_three34.Vector3(1, 1, 1)
+    new import_three35.Vector3(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14704,8 +14857,8 @@ function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps)
 }
 function makeFillGeometry(vertices, center) {
   const unwrapped = unwrapPolygonVertices(vertices);
-  const contour = unwrapped.map((vertex) => new import_three34.Vector2(vertex.unwrappedYaw, vertex.pitch));
-  const triangles = import_three34.ShapeUtils.triangulateShape(contour, []);
+  const contour = unwrapped.map((vertex) => new import_three35.Vector2(vertex.unwrappedYaw, vertex.pitch));
+  const triangles = import_three35.ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
   const worldToLocal = makeWorldToLocal(center);
@@ -14721,7 +14874,7 @@ function makeFillGeometry(vertices, center) {
       steps
     );
   }
-  return new import_three34.BufferGeometry().setAttribute("position", new import_three34.Float32BufferAttribute(positions, 3)).setIndex(indices);
+  return new import_three35.BufferGeometry().setAttribute("position", new import_three35.Float32BufferAttribute(positions, 3)).setIndex(indices);
 }
 function makeStrokePositions(vertices, center) {
   const points = [];
@@ -14851,7 +15004,7 @@ function PolygonHotspot({
             color: fill,
             depthWrite: false,
             opacity: Math.max(0, Math.min(fillOpacity, 1)),
-            side: import_three34.DoubleSide,
+            side: import_three35.DoubleSide,
             transparent: true
           }
         ) }),
@@ -14874,7 +15027,7 @@ function PolygonHotspot({
 
 // src/hotspot/polyline-hotspot.tsx
 var import_react50 = require("react");
-var import_three35 = require("three");
+var import_three36 = require("three");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
@@ -14900,29 +15053,29 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three35.Vector3()
+    new import_three36.Vector3()
   );
   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 = import_three35.MathUtils.degToRad(position.pitch);
-  const yaw = import_three35.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three35.Vector3(
+  const pitch = import_three36.MathUtils.degToRad(position.pitch);
+  const yaw = import_three36.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three36.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three35.Quaternion().setFromRotationMatrix(
-    new import_three35.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three36.Quaternion().setFromRotationMatrix(
+    new import_three36.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal2(center) {
-  return new import_three35.Matrix4().compose(
+  return new import_three36.Matrix4().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new import_three35.Vector3(1, 1, 1)
+    new import_three36.Vector3(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -14937,7 +15090,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(import_three35.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(import_three36.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -15702,65 +15855,7 @@ function PanoFilter({
 // src/gyro.tsx
 var import_fiber27 = require("@react-three/fiber");
 var import_react54 = require("react");
-
-// src/gyro-orientation.ts
-var import_three36 = require("three");
-var DEVICE_FORWARD_CORRECTION = new import_three36.Quaternion().setFromAxisAngle(
-  new import_three36.Vector3(1, 0, 0),
-  -Math.PI / 2
-);
-var SCREEN_AXIS = new import_three36.Vector3(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 import_three36.Euler(
-    import_three36.MathUtils.degToRad(sample.beta),
-    import_three36.MathUtils.degToRad(alpha),
-    import_three36.MathUtils.degToRad(-sample.gamma),
-    "YXZ"
-  );
-  const screenCorrection = new import_three36.Quaternion().setFromAxisAngle(
-    SCREEN_AXIS,
-    -import_three36.MathUtils.degToRad(screenOrientation)
-  );
-  return new import_three36.Quaternion().setFromEuler(deviceEuler).multiply(DEVICE_FORWARD_CORRECTION).multiply(screenCorrection).normalize();
-}
-function quaternionToGyroPose(quaternion) {
-  const euler = new import_three36.Euler().setFromQuaternion(quaternion, "YXZ");
-  return {
-    yaw: import_three36.MathUtils.radToDeg(-euler.y),
-    pitch: import_three36.MathUtils.radToDeg(euler.x),
-    roll: import_three36.MathUtils.radToDeg(euler.z)
-  };
-}
-function createRelativeCalibration(deviceQuaternion, yaw, pitch) {
-  const targetQuaternion = new import_three36.Quaternion().setFromEuler(
-    new import_three36.Euler(
-      import_three36.MathUtils.degToRad(pitch),
-      import_three36.MathUtils.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
+var import_three37 = require("three");
 var deviceOrientationPermissionState = "unknown";
 function isMobileDevice() {
   if (typeof navigator === "undefined") {
@@ -15768,12 +15863,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;
 }
@@ -15783,9 +15872,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 = (0, import_react54.forwardRef)(function Gyro2({
   enabled = false,
   camroll = true,
@@ -15805,19 +15891,30 @@ var Gyro = (0, import_react54.forwardRef)(function Gyro2({
   const eventBus = (0, import_react54.useContext)(PanoEventBusContext);
   const { gl } = (0, import_fiber27.useThree)();
   const [internallyDisabled, setInternallyDisabled] = (0, import_react54.useState)(false);
+  const [available, setAvailableState] = (0, import_react54.useState)(false);
   const availableRef = (0, import_react54.useRef)(false);
   const availabilityReportedRef = (0, import_react54.useRef)(null);
   const activeRef = (0, import_react54.useRef)(false);
   const permissionRef = (0, import_react54.useRef)(deviceOrientationPermissionState);
   const absoluteEventSourceRef = (0, import_react54.useRef)(null);
-  const rawQuaternionRef = (0, import_react54.useRef)(null);
-  const calibrationRef = (0, import_react54.useRef)(null);
+  const rawQuaternionRef = (0, import_react54.useRef)(new import_three37.Quaternion());
+  const hasRawQuaternionRef = (0, import_react54.useRef)(false);
+  const calibrationRef = (0, import_react54.useRef)(new import_three37.Quaternion());
+  const hasCalibrationRef = (0, import_react54.useRef)(false);
+  const calibratedQuaternionRef = (0, import_react54.useRef)(new import_three37.Quaternion());
   const absoluteOffsetRef = (0, import_react54.useRef)({ yaw: 0, pitch: 0 });
   const screenAngleRef = (0, import_react54.useRef)(getScreenOrientationAngle());
   const startPoseRef = (0, import_react54.useRef)(null);
   const enabledAtRef = (0, import_react54.useRef)(0);
   const filteredPoseRef = (0, import_react54.useRef)(null);
   const lastAppliedPoseRef = (0, import_react54.useRef)(null);
+  const lastSamplePoseRef = (0, import_react54.useRef)(null);
+  const lastSampleAtRef = (0, import_react54.useRef)(null);
+  const previousYawRef = (0, import_react54.useRef)(void 0);
+  const absoluteRef = (0, import_react54.useRef)(absolute);
+  const northRef = (0, import_react54.useRef)(north);
+  absoluteRef.current = absolute;
+  northRef.current = north;
   const callbacksRef = (0, import_react54.useRef)({
     onAvailable,
     onUnavailable,
@@ -15863,13 +15960,14 @@ var Gyro = (0, import_react54.forwardRef)(function Gyro2({
     [eventBus]
   );
   const setAvailable = (0, import_react54.useCallback)(
-    (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]
   );
@@ -15912,37 +16010,54 @@ var Gyro = (0, import_react54.forwardRef)(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 = (0, import_react54.useCallback)(
+  const anchorToView = (0, import_react54.useCallback)(
     (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 = (0, import_react54.useCallback)(
+    (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,
@@ -15950,8 +16065,10 @@ var Gyro = (0, import_react54.forwardRef)(function Gyro2({
       };
       enabledAtRef.current = performance.now();
       filteredPoseRef.current = null;
+      lastSamplePoseRef.current = null;
+      lastSampleAtRef.current = null;
     },
-    [absolute, controlsRef, north]
+    [anchorToView, controlsRef]
   );
   (0, import_react54.useImperativeHandle)(
     ref,
@@ -15971,9 +16088,6 @@ var Gyro = (0, import_react54.forwardRef)(function Gyro2({
   (0, import_react54.useEffect)(() => {
     const supported = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined" && (desktopSupport || isMobileDevice());
     setAvailable(supported);
-    return () => {
-      availableRef.current = false;
-    };
   }, [desktopSupport, setAvailable]);
   (0, import_react54.useEffect)(() => {
     controlsRef.current?.setGyroTouchMode(touchMode);
@@ -15993,7 +16107,7 @@ var Gyro = (0, import_react54.forwardRef)(function Gyro2({
     };
   }, [enabled, gl, internallyDisabled, touchMode]);
   (0, import_react54.useEffect)(() => {
-    if (!enabled || internallyDisabled || !availableRef.current) {
+    if (!enabled || internallyDisabled || !available) {
       deactivate();
       return;
     }
@@ -16022,10 +16136,12 @@ var Gyro = (0, import_react54.forwardRef)(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,
@@ -16033,11 +16149,13 @@ var Gyro = (0, import_react54.forwardRef)(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 };
@@ -16085,6 +16203,7 @@ var Gyro = (0, import_react54.forwardRef)(function Gyro2({
     };
   }, [
     absolute,
+    available,
     controlsRef,
     deactivate,
     emit,
@@ -16093,28 +16212,84 @@ var Gyro = (0, import_react54.forwardRef)(function Gyro2({
     requestPermission
   ]);
   (0, import_fiber27.useFrame)((_, 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) {
@@ -16123,9 +16298,9 @@ var Gyro = (0, import_react54.forwardRef)(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;
@@ -16135,9 +16310,9 @@ var Gyro = (0, import_react54.forwardRef)(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()) {
@@ -16148,7 +16323,7 @@ var Gyro = (0, import_react54.forwardRef)(function Gyro2({
       lastAppliedPoseRef.current = { ...filteredPose };
       controlsRef.current?.setGyroPose(filteredPose);
     }
-  });
+  }, -1);
   return null;
 });
 
@@ -16178,9 +16353,9 @@ async function detectWebVRCapabilities() {
 // src/webvr/reticle.tsx
 var import_fiber28 = require("@react-three/fiber");
 var import_react55 = require("react");
-var import_three37 = require("three");
+var import_three38 = require("three");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var CENTER_NDC = new import_three37.Vector2(0, 0);
+var CENTER_NDC = new import_three38.Vector2(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
 var RETICLE_RENDER_ORDER = 1e5;
@@ -16265,8 +16440,8 @@ function WebVRReticle({
 }) {
   const groupRef = (0, import_react55.useRef)(null);
   const ringMeshRef = (0, import_react55.useRef)(null);
-  const directionRef = (0, import_react55.useRef)(new import_three37.Vector3());
-  const raycasterRef = (0, import_react55.useRef)(new import_three37.Raycaster());
+  const directionRef = (0, import_react55.useRef)(new import_three38.Vector3());
+  const raycasterRef = (0, import_react55.useRef)(new import_three38.Raycaster());
   const hoveredRef = (0, import_react55.useRef)(null);
   const dwellRef = (0, import_react55.useRef)(0);
   const clickedRef = (0, import_react55.useRef)(false);
@@ -16417,7 +16592,7 @@ function WebVRReticle({
                   color: "#ffffff",
                   depthTest: false,
                   depthWrite: false,
-                  side: import_three37.DoubleSide,
+                  side: import_three38.DoubleSide,
                   toneMapped: false,
                   transparent: true
                 }
@@ -16433,7 +16608,7 @@ function WebVRReticle({
 // src/webvr/stereo.tsx
 var import_fiber29 = require("@react-three/fiber");
 var import_react56 = require("react");
-var import_three38 = require("three");
+var import_three39 = require("three");
 var vertexShader = `
 varying vec2 vUv;
 void main() {
@@ -16458,26 +16633,26 @@ void main() {
 }
 `;
 function createDistortionResources() {
-  const target = new import_three38.WebGLRenderTarget(1, 1, {
+  const target = new import_three39.WebGLRenderTarget(1, 1, {
     depthBuffer: true,
     stencilBuffer: false
   });
-  const geometry = new import_three38.PlaneGeometry(2, 2);
-  const material = new import_three38.ShaderMaterial({
+  const geometry = new import_three39.PlaneGeometry(2, 2);
+  const material = new import_three39.ShaderMaterial({
     depthTest: false,
     depthWrite: false,
     fragmentShader,
     uniforms: {
-      distortion: { value: new import_three38.Vector2() },
+      distortion: { value: new import_three39.Vector2() },
       sourceTexture: { value: target.texture }
     },
     vertexShader
   });
-  const mesh = new import_three38.Mesh(geometry, material);
-  const scene = new import_three38.Scene();
+  const mesh = new import_three39.Mesh(geometry, material);
+  const scene = new import_three39.Scene();
   scene.add(mesh);
   return {
-    camera: new import_three38.OrthographicCamera(-1, 1, 1, -1, 0, 1),
+    camera: new import_three39.OrthographicCamera(-1, 1, 1, -1, 0, 1),
     geometry,
     material,
     mesh,
@@ -16510,15 +16685,15 @@ function WebVRStereoRenderer({
   const runtime = (0, import_react56.useContext)(WebVRRuntimeContext);
   const fallbackStereoRef = (0, import_react56.useRef)(null);
   if (!fallbackStereoRef.current) {
-    fallbackStereoRef.current = new import_three38.StereoCamera();
+    fallbackStereoRef.current = new import_three39.StereoCamera();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
   const stereoRef = (0, import_react56.useRef)(stereo);
   stereoRef.current = stereo;
   const resources = (0, import_react56.useMemo)(createDistortionResources, []);
-  const drawingSizeRef = (0, import_react56.useRef)(new import_three38.Vector2());
-  const viewportRef = (0, import_react56.useRef)(new import_three38.Vector4());
-  const scissorRef = (0, import_react56.useRef)(new import_three38.Vector4());
+  const drawingSizeRef = (0, import_react56.useRef)(new import_three39.Vector2());
+  const viewportRef = (0, import_react56.useRef)(new import_three39.Vector4());
+  const scissorRef = (0, import_react56.useRef)(new import_three39.Vector4());
   const originalFovRef = (0, import_react56.useRef)(null);
   const stereoActiveRef = (0, import_react56.useRef)(false);
   const profileRef = (0, import_react56.useRef)(profile);
@@ -16536,7 +16711,7 @@ function WebVRStereoRenderer({
   (0, import_react56.useEffect)(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
-      if (!stereoActiveRef.current || !(cameraToRender instanceof import_three38.PerspectiveCamera)) {
+      if (!stereoActiveRef.current || !(cameraToRender instanceof import_three39.PerspectiveCamera)) {
         originalRender(sceneToRender, cameraToRender);
         return;
       }
@@ -16611,7 +16786,7 @@ function WebVRStereoRenderer({
     if (runtime) {
       runtime.stereoView.active = fallback;
     }
-    if (fallback && camera instanceof import_three38.PerspectiveCamera) {
+    if (fallback && camera instanceof import_three39.PerspectiveCamera) {
       syncStereoCameras(
         stereoRef.current,
         camera,
@@ -16622,7 +16797,7 @@ function WebVRStereoRenderer({
       );
       return;
     }
-    if (originalFovRef.current !== null && camera instanceof import_three38.PerspectiveCamera) {
+    if (originalFovRef.current !== null && camera instanceof import_three39.PerspectiveCamera) {
       camera.fov = originalFovRef.current;
       camera.updateProjectionMatrix();
       originalFovRef.current = null;
@@ -17304,7 +17479,7 @@ function usePanoViewer() {
 // src/video/pano-video.tsx
 var import_fiber31 = require("@react-three/fiber");
 var import_react61 = require("react");
-var import_three39 = require("three");
+var import_three40 = require("three");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
@@ -17381,8 +17556,8 @@ function findTextTrack(video, tracks, trackId) {
   return list.length > 0 ? list[0] : null;
 }
 function applyEquirectangularLayout(texture, anisotropy) {
-  texture.colorSpace = import_three39.SRGBColorSpace;
-  texture.wrapS = import_three39.RepeatWrapping;
+  texture.colorSpace = import_three40.SRGBColorSpace;
+  texture.wrapS = import_three40.RepeatWrapping;
   texture.repeat.x = -1;
   texture.offset.x = 1;
   texture.anisotropy = anisotropy;
@@ -17401,7 +17576,7 @@ function usePosterTexture2(poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three39.TextureLoader();
+    const loader = new import_three40.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -17413,9 +17588,9 @@ function usePosterTexture2(poster, onError) {
           loadedTexture,
           gl.capabilities.getMaxAnisotropy()
         );
-        loadedTexture.wrapT = import_three39.RepeatWrapping;
-        loadedTexture.magFilter = import_three39.LinearFilter;
-        loadedTexture.minFilter = import_three39.LinearMipmapLinearFilter;
+        loadedTexture.wrapT = import_three40.RepeatWrapping;
+        loadedTexture.magFilter = import_three40.LinearFilter;
+        loadedTexture.minFilter = import_three40.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         setTexture(loadedTexture);
       },
@@ -17569,10 +17744,10 @@ function PanoVideo({
     video.muted = true;
     applyInlineVideoPlayback(video, true);
     video.preload = "metadata";
-    const texture = new import_three39.VideoTexture(video);
+    const texture = new import_three40.VideoTexture(video);
     applyEquirectangularLayout(texture, 1);
-    texture.magFilter = import_three39.LinearFilter;
-    texture.minFilter = import_three39.LinearFilter;
+    texture.magFilter = import_three40.LinearFilter;
+    texture.minFilter = import_three40.LinearFilter;
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
@@ -18008,7 +18183,7 @@ function PanoVideo({
     activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "mesh",
       {
-        rotation: [0, import_three39.MathUtils.degToRad(90 + yawOffset2), 0],
+        rotation: [0, import_three40.MathUtils.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
@@ -18016,7 +18191,7 @@ function PanoVideo({
             PanoBasicMaterial,
             {
               map: activeTexture,
-              side: import_three39.BackSide,
+              side: import_three40.BackSide,
               toneMapped: false
             }
           )