@ericchen1990/pano-view 0.1.5 → 0.2.0

package/dist/index.cjs

@@ -24,7 +24,12 @@ __export(index_exports, {
   AutoRotate: () => AutoRotate,
   GraphicHotspot: () => GraphicHotspot,
   ImageHotspot: () => ImageHotspot,
+  KeyboardControls: () => KeyboardControls,
   MAX_HOTSPOT_PITCH: () => MAX_HOTSPOT_PITCH,
+  MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY: () => MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY,
+  MouseControls: () => MouseControls,
+  PanoContextMenu: () => PanoContextMenu,
+  PanoEvents: () => PanoEvents,
   PanoView: () => PanoView,
   PanoramaScenes: () => PanoramaScenes,
   PolygonHotspot: () => PolygonHotspot,
@@ -32,12 +37,19 @@ __export(index_exports, {
   SequenceHotspot: () => SequenceHotspot,
   Sphere: () => Sphere,
   Tile: () => Tile,
+  TouchControls: () => TouchControls,
   VideoHotspot: () => VideoHotspot,
   clampPanoPitch: () => clampPanoPitch,
+  composePanoContextMenuItems: () => composePanoContextMenuItems,
+  createDefaultPanoContextMenuItems: () => createDefaultPanoContextMenuItems,
+  createPanoContextMenuPresets: () => createPanoContextMenuPresets,
+  cycleSceneId: () => cycleSceneId,
   normalizePanoPosition: () => normalizePanoPosition,
   normalizePanoYaw: () => normalizePanoYaw,
   panoPositionToVector3: () => panoPositionToVector3,
+  resolvePanoContextMenuEntries: () => resolvePanoContextMenuEntries,
   unwrapPolygonVertices: () => unwrapPolygonVertices,
+  usePanoEvents: () => usePanoEvents,
   validatePolygonVertices: () => validatePolygonVertices,
   validatePolylineVertices: () => validatePolylineVertices,
   vector3ToPanoPosition: () => vector3ToPanoPosition
@@ -45,21 +57,59 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/pano-view.tsx
-var import_fiber3 = require("@react-three/fiber");
-var import_react4 = require("react");
+var import_fiber8 = require("@react-three/fiber");
+var import_react11 = require("react");
 
-// src/panorama-controls.tsx
-var import_fiber = require("@react-three/fiber");
+// src/auto-rotate.tsx
+var import_fiber2 = require("@react-three/fiber");
+var import_react3 = require("react");
+
+// src/pano-event-bus.ts
 var import_react = require("react");
+function createPanoEventBus() {
+  const listeners = /* @__PURE__ */ new Map();
+  return {
+    subscribe(type, listener) {
+      let set = listeners.get(type);
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        listeners.set(type, set);
+      }
+      set.add(listener);
+      return () => {
+        set?.delete(listener);
+        if (set && set.size === 0) {
+          listeners.delete(type);
+        }
+      };
+    },
+    emit(type, payload) {
+      const set = listeners.get(type);
+      if (!set || set.size === 0) {
+        return;
+      }
+      for (const listener of [...set]) {
+        listener(payload);
+      }
+    }
+  };
+}
+var PanoEventBusContext = (0, import_react.createContext)(null);
+
+// src/panorama-view-runtime.tsx
+var import_fiber = require("@react-three/fiber");
+var import_react2 = require("react");
 var import_three = require("three");
-var MAX_PITCH = 89.9;
+var MAX_PITCH = 90;
+var BOUNCE_OVERSHOOT_PITCH = 12;
+var BOUNCE_OVERSHOOT_FOV_RATIO = 0.15;
 var INERTIA_ROTATION_DAMPING = 8;
 var INERTIA_ZOOM_DAMPING = 12;
 var DEFAULT_ROTATE_DAMPING = 14;
 var DEFAULT_ZOOM_DAMPING = 16;
-var MIN_ROTATION_VELOCITY = 0.01;
-var MIN_ZOOM_VELOCITY = 0.01;
+var DEFAULT_FRICTION_STOP = 0.01;
 var VIEW_SETTLE_EPSILON = 1e-3;
+var PanoramaViewContext = (0, import_react2.createContext)(null);
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -75,54 +125,104 @@ function dampingFactor(damping, deltaSeconds) {
 function resolveDamping(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
 }
-function pointerDistance(a, b) {
-  return Math.hypot(a.x - b.x, a.y - b.y);
+function resolveFrictionStop(value) {
+  return Number.isFinite(value) && value >= 0 ? value : DEFAULT_FRICTION_STOP;
 }
 function viewsEqual(a, b) {
   return a.yaw === b.yaw && a.pitch === b.pitch && a.fov === b.fov;
 }
-var PanoramaControls = (0, import_react.forwardRef)(function PanoramaControls2({ enabled, initialView, minFov, maxFov, options, onViewChange }, ref) {
-  const { camera, gl } = (0, import_fiber.useThree)();
-  const viewRef = (0, import_react.useRef)({ ...initialView });
-  const targetViewRef = (0, import_react.useRef)({ ...initialView });
-  const initialViewRef = (0, import_react.useRef)({ ...initialView });
-  const pointersRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = (0, import_react.useRef)(null);
-  const yawVelocityRef = (0, import_react.useRef)(0);
-  const pitchVelocityRef = (0, import_react.useRef)(0);
-  const zoomVelocityRef = (0, import_react.useRef)(0);
-  const dirtyRef = (0, import_react.useRef)(true);
-  const interactingRef = (0, import_react.useRef)(false);
-  const interactionLockCountRef = (0, import_react.useRef)(0);
-  const optionsRef = (0, import_react.useRef)(options);
-  const onViewChangeRef = (0, import_react.useRef)(onViewChange);
-  const lastEmittedViewRef = (0, import_react.useRef)(null);
-  const eulerRef = (0, import_react.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
+var PanoramaViewRuntime = (0, import_react2.forwardRef)(function PanoramaViewRuntime2({ initialView, minFov, maxFov, options, eventBus }, ref) {
+  const { camera } = (0, import_fiber.useThree)();
+  const viewRef = (0, import_react2.useRef)({ ...initialView });
+  const targetViewRef = (0, import_react2.useRef)({ ...initialView });
+  const initialViewRef = (0, import_react2.useRef)({ ...initialView });
+  const yawVelocityRef = (0, import_react2.useRef)(0);
+  const pitchVelocityRef = (0, import_react2.useRef)(0);
+  const zoomVelocityRef = (0, import_react2.useRef)(0);
+  const dirtyRef = (0, import_react2.useRef)(true);
+  const settledRef = (0, import_react2.useRef)(false);
+  const interactingRef = (0, import_react2.useRef)(false);
+  const mouseActiveRef = (0, import_react2.useRef)(false);
+  const touchActiveRef = (0, import_react2.useRef)(false);
+  const interactionLockCountRef = (0, import_react2.useRef)(0);
+  const keyboardActiveRef = (0, import_react2.useRef)(false);
+  const lastVelocitySampleAtRef = (0, import_react2.useRef)(null);
+  const optionsRef = (0, import_react2.useRef)(options);
+  const eventBusRef = (0, import_react2.useRef)(eventBus);
+  const lastEmittedViewRef = (0, import_react2.useRef)(null);
+  const eulerRef = (0, import_react2.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
+  const minFovRef = (0, import_react2.useRef)(minFov);
+  const maxFovRef = (0, import_react2.useRef)(maxFov);
   optionsRef.current = options;
-  onViewChangeRef.current = onViewChange;
-  const constrainView = (view, current = targetViewRef.current) => {
+  eventBusRef.current = eventBus;
+  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 || interactionLockCountRef.current > 0 || hasInertia();
+  const syncInteracting = () => {
+    interactingRef.current = mouseActiveRef.current || touchActiveRef.current;
+  };
+  const hardConstrainView = (view, current = targetViewRef.current) => {
     return {
       yaw: normalizeYaw(view.yaw ?? current.yaw),
       pitch: clamp(view.pitch ?? current.pitch, -MAX_PITCH, MAX_PITCH),
-      fov: clamp(view.fov ?? current.fov, minFov, maxFov)
+      fov: clamp(
+        view.fov ?? current.fov,
+        minFovRef.current,
+        maxFovRef.current
+      )
+    };
+  };
+  const softConstrainView = (view, current = targetViewRef.current) => {
+    const bouncing = optionsRef.current.bouncingLimits === true;
+    if (!bouncing || !interactingRef.current) {
+      return hardConstrainView(view, current);
+    }
+    const fovRange = Math.max(maxFovRef.current - minFovRef.current, 1);
+    const fovOvershoot = fovRange * BOUNCE_OVERSHOOT_FOV_RATIO;
+    return {
+      yaw: normalizeYaw(view.yaw ?? current.yaw),
+      pitch: clamp(
+        view.pitch ?? current.pitch,
+        -MAX_PITCH - BOUNCE_OVERSHOOT_PITCH,
+        MAX_PITCH + BOUNCE_OVERSHOOT_PITCH
+      ),
+      fov: clamp(
+        view.fov ?? current.fov,
+        minFovRef.current - fovOvershoot,
+        maxFovRef.current + fovOvershoot
+      )
     };
   };
   const stopVelocity = () => {
     yawVelocityRef.current = 0;
     pitchVelocityRef.current = 0;
     zoomVelocityRef.current = 0;
+    lastVelocitySampleAtRef.current = null;
+  };
+  const markDirty = () => {
+    dirtyRef.current = true;
+    settledRef.current = false;
+  };
+  const snapTargetToHardLimits = () => {
+    const next = hardConstrainView(targetViewRef.current);
+    if (next.yaw !== targetViewRef.current.yaw || next.pitch !== targetViewRef.current.pitch || next.fov !== targetViewRef.current.fov) {
+      targetViewRef.current = next;
+      markDirty();
+    }
   };
   const acquireInteractionLock = () => {
     interactionLockCountRef.current += 1;
     stopVelocity();
-    interactingRef.current = false;
-    pinchDistanceRef.current = null;
-    for (const pointerId of pointersRef.current.keys()) {
-      if (gl.domElement.hasPointerCapture?.(pointerId)) {
-        gl.domElement.releasePointerCapture?.(pointerId);
-      }
+    if (mouseActiveRef.current) {
+      mouseActiveRef.current = false;
+      eventBusRef.current.emit("viewinteractionend", { source: "mouse" });
+    }
+    if (touchActiveRef.current) {
+      touchActiveRef.current = false;
+      eventBusRef.current.emit("viewinteractionend", { source: "touch" });
     }
-    pointersRef.current.clear();
+    syncInteracting();
     let released = false;
     return () => {
       if (released) {
@@ -136,233 +236,145 @@ var PanoramaControls = (0, import_react.forwardRef)(function PanoramaControls2({
     };
   };
   const setView = (view, setOptions) => {
-    const nextView = constrainView(view);
+    const nextView = hardConstrainView(view);
     targetViewRef.current = nextView;
     viewRef.current = nextView;
     if (setOptions?.immediate !== false) {
       stopVelocity();
     }
-    dirtyRef.current = true;
+    markDirty();
+  };
+  const applyViewDelta = (delta, applyOptions) => {
+    if (interactionLockCountRef.current > 0) {
+      return false;
+    }
+    const current = targetViewRef.current;
+    const nextYaw = delta.yaw !== void 0 && Number.isFinite(delta.yaw) ? current.yaw + delta.yaw : current.yaw;
+    const nextPitch = delta.pitch !== void 0 && Number.isFinite(delta.pitch) ? current.pitch + delta.pitch : current.pitch;
+    const nextFov = delta.fov !== void 0 && Number.isFinite(delta.fov) ? current.fov + delta.fov : current.fov;
+    targetViewRef.current = softConstrainView({
+      yaw: nextYaw,
+      pitch: nextPitch,
+      fov: nextFov
+    });
+    markDirty();
+    if (applyOptions?.recordVelocity) {
+      const now = performance.now();
+      const previousAt = lastVelocitySampleAtRef.current;
+      const elapsed = previousAt === null ? 1 / 60 : Math.max((now - previousAt) / 1e3, 1 / 120);
+      lastVelocitySampleAtRef.current = now;
+      if (delta.yaw !== void 0 && Number.isFinite(delta.yaw)) {
+        yawVelocityRef.current = delta.yaw / elapsed;
+      }
+      if (delta.pitch !== void 0 && Number.isFinite(delta.pitch)) {
+        pitchVelocityRef.current = delta.pitch / elapsed;
+      }
+      if (delta.fov !== void 0 && Number.isFinite(delta.fov)) {
+        zoomVelocityRef.current = clamp(delta.fov / elapsed, -180, 180);
+      }
+    }
+    return true;
   };
-  (0, import_react.useImperativeHandle)(
+  (0, import_react2.useImperativeHandle)(
     ref,
     () => ({
       getView: () => ({ ...viewRef.current }),
+      getTargetView: () => ({ ...targetViewRef.current }),
       setView,
       reset: () => setView(initialViewRef.current),
+      applyViewDelta,
+      setKeyboardActive: (active) => {
+        const wasActive = keyboardActiveRef.current;
+        keyboardActiveRef.current = active;
+        if (active && !wasActive) {
+          eventBusRef.current.emit("viewinteractionstart", {
+            source: "keyboard"
+          });
+        } else if (!active && wasActive) {
+          eventBusRef.current.emit("viewinteractionend", {
+            source: "keyboard"
+          });
+        }
+      },
+      setPointerActive: (source, active) => {
+        const wasActive = source === "mouse" ? mouseActiveRef.current : touchActiveRef.current;
+        if (source === "mouse") {
+          mouseActiveRef.current = active;
+        } else {
+          touchActiveRef.current = active;
+        }
+        syncInteracting();
+        if (active && !wasActive) {
+          eventBusRef.current.emit("viewinteractionstart", { source });
+        } else if (!active && wasActive) {
+          eventBusRef.current.emit("viewinteractionend", { source });
+        }
+        if (active) {
+          stopVelocity();
+        } else if (!mouseActiveRef.current && !touchActiveRef.current) {
+          lastVelocitySampleAtRef.current = null;
+          snapTargetToHardLimits();
+        }
+      },
+      isInteractionLocked: () => interactionLockCountRef.current > 0,
+      isUserInteracting,
       acquireInteractionLock,
       applyAutoRotation: (yawDelta) => {
         const inertiaFinished = yawVelocityRef.current === 0 && pitchVelocityRef.current === 0 && zoomVelocityRef.current === 0;
-        if (!Number.isFinite(yawDelta) || interactionLockCountRef.current > 0 || interactingRef.current || !inertiaFinished) {
+        if (!Number.isFinite(yawDelta) || interactionLockCountRef.current > 0 || interactingRef.current || keyboardActiveRef.current || !inertiaFinished) {
           return false;
         }
         targetViewRef.current.yaw += yawDelta;
-        dirtyRef.current = true;
+        markDirty();
         return true;
       }
     }),
-    [gl, maxFov, minFov]
+    []
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     initialViewRef.current = { ...initialView };
     setView(initialView);
   }, [initialView.fov, initialView.pitch, initialView.yaw]);
-  (0, import_react.useEffect)(() => {
-    const element = gl.domElement;
-    if (!enabled) {
-      pointersRef.current.clear();
-      interactingRef.current = false;
-      return;
-    }
-    const updatePointer = (event) => {
-      const previous = pointersRef.current.get(event.pointerId);
-      const now = performance.now();
-      const next = { x: event.clientX, y: event.clientY, at: now };
-      pointersRef.current.set(event.pointerId, next);
-      return { previous, next };
-    };
-    const onPointerDown = (event) => {
-      if (interactionLockCountRef.current > 0) {
-        return;
-      }
-      event.preventDefault();
-      interactingRef.current = true;
-      stopVelocity();
-      pointersRef.current.set(event.pointerId, {
-        x: event.clientX,
-        y: event.clientY,
-        at: performance.now()
-      });
-      element.setPointerCapture?.(event.pointerId);
-      if (pointersRef.current.size === 2) {
-        const [first, second] = Array.from(pointersRef.current.values());
-        pinchDistanceRef.current = pointerDistance(first, second);
-      }
-    };
-    const onPointerMove = (event) => {
-      if (interactionLockCountRef.current > 0) {
-        return;
-      }
-      if (!pointersRef.current.has(event.pointerId)) {
-        return;
-      }
-      event.preventDefault();
-      const { previous, next } = updatePointer(event);
-      if (!previous) {
-        return;
-      }
-      const pointers = Array.from(pointersRef.current.values());
-      if (pointers.length >= 2) {
-        const distance = pointerDistance(pointers[0], pointers[1]);
-        const previousDistance = pinchDistanceRef.current;
-        pinchDistanceRef.current = distance;
-        if (previousDistance && distance > 0) {
-          const currentFov = targetViewRef.current.fov;
-          const nextFov = clamp(
-            currentFov * (previousDistance / distance),
-            minFov,
-            maxFov
-          );
-          const elapsed2 = Math.max((next.at - previous.at) / 1e3, 1 / 120);
-          zoomVelocityRef.current = (nextFov - currentFov) / elapsed2;
-          targetViewRef.current = {
-            ...targetViewRef.current,
-            fov: nextFov
-          };
-          dirtyRef.current = true;
-        }
-        return;
-      }
-      const rect = element.getBoundingClientRect();
-      const rotateSpeed = optionsRef.current.rotateSpeed ?? 0.35;
-      const deltaYaw = -(next.x - previous.x) * 360 * rotateSpeed / Math.max(rect.width, 1);
-      const deltaPitch = (next.y - previous.y) * 180 * rotateSpeed / Math.max(rect.height, 1);
-      const elapsed = Math.max((next.at - previous.at) / 1e3, 1 / 120);
-      targetViewRef.current = constrainView({
-        yaw: targetViewRef.current.yaw + deltaYaw,
-        pitch: targetViewRef.current.pitch + deltaPitch
-      });
-      yawVelocityRef.current = deltaYaw / elapsed;
-      pitchVelocityRef.current = deltaPitch / elapsed;
-      dirtyRef.current = true;
-    };
-    const releasePointer = (event) => {
-      pointersRef.current.delete(event.pointerId);
-      if (element.hasPointerCapture?.(event.pointerId)) {
-        element.releasePointerCapture?.(event.pointerId);
-      }
-      if (pointersRef.current.size < 2) {
-        pinchDistanceRef.current = null;
-      }
-      interactingRef.current = pointersRef.current.size > 0;
-    };
-    const onWheel = (event) => {
-      if (interactionLockCountRef.current > 0) {
-        event.preventDefault();
-        return;
-      }
-      event.preventDefault();
-      const zoomSpeed = optionsRef.current.zoomSpeed ?? 0.08;
-      const delta = event.deltaY * zoomSpeed;
-      const nextFov = clamp(
-        targetViewRef.current.fov + delta,
-        minFov,
-        maxFov
-      );
-      zoomVelocityRef.current = clamp(
-        zoomVelocityRef.current + delta * 12,
-        -180,
-        180
-      );
-      targetViewRef.current = {
-        ...targetViewRef.current,
-        fov: nextFov
-      };
-      dirtyRef.current = true;
-    };
-    const onKeyDown = (event) => {
-      if (interactionLockCountRef.current > 0) {
-        return;
-      }
-      if (optionsRef.current.keyboard === false) {
-        return;
-      }
-      const step = event.shiftKey ? 10 : 3;
-      let next = null;
-      if (event.key === "ArrowLeft") {
-        next = { yaw: targetViewRef.current.yaw - step };
-      } else if (event.key === "ArrowRight") {
-        next = { yaw: targetViewRef.current.yaw + step };
-      } else if (event.key === "ArrowUp") {
-        next = { pitch: targetViewRef.current.pitch + step };
-      } else if (event.key === "ArrowDown") {
-        next = { pitch: targetViewRef.current.pitch - step };
-      } else if (event.key === "+" || event.key === "=") {
-        next = { fov: targetViewRef.current.fov - step };
-      } else if (event.key === "-" || event.key === "_") {
-        next = { fov: targetViewRef.current.fov + step };
-      } else if (event.key === "0") {
-        setView(initialViewRef.current);
-        event.preventDefault();
-        return;
-      }
-      if (next) {
-        event.preventDefault();
-        targetViewRef.current = constrainView(next);
-        dirtyRef.current = true;
-      }
-    };
-    element.addEventListener("pointerdown", onPointerDown);
-    element.addEventListener("pointermove", onPointerMove);
-    element.addEventListener("pointerup", releasePointer);
-    element.addEventListener("pointercancel", releasePointer);
-    element.addEventListener("wheel", onWheel, { passive: false });
-    element.addEventListener("keydown", onKeyDown);
-    return () => {
-      element.removeEventListener("pointerdown", onPointerDown);
-      element.removeEventListener("pointermove", onPointerMove);
-      element.removeEventListener("pointerup", releasePointer);
-      element.removeEventListener("pointercancel", releasePointer);
-      element.removeEventListener("wheel", onWheel);
-      element.removeEventListener("keydown", onKeyDown);
-      pointersRef.current.clear();
-    };
-  }, [enabled, gl, maxFov, minFov]);
   (0, import_fiber.useFrame)((_, deltaSeconds) => {
     if (!(camera instanceof import_three.PerspectiveCamera)) {
       return;
     }
+    const frictionStop = resolveFrictionStop(optionsRef.current.frictionStop);
     const inertiaEnabled = optionsRef.current.inertia !== false;
     if (!interactingRef.current && inertiaEnabled) {
       const rotationDamping = Math.exp(
         -INERTIA_ROTATION_DAMPING * deltaSeconds
       );
       const zoomDamping2 = Math.exp(-INERTIA_ZOOM_DAMPING * deltaSeconds);
-      if (Math.abs(yawVelocityRef.current) >= MIN_ROTATION_VELOCITY) {
+      if (Math.abs(yawVelocityRef.current) >= frictionStop) {
         targetViewRef.current.yaw += yawVelocityRef.current * deltaSeconds;
         yawVelocityRef.current *= rotationDamping;
-        dirtyRef.current = true;
+        markDirty();
       } else {
         yawVelocityRef.current = 0;
       }
-      if (Math.abs(pitchVelocityRef.current) >= MIN_ROTATION_VELOCITY) {
+      if (Math.abs(pitchVelocityRef.current) >= frictionStop) {
         targetViewRef.current.pitch += pitchVelocityRef.current * deltaSeconds;
         pitchVelocityRef.current *= rotationDamping;
-        dirtyRef.current = true;
+        markDirty();
       } else {
         pitchVelocityRef.current = 0;
       }
-      if (Math.abs(zoomVelocityRef.current) >= MIN_ZOOM_VELOCITY) {
+      if (Math.abs(zoomVelocityRef.current) >= frictionStop) {
         targetViewRef.current.fov += zoomVelocityRef.current * deltaSeconds;
         zoomVelocityRef.current *= zoomDamping2;
-        dirtyRef.current = true;
+        markDirty();
       } else {
         zoomVelocityRef.current = 0;
       }
     } else if (!inertiaEnabled) {
       stopVelocity();
     }
-    targetViewRef.current = constrainView(targetViewRef.current);
+    if (!interactingRef.current) {
+      targetViewRef.current = hardConstrainView(targetViewRef.current);
+    } else {
+      targetViewRef.current = softConstrainView(targetViewRef.current);
+    }
     if (!dirtyRef.current) {
       return;
     }
@@ -399,7 +411,12 @@ var PanoramaControls = (0, import_react.forwardRef)(function PanoramaControls2({
     const lastEmitted = lastEmittedViewRef.current;
     if (!lastEmitted || !viewsEqual(lastEmitted, nextView)) {
       lastEmittedViewRef.current = nextView;
-      onViewChangeRef.current?.(nextView);
+      eventBusRef.current.emit("viewchange", nextView);
+    }
+    const wasSettled = settledRef.current;
+    settledRef.current = hasSettled;
+    if (hasSettled && !wasSettled) {
+      eventBusRef.current.emit("viewsettled", nextView);
     }
     dirtyRef.current = !hasSettled;
   });
@@ -407,12 +424,9 @@ var PanoramaControls = (0, import_react.forwardRef)(function PanoramaControls2({
 });
 
 // src/auto-rotate.tsx
-var import_fiber2 = require("@react-three/fiber");
-var import_react2 = require("react");
 var DEFAULT_AUTO_ROTATE_SPEED = 18;
 var DEFAULT_AUTO_ROTATE_ACCELERATION = 18;
 var DEFAULT_AUTO_ROTATE_START_DELAY = 2;
-var PanoramaControlsContext = (0, import_react2.createContext)(null);
 function resolveStartDelay(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 0;
 }
@@ -425,19 +439,31 @@ function AutoRotate({
   acceleration = DEFAULT_AUTO_ROTATE_ACCELERATION,
   startDelay = DEFAULT_AUTO_ROTATE_START_DELAY
 }) {
-  const controlsRef = (0, import_react2.useContext)(PanoramaControlsContext);
-  const elapsedRef = (0, import_react2.useRef)(0);
-  const rotationSpeedRef = (0, import_react2.useRef)(0);
+  const controlsRef = (0, import_react3.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react3.useContext)(PanoEventBusContext);
+  const elapsedRef = (0, import_react3.useRef)(0);
+  const rotationSpeedRef = (0, import_react3.useRef)(0);
+  const rotatingRef = (0, import_react3.useRef)(false);
+  const yawAccumulatedRef = (0, import_react3.useRef)(0);
   if (!controlsRef) {
     throw new Error("<AutoRotate> must be rendered inside <PanoView>.");
   }
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     elapsedRef.current = 0;
     rotationSpeedRef.current = 0;
-  }, [enabled, startDelay]);
+    yawAccumulatedRef.current = 0;
+    if (rotatingRef.current) {
+      rotatingRef.current = false;
+      eventBus?.emit("autorotatestop", void 0);
+    }
+  }, [enabled, eventBus, startDelay]);
   (0, import_fiber2.useFrame)((_, deltaSeconds) => {
     if (!enabled || !Number.isFinite(speed) || speed === 0) {
       rotationSpeedRef.current = 0;
+      if (rotatingRef.current) {
+        rotatingRef.current = false;
+        eventBus?.emit("autorotatestop", void 0);
+      }
       return;
     }
     const delaySeconds = resolveStartDelay(startDelay) / 1e3;
@@ -456,17 +482,30 @@ function AutoRotate({
     const yawDelta = Math.sign(speed) * averageSpeed * deltaSeconds;
     if (!controlsRef.current?.applyAutoRotation(yawDelta)) {
       rotationSpeedRef.current = 0;
+      if (rotatingRef.current) {
+        rotatingRef.current = false;
+        eventBus?.emit("autorotatestop", void 0);
+      }
       return;
     }
+    if (!rotatingRef.current) {
+      rotatingRef.current = true;
+      eventBus?.emit("autorotatestart", void 0);
+    }
+    yawAccumulatedRef.current += Math.abs(yawDelta);
+    while (yawAccumulatedRef.current >= 360) {
+      yawAccumulatedRef.current -= 360;
+      eventBus?.emit("autorotateoneround", void 0);
+    }
     rotationSpeedRef.current = nextSpeed;
   });
   return null;
 }
 
 // src/hotspot/accessibility.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var HotspotAccessibilityContext = (0, import_react3.createContext)(null);
+var HotspotAccessibilityContext = (0, import_react4.createContext)(null);
 var VISUALLY_HIDDEN_STYLE = {
   border: 0,
   clip: "rect(0 0 0 0)",
@@ -492,12 +531,12 @@ function useHotspotAccessibility({
   ariaLabel,
   onActivate
 }) {
-  const registry = (0, import_react3.useContext)(HotspotAccessibilityContext);
-  const [focused, setFocused] = (0, import_react3.useState)(false);
-  const activateRef = (0, import_react3.useRef)(onActivate);
+  const registry = (0, import_react4.useContext)(HotspotAccessibilityContext);
+  const [focused, setFocused] = (0, import_react4.useState)(false);
+  const activateRef = (0, import_react4.useRef)(onActivate);
   const enabled = Boolean(onActivate);
   activateRef.current = onActivate;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!enabled) {
       setFocused(false);
       return;
@@ -519,8 +558,8 @@ function useHotspotAccessibility({
   return focused;
 }
 function useHotspotAccessibilityLayer() {
-  const [entries, setEntries] = (0, import_react3.useState)(() => /* @__PURE__ */ new Map());
-  const register = (0, import_react3.useCallback)(
+  const [entries, setEntries] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
+  const register = (0, import_react4.useCallback)(
     (entry) => {
       const token = Symbol(entry.id);
       const nextEntry = { ...entry, token };
@@ -542,11 +581,11 @@ function useHotspotAccessibilityLayer() {
     },
     []
   );
-  const registry = (0, import_react3.useMemo)(
+  const registry = (0, import_react4.useMemo)(
     () => ({ register }),
     [register]
   );
-  const controls = (0, import_react3.useMemo)(
+  const controls = (0, import_react4.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-label": "Panorama hotspots", style: { pointerEvents: "none" }, children: Array.from(entries.values()).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
@@ -571,138 +610,1647 @@ function useHotspotAccessibilityLayer() {
   return { controls, registry };
 }
 
-// src/panorama-event-surface.tsx
-var import_three3 = require("three");
-
-// src/hotspot/coordinates.ts
-var import_three2 = require("three");
-
-// src/hotspot/types.ts
-var MAX_HOTSPOT_PITCH = 89.9;
-
-// src/hotspot/coordinates.ts
-function normalizePanoYaw(yaw) {
-  if (!Number.isFinite(yaw)) {
-    return 0;
+// src/keyboard-controls.tsx
+var import_fiber3 = require("@react-three/fiber");
+var import_react5 = require("react");
+var DEFAULT_ROTATE_SPEED = 60;
+var DEFAULT_ZOOM_SPEED = 30;
+var DEFAULT_SHIFT_MULTIPLIER = 3;
+var DEFAULT_KEYS = {
+  left: ["ArrowLeft"],
+  right: ["ArrowRight"],
+  up: ["ArrowUp"],
+  down: ["ArrowDown"],
+  zoomIn: ["+", "="],
+  zoomOut: ["-", "_"],
+  previousScene: ["[", "PageUp"],
+  nextScene: ["]", "PageDown"],
+  reset: ["0"]
+};
+var CONTINUOUS_ACTIONS = /* @__PURE__ */ new Set([
+  "left",
+  "right",
+  "up",
+  "down",
+  "zoomIn",
+  "zoomOut"
+]);
+function normalizeBinding(value) {
+  if (value === void 0) {
+    return [];
   }
-  return import_three2.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
+  return (typeof value === "string" ? [value] : [...value]).filter(
+    (entry) => entry.length > 0
+  );
 }
-function clampPanoPitch(pitch) {
-  if (!Number.isFinite(pitch)) {
-    return 0;
+function resolveKeyMap(overrides) {
+  const map = /* @__PURE__ */ new Map();
+  for (const action of Object.keys(DEFAULT_KEYS)) {
+    const bindings = overrides && action in overrides ? normalizeBinding(overrides[action]) : [...DEFAULT_KEYS[action]];
+    for (const binding of bindings) {
+      map.set(binding.toLowerCase(), action);
+    }
   }
-  return import_three2.MathUtils.clamp(pitch, -MAX_HOTSPOT_PITCH, MAX_HOTSPOT_PITCH);
+  return map;
 }
-function normalizePanoPosition(position) {
-  return {
-    yaw: normalizePanoYaw(position.yaw),
-    pitch: clampPanoPitch(position.pitch)
-  };
+function matchAction(event, keyMap) {
+  return keyMap.get(event.key.toLowerCase()) ?? keyMap.get(event.code.toLowerCase()) ?? null;
 }
-function panoPositionToVector3(position, radius = 1) {
-  const normalized = normalizePanoPosition(position);
-  const safeRadius = Number.isFinite(radius) ? Math.max(0, radius) : 1;
-  const yaw = import_three2.MathUtils.degToRad(normalized.yaw);
-  const pitch = import_three2.MathUtils.degToRad(normalized.pitch);
-  const cosPitch = Math.cos(pitch);
-  return new import_three2.Vector3(
-    cosPitch * Math.sin(yaw) * safeRadius,
-    Math.sin(pitch) * safeRadius,
-    -cosPitch * Math.cos(yaw) * safeRadius
-  );
+function resolveSpeed(value, fallback) {
+  return Number.isFinite(value) && value >= 0 ? value : fallback;
 }
-function vector3ToPanoPosition(vector) {
-  const length = Math.hypot(vector.x, vector.y, vector.z);
-  if (!Number.isFinite(length) || length === 0) {
-    return { yaw: 0, pitch: 0 };
+function cycleSceneId(scenes, activeSceneId, step) {
+  if (scenes.length === 0) {
+    return null;
   }
-  return normalizePanoPosition({
-    yaw: import_three2.MathUtils.radToDeg(Math.atan2(vector.x, -vector.z)),
-    pitch: import_three2.MathUtils.radToDeg(
-      Math.asin(import_three2.MathUtils.clamp(vector.y / length, -1, 1))
-    )
-  });
-}
-
-// src/panorama-radius.ts
-var DEFAULT_PANORAMA_RADIUS = 1e3;
-var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
-var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
-
-// src/panorama-event-surface.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
-function makePanoramaPointerEvent(event) {
-  const nativeEvent = event.nativeEvent;
-  return {
-    position: vector3ToPanoPosition(event.ray.direction),
-    nativeEvent,
-    pointerId: "pointerId" in nativeEvent ? nativeEvent.pointerId : void 0,
-    button: nativeEvent.button,
-    buttons: nativeEvent.buttons,
-    clientX: nativeEvent.clientX,
-    clientY: nativeEvent.clientY
-  };
-}
-function emitPanoramaEvent(event, callback) {
-  if (!callback) {
-    return;
+  const index = scenes.findIndex((scene) => scene.id === activeSceneId);
+  if (index < 0) {
+    return null;
   }
-  event.stopPropagation();
-  callback(makePanoramaPointerEvent(event));
+  const nextIndex = (index + step + scenes.length) % scenes.length;
+  return scenes[nextIndex]?.id ?? null;
 }
-function PanoramaEventSurface({
-  onClick,
-  onDoubleClick,
-  onPointerMove
+function KeyboardControls({
+  enabled = true,
+  keys,
+  rotateSpeed = DEFAULT_ROTATE_SPEED,
+  zoomSpeed = DEFAULT_ZOOM_SPEED,
+  shiftMultiplier = DEFAULT_SHIFT_MULTIPLIER,
+  invert = false,
+  fovSpeed,
+  onPreviousScene,
+  onNextScene
 }) {
-  if (!onClick && !onDoubleClick && !onPointerMove) {
-    return null;
+  const controlsRef = (0, import_react5.useContext)(PanoramaViewContext);
+  const { gl } = (0, import_fiber3.useThree)();
+  const pressedRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const shiftHeldRef = (0, import_react5.useRef)(false);
+  const invertRef = (0, import_react5.useRef)(invert);
+  const fovSpeedRef = (0, import_react5.useRef)(fovSpeed);
+  const onPreviousSceneRef = (0, import_react5.useRef)(onPreviousScene);
+  const onNextSceneRef = (0, import_react5.useRef)(onNextScene);
+  const keyMap = (0, import_react5.useMemo)(() => resolveKeyMap(keys), [keys]);
+  if (!controlsRef) {
+    throw new Error("<KeyboardControls> must be rendered inside <PanoView>.");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "mesh",
-    {
-      renderOrder: -200,
-      onClick: (event) => emitPanoramaEvent(event, onClick),
-      onDoubleClick: (event) => emitPanoramaEvent(event, onDoubleClick),
-      onPointerMove: (event) => emitPanoramaEvent(event, onPointerMove),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "meshBasicMaterial",
-          {
-            colorWrite: false,
-            depthTest: false,
-            depthWrite: false,
-            opacity: 0,
+  invertRef.current = invert;
+  fovSpeedRef.current = fovSpeed;
+  onPreviousSceneRef.current = onPreviousScene;
+  onNextSceneRef.current = onNextScene;
+  (0, import_react5.useEffect)(() => {
+    const element = gl.domElement;
+    if (!enabled) {
+      pressedRef.current.clear();
+      shiftHeldRef.current = false;
+      controlsRef.current?.setKeyboardActive(false);
+      return;
+    }
+    const syncKeyboardActive = () => {
+      let continuous = false;
+      for (const action of pressedRef.current) {
+        if (CONTINUOUS_ACTIONS.has(action)) {
+          continuous = true;
+          break;
+        }
+      }
+      controlsRef.current?.setKeyboardActive(continuous);
+    };
+    const clearPressed = () => {
+      pressedRef.current.clear();
+      shiftHeldRef.current = false;
+      controlsRef.current?.setKeyboardActive(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Shift") {
+        shiftHeldRef.current = true;
+      }
+      const action = matchAction(event, keyMap);
+      if (!action) {
+        return;
+      }
+      if (controlsRef.current?.isInteractionLocked()) {
+        return;
+      }
+      event.preventDefault();
+      if (action === "reset") {
+        if (!event.repeat) {
+          controlsRef.current?.reset();
+        }
+        return;
+      }
+      if (action === "previousScene") {
+        if (!event.repeat) {
+          onPreviousSceneRef.current?.();
+        }
+        return;
+      }
+      if (action === "nextScene") {
+        if (!event.repeat) {
+          onNextSceneRef.current?.();
+        }
+        return;
+      }
+      pressedRef.current.add(action);
+      syncKeyboardActive();
+    };
+    const onKeyUp = (event) => {
+      if (event.key === "Shift") {
+        shiftHeldRef.current = false;
+      }
+      const action = matchAction(event, keyMap);
+      if (!action || !CONTINUOUS_ACTIONS.has(action)) {
+        return;
+      }
+      pressedRef.current.delete(action);
+      syncKeyboardActive();
+    };
+    const onBlur = () => {
+      clearPressed();
+    };
+    element.addEventListener("keydown", onKeyDown);
+    element.addEventListener("keyup", onKeyUp);
+    element.addEventListener("blur", onBlur);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      element.removeEventListener("keydown", onKeyDown);
+      element.removeEventListener("keyup", onKeyUp);
+      element.removeEventListener("blur", onBlur);
+      window.removeEventListener("blur", onBlur);
+      clearPressed();
+    };
+  }, [controlsRef, enabled, gl, keyMap]);
+  (0, import_fiber3.useFrame)((_, deltaSeconds) => {
+    if (!enabled || pressedRef.current.size === 0) {
+      return;
+    }
+    const controls = controlsRef.current;
+    if (!controls) {
+      return;
+    }
+    const multiplier = shiftHeldRef.current ? resolveSpeed(shiftMultiplier, DEFAULT_SHIFT_MULTIPLIER) : 1;
+    const rotation = resolveSpeed(rotateSpeed, DEFAULT_ROTATE_SPEED) * multiplier * deltaSeconds;
+    let zoom = resolveSpeed(zoomSpeed, DEFAULT_ZOOM_SPEED) * multiplier * deltaSeconds;
+    const fovCap = fovSpeedRef.current;
+    if (Number.isFinite(fovCap) && fovCap >= 0) {
+      zoom = Math.min(zoom, fovCap * deltaSeconds);
+    }
+    const pitchSign = invertRef.current ? -1 : 1;
+    let yaw = 0;
+    let pitch = 0;
+    let fov = 0;
+    for (const action of pressedRef.current) {
+      switch (action) {
+        case "left":
+          yaw -= rotation;
+          break;
+        case "right":
+          yaw += rotation;
+          break;
+        case "up":
+          pitch += pitchSign * rotation;
+          break;
+        case "down":
+          pitch -= pitchSign * rotation;
+          break;
+        case "zoomIn":
+          fov -= zoom;
+          break;
+        case "zoomOut":
+          fov += zoom;
+          break;
+        case "previousScene":
+        case "nextScene":
+        case "reset":
+          break;
+        default: {
+          const _exhaustive = action;
+          void _exhaustive;
+          break;
+        }
+      }
+    }
+    if (yaw !== 0 || pitch !== 0 || fov !== 0) {
+      controls.applyViewDelta({ yaw, pitch, fov });
+    }
+  });
+  return null;
+}
+
+// src/mouse-controls.tsx
+var import_fiber4 = require("@react-three/fiber");
+var import_react6 = require("react");
+var DEFAULT_ROTATE_SPEED2 = 0.35;
+var DEFAULT_ZOOM_SPEED2 = 0.08;
+var BUTTON_FLAG = {
+  left: 0,
+  middle: 1,
+  right: 2
+};
+function resolveSpeed2(value, fallback) {
+  return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+function resolveButtons(buttons) {
+  const list = buttons && buttons.length > 0 ? buttons : ["left"];
+  return new Set(list.map((button) => BUTTON_FLAG[button]));
+}
+function MouseControls({
+  enabled = true,
+  rotateSpeed = DEFAULT_ROTATE_SPEED2,
+  zoomSpeed = DEFAULT_ZOOM_SPEED2,
+  wheel = true,
+  invert = false,
+  buttons,
+  fovSpeed
+}) {
+  const controlsRef = (0, import_react6.useContext)(PanoramaViewContext);
+  const { gl } = (0, import_fiber4.useThree)();
+  const pointersRef = (0, import_react6.useRef)(
+    /* @__PURE__ */ new Map()
+  );
+  const optionsRef = (0, import_react6.useRef)({
+    rotateSpeed,
+    zoomSpeed,
+    wheel,
+    invert,
+    fovSpeed
+  });
+  if (!controlsRef) {
+    throw new Error("<MouseControls> must be rendered inside <PanoView>.");
+  }
+  optionsRef.current = {
+    rotateSpeed,
+    zoomSpeed,
+    wheel,
+    invert,
+    fovSpeed
+  };
+  (0, import_react6.useEffect)(() => {
+    const element = gl.domElement;
+    const allowedButtons = resolveButtons(buttons);
+    const clearPointers = () => {
+      for (const pointerId of pointersRef.current.keys()) {
+        if (element.hasPointerCapture?.(pointerId)) {
+          element.releasePointerCapture?.(pointerId);
+        }
+      }
+      pointersRef.current.clear();
+      controlsRef.current?.setPointerActive("mouse", false);
+    };
+    if (!enabled) {
+      clearPointers();
+      return;
+    }
+    const isMouseLike = (event) => event.pointerType === "mouse" || event.pointerType === "pen";
+    const syncActive = () => {
+      controlsRef.current?.setPointerActive(
+        "mouse",
+        pointersRef.current.size > 0
+      );
+    };
+    const onPointerDown = (event) => {
+      if (!isMouseLike(event)) {
+        return;
+      }
+      if (controlsRef.current?.isInteractionLocked()) {
+        return;
+      }
+      if (!allowedButtons.has(event.button)) {
+        return;
+      }
+      event.preventDefault();
+      pointersRef.current.set(event.pointerId, {
+        x: event.clientX,
+        y: event.clientY,
+        at: performance.now()
+      });
+      element.setPointerCapture?.(event.pointerId);
+      syncActive();
+    };
+    const onPointerMove = (event) => {
+      if (!isMouseLike(event)) {
+        return;
+      }
+      if (controlsRef.current?.isInteractionLocked()) {
+        return;
+      }
+      const previous = pointersRef.current.get(event.pointerId);
+      if (!previous) {
+        return;
+      }
+      event.preventDefault();
+      const next = {
+        x: event.clientX,
+        y: event.clientY,
+        at: performance.now()
+      };
+      pointersRef.current.set(event.pointerId, next);
+      const rect = element.getBoundingClientRect();
+      const speed = resolveSpeed2(
+        optionsRef.current.rotateSpeed,
+        DEFAULT_ROTATE_SPEED2
+      );
+      const sign = optionsRef.current.invert ? -1 : 1;
+      const deltaYaw = sign * -(next.x - previous.x) * 360 * speed / Math.max(rect.width, 1);
+      const deltaPitch = sign * (next.y - previous.y) * 180 * speed / Math.max(rect.height, 1);
+      controlsRef.current?.applyViewDelta(
+        { yaw: deltaYaw, pitch: deltaPitch },
+        { recordVelocity: true }
+      );
+    };
+    const releasePointer = (event) => {
+      if (!pointersRef.current.has(event.pointerId)) {
+        return;
+      }
+      pointersRef.current.delete(event.pointerId);
+      if (element.hasPointerCapture?.(event.pointerId)) {
+        element.releasePointerCapture?.(event.pointerId);
+      }
+      syncActive();
+    };
+    const onWheel = (event) => {
+      if (!optionsRef.current.wheel) {
+        return;
+      }
+      if (controlsRef.current?.isInteractionLocked()) {
+        event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      const speed = resolveSpeed2(
+        optionsRef.current.zoomSpeed,
+        DEFAULT_ZOOM_SPEED2
+      );
+      let delta = event.deltaY * speed;
+      const cap = optionsRef.current.fovSpeed;
+      if (Number.isFinite(cap) && cap > 0) {
+        delta = Math.max(-cap, Math.min(cap, delta));
+      }
+      controlsRef.current?.applyViewDelta(
+        { fov: delta },
+        { recordVelocity: true }
+      );
+    };
+    element.addEventListener("pointerdown", onPointerDown);
+    element.addEventListener("pointermove", onPointerMove);
+    element.addEventListener("pointerup", releasePointer);
+    element.addEventListener("pointercancel", releasePointer);
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      element.removeEventListener("pointerdown", onPointerDown);
+      element.removeEventListener("pointermove", onPointerMove);
+      element.removeEventListener("pointerup", releasePointer);
+      element.removeEventListener("pointercancel", releasePointer);
+      element.removeEventListener("wheel", onWheel);
+      clearPointers();
+    };
+  }, [buttons, controlsRef, enabled, gl]);
+  return null;
+}
+
+// src/pano-context-menu.tsx
+var import_react7 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_ICON_SIZE = 16;
+var MENU_EDGE_PADDING = 8;
+var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
+var PanoContextMenuOverlayContext = (0, import_react7.createContext)(null);
+var DEFAULT_APPEARANCE = {
+  background: "#161616",
+  color: "#f4f4f4",
+  border: "1px solid #2e2e2e",
+  borderRadius: 8,
+  shadow: "0 8px 24px rgba(0, 0, 0, 0.45)",
+  opacity: 1,
+  fontSize: 13,
+  minWidth: 180,
+  padding: 4,
+  iconSize: DEFAULT_ICON_SIZE,
+  itemPadding: "6px 10px",
+  itemHoverBackground: "#2a2a2a",
+  itemDisabledColor: "#777777",
+  separatorColor: "#333333",
+  separatorMargin: "4px 6px"
+};
+function clampBackgroundOpacity(value) {
+  if (!Number.isFinite(value)) {
+    return DEFAULT_APPEARANCE.opacity;
+  }
+  return Math.min(
+    1,
+    Math.max(MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY, value)
+  );
+}
+function isActionItem(item) {
+  return item.type !== "separator";
+}
+function DefaultContextMenuPanel({
+  items,
+  appearance,
+  className,
+  style,
+  itemClassName,
+  separatorClassName,
+  selectContext,
+  onRequestClose
+}) {
+  const menuRef = (0, import_react7.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react7.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_react7.useMemo)(
+    () => items.filter((item) => {
+      if (!isActionItem(item)) {
+        return true;
+      }
+      return !item.hidden;
+    }),
+    [items]
+  );
+  const focusableIndices = (0, import_react7.useMemo)(() => {
+    const indices = [];
+    visibleItems.forEach((item, index) => {
+      if (isActionItem(item) && !item.disabled) {
+        indices.push(index);
+      }
+    });
+    return indices;
+  }, [visibleItems]);
+  (0, import_react7.useEffect)(() => {
+    const first = focusableIndices[0];
+    setActiveIndex(first ?? 0);
+    const frame = requestAnimationFrame(() => {
+      const buttons = menuRef.current?.querySelectorAll(
+        '[role="menuitem"]:not([aria-disabled="true"])'
+      );
+      buttons?.[0]?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [focusableIndices]);
+  const activateItem = (0, import_react7.useCallback)(
+    (item) => {
+      if (item.disabled) {
+        return;
+      }
+      item.onSelect(selectContext);
+      onRequestClose();
+    },
+    [onRequestClose, selectContext]
+  );
+  const moveFocus = (direction) => {
+    if (focusableIndices.length === 0) {
+      return;
+    }
+    const currentSlot = focusableIndices.indexOf(activeIndex);
+    const nextSlot = currentSlot === -1 ? 0 : (currentSlot + direction + focusableIndices.length) % focusableIndices.length;
+    const nextIndex = focusableIndices[nextSlot];
+    setActiveIndex(nextIndex);
+    const buttons = menuRef.current?.querySelectorAll(
+      '[role="menuitem"]'
+    );
+    buttons?.[nextIndex]?.focus();
+  };
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        moveFocus(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        moveFocus(-1);
+        break;
+      case "Home": {
+        event.preventDefault();
+        const first = focusableIndices[0];
+        if (first !== void 0) {
+          setActiveIndex(first);
+          const buttons = menuRef.current?.querySelectorAll(
+            '[role="menuitem"]'
+          );
+          buttons?.[first]?.focus();
+        }
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        const last = focusableIndices[focusableIndices.length - 1];
+        if (last !== void 0) {
+          setActiveIndex(last);
+          const buttons = menuRef.current?.querySelectorAll(
+            '[role="menuitem"]'
+          );
+          buttons?.[last]?.focus();
+        }
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        onRequestClose();
+        break;
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        const item = visibleItems[activeIndex];
+        if (item && isActionItem(item)) {
+          activateItem(item);
+        }
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  };
+  const backgroundOpacity = clampBackgroundOpacity(resolved.opacity);
+  const panelStyle = {
+    color: resolved.color,
+    border: resolved.border,
+    borderRadius: resolved.borderRadius,
+    boxShadow: resolved.shadow,
+    fontSize: resolved.fontSize,
+    minWidth: resolved.minWidth,
+    padding: resolved.padding,
+    pointerEvents: "auto",
+    position: "relative",
+    userSelect: "none",
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: menuRef,
+      "aria-label": "Panorama context menu",
+      className,
+      onKeyDown: handleKeyDown,
+      role: "menu",
+      style: panelStyle,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              background: resolved.background,
+              borderRadius: resolved.borderRadius,
+              inset: 0,
+              opacity: backgroundOpacity,
+              pointerEvents: "none",
+              position: "absolute",
+              zIndex: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "relative", zIndex: 1 }, children: visibleItems.map((item, index) => {
+          if (!isActionItem(item)) {
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                "aria-hidden": true,
+                className: [separatorClassName, item.className].filter(Boolean).join(" ") || void 0,
+                role: "separator",
+                style: {
+                  background: resolved.separatorColor,
+                  height: 1,
+                  margin: resolved.separatorMargin,
+                  ...item.style
+                }
+              },
+              item.id ?? `separator-${index}`
+            );
+          }
+          const disabled = item.disabled === true;
+          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "img",
+            {
+              alt: item.imageAlt ?? "",
+              draggable: false,
+              src: item.image,
+              style: {
+                display: "block",
+                height: iconSize,
+                objectFit: "contain",
+                width: iconSize
+              }
+            }
+          ) : null);
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "button",
+            {
+              "aria-disabled": disabled || void 0,
+              className: [itemClassName, item.className].filter(Boolean).join(" ") || void 0,
+              disabled,
+              onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                activateItem(item);
+              },
+              onMouseEnter: (event) => {
+                if (!disabled) {
+                  setActiveIndex(index);
+                  event.currentTarget.focus();
+                }
+              },
+              role: "menuitem",
+              style: {
+                alignItems: "center",
+                background: !disabled && activeIndex === index ? resolved.itemHoverBackground : "transparent",
+                border: "none",
+                borderRadius: 4,
+                color: disabled ? resolved.itemDisabledColor : "inherit",
+                cursor: disabled ? "default" : "pointer",
+                display: "flex",
+                font: "inherit",
+                gap: 8,
+                padding: resolved.itemPadding,
+                textAlign: "left",
+                width: "100%",
+                ...item.style
+              },
+              tabIndex: disabled ? -1 : activeIndex === index ? 0 : -1,
+              type: "button",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    style: {
+                      alignItems: "center",
+                      display: "inline-flex",
+                      flexShrink: 0,
+                      height: iconSize,
+                      justifyContent: "center",
+                      width: iconSize
+                    },
+                    children: iconNode
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1 }, children: item.label })
+              ]
+            },
+            item.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function PositionedMenuShell({
+  clientX,
+  clientY,
+  overlayElement,
+  children
+}) {
+  const shellRef = (0, import_react7.useRef)(null);
+  const [offset, setOffset] = (0, import_react7.useState)({ left: 0, top: 0 });
+  (0, import_react7.useLayoutEffect)(() => {
+    const shell = shellRef.current;
+    if (!overlayElement || !shell) {
+      return;
+    }
+    const overlayRect = overlayElement.getBoundingClientRect();
+    const menuRect = shell.getBoundingClientRect();
+    const rawLeft = clientX - overlayRect.left;
+    const rawTop = clientY - overlayRect.top;
+    const maxLeft = Math.max(
+      MENU_EDGE_PADDING,
+      overlayRect.width - menuRect.width - MENU_EDGE_PADDING
+    );
+    const maxTop = Math.max(
+      MENU_EDGE_PADDING,
+      overlayRect.height - menuRect.height - MENU_EDGE_PADDING
+    );
+    setOffset({
+      left: Math.min(Math.max(rawLeft, MENU_EDGE_PADDING), maxLeft),
+      top: Math.min(Math.max(rawTop, MENU_EDGE_PADDING), maxTop)
+    });
+  }, [clientX, clientY, overlayElement, children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: shellRef,
+      style: {
+        left: offset.left,
+        position: "absolute",
+        top: offset.top,
+        zIndex: 20
+      },
+      children
+    }
+  );
+}
+function usePanoContextMenuOverlay() {
+  const [session, setSession] = (0, import_react7.useState)(null);
+  const overlayRef = (0, import_react7.useRef)(null);
+  const [overlayElement, setOverlayElement] = (0, import_react7.useState)(
+    null
+  );
+  const api = (0, import_react7.useMemo)(
+    () => ({ setSession, overlayRef }),
+    []
+  );
+  const setOverlayNode = (0, import_react7.useCallback)((node) => {
+    overlayRef.current = node;
+    setOverlayElement(node);
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    if (!session) {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      const overlay2 = overlayRef.current;
+      if (!overlay2) {
+        return;
+      }
+      const target = event.target;
+      if (target instanceof Node && overlay2.contains(target)) {
+        const menuRoot = overlay2.querySelector(
+          '[role="menu"], [data-pano-context-menu]'
+        );
+        if (menuRoot && menuRoot.contains(target)) {
+          return;
+        }
+      }
+      setSession(null);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setSession(null);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [session]);
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: setOverlayNode,
+      "aria-hidden": session ? void 0 : true,
+      style: {
+        inset: 0,
+        pointerEvents: "none",
+        position: "absolute",
+        zIndex: 20
+      },
+      children: session ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        PositionedMenuShell,
+        {
+          clientX: session.event.clientX,
+          clientY: session.event.clientY,
+          overlayElement,
+          children: session.render()
+        },
+        session.key
+      ) : null
+    }
+  );
+  return { api, overlay };
+}
+function PanoContextMenu({
+  items,
+  prepend,
+  append,
+  appearance,
+  className,
+  style,
+  itemClassName,
+  separatorClassName,
+  children
+}) {
+  const eventBus = (0, import_react7.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react7.useContext)(PanoramaViewContext);
+  const overlayApi = (0, import_react7.useContext)(PanoContextMenuOverlayContext);
+  const actions = (0, import_react7.useContext)(PanoContextMenuActionsContext);
+  const instanceId = (0, import_react7.useId)();
+  const sessionKeyRef = (0, import_react7.useRef)(0);
+  const propsRef = (0, import_react7.useRef)({
+    items,
+    prepend,
+    append,
+    appearance,
+    className,
+    style,
+    itemClassName,
+    separatorClassName,
+    children
+  });
+  propsRef.current = {
+    items,
+    prepend,
+    append,
+    appearance,
+    className,
+    style,
+    itemClassName,
+    separatorClassName,
+    children
+  };
+  if (!eventBus || !controlsRef) {
+    throw new Error("<PanoContextMenu> must be rendered inside <PanoView>.");
+  }
+  if (!overlayApi) {
+    throw new Error(
+      "<PanoContextMenu> requires the PanoView context-menu overlay host."
+    );
+  }
+  const close = (0, import_react7.useCallback)(() => {
+    overlayApi.setSession(null);
+  }, [overlayApi]);
+  const openMenu = (0, import_react7.useCallback)(
+    (event) => {
+      event.nativeEvent.preventDefault();
+      const view = controlsRef.current?.getView() ?? {
+        yaw: 0,
+        pitch: 0,
+        fov: 75
+      };
+      const selectContext = {
+        position: event.position,
+        view,
+        nativeEvent: event.nativeEvent,
+        close
+      };
+      const current = propsRef.current;
+      sessionKeyRef.current += 1;
+      const key = `${instanceId}-${sessionKeyRef.current}`;
+      const hasCustomChildren = typeof current.children === "function";
+      const presets = actions ? createPanoContextMenuPresets(actions) : null;
+      const resolvedItems = presets ? composePanoContextMenuItems(current, presets) : current.items?.filter(isActionEntry) ?? [];
+      if (!hasCustomChildren && resolvedItems.length === 0) {
+        return;
+      }
+      overlayApi.setSession({
+        key,
+        event,
+        view,
+        render: () => {
+          if (hasCustomChildren && current.children) {
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            DefaultContextMenuPanel,
+            {
+              appearance: current.appearance,
+              className: current.className,
+              itemClassName: current.itemClassName,
+              items: resolvedItems,
+              onRequestClose: close,
+              selectContext,
+              separatorClassName: current.separatorClassName,
+              style: current.style
+            }
+          );
+        }
+      });
+    },
+    [actions, close, controlsRef, instanceId, overlayApi]
+  );
+  (0, import_react7.useEffect)(() => {
+    const unsubscribeContextMenu = eventBus.subscribe(
+      "contextmenu",
+      openMenu
+    );
+    const unsubscribeInteraction = eventBus.subscribe(
+      "viewinteractionstart",
+      () => {
+        close();
+      }
+    );
+    return () => {
+      unsubscribeContextMenu();
+      unsubscribeInteraction();
+      close();
+    };
+  }, [close, eventBus, openMenu]);
+  return null;
+}
+function ResetViewIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      "aria-hidden": true,
+      fill: "none",
+      height: "100%",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.75",
+      viewBox: "0 0 16 16",
+      width: "100%",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3.5 3.5v3h3" })
+      ]
+    }
+  );
+}
+function FullscreenIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": true,
+      fill: "none",
+      height: "100%",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.75",
+      viewBox: "0 0 16 16",
+      width: "100%",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
+    }
+  );
+}
+function ExitFullscreenIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": true,
+      fill: "none",
+      height: "100%",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.75",
+      viewBox: "0 0 16 16",
+      width: "100%",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
+    }
+  );
+}
+function createPanoContextMenuPresets(actions) {
+  const isFullscreen = actions.isFullscreen === true;
+  const resetView = {
+    id: "pano-reset-view",
+    label: "Reset view",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResetViewIcon, {}),
+    onSelect: () => {
+      actions.reset();
+    }
+  };
+  const fullscreen = {
+    id: "pano-fullscreen",
+    label: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+    icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExitFullscreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FullscreenIcon, {}),
+    onSelect: () => {
+      actions.toggleFullscreen();
+    }
+  };
+  const separator = (id = "pano-separator") => ({
+    type: "separator",
+    id
+  });
+  return {
+    resetView,
+    fullscreen,
+    separator,
+    defaults: [resetView, separator("pano-default-separator"), fullscreen]
+  };
+}
+function createDefaultPanoContextMenuItems(actions) {
+  return createPanoContextMenuPresets(actions).defaults;
+}
+function isPresetId(value) {
+  return value === "resetView" || value === "fullscreen" || value === "separator";
+}
+function isPresetRef(value) {
+  return typeof value === "object" && value !== null && "preset" in value && isPresetId(value.preset);
+}
+function isActionEntry(value) {
+  if (typeof value === "string") {
+    return false;
+  }
+  if (isPresetRef(value)) {
+    return false;
+  }
+  return true;
+}
+function applyPresetOverrides(item, overrides) {
+  if (item.type === "separator") {
+    return {
+      ...item,
+      id: overrides.id ?? item.id,
+      className: overrides.className ?? item.className,
+      style: overrides.style ?? item.style
+    };
+  }
+  return {
+    ...item,
+    id: overrides.id ?? item.id,
+    label: overrides.label ?? item.label,
+    className: overrides.className ?? item.className,
+    style: overrides.style ?? item.style,
+    disabled: overrides.disabled ?? item.disabled,
+    hidden: overrides.hidden ?? item.hidden
+  };
+}
+function resolvePresetEntry(entry, presets) {
+  const presetId = typeof entry === "string" ? entry : entry.preset;
+  const overrides = typeof entry === "string" ? {} : entry;
+  switch (presetId) {
+    case "resetView":
+      return applyPresetOverrides(presets.resetView, overrides);
+    case "fullscreen":
+      return applyPresetOverrides(presets.fullscreen, overrides);
+    case "separator":
+      return applyPresetOverrides(
+        presets.separator(overrides.id ?? "pano-separator"),
+        overrides
+      );
+    default: {
+      const _exhaustive = presetId;
+      return _exhaustive;
+    }
+  }
+}
+function resolvePanoContextMenuEntries(entries, presets) {
+  const resolved = [];
+  for (const entry of entries) {
+    if (isActionEntry(entry)) {
+      resolved.push(entry);
+      continue;
+    }
+    resolved.push(resolvePresetEntry(entry, presets));
+  }
+  return resolved;
+}
+function composePanoContextMenuItems(props, presets) {
+  if (props.items) {
+    return resolvePanoContextMenuEntries(props.items, presets);
+  }
+  return [
+    ...resolvePanoContextMenuEntries(props.prepend ?? [], presets),
+    ...presets.defaults,
+    ...resolvePanoContextMenuEntries(props.append ?? [], presets)
+  ];
+}
+var PanoContextMenuActionsContext = (0, import_react7.createContext)(null);
+
+// src/pano-events.tsx
+var import_fiber5 = require("@react-three/fiber");
+var import_react8 = require("react");
+var DEFAULT_IDLE_TIME_MS = 2e3;
+function resolveIdleTime(value) {
+  return Number.isFinite(value) && value >= 0 ? value : DEFAULT_IDLE_TIME_MS;
+}
+function usePanoEvents({
+  idleTime = DEFAULT_IDLE_TIME_MS,
+  onViewChange,
+  onViewSettled,
+  onViewInteractionStart,
+  onViewInteractionEnd,
+  onClick,
+  onDoubleClick,
+  onPointerDown,
+  onPointerUp,
+  onPointerMove,
+  onContextMenu,
+  onWheel,
+  onIdle,
+  onIdleEnd,
+  onEnterFullscreen,
+  onExitFullscreen,
+  onResize,
+  onAutoRotateStart,
+  onAutoRotateStop,
+  onAutoRotateOneRound
+}) {
+  const eventBus = (0, import_react8.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react8.useContext)(PanoramaViewContext);
+  const { gl } = (0, import_fiber5.useThree)();
+  if (!eventBus || !controlsRef) {
+    throw new Error("usePanoEvents must be used inside <PanoView>.");
+  }
+  const callbacksRef = (0, import_react8.useRef)({
+    onViewChange,
+    onViewSettled,
+    onViewInteractionStart,
+    onViewInteractionEnd,
+    onClick,
+    onDoubleClick,
+    onPointerDown,
+    onPointerUp,
+    onPointerMove,
+    onContextMenu,
+    onWheel,
+    onIdle,
+    onIdleEnd,
+    onEnterFullscreen,
+    onExitFullscreen,
+    onResize,
+    onAutoRotateStart,
+    onAutoRotateStop,
+    onAutoRotateOneRound
+  });
+  callbacksRef.current = {
+    onViewChange,
+    onViewSettled,
+    onViewInteractionStart,
+    onViewInteractionEnd,
+    onClick,
+    onDoubleClick,
+    onPointerDown,
+    onPointerUp,
+    onPointerMove,
+    onContextMenu,
+    onWheel,
+    onIdle,
+    onIdleEnd,
+    onEnterFullscreen,
+    onExitFullscreen,
+    onResize,
+    onAutoRotateStart,
+    onAutoRotateStop,
+    onAutoRotateOneRound
+  };
+  const idleElapsedRef = (0, import_react8.useRef)(0);
+  const isIdleRef = (0, import_react8.useRef)(false);
+  const idleTimeRef = (0, import_react8.useRef)(resolveIdleTime(idleTime));
+  idleTimeRef.current = resolveIdleTime(idleTime);
+  (0, import_react8.useEffect)(() => {
+    idleElapsedRef.current = 0;
+    isIdleRef.current = false;
+  }, [idleTime]);
+  (0, import_react8.useEffect)(() => {
+    const unsubscribers = [
+      eventBus.subscribe("viewchange", (view) => {
+        callbacksRef.current.onViewChange?.(view);
+      }),
+      eventBus.subscribe("viewsettled", (view) => {
+        callbacksRef.current.onViewSettled?.(view);
+      }),
+      eventBus.subscribe("viewinteractionstart", (event) => {
+        callbacksRef.current.onViewInteractionStart?.(event);
+      }),
+      eventBus.subscribe("viewinteractionend", (event) => {
+        callbacksRef.current.onViewInteractionEnd?.(event);
+      }),
+      eventBus.subscribe("click", (event) => {
+        callbacksRef.current.onClick?.(event);
+      }),
+      eventBus.subscribe("doubleclick", (event) => {
+        callbacksRef.current.onDoubleClick?.(event);
+      }),
+      eventBus.subscribe("pointerdown", (event) => {
+        callbacksRef.current.onPointerDown?.(event);
+      }),
+      eventBus.subscribe("pointerup", (event) => {
+        callbacksRef.current.onPointerUp?.(event);
+      }),
+      eventBus.subscribe("pointermove", (event) => {
+        callbacksRef.current.onPointerMove?.(event);
+      }),
+      eventBus.subscribe("contextmenu", (event) => {
+        callbacksRef.current.onContextMenu?.(event);
+      }),
+      eventBus.subscribe("autorotatestart", () => {
+        callbacksRef.current.onAutoRotateStart?.();
+      }),
+      eventBus.subscribe("autorotatestop", () => {
+        callbacksRef.current.onAutoRotateStop?.();
+      }),
+      eventBus.subscribe("autorotateoneround", () => {
+        callbacksRef.current.onAutoRotateOneRound?.();
+      })
+    ];
+    return () => {
+      for (const unsubscribe of unsubscribers) {
+        unsubscribe();
+      }
+    };
+  }, [eventBus]);
+  (0, import_react8.useEffect)(() => {
+    const element = gl.domElement;
+    const handleWheel = (nativeEvent) => {
+      callbacksRef.current.onWheel?.({
+        delta: nativeEvent.deltaY,
+        nativeEvent
+      });
+    };
+    element.addEventListener("wheel", handleWheel, { passive: true });
+    return () => {
+      element.removeEventListener("wheel", handleWheel);
+    };
+  }, [gl]);
+  (0, import_react8.useEffect)(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const wasFullscreenRef = { current: false };
+    const isViewerFullscreen = () => {
+      const fullscreenElement = document.fullscreenElement;
+      if (!fullscreenElement) {
+        return false;
+      }
+      const canvas = gl.domElement;
+      return fullscreenElement === canvas || fullscreenElement.contains(canvas) || canvas.contains(fullscreenElement);
+    };
+    const handleFullscreenChange = () => {
+      const isOurs = isViewerFullscreen();
+      if (isOurs && !wasFullscreenRef.current) {
+        wasFullscreenRef.current = true;
+        callbacksRef.current.onEnterFullscreen?.();
+      } else if (!isOurs && wasFullscreenRef.current) {
+        wasFullscreenRef.current = false;
+        callbacksRef.current.onExitFullscreen?.();
+      }
+    };
+    wasFullscreenRef.current = isViewerFullscreen();
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, [gl]);
+  (0, import_react8.useEffect)(() => {
+    const element = gl.domElement;
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const { width, height } = entry.contentRect;
+      callbacksRef.current.onResize?.({ width, height });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [gl]);
+  (0, import_fiber5.useFrame)((_, deltaSeconds) => {
+    const interacting = controlsRef.current?.isUserInteracting() ?? false;
+    if (interacting) {
+      idleElapsedRef.current = 0;
+      if (isIdleRef.current) {
+        isIdleRef.current = false;
+        callbacksRef.current.onIdleEnd?.();
+      }
+      return;
+    }
+    idleElapsedRef.current += deltaSeconds * 1e3;
+    if (!isIdleRef.current && idleElapsedRef.current >= idleTimeRef.current) {
+      isIdleRef.current = true;
+      callbacksRef.current.onIdle?.();
+    }
+  });
+}
+function PanoEvents(props) {
+  usePanoEvents(props);
+  return null;
+}
+
+// src/panorama-event-surface.tsx
+var import_fiber6 = require("@react-three/fiber");
+var import_react9 = require("react");
+var import_three3 = require("three");
+
+// src/hotspot/coordinates.ts
+var import_three2 = require("three");
+
+// src/hotspot/types.ts
+var MAX_HOTSPOT_PITCH = 90;
+
+// src/hotspot/coordinates.ts
+var POLE_EPSILON_DEGREES = 1e-6;
+function normalizePanoYaw(yaw) {
+  if (!Number.isFinite(yaw)) {
+    return 0;
+  }
+  return import_three2.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
+}
+function clampPanoPitch(pitch) {
+  if (!Number.isFinite(pitch)) {
+    return 0;
+  }
+  const clamped = import_three2.MathUtils.clamp(
+    pitch,
+    -MAX_HOTSPOT_PITCH,
+    MAX_HOTSPOT_PITCH
+  );
+  return Math.abs(clamped) >= MAX_HOTSPOT_PITCH - POLE_EPSILON_DEGREES ? Math.sign(clamped) * MAX_HOTSPOT_PITCH : clamped;
+}
+function normalizePanoPosition(position) {
+  const pitch = clampPanoPitch(position.pitch);
+  return {
+    yaw: Math.abs(pitch) === MAX_HOTSPOT_PITCH ? 0 : normalizePanoYaw(position.yaw),
+    pitch
+  };
+}
+function panoPositionToVector3(position, radius = 1) {
+  const normalized = normalizePanoPosition(position);
+  const safeRadius = Number.isFinite(radius) ? Math.max(0, radius) : 1;
+  const yaw = import_three2.MathUtils.degToRad(normalized.yaw);
+  const pitch = import_three2.MathUtils.degToRad(normalized.pitch);
+  const cosPitch = Math.cos(pitch);
+  return new import_three2.Vector3(
+    cosPitch * Math.sin(yaw) * safeRadius,
+    Math.sin(pitch) * safeRadius,
+    -cosPitch * Math.cos(yaw) * safeRadius
+  );
+}
+function vector3ToPanoPosition(vector) {
+  const length = Math.hypot(vector.x, vector.y, vector.z);
+  if (!Number.isFinite(length) || length === 0) {
+    return { yaw: 0, pitch: 0 };
+  }
+  return normalizePanoPosition({
+    yaw: import_three2.MathUtils.radToDeg(Math.atan2(vector.x, -vector.z)),
+    pitch: import_three2.MathUtils.radToDeg(
+      Math.asin(import_three2.MathUtils.clamp(vector.y / length, -1, 1))
+    )
+  });
+}
+
+// src/panorama-radius.ts
+var DEFAULT_PANORAMA_RADIUS = 1e3;
+var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
+var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
+
+// src/panorama-event-surface.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
+function makePanoramaPointerEvent(event) {
+  const nativeEvent = event.nativeEvent;
+  return {
+    position: vector3ToPanoPosition(event.ray.direction),
+    nativeEvent,
+    pointerId: "pointerId" in nativeEvent ? nativeEvent.pointerId : void 0,
+    button: nativeEvent.button,
+    buttons: nativeEvent.buttons,
+    clientX: nativeEvent.clientX,
+    clientY: nativeEvent.clientY
+  };
+}
+function PanoramaEventSurface() {
+  const eventBus = (0, import_react9.useContext)(PanoEventBusContext);
+  const { camera, gl } = (0, import_fiber6.useThree)();
+  (0, import_react9.useEffect)(() => {
+    if (!eventBus) {
+      return;
+    }
+    const element = gl.domElement;
+    const ndc = new import_three3.Vector2();
+    const raycaster = new import_three3.Raycaster();
+    const direction = new import_three3.Vector3();
+    const handleContextMenu = (nativeEvent) => {
+      const rect = element.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) {
+        return;
+      }
+      ndc.set(
+        (nativeEvent.clientX - rect.left) / rect.width * 2 - 1,
+        -((nativeEvent.clientY - rect.top) / rect.height) * 2 + 1
+      );
+      raycaster.setFromCamera(ndc, camera);
+      direction.copy(raycaster.ray.direction);
+      eventBus.emit("contextmenu", {
+        position: vector3ToPanoPosition(direction),
+        nativeEvent,
+        pointerId: "pointerId" in nativeEvent ? nativeEvent.pointerId : void 0,
+        button: nativeEvent.button,
+        buttons: nativeEvent.buttons,
+        clientX: nativeEvent.clientX,
+        clientY: nativeEvent.clientY
+      });
+    };
+    element.addEventListener("contextmenu", handleContextMenu);
+    return () => {
+      element.removeEventListener("contextmenu", handleContextMenu);
+    };
+  }, [camera, eventBus, gl]);
+  if (!eventBus) {
+    return null;
+  }
+  const emit = (type, event) => {
+    event.stopPropagation();
+    eventBus.emit(type, makePanoramaPointerEvent(event));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "mesh",
+    {
+      renderOrder: -200,
+      onClick: (event) => emit("click", event),
+      onDoubleClick: (event) => emit("doubleclick", event),
+      onPointerDown: (event) => emit("pointerdown", event),
+      onPointerUp: (event) => emit("pointerup", event),
+      onPointerMove: (event) => emit("pointermove", event),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "meshBasicMaterial",
+          {
+            colorWrite: false,
+            depthTest: false,
+            depthWrite: false,
+            opacity: 0,
             side: import_three3.BackSide,
             transparent: true
           }
-        )
-      ]
-    }
-  );
+        )
+      ]
+    }
+  );
+}
+
+// src/touch-controls.tsx
+var import_fiber7 = require("@react-three/fiber");
+var import_react10 = require("react");
+var DEFAULT_ROTATE_SPEED3 = 0.35;
+function resolveSpeed3(value, fallback) {
+  return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+function pointerDistance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function TouchControls({
+  enabled = true,
+  rotateSpeed = DEFAULT_ROTATE_SPEED3,
+  invert = false,
+  pinchZoom = true
+}) {
+  const controlsRef = (0, import_react10.useContext)(PanoramaViewContext);
+  const { gl } = (0, import_fiber7.useThree)();
+  const pointersRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = (0, import_react10.useRef)(null);
+  const optionsRef = (0, import_react10.useRef)({ rotateSpeed, invert, pinchZoom });
+  if (!controlsRef) {
+    throw new Error("<TouchControls> must be rendered inside <PanoView>.");
+  }
+  optionsRef.current = { rotateSpeed, invert, pinchZoom };
+  (0, import_react10.useEffect)(() => {
+    const element = gl.domElement;
+    const clearPointers = () => {
+      for (const pointerId of pointersRef.current.keys()) {
+        if (element.hasPointerCapture?.(pointerId)) {
+          element.releasePointerCapture?.(pointerId);
+        }
+      }
+      pointersRef.current.clear();
+      pinchDistanceRef.current = null;
+      controlsRef.current?.setPointerActive("touch", false);
+    };
+    if (!enabled) {
+      clearPointers();
+      return;
+    }
+    const syncActive = () => {
+      controlsRef.current?.setPointerActive(
+        "touch",
+        pointersRef.current.size > 0
+      );
+    };
+    const onPointerDown = (event) => {
+      if (event.pointerType !== "touch") {
+        return;
+      }
+      if (controlsRef.current?.isInteractionLocked()) {
+        return;
+      }
+      event.preventDefault();
+      pointersRef.current.set(event.pointerId, {
+        x: event.clientX,
+        y: event.clientY,
+        at: performance.now()
+      });
+      element.setPointerCapture?.(event.pointerId);
+      syncActive();
+      if (pointersRef.current.size === 2) {
+        const [first, second] = Array.from(pointersRef.current.values());
+        pinchDistanceRef.current = pointerDistance(first, second);
+      }
+    };
+    const onPointerMove = (event) => {
+      if (event.pointerType !== "touch") {
+        return;
+      }
+      if (controlsRef.current?.isInteractionLocked()) {
+        return;
+      }
+      const previous = pointersRef.current.get(event.pointerId);
+      if (!previous) {
+        return;
+      }
+      event.preventDefault();
+      const next = {
+        x: event.clientX,
+        y: event.clientY,
+        at: performance.now()
+      };
+      pointersRef.current.set(event.pointerId, next);
+      const pointers = Array.from(pointersRef.current.values());
+      if (pointers.length >= 2) {
+        if (!optionsRef.current.pinchZoom) {
+          return;
+        }
+        const distance = pointerDistance(pointers[0], pointers[1]);
+        const previousDistance = pinchDistanceRef.current;
+        pinchDistanceRef.current = distance;
+        if (previousDistance && distance > 0) {
+          const view = controlsRef.current?.getTargetView();
+          if (view) {
+            const nextFov = view.fov * (previousDistance / distance);
+            controlsRef.current?.applyViewDelta(
+              { fov: nextFov - view.fov },
+              { recordVelocity: true }
+            );
+          }
+        }
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      const speed = resolveSpeed3(
+        optionsRef.current.rotateSpeed,
+        DEFAULT_ROTATE_SPEED3
+      );
+      const sign = optionsRef.current.invert ? -1 : 1;
+      const deltaYaw = sign * -(next.x - previous.x) * 360 * speed / Math.max(rect.width, 1);
+      const deltaPitch = sign * (next.y - previous.y) * 180 * speed / Math.max(rect.height, 1);
+      controlsRef.current?.applyViewDelta(
+        { yaw: deltaYaw, pitch: deltaPitch },
+        { recordVelocity: true }
+      );
+    };
+    const releasePointer = (event) => {
+      if (!pointersRef.current.has(event.pointerId)) {
+        return;
+      }
+      pointersRef.current.delete(event.pointerId);
+      if (element.hasPointerCapture?.(event.pointerId)) {
+        element.releasePointerCapture?.(event.pointerId);
+      }
+      if (pointersRef.current.size < 2) {
+        pinchDistanceRef.current = null;
+      }
+      syncActive();
+    };
+    element.addEventListener("pointerdown", onPointerDown);
+    element.addEventListener("pointermove", onPointerMove);
+    element.addEventListener("pointerup", releasePointer);
+    element.addEventListener("pointercancel", releasePointer);
+    return () => {
+      element.removeEventListener("pointerdown", onPointerDown);
+      element.removeEventListener("pointermove", onPointerMove);
+      element.removeEventListener("pointerup", releasePointer);
+      element.removeEventListener("pointercancel", releasePointer);
+      clearPointers();
+    };
+  }, [controlsRef, enabled, gl]);
+  return null;
 }
 
 // src/pano-view.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
   fov: 75
 };
+var DEFAULT_POINTER_ROTATE_SPEED = 0.35;
+var DEFAULT_MOUSE_ZOOM_SPEED = 0.08;
 var DEFAULT_CANVAS_STYLE = {
   display: "block",
   height: "100%",
   width: "100%"
 };
-var PanoView = (0, import_react4.forwardRef)(
+function resolveChannel(value, defaults) {
+  if (value === false) {
+    return { mount: false };
+  }
+  if (value === true || value === void 0) {
+    return { mount: true, props: { ...defaults } };
+  }
+  return {
+    mount: true,
+    props: {
+      ...defaults,
+      ...value,
+      enabled: value.enabled !== false
+    }
+  };
+}
+function resolveContextMenuChannel(value) {
+  if (value === false) {
+    return { mount: false };
+  }
+  if (value === true || value === void 0) {
+    return { mount: true, props: {} };
+  }
+  return { mount: true, props: { ...value } };
+}
+var PanoView = (0, import_react11.forwardRef)(
   function PanoView2({
     children,
     initialView,
     minFov = 30,
     maxFov = 100,
     controls = true,
+    contextMenu = true,
     onViewChange,
     onPanoramaClick,
     onPanoramaDoubleClick,
@@ -712,19 +2260,21 @@ var PanoView = (0, import_react4.forwardRef)(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = (0, import_react4.useRef)(null);
-    const controlsRef = (0, import_react4.useRef)(null);
+    const rootRef = (0, import_react11.useRef)(null);
+    const controlsRef = (0, import_react11.useRef)(null);
+    const eventBus = (0, import_react11.useMemo)(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
-    const fallbackViewRef = (0, import_react4.useRef)(DEFAULT_VIEW);
+    const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
+    const fallbackViewRef = (0, import_react11.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_react4.useMemo)(
+    const normalizedInitialView = (0, import_react11.useMemo)(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
-        pitch: initialView?.pitch ?? DEFAULT_VIEW.pitch,
+        pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
         fov: Math.max(
           normalizedMinFov,
           Math.min(initialView?.fov ?? DEFAULT_VIEW.fov, normalizedMaxFov)
@@ -740,18 +2290,101 @@ var PanoView = (0, import_react4.forwardRef)(
     );
     fallbackViewRef.current = normalizedInitialView;
     const controlsEnabled = controls !== false;
-    const controlOptions = (0, import_react4.useMemo)(
+    const controlOptions = (0, import_react11.useMemo)(
       () => typeof controls === "object" ? controls : {},
       [controls]
     );
+    const userControlsEnabled = controlsEnabled && controlOptions.enabled !== false;
+    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_react11.useMemo)(
+      () => resolveChannel(controlOptions.mouse, {
+        enabled: true,
+        rotateSpeed: topRotateSpeed,
+        zoomSpeed: topZoomSpeed,
+        wheel: true,
+        invert: allModeInvert,
+        buttons: ["left"]
+      }),
+      [
+        allModeInvert,
+        controlOptions.mouse,
+        topRotateSpeed,
+        topZoomSpeed
+      ]
+    );
+    const touchChannel = (0, import_react11.useMemo)(
+      () => resolveChannel(controlOptions.touch, {
+        enabled: true,
+        rotateSpeed: topRotateSpeed,
+        invert: allModeInvert,
+        pinchZoom: true
+      }),
+      [allModeInvert, controlOptions.touch, topRotateSpeed]
+    );
+    const keyboardChannel = (0, import_react11.useMemo)(
+      () => resolveChannel(controlOptions.keyboard, {
+        enabled: true
+      }),
+      [controlOptions.keyboard]
+    );
+    const toggleFullscreen = (0, import_react11.useCallback)(async () => {
+      if (typeof document === "undefined") {
+        return;
+      }
+      if (document.fullscreenElement) {
+        await document.exitFullscreen?.();
+        return;
+      }
+      await rootRef.current?.requestFullscreen?.();
+    }, []);
+    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react11.useState)(false);
+    (0, import_react11.useEffect)(() => {
+      if (typeof document === "undefined") {
+        return;
+      }
+      const syncFullscreen = () => {
+        const fullscreenElement = document.fullscreenElement;
+        const root = rootRef.current;
+        if (!fullscreenElement || !root) {
+          setIsViewerFullscreen(false);
+          return;
+        }
+        setIsViewerFullscreen(
+          fullscreenElement === root || fullscreenElement.contains(root) || root.contains(fullscreenElement)
+        );
+      };
+      syncFullscreen();
+      document.addEventListener("fullscreenchange", syncFullscreen);
+      return () => {
+        document.removeEventListener("fullscreenchange", syncFullscreen);
+      };
+    }, []);
+    const contextMenuActions = (0, import_react11.useMemo)(
+      () => ({
+        reset: () => {
+          controlsRef.current?.reset();
+        },
+        toggleFullscreen: () => {
+          void toggleFullscreen();
+        },
+        isFullscreen: isViewerFullscreen
+      }),
+      [isViewerFullscreen, toggleFullscreen]
+    );
+    const contextMenuChannel = (0, import_react11.useMemo)(
+      () => resolveContextMenuChannel(contextMenu),
+      [contextMenu]
+    );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react4.useState)(
+    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react11.useState)(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    (0, import_react4.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
-    (0, import_react4.useImperativeHandle)(
+    (0, import_react11.useImperativeHandle)(
       ref,
       () => ({
         getView: () => controlsRef.current?.getView() ?? { ...fallbackViewRef.current },
@@ -767,20 +2400,11 @@ var PanoView = (0, import_react4.forwardRef)(
         stopAutoRotate: () => {
           setLegacyAutoRotate(false);
         },
-        toggleFullscreen: async () => {
-          if (typeof document === "undefined") {
-            return;
-          }
-          if (document.fullscreenElement) {
-            await document.exitFullscreen?.();
-            return;
-          }
-          await rootRef.current?.requestFullscreen?.();
-        }
+        toggleFullscreen
       }),
-      []
+      [toggleFullscreen]
     );
-    const rootStyle = (0, import_react4.useMemo)(
+    const rootStyle = (0, import_react11.useMemo)(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -788,7 +2412,7 @@ var PanoView = (0, import_react4.forwardRef)(
       }),
       [style]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
         ...divProps,
@@ -796,8 +2420,8 @@ var PanoView = (0, import_react4.forwardRef)(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_fiber3.Canvas,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_fiber8.Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
               camera: {
@@ -816,41 +2440,71 @@ var PanoView = (0, import_react4.forwardRef)(
               },
               style: {
                 ...DEFAULT_CANVAS_STYLE,
-                touchAction: controlsEnabled ? "none" : "auto"
+                touchAction: userControlsEnabled ? "none" : "auto"
               },
-              tabIndex: controlsEnabled ? 0 : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PanoramaControlsContext.Provider, { value: controlsRef, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  PanoramaControls,
-                  {
-                    ref: controlsRef,
-                    enabled: controlsEnabled,
-                    initialView: normalizedInitialView,
-                    maxFov: normalizedMaxFov,
-                    minFov: normalizedMinFov,
-                    onViewChange,
-                    options: controlOptions
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  AutoRotate,
-                  {
-                    enabled: legacyAutoRotate,
-                    speed: legacyAutoRotateOptions.autoRotateSpeed
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  PanoramaEventSurface,
-                  {
-                    onClick: onPanoramaClick,
-                    onDoubleClick: onPanoramaDoubleClick,
-                    onPointerMove: onPanoramaPointerMove
-                  }
-                ),
-                children
-              ] }) })
+              tabIndex: userControlsEnabled ? 0 : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                PanoContextMenuOverlayContext.Provider,
+                {
+                  value: contextMenuOverlayApi,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    PanoContextMenuActionsContext.Provider,
+                    {
+                      value: contextMenuActions,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          PanoramaViewRuntime,
+                          {
+                            ref: controlsRef,
+                            eventBus,
+                            initialView: normalizedInitialView,
+                            maxFov: normalizedMaxFov,
+                            minFov: normalizedMinFov,
+                            options: controlOptions
+                          }
+                        ),
+                        (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          PanoEvents,
+                          {
+                            onViewChange,
+                            onClick: onPanoramaClick,
+                            onDoubleClick: onPanoramaDoubleClick,
+                            onPointerMove: onPanoramaPointerMove
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          AutoRotate,
+                          {
+                            enabled: legacyAutoRotate,
+                            speed: legacyAutoRotateOptions.autoRotateSpeed
+                          }
+                        ),
+                        userControlsEnabled && mouseChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          MouseControls,
+                          {
+                            ...mouseChannel.props,
+                            fovSpeed: controlOptions.fovSpeed
+                          }
+                        ) : null,
+                        userControlsEnabled && touchChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TouchControls, { ...touchChannel.props }) : null,
+                        userControlsEnabled && keyboardChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          KeyboardControls,
+                          {
+                            ...keyboardChannel.props,
+                            fovSpeed: keyboardChannel.props.fovSpeed ?? controlOptions.fovSpeed
+                          }
+                        ) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoramaEventSurface, {}),
+                        contextMenuChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                        children
+                      ]
+                    }
+                  )
+                }
+              ) }) }) })
             }
           ),
+          contextMenuOverlay,
           hotspotAccessibilityControls
         ]
       }
@@ -859,10 +2513,10 @@ var PanoView = (0, import_react4.forwardRef)(
 );
 
 // src/sphere.tsx
-var import_fiber4 = require("@react-three/fiber");
-var import_react5 = require("react");
+var import_fiber9 = require("@react-three/fiber");
+var import_react12 = require("react");
 var import_three4 = require("three");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Sphere({
   src,
   yawOffset = 0,
@@ -870,13 +2524,13 @@ function Sphere({
   onError,
   visible = true
 }) {
-  const gl = (0, import_fiber4.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react5.useState)(null);
-  const onLoadRef = (0, import_react5.useRef)(onLoad);
-  const onErrorRef = (0, import_react5.useRef)(onError);
+  const gl = (0, import_fiber9.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react12.useState)(null);
+  const onLoadRef = (0, import_react12.useRef)(onLoad);
+  const onErrorRef = (0, import_react12.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let active = true;
     const loader = new import_three4.TextureLoader();
     setTexture(null);
@@ -910,7 +2564,7 @@ function Sphere({
       active = false;
     };
   }, [gl, src]);
-  (0, import_react5.useEffect)(
+  (0, import_react12.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -919,14 +2573,14 @@ function Sphere({
   if (!texture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "mesh",
     {
       rotation: [0, import_three4.MathUtils.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "meshBasicMaterial",
           {
             map: texture,
@@ -940,13 +2594,13 @@ function Sphere({
 }
 
 // src/panorama-scenes.tsx
-var import_fiber7 = require("@react-three/fiber");
-var import_react8 = require("react");
+var import_fiber12 = require("@react-three/fiber");
+var import_react15 = require("react");
 var import_three8 = require("three");
 
 // src/tile/texture-manager-context.tsx
-var import_fiber5 = require("@react-three/fiber");
-var import_react6 = require("react");
+var import_fiber10 = require("@react-three/fiber");
+var import_react13 = require("react");
 
 // src/tile/texture-manager.ts
 var import_three5 = require("three");
@@ -1170,8 +2824,8 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react6.createContext)(
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TileTextureManagerContext = (0, import_react13.createContext)(
   null
 );
 function TileTextureManagerProvider({
@@ -1179,9 +2833,9 @@ function TileTextureManagerProvider({
   maxTextureMemoryMb = 128,
   maxConcurrentLoads = 4
 }) {
-  const gl = (0, import_fiber5.useThree)((state) => state.gl);
+  const gl = (0, import_fiber10.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react6.useMemo)(
+  const manager = (0, import_react13.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -1190,19 +2844,19 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return (0, import_react6.useContext)(TileTextureManagerContext);
+  return (0, import_react13.useContext)(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
-var import_fiber6 = require("@react-three/fiber");
-var import_react7 = require("react");
+var import_fiber11 = require("@react-three/fiber");
+var import_react14 = require("react");
 var import_three7 = require("three");
 
 // src/tile/face-layout.ts
@@ -1383,7 +3037,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
@@ -1392,10 +3046,10 @@ var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
 var SHARED_TILE_GEOMETRY = new import_three7.PlaneGeometry(1, 1);
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = (0, import_react7.useState)(null);
-  const onErrorRef = (0, import_react7.useRef)(onError);
+  const [texture, setTexture] = (0, import_react14.useState)(null);
+  const onErrorRef = (0, import_react14.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -1432,7 +3086,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react7.useEffect)(
+  (0, import_react14.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -1445,7 +3099,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react7.useMemo)(() => {
+  const geometry = (0, import_react14.useMemo)(() => {
     const nextGeometry = new import_three7.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -1463,21 +3117,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  (0, import_react7.useEffect)(
+  (0, import_react14.useEffect)(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "meshBasicMaterial",
         {
           depthTest: false,
@@ -1493,7 +3147,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     PreviewFace,
     {
       face,
@@ -1504,14 +3158,14 @@ function PreviewCube({
   ));
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react7.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react14.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_react7.useEffect)(
+  (0, import_react14.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -1524,7 +3178,7 @@ function useManagedTexture(manager, key, url, address) {
   );
   return snapshot;
 }
-var TileMesh = (0, import_react7.memo)(function TileMesh2({
+var TileMesh = (0, import_react14.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -1538,14 +3192,14 @@ var TileMesh = (0, import_react7.memo)(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "meshBasicMaterial",
         {
           depthTest: false,
@@ -1557,12 +3211,12 @@ var TileMesh = (0, import_react7.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react7.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react14.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     TileMesh,
     {
       address,
@@ -1730,11 +3384,11 @@ function Tile({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = (0, import_fiber6.useThree)();
-  const multiresConfig = (0, import_react7.useMemo)(() => parseMultires(multires), [multires]);
+  const { camera, gl, size } = (0, import_fiber11.useThree)();
+  const multiresConfig = (0, import_react14.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react7.useMemo)(
+  const candidatesByLevel = (0, import_react14.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -1746,13 +3400,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react7.useRef)(onLoadProgress);
-  const errorRef = (0, import_react7.useRef)(onTileError);
-  const levelChangeRef = (0, import_react7.useRef)(onLevelChange);
+  const progressRef = (0, import_react14.useRef)(onLoadProgress);
+  const errorRef = (0, import_react14.useRef)(onTileError);
+  const levelChangeRef = (0, import_react14.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react7.useMemo)(
+  const ownedManager = (0, import_react14.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -1773,7 +3427,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -1783,11 +3437,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react7.useRef)(false);
-  (0, import_react7.useEffect)(() => {
+  const readyRef = (0, import_react14.useRef)(false);
+  (0, import_react14.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -1795,31 +3449,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react7.useMemo)(
+  const resolveUrl = (0, import_react14.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = (0, import_react7.useState)([]);
-  const layerTokenRef = (0, import_react7.useRef)("");
-  const currentLevelRef = (0, import_react7.useRef)(1);
-  const lastUpdateAtRef = (0, import_react7.useRef)(-Infinity);
-  const visibilityDirtyRef = (0, import_react7.useRef)(true);
-  const lastVisibilityQuaternionRef = (0, import_react7.useRef)(camera.quaternion.clone());
-  const lastVisibilityFovRef = (0, import_react7.useRef)(Number.NaN);
-  const lastViewportRef = (0, import_react7.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react7.useRef)(new import_three7.Frustum());
-  const projectionMatrixRef = (0, import_react7.useRef)(new import_three7.Matrix4());
-  const visibilityCameraRef = (0, import_react7.useRef)(new import_three7.PerspectiveCamera());
-  (0, import_react7.useEffect)(() => {
+  const [layers, setLayers] = (0, import_react14.useState)([]);
+  const layerTokenRef = (0, import_react14.useRef)("");
+  const currentLevelRef = (0, import_react14.useRef)(1);
+  const lastUpdateAtRef = (0, import_react14.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react14.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react14.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react14.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react14.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react14.useRef)(new import_three7.Frustum());
+  const projectionMatrixRef = (0, import_react14.useRef)(new import_three7.Matrix4());
+  const visibilityCameraRef = (0, import_react14.useRef)(new import_three7.PerspectiveCamera());
+  (0, import_react14.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -1833,7 +3487,7 @@ function Tile({
       setLayers(nextLayers);
     }
   };
-  (0, import_fiber6.useFrame)(() => {
+  (0, import_fiber11.useFrame)(() => {
     if (loadMode === "preview") {
       return;
     }
@@ -1899,15 +3553,15 @@ function Tile({
     };
     commitLayers(nextLayers);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       TileLayerMeshes,
       {
         layer,
@@ -1920,7 +3574,7 @@ function Tile({
 }
 
 // src/panorama-scenes.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var TRANSITION_DEFAULTS = {
   none: { duration: 0, krpanoBlend: "NOBLEND" },
   crossfade: { duration: 1, krpanoBlend: "BLEND(1.0, easeInCubic)" },
@@ -1970,7 +3624,7 @@ function SceneSource({
     return null;
   }
   if (scene.type === "sphere") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Sphere,
       {
         src: scene.src,
@@ -1982,7 +3636,7 @@ function SceneSource({
     );
   }
   const { id: _id, type: _type, ...tileProps } = scene;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Tile,
     {
       ...tileProps,
@@ -1998,17 +3652,17 @@ function SnapshotCapture({
   maxPixels,
   onCaptured
 }) {
-  const { camera, gl, scene, size } = (0, import_fiber7.useThree)();
-  const capturedRequestRef = (0, import_react8.useRef)(0);
-  const renderTargetRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(
+  const { camera, gl, scene, size } = (0, import_fiber12.useThree)();
+  const capturedRequestRef = (0, import_react15.useRef)(0);
+  const renderTargetRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
     },
     []
   );
-  (0, import_fiber7.useFrame)(() => {
+  (0, import_fiber12.useFrame)(() => {
     if (requestId === 0 || requestId === capturedRequestRef.current) {
       return;
     }
@@ -2054,12 +3708,12 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, size } = (0, import_fiber7.useThree)();
-  const meshRef = (0, import_react8.useRef)(null);
-  const startRef = (0, import_react8.useRef)(null);
-  const finishedRef = (0, import_react8.useRef)(false);
-  const directionRef = (0, import_react8.useRef)(new import_three8.Vector3());
-  const material = (0, import_react8.useMemo)(
+  const { camera, size } = (0, import_fiber12.useThree)();
+  const meshRef = (0, import_react15.useRef)(null);
+  const startRef = (0, import_react15.useRef)(null);
+  const finishedRef = (0, import_react15.useRef)(false);
+  const directionRef = (0, import_react15.useRef)(new import_three8.Vector3());
+  const material = (0, import_react15.useMemo)(
     () => new import_three8.ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -2138,13 +3792,13 @@ function SnapshotOverlay({
     }),
     [snapshot.texture, transition.preset]
   );
-  (0, import_react8.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react15.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react15.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
   }, [material, runId]);
-  (0, import_fiber7.useFrame)((state) => {
+  (0, import_fiber12.useFrame)((state) => {
     const mesh = meshRef.current;
     if (!mesh || !camera.isPerspectiveCamera) {
       return;
@@ -2169,9 +3823,9 @@ function SnapshotOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("mesh", { ref: meshRef, renderOrder: 1e4, frustumCulled: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("mesh", { ref: meshRef, renderOrder: 1e4, frustumCulled: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("primitive", { attach: "material", object: material })
   ] });
 }
 var FULLSCREEN_PLANE = new import_three8.PlaneGeometry(1, 1);
@@ -2184,47 +3838,47 @@ function PanoramaScenesController({
   onTransitionError,
   snapshotMaxPixels = 3686400
 }) {
-  const controlsRef = (0, import_react8.useContext)(PanoramaControlsContext);
+  const controlsRef = (0, import_react15.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react8.useMemo)(
+  const transition = (0, import_react15.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react8.useMemo)(
+  const sceneMap = (0, import_react15.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react8.useState)([
+  const [slots, setSlots] = (0, import_react15.useState)([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = (0, import_react8.useState)(0);
-  const [liveSlot, setLiveSlot] = (0, import_react8.useState)(0);
-  const [pendingSlot, setPendingSlot] = (0, import_react8.useState)(null);
-  const [phase, setPhase] = (0, import_react8.useState)(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = (0, import_react8.useState)(0);
-  const [transitionRunId, setTransitionRunId] = (0, import_react8.useState)(0);
-  const [snapshot, setSnapshot] = (0, import_react8.useState)(null);
-  const [recoveryKey, setRecoveryKey] = (0, import_react8.useState)(0);
-  const requestedSceneIdRef = (0, import_react8.useRef)(activeSceneId);
-  const captureReasonRef = (0, import_react8.useRef)("start");
-  const interactionReleaseRef = (0, import_react8.useRef)(null);
-  const slotsRef = (0, import_react8.useRef)(slots);
-  const phaseRef = (0, import_react8.useRef)(phase);
-  const liveSlotRef = (0, import_react8.useRef)(liveSlot);
-  const transitionFromRef = (0, import_react8.useRef)(initialScene);
+  const [activeSlot, setActiveSlot] = (0, import_react15.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react15.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react15.useState)(null);
+  const [phase, setPhase] = (0, import_react15.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react15.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react15.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react15.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react15.useState)(0);
+  const requestedSceneIdRef = (0, import_react15.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react15.useRef)("start");
+  const interactionReleaseRef = (0, import_react15.useRef)(null);
+  const slotsRef = (0, import_react15.useRef)(slots);
+  const phaseRef = (0, import_react15.useRef)(phase);
+  const liveSlotRef = (0, import_react15.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react15.useRef)(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = (0, import_react8.useCallback)(() => {
+  const releaseInteraction = (0, import_react15.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react8.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react15.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = (0, import_react8.useCallback)((scene) => {
+  const startPreload = (0, import_react15.useCallback)((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -2235,7 +3889,7 @@ function PanoramaScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -2259,7 +3913,7 @@ function PanoramaScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = (0, import_react8.useCallback)((slot) => {
+  const handleReady = (0, import_react15.useCallback)((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -2290,7 +3944,7 @@ function PanoramaScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = (0, import_react8.useCallback)((nextSnapshot) => {
+  const handleCaptured = (0, import_react15.useCallback)((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -2312,7 +3966,7 @@ function PanoramaScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = (0, import_react8.useCallback)(() => {
+  const finishTransition = (0, import_react15.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -2337,12 +3991,12 @@ function PanoramaScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  (0, import_react8.useEffect)(() => () => {
+  (0, import_react15.useEffect)(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
-  const { gl } = (0, import_fiber7.useThree)();
-  (0, import_react8.useEffect)(() => {
+  const { gl } = (0, import_fiber12.useThree)();
+  (0, import_react15.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -2366,8 +4020,8 @@ function PanoramaScenesController({
   }, [gl, manager, releaseInteraction, snapshot]);
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -2379,7 +4033,7 @@ function PanoramaScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SceneSource,
         {
           scene: source,
@@ -2395,7 +4049,7 @@ function PanoramaScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       SnapshotOverlay,
       {
         snapshot,
@@ -2413,26 +4067,26 @@ function PanoramaScenes({
   maxConcurrentTileLoads,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PanoramaScenesController, { ...props })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PanoramaScenesController, { ...props })
     }
   );
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_fiber9 = require("@react-three/fiber");
-var import_react10 = require("react");
+var import_fiber14 = require("@react-three/fiber");
+var import_react17 = require("react");
 var import_three10 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
-var import_fiber8 = require("@react-three/fiber");
-var import_react9 = require("react");
+var import_fiber13 = require("@react-three/fiber");
+var import_react16 = require("react");
 var import_three9 = require("three");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -2449,6 +4103,9 @@ function angularSizeToWorldSize(size, radius) {
   const safeSize = Number.isFinite(size) ? import_three9.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
   return 2 * radius * Math.tan(import_three9.MathUtils.degToRad(safeSize) / 2);
 }
+function resolveScale(scale) {
+  return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
 function resolveDistance(placement, distance, width, height) {
   const maximumDistance = maximumHotspotDistance(width, height);
   if (placement === "surface") {
@@ -2513,6 +4170,7 @@ function HotspotAnchor({
   position,
   width,
   height,
+  scale = 1,
   useAngularScale = true,
   focusContent,
   mode = "billboard",
@@ -2534,25 +4192,33 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react9.useContext)(PanoramaControlsContext);
-  const groupRef = (0, import_react9.useRef)(null);
-  const dragStateRef = (0, import_react9.useRef)(null);
-  const suppressNextClickRef = (0, import_react9.useRef)(false);
+  const controlsRef = (0, import_react16.useContext)(PanoramaViewContext);
+  const groupRef = (0, import_react16.useRef)(null);
+  const dragStateRef = (0, import_react16.useRef)(null);
+  const suppressNextClickRef = (0, import_react16.useRef)(false);
   const normalizedPosition = normalizePanoPosition(position);
   const rendering = internalOrientation && internalPlacement ? { orientation: internalOrientation, placement: internalPlacement } : HOTSPOT_MODE_RENDERING[mode];
   const { orientation: orientation2, placement } = rendering;
-  const resolvedDistance = resolveDistance(placement, distance, width, height);
-  const worldPosition = (0, import_react9.useMemo)(
+  const resolvedScale = resolveScale(scale);
+  const scaledWidth = width * resolvedScale;
+  const scaledHeight = height * resolvedScale;
+  const resolvedDistance = resolveDistance(
+    placement,
+    distance,
+    scaledWidth,
+    scaledHeight
+  );
+  const worldPosition = (0, import_react16.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react9.useMemo)(
+  const surfaceQuaternion3 = (0, import_react16.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
-  const worldWidth = angularSizeToWorldSize(width, resolvedDistance);
-  const worldHeight = angularSizeToWorldSize(height, resolvedDistance);
-  const focusGeometry = (0, import_react9.useMemo)(() => {
+  const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
+  const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
+  const focusGeometry = (0, import_react16.useMemo)(() => {
     const planeGeometry = new import_three9.PlaneGeometry(1, 1);
     const geometry = new import_three9.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -2570,15 +4236,15 @@ function HotspotAnchor({
       });
     } : void 0
   });
-  (0, import_react9.useEffect)(
+  (0, import_react16.useEffect)(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  (0, import_react9.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_fiber8.useFrame)(({ camera }) => {
+  (0, import_react16.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_fiber13.useFrame)(({ camera }) => {
     if (!groupRef.current) {
       return;
     }
@@ -2589,7 +4255,7 @@ function HotspotAnchor({
     }
     groupRef.current.rotateOnAxis(
       LOCAL_FORWARD,
-      import_three9.MathUtils.degToRad(rotation)
+      import_three9.MathUtils.degToRad(-rotation)
     );
     const scaleFactor = scaleMode === "fixed" && camera instanceof import_three9.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
     groupRef.current.scale.set(
@@ -2624,7 +4290,7 @@ function HotspotAnchor({
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "group",
     {
       ref: groupRef,
@@ -2694,14 +4360,14 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: interactive ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children
@@ -2711,7 +4377,7 @@ function HotspotAnchor({
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function clampOpacity(opacity) {
   if (!Number.isFinite(opacity)) {
     return 1;
@@ -2719,13 +4385,13 @@ function clampOpacity(opacity) {
   return Math.max(0, Math.min(opacity, 1));
 }
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = (0, import_fiber9.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react10.useState)(null);
-  const onLoadRef = (0, import_react10.useRef)(onLoad);
-  const onErrorRef = (0, import_react10.useRef)(onError);
+  const gl = (0, import_fiber14.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react17.useState)(null);
+  const onLoadRef = (0, import_react17.useRef)(onLoad);
+  const onErrorRef = (0, import_react17.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -2763,7 +4429,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react10.useEffect)(
+  (0, import_react17.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -2781,9 +4447,9 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("mesh", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "meshBasicMaterial",
       {
         map: texture,
@@ -2797,13 +4463,13 @@ function ImageHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_fiber10 = require("@react-three/fiber");
-var import_react11 = require("react");
+var import_fiber15 = require("@react-three/fiber");
+var import_react18 = require("react");
 var import_three11 = require("three");
 var import_Line2 = require("three/addons/lines/Line2.js");
 var import_LineGeometry = require("three/addons/lines/LineGeometry.js");
 var import_LineMaterial = require("three/addons/lines/LineMaterial.js");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -3076,38 +4742,38 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const gl = (0, import_fiber10.useThree)((state) => state.gl);
-  const size = (0, import_fiber10.useThree)((state) => state.size);
-  const issues = (0, import_react11.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const gl = (0, import_fiber15.useThree)((state) => state.gl);
+  const size = (0, import_fiber15.useThree)((state) => state.size);
+  const issues = (0, import_react18.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react11.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react11.useMemo)(
+  const center = (0, import_react18.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react18.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePositions = (0, import_react11.useMemo)(
+  const strokePositions = (0, import_react18.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
   const devicePixelRatio = gl.getPixelRatio();
-  const strokeLine = (0, import_react11.useMemo)(
+  const strokeLine = (0, import_react18.useMemo)(
     () => strokePositions ? makeStrokeLine(strokePositions, stroke, strokeWidth * devicePixelRatio, resolvedStrokeOpacity) : null,
     [devicePixelRatio, resolvedStrokeOpacity, stroke, strokePositions, strokeWidth]
   );
-  const focusStrokeLine = (0, import_react11.useMemo)(
+  const focusStrokeLine = (0, import_react18.useMemo)(
     () => strokePositions ? makeStrokeLine(strokePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
     [devicePixelRatio, strokePositions, strokeWidth]
   );
-  const startVerticesRef = (0, import_react11.useRef)(null);
+  const startVerticesRef = (0, import_react18.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react11.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react11.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
-  (0, import_react11.useEffect)(() => () => disposeStrokeLine(strokeLine), [strokeLine]);
-  (0, import_react11.useEffect)(() => () => disposeStrokeLine(focusStrokeLine), [focusStrokeLine]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react18.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react18.useEffect)(() => () => disposeStrokeLine(strokeLine), [strokeLine]);
+  (0, import_react18.useEffect)(() => () => disposeStrokeLine(focusStrokeLine), [focusStrokeLine]);
+  (0, import_react18.useEffect)(() => {
     const width = gl.domElement.width;
     const height = gl.domElement.height;
     for (const line of [strokeLine, focusStrokeLine]) {
@@ -3126,7 +4792,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -3141,7 +4807,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("primitive", { object: focusStrokeLine, renderOrder: renderOrder + 2 }),
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("primitive", { object: focusStrokeLine, renderOrder: renderOrder + 2 }),
       onDragStart: (event) => {
         startVerticesRef.current = cloneVertices(vertices);
         emitVerticesChange(event, onDragStart);
@@ -3152,7 +4818,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "meshBasicMaterial",
           {
             color: fill,
@@ -3162,20 +4828,20 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("primitive", { object: strokeLine, renderOrder: renderOrder + 1 })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("primitive", { object: strokeLine, renderOrder: renderOrder + 1 })
       ]
     }
   );
 }
 
 // src/hotspot/polyline-hotspot.tsx
-var import_fiber11 = require("@react-three/fiber");
-var import_react12 = require("react");
+var import_fiber16 = require("@react-three/fiber");
+var import_react19 = require("react");
 var import_three12 = require("three");
 var import_Line22 = require("three/addons/lines/Line2.js");
 var import_LineGeometry2 = require("three/addons/lines/LineGeometry.js");
 var import_LineMaterial2 = require("three/addons/lines/LineMaterial.js");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -3312,32 +4978,32 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const gl = (0, import_fiber11.useThree)((state) => state.gl);
-  const size = (0, import_fiber11.useThree)((state) => state.size);
-  const issues = (0, import_react12.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const gl = (0, import_fiber16.useThree)((state) => state.gl);
+  const size = (0, import_fiber16.useThree)((state) => state.size);
+  const issues = (0, import_react19.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react12.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePositions = (0, import_react12.useMemo)(
+  const center = (0, import_react19.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePositions = (0, import_react19.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const devicePixelRatio = gl.getPixelRatio();
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const line = (0, import_react12.useMemo)(
+  const line = (0, import_react19.useMemo)(
     () => linePositions ? makeLine(linePositions, stroke, strokeWidth * devicePixelRatio, opacity) : null,
     [devicePixelRatio, linePositions, opacity, stroke, strokeWidth]
   );
-  const focusLine = (0, import_react12.useMemo)(
+  const focusLine = (0, import_react19.useMemo)(
     () => linePositions ? makeLine(linePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
     [devicePixelRatio, linePositions, strokeWidth]
   );
-  const startVerticesRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const startVerticesRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
-  (0, import_react12.useEffect)(() => () => disposeLine(line), [line]);
-  (0, import_react12.useEffect)(() => () => disposeLine(focusLine), [focusLine]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react19.useEffect)(() => () => disposeLine(line), [line]);
+  (0, import_react19.useEffect)(() => () => disposeLine(focusLine), [focusLine]);
+  (0, import_react19.useEffect)(() => {
     const width = gl.domElement.width;
     const height = gl.domElement.height;
     for (const nextLine of [line, focusLine]) {
@@ -3355,7 +5021,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -3369,7 +5035,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("primitive", { object: focusLine, renderOrder: renderOrder + 2 }),
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("primitive", { object: focusLine, renderOrder: renderOrder + 2 }),
       onDragStart: (event) => {
         startVerticesRef.current = cloneVertices2(vertices);
         emitVerticesChange(event, onDragStart);
@@ -3379,15 +5045,15 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("primitive", { object: line, renderOrder: renderOrder + 1 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("primitive", { object: line, renderOrder: renderOrder + 1 })
     }
   );
 }
 
 // src/hotspot/graphic-hotspot.tsx
-var import_react13 = require("react");
+var import_react20 = require("react");
 var import_three13 = require("three");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
 function clampOpacity2(opacity) {
   if (!Number.isFinite(opacity)) {
@@ -3398,14 +5064,34 @@ function clampOpacity2(opacity) {
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
 }
-function roundedRectanglePath(context, x, y, width, height, radius) {
-  const safeRadius = Math.min(Math.max(radius, 0), width / 2, height / 2);
+function resolveCornerRadius(value) {
+  return Number.isFinite(value) ? Math.max(0, Math.min(value, 0.5)) : 0;
+}
+function roundedRectanglePath(context, x, y, width, height, radiusRatio, aspectWidth, aspectHeight) {
+  const safeAspectWidth = Number.isFinite(aspectWidth) && aspectWidth > 0 ? aspectWidth : 1;
+  const safeAspectHeight = Number.isFinite(aspectHeight) && aspectHeight > 0 ? aspectHeight : 1;
+  const shortSide = Math.min(safeAspectWidth, safeAspectHeight);
+  const safeRadiusRatio = resolveCornerRadius(radiusRatio);
+  const radiusX = Math.min(width / 2, width * safeRadiusRatio * shortSide / safeAspectWidth);
+  const radiusY = Math.min(height / 2, height * safeRadiusRatio * shortSide / safeAspectHeight);
+  context.beginPath();
+  context.moveTo(x + radiusX, y);
+  context.lineTo(x + width - radiusX, y);
+  context.ellipse(x + width - radiusX, y + radiusY, radiusX, radiusY, 0, -Math.PI / 2, 0);
+  context.lineTo(x + width, y + height - radiusY);
+  context.ellipse(x + width - radiusX, y + height - radiusY, radiusX, radiusY, 0, 0, Math.PI / 2);
+  context.lineTo(x + radiusX, y + height);
+  context.ellipse(x + radiusX, y + height - radiusY, radiusX, radiusY, 0, Math.PI / 2, Math.PI);
+  context.lineTo(x, y + radiusY);
+  context.ellipse(x + radiusX, y + radiusY, radiusX, radiusY, 0, Math.PI, Math.PI * 1.5);
+  context.closePath();
+}
+function polygonPath(context, points) {
   context.beginPath();
-  context.moveTo(x + safeRadius, y);
-  context.arcTo(x + width, y, x + width, y + height, safeRadius);
-  context.arcTo(x + width, y + height, x, y + height, safeRadius);
-  context.arcTo(x, y + height, x, y, safeRadius);
-  context.arcTo(x, y, x + width, y, safeRadius);
+  context.moveTo(points[0][0], points[0][1]);
+  for (const [x, y] of points.slice(1)) {
+    context.lineTo(x, y);
+  }
   context.closePath();
 }
 function paintPath(context, graphic, path) {
@@ -3419,7 +5105,7 @@ function paintPath(context, graphic, path) {
     path ? context.stroke(path) : context.stroke();
   }
 }
-function drawGraphic(context, graphic) {
+function drawGraphic(context, graphic, aspectWidth, aspectHeight) {
   const padding = Math.max(resolveStrokeWidth(graphic.strokeWidth) / 2 + 2, 4);
   const drawableSize = GRAPHIC_TEXTURE_SIZE - padding * 2;
   context.clearRect(0, 0, GRAPHIC_TEXTURE_SIZE, GRAPHIC_TEXTURE_SIZE);
@@ -3437,6 +5123,63 @@ function drawGraphic(context, graphic) {
     paintPath(context, graphic);
     return;
   }
+  if (graphic.kind === "triangle") {
+    const center = GRAPHIC_TEXTURE_SIZE / 2;
+    polygonPath(context, [
+      [center, padding],
+      [padding + drawableSize, padding + drawableSize],
+      [padding, padding + drawableSize]
+    ]);
+    paintPath(context, graphic);
+    return;
+  }
+  if (graphic.kind === "diamond") {
+    const center = GRAPHIC_TEXTURE_SIZE / 2;
+    polygonPath(context, [
+      [center, padding],
+      [padding + drawableSize, center],
+      [center, padding + drawableSize],
+      [padding, center]
+    ]);
+    paintPath(context, graphic);
+    return;
+  }
+  if (graphic.kind === "star") {
+    const center = GRAPHIC_TEXTURE_SIZE / 2;
+    const outerRadius = drawableSize / 2;
+    const innerRadius = outerRadius * 0.45;
+    const points = [];
+    for (let index = 0; index < 10; index += 1) {
+      const angle = -Math.PI / 2 + index * Math.PI / 5;
+      const radius = index % 2 === 0 ? outerRadius : innerRadius;
+      points.push([
+        center + Math.cos(angle) * radius,
+        center + Math.sin(angle) * radius
+      ]);
+    }
+    polygonPath(context, points);
+    paintPath(context, graphic);
+    return;
+  }
+  if (graphic.kind === "arrow") {
+    const center = GRAPHIC_TEXTURE_SIZE / 2;
+    const top = padding;
+    const bottom = padding + drawableSize;
+    const headBottom = top + drawableSize * 0.43;
+    const headHalfWidth = drawableSize * 0.38;
+    const stemHalfWidth = drawableSize * 0.14;
+    polygonPath(context, [
+      [center, top],
+      [center + headHalfWidth, headBottom],
+      [center + stemHalfWidth, headBottom],
+      [center + stemHalfWidth, bottom],
+      [center - stemHalfWidth, bottom],
+      [center - stemHalfWidth, headBottom],
+      [center - headHalfWidth, headBottom]
+    ]);
+    paintPath(context, graphic);
+    return;
+  }
   if (graphic.kind === "rectangle") {
     roundedRectanglePath(
       context,
@@ -3444,7 +5187,9 @@ function drawGraphic(context, graphic) {
       padding,
       drawableSize,
       drawableSize,
-      graphic.cornerRadius ?? 0
+      graphic.cornerRadius ?? 0,
+      aspectWidth,
+      aspectHeight
     );
     paintPath(context, graphic);
     return;
@@ -3483,7 +5228,7 @@ function drawGraphic(context, graphic) {
   paintPath(context, graphic, path);
   context.restore();
 }
-function createGraphicTexture(graphic) {
+function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   const canvas = document.createElement("canvas");
   canvas.width = GRAPHIC_TEXTURE_SIZE;
   canvas.height = GRAPHIC_TEXTURE_SIZE;
@@ -3491,7 +5236,7 @@ function createGraphicTexture(graphic) {
   if (!context) {
     throw new Error("Canvas 2D is unavailable for this graphic hotspot.");
   }
-  drawGraphic(context, graphic);
+  drawGraphic(context, graphic, aspectWidth, aspectHeight);
   const texture = new import_three13.CanvasTexture(canvas);
   texture.colorSpace = import_three13.SRGBColorSpace;
   texture.wrapS = import_three13.ClampToEdgeWrapping;
@@ -3502,16 +5247,16 @@ function createGraphicTexture(graphic) {
   texture.needsUpdate = true;
   return texture;
 }
-function useGraphicTexture(graphic, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react13.useState)(null);
-  const onLoadRef = (0, import_react13.useRef)(onLoad);
-  const onErrorRef = (0, import_react13.useRef)(onError);
+function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
+  const [texture, setTexture] = (0, import_react20.useState)(null);
+  const onLoadRef = (0, import_react20.useRef)(onLoad);
+  const onErrorRef = (0, import_react20.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     let nextTexture = null;
     try {
-      nextTexture = createGraphicTexture(graphic);
+      nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
       setTexture(nextTexture);
       onLoadRef.current?.(nextTexture);
     } catch (error) {
@@ -3521,7 +5266,7 @@ function useGraphicTexture(graphic, onLoad, onError) {
     return () => {
       nextTexture?.dispose();
     };
-  }, [graphic]);
+  }, [aspectHeight, aspectWidth, graphic]);
   return texture;
 }
 function CanvasGraphicHotspot({
@@ -3533,10 +5278,10 @@ function CanvasGraphicHotspot({
   onError,
   ...anchorProps
 }) {
-  const texture = useGraphicTexture(graphic, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("mesh", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "meshBasicMaterial",
       {
         map: texture,
@@ -3552,16 +5297,16 @@ function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-var import_fiber12 = require("@react-three/fiber");
-var import_react14 = require("react");
+var import_fiber17 = require("@react-three/fiber");
+var import_react21 = require("react");
 var import_three14 = require("three");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
 function clampOpacity3(opacity) {
   if (!Number.isFinite(opacity)) {
@@ -3581,13 +5326,13 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = (0, import_fiber12.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react14.useState)(null);
-  const onErrorRef = (0, import_react14.useRef)(onError);
-  const onLoadProgressRef = (0, import_react14.useRef)(onLoadProgress);
+  const gl = (0, import_fiber17.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react21.useState)(null);
+  const onErrorRef = (0, import_react21.useRef)(onError);
+  const onLoadProgressRef = (0, import_react21.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -3628,7 +5373,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react14.useEffect)(
+  (0, import_react21.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -3657,24 +5402,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = (0, import_react14.useState)(0);
-  const elapsedRef = (0, import_react14.useRef)(0);
-  const frameIndexRef = (0, import_react14.useRef)(0);
-  const endedRef = (0, import_react14.useRef)(false);
-  const lastPlaybackStateRef = (0, import_react14.useRef)(null);
-  const onFrameChangeRef = (0, import_react14.useRef)(onFrameChange);
-  const onPlaybackStateChangeRef = (0, import_react14.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react14.useRef)(onEnded);
+  const [frameIndex, setFrameIndex] = (0, import_react21.useState)(0);
+  const elapsedRef = (0, import_react21.useRef)(0);
+  const frameIndexRef = (0, import_react21.useRef)(0);
+  const endedRef = (0, import_react21.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react21.useRef)(null);
+  const onFrameChangeRef = (0, import_react21.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react21.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react21.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -3688,13 +5433,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -3713,7 +5458,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  (0, import_fiber12.useFrame)((_, deltaSeconds) => {
+  (0, import_fiber17.useFrame)((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -3743,9 +5488,9 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("mesh", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "meshBasicMaterial",
       {
         map: texture,
@@ -3759,10 +5504,10 @@ function SequenceHotspot({
 }
 
 // src/hotspot/video-hotspot.tsx
-var import_fiber13 = require("@react-three/fiber");
-var import_react15 = require("react");
+var import_fiber18 = require("@react-three/fiber");
+var import_react22 = require("react");
 var import_three15 = require("three");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function clampOpacity4(opacity) {
   if (!Number.isFinite(opacity)) {
     return 1;
@@ -3776,11 +5521,11 @@ function clampVolume(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture(id, poster, onError) {
-  const gl = (0, import_fiber13.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react15.useState)(null);
-  const onErrorRef = (0, import_react15.useRef)(onError);
+  const gl = (0, import_fiber18.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react22.useState)(null);
+  const onErrorRef = (0, import_react22.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -3817,7 +5562,7 @@ function usePosterTexture(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react15.useEffect)(
+  (0, import_react22.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -3835,14 +5580,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = (0, import_react15.useState)(null);
-  const onEndedRef = (0, import_react15.useRef)(onEnded);
-  const onErrorRef = (0, import_react15.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react15.useRef)(onPlaybackStateChange);
+  const [resource, setResource] = (0, import_react22.useState)(null);
+  const onEndedRef = (0, import_react22.useRef)(onEnded);
+  const onErrorRef = (0, import_react22.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react22.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -3943,11 +5688,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react15.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react15.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react22.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react22.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -3957,7 +5702,7 @@ function VideoHotspot({
     resource.video.playsInline = playsInline;
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -3980,9 +5725,9 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("mesh", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "meshBasicMaterial",
       {
         map: activeTexture,
@@ -3999,7 +5744,12 @@ function VideoHotspot({
   AutoRotate,
   GraphicHotspot,
   ImageHotspot,
+  KeyboardControls,
   MAX_HOTSPOT_PITCH,
+  MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY,
+  MouseControls,
+  PanoContextMenu,
+  PanoEvents,
   PanoView,
   PanoramaScenes,
   PolygonHotspot,
@@ -4007,12 +5757,19 @@ function VideoHotspot({
   SequenceHotspot,
   Sphere,
   Tile,
+  TouchControls,
   VideoHotspot,
   clampPanoPitch,
+  composePanoContextMenuItems,
+  createDefaultPanoContextMenuItems,
+  createPanoContextMenuPresets,
+  cycleSceneId,
   normalizePanoPosition,
   normalizePanoYaw,
   panoPositionToVector3,
+  resolvePanoContextMenuEntries,
   unwrapPolygonVertices,
+  usePanoEvents,
   validatePolygonVertices,
   validatePolylineVertices,
   vector3ToPanoPosition