@ericchen1990/pano-view 3.3.0 → 3.4.0

package/dist/index.mjs

@@ -9988,6 +9988,27 @@ function PanoBasicMaterial({
   );
 }
 
+// src/scene-detail.tsx
+import { createContext as createContext15, useContext as useContext21 } from "react";
+var SceneDetailContext = createContext15(null);
+function useSceneDetailReporter() {
+  return useContext21(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
 import {
   ClampToEdgeWrapping,
@@ -10221,13 +10242,13 @@ var TileTextureManager = class {
 // src/tile/texture-manager-context.tsx
 import { useThree as useThree13 } from "@react-three/fiber";
 import {
-  createContext as createContext15,
-  useContext as useContext21,
+  createContext as createContext16,
+  useContext as useContext22,
   useEffect as useEffect21,
   useMemo as useMemo14
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var TileTextureManagerContext = createContext15(null);
+var TileTextureManagerContext = createContext16(null);
 function TileTextureManagerProvider({
   children,
   maxTextureMemoryMb = 128,
@@ -10251,7 +10272,7 @@ function TileTextureManagerProvider({
   return /* @__PURE__ */ jsx15(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return useContext21(TileTextureManagerContext);
+  return useContext22(TileTextureManagerContext);
 }
 
 // src/tile/texture-hooks.ts
@@ -10468,6 +10489,15 @@ function preferredSphereLevel(levels, height, dpr, verticalFov) {
 
 // src/sphere-tile/sphere-tile.tsx
 import { jsx as jsx16, jsxs as jsxs9 } from "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,
@@ -10627,6 +10657,11 @@ function SphereTileSource({
     []
   );
   const [layers, setLayers] = useState10([]);
+  const detailReporter = useSceneDetailReporter();
+  const detailReporterRef = useRef23(detailReporter);
+  detailReporterRef.current = detailReporter;
+  const detailTokenRef = useRef23("");
+  const targetKeysRef = useRef23([]);
   const scratch = useMemo15(
     () => ({
       camera: new PerspectiveCamera3(),
@@ -10648,53 +10683,72 @@ function SphereTileSource({
   useFrame9(() => {
     if (!(camera instanceof PerspectiveCamera3)) 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__ */ jsxs9("group", { visible, children: [
     preview ? /* @__PURE__ */ jsx16(
@@ -10826,9 +10880,19 @@ function Sphere({
   );
   const displayTexture = texture ?? previewTexture;
   const readyRef = useRef24(false);
+  const detailReporter = useSceneDetailReporter();
   useEffect24(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
+  useEffect24(() => {
+    if (!detailReporter) {
+      return;
+    }
+    detailReporter.report(texture != null);
+    return () => {
+      detailReporter.report(false);
+    };
+  }, [detailReporter, texture]);
   useEffect24(() => {
     if (!displayTexture || readyRef.current) {
       return;
@@ -10863,7 +10927,7 @@ function Sphere({
 import { useThree as useThree16 } from "@react-three/fiber";
 import {
   useCallback as useCallback10,
-  useContext as useContext22,
+  useContext as useContext23,
   useEffect as useEffect25,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
@@ -11064,8 +11128,8 @@ function PanoVideo({
 }) {
   usePanoMediaActivationIntent(autoPlay);
   const gl = useThree16((state) => state.gl);
-  const host = useContext22(PanoVideoHostContext);
-  const overlay = useContext22(PanoChromeOverlayContext);
+  const host = useContext23(PanoVideoHostContext);
+  const overlay = useContext23(PanoChromeOverlayContext);
   const variants = useMemo17(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
@@ -11620,14 +11684,14 @@ function PanoVideo({
 }
 
 // src/scenes.tsx
-import { useFrame as useFrame13, useThree as useThree20 } from "@react-three/fiber";
+import { useFrame as useFrame14, useThree as useThree21 } from "@react-three/fiber";
 import {
   Fragment as Fragment6,
   useCallback as useCallback11,
-  useContext as useContext23,
-  useEffect as useEffect29,
-  useMemo as useMemo21,
-  useRef as useRef29,
+  useContext as useContext24,
+  useEffect as useEffect30,
+  useMemo as useMemo22,
+  useRef as useRef30,
   useState as useState14
 } from "react";
 import {
@@ -11682,18 +11746,34 @@ function isSnapshotTransition(preset) {
   return preset !== "none" && preset !== "particles";
 }
 
-// src/scene-transitions/particle-overlay.tsx
+// src/scene-transitions/snapshot-hold.tsx
 import { useFrame as useFrame10, useThree as useThree17 } from "@react-three/fiber";
 import { useEffect as useEffect26, useMemo as useMemo18, useRef as useRef26 } from "react";
-import {
-  DoubleSide as DoubleSide2,
-  InstancedBufferAttribute,
-  InstancedBufferGeometry,
-  PlaneGeometry as PlaneGeometry3,
-  ShaderMaterial as ShaderMaterial2,
-  Vector2 as Vector24,
-  Vector3 as Vector310
-} from "three";
+import { Vector3 as Vector310 } from "three";
+
+// src/scene-transitions/overlay-utils.ts
+import { PlaneGeometry as PlaneGeometry2 } from "three";
+var OVERLAY_RENDER_ORDER = 1e4;
+var FULLSCREEN_PLANE = new PlaneGeometry2(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
+import { DoubleSide as DoubleSide2, ShaderMaterial as ShaderMaterial2, Vector2 as Vector24 } from "three";
 
 // src/scene-transitions/glsl.ts
 var GLSL_COMMON = `
@@ -11725,169 +11805,7 @@ float fbm(vec2 p) {
 }
 `;
 
-// src/scene-transitions/overlay-utils.ts
-import { PlaneGeometry as PlaneGeometry2 } from "three";
-var OVERLAY_RENDER_ORDER = 1e4;
-var FULLSCREEN_PLANE = new PlaneGeometry2(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
-import { jsx as jsx19 } from "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 PlaneGeometry3(1, 1);
-  const geometry = new 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 InstancedBufferAttribute(indexes, 1));
-  geometry.instanceCount = PARTICLE_COUNT;
-  quad.dispose();
-  return geometry;
-}
-function ParticleOverlay({
-  snapshot,
-  transition,
-  running,
-  runId,
-  onFinish
-}) {
-  const { camera } = useThree17();
-  const meshRef = useRef26(null);
-  const startRef = useRef26(null);
-  const finishedRef = useRef26(false);
-  const directionRef = useRef26(new Vector310());
-  const geometry = useMemo18(() => createParticleGeometry(), []);
-  const material = useMemo18(
-    () => new ShaderMaterial2({
-      transparent: true,
-      depthTest: false,
-      depthWrite: false,
-      side: DoubleSide2,
-      uniforms: {
-        map: { value: snapshot.texture },
-        progress: { value: 0 },
-        grid: { value: new Vector24(PARTICLE_GRID, PARTICLE_GRID) }
-      },
-      vertexShader: PARTICLE_VERTEX_SHADER,
-      fragmentShader: PARTICLE_FRAGMENT_SHADER
-    }),
-    [snapshot.texture]
-  );
-  useEffect26(() => () => geometry.dispose(), [geometry]);
-  useEffect26(() => () => material.dispose(), [material]);
-  useEffect26(() => {
-    startRef.current = null;
-    finishedRef.current = false;
-    material.uniforms.progress.value = 0;
-  }, [material, runId]);
-  useFrame10((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__ */ jsx19(
-    "mesh",
-    {
-      ref: meshRef,
-      frustumCulled: false,
-      geometry,
-      material,
-      renderOrder: OVERLAY_RENDER_ORDER
-    }
-  );
-}
-
-// src/scene-transitions/snapshot-overlay.tsx
-import { useFrame as useFrame11, useThree as useThree18 } from "@react-three/fiber";
-import { useEffect as useEffect27, useMemo as useMemo19, useRef as useRef27 } from "react";
-import { Vector3 as Vector311 } from "three";
-
 // src/scene-transitions/snapshot-shaders.ts
-import { DoubleSide as DoubleSide3, ShaderMaterial as ShaderMaterial3, Vector2 as Vector25 } from "three";
 var SNAPSHOT_VERTEX_SHADER = `
   varying vec2 vUv;
   void main() {
@@ -12147,50 +12065,285 @@ var SNAPSHOT_FRAGMENT_SHADERS = {
   `)
 };
 function createSnapshotMaterial(preset, texture) {
-  return new ShaderMaterial3({
+  return new ShaderMaterial2({
     transparent: true,
     depthTest: false,
     depthWrite: false,
-    side: DoubleSide3,
+    side: DoubleSide2,
     uniforms: {
       map: { value: texture },
       progress: { value: 0 },
-      resolution: { value: new Vector25(1, 1) }
+      resolution: { value: new Vector24(1, 1) }
     },
     vertexShader: SNAPSHOT_VERTEX_SHADER,
     fragmentShader: SNAPSHOT_FRAGMENT_SHADERS[preset]
   });
 }
 
-// src/scene-transitions/snapshot-overlay.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-function SnapshotOverlay({
+// src/scene-transitions/snapshot-hold.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function SnapshotHold({ snapshot }) {
+  const { camera, gl } = useThree17();
+  const meshRef = useRef26(null);
+  const directionRef = useRef26(new Vector310());
+  const material = useMemo18(
+    () => createSnapshotMaterial("crossfade", snapshot.texture),
+    [snapshot.texture]
+  );
+  useEffect26(() => () => material.dispose(), [material]);
+  useFrame10(() => {
+    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__ */ jsxs12("mesh", { frustumCulled: false, ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, children: [
+    /* @__PURE__ */ jsx19("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx19("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
+import { useFrame as useFrame11, useThree as useThree18 } from "@react-three/fiber";
+import { useEffect as useEffect27, useMemo as useMemo19, useRef as useRef27 } from "react";
+import {
+  DoubleSide as DoubleSide3,
+  InstancedBufferAttribute,
+  InstancedBufferGeometry,
+  PlaneGeometry as PlaneGeometry3,
+  ShaderMaterial as ShaderMaterial3,
+  Vector2 as Vector25,
+  Vector3 as Vector311
+} from "three";
+import { jsx as jsx20 } from "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 PlaneGeometry3(1, 1);
+  const geometry = new 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 InstancedBufferAttribute(indexes, 1));
+  geometry.instanceCount = PARTICLE_COUNT;
+  quad.dispose();
+  return geometry;
+}
+function ParticleOverlay({
   snapshot,
   transition,
   running,
   runId,
   onFinish
 }) {
-  const { camera, gl } = useThree18();
+  const { camera } = useThree18();
   const meshRef = useRef27(null);
   const startRef = useRef27(null);
   const finishedRef = useRef27(false);
   const directionRef = useRef27(new Vector311());
-  const material = useMemo19(() => {
+  const geometry = useMemo19(() => createParticleGeometry(), []);
+  const material = useMemo19(
+    () => new ShaderMaterial3({
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+      side: DoubleSide3,
+      uniforms: {
+        map: { value: snapshot.texture },
+        progress: { value: 0 },
+        grid: { value: new Vector25(PARTICLE_GRID, PARTICLE_GRID) }
+      },
+      vertexShader: PARTICLE_VERTEX_SHADER,
+      fragmentShader: PARTICLE_FRAGMENT_SHADER
+    }),
+    [snapshot.texture]
+  );
+  useEffect27(() => () => geometry.dispose(), [geometry]);
+  useEffect27(() => () => material.dispose(), [material]);
+  useEffect27(() => {
+    startRef.current = null;
+    finishedRef.current = false;
+    material.uniforms.progress.value = 0;
+  }, [material, runId]);
+  useFrame11((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__ */ jsx20(
+    "mesh",
+    {
+      ref: meshRef,
+      frustumCulled: false,
+      geometry,
+      material,
+      renderOrder: OVERLAY_RENDER_ORDER
+    }
+  );
+}
+
+// src/scene-transitions/snapshot-overlay.tsx
+import { useFrame as useFrame12, useThree as useThree19 } from "@react-three/fiber";
+import { useEffect as useEffect28, useMemo as useMemo20, useRef as useRef28 } from "react";
+import { Vector3 as Vector312 } from "three";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function SnapshotOverlay({
+  snapshot,
+  transition,
+  running,
+  runId,
+  onFinish
+}) {
+  const { camera, gl } = useThree19();
+  const meshRef = useRef28(null);
+  const startRef = useRef28(null);
+  const finishedRef = useRef28(false);
+  const directionRef = useRef28(new Vector312());
+  const material = useMemo20(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  useEffect27(() => () => material?.dispose(), [material]);
-  useEffect27(() => {
+  useEffect28(() => () => material?.dispose(), [material]);
+  useEffect28(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
       material.uniforms.progress.value = 0;
     }
   }, [material, runId]);
-  useFrame11((state) => {
+  useFrame12((state) => {
     const mesh = meshRef.current;
     if (!mesh || !material || !isPerspectiveCamera(camera)) {
       return;
@@ -12212,21 +12365,21 @@ function SnapshotOverlay({
   if (!material) {
     return null;
   }
-  return /* @__PURE__ */ jsxs12("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx20("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx20("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ jsxs13("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
+    /* @__PURE__ */ jsx21("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx21("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ jsx21(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ jsx22(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -12254,7 +12407,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ jsx21(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ jsx22(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -12264,14 +12417,14 @@ function TransitionOverlay(props) {
 }
 
 // src/tile/tile.tsx
-import { useFrame as useFrame12, useThree as useThree19 } from "@react-three/fiber";
-import { memo as memo2, useEffect as useEffect28, useMemo as useMemo20, useRef as useRef28, useState as useState13 } from "react";
+import { useFrame as useFrame13, useThree as useThree20 } from "@react-three/fiber";
+import { memo as memo2, useEffect as useEffect29, useMemo as useMemo21, useRef as useRef29, useState as useState13 } from "react";
 import {
   Frustum as Frustum2,
   Matrix4 as Matrix43,
   PlaneGeometry as PlaneGeometry4,
   PerspectiveCamera as PerspectiveCamera5,
-  Vector3 as Vector313
+  Vector3 as Vector314
 } from "three";
 
 // src/tile/face-layout.ts
@@ -12279,7 +12432,7 @@ import {
   Box3 as Box32,
   Euler as Euler3,
   Quaternion as Quaternion2,
-  Vector3 as Vector312
+  Vector3 as Vector313
 } from "three";
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
@@ -12343,12 +12496,12 @@ function getTileBoundingBox(address, radius = CUBE_RADIUS) {
   const halfWidth = local.width / 2;
   const halfHeight = local.height / 2;
   const quaternion = getFaceQuaternion(address.face);
-  const position = new Vector312(...transform.position);
+  const position = new Vector313(...transform.position);
   const corners = [
-    new Vector312(local.x - halfWidth, local.y - halfHeight, 0),
-    new Vector312(local.x + halfWidth, local.y - halfHeight, 0),
-    new Vector312(local.x - halfWidth, local.y + halfHeight, 0),
-    new Vector312(local.x + halfWidth, local.y + halfHeight, 0)
+    new Vector313(local.x - halfWidth, local.y - halfHeight, 0),
+    new Vector313(local.x + halfWidth, local.y - halfHeight, 0),
+    new Vector313(local.x - halfWidth, local.y + halfHeight, 0),
+    new Vector313(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
@@ -12456,11 +12609,27 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
 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 PlaneGeometry4(1, 1);
@@ -12469,7 +12638,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = useMemo20(() => {
+  const geometry = useMemo21(() => {
     const nextGeometry = new PlaneGeometry4(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -12484,21 +12653,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  useEffect28(
+  useEffect29(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -12514,7 +12683,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx22(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx23(
     PreviewFace,
     {
       face,
@@ -12538,14 +12707,14 @@ var TileMesh = memo2(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx22("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx23(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -12562,7 +12731,7 @@ var TileLayerMeshes = memo2(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx22(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx23(
     TileMesh,
     {
       address,
@@ -12662,8 +12831,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new Vector313());
-  const center = new Vector313();
+  const direction = camera.getWorldDirection(new Vector314());
+  const center = new Vector314();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -12728,11 +12897,11 @@ function Tile({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = useThree19();
-  const multiresConfig = useMemo20(() => parseMultires(multires), [multires]);
+  const { camera, gl, size } = useThree20();
+  const multiresConfig = useMemo21(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = useMemo20(
+  const candidatesByLevel = useMemo21(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -12744,13 +12913,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = useRef28(onLoadProgress);
-  const errorRef = useRef28(onTileError);
-  const levelChangeRef = useRef28(onLevelChange);
+  const progressRef = useRef29(onLoadProgress);
+  const errorRef = useRef29(onTileError);
+  const levelChangeRef = useRef29(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = useMemo20(
+  const ownedManager = useMemo21(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -12771,7 +12940,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  useEffect28(() => {
+  useEffect29(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -12781,11 +12950,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = useRef28(false);
-  useEffect28(() => {
+  const readyRef = useRef29(false);
+  useEffect29(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -12793,7 +12962,7 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = useMemo20(
+  const resolveUrl = useMemo21(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
@@ -12801,23 +12970,29 @@ function Tile({
     [baseUrl, resolveTileUrl, template]
   );
   const [layers, setLayers] = useState13([]);
-  const layerTokenRef = useRef28("");
-  const currentLevelRef = useRef28(1);
-  const lastUpdateAtRef = useRef28(-Infinity);
-  const visibilityDirtyRef = useRef28(true);
-  const lastVisibilityQuaternionRef = useRef28(camera.quaternion.clone());
-  const lastVisibilityFovRef = useRef28(Number.NaN);
-  const lastViewportRef = useRef28({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = useRef28(new Frustum2());
-  const projectionMatrixRef = useRef28(new Matrix43());
-  const visibilityCameraRef = useRef28(new PerspectiveCamera5());
-  useEffect28(() => {
+  const layerTokenRef = useRef29("");
+  const currentLevelRef = useRef29(1);
+  const lastUpdateAtRef = useRef29(-Infinity);
+  const visibilityDirtyRef = useRef29(true);
+  const lastVisibilityQuaternionRef = useRef29(camera.quaternion.clone());
+  const lastVisibilityFovRef = useRef29(Number.NaN);
+  const lastViewportRef = useRef29({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = useRef29(new Frustum2());
+  const projectionMatrixRef = useRef29(new Matrix43());
+  const visibilityCameraRef = useRef29(new PerspectiveCamera5());
+  const trackedLoadModeRef = useRef29(loadMode);
+  const targetKeysRef = useRef29([]);
+  const detailTokenRef = useRef29("");
+  const detailReporter = useSceneDetailReporter();
+  const detailReporterRef = useRef29(detailReporter);
+  detailReporterRef.current = detailReporter;
+  useEffect29(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -12831,11 +13006,14 @@ function Tile({
       setLayers(nextLayers);
     }
   };
-  useFrame12(() => {
-    if (loadMode === "preview") {
+  useFrame13(() => {
+    if (!(camera instanceof PerspectiveCamera5)) {
       return;
     }
-    if (!(camera instanceof PerspectiveCamera5)) {
+    if (loadMode === "preview") {
+      trackedLoadModeRef.current = "preview";
+      targetKeysRef.current = [];
+      publishSceneDetail(detailReporterRef.current, detailTokenRef, false);
       return;
     }
     const now = performance.now();
@@ -12843,63 +13021,78 @@ function Tile({
     const rotationDelta = lastVisibilityQuaternionRef.current.angleTo(
       camera.quaternion
     );
-    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 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 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__ */ jsxs13("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx22(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs14("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ jsx23(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
+    layers.map((layer) => /* @__PURE__ */ jsx23(
       TileLayerMeshes,
       {
         layer,
@@ -12912,7 +13105,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function SceneSource({
   scene,
   visible,
@@ -12925,7 +13118,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx24(
         Sphere,
         {
           src: scene.src,
@@ -12938,7 +13131,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx24(
         Tile,
         {
           ...tileProps,
@@ -12951,7 +13144,7 @@ function SceneSource({
     }
     case "sphereTile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx24(
         SphereTile,
         {
           ...tileProps,
@@ -12974,17 +13167,17 @@ function SnapshotCapture({
   maxPixels,
   onCaptured
 }) {
-  const { camera, gl, scene, size } = useThree20();
-  const capturedRequestRef = useRef29(0);
-  const renderTargetRef = useRef29(null);
-  useEffect29(
+  const { camera, gl, scene, size } = useThree21();
+  const capturedRequestRef = useRef30(0);
+  const renderTargetRef = useRef30(null);
+  useEffect30(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
     },
     []
   );
-  useFrame13(() => {
+  useFrame14(() => {
     if (requestId === 0 || requestId === capturedRequestRef.current) {
       return;
     }
@@ -13032,15 +13225,16 @@ function ScenesController({
   onTransitionEnd,
   onTransitionError,
   snapshotMaxPixels = 3686400,
+  transitionWaitForDetailMs,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = useContext23(PanoramaViewContext);
+  const controlsRef = useContext24(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = useMemo21(
+  const transition = useMemo22(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = useMemo21(
+  const sceneMap = useMemo22(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
@@ -13057,14 +13251,21 @@ function ScenesController({
   const [transitionRunId, setTransitionRunId] = useState14(0);
   const [snapshot, setSnapshot] = useState14(null);
   const [recoveryKey, setRecoveryKey] = useState14(0);
-  const requestedSceneIdRef = useRef29(activeSceneId);
-  const captureReasonRef = useRef29("start");
-  const interactionReleaseRef = useRef29(null);
-  const slotsRef = useRef29(slots);
-  const phaseRef = useRef29(phase);
-  const liveSlotRef = useRef29(liveSlot);
-  const transitionFromRef = useRef29(initialScene);
-  const readySceneRef = useRef29(null);
+  const requestedSceneIdRef = useRef30(activeSceneId);
+  const captureReasonRef = useRef30("start");
+  const interactionReleaseRef = useRef30(null);
+  const slotsRef = useRef30(slots);
+  const phaseRef = useRef30(phase);
+  const liveSlotRef = useRef30(liveSlot);
+  const transitionFromRef = useRef30(initialScene);
+  const readySceneRef = useRef30(null);
+  const waitRef = useRef30(null);
+  const waitTimerRef = useRef30(null);
+  const detailGenerationRef = useRef30(0);
+  const [detailGeneration, setDetailGeneration] = useState14(0);
+  const mountedRef = useRef30(true);
+  const waitForDetailMsRef = useRef30(0);
+  waitForDetailMsRef.current = normalizeTransitionWaitMs(transitionWaitForDetailMs);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
@@ -13078,7 +13279,36 @@ function ScenesController({
   const reportError = useCallback11((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
+  const clearDetailWait = useCallback11((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);
+  }, []);
+  useEffect30(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      clearDetailWait(false);
+    };
+  }, [clearDetailWait]);
   const startPreload = useCallback11((scene) => {
+    clearDetailWait(true);
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -13088,8 +13318,8 @@ function ScenesController({
     });
     setPendingSlot(nextSlot);
     setPhase("preloading");
-  }, []);
-  useEffect29(() => {
+  }, [clearDetailWait]);
+  useEffect30(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -13104,16 +13334,17 @@ 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]);
+  }, [activeSceneId, clearDetailWait, pendingSlot, reportError, sceneMap, startPreload]);
   const notifySceneReady = useCallback11((scene) => {
     if (!scene || readySceneRef.current === scene) return;
     readySceneRef.current = scene;
@@ -13127,7 +13358,7 @@ function ScenesController({
     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) => {
@@ -13155,29 +13386,6 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, notifySceneReady, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = useCallback11((nextSnapshot) => {
-    setSnapshot((current) => {
-      current?.dispose();
-      return nextSnapshot;
-    });
-    if (captureReasonRef.current === "interrupt") {
-      startPreload(sceneMap.get(requestedSceneIdRef.current));
-      return;
-    }
-    const sourceSlot = liveSlotRef.current;
-    setSlots((current) => {
-      const next = [...current];
-      next[sourceSlot] = null;
-      return next;
-    });
-    manager?.releaseUnused();
-    if (pendingSlot !== null) {
-      notifySceneReady(slotsRef.current[pendingSlot]);
-      setLiveSlot(pendingSlot);
-    }
-    setPhase("transitioning");
-    setTransitionRunId((current) => current + 1);
-  }, [manager, notifySceneReady, pendingSlot, sceneMap, startPreload]);
   const finishTransition = useCallback11(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
@@ -13203,16 +13411,142 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  useEffect29(() => () => {
+  const finishTransitionRef = useRef30(finishTransition);
+  finishTransitionRef.current = finishTransition;
+  const transitionRef = useRef30(transition);
+  transitionRef.current = transition;
+  const consumeDetailSignal = useCallback11((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 = useCallback11((nextSnapshot) => {
+    if (captureReasonRef.current === "interrupt") {
+      setSnapshot((current) => {
+        current?.dispose();
+        return nextSnapshot;
+      });
+      startPreload(sceneMap.get(requestedSceneIdRef.current));
+      return;
+    }
+    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;
+    });
+    setPhase("transitioning");
+    setTransitionRunId((current) => current + 1);
+  }, [
+    consumeDetailSignal,
+    manager,
+    notifySceneReady,
+    onTransitionEnd,
+    pendingSlot,
+    releaseInteraction,
+    sceneMap,
+    startPreload,
+    transition.preset
+  ]);
+  const snapshotRef = useRef30(snapshot);
+  snapshotRef.current = snapshot;
+  useEffect30(() => () => {
     releaseInteraction();
-    snapshot?.dispose();
-  }, [releaseInteraction, snapshot]);
-  const { gl } = useThree20();
-  useEffect29(() => {
+    snapshotRef.current?.dispose();
+    snapshotRef.current = null;
+  }, [releaseInteraction]);
+  const { gl } = useThree21();
+  useEffect30(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
       releaseInteraction();
+      clearDetailWait(true);
       manager?.dispose();
       snapshot?.dispose();
       setSnapshot(null);
@@ -13230,11 +13564,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__ */ jsxs14(Fragment6, { children: [
-    /* @__PURE__ */ jsx23(
+  const slotSceneKey = `${slots[0]?.id ?? ""}
+${slots[1]?.id ?? ""}`;
+  const detailReporters = useMemo22(() => {
+    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__ */ jsxs15(Fragment6, { children: [
+    /* @__PURE__ */ jsx24(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -13246,23 +13599,30 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx23(
-        SceneSource,
+      return /* @__PURE__ */ jsx24(
+        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__ */ jsx24(
+            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__ */ jsx23(
+    snapshot !== null && phase === "awaitingDetail" ? /* @__PURE__ */ jsx24(SnapshotHold, { snapshot }) : null,
+    snapshotVisible ? /* @__PURE__ */ jsx24(
       TransitionOverlay,
       {
         snapshot,
@@ -13299,13 +13659,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = useRef29(scenes);
+  const scenesRef = useRef30(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = useRef29(resolvedId);
+  const resolvedIdRef = useRef30(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = useContext23(ScenesHostContext);
-  const phaseRef = useRef29("idle");
-  useEffect29(() => {
+  const host = useContext24(ScenesHostContext);
+  const phaseRef = useRef30("idle");
+  useEffect30(() => {
     if (!host) {
       return;
     }
@@ -13355,12 +13715,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         ScenesController,
         {
           ...rest,
@@ -13374,8 +13734,8 @@ function Scenes({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { useThree as useThree23 } from "@react-three/fiber";
-import { useEffect as useEffect32, useRef as useRef32, useState as useState17 } from "react";
+import { useThree as useThree24 } from "@react-three/fiber";
+import { useEffect as useEffect33, useRef as useRef33, useState as useState17 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping3,
   LinearFilter as LinearFilter6,
@@ -13385,13 +13745,13 @@ import {
 } from "three";
 
 // src/hotspot/hotspot-anchor.tsx
-import { useFrame as useFrame15, useThree as useThree22 } from "@react-three/fiber";
+import { useFrame as useFrame16, useThree as useThree23 } from "@react-three/fiber";
 import {
-  useContext as useContext25,
-  useEffect as useEffect31,
+  useContext as useContext26,
+  useEffect as useEffect32,
   useLayoutEffect as useLayoutEffect5,
-  useMemo as useMemo23,
-  useRef as useRef31,
+  useMemo as useMemo24,
+  useRef as useRef32,
   useState as useState16
 } from "react";
 import {
@@ -13403,25 +13763,25 @@ import {
   PlaneGeometry as PlaneGeometry5,
   Quaternion as Quaternion4,
   Ray,
-  Vector3 as Vector316
+  Vector3 as Vector317
 } from "three";
 
 // src/hotspot/hotspot-tooltip.tsx
-import { useEffect as useEffect30, useMemo as useMemo22, useState as useState15 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo23, useState as useState15 } from "react";
 
 // src/webvr/stereo-html.tsx
-import { useFrame as useFrame14, useThree as useThree21 } from "@react-three/fiber";
+import { useFrame as useFrame15, useThree as useThree22 } from "@react-three/fiber";
 import {
-  useContext as useContext24,
+  useContext as useContext25,
   useLayoutEffect as useLayoutEffect4,
-  useRef as useRef30,
+  useRef as useRef31,
   useSyncExternalStore as useSyncExternalStore7
 } from "react";
 import { createRoot } from "react-dom/client";
-import { Vector3 as Vector314 } from "three";
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Vector3 as Vector315 } from "three";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function useFallbackStereoView() {
-  const runtime = useContext24(WebVRRuntimeContext);
+  const runtime = useContext25(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
   const fallback = useSyncExternalStore7(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
@@ -13438,10 +13798,10 @@ function ProjectedHtml({
   stereoView,
   eye
 }) {
-  const { camera, gl, events, size } = useThree21();
-  const group = useRef30(null);
-  const overlay = useRef30(null);
-  const scratch = useRef30(new Vector314());
+  const { camera, gl, events, size } = useThree22();
+  const group = useRef31(null);
+  const overlay = useRef31(null);
+  const scratch = useRef31(new Vector315());
   const target = events.connected || gl.domElement.parentElement;
   const updatePosition = () => {
     const anchor = group.current;
@@ -13489,7 +13849,7 @@ function ProjectedHtml({
   }, [target]);
   useLayoutEffect4(() => {
     overlay.current?.root.render(
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25(
         "div",
         {
           "aria-hidden": eye === "right" || void 0,
@@ -13500,19 +13860,19 @@ function ProjectedHtml({
     );
     updatePosition();
   });
-  useFrame14(updatePosition);
-  return /* @__PURE__ */ jsx24("group", { ref: group });
+  useFrame15(updatePosition);
+  return /* @__PURE__ */ jsx25("group", { ref: group });
 }
 function PanoHtml(props) {
   const stereoView = useFallbackStereoView();
-  return stereoView ? /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsx24(ProjectedHtml, { ...props, stereoView, eye: "left" }),
-    /* @__PURE__ */ jsx24(ProjectedHtml, { ...props, stereoView, eye: "right" })
-  ] }) : /* @__PURE__ */ jsx24(ProjectedHtml, { ...props });
+  return stereoView ? /* @__PURE__ */ jsxs16(Fragment7, { children: [
+    /* @__PURE__ */ jsx25(ProjectedHtml, { ...props, stereoView, eye: "left" }),
+    /* @__PURE__ */ jsx25(ProjectedHtml, { ...props, stereoView, eye: "right" })
+  ] }) : /* @__PURE__ */ jsx25(ProjectedHtml, { ...props });
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -13585,15 +13945,15 @@ function HotspotTooltip({
   appearance
 }) {
   const [imageFailed, setImageFailed] = useState15(false);
-  useEffect30(() => {
+  useEffect31(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = useMemo22(
+  const resolvedAppearance = useMemo23(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = useMemo22(
+  const bubbleStyle = useMemo23(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -13615,8 +13975,8 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ jsx25(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs16("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
-    showImage ? /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs17("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
+    showImage ? /* @__PURE__ */ jsx26(
       "img",
       {
         alt: content.imageAlt ?? content.text ?? "",
@@ -13625,7 +13985,7 @@ function HotspotTooltip({
         src: content.image
       }
     ) : null,
-    content.text ? /* @__PURE__ */ jsx25(
+    content.text ? /* @__PURE__ */ jsx26(
       "p",
       {
         className: "pano-hotspot-tooltip-text",
@@ -13644,10 +14004,10 @@ function HotspotTooltip({
 import {
   MathUtils as MathUtils8,
   PerspectiveCamera as PerspectiveCamera6,
-  Vector3 as Vector315
+  Vector3 as Vector316
 } from "three";
-var LOCAL_FORWARD = new Vector315(0, 0, 1);
-var CAMERA_POSITION = new Vector315();
+var LOCAL_FORWARD = new Vector316(0, 0, 1);
+var CAMERA_POSITION = new Vector316();
 function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight, distance) {
   if (orientation2 === "billboard") {
     group.quaternion.copy(camera.quaternion);
@@ -13676,7 +14036,7 @@ function fixedScaleFactor(cameraFov, referenceFov) {
 }
 
 // src/hotspot/hotspot-anchor.tsx
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -13686,18 +14046,18 @@ var MAX_ANGULAR_SIZE = 179;
 var DRAG_EPSILON_DEGREES = 1e-3;
 var TOOLTIP_WORLD_BOX = new Box34();
 var TOOLTIP_LOCAL_BOX = new Box34();
-var TOOLTIP_CORNER = new Vector316();
+var TOOLTIP_CORNER = new Vector317();
 var TOOLTIP_INVERSE = new Matrix44();
-var TOOLTIP_WORLD_CORNER = new Vector316();
-var TOOLTIP_PROJECTED = new Vector316();
-var TOOLTIP_RAY_ORIGIN = new Vector316();
-var TOOLTIP_RAY_FAR = new Vector316();
-var TOOLTIP_RAY_DIRECTION = new Vector316();
+var TOOLTIP_WORLD_CORNER = new Vector317();
+var TOOLTIP_PROJECTED = new Vector317();
+var TOOLTIP_RAY_ORIGIN = new Vector317();
+var TOOLTIP_RAY_FAR = new Vector317();
+var TOOLTIP_RAY_DIRECTION = new Vector317();
 var TOOLTIP_RAY = new Ray();
 var TOOLTIP_PLANE = new Plane();
-var TOOLTIP_INTERSECTION = new Vector316();
-var TOOLTIP_PLANE_NORMAL = new Vector316();
-var TOOLTIP_PLANE_POINT = new Vector316();
+var TOOLTIP_INTERSECTION = new Vector317();
+var TOOLTIP_PLANE_NORMAL = new Vector317();
+var TOOLTIP_PLANE_POINT = new Vector317();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
@@ -13742,7 +14102,7 @@ function createSurfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = MathUtils9.degToRad(position.pitch);
   const yaw = MathUtils9.degToRad(position.yaw);
-  const localUp = new Vector316(
+  const localUp = new Vector317(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -13993,24 +14353,24 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = useContext25(PanoramaViewContext);
-  const hotspotTargetRegistry = useContext25(HotspotTargetRegistryContext);
-  const eventBus = useContext25(PanoEventBusContext);
+  const controlsRef = useContext26(PanoramaViewContext);
+  const hotspotTargetRegistry = useContext26(HotspotTargetRegistryContext);
+  const eventBus = useContext26(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = useThree22();
-  const groupRef = useRef31(null);
-  const tooltipAnchorRef = useRef31(null);
-  const dragStateRef = useRef31(null);
-  const suppressNextClickRef = useRef31(false);
+  const { camera, size } = useThree23();
+  const groupRef = useRef32(null);
+  const tooltipAnchorRef = useRef32(null);
+  const dragStateRef = useRef32(null);
+  const suppressNextClickRef = useRef32(false);
   const [hovered, setHovered] = useState16(false);
   const [dragging, setDragging] = useState16(false);
   const [pinned, setPinned] = useState16(false);
-  const tooltipContent = useMemo23(
+  const tooltipContent = useMemo24(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
   const normalizedPosition = normalizePanoPosition(position);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!hotspotTargetRegistry) {
       return;
     }
@@ -14027,17 +14387,17 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = useMemo23(
+  const worldPosition = useMemo24(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = useMemo23(
+  const surfaceQuaternion3 = useMemo24(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = useMemo23(() => {
+  const focusGeometry = useMemo24(() => {
     const planeGeometry = new PlaneGeometry5(1, 1);
     const geometry = new EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -14064,14 +14424,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  useEffect31(
+  useEffect32(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  useEffect31(() => {
+  useEffect32(() => {
     if (!cursorApi) {
       return;
     }
@@ -14093,14 +14453,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  useEffect31(
+  useEffect32(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  useEffect31(() => () => focusGeometry.dispose(), [focusGeometry]);
-  useEffect31(() => {
+  useEffect32(() => () => focusGeometry.dispose(), [focusGeometry]);
+  useEffect32(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -14109,12 +14469,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (acceptsPointer) {
       return;
     }
@@ -14170,7 +14530,7 @@ function HotspotAnchor({
     worldHeight,
     worldWidth
   ]);
-  useFrame15((state) => {
+  useFrame16((state) => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -14229,7 +14589,7 @@ function HotspotAnchor({
       setHovered(true);
     }
   };
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "group",
     {
       ref: groupRef,
@@ -14306,18 +14666,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx26(
+        focused ? focusContent ?? /* @__PURE__ */ jsx27(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx26("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx27("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx26("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx26(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx27("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx27(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -14334,11 +14694,11 @@ function HotspotAnchor({
 // src/hotspot/hotspot-plane.tsx
 import {
   DoubleSide as DoubleSide4,
-  Mesh as Mesh5,
+  Mesh as Mesh6,
   MeshBasicMaterial,
   Vector2 as Vector26
 } from "three";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new Vector26();
 var RAYCAST_HITS = [];
@@ -14415,7 +14775,7 @@ function sampleTextureAlpha(texture, u, v) {
 function hotspotPlaneRaycast(raycaster, intersects2) {
   const material = Array.isArray(this.material) ? this.material[0] : this.material;
   if (!(material instanceof MeshBasicMaterial)) {
-    Mesh5.prototype.raycast.call(this, raycaster, intersects2);
+    Mesh6.prototype.raycast.call(this, raycaster, intersects2);
     return;
   }
   const cutoff = Math.max(material.alphaTest, HOTSPOT_ALPHA_CUTOFF);
@@ -14423,7 +14783,7 @@ function hotspotPlaneRaycast(raycaster, intersects2) {
     return;
   }
   RAYCAST_HITS.length = 0;
-  Mesh5.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
+  Mesh6.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
   const map = material.map;
   for (const hit of RAYCAST_HITS) {
     if (!map || !hit.uv) {
@@ -14440,9 +14800,9 @@ function HotspotPlane({
   map,
   opacity
 }) {
-  return /* @__PURE__ */ jsxs18("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ jsx27("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs19("mesh", { raycast: hotspotPlaneRaycast, children: [
+    /* @__PURE__ */ jsx28("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx28(
       PanoBasicMaterial,
       {
         target: "hotspot",
@@ -14458,15 +14818,15 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = useThree23((state) => state.gl);
+  const gl = useThree24((state) => state.gl);
   const [texture, setTexture] = useState17(null);
-  const onLoadRef = useRef32(onLoad);
-  const onErrorRef = useRef32(onError);
+  const onLoadRef = useRef33(onLoad);
+  const onErrorRef = useRef33(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect32(() => {
+  useEffect33(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14504,7 +14864,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  useEffect32(
+  useEffect33(
     () => () => {
       texture?.dispose();
     },
@@ -14522,11 +14882,11 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx28(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx28(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx29(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx29(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useEffect as useEffect33, useMemo as useMemo24, useRef as useRef34 } from "react";
+import { useEffect as useEffect34, useMemo as useMemo25, useRef as useRef35 } from "react";
 import {
   BufferGeometry as BufferGeometry2,
   DoubleSide as DoubleSide5,
@@ -14535,20 +14895,20 @@ import {
   Quaternion as Quaternion5,
   ShapeUtils,
   Vector2 as Vector27,
-  Vector3 as Vector318
+  Vector3 as Vector319
 } from "three";
 
 // src/hotspot/hotspot-stroke-line.tsx
 import { Line } from "@react-three/drei";
-import { useFrame as useFrame16, useThree as useThree24 } from "@react-three/fiber";
-import { useLayoutEffect as useLayoutEffect6, useRef as useRef33 } from "react";
+import { useFrame as useFrame17, useThree as useThree25 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef34 } from "react";
 import {
   MathUtils as MathUtils10,
   PerspectiveCamera as PerspectiveCamera7,
-  Vector3 as Vector317
+  Vector3 as Vector318
 } from "three";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var LINE_WORLD_POSITION = new Vector317();
+import { jsx as jsx30 } from "react/jsx-runtime";
+var LINE_WORLD_POSITION = new Vector318();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -14578,8 +14938,8 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = useRef33(null);
-  const { camera, size } = useThree24();
+  const lineRef = useRef34(null);
+  const { camera, size } = useThree25();
   const dash = resolveDash(dashSize, gapSize);
   useLayoutEffect6(() => {
     if (!dash.dashed) {
@@ -14587,13 +14947,13 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, camera, size.height);
   }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
-  useFrame16((state) => {
+  useFrame17((state) => {
     if (!dash.dashed) {
       return;
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     Line,
     {
       ref: lineRef,
@@ -14615,7 +14975,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -14687,7 +15047,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new Vector318()];
+  const candidates = [new Vector319()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14711,7 +15071,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new Vector318(0, 1, 0)) || polygonContainsDirection(normalized, new Vector318(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new Vector319(0, 1, 0)) || polygonContainsDirection(normalized, new Vector319(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14722,7 +15082,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector318()
+    new Vector319()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14731,7 +15091,7 @@ 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 Vector318(
+  const localUp = new Vector319(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -14744,7 +15104,7 @@ function makeWorldToLocal(center) {
   return new Matrix45().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new Vector318(1, 1, 1)
+    new Vector319(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14871,24 +15231,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = useMemo24(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = useMemo25(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo24(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = useMemo24(
+  const center = useMemo25(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = useMemo25(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = useMemo24(
+  const strokePoints = useMemo25(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef34(null);
+  const startVerticesRef = useRef35(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  useEffect33(() => {
+  useEffect34(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  useEffect33(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  useEffect34(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -14903,7 +15263,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14918,7 +15278,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx30(
+      focusContent: /* @__PURE__ */ jsx31(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14940,7 +15300,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx30("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx31(
           "meshBasicMaterial",
           {
             color: fill,
@@ -14950,7 +15310,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -14968,14 +15328,14 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useEffect as useEffect34, useMemo as useMemo25, useRef as useRef35 } from "react";
+import { useEffect as useEffect35, useMemo as useMemo26, useRef as useRef36 } from "react";
 import {
   MathUtils as MathUtils11,
   Matrix4 as Matrix46,
   Quaternion as Quaternion6,
-  Vector3 as Vector319
+  Vector3 as Vector320
 } from "three";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -15000,7 +15360,7 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector319()
+    new Vector320()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -15009,7 +15369,7 @@ function surfaceQuaternion2(position) {
   const inward = outward.clone().negate();
   const pitch = MathUtils11.degToRad(position.pitch);
   const yaw = MathUtils11.degToRad(position.yaw);
-  const localUp = new Vector319(
+  const localUp = new Vector320(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
@@ -15022,7 +15382,7 @@ function makeWorldToLocal2(center) {
   return new Matrix46().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new Vector319(1, 1, 1)
+    new Vector320(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -15092,16 +15452,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = useMemo25(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = useMemo26(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo25(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = useMemo25(
+  const center = useMemo26(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = useMemo26(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef35(null);
-  useEffect34(() => {
+  const startVerticesRef = useRef36(null);
+  useEffect35(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -15115,7 +15475,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -15129,7 +15489,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx31(
+      focusContent: /* @__PURE__ */ jsx32(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -15150,7 +15510,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx32(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -15167,7 +15527,7 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect35, useRef as useRef36, useState as useState18 } from "react";
+import { useEffect as useEffect36, useRef as useRef37, useState as useState18 } from "react";
 import {
   CanvasTexture,
   ClampToEdgeWrapping as ClampToEdgeWrapping4,
@@ -15175,7 +15535,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter4,
   SRGBColorSpace as SRGBColorSpace6
 } from "three";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -15365,11 +15725,11 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
   const [texture, setTexture] = useState18(null);
-  const onLoadRef = useRef36(onLoad);
-  const onErrorRef = useRef36(onError);
+  const onLoadRef = useRef37(onLoad);
+  const onErrorRef = useRef37(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect35(() => {
+  useEffect36(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -15395,20 +15755,20 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx32(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx33(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx32(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx33(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-import { useFrame as useFrame17, useThree as useThree25 } from "@react-three/fiber";
-import { useEffect as useEffect36, useRef as useRef37, useState as useState19 } from "react";
+import { useFrame as useFrame18, useThree as useThree26 } from "@react-three/fiber";
+import { useEffect as useEffect37, useRef as useRef38, useState as useState19 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
   LinearFilter as LinearFilter8,
@@ -15416,7 +15776,7 @@ import {
   SRGBColorSpace as SRGBColorSpace7,
   TextureLoader as TextureLoader6
 } from "three";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -15430,13 +15790,13 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = useThree25((state) => state.gl);
+  const gl = useThree26((state) => state.gl);
   const [texture, setTexture] = useState19(null);
-  const onErrorRef = useRef37(onError);
-  const onLoadProgressRef = useRef37(onLoadProgress);
+  const onErrorRef = useRef38(onError);
+  const onLoadProgressRef = useRef38(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  useEffect36(() => {
+  useEffect37(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -15477,7 +15837,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  useEffect36(
+  useEffect37(
     () => () => {
       texture?.dispose();
     },
@@ -15507,23 +15867,23 @@ function SequenceHotspot({
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
   const [frameIndex, setFrameIndex] = useState19(0);
-  const elapsedRef = useRef37(0);
-  const frameIndexRef = useRef37(0);
-  const endedRef = useRef37(false);
-  const lastPlaybackStateRef = useRef37(null);
-  const onFrameChangeRef = useRef37(onFrameChange);
-  const onPlaybackStateChangeRef = useRef37(onPlaybackStateChange);
-  const onEndedRef = useRef37(onEnded);
+  const elapsedRef = useRef38(0);
+  const frameIndexRef = useRef38(0);
+  const endedRef = useRef38(false);
+  const lastPlaybackStateRef = useRef38(null);
+  const onFrameChangeRef = useRef38(onFrameChange);
+  const onPlaybackStateChangeRef = useRef38(onPlaybackStateChange);
+  const onEndedRef = useRef38(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  useEffect36(() => {
+  useEffect37(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!texture) {
       return;
     }
@@ -15537,13 +15897,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!texture) {
       return;
     }
@@ -15562,7 +15922,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  useFrame17((_, deltaSeconds) => {
+  useFrame18((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -15592,12 +15952,12 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx34(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
-import { useThree as useThree26 } from "@react-three/fiber";
-import { useEffect as useEffect37, useRef as useRef38, useState as useState20 } from "react";
+import { useThree as useThree27 } from "@react-three/fiber";
+import { useEffect as useEffect38, useRef as useRef39, useState as useState20 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
   LinearFilter as LinearFilter9,
@@ -15606,7 +15966,7 @@ import {
   TextureLoader as TextureLoader7,
   VideoTexture as VideoTexture2
 } from "three";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -15614,11 +15974,11 @@ function clampVolume2(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture2(id, poster, onError) {
-  const gl = useThree26((state) => state.gl);
+  const gl = useThree27((state) => state.gl);
   const [texture, setTexture] = useState20(null);
-  const onErrorRef = useRef38(onError);
+  const onErrorRef = useRef39(onError);
   onErrorRef.current = onError;
-  useEffect37(() => {
+  useEffect38(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -15655,7 +16015,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  useEffect37(
+  useEffect38(
     () => () => {
       texture?.dispose();
     },
@@ -15674,13 +16034,13 @@ function useVideoResource({
   src
 }) {
   const [resource, setResource] = useState20(null);
-  const onEndedRef = useRef38(onEnded);
-  const onErrorRef = useRef38(onError);
-  const onPlaybackStateChangeRef = useRef38(onPlaybackStateChange);
+  const onEndedRef = useRef39(onEnded);
+  const onErrorRef = useRef39(onError);
+  const onPlaybackStateChangeRef = useRef39(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect37(() => {
+  useEffect38(() => {
     if (!src) {
       setResource(null);
       return;
@@ -15787,11 +16147,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = useRef38(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef38(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef39(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef39(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect37(() => {
+  useEffect38(() => {
     if (!resource) {
       return;
     }
@@ -15808,7 +16168,7 @@ function VideoHotspot({
     }
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect37(() => {
+  useEffect38(() => {
     if (!resource) {
       return;
     }
@@ -15831,12 +16191,12 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx34(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx35(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
-import { useFrame as useFrame18, useThree as useThree27 } from "@react-three/fiber";
-import { useEffect as useEffect38, useRef as useRef39, useState as useState21 } from "react";
+import { useFrame as useFrame19, useThree as useThree28 } from "@react-three/fiber";
+import { useEffect as useEffect39, useRef as useRef40, useState as useState21 } from "react";
 import {
   CanvasTexture as CanvasTexture2,
   ClampToEdgeWrapping as ClampToEdgeWrapping7,
@@ -15845,7 +16205,7 @@ import {
   SRGBColorSpace as SRGBColorSpace9,
   TextureLoader as TextureLoader8
 } from "three";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -15910,7 +16270,7 @@ function createSpeakerTexture(state) {
 }
 function useSpeakerTextures(enabled) {
   const [textures, setTextures] = useState21({ playing: null, stopped: null });
-  useEffect38(() => {
+  useEffect39(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -15926,11 +16286,11 @@ function useSpeakerTextures(enabled) {
   return textures;
 }
 function useIconTexture(icon, enabled, onError, id) {
-  const gl = useThree27((state) => state.gl);
+  const gl = useThree28((state) => state.gl);
   const [texture, setTexture] = useState21(null);
-  const onErrorRef = useRef39(onError);
+  const onErrorRef = useRef40(onError);
   onErrorRef.current = onError;
-  useEffect38(() => {
+  useEffect39(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -15967,7 +16327,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  useEffect38(
+  useEffect39(
     () => () => {
       texture?.dispose();
     },
@@ -15987,12 +16347,12 @@ function useAudioHowl({
   src
 }) {
   const [howl, setHowl] = useState21(null);
-  const playingRef = useRef39(playing);
-  const loopRef = useRef39(loop ?? false);
-  const onEndedRef = useRef39(onEnded);
-  const onErrorRef = useRef39(onError);
-  const onPlaybackErrorRef = useRef39(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef39(onPlaybackStateChange);
+  const playingRef = useRef40(playing);
+  const loopRef = useRef40(loop ?? false);
+  const onEndedRef = useRef40(onEnded);
+  const onErrorRef = useRef40(onError);
+  const onPlaybackErrorRef = useRef40(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef40(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -16000,7 +16360,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  useEffect38(() => {
+  useEffect39(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -16037,7 +16397,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  useEffect38(() => {
+  useEffect39(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -16065,7 +16425,7 @@ function AudioHotspot({
   ...anchorProps
 }) {
   usePanoMediaActivationIntent(playing);
-  const camera = useThree27((state) => state.camera);
+  const camera = useThree28((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
     id,
@@ -16081,15 +16441,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 = useRef39(playing);
+  const playingRef = useRef40(playing);
   playingRef.current = playing;
-  const mutedRef = useRef39(muted);
-  const volumeRef = useRef39(volume);
-  const rangeRef = useRef39(range);
+  const mutedRef = useRef40(muted);
+  const volumeRef = useRef40(volume);
+  const rangeRef = useRef40(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  useEffect38(() => {
+  useEffect39(() => {
     if (!howl) {
       return;
     }
@@ -16099,7 +16459,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  useEffect38(() => {
+  useEffect39(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -16117,7 +16477,7 @@ function AudioHotspot({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [howl, pauseWhenHidden]);
-  useFrame18(() => {
+  useFrame19(() => {
     if (!howl) {
       return;
     }
@@ -16130,11 +16490,11 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx35(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ jsx36(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx36(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
-import { useEffect as useEffect39, useRef as useRef40, useState as useState22 } from "react";
+import { useEffect as useEffect40, useRef as useRef41, useState as useState22 } from "react";
 import {
   CanvasTexture as CanvasTexture3,
   ClampToEdgeWrapping as ClampToEdgeWrapping8,
@@ -16142,7 +16502,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter8,
   SRGBColorSpace as SRGBColorSpace10
 } from "three";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -16363,11 +16723,11 @@ function createTextTexture(text, width, height, style) {
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
   const [texture, setTexture] = useState22(null);
-  const onLoadRef = useRef40(onLoad);
-  const onErrorRef = useRef40(onError);
+  const onLoadRef = useRef41(onLoad);
+  const onErrorRef = useRef41(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect39(() => {
+  useEffect40(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -16460,13 +16820,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ jsx36(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx36(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx37(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx37(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 import { Html } from "@react-three/drei";
 import { DoubleSide as DoubleSide6 } from "three";
-import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -16523,7 +16883,7 @@ function IframeHotspot({
     interactive,
     pointerEvents
   );
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -16532,9 +16892,9 @@ function IframeHotspot({
       pointerEvents,
       width,
       children: [
-        /* @__PURE__ */ jsxs20("mesh", { children: [
-          /* @__PURE__ */ jsx37("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsxs21("mesh", { children: [
+          /* @__PURE__ */ jsx38("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ jsx38(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -16545,7 +16905,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -16560,7 +16920,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ jsx37(
+            children: /* @__PURE__ */ jsx38(
               "iframe",
               {
                 allow,