@ericchen1990/pano-view 3.0.0 → 3.1.1

package/dist/index.mjs

@@ -40,7 +40,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         init: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           self._counter = 1e3;
           self._html5AudioPool = [];
           self.html5PoolSize = 10;
@@ -65,7 +65,7 @@ var require_howler = __commonJS({
          * @return {Howler/Float}     Returns self or current volume.
          */
         volume: function(vol) {
-          var self = this || Howler3;
+          var self = this || Howler4;
           vol = parseFloat(vol);
           if (!self.ctx) {
             setupAudioContext();
@@ -76,7 +76,7 @@ var require_howler = __commonJS({
               return self;
             }
             if (self.usingWebAudio) {
-              self.masterGain.gain.setValueAtTime(vol, Howler3.ctx.currentTime);
+              self.masterGain.gain.setValueAtTime(vol, Howler4.ctx.currentTime);
             }
             for (var i = 0; i < self._howls.length; i++) {
               if (!self._howls[i]._webAudio) {
@@ -98,13 +98,13 @@ var require_howler = __commonJS({
          * @param  {Boolean} muted Is muted or not.
          */
         mute: function(muted) {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (!self.ctx) {
             setupAudioContext();
           }
           self._muted = muted;
           if (self.usingWebAudio) {
-            self.masterGain.gain.setValueAtTime(muted ? 0 : self._volume, Howler3.ctx.currentTime);
+            self.masterGain.gain.setValueAtTime(muted ? 0 : self._volume, Howler4.ctx.currentTime);
           }
           for (var i = 0; i < self._howls.length; i++) {
             if (!self._howls[i]._webAudio) {
@@ -123,7 +123,7 @@ var require_howler = __commonJS({
          * Handle stopping all sounds globally.
          */
         stop: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           for (var i = 0; i < self._howls.length; i++) {
             self._howls[i].stop();
           }
@@ -134,7 +134,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         unload: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           for (var i = self._howls.length - 1; i >= 0; i--) {
             self._howls[i].unload();
           }
@@ -151,14 +151,14 @@ var require_howler = __commonJS({
          * @return {Boolean}
          */
         codecs: function(ext) {
-          return (this || Howler3)._codecs[ext.replace(/^x-/, "")];
+          return (this || Howler4)._codecs[ext.replace(/^x-/, "")];
         },
         /**
          * Setup various state values for global tracking.
          * @return {Howler}
          */
         _setup: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           self.state = self.ctx ? self.ctx.state || "suspended" : "suspended";
           self._autoSuspend();
           if (!self.usingWebAudio) {
@@ -192,7 +192,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         _setupCodecs: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           var audioTest = null;
           try {
             audioTest = typeof Audio !== "undefined" ? new Audio() : null;
@@ -235,7 +235,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         _unlockAudio: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (self._audioUnlocked || !self.ctx) {
             return;
           }
@@ -305,7 +305,7 @@ var require_howler = __commonJS({
          * @return {Audio} HTML5 Audio object.
          */
         _obtainHtml5Audio: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (self._html5AudioPool.length) {
             return self._html5AudioPool.pop();
           }
@@ -322,7 +322,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         _releaseHtml5Audio: function(audio) {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (audio._unlocked) {
             self._html5AudioPool.push(audio);
           }
@@ -335,7 +335,7 @@ var require_howler = __commonJS({
          */
         _autoSuspend: function() {
           var self = this;
-          if (!self.autoSuspend || !self.ctx || typeof self.ctx.suspend === "undefined" || !Howler3.usingWebAudio) {
+          if (!self.autoSuspend || !self.ctx || typeof self.ctx.suspend === "undefined" || !Howler4.usingWebAudio) {
             return;
           }
           for (var i = 0; i < self._howls.length; i++) {
@@ -373,7 +373,7 @@ var require_howler = __commonJS({
          */
         _autoResume: function() {
           var self = this;
-          if (!self.ctx || typeof self.ctx.resume === "undefined" || !Howler3.usingWebAudio) {
+          if (!self.ctx || typeof self.ctx.resume === "undefined" || !Howler4.usingWebAudio) {
             return;
           }
           if (self.state === "running" && self.ctx.state !== "interrupted" && self._suspendTimer) {
@@ -396,7 +396,7 @@ var require_howler = __commonJS({
           return self;
         }
       };
-      var Howler3 = new HowlerGlobal2();
+      var Howler4 = new HowlerGlobal2();
       var Howl3 = function(o) {
         var self = this;
         if (!o.src || o.src.length === 0) {
@@ -413,7 +413,7 @@ var require_howler = __commonJS({
          */
         init: function(o) {
           var self = this;
-          if (!Howler3.ctx) {
+          if (!Howler4.ctx) {
             setupAudioContext();
           }
           self._autoplay = o.autoplay || false;
@@ -452,11 +452,11 @@ var require_howler = __commonJS({
           self._onseek = o.onseek ? [{ fn: o.onseek }] : [];
           self._onunlock = o.onunlock ? [{ fn: o.onunlock }] : [];
           self._onresume = [];
-          self._webAudio = Howler3.usingWebAudio && !self._html5;
-          if (typeof Howler3.ctx !== "undefined" && Howler3.ctx && Howler3.autoUnlock) {
-            Howler3._unlockAudio();
+          self._webAudio = Howler4.usingWebAudio && !self._html5;
+          if (typeof Howler4.ctx !== "undefined" && Howler4.ctx && Howler4.autoUnlock) {
+            Howler4._unlockAudio();
           }
-          Howler3._howls.push(self);
+          Howler4._howls.push(self);
           if (self._autoplay) {
             self._queue.push({
               event: "play",
@@ -477,7 +477,7 @@ var require_howler = __commonJS({
         load: function() {
           var self = this;
           var url = null;
-          if (Howler3.noAudio) {
+          if (Howler4.noAudio) {
             self._emit("loaderror", null, "No audio support.");
             return;
           }
@@ -505,7 +505,7 @@ var require_howler = __commonJS({
             if (!ext) {
               console.warn('No file extension was found. Consider using the "format" property or specify an extension.');
             }
-            if (ext && Howler3.codecs(ext)) {
+            if (ext && Howler4.codecs(ext)) {
               url = self._src[i];
               break;
             }
@@ -583,7 +583,7 @@ var require_howler = __commonJS({
             return sound._id;
           }
           if (self._webAudio) {
-            Howler3._autoResume();
+            Howler4._autoResume();
           }
           var seek = Math.max(0, sound._seek > 0 ? sound._seek : self._sprite[sprite][0] / 1e3);
           var duration = Math.max(0, (self._sprite[sprite][0] + self._sprite[sprite][1]) / 1e3 - seek);
@@ -610,8 +610,8 @@ var require_howler = __commonJS({
               setParams();
               self._refreshBuffer(sound);
               var vol = sound._muted || self._muted ? 0 : sound._volume;
-              node.gain.setValueAtTime(vol, Howler3.ctx.currentTime);
-              sound._playStart = Howler3.ctx.currentTime;
+              node.gain.setValueAtTime(vol, Howler4.ctx.currentTime);
+              sound._playStart = Howler4.ctx.currentTime;
               if (typeof node.bufferSource.start === "undefined") {
                 sound._loop ? node.bufferSource.noteGrainOn(0, seek, 86400) : node.bufferSource.noteGrainOn(0, seek, duration);
               } else {
@@ -627,7 +627,7 @@ var require_howler = __commonJS({
                 }, 0);
               }
             };
-            if (Howler3.state === "running" && Howler3.ctx.state !== "interrupted") {
+            if (Howler4.state === "running" && Howler4.ctx.state !== "interrupted") {
               playWebAudio();
             } else {
               self._playLock = true;
@@ -637,8 +637,8 @@ var require_howler = __commonJS({
           } else {
             var playHtml5 = function() {
               node.currentTime = seek;
-              node.muted = sound._muted || self._muted || Howler3._muted || node.muted;
-              node.volume = sound._volume * Howler3.volume();
+              node.muted = sound._muted || self._muted || Howler4._muted || node.muted;
+              node.volume = sound._volume * Howler4.volume();
               node.playbackRate = sound._rate;
               try {
                 var play = node.play();
@@ -686,7 +686,7 @@ var require_howler = __commonJS({
               node.src = self._src;
               node.load();
             }
-            var loadedNoReadyState = window && window.ejecta || !node.readyState && Howler3._navigator.isCocoonJS;
+            var loadedNoReadyState = window && window.ejecta || !node.readyState && Howler4._navigator.isCocoonJS;
             if (node.readyState >= 3 || loadedNoReadyState) {
               playHtml5();
             } else {
@@ -695,9 +695,9 @@ var require_howler = __commonJS({
               var listener = function() {
                 self._state = "loaded";
                 playHtml5();
-                node.removeEventListener(Howler3._canPlayEvent, listener, false);
+                node.removeEventListener(Howler4._canPlayEvent, listener, false);
               };
-              node.addEventListener(Howler3._canPlayEvent, listener, false);
+              node.addEventListener(Howler4._canPlayEvent, listener, false);
               self._clearTimer(sound._id);
             }
           }
@@ -835,9 +835,9 @@ var require_howler = __commonJS({
                 self._stopFade(sound._id);
               }
               if (self._webAudio && sound._node) {
-                sound._node.gain.setValueAtTime(muted ? 0 : sound._volume, Howler3.ctx.currentTime);
+                sound._node.gain.setValueAtTime(muted ? 0 : sound._volume, Howler4.ctx.currentTime);
               } else if (sound._node) {
-                sound._node.muted = Howler3._muted ? true : muted;
+                sound._node.muted = Howler4._muted ? true : muted;
               }
               self._emit("mute", sound._id);
             }
@@ -893,9 +893,9 @@ var require_howler = __commonJS({
                   self._stopFade(id[i]);
                 }
                 if (self._webAudio && sound._node && !sound._muted) {
-                  sound._node.gain.setValueAtTime(vol, Howler3.ctx.currentTime);
+                  sound._node.gain.setValueAtTime(vol, Howler4.ctx.currentTime);
                 } else if (sound._node && !sound._muted) {
-                  sound._node.volume = vol * Howler3.volume();
+                  sound._node.volume = vol * Howler4.volume();
                 }
                 self._emit("volume", sound._id);
               }
@@ -937,7 +937,7 @@ var require_howler = __commonJS({
                 self._stopFade(ids[i]);
               }
               if (self._webAudio && !sound._muted) {
-                var currentTime = Howler3.ctx.currentTime;
+                var currentTime = Howler4.ctx.currentTime;
                 var end = currentTime + len / 1e3;
                 sound._volume = from;
                 sound._node.gain.setValueAtTime(from, currentTime);
@@ -1003,7 +1003,7 @@ var require_howler = __commonJS({
           var sound = self._soundById(id);
           if (sound && sound._interval) {
             if (self._webAudio) {
-              sound._node.gain.cancelScheduledValues(Howler3.ctx.currentTime);
+              sound._node.gain.cancelScheduledValues(Howler4.ctx.currentTime);
             }
             clearInterval(sound._interval);
             sound._interval = null;
@@ -1105,11 +1105,11 @@ var require_howler = __commonJS({
               if (sound) {
                 if (self.playing(id[i])) {
                   sound._rateSeek = self.seek(id[i]);
-                  sound._playStart = self._webAudio ? Howler3.ctx.currentTime : sound._playStart;
+                  sound._playStart = self._webAudio ? Howler4.ctx.currentTime : sound._playStart;
                 }
                 sound._rate = rate;
                 if (self._webAudio && sound._node && sound._node.bufferSource) {
-                  sound._node.bufferSource.playbackRate.setValueAtTime(rate, Howler3.ctx.currentTime);
+                  sound._node.bufferSource.playbackRate.setValueAtTime(rate, Howler4.ctx.currentTime);
                 } else if (sound._node) {
                   sound._node.playbackRate = rate;
                 }
@@ -1203,7 +1203,7 @@ var require_howler = __commonJS({
               }
             } else {
               if (self._webAudio) {
-                var realTime = self.playing(id) ? Howler3.ctx.currentTime - sound._playStart : 0;
+                var realTime = self.playing(id) ? Howler4.ctx.currentTime - sound._playStart : 0;
                 var rateSeek = sound._rateSeek ? sound._rateSeek - sound._seek : 0;
                 return sound._seek + (rateSeek + realTime * Math.abs(sound._rate));
               } else {
@@ -1266,20 +1266,20 @@ var require_howler = __commonJS({
             if (!self._webAudio) {
               self._clearSound(sounds[i]._node);
               sounds[i]._node.removeEventListener("error", sounds[i]._errorFn, false);
-              sounds[i]._node.removeEventListener(Howler3._canPlayEvent, sounds[i]._loadFn, false);
+              sounds[i]._node.removeEventListener(Howler4._canPlayEvent, sounds[i]._loadFn, false);
               sounds[i]._node.removeEventListener("ended", sounds[i]._endFn, false);
-              Howler3._releaseHtml5Audio(sounds[i]._node);
+              Howler4._releaseHtml5Audio(sounds[i]._node);
             }
             delete sounds[i]._node;
             self._clearTimer(sounds[i]._id);
           }
-          var index = Howler3._howls.indexOf(self);
+          var index = Howler4._howls.indexOf(self);
           if (index >= 0) {
-            Howler3._howls.splice(index, 1);
+            Howler4._howls.splice(index, 1);
           }
           var remCache = true;
-          for (i = 0; i < Howler3._howls.length; i++) {
-            if (Howler3._howls[i]._src === self._src || self._src.indexOf(Howler3._howls[i]._src) >= 0) {
+          for (i = 0; i < Howler4._howls.length; i++) {
+            if (Howler4._howls[i]._src === self._src || self._src.indexOf(Howler4._howls[i]._src) >= 0) {
               remCache = false;
               break;
             }
@@ -1287,7 +1287,7 @@ var require_howler = __commonJS({
           if (cache && remCache) {
             delete cache[self._src];
           }
-          Howler3.noAudio = false;
+          Howler4.noAudio = false;
           self._state = "unloaded";
           self._sounds = [];
           self = null;
@@ -1420,7 +1420,7 @@ var require_howler = __commonJS({
             self._emit("play", sound._id);
             sound._seek = sound._start || 0;
             sound._rateSeek = 0;
-            sound._playStart = Howler3.ctx.currentTime;
+            sound._playStart = Howler4.ctx.currentTime;
             var timeout = (sound._stop - sound._start) * 1e3 / Math.abs(sound._rate);
             self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout);
           }
@@ -1431,7 +1431,7 @@ var require_howler = __commonJS({
             sound._rateSeek = 0;
             self._clearTimer(sound._id);
             self._cleanBuffer(sound._node);
-            Howler3._autoSuspend();
+            Howler4._autoSuspend();
           }
           if (!self._webAudio && !loop) {
             self.stop(sound._id, true);
@@ -1539,7 +1539,7 @@ var require_howler = __commonJS({
          */
         _refreshBuffer: function(sound) {
           var self = this;
-          sound._node.bufferSource = Howler3.ctx.createBufferSource();
+          sound._node.bufferSource = Howler4.ctx.createBufferSource();
           sound._node.bufferSource.buffer = cache[self._src];
           if (sound._panner) {
             sound._node.bufferSource.connect(sound._panner);
@@ -1551,7 +1551,7 @@ var require_howler = __commonJS({
             sound._node.bufferSource.loopStart = sound._start || 0;
             sound._node.bufferSource.loopEnd = sound._stop || 0;
           }
-          sound._node.bufferSource.playbackRate.setValueAtTime(sound._rate, Howler3.ctx.currentTime);
+          sound._node.bufferSource.playbackRate.setValueAtTime(sound._rate, Howler4.ctx.currentTime);
           return self;
         },
         /**
@@ -1561,16 +1561,16 @@ var require_howler = __commonJS({
          */
         _cleanBuffer: function(node) {
           var self = this;
-          var isIOS = Howler3._navigator && Howler3._navigator.vendor.indexOf("Apple") >= 0;
+          var isIOS = Howler4._navigator && Howler4._navigator.vendor.indexOf("Apple") >= 0;
           if (!node.bufferSource) {
             return self;
           }
-          if (Howler3._scratchBuffer && node.bufferSource) {
+          if (Howler4._scratchBuffer && node.bufferSource) {
             node.bufferSource.onended = null;
             node.bufferSource.disconnect(0);
             if (isIOS) {
               try {
-                node.bufferSource.buffer = Howler3._scratchBuffer;
+                node.bufferSource.buffer = Howler4._scratchBuffer;
               } catch (e) {
               }
             }
@@ -1583,7 +1583,7 @@ var require_howler = __commonJS({
          * @param  {Object} node Audio node to clear.
          */
         _clearSound: function(node) {
-          var checkIE = /MSIE |Trident\//.test(Howler3._navigator && Howler3._navigator.userAgent);
+          var checkIE = /MSIE |Trident\//.test(Howler4._navigator && Howler4._navigator.userAgent);
           if (!checkIE) {
             node.src = "data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA";
           }
@@ -1609,7 +1609,7 @@ var require_howler = __commonJS({
           self._paused = true;
           self._ended = true;
           self._sprite = "__default";
-          self._id = ++Howler3._counter;
+          self._id = ++Howler4._counter;
           parent._sounds.push(self);
           self.create();
           return self;
@@ -1621,23 +1621,23 @@ var require_howler = __commonJS({
         create: function() {
           var self = this;
           var parent = self._parent;
-          var volume = Howler3._muted || self._muted || self._parent._muted ? 0 : self._volume;
+          var volume = Howler4._muted || self._muted || self._parent._muted ? 0 : self._volume;
           if (parent._webAudio) {
-            self._node = typeof Howler3.ctx.createGain === "undefined" ? Howler3.ctx.createGainNode() : Howler3.ctx.createGain();
-            self._node.gain.setValueAtTime(volume, Howler3.ctx.currentTime);
+            self._node = typeof Howler4.ctx.createGain === "undefined" ? Howler4.ctx.createGainNode() : Howler4.ctx.createGain();
+            self._node.gain.setValueAtTime(volume, Howler4.ctx.currentTime);
             self._node.paused = true;
-            self._node.connect(Howler3.masterGain);
-          } else if (!Howler3.noAudio) {
-            self._node = Howler3._obtainHtml5Audio();
+            self._node.connect(Howler4.masterGain);
+          } else if (!Howler4.noAudio) {
+            self._node = Howler4._obtainHtml5Audio();
             self._errorFn = self._errorListener.bind(self);
             self._node.addEventListener("error", self._errorFn, false);
             self._loadFn = self._loadListener.bind(self);
-            self._node.addEventListener(Howler3._canPlayEvent, self._loadFn, false);
+            self._node.addEventListener(Howler4._canPlayEvent, self._loadFn, false);
             self._endFn = self._endListener.bind(self);
             self._node.addEventListener("ended", self._endFn, false);
             self._node.src = parent._src;
             self._node.preload = parent._preload === true ? "auto" : parent._preload;
-            self._node.volume = volume * Howler3.volume();
+            self._node.volume = volume * Howler4.volume();
             self._node.load();
           }
           return self;
@@ -1658,7 +1658,7 @@ var require_howler = __commonJS({
           self._paused = true;
           self._ended = true;
           self._sprite = "__default";
-          self._id = ++Howler3._counter;
+          self._id = ++Howler4._counter;
           return self;
         },
         /**
@@ -1684,7 +1684,7 @@ var require_howler = __commonJS({
             parent._emit("load");
             parent._loadQueue();
           }
-          self._node.removeEventListener(Howler3._canPlayEvent, self._loadFn, false);
+          self._node.removeEventListener(Howler4._canPlayEvent, self._loadFn, false);
         },
         /**
          * HTML5 Audio ended listener callback.
@@ -1766,10 +1766,10 @@ var require_howler = __commonJS({
             error();
           }
         };
-        if (typeof Promise !== "undefined" && Howler3.ctx.decodeAudioData.length === 1) {
-          Howler3.ctx.decodeAudioData(arraybuffer).then(success).catch(error);
+        if (typeof Promise !== "undefined" && Howler4.ctx.decodeAudioData.length === 1) {
+          Howler4.ctx.decodeAudioData(arraybuffer).then(success).catch(error);
         } else {
-          Howler3.ctx.decodeAudioData(arraybuffer, success, error);
+          Howler4.ctx.decodeAudioData(arraybuffer, success, error);
         }
       };
       var loadSound = function(self, buffer) {
@@ -1786,59 +1786,59 @@ var require_howler = __commonJS({
         }
       };
       var setupAudioContext = function() {
-        if (!Howler3.usingWebAudio) {
+        if (!Howler4.usingWebAudio) {
           return;
         }
         try {
           if (typeof AudioContext !== "undefined") {
-            Howler3.ctx = new AudioContext();
+            Howler4.ctx = new AudioContext();
           } else if (typeof webkitAudioContext !== "undefined") {
-            Howler3.ctx = new webkitAudioContext();
+            Howler4.ctx = new webkitAudioContext();
           } else {
-            Howler3.usingWebAudio = false;
+            Howler4.usingWebAudio = false;
           }
         } catch (e) {
-          Howler3.usingWebAudio = false;
+          Howler4.usingWebAudio = false;
         }
-        if (!Howler3.ctx) {
-          Howler3.usingWebAudio = false;
+        if (!Howler4.ctx) {
+          Howler4.usingWebAudio = false;
         }
-        var iOS = /iP(hone|od|ad)/.test(Howler3._navigator && Howler3._navigator.platform);
-        var appVersion = Howler3._navigator && Howler3._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
+        var iOS = /iP(hone|od|ad)/.test(Howler4._navigator && Howler4._navigator.platform);
+        var appVersion = Howler4._navigator && Howler4._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
         var version = appVersion ? parseInt(appVersion[1], 10) : null;
         if (iOS && version && version < 9) {
-          var safari = /safari/.test(Howler3._navigator && Howler3._navigator.userAgent.toLowerCase());
-          if (Howler3._navigator && !safari) {
-            Howler3.usingWebAudio = false;
+          var safari = /safari/.test(Howler4._navigator && Howler4._navigator.userAgent.toLowerCase());
+          if (Howler4._navigator && !safari) {
+            Howler4.usingWebAudio = false;
           }
         }
-        if (Howler3.usingWebAudio) {
-          Howler3.masterGain = typeof Howler3.ctx.createGain === "undefined" ? Howler3.ctx.createGainNode() : Howler3.ctx.createGain();
-          Howler3.masterGain.gain.setValueAtTime(Howler3._muted ? 0 : Howler3._volume, Howler3.ctx.currentTime);
-          Howler3.masterGain.connect(Howler3.ctx.destination);
+        if (Howler4.usingWebAudio) {
+          Howler4.masterGain = typeof Howler4.ctx.createGain === "undefined" ? Howler4.ctx.createGainNode() : Howler4.ctx.createGain();
+          Howler4.masterGain.gain.setValueAtTime(Howler4._muted ? 0 : Howler4._volume, Howler4.ctx.currentTime);
+          Howler4.masterGain.connect(Howler4.ctx.destination);
         }
-        Howler3._setup();
+        Howler4._setup();
       };
       if (typeof define === "function" && define.amd) {
         define([], function() {
           return {
-            Howler: Howler3,
+            Howler: Howler4,
             Howl: Howl3
           };
         });
       }
       if (typeof exports !== "undefined") {
-        exports.Howler = Howler3;
+        exports.Howler = Howler4;
         exports.Howl = Howl3;
       }
       if (typeof global !== "undefined") {
         global.HowlerGlobal = HowlerGlobal2;
-        global.Howler = Howler3;
+        global.Howler = Howler4;
         global.Howl = Howl3;
         global.Sound = Sound2;
       } else if (typeof window !== "undefined") {
         window.HowlerGlobal = HowlerGlobal2;
-        window.Howler = Howler3;
+        window.Howler = Howler4;
         window.Howl = Howl3;
         window.Sound = Sound2;
       }
@@ -2452,6 +2452,7 @@ var DEFAULT_ROTATE_DAMPING = 14;
 var DEFAULT_ZOOM_DAMPING = 16;
 var DEFAULT_FRICTION_STOP = 0.01;
 var VIEW_SETTLE_EPSILON = 1e-3;
+var DEFAULT_NAVIGATION_DURATION = 700;
 var PanoramaViewContext = createContext3(null);
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
@@ -2471,6 +2472,15 @@ function resolveDamping(value, fallback) {
 function resolveFrictionStop(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_FRICTION_STOP;
 }
+function resolveNavigationDuration(value) {
+  return Number.isFinite(value) && value >= 0 ? value : DEFAULT_NAVIGATION_DURATION;
+}
+function applyNavigationEasing(progress, easing) {
+  if (easing === "linear") {
+    return progress;
+  }
+  return progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+}
 function viewsEqual(a, b) {
   return a.yaw === b.yaw && a.pitch === b.pitch && a.fov === b.fov;
 }
@@ -2504,13 +2514,14 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
   const xrEulerRef = useRef(new Euler(0, 0, 0, "YXZ"));
   const minFovRef = useRef(minFov);
   const maxFovRef = useRef(maxFov);
+  const activeNavigationRef = useRef(null);
   optionsRef.current = options;
   eventBusRef.current = eventBus;
   xrSessionRef.current = xrSession;
   minFovRef.current = minFov;
   maxFovRef.current = maxFov;
   const hasInertia = () => yawVelocityRef.current !== 0 || pitchVelocityRef.current !== 0 || zoomVelocityRef.current !== 0;
-  const isUserInteracting = () => mouseActiveRef.current || touchActiveRef.current || keyboardActiveRef.current || gyroActiveRef.current || interactionLockCountRef.current > 0 || xrSessionRef.current != null || hasInertia();
+  const isUserInteracting = () => mouseActiveRef.current || touchActiveRef.current || keyboardActiveRef.current || gyroActiveRef.current || interactionLockCountRef.current > 0 || xrSessionRef.current != null || activeNavigationRef.current != null || hasInertia();
   const syncInteracting = () => {
     interactingRef.current = mouseActiveRef.current || touchActiveRef.current;
   };
@@ -2552,6 +2563,14 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     zoomVelocityRef.current = 0;
     lastVelocitySampleAtRef.current = null;
   };
+  const cancelNavigation = () => {
+    const navigation = activeNavigationRef.current;
+    if (!navigation) {
+      return;
+    }
+    activeNavigationRef.current = null;
+    navigation.resolve({ status: "cancelled" });
+  };
   const markDirty = () => {
     dirtyRef.current = true;
     settledRef.current = false;
@@ -2564,6 +2583,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     }
   };
   const acquireInteractionLock = () => {
+    cancelNavigation();
     interactionLockCountRef.current += 1;
     stopVelocity();
     if (mouseActiveRef.current) {
@@ -2588,6 +2608,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     };
   };
   const setView = (view, setOptions) => {
+    cancelNavigation();
     const nextView = hardConstrainView(view);
     if (gyroActiveRef.current) {
       gyroOffsetRef.current = {
@@ -2602,7 +2623,66 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     }
     markDirty();
   };
+  const startNavigation = (targetInput, options2) => {
+    cancelNavigation();
+    if (xrSessionRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0) {
+      return Promise.resolve({ status: "cancelled" });
+    }
+    const from = { ...viewRef.current };
+    const safeTargetInput = {
+      yaw: targetInput.yaw !== void 0 && Number.isFinite(targetInput.yaw) ? targetInput.yaw : from.yaw,
+      pitch: targetInput.pitch !== void 0 && Number.isFinite(targetInput.pitch) ? targetInput.pitch : from.pitch,
+      fov: targetInput.fov !== void 0 && Number.isFinite(targetInput.fov) ? targetInput.fov : from.fov
+    };
+    const target = hardConstrainView(safeTargetInput, from);
+    const duration = resolveNavigationDuration(options2?.duration);
+    const rawYawDelta = targetInput.yaw !== void 0 && Number.isFinite(targetInput.yaw) ? safeTargetInput.yaw - from.yaw : 0;
+    const yawDelta = options2?.shortestPath === false ? rawYawDelta : shortestYawDelta(from.yaw, target.yaw);
+    stopVelocity();
+    targetViewRef.current = target;
+    markDirty();
+    if (duration === 0) {
+      viewRef.current = target;
+      return Promise.resolve({ status: "completed" });
+    }
+    return new Promise((resolve) => {
+      activeNavigationRef.current = {
+        from,
+        target,
+        yawDelta,
+        startedAt: performance.now(),
+        duration,
+        easing: options2?.easing,
+        resolve
+      };
+    });
+  };
+  const lookTo = (position, options2) => startNavigation(
+    {
+      yaw: position.yaw,
+      pitch: position.pitch,
+      fov: options2?.fov ?? viewRef.current.fov
+    },
+    options2
+  );
+  const moveTo = (position, options2) => startNavigation(
+    {
+      yaw: position.yaw,
+      pitch: position.pitch,
+      fov: viewRef.current.fov
+    },
+    options2
+  );
+  const zoomTo = (fov, options2) => startNavigation(
+    {
+      yaw: viewRef.current.yaw,
+      pitch: viewRef.current.pitch,
+      fov
+    },
+    options2
+  );
   const applyViewDelta = (delta, applyOptions) => {
+    cancelNavigation();
     if (interactionLockCountRef.current > 0 || xrSessionRef.current != null) {
       return false;
     }
@@ -2653,10 +2733,16 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       getTargetView: () => ({ ...targetViewRef.current }),
       setView,
       reset: () => setView(initialViewRef.current),
+      lookTo,
+      moveTo,
+      zoomTo,
       applyViewDelta,
       setKeyboardActive: (active) => {
         const wasActive = keyboardActiveRef.current;
         keyboardActiveRef.current = active;
+        if (active) {
+          cancelNavigation();
+        }
         if (active && !wasActive) {
           eventBusRef.current.emit("viewinteractionstart", {
             source: "keyboard"
@@ -2674,6 +2760,9 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
         } else {
           touchActiveRef.current = active;
         }
+        if (active) {
+          cancelNavigation();
+        }
         syncInteracting();
         if (active && !wasActive) {
           eventBusRef.current.emit("viewinteractionstart", { source });
@@ -2690,6 +2779,9 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       isInteractionLocked: () => interactionLockCountRef.current > 0,
       isUserInteracting,
       setGyroActive: (active) => {
+        if (active) {
+          cancelNavigation();
+        }
         gyroActiveRef.current = active;
         gyroOffsetRef.current = { yaw: 0, pitch: 0 };
         stopVelocity();
@@ -2726,7 +2818,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       acquireInteractionLock,
       applyAutoRotation: (yawDelta) => {
         const inertiaFinished = yawVelocityRef.current === 0 && pitchVelocityRef.current === 0 && zoomVelocityRef.current === 0;
-        if (!Number.isFinite(yawDelta) || xrSessionRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0 || interactingRef.current || keyboardActiveRef.current || !inertiaFinished) {
+        if (!Number.isFinite(yawDelta) || xrSessionRef.current != null || activeNavigationRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0 || interactingRef.current || keyboardActiveRef.current || !inertiaFinished) {
           return false;
         }
         targetViewRef.current.yaw += yawDelta;
@@ -2736,6 +2828,12 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     }),
     []
   );
+  useEffect(
+    () => () => {
+      cancelNavigation();
+    },
+    []
+  );
   useEffect(() => {
     initialViewRef.current = { ...initialView };
     setView(initialView);
@@ -2745,6 +2843,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       return;
     }
     if (xrSessionRef.current && gl.xr.isPresenting) {
+      cancelNavigation();
       const xrCamera = gl.xr.getCamera();
       xrEulerRef.current.setFromQuaternion(xrCamera.quaternion, "YXZ");
       const nextView2 = {
@@ -2765,6 +2864,48 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       }
       return;
     }
+    const navigation = activeNavigationRef.current;
+    if (navigation) {
+      const progress = Math.min(
+        1,
+        Math.max(0, (performance.now() - navigation.startedAt) / navigation.duration)
+      );
+      const easedProgress = applyNavigationEasing(progress, navigation.easing);
+      const nextView2 = {
+        yaw: normalizeYaw(navigation.from.yaw + navigation.yawDelta * easedProgress),
+        pitch: navigation.from.pitch + (navigation.target.pitch - navigation.from.pitch) * easedProgress,
+        fov: navigation.from.fov + (navigation.target.fov - navigation.from.fov) * easedProgress
+      };
+      const completed = progress === 1;
+      viewRef.current = completed ? { ...navigation.target } : nextView2;
+      eulerRef.current.set(
+        MathUtils.degToRad(viewRef.current.pitch),
+        MathUtils.degToRad(-viewRef.current.yaw),
+        MathUtils.degToRad(cameraRollRef.current),
+        "YXZ"
+      );
+      camera.quaternion.setFromEuler(eulerRef.current);
+      camera.fov = viewRef.current.fov;
+      camera.updateProjectionMatrix();
+      camera.updateMatrixWorld();
+      const emittedView = { ...viewRef.current };
+      const lastEmitted2 = lastEmittedViewRef.current;
+      if (!lastEmitted2 || !viewsEqual(lastEmitted2, emittedView)) {
+        lastEmittedViewRef.current = emittedView;
+        eventBusRef.current.emit("viewchange", emittedView);
+      }
+      if (completed) {
+        activeNavigationRef.current = null;
+        settledRef.current = true;
+        eventBusRef.current.emit("viewsettled", emittedView);
+        navigation.resolve({ status: "completed" });
+        dirtyRef.current = false;
+      } else {
+        settledRef.current = false;
+        dirtyRef.current = true;
+      }
+      return;
+    }
     const frictionStop = resolveFrictionStop(optionsRef.current.frictionStop);
     const inertiaEnabled = optionsRef.current.inertia !== false;
     if (!interactingRef.current && !gyroActiveRef.current && inertiaEnabled) {
@@ -3115,6 +3256,30 @@ function useHotspotAccessibilityLayer() {
   return { controls, registry };
 }
 
+// src/hotspot/target-registry.ts
+import { createContext as createContext6 } from "react";
+var HotspotTargetRegistryContext = createContext6(
+  null
+);
+function createHotspotTargetRegistry() {
+  const targets = /* @__PURE__ */ new Map();
+  return {
+    getPosition: (id) => {
+      const target = targets.get(id);
+      return target ? { ...target.position } : null;
+    },
+    register: (id, position) => {
+      const token = Symbol(id);
+      targets.set(id, { token, position: { ...position } });
+      return () => {
+        if (targets.get(id)?.token === token) {
+          targets.delete(id);
+        }
+      };
+    }
+  };
+}
+
 // src/keyboard-controls.tsx
 import { useFrame as useFrame3, useThree as useThree2 } from "@react-three/fiber";
 import { useContext as useContext4, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4 } from "react";
@@ -3532,7 +3697,7 @@ function MouseControls({
 }
 
 // src/pano-filter/host.ts
-import { createContext as createContext6, useContext as useContext6, useSyncExternalStore } from "react";
+import { createContext as createContext7, useContext as useContext6, useSyncExternalStore } from "react";
 
 // src/pano-filter/presets.ts
 var PANO_FILTER_PRESETS = [
@@ -3573,7 +3738,7 @@ function isPanoFilterActive(snapshot) {
 }
 
 // src/pano-filter/host.ts
-var PanoFilterHostContext = createContext6(null);
+var PanoFilterHostContext = createContext7(null);
 function createPanoFilterHost() {
   return {
     snapshot: { ...DEFAULT_PANO_FILTER_SNAPSHOT },
@@ -3642,9 +3807,9 @@ function isProduction2() {
 }
 
 // src/media-activation.tsx
-import { createContext as createContext7, useContext as useContext7, useEffect as useEffect6, useRef as useRef6 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var PanoMediaActivationHostContext = createContext7(null);
+var import_howler2 = __toESM(require_howler());
+import { createContext as createContext8, useContext as useContext7, useEffect as useEffect6, useRef as useRef6 } from "react";
+var PanoMediaActivationHostContext = createContext8(null);
 function createPanoMediaActivationHost() {
   return { intents: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(), revision: 0 };
 }
@@ -3666,6 +3831,15 @@ function subscribePanoMediaActivation(host, listener) {
 function hasPanoMediaActivationIntent(host) {
   return host.intents.size > 0;
 }
+function needsMediaGesture() {
+  if (typeof navigator !== "undefined" && navigator.userActivation?.hasBeenActive) {
+    return false;
+  }
+  if (import_howler2.Howler.ctx?.state === "running") {
+    return false;
+  }
+  return true;
+}
 function usePanoMediaActivationIntent(required) {
   const host = useContext7(PanoMediaActivationHostContext);
   const keyRef = useRef6(null);
@@ -3685,27 +3859,10 @@ function usePanoMediaActivationIntent(required) {
     };
   }, [host, required]);
 }
-function PanoMediaActivationOverlay({
-  ariaLabel = "Enable sound",
-  className,
-  message = "Tap to enable sound",
-  onActivate
-}) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("pano-media-activation", className), children: /* @__PURE__ */ jsx2(
-    "button",
-    {
-      "aria-label": ariaLabel,
-      className: "pano-media-activation-button",
-      onClick: onActivate,
-      type: "button",
-      children: message
-    }
-  ) });
-}
 
 // src/pano-context-menu.tsx
 import {
-  createContext as createContext8,
+  createContext as createContext9,
   useCallback as useCallback2,
   useContext as useContext8,
   useEffect as useEffect7,
@@ -3715,11 +3872,11 @@ import {
   useRef as useRef7,
   useState as useState2
 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
-var PanoContextMenuOverlayContext = createContext8(null);
+var PanoContextMenuOverlayContext = createContext9(null);
 var DEFAULT_APPEARANCE = {
   background: "#161616",
   color: "#f4f4f4",
@@ -3889,7 +4046,7 @@ function DefaultContextMenuPanel({
       style: panelStyle,
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             "aria-hidden": true,
@@ -3901,9 +4058,9 @@ function DefaultContextMenuPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsx3("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
+        /* @__PURE__ */ jsx2("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
           if (!isActionItem(item)) {
-            return /* @__PURE__ */ jsx3(
+            return /* @__PURE__ */ jsx2(
               "div",
               {
                 "aria-hidden": true,
@@ -3920,7 +4077,7 @@ function DefaultContextMenuPanel({
             );
           }
           const disabled = item.disabled === true;
-          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ jsx3(
+          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ jsx2(
             "img",
             {
               alt: item.imageAlt ?? "",
@@ -3970,7 +4127,7 @@ function DefaultContextMenuPanel({
               tabIndex: disabled ? -1 : activeIndex === index ? 0 : -1,
               type: "button",
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx2(
                   "span",
                   {
                     "aria-hidden": true,
@@ -3982,7 +4139,7 @@ function DefaultContextMenuPanel({
                     children: iconNode
                   }
                 ),
-                /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: item.label })
+                /* @__PURE__ */ jsx2("span", { style: { flex: 1 }, children: item.label })
               ]
             },
             item.id
@@ -4035,7 +4192,7 @@ function PositionedMenuShell({
       top: Math.min(Math.max(rawTop, MENU_EDGE_PADDING), maxTop)
     });
   }, [clientX, clientY, overlayElement, children, viewportRevision]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: "pano-context-menu-shell",
@@ -4094,7 +4251,7 @@ function usePanoContextMenuOverlay() {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [session2]);
-  const overlay = /* @__PURE__ */ jsx3(
+  const overlay = /* @__PURE__ */ jsx2(
     "div",
     {
       ref: setOverlayNode,
@@ -4105,7 +4262,7 @@ function usePanoContextMenuOverlay() {
         position: "absolute",
         zIndex: 20
       },
-      children: session2 ? /* @__PURE__ */ jsx3(
+      children: session2 ? /* @__PURE__ */ jsx2(
         PositionedMenuShell,
         {
           clientX: session2.event.clientX,
@@ -4198,9 +4355,9 @@ function PanoContextMenu({
         view,
         render: () => {
           if (hasCustomChildren && current.children) {
-            return /* @__PURE__ */ jsx3("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
+            return /* @__PURE__ */ jsx2("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
           }
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsx2(
             DefaultContextMenuPanel,
             {
               appearance: current.appearance,
@@ -4251,14 +4408,14 @@ function ResetViewIcon() {
       viewBox: "0 0 16 16",
       width: "100%",
       children: [
-        /* @__PURE__ */ jsx3("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
-        /* @__PURE__ */ jsx3("path", { d: "M3.5 3.5v3h3" })
+        /* @__PURE__ */ jsx2("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
+        /* @__PURE__ */ jsx2("path", { d: "M3.5 3.5v3h3" })
       ]
     }
   );
 }
 function FullscreenIcon() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "svg",
     {
       "aria-hidden": true,
@@ -4270,12 +4427,12 @@ function FullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ jsx3("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
+      children: /* @__PURE__ */ jsx2("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
     }
   );
 }
 function ExitFullscreenIcon() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "svg",
     {
       "aria-hidden": true,
@@ -4287,7 +4444,7 @@ function ExitFullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ jsx3("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
+      children: /* @__PURE__ */ jsx2("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
     }
   );
 }
@@ -4296,7 +4453,7 @@ function createPanoContextMenuPresets(actions) {
   const resetView = {
     id: "pano-reset-view",
     label: "Reset view",
-    icon: /* @__PURE__ */ jsx3(ResetViewIcon, {}),
+    icon: /* @__PURE__ */ jsx2(ResetViewIcon, {}),
     onSelect: () => {
       actions.reset();
     }
@@ -4304,7 +4461,7 @@ function createPanoContextMenuPresets(actions) {
   const fullscreen = {
     id: "pano-fullscreen",
     label: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-    icon: isFullscreen ? /* @__PURE__ */ jsx3(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx3(FullscreenIcon, {}),
+    icon: isFullscreen ? /* @__PURE__ */ jsx2(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx2(FullscreenIcon, {}),
     onSelect: () => {
       actions.toggleFullscreen();
     }
@@ -4397,19 +4554,19 @@ function composePanoContextMenuItems(props, presets) {
     ...resolvePanoContextMenuEntries(props.append ?? [], presets)
   ];
 }
-var PanoContextMenuActionsContext = createContext8(null);
+var PanoContextMenuActionsContext = createContext9(null);
 
 // src/pano-cursor.tsx
 import { useThree as useThree4 } from "@react-three/fiber";
 import {
-  createContext as createContext9,
+  createContext as createContext10,
   useCallback as useCallback3,
   useContext as useContext9,
   useEffect as useEffect8,
   useMemo as useMemo4,
   useRef as useRef8
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var DEFAULT_PANO_CURSORS = {
   default: "grab",
   dragging: "grabbing",
@@ -4423,7 +4580,7 @@ var LAYER_PRIORITY = {
   hotspotDragging: 3,
   hidden: 4
 };
-var PanoCursorContext = createContext9(null);
+var PanoCursorContext = createContext10(null);
 function usePanoCursor() {
   return useContext9(PanoCursorContext);
 }
@@ -4551,7 +4708,7 @@ function PanoCursorController({
       release(PANO_DRAG_CLAIM_ID);
     };
   }, [claim, eventBus, release]);
-  return /* @__PURE__ */ jsx4(PanoCursorContext.Provider, { value: api, children });
+  return /* @__PURE__ */ jsx3(PanoCursorContext.Provider, { value: api, children });
 }
 
 // src/pano-events.tsx
@@ -4912,7 +5069,7 @@ var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
 var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
 
 // src/panorama-event-surface.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -4980,8 +5137,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ jsx5("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ jsx4(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -4998,8 +5155,8 @@ function PanoramaEventSurface() {
 }
 
 // src/scenes-host.ts
-import { createContext as createContext10 } from "react";
-var ScenesHostContext = createContext10(null);
+import { createContext as createContext11 } from "react";
+var ScenesHostContext = createContext11(null);
 function createScenesHost() {
   return {
     controller: null,
@@ -5162,9 +5319,9 @@ function TouchControls({
 }
 
 // src/video/chrome-overlay.tsx
-import { createContext as createContext11, useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var PanoChromeOverlayContext = createContext11(null);
+import { createContext as createContext12, useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PanoChromeOverlayContext = createContext12(null);
 function usePanoChromeOverlay() {
   const [overlayElement, setOverlayElement] = useState3(
     null
@@ -5176,7 +5333,7 @@ function usePanoChromeOverlay() {
     () => ({ overlayElement }),
     [overlayElement]
   );
-  const overlay = /* @__PURE__ */ jsx6(
+  const overlay = /* @__PURE__ */ jsx5(
     "div",
     {
       className: "pano-chrome-overlay",
@@ -5188,9 +5345,9 @@ function usePanoChromeOverlay() {
 }
 
 // src/video/host.ts
-import { createContext as createContext12, useContext as useContext13 } from "react";
-var PanoVideoHostContext = createContext12(null);
-var DefaultPanoVideoControlsContext = createContext12(false);
+import { createContext as createContext13, useContext as useContext13 } from "react";
+var PanoVideoHostContext = createContext13(null);
+var DefaultPanoVideoControlsContext = createContext13(false);
 function createPanoVideoHost() {
   return {
     controller: null,
@@ -5253,7 +5410,7 @@ import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 
 // src/video/pano-video-captions.tsx
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
   background: "rgba(0, 0, 0, 0.55)",
@@ -5301,13 +5458,13 @@ function PanoVideoCaptionsOverlay({
     textShadow: snapshot.captionAppearance.textShadow,
     whiteSpace: "pre-wrap"
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: "pano-video-captions",
       "data-pano-video-captions": "",
       style: wrapperStyle,
-      children: /* @__PURE__ */ jsx7("div", { style: textStyle, children: snapshot.captionText })
+      children: /* @__PURE__ */ jsx6("div", { style: textStyle, children: snapshot.captionText })
     }
   );
 }
@@ -5459,7 +5616,7 @@ function cueText(cue) {
 }
 
 // src/video/pano-video-controls.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE = {
   background: "rgba(16, 16, 16, 0.88)",
   color: "#f4f4f4",
@@ -5520,7 +5677,7 @@ function volumeFromClientY(clientY, track) {
   return Math.max(0, Math.min(1, (rect.bottom - clientY) / rect.height));
 }
 function Icon({ path }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "svg",
     {
       "aria-hidden": true,
@@ -5532,7 +5689,7 @@ function Icon({ path }) {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "16",
-      children: /* @__PURE__ */ jsx8("path", { d: path })
+      children: /* @__PURE__ */ jsx7("path", { d: path })
     }
   );
 }
@@ -5544,7 +5701,7 @@ function ChromeButton({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       "aria-label": label,
@@ -5570,14 +5727,14 @@ function ChromeMenu({
   labelledBy,
   items
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: items.map((item) => /* @__PURE__ */ jsx8(
+      children: items.map((item) => /* @__PURE__ */ jsx7(
         ChromeMenuRadioItem,
         {
           active: item.active,
@@ -5597,7 +5754,7 @@ function ChromeMenuSurface({
   labelledBy,
   role
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "aria-labelledby": labelledBy,
@@ -5621,7 +5778,7 @@ function ChromeMenuRadioItem({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       "aria-checked": active,
@@ -5661,7 +5818,7 @@ function ChromeMenuActionItem({
       },
       type: "button",
       children: [
-        /* @__PURE__ */ jsx8("span", { children: label }),
+        /* @__PURE__ */ jsx7("span", { children: label }),
         secondary
       ]
     }
@@ -5670,10 +5827,10 @@ function ChromeMenuActionItem({
 function ChromeMenuSectionLabel({
   children
 }) {
-  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-label", children });
+  return /* @__PURE__ */ jsx7("div", { className: "pano-video-chrome-menu-label", children });
 }
 function ChromeMenuDivider() {
-  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-divider" });
+  return /* @__PURE__ */ jsx7("div", { className: "pano-video-chrome-menu-divider" });
 }
 function CaptionsMenu({
   appearance,
@@ -5686,7 +5843,7 @@ function CaptionsMenu({
   panel,
   snapshot
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     ChromeMenuSurface,
     {
       appearance,
@@ -5695,7 +5852,7 @@ function CaptionsMenu({
       role: "menu",
       children: panel === "tracks" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
         /* @__PURE__ */ jsxs3("div", { className: "pano-video-chrome-menu-list", children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx7(
             ChromeMenuRadioItem,
             {
               active: snapshot.trackId === null,
@@ -5708,7 +5865,7 @@ function CaptionsMenu({
           ),
           snapshot.tracks.map((track) => {
             const trackItemId = panoVideoTrackId(track);
-            return /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsx7(
               ChromeMenuRadioItem,
               {
                 active: snapshot.trackId === trackItemId,
@@ -5722,29 +5879,29 @@ function CaptionsMenu({
             );
           })
         ] }),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx7(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Settings",
             onClick: onOpenSettings,
-            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u203A" })
+            secondary: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u203A" })
           }
         )
       ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Back",
             onClick: onShowTracks,
-            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u2039" })
+            secondary: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u2039" })
           }
         ),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Font size" }),
-        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx7(ChromeMenuSectionLabel, { children: "Font size" }),
+        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
           ChromeMenuRadioItem,
           {
             active: Number(snapshot.captionAppearance.fontSize) === option.value,
@@ -5756,9 +5913,9 @@ function CaptionsMenu({
           },
           option.id
         )),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Background" }),
-        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx7(ChromeMenuSectionLabel, { children: "Background" }),
+        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
           ChromeMenuRadioItem,
           {
             active: snapshot.captionAppearance.background === option.value,
@@ -5813,7 +5970,7 @@ function VerticalVolumeSlider({
         pointerEvents: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             "aria-hidden": true,
@@ -5825,7 +5982,7 @@ function VerticalVolumeSlider({
             children: percentLabel
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             style: {
@@ -5865,7 +6022,7 @@ function VerticalVolumeSlider({
                 },
                 tabIndex: 0,
                 children: [
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx7(
                     "div",
                     {
                       style: {
@@ -5880,7 +6037,7 @@ function VerticalVolumeSlider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx7(
                     "div",
                     {
                       style: {
@@ -5939,13 +6096,13 @@ function VolumeControl({
     };
   }, [open, volumeAdjustable]);
   if (!volumeAdjustable) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx7(
       ChromeButton,
       {
         appearance,
         label: mutedOrSilent ? "Unmute" : "Mute",
         onClick: onToggleMuted,
-        children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+        children: mutedOrSilent ? /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
       }
     );
   }
@@ -5977,7 +6134,7 @@ function VolumeControl({
       },
       ref: rootRef,
       children: [
-        open ? /* @__PURE__ */ jsx8(
+        open ? /* @__PURE__ */ jsx7(
           VerticalVolumeSlider,
           {
             appearance,
@@ -5985,7 +6142,7 @@ function VolumeControl({
             volume: displayVolume
           }
         ) : null,
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           ChromeButton,
           {
             appearance,
@@ -5996,7 +6153,7 @@ function VolumeControl({
               }
               onToggleMuted();
             },
-            children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+            children: mutedOrSilent ? /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
           }
         )
       ]
@@ -6156,7 +6313,7 @@ function PanoVideoControlsHud({
   let menuNode = null;
   switch (menu) {
     case "rate":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx7(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6175,7 +6332,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "variant":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx7(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6194,7 +6351,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "captions":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx7(
         CaptionsMenu,
         {
           appearance: resolved,
@@ -6218,7 +6375,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "more":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx7(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6286,7 +6443,7 @@ function PanoVideoControlsHud({
   };
   const rateButton = /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
     !compact && menu === "rate" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       ChromeButton,
       {
         appearance: resolved,
@@ -6294,13 +6451,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("rate");
         },
-        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
+        children: /* @__PURE__ */ jsx7("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
       }
     )
   ] });
   const variantButton = canSwitchVariant ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
     !compact && menu === "variant" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       ChromeButton,
       {
         appearance: resolved,
@@ -6308,13 +6465,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("variant");
         },
-        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
+        children: /* @__PURE__ */ jsx7("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
       }
     )
   ] }) : null;
   const captionsButton = showCaptionsMenu ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
     !compact && menu === "captions" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       ChromeButton,
       {
         appearance: resolved,
@@ -6322,7 +6479,7 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("captions");
         },
-        children: /* @__PURE__ */ jsx8("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx8(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
+        children: /* @__PURE__ */ jsx7("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx7(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
       }
     )
   ] }) : null;
@@ -6333,7 +6490,7 @@ function PanoVideoControlsHud({
       "data-pano-video-controls": "",
       style: barStyle,
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           ChromeButton,
           {
             appearance: resolved,
@@ -6341,11 +6498,11 @@ function PanoVideoControlsHud({
             onClick: () => {
               controller.togglePlay();
             },
-            children: snapshot.playing ? /* @__PURE__ */ jsx8(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx8(Icon, { path: "M5 3.2v9.6L13 8z" })
+            children: snapshot.playing ? /* @__PURE__ */ jsx7(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx7(Icon, { path: "M5 3.2v9.6L13 8z" })
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
-        /* @__PURE__ */ jsx8(
+        hideTime ? null : /* @__PURE__ */ jsx7("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
+        /* @__PURE__ */ jsx7(
           "input",
           {
             "aria-label": "Seek",
@@ -6367,8 +6524,8 @@ function PanoVideoControlsHud({
             value: duration > 0 ? snapshot.currentTime : 0
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ jsx8(
+        hideTime ? null : /* @__PURE__ */ jsx7("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
+        /* @__PURE__ */ jsx7(
           VolumeControl,
           {
             appearance: resolved,
@@ -6386,7 +6543,7 @@ function PanoVideoControlsHud({
         ),
         compact ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
           menu !== null ? menuNode : null,
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx7(
             ChromeButton,
             {
               appearance: resolved,
@@ -6395,7 +6552,7 @@ function PanoVideoControlsHud({
               onClick: () => {
                 toggleMenu("more");
               },
-              children: /* @__PURE__ */ jsx8(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
+              children: /* @__PURE__ */ jsx7(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
             }
           )
         ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -6403,7 +6560,7 @@ function PanoVideoControlsHud({
           variantButton,
           captionsButton
         ] }),
-        showFullscreen ? /* @__PURE__ */ jsx8(
+        showFullscreen ? /* @__PURE__ */ jsx7(
           ChromeButton,
           {
             appearance: resolved,
@@ -6411,7 +6568,7 @@ function PanoVideoControlsHud({
             onClick: () => {
               fullscreen?.toggleFullscreen();
             },
-            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx8(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
+            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx7(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
           }
         ) : null
       ]
@@ -6428,7 +6585,7 @@ function PanoVideoControls({ appearance }) {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function PanoVideoChromeBridge({
   fullscreen,
   host,
@@ -6444,7 +6601,7 @@ function PanoVideoChromeBridge({
   }
   const showDefaultControls = host.controller !== null && host.controls !== false && host.controlClaims === 0;
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    showDefaultControls ? /* @__PURE__ */ jsx9(
+    showDefaultControls ? /* @__PURE__ */ jsx8(
       PanoVideoControlsHud,
       {
         appearance: typeof host.controls === "object" ? host.controls : void 0,
@@ -6453,7 +6610,7 @@ function PanoVideoChromeBridge({
         overlayElement
       }
     ) : null,
-    host.captions !== false && host.controller ? /* @__PURE__ */ jsx9(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
+    host.captions !== false && host.controller ? /* @__PURE__ */ jsx8(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
   ] });
 }
 
@@ -6461,8 +6618,8 @@ function PanoVideoChromeBridge({
 import { useSyncExternalStore as useSyncExternalStore5 } from "react";
 
 // src/webvr/host.ts
-import { createContext as createContext13 } from "react";
-var WebVRRuntimeContext = createContext13(null);
+import { createContext as createContext14 } from "react";
+var WebVRRuntimeContext = createContext14(null);
 function createWebVRHost() {
   return {
     controller: null,
@@ -6606,7 +6763,7 @@ function clamp2(value, min, max) {
 }
 
 // src/webvr/chrome.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -6618,7 +6775,7 @@ function ChromeButton2({
   children,
   onClick
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       className: "pano-webvr-button",
@@ -6663,11 +6820,11 @@ function SetupPanel({
       role: "dialog",
       style: panelStyle,
       children: [
-        /* @__PURE__ */ jsx10("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
+        /* @__PURE__ */ jsx9("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
         /* @__PURE__ */ jsxs5("label", { className: "pano-webvr-setup-field", children: [
           "Screen size (inch)",
           /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 "aria-label": "Decrease screen size",
@@ -6679,8 +6836,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 "aria-label": "Increase screen size",
@@ -6695,9 +6852,9 @@ function SetupPanel({
           ] })
         ] }),
         /* @__PURE__ */ jsxs5("fieldset", { className: "pano-webvr-setup-fieldset", children: [
-          /* @__PURE__ */ jsx10("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
+          /* @__PURE__ */ jsx9("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
           /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 "aria-label": "Previous headset preset",
@@ -6707,8 +6864,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 "aria-label": "Next headset preset",
@@ -6720,7 +6877,7 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           ChromeButton2,
           {
             appearance,
@@ -6744,8 +6901,8 @@ function WebVRChromeBridge({ host }) {
   }
   const appearance = resolveAppearance(chrome);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx10("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
-      mode !== "webxr" ? /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx9("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
+      mode !== "webxr" ? /* @__PURE__ */ jsx9(
         ChromeButton2,
         {
           appearance,
@@ -6753,7 +6910,7 @@ function WebVRChromeBridge({ host }) {
           children: "VR Setup"
         }
       ) : null,
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx9(
         ChromeButton2,
         {
           appearance,
@@ -6761,7 +6918,7 @@ function WebVRChromeBridge({ host }) {
           children: "Exit VR"
         }
       )
-    ] }) : /* @__PURE__ */ jsx10(
+    ] }) : /* @__PURE__ */ jsx9(
       ChromeButton2,
       {
         appearance,
@@ -6769,7 +6926,7 @@ function WebVRChromeBridge({ host }) {
         children: available ? "Enter VR" : "VR unavailable"
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ jsx10(
+    mode === "fake" ? /* @__PURE__ */ jsx9(
       "p",
       {
         className: "pano-webvr-hint",
@@ -6777,7 +6934,7 @@ function WebVRChromeBridge({ host }) {
         children: "Simulated VR Mode \xB7 Click the view to lock the mouse, then move to look around. Use a headset or phone for real VR."
       }
     ) : null,
-    setupOpen ? /* @__PURE__ */ jsx10(
+    setupOpen ? /* @__PURE__ */ jsx9(
       SetupPanel,
       {
         appearance,
@@ -6819,7 +6976,7 @@ import { useFrame as useFrame5, useThree as useThree8 } from "@react-three/fiber
 import { useXR as useXR2, XROrigin } from "@react-three/xr";
 import { useRef as useRef12 } from "react";
 import { Vector3 as Vector34 } from "three";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function PanoramaXROrigin() {
   const originRef = useRef12(null);
   const localHeadPositionRef = useRef12(new Vector34());
@@ -6835,11 +6992,11 @@ function PanoramaXROrigin() {
     origin.position.copy(localHeadPositionRef.current).multiplyScalar(-1);
     origin.updateMatrixWorld();
   }, -100);
-  return /* @__PURE__ */ jsx11(XROrigin, { ref: originRef });
+  return /* @__PURE__ */ jsx10(XROrigin, { ref: originRef });
 }
 
 // src/pano-viewer.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -6884,7 +7041,7 @@ function PanoCursorTree({
   if (!cursors) {
     return children;
   }
-  return /* @__PURE__ */ jsx12(PanoCursorController, { cursors, children });
+  return /* @__PURE__ */ jsx11(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
   const host = useContext15(PanoVideoHostContext);
@@ -6905,9 +7062,9 @@ function DefaultControlChannels({
     return null;
   }
   return /* @__PURE__ */ jsxs6(DefaultControlChannelContext.Provider, { value: true, children: [
-    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx12(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
-    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx12(TouchControls, { ...touchChannel.props }) : null,
-    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx12(
+    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx11(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
+    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx11(TouchControls, { ...touchChannel.props }) : null,
+    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx11(
       KeyboardControls,
       {
         ...keyboardChannel.props,
@@ -6939,6 +7096,7 @@ var PanoViewer = forwardRef2(
     const controlsRef = useRef13(null);
     const eventBus = useMemo7(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
+    const hotspotTargetRegistry = useMemo7(() => createHotspotTargetRegistry(), []);
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
     const { api: chromeOverlayApi, setOverlayNode, overlayElement } = usePanoChromeOverlay();
     const videoHost = useMemo7(() => createPanoVideoHost(), []);
@@ -6999,7 +7157,27 @@ var PanoViewer = forwardRef2(
       return resume;
     }, [mediaActivationControls, mediaActivationOptions]);
     const hasMediaActivationIntent = mediaActivationRevision >= 0 && hasPanoMediaActivationIntent(mediaActivationHost);
-    const shouldShowMediaActivation = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
+    const shouldActivateMedia = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
+    useEffect13(() => {
+      if (!shouldActivateMedia) {
+        return;
+      }
+      if (!needsMediaGesture()) {
+        void activateMedia();
+        return;
+      }
+      const handleGesture = () => {
+        removeListeners();
+        void activateMedia();
+      };
+      const removeListeners = () => {
+        window.removeEventListener("pointerdown", handleGesture, true);
+        window.removeEventListener("keydown", handleGesture, true);
+      };
+      window.addEventListener("pointerdown", handleGesture, { capture: true });
+      window.addEventListener("keydown", handleGesture, { capture: true });
+      return removeListeners;
+    }, [activateMedia, shouldActivateMedia]);
     const fallbackViewRef = useRef13(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
@@ -7174,6 +7352,13 @@ var PanoViewer = forwardRef2(
         reset: () => {
           controlsRef.current?.reset();
         },
+        lookTo: (position, options) => controlsRef.current?.lookTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+        moveTo: (position, options) => controlsRef.current?.moveTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+        zoomTo: (fov, options) => controlsRef.current?.zoomTo(fov, options) ?? Promise.resolve({ status: "cancelled" }),
+        lookToHotspot: (id, options) => {
+          const position = hotspotTargetRegistry.getPosition(id);
+          return position ? controlsRef.current?.lookTo(position, options) ?? Promise.resolve({ status: "cancelled" }) : Promise.resolve({ status: "not-found" });
+        },
         activateMedia,
         // -- Fullscreen --
         enterFullscreen,
@@ -7231,6 +7416,7 @@ var PanoViewer = forwardRef2(
         enterFullscreen,
         exitFullscreen,
         scenesHost,
+        hotspotTargetRegistry,
         toggleFullscreen,
         videoHost,
         webVRHost
@@ -7254,7 +7440,7 @@ var PanoViewer = forwardRef2(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx11(
             Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
@@ -7276,23 +7462,23 @@ var PanoViewer = forwardRef2(
                 ...DEFAULT_CANVAS_STYLE,
                 touchAction: userControlsEnabled ? "none" : "auto"
               },
-              children: /* @__PURE__ */ jsx12(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
+              children: /* @__PURE__ */ jsx11(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
                 WebVRRuntimeContext.Provider,
                 {
                   value: { host: webVRHost, xrStore, stereoView },
                   children: [
-                    /* @__PURE__ */ jsx12(PanoramaXROrigin, {}),
-                    /* @__PURE__ */ jsx12(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx12(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx12(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx12(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx11(PanoramaXROrigin, {}),
+                    /* @__PURE__ */ jsx11(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx11(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ jsx11(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx11(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx11(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx11(
                       PanoContextMenuOverlayContext.Provider,
                       {
                         value: contextMenuOverlayApi,
-                        children: /* @__PURE__ */ jsx12(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx12(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx12(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx12(
+                        children: /* @__PURE__ */ jsx11(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx11(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx11(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx11(
                           PanoContextMenuActionsContext.Provider,
                           {
                             value: contextMenuActions,
-                            children: /* @__PURE__ */ jsx12(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx12(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs6(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
-                              /* @__PURE__ */ jsx12(PanoVideoHostReset, {}),
-                              /* @__PURE__ */ jsx12(
+                            children: /* @__PURE__ */ jsx11(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx11(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs6(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
+                              /* @__PURE__ */ jsx11(PanoVideoHostReset, {}),
+                              /* @__PURE__ */ jsx11(
                                 PanoramaViewRuntime,
                                 {
                                   ref: controlsRef,
@@ -7303,7 +7489,7 @@ var PanoViewer = forwardRef2(
                                   options: controlOptions
                                 }
                               ),
-                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx12(
+                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx11(
                                 PanoEvents,
                                 {
                                   onViewChange,
@@ -7312,18 +7498,18 @@ var PanoViewer = forwardRef2(
                                   onPointerMove: onPanoramaPointerMove
                                 }
                               ),
-                              /* @__PURE__ */ jsx12(
+                              /* @__PURE__ */ jsx11(
                                 AutoRotate,
                                 {
                                   enabled: legacyAutoRotate,
                                   speed: legacyAutoRotateOptions.autoRotateSpeed
                                 }
                               ),
-                              /* @__PURE__ */ jsx12(PanoramaEventSurface, {}),
-                              contextMenuChannel.mount ? /* @__PURE__ */ jsx12(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                              /* @__PURE__ */ jsx11(PanoramaEventSurface, {}),
+                              contextMenuChannel.mount ? /* @__PURE__ */ jsx11(PanoContextMenu, { ...contextMenuChannel.props }) : null,
                               /* @__PURE__ */ jsxs6(ControlClaimsContext.Provider, { value: controlClaims, children: [
                                 children,
-                                /* @__PURE__ */ jsx12(
+                                /* @__PURE__ */ jsx11(
                                   DefaultControlChannels,
                                   {
                                     fovSpeed: controlOptions.fovSpeed,
@@ -7338,7 +7524,7 @@ var PanoViewer = forwardRef2(
                           }
                         ) }) }) })
                       }
-                    ) }) }) }) })
+                    ) }) }) }) }) })
                   ]
                 }
               ) })
@@ -7351,7 +7537,7 @@ var PanoViewer = forwardRef2(
               "data-pano-chrome-overlay": "",
               ref: setOverlayNode,
               children: [
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx11(
                   PanoVideoChromeBridge,
                   {
                     fullscreen: contextMenuActions,
@@ -7359,21 +7545,12 @@ var PanoViewer = forwardRef2(
                     overlayElement
                   }
                 ),
-                /* @__PURE__ */ jsx12(WebVRChromeBridge, { host: webVRHost })
+                /* @__PURE__ */ jsx11(WebVRChromeBridge, { host: webVRHost })
               ]
             }
           ),
           contextMenuOverlay,
-          hotspotAccessibilityControls,
-          shouldShowMediaActivation ? /* @__PURE__ */ jsx12(
-            PanoMediaActivationOverlay,
-            {
-              ...mediaActivationOptions,
-              onActivate: () => {
-                void activateMedia();
-              }
-            }
-          ) : null
+          hotspotAccessibilityControls
         ]
       }
     );
@@ -8303,7 +8480,7 @@ import {
   Vector2 as Vector22,
   Vector3 as Vector37
 } from "three";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var CENTER_NDC = new Vector22(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
@@ -8478,8 +8655,8 @@ function WebVRReticle({
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx13("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
+              /* @__PURE__ */ jsx12(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8499,8 +8676,8 @@ function WebVRReticle({
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx13("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
+              /* @__PURE__ */ jsx12(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8522,7 +8699,7 @@ function WebVRReticle({
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
             children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12(
                 "ringGeometry",
                 {
                   args: [
@@ -8535,7 +8712,7 @@ function WebVRReticle({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8987,7 +9164,7 @@ function useWebVRWakeLock(enabled) {
 }
 
 // src/webvr/webvr.tsx
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function initializeSettings(screensize, profile) {
   const stored = loadWebVRSettings();
   return {
@@ -9321,7 +9498,7 @@ var WebVR = forwardRef4(function WebVR2({
     wakelock && (mode === "mobilevr" || mode === "fake")
   );
   return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       Gyro,
       {
         ref: gyroRef,
@@ -9335,7 +9512,7 @@ var WebVR = forwardRef4(function WebVR2({
         touchMode: "off"
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       WebVRStereoRenderer,
       {
         mode,
@@ -9343,7 +9520,7 @@ var WebVR = forwardRef4(function WebVR2({
         screensize: settings.screensize
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       WebVRReticle,
       {
         dwellMs: cursorDwellMs,
@@ -9364,6 +9541,10 @@ function createPanoViewerHandle(ref) {
     reset: () => {
       ref.current?.reset();
     },
+    lookTo: (position, options) => ref.current?.lookTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+    moveTo: (position, options) => ref.current?.moveTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+    zoomTo: (fov, options) => ref.current?.zoomTo(fov, options) ?? Promise.resolve({ status: "cancelled" }),
+    lookToHotspot: (id, options) => ref.current?.lookToHotspot(id, options) ?? Promise.resolve({ status: "not-found" }),
     activateMedia: () => ref.current?.activateMedia() ?? Promise.resolve(),
     enterFullscreen: () => ref.current?.enterFullscreen() ?? Promise.resolve(),
     exitFullscreen: () => ref.current?.exitFullscreen() ?? Promise.resolve(),
@@ -9623,7 +9804,7 @@ diffuseColor.rgb = mix(diffuseColor.rgb, applyPanoFilter(diffuseColor.rgb), clam
 }
 
 // src/pano-filter/pano-basic-material.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function PanoBasicMaterial({
   map,
   side,
@@ -9670,7 +9851,7 @@ function PanoBasicMaterial({
       intensityUniformRef.current.value = snapshot.intensity;
     }
   }, [snapshot.intensity]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx14(
     "meshBasicMaterial",
     {
       ref: materialRef,
@@ -9686,7 +9867,7 @@ function PanoBasicMaterial({
 }
 
 // src/sphere.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
   const [texture, setTexture] = useState9(null);
   const onLoadRef = useRef22(onLoad);
@@ -9791,8 +9972,8 @@ function Sphere({
       rotation: [0, MathUtils5.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ jsx16("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx15("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx15(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -9826,7 +10007,7 @@ import {
   TextureLoader as TextureLoader2,
   VideoTexture
 } from "three";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -10547,8 +10728,8 @@ function PanoVideo({
         rotation: [0, MathUtils6.degToRad(90 + yawOffset), 0],
         visible,
         children: [
-          /* @__PURE__ */ jsx17("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx16("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ jsx16(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -10559,7 +10740,7 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx17(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ jsx16(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
@@ -10691,7 +10872,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -10813,7 +10994,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "mesh",
     {
       ref: meshRef,
@@ -11107,7 +11288,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -11157,20 +11338,20 @@ function SnapshotOverlay({
     return null;
   }
   return /* @__PURE__ */ jsxs11("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx19("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx19("primitive", { attach: "material", object: material })
+    /* @__PURE__ */ jsx18("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx18("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ jsx20(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ jsx19(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -11198,7 +11379,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ jsx20(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ jsx19(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -11210,7 +11391,7 @@ function TransitionOverlay(props) {
 // src/tile/texture-manager-context.tsx
 import { useThree as useThree17 } from "@react-three/fiber";
 import {
-  createContext as createContext14,
+  createContext as createContext15,
   useContext as useContext22,
   useEffect as useEffect25,
   useMemo as useMemo18
@@ -11443,8 +11624,8 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var TileTextureManagerContext = createContext14(
+import { jsx as jsx20 } from "react/jsx-runtime";
+var TileTextureManagerContext = createContext15(
   null
 );
 function TileTextureManagerProvider({
@@ -11467,7 +11648,7 @@ function TileTextureManagerProvider({
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ jsx21(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsx20(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
   return useContext22(TileTextureManagerContext);
@@ -11676,7 +11857,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
@@ -11763,14 +11944,14 @@ function PreviewFace({
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx21(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11786,7 +11967,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx22(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx21(
     PreviewFace,
     {
       face,
@@ -11831,14 +12012,14 @@ var TileMesh = memo(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx22("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx21(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx21(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11855,7 +12036,7 @@ var TileLayerMeshes = memo(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx22(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx21(
     TileMesh,
     {
       address,
@@ -12193,14 +12374,14 @@ function Tile({
     commitLayers(nextLayers);
   });
   return /* @__PURE__ */ jsxs12("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx22(
+    previewTexture ? /* @__PURE__ */ jsx21(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx22(
+    layers.map((layer) => /* @__PURE__ */ jsx21(
       TileLayerMeshes,
       {
         layer,
@@ -12213,7 +12394,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function SceneSource({
   scene,
   visible,
@@ -12226,7 +12407,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx22(
         Sphere,
         {
           src: scene.src,
@@ -12239,7 +12420,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx22(
         Tile,
         {
           ...tileProps,
@@ -12507,7 +12688,7 @@ function ScenesController({
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
   return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx22(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -12519,7 +12700,7 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx22(
         SceneSource,
         {
           scene: source,
@@ -12535,7 +12716,7 @@ function ScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ jsx23(
+    snapshotVisible ? /* @__PURE__ */ jsx22(
       TransitionOverlay,
       {
         snapshot,
@@ -12628,12 +12809,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx22(
         ScenesController,
         {
           ...rest,
@@ -12686,7 +12867,7 @@ import { useEffect as useEffect28, useMemo as useMemo21, useState as useState13
 // src/webvr/stereo-html.tsx
 import { Html } from "@react-three/drei";
 import { useContext as useContext24, useSyncExternalStore as useSyncExternalStore7 } from "react";
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function useFallbackStereoView() {
   const runtime = useContext24(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
@@ -12711,10 +12892,10 @@ function stereoCalculatePosition(eye, stereoView) {
 function PanoHtml({ children, ...htmlProps }) {
   const stereoView = useFallbackStereoView();
   if (!stereoView) {
-    return /* @__PURE__ */ jsx24(Html, { ...htmlProps, children });
+    return /* @__PURE__ */ jsx23(Html, { ...htmlProps, children });
   }
   return /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx23(
       Html,
       {
         ...htmlProps,
@@ -12722,7 +12903,7 @@ function PanoHtml({ children, ...htmlProps }) {
         children
       }
     ),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx23(
       Html,
       {
         ...htmlProps,
@@ -12735,7 +12916,7 @@ function PanoHtml({ children, ...htmlProps }) {
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -12832,14 +13013,14 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ jsx25(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx24(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs15(
     "div",
     {
       className: "pano-hotspot-tooltip",
       role: "tooltip",
       style: bubbleStyle,
       children: [
-        showImage ? /* @__PURE__ */ jsx25(
+        showImage ? /* @__PURE__ */ jsx24(
           "img",
           {
             alt: content.imageAlt ?? content.text ?? "",
@@ -12848,14 +13029,14 @@ function HotspotTooltip({
             src: content.image
           }
         ) : null,
-        content.text ? /* @__PURE__ */ jsx25("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
+        content.text ? /* @__PURE__ */ jsx24("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
       ]
     }
   ) });
 }
 
 // src/hotspot/hotspot-anchor.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -13193,6 +13374,7 @@ function HotspotAnchor({
   onDragEnd
 }) {
   const controlsRef = useContext25(PanoramaViewContext);
+  const hotspotTargetRegistry = useContext25(HotspotTargetRegistryContext);
   const eventBus = useContext25(PanoEventBusContext);
   const cursorApi = usePanoCursor();
   const { camera, size } = useThree20();
@@ -13208,6 +13390,12 @@ function HotspotAnchor({
     [tooltip]
   );
   const normalizedPosition = normalizePanoPosition(position);
+  useEffect29(() => {
+    if (!hotspotTargetRegistry) {
+      return;
+    }
+    return hotspotTargetRegistry.register(id, normalizedPosition);
+  }, [hotspotTargetRegistry, id, normalizedPosition.pitch, normalizedPosition.yaw]);
   const rendering = internalOrientation && internalPlacement ? { orientation: internalOrientation, placement: internalPlacement } : HOTSPOT_MODE_RENDERING[mode];
   const { orientation: orientation2, placement } = rendering;
   const resolvedScale = resolveScale(scale);
@@ -13495,18 +13683,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx26(
+        focused ? focusContent ?? /* @__PURE__ */ jsx25(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx26("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx25("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx26("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx26(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx25("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx25(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -13527,7 +13715,7 @@ import {
   MeshBasicMaterial,
   Vector2 as Vector26
 } from "three";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new Vector26();
 var RAYCAST_HITS = [];
@@ -13630,8 +13818,8 @@ function HotspotPlane({
   opacity
 }) {
   return /* @__PURE__ */ jsxs17("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ jsx27("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx26("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx26(
       "meshBasicMaterial",
       {
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
@@ -13647,7 +13835,7 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = useThree21((state) => state.gl);
   const [texture, setTexture] = useState15(null);
@@ -13711,7 +13899,7 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx28(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx28(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx27(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx27(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
@@ -13736,7 +13924,7 @@ import {
   PerspectiveCamera as PerspectiveCamera6,
   Vector3 as Vector314
 } from "three";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var LINE_WORLD_POSITION = new Vector314();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
@@ -13782,7 +13970,7 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     Line,
     {
       ref: lineRef,
@@ -13804,7 +13992,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -14107,7 +14295,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx30(
+      focusContent: /* @__PURE__ */ jsx29(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14129,7 +14317,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx30("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx29(
           "meshBasicMaterial",
           {
             color: fill,
@@ -14139,7 +14327,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -14164,7 +14352,7 @@ import {
   Quaternion as Quaternion5,
   Vector3 as Vector316
 } from "three";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -14304,7 +14492,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx30(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14318,7 +14506,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx31(
+      focusContent: /* @__PURE__ */ jsx30(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14339,7 +14527,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx30(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14364,7 +14552,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter4,
   SRGBColorSpace as SRGBColorSpace6
 } from "three";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -14584,15 +14772,15 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx31(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx31(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx32(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx31(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx32(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx31(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
@@ -14605,7 +14793,7 @@ import {
   SRGBColorSpace as SRGBColorSpace7,
   TextureLoader as TextureLoader6
 } from "three";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -14781,7 +14969,7 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
@@ -14795,7 +14983,7 @@ import {
   TextureLoader as TextureLoader7,
   VideoTexture as VideoTexture2
 } from "three";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -15020,7 +15208,7 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx34(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
@@ -15034,7 +15222,7 @@ import {
   SRGBColorSpace as SRGBColorSpace9,
   TextureLoader as TextureLoader8
 } from "three";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -15319,7 +15507,7 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx35(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx34(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
@@ -15331,7 +15519,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter8,
   SRGBColorSpace as SRGBColorSpace10
 } from "three";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -15649,13 +15837,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ jsx36(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx36(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx35(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 import { Html as Html2 } from "@react-three/drei";
 import { DoubleSide as DoubleSide6 } from "three";
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -15722,8 +15910,8 @@ function IframeHotspot({
       width,
       children: [
         /* @__PURE__ */ jsxs19("mesh", { children: [
-          /* @__PURE__ */ jsx37("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx36("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ jsx36(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -15734,7 +15922,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx36(
           Html2,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -15749,7 +15937,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ jsx37(
+            children: /* @__PURE__ */ jsx36(
               "iframe",
               {
                 allow,