@ericchen1990/pano-view 3.5.0 → 3.6.0

package/dist/index.mjs

@@ -2238,18 +2238,83 @@ var require_howler = __commonJS({
   }
 });
 
+// src/view-limits.ts
+function parseViewLimits(value) {
+  if (value === void 0) return void 0;
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    throw new Error("viewLimits: expected an object");
+  const result = {};
+  for (const axis of ["yaw", "pitch", "fov"]) {
+    const input = value[axis];
+    if (input === void 0) continue;
+    if (!input || typeof input !== "object" || Array.isArray(input))
+      throw new Error(`viewLimits.${axis}: expected min and max`);
+    const { min, max } = input;
+    const lower = axis === "yaw" ? -180 : axis === "pitch" ? -90 : 1;
+    const upper = axis === "yaw" ? 180 : axis === "pitch" ? 90 : 179;
+    if (typeof min !== "number" || typeof max !== "number" || !Number.isFinite(min) || !Number.isFinite(max) || min < lower || min > upper || max < lower || max > upper)
+      throw new Error(`viewLimits.${axis}: expected finite min and max from ${lower} to ${upper}`);
+    if (axis !== "yaw" && min > max)
+      throw new Error(`viewLimits.${axis}: min must not exceed max`);
+    result[axis] = { min, max };
+  }
+  return result;
+}
+function resolveViewLimits(base, scene, minFov = 30, maxFov = 100) {
+  const pitch = scene?.pitch ?? base?.pitch;
+  const fov = scene?.fov ?? base?.fov;
+  return {
+    yaw: scene?.yaw ?? base?.yaw,
+    pitch: pitch ?? { min: -90, max: 90 },
+    fov: fov ?? { min: minFov, max: maxFov },
+    hardPitch: pitch !== void 0,
+    hardFov: fov !== void 0
+  };
+}
+function clampViewAxis(value, range) {
+  return Math.max(range.min, Math.min(range.max, value));
+}
+function normalizeViewYaw(yaw) {
+  return ((yaw + 180) % 360 + 360) % 360 - 180;
+}
+function yawWidth(range) {
+  if (!range || range.min === -180 && range.max === 180) return 360;
+  return ((range.max - range.min) % 360 + 360) % 360;
+}
+function yawOffset(yaw, range) {
+  const width = yawWidth(range);
+  const offset = ((yaw - range.min) % 360 + 360) % 360;
+  if (offset <= width) return offset;
+  return offset - width < 360 - offset ? width : 0;
+}
+function constrainViewYaw(yaw, range) {
+  if (yawWidth(range) === 360) return normalizeViewYaw(yaw);
+  return normalizeViewYaw(range.min + yawOffset(yaw, range));
+}
+function applyLimitedYawDelta(yaw, delta, range) {
+  const width = yawWidth(range);
+  if (width === 360) return normalizeViewYaw(yaw + delta);
+  const offset = clampViewAxis(yawOffset(yaw, range) + delta, { min: 0, max: width });
+  return normalizeViewYaw(range.min + offset);
+}
+function limitedYawDelta(from, to, range, shortestPath = true) {
+  if (yawWidth(range) === 360)
+    return shortestPath ? normalizeViewYaw(to - from) : to - from;
+  return yawOffset(to, range) - yawOffset(from, range);
+}
+
 // src/pano-viewer.tsx
 import { Canvas } from "@react-three/fiber";
 import { createXRStore, XR } from "@react-three/xr";
 import {
   forwardRef as forwardRef2,
   useCallback as useCallback6,
-  useContext as useContext15,
+  useContext as useContext16,
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo7,
+  useMemo as useMemo8,
   useRef as useRef13,
-  useState as useState5,
+  useState as useState6,
   useSyncExternalStore as useSyncExternalStore6
 } from "react";
 
@@ -2337,6 +2402,7 @@ function sourceList(src) {
 }
 function createUnlockingHowl({
   src,
+  format,
   loop,
   crossOrigin,
   isActive,
@@ -2358,6 +2424,7 @@ function createUnlockingHowl({
   };
   const instance = new import_howler.Howl({
     src: [...src],
+    format: format ? [...format] : void 0,
     html5: false,
     preload: true,
     loop,
@@ -2467,6 +2534,7 @@ import {
   forwardRef,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef
 } from "react";
 import { Euler, MathUtils, PerspectiveCamera } from "three";
@@ -2480,6 +2548,7 @@ var DEFAULT_ZOOM_DAMPING = 16;
 var DEFAULT_FRICTION_STOP = 0.01;
 var VIEW_SETTLE_EPSILON = 1e-3;
 var DEFAULT_NAVIGATION_DURATION = 700;
+var POINTER_VELOCITY_MAX_AGE_MS = 100;
 var PanoramaViewContext = createContext3(null);
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
@@ -2499,6 +2568,9 @@ function resolveDamping(value, fallback) {
 function resolveFrictionStop(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_FRICTION_STOP;
 }
+function shouldKeepPointerInertia(sampledAt, releasedAt, cancelled = false) {
+  return !cancelled && sampledAt !== null && releasedAt >= sampledAt && releasedAt - sampledAt <= POINTER_VELOCITY_MAX_AGE_MS;
+}
 function resolveNavigationDuration(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_NAVIGATION_DURATION;
 }
@@ -2511,7 +2583,7 @@ function applyNavigationEasing(progress, easing) {
 function viewsEqual(a, b) {
   return a.yaw === b.yaw && a.pitch === b.pitch && a.fov === b.fov;
 }
-var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView, minFov, maxFov, options, eventBus }, ref) {
+var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView, viewLimits, minFov, maxFov, options, eventBus }, ref) {
   const { camera, gl } = useThree();
   const xrSession = useXR((state) => state.session);
   const xrSessionRef = useRef(xrSession);
@@ -2539,48 +2611,46 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
   const lastEmittedViewRef = useRef(null);
   const eulerRef = useRef(new Euler(0, 0, 0, "YXZ"));
   const xrEulerRef = useRef(new Euler(0, 0, 0, "YXZ"));
-  const minFovRef = useRef(minFov);
-  const maxFovRef = useRef(maxFov);
+  const baseLimitsRef = useRef(viewLimits);
+  const sceneLimitsRef = useRef(void 0);
+  const legacyFovRef = useRef({ minFov, maxFov });
+  const limitsRef = useRef(resolveViewLimits(viewLimits, void 0, minFov, maxFov));
   const activeNavigationRef = useRef(null);
   optionsRef.current = options;
   eventBusRef.current = eventBus;
   xrSessionRef.current = xrSession;
-  minFovRef.current = minFov;
-  maxFovRef.current = maxFov;
+  baseLimitsRef.current = viewLimits;
+  legacyFovRef.current = { minFov, maxFov };
   const hasInertia = () => yawVelocityRef.current !== 0 || pitchVelocityRef.current !== 0 || zoomVelocityRef.current !== 0;
   const isUserInteracting = () => mouseActiveRef.current || touchActiveRef.current || keyboardActiveRef.current || gyroActiveRef.current || interactionLockCountRef.current > 0 || xrSessionRef.current != null || activeNavigationRef.current != null || hasInertia();
   const syncInteracting = () => {
     interactingRef.current = mouseActiveRef.current || touchActiveRef.current;
   };
   const hardConstrainView = (view, current = targetViewRef.current) => {
+    const limits = limitsRef.current;
     return {
-      yaw: normalizeYaw(view.yaw ?? current.yaw),
-      pitch: clamp(view.pitch ?? current.pitch, -MAX_PITCH, MAX_PITCH),
-      fov: clamp(
-        view.fov ?? current.fov,
-        minFovRef.current,
-        maxFovRef.current
-      )
+      yaw: constrainViewYaw(Number.isFinite(view.yaw) ? view.yaw : current.yaw, limits.yaw),
+      pitch: clampViewAxis(Number.isFinite(view.pitch) ? view.pitch : current.pitch, limits.pitch),
+      fov: clampViewAxis(Number.isFinite(view.fov) ? view.fov : current.fov, limits.fov)
     };
   };
   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;
+    const constrained = hardConstrainView(view, current);
+    if (optionsRef.current.bouncingLimits !== true || !interactingRef.current)
+      return constrained;
+    const limits = limitsRef.current;
+    const fovOvershoot = Math.max(limits.fov.max - limits.fov.min, 1) * BOUNCE_OVERSHOOT_FOV_RATIO;
     return {
-      yaw: normalizeYaw(view.yaw ?? current.yaw),
-      pitch: clamp(
+      yaw: constrained.yaw,
+      pitch: limits.hardPitch ? constrained.pitch : clamp(
         view.pitch ?? current.pitch,
         -MAX_PITCH - BOUNCE_OVERSHOOT_PITCH,
         MAX_PITCH + BOUNCE_OVERSHOOT_PITCH
       ),
-      fov: clamp(
+      fov: limits.hardFov ? constrained.fov : clamp(
         view.fov ?? current.fov,
-        minFovRef.current - fovOvershoot,
-        maxFovRef.current + fovOvershoot
+        limits.fov.min - fovOvershoot,
+        limits.fov.max + fovOvershoot
       )
     };
   };
@@ -2634,6 +2704,27 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       );
     };
   };
+  const refreshLimits = () => {
+    const next = resolveViewLimits(
+      baseLimitsRef.current,
+      sceneLimitsRef.current,
+      legacyFovRef.current.minFov,
+      legacyFovRef.current.maxFov
+    );
+    if (JSON.stringify(next) === JSON.stringify(limitsRef.current)) return;
+    limitsRef.current = next;
+    cancelNavigation();
+    stopVelocity();
+    viewRef.current = hardConstrainView(viewRef.current);
+    targetViewRef.current = hardConstrainView(targetViewRef.current);
+    if (gyroActiveRef.current) {
+      gyroOffsetRef.current = {
+        yaw: shortestYawDelta(gyroPoseRef.current.yaw, viewRef.current.yaw),
+        pitch: viewRef.current.pitch - gyroPoseRef.current.pitch
+      };
+    }
+    markDirty();
+  };
   const setView = (view, setOptions) => {
     cancelNavigation();
     const nextView = hardConstrainView(view);
@@ -2664,7 +2755,12 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     const target = hardConstrainView(safeTargetInput, from);
     const duration = resolveNavigationDuration(options2?.duration);
     const rawYawDelta = targetInput.yaw !== void 0 && Number.isFinite(targetInput.yaw) ? safeTargetInput.yaw - from.yaw : 0;
-    const yawDelta = options2?.shortestPath === false ? rawYawDelta : shortestYawDelta(from.yaw, target.yaw);
+    const yawDelta = limitedYawDelta(
+      from.yaw,
+      options2?.shortestPath === false ? from.yaw + rawYawDelta : target.yaw,
+      limitsRef.current.yaw,
+      options2?.shortestPath !== false
+    );
     stopVelocity();
     targetViewRef.current = target;
     markDirty();
@@ -2719,7 +2815,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     const appliesTouchMode = gyroControlsView && applyOptions?.source === "touch";
     const acceptsYaw = !appliesTouchMode || gyroMode === "horizontaloffset" || gyroMode === "full";
     const acceptsPitch = !appliesTouchMode || gyroMode === "full";
-    const nextYaw = acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw) ? current.yaw + delta.yaw : current.yaw;
+    const nextYaw = acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw) ? applyLimitedYawDelta(current.yaw, delta.yaw, limitsRef.current.yaw) : current.yaw;
     const nextPitch = acceptsPitch && 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({
@@ -2729,10 +2825,10 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     });
     if (gyroControlsView) {
       if (acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw)) {
-        gyroOffsetRef.current.yaw += delta.yaw;
+        gyroOffsetRef.current.yaw = shortestYawDelta(gyroPoseRef.current.yaw, targetViewRef.current.yaw);
       }
       if (acceptsPitch && delta.pitch !== void 0 && Number.isFinite(delta.pitch)) {
-        gyroOffsetRef.current.pitch += delta.pitch;
+        gyroOffsetRef.current.pitch = targetViewRef.current.pitch - gyroPoseRef.current.pitch;
       }
     }
     markDirty();
@@ -2750,6 +2846,8 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       if (delta.fov !== void 0 && Number.isFinite(delta.fov)) {
         zoomVelocityRef.current = clamp(delta.fov / elapsed, -180, 180);
       }
+    } else if (delta.fov !== void 0 && Number.isFinite(delta.fov)) {
+      zoomVelocityRef.current = 0;
     }
     return true;
   };
@@ -2757,6 +2855,10 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     ref,
     () => ({
       getView: () => ({ ...viewRef.current }),
+      setSceneViewLimits: (limits) => {
+        sceneLimitsRef.current = parseViewLimits(limits);
+        refreshLimits();
+      },
       getTargetView: () => ({ ...targetViewRef.current }),
       setView,
       reset: () => setView(initialViewRef.current),
@@ -2780,7 +2882,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
           });
         }
       },
-      setPointerActive: (source, active) => {
+      setPointerActive: (source, active, releaseOptions) => {
         const wasActive = source === "mouse" ? mouseActiveRef.current : touchActiveRef.current;
         if (source === "mouse") {
           mouseActiveRef.current = active;
@@ -2796,9 +2898,14 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
         } else if (!active && wasActive) {
           eventBusRef.current.emit("viewinteractionend", { source });
         }
-        if (active) {
+        if (active || !shouldKeepPointerInertia(
+          lastVelocitySampleAtRef.current,
+          performance.now(),
+          releaseOptions?.cancelled
+        )) {
           stopVelocity();
-        } else if (!mouseActiveRef.current && !touchActiveRef.current) {
+        }
+        if (!active && !mouseActiveRef.current && !touchActiveRef.current) {
           lastVelocitySampleAtRef.current = null;
           snapTargetToHardLimits();
         }
@@ -2848,7 +2955,9 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
         if (!Number.isFinite(yawDelta) || xrSessionRef.current != null || activeNavigationRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0 || interactingRef.current || keyboardActiveRef.current || !inertiaFinished) {
           return false;
         }
-        targetViewRef.current.yaw += yawDelta;
+        const nextYaw = applyLimitedYawDelta(targetViewRef.current.yaw, yawDelta, limitsRef.current.yaw);
+        if (nextYaw === targetViewRef.current.yaw) return false;
+        targetViewRef.current.yaw = nextYaw;
         markDirty();
         return true;
       }
@@ -2861,6 +2970,9 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     },
     []
   );
