@ericchen1990/pano-view 2.5.0 → 3.0.0

package/dist/index.mjs

@@ -2244,12 +2244,13 @@ import { createXRStore, XR } from "@react-three/xr";
 import {
   forwardRef as forwardRef2,
   useCallback as useCallback6,
-  useContext as useContext14,
-  useEffect as useEffect12,
+  useContext as useContext15,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo7,
-  useRef as useRef12,
-  useState as useState5
+  useRef as useRef13,
+  useState as useState5,
+  useSyncExternalStore as useSyncExternalStore6
 } from "react";
 
 // src/background-audio-host.ts
@@ -2274,12 +2275,127 @@ function subscribeBackgroundAudioHost(host, listener) {
     host.listeners.delete(listener);
   };
 }
+function subscribeBackgroundAudioStore(host, onStoreChange) {
+  let unsubscribeController = host.controller?.subscribe(onStoreChange) ?? (() => {
+  });
+  const unsubscribeHost = subscribeBackgroundAudioHost(host, () => {
+    unsubscribeController();
+    unsubscribeController = host.controller?.subscribe(onStoreChange) ?? (() => {
+    });
+    onStoreChange();
+  });
+  return () => {
+    unsubscribeController();
+    unsubscribeHost();
+  };
+}
 
 // src/cn.ts
 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
 import { useFrame as useFrame2 } from "@react-three/fiber";
 import { useContext, useEffect as useEffect2, useRef as useRef2 } from "react";
@@ -3525,23 +3641,85 @@ function isProduction2() {
   return nodeEnv === "production";
 }
 
+// src/media-activation.tsx
+import { createContext as createContext7, useContext as useContext7, useEffect as useEffect6, useRef as useRef6 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PanoMediaActivationHostContext = createContext7(null);
+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 = useContext7(PanoMediaActivationHostContext);
+  const keyRef = useRef6(null);
+  if (keyRef.current === null) {
+    keyRef.current = /* @__PURE__ */ Symbol("pano-media-intent");
+  }
+  useEffect6(() => {
+    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__ */ jsx2("div", { className: cn("pano-media-activation", className), children: /* @__PURE__ */ jsx2(
+    "button",
+    {
+      "aria-label": ariaLabel,
+      className: "pano-media-activation-button",
+      onClick: onActivate,
+      type: "button",
+      children: message
+    }
+  ) });
+}
+
 // src/pano-context-menu.tsx
 import {
-  createContext as createContext7,
+  createContext as createContext8,
   useCallback as useCallback2,
-  useContext as useContext7,
-  useEffect as useEffect6,
+  useContext as useContext8,
+  useEffect as useEffect7,
   useId,
   useLayoutEffect,
   useMemo as useMemo3,
-  useRef as useRef6,
+  useRef as useRef7,
   useState as useState2
 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
-var PanoContextMenuOverlayContext = createContext7(null);
+var PanoContextMenuOverlayContext = createContext8(null);
 var DEFAULT_APPEARANCE = {
   background: "#161616",
   color: "#f4f4f4",
@@ -3581,7 +3759,7 @@ function DefaultContextMenuPanel({
   selectContext,
   onRequestClose
 }) {
-  const menuRef = useRef6(null);
+  const menuRef = useRef7(null);
   const [activeIndex, setActiveIndex] = useState2(0);
   const resolved = { ...DEFAULT_APPEARANCE, ...appearance };
   const iconSize = Number.isFinite(resolved.iconSize) ? Math.max(0, resolved.iconSize) : DEFAULT_ICON_SIZE;
@@ -3603,7 +3781,7 @@ function DefaultContextMenuPanel({
     });
     return indices;
   }, [visibleItems]);
-  useEffect6(() => {
+  useEffect7(() => {
     const first = focusableIndices[0];
     setActiveIndex(first ?? 0);
     const frame = requestAnimationFrame(() => {
@@ -3711,7 +3889,7 @@ function DefaultContextMenuPanel({
       style: panelStyle,
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "div",
           {
             "aria-hidden": true,
@@ -3723,9 +3901,9 @@ function DefaultContextMenuPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsx2("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
+        /* @__PURE__ */ jsx3("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
           if (!isActionItem(item)) {
-            return /* @__PURE__ */ jsx2(
+            return /* @__PURE__ */ jsx3(
               "div",
               {
                 "aria-hidden": true,
@@ -3742,7 +3920,7 @@ function DefaultContextMenuPanel({
             );
           }
           const disabled = item.disabled === true;
-          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ jsx2(
+          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ jsx3(
             "img",
             {
               alt: item.imageAlt ?? "",
@@ -3792,7 +3970,7 @@ function DefaultContextMenuPanel({
               tabIndex: disabled ? -1 : activeIndex === index ? 0 : -1,
               type: "button",
               children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "span",
                   {
                     "aria-hidden": true,
@@ -3804,7 +3982,7 @@ function DefaultContextMenuPanel({
                     children: iconNode
                   }
                 ),
-                /* @__PURE__ */ jsx2("span", { style: { flex: 1 }, children: item.label })
+                /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: item.label })
               ]
             },
             item.id
@@ -3820,8 +3998,21 @@ function PositionedMenuShell({
   overlayElement,
   children
 }) {
-  const shellRef = useRef6(null);
+  const shellRef = useRef7(null);
   const [offset, setOffset] = useState2({ left: 0, top: 0 });
+  const [viewportRevision, setViewportRevision] = useState2(0);
+  useEffect7(() => {
+    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);
+    };
+  }, []);
   useLayoutEffect(() => {
     const shell = shellRef.current;
     if (!overlayElement || !shell) {
@@ -3843,8 +4034,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__ */ jsx2(
+  }, [clientX, clientY, overlayElement, children, viewportRevision]);
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className: "pano-context-menu-shell",
@@ -3859,7 +4050,7 @@ function PositionedMenuShell({
 }
 function usePanoContextMenuOverlay() {
   const [session2, setSession] = useState2(null);
-  const overlayRef = useRef6(null);
+  const overlayRef = useRef7(null);
   const [overlayElement, setOverlayElement] = useState2(
     null
   );
@@ -3871,7 +4062,7 @@ function usePanoContextMenuOverlay() {
     overlayRef.current = node;
     setOverlayElement(node);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!session2) {
       return;
     }
@@ -3903,7 +4094,7 @@ function usePanoContextMenuOverlay() {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [session2]);
-  const overlay = /* @__PURE__ */ jsx2(
+  const overlay = /* @__PURE__ */ jsx3(
     "div",
     {
       ref: setOverlayNode,
@@ -3914,7 +4105,7 @@ function usePanoContextMenuOverlay() {
         position: "absolute",
         zIndex: 20
       },
-      children: session2 ? /* @__PURE__ */ jsx2(
+      children: session2 ? /* @__PURE__ */ jsx3(
         PositionedMenuShell,
         {
           clientX: session2.event.clientX,
@@ -3939,13 +4130,13 @@ function PanoContextMenu({
   separatorClassName,
   children
 }) {
-  const eventBus = useContext7(PanoEventBusContext);
-  const controlsRef = useContext7(PanoramaViewContext);
-  const overlayApi = useContext7(PanoContextMenuOverlayContext);
-  const actions = useContext7(PanoContextMenuActionsContext);
+  const eventBus = useContext8(PanoEventBusContext);
+  const controlsRef = useContext8(PanoramaViewContext);
+  const overlayApi = useContext8(PanoContextMenuOverlayContext);
+  const actions = useContext8(PanoContextMenuActionsContext);
   const instanceId = useId();
-  const sessionKeyRef = useRef6(0);
-  const propsRef = useRef6({
+  const sessionKeyRef = useRef7(0);
+  const propsRef = useRef7({
     items,
     prepend,
     append,
@@ -4007,9 +4198,9 @@ function PanoContextMenu({
         view,
         render: () => {
           if (hasCustomChildren && current.children) {
-            return /* @__PURE__ */ jsx2("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
+            return /* @__PURE__ */ jsx3("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
           }
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx3(
             DefaultContextMenuPanel,
             {
               appearance: current.appearance,
@@ -4027,7 +4218,7 @@ function PanoContextMenu({
     },
     [actions, close, controlsRef, instanceId, overlayApi]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const unsubscribeContextMenu = eventBus.subscribe(
       "contextmenu",
       openMenu
@@ -4060,14 +4251,14 @@ function ResetViewIcon() {
       viewBox: "0 0 16 16",
       width: "100%",
       children: [
-        /* @__PURE__ */ jsx2("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
-        /* @__PURE__ */ jsx2("path", { d: "M3.5 3.5v3h3" })
+        /* @__PURE__ */ jsx3("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
+        /* @__PURE__ */ jsx3("path", { d: "M3.5 3.5v3h3" })
       ]
     }
   );
 }
 function FullscreenIcon() {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       "aria-hidden": true,
@@ -4079,12 +4270,12 @@ function FullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ jsx2("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
+      children: /* @__PURE__ */ jsx3("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
     }
   );
 }
 function ExitFullscreenIcon() {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       "aria-hidden": true,
@@ -4096,7 +4287,7 @@ function ExitFullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ jsx2("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
+      children: /* @__PURE__ */ jsx3("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
     }
   );
 }
@@ -4105,7 +4296,7 @@ function createPanoContextMenuPresets(actions) {
   const resetView = {
     id: "pano-reset-view",
     label: "Reset view",
-    icon: /* @__PURE__ */ jsx2(ResetViewIcon, {}),
+    icon: /* @__PURE__ */ jsx3(ResetViewIcon, {}),
     onSelect: () => {
       actions.reset();
     }
@@ -4113,7 +4304,7 @@ function createPanoContextMenuPresets(actions) {
   const fullscreen = {
     id: "pano-fullscreen",
     label: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-    icon: isFullscreen ? /* @__PURE__ */ jsx2(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx2(FullscreenIcon, {}),
+    icon: isFullscreen ? /* @__PURE__ */ jsx3(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx3(FullscreenIcon, {}),
     onSelect: () => {
       actions.toggleFullscreen();
     }
@@ -4206,19 +4397,19 @@ function composePanoContextMenuItems(props, presets) {
     ...resolvePanoContextMenuEntries(props.append ?? [], presets)
   ];
 }
-var PanoContextMenuActionsContext = createContext7(null);
+var PanoContextMenuActionsContext = createContext8(null);
 
 // src/pano-cursor.tsx
 import { useThree as useThree4 } from "@react-three/fiber";
 import {
-  createContext as createContext8,
+  createContext as createContext9,
   useCallback as useCallback3,
-  useContext as useContext8,
-  useEffect as useEffect7,
+  useContext as useContext9,
+  useEffect as useEffect8,
   useMemo as useMemo4,
-  useRef as useRef7
+  useRef as useRef8
 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var DEFAULT_PANO_CURSORS = {
   default: "grab",
   dragging: "grabbing",
@@ -4232,9 +4423,9 @@ var LAYER_PRIORITY = {
   hotspotDragging: 3,
   hidden: 4
 };
-var PanoCursorContext = createContext8(null);
+var PanoCursorContext = createContext9(null);
 function usePanoCursor() {
-  return useContext8(PanoCursorContext);
+  return useContext9(PanoCursorContext);
 }
 function hotspotCursorClaimId(id) {
   return `pano-cursor:hotspot:${id}`;
@@ -4286,10 +4477,10 @@ function PanoCursorController({
   children
 }) {
   const { gl } = useThree4();
-  const eventBus = useContext8(PanoEventBusContext);
-  const claimsRef = useRef7(/* @__PURE__ */ new Map());
-  const cursorsRef = useRef7(cursors);
-  const appliedCursorRef = useRef7(null);
+  const eventBus = useContext9(PanoEventBusContext);
+  const claimsRef = useRef8(/* @__PURE__ */ new Map());
+  const cursorsRef = useRef8(cursors);
+  const appliedCursorRef = useRef8(null);
   cursorsRef.current = cursors;
   const applyCursor = useCallback3(() => {
     const next = resolveHighestCursor(claimsRef.current, cursorsRef.current);
@@ -4323,7 +4514,7 @@ function PanoCursorController({
     }),
     [claim, cursors, release]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const element = gl.domElement;
     const previous = element.style.cursor;
     return () => {
@@ -4332,10 +4523,10 @@ function PanoCursorController({
       element.style.cursor = previous;
     };
   }, [gl]);
-  useEffect7(() => {
+  useEffect8(() => {
     applyCursor();
   }, [applyCursor, cursors]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!eventBus) {
       return;
     }
@@ -4360,12 +4551,12 @@ function PanoCursorController({
       release(PANO_DRAG_CLAIM_ID);
     };
   }, [claim, eventBus, release]);
-  return /* @__PURE__ */ jsx3(PanoCursorContext.Provider, { value: api, children });
+  return /* @__PURE__ */ jsx4(PanoCursorContext.Provider, { value: api, children });
 }
 
 // src/pano-events.tsx
 import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
-import { useContext as useContext9, useEffect as useEffect8, useRef as useRef8 } from "react";
+import { useContext as useContext10, useEffect as useEffect9, useRef as useRef9 } from "react";
 var DEFAULT_IDLE_TIME_MS = 2e3;
 function resolveIdleTime(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_IDLE_TIME_MS;
@@ -4403,13 +4594,13 @@ function usePanoEvents({
   onVRDenied,
   onVRUnknownDevice
 }) {
-  const eventBus = useContext9(PanoEventBusContext);
-  const controlsRef = useContext9(PanoramaViewContext);
+  const eventBus = useContext10(PanoEventBusContext);
+  const controlsRef = useContext10(PanoramaViewContext);
   const { gl } = useThree5();
   if (!eventBus || !controlsRef) {
     throw new Error("usePanoEvents must be used inside <PanoViewer>.");
   }
-  const callbacksRef = useRef8({
+  const callbacksRef = useRef9({
     onViewChange,
     onViewSettled,
     onViewInteractionStart,
@@ -4473,15 +4664,15 @@ function usePanoEvents({
     onVRDenied,
     onVRUnknownDevice
   };
-  const idleElapsedRef = useRef8(0);
-  const isIdleRef = useRef8(false);
-  const idleTimeRef = useRef8(resolveIdleTime(idleTime));
+  const idleElapsedRef = useRef9(0);
+  const isIdleRef = useRef9(false);
+  const idleTimeRef = useRef9(resolveIdleTime(idleTime));
   idleTimeRef.current = resolveIdleTime(idleTime);
-  useEffect8(() => {
+  useEffect9(() => {
     idleElapsedRef.current = 0;
     isIdleRef.current = false;
   }, [idleTime]);
-  useEffect8(() => {
+  useEffect9(() => {
     const unsubscribers = [
       eventBus.subscribe("viewchange", (view) => {
         callbacksRef.current.onViewChange?.(view);
@@ -4562,7 +4753,7 @@ function usePanoEvents({
       }
     };
   }, [eventBus]);
-  useEffect8(() => {
+  useEffect9(() => {
     const element = gl.domElement;
     const handleWheel = (nativeEvent) => {
       callbacksRef.current.onWheel?.({
@@ -4575,7 +4766,7 @@ function usePanoEvents({
       element.removeEventListener("wheel", handleWheel);
     };
   }, [gl]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -4601,7 +4792,7 @@ function usePanoEvents({
     wasFullscreenRef.current = isViewerFullscreen();
     return subscribeFullscreenChange(handleFullscreenChange);
   }, [gl]);
-  useEffect8(() => {
+  useEffect9(() => {
     const element = gl.domElement;
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -4643,7 +4834,7 @@ function PanoEvents(props) {
 
 // src/panorama-event-surface.tsx
 import { useThree as useThree6 } from "@react-three/fiber";
-import { useContext as useContext10, useEffect as useEffect9 } from "react";
+import { useContext as useContext11, useEffect as useEffect10 } from "react";
 import { BackSide, Raycaster, Vector2, Vector3 as Vector32 } from "three";
 
 // src/hotspot/coordinates.ts
@@ -4721,7 +4912,7 @@ var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
 var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
 
 // src/panorama-event-surface.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -4736,9 +4927,9 @@ function makePanoramaPointerEvent(event) {
   };
 }
 function PanoramaEventSurface() {
-  const eventBus = useContext10(PanoEventBusContext);
+  const eventBus = useContext11(PanoEventBusContext);
   const { camera, gl } = useThree6();
-  useEffect9(() => {
+  useEffect10(() => {
     if (!eventBus) {
       return;
     }
@@ -4789,8 +4980,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ jsx4("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ jsx5(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -4807,8 +4998,8 @@ function PanoramaEventSurface() {
 }
 
 // src/scenes-host.ts
-import { createContext as createContext9 } from "react";
-var ScenesHostContext = createContext9(null);
+import { createContext as createContext10 } from "react";
+var ScenesHostContext = createContext10(null);
 function createScenesHost() {
   return {
     controller: null,
@@ -4825,7 +5016,7 @@ function notifyScenesHost(host) {
 
 // src/touch-controls.tsx
 import { useThree as useThree7 } from "@react-three/fiber";
-import { useContext as useContext11, useEffect as useEffect10, useRef as useRef9 } from "react";
+import { useContext as useContext12, useEffect as useEffect11, useRef as useRef10 } from "react";
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
@@ -4840,16 +5031,16 @@ function TouchControls({
   pinchZoom = true
 }) {
   useClaimControlChannel("touch");
-  const controlsRef = useContext11(PanoramaViewContext);
+  const controlsRef = useContext12(PanoramaViewContext);
   const { gl } = useThree7();
-  const pointersRef = useRef9(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = useRef9(null);
-  const optionsRef = useRef9({ rotateSpeed, invert, pinchZoom });
+  const pointersRef = useRef10(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = useRef10(null);
+  const optionsRef = useRef10({ rotateSpeed, invert, pinchZoom });
   if (!controlsRef) {
     throw new Error("<TouchControls> must be rendered inside <PanoViewer>.");
   }
   optionsRef.current = { rotateSpeed, invert, pinchZoom };
-  useEffect10(() => {
+  useEffect11(() => {
     const element = gl.domElement;
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
@@ -4971,9 +5162,9 @@ function TouchControls({
 }
 
 // src/video/chrome-overlay.tsx
-import { createContext as createContext10, useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PanoChromeOverlayContext = createContext10(null);
+import { createContext as createContext11, useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PanoChromeOverlayContext = createContext11(null);
 function usePanoChromeOverlay() {
   const [overlayElement, setOverlayElement] = useState3(
     null
@@ -4985,7 +5176,7 @@ function usePanoChromeOverlay() {
     () => ({ overlayElement }),
     [overlayElement]
   );
-  const overlay = /* @__PURE__ */ jsx5(
+  const overlay = /* @__PURE__ */ jsx6(
     "div",
     {
       className: "pano-chrome-overlay",
@@ -4997,9 +5188,9 @@ function usePanoChromeOverlay() {
 }
 
 // src/video/host.ts
-import { createContext as createContext11, useContext as useContext12 } from "react";
-var PanoVideoHostContext = createContext11(null);
-var DefaultPanoVideoControlsContext = createContext11(false);
+import { createContext as createContext12, useContext as useContext13 } from "react";
+var PanoVideoHostContext = createContext12(null);
+var DefaultPanoVideoControlsContext = createContext12(false);
 function createPanoVideoHost() {
   return {
     controller: null,
@@ -5022,6 +5213,20 @@ function subscribePanoVideoHost(host, onStoreChange) {
     host.listeners.delete(onStoreChange);
   };
 }
+function subscribePanoVideoStore(host, onStoreChange) {
+  let unsubscribeController = host.controller?.subscribe(onStoreChange) ?? (() => {
+  });
+  const unsubscribeHost = subscribePanoVideoHost(host, () => {
+    unsubscribeController();
+    unsubscribeController = host.controller?.subscribe(onStoreChange) ?? (() => {
+    });
+    onStoreChange();
+  });
+  return () => {
+    unsubscribeController();
+    unsubscribeHost();
+  };
+}
 function getPanoVideoHostRevision(host) {
   return host.revision;
 }
@@ -5030,8 +5235,8 @@ function isProduction3() {
   return nodeEnv === "production";
 }
 function useClaimPanoVideoControls() {
-  const host = useContext12(PanoVideoHostContext);
-  const isDefault = useContext12(DefaultPanoVideoControlsContext);
+  const host = useContext13(PanoVideoHostContext);
+  const isDefault = useContext13(DefaultPanoVideoControlsContext);
   if (!host || isDefault) {
     return;
   }
@@ -5048,7 +5253,7 @@ import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 
 // src/video/pano-video-captions.tsx
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
   background: "rgba(0, 0, 0, 0.55)",
@@ -5096,13 +5301,13 @@ function PanoVideoCaptionsOverlay({
     textShadow: snapshot.captionAppearance.textShadow,
     whiteSpace: "pre-wrap"
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: "pano-video-captions",
       "data-pano-video-captions": "",
       style: wrapperStyle,
-      children: /* @__PURE__ */ jsx6("div", { style: textStyle, children: snapshot.captionText })
+      children: /* @__PURE__ */ jsx7("div", { style: textStyle, children: snapshot.captionText })
     }
   );
 }
@@ -5115,11 +5320,11 @@ function PanoVideoCaptions({
 // src/video/pano-video-controls.tsx
 import {
   useCallback as useCallback5,
-  useContext as useContext13,
-  useEffect as useEffect11,
+  useContext as useContext14,
+  useEffect as useEffect12,
   useId as useId2,
   useMemo as useMemo6,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState4,
   useSyncExternalStore as useSyncExternalStore3
 } from "react";
@@ -5254,7 +5459,7 @@ function cueText(cue) {
 }
 
 // src/video/pano-video-controls.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE = {
   background: "rgba(16, 16, 16, 0.88)",
   color: "#f4f4f4",
@@ -5315,7 +5520,7 @@ function volumeFromClientY(clientY, track) {
   return Math.max(0, Math.min(1, (rect.bottom - clientY) / rect.height));
 }
 function Icon({ path }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       "aria-hidden": true,
@@ -5327,7 +5532,7 @@ function Icon({ path }) {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "16",
-      children: /* @__PURE__ */ jsx7("path", { d: path })
+      children: /* @__PURE__ */ jsx8("path", { d: path })
     }
   );
 }
@@ -5339,7 +5544,7 @@ function ChromeButton({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       "aria-label": label,
@@ -5365,14 +5570,14 @@ function ChromeMenu({
   labelledBy,
   items
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: items.map((item) => /* @__PURE__ */ jsx7(
+      children: items.map((item) => /* @__PURE__ */ jsx8(
         ChromeMenuRadioItem,
         {
           active: item.active,
@@ -5392,7 +5597,7 @@ function ChromeMenuSurface({
   labelledBy,
   role
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "aria-labelledby": labelledBy,
@@ -5416,7 +5621,7 @@ function ChromeMenuRadioItem({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       "aria-checked": active,
@@ -5456,7 +5661,7 @@ function ChromeMenuActionItem({
       },
       type: "button",
       children: [
-        /* @__PURE__ */ jsx7("span", { children: label }),
+        /* @__PURE__ */ jsx8("span", { children: label }),
         secondary
       ]
     }
@@ -5465,10 +5670,10 @@ function ChromeMenuActionItem({
 function ChromeMenuSectionLabel({
   children
 }) {
-  return /* @__PURE__ */ jsx7("div", { className: "pano-video-chrome-menu-label", children });
+  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-label", children });
 }
 function ChromeMenuDivider() {
-  return /* @__PURE__ */ jsx7("div", { className: "pano-video-chrome-menu-divider" });
+  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-divider" });
 }
 function CaptionsMenu({
   appearance,
@@ -5481,7 +5686,7 @@ function CaptionsMenu({
   panel,
   snapshot
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ChromeMenuSurface,
     {
       appearance,
@@ -5490,7 +5695,7 @@ function CaptionsMenu({
       role: "menu",
       children: panel === "tracks" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
         /* @__PURE__ */ jsxs3("div", { className: "pano-video-chrome-menu-list", children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             ChromeMenuRadioItem,
             {
               active: snapshot.trackId === null,
@@ -5503,7 +5708,7 @@ function CaptionsMenu({
           ),
           snapshot.tracks.map((track) => {
             const trackItemId = panoVideoTrackId(track);
-            return /* @__PURE__ */ jsx7(
+            return /* @__PURE__ */ jsx8(
               ChromeMenuRadioItem,
               {
                 active: snapshot.trackId === trackItemId,
@@ -5517,29 +5722,29 @@ function CaptionsMenu({
             );
           })
         ] }),
-        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx8(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Settings",
             onClick: onOpenSettings,
-            secondary: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u203A" })
+            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u203A" })
           }
         )
       ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Back",
             onClick: onShowTracks,
-            secondary: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u2039" })
+            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u2039" })
           }
         ),
-        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx7(ChromeMenuSectionLabel, { children: "Font size" }),
-        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Font size" }),
+        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
           ChromeMenuRadioItem,
           {
             active: Number(snapshot.captionAppearance.fontSize) === option.value,
@@ -5551,9 +5756,9 @@ function CaptionsMenu({
           },
           option.id
         )),
-        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx7(ChromeMenuSectionLabel, { children: "Background" }),
-        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Background" }),
+        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
           ChromeMenuRadioItem,
           {
             active: snapshot.captionAppearance.background === option.value,
@@ -5574,7 +5779,7 @@ function VerticalVolumeSlider({
   onVolume,
   volume
 }) {
-  const trackRef = useRef10(null);
+  const trackRef = useRef11(null);
   const applyPointer = (event) => {
     const track = trackRef.current;
     if (!track) {
@@ -5608,7 +5813,7 @@ function VerticalVolumeSlider({
         pointerEvents: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "span",
           {
             "aria-hidden": true,
@@ -5620,7 +5825,7 @@ function VerticalVolumeSlider({
             children: percentLabel
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -5660,7 +5865,7 @@ function VerticalVolumeSlider({
                 },
                 tabIndex: 0,
                 children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "div",
                     {
                       style: {
@@ -5675,7 +5880,7 @@ function VerticalVolumeSlider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "div",
                     {
                       style: {
@@ -5710,14 +5915,14 @@ function VolumeControl({
   volume,
   volumeAdjustable
 }) {
-  const rootRef = useRef10(null);
+  const rootRef = useRef11(null);
   const [open, setOpen] = useState4(false);
   const displayVolume = muted ? 0 : volume;
   const mutedOrSilent = muted || volume === 0;
-  useEffect11(() => {
+  useEffect12(() => {
     onOpenChange(open);
   }, [onOpenChange, open]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open || !volumeAdjustable || hasFinePointerHover()) {
       return;
     }
@@ -5734,13 +5939,13 @@ function VolumeControl({
     };
   }, [open, volumeAdjustable]);
   if (!volumeAdjustable) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       ChromeButton,
       {
         appearance,
         label: mutedOrSilent ? "Unmute" : "Mute",
         onClick: onToggleMuted,
-        children: mutedOrSilent ? /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+        children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
       }
     );
   }
@@ -5772,7 +5977,7 @@ function VolumeControl({
       },
       ref: rootRef,
       children: [
-        open ? /* @__PURE__ */ jsx7(
+        open ? /* @__PURE__ */ jsx8(
           VerticalVolumeSlider,
           {
             appearance,
@@ -5780,7 +5985,7 @@ function VolumeControl({
             volume: displayVolume
           }
         ) : null,
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           ChromeButton,
           {
             appearance,
@@ -5791,7 +5996,7 @@ function VolumeControl({
               }
               onToggleMuted();
             },
-            children: mutedOrSilent ? /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+            children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
           }
         )
       ]
@@ -5820,7 +6025,7 @@ function PanoVideoControlsHud({
   const [overlayWidth, setOverlayWidth] = useState4(
     () => overlayElement.clientWidth
   );
-  const idleTimerRef = useRef10(0);
+  const idleTimerRef = useRef11(0);
   const barId = useId2();
   const rateMenuId = `${barId}-rate`;
   const variantMenuId = `${barId}-variant`;
@@ -5842,7 +6047,7 @@ function PanoVideoControlsHud({
     },
     [menu, volumeOpen]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -5857,15 +6062,15 @@ function PanoVideoControlsHud({
       observer.disconnect();
     };
   }, [overlayElement]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!compact && menu === "more") {
       setMenu(null);
     }
   }, [compact, menu]);
-  useEffect11(() => {
+  useEffect12(() => {
     bumpVisibility(snapshot.playing);
   }, [bumpVisibility, snapshot.playing]);
-  useEffect11(() => {
+  useEffect12(() => {
     const root = overlayElement.parentElement;
     if (!root) {
       return;
@@ -5924,7 +6129,7 @@ function PanoVideoControlsHud({
       document.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [bumpVisibility, controller, menu, overlayElement, snapshot.playing, volumeOpen]);
-  useEffect11(
+  useEffect12(
     () => () => {
       window.clearTimeout(idleTimerRef.current);
     },
@@ -5951,7 +6156,7 @@ function PanoVideoControlsHud({
   let menuNode = null;
   switch (menu) {
     case "rate":
-      menuNode = /* @__PURE__ */ jsx7(
+      menuNode = /* @__PURE__ */ jsx8(
         ChromeMenu,
         {
           appearance: resolved,
@@ -5970,7 +6175,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "variant":
-      menuNode = /* @__PURE__ */ jsx7(
+      menuNode = /* @__PURE__ */ jsx8(
         ChromeMenu,
         {
           appearance: resolved,
@@ -5989,7 +6194,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "captions":
-      menuNode = /* @__PURE__ */ jsx7(
+      menuNode = /* @__PURE__ */ jsx8(
         CaptionsMenu,
         {
           appearance: resolved,
@@ -6013,7 +6218,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "more":
-      menuNode = /* @__PURE__ */ jsx7(
+      menuNode = /* @__PURE__ */ jsx8(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6081,7 +6286,7 @@ function PanoVideoControlsHud({
   };
   const rateButton = /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
     !compact && menu === "rate" ? menuNode : null,
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       ChromeButton,
       {
         appearance: resolved,
@@ -6089,13 +6294,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("rate");
         },
-        children: /* @__PURE__ */ jsx7("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
+        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
       }
     )
   ] });
   const variantButton = canSwitchVariant ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
     !compact && menu === "variant" ? menuNode : null,
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       ChromeButton,
       {
         appearance: resolved,
@@ -6103,13 +6308,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("variant");
         },
-        children: /* @__PURE__ */ jsx7("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
+        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
       }
     )
   ] }) : null;
   const captionsButton = showCaptionsMenu ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
     !compact && menu === "captions" ? menuNode : null,
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       ChromeButton,
       {
         appearance: resolved,
@@ -6117,7 +6322,7 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("captions");
         },
-        children: /* @__PURE__ */ jsx7("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx7(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
+        children: /* @__PURE__ */ jsx8("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx8(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
       }
     )
   ] }) : null;
@@ -6128,7 +6333,7 @@ function PanoVideoControlsHud({
       "data-pano-video-controls": "",
       style: barStyle,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           ChromeButton,
           {
             appearance: resolved,
@@ -6136,11 +6341,11 @@ function PanoVideoControlsHud({
             onClick: () => {
               controller.togglePlay();
             },
-            children: snapshot.playing ? /* @__PURE__ */ jsx7(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx7(Icon, { path: "M5 3.2v9.6L13 8z" })
+            children: snapshot.playing ? /* @__PURE__ */ jsx8(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx8(Icon, { path: "M5 3.2v9.6L13 8z" })
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx7("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
-        /* @__PURE__ */ jsx7(
+        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
+        /* @__PURE__ */ jsx8(
           "input",
           {
             "aria-label": "Seek",
@@ -6162,8 +6367,8 @@ function PanoVideoControlsHud({
             value: duration > 0 ? snapshot.currentTime : 0
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx7("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ jsx7(
+        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
+        /* @__PURE__ */ jsx8(
           VolumeControl,
           {
             appearance: resolved,
@@ -6181,7 +6386,7 @@ function PanoVideoControlsHud({
         ),
         compact ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
           menu !== null ? menuNode : null,
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             ChromeButton,
             {
               appearance: resolved,
@@ -6190,7 +6395,7 @@ function PanoVideoControlsHud({
               onClick: () => {
                 toggleMenu("more");
               },
-              children: /* @__PURE__ */ jsx7(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
+              children: /* @__PURE__ */ jsx8(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
             }
           )
         ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -6198,7 +6403,7 @@ function PanoVideoControlsHud({
           variantButton,
           captionsButton
         ] }),
-        showFullscreen ? /* @__PURE__ */ jsx7(
+        showFullscreen ? /* @__PURE__ */ jsx8(
           ChromeButton,
           {
             appearance: resolved,
@@ -6206,7 +6411,7 @@ function PanoVideoControlsHud({
             onClick: () => {
               fullscreen?.toggleFullscreen();
             },
-            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx7(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
+            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx8(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
           }
         ) : null
       ]
@@ -6215,7 +6420,7 @@ function PanoVideoControlsHud({
 }
 function PanoVideoControls({ appearance }) {
   useClaimPanoVideoControls();
-  const host = useContext13(PanoVideoHostContext);
+  const host = useContext14(PanoVideoHostContext);
   if (host && appearance) {
     host.controls = appearance;
   }
@@ -6223,7 +6428,7 @@ function PanoVideoControls({ appearance }) {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function PanoVideoChromeBridge({
   fullscreen,
   host,
@@ -6239,7 +6444,7 @@ function PanoVideoChromeBridge({
   }
   const showDefaultControls = host.controller !== null && host.controls !== false && host.controlClaims === 0;
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    showDefaultControls ? /* @__PURE__ */ jsx8(
+    showDefaultControls ? /* @__PURE__ */ jsx9(
       PanoVideoControlsHud,
       {
         appearance: typeof host.controls === "object" ? host.controls : void 0,
@@ -6248,7 +6453,7 @@ function PanoVideoChromeBridge({
         overlayElement
       }
     ) : null,
-    host.captions !== false && host.controller ? /* @__PURE__ */ jsx8(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
+    host.captions !== false && host.controller ? /* @__PURE__ */ jsx9(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
   ] });
 }
 
@@ -6256,8 +6461,8 @@ function PanoVideoChromeBridge({
 import { useSyncExternalStore as useSyncExternalStore5 } from "react";
 
 // src/webvr/host.ts
-import { createContext as createContext12 } from "react";
-var WebVRRuntimeContext = createContext12(null);
+import { createContext as createContext13 } from "react";
+var WebVRRuntimeContext = createContext13(null);
 function createWebVRHost() {
   return {
     controller: null,
@@ -6401,7 +6606,7 @@ function clamp2(value, min, max) {
 }
 
 // src/webvr/chrome.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -6413,7 +6618,7 @@ function ChromeButton2({
   children,
   onClick
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       className: "pano-webvr-button",
@@ -6458,11 +6663,11 @@ function SetupPanel({
       role: "dialog",
       style: panelStyle,
       children: [
-        /* @__PURE__ */ jsx9("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
+        /* @__PURE__ */ jsx10("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
         /* @__PURE__ */ jsxs5("label", { className: "pano-webvr-setup-field", children: [
           "Screen size (inch)",
           /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 "aria-label": "Decrease screen size",
@@ -6474,8 +6679,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx9("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 "aria-label": "Increase screen size",
@@ -6490,9 +6695,9 @@ function SetupPanel({
           ] })
         ] }),
         /* @__PURE__ */ jsxs5("fieldset", { className: "pano-webvr-setup-fieldset", children: [
-          /* @__PURE__ */ jsx9("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
+          /* @__PURE__ */ jsx10("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
           /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 "aria-label": "Previous headset preset",
@@ -6502,8 +6707,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx9("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 "aria-label": "Next headset preset",
@@ -6515,7 +6720,7 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ChromeButton2,
           {
             appearance,
@@ -6539,8 +6744,8 @@ function WebVRChromeBridge({ host }) {
   }
   const appearance = resolveAppearance(chrome);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx9("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
-      mode !== "webxr" ? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
+      mode !== "webxr" ? /* @__PURE__ */ jsx10(
         ChromeButton2,
         {
           appearance,
@@ -6548,7 +6753,7 @@ function WebVRChromeBridge({ host }) {
           children: "VR Setup"
         }
       ) : null,
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         ChromeButton2,
         {
           appearance,
@@ -6556,7 +6761,7 @@ function WebVRChromeBridge({ host }) {
           children: "Exit VR"
         }
       )
-    ] }) : /* @__PURE__ */ jsx9(
+    ] }) : /* @__PURE__ */ jsx10(
       ChromeButton2,
       {
         appearance,
@@ -6564,7 +6769,7 @@ function WebVRChromeBridge({ host }) {
         children: available ? "Enter VR" : "VR unavailable"
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ jsx9(
+    mode === "fake" ? /* @__PURE__ */ jsx10(
       "p",
       {
         className: "pano-webvr-hint",
@@ -6572,7 +6777,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__ */ jsx9(
+    setupOpen ? /* @__PURE__ */ jsx10(
       SetupPanel,
       {
         appearance,
@@ -6612,12 +6817,12 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 // src/webvr/xr-origin.tsx
 import { useFrame as useFrame5, useThree as useThree8 } from "@react-three/fiber";
 import { useXR as useXR2, XROrigin } from "@react-three/xr";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { Vector3 as Vector34 } from "three";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function PanoramaXROrigin() {
-  const originRef = useRef11(null);
-  const localHeadPositionRef = useRef11(new Vector34());
+  const originRef = useRef12(null);
+  const localHeadPositionRef = useRef12(new Vector34());
   const session2 = useXR2((state) => state.session);
   const gl = useThree8((state) => state.gl);
   useFrame5(() => {
@@ -6630,11 +6835,11 @@ function PanoramaXROrigin() {
     origin.position.copy(localHeadPositionRef.current).multiplyScalar(-1);
     origin.updateMatrixWorld();
   }, -100);
-  return /* @__PURE__ */ jsx10(XROrigin, { ref: originRef });
+  return /* @__PURE__ */ jsx11(XROrigin, { ref: originRef });
 }
 
 // src/pano-viewer.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -6679,10 +6884,10 @@ function PanoCursorTree({
   if (!cursors) {
     return children;
   }
-  return /* @__PURE__ */ jsx11(PanoCursorController, { cursors, children });
+  return /* @__PURE__ */ jsx12(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
-  const host = useContext14(PanoVideoHostContext);
+  const host = useContext15(PanoVideoHostContext);
   if (host) {
     host.controlClaims = 0;
   }
@@ -6695,14 +6900,14 @@ function DefaultControlChannels({
   keyboardChannel,
   fovSpeed
 }) {
-  const claims = useContext14(ControlClaimsContext);
+  const claims = useContext15(ControlClaimsContext);
   if (!claims) {
     return null;
   }
   return /* @__PURE__ */ jsxs6(DefaultControlChannelContext.Provider, { value: true, children: [
-    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx11(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
-    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx11(TouchControls, { ...touchChannel.props }) : null,
-    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx11(
+    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx12(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
+    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx12(TouchControls, { ...touchChannel.props }) : null,
+    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx12(
       KeyboardControls,
       {
         ...keyboardChannel.props,
@@ -6720,6 +6925,7 @@ var PanoViewer = forwardRef2(
     controls = true,
     cursors,
     contextMenu = true,
+    mediaActivation,
     onViewChange,
     onPanoramaClick,
     onPanoramaDoubleClick,
@@ -6729,8 +6935,8 @@ var PanoViewer = forwardRef2(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = useRef12(null);
-    const controlsRef = useRef12(null);
+    const rootRef = useRef13(null);
+    const controlsRef = useRef13(null);
     const eventBus = useMemo7(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
@@ -6740,6 +6946,17 @@ var PanoViewer = forwardRef2(
     const webVRHost = useMemo7(() => createWebVRHost(), []);
     const scenesHost = useMemo7(() => createScenesHost(), []);
     const bgmHost = useMemo7(() => createBackgroundAudioHost(), []);
+    const mediaActivationHost = useMemo7(() => createPanoMediaActivationHost(), []);
+    const mediaActivationOptions = useMemo7(
+      () => mediaActivation === false ? null : mediaActivation ?? {},
+      [mediaActivation]
+    );
+    const mediaActivationRevision = useSyncExternalStore6(
+      (onStoreChange) => subscribePanoMediaActivation(mediaActivationHost, onStoreChange),
+      () => getPanoMediaActivationRevision(mediaActivationHost),
+      () => getPanoMediaActivationRevision(mediaActivationHost)
+    );
+    const [mediaActivated, setMediaActivated] = useState5(false);
     const stereoView = useMemo7(() => createWebVRStereoView(), []);
     const xrStore = useMemo7(
       () => createXRStore({
@@ -6757,7 +6974,33 @@ var PanoViewer = forwardRef2(
       }),
       []
     );
-    const fallbackViewRef = useRef12(DEFAULT_VIEW);
+    const mediaActivationControls = useMemo7(
+      () => ({
+        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 = useCallback6(() => {
+      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 = useRef13(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
@@ -6860,7 +7103,7 @@ var PanoViewer = forwardRef2(
       await requestElementFullscreen(root);
     }, []);
     const [isViewerFullscreen, setIsViewerFullscreen] = useState5(false);
-    useEffect12(() => {
+    useEffect13(() => {
       if (typeof document === "undefined") {
         return;
       }
@@ -6878,7 +7121,7 @@ var PanoViewer = forwardRef2(
       syncFullscreen();
       return subscribeFullscreenChange(syncFullscreen);
     }, []);
-    useEffect12(() => {
+    useEffect13(() => {
       const root = rootRef.current;
       if (!root) {
         return;
@@ -6915,10 +7158,10 @@ var PanoViewer = forwardRef2(
     const [legacyAutoRotate, setLegacyAutoRotate] = useState5(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    useEffect12(() => {
+    useEffect13(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
-    const isFullscreenRef = useRef12(false);
+    const isFullscreenRef = useRef13(false);
     isFullscreenRef.current = isViewerFullscreen;
     useImperativeHandle2(
       ref,
@@ -6931,6 +7174,7 @@ var PanoViewer = forwardRef2(
         reset: () => {
           controlsRef.current?.reset();
         },
+        activateMedia,
         // -- Fullscreen --
         enterFullscreen,
         exitFullscreen,
@@ -6953,7 +7197,7 @@ var PanoViewer = forwardRef2(
         requestVRPermission: () => webVRHost.controller?.requestPermission() ?? Promise.resolve(false),
         // -- Video --
         getVideo: () => videoHost.controller,
-        subscribeVideo: (onStoreChange) => subscribePanoVideoHost(videoHost, onStoreChange),
+        subscribeVideo: (onStoreChange) => subscribePanoVideoStore(videoHost, onStoreChange),
         playVideo: () => videoHost.controller?.play() ?? Promise.resolve(),
         pauseVideo: () => videoHost.controller?.pause(),
         toggleVideo: () => videoHost.controller?.togglePlay(),
@@ -6963,7 +7207,7 @@ var PanoViewer = forwardRef2(
         toggleVideoMuted: () => videoHost.controller?.toggleMuted(),
         // -- Background Audio --
         getBackgroundAudio: () => bgmHost.controller,
-        subscribeBackgroundAudio: (onStoreChange) => subscribeBackgroundAudioHost(bgmHost, onStoreChange),
+        subscribeBackgroundAudio: (onStoreChange) => subscribeBackgroundAudioStore(bgmHost, onStoreChange),
         playBackgroundAudio: () => {
           bgmHost.controller?.play();
           return Promise.resolve();
@@ -6983,6 +7227,7 @@ var PanoViewer = forwardRef2(
       }),
       [
         bgmHost,
+        activateMedia,
         enterFullscreen,
         exitFullscreen,
         scenesHost,
@@ -7009,7 +7254,7 @@ var PanoViewer = forwardRef2(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
@@ -7031,23 +7276,23 @@ var PanoViewer = forwardRef2(
                 ...DEFAULT_CANVAS_STYLE,
                 touchAction: userControlsEnabled ? "none" : "auto"
               },
-              children: /* @__PURE__ */ jsx11(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
+              children: /* @__PURE__ */ jsx12(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
                 WebVRRuntimeContext.Provider,
                 {
                   value: { host: webVRHost, xrStore, stereoView },
                   children: [
-                    /* @__PURE__ */ jsx11(PanoramaXROrigin, {}),
-                    /* @__PURE__ */ jsx11(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx11(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx11(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx11(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx11(
+                    /* @__PURE__ */ jsx12(PanoramaXROrigin, {}),
+                    /* @__PURE__ */ jsx12(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx12(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx12(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx12(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx12(
                       PanoContextMenuOverlayContext.Provider,
                       {
                         value: contextMenuOverlayApi,
-                        children: /* @__PURE__ */ jsx11(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx11(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx11(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx11(
+                        children: /* @__PURE__ */ jsx12(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx12(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx12(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx12(
                           PanoContextMenuActionsContext.Provider,
                           {
                             value: contextMenuActions,
-                            children: /* @__PURE__ */ jsx11(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsxs6(BackgroundAudioHostContext.Provider, { value: bgmHost, children: [
-                              /* @__PURE__ */ jsx11(PanoVideoHostReset, {}),
-                              /* @__PURE__ */ jsx11(
+                            children: /* @__PURE__ */ jsx12(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx12(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs6(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
+                              /* @__PURE__ */ jsx12(PanoVideoHostReset, {}),
+                              /* @__PURE__ */ jsx12(
                                 PanoramaViewRuntime,
                                 {
                                   ref: controlsRef,
@@ -7058,7 +7303,7 @@ var PanoViewer = forwardRef2(
                                   options: controlOptions
                                 }
                               ),
-                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx11(
+                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx12(
                                 PanoEvents,
                                 {
                                   onViewChange,
@@ -7067,18 +7312,18 @@ var PanoViewer = forwardRef2(
                                   onPointerMove: onPanoramaPointerMove
                                 }
                               ),
-                              /* @__PURE__ */ jsx11(
+                              /* @__PURE__ */ jsx12(
                                 AutoRotate,
                                 {
                                   enabled: legacyAutoRotate,
                                   speed: legacyAutoRotateOptions.autoRotateSpeed
                                 }
                               ),
-                              /* @__PURE__ */ jsx11(PanoramaEventSurface, {}),
-                              contextMenuChannel.mount ? /* @__PURE__ */ jsx11(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                              /* @__PURE__ */ jsx12(PanoramaEventSurface, {}),
+                              contextMenuChannel.mount ? /* @__PURE__ */ jsx12(PanoContextMenu, { ...contextMenuChannel.props }) : null,
                               /* @__PURE__ */ jsxs6(ControlClaimsContext.Provider, { value: controlClaims, children: [
                                 children,
-                                /* @__PURE__ */ jsx11(
+                                /* @__PURE__ */ jsx12(
                                   DefaultControlChannels,
                                   {
                                     fovSpeed: controlOptions.fovSpeed,
@@ -7089,7 +7334,7 @@ var PanoViewer = forwardRef2(
                                   }
                                 )
                               ] })
-                            ] }) })
+                            ] }) }) })
                           }
                         ) }) }) })
                       }
@@ -7106,7 +7351,7 @@ var PanoViewer = forwardRef2(
               "data-pano-chrome-overlay": "",
               ref: setOverlayNode,
               children: [
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   PanoVideoChromeBridge,
                   {
                     fullscreen: contextMenuActions,
@@ -7114,115 +7359,29 @@ var PanoViewer = forwardRef2(
                     overlayElement
                   }
                 ),
-                /* @__PURE__ */ jsx11(WebVRChromeBridge, { host: webVRHost })
+                /* @__PURE__ */ jsx12(WebVRChromeBridge, { host: webVRHost })
               ]
             }
           ),
           contextMenuOverlay,
-          hotspotAccessibilityControls
-        ]
-      }
-    );
-  }
-);
-
-// src/background-audio.tsx
-import { useContext as useContext15, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef13, useState as useState6 } from "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();
-    }
-  };
-}
+          hotspotAccessibilityControls,
+          shouldShowMediaActivation ? /* @__PURE__ */ jsx12(
+            PanoMediaActivationOverlay,
+            {
+              ...mediaActivationOptions,
+              onActivate: () => {
+                void activateMedia();
+              }
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+
+// src/background-audio.tsx
+import { useContext as useContext16, useEffect as useEffect14, useMemo as useMemo8, useRef as useRef14, useState as useState6 } from "react";
 
 // src/hotspot/audio-spatial.ts
 import { MathUtils as MathUtils3, Vector3 as Vector35 } from "three";
@@ -7310,7 +7469,7 @@ function BackgroundAudio({
   onEnded,
   onError
 }) {
-  const controlsRef = useContext15(PanoramaViewContext);
+  const controlsRef = useContext16(PanoramaViewContext);
   if (!controlsRef) {
     throw new Error("<BackgroundAudio> must be rendered inside <PanoViewer>.");
   }
@@ -7318,30 +7477,39 @@ function BackgroundAudio({
   const [internalPlaying, setInternalPlaying] = useState6(defaultPlaying);
   const playing = isControlled ? controlledPlaying : internalPlaying;
   const urls = resolveBackgroundAudioUrls(src, sources, sceneId);
+  usePanoMediaActivationIntent(playing && urls.length > 0);
   const trackKey = urls.join("\0");
-  const currentRef = useRef13(null);
-  const outgoingRef = useRef13([]);
-  const fadingInRef = useRef13(false);
-  const isFirstTrackRef = useRef13(true);
-  const playingRef = useRef13(playing);
-  const loopRef = useRef13(loop);
-  const mutedRef = useRef13(muted);
-  const volumeRef = useRef13(volume);
-  const fadeMsRef = useRef13(resolveFadeMs(fadeMs));
-  const onPlaybackStateChangeRef = useRef13(onPlaybackStateChange);
-  const onPlaybackErrorRef = useRef13(onPlaybackError);
-  const onEndedRef = useRef13(onEnded);
-  const onErrorRef = useRef13(onError);
+  const currentRef = useRef14(null);
+  const outgoingRef = useRef14([]);
+  const fadingInRef = useRef14(false);
+  const isFirstTrackRef = useRef14(true);
+  const playingRef = useRef14(playing);
+  const loopRef = useRef14(loop);
+  const mutedRef = useRef14(muted);
+  const volumeRef = useRef14(volume);
+  const mutedPropRef = useRef14(muted);
+  const volumePropRef = useRef14(volume);
+  const fadeMsRef = useRef14(resolveFadeMs(fadeMs));
+  const onPlaybackStateChangeRef = useRef14(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef14(onPlaybackError);
+  const onEndedRef = useRef14(onEnded);
+  const onErrorRef = useRef14(onError);
   playingRef.current = playing;
   loopRef.current = loop;
-  mutedRef.current = muted;
-  volumeRef.current = volume;
   fadeMsRef.current = resolveFadeMs(fadeMs);
+  if (mutedPropRef.current !== muted) {
+    mutedPropRef.current = muted;
+    mutedRef.current = muted;
+  }
+  if (volumePropRef.current !== volume) {
+    volumePropRef.current = volume;
+    volumeRef.current = volume;
+  }
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onPlaybackErrorRef.current = onPlaybackError;
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
-  const snapshotRef = useRef13({
+  const snapshotRef = useRef14({
     ready: false,
     playing: false,
     blocked: false,
@@ -7349,7 +7517,7 @@ function BackgroundAudio({
     muted,
     volume
   });
-  const snapshotListenersRef = useRef13(/* @__PURE__ */ new Set());
+  const snapshotListenersRef = useRef14(/* @__PURE__ */ new Set());
   const notifySnapshot = (patch) => {
     const prev = snapshotRef.current;
     snapshotRef.current = { ...prev, ...patch };
@@ -7357,7 +7525,7 @@ function BackgroundAudio({
       listener();
     }
   };
-  const isControlledRef = useRef13(isControlled);
+  const isControlledRef = useRef14(isControlled);
   isControlledRef.current = isControlled;
   const controller = useMemo8(
     () => ({
@@ -7370,9 +7538,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) {
@@ -7390,20 +7560,17 @@ function BackgroundAudio({
         if (isControlledRef.current) {
           return;
         }
-        const howl = currentRef.current?.handle.howl;
-        if (howl) {
-          howl.volume(clampAudioVolume(vol));
-        }
-        notifySnapshot({ volume: clampAudioVolume(vol) });
+        const next = clampAudioVolume(vol);
+        volumeRef.current = next;
+        currentRef.current?.handle.howl.volume(next);
+        notifySnapshot({ volume: next });
       },
       setMuted: (m) => {
         if (isControlledRef.current) {
           return;
         }
-        const howl = currentRef.current?.handle.howl;
-        if (howl) {
-          howl.mute(m);
-        }
+        mutedRef.current = m;
+        currentRef.current?.handle.howl.mute(m);
         notifySnapshot({ muted: m });
       },
       toggleMuted: () => {
@@ -7411,17 +7578,15 @@ function BackgroundAudio({
           return;
         }
         const next = !snapshotRef.current.muted;
-        const howl = currentRef.current?.handle.howl;
-        if (howl) {
-          howl.mute(next);
-        }
+        mutedRef.current = next;
+        currentRef.current?.handle.howl.mute(next);
         notifySnapshot({ muted: next });
       }
     }),
     []
   );
-  const bgmHost = useContext15(BackgroundAudioHostContext);
-  useEffect13(() => {
+  const bgmHost = useContext16(BackgroundAudioHostContext);
+  useEffect14(() => {
     if (!bgmHost) {
       return;
     }
@@ -7434,7 +7599,7 @@ function BackgroundAudio({
       }
     };
   }, [bgmHost, controller]);
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       fadingInRef.current = false;
       isFirstTrackRef.current = true;
@@ -7446,7 +7611,7 @@ function BackgroundAudio({
       outgoingRef.current = [];
     };
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     const previous = currentRef.current;
     if (previous?.key === trackKey && previous.crossOrigin === crossOrigin) {
       return;
@@ -7481,6 +7646,9 @@ function BackgroundAudio({
           shouldRetryPlay: () => currentRef.current?.key === trackKey && playingRef.current,
           onEnded: () => {
             notifySnapshot({ playing: false, ended: true });
+            if (!isControlledRef.current) {
+              setInternalPlaying(false);
+            }
             onPlaybackStateChangeRef.current?.("ended");
             onEndedRef.current?.();
           },
@@ -7546,35 +7714,42 @@ function BackgroundAudio({
       retire(previous);
     }
   }, [crossOrigin, trackKey]);
-  useEffect13(() => {
+  useEffect14(() => {
     const howl = currentRef.current?.handle.howl;
     if (!howl) {
       return;
     }
     if (!playing) {
       fadingInRef.current = false;
-      howl.pause();
+      if (howl.playing()) {
+        howl.pause();
+      }
       for (const slot of outgoingRef.current) {
         slot.handle.dispose();
       }
       outgoingRef.current = [];
       return;
     }
-    howl.play();
+    if (!howl.playing()) {
+      howl.play();
+    }
   }, [playing, trackKey]);
-  useEffect13(() => {
+  useEffect14(() => {
     const slot = currentRef.current;
     if (!slot) {
       return;
     }
     slot.handle.howl.loop(loop);
-    slot.handle.howl.mute(muted);
+    slot.handle.howl.mute(mutedRef.current);
     if (!fadingInRef.current) {
-      slot.handle.howl.volume(clampAudioVolume(volume));
+      slot.handle.howl.volume(clampAudioVolume(volumeRef.current));
     }
-    notifySnapshot({ muted, volume: clampAudioVolume(volume) });
+    notifySnapshot({
+      muted: mutedRef.current,
+      volume: clampAudioVolume(volumeRef.current)
+    });
   }, [loop, muted, trackKey, volume]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!pauseWhenHidden) {
       return;
     }
@@ -7600,13 +7775,13 @@ function BackgroundAudio({
 }
 
 // src/pano-filter/pano-filter.tsx
-import { useContext as useContext16, useEffect as useEffect14, useMemo as useMemo9 } from "react";
+import { useContext as useContext17, useEffect as useEffect15, useMemo as useMemo9 } from "react";
 function PanoFilter({
   preset = "none",
   intensity,
   enabled = true
 }) {
-  const host = useContext16(PanoFilterHostContext);
+  const host = useContext17(PanoFilterHostContext);
   if (!host) {
     throw new Error("<PanoFilter> must be rendered inside <PanoViewer>.");
   }
@@ -7614,13 +7789,13 @@ function PanoFilter({
     () => resolvePanoFilterSnapshot({ preset, intensity, enabled }),
     [enabled, intensity, preset]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     claimPanoFilter(host);
     return () => {
       releasePanoFilter(host);
     };
   }, [host]);
-  useEffect14(() => {
+  useEffect15(() => {
     setPanoFilterSnapshot(host, snapshot);
   }, [host, snapshot]);
   return null;
@@ -7631,10 +7806,10 @@ import { useFrame as useFrame6, useThree as useThree9 } from "@react-three/fiber
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback7,
-  useContext as useContext17,
-  useEffect as useEffect15,
+  useContext as useContext18,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle3,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState7
 } from "react";
 
@@ -7736,24 +7911,24 @@ var Gyro = forwardRef3(function Gyro2({
   onDisable,
   onDenied
 }, ref) {
-  const controlsRef = useContext17(PanoramaViewContext);
-  const eventBus = useContext17(PanoEventBusContext);
+  const controlsRef = useContext18(PanoramaViewContext);
+  const eventBus = useContext18(PanoEventBusContext);
   const { gl } = useThree9();
   const [internallyDisabled, setInternallyDisabled] = useState7(false);
-  const availableRef = useRef14(false);
-  const availabilityReportedRef = useRef14(null);
-  const activeRef = useRef14(false);
-  const permissionRef = useRef14(deviceOrientationPermissionState);
-  const absoluteEventSourceRef = useRef14(null);
-  const rawQuaternionRef = useRef14(null);
-  const calibrationRef = useRef14(null);
-  const absoluteOffsetRef = useRef14({ yaw: 0, pitch: 0 });
-  const screenAngleRef = useRef14(getScreenOrientationAngle());
-  const startPoseRef = useRef14(null);
-  const enabledAtRef = useRef14(0);
-  const filteredPoseRef = useRef14(null);
-  const lastAppliedPoseRef = useRef14(null);
-  const callbacksRef = useRef14({
+  const availableRef = useRef15(false);
+  const availabilityReportedRef = useRef15(null);
+  const activeRef = useRef15(false);
+  const permissionRef = useRef15(deviceOrientationPermissionState);
+  const absoluteEventSourceRef = useRef15(null);
+  const rawQuaternionRef = useRef15(null);
+  const calibrationRef = useRef15(null);
+  const absoluteOffsetRef = useRef15({ yaw: 0, pitch: 0 });
+  const screenAngleRef = useRef15(getScreenOrientationAngle());
+  const startPoseRef = useRef15(null);
+  const enabledAtRef = useRef15(0);
+  const filteredPoseRef = useRef15(null);
+  const lastAppliedPoseRef = useRef15(null);
+  const callbacksRef = useRef15({
     onAvailable,
     onUnavailable,
     onEnable,
@@ -7898,22 +8073,22 @@ var Gyro = forwardRef3(function Gyro2({
     }),
     [requestPermission, resetSensor]
   );
-  useEffect15(() => {
+  useEffect16(() => {
     if (!enabled) {
       setInternallyDisabled(false);
     }
   }, [enabled]);
-  useEffect15(() => {
+  useEffect16(() => {
     const supported = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined" && (desktopSupport || isMobileDevice());
     setAvailable(supported);
     return () => {
       availableRef.current = false;
     };
   }, [desktopSupport, setAvailable]);
-  useEffect15(() => {
+  useEffect16(() => {
     controlsRef.current?.setGyroTouchMode(touchMode);
   }, [controlsRef, touchMode]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!enabled || internallyDisabled || touchMode !== "disablegyro") {
       return;
     }
@@ -7927,7 +8102,7 @@ var Gyro = forwardRef3(function Gyro2({
       gl.domElement.removeEventListener("pointerdown", onPointerDown);
     };
   }, [enabled, gl, internallyDisabled, touchMode]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!enabled || internallyDisabled || !availableRef.current) {
       deactivate();
       return;
@@ -8092,11 +8267,11 @@ import { useThree as useThree12 } from "@react-three/fiber";
 import {
   forwardRef as forwardRef4,
   useCallback as useCallback8,
-  useContext as useContext19,
-  useEffect as useEffect19,
+  useContext as useContext20,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo11,
-  useRef as useRef18,
+  useRef as useRef19,
   useState as useState8
 } from "react";
 
@@ -8121,14 +8296,14 @@ async function detectWebVRCapabilities() {
 
 // src/webvr/reticle.tsx
 import { useFrame as useFrame7, useThree as useThree10 } from "@react-three/fiber";
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import {
   DoubleSide,
   Raycaster as Raycaster2,
   Vector2 as Vector22,
   Vector3 as Vector37
 } from "three";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var CENTER_NDC = new Vector22(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
@@ -8212,13 +8387,13 @@ function WebVRReticle({
   dwellMs,
   visible
 }) {
-  const groupRef = useRef15(null);
-  const ringMeshRef = useRef15(null);
-  const directionRef = useRef15(new Vector37());
-  const raycasterRef = useRef15(new Raycaster2());
-  const hoveredRef = useRef15(null);
-  const dwellRef = useRef15(0);
-  const clickedRef = useRef15(false);
+  const groupRef = useRef16(null);
+  const ringMeshRef = useRef16(null);
+  const directionRef = useRef16(new Vector37());
+  const raycasterRef = useRef16(new Raycaster2());
+  const hoveredRef = useRef16(null);
+  const dwellRef = useRef16(0);
+  const clickedRef = useRef16(false);
   const { camera, gl, scene } = useThree10();
   useFrame7((_, deltaSeconds) => {
     const group = groupRef.current;
@@ -8303,8 +8478,8 @@ function WebVRReticle({
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx12("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
+              /* @__PURE__ */ jsx13(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8324,8 +8499,8 @@ function WebVRReticle({
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx12("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
+              /* @__PURE__ */ jsx13(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8347,7 +8522,7 @@ function WebVRReticle({
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
             children: [
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "ringGeometry",
                 {
                   args: [
@@ -8360,7 +8535,7 @@ function WebVRReticle({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8381,7 +8556,7 @@ function WebVRReticle({
 
 // src/webvr/stereo.tsx
 import { useFrame as useFrame8, useThree as useThree11 } from "@react-three/fiber";
-import { useContext as useContext18, useEffect as useEffect16, useMemo as useMemo10, useRef as useRef16 } from "react";
+import { useContext as useContext19, useEffect as useEffect17, useMemo as useMemo10, useRef as useRef17 } from "react";
 import {
   Mesh as Mesh2,
   OrthographicCamera,
@@ -8467,25 +8642,25 @@ function WebVRStereoRenderer({
   screensize
 }) {
   const { camera, gl } = useThree11();
-  const runtime = useContext18(WebVRRuntimeContext);
-  const fallbackStereoRef = useRef16(null);
+  const runtime = useContext19(WebVRRuntimeContext);
+  const fallbackStereoRef = useRef17(null);
   if (!fallbackStereoRef.current) {
     fallbackStereoRef.current = new StereoCamera2();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
-  const stereoRef = useRef16(stereo);
+  const stereoRef = useRef17(stereo);
   stereoRef.current = stereo;
   const resources = useMemo10(createDistortionResources, []);
-  const drawingSizeRef = useRef16(new Vector23());
-  const viewportRef = useRef16(new Vector4());
-  const scissorRef = useRef16(new Vector4());
-  const originalFovRef = useRef16(null);
-  const stereoActiveRef = useRef16(false);
-  const profileRef = useRef16(profile);
-  const screensizeRef = useRef16(screensize);
+  const drawingSizeRef = useRef17(new Vector23());
+  const viewportRef = useRef17(new Vector4());
+  const scissorRef = useRef17(new Vector4());
+  const originalFovRef = useRef17(null);
+  const stereoActiveRef = useRef17(false);
+  const profileRef = useRef17(profile);
+  const screensizeRef = useRef17(screensize);
   profileRef.current = profile;
   screensizeRef.current = screensize;
-  useEffect16(
+  useEffect17(
     () => () => {
       resources.geometry.dispose();
       resources.material.dispose();
@@ -8493,7 +8668,7 @@ function WebVRStereoRenderer({
     },
     [resources]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
       if (!stereoActiveRef.current || !(cameraToRender instanceof PerspectiveCamera2)) {
@@ -8557,7 +8732,7 @@ function WebVRStereoRenderer({
       gl.render = originalRender;
     };
   }, [gl, resources]);
-  useEffect16(
+  useEffect17(
     () => () => {
       if (runtime) {
         runtime.stereoView.active = false;
@@ -8592,7 +8767,7 @@ function WebVRStereoRenderer({
 }
 
 // src/webvr/pointerlock.ts
-import { useEffect as useEffect17, useRef as useRef17 } from "react";
+import { useEffect as useEffect18, useRef as useRef18 } from "react";
 var POINTER_LOCK_CURSOR_ID = "webvr:pointerlock";
 async function requestWebVRPointerLock(element) {
   if (typeof document === "undefined") {
@@ -8625,11 +8800,11 @@ function exitWebVRPointerLock(element) {
 }
 function useWebVRPointerLock(enabled, element) {
   const cursor = usePanoCursor();
-  const cursorRef = useRef17(cursor);
-  const enabledRef = useRef17(enabled);
+  const cursorRef = useRef18(cursor);
+  const enabledRef = useRef18(enabled);
   cursorRef.current = cursor;
   enabledRef.current = enabled;
-  useEffect17(() => {
+  useEffect18(() => {
     if (!enabled || !element) {
       return;
     }
@@ -8659,7 +8834,7 @@ function useWebVRPointerLock(enabled, element) {
 }
 
 // src/webvr/wakelock.ts
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "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==";
@@ -8793,7 +8968,7 @@ function releaseWebVRWakeLock() {
   stopFallbackVideo();
 }
 function useWebVRWakeLock(enabled) {
-  useEffect18(() => {
+  useEffect19(() => {
     if (!enabled) {
       return;
     }
@@ -8812,7 +8987,7 @@ function useWebVRWakeLock(enabled) {
 }
 
 // src/webvr/webvr.tsx
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function initializeSettings(screensize, profile) {
   const stored = loadWebVRSettings();
   return {
@@ -8841,24 +9016,24 @@ var WebVR = forwardRef4(function WebVR2({
   onDenied,
   onUnknownDevice
 }, ref) {
-  const runtime = useContext19(WebVRRuntimeContext);
-  const controlsRef = useContext19(PanoramaViewContext);
-  const eventBus = useContext19(PanoEventBusContext);
+  const runtime = useContext20(WebVRRuntimeContext);
+  const controlsRef = useContext20(PanoramaViewContext);
+  const eventBus = useContext20(PanoEventBusContext);
   const gl = useThree12((state) => state.gl);
-  const gyroRef = useRef18(null);
-  const capabilitiesRef = useRef18({
+  const gyroRef = useRef19(null);
+  const capabilitiesRef = useRef19({
     mobile: false,
     sensor: false,
     webxr: false
   });
-  const availableRef = useRef18(false);
-  const modeRef = useRef18(null);
-  const webXRSessionRef = useRef18(null);
+  const availableRef = useRef19(false);
+  const modeRef = useRef19(null);
+  const webXRSessionRef = useRef19(null);
   const [mode, setMode] = useState8(null);
   const [settings, setSettings] = useState8(
     () => initializeSettings(screensize, profile)
   );
-  const callbacksRef = useRef18({
+  const callbacksRef = useRef19({
     onAvailable,
     onDenied,
     onEnterVR,
@@ -9068,7 +9243,7 @@ var WebVR = forwardRef4(function WebVR2({
     }),
     [enterVR, exitVR, requestPermission, toggleVR]
   );
-  useEffect19(() => {
+  useEffect20(() => {
     let active = true;
     void detectWebVRCapabilities().then((capabilities) => {
       if (!active) {
@@ -9090,7 +9265,7 @@ var WebVR = forwardRef4(function WebVR2({
       active = false;
     };
   }, [desktopSupport, eventBus, fakeSupport, host, mobileVr]);
-  useEffect19(() => {
+  useEffect20(() => {
     host.controller = controller;
     return () => {
       if (host.controller === controller) {
@@ -9099,10 +9274,10 @@ var WebVR = forwardRef4(function WebVR2({
       }
     };
   }, [controller, host]);
-  useEffect19(() => {
+  useEffect20(() => {
     updateWebVRHost(host, { chrome, mode, settings });
   }, [chrome, host, mode, settings]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (mode !== "fake") {
       return;
     }
@@ -9126,7 +9301,7 @@ var WebVR = forwardRef4(function WebVR2({
       document.removeEventListener("mousemove", onMouseMove);
     };
   }, [controlsRef, gl.domElement, mode, mousePointerLock]);
-  useEffect19(
+  useEffect20(
     () => () => {
       const session2 = webXRSessionRef.current;
       if (session2) {
@@ -9146,7 +9321,7 @@ var WebVR = forwardRef4(function WebVR2({
     wakelock && (mode === "mobilevr" || mode === "fake")
   );
   return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       Gyro,
       {
         ref: gyroRef,
@@ -9160,7 +9335,7 @@ var WebVR = forwardRef4(function WebVR2({
         touchMode: "off"
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       WebVRStereoRenderer,
       {
         mode,
@@ -9168,7 +9343,7 @@ var WebVR = forwardRef4(function WebVR2({
         screensize: settings.screensize
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       WebVRReticle,
       {
         dwellMs: cursorDwellMs,
@@ -9179,7 +9354,7 @@ var WebVR = forwardRef4(function WebVR2({
 });
 
 // src/use-pano-viewer.ts
-import { useMemo as useMemo12, useRef as useRef19 } from "react";
+import { useMemo as useMemo12, useRef as useRef20 } from "react";
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -9189,6 +9364,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(),
@@ -9256,14 +9432,14 @@ function createPanoViewerHandle(ref) {
   };
 }
 function usePanoViewer() {
-  const ref = useRef19(null);
+  const ref = useRef20(null);
   const handle = useMemo12(() => createPanoViewerHandle(ref), []);
   return useMemo12(() => ({ ref, ...handle }), [handle]);
 }
 
 // src/sphere.tsx
 import { useThree as useThree13 } from "@react-three/fiber";
-import { useEffect as useEffect20, useMemo as useMemo14, useRef as useRef21, useState as useState9 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo14, useRef as useRef22, useState as useState9 } from "react";
 import {
   BackSide as BackSide2,
   LinearFilter,
@@ -9296,7 +9472,7 @@ function resolveUrlAgainstFile(fileUrl, path) {
 }
 
 // src/pano-filter/pano-basic-material.tsx
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo13, useRef as useRef20 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo13, useRef as useRef21 } from "react";
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -9447,7 +9623,7 @@ diffuseColor.rgb = mix(diffuseColor.rgb, applyPanoFilter(diffuseColor.rgb), clam
 }
 
 // src/pano-filter/pano-basic-material.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function PanoBasicMaterial({
   map,
   side,
@@ -9456,9 +9632,9 @@ function PanoBasicMaterial({
   toneMapped = false
 }) {
   const snapshot = usePanoFilterSnapshot();
-  const materialRef = useRef20(null);
-  const intensityRef = useRef20(snapshot.intensity);
-  const intensityUniformRef = useRef20(null);
+  const materialRef = useRef21(null);
+  const intensityRef = useRef21(snapshot.intensity);
+  const intensityUniformRef = useRef21(null);
   intensityRef.current = snapshot.intensity;
   const active = isPanoFilterActive(snapshot);
   const preset = snapshot.preset;
@@ -9494,7 +9670,7 @@ function PanoBasicMaterial({
       intensityUniformRef.current.value = snapshot.intensity;
     }
   }, [snapshot.intensity]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "meshBasicMaterial",
     {
       ref: materialRef,
@@ -9510,14 +9686,14 @@ function PanoBasicMaterial({
 }
 
 // src/sphere.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
   const [texture, setTexture] = useState9(null);
-  const onLoadRef = useRef21(onLoad);
-  const onErrorRef = useRef21(onError);
+  const onLoadRef = useRef22(onLoad);
+  const onErrorRef = useRef22(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect20(() => {
+  useEffect21(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -9556,7 +9732,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  useEffect20(
+  useEffect21(
     () => () => {
       texture?.dispose();
     },
@@ -9595,11 +9771,11 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = useRef21(false);
-  useEffect20(() => {
+  const readyRef = useRef22(false);
+  useEffect21(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -9615,8 +9791,8 @@ function Sphere({
       rotation: [0, MathUtils5.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ jsx15("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx16(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -9633,11 +9809,11 @@ function Sphere({
 import { useThree as useThree14 } from "@react-three/fiber";
 import {
   useCallback as useCallback9,
-  useContext as useContext20,
-  useEffect as useEffect21,
+  useContext as useContext21,
+  useEffect as useEffect22,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo15,
-  useRef as useRef22,
+  useRef as useRef23,
   useState as useState10
 } from "react";
 import {
@@ -9650,7 +9826,7 @@ import {
   TextureLoader as TextureLoader2,
   VideoTexture
 } from "three";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -9736,9 +9912,9 @@ function applyEquirectangularLayout(texture, anisotropy) {
 function usePosterTexture(poster, onError) {
   const gl = useThree14((state) => state.gl);
   const [texture, setTexture] = useState10(null);
-  const onErrorRef = useRef22(onError);
+  const onErrorRef = useRef23(onError);
   onErrorRef.current = onError;
-  useEffect21(() => {
+  useEffect22(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -9775,7 +9951,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  useEffect21(
+  useEffect22(
     () => () => {
       texture?.dispose();
     },
@@ -9832,9 +10008,10 @@ function PanoVideo({
   onVariantChange,
   onTrackChange
 }) {
+  usePanoMediaActivationIntent(autoPlay);
   const gl = useThree14((state) => state.gl);
-  const host = useContext20(PanoVideoHostContext);
-  const overlay = useContext20(PanoChromeOverlayContext);
+  const host = useContext21(PanoVideoHostContext);
+  const overlay = useContext21(PanoChromeOverlayContext);
   const variants = useMemo15(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
@@ -9854,17 +10031,17 @@ function PanoVideo({
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
   const [ready, setReady] = useState10(false);
-  const autoPlayRef = useRef22(autoPlay);
+  const autoPlayRef = useRef23(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = useRef22(false);
-  const captionAppearanceOverrideRef = useRef22(
+  const blockedRef = useRef23(false);
+  const captionAppearanceOverrideRef = useRef23(
     {}
   );
-  const mediaCapabilitiesRef = useRef22({
+  const mediaCapabilitiesRef = useRef23({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = useRef22(null);
+  const storeRef = useRef23(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -9874,7 +10051,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = useRef22({
+  const actionsRef = useRef23({
     play: async () => {
     },
     pause: () => {
@@ -9894,12 +10071,12 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = useRef22(onLoad);
-  const onErrorRef = useRef22(onError);
-  const onPlaybackStateChangeRef = useRef22(onPlaybackStateChange);
-  const onEndedRef = useRef22(onEnded);
-  const onVariantChangeRef = useRef22(onVariantChange);
-  const onTrackChangeRef = useRef22(onTrackChange);
+  const onLoadRef = useRef23(onLoad);
+  const onErrorRef = useRef23(onError);
+  const onPlaybackStateChangeRef = useRef23(onPlaybackStateChange);
+  const onEndedRef = useRef23(onEnded);
+  const onVariantChangeRef = useRef23(onVariantChange);
+  const onTrackChangeRef = useRef23(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
@@ -9923,7 +10100,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  useEffect21(
+  useEffect22(
     () => () => {
       if (!resource) {
         return;
@@ -9938,13 +10115,13 @@ function PanoVideo({
     },
     [resource]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -10097,10 +10274,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  useEffect21(() => {
+  useEffect22(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -10157,7 +10334,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!resource) {
       return;
     }
@@ -10247,7 +10424,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!resource) {
       return;
     }
@@ -10258,9 +10435,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]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!resource) {
       return;
     }
@@ -10310,7 +10494,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!resource) {
       return;
     }
@@ -10345,7 +10529,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -10363,8 +10547,8 @@ function PanoVideo({
         rotation: [0, MathUtils6.degToRad(90 + yawOffset), 0],
         visible,
         children: [
-          /* @__PURE__ */ jsx16("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ jsx17(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -10375,7 +10559,7 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx16(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ jsx17(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
@@ -10384,10 +10568,10 @@ import { useFrame as useFrame12, useThree as useThree19 } from "@react-three/fib
 import {
   Fragment as Fragment6,
   useCallback as useCallback10,
-  useContext as useContext22,
-  useEffect as useEffect26,
+  useContext as useContext23,
+  useEffect as useEffect27,
   useMemo as useMemo20,
-  useRef as useRef26,
+  useRef as useRef27,
   useState as useState12
 } from "react";
 import {
@@ -10444,7 +10628,7 @@ function isSnapshotTransition(preset) {
 
 // src/scene-transitions/particle-overlay.tsx
 import { useFrame as useFrame9, useThree as useThree15 } from "@react-three/fiber";
-import { useEffect as useEffect22, useMemo as useMemo16, useRef as useRef23 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo16, useRef as useRef24 } from "react";
 import {
   DoubleSide as DoubleSide2,
   InstancedBufferAttribute,
@@ -10507,7 +10691,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -10584,10 +10768,10 @@ function ParticleOverlay({
   onFinish
 }) {
   const { camera } = useThree15();
-  const meshRef = useRef23(null);
-  const startRef = useRef23(null);
-  const finishedRef = useRef23(false);
-  const directionRef = useRef23(new Vector39());
+  const meshRef = useRef24(null);
+  const startRef = useRef24(null);
+  const finishedRef = useRef24(false);
+  const directionRef = useRef24(new Vector39());
   const geometry = useMemo16(() => createParticleGeometry(), []);
   const material = useMemo16(
     () => new ShaderMaterial2({
@@ -10605,9 +10789,9 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  useEffect22(() => () => geometry.dispose(), [geometry]);
-  useEffect22(() => () => material.dispose(), [material]);
-  useEffect22(() => {
+  useEffect23(() => () => geometry.dispose(), [geometry]);
+  useEffect23(() => () => material.dispose(), [material]);
+  useEffect23(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -10629,7 +10813,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "mesh",
     {
       ref: meshRef,
@@ -10643,7 +10827,7 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 import { useFrame as useFrame10, useThree as useThree16 } from "@react-three/fiber";
-import { useEffect as useEffect23, useMemo as useMemo17, useRef as useRef24 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo17, useRef as useRef25 } from "react";
 import { Vector3 as Vector310 } from "three";
 
 // src/scene-transitions/snapshot-shaders.ts
@@ -10923,7 +11107,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -10932,18 +11116,18 @@ function SnapshotOverlay({
   onFinish
 }) {
   const { camera, gl } = useThree16();
-  const meshRef = useRef24(null);
-  const startRef = useRef24(null);
-  const finishedRef = useRef24(false);
-  const directionRef = useRef24(new Vector310());
+  const meshRef = useRef25(null);
+  const startRef = useRef25(null);
+  const finishedRef = useRef25(false);
+  const directionRef = useRef25(new Vector310());
   const material = useMemo17(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  useEffect23(() => () => material?.dispose(), [material]);
-  useEffect23(() => {
+  useEffect24(() => () => material?.dispose(), [material]);
+  useEffect24(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
@@ -10973,20 +11157,20 @@ function SnapshotOverlay({
     return null;
   }
   return /* @__PURE__ */ jsxs11("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx18("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx18("primitive", { attach: "material", object: material })
+    /* @__PURE__ */ jsx19("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx19("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ jsx19(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ jsx20(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -11014,7 +11198,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ jsx19(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ jsx20(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -11026,9 +11210,9 @@ function TransitionOverlay(props) {
 // src/tile/texture-manager-context.tsx
 import { useThree as useThree17 } from "@react-three/fiber";
 import {
-  createContext as createContext13,
-  useContext as useContext21,
-  useEffect as useEffect24,
+  createContext as createContext14,
+  useContext as useContext22,
+  useEffect as useEffect25,
   useMemo as useMemo18
 } from "react";
 
@@ -11259,8 +11443,8 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var TileTextureManagerContext = createContext13(
+import { jsx as jsx21 } from "react/jsx-runtime";
+var TileTextureManagerContext = createContext14(
   null
 );
 function TileTextureManagerProvider({
@@ -11279,23 +11463,23 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  useEffect24(() => {
+  useEffect25(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ jsx20(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsx21(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return useContext21(TileTextureManagerContext);
+  return useContext22(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
 import { useFrame as useFrame11, useThree as useThree18 } from "@react-three/fiber";
 import {
   memo,
-  useEffect as useEffect25,
+  useEffect as useEffect26,
   useMemo as useMemo19,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState11
 } from "react";
 import {
@@ -11492,7 +11676,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
@@ -11502,9 +11686,9 @@ var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
 var SHARED_TILE_GEOMETRY = new PlaneGeometry4(1, 1);
 function usePreviewTexture(url, anisotropy, onError) {
   const [texture, setTexture] = useState11(null);
-  const onErrorRef = useRef25(onError);
+  const onErrorRef = useRef26(onError);
   onErrorRef.current = onError;
-  useEffect25(() => {
+  useEffect26(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -11541,7 +11725,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  useEffect25(
+  useEffect26(
     () => () => {
       texture?.dispose();
     },
@@ -11572,21 +11756,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  useEffect25(
+  useEffect26(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11602,7 +11786,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx21(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx22(
     PreviewFace,
     {
       face,
@@ -11620,7 +11804,7 @@ function useManagedTexture(manager, key, url, address) {
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  useEffect25(
+  useEffect26(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -11647,14 +11831,14 @@ var TileMesh = memo(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx21("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx22(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11671,7 +11855,7 @@ var TileLayerMeshes = memo(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx21(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx22(
     TileMesh,
     {
       address,
@@ -11855,9 +12039,9 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = useRef25(onLoadProgress);
-  const errorRef = useRef25(onTileError);
-  const levelChangeRef = useRef25(onLevelChange);
+  const progressRef = useRef26(onLoadProgress);
+  const errorRef = useRef26(onTileError);
+  const levelChangeRef = useRef26(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
@@ -11882,7 +12066,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  useEffect25(() => {
+  useEffect26(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -11892,11 +12076,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = useRef25(false);
-  useEffect25(() => {
+  const readyRef = useRef26(false);
+  useEffect26(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -11912,23 +12096,23 @@ function Tile({
     [baseUrl, resolveTileUrl, template]
   );
   const [layers, setLayers] = useState11([]);
-  const layerTokenRef = useRef25("");
-  const currentLevelRef = useRef25(1);
-  const lastUpdateAtRef = useRef25(-Infinity);
-  const visibilityDirtyRef = useRef25(true);
-  const lastVisibilityQuaternionRef = useRef25(camera.quaternion.clone());
-  const lastVisibilityFovRef = useRef25(Number.NaN);
-  const lastViewportRef = useRef25({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = useRef25(new Frustum());
-  const projectionMatrixRef = useRef25(new Matrix4());
-  const visibilityCameraRef = useRef25(new PerspectiveCamera4());
-  useEffect25(() => {
+  const layerTokenRef = useRef26("");
+  const currentLevelRef = useRef26(1);
+  const lastUpdateAtRef = useRef26(-Infinity);
+  const visibilityDirtyRef = useRef26(true);
+  const lastVisibilityQuaternionRef = useRef26(camera.quaternion.clone());
+  const lastVisibilityFovRef = useRef26(Number.NaN);
+  const lastViewportRef = useRef26({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = useRef26(new Frustum());
+  const projectionMatrixRef = useRef26(new Matrix4());
+  const visibilityCameraRef = useRef26(new PerspectiveCamera4());
+  useEffect26(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -12009,14 +12193,14 @@ function Tile({
     commitLayers(nextLayers);
   });
   return /* @__PURE__ */ jsxs12("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx21(
+    previewTexture ? /* @__PURE__ */ jsx22(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx21(
+    layers.map((layer) => /* @__PURE__ */ jsx22(
       TileLayerMeshes,
       {
         layer,
@@ -12029,7 +12213,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function SceneSource({
   scene,
   visible,
@@ -12042,7 +12226,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         Sphere,
         {
           src: scene.src,
@@ -12055,7 +12239,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         Tile,
         {
           ...tileProps,
@@ -12079,9 +12263,9 @@ function SnapshotCapture({
   onCaptured
 }) {
   const { camera, gl, scene, size } = useThree19();
-  const capturedRequestRef = useRef26(0);
-  const renderTargetRef = useRef26(null);
-  useEffect26(
+  const capturedRequestRef = useRef27(0);
+  const renderTargetRef = useRef27(null);
+  useEffect27(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
@@ -12137,7 +12321,7 @@ function ScenesController({
   snapshotMaxPixels = 3686400,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = useContext22(PanoramaViewContext);
+  const controlsRef = useContext23(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
   const transition = useMemo20(
     () => resolveTransition(transitionInput),
@@ -12160,13 +12344,13 @@ function ScenesController({
   const [transitionRunId, setTransitionRunId] = useState12(0);
   const [snapshot, setSnapshot] = useState12(null);
   const [recoveryKey, setRecoveryKey] = useState12(0);
-  const requestedSceneIdRef = useRef26(activeSceneId);
-  const captureReasonRef = useRef26("start");
-  const interactionReleaseRef = useRef26(null);
-  const slotsRef = useRef26(slots);
-  const phaseRef = useRef26(phase);
-  const liveSlotRef = useRef26(liveSlot);
-  const transitionFromRef = useRef26(initialScene);
+  const requestedSceneIdRef = useRef27(activeSceneId);
+  const captureReasonRef = useRef27("start");
+  const interactionReleaseRef = useRef27(null);
+  const slotsRef = useRef27(slots);
+  const phaseRef = useRef27(phase);
+  const liveSlotRef = useRef27(liveSlot);
+  const transitionFromRef = useRef27(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
@@ -12191,7 +12375,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  useEffect26(() => {
+  useEffect27(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -12293,12 +12477,12 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  useEffect26(() => () => {
+  useEffect27(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
   const { gl } = useThree19();
-  useEffect26(() => {
+  useEffect27(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -12323,7 +12507,7 @@ function ScenesController({
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
   return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -12335,7 +12519,7 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         SceneSource,
         {
           scene: source,
@@ -12351,7 +12535,7 @@ function ScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ jsx22(
+    snapshotVisible ? /* @__PURE__ */ jsx23(
       TransitionOverlay,
       {
         snapshot,
@@ -12388,13 +12572,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = useRef26(scenes);
+  const scenesRef = useRef27(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = useRef26(resolvedId);
+  const resolvedIdRef = useRef27(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = useContext22(ScenesHostContext);
-  const phaseRef = useRef26("idle");
-  useEffect26(() => {
+  const host = useContext23(ScenesHostContext);
+  const phaseRef = useRef27("idle");
+  useEffect27(() => {
     if (!host) {
       return;
     }
@@ -12444,12 +12628,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         ScenesController,
         {
           ...rest,
@@ -12464,7 +12648,7 @@ function Scenes({
 
 // src/hotspot/image-hotspot.tsx
 import { useThree as useThree21 } from "@react-three/fiber";
-import { useEffect as useEffect29, useRef as useRef28, useState as useState15 } from "react";
+import { useEffect as useEffect30, useRef as useRef29, useState as useState15 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping3,
   LinearFilter as LinearFilter6,
@@ -12476,11 +12660,11 @@ import {
 // src/hotspot/hotspot-anchor.tsx
 import { useFrame as useFrame13, useThree as useThree20 } from "@react-three/fiber";
 import {
-  useContext as useContext24,
-  useEffect as useEffect28,
+  useContext as useContext25,
+  useEffect as useEffect29,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo22,
-  useRef as useRef27,
+  useRef as useRef28,
   useState as useState14
 } from "react";
 import {
@@ -12497,16 +12681,16 @@ import {
 } from "three";
 
 // src/hotspot/hotspot-tooltip.tsx
-import { useEffect as useEffect27, useMemo as useMemo21, useState as useState13 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo21, useState as useState13 } from "react";
 
 // src/webvr/stereo-html.tsx
 import { Html } from "@react-three/drei";
-import { useContext as useContext23, useSyncExternalStore as useSyncExternalStore6 } from "react";
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useContext as useContext24, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function useFallbackStereoView() {
-  const runtime = useContext23(WebVRRuntimeContext);
+  const runtime = useContext24(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = useSyncExternalStore6(
+  const fallback = useSyncExternalStore7(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -12527,10 +12711,10 @@ function stereoCalculatePosition(eye, stereoView) {
 function PanoHtml({ children, ...htmlProps }) {
   const stereoView = useFallbackStereoView();
   if (!stereoView) {
-    return /* @__PURE__ */ jsx23(Html, { ...htmlProps, children });
+    return /* @__PURE__ */ jsx24(Html, { ...htmlProps, children });
   }
   return /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       Html,
       {
         ...htmlProps,
@@ -12538,7 +12722,7 @@ function PanoHtml({ children, ...htmlProps }) {
         children
       }
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       Html,
       {
         ...htmlProps,
@@ -12551,7 +12735,7 @@ function PanoHtml({ children, ...htmlProps }) {
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -12621,7 +12805,7 @@ function HotspotTooltip({
   appearance
 }) {
   const [imageFailed, setImageFailed] = useState13(false);
-  useEffect27(() => {
+  useEffect28(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
@@ -12648,14 +12832,14 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ jsx24(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx25(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs15(
     "div",
     {
       className: "pano-hotspot-tooltip",
       role: "tooltip",
       style: bubbleStyle,
       children: [
-        showImage ? /* @__PURE__ */ jsx24(
+        showImage ? /* @__PURE__ */ jsx25(
           "img",
           {
             alt: content.imageAlt ?? content.text ?? "",
@@ -12664,14 +12848,14 @@ function HotspotTooltip({
             src: content.image
           }
         ) : null,
-        content.text ? /* @__PURE__ */ jsx24("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
+        content.text ? /* @__PURE__ */ jsx25("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
       ]
     }
   ) });
 }
 
 // src/hotspot/hotspot-anchor.tsx
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -13008,14 +13192,14 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = useContext24(PanoramaViewContext);
-  const eventBus = useContext24(PanoEventBusContext);
+  const controlsRef = useContext25(PanoramaViewContext);
+  const eventBus = useContext25(PanoEventBusContext);
   const cursorApi = usePanoCursor();
   const { camera, size } = useThree20();
-  const groupRef = useRef27(null);
-  const tooltipAnchorRef = useRef27(null);
-  const dragStateRef = useRef27(null);
-  const suppressNextClickRef = useRef27(false);
+  const groupRef = useRef28(null);
+  const tooltipAnchorRef = useRef28(null);
+  const dragStateRef = useRef28(null);
+  const suppressNextClickRef = useRef28(false);
   const [hovered, setHovered] = useState14(false);
   const [dragging, setDragging] = useState14(false);
   const [pinned, setPinned] = useState14(false);
@@ -13072,14 +13256,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  useEffect28(
+  useEffect29(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  useEffect28(() => {
+  useEffect29(() => {
     if (!cursorApi) {
       return;
     }
@@ -13101,14 +13285,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  useEffect28(
+  useEffect29(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  useEffect28(() => () => focusGeometry.dispose(), [focusGeometry]);
-  useEffect28(() => {
+  useEffect29(() => () => focusGeometry.dispose(), [focusGeometry]);
+  useEffect29(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -13117,12 +13301,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (acceptsPointer) {
       return;
     }
@@ -13311,18 +13495,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx25(
+        focused ? focusContent ?? /* @__PURE__ */ jsx26(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx25("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx26("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx25("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx25(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx26("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx26(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -13343,7 +13527,7 @@ import {
   MeshBasicMaterial,
   Vector2 as Vector26
 } from "three";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new Vector26();
 var RAYCAST_HITS = [];
@@ -13446,8 +13630,8 @@ function HotspotPlane({
   opacity
 }) {
   return /* @__PURE__ */ jsxs17("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ jsx26("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx27(
       "meshBasicMaterial",
       {
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
@@ -13463,15 +13647,15 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = useThree21((state) => state.gl);
   const [texture, setTexture] = useState15(null);
-  const onLoadRef = useRef28(onLoad);
-  const onErrorRef = useRef28(onError);
+  const onLoadRef = useRef29(onLoad);
+  const onErrorRef = useRef29(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect29(() => {
+  useEffect30(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13509,7 +13693,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  useEffect29(
+  useEffect30(
     () => () => {
       texture?.dispose();
     },
@@ -13527,11 +13711,11 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx27(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx27(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx28(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx28(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useEffect as useEffect30, useMemo as useMemo23, useRef as useRef30 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo23, useRef as useRef31 } from "react";
 import {
   BufferGeometry,
   DoubleSide as DoubleSide5,
@@ -13546,13 +13730,13 @@ import {
 // src/hotspot/hotspot-stroke-line.tsx
 import { Line } from "@react-three/drei";
 import { useFrame as useFrame14, useThree as useThree22 } from "@react-three/fiber";
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef29 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef30 } from "react";
 import {
   MathUtils as MathUtils8,
   PerspectiveCamera as PerspectiveCamera6,
   Vector3 as Vector314
 } from "three";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var LINE_WORLD_POSITION = new Vector314();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
@@ -13583,7 +13767,7 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = useRef29(null);
+  const lineRef = useRef30(null);
   const { camera, size } = useThree22();
   const dash = resolveDash(dashSize, gapSize);
   useLayoutEffect5(() => {
@@ -13598,7 +13782,7 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     Line,
     {
       ref: lineRef,
@@ -13620,7 +13804,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -13888,12 +14072,12 @@ function PolygonHotspot({
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef30(null);
+  const startVerticesRef = useRef31(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  useEffect30(() => {
+  useEffect31(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  useEffect30(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  useEffect31(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -13923,7 +14107,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx29(
+      focusContent: /* @__PURE__ */ jsx30(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -13945,7 +14129,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx29("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx30(
           "meshBasicMaterial",
           {
             color: fill,
@@ -13955,7 +14139,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -13973,14 +14157,14 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useEffect as useEffect31, useMemo as useMemo24, useRef as useRef31 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo24, useRef as useRef32 } from "react";
 import {
   MathUtils as MathUtils9,
   Matrix4 as Matrix44,
   Quaternion as Quaternion5,
   Vector3 as Vector316
 } from "three";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -14105,8 +14289,8 @@ function PolylineHotspot({
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef31(null);
-  useEffect31(() => {
+  const startVerticesRef = useRef32(null);
+  useEffect32(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -14120,7 +14304,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14134,7 +14318,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx30(
+      focusContent: /* @__PURE__ */ jsx31(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14155,7 +14339,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14172,7 +14356,7 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect32, useRef as useRef32, useState as useState16 } from "react";
+import { useEffect as useEffect33, useRef as useRef33, useState as useState16 } from "react";
 import {
   CanvasTexture,
   ClampToEdgeWrapping as ClampToEdgeWrapping4,
@@ -14180,7 +14364,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter4,
   SRGBColorSpace as SRGBColorSpace6
 } from "three";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -14370,11 +14554,11 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
   const [texture, setTexture] = useState16(null);
-  const onLoadRef = useRef32(onLoad);
-  const onErrorRef = useRef32(onError);
+  const onLoadRef = useRef33(onLoad);
+  const onErrorRef = useRef33(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect32(() => {
+  useEffect33(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -14400,20 +14584,20 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ jsx31(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx31(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx31(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx32(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx31(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx32(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
 import { useFrame as useFrame15, useThree as useThree23 } from "@react-three/fiber";
-import { useEffect as useEffect33, useRef as useRef33, useState as useState17 } from "react";
+import { useEffect as useEffect34, useRef as useRef34, useState as useState17 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
   LinearFilter as LinearFilter8,
@@ -14421,7 +14605,7 @@ import {
   SRGBColorSpace as SRGBColorSpace7,
   TextureLoader as TextureLoader6
 } from "three";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -14437,11 +14621,11 @@ function useSpriteTexture({
 }) {
   const gl = useThree23((state) => state.gl);
   const [texture, setTexture] = useState17(null);
-  const onErrorRef = useRef33(onError);
-  const onLoadProgressRef = useRef33(onLoadProgress);
+  const onErrorRef = useRef34(onError);
+  const onLoadProgressRef = useRef34(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  useEffect33(() => {
+  useEffect34(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14482,7 +14666,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  useEffect33(
+  useEffect34(
     () => () => {
       texture?.dispose();
     },
@@ -14512,23 +14696,23 @@ function SequenceHotspot({
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
   const [frameIndex, setFrameIndex] = useState17(0);
-  const elapsedRef = useRef33(0);
-  const frameIndexRef = useRef33(0);
-  const endedRef = useRef33(false);
-  const lastPlaybackStateRef = useRef33(null);
-  const onFrameChangeRef = useRef33(onFrameChange);
-  const onPlaybackStateChangeRef = useRef33(onPlaybackStateChange);
-  const onEndedRef = useRef33(onEnded);
+  const elapsedRef = useRef34(0);
+  const frameIndexRef = useRef34(0);
+  const endedRef = useRef34(false);
+  const lastPlaybackStateRef = useRef34(null);
+  const onFrameChangeRef = useRef34(onFrameChange);
+  const onPlaybackStateChangeRef = useRef34(onPlaybackStateChange);
+  const onEndedRef = useRef34(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  useEffect33(() => {
+  useEffect34(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!texture) {
       return;
     }
@@ -14542,13 +14726,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!texture) {
       return;
     }
@@ -14597,12 +14781,12 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
 import { useThree as useThree24 } from "@react-three/fiber";
-import { useEffect as useEffect34, useRef as useRef34, useState as useState18 } from "react";
+import { useEffect as useEffect35, useRef as useRef35, useState as useState18 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
   LinearFilter as LinearFilter9,
@@ -14611,7 +14795,7 @@ import {
   TextureLoader as TextureLoader7,
   VideoTexture as VideoTexture2
 } from "three";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -14621,9 +14805,9 @@ function clampVolume2(volume) {
 function usePosterTexture2(id, poster, onError) {
   const gl = useThree24((state) => state.gl);
   const [texture, setTexture] = useState18(null);
-  const onErrorRef = useRef34(onError);
+  const onErrorRef = useRef35(onError);
   onErrorRef.current = onError;
-  useEffect34(() => {
+  useEffect35(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -14660,7 +14844,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  useEffect34(
+  useEffect35(
     () => () => {
       texture?.dispose();
     },
@@ -14679,13 +14863,13 @@ function useVideoResource({
   src
 }) {
   const [resource, setResource] = useState18(null);
-  const onEndedRef = useRef34(onEnded);
-  const onErrorRef = useRef34(onError);
-  const onPlaybackStateChangeRef = useRef34(onPlaybackStateChange);
+  const onEndedRef = useRef35(onEnded);
+  const onErrorRef = useRef35(onError);
+  const onPlaybackStateChangeRef = useRef35(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect34(() => {
+  useEffect35(() => {
     if (!src) {
       setResource(null);
       return;
@@ -14695,7 +14879,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 VideoTexture2(video);
     texture.colorSpace = SRGBColorSpace8;
@@ -14775,6 +14964,7 @@ function VideoHotspot({
   onError,
   ...anchorProps
 }) {
+  usePanoMediaActivationIntent(playing);
   const resource = useVideoResource({
     crossOrigin,
     id,
@@ -14786,11 +14976,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = useRef34(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef34(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef35(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef35(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect34(() => {
+  useEffect35(() => {
     if (!resource) {
       return;
     }
@@ -14798,9 +14988,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]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (!resource) {
       return;
     }
@@ -14823,12 +15020,12 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx34(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
 import { useFrame as useFrame16, useThree as useThree25 } from "@react-three/fiber";
-import { useEffect as useEffect35, useRef as useRef35, useState as useState19 } from "react";
+import { useEffect as useEffect36, useRef as useRef36, useState as useState19 } from "react";
 import {
   CanvasTexture as CanvasTexture2,
   ClampToEdgeWrapping as ClampToEdgeWrapping7,
@@ -14837,7 +15034,7 @@ import {
   SRGBColorSpace as SRGBColorSpace9,
   TextureLoader as TextureLoader8
 } from "three";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -14902,7 +15099,7 @@ function createSpeakerTexture(state) {
 }
 function useSpeakerTextures(enabled) {
   const [textures, setTextures] = useState19({ playing: null, stopped: null });
-  useEffect35(() => {
+  useEffect36(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -14920,9 +15117,9 @@ function useSpeakerTextures(enabled) {
 function useIconTexture(icon, enabled, onError, id) {
   const gl = useThree25((state) => state.gl);
   const [texture, setTexture] = useState19(null);
-  const onErrorRef = useRef35(onError);
+  const onErrorRef = useRef36(onError);
   onErrorRef.current = onError;
-  useEffect35(() => {
+  useEffect36(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -14959,7 +15156,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  useEffect35(
+  useEffect36(
     () => () => {
       texture?.dispose();
     },
@@ -14979,12 +15176,12 @@ function useAudioHowl({
   src
 }) {
   const [howl, setHowl] = useState19(null);
-  const playingRef = useRef35(playing);
-  const loopRef = useRef35(loop ?? false);
-  const onEndedRef = useRef35(onEnded);
-  const onErrorRef = useRef35(onError);
-  const onPlaybackErrorRef = useRef35(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef35(onPlaybackStateChange);
+  const playingRef = useRef36(playing);
+  const loopRef = useRef36(loop ?? false);
+  const onEndedRef = useRef36(onEnded);
+  const onErrorRef = useRef36(onError);
+  const onPlaybackErrorRef = useRef36(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef36(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -14992,7 +15189,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  useEffect35(() => {
+  useEffect36(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -15029,7 +15226,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  useEffect35(() => {
+  useEffect36(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -15056,6 +15253,7 @@ function AudioHotspot({
   onError,
   ...anchorProps
 }) {
+  usePanoMediaActivationIntent(playing);
   const camera = useThree25((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
@@ -15072,15 +15270,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 = useRef35(playing);
+  const playingRef = useRef36(playing);
   playingRef.current = playing;
-  const mutedRef = useRef35(muted);
-  const volumeRef = useRef35(volume);
-  const rangeRef = useRef35(range);
+  const mutedRef = useRef36(muted);
+  const volumeRef = useRef36(volume);
+  const rangeRef = useRef36(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  useEffect35(() => {
+  useEffect36(() => {
     if (!howl) {
       return;
     }
@@ -15090,7 +15288,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -15121,11 +15319,11 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx34(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx35(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
-import { useEffect as useEffect36, useRef as useRef36, useState as useState20 } from "react";
+import { useEffect as useEffect37, useRef as useRef37, useState as useState20 } from "react";
 import {
   CanvasTexture as CanvasTexture3,
   ClampToEdgeWrapping as ClampToEdgeWrapping8,
@@ -15133,7 +15331,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter8,
   SRGBColorSpace as SRGBColorSpace10
 } from "three";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -15354,11 +15552,11 @@ function createTextTexture(text, width, height, style) {
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
   const [texture, setTexture] = useState20(null);
-  const onLoadRef = useRef36(onLoad);
-  const onErrorRef = useRef36(onError);
+  const onLoadRef = useRef37(onLoad);
+  const onErrorRef = useRef37(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect36(() => {
+  useEffect37(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -15451,13 +15649,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx35(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx36(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx36(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 import { Html as Html2 } from "@react-three/drei";
 import { DoubleSide as DoubleSide6 } from "three";
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -15524,8 +15722,8 @@ function IframeHotspot({
       width,
       children: [
         /* @__PURE__ */ jsxs19("mesh", { children: [
-          /* @__PURE__ */ jsx36("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ jsx37(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -15536,7 +15734,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           Html2,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -15551,7 +15749,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ jsx36(
+            children: /* @__PURE__ */ jsx37(
               "iframe",
               {
                 allow,