@ericchen1990/pano-view 2.4.0 → 2.5.0

package/dist/index.cjs

@@ -2296,6 +2296,7 @@ __export(index_exports, {
   resolvePanoContextMenuEntries: () => resolvePanoContextMenuEntries,
   unwrapPolygonVertices: () => unwrapPolygonVertices,
   usePanoEvents: () => usePanoEvents,
+  usePanoViewer: () => usePanoViewer,
   validatePolygonVertices: () => validatePolygonVertices,
   validatePolylineVertices: () => validatePolylineVertices,
   vector3ToPanoPosition: () => vector3ToPanoPosition
@@ -9160,9 +9161,92 @@ var WebVR = (0, import_react32.forwardRef)(function WebVR2({
   ] });
 });
 
+// src/use-pano-viewer.ts
+var import_react33 = require("react");
+function createPanoViewerHandle(ref) {
+  return {
+    getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
+    setView: (view, options) => {
+      ref.current?.setView(view, options);
+    },
+    reset: () => {
+      ref.current?.reset();
+    },
+    enterFullscreen: () => ref.current?.enterFullscreen() ?? Promise.resolve(),
+    exitFullscreen: () => ref.current?.exitFullscreen() ?? Promise.resolve(),
+    toggleFullscreen: () => ref.current?.toggleFullscreen() ?? Promise.resolve(),
+    isFullscreen: () => ref.current?.isFullscreen() ?? false,
+    setScene: (id) => ref.current?.setScene(id) ?? false,
+    nextScene: () => ref.current?.nextScene() ?? false,
+    previousScene: () => ref.current?.previousScene() ?? false,
+    getActiveSceneId: () => ref.current?.getActiveSceneId() ?? null,
+    getSceneIds: () => ref.current?.getSceneIds() ?? [],
+    isSceneTransitioning: () => ref.current?.isSceneTransitioning() ?? false,
+    enterVR: () => ref.current?.enterVR() ?? Promise.resolve(false),
+    exitVR: () => ref.current?.exitVR() ?? Promise.resolve(),
+    toggleVR: () => ref.current?.toggleVR() ?? Promise.resolve(false),
+    isVRAvailable: () => ref.current?.isVRAvailable() ?? false,
+    isVREnabled: () => ref.current?.isVREnabled() ?? false,
+    getVRMode: () => ref.current?.getVRMode() ?? null,
+    requestVRPermission: () => ref.current?.requestVRPermission() ?? Promise.resolve(false),
+    getVideo: () => ref.current?.getVideo() ?? null,
+    subscribeVideo: (onStoreChange) => ref.current?.subscribeVideo(onStoreChange) ?? (() => {
+    }),
+    playVideo: () => ref.current?.playVideo() ?? Promise.resolve(),
+    pauseVideo: () => {
+      ref.current?.pauseVideo();
+    },
+    toggleVideo: () => {
+      ref.current?.toggleVideo();
+    },
+    seekVideo: (time) => {
+      ref.current?.seekVideo(time);
+    },
+    setVideoVolume: (volume) => {
+      ref.current?.setVideoVolume(volume);
+    },
+    setVideoMuted: (muted) => {
+      ref.current?.setVideoMuted(muted);
+    },
+    toggleVideoMuted: () => {
+      ref.current?.toggleVideoMuted();
+    },
+    getBackgroundAudio: () => ref.current?.getBackgroundAudio() ?? null,
+    subscribeBackgroundAudio: (onStoreChange) => ref.current?.subscribeBackgroundAudio(onStoreChange) ?? (() => {
+    }),
+    playBackgroundAudio: () => ref.current?.playBackgroundAudio() ?? Promise.resolve(),
+    pauseBackgroundAudio: () => {
+      ref.current?.pauseBackgroundAudio();
+    },
+    toggleBackgroundAudio: () => {
+      ref.current?.toggleBackgroundAudio();
+    },
+    setBackgroundAudioVolume: (volume) => {
+      ref.current?.setBackgroundAudioVolume(volume);
+    },
+    setBackgroundAudioMuted: (muted) => {
+      ref.current?.setBackgroundAudioMuted(muted);
+    },
+    toggleBackgroundAudioMuted: () => {
+      ref.current?.toggleBackgroundAudioMuted();
+    },
+    startAutoRotate: () => {
+      ref.current?.startAutoRotate();
+    },
+    stopAutoRotate: () => {
+      ref.current?.stopAutoRotate();
+    }
+  };
+}
+function usePanoViewer() {
+  const ref = (0, import_react33.useRef)(null);
+  const handle = (0, import_react33.useMemo)(() => createPanoViewerHandle(ref), []);
+  return (0, import_react33.useMemo)(() => ({ ref, ...handle }), [handle]);
+}
+
 // src/sphere.tsx
 var import_fiber15 = require("@react-three/fiber");
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_three10 = require("three");
 
 // src/asset-url.ts
