@ericchen1990/pano-view 3.9.0 → 4.0.0

package/dist/index.mjs

@@ -1284,8 +1284,8 @@ var require_howler = __commonJS({
               break;
             }
           }
-          if (cache && remCache) {
-            delete cache[self._src];
+          if (cache2 && remCache) {
+            delete cache2[self._src];
           }
           Howler4.noAudio = false;
           self._state = "unloaded";
@@ -1540,7 +1540,7 @@ var require_howler = __commonJS({
         _refreshBuffer: function(sound) {
           var self = this;
           sound._node.bufferSource = Howler4.ctx.createBufferSource();
-          sound._node.bufferSource.buffer = cache[self._src];
+          sound._node.bufferSource.buffer = cache2[self._src];
           if (sound._panner) {
             sound._node.bufferSource.connect(sound._panner);
           } else {
@@ -1702,11 +1702,11 @@ var require_howler = __commonJS({
           self._node.removeEventListener("ended", self._endFn, false);
         }
       };
-      var cache = {};
+      var cache2 = {};
       var loadBuffer = function(self) {
         var url = self._src;
-        if (cache[url]) {
-          self._duration = cache[url].duration;
+        if (cache2[url]) {
+          self._duration = cache2[url].duration;
           loadSound(self);
           return;
         }
@@ -1740,7 +1740,7 @@ var require_howler = __commonJS({
               self._html5 = true;
               self._webAudio = false;
               self._sounds = [];
-              delete cache[url];
+              delete cache2[url];
               self.load();
             }
           };
@@ -1760,7 +1760,7 @@ var require_howler = __commonJS({
         };
         var success = function(buffer) {
           if (buffer && self._sounds.length > 0) {
-            cache[self._src] = buffer;
+            cache2[self._src] = buffer;
             loadSound(self, buffer);
           } else {
             error();
@@ -2308,12 +2308,12 @@ import { Canvas } from "@react-three/fiber";
 import { createXRStore, XR } from "@react-three/xr";
 import {
   forwardRef as forwardRef2,
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useContext as useContext16,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo8,
-  useRef as useRef13,
+  useRef as useRef14,
   useState as useState7,
   useSyncExternalStore as useSyncExternalStore8
 } from "react";
@@ -3875,6 +3875,18 @@ import { useSyncExternalStore } from "react";
 // src/webvr/host.ts
 import { createContext as createContext5 } from "react";
 var WebVRRuntimeContext = createContext5(null);
+var EMPTY_WEBVR_STATE = Object.freeze({
+  available: false,
+  enabled: false,
+  mode: null
+});
+function createWebVRState(available, mode) {
+  return Object.freeze({
+    available,
+    enabled: mode !== null,
+    mode
+  });
+}
 function createWebVRHost() {
   return {
     controller: null,
@@ -3884,18 +3896,28 @@ function createWebVRHost() {
       chrome: true,
       mode: null,
       setupOpen: false,
-      settings: { screensize: "auto", profileId: "cardboard-v1" }
+      settings: { screensize: "auto", profileId: "cardboard-v1" },
+      detectedScreensize: null
     },
+    state: EMPTY_WEBVR_STATE,
     listeners: /* @__PURE__ */ new Set()
   };
 }
 function updateWebVRHost(host, snapshot) {
-  host.snapshot = { ...host.snapshot, ...snapshot };
+  const previous = host.snapshot;
+  const next = { ...previous, ...snapshot };
+  host.snapshot = next;
   host.revision += 1;
+  if (previous.available !== next.available || previous.mode !== next.mode) {
+    host.state = createWebVRState(next.available, next.mode);
+  }
   for (const listener of host.listeners) {
     listener();
   }
 }
+function getWebVRState(host) {
+  return host.state;
+}
 function subscribeWebVRHost(host, listener) {
   host.listeners.add(listener);
   return () => {
@@ -6151,6 +6173,52 @@ function createPanoModalHost() {
   };
 }
 
+// src/overlay/partition.ts
+import {
+  Children,
+  Fragment,
+  isValidElement
+} from "react";
+var PANO_OVERLAY_TYPE = /* @__PURE__ */ Symbol.for("pano-view.PanoOverlay");
+function isPanoOverlayType(type) {
+  return typeof type === "function" && type[PANO_OVERLAY_TYPE] === true;
+}
+function isPanoOverlayElement(node) {
+  return isValidElement(node) && isPanoOverlayType(node.type);
+}
+function isFragmentElement(node) {
+  return isValidElement(node) && node.type === Fragment;
+}
+function flattenViewerChildren(children) {
+  const flat = [];
+  for (const item of Children.toArray(children)) {
+    if (isFragmentElement(item)) {
+      flat.push(...flattenViewerChildren(item.props.children));
+    } else {
+      flat.push(item);
+    }
+  }
+  return flat;
+}
+function partitionPanoOverlay(children) {
+  const items = flattenViewerChildren(children);
+  const overlayElements = [];
+  const sceneItems = [];
+  let found = false;
+  for (const item of items) {
+    if (isPanoOverlayElement(item)) {
+      found = true;
+      overlayElements.push(item);
+    } else {
+      sceneItems.push(item);
+    }
+  }
+  if (!found) {
+    return { sceneChildren: children, overlayElements: [] };
+  }
+  return { sceneChildren: sceneItems, overlayElements };
+}
+
 // src/overlay/pano-overlay.tsx
 import {
   createContext as createContext12,
@@ -6170,17 +6238,33 @@ function getOverlayVisibleRect(rect, viewport) {
 }
 
 // src/overlay/pano-overlay.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 var PanoOverlayContext = createContext12(null);
 var PanoModalHostContext = createContext12(null);
+var PanoOverlayOutletContext = createContext12(false);
+function PanoOverlay({ children }) {
+  const inOutlet = useContext11(PanoOverlayOutletContext);
+  if (!inOutlet) {
+    throw new Error(
+      "PanoOverlay must be a direct child of PanoViewer (or of a Fragment under PanoViewer), not nested inside scene components."
+    );
+  }
+  return /* @__PURE__ */ jsx5(Fragment2, { children });
+}
+PanoOverlay[PANO_OVERLAY_TYPE] = true;
+var OVERLAY_HOOK_SCOPE = "PanoOverlay or PanoViewer.renderOverlay";
 function usePanoOverlay() {
   const context = useContext11(PanoOverlayContext);
-  if (!context) throw new Error("usePanoOverlay must be used inside PanoViewer.renderOverlay.");
+  if (!context) {
+    throw new Error(`usePanoOverlay must be used inside ${OVERLAY_HOOK_SCOPE}.`);
+  }
   return context;
 }
 function usePanoModal(open) {
   const host = useContext11(PanoModalHostContext);
-  if (!host) throw new Error("usePanoModal must be used inside PanoViewer.renderOverlay.");
+  if (!host) {
+    throw new Error(`usePanoModal must be used inside ${OVERLAY_HOOK_SCOPE}.`);
+  }
   useLayoutEffect3(() => open ? host.acquire() : void 0, [host, open]);
 }
 function PanoOverlayPortalProvider({
@@ -6931,7 +7015,7 @@ function cueText(cue) {
 }
 
 // src/video/pano-video-controls.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE = {
   background: "rgba(16, 16, 16, 0.88)",
   color: "#f4f4f4",
@@ -7165,7 +7249,7 @@ function CaptionsMenu({
       id,
       labelledBy,
       role: "menu",
-      children: panel === "tracks" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+      children: panel === "tracks" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
         /* @__PURE__ */ jsxs4("div", { className: "pano-video-chrome-menu-list", children: [
           /* @__PURE__ */ jsx9(
             ChromeMenuRadioItem,
@@ -7204,7 +7288,7 @@ function CaptionsMenu({
             secondary: /* @__PURE__ */ jsx9("span", { "aria-hidden": true, children: "\u203A" })
           }
         )
-      ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+      ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
         /* @__PURE__ */ jsx9(
           ChromeMenuActionItem,
           {
@@ -7870,7 +7954,7 @@ function PanoVideoControlsHud({
               children: /* @__PURE__ */ jsx9(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__ */ jsxs4(Fragment, { children: [
+        ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
           rateButton,
           variantButton,
           captionsButton
@@ -7900,7 +7984,7 @@ function PanoVideoControls({ appearance }) {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function PanoVideoChromeBridge({
   fullscreen,
   host,
@@ -7915,7 +7999,7 @@ function PanoVideoChromeBridge({
     return null;
   }
   const showDefaultControls = host.controller !== null && host.controls !== false && host.controlClaims === 0;
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
     showDefaultControls ? /* @__PURE__ */ jsx10(
       PanoVideoControlsHud,
       {
@@ -7930,7 +8014,13 @@ function PanoVideoChromeBridge({
 }
 
 // src/webvr/chrome.tsx
-import { useEffect as useEffect13, useState as useState6, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect13,
+  useRef as useRef12,
+  useState as useState6,
+  useSyncExternalStore as useSyncExternalStore7
+} from "react";
 
 // src/webvr/appearance.ts
 var DEFAULT_WEBVR_CHROME_APPEARANCE = {
@@ -7996,6 +8086,7 @@ var WEBVR_PROFILES = {
     fov: 80,
     ipdMm: 60,
     screenToLensMm: 42,
+    trayDistanceMm: 0,
     k1: 0,
     k2: 0
   },
@@ -8005,6 +8096,7 @@ var WEBVR_PROFILES = {
     fov: 80,
     ipdMm: 60,
     screenToLensMm: 42,
+    trayDistanceMm: 35,
     k1: 0.441,
     k2: 0.156
   },
@@ -8014,6 +8106,7 @@ var WEBVR_PROFILES = {
     fov: 90,
     ipdMm: 64,
     screenToLensMm: 39,
+    trayDistanceMm: 0,
     k1: 0.336,
     k2: 0.553
   },
@@ -8023,6 +8116,7 @@ var WEBVR_PROFILES = {
     fov: 96,
     ipdMm: 63.5,
     screenToLensMm: 50,
+    trayDistanceMm: 0,
     k1: 0.215,
     k2: 0.215
   },
@@ -8032,6 +8126,7 @@ var WEBVR_PROFILES = {
     fov: 90,
     ipdMm: 61.5,
     screenToLensMm: 44,
+    trayDistanceMm: 0,
     k1: 0.385,
     k2: 0.593
   }
@@ -8082,12 +8177,28 @@ function saveWebVRSettings(settings) {
   } catch {
   }
 }
+function clearWebVRSettings() {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+  }
+}
+function resolveInitialWebVRSettings(screensize, profile) {
+  return {
+    screensize: screensize ?? DEFAULT_WEBVR_SETTINGS.screensize,
+    profileId: typeof profile === "string" ? profile : DEFAULT_WEBVR_SETTINGS.profileId
+  };
+}
 function clamp2(value, min, max) {
   return Math.max(min, Math.min(max, Number.isFinite(value) ? value : min));
 }
 
 // src/webvr/chrome.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var SESSION_CHROME_IDLE_MS = 3e3;
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -8115,8 +8226,15 @@ function ChromeButton2({
     }
   );
 }
+function formatScreensizeLabel(settings, detectedScreensize) {
+  if (settings.screensize === "auto") {
+    return detectedScreensize === null ? "Auto" : `Auto \xB7 ${detectedScreensize.toFixed(1)}`;
+  }
+  return settings.screensize.toFixed(1);
+}
 function SetupPanel({
   appearance,
+  detectedScreensize,
   host,
   settings
 }) {
@@ -8160,7 +8278,7 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx11("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ jsx11("strong", { className: "pano-webvr-setup-value", children: formatScreensizeLabel(settings, detectedScreensize) }),
             /* @__PURE__ */ jsx11(
               "button",
               {
@@ -8201,42 +8319,61 @@ function SetupPanel({
             )
           ] })
         ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "pano-webvr-setup-row", children: [
+          /* @__PURE__ */ jsx11(
+            ChromeButton2,
+            {
+              appearance,
+              onClick: () => controller?.resetSettings(),
+              children: "Reset"
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            ChromeButton2,
+            {
+              appearance,
+              onClick: () => controller?.closeSetup(),
+              children: "Close"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function SessionActions({
+  appearance,
+  host,
+  mode,
+  visible
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "aria-hidden": !visible,
+      className: visible ? "pano-webvr-toolbar-actions" : "pano-webvr-toolbar-actions pano-webvr-toolbar-actions-hidden",
+      inert: !visible ? true : void 0,
+      children: [
+        mode !== "webxr" ? /* @__PURE__ */ jsx11(
+          ChromeButton2,
+          {
+            appearance,
+            onClick: () => host.controller?.openSetup(),
+            children: "VR Setup"
+          }
+        ) : null,
         /* @__PURE__ */ jsx11(
           ChromeButton2,
           {
             appearance,
-            onClick: () => controller?.closeSetup(),
-            children: "Close"
+            onClick: () => void host.controller?.exitVR(),
+            children: "Exit VR"
           }
         )
       ]
     }
   );
 }
-function SessionActions({
-  appearance,
-  host,
-  mode
-}) {
-  return /* @__PURE__ */ jsxs6("div", { className: "pano-webvr-toolbar-actions", children: [
-    mode !== "webxr" ? /* @__PURE__ */ jsx11(
-      ChromeButton2,
-      {
-        appearance,
-        onClick: () => host.controller?.openSetup(),
-        children: "VR Setup"
-      }
-    ) : null,
-    /* @__PURE__ */ jsx11(
-      ChromeButton2,
-      {
-        appearance,
-        onClick: () => void host.controller?.exitVR(),
-        children: "Exit VR"
-      }
-    )
-  ] });
-}
 function RotatePhoneIcon2() {
   return /* @__PURE__ */ jsxs6(
     "svg",
@@ -8267,6 +8404,51 @@ function PortraitPrompt() {
     /* @__PURE__ */ jsx11("p", { className: "pano-webvr-portrait-text", children: "Rotate your phone to landscape" })
   ] });
 }
+function useSessionChromeVisibility(active, keepVisible, viewer) {
+  const [visible, setVisible] = useState6(true);
+  const idleTimerRef = useRef12(0);
+  const bump = useCallback6(() => {
+    setVisible(true);
+    window.clearTimeout(idleTimerRef.current);
+    if (!active || keepVisible) {
+      return;
+    }
+    idleTimerRef.current = window.setTimeout(() => {
+      setVisible(false);
+    }, SESSION_CHROME_IDLE_MS);
+  }, [active, keepVisible]);
+  useEffect13(() => {
+    if (!active) {
+      window.clearTimeout(idleTimerRef.current);
+      setVisible(true);
+      return;
+    }
+    bump();
+  }, [active, bump, keepVisible]);
+  useEffect13(() => {
+    if (!active || !viewer) {
+      return;
+    }
+    const reveal = () => {
+      bump();
+    };
+    viewer.addEventListener("pointerdown", reveal);
+    viewer.addEventListener("wheel", reveal, { passive: true });
+    viewer.addEventListener("keydown", reveal);
+    return () => {
+      viewer.removeEventListener("pointerdown", reveal);
+      viewer.removeEventListener("wheel", reveal);
+      viewer.removeEventListener("keydown", reveal);
+    };
+  }, [active, bump, viewer]);
+  useEffect13(
+    () => () => {
+      window.clearTimeout(idleTimerRef.current);
+    },
+    []
+  );
+  return keepVisible || visible;
+}
 function WebVRChromeBridge({ host }) {
   useSyncExternalStore7(
     (listener) => subscribeWebVRHost(host, listener),
@@ -8274,11 +8456,29 @@ function WebVRChromeBridge({ host }) {
     () => host.revision
   );
   const portrait = usePortraitOrientation();
-  const { available, chrome, mode, settings, setupOpen } = host.snapshot;
+  const {
+    chrome,
+    detectedScreensize,
+    mode,
+    settings,
+    setupOpen
+  } = host.snapshot;
   const [mounted, setMounted] = useState6(false);
+  const [viewer, setViewer] = useState6(null);
+  const toolbarRef = useRef12(null);
   useEffect13(() => {
     setMounted(true);
   }, []);
+  useEffect13(() => {
+    const node = toolbarRef.current?.closest("[data-pano-viewer]") ?? null;
+    setViewer(node);
+  }, [mode]);
+  const sessionActive = mode !== null;
+  const chromeVisible = useSessionChromeVisibility(
+    sessionActive,
+    setupOpen,
+    viewer
+  );
   if (chrome === false || !host.controller) {
     return null;
   }
@@ -8287,17 +8487,29 @@ function WebVRChromeBridge({ host }) {
   if (showPortraitPrompt) {
     return /* @__PURE__ */ jsx11(PortraitPrompt, {});
   }
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx11("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsx11(SessionActions, { appearance, host, mode }) : /* @__PURE__ */ jsx11(
-      ChromeButton2,
+  if (!mode) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsx11("div", { className: "pano-webvr-toolbar", ref: toolbarRef, children: /* @__PURE__ */ jsx11(
+      SessionActions,
       {
         appearance,
-        onClick: () => void host.controller?.enterVR(),
-        children: available ? "Enter VR" : "VR unavailable"
+        host,
+        mode,
+        visible: chromeVisible
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ jsx11("p", { className: "pano-webvr-hint", style: { color: appearance.color }, 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__ */ jsx11(SetupPanel, { appearance, host, settings }) : null
+    mode === "fake" && chromeVisible ? /* @__PURE__ */ jsx11("p", { className: "pano-webvr-hint", style: { color: appearance.color }, 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__ */ jsx11(
+      SetupPanel,
+      {
+        appearance,
+        detectedScreensize,
+        host,
+        settings
+      }
+    ) : null
   ] });
 }
 
@@ -8330,12 +8542,12 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 // src/webvr/xr-origin.tsx
 import { useFrame as useFrame7, useThree as useThree8 } from "@react-three/fiber";
 import { useXR as useXR2, XROrigin } from "@react-three/xr";
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { Vector3 as Vector36 } from "three";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function PanoramaXROrigin() {
-  const originRef = useRef12(null);
-  const localHeadPositionRef = useRef12(new Vector36());
+  const originRef = useRef13(null);
+  const localHeadPositionRef = useRef13(new Vector36());
   const session2 = useXR2((state) => state.session);
   const gl = useThree8((state) => state.gl);
   useFrame7(() => {
@@ -8450,11 +8662,11 @@ var PanoViewer = forwardRef2(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = useRef13(null);
-    const controlsRef = useRef13(null);
+    const rootRef = useRef14(null);
+    const controlsRef = useRef14(null);
     const modalHost = useMemo8(() => createPanoModalHost(), []);
     const modalOpen = useSyncExternalStore8(modalHost.subscribe, modalHost.getSnapshot, () => false);
-    const setControlsRuntime = useCallback6((runtime) => {
+    const setControlsRuntime = useCallback7((runtime) => {
       controlsRef.current = runtime;
       modalHost.connect(runtime);
     }, [modalHost]);
@@ -8514,12 +8726,12 @@ var PanoViewer = forwardRef2(
       }),
       [bgmHost, videoHost]
     );
-    const runMediaActivation = useCallback6(() => {
+    const runMediaActivation = useCallback7(() => {
       const resume = mediaActivationControls.resumeAudio();
       mediaActivationOptions?.onActivate?.(mediaActivationControls);
       return resume;
     }, [mediaActivationControls, mediaActivationOptions]);
-    const activateMedia = useCallback6(() => {
+    const activateMedia = useCallback7(() => {
       setMediaActivated(true);
       return runMediaActivation();
     }, [runMediaActivation]);
@@ -8601,7 +8813,7 @@ var PanoViewer = forwardRef2(
     ]);
     const limitsKey = JSON.stringify(viewLimits);
     const parsedLimits = useMemo8(() => parseViewLimits(viewLimits), [limitsKey]);
-    const fallbackViewRef = useRef13(DEFAULT_VIEW);
+    const fallbackViewRef = useRef14(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
@@ -8664,7 +8876,7 @@ var PanoViewer = forwardRef2(
       }),
       [controlOptions.keyboard]
     );
-    const enterFullscreen = useCallback6(async () => {
+    const enterFullscreen = useCallback7(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -8683,7 +8895,7 @@ var PanoViewer = forwardRef2(
         acquireIphoneLandscapeFullscreen(root, "viewer");
       }
     }, []);
-    const exitFullscreen = useCallback6(async () => {
+    const exitFullscreen = useCallback7(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -8695,7 +8907,7 @@ var PanoViewer = forwardRef2(
         await exitElementFullscreen();
       }
     }, []);
-    const toggleFullscreen = useCallback6(async () => {
+    const toggleFullscreen = useCallback7(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -8711,6 +8923,10 @@ var PanoViewer = forwardRef2(
     }, [enterFullscreen, exitFullscreen]);
     const [isViewerFullscreen, setIsViewerFullscreen] = useState7(false);
     const { context: overlayContext, setPortalContainer } = usePanoOverlayHost(isViewerFullscreen);
+    const { sceneChildren, overlayElements } = useMemo8(
+      () => partitionPanoOverlay(children),
+      [children]
+    );
     const iphoneFullscreenAllowsScroll = useSyncExternalStore8(
       subscribeIphoneLandscapeFullscreen,
       () => getIphoneLandscapeFullscreenSnapshot().allowsDocumentScroll,
@@ -8794,7 +9010,7 @@ var PanoViewer = forwardRef2(
     useEffect14(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
-    const isFullscreenRef = useRef13(false);
+    const isFullscreenRef = useRef14(false);
     isFullscreenRef.current = isViewerFullscreen;
     useImperativeHandle2(
       ref,
@@ -8834,6 +9050,8 @@ var PanoViewer = forwardRef2(
         isVRAvailable: () => webVRHost.snapshot.available,
         isVREnabled: () => webVRHost.snapshot.mode !== null,
         getVRMode: () => webVRHost.snapshot.mode,
+        getVRState: () => webVRHost.state,
+        subscribeVR: (onStoreChange) => subscribeWebVRHost(webVRHost, onStoreChange),
         requestVRPermission: () => webVRHost.controller?.requestPermission() ?? Promise.resolve(false),
         // -- Video --
         getVideo: () => videoHost.controller,
@@ -8966,7 +9184,7 @@ var PanoViewer = forwardRef2(
                                 /* @__PURE__ */ jsx13(PanoramaEventSurface, {}),
                                 contextMenuChannel.mount ? /* @__PURE__ */ jsx13(PanoContextMenu, { ...contextMenuChannel.props }) : null,
                                 /* @__PURE__ */ jsxs7(ControlClaimsContext.Provider, { value: controlClaims, children: [
-                                  children,
+                                  sceneChildren,
                                   /* @__PURE__ */ jsx13(
                                     DefaultControlChannels,
                                     {
@@ -9011,15 +9229,18 @@ var PanoViewer = forwardRef2(
             contextMenuOverlay,
             hotspotAccessibilityControls
           ] }),
-          /* @__PURE__ */ jsx13(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx13(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ jsx13(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx13(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx13(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ jsx13(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ jsx13(PanoOverlayOutletContext.Provider, { value: true, children: /* @__PURE__ */ jsxs7(
             "div",
             {
               "data-pano-overlay": "",
               ref: setPortalContainer,
               style: { position: "absolute", inset: 0, zIndex: 30, pointerEvents: "none" },
-              children: renderOverlay?.(overlayContext)
+              children: [
+                renderOverlay?.(overlayContext),
+                overlayElements
+              ]
             }
-          ) }) }) })
+          ) }) }) }) })
         ]
       }
     );
@@ -9111,107 +9332,440 @@ function hotspotAction(hotspot, trigger) {
   return hotspot.events?.[trigger] ?? (trigger === "click" ? hotspot.action : void 0);
 }
 
-// src/project-scenes.tsx
-import {
-  useContext as useContext22,
-  useMemo as useMemo22,
-  useState as useState21
-} from "react";
-
-// src/scenes.tsx
-import { useFrame as useFrame13, useThree as useThree16 } from "@react-three/fiber";
-import {
-  Fragment as Fragment4,
-  useCallback as useCallback8,
-  useContext as useContext19,
-  useEffect as useEffect23,
-  useMemo as useMemo17,
-  useRef as useRef22,
-  useState as useState12
-} from "react";
-import {
-  LinearSRGBColorSpace,
-  LinearFilter as LinearFilter4,
-  WebGLRenderTarget
-} from "three";
-
-// src/scene-detail.tsx
-import { createContext as createContext16, useContext as useContext17 } from "react";
-var SceneDetailContext = createContext16(null);
-function useSceneDetailReporter() {
-  return useContext17(SceneDetailContext);
-}
-function viewTilesAreDrawable(textures) {
-  return textures.length > 0 && textures.every((texture) => texture != null);
+// src/overlay/align.ts
+var PANO_OVERLAY_ALIGNS = [
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+var ALIGN_LIST = PANO_OVERLAY_ALIGNS.join(", ");
+var SAFE = {
+  top: "var(--pano-safe-top)",
+  right: "var(--pano-safe-right)",
+  bottom: "var(--pano-safe-bottom)",
+  left: "var(--pano-safe-left)"
+};
+function cssLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
 }
-function publishSceneDetail(reporter, lastToken, ready) {
-  if (!reporter) {
-    return;
+function isOverlayCorner(align) {
+  switch (align) {
+    case "top-left":
+    case "top-right":
+    case "bottom-left":
+    case "bottom-right":
+      return true;
+    case "top":
+    case "bottom":
+    case "left":
+    case "right":
+      return false;
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
   }
-  const token = `${reporter.generation}:${ready ? 1 : 0}`;
-  if (lastToken.current === token) {
-    return;
+}
+function resolveOverlayAxis(align, axis) {
+  switch (align) {
+    case "top":
+    case "bottom":
+      return "horizontal";
+    case "left":
+    case "right":
+      return "vertical";
+    case "top-left":
+    case "top-right":
+    case "bottom-left":
+    case "bottom-right":
+      return axis ?? "horizontal";
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
   }
-  lastToken.current = token;
-  reporter.report(ready);
 }
-
-// src/scene-transitions/presets.ts
-var TRANSITION_DEFAULTS = {
-  none: { duration: 0, krpanoBlend: "NOBLEND" },
-  crossfade: { duration: 1, krpanoBlend: "BLEND(1.0, easeInCubic)" },
-  zoom: { duration: 2, krpanoBlend: "ZOOMBLEND(2.0, 2.0, easeInOutSine)" },
-  blackout: { duration: 2, krpanoBlend: "COLORBLEND(2.0, 0x000000, easeOutSine)" },
-  whiteFlash: { duration: 1, krpanoBlend: "LIGHTBLEND(1.0, 0xFFFFFF, 2.0, linear)" },
-  slideRightToLeft: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 0.0, 0.2, linear)" },
-  slideTopToBottom: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 90.0, 0.01, linear)" },
-  slideDiagonal: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 135.0, 0.4, linear)" },
-  circleOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, 0.0, 0.2, 0.0, linear)" },
-  verticalOpen: { duration: 0.7, krpanoBlend: "OPENBLEND(0.7, 1.0, 0.1, 0.0, linear)" },
-  horizontalOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, -1.0, 0.3, 0.0, linear)" },
-  ellipticZoomOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, -0.5, 0.3, 0.8, linear)" },
-  pixelate: { duration: 1, krpanoBlend: "pano-view cinematic" },
-  gridWipe: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  gridWipeUp: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  gridWipeRight: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  gridWipeDiagonal: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  gridWipeCenter: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  gridWipeChecker: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  dissolve: { duration: 1, krpanoBlend: "pano-view cinematic" },
-  shatter: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  particles: { duration: 1.4, krpanoBlend: "pano-view cinematic" },
-  glitch: { duration: 0.8, krpanoBlend: "pano-view cinematic" },
-  swirl: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  clockWipe: { duration: 1, krpanoBlend: "pano-view cinematic" },
-  ripple: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
-  zoomBlur: { duration: 1, krpanoBlend: "pano-view cinematic" },
-  hexDissolve: { duration: 1.1, krpanoBlend: "pano-view cinematic" },
-  filmBurn: { duration: 1.3, krpanoBlend: "pano-view cinematic" }
-};
-function resolveTransition(transition) {
-  const preset = typeof transition === "string" ? transition : transition?.preset ?? "crossfade";
-  return {
-    preset,
-    duration: Math.max(
-      0,
-      transition && typeof transition === "object" && Number.isFinite(transition.duration) ? transition.duration : TRANSITION_DEFAULTS[preset].duration
-    )
-  };
+function overlayCollapseEdge(align, axis) {
+  switch (align) {
+    case "top":
+      return "top";
+    case "bottom":
+      return "bottom";
+    case "left":
+      return "left";
+    case "right":
+      return "right";
+    case "top-left":
+      return resolveOverlayAxis(align, axis) === "horizontal" ? "top" : "left";
+    case "top-right":
+      return resolveOverlayAxis(align, axis) === "horizontal" ? "top" : "right";
+    case "bottom-left":
+      return resolveOverlayAxis(align, axis) === "horizontal" ? "bottom" : "left";
+    case "bottom-right":
+      return resolveOverlayAxis(align, axis) === "horizontal" ? "bottom" : "right";
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
+  }
 }
-function isSnapshotTransition(preset) {
-  return preset !== "none" && preset !== "particles";
+function overlayChevron(edge, collapsed) {
+  switch (edge) {
+    case "top":
+      return collapsed ? "down" : "up";
+    case "bottom":
+      return collapsed ? "up" : "down";
+    case "left":
+      return collapsed ? "right" : "left";
+    case "right":
+      return collapsed ? "left" : "right";
+    default: {
+      const exhaustive = edge;
+      return exhaustive;
+    }
+  }
 }
-
-// src/scene-transitions/snapshot-hold.tsx
-import { useFrame as useFrame8, useThree as useThree9 } from "@react-three/fiber";
-import { useEffect as useEffect15, useMemo as useMemo9, useRef as useRef14 } from "react";
-import { Vector3 as Vector38 } from "three";
-
-// src/scene-transitions/overlay-utils.ts
-import { PlaneGeometry } from "three";
-var OVERLAY_RENDER_ORDER = 1e4;
-var FULLSCREEN_PLANE = new PlaneGeometry(1, 1);
-function isPerspectiveCamera(camera) {
+function overlayContentAlign(align, axis) {
+  const resolved = resolveOverlayAxis(align, axis);
+  if (resolved === "horizontal") {
+    switch (align) {
+      case "top-left":
+      case "bottom-left":
+        return "start";
+      case "top-right":
+      case "bottom-right":
+        return "end";
+      case "top":
+      case "bottom":
+      case "left":
+      case "right":
+        return "center";
+      default: {
+        const exhaustive = align;
+        return exhaustive;
+      }
+    }
+  }
+  switch (align) {
+    case "top-left":
+    case "top-right":
+      return "start";
+    case "bottom-left":
+    case "bottom-right":
+      return "end";
+    case "top":
+    case "bottom":
+    case "left":
+    case "right":
+      return "center";
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
+  }
+}
+function resolveOverlayInset(inset, fallback) {
+  const fallbackLength = cssLength(fallback);
+  if (inset === void 0) {
+    return {
+      top: fallbackLength,
+      right: fallbackLength,
+      bottom: fallbackLength,
+      left: fallbackLength
+    };
+  }
+  if (typeof inset === "number" || typeof inset === "string") {
+    const value = cssLength(inset);
+    return { top: value, right: value, bottom: value, left: value };
+  }
+  return {
+    top: cssLength(inset.top ?? fallback),
+    right: cssLength(inset.right ?? fallback),
+    bottom: cssLength(inset.bottom ?? fallback),
+    left: cssLength(inset.left ?? fallback)
+  };
+}
+function overlayDockInset(edge, inset) {
+  switch (edge) {
+    case "top":
+      return inset.top;
+    case "bottom":
+      return inset.bottom;
+    case "left":
+      return inset.left;
+    case "right":
+      return inset.right;
+    default: {
+      const exhaustive = edge;
+      return exhaustive;
+    }
+  }
+}
+function resolveOverlayAnchor(anchor, defaults) {
+  const align = anchor?.align ?? defaults.align;
+  const axis = resolveOverlayAxis(align, anchor?.axis);
+  const inset = resolveOverlayInset(anchor?.inset, defaults.inset);
+  const collapseEdge = overlayCollapseEdge(align, anchor?.axis);
+  return {
+    align,
+    axis,
+    inset,
+    collapseEdge,
+    contentAlign: overlayContentAlign(align, anchor?.axis),
+    dockInset: overlayDockInset(collapseEdge, inset)
+  };
+}
+function withSafe(inset, safeVariable) {
+  return `calc(${inset} + ${safeVariable})`;
+}
+function maxBox(inset) {
+  return {
+    maxWidth: `calc(100% - ${inset.left} - ${inset.right} - ${SAFE.left} - ${SAFE.right})`,
+    maxHeight: `calc(100% - ${inset.top} - ${inset.bottom} - ${SAFE.top} - ${SAFE.bottom})`
+  };
+}
+function horizontalSpan(inset, width) {
+  const left = withSafe(inset.left, SAFE.left);
+  const right = withSafe(inset.right, SAFE.right);
+  if (width === void 0) {
+    return { left, right, width: void 0, marginInline: void 0 };
+  }
+  return { left, right, width, marginInline: "auto" };
+}
+function verticalSpan(inset, height) {
+  const top = withSafe(inset.top, SAFE.top);
+  const bottom = withSafe(inset.bottom, SAFE.bottom);
+  if (height === void 0) {
+    return { top, bottom, height: void 0, marginBlock: void 0 };
+  }
+  return { top, bottom, height, marginBlock: "auto" };
+}
+function overlayBoxStyle(align, inset, width, height) {
+  const widthValue = width === void 0 ? void 0 : cssLength(width);
+  const heightValue = height === void 0 ? void 0 : cssLength(height);
+  const limits = maxBox(inset);
+  switch (align) {
+    case "top":
+      return {
+        ...horizontalSpan(inset, widthValue),
+        top: withSafe(inset.top, SAFE.top),
+        bottom: "auto",
+        height: heightValue,
+        ...limits
+      };
+    case "bottom":
+      return {
+        ...horizontalSpan(inset, widthValue),
+        top: "auto",
+        bottom: withSafe(inset.bottom, SAFE.bottom),
+        height: heightValue,
+        ...limits
+      };
+    case "left":
+      return {
+        ...verticalSpan(inset, heightValue),
+        left: withSafe(inset.left, SAFE.left),
+        right: "auto",
+        width: widthValue,
+        ...limits
+      };
+    case "right":
+      return {
+        ...verticalSpan(inset, heightValue),
+        left: "auto",
+        right: withSafe(inset.right, SAFE.right),
+        width: widthValue,
+        ...limits
+      };
+    case "top-left":
+      return {
+        top: withSafe(inset.top, SAFE.top),
+        left: withSafe(inset.left, SAFE.left),
+        right: "auto",
+        bottom: "auto",
+        width: widthValue,
+        height: heightValue,
+        ...limits
+      };
+    case "top-right":
+      return {
+        top: withSafe(inset.top, SAFE.top),
+        right: withSafe(inset.right, SAFE.right),
+        left: "auto",
+        bottom: "auto",
+        width: widthValue,
+        height: heightValue,
+        ...limits
+      };
+    case "bottom-left":
+      return {
+        bottom: withSafe(inset.bottom, SAFE.bottom),
+        left: withSafe(inset.left, SAFE.left),
+        top: "auto",
+        right: "auto",
+        width: widthValue,
+        height: heightValue,
+        ...limits
+      };
+    case "bottom-right":
+      return {
+        bottom: withSafe(inset.bottom, SAFE.bottom),
+        right: withSafe(inset.right, SAFE.right),
+        top: "auto",
+        left: "auto",
+        width: widthValue,
+        height: heightValue,
+        ...limits
+      };
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
+  }
+}
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function parseInsetLength(value, field) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim()) return value;
+  throw new Error(`${field}: expected a finite number or a nonempty string`);
+}
+function parseInset(value, field) {
+  if (typeof value === "number" || typeof value === "string") {
+    return parseInsetLength(value, field);
+  }
+  if (!isRecord2(value)) throw new Error(`${field}: expected a number, string, or object`);
+  const sides = ["top", "right", "bottom", "left"];
+  const inset = {};
+  for (const side of sides) {
+    if (value[side] === void 0) continue;
+    inset[side] = parseInsetLength(value[side], `${field}.${side}`);
+  }
+  return inset;
+}
+function parseOverlayAnchor(value, field) {
+  if (!isRecord2(value)) throw new Error(`${field}: expected an object`);
+  const align = value.align === void 0 ? void 0 : typeof value.align === "string" && PANO_OVERLAY_ALIGNS.includes(value.align) ? value.align : (() => {
+    throw new Error(`${field}.align: expected ${ALIGN_LIST}`);
+  })();
+  const axis = value.axis === void 0 ? void 0 : value.axis === "horizontal" || value.axis === "vertical" ? value.axis : (() => {
+    throw new Error(`${field}.axis: expected "horizontal" or "vertical"`);
+  })();
+  const inset = value.inset === void 0 ? void 0 : parseInset(value.inset, `${field}.inset`);
+  return {
+    ...align === void 0 ? {} : { align },
+    ...axis === void 0 ? {} : { axis },
+    ...inset === void 0 ? {} : { inset }
+  };
+}
+
+// src/project-scenes.tsx
+import {
+  useContext as useContext22,
+  useMemo as useMemo22,
+  useState as useState21
+} from "react";
+
+// src/scenes.tsx
+import { useFrame as useFrame13, useThree as useThree16 } from "@react-three/fiber";
+import {
+  Fragment as Fragment6,
+  useCallback as useCallback9,
+  useContext as useContext19,
+  useEffect as useEffect23,
+  useMemo as useMemo17,
+  useRef as useRef23,
+  useState as useState12
+} from "react";
+import {
+  LinearSRGBColorSpace,
+  LinearFilter as LinearFilter3,
+  WebGLRenderTarget
+} from "three";
+
+// src/scene-detail.tsx
+import { createContext as createContext16, useContext as useContext17 } from "react";
+var SceneDetailContext = createContext16(null);
+function useSceneDetailReporter() {
+  return useContext17(SceneDetailContext);
+}
+function viewTilesAreDrawable(textures) {
+  return textures.length > 0 && textures.every((texture) => texture != null);
+}
+function publishSceneDetail(reporter, lastToken, ready) {
+  if (!reporter) {
+    return;
+  }
+  const token = `${reporter.generation}:${ready ? 1 : 0}`;
+  if (lastToken.current === token) {
+    return;
+  }
+  lastToken.current = token;
+  reporter.report(ready);
+}
+
+// src/scene-transitions/presets.ts
+var TRANSITION_DEFAULTS = {
+  none: { duration: 0, krpanoBlend: "NOBLEND" },
+  crossfade: { duration: 1, krpanoBlend: "BLEND(1.0, easeInCubic)" },
+  zoom: { duration: 2, krpanoBlend: "ZOOMBLEND(2.0, 2.0, easeInOutSine)" },
+  blackout: { duration: 2, krpanoBlend: "COLORBLEND(2.0, 0x000000, easeOutSine)" },
+  whiteFlash: { duration: 1, krpanoBlend: "LIGHTBLEND(1.0, 0xFFFFFF, 2.0, linear)" },
+  slideRightToLeft: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 0.0, 0.2, linear)" },
+  slideTopToBottom: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 90.0, 0.01, linear)" },
+  slideDiagonal: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 135.0, 0.4, linear)" },
+  circleOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, 0.0, 0.2, 0.0, linear)" },
+  verticalOpen: { duration: 0.7, krpanoBlend: "OPENBLEND(0.7, 1.0, 0.1, 0.0, linear)" },
+  horizontalOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, -1.0, 0.3, 0.0, linear)" },
+  ellipticZoomOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, -0.5, 0.3, 0.8, linear)" },
+  pixelate: { duration: 1, krpanoBlend: "pano-view cinematic" },
+  gridWipe: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  gridWipeUp: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  gridWipeRight: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  gridWipeDiagonal: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  gridWipeCenter: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  gridWipeChecker: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  dissolve: { duration: 1, krpanoBlend: "pano-view cinematic" },
+  shatter: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  particles: { duration: 1.4, krpanoBlend: "pano-view cinematic" },
+  glitch: { duration: 0.8, krpanoBlend: "pano-view cinematic" },
+  swirl: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  clockWipe: { duration: 1, krpanoBlend: "pano-view cinematic" },
+  ripple: { duration: 1.2, krpanoBlend: "pano-view cinematic" },
+  zoomBlur: { duration: 1, krpanoBlend: "pano-view cinematic" },
+  hexDissolve: { duration: 1.1, krpanoBlend: "pano-view cinematic" },
+  filmBurn: { duration: 1.3, krpanoBlend: "pano-view cinematic" }
+};
+function resolveTransition(transition) {
+  const preset = typeof transition === "string" ? transition : transition?.preset ?? "crossfade";
+  return {
+    preset,
+    duration: Math.max(
+      0,
+      transition && typeof transition === "object" && Number.isFinite(transition.duration) ? transition.duration : TRANSITION_DEFAULTS[preset].duration
+    )
+  };
+}
+function isSnapshotTransition(preset) {
+  return preset !== "none" && preset !== "particles";
+}
+
+// src/scene-transitions/snapshot-hold.tsx
+import { useFrame as useFrame8, useThree as useThree9 } from "@react-three/fiber";
+import { useEffect as useEffect15, useMemo as useMemo9, useRef as useRef15 } from "react";
+import { Vector3 as Vector38 } from "three";
+
+// src/scene-transitions/overlay-utils.ts
+import { PlaneGeometry } from "three";
+var OVERLAY_RENDER_ORDER = 1e4;
+var FULLSCREEN_PLANE = new PlaneGeometry(1, 1);
+function isPerspectiveCamera(camera) {
   return camera.isPerspectiveCamera === true;
 }
 function placeFullscreenOverlay(mesh, camera, direction) {
@@ -9540,8 +10094,8 @@ function createSnapshotMaterial(preset, texture) {
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function SnapshotHold({ snapshot }) {
   const { camera, gl } = useThree9();
-  const meshRef = useRef14(null);
-  const directionRef = useRef14(new Vector38());
+  const meshRef = useRef15(null);
+  const directionRef = useRef15(new Vector38());
   const material = useMemo9(
     () => createSnapshotMaterial("crossfade", snapshot.texture),
     [snapshot.texture]
@@ -9624,7 +10178,7 @@ function phaseAfterSnapshot(preset, hold) {
 
 // src/scene-transitions/particle-overlay.tsx
 import { useFrame as useFrame9, useThree as useThree10 } from "@react-three/fiber";
-import { useEffect as useEffect16, useMemo as useMemo10, useRef as useRef15 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo10, useRef as useRef16 } from "react";
 import {
   DoubleSide as DoubleSide2,
   InstancedBufferAttribute,
@@ -9711,10 +10265,10 @@ function ParticleOverlay({
   onFinish
 }) {
   const { camera } = useThree10();
-  const meshRef = useRef15(null);
-  const startRef = useRef15(null);
-  const finishedRef = useRef15(false);
-  const directionRef = useRef15(new Vector39());
+  const meshRef = useRef16(null);
+  const startRef = useRef16(null);
+  const finishedRef = useRef16(false);
+  const directionRef = useRef16(new Vector39());
   const geometry = useMemo10(() => createParticleGeometry(), []);
   const material = useMemo10(
     () => new ShaderMaterial2({
@@ -9770,7 +10324,7 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 import { useFrame as useFrame10, useThree as useThree11 } from "@react-three/fiber";
-import { useEffect as useEffect17, useMemo as useMemo11, useRef as useRef16 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo11, useRef as useRef17 } from "react";
 import { Vector3 as Vector310 } from "three";
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function SnapshotOverlay({
@@ -9781,10 +10335,10 @@ function SnapshotOverlay({
   onFinish
 }) {
   const { camera, gl } = useThree11();
-  const meshRef = useRef16(null);
-  const startRef = useRef16(null);
-  const finishedRef = useRef16(false);
-  const directionRef = useRef16(new Vector310());
+  const meshRef = useRef17(null);
+  const startRef = useRef17(null);
+  const finishedRef = useRef17(false);
+  const directionRef = useRef17(new Vector310());
   const material = useMemo11(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
@@ -9874,7 +10428,7 @@ function TransitionOverlay(props) {
 
 // src/sphere.tsx
 import { useThree as useThree12 } from "@react-three/fiber";
-import { useEffect as useEffect18, useMemo as useMemo13, useRef as useRef18, useState as useState8 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo13, useRef as useRef19, useState as useState8 } from "react";
 import {
   BackSide as BackSide2,
   LinearFilter,
@@ -9886,7 +10440,7 @@ import {
 } from "three";
 
 // src/pano-filter/pano-basic-material.tsx
-import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo12, useRef as useRef17 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo12, useRef as useRef18 } from "react";
 import {
   Matrix4,
   Vector4
@@ -10086,9 +10640,9 @@ function PanoBasicMaterial({
   const preset = snapshot.enabled && target === "panorama" ? snapshot.preset : "none";
   const matrix = snapshot.enabled && (target === "panorama" || snapshot.colorMatrixScope === "all") ? snapshot.colorMatrix : null;
   const hasMatrix = matrix !== null;
-  const currentRef = useRef17({ matrix, intensity: snapshot.intensity });
+  const currentRef = useRef18({ matrix, intensity: snapshot.intensity });
   currentRef.current = { matrix, intensity: snapshot.intensity };
-  const shaderRef = useRef17(null);
+  const shaderRef = useRef18(null);
   const onBeforeCompile = useMemo12(() => {
     const compile = (shader) => {
       shaderRef.current = shader;
@@ -10136,8 +10690,8 @@ function PanoBasicMaterial({
 import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
   const [texture, setTexture] = useState8(null);
-  const onLoadRef = useRef18(onLoad);
-  const onErrorRef = useRef18(onError);
+  const onLoadRef = useRef19(onLoad);
+  const onErrorRef = useRef19(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect18(() => {
@@ -10218,7 +10772,7 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = useRef18(false);
+  const readyRef = useRef19(false);
   const detailReporter = useSceneDetailReporter();
   useEffect18(() => {
     readyRef.current = false;
@@ -10264,13 +10818,14 @@ function Sphere({
 
 // src/sphere-tile/sphere-tile.tsx
 import { useFrame as useFrame11, useThree as useThree14 } from "@react-three/fiber";
-import { memo, useCallback as useCallback7, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef20, useState as useState10 } from "react";
+import { memo, useCallback as useCallback8, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef21, useState as useState10 } from "react";
 import { BackSide as BackSide3, Frustum, Matrix4 as Matrix42, PerspectiveCamera as PerspectiveCamera4 } from "three";
 
 // src/tile/texture-manager.ts
 import {
   ClampToEdgeWrapping,
   LinearFilter as LinearFilter2,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter2,
   SRGBColorSpace as SRGBColorSpace2,
   TextureLoader as TextureLoader2
 } from "three";
@@ -10279,6 +10834,20 @@ var EMPTY_TEXTURE_SNAPSHOT = {
   texture: null,
   error: null
 };
+var MIPMAP_MEMORY_FACTOR = 4 / 3;
+function mipmappedTextureBytes(width, height) {
+  return Math.ceil(width * height * 4 * MIPMAP_MEMORY_FACTOR);
+}
+function configureMipmappedTexture(texture, anisotropy) {
+  texture.colorSpace = SRGBColorSpace2;
+  texture.wrapS = ClampToEdgeWrapping;
+  texture.wrapT = ClampToEdgeWrapping;
+  texture.magFilter = LinearFilter2;
+  texture.minFilter = LinearMipmapLinearFilter2;
+  texture.generateMipmaps = true;
+  texture.anisotropy = Math.max(1, anisotropy);
+  texture.needsUpdate = true;
+}
 var TileTextureManager = class {
   constructor(options) {
     this.loader = new TextureLoader2();
@@ -10430,7 +10999,10 @@ var TileTextureManager = class {
         entry.texture = texture;
         entry.status = "loaded";
         entry.error = null;
-        entry.bytes = entry.address.width * entry.address.height * 4;
+        entry.bytes = mipmappedTextureBytes(
+          entry.address.width,
+          entry.address.height
+        );
         entry.lastUsed = performance.now();
         this.totalBytes += entry.bytes;
         this.loaded += 1;
@@ -10453,14 +11025,7 @@ var TileTextureManager = class {
     }
   }
   configureTexture(texture) {
-    texture.colorSpace = SRGBColorSpace2;
-    texture.wrapS = ClampToEdgeWrapping;
-    texture.wrapT = ClampToEdgeWrapping;
-    texture.magFilter = LinearFilter2;
-    texture.minFilter = LinearFilter2;
-    texture.generateMipmaps = false;
-    texture.anisotropy = Math.min(4, this.options.anisotropy);
-    texture.needsUpdate = true;
+    configureMipmappedTexture(texture, this.options.anisotropy);
   }
   evict() {
     if (this.totalBytes <= this.options.maxBytes) {
@@ -10534,16 +11099,11 @@ function useSharedTileTextureManager() {
 }
 
 // src/tile/texture-hooks.ts
-import { useEffect as useEffect20, useRef as useRef19, useState as useState9 } from "react";
-import {
-  ClampToEdgeWrapping as ClampToEdgeWrapping2,
-  LinearFilter as LinearFilter3,
-  SRGBColorSpace as SRGBColorSpace3,
-  TextureLoader as TextureLoader3
-} from "three";
+import { useEffect as useEffect20, useRef as useRef20, useState as useState9 } from "react";
+import { TextureLoader as TextureLoader3 } from "three";
 function usePreviewTexture(url, anisotropy, onError) {
   const [texture, setTexture] = useState9(null);
-  const onErrorRef = useRef19(onError);
+  const onErrorRef = useRef20(onError);
   onErrorRef.current = onError;
   useEffect20(() => {
     if (!url) {
@@ -10560,14 +11120,7 @@ function usePreviewTexture(url, anisotropy, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = SRGBColorSpace3;
-        loadedTexture.wrapS = ClampToEdgeWrapping2;
-        loadedTexture.wrapT = ClampToEdgeWrapping2;
-        loadedTexture.magFilter = LinearFilter3;
-        loadedTexture.minFilter = LinearFilter3;
-        loadedTexture.generateMipmaps = false;
-        loadedTexture.anisotropy = Math.min(4, anisotropy);
-        loadedTexture.needsUpdate = true;
+        configureMipmappedTexture(loadedTexture, anisotropy);
         setTexture(loadedTexture);
       },
       void 0,
@@ -10739,8 +11292,17 @@ function sphereTileGeometry(address, yawOffset2, radius = DEFAULT_PANORAMA_RADIU
   geometry.computeBoundingSphere();
   return geometry;
 }
-function preferredSphereLevel(levels, height, dpr, verticalFov) {
-  const needed = height * dpr * 180 / Math.max(1, verticalFov);
+function tanHalfFov(verticalFov) {
+  const fov = Math.min(179, Math.max(1, verticalFov));
+  return Math.tan(MathUtils6.degToRad(fov) * 0.5);
+}
+function preferredSphereLevel(levels, height, dpr, verticalFov, width = height) {
+  const pixelHeight = Math.max(1, height) * dpr;
+  const pixelWidth = Math.max(1, width) * dpr;
+  const tanHalfV = tanHalfFov(verticalFov);
+  const tanHalfH = pixelWidth / pixelHeight * tanHalfV;
+  const edgeScale = 1 + Math.max(tanHalfV, tanHalfH) ** 2;
+  const needed = pixelHeight * 0.5 / tanHalfV * Math.PI * edgeScale;
   const index = levels.findIndex((level) => level.height >= needed);
   return index < 0 ? levels.length - 1 : index;
 }
@@ -10841,7 +11403,7 @@ function SphereTileSource({
     anisotropy,
     onPreviewError
   );
-  const callbacks = useRef20({
+  const callbacks = useRef21({
     onReady,
     onLoadProgress,
     onTileError,
@@ -10874,8 +11436,8 @@ function SphereTileSource({
   );
   const manager = sharedManager ?? ownedManager;
   const budget = manager.memoryBudgetBytes;
-  const readyRef = useRef20(false);
-  const ready = useCallback7(() => {
+  const readyRef = useRef21(false);
+  const ready = useCallback8(() => {
     if (!readyRef.current) {
       readyRef.current = true;
       callbacks.current.onReady?.();
@@ -10916,10 +11478,10 @@ function SphereTileSource({
   );
   const [layers, setLayers] = useState10([]);
   const detailReporter = useSceneDetailReporter();
-  const detailReporterRef = useRef20(detailReporter);
+  const detailReporterRef = useRef21(detailReporter);
   detailReporterRef.current = detailReporter;
-  const detailTokenRef = useRef20("");
-  const targetKeysRef = useRef20([]);
+  const detailTokenRef = useRef21("");
+  const targetKeysRef = useRef21([]);
   const scratch = useMemo15(
     () => ({
       camera: new PerspectiveCamera4(),
@@ -10968,7 +11530,13 @@ function SphereTileSource({
         scratch.camera.matrixWorldInverse
       );
       scratch.frustum.setFromProjectionMatrix(scratch.matrix);
-      let level = loadMode === "preview" ? -1 : loadMode === "base" ? 0 : preferredSphereLevel(config.levels, size.height, dpr, camera.fov);
+      let level = loadMode === "preview" ? -1 : loadMode === "base" ? 0 : preferredSphereLevel(
+        config.levels,
+        size.height,
+        dpr,
+        camera.fov,
+        size.width
+      );
       const next = [];
       let residentBytes = 0;
       for (let index = 0; index <= level; index++) {
@@ -10976,7 +11544,7 @@ function SphereTileSource({
           ({ bounds }) => scratch.frustum.intersectsBox(bounds)
         ).map(({ address }) => address);
         const bytes = addresses.reduce(
-          (total, address) => total + address.width * address.height * 4,
+          (total, address) => total + mipmappedTextureBytes(address.width, address.height),
           0
         );
         if (residentBytes + bytes > budget) {
@@ -11042,7 +11610,7 @@ function SphereTile({ multires, ...props }) {
 
 // src/tile/tile.tsx
 import { useFrame as useFrame12, useThree as useThree15 } from "@react-three/fiber";
-import { memo as memo2, useEffect as useEffect22, useMemo as useMemo16, useRef as useRef21, useState as useState11 } from "react";
+import { memo as memo2, useEffect as useEffect22, useMemo as useMemo16, useRef as useRef22, useState as useState11 } from "react";
 import {
   Frustum as Frustum2,
   Matrix4 as Matrix43,
@@ -11055,6 +11623,7 @@ import {
 import {
   Box3 as Box32,
   Euler as Euler4,
+  MathUtils as MathUtils7,
   Quaternion as Quaternion2,
   Vector3 as Vector312
 } from "three";
@@ -11149,8 +11718,19 @@ function makeTileAddress(face, level, faceSize, tileSize, col, row) {
 function tileKey(address) {
   return `${address.level}/${address.face}/${address.row}/${address.col}`;
 }
-function getPreferredLevel(levels, viewportHeight, pixelRatio, verticalFov, currentLevel) {
-  const requiredFaceSize = viewportHeight * pixelRatio * (90 / Math.max(verticalFov, 1));
+function tanHalfFov2(verticalFov) {
+  const fov = Math.min(179, Math.max(1, verticalFov));
+  return Math.tan(MathUtils7.degToRad(fov) * 0.5);
+}
+function getPreferredLevel(levels, viewportHeight, pixelRatio, verticalFov, currentLevel, viewportWidth = viewportHeight) {
+  const height = Math.max(1, viewportHeight) * pixelRatio;
+  const width = Math.max(1, viewportWidth) * pixelRatio;
+  const tanHalfV = tanHalfFov2(verticalFov);
+  const requiredFaceSize = Math.max(
+    height / tanHalfV,
+    height * tanHalfV,
+    width * width * tanHalfV / height
+  );
   let preferredLevel = levels.length;
   for (let index = 0; index < levels.length; index += 1) {
     if (levels[index] >= requiredFaceSize) {
@@ -11481,9 +12061,9 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = useRef21(onLoadProgress);
-  const errorRef = useRef21(onTileError);
-  const levelChangeRef = useRef21(onLevelChange);
+  const progressRef = useRef22(onLoadProgress);
+  const errorRef = useRef22(onTileError);
+  const levelChangeRef = useRef22(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
@@ -11518,7 +12098,7 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = useRef21(false);
+  const readyRef = useRef22(false);
   useEffect22(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
@@ -11538,21 +12118,21 @@ function Tile({
     [baseUrl, resolveTileUrl, template]
   );
   const [layers, setLayers] = useState11([]);
-  const layerTokenRef = useRef21("");
-  const currentLevelRef = useRef21(1);
-  const lastUpdateAtRef = useRef21(-Infinity);
-  const visibilityDirtyRef = useRef21(true);
-  const lastVisibilityQuaternionRef = useRef21(camera.quaternion.clone());
-  const lastVisibilityFovRef = useRef21(Number.NaN);
-  const lastViewportRef = useRef21({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = useRef21(new Frustum2());
-  const projectionMatrixRef = useRef21(new Matrix43());
-  const visibilityCameraRef = useRef21(new PerspectiveCamera5());
-  const trackedLoadModeRef = useRef21(loadMode);
-  const targetKeysRef = useRef21([]);
-  const detailTokenRef = useRef21("");
+  const layerTokenRef = useRef22("");
+  const currentLevelRef = useRef22(1);
+  const lastUpdateAtRef = useRef22(-Infinity);
+  const visibilityDirtyRef = useRef22(true);
+  const lastVisibilityQuaternionRef = useRef22(camera.quaternion.clone());
+  const lastVisibilityFovRef = useRef22(Number.NaN);
+  const lastViewportRef = useRef22({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = useRef22(new Frustum2());
+  const projectionMatrixRef = useRef22(new Matrix43());
+  const visibilityCameraRef = useRef22(new PerspectiveCamera5());
+  const trackedLoadModeRef = useRef22(loadMode);
+  const targetKeysRef = useRef22([]);
+  const detailTokenRef = useRef22("");
   const detailReporter = useSceneDetailReporter();
-  const detailReporterRef = useRef21(detailReporter);
+  const detailReporterRef = useRef22(detailReporter);
   detailReporterRef.current = detailReporter;
   useEffect22(() => {
     currentLevelRef.current = 1;
@@ -11610,7 +12190,8 @@ function Tile({
         size.height,
         pixelRatio,
         camera.fov,
-        currentLevelRef.current
+        currentLevelRef.current,
+        size.width
       );
       if (targetLevel !== currentLevelRef.current) {
         currentLevelRef.current = targetLevel;
@@ -11736,8 +12317,8 @@ function SnapshotCapture({
   onCaptured
 }) {
   const { camera, gl, scene, size } = useThree16();
-  const capturedRequestRef = useRef22(0);
-  const renderTargetRef = useRef22(null);
+  const capturedRequestRef = useRef23(0);
+  const renderTargetRef = useRef23(null);
   useEffect23(
     () => () => {
       renderTargetRef.current?.dispose();
@@ -11761,8 +12342,8 @@ function SnapshotCapture({
     });
     nextTarget.texture.colorSpace = LinearSRGBColorSpace;
     nextTarget.texture.generateMipmaps = false;
-    nextTarget.texture.minFilter = LinearFilter4;
-    nextTarget.texture.magFilter = LinearFilter4;
+    nextTarget.texture.minFilter = LinearFilter3;
+    nextTarget.texture.magFilter = LinearFilter3;
     const previousTarget = gl.getRenderTarget();
     gl.setRenderTarget(nextTarget);
     gl.clear();
@@ -11819,20 +12400,20 @@ function ScenesController({
   const [transitionRunId, setTransitionRunId] = useState12(0);
   const [snapshot, setSnapshot] = useState12(null);
   const [recoveryKey, setRecoveryKey] = useState12(0);
-  const requestedSceneIdRef = useRef22(activeSceneId);
-  const captureReasonRef = useRef22("start");
-  const interactionReleaseRef = useRef22(null);
-  const slotsRef = useRef22(slots);
-  const phaseRef = useRef22(phase);
-  const liveSlotRef = useRef22(liveSlot);
-  const transitionFromRef = useRef22(initialScene);
-  const readySceneRef = useRef22(null);
-  const waitRef = useRef22(null);
-  const waitTimerRef = useRef22(null);
-  const detailGenerationRef = useRef22(0);
+  const requestedSceneIdRef = useRef23(activeSceneId);
+  const captureReasonRef = useRef23("start");
+  const interactionReleaseRef = useRef23(null);
+  const slotsRef = useRef23(slots);
+  const phaseRef = useRef23(phase);
+  const liveSlotRef = useRef23(liveSlot);
+  const transitionFromRef = useRef23(initialScene);
+  const readySceneRef = useRef23(null);
+  const waitRef = useRef23(null);
+  const waitTimerRef = useRef23(null);
+  const detailGenerationRef = useRef23(0);
   const [detailGeneration, setDetailGeneration] = useState12(0);
-  const mountedRef = useRef22(true);
-  const waitForDetailMsRef = useRef22(0);
+  const mountedRef = useRef23(true);
+  const waitForDetailMsRef = useRef23(0);
   waitForDetailMsRef.current = normalizeTransitionWaitMs(transitionWaitForDetailMs);
   slotsRef.current = slots;
   phaseRef.current = phase;
@@ -11847,14 +12428,14 @@ function ScenesController({
   useEffect23(() => () => {
     controlsRef?.current?.setSceneViewLimits(void 0);
   }, [controlsRef]);
-  const releaseInteraction = useCallback8(() => {
+  const releaseInteraction = useCallback9(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = useCallback8((sceneId, error) => {
+  const reportError = useCallback9((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const clearDetailWait = useCallback8((bumpGeneration) => {
+  const clearDetailWait = useCallback9((bumpGeneration) => {
     if (waitTimerRef.current !== null) {
       clearTimeout(waitTimerRef.current);
       waitTimerRef.current = null;
@@ -11882,7 +12463,7 @@ function ScenesController({
       clearDetailWait(false);
     };
   }, [clearDetailWait]);
-  const startPreload = useCallback8((scene) => {
+  const startPreload = useCallback9((scene) => {
     clearDetailWait(true);
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
@@ -11920,13 +12501,13 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, clearDetailWait, pendingSlot, reportError, sceneMap, startPreload]);
-  const notifySceneReady = useCallback8((scene) => {
+  const notifySceneReady = useCallback9((scene) => {
     if (!scene || readySceneRef.current === scene) return;
     readySceneRef.current = scene;
     controlsRef?.current?.setSceneViewLimits(sceneMap.get(scene.id)?.viewLimits);
     onSceneReady?.(scene.id);
   }, [controlsRef, onSceneReady, sceneMap]);
-  const handleReady = useCallback8((slot) => {
+  const handleReady = useCallback9((slot) => {
     if (slot === liveSlotRef.current && pendingSlot === null && phaseRef.current === "idle") {
       notifySceneReady(slotsRef.current[slot]);
       return;
@@ -11962,7 +12543,7 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, notifySceneReady, onTransitionEnd, pendingSlot, transition.preset]);
-  const finishTransition = useCallback8(() => {
+  const finishTransition = useCallback9(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -11987,11 +12568,11 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  const finishTransitionRef = useRef22(finishTransition);
+  const finishTransitionRef = useRef23(finishTransition);
   finishTransitionRef.current = finishTransition;
-  const transitionRef = useRef22(transition);
+  const transitionRef = useRef23(transition);
   transitionRef.current = transition;
-  const consumeDetailSignal = useCallback8((signal) => {
+  const consumeDetailSignal = useCallback9((signal) => {
     const decision = acceptDetailWait(waitRef.current, signal);
     waitRef.current = decision.wait;
     if (!decision.start) {
@@ -12011,7 +12592,7 @@ function ScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, []);
-  const handleCaptured = useCallback8((nextSnapshot) => {
+  const handleCaptured = useCallback9((nextSnapshot) => {
     if (captureReasonRef.current === "interrupt") {
       setSnapshot((current) => {
         current?.dispose();
@@ -12109,7 +12690,7 @@ function ScenesController({
     startPreload,
     transition.preset
   ]);
-  const snapshotRef = useRef22(snapshot);
+  const snapshotRef = useRef23(snapshot);
   snapshotRef.current = snapshot;
   useEffect23(() => () => {
     releaseInteraction();
@@ -12162,7 +12743,7 @@ ${slots[1]?.id ?? ""}`;
       }
     }));
   }, [consumeDetailSignal, detailGeneration, slotSceneKey]);
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
     /* @__PURE__ */ jsx23(
       SnapshotCapture,
       {
@@ -12225,7 +12806,7 @@ function Scenes({
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
-  const requestSceneChange = useCallback8(
+  const requestSceneChange = useCallback9(
     (id) => {
       if (isControlled) {
         onActiveSceneIdChange?.(id);
@@ -12235,12 +12816,12 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = useRef22(scenes);
+  const scenesRef = useRef23(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = useRef22(resolvedId);
+  const resolvedIdRef = useRef23(resolvedId);
   resolvedIdRef.current = resolvedId;
   const host = useContext19(ScenesHostContext);
-  const phaseRef = useRef22("idle");
+  const phaseRef = useRef23("idle");
   useEffect23(() => {
     if (!host) {
       return;
@@ -12311,12 +12892,12 @@ function Scenes({
 
 // src/hotspot/image-hotspot.tsx
 import { useThree as useThree20 } from "@react-three/fiber";
-import { useEffect as useEffect26, useRef as useRef26, useState as useState15 } from "react";
+import { useEffect as useEffect26, useRef as useRef27, useState as useState15 } from "react";
 import {
-  ClampToEdgeWrapping as ClampToEdgeWrapping3,
-  LinearFilter as LinearFilter5,
-  LinearMipmapLinearFilter as LinearMipmapLinearFilter2,
-  SRGBColorSpace as SRGBColorSpace4,
+  ClampToEdgeWrapping as ClampToEdgeWrapping2,
+  LinearFilter as LinearFilter4,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter3,
+  SRGBColorSpace as SRGBColorSpace3,
   TextureLoader as TextureLoader4
 } from "three";
 
@@ -12327,13 +12908,13 @@ import {
   useEffect as useEffect25,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo19,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState14
 } from "react";
 import {
   Box3 as Box34,
   EdgesGeometry,
-  MathUtils as MathUtils9,
+  MathUtils as MathUtils10,
   Matrix4 as Matrix44,
   PerspectiveCamera as PerspectiveCamera8,
   Plane,
@@ -12441,12 +13022,12 @@ import { useFrame as useFrame14, useThree as useThree17 } from "@react-three/fib
 import {
   useContext as useContext20,
   useLayoutEffect as useLayoutEffect5,
-  useRef as useRef23,
+  useRef as useRef24,
   useSyncExternalStore as useSyncExternalStore9
 } from "react";
 import { createRoot } from "react-dom/client";
 import { Vector3 as Vector314 } from "three";
-import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function useFallbackStereoView() {
   const runtime = useContext20(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
@@ -12466,9 +13047,9 @@ function ProjectedHtml({
   eye
 }) {
   const { camera, gl, events, size } = useThree17();
-  const group = useRef23(null);
-  const overlay = useRef23(null);
-  const scratch = useRef23(new Vector314());
+  const group = useRef24(null);
+  const overlay = useRef24(null);
+  const scratch = useRef24(new Vector314());
   const target = events.connected || gl.domElement.parentElement;
   const updatePosition = () => {
     const anchor = group.current;
@@ -12543,7 +13124,7 @@ function PanoHtml(props) {
   if (mode === "mobilevr" && portrait) {
     return null;
   }
-  return stereoView ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+  return stereoView ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
     /* @__PURE__ */ jsx24(ProjectedHtml, { ...props, stereoView, eye: "left" }),
     /* @__PURE__ */ jsx24(ProjectedHtml, { ...props, stereoView, eye: "right" })
   ] }) : /* @__PURE__ */ jsx24(ProjectedHtml, { ...props });
@@ -12680,7 +13261,7 @@ function HotspotTooltip({
 
 // src/hotspot/transform.ts
 import {
-  MathUtils as MathUtils7,
+  MathUtils as MathUtils8,
   PerspectiveCamera as PerspectiveCamera6,
   Vector3 as Vector315
 } from "three";
@@ -12692,7 +13273,7 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   } else {
     group.quaternion.copy(surfaceQuaternion3);
   }
-  group.rotateOnAxis(LOCAL_FORWARD, MathUtils7.degToRad(-rotation));
+  group.rotateOnAxis(LOCAL_FORWARD, MathUtils8.degToRad(-rotation));
   let scaleFactor = scaleMode === "fixed" && camera instanceof PerspectiveCamera6 ? fixedScaleFactor(camera.fov, referenceFov) : 1;
   if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof PerspectiveCamera6) {
     group.updateWorldMatrix(true, false);
@@ -12709,15 +13290,15 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   group.updateMatrixWorld();
 }
 function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = MathUtils7.clamp(referenceFov, 1, 179);
-  return Math.tan(MathUtils7.degToRad(cameraFov) / 2) / Math.tan(MathUtils7.degToRad(safeReferenceFov) / 2);
+  const safeReferenceFov = MathUtils8.clamp(referenceFov, 1, 179);
+  return Math.tan(MathUtils8.degToRad(cameraFov) / 2) / Math.tan(MathUtils8.degToRad(safeReferenceFov) / 2);
 }
 function selectionFrameScale(worldScaleX, worldScaleY, cameraSpaceDepth, fovDegrees, viewportHeight, outsetPixels) {
   const pixels = Number.isFinite(outsetPixels) && outsetPixels > 0 ? outsetPixels : 0;
   const depth = Number.isFinite(cameraSpaceDepth) ? Math.max(cameraSpaceDepth, 1e-4) : 1e-4;
   const height = Number.isFinite(viewportHeight) ? Math.max(viewportHeight, 1) : 1;
-  const fov = Number.isFinite(fovDegrees) ? MathUtils7.clamp(fovDegrees, 1, 179) : 75;
-  const pixelsPerWorldUnit = height / (2 * Math.tan(MathUtils7.degToRad(fov) * 0.5) * depth);
+  const fov = Number.isFinite(fovDegrees) ? MathUtils8.clamp(fovDegrees, 1, 179) : 75;
+  const pixelsPerWorldUnit = height / (2 * Math.tan(MathUtils8.degToRad(fov) * 0.5) * depth);
   const axis = (worldScale) => {
     const pixelsPerLocalUnit = pixelsPerWorldUnit * Math.abs(worldScale);
     if (pixelsPerLocalUnit < 1e-4) {
@@ -12731,9 +13312,9 @@ function selectionFrameScale(worldScaleX, worldScaleY, cameraSpaceDepth, fovDegr
 // src/hotspot/hotspot-stroke-line.tsx
 import { Line } from "@react-three/drei";
 import { useFrame as useFrame15, useThree as useThree18 } from "@react-three/fiber";
-import { useLayoutEffect as useLayoutEffect6, useRef as useRef24 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef25 } from "react";
 import {
-  MathUtils as MathUtils8,
+  MathUtils as MathUtils9,
   PerspectiveCamera as PerspectiveCamera7,
   Vector3 as Vector316
 } from "three";
@@ -12747,7 +13328,7 @@ function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   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(MathUtils8.degToRad(fov) * 0.5) * depth);
+  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) {
@@ -12768,7 +13349,7 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = useRef24(null);
+  const lineRef = useRef25(null);
   const { camera, size } = useThree18();
   const dash = resolveDash(dashSize, gapSize);
   useLayoutEffect6(() => {
@@ -12844,8 +13425,8 @@ var HOTSPOT_MODE_RENDERING = {
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? MathUtils9.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(MathUtils9.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? MathUtils10.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(MathUtils10.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -12858,31 +13439,31 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return MathUtils9.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return MathUtils10.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = MathUtils9.clamp(
+  const safeWidth = MathUtils10.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = MathUtils9.clamp(
+  const safeHeight = MathUtils10.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(MathUtils9.degToRad(safeWidth) / 2),
-    Math.tan(MathUtils9.degToRad(safeHeight) / 2)
+    Math.tan(MathUtils10.degToRad(safeWidth) / 2),
+    Math.tan(MathUtils10.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 = MathUtils9.degToRad(position.pitch);
-  const yaw = MathUtils9.degToRad(position.yaw);
+  const pitch = MathUtils10.degToRad(position.pitch);
+  const yaw = MathUtils10.degToRad(position.yaw);
   const localUp = new Vector317(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
@@ -12903,7 +13484,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return MathUtils9.radToDeg(aVector.angleTo(bVector));
+  return MathUtils10.radToDeg(aVector.angleTo(bVector));
 }
 var DRAG_POINTER = new Vector24();
 var DRAG_RAYCASTER = new Raycaster2();
@@ -13186,13 +13767,13 @@ function HotspotAnchor({
   const eventBus = useContext21(PanoEventBusContext);
   const cursorApi = usePanoCursor();
   const { camera, gl, size } = useThree19();
-  const groupRef = useRef25(null);
-  const selectionFrameRef = useRef25(null);
-  const tooltipAnchorRef = useRef25(null);
-  const dragStateRef = useRef25(null);
-  const updateDragRef = useRef25(() => void 0);
-  const endDragRef = useRef25(() => void 0);
-  const suppressNextClickRef = useRef25(false);
+  const groupRef = useRef26(null);
+  const selectionFrameRef = useRef26(null);
+  const tooltipAnchorRef = useRef26(null);
+  const dragStateRef = useRef26(null);
+  const updateDragRef = useRef26(() => void 0);
+  const endDragRef = useRef26(() => void 0);
+  const suppressNextClickRef = useRef26(false);
   const [hovered, setHovered] = useState14(false);
   const [dragging, setDragging] = useState14(false);
   const [pinned, setPinned] = useState14(false);
@@ -13234,7 +13815,7 @@ function HotspotAnchor({
     planeGeometry.dispose();
     return geometry;
   }, []);
-  const eventHovered = useRef25(false);
+  const eventHovered = useRef26(false);
   useEffect25(() => {
     if (!visible || !interactive || pointerEvents === "none") eventHovered.current = false;
   }, [visible, interactive, pointerEvents]);
@@ -13752,8 +14333,8 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = useThree20((state) => state.gl);
   const [texture, setTexture] = useState15(null);
-  const onLoadRef = useRef26(onLoad);
-  const onErrorRef = useRef26(onError);
+  const onLoadRef = useRef27(onLoad);
+  const onErrorRef = useRef27(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect26(() => {
@@ -13772,11 +14353,11 @@ function useHotspotImageTexture(src, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = SRGBColorSpace4;
-        loadedTexture.wrapS = ClampToEdgeWrapping3;
-        loadedTexture.wrapT = ClampToEdgeWrapping3;
-        loadedTexture.magFilter = LinearFilter5;
-        loadedTexture.minFilter = LinearMipmapLinearFilter2;
+        loadedTexture.colorSpace = SRGBColorSpace3;
+        loadedTexture.wrapS = ClampToEdgeWrapping2;
+        loadedTexture.wrapT = ClampToEdgeWrapping2;
+        loadedTexture.magFilter = LinearFilter4;
+        loadedTexture.minFilter = LinearMipmapLinearFilter3;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -13816,13 +14397,13 @@ function ImageHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect27, useRef as useRef27, useState as useState16 } from "react";
+import { useEffect as useEffect27, useRef as useRef28, useState as useState16 } from "react";
 import {
   CanvasTexture,
-  ClampToEdgeWrapping as ClampToEdgeWrapping4,
-  LinearFilter as LinearFilter6,
-  LinearMipmapLinearFilter as LinearMipmapLinearFilter3,
-  SRGBColorSpace as SRGBColorSpace5
+  ClampToEdgeWrapping as ClampToEdgeWrapping3,
+  LinearFilter as LinearFilter5,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter4,
+  SRGBColorSpace as SRGBColorSpace4
 } from "three";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
@@ -14003,19 +14584,19 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   }
   drawGraphic(context, graphic, aspectWidth, aspectHeight);
   const texture = new CanvasTexture(canvas);
-  texture.colorSpace = SRGBColorSpace5;
-  texture.wrapS = ClampToEdgeWrapping4;
-  texture.wrapT = ClampToEdgeWrapping4;
-  texture.magFilter = LinearFilter6;
-  texture.minFilter = LinearMipmapLinearFilter3;
+  texture.colorSpace = SRGBColorSpace4;
+  texture.wrapS = ClampToEdgeWrapping3;
+  texture.wrapT = ClampToEdgeWrapping3;
+  texture.magFilter = LinearFilter5;
+  texture.minFilter = LinearMipmapLinearFilter4;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
   const [texture, setTexture] = useState16(null);
-  const onLoadRef = useRef27(onLoad);
-  const onErrorRef = useRef27(onError);
+  const onLoadRef = useRef28(onLoad);
+  const onErrorRef = useRef28(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect27(() => {
@@ -14057,12 +14638,12 @@ function GraphicHotspot(props) {
 
 // src/hotspot/sequence-hotspot.tsx
 import { useFrame as useFrame17, useThree as useThree21 } from "@react-three/fiber";
-import { useEffect as useEffect28, useRef as useRef28, useState as useState17 } from "react";
+import { useEffect as useEffect28, useRef as useRef29, useState as useState17 } from "react";
 import {
-  ClampToEdgeWrapping as ClampToEdgeWrapping5,
-  LinearFilter as LinearFilter7,
-  LinearMipmapLinearFilter as LinearMipmapLinearFilter4,
-  SRGBColorSpace as SRGBColorSpace6,
+  ClampToEdgeWrapping as ClampToEdgeWrapping4,
+  LinearFilter as LinearFilter6,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter5,
+  SRGBColorSpace as SRGBColorSpace5,
   TextureLoader as TextureLoader5
 } from "three";
 import { jsx as jsx31 } from "react/jsx-runtime";
@@ -14081,8 +14662,8 @@ function useSpriteTexture({
 }) {
   const gl = useThree21((state) => state.gl);
   const [texture, setTexture] = useState17(null);
-  const onErrorRef = useRef28(onError);
-  const onLoadProgressRef = useRef28(onLoadProgress);
+  const onErrorRef = useRef29(onError);
+  const onLoadProgressRef = useRef29(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
   useEffect28(() => {
@@ -14102,11 +14683,11 @@ function useSpriteTexture({
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = SRGBColorSpace6;
-        loadedTexture.wrapS = ClampToEdgeWrapping5;
-        loadedTexture.wrapT = ClampToEdgeWrapping5;
-        loadedTexture.magFilter = LinearFilter7;
-        loadedTexture.minFilter = LinearMipmapLinearFilter4;
+        loadedTexture.colorSpace = SRGBColorSpace5;
+        loadedTexture.wrapS = ClampToEdgeWrapping4;
+        loadedTexture.wrapT = ClampToEdgeWrapping4;
+        loadedTexture.magFilter = LinearFilter6;
+        loadedTexture.minFilter = LinearMipmapLinearFilter5;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -14156,13 +14737,13 @@ function SequenceHotspot({
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
   const [frameIndex, setFrameIndex] = useState17(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);
+  const elapsedRef = useRef29(0);
+  const frameIndexRef = useRef29(0);
+  const endedRef = useRef29(false);
+  const lastPlaybackStateRef = useRef29(null);
+  const onFrameChangeRef = useRef29(onFrameChange);
+  const onPlaybackStateChangeRef = useRef29(onPlaybackStateChange);
+  const onEndedRef = useRef29(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
@@ -14246,12 +14827,12 @@ function SequenceHotspot({
 
 // src/hotspot/video-hotspot.tsx
 import { useThree as useThree22 } from "@react-three/fiber";
-import { useEffect as useEffect29, useLayoutEffect as useLayoutEffect8, useRef as useRef29, useState as useState18 } from "react";
+import { useEffect as useEffect29, useLayoutEffect as useLayoutEffect8, useRef as useRef30, useState as useState18 } from "react";
 import {
-  ClampToEdgeWrapping as ClampToEdgeWrapping6,
-  LinearFilter as LinearFilter8,
-  LinearMipmapLinearFilter as LinearMipmapLinearFilter5,
-  SRGBColorSpace as SRGBColorSpace7,
+  ClampToEdgeWrapping as ClampToEdgeWrapping5,
+  LinearFilter as LinearFilter7,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter6,
+  SRGBColorSpace as SRGBColorSpace6,
   TextureLoader as TextureLoader6,
   VideoTexture
 } from "three";
@@ -14317,7 +14898,7 @@ function clampVolume2(volume) {
 function usePosterTexture(id, poster, onError) {
   const gl = useThree22((state) => state.gl);
   const [texture, setTexture] = useState18(null);
-  const onErrorRef = useRef29(onError);
+  const onErrorRef = useRef30(onError);
   onErrorRef.current = onError;
   useEffect29(() => {
     let active = true;
@@ -14335,11 +14916,11 @@ function usePosterTexture(id, poster, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = SRGBColorSpace7;
-        loadedTexture.wrapS = ClampToEdgeWrapping6;
-        loadedTexture.wrapT = ClampToEdgeWrapping6;
-        loadedTexture.magFilter = LinearFilter8;
-        loadedTexture.minFilter = LinearMipmapLinearFilter5;
+        loadedTexture.colorSpace = SRGBColorSpace6;
+        loadedTexture.wrapS = ClampToEdgeWrapping5;
+        loadedTexture.wrapT = ClampToEdgeWrapping5;
+        loadedTexture.magFilter = LinearFilter7;
+        loadedTexture.minFilter = LinearMipmapLinearFilter6;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -14376,9 +14957,9 @@ function useVideoResource({
 }) {
   const gl = useThree22((state) => state.gl);
   const [resource, setResource] = useState18(null);
-  const onEndedRef = useRef29(onEnded);
-  const onErrorRef = useRef29(onError);
-  const onPlaybackStateChangeRef = useRef29(onPlaybackStateChange);
+  const onEndedRef = useRef30(onEnded);
+  const onErrorRef = useRef30(onError);
+  const onPlaybackStateChangeRef = useRef30(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
@@ -14395,11 +14976,11 @@ function useVideoResource({
     applyInlineVideoPlayback(video, playsInline ?? true);
     video.poster = poster ?? "";
     const texture = new VideoTexture(video);
-    texture.colorSpace = SRGBColorSpace7;
-    texture.wrapS = ClampToEdgeWrapping6;
-    texture.wrapT = ClampToEdgeWrapping6;
-    texture.magFilter = LinearFilter8;
-    texture.minFilter = LinearFilter8;
+    texture.colorSpace = SRGBColorSpace6;
+    texture.wrapS = ClampToEdgeWrapping5;
+    texture.wrapT = ClampToEdgeWrapping5;
+    texture.magFilter = LinearFilter7;
+    texture.minFilter = LinearFilter7;
     texture.generateMipmaps = false;
     const notifyState = (state) => {
       if (active) {
@@ -14495,8 +15076,8 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture(id, poster, onError);
-  const onPlaybackErrorRef = useRef29(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef29(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef30(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef30(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   useLayoutEffect8(() => {
@@ -14537,18 +15118,18 @@ function VideoHotspot({
 
 // src/hotspot/audio-hotspot.tsx
 import { useFrame as useFrame18, useThree as useThree23 } from "@react-three/fiber";
-import { useEffect as useEffect30, useRef as useRef30, useState as useState19 } from "react";
+import { useEffect as useEffect30, useRef as useRef31, useState as useState19 } from "react";
 import {
   CanvasTexture as CanvasTexture2,
-  ClampToEdgeWrapping as ClampToEdgeWrapping7,
-  LinearFilter as LinearFilter9,
-  LinearMipmapLinearFilter as LinearMipmapLinearFilter6,
-  SRGBColorSpace as SRGBColorSpace8,
+  ClampToEdgeWrapping as ClampToEdgeWrapping6,
+  LinearFilter as LinearFilter8,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter7,
+  SRGBColorSpace as SRGBColorSpace7,
   TextureLoader as TextureLoader7
 } from "three";
 
 // src/hotspot/audio-spatial.ts
-import { MathUtils as MathUtils10, Vector3 as Vector318 } from "three";
+import { MathUtils as MathUtils11, Vector3 as Vector318 } from "three";
 var LOOK_DIR = new Vector318();
 var SOURCE_DIR = new Vector318();
 var RIGHT_DIR = new Vector318();
@@ -14576,11 +15157,11 @@ function lookRangeGain(angleDegrees, range) {
 function audioSpatialFromView(camera, position, range) {
   camera.getWorldDirection(LOOK_DIR);
   SOURCE_DIR.copy(panoPositionToVector3(position)).normalize();
-  const angleDegrees = MathUtils10.radToDeg(
-    Math.acos(MathUtils10.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
+  const angleDegrees = MathUtils11.radToDeg(
+    Math.acos(MathUtils11.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
   );
   RIGHT_DIR.set(1, 0, 0).applyQuaternion(camera.quaternion);
-  const pan = MathUtils10.clamp(
+  const pan = MathUtils11.clamp(
     Math.atan2(SOURCE_DIR.dot(RIGHT_DIR), SOURCE_DIR.dot(LOOK_DIR)) / (Math.PI / 2),
     -1,
     1
@@ -14646,11 +15227,11 @@ function createSpeakerTexture(state) {
     }
   }
   const texture = new CanvasTexture2(canvas);
-  texture.colorSpace = SRGBColorSpace8;
-  texture.wrapS = ClampToEdgeWrapping7;
-  texture.wrapT = ClampToEdgeWrapping7;
-  texture.magFilter = LinearFilter9;
-  texture.minFilter = LinearMipmapLinearFilter6;
+  texture.colorSpace = SRGBColorSpace7;
+  texture.wrapS = ClampToEdgeWrapping6;
+  texture.wrapT = ClampToEdgeWrapping6;
+  texture.magFilter = LinearFilter8;
+  texture.minFilter = LinearMipmapLinearFilter7;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
@@ -14675,7 +15256,7 @@ function useSpeakerTextures(enabled) {
 function useIconTexture(icon, enabled, onError, id) {
   const gl = useThree23((state) => state.gl);
   const [texture, setTexture] = useState19(null);
-  const onErrorRef = useRef30(onError);
+  const onErrorRef = useRef31(onError);
   onErrorRef.current = onError;
   useEffect30(() => {
     let active = true;
@@ -14693,11 +15274,11 @@ function useIconTexture(icon, enabled, onError, id) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = SRGBColorSpace8;
-        loadedTexture.wrapS = ClampToEdgeWrapping7;
-        loadedTexture.wrapT = ClampToEdgeWrapping7;
-        loadedTexture.magFilter = LinearFilter9;
-        loadedTexture.minFilter = LinearMipmapLinearFilter6;
+        loadedTexture.colorSpace = SRGBColorSpace7;
+        loadedTexture.wrapS = ClampToEdgeWrapping6;
+        loadedTexture.wrapT = ClampToEdgeWrapping6;
+        loadedTexture.magFilter = LinearFilter8;
+        loadedTexture.minFilter = LinearMipmapLinearFilter7;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -14735,12 +15316,12 @@ function useAudioHowl({
   format
 }) {
   const [howl, setHowl] = useState19(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);
+  const playingRef = useRef31(playing);
+  const loopRef = useRef31(loop ?? false);
+  const onEndedRef = useRef31(onEnded);
+  const onErrorRef = useRef31(onError);
+  const onPlaybackErrorRef = useRef31(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef31(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -14833,11 +15414,11 @@ function AudioHotspot({
   const stoppedIconTexture = useIconTexture(icon, marker, onError, id);
   const playingIconTexture = useIconTexture(playingIcon, marker, onError, id);
   const markerTexture = playing ? playingIconTexture ?? stoppedIconTexture ?? speakerTextures.playing : stoppedIconTexture ?? speakerTextures.stopped;
-  const playingRef = useRef30(playing);
+  const playingRef = useRef31(playing);
   playingRef.current = playing;
-  const mutedRef = useRef30(muted);
-  const volumeRef = useRef30(volume);
-  const rangeRef = useRef30(range);
+  const mutedRef = useRef31(muted);
+  const volumeRef = useRef31(volume);
+  const rangeRef = useRef31(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
@@ -14886,15 +15467,15 @@ function AudioHotspot({
 }
 
 // src/hotspot/text-hotspot.tsx
-import { useEffect as useEffect31, useRef as useRef31, useState as useState20 } from "react";
+import { useEffect as useEffect31, useRef as useRef32, useState as useState20 } from "react";
 import { useFrame as useFrame19, useThree as useThree24 } from "@react-three/fiber";
 import {
   CanvasTexture as CanvasTexture3,
-  ClampToEdgeWrapping as ClampToEdgeWrapping8,
-  LinearFilter as LinearFilter10,
-  MathUtils as MathUtils11,
+  ClampToEdgeWrapping as ClampToEdgeWrapping7,
+  LinearFilter as LinearFilter9,
+  MathUtils as MathUtils12,
   PerspectiveCamera as PerspectiveCamera9,
-  SRGBColorSpace as SRGBColorSpace9
+  SRGBColorSpace as SRGBColorSpace8
 } from "three";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var TEXT_TEXTURE_LONG_SIDE = 1024;
@@ -14967,7 +15548,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(MathUtils11.degToRad(angle) / 2) / Math.tan(MathUtils11.degToRad(fov) / 2) * viewportHeight;
+  return Math.tan(MathUtils12.degToRad(angle) / 2) / Math.tan(MathUtils12.degToRad(fov) / 2) * viewportHeight;
 }
 function snapRasterLongSide(screenLong, layoutLong) {
   if (!(screenLong > 0)) {
@@ -15157,11 +15738,11 @@ function createTextTexture(text, width, height, style, rasterLong) {
   );
   drawTextHotspot(context, layout.canvasWidth, layout.canvasHeight, text, style);
   const texture = new CanvasTexture3(canvas);
-  texture.colorSpace = SRGBColorSpace9;
-  texture.wrapS = ClampToEdgeWrapping8;
-  texture.wrapT = ClampToEdgeWrapping8;
-  texture.magFilter = LinearFilter10;
-  texture.minFilter = LinearFilter10;
+  texture.colorSpace = SRGBColorSpace8;
+  texture.wrapS = ClampToEdgeWrapping7;
+  texture.wrapT = ClampToEdgeWrapping7;
+  texture.magFilter = LinearFilter9;
+  texture.minFilter = LinearFilter9;
   texture.generateMipmaps = false;
   texture.needsUpdate = true;
   return texture;
@@ -15206,8 +15787,8 @@ 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] = useState20(null);
-  const onLoadRef = useRef31(onLoad);
-  const onErrorRef = useRef31(onError);
+  const onLoadRef = useRef32(onLoad);
+  const onErrorRef = useRef32(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect31(() => {
@@ -15436,7 +16017,7 @@ function IframeHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useEffect as useEffect32, useMemo as useMemo20, useRef as useRef32 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo20, useRef as useRef33 } from "react";
 import {
   BufferGeometry as BufferGeometry2,
   DoubleSide as DoubleSide5,
@@ -15715,7 +16296,7 @@ function PolygonHotspot({
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef32(null);
+  const startVerticesRef = useRef33(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
   useEffect32(() => {
     if (!valid) onInvalid?.(issues);
@@ -15800,9 +16381,9 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useEffect as useEffect33, useMemo as useMemo21, useRef as useRef33 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo21, useRef as useRef34 } from "react";
 import {
-  MathUtils as MathUtils12,
+  MathUtils as MathUtils13,
   Matrix4 as Matrix46,
   Quaternion as Quaternion6,
   Vector3 as Vector320
@@ -15839,8 +16420,8 @@ function polylineCenter(vertices) {
 function surfaceQuaternion2(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = MathUtils12.degToRad(position.pitch);
-  const yaw = MathUtils12.degToRad(position.yaw);
+  const pitch = MathUtils13.degToRad(position.pitch);
+  const yaw = MathUtils13.degToRad(position.yaw);
   const localUp = new Vector320(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
@@ -15869,7 +16450,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(MathUtils12.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(MathUtils13.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -15932,7 +16513,7 @@ function PolylineHotspot({
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef33(null);
+  const startVerticesRef = useRef34(null);
   useEffect33(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
@@ -16249,7 +16830,7 @@ function ProjectScenes({
 }
 
 // src/background-audio.tsx
-import { useContext as useContext23, useEffect as useEffect34, useMemo as useMemo23, useRef as useRef34, useState as useState22 } from "react";
+import { useContext as useContext23, useEffect as useEffect34, useMemo as useMemo23, useRef as useRef35, useState as useState22 } from "react";
 var DEFAULT_FADE_MS = 400;
 function resolveFadeMs(value) {
   if (!Number.isFinite(value)) {
@@ -16301,21 +16882,21 @@ function BackgroundAudio({
   const urls = resolveBackgroundAudioUrls(src, sources, sceneId);
   usePanoMediaActivationIntent(playing && urls.length > 0);
   const trackKey = urls.join("\0");
-  const currentRef = useRef34(null);
-  const outgoingRef = useRef34([]);
-  const fadingInRef = useRef34(false);
-  const isFirstTrackRef = useRef34(true);
-  const playingRef = useRef34(playing);
-  const loopRef = useRef34(loop);
-  const mutedRef = useRef34(muted);
-  const volumeRef = useRef34(volume);
-  const mutedPropRef = useRef34(muted);
-  const volumePropRef = useRef34(volume);
-  const fadeMsRef = useRef34(resolveFadeMs(fadeMs));
-  const onPlaybackStateChangeRef = useRef34(onPlaybackStateChange);
-  const onPlaybackErrorRef = useRef34(onPlaybackError);
-  const onEndedRef = useRef34(onEnded);
-  const onErrorRef = useRef34(onError);
+  const currentRef = useRef35(null);
+  const outgoingRef = useRef35([]);
+  const fadingInRef = useRef35(false);
+  const isFirstTrackRef = useRef35(true);
+  const playingRef = useRef35(playing);
+  const loopRef = useRef35(loop);
+  const mutedRef = useRef35(muted);
+  const volumeRef = useRef35(volume);
+  const mutedPropRef = useRef35(muted);
+  const volumePropRef = useRef35(volume);
+  const fadeMsRef = useRef35(resolveFadeMs(fadeMs));
+  const onPlaybackStateChangeRef = useRef35(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef35(onPlaybackError);
+  const onEndedRef = useRef35(onEnded);
+  const onErrorRef = useRef35(onError);
   playingRef.current = playing;
   loopRef.current = loop;
   fadeMsRef.current = resolveFadeMs(fadeMs);
@@ -16331,7 +16912,7 @@ function BackgroundAudio({
   onPlaybackErrorRef.current = onPlaybackError;
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
-  const snapshotRef = useRef34({
+  const snapshotRef = useRef35({
     ready: false,
     playing: false,
     blocked: false,
@@ -16339,7 +16920,7 @@ function BackgroundAudio({
     muted,
     volume
   });
-  const snapshotListenersRef = useRef34(/* @__PURE__ */ new Set());
+  const snapshotListenersRef = useRef35(/* @__PURE__ */ new Set());
   const notifySnapshot = (patch) => {
     const prev = snapshotRef.current;
     snapshotRef.current = { ...prev, ...patch };
@@ -16347,7 +16928,7 @@ function BackgroundAudio({
       listener();
     }
   };
-  const isControlledRef = useRef34(isControlled);
+  const isControlledRef = useRef35(isControlled);
   isControlledRef.current = isControlled;
   const controller = useMemo23(
     () => ({
@@ -16635,11 +17216,11 @@ function PanoFilter({
 import { useFrame as useFrame20, useThree as useThree25 } from "@react-three/fiber";
 import {
   forwardRef as forwardRef3,
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext25,
   useEffect as useEffect36,
   useImperativeHandle as useImperativeHandle3,
-  useRef as useRef35,
+  useRef as useRef36,
   useState as useState23
 } from "react";
 import { Quaternion as Quaternion7 } from "three";
@@ -16679,30 +17260,30 @@ var Gyro = forwardRef3(function Gyro2({
   const { gl } = useThree25();
   const [internallyDisabled, setInternallyDisabled] = useState23(false);
   const [available, setAvailableState] = useState23(false);
-  const availableRef = useRef35(false);
-  const availabilityReportedRef = useRef35(null);
-  const activeRef = useRef35(false);
-  const permissionRef = useRef35(deviceOrientationPermissionState);
-  const absoluteEventSourceRef = useRef35(null);
-  const rawQuaternionRef = useRef35(new Quaternion7());
-  const hasRawQuaternionRef = useRef35(false);
-  const calibrationRef = useRef35(new Quaternion7());
-  const hasCalibrationRef = useRef35(false);
-  const calibratedQuaternionRef = useRef35(new Quaternion7());
-  const absoluteOffsetRef = useRef35({ yaw: 0, pitch: 0 });
-  const screenAngleRef = useRef35(getScreenOrientationAngle());
-  const startPoseRef = useRef35(null);
-  const enabledAtRef = useRef35(0);
-  const filteredPoseRef = useRef35(null);
-  const lastAppliedPoseRef = useRef35(null);
-  const lastSamplePoseRef = useRef35(null);
-  const lastSampleAtRef = useRef35(null);
-  const previousYawRef = useRef35(void 0);
-  const absoluteRef = useRef35(absolute);
-  const northRef = useRef35(north);
+  const availableRef = useRef36(false);
+  const availabilityReportedRef = useRef36(null);
+  const activeRef = useRef36(false);
+  const permissionRef = useRef36(deviceOrientationPermissionState);
+  const absoluteEventSourceRef = useRef36(null);
+  const rawQuaternionRef = useRef36(new Quaternion7());
+  const hasRawQuaternionRef = useRef36(false);
+  const calibrationRef = useRef36(new Quaternion7());
+  const hasCalibrationRef = useRef36(false);
+  const calibratedQuaternionRef = useRef36(new Quaternion7());
+  const absoluteOffsetRef = useRef36({ yaw: 0, pitch: 0 });
+  const screenAngleRef = useRef36(getScreenOrientationAngle());
+  const startPoseRef = useRef36(null);
+  const enabledAtRef = useRef36(0);
+  const filteredPoseRef = useRef36(null);
+  const lastAppliedPoseRef = useRef36(null);
+  const lastSamplePoseRef = useRef36(null);
+  const lastSampleAtRef = useRef36(null);
+  const previousYawRef = useRef36(void 0);
+  const absoluteRef = useRef36(absolute);
+  const northRef = useRef36(north);
   absoluteRef.current = absolute;
   northRef.current = north;
-  const callbacksRef = useRef35({
+  const callbacksRef = useRef36({
     onAvailable,
     onUnavailable,
     onEnable,
@@ -16719,7 +17300,7 @@ var Gyro = forwardRef3(function Gyro2({
   if (!controlsRef) {
     throw new Error("<Gyro> must be rendered inside <PanoViewer>.");
   }
-  const emit = useCallback9(
+  const emit = useCallback10(
     (type) => {
       eventBus?.emit(type, void 0);
       switch (type) {
@@ -16746,7 +17327,7 @@ var Gyro = forwardRef3(function Gyro2({
     },
     [eventBus]
   );
-  const setAvailable = useCallback9(
+  const setAvailable = useCallback10(
     (nextAvailable) => {
       availableRef.current = nextAvailable;
       setAvailableState(nextAvailable);
@@ -16758,7 +17339,7 @@ var Gyro = forwardRef3(function Gyro2({
     },
     [emit]
   );
-  const requestPermission = useCallback9(async () => {
+  const requestPermission = useCallback10(async () => {
     if (!availableRef.current) {
       return false;
     }
@@ -16791,7 +17372,7 @@ var Gyro = forwardRef3(function Gyro2({
     emit("gyrodenied");
     return false;
   }, [emit, setAvailable]);
-  const deactivate = useCallback9(() => {
+  const deactivate = useCallback10(() => {
     if (activeRef.current) {
       activeRef.current = false;
       controlsRef.current?.setGyroActive(false);
@@ -16806,7 +17387,7 @@ var Gyro = forwardRef3(function Gyro2({
     lastSampleAtRef.current = null;
     previousYawRef.current = void 0;
   }, [controlsRef, emit]);
-  const anchorToView = useCallback9(
+  const anchorToView = useCallback10(
     (yaw, pitch) => {
       if (!hasRawQuaternionRef.current) {
         return;
@@ -16836,7 +17417,7 @@ var Gyro = forwardRef3(function Gyro2({
     },
     []
   );
-  const resetSensor = useCallback9(
+  const resetSensor = useCallback10(
     (yaw, pitch) => {
       if (!hasRawQuaternionRef.current) {
         return;
@@ -17118,12 +17699,12 @@ var Gyro = forwardRef3(function Gyro2({
 import { useThree as useThree28 } from "@react-three/fiber";
 import {
   forwardRef as forwardRef4,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext27,
   useEffect as useEffect40,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo26,
-  useRef as useRef39,
+  useRef as useRef40,
   useState as useState24
 } from "react";
 
@@ -17132,18 +17713,196 @@ function isMobileVRDevice() {
   if (typeof navigator === "undefined") {
     return false;
   }
-  return /Android|iPad|iPhone|iPod|Mobile/i.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+  return /Android|iPad|iPhone|iPod|Mobile/i.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+}
+async function detectWebVRCapabilities() {
+  const mobile = isMobileVRDevice();
+  const sensor = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined";
+  let webxr = false;
+  try {
+    webxr = typeof navigator !== "undefined" && navigator.xr !== void 0 && await navigator.xr.isSessionSupported("immersive-vr");
+  } catch {
+    webxr = false;
+  }
+  return { webxr, mobile, sensor };
+}
+
+// src/webvr/dpdb.ts
+var DEFAULT_WEBVR_DATABASE_URL = "https://storage.googleapis.com/cardboard-dpdb/dpdb.json";
+var SCREENSIZE_MIN = 3;
+var SCREENSIZE_MAX = 20;
+var cache = /* @__PURE__ */ new Map();
+function normalizeDatabaseUrl(value) {
+  if (value === null || value === "") {
+    return null;
+  }
+  if (value === void 0) {
+    return DEFAULT_WEBVR_DATABASE_URL;
+  }
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+function physicalResolution(screenWidth, screenHeight, devicePixelRatio) {
+  const ratio = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
+  return [
+    Math.round(Math.max(0, screenWidth) * ratio),
+    Math.round(Math.max(0, screenHeight) * ratio)
+  ];
+}
+function resolutionsMatch(rule, physical) {
+  const [rw, rh] = rule;
+  const [pw, ph] = physical;
+  return rw === pw && rh === ph || rw === ph && rh === pw;
+}
+function ruleMatches(rule, input, physical) {
+  if (typeof rule.ua === "string") {
+    return input.userAgent.includes(rule.ua);
+  }
+  if (Array.isArray(rule.res) && rule.res.length === 2 && typeof rule.res[0] === "number" && typeof rule.res[1] === "number") {
+    return resolutionsMatch(
+      [rule.res[0], rule.res[1]],
+      physical
+    );
+  }
+  return false;
+}
+function deviceMatches(device, input) {
+  const rules = device.rules;
+  if (!Array.isArray(rules) || rules.length === 0) {
+    return false;
+  }
+  const physical = physicalResolution(
+    input.screenWidth,
+    input.screenHeight,
+    input.devicePixelRatio
+  );
+  return rules.some(
+    (rule) => rule !== null && typeof rule === "object" && ruleMatches(rule, input, physical)
+  );
+}
+function diagonalInchesFromDpi(dpi, physicalWidth, physicalHeight) {
+  const shortPx = Math.min(physicalWidth, physicalHeight);
+  const longPx = Math.max(physicalWidth, physicalHeight);
+  if (!(shortPx > 0 && longPx > 0)) {
+    return null;
+  }
+  let dpiX;
+  let dpiY;
+  if (typeof dpi === "number") {
+    if (!(Number.isFinite(dpi) && dpi > 0)) {
+      return null;
+    }
+    dpiX = dpi;
+    dpiY = dpi;
+  } else if (Array.isArray(dpi) && dpi.length >= 1) {
+    const first = dpi[0];
+    const second = dpi.length >= 2 ? dpi[1] : first;
+    if (typeof first !== "number" || typeof second !== "number" || !(Number.isFinite(first) && first > 0) || !(Number.isFinite(second) && second > 0)) {
+      return null;
+    }
+    dpiX = first;
+    dpiY = second;
+  } else {
+    return null;
+  }
+  const widthIn = shortPx / dpiX;
+  const heightIn = longPx / dpiY;
+  const diagonal = Math.sqrt(widthIn * widthIn + heightIn * heightIn);
+  if (!Number.isFinite(diagonal) || diagonal < SCREENSIZE_MIN || diagonal > SCREENSIZE_MAX) {
+    return null;
+  }
+  return Math.round(diagonal * 10) / 10;
+}
+function matchDpdbDevice(document2, input) {
+  const devices = document2.devices;
+  if (!Array.isArray(devices)) {
+    return null;
+  }
+  const physical = physicalResolution(
+    input.screenWidth,
+    input.screenHeight,
+    input.devicePixelRatio
+  );
+  for (const device of devices) {
+    if (!deviceMatches(device, input)) {
+      continue;
+    }
+    if (device.dpi === void 0) {
+      continue;
+    }
+    const screensizeInches = diagonalInchesFromDpi(
+      device.dpi,
+      physical[0],
+      physical[1]
+    );
+    if (screensizeInches === null) {
+      continue;
+    }
+    return { device, screensizeInches };
+  }
+  return null;
+}
+function readDpdbMatchInput(globalObject = globalThis) {
+  const navigatorObject = globalObject.navigator;
+  const screenObject = globalObject.screen;
+  if (!navigatorObject || !screenObject) {
+    return null;
+  }
+  const width = screenObject.width;
+  const height = screenObject.height;
+  if (typeof width !== "number" || typeof height !== "number" || !(width > 0 && height > 0)) {
+    return null;
+  }
+  const dpr = typeof globalObject.devicePixelRatio === "number" ? globalObject.devicePixelRatio : 1;
+  return {
+    userAgent: navigatorObject.userAgent ?? "",
+    screenWidth: width,
+    screenHeight: height,
+    devicePixelRatio: dpr
+  };
 }
-async function detectWebVRCapabilities() {
-  const mobile = isMobileVRDevice();
-  const sensor = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined";
-  let webxr = false;
+async function fetchDpdbDocument(url) {
   try {
-    webxr = typeof navigator !== "undefined" && navigator.xr !== void 0 && await navigator.xr.isSessionSupported("immersive-vr");
+    const response = await fetch(url, {
+      credentials: "omit",
+      mode: "cors"
+    });
+    if (!response.ok) {
+      return null;
+    }
+    const data = await response.json();
+    if (data === null || typeof data !== "object" || !("devices" in data) || !Array.isArray(data.devices)) {
+      return null;
+    }
+    return data;
   } catch {
-    webxr = false;
+    return null;
   }
-  return { webxr, mobile, sensor };
+}
+function loadDpdbDocument(url) {
+  const existing = cache.get(url);
+  if (existing) {
+    return existing;
+  }
+  const pending = fetchDpdbDocument(url).then((document2) => {
+    if (!document2) {
+      cache.delete(url);
+    }
+    return document2;
+  });
+  cache.set(url, pending);
+  return pending;
+}
+async function resolveScreensizeFromDpdb(databaseUrl, input = readDpdbMatchInput()) {
+  const url = normalizeDatabaseUrl(databaseUrl);
+  if (!url || !input) {
+    return null;
+  }
+  const document2 = await loadDpdbDocument(url);
+  if (!document2) {
+    return null;
+  }
+  return matchDpdbDevice(document2, input)?.screensizeInches ?? null;
 }
 
 // src/webvr/presentation.ts
@@ -17303,7 +18062,7 @@ function subscribeWebVRPresentationExit(element, onExit) {
 
 // src/webvr/reticle.tsx
 import { useFrame as useFrame21, useThree as useThree26 } from "@react-three/fiber";
-import { useRef as useRef36 } from "react";
+import { useRef as useRef37 } from "react";
 import {
   DoubleSide as DoubleSide6,
   Raycaster as Raycaster4,
@@ -17396,13 +18155,13 @@ function WebVRReticle({
   scale = RETICLE_SCALE,
   visible
 }) {
-  const groupRef = useRef36(null);
-  const ringMeshRef = useRef36(null);
-  const directionRef = useRef36(new Vector321());
-  const raycasterRef = useRef36(new Raycaster4());
-  const hoveredRef = useRef36(null);
-  const dwellRef = useRef36(0);
-  const clickedRef = useRef36(false);
+  const groupRef = useRef37(null);
+  const ringMeshRef = useRef37(null);
+  const directionRef = useRef37(new Vector321());
+  const raycasterRef = useRef37(new Raycaster4());
+  const hoveredRef = useRef37(null);
+  const dwellRef = useRef37(0);
+  const clickedRef = useRef37(false);
   const { camera, gl, scene } = useThree26();
   useFrame21((_, deltaSeconds) => {
     const group = groupRef.current;
@@ -17565,7 +18324,7 @@ function WebVRReticle({
 
 // src/webvr/stereo.tsx
 import { useFrame as useFrame22, useThree as useThree27 } from "@react-three/fiber";
-import { useContext as useContext26, useEffect as useEffect37, useMemo as useMemo25, useRef as useRef37 } from "react";
+import { useContext as useContext26, useEffect as useEffect37, useMemo as useMemo25, useRef as useRef38 } from "react";
 import {
   Matrix4 as Matrix47,
   Mesh as Mesh6,
@@ -17580,6 +18339,40 @@ import {
   WebGLRenderTarget as WebGLRenderTarget2
 } from "three";
 
+// src/webvr/lens-center.ts
+function physicalScreenFromDiagonal(screensizeInches, displayAspect) {
+  if (!(Number.isFinite(screensizeInches) && screensizeInches > 0 && Number.isFinite(displayAspect) && displayAspect > 0)) {
+    return null;
+  }
+  const diagonalMm = screensizeInches * 25.4;
+  const heightMm = diagonalMm / Math.sqrt(displayAspect * displayAspect + 1);
+  const widthMm = heightMm * displayAspect;
+  if (!(heightMm > 0 && widthMm > 0)) {
+    return null;
+  }
+  return { widthMm, heightMm };
+}
+function computeStereoLensCenters(profile, screensize, displayAspect) {
+  const zero = { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } };
+  if (screensize === "auto") {
+    return zero;
+  }
+  const screen = physicalScreenFromDiagonal(screensize, displayAspect);
+  if (!screen) {
+    return zero;
+  }
+  const halfEyeWidthMm = screen.widthMm / 4;
+  const ipdMm = Number.isFinite(profile.ipdMm) ? profile.ipdMm : 60;
+  const x = halfEyeWidthMm > 0 ? (halfEyeWidthMm - ipdMm / 2) / halfEyeWidthMm : 0;
+  const trayDistanceMm = typeof profile.trayDistanceMm === "number" && Number.isFinite(profile.trayDistanceMm) && profile.trayDistanceMm > 0 ? profile.trayDistanceMm : 0;
+  const y = trayDistanceMm > 0 && screen.heightMm > 0 ? 2 * trayDistanceMm / screen.heightMm - 1 : 0;
+  const clampUnit = (value) => Math.max(-1, Math.min(1, Number.isFinite(value) ? value : 0));
+  return {
+    left: { x: clampUnit(x), y: clampUnit(y) },
+    right: { x: clampUnit(-x), y: clampUnit(y) }
+  };
+}
+
 // src/webvr/stereo-disparity.ts
 var WEBVR_PANORAMA_VIRTUAL_DISTANCE_M = 2;
 function panoramaStereoHalfAngle(ipdMm, virtualDistanceM = WEBVR_PANORAMA_VIRTUAL_DISTANCE_M) {
@@ -17595,19 +18388,32 @@ function panoramaStereoToeInYaw(eye, halfAngleRad) {
 }
 
 // src/webvr/stereo-layout.ts
-function computeStereoLayout(logicalWidth, logicalHeight, pixelRatio) {
+var DEFAULT_WEBVR_OVERSAMPLING = 1;
+var MIN_WEBVR_OVERSAMPLING = 0.5;
+var MAX_WEBVR_OVERSAMPLING = 2;
+function clampWebVROversampling(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return DEFAULT_WEBVR_OVERSAMPLING;
+  }
+  return Math.max(
+    MIN_WEBVR_OVERSAMPLING,
+    Math.min(MAX_WEBVR_OVERSAMPLING, value)
+  );
+}
+function computeStereoLayout(logicalWidth, logicalHeight, pixelRatio, oversampling = DEFAULT_WEBVR_OVERSAMPLING) {
   const fullWidth = Math.max(2, Math.floor(logicalWidth));
   const fullHeight = Math.max(1, Math.floor(logicalHeight));
   const leftWidth = Math.max(1, Math.floor(fullWidth / 2));
   const rightWidth = Math.max(1, fullWidth - leftWidth);
   const ratio = Number.isFinite(pixelRatio) && pixelRatio > 0 ? pixelRatio : 1;
+  const scale = clampWebVROversampling(oversampling);
   return {
     fullWidth,
     fullHeight,
     left: { width: leftWidth, height: fullHeight, offsetX: 0 },
     right: { width: rightWidth, height: fullHeight, offsetX: leftWidth },
-    renderTargetWidth: Math.max(1, Math.floor(leftWidth * ratio)),
-    renderTargetHeight: Math.max(1, Math.floor(fullHeight * ratio)),
+    renderTargetWidth: Math.max(1, Math.floor(leftWidth * ratio * scale)),
+    renderTargetHeight: Math.max(1, Math.floor(fullHeight * ratio * scale)),
     stereoAspect: leftWidth / fullWidth
   };
 }
@@ -17624,12 +18430,13 @@ void main() {
 var fragmentShader = `
 uniform sampler2D sourceTexture;
 uniform vec2 distortion;
+uniform vec2 lensCenter;
 varying vec2 vUv;
 void main() {
-  vec2 centered = vUv * 2.0 - 1.0;
+  vec2 centered = vUv * 2.0 - 1.0 - lensCenter;
   float radius2 = dot(centered, centered);
   float scale = 1.0 + distortion.x * radius2 + distortion.y * radius2 * radius2;
-  vec2 sourceUv = centered * scale * 0.5 + 0.5;
+  vec2 sourceUv = (centered * scale + lensCenter) * 0.5 + 0.5;
   if (sourceUv.x < 0.0 || sourceUv.x > 1.0 || sourceUv.y < 0.0 || sourceUv.y > 1.0) {
     gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
   } else {
@@ -17649,6 +18456,7 @@ function createDistortionResources() {
     fragmentShader,
     uniforms: {
       distortion: { value: new Vector28() },
+      lensCenter: { value: new Vector28() },
       sourceTexture: { value: target.texture }
     },
     vertexShader
@@ -17665,12 +18473,27 @@ function createDistortionResources() {
     target
   };
 }
-function syncStereoCameras(stereo, camera, profile, screensize, size, gl) {
+function applyEyeViewOffset(eyeCamera, eye, center) {
+  const fullWidth = eye.width;
+  const fullHeight = eye.height;
+  const offsetX = ((center.x + 1) / 2 - 0.5) * fullWidth;
+  const offsetY = (0.5 - (center.y + 1) / 2) * fullHeight;
+  eyeCamera.setViewOffset(
+    fullWidth,
+    fullHeight,
+    offsetX,
+    offsetY,
+    fullWidth,
+    fullHeight
+  );
+}
+function syncStereoCameras(stereo, camera, profile, screensize, oversampling, size, gl) {
   gl.getSize(size);
   const layout = computeStereoLayout(
     size.x,
     size.y,
-    gl.getPixelRatio()
+    gl.getPixelRatio(),
+    oversampling
   );
   const screenToLensMm = profile.screenToLensMm ?? 42;
   const displayAspect = layout.fullWidth / layout.fullHeight;
@@ -17689,34 +18512,40 @@ function syncStereoCameras(stereo, camera, profile, screensize, size, gl) {
   TOE_IN.makeRotationY(panoramaStereoToeInYaw("right", halfAngle));
   stereo.cameraR.matrix.multiply(TOE_IN);
   stereo.cameraR.matrixWorldNeedsUpdate = true;
+  const centers = computeStereoLensCenters(profile, screensize, displayAspect);
+  applyEyeViewOffset(stereo.cameraL, layout.left, centers.left);
+  applyEyeViewOffset(stereo.cameraR, layout.right, centers.right);
   stereo.cameraL.updateMatrixWorld(true);
   stereo.cameraR.updateMatrixWorld(true);
-  return layout;
+  return { layout, centers };
 }
 function WebVRStereoRenderer({
   mode,
+  oversampling = 1,
   profile,
   screensize
 }) {
   const { camera, gl } = useThree27();
   const runtime = useContext26(WebVRRuntimeContext);
-  const fallbackStereoRef = useRef37(null);
+  const fallbackStereoRef = useRef38(null);
   if (!fallbackStereoRef.current) {
     fallbackStereoRef.current = new StereoCamera2();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
-  const stereoRef = useRef37(stereo);
+  const stereoRef = useRef38(stereo);
   stereoRef.current = stereo;
   const resources = useMemo25(createDistortionResources, []);
-  const sizeRef = useRef37(new Vector28());
-  const viewportRef = useRef37(new Vector42());
-  const scissorRef = useRef37(new Vector42());
-  const originalFovRef = useRef37(null);
-  const stereoActiveRef = useRef37(false);
-  const profileRef = useRef37(profile);
-  const screensizeRef = useRef37(screensize);
+  const sizeRef = useRef38(new Vector28());
+  const viewportRef = useRef38(new Vector42());
+  const scissorRef = useRef38(new Vector42());
+  const originalFovRef = useRef38(null);
+  const stereoActiveRef = useRef38(false);
+  const profileRef = useRef38(profile);
+  const screensizeRef = useRef38(screensize);
+  const oversamplingRef = useRef38(clampWebVROversampling(oversampling));
   profileRef.current = profile;
   screensizeRef.current = screensize;
+  oversamplingRef.current = clampWebVROversampling(oversampling);
   useEffect37(
     () => () => {
       resources.geometry.dispose();
@@ -17737,11 +18566,12 @@ function WebVRStereoRenderer({
       if (originalFovRef.current === null) {
         originalFovRef.current = cameraToRender.fov;
       }
-      const layout = syncStereoCameras(
+      const { layout, centers } = syncStereoCameras(
         stereoRef.current,
         cameraToRender,
         currentProfile,
         currentScreensize,
+        oversamplingRef.current,
         sizeRef.current,
         gl
       );
@@ -17753,7 +18583,7 @@ function WebVRStereoRenderer({
       gl.getScissor(scissorRef.current);
       gl.autoClear = true;
       gl.setScissorTest(true);
-      const renderEye = (eyeCamera, eye) => {
+      const renderEye = (eyeCamera, eye, center) => {
         if (hasDistortion) {
           if (resources.target.width !== layout.renderTargetWidth || resources.target.height !== layout.renderTargetHeight) {
             resources.target.setSize(
@@ -17770,6 +18600,7 @@ function WebVRStereoRenderer({
             currentProfile.k1,
             currentProfile.k2
           );
+          resources.material.uniforms.lensCenter?.value.set(center.x, center.y);
           originalRender(resources.scene, resources.camera);
           return;
         }
@@ -17778,8 +18609,8 @@ function WebVRStereoRenderer({
         gl.setScissor(eye.offsetX, 0, eye.width, eye.height);
         originalRender(sceneToRender, eyeCamera);
       };
-      renderEye(stereoRef.current.cameraL, layout.left);
-      renderEye(stereoRef.current.cameraR, layout.right);
+      renderEye(stereoRef.current.cameraL, layout.left, centers.left);
+      renderEye(stereoRef.current.cameraR, layout.right, centers.right);
       gl.setRenderTarget(previousTarget);
       gl.setViewport(viewportRef.current);
       gl.setScissor(scissorRef.current);
@@ -17810,6 +18641,7 @@ function WebVRStereoRenderer({
         camera,
         profileRef.current,
         screensizeRef.current,
+        oversamplingRef.current,
         sizeRef.current,
         gl
       );
@@ -17825,7 +18657,7 @@ function WebVRStereoRenderer({
 }
 
 // src/webvr/pointerlock.ts
-import { useEffect as useEffect38, useRef as useRef38 } from "react";
+import { useEffect as useEffect38, useRef as useRef39 } from "react";
 var POINTER_LOCK_CURSOR_ID = "webvr:pointerlock";
 async function requestWebVRPointerLock(element) {
   if (typeof document === "undefined") {
@@ -17858,8 +18690,8 @@ function exitWebVRPointerLock(element) {
 }
 function useWebVRPointerLock(enabled, element) {
   const cursor = usePanoCursor();
-  const cursorRef = useRef38(cursor);
-  const enabledRef = useRef38(enabled);
+  const cursorRef = useRef39(cursor);
+  const enabledRef = useRef39(enabled);
   cursorRef.current = cursor;
   enabledRef.current = enabled;
   useEffect38(() => {
@@ -18039,8 +18871,44 @@ function useWebVRWakeLock(enabled) {
   }, [enabled]);
 }
 
+// src/webvr/xr-quality.ts
+function clampWebVRFoveation(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return void 0;
+  }
+  return Math.max(0, Math.min(1, value));
+}
+function resolveWebVRFrameRateOption(frameRate) {
+  if (frameRate === void 0) {
+    return void 0;
+  }
+  if (frameRate === "low" || frameRate === "mid" || frameRate === "high") {
+    return frameRate;
+  }
+  if (typeof frameRate !== "number" || !Number.isFinite(frameRate)) {
+    return void 0;
+  }
+  const target = frameRate;
+  return (rates) => {
+    if (rates.length === 0) {
+      return false;
+    }
+    let best = rates[0];
+    let bestDelta = Math.abs(best - target);
+    for (let i = 1; i < rates.length; i += 1) {
+      const candidate = rates[i];
+      const delta = Math.abs(candidate - target);
+      if (delta < bestDelta) {
+        best = candidate;
+        bestDelta = delta;
+      }
+    }
+    return best;
+  };
+}
+
 // src/webvr/webvr.tsx
-import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 function initializeSettings(screensize, profile) {
   const stored = loadWebVRSettings();
   return {
@@ -18057,7 +18925,15 @@ var WebVR = forwardRef4(function WebVR2({
   desktopSupport = false,
   fakeSupport = true,
   screensize,
+  databaseUrl,
   profile,
+  absolute = false,
+  north = 0,
+  friction = 0,
+  touchSupport = false,
+  oversampling = 1,
+  foveation,
+  frameRate,
   cursor = true,
   cursorDwellMs = DEFAULT_WEBVR_CURSOR_DWELL_MS,
   wakelock = true,
@@ -18073,20 +18949,36 @@ var WebVR = forwardRef4(function WebVR2({
   const controlsRef = useContext27(PanoramaViewContext);
   const eventBus = useContext27(PanoEventBusContext);
   const gl = useThree28((state) => state.gl);
-  const gyroRef = useRef39(null);
-  const capabilitiesRef = useRef39({
+  const gyroRef = useRef40(null);
+  const capabilitiesRef = useRef40({
     mobile: false,
     sensor: false,
     webxr: false
   });
-  const availableRef = useRef39(false);
-  const modeRef = useRef39(null);
-  const webXRSessionRef = useRef39(null);
+  const availableRef = useRef40(false);
+  const modeRef = useRef40(null);
+  const webXRSessionRef = useRef40(null);
+  const dpdbRequestIdRef = useRef40(0);
+  const databaseUrlRef = useRef40(databaseUrl);
+  databaseUrlRef.current = databaseUrl;
+  const oversamplingRef = useRef40(clampWebVROversampling(oversampling));
+  oversamplingRef.current = clampWebVROversampling(oversampling);
+  const foveationRef = useRef40(clampWebVRFoveation(foveation));
+  foveationRef.current = clampWebVRFoveation(foveation);
+  const frameRateRef = useRef40(frameRate);
+  frameRateRef.current = frameRate;
+  const screensizePropRef = useRef40(screensize);
+  screensizePropRef.current = screensize;
+  const profilePropRef = useRef40(profile);
+  profilePropRef.current = profile;
   const [mode, setMode] = useState24(null);
   const [settings, setSettings] = useState24(
     () => initializeSettings(screensize, profile)
   );
-  const callbacksRef = useRef39({
+  const [detectedScreensize, setDetectedScreensize] = useState24(
+    null
+  );
+  const callbacksRef = useRef40({
     onAvailable,
     onDenied,
     onEnterVR,
@@ -18110,18 +19002,44 @@ var WebVR = forwardRef4(function WebVR2({
     () => resolveWebVRProfile(profile, settings.profileId),
     [profile, settings.profileId]
   );
-  const reportDenied = useCallback10(
+  const effectiveScreensize = settings.screensize === "auto" ? detectedScreensize ?? "auto" : settings.screensize;
+  const resolvedOversampling = clampWebVROversampling(oversampling);
+  const reportDenied = useCallback11(
     (error) => {
       eventBus.emit("vrdenied", { error });
       callbacksRef.current.onDenied?.(error);
     },
     [eventBus]
   );
-  const reportUnknownDevice = useCallback10(() => {
+  const reportUnknownDevice = useCallback11(() => {
     eventBus.emit("vrunknowndevice", void 0);
     callbacksRef.current.onUnknownDevice?.();
   }, [eventBus]);
-  const activate = useCallback10(
+  const clearDetectedScreensize = useCallback11(() => {
+    dpdbRequestIdRef.current += 1;
+    setDetectedScreensize(null);
+    updateWebVRHost(host, { detectedScreensize: null });
+  }, [host]);
+  const resolveAutoScreensize = useCallback11(() => {
+    const requestId = ++dpdbRequestIdRef.current;
+    const url = normalizeDatabaseUrl(databaseUrlRef.current);
+    if (!url) {
+      reportUnknownDevice();
+      return;
+    }
+    void resolveScreensizeFromDpdb(url).then((inches) => {
+      if (requestId !== dpdbRequestIdRef.current) {
+        return;
+      }
+      if (inches === null) {
+        reportUnknownDevice();
+        return;
+      }
+      setDetectedScreensize(inches);
+      updateWebVRHost(host, { detectedScreensize: inches });
+    });
+  }, [host, reportUnknownDevice]);
+  const activate = useCallback11(
     (nextMode) => {
       if (modeRef.current === nextMode) {
         return;
@@ -18136,7 +19054,7 @@ var WebVR = forwardRef4(function WebVR2({
     },
     [controlsRef, eventBus]
   );
-  const deactivate = useCallback10(
+  const deactivate = useCallback11(
     (expectedMode) => {
       const previousMode = modeRef.current;
       if (!previousMode || expectedMode && previousMode !== expectedMode) {
@@ -18144,6 +19062,7 @@ var WebVR = forwardRef4(function WebVR2({
       }
       modeRef.current = null;
       setMode(null);
+      clearDetectedScreensize();
       if (previousMode === "fake") {
         controlsRef.current?.setGyroActive(false);
       }
@@ -18151,24 +19070,42 @@ var WebVR = forwardRef4(function WebVR2({
       eventBus.emit("vrexit", { mode: previousMode });
       callbacksRef.current.onExitVR?.(previousMode);
     },
-    [controlsRef, eventBus, gl.domElement]
+    [clearDetectedScreensize, controlsRef, eventBus, gl.domElement]
   );
-  const requestPermission = useCallback10(async () => {
+  const requestPermission = useCallback11(async () => {
     return await gyroRef.current?.requestPermission() ?? false;
   }, []);
-  const enterVR = useCallback10(async () => {
+  const applyWebXRQuality = useCallback11(() => {
+    const scale = oversamplingRef.current;
+    if (typeof gl.xr.setFramebufferScaleFactor === "function") {
+      gl.xr.setFramebufferScaleFactor(scale);
+    }
+    const nextFoveation = foveationRef.current;
+    if (nextFoveation !== void 0 && typeof gl.xr.setFoveation === "function") {
+      gl.xr.setFoveation(nextFoveation);
+    }
+    const frameRateOption = resolveWebVRFrameRateOption(frameRateRef.current);
+    if (frameRateOption !== void 0) {
+      xrStore.setFrameRate(frameRateOption);
+    }
+  }, [gl.xr, xrStore]);
+  const enterVR = useCallback11(async () => {
     if (modeRef.current) {
       return true;
     }
     const capabilities = capabilitiesRef.current;
     if (capabilities.webxr) {
       try {
+        if (typeof gl.xr.setFramebufferScaleFactor === "function") {
+          gl.xr.setFramebufferScaleFactor(oversamplingRef.current);
+        }
         await xrStore.enterVR();
         const session2 = xrStore.getState().session;
         if (!session2) {
           throw new Error("The WebXR session did not start.");
         }
         webXRSessionRef.current = session2;
+        applyWebXRQuality();
         session2.addEventListener(
           "end",
           () => {
@@ -18198,10 +19135,10 @@ var WebVR = forwardRef4(function WebVR2({
         reportDenied();
         return false;
       }
+      activate("mobilevr");
       if (settings.screensize === "auto") {
-        reportUnknownDevice();
+        resolveAutoScreensize();
       }
-      activate("mobilevr");
       return true;
     }
     if (fakeSupport) {
@@ -18220,21 +19157,23 @@ var WebVR = forwardRef4(function WebVR2({
     return false;
   }, [
     activate,
+    applyWebXRQuality,
     deactivate,
     desktopSupport,
     eventBus,
     fakeSupport,
     gl.domElement,
+    gl.xr,
     mobileVr,
     mousePointerLock,
     reportDenied,
-    reportUnknownDevice,
     requestPermission,
+    resolveAutoScreensize,
     settings.screensize,
     wakelock,
     xrStore
   ]);
-  const exitVR = useCallback10(async () => {
+  const exitVR = useCallback11(async () => {
     if (modeRef.current === "webxr") {
       const session2 = webXRSessionRef.current ?? xrStore.getState().session ?? null;
       if (session2) {
@@ -18247,21 +19186,52 @@ var WebVR = forwardRef4(function WebVR2({
     deactivate();
     leaveWebVRPresentation();
   }, [deactivate, xrStore]);
-  const toggleVR = useCallback10(async () => {
+  const toggleVR = useCallback11(async () => {
     if (modeRef.current) {
       await exitVR();
       return false;
     }
     return enterVR();
   }, [enterVR, exitVR]);
-  const updateSettings = useCallback10((next) => {
-    const normalized = {
-      profileId: next.profileId,
-      screensize: next.screensize === "auto" ? "auto" : Math.round(Math.max(3, Math.min(20, next.screensize)) * 10) / 10
-    };
-    setSettings(normalized);
-    saveWebVRSettings(normalized);
-  }, []);
+  const updateSettings = useCallback11(
+    (next) => {
+      const normalized = {
+        profileId: next.profileId,
+        screensize: next.screensize === "auto" ? "auto" : Math.round(Math.max(3, Math.min(20, next.screensize)) * 10) / 10
+      };
+      setSettings(normalized);
+      saveWebVRSettings(normalized);
+      if (normalized.screensize === "auto") {
+        if (modeRef.current === "mobilevr") {
+          setDetectedScreensize(null);
+          updateWebVRHost(host, { detectedScreensize: null });
+          resolveAutoScreensize();
+        }
+      } else {
+        clearDetectedScreensize();
+      }
+    },
+    [clearDetectedScreensize, host, resolveAutoScreensize]
+  );
+  const resetSettings = useCallback11(() => {
+    clearWebVRSettings();
+    const next = resolveInitialWebVRSettings(
+      screensizePropRef.current,
+      profilePropRef.current
+    );
+    setSettings(next);
+    if (next.screensize === "auto") {
+      if (modeRef.current === "mobilevr") {
+        setDetectedScreensize(null);
+        updateWebVRHost(host, { detectedScreensize: null });
+        resolveAutoScreensize();
+      } else {
+        clearDetectedScreensize();
+      }
+    } else {
+      clearDetectedScreensize();
+    }
+  }, [clearDetectedScreensize, host, resolveAutoScreensize]);
   const controller = useMemo26(
     () => ({
       closeSetup: () => updateWebVRHost(host, { setupOpen: false }),
@@ -18269,10 +19239,19 @@ var WebVR = forwardRef4(function WebVR2({
       exitVR,
       openSetup: () => updateWebVRHost(host, { setupOpen: true }),
       requestPermission,
+      resetSettings,
       toggleVR,
       updateSettings
     }),
-    [enterVR, exitVR, host, requestPermission, toggleVR, updateSettings]
+    [
+      enterVR,
+      exitVR,
+      host,
+      requestPermission,
+      resetSettings,
+      toggleVR,
+      updateSettings
+    ]
   );
   useImperativeHandle4(
     ref,
@@ -18280,12 +19259,15 @@ var WebVR = forwardRef4(function WebVR2({
       enterVR,
       exitVR,
       getMode: () => modeRef.current,
+      getState: () => getWebVRState(host),
       isAvailable: () => availableRef.current,
       isEnabled: () => modeRef.current !== null,
       requestPermission,
+      resetSettings,
+      subscribe: (onStoreChange) => subscribeWebVRHost(host, onStoreChange),
       toggleVR
     }),
-    [enterVR, exitVR, requestPermission, toggleVR]
+    [enterVR, exitVR, host, requestPermission, resetSettings, toggleVR]
   );
   useEffect40(() => {
     let active = true;
@@ -18314,13 +19296,24 @@ var WebVR = forwardRef4(function WebVR2({
     return () => {
       if (host.controller === controller) {
         host.controller = null;
-        updateWebVRHost(host, { mode: null, setupOpen: false });
+        dpdbRequestIdRef.current += 1;
+        setDetectedScreensize(null);
+        updateWebVRHost(host, {
+          detectedScreensize: null,
+          mode: null,
+          setupOpen: false
+        });
       }
     };
   }, [controller, host]);
   useEffect40(() => {
-    updateWebVRHost(host, { chrome, mode, settings });
-  }, [chrome, host, mode, settings]);
+    updateWebVRHost(host, {
+      chrome,
+      detectedScreensize,
+      mode,
+      settings
+    });
+  }, [chrome, detectedScreensize, host, mode, settings]);
   useEffect40(() => {
     if (mode !== "fake") {
       return;
@@ -18369,6 +19362,23 @@ var WebVR = forwardRef4(function WebVR2({
       void exitVR();
     });
   }, [exitVR, gl.domElement, mode]);
+  useEffect40(() => {
+    if (mode !== "webxr") {
+      return;
+    }
+    const session2 = webXRSessionRef.current ?? xrStore.getState().session ?? null;
+    if (!session2) {
+      return;
+    }
+    const nextFoveation = foveationRef.current;
+    if (nextFoveation !== void 0 && typeof gl.xr.setFoveation === "function") {
+      gl.xr.setFoveation(nextFoveation);
+    }
+    const frameRateOption = resolveWebVRFrameRateOption(frameRateRef.current);
+    if (frameRateOption !== void 0) {
+      xrStore.setFrameRate(frameRateOption);
+    }
+  }, [foveation, frameRate, gl.xr, mode, xrStore]);
   useWebVRPointerLock(
     mousePointerLock && mode === "fake",
     gl.domElement
@@ -18376,27 +19386,31 @@ var WebVR = forwardRef4(function WebVR2({
   useWebVRWakeLock(
     wakelock && (mode === "mobilevr" || mode === "fake")
   );
-  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment8, { children: [
     /* @__PURE__ */ jsx40(
       Gyro,
       {
         ref: gyroRef,
+        absolute,
         desktopSupport,
         enabled: mode === "mobilevr",
+        friction,
+        north,
         onDenied: () => {
           reportDenied();
           deactivate("mobilevr");
         },
         softstart: 0,
-        touchMode: "off"
+        touchMode: touchSupport ? "horizontaloffset" : "off"
       }
     ),
     /* @__PURE__ */ jsx40(
       WebVRStereoRenderer,
       {
         mode,
+        oversampling: resolvedOversampling,
         profile: resolvedProfile,
-        screensize: settings.screensize
+        screensize: effectiveScreensize
       }
     ),
     /* @__PURE__ */ jsx40(
@@ -18412,12 +19426,12 @@ var WebVR = forwardRef4(function WebVR2({
 
 // src/pano-scene-menu.tsx
 import {
-  useCallback as useCallback11,
+  useCallback as useCallback12,
   useEffect as useEffect41,
   useId as useId3,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo27,
-  useRef as useRef40,
+  useRef as useRef41,
   useState as useState25
 } from "react";
 
@@ -18551,6 +19565,13 @@ function pushSample(samples, sample, maxCount = 8) {
   return next;
 }
 
+// src/overlay/toggle.ts
+function resolveOverlayToggleIcon(icon, collapsed) {
+  if (icon === void 0) return void 0;
+  if (typeof icon === "function") return icon({ collapsed });
+  return icon;
+}
+
 // src/pano-scene-menu.tsx
 import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 var SCENE_MENU_DRAG_THRESHOLD_PX = 6;
@@ -18571,37 +19592,15 @@ var DEFAULT_PANO_SCENE_MENU_APPEARANCE = {
   controlBackground: "rgba(255, 255, 255, 0.12)"
 };
 var DEFAULT_INSET = 12;
-function cssLength(value) {
-  return typeof value === "number" ? `${value}px` : value;
-}
 function resolveAppearance2(appearance) {
   return {
     ...DEFAULT_PANO_SCENE_MENU_APPEARANCE,
     ...appearance
   };
 }
-function resolveInset(inset) {
-  if (inset === void 0) {
-    const value = cssLength(DEFAULT_INSET);
-    return { top: value, right: value, bottom: value, left: value };
-  }
-  if (typeof inset === "number" || typeof inset === "string") {
-    const value = cssLength(inset);
-    return { top: value, right: value, bottom: value, left: value };
-  }
-  return {
-    top: cssLength(inset.top ?? DEFAULT_INSET),
-    right: cssLength(inset.right ?? DEFAULT_INSET),
-    bottom: cssLength(inset.bottom ?? DEFAULT_INSET),
-    left: cssLength(inset.left ?? DEFAULT_INSET)
-  };
-}
 function itemLabel(item) {
   return item.title?.trim() || item.id;
 }
-function isHorizontal(placement) {
-  return placement === "top" || placement === "bottom";
-}
 var CHEVRON_PATHS = {
   // Keep glyphs optically centered in the 16×16 viewBox.
   up: "M3 11l5-6 5 6",
@@ -18615,40 +19614,6 @@ function arrowChevron(direction, orientation2) {
   }
   return orientation2 === "horizontal" ? "right" : "down";
 }
-function toggleChevron(placement, expanded) {
-  switch (placement) {
-    case "bottom":
-      return expanded ? "down" : "up";
-    case "top":
-      return expanded ? "up" : "down";
-    case "left":
-      return expanded ? "left" : "right";
-    case "right":
-      return expanded ? "right" : "left";
-    default: {
-      const exhaustive = placement;
-      void exhaustive;
-      return "down";
-    }
-  }
-}
-function dockInset(placement, inset) {
-  switch (placement) {
-    case "top":
-      return inset.top;
-    case "bottom":
-      return inset.bottom;
-    case "left":
-      return inset.left;
-    case "right":
-      return inset.right;
-    default: {
-      const exhaustive = placement;
-      void exhaustive;
-      return inset.bottom;
-    }
-  }
-}
 function Chevron({ arrow }) {
   return /* @__PURE__ */ jsx41(
     "svg",
@@ -18671,6 +19636,7 @@ function ControlButton({
   disabled,
   label,
   onClick,
+  style,
   children
 }) {
   return /* @__PURE__ */ jsx41(
@@ -18683,108 +19649,18 @@ function ControlButton({
       onPointerDown: (event) => {
         event.stopPropagation();
       },
+      style,
       title: label,
       type: "button",
       children
     }
   );
 }
-function horizontalAlignStyle(align, inset, widthValue) {
-  const left = `calc(${inset.left} + var(--pano-safe-left))`;
-  const right = `calc(${inset.right} + var(--pano-safe-right))`;
-  if (!widthValue) {
-    return { left, right, width: void 0, marginInline: void 0 };
-  }
-  switch (align) {
-    case "start":
-      return { left, right: "auto", width: widthValue, marginInline: void 0 };
-    case "end":
-      return { left: "auto", right, width: widthValue, marginInline: void 0 };
-    case "center":
-      return { left, right, width: widthValue, marginInline: "auto" };
-    default: {
-      const exhaustive = align;
-      void exhaustive;
-      return { left, right, width: widthValue, marginInline: "auto" };
-    }
-  }
-}
-function verticalAlignStyle(align, inset, heightValue) {
-  const top = `calc(${inset.top} + var(--pano-safe-top))`;
-  const bottom = `calc(${inset.bottom} + var(--pano-safe-bottom))`;
-  if (!heightValue) {
-    return { top, bottom, height: void 0, marginBlock: void 0 };
-  }
-  switch (align) {
-    case "start":
-      return { top, bottom: "auto", height: heightValue, marginBlock: void 0 };
-    case "end":
-      return { top: "auto", bottom, height: heightValue, marginBlock: void 0 };
-    case "center":
-      return { top, bottom, height: heightValue, marginBlock: "auto" };
-    default: {
-      const exhaustive = align;
-      void exhaustive;
-      return { top, bottom, height: heightValue, marginBlock: "auto" };
-    }
-  }
-}
-function placementBoxStyle(placement, inset, width, height, align) {
-  const widthValue = width === void 0 ? void 0 : cssLength(width);
-  const heightValue = height === void 0 ? void 0 : cssLength(height);
-  const maxWidth = `calc(100% - ${inset.left} - ${inset.right} - var(--pano-safe-left) - var(--pano-safe-right))`;
-  const maxHeight = `calc(100% - ${inset.top} - ${inset.bottom} - var(--pano-safe-top) - var(--pano-safe-bottom))`;
-  switch (placement) {
-    case "top":
-      return {
-        ...horizontalAlignStyle(align, inset, widthValue),
-        top: `calc(${inset.top} + var(--pano-safe-top))`,
-        bottom: "auto",
-        maxWidth,
-        height: heightValue,
-        maxHeight
-      };
-    case "bottom":
-      return {
-        ...horizontalAlignStyle(align, inset, widthValue),
-        top: "auto",
-        bottom: `calc(${inset.bottom} + var(--pano-safe-bottom))`,
-        maxWidth,
-        height: heightValue,
-        maxHeight
-      };
-    case "left":
-      return {
-        ...verticalAlignStyle(align, inset, heightValue),
-        right: "auto",
-        left: `calc(${inset.left} + var(--pano-safe-left))`,
-        width: widthValue,
-        maxWidth,
-        maxHeight
-      };
-    case "right":
-      return {
-        ...verticalAlignStyle(align, inset, heightValue),
-        right: `calc(${inset.right} + var(--pano-safe-right))`,
-        left: "auto",
-        width: widthValue,
-        maxWidth,
-        maxHeight
-      };
-    default: {
-      const exhaustive = placement;
-      void exhaustive;
-      return {};
-    }
-  }
-}
 function PanoSceneMenu({
   items,
   activeId = null,
   onSelect,
-  placement = "bottom",
-  align = "center",
-  inset,
+  anchor,
   width,
   height,
   collapsible = false,
@@ -18801,15 +19677,19 @@ function PanoSceneMenu({
   previousLabel = "Previous scene",
   nextLabel = "Next scene",
   expandLabel = "Show scenes",
-  collapseLabel = "Hide scenes"
+  collapseLabel = "Hide scenes",
+  toggle
 }) {
   const listId = useId3();
-  const listRef = useRef40(null);
-  const trackRef = useRef40(null);
-  const itemRefs = useRef40(/* @__PURE__ */ new Map());
+  const listRef = useRef41(null);
+  const trackRef = useRef41(null);
+  const itemRefs = useRef41(/* @__PURE__ */ new Map());
   const resolved = resolveAppearance2(appearance);
-  const resolvedInset = resolveInset(inset);
-  const horizontal = isHorizontal(placement);
+  const resolvedAnchor = resolveOverlayAnchor(anchor, {
+    align: "bottom",
+    inset: DEFAULT_INSET
+  });
+  const horizontal = resolvedAnchor.axis === "horizontal";
   const customDrag = dragMotionProp !== false;
   const dragMotion = resolveDragMotion(
     dragMotionProp === false ? false : dragMotionProp
@@ -18820,9 +19700,9 @@ function PanoSceneMenu({
   const [offset, setOffset] = useState25(0);
   const [viewportSize, setViewportSize] = useState25(0);
   const [contentSize, setContentSize] = useState25(0);
-  const offsetRef = useRef40(0);
-  const dragRef = useRef40(null);
-  const animRef = useRef40(null);
+  const offsetRef = useRef41(0);
+  const dragRef = useRef41(null);
+  const animRef = useRef41(null);
   const maxOffset = Math.max(0, contentSize - viewportSize);
   offsetRef.current = offset;
   const activeIndex = useMemo27(() => {
@@ -18831,18 +19711,18 @@ function PanoSceneMenu({
     }
     return items.findIndex((item) => item.id === activeId);
   }, [activeId, items]);
-  const cancelScrollAnimation = useCallback11(() => {
+  const cancelScrollAnimation = useCallback12(() => {
     const anim = animRef.current;
     if (anim?.raf != null) {
       cancelAnimationFrame(anim.raf);
     }
     animRef.current = null;
   }, []);
-  const clampOffset = useCallback11(
+  const clampOffset = useCallback12(
     (value) => Math.min(maxOffset, Math.max(0, value)),
     [maxOffset]
   );
-  const startScrollAnimation = useCallback11(
+  const startScrollAnimation = useCallback12(
     (velocity) => {
       cancelScrollAnimation();
       const current = offsetRef.current;
@@ -18982,15 +19862,15 @@ function PanoSceneMenu({
       "--pano-scene-menu-label-align": resolved.labelAlign,
       "--pano-scene-menu-font-size": cssLength(resolved.fontSize),
       "--pano-scene-menu-control-color": resolved.controlColor,
-      "--pano-scene-menu-control-background": resolved.controlBackground,
-      "--pano-scene-menu-dock-inset": dockInset(placement, resolvedInset)
+      "--pano-scene-menu-control-background": resolved.controlBackground
     };
     return {
       ...vars,
-      ...placementBoxStyle(placement, resolvedInset, width, height, align),
+      ["--pano-overlay-dock-inset"]: resolvedAnchor.dockInset,
+      ...overlayBoxStyle(resolvedAnchor.align, resolvedAnchor.inset, width, height),
       ...style
     };
-  }, [align, height, placement, resolved, resolvedInset, style, width]);
+  }, [height, resolved, resolvedAnchor, style, width]);
   const setExpanded = (next) => {
     if (!collapsible) {
       return;
@@ -19109,7 +19989,7 @@ function PanoSceneMenu({
     setOffset((previous) => clampOffset(previous + event.deltaX));
   };
   const axisPoint = (event) => horizontal ? event.clientX : event.clientY;
-  const endSuppressClickRef = useRef40(false);
+  const endSuppressClickRef = useRef41(false);
   const beginListDrag = (event, captureTarget) => {
     if (!customDrag || event.button !== 0) return;
     cancelScrollAnimation();
@@ -19196,13 +20076,13 @@ function PanoSceneMenu({
     "div",
     {
       "aria-label": label,
-      className: cn("pano-scene-menu", className),
-      "data-align": align,
+      className: cn("pano-overlay-anchor", "pano-scene-menu", className),
+      "data-align": resolvedAnchor.contentAlign,
+      "data-collapse-edge": resolvedAnchor.collapseEdge,
+      "data-collapsed": collapsible && !expanded ? "true" : "false",
       "data-collapsible": collapsible ? "true" : void 0,
       "data-drag-motion": customDrag ? "custom" : "native",
-      "data-expanded": expanded ? "true" : "false",
       "data-orientation": orientation2,
-      "data-placement": placement,
       role: "group",
       style: rootStyle,
       children: [
@@ -19307,10 +20187,19 @@ function PanoSceneMenu({
         collapsible ? /* @__PURE__ */ jsx41(
           ControlButton,
           {
-            className: "pano-scene-menu-toggle",
+            className: cn(
+              "pano-scene-menu-toggle pano-overlay-anchor-toggle",
+              toggle?.className
+            ),
             label: expanded ? collapseLabel : expandLabel,
             onClick: () => setExpanded(!expanded),
-            children: /* @__PURE__ */ jsx41(Chevron, { arrow: toggleChevron(placement, expanded) })
+            style: toggle?.style,
+            children: toggle?.icon === void 0 ? /* @__PURE__ */ jsx41(
+              Chevron,
+              {
+                arrow: overlayChevron(resolvedAnchor.collapseEdge, !expanded)
+              }
+            ) : resolveOverlayToggleIcon(toggle.icon, !expanded)
           }
         ) : null
       ]
@@ -19319,7 +20208,7 @@ function PanoSceneMenu({
 }
 
 // src/use-pano-viewer.ts
-import { useMemo as useMemo28, useRef as useRef41 } from "react";
+import { useMemo as useMemo28, useRef as useRef42 } from "react";
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -19350,6 +20239,36 @@ function createPanoViewerHandle(ref) {
     isVRAvailable: () => ref.current?.isVRAvailable() ?? false,
     isVREnabled: () => ref.current?.isVREnabled() ?? false,
     getVRMode: () => ref.current?.getVRMode() ?? null,
+    getVRState: () => ref.current?.getVRState() ?? EMPTY_WEBVR_STATE,
+    subscribeVR: (onStoreChange) => {
+      let disposed = false;
+      let unsubscribe;
+      const timers = [];
+      const attach = () => {
+        if (disposed || unsubscribe) {
+          return;
+        }
+        const handle = ref.current;
+        if (!handle) {
+          return;
+        }
+        unsubscribe = handle.subscribeVR(onStoreChange);
+        onStoreChange();
+      };
+      attach();
+      if (typeof window !== "undefined") {
+        for (const delay of [0, 16, 50, 100, 250]) {
+          timers.push(window.setTimeout(attach, delay));
+        }
+      }
+      return () => {
+        disposed = true;
+        for (const id of timers) {
+          window.clearTimeout(id);
+        }
+        unsubscribe?.();
+      };
+    },
     requestVRPermission: () => ref.current?.requestVRPermission() ?? Promise.resolve(false),
     getVideo: () => ref.current?.getVideo() ?? null,
     subscribeVideo: (onStoreChange) => ref.current?.subscribeVideo(onStoreChange) ?? (() => {
@@ -19401,7 +20320,7 @@ function createPanoViewerHandle(ref) {
   };
 }
 function usePanoViewer() {
-  const ref = useRef41(null);
+  const ref = useRef42(null);
   const handle = useMemo28(() => createPanoViewerHandle(ref), []);
   return useMemo28(() => ({ ref, ...handle }), [handle]);
 }
@@ -19409,25 +20328,25 @@ function usePanoViewer() {
 // src/video/pano-video.tsx
 import { useThree as useThree29 } from "@react-three/fiber";
 import {
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useContext as useContext28,
   useEffect as useEffect42,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo29,
-  useRef as useRef42,
+  useRef as useRef43,
   useState as useState26
 } from "react";
 import {
   BackSide as BackSide4,
-  LinearFilter as LinearFilter11,
-  LinearMipmapLinearFilter as LinearMipmapLinearFilter7,
-  MathUtils as MathUtils13,
+  LinearFilter as LinearFilter10,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter8,
+  MathUtils as MathUtils14,
   RepeatWrapping as RepeatWrapping2,
-  SRGBColorSpace as SRGBColorSpace10,
+  SRGBColorSpace as SRGBColorSpace9,
   TextureLoader as TextureLoader8,
   VideoTexture as VideoTexture2
 } from "three";
-import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -19503,7 +20422,7 @@ function findTextTrack(video, tracks, trackId) {
   return list.length > 0 ? list[0] : null;
 }
 function applyEquirectangularLayout(texture, anisotropy) {
-  texture.colorSpace = SRGBColorSpace10;
+  texture.colorSpace = SRGBColorSpace9;
   texture.wrapS = RepeatWrapping2;
   texture.repeat.x = -1;
   texture.offset.x = 1;
@@ -19513,7 +20432,7 @@ function applyEquirectangularLayout(texture, anisotropy) {
 function usePosterTexture2(poster, onError) {
   const gl = useThree29((state) => state.gl);
   const [texture, setTexture] = useState26(null);
-  const onErrorRef = useRef42(onError);
+  const onErrorRef = useRef43(onError);
   onErrorRef.current = onError;
   useEffect42(() => {
     let active = true;
@@ -19536,8 +20455,8 @@ function usePosterTexture2(poster, onError) {
           gl.capabilities.getMaxAnisotropy()
         );
         loadedTexture.wrapT = RepeatWrapping2;
-        loadedTexture.magFilter = LinearFilter11;
-        loadedTexture.minFilter = LinearMipmapLinearFilter7;
+        loadedTexture.magFilter = LinearFilter10;
+        loadedTexture.minFilter = LinearMipmapLinearFilter8;
         loadedTexture.generateMipmaps = true;
         setTexture(loadedTexture);
       },
@@ -19631,17 +20550,17 @@ function PanoVideo({
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
   const [ready, setReady] = useState26(false);
-  const autoPlayRef = useRef42(autoPlay);
+  const autoPlayRef = useRef43(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = useRef42(false);
-  const captionAppearanceOverrideRef = useRef42(
+  const blockedRef = useRef43(false);
+  const captionAppearanceOverrideRef = useRef43(
     {}
   );
-  const mediaCapabilitiesRef = useRef42({
+  const mediaCapabilitiesRef = useRef43({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = useRef42(null);
+  const storeRef = useRef43(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -19651,7 +20570,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = useRef42({
+  const actionsRef = useRef43({
     play: async () => {
     },
     pause: () => {
@@ -19671,12 +20590,12 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = useRef42(onLoad);
-  const onErrorRef = useRef42(onError);
-  const onPlaybackStateChangeRef = useRef42(onPlaybackStateChange);
-  const onEndedRef = useRef42(onEnded);
-  const onVariantChangeRef = useRef42(onVariantChange);
-  const onTrackChangeRef = useRef42(onTrackChange);
+  const onLoadRef = useRef43(onLoad);
+  const onErrorRef = useRef43(onError);
+  const onPlaybackStateChangeRef = useRef43(onPlaybackStateChange);
+  const onEndedRef = useRef43(onEnded);
+  const onVariantChangeRef = useRef43(onVariantChange);
+  const onTrackChangeRef = useRef43(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
@@ -19693,8 +20612,8 @@ function PanoVideo({
     video.preload = "metadata";
     const texture = new VideoTexture2(video);
     applyEquirectangularLayout(texture, 1);
-    texture.magFilter = LinearFilter11;
-    texture.minFilter = LinearFilter11;
+    texture.magFilter = LinearFilter10;
+    texture.minFilter = LinearFilter10;
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
@@ -19735,7 +20654,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = useCallback12(
+  const emitSnapshot = useCallback13(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -20126,11 +21045,11 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment9, { children: [
     activeTexture ? /* @__PURE__ */ jsxs23(
       "mesh",
       {
-        rotation: [0, MathUtils13.degToRad(90 + yawOffset2), 0],
+        rotation: [0, MathUtils14.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
           /* @__PURE__ */ jsx42("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
@@ -20151,12 +21070,12 @@ function PanoVideo({
 
 // src/map/pano-map.tsx
 import {
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useEffect as useEffect44,
   useId as useId4,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo30,
-  useRef as useRef44,
+  useRef as useRef45,
   useState as useState28
 } from "react";
 
@@ -20218,12 +21137,12 @@ function normalizeDegrees(value) {
 }
 
 // src/map/use-map-view.ts
-import { useContext as useContext29, useEffect as useEffect43, useRef as useRef43, useState as useState27 } from "react";
+import { useContext as useContext29, useEffect as useEffect43, useRef as useRef44, useState as useState27 } from "react";
 var DEFAULT_VIEW2 = { yaw: 0, pitch: 0, fov: 75 };
 function useMapView(controlled) {
   const eventBus = useContext29(PanoEventBusContext);
   const [view, setView] = useState27(controlled ?? DEFAULT_VIEW2);
-  const controlledRef = useRef43(controlled);
+  const controlledRef = useRef44(controlled);
   controlledRef.current = controlled;
   useEffect43(() => {
     if (controlled !== void 0) {
@@ -20240,7 +21159,7 @@ function useMapView(controlled) {
 }
 
 // src/map/pano-map.tsx
-import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 var DEFAULT_ICON_SIZE2 = 28;
 var DEFAULT_SECTOR_COLOR = "#ffffff";
 var DEFAULT_SECTOR_OPACITY = 0.55;
@@ -20377,20 +21296,20 @@ function PanoMap({
 }) {
   const reactId = useId4().replace(/:/g, "");
   const view = useMapView(controlledView);
-  const rootRef = useRef44(null);
-  const containerRef = useRef44(null);
-  const sectorNodeRef = useRef44(null);
-  const yawRef = useRef44(view.yaw);
+  const rootRef = useRef45(null);
+  const containerRef = useRef45(null);
+  const sectorNodeRef = useRef45(null);
+  const yawRef = useRef45(view.yaw);
   const [size, setSize] = useState28({ width: 0, height: 0 });
   const [imageSize2, setImageSize] = useState28({ width: 0, height: 0 });
   const [scale, setScale] = useState28(1);
   const [pan, setPan] = useState28({ x: 0, y: 0 });
   const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState28(false);
-  const dragRef = useRef44(null);
-  const panAnimRef = useRef44(null);
-  const panRef = useRef44(pan);
-  const scaleRef = useRef44(scale);
-  const initialViewKeyRef = useRef44(null);
+  const dragRef = useRef45(null);
+  const panAnimRef = useRef45(null);
+  const panRef = useRef45(pan);
+  const scaleRef = useRef45(scale);
+  const initialViewKeyRef = useRef45(null);
   const spots = map.spots;
   const iconSize = map.iconSize ?? DEFAULT_ICON_SIZE2;
   const interaction = map.interaction ?? "fixed";
@@ -20450,7 +21369,7 @@ function PanoMap({
   };
   panRef.current = pan;
   scaleRef.current = scale;
-  const panBoundsFor = useCallback13(
+  const panBoundsFor = useCallback14(
     (nextScale) => {
       const width = fit.width * nextScale;
       const height = fit.height * nextScale;
@@ -20466,7 +21385,7 @@ function PanoMap({
     },
     [fit, size]
   );
-  const clampPan = useCallback13(
+  const clampPan = useCallback14(
     (nextScale, nextPan) => {
       const bounds = panBoundsFor(nextScale);
       return {
@@ -20476,14 +21395,14 @@ function PanoMap({
     },
     [panBoundsFor]
   );
-  const cancelPanAnimation = useCallback13(() => {
+  const cancelPanAnimation = useCallback14(() => {
     const anim = panAnimRef.current;
     if (anim?.raf != null) {
       cancelAnimationFrame(anim.raf);
     }
     panAnimRef.current = null;
   }, []);
-  const startPanAnimation = useCallback13(
+  const startPanAnimation = useCallback14(
     (velocity) => {
       cancelPanAnimation();
       const current = panRef.current;
@@ -20589,7 +21508,7 @@ function PanoMap({
     size.height,
     size.width
   ]);
-  const applyZoom = useCallback13(
+  const applyZoom = useCallback14(
     (nextScale, origin) => {
       if (!gestureZoom) return;
       cancelPanAnimation();
@@ -20801,7 +21720,7 @@ function PanoMap({
         children: collapsed ? "\u25A3" : "\u25A2"
       }
     ) : null,
-    zoomControls && !collapsed ? /* @__PURE__ */ jsxs24(Fragment8, { children: [
+    zoomControls && !collapsed ? /* @__PURE__ */ jsxs24(Fragment10, { children: [
       /* @__PURE__ */ jsx43(
         "button",
         {
@@ -21043,17 +21962,27 @@ import {
   useEffect as useEffect45,
   useId as useId5,
   useMemo as useMemo31,
-  useRef as useRef45,
+  useRef as useRef46,
   useState as useState29
 } from "react";
-import { Fragment as Fragment9, jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 var DEFAULT_DIALOG_WIDTH = 720;
 var DEFAULT_DIALOG_HEIGHT = 520;
-function dockedBox(corner, offsetX, offsetY, width, height) {
-  const horizontal = corner === "top-right" || corner === "bottom-right" ? { left: "auto", right: offsetX } : { left: offsetX, right: "auto" };
-  const vertical = corner === "bottom-left" || corner === "bottom-right" ? { top: "auto", bottom: offsetY } : { top: offsetY, bottom: "auto" };
-  return { ...horizontal, ...vertical, width, height };
+var MAP_ANCHOR_DEFAULTS = { align: "bottom-left", inset: 16 };
+function mergeAnchor(base, override) {
+  if (base === void 0 && override === void 0) return void 0;
+  return {
+    ...base,
+    ...override,
+    inset: override?.inset !== void 0 ? override.inset : base?.inset
+  };
 }
+var CHEVRON_PATHS2 = {
+  up: "M3 11l5-6 5 6",
+  down: "M3 5l5 6 5-6",
+  left: "M11 3 5 8l6 5",
+  right: "M5 3l6 5-6 5"
+};
 function PanoMapDialogShell({
   open,
   onOpenChange,
@@ -21066,8 +21995,8 @@ function PanoMapDialogShell({
   usePanoModal(open);
   const { size } = usePanoOverlay();
   const titleId = useId5();
-  const panelRef = useRef45(null);
-  const previouslyFocused = useRef45(null);
+  const panelRef = useRef46(null);
+  const previouslyFocused = useRef46(null);
   useEffect45(() => {
     if (!open) return;
     const active = panelRef.current?.ownerDocument.activeElement;
@@ -21096,7 +22025,7 @@ function PanoMapDialogShell({
   const height = Math.min(preferredHeight, Math.max(0, size.height - 32));
   const left = Math.max(0, (size.width - width) / 2);
   const top = Math.max(0, (size.height - height) / 2);
-  return /* @__PURE__ */ jsxs25(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs25(Fragment11, { children: [
     /* @__PURE__ */ jsx44(
       "div",
       {
@@ -21165,11 +22094,9 @@ function PanoMapOverlay({
   placementSceneId,
   presentationOverride,
   presentation: presentationModeProp,
-  corner: cornerProp,
+  anchor: anchorProp,
   width: widthProp,
   height: heightProp,
-  offsetX: offsetXProp,
-  offsetY: offsetYProp,
   dialogWidth = DEFAULT_DIALOG_WIDTH,
   dialogHeight = DEFAULT_DIALOG_HEIGHT,
   interaction,
@@ -21183,23 +22110,22 @@ function PanoMapOverlay({
   title = "Map",
   className,
   style,
+  toggle,
   editorSurface = false
 }) {
   const { size } = usePanoOverlay();
   const [open, setOpen] = useState29(false);
   const [collapsed, setCollapsed] = useState29(false);
   const basePresentation = presentationOverride ?? map.presentation ?? {
-    mode: "docked",
-    corner: "bottom-left",
+    mode: "panel",
     width: 220,
-    height: 160,
-    offsetX: 16,
-    offsetY: 16
+    height: 160
   };
   const presentationMode = presentationModeProp ?? basePresentation.mode;
-  const corner = cornerProp ?? basePresentation.corner ?? "bottom-left";
-  const offsetX = offsetXProp ?? basePresentation.offsetX ?? 16;
-  const offsetY = offsetYProp ?? basePresentation.offsetY ?? 16;
+  const resolvedAnchor = resolveOverlayAnchor(
+    mergeAnchor(basePresentation.anchor, anchorProp),
+    MAP_ANCHOR_DEFAULTS
+  );
   const width = widthProp ?? basePresentation.width ?? (presentationMode === "dialog" ? 48 : 220);
   const height = heightProp ?? basePresentation.height ?? (presentationMode === "dialog" ? 48 : 160);
   const resolvedMap = useMemo31(() => {
@@ -21231,15 +22157,15 @@ function PanoMapOverlay({
     }
   };
   const editorBox = useMemo31(() => {
-    const panelWidth2 = widthProp !== void 0 && Number.isFinite(widthProp) && widthProp > 0 ? widthProp : Math.min(420, Math.max(240, size.width * 0.45));
-    const panelHeight2 = heightProp !== void 0 && Number.isFinite(heightProp) && heightProp > 0 ? heightProp : Math.min(320, Math.max(180, size.height * 0.45));
+    const panelWidth = widthProp !== void 0 && Number.isFinite(widthProp) && widthProp > 0 ? widthProp : Math.min(420, Math.max(240, size.width * 0.45));
+    const panelHeight = heightProp !== void 0 && Number.isFinite(heightProp) && heightProp > 0 ? heightProp : Math.min(320, Math.max(180, size.height * 0.45));
     return {
       left: 16,
       right: "auto",
       top: "auto",
       bottom: 16,
-      width: panelWidth2,
-      height: panelHeight2
+      width: panelWidth,
+      height: panelHeight
     };
   }, [heightProp, size.height, size.width, widthProp]);
   if (editorSurface) {
@@ -21259,7 +22185,7 @@ function PanoMapOverlay({
     );
   }
   if (presentationMode === "dialog") {
-    const launcherBox = dockedBox(corner, offsetX, offsetY, width, height);
+    const launcherBox = overlayBoxStyle(resolvedAnchor.align, resolvedAnchor.inset, width, height);
     return /* @__PURE__ */ jsxs25("div", { className: ["pano-map-overlay", className].filter(Boolean).join(" "), "data-pano-map-overlay": "", children: [
       /* @__PURE__ */ jsx44(
         "button",
@@ -21291,29 +22217,63 @@ function PanoMapOverlay({
       )
     ] });
   }
-  const panelWidth = collapsed ? Math.max(44, Math.min(width, 56)) : width;
-  const panelHeight = collapsed ? Math.max(44, Math.min(height, 56)) : height;
-  const box = dockedBox(corner, offsetX, offsetY, panelWidth, panelHeight);
-  return /* @__PURE__ */ jsx44(
+  const collapseEnabled = showCollapseControl ?? map.controls?.collapse === true;
+  const box = overlayBoxStyle(resolvedAnchor.align, resolvedAnchor.inset, width, height);
+  const arrow = overlayChevron(resolvedAnchor.collapseEdge, collapsed);
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: ["pano-map-overlay", className].filter(Boolean).join(" "),
+      className: ["pano-overlay-anchor", "pano-map-overlay", className].filter(Boolean).join(" "),
       style: {
         position: "absolute",
-        pointerEvents: "auto",
+        pointerEvents: collapseEnabled && collapsed ? "none" : "auto",
+        ["--pano-overlay-dock-inset"]: resolvedAnchor.dockInset,
+        ["--pano-overlay-anchor-radius"]: "8px",
         ...box,
         ...style
       },
       "data-pano-map-overlay": "",
-      "data-presentation": "docked",
-      children: /* @__PURE__ */ jsx44(
-        PanoMap,
-        {
-          ...mapProps,
-          collapsed,
-          onCollapsedChange: setCollapsed
-        }
-      )
+      "data-presentation": "panel",
+      "data-collapse-edge": resolvedAnchor.collapseEdge,
+      "data-collapsed": collapseEnabled && collapsed ? "true" : "false",
+      children: [
+        /* @__PURE__ */ jsx44(
+          "div",
+          {
+            className: "pano-map-overlay-surface",
+            "aria-hidden": collapseEnabled && collapsed ? true : void 0,
+            ...collapseEnabled && collapsed ? { inert: true } : null,
+            style: { height: "100%", width: "100%" },
+            children: /* @__PURE__ */ jsx44(PanoMap, { ...mapProps, showCollapseControl: false })
+          }
+        ),
+        collapseEnabled ? /* @__PURE__ */ jsx44(
+          "button",
+          {
+            type: "button",
+            className: ["pano-map-control", "pano-overlay-anchor-toggle", toggle?.className].filter(Boolean).join(" "),
+            "aria-label": collapsed ? "Expand map" : "Collapse map",
+            "aria-pressed": !collapsed,
+            style: toggle?.style,
+            onClick: () => setCollapsed((value) => !value),
+            children: toggle?.icon === void 0 ? /* @__PURE__ */ jsx44(
+              "svg",
+              {
+                "aria-hidden": true,
+                fill: "none",
+                height: "16",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.75",
+                viewBox: "0 0 16 16",
+                width: "16",
+                children: /* @__PURE__ */ jsx44("path", { d: CHEVRON_PATHS2[arrow] })
+              }
+            ) : resolveOverlayToggleIcon(toggle.icon, collapsed)
+          }
+        ) : null
+      ]
     }
   );
 }
@@ -21330,6 +22290,7 @@ export {
   DEFAULT_PANO_VIDEO_PLAYBACK_RATES,
   DEFAULT_WEBVR_CHROME_APPEARANCE,
   DEFAULT_WEBVR_CURSOR_DWELL_MS,
+  EMPTY_WEBVR_STATE,
   GraphicHotspot,
   Gyro,
   IframeHotspot,
@@ -21339,11 +22300,13 @@ export {
   MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY,
   MouseControls,
   PANO_FILTER_PRESETS,
+  PANO_OVERLAY_ALIGNS,
   PanoContextMenu,
   PanoEvents,
   PanoFilter,
   PanoMap,
   PanoMapOverlay,
+  PanoOverlay,
   PanoOverlayPortalProvider,
   PanoSceneMenu,
   PanoVideo,
@@ -21373,9 +22336,13 @@ export {
   headingFromVector,
   horizontalFov,
   imagePointToContainer,
+  isOverlayCorner,
   normalizePanoPosition,
   normalizePanoYaw,
   panoPositionToVector3,
+  parseOverlayAnchor,
+  resolveOverlayAnchor,
+  resolveOverlayToggleIcon,
   resolvePanoContextMenuEntries,
   sectorRotation,
   unwrapPolygonVertices,