@ericchen1990/pano-view 3.1.0 → 3.1.2

package/dist/index.cjs

@@ -46,7 +46,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;
@@ -71,7 +71,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();
@@ -82,7 +82,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) {
@@ -104,13 +104,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) {
@@ -129,7 +129,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();
           }
@@ -140,7 +140,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();
           }
@@ -157,14 +157,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) {
@@ -198,7 +198,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;
@@ -241,7 +241,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         _unlockAudio: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (self._audioUnlocked || !self.ctx) {
             return;
           }
@@ -311,7 +311,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();
           }
@@ -328,7 +328,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);
           }
@@ -341,7 +341,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++) {
@@ -379,7 +379,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) {
@@ -402,7 +402,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) {
@@ -419,7 +419,7 @@ var require_howler = __commonJS({
          */
         init: function(o) {
           var self = this;
-          if (!Howler3.ctx) {
+          if (!Howler4.ctx) {
             setupAudioContext();
           }
           self._autoplay = o.autoplay || false;
@@ -458,11 +458,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",
@@ -483,7 +483,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;
           }
@@ -511,7 +511,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;
             }
@@ -589,7 +589,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);
@@ -616,8 +616,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 {
@@ -633,7 +633,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;
@@ -643,8 +643,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();
@@ -692,7 +692,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 {
@@ -701,9 +701,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);
             }
           }
@@ -841,9 +841,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);
             }
@@ -899,9 +899,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);
               }
@@ -943,7 +943,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);
@@ -1009,7 +1009,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;
@@ -1111,11 +1111,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;
                 }
@@ -1209,7 +1209,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 {
@@ -1272,20 +1272,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;
             }
@@ -1293,7 +1293,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;
@@ -1426,7 +1426,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);
           }
@@ -1437,7 +1437,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);
@@ -1545,7 +1545,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);
@@ -1557,7 +1557,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;
         },
         /**
@@ -1567,16 +1567,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) {
               }
             }
@@ -1589,7 +1589,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";
           }
@@ -1615,7 +1615,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;
@@ -1627,23 +1627,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;
@@ -1664,7 +1664,7 @@ var require_howler = __commonJS({
           self._paused = true;
           self._ended = true;
           self._sprite = "__default";
-          self._id = ++Howler3._counter;
+          self._id = ++Howler4._counter;
           return self;
         },
         /**
@@ -1690,7 +1690,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.
@@ -1772,10 +1772,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) {
@@ -1792,59 +1792,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 exports2 !== "undefined") {
-        exports2.Howler = Howler3;
+        exports2.Howler = Howler4;
         exports2.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;
       }
@@ -2352,6 +2352,22 @@ function cn(...values) {
 
 // src/audio/howl.ts
 var import_howler = __toESM(require_howler());
+
+// src/media-activation-event.ts
+function isMediaActivationEvent(event) {
+  switch (event.type) {
+    case "keydown":
+      return event instanceof KeyboardEvent && event.key !== "Escape";
+    case "pointerdown":
+      return event instanceof PointerEvent && event.pointerType === "mouse";
+    case "pointerup":
+      return event instanceof PointerEvent && event.pointerType !== "mouse";
+    default:
+      return false;
+  }
+}
+
+// src/audio/howl.ts
 import_howler.Howler.autoUnlock = true;
 function resumePanoAudio() {
   if (!import_howler.Howler.ctx || import_howler.Howler.ctx.state === "running") {
@@ -2359,6 +2375,9 @@ function resumePanoAudio() {
   }
   return import_howler.Howler.ctx.resume();
 }
+function isPanoAudioUnlocked() {
+  return !import_howler.Howler.ctx || import_howler.Howler.ctx.state === "running";
+}
 function sourceList(src) {
   if (src == null) {
     return [];
@@ -2424,7 +2443,10 @@ function createUnlockingHowl({
         blockedNotified = true;
         onPlayError?.(error);
       }
-      const retry = () => {
+      const retry = (event) => {
+        if (!isMediaActivationEvent(event)) {
+          return;
+        }
         removeUnlockListeners();
         if (!disposed && isActive() && shouldRetryPlay()) {
           void resumePanoAudio();
@@ -2433,8 +2455,10 @@ function createUnlockingHowl({
       };
       removeUnlockListeners();
       unlockListeners.push({ type: "pointerdown", listener: retry });
+      unlockListeners.push({ type: "pointerup", listener: retry });
       unlockListeners.push({ type: "keydown", listener: retry });
       window.addEventListener("pointerdown", retry, { capture: true });
+      window.addEventListener("pointerup", retry, { capture: true });
       window.addEventListener("keydown", retry, { capture: true });
     }
   });
@@ -3848,8 +3872,8 @@ function isProduction2() {
 }
 
 // src/media-activation.tsx
+var import_howler2 = __toESM(require_howler());
 var import_react11 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
 var PanoMediaActivationHostContext = (0, import_react11.createContext)(null);
 function createPanoMediaActivationHost() {
   return { intents: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(), revision: 0 };
@@ -3872,6 +3896,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 = (0, import_react11.useContext)(PanoMediaActivationHostContext);
   const keyRef = (0, import_react11.useRef)(null);
@@ -3891,27 +3924,10 @@ function usePanoMediaActivationIntent(required) {
     };
   }, [host, required]);
 }
-function PanoMediaActivationOverlay({
-  ariaLabel = "Enable sound",
-  className,
-  message = "Tap to enable sound",
-  onActivate
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("pano-media-activation", className), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "button",
-    {
-      "aria-label": ariaLabel,
-      className: "pano-media-activation-button",
-      onClick: onActivate,
-      type: "button",
-      children: message
-    }
-  ) });
-}
 
 // src/pano-context-menu.tsx
 var import_react12 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
@@ -4074,7 +4090,7 @@ function DefaultContextMenuPanel({
     padding: resolved.padding,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ref: menuRef,
@@ -4085,7 +4101,7 @@ function DefaultContextMenuPanel({
       style: panelStyle,
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -4097,9 +4113,9 @@ function DefaultContextMenuPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
           if (!isActionItem(item)) {
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 "aria-hidden": true,
@@ -4116,7 +4132,7 @@ function DefaultContextMenuPanel({
             );
           }
           const disabled = item.disabled === true;
-          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "img",
             {
               alt: item.imageAlt ?? "",
@@ -4130,7 +4146,7 @@ function DefaultContextMenuPanel({
               }
             }
           ) : null);
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "button",
             {
               "aria-disabled": disabled || void 0,
@@ -4166,7 +4182,7 @@ function DefaultContextMenuPanel({
               tabIndex: disabled ? -1 : activeIndex === index ? 0 : -1,
               type: "button",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "span",
                   {
                     "aria-hidden": true,
@@ -4178,7 +4194,7 @@ function DefaultContextMenuPanel({
                     children: iconNode
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: item.label })
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1 }, children: item.label })
               ]
             },
             item.id
@@ -4231,7 +4247,7 @@ function PositionedMenuShell({
       top: Math.min(Math.max(rawTop, MENU_EDGE_PADDING), maxTop)
     });
   }, [clientX, clientY, overlayElement, children, viewportRevision]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       className: "pano-context-menu-shell",
@@ -4290,7 +4306,7 @@ function usePanoContextMenuOverlay() {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [session2]);
-  const overlay = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       ref: setOverlayNode,
@@ -4301,7 +4317,7 @@ function usePanoContextMenuOverlay() {
         position: "absolute",
         zIndex: 20
       },
-      children: session2 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: session2 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         PositionedMenuShell,
         {
           clientX: session2.event.clientX,
@@ -4394,9 +4410,9 @@ function PanoContextMenu({
         view,
         render: () => {
           if (hasCustomChildren && current.children) {
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             DefaultContextMenuPanel,
             {
               appearance: current.appearance,
@@ -4434,7 +4450,7 @@ function PanoContextMenu({
   return null;
 }
 function ResetViewIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "svg",
     {
       "aria-hidden": true,
@@ -4447,14 +4463,14 @@ function ResetViewIcon() {
       viewBox: "0 0 16 16",
       width: "100%",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3.5 3.5v3h3" })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3.5 3.5v3h3" })
       ]
     }
   );
 }
 function FullscreenIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "svg",
     {
       "aria-hidden": true,
@@ -4466,12 +4482,12 @@ function FullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
     }
   );
 }
 function ExitFullscreenIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "svg",
     {
       "aria-hidden": true,
@@ -4483,7 +4499,7 @@ function ExitFullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
     }
   );
 }
@@ -4492,7 +4508,7 @@ function createPanoContextMenuPresets(actions) {
   const resetView = {
     id: "pano-reset-view",
     label: "Reset view",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ResetViewIcon, {}),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResetViewIcon, {}),
     onSelect: () => {
       actions.reset();
     }
@@ -4500,7 +4516,7 @@ function createPanoContextMenuPresets(actions) {
   const fullscreen = {
     id: "pano-fullscreen",
     label: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-    icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExitFullscreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FullscreenIcon, {}),
+    icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExitFullscreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FullscreenIcon, {}),
     onSelect: () => {
       actions.toggleFullscreen();
     }
@@ -4598,7 +4614,7 @@ var PanoContextMenuActionsContext = (0, import_react12.createContext)(null);
 // src/pano-cursor.tsx
 var import_fiber5 = require("@react-three/fiber");
 var import_react13 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_PANO_CURSORS = {
   default: "grab",
   dragging: "grabbing",
@@ -4740,7 +4756,7 @@ function PanoCursorController({
       release(PANO_DRAG_CLAIM_ID);
     };
   }, [claim, eventBus, release]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoCursorContext.Provider, { value: api, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanoCursorContext.Provider, { value: api, children });
 }
 
 // src/pano-events.tsx
@@ -5101,7 +5117,7 @@ var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
 var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
 
 // src/panorama-event-surface.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -5159,7 +5175,7 @@ function PanoramaEventSurface() {
     event.stopPropagation();
     eventBus.emit(type, makePanoramaPointerEvent(event));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "mesh",
     {
       renderOrder: -200,
@@ -5169,8 +5185,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -5352,7 +5368,7 @@ function TouchControls({
 
 // src/video/chrome-overlay.tsx
 var import_react18 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var PanoChromeOverlayContext = (0, import_react18.createContext)(null);
 function usePanoChromeOverlay() {
   const [overlayElement, setOverlayElement] = (0, import_react18.useState)(
@@ -5365,7 +5381,7 @@ function usePanoChromeOverlay() {
     () => ({ overlayElement }),
     [overlayElement]
   );
-  const overlay = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       className: "pano-chrome-overlay",
@@ -5442,7 +5458,7 @@ var import_react22 = require("react");
 
 // src/video/pano-video-captions.tsx
 var import_react20 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
   background: "rgba(0, 0, 0, 0.55)",
@@ -5490,13 +5506,13 @@ function PanoVideoCaptionsOverlay({
     textShadow: snapshot.captionAppearance.textShadow,
     whiteSpace: "pre-wrap"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: "pano-video-captions",
       "data-pano-video-captions": "",
       style: wrapperStyle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: textStyle, children: snapshot.captionText })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: textStyle, children: snapshot.captionText })
     }
   );
 }
@@ -5639,7 +5655,7 @@ function cueText(cue) {
 }
 
 // src/video/pano-video-controls.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE = {
   background: "rgba(16, 16, 16, 0.88)",
   color: "#f4f4f4",
@@ -5700,7 +5716,7 @@ function volumeFromClientY(clientY, track) {
   return Math.max(0, Math.min(1, (rect.bottom - clientY) / rect.height));
 }
 function Icon({ path }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "svg",
     {
       "aria-hidden": true,
@@ -5712,7 +5728,7 @@ function Icon({ path }) {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "16",
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: path })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: path })
     }
   );
 }
@@ -5724,7 +5740,7 @@ function ChromeButton({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       "aria-label": label,
@@ -5750,14 +5766,14 @@ function ChromeMenu({
   labelledBy,
   items
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ChromeMenuRadioItem,
         {
           active: item.active,
@@ -5777,7 +5793,7 @@ function ChromeMenuSurface({
   labelledBy,
   role
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "aria-labelledby": labelledBy,
@@ -5801,7 +5817,7 @@ function ChromeMenuRadioItem({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       "aria-checked": active,
@@ -5826,7 +5842,7 @@ function ChromeMenuActionItem({
   onClick,
   secondary
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       className: "pano-video-chrome-menu-action",
@@ -5841,7 +5857,7 @@ function ChromeMenuActionItem({
       },
       type: "button",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }),
         secondary
       ]
     }
@@ -5850,10 +5866,10 @@ function ChromeMenuActionItem({
 function ChromeMenuSectionLabel({
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pano-video-chrome-menu-label", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pano-video-chrome-menu-label", children });
 }
 function ChromeMenuDivider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pano-video-chrome-menu-divider" });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pano-video-chrome-menu-divider" });
 }
 function CaptionsMenu({
   appearance,
@@ -5866,16 +5882,16 @@ function CaptionsMenu({
   panel,
   snapshot
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: panel === "tracks" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-chrome-menu-list", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: panel === "tracks" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-chrome-menu-list", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             ChromeMenuRadioItem,
             {
               active: snapshot.trackId === null,
@@ -5888,7 +5904,7 @@ function CaptionsMenu({
           ),
           snapshot.tracks.map((track) => {
             const trackItemId = panoVideoTrackId(track);
-            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               ChromeMenuRadioItem,
               {
                 active: snapshot.trackId === trackItemId,
@@ -5902,29 +5918,29 @@ function CaptionsMenu({
             );
           })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChromeMenuDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChromeMenuDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Settings",
             onClick: onOpenSettings,
-            secondary: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, children: "\u203A" })
+            secondary: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, children: "\u203A" })
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Back",
             onClick: onShowTracks,
-            secondary: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, children: "\u2039" })
+            secondary: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, children: "\u2039" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChromeMenuDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChromeMenuSectionLabel, { children: "Font size" }),
-        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChromeMenuDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChromeMenuSectionLabel, { children: "Font size" }),
+        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ChromeMenuRadioItem,
           {
             active: Number(snapshot.captionAppearance.fontSize) === option.value,
@@ -5936,9 +5952,9 @@ function CaptionsMenu({
           },
           option.id
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChromeMenuDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChromeMenuSectionLabel, { children: "Background" }),
-        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChromeMenuDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChromeMenuSectionLabel, { children: "Background" }),
+        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ChromeMenuRadioItem,
           {
             active: snapshot.captionAppearance.background === option.value,
@@ -5979,7 +5995,7 @@ function VerticalVolumeSlider({
     }
   };
   const percentLabel = formatVolumePercent(volume);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "pano-video-volume-popover",
@@ -5993,7 +6009,7 @@ function VerticalVolumeSlider({
         pointerEvents: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -6005,14 +6021,14 @@ function VerticalVolumeSlider({
             children: percentLabel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             style: {
               paddingBottom: VOLUME_THUMB_SIZE / 2,
               paddingTop: VOLUME_THUMB_SIZE / 2
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "div",
               {
                 "aria-label": "Volume",
@@ -6045,7 +6061,7 @@ function VerticalVolumeSlider({
                 },
                 tabIndex: 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "div",
                     {
                       style: {
@@ -6060,7 +6076,7 @@ function VerticalVolumeSlider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "div",
                     {
                       style: {
@@ -6119,17 +6135,17 @@ function VolumeControl({
     };
   }, [open, volumeAdjustable]);
   if (!volumeAdjustable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChromeButton,
       {
         appearance,
         label: mutedOrSilent ? "Unmute" : "Mute",
         onClick: onToggleMuted,
-        children: mutedOrSilent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsx)(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+        children: mutedOrSilent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       "data-pano-video-volume": "",
@@ -6157,7 +6173,7 @@ function VolumeControl({
       },
       ref: rootRef,
       children: [
-        open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           VerticalVolumeSlider,
           {
             appearance,
@@ -6165,7 +6181,7 @@ function VolumeControl({
             volume: displayVolume
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ChromeButton,
           {
             appearance,
@@ -6176,7 +6192,7 @@ function VolumeControl({
               }
               onToggleMuted();
             },
-            children: mutedOrSilent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsx)(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+            children: mutedOrSilent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
           }
         )
       ]
@@ -6336,7 +6352,7 @@ function PanoVideoControlsHud({
   let menuNode = null;
   switch (menu) {
     case "rate":
-      menuNode = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      menuNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6355,7 +6371,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "variant":
-      menuNode = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      menuNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6374,7 +6390,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "captions":
-      menuNode = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      menuNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         CaptionsMenu,
         {
           appearance: resolved,
@@ -6398,7 +6414,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "more":
-      menuNode = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      menuNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6464,9 +6480,9 @@ function PanoVideoControlsHud({
     transition: "opacity 160ms ease",
     zIndex: 2
   };
-  const rateButton = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
+  const rateButton = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
     !compact && menu === "rate" ? menuNode : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChromeButton,
       {
         appearance: resolved,
@@ -6474,13 +6490,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("rate");
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
       }
     )
   ] });
-  const variantButton = canSwitchVariant ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
+  const variantButton = canSwitchVariant ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
     !compact && menu === "variant" ? menuNode : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChromeButton,
       {
         appearance: resolved,
@@ -6488,13 +6504,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("variant");
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
+  const captionsButton = showCaptionsMenu ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
     !compact && menu === "captions" ? menuNode : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChromeButton,
       {
         appearance: resolved,
@@ -6502,18 +6518,18 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("captions");
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "pano-video-controls",
       "data-pano-video-controls": "",
       style: barStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ChromeButton,
           {
             appearance: resolved,
@@ -6521,11 +6537,11 @@ function PanoVideoControlsHud({
             onClick: () => {
               controller.togglePlay();
             },
-            children: snapshot.playing ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { path: "M5 3.2v9.6L13 8z" })
+            children: snapshot.playing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M5 3.2v9.6L13 8z" })
           }
         ),
-        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             "aria-label": "Seek",
@@ -6547,8 +6563,8 @@ function PanoVideoControlsHud({
             value: duration > 0 ? snapshot.currentTime : 0
           }
         ),
-        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           VolumeControl,
           {
             appearance: resolved,
@@ -6564,9 +6580,9 @@ function PanoVideoControlsHud({
             volumeAdjustable: snapshot.volumeAdjustable
           }
         ),
-        compact ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
+        compact ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
           menu !== null ? menuNode : null,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             ChromeButton,
             {
               appearance: resolved,
@@ -6575,15 +6591,15 @@ function PanoVideoControlsHud({
               onClick: () => {
                 toggleMenu("more");
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
           rateButton,
           variantButton,
           captionsButton
         ] }),
-        showFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        showFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ChromeButton,
           {
             appearance: resolved,
@@ -6591,7 +6607,7 @@ function PanoVideoControlsHud({
             onClick: () => {
               fullscreen?.toggleFullscreen();
             },
-            children: fullscreen?.isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
+            children: fullscreen?.isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
           }
         ) : null
       ]
@@ -6608,7 +6624,7 @@ function PanoVideoControls({ appearance }) {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function PanoVideoChromeBridge({
   fullscreen,
   host,
@@ -6623,8 +6639,8 @@ function PanoVideoChromeBridge({
     return null;
   }
   const showDefaultControls = host.controller !== null && host.controls !== false && host.controlClaims === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    showDefaultControls ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    showDefaultControls ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       PanoVideoControlsHud,
       {
         appearance: typeof host.controls === "object" ? host.controls : void 0,
@@ -6633,7 +6649,7 @@ function PanoVideoChromeBridge({
         overlayElement
       }
     ) : null,
-    host.captions !== false && host.controller ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
+    host.captions !== false && host.controller ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
   ] });
 }
 
@@ -6786,7 +6802,7 @@ function clamp2(value, min, max) {
 }
 
 // src/webvr/chrome.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -6798,7 +6814,7 @@ function ChromeButton2({
   children,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
       className: "pano-webvr-button",
@@ -6835,7 +6851,7 @@ function SetupPanel({
     color: appearance.color,
     fontSize: appearance.fontSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       "aria-label": "Mobile VR setup",
@@ -6843,11 +6859,11 @@ function SetupPanel({
       role: "dialog",
       style: panelStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "pano-webvr-setup-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "pano-webvr-setup-field", children: [
           "Screen size (inch)",
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pano-webvr-setup-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 "aria-label": "Decrease screen size",
@@ -6859,8 +6875,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 "aria-label": "Increase screen size",
@@ -6874,10 +6890,10 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("fieldset", { className: "pano-webvr-setup-fieldset", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("fieldset", { className: "pano-webvr-setup-fieldset", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pano-webvr-setup-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 "aria-label": "Previous headset preset",
@@ -6887,8 +6903,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 "aria-label": "Next headset preset",
@@ -6900,7 +6916,7 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           ChromeButton2,
           {
             appearance,
@@ -6923,9 +6939,9 @@ function WebVRChromeBridge({ host }) {
     return null;
   }
   const appearance = resolveAppearance(chrome);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pano-webvr-toolbar-actions", children: [
-      mode !== "webxr" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pano-webvr-toolbar-actions", children: [
+      mode !== "webxr" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         ChromeButton2,
         {
           appearance,
@@ -6933,7 +6949,7 @@ function WebVRChromeBridge({ host }) {
           children: "VR Setup"
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         ChromeButton2,
         {
           appearance,
@@ -6941,7 +6957,7 @@ function WebVRChromeBridge({ host }) {
           children: "Exit VR"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ChromeButton2,
       {
         appearance,
@@ -6949,7 +6965,7 @@ function WebVRChromeBridge({ host }) {
         children: available ? "Enter VR" : "VR unavailable"
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    mode === "fake" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "p",
       {
         className: "pano-webvr-hint",
@@ -6957,7 +6973,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__ */ (0, import_jsx_runtime10.jsx)(
+    setupOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SetupPanel,
       {
         appearance,
@@ -6999,7 +7015,7 @@ var import_fiber9 = require("@react-three/fiber");
 var import_xr2 = require("@react-three/xr");
 var import_react25 = require("react");
 var import_three5 = require("three");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function PanoramaXROrigin() {
   const originRef = (0, import_react25.useRef)(null);
   const localHeadPositionRef = (0, import_react25.useRef)(new import_three5.Vector3());
@@ -7015,11 +7031,11 @@ function PanoramaXROrigin() {
     origin.position.copy(localHeadPositionRef.current).multiplyScalar(-1);
     origin.updateMatrixWorld();
   }, -100);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xr2.XROrigin, { ref: originRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_xr2.XROrigin, { ref: originRef });
 }
 
 // src/pano-viewer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -7064,7 +7080,7 @@ function PanoCursorTree({
   if (!cursors) {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoCursorController, { cursors, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
   const host = (0, import_react26.useContext)(PanoVideoHostContext);
@@ -7084,10 +7100,10 @@ function DefaultControlChannels({
   if (!claims) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DefaultControlChannelContext.Provider, { value: true, children: [
-    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
-    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TouchControls, { ...touchChannel.props }) : null,
-    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DefaultControlChannelContext.Provider, { value: true, children: [
+    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
+    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TouchControls, { ...touchChannel.props }) : null,
+    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       KeyboardControls,
       {
         ...keyboardChannel.props,
@@ -7173,14 +7189,58 @@ var PanoViewer = (0, import_react26.forwardRef)(
       }),
       [bgmHost, videoHost]
     );
-    const activateMedia = (0, import_react26.useCallback)(() => {
-      setMediaActivated(true);
+    const runMediaActivation = (0, import_react26.useCallback)(() => {
       const resume = mediaActivationControls.resumeAudio();
       mediaActivationOptions?.onActivate?.(mediaActivationControls);
       return resume;
     }, [mediaActivationControls, mediaActivationOptions]);
+    const activateMedia = (0, import_react26.useCallback)(() => {
+      setMediaActivated(true);
+      return runMediaActivation();
+    }, [runMediaActivation]);
     const hasMediaActivationIntent = mediaActivationRevision >= 0 && hasPanoMediaActivationIntent(mediaActivationHost);
-    const shouldShowMediaActivation = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
+    const shouldActivateMedia = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
+    (0, import_react26.useEffect)(() => {
+      if (!shouldActivateMedia) {
+        return;
+      }
+      if (!needsMediaGesture()) {
+        void activateMedia();
+        return;
+      }
+      let cancelled = false;
+      let activating = false;
+      const removeListeners = () => {
+        window.removeEventListener("pointerdown", handleGesture, true);
+        window.removeEventListener("pointerup", handleGesture, true);
+        window.removeEventListener("keydown", handleGesture, true);
+      };
+      const handleGesture = (event) => {
+        if (!isMediaActivationEvent(event) || activating || cancelled) {
+          return;
+        }
+        activating = true;
+        try {
+          const resume = runMediaActivation();
+          void resume.then(() => {
+            if (cancelled || !isPanoAudioUnlocked()) {
+              return;
+            }
+            removeListeners();
+            setMediaActivated(true);
+          });
+        } finally {
+          activating = false;
+        }
+      };
+      window.addEventListener("pointerdown", handleGesture, { capture: true });
+      window.addEventListener("pointerup", handleGesture, { capture: true });
+      window.addEventListener("keydown", handleGesture, { capture: true });
+      return () => {
+        cancelled = true;
+        removeListeners();
+      };
+    }, [activateMedia, runMediaActivation, shouldActivateMedia]);
     const fallbackViewRef = (0, import_react26.useRef)(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
@@ -7433,7 +7493,7 @@ var PanoViewer = (0, import_react26.forwardRef)(
       }),
       [style]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         ...divProps,
@@ -7443,7 +7503,7 @@ var PanoViewer = (0, import_react26.forwardRef)(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             import_fiber10.Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
@@ -7465,23 +7525,23 @@ var PanoViewer = (0, import_react26.forwardRef)(
                 ...DEFAULT_CANVAS_STYLE,
                 touchAction: userControlsEnabled ? "none" : "auto"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_xr3.XR, { store: xrStore, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xr3.XR, { store: xrStore, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 WebVRRuntimeContext.Provider,
                 {
                   value: { host: webVRHost, xrStore, stereoView },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoramaXROrigin, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoramaXROrigin, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       PanoContextMenuOverlayContext.Provider,
                       {
                         value: contextMenuOverlayApi,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                           PanoContextMenuActionsContext.Provider,
                           {
                             value: contextMenuActions,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoVideoHostReset, {}),
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoVideoHostReset, {}),
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 PanoramaViewRuntime,
                                 {
                                   ref: controlsRef,
@@ -7492,7 +7552,7 @@ var PanoViewer = (0, import_react26.forwardRef)(
                                   options: controlOptions
                                 }
                               ),
-                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 PanoEvents,
                                 {
                                   onViewChange,
@@ -7501,18 +7561,18 @@ var PanoViewer = (0, import_react26.forwardRef)(
                                   onPointerMove: onPanoramaPointerMove
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 AutoRotate,
                                 {
                                   enabled: legacyAutoRotate,
                                   speed: legacyAutoRotateOptions.autoRotateSpeed
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoramaEventSurface, {}),
-                              contextMenuChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoContextMenu, { ...contextMenuChannel.props }) : null,
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ControlClaimsContext.Provider, { value: controlClaims, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoramaEventSurface, {}),
+                              contextMenuChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ControlClaimsContext.Provider, { value: controlClaims, children: [
                                 children,
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                   DefaultControlChannels,
                                   {
                                     fovSpeed: controlOptions.fovSpeed,
@@ -7533,14 +7593,14 @@ var PanoViewer = (0, import_react26.forwardRef)(
               ) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
               className: "pano-chrome-overlay",
               "data-pano-chrome-overlay": "",
               ref: setOverlayNode,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   PanoVideoChromeBridge,
                   {
                     fullscreen: contextMenuActions,
@@ -7548,21 +7608,12 @@ var PanoViewer = (0, import_react26.forwardRef)(
                     overlayElement
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WebVRChromeBridge, { host: webVRHost })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WebVRChromeBridge, { host: webVRHost })
               ]
             }
           ),
           contextMenuOverlay,
-          hotspotAccessibilityControls,
-          shouldShowMediaActivation ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            PanoMediaActivationOverlay,
-            {
-              ...mediaActivationOptions,
-              onActivate: () => {
-                void activateMedia();
-              }
-            }
-          ) : null
+          hotspotAccessibilityControls
         ]
       }
     );
@@ -8470,7 +8521,7 @@ async function detectWebVRCapabilities() {
 var import_fiber12 = require("@react-three/fiber");
 var import_react30 = require("react");
 var import_three8 = require("three");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var CENTER_NDC = new import_three8.Vector2(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
@@ -8630,7 +8681,7 @@ function WebVRReticle({
     group.quaternion.copy(activeCamera.quaternion);
     group.scale.setScalar(RETICLE_SCALE);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "group",
     {
       frustumCulled: false,
@@ -8638,15 +8689,15 @@ function WebVRReticle({
       renderOrder: RETICLE_RENDER_ORDER,
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "mesh",
           {
             frustumCulled: false,
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8659,15 +8710,15 @@ function WebVRReticle({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "mesh",
           {
             frustumCulled: false,
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8680,7 +8731,7 @@ function WebVRReticle({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "mesh",
           {
             frustumCulled: false,
@@ -8689,7 +8740,7 @@ function WebVRReticle({
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "ringGeometry",
                 {
                   args: [
@@ -8702,7 +8753,7 @@ function WebVRReticle({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -9143,7 +9194,7 @@ function useWebVRWakeLock(enabled) {
 }
 
 // src/webvr/webvr.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function initializeSettings(screensize, profile) {
   const stored = loadWebVRSettings();
   return {
@@ -9476,8 +9527,8 @@ var WebVR = (0, import_react34.forwardRef)(function WebVR2({
   useWebVRWakeLock(
     wakelock && (mode === "mobilevr" || mode === "fake")
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Gyro,
       {
         ref: gyroRef,
@@ -9491,7 +9542,7 @@ var WebVR = (0, import_react34.forwardRef)(function WebVR2({
         touchMode: "off"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       WebVRStereoRenderer,
       {
         mode,
@@ -9499,7 +9550,7 @@ var WebVR = (0, import_react34.forwardRef)(function WebVR2({
         screensize: settings.screensize
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       WebVRReticle,
       {
         dwellMs: cursorDwellMs,
@@ -9775,7 +9826,7 @@ diffuseColor.rgb = mix(diffuseColor.rgb, applyPanoFilter(diffuseColor.rgb), clam
 }
 
 // src/pano-filter/pano-basic-material.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function PanoBasicMaterial({
   map,
   side,
@@ -9822,7 +9873,7 @@ function PanoBasicMaterial({
       intensityUniformRef.current.value = snapshot.intensity;
     }
   }, [snapshot.intensity]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "meshBasicMaterial",
     {
       ref: materialRef,
@@ -9838,7 +9889,7 @@ function PanoBasicMaterial({
 }
 
 // src/sphere.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
   const [texture, setTexture] = (0, import_react37.useState)(null);
   const onLoadRef = (0, import_react37.useRef)(onLoad);
@@ -9937,14 +9988,14 @@ function Sphere({
   if (!displayTexture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "mesh",
     {
       rotation: [0, import_three10.MathUtils.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -9961,7 +10012,7 @@ function Sphere({
 var import_fiber16 = require("@react-three/fiber");
 var import_react38 = require("react");
 var import_three11 = require("three");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -10675,15 +10726,15 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "mesh",
       {
         rotation: [0, import_three11.MathUtils.degToRad(90 + yawOffset), 0],
         visible,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -10694,7 +10745,7 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
@@ -10806,7 +10857,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -10928,7 +10979,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "mesh",
     {
       ref: meshRef,
@@ -11222,7 +11273,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -11271,21 +11322,21 @@ function SnapshotOverlay({
   if (!material) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -11313,7 +11364,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -11548,7 +11599,7 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var TileTextureManagerContext = (0, import_react41.createContext)(
   null
 );
@@ -11572,7 +11623,7 @@ function TileTextureManagerProvider({
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
   return (0, import_react41.useContext)(TileTextureManagerContext);
@@ -11760,7 +11811,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("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;
@@ -11847,14 +11898,14 @@ function PreviewFace({
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11870,7 +11921,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     PreviewFace,
     {
       face,
@@ -11915,14 +11966,14 @@ var TileMesh = (0, import_react42.memo)(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11939,7 +11990,7 @@ var TileLayerMeshes = (0, import_react42.memo)(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     TileMesh,
     {
       address,
@@ -12276,15 +12327,15 @@ function Tile({
     };
     commitLayers(nextLayers);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       TileLayerMeshes,
       {
         layer,
@@ -12297,7 +12348,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SceneSource({
   scene,
   visible,
@@ -12310,7 +12361,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         Sphere,
         {
           src: scene.src,
@@ -12323,7 +12374,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         Tile,
         {
           ...tileProps,
@@ -12590,8 +12641,8 @@ function ScenesController({
   }, [gl, manager, releaseInteraction, snapshot]);
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react43.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -12603,7 +12654,7 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         SceneSource,
         {
           scene: source,
@@ -12619,7 +12670,7 @@ function ScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       TransitionOverlay,
       {
         snapshot,
@@ -12712,12 +12763,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         ScenesController,
         {
           ...rest,
@@ -12746,7 +12797,7 @@ var import_react45 = require("react");
 // src/webvr/stereo-html.tsx
 var import_drei = require("@react-three/drei");
 var import_react44 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function useFallbackStereoView() {
   const runtime = (0, import_react44.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
@@ -12771,10 +12822,10 @@ function stereoCalculatePosition(eye, stereoView) {
 function PanoHtml({ children, ...htmlProps }) {
   const stereoView = useFallbackStereoView();
   if (!stereoView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_drei.Html, { ...htmlProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drei.Html, { ...htmlProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       import_drei.Html,
       {
         ...htmlProps,
@@ -12782,7 +12833,7 @@ function PanoHtml({ children, ...htmlProps }) {
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       import_drei.Html,
       {
         ...htmlProps,
@@ -12795,7 +12846,7 @@ function PanoHtml({ children, ...htmlProps }) {
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -12892,14 +12943,14 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: "pano-hotspot-tooltip",
       role: "tooltip",
       style: bubbleStyle,
       children: [
-        showImage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        showImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "img",
           {
             alt: content.imageAlt ?? content.text ?? "",
@@ -12908,14 +12959,14 @@ function HotspotTooltip({
             src: content.image
           }
         ) : null,
-        content.text ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
+        content.text ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
       ]
     }
   ) });
 }
 
 // src/hotspot/hotspot-anchor.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -13485,7 +13536,7 @@ function HotspotAnchor({
       setHovered(true);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "group",
     {
       ref: groupRef,
@@ -13562,18 +13613,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -13589,7 +13640,7 @@ function HotspotAnchor({
 
 // src/hotspot/hotspot-plane.tsx
 var import_three21 = require("three");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new import_three21.Vector2();
 var RAYCAST_HITS = [];
@@ -13691,9 +13742,9 @@ function HotspotPlane({
   map,
   opacity
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("mesh", { raycast: hotspotPlaneRaycast, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "meshBasicMaterial",
       {
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
@@ -13709,7 +13760,7 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = (0, import_fiber23.useThree)((state) => state.gl);
   const [texture, setTexture] = (0, import_react47.useState)(null);
@@ -13773,7 +13824,7 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
@@ -13785,7 +13836,7 @@ var import_drei2 = require("@react-three/drei");
 var import_fiber24 = require("@react-three/fiber");
 var import_react48 = require("react");
 var import_three23 = require("three");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var LINE_WORLD_POSITION = new import_three23.Vector3();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
@@ -13831,7 +13882,7 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_drei2.Line,
     {
       ref: lineRef,
@@ -13853,7 +13904,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -14141,7 +14192,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14156,7 +14207,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14178,7 +14229,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "meshBasicMaterial",
           {
             color: fill,
@@ -14188,7 +14239,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -14208,7 +14259,7 @@ function PolygonHotspot({
 // src/hotspot/polyline-hotspot.tsx
 var import_react50 = require("react");
 var import_three25 = require("three");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -14348,7 +14399,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14362,7 +14413,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14383,7 +14434,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14402,7 +14453,7 @@ function PolylineHotspot({
 // src/hotspot/graphic-hotspot.tsx
 var import_react51 = require("react");
 var import_three26 = require("three");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -14622,22 +14673,22 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
 var import_fiber25 = require("@react-three/fiber");
 var import_react52 = require("react");
 var import_three27 = require("three");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -14813,14 +14864,14 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
 var import_fiber26 = require("@react-three/fiber");
 var import_react53 = require("react");
 var import_three28 = require("three");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -15045,14 +15096,14 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
 var import_fiber27 = require("@react-three/fiber");
 var import_react54 = require("react");
 var import_three29 = require("three");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -15337,13 +15388,13 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
 var import_react55 = require("react");
 var import_three30 = require("three");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -15661,13 +15712,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 var import_drei3 = require("@react-three/drei");
 var import_three31 = require("three");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -15724,7 +15775,7 @@ function IframeHotspot({
     interactive,
     pointerEvents
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -15733,9 +15784,9 @@ function IframeHotspot({
       pointerEvents,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("mesh", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("mesh", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -15746,7 +15797,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           import_drei3.Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -15761,7 +15812,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "iframe",
               {
                 allow,