@ericchen1990/pano-view 3.2.2 → 3.3.0

package/dist/index.cjs

@@ -7548,6 +7548,7 @@ var PanoViewer = (0, import_react26.forwardRef)(
             import_fiber10.Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
+              resize: { debounce: 0 },
               camera: {
                 far: DEFAULT_PANORAMA_CAMERA_FAR,
                 fov: normalizedInitialView.fov,
@@ -9698,8 +9699,8 @@ function usePanoViewer() {
 }
 
 // src/sphere-tile/sphere-tile.tsx
-var import_fiber15 = require("@react-three/fiber");
-var import_react38 = require("react");
+var import_fiber16 = require("@react-three/fiber");
+var import_react39 = require("react");
 var import_three14 = require("three");
 
 // src/asset-url.ts
@@ -9988,6 +9989,9 @@ var TileTextureManager = class {
     this.generation = 0;
     this.options = options;
   }
+  get memoryBudgetBytes() {
+    return this.options.maxBytes;
+  }
   resume() {
     this.disposed = false;
     this.drain();
@@ -10055,7 +10059,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.
    */
@@ -10189,14 +10193,45 @@ var TileTextureManager = class {
   }
 };
 
-// src/tile/texture-hooks.ts
+// src/tile/texture-manager-context.tsx
+var import_fiber15 = require("@react-three/fiber");
 var import_react37 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TileTextureManagerContext = (0, import_react37.createContext)(null);
+function TileTextureManagerProvider({
+  children,
+  maxTextureMemoryMb = 128,
+  maxConcurrentLoads = 4
+}) {
+  const gl = (0, import_fiber15.useThree)((state) => state.gl);
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const manager = (0, import_react37.useMemo)(
+    () => new TileTextureManager({
+      anisotropy,
+      maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
+      concurrency: Math.max(1, Math.floor(maxConcurrentLoads)),
+      retryCount: 1
+    }),
+    [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
+  );
+  (0, import_react37.useEffect)(() => {
+    manager.resume();
+    return () => manager.dispose();
+  }, [manager]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
+}
+function useSharedTileTextureManager() {
+  return (0, import_react37.useContext)(TileTextureManagerContext);
+}
+
+// src/tile/texture-hooks.ts
+var import_react38 = require("react");
 var import_three12 = require("three");
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = (0, import_react37.useState)(null);
-  const onErrorRef = (0, import_react37.useRef)(onError);
+  const [texture, setTexture] = (0, import_react38.useState)(null);
+  const onErrorRef = (0, import_react38.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -10233,7 +10268,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react37.useEffect)(
+  (0, import_react38.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10242,14 +10277,14 @@ function usePreviewTexture(url, anisotropy, onError) {
   return texture;
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react37.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react38.useState)(() => ({
     manager,
     key,
     url,
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  (0, import_react37.useEffect)(
+  (0, import_react38.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -10391,14 +10426,14 @@ function preferredSphereLevel(levels, height, dpr, verticalFov) {
 }
 
 // src/sphere-tile/sphere-tile.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function SpherePatch({
   address,
   texture,
   yawOffset,
   preview = false
 }) {
-  const geometry = (0, import_react38.useMemo)(
+  const geometry = (0, import_react39.useMemo)(
     () => sphereTileGeometry(
       address,
       yawOffset,
@@ -10406,13 +10441,13 @@ function SpherePatch({
     ),
     [address, yawOffset, preview]
   );
-  (0, import_react38.useEffect)(() => () => geometry.dispose(), [geometry]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  (0, import_react39.useEffect)(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "mesh",
     {
       geometry,
       renderOrder: preview ? -1e3 : -900 + address.level,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         PanoBasicMaterial,
         {
           map: texture,
@@ -10425,7 +10460,7 @@ function SpherePatch({
     }
   );
 }
-var ManagedPatch = (0, import_react38.memo)(function ManagedPatch2({
+var ManagedPatch = (0, import_react39.memo)(function ManagedPatch2({
   address,
   manager,
   resolveUrl,
@@ -10439,10 +10474,10 @@ var ManagedPatch = (0, import_react38.memo)(function ManagedPatch2({
     url,
     address
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (snapshot.texture) ready();
   }, [snapshot.texture, ready]);
-  return snapshot.texture ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return snapshot.texture ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     SpherePatch,
     {
       address,
@@ -10470,28 +10505,29 @@ function SphereTileSource({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = (0, import_fiber15.useThree)();
+  const { camera, gl, size } = (0, import_fiber16.useThree)();
   const anisotropy = gl.capabilities.getMaxAnisotropy();
   const preview = usePreviewTexture(
     resolveAssetUrl(baseUrl, previewUrl),
     anisotropy,
     onPreviewError
   );
-  const callbacks = (0, import_react38.useRef)({
+  const callbacks = (0, import_react39.useRef)({
     onReady,
     onLoadProgress,
     onTileError,
     onLevelChange
   });
   callbacks.current = { onReady, onLoadProgress, onTileError, onLevelChange };
-  const budget = Math.max(
+  const sharedManager = useSharedTileTextureManager();
+  const ownedBudget = Math.max(
     1,
     Number.isFinite(maxTextureMemoryMb) ? maxTextureMemoryMb : 128
   ) * 1024 * 1024;
-  const manager = (0, import_react38.useMemo)(
+  const ownedManager = (0, import_react39.useMemo)(
     () => new TileTextureManager({
       anisotropy,
-      maxBytes: budget,
+      maxBytes: ownedBudget,
       concurrency: Math.max(
         1,
         Math.floor(
@@ -10505,30 +10541,38 @@ function SphereTileSource({
       onProgress: (progress) => callbacks.current.onLoadProgress?.(progress),
       onError: (error) => callbacks.current.onTileError?.(error)
     }),
-    [anisotropy, budget, maxConcurrentLoads, retryCount]
+    [anisotropy, ownedBudget, maxConcurrentLoads, retryCount]
   );
-  const readyRef = (0, import_react38.useRef)(false);
-  const ready = (0, import_react38.useCallback)(() => {
+  const manager = sharedManager ?? ownedManager;
+  const budget = manager.memoryBudgetBytes;
+  const readyRef = (0, import_react39.useRef)(false);
+  const ready = (0, import_react39.useCallback)(() => {
     if (!readyRef.current) {
       readyRef.current = true;
       callbacks.current.onReady?.();
     }
   }, []);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (preview) ready();
   }, [preview, ready]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     manager.resume();
-    return () => manager.dispose();
-  }, [manager]);
-  const resolveUrl = (0, import_react38.useMemo)(
+    return () => {
+      if (manager === ownedManager) {
+        manager.dispose();
+        return;
+      }
+      queueMicrotask(() => manager.releaseUnused());
+    };
+  }, [manager, ownedManager]);
+  const resolveUrl = (0, import_react39.useMemo)(
     () => (address) => resolveAssetUrl(
       baseUrl,
       resolveTileUrl ? resolveTileUrl(address) : resolveSphereTemplateUrl(urlTemplate, address, indexBase)
     ),
     [baseUrl, resolveTileUrl, urlTemplate, indexBase]
   );
-  const candidates = (0, import_react38.useMemo)(
+  const candidates = (0, import_react39.useMemo)(
     () => config.levels.map(
       (level, index) => sphereTileAddresses(level, index, config.tileSize).map((address) => ({
         address,
@@ -10537,12 +10581,12 @@ function SphereTileSource({
     ),
     [config, yawOffset]
   );
-  const previewAddress = (0, import_react38.useMemo)(
+  const previewAddress = (0, import_react39.useMemo)(
     () => sphereTileAddresses({ width: 2, height: 1 }, 0, 2)[0],
     []
   );
-  const [layers, setLayers] = (0, import_react38.useState)([]);
-  const scratch = (0, import_react38.useMemo)(
+  const [layers, setLayers] = (0, import_react39.useState)([]);
+  const scratch = (0, import_react39.useMemo)(
     () => ({
       camera: new import_three14.PerspectiveCamera(),
       frustum: new import_three14.Frustum(),
@@ -10560,7 +10604,7 @@ function SphereTileSource({
     }),
     [camera, candidates]
   );
-  (0, import_fiber15.useFrame)(() => {
+  (0, import_fiber16.useFrame)(() => {
     if (!(camera instanceof import_three14.PerspectiveCamera)) return;
     const now = performance.now(), dpr = gl.getPixelRatio();
     const reset = scratch.manager !== manager || scratch.loadMode !== loadMode;
@@ -10611,8 +10655,8 @@ function SphereTileSource({
       setLayers(next);
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("group", { visible, children: [
-    preview ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("group", { visible, children: [
+    preview ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       SpherePatch,
       {
         address: previewAddress,
@@ -10622,7 +10666,7 @@ function SphereTileSource({
       }
     ) : null,
     loadMode !== "preview" ? layers.flatMap(
-      (layer) => layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      (layer) => layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         ManagedPatch,
         {
           address,
@@ -10638,23 +10682,23 @@ function SphereTileSource({
 }
 function SphereTile({ multires, ...props }) {
   const token = typeof multires === "string" ? multires : JSON.stringify(multires);
-  const config = (0, import_react38.useMemo)(() => parseSphereMultires(multires), [token]);
+  const config = (0, import_react39.useMemo)(() => parseSphereMultires(multires), [token]);
   const sourceKey = `${props.baseUrl}\0${token}\0${props.previewUrl}\0${props.urlTemplate ?? ""}\0${props.indexBase ?? 1}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SphereTileSource, { ...props, config }, sourceKey);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SphereTileSource, { ...props, config }, sourceKey);
 }
 
 // src/sphere.tsx
-var import_fiber16 = require("@react-three/fiber");
-var import_react39 = require("react");
+var import_fiber17 = require("@react-three/fiber");
+var import_react40 = require("react");
 var import_three15 = require("three");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react39.useState)(null);
-  const onLoadRef = (0, import_react39.useRef)(onLoad);
-  const onErrorRef = (0, import_react39.useRef)(onError);
+  const [texture, setTexture] = (0, import_react40.useState)(null);
+  const onLoadRef = (0, import_react40.useRef)(onLoad);
+  const onErrorRef = (0, import_react40.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -10693,7 +10737,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  (0, import_react39.useEffect)(
+  (0, import_react40.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10711,9 +10755,9 @@ function Sphere({
   onPreviewError,
   visible = true
 }) {
-  const gl = (0, import_fiber16.useThree)((state) => state.gl);
+  const gl = (0, import_fiber17.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = (0, import_react39.useMemo)(
+  const resolvedPreviewUrl = (0, import_react40.useMemo)(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -10732,11 +10776,11 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = (0, import_react39.useRef)(false);
-  (0, import_react39.useEffect)(() => {
+  const readyRef = (0, import_react40.useRef)(false);
+  (0, import_react40.useEffect)(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -10746,14 +10790,14 @@ function Sphere({
   if (!displayTexture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "mesh",
     {
       rotation: [0, import_three15.MathUtils.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -10767,10 +10811,10 @@ function Sphere({
 }
 
 // src/video/pano-video.tsx
-var import_fiber17 = require("@react-three/fiber");
-var import_react40 = require("react");
+var import_fiber18 = require("@react-three/fiber");
+var import_react41 = require("react");
 var import_three16 = require("three");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -10854,11 +10898,11 @@ function applyEquirectangularLayout(texture, anisotropy) {
   texture.needsUpdate = true;
 }
 function usePosterTexture(poster, onError) {
-  const gl = (0, import_fiber17.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react40.useState)(null);
-  const onErrorRef = (0, import_react40.useRef)(onError);
+  const gl = (0, import_fiber18.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react41.useState)(null);
+  const onErrorRef = (0, import_react41.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -10895,7 +10939,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react40.useEffect)(
+  (0, import_react41.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10953,39 +10997,39 @@ function PanoVideo({
   onTrackChange
 }) {
   usePanoMediaActivationIntent(autoPlay);
-  const gl = (0, import_fiber17.useThree)((state) => state.gl);
-  const host = (0, import_react40.useContext)(PanoVideoHostContext);
-  const overlay = (0, import_react40.useContext)(PanoChromeOverlayContext);
-  const variants = (0, import_react40.useMemo)(
+  const gl = (0, import_fiber18.useThree)((state) => state.gl);
+  const host = (0, import_react41.useContext)(PanoVideoHostContext);
+  const overlay = (0, import_react41.useContext)(PanoChromeOverlayContext);
+  const variants = (0, import_react41.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react40.useMemo)(
+  const captionAppearance = (0, import_react41.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react40.useState)(
+  const [variantId, setVariantId] = (0, import_react41.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react40.useState)(
+  const [trackId, setTrackId] = (0, import_react41.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react40.useState)(false);
-  const autoPlayRef = (0, import_react40.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react41.useState)(false);
+  const autoPlayRef = (0, import_react41.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react40.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react40.useRef)(
+  const blockedRef = (0, import_react41.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react41.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react40.useRef)({
+  const mediaCapabilitiesRef = (0, import_react41.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react40.useRef)(null);
+  const storeRef = (0, import_react41.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -10995,7 +11039,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react40.useRef)({
+  const actionsRef = (0, import_react41.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -11015,19 +11059,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = (0, import_react40.useRef)(onLoad);
-  const onErrorRef = (0, import_react40.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react40.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react40.useRef)(onEnded);
-  const onVariantChangeRef = (0, import_react40.useRef)(onVariantChange);
-  const onTrackChangeRef = (0, import_react40.useRef)(onTrackChange);
+  const onLoadRef = (0, import_react41.useRef)(onLoad);
+  const onErrorRef = (0, import_react41.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react41.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react41.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react41.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react41.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react40.useMemo)(() => {
+  const resource = (0, import_react41.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -11044,7 +11088,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react40.useEffect)(
+  (0, import_react41.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -11059,13 +11103,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -11088,7 +11132,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react40.useCallback)(
+  const emitSnapshot = (0, import_react41.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -11140,7 +11184,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react40.useMemo)(
+  const controller = (0, import_react41.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -11192,7 +11236,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -11205,7 +11249,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11218,10 +11262,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -11278,7 +11322,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11370,7 +11414,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11390,7 +11434,7 @@ function PanoVideo({
     }
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11440,7 +11484,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11475,7 +11519,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -11486,15 +11530,15 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "mesh",
       {
         rotation: [0, import_three16.MathUtils.degToRad(90 + yawOffset), 0],
         visible,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -11505,7 +11549,7 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
@@ -11561,8 +11605,8 @@ function isSnapshotTransition(preset) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-var import_fiber18 = require("@react-three/fiber");
-var import_react41 = require("react");
+var import_fiber19 = require("@react-three/fiber");
+var import_react42 = require("react");
 var import_three18 = require("three");
 
 // src/scene-transitions/glsl.ts
@@ -11617,7 +11661,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -11693,13 +11737,13 @@ function ParticleOverlay({
   runId,
   onFinish
 }) {
-  const { camera } = (0, import_fiber18.useThree)();
-  const meshRef = (0, import_react41.useRef)(null);
-  const startRef = (0, import_react41.useRef)(null);
-  const finishedRef = (0, import_react41.useRef)(false);
-  const directionRef = (0, import_react41.useRef)(new import_three18.Vector3());
-  const geometry = (0, import_react41.useMemo)(() => createParticleGeometry(), []);
-  const material = (0, import_react41.useMemo)(
+  const { camera } = (0, import_fiber19.useThree)();
+  const meshRef = (0, import_react42.useRef)(null);
+  const startRef = (0, import_react42.useRef)(null);
+  const finishedRef = (0, import_react42.useRef)(false);
+  const directionRef = (0, import_react42.useRef)(new import_three18.Vector3());
+  const geometry = (0, import_react42.useMemo)(() => createParticleGeometry(), []);
+  const material = (0, import_react42.useMemo)(
     () => new import_three18.ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -11715,14 +11759,14 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  (0, import_react41.useEffect)(() => () => geometry.dispose(), [geometry]);
-  (0, import_react41.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react42.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react42.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
   }, [material, runId]);
-  (0, import_fiber18.useFrame)((state) => {
+  (0, import_fiber19.useFrame)((state) => {
     const mesh = meshRef.current;
     if (!mesh || !isPerspectiveCamera(camera)) {
       return;
@@ -11739,7 +11783,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "mesh",
     {
       ref: meshRef,
@@ -11752,8 +11796,8 @@ function ParticleOverlay({
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-var import_fiber19 = require("@react-three/fiber");
-var import_react42 = require("react");
+var import_fiber20 = require("@react-three/fiber");
+var import_react43 = require("react");
 var import_three20 = require("three");
 
 // src/scene-transitions/snapshot-shaders.ts
@@ -12033,7 +12077,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -12041,26 +12085,26 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, gl } = (0, import_fiber19.useThree)();
-  const meshRef = (0, import_react42.useRef)(null);
-  const startRef = (0, import_react42.useRef)(null);
-  const finishedRef = (0, import_react42.useRef)(false);
-  const directionRef = (0, import_react42.useRef)(new import_three20.Vector3());
-  const material = (0, import_react42.useMemo)(() => {
+  const { camera, gl } = (0, import_fiber20.useThree)();
+  const meshRef = (0, import_react43.useRef)(null);
+  const startRef = (0, import_react43.useRef)(null);
+  const finishedRef = (0, import_react43.useRef)(false);
+  const directionRef = (0, import_react43.useRef)(new import_three20.Vector3());
+  const material = (0, import_react43.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  (0, import_react42.useEffect)(() => () => material?.dispose(), [material]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => () => material?.dispose(), [material]);
+  (0, import_react43.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
       material.uniforms.progress.value = 0;
     }
   }, [material, runId]);
-  (0, import_fiber19.useFrame)((state) => {
+  (0, import_fiber20.useFrame)((state) => {
     const mesh = meshRef.current;
     if (!mesh || !material || !isPerspectiveCamera(camera)) {
       return;
@@ -12082,21 +12126,21 @@ function SnapshotOverlay({
   if (!material) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -12124,7 +12168,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -12133,39 +12177,6 @@ function TransitionOverlay(props) {
   }
 }
 
-// src/tile/texture-manager-context.tsx
-var import_fiber20 = require("@react-three/fiber");
-var import_react43 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react43.createContext)(
-  null
-);
-function TileTextureManagerProvider({
-  children,
-  maxTextureMemoryMb = 128,
-  maxConcurrentLoads = 4
-}) {
-  const gl = (0, import_fiber20.useThree)((state) => state.gl);
-  const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react43.useMemo)(
-    () => new TileTextureManager({
-      anisotropy,
-      maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
-      concurrency: Math.max(1, Math.floor(maxConcurrentLoads)),
-      retryCount: 1
-    }),
-    [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
-  );
-  (0, import_react43.useEffect)(() => {
-    manager.resume();
-    return () => manager.dispose();
-  }, [manager]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
-}
-function useSharedTileTextureManager() {
-  return (0, import_react43.useContext)(TileTextureManagerContext);
-}
-
 // src/tile/tile.tsx
 var import_fiber21 = require("@react-three/fiber");
 var import_react44 = require("react");
@@ -12841,6 +12852,19 @@ function SceneSource({
         }
       );
     }
+    case "sphereTile": {
+      const { id: _id, type: _type, ...tileProps } = scene;
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        SphereTile,
+        {
+          ...tileProps,
+          visible,
+          loadMode: baseOnly ? "base" : "full",
+          onReady,
+          onPreviewError: onError
+        }
+      );
+    }
     default: {
       const exhaustive = scene;
       void exhaustive;
@@ -12907,6 +12931,7 @@ function ScenesController({
   activeSceneId,
   transition: transitionInput,
   renderHotspots,
+  onSceneReady,
   onTransitionEnd,
   onTransitionError,
   snapshotMaxPixels = 3686400,
@@ -12942,6 +12967,7 @@ function ScenesController({
   const phaseRef = (0, import_react45.useRef)(phase);
   const liveSlotRef = (0, import_react45.useRef)(liveSlot);
   const transitionFromRef = (0, import_react45.useRef)(initialScene);
+  const readySceneRef = (0, import_react45.useRef)(null);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
@@ -12982,6 +13008,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");
@@ -12990,7 +13017,16 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
+  const notifySceneReady = (0, import_react45.useCallback)((scene) => {
+    if (!scene || readySceneRef.current === scene) return;
+    readySceneRef.current = scene;
+    onSceneReady?.(scene.id);
+  }, [onSceneReady]);
   const handleReady = (0, import_react45.useCallback)((slot) => {
+    if (slot === liveSlotRef.current && pendingSlot === null && phaseRef.current === "idle") {
+      notifySceneReady(slotsRef.current[slot]);
+      return;
+    }
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -13006,6 +13042,7 @@ function ScenesController({
       setActiveSlot(slot);
       setPendingSlot(null);
       setPhase("idle");
+      notifySceneReady(nextScene);
       if (previousScene && nextScene) {
         onTransitionEnd?.({
           previousSceneId: previousScene.id,
@@ -13020,7 +13057,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 = (0, import_react45.useCallback)((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
@@ -13038,11 +13075,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 = (0, import_react45.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
@@ -13085,6 +13123,7 @@ function ScenesController({
       setPhase("idle");
     };
     const onContextRestored = () => {
+      readySceneRef.current = null;
       manager?.resume();
       setRecoveryKey((current) => current + 1);
     };