@ericchen1990/pano-view 3.6.7 → 3.7.0

package/dist/index.mjs

@@ -2310,12 +2310,12 @@ import {
   forwardRef as forwardRef2,
   useCallback as useCallback6,
   useContext as useContext16,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo8,
   useRef as useRef13,
-  useState as useState6,
-  useSyncExternalStore as useSyncExternalStore6
+  useState as useState7,
+  useSyncExternalStore as useSyncExternalStore8
 } from "react";
 
 // src/background-audio-host.ts
@@ -3464,9 +3464,529 @@ function subscribeFullscreenChange(onChange) {
   };
 }
 
+// src/ios-landscape-fullscreen.ts
+var BAR_COLLAPSED_TOLERANCE_PX = 32;
+var CHROME_GROWTH_PX = 24;
+var SCROLL_OFFSET_TOLERANCE_PX = 2;
+var REMEASURE_DELAY_MS = 280;
+var ELEMENT_STYLE_PROPERTIES = [
+  "background",
+  "height",
+  "left",
+  "position",
+  "top",
+  "width",
+  "z-index"
+];
+var globalListeners = /* @__PURE__ */ new Set();
+var activeSession = null;
+var lastSnapshot = {
+  active: false,
+  allowsDocumentScroll: false,
+  element: null,
+  portrait: false,
+  state: 0
+};
+function readStandaloneDisplay() {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return false;
+  }
+  const nav = navigator;
+  if (nav.standalone === true) {
+    return true;
+  }
+  try {
+    return window.matchMedia("(display-mode: standalone)").matches;
+  } catch {
+    return false;
+  }
+}
+function isIphoneLandscapeFullscreenCandidate(userAgent = typeof navigator !== "undefined" ? navigator.userAgent : "", options = {}) {
+  if (!userAgent) {
+    return false;
+  }
+  if (/iPad/i.test(userAgent)) {
+    return false;
+  }
+  if (!/iPhone|iPod/i.test(userAgent)) {
+    return false;
+  }
+  const fullscreenEnabled = options.fullscreenEnabled ?? (typeof document !== "undefined" ? isFullscreenEnabled() : false);
+  if (fullscreenEnabled) {
+    return false;
+  }
+  const standalone = options.standalone ?? readStandaloneDisplay();
+  if (standalone) {
+    return false;
+  }
+  return true;
+}
+function supportsIphoneLandscapeFullscreen() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return isIphoneLandscapeFullscreenCandidate();
+}
+function canEnterViewerFullscreen() {
+  return isFullscreenEnabled() || supportsIphoneLandscapeFullscreen();
+}
+function readLargeViewportHeight(win) {
+  const root = win.document.documentElement;
+  let probe = root.querySelector("[data-pano-lvh-probe]");
+  if (!probe) {
+    probe = win.document.createElement("div");
+    probe.setAttribute("data-pano-lvh-probe", "");
+    probe.setAttribute("aria-hidden", "true");
+    probe.style.cssText = "position:fixed;left:0;top:0;width:0;height:100lvh;visibility:hidden;pointer-events:none;";
+    root.appendChild(probe);
+  }
+  const measured = probe.getBoundingClientRect().height;
+  if (measured > 0) {
+    return measured;
+  }
+  const screen = win.screen;
+  if (screen?.width > 0 && screen.height > 0) {
+    return Math.min(screen.width, screen.height);
+  }
+  return win.innerHeight;
+}
+function removeLargeViewportProbe(win = window) {
+  win.document.documentElement.querySelector("[data-pano-lvh-probe]")?.remove();
+}
+function readIphoneFullscreenViewport(win = window) {
+  const visual = win.visualViewport;
+  const landscape = typeof win.matchMedia === "function" ? win.matchMedia("(orientation: landscape)").matches : win.innerWidth > win.innerHeight;
+  let inIframe = false;
+  try {
+    inIframe = win.self !== win.top;
+  } catch {
+    inIframe = true;
+  }
+  return {
+    inIframe,
+    landscape,
+    largeViewportHeight: readLargeViewportHeight(win),
+    scrollY: win.scrollY || win.pageYOffset || 0,
+    visualViewportHeight: visual?.height ?? win.innerHeight,
+    visualViewportOffsetTop: visual?.offsetTop ?? 0
+  };
+}
+function computeChromeOverlapPx(viewport) {
+  return Math.max(0, viewport.largeViewportHeight - viewport.visualViewportHeight);
+}
+function emptyExtents() {
+  return {
+    maxVisualHeight: 0,
+    minVisualHeight: Number.POSITIVE_INFINITY
+  };
+}
+function noteVisualHeight(extents, height) {
+  if (!(height > 0)) {
+    return;
+  }
+  extents.minVisualHeight = Math.min(extents.minVisualHeight, height);
+  extents.maxVisualHeight = Math.max(extents.maxVisualHeight, height);
+}
+function isIphoneChromeCollapsed(viewport, extents) {
+  const overlap = computeChromeOverlapPx(viewport);
+  if (overlap <= BAR_COLLAPSED_TOLERANCE_PX) {
+    return true;
+  }
+  if (!extents || !(extents.minVisualHeight > 0) || !(extents.maxVisualHeight > 0)) {
+    return false;
+  }
+  const growth = extents.maxVisualHeight - extents.minVisualHeight;
+  const atHighWater = viewport.visualViewportHeight >= extents.maxVisualHeight - 2;
+  return growth >= CHROME_GROWTH_PX && atHighWater;
+}
+function computeScrollAwayDistance(viewport, extents) {
+  if (!viewport.landscape || viewport.inIframe) {
+    return 0;
+  }
+  if (isIphoneChromeCollapsed(viewport, extents)) {
+    return 0;
+  }
+  return Math.max(1, Math.ceil(computeChromeOverlapPx(viewport)));
+}
+function computeIphoneFullscreenState(viewport, extents) {
+  if (!viewport.landscape || viewport.inIframe) {
+    return 0;
+  }
+  if (isIphoneChromeCollapsed(viewport, extents)) {
+    return 0;
+  }
+  if (viewport.scrollY > SCROLL_OFFSET_TOLERANCE_PX || viewport.visualViewportOffsetTop > SCROLL_OFFSET_TOLERANCE_PX) {
+    return 2;
+  }
+  return 1;
+}
+function captureElementStyle(element) {
+  const snapshot = {};
+  for (const property of ELEMENT_STYLE_PROPERTIES) {
+    snapshot[property] = element.style.getPropertyValue(property);
+  }
+  return snapshot;
+}
+function restoreElementStyle(element, snapshot) {
+  for (const property of ELEMENT_STYLE_PROPERTIES) {
+    const previous = snapshot[property];
+    if (previous) {
+      element.style.setProperty(property, previous);
+    } else {
+      element.style.removeProperty(property);
+    }
+  }
+}
+function captureDocumentStyle() {
+  const documentElement = document.documentElement;
+  const body = document.body;
+  return {
+    bodyHeight: body.style.height,
+    bodyMinHeight: body.style.minHeight,
+    bodyOverflow: body.style.overflow,
+    documentHeight: documentElement.style.height,
+    documentOverflow: documentElement.style.overflow,
+    scrollX: window.scrollX || window.pageXOffset || 0,
+    scrollY: window.scrollY || window.pageYOffset || 0
+  };
+}
+function restoreDocumentStyle(snapshot) {
+  const documentElement = document.documentElement;
+  const body = document.body;
+  documentElement.style.overflow = snapshot.documentOverflow;
+  documentElement.style.height = snapshot.documentHeight;
+  body.style.overflow = snapshot.bodyOverflow;
+  body.style.height = snapshot.bodyHeight;
+  body.style.minHeight = snapshot.bodyMinHeight;
+  window.scrollTo(snapshot.scrollX, snapshot.scrollY);
+}
+function applyCoverStyle(element) {
+  const visual = window.visualViewport;
+  const top = visual?.offsetTop ?? 0;
+  const left = visual?.offsetLeft ?? 0;
+  const width = visual?.width ?? window.innerWidth;
+  const height = visual?.height ?? window.innerHeight;
+  element.style.setProperty("background", "#000");
+  element.style.setProperty("position", "fixed");
+  element.style.setProperty("top", `${top}px`);
+  element.style.setProperty("left", `${left}px`);
+  element.style.setProperty("width", `${width}px`);
+  element.style.setProperty("height", `${height}px`);
+  element.style.setProperty("z-index", "2147483000");
+}
+function setDocumentScrollable(scrollDistance) {
+  const documentElement = document.documentElement;
+  const body = document.body;
+  documentElement.style.overflow = "visible";
+  body.style.overflow = "visible";
+  if (scrollDistance > 0) {
+    body.style.minHeight = `${window.innerHeight + scrollDistance + 64}px`;
+  } else {
+    body.style.minHeight = "";
+  }
+}
+function lockDocumentScroll() {
+  document.documentElement.style.overflow = "hidden";
+  document.body.style.overflow = "hidden";
+  document.body.style.minHeight = "";
+}
+function notifyListeners() {
+  for (const listener of globalListeners) {
+    listener();
+  }
+}
+function publishSnapshot(session2, viewport, state) {
+  lastSnapshot = {
+    active: true,
+    allowsDocumentScroll: viewport.landscape && !viewport.inIframe && state !== 0,
+    element: session2.element,
+    portrait: !viewport.landscape,
+    state
+  };
+  notifyListeners();
+}
+function rememberViewport(session2, viewport) {
+  if (session2.extentsLandscape !== viewport.landscape) {
+    session2.extents = emptyExtents();
+    session2.extentsLandscape = viewport.landscape;
+    session2.barsHidden = false;
+  }
+  noteVisualHeight(session2.extents, viewport.visualViewportHeight);
+}
+function resolveState(session2, viewport) {
+  const state = computeIphoneFullscreenState(viewport, session2.extents);
+  if (!viewport.landscape || viewport.inIframe) {
+    return state;
+  }
+  if (state === 0) {
+    session2.barsHidden = true;
+    return 0;
+  }
+  if (!session2.barsHidden) {
+    return state;
+  }
+  if (viewport.visualViewportHeight < session2.extents.maxVisualHeight - 48) {
+    session2.barsHidden = false;
+    return state;
+  }
+  return 0;
+}
+function syncSessionLayout(session2, options) {
+  const viewport = readIphoneFullscreenViewport();
+  rememberViewport(session2, viewport);
+  const state = resolveState(session2, viewport);
+  applyCoverStyle(session2.element);
+  if (!viewport.landscape || viewport.inIframe || state === 0) {
+    lockDocumentScroll();
+    publishSnapshot(session2, viewport, state);
+    return;
+  }
+  const distance = computeScrollAwayDistance(viewport, session2.extents);
+  setDocumentScrollable(distance);
+  if (distance > 0 && viewport.scrollY < distance - 1) {
+    window.scrollTo(0, distance);
+  }
+  applyCoverStyle(session2.element);
+  const settled = readIphoneFullscreenViewport();
+  rememberViewport(session2, settled);
+  publishSnapshot(session2, settled, resolveState(session2, settled));
+  if (options?.followUp) {
+    return;
+  }
+  window.clearTimeout(session2.remeasureTimer);
+  session2.remeasureTimer = window.setTimeout(() => {
+    if (activeSession !== session2) {
+      return;
+    }
+    syncSessionLayout(session2, { followUp: true });
+  }, REMEASURE_DELAY_MS);
+  window.requestAnimationFrame(() => {
+    if (activeSession !== session2) {
+      return;
+    }
+    syncSessionLayout(session2, { followUp: true });
+  });
+}
+function attachSessionListeners(session2) {
+  const onChange = () => {
+    if (activeSession !== session2) {
+      return;
+    }
+    syncSessionLayout(session2);
+  };
+  window.addEventListener("resize", onChange);
+  window.addEventListener("orientationchange", onChange);
+  window.addEventListener("scroll", onChange, { passive: true });
+  window.visualViewport?.addEventListener("resize", onChange);
+  window.visualViewport?.addEventListener("scroll", onChange);
+  session2.orientationCleanup = () => {
+    window.removeEventListener("resize", onChange);
+    window.removeEventListener("orientationchange", onChange);
+    window.removeEventListener("scroll", onChange);
+    window.visualViewport?.removeEventListener("resize", onChange);
+    window.visualViewport?.removeEventListener("scroll", onChange);
+  };
+}
+function endSession(session2) {
+  if (activeSession !== session2) {
+    return;
+  }
+  activeSession = null;
+  window.clearTimeout(session2.remeasureTimer);
+  session2.orientationCleanup?.();
+  session2.orientationCleanup = null;
+  restoreElementStyle(session2.element, session2.elementStyle);
+  removeLargeViewportProbe();
+  restoreDocumentStyle(session2.documentStyle);
+  lastSnapshot = {
+    active: false,
+    allowsDocumentScroll: false,
+    element: null,
+    portrait: false,
+    state: 0
+  };
+  notifyListeners();
+}
+function acquireIphoneLandscapeFullscreen(element, holder) {
+  if (!(element instanceof HTMLElement)) {
+    return false;
+  }
+  if (!supportsIphoneLandscapeFullscreen()) {
+    return false;
+  }
+  if (activeSession) {
+    if (activeSession.element !== element) {
+      endSession(activeSession);
+    } else {
+      activeSession.holders.add(holder);
+      syncSessionLayout(activeSession);
+      return true;
+    }
+  }
+  const session2 = {
+    barsHidden: false,
+    documentStyle: captureDocumentStyle(),
+    element,
+    elementStyle: captureElementStyle(element),
+    extents: emptyExtents(),
+    extentsLandscape: null,
+    holders: /* @__PURE__ */ new Set([holder]),
+    orientationCleanup: null,
+    remeasureTimer: 0
+  };
+  activeSession = session2;
+  attachSessionListeners(session2);
+  syncSessionLayout(session2);
+  return true;
+}
+function releaseIphoneLandscapeFullscreen(element, holder) {
+  const session2 = activeSession;
+  if (!session2 || session2.element !== element) {
+    return;
+  }
+  session2.holders.delete(holder);
+  if (session2.holders.size > 0) {
+    return;
+  }
+  endSession(session2);
+}
+function isIphoneLandscapeFullscreenActive(element) {
+  if (!activeSession) {
+    return false;
+  }
+  if (!element) {
+    return true;
+  }
+  return activeSession.element === element || activeSession.element.contains(element) || element.contains(activeSession.element);
+}
+function getIphoneLandscapeFullscreenSnapshot() {
+  return lastSnapshot;
+}
+function subscribeIphoneLandscapeFullscreen(onChange) {
+  globalListeners.add(onChange);
+  return () => {
+    globalListeners.delete(onChange);
+  };
+}
+
+// src/ios-landscape-fullscreen-chrome.tsx
+import { useSyncExternalStore } from "react";
+
+// src/webvr/host.ts
+import { createContext as createContext5 } from "react";
+var WebVRRuntimeContext = createContext5(null);
+function createWebVRHost() {
+  return {
+    controller: null,
+    revision: 0,
+    snapshot: {
+      available: false,
+      chrome: true,
+      mode: null,
+      setupOpen: false,
+      settings: { screensize: "auto", profileId: "cardboard-v1" }
+    },
+    listeners: /* @__PURE__ */ new Set()
+  };
+}
+function updateWebVRHost(host, snapshot) {
+  host.snapshot = { ...host.snapshot, ...snapshot };
+  host.revision += 1;
+  for (const listener of host.listeners) {
+    listener();
+  }
+}
+function subscribeWebVRHost(host, listener) {
+  host.listeners.add(listener);
+  return () => {
+    host.listeners.delete(listener);
+  };
+}
+
+// src/ios-landscape-fullscreen-chrome.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RotatePhoneIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "pano-webvr-portrait-icon",
+      fill: "none",
+      height: "48",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 48 48",
+      width: "48",
+      children: [
+        /* @__PURE__ */ jsx("rect", { height: "28", rx: "3", width: "18", x: "15", y: "6" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 34c-3-3-4-7-3-11" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 36l2-2 2 2" }),
+        /* @__PURE__ */ jsx("path", { d: "M38 14c3 3 4 7 3 11" }),
+        /* @__PURE__ */ jsx("path", { d: "M40 12l-2 2-2-2" })
+      ]
+    }
+  );
+}
+function swipeMessage(state) {
+  switch (state) {
+    case 0:
+      return null;
+    case 1:
+      return "Swipe up to hide the browser bars";
+    case 2:
+      return "Swipe down, then swipe up to hide the browser bars";
+    default: {
+      const _exhaustive = state;
+      return _exhaustive;
+    }
+  }
+}
+function IphoneLandscapeFullscreenChrome({
+  webVRHost
+}) {
+  const snapshot = useSyncExternalStore(
+    subscribeIphoneLandscapeFullscreen,
+    getIphoneLandscapeFullscreenSnapshot,
+    getIphoneLandscapeFullscreenSnapshot
+  );
+  useSyncExternalStore(
+    (listener) => subscribeWebVRHost(webVRHost, listener),
+    () => webVRHost.revision,
+    () => webVRHost.revision
+  );
+  if (!snapshot.active) {
+    return null;
+  }
+  const vrMode = webVRHost.snapshot.mode;
+  const vrOwnsPortraitPrompt = vrMode === "mobilevr";
+  if (snapshot.portrait) {
+    if (vrOwnsPortraitPrompt) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "pano-webvr-portrait-prompt", role: "status", children: [
+      /* @__PURE__ */ jsx(RotatePhoneIcon, {}),
+      /* @__PURE__ */ jsx("p", { className: "pano-webvr-portrait-text", children: "Rotate your phone to landscape" })
+    ] });
+  }
+  const message = swipeMessage(snapshot.state);
+  if (!message) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "pano-iphone-fullscreen-swipe-prompt",
+      role: "status",
+      children: /* @__PURE__ */ jsx("p", { className: "pano-iphone-fullscreen-swipe-text", children: message })
+    }
+  );
+}
+
 // src/hotspot/accessibility.tsx
 import {
-  createContext as createContext5,
+  createContext as createContext6,
   useCallback,
   useContext as useContext3,
   useEffect as useEffect3,
@@ -3474,8 +3994,8 @@ import {
   useRef as useRef3,
   useState
 } from "react";
-import { jsx } from "react/jsx-runtime";
-var HotspotAccessibilityContext = createContext5(null);
+import { jsx as jsx2 } from "react/jsx-runtime";
+var HotspotAccessibilityContext = createContext6(null);
 function warnAboutMissingLabel(id) {
   const nodeEnv = globalThis.process?.env?.NODE_ENV;
   if (nodeEnv !== "production") {
@@ -3544,7 +4064,7 @@ function useHotspotAccessibilityLayer() {
     [register]
   );
   const controls = useMemo(
-    () => /* @__PURE__ */ jsx("div", { "aria-label": "Panorama hotspots", style: { pointerEvents: "none" }, children: Array.from(entries.values()).map((entry) => /* @__PURE__ */ jsx(
+    () => /* @__PURE__ */ jsx2("div", { "aria-label": "Panorama hotspots", style: { pointerEvents: "none" }, children: Array.from(entries.values()).map((entry) => /* @__PURE__ */ jsx2(
       "button",
       {
         "aria-label": entry.label,
@@ -3569,8 +4089,8 @@ function useHotspotAccessibilityLayer() {
 }
 
 // src/hotspot/target-registry.ts
-import { createContext as createContext6 } from "react";
-var HotspotTargetRegistryContext = createContext6(
+import { createContext as createContext7 } from "react";
+var HotspotTargetRegistryContext = createContext7(
   null
 );
 function createHotspotTargetRegistry() {
@@ -4280,7 +4800,7 @@ function MouseControls({
 }
 
 // src/pano-filter/host.ts
-import { createContext as createContext7, useContext as useContext6, useSyncExternalStore } from "react";
+import { createContext as createContext8, useContext as useContext6, useSyncExternalStore as useSyncExternalStore2 } from "react";
 
 // src/pano-filter/presets.ts
 var PANO_FILTER_PRESETS = [
@@ -4325,7 +4845,7 @@ function resolvePanoFilterSnapshot(input) {
 }
 
 // src/pano-filter/host.ts
-var PanoFilterHostContext = createContext7(null);
+var PanoFilterHostContext = createContext8(null);
 function createPanoFilterHost() {
   return {
     snapshot: { ...DEFAULT_PANO_FILTER_SNAPSHOT },
@@ -4380,7 +4900,7 @@ function subscribeNoop() {
 }
 function usePanoFilterSnapshot() {
   const host = useContext6(PanoFilterHostContext);
-  const revision = useSyncExternalStore(
+  const revision = useSyncExternalStore2(
     host ? (onStoreChange) => subscribePanoFilterHost(host, onStoreChange) : subscribeNoop,
     () => host ? getPanoFilterHostRevision(host) : 0,
     () => host ? getPanoFilterHostRevision(host) : 0
@@ -4395,8 +4915,8 @@ function isProduction2() {
 
 // src/media-activation.tsx
 var import_howler2 = __toESM(require_howler());
-import { createContext as createContext8, useContext as useContext7, useEffect as useEffect6, useRef as useRef6 } from "react";
-var PanoMediaActivationHostContext = createContext8(null);
+import { createContext as createContext9, useContext as useContext7, useEffect as useEffect6, useRef as useRef6 } from "react";
+var PanoMediaActivationHostContext = createContext9(null);
 function createPanoMediaActivationHost() {
   return { intents: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(), revision: 0 };
 }
@@ -4449,7 +4969,7 @@ function usePanoMediaActivationIntent(required) {
 
 // src/pano-context-menu.tsx
 import {
-  createContext as createContext9,
+  createContext as createContext10,
   useCallback as useCallback2,
   useContext as useContext8,
   useEffect as useEffect7,
@@ -4459,11 +4979,11 @@ import {
   useRef as useRef7,
   useState as useState2
 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
-var PanoContextMenuOverlayContext = createContext9(null);
+var PanoContextMenuOverlayContext = createContext10(null);
 var DEFAULT_APPEARANCE = {
   background: "#161616",
   color: "#f4f4f4",
@@ -4622,7 +5142,7 @@ function DefaultContextMenuPanel({
     padding: resolved.padding,
     ...style
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: menuRef,
@@ -4633,7 +5153,7 @@ function DefaultContextMenuPanel({
       style: panelStyle,
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "div",
           {
             "aria-hidden": true,
@@ -4645,9 +5165,9 @@ function DefaultContextMenuPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsx2("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
+        /* @__PURE__ */ jsx3("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
           if (!isActionItem(item)) {
-            return /* @__PURE__ */ jsx2(
+            return /* @__PURE__ */ jsx3(
               "div",
               {
                 "aria-hidden": true,
@@ -4664,7 +5184,7 @@ function DefaultContextMenuPanel({
             );
           }
           const disabled = item.disabled === true;
-          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ jsx2(
+          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ jsx3(
             "img",
             {
               alt: item.imageAlt ?? "",
@@ -4678,7 +5198,7 @@ function DefaultContextMenuPanel({
               }
             }
           ) : null);
-          return /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsxs2(
             "button",
             {
               "aria-disabled": disabled || void 0,
@@ -4714,7 +5234,7 @@ function DefaultContextMenuPanel({
               tabIndex: disabled ? -1 : activeIndex === index ? 0 : -1,
               type: "button",
               children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "span",
                   {
                     "aria-hidden": true,
@@ -4726,7 +5246,7 @@ function DefaultContextMenuPanel({
                     children: iconNode
                   }
                 ),
-                /* @__PURE__ */ jsx2("span", { style: { flex: 1 }, children: item.label })
+                /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: item.label })
               ]
             },
             item.id
@@ -4779,7 +5299,7 @@ function PositionedMenuShell({
       top: Math.min(Math.max(rawTop, MENU_EDGE_PADDING), maxTop)
     });
   }, [clientX, clientY, overlayElement, children, viewportRevision]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className: "pano-context-menu-shell",
@@ -4838,7 +5358,7 @@ function usePanoContextMenuOverlay() {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [session2]);
-  const overlay = /* @__PURE__ */ jsx2(
+  const overlay = /* @__PURE__ */ jsx3(
     "div",
     {
       ref: setOverlayNode,
@@ -4849,7 +5369,7 @@ function usePanoContextMenuOverlay() {
         position: "absolute",
         zIndex: 20
       },
-      children: session2 ? /* @__PURE__ */ jsx2(
+      children: session2 ? /* @__PURE__ */ jsx3(
         PositionedMenuShell,
         {
           clientX: session2.event.clientX,
@@ -4943,9 +5463,9 @@ function PanoContextMenu({
         view,
         render: () => {
           if (hasCustomChildren && current.children) {
-            return /* @__PURE__ */ jsx2("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
+            return /* @__PURE__ */ jsx3("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
           }
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx3(
             DefaultContextMenuPanel,
             {
               appearance: current.appearance,
@@ -4983,7 +5503,7 @@ function PanoContextMenu({
   return null;
 }
 function ResetViewIcon() {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       "aria-hidden": true,
@@ -4996,14 +5516,14 @@ function ResetViewIcon() {
       viewBox: "0 0 16 16",
       width: "100%",
       children: [
-        /* @__PURE__ */ jsx2("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
-        /* @__PURE__ */ jsx2("path", { d: "M3.5 3.5v3h3" })
+        /* @__PURE__ */ jsx3("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
+        /* @__PURE__ */ jsx3("path", { d: "M3.5 3.5v3h3" })
       ]
     }
   );
 }
 function FullscreenIcon() {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       "aria-hidden": true,
@@ -5015,12 +5535,12 @@ function FullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ jsx2("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
+      children: /* @__PURE__ */ jsx3("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
     }
   );
 }
 function ExitFullscreenIcon() {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       "aria-hidden": true,
@@ -5032,7 +5552,7 @@ function ExitFullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ jsx2("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
+      children: /* @__PURE__ */ jsx3("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
     }
   );
 }
@@ -5041,7 +5561,7 @@ function createPanoContextMenuPresets(actions) {
   const resetView = {
     id: "pano-reset-view",
     label: "Reset view",
-    icon: /* @__PURE__ */ jsx2(ResetViewIcon, {}),
+    icon: /* @__PURE__ */ jsx3(ResetViewIcon, {}),
     onSelect: () => {
       actions.reset();
     }
@@ -5049,7 +5569,7 @@ function createPanoContextMenuPresets(actions) {
   const fullscreen = {
     id: "pano-fullscreen",
     label: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-    icon: isFullscreen ? /* @__PURE__ */ jsx2(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx2(FullscreenIcon, {}),
+    icon: isFullscreen ? /* @__PURE__ */ jsx3(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx3(FullscreenIcon, {}),
     onSelect: () => {
       actions.toggleFullscreen();
     }
@@ -5142,19 +5662,19 @@ function composePanoContextMenuItems(props, presets) {
     ...resolvePanoContextMenuEntries(props.append ?? [], presets)
   ];
 }
-var PanoContextMenuActionsContext = createContext9(null);
+var PanoContextMenuActionsContext = createContext10(null);
 
 // src/pano-cursor.tsx
 import { useThree as useThree4 } from "@react-three/fiber";
 import {
-  createContext as createContext10,
+  createContext as createContext11,
   useCallback as useCallback3,
   useContext as useContext9,
   useEffect as useEffect8,
   useMemo as useMemo4,
   useRef as useRef8
 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var DEFAULT_PANO_CURSORS = {
   default: "grab",
   dragging: "grabbing",
@@ -5168,7 +5688,7 @@ var LAYER_PRIORITY = {
   hotspotDragging: 3,
   hidden: 4
 };
-var PanoCursorContext = createContext10(null);
+var PanoCursorContext = createContext11(null);
 function usePanoCursor() {
   return useContext9(PanoCursorContext);
 }
@@ -5296,7 +5816,7 @@ function PanoCursorController({
       release(PANO_DRAG_CLAIM_ID);
     };
   }, [claim, eventBus, release]);
-  return /* @__PURE__ */ jsx3(PanoCursorContext.Provider, { value: api, children });
+  return /* @__PURE__ */ jsx4(PanoCursorContext.Provider, { value: api, children });
 }
 
 // src/pano-events.tsx
@@ -5517,11 +6037,14 @@ function usePanoEvents({
     }
     const wasFullscreenRef = { current: false };
     const isViewerFullscreen = () => {
+      const canvas = gl.domElement;
+      if (isIphoneLandscapeFullscreenActive(canvas)) {
+        return true;
+      }
       const fullscreenElement = getFullscreenElement();
       if (!fullscreenElement) {
         return false;
       }
-      const canvas = gl.domElement;
       return fullscreenElement === canvas || fullscreenElement.contains(canvas) || canvas.contains(fullscreenElement);
     };
     const handleFullscreenChange = () => {
@@ -5535,7 +6058,14 @@ function usePanoEvents({
       }
     };
     wasFullscreenRef.current = isViewerFullscreen();
-    return subscribeFullscreenChange(handleFullscreenChange);
+    const unsubscribeApi = subscribeFullscreenChange(handleFullscreenChange);
+    const unsubscribeIphone = subscribeIphoneLandscapeFullscreen(
+      handleFullscreenChange
+    );
+    return () => {
+      unsubscribeApi();
+      unsubscribeIphone();
+    };
   }, [gl]);
   useEffect9(() => {
     const element = gl.domElement;
@@ -5623,7 +6153,7 @@ function createPanoModalHost() {
 
 // src/overlay/pano-overlay.tsx
 import {
-  createContext as createContext11,
+  createContext as createContext12,
   useContext as useContext11,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo5,
@@ -5640,9 +6170,9 @@ function getOverlayVisibleRect(rect, viewport) {
 }
 
 // src/overlay/pano-overlay.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var PanoOverlayContext = createContext11(null);
-var PanoModalHostContext = createContext11(null);
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PanoOverlayContext = createContext12(null);
+var PanoModalHostContext = createContext12(null);
 function usePanoOverlay() {
   const context = useContext11(PanoOverlayContext);
   if (!context) throw new Error("usePanoOverlay must be used inside PanoViewer.renderOverlay.");
@@ -5659,7 +6189,7 @@ function PanoOverlayPortalProvider({
 }) {
   const context = usePanoOverlay();
   const value = useMemo5(() => ({ ...context, portalContainer: container }), [context, container]);
-  return /* @__PURE__ */ jsx4(PanoOverlayContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx5(PanoOverlayContext.Provider, { value, children });
 }
 function usePanoOverlayHost(isFullscreen) {
   const [portalContainer, setPortalContainer] = useState3(null);
@@ -5796,7 +6326,7 @@ var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
 var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
 
 // src/panorama-event-surface.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -5854,7 +6384,7 @@ function PanoramaEventSurface() {
     event.stopPropagation();
     eventBus.emit(type, makePanoramaPointerEvent(event));
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "mesh",
     {
       renderOrder: -200,
@@ -5864,8 +6394,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ jsx5("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ jsx6(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -5882,8 +6412,8 @@ function PanoramaEventSurface() {
 }
 
 // src/scenes-host.ts
-import { createContext as createContext12 } from "react";
-var ScenesHostContext = createContext12(null);
+import { createContext as createContext13 } from "react";
+var ScenesHostContext = createContext13(null);
 function createScenesHost() {
   return {
     controller: null,
@@ -5934,6 +6464,7 @@ function TouchControls({
     const drag = createPointerDrag(camera, element, () => controlsRef.current, "touch");
     const pending = /* @__PURE__ */ new Set();
     let disposed = false;
+    let allowsDocumentScroll = getIphoneLandscapeFullscreenSnapshot().allowsDocumentScroll;
     const clearPointers = () => {
       pending.clear();
       for (const pointerId of pointersRef.current.keys()) {
@@ -5954,6 +6485,16 @@ function TouchControls({
       clearPointers();
       return;
     }
+    const unsubscribeIphone = subscribeIphoneLandscapeFullscreen(() => {
+      const next = getIphoneLandscapeFullscreenSnapshot().allowsDocumentScroll;
+      if (next === allowsDocumentScroll) {
+        return;
+      }
+      allowsDocumentScroll = next;
+      if (next) {
+        clearPointers();
+      }
+    });
     const syncActive = (cancelled = false) => {
       controlsRef.current?.setPointerActive(
         "touch",
@@ -5965,6 +6506,9 @@ function TouchControls({
       if (disposed || controlsRef.current?.isInteractionLocked()) {
         return;
       }
+      if (allowsDocumentScroll) {
+        return;
+      }
       if (pointersRef.current.has(event.pointerId)) {
         return;
       }
@@ -5992,6 +6536,9 @@ function TouchControls({
       if (controlsRef.current?.isInteractionLocked()) {
         return;
       }
+      if (allowsDocumentScroll) {
+        return;
+      }
       event.preventDefault();
       const pointerId = event.pointerId;
       pending.add(pointerId);
@@ -6013,6 +6560,9 @@ function TouchControls({
       if (!previous) {
         return;
       }
+      if (allowsDocumentScroll) {
+        return;
+      }
       event.preventDefault();
       const next = {
         x: event.clientX,
@@ -6071,6 +6621,7 @@ function TouchControls({
     return () => {
       disposed = true;
       validateDragRef.current = void 0;
+      unsubscribeIphone();
       element.removeEventListener("pointerdown", onPointerDown);
       element.removeEventListener("pointermove", onPointerMove);
       element.removeEventListener("pointerup", releasePointer);
@@ -6083,9 +6634,9 @@ function TouchControls({
 }
 
 // src/video/chrome-overlay.tsx
-import { createContext as createContext13, useCallback as useCallback4, useMemo as useMemo6, useState as useState4 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var PanoChromeOverlayContext = createContext13(null);
+import { createContext as createContext14, useCallback as useCallback4, useMemo as useMemo6, useState as useState4 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var PanoChromeOverlayContext = createContext14(null);
 function usePanoChromeOverlay() {
   const [overlayElement, setOverlayElement] = useState4(
     null
@@ -6097,7 +6648,7 @@ function usePanoChromeOverlay() {
     () => ({ overlayElement }),
     [overlayElement]
   );
-  const overlay = /* @__PURE__ */ jsx6(
+  const overlay = /* @__PURE__ */ jsx7(
     "div",
     {
       className: "pano-chrome-overlay",
@@ -6109,9 +6660,9 @@ function usePanoChromeOverlay() {
 }
 
 // src/video/host.ts
-import { createContext as createContext14, useContext as useContext14 } from "react";
-var PanoVideoHostContext = createContext14(null);
-var DefaultPanoVideoControlsContext = createContext14(false);
+import { createContext as createContext15, useContext as useContext14 } from "react";
+var PanoVideoHostContext = createContext15(null);
+var DefaultPanoVideoControlsContext = createContext15(false);
 function createPanoVideoHost() {
   return {
     controller: null,
@@ -6170,11 +6721,11 @@ function useClaimPanoVideoControls() {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-import { useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useSyncExternalStore as useSyncExternalStore5 } from "react";
 
 // src/video/pano-video-captions.tsx
-import { useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
   background: "rgba(0, 0, 0, 0.55)",
@@ -6197,7 +6748,7 @@ function resolvePanoVideoCaptionAppearance(appearance) {
 function PanoVideoCaptionsOverlay({
   controller
 }) {
-  const snapshot = useSyncExternalStore2(
+  const snapshot = useSyncExternalStore3(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
@@ -6222,13 +6773,13 @@ function PanoVideoCaptionsOverlay({
     textShadow: snapshot.captionAppearance.textShadow,
     whiteSpace: "pre-wrap"
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: "pano-video-captions",
       "data-pano-video-captions": "",
       style: wrapperStyle,
-      children: /* @__PURE__ */ jsx7("div", { style: textStyle, children: snapshot.captionText })
+      children: /* @__PURE__ */ jsx8("div", { style: textStyle, children: snapshot.captionText })
     }
   );
 }
@@ -6247,7 +6798,7 @@ import {
   useMemo as useMemo7,
   useRef as useRef11,
   useState as useState5,
-  useSyncExternalStore as useSyncExternalStore3
+  useSyncExternalStore as useSyncExternalStore4
 } from "react";
 
 // src/video/format.ts
@@ -6380,7 +6931,7 @@ function cueText(cue) {
 }
 
 // src/video/pano-video-controls.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE = {
   background: "rgba(16, 16, 16, 0.88)",
   color: "#f4f4f4",
@@ -6441,7 +6992,7 @@ function volumeFromClientY(clientY, track) {
   return Math.max(0, Math.min(1, (rect.bottom - clientY) / rect.height));
 }
 function Icon({ path }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "svg",
     {
       "aria-hidden": true,
@@ -6453,7 +7004,7 @@ function Icon({ path }) {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "16",
-      children: /* @__PURE__ */ jsx8("path", { d: path })
+      children: /* @__PURE__ */ jsx9("path", { d: path })
     }
   );
 }
@@ -6465,7 +7016,7 @@ function ChromeButton({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       "aria-label": label,
@@ -6491,14 +7042,14 @@ function ChromeMenu({
   labelledBy,
   items
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: items.map((item) => /* @__PURE__ */ jsx8(
+      children: items.map((item) => /* @__PURE__ */ jsx9(
         ChromeMenuRadioItem,
         {
           active: item.active,
@@ -6518,7 +7069,7 @@ function ChromeMenuSurface({
   labelledBy,
   role
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "aria-labelledby": labelledBy,
@@ -6542,7 +7093,7 @@ function ChromeMenuRadioItem({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       "aria-checked": active,
@@ -6567,7 +7118,7 @@ function ChromeMenuActionItem({
   onClick,
   secondary
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       className: "pano-video-chrome-menu-action",
@@ -6582,7 +7133,7 @@ function ChromeMenuActionItem({
       },
       type: "button",
       children: [
-        /* @__PURE__ */ jsx8("span", { children: label }),
+        /* @__PURE__ */ jsx9("span", { children: label }),
         secondary
       ]
     }
@@ -6591,10 +7142,10 @@ function ChromeMenuActionItem({
 function ChromeMenuSectionLabel({
   children
 }) {
-  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-label", children });
+  return /* @__PURE__ */ jsx9("div", { className: "pano-video-chrome-menu-label", children });
 }
 function ChromeMenuDivider() {
-  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-divider" });
+  return /* @__PURE__ */ jsx9("div", { className: "pano-video-chrome-menu-divider" });
 }
 function CaptionsMenu({
   appearance,
@@ -6607,16 +7158,16 @@ function CaptionsMenu({
   panel,
   snapshot
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: panel === "tracks" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsxs3("div", { className: "pano-video-chrome-menu-list", children: [
-          /* @__PURE__ */ jsx8(
+      children: panel === "tracks" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsxs4("div", { className: "pano-video-chrome-menu-list", children: [
+          /* @__PURE__ */ jsx9(
             ChromeMenuRadioItem,
             {
               active: snapshot.trackId === null,
@@ -6629,7 +7180,7 @@ function CaptionsMenu({
           ),
           snapshot.tracks.map((track) => {
             const trackItemId = panoVideoTrackId(track);
-            return /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsx9(
               ChromeMenuRadioItem,
               {
                 active: snapshot.trackId === trackItemId,
@@ -6643,29 +7194,29 @@ function CaptionsMenu({
             );
           })
         ] }),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx9(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Settings",
             onClick: onOpenSettings,
-            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u203A" })
+            secondary: /* @__PURE__ */ jsx9("span", { "aria-hidden": true, children: "\u203A" })
           }
         )
-      ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx8(
+      ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx9(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Back",
             onClick: onShowTracks,
-            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u2039" })
+            secondary: /* @__PURE__ */ jsx9("span", { "aria-hidden": true, children: "\u2039" })
           }
         ),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Font size" }),
-        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx9(ChromeMenuSectionLabel, { children: "Font size" }),
+        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx9(
           ChromeMenuRadioItem,
           {
             active: Number(snapshot.captionAppearance.fontSize) === option.value,
@@ -6677,9 +7228,9 @@ function CaptionsMenu({
           },
           option.id
         )),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Background" }),
-        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx9(ChromeMenuSectionLabel, { children: "Background" }),
+        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx9(
           ChromeMenuRadioItem,
           {
             active: snapshot.captionAppearance.background === option.value,
@@ -6720,7 +7271,7 @@ function VerticalVolumeSlider({
     }
   };
   const percentLabel = formatVolumePercent(volume);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "pano-video-volume-popover",
@@ -6734,7 +7285,7 @@ function VerticalVolumeSlider({
         pointerEvents: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "span",
           {
             "aria-hidden": true,
@@ -6746,14 +7297,14 @@ function VerticalVolumeSlider({
             children: percentLabel
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
               paddingBottom: VOLUME_THUMB_SIZE / 2,
               paddingTop: VOLUME_THUMB_SIZE / 2
             },
-            children: /* @__PURE__ */ jsxs3(
+            children: /* @__PURE__ */ jsxs4(
               "div",
               {
                 "aria-label": "Volume",
@@ -6786,7 +7337,7 @@ function VerticalVolumeSlider({
                 },
                 tabIndex: 0,
                 children: [
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9(
                     "div",
                     {
                       style: {
@@ -6801,7 +7352,7 @@ function VerticalVolumeSlider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9(
                     "div",
                     {
                       style: {
@@ -6860,17 +7411,17 @@ function VolumeControl({
     };
   }, [open, volumeAdjustable]);
   if (!volumeAdjustable) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       ChromeButton,
       {
         appearance,
         label: mutedOrSilent ? "Unmute" : "Mute",
         onClick: onToggleMuted,
-        children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+        children: mutedOrSilent ? /* @__PURE__ */ jsx9(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx9(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
       }
     );
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       "data-pano-video-volume": "",
@@ -6898,7 +7449,7 @@ function VolumeControl({
       },
       ref: rootRef,
       children: [
-        open ? /* @__PURE__ */ jsx8(
+        open ? /* @__PURE__ */ jsx9(
           VerticalVolumeSlider,
           {
             appearance,
@@ -6906,7 +7457,7 @@ function VolumeControl({
             volume: displayVolume
           }
         ) : null,
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           ChromeButton,
           {
             appearance,
@@ -6917,7 +7468,7 @@ function VolumeControl({
               }
               onToggleMuted();
             },
-            children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+            children: mutedOrSilent ? /* @__PURE__ */ jsx9(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx9(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
           }
         )
       ]
@@ -6934,7 +7485,7 @@ function PanoVideoControlsHud({
     () => resolveControlsAppearance(appearance),
     [appearance]
   );
-  const snapshot = useSyncExternalStore3(
+  const snapshot = useSyncExternalStore4(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
@@ -6954,7 +7505,7 @@ function PanoVideoControlsHud({
   const moreMenuId = `${barId}-more`;
   const compact = overlayWidth < COMPACT_CONTROLS_WIDTH;
   const hideTime = overlayWidth < NARROW_CONTROLS_WIDTH;
-  const showFullscreen = isFullscreenEnabled();
+  const showFullscreen = canEnterViewerFullscreen();
   const bumpVisibility = useCallback5(
     (playing) => {
       setVisible(true);
@@ -7077,7 +7628,7 @@ function PanoVideoControlsHud({
   let menuNode = null;
   switch (menu) {
     case "rate":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx9(
         ChromeMenu,
         {
           appearance: resolved,
@@ -7096,7 +7647,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "variant":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx9(
         ChromeMenu,
         {
           appearance: resolved,
@@ -7115,7 +7666,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "captions":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx9(
         CaptionsMenu,
         {
           appearance: resolved,
@@ -7139,7 +7690,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "more":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx9(
         ChromeMenu,
         {
           appearance: resolved,
@@ -7205,9 +7756,9 @@ function PanoVideoControlsHud({
     transition: "opacity 160ms ease",
     zIndex: 2
   };
-  const rateButton = /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
+  const rateButton = /* @__PURE__ */ jsxs4("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
     !compact && menu === "rate" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       ChromeButton,
       {
         appearance: resolved,
@@ -7215,13 +7766,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("rate");
         },
-        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
+        children: /* @__PURE__ */ jsx9("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
       }
     )
   ] });
-  const variantButton = canSwitchVariant ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
+  const variantButton = canSwitchVariant ? /* @__PURE__ */ jsxs4("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
     !compact && menu === "variant" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       ChromeButton,
       {
         appearance: resolved,
@@ -7229,13 +7780,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("variant");
         },
-        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
+        children: /* @__PURE__ */ jsx9("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
       }
     )
   ] }) : null;
-  const captionsButton = showCaptionsMenu ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
+  const captionsButton = showCaptionsMenu ? /* @__PURE__ */ jsxs4("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
     !compact && menu === "captions" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       ChromeButton,
       {
         appearance: resolved,
@@ -7243,18 +7794,18 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("captions");
         },
-        children: /* @__PURE__ */ jsx8("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx8(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
+        children: /* @__PURE__ */ jsx9("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx9(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "pano-video-controls",
       "data-pano-video-controls": "",
       style: barStyle,
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           ChromeButton,
           {
             appearance: resolved,
@@ -7262,11 +7813,11 @@ function PanoVideoControlsHud({
             onClick: () => {
               controller.togglePlay();
             },
-            children: snapshot.playing ? /* @__PURE__ */ jsx8(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx8(Icon, { path: "M5 3.2v9.6L13 8z" })
+            children: snapshot.playing ? /* @__PURE__ */ jsx9(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx9(Icon, { path: "M5 3.2v9.6L13 8z" })
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
-        /* @__PURE__ */ jsx8(
+        hideTime ? null : /* @__PURE__ */ jsx9("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             "aria-label": "Seek",
@@ -7288,8 +7839,8 @@ function PanoVideoControlsHud({
             value: duration > 0 ? snapshot.currentTime : 0
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ jsx8(
+        hideTime ? null : /* @__PURE__ */ jsx9("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
+        /* @__PURE__ */ jsx9(
           VolumeControl,
           {
             appearance: resolved,
@@ -7305,9 +7856,9 @@ function PanoVideoControlsHud({
             volumeAdjustable: snapshot.volumeAdjustable
           }
         ),
-        compact ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
+        compact ? /* @__PURE__ */ jsxs4("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
           menu !== null ? menuNode : null,
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             ChromeButton,
             {
               appearance: resolved,
@@ -7316,15 +7867,15 @@ function PanoVideoControlsHud({
               onClick: () => {
                 toggleMenu("more");
               },
-              children: /* @__PURE__ */ jsx8(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
+              children: /* @__PURE__ */ jsx9(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
             }
           )
-        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+        ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
           rateButton,
           variantButton,
           captionsButton
         ] }),
-        showFullscreen ? /* @__PURE__ */ jsx8(
+        showFullscreen ? /* @__PURE__ */ jsx9(
           ChromeButton,
           {
             appearance: resolved,
@@ -7332,7 +7883,7 @@ function PanoVideoControlsHud({
             onClick: () => {
               fullscreen?.toggleFullscreen();
             },
-            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx8(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
+            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx9(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx9(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
           }
         ) : null
       ]
@@ -7349,13 +7900,13 @@ function PanoVideoControls({ appearance }) {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function PanoVideoChromeBridge({
   fullscreen,
   host,
   overlayElement
 }) {
-  useSyncExternalStore4(
+  useSyncExternalStore5(
     (onStoreChange) => subscribePanoVideoHost(host, onStoreChange),
     () => getPanoVideoHostRevision(host),
     () => getPanoVideoHostRevision(host)
@@ -7364,8 +7915,8 @@ function PanoVideoChromeBridge({
     return null;
   }
   const showDefaultControls = host.controller !== null && host.controls !== false && host.controlClaims === 0;
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    showDefaultControls ? /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    showDefaultControls ? /* @__PURE__ */ jsx10(
       PanoVideoControlsHud,
       {
         appearance: typeof host.controls === "object" ? host.controls : void 0,
@@ -7374,43 +7925,12 @@ function PanoVideoChromeBridge({
         overlayElement
       }
     ) : null,
-    host.captions !== false && host.controller ? /* @__PURE__ */ jsx9(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
+    host.captions !== false && host.controller ? /* @__PURE__ */ jsx10(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
   ] });
 }
 
 // src/webvr/chrome.tsx
-import { useSyncExternalStore as useSyncExternalStore5 } from "react";
-
-// src/webvr/host.ts
-import { createContext as createContext15 } from "react";
-var WebVRRuntimeContext = createContext15(null);
-function createWebVRHost() {
-  return {
-    controller: null,
-    revision: 0,
-    snapshot: {
-      available: false,
-      chrome: true,
-      mode: null,
-      setupOpen: false,
-      settings: { screensize: "auto", profileId: "cardboard-v1" }
-    },
-    listeners: /* @__PURE__ */ new Set()
-  };
-}
-function updateWebVRHost(host, snapshot) {
-  host.snapshot = { ...host.snapshot, ...snapshot };
-  host.revision += 1;
-  for (const listener of host.listeners) {
-    listener();
-  }
-}
-function subscribeWebVRHost(host, listener) {
-  host.listeners.add(listener);
-  return () => {
-    host.listeners.delete(listener);
-  };
-}
+import { useEffect as useEffect13, useState as useState6, useSyncExternalStore as useSyncExternalStore7 } from "react";
 
 // src/webvr/appearance.ts
 var DEFAULT_WEBVR_CHROME_APPEARANCE = {
@@ -7421,6 +7941,46 @@ var DEFAULT_WEBVR_CHROME_APPEARANCE = {
   fontSize: 14
 };
 
+// src/webvr/orientation.ts
+import { useSyncExternalStore as useSyncExternalStore6 } from "react";
+function subscribePortraitOrientation(onChange) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const media = window.matchMedia("(orientation: portrait)");
+  const notify2 = () => onChange();
+  if (typeof media.addEventListener === "function") {
+    media.addEventListener("change", notify2);
+  } else {
+    media.addListener(notify2);
+  }
+  window.addEventListener("orientationchange", notify2);
+  window.addEventListener("resize", notify2);
+  return () => {
+    if (typeof media.removeEventListener === "function") {
+      media.removeEventListener("change", notify2);
+    } else {
+      media.removeListener(notify2);
+    }
+    window.removeEventListener("orientationchange", notify2);
+    window.removeEventListener("resize", notify2);
+  };
+}
+function getPortraitOrientation() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return window.matchMedia("(orientation: portrait)").matches;
+}
+function usePortraitOrientation() {
+  return useSyncExternalStore6(
+    subscribePortraitOrientation,
+    getPortraitOrientation,
+    () => false
+  );
+}
+
 // src/webvr/profiles.ts
 var WEBVR_PROFILE_IDS = [
   "none",
@@ -7527,7 +8087,7 @@ function clamp2(value, min, max) {
 }
 
 // src/webvr/chrome.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -7539,7 +8099,7 @@ function ChromeButton2({
   children,
   onClick
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       className: "pano-webvr-button",
@@ -7576,7 +8136,7 @@ function SetupPanel({
     color: appearance.color,
     fontSize: appearance.fontSize
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       "aria-label": "Mobile VR setup",
@@ -7584,11 +8144,11 @@ function SetupPanel({
       role: "dialog",
       style: panelStyle,
       children: [
-        /* @__PURE__ */ jsx10("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
-        /* @__PURE__ */ jsxs5("label", { className: "pano-webvr-setup-field", children: [
+        /* @__PURE__ */ jsx11("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
+        /* @__PURE__ */ jsxs6("label", { className: "pano-webvr-setup-field", children: [
           "Screen size (inch)",
-          /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsxs6("div", { className: "pano-webvr-setup-row", children: [
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 "aria-label": "Decrease screen size",
@@ -7600,8 +8160,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 "aria-label": "Increase screen size",
@@ -7615,10 +8175,10 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs5("fieldset", { className: "pano-webvr-setup-fieldset", children: [
-          /* @__PURE__ */ jsx10("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
-          /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs6("fieldset", { className: "pano-webvr-setup-fieldset", children: [
+          /* @__PURE__ */ jsx11("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
+          /* @__PURE__ */ jsxs6("div", { className: "pano-webvr-setup-row", children: [
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 "aria-label": "Previous headset preset",
@@ -7628,8 +8188,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 "aria-label": "Next headset preset",
@@ -7641,7 +8201,7 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           ChromeButton2,
           {
             appearance,
@@ -7653,36 +8213,82 @@ function SetupPanel({
     }
   );
 }
+function SessionActions({
+  appearance,
+  host,
+  mode
+}) {
+  return /* @__PURE__ */ jsxs6("div", { className: "pano-webvr-toolbar-actions", children: [
+    mode !== "webxr" ? /* @__PURE__ */ jsx11(
+      ChromeButton2,
+      {
+        appearance,
+        onClick: () => host.controller?.openSetup(),
+        children: "VR Setup"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx11(
+      ChromeButton2,
+      {
+        appearance,
+        onClick: () => void host.controller?.exitVR(),
+        children: "Exit VR"
+      }
+    )
+  ] });
+}
+function RotatePhoneIcon2() {
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "pano-webvr-portrait-icon",
+      fill: "none",
+      height: "48",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 48 48",
+      width: "48",
+      children: [
+        /* @__PURE__ */ jsx11("rect", { height: "28", rx: "3", width: "18", x: "15", y: "6" }),
+        /* @__PURE__ */ jsx11("path", { d: "M10 34c-3-3-4-7-3-11" }),
+        /* @__PURE__ */ jsx11("path", { d: "M8 36l2-2 2 2" }),
+        /* @__PURE__ */ jsx11("path", { d: "M38 14c3 3 4 7 3 11" }),
+        /* @__PURE__ */ jsx11("path", { d: "M40 12l-2 2-2-2" })
+      ]
+    }
+  );
+}
+function PortraitPrompt() {
+  return /* @__PURE__ */ jsxs6("div", { className: "pano-webvr-portrait-prompt", role: "status", children: [
+    /* @__PURE__ */ jsx11(RotatePhoneIcon2, {}),
+    /* @__PURE__ */ jsx11("p", { className: "pano-webvr-portrait-text", children: "Rotate your phone to landscape" })
+  ] });
+}
 function WebVRChromeBridge({ host }) {
-  useSyncExternalStore5(
+  useSyncExternalStore7(
     (listener) => subscribeWebVRHost(host, listener),
     () => host.revision,
     () => host.revision
   );
+  const portrait = usePortraitOrientation();
   const { available, chrome, mode, settings, setupOpen } = host.snapshot;
+  const [mounted, setMounted] = useState6(false);
+  useEffect13(() => {
+    setMounted(true);
+  }, []);
   if (chrome === false || !host.controller) {
     return null;
   }
   const appearance = resolveAppearance(chrome);
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx10("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
-      mode !== "webxr" ? /* @__PURE__ */ jsx10(
-        ChromeButton2,
-        {
-          appearance,
-          onClick: () => host.controller?.openSetup(),
-          children: "VR Setup"
-        }
-      ) : null,
-      /* @__PURE__ */ jsx10(
-        ChromeButton2,
-        {
-          appearance,
-          onClick: () => void host.controller?.exitVR(),
-          children: "Exit VR"
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx10(
+  const showPortraitPrompt = mode === "mobilevr" && mounted && portrait;
+  if (showPortraitPrompt) {
+    return /* @__PURE__ */ jsx11(PortraitPrompt, {});
+  }
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx11("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsx11(SessionActions, { appearance, host, mode }) : /* @__PURE__ */ jsx11(
       ChromeButton2,
       {
         appearance,
@@ -7690,22 +8296,8 @@ function WebVRChromeBridge({ host }) {
         children: available ? "Enter VR" : "VR unavailable"
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ jsx10(
-      "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__ */ jsx10(
-      SetupPanel,
-      {
-        appearance,
-        host,
-        settings
-      }
-    ) : null
+    mode === "fake" ? /* @__PURE__ */ jsx11("p", { className: "pano-webvr-hint", style: { color: appearance.color }, children: "Simulated VR Mode \xB7 Click the view to lock the mouse, then move to look around. Use a headset or phone for real VR." }) : null,
+    setupOpen ? /* @__PURE__ */ jsx11(SetupPanel, { appearance, host, settings }) : null
   ] });
 }
 
@@ -7740,7 +8332,7 @@ import { useFrame as useFrame7, useThree as useThree8 } from "@react-three/fiber
 import { useXR as useXR2, XROrigin } from "@react-three/xr";
 import { useRef as useRef12 } from "react";
 import { Vector3 as Vector36 } from "three";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function PanoramaXROrigin() {
   const originRef = useRef12(null);
   const localHeadPositionRef = useRef12(new Vector36());
@@ -7756,11 +8348,11 @@ function PanoramaXROrigin() {
     origin.position.copy(localHeadPositionRef.current).multiplyScalar(-1);
     origin.updateMatrixWorld();
   }, -100);
-  return /* @__PURE__ */ jsx11(XROrigin, { ref: originRef });
+  return /* @__PURE__ */ jsx12(XROrigin, { ref: originRef });
 }
 
 // src/pano-viewer.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -7805,7 +8397,7 @@ function PanoCursorTree({
   if (!cursors) {
     return children;
   }
-  return /* @__PURE__ */ jsx12(PanoCursorController, { cursors, children });
+  return /* @__PURE__ */ jsx13(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
   const host = useContext16(PanoVideoHostContext);
@@ -7825,10 +8417,10 @@ function DefaultControlChannels({
   if (!claims) {
     return null;
   }
-  return /* @__PURE__ */ jsxs6(DefaultControlChannelContext.Provider, { value: true, children: [
-    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx12(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
-    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx12(TouchControls, { ...touchChannel.props }) : null,
-    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(DefaultControlChannelContext.Provider, { value: true, children: [
+    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx13(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
+    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx13(TouchControls, { ...touchChannel.props }) : null,
+    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx13(
       KeyboardControls,
       {
         ...keyboardChannel.props,
@@ -7861,7 +8453,7 @@ var PanoViewer = forwardRef2(
     const rootRef = useRef13(null);
     const controlsRef = useRef13(null);
     const modalHost = useMemo8(() => createPanoModalHost(), []);
-    const modalOpen = useSyncExternalStore6(modalHost.subscribe, modalHost.getSnapshot, () => false);
+    const modalOpen = useSyncExternalStore8(modalHost.subscribe, modalHost.getSnapshot, () => false);
     const setControlsRuntime = useCallback6((runtime) => {
       controlsRef.current = runtime;
       modalHost.connect(runtime);
@@ -7881,12 +8473,12 @@ var PanoViewer = forwardRef2(
       () => mediaActivation === false ? null : mediaActivation ?? {},
       [mediaActivation]
     );
-    const mediaActivationRevision = useSyncExternalStore6(
+    const mediaActivationRevision = useSyncExternalStore8(
       (onStoreChange) => subscribePanoMediaActivation(mediaActivationHost, onStoreChange),
       () => getPanoMediaActivationRevision(mediaActivationHost),
       () => getPanoMediaActivationRevision(mediaActivationHost)
     );
-    const [mediaActivated, setMediaActivated] = useState6(false);
+    const [mediaActivated, setMediaActivated] = useState7(false);
     const stereoView = useMemo8(() => createWebVRStereoView(), []);
     const xrStore = useMemo8(
       () => createXRStore({
@@ -7933,7 +8525,7 @@ var PanoViewer = forwardRef2(
     }, [runMediaActivation]);
     const hasMediaActivationIntent = mediaActivationRevision >= 0 && hasPanoMediaActivationIntent(mediaActivationHost);
     const shouldActivateMedia = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
-    useEffect13(() => {
+    useEffect14(() => {
       if (!shouldActivateMedia) {
         return;
       }
@@ -8076,50 +8668,68 @@ var PanoViewer = forwardRef2(
       if (typeof document === "undefined") {
         return;
       }
-      if (getFullscreenElement()) {
-        return;
-      }
       const root = rootRef.current;
       if (!root) {
         return;
       }
-      await requestElementFullscreen(root);
-    }, []);
-    const exitFullscreen = useCallback6(async () => {
-      if (typeof document === "undefined") {
+      if (getFullscreenElement() || isIphoneLandscapeFullscreenActive(root)) {
         return;
       }
-      if (!getFullscreenElement()) {
+      if (isFullscreenEnabled()) {
+        await requestElementFullscreen(root);
         return;
       }
-      await exitElementFullscreen();
+      if (supportsIphoneLandscapeFullscreen()) {
+        acquireIphoneLandscapeFullscreen(root, "viewer");
+      }
     }, []);
-    const toggleFullscreen = useCallback6(async () => {
+    const exitFullscreen = useCallback6(async () => {
       if (typeof document === "undefined") {
         return;
       }
+      const root = rootRef.current;
+      if (root && isIphoneLandscapeFullscreenActive(root)) {
+        releaseIphoneLandscapeFullscreen(root, "viewer");
+      }
       if (getFullscreenElement()) {
         await exitElementFullscreen();
+      }
+    }, []);
+    const toggleFullscreen = useCallback6(async () => {
+      if (typeof document === "undefined") {
         return;
       }
       const root = rootRef.current;
       if (!root) {
         return;
       }
-      await requestElementFullscreen(root);
-    }, []);
-    const [isViewerFullscreen, setIsViewerFullscreen] = useState6(false);
+      if (getFullscreenElement() || isIphoneLandscapeFullscreenActive(root)) {
+        await exitFullscreen();
+        return;
+      }
+      await enterFullscreen();
+    }, [enterFullscreen, exitFullscreen]);
+    const [isViewerFullscreen, setIsViewerFullscreen] = useState7(false);
     const { context: overlayContext, setPortalContainer } = usePanoOverlayHost(isViewerFullscreen);
-    useEffect13(() => {
+    const iphoneFullscreenAllowsScroll = useSyncExternalStore8(
+      subscribeIphoneLandscapeFullscreen,
+      () => getIphoneLandscapeFullscreenSnapshot().allowsDocumentScroll,
+      () => false
+    );
+    useEffect14(() => {
       if (modalOpen) contextMenuOverlayApi.setSession(null);
     }, [contextMenuOverlayApi, modalOpen]);
-    useEffect13(() => {
+    useEffect14(() => {
       if (typeof document === "undefined") {
         return;
       }
       const syncFullscreen = () => {
-        const fullscreenElement = getFullscreenElement();
         const root = rootRef.current;
+        if (root && isIphoneLandscapeFullscreenActive(root)) {
+          setIsViewerFullscreen(true);
+          return;
+        }
+        const fullscreenElement = getFullscreenElement();
         if (!fullscreenElement || !root) {
           setIsViewerFullscreen(false);
           return;
@@ -8129,9 +8739,22 @@ var PanoViewer = forwardRef2(
         );
       };
       syncFullscreen();
-      return subscribeFullscreenChange(syncFullscreen);
+      const unsubscribeApi = subscribeFullscreenChange(syncFullscreen);
+      const unsubscribeIphone = subscribeIphoneLandscapeFullscreen(syncFullscreen);
+      return () => {
+        unsubscribeApi();
+        unsubscribeIphone();
+      };
     }, []);
-    useEffect13(() => {
+    useEffect14(() => {
+      const root = rootRef.current;
+      return () => {
+        if (root) {
+          releaseIphoneLandscapeFullscreen(root, "viewer");
+        }
+      };
+    }, []);
+    useEffect14(() => {
       const root = rootRef.current;
       if (!root) {
         return;
@@ -8165,10 +8788,10 @@ var PanoViewer = forwardRef2(
       [cursors]
     );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = useState6(
+    const [legacyAutoRotate, setLegacyAutoRotate] = useState7(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    useEffect13(() => {
+    useEffect14(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
     const isFullscreenRef = useRef13(false);
@@ -8262,7 +8885,7 @@ var PanoViewer = forwardRef2(
       }),
       [style]
     );
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         ...divProps,
@@ -8272,8 +8895,8 @@ var PanoViewer = forwardRef2(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ jsxs6("div", { "data-pano-background": "", inert: modalOpen, style: { position: "absolute", inset: 0 }, children: [
-            /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs7("div", { "data-pano-background": "", inert: modalOpen, style: { position: "absolute", inset: 0 }, children: [
+            /* @__PURE__ */ jsx13(
               Canvas,
               {
                 "aria-label": `${ariaLabel} canvas`,
@@ -8294,25 +8917,25 @@ var PanoViewer = forwardRef2(
                 },
                 style: {
                   ...DEFAULT_CANVAS_STYLE,
-                  touchAction: userControlsEnabled ? "none" : "auto"
+                  touchAction: !userControlsEnabled ? "auto" : iphoneFullscreenAllowsScroll ? "pan-y" : "none"
                 },
-                children: /* @__PURE__ */ jsx12(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
+                children: /* @__PURE__ */ jsx13(XR, { store: xrStore, children: /* @__PURE__ */ jsxs7(
                   WebVRRuntimeContext.Provider,
                   {
                     value: { host: webVRHost, xrStore, stereoView },
                     children: [
-                      /* @__PURE__ */ jsx12(PanoramaXROrigin, {}),
-                      /* @__PURE__ */ jsx12(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx12(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ jsx12(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx12(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx12(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(PanoramaXROrigin, {}),
+                      /* @__PURE__ */ jsx13(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx13(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ jsx13(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx13(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx13(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx13(
                         PanoContextMenuOverlayContext.Provider,
                         {
                           value: contextMenuOverlayApi,
-                          children: /* @__PURE__ */ jsx12(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx12(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx12(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx12(
+                          children: /* @__PURE__ */ jsx13(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx13(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx13(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx13(
                             PanoContextMenuActionsContext.Provider,
                             {
                               value: contextMenuActions,
-                              children: /* @__PURE__ */ jsx12(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx12(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs6(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
-                                /* @__PURE__ */ jsx12(PanoVideoHostReset, {}),
-                                /* @__PURE__ */ jsx12(
+                              children: /* @__PURE__ */ jsx13(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx13(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs7(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
+                                /* @__PURE__ */ jsx13(PanoVideoHostReset, {}),
+                                /* @__PURE__ */ jsx13(
                                   PanoramaViewRuntime,
                                   {
                                     ref: setControlsRuntime,
@@ -8324,7 +8947,7 @@ var PanoViewer = forwardRef2(
                                     options: controlOptions
                                   }
                                 ),
-                                (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx12(
+                                (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx13(
                                   PanoEvents,
                                   {
                                     onViewChange,
@@ -8333,18 +8956,18 @@ var PanoViewer = forwardRef2(
                                     onPointerMove: onPanoramaPointerMove
                                   }
                                 ),
-                                /* @__PURE__ */ jsx12(
+                                /* @__PURE__ */ jsx13(
                                   AutoRotate,
                                   {
                                     enabled: legacyAutoRotate,
                                     speed: legacyAutoRotateOptions.autoRotateSpeed
                                   }
                                 ),
-                                /* @__PURE__ */ jsx12(PanoramaEventSurface, {}),
-                                contextMenuChannel.mount ? /* @__PURE__ */ jsx12(PanoContextMenu, { ...contextMenuChannel.props }) : null,
-                                /* @__PURE__ */ jsxs6(ControlClaimsContext.Provider, { value: controlClaims, children: [
+                                /* @__PURE__ */ jsx13(PanoramaEventSurface, {}),
+                                contextMenuChannel.mount ? /* @__PURE__ */ jsx13(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                                /* @__PURE__ */ jsxs7(ControlClaimsContext.Provider, { value: controlClaims, children: [
                                   children,
-                                  /* @__PURE__ */ jsx12(
+                                  /* @__PURE__ */ jsx13(
                                     DefaultControlChannels,
                                     {
                                       fovSpeed: controlOptions.fovSpeed,
@@ -8365,14 +8988,14 @@ var PanoViewer = forwardRef2(
                 ) })
               }
             ),
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs7(
               "div",
               {
                 className: "pano-chrome-overlay",
                 "data-pano-chrome-overlay": "",
                 ref: setOverlayNode,
                 children: [
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(
                     PanoVideoChromeBridge,
                     {
                       fullscreen: contextMenuActions,
@@ -8380,14 +9003,15 @@ var PanoViewer = forwardRef2(
                       overlayElement
                     }
                   ),
-                  /* @__PURE__ */ jsx12(WebVRChromeBridge, { host: webVRHost })
+                  /* @__PURE__ */ jsx13(WebVRChromeBridge, { host: webVRHost }),
+                  /* @__PURE__ */ jsx13(IphoneLandscapeFullscreenChrome, { webVRHost })
                 ]
               }
             ),
             contextMenuOverlay,
             hotspotAccessibilityControls
           ] }),
-          /* @__PURE__ */ jsx12(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ jsx12(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ jsx13(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ jsx13(
             "div",
             {
               "data-pano-overlay": "",
@@ -8491,7 +9115,7 @@ function hotspotAction(hotspot, trigger) {
 import {
   useContext as useContext22,
   useMemo as useMemo22,
-  useState as useState20
+  useState as useState21
 } from "react";
 
 // src/scenes.tsx
@@ -8500,10 +9124,10 @@ import {
   Fragment as Fragment4,
   useCallback as useCallback8,
   useContext as useContext19,
-  useEffect as useEffect22,
+  useEffect as useEffect23,
   useMemo as useMemo17,
   useRef as useRef22,
-  useState as useState11
+  useState as useState12
 } from "react";
 import {
   LinearSRGBColorSpace,
@@ -8580,7 +9204,7 @@ function isSnapshotTransition(preset) {
 
 // src/scene-transitions/snapshot-hold.tsx
 import { useFrame as useFrame8, useThree as useThree9 } from "@react-three/fiber";
-import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef14 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo9, useRef as useRef14 } from "react";
 import { Vector3 as Vector38 } from "three";
 
 // src/scene-transitions/overlay-utils.ts
@@ -8913,7 +9537,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-hold.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function SnapshotHold({ snapshot }) {
   const { camera, gl } = useThree9();
   const meshRef = useRef14(null);
@@ -8922,7 +9546,7 @@ function SnapshotHold({ snapshot }) {
     () => createSnapshotMaterial("crossfade", snapshot.texture),
     [snapshot.texture]
   );
-  useEffect14(() => () => material.dispose(), [material]);
+  useEffect15(() => () => material.dispose(), [material]);
   useFrame8(() => {
     const mesh = meshRef.current;
     if (!mesh || !isPerspectiveCamera(camera)) {
@@ -8936,9 +9560,9 @@ function SnapshotHold({ snapshot }) {
     );
     material.uniforms.progress.value = 0;
   });
-  return /* @__PURE__ */ jsxs7("mesh", { frustumCulled: false, ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, children: [
-    /* @__PURE__ */ jsx13("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx13("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ jsxs8("mesh", { frustumCulled: false, ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, children: [
+    /* @__PURE__ */ jsx14("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx14("primitive", { attach: "material", object: material })
   ] });
 }
 
@@ -9000,7 +9624,7 @@ function phaseAfterSnapshot(preset, hold) {
 
 // src/scene-transitions/particle-overlay.tsx
 import { useFrame as useFrame9, useThree as useThree10 } from "@react-three/fiber";
-import { useEffect as useEffect15, useMemo as useMemo10, useRef as useRef15 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo10, useRef as useRef15 } from "react";
 import {
   DoubleSide as DoubleSide2,
   InstancedBufferAttribute,
@@ -9010,7 +9634,7 @@ import {
   Vector2 as Vector23,
   Vector3 as Vector39
 } from "three";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -9108,9 +9732,9 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  useEffect15(() => () => geometry.dispose(), [geometry]);
-  useEffect15(() => () => material.dispose(), [material]);
-  useEffect15(() => {
+  useEffect16(() => () => geometry.dispose(), [geometry]);
+  useEffect16(() => () => material.dispose(), [material]);
+  useEffect16(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -9132,7 +9756,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "mesh",
     {
       ref: meshRef,
@@ -9146,9 +9770,9 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 import { useFrame as useFrame10, useThree as useThree11 } from "@react-three/fiber";
-import { useEffect as useEffect16, useMemo as useMemo11, useRef as useRef16 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo11, useRef as useRef16 } from "react";
 import { Vector3 as Vector310 } from "three";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -9167,8 +9791,8 @@ function SnapshotOverlay({
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  useEffect16(() => () => material?.dispose(), [material]);
-  useEffect16(() => {
+  useEffect17(() => () => material?.dispose(), [material]);
+  useEffect17(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
@@ -9197,21 +9821,21 @@ function SnapshotOverlay({
   if (!material) {
     return null;
   }
-  return /* @__PURE__ */ jsxs8("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx15("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx15("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ jsxs9("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
+    /* @__PURE__ */ jsx16("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx16("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ jsx16(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ jsx17(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -9239,7 +9863,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ jsx16(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ jsx17(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -9250,7 +9874,7 @@ function TransitionOverlay(props) {
 
 // src/sphere.tsx
 import { useThree as useThree12 } from "@react-three/fiber";
-import { useEffect as useEffect17, useMemo as useMemo13, useRef as useRef18, useState as useState7 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo13, useRef as useRef18, useState as useState8 } from "react";
 import {
   BackSide as BackSide2,
   LinearFilter,
@@ -9430,7 +10054,7 @@ function injectPanoColorMatrixShader(shader) {
 }
 
 // src/pano-filter/pano-basic-material.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function matrixUniforms(matrix) {
   return {
     matrix: new Matrix4().set(
@@ -9497,7 +10121,7 @@ function PanoBasicMaterial({
       shader.uniforms.uPanoColorMatrixIntensity.value = snapshot.intensity;
     }
   }, [matrix, snapshot.intensity]);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "meshBasicMaterial",
     {
       toneMapped: false,
@@ -9509,14 +10133,14 @@ function PanoBasicMaterial({
 }
 
 // src/sphere.tsx
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = useState7(null);
+  const [texture, setTexture] = useState8(null);
   const onLoadRef = useRef18(onLoad);
   const onErrorRef = useRef18(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect17(() => {
+  useEffect18(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -9555,7 +10179,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  useEffect17(
+  useEffect18(
     () => () => {
       texture?.dispose();
     },
@@ -9596,10 +10220,10 @@ function Sphere({
   const displayTexture = texture ?? previewTexture;
   const readyRef = useRef18(false);
   const detailReporter = useSceneDetailReporter();
-  useEffect17(() => {
+  useEffect18(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!detailReporter) {
       return;
     }
@@ -9608,7 +10232,7 @@ function Sphere({
       detailReporter.report(false);
     };
   }, [detailReporter, texture]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -9618,14 +10242,14 @@ function Sphere({
   if (!displayTexture) {
     return null;
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "mesh",
     {
       rotation: [0, MathUtils5.degToRad(90 + yawOffset2), 0],
       visible,
       children: [
-        /* @__PURE__ */ jsx18("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx19(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -9640,7 +10264,7 @@ function Sphere({
 
 // src/sphere-tile/sphere-tile.tsx
 import { useFrame as useFrame11, useThree as useThree14 } from "@react-three/fiber";
-import { memo, useCallback as useCallback7, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef20, useState as useState9 } from "react";
+import { memo, useCallback as useCallback7, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef20, useState as useState10 } from "react";
 import { BackSide as BackSide3, Frustum, Matrix4 as Matrix42, PerspectiveCamera as PerspectiveCamera4 } from "three";
 
 // src/tile/texture-manager.ts
@@ -9878,10 +10502,10 @@ import { useThree as useThree13 } from "@react-three/fiber";
 import {
   createContext as createContext17,
   useContext as useContext18,
-  useEffect as useEffect18,
+  useEffect as useEffect19,
   useMemo as useMemo14
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var TileTextureManagerContext = createContext17(null);
 function TileTextureManagerProvider({
   children,
@@ -9899,18 +10523,18 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  useEffect18(() => {
+  useEffect19(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ jsx19(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsx20(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
   return useContext18(TileTextureManagerContext);
 }
 
 // src/tile/texture-hooks.ts
-import { useEffect as useEffect19, useRef as useRef19, useState as useState8 } from "react";
+import { useEffect as useEffect20, useRef as useRef19, useState as useState9 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping2,
   LinearFilter as LinearFilter3,
@@ -9918,10 +10542,10 @@ import {
   TextureLoader as TextureLoader3
 } from "three";
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = useState8(null);
+  const [texture, setTexture] = useState9(null);
   const onErrorRef = useRef19(onError);
   onErrorRef.current = onError;
-  useEffect19(() => {
+  useEffect20(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -9958,7 +10582,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  useEffect19(
+  useEffect20(
     () => () => {
       texture?.dispose();
     },
@@ -9967,14 +10591,14 @@ function usePreviewTexture(url, anisotropy, onError) {
   return texture;
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = useState8(() => ({
+  const [managedState, setManagedState] = useState9(() => ({
     manager,
     key,
     url,
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  useEffect19(
+  useEffect20(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -10122,7 +10746,7 @@ function preferredSphereLevel(levels, height, dpr, verticalFov) {
 }
 
 // src/sphere-tile/sphere-tile.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function sphereTileViewShouldRefresh(input) {
   if (input.loadModeChanged || input.managerChanged) {
     return true;
@@ -10146,13 +10770,13 @@ function SpherePatch({
     ),
     [address, yawOffset2, preview]
   );
-  useEffect20(() => () => geometry.dispose(), [geometry]);
-  return /* @__PURE__ */ jsx20(
+  useEffect21(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ jsx21(
     "mesh",
     {
       geometry,
       renderOrder: preview ? -1e3 : -900 + address.level,
-      children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx21(
         PanoBasicMaterial,
         {
           map: texture,
@@ -10179,10 +10803,10 @@ var ManagedPatch = memo(function ManagedPatch2({
     url,
     address
   );
-  useEffect20(() => {
+  useEffect21(() => {
     if (snapshot.texture) ready();
   }, [snapshot.texture, ready]);
-  return snapshot.texture ? /* @__PURE__ */ jsx20(
+  return snapshot.texture ? /* @__PURE__ */ jsx21(
     SpherePatch,
     {
       address,
@@ -10257,10 +10881,10 @@ function SphereTileSource({
       callbacks.current.onReady?.();
     }
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     if (preview) ready();
   }, [preview, ready]);
-  useEffect20(() => {
+  useEffect21(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -10290,7 +10914,7 @@ function SphereTileSource({
     () => sphereTileAddresses({ width: 2, height: 1 }, 0, 2)[0],
     []
   );
-  const [layers, setLayers] = useState9([]);
+  const [layers, setLayers] = useState10([]);
   const detailReporter = useSceneDetailReporter();
   const detailReporterRef = useRef20(detailReporter);
   detailReporterRef.current = detailReporter;
@@ -10384,8 +11008,8 @@ function SphereTileSource({
       )
     );
   });
-  return /* @__PURE__ */ jsxs10("group", { visible, children: [
-    preview ? /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs11("group", { visible, children: [
+    preview ? /* @__PURE__ */ jsx21(
       SpherePatch,
       {
         address: previewAddress,
@@ -10395,7 +11019,7 @@ function SphereTileSource({
       }
     ) : null,
     loadMode !== "preview" ? layers.flatMap(
-      (layer) => layer.addresses.map((address) => /* @__PURE__ */ jsx20(
+      (layer) => layer.addresses.map((address) => /* @__PURE__ */ jsx21(
         ManagedPatch,
         {
           address,
@@ -10413,12 +11037,12 @@ function SphereTile({ multires, ...props }) {
   const token = typeof multires === "string" ? multires : JSON.stringify(multires);
   const config = useMemo15(() => parseSphereMultires(multires), [token]);
   const sourceKey = `${props.baseUrl}\0${token}\0${props.previewUrl}\0${props.urlTemplate ?? ""}\0${props.indexBase ?? 1}`;
-  return /* @__PURE__ */ jsx20(SphereTileSource, { ...props, config }, sourceKey);
+  return /* @__PURE__ */ jsx21(SphereTileSource, { ...props, config }, sourceKey);
 }
 
 // src/tile/tile.tsx
 import { useFrame as useFrame12, useThree as useThree15 } from "@react-three/fiber";
-import { memo as memo2, useEffect as useEffect21, useMemo as useMemo16, useRef as useRef21, useState as useState10 } from "react";
+import { memo as memo2, useEffect as useEffect22, useMemo as useMemo16, useRef as useRef21, useState as useState11 } from "react";
 import {
   Frustum as Frustum2,
   Matrix4 as Matrix43,
@@ -10553,7 +11177,7 @@ function previewAtlasVRange(face, faceOrder = PREVIEW_FACE_ORDER) {
 }
 
 // src/tile/tile.tsx
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
@@ -10597,21 +11221,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  useEffect21(
+  useEffect22(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -10627,7 +11251,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx21(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx22(
     PreviewFace,
     {
       face,
@@ -10651,14 +11275,14 @@ var TileMesh = memo2(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx21("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx22(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -10675,7 +11299,7 @@ var TileLayerMeshes = memo2(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx21(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx22(
     TileMesh,
     {
       address,
@@ -10884,7 +11508,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  useEffect21(() => {
+  useEffect22(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -10895,10 +11519,10 @@ function Tile({
     };
   }, [manager, ownedManager]);
   const readyRef = useRef21(false);
-  useEffect21(() => {
+  useEffect22(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -10913,7 +11537,7 @@ function Tile({
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = useState10([]);
+  const [layers, setLayers] = useState11([]);
   const layerTokenRef = useRef21("");
   const currentLevelRef = useRef21(1);
   const lastUpdateAtRef = useRef21(-Infinity);
@@ -10930,13 +11554,13 @@ function Tile({
   const detailReporter = useSceneDetailReporter();
   const detailReporterRef = useRef21(detailReporter);
   detailReporterRef.current = detailReporter;
-  useEffect21(() => {
+  useEffect22(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -11034,9 +11658,9 @@ function Tile({
       )
     );
   });
-  return /* @__PURE__ */ jsxs11("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx21(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs12("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ jsx22(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
+    layers.map((layer) => /* @__PURE__ */ jsx22(
       TileLayerMeshes,
       {
         layer,
@@ -11049,7 +11673,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function SceneSource({
   scene,
   visible,
@@ -11062,7 +11686,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         Sphere,
         {
           src: scene.src,
@@ -11075,7 +11699,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, viewLimits: _limits, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         Tile,
         {
           ...tileProps,
@@ -11088,7 +11712,7 @@ function SceneSource({
     }
     case "sphereTile": {
       const { id: _id, type: _type, viewLimits: _limits, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         SphereTile,
         {
           ...tileProps,
@@ -11114,7 +11738,7 @@ function SnapshotCapture({
   const { camera, gl, scene, size } = useThree16();
   const capturedRequestRef = useRef22(0);
   const renderTargetRef = useRef22(null);
-  useEffect22(
+  useEffect23(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
@@ -11183,18 +11807,18 @@ function ScenesController({
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = useState11([
+  const [slots, setSlots] = useState12([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = useState11(0);
-  const [liveSlot, setLiveSlot] = useState11(0);
-  const [pendingSlot, setPendingSlot] = useState11(null);
-  const [phase, setPhase] = useState11(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = useState11(0);
-  const [transitionRunId, setTransitionRunId] = useState11(0);
-  const [snapshot, setSnapshot] = useState11(null);
-  const [recoveryKey, setRecoveryKey] = useState11(0);
+  const [activeSlot, setActiveSlot] = useState12(0);
+  const [liveSlot, setLiveSlot] = useState12(0);
+  const [pendingSlot, setPendingSlot] = useState12(null);
+  const [phase, setPhase] = useState12(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = useState12(0);
+  const [transitionRunId, setTransitionRunId] = useState12(0);
+  const [snapshot, setSnapshot] = useState12(null);
+  const [recoveryKey, setRecoveryKey] = useState12(0);
   const requestedSceneIdRef = useRef22(activeSceneId);
   const captureReasonRef = useRef22("start");
   const interactionReleaseRef = useRef22(null);
@@ -11206,7 +11830,7 @@ function ScenesController({
   const waitRef = useRef22(null);
   const waitTimerRef = useRef22(null);
   const detailGenerationRef = useRef22(0);
-  const [detailGeneration, setDetailGeneration] = useState11(0);
+  const [detailGeneration, setDetailGeneration] = useState12(0);
   const mountedRef = useRef22(true);
   const waitForDetailMsRef = useRef22(0);
   waitForDetailMsRef.current = normalizeTransitionWaitMs(transitionWaitForDetailMs);
@@ -11216,11 +11840,11 @@ function ScenesController({
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
-  useEffect22(() => {
+  useEffect23(() => {
     const ready = readySceneRef.current;
     if (ready) controlsRef?.current?.setSceneViewLimits(sceneMap.get(ready.id)?.viewLimits);
   }, [controlsRef, sceneMap]);
-  useEffect22(() => () => {
+  useEffect23(() => () => {
     controlsRef?.current?.setSceneViewLimits(void 0);
   }, [controlsRef]);
   const releaseInteraction = useCallback8(() => {
@@ -11251,7 +11875,7 @@ function ScenesController({
     detailGenerationRef.current = nextGeneration;
     setDetailGeneration(nextGeneration);
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -11270,7 +11894,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, [clearDetailWait]);
-  useEffect22(() => {
+  useEffect23(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -11487,13 +12111,13 @@ function ScenesController({
   ]);
   const snapshotRef = useRef22(snapshot);
   snapshotRef.current = snapshot;
-  useEffect22(() => () => {
+  useEffect23(() => () => {
     releaseInteraction();
     snapshotRef.current?.dispose();
     snapshotRef.current = null;
   }, [releaseInteraction]);
   const { gl } = useThree16();
-  useEffect22(() => {
+  useEffect23(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -11538,8 +12162,8 @@ ${slots[1]?.id ?? ""}`;
       }
     }));
   }, [consumeDetailSignal, detailGeneration, slotSceneKey]);
-  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx23(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -11551,11 +12175,11 @@ ${slots[1]?.id ?? ""}`;
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         SceneDetailContext.Provider,
         {
           value: detailReporters[slot],
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx23(
             SceneSource,
             {
               scene: source,
@@ -11573,8 +12197,8 @@ ${slots[1]?.id ?? ""}`;
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshot !== null && phase === "awaitingDetail" ? /* @__PURE__ */ jsx22(SnapshotHold, { snapshot }) : null,
-    snapshotVisible ? /* @__PURE__ */ jsx22(
+    snapshot !== null && phase === "awaitingDetail" ? /* @__PURE__ */ jsx23(SnapshotHold, { snapshot }) : null,
+    snapshotVisible ? /* @__PURE__ */ jsx23(
       TransitionOverlay,
       {
         snapshot,
@@ -11597,7 +12221,7 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = useState11(
+  const [internalId, setInternalId] = useState12(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
@@ -11617,7 +12241,7 @@ function Scenes({
   resolvedIdRef.current = resolvedId;
   const host = useContext19(ScenesHostContext);
   const phaseRef = useRef22("idle");
-  useEffect22(() => {
+  useEffect23(() => {
     if (!host) {
       return;
     }
@@ -11667,12 +12291,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         ScenesController,
         {
           ...rest,
@@ -11687,7 +12311,7 @@ function Scenes({
 
 // src/hotspot/image-hotspot.tsx
 import { useThree as useThree20 } from "@react-three/fiber";
-import { useEffect as useEffect25, useRef as useRef26, useState as useState14 } from "react";
+import { useEffect as useEffect26, useRef as useRef26, useState as useState15 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping3,
   LinearFilter as LinearFilter5,
@@ -11700,11 +12324,11 @@ import {
 import { useFrame as useFrame16, useThree as useThree19 } from "@react-three/fiber";
 import {
   useContext as useContext21,
-  useEffect as useEffect24,
+  useEffect as useEffect25,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo19,
   useRef as useRef25,
-  useState as useState13
+  useState as useState14
 } from "react";
 import {
   Box3 as Box34,
@@ -11810,7 +12434,7 @@ function suppressFollowingClick(target) {
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-import { useEffect as useEffect23, useMemo as useMemo18, useState as useState12 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo18, useState as useState13 } from "react";
 
 // src/webvr/stereo-html.tsx
 import { useFrame as useFrame14, useThree as useThree17 } from "@react-three/fiber";
@@ -11818,15 +12442,15 @@ import {
   useContext as useContext20,
   useLayoutEffect as useLayoutEffect5,
   useRef as useRef23,
-  useSyncExternalStore as useSyncExternalStore7
+  useSyncExternalStore as useSyncExternalStore9
 } from "react";
 import { createRoot } from "react-dom/client";
 import { Vector3 as Vector314 } from "three";
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function useFallbackStereoView() {
   const runtime = useContext20(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = useSyncExternalStore7(
+  const fallback = useSyncExternalStore9(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -11892,7 +12516,7 @@ function ProjectedHtml({
   }, [target]);
   useLayoutEffect5(() => {
     overlay.current?.root.render(
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         "div",
         {
           "aria-hidden": eye === "right" || void 0,
@@ -11904,18 +12528,29 @@ function ProjectedHtml({
     updatePosition();
   });
   useFrame14(updatePosition);
-  return /* @__PURE__ */ jsx23("group", { ref: group });
+  return /* @__PURE__ */ jsx24("group", { ref: group });
 }
 function PanoHtml(props) {
+  const runtime = useContext20(WebVRRuntimeContext);
+  const host = runtime?.host ?? null;
+  const mode = useSyncExternalStore9(
+    (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
+    () => host?.snapshot.mode ?? null,
+    () => null
+  );
+  const portrait = usePortraitOrientation();
   const stereoView = useFallbackStereoView();
-  return stereoView ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
-    /* @__PURE__ */ jsx23(ProjectedHtml, { ...props, stereoView, eye: "left" }),
-    /* @__PURE__ */ jsx23(ProjectedHtml, { ...props, stereoView, eye: "right" })
-  ] }) : /* @__PURE__ */ jsx23(ProjectedHtml, { ...props });
+  if (mode === "mobilevr" && portrait) {
+    return null;
+  }
+  return stereoView ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx24(ProjectedHtml, { ...props, stereoView, eye: "left" }),
+    /* @__PURE__ */ jsx24(ProjectedHtml, { ...props, stereoView, eye: "right" })
+  ] }) : /* @__PURE__ */ jsx24(ProjectedHtml, { ...props });
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -11987,8 +12622,8 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = useState12(false);
-  useEffect23(() => {
+  const [imageFailed, setImageFailed] = useState13(false);
+  useEffect24(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
@@ -12018,8 +12653,8 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ jsx24(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs14("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
-    showImage ? /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs15("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
+    showImage ? /* @__PURE__ */ jsx25(
       "img",
       {
         alt: content.imageAlt ?? content.text ?? "",
@@ -12028,7 +12663,7 @@ function HotspotTooltip({
         src: content.image
       }
     ) : null,
-    content.text ? /* @__PURE__ */ jsx24(
+    content.text ? /* @__PURE__ */ jsx25(
       "p",
       {
         className: "pano-hotspot-tooltip-text",
@@ -12102,7 +12737,7 @@ import {
   PerspectiveCamera as PerspectiveCamera7,
   Vector3 as Vector316
 } from "three";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var LINE_WORLD_POSITION = new Vector316();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
@@ -12148,7 +12783,7 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     Line,
     {
       ref: lineRef,
@@ -12170,7 +12805,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/hotspot-anchor.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -12558,15 +13193,15 @@ function HotspotAnchor({
   const updateDragRef = useRef25(() => void 0);
   const endDragRef = useRef25(() => void 0);
   const suppressNextClickRef = useRef25(false);
-  const [hovered, setHovered] = useState13(false);
-  const [dragging, setDragging] = useState13(false);
-  const [pinned, setPinned] = useState13(false);
+  const [hovered, setHovered] = useState14(false);
+  const [dragging, setDragging] = useState14(false);
+  const [pinned, setPinned] = useState14(false);
   const tooltipContent = useMemo19(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
   const normalizedPosition = normalizePanoPosition(position);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!hotspotTargetRegistry) {
       return;
     }
@@ -12600,7 +13235,7 @@ function HotspotAnchor({
     return geometry;
   }, []);
   const eventHovered = useRef25(false);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!visible || !interactive || pointerEvents === "none") eventHovered.current = false;
   }, [visible, interactive, pointerEvents]);
   const acceptsPointer = acceptsHotspotPointerEvents(interactive, pointerEvents);
@@ -12624,7 +13259,7 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  useEffect24(
+  useEffect25(
     () => () => {
       const dragState = dragStateRef.current;
       dragState?.stopTracking();
@@ -12633,7 +13268,7 @@ function HotspotAnchor({
     },
     []
   );
-  useEffect24(() => {
+  useEffect25(() => {
     if (!cursorApi) {
       return;
     }
@@ -12655,14 +13290,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  useEffect24(
+  useEffect25(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  useEffect24(() => () => focusGeometry.dispose(), [focusGeometry]);
-  useEffect24(() => {
+  useEffect25(() => () => focusGeometry.dispose(), [focusGeometry]);
+  useEffect25(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -12671,12 +13306,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (acceptsPointer) {
       return;
     }
@@ -12847,7 +13482,7 @@ function HotspotAnchor({
       startPosition
     });
   };
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "group",
     {
       ref: groupRef,
@@ -12951,18 +13586,18 @@ function HotspotAnchor({
         endDragRef.current(event.nativeEvent, true);
       } : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx26(
+        focused ? focusContent ?? /* @__PURE__ */ jsx27(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx26("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx27("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        selected && useAngularScale ? /* @__PURE__ */ jsx26("group", { ref: selectionFrameRef, children: /* @__PURE__ */ jsx26(
+        selected && useAngularScale ? /* @__PURE__ */ jsx27("group", { ref: selectionFrameRef, children: /* @__PURE__ */ jsx27(
           HotspotStrokeLine,
           {
             points: SELECTION_BORDER_POINTS,
@@ -12972,7 +13607,7 @@ function HotspotAnchor({
             renderOrder: renderOrder + 1
           }
         ) }) : null,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx26("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx26(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx27("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx27(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -12993,7 +13628,7 @@ import {
   MeshBasicMaterial,
   Vector2 as Vector25
 } from "three";
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new Vector25();
 var RAYCAST_HITS = [];
@@ -13095,9 +13730,9 @@ function HotspotPlane({
   map,
   opacity
 }) {
-  return /* @__PURE__ */ jsxs16("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ jsx27("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs17("mesh", { raycast: hotspotPlaneRaycast, children: [
+    /* @__PURE__ */ jsx28("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx28(
       PanoBasicMaterial,
       {
         target: "hotspot",
@@ -13113,15 +13748,15 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = useThree20((state) => state.gl);
-  const [texture, setTexture] = useState14(null);
+  const [texture, setTexture] = useState15(null);
   const onLoadRef = useRef26(onLoad);
   const onErrorRef = useRef26(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect25(() => {
+  useEffect26(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13159,7 +13794,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  useEffect25(
+  useEffect26(
     () => () => {
       texture?.dispose();
     },
@@ -13177,11 +13812,11 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx28(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx28(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx29(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx29(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect26, useRef as useRef27, useState as useState15 } from "react";
+import { useEffect as useEffect27, useRef as useRef27, useState as useState16 } from "react";
 import {
   CanvasTexture,
   ClampToEdgeWrapping as ClampToEdgeWrapping4,
@@ -13189,7 +13824,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter3,
   SRGBColorSpace as SRGBColorSpace5
 } from "three";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -13378,12 +14013,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = useState15(null);
+  const [texture, setTexture] = useState16(null);
   const onLoadRef = useRef27(onLoad);
   const onErrorRef = useRef27(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect26(() => {
+  useEffect27(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -13409,20 +14044,20 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ jsx29(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx29(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx30(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx30(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx29(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx30(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx29(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx30(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
 import { useFrame as useFrame17, useThree as useThree21 } from "@react-three/fiber";
-import { useEffect as useEffect27, useRef as useRef28, useState as useState16 } from "react";
+import { useEffect as useEffect28, useRef as useRef28, useState as useState17 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
   LinearFilter as LinearFilter7,
@@ -13430,7 +14065,7 @@ import {
   SRGBColorSpace as SRGBColorSpace6,
   TextureLoader as TextureLoader5
 } from "three";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -13445,12 +14080,12 @@ function useSpriteTexture({
   onLoadProgress
 }) {
   const gl = useThree21((state) => state.gl);
-  const [texture, setTexture] = useState16(null);
+  const [texture, setTexture] = useState17(null);
   const onErrorRef = useRef28(onError);
   const onLoadProgressRef = useRef28(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  useEffect27(() => {
+  useEffect28(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13491,7 +14126,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  useEffect27(
+  useEffect28(
     () => () => {
       texture?.dispose();
     },
@@ -13520,7 +14155,7 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = useState16(0);
+  const [frameIndex, setFrameIndex] = useState17(0);
   const elapsedRef = useRef28(0);
   const frameIndexRef = useRef28(0);
   const endedRef = useRef28(false);
@@ -13531,13 +14166,13 @@ function SequenceHotspot({
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  useEffect27(() => {
+  useEffect28(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!texture) {
       return;
     }
@@ -13551,13 +14186,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!texture) {
       return;
     }
@@ -13606,12 +14241,12 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx30(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx30(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx31(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx31(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
 import { useThree as useThree22 } from "@react-three/fiber";
-import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect8, useRef as useRef29, useState as useState17 } from "react";
+import { useEffect as useEffect29, useLayoutEffect as useLayoutEffect8, useRef as useRef29, useState as useState18 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
   LinearFilter as LinearFilter8,
@@ -13672,7 +14307,7 @@ function mountTextureVideo(video, canvas) {
 }
 
 // src/hotspot/video-hotspot.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -13681,10 +14316,10 @@ function clampVolume2(volume) {
 }
 function usePosterTexture(id, poster, onError) {
   const gl = useThree22((state) => state.gl);
-  const [texture, setTexture] = useState17(null);
+  const [texture, setTexture] = useState18(null);
   const onErrorRef = useRef29(onError);
   onErrorRef.current = onError;
-  useEffect28(() => {
+  useEffect29(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -13721,7 +14356,7 @@ function usePosterTexture(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  useEffect28(
+  useEffect29(
     () => () => {
       texture?.dispose();
     },
@@ -13740,14 +14375,14 @@ function useVideoResource({
   src
 }) {
   const gl = useThree22((state) => state.gl);
-  const [resource, setResource] = useState17(null);
+  const [resource, setResource] = useState18(null);
   const onEndedRef = useRef29(onEnded);
   const onErrorRef = useRef29(onError);
   const onPlaybackStateChangeRef = useRef29(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect28(() => {
+  useEffect29(() => {
     if (!src) {
       setResource(null);
       return;
@@ -13874,7 +14509,7 @@ function VideoHotspot({
     applyInlineVideoPlayback(resource.video, playsInline);
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!resource) {
       return;
     }
@@ -13897,12 +14532,12 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx31(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx31(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
 import { useFrame as useFrame18, useThree as useThree23 } from "@react-three/fiber";
-import { useEffect as useEffect29, useRef as useRef30, useState as useState18 } from "react";
+import { useEffect as useEffect30, useRef as useRef30, useState as useState19 } from "react";
 import {
   CanvasTexture as CanvasTexture2,
   ClampToEdgeWrapping as ClampToEdgeWrapping7,
@@ -13957,7 +14592,7 @@ function audioSpatialFromView(camera, position, range) {
 }
 
 // src/hotspot/audio-hotspot.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -14021,8 +14656,8 @@ function createSpeakerTexture(state) {
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = useState18({ playing: null, stopped: null });
-  useEffect29(() => {
+  const [textures, setTextures] = useState19({ playing: null, stopped: null });
+  useEffect30(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -14039,10 +14674,10 @@ function useSpeakerTextures(enabled) {
 }
 function useIconTexture(icon, enabled, onError, id) {
   const gl = useThree23((state) => state.gl);
-  const [texture, setTexture] = useState18(null);
+  const [texture, setTexture] = useState19(null);
   const onErrorRef = useRef30(onError);
   onErrorRef.current = onError;
-  useEffect29(() => {
+  useEffect30(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -14079,7 +14714,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  useEffect29(
+  useEffect30(
     () => () => {
       texture?.dispose();
     },
@@ -14099,7 +14734,7 @@ function useAudioHowl({
   src,
   format
 }) {
-  const [howl, setHowl] = useState18(null);
+  const [howl, setHowl] = useState19(null);
   const playingRef = useRef30(playing);
   const loopRef = useRef30(loop ?? false);
   const onEndedRef = useRef30(onEnded);
@@ -14114,7 +14749,7 @@ function useAudioHowl({
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
   const formatsKey = sourceList(format).join("\0");
-  useEffect29(() => {
+  useEffect30(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -14152,7 +14787,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey, formatsKey]);
-  useEffect29(() => {
+  useEffect30(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -14206,7 +14841,7 @@ function AudioHotspot({
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  useEffect29(() => {
+  useEffect30(() => {
     if (!howl) {
       return;
     }
@@ -14216,7 +14851,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -14247,11 +14882,11 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx32(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx33(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
-import { useEffect as useEffect30, useRef as useRef31, useState as useState19 } from "react";
+import { useEffect as useEffect31, useRef as useRef31, useState as useState20 } from "react";
 import { useFrame as useFrame19, useThree as useThree24 } from "@react-three/fiber";
 import {
   CanvasTexture as CanvasTexture3,
@@ -14261,7 +14896,7 @@ import {
   PerspectiveCamera as PerspectiveCamera9,
   SRGBColorSpace as SRGBColorSpace9
 } from "three";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var TEXT_RASTER_SUPERSAMPLE = 2;
 var TEXT_RASTER_MAX_LONG_SIDE = 4096;
@@ -14557,7 +15192,7 @@ function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
       Math.max(layout.canvasWidth, layout.canvasHeight)
     );
   };
-  const [rasterLong, setRasterLong] = useState19(measure);
+  const [rasterLong, setRasterLong] = useState20(measure);
   const measured = measure();
   if (measured !== rasterLong) {
     setRasterLong(measured);
@@ -14570,12 +15205,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] = useState19(null);
+  const [texture, setTexture] = useState20(null);
   const onLoadRef = useRef31(onLoad);
   const onErrorRef = useRef31(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect30(() => {
+  useEffect31(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -14679,13 +15314,13 @@ function TextHotspot({
     onLoad,
     onError
   );
-  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx34(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 import { Html } from "@react-three/drei";
 import { DoubleSide as DoubleSide4 } from "three";
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -14742,7 +15377,7 @@ function IframeHotspot({
     interactive,
     pointerEvents
   );
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14751,9 +15386,9 @@ function IframeHotspot({
       pointerEvents,
       width,
       children: [
-        /* @__PURE__ */ jsxs17("mesh", { children: [
-          /* @__PURE__ */ jsx34("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsxs18("mesh", { children: [
+          /* @__PURE__ */ jsx35("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ jsx35(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -14764,7 +15399,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -14779,7 +15414,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx35(
               "iframe",
               {
                 allow,
@@ -14801,7 +15436,7 @@ function IframeHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useEffect as useEffect31, useMemo as useMemo20, useRef as useRef32 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo20, useRef as useRef32 } from "react";
 import {
   BufferGeometry as BufferGeometry2,
   DoubleSide as DoubleSide5,
@@ -14812,7 +15447,7 @@ import {
   Vector2 as Vector26,
   Vector3 as Vector319
 } from "three";
-import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -15082,10 +15717,10 @@ function PolygonHotspot({
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
   const startVerticesRef = useRef32(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  useEffect31(() => {
+  useEffect32(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  useEffect31(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  useEffect32(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -15100,7 +15735,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -15115,7 +15750,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx35(
+      focusContent: /* @__PURE__ */ jsx36(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -15137,7 +15772,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx35("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx36(
           "meshBasicMaterial",
           {
             color: fill,
@@ -15147,7 +15782,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -15165,14 +15800,14 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useEffect as useEffect32, useMemo as useMemo21, useRef as useRef33 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo21, useRef as useRef33 } from "react";
 import {
   MathUtils as MathUtils12,
   Matrix4 as Matrix46,
   Quaternion as Quaternion6,
   Vector3 as Vector320
 } from "three";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -15298,7 +15933,7 @@ function PolylineHotspot({
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
   const startVerticesRef = useRef33(null);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -15312,7 +15947,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -15326,7 +15961,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx36(
+      focusContent: /* @__PURE__ */ jsx37(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -15347,7 +15982,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx37(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -15364,7 +15999,7 @@ function PolylineHotspot({
 }
 
 // src/project-scenes.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function isMedia(hotspot) {
   return hotspot.type === "audio" || hotspot.type === "video" || hotspot.type === "sequence";
 }
@@ -15411,7 +16046,7 @@ function ProjectHotspotSource({
   const common = { ariaLabel: hotspot.label || hotspot.id, onClick, onHoverChange };
   switch (hotspot.type) {
     case "image":
-      return /* @__PURE__ */ jsx37(
+      return /* @__PURE__ */ jsx38(
         ImageHotspot,
         {
           ...hotspotProps(hotspot),
@@ -15420,7 +16055,7 @@ function ProjectHotspotSource({
         }
       );
     case "graphic":
-      return /* @__PURE__ */ jsx37(
+      return /* @__PURE__ */ jsx38(
         GraphicHotspot,
         {
           ...hotspotProps(hotspot),
@@ -15429,9 +16064,9 @@ function ProjectHotspotSource({
         }
       );
     case "text":
-      return /* @__PURE__ */ jsx37(TextHotspot, { ...hotspotProps(hotspot), ...common, onError });
+      return /* @__PURE__ */ jsx38(TextHotspot, { ...hotspotProps(hotspot), ...common, onError });
     case "iframe":
-      return /* @__PURE__ */ jsx37(
+      return /* @__PURE__ */ jsx38(
         IframeHotspot,
         {
           ...hotspotProps(hotspot),
@@ -15441,11 +16076,11 @@ function ProjectHotspotSource({
         }
       );
     case "polygon":
-      return /* @__PURE__ */ jsx37(PolygonHotspot, { ...hotspotProps(hotspot), ...common });
+      return /* @__PURE__ */ jsx38(PolygonHotspot, { ...hotspotProps(hotspot), ...common });
     case "polyline":
-      return /* @__PURE__ */ jsx37(PolylineHotspot, { ...hotspotProps(hotspot), ...common });
+      return /* @__PURE__ */ jsx38(PolylineHotspot, { ...hotspotProps(hotspot), ...common });
     case "sequence":
-      return /* @__PURE__ */ jsx37(
+      return /* @__PURE__ */ jsx38(
         SequenceHotspot,
         {
           ...hotspotProps(hotspot),
@@ -15456,7 +16091,7 @@ function ProjectHotspotSource({
         }
       );
     case "video":
-      return /* @__PURE__ */ jsx37(
+      return /* @__PURE__ */ jsx38(
         VideoHotspot,
         {
           ...hotspotProps(hotspot),
@@ -15468,7 +16103,7 @@ function ProjectHotspotSource({
         }
       );
     case "audio":
-      return /* @__PURE__ */ jsx37(
+      return /* @__PURE__ */ jsx38(
         AudioHotspot,
         {
           ...hotspotProps(hotspot),
@@ -15491,7 +16126,7 @@ function ProjectHotspot({
   renderHotspot,
   execute
 }) {
-  const [playing, setPlaying] = useState20(
+  const [playing, setPlaying] = useState21(
     "playing" in hotspot ? hotspot.playing ?? false : false
   );
   const togglePlayback = () => setPlaying((value) => !value);
@@ -15512,7 +16147,7 @@ function ProjectHotspot({
   };
   const onClick = (event) => dispatch("click", event);
   const onHoverChange = (hovered, event) => dispatch(hovered ? "pointerenter" : "pointerleave", event);
-  const renderDefault = () => /* @__PURE__ */ jsx37(
+  const renderDefault = () => /* @__PURE__ */ jsx38(
     ProjectHotspotSource,
     {
       hotspot,
@@ -15550,7 +16185,7 @@ function ProjectScenes({
   const controls = useContext22(PanoramaViewContext);
   if (!controls)
     throw new Error("<ProjectScenes> must be rendered inside <PanoViewer>.");
-  const [selection, setSelection] = useState20({
+  const [selection, setSelection] = useState21({
     project,
     id: project.initialSceneId
   });
@@ -15570,7 +16205,7 @@ function ProjectScenes({
     if (activeSceneId === void 0) setSelection({ project, id });
     onActiveSceneIdChange?.(id);
   };
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Scenes,
     {
       ...options,
@@ -15582,7 +16217,7 @@ function ProjectScenes({
         if (view) controls.current?.setView(view, { immediate: true });
         onSceneReady?.(id);
       },
-      renderHotspots: (scene) => entries.get(scene.id)?.hotspots.map((hotspot) => /* @__PURE__ */ jsx37(
+      renderHotspots: (scene) => entries.get(scene.id)?.hotspots.map((hotspot) => /* @__PURE__ */ jsx38(
         ProjectHotspot,
         {
           hotspot,
@@ -15614,7 +16249,7 @@ function ProjectScenes({
 }
 
 // src/background-audio.tsx
-import { useContext as useContext23, useEffect as useEffect33, useMemo as useMemo23, useRef as useRef34, useState as useState21 } from "react";
+import { useContext as useContext23, useEffect as useEffect34, useMemo as useMemo23, useRef as useRef34, useState as useState22 } from "react";
 var DEFAULT_FADE_MS = 400;
 function resolveFadeMs(value) {
   if (!Number.isFinite(value)) {
@@ -15661,7 +16296,7 @@ function BackgroundAudio({
     throw new Error("<BackgroundAudio> must be rendered inside <PanoViewer>.");
   }
   const isControlled = controlledPlaying !== void 0;
-  const [internalPlaying, setInternalPlaying] = useState21(defaultPlaying);
+  const [internalPlaying, setInternalPlaying] = useState22(defaultPlaying);
   const playing = isControlled ? controlledPlaying : internalPlaying;
   const urls = resolveBackgroundAudioUrls(src, sources, sceneId);
   usePanoMediaActivationIntent(playing && urls.length > 0);
@@ -15773,7 +16408,7 @@ function BackgroundAudio({
     []
   );
   const bgmHost = useContext23(BackgroundAudioHostContext);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!bgmHost) {
       return;
     }
@@ -15786,7 +16421,7 @@ function BackgroundAudio({
       }
     };
   }, [bgmHost, controller]);
-  useEffect33(() => {
+  useEffect34(() => {
     return () => {
       fadingInRef.current = false;
       isFirstTrackRef.current = true;
@@ -15798,7 +16433,7 @@ function BackgroundAudio({
       outgoingRef.current = [];
     };
   }, []);
-  useEffect33(() => {
+  useEffect34(() => {
     const previous = currentRef.current;
     if (previous?.key === trackKey && previous.crossOrigin === crossOrigin) {
       return;
@@ -15901,7 +16536,7 @@ function BackgroundAudio({
       retire(previous);
     }
   }, [crossOrigin, trackKey]);
-  useEffect33(() => {
+  useEffect34(() => {
     const howl = currentRef.current?.handle.howl;
     if (!howl) {
       return;
@@ -15921,7 +16556,7 @@ function BackgroundAudio({
       howl.play();
     }
   }, [playing, trackKey]);
-  useEffect33(() => {
+  useEffect34(() => {
     const slot = currentRef.current;
     if (!slot) {
       return;
@@ -15936,7 +16571,7 @@ function BackgroundAudio({
       volume: clampAudioVolume(volumeRef.current)
     });
   }, [loop, muted, trackKey, volume]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!pauseWhenHidden) {
       return;
     }
@@ -15962,7 +16597,7 @@ function BackgroundAudio({
 }
 
 // src/pano-filter/pano-filter.tsx
-import { useContext as useContext24, useEffect as useEffect34, useMemo as useMemo24 } from "react";
+import { useContext as useContext24, useEffect as useEffect35, useMemo as useMemo24 } from "react";
 function PanoFilter({
   preset = "none",
   intensity,
@@ -15984,13 +16619,13 @@ function PanoFilter({
     }),
     [enabled, intensity, preset, colorMatrix, colorMatrixScope]
   );
-  useEffect34(() => {
+  useEffect35(() => {
     claimPanoFilter(host);
     return () => {
       releasePanoFilter(host);
     };
   }, [host]);
-  useEffect34(() => {
+  useEffect35(() => {
     setPanoFilterSnapshot(host, snapshot);
   }, [host, snapshot]);
   return null;
@@ -16002,10 +16637,10 @@ import {
   forwardRef as forwardRef3,
   useCallback as useCallback9,
   useContext as useContext25,
-  useEffect as useEffect35,
+  useEffect as useEffect36,
   useImperativeHandle as useImperativeHandle3,
   useRef as useRef35,
-  useState as useState22
+  useState as useState23
 } from "react";
 import { Quaternion as Quaternion7 } from "three";
 var deviceOrientationPermissionState = "unknown";
@@ -16042,8 +16677,8 @@ var Gyro = forwardRef3(function Gyro2({
   const controlsRef = useContext25(PanoramaViewContext);
   const eventBus = useContext25(PanoEventBusContext);
   const { gl } = useThree25();
-  const [internallyDisabled, setInternallyDisabled] = useState22(false);
-  const [available, setAvailableState] = useState22(false);
+  const [internallyDisabled, setInternallyDisabled] = useState23(false);
+  const [available, setAvailableState] = useState23(false);
   const availableRef = useRef35(false);
   const availabilityReportedRef = useRef35(null);
   const activeRef = useRef35(false);
@@ -16232,19 +16867,19 @@ var Gyro = forwardRef3(function Gyro2({
     }),
     [requestPermission, resetSensor]
   );
-  useEffect35(() => {
+  useEffect36(() => {
     if (!enabled) {
       setInternallyDisabled(false);
     }
   }, [enabled]);
-  useEffect35(() => {
+  useEffect36(() => {
     const supported = typeof window !== "undefined" && window.isSecureContext && typeof DeviceOrientationEvent !== "undefined" && (desktopSupport || isMobileDevice());
     setAvailable(supported);
   }, [desktopSupport, setAvailable]);
-  useEffect35(() => {
+  useEffect36(() => {
     controlsRef.current?.setGyroTouchMode(touchMode);
   }, [controlsRef, touchMode]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!enabled || internallyDisabled || touchMode !== "disablegyro") {
       return;
     }
@@ -16258,7 +16893,7 @@ var Gyro = forwardRef3(function Gyro2({
       gl.domElement.removeEventListener("pointerdown", onPointerDown);
     };
   }, [enabled, gl, internallyDisabled, touchMode]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!enabled || internallyDisabled || !available) {
       deactivate();
       return;
@@ -16485,11 +17120,11 @@ import {
   forwardRef as forwardRef4,
   useCallback as useCallback10,
   useContext as useContext27,
-  useEffect as useEffect39,
+  useEffect as useEffect40,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo26,
   useRef as useRef39,
-  useState as useState23
+  useState as useState24
 } from "react";
 
 // src/webvr/detect.ts
@@ -16511,6 +17146,161 @@ async function detectWebVRCapabilities() {
   return { webxr, mobile, sensor };
 }
 
+// src/webvr/presentation.ts
+var PRESENTATION_PROPERTIES = [
+  "background",
+  "height",
+  "inset",
+  "left",
+  "position",
+  "top",
+  "width",
+  "z-index"
+];
+var PRESENTATION_STYLE = {
+  background: "#000",
+  height: "100dvh",
+  inset: "0",
+  left: "0",
+  position: "fixed",
+  top: "0",
+  width: "100%",
+  "z-index": "2147483000"
+};
+var SCROLL_LOCK_OVERFLOW = "hidden";
+var activePresentation = null;
+var iphonePresentationElement = null;
+function capturePresentationStyle(element) {
+  const snapshot = {};
+  for (const property of PRESENTATION_PROPERTIES) {
+    snapshot[property] = element.style.getPropertyValue(property);
+  }
+  return snapshot;
+}
+function applyPresentationStyle(element) {
+  for (const property of PRESENTATION_PROPERTIES) {
+    element.style.setProperty(property, PRESENTATION_STYLE[property]);
+  }
+}
+function restorePresentationStyle(element, snapshot) {
+  for (const property of PRESENTATION_PROPERTIES) {
+    const previous = snapshot[property];
+    if (previous) {
+      element.style.setProperty(property, previous);
+    } else {
+      element.style.removeProperty(property);
+    }
+  }
+}
+function lockScroll() {
+  const documentElement = document.documentElement;
+  const body = document.body;
+  const snapshot = {
+    bodyOverflow: body.style.overflow,
+    documentOverflow: documentElement.style.overflow
+  };
+  documentElement.style.overflow = SCROLL_LOCK_OVERFLOW;
+  body.style.overflow = SCROLL_LOCK_OVERFLOW;
+  return snapshot;
+}
+function unlockScroll(snapshot) {
+  document.documentElement.style.overflow = snapshot.documentOverflow;
+  document.body.style.overflow = snapshot.bodyOverflow;
+}
+async function tryLockLandscape() {
+  const orientation2 = window.screen?.orientation;
+  if (typeof orientation2?.lock !== "function") {
+    return;
+  }
+  try {
+    await orientation2.lock("landscape");
+  } catch {
+  }
+}
+function tryUnlockOrientation() {
+  const orientation2 = window.screen?.orientation;
+  if (typeof orientation2?.unlock !== "function") {
+    return;
+  }
+  try {
+    orientation2.unlock();
+  } catch {
+  }
+}
+async function enterWebVRPresentation(element) {
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+  if (supportsIphoneLandscapeFullscreen()) {
+    if (iphonePresentationElement && iphonePresentationElement !== element) {
+      releaseIphoneLandscapeFullscreen(iphonePresentationElement, "vr");
+    }
+    iphonePresentationElement = element;
+    acquireIphoneLandscapeFullscreen(element, "vr");
+    void tryLockLandscape();
+    return;
+  }
+  if (activePresentation?.element === element) {
+    void requestElementFullscreen(element).catch(() => {
+    });
+    void tryLockLandscape();
+    return;
+  }
+  if (activePresentation) {
+    leaveWebVRPresentation();
+  }
+  activePresentation = {
+    element,
+    style: capturePresentationStyle(element),
+    scroll: lockScroll()
+  };
+  applyPresentationStyle(element);
+  try {
+    await requestElementFullscreen(element);
+  } catch {
+  }
+  void tryLockLandscape();
+}
+function leaveWebVRPresentation() {
+  if (iphonePresentationElement) {
+    const element = iphonePresentationElement;
+    iphonePresentationElement = null;
+    releaseIphoneLandscapeFullscreen(element, "vr");
+    tryUnlockOrientation();
+  }
+  const presentation = activePresentation;
+  if (!presentation) {
+    if (getFullscreenElement()) {
+      void exitElementFullscreen();
+    }
+    return;
+  }
+  activePresentation = null;
+  restorePresentationStyle(presentation.element, presentation.style);
+  unlockScroll(presentation.scroll);
+  tryUnlockOrientation();
+  const fullscreen = getFullscreenElement();
+  if (fullscreen && (fullscreen === presentation.element || presentation.element.contains(fullscreen))) {
+    void exitElementFullscreen();
+  }
+}
+function subscribeWebVRPresentationExit(element, onExit) {
+  if (!(element instanceof HTMLElement)) {
+    return () => {
+    };
+  }
+  return subscribeFullscreenChange(() => {
+    const fullscreen = getFullscreenElement();
+    if (fullscreen) {
+      return;
+    }
+    if (activePresentation?.element !== element) {
+      return;
+    }
+    onExit();
+  });
+}
+
 // src/webvr/reticle.tsx
 import { useFrame as useFrame21, useThree as useThree26 } from "@react-three/fiber";
 import { useRef as useRef36 } from "react";
@@ -16520,10 +17310,11 @@ import {
   Vector2 as Vector27,
   Vector3 as Vector321
 } from "three";
-import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 var CENTER_NDC = new Vector27(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
+var MOBILE_VR_RETICLE_SCALE = 3;
 var RETICLE_RENDER_ORDER = 1e5;
 var CROSSHAIR_LENGTH = 0.044;
 var CROSSHAIR_THICKNESS = 8e-3;
@@ -16602,6 +17393,7 @@ function resolveDwellMs(value) {
 }
 function WebVRReticle({
   dwellMs,
+  scale = RETICLE_SCALE,
   visible
 }) {
   const groupRef = useRef36(null);
@@ -16678,9 +17470,9 @@ function WebVRReticle({
     }
     group.position.copy(activeCamera.position).addScaledVector(directionRef.current, HUD_DISTANCE);
     group.quaternion.copy(activeCamera.quaternion);
-    group.scale.setScalar(RETICLE_SCALE);
+    group.scale.setScalar(scale);
   });
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "group",
     {
       frustumCulled: false,
@@ -16688,15 +17480,15 @@ function WebVRReticle({
       renderOrder: RETICLE_RENDER_ORDER,
       visible,
       children: [
-        /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs20(
           "mesh",
           {
             frustumCulled: false,
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx38("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
+              /* @__PURE__ */ jsx39(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -16709,15 +17501,15 @@ function WebVRReticle({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs20(
           "mesh",
           {
             frustumCulled: false,
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx38("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
+              /* @__PURE__ */ jsx39(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -16730,7 +17522,7 @@ function WebVRReticle({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs20(
           "mesh",
           {
             frustumCulled: false,
@@ -16739,7 +17531,7 @@ function WebVRReticle({
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
             children: [
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "ringGeometry",
                 {
                   args: [
@@ -16752,7 +17544,7 @@ function WebVRReticle({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -16773,8 +17565,9 @@ function WebVRReticle({
 
 // src/webvr/stereo.tsx
 import { useFrame as useFrame22, useThree as useThree27 } from "@react-three/fiber";
-import { useContext as useContext26, useEffect as useEffect36, useMemo as useMemo25, useRef as useRef37 } from "react";
+import { useContext as useContext26, useEffect as useEffect37, useMemo as useMemo25, useRef as useRef37 } from "react";
 import {
+  Matrix4 as Matrix47,
   Mesh as Mesh6,
   OrthographicCamera,
   PerspectiveCamera as PerspectiveCamera10,
@@ -16786,6 +17579,41 @@ import {
   Vector4 as Vector42,
   WebGLRenderTarget as WebGLRenderTarget2
 } from "three";
+
+// src/webvr/stereo-disparity.ts
+var WEBVR_PANORAMA_VIRTUAL_DISTANCE_M = 2;
+function panoramaStereoHalfAngle(ipdMm, virtualDistanceM = WEBVR_PANORAMA_VIRTUAL_DISTANCE_M) {
+  const ipdM = Math.max(0, ipdMm) / 1e3;
+  const distance = Math.max(
+    Number.isFinite(virtualDistanceM) ? virtualDistanceM : WEBVR_PANORAMA_VIRTUAL_DISTANCE_M,
+    0.05
+  );
+  return Math.atan(ipdM / 2 / distance);
+}
+function panoramaStereoToeInYaw(eye, halfAngleRad) {
+  return eye === "left" ? -halfAngleRad : halfAngleRad;
+}
+
+// src/webvr/stereo-layout.ts
+function computeStereoLayout(logicalWidth, logicalHeight, pixelRatio) {
+  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;
+  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)),
+    stereoAspect: leftWidth / fullWidth
+  };
+}
+
+// src/webvr/stereo.tsx
+var TOE_IN = new Matrix47();
 var vertexShader = `
 varying vec2 vUv;
 void main() {
@@ -16837,21 +17665,33 @@ function createDistortionResources() {
     target
   };
 }
-function syncStereoCameras(stereo, camera, profile, screensize, drawingSize, gl) {
-  gl.getDrawingBufferSize(drawingSize);
-  const fullWidth = Math.max(2, Math.floor(drawingSize.x));
-  const fullHeight = Math.max(1, Math.floor(drawingSize.y));
-  const eyeWidth = Math.max(1, Math.floor(fullWidth / 2));
+function syncStereoCameras(stereo, camera, profile, screensize, size, gl) {
+  gl.getSize(size);
+  const layout = computeStereoLayout(
+    size.x,
+    size.y,
+    gl.getPixelRatio()
+  );
   const screenToLensMm = profile.screenToLensMm ?? 42;
-  const displayAspect = fullWidth / fullHeight;
+  const displayAspect = layout.fullWidth / layout.fullHeight;
   const screenHeightMm = screensize === "auto" ? null : screensize * 25.4 / Math.sqrt(displayAspect * displayAspect + 1);
   const calibratedFov = screenHeightMm === null ? profile.fov : 2 * Math.atan(screenHeightMm / (2 * screenToLensMm)) * 180 / Math.PI;
   camera.fov = Math.max(30, Math.min(140, calibratedFov));
   camera.updateProjectionMatrix();
-  stereo.aspect = eyeWidth / fullWidth;
-  stereo.eyeSep = profile.ipdMm / 1e3;
+  camera.updateMatrixWorld();
+  stereo.aspect = layout.stereoAspect;
+  stereo.eyeSep = 0;
   stereo.update(camera);
-  return { eyeWidth, fullHeight };
+  const halfAngle = panoramaStereoHalfAngle(profile.ipdMm);
+  TOE_IN.makeRotationY(panoramaStereoToeInYaw("left", halfAngle));
+  stereo.cameraL.matrix.multiply(TOE_IN);
+  stereo.cameraL.matrixWorldNeedsUpdate = true;
+  TOE_IN.makeRotationY(panoramaStereoToeInYaw("right", halfAngle));
+  stereo.cameraR.matrix.multiply(TOE_IN);
+  stereo.cameraR.matrixWorldNeedsUpdate = true;
+  stereo.cameraL.updateMatrixWorld(true);
+  stereo.cameraR.updateMatrixWorld(true);
+  return layout;
 }
 function WebVRStereoRenderer({
   mode,
@@ -16868,7 +17708,7 @@ function WebVRStereoRenderer({
   const stereoRef = useRef37(stereo);
   stereoRef.current = stereo;
   const resources = useMemo25(createDistortionResources, []);
-  const drawingSizeRef = useRef37(new Vector28());
+  const sizeRef = useRef37(new Vector28());
   const viewportRef = useRef37(new Vector42());
   const scissorRef = useRef37(new Vector42());
   const originalFovRef = useRef37(null);
@@ -16877,7 +17717,7 @@ function WebVRStereoRenderer({
   const screensizeRef = useRef37(screensize);
   profileRef.current = profile;
   screensizeRef.current = screensize;
-  useEffect36(
+  useEffect37(
     () => () => {
       resources.geometry.dispose();
       resources.material.dispose();
@@ -16885,7 +17725,7 @@ function WebVRStereoRenderer({
     },
     [resources]
   );
-  useEffect36(() => {
+  useEffect37(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
       if (!stereoActiveRef.current || !(cameraToRender instanceof PerspectiveCamera10)) {
@@ -16897,12 +17737,12 @@ function WebVRStereoRenderer({
       if (originalFovRef.current === null) {
         originalFovRef.current = cameraToRender.fov;
       }
-      const { eyeWidth, fullHeight } = syncStereoCameras(
+      const layout = syncStereoCameras(
         stereoRef.current,
         cameraToRender,
         currentProfile,
         currentScreensize,
-        drawingSizeRef.current,
+        sizeRef.current,
         gl
       );
       const hasDistortion = currentProfile.k1 !== 0 || currentProfile.k2 !== 0;
@@ -16913,18 +17753,19 @@ function WebVRStereoRenderer({
       gl.getScissor(scissorRef.current);
       gl.autoClear = true;
       gl.setScissorTest(true);
-      const renderEye = (eyeCamera, offsetX) => {
+      const renderEye = (eyeCamera, eye) => {
         if (hasDistortion) {
-          if (resources.target.width !== eyeWidth || resources.target.height !== fullHeight) {
-            resources.target.setSize(eyeWidth, fullHeight);
+          if (resources.target.width !== layout.renderTargetWidth || resources.target.height !== layout.renderTargetHeight) {
+            resources.target.setSize(
+              layout.renderTargetWidth,
+              layout.renderTargetHeight
+            );
           }
           gl.setRenderTarget(resources.target);
-          gl.setViewport(0, 0, eyeWidth, fullHeight);
-          gl.setScissor(0, 0, eyeWidth, fullHeight);
           originalRender(sceneToRender, eyeCamera);
           gl.setRenderTarget(null);
-          gl.setViewport(offsetX, 0, eyeWidth, fullHeight);
-          gl.setScissor(offsetX, 0, eyeWidth, fullHeight);
+          gl.setViewport(eye.offsetX, 0, eye.width, eye.height);
+          gl.setScissor(eye.offsetX, 0, eye.width, eye.height);
           resources.material.uniforms.distortion?.value.set(
             currentProfile.k1,
             currentProfile.k2
@@ -16933,12 +17774,12 @@ function WebVRStereoRenderer({
           return;
         }
         gl.setRenderTarget(null);
-        gl.setViewport(offsetX, 0, eyeWidth, fullHeight);
-        gl.setScissor(offsetX, 0, eyeWidth, fullHeight);
+        gl.setViewport(eye.offsetX, 0, eye.width, eye.height);
+        gl.setScissor(eye.offsetX, 0, eye.width, eye.height);
         originalRender(sceneToRender, eyeCamera);
       };
-      renderEye(stereoRef.current.cameraL, 0);
-      renderEye(stereoRef.current.cameraR, eyeWidth);
+      renderEye(stereoRef.current.cameraL, layout.left);
+      renderEye(stereoRef.current.cameraR, layout.right);
       gl.setRenderTarget(previousTarget);
       gl.setViewport(viewportRef.current);
       gl.setScissor(scissorRef.current);
@@ -16949,7 +17790,7 @@ function WebVRStereoRenderer({
       gl.render = originalRender;
     };
   }, [gl, resources]);
-  useEffect36(
+  useEffect37(
     () => () => {
       if (runtime) {
         runtime.stereoView.active = false;
@@ -16969,7 +17810,7 @@ function WebVRStereoRenderer({
         camera,
         profileRef.current,
         screensizeRef.current,
-        drawingSizeRef.current,
+        sizeRef.current,
         gl
       );
       return;
@@ -16984,7 +17825,7 @@ function WebVRStereoRenderer({
 }
 
 // src/webvr/pointerlock.ts
-import { useEffect as useEffect37, useRef as useRef38 } from "react";
+import { useEffect as useEffect38, useRef as useRef38 } from "react";
 var POINTER_LOCK_CURSOR_ID = "webvr:pointerlock";
 async function requestWebVRPointerLock(element) {
   if (typeof document === "undefined") {
@@ -17021,7 +17862,7 @@ function useWebVRPointerLock(enabled, element) {
   const enabledRef = useRef38(enabled);
   cursorRef.current = cursor;
   enabledRef.current = enabled;
-  useEffect37(() => {
+  useEffect38(() => {
     if (!enabled || !element) {
       return;
     }
@@ -17051,7 +17892,7 @@ function useWebVRPointerLock(enabled, element) {
 }
 
 // src/webvr/wakelock.ts
-import { useEffect as useEffect38 } from "react";
+import { useEffect as useEffect39 } from "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==";
@@ -17180,7 +18021,7 @@ function releaseWebVRWakeLock() {
   stopFallbackVideo();
 }
 function useWebVRWakeLock(enabled) {
-  useEffect38(() => {
+  useEffect39(() => {
     if (!enabled) {
       return;
     }
@@ -17199,7 +18040,7 @@ function useWebVRWakeLock(enabled) {
 }
 
 // src/webvr/webvr.tsx
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 function initializeSettings(screensize, profile) {
   const stored = loadWebVRSettings();
   return {
@@ -17241,8 +18082,8 @@ var WebVR = forwardRef4(function WebVR2({
   const availableRef = useRef39(false);
   const modeRef = useRef39(null);
   const webXRSessionRef = useRef39(null);
-  const [mode, setMode] = useState23(null);
-  const [settings, setSettings] = useState23(
+  const [mode, setMode] = useState24(null);
+  const [settings, setSettings] = useState24(
     () => initializeSettings(screensize, profile)
   );
   const callbacksRef = useRef39({
@@ -17348,16 +18189,12 @@ var WebVR = forwardRef4(function WebVR2({
       if (wakelock) {
         void acquireWebVRWakeLock();
       }
-      void requestElementFullscreen(getViewerElement(gl.domElement)).catch(
-        () => {
-        }
-      );
+      const viewer = getViewerElement(gl.domElement);
+      await enterWebVRPresentation(viewer);
       const granted = await requestPermission();
       if (!granted) {
         releaseWebVRWakeLock();
-        if (getFullscreenElement()) {
-          void exitElementFullscreen();
-        }
+        leaveWebVRPresentation();
         reportDenied();
         return false;
       }
@@ -17371,10 +18208,7 @@ var WebVR = forwardRef4(function WebVR2({
       if (wakelock) {
         void acquireWebVRWakeLock();
       }
-      try {
-        await requestElementFullscreen(getViewerElement(gl.domElement));
-      } catch {
-      }
+      await enterWebVRPresentation(getViewerElement(gl.domElement));
       if (mousePointerLock) {
         void requestWebVRPointerLock(gl.domElement);
       }
@@ -17411,9 +18245,7 @@ var WebVR = forwardRef4(function WebVR2({
       return;
     }
     deactivate();
-    if (getFullscreenElement()) {
-      await exitElementFullscreen();
-    }
+    leaveWebVRPresentation();
   }, [deactivate, xrStore]);
   const toggleVR = useCallback10(async () => {
     if (modeRef.current) {
@@ -17455,7 +18287,7 @@ var WebVR = forwardRef4(function WebVR2({
     }),
     [enterVR, exitVR, requestPermission, toggleVR]
   );
-  useEffect39(() => {
+  useEffect40(() => {
     let active = true;
     void detectWebVRCapabilities().then((capabilities) => {
       if (!active) {
@@ -17477,7 +18309,7 @@ var WebVR = forwardRef4(function WebVR2({
       active = false;
     };
   }, [desktopSupport, eventBus, fakeSupport, host, mobileVr]);
-  useEffect39(() => {
+  useEffect40(() => {
     host.controller = controller;
     return () => {
       if (host.controller === controller) {
@@ -17486,10 +18318,10 @@ var WebVR = forwardRef4(function WebVR2({
       }
     };
   }, [controller, host]);
-  useEffect39(() => {
+  useEffect40(() => {
     updateWebVRHost(host, { chrome, mode, settings });
   }, [chrome, host, mode, settings]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (mode !== "fake") {
       return;
     }
@@ -17513,7 +18345,7 @@ var WebVR = forwardRef4(function WebVR2({
       document.removeEventListener("mousemove", onMouseMove);
     };
   }, [controlsRef, gl.domElement, mode, mousePointerLock]);
-  useEffect39(
+  useEffect40(
     () => () => {
       const session2 = webXRSessionRef.current;
       if (session2) {
@@ -17522,9 +18354,21 @@ var WebVR = forwardRef4(function WebVR2({
       if (modeRef.current === "fake") {
         controlsRef.current?.setGyroActive(false);
       }
+      if (modeRef.current === "mobilevr" || modeRef.current === "fake") {
+        leaveWebVRPresentation();
+      }
     },
     [controlsRef]
   );
+  useEffect40(() => {
+    if (mode !== "mobilevr" && mode !== "fake") {
+      return;
+    }
+    const viewer = getViewerElement(gl.domElement);
+    return subscribeWebVRPresentationExit(viewer, () => {
+      void exitVR();
+    });
+  }, [exitVR, gl.domElement, mode]);
   useWebVRPointerLock(
     mousePointerLock && mode === "fake",
     gl.domElement
@@ -17532,8 +18376,8 @@ var WebVR = forwardRef4(function WebVR2({
   useWebVRWakeLock(
     wakelock && (mode === "mobilevr" || mode === "fake")
   );
-  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-    /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+    /* @__PURE__ */ jsx40(
       Gyro,
       {
         ref: gyroRef,
@@ -17547,7 +18391,7 @@ var WebVR = forwardRef4(function WebVR2({
         touchMode: "off"
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       WebVRStereoRenderer,
       {
         mode,
@@ -17555,10 +18399,11 @@ var WebVR = forwardRef4(function WebVR2({
         screensize: settings.screensize
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       WebVRReticle,
       {
         dwellMs: cursorDwellMs,
+        scale: mode === "mobilevr" ? MOBILE_VR_RETICLE_SCALE : 1,
         visible: cursor && mode !== null
       }
     )
@@ -17658,11 +18503,11 @@ import { useThree as useThree29 } from "@react-three/fiber";
 import {
   useCallback as useCallback11,
   useContext as useContext28,
-  useEffect as useEffect40,
+  useEffect as useEffect41,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo28,
   useRef as useRef41,
-  useState as useState24
+  useState as useState25
 } from "react";
 import {
   BackSide as BackSide4,
@@ -17674,7 +18519,7 @@ import {
   TextureLoader as TextureLoader8,
   VideoTexture as VideoTexture2
 } from "three";
-import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -17759,10 +18604,10 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture2(poster, onError) {
   const gl = useThree29((state) => state.gl);
-  const [texture, setTexture] = useState24(null);
+  const [texture, setTexture] = useState25(null);
   const onErrorRef = useRef41(onError);
   onErrorRef.current = onError;
-  useEffect40(() => {
+  useEffect41(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -17799,7 +18644,7 @@ function usePosterTexture2(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  useEffect40(
+  useEffect41(
     () => () => {
       texture?.dispose();
     },
@@ -17871,13 +18716,13 @@ function PanoVideo({
     ),
     [captions]
   );
-  const [variantId, setVariantId] = useState24(
+  const [variantId, setVariantId] = useState25(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = useState24(
+  const [trackId, setTrackId] = useState25(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = useState24(false);
+  const [ready, setReady] = useState25(false);
   const autoPlayRef = useRef41(autoPlay);
   autoPlayRef.current = autoPlay;
   const blockedRef = useRef41(false);
@@ -17945,7 +18790,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  useEffect40(
+  useEffect41(
     () => () => {
       if (!resource) {
         return;
@@ -17960,7 +18805,7 @@ function PanoVideo({
     },
     [resource]
   );
-  useEffect40(() => {
+  useEffect41(() => {
     if (!resource) {
       return;
     }
@@ -18112,10 +18957,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  useEffect40(() => {
+  useEffect41(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -18172,7 +19017,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!resource) {
       return;
     }
@@ -18277,7 +19122,7 @@ function PanoVideo({
     applyInlineVideoPlayback(video, playsInline);
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!resource) {
       return;
     }
@@ -18327,7 +19172,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!resource) {
       return;
     }
@@ -18362,7 +19207,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -18373,15 +19218,15 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs21(Fragment7, { children: [
-    activeTexture ? /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
+    activeTexture ? /* @__PURE__ */ jsxs22(
       "mesh",
       {
         rotation: [0, MathUtils13.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
-          /* @__PURE__ */ jsx40("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ jsx41(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -18392,7 +19237,7 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx40(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ jsx41(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 export {