@ericchen1990/pano-view 3.2.3 → 3.4.0

package/dist/index.cjs

@@ -9699,8 +9699,8 @@ function usePanoViewer() {
 }
 
 // src/sphere-tile/sphere-tile.tsx
-var import_fiber15 = require("@react-three/fiber");
-var import_react38 = require("react");
+var import_fiber16 = require("@react-three/fiber");
+var import_react40 = require("react");
 var import_three14 = require("three");
 
 // src/asset-url.ts
@@ -9968,6 +9968,27 @@ function PanoBasicMaterial({
   );
 }
 
+// src/scene-detail.tsx
+var import_react37 = require("react");
+var SceneDetailContext = (0, import_react37.createContext)(null);
+function useSceneDetailReporter() {
+  return (0, import_react37.useContext)(SceneDetailContext);
+}
+function viewTilesAreDrawable(textures) {
+  return textures.length > 0 && textures.every((texture) => texture != null);
+}
+function publishSceneDetail(reporter, lastToken, ready) {
+  if (!reporter) {
+    return;
+  }
+  const token = `${reporter.generation}:${ready ? 1 : 0}`;
+  if (lastToken.current === token) {
+    return;
+  }
+  lastToken.current = token;
+  reporter.report(ready);
+}
+
 // src/tile/texture-manager.ts
 var import_three11 = require("three");
 var EMPTY_TEXTURE_SNAPSHOT = {
@@ -9989,6 +10010,9 @@ var TileTextureManager = class {
     this.generation = 0;
     this.options = options;
   }
+  get memoryBudgetBytes() {
+    return this.options.maxBytes;
+  }
   resume() {
     this.disposed = false;
     this.drain();
@@ -10056,7 +10080,7 @@ var TileTextureManager = class {
     this.totalBytes = 0;
   }
   /**
-   * Releases textures that are no longer rendered by any Tile instance.
+   * Releases textures that are no longer rendered by any tile source.
    * Scene transitions call this after the outgoing panorama has been
    * snapshotted, so the incoming scene never competes with stale GPU tiles.
    */
@@ -10190,14 +10214,45 @@ var TileTextureManager = class {
   }
 };
 
+// src/tile/texture-manager-context.tsx
+var import_fiber15 = require("@react-three/fiber");
+var import_react38 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TileTextureManagerContext = (0, import_react38.createContext)(null);
+function TileTextureManagerProvider({
+  children,
+  maxTextureMemoryMb = 128,
+  maxConcurrentLoads = 4
+}) {
+  const gl = (0, import_fiber15.useThree)((state) => state.gl);
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const manager = (0, import_react38.useMemo)(
+    () => new TileTextureManager({
+      anisotropy,
+      maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
+      concurrency: Math.max(1, Math.floor(maxConcurrentLoads)),
+      retryCount: 1
+    }),
+    [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
+  );
+  (0, import_react38.useEffect)(() => {
+    manager.resume();
+    return () => manager.dispose();
+  }, [manager]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
+}
+function useSharedTileTextureManager() {
+  return (0, import_react38.useContext)(TileTextureManagerContext);
+}
+
 // src/tile/texture-hooks.ts
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_three12 = require("three");
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = (0, import_react37.useState)(null);
-  const onErrorRef = (0, import_react37.useRef)(onError);
+  const [texture, setTexture] = (0, import_react39.useState)(null);
+  const onErrorRef = (0, import_react39.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -10234,7 +10289,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react37.useEffect)(
+  (0, import_react39.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10243,14 +10298,14 @@ function usePreviewTexture(url, anisotropy, onError) {
   return texture;
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react37.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react39.useState)(() => ({
     manager,
     key,
     url,
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  (0, import_react37.useEffect)(
+  (0, import_react39.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -10392,14 +10447,23 @@ function preferredSphereLevel(levels, height, dpr, verticalFov) {
 }
 
 // src/sphere-tile/sphere-tile.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function sphereTileViewShouldRefresh(input) {
+  if (input.loadModeChanged || input.managerChanged) {
+    return true;
+  }
+  if (input.elapsedMs < 100 || input.viewUnchanged) {
+    return false;
+  }
+  return true;
+}
 function SpherePatch({
   address,
   texture,
   yawOffset,
   preview = false
 }) {
-  const geometry = (0, import_react38.useMemo)(
+  const geometry = (0, import_react40.useMemo)(
     () => sphereTileGeometry(
       address,
       yawOffset,
@@ -10407,13 +10471,13 @@ function SpherePatch({
     ),
     [address, yawOffset, preview]
   );
-  (0, import_react38.useEffect)(() => () => geometry.dispose(), [geometry]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  (0, import_react40.useEffect)(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "mesh",
     {
       geometry,
       renderOrder: preview ? -1e3 : -900 + address.level,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         PanoBasicMaterial,
         {
           map: texture,
@@ -10426,7 +10490,7 @@ function SpherePatch({
     }
   );
 }
-var ManagedPatch = (0, import_react38.memo)(function ManagedPatch2({
+var ManagedPatch = (0, import_react40.memo)(function ManagedPatch2({
   address,
   manager,
   resolveUrl,
@@ -10440,10 +10504,10 @@ var ManagedPatch = (0, import_react38.memo)(function ManagedPatch2({
     url,
     address
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (snapshot.texture) ready();
   }, [snapshot.texture, ready]);
-  return snapshot.texture ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return snapshot.texture ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     SpherePatch,
     {
       address,
@@ -10471,28 +10535,29 @@ function SphereTileSource({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = (0, import_fiber15.useThree)();
+  const { camera, gl, size } = (0, import_fiber16.useThree)();
   const anisotropy = gl.capabilities.getMaxAnisotropy();
   const preview = usePreviewTexture(
     resolveAssetUrl(baseUrl, previewUrl),
     anisotropy,
     onPreviewError
   );
-  const callbacks = (0, import_react38.useRef)({
+  const callbacks = (0, import_react40.useRef)({
     onReady,
     onLoadProgress,
     onTileError,
     onLevelChange
   });
   callbacks.current = { onReady, onLoadProgress, onTileError, onLevelChange };
-  const budget = Math.max(
+  const sharedManager = useSharedTileTextureManager();
+  const ownedBudget = Math.max(
     1,
     Number.isFinite(maxTextureMemoryMb) ? maxTextureMemoryMb : 128
   ) * 1024 * 1024;
-  const manager = (0, import_react38.useMemo)(
+  const ownedManager = (0, import_react40.useMemo)(
     () => new TileTextureManager({
       anisotropy,
-      maxBytes: budget,
+      maxBytes: ownedBudget,
       concurrency: Math.max(
         1,
         Math.floor(
@@ -10506,30 +10571,38 @@ function SphereTileSource({
       onProgress: (progress) => callbacks.current.onLoadProgress?.(progress),
       onError: (error) => callbacks.current.onTileError?.(error)
     }),
-    [anisotropy, budget, maxConcurrentLoads, retryCount]
+    [anisotropy, ownedBudget, maxConcurrentLoads, retryCount]
   );
-  const readyRef = (0, import_react38.useRef)(false);
-  const ready = (0, import_react38.useCallback)(() => {
+  const manager = sharedManager ?? ownedManager;
+  const budget = manager.memoryBudgetBytes;
+  const readyRef = (0, import_react40.useRef)(false);
+  const ready = (0, import_react40.useCallback)(() => {
     if (!readyRef.current) {
       readyRef.current = true;
       callbacks.current.onReady?.();
     }
   }, []);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (preview) ready();
   }, [preview, ready]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     manager.resume();
-    return () => manager.dispose();
-  }, [manager]);
-  const resolveUrl = (0, import_react38.useMemo)(
+    return () => {
+      if (manager === ownedManager) {
+        manager.dispose();
+        return;
+      }
+      queueMicrotask(() => manager.releaseUnused());
+    };
+  }, [manager, ownedManager]);
+  const resolveUrl = (0, import_react40.useMemo)(
     () => (address) => resolveAssetUrl(
       baseUrl,
       resolveTileUrl ? resolveTileUrl(address) : resolveSphereTemplateUrl(urlTemplate, address, indexBase)
     ),
     [baseUrl, resolveTileUrl, urlTemplate, indexBase]
   );
-  const candidates = (0, import_react38.useMemo)(
+  const candidates = (0, import_react40.useMemo)(
     () => config.levels.map(
       (level, index) => sphereTileAddresses(level, index, config.tileSize).map((address) => ({
         address,
@@ -10538,12 +10611,17 @@ function SphereTileSource({
     ),
     [config, yawOffset]
   );
-  const previewAddress = (0, import_react38.useMemo)(
+  const previewAddress = (0, import_react40.useMemo)(
     () => sphereTileAddresses({ width: 2, height: 1 }, 0, 2)[0],
     []
   );
-  const [layers, setLayers] = (0, import_react38.useState)([]);
-  const scratch = (0, import_react38.useMemo)(
+  const [layers, setLayers] = (0, import_react40.useState)([]);
+  const detailReporter = useSceneDetailReporter();
+  const detailReporterRef = (0, import_react40.useRef)(detailReporter);
+  detailReporterRef.current = detailReporter;
+  const detailTokenRef = (0, import_react40.useRef)("");
+  const targetKeysRef = (0, import_react40.useRef)([]);
+  const scratch = (0, import_react40.useMemo)(
     () => ({
       camera: new import_three14.PerspectiveCamera(),
       frustum: new import_three14.Frustum(),
@@ -10561,59 +10639,78 @@ function SphereTileSource({
     }),
     [camera, candidates]
   );
-  (0, import_fiber15.useFrame)(() => {
+  (0, import_fiber16.useFrame)(() => {
     if (!(camera instanceof import_three14.PerspectiveCamera)) return;
     const now = performance.now(), dpr = gl.getPixelRatio();
-    const reset = scratch.manager !== manager || scratch.loadMode !== loadMode;
-    if (!reset && (now - scratch.time < 100 || scratch.fov === camera.fov && scratch.width === size.width && scratch.height === size.height && scratch.dpr === dpr && scratch.quaternion.angleTo(camera.quaternion) < 1e-4))
-      return;
-    scratch.time = now;
-    scratch.fov = camera.fov;
-    scratch.width = size.width;
-    scratch.height = size.height;
-    scratch.dpr = dpr;
-    scratch.quaternion.copy(camera.quaternion);
-    scratch.manager = manager;
-    scratch.loadMode = loadMode;
-    scratch.camera.copy(camera, false);
-    scratch.camera.fov = Math.min(179, camera.fov + 8);
-    scratch.camera.updateProjectionMatrix();
-    scratch.camera.updateMatrixWorld();
-    scratch.matrix.multiplyMatrices(
-      scratch.camera.projectionMatrix,
-      scratch.camera.matrixWorldInverse
-    );
-    scratch.frustum.setFromProjectionMatrix(scratch.matrix);
-    let level = loadMode === "preview" ? -1 : loadMode === "base" ? 0 : preferredSphereLevel(config.levels, size.height, dpr, camera.fov);
-    const next = [];
-    let residentBytes = 0;
-    for (let index = 0; index <= level; index++) {
-      const addresses = candidates[index].filter(
-        ({ bounds }) => scratch.frustum.intersectsBox(bounds)
-      ).map(({ address }) => address);
-      const bytes = addresses.reduce(
-        (total, address) => total + address.width * address.height * 4,
-        0
+    const managerChanged = scratch.manager !== manager;
+    const loadModeChanged = scratch.loadMode !== loadMode;
+    const viewUnchanged = scratch.fov === camera.fov && scratch.width === size.width && scratch.height === size.height && scratch.dpr === dpr && scratch.quaternion.angleTo(camera.quaternion) < 1e-4;
+    if (sphereTileViewShouldRefresh({
+      loadModeChanged,
+      managerChanged,
+      elapsedMs: now - scratch.time,
+      viewUnchanged
+    })) {
+      const reset = managerChanged || loadModeChanged;
+      scratch.time = now;
+      scratch.fov = camera.fov;
+      scratch.width = size.width;
+      scratch.height = size.height;
+      scratch.dpr = dpr;
+      scratch.quaternion.copy(camera.quaternion);
+      scratch.manager = manager;
+      scratch.loadMode = loadMode;
+      scratch.camera.copy(camera, false);
+      scratch.camera.fov = Math.min(179, camera.fov + 8);
+      scratch.camera.updateProjectionMatrix();
+      scratch.camera.updateMatrixWorld();
+      scratch.matrix.multiplyMatrices(
+        scratch.camera.projectionMatrix,
+        scratch.camera.matrixWorldInverse
       );
-      if (residentBytes + bytes > budget) {
-        level = index - 1;
-        break;
+      scratch.frustum.setFromProjectionMatrix(scratch.matrix);
+      let level = loadMode === "preview" ? -1 : loadMode === "base" ? 0 : preferredSphereLevel(config.levels, size.height, dpr, camera.fov);
+      const next = [];
+      let residentBytes = 0;
+      for (let index = 0; index <= level; index++) {
+        const addresses = candidates[index].filter(
+          ({ bounds }) => scratch.frustum.intersectsBox(bounds)
+        ).map(({ address }) => address);
+        const bytes = addresses.reduce(
+          (total, address) => total + address.width * address.height * 4,
+          0
+        );
+        if (residentBytes + bytes > budget) {
+          level = index - 1;
+          break;
+        }
+        residentBytes += bytes;
+        next.push({ level: index, addresses });
+      }
+      const targetLayer = loadMode === "full" ? next[next.length - 1] : void 0;
+      targetKeysRef.current = targetLayer ? targetLayer.addresses.map(
+        (address) => `${resolveUrl(address)}\0${sphereTileKey(address)}`
+      ) : [];
+      if (level !== scratch.level) {
+        scratch.level = level;
+        if (level >= 0) callbacks.current.onLevelChange?.(level);
+      }
+      const token = next.map((layer) => layer.addresses.map(sphereTileKey).join(",")).join(";");
+      if (token !== scratch.token || reset) {
+        scratch.token = token;
+        setLayers(next);
       }
-      residentBytes += bytes;
-      next.push({ level: index, addresses });
-    }
-    if (level !== scratch.level) {
-      scratch.level = level;
-      if (level >= 0) callbacks.current.onLevelChange?.(level);
-    }
-    const token = next.map((layer) => layer.addresses.map(sphereTileKey).join(",")).join(";");
-    if (token !== scratch.token || reset) {
-      scratch.token = token;
-      setLayers(next);
     }
+    publishSceneDetail(
+      detailReporterRef.current,
+      detailTokenRef,
+      loadMode === "full" && viewTilesAreDrawable(
+        targetKeysRef.current.map((key) => manager.getSnapshot(key).texture)
+      )
+    );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("group", { visible, children: [
-    preview ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("group", { visible, children: [
+    preview ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       SpherePatch,
       {
         address: previewAddress,
@@ -10623,7 +10720,7 @@ function SphereTileSource({
       }
     ) : null,
     loadMode !== "preview" ? layers.flatMap(
-      (layer) => layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      (layer) => layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         ManagedPatch,
         {
           address,
@@ -10639,23 +10736,23 @@ function SphereTileSource({
 }
 function SphereTile({ multires, ...props }) {
   const token = typeof multires === "string" ? multires : JSON.stringify(multires);
-  const config = (0, import_react38.useMemo)(() => parseSphereMultires(multires), [token]);
+  const config = (0, import_react40.useMemo)(() => parseSphereMultires(multires), [token]);
   const sourceKey = `${props.baseUrl}\0${token}\0${props.previewUrl}\0${props.urlTemplate ?? ""}\0${props.indexBase ?? 1}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SphereTileSource, { ...props, config }, sourceKey);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SphereTileSource, { ...props, config }, sourceKey);
 }
 
 // src/sphere.tsx
-var import_fiber16 = require("@react-three/fiber");
-var import_react39 = require("react");
+var import_fiber17 = require("@react-three/fiber");
+var import_react41 = require("react");
 var import_three15 = require("three");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react39.useState)(null);
-  const onLoadRef = (0, import_react39.useRef)(onLoad);
-  const onErrorRef = (0, import_react39.useRef)(onError);
+  const [texture, setTexture] = (0, import_react41.useState)(null);
+  const onLoadRef = (0, import_react41.useRef)(onLoad);
+  const onErrorRef = (0, import_react41.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -10694,7 +10791,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  (0, import_react39.useEffect)(
+  (0, import_react41.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10712,9 +10809,9 @@ function Sphere({
   onPreviewError,
   visible = true
 }) {
-  const gl = (0, import_fiber16.useThree)((state) => state.gl);
+  const gl = (0, import_fiber17.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = (0, import_react39.useMemo)(
+  const resolvedPreviewUrl = (0, import_react41.useMemo)(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -10733,11 +10830,21 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = (0, import_react39.useRef)(false);
-  (0, import_react39.useEffect)(() => {
+  const readyRef = (0, import_react41.useRef)(false);
+  const detailReporter = useSceneDetailReporter();
+  (0, import_react41.useEffect)(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
+    if (!detailReporter) {
+      return;
+    }
+    detailReporter.report(texture != null);
+    return () => {
+      detailReporter.report(false);
+    };
+  }, [detailReporter, texture]);
+  (0, import_react41.useEffect)(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -10747,14 +10854,14 @@ function Sphere({
   if (!displayTexture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "mesh",
     {
       rotation: [0, import_three15.MathUtils.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -10768,10 +10875,10 @@ function Sphere({
 }
 
 // src/video/pano-video.tsx
-var import_fiber17 = require("@react-three/fiber");
-var import_react40 = require("react");
+var import_fiber18 = require("@react-three/fiber");
+var import_react42 = require("react");
 var import_three16 = require("three");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -10855,11 +10962,11 @@ function applyEquirectangularLayout(texture, anisotropy) {
   texture.needsUpdate = true;
 }
 function usePosterTexture(poster, onError) {
-  const gl = (0, import_fiber17.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react40.useState)(null);
-  const onErrorRef = (0, import_react40.useRef)(onError);
+  const gl = (0, import_fiber18.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react42.useState)(null);
+  const onErrorRef = (0, import_react42.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -10896,7 +11003,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react40.useEffect)(
+  (0, import_react42.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10954,39 +11061,39 @@ function PanoVideo({
   onTrackChange
 }) {
   usePanoMediaActivationIntent(autoPlay);
-  const gl = (0, import_fiber17.useThree)((state) => state.gl);
-  const host = (0, import_react40.useContext)(PanoVideoHostContext);
-  const overlay = (0, import_react40.useContext)(PanoChromeOverlayContext);
-  const variants = (0, import_react40.useMemo)(
+  const gl = (0, import_fiber18.useThree)((state) => state.gl);
+  const host = (0, import_react42.useContext)(PanoVideoHostContext);
+  const overlay = (0, import_react42.useContext)(PanoChromeOverlayContext);
+  const variants = (0, import_react42.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react40.useMemo)(
+  const captionAppearance = (0, import_react42.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react40.useState)(
+  const [variantId, setVariantId] = (0, import_react42.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react40.useState)(
+  const [trackId, setTrackId] = (0, import_react42.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react40.useState)(false);
-  const autoPlayRef = (0, import_react40.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react42.useState)(false);
+  const autoPlayRef = (0, import_react42.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react40.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react40.useRef)(
+  const blockedRef = (0, import_react42.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react42.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react40.useRef)({
+  const mediaCapabilitiesRef = (0, import_react42.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react40.useRef)(null);
+  const storeRef = (0, import_react42.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -10996,7 +11103,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react40.useRef)({
+  const actionsRef = (0, import_react42.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -11016,19 +11123,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = (0, import_react40.useRef)(onLoad);
-  const onErrorRef = (0, import_react40.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react40.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react40.useRef)(onEnded);
-  const onVariantChangeRef = (0, import_react40.useRef)(onVariantChange);
-  const onTrackChangeRef = (0, import_react40.useRef)(onTrackChange);
+  const onLoadRef = (0, import_react42.useRef)(onLoad);
+  const onErrorRef = (0, import_react42.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react42.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react42.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react42.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react42.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react40.useMemo)(() => {
+  const resource = (0, import_react42.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -11045,7 +11152,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react40.useEffect)(
+  (0, import_react42.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -11060,13 +11167,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -11089,7 +11196,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react40.useCallback)(
+  const emitSnapshot = (0, import_react42.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -11141,7 +11248,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react40.useMemo)(
+  const controller = (0, import_react42.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -11193,7 +11300,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -11206,7 +11313,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11219,10 +11326,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -11279,7 +11386,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11371,7 +11478,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11391,7 +11498,7 @@ function PanoVideo({
     }
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11441,7 +11548,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11476,7 +11583,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -11487,15 +11594,15 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "mesh",
       {
         rotation: [0, import_three16.MathUtils.degToRad(90 + yawOffset), 0],
         visible,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -11506,14 +11613,14 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
 // src/scenes.tsx
-var import_fiber22 = require("@react-three/fiber");
-var import_react45 = require("react");
-var import_three23 = require("three");
+var import_fiber23 = require("@react-three/fiber");
+var import_react47 = require("react");
+var import_three24 = require("three");
 
 // src/scene-transitions/presets.ts
 var TRANSITION_DEFAULTS = {
@@ -11561,9 +11668,33 @@ function isSnapshotTransition(preset) {
   return preset !== "none" && preset !== "particles";
 }
 
-// src/scene-transitions/particle-overlay.tsx
-var import_fiber18 = require("@react-three/fiber");
-var import_react41 = require("react");
+// src/scene-transitions/snapshot-hold.tsx
+var import_fiber19 = require("@react-three/fiber");
+var import_react43 = require("react");
+var import_three19 = require("three");
+
+// src/scene-transitions/overlay-utils.ts
+var import_three17 = require("three");
+var OVERLAY_RENDER_ORDER = 1e4;
+var FULLSCREEN_PLANE = new import_three17.PlaneGeometry(1, 1);
+function isPerspectiveCamera(camera) {
+  return camera.isPerspectiveCamera === true;
+}
+function placeFullscreenOverlay(mesh, camera, direction) {
+  const distance = Math.max(camera.near * 1.1, 0.11);
+  camera.getWorldDirection(direction);
+  mesh.position.copy(camera.position).addScaledVector(direction, distance);
+  mesh.quaternion.copy(camera.quaternion);
+  const height = 2 * distance * Math.tan(camera.fov * Math.PI / 360);
+  mesh.scale.set(height * camera.aspect, height, 1);
+}
+function overlayProgress(elapsedTime, duration, startTime) {
+  const started = startTime ?? elapsedTime;
+  const progress = duration === 0 ? 1 : Math.min(1, (elapsedTime - started) / duration);
+  return { startTime: started, progress };
+}
+
+// src/scene-transitions/snapshot-shaders.ts
 var import_three18 = require("three");
 
 // src/scene-transitions/glsl.ts
@@ -11596,182 +11727,20 @@ float fbm(vec2 p) {
 }
 `;
 
-// src/scene-transitions/overlay-utils.ts
-var import_three17 = require("three");
-var OVERLAY_RENDER_ORDER = 1e4;
-var FULLSCREEN_PLANE = new import_three17.PlaneGeometry(1, 1);
-function isPerspectiveCamera(camera) {
-  return camera.isPerspectiveCamera === true;
-}
-function placeFullscreenOverlay(mesh, camera, direction) {
-  const distance = Math.max(camera.near * 1.1, 0.11);
-  camera.getWorldDirection(direction);
-  mesh.position.copy(camera.position).addScaledVector(direction, distance);
-  mesh.quaternion.copy(camera.quaternion);
-  const height = 2 * distance * Math.tan(camera.fov * Math.PI / 360);
-  mesh.scale.set(height * camera.aspect, height, 1);
-}
-function overlayProgress(elapsedTime, duration, startTime) {
-  const started = startTime ?? elapsedTime;
-  const progress = duration === 0 ? 1 : Math.min(1, (elapsedTime - started) / duration);
-  return { startTime: started, progress };
-}
-
-// src/scene-transitions/particle-overlay.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var PARTICLE_GRID = 48;
-var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
-var PARTICLE_VERTEX_SHADER = `
-  attribute float instanceIndex;
-  uniform float progress;
-  uniform vec2 grid;
+// src/scene-transitions/snapshot-shaders.ts
+var SNAPSHOT_VERTEX_SHADER = `
   varying vec2 vUv;
-  varying float vAlpha;
-  ${GLSL_COMMON}
-
   void main() {
-    float id = instanceIndex;
-    float gx = mod(id, grid.x);
-    float gy = floor(id / grid.x);
-    vec2 cell = vec2(gx, gy);
-    float h = hash(cell);
-    float h2 = hash(cell + 19.2);
-    float h3 = hash(cell + 7.7);
-    vec2 randomDir = normalize(vec2(h, h2) * 2.0 - 1.0 + 1e-5);
-    vec2 fromCenter = (cell + 0.5) / grid - 0.5 + 1e-5;
-    vec2 dir = normalize(mix(randomDir, normalize(fromCenter), 0.65));
-    float delay = h3 * 0.28;
-    float lt = clamp((progress - delay) / max(1.0 - delay, 0.001), 0.0, 1.0);
-    float explode = lt * lt;
-    float scale = mix(1.0, 0.18, explode);
-    float angle = (h * 2.0 - 1.0) * explode * 4.2;
-    float ca = cos(angle);
-    float sa = sin(angle);
-    vec2 cellSize = 1.0 / grid;
-    vec2 local = position.xy * cellSize * scale;
-    vec2 rotated = vec2(local.x * ca - local.y * sa, local.x * sa + local.y * ca);
-    vec2 planeCenter = (cell + 0.5) / grid - 0.5;
-    vec2 exploded = planeCenter + dir * explode * 0.9;
-    vec3 pos = vec3(exploded + rotated, -explode * 0.14);
-    vUv = (cell + uv) / grid;
-    vAlpha = 1.0 - explode;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
 `;
-var PARTICLE_FRAGMENT_SHADER = `
-  uniform sampler2D map;
-  varying vec2 vUv;
-  varying float vAlpha;
-
-  void main() {
-    vec4 old = texture2D(map, vUv);
-    old.rgb *= 1.0 + 0.22 * (1.0 - vAlpha);
-    gl_FragColor = vec4(old.rgb, old.a * vAlpha);
-    #include <colorspace_fragment>
-  }
-`;
-function createParticleGeometry() {
-  const quad = new import_three18.PlaneGeometry(1, 1);
-  const geometry = new import_three18.InstancedBufferGeometry();
-  if (quad.index) {
-    geometry.setIndex(quad.index.clone());
-  }
-  geometry.setAttribute("position", quad.attributes.position.clone());
-  geometry.setAttribute("uv", quad.attributes.uv.clone());
-  const indexes = new Float32Array(PARTICLE_COUNT);
-  for (let i = 0; i < PARTICLE_COUNT; i += 1) {
-    indexes[i] = i;
-  }
-  geometry.setAttribute("instanceIndex", new import_three18.InstancedBufferAttribute(indexes, 1));
-  geometry.instanceCount = PARTICLE_COUNT;
-  quad.dispose();
-  return geometry;
-}
-function ParticleOverlay({
-  snapshot,
-  transition,
-  running,
-  runId,
-  onFinish
-}) {
-  const { camera } = (0, import_fiber18.useThree)();
-  const meshRef = (0, import_react41.useRef)(null);
-  const startRef = (0, import_react41.useRef)(null);
-  const finishedRef = (0, import_react41.useRef)(false);
-  const directionRef = (0, import_react41.useRef)(new import_three18.Vector3());
-  const geometry = (0, import_react41.useMemo)(() => createParticleGeometry(), []);
-  const material = (0, import_react41.useMemo)(
-    () => new import_three18.ShaderMaterial({
-      transparent: true,
-      depthTest: false,
-      depthWrite: false,
-      side: import_three18.DoubleSide,
-      uniforms: {
-        map: { value: snapshot.texture },
-        progress: { value: 0 },
-        grid: { value: new import_three18.Vector2(PARTICLE_GRID, PARTICLE_GRID) }
-      },
-      vertexShader: PARTICLE_VERTEX_SHADER,
-      fragmentShader: PARTICLE_FRAGMENT_SHADER
-    }),
-    [snapshot.texture]
-  );
-  (0, import_react41.useEffect)(() => () => geometry.dispose(), [geometry]);
-  (0, import_react41.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react41.useEffect)(() => {
-    startRef.current = null;
-    finishedRef.current = false;
-    material.uniforms.progress.value = 0;
-  }, [material, runId]);
-  (0, import_fiber18.useFrame)((state) => {
-    const mesh = meshRef.current;
-    if (!mesh || !isPerspectiveCamera(camera)) {
-      return;
-    }
-    placeFullscreenOverlay(mesh, camera, directionRef.current);
-    if (!running || finishedRef.current) {
-      return;
-    }
-    const next = overlayProgress(state.clock.elapsedTime, transition.duration, startRef.current);
-    startRef.current = next.startTime;
-    material.uniforms.progress.value = next.progress;
-    if (next.progress === 1) {
-      finishedRef.current = true;
-      onFinish();
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    "mesh",
-    {
-      ref: meshRef,
-      frustumCulled: false,
-      geometry,
-      material,
-      renderOrder: OVERLAY_RENDER_ORDER
-    }
-  );
-}
-
-// src/scene-transitions/snapshot-overlay.tsx
-var import_fiber19 = require("@react-three/fiber");
-var import_react42 = require("react");
-var import_three20 = require("three");
-
-// src/scene-transitions/snapshot-shaders.ts
-var import_three19 = require("three");
-var SNAPSHOT_VERTEX_SHADER = `
-  varying vec2 vUv;
-  void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-  }
-`;
-var HEADER = `
-uniform sampler2D map;
-uniform float progress;
-uniform vec2 resolution;
-varying vec2 vUv;
-${GLSL_COMMON}
+var HEADER = `
+uniform sampler2D map;
+uniform float progress;
+uniform vec2 resolution;
+varying vec2 vUv;
+${GLSL_COMMON}
 
 vec2 aspectGrid(float rows) {
   float aspect = resolution.x / max(resolution.y, 1.0);
@@ -12018,23 +11987,250 @@ var SNAPSHOT_FRAGMENT_SHADERS = {
   `)
 };
 function createSnapshotMaterial(preset, texture) {
-  return new import_three19.ShaderMaterial({
+  return new import_three18.ShaderMaterial({
     transparent: true,
     depthTest: false,
     depthWrite: false,
-    side: import_three19.DoubleSide,
+    side: import_three18.DoubleSide,
     uniforms: {
       map: { value: texture },
       progress: { value: 0 },
-      resolution: { value: new import_three19.Vector2(1, 1) }
+      resolution: { value: new import_three18.Vector2(1, 1) }
     },
     vertexShader: SNAPSHOT_VERTEX_SHADER,
     fragmentShader: SNAPSHOT_FRAGMENT_SHADERS[preset]
   });
 }
 
-// src/scene-transitions/snapshot-overlay.tsx
+// src/scene-transitions/snapshot-hold.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
+function SnapshotHold({ snapshot }) {
+  const { camera, gl } = (0, import_fiber19.useThree)();
+  const meshRef = (0, import_react43.useRef)(null);
+  const directionRef = (0, import_react43.useRef)(new import_three19.Vector3());
+  const material = (0, import_react43.useMemo)(
+    () => createSnapshotMaterial("crossfade", snapshot.texture),
+    [snapshot.texture]
+  );
+  (0, import_react43.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_fiber19.useFrame)(() => {
+    const mesh = meshRef.current;
+    if (!mesh || !isPerspectiveCamera(camera)) {
+      return;
+    }
+    placeFullscreenOverlay(mesh, camera, directionRef.current);
+    const context = gl.getContext();
+    material.uniforms.resolution.value.set(
+      context.drawingBufferWidth,
+      context.drawingBufferHeight
+    );
+    material.uniforms.progress.value = 0;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mesh", { frustumCulled: false, ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "material", object: material })
+  ] });
+}
+
+// src/scene-transition-policy.ts
+function pendingSceneUsesBaseLayer(phase, isPending) {
+  return isPending && (phase === "preloading" || phase === "capturing");
+}
+function normalizeTransitionWaitMs(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+    return 0;
+  }
+  return value;
+}
+function planDetailHold(input) {
+  if (input.waitMs <= 0) {
+    return null;
+  }
+  return {
+    generation: input.generation,
+    sceneId: input.sceneId,
+    deadline: input.now + input.waitMs
+  };
+}
+function acceptDetailWait(wait, signal) {
+  if (!wait) {
+    return { wait: null, start: false };
+  }
+  switch (signal.kind) {
+    case "ready":
+      if (signal.generation !== wait.generation || signal.sceneId !== wait.sceneId) {
+        return { wait, start: false };
+      }
+      return { wait: null, start: true };
+    case "timeout":
+      if (signal.generation !== wait.generation || signal.now < wait.deadline) {
+        return { wait, start: false };
+      }
+      return { wait: null, start: true };
+    case "cancel":
+      if (signal.generation !== wait.generation) {
+        return { wait, start: false };
+      }
+      return { wait: null, start: false };
+    default: {
+      const exhaustive = signal;
+      return exhaustive;
+    }
+  }
+}
+function phaseAfterSnapshot(preset, hold) {
+  if (hold) {
+    return "awaitingDetail";
+  }
+  if (preset === "none") {
+    return "idle";
+  }
+  return "transitioning";
+}
+
+// src/scene-transitions/particle-overlay.tsx
+var import_fiber20 = require("@react-three/fiber");
+var import_react44 = require("react");
+var import_three20 = require("three");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var PARTICLE_GRID = 48;
+var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
+var PARTICLE_VERTEX_SHADER = `
+  attribute float instanceIndex;
+  uniform float progress;
+  uniform vec2 grid;
+  varying vec2 vUv;
+  varying float vAlpha;
+  ${GLSL_COMMON}
+
+  void main() {
+    float id = instanceIndex;
+    float gx = mod(id, grid.x);
+    float gy = floor(id / grid.x);
+    vec2 cell = vec2(gx, gy);
+    float h = hash(cell);
+    float h2 = hash(cell + 19.2);
+    float h3 = hash(cell + 7.7);
+    vec2 randomDir = normalize(vec2(h, h2) * 2.0 - 1.0 + 1e-5);
+    vec2 fromCenter = (cell + 0.5) / grid - 0.5 + 1e-5;
+    vec2 dir = normalize(mix(randomDir, normalize(fromCenter), 0.65));
+    float delay = h3 * 0.28;
+    float lt = clamp((progress - delay) / max(1.0 - delay, 0.001), 0.0, 1.0);
+    float explode = lt * lt;
+    float scale = mix(1.0, 0.18, explode);
+    float angle = (h * 2.0 - 1.0) * explode * 4.2;
+    float ca = cos(angle);
+    float sa = sin(angle);
+    vec2 cellSize = 1.0 / grid;
+    vec2 local = position.xy * cellSize * scale;
+    vec2 rotated = vec2(local.x * ca - local.y * sa, local.x * sa + local.y * ca);
+    vec2 planeCenter = (cell + 0.5) / grid - 0.5;
+    vec2 exploded = planeCenter + dir * explode * 0.9;
+    vec3 pos = vec3(exploded + rotated, -explode * 0.14);
+    vUv = (cell + uv) / grid;
+    vAlpha = 1.0 - explode;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+  }
+`;
+var PARTICLE_FRAGMENT_SHADER = `
+  uniform sampler2D map;
+  varying vec2 vUv;
+  varying float vAlpha;
+
+  void main() {
+    vec4 old = texture2D(map, vUv);
+    old.rgb *= 1.0 + 0.22 * (1.0 - vAlpha);
+    gl_FragColor = vec4(old.rgb, old.a * vAlpha);
+    #include <colorspace_fragment>
+  }
+`;
+function createParticleGeometry() {
+  const quad = new import_three20.PlaneGeometry(1, 1);
+  const geometry = new import_three20.InstancedBufferGeometry();
+  if (quad.index) {
+    geometry.setIndex(quad.index.clone());
+  }
+  geometry.setAttribute("position", quad.attributes.position.clone());
+  geometry.setAttribute("uv", quad.attributes.uv.clone());
+  const indexes = new Float32Array(PARTICLE_COUNT);
+  for (let i = 0; i < PARTICLE_COUNT; i += 1) {
+    indexes[i] = i;
+  }
+  geometry.setAttribute("instanceIndex", new import_three20.InstancedBufferAttribute(indexes, 1));
+  geometry.instanceCount = PARTICLE_COUNT;
+  quad.dispose();
+  return geometry;
+}
+function ParticleOverlay({
+  snapshot,
+  transition,
+  running,
+  runId,
+  onFinish
+}) {
+  const { camera } = (0, import_fiber20.useThree)();
+  const meshRef = (0, import_react44.useRef)(null);
+  const startRef = (0, import_react44.useRef)(null);
+  const finishedRef = (0, import_react44.useRef)(false);
+  const directionRef = (0, import_react44.useRef)(new import_three20.Vector3());
+  const geometry = (0, import_react44.useMemo)(() => createParticleGeometry(), []);
+  const material = (0, import_react44.useMemo)(
+    () => new import_three20.ShaderMaterial({
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+      side: import_three20.DoubleSide,
+      uniforms: {
+        map: { value: snapshot.texture },
+        progress: { value: 0 },
+        grid: { value: new import_three20.Vector2(PARTICLE_GRID, PARTICLE_GRID) }
+      },
+      vertexShader: PARTICLE_VERTEX_SHADER,
+      fragmentShader: PARTICLE_FRAGMENT_SHADER
+    }),
+    [snapshot.texture]
+  );
+  (0, import_react44.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react44.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react44.useEffect)(() => {
+    startRef.current = null;
+    finishedRef.current = false;
+    material.uniforms.progress.value = 0;
+  }, [material, runId]);
+  (0, import_fiber20.useFrame)((state) => {
+    const mesh = meshRef.current;
+    if (!mesh || !isPerspectiveCamera(camera)) {
+      return;
+    }
+    placeFullscreenOverlay(mesh, camera, directionRef.current);
+    if (!running || finishedRef.current) {
+      return;
+    }
+    const next = overlayProgress(state.clock.elapsedTime, transition.duration, startRef.current);
+    startRef.current = next.startTime;
+    material.uniforms.progress.value = next.progress;
+    if (next.progress === 1) {
+      finishedRef.current = true;
+      onFinish();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "mesh",
+    {
+      ref: meshRef,
+      frustumCulled: false,
+      geometry,
+      material,
+      renderOrder: OVERLAY_RENDER_ORDER
+    }
+  );
+}
+
+// src/scene-transitions/snapshot-overlay.tsx
+var import_fiber21 = require("@react-three/fiber");
+var import_react45 = require("react");
+var import_three21 = require("three");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -12042,26 +12238,26 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, gl } = (0, import_fiber19.useThree)();
-  const meshRef = (0, import_react42.useRef)(null);
-  const startRef = (0, import_react42.useRef)(null);
-  const finishedRef = (0, import_react42.useRef)(false);
-  const directionRef = (0, import_react42.useRef)(new import_three20.Vector3());
-  const material = (0, import_react42.useMemo)(() => {
+  const { camera, gl } = (0, import_fiber21.useThree)();
+  const meshRef = (0, import_react45.useRef)(null);
+  const startRef = (0, import_react45.useRef)(null);
+  const finishedRef = (0, import_react45.useRef)(false);
+  const directionRef = (0, import_react45.useRef)(new import_three21.Vector3());
+  const material = (0, import_react45.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  (0, import_react42.useEffect)(() => () => material?.dispose(), [material]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react45.useEffect)(() => () => material?.dispose(), [material]);
+  (0, import_react45.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
       material.uniforms.progress.value = 0;
     }
   }, [material, runId]);
-  (0, import_fiber19.useFrame)((state) => {
+  (0, import_fiber21.useFrame)((state) => {
     const mesh = meshRef.current;
     if (!mesh || !material || !isPerspectiveCamera(camera)) {
       return;
@@ -12083,21 +12279,21 @@ function SnapshotOverlay({
   if (!material) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -12125,7 +12321,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -12134,46 +12330,13 @@ function TransitionOverlay(props) {
   }
 }
 
-// src/tile/texture-manager-context.tsx
-var import_fiber20 = require("@react-three/fiber");
-var import_react43 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react43.createContext)(
-  null
-);
-function TileTextureManagerProvider({
-  children,
-  maxTextureMemoryMb = 128,
-  maxConcurrentLoads = 4
-}) {
-  const gl = (0, import_fiber20.useThree)((state) => state.gl);
-  const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react43.useMemo)(
-    () => new TileTextureManager({
-      anisotropy,
-      maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
-      concurrency: Math.max(1, Math.floor(maxConcurrentLoads)),
-      retryCount: 1
-    }),
-    [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
-  );
-  (0, import_react43.useEffect)(() => {
-    manager.resume();
-    return () => manager.dispose();
-  }, [manager]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
-}
-function useSharedTileTextureManager() {
-  return (0, import_react43.useContext)(TileTextureManagerContext);
-}
-
 // src/tile/tile.tsx
-var import_fiber21 = require("@react-three/fiber");
-var import_react44 = require("react");
-var import_three22 = require("three");
+var import_fiber22 = require("@react-three/fiber");
+var import_react46 = require("react");
+var import_three23 = require("three");
 
 // src/tile/face-layout.ts
-var import_three21 = require("three");
+var import_three22 = require("three");
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
 var CUBE_RADIUS = DEFAULT_PANORAMA_RADIUS;
@@ -12224,8 +12387,8 @@ function getFaceQuaternion(face) {
     return cached;
   }
   const transform = getFaceTransform(face);
-  const quaternion = new import_three21.Quaternion().setFromEuler(
-    new import_three21.Euler(...transform.rotation, "XYZ")
+  const quaternion = new import_three22.Quaternion().setFromEuler(
+    new import_three22.Euler(...transform.rotation, "XYZ")
   );
   faceQuaternionCache.set(face, quaternion);
   return quaternion;
@@ -12236,17 +12399,17 @@ function getTileBoundingBox(address, radius = CUBE_RADIUS) {
   const halfWidth = local.width / 2;
   const halfHeight = local.height / 2;
   const quaternion = getFaceQuaternion(address.face);
-  const position = new import_three21.Vector3(...transform.position);
+  const position = new import_three22.Vector3(...transform.position);
   const corners = [
-    new import_three21.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
-    new import_three21.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
-    new import_three21.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
-    new import_three21.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
+    new import_three22.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
+    new import_three22.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
+    new import_three22.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
+    new import_three22.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
   }
-  return new import_three21.Box3().setFromPoints(corners);
+  return new import_three22.Box3().setFromPoints(corners);
 }
 function makeTileAddress(face, level, faceSize, tileSize, col, row) {
   const left = (col - 1) * tileSize;
@@ -12349,21 +12512,37 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("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;
 var VIEW_CHANGE_EPSILON = 1e-4;
+function decideTileLodUpdate(input) {
+  if (input.loadMode === "preview") {
+    return false;
+  }
+  const loadModeChanged = input.loadMode !== input.trackedLoadMode;
+  const viewChanged = input.visibilityDirty || loadModeChanged || input.viewportChanged || input.rotationDelta > VIEW_CHANGE_EPSILON || input.fovDelta > VIEW_CHANGE_EPSILON;
+  if (!viewChanged) {
+    return false;
+  }
+  const movingQuickly = input.rotationDelta >= FAST_ROTATION_THRESHOLD_RADIANS || input.fovDelta >= FAST_FOV_THRESHOLD_DEGREES;
+  const immediate = input.visibilityDirty || loadModeChanged || input.viewportChanged || movingQuickly;
+  if (!immediate && input.now - input.lastUpdateAt < MAX_LOD_UPDATE_INTERVAL_MS) {
+    return false;
+  }
+  return true;
+}
 var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
-var SHARED_TILE_GEOMETRY = new import_three22.PlaneGeometry(1, 1);
+var SHARED_TILE_GEOMETRY = new import_three23.PlaneGeometry(1, 1);
 function PreviewFace({
   face,
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react44.useMemo)(() => {
-    const nextGeometry = new import_three22.PlaneGeometry(
+  const geometry = (0, import_react46.useMemo)(() => {
+    const nextGeometry = new import_three23.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
     );
@@ -12377,21 +12556,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  (0, import_react44.useEffect)(
+  (0, import_react46.useEffect)(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -12407,7 +12586,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     PreviewFace,
     {
       face,
@@ -12417,7 +12596,7 @@ function PreviewCube({
     face
   ));
 }
-var TileMesh = (0, import_react44.memo)(function TileMesh2({
+var TileMesh = (0, import_react46.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -12431,14 +12610,14 @@ var TileMesh = (0, import_react44.memo)(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -12450,12 +12629,12 @@ var TileMesh = (0, import_react44.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react44.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react46.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     TileMesh,
     {
       address,
@@ -12555,8 +12734,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new import_three22.Vector3());
-  const center = new import_three22.Vector3();
+  const direction = camera.getWorldDirection(new import_three23.Vector3());
+  const center = new import_three23.Vector3();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -12621,11 +12800,11 @@ function Tile({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = (0, import_fiber21.useThree)();
-  const multiresConfig = (0, import_react44.useMemo)(() => parseMultires(multires), [multires]);
+  const { camera, gl, size } = (0, import_fiber22.useThree)();
+  const multiresConfig = (0, import_react46.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react44.useMemo)(
+  const candidatesByLevel = (0, import_react46.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -12637,13 +12816,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react44.useRef)(onLoadProgress);
-  const errorRef = (0, import_react44.useRef)(onTileError);
-  const levelChangeRef = (0, import_react44.useRef)(onLevelChange);
+  const progressRef = (0, import_react46.useRef)(onLoadProgress);
+  const errorRef = (0, import_react46.useRef)(onTileError);
+  const levelChangeRef = (0, import_react46.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react44.useMemo)(
+  const ownedManager = (0, import_react46.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -12664,7 +12843,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -12674,11 +12853,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react44.useRef)(false);
-  (0, import_react44.useEffect)(() => {
+  const readyRef = (0, import_react46.useRef)(false);
+  (0, import_react46.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -12686,31 +12865,37 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react44.useMemo)(
+  const resolveUrl = (0, import_react46.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = (0, import_react44.useState)([]);
-  const layerTokenRef = (0, import_react44.useRef)("");
-  const currentLevelRef = (0, import_react44.useRef)(1);
-  const lastUpdateAtRef = (0, import_react44.useRef)(-Infinity);
-  const visibilityDirtyRef = (0, import_react44.useRef)(true);
-  const lastVisibilityQuaternionRef = (0, import_react44.useRef)(camera.quaternion.clone());
-  const lastVisibilityFovRef = (0, import_react44.useRef)(Number.NaN);
-  const lastViewportRef = (0, import_react44.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react44.useRef)(new import_three22.Frustum());
-  const projectionMatrixRef = (0, import_react44.useRef)(new import_three22.Matrix4());
-  const visibilityCameraRef = (0, import_react44.useRef)(new import_three22.PerspectiveCamera());
-  (0, import_react44.useEffect)(() => {
+  const [layers, setLayers] = (0, import_react46.useState)([]);
+  const layerTokenRef = (0, import_react46.useRef)("");
+  const currentLevelRef = (0, import_react46.useRef)(1);
+  const lastUpdateAtRef = (0, import_react46.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react46.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react46.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react46.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react46.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react46.useRef)(new import_three23.Frustum());
+  const projectionMatrixRef = (0, import_react46.useRef)(new import_three23.Matrix4());
+  const visibilityCameraRef = (0, import_react46.useRef)(new import_three23.PerspectiveCamera());
+  const trackedLoadModeRef = (0, import_react46.useRef)(loadMode);
+  const targetKeysRef = (0, import_react46.useRef)([]);
+  const detailTokenRef = (0, import_react46.useRef)("");
+  const detailReporter = useSceneDetailReporter();
+  const detailReporterRef = (0, import_react46.useRef)(detailReporter);
+  detailReporterRef.current = detailReporter;
+  (0, import_react46.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -12724,11 +12909,14 @@ function Tile({
       setLayers(nextLayers);
     }
   };
-  (0, import_fiber21.useFrame)(() => {
-    if (loadMode === "preview") {
+  (0, import_fiber22.useFrame)(() => {
+    if (!(camera instanceof import_three23.PerspectiveCamera)) {
       return;
     }
-    if (!(camera instanceof import_three22.PerspectiveCamera)) {
+    if (loadMode === "preview") {
+      trackedLoadModeRef.current = "preview";
+      targetKeysRef.current = [];
+      publishSceneDetail(detailReporterRef.current, detailTokenRef, false);
       return;
     }
     const now = performance.now();
@@ -12739,60 +12927,75 @@ function Tile({
     const fovDelta = Number.isFinite(lastVisibilityFovRef.current) ? Math.abs(camera.fov - lastVisibilityFovRef.current) : Infinity;
     const lastViewport = lastViewportRef.current;
     const viewportChanged = lastViewport.width !== size.width || lastViewport.height !== size.height || lastViewport.dpr !== pixelRatio;
-    const viewChanged = visibilityDirtyRef.current || viewportChanged || rotationDelta > VIEW_CHANGE_EPSILON || fovDelta > VIEW_CHANGE_EPSILON;
-    const movingQuickly = rotationDelta >= FAST_ROTATION_THRESHOLD_RADIANS || fovDelta >= FAST_FOV_THRESHOLD_DEGREES;
-    if (!viewChanged) {
-      return;
-    }
-    const needsImmediateUpdate = visibilityDirtyRef.current || viewportChanged || movingQuickly;
-    if (!needsImmediateUpdate && now - lastUpdateAtRef.current < MAX_LOD_UPDATE_INTERVAL_MS) {
-      return;
-    }
-    lastUpdateAtRef.current = now;
-    const targetLevel = loadMode === "base" ? 1 : getPreferredLevel(
-      levels,
-      size.height,
-      pixelRatio,
-      camera.fov,
-      currentLevelRef.current
-    );
-    if (targetLevel !== currentLevelRef.current) {
-      currentLevelRef.current = targetLevel;
-      levelChangeRef.current?.(targetLevel);
-    }
-    const visibilityCamera = visibilityCameraRef.current;
-    visibilityCamera.copy(camera, false);
-    visibilityCamera.fov = Math.min(
-      179,
-      camera.fov + VISIBILITY_FOV_PADDING_DEGREES
-    );
-    visibilityCamera.aspect = camera.aspect;
-    updateVisibilityFrustum(
-      visibilityCamera,
-      projectionMatrixRef.current,
-      frustumRef.current
-    );
-    const nextLayers = buildLayers(
-      targetLevel,
-      levels,
-      tileSize,
-      frustumRef.current,
-      camera,
-      candidatesByLevel
+    const updateLod = decideTileLodUpdate({
+      loadMode,
+      trackedLoadMode: trackedLoadModeRef.current,
+      now,
+      lastUpdateAt: lastUpdateAtRef.current,
+      visibilityDirty: visibilityDirtyRef.current,
+      viewportChanged,
+      rotationDelta,
+      fovDelta
+    });
+    if (updateLod) {
+      trackedLoadModeRef.current = loadMode;
+      lastUpdateAtRef.current = now;
+      const targetLevel = loadMode === "base" ? 1 : getPreferredLevel(
+        levels,
+        size.height,
+        pixelRatio,
+        camera.fov,
+        currentLevelRef.current
+      );
+      if (targetLevel !== currentLevelRef.current) {
+        currentLevelRef.current = targetLevel;
+        levelChangeRef.current?.(targetLevel);
+      }
+      const visibilityCamera = visibilityCameraRef.current;
+      visibilityCamera.copy(camera, false);
+      visibilityCamera.fov = Math.min(
+        179,
+        camera.fov + VISIBILITY_FOV_PADDING_DEGREES
+      );
+      visibilityCamera.aspect = camera.aspect;
+      updateVisibilityFrustum(
+        visibilityCamera,
+        projectionMatrixRef.current,
+        frustumRef.current
+      );
+      const nextLayers = buildLayers(
+        targetLevel,
+        levels,
+        tileSize,
+        frustumRef.current,
+        camera,
+        candidatesByLevel
+      );
+      visibilityDirtyRef.current = false;
+      lastVisibilityQuaternionRef.current.copy(camera.quaternion);
+      lastVisibilityFovRef.current = camera.fov;
+      lastViewportRef.current = {
+        width: size.width,
+        height: size.height,
+        dpr: pixelRatio
+      };
+      const targetLayer = nextLayers.find((layer) => layer.level === targetLevel);
+      targetKeysRef.current = loadMode === "full" ? (targetLayer?.addresses ?? []).map(
+        (address) => `${resolveUrl(address)}\0${tileKey(address)}`
+      ) : [];
+      commitLayers(nextLayers);
+    }
+    publishSceneDetail(
+      detailReporterRef.current,
+      detailTokenRef,
+      loadMode === "full" && viewTilesAreDrawable(
+        targetKeysRef.current.map((key) => manager.getSnapshot(key).texture)
+      )
     );
-    visibilityDirtyRef.current = false;
-    lastVisibilityQuaternionRef.current.copy(camera.quaternion);
-    lastVisibilityFovRef.current = camera.fov;
-    lastViewportRef.current = {
-      width: size.width,
-      height: size.height,
-      dpr: pixelRatio
-    };
-    commitLayers(nextLayers);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
-    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
+    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       TileLayerMeshes,
       {
         layer,
@@ -12805,7 +13008,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function SceneSource({
   scene,
   visible,
@@ -12818,7 +13021,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Sphere,
         {
           src: scene.src,
@@ -12831,7 +13034,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Tile,
         {
           ...tileProps,
@@ -12842,6 +13045,19 @@ function SceneSource({
         }
       );
     }
+    case "sphereTile": {
+      const { id: _id, type: _type, ...tileProps } = scene;
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        SphereTile,
+        {
+          ...tileProps,
+          visible,
+          loadMode: baseOnly ? "base" : "full",
+          onReady,
+          onPreviewError: onError
+        }
+      );
+    }
     default: {
       const exhaustive = scene;
       void exhaustive;
@@ -12854,17 +13070,17 @@ function SnapshotCapture({
   maxPixels,
   onCaptured
 }) {
-  const { camera, gl, scene, size } = (0, import_fiber22.useThree)();
-  const capturedRequestRef = (0, import_react45.useRef)(0);
-  const renderTargetRef = (0, import_react45.useRef)(null);
-  (0, import_react45.useEffect)(
+  const { camera, gl, scene, size } = (0, import_fiber23.useThree)();
+  const capturedRequestRef = (0, import_react47.useRef)(0);
+  const renderTargetRef = (0, import_react47.useRef)(null);
+  (0, import_react47.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
     },
     []
   );
-  (0, import_fiber22.useFrame)(() => {
+  (0, import_fiber23.useFrame)(() => {
     if (requestId === 0 || requestId === capturedRequestRef.current) {
       return;
     }
@@ -12874,14 +13090,14 @@ function SnapshotCapture({
     const scale = Math.min(1, Math.sqrt(maxPixels / (sourceWidth * sourceHeight)));
     const width = Math.max(1, Math.floor(sourceWidth * scale));
     const height = Math.max(1, Math.floor(sourceHeight * scale));
-    const nextTarget = new import_three23.WebGLRenderTarget(width, height, {
+    const nextTarget = new import_three24.WebGLRenderTarget(width, height, {
       depthBuffer: false,
       stencilBuffer: false
     });
-    nextTarget.texture.colorSpace = import_three23.LinearSRGBColorSpace;
+    nextTarget.texture.colorSpace = import_three24.LinearSRGBColorSpace;
     nextTarget.texture.generateMipmaps = false;
-    nextTarget.texture.minFilter = import_three23.LinearFilter;
-    nextTarget.texture.magFilter = import_three23.LinearFilter;
+    nextTarget.texture.minFilter = import_three24.LinearFilter;
+    nextTarget.texture.magFilter = import_three24.LinearFilter;
     const previousTarget = gl.getRenderTarget();
     gl.setRenderTarget(nextTarget);
     gl.clear();
@@ -12908,55 +13124,94 @@ function ScenesController({
   activeSceneId,
   transition: transitionInput,
   renderHotspots,
+  onSceneReady,
   onTransitionEnd,
   onTransitionError,
   snapshotMaxPixels = 3686400,
+  transitionWaitForDetailMs,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = (0, import_react45.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react47.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react45.useMemo)(
+  const transition = (0, import_react47.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react45.useMemo)(
+  const sceneMap = (0, import_react47.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react45.useState)([
+  const [slots, setSlots] = (0, import_react47.useState)([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = (0, import_react45.useState)(0);
-  const [liveSlot, setLiveSlot] = (0, import_react45.useState)(0);
-  const [pendingSlot, setPendingSlot] = (0, import_react45.useState)(null);
-  const [phase, setPhase] = (0, import_react45.useState)(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = (0, import_react45.useState)(0);
-  const [transitionRunId, setTransitionRunId] = (0, import_react45.useState)(0);
-  const [snapshot, setSnapshot] = (0, import_react45.useState)(null);
-  const [recoveryKey, setRecoveryKey] = (0, import_react45.useState)(0);
-  const requestedSceneIdRef = (0, import_react45.useRef)(activeSceneId);
-  const captureReasonRef = (0, import_react45.useRef)("start");
-  const interactionReleaseRef = (0, import_react45.useRef)(null);
-  const slotsRef = (0, import_react45.useRef)(slots);
-  const phaseRef = (0, import_react45.useRef)(phase);
-  const liveSlotRef = (0, import_react45.useRef)(liveSlot);
-  const transitionFromRef = (0, import_react45.useRef)(initialScene);
+  const [activeSlot, setActiveSlot] = (0, import_react47.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react47.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react47.useState)(null);
+  const [phase, setPhase] = (0, import_react47.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react47.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react47.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react47.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react47.useState)(0);
+  const requestedSceneIdRef = (0, import_react47.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react47.useRef)("start");
+  const interactionReleaseRef = (0, import_react47.useRef)(null);
+  const slotsRef = (0, import_react47.useRef)(slots);
+  const phaseRef = (0, import_react47.useRef)(phase);
+  const liveSlotRef = (0, import_react47.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react47.useRef)(initialScene);
+  const readySceneRef = (0, import_react47.useRef)(null);
+  const waitRef = (0, import_react47.useRef)(null);
+  const waitTimerRef = (0, import_react47.useRef)(null);
+  const detailGenerationRef = (0, import_react47.useRef)(0);
+  const [detailGeneration, setDetailGeneration] = (0, import_react47.useState)(0);
+  const mountedRef = (0, import_react47.useRef)(true);
+  const waitForDetailMsRef = (0, import_react47.useRef)(0);
+  waitForDetailMsRef.current = normalizeTransitionWaitMs(transitionWaitForDetailMs);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = (0, import_react45.useCallback)(() => {
+  const releaseInteraction = (0, import_react47.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react45.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react47.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = (0, import_react45.useCallback)((scene) => {
+  const clearDetailWait = (0, import_react47.useCallback)((bumpGeneration) => {
+    if (waitTimerRef.current !== null) {
+      clearTimeout(waitTimerRef.current);
+      waitTimerRef.current = null;
+    }
+    const generation = waitRef.current?.generation;
+    if (generation === void 0) {
+      waitRef.current = null;
+    } else {
+      waitRef.current = acceptDetailWait(waitRef.current, {
+        kind: "cancel",
+        generation
+      }).wait;
+    }
+    if (!bumpGeneration || !mountedRef.current) {
+      return;
+    }
+    const nextGeneration = detailGenerationRef.current + 1;
+    detailGenerationRef.current = nextGeneration;
+    setDetailGeneration(nextGeneration);
+  }, []);
+  (0, import_react47.useEffect)(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      clearDetailWait(false);
+    };
+  }, [clearDetailWait]);
+  const startPreload = (0, import_react47.useCallback)((scene) => {
+    clearDetailWait(true);
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -12966,8 +13221,8 @@ function ScenesController({
     });
     setPendingSlot(nextSlot);
     setPhase("preloading");
-  }, []);
-  (0, import_react45.useEffect)(() => {
+  }, [clearDetailWait]);
+  (0, import_react47.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -12982,20 +13237,31 @@ function ScenesController({
       requestedSceneIdRef.current = requested.id;
       return;
     }
-    if (phaseRef.current === "transitioning" || phaseRef.current === "capturing") {
+    if (phaseRef.current === "transitioning" || phaseRef.current === "capturing" || phaseRef.current === "awaitingDetail") {
+      if (requestedSceneIdRef.current === requested.id) return;
       requestedSceneIdRef.current = requested.id;
       captureReasonRef.current = "interrupt";
+      clearDetailWait(true);
       setPhase("recapturing");
       setCaptureRequestId((current) => current + 1);
       return;
     }
     startPreload(requested);
-  }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = (0, import_react45.useCallback)((slot) => {
+  }, [activeSceneId, clearDetailWait, pendingSlot, reportError, sceneMap, startPreload]);
+  const notifySceneReady = (0, import_react47.useCallback)((scene) => {
+    if (!scene || readySceneRef.current === scene) return;
+    readySceneRef.current = scene;
+    onSceneReady?.(scene.id);
+  }, [onSceneReady]);
+  const handleReady = (0, import_react47.useCallback)((slot) => {
+    if (slot === liveSlotRef.current && pendingSlot === null && phaseRef.current === "idle") {
+      notifySceneReady(slotsRef.current[slot]);
+      return;
+    }
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
-    if (transition.preset === "none") {
+    if (transition.preset === "none" && waitForDetailMsRef.current === 0) {
       const previousScene = slotsRef.current[liveSlotRef.current];
       const nextScene = slotsRef.current[slot];
       setSlots((current) => {
@@ -13007,6 +13273,7 @@ function ScenesController({
       setActiveSlot(slot);
       setPendingSlot(null);
       setPhase("idle");
+      notifySceneReady(nextScene);
       if (previousScene && nextScene) {
         onTransitionEnd?.({
           previousSceneId: previousScene.id,
@@ -13021,64 +13288,168 @@ function ScenesController({
     captureReasonRef.current = "start";
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
-  }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = (0, import_react45.useCallback)((nextSnapshot) => {
-    setSnapshot((current) => {
-      current?.dispose();
-      return nextSnapshot;
-    });
+  }, [controlsRef, notifySceneReady, onTransitionEnd, pendingSlot, transition.preset]);
+  const finishTransition = (0, import_react47.useCallback)(() => {
+    const nextSlot = pendingSlot;
+    const previousScene = transitionFromRef.current;
+    const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
+    if (nextSlot === null || !nextScene) {
+      releaseInteraction();
+      setPhase("idle");
+      return;
+    }
+    setActiveSlot(nextSlot);
+    setLiveSlot(nextSlot);
+    setPendingSlot(null);
+    setPhase("idle");
+    const oldSnapshot = snapshot;
+    setSnapshot(null);
+    oldSnapshot?.dispose();
+    releaseInteraction();
+    if (previousScene) {
+      onTransitionEnd?.({
+        previousSceneId: previousScene.id,
+        sceneId: nextScene.id,
+        preset: transition.preset
+      });
+    }
+  }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
+  const finishTransitionRef = (0, import_react47.useRef)(finishTransition);
+  finishTransitionRef.current = finishTransition;
+  const transitionRef = (0, import_react47.useRef)(transition);
+  transitionRef.current = transition;
+  const consumeDetailSignal = (0, import_react47.useCallback)((signal) => {
+    const decision = acceptDetailWait(waitRef.current, signal);
+    waitRef.current = decision.wait;
+    if (!decision.start) {
+      return;
+    }
+    if (waitTimerRef.current !== null) {
+      clearTimeout(waitTimerRef.current);
+      waitTimerRef.current = null;
+    }
+    if (!mountedRef.current) {
+      return;
+    }
+    if (transitionRef.current.preset === "none") {
+      finishTransitionRef.current();
+      return;
+    }
+    setPhase("transitioning");
+    setTransitionRunId((current) => current + 1);
+  }, []);
+  const handleCaptured = (0, import_react47.useCallback)((nextSnapshot) => {
     if (captureReasonRef.current === "interrupt") {
+      setSnapshot((current) => {
+        current?.dispose();
+        return nextSnapshot;
+      });
       startPreload(sceneMap.get(requestedSceneIdRef.current));
       return;
     }
-    const sourceSlot = liveSlotRef.current;
-    setSlots((current) => {
-      const next = [...current];
-      next[sourceSlot] = null;
-      return next;
+    const sourceSlot = liveSlotRef.current;
+    const incoming = pendingSlot === null ? null : slotsRef.current[pendingSlot];
+    setSlots((current) => {
+      const next = [...current];
+      next[sourceSlot] = null;
+      return next;
+    });
+    manager?.releaseUnused();
+    if (pendingSlot !== null && incoming) {
+      notifySceneReady(incoming);
+      setLiveSlot(pendingSlot);
+    }
+    if (waitTimerRef.current !== null) {
+      clearTimeout(waitTimerRef.current);
+      waitTimerRef.current = null;
+    }
+    waitRef.current = null;
+    let hold = null;
+    if (incoming && waitForDetailMsRef.current > 0) {
+      const now = performance.now();
+      const generation = detailGenerationRef.current + 1;
+      detailGenerationRef.current = generation;
+      hold = planDetailHold({
+        waitMs: waitForDetailMsRef.current,
+        now,
+        generation,
+        sceneId: incoming.id
+      });
+      if (hold) {
+        const deadline = hold.deadline;
+        waitRef.current = hold;
+        setDetailGeneration(generation);
+        waitTimerRef.current = setTimeout(() => {
+          consumeDetailSignal({
+            kind: "timeout",
+            generation,
+            now: deadline
+          });
+        }, Math.max(0, deadline - performance.now()));
+      }
+    }
+    const nextPhase = phaseAfterSnapshot(transition.preset, hold);
+    if (nextPhase === "awaitingDetail") {
+      setSnapshot((current) => {
+        current?.dispose();
+        return nextSnapshot;
+      });
+      setPhase("awaitingDetail");
+      return;
+    }
+    if (nextPhase === "idle") {
+      nextSnapshot.dispose();
+      setSnapshot((current) => {
+        current?.dispose();
+        return null;
+      });
+      if (pendingSlot !== null) {
+        setActiveSlot(pendingSlot);
+      }
+      setPendingSlot(null);
+      setPhase("idle");
+      releaseInteraction();
+      const previousScene = transitionFromRef.current;
+      if (previousScene && incoming) {
+        onTransitionEnd?.({
+          previousSceneId: previousScene.id,
+          sceneId: incoming.id,
+          preset: "none"
+        });
+      }
+      return;
+    }
+    setSnapshot((current) => {
+      current?.dispose();
+      return nextSnapshot;
     });
-    manager?.releaseUnused();
-    if (pendingSlot !== null) {
-      setLiveSlot(pendingSlot);
-    }
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
-  }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = (0, import_react45.useCallback)(() => {
-    const nextSlot = pendingSlot;
-    const previousScene = transitionFromRef.current;
-    const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
-    if (nextSlot === null || !nextScene) {
-      releaseInteraction();
-      setPhase("idle");
-      return;
-    }
-    setActiveSlot(nextSlot);
-    setLiveSlot(nextSlot);
-    setPendingSlot(null);
-    setPhase("idle");
-    const oldSnapshot = snapshot;
-    setSnapshot(null);
-    oldSnapshot?.dispose();
-    releaseInteraction();
-    if (previousScene) {
-      onTransitionEnd?.({
-        previousSceneId: previousScene.id,
-        sceneId: nextScene.id,
-        preset: transition.preset
-      });
-    }
-  }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  (0, import_react45.useEffect)(() => () => {
+  }, [
+    consumeDetailSignal,
+    manager,
+    notifySceneReady,
+    onTransitionEnd,
+    pendingSlot,
+    releaseInteraction,
+    sceneMap,
+    startPreload,
+    transition.preset
+  ]);
+  const snapshotRef = (0, import_react47.useRef)(snapshot);
+  snapshotRef.current = snapshot;
+  (0, import_react47.useEffect)(() => () => {
     releaseInteraction();
-    snapshot?.dispose();
-  }, [releaseInteraction, snapshot]);
-  const { gl } = (0, import_fiber22.useThree)();
-  (0, import_react45.useEffect)(() => {
+    snapshotRef.current?.dispose();
+    snapshotRef.current = null;
+  }, [releaseInteraction]);
+  const { gl } = (0, import_fiber23.useThree)();
+  (0, import_react47.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
       releaseInteraction();
+      clearDetailWait(true);
       manager?.dispose();
       snapshot?.dispose();
       setSnapshot(null);
@@ -13086,6 +13457,7 @@ function ScenesController({
       setPhase("idle");
     };
     const onContextRestored = () => {
+      readySceneRef.current = null;
       manager?.resume();
       setRecoveryKey((current) => current + 1);
     };
@@ -13095,11 +13467,30 @@ function ScenesController({
       canvas.removeEventListener("webglcontextlost", onContextLost);
       canvas.removeEventListener("webglcontextrestored", onContextRestored);
     };
-  }, [gl, manager, releaseInteraction, snapshot]);
+  }, [clearDetailWait, gl, manager, releaseInteraction, snapshot]);
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const slotSceneKey = `${slots[0]?.id ?? ""}
+${slots[1]?.id ?? ""}`;
+  const detailReporters = (0, import_react47.useMemo)(() => {
+    const [firstSceneId = "", secondSceneId = ""] = slotSceneKey.split("\n");
+    const sceneIds = [firstSceneId, secondSceneId];
+    return sceneIds.map((sceneId) => ({
+      generation: detailGeneration,
+      report: (ready) => {
+        if (!ready || sceneId === "") {
+          return;
+        }
+        consumeDetailSignal({
+          kind: "ready",
+          generation: detailGeneration,
+          sceneId
+        });
+      }
+    }));
+  }, [consumeDetailSignal, detailGeneration, slotSceneKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react47.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -13111,23 +13502,30 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        SceneSource,
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        SceneDetailContext.Provider,
         {
-          scene: source,
-          visible: isLive,
-          baseOnly: isPending && phase !== "idle",
-          onReady: () => handleReady(slot),
-          onError: (error) => {
-            if (source) {
-              reportError(source.id, error);
+          value: detailReporters[slot],
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            SceneSource,
+            {
+              scene: source,
+              visible: isLive,
+              baseOnly: pendingSceneUsesBaseLayer(phase, isPending),
+              onReady: () => handleReady(slot),
+              onError: (error) => {
+                if (source) {
+                  reportError(source.id, error);
+                }
+              }
             }
-          }
+          )
         },
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    snapshot !== null && phase === "awaitingDetail" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SnapshotHold, { snapshot }) : null,
+    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       TransitionOverlay,
       {
         snapshot,
@@ -13150,11 +13548,11 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = (0, import_react45.useState)(
+  const [internalId, setInternalId] = (0, import_react47.useState)(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
-  const requestSceneChange = (0, import_react45.useCallback)(
+  const requestSceneChange = (0, import_react47.useCallback)(
     (id) => {
       if (isControlled) {
         onActiveSceneIdChange?.(id);
@@ -13164,13 +13562,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = (0, import_react45.useRef)(scenes);
+  const scenesRef = (0, import_react47.useRef)(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = (0, import_react45.useRef)(resolvedId);
+  const resolvedIdRef = (0, import_react47.useRef)(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = (0, import_react45.useContext)(ScenesHostContext);
-  const phaseRef = (0, import_react45.useRef)("idle");
-  (0, import_react45.useEffect)(() => {
+  const host = (0, import_react47.useContext)(ScenesHostContext);
+  const phaseRef = (0, import_react47.useRef)("idle");
+  (0, import_react47.useEffect)(() => {
     if (!host) {
       return;
     }
@@ -13220,12 +13618,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         ScenesController,
         {
           ...rest,
@@ -13239,28 +13637,28 @@ function Scenes({
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_fiber25 = require("@react-three/fiber");
-var import_react49 = require("react");
-var import_three28 = require("three");
+var import_fiber26 = require("@react-three/fiber");
+var import_react51 = require("react");
+var import_three29 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
-var import_fiber24 = require("@react-three/fiber");
-var import_react48 = require("react");
-var import_three26 = require("three");
+var import_fiber25 = require("@react-three/fiber");
+var import_react50 = require("react");
+var import_three27 = require("three");
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_react47 = require("react");
+var import_react49 = require("react");
 
 // src/webvr/stereo-html.tsx
-var import_fiber23 = require("@react-three/fiber");
-var import_react46 = require("react");
+var import_fiber24 = require("@react-three/fiber");
+var import_react48 = require("react");
 var import_client = require("react-dom/client");
-var import_three24 = require("three");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_three25 = require("three");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function useFallbackStereoView() {
-  const runtime = (0, import_react46.useContext)(WebVRRuntimeContext);
+  const runtime = (0, import_react48.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = (0, import_react46.useSyncExternalStore)(
+  const fallback = (0, import_react48.useSyncExternalStore)(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -13275,10 +13673,10 @@ function ProjectedHtml({
   stereoView,
   eye
 }) {
-  const { camera, gl, events, size } = (0, import_fiber23.useThree)();
-  const group = (0, import_react46.useRef)(null);
-  const overlay = (0, import_react46.useRef)(null);
-  const scratch = (0, import_react46.useRef)(new import_three24.Vector3());
+  const { camera, gl, events, size } = (0, import_fiber24.useThree)();
+  const group = (0, import_react48.useRef)(null);
+  const overlay = (0, import_react48.useRef)(null);
+  const scratch = (0, import_react48.useRef)(new import_three25.Vector3());
   const target = events.connected || gl.domElement.parentElement;
   const updatePosition = () => {
     const anchor = group.current;
@@ -13306,7 +13704,7 @@ function ProjectedHtml({
       )
     );
   };
-  (0, import_react46.useLayoutEffect)(() => {
+  (0, import_react48.useLayoutEffect)(() => {
     if (!target) return;
     const element = document.createElement("div");
     Object.assign(element.style, {
@@ -13324,9 +13722,9 @@ function ProjectedHtml({
       queueMicrotask(() => root.unmount());
     };
   }, [target]);
-  (0, import_react46.useLayoutEffect)(() => {
+  (0, import_react48.useLayoutEffect)(() => {
     overlay.current?.root.render(
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
           "aria-hidden": eye === "right" || void 0,
@@ -13337,19 +13735,19 @@ function ProjectedHtml({
     );
     updatePosition();
   });
-  (0, import_fiber23.useFrame)(updatePosition);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("group", { ref: group });
+  (0, import_fiber24.useFrame)(updatePosition);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("group", { ref: group });
 }
 function PanoHtml(props) {
   const stereoView = useFallbackStereoView();
-  return stereoView ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProjectedHtml, { ...props, stereoView, eye: "left" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProjectedHtml, { ...props, stereoView, eye: "right" })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProjectedHtml, { ...props });
+  return stereoView ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ProjectedHtml, { ...props, stereoView, eye: "left" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ProjectedHtml, { ...props, stereoView, eye: "right" })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ProjectedHtml, { ...props });
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -13421,16 +13819,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react47.useState)(false);
-  (0, import_react47.useEffect)(() => {
+  const [imageFailed, setImageFailed] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = (0, import_react47.useMemo)(
+  const resolvedAppearance = (0, import_react49.useMemo)(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = (0, import_react47.useMemo)(
+  const bubbleStyle = (0, import_react49.useMemo)(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -13452,8 +13850,8 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
-    showImage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
+    showImage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "img",
       {
         alt: content.imageAlt ?? content.text ?? "",
@@ -13462,7 +13860,7 @@ function HotspotTooltip({
         src: content.image
       }
     ) : null,
-    content.text ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    content.text ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "p",
       {
         className: "pano-hotspot-tooltip-text",
@@ -13478,18 +13876,18 @@ function HotspotTooltip({
 }
 
 // src/hotspot/transform.ts
-var import_three25 = require("three");
-var LOCAL_FORWARD = new import_three25.Vector3(0, 0, 1);
-var CAMERA_POSITION = new import_three25.Vector3();
+var import_three26 = require("three");
+var LOCAL_FORWARD = new import_three26.Vector3(0, 0, 1);
+var CAMERA_POSITION = new import_three26.Vector3();
 function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight, distance) {
   if (orientation2 === "billboard") {
     group.quaternion.copy(camera.quaternion);
   } else {
     group.quaternion.copy(surfaceQuaternion3);
   }
-  group.rotateOnAxis(LOCAL_FORWARD, import_three25.MathUtils.degToRad(-rotation));
-  let scaleFactor = scaleMode === "fixed" && camera instanceof import_three25.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
-  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof import_three25.PerspectiveCamera) {
+  group.rotateOnAxis(LOCAL_FORWARD, import_three26.MathUtils.degToRad(-rotation));
+  let scaleFactor = scaleMode === "fixed" && camera instanceof import_three26.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof import_three26.PerspectiveCamera) {
     group.updateWorldMatrix(true, false);
     CAMERA_POSITION.setFromMatrixPosition(group.matrixWorld).applyMatrix4(
       camera.matrixWorldInverse
@@ -13504,12 +13902,12 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   group.updateMatrixWorld();
 }
 function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = import_three25.MathUtils.clamp(referenceFov, 1, 179);
-  return Math.tan(import_three25.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three25.MathUtils.degToRad(safeReferenceFov) / 2);
+  const safeReferenceFov = import_three26.MathUtils.clamp(referenceFov, 1, 179);
+  return Math.tan(import_three26.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three26.MathUtils.degToRad(safeReferenceFov) / 2);
 }
 
 // src/hotspot/hotspot-anchor.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -13517,27 +13915,27 @@ var DEFAULT_REFERENCE_FOV = 75;
 var MIN_ANGULAR_SIZE = 0.01;
 var MAX_ANGULAR_SIZE = 179;
 var DRAG_EPSILON_DEGREES = 1e-3;
-var TOOLTIP_WORLD_BOX = new import_three26.Box3();
-var TOOLTIP_LOCAL_BOX = new import_three26.Box3();
-var TOOLTIP_CORNER = new import_three26.Vector3();
-var TOOLTIP_INVERSE = new import_three26.Matrix4();
-var TOOLTIP_WORLD_CORNER = new import_three26.Vector3();
-var TOOLTIP_PROJECTED = new import_three26.Vector3();
-var TOOLTIP_RAY_ORIGIN = new import_three26.Vector3();
-var TOOLTIP_RAY_FAR = new import_three26.Vector3();
-var TOOLTIP_RAY_DIRECTION = new import_three26.Vector3();
-var TOOLTIP_RAY = new import_three26.Ray();
-var TOOLTIP_PLANE = new import_three26.Plane();
-var TOOLTIP_INTERSECTION = new import_three26.Vector3();
-var TOOLTIP_PLANE_NORMAL = new import_three26.Vector3();
-var TOOLTIP_PLANE_POINT = new import_three26.Vector3();
+var TOOLTIP_WORLD_BOX = new import_three27.Box3();
+var TOOLTIP_LOCAL_BOX = new import_three27.Box3();
+var TOOLTIP_CORNER = new import_three27.Vector3();
+var TOOLTIP_INVERSE = new import_three27.Matrix4();
+var TOOLTIP_WORLD_CORNER = new import_three27.Vector3();
+var TOOLTIP_PROJECTED = new import_three27.Vector3();
+var TOOLTIP_RAY_ORIGIN = new import_three27.Vector3();
+var TOOLTIP_RAY_FAR = new import_three27.Vector3();
+var TOOLTIP_RAY_DIRECTION = new import_three27.Vector3();
+var TOOLTIP_RAY = new import_three27.Ray();
+var TOOLTIP_PLANE = new import_three27.Plane();
+var TOOLTIP_INTERSECTION = new import_three27.Vector3();
+var TOOLTIP_PLANE_NORMAL = new import_three27.Vector3();
+var TOOLTIP_PLANE_POINT = new import_three27.Vector3();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? import_three26.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(import_three26.MathUtils.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? import_three27.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(import_three27.MathUtils.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -13550,39 +13948,39 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return import_three26.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return import_three27.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = import_three26.MathUtils.clamp(
+  const safeWidth = import_three27.MathUtils.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = import_three26.MathUtils.clamp(
+  const safeHeight = import_three27.MathUtils.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(import_three26.MathUtils.degToRad(safeWidth) / 2),
-    Math.tan(import_three26.MathUtils.degToRad(safeHeight) / 2)
+    Math.tan(import_three27.MathUtils.degToRad(safeWidth) / 2),
+    Math.tan(import_three27.MathUtils.degToRad(safeHeight) / 2)
   );
   return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
 }
 function createSurfaceQuaternion(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = import_three26.MathUtils.degToRad(position.pitch);
-  const yaw = import_three26.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three26.Vector3(
+  const pitch = import_three27.MathUtils.degToRad(position.pitch);
+  const yaw = import_three27.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three27.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
   const localRight = localUp.clone().cross(inward).normalize();
-  const basis = new import_three26.Matrix4().makeBasis(localRight, localUp, inward);
-  return new import_three26.Quaternion().setFromRotationMatrix(basis);
+  const basis = new import_three27.Matrix4().makeBasis(localRight, localUp, inward);
+  return new import_three27.Quaternion().setFromRotationMatrix(basis);
 }
 function makeInteractionEvent(id, position, event) {
   return {
@@ -13595,7 +13993,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return import_three26.MathUtils.radToDeg(aVector.angleTo(bVector));
+  return import_three27.MathUtils.radToDeg(aVector.angleTo(bVector));
 }
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
@@ -13826,24 +14224,24 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react48.useContext)(PanoramaViewContext);
-  const hotspotTargetRegistry = (0, import_react48.useContext)(HotspotTargetRegistryContext);
-  const eventBus = (0, import_react48.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react50.useContext)(PanoramaViewContext);
+  const hotspotTargetRegistry = (0, import_react50.useContext)(HotspotTargetRegistryContext);
+  const eventBus = (0, import_react50.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = (0, import_fiber24.useThree)();
-  const groupRef = (0, import_react48.useRef)(null);
-  const tooltipAnchorRef = (0, import_react48.useRef)(null);
-  const dragStateRef = (0, import_react48.useRef)(null);
-  const suppressNextClickRef = (0, import_react48.useRef)(false);
-  const [hovered, setHovered] = (0, import_react48.useState)(false);
-  const [dragging, setDragging] = (0, import_react48.useState)(false);
-  const [pinned, setPinned] = (0, import_react48.useState)(false);
-  const tooltipContent = (0, import_react48.useMemo)(
+  const { camera, size } = (0, import_fiber25.useThree)();
+  const groupRef = (0, import_react50.useRef)(null);
+  const tooltipAnchorRef = (0, import_react50.useRef)(null);
+  const dragStateRef = (0, import_react50.useRef)(null);
+  const suppressNextClickRef = (0, import_react50.useRef)(false);
+  const [hovered, setHovered] = (0, import_react50.useState)(false);
+  const [dragging, setDragging] = (0, import_react50.useState)(false);
+  const [pinned, setPinned] = (0, import_react50.useState)(false);
+  const tooltipContent = (0, import_react50.useMemo)(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
   const normalizedPosition = normalizePanoPosition(position);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!hotspotTargetRegistry) {
       return;
     }
@@ -13860,19 +14258,19 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = (0, import_react48.useMemo)(
+  const worldPosition = (0, import_react50.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react48.useMemo)(
+  const surfaceQuaternion3 = (0, import_react50.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = (0, import_react48.useMemo)(() => {
-    const planeGeometry = new import_three26.PlaneGeometry(1, 1);
-    const geometry = new import_three26.EdgesGeometry(planeGeometry);
+  const focusGeometry = (0, import_react50.useMemo)(() => {
+    const planeGeometry = new import_three27.PlaneGeometry(1, 1);
+    const geometry = new import_three27.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
     return geometry;
   }, []);
@@ -13897,14 +14295,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  (0, import_react48.useEffect)(
+  (0, import_react50.useEffect)(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!cursorApi) {
       return;
     }
@@ -13926,14 +14324,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  (0, import_react48.useEffect)(
+  (0, import_react50.useEffect)(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  (0, import_react48.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_react50.useEffect)(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -13942,12 +14340,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (acceptsPointer) {
       return;
     }
@@ -13960,7 +14358,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  (0, import_react48.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -14003,7 +14401,7 @@ function HotspotAnchor({
     worldHeight,
     worldWidth
   ]);
-  (0, import_fiber24.useFrame)((state) => {
+  (0, import_fiber25.useFrame)((state) => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -14062,7 +14460,7 @@ function HotspotAnchor({
       setHovered(true);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "group",
     {
       ref: groupRef,
@@ -14139,18 +14537,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -14165,10 +14563,10 @@ function HotspotAnchor({
 }
 
 // src/hotspot/hotspot-plane.tsx
-var import_three27 = require("three");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_three28 = require("three");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
-var SAMPLE_UV = new import_three27.Vector2();
+var SAMPLE_UV = new import_three28.Vector2();
 var RAYCAST_HITS = [];
 var IMAGE_DATA_CACHE = /* @__PURE__ */ new WeakMap();
 function clampOpacity(opacity) {
@@ -14242,8 +14640,8 @@ function sampleTextureAlpha(texture, u, v) {
 }
 function hotspotPlaneRaycast(raycaster, intersects2) {
   const material = Array.isArray(this.material) ? this.material[0] : this.material;
-  if (!(material instanceof import_three27.MeshBasicMaterial)) {
-    import_three27.Mesh.prototype.raycast.call(this, raycaster, intersects2);
+  if (!(material instanceof import_three28.MeshBasicMaterial)) {
+    import_three28.Mesh.prototype.raycast.call(this, raycaster, intersects2);
     return;
   }
   const cutoff = Math.max(material.alphaTest, HOTSPOT_ALPHA_CUTOFF);
@@ -14251,7 +14649,7 @@ function hotspotPlaneRaycast(raycaster, intersects2) {
     return;
   }
   RAYCAST_HITS.length = 0;
-  import_three27.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
+  import_three28.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
   const map = material.map;
   for (const hit of RAYCAST_HITS) {
     if (!map || !hit.uv) {
@@ -14268,16 +14666,16 @@ function HotspotPlane({
   map,
   opacity
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("mesh", { raycast: hotspotPlaneRaycast, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       PanoBasicMaterial,
       {
         target: "hotspot",
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
         map,
         opacity: map ? clampOpacity(opacity) : 0,
-        side: import_three27.DoubleSide,
+        side: import_three28.DoubleSide,
         toneMapped: false,
         transparent: true
       }
@@ -14286,15 +14684,15 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = (0, import_fiber25.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react49.useState)(null);
-  const onLoadRef = (0, import_react49.useRef)(onLoad);
-  const onErrorRef = (0, import_react49.useRef)(onError);
+  const gl = (0, import_fiber26.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react51.useState)(null);
+  const onLoadRef = (0, import_react51.useRef)(onLoad);
+  const onErrorRef = (0, import_react51.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14302,7 +14700,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
         active = false;
       };
     }
-    const loader = new import_three28.TextureLoader();
+    const loader = new import_three29.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -14310,11 +14708,11 @@ function useHotspotImageTexture(src, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three28.SRGBColorSpace;
-        loadedTexture.wrapS = import_three28.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three28.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three28.LinearFilter;
-        loadedTexture.minFilter = import_three28.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three29.SRGBColorSpace;
+        loadedTexture.wrapS = import_three29.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three29.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three29.LinearFilter;
+        loadedTexture.minFilter = import_three29.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -14332,7 +14730,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react49.useEffect)(
+  (0, import_react51.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14350,20 +14748,20 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_react51 = require("react");
-var import_three30 = require("three");
+var import_react53 = require("react");
+var import_three31 = require("three");
 
 // src/hotspot/hotspot-stroke-line.tsx
 var import_drei = require("@react-three/drei");
-var import_fiber26 = require("@react-three/fiber");
-var import_react50 = require("react");
-var import_three29 = require("three");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var LINE_WORLD_POSITION = new import_three29.Vector3();
+var import_fiber27 = require("@react-three/fiber");
+var import_react52 = require("react");
+var import_three30 = require("three");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var LINE_WORLD_POSITION = new import_three30.Vector3();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -14371,8 +14769,8 @@ function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   }
   object.getWorldPosition(LINE_WORLD_POSITION);
   const depth = Math.max(camera.position.distanceTo(LINE_WORLD_POSITION), 1);
-  const fov = camera instanceof import_three29.PerspectiveCamera ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(import_three29.MathUtils.degToRad(fov) * 0.5) * depth);
+  const fov = camera instanceof import_three30.PerspectiveCamera ? camera.fov : 75;
+  material.dashScale = viewportHeight / (2 * Math.tan(import_three30.MathUtils.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -14393,22 +14791,22 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = (0, import_react50.useRef)(null);
-  const { camera, size } = (0, import_fiber26.useThree)();
+  const lineRef = (0, import_react52.useRef)(null);
+  const { camera, size } = (0, import_fiber27.useThree)();
   const dash = resolveDash(dashSize, gapSize);
-  (0, import_react50.useLayoutEffect)(() => {
+  (0, import_react52.useLayoutEffect)(() => {
     if (!dash.dashed) {
       return;
     }
     applyScreenSpaceDashScale(lineRef.current, camera, size.height);
   }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
-  (0, import_fiber26.useFrame)((state) => {
+  (0, import_fiber27.useFrame)((state) => {
     if (!dash.dashed) {
       return;
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_drei.Line,
     {
       ref: lineRef,
@@ -14430,7 +14828,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -14465,7 +14863,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new import_three30.Vector2(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new import_three31.Vector2(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -14502,7 +14900,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new import_three30.Vector3()];
+  const candidates = [new import_three31.Vector3()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14526,7 +14924,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new import_three30.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three30.Vector3(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new import_three31.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three31.Vector3(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14537,7 +14935,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three30.Vector3()
+    new import_three31.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14546,20 +14944,20 @@ function surfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = position.pitch * Math.PI / 180;
   const yaw = position.yaw * Math.PI / 180;
-  const localUp = new import_three30.Vector3(
+  const localUp = new import_three31.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three30.Quaternion().setFromRotationMatrix(
-    new import_three30.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three31.Quaternion().setFromRotationMatrix(
+    new import_three31.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal(center) {
-  return new import_three30.Matrix4().compose(
+  return new import_three31.Matrix4().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new import_three30.Vector3(1, 1, 1)
+    new import_three31.Vector3(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14614,8 +15012,8 @@ function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps)
 }
 function makeFillGeometry(vertices, center) {
   const unwrapped = unwrapPolygonVertices(vertices);
-  const contour = unwrapped.map((vertex) => new import_three30.Vector2(vertex.unwrappedYaw, vertex.pitch));
-  const triangles = import_three30.ShapeUtils.triangulateShape(contour, []);
+  const contour = unwrapped.map((vertex) => new import_three31.Vector2(vertex.unwrappedYaw, vertex.pitch));
+  const triangles = import_three31.ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
   const worldToLocal = makeWorldToLocal(center);
@@ -14631,7 +15029,7 @@ function makeFillGeometry(vertices, center) {
       steps
     );
   }
-  return new import_three30.BufferGeometry().setAttribute("position", new import_three30.Float32BufferAttribute(positions, 3)).setIndex(indices);
+  return new import_three31.BufferGeometry().setAttribute("position", new import_three31.Float32BufferAttribute(positions, 3)).setIndex(indices);
 }
 function makeStrokePositions(vertices, center) {
   const points = [];
@@ -14686,24 +15084,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react51.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = (0, import_react53.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react51.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react51.useMemo)(
+  const center = (0, import_react53.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react53.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = (0, import_react51.useMemo)(
+  const strokePoints = (0, import_react53.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react51.useRef)(null);
+  const startVerticesRef = (0, import_react53.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react51.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react53.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -14718,7 +15116,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14733,7 +15131,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14755,17 +15153,17 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "meshBasicMaterial",
           {
             color: fill,
             depthWrite: false,
             opacity: Math.max(0, Math.min(fillOpacity, 1)),
-            side: import_three30.DoubleSide,
+            side: import_three31.DoubleSide,
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -14783,9 +15181,9 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-var import_react52 = require("react");
-var import_three31 = require("three");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react54 = require("react");
+var import_three32 = require("three");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -14810,29 +15208,29 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three31.Vector3()
+    new import_three32.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
 function surfaceQuaternion2(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = import_three31.MathUtils.degToRad(position.pitch);
-  const yaw = import_three31.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three31.Vector3(
+  const pitch = import_three32.MathUtils.degToRad(position.pitch);
+  const yaw = import_three32.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three32.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three31.Quaternion().setFromRotationMatrix(
-    new import_three31.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three32.Quaternion().setFromRotationMatrix(
+    new import_three32.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal2(center) {
-  return new import_three31.Matrix4().compose(
+  return new import_three32.Matrix4().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new import_three31.Vector3(1, 1, 1)
+    new import_three32.Vector3(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -14847,7 +15245,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(import_three31.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(import_three32.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -14902,16 +15300,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react52.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = (0, import_react54.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react52.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = (0, import_react52.useMemo)(
+  const center = (0, import_react54.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = (0, import_react54.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react52.useRef)(null);
-  (0, import_react52.useEffect)(() => {
+  const startVerticesRef = (0, import_react54.useRef)(null);
+  (0, import_react54.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -14925,7 +15323,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14939,7 +15337,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14960,7 +15358,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14977,9 +15375,9 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-var import_react53 = require("react");
-var import_three32 = require("three");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react55 = require("react");
+var import_three33 = require("three");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -15157,23 +15555,23 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
     throw new Error("Canvas 2D is unavailable for this graphic hotspot.");
   }
   drawGraphic(context, graphic, aspectWidth, aspectHeight);
-  const texture = new import_three32.CanvasTexture(canvas);
-  texture.colorSpace = import_three32.SRGBColorSpace;
-  texture.wrapS = import_three32.ClampToEdgeWrapping;
-  texture.wrapT = import_three32.ClampToEdgeWrapping;
-  texture.magFilter = import_three32.LinearFilter;
-  texture.minFilter = import_three32.LinearMipmapLinearFilter;
+  const texture = new import_three33.CanvasTexture(canvas);
+  texture.colorSpace = import_three33.SRGBColorSpace;
+  texture.wrapS = import_three33.ClampToEdgeWrapping;
+  texture.wrapT = import_three33.ClampToEdgeWrapping;
+  texture.magFilter = import_three33.LinearFilter;
+  texture.minFilter = import_three33.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react53.useState)(null);
-  const onLoadRef = (0, import_react53.useRef)(onLoad);
-  const onErrorRef = (0, import_react53.useRef)(onError);
+  const [texture, setTexture] = (0, import_react55.useState)(null);
+  const onLoadRef = (0, import_react55.useRef)(onLoad);
+  const onErrorRef = (0, import_react55.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -15199,22 +15597,22 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-var import_fiber27 = require("@react-three/fiber");
-var import_react54 = require("react");
-var import_three33 = require("three");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_fiber28 = require("@react-three/fiber");
+var import_react56 = require("react");
+var import_three34 = require("three");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -15228,13 +15626,13 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = (0, import_fiber27.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react54.useState)(null);
-  const onErrorRef = (0, import_react54.useRef)(onError);
-  const onLoadProgressRef = (0, import_react54.useRef)(onLoadProgress);
+  const gl = (0, import_fiber28.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react56.useState)(null);
+  const onErrorRef = (0, import_react56.useRef)(onError);
+  const onLoadProgressRef = (0, import_react56.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -15243,7 +15641,7 @@ function useSpriteTexture({
         active = false;
       };
     }
-    const loader = new import_three33.TextureLoader();
+    const loader = new import_three34.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -15251,11 +15649,11 @@ function useSpriteTexture({
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three33.SRGBColorSpace;
-        loadedTexture.wrapS = import_three33.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three33.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three33.LinearFilter;
-        loadedTexture.minFilter = import_three33.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three34.SRGBColorSpace;
+        loadedTexture.wrapS = import_three34.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three34.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three34.LinearFilter;
+        loadedTexture.minFilter = import_three34.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -15275,7 +15673,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react54.useEffect)(
+  (0, import_react56.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -15304,24 +15702,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = (0, import_react54.useState)(0);
-  const elapsedRef = (0, import_react54.useRef)(0);
-  const frameIndexRef = (0, import_react54.useRef)(0);
-  const endedRef = (0, import_react54.useRef)(false);
-  const lastPlaybackStateRef = (0, import_react54.useRef)(null);
-  const onFrameChangeRef = (0, import_react54.useRef)(onFrameChange);
-  const onPlaybackStateChangeRef = (0, import_react54.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react54.useRef)(onEnded);
+  const [frameIndex, setFrameIndex] = (0, import_react56.useState)(0);
+  const elapsedRef = (0, import_react56.useRef)(0);
+  const frameIndexRef = (0, import_react56.useRef)(0);
+  const endedRef = (0, import_react56.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react56.useRef)(null);
+  const onFrameChangeRef = (0, import_react56.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react56.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react56.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -15335,13 +15733,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -15360,7 +15758,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  (0, import_fiber27.useFrame)((_, deltaSeconds) => {
+  (0, import_fiber28.useFrame)((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -15390,14 +15788,14 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
-var import_fiber28 = require("@react-three/fiber");
-var import_react55 = require("react");
-var import_three34 = require("three");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_fiber29 = require("@react-three/fiber");
+var import_react57 = require("react");
+var import_three35 = require("three");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -15405,11 +15803,11 @@ function clampVolume2(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture2(id, poster, onError) {
-  const gl = (0, import_fiber28.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react55.useState)(null);
-  const onErrorRef = (0, import_react55.useRef)(onError);
+  const gl = (0, import_fiber29.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react57.useState)(null);
+  const onErrorRef = (0, import_react57.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -15417,7 +15815,7 @@ function usePosterTexture2(id, poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three34.TextureLoader();
+    const loader = new import_three35.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -15425,11 +15823,11 @@ function usePosterTexture2(id, poster, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three34.SRGBColorSpace;
-        loadedTexture.wrapS = import_three34.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three34.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three34.LinearFilter;
-        loadedTexture.minFilter = import_three34.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three35.SRGBColorSpace;
+        loadedTexture.wrapS = import_three35.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three35.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three35.LinearFilter;
+        loadedTexture.minFilter = import_three35.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -15446,7 +15844,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react55.useEffect)(
+  (0, import_react57.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -15464,14 +15862,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = (0, import_react55.useState)(null);
-  const onEndedRef = (0, import_react55.useRef)(onEnded);
-  const onErrorRef = (0, import_react55.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react55.useRef)(onPlaybackStateChange);
+  const [resource, setResource] = (0, import_react57.useState)(null);
+  const onEndedRef = (0, import_react57.useRef)(onEnded);
+  const onErrorRef = (0, import_react57.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react57.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -15488,12 +15886,12 @@ function useVideoResource({
       video.setAttribute("webkit-playsinline", "true");
     }
     video.poster = poster ?? "";
-    const texture = new import_three34.VideoTexture(video);
-    texture.colorSpace = import_three34.SRGBColorSpace;
-    texture.wrapS = import_three34.ClampToEdgeWrapping;
-    texture.wrapT = import_three34.ClampToEdgeWrapping;
-    texture.magFilter = import_three34.LinearFilter;
-    texture.minFilter = import_three34.LinearFilter;
+    const texture = new import_three35.VideoTexture(video);
+    texture.colorSpace = import_three35.SRGBColorSpace;
+    texture.wrapS = import_three35.ClampToEdgeWrapping;
+    texture.wrapT = import_three35.ClampToEdgeWrapping;
+    texture.magFilter = import_three35.LinearFilter;
+    texture.minFilter = import_three35.LinearFilter;
     texture.generateMipmaps = false;
     const notifyState = (state) => {
       if (active) {
@@ -15578,11 +15976,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react55.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react55.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react57.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react57.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -15599,7 +15997,7 @@ function VideoHotspot({
     }
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -15622,14 +16020,14 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
-var import_fiber29 = require("@react-three/fiber");
-var import_react56 = require("react");
-var import_three35 = require("three");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_fiber30 = require("@react-three/fiber");
+var import_react58 = require("react");
+var import_three36 = require("three");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -15682,19 +16080,19 @@ function createSpeakerTexture(state) {
       return exhaustive;
     }
   }
-  const texture = new import_three35.CanvasTexture(canvas);
-  texture.colorSpace = import_three35.SRGBColorSpace;
-  texture.wrapS = import_three35.ClampToEdgeWrapping;
-  texture.wrapT = import_three35.ClampToEdgeWrapping;
-  texture.magFilter = import_three35.LinearFilter;
-  texture.minFilter = import_three35.LinearMipmapLinearFilter;
+  const texture = new import_three36.CanvasTexture(canvas);
+  texture.colorSpace = import_three36.SRGBColorSpace;
+  texture.wrapS = import_three36.ClampToEdgeWrapping;
+  texture.wrapT = import_three36.ClampToEdgeWrapping;
+  texture.magFilter = import_three36.LinearFilter;
+  texture.minFilter = import_three36.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = (0, import_react56.useState)({ playing: null, stopped: null });
-  (0, import_react56.useEffect)(() => {
+  const [textures, setTextures] = (0, import_react58.useState)({ playing: null, stopped: null });
+  (0, import_react58.useEffect)(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -15710,11 +16108,11 @@ function useSpeakerTextures(enabled) {
   return textures;
 }
 function useIconTexture(icon, enabled, onError, id) {
-  const gl = (0, import_fiber29.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react56.useState)(null);
-  const onErrorRef = (0, import_react56.useRef)(onError);
+  const gl = (0, import_fiber30.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react58.useState)(null);
+  const onErrorRef = (0, import_react58.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -15722,7 +16120,7 @@ function useIconTexture(icon, enabled, onError, id) {
         active = false;
       };
     }
-    const loader = new import_three35.TextureLoader();
+    const loader = new import_three36.TextureLoader();
     loader.load(
       icon,
       (loadedTexture) => {
@@ -15730,11 +16128,11 @@ function useIconTexture(icon, enabled, onError, id) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three35.SRGBColorSpace;
-        loadedTexture.wrapS = import_three35.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three35.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three35.LinearFilter;
-        loadedTexture.minFilter = import_three35.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three36.SRGBColorSpace;
+        loadedTexture.wrapS = import_three36.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three36.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three36.LinearFilter;
+        loadedTexture.minFilter = import_three36.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -15751,7 +16149,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  (0, import_react56.useEffect)(
+  (0, import_react58.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -15770,13 +16168,13 @@ function useAudioHowl({
   playing,
   src
 }) {
-  const [howl, setHowl] = (0, import_react56.useState)(null);
-  const playingRef = (0, import_react56.useRef)(playing);
-  const loopRef = (0, import_react56.useRef)(loop ?? false);
-  const onEndedRef = (0, import_react56.useRef)(onEnded);
-  const onErrorRef = (0, import_react56.useRef)(onError);
-  const onPlaybackErrorRef = (0, import_react56.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react56.useRef)(onPlaybackStateChange);
+  const [howl, setHowl] = (0, import_react58.useState)(null);
+  const playingRef = (0, import_react58.useRef)(playing);
+  const loopRef = (0, import_react58.useRef)(loop ?? false);
+  const onEndedRef = (0, import_react58.useRef)(onEnded);
+  const onErrorRef = (0, import_react58.useRef)(onError);
+  const onPlaybackErrorRef = (0, import_react58.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react58.useRef)(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -15784,7 +16182,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -15821,7 +16219,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -15849,7 +16247,7 @@ function AudioHotspot({
   ...anchorProps
 }) {
   usePanoMediaActivationIntent(playing);
-  const camera = (0, import_fiber29.useThree)((state) => state.camera);
+  const camera = (0, import_fiber30.useThree)((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
     id,
@@ -15865,15 +16263,15 @@ function AudioHotspot({
   const stoppedIconTexture = useIconTexture(icon, marker, onError, id);
   const playingIconTexture = useIconTexture(playingIcon, marker, onError, id);
   const markerTexture = playing ? playingIconTexture ?? stoppedIconTexture ?? speakerTextures.playing : stoppedIconTexture ?? speakerTextures.stopped;
-  const playingRef = (0, import_react56.useRef)(playing);
+  const playingRef = (0, import_react58.useRef)(playing);
   playingRef.current = playing;
-  const mutedRef = (0, import_react56.useRef)(muted);
-  const volumeRef = (0, import_react56.useRef)(volume);
-  const rangeRef = (0, import_react56.useRef)(range);
+  const mutedRef = (0, import_react58.useRef)(muted);
+  const volumeRef = (0, import_react58.useRef)(volume);
+  const rangeRef = (0, import_react58.useRef)(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!howl) {
       return;
     }
@@ -15883,7 +16281,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -15901,7 +16299,7 @@ function AudioHotspot({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [howl, pauseWhenHidden]);
-  (0, import_fiber29.useFrame)(() => {
+  (0, import_fiber30.useFrame)(() => {
     if (!howl) {
       return;
     }
@@ -15914,13 +16312,13 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
-var import_react57 = require("react");
-var import_three36 = require("three");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react59 = require("react");
+var import_three37 = require("three");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -16129,23 +16527,23 @@ function createTextTexture(text, width, height, style) {
     throw new Error("Canvas 2D is unavailable for this text hotspot.");
   }
   drawTextHotspot(context, canvasWidth, canvasHeight, text, style);
-  const texture = new import_three36.CanvasTexture(canvas);
-  texture.colorSpace = import_three36.SRGBColorSpace;
-  texture.wrapS = import_three36.ClampToEdgeWrapping;
-  texture.wrapT = import_three36.ClampToEdgeWrapping;
-  texture.magFilter = import_three36.LinearFilter;
-  texture.minFilter = import_three36.LinearMipmapLinearFilter;
+  const texture = new import_three37.CanvasTexture(canvas);
+  texture.colorSpace = import_three37.SRGBColorSpace;
+  texture.wrapS = import_three37.ClampToEdgeWrapping;
+  texture.wrapT = import_three37.ClampToEdgeWrapping;
+  texture.magFilter = import_three37.LinearFilter;
+  texture.minFilter = import_three37.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react57.useState)(null);
-  const onLoadRef = (0, import_react57.useRef)(onLoad);
-  const onErrorRef = (0, import_react57.useRef)(onError);
+  const [texture, setTexture] = (0, import_react59.useState)(null);
+  const onLoadRef = (0, import_react59.useRef)(onLoad);
+  const onErrorRef = (0, import_react59.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react57.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -16238,13 +16636,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 var import_drei2 = require("@react-three/drei");
-var import_three37 = require("three");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_three38 = require("three");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -16301,7 +16699,7 @@ function IframeHotspot({
     interactive,
     pointerEvents
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -16310,20 +16708,20 @@ function IframeHotspot({
       pointerEvents,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("mesh", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("mesh", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "meshBasicMaterial",
             {
               depthWrite: false,
               opacity: 0,
-              side: import_three37.DoubleSide,
+              side: import_three38.DoubleSide,
               toneMapped: false,
               transparent: true
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           import_drei2.Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -16338,7 +16736,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "iframe",
               {
                 allow,