@ericchen1990/pano-view 2.5.1 → 3.0.0

package/dist/index.cjs

@@ -2306,7 +2306,7 @@ module.exports = __toCommonJS(index_exports);
 // src/pano-viewer.tsx
 var import_fiber10 = require("@react-three/fiber");
 var import_xr3 = require("@react-three/xr");
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/background-audio-host.ts
 var import_react = require("react");
@@ -2350,6 +2350,107 @@ function cn(...values) {
   return values.filter(Boolean).join(" ");
 }
 
+// src/audio/howl.ts
+var import_howler = __toESM(require_howler());
+import_howler.Howler.autoUnlock = true;
+function resumePanoAudio() {
+  if (!import_howler.Howler.ctx || import_howler.Howler.ctx.state === "running") {
+    return Promise.resolve();
+  }
+  return import_howler.Howler.ctx.resume();
+}
+function sourceList(src) {
+  if (src == null) {
+    return [];
+  }
+  if (typeof src === "string") {
+    return src ? [src] : [];
+  }
+  return src.filter((item) => Boolean(item));
+}
+function createUnlockingHowl({
+  src,
+  loop,
+  crossOrigin,
+  isActive,
+  shouldRetryPlay,
+  onEnded,
+  onPlay,
+  onPause,
+  onLoadError,
+  onPlayError
+}) {
+  let disposed = false;
+  let blockedNotified = false;
+  const unlockListeners = [];
+  const removeUnlockListeners = () => {
+    for (const { type, listener } of unlockListeners) {
+      window.removeEventListener(type, listener, true);
+    }
+    unlockListeners.length = 0;
+  };
+  const instance = new import_howler.Howl({
+    src: [...src],
+    html5: false,
+    preload: true,
+    loop,
+    xhr: crossOrigin === "use-credentials" ? { withCredentials: true } : void 0,
+    onend: () => {
+      if (disposed || !isActive() || instance.loop()) {
+        return;
+      }
+      onEnded?.();
+    },
+    onplay: () => {
+      if (!disposed && isActive()) {
+        onPlay?.();
+      }
+    },
+    onpause: () => {
+      if (!disposed && isActive()) {
+        onPause?.();
+      }
+    },
+    onloaderror: (_soundId, error) => {
+      if (!disposed && isActive()) {
+        onLoadError?.(error);
+      }
+    },
+    onplayerror: (_soundId, error) => {
+      if (disposed || !isActive()) {
+        return;
+      }
+      if (!blockedNotified) {
+        blockedNotified = true;
+        onPlayError?.(error);
+      }
+      const retry = () => {
+        removeUnlockListeners();
+        if (!disposed && isActive() && shouldRetryPlay()) {
+          void resumePanoAudio();
+          instance.play();
+        }
+      };
+      removeUnlockListeners();
+      unlockListeners.push({ type: "pointerdown", listener: retry });
+      unlockListeners.push({ type: "keydown", listener: retry });
+      window.addEventListener("pointerdown", retry, { capture: true });
+      window.addEventListener("keydown", retry, { capture: true });
+    }
+  });
+  return {
+    howl: instance,
+    dispose: () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      removeUnlockListeners();
+      instance.unload();
+    }
+  };
+}
+
 // src/auto-rotate.tsx
 var import_fiber2 = require("@react-three/fiber");
 var import_react4 = require("react");
@@ -3581,13 +3682,75 @@ function isProduction2() {
   return nodeEnv === "production";
 }
 
-// src/pano-context-menu.tsx
+// src/media-activation.tsx
 var import_react10 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var PanoMediaActivationHostContext = (0, import_react10.createContext)(null);