+  useLayoutEffect(() => {
+    refreshLimits();
+  }, [viewLimits, minFov, maxFov]);
   useEffect(() => {
     initialViewRef.current = { ...initialView };
     setView(initialView);
@@ -2941,8 +3053,9 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       );
       const zoomDamping2 = Math.exp(-INERTIA_ZOOM_DAMPING * deltaSeconds);
       if (Math.abs(yawVelocityRef.current) >= frictionStop) {
-        targetViewRef.current.yaw += yawVelocityRef.current * deltaSeconds;
-        yawVelocityRef.current *= rotationDamping;
+        const previousYaw = targetViewRef.current.yaw;
+        targetViewRef.current.yaw = applyLimitedYawDelta(previousYaw, yawVelocityRef.current * deltaSeconds, limitsRef.current.yaw);
+        yawVelocityRef.current = targetViewRef.current.yaw === previousYaw ? 0 : yawVelocityRef.current * rotationDamping;
         markDirty();
       } else {
         yawVelocityRef.current = 0;
@@ -2983,7 +3096,7 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
     );
     const rotationFactor = dampingFactor(rotateDamping, deltaSeconds);
     const zoomFactor = dampingFactor(zoomDamping, deltaSeconds);
-    const yawDelta = shortestYawDelta(viewRef.current.yaw, targetView.yaw);
+    const yawDelta = limitedYawDelta(viewRef.current.yaw, targetView.yaw, limitsRef.current.yaw);
     const smoothedView = {
       yaw: normalizeYaw(viewRef.current.yaw + yawDelta * rotationFactor),
       pitch: viewRef.current.pitch + (targetView.pitch - viewRef.current.pitch) * rotationFactor,
@@ -3613,17 +3726,18 @@ function MouseControls({
         }
       }
       pointersRef.current.clear();
-      controlsRef.current?.setPointerActive("mouse", false);
+      controlsRef.current?.setPointerActive("mouse", false, { cancelled: true });
     };
     if (!enabled) {
       clearPointers();
       return;
     }
     const isMouseLike = (event) => event.pointerType === "mouse" || event.pointerType === "pen";
-    const syncActive = () => {
+    const syncActive = (cancelled = false) => {
       controlsRef.current?.setPointerActive(
         "mouse",
-        pointersRef.current.size > 0
+        pointersRef.current.size > 0,
+        { cancelled }
       );
     };
     const onPointerDown = (event) => {
@@ -3684,7 +3798,7 @@ function MouseControls({
       if (element.hasPointerCapture?.(event.pointerId)) {
         element.releasePointerCapture?.(event.pointerId);
       }
-      syncActive();
+      syncActive(event.type !== "pointerup");
     };
     const onWheel = (event) => {
       if (!optionsRef.current.wheel) {
@@ -3706,19 +3820,21 @@ function MouseControls({
       }
       controlsRef.current?.applyViewDelta(
         { fov: delta },
-        { recordVelocity: true, source: "mouse" }
+        { source: "mouse" }
       );
     };
     element.addEventListener("pointerdown", onPointerDown);
     element.addEventListener("pointermove", onPointerMove);
     element.addEventListener("pointerup", releasePointer);
     element.addEventListener("pointercancel", releasePointer);
+    element.addEventListener("lostpointercapture", 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("lostpointercapture", releasePointer);
       element.removeEventListener("wheel", onWheel);
       clearPointers();
     };
@@ -3901,7 +4017,7 @@ import {
   useContext as useContext8,
   useEffect as useEffect7,
   useId,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo3,
   useRef as useRef7,
   useState as useState2
@@ -4204,7 +4320,7 @@ function PositionedMenuShell({
       viewport?.removeEventListener("resize", refresh);
     };
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const shell = shellRef.current;
     if (!overlayElement || !shell) {
       return;
@@ -4363,6 +4479,7 @@ function PanoContextMenu({
   const openMenu = useCallback2(
     (event) => {
       event.nativeEvent.preventDefault();
+      if (controlsRef.current?.isInteractionLocked()) return;
       const view = controlsRef.current?.getView() ?? {
         yaw: 0,
         pitch: 0,
@@ -5023,9 +5140,142 @@ function PanoEvents(props) {
   return null;
 }
 
+// src/overlay/modal-host.ts
+function createPanoModalHost() {
+  const leases = /* @__PURE__ */ new Set();
+  const listeners = /* @__PURE__ */ new Set();
+  let runtime = null;
+  let releaseRuntime;
+  const syncRuntime = () => {
+    if (leases.size > 0 && runtime) {
+      releaseRuntime ?? (releaseRuntime = runtime.acquireInteractionLock());
+    } else {
+      releaseRuntime?.();
+      releaseRuntime = void 0;
+    }
+  };
+  const notify2 = () => {
+    syncRuntime();
+    for (const listener of listeners) listener();
+  };
+  return {
+    getSnapshot: () => leases.size > 0,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    connect(next) {
+      if (runtime === next) return;
+      releaseRuntime?.();
+      releaseRuntime = void 0;
+      runtime = next;
+      syncRuntime();
+    },
+    acquire() {
+      const token = /* @__PURE__ */ Symbol();
+      leases.add(token);
+      notify2();
+      return () => {
+        if (leases.delete(token)) notify2();
+      };
+    }
+  };
+}
+
+// src/overlay/pano-overlay.tsx
+import {
+  createContext as createContext11,
+  useContext as useContext11,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo5,
+  useState as useState3
+} from "react";
+
+// src/overlay/visible-rect.ts
+function getOverlayVisibleRect(rect, viewport) {
+  const left = Math.min(rect.width, Math.max(0, viewport.left - rect.left));
+  const top = Math.min(rect.height, Math.max(0, viewport.top - rect.top));
+  const right = Math.min(rect.width, Math.max(0, viewport.left + viewport.width - rect.left));
+  const bottom = Math.min(rect.height, Math.max(0, viewport.top + viewport.height - rect.top));
+  return { left, top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
+}
+
+// src/overlay/pano-overlay.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PanoOverlayContext = createContext11(null);
+var PanoModalHostContext = createContext11(null);
+function usePanoOverlay() {
+  const context = useContext11(PanoOverlayContext);
+  if (!context) throw new Error("usePanoOverlay must be used inside PanoViewer.renderOverlay.");
+  return context;
+}
+function usePanoModal(open) {
+  const host = useContext11(PanoModalHostContext);
+  if (!host) throw new Error("usePanoModal must be used inside PanoViewer.renderOverlay.");
+  useLayoutEffect3(() => open ? host.acquire() : void 0, [host, open]);
+}
+function PanoOverlayPortalProvider({
+  container,
+  children
+}) {
+  const context = usePanoOverlay();
+  const value = useMemo5(() => ({ ...context, portalContainer: container }), [context, container]);
+  return /* @__PURE__ */ jsx4(PanoOverlayContext.Provider, { value, children });
+}
+function usePanoOverlayHost(isFullscreen) {
+  const [portalContainer, setPortalContainer] = useState3(null);
+  const [geometry, setGeometry] = useState3({
+    size: { width: 0, height: 0 },
+    visibleRect: { left: 0, top: 0, width: 0, height: 0 }
+  });
+  useLayoutEffect3(() => {
+    if (!portalContainer) return;
+    const win = portalContainer.ownerDocument.defaultView;
+    if (!win) return;
+    const measure = () => {
+      const width = portalContainer.clientWidth;
+      const height = portalContainer.clientHeight;
+      const visual = win.visualViewport;
+      const visibleRect = getOverlayVisibleRect(portalContainer.getBoundingClientRect(), {
+        left: visual?.offsetLeft ?? 0,
+        top: visual?.offsetTop ?? 0,
+        width: visual?.width ?? win.innerWidth,
+        height: visual?.height ?? win.innerHeight
+      });
+      setGeometry((previous) => previous.size.width === width && previous.size.height === height && visibleRect.left === previous.visibleRect.left && visibleRect.top === previous.visibleRect.top && visibleRect.width === previous.visibleRect.width && visibleRect.height === previous.visibleRect.height ? previous : { size: { width, height }, visibleRect });
+    };
+    let frame = 0;
+    const scheduleMeasure = () => {
+      if (!frame) frame = win.requestAnimationFrame(() => {
+        frame = 0;
+        measure();
+      });
+    };
+    measure();
+    const observer = new ResizeObserver(scheduleMeasure);
+    observer.observe(portalContainer);
+    win.addEventListener("scroll", scheduleMeasure, true);
+    win.addEventListener("resize", scheduleMeasure);
+    win.visualViewport?.addEventListener("resize", scheduleMeasure);
+    win.visualViewport?.addEventListener("scroll", scheduleMeasure);
+    return () => {
+      observer.disconnect();
+      win.cancelAnimationFrame(frame);
+      win.removeEventListener("scroll", scheduleMeasure, true);
+      win.removeEventListener("resize", scheduleMeasure);
+      win.visualViewport?.removeEventListener("resize", scheduleMeasure);
+      win.visualViewport?.removeEventListener("scroll", scheduleMeasure);
+    };
+  }, [portalContainer]);
+  const context = useMemo5(() => ({ portalContainer, ...geometry, isFullscreen }), [portalContainer, geometry, isFullscreen]);
+  return { context, setPortalContainer };
+}
+
 // src/panorama-event-surface.tsx
 import { useThree as useThree6 } from "@react-three/fiber";
-import { useContext as useContext11, useEffect as useEffect10 } from "react";
+import { useContext as useContext12, useEffect as useEffect10 } from "react";
 import { BackSide, Raycaster, Vector2, Vector3 as Vector32 } from "three";
 
 // src/hotspot/coordinates.ts
@@ -5103,7 +5353,7 @@ var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
 var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
 
 // src/panorama-event-surface.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -5118,7 +5368,7 @@ function makePanoramaPointerEvent(event) {
   };
 }
 function PanoramaEventSurface() {
-  const eventBus = useContext11(PanoEventBusContext);
+  const eventBus = useContext12(PanoEventBusContext);
   const { camera, gl } = useThree6();
   useEffect10(() => {
     if (!eventBus) {
@@ -5171,8 +5421,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ jsx4("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ jsx5(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -5189,8 +5439,8 @@ function PanoramaEventSurface() {
 }
 
 // src/scenes-host.ts
-import { createContext as createContext11 } from "react";
-var ScenesHostContext = createContext11(null);
+import { createContext as createContext12 } from "react";
+var ScenesHostContext = createContext12(null);
 function createScenesHost() {
   return {
     controller: null,
@@ -5207,7 +5457,7 @@ function notifyScenesHost(host) {
 
 // src/touch-controls.tsx
 import { useThree as useThree7 } from "@react-three/fiber";
-import { useContext as useContext12, useEffect as useEffect11, useRef as useRef10 } from "react";
+import { useContext as useContext13, useEffect as useEffect11, useRef as useRef10 } from "react";
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
@@ -5222,7 +5472,7 @@ function TouchControls({
   pinchZoom = true
 }) {
   useClaimControlChannel("touch");
-  const controlsRef = useContext12(PanoramaViewContext);
+  const controlsRef = useContext13(PanoramaViewContext);
   const { gl } = useThree7();
   const pointersRef = useRef10(/* @__PURE__ */ new Map());
   const pinchDistanceRef = useRef10(null);
@@ -5241,16 +5491,17 @@ function TouchControls({
       }
       pointersRef.current.clear();
       pinchDistanceRef.current = null;
-      controlsRef.current?.setPointerActive("touch", false);
+      controlsRef.current?.setPointerActive("touch", false, { cancelled: true });
     };
     if (!enabled) {
       clearPointers();
       return;
     }
-    const syncActive = () => {
+    const syncActive = (cancelled = false) => {
       controlsRef.current?.setPointerActive(
         "touch",
-        pointersRef.current.size > 0
+        pointersRef.current.size > 0,
+        { cancelled }
       );
     };
     const onPointerDown = (event) => {
@@ -5335,17 +5586,19 @@ function TouchControls({
       if (pointersRef.current.size < 2) {
         pinchDistanceRef.current = null;
       }
-      syncActive();
+      syncActive(event.type !== "pointerup");
     };
     element.addEventListener("pointerdown", onPointerDown);
     element.addEventListener("pointermove", onPointerMove);
     element.addEventListener("pointerup", releasePointer);
     element.addEventListener("pointercancel", releasePointer);
+    element.addEventListener("lostpointercapture", releasePointer);
     return () => {
       element.removeEventListener("pointerdown", onPointerDown);
       element.removeEventListener("pointermove", onPointerMove);
       element.removeEventListener("pointerup", releasePointer);
       element.removeEventListener("pointercancel", releasePointer);
+      element.removeEventListener("lostpointercapture", releasePointer);
       clearPointers();
     };
   }, [controlsRef, enabled, gl]);
@@ -5353,21 +5606,21 @@ function TouchControls({
 }
 
 // src/video/chrome-overlay.tsx
-import { createContext as createContext12, useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PanoChromeOverlayContext = createContext12(null);
+import { createContext as createContext13, useCallback as useCallback4, useMemo as useMemo6, useState as useState4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PanoChromeOverlayContext = createContext13(null);
 function usePanoChromeOverlay() {
-  const [overlayElement, setOverlayElement] = useState3(
+  const [overlayElement, setOverlayElement] = useState4(
     null
   );
   const setOverlayNode = useCallback4((node) => {
     setOverlayElement(node);
   }, []);
-  const api = useMemo5(
+  const api = useMemo6(
     () => ({ overlayElement }),
     [overlayElement]
   );
-  const overlay = /* @__PURE__ */ jsx5(
+  const overlay = /* @__PURE__ */ jsx6(
     "div",
     {
       className: "pano-chrome-overlay",
@@ -5379,9 +5632,9 @@ function usePanoChromeOverlay() {
 }
 
 // src/video/host.ts
-import { createContext as createContext13, useContext as useContext13 } from "react";
-var PanoVideoHostContext = createContext13(null);
-var DefaultPanoVideoControlsContext = createContext13(false);
+import { createContext as createContext14, useContext as useContext14 } from "react";
+var PanoVideoHostContext = createContext14(null);
+var DefaultPanoVideoControlsContext = createContext14(false);
 function createPanoVideoHost() {
   return {
     controller: null,
@@ -5426,8 +5679,8 @@ function isProduction3() {
   return nodeEnv === "production";
 }
 function useClaimPanoVideoControls() {
-  const host = useContext13(PanoVideoHostContext);
-  const isDefault = useContext13(DefaultPanoVideoControlsContext);
+  const host = useContext14(PanoVideoHostContext);
+  const isDefault = useContext14(DefaultPanoVideoControlsContext);
   if (!host || isDefault) {
     return;
   }
@@ -5444,7 +5697,7 @@ import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 
 // src/video/pano-video-captions.tsx
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
   background: "rgba(0, 0, 0, 0.55)",
@@ -5492,13 +5745,13 @@ function PanoVideoCaptionsOverlay({
     textShadow: snapshot.captionAppearance.textShadow,
     whiteSpace: "pre-wrap"
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: "pano-video-captions",
       "data-pano-video-captions": "",
       style: wrapperStyle,
-      children: /* @__PURE__ */ jsx6("div", { style: textStyle, children: snapshot.captionText })
+      children: /* @__PURE__ */ jsx7("div", { style: textStyle, children: snapshot.captionText })
     }
   );
 }
@@ -5511,12 +5764,12 @@ function PanoVideoCaptions({
 // src/video/pano-video-controls.tsx
 import {
   useCallback as useCallback5,
-  useContext as useContext14,
+  useContext as useContext15,
   useEffect as useEffect12,
   useId as useId2,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef11,
-  useState as useState4,
+  useState as useState5,
   useSyncExternalStore as useSyncExternalStore3
 } from "react";
 
@@ -5650,7 +5903,7 @@ function cueText(cue) {
 }
 
 // src/video/pano-video-controls.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE = {
   background: "rgba(16, 16, 16, 0.88)",
   color: "#f4f4f4",
@@ -5711,7 +5964,7 @@ function volumeFromClientY(clientY, track) {
   return Math.max(0, Math.min(1, (rect.bottom - clientY) / rect.height));
 }
 function Icon({ path }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       "aria-hidden": true,
@@ -5723,7 +5976,7 @@ function Icon({ path }) {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "16",
-      children: /* @__PURE__ */ jsx7("path", { d: path })
+      children: /* @__PURE__ */ jsx8("path", { d: path })
     }
   );
 }
@@ -5735,7 +5988,7 @@ function ChromeButton({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       "aria-label": label,
@@ -5761,14 +6014,14 @@ function ChromeMenu({
   labelledBy,
   items
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: items.map((item) => /* @__PURE__ */ jsx7(
+      children: items.map((item) => /* @__PURE__ */ jsx8(
         ChromeMenuRadioItem,
         {
           active: item.active,
@@ -5788,7 +6041,7 @@ function ChromeMenuSurface({
   labelledBy,
   role
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "aria-labelledby": labelledBy,
@@ -5812,7 +6065,7 @@ function ChromeMenuRadioItem({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       "aria-checked": active,
@@ -5852,7 +6105,7 @@ function ChromeMenuActionItem({
       },
       type: "button",
       children: [
-        /* @__PURE__ */ jsx7("span", { children: label }),
+        /* @__PURE__ */ jsx8("span", { children: label }),
         secondary
       ]
     }
@@ -5861,10 +6114,10 @@ function ChromeMenuActionItem({
 function ChromeMenuSectionLabel({
   children
 }) {
-  return /* @__PURE__ */ jsx7("div", { className: "pano-video-chrome-menu-label", children });
+  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-label", children });
 }
 function ChromeMenuDivider() {
-  return /* @__PURE__ */ jsx7("div", { className: "pano-video-chrome-menu-divider" });
+  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-divider" });
 }
 function CaptionsMenu({
   appearance,
@@ -5877,7 +6130,7 @@ function CaptionsMenu({
   panel,
   snapshot
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ChromeMenuSurface,
     {
       appearance,
@@ -5886,7 +6139,7 @@ function CaptionsMenu({
       role: "menu",
       children: panel === "tracks" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
         /* @__PURE__ */ jsxs3("div", { className: "pano-video-chrome-menu-list", children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             ChromeMenuRadioItem,
             {
               active: snapshot.trackId === null,
@@ -5899,7 +6152,7 @@ function CaptionsMenu({
           ),
           snapshot.tracks.map((track) => {
             const trackItemId = panoVideoTrackId(track);
-            return /* @__PURE__ */ jsx7(
+            return /* @__PURE__ */ jsx8(
               ChromeMenuRadioItem,
               {
                 active: snapshot.trackId === trackItemId,
@@ -5913,29 +6166,29 @@ function CaptionsMenu({
             );
           })
         ] }),
-        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx8(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Settings",
             onClick: onOpenSettings,
-            secondary: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u203A" })
+            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u203A" })
           }
         )
       ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Back",
             onClick: onShowTracks,
-            secondary: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u2039" })
+            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u2039" })
           }
         ),
-        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx7(ChromeMenuSectionLabel, { children: "Font size" }),
-        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Font size" }),
+        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
           ChromeMenuRadioItem,
           {
             active: Number(snapshot.captionAppearance.fontSize) === option.value,
@@ -5947,9 +6200,9 @@ function CaptionsMenu({
           },
           option.id
         )),
-        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx7(ChromeMenuSectionLabel, { children: "Background" }),
-        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Background" }),
+        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
           ChromeMenuRadioItem,
           {
             active: snapshot.captionAppearance.background === option.value,
@@ -6004,7 +6257,7 @@ function VerticalVolumeSlider({
         pointerEvents: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "span",
           {
             "aria-hidden": true,
@@ -6016,7 +6269,7 @@ function VerticalVolumeSlider({
             children: percentLabel
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -6056,7 +6309,7 @@ function VerticalVolumeSlider({
                 },
                 tabIndex: 0,
                 children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "div",
                     {
                       style: {
@@ -6071,7 +6324,7 @@ function VerticalVolumeSlider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "div",
                     {
                       style: {
@@ -6107,7 +6360,7 @@ function VolumeControl({
   volumeAdjustable
 }) {
   const rootRef = useRef11(null);
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
   const displayVolume = muted ? 0 : volume;
   const mutedOrSilent = muted || volume === 0;
   useEffect12(() => {
@@ -6130,13 +6383,13 @@ function VolumeControl({
     };
   }, [open, volumeAdjustable]);
   if (!volumeAdjustable) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       ChromeButton,
       {
         appearance,
         label: mutedOrSilent ? "Unmute" : "Mute",
         onClick: onToggleMuted,
-        children: mutedOrSilent ? /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+        children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
       }
     );
   }
@@ -6168,7 +6421,7 @@ function VolumeControl({
       },
       ref: rootRef,
       children: [
-        open ? /* @__PURE__ */ jsx7(
+        open ? /* @__PURE__ */ jsx8(
           VerticalVolumeSlider,
           {
             appearance,
@@ -6176,7 +6429,7 @@ function VolumeControl({
             volume: displayVolume
           }
         ) : null,
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           ChromeButton,
           {
             appearance,
@@ -6187,7 +6440,7 @@ function VolumeControl({
               }
               onToggleMuted();
             },
-            children: mutedOrSilent ? /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+            children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
           }
         )
       ]
@@ -6200,7 +6453,7 @@ function PanoVideoControlsHud({
   fullscreen,
   overlayElement
 }) {
-  const resolved = useMemo6(
+  const resolved = useMemo7(
     () => resolveControlsAppearance(appearance),
     [appearance]
   );
@@ -6209,11 +6462,11 @@ function PanoVideoControlsHud({
     controller.getSnapshot,
     controller.getSnapshot
   );
-  const [menu, setMenu] = useState4(null);
-  const [captionsPanel, setCaptionsPanel] = useState4("tracks");
-  const [visible, setVisible] = useState4(true);
-  const [volumeOpen, setVolumeOpen] = useState4(false);
-  const [overlayWidth, setOverlayWidth] = useState4(
+  const [menu, setMenu] = useState5(null);
+  const [captionsPanel, setCaptionsPanel] = useState5("tracks");
+  const [visible, setVisible] = useState5(true);
+  const [volumeOpen, setVolumeOpen] = useState5(false);
+  const [overlayWidth, setOverlayWidth] = useState5(
     () => overlayElement.clientWidth
   );
   const idleTimerRef = useRef11(0);
@@ -6347,7 +6600,7 @@ function PanoVideoControlsHud({
   let menuNode = null;
   switch (menu) {
     case "rate":
-      menuNode = /* @__PURE__ */ jsx7(
+      menuNode = /* @__PURE__ */ jsx8(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6366,7 +6619,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "variant":
-      menuNode = /* @__PURE__ */ jsx7(
+      menuNode = /* @__PURE__ */ jsx8(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6385,7 +6638,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "captions":
-      menuNode = /* @__PURE__ */ jsx7(
+      menuNode = /* @__PURE__ */ jsx8(
         CaptionsMenu,
         {
           appearance: resolved,
@@ -6409,7 +6662,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "more":
-      menuNode = /* @__PURE__ */ jsx7(
+      menuNode = /* @__PURE__ */ jsx8(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6477,7 +6730,7 @@ function PanoVideoControlsHud({
   };
   const rateButton = /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
     !compact && menu === "rate" ? menuNode : null,
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       ChromeButton,
       {
         appearance: resolved,
@@ -6485,13 +6738,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("rate");
         },
-        children: /* @__PURE__ */ jsx7("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
+        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
       }
     )
   ] });
   const variantButton = canSwitchVariant ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
     !compact && menu === "variant" ? menuNode : null,
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       ChromeButton,
       {
         appearance: resolved,
@@ -6499,13 +6752,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("variant");
         },
-        children: /* @__PURE__ */ jsx7("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
+        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
       }
     )
   ] }) : null;
   const captionsButton = showCaptionsMenu ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
     !compact && menu === "captions" ? menuNode : null,
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       ChromeButton,
       {
         appearance: resolved,
@@ -6513,7 +6766,7 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("captions");
         },
-        children: /* @__PURE__ */ jsx7("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx7(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
+        children: /* @__PURE__ */ jsx8("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx8(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
       }
     )
   ] }) : null;
@@ -6524,7 +6777,7 @@ function PanoVideoControlsHud({
       "data-pano-video-controls": "",
       style: barStyle,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           ChromeButton,
           {
             appearance: resolved,
@@ -6532,11 +6785,11 @@ function PanoVideoControlsHud({
             onClick: () => {
               controller.togglePlay();
             },
-            children: snapshot.playing ? /* @__PURE__ */ jsx7(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx7(Icon, { path: "M5 3.2v9.6L13 8z" })
+            children: snapshot.playing ? /* @__PURE__ */ jsx8(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx8(Icon, { path: "M5 3.2v9.6L13 8z" })
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx7("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
-        /* @__PURE__ */ jsx7(
+        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
+        /* @__PURE__ */ jsx8(
           "input",
           {
             "aria-label": "Seek",
@@ -6558,8 +6811,8 @@ function PanoVideoControlsHud({
             value: duration > 0 ? snapshot.currentTime : 0
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx7("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ jsx7(
+        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
+        /* @__PURE__ */ jsx8(
           VolumeControl,
           {
             appearance: resolved,
@@ -6577,7 +6830,7 @@ function PanoVideoControlsHud({
         ),
         compact ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
           menu !== null ? menuNode : null,
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             ChromeButton,
             {
               appearance: resolved,
@@ -6586,7 +6839,7 @@ function PanoVideoControlsHud({
               onClick: () => {
                 toggleMenu("more");
               },
-              children: /* @__PURE__ */ jsx7(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
+              children: /* @__PURE__ */ jsx8(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
             }
           )
         ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -6594,7 +6847,7 @@ function PanoVideoControlsHud({
           variantButton,
           captionsButton
         ] }),
-        showFullscreen ? /* @__PURE__ */ jsx7(
+        showFullscreen ? /* @__PURE__ */ jsx8(
           ChromeButton,
           {
             appearance: resolved,
@@ -6602,7 +6855,7 @@ function PanoVideoControlsHud({
             onClick: () => {
               fullscreen?.toggleFullscreen();
             },
-            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx7(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
+            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx8(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
           }
         ) : null
       ]
@@ -6611,7 +6864,7 @@ function PanoVideoControlsHud({
 }
 function PanoVideoControls({ appearance }) {
   useClaimPanoVideoControls();
-  const host = useContext14(PanoVideoHostContext);
+  const host = useContext15(PanoVideoHostContext);
   if (host && appearance) {
     host.controls = appearance;
   }
@@ -6619,7 +6872,7 @@ function PanoVideoControls({ appearance }) {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function PanoVideoChromeBridge({
   fullscreen,
   host,
@@ -6635,7 +6888,7 @@ function PanoVideoChromeBridge({
   }
   const showDefaultControls = host.controller !== null && host.controls !== false && host.controlClaims === 0;
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    showDefaultControls ? /* @__PURE__ */ jsx8(
+    showDefaultControls ? /* @__PURE__ */ jsx9(
       PanoVideoControlsHud,
       {
         appearance: typeof host.controls === "object" ? host.controls : void 0,
@@ -6644,7 +6897,7 @@ function PanoVideoChromeBridge({
         overlayElement
       }
     ) : null,
-    host.captions !== false && host.controller ? /* @__PURE__ */ jsx8(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
+    host.captions !== false && host.controller ? /* @__PURE__ */ jsx9(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
   ] });
 }
 
@@ -6652,8 +6905,8 @@ function PanoVideoChromeBridge({
 import { useSyncExternalStore as useSyncExternalStore5 } from "react";
 
 // src/webvr/host.ts
-import { createContext as createContext14 } from "react";
-var WebVRRuntimeContext = createContext14(null);
+import { createContext as createContext15 } from "react";
+var WebVRRuntimeContext = createContext15(null);
 function createWebVRHost() {
   return {
     controller: null,
@@ -6797,7 +7050,7 @@ function clamp2(value, min, max) {
 }
 
 // src/webvr/chrome.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -6809,7 +7062,7 @@ function ChromeButton2({
   children,
   onClick
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       className: "pano-webvr-button",
@@ -6854,11 +7107,11 @@ function SetupPanel({
       role: "dialog",
       style: panelStyle,
       children: [
-        /* @__PURE__ */ jsx9("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
+        /* @__PURE__ */ jsx10("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
         /* @__PURE__ */ jsxs5("label", { className: "pano-webvr-setup-field", children: [
           "Screen size (inch)",
           /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 "aria-label": "Decrease screen size",
@@ -6870,8 +7123,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx9("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 "aria-label": "Increase screen size",
@@ -6886,9 +7139,9 @@ function SetupPanel({
           ] })
         ] }),
         /* @__PURE__ */ jsxs5("fieldset", { className: "pano-webvr-setup-fieldset", children: [
-          /* @__PURE__ */ jsx9("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
+          /* @__PURE__ */ jsx10("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
           /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 "aria-label": "Previous headset preset",
@@ -6898,8 +7151,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx9("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 "aria-label": "Next headset preset",
@@ -6911,7 +7164,7 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ChromeButton2,
           {
             appearance,
@@ -6935,8 +7188,8 @@ function WebVRChromeBridge({ host }) {
   }
   const appearance = resolveAppearance(chrome);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx9("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
-      mode !== "webxr" ? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
+      mode !== "webxr" ? /* @__PURE__ */ jsx10(
         ChromeButton2,
         {
           appearance,
@@ -6944,7 +7197,7 @@ function WebVRChromeBridge({ host }) {
           children: "VR Setup"
         }
       ) : null,
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         ChromeButton2,
         {
           appearance,
@@ -6952,7 +7205,7 @@ function WebVRChromeBridge({ host }) {
           children: "Exit VR"
         }
       )
-    ] }) : /* @__PURE__ */ jsx9(
+    ] }) : /* @__PURE__ */ jsx10(
       ChromeButton2,
       {
         appearance,
@@ -6960,7 +7213,7 @@ function WebVRChromeBridge({ host }) {
         children: available ? "Enter VR" : "VR unavailable"
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ jsx9(
+    mode === "fake" ? /* @__PURE__ */ jsx10(
       "p",
       {
         className: "pano-webvr-hint",
@@ -6968,7 +7221,7 @@ function WebVRChromeBridge({ host }) {
         children: "Simulated VR Mode \xB7 Click the view to lock the mouse, then move to look around. Use a headset or phone for real VR."
       }
     ) : null,
-    setupOpen ? /* @__PURE__ */ jsx9(
+    setupOpen ? /* @__PURE__ */ jsx10(
       SetupPanel,
       {
         appearance,
@@ -7010,7 +7263,7 @@ import { useFrame as useFrame5, useThree as useThree8 } from "@react-three/fiber
 import { useXR as useXR2, XROrigin } from "@react-three/xr";
 import { useRef as useRef12 } from "react";
 import { Vector3 as Vector34 } from "three";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function PanoramaXROrigin() {
   const originRef = useRef12(null);
   const localHeadPositionRef = useRef12(new Vector34());
@@ -7026,11 +7279,11 @@ function PanoramaXROrigin() {
     origin.position.copy(localHeadPositionRef.current).multiplyScalar(-1);
     origin.updateMatrixWorld();
   }, -100);
-  return /* @__PURE__ */ jsx10(XROrigin, { ref: originRef });
+  return /* @__PURE__ */ jsx11(XROrigin, { ref: originRef });
 }
 
 // src/pano-viewer.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -7075,10 +7328,10 @@ function PanoCursorTree({
   if (!cursors) {
     return children;
   }
-  return /* @__PURE__ */ jsx11(PanoCursorController, { cursors, children });
+  return /* @__PURE__ */ jsx12(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
-  const host = useContext15(PanoVideoHostContext);
+  const host = useContext16(PanoVideoHostContext);
   if (host) {
     host.controlClaims = 0;
   }
@@ -7091,14 +7344,14 @@ function DefaultControlChannels({
   keyboardChannel,
   fovSpeed
 }) {
-  const claims = useContext15(ControlClaimsContext);
+  const claims = useContext16(ControlClaimsContext);
   if (!claims) {
     return null;
   }
   return /* @__PURE__ */ jsxs6(DefaultControlChannelContext.Provider, { value: true, children: [
-    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx11(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
-    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx11(TouchControls, { ...touchChannel.props }) : null,
-    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx11(
+    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx12(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
+    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx12(TouchControls, { ...touchChannel.props }) : null,
+    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx12(
       KeyboardControls,
       {
         ...keyboardChannel.props,
@@ -7110,7 +7363,9 @@ function DefaultControlChannels({
 var PanoViewer = forwardRef2(
   function PanoViewer2({
     children,
+    renderOverlay,
     initialView,
+    viewLimits,
     minFov = 30,
     maxFov = 100,
     controls = true,
@@ -7128,18 +7383,24 @@ var PanoViewer = forwardRef2(
   }, ref) {
     const rootRef = useRef13(null);
     const controlsRef = useRef13(null);
-    const eventBus = useMemo7(() => createPanoEventBus(), []);
+    const modalHost = useMemo8(() => createPanoModalHost(), []);
+    const modalOpen = useSyncExternalStore6(modalHost.subscribe, modalHost.getSnapshot, () => false);
+    const setControlsRuntime = useCallback6((runtime) => {
+      controlsRef.current = runtime;
+      modalHost.connect(runtime);
+    }, [modalHost]);
+    const eventBus = useMemo8(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
-    const hotspotTargetRegistry = useMemo7(() => createHotspotTargetRegistry(), []);
+    const hotspotTargetRegistry = useMemo8(() => createHotspotTargetRegistry(), []);
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
     const { api: chromeOverlayApi, setOverlayNode, overlayElement } = usePanoChromeOverlay();
-    const videoHost = useMemo7(() => createPanoVideoHost(), []);
-    const filterHost = useMemo7(() => createPanoFilterHost(), []);
-    const webVRHost = useMemo7(() => createWebVRHost(), []);
-    const scenesHost = useMemo7(() => createScenesHost(), []);
-    const bgmHost = useMemo7(() => createBackgroundAudioHost(), []);
-    const mediaActivationHost = useMemo7(() => createPanoMediaActivationHost(), []);
-    const mediaActivationOptions = useMemo7(
+    const videoHost = useMemo8(() => createPanoVideoHost(), []);
+    const filterHost = useMemo8(() => createPanoFilterHost(), []);
+    const webVRHost = useMemo8(() => createWebVRHost(), []);
+    const scenesHost = useMemo8(() => createScenesHost(), []);
+    const bgmHost = useMemo8(() => createBackgroundAudioHost(), []);
+    const mediaActivationHost = useMemo8(() => createPanoMediaActivationHost(), []);
+    const mediaActivationOptions = useMemo8(
       () => mediaActivation === false ? null : mediaActivation ?? {},
       [mediaActivation]
     );
@@ -7148,9 +7409,9 @@ var PanoViewer = forwardRef2(
       () => getPanoMediaActivationRevision(mediaActivationHost),
       () => getPanoMediaActivationRevision(mediaActivationHost)
     );
-    const [mediaActivated, setMediaActivated] = useState5(false);
-    const stereoView = useMemo7(() => createWebVRStereoView(), []);
-    const xrStore = useMemo7(
+    const [mediaActivated, setMediaActivated] = useState6(false);
+    const stereoView = useMemo8(() => createWebVRStereoView(), []);
+    const xrStore = useMemo8(
       () => createXRStore({
         anchors: false,
         bodyTracking: false,
@@ -7166,7 +7427,7 @@ var PanoViewer = forwardRef2(
       }),
       []
     );
-    const mediaActivationControls = useMemo7(
+    const mediaActivationControls = useMemo8(
       () => ({
         resumeAudio: () => resumePanoAudio(),
         playVideo: async ({ unmute = false } = {}) => {
@@ -7269,34 +7530,33 @@ var PanoViewer = forwardRef2(
       shouldActivateMedia,
       videoHost
     ]);
+    const limitsKey = JSON.stringify(viewLimits);
+    const parsedLimits = useMemo8(() => parseViewLimits(viewLimits), [limitsKey]);
     const fallbackViewRef = useRef13(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
       Math.max(maxFov, normalizedMinFov + 1)
     );
-    const normalizedInitialView = useMemo7(
+    const normalizedInitialView = useMemo8(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
         pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
-        fov: Math.max(
-          normalizedMinFov,
-          Math.min(initialView?.fov ?? DEFAULT_VIEW.fov, normalizedMaxFov)
-        )
+        // The runtime applies the effective scene/viewer range, including FOVs
+        // outside the legacy minFov/maxFov defaults.
+        fov: initialView?.fov ?? DEFAULT_VIEW.fov
       }),
       [
         initialView?.fov,
         initialView?.pitch,
-        initialView?.yaw,
-        normalizedMaxFov,
-        normalizedMinFov
+        initialView?.yaw
       ]
     );
     fallbackViewRef.current = normalizedInitialView;
-    const controlClaims = useMemo7(() => createControlClaims(), []);
+    const controlClaims = useMemo8(() => createControlClaims(), []);
     resetControlClaims(controlClaims);
     const controlsEnabled = controls !== false;
-    const controlOptions = useMemo7(
+    const controlOptions = useMemo8(
       () => typeof controls === "object" ? controls : {},
       [controls]
     );
@@ -7304,7 +7564,7 @@ var PanoViewer = forwardRef2(
     const allModeInvert = controlOptions.invert === true;
     const topRotateSpeed = controlOptions.rotateSpeed ?? DEFAULT_POINTER_ROTATE_SPEED;
     const topZoomSpeed = controlOptions.zoomSpeed ?? DEFAULT_MOUSE_ZOOM_SPEED;
-    const mouseChannel = useMemo7(
+    const mouseChannel = useMemo8(
       () => resolveChannel(controlOptions.mouse, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -7320,7 +7580,7 @@ var PanoViewer = forwardRef2(
         topZoomSpeed
       ]
     );
-    const touchChannel = useMemo7(
+    const touchChannel = useMemo8(
       () => resolveChannel(controlOptions.touch, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -7329,7 +7589,7 @@ var PanoViewer = forwardRef2(
       }),
       [allModeInvert, controlOptions.touch, topRotateSpeed]
     );
-    const keyboardChannel = useMemo7(
+    const keyboardChannel = useMemo8(
       () => resolveChannel(controlOptions.keyboard, {
         enabled: true
       }),
@@ -7371,7 +7631,11 @@ var PanoViewer = forwardRef2(
       }
       await requestElementFullscreen(root);
     }, []);
-    const [isViewerFullscreen, setIsViewerFullscreen] = useState5(false);
+    const [isViewerFullscreen, setIsViewerFullscreen] = useState6(false);
+    const { context: overlayContext, setPortalContainer } = usePanoOverlayHost(isViewerFullscreen);
+    useEffect13(() => {
+      if (modalOpen) contextMenuOverlayApi.setSession(null);
+    }, [contextMenuOverlayApi, modalOpen]);
     useEffect13(() => {
       if (typeof document === "undefined") {
         return;
@@ -7403,7 +7667,7 @@ var PanoViewer = forwardRef2(
         root.removeEventListener("contextmenu", suppressNativeContextMenu, true);
       };
     }, []);
-    const contextMenuActions = useMemo7(
+    const contextMenuActions = useMemo8(
       () => ({
         reset: () => {
           controlsRef.current?.reset();
@@ -7415,16 +7679,16 @@ var PanoViewer = forwardRef2(
       }),
       [isViewerFullscreen, toggleFullscreen]
     );
-    const contextMenuChannel = useMemo7(
+    const contextMenuChannel = useMemo8(
       () => resolveContextMenuChannel(contextMenu),
       [contextMenu]
     );
-    const resolvedCursors = useMemo7(
+    const resolvedCursors = useMemo8(
       () => resolvePanoCursors(cursors),
       [cursors]
     );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = useState5(
+    const [legacyAutoRotate, setLegacyAutoRotate] = useState6(
       legacyAutoRotateOptions.autoRotate ?? false
     );
     useEffect13(() => {
@@ -7513,7 +7777,7 @@ var PanoViewer = forwardRef2(
         webVRHost
       ]
     );
-    const rootStyle = useMemo7(
+    const rootStyle = useMemo8(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -7531,118 +7795,130 @@ var PanoViewer = forwardRef2(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ jsx11(
-            Canvas,
-            {
-              "aria-label": `${ariaLabel} canvas`,
-              resize: { debounce: 0 },
-              camera: {
-                far: DEFAULT_PANORAMA_CAMERA_FAR,
-                fov: normalizedInitialView.fov,
-                near: DEFAULT_PANORAMA_CAMERA_NEAR,
-                position: [0, 0, 0.01]
-              },
-              dpr,
-              gl: {
-                // Hotspots contain transparent textures and curved outlines. Keep
-                // the canvas multisampled so their visible edges are smoothed.
-                antialias: true,
-                powerPreference: "high-performance",
-                stencil: false
-              },
-              style: {
-                ...DEFAULT_CANVAS_STYLE,
-                touchAction: userControlsEnabled ? "none" : "auto"
-              },
-              children: /* @__PURE__ */ jsx11(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
-                WebVRRuntimeContext.Provider,
-                {
-                  value: { host: webVRHost, xrStore, stereoView },
-                  children: [
-                    /* @__PURE__ */ jsx11(PanoramaXROrigin, {}),
-                    /* @__PURE__ */ jsx11(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx11(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ jsx11(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx11(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx11(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx11(
-                      PanoContextMenuOverlayContext.Provider,
-                      {
-                        value: contextMenuOverlayApi,
-                        children: /* @__PURE__ */ jsx11(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx11(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx11(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx11(
-                          PanoContextMenuActionsContext.Provider,
-                          {
-                            value: contextMenuActions,
-                            children: /* @__PURE__ */ jsx11(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx11(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs6(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
-                              /* @__PURE__ */ jsx11(PanoVideoHostReset, {}),
-                              /* @__PURE__ */ jsx11(
-                                PanoramaViewRuntime,
-                                {
-                                  ref: controlsRef,
-                                  eventBus,
-                                  initialView: normalizedInitialView,
-                                  maxFov: normalizedMaxFov,
-                                  minFov: normalizedMinFov,
-                                  options: controlOptions
-                                }
-                              ),
-                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx11(
-                                PanoEvents,
-                                {
-                                  onViewChange,
-                                  onClick: onPanoramaClick,
-                                  onDoubleClick: onPanoramaDoubleClick,
-                                  onPointerMove: onPanoramaPointerMove
-                                }
-                              ),
-                              /* @__PURE__ */ jsx11(
-                                AutoRotate,
-                                {
-                                  enabled: legacyAutoRotate,
-                                  speed: legacyAutoRotateOptions.autoRotateSpeed
-                                }
-                              ),
-                              /* @__PURE__ */ jsx11(PanoramaEventSurface, {}),
-                              contextMenuChannel.mount ? /* @__PURE__ */ jsx11(PanoContextMenu, { ...contextMenuChannel.props }) : null,
-                              /* @__PURE__ */ jsxs6(ControlClaimsContext.Provider, { value: controlClaims, children: [
-                                children,
-                                /* @__PURE__ */ jsx11(
-                                  DefaultControlChannels,
+          /* @__PURE__ */ jsxs6("div", { "data-pano-background": "", inert: modalOpen, style: { position: "absolute", inset: 0 }, children: [
+            /* @__PURE__ */ jsx12(
+              Canvas,
+              {
+                "aria-label": `${ariaLabel} canvas`,
+                resize: { debounce: 0 },
+                camera: {
+                  far: DEFAULT_PANORAMA_CAMERA_FAR,
+                  fov: normalizedInitialView.fov,
+                  near: DEFAULT_PANORAMA_CAMERA_NEAR,
+                  position: [0, 0, 0.01]
+                },
+                dpr,
+                gl: {
+                  // Hotspots contain transparent textures and curved outlines. Keep
+                  // the canvas multisampled so their visible edges are smoothed.
+                  antialias: true,
+                  powerPreference: "high-performance",
+                  stencil: false
+                },
+                style: {
+                  ...DEFAULT_CANVAS_STYLE,
+                  touchAction: userControlsEnabled ? "none" : "auto"
+                },
+                children: /* @__PURE__ */ jsx12(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
+                  WebVRRuntimeContext.Provider,
+                  {
+                    value: { host: webVRHost, xrStore, stereoView },
+                    children: [
+                      /* @__PURE__ */ jsx12(PanoramaXROrigin, {}),
+                      /* @__PURE__ */ jsx12(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx12(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ jsx12(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx12(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx12(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx12(
+                        PanoContextMenuOverlayContext.Provider,
+                        {
+                          value: contextMenuOverlayApi,
+                          children: /* @__PURE__ */ jsx12(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx12(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx12(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx12(
+                            PanoContextMenuActionsContext.Provider,
+                            {
+                              value: contextMenuActions,
+                              children: /* @__PURE__ */ jsx12(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx12(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs6(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
+                                /* @__PURE__ */ jsx12(PanoVideoHostReset, {}),
+                                /* @__PURE__ */ jsx12(
+                                  PanoramaViewRuntime,
                                   {
-                                    fovSpeed: controlOptions.fovSpeed,
-                                    keyboardChannel,
-                                    mouseChannel,
-                                    touchChannel,
-                                    userControlsEnabled
+                                    ref: setControlsRuntime,
+                                    eventBus,
+                                    initialView: normalizedInitialView,
+                                    viewLimits: parsedLimits,
+                                    maxFov: normalizedMaxFov,
+                                    minFov: normalizedMinFov,
+                                    options: controlOptions
                                   }
-                                )
-                              ] })
-                            ] }) }) })
-                          }
-                        ) }) }) })
-                      }
-                    ) }) }) }) }) })
-                  ]
-                }
-              ) })
-            }
-          ),
-          /* @__PURE__ */ jsxs6(
+                                ),
+                                (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx12(
+                                  PanoEvents,
+                                  {
+                                    onViewChange,
+                                    onClick: onPanoramaClick,
+                                    onDoubleClick: onPanoramaDoubleClick,
+                                    onPointerMove: onPanoramaPointerMove
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx12(
+                                  AutoRotate,
+                                  {
+                                    enabled: legacyAutoRotate,
+                                    speed: legacyAutoRotateOptions.autoRotateSpeed
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx12(PanoramaEventSurface, {}),
+                                contextMenuChannel.mount ? /* @__PURE__ */ jsx12(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                                /* @__PURE__ */ jsxs6(ControlClaimsContext.Provider, { value: controlClaims, children: [
+                                  children,
+                                  /* @__PURE__ */ jsx12(
+                                    DefaultControlChannels,
+                                    {
+                                      fovSpeed: controlOptions.fovSpeed,
+                                      keyboardChannel,
+                                      mouseChannel,
+                                      touchChannel,
+                                      userControlsEnabled
+                                    }
+                                  )
+                                ] })
+                              ] }) }) })
+                            }
+                          ) }) }) })
+                        }
+                      ) }) }) }) }) })
+                    ]
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                className: "pano-chrome-overlay",
+                "data-pano-chrome-overlay": "",
+                ref: setOverlayNode,
+                children: [
+                  /* @__PURE__ */ jsx12(
+                    PanoVideoChromeBridge,
+                    {
+                      fullscreen: contextMenuActions,
+                      host: videoHost,
+                      overlayElement
+                    }
+                  ),
+                  /* @__PURE__ */ jsx12(WebVRChromeBridge, { host: webVRHost })
+                ]
+              }
+            ),
+            contextMenuOverlay,
+            hotspotAccessibilityControls
+          ] }),
+          /* @__PURE__ */ jsx12(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ jsx12(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ jsx12(
             "div",
             {
-              className: "pano-chrome-overlay",
-              "data-pano-chrome-overlay": "",
-              ref: setOverlayNode,
-              children: [
-                /* @__PURE__ */ jsx11(
-                  PanoVideoChromeBridge,
-                  {
-                    fullscreen: contextMenuActions,
-                    host: videoHost,
-                    overlayElement
-                  }
-                ),
-                /* @__PURE__ */ jsx11(WebVRChromeBridge, { host: webVRHost })
-              ]
+              "data-pano-overlay": "",
+              ref: setPortalContainer,
+              style: { position: "absolute", inset: 0, zIndex: 30, pointerEvents: "none" },
+              children: renderOverlay?.(overlayContext)
             }
-          ),
-          contextMenuOverlay,
-          hotspotAccessibilityControls
+          ) }) })
         ]
       }
     );
@@ -7652,11 +7928,93 @@ var PanoViewer = forwardRef2(
 // src/index.ts
 export * from "./data.mjs";
 
+// src/asset-url.ts
+function isAbsoluteAssetUrl(url) {
+  return url.startsWith("/") || url.startsWith("//") || /^[a-z][a-z0-9+.-]*:/i.test(url);
+}
+function resolveRelativeAssetUrl(baseUrl, relativePath) {
+  const normalizedBaseUrl = baseUrl.replace(/\/+$/, "");
+  const normalizedPath = relativePath.replace(/^\/+/, "");
+  return normalizedBaseUrl ? `${normalizedBaseUrl}/${normalizedPath}` : normalizedPath;
+}
+function resolveAssetUrl(baseUrl, path) {
+  return isAbsoluteAssetUrl(path) ? path : resolveRelativeAssetUrl(baseUrl, path);
+}
+function resolveUrlAgainstFile(fileUrl, path) {
+  if (isAbsoluteAssetUrl(path)) {
+    return path;
+  }
+  const slash = fileUrl.lastIndexOf("/");
+  const directory = slash === -1 ? "" : fileUrl.slice(0, slash);
+  return resolveRelativeAssetUrl(directory, path);
+}
+
+// src/tile/multires.ts
+function positiveInteger(value, name) {
+  if (!Number.isFinite(value) || value <= 0 || !Number.isInteger(value)) {
+    throw new Error(`${name} must be a positive integer, received ${String(value)}`);
+  }
+  return value;
+}
+function ascendingLevels(levels) {
+  for (let index = 1; index < levels.length; index += 1) {
+    if (levels[index] <= levels[index - 1]) {
+      throw new Error("multires face sizes must be strictly ascending");
+    }
+  }
+  return levels;
+}
+function parseMultires(multires) {
+  if (typeof multires !== "string") {
+    const tileSize2 = positiveInteger(multires.tileSize, "multires.tileSize");
+    if (multires.levels.length === 0) {
+      throw new Error("multires.levels must contain at least one face size");
+    }
+    const levels2 = ascendingLevels(
+      multires.levels.map(
+        (level, index) => positiveInteger(level, `multires.levels[${index}]`)
+      )
+    );
+    return { tileSize: tileSize2, levels: levels2 };
+  }
+  const values = multires.split(",").map((part) => Number(part.trim()));
+  if (values.length < 2 || values.some((value) => !Number.isFinite(value))) {
+    throw new Error(
+      "multires must contain a tile size followed by at least one face size"
+    );
+  }
+  const tileSize = positiveInteger(values[0], "multires tile size");
+  const levels = ascendingLevels(
+    values.slice(1).map(
+      (level, index) => positiveInteger(level, `multires level ${index + 1}`)
+    )
+  );
+  return { tileSize, levels };
+}
+var DEFAULT_TILE_URL_TEMPLATE = "tiles/%s/l%l/%v/l%l_%s_%h_%v.webp";
+function buildDefaultTileUrlTemplate() {
+  return DEFAULT_TILE_URL_TEMPLATE;
+}
+function resolveRelativeTileUrl(baseUrl, relativePath) {
+  return resolveAssetUrl(baseUrl, relativePath);
+}
+function resolveTemplateUrl(template, address) {
+  return template.replace(/%s/g, address.face).replace(/%l/g, String(address.level)).replace(/%(0*)([hxucvywr])/g, (_match, zeroes, placeholder) => {
+    const value = "hxuc".includes(placeholder) ? address.col : address.row;
+    return String(value).padStart(zeroes.length + 1, "0");
+  });
+}
+
+// src/data/hotspots.ts
+function hotspotAction(hotspot, trigger) {
+  return hotspot.events?.[trigger] ?? (trigger === "click" ? hotspot.action : void 0);
+}
+
 // src/project-scenes.tsx
 import {
-  useContext as useContext21,
-  useMemo as useMemo21,
-  useState as useState19
+  useContext as useContext22,
+  useMemo as useMemo22,
+  useState as useState20
 } from "react";
 
 // src/scenes.tsx
@@ -7664,11 +8022,11 @@ import { useFrame as useFrame11, useThree as useThree16 } from "@react-three/fib
 import {
   Fragment as Fragment4,
   useCallback as useCallback8,
-  useContext as useContext18,
+  useContext as useContext19,
   useEffect as useEffect22,
-  useMemo as useMemo16,
+  useMemo as useMemo17,
   useRef as useRef22,
-  useState as useState10
+  useState as useState11
 } from "react";
 import {
   LinearSRGBColorSpace,
@@ -7677,10 +8035,10 @@ import {
 } from "three";
 
 // src/scene-detail.tsx
-import { createContext as createContext15, useContext as useContext16 } from "react";
-var SceneDetailContext = createContext15(null);
+import { createContext as createContext16, useContext as useContext17 } from "react";
+var SceneDetailContext = createContext16(null);
 function useSceneDetailReporter() {
-  return useContext16(SceneDetailContext);
+  return useContext17(SceneDetailContext);
 }
 function viewTilesAreDrawable(textures) {
   return textures.length > 0 && textures.every((texture) => texture != null);
@@ -7745,7 +8103,7 @@ function isSnapshotTransition(preset) {
 
 // src/scene-transitions/snapshot-hold.tsx
 import { useFrame as useFrame6, useThree as useThree9 } from "@react-three/fiber";
-import { useEffect as useEffect14, useMemo as useMemo8, useRef as useRef14 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef14 } from "react";
 import { Vector3 as Vector36 } from "three";
 
 // src/scene-transitions/overlay-utils.ts
@@ -8078,12 +8436,12 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-hold.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function SnapshotHold({ snapshot }) {
   const { camera, gl } = useThree9();
   const meshRef = useRef14(null);
   const directionRef = useRef14(new Vector36());
-  const material = useMemo8(
+  const material = useMemo9(
     () => createSnapshotMaterial("crossfade", snapshot.texture),
     [snapshot.texture]
   );
@@ -8102,8 +8460,8 @@ function SnapshotHold({ snapshot }) {
     material.uniforms.progress.value = 0;
   });
   return /* @__PURE__ */ jsxs7("mesh", { frustumCulled: false, ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, children: [
-    /* @__PURE__ */ jsx12("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx12("primitive", { attach: "material", object: material })
+    /* @__PURE__ */ jsx13("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx13("primitive", { attach: "material", object: material })
   ] });
 }
 
@@ -8165,7 +8523,7 @@ function phaseAfterSnapshot(preset, hold) {
 
 // src/scene-transitions/particle-overlay.tsx
 import { useFrame as useFrame7, useThree as useThree10 } from "@react-three/fiber";
-import { useEffect as useEffect15, useMemo as useMemo9, useRef as useRef15 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo10, useRef as useRef15 } from "react";
 import {
   DoubleSide as DoubleSide2,
   InstancedBufferAttribute,
@@ -8175,7 +8533,7 @@ import {
   Vector2 as Vector23,
   Vector3 as Vector37
 } from "three";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -8256,8 +8614,8 @@ function ParticleOverlay({
   const startRef = useRef15(null);
   const finishedRef = useRef15(false);
   const directionRef = useRef15(new Vector37());
-  const geometry = useMemo9(() => createParticleGeometry(), []);
-  const material = useMemo9(
+  const geometry = useMemo10(() => createParticleGeometry(), []);
+  const material = useMemo10(
     () => new ShaderMaterial2({
       transparent: true,
       depthTest: false,
@@ -8297,7 +8655,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "mesh",
     {
       ref: meshRef,
@@ -8311,9 +8669,9 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 import { useFrame as useFrame8, useThree as useThree11 } from "@react-three/fiber";
-import { useEffect as useEffect16, useMemo as useMemo10, useRef as useRef16 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo11, useRef as useRef16 } from "react";
 import { Vector3 as Vector38 } from "three";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -8326,7 +8684,7 @@ function SnapshotOverlay({
   const startRef = useRef16(null);
   const finishedRef = useRef16(false);
   const directionRef = useRef16(new Vector38());
-  const material = useMemo10(() => {
+  const material = useMemo11(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
@@ -8363,20 +8721,20 @@ function SnapshotOverlay({
     return null;
   }
   return /* @__PURE__ */ jsxs8("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx14("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx14("primitive", { attach: "material", object: material })
+    /* @__PURE__ */ jsx15("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx15("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ jsx15(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ jsx16(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -8404,7 +8762,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ jsx15(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ jsx16(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -8415,7 +8773,7 @@ function TransitionOverlay(props) {
 
 // src/sphere.tsx
 import { useThree as useThree12 } from "@react-three/fiber";
-import { useEffect as useEffect17, useMemo as useMemo12, useRef as useRef18, useState as useState6 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo13, useRef as useRef18, useState as useState7 } from "react";
 import {
   BackSide as BackSide2,
   LinearFilter,
@@ -8426,29 +8784,8 @@ import {
   TextureLoader
 } from "three";
 
-// src/asset-url.ts
-function isAbsoluteAssetUrl(url) {
-  return url.startsWith("/") || url.startsWith("//") || /^[a-z][a-z0-9+.-]*:/i.test(url);
-}
-function resolveRelativeAssetUrl(baseUrl, relativePath) {
-  const normalizedBaseUrl = baseUrl.replace(/\/+$/, "");
-  const normalizedPath = relativePath.replace(/^\/+/, "");
-  return normalizedBaseUrl ? `${normalizedBaseUrl}/${normalizedPath}` : normalizedPath;
-}
-function resolveAssetUrl(baseUrl, path) {
-  return isAbsoluteAssetUrl(path) ? path : resolveRelativeAssetUrl(baseUrl, path);
-}
-function resolveUrlAgainstFile(fileUrl, path) {
-  if (isAbsoluteAssetUrl(path)) {
-    return path;
-  }
-  const slash = fileUrl.lastIndexOf("/");
-  const directory = slash === -1 ? "" : fileUrl.slice(0, slash);
-  return resolveRelativeAssetUrl(directory, path);
-}
-
 // src/pano-filter/pano-basic-material.tsx
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo11, useRef as useRef17 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo12, useRef as useRef17 } from "react";
 import {
   Matrix4,
   Vector4
@@ -8616,7 +8953,7 @@ function injectPanoColorMatrixShader(shader) {
 }
 
 // src/pano-filter/pano-basic-material.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function matrixUniforms(matrix) {
   return {
     matrix: new Matrix4().set(
@@ -8651,7 +8988,7 @@ function PanoBasicMaterial({
   const currentRef = useRef17({ matrix, intensity: snapshot.intensity });
   currentRef.current = { matrix, intensity: snapshot.intensity };
   const shaderRef = useRef17(null);
-  const onBeforeCompile = useMemo11(() => {
+  const onBeforeCompile = useMemo12(() => {
     const compile = (shader) => {
       shaderRef.current = shader;
       if (preset !== "none") {
@@ -8671,7 +9008,7 @@ function PanoBasicMaterial({
     compile.toString = () => `pano-filter:${preset}:matrix:${hasMatrix}`;
     return compile;
   }, [preset, hasMatrix]);
-  useLayoutEffect2(() => {
+  useLayoutEffect4(() => {
     const shader = shaderRef.current;
     if (!shader) return;
     if (shader.uniforms.uPanoFilterIntensity)
@@ -8683,7 +9020,7 @@ function PanoBasicMaterial({
       shader.uniforms.uPanoColorMatrixIntensity.value = snapshot.intensity;
     }
   }, [matrix, snapshot.intensity]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "meshBasicMaterial",
     {
       toneMapped: false,
@@ -8695,9 +9032,9 @@ function PanoBasicMaterial({
 }
 
 // src/sphere.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = useState6(null);
+  const [texture, setTexture] = useState7(null);
   const onLoadRef = useRef18(onLoad);
   const onErrorRef = useRef18(onError);
   onLoadRef.current = onLoad;
@@ -8752,7 +9089,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
 function Sphere({
   src,
   previewUrl,
-  yawOffset = 0,
+  yawOffset: yawOffset2 = 0,
   onReady,
   onLoad,
   onError,
@@ -8761,7 +9098,7 @@ function Sphere({
 }) {
   const gl = useThree12((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = useMemo12(
+  const resolvedPreviewUrl = useMemo13(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -8807,11 +9144,11 @@ function Sphere({
   return /* @__PURE__ */ jsxs9(
     "mesh",
     {
-      rotation: [0, MathUtils3.degToRad(90 + yawOffset), 0],
+      rotation: [0, MathUtils3.degToRad(90 + yawOffset2), 0],
       visible,
       children: [
-        /* @__PURE__ */ jsx17("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx18(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -8826,7 +9163,7 @@ function Sphere({
 
 // src/sphere-tile/sphere-tile.tsx
 import { useFrame as useFrame9, useThree as useThree14 } from "@react-three/fiber";
-import { memo, useCallback as useCallback7, useEffect as useEffect20, useMemo as useMemo14, useRef as useRef20, useState as useState8 } from "react";
+import { memo, useCallback as useCallback7, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef20, useState as useState9 } from "react";
 import { BackSide as BackSide3, Frustum, Matrix4 as Matrix42, PerspectiveCamera as PerspectiveCamera3 } from "three";
 
 // src/tile/texture-manager.ts
@@ -9062,13 +9399,13 @@ var TileTextureManager = class {
 // src/tile/texture-manager-context.tsx
 import { useThree as useThree13 } from "@react-three/fiber";
 import {
-  createContext as createContext16,
-  useContext as useContext17,
+  createContext as createContext17,
+  useContext as useContext18,
   useEffect as useEffect18,
-  useMemo as useMemo13
+  useMemo as useMemo14
 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var TileTextureManagerContext = createContext16(null);
+import { jsx as jsx19 } from "react/jsx-runtime";
+var TileTextureManagerContext = createContext17(null);
 function TileTextureManagerProvider({
   children,
   maxTextureMemoryMb = 128,
@@ -9076,7 +9413,7 @@ function TileTextureManagerProvider({
 }) {
   const gl = useThree13((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = useMemo13(
+  const manager = useMemo14(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -9089,14 +9426,14 @@ function TileTextureManagerProvider({
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ jsx18(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsx19(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return useContext17(TileTextureManagerContext);
+  return useContext18(TileTextureManagerContext);
 }
 
 // src/tile/texture-hooks.ts
-import { useEffect as useEffect19, useRef as useRef19, useState as useState7 } from "react";
+import { useEffect as useEffect19, useRef as useRef19, useState as useState8 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping2,
   LinearFilter as LinearFilter3,
@@ -9104,7 +9441,7 @@ import {
   TextureLoader as TextureLoader3
 } from "three";
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = useState7(null);
+  const [texture, setTexture] = useState8(null);
   const onErrorRef = useRef19(onError);
   onErrorRef.current = onError;
   useEffect19(() => {
@@ -9153,7 +9490,7 @@ function usePreviewTexture(url, anisotropy, onError) {
   return texture;
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = useState7(() => ({
+  const [managedState, setManagedState] = useState8(() => ({
     manager,
     key,
     url,
@@ -9182,7 +9519,7 @@ import {
   MathUtils as MathUtils4,
   Vector3 as Vector39
 } from "three";
-function positiveInteger(value, name) {
+function positiveInteger2(value, name) {
   if (!Number.isSafeInteger(value) || value <= 0) {
     throw new Error(`${name} must be a positive safe integer`);
   }
@@ -9190,7 +9527,7 @@ function positiveInteger(value, name) {
 }
 function parseSphereMultires(input) {
   const parts = typeof input === "string" ? input.split(",").map((part) => part.trim()) : null;
-  const tileSize = positiveInteger(
+  const tileSize = positiveInteger2(
     parts ? Number(parts[0]) : input.tileSize,
     "tileSize"
   );
@@ -9203,8 +9540,8 @@ function parseSphereMultires(input) {
   if (levels.length === 0)
     throw new Error("sphere multires needs at least one level");
   levels.forEach((level, index) => {
-    positiveInteger(level.width, "level width");
-    positiveInteger(level.height, "level height");
+    positiveInteger2(level.width, "level width");
+    positiveInteger2(level.height, "level height");
     if (Math.abs(level.width - level.height * 2) > 2)
       throw new Error("sphere levels must be full 2:1 equirectangular images");
     const previous = levels[index - 1];
@@ -9251,8 +9588,8 @@ function sphereTileRange(address) {
     bottom: (address.row * address.tileSize + address.height) / address.imageHeight
   };
 }
-function spherePoint(u, v, yawOffset = 0, radius = DEFAULT_PANORAMA_RADIUS) {
-  const yaw = (u - 0.5) * Math.PI * 2 + MathUtils4.degToRad(yawOffset);
+function spherePoint(u, v, yawOffset2 = 0, radius = DEFAULT_PANORAMA_RADIUS) {
+  const yaw = (u - 0.5) * Math.PI * 2 + MathUtils4.degToRad(yawOffset2);
   const pitch = (0.5 - v) * Math.PI;
   return new Vector39(
     Math.sin(yaw) * Math.cos(pitch) * radius,
@@ -9260,19 +9597,19 @@ function spherePoint(u, v, yawOffset = 0, radius = DEFAULT_PANORAMA_RADIUS) {
     -Math.cos(yaw) * Math.cos(pitch) * radius
   );
 }
-function sphereTileBounds(address, yawOffset) {
+function sphereTileBounds(address, yawOffset2) {
   const { left, right, top, bottom } = sphereTileRange(address);
   const us = [left, right];
   for (let i = -4; i <= 8; i++) {
-    const u = 0.5 + (i * 90 - yawOffset % 360) / 360;
+    const u = 0.5 + (i * 90 - yawOffset2 % 360) / 360;
     if (u > left && u < right) us.push(u);
   }
   const vs = top < 0.5 && bottom > 0.5 ? [top, 0.5, bottom] : [top, bottom];
   return new Box3().setFromPoints(
-    us.flatMap((u) => vs.map((v) => spherePoint(u, v, yawOffset)))
+    us.flatMap((u) => vs.map((v) => spherePoint(u, v, yawOffset2)))
   );
 }
-function sphereTileGeometry(address, yawOffset, radius = DEFAULT_PANORAMA_RADIUS) {
+function sphereTileGeometry(address, yawOffset2, radius = DEFAULT_PANORAMA_RADIUS) {
   const { left, right, top, bottom } = sphereTileRange(address);
   const columns = Math.max(2, Math.ceil((right - left) * 360 / 3));
   const rows = Math.max(2, Math.ceil((bottom - top) * 180 / 3));
@@ -9283,7 +9620,7 @@ function sphereTileGeometry(address, yawOffset, radius = DEFAULT_PANORAMA_RADIUS
       const point = spherePoint(
         left + (right - left) * u,
         top + (bottom - top) * v,
-        yawOffset,
+        yawOffset2,
         radius
       );
       positions.push(point.x, point.y, point.z);
@@ -9308,7 +9645,7 @@ function preferredSphereLevel(levels, height, dpr, verticalFov) {
 }
 
 // src/sphere-tile/sphere-tile.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function sphereTileViewShouldRefresh(input) {
   if (input.loadModeChanged || input.managerChanged) {
     return true;
@@ -9321,24 +9658,24 @@ function sphereTileViewShouldRefresh(input) {
 function SpherePatch({
   address,
   texture,
-  yawOffset,
+  yawOffset: yawOffset2,
   preview = false
 }) {
-  const geometry = useMemo14(
+  const geometry = useMemo15(
     () => sphereTileGeometry(
       address,
-      yawOffset,
+      yawOffset2,
       DEFAULT_PANORAMA_RADIUS + (preview ? 0.05 : 0)
     ),
-    [address, yawOffset, preview]
+    [address, yawOffset2, preview]
   );
   useEffect20(() => () => geometry.dispose(), [geometry]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "mesh",
     {
       geometry,
       renderOrder: preview ? -1e3 : -900 + address.level,
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx20(
         PanoBasicMaterial,
         {
           map: texture,
@@ -9355,7 +9692,7 @@ var ManagedPatch = memo(function ManagedPatch2({
   address,
   manager,
   resolveUrl,
-  yawOffset,
+  yawOffset: yawOffset2,
   ready
 }) {
   const url = resolveUrl(address);
@@ -9368,12 +9705,12 @@ var ManagedPatch = memo(function ManagedPatch2({
   useEffect20(() => {
     if (snapshot.texture) ready();
   }, [snapshot.texture, ready]);
-  return snapshot.texture ? /* @__PURE__ */ jsx19(
+  return snapshot.texture ? /* @__PURE__ */ jsx20(
     SpherePatch,
     {
       address,
       texture: snapshot.texture,
-      yawOffset
+      yawOffset: yawOffset2
     }
   ) : null;
 });
@@ -9384,7 +9721,7 @@ function SphereTileSource({
   urlTemplate = "tiles/%l/%h_%v.webp",
   indexBase = 1,
   resolveTileUrl,
-  yawOffset = 0,
+  yawOffset: yawOffset2 = 0,
   maxTextureMemoryMb = 128,
   maxConcurrentLoads = 4,
   retryCount = 1,
@@ -9415,7 +9752,7 @@ function SphereTileSource({
     1,
     Number.isFinite(maxTextureMemoryMb) ? maxTextureMemoryMb : 128
   ) * 1024 * 1024;
-  const ownedManager = useMemo14(
+  const ownedManager = useMemo15(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: ownedBudget,
@@ -9456,33 +9793,33 @@ function SphereTileSource({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const resolveUrl = useMemo14(
+  const resolveUrl = useMemo15(
     () => (address) => resolveAssetUrl(
       baseUrl,
       resolveTileUrl ? resolveTileUrl(address) : resolveSphereTemplateUrl(urlTemplate, address, indexBase)
     ),
     [baseUrl, resolveTileUrl, urlTemplate, indexBase]
   );
-  const candidates = useMemo14(
+  const candidates = useMemo15(
     () => config.levels.map(
       (level, index) => sphereTileAddresses(level, index, config.tileSize).map((address) => ({
         address,
-        bounds: sphereTileBounds(address, yawOffset)
+        bounds: sphereTileBounds(address, yawOffset2)
       }))
     ),
-    [config, yawOffset]
+    [config, yawOffset2]
   );
-  const previewAddress = useMemo14(
+  const previewAddress = useMemo15(
     () => sphereTileAddresses({ width: 2, height: 1 }, 0, 2)[0],
     []
   );
-  const [layers, setLayers] = useState8([]);
+  const [layers, setLayers] = useState9([]);
   const detailReporter = useSceneDetailReporter();
   const detailReporterRef = useRef20(detailReporter);
   detailReporterRef.current = detailReporter;
   const detailTokenRef = useRef20("");
   const targetKeysRef = useRef20([]);
-  const scratch = useMemo14(
+  const scratch = useMemo15(
     () => ({
       camera: new PerspectiveCamera3(),
       frustum: new Frustum(),
@@ -9571,23 +9908,23 @@ function SphereTileSource({
     );
   });
   return /* @__PURE__ */ jsxs10("group", { visible, children: [
-    preview ? /* @__PURE__ */ jsx19(
+    preview ? /* @__PURE__ */ jsx20(
       SpherePatch,
       {
         address: previewAddress,
         texture: preview,
-        yawOffset,
+        yawOffset: yawOffset2,
         preview: true
       }
     ) : null,
     loadMode !== "preview" ? layers.flatMap(
-      (layer) => layer.addresses.map((address) => /* @__PURE__ */ jsx19(
+      (layer) => layer.addresses.map((address) => /* @__PURE__ */ jsx20(
         ManagedPatch,
         {
           address,
           manager,
           resolveUrl,
-          yawOffset,
+          yawOffset: yawOffset2,
           ready
         },
         sphereTileKey(address)
@@ -9597,14 +9934,14 @@ function SphereTileSource({
 }
 function SphereTile({ multires, ...props }) {
   const token = typeof multires === "string" ? multires : JSON.stringify(multires);
-  const config = useMemo14(() => parseSphereMultires(multires), [token]);
+  const config = useMemo15(() => parseSphereMultires(multires), [token]);
   const sourceKey = `${props.baseUrl}\0${token}\0${props.previewUrl}\0${props.urlTemplate ?? ""}\0${props.indexBase ?? 1}`;
-  return /* @__PURE__ */ jsx19(SphereTileSource, { ...props, config }, sourceKey);
+  return /* @__PURE__ */ jsx20(SphereTileSource, { ...props, config }, sourceKey);
 }
 
 // src/tile/tile.tsx
 import { useFrame as useFrame10, useThree as useThree15 } from "@react-three/fiber";
-import { memo as memo2, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef21, useState as useState9 } from "react";
+import { memo as memo2, useEffect as useEffect21, useMemo as useMemo16, useRef as useRef21, useState as useState10 } from "react";
 import {
   Frustum as Frustum2,
   Matrix4 as Matrix43,
@@ -9738,64 +10075,8 @@ function previewAtlasVRange(face, faceOrder = PREVIEW_FACE_ORDER) {
   };
 }
 
-// src/tile/multires.ts
-function positiveInteger2(value, name) {
-  if (!Number.isFinite(value) || value <= 0 || !Number.isInteger(value)) {
-    throw new Error(`${name} must be a positive integer, received ${String(value)}`);
-  }
-  return value;
-}
-function ascendingLevels(levels) {
-  for (let index = 1; index < levels.length; index += 1) {
-    if (levels[index] <= levels[index - 1]) {
-      throw new Error("multires face sizes must be strictly ascending");
-    }
-  }
-  return levels;
-}
-function parseMultires(multires) {
-  if (typeof multires !== "string") {
-    const tileSize2 = positiveInteger2(multires.tileSize, "multires.tileSize");
-    if (multires.levels.length === 0) {
-      throw new Error("multires.levels must contain at least one face size");
-    }
-    const levels2 = ascendingLevels(
-      multires.levels.map(
-        (level, index) => positiveInteger2(level, `multires.levels[${index}]`)
-      )
-    );
-    return { tileSize: tileSize2, levels: levels2 };
-  }
-  const values = multires.split(",").map((part) => Number(part.trim()));
-  if (values.length < 2 || values.some((value) => !Number.isFinite(value))) {
-    throw new Error(
-      "multires must contain a tile size followed by at least one face size"
-    );
-  }
-  const tileSize = positiveInteger2(values[0], "multires tile size");
-  const levels = ascendingLevels(
-    values.slice(1).map(
-      (level, index) => positiveInteger2(level, `multires level ${index + 1}`)
-    )
-  );
-  return { tileSize, levels };
-}
-var DEFAULT_TILE_URL_TEMPLATE = "tiles/%s/l%l/%v/l%l_%s_%h_%v.webp";
-function buildDefaultTileUrlTemplate() {
-  return DEFAULT_TILE_URL_TEMPLATE;
-}
-function resolveRelativeTileUrl(baseUrl, relativePath) {
-  return resolveAssetUrl(baseUrl, relativePath);
-}
-function resolveTemplateUrl(template, address) {
-  return template.replace(/%s/g, address.face).replace(/%l/g, String(address.level)).replace(/%(0*)([hxucvywr])/g, (_match, zeroes, placeholder) => {
-    const value = "hxuc".includes(placeholder) ? address.col : address.row;
-    return String(value).padStart(zeroes.length + 1, "0");
-  });
-}
-
 // src/tile/tile.tsx
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } 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;
@@ -9824,7 +10105,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = useMemo15(() => {
+  const geometry = useMemo16(() => {
     const nextGeometry = new PlaneGeometry3(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -9846,14 +10127,14 @@ function PreviewFace({
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx21(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -9869,7 +10150,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx20(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx21(
     PreviewFace,
     {
       face,
@@ -9893,14 +10174,14 @@ var TileMesh = memo2(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx20("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx21(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx21(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -9917,7 +10198,7 @@ var TileLayerMeshes = memo2(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx20(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx21(
     TileMesh,
     {
       address,
@@ -10084,10 +10365,10 @@ function Tile({
   onLevelChange
 }) {
   const { camera, gl, size } = useThree15();
-  const multiresConfig = useMemo15(() => parseMultires(multires), [multires]);
+  const multiresConfig = useMemo16(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = useMemo15(
+  const candidatesByLevel = useMemo16(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -10105,7 +10386,7 @@ function Tile({
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = useMemo15(
+  const ownedManager = useMemo16(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -10148,14 +10429,14 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = useMemo15(
+  const resolveUrl = useMemo16(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = useState9([]);
+  const [layers, setLayers] = useState10([]);
   const layerTokenRef = useRef21("");
   const currentLevelRef = useRef21(1);
   const lastUpdateAtRef = useRef21(-Infinity);
@@ -10277,8 +10558,8 @@ function Tile({
     );
   });
   return /* @__PURE__ */ jsxs11("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx20(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx20(
+    previewTexture ? /* @__PURE__ */ jsx21(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
+    layers.map((layer) => /* @__PURE__ */ jsx21(
       TileLayerMeshes,
       {
         layer,
@@ -10291,7 +10572,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function SceneSource({
   scene,
   visible,
@@ -10304,7 +10585,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         Sphere,
         {
           src: scene.src,
@@ -10316,8 +10597,8 @@ function SceneSource({
         }
       );
     case "tile": {
-      const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx21(
+      const { id: _id, type: _type, viewLimits: _limits, ...tileProps } = scene;
+      return /* @__PURE__ */ jsx22(
         Tile,
         {
           ...tileProps,
@@ -10329,8 +10610,8 @@ function SceneSource({
       );
     }
     case "sphereTile": {
-      const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx21(
+      const { id: _id, type: _type, viewLimits: _limits, ...tileProps } = scene;
+      return /* @__PURE__ */ jsx22(
         SphereTile,
         {
           ...tileProps,
@@ -10414,29 +10695,29 @@ function ScenesController({
   transitionWaitForDetailMs,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = useContext18(PanoramaViewContext);
+  const controlsRef = useContext19(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = useMemo16(
+  const transition = useMemo17(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = useMemo16(
+  const sceneMap = useMemo17(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = useState10([
+  const [slots, setSlots] = useState11([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = useState10(0);
-  const [liveSlot, setLiveSlot] = useState10(0);
-  const [pendingSlot, setPendingSlot] = useState10(null);
-  const [phase, setPhase] = useState10(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = useState10(0);
-  const [transitionRunId, setTransitionRunId] = useState10(0);
-  const [snapshot, setSnapshot] = useState10(null);
-  const [recoveryKey, setRecoveryKey] = useState10(0);
+  const [activeSlot, setActiveSlot] = useState11(0);
+  const [liveSlot, setLiveSlot] = useState11(0);
+  const [pendingSlot, setPendingSlot] = useState11(null);
+  const [phase, setPhase] = useState11(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = useState11(0);
+  const [transitionRunId, setTransitionRunId] = useState11(0);
+  const [snapshot, setSnapshot] = useState11(null);
+  const [recoveryKey, setRecoveryKey] = useState11(0);
   const requestedSceneIdRef = useRef22(activeSceneId);
   const captureReasonRef = useRef22("start");
   const interactionReleaseRef = useRef22(null);
@@ -10448,7 +10729,7 @@ function ScenesController({
   const waitRef = useRef22(null);
   const waitTimerRef = useRef22(null);
   const detailGenerationRef = useRef22(0);
-  const [detailGeneration, setDetailGeneration] = useState10(0);
+  const [detailGeneration, setDetailGeneration] = useState11(0);
   const mountedRef = useRef22(true);
   const waitForDetailMsRef = useRef22(0);
   waitForDetailMsRef.current = normalizeTransitionWaitMs(transitionWaitForDetailMs);
@@ -10458,6 +10739,13 @@ function ScenesController({
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
+  useEffect22(() => {
+    const ready = readySceneRef.current;
+    if (ready) controlsRef?.current?.setSceneViewLimits(sceneMap.get(ready.id)?.viewLimits);
+  }, [controlsRef, sceneMap]);
+  useEffect22(() => () => {
+    controlsRef?.current?.setSceneViewLimits(void 0);
+  }, [controlsRef]);
   const releaseInteraction = useCallback8(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
@@ -10534,8 +10822,9 @@ function ScenesController({
   const notifySceneReady = useCallback8((scene) => {
     if (!scene || readySceneRef.current === scene) return;
     readySceneRef.current = scene;
+    controlsRef?.current?.setSceneViewLimits(sceneMap.get(scene.id)?.viewLimits);
     onSceneReady?.(scene.id);
-  }, [onSceneReady]);
+  }, [controlsRef, onSceneReady, sceneMap]);
   const handleReady = useCallback8((slot) => {
     if (slot === liveSlotRef.current && pendingSlot === null && phaseRef.current === "idle") {
       notifySceneReady(slotsRef.current[slot]);
@@ -10755,7 +11044,7 @@ function ScenesController({
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
   const slotSceneKey = `${slots[0]?.id ?? ""}
 ${slots[1]?.id ?? ""}`;
-  const detailReporters = useMemo16(() => {
+  const detailReporters = useMemo17(() => {
     const [firstSceneId = "", secondSceneId = ""] = slotSceneKey.split("\n");
     const sceneIds = [firstSceneId, secondSceneId];
     return sceneIds.map((sceneId) => ({
@@ -10773,7 +11062,7 @@ ${slots[1]?.id ?? ""}`;
     }));
   }, [consumeDetailSignal, detailGeneration, slotSceneKey]);
   return /* @__PURE__ */ jsxs12(Fragment4, { children: [
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -10785,11 +11074,11 @@ ${slots[1]?.id ?? ""}`;
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         SceneDetailContext.Provider,
         {
           value: detailReporters[slot],
-          children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx22(
             SceneSource,
             {
               scene: source,
@@ -10807,8 +11096,8 @@ ${slots[1]?.id ?? ""}`;
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshot !== null && phase === "awaitingDetail" ? /* @__PURE__ */ jsx21(SnapshotHold, { snapshot }) : null,
-    snapshotVisible ? /* @__PURE__ */ jsx21(
+    snapshot !== null && phase === "awaitingDetail" ? /* @__PURE__ */ jsx22(SnapshotHold, { snapshot }) : null,
+    snapshotVisible ? /* @__PURE__ */ jsx22(
       TransitionOverlay,
       {
         snapshot,
@@ -10831,7 +11120,7 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = useState10(
+  const [internalId, setInternalId] = useState11(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
@@ -10849,7 +11138,7 @@ function Scenes({
   scenesRef.current = scenes;
   const resolvedIdRef = useRef22(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = useContext18(ScenesHostContext);
+  const host = useContext19(ScenesHostContext);
   const phaseRef = useRef22("idle");
   useEffect22(() => {
     if (!host) {
@@ -10901,12 +11190,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         ScenesController,
         {
           ...rest,
@@ -10920,8 +11209,8 @@ function Scenes({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { useThree as useThree19 } from "@react-three/fiber";
-import { useEffect as useEffect25, useRef as useRef25, useState as useState13 } from "react";
+import { useThree as useThree20 } from "@react-three/fiber";
+import { useEffect as useEffect25, useRef as useRef26, useState as useState14 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping3,
   LinearFilter as LinearFilter5,
@@ -10931,43 +11220,43 @@ import {
 } from "three";
 
 // src/hotspot/hotspot-anchor.tsx
-import { useFrame as useFrame13, useThree as useThree18 } from "@react-three/fiber";
+import { useFrame as useFrame14, useThree as useThree19 } from "@react-three/fiber";
 import {
-  useContext as useContext20,
+  useContext as useContext21,
   useEffect as useEffect24,
-  useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo18,
-  useRef as useRef24,
-  useState as useState12
+  useLayoutEffect as useLayoutEffect7,
+  useMemo as useMemo19,
+  useRef as useRef25,
+  useState as useState13
 } from "react";
 import {
   Box3 as Box34,
   EdgesGeometry,
-  MathUtils as MathUtils6,
+  MathUtils as MathUtils7,
   Matrix4 as Matrix44,
   Plane,
   PlaneGeometry as PlaneGeometry4,
   Quaternion as Quaternion3,
   Ray,
-  Vector3 as Vector314
+  Vector3 as Vector315
 } from "three";
 
 // src/hotspot/hotspot-tooltip.tsx
-import { useEffect as useEffect23, useMemo as useMemo17, useState as useState11 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo18, useState as useState12 } from "react";
 
 // src/webvr/stereo-html.tsx
 import { useFrame as useFrame12, useThree as useThree17 } from "@react-three/fiber";
 import {
-  useContext as useContext19,
-  useLayoutEffect as useLayoutEffect3,
+  useContext as useContext20,
+  useLayoutEffect as useLayoutEffect5,
   useRef as useRef23,
   useSyncExternalStore as useSyncExternalStore7
 } from "react";
 import { createRoot } from "react-dom/client";
 import { Vector3 as Vector312 } from "three";
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function useFallbackStereoView() {
-  const runtime = useContext19(WebVRRuntimeContext);
+  const runtime = useContext20(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
   const fallback = useSyncExternalStore7(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
@@ -11015,7 +11304,7 @@ function ProjectedHtml({
       )
     );
   };
-  useLayoutEffect3(() => {
+  useLayoutEffect5(() => {
     if (!target) return;
     const element = document.createElement("div");
     Object.assign(element.style, {
@@ -11033,9 +11322,9 @@ function ProjectedHtml({
       queueMicrotask(() => root.unmount());
     };
   }, [target]);
-  useLayoutEffect3(() => {
+  useLayoutEffect5(() => {
     overlay.current?.root.render(
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         "div",
         {
           "aria-hidden": eye === "right" || void 0,
@@ -11047,18 +11336,18 @@ function ProjectedHtml({
     updatePosition();
   });
   useFrame12(updatePosition);
-  return /* @__PURE__ */ jsx22("group", { ref: group });
+  return /* @__PURE__ */ jsx23("group", { ref: group });
 }
 function PanoHtml(props) {
   const stereoView = useFallbackStereoView();
   return stereoView ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
-    /* @__PURE__ */ jsx22(ProjectedHtml, { ...props, stereoView, eye: "left" }),
-    /* @__PURE__ */ jsx22(ProjectedHtml, { ...props, stereoView, eye: "right" })
-  ] }) : /* @__PURE__ */ jsx22(ProjectedHtml, { ...props });
+    /* @__PURE__ */ jsx23(ProjectedHtml, { ...props, stereoView, eye: "left" }),
+    /* @__PURE__ */ jsx23(ProjectedHtml, { ...props, stereoView, eye: "right" })
+  ] }) : /* @__PURE__ */ jsx23(ProjectedHtml, { ...props });
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -11130,16 +11419,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = useState11(false);
+  const [imageFailed, setImageFailed] = useState12(false);
   useEffect23(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = useMemo17(
+  const resolvedAppearance = useMemo18(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = useMemo17(
+  const bubbleStyle = useMemo18(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -11161,8 +11450,8 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ jsx23(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs14("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
-    showImage ? /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs14("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
+    showImage ? /* @__PURE__ */ jsx24(
       "img",
       {
         alt: content.imageAlt ?? content.text ?? "",
@@ -11171,7 +11460,7 @@ function HotspotTooltip({
         src: content.image
       }
     ) : null,
-    content.text ? /* @__PURE__ */ jsx23(
+    content.text ? /* @__PURE__ */ jsx24(
       "p",
       {
         className: "pano-hotspot-tooltip-text",
@@ -11221,8 +11510,84 @@ function fixedScaleFactor(cameraFov, referenceFov) {
   return Math.tan(MathUtils5.degToRad(cameraFov) / 2) / Math.tan(MathUtils5.degToRad(safeReferenceFov) / 2);
 }
 
+// src/hotspot/hotspot-stroke-line.tsx
+import { Line } from "@react-three/drei";
+import { useFrame as useFrame13, useThree as useThree18 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef24 } from "react";
+import {
+  MathUtils as MathUtils6,
+  PerspectiveCamera as PerspectiveCamera6,
+  Vector3 as Vector314
+} from "three";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var LINE_WORLD_POSITION = new Vector314();
+function applyScreenSpaceDashScale(object, camera, viewportHeight) {
+  const material = object?.material;
+  if (!object || typeof material?.dashScale !== "number") {
+    return;
+  }
+  object.getWorldPosition(LINE_WORLD_POSITION);
+  const depth = Math.max(camera.position.distanceTo(LINE_WORLD_POSITION), 1);
+  const fov = camera instanceof PerspectiveCamera6 ? camera.fov : 75;
+  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils6.degToRad(fov) * 0.5) * depth);
+}
+function resolveDash(dashSize, gapSize) {
+  if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
+    return { dashed: false, dashSize: 1, gapSize: 1 };
+  }
+  return {
+    dashed: true,
+    dashSize,
+    gapSize: Number.isFinite(gapSize) ? Math.max(0, gapSize) : dashSize
+  };
+}
+function HotspotStrokeLine({
+  points,
+  color,
+  lineWidth,
+  opacity,
+  renderOrder,
+  dashSize,
+  gapSize
+}) {
+  const lineRef = useRef24(null);
+  const { camera, size } = useThree18();
+  const dash = resolveDash(dashSize, gapSize);
+  useLayoutEffect6(() => {
+    if (!dash.dashed) {
+      return;
+    }
+    applyScreenSpaceDashScale(lineRef.current, camera, size.height);
+  }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
+  useFrame13((state) => {
+    if (!dash.dashed) {
+      return;
+    }
+    applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
+  });
+  return /* @__PURE__ */ jsx25(
+    Line,
+    {
+      ref: lineRef,
+      alphaToCoverage: true,
+      color,
+      dashed: dash.dashed,
+      dashSize: dash.dashSize,
+      depthTest: true,
+      depthWrite: false,
+      gapSize: dash.gapSize,
+      lineWidth: Math.max(0.5, lineWidth),
+      opacity,
+      points,
+      renderOrder,
+      transparent: true,
+      worldUnits: false
+    }
+  );
+}
+
 // src/hotspot/hotspot-anchor.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -11230,27 +11595,34 @@ var DEFAULT_REFERENCE_FOV = 75;
 var MIN_ANGULAR_SIZE = 0.01;
 var MAX_ANGULAR_SIZE = 179;
 var DRAG_EPSILON_DEGREES = 1e-3;
+var SELECTION_BORDER_POINTS = [
+  [-0.5, -0.5, 1e-3],
+  [0.5, -0.5, 1e-3],
+  [0.5, 0.5, 1e-3],
+  [-0.5, 0.5, 1e-3],
+  [-0.5, -0.5, 1e-3]
+];
 var TOOLTIP_WORLD_BOX = new Box34();
 var TOOLTIP_LOCAL_BOX = new Box34();
-var TOOLTIP_CORNER = new Vector314();
+var TOOLTIP_CORNER = new Vector315();
 var TOOLTIP_INVERSE = new Matrix44();
-var TOOLTIP_WORLD_CORNER = new Vector314();
-var TOOLTIP_PROJECTED = new Vector314();
-var TOOLTIP_RAY_ORIGIN = new Vector314();
-var TOOLTIP_RAY_FAR = new Vector314();
-var TOOLTIP_RAY_DIRECTION = new Vector314();
+var TOOLTIP_WORLD_CORNER = new Vector315();
+var TOOLTIP_PROJECTED = new Vector315();
+var TOOLTIP_RAY_ORIGIN = new Vector315();
+var TOOLTIP_RAY_FAR = new Vector315();
+var TOOLTIP_RAY_DIRECTION = new Vector315();
 var TOOLTIP_RAY = new Ray();
 var TOOLTIP_PLANE = new Plane();
-var TOOLTIP_INTERSECTION = new Vector314();
-var TOOLTIP_PLANE_NORMAL = new Vector314();
-var TOOLTIP_PLANE_POINT = new Vector314();
+var TOOLTIP_INTERSECTION = new Vector315();
+var TOOLTIP_PLANE_NORMAL = new Vector315();
+var TOOLTIP_PLANE_POINT = new Vector315();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? MathUtils6.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(MathUtils6.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? MathUtils7.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(MathUtils7.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -11263,32 +11635,32 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return MathUtils6.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return MathUtils7.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = MathUtils6.clamp(
+  const safeWidth = MathUtils7.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = MathUtils6.clamp(
+  const safeHeight = MathUtils7.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(MathUtils6.degToRad(safeWidth) / 2),
-    Math.tan(MathUtils6.degToRad(safeHeight) / 2)
+    Math.tan(MathUtils7.degToRad(safeWidth) / 2),
+    Math.tan(MathUtils7.degToRad(safeHeight) / 2)
   );
   return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
 }
 function createSurfaceQuaternion(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = MathUtils6.degToRad(position.pitch);
-  const yaw = MathUtils6.degToRad(position.yaw);
-  const localUp = new Vector314(
+  const pitch = MathUtils7.degToRad(position.pitch);
+  const yaw = MathUtils7.degToRad(position.yaw);
+  const localUp = new Vector315(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -11308,7 +11680,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return MathUtils6.radToDeg(aVector.angleTo(bVector));
+  return MathUtils7.radToDeg(aVector.angleTo(bVector));
 }
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
@@ -11522,6 +11894,7 @@ function HotspotAnchor({
   rotation = 0,
   renderOrder = 0,
   visible = true,
+  selected = false,
   draggable = false,
   interactive = true,
   pointerEvents = "auto",
@@ -11539,19 +11912,19 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = useContext20(PanoramaViewContext);
-  const hotspotTargetRegistry = useContext20(HotspotTargetRegistryContext);
-  const eventBus = useContext20(PanoEventBusContext);
+  const controlsRef = useContext21(PanoramaViewContext);
+  const hotspotTargetRegistry = useContext21(HotspotTargetRegistryContext);
+  const eventBus = useContext21(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = useThree18();
-  const groupRef = useRef24(null);
-  const tooltipAnchorRef = useRef24(null);
-  const dragStateRef = useRef24(null);
-  const suppressNextClickRef = useRef24(false);
-  const [hovered, setHovered] = useState12(false);
-  const [dragging, setDragging] = useState12(false);
-  const [pinned, setPinned] = useState12(false);
-  const tooltipContent = useMemo18(
+  const { camera, size } = useThree19();
+  const groupRef = useRef25(null);
+  const tooltipAnchorRef = useRef25(null);
+  const dragStateRef = useRef25(null);
+  const suppressNextClickRef = useRef25(false);
+  const [hovered, setHovered] = useState13(false);
+  const [dragging, setDragging] = useState13(false);
+  const [pinned, setPinned] = useState13(false);
+  const tooltipContent = useMemo19(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
@@ -11573,22 +11946,26 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = useMemo18(
+  const worldPosition = useMemo19(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = useMemo18(
+  const surfaceQuaternion3 = useMemo19(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = useMemo18(() => {
+  const focusGeometry = useMemo19(() => {
     const planeGeometry = new PlaneGeometry4(1, 1);
     const geometry = new EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
     return geometry;
   }, []);
+  const eventHovered = useRef25(false);
+  useEffect24(() => {
+    if (!visible || !interactive || pointerEvents === "none") eventHovered.current = false;
+  }, [visible, interactive, pointerEvents]);
   const acceptsPointer = acceptsHotspotPointerEvents(interactive, pointerEvents);
   const canActivateFromKeyboard = Boolean(
     visible && interactive && (onClick || tooltipTrigger === "click")
@@ -11673,7 +12050,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  useLayoutEffect4(() => {
+  useLayoutEffect7(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -11716,7 +12093,7 @@ function HotspotAnchor({
     worldHeight,
     worldWidth
   ]);
-  useFrame13((state) => {
+  useFrame14((state) => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -11834,6 +12211,13 @@ function HotspotAnchor({
       } : void 0,
       onPointerOut: acceptsPointer ? (event) => {
         if (!dragStateRef.current) {
+          if (!visible || event.nativeEvent.pointerType === "touch" || !eventHovered.current) return;
+          const inside = event.intersections.some(({ object }) => {
+            for (let node = object; node; node = node.parent) if (node === groupRef.current) return true;
+            return false;
+          });
+          if (inside) return;
+          eventHovered.current = false;
           setHovered(false);
           onHoverChange?.(
             false,
@@ -11843,6 +12227,8 @@ function HotspotAnchor({
       } : void 0,
       onPointerOver: acceptsPointer ? (event) => {
         if (!dragStateRef.current) {
+          if (!visible || event.nativeEvent.pointerType === "touch" || eventHovered.current) return;
+          eventHovered.current = true;
           setHovered(true);
           onHoverChange?.(
             true,
@@ -11852,18 +12238,28 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx24(
+        focused ? focusContent ?? /* @__PURE__ */ jsx26(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx24("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx26("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx24("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx24(
+        selected && useAngularScale ? /* @__PURE__ */ jsx26(
+          HotspotStrokeLine,
+          {
+            points: SELECTION_BORDER_POINTS,
+            color: "#ffb300",
+            lineWidth: 3,
+            opacity: 1,
+            renderOrder: renderOrder + 1
+          }
+        ) : null,
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx26("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx26(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -11884,7 +12280,7 @@ import {
   MeshBasicMaterial,
   Vector2 as Vector24
 } from "three";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new Vector24();
 var RAYCAST_HITS = [];
@@ -11987,8 +12383,8 @@ function HotspotPlane({
   opacity
 }) {
   return /* @__PURE__ */ jsxs16("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ jsx25("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx27("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx27(
       PanoBasicMaterial,
       {
         target: "hotspot",
@@ -12004,12 +12400,12 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = useThree19((state) => state.gl);
-  const [texture, setTexture] = useState13(null);
-  const onLoadRef = useRef25(onLoad);
-  const onErrorRef = useRef25(onError);
+  const gl = useThree20((state) => state.gl);
+  const [texture, setTexture] = useState14(null);
+  const onLoadRef = useRef26(onLoad);
+  const onErrorRef = useRef26(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect25(() => {
@@ -12068,11 +12464,11 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx26(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx26(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx28(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx28(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect26, useRef as useRef26, useState as useState14 } from "react";
+import { useEffect as useEffect26, useRef as useRef27, useState as useState15 } from "react";
 import {
   CanvasTexture,
   ClampToEdgeWrapping as ClampToEdgeWrapping4,
@@ -12080,7 +12476,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter3,
   SRGBColorSpace as SRGBColorSpace5
 } from "three";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -12269,9 +12665,9 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = useState14(null);
-  const onLoadRef = useRef26(onLoad);
-  const onErrorRef = useRef26(onError);
+  const [texture, setTexture] = useState15(null);
+  const onLoadRef = useRef27(onLoad);
+  const onErrorRef = useRef27(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect26(() => {
@@ -12300,20 +12696,20 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ jsx27(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx27(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx29(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx29(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx27(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx29(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx27(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx29(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-import { useFrame as useFrame14, useThree as useThree20 } from "@react-three/fiber";
-import { useEffect as useEffect27, useRef as useRef27, useState as useState15 } from "react";
+import { useFrame as useFrame15, useThree as useThree21 } from "@react-three/fiber";
+import { useEffect as useEffect27, useRef as useRef28, useState as useState16 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
   LinearFilter as LinearFilter7,
@@ -12321,7 +12717,7 @@ import {
   SRGBColorSpace as SRGBColorSpace6,
   TextureLoader as TextureLoader5
 } from "three";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -12335,10 +12731,10 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = useThree20((state) => state.gl);
-  const [texture, setTexture] = useState15(null);
-  const onErrorRef = useRef27(onError);
-  const onLoadProgressRef = useRef27(onLoadProgress);
+  const gl = useThree21((state) => state.gl);
+  const [texture, setTexture] = useState16(null);
+  const onErrorRef = useRef28(onError);
+  const onLoadProgressRef = useRef28(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
   useEffect27(() => {
@@ -12411,14 +12807,14 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = useState15(0);
-  const elapsedRef = useRef27(0);
-  const frameIndexRef = useRef27(0);
-  const endedRef = useRef27(false);
-  const lastPlaybackStateRef = useRef27(null);
-  const onFrameChangeRef = useRef27(onFrameChange);
-  const onPlaybackStateChangeRef = useRef27(onPlaybackStateChange);
-  const onEndedRef = useRef27(onEnded);
+  const [frameIndex, setFrameIndex] = useState16(0);
+  const elapsedRef = useRef28(0);
+  const frameIndexRef = useRef28(0);
+  const endedRef = useRef28(false);
+  const lastPlaybackStateRef = useRef28(null);
+  const onFrameChangeRef = useRef28(onFrameChange);
+  const onPlaybackStateChangeRef = useRef28(onPlaybackStateChange);
+  const onEndedRef = useRef28(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
@@ -12467,7 +12863,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  useFrame14((_, deltaSeconds) => {
+  useFrame15((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -12497,12 +12893,12 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx28(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx28(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx30(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx30(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
-import { useThree as useThree21 } from "@react-three/fiber";
-import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect5, useRef as useRef28, useState as useState16 } from "react";
+import { useThree as useThree22 } from "@react-three/fiber";
+import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect8, useRef as useRef29, useState as useState17 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
   LinearFilter as LinearFilter8,
@@ -12563,7 +12959,7 @@ function mountTextureVideo(video, canvas) {
 }
 
 // src/hotspot/video-hotspot.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -12571,9 +12967,9 @@ function clampVolume2(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture(id, poster, onError) {
-  const gl = useThree21((state) => state.gl);
-  const [texture, setTexture] = useState16(null);
-  const onErrorRef = useRef28(onError);
+  const gl = useThree22((state) => state.gl);
+  const [texture, setTexture] = useState17(null);
+  const onErrorRef = useRef29(onError);
   onErrorRef.current = onError;
   useEffect28(() => {
     let active = true;
@@ -12630,11 +13026,11 @@ function useVideoResource({
   poster,
   src
 }) {
-  const gl = useThree21((state) => state.gl);
-  const [resource, setResource] = useState16(null);
-  const onEndedRef = useRef28(onEnded);
-  const onErrorRef = useRef28(onError);
-  const onPlaybackStateChangeRef = useRef28(onPlaybackStateChange);
+  const gl = useThree22((state) => state.gl);
+  const [resource, setResource] = useState17(null);
+  const onEndedRef = useRef29(onEnded);
+  const onErrorRef = useRef29(onError);
+  const onPlaybackStateChangeRef = useRef29(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
@@ -12708,7 +13104,7 @@ function useVideoResource({
       texture.dispose();
     };
   }, [crossOrigin, gl, id, playsInline, poster, src]);
-  useLayoutEffect5(() => {
+  useLayoutEffect8(() => {
     if (!resource) {
       return;
     }
@@ -12751,11 +13147,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture(id, poster, onError);
-  const onPlaybackErrorRef = useRef28(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef28(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef29(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef29(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useLayoutEffect5(() => {
+  useLayoutEffect8(() => {
     if (!resource) {
       return;
     }
@@ -12788,12 +13184,12 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx29(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx29(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ jsx31(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx31(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
-import { useFrame as useFrame15, useThree as useThree22 } from "@react-three/fiber";
-import { useEffect as useEffect29, useRef as useRef29, useState as useState17 } from "react";
+import { useFrame as useFrame16, useThree as useThree23 } from "@react-three/fiber";
+import { useEffect as useEffect29, useRef as useRef30, useState as useState18 } from "react";
 import {
   CanvasTexture as CanvasTexture2,
   ClampToEdgeWrapping as ClampToEdgeWrapping7,
@@ -12804,10 +13200,10 @@ import {
 } from "three";
 
 // src/hotspot/audio-spatial.ts
-import { MathUtils as MathUtils7, Vector3 as Vector315 } from "three";
-var LOOK_DIR = new Vector315();
-var SOURCE_DIR = new Vector315();
-var RIGHT_DIR = new Vector315();
+import { MathUtils as MathUtils8, Vector3 as Vector316 } from "three";
+var LOOK_DIR = new Vector316();
+var SOURCE_DIR = new Vector316();
+var RIGHT_DIR = new Vector316();
 function clampAudioVolume(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -12832,11 +13228,11 @@ function lookRangeGain(angleDegrees, range) {
 function audioSpatialFromView(camera, position, range) {
   camera.getWorldDirection(LOOK_DIR);
   SOURCE_DIR.copy(panoPositionToVector3(position)).normalize();
-  const angleDegrees = MathUtils7.radToDeg(
-    Math.acos(MathUtils7.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
+  const angleDegrees = MathUtils8.radToDeg(
+    Math.acos(MathUtils8.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
   );
   RIGHT_DIR.set(1, 0, 0).applyQuaternion(camera.quaternion);
-  const pan = MathUtils7.clamp(
+  const pan = MathUtils8.clamp(
     Math.atan2(SOURCE_DIR.dot(RIGHT_DIR), SOURCE_DIR.dot(LOOK_DIR)) / (Math.PI / 2),
     -1,
     1
@@ -12848,7 +13244,7 @@ function audioSpatialFromView(camera, position, range) {
 }
 
 // src/hotspot/audio-hotspot.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -12912,7 +13308,7 @@ function createSpeakerTexture(state) {
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = useState17({ playing: null, stopped: null });
+  const [textures, setTextures] = useState18({ playing: null, stopped: null });
   useEffect29(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
@@ -12929,9 +13325,9 @@ function useSpeakerTextures(enabled) {
   return textures;
 }
 function useIconTexture(icon, enabled, onError, id) {
-  const gl = useThree22((state) => state.gl);
-  const [texture, setTexture] = useState17(null);
-  const onErrorRef = useRef29(onError);
+  const gl = useThree23((state) => state.gl);
+  const [texture, setTexture] = useState18(null);
+  const onErrorRef = useRef30(onError);
   onErrorRef.current = onError;
   useEffect29(() => {
     let active = true;
@@ -12987,15 +13383,16 @@ function useAudioHowl({
   onPlaybackError,
   onPlaybackStateChange,
   playing,
-  src
+  src,
+  format
 }) {
-  const [howl, setHowl] = useState17(null);
-  const playingRef = useRef29(playing);
-  const loopRef = useRef29(loop ?? false);
-  const onEndedRef = useRef29(onEnded);
-  const onErrorRef = useRef29(onError);
-  const onPlaybackErrorRef = useRef29(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef29(onPlaybackStateChange);
+  const [howl, setHowl] = useState18(null);
+  const playingRef = useRef30(playing);
+  const loopRef = useRef30(loop ?? false);
+  const onEndedRef = useRef30(onEnded);
+  const onErrorRef = useRef30(onError);
+  const onPlaybackErrorRef = useRef30(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef30(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -13003,6 +13400,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
+  const formatsKey = sourceList(format).join("\0");
   useEffect29(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
@@ -13012,6 +13410,7 @@ function useAudioHowl({
     let active = true;
     const handle = createUnlockingHowl({
       src: sources,
+      format: formatsKey ? formatsKey.split("\0") : void 0,
       loop: loopRef.current,
       crossOrigin,
       isActive: () => active,
@@ -13039,7 +13438,7 @@ function useAudioHowl({
       active = false;
       handle.dispose();
     };
-  }, [crossOrigin, id, sourcesKey]);
+  }, [crossOrigin, id, sourcesKey, formatsKey]);
   useEffect29(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
@@ -13048,6 +13447,7 @@ function useAudioHowl({
 function AudioHotspot({
   id,
   src,
+  format,
   playing,
   loop = false,
   muted = false,
@@ -13068,7 +13468,7 @@ function AudioHotspot({
   ...anchorProps
 }) {
   usePanoMediaActivationIntent(playing);
-  const camera = useThree22((state) => state.camera);
+  const camera = useThree23((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
     id,
@@ -13078,17 +13478,18 @@ function AudioHotspot({
     onPlaybackError,
     onPlaybackStateChange,
     playing,
-    src
+    src,
+    format
   });
   const speakerTextures = useSpeakerTextures(marker && !icon);
   const stoppedIconTexture = useIconTexture(icon, marker, onError, id);
   const playingIconTexture = useIconTexture(playingIcon, marker, onError, id);
   const markerTexture = playing ? playingIconTexture ?? stoppedIconTexture ?? speakerTextures.playing : stoppedIconTexture ?? speakerTextures.stopped;
-  const playingRef = useRef29(playing);
+  const playingRef = useRef30(playing);
   playingRef.current = playing;
-  const mutedRef = useRef29(muted);
-  const volumeRef = useRef29(volume);
-  const rangeRef = useRef29(range);
+  const mutedRef = useRef30(muted);
+  const volumeRef = useRef30(volume);
+  const rangeRef = useRef30(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
@@ -13120,7 +13521,7 @@ function AudioHotspot({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [howl, pauseWhenHidden]);
-  useFrame15(() => {
+  useFrame16(() => {
     if (!howl) {
       return;
     }
@@ -13133,21 +13534,21 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ jsx30(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx30(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx32(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
-import { useEffect as useEffect30, useRef as useRef30, useState as useState18 } from "react";
-import { useFrame as useFrame16, useThree as useThree23 } from "@react-three/fiber";
+import { useEffect as useEffect30, useRef as useRef31, useState as useState19 } from "react";
+import { useFrame as useFrame17, useThree as useThree24 } from "@react-three/fiber";
 import {
   CanvasTexture as CanvasTexture3,
   ClampToEdgeWrapping as ClampToEdgeWrapping8,
   LinearFilter as LinearFilter10,
-  MathUtils as MathUtils8,
-  PerspectiveCamera as PerspectiveCamera6,
+  MathUtils as MathUtils9,
+  PerspectiveCamera as PerspectiveCamera7,
   SRGBColorSpace as SRGBColorSpace9
 } from "three";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var TEXT_RASTER_SUPERSAMPLE = 2;
 var TEXT_RASTER_MAX_LONG_SIDE = 4096;
@@ -13218,7 +13619,7 @@ function projectedDevicePixels(angleDeg, fovDeg, viewportHeight) {
   }
   const fov = Math.min(179, Math.max(1, resolvePositive(fovDeg, DEFAULT_REFERENCE_FOV2)));
   const angle = Math.min(179, Math.max(0.01, Math.abs(angleDeg)));
-  return Math.tan(MathUtils8.degToRad(angle) / 2) / Math.tan(MathUtils8.degToRad(fov) / 2) * viewportHeight;
+  return Math.tan(MathUtils9.degToRad(angle) / 2) / Math.tan(MathUtils9.degToRad(fov) / 2) * viewportHeight;
 }
 function snapRasterLongSide(screenLong, layoutLong) {
   if (!(screenLong > 0)) {
@@ -13414,13 +13815,13 @@ function createTextTexture(text, width, height, style, rasterLong) {
   return texture;
 }
 function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
-  const size = useThree23((state) => state.size);
-  const camera = useThree23((state) => state.camera);
-  const getPixelRatio = useThree23((state) => state.gl.getPixelRatio);
+  const size = useThree24((state) => state.size);
+  const camera = useThree24((state) => state.camera);
+  const getPixelRatio = useThree24((state) => state.gl.getPixelRatio);
   const measure = () => {
     const pixelRatio = getPixelRatio();
     const viewportHeight = size.height * (Number.isFinite(pixelRatio) && pixelRatio > 0 ? pixelRatio : 1);
-    const cameraFov = camera instanceof PerspectiveCamera6 ? camera.fov : DEFAULT_REFERENCE_FOV2;
+    const cameraFov = camera instanceof PerspectiveCamera7 ? camera.fov : DEFAULT_REFERENCE_FOV2;
     const screenLong = Math.max(
       projectedDevicePixels(
         width * resolveScale2(scale),
@@ -13439,12 +13840,12 @@ function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
       Math.max(layout.canvasWidth, layout.canvasHeight)
     );
   };
-  const [rasterLong, setRasterLong] = useState18(measure);
+  const [rasterLong, setRasterLong] = useState19(measure);
   const measured = measure();
   if (measured !== rasterLong) {
     setRasterLong(measured);
   }
-  useFrame16(() => {
+  useFrame17(() => {
     const next = measure();
     setRasterLong((current) => current === next ? current : next);
   });
@@ -13452,9 +13853,9 @@ function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
 }
 function useTextTexture(text, width, height, style, scale, scaleMode, referenceFov, onLoad, onError) {
   const rasterLong = useRasterLongSide(width, height, scale, scaleMode, referenceFov);
-  const [texture, setTexture] = useState18(null);
-  const onLoadRef = useRef30(onLoad);
-  const onErrorRef = useRef30(onError);
+  const [texture, setTexture] = useState19(null);
+  const onLoadRef = useRef31(onLoad);
+  const onErrorRef = useRef31(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect30(() => {
@@ -13567,13 +13968,13 @@ function TextHotspot({
     onLoad,
     onError
   );
-  return /* @__PURE__ */ jsx31(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx31(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 import { Html } from "@react-three/drei";
 import { DoubleSide as DoubleSide4 } from "three";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -13640,8 +14041,8 @@ function IframeHotspot({
       width,
       children: [
         /* @__PURE__ */ jsxs17("mesh", { children: [
-          /* @__PURE__ */ jsx32("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx34("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ jsx34(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -13652,7 +14053,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -13667,7 +14068,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ jsx32(
+            children: /* @__PURE__ */ jsx34(
               "iframe",
               {
                 allow,
@@ -13689,7 +14090,7 @@ function IframeHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useEffect as useEffect31, useMemo as useMemo19, useRef as useRef32 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo20, useRef as useRef32 } from "react";
 import {
   BufferGeometry as BufferGeometry2,
   DoubleSide as DoubleSide5,
@@ -13700,85 +14101,7 @@ import {
   Vector2 as Vector25,
   Vector3 as Vector317
 } from "three";
-
-// src/hotspot/hotspot-stroke-line.tsx
-import { Line } from "@react-three/drei";
-import { useFrame as useFrame17, useThree as useThree24 } from "@react-three/fiber";
-import { useLayoutEffect as useLayoutEffect6, useRef as useRef31 } from "react";
-import {
-  MathUtils as MathUtils9,
-  PerspectiveCamera as PerspectiveCamera7,
-  Vector3 as Vector316
-} from "three";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var LINE_WORLD_POSITION = new Vector316();
-function applyScreenSpaceDashScale(object, camera, viewportHeight) {
-  const material = object?.material;
-  if (!object || typeof material?.dashScale !== "number") {
-    return;
-  }
-  object.getWorldPosition(LINE_WORLD_POSITION);
-  const depth = Math.max(camera.position.distanceTo(LINE_WORLD_POSITION), 1);
-  const fov = camera instanceof PerspectiveCamera7 ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils9.degToRad(fov) * 0.5) * depth);
-}
-function resolveDash(dashSize, gapSize) {
-  if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
-    return { dashed: false, dashSize: 1, gapSize: 1 };
-  }
-  return {
-    dashed: true,
-    dashSize,
-    gapSize: Number.isFinite(gapSize) ? Math.max(0, gapSize) : dashSize
-  };
-}
-function HotspotStrokeLine({
-  points,
-  color,
-  lineWidth,
-  opacity,
-  renderOrder,
-  dashSize,
-  gapSize
-}) {
-  const lineRef = useRef31(null);
-  const { camera, size } = useThree24();
-  const dash = resolveDash(dashSize, gapSize);
-  useLayoutEffect6(() => {
-    if (!dash.dashed) {
-      return;
-    }
-    applyScreenSpaceDashScale(lineRef.current, camera, size.height);
-  }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
-  useFrame17((state) => {
-    if (!dash.dashed) {
-      return;
-    }
-    applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
-  });
-  return /* @__PURE__ */ jsx33(
-    Line,
-    {
-      ref: lineRef,
-      alphaToCoverage: true,
-      color,
-      dashed: dash.dashed,
-      dashSize: dash.dashSize,
-      depthTest: true,
-      depthWrite: false,
-      gapSize: dash.gapSize,
-      lineWidth: Math.max(0.5, lineWidth),
-      opacity,
-      points,
-      renderOrder,
-      transparent: true,
-      worldUnits: false
-    }
-  );
-}
-
-// src/hotspot/polygon-hotspot.tsx
-import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -14008,10 +14331,10 @@ function makeStrokePositions(vertices, center) {
   return points;
 }
 function translateVertices(vertices, from, to) {
-  const yawOffset = normalizePanoYaw(to.yaw - from.yaw);
+  const yawOffset2 = normalizePanoYaw(to.yaw - from.yaw);
   const pitchOffset = to.pitch - from.pitch;
   return vertices.map((vertex) => ({
-    yaw: normalizePanoYaw(vertex.yaw + yawOffset),
+    yaw: normalizePanoYaw(vertex.yaw + yawOffset2),
     pitch: clampPanoPitch(vertex.pitch + pitchOffset)
   }));
 }
@@ -14034,14 +14357,14 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = useMemo19(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = useMemo20(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo19(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = useMemo19(
+  const center = useMemo20(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = useMemo20(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = useMemo19(
+  const strokePoints = useMemo20(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
@@ -14081,7 +14404,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx34(
+      focusContent: /* @__PURE__ */ jsx35(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14103,7 +14426,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx34("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx35(
           "meshBasicMaterial",
           {
             color: fill,
@@ -14113,7 +14436,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -14131,14 +14454,14 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useEffect as useEffect32, useMemo as useMemo20, useRef as useRef33 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo21, useRef as useRef33 } from "react";
 import {
   MathUtils as MathUtils10,
   Matrix4 as Matrix46,
   Quaternion as Quaternion5,
   Vector3 as Vector318
 } from "three";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -14229,10 +14552,10 @@ function makeLinePositions(vertices, center) {
   return points;
 }
 function translateVertices2(vertices, from, to) {
-  const yawOffset = normalizePanoYaw(to.yaw - from.yaw);
+  const yawOffset2 = normalizePanoYaw(to.yaw - from.yaw);
   const pitchOffset = to.pitch - from.pitch;
   return vertices.map((vertex) => ({
-    yaw: normalizePanoYaw(vertex.yaw + yawOffset),
+    yaw: normalizePanoYaw(vertex.yaw + yawOffset2),
     pitch: clampPanoPitch(vertex.pitch + pitchOffset)
   }));
 }
@@ -14255,10 +14578,10 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = useMemo20(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = useMemo21(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo20(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = useMemo20(
+  const center = useMemo21(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = useMemo21(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
@@ -14278,7 +14601,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14292,7 +14615,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx35(
+      focusContent: /* @__PURE__ */ jsx36(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14313,7 +14636,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx36(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14330,13 +14653,14 @@ function PolylineHotspot({
 }
 
 // src/project-scenes.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function isMedia(hotspot) {
   return hotspot.type === "audio" || hotspot.type === "video" || hotspot.type === "sequence";
 }
-function handleProjectHotspotClick(hotspot, sceneId, interaction, callback, navigate, toggle) {
+function handleProjectHotspotClick(hotspot, sceneId, interaction, callback, navigate, toggle, execute, trigger = "click", onEvent) {
   const nativeWasPrevented = interaction.nativeEvent.defaultPrevented;
   const event = {
+    trigger,
     sceneId,
     hotspot,
     interaction,
@@ -14345,15 +14669,21 @@ function handleProjectHotspotClick(hotspot, sceneId, interaction, callback, navi
       event.defaultPrevented = true;
     }
   };
-  callback?.(event);
+  onEvent?.(event);
+  if (trigger === "click") callback?.(event);
   if (event.defaultPrevented || !nativeWasPrevented && interaction.nativeEvent.defaultPrevented)
     return;
-  if (hotspot.action) navigate(hotspot.action.sceneId);
-  else if (isMedia(hotspot)) toggle();
+  const action = hotspotAction(hotspot, trigger);
+  if (action?.type === "scene") navigate(action.sceneId);
+  else if (action) {
+    if (!execute) throw new Error("No handler for hotspot action");
+    return execute(action, event);
+  } else if (trigger === "click" && isMedia(hotspot)) toggle();
 }
 function hotspotProps({
   type: _type,
   action: _action,
+  events: _events,
   label: _label,
   ...props
 }) {
@@ -14363,13 +14693,14 @@ function ProjectHotspotSource({
   hotspot,
   playing,
   onClick,
+  onHoverChange,
   onEnded,
   onError
 }) {
-  const common = { ariaLabel: hotspot.label || hotspot.id, onClick };
+  const common = { ariaLabel: hotspot.label || hotspot.id, onClick, onHoverChange };
   switch (hotspot.type) {
     case "image":
-      return /* @__PURE__ */ jsx36(
+      return /* @__PURE__ */ jsx37(
         ImageHotspot,
         {
           ...hotspotProps(hotspot),
@@ -14378,7 +14709,7 @@ function ProjectHotspotSource({
         }
       );
     case "graphic":
-      return /* @__PURE__ */ jsx36(
+      return /* @__PURE__ */ jsx37(
         GraphicHotspot,
         {
           ...hotspotProps(hotspot),
@@ -14387,9 +14718,9 @@ function ProjectHotspotSource({
         }
       );
     case "text":
-      return /* @__PURE__ */ jsx36(TextHotspot, { ...hotspotProps(hotspot), ...common, onError });
+      return /* @__PURE__ */ jsx37(TextHotspot, { ...hotspotProps(hotspot), ...common, onError });
     case "iframe":
-      return /* @__PURE__ */ jsx36(
+      return /* @__PURE__ */ jsx37(
         IframeHotspot,
         {
           ...hotspotProps(hotspot),
@@ -14399,11 +14730,11 @@ function ProjectHotspotSource({
         }
       );
     case "polygon":
-      return /* @__PURE__ */ jsx36(PolygonHotspot, { ...hotspotProps(hotspot), ...common });
+      return /* @__PURE__ */ jsx37(PolygonHotspot, { ...hotspotProps(hotspot), ...common });
     case "polyline":
-      return /* @__PURE__ */ jsx36(PolylineHotspot, { ...hotspotProps(hotspot), ...common });
+      return /* @__PURE__ */ jsx37(PolylineHotspot, { ...hotspotProps(hotspot), ...common });
     case "sequence":
-      return /* @__PURE__ */ jsx36(
+      return /* @__PURE__ */ jsx37(
         SequenceHotspot,
         {
           ...hotspotProps(hotspot),
@@ -14414,7 +14745,7 @@ function ProjectHotspotSource({
         }
       );
     case "video":
-      return /* @__PURE__ */ jsx36(
+      return /* @__PURE__ */ jsx37(
         VideoHotspot,
         {
           ...hotspotProps(hotspot),
@@ -14426,7 +14757,7 @@ function ProjectHotspotSource({
         }
       );
     case "audio":
-      return /* @__PURE__ */ jsx36(
+      return /* @__PURE__ */ jsx37(
         AudioHotspot,
         {
           ...hotspotProps(hotspot),
@@ -14444,10 +14775,12 @@ function ProjectHotspot({
   sceneId,
   navigate,
   onHotspotClick,
+  onHotspotEvent,
   onHotspotError,
-  renderHotspot
+  renderHotspot,
+  execute
 }) {
-  const [playing, setPlaying] = useState19(
+  const [playing, setPlaying] = useState20(
     "playing" in hotspot ? hotspot.playing ?? false : false
   );
   const togglePlayback = () => setPlaying((value) => !value);
@@ -14455,20 +14788,26 @@ function ProjectHotspot({
     if (isMedia(hotspot)) setPlaying(false);
     onHotspotError?.({ sceneId, hotspot, error });
   };
-  const onClick = (interaction) => handleProjectHotspotClick(
-    hotspot,
-    sceneId,
-    interaction,
-    onHotspotClick,
-    navigate,
-    togglePlayback
-  );
-  const renderDefault = () => /* @__PURE__ */ jsx36(
+  const dispatch = (trigger, interaction) => {
+    if (hotspot.visible === false || hotspot.interactive === false || interaction.source === "pointer" && hotspot.pointerEvents === "none") return;
+    if (trigger !== "click" && (interaction.source !== "pointer" || "pointerType" in interaction.nativeEvent && interaction.nativeEvent.pointerType === "touch")) return;
+    const failed = (error) => onHotspotError?.({ sceneId, hotspot, error, trigger });
+    try {
+      const result = handleProjectHotspotClick(hotspot, sceneId, interaction, onHotspotClick, navigate, togglePlayback, execute, trigger, onHotspotEvent);
+      if (result) void Promise.resolve(result).catch(failed);
+    } catch (error) {
+      failed(error);
+    }
+  };
+  const onClick = (event) => dispatch("click", event);
+  const onHoverChange = (hovered, event) => dispatch(hovered ? "pointerenter" : "pointerleave", event);
+  const renderDefault = () => /* @__PURE__ */ jsx37(
     ProjectHotspotSource,
     {
       hotspot,
       playing,
       onClick,
+      onHoverChange,
       onEnded: () => setPlaying(false),
       onError: reportError
     }
@@ -14477,6 +14816,7 @@ function ProjectHotspot({
     sceneId,
     playing,
     onClick,
+    onHoverChange,
     togglePlayback,
     reportError,
     renderDefault
@@ -14489,25 +14829,28 @@ function ProjectScenes({
   onActiveSceneIdChange,
   onSceneReady,
   onHotspotClick,
+  onHotspotEvent,
   onHotspotError,
+  onPopupRequest,
+  onCustomAction,
   renderHotspot,
   ...options
 }) {
-  const controls = useContext21(PanoramaViewContext);
+  const controls = useContext22(PanoramaViewContext);
   if (!controls)
     throw new Error("<ProjectScenes> must be rendered inside <PanoViewer>.");
-  const [selection, setSelection] = useState19({
+  const [selection, setSelection] = useState20({
     project,
     id: project.initialSceneId
   });
   if (selection.project !== project)
     setSelection({ project, id: project.initialSceneId });
   const currentId = activeSceneId ?? (selection.project === project ? selection.id : project.initialSceneId);
-  const entries = useMemo21(
+  const entries = useMemo22(
     () => new Map(project.scenes.map((entry) => [entry.scene.id, entry])),
     [project]
   );
-  const scenes = useMemo21(
+  const scenes = useMemo22(
     () => project.scenes.map((entry) => entry.scene),
     [project]
   );
@@ -14516,7 +14859,7 @@ function ProjectScenes({
     if (activeSceneId === void 0) setSelection({ project, id });
     onActiveSceneIdChange?.(id);
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Scenes,
     {
       ...options,
@@ -14528,12 +14871,27 @@ function ProjectScenes({
         if (view) controls.current?.setView(view, { immediate: true });
         onSceneReady?.(id);
       },
-      renderHotspots: (scene) => entries.get(scene.id)?.hotspots.map((hotspot) => /* @__PURE__ */ jsx36(
+      renderHotspots: (scene) => entries.get(scene.id)?.hotspots.map((hotspot) => /* @__PURE__ */ jsx37(
         ProjectHotspot,
         {
           hotspot,
           sceneId: scene.id,
           navigate,
+          execute: (action, event) => {
+            if (action.type === "view") {
+              return controls.current?.lookTo(action.view, { fov: action.view.fov, duration: action.duration }).then(() => {
+              });
+            } else if (action.type === "custom") {
+              if (!onCustomAction) throw new Error("Custom action requires an onCustomAction handler");
+              return onCustomAction({ ...event, action });
+            } else {
+              const popup = project.popups?.find((entry) => entry.id === action.popupId);
+              if (!popup) throw new Error(`Popup does not exist: ${action.popupId}`);
+              if (!onPopupRequest) throw new Error("Popup action requires an onPopupRequest handler");
+              onPopupRequest({ sceneId: scene.id, hotspot, popup });
+            }
+          },
+          onHotspotEvent,
           onHotspotClick,
           onHotspotError,
           renderHotspot
@@ -14545,7 +14903,7 @@ function ProjectScenes({
 }
 
 // src/background-audio.tsx
-import { useContext as useContext22, useEffect as useEffect33, useMemo as useMemo22, useRef as useRef34, useState as useState20 } from "react";
+import { useContext as useContext23, useEffect as useEffect33, useMemo as useMemo23, useRef as useRef34, useState as useState21 } from "react";
 var DEFAULT_FADE_MS = 400;
 function resolveFadeMs(value) {
   if (!Number.isFinite(value)) {
@@ -14587,12 +14945,12 @@ function BackgroundAudio({
   onEnded,
   onError
 }) {
-  const controlsRef = useContext22(PanoramaViewContext);
+  const controlsRef = useContext23(PanoramaViewContext);
   if (!controlsRef) {
     throw new Error("<BackgroundAudio> must be rendered inside <PanoViewer>.");
   }
   const isControlled = controlledPlaying !== void 0;
-  const [internalPlaying, setInternalPlaying] = useState20(defaultPlaying);
+  const [internalPlaying, setInternalPlaying] = useState21(defaultPlaying);
   const playing = isControlled ? controlledPlaying : internalPlaying;
   const urls = resolveBackgroundAudioUrls(src, sources, sceneId);
   usePanoMediaActivationIntent(playing && urls.length > 0);
@@ -14645,7 +15003,7 @@ function BackgroundAudio({
   };
   const isControlledRef = useRef34(isControlled);
   isControlledRef.current = isControlled;
-  const controller = useMemo22(
+  const controller = useMemo23(
     () => ({
       subscribe: (onStoreChange) => {
         snapshotListenersRef.current.add(onStoreChange);
@@ -14703,7 +15061,7 @@ function BackgroundAudio({
     }),
     []
   );
-  const bgmHost = useContext22(BackgroundAudioHostContext);
+  const bgmHost = useContext23(BackgroundAudioHostContext);
   useEffect33(() => {
     if (!bgmHost) {
       return;
@@ -14893,7 +15251,7 @@ function BackgroundAudio({
 }
 
 // src/pano-filter/pano-filter.tsx
-import { useContext as useContext23, useEffect as useEffect34, useMemo as useMemo23 } from "react";
+import { useContext as useContext24, useEffect as useEffect34, useMemo as useMemo24 } from "react";
 function PanoFilter({
   preset = "none",
   intensity,
@@ -14901,11 +15259,11 @@ function PanoFilter({
   colorMatrix,
   colorMatrixScope
 }) {
-  const host = useContext23(PanoFilterHostContext);
+  const host = useContext24(PanoFilterHostContext);
   if (!host) {
     throw new Error("<PanoFilter> must be rendered inside <PanoViewer>.");
   }
-  const snapshot = useMemo23(
+  const snapshot = useMemo24(
     () => resolvePanoFilterSnapshot({
       preset,
       intensity,
@@ -14932,11 +15290,11 @@ import { useFrame as useFrame18, useThree as useThree25 } from "@react-three/fib
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback9,
-  useContext as useContext24,
+  useContext as useContext25,
   useEffect as useEffect35,
   useImperativeHandle as useImperativeHandle3,
   useRef as useRef35,
-  useState as useState21
+  useState as useState22
 } from "react";
 
 // src/gyro-orientation.ts
@@ -15037,10 +15395,10 @@ var Gyro = forwardRef3(function Gyro2({
   onDisable,
   onDenied
 }, ref) {
-  const controlsRef = useContext24(PanoramaViewContext);
-  const eventBus = useContext24(PanoEventBusContext);
+  const controlsRef = useContext25(PanoramaViewContext);
+  const eventBus = useContext25(PanoEventBusContext);
   const { gl } = useThree25();
-  const [internallyDisabled, setInternallyDisabled] = useState21(false);
+  const [internallyDisabled, setInternallyDisabled] = useState22(false);
   const availableRef = useRef35(false);
   const availabilityReportedRef = useRef35(null);
   const activeRef = useRef35(false);
@@ -15393,12 +15751,12 @@ import { useThree as useThree28 } from "@react-three/fiber";
 import {
   forwardRef as forwardRef4,
   useCallback as useCallback10,
-  useContext as useContext26,
+  useContext as useContext27,
   useEffect as useEffect39,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo25,
+  useMemo as useMemo26,
   useRef as useRef39,
-  useState as useState22
+  useState as useState23
 } from "react";
 
 // src/webvr/detect.ts
@@ -15429,7 +15787,7 @@ import {
   Vector2 as Vector26,
   Vector3 as Vector320
 } from "three";
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
 var CENTER_NDC = new Vector26(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
@@ -15604,8 +15962,8 @@ function WebVRReticle({
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx37("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
+              /* @__PURE__ */ jsx38(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -15625,8 +15983,8 @@ function WebVRReticle({
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx37("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
+              /* @__PURE__ */ jsx38(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -15648,7 +16006,7 @@ function WebVRReticle({
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
             children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 "ringGeometry",
                 {
                   args: [
@@ -15661,7 +16019,7 @@ function WebVRReticle({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -15682,7 +16040,7 @@ function WebVRReticle({
 
 // src/webvr/stereo.tsx
 import { useFrame as useFrame20, useThree as useThree27 } from "@react-three/fiber";
-import { useContext as useContext25, useEffect as useEffect36, useMemo as useMemo24, useRef as useRef37 } from "react";
+import { useContext as useContext26, useEffect as useEffect36, useMemo as useMemo25, useRef as useRef37 } from "react";
 import {
   Mesh as Mesh6,
   OrthographicCamera,
@@ -15768,7 +16126,7 @@ function WebVRStereoRenderer({
   screensize
 }) {
   const { camera, gl } = useThree27();
-  const runtime = useContext25(WebVRRuntimeContext);
+  const runtime = useContext26(WebVRRuntimeContext);
   const fallbackStereoRef = useRef37(null);
   if (!fallbackStereoRef.current) {
     fallbackStereoRef.current = new StereoCamera2();
@@ -15776,7 +16134,7 @@ function WebVRStereoRenderer({
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
   const stereoRef = useRef37(stereo);
   stereoRef.current = stereo;
-  const resources = useMemo24(createDistortionResources, []);
+  const resources = useMemo25(createDistortionResources, []);
   const drawingSizeRef = useRef37(new Vector27());
   const viewportRef = useRef37(new Vector42());
   const scissorRef = useRef37(new Vector42());
@@ -16108,7 +16466,7 @@ function useWebVRWakeLock(enabled) {
 }
 
 // src/webvr/webvr.tsx
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 function initializeSettings(screensize, profile) {
   const stored = loadWebVRSettings();
   return {
@@ -16137,9 +16495,9 @@ var WebVR = forwardRef4(function WebVR2({
   onDenied,
   onUnknownDevice
 }, ref) {
-  const runtime = useContext26(WebVRRuntimeContext);
-  const controlsRef = useContext26(PanoramaViewContext);
-  const eventBus = useContext26(PanoEventBusContext);
+  const runtime = useContext27(WebVRRuntimeContext);
+  const controlsRef = useContext27(PanoramaViewContext);
+  const eventBus = useContext27(PanoEventBusContext);
   const gl = useThree28((state) => state.gl);
   const gyroRef = useRef39(null);
   const capabilitiesRef = useRef39({
@@ -16150,8 +16508,8 @@ var WebVR = forwardRef4(function WebVR2({
   const availableRef = useRef39(false);
   const modeRef = useRef39(null);
   const webXRSessionRef = useRef39(null);
-  const [mode, setMode] = useState22(null);
-  const [settings, setSettings] = useState22(
+  const [mode, setMode] = useState23(null);
+  const [settings, setSettings] = useState23(
     () => initializeSettings(screensize, profile)
   );
   const callbacksRef = useRef39({
@@ -16174,7 +16532,7 @@ var WebVR = forwardRef4(function WebVR2({
     throw new Error("<WebVR> must be rendered inside <PanoViewer>.");
   }
   const { host, xrStore } = runtime;
-  const resolvedProfile = useMemo25(
+  const resolvedProfile = useMemo26(
     () => resolveWebVRProfile(profile, settings.profileId),
     [profile, settings.profileId]
   );
@@ -16339,7 +16697,7 @@ var WebVR = forwardRef4(function WebVR2({
     setSettings(normalized);
     saveWebVRSettings(normalized);
   }, []);
-  const controller = useMemo25(
+  const controller = useMemo26(
     () => ({
       closeSetup: () => updateWebVRHost(host, { setupOpen: false }),
       enterVR,
@@ -16442,7 +16800,7 @@ var WebVR = forwardRef4(function WebVR2({
     wakelock && (mode === "mobilevr" || mode === "fake")
   );
   return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       Gyro,
       {
         ref: gyroRef,
@@ -16456,7 +16814,7 @@ var WebVR = forwardRef4(function WebVR2({
         touchMode: "off"
       }
     ),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       WebVRStereoRenderer,
       {
         mode,
@@ -16464,7 +16822,7 @@ var WebVR = forwardRef4(function WebVR2({
         screensize: settings.screensize
       }
     ),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       WebVRReticle,
       {
         dwellMs: cursorDwellMs,
@@ -16475,7 +16833,7 @@ var WebVR = forwardRef4(function WebVR2({
 });
 
 // src/use-pano-viewer.ts
-import { useMemo as useMemo26, useRef as useRef40 } from "react";
+import { useMemo as useMemo27, useRef as useRef40 } from "react";
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -16558,20 +16916,20 @@ function createPanoViewerHandle(ref) {
 }
 function usePanoViewer() {
   const ref = useRef40(null);
-  const handle = useMemo26(() => createPanoViewerHandle(ref), []);
-  return useMemo26(() => ({ ref, ...handle }), [handle]);
+  const handle = useMemo27(() => createPanoViewerHandle(ref), []);
+  return useMemo27(() => ({ ref, ...handle }), [handle]);
 }
 
 // src/video/pano-video.tsx
 import { useThree as useThree29 } from "@react-three/fiber";
 import {
   useCallback as useCallback11,
-  useContext as useContext27,
+  useContext as useContext28,
   useEffect as useEffect40,
-  useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo27,
+  useLayoutEffect as useLayoutEffect9,
+  useMemo as useMemo28,
   useRef as useRef41,
-  useState as useState23
+  useState as useState24
 } from "react";
 import {
   BackSide as BackSide4,
@@ -16583,7 +16941,7 @@ import {
   TextureLoader as TextureLoader8,
   VideoTexture as VideoTexture2
 } from "three";
-import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -16668,7 +17026,7 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture2(poster, onError) {
   const gl = useThree29((state) => state.gl);
-  const [texture, setTexture] = useState23(null);
+  const [texture, setTexture] = useState24(null);
   const onErrorRef = useRef41(onError);
   onErrorRef.current = onError;
   useEffect40(() => {
@@ -16748,7 +17106,7 @@ function PanoVideo({
   tracks: tracksProp,
   captions = true,
   controls = true,
-  yawOffset = 0,
+  yawOffset: yawOffset2 = 0,
   loop = false,
   muted = true,
   volume = 1,
@@ -16767,26 +17125,26 @@ function PanoVideo({
 }) {
   usePanoMediaActivationIntent(autoPlay);
   const gl = useThree29((state) => state.gl);
-  const host = useContext27(PanoVideoHostContext);
-  const variants = useMemo27(
+  const host = useContext28(PanoVideoHostContext);
+  const variants = useMemo28(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = useMemo27(
+  const captionAppearance = useMemo28(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = useState23(
+  const [variantId, setVariantId] = useState24(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = useState23(
+  const [trackId, setTrackId] = useState24(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = useState23(false);
+  const [ready, setReady] = useState24(false);
   const autoPlayRef = useRef41(autoPlay);
   autoPlayRef.current = autoPlay;
   const blockedRef = useRef41(false);
@@ -16839,7 +17197,7 @@ function PanoVideo({
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = useMemo27(() => {
+  const resource = useMemo28(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -16875,7 +17233,7 @@ function PanoVideo({
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  useLayoutEffect7(() => {
+  useLayoutEffect9(() => {
     if (!resource) {
       return;
     }
@@ -16943,7 +17301,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = useMemo27(
+  const controller = useMemo28(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -16995,7 +17353,7 @@ function PanoVideo({
     }),
     []
   );
-  useLayoutEffect7(() => {
+  useLayoutEffect9(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -17008,7 +17366,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  useLayoutEffect7(() => {
+  useLayoutEffect9(() => {
     if (!resource) {
       return;
     }
@@ -17173,7 +17531,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  useLayoutEffect7(() => {
+  useLayoutEffect9(() => {
     if (!resource) {
       return;
     }
@@ -17286,11 +17644,11 @@ function PanoVideo({
     activeTexture ? /* @__PURE__ */ jsxs21(
       "mesh",
       {
-        rotation: [0, MathUtils12.degToRad(90 + yawOffset), 0],
+        rotation: [0, MathUtils12.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
-          /* @__PURE__ */ jsx39("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ jsx40(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -17301,7 +17659,7 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx39(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ jsx40(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 export {
@@ -17328,6 +17686,7 @@ export {
   PanoContextMenu,
   PanoEvents,
   PanoFilter,
+  PanoOverlayPortalProvider,
   PanoVideo,
   PanoVideoControls,
   PanoViewer,
@@ -17356,6 +17715,8 @@ export {
   resolvePanoContextMenuEntries,
   unwrapPolygonVertices,
   usePanoEvents,
+  usePanoModal,
+  usePanoOverlay,
   usePanoViewer,
   validatePolygonVertices,
   validatePolylineVertices,