@@ -9187,7 +9271,7 @@ function resolveUrlAgainstFile(fileUrl, path) {
 }
 
 // src/pano-filter/pano-basic-material.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -9347,13 +9431,13 @@ function PanoBasicMaterial({
   toneMapped = false
 }) {
   const snapshot = usePanoFilterSnapshot();
-  const materialRef = (0, import_react33.useRef)(null);
-  const intensityRef = (0, import_react33.useRef)(snapshot.intensity);
-  const intensityUniformRef = (0, import_react33.useRef)(null);
+  const materialRef = (0, import_react34.useRef)(null);
+  const intensityRef = (0, import_react34.useRef)(snapshot.intensity);
+  const intensityUniformRef = (0, import_react34.useRef)(null);
   intensityRef.current = snapshot.intensity;
   const active = isPanoFilterActive(snapshot);
   const preset = snapshot.preset;
-  const onBeforeCompile = (0, import_react33.useMemo)(() => {
+  const onBeforeCompile = (0, import_react34.useMemo)(() => {
     if (!active || preset === "none") {
       return void 0;
     }
@@ -9370,7 +9454,7 @@ function PanoBasicMaterial({
     compile.toString = () => `pano-filter:${preset}`;
     return compile;
   }, [active, preset]);
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react34.useLayoutEffect)(() => {
     if (!active) {
       intensityUniformRef.current = null;
     }
@@ -9380,7 +9464,7 @@ function PanoBasicMaterial({
     }
     material.needsUpdate = true;
   }, [active, preset]);
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react34.useLayoutEffect)(() => {
     if (intensityUniformRef.current) {
       intensityUniformRef.current.value = snapshot.intensity;
     }
@@ -9403,12 +9487,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_react34.useState)(null);
-  const onLoadRef = (0, import_react34.useRef)(onLoad);
-  const onErrorRef = (0, import_react34.useRef)(onError);
+  const [texture, setTexture] = (0, import_react35.useState)(null);
+  const onLoadRef = (0, import_react35.useRef)(onLoad);
+  const onErrorRef = (0, import_react35.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -9447,7 +9531,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  (0, import_react34.useEffect)(
+  (0, import_react35.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9467,7 +9551,7 @@ function Sphere({
 }) {
   const gl = (0, import_fiber15.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = (0, import_react34.useMemo)(
+  const resolvedPreviewUrl = (0, import_react35.useMemo)(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -9486,11 +9570,11 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = (0, import_react34.useRef)(false);
-  (0, import_react34.useEffect)(() => {
+  const readyRef = (0, import_react35.useRef)(false);
+  (0, import_react35.useEffect)(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -9522,7 +9606,7 @@ function Sphere({
 
 // src/video/pano-video.tsx
 var import_fiber16 = require("@react-three/fiber");
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_three11 = require("three");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
@@ -9609,10 +9693,10 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture(poster, onError) {
   const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react35.useState)(null);
-  const onErrorRef = (0, import_react35.useRef)(onError);
+  const [texture, setTexture] = (0, import_react36.useState)(null);
+  const onErrorRef = (0, import_react36.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -9649,7 +9733,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react35.useEffect)(
+  (0, import_react36.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9707,38 +9791,38 @@ function PanoVideo({
   onTrackChange
 }) {
   const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const host = (0, import_react35.useContext)(PanoVideoHostContext);
-  const overlay = (0, import_react35.useContext)(PanoChromeOverlayContext);
-  const variants = (0, import_react35.useMemo)(
+  const host = (0, import_react36.useContext)(PanoVideoHostContext);
+  const overlay = (0, import_react36.useContext)(PanoChromeOverlayContext);
+  const variants = (0, import_react36.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react35.useMemo)(
+  const captionAppearance = (0, import_react36.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react35.useState)(
+  const [variantId, setVariantId] = (0, import_react36.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react35.useState)(
+  const [trackId, setTrackId] = (0, import_react36.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react35.useState)(false);
-  const autoPlayRef = (0, import_react35.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react36.useState)(false);
+  const autoPlayRef = (0, import_react36.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react35.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react35.useRef)(
+  const blockedRef = (0, import_react36.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react36.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react35.useRef)({
+  const mediaCapabilitiesRef = (0, import_react36.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react35.useRef)(null);
+  const storeRef = (0, import_react36.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -9748,7 +9832,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react35.useRef)({
+  const actionsRef = (0, import_react36.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -9768,19 +9852,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  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);
+  const onLoadRef = (0, import_react36.useRef)(onLoad);
+  const onErrorRef = (0, import_react36.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react36.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react36.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react36.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react36.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react35.useMemo)(() => {
+  const resource = (0, import_react36.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9797,7 +9881,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react35.useEffect)(
+  (0, import_react36.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -9812,13 +9896,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -9841,7 +9925,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react35.useCallback)(
+  const emitSnapshot = (0, import_react36.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -9893,7 +9977,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react35.useMemo)(
+  const controller = (0, import_react36.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -9945,7 +10029,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -9958,7 +10042,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -9971,10 +10055,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -10031,7 +10115,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10121,7 +10205,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10134,7 +10218,7 @@ function PanoVideo({
     video.playsInline = playsInline;
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10184,7 +10268,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10219,7 +10303,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -10255,7 +10339,7 @@ function PanoVideo({
 
 // src/scenes.tsx
 var import_fiber21 = require("@react-three/fiber");
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_three19 = require("three");
 
 // src/scene-transitions/presets.ts
@@ -10306,7 +10390,7 @@ function isSnapshotTransition(preset) {
 
 // src/scene-transitions/particle-overlay.tsx
 var import_fiber17 = require("@react-three/fiber");
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_three13 = require("three");
 
 // src/scene-transitions/glsl.ts
@@ -10438,12 +10522,12 @@ function ParticleOverlay({
   onFinish
 }) {
   const { camera } = (0, import_fiber17.useThree)();
-  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)(
+  const meshRef = (0, import_react37.useRef)(null);
+  const startRef = (0, import_react37.useRef)(null);
+  const finishedRef = (0, import_react37.useRef)(false);
+  const directionRef = (0, import_react37.useRef)(new import_three13.Vector3());
+  const geometry = (0, import_react37.useMemo)(() => createParticleGeometry(), []);
+  const material = (0, import_react37.useMemo)(
     () => new import_three13.ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -10459,9 +10543,9 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  (0, import_react36.useEffect)(() => () => geometry.dispose(), [geometry]);
-  (0, import_react36.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react37.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react37.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -10497,7 +10581,7 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 var import_fiber18 = require("@react-three/fiber");
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_three15 = require("three");
 
 // src/scene-transitions/snapshot-shaders.ts
@@ -10786,18 +10870,18 @@ function SnapshotOverlay({
   onFinish
 }) {
   const { camera, gl } = (0, import_fiber18.useThree)();
-  const meshRef = (0, import_react37.useRef)(null);
-  const startRef = (0, import_react37.useRef)(null);
-  const finishedRef = (0, import_react37.useRef)(false);
-  const directionRef = (0, import_react37.useRef)(new import_three15.Vector3());
-  const material = (0, import_react37.useMemo)(() => {
+  const meshRef = (0, import_react38.useRef)(null);
+  const startRef = (0, import_react38.useRef)(null);
+  const finishedRef = (0, import_react38.useRef)(false);
+  const directionRef = (0, import_react38.useRef)(new import_three15.Vector3());
+  const material = (0, import_react38.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  (0, import_react37.useEffect)(() => () => material?.dispose(), [material]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => () => material?.dispose(), [material]);
+  (0, import_react38.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
@@ -10879,7 +10963,7 @@ function TransitionOverlay(props) {
 
 // src/tile/texture-manager-context.tsx
 var import_fiber19 = require("@react-three/fiber");
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/tile/texture-manager.ts
 var import_three16 = require("three");
@@ -11104,7 +11188,7 @@ var TileTextureManager = class {
 
 // src/tile/texture-manager-context.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react38.createContext)(
+var TileTextureManagerContext = (0, import_react39.createContext)(
   null
 );
 function TileTextureManagerProvider({
@@ -11114,7 +11198,7 @@ function TileTextureManagerProvider({
 }) {
   const gl = (0, import_fiber19.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react38.useMemo)(
+  const manager = (0, import_react39.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11123,19 +11207,19 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return (0, import_react38.useContext)(TileTextureManagerContext);
+  return (0, import_react39.useContext)(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
 var import_fiber20 = require("@react-three/fiber");
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_three18 = require("three");
 
 // src/tile/face-layout.ts
@@ -11324,10 +11408,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_react39.useState)(null);
-  const onErrorRef = (0, import_react39.useRef)(onError);
+  const [texture, setTexture] = (0, import_react40.useState)(null);
+  const onErrorRef = (0, import_react40.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -11364,7 +11448,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react39.useEffect)(
+  (0, import_react40.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -11377,7 +11461,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react39.useMemo)(() => {
+  const geometry = (0, import_react40.useMemo)(() => {
     const nextGeometry = new import_three18.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -11395,7 +11479,7 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  (0, import_react39.useEffect)(
+  (0, import_react40.useEffect)(
     () => () => {
       geometry.dispose();
     },
@@ -11436,14 +11520,14 @@ function PreviewCube({
   ));
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react39.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react40.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_react39.useEffect)(
+  (0, import_react40.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -11456,7 +11540,7 @@ function useManagedTexture(manager, key, url, address) {
   );
   return snapshot;
 }
-var TileMesh = (0, import_react39.memo)(function TileMesh2({
+var TileMesh = (0, import_react40.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -11489,7 +11573,7 @@ var TileMesh = (0, import_react39.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react39.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react40.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
@@ -11663,10 +11747,10 @@ function Tile({
   onLevelChange
 }) {
   const { camera, gl, size } = (0, import_fiber20.useThree)();
-  const multiresConfig = (0, import_react39.useMemo)(() => parseMultires(multires), [multires]);
+  const multiresConfig = (0, import_react40.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react39.useMemo)(
+  const candidatesByLevel = (0, import_react40.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -11678,13 +11762,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react39.useRef)(onLoadProgress);
-  const errorRef = (0, import_react39.useRef)(onTileError);
-  const levelChangeRef = (0, import_react39.useRef)(onLevelChange);
+  const progressRef = (0, import_react40.useRef)(onLoadProgress);
+  const errorRef = (0, import_react40.useRef)(onTileError);
+  const levelChangeRef = (0, import_react40.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react39.useMemo)(
+  const ownedManager = (0, import_react40.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11705,7 +11789,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -11715,11 +11799,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react39.useRef)(false);
-  (0, import_react39.useEffect)(() => {
+  const readyRef = (0, import_react40.useRef)(false);
+  (0, import_react40.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -11727,31 +11811,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react39.useMemo)(
+  const resolveUrl = (0, import_react40.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  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)(() => {
+  const [layers, setLayers] = (0, import_react40.useState)([]);
+  const layerTokenRef = (0, import_react40.useRef)("");
+  const currentLevelRef = (0, import_react40.useRef)(1);
+  const lastUpdateAtRef = (0, import_react40.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react40.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react40.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react40.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react40.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react40.useRef)(new import_three18.Frustum());
+  const projectionMatrixRef = (0, import_react40.useRef)(new import_three18.Matrix4());
+  const visibilityCameraRef = (0, import_react40.useRef)(new import_three18.PerspectiveCamera());
+  (0, import_react40.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -11902,9 +11986,9 @@ function SnapshotCapture({
   onCaptured
 }) {
   const { camera, gl, scene, size } = (0, import_fiber21.useThree)();
-  const capturedRequestRef = (0, import_react40.useRef)(0);
-  const renderTargetRef = (0, import_react40.useRef)(null);
-  (0, import_react40.useEffect)(
+  const capturedRequestRef = (0, import_react41.useRef)(0);
+  const renderTargetRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
@@ -11960,50 +12044,50 @@ function ScenesController({
   snapshotMaxPixels = 3686400,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = (0, import_react40.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react41.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react40.useMemo)(
+  const transition = (0, import_react41.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react40.useMemo)(
+  const sceneMap = (0, import_react41.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react40.useState)([
+  const [slots, setSlots] = (0, import_react41.useState)([
     initialScene,
     null
   ]);
-  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);
+  const [activeSlot, setActiveSlot] = (0, import_react41.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react41.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react41.useState)(null);
+  const [phase, setPhase] = (0, import_react41.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react41.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react41.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react41.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react41.useState)(0);
+  const requestedSceneIdRef = (0, import_react41.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react41.useRef)("start");
+  const interactionReleaseRef = (0, import_react41.useRef)(null);
+  const slotsRef = (0, import_react41.useRef)(slots);
+  const phaseRef = (0, import_react41.useRef)(phase);
+  const liveSlotRef = (0, import_react41.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react41.useRef)(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = (0, import_react40.useCallback)(() => {
+  const releaseInteraction = (0, import_react41.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react40.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react41.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = (0, import_react40.useCallback)((scene) => {
+  const startPreload = (0, import_react41.useCallback)((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -12014,7 +12098,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -12038,7 +12122,7 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = (0, import_react40.useCallback)((slot) => {
+  const handleReady = (0, import_react41.useCallback)((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -12069,7 +12153,7 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = (0, import_react40.useCallback)((nextSnapshot) => {
+  const handleCaptured = (0, import_react41.useCallback)((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -12091,7 +12175,7 @@ function ScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = (0, import_react40.useCallback)(() => {
+  const finishTransition = (0, import_react41.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -12116,12 +12200,12 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  (0, import_react40.useEffect)(() => () => {
+  (0, import_react41.useEffect)(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
   const { gl } = (0, import_fiber21.useThree)();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -12145,7 +12229,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_react40.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react41.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SnapshotCapture,
       {
@@ -12197,11 +12281,11 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = (0, import_react40.useState)(
+  const [internalId, setInternalId] = (0, import_react41.useState)(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
-  const requestSceneChange = (0, import_react40.useCallback)(
+  const requestSceneChange = (0, import_react41.useCallback)(
     (id) => {
       if (isControlled) {
         onActiveSceneIdChange?.(id);
@@ -12211,13 +12295,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = (0, import_react40.useRef)(scenes);
+  const scenesRef = (0, import_react41.useRef)(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = (0, import_react40.useRef)(resolvedId);
+  const resolvedIdRef = (0, import_react41.useRef)(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = (0, import_react40.useContext)(ScenesHostContext);
-  const phaseRef = (0, import_react40.useRef)("idle");
-  (0, import_react40.useEffect)(() => {
+  const host = (0, import_react41.useContext)(ScenesHostContext);
+  const phaseRef = (0, import_react41.useRef)("idle");
+  (0, import_react41.useEffect)(() => {
     if (!host) {
       return;
     }
@@ -12287,25 +12371,25 @@ function Scenes({
 
 // src/hotspot/image-hotspot.tsx
 var import_fiber23 = require("@react-three/fiber");
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_three22 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
 var import_fiber22 = require("@react-three/fiber");
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_three20 = require("three");
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/webvr/stereo-html.tsx
 var import_drei = require("@react-three/drei");
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function useFallbackStereoView() {
-  const runtime = (0, import_react41.useContext)(WebVRRuntimeContext);
+  const runtime = (0, import_react42.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = (0, import_react41.useSyncExternalStore)(
+  const fallback = (0, import_react42.useSyncExternalStore)(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -12419,16 +12503,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react42.useState)(false);
-  (0, import_react42.useEffect)(() => {
+  const [imageFailed, setImageFailed] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = (0, import_react42.useMemo)(
+  const resolvedAppearance = (0, import_react43.useMemo)(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = (0, import_react42.useMemo)(
+  const bubbleStyle = (0, import_react43.useMemo)(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -12807,18 +12891,18 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react43.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react43.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react44.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react44.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
   const { camera, size } = (0, import_fiber22.useThree)();
-  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)(
+  const groupRef = (0, import_react44.useRef)(null);
+  const tooltipAnchorRef = (0, import_react44.useRef)(null);
+  const dragStateRef = (0, import_react44.useRef)(null);
+  const suppressNextClickRef = (0, import_react44.useRef)(false);
+  const [hovered, setHovered] = (0, import_react44.useState)(false);
+  const [dragging, setDragging] = (0, import_react44.useState)(false);
+  const [pinned, setPinned] = (0, import_react44.useState)(false);
+  const tooltipContent = (0, import_react44.useMemo)(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
@@ -12834,17 +12918,17 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = (0, import_react43.useMemo)(
+  const worldPosition = (0, import_react44.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react43.useMemo)(
+  const surfaceQuaternion3 = (0, import_react44.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = (0, import_react43.useMemo)(() => {
+  const focusGeometry = (0, import_react44.useMemo)(() => {
     const planeGeometry = new import_three20.PlaneGeometry(1, 1);
     const geometry = new import_three20.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -12871,14 +12955,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  (0, import_react43.useEffect)(
+  (0, import_react44.useEffect)(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (!cursorApi) {
       return;
     }
@@ -12900,14 +12984,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  (0, import_react43.useEffect)(
+  (0, import_react44.useEffect)(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  (0, import_react43.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_react44.useEffect)(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -12916,12 +13000,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (acceptsPointer) {
       return;
     }
@@ -12934,7 +13018,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  (0, import_react43.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -13260,12 +13344,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_react44.useState)(null);
-  const onLoadRef = (0, import_react44.useRef)(onLoad);
-  const onErrorRef = (0, import_react44.useRef)(onError);
+  const [texture, setTexture] = (0, import_react45.useState)(null);
+  const onLoadRef = (0, import_react45.useRef)(onLoad);
+  const onErrorRef = (0, import_react45.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13303,7 +13387,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react44.useEffect)(
+  (0, import_react45.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -13325,13 +13409,13 @@ function ImageHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_react46 = require("react");
+var import_react47 = 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_react45 = require("react");
+var import_react46 = require("react");
 var import_three23 = require("three");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var LINE_WORLD_POSITION = new import_three23.Vector3();
@@ -13364,10 +13448,10 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = (0, import_react45.useRef)(null);
+  const lineRef = (0, import_react46.useRef)(null);
   const { camera, size } = (0, import_fiber24.useThree)();
   const dash = resolveDash(dashSize, gapSize);
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react46.useLayoutEffect)(() => {
     if (!dash.dashed) {
       return;
     }
@@ -13657,24 +13741,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react46.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = (0, import_react47.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react46.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react46.useMemo)(
+  const center = (0, import_react47.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react47.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = (0, import_react46.useMemo)(
+  const strokePoints = (0, import_react47.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react46.useRef)(null);
+  const startVerticesRef = (0, import_react47.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react46.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react47.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -13754,7 +13838,7 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_three25 = require("three");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
@@ -13873,16 +13957,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react47.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = (0, import_react48.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react47.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = (0, import_react47.useMemo)(
+  const center = (0, import_react48.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = (0, import_react48.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useEffect)(() => {
+  const startVerticesRef = (0, import_react48.useRef)(null);
+  (0, import_react48.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -13948,7 +14032,7 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_three26 = require("three");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
@@ -14139,12 +14223,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react48.useState)(null);
-  const onLoadRef = (0, import_react48.useRef)(onLoad);
-  const onErrorRef = (0, import_react48.useRef)(onError);
+  const [texture, setTexture] = (0, import_react49.useState)(null);
+  const onLoadRef = (0, import_react49.useRef)(onLoad);
+  const onErrorRef = (0, import_react49.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -14183,7 +14267,7 @@ function GraphicHotspot(props) {
 
 // src/hotspot/sequence-hotspot.tsx
 var import_fiber25 = require("@react-three/fiber");
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_three27 = require("three");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
@@ -14200,12 +14284,12 @@ function useSpriteTexture({
   onLoadProgress
 }) {
   const gl = (0, import_fiber25.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react49.useState)(null);
-  const onErrorRef = (0, import_react49.useRef)(onError);
-  const onLoadProgressRef = (0, import_react49.useRef)(onLoadProgress);
+  const [texture, setTexture] = (0, import_react50.useState)(null);
+  const onErrorRef = (0, import_react50.useRef)(onError);
+  const onLoadProgressRef = (0, import_react50.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14246,7 +14330,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react49.useEffect)(
+  (0, import_react50.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14275,24 +14359,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  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);
+  const [frameIndex, setFrameIndex] = (0, import_react50.useState)(0);
+  const elapsedRef = (0, import_react50.useRef)(0);
+  const frameIndexRef = (0, import_react50.useRef)(0);
+  const endedRef = (0, import_react50.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react50.useRef)(null);
+  const onFrameChangeRef = (0, import_react50.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react50.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react50.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14306,13 +14390,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14366,7 +14450,7 @@ function SequenceHotspot({
 
 // src/hotspot/video-hotspot.tsx
 var import_fiber26 = require("@react-three/fiber");
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_three28 = require("three");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function clampVolume2(volume) {
@@ -14377,10 +14461,10 @@ function clampVolume2(volume) {
 }
 function usePosterTexture2(id, poster, onError) {
   const gl = (0, import_fiber26.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react50.useState)(null);
-  const onErrorRef = (0, import_react50.useRef)(onError);
+  const [texture, setTexture] = (0, import_react51.useState)(null);
+  const onErrorRef = (0, import_react51.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -14417,7 +14501,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react50.useEffect)(
+  (0, import_react51.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14435,14 +14519,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  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);
+  const [resource, setResource] = (0, import_react51.useState)(null);
+  const onEndedRef = (0, import_react51.useRef)(onEnded);
+  const onErrorRef = (0, import_react51.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react51.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -14543,11 +14627,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react50.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react50.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react51.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react51.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14557,7 +14641,7 @@ function VideoHotspot({
     resource.video.playsInline = playsInline;
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14585,7 +14669,7 @@ function VideoHotspot({
 
 // src/hotspot/audio-hotspot.tsx
 var import_fiber27 = require("@react-three/fiber");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_three29 = require("three");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var SPEAKER_TEXTURE_SIZE = 512;
@@ -14651,8 +14735,8 @@ function createSpeakerTexture(state) {
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = (0, import_react51.useState)({ playing: null, stopped: null });
-  (0, import_react51.useEffect)(() => {
+  const [textures, setTextures] = (0, import_react52.useState)({ playing: null, stopped: null });
+  (0, import_react52.useEffect)(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -14669,10 +14753,10 @@ function useSpeakerTextures(enabled) {
 }
 function useIconTexture(icon, enabled, onError, id) {
   const gl = (0, import_fiber27.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react51.useState)(null);
-  const onErrorRef = (0, import_react51.useRef)(onError);
+  const [texture, setTexture] = (0, import_react52.useState)(null);
+  const onErrorRef = (0, import_react52.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -14709,7 +14793,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  (0, import_react51.useEffect)(
+  (0, import_react52.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14728,13 +14812,13 @@ function useAudioHowl({
   playing,
   src
 }) {
-  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);
+  const [howl, setHowl] = (0, import_react52.useState)(null);
+  const playingRef = (0, import_react52.useRef)(playing);
+  const loopRef = (0, import_react52.useRef)(loop ?? false);
+  const onEndedRef = (0, import_react52.useRef)(onEnded);
+  const onErrorRef = (0, import_react52.useRef)(onError);
+  const onPlaybackErrorRef = (0, import_react52.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react52.useRef)(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -14742,7 +14826,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -14779,7 +14863,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -14822,15 +14906,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_react51.useRef)(playing);
+  const playingRef = (0, import_react52.useRef)(playing);
   playingRef.current = playing;
-  const mutedRef = (0, import_react51.useRef)(muted);
-  const volumeRef = (0, import_react51.useRef)(volume);
-  const rangeRef = (0, import_react51.useRef)(range);
+  const mutedRef = (0, import_react52.useRef)(muted);
+  const volumeRef = (0, import_react52.useRef)(volume);
+  const rangeRef = (0, import_react52.useRef)(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!howl) {
       return;
     }
@@ -14840,7 +14924,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -14875,7 +14959,7 @@ function AudioHotspot({
 }
 
 // src/hotspot/text-hotspot.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_three30 = require("three");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
@@ -15097,12 +15181,12 @@ function createTextTexture(text, width, height, style) {
   return texture;
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react52.useState)(null);
-  const onLoadRef = (0, import_react52.useRef)(onLoad);
-  const onErrorRef = (0, import_react52.useRef)(onError);
+  const [texture, setTexture] = (0, import_react53.useState)(null);
+  const onLoadRef = (0, import_react53.useRef)(onLoad);
+  const onErrorRef = (0, import_react53.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -15366,6 +15450,7 @@ function IframeHotspot({
   resolvePanoContextMenuEntries,
   unwrapPolygonVertices,
   usePanoEvents,
+  usePanoViewer,
   validatePolygonVertices,
   validatePolylineVertices,
   vector3ToPanoPosition