@ericchen1990/pano-view 3.2.2 → 3.3.0

package/dist/index.mjs

@@ -7532,6 +7532,7 @@ var PanoViewer = forwardRef2(
             Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
+              resize: { debounce: 0 },
               camera: {
                 far: DEFAULT_PANORAMA_CAMERA_FAR,
                 fov: normalizedInitialView.fov,
@@ -9715,8 +9716,8 @@ function usePanoViewer() {
 }
 
 // src/sphere-tile/sphere-tile.tsx
-import { useFrame as useFrame9, useThree as useThree13 } from "@react-three/fiber";
-import { memo, useCallback as useCallback9, useEffect as useEffect22, useMemo as useMemo14, useRef as useRef23, useState as useState10 } from "react";
+import { useFrame as useFrame9, useThree as useThree14 } from "@react-three/fiber";
+import { memo, useCallback as useCallback9, useEffect as useEffect23, useMemo as useMemo15, useRef as useRef23, useState as useState10 } from "react";
 import { BackSide as BackSide2, Frustum, Matrix4 as Matrix42, PerspectiveCamera as PerspectiveCamera3 } from "three";
 
 // src/asset-url.ts
@@ -10013,6 +10014,9 @@ var TileTextureManager = class {
     this.generation = 0;
     this.options = options;
   }
+  get memoryBudgetBytes() {
+    return this.options.maxBytes;
+  }
   resume() {
     this.disposed = false;
     this.drain();
@@ -10080,7 +10084,7 @@ var TileTextureManager = class {
     this.totalBytes = 0;
   }
   /**
-   * Releases textures that are no longer rendered by any Tile instance.
+   * Releases textures that are no longer rendered by any tile source.
    * Scene transitions call this after the outgoing panorama has been
    * snapshotted, so the incoming scene never competes with stale GPU tiles.
    */
@@ -10214,8 +10218,44 @@ var TileTextureManager = class {
   }
 };
 
+// src/tile/texture-manager-context.tsx
+import { useThree as useThree13 } from "@react-three/fiber";
+import {
+  createContext as createContext15,
+  useContext as useContext21,
+  useEffect as useEffect21,
+  useMemo as useMemo14
+} from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var TileTextureManagerContext = createContext15(null);
+function TileTextureManagerProvider({
+  children,
+  maxTextureMemoryMb = 128,
+  maxConcurrentLoads = 4
+}) {
+  const gl = useThree13((state) => state.gl);
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const manager = useMemo14(
+    () => new TileTextureManager({
+      anisotropy,
+      maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
+      concurrency: Math.max(1, Math.floor(maxConcurrentLoads)),
+      retryCount: 1
+    }),
+    [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
+  );
+  useEffect21(() => {
+    manager.resume();
+    return () => manager.dispose();
+  }, [manager]);
+  return /* @__PURE__ */ jsx15(TileTextureManagerContext.Provider, { value: manager, children });
+}
+function useSharedTileTextureManager() {
+  return useContext21(TileTextureManagerContext);
+}
+
 // src/tile/texture-hooks.ts
-import { useEffect as useEffect21, useRef as useRef22, useState as useState9 } from "react";
+import { useEffect as useEffect22, useRef as useRef22, useState as useState9 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping2,
   LinearFilter as LinearFilter2,
@@ -10226,7 +10266,7 @@ function usePreviewTexture(url, anisotropy, onError) {
   const [texture, setTexture] = useState9(null);
   const onErrorRef = useRef22(onError);
   onErrorRef.current = onError;
-  useEffect21(() => {
+  useEffect22(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -10263,7 +10303,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  useEffect21(
+  useEffect22(
     () => () => {
       texture?.dispose();
     },
@@ -10279,7 +10319,7 @@ function useManagedTexture(manager, key, url, address) {
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  useEffect21(
+  useEffect22(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -10427,14 +10467,14 @@ function preferredSphereLevel(levels, height, dpr, verticalFov) {
 }
 
 // src/sphere-tile/sphere-tile.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function SpherePatch({
   address,
   texture,
   yawOffset,
   preview = false
 }) {
-  const geometry = useMemo14(
+  const geometry = useMemo15(
     () => sphereTileGeometry(
       address,
       yawOffset,
@@ -10442,13 +10482,13 @@ function SpherePatch({
     ),
     [address, yawOffset, preview]
   );
-  useEffect22(() => () => geometry.dispose(), [geometry]);
-  return /* @__PURE__ */ jsx15(
+  useEffect23(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ jsx16(
     "mesh",
     {
       geometry,
       renderOrder: preview ? -1e3 : -900 + address.level,
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         PanoBasicMaterial,
         {
           map: texture,
@@ -10475,10 +10515,10 @@ var ManagedPatch = memo(function ManagedPatch2({
     url,
     address
   );
-  useEffect22(() => {
+  useEffect23(() => {
     if (snapshot.texture) ready();
   }, [snapshot.texture, ready]);
-  return snapshot.texture ? /* @__PURE__ */ jsx15(
+  return snapshot.texture ? /* @__PURE__ */ jsx16(
     SpherePatch,
     {
       address,
@@ -10506,7 +10546,7 @@ function SphereTileSource({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = useThree13();
+  const { camera, gl, size } = useThree14();
   const anisotropy = gl.capabilities.getMaxAnisotropy();
   const preview = usePreviewTexture(
     resolveAssetUrl(baseUrl, previewUrl),
@@ -10520,14 +10560,15 @@ function SphereTileSource({
     onLevelChange
   });
   callbacks.current = { onReady, onLoadProgress, onTileError, onLevelChange };
-  const budget = Math.max(
+  const sharedManager = useSharedTileTextureManager();
+  const ownedBudget = Math.max(
     1,
     Number.isFinite(maxTextureMemoryMb) ? maxTextureMemoryMb : 128
   ) * 1024 * 1024;
-  const manager = useMemo14(
+  const ownedManager = useMemo15(
     () => new TileTextureManager({
       anisotropy,
-      maxBytes: budget,
+      maxBytes: ownedBudget,
       concurrency: Math.max(
         1,
         Math.floor(
@@ -10541,8 +10582,10 @@ function SphereTileSource({
       onProgress: (progress) => callbacks.current.onLoadProgress?.(progress),
       onError: (error) => callbacks.current.onTileError?.(error)
     }),
-    [anisotropy, budget, maxConcurrentLoads, retryCount]
+    [anisotropy, ownedBudget, maxConcurrentLoads, retryCount]
   );
+  const manager = sharedManager ?? ownedManager;
+  const budget = manager.memoryBudgetBytes;
   const readyRef = useRef23(false);
   const ready = useCallback9(() => {
     if (!readyRef.current) {
@@ -10550,21 +10593,27 @@ function SphereTileSource({
       callbacks.current.onReady?.();
     }
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     if (preview) ready();
   }, [preview, ready]);
-  useEffect22(() => {
+  useEffect23(() => {
     manager.resume();
-    return () => manager.dispose();
-  }, [manager]);
-  const resolveUrl = useMemo14(
+    return () => {
+      if (manager === ownedManager) {
+        manager.dispose();
+        return;
+      }
+      queueMicrotask(() => manager.releaseUnused());
+    };
+  }, [manager, ownedManager]);
+  const resolveUrl = useMemo15(
     () => (address) => resolveAssetUrl(
       baseUrl,
       resolveTileUrl ? resolveTileUrl(address) : resolveSphereTemplateUrl(urlTemplate, address, indexBase)
     ),
     [baseUrl, resolveTileUrl, urlTemplate, indexBase]
   );
-  const candidates = useMemo14(
+  const candidates = useMemo15(
     () => config.levels.map(
       (level, index) => sphereTileAddresses(level, index, config.tileSize).map((address) => ({
         address,
@@ -10573,12 +10622,12 @@ function SphereTileSource({
     ),
     [config, yawOffset]
   );
-  const previewAddress = useMemo14(
+  const previewAddress = useMemo15(
     () => sphereTileAddresses({ width: 2, height: 1 }, 0, 2)[0],
     []
   );
   const [layers, setLayers] = useState10([]);
-  const scratch = useMemo14(
+  const scratch = useMemo15(
     () => ({
       camera: new PerspectiveCamera3(),
       frustum: new Frustum(),
@@ -10648,7 +10697,7 @@ function SphereTileSource({
     }
   });
   return /* @__PURE__ */ jsxs9("group", { visible, children: [
-    preview ? /* @__PURE__ */ jsx15(
+    preview ? /* @__PURE__ */ jsx16(
       SpherePatch,
       {
         address: previewAddress,
@@ -10658,7 +10707,7 @@ function SphereTileSource({
       }
     ) : null,
     loadMode !== "preview" ? layers.flatMap(
-      (layer) => layer.addresses.map((address) => /* @__PURE__ */ jsx15(
+      (layer) => layer.addresses.map((address) => /* @__PURE__ */ jsx16(
         ManagedPatch,
         {
           address,
@@ -10674,14 +10723,14 @@ function SphereTileSource({
 }
 function SphereTile({ multires, ...props }) {
   const token = typeof multires === "string" ? multires : JSON.stringify(multires);
-  const config = useMemo14(() => parseSphereMultires(multires), [token]);
+  const config = useMemo15(() => parseSphereMultires(multires), [token]);
   const sourceKey = `${props.baseUrl}\0${token}\0${props.previewUrl}\0${props.urlTemplate ?? ""}\0${props.indexBase ?? 1}`;
-  return /* @__PURE__ */ jsx15(SphereTileSource, { ...props, config }, sourceKey);
+  return /* @__PURE__ */ jsx16(SphereTileSource, { ...props, config }, sourceKey);
 }
 
 // src/sphere.tsx
-import { useThree as useThree14 } from "@react-three/fiber";
-import { useEffect as useEffect23, useMemo as useMemo15, useRef as useRef24, useState as useState11 } from "react";
+import { useThree as useThree15 } from "@react-three/fiber";
+import { useEffect as useEffect24, useMemo as useMemo16, useRef as useRef24, useState as useState11 } from "react";
 import {
   BackSide as BackSide3,
   LinearFilter as LinearFilter3,
@@ -10691,14 +10740,14 @@ import {
   SRGBColorSpace as SRGBColorSpace3,
   TextureLoader as TextureLoader3
 } from "three";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
   const [texture, setTexture] = useState11(null);
   const onLoadRef = useRef24(onLoad);
   const onErrorRef = useRef24(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect23(() => {
+  useEffect24(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -10737,7 +10786,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  useEffect23(
+  useEffect24(
     () => () => {
       texture?.dispose();
     },
@@ -10755,9 +10804,9 @@ function Sphere({
   onPreviewError,
   visible = true
 }) {
-  const gl = useThree14((state) => state.gl);
+  const gl = useThree15((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = useMemo15(
+  const resolvedPreviewUrl = useMemo16(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -10777,10 +10826,10 @@ function Sphere({
   );
   const displayTexture = texture ?? previewTexture;
   const readyRef = useRef24(false);
-  useEffect23(() => {
+  useEffect24(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -10796,8 +10845,8 @@ function Sphere({
       rotation: [0, MathUtils6.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ jsx16("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx17(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -10811,13 +10860,13 @@ function Sphere({
 }
 
 // src/video/pano-video.tsx
-import { useThree as useThree15 } from "@react-three/fiber";
+import { useThree as useThree16 } from "@react-three/fiber";
 import {
   useCallback as useCallback10,
-  useContext as useContext21,
-  useEffect as useEffect24,
+  useContext as useContext22,
+  useEffect as useEffect25,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo16,
+  useMemo as useMemo17,
   useRef as useRef25,
   useState as useState12
 } from "react";
@@ -10831,7 +10880,7 @@ import {
   TextureLoader as TextureLoader4,
   VideoTexture
 } from "three";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -10915,11 +10964,11 @@ function applyEquirectangularLayout(texture, anisotropy) {
   texture.needsUpdate = true;
 }
 function usePosterTexture(poster, onError) {
-  const gl = useThree15((state) => state.gl);
+  const gl = useThree16((state) => state.gl);
   const [texture, setTexture] = useState12(null);
   const onErrorRef = useRef25(onError);
   onErrorRef.current = onError;
-  useEffect24(() => {
+  useEffect25(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -10956,7 +11005,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  useEffect24(
+  useEffect25(
     () => () => {
       texture?.dispose();
     },
@@ -11014,16 +11063,16 @@ function PanoVideo({
   onTrackChange
 }) {
   usePanoMediaActivationIntent(autoPlay);
-  const gl = useThree15((state) => state.gl);
-  const host = useContext21(PanoVideoHostContext);
-  const overlay = useContext21(PanoChromeOverlayContext);
-  const variants = useMemo16(
+  const gl = useThree16((state) => state.gl);
+  const host = useContext22(PanoVideoHostContext);
+  const overlay = useContext22(PanoChromeOverlayContext);
+  const variants = useMemo17(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = useMemo16(
+  const captionAppearance = useMemo17(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
@@ -11088,7 +11137,7 @@ function PanoVideo({
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = useMemo16(() => {
+  const resource = useMemo17(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -11105,7 +11154,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  useEffect24(
+  useEffect25(
     () => () => {
       if (!resource) {
         return;
@@ -11120,13 +11169,13 @@ function PanoVideo({
     },
     [resource]
   );
-  useEffect24(() => {
+  useEffect25(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -11201,7 +11250,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = useMemo16(
+  const controller = useMemo17(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -11279,10 +11328,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  useEffect24(() => {
+  useEffect25(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -11339,7 +11388,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!resource) {
       return;
     }
@@ -11431,7 +11480,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!resource) {
       return;
     }
@@ -11451,7 +11500,7 @@ function PanoVideo({
     }
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!resource) {
       return;
     }
@@ -11501,7 +11550,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!resource) {
       return;
     }
@@ -11536,7 +11585,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -11554,8 +11603,8 @@ function PanoVideo({
         rotation: [0, MathUtils7.degToRad(90 + yawOffset), 0],
         visible,
         children: [
-          /* @__PURE__ */ jsx17("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ jsx18(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -11566,7 +11615,7 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx17(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ jsx18(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
@@ -11634,8 +11683,8 @@ function isSnapshotTransition(preset) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-import { useFrame as useFrame10, useThree as useThree16 } from "@react-three/fiber";
-import { useEffect as useEffect25, useMemo as useMemo17, useRef as useRef26 } from "react";
+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,
@@ -11698,7 +11747,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -11774,13 +11823,13 @@ function ParticleOverlay({
   runId,
   onFinish
 }) {
-  const { camera } = useThree16();
+  const { camera } = useThree17();
   const meshRef = useRef26(null);
   const startRef = useRef26(null);
   const finishedRef = useRef26(false);
   const directionRef = useRef26(new Vector310());
-  const geometry = useMemo17(() => createParticleGeometry(), []);
-  const material = useMemo17(
+  const geometry = useMemo18(() => createParticleGeometry(), []);
+  const material = useMemo18(
     () => new ShaderMaterial2({
       transparent: true,
       depthTest: false,
@@ -11796,9 +11845,9 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  useEffect25(() => () => geometry.dispose(), [geometry]);
-  useEffect25(() => () => material.dispose(), [material]);
-  useEffect25(() => {
+  useEffect26(() => () => geometry.dispose(), [geometry]);
+  useEffect26(() => () => material.dispose(), [material]);
+  useEffect26(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -11820,7 +11869,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "mesh",
     {
       ref: meshRef,
@@ -11833,8 +11882,8 @@ function ParticleOverlay({
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-import { useFrame as useFrame11, useThree as useThree17 } from "@react-three/fiber";
-import { useEffect as useEffect26, useMemo as useMemo18, useRef as useRef27 } from "react";
+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
@@ -12114,7 +12163,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -12122,19 +12171,19 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, gl } = useThree17();
+  const { camera, gl } = useThree18();
   const meshRef = useRef27(null);
   const startRef = useRef27(null);
   const finishedRef = useRef27(false);
   const directionRef = useRef27(new Vector311());
-  const material = useMemo18(() => {
+  const material = useMemo19(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  useEffect26(() => () => material?.dispose(), [material]);
-  useEffect26(() => {
+  useEffect27(() => () => material?.dispose(), [material]);
+  useEffect27(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
@@ -12164,20 +12213,20 @@ function SnapshotOverlay({
     return null;
   }
   return /* @__PURE__ */ jsxs12("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx19("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx19("primitive", { attach: "material", object: material })
+    /* @__PURE__ */ jsx20("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx20("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ jsx20(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ jsx21(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -12205,7 +12254,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ jsx20(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ jsx21(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -12214,44 +12263,6 @@ function TransitionOverlay(props) {
   }
 }
 
-// src/tile/texture-manager-context.tsx
-import { useThree as useThree18 } from "@react-three/fiber";
-import {
-  createContext as createContext15,
-  useContext as useContext22,
-  useEffect as useEffect27,
-  useMemo as useMemo19
-} from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var TileTextureManagerContext = createContext15(
-  null
-);
-function TileTextureManagerProvider({
-  children,
-  maxTextureMemoryMb = 128,
-  maxConcurrentLoads = 4
-}) {
-  const gl = useThree18((state) => state.gl);
-  const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = useMemo19(
-    () => new TileTextureManager({
-      anisotropy,
-      maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
-      concurrency: Math.max(1, Math.floor(maxConcurrentLoads)),
-      retryCount: 1
-    }),
-    [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
-  );
-  useEffect27(() => {
-    manager.resume();
-    return () => manager.dispose();
-  }, [manager]);
-  return /* @__PURE__ */ jsx21(TileTextureManagerContext.Provider, { value: manager, children });
-}
-function useSharedTileTextureManager() {
-  return useContext22(TileTextureManagerContext);
-}
-
 // 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";
@@ -12938,6 +12949,19 @@ function SceneSource({
         }
       );
     }
+    case "sphereTile": {
+      const { id: _id, type: _type, ...tileProps } = scene;
+      return /* @__PURE__ */ jsx23(
+        SphereTile,
+        {
+          ...tileProps,
+          visible,
+          loadMode: baseOnly ? "base" : "full",
+          onReady,
+          onPreviewError: onError
+        }
+      );
+    }
     default: {
       const exhaustive = scene;
       void exhaustive;
@@ -13004,6 +13028,7 @@ function ScenesController({
   activeSceneId,
   transition: transitionInput,
   renderHotspots,
+  onSceneReady,
   onTransitionEnd,
   onTransitionError,
   snapshotMaxPixels = 3686400,
@@ -13039,6 +13064,7 @@ function ScenesController({
   const phaseRef = useRef29(phase);
   const liveSlotRef = useRef29(liveSlot);
   const transitionFromRef = useRef29(initialScene);
+  const readySceneRef = useRef29(null);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
@@ -13079,6 +13105,7 @@ function ScenesController({
       return;
     }
     if (phaseRef.current === "transitioning" || phaseRef.current === "capturing") {
+      if (requestedSceneIdRef.current === requested.id) return;
       requestedSceneIdRef.current = requested.id;
       captureReasonRef.current = "interrupt";
       setPhase("recapturing");
@@ -13087,7 +13114,16 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
+  const notifySceneReady = useCallback11((scene) => {
+    if (!scene || readySceneRef.current === scene) return;
+    readySceneRef.current = scene;
+    onSceneReady?.(scene.id);
+  }, [onSceneReady]);
   const handleReady = useCallback11((slot) => {
+    if (slot === liveSlotRef.current && pendingSlot === null && phaseRef.current === "idle") {
+      notifySceneReady(slotsRef.current[slot]);
+      return;
+    }
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -13103,6 +13139,7 @@ function ScenesController({
       setActiveSlot(slot);
       setPendingSlot(null);
       setPhase("idle");
+      notifySceneReady(nextScene);
       if (previousScene && nextScene) {
         onTransitionEnd?.({
           previousSceneId: previousScene.id,
@@ -13117,7 +13154,7 @@ function ScenesController({
     captureReasonRef.current = "start";
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
-  }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
+  }, [controlsRef, notifySceneReady, onTransitionEnd, pendingSlot, transition.preset]);
   const handleCaptured = useCallback11((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
@@ -13135,11 +13172,12 @@ function ScenesController({
     });
     manager?.releaseUnused();
     if (pendingSlot !== null) {
+      notifySceneReady(slotsRef.current[pendingSlot]);
       setLiveSlot(pendingSlot);
     }
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
-  }, [manager, pendingSlot, sceneMap, startPreload]);
+  }, [manager, notifySceneReady, pendingSlot, sceneMap, startPreload]);
   const finishTransition = useCallback11(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
@@ -13182,6 +13220,7 @@ function ScenesController({
       setPhase("idle");
     };
     const onContextRestored = () => {
+      readySceneRef.current = null;
       manager?.resume();
       setRecoveryKey((current) => current + 1);
     };