@ericchen1990/pano-view 0.1.6 → 0.2.0

package/dist/index.mjs

@@ -4,16 +4,54 @@
 import { Canvas } from "@react-three/fiber";
 import {
   forwardRef as forwardRef2,
-  useEffect as useEffect4,
+  useCallback as useCallback3,
+  useEffect as useEffect10,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo2,
-  useRef as useRef4,
-  useState as useState2
+  useMemo as useMemo4,
+  useRef as useRef9,
+  useState as useState3
 } from "react";
 
-// src/panorama-controls.tsx
+// src/auto-rotate.tsx
+import { useFrame as useFrame2 } from "@react-three/fiber";
+import { useContext, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/pano-event-bus.ts
+import { createContext } from "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 = createContext(null);
+
+// src/panorama-view-runtime.tsx
 import { useFrame, useThree } from "@react-three/fiber";
 import {
+  createContext as createContext2,
   forwardRef,
   useEffect,
   useImperativeHandle,
@@ -21,13 +59,15 @@ import {
 } from "react";
 import { Euler, MathUtils, PerspectiveCamera } from "three";
 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 = createContext2(null);
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -43,54 +83,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 = forwardRef(function PanoramaControls2({ enabled, initialView, minFov, maxFov, options, onViewChange }, ref) {
-  const { camera, gl } = useThree();
+var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView, minFov, maxFov, options, eventBus }, ref) {
+  const { camera } = useThree();
   const viewRef = useRef({ ...initialView });
   const targetViewRef = useRef({ ...initialView });
   const initialViewRef = useRef({ ...initialView });
-  const pointersRef = useRef(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = useRef(null);
   const yawVelocityRef = useRef(0);
   const pitchVelocityRef = useRef(0);
   const zoomVelocityRef = useRef(0);
   const dirtyRef = useRef(true);
+  const settledRef = useRef(false);
   const interactingRef = useRef(false);
+  const mouseActiveRef = useRef(false);
+  const touchActiveRef = useRef(false);
   const interactionLockCountRef = useRef(0);
+  const keyboardActiveRef = useRef(false);
+  const lastVelocitySampleAtRef = useRef(null);
   const optionsRef = useRef(options);
-  const onViewChangeRef = useRef(onViewChange);
+  const eventBusRef = useRef(eventBus);
   const lastEmittedViewRef = useRef(null);
   const eulerRef = useRef(new Euler(0, 0, 0, "YXZ"));
+  const minFovRef = useRef(minFov);
+  const maxFovRef = 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" });
     }
-    pointersRef.current.clear();
+    if (touchActiveRef.current) {
+      touchActiveRef.current = false;
+      eventBusRef.current.emit("viewinteractionend", { source: "touch" });
+    }
+    syncInteracting();
     let released = false;
     return () => {
       if (released) {
@@ -104,233 +194,145 @@ var PanoramaControls = forwardRef(function PanoramaControls2({ enabled, initialV
     };
   };
   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;
   };
   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]
+    []
   );
   useEffect(() => {
     initialViewRef.current = { ...initialView };
     setView(initialView);
   }, [initialView.fov, initialView.pitch, initialView.yaw]);
-  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]);
   useFrame((_, deltaSeconds) => {
     if (!(camera instanceof 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;
     }
@@ -367,7 +369,12 @@ var PanoramaControls = forwardRef(function PanoramaControls2({ enabled, initialV
     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;
   });
@@ -375,17 +382,9 @@ var PanoramaControls = forwardRef(function PanoramaControls2({ enabled, initialV
 });
 
 // src/auto-rotate.tsx
-import { useFrame as useFrame2 } from "@react-three/fiber";
-import {
-  createContext,
-  useContext,
-  useEffect as useEffect2,
-  useRef as useRef2
-} from "react";
 var DEFAULT_AUTO_ROTATE_SPEED = 18;
 var DEFAULT_AUTO_ROTATE_ACCELERATION = 18;
 var DEFAULT_AUTO_ROTATE_START_DELAY = 2;
-var PanoramaControlsContext = createContext(null);
 function resolveStartDelay(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 0;
 }
@@ -398,19 +397,31 @@ function AutoRotate({
   acceleration = DEFAULT_AUTO_ROTATE_ACCELERATION,
   startDelay = DEFAULT_AUTO_ROTATE_START_DELAY
 }) {
-  const controlsRef = useContext(PanoramaControlsContext);
+  const controlsRef = useContext(PanoramaViewContext);
+  const eventBus = useContext(PanoEventBusContext);
   const elapsedRef = useRef2(0);
   const rotationSpeedRef = useRef2(0);
+  const rotatingRef = useRef2(false);
+  const yawAccumulatedRef = useRef2(0);
   if (!controlsRef) {
     throw new Error("<AutoRotate> must be rendered inside <PanoView>.");
   }
   useEffect2(() => {
     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]);
   useFrame2((_, 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;
@@ -429,8 +440,21 @@ 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;
@@ -438,7 +462,7 @@ function AutoRotate({
 
 // src/hotspot/accessibility.tsx
 import {
-  createContext as createContext2,
+  createContext as createContext3,
   useCallback,
   useContext as useContext2,
   useEffect as useEffect3,
@@ -447,7 +471,7 @@ import {
   useState
 } from "react";
 import { jsx } from "react/jsx-runtime";
-var HotspotAccessibilityContext = createContext2(null);
+var HotspotAccessibilityContext = createContext3(null);
 var VISUALLY_HIDDEN_STYLE = {
   border: 0,
   clip: "rect(0 0 0 0)",
@@ -552,116 +576,1454 @@ function useHotspotAccessibilityLayer() {
   return { controls, registry };
 }
 
-// src/panorama-event-surface.tsx
-import { BackSide } from "three";
-
-// src/hotspot/coordinates.ts
-import { MathUtils as MathUtils2, Vector3 } from "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;
+// src/keyboard-controls.tsx
+import { useFrame as useFrame3, useThree as useThree2 } from "@react-three/fiber";
+import { useContext as useContext3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4 } from "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 MathUtils2.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);
+    }
   }
-  const clamped = MathUtils2.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;
+  return map;
 }
-function normalizePanoPosition(position) {
-  const pitch = clampPanoPitch(position.pitch);
-  return {
-    yaw: Math.abs(pitch) === MAX_HOTSPOT_PITCH ? 0 : normalizePanoYaw(position.yaw),
-    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 = MathUtils2.degToRad(normalized.yaw);
-  const pitch = MathUtils2.degToRad(normalized.pitch);
-  const cosPitch = Math.cos(pitch);
-  return new 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: MathUtils2.radToDeg(Math.atan2(vector.x, -vector.z)),
-    pitch: MathUtils2.radToDeg(
-      Math.asin(MathUtils2.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
-import { jsx as jsx2, jsxs } from "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 = useContext3(PanoramaViewContext);
+  const { gl } = useThree2();
+  const pressedRef = useRef4(/* @__PURE__ */ new Set());
+  const shiftHeldRef = useRef4(false);
+  const invertRef = useRef4(invert);
+  const fovSpeedRef = useRef4(fovSpeed);
+  const onPreviousSceneRef = useRef4(onPreviousScene);
+  const onNextSceneRef = useRef4(onNextScene);
+  const keyMap = useMemo2(() => resolveKeyMap(keys), [keys]);
+  if (!controlsRef) {
+    throw new Error("<KeyboardControls> must be rendered inside <PanoView>.");
   }
-  return /* @__PURE__ */ jsxs(
-    "mesh",
-    {
-      renderOrder: -200,
-      onClick: (event) => emitPanoramaEvent(event, onClick),
-      onDoubleClick: (event) => emitPanoramaEvent(event, onDoubleClick),
-      onPointerMove: (event) => emitPanoramaEvent(event, onPointerMove),
-      children: [
-        /* @__PURE__ */ jsx2("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ jsx2(
-          "meshBasicMaterial",
-          {
-            colorWrite: false,
-            depthTest: false,
-            depthWrite: false,
+  invertRef.current = invert;
+  fovSpeedRef.current = fovSpeed;
+  onPreviousSceneRef.current = onPreviousScene;
+  onNextSceneRef.current = onNextScene;
+  useEffect4(() => {
+    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]);
+  useFrame3((_, 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
+import { useThree as useThree3 } from "@react-three/fiber";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "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 = useContext4(PanoramaViewContext);
+  const { gl } = useThree3();
+  const pointersRef = useRef5(
+    /* @__PURE__ */ new Map()
+  );
+  const optionsRef = useRef5({
+    rotateSpeed,
+    zoomSpeed,
+    wheel,
+    invert,
+    fovSpeed
+  });
+  if (!controlsRef) {
+    throw new Error("<MouseControls> must be rendered inside <PanoView>.");
+  }
+  optionsRef.current = {
+    rotateSpeed,
+    zoomSpeed,
+    wheel,
+    invert,
+    fovSpeed
+  };
+  useEffect5(() => {
+    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
+import {
+  createContext as createContext4,
+  useCallback as useCallback2,
+  useContext as useContext5,
+  useEffect as useEffect6,
+  useId,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useRef as useRef6,
+  useState as useState2
+} from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_ICON_SIZE = 16;
+var MENU_EDGE_PADDING = 8;
+var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
+var PanoContextMenuOverlayContext = createContext4(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 = useRef6(null);
+  const [activeIndex, setActiveIndex] = useState2(0);
+  const resolved = { ...DEFAULT_APPEARANCE, ...appearance };
+  const iconSize = Number.isFinite(resolved.iconSize) ? Math.max(0, resolved.iconSize) : DEFAULT_ICON_SIZE;
+  const visibleItems = useMemo3(
+    () => items.filter((item) => {
+      if (!isActionItem(item)) {
+        return true;
+      }
+      return !item.hidden;
+    }),
+    [items]
+  );
+  const focusableIndices = useMemo3(() => {
+    const indices = [];
+    visibleItems.forEach((item, index) => {
+      if (isActionItem(item) && !item.disabled) {
+        indices.push(index);
+      }
+    });
+    return indices;
+  }, [visibleItems]);
+  useEffect6(() => {
+    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 = useCallback2(
+    (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__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      "aria-label": "Panorama context menu",
+      className,
+      onKeyDown: handleKeyDown,
+      role: "menu",
+      style: panelStyle,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              background: resolved.background,
+              borderRadius: resolved.borderRadius,
+              inset: 0,
+              opacity: backgroundOpacity,
+              pointerEvents: "none",
+              position: "absolute",
+              zIndex: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { style: { position: "relative", zIndex: 1 }, children: visibleItems.map((item, index) => {
+          if (!isActionItem(item)) {
+            return /* @__PURE__ */ jsx2(
+              "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__ */ jsx2(
+            "img",
+            {
+              alt: item.imageAlt ?? "",
+              draggable: false,
+              src: item.image,
+              style: {
+                display: "block",
+                height: iconSize,
+                objectFit: "contain",
+                width: iconSize
+              }
+            }
+          ) : null);
+          return /* @__PURE__ */ 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__ */ jsx2(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    style: {
+                      alignItems: "center",
+                      display: "inline-flex",
+                      flexShrink: 0,
+                      height: iconSize,
+                      justifyContent: "center",
+                      width: iconSize
+                    },
+                    children: iconNode
+                  }
+                ),
+                /* @__PURE__ */ jsx2("span", { style: { flex: 1 }, children: item.label })
+              ]
+            },
+            item.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function PositionedMenuShell({
+  clientX,
+  clientY,
+  overlayElement,
+  children
+}) {
+  const shellRef = useRef6(null);
+  const [offset, setOffset] = useState2({ left: 0, top: 0 });
+  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__ */ jsx2(
+    "div",
+    {
+      ref: shellRef,
+      style: {
+        left: offset.left,
+        position: "absolute",
+        top: offset.top,
+        zIndex: 20
+      },
+      children
+    }
+  );
+}
+function usePanoContextMenuOverlay() {
+  const [session, setSession] = useState2(null);
+  const overlayRef = useRef6(null);
+  const [overlayElement, setOverlayElement] = useState2(
+    null
+  );
+  const api = useMemo3(
+    () => ({ setSession, overlayRef }),
+    []
+  );
+  const setOverlayNode = useCallback2((node) => {
+    overlayRef.current = node;
+    setOverlayElement(node);
+  }, []);
+  useEffect6(() => {
+    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__ */ jsx2(
+    "div",
+    {
+      ref: setOverlayNode,
+      "aria-hidden": session ? void 0 : true,
+      style: {
+        inset: 0,
+        pointerEvents: "none",
+        position: "absolute",
+        zIndex: 20
+      },
+      children: session ? /* @__PURE__ */ jsx2(
+        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 = useContext5(PanoEventBusContext);
+  const controlsRef = useContext5(PanoramaViewContext);
+  const overlayApi = useContext5(PanoContextMenuOverlayContext);
+  const actions = useContext5(PanoContextMenuActionsContext);
+  const instanceId = useId();
+  const sessionKeyRef = useRef6(0);
+  const propsRef = useRef6({
+    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 = useCallback2(() => {
+    overlayApi.setSession(null);
+  }, [overlayApi]);
+  const openMenu = useCallback2(
+    (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__ */ jsx2("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
+          }
+          return /* @__PURE__ */ jsx2(
+            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]
+  );
+  useEffect6(() => {
+    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__ */ 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__ */ jsx2("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
+        /* @__PURE__ */ jsx2("path", { d: "M3.5 3.5v3h3" })
+      ]
+    }
+  );
+}
+function FullscreenIcon() {
+  return /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
+    }
+  );
+}
+function ExitFullscreenIcon() {
+  return /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(ResetViewIcon, {}),
+    onSelect: () => {
+      actions.reset();
+    }
+  };
+  const fullscreen = {
+    id: "pano-fullscreen",
+    label: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+    icon: isFullscreen ? /* @__PURE__ */ jsx2(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx2(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 = createContext4(null);
+
+// src/pano-events.tsx
+import { useFrame as useFrame4, useThree as useThree4 } from "@react-three/fiber";
+import { useContext as useContext6, useEffect as useEffect7, useRef as useRef7 } from "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 = useContext6(PanoEventBusContext);
+  const controlsRef = useContext6(PanoramaViewContext);
+  const { gl } = useThree4();
+  if (!eventBus || !controlsRef) {
+    throw new Error("usePanoEvents must be used inside <PanoView>.");
+  }
+  const callbacksRef = useRef7({
+    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 = useRef7(0);
+  const isIdleRef = useRef7(false);
+  const idleTimeRef = useRef7(resolveIdleTime(idleTime));
+  idleTimeRef.current = resolveIdleTime(idleTime);
+  useEffect7(() => {
+    idleElapsedRef.current = 0;
+    isIdleRef.current = false;
+  }, [idleTime]);
+  useEffect7(() => {
+    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]);
+  useEffect7(() => {
+    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]);
+  useEffect7(() => {
+    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]);
+  useEffect7(() => {
+    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]);
+  useFrame4((_, 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
+import { useThree as useThree5 } from "@react-three/fiber";
+import { useContext as useContext7, useEffect as useEffect8 } from "react";
+import { BackSide, Raycaster, Vector2, Vector3 as Vector32 } from "three";
+
+// src/hotspot/coordinates.ts
+import { MathUtils as MathUtils2, Vector3 } from "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 MathUtils2.euclideanModulo(yaw + 180, 360) - 180;
+}
+function clampPanoPitch(pitch) {
+  if (!Number.isFinite(pitch)) {
+    return 0;
+  }
+  const clamped = MathUtils2.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 = MathUtils2.degToRad(normalized.yaw);
+  const pitch = MathUtils2.degToRad(normalized.pitch);
+  const cosPitch = Math.cos(pitch);
+  return new 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: MathUtils2.radToDeg(Math.atan2(vector.x, -vector.z)),
+    pitch: MathUtils2.radToDeg(
+      Math.asin(MathUtils2.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
+import { jsx as jsx3, jsxs as jsxs2 } from "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 = useContext7(PanoEventBusContext);
+  const { camera, gl } = useThree5();
+  useEffect8(() => {
+    if (!eventBus) {
+      return;
+    }
+    const element = gl.domElement;
+    const ndc = new Vector2();
+    const raycaster = new Raycaster();
+    const direction = new Vector32();
+    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__ */ jsxs2(
+    "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__ */ jsx3("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ jsx3(
+          "meshBasicMaterial",
+          {
+            colorWrite: false,
+            depthTest: false,
+            depthWrite: false,
             opacity: 0,
             side: BackSide,
             transparent: true
@@ -669,21 +2031,194 @@ function PanoramaEventSurface({
         )
       ]
     }
-  );
+  );
+}
+
+// src/touch-controls.tsx
+import { useThree as useThree6 } from "@react-three/fiber";
+import { useContext as useContext8, useEffect as useEffect9, useRef as useRef8 } from "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 = useContext8(PanoramaViewContext);
+  const { gl } = useThree6();
+  const pointersRef = useRef8(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = useRef8(null);
+  const optionsRef = useRef8({ rotateSpeed, invert, pinchZoom });
+  if (!controlsRef) {
+    throw new Error("<TouchControls> must be rendered inside <PanoView>.");
+  }
+  optionsRef.current = { rotateSpeed, invert, pinchZoom };
+  useEffect9(() => {
+    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
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "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%"
 };
+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 = forwardRef2(
   function PanoView2({
     children,
@@ -691,6 +2226,7 @@ var PanoView = forwardRef2(
     minFov = 30,
     maxFov = 100,
     controls = true,
+    contextMenu = true,
     onViewChange,
     onPanoramaClick,
     onPanoramaDoubleClick,
@@ -700,16 +2236,18 @@ var PanoView = forwardRef2(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = useRef4(null);
-    const controlsRef = useRef4(null);
+    const rootRef = useRef9(null);
+    const controlsRef = useRef9(null);
+    const eventBus = useMemo4(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
-    const fallbackViewRef = useRef4(DEFAULT_VIEW);
+    const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
+    const fallbackViewRef = useRef9(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
       Math.max(maxFov, normalizedMinFov + 1)
     );
-    const normalizedInitialView = useMemo2(
+    const normalizedInitialView = useMemo4(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
         pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
@@ -728,15 +2266,98 @@ var PanoView = forwardRef2(
     );
     fallbackViewRef.current = normalizedInitialView;
     const controlsEnabled = controls !== false;
-    const controlOptions = useMemo2(
+    const controlOptions = useMemo4(
       () => 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 = useMemo4(
+      () => resolveChannel(controlOptions.mouse, {
+        enabled: true,
+        rotateSpeed: topRotateSpeed,
+        zoomSpeed: topZoomSpeed,
+        wheel: true,
+        invert: allModeInvert,
+        buttons: ["left"]
+      }),
+      [
+        allModeInvert,
+        controlOptions.mouse,
+        topRotateSpeed,
+        topZoomSpeed
+      ]
+    );
+    const touchChannel = useMemo4(
+      () => resolveChannel(controlOptions.touch, {
+        enabled: true,
+        rotateSpeed: topRotateSpeed,
+        invert: allModeInvert,
+        pinchZoom: true
+      }),
+      [allModeInvert, controlOptions.touch, topRotateSpeed]
+    );
+    const keyboardChannel = useMemo4(
+      () => resolveChannel(controlOptions.keyboard, {
+        enabled: true
+      }),
+      [controlOptions.keyboard]
+    );
+    const toggleFullscreen = useCallback3(async () => {
+      if (typeof document === "undefined") {
+        return;
+      }
+      if (document.fullscreenElement) {
+        await document.exitFullscreen?.();
+        return;
+      }
+      await rootRef.current?.requestFullscreen?.();
+    }, []);
+    const [isViewerFullscreen, setIsViewerFullscreen] = useState3(false);
+    useEffect10(() => {
+      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 = useMemo4(
+      () => ({
+        reset: () => {
+          controlsRef.current?.reset();
+        },
+        toggleFullscreen: () => {
+          void toggleFullscreen();
+        },
+        isFullscreen: isViewerFullscreen
+      }),
+      [isViewerFullscreen, toggleFullscreen]
+    );
+    const contextMenuChannel = useMemo4(
+      () => resolveContextMenuChannel(contextMenu),
+      [contextMenu]
+    );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = useState2(
+    const [legacyAutoRotate, setLegacyAutoRotate] = useState3(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    useEffect4(() => {
+    useEffect10(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
     useImperativeHandle2(
@@ -755,20 +2376,11 @@ var PanoView = forwardRef2(
         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 = useMemo2(
+    const rootStyle = useMemo4(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -776,7 +2388,7 @@ var PanoView = forwardRef2(
       }),
       [style]
     );
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         ...divProps,
@@ -784,7 +2396,7 @@ var PanoView = forwardRef2(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
@@ -804,41 +2416,71 @@ var PanoView = forwardRef2(
               },
               style: {
                 ...DEFAULT_CANVAS_STYLE,
-                touchAction: controlsEnabled ? "none" : "auto"
+                touchAction: userControlsEnabled ? "none" : "auto"
               },
-              tabIndex: controlsEnabled ? 0 : void 0,
-              children: /* @__PURE__ */ jsx3(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsxs2(PanoramaControlsContext.Provider, { value: controlsRef, children: [
-                /* @__PURE__ */ jsx3(
-                  PanoramaControls,
-                  {
-                    ref: controlsRef,
-                    enabled: controlsEnabled,
-                    initialView: normalizedInitialView,
-                    maxFov: normalizedMaxFov,
-                    minFov: normalizedMinFov,
-                    onViewChange,
-                    options: controlOptions
-                  }
-                ),
-                /* @__PURE__ */ jsx3(
-                  AutoRotate,
-                  {
-                    enabled: legacyAutoRotate,
-                    speed: legacyAutoRotateOptions.autoRotateSpeed
-                  }
-                ),
-                /* @__PURE__ */ jsx3(
-                  PanoramaEventSurface,
-                  {
-                    onClick: onPanoramaClick,
-                    onDoubleClick: onPanoramaDoubleClick,
-                    onPointerMove: onPanoramaPointerMove
-                  }
-                ),
-                children
-              ] }) })
+              tabIndex: userControlsEnabled ? 0 : void 0,
+              children: /* @__PURE__ */ jsx4(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx4(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx4(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx4(
+                PanoContextMenuOverlayContext.Provider,
+                {
+                  value: contextMenuOverlayApi,
+                  children: /* @__PURE__ */ jsxs3(
+                    PanoContextMenuActionsContext.Provider,
+                    {
+                      value: contextMenuActions,
+                      children: [
+                        /* @__PURE__ */ jsx4(
+                          PanoramaViewRuntime,
+                          {
+                            ref: controlsRef,
+                            eventBus,
+                            initialView: normalizedInitialView,
+                            maxFov: normalizedMaxFov,
+                            minFov: normalizedMinFov,
+                            options: controlOptions
+                          }
+                        ),
+                        (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx4(
+                          PanoEvents,
+                          {
+                            onViewChange,
+                            onClick: onPanoramaClick,
+                            onDoubleClick: onPanoramaDoubleClick,
+                            onPointerMove: onPanoramaPointerMove
+                          }
+                        ),
+                        /* @__PURE__ */ jsx4(
+                          AutoRotate,
+                          {
+                            enabled: legacyAutoRotate,
+                            speed: legacyAutoRotateOptions.autoRotateSpeed
+                          }
+                        ),
+                        userControlsEnabled && mouseChannel.mount ? /* @__PURE__ */ jsx4(
+                          MouseControls,
+                          {
+                            ...mouseChannel.props,
+                            fovSpeed: controlOptions.fovSpeed
+                          }
+                        ) : null,
+                        userControlsEnabled && touchChannel.mount ? /* @__PURE__ */ jsx4(TouchControls, { ...touchChannel.props }) : null,
+                        userControlsEnabled && keyboardChannel.mount ? /* @__PURE__ */ jsx4(
+                          KeyboardControls,
+                          {
+                            ...keyboardChannel.props,
+                            fovSpeed: keyboardChannel.props.fovSpeed ?? controlOptions.fovSpeed
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsx4(PanoramaEventSurface, {}),
+                        contextMenuChannel.mount ? /* @__PURE__ */ jsx4(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                        children
+                      ]
+                    }
+                  )
+                }
+              ) }) }) })
             }
           ),
+          contextMenuOverlay,
           hotspotAccessibilityControls
         ]
       }
@@ -847,8 +2489,8 @@ var PanoView = forwardRef2(
 );
 
 // src/sphere.tsx
-import { useThree as useThree2 } from "@react-three/fiber";
-import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "react";
+import { useThree as useThree7 } from "@react-three/fiber";
+import { useEffect as useEffect11, useRef as useRef10, useState as useState4 } from "react";
 import {
   BackSide as BackSide2,
   LinearFilter,
@@ -858,7 +2500,7 @@ import {
   SRGBColorSpace,
   TextureLoader
 } from "three";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Sphere({
   src,
   yawOffset = 0,
@@ -866,13 +2508,13 @@ function Sphere({
   onError,
   visible = true
 }) {
-  const gl = useThree2((state) => state.gl);
-  const [texture, setTexture] = useState3(null);
-  const onLoadRef = useRef5(onLoad);
-  const onErrorRef = useRef5(onError);
+  const gl = useThree7((state) => state.gl);
+  const [texture, setTexture] = useState4(null);
+  const onLoadRef = useRef10(onLoad);
+  const onErrorRef = useRef10(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect5(() => {
+  useEffect11(() => {
     let active = true;
     const loader = new TextureLoader();
     setTexture(null);
@@ -906,7 +2548,7 @@ function Sphere({
       active = false;
     };
   }, [gl, src]);
-  useEffect5(
+  useEffect11(
     () => () => {
       texture?.dispose();
     },
@@ -915,14 +2557,14 @@ function Sphere({
   if (!texture) {
     return null;
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "mesh",
     {
       rotation: [0, MathUtils3.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ jsx4("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx5(
           "meshBasicMaterial",
           {
             map: texture,
@@ -936,15 +2578,15 @@ function Sphere({
 }
 
 // src/panorama-scenes.tsx
-import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
+import { useFrame as useFrame6, useThree as useThree10 } from "@react-three/fiber";
 import {
   Fragment,
-  useCallback as useCallback2,
-  useContext as useContext4,
-  useEffect as useEffect8,
-  useMemo as useMemo5,
-  useRef as useRef7,
-  useState as useState5
+  useCallback as useCallback4,
+  useContext as useContext10,
+  useEffect as useEffect14,
+  useMemo as useMemo7,
+  useRef as useRef12,
+  useState as useState6
 } from "react";
 import {
   DoubleSide,
@@ -952,17 +2594,17 @@ import {
   LinearFilter as LinearFilter4,
   PlaneGeometry as PlaneGeometry2,
   ShaderMaterial,
-  Vector3 as Vector34,
+  Vector3 as Vector35,
   WebGLRenderTarget
 } from "three";
 
 // src/tile/texture-manager-context.tsx
-import { useThree as useThree3 } from "@react-three/fiber";
+import { useThree as useThree8 } from "@react-three/fiber";
 import {
-  createContext as createContext3,
-  useContext as useContext3,
-  useEffect as useEffect6,
-  useMemo as useMemo3
+  createContext as createContext5,
+  useContext as useContext9,
+  useEffect as useEffect12,
+  useMemo as useMemo5
 } from "react";
 
 // src/tile/texture-manager.ts
@@ -1192,8 +2834,8 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var TileTextureManagerContext = createContext3(
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TileTextureManagerContext = createContext5(
   null
 );
 function TileTextureManagerProvider({
@@ -1201,9 +2843,9 @@ function TileTextureManagerProvider({
   maxTextureMemoryMb = 128,
   maxConcurrentLoads = 4
 }) {
-  const gl = useThree3((state) => state.gl);
+  const gl = useThree8((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = useMemo3(
+  const manager = useMemo5(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -1212,24 +2854,24 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  useEffect6(() => {
+  useEffect12(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ jsx5(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsx6(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return useContext3(TileTextureManagerContext);
+  return useContext9(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
-import { useFrame as useFrame3, useThree as useThree4 } from "@react-three/fiber";
+import { useFrame as useFrame5, useThree as useThree9 } from "@react-three/fiber";
 import {
   memo,
-  useEffect as useEffect7,
-  useMemo as useMemo4,
-  useRef as useRef6,
-  useState as useState4
+  useEffect as useEffect13,
+  useMemo as useMemo6,
+  useRef as useRef11,
+  useState as useState5
 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping2,
@@ -1240,7 +2882,7 @@ import {
   PerspectiveCamera as PerspectiveCamera2,
   SRGBColorSpace as SRGBColorSpace3,
   TextureLoader as TextureLoader3,
-  Vector3 as Vector33
+  Vector3 as Vector34
 } from "three";
 
 // src/tile/face-layout.ts
@@ -1248,7 +2890,7 @@ import {
   Box3,
   Euler as Euler2,
   Quaternion,
-  Vector3 as Vector32
+  Vector3 as Vector33
 } from "three";
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
@@ -1312,12 +2954,12 @@ function getTileBoundingBox(address, radius = CUBE_RADIUS) {
   const halfWidth = local.width / 2;
   const halfHeight = local.height / 2;
   const quaternion = getFaceQuaternion(address.face);
-  const position = new Vector32(...transform.position);
+  const position = new Vector33(...transform.position);
   const corners = [
-    new Vector32(local.x - halfWidth, local.y - halfHeight, 0),
-    new Vector32(local.x + halfWidth, local.y - halfHeight, 0),
-    new Vector32(local.x - halfWidth, local.y + halfHeight, 0),
-    new Vector32(local.x + halfWidth, local.y + halfHeight, 0)
+    new Vector33(local.x - halfWidth, local.y - halfHeight, 0),
+    new Vector33(local.x + halfWidth, local.y - halfHeight, 0),
+    new Vector33(local.x - halfWidth, local.y + halfHeight, 0),
+    new Vector33(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
@@ -1426,7 +3068,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
@@ -1435,10 +3077,10 @@ var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
 var SHARED_TILE_GEOMETRY = new PlaneGeometry(1, 1);
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = useState4(null);
-  const onErrorRef = useRef6(onError);
+  const [texture, setTexture] = useState5(null);
+  const onErrorRef = useRef11(onError);
   onErrorRef.current = onError;
-  useEffect7(() => {
+  useEffect13(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -1475,7 +3117,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  useEffect7(
+  useEffect13(
     () => () => {
       texture?.dispose();
     },
@@ -1488,7 +3130,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = useMemo4(() => {
+  const geometry = useMemo6(() => {
     const nextGeometry = new PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -1506,21 +3148,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  useEffect7(
+  useEffect13(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         "meshBasicMaterial",
         {
           depthTest: false,
@@ -1536,7 +3178,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx6(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx7(
     PreviewFace,
     {
       face,
@@ -1547,14 +3189,14 @@ function PreviewCube({
   ));
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = useState4(() => ({
+  const [managedState, setManagedState] = useState5(() => ({
     manager,
     key,
     url,
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  useEffect7(
+  useEffect13(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -1581,14 +3223,14 @@ var TileMesh = memo(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx6("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx7(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         "meshBasicMaterial",
         {
           depthTest: false,
@@ -1605,7 +3247,7 @@ var TileLayerMeshes = memo(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx6(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx7(
     TileMesh,
     {
       address,
@@ -1705,8 +3347,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new Vector33());
-  const center = new Vector33();
+  const direction = camera.getWorldDirection(new Vector34());
+  const center = new Vector34();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -1773,11 +3415,11 @@ function Tile({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = useThree4();
-  const multiresConfig = useMemo4(() => parseMultires(multires), [multires]);
+  const { camera, gl, size } = useThree9();
+  const multiresConfig = useMemo6(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = useMemo4(
+  const candidatesByLevel = useMemo6(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -1789,13 +3431,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = useRef6(onLoadProgress);
-  const errorRef = useRef6(onTileError);
-  const levelChangeRef = useRef6(onLevelChange);
+  const progressRef = useRef11(onLoadProgress);
+  const errorRef = useRef11(onTileError);
+  const levelChangeRef = useRef11(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = useMemo4(
+  const ownedManager = useMemo6(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -1816,7 +3458,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  useEffect7(() => {
+  useEffect13(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -1826,11 +3468,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = useRef6(false);
-  useEffect7(() => {
+  const readyRef = useRef11(false);
+  useEffect13(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  useEffect7(() => {
+  useEffect13(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -1838,31 +3480,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = useMemo4(
+  const resolveUrl = useMemo6(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = useState4([]);
-  const layerTokenRef = useRef6("");
-  const currentLevelRef = useRef6(1);
-  const lastUpdateAtRef = useRef6(-Infinity);
-  const visibilityDirtyRef = useRef6(true);
-  const lastVisibilityQuaternionRef = useRef6(camera.quaternion.clone());
-  const lastVisibilityFovRef = useRef6(Number.NaN);
-  const lastViewportRef = useRef6({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = useRef6(new Frustum());
-  const projectionMatrixRef = useRef6(new Matrix4());
-  const visibilityCameraRef = useRef6(new PerspectiveCamera2());
-  useEffect7(() => {
+  const [layers, setLayers] = useState5([]);
+  const layerTokenRef = useRef11("");
+  const currentLevelRef = useRef11(1);
+  const lastUpdateAtRef = useRef11(-Infinity);
+  const visibilityDirtyRef = useRef11(true);
+  const lastVisibilityQuaternionRef = useRef11(camera.quaternion.clone());
+  const lastVisibilityFovRef = useRef11(Number.NaN);
+  const lastViewportRef = useRef11({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = useRef11(new Frustum());
+  const projectionMatrixRef = useRef11(new Matrix4());
+  const visibilityCameraRef = useRef11(new PerspectiveCamera2());
+  useEffect13(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  useEffect7(() => {
+  useEffect13(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -1876,7 +3518,7 @@ function Tile({
       setLayers(nextLayers);
     }
   };
-  useFrame3(() => {
+  useFrame5(() => {
     if (loadMode === "preview") {
       return;
     }
@@ -1942,15 +3584,15 @@ function Tile({
     };
     commitLayers(nextLayers);
   });
-  return /* @__PURE__ */ jsxs4("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ jsx7(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx6(
+    layers.map((layer) => /* @__PURE__ */ jsx7(
       TileLayerMeshes,
       {
         layer,
@@ -1963,7 +3605,7 @@ function Tile({
 }
 
 // src/panorama-scenes.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var TRANSITION_DEFAULTS = {
   none: { duration: 0, krpanoBlend: "NOBLEND" },
   crossfade: { duration: 1, krpanoBlend: "BLEND(1.0, easeInCubic)" },
@@ -2013,7 +3655,7 @@ function SceneSource({
     return null;
   }
   if (scene.type === "sphere") {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       Sphere,
       {
         src: scene.src,
@@ -2025,7 +3667,7 @@ function SceneSource({
     );
   }
   const { id: _id, type: _type, ...tileProps } = scene;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Tile,
     {
       ...tileProps,
@@ -2041,17 +3683,17 @@ function SnapshotCapture({
   maxPixels,
   onCaptured
 }) {
-  const { camera, gl, scene, size } = useThree5();
-  const capturedRequestRef = useRef7(0);
-  const renderTargetRef = useRef7(null);
-  useEffect8(
+  const { camera, gl, scene, size } = useThree10();
+  const capturedRequestRef = useRef12(0);
+  const renderTargetRef = useRef12(null);
+  useEffect14(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
     },
     []
   );
-  useFrame4(() => {
+  useFrame6(() => {
     if (requestId === 0 || requestId === capturedRequestRef.current) {
       return;
     }
@@ -2097,12 +3739,12 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, size } = useThree5();
-  const meshRef = useRef7(null);
-  const startRef = useRef7(null);
-  const finishedRef = useRef7(false);
-  const directionRef = useRef7(new Vector34());
-  const material = useMemo5(
+  const { camera, size } = useThree10();
+  const meshRef = useRef12(null);
+  const startRef = useRef12(null);
+  const finishedRef = useRef12(false);
+  const directionRef = useRef12(new Vector35());
+  const material = useMemo7(
     () => new ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -2181,13 +3823,13 @@ function SnapshotOverlay({
     }),
     [snapshot.texture, transition.preset]
   );
-  useEffect8(() => () => material.dispose(), [material]);
-  useEffect8(() => {
+  useEffect14(() => () => material.dispose(), [material]);
+  useEffect14(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
   }, [material, runId]);
-  useFrame4((state) => {
+  useFrame6((state) => {
     const mesh = meshRef.current;
     if (!mesh || !camera.isPerspectiveCamera) {
       return;
@@ -2212,9 +3854,9 @@ function SnapshotOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ jsxs5("mesh", { ref: meshRef, renderOrder: 1e4, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx7("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx7("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ jsxs6("mesh", { ref: meshRef, renderOrder: 1e4, frustumCulled: false, children: [
+    /* @__PURE__ */ jsx8("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx8("primitive", { attach: "material", object: material })
   ] });
 }
 var FULLSCREEN_PLANE = new PlaneGeometry2(1, 1);
@@ -2227,47 +3869,47 @@ function PanoramaScenesController({
   onTransitionError,
   snapshotMaxPixels = 3686400
 }) {
-  const controlsRef = useContext4(PanoramaControlsContext);
+  const controlsRef = useContext10(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = useMemo5(
+  const transition = useMemo7(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = useMemo5(
+  const sceneMap = useMemo7(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = useState5([
+  const [slots, setSlots] = useState6([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = useState5(0);
-  const [liveSlot, setLiveSlot] = useState5(0);
-  const [pendingSlot, setPendingSlot] = useState5(null);
-  const [phase, setPhase] = useState5(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = useState5(0);
-  const [transitionRunId, setTransitionRunId] = useState5(0);
-  const [snapshot, setSnapshot] = useState5(null);
-  const [recoveryKey, setRecoveryKey] = useState5(0);
-  const requestedSceneIdRef = useRef7(activeSceneId);
-  const captureReasonRef = useRef7("start");
-  const interactionReleaseRef = useRef7(null);
-  const slotsRef = useRef7(slots);
-  const phaseRef = useRef7(phase);
-  const liveSlotRef = useRef7(liveSlot);
-  const transitionFromRef = useRef7(initialScene);
+  const [activeSlot, setActiveSlot] = useState6(0);
+  const [liveSlot, setLiveSlot] = useState6(0);
+  const [pendingSlot, setPendingSlot] = useState6(null);
+  const [phase, setPhase] = useState6(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = useState6(0);
+  const [transitionRunId, setTransitionRunId] = useState6(0);
+  const [snapshot, setSnapshot] = useState6(null);
+  const [recoveryKey, setRecoveryKey] = useState6(0);
+  const requestedSceneIdRef = useRef12(activeSceneId);
+  const captureReasonRef = useRef12("start");
+  const interactionReleaseRef = useRef12(null);
+  const slotsRef = useRef12(slots);
+  const phaseRef = useRef12(phase);
+  const liveSlotRef = useRef12(liveSlot);
+  const transitionFromRef = useRef12(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = useCallback2(() => {
+  const releaseInteraction = useCallback4(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = useCallback2((sceneId, error) => {
+  const reportError = useCallback4((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = useCallback2((scene) => {
+  const startPreload = useCallback4((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -2278,7 +3920,7 @@ function PanoramaScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  useEffect8(() => {
+  useEffect14(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -2302,7 +3944,7 @@ function PanoramaScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = useCallback2((slot) => {
+  const handleReady = useCallback4((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -2333,7 +3975,7 @@ function PanoramaScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = useCallback2((nextSnapshot) => {
+  const handleCaptured = useCallback4((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -2355,7 +3997,7 @@ function PanoramaScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = useCallback2(() => {
+  const finishTransition = useCallback4(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -2380,12 +4022,12 @@ function PanoramaScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  useEffect8(() => () => {
+  useEffect14(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
-  const { gl } = useThree5();
-  useEffect8(() => {
+  const { gl } = useThree10();
+  useEffect14(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -2409,8 +4051,8 @@ function PanoramaScenesController({
   }, [gl, manager, releaseInteraction, snapshot]);
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx8(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -2422,7 +4064,7 @@ function PanoramaScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         SceneSource,
         {
           scene: source,
@@ -2438,7 +4080,7 @@ function PanoramaScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ jsx7(
+    snapshotVisible ? /* @__PURE__ */ jsx8(
       SnapshotOverlay,
       {
         snapshot,
@@ -2456,19 +4098,19 @@ function PanoramaScenes({
   maxConcurrentTileLoads,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx7(PanoramaScenesController, { ...props })
+      children: /* @__PURE__ */ jsx8(PanoramaScenesController, { ...props })
     }
   );
 }
 
 // src/hotspot/image-hotspot.tsx
-import { useThree as useThree6 } from "@react-three/fiber";
-import { useEffect as useEffect10, useRef as useRef9, useState as useState6 } from "react";
+import { useThree as useThree11 } from "@react-three/fiber";
+import { useEffect as useEffect16, useRef as useRef14, useState as useState7 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping3,
   DoubleSide as DoubleSide2,
@@ -2479,12 +4121,12 @@ import {
 } from "three";
 
 // src/hotspot/hotspot-anchor.tsx
-import { useFrame as useFrame5 } from "@react-three/fiber";
+import { useFrame as useFrame7 } from "@react-three/fiber";
 import {
-  useContext as useContext5,
-  useEffect as useEffect9,
-  useMemo as useMemo6,
-  useRef as useRef8
+  useContext as useContext11,
+  useEffect as useEffect15,
+  useMemo as useMemo8,
+  useRef as useRef13
 } from "react";
 import {
   EdgesGeometry,
@@ -2493,9 +4135,9 @@ import {
   PlaneGeometry as PlaneGeometry3,
   PerspectiveCamera as PerspectiveCamera4,
   Quaternion as Quaternion2,
-  Vector3 as Vector35
+  Vector3 as Vector36
 } from "three";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -2503,7 +4145,7 @@ var DEFAULT_REFERENCE_FOV = 75;
 var MIN_ANGULAR_SIZE = 0.01;
 var MAX_ANGULAR_SIZE = 179;
 var DRAG_EPSILON_DEGREES = 1e-3;
-var LOCAL_FORWARD = new Vector35(0, 0, 1);
+var LOCAL_FORWARD = new Vector36(0, 0, 1);
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
@@ -2552,7 +4194,7 @@ function createSurfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = MathUtils4.degToRad(position.pitch);
   const yaw = MathUtils4.degToRad(position.yaw);
-  const localUp = new Vector35(
+  const localUp = new Vector36(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -2601,10 +4243,10 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = useContext5(PanoramaControlsContext);
-  const groupRef = useRef8(null);
-  const dragStateRef = useRef8(null);
-  const suppressNextClickRef = useRef8(false);
+  const controlsRef = useContext11(PanoramaViewContext);
+  const groupRef = useRef13(null);
+  const dragStateRef = useRef13(null);
+  const suppressNextClickRef = useRef13(false);
   const normalizedPosition = normalizePanoPosition(position);
   const rendering = internalOrientation && internalPlacement ? { orientation: internalOrientation, placement: internalPlacement } : HOTSPOT_MODE_RENDERING[mode];
   const { orientation: orientation2, placement } = rendering;
@@ -2617,17 +4259,17 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = useMemo6(
+  const worldPosition = useMemo8(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = useMemo6(
+  const surfaceQuaternion3 = useMemo8(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = useMemo6(() => {
+  const focusGeometry = useMemo8(() => {
     const planeGeometry = new PlaneGeometry3(1, 1);
     const geometry = new EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -2645,15 +4287,15 @@ function HotspotAnchor({
       });
     } : void 0
   });
-  useEffect9(
+  useEffect15(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  useEffect9(() => () => focusGeometry.dispose(), [focusGeometry]);
-  useFrame5(({ camera }) => {
+  useEffect15(() => () => focusGeometry.dispose(), [focusGeometry]);
+  useFrame7(({ camera }) => {
     if (!groupRef.current) {
       return;
     }
@@ -2664,7 +4306,7 @@ function HotspotAnchor({
     }
     groupRef.current.rotateOnAxis(
       LOCAL_FORWARD,
-      MathUtils4.degToRad(rotation)
+      MathUtils4.degToRad(-rotation)
     );
     const scaleFactor = scaleMode === "fixed" && camera instanceof PerspectiveCamera4 ? fixedScaleFactor(camera.fov, referenceFov) : 1;
     groupRef.current.scale.set(
@@ -2699,7 +4341,7 @@ function HotspotAnchor({
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "group",
     {
       ref: groupRef,
@@ -2769,14 +4411,14 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: interactive ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx8(
+        focused ? focusContent ?? /* @__PURE__ */ jsx9(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx8("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx9("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children
@@ -2786,7 +4428,7 @@ function HotspotAnchor({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function clampOpacity(opacity) {
   if (!Number.isFinite(opacity)) {
     return 1;
@@ -2794,13 +4436,13 @@ function clampOpacity(opacity) {
   return Math.max(0, Math.min(opacity, 1));
 }
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = useThree6((state) => state.gl);
-  const [texture, setTexture] = useState6(null);
-  const onLoadRef = useRef9(onLoad);
-  const onErrorRef = useRef9(onError);
+  const gl = useThree11((state) => state.gl);
+  const [texture, setTexture] = useState7(null);
+  const onLoadRef = useRef14(onLoad);
+  const onErrorRef = useRef14(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect10(() => {
+  useEffect16(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -2838,7 +4480,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  useEffect10(
+  useEffect16(
     () => () => {
       texture?.dispose();
     },
@@ -2856,9 +4498,9 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx9(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsxs7("mesh", { children: [
-    /* @__PURE__ */ jsx9("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsxs8("mesh", { children: [
+    /* @__PURE__ */ jsx10("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx10(
       "meshBasicMaterial",
       {
         map: texture,
@@ -2872,8 +4514,8 @@ function ImageHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useThree as useThree7 } from "@react-three/fiber";
-import { useEffect as useEffect11, useMemo as useMemo7, useRef as useRef10 } from "react";
+import { useThree as useThree12 } from "@react-three/fiber";
+import { useEffect as useEffect17, useMemo as useMemo9, useRef as useRef15 } from "react";
 import {
   BufferGeometry,
   DoubleSide as DoubleSide3,
@@ -2881,13 +4523,13 @@ import {
   Matrix4 as Matrix43,
   Quaternion as Quaternion3,
   ShapeUtils,
-  Vector2 as Vector22,
-  Vector3 as Vector36
+  Vector2 as Vector23,
+  Vector3 as Vector37
 } from "three";
 import { Line2 } from "three/addons/lines/Line2.js";
 import { LineGeometry } from "three/addons/lines/LineGeometry.js";
 import { LineMaterial } from "three/addons/lines/LineMaterial.js";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -2922,7 +4564,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new Vector22(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new Vector23(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -2959,7 +4601,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new Vector36()];
+  const candidates = [new Vector37()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -2983,7 +4625,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new Vector36(0, 1, 0)) || polygonContainsDirection(normalized, new Vector36(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new Vector37(0, 1, 0)) || polygonContainsDirection(normalized, new Vector37(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -2994,7 +4636,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector36()
+    new Vector37()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -3003,7 +4645,7 @@ function surfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = position.pitch * Math.PI / 180;
   const yaw = position.yaw * Math.PI / 180;
-  const localUp = new Vector36(
+  const localUp = new Vector37(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -3016,7 +4658,7 @@ function makeWorldToLocal(center) {
   return new Matrix43().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new Vector36(1, 1, 1)
+    new Vector37(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -3071,7 +4713,7 @@ function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps)
 }
 function makeFillGeometry(vertices, center) {
   const unwrapped = unwrapPolygonVertices(vertices);
-  const contour = unwrapped.map((vertex) => new Vector22(vertex.unwrappedYaw, vertex.pitch));
+  const contour = unwrapped.map((vertex) => new Vector23(vertex.unwrappedYaw, vertex.pitch));
   const triangles = ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
@@ -3160,38 +4802,38 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const gl = useThree7((state) => state.gl);
-  const size = useThree7((state) => state.size);
-  const issues = useMemo7(() => validatePolygonVertices(vertices), [vertices]);
+  const gl = useThree12((state) => state.gl);
+  const size = useThree12((state) => state.size);
+  const issues = useMemo9(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo7(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = useMemo7(
+  const center = useMemo9(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = useMemo9(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePositions = useMemo7(
+  const strokePositions = useMemo9(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
   const devicePixelRatio = gl.getPixelRatio();
-  const strokeLine = useMemo7(
+  const strokeLine = useMemo9(
     () => strokePositions ? makeStrokeLine(strokePositions, stroke, strokeWidth * devicePixelRatio, resolvedStrokeOpacity) : null,
     [devicePixelRatio, resolvedStrokeOpacity, stroke, strokePositions, strokeWidth]
   );
-  const focusStrokeLine = useMemo7(
+  const focusStrokeLine = useMemo9(
     () => strokePositions ? makeStrokeLine(strokePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
     [devicePixelRatio, strokePositions, strokeWidth]
   );
-  const startVerticesRef = useRef10(null);
+  const startVerticesRef = useRef15(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  useEffect11(() => {
+  useEffect17(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  useEffect11(() => () => fillGeometry?.dispose(), [fillGeometry]);
-  useEffect11(() => () => disposeStrokeLine(strokeLine), [strokeLine]);
-  useEffect11(() => () => disposeStrokeLine(focusStrokeLine), [focusStrokeLine]);
-  useEffect11(() => {
+  useEffect17(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  useEffect17(() => () => disposeStrokeLine(strokeLine), [strokeLine]);
+  useEffect17(() => () => disposeStrokeLine(focusStrokeLine), [focusStrokeLine]);
+  useEffect17(() => {
     const width = gl.domElement.width;
     const height = gl.domElement.height;
     for (const line of [strokeLine, focusStrokeLine]) {
@@ -3210,7 +4852,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -3225,7 +4867,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx10("primitive", { object: focusStrokeLine, renderOrder: renderOrder + 2 }),
+      focusContent: /* @__PURE__ */ jsx11("primitive", { object: focusStrokeLine, renderOrder: renderOrder + 2 }),
       onDragStart: (event) => {
         startVerticesRef.current = cloneVertices(vertices);
         emitVerticesChange(event, onDragStart);
@@ -3236,7 +4878,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx10("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx11(
           "meshBasicMaterial",
           {
             color: fill,
@@ -3246,25 +4888,25 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx10("primitive", { object: strokeLine, renderOrder: renderOrder + 1 })
+        /* @__PURE__ */ jsx11("primitive", { object: strokeLine, renderOrder: renderOrder + 1 })
       ]
     }
   );
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useThree as useThree8 } from "@react-three/fiber";
-import { useEffect as useEffect12, useMemo as useMemo8, useRef as useRef11 } from "react";
+import { useThree as useThree13 } from "@react-three/fiber";
+import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef16 } from "react";
 import {
   MathUtils as MathUtils5,
   Matrix4 as Matrix44,
   Quaternion as Quaternion4,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
 import { Line2 as Line22 } from "three/addons/lines/Line2.js";
 import { LineGeometry as LineGeometry2 } from "three/addons/lines/LineGeometry.js";
 import { LineMaterial as LineMaterial2 } from "three/addons/lines/LineMaterial.js";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -3289,7 +4931,7 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector37()
+    new Vector38()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -3298,7 +4940,7 @@ function surfaceQuaternion2(position) {
   const inward = outward.clone().negate();
   const pitch = MathUtils5.degToRad(position.pitch);
   const yaw = MathUtils5.degToRad(position.yaw);
-  const localUp = new Vector37(
+  const localUp = new Vector38(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -3311,7 +4953,7 @@ function makeWorldToLocal2(center) {
   return new Matrix44().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new Vector37(1, 1, 1)
+    new Vector38(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -3401,32 +5043,32 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const gl = useThree8((state) => state.gl);
-  const size = useThree8((state) => state.size);
-  const issues = useMemo8(() => validatePolylineVertices(vertices), [vertices]);
+  const gl = useThree13((state) => state.gl);
+  const size = useThree13((state) => state.size);
+  const issues = useMemo10(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo8(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePositions = useMemo8(
+  const center = useMemo10(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePositions = useMemo10(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const devicePixelRatio = gl.getPixelRatio();
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const line = useMemo8(
+  const line = useMemo10(
     () => linePositions ? makeLine(linePositions, stroke, strokeWidth * devicePixelRatio, opacity) : null,
     [devicePixelRatio, linePositions, opacity, stroke, strokeWidth]
   );
-  const focusLine = useMemo8(
+  const focusLine = useMemo10(
     () => linePositions ? makeLine(linePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
     [devicePixelRatio, linePositions, strokeWidth]
   );
-  const startVerticesRef = useRef11(null);
-  useEffect12(() => {
+  const startVerticesRef = useRef16(null);
+  useEffect18(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
-  useEffect12(() => () => disposeLine(line), [line]);
-  useEffect12(() => () => disposeLine(focusLine), [focusLine]);
-  useEffect12(() => {
+  useEffect18(() => () => disposeLine(line), [line]);
+  useEffect18(() => () => disposeLine(focusLine), [focusLine]);
+  useEffect18(() => {
     const width = gl.domElement.width;
     const height = gl.domElement.height;
     for (const nextLine of [line, focusLine]) {
@@ -3444,7 +5086,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -3458,7 +5100,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx11("primitive", { object: focusLine, renderOrder: renderOrder + 2 }),
+      focusContent: /* @__PURE__ */ jsx12("primitive", { object: focusLine, renderOrder: renderOrder + 2 }),
       onDragStart: (event) => {
         startVerticesRef.current = cloneVertices2(vertices);
         emitVerticesChange(event, onDragStart);
@@ -3468,13 +5110,13 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx11("primitive", { object: line, renderOrder: renderOrder + 1 })
+      children: /* @__PURE__ */ jsx12("primitive", { object: line, renderOrder: renderOrder + 1 })
     }
   );
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect13, useRef as useRef12, useState as useState7 } from "react";
+import { useEffect as useEffect19, useRef as useRef17, useState as useState8 } from "react";
 import {
   CanvasTexture,
   ClampToEdgeWrapping as ClampToEdgeWrapping4,
@@ -3483,7 +5125,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter3,
   SRGBColorSpace as SRGBColorSpace5
 } from "three";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
 function clampOpacity2(opacity) {
   if (!Number.isFinite(opacity)) {
@@ -3494,14 +5136,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) {
@@ -3515,7 +5177,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);
@@ -3533,6 +5195,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,
@@ -3540,7 +5259,9 @@ function drawGraphic(context, graphic) {
       padding,
       drawableSize,
       drawableSize,
-      graphic.cornerRadius ?? 0
+      graphic.cornerRadius ?? 0,
+      aspectWidth,
+      aspectHeight
     );
     paintPath(context, graphic);
     return;
@@ -3579,7 +5300,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;
@@ -3587,7 +5308,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 CanvasTexture(canvas);
   texture.colorSpace = SRGBColorSpace5;
   texture.wrapS = ClampToEdgeWrapping4;
@@ -3598,16 +5319,16 @@ function createGraphicTexture(graphic) {
   texture.needsUpdate = true;
   return texture;
 }
-function useGraphicTexture(graphic, onLoad, onError) {
-  const [texture, setTexture] = useState7(null);
-  const onLoadRef = useRef12(onLoad);
-  const onErrorRef = useRef12(onError);
+function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
+  const [texture, setTexture] = useState8(null);
+  const onLoadRef = useRef17(onLoad);
+  const onErrorRef = useRef17(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect13(() => {
+  useEffect19(() => {
     let nextTexture = null;
     try {
-      nextTexture = createGraphicTexture(graphic);
+      nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
       setTexture(nextTexture);
       onLoadRef.current?.(nextTexture);
     } catch (error) {
@@ -3617,7 +5338,7 @@ function useGraphicTexture(graphic, onLoad, onError) {
     return () => {
       nextTexture?.dispose();
     };
-  }, [graphic]);
+  }, [aspectHeight, aspectWidth, graphic]);
   return texture;
 }
 function CanvasGraphicHotspot({
@@ -3629,10 +5350,10 @@ function CanvasGraphicHotspot({
   onError,
   ...anchorProps
 }) {
-  const texture = useGraphicTexture(graphic, onLoad, onError);
-  return /* @__PURE__ */ jsx12(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsxs9("mesh", { children: [
-    /* @__PURE__ */ jsx12("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx12(
+  const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
+  return /* @__PURE__ */ jsx13(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsxs10("mesh", { children: [
+    /* @__PURE__ */ jsx13("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx13(
       "meshBasicMaterial",
       {
         map: texture,
@@ -3648,14 +5369,14 @@ function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx12(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx13(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx12(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx13(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-import { useFrame as useFrame6, useThree as useThree9 } from "@react-three/fiber";
-import { useEffect as useEffect14, useRef as useRef13, useState as useState8 } from "react";
+import { useFrame as useFrame8, useThree as useThree14 } from "@react-three/fiber";
+import { useEffect as useEffect20, useRef as useRef18, useState as useState9 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
   DoubleSide as DoubleSide5,
@@ -3664,7 +5385,7 @@ import {
   SRGBColorSpace as SRGBColorSpace6,
   TextureLoader as TextureLoader5
 } from "three";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
 function clampOpacity3(opacity) {
   if (!Number.isFinite(opacity)) {
@@ -3684,13 +5405,13 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = useThree9((state) => state.gl);
-  const [texture, setTexture] = useState8(null);
-  const onErrorRef = useRef13(onError);
-  const onLoadProgressRef = useRef13(onLoadProgress);
+  const gl = useThree14((state) => state.gl);
+  const [texture, setTexture] = useState9(null);
+  const onErrorRef = useRef18(onError);
+  const onLoadProgressRef = useRef18(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  useEffect14(() => {
+  useEffect20(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -3731,7 +5452,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  useEffect14(
+  useEffect20(
     () => () => {
       texture?.dispose();
     },
@@ -3760,24 +5481,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = useState8(0);
-  const elapsedRef = useRef13(0);
-  const frameIndexRef = useRef13(0);
-  const endedRef = useRef13(false);
-  const lastPlaybackStateRef = useRef13(null);
-  const onFrameChangeRef = useRef13(onFrameChange);
-  const onPlaybackStateChangeRef = useRef13(onPlaybackStateChange);
-  const onEndedRef = useRef13(onEnded);
+  const [frameIndex, setFrameIndex] = useState9(0);
+  const elapsedRef = useRef18(0);
+  const frameIndexRef = useRef18(0);
+  const endedRef = useRef18(false);
+  const lastPlaybackStateRef = useRef18(null);
+  const onFrameChangeRef = useRef18(onFrameChange);
+  const onPlaybackStateChangeRef = useRef18(onPlaybackStateChange);
+  const onEndedRef = useRef18(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  useEffect14(() => {
+  useEffect20(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  useEffect14(() => {
+  useEffect20(() => {
     if (!texture) {
       return;
     }
@@ -3791,13 +5512,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  useEffect14(() => {
+  useEffect20(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  useEffect14(() => {
+  useEffect20(() => {
     if (!texture) {
       return;
     }
@@ -3816,7 +5537,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  useFrame6((_, deltaSeconds) => {
+  useFrame8((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -3846,9 +5567,9 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx13(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsxs10("mesh", { children: [
-    /* @__PURE__ */ jsx13("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsxs11("mesh", { children: [
+    /* @__PURE__ */ jsx14("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx14(
       "meshBasicMaterial",
       {
         map: texture,
@@ -3862,8 +5583,8 @@ function SequenceHotspot({
 }
 
 // src/hotspot/video-hotspot.tsx
-import { useThree as useThree10 } from "@react-three/fiber";
-import { useEffect as useEffect15, useRef as useRef14, useState as useState9 } from "react";
+import { useThree as useThree15 } from "@react-three/fiber";
+import { useEffect as useEffect21, useRef as useRef19, useState as useState10 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
   DoubleSide as DoubleSide6,
@@ -3873,7 +5594,7 @@ import {
   TextureLoader as TextureLoader6,
   VideoTexture
 } from "three";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function clampOpacity4(opacity) {
   if (!Number.isFinite(opacity)) {
     return 1;
@@ -3887,11 +5608,11 @@ function clampVolume(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture(id, poster, onError) {
-  const gl = useThree10((state) => state.gl);
-  const [texture, setTexture] = useState9(null);
-  const onErrorRef = useRef14(onError);
+  const gl = useThree15((state) => state.gl);
+  const [texture, setTexture] = useState10(null);
+  const onErrorRef = useRef19(onError);
   onErrorRef.current = onError;
-  useEffect15(() => {
+  useEffect21(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -3928,7 +5649,7 @@ function usePosterTexture(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  useEffect15(
+  useEffect21(
     () => () => {
       texture?.dispose();
     },
@@ -3946,14 +5667,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = useState9(null);
-  const onEndedRef = useRef14(onEnded);
-  const onErrorRef = useRef14(onError);
-  const onPlaybackStateChangeRef = useRef14(onPlaybackStateChange);
+  const [resource, setResource] = useState10(null);
+  const onEndedRef = useRef19(onEnded);
+  const onErrorRef = useRef19(onError);
+  const onPlaybackStateChangeRef = useRef19(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect15(() => {
+  useEffect21(() => {
     if (!src) {
       setResource(null);
       return;
@@ -4054,11 +5775,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture(id, poster, onError);
-  const onPlaybackErrorRef = useRef14(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef14(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef19(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef19(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect15(() => {
+  useEffect21(() => {
     if (!resource) {
       return;
     }
@@ -4068,7 +5789,7 @@ function VideoHotspot({
     resource.video.playsInline = playsInline;
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect15(() => {
+  useEffect21(() => {
     if (!resource) {
       return;
     }
@@ -4091,9 +5812,9 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx14(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsxs11("mesh", { children: [
-    /* @__PURE__ */ jsx14("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsxs12("mesh", { children: [
+    /* @__PURE__ */ jsx15("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx15(
       "meshBasicMaterial",
       {
         map: activeTexture,
@@ -4109,7 +5830,12 @@ export {
   AutoRotate,
   GraphicHotspot,
   ImageHotspot,
+  KeyboardControls,
   MAX_HOTSPOT_PITCH,
+  MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY,
+  MouseControls,
+  PanoContextMenu,
+  PanoEvents,
   PanoView,
   PanoramaScenes,
   PolygonHotspot,
@@ -4117,12 +5843,19 @@ export {
   SequenceHotspot,
   Sphere,
   Tile,
+  TouchControls,
   VideoHotspot,
   clampPanoPitch,
+  composePanoContextMenuItems,
+  createDefaultPanoContextMenuItems,
+  createPanoContextMenuPresets,
+  cycleSceneId,
   normalizePanoPosition,
   normalizePanoYaw,
   panoPositionToVector3,
+  resolvePanoContextMenuEntries,
   unwrapPolygonVertices,
+  usePanoEvents,
   validatePolygonVertices,
   validatePolylineVertices,
   vector3ToPanoPosition