+function createPanoMediaActivationHost() {
+  return { intents: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(), revision: 0 };
+}
+function notify(host) {
+  host.revision += 1;
+  for (const listener of host.listeners) {
+    listener();
+  }
+}
+function getPanoMediaActivationRevision(host) {
+  return host.revision;
+}
+function subscribePanoMediaActivation(host, listener) {
+  host.listeners.add(listener);
+  return () => {
+    host.listeners.delete(listener);
+  };
+}
+function hasPanoMediaActivationIntent(host) {
+  return host.intents.size > 0;
+}
+function usePanoMediaActivationIntent(required) {
+  const host = (0, import_react10.useContext)(PanoMediaActivationHostContext);
+  const keyRef = (0, import_react10.useRef)(null);
+  if (keyRef.current === null) {
+    keyRef.current = /* @__PURE__ */ Symbol("pano-media-intent");
+  }
+  (0, import_react10.useEffect)(() => {
+    if (!host || !required) {
+      return;
+    }
+    const key = keyRef.current;
+    host.intents.add(key);
+    notify(host);
+    return () => {
+      host.intents.delete(key);
+      notify(host);
+    };
+  }, [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_react11 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
-var PanoContextMenuOverlayContext = (0, import_react10.createContext)(null);
+var PanoContextMenuOverlayContext = (0, import_react11.createContext)(null);
 var DEFAULT_APPEARANCE = {
   background: "#161616",
   color: "#f4f4f4",
@@ -3627,11 +3790,11 @@ function DefaultContextMenuPanel({
   selectContext,
   onRequestClose
 }) {
-  const menuRef = (0, import_react10.useRef)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
+  const menuRef = (0, import_react11.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
   const resolved = { ...DEFAULT_APPEARANCE, ...appearance };
   const iconSize = Number.isFinite(resolved.iconSize) ? Math.max(0, resolved.iconSize) : DEFAULT_ICON_SIZE;
-  const visibleItems = (0, import_react10.useMemo)(
+  const visibleItems = (0, import_react11.useMemo)(
     () => items.filter((item) => {
       if (!isActionItem(item)) {
         return true;
@@ -3640,7 +3803,7 @@ function DefaultContextMenuPanel({
     }),
     [items]
   );
-  const focusableIndices = (0, import_react10.useMemo)(() => {
+  const focusableIndices = (0, import_react11.useMemo)(() => {
     const indices = [];
     visibleItems.forEach((item, index) => {
       if (isActionItem(item) && !item.disabled) {
@@ -3649,7 +3812,7 @@ function DefaultContextMenuPanel({
     });
     return indices;
   }, [visibleItems]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const first = focusableIndices[0];
     setActiveIndex(first ?? 0);
     const frame = requestAnimationFrame(() => {
@@ -3660,7 +3823,7 @@ function DefaultContextMenuPanel({
     });
     return () => cancelAnimationFrame(frame);
   }, [focusableIndices]);
-  const activateItem = (0, import_react10.useCallback)(
+  const activateItem = (0, import_react11.useCallback)(
     (item) => {
       if (item.disabled) {
         return;
@@ -3746,7 +3909,7 @@ function DefaultContextMenuPanel({
     padding: resolved.padding,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ref: menuRef,
@@ -3757,7 +3920,7 @@ function DefaultContextMenuPanel({
       style: panelStyle,
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3769,9 +3932,9 @@ function DefaultContextMenuPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
           if (!isActionItem(item)) {
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "div",
               {
                 "aria-hidden": true,
@@ -3788,7 +3951,7 @@ function DefaultContextMenuPanel({
             );
           }
           const disabled = item.disabled === true;
-          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "img",
             {
               alt: item.imageAlt ?? "",
@@ -3802,7 +3965,7 @@ function DefaultContextMenuPanel({
               }
             }
           ) : null);
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "button",
             {
               "aria-disabled": disabled || void 0,
@@ -3838,7 +4001,7 @@ function DefaultContextMenuPanel({
               tabIndex: disabled ? -1 : activeIndex === index ? 0 : -1,
               type: "button",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "span",
                   {
                     "aria-hidden": true,
@@ -3850,7 +4013,7 @@ function DefaultContextMenuPanel({
                     children: iconNode
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1 }, children: item.label })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: item.label })
               ]
             },
             item.id
@@ -3866,9 +4029,22 @@ function PositionedMenuShell({
   overlayElement,
   children
 }) {
-  const shellRef = (0, import_react10.useRef)(null);
-  const [offset, setOffset] = (0, import_react10.useState)({ left: 0, top: 0 });
-  (0, import_react10.useLayoutEffect)(() => {
+  const shellRef = (0, import_react11.useRef)(null);
+  const [offset, setOffset] = (0, import_react11.useState)({ left: 0, top: 0 });
+  const [viewportRevision, setViewportRevision] = (0, import_react11.useState)(0);
+  (0, import_react11.useEffect)(() => {
+    const refresh = () => setViewportRevision((revision) => revision + 1);
+    const viewport = window.visualViewport;
+    window.addEventListener("resize", refresh);
+    window.addEventListener("orientationchange", refresh);
+    viewport?.addEventListener("resize", refresh);
+    return () => {
+      window.removeEventListener("resize", refresh);
+      window.removeEventListener("orientationchange", refresh);
+      viewport?.removeEventListener("resize", refresh);
+    };
+  }, []);
+  (0, import_react11.useLayoutEffect)(() => {
     const shell = shellRef.current;
     if (!overlayElement || !shell) {
       return;
@@ -3889,8 +4065,8 @@ function PositionedMenuShell({
       left: Math.min(Math.max(rawLeft, MENU_EDGE_PADDING), maxLeft),
       top: Math.min(Math.max(rawTop, MENU_EDGE_PADDING), maxTop)
     });
-  }, [clientX, clientY, overlayElement, children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  }, [clientX, clientY, overlayElement, children, viewportRevision]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       className: "pano-context-menu-shell",
@@ -3904,20 +4080,20 @@ function PositionedMenuShell({
   );
 }
 function usePanoContextMenuOverlay() {
-  const [session2, setSession] = (0, import_react10.useState)(null);
-  const overlayRef = (0, import_react10.useRef)(null);
-  const [overlayElement, setOverlayElement] = (0, import_react10.useState)(
+  const [session2, setSession] = (0, import_react11.useState)(null);
+  const overlayRef = (0, import_react11.useRef)(null);
+  const [overlayElement, setOverlayElement] = (0, import_react11.useState)(
     null
   );
-  const api = (0, import_react10.useMemo)(
+  const api = (0, import_react11.useMemo)(
     () => ({ setSession, overlayRef }),
     []
   );
-  const setOverlayNode = (0, import_react10.useCallback)((node) => {
+  const setOverlayNode = (0, import_react11.useCallback)((node) => {
     overlayRef.current = node;
     setOverlayElement(node);
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!session2) {
       return;
     }
@@ -3949,7 +4125,7 @@ function usePanoContextMenuOverlay() {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [session2]);
-  const overlay = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       ref: setOverlayNode,
@@ -3960,7 +4136,7 @@ function usePanoContextMenuOverlay() {
         position: "absolute",
         zIndex: 20
       },
-      children: session2 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: session2 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         PositionedMenuShell,
         {
           clientX: session2.event.clientX,
@@ -3985,13 +4161,13 @@ function PanoContextMenu({
   separatorClassName,
   children
 }) {
-  const eventBus = (0, import_react10.useContext)(PanoEventBusContext);
-  const controlsRef = (0, import_react10.useContext)(PanoramaViewContext);
-  const overlayApi = (0, import_react10.useContext)(PanoContextMenuOverlayContext);
-  const actions = (0, import_react10.useContext)(PanoContextMenuActionsContext);
-  const instanceId = (0, import_react10.useId)();
-  const sessionKeyRef = (0, import_react10.useRef)(0);
-  const propsRef = (0, import_react10.useRef)({
+  const eventBus = (0, import_react11.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react11.useContext)(PanoramaViewContext);
+  const overlayApi = (0, import_react11.useContext)(PanoContextMenuOverlayContext);
+  const actions = (0, import_react11.useContext)(PanoContextMenuActionsContext);
+  const instanceId = (0, import_react11.useId)();
+  const sessionKeyRef = (0, import_react11.useRef)(0);
+  const propsRef = (0, import_react11.useRef)({
     items,
     prepend,
     append,
@@ -4021,10 +4197,10 @@ function PanoContextMenu({
       "<PanoContextMenu> requires the PanoViewer context-menu overlay host."
     );
   }
-  const close = (0, import_react10.useCallback)(() => {
+  const close = (0, import_react11.useCallback)(() => {
     overlayApi.setSession(null);
   }, [overlayApi]);
-  const openMenu = (0, import_react10.useCallback)(
+  const openMenu = (0, import_react11.useCallback)(
     (event) => {
       event.nativeEvent.preventDefault();
       const view = controlsRef.current?.getView() ?? {
@@ -4053,9 +4229,9 @@ function PanoContextMenu({
         view,
         render: () => {
           if (hasCustomChildren && current.children) {
-            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)("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             DefaultContextMenuPanel,
             {
               appearance: current.appearance,
@@ -4073,7 +4249,7 @@ function PanoContextMenu({
     },
     [actions, close, controlsRef, instanceId, overlayApi]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const unsubscribeContextMenu = eventBus.subscribe(
       "contextmenu",
       openMenu
@@ -4093,7 +4269,7 @@ function PanoContextMenu({
   return null;
 }
 function ResetViewIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
       "aria-hidden": true,
@@ -4106,14 +4282,14 @@ function ResetViewIcon() {
       viewBox: "0 0 16 16",
       width: "100%",
       children: [
-        /* @__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" })
+        /* @__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" })
       ]
     }
   );
 }
 function FullscreenIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
     {
       "aria-hidden": true,
@@ -4125,12 +4301,12 @@ function FullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
     }
   );
 }
 function ExitFullscreenIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
     {
       "aria-hidden": true,
@@ -4142,7 +4318,7 @@ function ExitFullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
     }
   );
 }
@@ -4151,7 +4327,7 @@ function createPanoContextMenuPresets(actions) {
   const resetView = {
     id: "pano-reset-view",
     label: "Reset view",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResetViewIcon, {}),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ResetViewIcon, {}),
     onSelect: () => {
       actions.reset();
     }
@@ -4159,7 +4335,7 @@ function createPanoContextMenuPresets(actions) {
   const fullscreen = {
     id: "pano-fullscreen",
     label: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-    icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExitFullscreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FullscreenIcon, {}),
+    icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExitFullscreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FullscreenIcon, {}),
     onSelect: () => {
       actions.toggleFullscreen();
     }
@@ -4252,12 +4428,12 @@ function composePanoContextMenuItems(props, presets) {
     ...resolvePanoContextMenuEntries(props.append ?? [], presets)
   ];
 }
-var PanoContextMenuActionsContext = (0, import_react10.createContext)(null);
+var PanoContextMenuActionsContext = (0, import_react11.createContext)(null);
 
 // src/pano-cursor.tsx
 var import_fiber5 = require("@react-three/fiber");
-var import_react11 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var DEFAULT_PANO_CURSORS = {
   default: "grab",
   dragging: "grabbing",
@@ -4271,9 +4447,9 @@ var LAYER_PRIORITY = {
   hotspotDragging: 3,
   hidden: 4
 };
-var PanoCursorContext = (0, import_react11.createContext)(null);
+var PanoCursorContext = (0, import_react12.createContext)(null);
 function usePanoCursor() {
-  return (0, import_react11.useContext)(PanoCursorContext);
+  return (0, import_react12.useContext)(PanoCursorContext);
 }
 function hotspotCursorClaimId(id) {
   return `pano-cursor:hotspot:${id}`;
@@ -4325,12 +4501,12 @@ function PanoCursorController({
   children
 }) {
   const { gl } = (0, import_fiber5.useThree)();
-  const eventBus = (0, import_react11.useContext)(PanoEventBusContext);
-  const claimsRef = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
-  const cursorsRef = (0, import_react11.useRef)(cursors);
-  const appliedCursorRef = (0, import_react11.useRef)(null);
+  const eventBus = (0, import_react12.useContext)(PanoEventBusContext);
+  const claimsRef = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
+  const cursorsRef = (0, import_react12.useRef)(cursors);
+  const appliedCursorRef = (0, import_react12.useRef)(null);
   cursorsRef.current = cursors;
-  const applyCursor = (0, import_react11.useCallback)(() => {
+  const applyCursor = (0, import_react12.useCallback)(() => {
     const next = resolveHighestCursor(claimsRef.current, cursorsRef.current);
     const element = gl.domElement;
     if (appliedCursorRef.current === next && element.style.cursor === next) {
@@ -4339,14 +4515,14 @@ function PanoCursorController({
     element.style.cursor = next;
     appliedCursorRef.current = next;
   }, [gl]);
-  const claim = (0, import_react11.useCallback)(
+  const claim = (0, import_react12.useCallback)(
     (id, layer, cursor) => {
       claimsRef.current.set(id, { layer, cursor });
       applyCursor();
     },
     [applyCursor]
   );
-  const release = (0, import_react11.useCallback)(
+  const release = (0, import_react12.useCallback)(
     (id) => {
       if (claimsRef.current.delete(id)) {
         applyCursor();
@@ -4354,7 +4530,7 @@ function PanoCursorController({
     },
     [applyCursor]
   );
-  const api = (0, import_react11.useMemo)(
+  const api = (0, import_react12.useMemo)(
     () => ({
       cursors,
       claim,
@@ -4362,7 +4538,7 @@ function PanoCursorController({
     }),
     [claim, cursors, release]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const element = gl.domElement;
     const previous = element.style.cursor;
     return () => {
@@ -4371,10 +4547,10 @@ function PanoCursorController({
       element.style.cursor = previous;
     };
   }, [gl]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     applyCursor();
   }, [applyCursor, cursors]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!eventBus) {
       return;
     }
@@ -4399,12 +4575,12 @@ function PanoCursorController({
       release(PANO_DRAG_CLAIM_ID);
     };
   }, [claim, eventBus, release]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanoCursorContext.Provider, { value: api, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoCursorContext.Provider, { value: api, children });
 }
 
 // src/pano-events.tsx
 var import_fiber6 = require("@react-three/fiber");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var DEFAULT_IDLE_TIME_MS = 2e3;
 function resolveIdleTime(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_IDLE_TIME_MS;
@@ -4442,13 +4618,13 @@ function usePanoEvents({
   onVRDenied,
   onVRUnknownDevice
 }) {
-  const eventBus = (0, import_react12.useContext)(PanoEventBusContext);
-  const controlsRef = (0, import_react12.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react13.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react13.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber6.useThree)();
   if (!eventBus || !controlsRef) {
     throw new Error("usePanoEvents must be used inside <PanoViewer>.");
   }
-  const callbacksRef = (0, import_react12.useRef)({
+  const callbacksRef = (0, import_react13.useRef)({
     onViewChange,
     onViewSettled,
     onViewInteractionStart,
@@ -4512,15 +4688,15 @@ function usePanoEvents({
     onVRDenied,
     onVRUnknownDevice
   };
-  const idleElapsedRef = (0, import_react12.useRef)(0);
-  const isIdleRef = (0, import_react12.useRef)(false);
-  const idleTimeRef = (0, import_react12.useRef)(resolveIdleTime(idleTime));
+  const idleElapsedRef = (0, import_react13.useRef)(0);
+  const isIdleRef = (0, import_react13.useRef)(false);
+  const idleTimeRef = (0, import_react13.useRef)(resolveIdleTime(idleTime));
   idleTimeRef.current = resolveIdleTime(idleTime);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     idleElapsedRef.current = 0;
     isIdleRef.current = false;
   }, [idleTime]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const unsubscribers = [
       eventBus.subscribe("viewchange", (view) => {
         callbacksRef.current.onViewChange?.(view);
@@ -4601,7 +4777,7 @@ function usePanoEvents({
       }
     };
   }, [eventBus]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const element = gl.domElement;
     const handleWheel = (nativeEvent) => {
       callbacksRef.current.onWheel?.({
@@ -4614,7 +4790,7 @@ function usePanoEvents({
       element.removeEventListener("wheel", handleWheel);
     };
   }, [gl]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -4640,7 +4816,7 @@ function usePanoEvents({
     wasFullscreenRef.current = isViewerFullscreen();
     return subscribeFullscreenChange(handleFullscreenChange);
   }, [gl]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const element = gl.domElement;
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -4682,7 +4858,7 @@ function PanoEvents(props) {
 
 // src/panorama-event-surface.tsx
 var import_fiber7 = require("@react-three/fiber");
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_three3 = require("three");
 
 // src/hotspot/coordinates.ts
@@ -4760,7 +4936,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_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -4775,9 +4951,9 @@ function makePanoramaPointerEvent(event) {
   };
 }
 function PanoramaEventSurface() {
-  const eventBus = (0, import_react13.useContext)(PanoEventBusContext);
+  const eventBus = (0, import_react14.useContext)(PanoEventBusContext);
   const { camera, gl } = (0, import_fiber7.useThree)();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!eventBus) {
       return;
     }
@@ -4818,7 +4994,7 @@ function PanoramaEventSurface() {
     event.stopPropagation();
     eventBus.emit(type, makePanoramaPointerEvent(event));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "mesh",
     {
       renderOrder: -200,
@@ -4828,8 +5004,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -4846,8 +5022,8 @@ function PanoramaEventSurface() {
 }
 
 // src/scenes-host.ts
-var import_react14 = require("react");
-var ScenesHostContext = (0, import_react14.createContext)(null);
+var import_react15 = require("react");
+var ScenesHostContext = (0, import_react15.createContext)(null);
 function createScenesHost() {
   return {
     controller: null,
@@ -4864,7 +5040,7 @@ function notifyScenesHost(host) {
 
 // src/touch-controls.tsx
 var import_fiber8 = require("@react-three/fiber");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
@@ -4879,16 +5055,16 @@ function TouchControls({
   pinchZoom = true
 }) {
   useClaimControlChannel("touch");
-  const controlsRef = (0, import_react15.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react16.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber8.useThree)();
-  const pointersRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = (0, import_react15.useRef)(null);
-  const optionsRef = (0, import_react15.useRef)({ rotateSpeed, invert, pinchZoom });
+  const pointersRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = (0, import_react16.useRef)(null);
+  const optionsRef = (0, import_react16.useRef)({ rotateSpeed, invert, pinchZoom });
   if (!controlsRef) {
     throw new Error("<TouchControls> must be rendered inside <PanoViewer>.");
   }
   optionsRef.current = { rotateSpeed, invert, pinchZoom };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const element = gl.domElement;
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
@@ -5010,21 +5186,21 @@ function TouchControls({
 }
 
 // src/video/chrome-overlay.tsx
-var import_react16 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var PanoChromeOverlayContext = (0, import_react16.createContext)(null);
+var import_react17 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PanoChromeOverlayContext = (0, import_react17.createContext)(null);
 function usePanoChromeOverlay() {
-  const [overlayElement, setOverlayElement] = (0, import_react16.useState)(
+  const [overlayElement, setOverlayElement] = (0, import_react17.useState)(
     null
   );
-  const setOverlayNode = (0, import_react16.useCallback)((node) => {
+  const setOverlayNode = (0, import_react17.useCallback)((node) => {
     setOverlayElement(node);
   }, []);
-  const api = (0, import_react16.useMemo)(
+  const api = (0, import_react17.useMemo)(
     () => ({ overlayElement }),
     [overlayElement]
   );
-  const overlay = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: "pano-chrome-overlay",
@@ -5036,9 +5212,9 @@ function usePanoChromeOverlay() {
 }
 
 // src/video/host.ts
-var import_react17 = require("react");
-var PanoVideoHostContext = (0, import_react17.createContext)(null);
-var DefaultPanoVideoControlsContext = (0, import_react17.createContext)(false);
+var import_react18 = require("react");
+var PanoVideoHostContext = (0, import_react18.createContext)(null);
+var DefaultPanoVideoControlsContext = (0, import_react18.createContext)(false);
 function createPanoVideoHost() {
   return {
     controller: null,
@@ -5083,8 +5259,8 @@ function isProduction3() {
   return nodeEnv === "production";
 }
 function useClaimPanoVideoControls() {
-  const host = (0, import_react17.useContext)(PanoVideoHostContext);
-  const isDefault = (0, import_react17.useContext)(DefaultPanoVideoControlsContext);
+  const host = (0, import_react18.useContext)(PanoVideoHostContext);
+  const isDefault = (0, import_react18.useContext)(DefaultPanoVideoControlsContext);
   if (!host || isDefault) {
     return;
   }
@@ -5097,11 +5273,11 @@ function useClaimPanoVideoControls() {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/video/pano-video-captions.tsx
-var import_react18 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
   background: "rgba(0, 0, 0, 0.55)",
@@ -5124,7 +5300,7 @@ function resolvePanoVideoCaptionAppearance(appearance) {
 function PanoVideoCaptionsOverlay({
   controller
 }) {
-  const snapshot = (0, import_react18.useSyncExternalStore)(
+  const snapshot = (0, import_react19.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
@@ -5149,13 +5325,13 @@ function PanoVideoCaptionsOverlay({
     textShadow: snapshot.captionAppearance.textShadow,
     whiteSpace: "pre-wrap"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: "pano-video-captions",
       "data-pano-video-captions": "",
       style: wrapperStyle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: textStyle, children: snapshot.captionText })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: textStyle, children: snapshot.captionText })
     }
   );
 }
@@ -5166,7 +5342,7 @@ function PanoVideoCaptions({
 }
 
 // src/video/pano-video-controls.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/video/format.ts
 var DEFAULT_PANO_VIDEO_PLAYBACK_RATES = [0.5, 1, 1.25, 1.5, 2];
@@ -5298,7 +5474,7 @@ function cueText(cue) {
 }
 
 // src/video/pano-video-controls.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE = {
   background: "rgba(16, 16, 16, 0.88)",
   color: "#f4f4f4",
@@ -5359,7 +5535,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_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       "aria-hidden": true,
@@ -5371,7 +5547,7 @@ function Icon({ path }) {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "16",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: path })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: path })
     }
   );
 }
@@ -5383,7 +5559,7 @@ function ChromeButton({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       "aria-label": label,
@@ -5409,14 +5585,14 @@ function ChromeMenu({
   labelledBy,
   items
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         ChromeMenuRadioItem,
         {
           active: item.active,
@@ -5436,7 +5612,7 @@ function ChromeMenuSurface({
   labelledBy,
   role
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       "aria-labelledby": labelledBy,
@@ -5460,7 +5636,7 @@ function ChromeMenuRadioItem({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       "aria-checked": active,
@@ -5485,7 +5661,7 @@ function ChromeMenuActionItem({
   onClick,
   secondary
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "button",
     {
       className: "pano-video-chrome-menu-action",
@@ -5500,7 +5676,7 @@ function ChromeMenuActionItem({
       },
       type: "button",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label }),
         secondary
       ]
     }
@@ -5509,10 +5685,10 @@ function ChromeMenuActionItem({
 function ChromeMenuSectionLabel({
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pano-video-chrome-menu-label", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pano-video-chrome-menu-label", children });
 }
 function ChromeMenuDivider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pano-video-chrome-menu-divider" });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pano-video-chrome-menu-divider" });
 }
 function CaptionsMenu({
   appearance,
@@ -5525,16 +5701,16 @@ function CaptionsMenu({
   panel,
   snapshot
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      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)(
+      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)(
             ChromeMenuRadioItem,
             {
               active: snapshot.trackId === null,
@@ -5547,7 +5723,7 @@ function CaptionsMenu({
           ),
           snapshot.tracks.map((track) => {
             const trackItemId = panoVideoTrackId(track);
-            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               ChromeMenuRadioItem,
               {
                 active: snapshot.trackId === trackItemId,
@@ -5561,29 +5737,29 @@ function CaptionsMenu({
             );
           })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChromeMenuDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChromeMenuDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Settings",
             onClick: onOpenSettings,
-            secondary: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, children: "\u203A" })
+            secondary: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, children: "\u203A" })
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Back",
             onClick: onShowTracks,
-            secondary: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, children: "\u2039" })
+            secondary: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, children: "\u2039" })
           }
         ),
-        /* @__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)(
+        /* @__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)(
           ChromeMenuRadioItem,
           {
             active: Number(snapshot.captionAppearance.fontSize) === option.value,
@@ -5595,9 +5771,9 @@ function CaptionsMenu({
           },
           option.id
         )),
-        /* @__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)(
+        /* @__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)(
           ChromeMenuRadioItem,
           {
             active: snapshot.captionAppearance.background === option.value,
@@ -5618,7 +5794,7 @@ function VerticalVolumeSlider({
   onVolume,
   volume
 }) {
-  const trackRef = (0, import_react19.useRef)(null);
+  const trackRef = (0, import_react20.useRef)(null);
   const applyPointer = (event) => {
     const track = trackRef.current;
     if (!track) {
@@ -5638,7 +5814,7 @@ function VerticalVolumeSlider({
     }
   };
   const percentLabel = formatVolumePercent(volume);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: "pano-video-volume-popover",
@@ -5652,7 +5828,7 @@ function VerticalVolumeSlider({
         pointerEvents: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -5664,14 +5840,14 @@ function VerticalVolumeSlider({
             children: percentLabel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             style: {
               paddingBottom: VOLUME_THUMB_SIZE / 2,
               paddingTop: VOLUME_THUMB_SIZE / 2
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 "aria-label": "Volume",
@@ -5704,7 +5880,7 @@ function VerticalVolumeSlider({
                 },
                 tabIndex: 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "div",
                     {
                       style: {
@@ -5719,7 +5895,7 @@ function VerticalVolumeSlider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "div",
                     {
                       style: {
@@ -5754,14 +5930,14 @@ function VolumeControl({
   volume,
   volumeAdjustable
 }) {
-  const rootRef = (0, import_react19.useRef)(null);
-  const [open, setOpen] = (0, import_react19.useState)(false);
+  const rootRef = (0, import_react20.useRef)(null);
+  const [open, setOpen] = (0, import_react20.useState)(false);
   const displayVolume = muted ? 0 : volume;
   const mutedOrSilent = muted || volume === 0;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     onOpenChange(open);
   }, [onOpenChange, open]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!open || !volumeAdjustable || hasFinePointerHover()) {
       return;
     }
@@ -5778,17 +5954,17 @@ function VolumeControl({
     };
   }, [open, volumeAdjustable]);
   if (!volumeAdjustable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ChromeButton,
       {
         appearance,
         label: mutedOrSilent ? "Unmute" : "Mute",
         onClick: onToggleMuted,
-        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" })
+        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" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       "data-pano-video-volume": "",
@@ -5816,7 +5992,7 @@ function VolumeControl({
       },
       ref: rootRef,
       children: [
-        open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           VerticalVolumeSlider,
           {
             appearance,
@@ -5824,7 +6000,7 @@ function VolumeControl({
             volume: displayVolume
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ChromeButton,
           {
             appearance,
@@ -5835,7 +6011,7 @@ function VolumeControl({
               }
               onToggleMuted();
             },
-            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" })
+            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" })
           }
         )
       ]
@@ -5848,24 +6024,24 @@ function PanoVideoControlsHud({
   fullscreen,
   overlayElement
 }) {
-  const resolved = (0, import_react19.useMemo)(
+  const resolved = (0, import_react20.useMemo)(
     () => resolveControlsAppearance(appearance),
     [appearance]
   );
-  const snapshot = (0, import_react19.useSyncExternalStore)(
+  const snapshot = (0, import_react20.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
   );
-  const [menu, setMenu] = (0, import_react19.useState)(null);
-  const [captionsPanel, setCaptionsPanel] = (0, import_react19.useState)("tracks");
-  const [visible, setVisible] = (0, import_react19.useState)(true);
-  const [volumeOpen, setVolumeOpen] = (0, import_react19.useState)(false);
-  const [overlayWidth, setOverlayWidth] = (0, import_react19.useState)(
+  const [menu, setMenu] = (0, import_react20.useState)(null);
+  const [captionsPanel, setCaptionsPanel] = (0, import_react20.useState)("tracks");
+  const [visible, setVisible] = (0, import_react20.useState)(true);
+  const [volumeOpen, setVolumeOpen] = (0, import_react20.useState)(false);
+  const [overlayWidth, setOverlayWidth] = (0, import_react20.useState)(
     () => overlayElement.clientWidth
   );
-  const idleTimerRef = (0, import_react19.useRef)(0);
-  const barId = (0, import_react19.useId)();
+  const idleTimerRef = (0, import_react20.useRef)(0);
+  const barId = (0, import_react20.useId)();
   const rateMenuId = `${barId}-rate`;
   const variantMenuId = `${barId}-variant`;
   const captionsMenuId = `${barId}-captions`;
@@ -5873,7 +6049,7 @@ function PanoVideoControlsHud({
   const compact = overlayWidth < COMPACT_CONTROLS_WIDTH;
   const hideTime = overlayWidth < NARROW_CONTROLS_WIDTH;
   const showFullscreen = isFullscreenEnabled();
-  const bumpVisibility = (0, import_react19.useCallback)(
+  const bumpVisibility = (0, import_react20.useCallback)(
     (playing) => {
       setVisible(true);
       window.clearTimeout(idleTimerRef.current);
@@ -5886,7 +6062,7 @@ function PanoVideoControlsHud({
     },
     [menu, volumeOpen]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -5901,15 +6077,15 @@ function PanoVideoControlsHud({
       observer.disconnect();
     };
   }, [overlayElement]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!compact && menu === "more") {
       setMenu(null);
     }
   }, [compact, menu]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     bumpVisibility(snapshot.playing);
   }, [bumpVisibility, snapshot.playing]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const root = overlayElement.parentElement;
     if (!root) {
       return;
@@ -5968,7 +6144,7 @@ function PanoVideoControlsHud({
       document.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [bumpVisibility, controller, menu, overlayElement, snapshot.playing, volumeOpen]);
-  (0, import_react19.useEffect)(
+  (0, import_react20.useEffect)(
     () => () => {
       window.clearTimeout(idleTimerRef.current);
     },
@@ -5995,7 +6171,7 @@ function PanoVideoControlsHud({
   let menuNode = null;
   switch (menu) {
     case "rate":
-      menuNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      menuNode = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6014,7 +6190,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "variant":
-      menuNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      menuNode = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6033,7 +6209,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "captions":
-      menuNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      menuNode = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         CaptionsMenu,
         {
           appearance: resolved,
@@ -6057,7 +6233,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "more":
-      menuNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      menuNode = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6123,9 +6299,9 @@ function PanoVideoControlsHud({
     transition: "opacity 160ms ease",
     zIndex: 2
   };
-  const rateButton = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
+  const rateButton = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
     !compact && menu === "rate" ? menuNode : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ChromeButton,
       {
         appearance: resolved,
@@ -6133,13 +6309,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("rate");
         },
-        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` })
+        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` })
       }
     )
   ] });
-  const variantButton = canSwitchVariant ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
+  const variantButton = canSwitchVariant ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
     !compact && menu === "variant" ? menuNode : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ChromeButton,
       {
         appearance: resolved,
@@ -6147,13 +6323,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("variant");
         },
-        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" })
+        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" })
       }
     )
   ] }) : null;
-  const captionsButton = showCaptionsMenu ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
+  const captionsButton = showCaptionsMenu ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
     !compact && menu === "captions" ? menuNode : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ChromeButton,
       {
         appearance: resolved,
@@ -6161,18 +6337,18 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("captions");
         },
-        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" }) })
+        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" }) })
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: "pano-video-controls",
       "data-pano-video-controls": "",
       style: barStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ChromeButton,
           {
             appearance: resolved,
@@ -6180,11 +6356,11 @@ function PanoVideoControlsHud({
             onClick: () => {
               controller.togglePlay();
             },
-            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" })
+            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" })
           }
         ),
-        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "input",
           {
             "aria-label": "Seek",
@@ -6206,8 +6382,8 @@ function PanoVideoControlsHud({
             value: duration > 0 ? snapshot.currentTime : 0
           }
         ),
-        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           VolumeControl,
           {
             appearance: resolved,
@@ -6223,9 +6399,9 @@ function PanoVideoControlsHud({
             volumeAdjustable: snapshot.volumeAdjustable
           }
         ),
-        compact ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
+        compact ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
           menu !== null ? menuNode : null,
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             ChromeButton,
             {
               appearance: resolved,
@@ -6234,15 +6410,15 @@ function PanoVideoControlsHud({
               onClick: () => {
                 toggleMenu("more");
               },
-              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" })
+              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" })
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
           rateButton,
           variantButton,
           captionsButton
         ] }),
-        showFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        showFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ChromeButton,
           {
             appearance: resolved,
@@ -6250,7 +6426,7 @@ function PanoVideoControlsHud({
             onClick: () => {
               fullscreen?.toggleFullscreen();
             },
-            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" })
+            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" })
           }
         ) : null
       ]
@@ -6259,7 +6435,7 @@ function PanoVideoControlsHud({
 }
 function PanoVideoControls({ appearance }) {
   useClaimPanoVideoControls();
-  const host = (0, import_react19.useContext)(PanoVideoHostContext);
+  const host = (0, import_react20.useContext)(PanoVideoHostContext);
   if (host && appearance) {
     host.controls = appearance;
   }
@@ -6267,13 +6443,13 @@ function PanoVideoControls({ appearance }) {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function PanoVideoChromeBridge({
   fullscreen,
   host,
   overlayElement
 }) {
-  (0, import_react20.useSyncExternalStore)(
+  (0, import_react21.useSyncExternalStore)(
     (onStoreChange) => subscribePanoVideoHost(host, onStoreChange),
     () => getPanoVideoHostRevision(host),
     () => getPanoVideoHostRevision(host)
@@ -6282,8 +6458,8 @@ function PanoVideoChromeBridge({
     return null;
   }
   const showDefaultControls = host.controller !== null && host.controls !== false && host.controlClaims === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    showDefaultControls ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    showDefaultControls ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       PanoVideoControlsHud,
       {
         appearance: typeof host.controls === "object" ? host.controls : void 0,
@@ -6292,16 +6468,16 @@ function PanoVideoChromeBridge({
         overlayElement
       }
     ) : null,
-    host.captions !== false && host.controller ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
+    host.captions !== false && host.controller ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
   ] });
 }
 
 // src/webvr/chrome.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/webvr/host.ts
-var import_react21 = require("react");
-var WebVRRuntimeContext = (0, import_react21.createContext)(null);
+var import_react22 = require("react");
+var WebVRRuntimeContext = (0, import_react22.createContext)(null);
 function createWebVRHost() {
   return {
     controller: null,
@@ -6445,7 +6621,7 @@ function clamp2(value, min, max) {
 }
 
 // src/webvr/chrome.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -6457,7 +6633,7 @@ function ChromeButton2({
   children,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       className: "pano-webvr-button",
@@ -6494,7 +6670,7 @@ function SetupPanel({
     color: appearance.color,
     fontSize: appearance.fontSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       "aria-label": "Mobile VR setup",
@@ -6502,11 +6678,11 @@ function SetupPanel({
       role: "dialog",
       style: panelStyle,
       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: [
+        /* @__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: [
           "Screen size (inch)",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pano-webvr-setup-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 "aria-label": "Decrease screen size",
@@ -6518,8 +6694,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__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)(
+            /* @__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)(
               "button",
               {
                 "aria-label": "Increase screen size",
@@ -6533,10 +6709,10 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__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)(
+        /* @__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)(
               "button",
               {
                 "aria-label": "Previous headset preset",
@@ -6546,8 +6722,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__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)(
+            /* @__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)(
               "button",
               {
                 "aria-label": "Next headset preset",
@@ -6559,7 +6735,7 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           ChromeButton2,
           {
             appearance,
@@ -6572,7 +6748,7 @@ function SetupPanel({
   );
 }
 function WebVRChromeBridge({ host }) {
-  (0, import_react22.useSyncExternalStore)(
+  (0, import_react23.useSyncExternalStore)(
     (listener) => subscribeWebVRHost(host, listener),
     () => host.revision,
     () => host.revision
@@ -6582,9 +6758,9 @@ function WebVRChromeBridge({ host }) {
     return null;
   }
   const appearance = resolveAppearance(chrome);
-  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)(
+  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)(
         ChromeButton2,
         {
           appearance,
@@ -6592,7 +6768,7 @@ function WebVRChromeBridge({ host }) {
           children: "VR Setup"
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         ChromeButton2,
         {
           appearance,
@@ -6600,7 +6776,7 @@ function WebVRChromeBridge({ host }) {
           children: "Exit VR"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ChromeButton2,
       {
         appearance,
@@ -6608,7 +6784,7 @@ function WebVRChromeBridge({ host }) {
         children: available ? "Enter VR" : "VR unavailable"
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    mode === "fake" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "p",
       {
         className: "pano-webvr-hint",
@@ -6616,7 +6792,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_runtime9.jsx)(
+    setupOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       SetupPanel,
       {
         appearance,
@@ -6656,12 +6832,12 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 // src/webvr/xr-origin.tsx
 var import_fiber9 = require("@react-three/fiber");
 var import_xr2 = require("@react-three/xr");
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_three5 = require("three");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function PanoramaXROrigin() {
-  const originRef = (0, import_react23.useRef)(null);
-  const localHeadPositionRef = (0, import_react23.useRef)(new import_three5.Vector3());
+  const originRef = (0, import_react24.useRef)(null);
+  const localHeadPositionRef = (0, import_react24.useRef)(new import_three5.Vector3());
   const session2 = (0, import_xr2.useXR)((state) => state.session);
   const gl = (0, import_fiber9.useThree)((state) => state.gl);
   (0, import_fiber9.useFrame)(() => {
@@ -6674,11 +6850,11 @@ function PanoramaXROrigin() {
     origin.position.copy(localHeadPositionRef.current).multiplyScalar(-1);
     origin.updateMatrixWorld();
   }, -100);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_xr2.XROrigin, { ref: originRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xr2.XROrigin, { ref: originRef });
 }
 
 // src/pano-viewer.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -6723,10 +6899,10 @@ function PanoCursorTree({
   if (!cursors) {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoCursorController, { cursors, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
-  const host = (0, import_react24.useContext)(PanoVideoHostContext);
+  const host = (0, import_react25.useContext)(PanoVideoHostContext);
   if (host) {
     host.controlClaims = 0;
   }
@@ -6739,14 +6915,14 @@ function DefaultControlChannels({
   keyboardChannel,
   fovSpeed
 }) {
-  const claims = (0, import_react24.useContext)(ControlClaimsContext);
+  const claims = (0, import_react25.useContext)(ControlClaimsContext);
   if (!claims) {
     return null;
   }
-  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)(
+  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)(
       KeyboardControls,
       {
         ...keyboardChannel.props,
@@ -6755,7 +6931,7 @@ function DefaultControlChannels({
     ) : null
   ] });
 }
-var PanoViewer = (0, import_react24.forwardRef)(
+var PanoViewer = (0, import_react25.forwardRef)(
   function PanoViewer2({
     children,
     initialView,
@@ -6764,6 +6940,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
     controls = true,
     cursors,
     contextMenu = true,
+    mediaActivation,
     onViewChange,
     onPanoramaClick,
     onPanoramaDoubleClick,
@@ -6773,19 +6950,30 @@ var PanoViewer = (0, import_react24.forwardRef)(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = (0, import_react24.useRef)(null);
-    const controlsRef = (0, import_react24.useRef)(null);
-    const eventBus = (0, import_react24.useMemo)(() => createPanoEventBus(), []);
+    const rootRef = (0, import_react25.useRef)(null);
+    const controlsRef = (0, import_react25.useRef)(null);
+    const eventBus = (0, import_react25.useMemo)(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
     const { api: chromeOverlayApi, setOverlayNode, overlayElement } = usePanoChromeOverlay();
-    const videoHost = (0, import_react24.useMemo)(() => createPanoVideoHost(), []);
-    const filterHost = (0, import_react24.useMemo)(() => createPanoFilterHost(), []);
-    const webVRHost = (0, import_react24.useMemo)(() => createWebVRHost(), []);
-    const scenesHost = (0, import_react24.useMemo)(() => createScenesHost(), []);
-    const bgmHost = (0, import_react24.useMemo)(() => createBackgroundAudioHost(), []);
-    const stereoView = (0, import_react24.useMemo)(() => createWebVRStereoView(), []);
-    const xrStore = (0, import_react24.useMemo)(
+    const videoHost = (0, import_react25.useMemo)(() => createPanoVideoHost(), []);
+    const filterHost = (0, import_react25.useMemo)(() => createPanoFilterHost(), []);
+    const webVRHost = (0, import_react25.useMemo)(() => createWebVRHost(), []);
+    const scenesHost = (0, import_react25.useMemo)(() => createScenesHost(), []);
+    const bgmHost = (0, import_react25.useMemo)(() => createBackgroundAudioHost(), []);
+    const mediaActivationHost = (0, import_react25.useMemo)(() => createPanoMediaActivationHost(), []);
+    const mediaActivationOptions = (0, import_react25.useMemo)(
+      () => mediaActivation === false ? null : mediaActivation ?? {},
+      [mediaActivation]
+    );
+    const mediaActivationRevision = (0, import_react25.useSyncExternalStore)(
+      (onStoreChange) => subscribePanoMediaActivation(mediaActivationHost, onStoreChange),
+      () => getPanoMediaActivationRevision(mediaActivationHost),
+      () => getPanoMediaActivationRevision(mediaActivationHost)
+    );
+    const [mediaActivated, setMediaActivated] = (0, import_react25.useState)(false);
+    const stereoView = (0, import_react25.useMemo)(() => createWebVRStereoView(), []);
+    const xrStore = (0, import_react25.useMemo)(
       () => (0, import_xr3.createXRStore)({
         anchors: false,
         bodyTracking: false,
@@ -6801,13 +6989,39 @@ var PanoViewer = (0, import_react24.forwardRef)(
       }),
       []
     );
-    const fallbackViewRef = (0, import_react24.useRef)(DEFAULT_VIEW);
+    const mediaActivationControls = (0, import_react25.useMemo)(
+      () => ({
+        resumeAudio: () => resumePanoAudio(),
+        playVideo: async ({ unmute = false } = {}) => {
+          const controller = videoHost.controller;
+          if (!controller) {
+            return false;
+          }
+          if (unmute) {
+            controller.setMuted(false);
+          }
+          await controller.play();
+          return !controller.getSnapshot().blocked;
+        },
+        playBackgroundAudio: () => bgmHost.controller?.play() ?? false
+      }),
+      [bgmHost, videoHost]
+    );
+    const activateMedia = (0, import_react25.useCallback)(() => {
+      setMediaActivated(true);
+      const resume = mediaActivationControls.resumeAudio();
+      mediaActivationOptions?.onActivate?.(mediaActivationControls);
+      return resume;
+    }, [mediaActivationControls, mediaActivationOptions]);
+    const hasMediaActivationIntent = mediaActivationRevision >= 0 && hasPanoMediaActivationIntent(mediaActivationHost);
+    const shouldShowMediaActivation = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
+    const fallbackViewRef = (0, import_react25.useRef)(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
       Math.max(maxFov, normalizedMinFov + 1)
     );
-    const normalizedInitialView = (0, import_react24.useMemo)(
+    const normalizedInitialView = (0, import_react25.useMemo)(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
         pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
@@ -6825,10 +7039,10 @@ var PanoViewer = (0, import_react24.forwardRef)(
       ]
     );
     fallbackViewRef.current = normalizedInitialView;
-    const controlClaims = (0, import_react24.useMemo)(() => createControlClaims(), []);
+    const controlClaims = (0, import_react25.useMemo)(() => createControlClaims(), []);
     resetControlClaims(controlClaims);
     const controlsEnabled = controls !== false;
-    const controlOptions = (0, import_react24.useMemo)(
+    const controlOptions = (0, import_react25.useMemo)(
       () => typeof controls === "object" ? controls : {},
       [controls]
     );
@@ -6836,7 +7050,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
     const allModeInvert = controlOptions.invert === true;
     const topRotateSpeed = controlOptions.rotateSpeed ?? DEFAULT_POINTER_ROTATE_SPEED;
     const topZoomSpeed = controlOptions.zoomSpeed ?? DEFAULT_MOUSE_ZOOM_SPEED;
-    const mouseChannel = (0, import_react24.useMemo)(
+    const mouseChannel = (0, import_react25.useMemo)(
       () => resolveChannel(controlOptions.mouse, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -6852,7 +7066,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
         topZoomSpeed
       ]
     );
-    const touchChannel = (0, import_react24.useMemo)(
+    const touchChannel = (0, import_react25.useMemo)(
       () => resolveChannel(controlOptions.touch, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -6861,13 +7075,13 @@ var PanoViewer = (0, import_react24.forwardRef)(
       }),
       [allModeInvert, controlOptions.touch, topRotateSpeed]
     );
-    const keyboardChannel = (0, import_react24.useMemo)(
+    const keyboardChannel = (0, import_react25.useMemo)(
       () => resolveChannel(controlOptions.keyboard, {
         enabled: true
       }),
       [controlOptions.keyboard]
     );
-    const enterFullscreen = (0, import_react24.useCallback)(async () => {
+    const enterFullscreen = (0, import_react25.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -6880,7 +7094,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
       }
       await requestElementFullscreen(root);
     }, []);
-    const exitFullscreen = (0, import_react24.useCallback)(async () => {
+    const exitFullscreen = (0, import_react25.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -6889,7 +7103,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
       }
       await exitElementFullscreen();
     }, []);
-    const toggleFullscreen = (0, import_react24.useCallback)(async () => {
+    const toggleFullscreen = (0, import_react25.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -6903,8 +7117,8 @@ var PanoViewer = (0, import_react24.forwardRef)(
       }
       await requestElementFullscreen(root);
     }, []);
-    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react24.useState)(false);
-    (0, import_react24.useEffect)(() => {
+    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react25.useState)(false);
+    (0, import_react25.useEffect)(() => {
       if (typeof document === "undefined") {
         return;
       }
@@ -6922,7 +7136,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
       syncFullscreen();
       return subscribeFullscreenChange(syncFullscreen);
     }, []);
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       const root = rootRef.current;
       if (!root) {
         return;
@@ -6935,7 +7149,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
         root.removeEventListener("contextmenu", suppressNativeContextMenu, true);
       };
     }, []);
-    const contextMenuActions = (0, import_react24.useMemo)(
+    const contextMenuActions = (0, import_react25.useMemo)(
       () => ({
         reset: () => {
           controlsRef.current?.reset();
@@ -6947,24 +7161,24 @@ var PanoViewer = (0, import_react24.forwardRef)(
       }),
       [isViewerFullscreen, toggleFullscreen]
     );
-    const contextMenuChannel = (0, import_react24.useMemo)(
+    const contextMenuChannel = (0, import_react25.useMemo)(
       () => resolveContextMenuChannel(contextMenu),
       [contextMenu]
     );
-    const resolvedCursors = (0, import_react24.useMemo)(
+    const resolvedCursors = (0, import_react25.useMemo)(
       () => resolvePanoCursors(cursors),
       [cursors]
     );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react24.useState)(
+    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react25.useState)(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
-    const isFullscreenRef = (0, import_react24.useRef)(false);
+    const isFullscreenRef = (0, import_react25.useRef)(false);
     isFullscreenRef.current = isViewerFullscreen;
-    (0, import_react24.useImperativeHandle)(
+    (0, import_react25.useImperativeHandle)(
       ref,
       () => ({
         // -- View --
@@ -6975,6 +7189,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
         reset: () => {
           controlsRef.current?.reset();
         },
+        activateMedia,
         // -- Fullscreen --
         enterFullscreen,
         exitFullscreen,
@@ -7027,6 +7242,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
       }),
       [
         bgmHost,
+        activateMedia,
         enterFullscreen,
         exitFullscreen,
         scenesHost,
@@ -7035,7 +7251,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
         webVRHost
       ]
     );
-    const rootStyle = (0, import_react24.useMemo)(
+    const rootStyle = (0, import_react25.useMemo)(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -7043,7 +7259,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
       }),
       [style]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         ...divProps,
@@ -7053,7 +7269,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             import_fiber10.Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
@@ -7075,23 +7291,23 @@ var PanoViewer = (0, import_react24.forwardRef)(
                 ...DEFAULT_CANVAS_STYLE,
                 touchAction: userControlsEnabled ? "none" : "auto"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xr3.XR, { store: xrStore, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_xr3.XR, { store: xrStore, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 WebVRRuntimeContext.Provider,
                 {
                   value: { host: webVRHost, xrStore, stereoView },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoramaXROrigin, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HotspotAccessibilityContext.Provider, { value: registry, 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)(
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoramaXROrigin, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HotspotAccessibilityContext.Provider, { value: registry, 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)(
                       PanoContextMenuOverlayContext.Provider,
                       {
                         value: contextMenuOverlayApi,
-                        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)(
+                        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)(
                           PanoContextMenuActionsContext.Provider,
                           {
                             value: contextMenuActions,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BackgroundAudioHostContext.Provider, { value: bgmHost, children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoVideoHostReset, {}),
-                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            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)(
                                 PanoramaViewRuntime,
                                 {
                                   ref: controlsRef,
@@ -7102,7 +7318,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
                                   options: controlOptions
                                 }
                               ),
-                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                                 PanoEvents,
                                 {
                                   onViewChange,
@@ -7111,18 +7327,18 @@ var PanoViewer = (0, import_react24.forwardRef)(
                                   onPointerMove: onPanoramaPointerMove
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                                 AutoRotate,
                                 {
                                   enabled: legacyAutoRotate,
                                   speed: legacyAutoRotateOptions.autoRotateSpeed
                                 }
                               ),
-                              /* @__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: [
+                              /* @__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: [
                                 children,
-                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                                   DefaultControlChannels,
                                   {
                                     fovSpeed: controlOptions.fovSpeed,
@@ -7133,7 +7349,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
                                   }
                                 )
                               ] })
-                            ] }) })
+                            ] }) }) })
                           }
                         ) }) }) })
                       }
@@ -7143,14 +7359,14 @@ var PanoViewer = (0, import_react24.forwardRef)(
               ) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               className: "pano-chrome-overlay",
               "data-pano-chrome-overlay": "",
               ref: setOverlayNode,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   PanoVideoChromeBridge,
                   {
                     fullscreen: contextMenuActions,
@@ -7158,12 +7374,21 @@ var PanoViewer = (0, import_react24.forwardRef)(
                     overlayElement
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WebVRChromeBridge, { host: webVRHost })
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WebVRChromeBridge, { host: webVRHost })
               ]
             }
           ),
           contextMenuOverlay,
-          hotspotAccessibilityControls
+          hotspotAccessibilityControls,
+          shouldShowMediaActivation ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            PanoMediaActivationOverlay,
+            {
+              ...mediaActivationOptions,
+              onActivate: () => {
+                void activateMedia();
+              }
+            }
+          ) : null
         ]
       }
     );
@@ -7171,102 +7396,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
 );
 
 // src/background-audio.tsx
-var import_react25 = require("react");
-
-// src/audio/howl.ts
-var import_howler = __toESM(require_howler());
-import_howler.Howler.autoUnlock = true;
-function sourceList(src) {
-  if (src == null) {
-    return [];
-  }
-  if (typeof src === "string") {
-    return src ? [src] : [];
-  }
-  return src.filter((item) => Boolean(item));
-}
-function createUnlockingHowl({
-  src,
-  loop,
-  crossOrigin,
-  isActive,
-  shouldRetryPlay,
-  onEnded,
-  onPlay,
-  onPause,
-  onLoadError,
-  onPlayError
-}) {
-  let disposed = false;
-  let blockedNotified = false;
-  const unlockListeners = [];
-  const removeUnlockListeners = () => {
-    for (const { type, listener } of unlockListeners) {
-      window.removeEventListener(type, listener, true);
-    }
-    unlockListeners.length = 0;
-  };
-  const instance = new import_howler.Howl({
-    src: [...src],
-    html5: false,
-    preload: true,
-    loop,
-    xhr: crossOrigin === "use-credentials" ? { withCredentials: true } : void 0,
-    onend: () => {
-      if (disposed || !isActive() || instance.loop()) {
-        return;
-      }
-      onEnded?.();
-    },
-    onplay: () => {
-      if (!disposed && isActive()) {
-        onPlay?.();
-      }
-    },
-    onpause: () => {
-      if (!disposed && isActive()) {
-        onPause?.();
-      }
-    },
-    onloaderror: (_soundId, error) => {
-      if (!disposed && isActive()) {
-        onLoadError?.(error);
-      }
-    },
-    onplayerror: (_soundId, error) => {
-      if (disposed || !isActive()) {
-        return;
-      }
-      if (!blockedNotified) {
-        blockedNotified = true;
-        onPlayError?.(error);
-      }
-      const retry = () => {
-        removeUnlockListeners();
-        if (!disposed && isActive() && shouldRetryPlay()) {
-          void import_howler.Howler.ctx?.resume();
-          instance.play();
-        }
-      };
-      removeUnlockListeners();
-      unlockListeners.push({ type: "pointerdown", listener: retry });
-      unlockListeners.push({ type: "keydown", listener: retry });
-      window.addEventListener("pointerdown", retry, { capture: true });
-      window.addEventListener("keydown", retry, { capture: true });
-    }
-  });
-  return {
-    howl: instance,
-    dispose: () => {
-      if (disposed) {
-        return;
-      }
-      disposed = true;
-      removeUnlockListeners();
-      instance.unload();
-    }
-  };
-}
+var import_react26 = require("react");
 
 // src/hotspot/audio-spatial.ts
 var import_three6 = require("three");
@@ -7354,30 +7484,31 @@ function BackgroundAudio({
   onEnded,
   onError
 }) {
-  const controlsRef = (0, import_react25.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react26.useContext)(PanoramaViewContext);
   if (!controlsRef) {
     throw new Error("<BackgroundAudio> must be rendered inside <PanoViewer>.");
   }
   const isControlled = controlledPlaying !== void 0;
-  const [internalPlaying, setInternalPlaying] = (0, import_react25.useState)(defaultPlaying);
+  const [internalPlaying, setInternalPlaying] = (0, import_react26.useState)(defaultPlaying);
   const playing = isControlled ? controlledPlaying : internalPlaying;
   const urls = resolveBackgroundAudioUrls(src, sources, sceneId);
+  usePanoMediaActivationIntent(playing && urls.length > 0);
   const trackKey = urls.join("\0");
-  const currentRef = (0, import_react25.useRef)(null);
-  const outgoingRef = (0, import_react25.useRef)([]);
-  const fadingInRef = (0, import_react25.useRef)(false);
-  const isFirstTrackRef = (0, import_react25.useRef)(true);
-  const playingRef = (0, import_react25.useRef)(playing);
-  const loopRef = (0, import_react25.useRef)(loop);
-  const mutedRef = (0, import_react25.useRef)(muted);
-  const volumeRef = (0, import_react25.useRef)(volume);
-  const mutedPropRef = (0, import_react25.useRef)(muted);
-  const volumePropRef = (0, import_react25.useRef)(volume);
-  const fadeMsRef = (0, import_react25.useRef)(resolveFadeMs(fadeMs));
-  const onPlaybackStateChangeRef = (0, import_react25.useRef)(onPlaybackStateChange);
-  const onPlaybackErrorRef = (0, import_react25.useRef)(onPlaybackError);
-  const onEndedRef = (0, import_react25.useRef)(onEnded);
-  const onErrorRef = (0, import_react25.useRef)(onError);
+  const currentRef = (0, import_react26.useRef)(null);
+  const outgoingRef = (0, import_react26.useRef)([]);
+  const fadingInRef = (0, import_react26.useRef)(false);
+  const isFirstTrackRef = (0, import_react26.useRef)(true);
+  const playingRef = (0, import_react26.useRef)(playing);
+  const loopRef = (0, import_react26.useRef)(loop);
+  const mutedRef = (0, import_react26.useRef)(muted);
+  const volumeRef = (0, import_react26.useRef)(volume);
+  const mutedPropRef = (0, import_react26.useRef)(muted);
+  const volumePropRef = (0, import_react26.useRef)(volume);
+  const fadeMsRef = (0, import_react26.useRef)(resolveFadeMs(fadeMs));
+  const onPlaybackStateChangeRef = (0, import_react26.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react26.useRef)(onPlaybackError);
+  const onEndedRef = (0, import_react26.useRef)(onEnded);
+  const onErrorRef = (0, import_react26.useRef)(onError);
   playingRef.current = playing;
   loopRef.current = loop;
   fadeMsRef.current = resolveFadeMs(fadeMs);
@@ -7393,7 +7524,7 @@ function BackgroundAudio({
   onPlaybackErrorRef.current = onPlaybackError;
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
-  const snapshotRef = (0, import_react25.useRef)({
+  const snapshotRef = (0, import_react26.useRef)({
     ready: false,
     playing: false,
     blocked: false,
@@ -7401,7 +7532,7 @@ function BackgroundAudio({
     muted,
     volume
   });
-  const snapshotListenersRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  const snapshotListenersRef = (0, import_react26.useRef)(/* @__PURE__ */ new Set());
   const notifySnapshot = (patch) => {
     const prev = snapshotRef.current;
     snapshotRef.current = { ...prev, ...patch };
@@ -7409,9 +7540,9 @@ function BackgroundAudio({
       listener();
     }
   };
-  const isControlledRef = (0, import_react25.useRef)(isControlled);
+  const isControlledRef = (0, import_react26.useRef)(isControlled);
   isControlledRef.current = isControlled;
-  const controller = (0, import_react25.useMemo)(
+  const controller = (0, import_react26.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         snapshotListenersRef.current.add(onStoreChange);
@@ -7422,9 +7553,11 @@ function BackgroundAudio({
       getSnapshot: () => snapshotRef.current,
       play: () => {
         if (isControlledRef.current) {
-          return;
+          return false;
         }
+        currentRef.current?.handle.howl.play();
         setInternalPlaying(true);
+        return true;
       },
       pause: () => {
         if (isControlledRef.current) {
@@ -7467,8 +7600,8 @@ function BackgroundAudio({
     }),
     []
   );
-  const bgmHost = (0, import_react25.useContext)(BackgroundAudioHostContext);
-  (0, import_react25.useEffect)(() => {
+  const bgmHost = (0, import_react26.useContext)(BackgroundAudioHostContext);
+  (0, import_react26.useEffect)(() => {
     if (!bgmHost) {
       return;
     }
@@ -7481,7 +7614,7 @@ function BackgroundAudio({
       }
     };
   }, [bgmHost, controller]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     return () => {
       fadingInRef.current = false;
       isFirstTrackRef.current = true;
@@ -7493,7 +7626,7 @@ function BackgroundAudio({
       outgoingRef.current = [];
     };
   }, []);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const previous = currentRef.current;
     if (previous?.key === trackKey && previous.crossOrigin === crossOrigin) {
       return;
@@ -7596,7 +7729,7 @@ function BackgroundAudio({
       retire(previous);
     }
   }, [crossOrigin, trackKey]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const howl = currentRef.current?.handle.howl;
     if (!howl) {
       return;
@@ -7612,9 +7745,11 @@ function BackgroundAudio({
       outgoingRef.current = [];
       return;
     }
-    howl.play();
+    if (!howl.playing()) {
+      howl.play();
+    }
   }, [playing, trackKey]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const slot = currentRef.current;
     if (!slot) {
       return;
@@ -7629,7 +7764,7 @@ function BackgroundAudio({
       volume: clampAudioVolume(volumeRef.current)
     });
   }, [loop, muted, trackKey, volume]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!pauseWhenHidden) {
       return;
     }
@@ -7655,27 +7790,27 @@ function BackgroundAudio({
 }
 
 // src/pano-filter/pano-filter.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 function PanoFilter({
   preset = "none",
   intensity,
   enabled = true
 }) {
-  const host = (0, import_react26.useContext)(PanoFilterHostContext);
+  const host = (0, import_react27.useContext)(PanoFilterHostContext);
   if (!host) {
     throw new Error("<PanoFilter> must be rendered inside <PanoViewer>.");
   }
-  const snapshot = (0, import_react26.useMemo)(
+  const snapshot = (0, import_react27.useMemo)(
     () => resolvePanoFilterSnapshot({ preset, intensity, enabled }),
     [enabled, intensity, preset]
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     claimPanoFilter(host);
     return () => {
       releasePanoFilter(host);
     };
   }, [host]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setPanoFilterSnapshot(host, snapshot);
   }, [host, snapshot]);
   return null;
@@ -7683,7 +7818,7 @@ function PanoFilter({
 
 // src/gyro.tsx
 var import_fiber11 = require("@react-three/fiber");
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/gyro-orientation.ts
 var import_three7 = require("three");
@@ -7768,7 +7903,7 @@ function resolveSoftstart(value) {
 function posesNearlyEqual(a, b) {
   return Math.abs(shortestYawDelta2(a.yaw, b.yaw)) < 1e-4 && Math.abs(a.pitch - b.pitch) < 1e-4 && Math.abs(a.roll - b.roll) < 1e-4;
 }
-var Gyro = (0, import_react27.forwardRef)(function Gyro2({
+var Gyro = (0, import_react28.forwardRef)(function Gyro2({
   enabled = false,
   camroll = true,
   absolute = false,
@@ -7783,24 +7918,24 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
   onDisable,
   onDenied
 }, ref) {
-  const controlsRef = (0, import_react27.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react27.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react28.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react28.useContext)(PanoEventBusContext);
   const { gl } = (0, import_fiber11.useThree)();
-  const [internallyDisabled, setInternallyDisabled] = (0, import_react27.useState)(false);
-  const availableRef = (0, import_react27.useRef)(false);
-  const availabilityReportedRef = (0, import_react27.useRef)(null);
-  const activeRef = (0, import_react27.useRef)(false);
-  const permissionRef = (0, import_react27.useRef)(deviceOrientationPermissionState);
-  const absoluteEventSourceRef = (0, import_react27.useRef)(null);
-  const rawQuaternionRef = (0, import_react27.useRef)(null);
-  const calibrationRef = (0, import_react27.useRef)(null);
-  const absoluteOffsetRef = (0, import_react27.useRef)({ yaw: 0, pitch: 0 });
-  const screenAngleRef = (0, import_react27.useRef)(getScreenOrientationAngle());
-  const startPoseRef = (0, import_react27.useRef)(null);
-  const enabledAtRef = (0, import_react27.useRef)(0);
-  const filteredPoseRef = (0, import_react27.useRef)(null);
-  const lastAppliedPoseRef = (0, import_react27.useRef)(null);
-  const callbacksRef = (0, import_react27.useRef)({
+  const [internallyDisabled, setInternallyDisabled] = (0, import_react28.useState)(false);
+  const availableRef = (0, import_react28.useRef)(false);
+  const availabilityReportedRef = (0, import_react28.useRef)(null);
+  const activeRef = (0, import_react28.useRef)(false);
+  const permissionRef = (0, import_react28.useRef)(deviceOrientationPermissionState);
+  const absoluteEventSourceRef = (0, import_react28.useRef)(null);
+  const rawQuaternionRef = (0, import_react28.useRef)(null);
+  const calibrationRef = (0, import_react28.useRef)(null);
+  const absoluteOffsetRef = (0, import_react28.useRef)({ yaw: 0, pitch: 0 });
+  const screenAngleRef = (0, import_react28.useRef)(getScreenOrientationAngle());
+  const startPoseRef = (0, import_react28.useRef)(null);
+  const enabledAtRef = (0, import_react28.useRef)(0);
+  const filteredPoseRef = (0, import_react28.useRef)(null);
+  const lastAppliedPoseRef = (0, import_react28.useRef)(null);
+  const callbacksRef = (0, import_react28.useRef)({
     onAvailable,
     onUnavailable,
     onEnable,
@@ -7817,7 +7952,7 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
   if (!controlsRef) {
     throw new Error("<Gyro> must be rendered inside <PanoViewer>.");
   }
-  const emit = (0, import_react27.useCallback)(
+  const emit = (0, import_react28.useCallback)(
     (type) => {
       eventBus?.emit(type, void 0);
       switch (type) {
@@ -7844,7 +7979,7 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
     },
     [eventBus]
   );
-  const setAvailable = (0, import_react27.useCallback)(
+  const setAvailable = (0, import_react28.useCallback)(
     (available) => {
       availableRef.current = available;
       if (availabilityReportedRef.current === available) {
@@ -7855,7 +7990,7 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
     },
     [emit]
   );
-  const requestPermission = (0, import_react27.useCallback)(async () => {
+  const requestPermission = (0, import_react28.useCallback)(async () => {
     if (!availableRef.current) {
       return false;
     }
@@ -7888,7 +8023,7 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
     emit("gyrodenied");
     return false;
   }, [emit, setAvailable]);
-  const deactivate = (0, import_react27.useCallback)(() => {
+  const deactivate = (0, import_react28.useCallback)(() => {
     if (activeRef.current) {
       activeRef.current = false;
       controlsRef.current?.setGyroActive(false);
@@ -7900,7 +8035,7 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
     filteredPoseRef.current = null;
     lastAppliedPoseRef.current = null;
   }, [controlsRef, emit]);
-  const resetSensor = (0, import_react27.useCallback)(
+  const resetSensor = (0, import_react28.useCallback)(
     (yaw, pitch) => {
       const rawQuaternion = rawQuaternionRef.current;
       if (!rawQuaternion) {
@@ -7935,7 +8070,7 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
     },
     [absolute, controlsRef, north]
   );
-  (0, import_react27.useImperativeHandle)(
+  (0, import_react28.useImperativeHandle)(
     ref,
     () => ({
       resetSensor,
@@ -7945,22 +8080,22 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
     }),
     [requestPermission, resetSensor]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!enabled) {
       setInternallyDisabled(false);
     }
   }, [enabled]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const supported = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined" && (desktopSupport || isMobileDevice());
     setAvailable(supported);
     return () => {
       availableRef.current = false;
     };
   }, [desktopSupport, setAvailable]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     controlsRef.current?.setGyroTouchMode(touchMode);
   }, [controlsRef, touchMode]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!enabled || internallyDisabled || touchMode !== "disablegyro") {
       return;
     }
@@ -7974,7 +8109,7 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
       gl.domElement.removeEventListener("pointerdown", onPointerDown);
     };
   }, [enabled, gl, internallyDisabled, touchMode]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!enabled || internallyDisabled || !availableRef.current) {
       deactivate();
       return;
@@ -8136,7 +8271,7 @@ var Gyro = (0, import_react27.forwardRef)(function Gyro2({
 
 // src/webvr/webvr.tsx
 var import_fiber14 = require("@react-three/fiber");
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/webvr/detect.ts
 function isMobileVRDevice() {
@@ -8159,9 +8294,9 @@ async function detectWebVRCapabilities() {
 
 // src/webvr/reticle.tsx
 var import_fiber12 = require("@react-three/fiber");
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_three8 = require("three");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var CENTER_NDC = new import_three8.Vector2(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
@@ -8245,13 +8380,13 @@ function WebVRReticle({
   dwellMs,
   visible
 }) {
-  const groupRef = (0, import_react28.useRef)(null);
-  const ringMeshRef = (0, import_react28.useRef)(null);
-  const directionRef = (0, import_react28.useRef)(new import_three8.Vector3());
-  const raycasterRef = (0, import_react28.useRef)(new import_three8.Raycaster());
-  const hoveredRef = (0, import_react28.useRef)(null);
-  const dwellRef = (0, import_react28.useRef)(0);
-  const clickedRef = (0, import_react28.useRef)(false);
+  const groupRef = (0, import_react29.useRef)(null);
+  const ringMeshRef = (0, import_react29.useRef)(null);
+  const directionRef = (0, import_react29.useRef)(new import_three8.Vector3());
+  const raycasterRef = (0, import_react29.useRef)(new import_three8.Raycaster());
+  const hoveredRef = (0, import_react29.useRef)(null);
+  const dwellRef = (0, import_react29.useRef)(0);
+  const clickedRef = (0, import_react29.useRef)(false);
   const { camera, gl, scene } = (0, import_fiber12.useThree)();
   (0, import_fiber12.useFrame)((_, deltaSeconds) => {
     const group = groupRef.current;
@@ -8321,7 +8456,7 @@ function WebVRReticle({
     group.quaternion.copy(activeCamera.quaternion);
     group.scale.setScalar(RETICLE_SCALE);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "group",
     {
       frustumCulled: false,
@@ -8329,15 +8464,15 @@ function WebVRReticle({
       renderOrder: RETICLE_RENDER_ORDER,
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "mesh",
           {
             frustumCulled: false,
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8350,15 +8485,15 @@ function WebVRReticle({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "mesh",
           {
             frustumCulled: false,
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8371,7 +8506,7 @@ function WebVRReticle({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "mesh",
           {
             frustumCulled: false,
@@ -8380,7 +8515,7 @@ function WebVRReticle({
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "ringGeometry",
                 {
                   args: [
@@ -8393,7 +8528,7 @@ function WebVRReticle({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8414,7 +8549,7 @@ function WebVRReticle({
 
 // src/webvr/stereo.tsx
 var import_fiber13 = require("@react-three/fiber");
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_three9 = require("three");
 var vertexShader = `
 varying vec2 vUv;
@@ -8489,25 +8624,25 @@ function WebVRStereoRenderer({
   screensize
 }) {
   const { camera, gl } = (0, import_fiber13.useThree)();
-  const runtime = (0, import_react29.useContext)(WebVRRuntimeContext);
-  const fallbackStereoRef = (0, import_react29.useRef)(null);
+  const runtime = (0, import_react30.useContext)(WebVRRuntimeContext);
+  const fallbackStereoRef = (0, import_react30.useRef)(null);
   if (!fallbackStereoRef.current) {
     fallbackStereoRef.current = new import_three9.StereoCamera();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
-  const stereoRef = (0, import_react29.useRef)(stereo);
+  const stereoRef = (0, import_react30.useRef)(stereo);
   stereoRef.current = stereo;
-  const resources = (0, import_react29.useMemo)(createDistortionResources, []);
-  const drawingSizeRef = (0, import_react29.useRef)(new import_three9.Vector2());
-  const viewportRef = (0, import_react29.useRef)(new import_three9.Vector4());
-  const scissorRef = (0, import_react29.useRef)(new import_three9.Vector4());
-  const originalFovRef = (0, import_react29.useRef)(null);
-  const stereoActiveRef = (0, import_react29.useRef)(false);
-  const profileRef = (0, import_react29.useRef)(profile);
-  const screensizeRef = (0, import_react29.useRef)(screensize);
+  const resources = (0, import_react30.useMemo)(createDistortionResources, []);
+  const drawingSizeRef = (0, import_react30.useRef)(new import_three9.Vector2());
+  const viewportRef = (0, import_react30.useRef)(new import_three9.Vector4());
+  const scissorRef = (0, import_react30.useRef)(new import_three9.Vector4());
+  const originalFovRef = (0, import_react30.useRef)(null);
+  const stereoActiveRef = (0, import_react30.useRef)(false);
+  const profileRef = (0, import_react30.useRef)(profile);
+  const screensizeRef = (0, import_react30.useRef)(screensize);
   profileRef.current = profile;
   screensizeRef.current = screensize;
-  (0, import_react29.useEffect)(
+  (0, import_react30.useEffect)(
     () => () => {
       resources.geometry.dispose();
       resources.material.dispose();
@@ -8515,7 +8650,7 @@ function WebVRStereoRenderer({
     },
     [resources]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
       if (!stereoActiveRef.current || !(cameraToRender instanceof import_three9.PerspectiveCamera)) {
@@ -8579,7 +8714,7 @@ function WebVRStereoRenderer({
       gl.render = originalRender;
     };
   }, [gl, resources]);
-  (0, import_react29.useEffect)(
+  (0, import_react30.useEffect)(
     () => () => {
       if (runtime) {
         runtime.stereoView.active = false;
@@ -8614,7 +8749,7 @@ function WebVRStereoRenderer({
 }
 
 // src/webvr/pointerlock.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 var POINTER_LOCK_CURSOR_ID = "webvr:pointerlock";
 async function requestWebVRPointerLock(element) {
   if (typeof document === "undefined") {
@@ -8647,11 +8782,11 @@ function exitWebVRPointerLock(element) {
 }
 function useWebVRPointerLock(enabled, element) {
   const cursor = usePanoCursor();
-  const cursorRef = (0, import_react30.useRef)(cursor);
-  const enabledRef = (0, import_react30.useRef)(enabled);
+  const cursorRef = (0, import_react31.useRef)(cursor);
+  const enabledRef = (0, import_react31.useRef)(enabled);
   cursorRef.current = cursor;
   enabledRef.current = enabled;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!enabled || !element) {
       return;
     }
@@ -8681,7 +8816,7 @@ function useWebVRPointerLock(enabled, element) {
 }
 
 // src/webvr/wakelock.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/webvr/wakelock-fallback.ts
 var WEBVR_WAKELOCK_FALLBACK_VIDEO_BASE64 = "AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAbBbW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAAD4AAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAxt0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAAAAAAAAAggAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAABAAAAAQAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAIIAAAEAAABAAAAAAKTbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAyAAAAGgBVxAAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAACPm1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAf5zdGJsAAAAvnN0c2QAAAAAAAAAAQAAAK5hdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAABAAEABIAAAASAAAAAAAAAABFUxhdmM2Mi4xMS4xMDAgbGlieDI2NAAAAAAAAAAAAAAAGP//AAAANGF2Y0MBZAAK/+EAF2dkAAqs2V7ARAAAAwAEAAADAMg8SJZYAQAGaOvjyyLA/fj4AAAAABBwYXNwAAAAAQAAAAEAAAAUYnRydAAAAAAAADQ5AAAAAAAAABhzdHRzAAAAAAAAAAEAAAANAAACAAAAABRzdHNzAAAAAAAAAAEAAAABAAAAeGN0dHMAAAAAAAAADQAAAAEAAAQAAAAAAQAACgAAAAABAAAEAAAAAAEAAAAAAAAAAQAAAgAAAAABAAAKAAAAAAEAAAQAAAAAAQAAAAAAAAABAAACAAAAAAEAAAoAAAAAAQAABAAAAAABAAAAAAAAAAEAAAIAAAAAKHN0c2MAAAAAAAAAAgAAAAEAAAADAAAAAQAAAAUAAAABAAAAAQAAAEhzdHN6AAAAAAAAAAAAAAANAAACxQAAAAwAAAAMAAAADAAAAAwAAAASAAAADgAAAAwAAAAMAAAAEgAAAA4AAAAMAAAADAAAACRzdGNvAAAAAAAAAAUAAAcGAAAJ5wAAChUAAAo/AAAKbwAAAtF0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAACAAAAAAAAD4AAAAAAAAAAAAAAAAEBAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAA+AAAAEAAABAAAAAAJJbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAfQAAAgABVxAAAAAAALWhkbHIAAAAAAAAAAHNvdW4AAAAAAAAAAAAAAABTb3VuZEhhbmRsZXIAAAAB9G1pbmYAAAAQc21oZAAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABuHN0YmwAAAB+c3RzZAAAAAAAAAABAAAAbm1wNGEAAAAAAAAAAQAAAAAAAAAAAAEAEAAAAAAfQAAAAAAANmVzZHMAAAAAA4CAgCUAAgAEgICAF0AVAAAAAAAfQAAAARsFgICABRWIVuUABoCAgAECAAAAFGJ0cnQAAAAAAAAfQAAAARsAAAAYc3R0cwAAAAAAAAABAAAAIAAABAAAAAAoc3RzYwAAAAAAAAACAAAAAQAAAAEAAAABAAAABgAAABsAAAABAAAAlHN0c3oAAAAAAAAAAAAAACAAAAAVAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAChzdGNvAAAAAAAAAAYAAAbxAAAJ4wAAChEAAAo7AAAKawAACnsAAAAac2dwZAEAAAByb2xsAAAAAgAAAAH//wAAABxzYmdwAAAAAHJvbGwAAAABAAAAIAAAAAEAAABhdWR0YQAAAFltZXRhAAAAAAAAACFoZGxyAAAAAAAAAABtZGlyYXBwbAAAAAAAAAAAAAAAACxpbHN0AAAAJKl0b28AAAAcZGF0YQAAAAEAAAAATGF2ZjYyLjMuMTAwAAAACGZyZWUAAAP+bWRhdN4CAExhdmM2Mi4xMS4xMDAAAjBADgAAAq4GBf//qtxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxNjUgcjMyMjIgYjM1NjA1YSAtIEguMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMjUgLSBodHRwOi8vd3d3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0xIHJlZj0zIGRlYmxvY2s9MTowOjAgYW5hbHlzZT0weDM6MHgxMTMgbWU9aGV4IHN1Ym1lPTcgcHN5PTEgcHN5X3JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbGlzPTEgOHg4ZGN0PTEgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV9xcF9vZmZzZXQ9LTIgdGhyZWFkcz0xIGxvb2thaGVhZF90aHJlYWRzPTEgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MyBiX3B5cmFtaWQ9MiBiX2FkYXB0PTEgYl9iaWFzPTAgZGlyZWN0PTEgd2VpZ2h0Yj0xIG9wZW5fZ29wPTAgd2VpZ2h0cD0yIGtleWludD0yNTAga2V5aW50X21pbj0yNSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmNfbG9va2FoZWFkPTQwIHJjPWNyZiBtYnRyZWU9MSBjcmY9MjMuMCBxY29tcD0wLjYwIHFwbWluPTAgcXBtYXg9NjkgcXBzdGVwPTQgaXBfcmF0aW89MS40MCBhcT0xOjEuMDAAgAAAAA9liIQAO//+906/AptUwmEAAAAIQZokbEN//uAAAAAIQZ5CeIX/wYEBGCAHAAAACAGeYXRCv8SAAAAACAGeY2pCv8SBAAAADkGaaEmoQWiZTAhn//7hARggBwAAAApBnoZFESwv/8GBAAAACAGepXRCv8SBAAAACAGep2pCv8SAARggBwAAAA5BmqxJqEFsmUwIV//+wAAAAApBnspFFSwv/8GBAAAACAGe6XRCv8SAARggBwAAAAgBnutqQr/EgAEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBw==";
@@ -8815,7 +8950,7 @@ function releaseWebVRWakeLock() {
   stopFallbackVideo();
 }
 function useWebVRWakeLock(enabled) {
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -8834,7 +8969,7 @@ function useWebVRWakeLock(enabled) {
 }
 
 // src/webvr/webvr.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function initializeSettings(screensize, profile) {
   const stored = loadWebVRSettings();
   return {
@@ -8845,7 +8980,7 @@ function initializeSettings(screensize, profile) {
 function getViewerElement(canvas) {
   return canvas.closest("[data-pano-viewer]") ?? canvas.parentElement ?? canvas;
 }
-var WebVR = (0, import_react32.forwardRef)(function WebVR2({
+var WebVR = (0, import_react33.forwardRef)(function WebVR2({
   chrome = true,
   mobileVr = true,
   desktopSupport = false,
@@ -8863,24 +8998,24 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
   onDenied,
   onUnknownDevice
 }, ref) {
-  const runtime = (0, import_react32.useContext)(WebVRRuntimeContext);
-  const controlsRef = (0, import_react32.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react32.useContext)(PanoEventBusContext);
+  const runtime = (0, import_react33.useContext)(WebVRRuntimeContext);
+  const controlsRef = (0, import_react33.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react33.useContext)(PanoEventBusContext);
   const gl = (0, import_fiber14.useThree)((state) => state.gl);
-  const gyroRef = (0, import_react32.useRef)(null);
-  const capabilitiesRef = (0, import_react32.useRef)({
+  const gyroRef = (0, import_react33.useRef)(null);
+  const capabilitiesRef = (0, import_react33.useRef)({
     mobile: false,
     sensor: false,
     webxr: false
   });
-  const availableRef = (0, import_react32.useRef)(false);
-  const modeRef = (0, import_react32.useRef)(null);
-  const webXRSessionRef = (0, import_react32.useRef)(null);
-  const [mode, setMode] = (0, import_react32.useState)(null);
-  const [settings, setSettings] = (0, import_react32.useState)(
+  const availableRef = (0, import_react33.useRef)(false);
+  const modeRef = (0, import_react33.useRef)(null);
+  const webXRSessionRef = (0, import_react33.useRef)(null);
+  const [mode, setMode] = (0, import_react33.useState)(null);
+  const [settings, setSettings] = (0, import_react33.useState)(
     () => initializeSettings(screensize, profile)
   );
-  const callbacksRef = (0, import_react32.useRef)({
+  const callbacksRef = (0, import_react33.useRef)({
     onAvailable,
     onDenied,
     onEnterVR,
@@ -8900,22 +9035,22 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
     throw new Error("<WebVR> must be rendered inside <PanoViewer>.");
   }
   const { host, xrStore } = runtime;
-  const resolvedProfile = (0, import_react32.useMemo)(
+  const resolvedProfile = (0, import_react33.useMemo)(
     () => resolveWebVRProfile(profile, settings.profileId),
     [profile, settings.profileId]
   );
-  const reportDenied = (0, import_react32.useCallback)(
+  const reportDenied = (0, import_react33.useCallback)(
     (error) => {
       eventBus.emit("vrdenied", { error });
       callbacksRef.current.onDenied?.(error);
     },
     [eventBus]
   );
-  const reportUnknownDevice = (0, import_react32.useCallback)(() => {
+  const reportUnknownDevice = (0, import_react33.useCallback)(() => {
     eventBus.emit("vrunknowndevice", void 0);
     callbacksRef.current.onUnknownDevice?.();
   }, [eventBus]);
-  const activate = (0, import_react32.useCallback)(
+  const activate = (0, import_react33.useCallback)(
     (nextMode) => {
       if (modeRef.current === nextMode) {
         return;
@@ -8930,7 +9065,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
     },
     [controlsRef, eventBus]
   );
-  const deactivate = (0, import_react32.useCallback)(
+  const deactivate = (0, import_react33.useCallback)(
     (expectedMode) => {
       const previousMode = modeRef.current;
       if (!previousMode || expectedMode && previousMode !== expectedMode) {
@@ -8947,10 +9082,10 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
     },
     [controlsRef, eventBus, gl.domElement]
   );
-  const requestPermission = (0, import_react32.useCallback)(async () => {
+  const requestPermission = (0, import_react33.useCallback)(async () => {
     return await gyroRef.current?.requestPermission() ?? false;
   }, []);
-  const enterVR = (0, import_react32.useCallback)(async () => {
+  const enterVR = (0, import_react33.useCallback)(async () => {
     if (modeRef.current) {
       return true;
     }
@@ -9035,7 +9170,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
     wakelock,
     xrStore
   ]);
-  const exitVR = (0, import_react32.useCallback)(async () => {
+  const exitVR = (0, import_react33.useCallback)(async () => {
     if (modeRef.current === "webxr") {
       const session2 = webXRSessionRef.current ?? xrStore.getState().session ?? null;
       if (session2) {
@@ -9050,14 +9185,14 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
       await exitElementFullscreen();
     }
   }, [deactivate, xrStore]);
-  const toggleVR = (0, import_react32.useCallback)(async () => {
+  const toggleVR = (0, import_react33.useCallback)(async () => {
     if (modeRef.current) {
       await exitVR();
       return false;
     }
     return enterVR();
   }, [enterVR, exitVR]);
-  const updateSettings = (0, import_react32.useCallback)((next) => {
+  const updateSettings = (0, import_react33.useCallback)((next) => {
     const normalized = {
       profileId: next.profileId,
       screensize: next.screensize === "auto" ? "auto" : Math.round(Math.max(3, Math.min(20, next.screensize)) * 10) / 10
@@ -9065,7 +9200,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
     setSettings(normalized);
     saveWebVRSettings(normalized);
   }, []);
-  const controller = (0, import_react32.useMemo)(
+  const controller = (0, import_react33.useMemo)(
     () => ({
       closeSetup: () => updateWebVRHost(host, { setupOpen: false }),
       enterVR,
@@ -9077,7 +9212,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
     }),
     [enterVR, exitVR, host, requestPermission, toggleVR, updateSettings]
   );
-  (0, import_react32.useImperativeHandle)(
+  (0, import_react33.useImperativeHandle)(
     ref,
     () => ({
       enterVR,
@@ -9090,7 +9225,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
     }),
     [enterVR, exitVR, requestPermission, toggleVR]
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     let active = true;
     void detectWebVRCapabilities().then((capabilities) => {
       if (!active) {
@@ -9112,7 +9247,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
       active = false;
     };
   }, [desktopSupport, eventBus, fakeSupport, host, mobileVr]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     host.controller = controller;
     return () => {
       if (host.controller === controller) {
@@ -9121,10 +9256,10 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
       }
     };
   }, [controller, host]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     updateWebVRHost(host, { chrome, mode, settings });
   }, [chrome, host, mode, settings]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (mode !== "fake") {
       return;
     }
@@ -9148,7 +9283,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
       document.removeEventListener("mousemove", onMouseMove);
     };
   }, [controlsRef, gl.domElement, mode, mousePointerLock]);
-  (0, import_react32.useEffect)(
+  (0, import_react33.useEffect)(
     () => () => {
       const session2 = webXRSessionRef.current;
       if (session2) {
@@ -9167,8 +9302,8 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
   useWebVRWakeLock(
     wakelock && (mode === "mobilevr" || mode === "fake")
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       Gyro,
       {
         ref: gyroRef,
@@ -9182,7 +9317,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
         touchMode: "off"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       WebVRStereoRenderer,
       {
         mode,
@@ -9190,7 +9325,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
         screensize: settings.screensize
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       WebVRReticle,
       {
         dwellMs: cursorDwellMs,
@@ -9201,7 +9336,7 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
 });
 
 // src/use-pano-viewer.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -9211,6 +9346,7 @@ function createPanoViewerHandle(ref) {
     reset: () => {
       ref.current?.reset();
     },
+    activateMedia: () => ref.current?.activateMedia() ?? Promise.resolve(),
     enterFullscreen: () => ref.current?.enterFullscreen() ?? Promise.resolve(),
     exitFullscreen: () => ref.current?.exitFullscreen() ?? Promise.resolve(),
     toggleFullscreen: () => ref.current?.toggleFullscreen() ?? Promise.resolve(),
@@ -9278,14 +9414,14 @@ function createPanoViewerHandle(ref) {
   };
 }
 function usePanoViewer() {
-  const ref = (0, import_react33.useRef)(null);
-  const handle = (0, import_react33.useMemo)(() => createPanoViewerHandle(ref), []);
-  return (0, import_react33.useMemo)(() => ({ ref, ...handle }), [handle]);
+  const ref = (0, import_react34.useRef)(null);
+  const handle = (0, import_react34.useMemo)(() => createPanoViewerHandle(ref), []);
+  return (0, import_react34.useMemo)(() => ({ ref, ...handle }), [handle]);
 }
 
 // src/sphere.tsx
 var import_fiber15 = require("@react-three/fiber");
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_three10 = require("three");
 
 // src/asset-url.ts
@@ -9310,7 +9446,7 @@ function resolveUrlAgainstFile(fileUrl, path) {
 }
 
 // src/pano-filter/pano-basic-material.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -9461,7 +9597,7 @@ diffuseColor.rgb = mix(diffuseColor.rgb, applyPanoFilter(diffuseColor.rgb), clam
 }
 
 // src/pano-filter/pano-basic-material.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function PanoBasicMaterial({
   map,
   side,
@@ -9470,13 +9606,13 @@ function PanoBasicMaterial({
   toneMapped = false
 }) {
   const snapshot = usePanoFilterSnapshot();
-  const materialRef = (0, import_react34.useRef)(null);
-  const intensityRef = (0, import_react34.useRef)(snapshot.intensity);
-  const intensityUniformRef = (0, import_react34.useRef)(null);
+  const materialRef = (0, import_react35.useRef)(null);
+  const intensityRef = (0, import_react35.useRef)(snapshot.intensity);
+  const intensityUniformRef = (0, import_react35.useRef)(null);
   intensityRef.current = snapshot.intensity;
   const active = isPanoFilterActive(snapshot);
   const preset = snapshot.preset;
-  const onBeforeCompile = (0, import_react34.useMemo)(() => {
+  const onBeforeCompile = (0, import_react35.useMemo)(() => {
     if (!active || preset === "none") {
       return void 0;
     }
@@ -9493,7 +9629,7 @@ function PanoBasicMaterial({
     compile.toString = () => `pano-filter:${preset}`;
     return compile;
   }, [active, preset]);
-  (0, import_react34.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     if (!active) {
       intensityUniformRef.current = null;
     }
@@ -9503,12 +9639,12 @@ function PanoBasicMaterial({
     }
     material.needsUpdate = true;
   }, [active, preset]);
-  (0, import_react34.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     if (intensityUniformRef.current) {
       intensityUniformRef.current.value = snapshot.intensity;
     }
   }, [snapshot.intensity]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "meshBasicMaterial",
     {
       ref: materialRef,
@@ -9524,14 +9660,14 @@ function PanoBasicMaterial({
 }
 
 // src/sphere.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react35.useState)(null);
-  const onLoadRef = (0, import_react35.useRef)(onLoad);
-  const onErrorRef = (0, import_react35.useRef)(onError);
+  const [texture, setTexture] = (0, import_react36.useState)(null);
+  const onLoadRef = (0, import_react36.useRef)(onLoad);
+  const onErrorRef = (0, import_react36.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -9570,7 +9706,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  (0, import_react35.useEffect)(
+  (0, import_react36.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9590,7 +9726,7 @@ function Sphere({
 }) {
   const gl = (0, import_fiber15.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = (0, import_react35.useMemo)(
+  const resolvedPreviewUrl = (0, import_react36.useMemo)(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -9609,11 +9745,11 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = (0, import_react35.useRef)(false);
-  (0, import_react35.useEffect)(() => {
+  const readyRef = (0, import_react36.useRef)(false);
+  (0, import_react36.useEffect)(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -9623,14 +9759,14 @@ function Sphere({
   if (!displayTexture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "mesh",
     {
       rotation: [0, import_three10.MathUtils.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -9645,9 +9781,9 @@ function Sphere({
 
 // src/video/pano-video.tsx
 var import_fiber16 = require("@react-three/fiber");
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_three11 = require("three");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -9732,10 +9868,10 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture(poster, onError) {
   const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react36.useState)(null);
-  const onErrorRef = (0, import_react36.useRef)(onError);
+  const [texture, setTexture] = (0, import_react37.useState)(null);
+  const onErrorRef = (0, import_react37.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -9772,7 +9908,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react36.useEffect)(
+  (0, import_react37.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9829,39 +9965,40 @@ function PanoVideo({
   onVariantChange,
   onTrackChange
 }) {
+  usePanoMediaActivationIntent(autoPlay);
   const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const host = (0, import_react36.useContext)(PanoVideoHostContext);
-  const overlay = (0, import_react36.useContext)(PanoChromeOverlayContext);
-  const variants = (0, import_react36.useMemo)(
+  const host = (0, import_react37.useContext)(PanoVideoHostContext);
+  const overlay = (0, import_react37.useContext)(PanoChromeOverlayContext);
+  const variants = (0, import_react37.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react36.useMemo)(
+  const captionAppearance = (0, import_react37.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react36.useState)(
+  const [variantId, setVariantId] = (0, import_react37.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react36.useState)(
+  const [trackId, setTrackId] = (0, import_react37.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react36.useState)(false);
-  const autoPlayRef = (0, import_react36.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react37.useState)(false);
+  const autoPlayRef = (0, import_react37.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react36.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react36.useRef)(
+  const blockedRef = (0, import_react37.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react37.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react36.useRef)({
+  const mediaCapabilitiesRef = (0, import_react37.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react36.useRef)(null);
+  const storeRef = (0, import_react37.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -9871,7 +10008,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react36.useRef)({
+  const actionsRef = (0, import_react37.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -9891,19 +10028,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = (0, import_react36.useRef)(onLoad);
-  const onErrorRef = (0, import_react36.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react36.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react36.useRef)(onEnded);
-  const onVariantChangeRef = (0, import_react36.useRef)(onVariantChange);
-  const onTrackChangeRef = (0, import_react36.useRef)(onTrackChange);
+  const onLoadRef = (0, import_react37.useRef)(onLoad);
+  const onErrorRef = (0, import_react37.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react37.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react37.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react37.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react37.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react36.useMemo)(() => {
+  const resource = (0, import_react37.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9920,7 +10057,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react36.useEffect)(
+  (0, import_react37.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -9935,13 +10072,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -9964,7 +10101,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react36.useCallback)(
+  const emitSnapshot = (0, import_react37.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -10016,7 +10153,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react36.useMemo)(
+  const controller = (0, import_react37.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -10068,7 +10205,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react37.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -10081,7 +10218,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react37.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10094,10 +10231,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -10154,7 +10291,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10244,7 +10381,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10255,9 +10392,16 @@ function PanoVideo({
       video.volume = clampVolume(volume);
     }
     video.playsInline = playsInline;
+    if (playsInline) {
+      video.setAttribute("playsinline", "true");
+      video.setAttribute("webkit-playsinline", "true");
+    } else {
+      video.removeAttribute("playsinline");
+      video.removeAttribute("webkit-playsinline");
+    }
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10307,7 +10451,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10342,7 +10486,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -10353,15 +10497,15 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "mesh",
       {
         rotation: [0, import_three11.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_runtime17.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -10372,13 +10516,13 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
 // src/scenes.tsx
 var import_fiber21 = require("@react-three/fiber");
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_three19 = require("three");
 
 // src/scene-transitions/presets.ts
@@ -10429,7 +10573,7 @@ function isSnapshotTransition(preset) {
 
 // src/scene-transitions/particle-overlay.tsx
 var import_fiber17 = require("@react-three/fiber");
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_three13 = require("three");
 
 // src/scene-transitions/glsl.ts
@@ -10484,7 +10628,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -10561,12 +10705,12 @@ function ParticleOverlay({
   onFinish
 }) {
   const { camera } = (0, import_fiber17.useThree)();
-  const meshRef = (0, import_react37.useRef)(null);
-  const startRef = (0, import_react37.useRef)(null);
-  const finishedRef = (0, import_react37.useRef)(false);
-  const directionRef = (0, import_react37.useRef)(new import_three13.Vector3());
-  const geometry = (0, import_react37.useMemo)(() => createParticleGeometry(), []);
-  const material = (0, import_react37.useMemo)(
+  const meshRef = (0, import_react38.useRef)(null);
+  const startRef = (0, import_react38.useRef)(null);
+  const finishedRef = (0, import_react38.useRef)(false);
+  const directionRef = (0, import_react38.useRef)(new import_three13.Vector3());
+  const geometry = (0, import_react38.useMemo)(() => createParticleGeometry(), []);
+  const material = (0, import_react38.useMemo)(
     () => new import_three13.ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -10582,9 +10726,9 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  (0, import_react37.useEffect)(() => () => geometry.dispose(), [geometry]);
-  (0, import_react37.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react38.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react38.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -10606,7 +10750,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "mesh",
     {
       ref: meshRef,
@@ -10620,7 +10764,7 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 var import_fiber18 = require("@react-three/fiber");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_three15 = require("three");
 
 // src/scene-transitions/snapshot-shaders.ts
@@ -10900,7 +11044,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -10909,18 +11053,18 @@ function SnapshotOverlay({
   onFinish
 }) {
   const { camera, gl } = (0, import_fiber18.useThree)();
-  const meshRef = (0, import_react38.useRef)(null);
-  const startRef = (0, import_react38.useRef)(null);
-  const finishedRef = (0, import_react38.useRef)(false);
-  const directionRef = (0, import_react38.useRef)(new import_three15.Vector3());
-  const material = (0, import_react38.useMemo)(() => {
+  const meshRef = (0, import_react39.useRef)(null);
+  const startRef = (0, import_react39.useRef)(null);
+  const finishedRef = (0, import_react39.useRef)(false);
+  const directionRef = (0, import_react39.useRef)(new import_three15.Vector3());
+  const material = (0, import_react39.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  (0, import_react38.useEffect)(() => () => material?.dispose(), [material]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => () => material?.dispose(), [material]);
+  (0, import_react39.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
@@ -10949,21 +11093,21 @@ function SnapshotOverlay({
   if (!material) {
     return null;
   }
-  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 })
+  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 })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -10991,7 +11135,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -11002,7 +11146,7 @@ function TransitionOverlay(props) {
 
 // src/tile/texture-manager-context.tsx
 var import_fiber19 = require("@react-three/fiber");
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/tile/texture-manager.ts
 var import_three16 = require("three");
@@ -11226,8 +11370,8 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react39.createContext)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var TileTextureManagerContext = (0, import_react40.createContext)(
   null
 );
 function TileTextureManagerProvider({
@@ -11237,7 +11381,7 @@ function TileTextureManagerProvider({
 }) {
   const gl = (0, import_fiber19.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react39.useMemo)(
+  const manager = (0, import_react40.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11246,19 +11390,19 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return (0, import_react39.useContext)(TileTextureManagerContext);
+  return (0, import_react40.useContext)(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
 var import_fiber20 = require("@react-three/fiber");
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_three18 = require("three");
 
 // src/tile/face-layout.ts
@@ -11438,7 +11582,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = 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;
@@ -11447,10 +11591,10 @@ var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
 var SHARED_TILE_GEOMETRY = new import_three18.PlaneGeometry(1, 1);
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = (0, import_react40.useState)(null);
-  const onErrorRef = (0, import_react40.useRef)(onError);
+  const [texture, setTexture] = (0, import_react41.useState)(null);
+  const onErrorRef = (0, import_react41.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -11487,7 +11631,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react40.useEffect)(
+  (0, import_react41.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -11500,7 +11644,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react40.useMemo)(() => {
+  const geometry = (0, import_react41.useMemo)(() => {
     const nextGeometry = new import_three18.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -11518,21 +11662,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  (0, import_react40.useEffect)(
+  (0, import_react41.useEffect)(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11548,7 +11692,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     PreviewFace,
     {
       face,
@@ -11559,14 +11703,14 @@ function PreviewCube({
   ));
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react40.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react41.useState)(() => ({
     manager,
     key,
     url,
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  (0, import_react40.useEffect)(
+  (0, import_react41.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -11579,7 +11723,7 @@ function useManagedTexture(manager, key, url, address) {
   );
   return snapshot;
 }
-var TileMesh = (0, import_react40.memo)(function TileMesh2({
+var TileMesh = (0, import_react41.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -11593,14 +11737,14 @@ var TileMesh = (0, import_react40.memo)(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11612,12 +11756,12 @@ var TileMesh = (0, import_react40.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react40.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react41.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     TileMesh,
     {
       address,
@@ -11786,10 +11930,10 @@ function Tile({
   onLevelChange
 }) {
   const { camera, gl, size } = (0, import_fiber20.useThree)();
-  const multiresConfig = (0, import_react40.useMemo)(() => parseMultires(multires), [multires]);
+  const multiresConfig = (0, import_react41.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react40.useMemo)(
+  const candidatesByLevel = (0, import_react41.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -11801,13 +11945,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react40.useRef)(onLoadProgress);
-  const errorRef = (0, import_react40.useRef)(onTileError);
-  const levelChangeRef = (0, import_react40.useRef)(onLevelChange);
+  const progressRef = (0, import_react41.useRef)(onLoadProgress);
+  const errorRef = (0, import_react41.useRef)(onTileError);
+  const levelChangeRef = (0, import_react41.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react40.useMemo)(
+  const ownedManager = (0, import_react41.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11828,7 +11972,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -11838,11 +11982,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react40.useRef)(false);
-  (0, import_react40.useEffect)(() => {
+  const readyRef = (0, import_react41.useRef)(false);
+  (0, import_react41.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -11850,31 +11994,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react40.useMemo)(
+  const resolveUrl = (0, import_react41.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = (0, import_react40.useState)([]);
-  const layerTokenRef = (0, import_react40.useRef)("");
-  const currentLevelRef = (0, import_react40.useRef)(1);
-  const lastUpdateAtRef = (0, import_react40.useRef)(-Infinity);
-  const visibilityDirtyRef = (0, import_react40.useRef)(true);
-  const lastVisibilityQuaternionRef = (0, import_react40.useRef)(camera.quaternion.clone());
-  const lastVisibilityFovRef = (0, import_react40.useRef)(Number.NaN);
-  const lastViewportRef = (0, import_react40.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react40.useRef)(new import_three18.Frustum());
-  const projectionMatrixRef = (0, import_react40.useRef)(new import_three18.Matrix4());
-  const visibilityCameraRef = (0, import_react40.useRef)(new import_three18.PerspectiveCamera());
-  (0, import_react40.useEffect)(() => {
+  const [layers, setLayers] = (0, import_react41.useState)([]);
+  const layerTokenRef = (0, import_react41.useRef)("");
+  const currentLevelRef = (0, import_react41.useRef)(1);
+  const lastUpdateAtRef = (0, import_react41.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react41.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react41.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react41.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react41.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react41.useRef)(new import_three18.Frustum());
+  const projectionMatrixRef = (0, import_react41.useRef)(new import_three18.Matrix4());
+  const visibilityCameraRef = (0, import_react41.useRef)(new import_three18.PerspectiveCamera());
+  (0, import_react41.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -11954,15 +12098,15 @@ function Tile({
     };
     commitLayers(nextLayers);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       TileLayerMeshes,
       {
         layer,
@@ -11975,7 +12119,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function SceneSource({
   scene,
   visible,
@@ -11988,7 +12132,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         Sphere,
         {
           src: scene.src,
@@ -12001,7 +12145,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         Tile,
         {
           ...tileProps,
@@ -12025,9 +12169,9 @@ function SnapshotCapture({
   onCaptured
 }) {
   const { camera, gl, scene, size } = (0, import_fiber21.useThree)();
-  const capturedRequestRef = (0, import_react41.useRef)(0);
-  const renderTargetRef = (0, import_react41.useRef)(null);
-  (0, import_react41.useEffect)(
+  const capturedRequestRef = (0, import_react42.useRef)(0);
+  const renderTargetRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
@@ -12083,50 +12227,50 @@ function ScenesController({
   snapshotMaxPixels = 3686400,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = (0, import_react41.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react42.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react41.useMemo)(
+  const transition = (0, import_react42.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react41.useMemo)(
+  const sceneMap = (0, import_react42.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react41.useState)([
+  const [slots, setSlots] = (0, import_react42.useState)([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = (0, import_react41.useState)(0);
-  const [liveSlot, setLiveSlot] = (0, import_react41.useState)(0);
-  const [pendingSlot, setPendingSlot] = (0, import_react41.useState)(null);
-  const [phase, setPhase] = (0, import_react41.useState)(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = (0, import_react41.useState)(0);
-  const [transitionRunId, setTransitionRunId] = (0, import_react41.useState)(0);
-  const [snapshot, setSnapshot] = (0, import_react41.useState)(null);
-  const [recoveryKey, setRecoveryKey] = (0, import_react41.useState)(0);
-  const requestedSceneIdRef = (0, import_react41.useRef)(activeSceneId);
-  const captureReasonRef = (0, import_react41.useRef)("start");
-  const interactionReleaseRef = (0, import_react41.useRef)(null);
-  const slotsRef = (0, import_react41.useRef)(slots);
-  const phaseRef = (0, import_react41.useRef)(phase);
-  const liveSlotRef = (0, import_react41.useRef)(liveSlot);
-  const transitionFromRef = (0, import_react41.useRef)(initialScene);
+  const [activeSlot, setActiveSlot] = (0, import_react42.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react42.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react42.useState)(null);
+  const [phase, setPhase] = (0, import_react42.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react42.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react42.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react42.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react42.useState)(0);
+  const requestedSceneIdRef = (0, import_react42.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react42.useRef)("start");
+  const interactionReleaseRef = (0, import_react42.useRef)(null);
+  const slotsRef = (0, import_react42.useRef)(slots);
+  const phaseRef = (0, import_react42.useRef)(phase);
+  const liveSlotRef = (0, import_react42.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react42.useRef)(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = (0, import_react41.useCallback)(() => {
+  const releaseInteraction = (0, import_react42.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react41.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react42.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = (0, import_react41.useCallback)((scene) => {
+  const startPreload = (0, import_react42.useCallback)((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -12137,7 +12281,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -12161,7 +12305,7 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = (0, import_react41.useCallback)((slot) => {
+  const handleReady = (0, import_react42.useCallback)((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -12192,7 +12336,7 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = (0, import_react41.useCallback)((nextSnapshot) => {
+  const handleCaptured = (0, import_react42.useCallback)((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -12214,7 +12358,7 @@ function ScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = (0, import_react41.useCallback)(() => {
+  const finishTransition = (0, import_react42.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -12239,12 +12383,12 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  (0, import_react41.useEffect)(() => () => {
+  (0, import_react42.useEffect)(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
   const { gl } = (0, import_fiber21.useThree)();
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -12268,8 +12412,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_runtime22.jsxs)(import_react41.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -12281,7 +12425,7 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         SceneSource,
         {
           scene: source,
@@ -12297,7 +12441,7 @@ function ScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       TransitionOverlay,
       {
         snapshot,
@@ -12320,11 +12464,11 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = (0, import_react41.useState)(
+  const [internalId, setInternalId] = (0, import_react42.useState)(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
-  const requestSceneChange = (0, import_react41.useCallback)(
+  const requestSceneChange = (0, import_react42.useCallback)(
     (id) => {
       if (isControlled) {
         onActiveSceneIdChange?.(id);
@@ -12334,13 +12478,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = (0, import_react41.useRef)(scenes);
+  const scenesRef = (0, import_react42.useRef)(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = (0, import_react41.useRef)(resolvedId);
+  const resolvedIdRef = (0, import_react42.useRef)(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = (0, import_react41.useContext)(ScenesHostContext);
-  const phaseRef = (0, import_react41.useRef)("idle");
-  (0, import_react41.useEffect)(() => {
+  const host = (0, import_react42.useContext)(ScenesHostContext);
+  const phaseRef = (0, import_react42.useRef)("idle");
+  (0, import_react42.useEffect)(() => {
     if (!host) {
       return;
     }
@@ -12390,12 +12534,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         ScenesController,
         {
           ...rest,
@@ -12410,25 +12554,25 @@ function Scenes({
 
 // src/hotspot/image-hotspot.tsx
 var import_fiber23 = require("@react-three/fiber");
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_three22 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
 var import_fiber22 = require("@react-three/fiber");
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_three20 = require("three");
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/webvr/stereo-html.tsx
 var import_drei = require("@react-three/drei");
-var import_react42 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function useFallbackStereoView() {
-  const runtime = (0, import_react42.useContext)(WebVRRuntimeContext);
+  const runtime = (0, import_react43.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = (0, import_react42.useSyncExternalStore)(
+  const fallback = (0, import_react43.useSyncExternalStore)(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -12449,10 +12593,10 @@ function stereoCalculatePosition(eye, stereoView) {
 function PanoHtml({ children, ...htmlProps }) {
   const stereoView = useFallbackStereoView();
   if (!stereoView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drei.Html, { ...htmlProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_drei.Html, { ...htmlProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_drei.Html,
       {
         ...htmlProps,
@@ -12460,7 +12604,7 @@ function PanoHtml({ children, ...htmlProps }) {
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_drei.Html,
       {
         ...htmlProps,
@@ -12473,7 +12617,7 @@ function PanoHtml({ children, ...htmlProps }) {
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -12542,16 +12686,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react43.useState)(false);
-  (0, import_react43.useEffect)(() => {
+  const [imageFailed, setImageFailed] = (0, import_react44.useState)(false);
+  (0, import_react44.useEffect)(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = (0, import_react43.useMemo)(
+  const resolvedAppearance = (0, import_react44.useMemo)(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = (0, import_react43.useMemo)(
+  const bubbleStyle = (0, import_react44.useMemo)(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -12570,14 +12714,14 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: "pano-hotspot-tooltip",
       role: "tooltip",
       style: bubbleStyle,
       children: [
-        showImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        showImage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "img",
           {
             alt: content.imageAlt ?? content.text ?? "",
@@ -12586,14 +12730,14 @@ function HotspotTooltip({
             src: content.image
           }
         ) : null,
-        content.text ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
+        content.text ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
       ]
     }
   ) });
 }
 
 // src/hotspot/hotspot-anchor.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -12930,18 +13074,18 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react44.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react44.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react45.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react45.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
   const { camera, size } = (0, import_fiber22.useThree)();
-  const groupRef = (0, import_react44.useRef)(null);
-  const tooltipAnchorRef = (0, import_react44.useRef)(null);
-  const dragStateRef = (0, import_react44.useRef)(null);
-  const suppressNextClickRef = (0, import_react44.useRef)(false);
-  const [hovered, setHovered] = (0, import_react44.useState)(false);
-  const [dragging, setDragging] = (0, import_react44.useState)(false);
-  const [pinned, setPinned] = (0, import_react44.useState)(false);
-  const tooltipContent = (0, import_react44.useMemo)(
+  const groupRef = (0, import_react45.useRef)(null);
+  const tooltipAnchorRef = (0, import_react45.useRef)(null);
+  const dragStateRef = (0, import_react45.useRef)(null);
+  const suppressNextClickRef = (0, import_react45.useRef)(false);
+  const [hovered, setHovered] = (0, import_react45.useState)(false);
+  const [dragging, setDragging] = (0, import_react45.useState)(false);
+  const [pinned, setPinned] = (0, import_react45.useState)(false);
+  const tooltipContent = (0, import_react45.useMemo)(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
@@ -12957,17 +13101,17 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = (0, import_react44.useMemo)(
+  const worldPosition = (0, import_react45.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react44.useMemo)(
+  const surfaceQuaternion3 = (0, import_react45.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = (0, import_react44.useMemo)(() => {
+  const focusGeometry = (0, import_react45.useMemo)(() => {
     const planeGeometry = new import_three20.PlaneGeometry(1, 1);
     const geometry = new import_three20.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -12994,14 +13138,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  (0, import_react44.useEffect)(
+  (0, import_react45.useEffect)(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!cursorApi) {
       return;
     }
@@ -13023,14 +13167,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  (0, import_react44.useEffect)(
+  (0, import_react45.useEffect)(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  (0, import_react44.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_react45.useEffect)(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -13039,12 +13183,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (acceptsPointer) {
       return;
     }
@@ -13057,7 +13201,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  (0, import_react44.useLayoutEffect)(() => {
+  (0, import_react45.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -13156,7 +13300,7 @@ function HotspotAnchor({
       setHovered(true);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "group",
     {
       ref: groupRef,
@@ -13233,18 +13377,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -13260,7 +13404,7 @@ function HotspotAnchor({
 
 // src/hotspot/hotspot-plane.tsx
 var import_three21 = require("three");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new import_three21.Vector2();
 var RAYCAST_HITS = [];
@@ -13362,9 +13506,9 @@ function HotspotPlane({
   map,
   opacity
 }) {
-  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)(
+  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)(
       "meshBasicMaterial",
       {
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
@@ -13380,15 +13524,15 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = (0, import_fiber23.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react45.useState)(null);
-  const onLoadRef = (0, import_react45.useRef)(onLoad);
-  const onErrorRef = (0, import_react45.useRef)(onError);
+  const [texture, setTexture] = (0, import_react46.useState)(null);
+  const onLoadRef = (0, import_react46.useRef)(onLoad);
+  const onErrorRef = (0, import_react46.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13426,7 +13570,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react45.useEffect)(
+  (0, import_react46.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -13444,19 +13588,19 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_three24 = require("three");
 
 // src/hotspot/hotspot-stroke-line.tsx
 var import_drei2 = require("@react-three/drei");
 var import_fiber24 = require("@react-three/fiber");
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_three23 = require("three");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var LINE_WORLD_POSITION = new import_three23.Vector3();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
@@ -13487,10 +13631,10 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = (0, import_react46.useRef)(null);
+  const lineRef = (0, import_react47.useRef)(null);
   const { camera, size } = (0, import_fiber24.useThree)();
   const dash = resolveDash(dashSize, gapSize);
-  (0, import_react46.useLayoutEffect)(() => {
+  (0, import_react47.useLayoutEffect)(() => {
     if (!dash.dashed) {
       return;
     }
@@ -13502,7 +13646,7 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_drei2.Line,
     {
       ref: lineRef,
@@ -13524,7 +13668,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -13780,24 +13924,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react47.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = (0, import_react48.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react47.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react47.useMemo)(
+  const center = (0, import_react48.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react48.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = (0, import_react47.useMemo)(
+  const strokePoints = (0, import_react48.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react47.useRef)(null);
+  const startVerticesRef = (0, import_react48.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react47.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react48.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -13812,7 +13956,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -13827,7 +13971,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -13849,7 +13993,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "meshBasicMaterial",
           {
             color: fill,
@@ -13859,7 +14003,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -13877,9 +14021,9 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_three25 = require("three");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -13996,16 +14140,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react48.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = (0, import_react49.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react48.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = (0, import_react48.useMemo)(
+  const center = (0, import_react49.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = (0, import_react49.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react48.useRef)(null);
-  (0, import_react48.useEffect)(() => {
+  const startVerticesRef = (0, import_react49.useRef)(null);
+  (0, import_react49.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -14019,7 +14163,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14033,7 +14177,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14054,7 +14198,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14071,9 +14215,9 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_three26 = require("three");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -14262,12 +14406,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react49.useState)(null);
-  const onLoadRef = (0, import_react49.useRef)(onLoad);
-  const onErrorRef = (0, import_react49.useRef)(onError);
+  const [texture, setTexture] = (0, import_react50.useState)(null);
+  const onLoadRef = (0, import_react50.useRef)(onLoad);
+  const onErrorRef = (0, import_react50.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -14293,22 +14437,22 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
 var import_fiber25 = require("@react-three/fiber");
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_three27 = require("three");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -14323,12 +14467,12 @@ function useSpriteTexture({
   onLoadProgress
 }) {
   const gl = (0, import_fiber25.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react50.useState)(null);
-  const onErrorRef = (0, import_react50.useRef)(onError);
-  const onLoadProgressRef = (0, import_react50.useRef)(onLoadProgress);
+  const [texture, setTexture] = (0, import_react51.useState)(null);
+  const onErrorRef = (0, import_react51.useRef)(onError);
+  const onLoadProgressRef = (0, import_react51.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14369,7 +14513,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react50.useEffect)(
+  (0, import_react51.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14398,24 +14542,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = (0, import_react50.useState)(0);
-  const elapsedRef = (0, import_react50.useRef)(0);
-  const frameIndexRef = (0, import_react50.useRef)(0);
-  const endedRef = (0, import_react50.useRef)(false);
-  const lastPlaybackStateRef = (0, import_react50.useRef)(null);
-  const onFrameChangeRef = (0, import_react50.useRef)(onFrameChange);
-  const onPlaybackStateChangeRef = (0, import_react50.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react50.useRef)(onEnded);
+  const [frameIndex, setFrameIndex] = (0, import_react51.useState)(0);
+  const elapsedRef = (0, import_react51.useRef)(0);
+  const frameIndexRef = (0, import_react51.useRef)(0);
+  const endedRef = (0, import_react51.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react51.useRef)(null);
+  const onFrameChangeRef = (0, import_react51.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react51.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react51.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14429,13 +14573,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14484,14 +14628,14 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
 var import_fiber26 = require("@react-three/fiber");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_three28 = require("three");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -14500,10 +14644,10 @@ function clampVolume2(volume) {
 }
 function usePosterTexture2(id, poster, onError) {
   const gl = (0, import_fiber26.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react51.useState)(null);
-  const onErrorRef = (0, import_react51.useRef)(onError);
+  const [texture, setTexture] = (0, import_react52.useState)(null);
+  const onErrorRef = (0, import_react52.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -14540,7 +14684,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react51.useEffect)(
+  (0, import_react52.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14558,14 +14702,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = (0, import_react51.useState)(null);
-  const onEndedRef = (0, import_react51.useRef)(onEnded);
-  const onErrorRef = (0, import_react51.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react51.useRef)(onPlaybackStateChange);
+  const [resource, setResource] = (0, import_react52.useState)(null);
+  const onEndedRef = (0, import_react52.useRef)(onEnded);
+  const onErrorRef = (0, import_react52.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react52.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -14575,7 +14719,12 @@ function useVideoResource({
     if (crossOrigin !== void 0) {
       video.crossOrigin = crossOrigin;
     }
-    video.playsInline = playsInline ?? true;
+    const inline = playsInline ?? true;
+    video.playsInline = inline;
+    if (inline) {
+      video.setAttribute("playsinline", "true");
+      video.setAttribute("webkit-playsinline", "true");
+    }
     video.poster = poster ?? "";
     const texture = new import_three28.VideoTexture(video);
     texture.colorSpace = import_three28.SRGBColorSpace;
@@ -14655,6 +14804,7 @@ function VideoHotspot({
   onError,
   ...anchorProps
 }) {
+  usePanoMediaActivationIntent(playing);
   const resource = useVideoResource({
     crossOrigin,
     id,
@@ -14666,11 +14816,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react51.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react51.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react52.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react52.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14678,9 +14828,16 @@ function VideoHotspot({
     resource.video.muted = muted;
     resource.video.volume = clampVolume2(volume);
     resource.video.playsInline = playsInline;
+    if (playsInline) {
+      resource.video.setAttribute("playsinline", "true");
+      resource.video.setAttribute("webkit-playsinline", "true");
+    } else {
+      resource.video.removeAttribute("playsinline");
+      resource.video.removeAttribute("webkit-playsinline");
+    }
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14703,14 +14860,14 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
 var import_fiber27 = require("@react-three/fiber");
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_three29 = require("three");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -14774,8 +14931,8 @@ function createSpeakerTexture(state) {
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = (0, import_react52.useState)({ playing: null, stopped: null });
-  (0, import_react52.useEffect)(() => {
+  const [textures, setTextures] = (0, import_react53.useState)({ playing: null, stopped: null });
+  (0, import_react53.useEffect)(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -14792,10 +14949,10 @@ function useSpeakerTextures(enabled) {
 }
 function useIconTexture(icon, enabled, onError, id) {
   const gl = (0, import_fiber27.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react52.useState)(null);
-  const onErrorRef = (0, import_react52.useRef)(onError);
+  const [texture, setTexture] = (0, import_react53.useState)(null);
+  const onErrorRef = (0, import_react53.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -14832,7 +14989,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  (0, import_react52.useEffect)(
+  (0, import_react53.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14851,13 +15008,13 @@ function useAudioHowl({
   playing,
   src
 }) {
-  const [howl, setHowl] = (0, import_react52.useState)(null);
-  const playingRef = (0, import_react52.useRef)(playing);
-  const loopRef = (0, import_react52.useRef)(loop ?? false);
-  const onEndedRef = (0, import_react52.useRef)(onEnded);
-  const onErrorRef = (0, import_react52.useRef)(onError);
-  const onPlaybackErrorRef = (0, import_react52.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react52.useRef)(onPlaybackStateChange);
+  const [howl, setHowl] = (0, import_react53.useState)(null);
+  const playingRef = (0, import_react53.useRef)(playing);
+  const loopRef = (0, import_react53.useRef)(loop ?? false);
+  const onEndedRef = (0, import_react53.useRef)(onEnded);
+  const onErrorRef = (0, import_react53.useRef)(onError);
+  const onPlaybackErrorRef = (0, import_react53.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react53.useRef)(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -14865,7 +15022,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -14902,7 +15059,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -14929,6 +15086,7 @@ function AudioHotspot({
   onError,
   ...anchorProps
 }) {
+  usePanoMediaActivationIntent(playing);
   const camera = (0, import_fiber27.useThree)((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
@@ -14945,15 +15103,15 @@ function AudioHotspot({
   const stoppedIconTexture = useIconTexture(icon, marker, onError, id);
   const playingIconTexture = useIconTexture(playingIcon, marker, onError, id);
   const markerTexture = playing ? playingIconTexture ?? stoppedIconTexture ?? speakerTextures.playing : stoppedIconTexture ?? speakerTextures.stopped;
-  const playingRef = (0, import_react52.useRef)(playing);
+  const playingRef = (0, import_react53.useRef)(playing);
   playingRef.current = playing;
-  const mutedRef = (0, import_react52.useRef)(muted);
-  const volumeRef = (0, import_react52.useRef)(volume);
-  const rangeRef = (0, import_react52.useRef)(range);
+  const mutedRef = (0, import_react53.useRef)(muted);
+  const volumeRef = (0, import_react53.useRef)(volume);
+  const rangeRef = (0, import_react53.useRef)(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!howl) {
       return;
     }
@@ -14963,7 +15121,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -14994,13 +15152,13 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  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 });
+  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 });
 }
 
 // src/hotspot/text-hotspot.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_three30 = require("three");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -15220,12 +15378,12 @@ function createTextTexture(text, width, height, style) {
   return texture;
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react53.useState)(null);
-  const onLoadRef = (0, import_react53.useRef)(onLoad);
-  const onErrorRef = (0, import_react53.useRef)(onError);
+  const [texture, setTexture] = (0, import_react54.useState)(null);
+  const onLoadRef = (0, import_react54.useRef)(onLoad);
+  const onErrorRef = (0, import_react54.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -15318,13 +15476,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -15381,7 +15539,7 @@ function IframeHotspot({
     interactive,
     pointerEvents
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -15390,9 +15548,9 @@ function IframeHotspot({
       pointerEvents,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("mesh", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("mesh", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -15403,7 +15561,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           import_drei3.Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -15418,7 +15576,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "iframe",
               {
                 allow,