npm - @ericchen1990/pano-view - Versions diffs - 3.9.0 → 3.10.0 - Mend

@ericchen1990/pano-view 3.9.0 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/index.cjs CHANGED Viewed

@@ -1291,8 +1291,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";
@@ -1547,7 +1547,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 {
@@ -1709,11 +1709,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;
         }
@@ -1747,7 +1747,7 @@ var require_howler = __commonJS({
               self._html5 = true;
               self._webAudio = false;
               self._sounds = [];
-              delete cache[url];
+              delete cache2[url];
               self.load();
             }
           };
@@ -1767,7 +1767,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();
@@ -2260,6 +2260,7 @@ __export(index_exports, {
   DEFAULT_PANO_VIDEO_PLAYBACK_RATES: () => DEFAULT_PANO_VIDEO_PLAYBACK_RATES,
   DEFAULT_WEBVR_CHROME_APPEARANCE: () => DEFAULT_WEBVR_CHROME_APPEARANCE,
   DEFAULT_WEBVR_CURSOR_DWELL_MS: () => DEFAULT_WEBVR_CURSOR_DWELL_MS,
+  EMPTY_WEBVR_STATE: () => EMPTY_WEBVR_STATE,
   GraphicHotspot: () => GraphicHotspot,
   Gyro: () => Gyro,
   IframeHotspot: () => IframeHotspot,
@@ -2274,6 +2275,7 @@ __export(index_exports, {
   PanoFilter: () => PanoFilter,
   PanoMap: () => PanoMap,
   PanoMapOverlay: () => PanoMapOverlay,
+  PanoOverlay: () => PanoOverlay,
   PanoOverlayPortalProvider: () => PanoOverlayPortalProvider,
   PanoSceneMenu: () => PanoSceneMenu,
   PanoVideo: () => PanoVideo,
@@ -2387,7 +2389,7 @@ function limitedYawDelta(from, to, range, shortestPath = true) {
 // src/pano-viewer.tsx
 var import_fiber10 = require("@react-three/fiber");
 var import_xr3 = require("@react-three/xr");
-var import_react29 = require("react");
+var import_react30 = require("react");
 // src/background-audio-host.ts
 var import_react = require("react");
@@ -3939,6 +3941,18 @@ var import_react7 = require("react");
 // src/webvr/host.ts
 var import_react6 = require("react");
 var WebVRRuntimeContext = (0, import_react6.createContext)(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,
@@ -3948,18 +3962,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 () => {
@@ -6190,8 +6214,50 @@ function createPanoModalHost() {
   };
 }
-// src/overlay/pano-overlay.tsx
+// src/overlay/partition.ts
 var import_react17 = require("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 (0, import_react17.isValidElement)(node) && isPanoOverlayType(node.type);
+}
+function isFragmentElement(node) {
+  return (0, import_react17.isValidElement)(node) && node.type === import_react17.Fragment;
+}
+function flattenViewerChildren(children) {
+  const flat = [];
+  for (const item of import_react17.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
+var import_react18 = require("react");
 // src/overlay/visible-rect.ts
 function getOverlayVisibleRect(rect, viewport) {
@@ -6204,33 +6270,49 @@ function getOverlayVisibleRect(rect, viewport) {
 // src/overlay/pano-overlay.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var PanoOverlayContext = (0, import_react17.createContext)(null);
-var PanoModalHostContext = (0, import_react17.createContext)(null);
+var PanoOverlayContext = (0, import_react18.createContext)(null);
+var PanoModalHostContext = (0, import_react18.createContext)(null);
+var PanoOverlayOutletContext = (0, import_react18.createContext)(false);
+function PanoOverlay({ children }) {
+  const inOutlet = (0, import_react18.useContext)(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__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+}
+PanoOverlay[PANO_OVERLAY_TYPE] = true;
+var OVERLAY_HOOK_SCOPE = "PanoOverlay or PanoViewer.renderOverlay";
 function usePanoOverlay() {
-  const context = (0, import_react17.useContext)(PanoOverlayContext);
-  if (!context) throw new Error("usePanoOverlay must be used inside PanoViewer.renderOverlay.");
+  const context = (0, import_react18.useContext)(PanoOverlayContext);
+  if (!context) {
+    throw new Error(`usePanoOverlay must be used inside ${OVERLAY_HOOK_SCOPE}.`);
+  }
   return context;
 }
 function usePanoModal(open) {
-  const host = (0, import_react17.useContext)(PanoModalHostContext);
-  if (!host) throw new Error("usePanoModal must be used inside PanoViewer.renderOverlay.");
-  (0, import_react17.useLayoutEffect)(() => open ? host.acquire() : void 0, [host, open]);
+  const host = (0, import_react18.useContext)(PanoModalHostContext);
+  if (!host) {
+    throw new Error(`usePanoModal must be used inside ${OVERLAY_HOOK_SCOPE}.`);
+  }
+  (0, import_react18.useLayoutEffect)(() => open ? host.acquire() : void 0, [host, open]);
 }
 function PanoOverlayPortalProvider({
   container,
   children
 }) {
   const context = usePanoOverlay();
-  const value = (0, import_react17.useMemo)(() => ({ ...context, portalContainer: container }), [context, container]);
+  const value = (0, import_react18.useMemo)(() => ({ ...context, portalContainer: container }), [context, container]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoOverlayContext.Provider, { value, children });
 }
 function usePanoOverlayHost(isFullscreen) {
-  const [portalContainer, setPortalContainer] = (0, import_react17.useState)(null);
-  const [geometry, setGeometry] = (0, import_react17.useState)({
+  const [portalContainer, setPortalContainer] = (0, import_react18.useState)(null);
+  const [geometry, setGeometry] = (0, import_react18.useState)({
     size: { width: 0, height: 0 },
     visibleRect: { left: 0, top: 0, width: 0, height: 0 }
   });
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     if (!portalContainer) return;
     const win = portalContainer.ownerDocument.defaultView;
     if (!win) return;
@@ -6269,13 +6351,13 @@ function usePanoOverlayHost(isFullscreen) {
       win.visualViewport?.removeEventListener("scroll", scheduleMeasure);
     };
   }, [portalContainer]);
-  const context = (0, import_react17.useMemo)(() => ({ portalContainer, ...geometry, isFullscreen }), [portalContainer, geometry, isFullscreen]);
+  const context = (0, import_react18.useMemo)(() => ({ portalContainer, ...geometry, isFullscreen }), [portalContainer, geometry, isFullscreen]);
   return { context, setPortalContainer };
 }
 // src/panorama-event-surface.tsx
 var import_fiber7 = require("@react-three/fiber");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_three5 = require("three");
 // src/hotspot/coordinates.ts
@@ -6374,9 +6456,9 @@ function makePanoramaPointerEvent(event) {
   };
 }
 function PanoramaEventSurface() {
-  const eventBus = (0, import_react18.useContext)(PanoEventBusContext);
+  const eventBus = (0, import_react19.useContext)(PanoEventBusContext);
   const { camera, gl } = (0, import_fiber7.useThree)();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!eventBus) {
       return;
     }
@@ -6445,8 +6527,8 @@ function PanoramaEventSurface() {
 }
 // src/scenes-host.ts
-var import_react19 = require("react");
-var ScenesHostContext = (0, import_react19.createContext)(null);
+var import_react20 = require("react");
+var ScenesHostContext = (0, import_react20.createContext)(null);
 function createScenesHost() {
   return {
     controller: null,
@@ -6463,7 +6545,7 @@ function notifyScenesHost(host) {
 // src/touch-controls.tsx
 var import_fiber8 = require("@react-three/fiber");
-var import_react20 = require("react");
+var import_react21 = require("react");
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function pointerAt2(event) {
   return event.timeStamp > 0 ? event.timeStamp : performance.now();
@@ -6481,18 +6563,18 @@ function TouchControls({
   pinchZoom = true
 }) {
   useClaimControlChannel("touch");
-  const controlsRef = (0, import_react20.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react21.useContext)(PanoramaViewContext);
   const { gl, camera } = (0, import_fiber8.useThree)();
-  const validateDragRef = (0, import_react20.useRef)(void 0);
+  const validateDragRef = (0, import_react21.useRef)(void 0);
   (0, import_fiber8.useFrame)((_, delta) => validateDragRef.current?.(delta), -1);
-  const pointersRef = (0, import_react20.useRef)(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = (0, import_react20.useRef)(null);
-  const optionsRef = (0, import_react20.useRef)({ rotateSpeed, invert, pinchZoom });
+  const pointersRef = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = (0, import_react21.useRef)(null);
+  const optionsRef = (0, import_react21.useRef)({ rotateSpeed, invert, pinchZoom });
   if (!controlsRef) {
     throw new Error("<TouchControls> must be rendered inside <PanoViewer>.");
   }
   optionsRef.current = { rotateSpeed, invert, pinchZoom };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const element = gl.domElement;
     const drag = createPointerDrag(camera, element, () => controlsRef.current, "touch");
     const pending = /* @__PURE__ */ new Set();
@@ -6667,17 +6749,17 @@ function TouchControls({
 }
 // src/video/chrome-overlay.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var PanoChromeOverlayContext = (0, import_react21.createContext)(null);
+var PanoChromeOverlayContext = (0, import_react22.createContext)(null);
 function usePanoChromeOverlay() {
-  const [overlayElement, setOverlayElement] = (0, import_react21.useState)(
+  const [overlayElement, setOverlayElement] = (0, import_react22.useState)(
     null
   );
-  const setOverlayNode = (0, import_react21.useCallback)((node) => {
+  const setOverlayNode = (0, import_react22.useCallback)((node) => {
     setOverlayElement(node);
   }, []);
-  const api = (0, import_react21.useMemo)(
+  const api = (0, import_react22.useMemo)(
     () => ({ overlayElement }),
     [overlayElement]
   );
@@ -6693,9 +6775,9 @@ function usePanoChromeOverlay() {
 }
 // src/video/host.ts
-var import_react22 = require("react");
-var PanoVideoHostContext = (0, import_react22.createContext)(null);
-var DefaultPanoVideoControlsContext = (0, import_react22.createContext)(false);
+var import_react23 = require("react");
+var PanoVideoHostContext = (0, import_react23.createContext)(null);
+var DefaultPanoVideoControlsContext = (0, import_react23.createContext)(false);
 function createPanoVideoHost() {
   return {
     controller: null,
@@ -6740,8 +6822,8 @@ function isProduction3() {
   return nodeEnv === "production";
 }
 function useClaimPanoVideoControls() {
-  const host = (0, import_react22.useContext)(PanoVideoHostContext);
-  const isDefault = (0, import_react22.useContext)(DefaultPanoVideoControlsContext);
+  const host = (0, import_react23.useContext)(PanoVideoHostContext);
+  const isDefault = (0, import_react23.useContext)(DefaultPanoVideoControlsContext);
   if (!host || isDefault) {
     return;
   }
@@ -6754,10 +6836,10 @@ function useClaimPanoVideoControls() {
 }
 // src/video/pano-video-chrome-bridge.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 // src/video/pano-video-captions.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
@@ -6781,7 +6863,7 @@ function resolvePanoVideoCaptionAppearance(appearance) {
 function PanoVideoCaptionsOverlay({
   controller
 }) {
-  const snapshot = (0, import_react23.useSyncExternalStore)(
+  const snapshot = (0, import_react24.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
@@ -6823,7 +6905,7 @@ function PanoVideoCaptions({
 }
 // src/video/pano-video-controls.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 // src/video/format.ts
 var DEFAULT_PANO_VIDEO_PLAYBACK_RATES = [0.5, 1, 1.25, 1.5, 2];
@@ -7275,7 +7357,7 @@ function VerticalVolumeSlider({
   onVolume,
   volume
 }) {
-  const trackRef = (0, import_react24.useRef)(null);
+  const trackRef = (0, import_react25.useRef)(null);
   const applyPointer = (event) => {
     const track = trackRef.current;
     if (!track) {
@@ -7411,14 +7493,14 @@ function VolumeControl({
   volume,
   volumeAdjustable
 }) {
-  const rootRef = (0, import_react24.useRef)(null);
-  const [open, setOpen] = (0, import_react24.useState)(false);
+  const rootRef = (0, import_react25.useRef)(null);
+  const [open, setOpen] = (0, import_react25.useState)(false);
   const displayVolume = muted ? 0 : volume;
   const mutedOrSilent = muted || volume === 0;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     onOpenChange(open);
   }, [onOpenChange, open]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!open || !volumeAdjustable || hasFinePointerHover()) {
       return;
     }
@@ -7505,24 +7587,24 @@ function PanoVideoControlsHud({
   fullscreen,
   overlayElement
 }) {
-  const resolved = (0, import_react24.useMemo)(
+  const resolved = (0, import_react25.useMemo)(
     () => resolveControlsAppearance(appearance),
     [appearance]
   );
-  const snapshot = (0, import_react24.useSyncExternalStore)(
+  const snapshot = (0, import_react25.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
   );
-  const [menu, setMenu] = (0, import_react24.useState)(null);
-  const [captionsPanel, setCaptionsPanel] = (0, import_react24.useState)("tracks");
-  const [visible, setVisible] = (0, import_react24.useState)(true);
-  const [volumeOpen, setVolumeOpen] = (0, import_react24.useState)(false);
-  const [overlayWidth, setOverlayWidth] = (0, import_react24.useState)(
+  const [menu, setMenu] = (0, import_react25.useState)(null);
+  const [captionsPanel, setCaptionsPanel] = (0, import_react25.useState)("tracks");
+  const [visible, setVisible] = (0, import_react25.useState)(true);
+  const [volumeOpen, setVolumeOpen] = (0, import_react25.useState)(false);
+  const [overlayWidth, setOverlayWidth] = (0, import_react25.useState)(
     () => overlayElement.clientWidth
   );
-  const idleTimerRef = (0, import_react24.useRef)(0);
-  const barId = (0, import_react24.useId)();
+  const idleTimerRef = (0, import_react25.useRef)(0);
+  const barId = (0, import_react25.useId)();
   const rateMenuId = `${barId}-rate`;
   const variantMenuId = `${barId}-variant`;
   const captionsMenuId = `${barId}-captions`;
@@ -7530,7 +7612,7 @@ function PanoVideoControlsHud({
   const compact = overlayWidth < COMPACT_CONTROLS_WIDTH;
   const hideTime = overlayWidth < NARROW_CONTROLS_WIDTH;
   const showFullscreen = canEnterViewerFullscreen();
-  const bumpVisibility = (0, import_react24.useCallback)(
+  const bumpVisibility = (0, import_react25.useCallback)(
     (playing) => {
       setVisible(true);
       window.clearTimeout(idleTimerRef.current);
@@ -7543,7 +7625,7 @@ function PanoVideoControlsHud({
     },
     [menu, volumeOpen]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -7558,15 +7640,15 @@ function PanoVideoControlsHud({
       observer.disconnect();
     };
   }, [overlayElement]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!compact && menu === "more") {
       setMenu(null);
     }
   }, [compact, menu]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     bumpVisibility(snapshot.playing);
   }, [bumpVisibility, snapshot.playing]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const root = overlayElement.parentElement;
     if (!root) {
       return;
@@ -7625,7 +7707,7 @@ function PanoVideoControlsHud({
       document.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [bumpVisibility, controller, menu, overlayElement, snapshot.playing, volumeOpen]);
-  (0, import_react24.useEffect)(
+  (0, import_react25.useEffect)(
     () => () => {
       window.clearTimeout(idleTimerRef.current);
     },
@@ -7916,7 +7998,7 @@ function PanoVideoControlsHud({
 }
 function PanoVideoControls({ appearance }) {
   useClaimPanoVideoControls();
-  const host = (0, import_react24.useContext)(PanoVideoHostContext);
+  const host = (0, import_react25.useContext)(PanoVideoHostContext);
   if (host && appearance) {
     host.controls = appearance;
   }
@@ -7930,7 +8012,7 @@ function PanoVideoChromeBridge({
   host,
   overlayElement
 }) {
-  (0, import_react25.useSyncExternalStore)(
+  (0, import_react26.useSyncExternalStore)(
     (onStoreChange) => subscribePanoVideoHost(host, onStoreChange),
     () => getPanoVideoHostRevision(host),
     () => getPanoVideoHostRevision(host)
@@ -7954,7 +8036,7 @@ function PanoVideoChromeBridge({
 }
 // src/webvr/chrome.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 // src/webvr/appearance.ts
 var DEFAULT_WEBVR_CHROME_APPEARANCE = {
@@ -7966,7 +8048,7 @@ var DEFAULT_WEBVR_CHROME_APPEARANCE = {
 };
 // src/webvr/orientation.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 function subscribePortraitOrientation(onChange) {
   if (typeof window === "undefined") {
     return () => {
@@ -7998,7 +8080,7 @@ function getPortraitOrientation() {
   return window.matchMedia("(orientation: portrait)").matches;
 }
 function usePortraitOrientation() {
-  return (0, import_react26.useSyncExternalStore)(
+  return (0, import_react27.useSyncExternalStore)(
     subscribePortraitOrientation,
     getPortraitOrientation,
     () => false
@@ -8020,6 +8102,7 @@ var WEBVR_PROFILES = {
     fov: 80,
     ipdMm: 60,
     screenToLensMm: 42,
+    trayDistanceMm: 0,
     k1: 0,
     k2: 0
   },
@@ -8029,6 +8112,7 @@ var WEBVR_PROFILES = {
     fov: 80,
     ipdMm: 60,
     screenToLensMm: 42,
+    trayDistanceMm: 35,
     k1: 0.441,
     k2: 0.156
   },
@@ -8038,6 +8122,7 @@ var WEBVR_PROFILES = {
     fov: 90,
     ipdMm: 64,
     screenToLensMm: 39,
+    trayDistanceMm: 0,
     k1: 0.336,
     k2: 0.553
   },
@@ -8047,6 +8132,7 @@ var WEBVR_PROFILES = {
     fov: 96,
     ipdMm: 63.5,
     screenToLensMm: 50,
+    trayDistanceMm: 0,
     k1: 0.215,
     k2: 0.215
   },
@@ -8056,6 +8142,7 @@ var WEBVR_PROFILES = {
     fov: 90,
     ipdMm: 61.5,
     screenToLensMm: 44,
+    trayDistanceMm: 0,
     k1: 0.385,
     k2: 0.593
   }
@@ -8106,12 +8193,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
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var SESSION_CHROME_IDLE_MS = 3e3;
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -8139,8 +8242,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
 }) {
@@ -8184,7 +8294,7 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { className: "pano-webvr-setup-value", children: formatScreensizeLabel(settings, detectedScreensize) }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
@@ -8225,42 +8335,61 @@ function SetupPanel({
             )
           ] })
         ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pano-webvr-setup-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            ChromeButton2,
+            {
+              appearance,
+              onClick: () => controller?.resetSettings(),
+              children: "Reset"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            ChromeButton2,
+            {
+              appearance,
+              onClick: () => controller?.closeSetup(),
+              children: "Close"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function SessionActions({
+  appearance,
+  host,
+  mode,
+  visible
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "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__ */ (0, import_jsx_runtime11.jsx)(
+          ChromeButton2,
+          {
+            appearance,
+            onClick: () => host.controller?.openSetup(),
+            children: "VR Setup"
+          }
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           ChromeButton2,
           {
             appearance,
-            onClick: () => controller?.closeSetup(),
-            children: "Close"
+            onClick: () => void host.controller?.exitVR(),
+            children: "Exit VR"
           }
         )
       ]
     }
   );
 }
-function SessionActions({
-  appearance,
-  host,
-  mode
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pano-webvr-toolbar-actions", children: [
-    mode !== "webxr" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      ChromeButton2,
-      {
-        appearance,
-        onClick: () => host.controller?.openSetup(),
-        children: "VR Setup"
-      }
-    ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      ChromeButton2,
-      {
-        appearance,
-        onClick: () => void host.controller?.exitVR(),
-        children: "Exit VR"
-      }
-    )
-  ] });
-}
 function RotatePhoneIcon2() {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "svg",
@@ -8291,18 +8420,81 @@ function PortraitPrompt() {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "pano-webvr-portrait-text", children: "Rotate your phone to landscape" })
   ] });
 }
+function useSessionChromeVisibility(active, keepVisible, viewer) {
+  const [visible, setVisible] = (0, import_react28.useState)(true);
+  const idleTimerRef = (0, import_react28.useRef)(0);
+  const bump = (0, import_react28.useCallback)(() => {
+    setVisible(true);
+    window.clearTimeout(idleTimerRef.current);
+    if (!active || keepVisible) {
+      return;
+    }
+    idleTimerRef.current = window.setTimeout(() => {
+      setVisible(false);
+    }, SESSION_CHROME_IDLE_MS);
+  }, [active, keepVisible]);
+  (0, import_react28.useEffect)(() => {
+    if (!active) {
+      window.clearTimeout(idleTimerRef.current);
+      setVisible(true);
+      return;
+    }
+    bump();
+  }, [active, bump, keepVisible]);
+  (0, import_react28.useEffect)(() => {
+    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]);
+  (0, import_react28.useEffect)(
+    () => () => {
+      window.clearTimeout(idleTimerRef.current);
+    },
+    []
+  );
+  return keepVisible || visible;
+}
 function WebVRChromeBridge({ host }) {
-  (0, import_react27.useSyncExternalStore)(
+  (0, import_react28.useSyncExternalStore)(
     (listener) => subscribeWebVRHost(host, listener),
     () => host.revision,
     () => host.revision
   );
   const portrait = usePortraitOrientation();
-  const { available, chrome, mode, settings, setupOpen } = host.snapshot;
-  const [mounted, setMounted] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const {
+    chrome,
+    detectedScreensize,
+    mode,
+    settings,
+    setupOpen
+  } = host.snapshot;
+  const [mounted, setMounted] = (0, import_react28.useState)(false);
+  const [viewer, setViewer] = (0, import_react28.useState)(null);
+  const toolbarRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
     setMounted(true);
   }, []);
+  (0, import_react28.useEffect)(() => {
+    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;
   }
@@ -8311,17 +8503,29 @@ function WebVRChromeBridge({ host }) {
   if (showPortraitPrompt) {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PortraitPrompt, {});
   }
+  if (!mode) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SessionActions, { appearance, host, mode }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      ChromeButton2,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pano-webvr-toolbar", ref: toolbarRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      SessionActions,
       {
         appearance,
-        onClick: () => void host.controller?.enterVR(),
-        children: available ? "Enter VR" : "VR unavailable"
+        host,
+        mode,
+        visible: chromeVisible
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(SetupPanel, { appearance, host, settings }) : null
+    mode === "fake" && chromeVisible ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(
+      SetupPanel,
+      {
+        appearance,
+        detectedScreensize,
+        host,
+        settings
+      }
+    ) : null
   ] });
 }
@@ -8354,12 +8558,12 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 // src/webvr/xr-origin.tsx
 var import_fiber9 = require("@react-three/fiber");
 var import_xr2 = require("@react-three/xr");
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_three7 = require("three");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function PanoramaXROrigin() {
-  const originRef = (0, import_react28.useRef)(null);
-  const localHeadPositionRef = (0, import_react28.useRef)(new import_three7.Vector3());
+  const originRef = (0, import_react29.useRef)(null);
+  const localHeadPositionRef = (0, import_react29.useRef)(new import_three7.Vector3());
   const session2 = (0, import_xr2.useXR)((state) => state.session);
   const gl = (0, import_fiber9.useThree)((state) => state.gl);
   (0, import_fiber9.useFrame)(() => {
@@ -8424,7 +8628,7 @@ function PanoCursorTree({
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
-  const host = (0, import_react29.useContext)(PanoVideoHostContext);
+  const host = (0, import_react30.useContext)(PanoVideoHostContext);
   if (host) {
     host.controlClaims = 0;
   }
@@ -8437,7 +8641,7 @@ function DefaultControlChannels({
   keyboardChannel,
   fovSpeed
 }) {
-  const claims = (0, import_react29.useContext)(ControlClaimsContext);
+  const claims = (0, import_react30.useContext)(ControlClaimsContext);
   if (!claims) {
     return null;
   }
@@ -8453,7 +8657,7 @@ function DefaultControlChannels({
     ) : null
   ] });
 }
-var PanoViewer = (0, import_react29.forwardRef)(
+var PanoViewer = (0, import_react30.forwardRef)(
   function PanoViewer2({
     children,
     renderOverlay,
@@ -8474,37 +8678,37 @@ var PanoViewer = (0, import_react29.forwardRef)(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = (0, import_react29.useRef)(null);
-    const controlsRef = (0, import_react29.useRef)(null);
-    const modalHost = (0, import_react29.useMemo)(() => createPanoModalHost(), []);
-    const modalOpen = (0, import_react29.useSyncExternalStore)(modalHost.subscribe, modalHost.getSnapshot, () => false);
-    const setControlsRuntime = (0, import_react29.useCallback)((runtime) => {
+    const rootRef = (0, import_react30.useRef)(null);
+    const controlsRef = (0, import_react30.useRef)(null);
+    const modalHost = (0, import_react30.useMemo)(() => createPanoModalHost(), []);
+    const modalOpen = (0, import_react30.useSyncExternalStore)(modalHost.subscribe, modalHost.getSnapshot, () => false);
+    const setControlsRuntime = (0, import_react30.useCallback)((runtime) => {
       controlsRef.current = runtime;
       modalHost.connect(runtime);
     }, [modalHost]);
-    const eventBus = (0, import_react29.useMemo)(() => createPanoEventBus(), []);
+    const eventBus = (0, import_react30.useMemo)(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
-    const hotspotTargetRegistry = (0, import_react29.useMemo)(() => createHotspotTargetRegistry(), []);
+    const hotspotTargetRegistry = (0, import_react30.useMemo)(() => createHotspotTargetRegistry(), []);
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
     const { api: chromeOverlayApi, setOverlayNode, overlayElement } = usePanoChromeOverlay();
-    const videoHost = (0, import_react29.useMemo)(() => createPanoVideoHost(), []);
-    const filterHost = (0, import_react29.useMemo)(() => createPanoFilterHost(), []);
-    const webVRHost = (0, import_react29.useMemo)(() => createWebVRHost(), []);
-    const scenesHost = (0, import_react29.useMemo)(() => createScenesHost(), []);
-    const bgmHost = (0, import_react29.useMemo)(() => createBackgroundAudioHost(), []);
-    const mediaActivationHost = (0, import_react29.useMemo)(() => createPanoMediaActivationHost(), []);
-    const mediaActivationOptions = (0, import_react29.useMemo)(
+    const videoHost = (0, import_react30.useMemo)(() => createPanoVideoHost(), []);
+    const filterHost = (0, import_react30.useMemo)(() => createPanoFilterHost(), []);
+    const webVRHost = (0, import_react30.useMemo)(() => createWebVRHost(), []);
+    const scenesHost = (0, import_react30.useMemo)(() => createScenesHost(), []);
+    const bgmHost = (0, import_react30.useMemo)(() => createBackgroundAudioHost(), []);
+    const mediaActivationHost = (0, import_react30.useMemo)(() => createPanoMediaActivationHost(), []);
+    const mediaActivationOptions = (0, import_react30.useMemo)(
       () => mediaActivation === false ? null : mediaActivation ?? {},
       [mediaActivation]
     );
-    const mediaActivationRevision = (0, import_react29.useSyncExternalStore)(
+    const mediaActivationRevision = (0, import_react30.useSyncExternalStore)(
       (onStoreChange) => subscribePanoMediaActivation(mediaActivationHost, onStoreChange),
       () => getPanoMediaActivationRevision(mediaActivationHost),
       () => getPanoMediaActivationRevision(mediaActivationHost)
     );
-    const [mediaActivated, setMediaActivated] = (0, import_react29.useState)(false);
-    const stereoView = (0, import_react29.useMemo)(() => createWebVRStereoView(), []);
-    const xrStore = (0, import_react29.useMemo)(
+    const [mediaActivated, setMediaActivated] = (0, import_react30.useState)(false);
+    const stereoView = (0, import_react30.useMemo)(() => createWebVRStereoView(), []);
+    const xrStore = (0, import_react30.useMemo)(
       () => (0, import_xr3.createXRStore)({
         anchors: false,
         bodyTracking: false,
@@ -8520,7 +8724,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
       }),
       []
     );
-    const mediaActivationControls = (0, import_react29.useMemo)(
+    const mediaActivationControls = (0, import_react30.useMemo)(
       () => ({
         resumeAudio: () => resumePanoAudio(),
         playVideo: async ({ unmute = false } = {}) => {
@@ -8538,18 +8742,18 @@ var PanoViewer = (0, import_react29.forwardRef)(
       }),
       [bgmHost, videoHost]
     );
-    const runMediaActivation = (0, import_react29.useCallback)(() => {
+    const runMediaActivation = (0, import_react30.useCallback)(() => {
       const resume = mediaActivationControls.resumeAudio();
       mediaActivationOptions?.onActivate?.(mediaActivationControls);
       return resume;
     }, [mediaActivationControls, mediaActivationOptions]);
-    const activateMedia = (0, import_react29.useCallback)(() => {
+    const activateMedia = (0, import_react30.useCallback)(() => {
       setMediaActivated(true);
       return runMediaActivation();
     }, [runMediaActivation]);
     const hasMediaActivationIntent = mediaActivationRevision >= 0 && hasPanoMediaActivationIntent(mediaActivationHost);
     const shouldActivateMedia = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
-    (0, import_react29.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       if (!shouldActivateMedia) {
         return;
       }
@@ -8624,14 +8828,14 @@ var PanoViewer = (0, import_react29.forwardRef)(
       videoHost
     ]);
     const limitsKey = JSON.stringify(viewLimits);
-    const parsedLimits = (0, import_react29.useMemo)(() => parseViewLimits(viewLimits), [limitsKey]);
-    const fallbackViewRef = (0, import_react29.useRef)(DEFAULT_VIEW);
+    const parsedLimits = (0, import_react30.useMemo)(() => parseViewLimits(viewLimits), [limitsKey]);
+    const fallbackViewRef = (0, import_react30.useRef)(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
       Math.max(maxFov, normalizedMinFov + 1)
     );
-    const normalizedInitialView = (0, import_react29.useMemo)(
+    const normalizedInitialView = (0, import_react30.useMemo)(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
         pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
@@ -8646,10 +8850,10 @@ var PanoViewer = (0, import_react29.forwardRef)(
       ]
     );
     fallbackViewRef.current = normalizedInitialView;
-    const controlClaims = (0, import_react29.useMemo)(() => createControlClaims(), []);
+    const controlClaims = (0, import_react30.useMemo)(() => createControlClaims(), []);
     resetControlClaims(controlClaims);
     const controlsEnabled = controls !== false;
-    const controlOptions = (0, import_react29.useMemo)(
+    const controlOptions = (0, import_react30.useMemo)(
       () => typeof controls === "object" ? controls : {},
       [controls]
     );
@@ -8657,7 +8861,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
     const allModeInvert = controlOptions.invert === true;
     const topRotateSpeed = controlOptions.rotateSpeed ?? DEFAULT_POINTER_ROTATE_SPEED;
     const topZoomSpeed = controlOptions.zoomSpeed ?? DEFAULT_MOUSE_ZOOM_SPEED;
-    const mouseChannel = (0, import_react29.useMemo)(
+    const mouseChannel = (0, import_react30.useMemo)(
       () => resolveChannel(controlOptions.mouse, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -8673,7 +8877,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
         topZoomSpeed
       ]
     );
-    const touchChannel = (0, import_react29.useMemo)(
+    const touchChannel = (0, import_react30.useMemo)(
       () => resolveChannel(controlOptions.touch, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -8682,13 +8886,13 @@ var PanoViewer = (0, import_react29.forwardRef)(
       }),
       [allModeInvert, controlOptions.touch, topRotateSpeed]
     );
-    const keyboardChannel = (0, import_react29.useMemo)(
+    const keyboardChannel = (0, import_react30.useMemo)(
       () => resolveChannel(controlOptions.keyboard, {
         enabled: true
       }),
       [controlOptions.keyboard]
     );
-    const enterFullscreen = (0, import_react29.useCallback)(async () => {
+    const enterFullscreen = (0, import_react30.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -8707,7 +8911,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
         acquireIphoneLandscapeFullscreen(root, "viewer");
       }
     }, []);
-    const exitFullscreen = (0, import_react29.useCallback)(async () => {
+    const exitFullscreen = (0, import_react30.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -8719,7 +8923,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
         await exitElementFullscreen();
       }
     }, []);
-    const toggleFullscreen = (0, import_react29.useCallback)(async () => {
+    const toggleFullscreen = (0, import_react30.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -8733,17 +8937,21 @@ var PanoViewer = (0, import_react29.forwardRef)(
       }
       await enterFullscreen();
     }, [enterFullscreen, exitFullscreen]);
-    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react29.useState)(false);
+    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react30.useState)(false);
     const { context: overlayContext, setPortalContainer } = usePanoOverlayHost(isViewerFullscreen);
-    const iphoneFullscreenAllowsScroll = (0, import_react29.useSyncExternalStore)(
+    const { sceneChildren, overlayElements } = (0, import_react30.useMemo)(
+      () => partitionPanoOverlay(children),
+      [children]
+    );
+    const iphoneFullscreenAllowsScroll = (0, import_react30.useSyncExternalStore)(
       subscribeIphoneLandscapeFullscreen,
       () => getIphoneLandscapeFullscreenSnapshot().allowsDocumentScroll,
       () => false
     );
-    (0, import_react29.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       if (modalOpen) contextMenuOverlayApi.setSession(null);
     }, [contextMenuOverlayApi, modalOpen]);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       if (typeof document === "undefined") {
         return;
       }
@@ -8770,7 +8978,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
         unsubscribeIphone();
       };
     }, []);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       const root = rootRef.current;
       return () => {
         if (root) {
@@ -8778,7 +8986,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
         }
       };
     }, []);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       const root = rootRef.current;
       if (!root) {
         return;
@@ -8791,7 +8999,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
         root.removeEventListener("contextmenu", suppressNativeContextMenu, true);
       };
     }, []);
-    const contextMenuActions = (0, import_react29.useMemo)(
+    const contextMenuActions = (0, import_react30.useMemo)(
       () => ({
         reset: () => {
           controlsRef.current?.reset();
@@ -8803,24 +9011,24 @@ var PanoViewer = (0, import_react29.forwardRef)(
       }),
       [isViewerFullscreen, toggleFullscreen]
     );
-    const contextMenuChannel = (0, import_react29.useMemo)(
+    const contextMenuChannel = (0, import_react30.useMemo)(
       () => resolveContextMenuChannel(contextMenu),
       [contextMenu]
     );
-    const resolvedCursors = (0, import_react29.useMemo)(
+    const resolvedCursors = (0, import_react30.useMemo)(
       () => resolvePanoCursors(cursors),
       [cursors]
     );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react29.useState)(
+    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react30.useState)(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    (0, import_react29.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
-    const isFullscreenRef = (0, import_react29.useRef)(false);
+    const isFullscreenRef = (0, import_react30.useRef)(false);
     isFullscreenRef.current = isViewerFullscreen;
-    (0, import_react29.useImperativeHandle)(
+    (0, import_react30.useImperativeHandle)(
       ref,
       () => ({
         // -- View --
@@ -8858,6 +9066,8 @@ var PanoViewer = (0, import_react29.forwardRef)(
         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,
@@ -8901,7 +9111,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
         webVRHost
       ]
     );
-    const rootStyle = (0, import_react29.useMemo)(
+    const rootStyle = (0, import_react30.useMemo)(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -8990,7 +9200,7 @@ var PanoViewer = (0, import_react29.forwardRef)(
                                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoramaEventSurface, {}),
                                 contextMenuChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoContextMenu, { ...contextMenuChannel.props }) : null,
                                 /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ControlClaimsContext.Provider, { value: controlClaims, children: [
-                                  children,
+                                  sceneChildren,
                                   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                     DefaultControlChannels,
                                     {
@@ -9035,15 +9245,18 @@ var PanoViewer = (0, import_react29.forwardRef)(
             contextMenuOverlay,
             hotspotAccessibilityControls
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanoOverlayOutletContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "div",
             {
               "data-pano-overlay": "",
               ref: setPortalContainer,
               style: { position: "absolute", inset: 0, zIndex: 30, pointerEvents: "none" },
-              children: renderOverlay?.(overlayContext)
+              children: [
+                renderOverlay?.(overlayContext),
+                overlayElements
+              ]
             }
-          ) }) }) })
+          ) }) }) }) })
         ]
       }
     );
@@ -9136,18 +9349,18 @@ function hotspotAction(hotspot, trigger) {
 }
 // src/project-scenes.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 // src/scenes.tsx
 var import_fiber18 = require("@react-three/fiber");
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_three21 = require("three");
 // src/scene-detail.tsx
-var import_react30 = require("react");
-var SceneDetailContext = (0, import_react30.createContext)(null);
+var import_react31 = require("react");
+var SceneDetailContext = (0, import_react31.createContext)(null);
 function useSceneDetailReporter() {
-  return (0, import_react30.useContext)(SceneDetailContext);
+  return (0, import_react31.useContext)(SceneDetailContext);
 }
 function viewTilesAreDrawable(textures) {
   return textures.length > 0 && textures.every((texture) => texture != null);
@@ -9212,7 +9425,7 @@ function isSnapshotTransition(preset) {
 // src/scene-transitions/snapshot-hold.tsx
 var import_fiber11 = require("@react-three/fiber");
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_three10 = require("three");
 // src/scene-transitions/overlay-utils.ts
@@ -9548,13 +9761,13 @@ function createSnapshotMaterial(preset, texture) {
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function SnapshotHold({ snapshot }) {
   const { camera, gl } = (0, import_fiber11.useThree)();
-  const meshRef = (0, import_react31.useRef)(null);
-  const directionRef = (0, import_react31.useRef)(new import_three10.Vector3());
-  const material = (0, import_react31.useMemo)(
+  const meshRef = (0, import_react32.useRef)(null);
+  const directionRef = (0, import_react32.useRef)(new import_three10.Vector3());
+  const material = (0, import_react32.useMemo)(
     () => createSnapshotMaterial("crossfade", snapshot.texture),
     [snapshot.texture]
   );
-  (0, import_react31.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react32.useEffect)(() => () => material.dispose(), [material]);
   (0, import_fiber11.useFrame)(() => {
     const mesh = meshRef.current;
     if (!mesh || !isPerspectiveCamera(camera)) {
@@ -9632,7 +9845,7 @@ function phaseAfterSnapshot(preset, hold) {
 // src/scene-transitions/particle-overlay.tsx
 var import_fiber12 = require("@react-three/fiber");
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_three11 = require("three");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var PARTICLE_GRID = 48;
@@ -9711,12 +9924,12 @@ function ParticleOverlay({
   onFinish
 }) {
   const { camera } = (0, import_fiber12.useThree)();
-  const meshRef = (0, import_react32.useRef)(null);
-  const startRef = (0, import_react32.useRef)(null);
-  const finishedRef = (0, import_react32.useRef)(false);
-  const directionRef = (0, import_react32.useRef)(new import_three11.Vector3());
-  const geometry = (0, import_react32.useMemo)(() => createParticleGeometry(), []);
-  const material = (0, import_react32.useMemo)(
+  const meshRef = (0, import_react33.useRef)(null);
+  const startRef = (0, import_react33.useRef)(null);
+  const finishedRef = (0, import_react33.useRef)(false);
+  const directionRef = (0, import_react33.useRef)(new import_three11.Vector3());
+  const geometry = (0, import_react33.useMemo)(() => createParticleGeometry(), []);
+  const material = (0, import_react33.useMemo)(
     () => new import_three11.ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -9732,9 +9945,9 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  (0, import_react32.useEffect)(() => () => geometry.dispose(), [geometry]);
-  (0, import_react32.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react33.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react33.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -9770,7 +9983,7 @@ function ParticleOverlay({
 // src/scene-transitions/snapshot-overlay.tsx
 var import_fiber13 = require("@react-three/fiber");
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_three12 = require("three");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function SnapshotOverlay({
@@ -9781,18 +9994,18 @@ function SnapshotOverlay({
   onFinish
 }) {
   const { camera, gl } = (0, import_fiber13.useThree)();
-  const meshRef = (0, import_react33.useRef)(null);
-  const startRef = (0, import_react33.useRef)(null);
-  const finishedRef = (0, import_react33.useRef)(false);
-  const directionRef = (0, import_react33.useRef)(new import_three12.Vector3());
-  const material = (0, import_react33.useMemo)(() => {
+  const meshRef = (0, import_react34.useRef)(null);
+  const startRef = (0, import_react34.useRef)(null);
+  const finishedRef = (0, import_react34.useRef)(false);
+  const directionRef = (0, import_react34.useRef)(new import_three12.Vector3());
+  const material = (0, import_react34.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  (0, import_react33.useEffect)(() => () => material?.dispose(), [material]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => () => material?.dispose(), [material]);
+  (0, import_react34.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
@@ -9874,11 +10087,11 @@ function TransitionOverlay(props) {
 // src/sphere.tsx
 var import_fiber14 = require("@react-three/fiber");
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_three14 = require("three");
 // src/pano-filter/pano-basic-material.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_three13 = require("three");
 // src/pano-filter/shaders.ts
@@ -10075,10 +10288,10 @@ 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 = (0, import_react34.useRef)({ matrix, intensity: snapshot.intensity });
+  const currentRef = (0, import_react35.useRef)({ matrix, intensity: snapshot.intensity });
   currentRef.current = { matrix, intensity: snapshot.intensity };
-  const shaderRef = (0, import_react34.useRef)(null);
-  const onBeforeCompile = (0, import_react34.useMemo)(() => {
+  const shaderRef = (0, import_react35.useRef)(null);
+  const onBeforeCompile = (0, import_react35.useMemo)(() => {
     const compile = (shader) => {
       shaderRef.current = shader;
       if (preset !== "none") {
@@ -10098,7 +10311,7 @@ function PanoBasicMaterial({
     compile.toString = () => `pano-filter:${preset}:matrix:${hasMatrix}`;
     return compile;
   }, [preset, hasMatrix]);
-  (0, import_react34.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     const shader = shaderRef.current;
     if (!shader) return;
     if (shader.uniforms.uPanoFilterIntensity)
@@ -10124,12 +10337,12 @@ function PanoBasicMaterial({
 // src/sphere.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react35.useState)(null);
-  const onLoadRef = (0, import_react35.useRef)(onLoad);
-  const onErrorRef = (0, import_react35.useRef)(onError);
+  const [texture, setTexture] = (0, import_react36.useState)(null);
+  const onLoadRef = (0, import_react36.useRef)(onLoad);
+  const onErrorRef = (0, import_react36.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -10168,7 +10381,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  (0, import_react35.useEffect)(
+  (0, import_react36.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10188,7 +10401,7 @@ function Sphere({
 }) {
   const gl = (0, import_fiber14.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = (0, import_react35.useMemo)(
+  const resolvedPreviewUrl = (0, import_react36.useMemo)(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -10207,12 +10420,12 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = (0, import_react35.useRef)(false);
+  const readyRef = (0, import_react36.useRef)(false);
   const detailReporter = useSceneDetailReporter();
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!detailReporter) {
       return;
     }
@@ -10221,7 +10434,7 @@ function Sphere({
       detailReporter.report(false);
     };
   }, [detailReporter, texture]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -10253,7 +10466,7 @@ function Sphere({
 // src/sphere-tile/sphere-tile.tsx
 var import_fiber16 = require("@react-three/fiber");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_three18 = require("three");
 // src/tile/texture-manager.ts
@@ -10263,6 +10476,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 = import_three15.SRGBColorSpace;
+  texture.wrapS = import_three15.ClampToEdgeWrapping;
+  texture.wrapT = import_three15.ClampToEdgeWrapping;
+  texture.magFilter = import_three15.LinearFilter;
+  texture.minFilter = import_three15.LinearMipmapLinearFilter;
+  texture.generateMipmaps = true;
+  texture.anisotropy = Math.max(1, anisotropy);
+  texture.needsUpdate = true;
+}
 var TileTextureManager = class {
   constructor(options) {
     this.loader = new import_three15.TextureLoader();
@@ -10414,7 +10641,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;
@@ -10437,14 +10667,7 @@ var TileTextureManager = class {
     }
   }
   configureTexture(texture) {
-    texture.colorSpace = import_three15.SRGBColorSpace;
-    texture.wrapS = import_three15.ClampToEdgeWrapping;
-    texture.wrapT = import_three15.ClampToEdgeWrapping;
-    texture.magFilter = import_three15.LinearFilter;
-    texture.minFilter = import_three15.LinearFilter;
-    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) {
@@ -10483,9 +10706,9 @@ var TileTextureManager = class {
 // src/tile/texture-manager-context.tsx
 var import_fiber15 = require("@react-three/fiber");
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react36.createContext)(null);
+var TileTextureManagerContext = (0, import_react37.createContext)(null);
 function TileTextureManagerProvider({
   children,
   maxTextureMemoryMb = 128,
@@ -10493,7 +10716,7 @@ function TileTextureManagerProvider({
 }) {
   const gl = (0, import_fiber15.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react36.useMemo)(
+  const manager = (0, import_react37.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -10502,24 +10725,24 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return (0, import_react36.useContext)(TileTextureManagerContext);
+  return (0, import_react37.useContext)(TileTextureManagerContext);
 }
 // src/tile/texture-hooks.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_three16 = require("three");
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = (0, import_react37.useState)(null);
-  const onErrorRef = (0, import_react37.useRef)(onError);
+  const [texture, setTexture] = (0, import_react38.useState)(null);
+  const onErrorRef = (0, import_react38.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -10534,14 +10757,7 @@ function usePreviewTexture(url, anisotropy, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three16.SRGBColorSpace;
-        loadedTexture.wrapS = import_three16.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three16.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three16.LinearFilter;
-        loadedTexture.minFilter = import_three16.LinearFilter;
-        loadedTexture.generateMipmaps = false;
-        loadedTexture.anisotropy = Math.min(4, anisotropy);
-        loadedTexture.needsUpdate = true;
+        configureMipmappedTexture(loadedTexture, anisotropy);
         setTexture(loadedTexture);
       },
       void 0,
@@ -10556,7 +10772,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react37.useEffect)(
+  (0, import_react38.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10565,14 +10781,14 @@ function usePreviewTexture(url, anisotropy, onError) {
   return texture;
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react37.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react38.useState)(() => ({
     manager,
     key,
     url,
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  (0, import_react37.useEffect)(
+  (0, import_react38.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -10707,8 +10923,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(import_three17.MathUtils.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;
 }
@@ -10730,7 +10955,7 @@ function SpherePatch({
   yawOffset: yawOffset2,
   preview = false
 }) {
-  const geometry = (0, import_react38.useMemo)(
+  const geometry = (0, import_react39.useMemo)(
     () => sphereTileGeometry(
       address,
       yawOffset2,
@@ -10738,7 +10963,7 @@ function SpherePatch({
     ),
     [address, yawOffset2, preview]
   );
-  (0, import_react38.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react39.useEffect)(() => () => geometry.dispose(), [geometry]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "mesh",
     {
@@ -10757,7 +10982,7 @@ function SpherePatch({
     }
   );
 }
-var ManagedPatch = (0, import_react38.memo)(function ManagedPatch2({
+var ManagedPatch = (0, import_react39.memo)(function ManagedPatch2({
   address,
   manager,
   resolveUrl,
@@ -10771,7 +10996,7 @@ var ManagedPatch = (0, import_react38.memo)(function ManagedPatch2({
     url,
     address
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (snapshot.texture) ready();
   }, [snapshot.texture, ready]);
   return snapshot.texture ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -10809,7 +11034,7 @@ function SphereTileSource({
     anisotropy,
     onPreviewError
   );
-  const callbacks = (0, import_react38.useRef)({
+  const callbacks = (0, import_react39.useRef)({
     onReady,
     onLoadProgress,
     onTileError,
@@ -10821,7 +11046,7 @@ function SphereTileSource({
     1,
     Number.isFinite(maxTextureMemoryMb) ? maxTextureMemoryMb : 128
   ) * 1024 * 1024;
-  const ownedManager = (0, import_react38.useMemo)(
+  const ownedManager = (0, import_react39.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: ownedBudget,
@@ -10842,17 +11067,17 @@ function SphereTileSource({
   );
   const manager = sharedManager ?? ownedManager;
   const budget = manager.memoryBudgetBytes;
-  const readyRef = (0, import_react38.useRef)(false);
-  const ready = (0, import_react38.useCallback)(() => {
+  const readyRef = (0, import_react39.useRef)(false);
+  const ready = (0, import_react39.useCallback)(() => {
     if (!readyRef.current) {
       readyRef.current = true;
       callbacks.current.onReady?.();
     }
   }, []);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (preview) ready();
   }, [preview, ready]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -10862,14 +11087,14 @@ function SphereTileSource({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const resolveUrl = (0, import_react38.useMemo)(
+  const resolveUrl = (0, import_react39.useMemo)(
     () => (address) => resolveAssetUrl(
       baseUrl,
       resolveTileUrl ? resolveTileUrl(address) : resolveSphereTemplateUrl(urlTemplate, address, indexBase)
     ),
     [baseUrl, resolveTileUrl, urlTemplate, indexBase]
   );
-  const candidates = (0, import_react38.useMemo)(
+  const candidates = (0, import_react39.useMemo)(
     () => config.levels.map(
       (level, index) => sphereTileAddresses(level, index, config.tileSize).map((address) => ({
         address,
@@ -10878,17 +11103,17 @@ function SphereTileSource({
     ),
     [config, yawOffset2]
   );
-  const previewAddress = (0, import_react38.useMemo)(
+  const previewAddress = (0, import_react39.useMemo)(
     () => sphereTileAddresses({ width: 2, height: 1 }, 0, 2)[0],
     []
   );
-  const [layers, setLayers] = (0, import_react38.useState)([]);
+  const [layers, setLayers] = (0, import_react39.useState)([]);
   const detailReporter = useSceneDetailReporter();
-  const detailReporterRef = (0, import_react38.useRef)(detailReporter);
+  const detailReporterRef = (0, import_react39.useRef)(detailReporter);
   detailReporterRef.current = detailReporter;
-  const detailTokenRef = (0, import_react38.useRef)("");
-  const targetKeysRef = (0, import_react38.useRef)([]);
-  const scratch = (0, import_react38.useMemo)(
+  const detailTokenRef = (0, import_react39.useRef)("");
+  const targetKeysRef = (0, import_react39.useRef)([]);
+  const scratch = (0, import_react39.useMemo)(
     () => ({
       camera: new import_three18.PerspectiveCamera(),
       frustum: new import_three18.Frustum(),
@@ -10936,7 +11161,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++) {
@@ -10944,7 +11175,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) {
@@ -11003,14 +11234,14 @@ function SphereTileSource({
 }
 function SphereTile({ multires, ...props }) {
   const token = typeof multires === "string" ? multires : JSON.stringify(multires);
-  const config = (0, import_react38.useMemo)(() => parseSphereMultires(multires), [token]);
+  const config = (0, import_react39.useMemo)(() => parseSphereMultires(multires), [token]);
   const sourceKey = `${props.baseUrl}\0${token}\0${props.previewUrl}\0${props.urlTemplate ?? ""}\0${props.indexBase ?? 1}`;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SphereTileSource, { ...props, config }, sourceKey);
 }
 // src/tile/tile.tsx
 var import_fiber17 = require("@react-three/fiber");
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_three20 = require("three");
 // src/tile/face-layout.ts
@@ -11106,8 +11337,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(import_three19.MathUtils.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) {
@@ -11163,7 +11405,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react39.useMemo)(() => {
+  const geometry = (0, import_react40.useMemo)(() => {
     const nextGeometry = new import_three20.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -11178,7 +11420,7 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  (0, import_react39.useEffect)(
+  (0, import_react40.useEffect)(
     () => () => {
       geometry.dispose();
     },
@@ -11218,7 +11460,7 @@ function PreviewCube({
     face
   ));
 }
-var TileMesh = (0, import_react39.memo)(function TileMesh2({
+var TileMesh = (0, import_react40.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -11251,7 +11493,7 @@ var TileMesh = (0, import_react39.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react39.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react40.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
@@ -11423,10 +11665,10 @@ function Tile({
   onLevelChange
 }) {
   const { camera, gl, size } = (0, import_fiber17.useThree)();
-  const multiresConfig = (0, import_react39.useMemo)(() => parseMultires(multires), [multires]);
+  const multiresConfig = (0, import_react40.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react39.useMemo)(
+  const candidatesByLevel = (0, import_react40.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -11438,13 +11680,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react39.useRef)(onLoadProgress);
-  const errorRef = (0, import_react39.useRef)(onTileError);
-  const levelChangeRef = (0, import_react39.useRef)(onLevelChange);
+  const progressRef = (0, import_react40.useRef)(onLoadProgress);
+  const errorRef = (0, import_react40.useRef)(onTileError);
+  const levelChangeRef = (0, import_react40.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react39.useMemo)(
+  const ownedManager = (0, import_react40.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11465,7 +11707,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -11475,11 +11717,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react39.useRef)(false);
-  (0, import_react39.useEffect)(() => {
+  const readyRef = (0, import_react40.useRef)(false);
+  (0, import_react40.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -11487,37 +11729,37 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react39.useMemo)(
+  const resolveUrl = (0, import_react40.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = (0, import_react39.useState)([]);
-  const layerTokenRef = (0, import_react39.useRef)("");
-  const currentLevelRef = (0, import_react39.useRef)(1);
-  const lastUpdateAtRef = (0, import_react39.useRef)(-Infinity);
-  const visibilityDirtyRef = (0, import_react39.useRef)(true);
-  const lastVisibilityQuaternionRef = (0, import_react39.useRef)(camera.quaternion.clone());
-  const lastVisibilityFovRef = (0, import_react39.useRef)(Number.NaN);
-  const lastViewportRef = (0, import_react39.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react39.useRef)(new import_three20.Frustum());
-  const projectionMatrixRef = (0, import_react39.useRef)(new import_three20.Matrix4());
-  const visibilityCameraRef = (0, import_react39.useRef)(new import_three20.PerspectiveCamera());
-  const trackedLoadModeRef = (0, import_react39.useRef)(loadMode);
-  const targetKeysRef = (0, import_react39.useRef)([]);
-  const detailTokenRef = (0, import_react39.useRef)("");
+  const [layers, setLayers] = (0, import_react40.useState)([]);
+  const layerTokenRef = (0, import_react40.useRef)("");
+  const currentLevelRef = (0, import_react40.useRef)(1);
+  const lastUpdateAtRef = (0, import_react40.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react40.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react40.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react40.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react40.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react40.useRef)(new import_three20.Frustum());
+  const projectionMatrixRef = (0, import_react40.useRef)(new import_three20.Matrix4());
+  const visibilityCameraRef = (0, import_react40.useRef)(new import_three20.PerspectiveCamera());
+  const trackedLoadModeRef = (0, import_react40.useRef)(loadMode);
+  const targetKeysRef = (0, import_react40.useRef)([]);
+  const detailTokenRef = (0, import_react40.useRef)("");
   const detailReporter = useSceneDetailReporter();
-  const detailReporterRef = (0, import_react39.useRef)(detailReporter);
+  const detailReporterRef = (0, import_react40.useRef)(detailReporter);
   detailReporterRef.current = detailReporter;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -11567,7 +11809,8 @@ function Tile({
         size.height,
         pixelRatio,
         camera.fov,
-        currentLevelRef.current
+        currentLevelRef.current,
+        size.width
       );
       if (targetLevel !== currentLevelRef.current) {
         currentLevelRef.current = targetLevel;
@@ -11693,9 +11936,9 @@ function SnapshotCapture({
   onCaptured
 }) {
   const { camera, gl, scene, size } = (0, import_fiber18.useThree)();
-  const capturedRequestRef = (0, import_react40.useRef)(0);
-  const renderTargetRef = (0, import_react40.useRef)(null);
-  (0, import_react40.useEffect)(
+  const capturedRequestRef = (0, import_react41.useRef)(0);
+  const renderTargetRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
@@ -11753,43 +11996,43 @@ function ScenesController({
   transitionWaitForDetailMs,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = (0, import_react40.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react41.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react40.useMemo)(
+  const transition = (0, import_react41.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react40.useMemo)(
+  const sceneMap = (0, import_react41.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react40.useState)([
+  const [slots, setSlots] = (0, import_react41.useState)([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = (0, import_react40.useState)(0);
-  const [liveSlot, setLiveSlot] = (0, import_react40.useState)(0);
-  const [pendingSlot, setPendingSlot] = (0, import_react40.useState)(null);
-  const [phase, setPhase] = (0, import_react40.useState)(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = (0, import_react40.useState)(0);
-  const [transitionRunId, setTransitionRunId] = (0, import_react40.useState)(0);
-  const [snapshot, setSnapshot] = (0, import_react40.useState)(null);
-  const [recoveryKey, setRecoveryKey] = (0, import_react40.useState)(0);
-  const requestedSceneIdRef = (0, import_react40.useRef)(activeSceneId);
-  const captureReasonRef = (0, import_react40.useRef)("start");
-  const interactionReleaseRef = (0, import_react40.useRef)(null);
-  const slotsRef = (0, import_react40.useRef)(slots);
-  const phaseRef = (0, import_react40.useRef)(phase);
-  const liveSlotRef = (0, import_react40.useRef)(liveSlot);
-  const transitionFromRef = (0, import_react40.useRef)(initialScene);
-  const readySceneRef = (0, import_react40.useRef)(null);
-  const waitRef = (0, import_react40.useRef)(null);
-  const waitTimerRef = (0, import_react40.useRef)(null);
-  const detailGenerationRef = (0, import_react40.useRef)(0);
-  const [detailGeneration, setDetailGeneration] = (0, import_react40.useState)(0);
-  const mountedRef = (0, import_react40.useRef)(true);
-  const waitForDetailMsRef = (0, import_react40.useRef)(0);
+  const [activeSlot, setActiveSlot] = (0, import_react41.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react41.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react41.useState)(null);
+  const [phase, setPhase] = (0, import_react41.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react41.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react41.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react41.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react41.useState)(0);
+  const requestedSceneIdRef = (0, import_react41.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react41.useRef)("start");
+  const interactionReleaseRef = (0, import_react41.useRef)(null);
+  const slotsRef = (0, import_react41.useRef)(slots);
+  const phaseRef = (0, import_react41.useRef)(phase);
+  const liveSlotRef = (0, import_react41.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react41.useRef)(initialScene);
+  const readySceneRef = (0, import_react41.useRef)(null);
+  const waitRef = (0, import_react41.useRef)(null);
+  const waitTimerRef = (0, import_react41.useRef)(null);
+  const detailGenerationRef = (0, import_react41.useRef)(0);
+  const [detailGeneration, setDetailGeneration] = (0, import_react41.useState)(0);
+  const mountedRef = (0, import_react41.useRef)(true);
+  const waitForDetailMsRef = (0, import_react41.useRef)(0);
   waitForDetailMsRef.current = normalizeTransitionWaitMs(transitionWaitForDetailMs);
   slotsRef.current = slots;
   phaseRef.current = phase;
@@ -11797,21 +12040,21 @@ function ScenesController({
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const ready = readySceneRef.current;
     if (ready) controlsRef?.current?.setSceneViewLimits(sceneMap.get(ready.id)?.viewLimits);
   }, [controlsRef, sceneMap]);
-  (0, import_react40.useEffect)(() => () => {
+  (0, import_react41.useEffect)(() => () => {
     controlsRef?.current?.setSceneViewLimits(void 0);
   }, [controlsRef]);
-  const releaseInteraction = (0, import_react40.useCallback)(() => {
+  const releaseInteraction = (0, import_react41.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react40.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react41.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const clearDetailWait = (0, import_react40.useCallback)((bumpGeneration) => {
+  const clearDetailWait = (0, import_react41.useCallback)((bumpGeneration) => {
     if (waitTimerRef.current !== null) {
       clearTimeout(waitTimerRef.current);
       waitTimerRef.current = null;
@@ -11832,14 +12075,14 @@ function ScenesController({
     detailGenerationRef.current = nextGeneration;
     setDetailGeneration(nextGeneration);
   }, []);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
       clearDetailWait(false);
     };
   }, [clearDetailWait]);
-  const startPreload = (0, import_react40.useCallback)((scene) => {
+  const startPreload = (0, import_react41.useCallback)((scene) => {
     clearDetailWait(true);
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
@@ -11851,7 +12094,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, [clearDetailWait]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -11877,13 +12120,13 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, clearDetailWait, pendingSlot, reportError, sceneMap, startPreload]);
-  const notifySceneReady = (0, import_react40.useCallback)((scene) => {
+  const notifySceneReady = (0, import_react41.useCallback)((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 = (0, import_react40.useCallback)((slot) => {
+  const handleReady = (0, import_react41.useCallback)((slot) => {
     if (slot === liveSlotRef.current && pendingSlot === null && phaseRef.current === "idle") {
       notifySceneReady(slotsRef.current[slot]);
       return;
@@ -11919,7 +12162,7 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, notifySceneReady, onTransitionEnd, pendingSlot, transition.preset]);
-  const finishTransition = (0, import_react40.useCallback)(() => {
+  const finishTransition = (0, import_react41.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -11944,11 +12187,11 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  const finishTransitionRef = (0, import_react40.useRef)(finishTransition);
+  const finishTransitionRef = (0, import_react41.useRef)(finishTransition);
   finishTransitionRef.current = finishTransition;
-  const transitionRef = (0, import_react40.useRef)(transition);
+  const transitionRef = (0, import_react41.useRef)(transition);
   transitionRef.current = transition;
-  const consumeDetailSignal = (0, import_react40.useCallback)((signal) => {
+  const consumeDetailSignal = (0, import_react41.useCallback)((signal) => {
     const decision = acceptDetailWait(waitRef.current, signal);
     waitRef.current = decision.wait;
     if (!decision.start) {
@@ -11968,7 +12211,7 @@ function ScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, []);
-  const handleCaptured = (0, import_react40.useCallback)((nextSnapshot) => {
+  const handleCaptured = (0, import_react41.useCallback)((nextSnapshot) => {
     if (captureReasonRef.current === "interrupt") {
       setSnapshot((current) => {
         current?.dispose();
@@ -12066,15 +12309,15 @@ function ScenesController({
     startPreload,
     transition.preset
   ]);
-  const snapshotRef = (0, import_react40.useRef)(snapshot);
+  const snapshotRef = (0, import_react41.useRef)(snapshot);
   snapshotRef.current = snapshot;
-  (0, import_react40.useEffect)(() => () => {
+  (0, import_react41.useEffect)(() => () => {
     releaseInteraction();
     snapshotRef.current?.dispose();
     snapshotRef.current = null;
   }, [releaseInteraction]);
   const { gl } = (0, import_fiber18.useThree)();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -12102,7 +12345,7 @@ function ScenesController({
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
   const slotSceneKey = `${slots[0]?.id ?? ""}
 ${slots[1]?.id ?? ""}`;
-  const detailReporters = (0, import_react40.useMemo)(() => {
+  const detailReporters = (0, import_react41.useMemo)(() => {
     const [firstSceneId = "", secondSceneId = ""] = slotSceneKey.split("\n");
     const sceneIds = [firstSceneId, secondSceneId];
     return sceneIds.map((sceneId) => ({
@@ -12119,7 +12362,7 @@ ${slots[1]?.id ?? ""}`;
       }
     }));
   }, [consumeDetailSignal, detailGeneration, slotSceneKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react40.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react41.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SnapshotCapture,
       {
@@ -12178,11 +12421,11 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = (0, import_react40.useState)(
+  const [internalId, setInternalId] = (0, import_react41.useState)(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
-  const requestSceneChange = (0, import_react40.useCallback)(
+  const requestSceneChange = (0, import_react41.useCallback)(
     (id) => {
       if (isControlled) {
         onActiveSceneIdChange?.(id);
@@ -12192,13 +12435,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = (0, import_react40.useRef)(scenes);
+  const scenesRef = (0, import_react41.useRef)(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = (0, import_react40.useRef)(resolvedId);
+  const resolvedIdRef = (0, import_react41.useRef)(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = (0, import_react40.useContext)(ScenesHostContext);
-  const phaseRef = (0, import_react40.useRef)("idle");
-  (0, import_react40.useEffect)(() => {
+  const host = (0, import_react41.useContext)(ScenesHostContext);
+  const phaseRef = (0, import_react41.useRef)("idle");
+  (0, import_react41.useEffect)(() => {
     if (!host) {
       return;
     }
@@ -12268,12 +12511,12 @@ function Scenes({
 // src/hotspot/image-hotspot.tsx
 var import_fiber22 = require("@react-three/fiber");
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_three27 = require("three");
 // src/hotspot/hotspot-anchor.tsx
 var import_fiber21 = require("@react-three/fiber");
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_three25 = require("three");
 // src/hotspot/drag-session.ts
@@ -12365,18 +12608,18 @@ function suppressFollowingClick(target) {
 }
 // src/hotspot/hotspot-tooltip.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 // src/webvr/stereo-html.tsx
 var import_fiber19 = require("@react-three/fiber");
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_client = require("react-dom/client");
 var import_three22 = require("three");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function useFallbackStereoView() {
-  const runtime = (0, import_react41.useContext)(WebVRRuntimeContext);
+  const runtime = (0, import_react42.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = (0, import_react41.useSyncExternalStore)(
+  const fallback = (0, import_react42.useSyncExternalStore)(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -12392,9 +12635,9 @@ function ProjectedHtml({
   eye
 }) {
   const { camera, gl, events, size } = (0, import_fiber19.useThree)();
-  const group = (0, import_react41.useRef)(null);
-  const overlay = (0, import_react41.useRef)(null);
-  const scratch = (0, import_react41.useRef)(new import_three22.Vector3());
+  const group = (0, import_react42.useRef)(null);
+  const overlay = (0, import_react42.useRef)(null);
+  const scratch = (0, import_react42.useRef)(new import_three22.Vector3());
   const target = events.connected || gl.domElement.parentElement;
   const updatePosition = () => {
     const anchor = group.current;
@@ -12422,7 +12665,7 @@ function ProjectedHtml({
       )
     );
   };
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     if (!target) return;
     const element = document.createElement("div");
     Object.assign(element.style, {
@@ -12440,7 +12683,7 @@ function ProjectedHtml({
       queueMicrotask(() => root.unmount());
     };
   }, [target]);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     overlay.current?.root.render(
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
@@ -12457,9 +12700,9 @@ function ProjectedHtml({
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("group", { ref: group });
 }
 function PanoHtml(props) {
-  const runtime = (0, import_react41.useContext)(WebVRRuntimeContext);
+  const runtime = (0, import_react42.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const mode = (0, import_react41.useSyncExternalStore)(
+  const mode = (0, import_react42.useSyncExternalStore)(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => host?.snapshot.mode ?? null,
     () => null
@@ -12548,16 +12791,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react42.useState)(false);
-  (0, import_react42.useEffect)(() => {
+  const [imageFailed, setImageFailed] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = (0, import_react42.useMemo)(
+  const resolvedAppearance = (0, import_react43.useMemo)(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = (0, import_react42.useMemo)(
+  const bubbleStyle = (0, import_react43.useMemo)(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -12653,7 +12896,7 @@ function selectionFrameScale(worldScaleX, worldScaleY, cameraSpaceDepth, fovDegr
 // src/hotspot/hotspot-stroke-line.tsx
 var import_drei = require("@react-three/drei");
 var import_fiber20 = require("@react-three/fiber");
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_three24 = require("three");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var LINE_WORLD_POSITION = new import_three24.Vector3();
@@ -12686,10 +12929,10 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = (0, import_react43.useRef)(null);
+  const lineRef = (0, import_react44.useRef)(null);
   const { camera, size } = (0, import_fiber20.useThree)();
   const dash = resolveDash(dashSize, gapSize);
-  (0, import_react43.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     if (!dash.dashed) {
       return;
     }
@@ -13099,27 +13342,27 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react44.useContext)(PanoramaViewContext);
-  const hotspotTargetRegistry = (0, import_react44.useContext)(HotspotTargetRegistryContext);
-  const eventBus = (0, import_react44.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react45.useContext)(PanoramaViewContext);
+  const hotspotTargetRegistry = (0, import_react45.useContext)(HotspotTargetRegistryContext);
+  const eventBus = (0, import_react45.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
   const { camera, gl, size } = (0, import_fiber21.useThree)();
-  const groupRef = (0, import_react44.useRef)(null);
-  const selectionFrameRef = (0, import_react44.useRef)(null);
-  const tooltipAnchorRef = (0, import_react44.useRef)(null);
-  const dragStateRef = (0, import_react44.useRef)(null);
-  const updateDragRef = (0, import_react44.useRef)(() => void 0);
-  const endDragRef = (0, import_react44.useRef)(() => void 0);
-  const suppressNextClickRef = (0, import_react44.useRef)(false);
-  const [hovered, setHovered] = (0, import_react44.useState)(false);
-  const [dragging, setDragging] = (0, import_react44.useState)(false);
-  const [pinned, setPinned] = (0, import_react44.useState)(false);
-  const tooltipContent = (0, import_react44.useMemo)(
+  const groupRef = (0, import_react45.useRef)(null);
+  const selectionFrameRef = (0, import_react45.useRef)(null);
+  const tooltipAnchorRef = (0, import_react45.useRef)(null);
+  const dragStateRef = (0, import_react45.useRef)(null);
+  const updateDragRef = (0, import_react45.useRef)(() => void 0);
+  const endDragRef = (0, import_react45.useRef)(() => void 0);
+  const suppressNextClickRef = (0, import_react45.useRef)(false);
+  const [hovered, setHovered] = (0, import_react45.useState)(false);
+  const [dragging, setDragging] = (0, import_react45.useState)(false);
+  const [pinned, setPinned] = (0, import_react45.useState)(false);
+  const tooltipContent = (0, import_react45.useMemo)(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
   const normalizedPosition = normalizePanoPosition(position);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!hotspotTargetRegistry) {
       return;
     }
@@ -13136,24 +13379,24 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = (0, import_react44.useMemo)(
+  const worldPosition = (0, import_react45.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react44.useMemo)(
+  const surfaceQuaternion3 = (0, import_react45.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = (0, import_react44.useMemo)(() => {
+  const focusGeometry = (0, import_react45.useMemo)(() => {
     const planeGeometry = new import_three25.PlaneGeometry(1, 1);
     const geometry = new import_three25.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
     return geometry;
   }, []);
-  const eventHovered = (0, import_react44.useRef)(false);
-  (0, import_react44.useEffect)(() => {
+  const eventHovered = (0, import_react45.useRef)(false);
+  (0, import_react45.useEffect)(() => {
     if (!visible || !interactive || pointerEvents === "none") eventHovered.current = false;
   }, [visible, interactive, pointerEvents]);
   const acceptsPointer = acceptsHotspotPointerEvents(interactive, pointerEvents);
@@ -13177,7 +13420,7 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  (0, import_react44.useEffect)(
+  (0, import_react45.useEffect)(
     () => () => {
       const dragState = dragStateRef.current;
       dragState?.stopTracking();
@@ -13186,7 +13429,7 @@ function HotspotAnchor({
     },
     []
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!cursorApi) {
       return;
     }
@@ -13208,14 +13451,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  (0, import_react44.useEffect)(
+  (0, import_react45.useEffect)(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  (0, import_react44.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_react45.useEffect)(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -13224,12 +13467,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (acceptsPointer) {
       return;
     }
@@ -13243,7 +13486,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  (0, import_react44.useLayoutEffect)(() => {
+  (0, import_react45.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -13664,12 +13907,12 @@ function HotspotPlane({
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = (0, import_fiber22.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react45.useState)(null);
-  const onLoadRef = (0, import_react45.useRef)(onLoad);
-  const onErrorRef = (0, import_react45.useRef)(onError);
+  const [texture, setTexture] = (0, import_react46.useState)(null);
+  const onLoadRef = (0, import_react46.useRef)(onLoad);
+  const onErrorRef = (0, import_react46.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13707,7 +13950,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react45.useEffect)(
+  (0, import_react46.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -13729,7 +13972,7 @@ function ImageHotspot({
 }
 // src/hotspot/graphic-hotspot.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_three28 = require("three");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
@@ -13920,12 +14163,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react46.useState)(null);
-  const onLoadRef = (0, import_react46.useRef)(onLoad);
-  const onErrorRef = (0, import_react46.useRef)(onError);
+  const [texture, setTexture] = (0, import_react47.useState)(null);
+  const onLoadRef = (0, import_react47.useRef)(onLoad);
+  const onErrorRef = (0, import_react47.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -13964,7 +14207,7 @@ function GraphicHotspot(props) {
 // src/hotspot/sequence-hotspot.tsx
 var import_fiber23 = require("@react-three/fiber");
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_three29 = require("three");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
@@ -13981,12 +14224,12 @@ function useSpriteTexture({
   onLoadProgress
 }) {
   const gl = (0, import_fiber23.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react47.useState)(null);
-  const onErrorRef = (0, import_react47.useRef)(onError);
-  const onLoadProgressRef = (0, import_react47.useRef)(onLoadProgress);
+  const [texture, setTexture] = (0, import_react48.useState)(null);
+  const onErrorRef = (0, import_react48.useRef)(onError);
+  const onLoadProgressRef = (0, import_react48.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14027,7 +14270,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react47.useEffect)(
+  (0, import_react48.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14056,24 +14299,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = (0, import_react47.useState)(0);
-  const elapsedRef = (0, import_react47.useRef)(0);
-  const frameIndexRef = (0, import_react47.useRef)(0);
-  const endedRef = (0, import_react47.useRef)(false);
-  const lastPlaybackStateRef = (0, import_react47.useRef)(null);
-  const onFrameChangeRef = (0, import_react47.useRef)(onFrameChange);
-  const onPlaybackStateChangeRef = (0, import_react47.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react47.useRef)(onEnded);
+  const [frameIndex, setFrameIndex] = (0, import_react48.useState)(0);
+  const elapsedRef = (0, import_react48.useRef)(0);
+  const frameIndexRef = (0, import_react48.useRef)(0);
+  const endedRef = (0, import_react48.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react48.useRef)(null);
+  const onFrameChangeRef = (0, import_react48.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react48.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react48.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14087,13 +14330,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14147,7 +14390,7 @@ function SequenceHotspot({
 // src/hotspot/video-hotspot.tsx
 var import_fiber24 = require("@react-three/fiber");
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_three30 = require("three");
 // src/video/inline-playback.ts
@@ -14210,10 +14453,10 @@ function clampVolume2(volume) {
 }
 function usePosterTexture(id, poster, onError) {
   const gl = (0, import_fiber24.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react48.useState)(null);
-  const onErrorRef = (0, import_react48.useRef)(onError);
+  const [texture, setTexture] = (0, import_react49.useState)(null);
+  const onErrorRef = (0, import_react49.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -14250,7 +14493,7 @@ function usePosterTexture(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react48.useEffect)(
+  (0, import_react49.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14269,14 +14512,14 @@ function useVideoResource({
   src
 }) {
   const gl = (0, import_fiber24.useThree)((state) => state.gl);
-  const [resource, setResource] = (0, import_react48.useState)(null);
-  const onEndedRef = (0, import_react48.useRef)(onEnded);
-  const onErrorRef = (0, import_react48.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react48.useRef)(onPlaybackStateChange);
+  const [resource, setResource] = (0, import_react49.useState)(null);
+  const onEndedRef = (0, import_react49.useRef)(onEnded);
+  const onErrorRef = (0, import_react49.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react49.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -14346,7 +14589,7 @@ function useVideoResource({
       texture.dispose();
     };
   }, [crossOrigin, gl, id, playsInline, poster, src]);
-  (0, import_react48.useLayoutEffect)(() => {
+  (0, import_react49.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14389,11 +14632,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react48.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react48.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react49.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react49.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react48.useLayoutEffect)(() => {
+  (0, import_react49.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14403,7 +14646,7 @@ function VideoHotspot({
     applyInlineVideoPlayback(resource.video, playsInline);
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -14431,7 +14674,7 @@ function VideoHotspot({
 // src/hotspot/audio-hotspot.tsx
 var import_fiber25 = require("@react-three/fiber");
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_three32 = require("three");
 // src/hotspot/audio-spatial.ts
@@ -14543,8 +14786,8 @@ function createSpeakerTexture(state) {
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = (0, import_react49.useState)({ playing: null, stopped: null });
-  (0, import_react49.useEffect)(() => {
+  const [textures, setTextures] = (0, import_react50.useState)({ playing: null, stopped: null });
+  (0, import_react50.useEffect)(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -14561,10 +14804,10 @@ function useSpeakerTextures(enabled) {
 }
 function useIconTexture(icon, enabled, onError, id) {
   const gl = (0, import_fiber25.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react49.useState)(null);
-  const onErrorRef = (0, import_react49.useRef)(onError);
+  const [texture, setTexture] = (0, import_react50.useState)(null);
+  const onErrorRef = (0, import_react50.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -14601,7 +14844,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  (0, import_react49.useEffect)(
+  (0, import_react50.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14621,13 +14864,13 @@ function useAudioHowl({
   src,
   format
 }) {
-  const [howl, setHowl] = (0, import_react49.useState)(null);
-  const playingRef = (0, import_react49.useRef)(playing);
-  const loopRef = (0, import_react49.useRef)(loop ?? false);
-  const onEndedRef = (0, import_react49.useRef)(onEnded);
-  const onErrorRef = (0, import_react49.useRef)(onError);
-  const onPlaybackErrorRef = (0, import_react49.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react49.useRef)(onPlaybackStateChange);
+  const [howl, setHowl] = (0, import_react50.useState)(null);
+  const playingRef = (0, import_react50.useRef)(playing);
+  const loopRef = (0, import_react50.useRef)(loop ?? false);
+  const onEndedRef = (0, import_react50.useRef)(onEnded);
+  const onErrorRef = (0, import_react50.useRef)(onError);
+  const onPlaybackErrorRef = (0, import_react50.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react50.useRef)(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -14636,7 +14879,7 @@ function useAudioHowl({
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
   const formatsKey = sourceList(format).join("\0");
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -14674,7 +14917,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey, formatsKey]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -14720,15 +14963,15 @@ function AudioHotspot({
   const stoppedIconTexture = useIconTexture(icon, marker, onError, id);
   const playingIconTexture = useIconTexture(playingIcon, marker, onError, id);
   const markerTexture = playing ? playingIconTexture ?? stoppedIconTexture ?? speakerTextures.playing : stoppedIconTexture ?? speakerTextures.stopped;
-  const playingRef = (0, import_react49.useRef)(playing);
+  const playingRef = (0, import_react50.useRef)(playing);
   playingRef.current = playing;
-  const mutedRef = (0, import_react49.useRef)(muted);
-  const volumeRef = (0, import_react49.useRef)(volume);
-  const rangeRef = (0, import_react49.useRef)(range);
+  const mutedRef = (0, import_react50.useRef)(muted);
+  const volumeRef = (0, import_react50.useRef)(volume);
+  const rangeRef = (0, import_react50.useRef)(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!howl) {
       return;
     }
@@ -14738,7 +14981,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -14773,7 +15016,7 @@ function AudioHotspot({
 }
 // src/hotspot/text-hotspot.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_fiber26 = require("@react-three/fiber");
 var import_three33 = require("three");
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -15072,7 +15315,7 @@ function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
       Math.max(layout.canvasWidth, layout.canvasHeight)
     );
   };
-  const [rasterLong, setRasterLong] = (0, import_react50.useState)(measure);
+  const [rasterLong, setRasterLong] = (0, import_react51.useState)(measure);
   const measured = measure();
   if (measured !== rasterLong) {
     setRasterLong(measured);
@@ -15085,12 +15328,12 @@ 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] = (0, import_react50.useState)(null);
-  const onLoadRef = (0, import_react50.useRef)(onLoad);
-  const onErrorRef = (0, import_react50.useRef)(onError);
+  const [texture, setTexture] = (0, import_react51.useState)(null);
+  const onLoadRef = (0, import_react51.useRef)(onLoad);
+  const onErrorRef = (0, import_react51.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -15316,7 +15559,7 @@ function IframeHotspot({
 }
 // src/hotspot/polygon-hotspot.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_three35 = require("three");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
@@ -15574,24 +15817,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react51.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = (0, import_react52.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react51.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react51.useMemo)(
+  const center = (0, import_react52.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react52.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = (0, import_react51.useMemo)(
+  const strokePoints = (0, import_react52.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react51.useRef)(null);
+  const startVerticesRef = (0, import_react52.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react51.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react52.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -15671,7 +15914,7 @@ function PolygonHotspot({
 }
 // src/hotspot/polyline-hotspot.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_three36 = require("three");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
@@ -15790,16 +16033,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react52.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = (0, import_react53.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react52.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = (0, import_react52.useMemo)(
+  const center = (0, import_react53.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = (0, import_react53.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react52.useRef)(null);
-  (0, import_react52.useEffect)(() => {
+  const startVerticesRef = (0, import_react53.useRef)(null);
+  (0, import_react53.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -15992,7 +16235,7 @@ function ProjectHotspot({
   renderHotspot,
   execute
 }) {
-  const [playing, setPlaying] = (0, import_react53.useState)(
+  const [playing, setPlaying] = (0, import_react54.useState)(
     "playing" in hotspot ? hotspot.playing ?? false : false
   );
   const togglePlayback = () => setPlaying((value) => !value);
@@ -16048,21 +16291,21 @@ function ProjectScenes({
   renderHotspot,
   ...options
 }) {
-  const controls = (0, import_react53.useContext)(PanoramaViewContext);
+  const controls = (0, import_react54.useContext)(PanoramaViewContext);
   if (!controls)
     throw new Error("<ProjectScenes> must be rendered inside <PanoViewer>.");
-  const [selection, setSelection] = (0, import_react53.useState)({
+  const [selection, setSelection] = (0, import_react54.useState)({
     project,
     id: project.initialSceneId
   });
   if (selection.project !== project)
     setSelection({ project, id: project.initialSceneId });
   const currentId = activeSceneId ?? (selection.project === project ? selection.id : project.initialSceneId);
-  const entries = (0, import_react53.useMemo)(
+  const entries = (0, import_react54.useMemo)(
     () => new Map(project.scenes.map((entry) => [entry.scene.id, entry])),
     [project]
   );
-  const scenes = (0, import_react53.useMemo)(
+  const scenes = (0, import_react54.useMemo)(
     () => project.scenes.map((entry) => entry.scene),
     [project]
   );
@@ -16115,7 +16358,7 @@ function ProjectScenes({
 }
 // src/background-audio.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var DEFAULT_FADE_MS = 400;
 function resolveFadeMs(value) {
   if (!Number.isFinite(value)) {
@@ -16157,31 +16400,31 @@ function BackgroundAudio({
   onEnded,
   onError
 }) {
-  const controlsRef = (0, import_react54.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react55.useContext)(PanoramaViewContext);
   if (!controlsRef) {
     throw new Error("<BackgroundAudio> must be rendered inside <PanoViewer>.");
   }
   const isControlled = controlledPlaying !== void 0;
-  const [internalPlaying, setInternalPlaying] = (0, import_react54.useState)(defaultPlaying);
+  const [internalPlaying, setInternalPlaying] = (0, import_react55.useState)(defaultPlaying);
   const playing = isControlled ? controlledPlaying : internalPlaying;
   const urls = resolveBackgroundAudioUrls(src, sources, sceneId);
   usePanoMediaActivationIntent(playing && urls.length > 0);
   const trackKey = urls.join("\0");
-  const currentRef = (0, import_react54.useRef)(null);
-  const outgoingRef = (0, import_react54.useRef)([]);
-  const fadingInRef = (0, import_react54.useRef)(false);
-  const isFirstTrackRef = (0, import_react54.useRef)(true);
-  const playingRef = (0, import_react54.useRef)(playing);
-  const loopRef = (0, import_react54.useRef)(loop);
-  const mutedRef = (0, import_react54.useRef)(muted);
-  const volumeRef = (0, import_react54.useRef)(volume);
-  const mutedPropRef = (0, import_react54.useRef)(muted);
-  const volumePropRef = (0, import_react54.useRef)(volume);
-  const fadeMsRef = (0, import_react54.useRef)(resolveFadeMs(fadeMs));
-  const onPlaybackStateChangeRef = (0, import_react54.useRef)(onPlaybackStateChange);
-  const onPlaybackErrorRef = (0, import_react54.useRef)(onPlaybackError);
-  const onEndedRef = (0, import_react54.useRef)(onEnded);
-  const onErrorRef = (0, import_react54.useRef)(onError);
+  const currentRef = (0, import_react55.useRef)(null);
+  const outgoingRef = (0, import_react55.useRef)([]);
+  const fadingInRef = (0, import_react55.useRef)(false);
+  const isFirstTrackRef = (0, import_react55.useRef)(true);
+  const playingRef = (0, import_react55.useRef)(playing);
+  const loopRef = (0, import_react55.useRef)(loop);
+  const mutedRef = (0, import_react55.useRef)(muted);
+  const volumeRef = (0, import_react55.useRef)(volume);
+  const mutedPropRef = (0, import_react55.useRef)(muted);
+  const volumePropRef = (0, import_react55.useRef)(volume);
+  const fadeMsRef = (0, import_react55.useRef)(resolveFadeMs(fadeMs));
+  const onPlaybackStateChangeRef = (0, import_react55.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react55.useRef)(onPlaybackError);
+  const onEndedRef = (0, import_react55.useRef)(onEnded);
+  const onErrorRef = (0, import_react55.useRef)(onError);
   playingRef.current = playing;
   loopRef.current = loop;
   fadeMsRef.current = resolveFadeMs(fadeMs);
@@ -16197,7 +16440,7 @@ function BackgroundAudio({
   onPlaybackErrorRef.current = onPlaybackError;
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
-  const snapshotRef = (0, import_react54.useRef)({
+  const snapshotRef = (0, import_react55.useRef)({
     ready: false,
     playing: false,
     blocked: false,
@@ -16205,7 +16448,7 @@ function BackgroundAudio({
     muted,
     volume
   });
-  const snapshotListenersRef = (0, import_react54.useRef)(/* @__PURE__ */ new Set());
+  const snapshotListenersRef = (0, import_react55.useRef)(/* @__PURE__ */ new Set());
   const notifySnapshot = (patch) => {
     const prev = snapshotRef.current;
     snapshotRef.current = { ...prev, ...patch };
@@ -16213,9 +16456,9 @@ function BackgroundAudio({
       listener();
     }
   };
-  const isControlledRef = (0, import_react54.useRef)(isControlled);
+  const isControlledRef = (0, import_react55.useRef)(isControlled);
   isControlledRef.current = isControlled;
-  const controller = (0, import_react54.useMemo)(
+  const controller = (0, import_react55.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         snapshotListenersRef.current.add(onStoreChange);
@@ -16273,8 +16516,8 @@ function BackgroundAudio({
     }),
     []
   );
-  const bgmHost = (0, import_react54.useContext)(BackgroundAudioHostContext);
-  (0, import_react54.useEffect)(() => {
+  const bgmHost = (0, import_react55.useContext)(BackgroundAudioHostContext);
+  (0, import_react55.useEffect)(() => {
     if (!bgmHost) {
       return;
     }
@@ -16287,7 +16530,7 @@ function BackgroundAudio({
       }
     };
   }, [bgmHost, controller]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     return () => {
       fadingInRef.current = false;
       isFirstTrackRef.current = true;
@@ -16299,7 +16542,7 @@ function BackgroundAudio({
       outgoingRef.current = [];
     };
   }, []);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     const previous = currentRef.current;
     if (previous?.key === trackKey && previous.crossOrigin === crossOrigin) {
       return;
@@ -16402,7 +16645,7 @@ function BackgroundAudio({
       retire(previous);
     }
   }, [crossOrigin, trackKey]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     const howl = currentRef.current?.handle.howl;
     if (!howl) {
       return;
@@ -16422,7 +16665,7 @@ function BackgroundAudio({
       howl.play();
     }
   }, [playing, trackKey]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     const slot = currentRef.current;
     if (!slot) {
       return;
@@ -16437,7 +16680,7 @@ function BackgroundAudio({
       volume: clampAudioVolume(volumeRef.current)
     });
   }, [loop, muted, trackKey, volume]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (!pauseWhenHidden) {
       return;
     }
@@ -16463,7 +16706,7 @@ function BackgroundAudio({
 }
 // src/pano-filter/pano-filter.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 function PanoFilter({
   preset = "none",
   intensity,
@@ -16471,11 +16714,11 @@ function PanoFilter({
   colorMatrix,
   colorMatrixScope
 }) {
-  const host = (0, import_react55.useContext)(PanoFilterHostContext);
+  const host = (0, import_react56.useContext)(PanoFilterHostContext);
   if (!host) {
     throw new Error("<PanoFilter> must be rendered inside <PanoViewer>.");
   }
-  const snapshot = (0, import_react55.useMemo)(
+  const snapshot = (0, import_react56.useMemo)(
     () => resolvePanoFilterSnapshot({
       preset,
       intensity,
@@ -16485,13 +16728,13 @@ function PanoFilter({
     }),
     [enabled, intensity, preset, colorMatrix, colorMatrixScope]
   );
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     claimPanoFilter(host);
     return () => {
       releasePanoFilter(host);
     };
   }, [host]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     setPanoFilterSnapshot(host, snapshot);
   }, [host, snapshot]);
   return null;
@@ -16499,7 +16742,7 @@ function PanoFilter({
 // src/gyro.tsx
 var import_fiber27 = require("@react-three/fiber");
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_three37 = require("three");
 var deviceOrientationPermissionState = "unknown";
 function isMobileDevice() {
@@ -16517,7 +16760,7 @@ function resolveFriction(value) {
 function resolveSoftstart(value) {
   return Math.max(finiteOr(value, 0.5), 0);
 }
-var Gyro = (0, import_react56.forwardRef)(function Gyro2({
+var Gyro = (0, import_react57.forwardRef)(function Gyro2({
   enabled = false,
   camroll = true,
   absolute = false,
@@ -16532,35 +16775,35 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
   onDisable,
   onDenied
 }, ref) {
-  const controlsRef = (0, import_react56.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react56.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react57.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react57.useContext)(PanoEventBusContext);
   const { gl } = (0, import_fiber27.useThree)();
-  const [internallyDisabled, setInternallyDisabled] = (0, import_react56.useState)(false);
-  const [available, setAvailableState] = (0, import_react56.useState)(false);
-  const availableRef = (0, import_react56.useRef)(false);
-  const availabilityReportedRef = (0, import_react56.useRef)(null);
-  const activeRef = (0, import_react56.useRef)(false);
-  const permissionRef = (0, import_react56.useRef)(deviceOrientationPermissionState);
-  const absoluteEventSourceRef = (0, import_react56.useRef)(null);
-  const rawQuaternionRef = (0, import_react56.useRef)(new import_three37.Quaternion());
-  const hasRawQuaternionRef = (0, import_react56.useRef)(false);
-  const calibrationRef = (0, import_react56.useRef)(new import_three37.Quaternion());
-  const hasCalibrationRef = (0, import_react56.useRef)(false);
-  const calibratedQuaternionRef = (0, import_react56.useRef)(new import_three37.Quaternion());
-  const absoluteOffsetRef = (0, import_react56.useRef)({ yaw: 0, pitch: 0 });
-  const screenAngleRef = (0, import_react56.useRef)(getScreenOrientationAngle());
-  const startPoseRef = (0, import_react56.useRef)(null);
-  const enabledAtRef = (0, import_react56.useRef)(0);
-  const filteredPoseRef = (0, import_react56.useRef)(null);
-  const lastAppliedPoseRef = (0, import_react56.useRef)(null);
-  const lastSamplePoseRef = (0, import_react56.useRef)(null);
-  const lastSampleAtRef = (0, import_react56.useRef)(null);
-  const previousYawRef = (0, import_react56.useRef)(void 0);
-  const absoluteRef = (0, import_react56.useRef)(absolute);
-  const northRef = (0, import_react56.useRef)(north);
+  const [internallyDisabled, setInternallyDisabled] = (0, import_react57.useState)(false);
+  const [available, setAvailableState] = (0, import_react57.useState)(false);
+  const availableRef = (0, import_react57.useRef)(false);
+  const availabilityReportedRef = (0, import_react57.useRef)(null);
+  const activeRef = (0, import_react57.useRef)(false);
+  const permissionRef = (0, import_react57.useRef)(deviceOrientationPermissionState);
+  const absoluteEventSourceRef = (0, import_react57.useRef)(null);
+  const rawQuaternionRef = (0, import_react57.useRef)(new import_three37.Quaternion());
+  const hasRawQuaternionRef = (0, import_react57.useRef)(false);
+  const calibrationRef = (0, import_react57.useRef)(new import_three37.Quaternion());
+  const hasCalibrationRef = (0, import_react57.useRef)(false);
+  const calibratedQuaternionRef = (0, import_react57.useRef)(new import_three37.Quaternion());
+  const absoluteOffsetRef = (0, import_react57.useRef)({ yaw: 0, pitch: 0 });
+  const screenAngleRef = (0, import_react57.useRef)(getScreenOrientationAngle());
+  const startPoseRef = (0, import_react57.useRef)(null);
+  const enabledAtRef = (0, import_react57.useRef)(0);
+  const filteredPoseRef = (0, import_react57.useRef)(null);
+  const lastAppliedPoseRef = (0, import_react57.useRef)(null);
+  const lastSamplePoseRef = (0, import_react57.useRef)(null);
+  const lastSampleAtRef = (0, import_react57.useRef)(null);
+  const previousYawRef = (0, import_react57.useRef)(void 0);
+  const absoluteRef = (0, import_react57.useRef)(absolute);
+  const northRef = (0, import_react57.useRef)(north);
   absoluteRef.current = absolute;
   northRef.current = north;
-  const callbacksRef = (0, import_react56.useRef)({
+  const callbacksRef = (0, import_react57.useRef)({
     onAvailable,
     onUnavailable,
     onEnable,
@@ -16577,7 +16820,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
   if (!controlsRef) {
     throw new Error("<Gyro> must be rendered inside <PanoViewer>.");
   }
-  const emit = (0, import_react56.useCallback)(
+  const emit = (0, import_react57.useCallback)(
     (type) => {
       eventBus?.emit(type, void 0);
       switch (type) {
@@ -16604,7 +16847,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
     },
     [eventBus]
   );
-  const setAvailable = (0, import_react56.useCallback)(
+  const setAvailable = (0, import_react57.useCallback)(
     (nextAvailable) => {
       availableRef.current = nextAvailable;
       setAvailableState(nextAvailable);
@@ -16616,7 +16859,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
     },
     [emit]
   );
-  const requestPermission = (0, import_react56.useCallback)(async () => {
+  const requestPermission = (0, import_react57.useCallback)(async () => {
     if (!availableRef.current) {
       return false;
     }
@@ -16649,7 +16892,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
     emit("gyrodenied");
     return false;
   }, [emit, setAvailable]);
-  const deactivate = (0, import_react56.useCallback)(() => {
+  const deactivate = (0, import_react57.useCallback)(() => {
     if (activeRef.current) {
       activeRef.current = false;
       controlsRef.current?.setGyroActive(false);
@@ -16664,7 +16907,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
     lastSampleAtRef.current = null;
     previousYawRef.current = void 0;
   }, [controlsRef, emit]);
-  const anchorToView = (0, import_react56.useCallback)(
+  const anchorToView = (0, import_react57.useCallback)(
     (yaw, pitch) => {
       if (!hasRawQuaternionRef.current) {
         return;
@@ -16694,7 +16937,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
     },
     []
   );
-  const resetSensor = (0, import_react56.useCallback)(
+  const resetSensor = (0, import_react57.useCallback)(
     (yaw, pitch) => {
       if (!hasRawQuaternionRef.current) {
         return;
@@ -16715,7 +16958,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
     },
     [anchorToView, controlsRef]
   );
-  (0, import_react56.useImperativeHandle)(
+  (0, import_react57.useImperativeHandle)(
     ref,
     () => ({
       resetSensor,
@@ -16725,19 +16968,19 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
     }),
     [requestPermission, resetSensor]
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!enabled) {
       setInternallyDisabled(false);
     }
   }, [enabled]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const supported = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined" && (desktopSupport || isMobileDevice());
     setAvailable(supported);
   }, [desktopSupport, setAvailable]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     controlsRef.current?.setGyroTouchMode(touchMode);
   }, [controlsRef, touchMode]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!enabled || internallyDisabled || touchMode !== "disablegyro") {
       return;
     }
@@ -16751,7 +16994,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
       gl.domElement.removeEventListener("pointerdown", onPointerDown);
     };
   }, [enabled, gl, internallyDisabled, touchMode]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!enabled || internallyDisabled || !available) {
       deactivate();
       return;
@@ -16974,7 +17217,7 @@ var Gyro = (0, import_react56.forwardRef)(function Gyro2({
 // src/webvr/webvr.tsx
 var import_fiber30 = require("@react-three/fiber");
-var import_react61 = require("react");
+var import_react62 = require("react");
 // src/webvr/detect.ts
 function isMobileVRDevice() {
@@ -16995,6 +17238,184 @@ async function detectWebVRCapabilities() {
   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 fetchDpdbDocument(url) {
+  try {
+    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 {
+    return null;
+  }
+}
+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
 var PRESENTATION_PROPERTIES = [
   "background",
@@ -17152,7 +17573,7 @@ function subscribeWebVRPresentationExit(element, onExit) {
 // src/webvr/reticle.tsx
 var import_fiber28 = require("@react-three/fiber");
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_three38 = require("three");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var CENTER_NDC = new import_three38.Vector2(0, 0);
@@ -17240,13 +17661,13 @@ function WebVRReticle({
   scale = RETICLE_SCALE,
   visible
 }) {
-  const groupRef = (0, import_react57.useRef)(null);
-  const ringMeshRef = (0, import_react57.useRef)(null);
-  const directionRef = (0, import_react57.useRef)(new import_three38.Vector3());
-  const raycasterRef = (0, import_react57.useRef)(new import_three38.Raycaster());
-  const hoveredRef = (0, import_react57.useRef)(null);
-  const dwellRef = (0, import_react57.useRef)(0);
-  const clickedRef = (0, import_react57.useRef)(false);
+  const groupRef = (0, import_react58.useRef)(null);
+  const ringMeshRef = (0, import_react58.useRef)(null);
+  const directionRef = (0, import_react58.useRef)(new import_three38.Vector3());
+  const raycasterRef = (0, import_react58.useRef)(new import_three38.Raycaster());
+  const hoveredRef = (0, import_react58.useRef)(null);
+  const dwellRef = (0, import_react58.useRef)(0);
+  const clickedRef = (0, import_react58.useRef)(false);
   const { camera, gl, scene } = (0, import_fiber28.useThree)();
   (0, import_fiber28.useFrame)((_, deltaSeconds) => {
     const group = groupRef.current;
@@ -17409,9 +17830,43 @@ function WebVRReticle({
 // src/webvr/stereo.tsx
 var import_fiber29 = require("@react-three/fiber");
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_three39 = require("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) {
@@ -17427,19 +17882,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
   };
 }
@@ -17456,12 +17924,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 {
@@ -17481,6 +17950,7 @@ function createDistortionResources() {
     fragmentShader,
     uniforms: {
       distortion: { value: new import_three39.Vector2() },
+      lensCenter: { value: new import_three39.Vector2() },
       sourceTexture: { value: target.texture }
     },
     vertexShader
@@ -17497,12 +17967,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;
@@ -17521,35 +18006,41 @@ 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 } = (0, import_fiber29.useThree)();
-  const runtime = (0, import_react58.useContext)(WebVRRuntimeContext);
-  const fallbackStereoRef = (0, import_react58.useRef)(null);
+  const runtime = (0, import_react59.useContext)(WebVRRuntimeContext);
+  const fallbackStereoRef = (0, import_react59.useRef)(null);
   if (!fallbackStereoRef.current) {
     fallbackStereoRef.current = new import_three39.StereoCamera();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
-  const stereoRef = (0, import_react58.useRef)(stereo);
+  const stereoRef = (0, import_react59.useRef)(stereo);
   stereoRef.current = stereo;
-  const resources = (0, import_react58.useMemo)(createDistortionResources, []);
-  const sizeRef = (0, import_react58.useRef)(new import_three39.Vector2());
-  const viewportRef = (0, import_react58.useRef)(new import_three39.Vector4());
-  const scissorRef = (0, import_react58.useRef)(new import_three39.Vector4());
-  const originalFovRef = (0, import_react58.useRef)(null);
-  const stereoActiveRef = (0, import_react58.useRef)(false);
-  const profileRef = (0, import_react58.useRef)(profile);
-  const screensizeRef = (0, import_react58.useRef)(screensize);
+  const resources = (0, import_react59.useMemo)(createDistortionResources, []);
+  const sizeRef = (0, import_react59.useRef)(new import_three39.Vector2());
+  const viewportRef = (0, import_react59.useRef)(new import_three39.Vector4());
+  const scissorRef = (0, import_react59.useRef)(new import_three39.Vector4());
+  const originalFovRef = (0, import_react59.useRef)(null);
+  const stereoActiveRef = (0, import_react59.useRef)(false);
+  const profileRef = (0, import_react59.useRef)(profile);
+  const screensizeRef = (0, import_react59.useRef)(screensize);
+  const oversamplingRef = (0, import_react59.useRef)(clampWebVROversampling(oversampling));
   profileRef.current = profile;
   screensizeRef.current = screensize;
-  (0, import_react58.useEffect)(
+  oversamplingRef.current = clampWebVROversampling(oversampling);
+  (0, import_react59.useEffect)(
     () => () => {
       resources.geometry.dispose();
       resources.material.dispose();
@@ -17557,7 +18048,7 @@ function WebVRStereoRenderer({
     },
     [resources]
   );
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
       if (!stereoActiveRef.current || !(cameraToRender instanceof import_three39.PerspectiveCamera)) {
@@ -17569,11 +18060,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
       );
@@ -17585,7 +18077,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(
@@ -17602,6 +18094,7 @@ function WebVRStereoRenderer({
             currentProfile.k1,
             currentProfile.k2
           );
+          resources.material.uniforms.lensCenter?.value.set(center.x, center.y);
           originalRender(resources.scene, resources.camera);
           return;
         }
@@ -17610,8 +18103,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);
@@ -17622,7 +18115,7 @@ function WebVRStereoRenderer({
       gl.render = originalRender;
     };
   }, [gl, resources]);
-  (0, import_react58.useEffect)(
+  (0, import_react59.useEffect)(
     () => () => {
       if (runtime) {
         runtime.stereoView.active = false;
@@ -17642,6 +18135,7 @@ function WebVRStereoRenderer({
         camera,
         profileRef.current,
         screensizeRef.current,
+        oversamplingRef.current,
         sizeRef.current,
         gl
       );
@@ -17657,7 +18151,7 @@ function WebVRStereoRenderer({
 }
 // src/webvr/pointerlock.ts
-var import_react59 = require("react");
+var import_react60 = require("react");
 var POINTER_LOCK_CURSOR_ID = "webvr:pointerlock";
 async function requestWebVRPointerLock(element) {
   if (typeof document === "undefined") {
@@ -17690,11 +18184,11 @@ function exitWebVRPointerLock(element) {
 }
 function useWebVRPointerLock(enabled, element) {
   const cursor = usePanoCursor();
-  const cursorRef = (0, import_react59.useRef)(cursor);
-  const enabledRef = (0, import_react59.useRef)(enabled);
+  const cursorRef = (0, import_react60.useRef)(cursor);
+  const enabledRef = (0, import_react60.useRef)(enabled);
   cursorRef.current = cursor;
   enabledRef.current = enabled;
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (!enabled || !element) {
       return;
     }
@@ -17724,7 +18218,7 @@ function useWebVRPointerLock(enabled, element) {
 }
 // src/webvr/wakelock.ts
-var import_react60 = require("react");
+var import_react61 = require("react");
 // src/webvr/wakelock-fallback.ts
 var WEBVR_WAKELOCK_FALLBACK_VIDEO_BASE64 = "AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAbBbW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAAD4AAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAxt0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAAAAAAAAAggAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAABAAAAAQAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAIIAAAEAAABAAAAAAKTbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAyAAAAGgBVxAAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAACPm1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAf5zdGJsAAAAvnN0c2QAAAAAAAAAAQAAAK5hdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAABAAEABIAAAASAAAAAAAAAABFUxhdmM2Mi4xMS4xMDAgbGlieDI2NAAAAAAAAAAAAAAAGP//AAAANGF2Y0MBZAAK/+EAF2dkAAqs2V7ARAAAAwAEAAADAMg8SJZYAQAGaOvjyyLA/fj4AAAAABBwYXNwAAAAAQAAAAEAAAAUYnRydAAAAAAAADQ5AAAAAAAAABhzdHRzAAAAAAAAAAEAAAANAAACAAAAABRzdHNzAAAAAAAAAAEAAAABAAAAeGN0dHMAAAAAAAAADQAAAAEAAAQAAAAAAQAACgAAAAABAAAEAAAAAAEAAAAAAAAAAQAAAgAAAAABAAAKAAAAAAEAAAQAAAAAAQAAAAAAAAABAAACAAAAAAEAAAoAAAAAAQAABAAAAAABAAAAAAAAAAEAAAIAAAAAKHN0c2MAAAAAAAAAAgAAAAEAAAADAAAAAQAAAAUAAAABAAAAAQAAAEhzdHN6AAAAAAAAAAAAAAANAAACxQAAAAwAAAAMAAAADAAAAAwAAAASAAAADgAAAAwAAAAMAAAAEgAAAA4AAAAMAAAADAAAACRzdGNvAAAAAAAAAAUAAAcGAAAJ5wAAChUAAAo/AAAKbwAAAtF0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAACAAAAAAAAD4AAAAAAAAAAAAAAAAEBAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAA+AAAAEAAABAAAAAAJJbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAfQAAAgABVxAAAAAAALWhkbHIAAAAAAAAAAHNvdW4AAAAAAAAAAAAAAABTb3VuZEhhbmRsZXIAAAAB9G1pbmYAAAAQc21oZAAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABuHN0YmwAAAB+c3RzZAAAAAAAAAABAAAAbm1wNGEAAAAAAAAAAQAAAAAAAAAAAAEAEAAAAAAfQAAAAAAANmVzZHMAAAAAA4CAgCUAAgAEgICAF0AVAAAAAAAfQAAAARsFgICABRWIVuUABoCAgAECAAAAFGJ0cnQAAAAAAAAfQAAAARsAAAAYc3R0cwAAAAAAAAABAAAAIAAABAAAAAAoc3RzYwAAAAAAAAACAAAAAQAAAAEAAAABAAAABgAAABsAAAABAAAAlHN0c3oAAAAAAAAAAAAAACAAAAAVAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAChzdGNvAAAAAAAAAAYAAAbxAAAJ4wAAChEAAAo7AAAKawAACnsAAAAac2dwZAEAAAByb2xsAAAAAgAAAAH//wAAABxzYmdwAAAAAHJvbGwAAAABAAAAIAAAAAEAAABhdWR0YQAAAFltZXRhAAAAAAAAACFoZGxyAAAAAAAAAABtZGlyYXBwbAAAAAAAAAAAAAAAACxpbHN0AAAAJKl0b28AAAAcZGF0YQAAAAEAAAAATGF2ZjYyLjMuMTAwAAAACGZyZWUAAAP+bWRhdN4CAExhdmM2Mi4xMS4xMDAAAjBADgAAAq4GBf//qtxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxNjUgcjMyMjIgYjM1NjA1YSAtIEguMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMjUgLSBodHRwOi8vd3d3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0xIHJlZj0zIGRlYmxvY2s9MTowOjAgYW5hbHlzZT0weDM6MHgxMTMgbWU9aGV4IHN1Ym1lPTcgcHN5PTEgcHN5X3JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbGlzPTEgOHg4ZGN0PTEgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV9xcF9vZmZzZXQ9LTIgdGhyZWFkcz0xIGxvb2thaGVhZF90aHJlYWRzPTEgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MyBiX3B5cmFtaWQ9MiBiX2FkYXB0PTEgYl9iaWFzPTAgZGlyZWN0PTEgd2VpZ2h0Yj0xIG9wZW5fZ29wPTAgd2VpZ2h0cD0yIGtleWludD0yNTAga2V5aW50X21pbj0yNSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmNfbG9va2FoZWFkPTQwIHJjPWNyZiBtYnRyZWU9MSBjcmY9MjMuMCBxY29tcD0wLjYwIHFwbWluPTAgcXBtYXg9NjkgcXBzdGVwPTQgaXBfcmF0aW89MS40MCBhcT0xOjEuMDAAgAAAAA9liIQAO//+906/AptUwmEAAAAIQZokbEN//uAAAAAIQZ5CeIX/wYEBGCAHAAAACAGeYXRCv8SAAAAACAGeY2pCv8SBAAAADkGaaEmoQWiZTAhn//7hARggBwAAAApBnoZFESwv/8GBAAAACAGepXRCv8SBAAAACAGep2pCv8SAARggBwAAAA5BmqxJqEFsmUwIV//+wAAAAApBnspFFSwv/8GBAAAACAGe6XRCv8SAARggBwAAAAgBnutqQr/EgAEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBw==";
@@ -17853,7 +18347,7 @@ function releaseWebVRWakeLock() {
   stopFallbackVideo();
 }
 function useWebVRWakeLock(enabled) {
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -17871,6 +18365,42 @@ 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
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function initializeSettings(screensize, profile) {
@@ -17883,13 +18413,21 @@ function initializeSettings(screensize, profile) {
 function getViewerElement(canvas) {
   return canvas.closest("[data-pano-viewer]") ?? canvas.parentElement ?? canvas;
 }
-var WebVR = (0, import_react61.forwardRef)(function WebVR2({
+var WebVR = (0, import_react62.forwardRef)(function WebVR2({
   chrome = true,
   mobileVr = true,
   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,
@@ -17901,24 +18439,40 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
   onDenied,
   onUnknownDevice
 }, ref) {
-  const runtime = (0, import_react61.useContext)(WebVRRuntimeContext);
-  const controlsRef = (0, import_react61.useContext)(PanoramaViewContext);
-  const eventBus = (0, import_react61.useContext)(PanoEventBusContext);
+  const runtime = (0, import_react62.useContext)(WebVRRuntimeContext);
+  const controlsRef = (0, import_react62.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react62.useContext)(PanoEventBusContext);
   const gl = (0, import_fiber30.useThree)((state) => state.gl);
-  const gyroRef = (0, import_react61.useRef)(null);
-  const capabilitiesRef = (0, import_react61.useRef)({
+  const gyroRef = (0, import_react62.useRef)(null);
+  const capabilitiesRef = (0, import_react62.useRef)({
     mobile: false,
     sensor: false,
     webxr: false
   });
-  const availableRef = (0, import_react61.useRef)(false);
-  const modeRef = (0, import_react61.useRef)(null);
-  const webXRSessionRef = (0, import_react61.useRef)(null);
-  const [mode, setMode] = (0, import_react61.useState)(null);
-  const [settings, setSettings] = (0, import_react61.useState)(
+  const availableRef = (0, import_react62.useRef)(false);
+  const modeRef = (0, import_react62.useRef)(null);
+  const webXRSessionRef = (0, import_react62.useRef)(null);
+  const dpdbRequestIdRef = (0, import_react62.useRef)(0);
+  const databaseUrlRef = (0, import_react62.useRef)(databaseUrl);
+  databaseUrlRef.current = databaseUrl;
+  const oversamplingRef = (0, import_react62.useRef)(clampWebVROversampling(oversampling));
+  oversamplingRef.current = clampWebVROversampling(oversampling);
+  const foveationRef = (0, import_react62.useRef)(clampWebVRFoveation(foveation));
+  foveationRef.current = clampWebVRFoveation(foveation);
+  const frameRateRef = (0, import_react62.useRef)(frameRate);
+  frameRateRef.current = frameRate;
+  const screensizePropRef = (0, import_react62.useRef)(screensize);
+  screensizePropRef.current = screensize;
+  const profilePropRef = (0, import_react62.useRef)(profile);
+  profilePropRef.current = profile;
+  const [mode, setMode] = (0, import_react62.useState)(null);
+  const [settings, setSettings] = (0, import_react62.useState)(
     () => initializeSettings(screensize, profile)
   );
-  const callbacksRef = (0, import_react61.useRef)({
+  const [detectedScreensize, setDetectedScreensize] = (0, import_react62.useState)(
+    null
+  );
+  const callbacksRef = (0, import_react62.useRef)({
     onAvailable,
     onDenied,
     onEnterVR,
@@ -17938,22 +18492,48 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
     throw new Error("<WebVR> must be rendered inside <PanoViewer>.");
   }
   const { host, xrStore } = runtime;
-  const resolvedProfile = (0, import_react61.useMemo)(
+  const resolvedProfile = (0, import_react62.useMemo)(
     () => resolveWebVRProfile(profile, settings.profileId),
     [profile, settings.profileId]
   );
-  const reportDenied = (0, import_react61.useCallback)(
+  const effectiveScreensize = settings.screensize === "auto" ? detectedScreensize ?? "auto" : settings.screensize;
+  const resolvedOversampling = clampWebVROversampling(oversampling);
+  const reportDenied = (0, import_react62.useCallback)(
     (error) => {
       eventBus.emit("vrdenied", { error });
       callbacksRef.current.onDenied?.(error);
     },
     [eventBus]
   );
-  const reportUnknownDevice = (0, import_react61.useCallback)(() => {
+  const reportUnknownDevice = (0, import_react62.useCallback)(() => {
     eventBus.emit("vrunknowndevice", void 0);
     callbacksRef.current.onUnknownDevice?.();
   }, [eventBus]);
-  const activate = (0, import_react61.useCallback)(
+  const clearDetectedScreensize = (0, import_react62.useCallback)(() => {
+    dpdbRequestIdRef.current += 1;
+    setDetectedScreensize(null);
+    updateWebVRHost(host, { detectedScreensize: null });
+  }, [host]);
+  const resolveAutoScreensize = (0, import_react62.useCallback)(() => {
+    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 = (0, import_react62.useCallback)(
     (nextMode) => {
       if (modeRef.current === nextMode) {
         return;
@@ -17968,7 +18548,7 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
     },
     [controlsRef, eventBus]
   );
-  const deactivate = (0, import_react61.useCallback)(
+  const deactivate = (0, import_react62.useCallback)(
     (expectedMode) => {
       const previousMode = modeRef.current;
       if (!previousMode || expectedMode && previousMode !== expectedMode) {
@@ -17976,6 +18556,7 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
       }
       modeRef.current = null;
       setMode(null);
+      clearDetectedScreensize();
       if (previousMode === "fake") {
         controlsRef.current?.setGyroActive(false);
       }
@@ -17983,24 +18564,42 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
       eventBus.emit("vrexit", { mode: previousMode });
       callbacksRef.current.onExitVR?.(previousMode);
     },
-    [controlsRef, eventBus, gl.domElement]
+    [clearDetectedScreensize, controlsRef, eventBus, gl.domElement]
   );
-  const requestPermission = (0, import_react61.useCallback)(async () => {
+  const requestPermission = (0, import_react62.useCallback)(async () => {
     return await gyroRef.current?.requestPermission() ?? false;
   }, []);
-  const enterVR = (0, import_react61.useCallback)(async () => {
+  const applyWebXRQuality = (0, import_react62.useCallback)(() => {
+    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 = (0, import_react62.useCallback)(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",
           () => {
@@ -18030,10 +18629,10 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
         reportDenied();
         return false;
       }
+      activate("mobilevr");
       if (settings.screensize === "auto") {
-        reportUnknownDevice();
+        resolveAutoScreensize();
       }
-      activate("mobilevr");
       return true;
     }
     if (fakeSupport) {
@@ -18052,21 +18651,23 @@ var WebVR = (0, import_react61.forwardRef)(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 = (0, import_react61.useCallback)(async () => {
+  const exitVR = (0, import_react62.useCallback)(async () => {
     if (modeRef.current === "webxr") {
       const session2 = webXRSessionRef.current ?? xrStore.getState().session ?? null;
       if (session2) {
@@ -18079,47 +18680,90 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
     deactivate();
     leaveWebVRPresentation();
   }, [deactivate, xrStore]);
-  const toggleVR = (0, import_react61.useCallback)(async () => {
+  const toggleVR = (0, import_react62.useCallback)(async () => {
     if (modeRef.current) {
       await exitVR();
       return false;
     }
     return enterVR();
   }, [enterVR, exitVR]);
-  const updateSettings = (0, import_react61.useCallback)((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 controller = (0, import_react61.useMemo)(
+  const updateSettings = (0, import_react62.useCallback)(
+    (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 = (0, import_react62.useCallback)(() => {
+    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 = (0, import_react62.useMemo)(
     () => ({
       closeSetup: () => updateWebVRHost(host, { setupOpen: false }),
       enterVR,
       exitVR,
       openSetup: () => updateWebVRHost(host, { setupOpen: true }),
       requestPermission,
+      resetSettings,
       toggleVR,
       updateSettings
     }),
-    [enterVR, exitVR, host, requestPermission, toggleVR, updateSettings]
+    [
+      enterVR,
+      exitVR,
+      host,
+      requestPermission,
+      resetSettings,
+      toggleVR,
+      updateSettings
+    ]
   );
-  (0, import_react61.useImperativeHandle)(
+  (0, import_react62.useImperativeHandle)(
     ref,
     () => ({
       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]
   );
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     let active = true;
     void detectWebVRCapabilities().then((capabilities) => {
       if (!active) {
@@ -18141,19 +18785,30 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
       active = false;
     };
   }, [desktopSupport, eventBus, fakeSupport, host, mobileVr]);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     host.controller = controller;
     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]);
-  (0, import_react61.useEffect)(() => {
-    updateWebVRHost(host, { chrome, mode, settings });
-  }, [chrome, host, mode, settings]);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
+    updateWebVRHost(host, {
+      chrome,
+      detectedScreensize,
+      mode,
+      settings
+    });
+  }, [chrome, detectedScreensize, host, mode, settings]);
+  (0, import_react62.useEffect)(() => {
     if (mode !== "fake") {
       return;
     }
@@ -18177,7 +18832,7 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
       document.removeEventListener("mousemove", onMouseMove);
     };
   }, [controlsRef, gl.domElement, mode, mousePointerLock]);
-  (0, import_react61.useEffect)(
+  (0, import_react62.useEffect)(
     () => () => {
       const session2 = webXRSessionRef.current;
       if (session2) {
@@ -18192,7 +18847,7 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
     },
     [controlsRef]
   );
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (mode !== "mobilevr" && mode !== "fake") {
       return;
     }
@@ -18201,6 +18856,23 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
       void exitVR();
     });
   }, [exitVR, gl.domElement, mode]);
+  (0, import_react62.useEffect)(() => {
+    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
@@ -18213,22 +18885,26 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
       Gyro,
       {
         ref: gyroRef,
+        absolute,
         desktopSupport,
         enabled: mode === "mobilevr",
+        friction,
+        north,
         onDenied: () => {
           reportDenied();
           deactivate("mobilevr");
         },
         softstart: 0,
-        touchMode: "off"
+        touchMode: touchSupport ? "horizontaloffset" : "off"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       WebVRStereoRenderer,
       {
         mode,
+        oversampling: resolvedOversampling,
         profile: resolvedProfile,
-        screensize: settings.screensize
+        screensize: effectiveScreensize
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -18243,7 +18919,7 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
 });
 // src/pano-scene-menu.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 // src/drag-motion.ts
 var DRAG_INERTIA_DAMPING = 8;
@@ -18627,10 +19303,10 @@ function PanoSceneMenu({
   expandLabel = "Show scenes",
   collapseLabel = "Hide scenes"
 }) {
-  const listId = (0, import_react62.useId)();
-  const listRef = (0, import_react62.useRef)(null);
-  const trackRef = (0, import_react62.useRef)(null);
-  const itemRefs = (0, import_react62.useRef)(/* @__PURE__ */ new Map());
+  const listId = (0, import_react63.useId)();
+  const listRef = (0, import_react63.useRef)(null);
+  const trackRef = (0, import_react63.useRef)(null);
+  const itemRefs = (0, import_react63.useRef)(/* @__PURE__ */ new Map());
   const resolved = resolveAppearance2(appearance);
   const resolvedInset = resolveInset(inset);
   const horizontal = isHorizontal(placement);
@@ -18639,34 +19315,34 @@ function PanoSceneMenu({
     dragMotionProp === false ? false : dragMotionProp
   );
   const isExpandedControlled = expandedProp !== void 0;
-  const [internalExpanded, setInternalExpanded] = (0, import_react62.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react63.useState)(defaultExpanded);
   const expanded = collapsible ? isExpandedControlled ? expandedProp : internalExpanded : true;
-  const [offset, setOffset] = (0, import_react62.useState)(0);
-  const [viewportSize, setViewportSize] = (0, import_react62.useState)(0);
-  const [contentSize, setContentSize] = (0, import_react62.useState)(0);
-  const offsetRef = (0, import_react62.useRef)(0);
-  const dragRef = (0, import_react62.useRef)(null);
-  const animRef = (0, import_react62.useRef)(null);
+  const [offset, setOffset] = (0, import_react63.useState)(0);
+  const [viewportSize, setViewportSize] = (0, import_react63.useState)(0);
+  const [contentSize, setContentSize] = (0, import_react63.useState)(0);
+  const offsetRef = (0, import_react63.useRef)(0);
+  const dragRef = (0, import_react63.useRef)(null);
+  const animRef = (0, import_react63.useRef)(null);
   const maxOffset = Math.max(0, contentSize - viewportSize);
   offsetRef.current = offset;
-  const activeIndex = (0, import_react62.useMemo)(() => {
+  const activeIndex = (0, import_react63.useMemo)(() => {
     if (activeId == null) {
       return -1;
     }
     return items.findIndex((item) => item.id === activeId);
   }, [activeId, items]);
-  const cancelScrollAnimation = (0, import_react62.useCallback)(() => {
+  const cancelScrollAnimation = (0, import_react63.useCallback)(() => {
     const anim = animRef.current;
     if (anim?.raf != null) {
       cancelAnimationFrame(anim.raf);
     }
     animRef.current = null;
   }, []);
-  const clampOffset = (0, import_react62.useCallback)(
+  const clampOffset = (0, import_react63.useCallback)(
     (value) => Math.min(maxOffset, Math.max(0, value)),
     [maxOffset]
   );
-  const startScrollAnimation = (0, import_react62.useCallback)(
+  const startScrollAnimation = (0, import_react63.useCallback)(
     (velocity) => {
       cancelScrollAnimation();
       const current = offsetRef.current;
@@ -18721,8 +19397,8 @@ function PanoSceneMenu({
       maxOffset
     ]
   );
-  (0, import_react62.useEffect)(() => () => cancelScrollAnimation(), [cancelScrollAnimation]);
-  (0, import_react62.useLayoutEffect)(() => {
+  (0, import_react63.useEffect)(() => () => cancelScrollAnimation(), [cancelScrollAnimation]);
+  (0, import_react63.useLayoutEffect)(() => {
     if (!customDrag || !expanded) return;
     const list = listRef.current;
     const track = trackRef.current;
@@ -18743,12 +19419,12 @@ function PanoSceneMenu({
     observer.observe(track);
     return () => observer.disconnect();
   }, [customDrag, expanded, horizontal, items]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!customDrag) return;
     if (dragRef.current || animRef.current) return;
     setOffset((previous) => Math.min(maxOffset, Math.max(0, previous)));
   }, [customDrag, maxOffset]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!expanded || activeId == null) {
       return;
     }
@@ -18791,7 +19467,7 @@ function PanoSceneMenu({
     expanded,
     horizontal
   ]);
-  const rootStyle = (0, import_react62.useMemo)(() => {
+  const rootStyle = (0, import_react63.useMemo)(() => {
     const vars = {
       "--pano-scene-menu-background": resolved.background,
       "--pano-scene-menu-padding": cssLength(resolved.padding),
@@ -18933,7 +19609,7 @@ function PanoSceneMenu({
     setOffset((previous) => clampOffset(previous + event.deltaX));
   };
   const axisPoint = (event) => horizontal ? event.clientX : event.clientY;
-  const endSuppressClickRef = (0, import_react62.useRef)(false);
+  const endSuppressClickRef = (0, import_react63.useRef)(false);
   const beginListDrag = (event, captureTarget) => {
     if (!customDrag || event.button !== 0) return;
     cancelScrollAnimation();
@@ -19143,7 +19819,7 @@ function PanoSceneMenu({
 }
 // src/use-pano-viewer.ts
-var import_react63 = require("react");
+var import_react64 = require("react");
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -19174,6 +19850,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) ?? (() => {
@@ -19225,14 +19931,14 @@ function createPanoViewerHandle(ref) {
   };
 }
 function usePanoViewer() {
-  const ref = (0, import_react63.useRef)(null);
-  const handle = (0, import_react63.useMemo)(() => createPanoViewerHandle(ref), []);
-  return (0, import_react63.useMemo)(() => ({ ref, ...handle }), [handle]);
+  const ref = (0, import_react64.useRef)(null);
+  const handle = (0, import_react64.useMemo)(() => createPanoViewerHandle(ref), []);
+  return (0, import_react64.useMemo)(() => ({ ref, ...handle }), [handle]);
 }
 // src/video/pano-video.tsx
 var import_fiber31 = require("@react-three/fiber");
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_three40 = require("three");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
@@ -19319,10 +20025,10 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture2(poster, onError) {
   const gl = (0, import_fiber31.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react64.useState)(null);
-  const onErrorRef = (0, import_react64.useRef)(onError);
+  const [texture, setTexture] = (0, import_react65.useState)(null);
+  const onErrorRef = (0, import_react65.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -19359,7 +20065,7 @@ function usePosterTexture2(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react64.useEffect)(
+  (0, import_react65.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -19418,37 +20124,37 @@ function PanoVideo({
 }) {
   usePanoMediaActivationIntent(autoPlay);
   const gl = (0, import_fiber31.useThree)((state) => state.gl);
-  const host = (0, import_react64.useContext)(PanoVideoHostContext);
-  const variants = (0, import_react64.useMemo)(
+  const host = (0, import_react65.useContext)(PanoVideoHostContext);
+  const variants = (0, import_react65.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react64.useMemo)(
+  const captionAppearance = (0, import_react65.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react64.useState)(
+  const [variantId, setVariantId] = (0, import_react65.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react64.useState)(
+  const [trackId, setTrackId] = (0, import_react65.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react64.useState)(false);
-  const autoPlayRef = (0, import_react64.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react65.useState)(false);
+  const autoPlayRef = (0, import_react65.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react64.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react64.useRef)(
+  const blockedRef = (0, import_react65.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react65.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react64.useRef)({
+  const mediaCapabilitiesRef = (0, import_react65.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react64.useRef)(null);
+  const storeRef = (0, import_react65.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -19458,7 +20164,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react64.useRef)({
+  const actionsRef = (0, import_react65.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -19478,19 +20184,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = (0, import_react64.useRef)(onLoad);
-  const onErrorRef = (0, import_react64.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react64.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react64.useRef)(onEnded);
-  const onVariantChangeRef = (0, import_react64.useRef)(onVariantChange);
-  const onTrackChangeRef = (0, import_react64.useRef)(onTrackChange);
+  const onLoadRef = (0, import_react65.useRef)(onLoad);
+  const onErrorRef = (0, import_react65.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react65.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react65.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react65.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react65.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react64.useMemo)(() => {
+  const resource = (0, import_react65.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -19505,7 +20211,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react64.useEffect)(
+  (0, import_react65.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -19520,13 +20226,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react64.useLayoutEffect)(() => {
+  (0, import_react65.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -19542,7 +20248,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react64.useCallback)(
+  const emitSnapshot = (0, import_react65.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -19594,7 +20300,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react64.useMemo)(
+  const controller = (0, import_react65.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -19646,7 +20352,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react64.useLayoutEffect)(() => {
+  (0, import_react65.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -19659,7 +20365,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react64.useLayoutEffect)(() => {
+  (0, import_react65.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -19672,10 +20378,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -19732,7 +20438,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -19824,7 +20530,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react64.useLayoutEffect)(() => {
+  (0, import_react65.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -19837,7 +20543,7 @@ function PanoVideo({
     applyInlineVideoPlayback(video, playsInline);
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -19887,7 +20593,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -19922,7 +20628,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -19957,7 +20663,7 @@ function PanoVideo({
 }
 // src/map/pano-map.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 // src/map/geometry.ts
 function sectorRotation(heading, yaw) {
@@ -20017,14 +20723,14 @@ function normalizeDegrees(value) {
 }
 // src/map/use-map-view.ts
-var import_react65 = require("react");
+var import_react66 = require("react");
 var DEFAULT_VIEW2 = { yaw: 0, pitch: 0, fov: 75 };
 function useMapView(controlled) {
-  const eventBus = (0, import_react65.useContext)(PanoEventBusContext);
-  const [view, setView] = (0, import_react65.useState)(controlled ?? DEFAULT_VIEW2);
-  const controlledRef = (0, import_react65.useRef)(controlled);
+  const eventBus = (0, import_react66.useContext)(PanoEventBusContext);
+  const [view, setView] = (0, import_react66.useState)(controlled ?? DEFAULT_VIEW2);
+  const controlledRef = (0, import_react66.useRef)(controlled);
   controlledRef.current = controlled;
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (controlled !== void 0) {
       setView(controlled);
       return;
@@ -20174,22 +20880,22 @@ function PanoMap({
   renderChrome,
   initialScale
 }) {
-  const reactId = (0, import_react66.useId)().replace(/:/g, "");
+  const reactId = (0, import_react67.useId)().replace(/:/g, "");
   const view = useMapView(controlledView);
-  const rootRef = (0, import_react66.useRef)(null);
-  const containerRef = (0, import_react66.useRef)(null);
-  const sectorNodeRef = (0, import_react66.useRef)(null);
-  const yawRef = (0, import_react66.useRef)(view.yaw);
-  const [size, setSize] = (0, import_react66.useState)({ width: 0, height: 0 });
-  const [imageSize2, setImageSize] = (0, import_react66.useState)({ width: 0, height: 0 });
-  const [scale, setScale] = (0, import_react66.useState)(1);
-  const [pan, setPan] = (0, import_react66.useState)({ x: 0, y: 0 });
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react66.useState)(false);
-  const dragRef = (0, import_react66.useRef)(null);
-  const panAnimRef = (0, import_react66.useRef)(null);
-  const panRef = (0, import_react66.useRef)(pan);
-  const scaleRef = (0, import_react66.useRef)(scale);
-  const initialViewKeyRef = (0, import_react66.useRef)(null);
+  const rootRef = (0, import_react67.useRef)(null);
+  const containerRef = (0, import_react67.useRef)(null);
+  const sectorNodeRef = (0, import_react67.useRef)(null);
+  const yawRef = (0, import_react67.useRef)(view.yaw);
+  const [size, setSize] = (0, import_react67.useState)({ width: 0, height: 0 });
+  const [imageSize2, setImageSize] = (0, import_react67.useState)({ width: 0, height: 0 });
+  const [scale, setScale] = (0, import_react67.useState)(1);
+  const [pan, setPan] = (0, import_react67.useState)({ x: 0, y: 0 });
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react67.useState)(false);
+  const dragRef = (0, import_react67.useRef)(null);
+  const panAnimRef = (0, import_react67.useRef)(null);
+  const panRef = (0, import_react67.useRef)(pan);
+  const scaleRef = (0, import_react67.useRef)(scale);
+  const initialViewKeyRef = (0, import_react67.useRef)(null);
   const spots = map.spots;
   const iconSize = map.iconSize ?? DEFAULT_ICON_SIZE2;
   const interaction = map.interaction ?? "fixed";
@@ -20207,15 +20913,15 @@ function PanoMap({
   const collapseControl = showCollapseControl ?? map.controls?.collapse === true;
   const collapsed = controlledCollapsed ?? uncontrolledCollapsed;
   const editing = mode === "edit";
-  const fit = (0, import_react66.useMemo)(
+  const fit = (0, import_react67.useMemo)(
     () => containRect(size.width, size.height, imageSize2.width, imageSize2.height),
     [size, imageSize2]
   );
-  const viewport = (0, import_react66.useMemo)(
+  const viewport = (0, import_react67.useMemo)(
     () => ({ fit, scale, panX: pan.x, panY: pan.y }),
     [fit, scale, pan]
   );
-  (0, import_react66.useLayoutEffect)(() => {
+  (0, import_react67.useLayoutEffect)(() => {
     if (collapsed) return;
     const node = containerRef.current;
     if (!node) return;
@@ -20232,7 +20938,7 @@ function PanoMap({
     observer.observe(node);
     return () => observer.disconnect();
   }, [collapsed]);
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     yawRef.current = view.yaw;
     const node = sectorNodeRef.current;
     if (!node) return;
@@ -20249,7 +20955,7 @@ function PanoMap({
   };
   panRef.current = pan;
   scaleRef.current = scale;
-  const panBoundsFor = (0, import_react66.useCallback)(
+  const panBoundsFor = (0, import_react67.useCallback)(
     (nextScale) => {
       const width = fit.width * nextScale;
       const height = fit.height * nextScale;
@@ -20265,7 +20971,7 @@ function PanoMap({
     },
     [fit, size]
   );
-  const clampPan = (0, import_react66.useCallback)(
+  const clampPan = (0, import_react67.useCallback)(
     (nextScale, nextPan) => {
       const bounds = panBoundsFor(nextScale);
       return {
@@ -20275,14 +20981,14 @@ function PanoMap({
     },
     [panBoundsFor]
   );
-  const cancelPanAnimation = (0, import_react66.useCallback)(() => {
+  const cancelPanAnimation = (0, import_react67.useCallback)(() => {
     const anim = panAnimRef.current;
     if (anim?.raf != null) {
       cancelAnimationFrame(anim.raf);
     }
     panAnimRef.current = null;
   }, []);
-  const startPanAnimation = (0, import_react66.useCallback)(
+  const startPanAnimation = (0, import_react67.useCallback)(
     (velocity) => {
       cancelPanAnimation();
       const current = panRef.current;
@@ -20342,11 +21048,11 @@ function PanoMap({
     },
     [cancelPanAnimation, clampPan, dragMotion.bounce, dragMotion.inertia, panBoundsFor]
   );
-  (0, import_react66.useEffect)(() => () => cancelPanAnimation(), [cancelPanAnimation]);
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => () => cancelPanAnimation(), [cancelPanAnimation]);
+  (0, import_react67.useEffect)(() => {
     if (collapsed) cancelPanAnimation();
   }, [cancelPanAnimation, collapsed]);
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (!gestureZoom) {
       initialViewKeyRef.current = null;
       setScale(1);
@@ -20361,7 +21067,7 @@ function PanoMap({
       return next;
     });
   }, [clampPan, gestureZoom, maxScale]);
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (!gestureZoom) return;
     if (!(fit.width > 0) || !(fit.height > 0)) return;
     if (!(size.width > 0) || !(size.height > 0)) return;
@@ -20388,7 +21094,7 @@ function PanoMap({
     size.height,
     size.width
   ]);
-  const applyZoom = (0, import_react66.useCallback)(
+  const applyZoom = (0, import_react67.useCallback)(
     (nextScale, origin) => {
       if (!gestureZoom) return;
       cancelPanAnimation();
@@ -20416,7 +21122,7 @@ function PanoMap({
       size.width
     ]
   );
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onWheel = (event) => {
@@ -20838,7 +21544,7 @@ function PanoMap({
 }
 // src/map/pano-map-overlay.tsx
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DEFAULT_DIALOG_WIDTH = 720;
 var DEFAULT_DIALOG_HEIGHT = 520;
@@ -20858,10 +21564,10 @@ function PanoMapDialogShell({
 }) {
   usePanoModal(open);
   const { size } = usePanoOverlay();
-  const titleId = (0, import_react67.useId)();
-  const panelRef = (0, import_react67.useRef)(null);
-  const previouslyFocused = (0, import_react67.useRef)(null);
-  (0, import_react67.useEffect)(() => {
+  const titleId = (0, import_react68.useId)();
+  const panelRef = (0, import_react68.useRef)(null);
+  const previouslyFocused = (0, import_react68.useRef)(null);
+  (0, import_react68.useEffect)(() => {
     if (!open) return;
     const active = panelRef.current?.ownerDocument.activeElement;
     previouslyFocused.current = active instanceof HTMLElement ? active : null;
@@ -20979,8 +21685,8 @@ function PanoMapOverlay({
   editorSurface = false
 }) {
   const { size } = usePanoOverlay();
-  const [open, setOpen] = (0, import_react67.useState)(false);
-  const [collapsed, setCollapsed] = (0, import_react67.useState)(false);
+  const [open, setOpen] = (0, import_react68.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react68.useState)(false);
   const basePresentation = presentationOverride ?? map.presentation ?? {
     mode: "docked",
     corner: "bottom-left",
@@ -20995,7 +21701,7 @@ function PanoMapOverlay({
   const offsetY = offsetYProp ?? basePresentation.offsetY ?? 16;
   const width = widthProp ?? basePresentation.width ?? (presentationMode === "dialog" ? 48 : 220);
   const height = heightProp ?? basePresentation.height ?? (presentationMode === "dialog" ? 48 : 160);
-  const resolvedMap = (0, import_react67.useMemo)(() => {
+  const resolvedMap = (0, import_react68.useMemo)(() => {
     if (interaction === void 0 && maxScale === void 0 && iconSize === void 0) {
       return map;
     }
@@ -21023,7 +21729,7 @@ function PanoMapOverlay({
       if (presentationMode === "dialog") setOpen(false);
     }
   };
-  const editorBox = (0, import_react67.useMemo)(() => {
+  const editorBox = (0, import_react68.useMemo)(() => {
     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));
     return {
@@ -21124,6 +21830,7 @@ function PanoMapOverlay({
   DEFAULT_PANO_VIDEO_PLAYBACK_RATES,
   DEFAULT_WEBVR_CHROME_APPEARANCE,
   DEFAULT_WEBVR_CURSOR_DWELL_MS,
+  EMPTY_WEBVR_STATE,
   GraphicHotspot,
   Gyro,
   IframeHotspot,
@@ -21138,6 +21845,7 @@ function PanoMapOverlay({
   PanoFilter,
   PanoMap,
   PanoMapOverlay,
+  PanoOverlay,
   PanoOverlayPortalProvider,
   PanoSceneMenu,
   PanoVideo,