@ericchen1990/pano-view 2.3.0 → 2.4.0

package/dist/index.cjs

@@ -2305,7 +2305,30 @@ module.exports = __toCommonJS(index_exports);
 // src/pano-viewer.tsx
 var import_fiber10 = require("@react-three/fiber");
 var import_xr3 = require("@react-three/xr");
-var import_react22 = require("react");
+var import_react24 = require("react");
+
+// src/background-audio-host.ts
+var import_react = require("react");
+var BackgroundAudioHostContext = (0, import_react.createContext)(null);
+function createBackgroundAudioHost() {
+  return {
+    controller: null,
+    revision: 0,
+    listeners: /* @__PURE__ */ new Set()
+  };
+}
+function notifyBackgroundAudioHost(host) {
+  host.revision += 1;
+  for (const listener of host.listeners) {
+    listener();
+  }
+}
+function subscribeBackgroundAudioHost(host, listener) {
+  host.listeners.add(listener);
+  return () => {
+    host.listeners.delete(listener);
+  };
+}
 
 // src/cn.ts
 function cn(...values) {
@@ -2314,10 +2337,10 @@ function cn(...values) {
 
 // src/auto-rotate.tsx
 var import_fiber2 = require("@react-three/fiber");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/pano-event-bus.ts
-var import_react = require("react");
+var import_react2 = require("react");
 function createPanoEventBus() {
   const listeners = /* @__PURE__ */ new Map();
   return {
@@ -2346,12 +2369,12 @@ function createPanoEventBus() {
     }
   };
 }
-var PanoEventBusContext = (0, import_react.createContext)(null);
+var PanoEventBusContext = (0, import_react2.createContext)(null);
 
 // src/panorama-view-runtime.tsx
 var import_fiber = require("@react-three/fiber");
 var import_xr = require("@react-three/xr");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_three = require("three");
 var MAX_PITCH = 90;
 var BOUNCE_OVERSHOOT_PITCH = 12;
@@ -2362,7 +2385,7 @@ var DEFAULT_ROTATE_DAMPING = 14;
 var DEFAULT_ZOOM_DAMPING = 16;
 var DEFAULT_FRICTION_STOP = 0.01;
 var VIEW_SETTLE_EPSILON = 1e-3;
-var PanoramaViewContext = (0, import_react2.createContext)(null);
+var PanoramaViewContext = (0, import_react3.createContext)(null);
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -2384,36 +2407,36 @@ function resolveFrictionStop(value) {
 function viewsEqual(a, b) {
   return a.yaw === b.yaw && a.pitch === b.pitch && a.fov === b.fov;
 }
-var PanoramaViewRuntime = (0, import_react2.forwardRef)(function PanoramaViewRuntime2({ initialView, minFov, maxFov, options, eventBus }, ref) {
+var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRuntime2({ initialView, minFov, maxFov, options, eventBus }, ref) {
   const { camera, gl } = (0, import_fiber.useThree)();
   const xrSession = (0, import_xr.useXR)((state) => state.session);
-  const xrSessionRef = (0, import_react2.useRef)(xrSession);
-  const viewRef = (0, import_react2.useRef)({ ...initialView });
-  const targetViewRef = (0, import_react2.useRef)({ ...initialView });
-  const initialViewRef = (0, import_react2.useRef)({ ...initialView });
-  const yawVelocityRef = (0, import_react2.useRef)(0);
-  const pitchVelocityRef = (0, import_react2.useRef)(0);
-  const zoomVelocityRef = (0, import_react2.useRef)(0);
-  const dirtyRef = (0, import_react2.useRef)(true);
-  const settledRef = (0, import_react2.useRef)(false);
-  const interactingRef = (0, import_react2.useRef)(false);
-  const mouseActiveRef = (0, import_react2.useRef)(false);
-  const touchActiveRef = (0, import_react2.useRef)(false);
-  const interactionLockCountRef = (0, import_react2.useRef)(0);
-  const keyboardActiveRef = (0, import_react2.useRef)(false);
-  const gyroActiveRef = (0, import_react2.useRef)(false);
-  const gyroPoseRef = (0, import_react2.useRef)({ yaw: 0, pitch: 0, roll: 0 });
-  const gyroOffsetRef = (0, import_react2.useRef)({ yaw: 0, pitch: 0 });
-  const gyroTouchModeRef = (0, import_react2.useRef)("full");
-  const cameraRollRef = (0, import_react2.useRef)(0);
-  const lastVelocitySampleAtRef = (0, import_react2.useRef)(null);
-  const optionsRef = (0, import_react2.useRef)(options);
-  const eventBusRef = (0, import_react2.useRef)(eventBus);
-  const lastEmittedViewRef = (0, import_react2.useRef)(null);
-  const eulerRef = (0, import_react2.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
-  const xrEulerRef = (0, import_react2.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
-  const minFovRef = (0, import_react2.useRef)(minFov);
-  const maxFovRef = (0, import_react2.useRef)(maxFov);
+  const xrSessionRef = (0, import_react3.useRef)(xrSession);
+  const viewRef = (0, import_react3.useRef)({ ...initialView });
+  const targetViewRef = (0, import_react3.useRef)({ ...initialView });
+  const initialViewRef = (0, import_react3.useRef)({ ...initialView });
+  const yawVelocityRef = (0, import_react3.useRef)(0);
+  const pitchVelocityRef = (0, import_react3.useRef)(0);
+  const zoomVelocityRef = (0, import_react3.useRef)(0);
+  const dirtyRef = (0, import_react3.useRef)(true);
+  const settledRef = (0, import_react3.useRef)(false);
+  const interactingRef = (0, import_react3.useRef)(false);
+  const mouseActiveRef = (0, import_react3.useRef)(false);
+  const touchActiveRef = (0, import_react3.useRef)(false);
+  const interactionLockCountRef = (0, import_react3.useRef)(0);
+  const keyboardActiveRef = (0, import_react3.useRef)(false);
+  const gyroActiveRef = (0, import_react3.useRef)(false);
+  const gyroPoseRef = (0, import_react3.useRef)({ yaw: 0, pitch: 0, roll: 0 });
+  const gyroOffsetRef = (0, import_react3.useRef)({ yaw: 0, pitch: 0 });
+  const gyroTouchModeRef = (0, import_react3.useRef)("full");
+  const cameraRollRef = (0, import_react3.useRef)(0);
+  const lastVelocitySampleAtRef = (0, import_react3.useRef)(null);
+  const optionsRef = (0, import_react3.useRef)(options);
+  const eventBusRef = (0, import_react3.useRef)(eventBus);
+  const lastEmittedViewRef = (0, import_react3.useRef)(null);
+  const eulerRef = (0, import_react3.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
+  const xrEulerRef = (0, import_react3.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
+  const minFovRef = (0, import_react3.useRef)(minFov);
+  const maxFovRef = (0, import_react3.useRef)(maxFov);
   optionsRef.current = options;
   eventBusRef.current = eventBus;
   xrSessionRef.current = xrSession;
@@ -2556,7 +2579,7 @@ var PanoramaViewRuntime = (0, import_react2.forwardRef)(function PanoramaViewRun
     }
     return true;
   };
-  (0, import_react2.useImperativeHandle)(
+  (0, import_react3.useImperativeHandle)(
     ref,
     () => ({
       getView: () => ({ ...viewRef.current }),
@@ -2646,7 +2669,7 @@ var PanoramaViewRuntime = (0, import_react2.forwardRef)(function PanoramaViewRun
     }),
     []
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     initialViewRef.current = { ...initialView };
     setView(initialView);
   }, [initialView.fov, initialView.pitch, initialView.yaw]);
@@ -2775,16 +2798,16 @@ function AutoRotate({
   acceleration = DEFAULT_AUTO_ROTATE_ACCELERATION,
   startDelay = DEFAULT_AUTO_ROTATE_START_DELAY
 }) {
-  const controlsRef = (0, import_react3.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react3.useContext)(PanoEventBusContext);
-  const elapsedRef = (0, import_react3.useRef)(0);
-  const rotationSpeedRef = (0, import_react3.useRef)(0);
-  const rotatingRef = (0, import_react3.useRef)(false);
-  const yawAccumulatedRef = (0, import_react3.useRef)(0);
+  const controlsRef = (0, import_react4.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react4.useContext)(PanoEventBusContext);
+  const elapsedRef = (0, import_react4.useRef)(0);
+  const rotationSpeedRef = (0, import_react4.useRef)(0);
+  const rotatingRef = (0, import_react4.useRef)(false);
+  const yawAccumulatedRef = (0, import_react4.useRef)(0);
   if (!controlsRef) {
     throw new Error("<AutoRotate> must be rendered inside <PanoViewer>.");
   }
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     elapsedRef.current = 0;
     rotationSpeedRef.current = 0;
     yawAccumulatedRef.current = 0;
@@ -2839,9 +2862,9 @@ function AutoRotate({
 }
 
 // src/control-claims.ts
-var import_react4 = require("react");
-var ControlClaimsContext = (0, import_react4.createContext)(null);
-var DefaultControlChannelContext = (0, import_react4.createContext)(false);
+var import_react5 = require("react");
+var ControlClaimsContext = (0, import_react5.createContext)(null);
+var DefaultControlChannelContext = (0, import_react5.createContext)(false);
 var CHANNEL_COMPONENT = {
   mouse: "MouseControls",
   touch: "TouchControls",
@@ -2860,8 +2883,8 @@ function isProduction() {
   return nodeEnv === "production";
 }
 function useClaimControlChannel(channel) {
-  const claims = (0, import_react4.useContext)(ControlClaimsContext);
-  const isDefault = (0, import_react4.useContext)(DefaultControlChannelContext);
+  const claims = (0, import_react5.useContext)(ControlClaimsContext);
+  const isDefault = (0, import_react5.useContext)(DefaultControlChannelContext);
   if (!claims || isDefault) {
     return;
   }
@@ -2922,9 +2945,9 @@ function subscribeFullscreenChange(onChange) {
 }
 
 // src/hotspot/accessibility.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var HotspotAccessibilityContext = (0, import_react5.createContext)(null);
+var HotspotAccessibilityContext = (0, import_react6.createContext)(null);
 function warnAboutMissingLabel(id) {
   const nodeEnv = globalThis.process?.env?.NODE_ENV;
   if (nodeEnv !== "production") {
@@ -2938,12 +2961,12 @@ function useHotspotAccessibility({
   ariaLabel,
   onActivate
 }) {
-  const registry = (0, import_react5.useContext)(HotspotAccessibilityContext);
-  const [focused, setFocused] = (0, import_react5.useState)(false);
-  const activateRef = (0, import_react5.useRef)(onActivate);
+  const registry = (0, import_react6.useContext)(HotspotAccessibilityContext);
+  const [focused, setFocused] = (0, import_react6.useState)(false);
+  const activateRef = (0, import_react6.useRef)(onActivate);
   const enabled = Boolean(onActivate);
   activateRef.current = onActivate;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!enabled) {
       setFocused(false);
       return;
@@ -2965,8 +2988,8 @@ function useHotspotAccessibility({
   return focused;
 }
 function useHotspotAccessibilityLayer() {
-  const [entries, setEntries] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
-  const register = (0, import_react5.useCallback)(
+  const [entries, setEntries] = (0, import_react6.useState)(() => /* @__PURE__ */ new Map());
+  const register = (0, import_react6.useCallback)(
     (entry) => {
       const token = Symbol(entry.id);
       const nextEntry = { ...entry, token };
@@ -2988,11 +3011,11 @@ function useHotspotAccessibilityLayer() {
     },
     []
   );
-  const registry = (0, import_react5.useMemo)(
+  const registry = (0, import_react6.useMemo)(
     () => ({ register }),
     [register]
   );
-  const controls = (0, import_react5.useMemo)(
+  const controls = (0, import_react6.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-label": "Panorama hotspots", style: { pointerEvents: "none" }, children: Array.from(entries.values()).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
@@ -3019,7 +3042,7 @@ function useHotspotAccessibilityLayer() {
 
 // src/keyboard-controls.tsx
 var import_fiber3 = require("@react-three/fiber");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var DEFAULT_ROTATE_SPEED = 60;
 var DEFAULT_ZOOM_SPEED = 30;
 var DEFAULT_SHIFT_MULTIPLIER = 3;
@@ -3089,15 +3112,15 @@ function KeyboardControls({
   onNextScene
 }) {
   useClaimControlChannel("keyboard");
-  const controlsRef = (0, import_react6.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react7.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber3.useThree)();
-  const pressedRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
-  const shiftHeldRef = (0, import_react6.useRef)(false);
-  const invertRef = (0, import_react6.useRef)(invert);
-  const fovSpeedRef = (0, import_react6.useRef)(fovSpeed);
-  const onPreviousSceneRef = (0, import_react6.useRef)(onPreviousScene);
-  const onNextSceneRef = (0, import_react6.useRef)(onNextScene);
-  const keyMap = (0, import_react6.useMemo)(() => resolveKeyMap(keys), [keys]);
+  const pressedRef = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
+  const shiftHeldRef = (0, import_react7.useRef)(false);
+  const invertRef = (0, import_react7.useRef)(invert);
+  const fovSpeedRef = (0, import_react7.useRef)(fovSpeed);
+  const onPreviousSceneRef = (0, import_react7.useRef)(onPreviousScene);
+  const onNextSceneRef = (0, import_react7.useRef)(onNextScene);
+  const keyMap = (0, import_react7.useMemo)(() => resolveKeyMap(keys), [keys]);
   if (!controlsRef) {
     throw new Error("<KeyboardControls> must be rendered inside <PanoViewer>.");
   }
@@ -3105,7 +3128,7 @@ function KeyboardControls({
   fovSpeedRef.current = fovSpeed;
   onPreviousSceneRef.current = onPreviousScene;
   onNextSceneRef.current = onNextScene;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const element = gl.domElement;
     if (!enabled) {
       pressedRef.current.clear();
@@ -3263,7 +3286,7 @@ function KeyboardControls({
 
 // src/mouse-controls.tsx
 var import_fiber4 = require("@react-three/fiber");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var DEFAULT_ROTATE_SPEED2 = 0.35;
 var DEFAULT_ZOOM_SPEED2 = 0.08;
 var BUTTON_FLAG = {
@@ -3288,12 +3311,12 @@ function MouseControls({
   fovSpeed
 }) {
   useClaimControlChannel("mouse");
-  const controlsRef = (0, import_react7.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react8.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber4.useThree)();
-  const pointersRef = (0, import_react7.useRef)(
+  const pointersRef = (0, import_react8.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const optionsRef = (0, import_react7.useRef)({
+  const optionsRef = (0, import_react8.useRef)({
     rotateSpeed,
     zoomSpeed,
     wheel,
@@ -3310,7 +3333,7 @@ function MouseControls({
     invert,
     fovSpeed
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const element = gl.domElement;
     const allowedButtons = resolveButtons(buttons);
     const clearPointers = () => {
@@ -3434,7 +3457,7 @@ function MouseControls({
 }
 
 // src/pano-filter/host.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/pano-filter/presets.ts
 var PANO_FILTER_PRESETS = [
@@ -3475,7 +3498,7 @@ function isPanoFilterActive(snapshot) {
 }
 
 // src/pano-filter/host.ts
-var PanoFilterHostContext = (0, import_react8.createContext)(null);
+var PanoFilterHostContext = (0, import_react9.createContext)(null);
 function createPanoFilterHost() {
   return {
     snapshot: { ...DEFAULT_PANO_FILTER_SNAPSHOT },
@@ -3529,8 +3552,8 @@ function subscribeNoop() {
   };
 }
 function usePanoFilterSnapshot() {
-  const host = (0, import_react8.useContext)(PanoFilterHostContext);
-  const revision = (0, import_react8.useSyncExternalStore)(
+  const host = (0, import_react9.useContext)(PanoFilterHostContext);
+  const revision = (0, import_react9.useSyncExternalStore)(
     host ? (onStoreChange) => subscribePanoFilterHost(host, onStoreChange) : subscribeNoop,
     () => host ? getPanoFilterHostRevision(host) : 0,
     () => host ? getPanoFilterHostRevision(host) : 0
@@ -3544,12 +3567,12 @@ function isProduction2() {
 }
 
 // src/pano-context-menu.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
-var PanoContextMenuOverlayContext = (0, import_react9.createContext)(null);
+var PanoContextMenuOverlayContext = (0, import_react10.createContext)(null);
 var DEFAULT_APPEARANCE = {
   background: "#161616",
   color: "#f4f4f4",
@@ -3589,11 +3612,11 @@ function DefaultContextMenuPanel({
   selectContext,
   onRequestClose
 }) {
-  const menuRef = (0, import_react9.useRef)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
+  const menuRef = (0, import_react10.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
   const resolved = { ...DEFAULT_APPEARANCE, ...appearance };
   const iconSize = Number.isFinite(resolved.iconSize) ? Math.max(0, resolved.iconSize) : DEFAULT_ICON_SIZE;
-  const visibleItems = (0, import_react9.useMemo)(
+  const visibleItems = (0, import_react10.useMemo)(
     () => items.filter((item) => {
       if (!isActionItem(item)) {
         return true;
@@ -3602,7 +3625,7 @@ function DefaultContextMenuPanel({
     }),
     [items]
   );
-  const focusableIndices = (0, import_react9.useMemo)(() => {
+  const focusableIndices = (0, import_react10.useMemo)(() => {
     const indices = [];
     visibleItems.forEach((item, index) => {
       if (isActionItem(item) && !item.disabled) {
@@ -3611,7 +3634,7 @@ function DefaultContextMenuPanel({
     });
     return indices;
   }, [visibleItems]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const first = focusableIndices[0];
     setActiveIndex(first ?? 0);
     const frame = requestAnimationFrame(() => {
@@ -3622,7 +3645,7 @@ function DefaultContextMenuPanel({
     });
     return () => cancelAnimationFrame(frame);
   }, [focusableIndices]);
-  const activateItem = (0, import_react9.useCallback)(
+  const activateItem = (0, import_react10.useCallback)(
     (item) => {
       if (item.disabled) {
         return;
@@ -3828,9 +3851,9 @@ function PositionedMenuShell({
   overlayElement,
   children
 }) {
-  const shellRef = (0, import_react9.useRef)(null);
-  const [offset, setOffset] = (0, import_react9.useState)({ left: 0, top: 0 });
-  (0, import_react9.useLayoutEffect)(() => {
+  const shellRef = (0, import_react10.useRef)(null);
+  const [offset, setOffset] = (0, import_react10.useState)({ left: 0, top: 0 });
+  (0, import_react10.useLayoutEffect)(() => {
     const shell = shellRef.current;
     if (!overlayElement || !shell) {
       return;
@@ -3866,20 +3889,20 @@ function PositionedMenuShell({
   );
 }
 function usePanoContextMenuOverlay() {
-  const [session2, setSession] = (0, import_react9.useState)(null);
-  const overlayRef = (0, import_react9.useRef)(null);
-  const [overlayElement, setOverlayElement] = (0, import_react9.useState)(
+  const [session2, setSession] = (0, import_react10.useState)(null);
+  const overlayRef = (0, import_react10.useRef)(null);
+  const [overlayElement, setOverlayElement] = (0, import_react10.useState)(
     null
   );
-  const api = (0, import_react9.useMemo)(
+  const api = (0, import_react10.useMemo)(
     () => ({ setSession, overlayRef }),
     []
   );
-  const setOverlayNode = (0, import_react9.useCallback)((node) => {
+  const setOverlayNode = (0, import_react10.useCallback)((node) => {
     overlayRef.current = node;
     setOverlayElement(node);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!session2) {
       return;
     }
@@ -3947,13 +3970,13 @@ function PanoContextMenu({
   separatorClassName,
   children
 }) {
-  const eventBus = (0, import_react9.useContext)(PanoEventBusContext);
-  const controlsRef = (0, import_react9.useContext)(PanoramaViewContext);
-  const overlayApi = (0, import_react9.useContext)(PanoContextMenuOverlayContext);
-  const actions = (0, import_react9.useContext)(PanoContextMenuActionsContext);
-  const instanceId = (0, import_react9.useId)();
-  const sessionKeyRef = (0, import_react9.useRef)(0);
-  const propsRef = (0, import_react9.useRef)({
+  const eventBus = (0, import_react10.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react10.useContext)(PanoramaViewContext);
+  const overlayApi = (0, import_react10.useContext)(PanoContextMenuOverlayContext);
+  const actions = (0, import_react10.useContext)(PanoContextMenuActionsContext);
+  const instanceId = (0, import_react10.useId)();
+  const sessionKeyRef = (0, import_react10.useRef)(0);
+  const propsRef = (0, import_react10.useRef)({
     items,
     prepend,
     append,
@@ -3983,10 +4006,10 @@ function PanoContextMenu({
       "<PanoContextMenu> requires the PanoViewer context-menu overlay host."
     );
   }
-  const close = (0, import_react9.useCallback)(() => {
+  const close = (0, import_react10.useCallback)(() => {
     overlayApi.setSession(null);
   }, [overlayApi]);
-  const openMenu = (0, import_react9.useCallback)(
+  const openMenu = (0, import_react10.useCallback)(
     (event) => {
       event.nativeEvent.preventDefault();
       const view = controlsRef.current?.getView() ?? {
@@ -4035,7 +4058,7 @@ function PanoContextMenu({
     },
     [actions, close, controlsRef, instanceId, overlayApi]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const unsubscribeContextMenu = eventBus.subscribe(
       "contextmenu",
       openMenu
@@ -4214,11 +4237,11 @@ function composePanoContextMenuItems(props, presets) {
     ...resolvePanoContextMenuEntries(props.append ?? [], presets)
   ];
 }
-var PanoContextMenuActionsContext = (0, import_react9.createContext)(null);
+var PanoContextMenuActionsContext = (0, import_react10.createContext)(null);
 
 // src/pano-cursor.tsx
 var import_fiber5 = require("@react-three/fiber");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_PANO_CURSORS = {
   default: "grab",
@@ -4233,9 +4256,9 @@ var LAYER_PRIORITY = {
   hotspotDragging: 3,
   hidden: 4
 };
-var PanoCursorContext = (0, import_react10.createContext)(null);
+var PanoCursorContext = (0, import_react11.createContext)(null);
 function usePanoCursor() {
-  return (0, import_react10.useContext)(PanoCursorContext);
+  return (0, import_react11.useContext)(PanoCursorContext);
 }
 function hotspotCursorClaimId(id) {
   return `pano-cursor:hotspot:${id}`;
@@ -4287,12 +4310,12 @@ function PanoCursorController({
   children
 }) {
   const { gl } = (0, import_fiber5.useThree)();
-  const eventBus = (0, import_react10.useContext)(PanoEventBusContext);
-  const claimsRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
-  const cursorsRef = (0, import_react10.useRef)(cursors);
-  const appliedCursorRef = (0, import_react10.useRef)(null);
+  const eventBus = (0, import_react11.useContext)(PanoEventBusContext);
+  const claimsRef = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
+  const cursorsRef = (0, import_react11.useRef)(cursors);
+  const appliedCursorRef = (0, import_react11.useRef)(null);
   cursorsRef.current = cursors;
-  const applyCursor = (0, import_react10.useCallback)(() => {
+  const applyCursor = (0, import_react11.useCallback)(() => {
     const next = resolveHighestCursor(claimsRef.current, cursorsRef.current);
     const element = gl.domElement;
     if (appliedCursorRef.current === next && element.style.cursor === next) {
@@ -4301,14 +4324,14 @@ function PanoCursorController({
     element.style.cursor = next;
     appliedCursorRef.current = next;
   }, [gl]);
-  const claim = (0, import_react10.useCallback)(
+  const claim = (0, import_react11.useCallback)(
     (id, layer, cursor) => {
       claimsRef.current.set(id, { layer, cursor });
       applyCursor();
     },
     [applyCursor]
   );
-  const release = (0, import_react10.useCallback)(
+  const release = (0, import_react11.useCallback)(
     (id) => {
       if (claimsRef.current.delete(id)) {
         applyCursor();
@@ -4316,7 +4339,7 @@ function PanoCursorController({
     },
     [applyCursor]
   );
-  const api = (0, import_react10.useMemo)(
+  const api = (0, import_react11.useMemo)(
     () => ({
       cursors,
       claim,
@@ -4324,7 +4347,7 @@ function PanoCursorController({
     }),
     [claim, cursors, release]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const element = gl.domElement;
     const previous = element.style.cursor;
     return () => {
@@ -4333,10 +4356,10 @@ function PanoCursorController({
       element.style.cursor = previous;
     };
   }, [gl]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     applyCursor();
   }, [applyCursor, cursors]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!eventBus) {
       return;
     }
@@ -4366,7 +4389,7 @@ function PanoCursorController({
 
 // src/pano-events.tsx
 var import_fiber6 = require("@react-three/fiber");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var DEFAULT_IDLE_TIME_MS = 2e3;
 function resolveIdleTime(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_IDLE_TIME_MS;
@@ -4404,13 +4427,13 @@ function usePanoEvents({
   onVRDenied,
   onVRUnknownDevice
 }) {
-  const eventBus = (0, import_react11.useContext)(PanoEventBusContext);
-  const controlsRef = (0, import_react11.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react12.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react12.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber6.useThree)();
   if (!eventBus || !controlsRef) {
     throw new Error("usePanoEvents must be used inside <PanoViewer>.");
   }
-  const callbacksRef = (0, import_react11.useRef)({
+  const callbacksRef = (0, import_react12.useRef)({
     onViewChange,
     onViewSettled,
     onViewInteractionStart,
@@ -4474,15 +4497,15 @@ function usePanoEvents({
     onVRDenied,
     onVRUnknownDevice
   };
-  const idleElapsedRef = (0, import_react11.useRef)(0);
-  const isIdleRef = (0, import_react11.useRef)(false);
-  const idleTimeRef = (0, import_react11.useRef)(resolveIdleTime(idleTime));
+  const idleElapsedRef = (0, import_react12.useRef)(0);
+  const isIdleRef = (0, import_react12.useRef)(false);
+  const idleTimeRef = (0, import_react12.useRef)(resolveIdleTime(idleTime));
   idleTimeRef.current = resolveIdleTime(idleTime);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     idleElapsedRef.current = 0;
     isIdleRef.current = false;
   }, [idleTime]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const unsubscribers = [
       eventBus.subscribe("viewchange", (view) => {
         callbacksRef.current.onViewChange?.(view);
@@ -4563,7 +4586,7 @@ function usePanoEvents({
       }
     };
   }, [eventBus]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const element = gl.domElement;
     const handleWheel = (nativeEvent) => {
       callbacksRef.current.onWheel?.({
@@ -4576,7 +4599,7 @@ function usePanoEvents({
       element.removeEventListener("wheel", handleWheel);
     };
   }, [gl]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -4602,7 +4625,7 @@ function usePanoEvents({
     wasFullscreenRef.current = isViewerFullscreen();
     return subscribeFullscreenChange(handleFullscreenChange);
   }, [gl]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const element = gl.domElement;
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -4644,7 +4667,7 @@ function PanoEvents(props) {
 
 // src/panorama-event-surface.tsx
 var import_fiber7 = require("@react-three/fiber");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_three3 = require("three");
 
 // src/hotspot/coordinates.ts
@@ -4737,9 +4760,9 @@ function makePanoramaPointerEvent(event) {
   };
 }
 function PanoramaEventSurface() {
-  const eventBus = (0, import_react12.useContext)(PanoEventBusContext);
+  const eventBus = (0, import_react13.useContext)(PanoEventBusContext);
   const { camera, gl } = (0, import_fiber7.useThree)();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!eventBus) {
       return;
     }
@@ -4807,9 +4830,26 @@ function PanoramaEventSurface() {
   );
 }
 
+// src/scenes-host.ts
+var import_react14 = require("react");
+var ScenesHostContext = (0, import_react14.createContext)(null);
+function createScenesHost() {
+  return {
+    controller: null,
+    revision: 0,
+    listeners: /* @__PURE__ */ new Set()
+  };
+}
+function notifyScenesHost(host) {
+  host.revision += 1;
+  for (const listener of host.listeners) {
+    listener();
+  }
+}
+
 // src/touch-controls.tsx
 var import_fiber8 = require("@react-three/fiber");
-var import_react13 = require("react");
+var import_react15 = require("react");
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
@@ -4824,16 +4864,16 @@ function TouchControls({
   pinchZoom = true
 }) {
   useClaimControlChannel("touch");
-  const controlsRef = (0, import_react13.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react15.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber8.useThree)();
-  const pointersRef = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = (0, import_react13.useRef)(null);
-  const optionsRef = (0, import_react13.useRef)({ rotateSpeed, invert, pinchZoom });
+  const pointersRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = (0, import_react15.useRef)(null);
+  const optionsRef = (0, import_react15.useRef)({ rotateSpeed, invert, pinchZoom });
   if (!controlsRef) {
     throw new Error("<TouchControls> must be rendered inside <PanoViewer>.");
   }
   optionsRef.current = { rotateSpeed, invert, pinchZoom };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const element = gl.domElement;
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
@@ -4955,17 +4995,17 @@ function TouchControls({
 }
 
 // src/video/chrome-overlay.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var PanoChromeOverlayContext = (0, import_react14.createContext)(null);
+var PanoChromeOverlayContext = (0, import_react16.createContext)(null);
 function usePanoChromeOverlay() {
-  const [overlayElement, setOverlayElement] = (0, import_react14.useState)(
+  const [overlayElement, setOverlayElement] = (0, import_react16.useState)(
     null
   );
-  const setOverlayNode = (0, import_react14.useCallback)((node) => {
+  const setOverlayNode = (0, import_react16.useCallback)((node) => {
     setOverlayElement(node);
   }, []);
-  const api = (0, import_react14.useMemo)(
+  const api = (0, import_react16.useMemo)(
     () => ({ overlayElement }),
     [overlayElement]
   );
@@ -4981,9 +5021,9 @@ function usePanoChromeOverlay() {
 }
 
 // src/video/host.ts
-var import_react15 = require("react");
-var PanoVideoHostContext = (0, import_react15.createContext)(null);
-var DefaultPanoVideoControlsContext = (0, import_react15.createContext)(false);
+var import_react17 = require("react");
+var PanoVideoHostContext = (0, import_react17.createContext)(null);
+var DefaultPanoVideoControlsContext = (0, import_react17.createContext)(false);
 function createPanoVideoHost() {
   return {
     controller: null,
@@ -5014,8 +5054,8 @@ function isProduction3() {
   return nodeEnv === "production";
 }
 function useClaimPanoVideoControls() {
-  const host = (0, import_react15.useContext)(PanoVideoHostContext);
-  const isDefault = (0, import_react15.useContext)(DefaultPanoVideoControlsContext);
+  const host = (0, import_react17.useContext)(PanoVideoHostContext);
+  const isDefault = (0, import_react17.useContext)(DefaultPanoVideoControlsContext);
   if (!host || isDefault) {
     return;
   }
@@ -5028,10 +5068,10 @@ function useClaimPanoVideoControls() {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/video/pano-video-captions.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
@@ -5055,7 +5095,7 @@ function resolvePanoVideoCaptionAppearance(appearance) {
 function PanoVideoCaptionsOverlay({
   controller
 }) {
-  const snapshot = (0, import_react16.useSyncExternalStore)(
+  const snapshot = (0, import_react18.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
@@ -5097,7 +5137,7 @@ function PanoVideoCaptions({
 }
 
 // src/video/pano-video-controls.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/video/format.ts
 var DEFAULT_PANO_VIDEO_PLAYBACK_RATES = [0.5, 1, 1.25, 1.5, 2];
@@ -5549,7 +5589,7 @@ function VerticalVolumeSlider({
   onVolume,
   volume
 }) {
-  const trackRef = (0, import_react17.useRef)(null);
+  const trackRef = (0, import_react19.useRef)(null);
   const applyPointer = (event) => {
     const track = trackRef.current;
     if (!track) {
@@ -5685,14 +5725,14 @@ function VolumeControl({
   volume,
   volumeAdjustable
 }) {
-  const rootRef = (0, import_react17.useRef)(null);
-  const [open, setOpen] = (0, import_react17.useState)(false);
+  const rootRef = (0, import_react19.useRef)(null);
+  const [open, setOpen] = (0, import_react19.useState)(false);
   const displayVolume = muted ? 0 : volume;
   const mutedOrSilent = muted || volume === 0;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     onOpenChange(open);
   }, [onOpenChange, open]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!open || !volumeAdjustable || hasFinePointerHover()) {
       return;
     }
@@ -5779,24 +5819,24 @@ function PanoVideoControlsHud({
   fullscreen,
   overlayElement
 }) {
-  const resolved = (0, import_react17.useMemo)(
+  const resolved = (0, import_react19.useMemo)(
     () => resolveControlsAppearance(appearance),
     [appearance]
   );
-  const snapshot = (0, import_react17.useSyncExternalStore)(
+  const snapshot = (0, import_react19.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
   );
-  const [menu, setMenu] = (0, import_react17.useState)(null);
-  const [captionsPanel, setCaptionsPanel] = (0, import_react17.useState)("tracks");
-  const [visible, setVisible] = (0, import_react17.useState)(true);
-  const [volumeOpen, setVolumeOpen] = (0, import_react17.useState)(false);
-  const [overlayWidth, setOverlayWidth] = (0, import_react17.useState)(
+  const [menu, setMenu] = (0, import_react19.useState)(null);
+  const [captionsPanel, setCaptionsPanel] = (0, import_react19.useState)("tracks");
+  const [visible, setVisible] = (0, import_react19.useState)(true);
+  const [volumeOpen, setVolumeOpen] = (0, import_react19.useState)(false);
+  const [overlayWidth, setOverlayWidth] = (0, import_react19.useState)(
     () => overlayElement.clientWidth
   );
-  const idleTimerRef = (0, import_react17.useRef)(0);
-  const barId = (0, import_react17.useId)();
+  const idleTimerRef = (0, import_react19.useRef)(0);
+  const barId = (0, import_react19.useId)();
   const rateMenuId = `${barId}-rate`;
   const variantMenuId = `${barId}-variant`;
   const captionsMenuId = `${barId}-captions`;
@@ -5804,7 +5844,7 @@ function PanoVideoControlsHud({
   const compact = overlayWidth < COMPACT_CONTROLS_WIDTH;
   const hideTime = overlayWidth < NARROW_CONTROLS_WIDTH;
   const showFullscreen = isFullscreenEnabled();
-  const bumpVisibility = (0, import_react17.useCallback)(
+  const bumpVisibility = (0, import_react19.useCallback)(
     (playing) => {
       setVisible(true);
       window.clearTimeout(idleTimerRef.current);
@@ -5817,7 +5857,7 @@ function PanoVideoControlsHud({
     },
     [menu, volumeOpen]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -5832,15 +5872,15 @@ function PanoVideoControlsHud({
       observer.disconnect();
     };
   }, [overlayElement]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!compact && menu === "more") {
       setMenu(null);
     }
   }, [compact, menu]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     bumpVisibility(snapshot.playing);
   }, [bumpVisibility, snapshot.playing]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const root = overlayElement.parentElement;
     if (!root) {
       return;
@@ -5899,7 +5939,7 @@ function PanoVideoControlsHud({
       document.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [bumpVisibility, controller, menu, overlayElement, snapshot.playing, volumeOpen]);
-  (0, import_react17.useEffect)(
+  (0, import_react19.useEffect)(
     () => () => {
       window.clearTimeout(idleTimerRef.current);
     },
@@ -6190,7 +6230,7 @@ function PanoVideoControlsHud({
 }
 function PanoVideoControls({ appearance }) {
   useClaimPanoVideoControls();
-  const host = (0, import_react17.useContext)(PanoVideoHostContext);
+  const host = (0, import_react19.useContext)(PanoVideoHostContext);
   if (host && appearance) {
     host.controls = appearance;
   }
@@ -6204,7 +6244,7 @@ function PanoVideoChromeBridge({
   host,
   overlayElement
 }) {
-  (0, import_react18.useSyncExternalStore)(
+  (0, import_react20.useSyncExternalStore)(
     (onStoreChange) => subscribePanoVideoHost(host, onStoreChange),
     () => getPanoVideoHostRevision(host),
     () => getPanoVideoHostRevision(host)
@@ -6228,11 +6268,11 @@ function PanoVideoChromeBridge({
 }
 
 // src/webvr/chrome.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/webvr/host.ts
-var import_react19 = require("react");
-var WebVRRuntimeContext = (0, import_react19.createContext)(null);
+var import_react21 = require("react");
+var WebVRRuntimeContext = (0, import_react21.createContext)(null);
 function createWebVRHost() {
   return {
     controller: null,
@@ -6503,7 +6543,7 @@ function SetupPanel({
   );
 }
 function WebVRChromeBridge({ host }) {
-  (0, import_react20.useSyncExternalStore)(
+  (0, import_react22.useSyncExternalStore)(
     (listener) => subscribeWebVRHost(host, listener),
     () => host.revision,
     () => host.revision
@@ -6587,12 +6627,12 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 // src/webvr/xr-origin.tsx
 var import_fiber9 = require("@react-three/fiber");
 var import_xr2 = require("@react-three/xr");
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_three5 = require("three");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function PanoramaXROrigin() {
-  const originRef = (0, import_react21.useRef)(null);
-  const localHeadPositionRef = (0, import_react21.useRef)(new import_three5.Vector3());
+  const originRef = (0, import_react23.useRef)(null);
+  const localHeadPositionRef = (0, import_react23.useRef)(new import_three5.Vector3());
   const session2 = (0, import_xr2.useXR)((state) => state.session);
   const gl = (0, import_fiber9.useThree)((state) => state.gl);
   (0, import_fiber9.useFrame)(() => {
@@ -6657,7 +6697,7 @@ function PanoCursorTree({
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
-  const host = (0, import_react22.useContext)(PanoVideoHostContext);
+  const host = (0, import_react24.useContext)(PanoVideoHostContext);
   if (host) {
     host.controlClaims = 0;
   }
@@ -6670,7 +6710,7 @@ function DefaultControlChannels({
   keyboardChannel,
   fovSpeed
 }) {
-  const claims = (0, import_react22.useContext)(ControlClaimsContext);
+  const claims = (0, import_react24.useContext)(ControlClaimsContext);
   if (!claims) {
     return null;
   }
@@ -6686,7 +6726,7 @@ function DefaultControlChannels({
     ) : null
   ] });
 }
-var PanoViewer = (0, import_react22.forwardRef)(
+var PanoViewer = (0, import_react24.forwardRef)(
   function PanoViewer2({
     children,
     initialView,
@@ -6704,17 +6744,19 @@ var PanoViewer = (0, import_react22.forwardRef)(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = (0, import_react22.useRef)(null);
-    const controlsRef = (0, import_react22.useRef)(null);
-    const eventBus = (0, import_react22.useMemo)(() => createPanoEventBus(), []);
+    const rootRef = (0, import_react24.useRef)(null);
+    const controlsRef = (0, import_react24.useRef)(null);
+    const eventBus = (0, import_react24.useMemo)(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
     const { api: chromeOverlayApi, setOverlayNode, overlayElement } = usePanoChromeOverlay();
-    const videoHost = (0, import_react22.useMemo)(() => createPanoVideoHost(), []);
-    const filterHost = (0, import_react22.useMemo)(() => createPanoFilterHost(), []);
-    const webVRHost = (0, import_react22.useMemo)(() => createWebVRHost(), []);
-    const stereoView = (0, import_react22.useMemo)(() => createWebVRStereoView(), []);
-    const xrStore = (0, import_react22.useMemo)(
+    const videoHost = (0, import_react24.useMemo)(() => createPanoVideoHost(), []);
+    const filterHost = (0, import_react24.useMemo)(() => createPanoFilterHost(), []);
+    const webVRHost = (0, import_react24.useMemo)(() => createWebVRHost(), []);
+    const scenesHost = (0, import_react24.useMemo)(() => createScenesHost(), []);
+    const bgmHost = (0, import_react24.useMemo)(() => createBackgroundAudioHost(), []);
+    const stereoView = (0, import_react24.useMemo)(() => createWebVRStereoView(), []);
+    const xrStore = (0, import_react24.useMemo)(
       () => (0, import_xr3.createXRStore)({
         anchors: false,
         bodyTracking: false,
@@ -6730,13 +6772,13 @@ var PanoViewer = (0, import_react22.forwardRef)(
       }),
       []
     );
-    const fallbackViewRef = (0, import_react22.useRef)(DEFAULT_VIEW);
+    const fallbackViewRef = (0, import_react24.useRef)(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
       Math.max(maxFov, normalizedMinFov + 1)
     );
-    const normalizedInitialView = (0, import_react22.useMemo)(
+    const normalizedInitialView = (0, import_react24.useMemo)(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
         pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
@@ -6754,10 +6796,10 @@ var PanoViewer = (0, import_react22.forwardRef)(
       ]
     );
     fallbackViewRef.current = normalizedInitialView;
-    const controlClaims = (0, import_react22.useMemo)(() => createControlClaims(), []);
+    const controlClaims = (0, import_react24.useMemo)(() => createControlClaims(), []);
     resetControlClaims(controlClaims);
     const controlsEnabled = controls !== false;
-    const controlOptions = (0, import_react22.useMemo)(
+    const controlOptions = (0, import_react24.useMemo)(
       () => typeof controls === "object" ? controls : {},
       [controls]
     );
@@ -6765,7 +6807,7 @@ var PanoViewer = (0, import_react22.forwardRef)(
     const allModeInvert = controlOptions.invert === true;
     const topRotateSpeed = controlOptions.rotateSpeed ?? DEFAULT_POINTER_ROTATE_SPEED;
     const topZoomSpeed = controlOptions.zoomSpeed ?? DEFAULT_MOUSE_ZOOM_SPEED;
-    const mouseChannel = (0, import_react22.useMemo)(
+    const mouseChannel = (0, import_react24.useMemo)(
       () => resolveChannel(controlOptions.mouse, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -6781,7 +6823,7 @@ var PanoViewer = (0, import_react22.forwardRef)(
         topZoomSpeed
       ]
     );
-    const touchChannel = (0, import_react22.useMemo)(
+    const touchChannel = (0, import_react24.useMemo)(
       () => resolveChannel(controlOptions.touch, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -6790,13 +6832,35 @@ var PanoViewer = (0, import_react22.forwardRef)(
       }),
       [allModeInvert, controlOptions.touch, topRotateSpeed]
     );
-    const keyboardChannel = (0, import_react22.useMemo)(
+    const keyboardChannel = (0, import_react24.useMemo)(
       () => resolveChannel(controlOptions.keyboard, {
         enabled: true
       }),
       [controlOptions.keyboard]
     );
-    const toggleFullscreen = (0, import_react22.useCallback)(async () => {
+    const enterFullscreen = (0, import_react24.useCallback)(async () => {
+      if (typeof document === "undefined") {
+        return;
+      }
+      if (getFullscreenElement()) {
+        return;
+      }
+      const root = rootRef.current;
+      if (!root) {
+        return;
+      }
+      await requestElementFullscreen(root);
+    }, []);
+    const exitFullscreen = (0, import_react24.useCallback)(async () => {
+      if (typeof document === "undefined") {
+        return;
+      }
+      if (!getFullscreenElement()) {
+        return;
+      }
+      await exitElementFullscreen();
+    }, []);
+    const toggleFullscreen = (0, import_react24.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -6810,8 +6874,8 @@ var PanoViewer = (0, import_react22.forwardRef)(
       }
       await requestElementFullscreen(root);
     }, []);
-    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react22.useState)(false);
-    (0, import_react22.useEffect)(() => {
+    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react24.useState)(false);
+    (0, import_react24.useEffect)(() => {
       if (typeof document === "undefined") {
         return;
       }
@@ -6829,7 +6893,7 @@ var PanoViewer = (0, import_react22.forwardRef)(
       syncFullscreen();
       return subscribeFullscreenChange(syncFullscreen);
     }, []);
-    (0, import_react22.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       const root = rootRef.current;
       if (!root) {
         return;
@@ -6842,7 +6906,7 @@ var PanoViewer = (0, import_react22.forwardRef)(
         root.removeEventListener("contextmenu", suppressNativeContextMenu, true);
       };
     }, []);
-    const contextMenuActions = (0, import_react22.useMemo)(
+    const contextMenuActions = (0, import_react24.useMemo)(
       () => ({
         reset: () => {
           controlsRef.current?.reset();
@@ -6854,24 +6918,27 @@ var PanoViewer = (0, import_react22.forwardRef)(
       }),
       [isViewerFullscreen, toggleFullscreen]
     );
-    const contextMenuChannel = (0, import_react22.useMemo)(
+    const contextMenuChannel = (0, import_react24.useMemo)(
       () => resolveContextMenuChannel(contextMenu),
       [contextMenu]
     );
-    const resolvedCursors = (0, import_react22.useMemo)(
+    const resolvedCursors = (0, import_react24.useMemo)(
       () => resolvePanoCursors(cursors),
       [cursors]
     );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react22.useState)(
+    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react24.useState)(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    (0, import_react22.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
-    (0, import_react22.useImperativeHandle)(
+    const isFullscreenRef = (0, import_react24.useRef)(false);
+    isFullscreenRef.current = isViewerFullscreen;
+    (0, import_react24.useImperativeHandle)(
       ref,
       () => ({
+        // -- View --
         getView: () => controlsRef.current?.getView() ?? { ...fallbackViewRef.current },
         setView: (view, options) => {
           controlsRef.current?.setView(view, options);
@@ -6879,17 +6946,67 @@ var PanoViewer = (0, import_react22.forwardRef)(
         reset: () => {
           controlsRef.current?.reset();
         },
+        // -- Fullscreen --
+        enterFullscreen,
+        exitFullscreen,
+        toggleFullscreen,
+        isFullscreen: () => isFullscreenRef.current,
+        // -- Scenes --
+        setScene: (id) => scenesHost.controller?.setScene(id) ?? false,
+        nextScene: () => scenesHost.controller?.nextScene() ?? false,
+        previousScene: () => scenesHost.controller?.previousScene() ?? false,
+        getActiveSceneId: () => scenesHost.controller?.getActiveSceneId() ?? null,
+        getSceneIds: () => scenesHost.controller?.getSceneIds() ?? [],
+        isSceneTransitioning: () => scenesHost.controller?.isTransitioning() ?? false,
+        // -- WebVR --
+        enterVR: () => webVRHost.controller?.enterVR() ?? Promise.resolve(false),
+        exitVR: () => webVRHost.controller?.exitVR() ?? Promise.resolve(),
+        toggleVR: () => webVRHost.controller?.toggleVR() ?? Promise.resolve(false),
+        isVRAvailable: () => webVRHost.snapshot.available,
+        isVREnabled: () => webVRHost.snapshot.mode !== null,
+        getVRMode: () => webVRHost.snapshot.mode,
+        requestVRPermission: () => webVRHost.controller?.requestPermission() ?? Promise.resolve(false),
+        // -- Video --
+        getVideo: () => videoHost.controller,
+        subscribeVideo: (onStoreChange) => subscribePanoVideoHost(videoHost, onStoreChange),
+        playVideo: () => videoHost.controller?.play() ?? Promise.resolve(),
+        pauseVideo: () => videoHost.controller?.pause(),
+        toggleVideo: () => videoHost.controller?.togglePlay(),
+        seekVideo: (time) => videoHost.controller?.seek(time),
+        setVideoVolume: (vol) => videoHost.controller?.setVolume(vol),
+        setVideoMuted: (m) => videoHost.controller?.setMuted(m),
+        toggleVideoMuted: () => videoHost.controller?.toggleMuted(),
+        // -- Background Audio --
+        getBackgroundAudio: () => bgmHost.controller,
+        subscribeBackgroundAudio: (onStoreChange) => subscribeBackgroundAudioHost(bgmHost, onStoreChange),
+        playBackgroundAudio: () => {
+          bgmHost.controller?.play();
+          return Promise.resolve();
+        },
+        pauseBackgroundAudio: () => bgmHost.controller?.pause(),
+        toggleBackgroundAudio: () => bgmHost.controller?.togglePlay(),
+        setBackgroundAudioVolume: (vol) => bgmHost.controller?.setVolume(vol),
+        setBackgroundAudioMuted: (m) => bgmHost.controller?.setMuted(m),
+        toggleBackgroundAudioMuted: () => bgmHost.controller?.toggleMuted(),
+        // -- Deprecated --
         startAutoRotate: () => {
           setLegacyAutoRotate(true);
         },
         stopAutoRotate: () => {
           setLegacyAutoRotate(false);
-        },
-        toggleFullscreen
+        }
       }),
-      [toggleFullscreen]
+      [
+        bgmHost,
+        enterFullscreen,
+        exitFullscreen,
+        scenesHost,
+        toggleFullscreen,
+        videoHost,
+        webVRHost
+      ]
     );
-    const rootStyle = (0, import_react22.useMemo)(
+    const rootStyle = (0, import_react24.useMemo)(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -6939,11 +7056,11 @@ var PanoViewer = (0, import_react22.forwardRef)(
                       PanoContextMenuOverlayContext.Provider,
                       {
                         value: contextMenuOverlayApi,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                           PanoContextMenuActionsContext.Provider,
                           {
                             value: contextMenuActions,
-                            children: [
+                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BackgroundAudioHostContext.Provider, { value: bgmHost, children: [
                               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanoVideoHostReset, {}),
                               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 PanoramaViewRuntime,
@@ -6987,7 +7104,7 @@ var PanoViewer = (0, import_react22.forwardRef)(
                                   }
                                 )
                               ] })
-                            ]
+                            ] }) })
                           }
                         ) }) }) })
                       }
@@ -7025,7 +7142,7 @@ var PanoViewer = (0, import_react22.forwardRef)(
 );
 
 // src/background-audio.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 
 // src/audio/howl.ts
 var import_howler = __toESM(require_howler());
@@ -7195,7 +7312,8 @@ function BackgroundAudio({
   src,
   sources,
   sceneId,
-  playing,
+  playing: controlledPlaying,
+  defaultPlaying = false,
   loop = true,
   muted = false,
   volume = 1,
@@ -7207,25 +7325,28 @@ function BackgroundAudio({
   onEnded,
   onError
 }) {
-  const controlsRef = (0, import_react23.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react25.useContext)(PanoramaViewContext);
   if (!controlsRef) {
     throw new Error("<BackgroundAudio> must be rendered inside <PanoViewer>.");
   }
+  const isControlled = controlledPlaying !== void 0;
+  const [internalPlaying, setInternalPlaying] = (0, import_react25.useState)(defaultPlaying);
+  const playing = isControlled ? controlledPlaying : internalPlaying;
   const urls = resolveBackgroundAudioUrls(src, sources, sceneId);
   const trackKey = urls.join("\0");
-  const currentRef = (0, import_react23.useRef)(null);
-  const outgoingRef = (0, import_react23.useRef)([]);
-  const fadingInRef = (0, import_react23.useRef)(false);
-  const isFirstTrackRef = (0, import_react23.useRef)(true);
-  const playingRef = (0, import_react23.useRef)(playing);
-  const loopRef = (0, import_react23.useRef)(loop);
-  const mutedRef = (0, import_react23.useRef)(muted);
-  const volumeRef = (0, import_react23.useRef)(volume);
-  const fadeMsRef = (0, import_react23.useRef)(resolveFadeMs(fadeMs));
-  const onPlaybackStateChangeRef = (0, import_react23.useRef)(onPlaybackStateChange);
-  const onPlaybackErrorRef = (0, import_react23.useRef)(onPlaybackError);
-  const onEndedRef = (0, import_react23.useRef)(onEnded);
-  const onErrorRef = (0, import_react23.useRef)(onError);
+  const currentRef = (0, import_react25.useRef)(null);
+  const outgoingRef = (0, import_react25.useRef)([]);
+  const fadingInRef = (0, import_react25.useRef)(false);
+  const isFirstTrackRef = (0, import_react25.useRef)(true);
+  const playingRef = (0, import_react25.useRef)(playing);
+  const loopRef = (0, import_react25.useRef)(loop);
+  const mutedRef = (0, import_react25.useRef)(muted);
+  const volumeRef = (0, import_react25.useRef)(volume);
+  const fadeMsRef = (0, import_react25.useRef)(resolveFadeMs(fadeMs));
+  const onPlaybackStateChangeRef = (0, import_react25.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react25.useRef)(onPlaybackError);
+  const onEndedRef = (0, import_react25.useRef)(onEnded);
+  const onErrorRef = (0, import_react25.useRef)(onError);
   playingRef.current = playing;
   loopRef.current = loop;
   mutedRef.current = muted;
@@ -7235,7 +7356,100 @@ function BackgroundAudio({
   onPlaybackErrorRef.current = onPlaybackError;
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
-  (0, import_react23.useEffect)(() => {
+  const snapshotRef = (0, import_react25.useRef)({
+    ready: false,
+    playing: false,
+    blocked: false,
+    ended: false,
+    muted,
+    volume
+  });
+  const snapshotListenersRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  const notifySnapshot = (patch) => {
+    const prev = snapshotRef.current;
+    snapshotRef.current = { ...prev, ...patch };
+    for (const listener of snapshotListenersRef.current) {
+      listener();
+    }
+  };
+  const isControlledRef = (0, import_react25.useRef)(isControlled);
+  isControlledRef.current = isControlled;
+  const controller = (0, import_react25.useMemo)(
+    () => ({
+      subscribe: (onStoreChange) => {
+        snapshotListenersRef.current.add(onStoreChange);
+        return () => {
+          snapshotListenersRef.current.delete(onStoreChange);
+        };
+      },
+      getSnapshot: () => snapshotRef.current,
+      play: () => {
+        if (isControlledRef.current) {
+          return;
+        }
+        setInternalPlaying(true);
+      },
+      pause: () => {
+        if (isControlledRef.current) {
+          return;
+        }
+        setInternalPlaying(false);
+      },
+      togglePlay: () => {
+        if (isControlledRef.current) {
+          return;
+        }
+        setInternalPlaying((prev) => !prev);
+      },
+      setVolume: (vol) => {
+        if (isControlledRef.current) {
+          return;
+        }
+        const howl = currentRef.current?.handle.howl;
+        if (howl) {
+          howl.volume(clampAudioVolume(vol));
+        }
+        notifySnapshot({ volume: clampAudioVolume(vol) });
+      },
+      setMuted: (m) => {
+        if (isControlledRef.current) {
+          return;
+        }
+        const howl = currentRef.current?.handle.howl;
+        if (howl) {
+          howl.mute(m);
+        }
+        notifySnapshot({ muted: m });
+      },
+      toggleMuted: () => {
+        if (isControlledRef.current) {
+          return;
+        }
+        const next = !snapshotRef.current.muted;
+        const howl = currentRef.current?.handle.howl;
+        if (howl) {
+          howl.mute(next);
+        }
+        notifySnapshot({ muted: next });
+      }
+    }),
+    []
+  );
+  const bgmHost = (0, import_react25.useContext)(BackgroundAudioHostContext);
+  (0, import_react25.useEffect)(() => {
+    if (!bgmHost) {
+      return;
+    }
+    bgmHost.controller = controller;
+    notifyBackgroundAudioHost(bgmHost);
+    return () => {
+      if (bgmHost.controller === controller) {
+        bgmHost.controller = null;
+        notifyBackgroundAudioHost(bgmHost);
+      }
+    };
+  }, [bgmHost, controller]);
+  (0, import_react25.useEffect)(() => {
     return () => {
       fadingInRef.current = false;
       isFirstTrackRef.current = true;
@@ -7247,7 +7461,7 @@ function BackgroundAudio({
       outgoingRef.current = [];
     };
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const previous = currentRef.current;
     if (previous?.key === trackKey && previous.crossOrigin === crossOrigin) {
       return;
@@ -7281,6 +7495,7 @@ function BackgroundAudio({
           isActive: () => currentRef.current?.key === trackKey,
           shouldRetryPlay: () => currentRef.current?.key === trackKey && playingRef.current,
           onEnded: () => {
+            notifySnapshot({ playing: false, ended: true });
             onPlaybackStateChangeRef.current?.("ended");
             onEndedRef.current?.();
           },
@@ -7292,15 +7507,18 @@ function BackgroundAudio({
                 durationMs
               );
             }
+            notifySnapshot({ ready: true, playing: true, blocked: false, ended: false });
             onPlaybackStateChangeRef.current?.("playing");
           },
           onPause: () => {
+            notifySnapshot({ playing: false });
             onPlaybackStateChangeRef.current?.("paused");
           },
           onLoadError: (error) => {
             onErrorRef.current?.({ error });
           },
           onPlayError: (error) => {
+            notifySnapshot({ blocked: true });
             onPlaybackStateChangeRef.current?.("blocked");
             onPlaybackErrorRef.current?.(error);
           }
@@ -7343,7 +7561,7 @@ function BackgroundAudio({
       retire(previous);
     }
   }, [crossOrigin, trackKey]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const howl = currentRef.current?.handle.howl;
     if (!howl) {
       return;
@@ -7359,7 +7577,7 @@ function BackgroundAudio({
     }
     howl.play();
   }, [playing, trackKey]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const slot = currentRef.current;
     if (!slot) {
       return;
@@ -7369,8 +7587,9 @@ function BackgroundAudio({
     if (!fadingInRef.current) {
       slot.handle.howl.volume(clampAudioVolume(volume));
     }
+    notifySnapshot({ muted, volume: clampAudioVolume(volume) });
   }, [loop, muted, trackKey, volume]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!pauseWhenHidden) {
       return;
     }
@@ -7396,27 +7615,27 @@ function BackgroundAudio({
 }
 
 // src/pano-filter/pano-filter.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 function PanoFilter({
   preset = "none",
   intensity,
   enabled = true
 }) {
-  const host = (0, import_react24.useContext)(PanoFilterHostContext);
+  const host = (0, import_react26.useContext)(PanoFilterHostContext);
   if (!host) {
     throw new Error("<PanoFilter> must be rendered inside <PanoViewer>.");
   }
-  const snapshot = (0, import_react24.useMemo)(
+  const snapshot = (0, import_react26.useMemo)(
     () => resolvePanoFilterSnapshot({ preset, intensity, enabled }),
     [enabled, intensity, preset]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     claimPanoFilter(host);
     return () => {
       releasePanoFilter(host);
     };
   }, [host]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     setPanoFilterSnapshot(host, snapshot);
   }, [host, snapshot]);
   return null;
@@ -7424,7 +7643,7 @@ function PanoFilter({
 
 // src/gyro.tsx
 var import_fiber11 = require("@react-three/fiber");
-var import_react25 = require("react");
+var import_react27 = require("react");
 
 // src/gyro-orientation.ts
 var import_three7 = require("three");
@@ -7509,7 +7728,7 @@ function resolveSoftstart(value) {
 function posesNearlyEqual(a, b) {
   return Math.abs(shortestYawDelta2(a.yaw, b.yaw)) < 1e-4 && Math.abs(a.pitch - b.pitch) < 1e-4 && Math.abs(a.roll - b.roll) < 1e-4;
 }
-var Gyro = (0, import_react25.forwardRef)(function Gyro2({
+var Gyro = (0, import_react27.forwardRef)(function Gyro2({
   enabled = false,
   camroll = true,
   absolute = false,
@@ -7524,24 +7743,24 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
   onDisable,
   onDenied
 }, ref) {
-  const controlsRef = (0, import_react25.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react25.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react27.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react27.useContext)(PanoEventBusContext);
   const { gl } = (0, import_fiber11.useThree)();
-  const [internallyDisabled, setInternallyDisabled] = (0, import_react25.useState)(false);
-  const availableRef = (0, import_react25.useRef)(false);
-  const availabilityReportedRef = (0, import_react25.useRef)(null);
-  const activeRef = (0, import_react25.useRef)(false);
-  const permissionRef = (0, import_react25.useRef)(deviceOrientationPermissionState);
-  const absoluteEventSourceRef = (0, import_react25.useRef)(null);
-  const rawQuaternionRef = (0, import_react25.useRef)(null);
-  const calibrationRef = (0, import_react25.useRef)(null);
-  const absoluteOffsetRef = (0, import_react25.useRef)({ yaw: 0, pitch: 0 });
-  const screenAngleRef = (0, import_react25.useRef)(getScreenOrientationAngle());
-  const startPoseRef = (0, import_react25.useRef)(null);
-  const enabledAtRef = (0, import_react25.useRef)(0);
-  const filteredPoseRef = (0, import_react25.useRef)(null);
-  const lastAppliedPoseRef = (0, import_react25.useRef)(null);
-  const callbacksRef = (0, import_react25.useRef)({
+  const [internallyDisabled, setInternallyDisabled] = (0, import_react27.useState)(false);
+  const availableRef = (0, import_react27.useRef)(false);
+  const availabilityReportedRef = (0, import_react27.useRef)(null);
+  const activeRef = (0, import_react27.useRef)(false);
+  const permissionRef = (0, import_react27.useRef)(deviceOrientationPermissionState);
+  const absoluteEventSourceRef = (0, import_react27.useRef)(null);
+  const rawQuaternionRef = (0, import_react27.useRef)(null);
+  const calibrationRef = (0, import_react27.useRef)(null);
+  const absoluteOffsetRef = (0, import_react27.useRef)({ yaw: 0, pitch: 0 });
+  const screenAngleRef = (0, import_react27.useRef)(getScreenOrientationAngle());
+  const startPoseRef = (0, import_react27.useRef)(null);
+  const enabledAtRef = (0, import_react27.useRef)(0);
+  const filteredPoseRef = (0, import_react27.useRef)(null);
+  const lastAppliedPoseRef = (0, import_react27.useRef)(null);
+  const callbacksRef = (0, import_react27.useRef)({
     onAvailable,
     onUnavailable,
     onEnable,
@@ -7558,7 +7777,7 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
   if (!controlsRef) {
     throw new Error("<Gyro> must be rendered inside <PanoViewer>.");
   }
-  const emit = (0, import_react25.useCallback)(
+  const emit = (0, import_react27.useCallback)(
     (type) => {
       eventBus?.emit(type, void 0);
       switch (type) {
@@ -7585,7 +7804,7 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
     },
     [eventBus]
   );
-  const setAvailable = (0, import_react25.useCallback)(
+  const setAvailable = (0, import_react27.useCallback)(
     (available) => {
       availableRef.current = available;
       if (availabilityReportedRef.current === available) {
@@ -7596,7 +7815,7 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
     },
     [emit]
   );
-  const requestPermission = (0, import_react25.useCallback)(async () => {
+  const requestPermission = (0, import_react27.useCallback)(async () => {
     if (!availableRef.current) {
       return false;
     }
@@ -7629,7 +7848,7 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
     emit("gyrodenied");
     return false;
   }, [emit, setAvailable]);
-  const deactivate = (0, import_react25.useCallback)(() => {
+  const deactivate = (0, import_react27.useCallback)(() => {
     if (activeRef.current) {
       activeRef.current = false;
       controlsRef.current?.setGyroActive(false);
@@ -7641,7 +7860,7 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
     filteredPoseRef.current = null;
     lastAppliedPoseRef.current = null;
   }, [controlsRef, emit]);
-  const resetSensor = (0, import_react25.useCallback)(
+  const resetSensor = (0, import_react27.useCallback)(
     (yaw, pitch) => {
       const rawQuaternion = rawQuaternionRef.current;
       if (!rawQuaternion) {
@@ -7676,7 +7895,7 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
     },
     [absolute, controlsRef, north]
   );
-  (0, import_react25.useImperativeHandle)(
+  (0, import_react27.useImperativeHandle)(
     ref,
     () => ({
       resetSensor,
@@ -7686,22 +7905,22 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
     }),
     [requestPermission, resetSensor]
   );
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!enabled) {
       setInternallyDisabled(false);
     }
   }, [enabled]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const supported = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined" && (desktopSupport || isMobileDevice());
     setAvailable(supported);
     return () => {
       availableRef.current = false;
     };
   }, [desktopSupport, setAvailable]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     controlsRef.current?.setGyroTouchMode(touchMode);
   }, [controlsRef, touchMode]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!enabled || internallyDisabled || touchMode !== "disablegyro") {
       return;
     }
@@ -7715,7 +7934,7 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
       gl.domElement.removeEventListener("pointerdown", onPointerDown);
     };
   }, [enabled, gl, internallyDisabled, touchMode]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!enabled || internallyDisabled || !availableRef.current) {
       deactivate();
       return;
@@ -7877,7 +8096,7 @@ var Gyro = (0, import_react25.forwardRef)(function Gyro2({
 
 // src/webvr/webvr.tsx
 var import_fiber14 = require("@react-three/fiber");
-var import_react30 = require("react");
+var import_react32 = require("react");
 
 // src/webvr/detect.ts
 function isMobileVRDevice() {
@@ -7900,7 +8119,7 @@ async function detectWebVRCapabilities() {
 
 // src/webvr/reticle.tsx
 var import_fiber12 = require("@react-three/fiber");
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_three8 = require("three");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var CENTER_NDC = new import_three8.Vector2(0, 0);
@@ -7986,13 +8205,13 @@ function WebVRReticle({
   dwellMs,
   visible
 }) {
-  const groupRef = (0, import_react26.useRef)(null);
-  const ringMeshRef = (0, import_react26.useRef)(null);
-  const directionRef = (0, import_react26.useRef)(new import_three8.Vector3());
-  const raycasterRef = (0, import_react26.useRef)(new import_three8.Raycaster());
-  const hoveredRef = (0, import_react26.useRef)(null);
-  const dwellRef = (0, import_react26.useRef)(0);
-  const clickedRef = (0, import_react26.useRef)(false);
+  const groupRef = (0, import_react28.useRef)(null);
+  const ringMeshRef = (0, import_react28.useRef)(null);
+  const directionRef = (0, import_react28.useRef)(new import_three8.Vector3());
+  const raycasterRef = (0, import_react28.useRef)(new import_three8.Raycaster());
+  const hoveredRef = (0, import_react28.useRef)(null);
+  const dwellRef = (0, import_react28.useRef)(0);
+  const clickedRef = (0, import_react28.useRef)(false);
   const { camera, gl, scene } = (0, import_fiber12.useThree)();
   (0, import_fiber12.useFrame)((_, deltaSeconds) => {
     const group = groupRef.current;
@@ -8155,7 +8374,7 @@ function WebVRReticle({
 
 // src/webvr/stereo.tsx
 var import_fiber13 = require("@react-three/fiber");
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_three9 = require("three");
 var vertexShader = `
 varying vec2 vUv;
@@ -8230,25 +8449,25 @@ function WebVRStereoRenderer({
   screensize
 }) {
   const { camera, gl } = (0, import_fiber13.useThree)();
-  const runtime = (0, import_react27.useContext)(WebVRRuntimeContext);
-  const fallbackStereoRef = (0, import_react27.useRef)(null);
+  const runtime = (0, import_react29.useContext)(WebVRRuntimeContext);
+  const fallbackStereoRef = (0, import_react29.useRef)(null);
   if (!fallbackStereoRef.current) {
     fallbackStereoRef.current = new import_three9.StereoCamera();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
-  const stereoRef = (0, import_react27.useRef)(stereo);
+  const stereoRef = (0, import_react29.useRef)(stereo);
   stereoRef.current = stereo;
-  const resources = (0, import_react27.useMemo)(createDistortionResources, []);
-  const drawingSizeRef = (0, import_react27.useRef)(new import_three9.Vector2());
-  const viewportRef = (0, import_react27.useRef)(new import_three9.Vector4());
-  const scissorRef = (0, import_react27.useRef)(new import_three9.Vector4());
-  const originalFovRef = (0, import_react27.useRef)(null);
-  const stereoActiveRef = (0, import_react27.useRef)(false);
-  const profileRef = (0, import_react27.useRef)(profile);
-  const screensizeRef = (0, import_react27.useRef)(screensize);
+  const resources = (0, import_react29.useMemo)(createDistortionResources, []);
+  const drawingSizeRef = (0, import_react29.useRef)(new import_three9.Vector2());
+  const viewportRef = (0, import_react29.useRef)(new import_three9.Vector4());
+  const scissorRef = (0, import_react29.useRef)(new import_three9.Vector4());
+  const originalFovRef = (0, import_react29.useRef)(null);
+  const stereoActiveRef = (0, import_react29.useRef)(false);
+  const profileRef = (0, import_react29.useRef)(profile);
+  const screensizeRef = (0, import_react29.useRef)(screensize);
   profileRef.current = profile;
   screensizeRef.current = screensize;
-  (0, import_react27.useEffect)(
+  (0, import_react29.useEffect)(
     () => () => {
       resources.geometry.dispose();
       resources.material.dispose();
@@ -8256,7 +8475,7 @@ function WebVRStereoRenderer({
     },
     [resources]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
       if (!stereoActiveRef.current || !(cameraToRender instanceof import_three9.PerspectiveCamera)) {
@@ -8320,7 +8539,7 @@ function WebVRStereoRenderer({
       gl.render = originalRender;
     };
   }, [gl, resources]);
-  (0, import_react27.useEffect)(
+  (0, import_react29.useEffect)(
     () => () => {
       if (runtime) {
         runtime.stereoView.active = false;
@@ -8355,7 +8574,7 @@ function WebVRStereoRenderer({
 }
 
 // src/webvr/pointerlock.ts
-var import_react28 = require("react");
+var import_react30 = require("react");
 var POINTER_LOCK_CURSOR_ID = "webvr:pointerlock";
 async function requestWebVRPointerLock(element) {
   if (typeof document === "undefined") {
@@ -8388,11 +8607,11 @@ function exitWebVRPointerLock(element) {
 }
 function useWebVRPointerLock(enabled, element) {
   const cursor = usePanoCursor();
-  const cursorRef = (0, import_react28.useRef)(cursor);
-  const enabledRef = (0, import_react28.useRef)(enabled);
+  const cursorRef = (0, import_react30.useRef)(cursor);
+  const enabledRef = (0, import_react30.useRef)(enabled);
   cursorRef.current = cursor;
   enabledRef.current = enabled;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!enabled || !element) {
       return;
     }
@@ -8422,7 +8641,7 @@ function useWebVRPointerLock(enabled, element) {
 }
 
 // src/webvr/wakelock.ts
-var import_react29 = require("react");
+var import_react31 = require("react");
 
 // src/webvr/wakelock-fallback.ts
 var WEBVR_WAKELOCK_FALLBACK_VIDEO_BASE64 = "AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAbBbW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAAD4AAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAxt0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAAAAAAAAAggAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAABAAAAAQAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAIIAAAEAAABAAAAAAKTbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAyAAAAGgBVxAAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAACPm1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAf5zdGJsAAAAvnN0c2QAAAAAAAAAAQAAAK5hdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAABAAEABIAAAASAAAAAAAAAABFUxhdmM2Mi4xMS4xMDAgbGlieDI2NAAAAAAAAAAAAAAAGP//AAAANGF2Y0MBZAAK/+EAF2dkAAqs2V7ARAAAAwAEAAADAMg8SJZYAQAGaOvjyyLA/fj4AAAAABBwYXNwAAAAAQAAAAEAAAAUYnRydAAAAAAAADQ5AAAAAAAAABhzdHRzAAAAAAAAAAEAAAANAAACAAAAABRzdHNzAAAAAAAAAAEAAAABAAAAeGN0dHMAAAAAAAAADQAAAAEAAAQAAAAAAQAACgAAAAABAAAEAAAAAAEAAAAAAAAAAQAAAgAAAAABAAAKAAAAAAEAAAQAAAAAAQAAAAAAAAABAAACAAAAAAEAAAoAAAAAAQAABAAAAAABAAAAAAAAAAEAAAIAAAAAKHN0c2MAAAAAAAAAAgAAAAEAAAADAAAAAQAAAAUAAAABAAAAAQAAAEhzdHN6AAAAAAAAAAAAAAANAAACxQAAAAwAAAAMAAAADAAAAAwAAAASAAAADgAAAAwAAAAMAAAAEgAAAA4AAAAMAAAADAAAACRzdGNvAAAAAAAAAAUAAAcGAAAJ5wAAChUAAAo/AAAKbwAAAtF0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAACAAAAAAAAD4AAAAAAAAAAAAAAAAEBAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAA+AAAAEAAABAAAAAAJJbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAfQAAAgABVxAAAAAAALWhkbHIAAAAAAAAAAHNvdW4AAAAAAAAAAAAAAABTb3VuZEhhbmRsZXIAAAAB9G1pbmYAAAAQc21oZAAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABuHN0YmwAAAB+c3RzZAAAAAAAAAABAAAAbm1wNGEAAAAAAAAAAQAAAAAAAAAAAAEAEAAAAAAfQAAAAAAANmVzZHMAAAAAA4CAgCUAAgAEgICAF0AVAAAAAAAfQAAAARsFgICABRWIVuUABoCAgAECAAAAFGJ0cnQAAAAAAAAfQAAAARsAAAAYc3R0cwAAAAAAAAABAAAAIAAABAAAAAAoc3RzYwAAAAAAAAACAAAAAQAAAAEAAAABAAAABgAAABsAAAABAAAAlHN0c3oAAAAAAAAAAAAAACAAAAAVAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAChzdGNvAAAAAAAAAAYAAAbxAAAJ4wAAChEAAAo7AAAKawAACnsAAAAac2dwZAEAAAByb2xsAAAAAgAAAAH//wAAABxzYmdwAAAAAHJvbGwAAAABAAAAIAAAAAEAAABhdWR0YQAAAFltZXRhAAAAAAAAACFoZGxyAAAAAAAAAABtZGlyYXBwbAAAAAAAAAAAAAAAACxpbHN0AAAAJKl0b28AAAAcZGF0YQAAAAEAAAAATGF2ZjYyLjMuMTAwAAAACGZyZWUAAAP+bWRhdN4CAExhdmM2Mi4xMS4xMDAAAjBADgAAAq4GBf//qtxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxNjUgcjMyMjIgYjM1NjA1YSAtIEguMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMjUgLSBodHRwOi8vd3d3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0xIHJlZj0zIGRlYmxvY2s9MTowOjAgYW5hbHlzZT0weDM6MHgxMTMgbWU9aGV4IHN1Ym1lPTcgcHN5PTEgcHN5X3JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbGlzPTEgOHg4ZGN0PTEgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV9xcF9vZmZzZXQ9LTIgdGhyZWFkcz0xIGxvb2thaGVhZF90aHJlYWRzPTEgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MyBiX3B5cmFtaWQ9MiBiX2FkYXB0PTEgYl9iaWFzPTAgZGlyZWN0PTEgd2VpZ2h0Yj0xIG9wZW5fZ29wPTAgd2VpZ2h0cD0yIGtleWludD0yNTAga2V5aW50X21pbj0yNSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmNfbG9va2FoZWFkPTQwIHJjPWNyZiBtYnRyZWU9MSBjcmY9MjMuMCBxY29tcD0wLjYwIHFwbWluPTAgcXBtYXg9NjkgcXBzdGVwPTQgaXBfcmF0aW89MS40MCBhcT0xOjEuMDAAgAAAAA9liIQAO//+906/AptUwmEAAAAIQZokbEN//uAAAAAIQZ5CeIX/wYEBGCAHAAAACAGeYXRCv8SAAAAACAGeY2pCv8SBAAAADkGaaEmoQWiZTAhn//7hARggBwAAAApBnoZFESwv/8GBAAAACAGepXRCv8SBAAAACAGep2pCv8SAARggBwAAAA5BmqxJqEFsmUwIV//+wAAAAApBnspFFSwv/8GBAAAACAGe6XRCv8SAARggBwAAAAgBnutqQr/EgAEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBw==";
@@ -8556,7 +8775,7 @@ function releaseWebVRWakeLock() {
   stopFallbackVideo();
 }
 function useWebVRWakeLock(enabled) {
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -8586,7 +8805,7 @@ function initializeSettings(screensize, profile) {
 function getViewerElement(canvas) {
   return canvas.closest("[data-pano-viewer]") ?? canvas.parentElement ?? canvas;
 }
-var WebVR = (0, import_react30.forwardRef)(function WebVR2({
+var WebVR = (0, import_react32.forwardRef)(function WebVR2({
   chrome = true,
   mobileVr = true,
   desktopSupport = false,
@@ -8604,24 +8823,24 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
   onDenied,
   onUnknownDevice
 }, ref) {
-  const runtime = (0, import_react30.useContext)(WebVRRuntimeContext);
-  const controlsRef = (0, import_react30.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react30.useContext)(PanoEventBusContext);
+  const runtime = (0, import_react32.useContext)(WebVRRuntimeContext);
+  const controlsRef = (0, import_react32.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react32.useContext)(PanoEventBusContext);
   const gl = (0, import_fiber14.useThree)((state) => state.gl);
-  const gyroRef = (0, import_react30.useRef)(null);
-  const capabilitiesRef = (0, import_react30.useRef)({
+  const gyroRef = (0, import_react32.useRef)(null);
+  const capabilitiesRef = (0, import_react32.useRef)({
     mobile: false,
     sensor: false,
     webxr: false
   });
-  const availableRef = (0, import_react30.useRef)(false);
-  const modeRef = (0, import_react30.useRef)(null);
-  const webXRSessionRef = (0, import_react30.useRef)(null);
-  const [mode, setMode] = (0, import_react30.useState)(null);
-  const [settings, setSettings] = (0, import_react30.useState)(
+  const availableRef = (0, import_react32.useRef)(false);
+  const modeRef = (0, import_react32.useRef)(null);
+  const webXRSessionRef = (0, import_react32.useRef)(null);
+  const [mode, setMode] = (0, import_react32.useState)(null);
+  const [settings, setSettings] = (0, import_react32.useState)(
     () => initializeSettings(screensize, profile)
   );
-  const callbacksRef = (0, import_react30.useRef)({
+  const callbacksRef = (0, import_react32.useRef)({
     onAvailable,
     onDenied,
     onEnterVR,
@@ -8641,22 +8860,22 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
     throw new Error("<WebVR> must be rendered inside <PanoViewer>.");
   }
   const { host, xrStore } = runtime;
-  const resolvedProfile = (0, import_react30.useMemo)(
+  const resolvedProfile = (0, import_react32.useMemo)(
     () => resolveWebVRProfile(profile, settings.profileId),
     [profile, settings.profileId]
   );
-  const reportDenied = (0, import_react30.useCallback)(
+  const reportDenied = (0, import_react32.useCallback)(
     (error) => {
       eventBus.emit("vrdenied", { error });
       callbacksRef.current.onDenied?.(error);
     },
     [eventBus]
   );
-  const reportUnknownDevice = (0, import_react30.useCallback)(() => {
+  const reportUnknownDevice = (0, import_react32.useCallback)(() => {
     eventBus.emit("vrunknowndevice", void 0);
     callbacksRef.current.onUnknownDevice?.();
   }, [eventBus]);
-  const activate = (0, import_react30.useCallback)(
+  const activate = (0, import_react32.useCallback)(
     (nextMode) => {
       if (modeRef.current === nextMode) {
         return;
@@ -8671,7 +8890,7 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
     },
     [controlsRef, eventBus]
   );
-  const deactivate = (0, import_react30.useCallback)(
+  const deactivate = (0, import_react32.useCallback)(
     (expectedMode) => {
       const previousMode = modeRef.current;
       if (!previousMode || expectedMode && previousMode !== expectedMode) {
@@ -8688,10 +8907,10 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
     },
     [controlsRef, eventBus, gl.domElement]
   );
-  const requestPermission = (0, import_react30.useCallback)(async () => {
+  const requestPermission = (0, import_react32.useCallback)(async () => {
     return await gyroRef.current?.requestPermission() ?? false;
   }, []);
-  const enterVR = (0, import_react30.useCallback)(async () => {
+  const enterVR = (0, import_react32.useCallback)(async () => {
     if (modeRef.current) {
       return true;
     }
@@ -8776,7 +8995,7 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
     wakelock,
     xrStore
   ]);
-  const exitVR = (0, import_react30.useCallback)(async () => {
+  const exitVR = (0, import_react32.useCallback)(async () => {
     if (modeRef.current === "webxr") {
       const session2 = webXRSessionRef.current ?? xrStore.getState().session ?? null;
       if (session2) {
@@ -8791,14 +9010,14 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
       await exitElementFullscreen();
     }
   }, [deactivate, xrStore]);
-  const toggleVR = (0, import_react30.useCallback)(async () => {
+  const toggleVR = (0, import_react32.useCallback)(async () => {
     if (modeRef.current) {
       await exitVR();
       return false;
     }
     return enterVR();
   }, [enterVR, exitVR]);
-  const updateSettings = (0, import_react30.useCallback)((next) => {
+  const updateSettings = (0, import_react32.useCallback)((next) => {
     const normalized = {
       profileId: next.profileId,
       screensize: next.screensize === "auto" ? "auto" : Math.round(Math.max(3, Math.min(20, next.screensize)) * 10) / 10
@@ -8806,18 +9025,19 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
     setSettings(normalized);
     saveWebVRSettings(normalized);
   }, []);
-  const controller = (0, import_react30.useMemo)(
+  const controller = (0, import_react32.useMemo)(
     () => ({
       closeSetup: () => updateWebVRHost(host, { setupOpen: false }),
       enterVR,
       exitVR,
       openSetup: () => updateWebVRHost(host, { setupOpen: true }),
+      requestPermission,
       toggleVR,
       updateSettings
     }),
-    [enterVR, exitVR, host, toggleVR, updateSettings]
+    [enterVR, exitVR, host, requestPermission, toggleVR, updateSettings]
   );
-  (0, import_react30.useImperativeHandle)(
+  (0, import_react32.useImperativeHandle)(
     ref,
     () => ({
       enterVR,
@@ -8830,7 +9050,7 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
     }),
     [enterVR, exitVR, requestPermission, toggleVR]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     let active = true;
     void detectWebVRCapabilities().then((capabilities) => {
       if (!active) {
@@ -8852,7 +9072,7 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
       active = false;
     };
   }, [desktopSupport, eventBus, fakeSupport, host, mobileVr]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     host.controller = controller;
     return () => {
       if (host.controller === controller) {
@@ -8861,10 +9081,10 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
       }
     };
   }, [controller, host]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     updateWebVRHost(host, { chrome, mode, settings });
   }, [chrome, host, mode, settings]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (mode !== "fake") {
       return;
     }
@@ -8888,7 +9108,7 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
       document.removeEventListener("mousemove", onMouseMove);
     };
   }, [controlsRef, gl.domElement, mode, mousePointerLock]);
-  (0, import_react30.useEffect)(
+  (0, import_react32.useEffect)(
     () => () => {
       const session2 = webXRSessionRef.current;
       if (session2) {
@@ -8942,7 +9162,7 @@ var WebVR = (0, import_react30.forwardRef)(function WebVR2({
 
 // src/sphere.tsx
 var import_fiber15 = require("@react-three/fiber");
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_three10 = require("three");
 
 // src/asset-url.ts
@@ -8967,7 +9187,7 @@ function resolveUrlAgainstFile(fileUrl, path) {
 }
 
 // src/pano-filter/pano-basic-material.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -9127,13 +9347,13 @@ function PanoBasicMaterial({
   toneMapped = false
 }) {
   const snapshot = usePanoFilterSnapshot();
-  const materialRef = (0, import_react31.useRef)(null);
-  const intensityRef = (0, import_react31.useRef)(snapshot.intensity);
-  const intensityUniformRef = (0, import_react31.useRef)(null);
+  const materialRef = (0, import_react33.useRef)(null);
+  const intensityRef = (0, import_react33.useRef)(snapshot.intensity);
+  const intensityUniformRef = (0, import_react33.useRef)(null);
   intensityRef.current = snapshot.intensity;
   const active = isPanoFilterActive(snapshot);
   const preset = snapshot.preset;
-  const onBeforeCompile = (0, import_react31.useMemo)(() => {
+  const onBeforeCompile = (0, import_react33.useMemo)(() => {
     if (!active || preset === "none") {
       return void 0;
     }
@@ -9150,7 +9370,7 @@ function PanoBasicMaterial({
     compile.toString = () => `pano-filter:${preset}`;
     return compile;
   }, [active, preset]);
-  (0, import_react31.useLayoutEffect)(() => {
+  (0, import_react33.useLayoutEffect)(() => {
     if (!active) {
       intensityUniformRef.current = null;
     }
@@ -9160,7 +9380,7 @@ function PanoBasicMaterial({
     }
     material.needsUpdate = true;
   }, [active, preset]);
-  (0, import_react31.useLayoutEffect)(() => {
+  (0, import_react33.useLayoutEffect)(() => {
     if (intensityUniformRef.current) {
       intensityUniformRef.current.value = snapshot.intensity;
     }
@@ -9183,12 +9403,12 @@ function PanoBasicMaterial({
 // src/sphere.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react32.useState)(null);
-  const onLoadRef = (0, import_react32.useRef)(onLoad);
-  const onErrorRef = (0, import_react32.useRef)(onError);
+  const [texture, setTexture] = (0, import_react34.useState)(null);
+  const onLoadRef = (0, import_react34.useRef)(onLoad);
+  const onErrorRef = (0, import_react34.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -9227,7 +9447,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  (0, import_react32.useEffect)(
+  (0, import_react34.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9247,7 +9467,7 @@ function Sphere({
 }) {
   const gl = (0, import_fiber15.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = (0, import_react32.useMemo)(
+  const resolvedPreviewUrl = (0, import_react34.useMemo)(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -9266,11 +9486,11 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = (0, import_react32.useRef)(false);
-  (0, import_react32.useEffect)(() => {
+  const readyRef = (0, import_react34.useRef)(false);
+  (0, import_react34.useEffect)(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -9302,7 +9522,7 @@ function Sphere({
 
 // src/video/pano-video.tsx
 var import_fiber16 = require("@react-three/fiber");
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_three11 = require("three");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
@@ -9389,10 +9609,10 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture(poster, onError) {
   const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react33.useState)(null);
-  const onErrorRef = (0, import_react33.useRef)(onError);
+  const [texture, setTexture] = (0, import_react35.useState)(null);
+  const onErrorRef = (0, import_react35.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -9429,7 +9649,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react33.useEffect)(
+  (0, import_react35.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9487,38 +9707,38 @@ function PanoVideo({
   onTrackChange
 }) {
   const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const host = (0, import_react33.useContext)(PanoVideoHostContext);
-  const overlay = (0, import_react33.useContext)(PanoChromeOverlayContext);
-  const variants = (0, import_react33.useMemo)(
+  const host = (0, import_react35.useContext)(PanoVideoHostContext);
+  const overlay = (0, import_react35.useContext)(PanoChromeOverlayContext);
+  const variants = (0, import_react35.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react33.useMemo)(
+  const captionAppearance = (0, import_react35.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react33.useState)(
+  const [variantId, setVariantId] = (0, import_react35.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react33.useState)(
+  const [trackId, setTrackId] = (0, import_react35.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react33.useState)(false);
-  const autoPlayRef = (0, import_react33.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react35.useState)(false);
+  const autoPlayRef = (0, import_react35.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react33.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react33.useRef)(
+  const blockedRef = (0, import_react35.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react35.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react33.useRef)({
+  const mediaCapabilitiesRef = (0, import_react35.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react33.useRef)(null);
+  const storeRef = (0, import_react35.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -9528,7 +9748,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react33.useRef)({
+  const actionsRef = (0, import_react35.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -9548,19 +9768,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = (0, import_react33.useRef)(onLoad);
-  const onErrorRef = (0, import_react33.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react33.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react33.useRef)(onEnded);
-  const onVariantChangeRef = (0, import_react33.useRef)(onVariantChange);
-  const onTrackChangeRef = (0, import_react33.useRef)(onTrackChange);
+  const onLoadRef = (0, import_react35.useRef)(onLoad);
+  const onErrorRef = (0, import_react35.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react35.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react35.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react35.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react35.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react33.useMemo)(() => {
+  const resource = (0, import_react35.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9577,7 +9797,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react33.useEffect)(
+  (0, import_react35.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -9592,13 +9812,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -9621,7 +9841,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react33.useCallback)(
+  const emitSnapshot = (0, import_react35.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -9673,7 +9893,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react33.useMemo)(
+  const controller = (0, import_react35.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -9725,7 +9945,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -9738,7 +9958,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -9751,10 +9971,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -9811,7 +10031,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -9901,7 +10121,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -9914,7 +10134,7 @@ function PanoVideo({
     video.playsInline = playsInline;
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -9964,7 +10184,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -9999,7 +10219,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -10035,7 +10255,7 @@ function PanoVideo({
 
 // src/scenes.tsx
 var import_fiber21 = require("@react-three/fiber");
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_three19 = require("three");
 
 // src/scene-transitions/presets.ts
@@ -10086,7 +10306,7 @@ function isSnapshotTransition(preset) {
 
 // src/scene-transitions/particle-overlay.tsx
 var import_fiber17 = require("@react-three/fiber");
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_three13 = require("three");
 
 // src/scene-transitions/glsl.ts
@@ -10218,12 +10438,12 @@ function ParticleOverlay({
   onFinish
 }) {
   const { camera } = (0, import_fiber17.useThree)();
-  const meshRef = (0, import_react34.useRef)(null);
-  const startRef = (0, import_react34.useRef)(null);
-  const finishedRef = (0, import_react34.useRef)(false);
-  const directionRef = (0, import_react34.useRef)(new import_three13.Vector3());
-  const geometry = (0, import_react34.useMemo)(() => createParticleGeometry(), []);
-  const material = (0, import_react34.useMemo)(
+  const meshRef = (0, import_react36.useRef)(null);
+  const startRef = (0, import_react36.useRef)(null);
+  const finishedRef = (0, import_react36.useRef)(false);
+  const directionRef = (0, import_react36.useRef)(new import_three13.Vector3());
+  const geometry = (0, import_react36.useMemo)(() => createParticleGeometry(), []);
+  const material = (0, import_react36.useMemo)(
     () => new import_three13.ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -10239,9 +10459,9 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  (0, import_react34.useEffect)(() => () => geometry.dispose(), [geometry]);
-  (0, import_react34.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react36.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react36.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -10277,7 +10497,7 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 var import_fiber18 = require("@react-three/fiber");
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_three15 = require("three");
 
 // src/scene-transitions/snapshot-shaders.ts
@@ -10566,18 +10786,18 @@ function SnapshotOverlay({
   onFinish
 }) {
   const { camera, gl } = (0, import_fiber18.useThree)();
-  const meshRef = (0, import_react35.useRef)(null);
-  const startRef = (0, import_react35.useRef)(null);
-  const finishedRef = (0, import_react35.useRef)(false);
-  const directionRef = (0, import_react35.useRef)(new import_three15.Vector3());
-  const material = (0, import_react35.useMemo)(() => {
+  const meshRef = (0, import_react37.useRef)(null);
+  const startRef = (0, import_react37.useRef)(null);
+  const finishedRef = (0, import_react37.useRef)(false);
+  const directionRef = (0, import_react37.useRef)(new import_three15.Vector3());
+  const material = (0, import_react37.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  (0, import_react35.useEffect)(() => () => material?.dispose(), [material]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => () => material?.dispose(), [material]);
+  (0, import_react37.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
@@ -10659,7 +10879,7 @@ function TransitionOverlay(props) {
 
 // src/tile/texture-manager-context.tsx
 var import_fiber19 = require("@react-three/fiber");
-var import_react36 = require("react");
+var import_react38 = require("react");
 
 // src/tile/texture-manager.ts
 var import_three16 = require("three");
@@ -10884,7 +11104,7 @@ var TileTextureManager = class {
 
 // src/tile/texture-manager-context.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react36.createContext)(
+var TileTextureManagerContext = (0, import_react38.createContext)(
   null
 );
 function TileTextureManagerProvider({
@@ -10894,7 +11114,7 @@ function TileTextureManagerProvider({
 }) {
   const gl = (0, import_fiber19.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react36.useMemo)(
+  const manager = (0, import_react38.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -10903,19 +11123,19 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return (0, import_react36.useContext)(TileTextureManagerContext);
+  return (0, import_react38.useContext)(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
 var import_fiber20 = require("@react-three/fiber");
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_three18 = require("three");
 
 // src/tile/face-layout.ts
@@ -11104,10 +11324,10 @@ var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
 var SHARED_TILE_GEOMETRY = new import_three18.PlaneGeometry(1, 1);
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = (0, import_react37.useState)(null);
-  const onErrorRef = (0, import_react37.useRef)(onError);
+  const [texture, setTexture] = (0, import_react39.useState)(null);
+  const onErrorRef = (0, import_react39.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -11144,7 +11364,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react37.useEffect)(
+  (0, import_react39.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -11157,7 +11377,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react37.useMemo)(() => {
+  const geometry = (0, import_react39.useMemo)(() => {
     const nextGeometry = new import_three18.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -11175,7 +11395,7 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  (0, import_react37.useEffect)(
+  (0, import_react39.useEffect)(
     () => () => {
       geometry.dispose();
     },
@@ -11216,14 +11436,14 @@ function PreviewCube({
   ));
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react37.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react39.useState)(() => ({
     manager,
     key,
     url,
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  (0, import_react37.useEffect)(
+  (0, import_react39.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -11236,7 +11456,7 @@ function useManagedTexture(manager, key, url, address) {
   );
   return snapshot;
 }
-var TileMesh = (0, import_react37.memo)(function TileMesh2({
+var TileMesh = (0, import_react39.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -11269,7 +11489,7 @@ var TileMesh = (0, import_react37.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react37.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react39.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
@@ -11443,10 +11663,10 @@ function Tile({
   onLevelChange
 }) {
   const { camera, gl, size } = (0, import_fiber20.useThree)();
-  const multiresConfig = (0, import_react37.useMemo)(() => parseMultires(multires), [multires]);
+  const multiresConfig = (0, import_react39.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react37.useMemo)(
+  const candidatesByLevel = (0, import_react39.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -11458,13 +11678,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react37.useRef)(onLoadProgress);
-  const errorRef = (0, import_react37.useRef)(onTileError);
-  const levelChangeRef = (0, import_react37.useRef)(onLevelChange);
+  const progressRef = (0, import_react39.useRef)(onLoadProgress);
+  const errorRef = (0, import_react39.useRef)(onTileError);
+  const levelChangeRef = (0, import_react39.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react37.useMemo)(
+  const ownedManager = (0, import_react39.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11485,7 +11705,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -11495,11 +11715,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react37.useRef)(false);
-  (0, import_react37.useEffect)(() => {
+  const readyRef = (0, import_react39.useRef)(false);
+  (0, import_react39.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -11507,31 +11727,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react37.useMemo)(
+  const resolveUrl = (0, import_react39.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = (0, import_react37.useState)([]);
-  const layerTokenRef = (0, import_react37.useRef)("");
-  const currentLevelRef = (0, import_react37.useRef)(1);
-  const lastUpdateAtRef = (0, import_react37.useRef)(-Infinity);
-  const visibilityDirtyRef = (0, import_react37.useRef)(true);
-  const lastVisibilityQuaternionRef = (0, import_react37.useRef)(camera.quaternion.clone());
-  const lastVisibilityFovRef = (0, import_react37.useRef)(Number.NaN);
-  const lastViewportRef = (0, import_react37.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react37.useRef)(new import_three18.Frustum());
-  const projectionMatrixRef = (0, import_react37.useRef)(new import_three18.Matrix4());
-  const visibilityCameraRef = (0, import_react37.useRef)(new import_three18.PerspectiveCamera());
-  (0, import_react37.useEffect)(() => {
+  const [layers, setLayers] = (0, import_react39.useState)([]);
+  const layerTokenRef = (0, import_react39.useRef)("");
+  const currentLevelRef = (0, import_react39.useRef)(1);
+  const lastUpdateAtRef = (0, import_react39.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react39.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react39.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react39.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react39.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react39.useRef)(new import_three18.Frustum());
+  const projectionMatrixRef = (0, import_react39.useRef)(new import_three18.Matrix4());
+  const visibilityCameraRef = (0, import_react39.useRef)(new import_three18.PerspectiveCamera());
+  (0, import_react39.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -11682,9 +11902,9 @@ function SnapshotCapture({
   onCaptured
 }) {
   const { camera, gl, scene, size } = (0, import_fiber21.useThree)();
-  const capturedRequestRef = (0, import_react38.useRef)(0);
-  const renderTargetRef = (0, import_react38.useRef)(null);
-  (0, import_react38.useEffect)(
+  const capturedRequestRef = (0, import_react40.useRef)(0);
+  const renderTargetRef = (0, import_react40.useRef)(null);
+  (0, import_react40.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
@@ -11737,49 +11957,53 @@ function ScenesController({
   renderHotspots,
   onTransitionEnd,
   onTransitionError,
-  snapshotMaxPixels = 3686400
+  snapshotMaxPixels = 3686400,
+  phaseRef: externalPhaseRef
 }) {
-  const controlsRef = (0, import_react38.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react40.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react38.useMemo)(
+  const transition = (0, import_react40.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react38.useMemo)(
+  const sceneMap = (0, import_react40.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react38.useState)([
+  const [slots, setSlots] = (0, import_react40.useState)([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = (0, import_react38.useState)(0);
-  const [liveSlot, setLiveSlot] = (0, import_react38.useState)(0);
-  const [pendingSlot, setPendingSlot] = (0, import_react38.useState)(null);
-  const [phase, setPhase] = (0, import_react38.useState)(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = (0, import_react38.useState)(0);
-  const [transitionRunId, setTransitionRunId] = (0, import_react38.useState)(0);
-  const [snapshot, setSnapshot] = (0, import_react38.useState)(null);
-  const [recoveryKey, setRecoveryKey] = (0, import_react38.useState)(0);
-  const requestedSceneIdRef = (0, import_react38.useRef)(activeSceneId);
-  const captureReasonRef = (0, import_react38.useRef)("start");
-  const interactionReleaseRef = (0, import_react38.useRef)(null);
-  const slotsRef = (0, import_react38.useRef)(slots);
-  const phaseRef = (0, import_react38.useRef)(phase);
-  const liveSlotRef = (0, import_react38.useRef)(liveSlot);
-  const transitionFromRef = (0, import_react38.useRef)(initialScene);
+  const [activeSlot, setActiveSlot] = (0, import_react40.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react40.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react40.useState)(null);
+  const [phase, setPhase] = (0, import_react40.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react40.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react40.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react40.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react40.useState)(0);
+  const requestedSceneIdRef = (0, import_react40.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react40.useRef)("start");
+  const interactionReleaseRef = (0, import_react40.useRef)(null);
+  const slotsRef = (0, import_react40.useRef)(slots);
+  const phaseRef = (0, import_react40.useRef)(phase);
+  const liveSlotRef = (0, import_react40.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react40.useRef)(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
+  if (externalPhaseRef) {
+    externalPhaseRef.current = phase;
+  }
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = (0, import_react38.useCallback)(() => {
+  const releaseInteraction = (0, import_react40.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react38.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react40.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = (0, import_react38.useCallback)((scene) => {
+  const startPreload = (0, import_react40.useCallback)((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -11790,7 +12014,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -11814,7 +12038,7 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = (0, import_react38.useCallback)((slot) => {
+  const handleReady = (0, import_react40.useCallback)((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -11845,7 +12069,7 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = (0, import_react38.useCallback)((nextSnapshot) => {
+  const handleCaptured = (0, import_react40.useCallback)((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -11867,7 +12091,7 @@ function ScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = (0, import_react38.useCallback)(() => {
+  const finishTransition = (0, import_react40.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -11892,12 +12116,12 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  (0, import_react38.useEffect)(() => () => {
+  (0, import_react40.useEffect)(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
   const { gl } = (0, import_fiber21.useThree)();
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -11921,7 +12145,7 @@ function ScenesController({
   }, [gl, manager, releaseInteraction, snapshot]);
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react38.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react40.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SnapshotCapture,
       {
@@ -11966,39 +12190,122 @@ function ScenesController({
 function Scenes({
   maxTextureMemoryMb,
   maxConcurrentTileLoads,
-  ...props
+  activeSceneId: controlledId,
+  defaultActiveSceneId,
+  onActiveSceneIdChange,
+  scenes,
+  ...rest
 }) {
+  const isControlled = controlledId !== void 0;
+  const [internalId, setInternalId] = (0, import_react40.useState)(
+    () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
+  );
+  const resolvedId = isControlled ? controlledId : internalId;
+  const requestSceneChange = (0, import_react40.useCallback)(
+    (id) => {
+      if (isControlled) {
+        onActiveSceneIdChange?.(id);
+      } else {
+        setInternalId(id);
+      }
+    },
+    [isControlled, onActiveSceneIdChange]
+  );
+  const scenesRef = (0, import_react40.useRef)(scenes);
+  scenesRef.current = scenes;
+  const resolvedIdRef = (0, import_react40.useRef)(resolvedId);
+  resolvedIdRef.current = resolvedId;
+  const host = (0, import_react40.useContext)(ScenesHostContext);
+  const phaseRef = (0, import_react40.useRef)("idle");
+  (0, import_react40.useEffect)(() => {
+    if (!host) {
+      return;
+    }
+    const controller = {
+      setScene: (id) => {
+        const match = scenesRef.current.find((s) => s.id === id);
+        if (!match) {
+          return false;
+        }
+        requestSceneChange(id);
+        return true;
+      },
+      nextScene: () => {
+        const next = cycleSceneId(
+          scenesRef.current,
+          resolvedIdRef.current,
+          1
+        );
+        if (next === null) {
+          return false;
+        }
+        requestSceneChange(next);
+        return true;
+      },
+      previousScene: () => {
+        const next = cycleSceneId(
+          scenesRef.current,
+          resolvedIdRef.current,
+          -1
+        );
+        if (next === null) {
+          return false;
+        }
+        requestSceneChange(next);
+        return true;
+      },
+      getActiveSceneId: () => resolvedIdRef.current,
+      getSceneIds: () => scenesRef.current.map((s) => s.id),
+      isTransitioning: () => phaseRef.current !== "idle"
+    };
+    host.controller = controller;
+    notifyScenesHost(host);
+    return () => {
+      if (host.controller === controller) {
+        host.controller = null;
+        notifyScenesHost(host);
+      }
+    };
+  }, [host, requestSceneChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScenesController, { ...props })
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        ScenesController,
+        {
+          ...rest,
+          scenes,
+          activeSceneId: resolvedId,
+          phaseRef
+        }
+      )
     }
   );
 }
 
 // src/hotspot/image-hotspot.tsx
 var import_fiber23 = require("@react-three/fiber");
-var import_react42 = require("react");
+var import_react44 = require("react");
 var import_three22 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
 var import_fiber22 = require("@react-three/fiber");
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_three20 = require("three");
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 
 // src/webvr/stereo-html.tsx
 var import_drei = require("@react-three/drei");
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function useFallbackStereoView() {
-  const runtime = (0, import_react39.useContext)(WebVRRuntimeContext);
+  const runtime = (0, import_react41.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = (0, import_react39.useSyncExternalStore)(
+  const fallback = (0, import_react41.useSyncExternalStore)(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -12112,16 +12419,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react40.useState)(false);
-  (0, import_react40.useEffect)(() => {
+  const [imageFailed, setImageFailed] = (0, import_react42.useState)(false);
+  (0, import_react42.useEffect)(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = (0, import_react40.useMemo)(
+  const resolvedAppearance = (0, import_react42.useMemo)(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = (0, import_react40.useMemo)(
+  const bubbleStyle = (0, import_react42.useMemo)(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -12500,18 +12807,18 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react41.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react41.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react43.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react43.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
   const { camera, size } = (0, import_fiber22.useThree)();
-  const groupRef = (0, import_react41.useRef)(null);
-  const tooltipAnchorRef = (0, import_react41.useRef)(null);
-  const dragStateRef = (0, import_react41.useRef)(null);
-  const suppressNextClickRef = (0, import_react41.useRef)(false);
-  const [hovered, setHovered] = (0, import_react41.useState)(false);
-  const [dragging, setDragging] = (0, import_react41.useState)(false);
-  const [pinned, setPinned] = (0, import_react41.useState)(false);
-  const tooltipContent = (0, import_react41.useMemo)(
+  const groupRef = (0, import_react43.useRef)(null);
+  const tooltipAnchorRef = (0, import_react43.useRef)(null);
+  const dragStateRef = (0, import_react43.useRef)(null);
+  const suppressNextClickRef = (0, import_react43.useRef)(false);
+  const [hovered, setHovered] = (0, import_react43.useState)(false);
+  const [dragging, setDragging] = (0, import_react43.useState)(false);
+  const [pinned, setPinned] = (0, import_react43.useState)(false);
+  const tooltipContent = (0, import_react43.useMemo)(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
@@ -12527,17 +12834,17 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = (0, import_react41.useMemo)(
+  const worldPosition = (0, import_react43.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react41.useMemo)(
+  const surfaceQuaternion3 = (0, import_react43.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = (0, import_react41.useMemo)(() => {
+  const focusGeometry = (0, import_react43.useMemo)(() => {
     const planeGeometry = new import_three20.PlaneGeometry(1, 1);
     const geometry = new import_three20.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -12564,14 +12871,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  (0, import_react41.useEffect)(
+  (0, import_react43.useEffect)(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!cursorApi) {
       return;
     }
@@ -12593,14 +12900,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  (0, import_react41.useEffect)(
+  (0, import_react43.useEffect)(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  (0, import_react41.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_react43.useEffect)(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -12609,12 +12916,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (acceptsPointer) {
       return;
     }
@@ -12627,7 +12934,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react43.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -12953,12 +13260,12 @@ function HotspotPlane({
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = (0, import_fiber23.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react42.useState)(null);
-  const onLoadRef = (0, import_react42.useRef)(onLoad);
-  const onErrorRef = (0, import_react42.useRef)(onError);
+  const [texture, setTexture] = (0, import_react44.useState)(null);
+  const onLoadRef = (0, import_react44.useRef)(onLoad);
+  const onErrorRef = (0, import_react44.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react42.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -12996,7 +13303,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react42.useEffect)(
+  (0, import_react44.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -13018,13 +13325,13 @@ function ImageHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_three24 = require("three");
 
 // src/hotspot/hotspot-stroke-line.tsx
 var import_drei2 = require("@react-three/drei");
 var import_fiber24 = require("@react-three/fiber");
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_three23 = require("three");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var LINE_WORLD_POSITION = new import_three23.Vector3();
@@ -13057,10 +13364,10 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = (0, import_react43.useRef)(null);
+  const lineRef = (0, import_react45.useRef)(null);
   const { camera, size } = (0, import_fiber24.useThree)();
   const dash = resolveDash(dashSize, gapSize);
-  (0, import_react43.useLayoutEffect)(() => {
+  (0, import_react45.useLayoutEffect)(() => {
     if (!dash.dashed) {
       return;
     }
@@ -13350,24 +13657,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react44.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = (0, import_react46.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react44.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react44.useMemo)(
+  const center = (0, import_react46.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react46.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = (0, import_react44.useMemo)(
+  const strokePoints = (0, import_react46.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react44.useRef)(null);
+  const startVerticesRef = (0, import_react46.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react44.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react46.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -13447,7 +13754,7 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_three25 = require("three");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
@@ -13566,16 +13873,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react45.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = (0, import_react47.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react45.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = (0, import_react45.useMemo)(
+  const center = (0, import_react47.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = (0, import_react47.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react45.useRef)(null);
-  (0, import_react45.useEffect)(() => {
+  const startVerticesRef = (0, import_react47.useRef)(null);
+  (0, import_react47.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -13641,7 +13948,7 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-var import_react46 = require("react");
+var import_react48 = require("react");
 var import_three26 = require("three");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
@@ -13832,12 +14139,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react46.useState)(null);
-  const onLoadRef = (0, import_react46.useRef)(onLoad);
-  const onErrorRef = (0, import_react46.useRef)(onError);
+  const [texture, setTexture] = (0, import_react48.useState)(null);
+  const onLoadRef = (0, import_react48.useRef)(onLoad);
+  const onErrorRef = (0, import_react48.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -13876,7 +14183,7 @@ function GraphicHotspot(props) {
 
 // src/hotspot/sequence-hotspot.tsx
 var import_fiber25 = require("@react-three/fiber");
-var import_react47 = require("react");
+var import_react49 = require("react");
 var import_three27 = require("three");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
@@ -13893,12 +14200,12 @@ function useSpriteTexture({
   onLoadProgress
 }) {
   const gl = (0, import_fiber25.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react47.useState)(null);
-  const onErrorRef = (0, import_react47.useRef)(onError);
-  const onLoadProgressRef = (0, import_react47.useRef)(onLoadProgress);
+  const [texture, setTexture] = (0, import_react49.useState)(null);
+  const onErrorRef = (0, import_react49.useRef)(onError);
+  const onLoadProgressRef = (0, import_react49.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13939,7 +14246,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react47.useEffect)(
+  (0, import_react49.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -13968,24 +14275,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = (0, import_react47.useState)(0);
-  const elapsedRef = (0, import_react47.useRef)(0);
-  const frameIndexRef = (0, import_react47.useRef)(0);
-  const endedRef = (0, import_react47.useRef)(false);
-  const lastPlaybackStateRef = (0, import_react47.useRef)(null);
-  const onFrameChangeRef = (0, import_react47.useRef)(onFrameChange);
-  const onPlaybackStateChangeRef = (0, import_react47.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react47.useRef)(onEnded);
+  const [frameIndex, setFrameIndex] = (0, import_react49.useState)(0);
+  const elapsedRef = (0, import_react49.useRef)(0);
+  const frameIndexRef = (0, import_react49.useRef)(0);
+  const endedRef = (0, import_react49.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react49.useRef)(null);
+  const onFrameChangeRef = (0, import_react49.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react49.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react49.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -13999,13 +14306,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14059,7 +14366,7 @@ function SequenceHotspot({
 
 // src/hotspot/video-hotspot.tsx
 var import_fiber26 = require("@react-three/fiber");
-var import_react48 = require("react");
+var import_react50 = require("react");
 var import_three28 = require("three");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function clampVolume2(volume) {
@@ -14070,10 +14377,10 @@ function clampVolume2(volume) {
 }
 function usePosterTexture2(id, poster, onError) {
   const gl = (0, import_fiber26.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react48.useState)(null);
-  const onErrorRef = (0, import_react48.useRef)(onError);
+  const [texture, setTexture] = (0, import_react50.useState)(null);
+  const onErrorRef = (0, import_react50.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -14110,7 +14417,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react48.useEffect)(
+  (0, import_react50.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14128,14 +14435,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = (0, import_react48.useState)(null);
-  const onEndedRef = (0, import_react48.useRef)(onEnded);
-  const onErrorRef = (0, import_react48.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react48.useRef)(onPlaybackStateChange);
+  const [resource, setResource] = (0, import_react50.useState)(null);
+  const onEndedRef = (0, import_react50.useRef)(onEnded);
+  const onErrorRef = (0, import_react50.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react50.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -14236,11 +14543,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react48.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react48.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react50.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react50.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14250,7 +14557,7 @@ function VideoHotspot({
     resource.video.playsInline = playsInline;
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14278,7 +14585,7 @@ function VideoHotspot({
 
 // src/hotspot/audio-hotspot.tsx
 var import_fiber27 = require("@react-three/fiber");
-var import_react49 = require("react");
+var import_react51 = require("react");
 var import_three29 = require("three");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var SPEAKER_TEXTURE_SIZE = 512;
@@ -14344,8 +14651,8 @@ function createSpeakerTexture(state) {
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = (0, import_react49.useState)({ playing: null, stopped: null });
-  (0, import_react49.useEffect)(() => {
+  const [textures, setTextures] = (0, import_react51.useState)({ playing: null, stopped: null });
+  (0, import_react51.useEffect)(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -14362,10 +14669,10 @@ function useSpeakerTextures(enabled) {
 }
 function useIconTexture(icon, enabled, onError, id) {
   const gl = (0, import_fiber27.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react49.useState)(null);
-  const onErrorRef = (0, import_react49.useRef)(onError);
+  const [texture, setTexture] = (0, import_react51.useState)(null);
+  const onErrorRef = (0, import_react51.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -14402,7 +14709,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  (0, import_react49.useEffect)(
+  (0, import_react51.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14421,13 +14728,13 @@ function useAudioHowl({
   playing,
   src
 }) {
-  const [howl, setHowl] = (0, import_react49.useState)(null);
-  const playingRef = (0, import_react49.useRef)(playing);
-  const loopRef = (0, import_react49.useRef)(loop ?? false);
-  const onEndedRef = (0, import_react49.useRef)(onEnded);
-  const onErrorRef = (0, import_react49.useRef)(onError);
-  const onPlaybackErrorRef = (0, import_react49.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react49.useRef)(onPlaybackStateChange);
+  const [howl, setHowl] = (0, import_react51.useState)(null);
+  const playingRef = (0, import_react51.useRef)(playing);
+  const loopRef = (0, import_react51.useRef)(loop ?? false);
+  const onEndedRef = (0, import_react51.useRef)(onEnded);
+  const onErrorRef = (0, import_react51.useRef)(onError);
+  const onPlaybackErrorRef = (0, import_react51.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react51.useRef)(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -14435,7 +14742,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -14472,7 +14779,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -14515,15 +14822,15 @@ function AudioHotspot({
   const stoppedIconTexture = useIconTexture(icon, marker, onError, id);
   const playingIconTexture = useIconTexture(playingIcon, marker, onError, id);
   const markerTexture = playing ? playingIconTexture ?? stoppedIconTexture ?? speakerTextures.playing : stoppedIconTexture ?? speakerTextures.stopped;
-  const playingRef = (0, import_react49.useRef)(playing);
+  const playingRef = (0, import_react51.useRef)(playing);
   playingRef.current = playing;
-  const mutedRef = (0, import_react49.useRef)(muted);
-  const volumeRef = (0, import_react49.useRef)(volume);
-  const rangeRef = (0, import_react49.useRef)(range);
+  const mutedRef = (0, import_react51.useRef)(muted);
+  const volumeRef = (0, import_react51.useRef)(volume);
+  const rangeRef = (0, import_react51.useRef)(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!howl) {
       return;
     }
@@ -14533,7 +14840,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -14568,7 +14875,7 @@ function AudioHotspot({
 }
 
 // src/hotspot/text-hotspot.tsx
-var import_react50 = require("react");
+var import_react52 = require("react");
 var import_three30 = require("three");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
@@ -14790,12 +15097,12 @@ function createTextTexture(text, width, height, style) {
   return texture;
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react50.useState)(null);
-  const onLoadRef = (0, import_react50.useRef)(onLoad);
-  const onErrorRef = (0, import_react50.useRef)(onError);
+  const [texture, setTexture] = (0, import_react52.useState)(null);
+  const onLoadRef = (0, import_react52.useRef)(onLoad);
+  const onErrorRef = (0, import_react52.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {