@ericchen1990/pano-view 3.0.0 → 3.1.0

package/dist/index.cjs

@@ -2306,7 +2306,7 @@ module.exports = __toCommonJS(index_exports);
 // src/pano-viewer.tsx
 var import_fiber10 = require("@react-three/fiber");
 var import_xr3 = require("@react-three/xr");
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/background-audio-host.ts
 var import_react = require("react");
@@ -2501,6 +2501,7 @@ var DEFAULT_ROTATE_DAMPING = 14;
 var DEFAULT_ZOOM_DAMPING = 16;
 var DEFAULT_FRICTION_STOP = 0.01;
 var VIEW_SETTLE_EPSILON = 1e-3;
+var DEFAULT_NAVIGATION_DURATION = 700;
 var PanoramaViewContext = (0, import_react3.createContext)(null);
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
@@ -2520,6 +2521,15 @@ function resolveDamping(value, fallback) {
 function resolveFrictionStop(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_FRICTION_STOP;
 }
+function resolveNavigationDuration(value) {
+  return Number.isFinite(value) && value >= 0 ? value : DEFAULT_NAVIGATION_DURATION;
+}
+function applyNavigationEasing(progress, easing) {
+  if (easing === "linear") {
+    return progress;
+  }
+  return progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+}
 function viewsEqual(a, b) {
   return a.yaw === b.yaw && a.pitch === b.pitch && a.fov === b.fov;
 }
@@ -2553,13 +2563,14 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
   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);
+  const activeNavigationRef = (0, import_react3.useRef)(null);
   optionsRef.current = options;
   eventBusRef.current = eventBus;
   xrSessionRef.current = xrSession;
   minFovRef.current = minFov;
   maxFovRef.current = maxFov;
   const hasInertia = () => yawVelocityRef.current !== 0 || pitchVelocityRef.current !== 0 || zoomVelocityRef.current !== 0;
-  const isUserInteracting = () => mouseActiveRef.current || touchActiveRef.current || keyboardActiveRef.current || gyroActiveRef.current || interactionLockCountRef.current > 0 || xrSessionRef.current != null || hasInertia();
+  const isUserInteracting = () => mouseActiveRef.current || touchActiveRef.current || keyboardActiveRef.current || gyroActiveRef.current || interactionLockCountRef.current > 0 || xrSessionRef.current != null || activeNavigationRef.current != null || hasInertia();
   const syncInteracting = () => {
     interactingRef.current = mouseActiveRef.current || touchActiveRef.current;
   };
@@ -2601,6 +2612,14 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     zoomVelocityRef.current = 0;
     lastVelocitySampleAtRef.current = null;
   };
+  const cancelNavigation = () => {
+    const navigation = activeNavigationRef.current;
+    if (!navigation) {
+      return;
+    }
+    activeNavigationRef.current = null;
+    navigation.resolve({ status: "cancelled" });
+  };
   const markDirty = () => {
     dirtyRef.current = true;
     settledRef.current = false;
@@ -2613,6 +2632,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     }
   };
   const acquireInteractionLock = () => {
+    cancelNavigation();
     interactionLockCountRef.current += 1;
     stopVelocity();
     if (mouseActiveRef.current) {
@@ -2637,6 +2657,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     };
   };
   const setView = (view, setOptions) => {
+    cancelNavigation();
     const nextView = hardConstrainView(view);
     if (gyroActiveRef.current) {
       gyroOffsetRef.current = {
@@ -2651,7 +2672,66 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     }
     markDirty();
   };
+  const startNavigation = (targetInput, options2) => {
+    cancelNavigation();
+    if (xrSessionRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0) {
+      return Promise.resolve({ status: "cancelled" });
+    }
+    const from = { ...viewRef.current };
+    const safeTargetInput = {
+      yaw: targetInput.yaw !== void 0 && Number.isFinite(targetInput.yaw) ? targetInput.yaw : from.yaw,
+      pitch: targetInput.pitch !== void 0 && Number.isFinite(targetInput.pitch) ? targetInput.pitch : from.pitch,
+      fov: targetInput.fov !== void 0 && Number.isFinite(targetInput.fov) ? targetInput.fov : from.fov
+    };
+    const target = hardConstrainView(safeTargetInput, from);
+    const duration = resolveNavigationDuration(options2?.duration);
+    const rawYawDelta = targetInput.yaw !== void 0 && Number.isFinite(targetInput.yaw) ? safeTargetInput.yaw - from.yaw : 0;
+    const yawDelta = options2?.shortestPath === false ? rawYawDelta : shortestYawDelta(from.yaw, target.yaw);
+    stopVelocity();
+    targetViewRef.current = target;
+    markDirty();
+    if (duration === 0) {
+      viewRef.current = target;
+      return Promise.resolve({ status: "completed" });
+    }
+    return new Promise((resolve) => {
+      activeNavigationRef.current = {
+        from,
+        target,
+        yawDelta,
+        startedAt: performance.now(),
+        duration,
+        easing: options2?.easing,
+        resolve
+      };
+    });
+  };
+  const lookTo = (position, options2) => startNavigation(
+    {
+      yaw: position.yaw,
+      pitch: position.pitch,
+      fov: options2?.fov ?? viewRef.current.fov
+    },
+    options2
+  );
+  const moveTo = (position, options2) => startNavigation(
+    {
+      yaw: position.yaw,
+      pitch: position.pitch,
+      fov: viewRef.current.fov
+    },
+    options2
+  );
+  const zoomTo = (fov, options2) => startNavigation(
+    {
+      yaw: viewRef.current.yaw,
+      pitch: viewRef.current.pitch,
+      fov
+    },
+    options2
+  );
   const applyViewDelta = (delta, applyOptions) => {
+    cancelNavigation();
     if (interactionLockCountRef.current > 0 || xrSessionRef.current != null) {
       return false;
     }
@@ -2702,10 +2782,16 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       getTargetView: () => ({ ...targetViewRef.current }),
       setView,
       reset: () => setView(initialViewRef.current),
+      lookTo,
+      moveTo,
+      zoomTo,
       applyViewDelta,
       setKeyboardActive: (active) => {
         const wasActive = keyboardActiveRef.current;
         keyboardActiveRef.current = active;
+        if (active) {
+          cancelNavigation();
+        }
         if (active && !wasActive) {
           eventBusRef.current.emit("viewinteractionstart", {
             source: "keyboard"
@@ -2723,6 +2809,9 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
         } else {
           touchActiveRef.current = active;
         }
+        if (active) {
+          cancelNavigation();
+        }
         syncInteracting();
         if (active && !wasActive) {
           eventBusRef.current.emit("viewinteractionstart", { source });
@@ -2739,6 +2828,9 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       isInteractionLocked: () => interactionLockCountRef.current > 0,
       isUserInteracting,
       setGyroActive: (active) => {
+        if (active) {
+          cancelNavigation();
+        }
         gyroActiveRef.current = active;
         gyroOffsetRef.current = { yaw: 0, pitch: 0 };
         stopVelocity();
@@ -2775,7 +2867,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       acquireInteractionLock,
       applyAutoRotation: (yawDelta) => {
         const inertiaFinished = yawVelocityRef.current === 0 && pitchVelocityRef.current === 0 && zoomVelocityRef.current === 0;
-        if (!Number.isFinite(yawDelta) || xrSessionRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0 || interactingRef.current || keyboardActiveRef.current || !inertiaFinished) {
+        if (!Number.isFinite(yawDelta) || xrSessionRef.current != null || activeNavigationRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0 || interactingRef.current || keyboardActiveRef.current || !inertiaFinished) {
           return false;
         }
         targetViewRef.current.yaw += yawDelta;
@@ -2785,6 +2877,12 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     }),
     []
   );
+  (0, import_react3.useEffect)(
+    () => () => {
+      cancelNavigation();
+    },
+    []
+  );
   (0, import_react3.useEffect)(() => {
     initialViewRef.current = { ...initialView };
     setView(initialView);
@@ -2794,6 +2892,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       return;
     }
     if (xrSessionRef.current && gl.xr.isPresenting) {
+      cancelNavigation();
       const xrCamera = gl.xr.getCamera();
       xrEulerRef.current.setFromQuaternion(xrCamera.quaternion, "YXZ");
       const nextView2 = {
@@ -2814,6 +2913,48 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       }
       return;
     }
+    const navigation = activeNavigationRef.current;
+    if (navigation) {
+      const progress = Math.min(
+        1,
+        Math.max(0, (performance.now() - navigation.startedAt) / navigation.duration)
+      );
+      const easedProgress = applyNavigationEasing(progress, navigation.easing);
+      const nextView2 = {
+        yaw: normalizeYaw(navigation.from.yaw + navigation.yawDelta * easedProgress),
+        pitch: navigation.from.pitch + (navigation.target.pitch - navigation.from.pitch) * easedProgress,
+        fov: navigation.from.fov + (navigation.target.fov - navigation.from.fov) * easedProgress
+      };
+      const completed = progress === 1;
+      viewRef.current = completed ? { ...navigation.target } : nextView2;
+      eulerRef.current.set(
+        import_three.MathUtils.degToRad(viewRef.current.pitch),
+        import_three.MathUtils.degToRad(-viewRef.current.yaw),
+        import_three.MathUtils.degToRad(cameraRollRef.current),
+        "YXZ"
+      );
+      camera.quaternion.setFromEuler(eulerRef.current);
+      camera.fov = viewRef.current.fov;
+      camera.updateProjectionMatrix();
+      camera.updateMatrixWorld();
+      const emittedView = { ...viewRef.current };
+      const lastEmitted2 = lastEmittedViewRef.current;
+      if (!lastEmitted2 || !viewsEqual(lastEmitted2, emittedView)) {
+        lastEmittedViewRef.current = emittedView;
+        eventBusRef.current.emit("viewchange", emittedView);
+      }
+      if (completed) {
+        activeNavigationRef.current = null;
+        settledRef.current = true;
+        eventBusRef.current.emit("viewsettled", emittedView);
+        navigation.resolve({ status: "completed" });
+        dirtyRef.current = false;
+      } else {
+        settledRef.current = false;
+        dirtyRef.current = true;
+      }
+      return;
+    }
     const frictionStop = resolveFrictionStop(optionsRef.current.frictionStop);
     const inertiaEnabled = optionsRef.current.inertia !== false;
     if (!interactingRef.current && !gyroActiveRef.current && inertiaEnabled) {
@@ -3156,9 +3297,33 @@ function useHotspotAccessibilityLayer() {
   return { controls, registry };
 }
 
+// src/hotspot/target-registry.ts
+var import_react7 = require("react");
+var HotspotTargetRegistryContext = (0, import_react7.createContext)(
+  null
+);
+function createHotspotTargetRegistry() {
+  const targets = /* @__PURE__ */ new Map();
+  return {
+    getPosition: (id) => {
+      const target = targets.get(id);
+      return target ? { ...target.position } : null;
+    },
+    register: (id, position) => {
+      const token = Symbol(id);
+      targets.set(id, { token, position: { ...position } });
+      return () => {
+        if (targets.get(id)?.token === token) {
+          targets.delete(id);
+        }
+      };
+    }
+  };
+}
+
 // src/keyboard-controls.tsx
 var import_fiber3 = require("@react-three/fiber");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var DEFAULT_ROTATE_SPEED = 60;
 var DEFAULT_ZOOM_SPEED = 30;
 var DEFAULT_SHIFT_MULTIPLIER = 3;
@@ -3228,15 +3393,15 @@ function KeyboardControls({
   onNextScene
 }) {
   useClaimControlChannel("keyboard");
-  const controlsRef = (0, import_react7.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react8.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber3.useThree)();
-  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]);
+  const pressedRef = (0, import_react8.useRef)(/* @__PURE__ */ new Set());
+  const shiftHeldRef = (0, import_react8.useRef)(false);
+  const invertRef = (0, import_react8.useRef)(invert);
+  const fovSpeedRef = (0, import_react8.useRef)(fovSpeed);
+  const onPreviousSceneRef = (0, import_react8.useRef)(onPreviousScene);
+  const onNextSceneRef = (0, import_react8.useRef)(onNextScene);
+  const keyMap = (0, import_react8.useMemo)(() => resolveKeyMap(keys), [keys]);
   if (!controlsRef) {
     throw new Error("<KeyboardControls> must be rendered inside <PanoViewer>.");
   }
@@ -3244,7 +3409,7 @@ function KeyboardControls({
   fovSpeedRef.current = fovSpeed;
   onPreviousSceneRef.current = onPreviousScene;
   onNextSceneRef.current = onNextScene;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const element = gl.domElement;
     if (!enabled) {
       pressedRef.current.clear();
@@ -3402,7 +3567,7 @@ function KeyboardControls({
 
 // src/mouse-controls.tsx
 var import_fiber4 = require("@react-three/fiber");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var DEFAULT_ROTATE_SPEED2 = 0.35;
 var DEFAULT_ZOOM_SPEED2 = 0.08;
 var BUTTON_FLAG = {
@@ -3427,12 +3592,12 @@ function MouseControls({
   fovSpeed
 }) {
   useClaimControlChannel("mouse");
-  const controlsRef = (0, import_react8.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react9.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber4.useThree)();
-  const pointersRef = (0, import_react8.useRef)(
+  const pointersRef = (0, import_react9.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const optionsRef = (0, import_react8.useRef)({
+  const optionsRef = (0, import_react9.useRef)({
     rotateSpeed,
     zoomSpeed,
     wheel,
@@ -3449,7 +3614,7 @@ function MouseControls({
     invert,
     fovSpeed
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const element = gl.domElement;
     const allowedButtons = resolveButtons(buttons);
     const clearPointers = () => {
@@ -3573,7 +3738,7 @@ function MouseControls({
 }
 
 // src/pano-filter/host.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/pano-filter/presets.ts
 var PANO_FILTER_PRESETS = [
@@ -3614,7 +3779,7 @@ function isPanoFilterActive(snapshot) {
 }
 
 // src/pano-filter/host.ts
-var PanoFilterHostContext = (0, import_react9.createContext)(null);
+var PanoFilterHostContext = (0, import_react10.createContext)(null);
 function createPanoFilterHost() {
   return {
     snapshot: { ...DEFAULT_PANO_FILTER_SNAPSHOT },
@@ -3668,8 +3833,8 @@ function subscribeNoop() {
   };
 }
 function usePanoFilterSnapshot() {
-  const host = (0, import_react9.useContext)(PanoFilterHostContext);
-  const revision = (0, import_react9.useSyncExternalStore)(
+  const host = (0, import_react10.useContext)(PanoFilterHostContext);
+  const revision = (0, import_react10.useSyncExternalStore)(
     host ? (onStoreChange) => subscribePanoFilterHost(host, onStoreChange) : subscribeNoop,
     () => host ? getPanoFilterHostRevision(host) : 0,
     () => host ? getPanoFilterHostRevision(host) : 0
@@ -3683,9 +3848,9 @@ function isProduction2() {
 }
 
 // src/media-activation.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var PanoMediaActivationHostContext = (0, import_react10.createContext)(null);
+var PanoMediaActivationHostContext = (0, import_react11.createContext)(null);
 function createPanoMediaActivationHost() {
   return { intents: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(), revision: 0 };
 }
@@ -3708,12 +3873,12 @@ function hasPanoMediaActivationIntent(host) {
   return host.intents.size > 0;
 }
 function usePanoMediaActivationIntent(required) {
-  const host = (0, import_react10.useContext)(PanoMediaActivationHostContext);
-  const keyRef = (0, import_react10.useRef)(null);
+  const host = (0, import_react11.useContext)(PanoMediaActivationHostContext);
+  const keyRef = (0, import_react11.useRef)(null);
   if (keyRef.current === null) {
     keyRef.current = /* @__PURE__ */ Symbol("pano-media-intent");
   }
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!host || !required) {
       return;
     }
@@ -3745,12 +3910,12 @@ function PanoMediaActivationOverlay({
 }
 
 // src/pano-context-menu.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
-var PanoContextMenuOverlayContext = (0, import_react11.createContext)(null);
+var PanoContextMenuOverlayContext = (0, import_react12.createContext)(null);
 var DEFAULT_APPEARANCE = {
   background: "#161616",
   color: "#f4f4f4",
@@ -3790,11 +3955,11 @@ function DefaultContextMenuPanel({
   selectContext,
   onRequestClose
 }) {
-  const menuRef = (0, import_react11.useRef)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
+  const menuRef = (0, import_react12.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react12.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_react11.useMemo)(
+  const visibleItems = (0, import_react12.useMemo)(
     () => items.filter((item) => {
       if (!isActionItem(item)) {
         return true;
@@ -3803,7 +3968,7 @@ function DefaultContextMenuPanel({
     }),
     [items]
   );
-  const focusableIndices = (0, import_react11.useMemo)(() => {
+  const focusableIndices = (0, import_react12.useMemo)(() => {
     const indices = [];
     visibleItems.forEach((item, index) => {
       if (isActionItem(item) && !item.disabled) {
@@ -3812,7 +3977,7 @@ function DefaultContextMenuPanel({
     });
     return indices;
   }, [visibleItems]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const first = focusableIndices[0];
     setActiveIndex(first ?? 0);
     const frame = requestAnimationFrame(() => {
@@ -3823,7 +3988,7 @@ function DefaultContextMenuPanel({
     });
     return () => cancelAnimationFrame(frame);
   }, [focusableIndices]);
-  const activateItem = (0, import_react11.useCallback)(
+  const activateItem = (0, import_react12.useCallback)(
     (item) => {
       if (item.disabled) {
         return;
@@ -4029,10 +4194,10 @@ function PositionedMenuShell({
   overlayElement,
   children
 }) {
-  const shellRef = (0, import_react11.useRef)(null);
-  const [offset, setOffset] = (0, import_react11.useState)({ left: 0, top: 0 });
-  const [viewportRevision, setViewportRevision] = (0, import_react11.useState)(0);
-  (0, import_react11.useEffect)(() => {
+  const shellRef = (0, import_react12.useRef)(null);
+  const [offset, setOffset] = (0, import_react12.useState)({ left: 0, top: 0 });
+  const [viewportRevision, setViewportRevision] = (0, import_react12.useState)(0);
+  (0, import_react12.useEffect)(() => {
     const refresh = () => setViewportRevision((revision) => revision + 1);
     const viewport = window.visualViewport;
     window.addEventListener("resize", refresh);
@@ -4044,7 +4209,7 @@ function PositionedMenuShell({
       viewport?.removeEventListener("resize", refresh);
     };
   }, []);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     const shell = shellRef.current;
     if (!overlayElement || !shell) {
       return;
@@ -4080,20 +4245,20 @@ function PositionedMenuShell({
   );
 }
 function usePanoContextMenuOverlay() {
-  const [session2, setSession] = (0, import_react11.useState)(null);
-  const overlayRef = (0, import_react11.useRef)(null);
-  const [overlayElement, setOverlayElement] = (0, import_react11.useState)(
+  const [session2, setSession] = (0, import_react12.useState)(null);
+  const overlayRef = (0, import_react12.useRef)(null);
+  const [overlayElement, setOverlayElement] = (0, import_react12.useState)(
     null
   );
-  const api = (0, import_react11.useMemo)(
+  const api = (0, import_react12.useMemo)(
     () => ({ setSession, overlayRef }),
     []
   );
-  const setOverlayNode = (0, import_react11.useCallback)((node) => {
+  const setOverlayNode = (0, import_react12.useCallback)((node) => {
     overlayRef.current = node;
     setOverlayElement(node);
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!session2) {
       return;
     }
@@ -4161,13 +4326,13 @@ function PanoContextMenu({
   separatorClassName,
   children
 }) {
-  const eventBus = (0, import_react11.useContext)(PanoEventBusContext);
-  const controlsRef = (0, import_react11.useContext)(PanoramaViewContext);
-  const overlayApi = (0, import_react11.useContext)(PanoContextMenuOverlayContext);
-  const actions = (0, import_react11.useContext)(PanoContextMenuActionsContext);
-  const instanceId = (0, import_react11.useId)();
-  const sessionKeyRef = (0, import_react11.useRef)(0);
-  const propsRef = (0, import_react11.useRef)({
+  const eventBus = (0, import_react12.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react12.useContext)(PanoramaViewContext);
+  const overlayApi = (0, import_react12.useContext)(PanoContextMenuOverlayContext);
+  const actions = (0, import_react12.useContext)(PanoContextMenuActionsContext);
+  const instanceId = (0, import_react12.useId)();
+  const sessionKeyRef = (0, import_react12.useRef)(0);
+  const propsRef = (0, import_react12.useRef)({
     items,
     prepend,
     append,
@@ -4197,10 +4362,10 @@ function PanoContextMenu({
       "<PanoContextMenu> requires the PanoViewer context-menu overlay host."
     );
   }
-  const close = (0, import_react11.useCallback)(() => {
+  const close = (0, import_react12.useCallback)(() => {
     overlayApi.setSession(null);
   }, [overlayApi]);
-  const openMenu = (0, import_react11.useCallback)(
+  const openMenu = (0, import_react12.useCallback)(
     (event) => {
       event.nativeEvent.preventDefault();
       const view = controlsRef.current?.getView() ?? {
@@ -4249,7 +4414,7 @@ function PanoContextMenu({
     },
     [actions, close, controlsRef, instanceId, overlayApi]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const unsubscribeContextMenu = eventBus.subscribe(
       "contextmenu",
       openMenu
@@ -4428,11 +4593,11 @@ function composePanoContextMenuItems(props, presets) {
     ...resolvePanoContextMenuEntries(props.append ?? [], presets)
   ];
 }
-var PanoContextMenuActionsContext = (0, import_react11.createContext)(null);
+var PanoContextMenuActionsContext = (0, import_react12.createContext)(null);
 
 // src/pano-cursor.tsx
 var import_fiber5 = require("@react-three/fiber");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var DEFAULT_PANO_CURSORS = {
   default: "grab",
@@ -4447,9 +4612,9 @@ var LAYER_PRIORITY = {
   hotspotDragging: 3,
   hidden: 4
 };
-var PanoCursorContext = (0, import_react12.createContext)(null);
+var PanoCursorContext = (0, import_react13.createContext)(null);
 function usePanoCursor() {
-  return (0, import_react12.useContext)(PanoCursorContext);
+  return (0, import_react13.useContext)(PanoCursorContext);
 }
 function hotspotCursorClaimId(id) {
   return `pano-cursor:hotspot:${id}`;
@@ -4501,12 +4666,12 @@ function PanoCursorController({
   children
 }) {
   const { gl } = (0, import_fiber5.useThree)();
-  const eventBus = (0, import_react12.useContext)(PanoEventBusContext);
-  const claimsRef = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
-  const cursorsRef = (0, import_react12.useRef)(cursors);
-  const appliedCursorRef = (0, import_react12.useRef)(null);
+  const eventBus = (0, import_react13.useContext)(PanoEventBusContext);
+  const claimsRef = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
+  const cursorsRef = (0, import_react13.useRef)(cursors);
+  const appliedCursorRef = (0, import_react13.useRef)(null);
   cursorsRef.current = cursors;
-  const applyCursor = (0, import_react12.useCallback)(() => {
+  const applyCursor = (0, import_react13.useCallback)(() => {
     const next = resolveHighestCursor(claimsRef.current, cursorsRef.current);
     const element = gl.domElement;
     if (appliedCursorRef.current === next && element.style.cursor === next) {
@@ -4515,14 +4680,14 @@ function PanoCursorController({
     element.style.cursor = next;
     appliedCursorRef.current = next;
   }, [gl]);
-  const claim = (0, import_react12.useCallback)(
+  const claim = (0, import_react13.useCallback)(
     (id, layer, cursor) => {
       claimsRef.current.set(id, { layer, cursor });
       applyCursor();
     },
     [applyCursor]
   );
-  const release = (0, import_react12.useCallback)(
+  const release = (0, import_react13.useCallback)(
     (id) => {
       if (claimsRef.current.delete(id)) {
         applyCursor();
@@ -4530,7 +4695,7 @@ function PanoCursorController({
     },
     [applyCursor]
   );
-  const api = (0, import_react12.useMemo)(
+  const api = (0, import_react13.useMemo)(
     () => ({
       cursors,
       claim,
@@ -4538,7 +4703,7 @@ function PanoCursorController({
     }),
     [claim, cursors, release]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const element = gl.domElement;
     const previous = element.style.cursor;
     return () => {
@@ -4547,10 +4712,10 @@ function PanoCursorController({
       element.style.cursor = previous;
     };
   }, [gl]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     applyCursor();
   }, [applyCursor, cursors]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!eventBus) {
       return;
     }
@@ -4580,7 +4745,7 @@ function PanoCursorController({
 
 // src/pano-events.tsx
 var import_fiber6 = require("@react-three/fiber");
-var import_react13 = require("react");
+var import_react14 = require("react");
 var DEFAULT_IDLE_TIME_MS = 2e3;
 function resolveIdleTime(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_IDLE_TIME_MS;
@@ -4618,13 +4783,13 @@ function usePanoEvents({
   onVRDenied,
   onVRUnknownDevice
 }) {
-  const eventBus = (0, import_react13.useContext)(PanoEventBusContext);
-  const controlsRef = (0, import_react13.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react14.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react14.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber6.useThree)();
   if (!eventBus || !controlsRef) {
     throw new Error("usePanoEvents must be used inside <PanoViewer>.");
   }
-  const callbacksRef = (0, import_react13.useRef)({
+  const callbacksRef = (0, import_react14.useRef)({
     onViewChange,
     onViewSettled,
     onViewInteractionStart,
@@ -4688,15 +4853,15 @@ function usePanoEvents({
     onVRDenied,
     onVRUnknownDevice
   };
-  const idleElapsedRef = (0, import_react13.useRef)(0);
-  const isIdleRef = (0, import_react13.useRef)(false);
-  const idleTimeRef = (0, import_react13.useRef)(resolveIdleTime(idleTime));
+  const idleElapsedRef = (0, import_react14.useRef)(0);
+  const isIdleRef = (0, import_react14.useRef)(false);
+  const idleTimeRef = (0, import_react14.useRef)(resolveIdleTime(idleTime));
   idleTimeRef.current = resolveIdleTime(idleTime);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     idleElapsedRef.current = 0;
     isIdleRef.current = false;
   }, [idleTime]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const unsubscribers = [
       eventBus.subscribe("viewchange", (view) => {
         callbacksRef.current.onViewChange?.(view);
@@ -4777,7 +4942,7 @@ function usePanoEvents({
       }
     };
   }, [eventBus]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const element = gl.domElement;
     const handleWheel = (nativeEvent) => {
       callbacksRef.current.onWheel?.({
@@ -4790,7 +4955,7 @@ function usePanoEvents({
       element.removeEventListener("wheel", handleWheel);
     };
   }, [gl]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -4816,7 +4981,7 @@ function usePanoEvents({
     wasFullscreenRef.current = isViewerFullscreen();
     return subscribeFullscreenChange(handleFullscreenChange);
   }, [gl]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const element = gl.domElement;
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -4858,7 +5023,7 @@ function PanoEvents(props) {
 
 // src/panorama-event-surface.tsx
 var import_fiber7 = require("@react-three/fiber");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_three3 = require("three");
 
 // src/hotspot/coordinates.ts
@@ -4951,9 +5116,9 @@ function makePanoramaPointerEvent(event) {
   };
 }
 function PanoramaEventSurface() {
-  const eventBus = (0, import_react14.useContext)(PanoEventBusContext);
+  const eventBus = (0, import_react15.useContext)(PanoEventBusContext);
   const { camera, gl } = (0, import_fiber7.useThree)();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!eventBus) {
       return;
     }
@@ -5022,8 +5187,8 @@ function PanoramaEventSurface() {
 }
 
 // src/scenes-host.ts
-var import_react15 = require("react");
-var ScenesHostContext = (0, import_react15.createContext)(null);
+var import_react16 = require("react");
+var ScenesHostContext = (0, import_react16.createContext)(null);
 function createScenesHost() {
   return {
     controller: null,
@@ -5040,7 +5205,7 @@ function notifyScenesHost(host) {
 
 // src/touch-controls.tsx
 var import_fiber8 = require("@react-three/fiber");
-var import_react16 = require("react");
+var import_react17 = require("react");
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
@@ -5055,16 +5220,16 @@ function TouchControls({
   pinchZoom = true
 }) {
   useClaimControlChannel("touch");
-  const controlsRef = (0, import_react16.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react17.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber8.useThree)();
-  const pointersRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = (0, import_react16.useRef)(null);
-  const optionsRef = (0, import_react16.useRef)({ rotateSpeed, invert, pinchZoom });
+  const pointersRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = (0, import_react17.useRef)(null);
+  const optionsRef = (0, import_react17.useRef)({ rotateSpeed, invert, pinchZoom });
   if (!controlsRef) {
     throw new Error("<TouchControls> must be rendered inside <PanoViewer>.");
   }
   optionsRef.current = { rotateSpeed, invert, pinchZoom };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const element = gl.domElement;
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
@@ -5186,17 +5351,17 @@ function TouchControls({
 }
 
 // src/video/chrome-overlay.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var PanoChromeOverlayContext = (0, import_react17.createContext)(null);
+var PanoChromeOverlayContext = (0, import_react18.createContext)(null);
 function usePanoChromeOverlay() {
-  const [overlayElement, setOverlayElement] = (0, import_react17.useState)(
+  const [overlayElement, setOverlayElement] = (0, import_react18.useState)(
     null
   );
-  const setOverlayNode = (0, import_react17.useCallback)((node) => {
+  const setOverlayNode = (0, import_react18.useCallback)((node) => {
     setOverlayElement(node);
   }, []);
-  const api = (0, import_react17.useMemo)(
+  const api = (0, import_react18.useMemo)(
     () => ({ overlayElement }),
     [overlayElement]
   );
@@ -5212,9 +5377,9 @@ function usePanoChromeOverlay() {
 }
 
 // src/video/host.ts
-var import_react18 = require("react");
-var PanoVideoHostContext = (0, import_react18.createContext)(null);
-var DefaultPanoVideoControlsContext = (0, import_react18.createContext)(false);
+var import_react19 = require("react");
+var PanoVideoHostContext = (0, import_react19.createContext)(null);
+var DefaultPanoVideoControlsContext = (0, import_react19.createContext)(false);
 function createPanoVideoHost() {
   return {
     controller: null,
@@ -5259,8 +5424,8 @@ function isProduction3() {
   return nodeEnv === "production";
 }
 function useClaimPanoVideoControls() {
-  const host = (0, import_react18.useContext)(PanoVideoHostContext);
-  const isDefault = (0, import_react18.useContext)(DefaultPanoVideoControlsContext);
+  const host = (0, import_react19.useContext)(PanoVideoHostContext);
+  const isDefault = (0, import_react19.useContext)(DefaultPanoVideoControlsContext);
   if (!host || isDefault) {
     return;
   }
@@ -5273,10 +5438,10 @@ function useClaimPanoVideoControls() {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/video/pano-video-captions.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
@@ -5300,7 +5465,7 @@ function resolvePanoVideoCaptionAppearance(appearance) {
 function PanoVideoCaptionsOverlay({
   controller
 }) {
-  const snapshot = (0, import_react19.useSyncExternalStore)(
+  const snapshot = (0, import_react20.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
@@ -5342,7 +5507,7 @@ function PanoVideoCaptions({
 }
 
 // src/video/pano-video-controls.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/video/format.ts
 var DEFAULT_PANO_VIDEO_PLAYBACK_RATES = [0.5, 1, 1.25, 1.5, 2];
@@ -5794,7 +5959,7 @@ function VerticalVolumeSlider({
   onVolume,
   volume
 }) {
-  const trackRef = (0, import_react20.useRef)(null);
+  const trackRef = (0, import_react21.useRef)(null);
   const applyPointer = (event) => {
     const track = trackRef.current;
     if (!track) {
@@ -5930,14 +6095,14 @@ function VolumeControl({
   volume,
   volumeAdjustable
 }) {
-  const rootRef = (0, import_react20.useRef)(null);
-  const [open, setOpen] = (0, import_react20.useState)(false);
+  const rootRef = (0, import_react21.useRef)(null);
+  const [open, setOpen] = (0, import_react21.useState)(false);
   const displayVolume = muted ? 0 : volume;
   const mutedOrSilent = muted || volume === 0;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     onOpenChange(open);
   }, [onOpenChange, open]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!open || !volumeAdjustable || hasFinePointerHover()) {
       return;
     }
@@ -6024,24 +6189,24 @@ function PanoVideoControlsHud({
   fullscreen,
   overlayElement
 }) {
-  const resolved = (0, import_react20.useMemo)(
+  const resolved = (0, import_react21.useMemo)(
     () => resolveControlsAppearance(appearance),
     [appearance]
   );
-  const snapshot = (0, import_react20.useSyncExternalStore)(
+  const snapshot = (0, import_react21.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
   );
-  const [menu, setMenu] = (0, import_react20.useState)(null);
-  const [captionsPanel, setCaptionsPanel] = (0, import_react20.useState)("tracks");
-  const [visible, setVisible] = (0, import_react20.useState)(true);
-  const [volumeOpen, setVolumeOpen] = (0, import_react20.useState)(false);
-  const [overlayWidth, setOverlayWidth] = (0, import_react20.useState)(
+  const [menu, setMenu] = (0, import_react21.useState)(null);
+  const [captionsPanel, setCaptionsPanel] = (0, import_react21.useState)("tracks");
+  const [visible, setVisible] = (0, import_react21.useState)(true);
+  const [volumeOpen, setVolumeOpen] = (0, import_react21.useState)(false);
+  const [overlayWidth, setOverlayWidth] = (0, import_react21.useState)(
     () => overlayElement.clientWidth
   );
-  const idleTimerRef = (0, import_react20.useRef)(0);
-  const barId = (0, import_react20.useId)();
+  const idleTimerRef = (0, import_react21.useRef)(0);
+  const barId = (0, import_react21.useId)();
   const rateMenuId = `${barId}-rate`;
   const variantMenuId = `${barId}-variant`;
   const captionsMenuId = `${barId}-captions`;
@@ -6049,7 +6214,7 @@ function PanoVideoControlsHud({
   const compact = overlayWidth < COMPACT_CONTROLS_WIDTH;
   const hideTime = overlayWidth < NARROW_CONTROLS_WIDTH;
   const showFullscreen = isFullscreenEnabled();
-  const bumpVisibility = (0, import_react20.useCallback)(
+  const bumpVisibility = (0, import_react21.useCallback)(
     (playing) => {
       setVisible(true);
       window.clearTimeout(idleTimerRef.current);
@@ -6062,7 +6227,7 @@ function PanoVideoControlsHud({
     },
     [menu, volumeOpen]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -6077,15 +6242,15 @@ function PanoVideoControlsHud({
       observer.disconnect();
     };
   }, [overlayElement]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!compact && menu === "more") {
       setMenu(null);
     }
   }, [compact, menu]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     bumpVisibility(snapshot.playing);
   }, [bumpVisibility, snapshot.playing]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const root = overlayElement.parentElement;
     if (!root) {
       return;
@@ -6144,7 +6309,7 @@ function PanoVideoControlsHud({
       document.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [bumpVisibility, controller, menu, overlayElement, snapshot.playing, volumeOpen]);
-  (0, import_react20.useEffect)(
+  (0, import_react21.useEffect)(
     () => () => {
       window.clearTimeout(idleTimerRef.current);
     },
@@ -6435,7 +6600,7 @@ function PanoVideoControlsHud({
 }
 function PanoVideoControls({ appearance }) {
   useClaimPanoVideoControls();
-  const host = (0, import_react20.useContext)(PanoVideoHostContext);
+  const host = (0, import_react21.useContext)(PanoVideoHostContext);
   if (host && appearance) {
     host.controls = appearance;
   }
@@ -6449,7 +6614,7 @@ function PanoVideoChromeBridge({
   host,
   overlayElement
 }) {
-  (0, import_react21.useSyncExternalStore)(
+  (0, import_react22.useSyncExternalStore)(
     (onStoreChange) => subscribePanoVideoHost(host, onStoreChange),
     () => getPanoVideoHostRevision(host),
     () => getPanoVideoHostRevision(host)
@@ -6473,11 +6638,11 @@ function PanoVideoChromeBridge({
 }
 
 // src/webvr/chrome.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/webvr/host.ts
-var import_react22 = require("react");
-var WebVRRuntimeContext = (0, import_react22.createContext)(null);
+var import_react23 = require("react");
+var WebVRRuntimeContext = (0, import_react23.createContext)(null);
 function createWebVRHost() {
   return {
     controller: null,
@@ -6748,7 +6913,7 @@ function SetupPanel({
   );
 }
 function WebVRChromeBridge({ host }) {
-  (0, import_react23.useSyncExternalStore)(
+  (0, import_react24.useSyncExternalStore)(
     (listener) => subscribeWebVRHost(host, listener),
     () => host.revision,
     () => host.revision
@@ -6832,12 +6997,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_react24 = require("react");
+var import_react25 = require("react");
 var import_three5 = require("three");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function PanoramaXROrigin() {
-  const originRef = (0, import_react24.useRef)(null);
-  const localHeadPositionRef = (0, import_react24.useRef)(new import_three5.Vector3());
+  const originRef = (0, import_react25.useRef)(null);
+  const localHeadPositionRef = (0, import_react25.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)(() => {
@@ -6902,7 +7067,7 @@ function PanoCursorTree({
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
-  const host = (0, import_react25.useContext)(PanoVideoHostContext);
+  const host = (0, import_react26.useContext)(PanoVideoHostContext);
   if (host) {
     host.controlClaims = 0;
   }
@@ -6915,7 +7080,7 @@ function DefaultControlChannels({
   keyboardChannel,
   fovSpeed
 }) {
-  const claims = (0, import_react25.useContext)(ControlClaimsContext);
+  const claims = (0, import_react26.useContext)(ControlClaimsContext);
   if (!claims) {
     return null;
   }
@@ -6931,7 +7096,7 @@ function DefaultControlChannels({
     ) : null
   ] });
 }
-var PanoViewer = (0, import_react25.forwardRef)(
+var PanoViewer = (0, import_react26.forwardRef)(
   function PanoViewer2({
     children,
     initialView,
@@ -6950,30 +7115,31 @@ var PanoViewer = (0, import_react25.forwardRef)(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = (0, import_react25.useRef)(null);
-    const controlsRef = (0, import_react25.useRef)(null);
-    const eventBus = (0, import_react25.useMemo)(() => createPanoEventBus(), []);
+    const rootRef = (0, import_react26.useRef)(null);
+    const controlsRef = (0, import_react26.useRef)(null);
+    const eventBus = (0, import_react26.useMemo)(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
+    const hotspotTargetRegistry = (0, import_react26.useMemo)(() => createHotspotTargetRegistry(), []);
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
     const { api: chromeOverlayApi, setOverlayNode, overlayElement } = usePanoChromeOverlay();
-    const videoHost = (0, import_react25.useMemo)(() => createPanoVideoHost(), []);
-    const filterHost = (0, import_react25.useMemo)(() => createPanoFilterHost(), []);
-    const webVRHost = (0, import_react25.useMemo)(() => createWebVRHost(), []);
-    const scenesHost = (0, import_react25.useMemo)(() => createScenesHost(), []);
-    const bgmHost = (0, import_react25.useMemo)(() => createBackgroundAudioHost(), []);
-    const mediaActivationHost = (0, import_react25.useMemo)(() => createPanoMediaActivationHost(), []);
-    const mediaActivationOptions = (0, import_react25.useMemo)(
+    const videoHost = (0, import_react26.useMemo)(() => createPanoVideoHost(), []);
+    const filterHost = (0, import_react26.useMemo)(() => createPanoFilterHost(), []);
+    const webVRHost = (0, import_react26.useMemo)(() => createWebVRHost(), []);
+    const scenesHost = (0, import_react26.useMemo)(() => createScenesHost(), []);
+    const bgmHost = (0, import_react26.useMemo)(() => createBackgroundAudioHost(), []);
+    const mediaActivationHost = (0, import_react26.useMemo)(() => createPanoMediaActivationHost(), []);
+    const mediaActivationOptions = (0, import_react26.useMemo)(
       () => mediaActivation === false ? null : mediaActivation ?? {},
       [mediaActivation]
     );
-    const mediaActivationRevision = (0, import_react25.useSyncExternalStore)(
+    const mediaActivationRevision = (0, import_react26.useSyncExternalStore)(
       (onStoreChange) => subscribePanoMediaActivation(mediaActivationHost, onStoreChange),
       () => getPanoMediaActivationRevision(mediaActivationHost),
       () => getPanoMediaActivationRevision(mediaActivationHost)
     );
-    const [mediaActivated, setMediaActivated] = (0, import_react25.useState)(false);
-    const stereoView = (0, import_react25.useMemo)(() => createWebVRStereoView(), []);
-    const xrStore = (0, import_react25.useMemo)(
+    const [mediaActivated, setMediaActivated] = (0, import_react26.useState)(false);
+    const stereoView = (0, import_react26.useMemo)(() => createWebVRStereoView(), []);
+    const xrStore = (0, import_react26.useMemo)(
       () => (0, import_xr3.createXRStore)({
         anchors: false,
         bodyTracking: false,
@@ -6989,7 +7155,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
       }),
       []
     );
-    const mediaActivationControls = (0, import_react25.useMemo)(
+    const mediaActivationControls = (0, import_react26.useMemo)(
       () => ({
         resumeAudio: () => resumePanoAudio(),
         playVideo: async ({ unmute = false } = {}) => {
@@ -7007,7 +7173,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
       }),
       [bgmHost, videoHost]
     );
-    const activateMedia = (0, import_react25.useCallback)(() => {
+    const activateMedia = (0, import_react26.useCallback)(() => {
       setMediaActivated(true);
       const resume = mediaActivationControls.resumeAudio();
       mediaActivationOptions?.onActivate?.(mediaActivationControls);
@@ -7015,13 +7181,13 @@ var PanoViewer = (0, import_react25.forwardRef)(
     }, [mediaActivationControls, mediaActivationOptions]);
     const hasMediaActivationIntent = mediaActivationRevision >= 0 && hasPanoMediaActivationIntent(mediaActivationHost);
     const shouldShowMediaActivation = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
-    const fallbackViewRef = (0, import_react25.useRef)(DEFAULT_VIEW);
+    const fallbackViewRef = (0, import_react26.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_react25.useMemo)(
+    const normalizedInitialView = (0, import_react26.useMemo)(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
         pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
@@ -7039,10 +7205,10 @@ var PanoViewer = (0, import_react25.forwardRef)(
       ]
     );
     fallbackViewRef.current = normalizedInitialView;
-    const controlClaims = (0, import_react25.useMemo)(() => createControlClaims(), []);
+    const controlClaims = (0, import_react26.useMemo)(() => createControlClaims(), []);
     resetControlClaims(controlClaims);
     const controlsEnabled = controls !== false;
-    const controlOptions = (0, import_react25.useMemo)(
+    const controlOptions = (0, import_react26.useMemo)(
       () => typeof controls === "object" ? controls : {},
       [controls]
     );
@@ -7050,7 +7216,7 @@ var PanoViewer = (0, import_react25.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_react25.useMemo)(
+    const mouseChannel = (0, import_react26.useMemo)(
       () => resolveChannel(controlOptions.mouse, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -7066,7 +7232,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
         topZoomSpeed
       ]
     );
-    const touchChannel = (0, import_react25.useMemo)(
+    const touchChannel = (0, import_react26.useMemo)(
       () => resolveChannel(controlOptions.touch, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -7075,13 +7241,13 @@ var PanoViewer = (0, import_react25.forwardRef)(
       }),
       [allModeInvert, controlOptions.touch, topRotateSpeed]
     );
-    const keyboardChannel = (0, import_react25.useMemo)(
+    const keyboardChannel = (0, import_react26.useMemo)(
       () => resolveChannel(controlOptions.keyboard, {
         enabled: true
       }),
       [controlOptions.keyboard]
     );
-    const enterFullscreen = (0, import_react25.useCallback)(async () => {
+    const enterFullscreen = (0, import_react26.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -7094,7 +7260,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
       }
       await requestElementFullscreen(root);
     }, []);
-    const exitFullscreen = (0, import_react25.useCallback)(async () => {
+    const exitFullscreen = (0, import_react26.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -7103,7 +7269,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
       }
       await exitElementFullscreen();
     }, []);
-    const toggleFullscreen = (0, import_react25.useCallback)(async () => {
+    const toggleFullscreen = (0, import_react26.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -7117,8 +7283,8 @@ var PanoViewer = (0, import_react25.forwardRef)(
       }
       await requestElementFullscreen(root);
     }, []);
-    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react25.useState)(false);
-    (0, import_react25.useEffect)(() => {
+    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react26.useState)(false);
+    (0, import_react26.useEffect)(() => {
       if (typeof document === "undefined") {
         return;
       }
@@ -7136,7 +7302,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
       syncFullscreen();
       return subscribeFullscreenChange(syncFullscreen);
     }, []);
-    (0, import_react25.useEffect)(() => {
+    (0, import_react26.useEffect)(() => {
       const root = rootRef.current;
       if (!root) {
         return;
@@ -7149,7 +7315,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
         root.removeEventListener("contextmenu", suppressNativeContextMenu, true);
       };
     }, []);
-    const contextMenuActions = (0, import_react25.useMemo)(
+    const contextMenuActions = (0, import_react26.useMemo)(
       () => ({
         reset: () => {
           controlsRef.current?.reset();
@@ -7161,24 +7327,24 @@ var PanoViewer = (0, import_react25.forwardRef)(
       }),
       [isViewerFullscreen, toggleFullscreen]
     );
-    const contextMenuChannel = (0, import_react25.useMemo)(
+    const contextMenuChannel = (0, import_react26.useMemo)(
       () => resolveContextMenuChannel(contextMenu),
       [contextMenu]
     );
-    const resolvedCursors = (0, import_react25.useMemo)(
+    const resolvedCursors = (0, import_react26.useMemo)(
       () => resolvePanoCursors(cursors),
       [cursors]
     );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react25.useState)(
+    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react26.useState)(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    (0, import_react25.useEffect)(() => {
+    (0, import_react26.useEffect)(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
-    const isFullscreenRef = (0, import_react25.useRef)(false);
+    const isFullscreenRef = (0, import_react26.useRef)(false);
     isFullscreenRef.current = isViewerFullscreen;
-    (0, import_react25.useImperativeHandle)(
+    (0, import_react26.useImperativeHandle)(
       ref,
       () => ({
         // -- View --
@@ -7189,6 +7355,13 @@ var PanoViewer = (0, import_react25.forwardRef)(
         reset: () => {
           controlsRef.current?.reset();
         },
+        lookTo: (position, options) => controlsRef.current?.lookTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+        moveTo: (position, options) => controlsRef.current?.moveTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+        zoomTo: (fov, options) => controlsRef.current?.zoomTo(fov, options) ?? Promise.resolve({ status: "cancelled" }),
+        lookToHotspot: (id, options) => {
+          const position = hotspotTargetRegistry.getPosition(id);
+          return position ? controlsRef.current?.lookTo(position, options) ?? Promise.resolve({ status: "cancelled" }) : Promise.resolve({ status: "not-found" });
+        },
         activateMedia,
         // -- Fullscreen --
         enterFullscreen,
@@ -7246,12 +7419,13 @@ var PanoViewer = (0, import_react25.forwardRef)(
         enterFullscreen,
         exitFullscreen,
         scenesHost,
+        hotspotTargetRegistry,
         toggleFullscreen,
         videoHost,
         webVRHost
       ]
     );
-    const rootStyle = (0, import_react25.useMemo)(
+    const rootStyle = (0, import_react26.useMemo)(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -7297,7 +7471,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
                   value: { host: webVRHost, xrStore, stereoView },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoramaXROrigin, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       PanoContextMenuOverlayContext.Provider,
                       {
                         value: contextMenuOverlayApi,
@@ -7353,7 +7527,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
                           }
                         ) }) }) })
                       }
-                    ) }) }) }) })
+                    ) }) }) }) }) })
                   ]
                 }
               ) })
@@ -7396,7 +7570,7 @@ var PanoViewer = (0, import_react25.forwardRef)(
 );
 
 // src/background-audio.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/hotspot/audio-spatial.ts
 var import_three6 = require("three");
@@ -7484,31 +7658,31 @@ function BackgroundAudio({
   onEnded,
   onError
 }) {
-  const controlsRef = (0, import_react26.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react27.useContext)(PanoramaViewContext);
   if (!controlsRef) {
     throw new Error("<BackgroundAudio> must be rendered inside <PanoViewer>.");
   }
   const isControlled = controlledPlaying !== void 0;
-  const [internalPlaying, setInternalPlaying] = (0, import_react26.useState)(defaultPlaying);
+  const [internalPlaying, setInternalPlaying] = (0, import_react27.useState)(defaultPlaying);
   const playing = isControlled ? controlledPlaying : internalPlaying;
   const urls = resolveBackgroundAudioUrls(src, sources, sceneId);
   usePanoMediaActivationIntent(playing && urls.length > 0);
   const trackKey = urls.join("\0");
-  const currentRef = (0, import_react26.useRef)(null);
-  const outgoingRef = (0, import_react26.useRef)([]);
-  const fadingInRef = (0, import_react26.useRef)(false);
-  const isFirstTrackRef = (0, import_react26.useRef)(true);
-  const playingRef = (0, import_react26.useRef)(playing);
-  const loopRef = (0, import_react26.useRef)(loop);
-  const mutedRef = (0, import_react26.useRef)(muted);
-  const volumeRef = (0, import_react26.useRef)(volume);
-  const mutedPropRef = (0, import_react26.useRef)(muted);
-  const volumePropRef = (0, import_react26.useRef)(volume);
-  const fadeMsRef = (0, import_react26.useRef)(resolveFadeMs(fadeMs));
-  const onPlaybackStateChangeRef = (0, import_react26.useRef)(onPlaybackStateChange);
-  const onPlaybackErrorRef = (0, import_react26.useRef)(onPlaybackError);
-  const onEndedRef = (0, import_react26.useRef)(onEnded);
-  const onErrorRef = (0, import_react26.useRef)(onError);
+  const currentRef = (0, import_react27.useRef)(null);
+  const outgoingRef = (0, import_react27.useRef)([]);
+  const fadingInRef = (0, import_react27.useRef)(false);
+  const isFirstTrackRef = (0, import_react27.useRef)(true);
+  const playingRef = (0, import_react27.useRef)(playing);
+  const loopRef = (0, import_react27.useRef)(loop);
+  const mutedRef = (0, import_react27.useRef)(muted);
+  const volumeRef = (0, import_react27.useRef)(volume);
+  const mutedPropRef = (0, import_react27.useRef)(muted);
+  const volumePropRef = (0, import_react27.useRef)(volume);
+  const fadeMsRef = (0, import_react27.useRef)(resolveFadeMs(fadeMs));
+  const onPlaybackStateChangeRef = (0, import_react27.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react27.useRef)(onPlaybackError);
+  const onEndedRef = (0, import_react27.useRef)(onEnded);
+  const onErrorRef = (0, import_react27.useRef)(onError);
   playingRef.current = playing;
   loopRef.current = loop;
   fadeMsRef.current = resolveFadeMs(fadeMs);
@@ -7524,7 +7698,7 @@ function BackgroundAudio({
   onPlaybackErrorRef.current = onPlaybackError;
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
-  const snapshotRef = (0, import_react26.useRef)({
+  const snapshotRef = (0, import_react27.useRef)({
     ready: false,
     playing: false,
     blocked: false,
@@ -7532,7 +7706,7 @@ function BackgroundAudio({
     muted,
     volume
   });
-  const snapshotListenersRef = (0, import_react26.useRef)(/* @__PURE__ */ new Set());
+  const snapshotListenersRef = (0, import_react27.useRef)(/* @__PURE__ */ new Set());
   const notifySnapshot = (patch) => {
     const prev = snapshotRef.current;
     snapshotRef.current = { ...prev, ...patch };
@@ -7540,9 +7714,9 @@ function BackgroundAudio({
       listener();
     }
   };
-  const isControlledRef = (0, import_react26.useRef)(isControlled);
+  const isControlledRef = (0, import_react27.useRef)(isControlled);
   isControlledRef.current = isControlled;
-  const controller = (0, import_react26.useMemo)(
+  const controller = (0, import_react27.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         snapshotListenersRef.current.add(onStoreChange);
@@ -7600,8 +7774,8 @@ function BackgroundAudio({
     }),
     []
   );
-  const bgmHost = (0, import_react26.useContext)(BackgroundAudioHostContext);
-  (0, import_react26.useEffect)(() => {
+  const bgmHost = (0, import_react27.useContext)(BackgroundAudioHostContext);
+  (0, import_react27.useEffect)(() => {
     if (!bgmHost) {
       return;
     }
@@ -7614,7 +7788,7 @@ function BackgroundAudio({
       }
     };
   }, [bgmHost, controller]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     return () => {
       fadingInRef.current = false;
       isFirstTrackRef.current = true;
@@ -7626,7 +7800,7 @@ function BackgroundAudio({
       outgoingRef.current = [];
     };
   }, []);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const previous = currentRef.current;
     if (previous?.key === trackKey && previous.crossOrigin === crossOrigin) {
       return;
@@ -7729,7 +7903,7 @@ function BackgroundAudio({
       retire(previous);
     }
   }, [crossOrigin, trackKey]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const howl = currentRef.current?.handle.howl;
     if (!howl) {
       return;
@@ -7749,7 +7923,7 @@ function BackgroundAudio({
       howl.play();
     }
   }, [playing, trackKey]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const slot = currentRef.current;
     if (!slot) {
       return;
@@ -7764,7 +7938,7 @@ function BackgroundAudio({
       volume: clampAudioVolume(volumeRef.current)
     });
   }, [loop, muted, trackKey, volume]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!pauseWhenHidden) {
       return;
     }
@@ -7790,27 +7964,27 @@ function BackgroundAudio({
 }
 
 // src/pano-filter/pano-filter.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 function PanoFilter({
   preset = "none",
   intensity,
   enabled = true
 }) {
-  const host = (0, import_react27.useContext)(PanoFilterHostContext);
+  const host = (0, import_react28.useContext)(PanoFilterHostContext);
   if (!host) {
     throw new Error("<PanoFilter> must be rendered inside <PanoViewer>.");
   }
-  const snapshot = (0, import_react27.useMemo)(
+  const snapshot = (0, import_react28.useMemo)(
     () => resolvePanoFilterSnapshot({ preset, intensity, enabled }),
     [enabled, intensity, preset]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     claimPanoFilter(host);
     return () => {
       releasePanoFilter(host);
     };
   }, [host]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setPanoFilterSnapshot(host, snapshot);
   }, [host, snapshot]);
   return null;
@@ -7818,7 +7992,7 @@ function PanoFilter({
 
 // src/gyro.tsx
 var import_fiber11 = require("@react-three/fiber");
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/gyro-orientation.ts
 var import_three7 = require("three");
@@ -7903,7 +8077,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_react28.forwardRef)(function Gyro2({
+var Gyro = (0, import_react29.forwardRef)(function Gyro2({
   enabled = false,
   camroll = true,
   absolute = false,
@@ -7918,24 +8092,24 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
   onDisable,
   onDenied
 }, ref) {
-  const controlsRef = (0, import_react28.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react28.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react29.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react29.useContext)(PanoEventBusContext);
   const { gl } = (0, import_fiber11.useThree)();
-  const [internallyDisabled, setInternallyDisabled] = (0, import_react28.useState)(false);
-  const availableRef = (0, import_react28.useRef)(false);
-  const availabilityReportedRef = (0, import_react28.useRef)(null);
-  const activeRef = (0, import_react28.useRef)(false);
-  const permissionRef = (0, import_react28.useRef)(deviceOrientationPermissionState);
-  const absoluteEventSourceRef = (0, import_react28.useRef)(null);
-  const rawQuaternionRef = (0, import_react28.useRef)(null);
-  const calibrationRef = (0, import_react28.useRef)(null);
-  const absoluteOffsetRef = (0, import_react28.useRef)({ yaw: 0, pitch: 0 });
-  const screenAngleRef = (0, import_react28.useRef)(getScreenOrientationAngle());
-  const startPoseRef = (0, import_react28.useRef)(null);
-  const enabledAtRef = (0, import_react28.useRef)(0);
-  const filteredPoseRef = (0, import_react28.useRef)(null);
-  const lastAppliedPoseRef = (0, import_react28.useRef)(null);
-  const callbacksRef = (0, import_react28.useRef)({
+  const [internallyDisabled, setInternallyDisabled] = (0, import_react29.useState)(false);
+  const availableRef = (0, import_react29.useRef)(false);
+  const availabilityReportedRef = (0, import_react29.useRef)(null);
+  const activeRef = (0, import_react29.useRef)(false);
+  const permissionRef = (0, import_react29.useRef)(deviceOrientationPermissionState);
+  const absoluteEventSourceRef = (0, import_react29.useRef)(null);
+  const rawQuaternionRef = (0, import_react29.useRef)(null);
+  const calibrationRef = (0, import_react29.useRef)(null);
+  const absoluteOffsetRef = (0, import_react29.useRef)({ yaw: 0, pitch: 0 });
+  const screenAngleRef = (0, import_react29.useRef)(getScreenOrientationAngle());
+  const startPoseRef = (0, import_react29.useRef)(null);
+  const enabledAtRef = (0, import_react29.useRef)(0);
+  const filteredPoseRef = (0, import_react29.useRef)(null);
+  const lastAppliedPoseRef = (0, import_react29.useRef)(null);
+  const callbacksRef = (0, import_react29.useRef)({
     onAvailable,
     onUnavailable,
     onEnable,
@@ -7952,7 +8126,7 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
   if (!controlsRef) {
     throw new Error("<Gyro> must be rendered inside <PanoViewer>.");
   }
-  const emit = (0, import_react28.useCallback)(
+  const emit = (0, import_react29.useCallback)(
     (type) => {
       eventBus?.emit(type, void 0);
       switch (type) {
@@ -7979,7 +8153,7 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
     },
     [eventBus]
   );
-  const setAvailable = (0, import_react28.useCallback)(
+  const setAvailable = (0, import_react29.useCallback)(
     (available) => {
       availableRef.current = available;
       if (availabilityReportedRef.current === available) {
@@ -7990,7 +8164,7 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
     },
     [emit]
   );
-  const requestPermission = (0, import_react28.useCallback)(async () => {
+  const requestPermission = (0, import_react29.useCallback)(async () => {
     if (!availableRef.current) {
       return false;
     }
@@ -8023,7 +8197,7 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
     emit("gyrodenied");
     return false;
   }, [emit, setAvailable]);
-  const deactivate = (0, import_react28.useCallback)(() => {
+  const deactivate = (0, import_react29.useCallback)(() => {
     if (activeRef.current) {
       activeRef.current = false;
       controlsRef.current?.setGyroActive(false);
@@ -8035,7 +8209,7 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
     filteredPoseRef.current = null;
     lastAppliedPoseRef.current = null;
   }, [controlsRef, emit]);
-  const resetSensor = (0, import_react28.useCallback)(
+  const resetSensor = (0, import_react29.useCallback)(
     (yaw, pitch) => {
       const rawQuaternion = rawQuaternionRef.current;
       if (!rawQuaternion) {
@@ -8070,7 +8244,7 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
     },
     [absolute, controlsRef, north]
   );
-  (0, import_react28.useImperativeHandle)(
+  (0, import_react29.useImperativeHandle)(
     ref,
     () => ({
       resetSensor,
@@ -8080,22 +8254,22 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
     }),
     [requestPermission, resetSensor]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!enabled) {
       setInternallyDisabled(false);
     }
   }, [enabled]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const supported = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined" && (desktopSupport || isMobileDevice());
     setAvailable(supported);
     return () => {
       availableRef.current = false;
     };
   }, [desktopSupport, setAvailable]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     controlsRef.current?.setGyroTouchMode(touchMode);
   }, [controlsRef, touchMode]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!enabled || internallyDisabled || touchMode !== "disablegyro") {
       return;
     }
@@ -8109,7 +8283,7 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
       gl.domElement.removeEventListener("pointerdown", onPointerDown);
     };
   }, [enabled, gl, internallyDisabled, touchMode]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!enabled || internallyDisabled || !availableRef.current) {
       deactivate();
       return;
@@ -8271,7 +8445,7 @@ var Gyro = (0, import_react28.forwardRef)(function Gyro2({
 
 // src/webvr/webvr.tsx
 var import_fiber14 = require("@react-three/fiber");
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/webvr/detect.ts
 function isMobileVRDevice() {
@@ -8294,7 +8468,7 @@ async function detectWebVRCapabilities() {
 
 // src/webvr/reticle.tsx
 var import_fiber12 = require("@react-three/fiber");
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_three8 = require("three");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var CENTER_NDC = new import_three8.Vector2(0, 0);
@@ -8380,13 +8554,13 @@ function WebVRReticle({
   dwellMs,
   visible
 }) {
-  const groupRef = (0, import_react29.useRef)(null);
-  const ringMeshRef = (0, import_react29.useRef)(null);
-  const directionRef = (0, import_react29.useRef)(new import_three8.Vector3());
-  const raycasterRef = (0, import_react29.useRef)(new import_three8.Raycaster());
-  const hoveredRef = (0, import_react29.useRef)(null);
-  const dwellRef = (0, import_react29.useRef)(0);
-  const clickedRef = (0, import_react29.useRef)(false);
+  const groupRef = (0, import_react30.useRef)(null);
+  const ringMeshRef = (0, import_react30.useRef)(null);
+  const directionRef = (0, import_react30.useRef)(new import_three8.Vector3());
+  const raycasterRef = (0, import_react30.useRef)(new import_three8.Raycaster());
+  const hoveredRef = (0, import_react30.useRef)(null);
+  const dwellRef = (0, import_react30.useRef)(0);
+  const clickedRef = (0, import_react30.useRef)(false);
   const { camera, gl, scene } = (0, import_fiber12.useThree)();
   (0, import_fiber12.useFrame)((_, deltaSeconds) => {
     const group = groupRef.current;
@@ -8549,7 +8723,7 @@ function WebVRReticle({
 
 // src/webvr/stereo.tsx
 var import_fiber13 = require("@react-three/fiber");
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_three9 = require("three");
 var vertexShader = `
 varying vec2 vUv;
@@ -8624,25 +8798,25 @@ function WebVRStereoRenderer({
   screensize
 }) {
   const { camera, gl } = (0, import_fiber13.useThree)();
-  const runtime = (0, import_react30.useContext)(WebVRRuntimeContext);
-  const fallbackStereoRef = (0, import_react30.useRef)(null);
+  const runtime = (0, import_react31.useContext)(WebVRRuntimeContext);
+  const fallbackStereoRef = (0, import_react31.useRef)(null);
   if (!fallbackStereoRef.current) {
     fallbackStereoRef.current = new import_three9.StereoCamera();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
-  const stereoRef = (0, import_react30.useRef)(stereo);
+  const stereoRef = (0, import_react31.useRef)(stereo);
   stereoRef.current = stereo;
-  const resources = (0, import_react30.useMemo)(createDistortionResources, []);
-  const drawingSizeRef = (0, import_react30.useRef)(new import_three9.Vector2());
-  const viewportRef = (0, import_react30.useRef)(new import_three9.Vector4());
-  const scissorRef = (0, import_react30.useRef)(new import_three9.Vector4());
-  const originalFovRef = (0, import_react30.useRef)(null);
-  const stereoActiveRef = (0, import_react30.useRef)(false);
-  const profileRef = (0, import_react30.useRef)(profile);
-  const screensizeRef = (0, import_react30.useRef)(screensize);
+  const resources = (0, import_react31.useMemo)(createDistortionResources, []);
+  const drawingSizeRef = (0, import_react31.useRef)(new import_three9.Vector2());
+  const viewportRef = (0, import_react31.useRef)(new import_three9.Vector4());
+  const scissorRef = (0, import_react31.useRef)(new import_three9.Vector4());
+  const originalFovRef = (0, import_react31.useRef)(null);
+  const stereoActiveRef = (0, import_react31.useRef)(false);
+  const profileRef = (0, import_react31.useRef)(profile);
+  const screensizeRef = (0, import_react31.useRef)(screensize);
   profileRef.current = profile;
   screensizeRef.current = screensize;
-  (0, import_react30.useEffect)(
+  (0, import_react31.useEffect)(
     () => () => {
       resources.geometry.dispose();
       resources.material.dispose();
@@ -8650,7 +8824,7 @@ function WebVRStereoRenderer({
     },
     [resources]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
       if (!stereoActiveRef.current || !(cameraToRender instanceof import_three9.PerspectiveCamera)) {
@@ -8714,7 +8888,7 @@ function WebVRStereoRenderer({
       gl.render = originalRender;
     };
   }, [gl, resources]);
-  (0, import_react30.useEffect)(
+  (0, import_react31.useEffect)(
     () => () => {
       if (runtime) {
         runtime.stereoView.active = false;
@@ -8749,7 +8923,7 @@ function WebVRStereoRenderer({
 }
 
 // src/webvr/pointerlock.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 var POINTER_LOCK_CURSOR_ID = "webvr:pointerlock";
 async function requestWebVRPointerLock(element) {
   if (typeof document === "undefined") {
@@ -8782,11 +8956,11 @@ function exitWebVRPointerLock(element) {
 }
 function useWebVRPointerLock(enabled, element) {
   const cursor = usePanoCursor();
-  const cursorRef = (0, import_react31.useRef)(cursor);
-  const enabledRef = (0, import_react31.useRef)(enabled);
+  const cursorRef = (0, import_react32.useRef)(cursor);
+  const enabledRef = (0, import_react32.useRef)(enabled);
   cursorRef.current = cursor;
   enabledRef.current = enabled;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!enabled || !element) {
       return;
     }
@@ -8816,7 +8990,7 @@ function useWebVRPointerLock(enabled, element) {
 }
 
 // src/webvr/wakelock.ts
-var import_react32 = require("react");
+var import_react33 = 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==";
@@ -8950,7 +9124,7 @@ function releaseWebVRWakeLock() {
   stopFallbackVideo();
 }
 function useWebVRWakeLock(enabled) {
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -8980,7 +9154,7 @@ function initializeSettings(screensize, profile) {
 function getViewerElement(canvas) {
   return canvas.closest("[data-pano-viewer]") ?? canvas.parentElement ?? canvas;
 }
-var WebVR = (0, import_react33.forwardRef)(function WebVR2({
+var WebVR = (0, import_react34.forwardRef)(function WebVR2({
   chrome = true,
   mobileVr = true,
   desktopSupport = false,
@@ -8998,24 +9172,24 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
   onDenied,
   onUnknownDevice
 }, ref) {
-  const runtime = (0, import_react33.useContext)(WebVRRuntimeContext);
-  const controlsRef = (0, import_react33.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react33.useContext)(PanoEventBusContext);
+  const runtime = (0, import_react34.useContext)(WebVRRuntimeContext);
+  const controlsRef = (0, import_react34.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react34.useContext)(PanoEventBusContext);
   const gl = (0, import_fiber14.useThree)((state) => state.gl);
-  const gyroRef = (0, import_react33.useRef)(null);
-  const capabilitiesRef = (0, import_react33.useRef)({
+  const gyroRef = (0, import_react34.useRef)(null);
+  const capabilitiesRef = (0, import_react34.useRef)({
     mobile: false,
     sensor: false,
     webxr: false
   });
-  const availableRef = (0, import_react33.useRef)(false);
-  const modeRef = (0, import_react33.useRef)(null);
-  const webXRSessionRef = (0, import_react33.useRef)(null);
-  const [mode, setMode] = (0, import_react33.useState)(null);
-  const [settings, setSettings] = (0, import_react33.useState)(
+  const availableRef = (0, import_react34.useRef)(false);
+  const modeRef = (0, import_react34.useRef)(null);
+  const webXRSessionRef = (0, import_react34.useRef)(null);
+  const [mode, setMode] = (0, import_react34.useState)(null);
+  const [settings, setSettings] = (0, import_react34.useState)(
     () => initializeSettings(screensize, profile)
   );
-  const callbacksRef = (0, import_react33.useRef)({
+  const callbacksRef = (0, import_react34.useRef)({
     onAvailable,
     onDenied,
     onEnterVR,
@@ -9035,22 +9209,22 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
     throw new Error("<WebVR> must be rendered inside <PanoViewer>.");
   }
   const { host, xrStore } = runtime;
-  const resolvedProfile = (0, import_react33.useMemo)(
+  const resolvedProfile = (0, import_react34.useMemo)(
     () => resolveWebVRProfile(profile, settings.profileId),
     [profile, settings.profileId]
   );
-  const reportDenied = (0, import_react33.useCallback)(
+  const reportDenied = (0, import_react34.useCallback)(
     (error) => {
       eventBus.emit("vrdenied", { error });
       callbacksRef.current.onDenied?.(error);
     },
     [eventBus]
   );
-  const reportUnknownDevice = (0, import_react33.useCallback)(() => {
+  const reportUnknownDevice = (0, import_react34.useCallback)(() => {
     eventBus.emit("vrunknowndevice", void 0);
     callbacksRef.current.onUnknownDevice?.();
   }, [eventBus]);
-  const activate = (0, import_react33.useCallback)(
+  const activate = (0, import_react34.useCallback)(
     (nextMode) => {
       if (modeRef.current === nextMode) {
         return;
@@ -9065,7 +9239,7 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
     },
     [controlsRef, eventBus]
   );
-  const deactivate = (0, import_react33.useCallback)(
+  const deactivate = (0, import_react34.useCallback)(
     (expectedMode) => {
       const previousMode = modeRef.current;
       if (!previousMode || expectedMode && previousMode !== expectedMode) {
@@ -9082,10 +9256,10 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
     },
     [controlsRef, eventBus, gl.domElement]
   );
-  const requestPermission = (0, import_react33.useCallback)(async () => {
+  const requestPermission = (0, import_react34.useCallback)(async () => {
     return await gyroRef.current?.requestPermission() ?? false;
   }, []);
-  const enterVR = (0, import_react33.useCallback)(async () => {
+  const enterVR = (0, import_react34.useCallback)(async () => {
     if (modeRef.current) {
       return true;
     }
@@ -9170,7 +9344,7 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
     wakelock,
     xrStore
   ]);
-  const exitVR = (0, import_react33.useCallback)(async () => {
+  const exitVR = (0, import_react34.useCallback)(async () => {
     if (modeRef.current === "webxr") {
       const session2 = webXRSessionRef.current ?? xrStore.getState().session ?? null;
       if (session2) {
@@ -9185,14 +9359,14 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
       await exitElementFullscreen();
     }
   }, [deactivate, xrStore]);
-  const toggleVR = (0, import_react33.useCallback)(async () => {
+  const toggleVR = (0, import_react34.useCallback)(async () => {
     if (modeRef.current) {
       await exitVR();
       return false;
     }
     return enterVR();
   }, [enterVR, exitVR]);
-  const updateSettings = (0, import_react33.useCallback)((next) => {
+  const updateSettings = (0, import_react34.useCallback)((next) => {
     const normalized = {
       profileId: next.profileId,
       screensize: next.screensize === "auto" ? "auto" : Math.round(Math.max(3, Math.min(20, next.screensize)) * 10) / 10
@@ -9200,7 +9374,7 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
     setSettings(normalized);
     saveWebVRSettings(normalized);
   }, []);
-  const controller = (0, import_react33.useMemo)(
+  const controller = (0, import_react34.useMemo)(
     () => ({
       closeSetup: () => updateWebVRHost(host, { setupOpen: false }),
       enterVR,
@@ -9212,7 +9386,7 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
     }),
     [enterVR, exitVR, host, requestPermission, toggleVR, updateSettings]
   );
-  (0, import_react33.useImperativeHandle)(
+  (0, import_react34.useImperativeHandle)(
     ref,
     () => ({
       enterVR,
@@ -9225,7 +9399,7 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
     }),
     [enterVR, exitVR, requestPermission, toggleVR]
   );
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     let active = true;
     void detectWebVRCapabilities().then((capabilities) => {
       if (!active) {
@@ -9247,7 +9421,7 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
       active = false;
     };
   }, [desktopSupport, eventBus, fakeSupport, host, mobileVr]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     host.controller = controller;
     return () => {
       if (host.controller === controller) {
@@ -9256,10 +9430,10 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
       }
     };
   }, [controller, host]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     updateWebVRHost(host, { chrome, mode, settings });
   }, [chrome, host, mode, settings]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (mode !== "fake") {
       return;
     }
@@ -9283,7 +9457,7 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
       document.removeEventListener("mousemove", onMouseMove);
     };
   }, [controlsRef, gl.domElement, mode, mousePointerLock]);
-  (0, import_react33.useEffect)(
+  (0, import_react34.useEffect)(
     () => () => {
       const session2 = webXRSessionRef.current;
       if (session2) {
@@ -9336,7 +9510,7 @@ var WebVR = (0, import_react33.forwardRef)(function WebVR2({
 });
 
 // src/use-pano-viewer.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -9346,6 +9520,10 @@ function createPanoViewerHandle(ref) {
     reset: () => {
       ref.current?.reset();
     },
+    lookTo: (position, options) => ref.current?.lookTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+    moveTo: (position, options) => ref.current?.moveTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+    zoomTo: (fov, options) => ref.current?.zoomTo(fov, options) ?? Promise.resolve({ status: "cancelled" }),
+    lookToHotspot: (id, options) => ref.current?.lookToHotspot(id, options) ?? Promise.resolve({ status: "not-found" }),
     activateMedia: () => ref.current?.activateMedia() ?? Promise.resolve(),
     enterFullscreen: () => ref.current?.enterFullscreen() ?? Promise.resolve(),
     exitFullscreen: () => ref.current?.exitFullscreen() ?? Promise.resolve(),
@@ -9414,14 +9592,14 @@ function createPanoViewerHandle(ref) {
   };
 }
 function usePanoViewer() {
-  const ref = (0, import_react34.useRef)(null);
-  const handle = (0, import_react34.useMemo)(() => createPanoViewerHandle(ref), []);
-  return (0, import_react34.useMemo)(() => ({ ref, ...handle }), [handle]);
+  const ref = (0, import_react35.useRef)(null);
+  const handle = (0, import_react35.useMemo)(() => createPanoViewerHandle(ref), []);
+  return (0, import_react35.useMemo)(() => ({ ref, ...handle }), [handle]);
 }
 
 // src/sphere.tsx
 var import_fiber15 = require("@react-three/fiber");
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_three10 = require("three");
 
 // src/asset-url.ts
@@ -9446,7 +9624,7 @@ function resolveUrlAgainstFile(fileUrl, path) {
 }
 
 // src/pano-filter/pano-basic-material.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -9606,13 +9784,13 @@ function PanoBasicMaterial({
   toneMapped = false
 }) {
   const snapshot = usePanoFilterSnapshot();
-  const materialRef = (0, import_react35.useRef)(null);
-  const intensityRef = (0, import_react35.useRef)(snapshot.intensity);
-  const intensityUniformRef = (0, import_react35.useRef)(null);
+  const materialRef = (0, import_react36.useRef)(null);
+  const intensityRef = (0, import_react36.useRef)(snapshot.intensity);
+  const intensityUniformRef = (0, import_react36.useRef)(null);
   intensityRef.current = snapshot.intensity;
   const active = isPanoFilterActive(snapshot);
   const preset = snapshot.preset;
-  const onBeforeCompile = (0, import_react35.useMemo)(() => {
+  const onBeforeCompile = (0, import_react36.useMemo)(() => {
     if (!active || preset === "none") {
       return void 0;
     }
@@ -9629,7 +9807,7 @@ function PanoBasicMaterial({
     compile.toString = () => `pano-filter:${preset}`;
     return compile;
   }, [active, preset]);
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     if (!active) {
       intensityUniformRef.current = null;
     }
@@ -9639,7 +9817,7 @@ function PanoBasicMaterial({
     }
     material.needsUpdate = true;
   }, [active, preset]);
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     if (intensityUniformRef.current) {
       intensityUniformRef.current.value = snapshot.intensity;
     }
@@ -9662,12 +9840,12 @@ function PanoBasicMaterial({
 // src/sphere.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react36.useState)(null);
-  const onLoadRef = (0, import_react36.useRef)(onLoad);
-  const onErrorRef = (0, import_react36.useRef)(onError);
+  const [texture, setTexture] = (0, import_react37.useState)(null);
+  const onLoadRef = (0, import_react37.useRef)(onLoad);
+  const onErrorRef = (0, import_react37.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -9706,7 +9884,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  (0, import_react36.useEffect)(
+  (0, import_react37.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9726,7 +9904,7 @@ function Sphere({
 }) {
   const gl = (0, import_fiber15.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = (0, import_react36.useMemo)(
+  const resolvedPreviewUrl = (0, import_react37.useMemo)(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -9745,11 +9923,11 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = (0, import_react36.useRef)(false);
-  (0, import_react36.useEffect)(() => {
+  const readyRef = (0, import_react37.useRef)(false);
+  (0, import_react37.useEffect)(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -9781,7 +9959,7 @@ function Sphere({
 
 // src/video/pano-video.tsx
 var import_fiber16 = require("@react-three/fiber");
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_three11 = require("three");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
@@ -9868,10 +10046,10 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture(poster, onError) {
   const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react37.useState)(null);
-  const onErrorRef = (0, import_react37.useRef)(onError);
+  const [texture, setTexture] = (0, import_react38.useState)(null);
+  const onErrorRef = (0, import_react38.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -9908,7 +10086,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react37.useEffect)(
+  (0, import_react38.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9967,38 +10145,38 @@ function PanoVideo({
 }) {
   usePanoMediaActivationIntent(autoPlay);
   const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const host = (0, import_react37.useContext)(PanoVideoHostContext);
-  const overlay = (0, import_react37.useContext)(PanoChromeOverlayContext);
-  const variants = (0, import_react37.useMemo)(
+  const host = (0, import_react38.useContext)(PanoVideoHostContext);
+  const overlay = (0, import_react38.useContext)(PanoChromeOverlayContext);
+  const variants = (0, import_react38.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react37.useMemo)(
+  const captionAppearance = (0, import_react38.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react37.useState)(
+  const [variantId, setVariantId] = (0, import_react38.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react37.useState)(
+  const [trackId, setTrackId] = (0, import_react38.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react37.useState)(false);
-  const autoPlayRef = (0, import_react37.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react38.useState)(false);
+  const autoPlayRef = (0, import_react38.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react37.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react37.useRef)(
+  const blockedRef = (0, import_react38.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react38.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react37.useRef)({
+  const mediaCapabilitiesRef = (0, import_react38.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react37.useRef)(null);
+  const storeRef = (0, import_react38.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -10008,7 +10186,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react37.useRef)({
+  const actionsRef = (0, import_react38.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -10028,19 +10206,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = (0, import_react37.useRef)(onLoad);
-  const onErrorRef = (0, import_react37.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react37.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react37.useRef)(onEnded);
-  const onVariantChangeRef = (0, import_react37.useRef)(onVariantChange);
-  const onTrackChangeRef = (0, import_react37.useRef)(onTrackChange);
+  const onLoadRef = (0, import_react38.useRef)(onLoad);
+  const onErrorRef = (0, import_react38.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react38.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react38.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react38.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react38.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react37.useMemo)(() => {
+  const resource = (0, import_react38.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10057,7 +10235,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react37.useEffect)(
+  (0, import_react38.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -10072,13 +10250,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -10101,7 +10279,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react37.useCallback)(
+  const emitSnapshot = (0, import_react38.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -10153,7 +10331,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react37.useMemo)(
+  const controller = (0, import_react38.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -10205,7 +10383,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react37.useLayoutEffect)(() => {
+  (0, import_react38.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -10218,7 +10396,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react37.useLayoutEffect)(() => {
+  (0, import_react38.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10231,10 +10409,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -10291,7 +10469,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10381,7 +10559,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10401,7 +10579,7 @@ function PanoVideo({
     }
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10451,7 +10629,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10486,7 +10664,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -10522,7 +10700,7 @@ function PanoVideo({
 
 // src/scenes.tsx
 var import_fiber21 = require("@react-three/fiber");
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_three19 = require("three");
 
 // src/scene-transitions/presets.ts
@@ -10573,7 +10751,7 @@ function isSnapshotTransition(preset) {
 
 // src/scene-transitions/particle-overlay.tsx
 var import_fiber17 = require("@react-three/fiber");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_three13 = require("three");
 
 // src/scene-transitions/glsl.ts
@@ -10705,12 +10883,12 @@ function ParticleOverlay({
   onFinish
 }) {
   const { camera } = (0, import_fiber17.useThree)();
-  const meshRef = (0, import_react38.useRef)(null);
-  const startRef = (0, import_react38.useRef)(null);
-  const finishedRef = (0, import_react38.useRef)(false);
-  const directionRef = (0, import_react38.useRef)(new import_three13.Vector3());
-  const geometry = (0, import_react38.useMemo)(() => createParticleGeometry(), []);
-  const material = (0, import_react38.useMemo)(
+  const meshRef = (0, import_react39.useRef)(null);
+  const startRef = (0, import_react39.useRef)(null);
+  const finishedRef = (0, import_react39.useRef)(false);
+  const directionRef = (0, import_react39.useRef)(new import_three13.Vector3());
+  const geometry = (0, import_react39.useMemo)(() => createParticleGeometry(), []);
+  const material = (0, import_react39.useMemo)(
     () => new import_three13.ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -10726,9 +10904,9 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  (0, import_react38.useEffect)(() => () => geometry.dispose(), [geometry]);
-  (0, import_react38.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react39.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react39.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -10764,7 +10942,7 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 var import_fiber18 = require("@react-three/fiber");
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_three15 = require("three");
 
 // src/scene-transitions/snapshot-shaders.ts
@@ -11053,18 +11231,18 @@ function SnapshotOverlay({
   onFinish
 }) {
   const { camera, gl } = (0, import_fiber18.useThree)();
-  const meshRef = (0, import_react39.useRef)(null);
-  const startRef = (0, import_react39.useRef)(null);
-  const finishedRef = (0, import_react39.useRef)(false);
-  const directionRef = (0, import_react39.useRef)(new import_three15.Vector3());
-  const material = (0, import_react39.useMemo)(() => {
+  const meshRef = (0, import_react40.useRef)(null);
+  const startRef = (0, import_react40.useRef)(null);
+  const finishedRef = (0, import_react40.useRef)(false);
+  const directionRef = (0, import_react40.useRef)(new import_three15.Vector3());
+  const material = (0, import_react40.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  (0, import_react39.useEffect)(() => () => material?.dispose(), [material]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => () => material?.dispose(), [material]);
+  (0, import_react40.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
@@ -11146,7 +11324,7 @@ function TransitionOverlay(props) {
 
 // src/tile/texture-manager-context.tsx
 var import_fiber19 = require("@react-three/fiber");
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/tile/texture-manager.ts
 var import_three16 = require("three");
@@ -11371,7 +11549,7 @@ var TileTextureManager = class {
 
 // src/tile/texture-manager-context.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react40.createContext)(
+var TileTextureManagerContext = (0, import_react41.createContext)(
   null
 );
 function TileTextureManagerProvider({
@@ -11381,7 +11559,7 @@ function TileTextureManagerProvider({
 }) {
   const gl = (0, import_fiber19.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react40.useMemo)(
+  const manager = (0, import_react41.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11390,19 +11568,19 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return (0, import_react40.useContext)(TileTextureManagerContext);
+  return (0, import_react41.useContext)(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
 var import_fiber20 = require("@react-three/fiber");
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_three18 = require("three");
 
 // src/tile/face-layout.ts
@@ -11591,10 +11769,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_react41.useState)(null);
-  const onErrorRef = (0, import_react41.useRef)(onError);
+  const [texture, setTexture] = (0, import_react42.useState)(null);
+  const onErrorRef = (0, import_react42.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -11631,7 +11809,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react41.useEffect)(
+  (0, import_react42.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -11644,7 +11822,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react41.useMemo)(() => {
+  const geometry = (0, import_react42.useMemo)(() => {
     const nextGeometry = new import_three18.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -11662,7 +11840,7 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  (0, import_react41.useEffect)(
+  (0, import_react42.useEffect)(
     () => () => {
       geometry.dispose();
     },
@@ -11703,14 +11881,14 @@ function PreviewCube({
   ));
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react41.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react42.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_react41.useEffect)(
+  (0, import_react42.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -11723,7 +11901,7 @@ function useManagedTexture(manager, key, url, address) {
   );
   return snapshot;
 }
-var TileMesh = (0, import_react41.memo)(function TileMesh2({
+var TileMesh = (0, import_react42.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -11756,7 +11934,7 @@ var TileMesh = (0, import_react41.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react41.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react42.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
@@ -11930,10 +12108,10 @@ function Tile({
   onLevelChange
 }) {
   const { camera, gl, size } = (0, import_fiber20.useThree)();
-  const multiresConfig = (0, import_react41.useMemo)(() => parseMultires(multires), [multires]);
+  const multiresConfig = (0, import_react42.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react41.useMemo)(
+  const candidatesByLevel = (0, import_react42.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -11945,13 +12123,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react41.useRef)(onLoadProgress);
-  const errorRef = (0, import_react41.useRef)(onTileError);
-  const levelChangeRef = (0, import_react41.useRef)(onLevelChange);
+  const progressRef = (0, import_react42.useRef)(onLoadProgress);
+  const errorRef = (0, import_react42.useRef)(onTileError);
+  const levelChangeRef = (0, import_react42.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react41.useMemo)(
+  const ownedManager = (0, import_react42.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11972,7 +12150,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -11982,11 +12160,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react41.useRef)(false);
-  (0, import_react41.useEffect)(() => {
+  const readyRef = (0, import_react42.useRef)(false);
+  (0, import_react42.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -11994,31 +12172,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react41.useMemo)(
+  const resolveUrl = (0, import_react42.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = (0, import_react41.useState)([]);
-  const layerTokenRef = (0, import_react41.useRef)("");
-  const currentLevelRef = (0, import_react41.useRef)(1);
-  const lastUpdateAtRef = (0, import_react41.useRef)(-Infinity);
-  const visibilityDirtyRef = (0, import_react41.useRef)(true);
-  const lastVisibilityQuaternionRef = (0, import_react41.useRef)(camera.quaternion.clone());
-  const lastVisibilityFovRef = (0, import_react41.useRef)(Number.NaN);
-  const lastViewportRef = (0, import_react41.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react41.useRef)(new import_three18.Frustum());
-  const projectionMatrixRef = (0, import_react41.useRef)(new import_three18.Matrix4());
-  const visibilityCameraRef = (0, import_react41.useRef)(new import_three18.PerspectiveCamera());
-  (0, import_react41.useEffect)(() => {
+  const [layers, setLayers] = (0, import_react42.useState)([]);
+  const layerTokenRef = (0, import_react42.useRef)("");
+  const currentLevelRef = (0, import_react42.useRef)(1);
+  const lastUpdateAtRef = (0, import_react42.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react42.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react42.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react42.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react42.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react42.useRef)(new import_three18.Frustum());
+  const projectionMatrixRef = (0, import_react42.useRef)(new import_three18.Matrix4());
+  const visibilityCameraRef = (0, import_react42.useRef)(new import_three18.PerspectiveCamera());
+  (0, import_react42.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -12169,9 +12347,9 @@ function SnapshotCapture({
   onCaptured
 }) {
   const { camera, gl, scene, size } = (0, import_fiber21.useThree)();
-  const capturedRequestRef = (0, import_react42.useRef)(0);
-  const renderTargetRef = (0, import_react42.useRef)(null);
-  (0, import_react42.useEffect)(
+  const capturedRequestRef = (0, import_react43.useRef)(0);
+  const renderTargetRef = (0, import_react43.useRef)(null);
+  (0, import_react43.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
@@ -12227,50 +12405,50 @@ function ScenesController({
   snapshotMaxPixels = 3686400,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = (0, import_react42.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react43.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react42.useMemo)(
+  const transition = (0, import_react43.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react42.useMemo)(
+  const sceneMap = (0, import_react43.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react42.useState)([
+  const [slots, setSlots] = (0, import_react43.useState)([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = (0, import_react42.useState)(0);
-  const [liveSlot, setLiveSlot] = (0, import_react42.useState)(0);
-  const [pendingSlot, setPendingSlot] = (0, import_react42.useState)(null);
-  const [phase, setPhase] = (0, import_react42.useState)(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = (0, import_react42.useState)(0);
-  const [transitionRunId, setTransitionRunId] = (0, import_react42.useState)(0);
-  const [snapshot, setSnapshot] = (0, import_react42.useState)(null);
-  const [recoveryKey, setRecoveryKey] = (0, import_react42.useState)(0);
-  const requestedSceneIdRef = (0, import_react42.useRef)(activeSceneId);
-  const captureReasonRef = (0, import_react42.useRef)("start");
-  const interactionReleaseRef = (0, import_react42.useRef)(null);
-  const slotsRef = (0, import_react42.useRef)(slots);
-  const phaseRef = (0, import_react42.useRef)(phase);
-  const liveSlotRef = (0, import_react42.useRef)(liveSlot);
-  const transitionFromRef = (0, import_react42.useRef)(initialScene);
+  const [activeSlot, setActiveSlot] = (0, import_react43.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react43.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react43.useState)(null);
+  const [phase, setPhase] = (0, import_react43.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react43.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react43.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react43.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react43.useState)(0);
+  const requestedSceneIdRef = (0, import_react43.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react43.useRef)("start");
+  const interactionReleaseRef = (0, import_react43.useRef)(null);
+  const slotsRef = (0, import_react43.useRef)(slots);
+  const phaseRef = (0, import_react43.useRef)(phase);
+  const liveSlotRef = (0, import_react43.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react43.useRef)(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = (0, import_react42.useCallback)(() => {
+  const releaseInteraction = (0, import_react43.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react42.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react43.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = (0, import_react42.useCallback)((scene) => {
+  const startPreload = (0, import_react43.useCallback)((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -12281,7 +12459,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -12305,7 +12483,7 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = (0, import_react42.useCallback)((slot) => {
+  const handleReady = (0, import_react43.useCallback)((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -12336,7 +12514,7 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = (0, import_react42.useCallback)((nextSnapshot) => {
+  const handleCaptured = (0, import_react43.useCallback)((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -12358,7 +12536,7 @@ function ScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = (0, import_react42.useCallback)(() => {
+  const finishTransition = (0, import_react43.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -12383,12 +12561,12 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  (0, import_react42.useEffect)(() => () => {
+  (0, import_react43.useEffect)(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
   const { gl } = (0, import_fiber21.useThree)();
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -12412,7 +12590,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_runtime23.jsxs)(import_react42.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SnapshotCapture,
       {
@@ -12464,11 +12642,11 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = (0, import_react42.useState)(
+  const [internalId, setInternalId] = (0, import_react43.useState)(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
-  const requestSceneChange = (0, import_react42.useCallback)(
+  const requestSceneChange = (0, import_react43.useCallback)(
     (id) => {
       if (isControlled) {
         onActiveSceneIdChange?.(id);
@@ -12478,13 +12656,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = (0, import_react42.useRef)(scenes);
+  const scenesRef = (0, import_react43.useRef)(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = (0, import_react42.useRef)(resolvedId);
+  const resolvedIdRef = (0, import_react43.useRef)(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = (0, import_react42.useContext)(ScenesHostContext);
-  const phaseRef = (0, import_react42.useRef)("idle");
-  (0, import_react42.useEffect)(() => {
+  const host = (0, import_react43.useContext)(ScenesHostContext);
+  const phaseRef = (0, import_react43.useRef)("idle");
+  (0, import_react43.useEffect)(() => {
     if (!host) {
       return;
     }
@@ -12554,25 +12732,25 @@ function Scenes({
 
 // src/hotspot/image-hotspot.tsx
 var import_fiber23 = require("@react-three/fiber");
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_three22 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
 var import_fiber22 = require("@react-three/fiber");
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_three20 = require("three");
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/webvr/stereo-html.tsx
 var import_drei = require("@react-three/drei");
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function useFallbackStereoView() {
-  const runtime = (0, import_react43.useContext)(WebVRRuntimeContext);
+  const runtime = (0, import_react44.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = (0, import_react43.useSyncExternalStore)(
+  const fallback = (0, import_react44.useSyncExternalStore)(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -12686,16 +12864,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react44.useState)(false);
-  (0, import_react44.useEffect)(() => {
+  const [imageFailed, setImageFailed] = (0, import_react45.useState)(false);
+  (0, import_react45.useEffect)(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = (0, import_react44.useMemo)(
+  const resolvedAppearance = (0, import_react45.useMemo)(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = (0, import_react44.useMemo)(
+  const bubbleStyle = (0, import_react45.useMemo)(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -13074,22 +13252,29 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react45.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react45.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react46.useContext)(PanoramaViewContext);
+  const hotspotTargetRegistry = (0, import_react46.useContext)(HotspotTargetRegistryContext);
+  const eventBus = (0, import_react46.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
   const { camera, size } = (0, import_fiber22.useThree)();
-  const groupRef = (0, import_react45.useRef)(null);
-  const tooltipAnchorRef = (0, import_react45.useRef)(null);
-  const dragStateRef = (0, import_react45.useRef)(null);
-  const suppressNextClickRef = (0, import_react45.useRef)(false);
-  const [hovered, setHovered] = (0, import_react45.useState)(false);
-  const [dragging, setDragging] = (0, import_react45.useState)(false);
-  const [pinned, setPinned] = (0, import_react45.useState)(false);
-  const tooltipContent = (0, import_react45.useMemo)(
+  const groupRef = (0, import_react46.useRef)(null);
+  const tooltipAnchorRef = (0, import_react46.useRef)(null);
+  const dragStateRef = (0, import_react46.useRef)(null);
+  const suppressNextClickRef = (0, import_react46.useRef)(false);
+  const [hovered, setHovered] = (0, import_react46.useState)(false);
+  const [dragging, setDragging] = (0, import_react46.useState)(false);
+  const [pinned, setPinned] = (0, import_react46.useState)(false);
+  const tooltipContent = (0, import_react46.useMemo)(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
   const normalizedPosition = normalizePanoPosition(position);
+  (0, import_react46.useEffect)(() => {
+    if (!hotspotTargetRegistry) {
+      return;
+    }
+    return hotspotTargetRegistry.register(id, normalizedPosition);
+  }, [hotspotTargetRegistry, id, normalizedPosition.pitch, normalizedPosition.yaw]);
   const rendering = internalOrientation && internalPlacement ? { orientation: internalOrientation, placement: internalPlacement } : HOTSPOT_MODE_RENDERING[mode];
   const { orientation: orientation2, placement } = rendering;
   const resolvedScale = resolveScale(scale);
@@ -13101,17 +13286,17 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = (0, import_react45.useMemo)(
+  const worldPosition = (0, import_react46.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react45.useMemo)(
+  const surfaceQuaternion3 = (0, import_react46.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = (0, import_react45.useMemo)(() => {
+  const focusGeometry = (0, import_react46.useMemo)(() => {
     const planeGeometry = new import_three20.PlaneGeometry(1, 1);
     const geometry = new import_three20.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -13138,14 +13323,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  (0, import_react45.useEffect)(
+  (0, import_react46.useEffect)(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!cursorApi) {
       return;
     }
@@ -13167,14 +13352,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  (0, import_react45.useEffect)(
+  (0, import_react46.useEffect)(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  (0, import_react45.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_react46.useEffect)(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -13183,12 +13368,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (acceptsPointer) {
       return;
     }
@@ -13201,7 +13386,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react46.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -13527,12 +13712,12 @@ function HotspotPlane({
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = (0, import_fiber23.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react46.useState)(null);
-  const onLoadRef = (0, import_react46.useRef)(onLoad);
-  const onErrorRef = (0, import_react46.useRef)(onError);
+  const [texture, setTexture] = (0, import_react47.useState)(null);
+  const onLoadRef = (0, import_react47.useRef)(onLoad);
+  const onErrorRef = (0, import_react47.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13570,7 +13755,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react46.useEffect)(
+  (0, import_react47.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -13592,13 +13777,13 @@ function ImageHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_react48 = require("react");
+var import_react49 = 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_react47 = require("react");
+var import_react48 = require("react");
 var import_three23 = require("three");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var LINE_WORLD_POSITION = new import_three23.Vector3();
@@ -13631,10 +13816,10 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = (0, import_react47.useRef)(null);
+  const lineRef = (0, import_react48.useRef)(null);
   const { camera, size } = (0, import_fiber24.useThree)();
   const dash = resolveDash(dashSize, gapSize);
-  (0, import_react47.useLayoutEffect)(() => {
+  (0, import_react48.useLayoutEffect)(() => {
     if (!dash.dashed) {
       return;
     }
@@ -13924,24 +14109,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react48.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = (0, import_react49.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react48.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react48.useMemo)(
+  const center = (0, import_react49.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react49.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = (0, import_react48.useMemo)(
+  const strokePoints = (0, import_react49.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react48.useRef)(null);
+  const startVerticesRef = (0, import_react49.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react48.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react49.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -14021,7 +14206,7 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_three25 = require("three");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
@@ -14140,16 +14325,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react49.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = (0, import_react50.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react49.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = (0, import_react49.useMemo)(
+  const center = (0, import_react50.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = (0, import_react50.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react49.useRef)(null);
-  (0, import_react49.useEffect)(() => {
+  const startVerticesRef = (0, import_react50.useRef)(null);
+  (0, import_react50.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -14215,7 +14400,7 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_three26 = require("three");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
@@ -14406,12 +14591,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, 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_react51.useState)(null);
+  const onLoadRef = (0, import_react51.useRef)(onLoad);
+  const onErrorRef = (0, import_react51.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -14450,7 +14635,7 @@ function GraphicHotspot(props) {
 
 // src/hotspot/sequence-hotspot.tsx
 var import_fiber25 = require("@react-three/fiber");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_three27 = require("three");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
@@ -14467,12 +14652,12 @@ function useSpriteTexture({
   onLoadProgress
 }) {
   const gl = (0, import_fiber25.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react51.useState)(null);
-  const onErrorRef = (0, import_react51.useRef)(onError);
-  const onLoadProgressRef = (0, import_react51.useRef)(onLoadProgress);
+  const [texture, setTexture] = (0, import_react52.useState)(null);
+  const onErrorRef = (0, import_react52.useRef)(onError);
+  const onLoadProgressRef = (0, import_react52.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14513,7 +14698,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react51.useEffect)(
+  (0, import_react52.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14542,24 +14727,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = (0, import_react51.useState)(0);
-  const elapsedRef = (0, import_react51.useRef)(0);
-  const frameIndexRef = (0, import_react51.useRef)(0);
-  const endedRef = (0, import_react51.useRef)(false);
-  const lastPlaybackStateRef = (0, import_react51.useRef)(null);
-  const onFrameChangeRef = (0, import_react51.useRef)(onFrameChange);
-  const onPlaybackStateChangeRef = (0, import_react51.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react51.useRef)(onEnded);
+  const [frameIndex, setFrameIndex] = (0, import_react52.useState)(0);
+  const elapsedRef = (0, import_react52.useRef)(0);
+  const frameIndexRef = (0, import_react52.useRef)(0);
+  const endedRef = (0, import_react52.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react52.useRef)(null);
+  const onFrameChangeRef = (0, import_react52.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react52.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react52.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14573,13 +14758,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14633,7 +14818,7 @@ function SequenceHotspot({
 
 // src/hotspot/video-hotspot.tsx
 var import_fiber26 = require("@react-three/fiber");
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_three28 = require("three");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function clampVolume2(volume) {
@@ -14644,10 +14829,10 @@ function clampVolume2(volume) {
 }
 function usePosterTexture2(id, poster, onError) {
   const gl = (0, import_fiber26.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react52.useState)(null);
-  const onErrorRef = (0, import_react52.useRef)(onError);
+  const [texture, setTexture] = (0, import_react53.useState)(null);
+  const onErrorRef = (0, import_react53.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -14684,7 +14869,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react52.useEffect)(
+  (0, import_react53.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14702,14 +14887,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = (0, import_react52.useState)(null);
-  const onEndedRef = (0, import_react52.useRef)(onEnded);
-  const onErrorRef = (0, import_react52.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react52.useRef)(onPlaybackStateChange);
+  const [resource, setResource] = (0, import_react53.useState)(null);
+  const onEndedRef = (0, import_react53.useRef)(onEnded);
+  const onErrorRef = (0, import_react53.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react53.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -14816,11 +15001,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react52.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react52.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react53.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react53.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14837,7 +15022,7 @@ function VideoHotspot({
     }
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14865,7 +15050,7 @@ function VideoHotspot({
 
 // src/hotspot/audio-hotspot.tsx
 var import_fiber27 = require("@react-three/fiber");
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_three29 = require("three");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var SPEAKER_TEXTURE_SIZE = 512;
@@ -14931,8 +15116,8 @@ function createSpeakerTexture(state) {
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = (0, import_react53.useState)({ playing: null, stopped: null });
-  (0, import_react53.useEffect)(() => {
+  const [textures, setTextures] = (0, import_react54.useState)({ playing: null, stopped: null });
+  (0, import_react54.useEffect)(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -14949,10 +15134,10 @@ function useSpeakerTextures(enabled) {
 }
 function useIconTexture(icon, enabled, onError, id) {
   const gl = (0, import_fiber27.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react53.useState)(null);
-  const onErrorRef = (0, import_react53.useRef)(onError);
+  const [texture, setTexture] = (0, import_react54.useState)(null);
+  const onErrorRef = (0, import_react54.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -14989,7 +15174,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  (0, import_react53.useEffect)(
+  (0, import_react54.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -15008,13 +15193,13 @@ function useAudioHowl({
   playing,
   src
 }) {
-  const [howl, setHowl] = (0, import_react53.useState)(null);
-  const playingRef = (0, import_react53.useRef)(playing);
-  const loopRef = (0, import_react53.useRef)(loop ?? false);
-  const onEndedRef = (0, import_react53.useRef)(onEnded);
-  const onErrorRef = (0, import_react53.useRef)(onError);
-  const onPlaybackErrorRef = (0, import_react53.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react53.useRef)(onPlaybackStateChange);
+  const [howl, setHowl] = (0, import_react54.useState)(null);
+  const playingRef = (0, import_react54.useRef)(playing);
+  const loopRef = (0, import_react54.useRef)(loop ?? false);
+  const onEndedRef = (0, import_react54.useRef)(onEnded);
+  const onErrorRef = (0, import_react54.useRef)(onError);
+  const onPlaybackErrorRef = (0, import_react54.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react54.useRef)(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -15022,7 +15207,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -15059,7 +15244,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -15103,15 +15288,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_react53.useRef)(playing);
+  const playingRef = (0, import_react54.useRef)(playing);
   playingRef.current = playing;
-  const mutedRef = (0, import_react53.useRef)(muted);
-  const volumeRef = (0, import_react53.useRef)(volume);
-  const rangeRef = (0, import_react53.useRef)(range);
+  const mutedRef = (0, import_react54.useRef)(muted);
+  const volumeRef = (0, import_react54.useRef)(volume);
+  const rangeRef = (0, import_react54.useRef)(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!howl) {
       return;
     }
@@ -15121,7 +15306,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -15156,7 +15341,7 @@ function AudioHotspot({
 }
 
 // src/hotspot/text-hotspot.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_three30 = require("three");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
@@ -15378,12 +15563,12 @@ function createTextTexture(text, width, height, style) {
   return texture;
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react54.useState)(null);
-  const onLoadRef = (0, import_react54.useRef)(onLoad);
-  const onErrorRef = (0, import_react54.useRef)(onError);
+  const [texture, setTexture] = (0, import_react55.useState)(null);
+  const onLoadRef = (0, import_react55.useRef)(onLoad);
+  const onErrorRef = (0, import_react55.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {