@ericchen1990/pano-view 3.1.2 → 3.2.0

package/dist/index.mjs

@@ -2311,6 +2311,9 @@ function isMediaActivationEvent(event) {
       return false;
   }
 }
+function isAutoplayPolicyError(error) {
+  return typeof error === "object" && error !== null && "name" in error && error.name === "NotAllowedError";
+}
 
 // src/audio/howl.ts
 import_howler.Howler.autoUnlock = true;
@@ -3742,7 +3745,9 @@ var DEFAULT_PANO_FILTER_INTENSITY = 1;
 var DEFAULT_PANO_FILTER_SNAPSHOT = {
   preset: "none",
   intensity: DEFAULT_PANO_FILTER_INTENSITY,
-  enabled: true
+  enabled: true,
+  colorMatrix: null,
+  colorMatrixScope: "panorama"
 };
 function clampPanoFilterIntensity(value) {
   if (!Number.isFinite(value)) {
@@ -3751,15 +3756,17 @@ function clampPanoFilterIntensity(value) {
   return Math.max(0, Math.min(value, 1));
 }
 function resolvePanoFilterSnapshot(input) {
+  if (input.colorMatrix && (input.colorMatrix.length !== 20 || input.colorMatrix.some((value) => !Number.isFinite(value)))) {
+    throw new Error("colorMatrix must contain 20 finite numbers");
+  }
   return {
+    colorMatrix: input.colorMatrix ? [...input.colorMatrix] : null,
+    colorMatrixScope: input.colorMatrixScope ?? "panorama",
     preset: input.preset ?? "none",
     intensity: clampPanoFilterIntensity(input.intensity),
     enabled: input.enabled !== false
   };
 }
-function isPanoFilterActive(snapshot) {
-  return snapshot.enabled && snapshot.preset !== "none";
-}
 
 // src/pano-filter/host.ts
 var PanoFilterHostContext = createContext7(null);
@@ -3856,7 +3863,7 @@ function hasPanoMediaActivationIntent(host) {
   return host.intents.size > 0;
 }
 function needsMediaGesture() {
-  if (typeof navigator !== "undefined" && navigator.userActivation?.hasBeenActive) {
+  if (typeof navigator !== "undefined" && navigator.userActivation?.isActive) {
     return false;
   }
   if (import_howler2.Howler.ctx?.state === "running") {
@@ -7189,10 +7196,6 @@ var PanoViewer = forwardRef2(
       if (!shouldActivateMedia) {
         return;
       }
-      if (!needsMediaGesture()) {
-        void activateMedia();
-        return;
-      }
       let cancelled = false;
       let activating = false;
       const removeListeners = () => {
@@ -7200,32 +7203,69 @@ var PanoViewer = forwardRef2(
         window.removeEventListener("pointerup", handleGesture, true);
         window.removeEventListener("keydown", handleGesture, true);
       };
-      const handleGesture = (event) => {
-        if (!isMediaActivationEvent(event) || activating || cancelled) {
+      const completeIfUnlocked = (requestedVideo, videoOk) => {
+        if (cancelled || !isPanoAudioUnlocked()) {
+          return;
+        }
+        if (requestedVideo && videoHost.controller && !videoOk) {
+          return;
+        }
+        removeListeners();
+        setMediaActivated(true);
+      };
+      const tryActivate = () => {
+        if (activating || cancelled) {
           return;
         }
         activating = true;
+        let videoPlay;
+        const controls2 = {
+          resumeAudio: mediaActivationControls.resumeAudio,
+          playVideo: (options) => {
+            const result = mediaActivationControls.playVideo(options);
+            videoPlay = result;
+            return result;
+          },
+          playBackgroundAudio: mediaActivationControls.playBackgroundAudio
+        };
         try {
-          const resume = runMediaActivation();
-          void resume.then(() => {
-            if (cancelled || !isPanoAudioUnlocked()) {
-              return;
+          const resume = controls2.resumeAudio();
+          mediaActivationOptions?.onActivate?.(controls2);
+          const requestedVideo = videoPlay !== void 0;
+          void Promise.all([resume, videoPlay ?? Promise.resolve(true)]).then(
+            ([, videoOk]) => {
+              completeIfUnlocked(requestedVideo, videoOk);
+            },
+            () => {
+              completeIfUnlocked(requestedVideo, false);
             }
-            removeListeners();
-            setMediaActivated(true);
-          });
+          );
         } finally {
           activating = false;
         }
       };
+      const handleGesture = (event) => {
+        if (!isMediaActivationEvent(event)) {
+          return;
+        }
+        tryActivate();
+      };
       window.addEventListener("pointerdown", handleGesture, { capture: true });
       window.addEventListener("pointerup", handleGesture, { capture: true });
       window.addEventListener("keydown", handleGesture, { capture: true });
+      if (!needsMediaGesture()) {
+        tryActivate();
+      }
       return () => {
         cancelled = true;
         removeListeners();
       };
-    }, [activateMedia, runMediaActivation, shouldActivateMedia]);
+    }, [
+      mediaActivationControls,
+      mediaActivationOptions,
+      shouldActivateMedia,
+      videoHost
+    ]);
     const fallbackViewRef = useRef13(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
@@ -8004,15 +8044,23 @@ import { useContext as useContext17, useEffect as useEffect15, useMemo as useMem
 function PanoFilter({
   preset = "none",
   intensity,
-  enabled = true
+  enabled = true,
+  colorMatrix,
+  colorMatrixScope
 }) {
   const host = useContext17(PanoFilterHostContext);
   if (!host) {
     throw new Error("<PanoFilter> must be rendered inside <PanoViewer>.");
   }
   const snapshot = useMemo9(
-    () => resolvePanoFilterSnapshot({ preset, intensity, enabled }),
-    [enabled, intensity, preset]
+    () => resolvePanoFilterSnapshot({
+      preset,
+      intensity,
+      enabled,
+      colorMatrix,
+      colorMatrixScope
+    }),
+    [enabled, intensity, preset, colorMatrix, colorMatrixScope]
   );
   useEffect15(() => {
     claimPanoFilter(host);
@@ -9666,18 +9714,10 @@ function usePanoViewer() {
   return useMemo12(() => ({ ref, ...handle }), [handle]);
 }
 
-// src/sphere.tsx
-import { useThree as useThree13 } from "@react-three/fiber";
-import { useEffect as useEffect21, useMemo as useMemo14, useRef as useRef22, useState as useState9 } from "react";
-import {
-  BackSide as BackSide2,
-  LinearFilter,
-  LinearMipmapLinearFilter,
-  MathUtils as MathUtils5,
-  RepeatWrapping,
-  SRGBColorSpace,
-  TextureLoader
-} from "three";
+// 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 { BackSide as BackSide2, Frustum, Matrix4 as Matrix42, PerspectiveCamera as PerspectiveCamera3 } from "three";
 
 // src/asset-url.ts
 function isAbsoluteAssetUrl(url) {
@@ -9702,6 +9742,10 @@ function resolveUrlAgainstFile(fileUrl, path) {
 
 // src/pano-filter/pano-basic-material.tsx
 import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo13, useRef as useRef21 } from "react";
+import {
+  Matrix4,
+  Vector4 as Vector42
+} from "three";
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -9850,212 +9894,944 @@ ${applyPanoFilterFunction(panoFilterBody(preset))}`
 diffuseColor.rgb = mix(diffuseColor.rgb, applyPanoFilter(diffuseColor.rgb), clamp(uPanoFilterIntensity, 0.0, 1.0));`
   );
 }
+function injectPanoColorMatrixShader(shader) {
+  shader.fragmentShader = shader.fragmentShader.replace(
+    "#include <common>",
+    `#include <common>
+  uniform mat4 uPanoColorMatrix;
+  uniform vec4 uPanoColorOffset;
+  uniform float uPanoColorMatrixIntensity;`
+  ).replace(
+    "#include <colorspace_fragment>",
+    `#include <colorspace_fragment>
+  gl_FragColor = mix(gl_FragColor, clamp(uPanoColorMatrix * gl_FragColor + uPanoColorOffset, 0.0, 1.0), uPanoColorMatrixIntensity);`
+  );
+}
 
 // src/pano-filter/pano-basic-material.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
+function matrixUniforms(matrix) {
+  return {
+    matrix: new Matrix4().set(
+      matrix[0],
+      matrix[1],
+      matrix[2],
+      matrix[3],
+      matrix[5],
+      matrix[6],
+      matrix[7],
+      matrix[8],
+      matrix[10],
+      matrix[11],
+      matrix[12],
+      matrix[13],
+      matrix[15],
+      matrix[16],
+      matrix[17],
+      matrix[18]
+    ),
+    offset: new Vector42(matrix[4], matrix[9], matrix[14], matrix[19])
+  };
+}
 function PanoBasicMaterial({
-  map,
-  side,
-  depthTest,
-  depthWrite,
-  toneMapped = false
+  target = "panorama",
+  ...props
 }) {
   const snapshot = usePanoFilterSnapshot();
-  const materialRef = useRef21(null);
-  const intensityRef = useRef21(snapshot.intensity);
-  const intensityUniformRef = useRef21(null);
-  intensityRef.current = snapshot.intensity;
-  const active = isPanoFilterActive(snapshot);
-  const preset = snapshot.preset;
+  const preset = snapshot.enabled && target === "panorama" ? snapshot.preset : "none";
+  const matrix = snapshot.enabled && (target === "panorama" || snapshot.colorMatrixScope === "all") ? snapshot.colorMatrix : null;
+  const hasMatrix = matrix !== null;
+  const currentRef = useRef21({ matrix, intensity: snapshot.intensity });
+  currentRef.current = { matrix, intensity: snapshot.intensity };
+  const shaderRef = useRef21(null);
   const onBeforeCompile = useMemo13(() => {
-    if (!active || preset === "none") {
-      return void 0;
-    }
     const compile = (shader) => {
-      injectPanoFilterShader(shader, preset);
-      const intensityUniform = shader.uniforms.uPanoFilterIntensity;
-      intensityUniform.value = intensityRef.current;
-      intensityUniformRef.current = intensityUniform;
-      const material = materialRef.current;
-      if (material) {
-        material.userData.uPanoFilterIntensity = intensityUniform;
+      shaderRef.current = shader;
+      if (preset !== "none") {
+        injectPanoFilterShader(shader, preset);
+        shader.uniforms.uPanoFilterIntensity.value = currentRef.current.intensity;
+      }
+      if (hasMatrix && currentRef.current.matrix) {
+        injectPanoColorMatrixShader(shader);
+        const values = matrixUniforms(currentRef.current.matrix);
+        shader.uniforms.uPanoColorMatrix = { value: values.matrix };
+        shader.uniforms.uPanoColorOffset = { value: values.offset };
+        shader.uniforms.uPanoColorMatrixIntensity = {
+          value: currentRef.current.intensity
+        };
       }
     };
-    compile.toString = () => `pano-filter:${preset}`;
+    compile.toString = () => `pano-filter:${preset}:matrix:${hasMatrix}`;
     return compile;
-  }, [active, preset]);
-  useLayoutEffect2(() => {
-    if (!active) {
-      intensityUniformRef.current = null;
-    }
-    const material = materialRef.current;
-    if (!material) {
-      return;
-    }
-    material.needsUpdate = true;
-  }, [active, preset]);
+  }, [preset, hasMatrix]);
   useLayoutEffect2(() => {
-    if (intensityUniformRef.current) {
-      intensityUniformRef.current.value = snapshot.intensity;
-    }
-  }, [snapshot.intensity]);
+    const shader = shaderRef.current;
+    if (!shader) return;
+    if (shader.uniforms.uPanoFilterIntensity)
+      shader.uniforms.uPanoFilterIntensity.value = snapshot.intensity;
+    if (shader.uniforms.uPanoColorMatrix && matrix) {
+      const values = matrixUniforms(matrix);
+      shader.uniforms.uPanoColorMatrix.value = values.matrix;
+      shader.uniforms.uPanoColorOffset.value = values.offset;
+      shader.uniforms.uPanoColorMatrixIntensity.value = snapshot.intensity;
+    }
+  }, [matrix, snapshot.intensity]);
   return /* @__PURE__ */ jsx14(
     "meshBasicMaterial",
     {
-      ref: materialRef,
-      depthTest,
-      depthWrite,
-      map,
-      onBeforeCompile,
-      side,
-      toneMapped
+      toneMapped: false,
+      ...props,
+      onBeforeCompile
     },
-    active ? preset : "none"
+    `${preset}:${hasMatrix}`
   );
 }
 
-// src/sphere.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
-  const [texture, setTexture] = useState9(null);
-  const onLoadRef = useRef22(onLoad);
-  const onErrorRef = useRef22(onError);
-  onLoadRef.current = onLoad;
-  onErrorRef.current = onError;
-  useEffect21(() => {
-    if (!url) {
-      setTexture(null);
-      return;
+// src/tile/texture-manager.ts
+import {
+  ClampToEdgeWrapping,
+  LinearFilter,
+  SRGBColorSpace,
+  TextureLoader
+} from "three";
+var EMPTY_TEXTURE_SNAPSHOT = {
+  status: "idle",
+  texture: null,
+  error: null
+};
+var TileTextureManager = class {
+  constructor(options) {
+    this.loader = new TextureLoader();
+    this.entries = /* @__PURE__ */ new Map();
+    this.queue = [];
+    this.activeLoads = 0;
+    this.totalBytes = 0;
+    this.requested = 0;
+    this.loaded = 0;
+    this.failed = 0;
+    this.disposed = false;
+    this.generation = 0;
+    this.options = options;
+  }
+  resume() {
+    this.disposed = false;
+    this.drain();
+  }
+  getSnapshot(key) {
+    const entry = this.entries.get(key);
+    return entry ? this.snapshot(entry) : EMPTY_TEXTURE_SNAPSHOT;
+  }
+  acquire(key, url, address, listener) {
+    let entry = this.entries.get(key);
+    if (!entry) {
+      entry = {
+        key,
+        url,
+        address,
+        status: "idle",
+        texture: null,
+        error: null,
+        refs: 0,
+        listeners: /* @__PURE__ */ new Set(),
+        lastUsed: performance.now(),
+        bytes: 0
+      };
+      this.entries.set(key, entry);
     }
-    let active = true;
-    const loader = new TextureLoader();
-    setTexture(null);
-    loader.load(
-      url,
-      (loadedTexture) => {
-        if (!active) {
-          loadedTexture.dispose();
-          return;
-        }
-        loadedTexture.colorSpace = SRGBColorSpace;
-        loadedTexture.wrapS = RepeatWrapping;
-        loadedTexture.repeat.x = -1;
-        loadedTexture.offset.x = 1;
-        loadedTexture.anisotropy = anisotropy;
-        loadedTexture.magFilter = LinearFilter;
-        loadedTexture.minFilter = generateMipmaps ? LinearMipmapLinearFilter : LinearFilter;
-        loadedTexture.generateMipmaps = generateMipmaps;
-        loadedTexture.needsUpdate = true;
-        setTexture(loadedTexture);
-        onLoadRef.current?.(loadedTexture);
-      },
-      void 0,
-      (error) => {
-        if (active) {
-          setTexture(null);
-          onErrorRef.current?.(error);
+    entry.refs += 1;
+    entry.lastUsed = performance.now();
+    entry.listeners.add(listener);
+    listener(this.snapshot(entry));
+    if (entry.status === "idle") {
+      entry.status = "queued";
+      this.queue.push(entry);
+      this.requested += 1;
+      this.emitProgress();
+      this.drain();
+    }
+    return () => {
+      entry.listeners.delete(listener);
+      entry.refs = Math.max(0, entry.refs - 1);
+      entry.lastUsed = performance.now();
+      if (entry.refs === 0 && entry.status === "queued") {
+        const queueIndex = this.queue.indexOf(entry);
+        if (queueIndex >= 0) {
+          this.queue.splice(queueIndex, 1);
         }
+        entry.status = "idle";
+        this.entries.delete(entry.key);
+        this.requested = Math.max(0, this.requested - 1);
+        this.emitProgress();
+        this.drain();
+        return;
       }
-    );
-    return () => {
-      active = false;
+      this.evict();
     };
-  }, [anisotropy, generateMipmaps, url]);
-  useEffect21(
-    () => () => {
-      texture?.dispose();
-    },
-    [texture]
-  );
-  return texture;
-}
-function Sphere({
-  src,
-  previewUrl,
-  yawOffset = 0,
-  onReady,
-  onLoad,
-  onError,
-  onPreviewError,
-  visible = true
-}) {
-  const gl = useThree13((state) => state.gl);
-  const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = useMemo14(
-    () => resolveUrlAgainstFile(src, previewUrl),
-    [previewUrl, src]
-  );
-  const texture = useEquirectTexture(
-    src,
-    anisotropy,
-    true,
-    onLoad,
-    onError
-  );
-  const previewTexture = useEquirectTexture(
-    texture ? null : resolvedPreviewUrl,
-    anisotropy,
-    false,
-    void 0,
-    onPreviewError
-  );
-  const displayTexture = texture ?? previewTexture;
-  const readyRef = useRef22(false);
-  useEffect21(() => {
-    readyRef.current = false;
-  }, [resolvedPreviewUrl, src]);
-  useEffect21(() => {
-    if (!displayTexture || readyRef.current) {
-      return;
+  }
+  dispose() {
+    this.disposed = true;
+    this.generation += 1;
+    this.queue.length = 0;
+    for (const entry of this.entries.values()) {
+      entry.texture?.dispose();
+      entry.listeners.clear();
     }
-    readyRef.current = true;
-    onReady?.();
-  }, [displayTexture, onReady]);
-  if (!displayTexture) {
-    return null;
+    this.entries.clear();
+    this.totalBytes = 0;
   }
-  return /* @__PURE__ */ jsxs9(
-    "mesh",
-    {
-      rotation: [0, MathUtils5.degToRad(90 + yawOffset), 0],
-      visible,
-      children: [
-        /* @__PURE__ */ jsx15("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx15(
-          PanoBasicMaterial,
-          {
-            map: displayTexture,
-            side: BackSide2,
-            toneMapped: false
-          }
-        )
-      ]
+  /**
+   * Releases textures that are no longer rendered by any Tile instance.
+   * Scene transitions call this after the outgoing panorama has been
+   * snapshotted, so the incoming scene never competes with stale GPU tiles.
+   */
+  releaseUnused() {
+    for (const entry of Array.from(this.entries.values())) {
+      if (entry.refs > 0) {
+        continue;
+      }
+      entry.texture?.dispose();
+      this.totalBytes -= entry.bytes;
+      this.entries.delete(entry.key);
     }
-  );
+    this.totalBytes = Math.max(0, this.totalBytes);
+  }
+  snapshot(entry) {
+    return {
+      status: entry.status,
+      texture: entry.texture,
+      error: entry.error
+    };
+  }
+  notify(entry) {
+    const snapshot = this.snapshot(entry);
+    for (const listener of entry.listeners) {
+      listener(snapshot);
+    }
+  }
+  emitProgress() {
+    this.options.onProgress?.({
+      requested: this.requested,
+      loaded: this.loaded,
+      failed: this.failed,
+      active: this.activeLoads,
+      queued: this.queue.length
+    });
+  }
+  drain() {
+    while (!this.disposed && this.activeLoads < this.options.concurrency && this.queue.length > 0) {
+      const entry = this.queue.shift();
+      if (entry.refs === 0) {
+        entry.status = "idle";
+        this.entries.delete(entry.key);
+        this.requested = Math.max(0, this.requested - 1);
+        continue;
+      }
+      entry.status = "loading";
+      this.activeLoads += 1;
+      this.notify(entry);
+      this.emitProgress();
+      void this.loadAndFinish(entry);
+    }
+  }
+  async load(entry, generation) {
+    let lastError = null;
+    for (let attempt = 0; attempt <= this.options.retryCount; attempt += 1) {
+      if (this.disposed || generation !== this.generation) return;
+      try {
+        const texture = await this.loader.loadAsync(entry.url);
+        if (this.disposed || generation !== this.generation) {
+          texture.dispose();
+          return;
+        }
+        this.configureTexture(texture);
+        entry.texture = texture;
+        entry.status = "loaded";
+        entry.error = null;
+        entry.bytes = entry.address.width * entry.address.height * 4;
+        entry.lastUsed = performance.now();
+        this.totalBytes += entry.bytes;
+        this.loaded += 1;
+        this.notify(entry);
+        return;
+      } catch (error) {
+        lastError = error;
+      }
+    }
+    if (!this.disposed && generation === this.generation) {
+      entry.status = "error";
+      entry.error = lastError;
+      this.failed += 1;
+      this.notify(entry);
+      this.options.onError?.({
+        address: entry.address,
+        url: entry.url,
+        error: lastError
+      });
+    }
+  }
+  configureTexture(texture) {
+    texture.colorSpace = SRGBColorSpace;
+    texture.wrapS = ClampToEdgeWrapping;
+    texture.wrapT = ClampToEdgeWrapping;
+    texture.magFilter = LinearFilter;
+    texture.minFilter = LinearFilter;
+    texture.generateMipmaps = false;
+    texture.anisotropy = Math.min(4, this.options.anisotropy);
+    texture.needsUpdate = true;
+  }
+  evict() {
+    if (this.totalBytes <= this.options.maxBytes) {
+      return;
+    }
+    const candidates = Array.from(this.entries.values()).filter((entry) => entry.refs === 0 && entry.texture).sort((a, b) => a.lastUsed - b.lastUsed);
+    for (const entry of candidates) {
+      if (this.totalBytes <= this.options.maxBytes) {
+        break;
+      }
+      entry.texture?.dispose();
+      this.totalBytes -= entry.bytes;
+      this.entries.delete(entry.key);
+    }
+    this.totalBytes = Math.max(0, this.totalBytes);
+  }
+  finishLoad(generation) {
+    this.activeLoads = Math.max(0, this.activeLoads - 1);
+    if (!this.disposed && generation === this.generation) {
+      this.emitProgress();
+      this.evict();
+    }
+    if (!this.disposed) {
+      this.drain();
+    }
+  }
+  async loadAndFinish(entry) {
+    const generation = this.generation;
+    try {
+      await this.load(entry, generation);
+    } finally {
+      this.finishLoad(generation);
+    }
+  }
+};
+
+// src/tile/texture-hooks.ts
+import { useEffect as useEffect21, useRef as useRef22, useState as useState9 } from "react";
+import {
+  ClampToEdgeWrapping as ClampToEdgeWrapping2,
+  LinearFilter as LinearFilter2,
+  SRGBColorSpace as SRGBColorSpace2,
+  TextureLoader as TextureLoader2
+} from "three";
+function usePreviewTexture(url, anisotropy, onError) {
+  const [texture, setTexture] = useState9(null);
+  const onErrorRef = useRef22(onError);
+  onErrorRef.current = onError;
+  useEffect21(() => {
+    if (!url) {
+      setTexture(null);
+      return;
+    }
+    let active = true;
+    const loader = new TextureLoader2();
+    setTexture(null);
+    loader.load(
+      url,
+      (loadedTexture) => {
+        if (!active) {
+          loadedTexture.dispose();
+          return;
+        }
+        loadedTexture.colorSpace = SRGBColorSpace2;
+        loadedTexture.wrapS = ClampToEdgeWrapping2;
+        loadedTexture.wrapT = ClampToEdgeWrapping2;
+        loadedTexture.magFilter = LinearFilter2;
+        loadedTexture.minFilter = LinearFilter2;
+        loadedTexture.generateMipmaps = false;
+        loadedTexture.anisotropy = Math.min(4, anisotropy);
+        loadedTexture.needsUpdate = true;
+        setTexture(loadedTexture);
+      },
+      void 0,
+      (error) => {
+        if (active) {
+          setTexture(null);
+          onErrorRef.current?.(error);
+        }
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [anisotropy, url]);
+  useEffect21(
+    () => () => {
+      texture?.dispose();
+    },
+    [texture]
+  );
+  return texture;
+}
+function useManagedTexture(manager, key, url, address) {
+  const [managedState, setManagedState] = useState9(() => ({
+    manager,
+    key,
+    url,
+    snapshot: manager.getSnapshot(key)
+  }));
+  const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
+  useEffect21(
+    () => manager.acquire(key, url, address, (nextSnapshot) => {
+      setManagedState({
+        manager,
+        key,
+        url,
+        snapshot: nextSnapshot
+      });
+    }),
+    [key, manager, url]
+  );
+  return snapshot;
 }
 
-// src/video/pano-video.tsx
+// src/sphere-tile/layout.ts
+import {
+  Box3,
+  BufferGeometry,
+  Float32BufferAttribute,
+  MathUtils as MathUtils5,
+  Vector3 as Vector38
+} from "three";
+function positiveInteger(value, name) {
+  if (!Number.isSafeInteger(value) || value <= 0) {
+    throw new Error(`${name} must be a positive safe integer`);
+  }
+  return value;
+}
+function parseSphereMultires(input) {
+  const parts = typeof input === "string" ? input.split(",").map((part) => part.trim()) : null;
+  const tileSize = positiveInteger(
+    parts ? Number(parts[0]) : input.tileSize,
+    "tileSize"
+  );
+  const levels = parts ? parts.slice(1).map((part) => {
+    const match = /^(\d+)\s*x\s*(\d+)$/i.exec(part);
+    if (!match)
+      throw new Error("sphere multires levels must use widthxheight");
+    return { width: Number(match[1]), height: Number(match[2]) };
+  }) : input.levels.map((level) => ({ ...level }));
+  if (levels.length === 0)
+    throw new Error("sphere multires needs at least one level");
+  levels.forEach((level, index) => {
+    positiveInteger(level.width, "level width");
+    positiveInteger(level.height, "level height");
+    if (Math.abs(level.width - level.height * 2) > 2)
+      throw new Error("sphere levels must be full 2:1 equirectangular images");
+    const previous = levels[index - 1];
+    if (previous && (level.width <= previous.width || level.height <= previous.height)) {
+      throw new Error("sphere multires dimensions must be strictly ascending");
+    }
+  });
+  return { tileSize, levels };
+}
+function resolveSphereTemplateUrl(template, address, indexBase = 1) {
+  return template.replace(/%l/g, String(address.level + indexBase)).replace(
+    /%(0*)([hxucvywr])/g,
+    (_match, zeroes, placeholder) => String(
+      ("hxuc".includes(placeholder) ? address.col : address.row) + indexBase
+    ).padStart(zeroes.length + 1, "0")
+  );
+}
+function sphereTileKey(address) {
+  return `${address.level}/${address.row}/${address.col}`;
+}
+function sphereTileAddresses(size, level, tileSize) {
+  const addresses = [];
+  for (let row = 0; row < Math.ceil(size.height / tileSize); row++) {
+    for (let col = 0; col < Math.ceil(size.width / tileSize); col++) {
+      addresses.push({
+        level,
+        col,
+        row,
+        imageWidth: size.width,
+        imageHeight: size.height,
+        tileSize,
+        width: Math.min(tileSize, size.width - col * tileSize),
+        height: Math.min(tileSize, size.height - row * tileSize)
+      });
+    }
+  }
+  return addresses;
+}
+function sphereTileRange(address) {
+  return {
+    left: address.col * address.tileSize / address.imageWidth,
+    right: (address.col * address.tileSize + address.width) / address.imageWidth,
+    top: address.row * address.tileSize / address.imageHeight,
+    bottom: (address.row * address.tileSize + address.height) / address.imageHeight
+  };
+}
+function spherePoint(u, v, yawOffset = 0, radius = DEFAULT_PANORAMA_RADIUS) {
+  const yaw = (u - 0.5) * Math.PI * 2 + MathUtils5.degToRad(yawOffset);
+  const pitch = (0.5 - v) * Math.PI;
+  return new Vector38(
+    Math.sin(yaw) * Math.cos(pitch) * radius,
+    Math.sin(pitch) * radius,
+    -Math.cos(yaw) * Math.cos(pitch) * radius
+  );
+}
+function sphereTileBounds(address, yawOffset) {
+  const { left, right, top, bottom } = sphereTileRange(address);
+  const us = [left, right];
+  for (let i = -4; i <= 8; i++) {
+    const u = 0.5 + (i * 90 - yawOffset % 360) / 360;
+    if (u > left && u < right) us.push(u);
+  }
+  const vs = top < 0.5 && bottom > 0.5 ? [top, 0.5, bottom] : [top, bottom];
+  return new Box3().setFromPoints(
+    us.flatMap((u) => vs.map((v) => spherePoint(u, v, yawOffset)))
+  );
+}
+function sphereTileGeometry(address, yawOffset, radius = DEFAULT_PANORAMA_RADIUS) {
+  const { left, right, top, bottom } = sphereTileRange(address);
+  const columns = Math.max(2, Math.ceil((right - left) * 360 / 3));
+  const rows = Math.max(2, Math.ceil((bottom - top) * 180 / 3));
+  const positions = [], uvs = [], indices = [];
+  for (let row = 0; row <= rows; row++) {
+    for (let col = 0; col <= columns; col++) {
+      const u = col / columns, v = row / rows;
+      const point = spherePoint(
+        left + (right - left) * u,
+        top + (bottom - top) * v,
+        yawOffset,
+        radius
+      );
+      positions.push(point.x, point.y, point.z);
+      uvs.push(u, 1 - v);
+      if (row < rows && col < columns) {
+        const a = row * (columns + 1) + col, b = a + 1, c = a + columns + 1, d = c + 1;
+        indices.push(a, b, c, b, d, c);
+      }
+    }
+  }
+  const geometry = new BufferGeometry();
+  geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+  geometry.setAttribute("uv", new Float32BufferAttribute(uvs, 2));
+  geometry.setIndex(indices);
+  geometry.computeBoundingSphere();
+  return geometry;
+}
+function preferredSphereLevel(levels, height, dpr, verticalFov) {
+  const needed = height * dpr * 180 / Math.max(1, verticalFov);
+  const index = levels.findIndex((level) => level.height >= needed);
+  return index < 0 ? levels.length - 1 : index;
+}
+
+// src/sphere-tile/sphere-tile.tsx
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function SpherePatch({
+  address,
+  texture,
+  yawOffset,
+  preview = false
+}) {
+  const geometry = useMemo14(
+    () => sphereTileGeometry(
+      address,
+      yawOffset,
+      DEFAULT_PANORAMA_RADIUS + (preview ? 0.05 : 0)
+    ),
+    [address, yawOffset, preview]
+  );
+  useEffect22(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ jsx15(
+    "mesh",
+    {
+      geometry,
+      renderOrder: preview ? -1e3 : -900 + address.level,
+      children: /* @__PURE__ */ jsx15(
+        PanoBasicMaterial,
+        {
+          map: texture,
+          side: BackSide2,
+          depthTest: false,
+          depthWrite: false,
+          toneMapped: false
+        }
+      )
+    }
+  );
+}
+var ManagedPatch = memo(function ManagedPatch2({
+  address,
+  manager,
+  resolveUrl,
+  yawOffset,
+  ready
+}) {
+  const url = resolveUrl(address);
+  const snapshot = useManagedTexture(
+    manager,
+    `${url}\0${sphereTileKey(address)}`,
+    url,
+    address
+  );
+  useEffect22(() => {
+    if (snapshot.texture) ready();
+  }, [snapshot.texture, ready]);
+  return snapshot.texture ? /* @__PURE__ */ jsx15(
+    SpherePatch,
+    {
+      address,
+      texture: snapshot.texture,
+      yawOffset
+    }
+  ) : null;
+});
+function SphereTileSource({
+  config,
+  baseUrl,
+  previewUrl,
+  urlTemplate = "tiles/%l/%h_%v.webp",
+  indexBase = 1,
+  resolveTileUrl,
+  yawOffset = 0,
+  maxTextureMemoryMb = 128,
+  maxConcurrentLoads = 4,
+  retryCount = 1,
+  loadMode = "full",
+  visible = true,
+  onReady,
+  onPreviewError,
+  onLoadProgress,
+  onTileError,
+  onLevelChange
+}) {
+  const { camera, gl, size } = useThree13();
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const preview = usePreviewTexture(
+    resolveAssetUrl(baseUrl, previewUrl),
+    anisotropy,
+    onPreviewError
+  );
+  const callbacks = useRef23({
+    onReady,
+    onLoadProgress,
+    onTileError,
+    onLevelChange
+  });
+  callbacks.current = { onReady, onLoadProgress, onTileError, onLevelChange };
+  const budget = Math.max(
+    1,
+    Number.isFinite(maxTextureMemoryMb) ? maxTextureMemoryMb : 128
+  ) * 1024 * 1024;
+  const manager = useMemo14(
+    () => new TileTextureManager({
+      anisotropy,
+      maxBytes: budget,
+      concurrency: Math.max(
+        1,
+        Math.floor(
+          Number.isFinite(maxConcurrentLoads) ? maxConcurrentLoads : 4
+        )
+      ),
+      retryCount: Math.max(
+        0,
+        Math.floor(Number.isFinite(retryCount) ? retryCount : 1)
+      ),
+      onProgress: (progress) => callbacks.current.onLoadProgress?.(progress),
+      onError: (error) => callbacks.current.onTileError?.(error)
+    }),
+    [anisotropy, budget, maxConcurrentLoads, retryCount]
+  );
+  const readyRef = useRef23(false);
+  const ready = useCallback9(() => {
+    if (!readyRef.current) {
+      readyRef.current = true;
+      callbacks.current.onReady?.();
+    }
+  }, []);
+  useEffect22(() => {
+    if (preview) ready();
+  }, [preview, ready]);
+  useEffect22(() => {
+    manager.resume();
+    return () => manager.dispose();
+  }, [manager]);
+  const resolveUrl = useMemo14(
+    () => (address) => resolveAssetUrl(
+      baseUrl,
+      resolveTileUrl ? resolveTileUrl(address) : resolveSphereTemplateUrl(urlTemplate, address, indexBase)
+    ),
+    [baseUrl, resolveTileUrl, urlTemplate, indexBase]
+  );
+  const candidates = useMemo14(
+    () => config.levels.map(
+      (level, index) => sphereTileAddresses(level, index, config.tileSize).map((address) => ({
+        address,
+        bounds: sphereTileBounds(address, yawOffset)
+      }))
+    ),
+    [config, yawOffset]
+  );
+  const previewAddress = useMemo14(
+    () => sphereTileAddresses({ width: 2, height: 1 }, 0, 2)[0],
+    []
+  );
+  const [layers, setLayers] = useState10([]);
+  const scratch = useMemo14(
+    () => ({
+      camera: new PerspectiveCamera3(),
+      frustum: new Frustum(),
+      matrix: new Matrix42(),
+      quaternion: camera.quaternion.clone(),
+      fov: NaN,
+      width: 0,
+      height: 0,
+      dpr: 0,
+      time: -Infinity,
+      token: "",
+      level: -1,
+      loadMode: "",
+      manager: null
+    }),
+    [camera, candidates]
+  );
+  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
+      );
+      if (residentBytes + bytes > budget) {
+        level = index - 1;
+        break;
+      }
+      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);
+    }
+  });
+  return /* @__PURE__ */ jsxs9("group", { visible, children: [
+    preview ? /* @__PURE__ */ jsx15(
+      SpherePatch,
+      {
+        address: previewAddress,
+        texture: preview,
+        yawOffset,
+        preview: true
+      }
+    ) : null,
+    loadMode !== "preview" ? layers.flatMap(
+      (layer) => layer.addresses.map((address) => /* @__PURE__ */ jsx15(
+        ManagedPatch,
+        {
+          address,
+          manager,
+          resolveUrl,
+          yawOffset,
+          ready
+        },
+        sphereTileKey(address)
+      ))
+    ) : null
+  ] });
+}
+function SphereTile({ multires, ...props }) {
+  const token = typeof multires === "string" ? multires : JSON.stringify(multires);
+  const config = useMemo14(() => 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);
+}
+
+// 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 {
+  BackSide as BackSide3,
+  LinearFilter as LinearFilter3,
+  LinearMipmapLinearFilter,
+  MathUtils as MathUtils6,
+  RepeatWrapping,
+  SRGBColorSpace as SRGBColorSpace3,
+  TextureLoader as TextureLoader3
+} from "three";
+import { jsx as jsx16, 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(() => {
+    if (!url) {
+      setTexture(null);
+      return;
+    }
+    let active = true;
+    const loader = new TextureLoader3();
+    setTexture(null);
+    loader.load(
+      url,
+      (loadedTexture) => {
+        if (!active) {
+          loadedTexture.dispose();
+          return;
+        }
+        loadedTexture.colorSpace = SRGBColorSpace3;
+        loadedTexture.wrapS = RepeatWrapping;
+        loadedTexture.repeat.x = -1;
+        loadedTexture.offset.x = 1;
+        loadedTexture.anisotropy = anisotropy;
+        loadedTexture.magFilter = LinearFilter3;
+        loadedTexture.minFilter = generateMipmaps ? LinearMipmapLinearFilter : LinearFilter3;
+        loadedTexture.generateMipmaps = generateMipmaps;
+        loadedTexture.needsUpdate = true;
+        setTexture(loadedTexture);
+        onLoadRef.current?.(loadedTexture);
+      },
+      void 0,
+      (error) => {
+        if (active) {
+          setTexture(null);
+          onErrorRef.current?.(error);
+        }
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [anisotropy, generateMipmaps, url]);
+  useEffect23(
+    () => () => {
+      texture?.dispose();
+    },
+    [texture]
+  );
+  return texture;
+}
+function Sphere({
+  src,
+  previewUrl,
+  yawOffset = 0,
+  onReady,
+  onLoad,
+  onError,
+  onPreviewError,
+  visible = true
+}) {
+  const gl = useThree14((state) => state.gl);
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const resolvedPreviewUrl = useMemo15(
+    () => resolveUrlAgainstFile(src, previewUrl),
+    [previewUrl, src]
+  );
+  const texture = useEquirectTexture(
+    src,
+    anisotropy,
+    true,
+    onLoad,
+    onError
+  );
+  const previewTexture = useEquirectTexture(
+    texture ? null : resolvedPreviewUrl,
+    anisotropy,
+    false,
+    void 0,
+    onPreviewError
+  );
+  const displayTexture = texture ?? previewTexture;
+  const readyRef = useRef24(false);
+  useEffect23(() => {
+    readyRef.current = false;
+  }, [resolvedPreviewUrl, src]);
+  useEffect23(() => {
+    if (!displayTexture || readyRef.current) {
+      return;
+    }
+    readyRef.current = true;
+    onReady?.();
+  }, [displayTexture, onReady]);
+  if (!displayTexture) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs10(
+    "mesh",
+    {
+      rotation: [0, MathUtils6.degToRad(90 + yawOffset), 0],
+      visible,
+      children: [
+        /* @__PURE__ */ jsx16("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx16(
+          PanoBasicMaterial,
+          {
+            map: displayTexture,
+            side: BackSide3,
+            toneMapped: false
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/video/pano-video.tsx
+import { useThree as useThree15 } from "@react-three/fiber";
 import {
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext21,
-  useEffect as useEffect22,
+  useEffect as useEffect24,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo15,
-  useRef as useRef23,
-  useState as useState10
+  useMemo as useMemo16,
+  useRef as useRef25,
+  useState as useState12
 } from "react";
 import {
-  BackSide as BackSide3,
-  LinearFilter as LinearFilter2,
+  BackSide as BackSide4,
+  LinearFilter as LinearFilter4,
   LinearMipmapLinearFilter as LinearMipmapLinearFilter2,
-  MathUtils as MathUtils6,
+  MathUtils as MathUtils7,
   RepeatWrapping as RepeatWrapping2,
-  SRGBColorSpace as SRGBColorSpace2,
-  TextureLoader as TextureLoader2,
+  SRGBColorSpace as SRGBColorSpace4,
+  TextureLoader as TextureLoader4,
   VideoTexture
 } from "three";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -10131,7 +10907,7 @@ function findTextTrack(video, tracks, trackId) {
   return list.length > 0 ? list[0] : null;
 }
 function applyEquirectangularLayout(texture, anisotropy) {
-  texture.colorSpace = SRGBColorSpace2;
+  texture.colorSpace = SRGBColorSpace4;
   texture.wrapS = RepeatWrapping2;
   texture.repeat.x = -1;
   texture.offset.x = 1;
@@ -10139,11 +10915,11 @@ function applyEquirectangularLayout(texture, anisotropy) {
   texture.needsUpdate = true;
 }
 function usePosterTexture(poster, onError) {
-  const gl = useThree14((state) => state.gl);
-  const [texture, setTexture] = useState10(null);
-  const onErrorRef = useRef23(onError);
+  const gl = useThree15((state) => state.gl);
+  const [texture, setTexture] = useState12(null);
+  const onErrorRef = useRef25(onError);
   onErrorRef.current = onError;
-  useEffect22(() => {
+  useEffect24(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -10151,7 +10927,7 @@ function usePosterTexture(poster, onError) {
         active = false;
       };
     }
-    const loader = new TextureLoader2();
+    const loader = new TextureLoader4();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -10164,7 +10940,7 @@ function usePosterTexture(poster, onError) {
           gl.capabilities.getMaxAnisotropy()
         );
         loadedTexture.wrapT = RepeatWrapping2;
-        loadedTexture.magFilter = LinearFilter2;
+        loadedTexture.magFilter = LinearFilter4;
         loadedTexture.minFilter = LinearMipmapLinearFilter2;
         loadedTexture.generateMipmaps = true;
         setTexture(loadedTexture);
@@ -10180,7 +10956,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  useEffect22(
+  useEffect24(
     () => () => {
       texture?.dispose();
     },
@@ -10238,39 +11014,39 @@ function PanoVideo({
   onTrackChange
 }) {
   usePanoMediaActivationIntent(autoPlay);
-  const gl = useThree14((state) => state.gl);
+  const gl = useThree15((state) => state.gl);
   const host = useContext21(PanoVideoHostContext);
   const overlay = useContext21(PanoChromeOverlayContext);
-  const variants = useMemo15(
+  const variants = useMemo16(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = useMemo15(
+  const captionAppearance = useMemo16(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = useState10(
+  const [variantId, setVariantId] = useState12(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = useState10(
+  const [trackId, setTrackId] = useState12(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = useState10(false);
-  const autoPlayRef = useRef23(autoPlay);
+  const [ready, setReady] = useState12(false);
+  const autoPlayRef = useRef25(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = useRef23(false);
-  const captionAppearanceOverrideRef = useRef23(
+  const blockedRef = useRef25(false);
+  const captionAppearanceOverrideRef = useRef25(
     {}
   );
-  const mediaCapabilitiesRef = useRef23({
+  const mediaCapabilitiesRef = useRef25({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = useRef23(null);
+  const storeRef = useRef25(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -10280,7 +11056,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = useRef23({
+  const actionsRef = useRef25({
     play: async () => {
     },
     pause: () => {
@@ -10300,19 +11076,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = useRef23(onLoad);
-  const onErrorRef = useRef23(onError);
-  const onPlaybackStateChangeRef = useRef23(onPlaybackStateChange);
-  const onEndedRef = useRef23(onEnded);
-  const onVariantChangeRef = useRef23(onVariantChange);
-  const onTrackChangeRef = useRef23(onTrackChange);
+  const onLoadRef = useRef25(onLoad);
+  const onErrorRef = useRef25(onError);
+  const onPlaybackStateChangeRef = useRef25(onPlaybackStateChange);
+  const onEndedRef = useRef25(onEnded);
+  const onVariantChangeRef = useRef25(onVariantChange);
+  const onTrackChangeRef = useRef25(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = useMemo15(() => {
+  const resource = useMemo16(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10324,12 +11100,12 @@ function PanoVideo({
     video.preload = "metadata";
     const texture = new VideoTexture(video);
     applyEquirectangularLayout(texture, 1);
-    texture.magFilter = LinearFilter2;
-    texture.minFilter = LinearFilter2;
+    texture.magFilter = LinearFilter4;
+    texture.minFilter = LinearFilter4;
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  useEffect22(
+  useEffect24(
     () => () => {
       if (!resource) {
         return;
@@ -10344,13 +11120,13 @@ function PanoVideo({
     },
     [resource]
   );
-  useEffect22(() => {
+  useEffect24(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -10373,7 +11149,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = useCallback9(
+  const emitSnapshot = useCallback10(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -10425,7 +11201,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = useMemo15(
+  const controller = useMemo16(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -10503,10 +11279,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  useEffect22(() => {
+  useEffect24(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -10563,7 +11339,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (!resource) {
       return;
     }
@@ -10574,8 +11350,10 @@ function PanoVideo({
         try {
           await video.play();
         } catch (error) {
-          blockedRef.current = true;
-          onPlaybackStateChangeRef.current?.("blocked");
+          if (isAutoplayPolicyError(error)) {
+            blockedRef.current = true;
+            onPlaybackStateChangeRef.current?.("blocked");
+          }
           onErrorRef.current?.({ source: "video", error });
           emitSnapshot();
         }
@@ -10653,7 +11431,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (!resource) {
       return;
     }
@@ -10673,7 +11451,7 @@ function PanoVideo({
     }
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (!resource) {
       return;
     }
@@ -10723,7 +11501,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (!resource) {
       return;
     }
@@ -10758,7 +11536,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -10769,39 +11547,39 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
-    activeTexture ? /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    activeTexture ? /* @__PURE__ */ jsxs11(
       "mesh",
       {
-        rotation: [0, MathUtils6.degToRad(90 + yawOffset), 0],
+        rotation: [0, MathUtils7.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: activeTexture,
-              side: BackSide3,
+              side: BackSide4,
               toneMapped: false
             }
           )
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx16(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ jsx17(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
 // src/scenes.tsx
-import { useFrame as useFrame12, useThree as useThree19 } from "@react-three/fiber";
+import { useFrame as useFrame13, useThree as useThree20 } from "@react-three/fiber";
 import {
   Fragment as Fragment6,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext23,
-  useEffect as useEffect27,
-  useMemo as useMemo20,
-  useRef as useRef27,
-  useState as useState12
+  useEffect as useEffect29,
+  useMemo as useMemo21,
+  useRef as useRef29,
+  useState as useState14
 } from "react";
 import {
   LinearSRGBColorSpace,
@@ -10856,8 +11634,8 @@ function isSnapshotTransition(preset) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-import { useFrame as useFrame9, useThree as useThree15 } from "@react-three/fiber";
-import { useEffect as useEffect23, useMemo as useMemo16, useRef as useRef24 } from "react";
+import { useFrame as useFrame10, useThree as useThree16 } from "@react-three/fiber";
+import { useEffect as useEffect25, useMemo as useMemo17, useRef as useRef26 } from "react";
 import {
   DoubleSide as DoubleSide2,
   InstancedBufferAttribute,
@@ -10865,7 +11643,7 @@ import {
   PlaneGeometry as PlaneGeometry3,
   ShaderMaterial as ShaderMaterial2,
   Vector2 as Vector24,
-  Vector3 as Vector39
+  Vector3 as Vector310
 } from "three";
 
 // src/scene-transitions/glsl.ts
@@ -10920,7 +11698,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -10996,13 +11774,13 @@ function ParticleOverlay({
   runId,
   onFinish
 }) {
-  const { camera } = useThree15();
-  const meshRef = useRef24(null);
-  const startRef = useRef24(null);
-  const finishedRef = useRef24(false);
-  const directionRef = useRef24(new Vector39());
-  const geometry = useMemo16(() => createParticleGeometry(), []);
-  const material = useMemo16(
+  const { camera } = useThree16();
+  const meshRef = useRef26(null);
+  const startRef = useRef26(null);
+  const finishedRef = useRef26(false);
+  const directionRef = useRef26(new Vector310());
+  const geometry = useMemo17(() => createParticleGeometry(), []);
+  const material = useMemo17(
     () => new ShaderMaterial2({
       transparent: true,
       depthTest: false,
@@ -11018,14 +11796,14 @@ function ParticleOverlay({
     }),
     [snapshot.texture]
   );
-  useEffect23(() => () => geometry.dispose(), [geometry]);
-  useEffect23(() => () => material.dispose(), [material]);
-  useEffect23(() => {
+  useEffect25(() => () => geometry.dispose(), [geometry]);
+  useEffect25(() => () => material.dispose(), [material]);
+  useEffect25(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
   }, [material, runId]);
-  useFrame9((state) => {
+  useFrame10((state) => {
     const mesh = meshRef.current;
     if (!mesh || !isPerspectiveCamera(camera)) {
       return;
@@ -11042,7 +11820,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "mesh",
     {
       ref: meshRef,
@@ -11055,9 +11833,9 @@ function ParticleOverlay({
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-import { useFrame as useFrame10, useThree as useThree16 } from "@react-three/fiber";
-import { useEffect as useEffect24, useMemo as useMemo17, useRef as useRef25 } from "react";
-import { Vector3 as Vector310 } from "three";
+import { useFrame as useFrame11, useThree as useThree17 } from "@react-three/fiber";
+import { useEffect as useEffect26, useMemo as useMemo18, 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";
@@ -11336,7 +12114,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -11344,26 +12122,26 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, gl } = useThree16();
-  const meshRef = useRef25(null);
-  const startRef = useRef25(null);
-  const finishedRef = useRef25(false);
-  const directionRef = useRef25(new Vector310());
-  const material = useMemo17(() => {
+  const { camera, gl } = useThree17();
+  const meshRef = useRef27(null);
+  const startRef = useRef27(null);
+  const finishedRef = useRef27(false);
+  const directionRef = useRef27(new Vector311());
+  const material = useMemo18(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  useEffect24(() => () => material?.dispose(), [material]);
-  useEffect24(() => {
+  useEffect26(() => () => material?.dispose(), [material]);
+  useEffect26(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
       material.uniforms.progress.value = 0;
     }
   }, [material, runId]);
-  useFrame10((state) => {
+  useFrame11((state) => {
     const mesh = meshRef.current;
     if (!mesh || !material || !isPerspectiveCamera(camera)) {
       return;
@@ -11385,21 +12163,21 @@ function SnapshotOverlay({
   if (!material) {
     return null;
   }
-  return /* @__PURE__ */ jsxs11("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx18("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx18("primitive", { attach: "material", object: material })
+  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 })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ jsx19(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ jsx20(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -11427,7 +12205,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ jsx19(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ jsx20(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -11437,242 +12215,14 @@ function TransitionOverlay(props) {
 }
 
 // src/tile/texture-manager-context.tsx
-import { useThree as useThree17 } from "@react-three/fiber";
+import { useThree as useThree18 } from "@react-three/fiber";
 import {
   createContext as createContext15,
   useContext as useContext22,
-  useEffect as useEffect25,
-  useMemo as useMemo18
+  useEffect as useEffect27,
+  useMemo as useMemo19
 } from "react";
-
-// src/tile/texture-manager.ts
-import {
-  ClampToEdgeWrapping,
-  LinearFilter as LinearFilter3,
-  SRGBColorSpace as SRGBColorSpace3,
-  TextureLoader as TextureLoader3
-} from "three";
-var EMPTY_TEXTURE_SNAPSHOT = {
-  status: "idle",
-  texture: null,
-  error: null
-};
-var TileTextureManager = class {
-  constructor(options) {
-    this.loader = new TextureLoader3();
-    this.entries = /* @__PURE__ */ new Map();
-    this.queue = [];
-    this.activeLoads = 0;
-    this.totalBytes = 0;
-    this.requested = 0;
-    this.loaded = 0;
-    this.failed = 0;
-    this.disposed = false;
-    this.generation = 0;
-    this.options = options;
-  }
-  resume() {
-    this.disposed = false;
-    this.drain();
-  }
-  getSnapshot(key) {
-    const entry = this.entries.get(key);
-    return entry ? this.snapshot(entry) : EMPTY_TEXTURE_SNAPSHOT;
-  }
-  acquire(key, url, address, listener) {
-    let entry = this.entries.get(key);
-    if (!entry) {
-      entry = {
-        key,
-        url,
-        address,
-        status: "idle",
-        texture: null,
-        error: null,
-        refs: 0,
-        listeners: /* @__PURE__ */ new Set(),
-        lastUsed: performance.now(),
-        bytes: 0
-      };
-      this.entries.set(key, entry);
-    }
-    entry.refs += 1;
-    entry.lastUsed = performance.now();
-    entry.listeners.add(listener);
-    listener(this.snapshot(entry));
-    if (entry.status === "idle") {
-      entry.status = "queued";
-      this.queue.push(entry);
-      this.requested += 1;
-      this.emitProgress();
-      this.drain();
-    }
-    return () => {
-      entry.listeners.delete(listener);
-      entry.refs = Math.max(0, entry.refs - 1);
-      entry.lastUsed = performance.now();
-      if (entry.refs === 0 && entry.status === "queued") {
-        const queueIndex = this.queue.indexOf(entry);
-        if (queueIndex >= 0) {
-          this.queue.splice(queueIndex, 1);
-        }
-        entry.status = "idle";
-        this.entries.delete(entry.key);
-        this.requested = Math.max(0, this.requested - 1);
-        this.emitProgress();
-        this.drain();
-        return;
-      }
-      this.evict();
-    };
-  }
-  dispose() {
-    this.disposed = true;
-    this.generation += 1;
-    this.queue.length = 0;
-    for (const entry of this.entries.values()) {
-      entry.texture?.dispose();
-      entry.listeners.clear();
-    }
-    this.entries.clear();
-    this.totalBytes = 0;
-  }
-  /**
-   * Releases textures that are no longer rendered by any Tile instance.
-   * Scene transitions call this after the outgoing panorama has been
-   * snapshotted, so the incoming scene never competes with stale GPU tiles.
-   */
-  releaseUnused() {
-    for (const entry of Array.from(this.entries.values())) {
-      if (entry.refs > 0) {
-        continue;
-      }
-      entry.texture?.dispose();
-      this.totalBytes -= entry.bytes;
-      this.entries.delete(entry.key);
-    }
-    this.totalBytes = Math.max(0, this.totalBytes);
-  }
-  snapshot(entry) {
-    return {
-      status: entry.status,
-      texture: entry.texture,
-      error: entry.error
-    };
-  }
-  notify(entry) {
-    const snapshot = this.snapshot(entry);
-    for (const listener of entry.listeners) {
-      listener(snapshot);
-    }
-  }
-  emitProgress() {
-    this.options.onProgress?.({
-      requested: this.requested,
-      loaded: this.loaded,
-      failed: this.failed,
-      active: this.activeLoads,
-      queued: this.queue.length
-    });
-  }
-  drain() {
-    while (!this.disposed && this.activeLoads < this.options.concurrency && this.queue.length > 0) {
-      const entry = this.queue.shift();
-      if (entry.refs === 0) {
-        entry.status = "idle";
-        this.entries.delete(entry.key);
-        this.requested = Math.max(0, this.requested - 1);
-        continue;
-      }
-      entry.status = "loading";
-      this.activeLoads += 1;
-      this.notify(entry);
-      this.emitProgress();
-      void this.loadAndFinish(entry);
-    }
-  }
-  async load(entry, generation) {
-    let lastError = null;
-    for (let attempt = 0; attempt <= this.options.retryCount; attempt += 1) {
-      try {
-        const texture = await this.loader.loadAsync(entry.url);
-        if (this.disposed || generation !== this.generation) {
-          texture.dispose();
-          return;
-        }
-        this.configureTexture(texture);
-        entry.texture = texture;
-        entry.status = "loaded";
-        entry.error = null;
-        entry.bytes = entry.address.width * entry.address.height * 4;
-        entry.lastUsed = performance.now();
-        this.totalBytes += entry.bytes;
-        this.loaded += 1;
-        this.notify(entry);
-        return;
-      } catch (error) {
-        lastError = error;
-      }
-    }
-    if (!this.disposed && generation === this.generation) {
-      entry.status = "error";
-      entry.error = lastError;
-      this.failed += 1;
-      this.notify(entry);
-      this.options.onError?.({
-        address: entry.address,
-        url: entry.url,
-        error: lastError
-      });
-    }
-  }
-  configureTexture(texture) {
-    texture.colorSpace = SRGBColorSpace3;
-    texture.wrapS = ClampToEdgeWrapping;
-    texture.wrapT = ClampToEdgeWrapping;
-    texture.magFilter = LinearFilter3;
-    texture.minFilter = LinearFilter3;
-    texture.generateMipmaps = false;
-    texture.anisotropy = Math.min(4, this.options.anisotropy);
-    texture.needsUpdate = true;
-  }
-  evict() {
-    if (this.totalBytes <= this.options.maxBytes) {
-      return;
-    }
-    const candidates = Array.from(this.entries.values()).filter((entry) => entry.refs === 0 && entry.texture).sort((a, b) => a.lastUsed - b.lastUsed);
-    for (const entry of candidates) {
-      if (this.totalBytes <= this.options.maxBytes) {
-        break;
-      }
-      entry.texture?.dispose();
-      this.totalBytes -= entry.bytes;
-      this.entries.delete(entry.key);
-    }
-    this.totalBytes = Math.max(0, this.totalBytes);
-  }
-  finishLoad(generation) {
-    this.activeLoads = Math.max(0, this.activeLoads - 1);
-    if (!this.disposed && generation === this.generation) {
-      this.emitProgress();
-      this.evict();
-    }
-    if (!this.disposed) {
-      this.drain();
-    }
-  }
-  async loadAndFinish(entry) {
-    const generation = this.generation;
-    try {
-      await this.load(entry, generation);
-    } finally {
-      this.finishLoad(generation);
-    }
-  }
-};
-
-// src/tile/texture-manager-context.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var TileTextureManagerContext = createContext15(
   null
 );
@@ -11681,9 +12231,9 @@ function TileTextureManagerProvider({
   maxTextureMemoryMb = 128,
   maxConcurrentLoads = 4
 }) {
-  const gl = useThree17((state) => state.gl);
+  const gl = useThree18((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = useMemo18(
+  const manager = useMemo19(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11692,43 +12242,33 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  useEffect25(() => {
+  useEffect27(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ jsx20(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsx21(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
   return useContext22(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
-import { useFrame as useFrame11, useThree as useThree18 } from "@react-three/fiber";
-import {
-  memo,
-  useEffect as useEffect26,
-  useMemo as useMemo19,
-  useRef as useRef26,
-  useState as useState11
-} from "react";
+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 {
-  ClampToEdgeWrapping as ClampToEdgeWrapping2,
-  Frustum,
-  LinearFilter as LinearFilter4,
-  Matrix4,
+  Frustum as Frustum2,
+  Matrix4 as Matrix43,
   PlaneGeometry as PlaneGeometry4,
-  PerspectiveCamera as PerspectiveCamera4,
-  SRGBColorSpace as SRGBColorSpace4,
-  TextureLoader as TextureLoader4,
-  Vector3 as Vector312
+  PerspectiveCamera as PerspectiveCamera5,
+  Vector3 as Vector313
 } from "three";
 
 // src/tile/face-layout.ts
 import {
-  Box3,
+  Box3 as Box32,
   Euler as Euler3,
   Quaternion as Quaternion2,
-  Vector3 as Vector311
+  Vector3 as Vector312
 } from "three";
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
@@ -11792,17 +12332,17 @@ function getTileBoundingBox(address, radius = CUBE_RADIUS) {
   const halfWidth = local.width / 2;
   const halfHeight = local.height / 2;
   const quaternion = getFaceQuaternion(address.face);
-  const position = new Vector311(...transform.position);
+  const position = new Vector312(...transform.position);
   const corners = [
-    new Vector311(local.x - halfWidth, local.y - halfHeight, 0),
-    new Vector311(local.x + halfWidth, local.y - halfHeight, 0),
-    new Vector311(local.x - halfWidth, local.y + halfHeight, 0),
-    new Vector311(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 Vector312(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
   }
-  return new Box3().setFromPoints(corners);
+  return new Box32().setFromPoints(corners);
 }
 function makeTileAddress(face, level, faceSize, tileSize, col, row) {
   const left = (col - 1) * tileSize;
@@ -11849,7 +12389,7 @@ function previewAtlasVRange(face, faceOrder = PREVIEW_FACE_ORDER) {
 }
 
 // src/tile/multires.ts
-function positiveInteger(value, name) {
+function positiveInteger2(value, name) {
   if (!Number.isFinite(value) || value <= 0 || !Number.isInteger(value)) {
     throw new Error(`${name} must be a positive integer, received ${String(value)}`);
   }
@@ -11865,13 +12405,13 @@ function ascendingLevels(levels) {
 }
 function parseMultires(multires) {
   if (typeof multires !== "string") {
-    const tileSize2 = positiveInteger(multires.tileSize, "multires.tileSize");
+    const tileSize2 = positiveInteger2(multires.tileSize, "multires.tileSize");
     if (multires.levels.length === 0) {
       throw new Error("multires.levels must contain at least one face size");
     }
     const levels2 = ascendingLevels(
       multires.levels.map(
-        (level, index) => positiveInteger(level, `multires.levels[${index}]`)
+        (level, index) => positiveInteger2(level, `multires.levels[${index}]`)
       )
     );
     return { tileSize: tileSize2, levels: levels2 };
@@ -11882,10 +12422,10 @@ function parseMultires(multires) {
       "multires must contain a tile size followed by at least one face size"
     );
   }
-  const tileSize = positiveInteger(values[0], "multires tile size");
+  const tileSize = positiveInteger2(values[0], "multires tile size");
   const levels = ascendingLevels(
     values.slice(1).map(
-      (level, index) => positiveInteger(level, `multires level ${index + 1}`)
+      (level, index) => positiveInteger2(level, `multires level ${index + 1}`)
     )
   );
   return { tileSize, levels };
@@ -11905,7 +12445,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } 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;
@@ -11913,61 +12453,12 @@ var VIEW_CHANGE_EPSILON = 1e-4;
 var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
 var SHARED_TILE_GEOMETRY = new PlaneGeometry4(1, 1);
-function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = useState11(null);
-  const onErrorRef = useRef26(onError);
-  onErrorRef.current = onError;
-  useEffect26(() => {
-    if (!url) {
-      setTexture(null);
-      return;
-    }
-    let active = true;
-    const loader = new TextureLoader4();
-    setTexture(null);
-    loader.load(
-      url,
-      (loadedTexture) => {
-        if (!active) {
-          loadedTexture.dispose();
-          return;
-        }
-        loadedTexture.colorSpace = SRGBColorSpace4;
-        loadedTexture.wrapS = ClampToEdgeWrapping2;
-        loadedTexture.wrapT = ClampToEdgeWrapping2;
-        loadedTexture.magFilter = LinearFilter4;
-        loadedTexture.minFilter = LinearFilter4;
-        loadedTexture.generateMipmaps = false;
-        loadedTexture.anisotropy = Math.min(4, anisotropy);
-        loadedTexture.needsUpdate = true;
-        setTexture(loadedTexture);
-      },
-      void 0,
-      (error) => {
-        if (active) {
-          setTexture(null);
-          onErrorRef.current?.(error);
-        }
-      }
-    );
-    return () => {
-      active = false;
-    };
-  }, [anisotropy, url]);
-  useEffect26(
-    () => () => {
-      texture?.dispose();
-    },
-    [texture]
-  );
-  return texture;
-}
 function PreviewFace({
   face,
   texture,
   faceOrder
 }) {
-  const geometry = useMemo19(() => {
+  const geometry = useMemo20(() => {
     const nextGeometry = new PlaneGeometry4(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -11977,29 +12468,26 @@ function PreviewFace({
     const inset = scale / 512;
     for (let index = 0; index < uv.count; index += 1) {
       const sourceV = uv.getY(index);
-      uv.setY(
-        index,
-        offset + inset + sourceV * Math.max(0, scale - inset * 2)
-      );
+      uv.setY(index, offset + inset + sourceV * Math.max(0, scale - inset * 2));
     }
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  useEffect26(
+  useEffect28(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -12015,7 +12503,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx21(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx22(
     PreviewFace,
     {
       face,
@@ -12025,28 +12513,7 @@ function PreviewCube({
     face
   ));
 }
-function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = useState11(() => ({
-    manager,
-    key,
-    url,
-    snapshot: manager.getSnapshot(key)
-  }));
-  const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  useEffect26(
-    () => manager.acquire(key, url, address, (nextSnapshot) => {
-      setManagedState({
-        manager,
-        key,
-        url,
-        snapshot: nextSnapshot
-      });
-    }),
-    [key, manager, url]
-  );
-  return snapshot;
-}
-var TileMesh = memo(function TileMesh2({
+var TileMesh = memo2(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -12060,14 +12527,14 @@ var TileMesh = memo(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx21("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx22(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -12079,12 +12546,12 @@ var TileMesh = memo(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = memo(function TileLayerMeshes2({
+var TileLayerMeshes = memo2(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx21(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx22(
     TileMesh,
     {
       address,
@@ -12184,8 +12651,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new Vector312());
-  const center = new Vector312();
+  const direction = camera.getWorldDirection(new Vector313());
+  const center = new Vector313();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -12230,9 +12697,7 @@ function buildLayers(targetLevel, levels, tileSize, frustum, camera, candidatesB
   }));
 }
 function layerToken(layers) {
-  return layers.map(
-    (layer) => `${layer.level}:${layer.addresses.map(tileKey).join(",")}`
-  ).join("|");
+  return layers.map((layer) => `${layer.level}:${layer.addresses.map(tileKey).join(",")}`).join("|");
 }
 function Tile({
   baseUrl,
@@ -12252,11 +12717,11 @@ function Tile({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = useThree18();
-  const multiresConfig = useMemo19(() => parseMultires(multires), [multires]);
+  const { camera, gl, size } = useThree19();
+  const multiresConfig = useMemo20(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = useMemo19(
+  const candidatesByLevel = useMemo20(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -12268,13 +12733,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = useRef26(onLoadProgress);
-  const errorRef = useRef26(onTileError);
-  const levelChangeRef = useRef26(onLevelChange);
+  const progressRef = useRef28(onLoadProgress);
+  const errorRef = useRef28(onTileError);
+  const levelChangeRef = useRef28(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = useMemo19(
+  const ownedManager = useMemo20(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -12295,7 +12760,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  useEffect26(() => {
+  useEffect28(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -12305,11 +12770,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = useRef26(false);
-  useEffect26(() => {
+  const readyRef = useRef28(false);
+  useEffect28(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  useEffect26(() => {
+  useEffect28(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -12317,31 +12782,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = useMemo19(
+  const resolveUrl = useMemo20(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = useState11([]);
-  const layerTokenRef = useRef26("");
-  const currentLevelRef = useRef26(1);
-  const lastUpdateAtRef = useRef26(-Infinity);
-  const visibilityDirtyRef = useRef26(true);
-  const lastVisibilityQuaternionRef = useRef26(camera.quaternion.clone());
-  const lastVisibilityFovRef = useRef26(Number.NaN);
-  const lastViewportRef = useRef26({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = useRef26(new Frustum());
-  const projectionMatrixRef = useRef26(new Matrix4());
-  const visibilityCameraRef = useRef26(new PerspectiveCamera4());
-  useEffect26(() => {
+  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(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  useEffect26(() => {
+  useEffect28(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -12355,11 +12820,11 @@ function Tile({
       setLayers(nextLayers);
     }
   };
-  useFrame11(() => {
+  useFrame12(() => {
     if (loadMode === "preview") {
       return;
     }
-    if (!(camera instanceof PerspectiveCamera4)) {
+    if (!(camera instanceof PerspectiveCamera5)) {
       return;
     }
     const now = performance.now();
@@ -12421,15 +12886,9 @@ function Tile({
     };
     commitLayers(nextLayers);
   });
-  return /* @__PURE__ */ jsxs12("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx21(
-      PreviewCube,
-      {
-        texture: previewTexture,
-        faceOrder: previewFaceOrder
-      }
-    ) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs13("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ jsx22(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
+    layers.map((layer) => /* @__PURE__ */ jsx22(
       TileLayerMeshes,
       {
         layer,
@@ -12442,7 +12901,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function SceneSource({
   scene,
   visible,
@@ -12455,7 +12914,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         Sphere,
         {
           src: scene.src,
@@ -12468,7 +12927,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         Tile,
         {
           ...tileProps,
@@ -12491,17 +12950,17 @@ function SnapshotCapture({
   maxPixels,
   onCaptured
 }) {
-  const { camera, gl, scene, size } = useThree19();
-  const capturedRequestRef = useRef27(0);
-  const renderTargetRef = useRef27(null);
-  useEffect27(
+  const { camera, gl, scene, size } = useThree20();
+  const capturedRequestRef = useRef29(0);
+  const renderTargetRef = useRef29(null);
+  useEffect29(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
     },
     []
   );
-  useFrame12(() => {
+  useFrame13(() => {
     if (requestId === 0 || requestId === capturedRequestRef.current) {
       return;
     }
@@ -12552,48 +13011,48 @@ function ScenesController({
 }) {
   const controlsRef = useContext23(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = useMemo20(
+  const transition = useMemo21(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = useMemo20(
+  const sceneMap = useMemo21(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = useState12([
+  const [slots, setSlots] = useState14([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = useState12(0);
-  const [liveSlot, setLiveSlot] = useState12(0);
-  const [pendingSlot, setPendingSlot] = useState12(null);
-  const [phase, setPhase] = useState12(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = useState12(0);
-  const [transitionRunId, setTransitionRunId] = useState12(0);
-  const [snapshot, setSnapshot] = useState12(null);
-  const [recoveryKey, setRecoveryKey] = useState12(0);
-  const requestedSceneIdRef = useRef27(activeSceneId);
-  const captureReasonRef = useRef27("start");
-  const interactionReleaseRef = useRef27(null);
-  const slotsRef = useRef27(slots);
-  const phaseRef = useRef27(phase);
-  const liveSlotRef = useRef27(liveSlot);
-  const transitionFromRef = useRef27(initialScene);
+  const [activeSlot, setActiveSlot] = useState14(0);
+  const [liveSlot, setLiveSlot] = useState14(0);
+  const [pendingSlot, setPendingSlot] = useState14(null);
+  const [phase, setPhase] = useState14(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = useState14(0);
+  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);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = useCallback10(() => {
+  const releaseInteraction = useCallback11(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = useCallback10((sceneId, error) => {
+  const reportError = useCallback11((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = useCallback10((scene) => {
+  const startPreload = useCallback11((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -12604,7 +13063,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  useEffect27(() => {
+  useEffect29(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -12628,7 +13087,7 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = useCallback10((slot) => {
+  const handleReady = useCallback11((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -12659,7 +13118,7 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = useCallback10((nextSnapshot) => {
+  const handleCaptured = useCallback11((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -12681,7 +13140,7 @@ function ScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = useCallback10(() => {
+  const finishTransition = useCallback11(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -12706,12 +13165,12 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  useEffect27(() => () => {
+  useEffect29(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
-  const { gl } = useThree19();
-  useEffect27(() => {
+  const { gl } = useThree20();
+  useEffect29(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -12735,8 +13194,8 @@ function ScenesController({
   }, [gl, manager, releaseInteraction, snapshot]);
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsx23(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -12748,7 +13207,7 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         SceneSource,
         {
           scene: source,
@@ -12764,7 +13223,7 @@ function ScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ jsx22(
+    snapshotVisible ? /* @__PURE__ */ jsx23(
       TransitionOverlay,
       {
         snapshot,
@@ -12787,11 +13246,11 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = useState12(
+  const [internalId, setInternalId] = useState14(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
-  const requestSceneChange = useCallback10(
+  const requestSceneChange = useCallback11(
     (id) => {
       if (isControlled) {
         onActiveSceneIdChange?.(id);
@@ -12801,13 +13260,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = useRef27(scenes);
+  const scenesRef = useRef29(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = useRef27(resolvedId);
+  const resolvedIdRef = useRef29(resolvedId);
   resolvedIdRef.current = resolvedId;
   const host = useContext23(ScenesHostContext);
-  const phaseRef = useRef27("idle");
-  useEffect27(() => {
+  const phaseRef = useRef29("idle");
+  useEffect29(() => {
     if (!host) {
       return;
     }
@@ -12857,12 +13316,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         ScenesController,
         {
           ...rest,
@@ -12876,8 +13335,8 @@ function Scenes({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { useThree as useThree21 } from "@react-three/fiber";
-import { useEffect as useEffect30, useRef as useRef29, useState as useState15 } from "react";
+import { useThree as useThree22 } from "@react-three/fiber";
+import { useEffect as useEffect32, useRef as useRef31, useState as useState17 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping3,
   LinearFilter as LinearFilter6,
@@ -12887,35 +13346,35 @@ import {
 } from "three";
 
 // src/hotspot/hotspot-anchor.tsx
-import { useFrame as useFrame13, useThree as useThree20 } from "@react-three/fiber";
+import { useFrame as useFrame14, useThree as useThree21 } from "@react-three/fiber";
 import {
   useContext as useContext25,
-  useEffect as useEffect29,
+  useEffect as useEffect31,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo22,
-  useRef as useRef28,
-  useState as useState14
+  useMemo as useMemo23,
+  useRef as useRef30,
+  useState as useState16
 } from "react";
 import {
-  Box3 as Box33,
+  Box3 as Box34,
   EdgesGeometry,
-  MathUtils as MathUtils7,
-  Matrix4 as Matrix42,
+  MathUtils as MathUtils8,
+  Matrix4 as Matrix44,
   Plane,
   PlaneGeometry as PlaneGeometry5,
-  PerspectiveCamera as PerspectiveCamera5,
+  PerspectiveCamera as PerspectiveCamera6,
   Quaternion as Quaternion3,
   Ray,
-  Vector3 as Vector313
+  Vector3 as Vector314
 } from "three";
 
 // src/hotspot/hotspot-tooltip.tsx
-import { useEffect as useEffect28, useMemo as useMemo21, useState as useState13 } from "react";
+import { useEffect as useEffect30, useMemo as useMemo22, useState as useState15 } from "react";
 
 // src/webvr/stereo-html.tsx
 import { Html } from "@react-three/drei";
 import { useContext as useContext24, useSyncExternalStore as useSyncExternalStore7 } from "react";
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function useFallbackStereoView() {
   const runtime = useContext24(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
@@ -12940,10 +13399,10 @@ function stereoCalculatePosition(eye, stereoView) {
 function PanoHtml({ children, ...htmlProps }) {
   const stereoView = useFallbackStereoView();
   if (!stereoView) {
-    return /* @__PURE__ */ jsx23(Html, { ...htmlProps, children });
+    return /* @__PURE__ */ jsx24(Html, { ...htmlProps, children });
   }
-  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsx24(
       Html,
       {
         ...htmlProps,
@@ -12951,7 +13410,7 @@ function PanoHtml({ children, ...htmlProps }) {
         children
       }
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       Html,
       {
         ...htmlProps,
@@ -12964,7 +13423,7 @@ function PanoHtml({ children, ...htmlProps }) {
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -12973,7 +13432,10 @@ var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   borderRadius: 8,
   shadow: "0 8px 24px rgba(0, 0, 0, 0.35)",
   padding: 8,
-  fontSize: 12
+  fontSize: 12,
+  fontFamily: "inherit",
+  lineHeight: 1.4,
+  letterSpacing: "normal"
 };
 var WRAPPER_STYLE = {
   pointerEvents: "none"
@@ -13033,16 +13495,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = useState13(false);
-  useEffect28(() => {
+  const [imageFailed, setImageFailed] = useState15(false);
+  useEffect30(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = useMemo21(
+  const resolvedAppearance = useMemo22(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = useMemo21(
+  const bubbleStyle = useMemo22(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -13050,6 +13512,9 @@ function HotspotTooltip({
       boxShadow: resolvedAppearance.shadow,
       color: resolvedAppearance.color,
       fontSize: toCssLength(resolvedAppearance.fontSize),
+      fontFamily: resolvedAppearance.fontFamily,
+      lineHeight: resolvedAppearance.lineHeight,
+      letterSpacing: resolvedAppearance.letterSpacing,
       padding: toCssLength(resolvedAppearance.padding),
       transform: tooltipBubbleTransform(
         placement,
@@ -13061,30 +13526,33 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ jsx24(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs15(
-    "div",
-    {
-      className: "pano-hotspot-tooltip",
-      role: "tooltip",
-      style: bubbleStyle,
-      children: [
-        showImage ? /* @__PURE__ */ jsx24(
-          "img",
-          {
-            alt: content.imageAlt ?? content.text ?? "",
-            className: "pano-hotspot-tooltip-image",
-            onError: () => setImageFailed(true),
-            src: content.image
-          }
-        ) : null,
-        content.text ? /* @__PURE__ */ jsx24("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : 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(
+      "img",
+      {
+        alt: content.imageAlt ?? content.text ?? "",
+        className: "pano-hotspot-tooltip-image",
+        onError: () => setImageFailed(true),
+        src: content.image
+      }
+    ) : null,
+    content.text ? /* @__PURE__ */ jsx25(
+      "p",
+      {
+        className: "pano-hotspot-tooltip-text",
+        style: {
+          lineHeight: "inherit",
+          letterSpacing: "inherit",
+          fontFamily: "inherit"
+        },
+        children: content.text
+      }
+    ) : null
+  ] }) });
 }
 
 // src/hotspot/hotspot-anchor.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_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -13092,28 +13560,28 @@ var DEFAULT_REFERENCE_FOV = 75;
 var MIN_ANGULAR_SIZE = 0.01;
 var MAX_ANGULAR_SIZE = 179;
 var DRAG_EPSILON_DEGREES = 1e-3;
-var LOCAL_FORWARD = new Vector313(0, 0, 1);
-var TOOLTIP_WORLD_BOX = new Box33();
-var TOOLTIP_LOCAL_BOX = new Box33();
-var TOOLTIP_CORNER = new Vector313();
-var TOOLTIP_INVERSE = new Matrix42();
-var TOOLTIP_WORLD_CORNER = new Vector313();
-var TOOLTIP_PROJECTED = new Vector313();
-var TOOLTIP_RAY_ORIGIN = new Vector313();
-var TOOLTIP_RAY_FAR = new Vector313();
-var TOOLTIP_RAY_DIRECTION = new Vector313();
+var LOCAL_FORWARD = new Vector314(0, 0, 1);
+var TOOLTIP_WORLD_BOX = new Box34();
+var TOOLTIP_LOCAL_BOX = new Box34();
+var TOOLTIP_CORNER = new Vector314();
+var TOOLTIP_INVERSE = new Matrix44();
+var TOOLTIP_WORLD_CORNER = new Vector314();
+var TOOLTIP_PROJECTED = new Vector314();
+var TOOLTIP_RAY_ORIGIN = new Vector314();
+var TOOLTIP_RAY_FAR = new Vector314();
+var TOOLTIP_RAY_DIRECTION = new Vector314();
 var TOOLTIP_RAY = new Ray();
 var TOOLTIP_PLANE = new Plane();
-var TOOLTIP_INTERSECTION = new Vector313();
-var TOOLTIP_PLANE_NORMAL = new Vector313();
-var TOOLTIP_PLANE_POINT = new Vector313();
+var TOOLTIP_INTERSECTION = new Vector314();
+var TOOLTIP_PLANE_NORMAL = new Vector314();
+var TOOLTIP_PLANE_POINT = new Vector314();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? MathUtils7.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(MathUtils7.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? MathUtils8.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(MathUtils8.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -13126,7 +13594,7 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return MathUtils7.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return MathUtils8.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight) {
   if (orientation2 === "billboard") {
@@ -13134,8 +13602,8 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   } else {
     group.quaternion.copy(surfaceQuaternion3);
   }
-  group.rotateOnAxis(LOCAL_FORWARD, MathUtils7.degToRad(-rotation));
-  const scaleFactor = scaleMode === "fixed" && camera instanceof PerspectiveCamera5 ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+  group.rotateOnAxis(LOCAL_FORWARD, MathUtils8.degToRad(-rotation));
+  const scaleFactor = scaleMode === "fixed" && camera instanceof PerspectiveCamera6 ? fixedScaleFactor(camera.fov, referenceFov) : 1;
   group.scale.set(
     (useAngularScale ? worldWidth : 1) * scaleFactor,
     (useAngularScale ? worldHeight : 1) * scaleFactor,
@@ -13144,39 +13612,39 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   group.updateMatrixWorld();
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = MathUtils7.clamp(
+  const safeWidth = MathUtils8.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = MathUtils7.clamp(
+  const safeHeight = MathUtils8.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(MathUtils7.degToRad(safeWidth) / 2),
-    Math.tan(MathUtils7.degToRad(safeHeight) / 2)
+    Math.tan(MathUtils8.degToRad(safeWidth) / 2),
+    Math.tan(MathUtils8.degToRad(safeHeight) / 2)
   );
   return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
 }
 function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = MathUtils7.clamp(referenceFov, 1, 179);
-  return Math.tan(MathUtils7.degToRad(cameraFov) / 2) / Math.tan(MathUtils7.degToRad(safeReferenceFov) / 2);
+  const safeReferenceFov = MathUtils8.clamp(referenceFov, 1, 179);
+  return Math.tan(MathUtils8.degToRad(cameraFov) / 2) / Math.tan(MathUtils8.degToRad(safeReferenceFov) / 2);
 }
 function createSurfaceQuaternion(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = MathUtils7.degToRad(position.pitch);
-  const yaw = MathUtils7.degToRad(position.yaw);
-  const localUp = new Vector313(
+  const pitch = MathUtils8.degToRad(position.pitch);
+  const yaw = MathUtils8.degToRad(position.yaw);
+  const localUp = new Vector314(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
   const localRight = localUp.clone().cross(inward).normalize();
-  const basis = new Matrix42().makeBasis(localRight, localUp, inward);
+  const basis = new Matrix44().makeBasis(localRight, localUp, inward);
   return new Quaternion3().setFromRotationMatrix(basis);
 }
 function makeInteractionEvent(id, position, event) {
@@ -13190,7 +13658,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return MathUtils7.radToDeg(aVector.angleTo(bVector));
+  return MathUtils8.radToDeg(aVector.angleTo(bVector));
 }
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
@@ -13425,20 +13893,20 @@ function HotspotAnchor({
   const hotspotTargetRegistry = useContext25(HotspotTargetRegistryContext);
   const eventBus = useContext25(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = useThree20();
-  const groupRef = useRef28(null);
-  const tooltipAnchorRef = useRef28(null);
-  const dragStateRef = useRef28(null);
-  const suppressNextClickRef = useRef28(false);
-  const [hovered, setHovered] = useState14(false);
-  const [dragging, setDragging] = useState14(false);
-  const [pinned, setPinned] = useState14(false);
-  const tooltipContent = useMemo22(
+  const { camera, size } = useThree21();
+  const groupRef = useRef30(null);
+  const tooltipAnchorRef = useRef30(null);
+  const dragStateRef = useRef30(null);
+  const suppressNextClickRef = useRef30(false);
+  const [hovered, setHovered] = useState16(false);
+  const [dragging, setDragging] = useState16(false);
+  const [pinned, setPinned] = useState16(false);
+  const tooltipContent = useMemo23(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
   const normalizedPosition = normalizePanoPosition(position);
-  useEffect29(() => {
+  useEffect31(() => {
     if (!hotspotTargetRegistry) {
       return;
     }
@@ -13455,17 +13923,17 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = useMemo22(
+  const worldPosition = useMemo23(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = useMemo22(
+  const surfaceQuaternion3 = useMemo23(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = useMemo22(() => {
+  const focusGeometry = useMemo23(() => {
     const planeGeometry = new PlaneGeometry5(1, 1);
     const geometry = new EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -13492,14 +13960,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  useEffect29(
+  useEffect31(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  useEffect29(() => {
+  useEffect31(() => {
     if (!cursorApi) {
       return;
     }
@@ -13521,14 +13989,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  useEffect29(
+  useEffect31(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  useEffect29(() => () => focusGeometry.dispose(), [focusGeometry]);
-  useEffect29(() => {
+  useEffect31(() => () => focusGeometry.dispose(), [focusGeometry]);
+  useEffect31(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -13537,12 +14005,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  useEffect29(() => {
+  useEffect31(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  useEffect29(() => {
+  useEffect31(() => {
     if (acceptsPointer) {
       return;
     }
@@ -13596,7 +14064,7 @@ function HotspotAnchor({
     worldHeight,
     worldWidth
   ]);
-  useFrame13((state) => {
+  useFrame14((state) => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -13654,7 +14122,7 @@ function HotspotAnchor({
       setHovered(true);
     }
   };
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "group",
     {
       ref: groupRef,
@@ -13731,18 +14199,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx25(
+        focused ? focusContent ?? /* @__PURE__ */ jsx26(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx25("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx26("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx25("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx25(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx26("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx26(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -13763,7 +14231,7 @@ import {
   MeshBasicMaterial,
   Vector2 as Vector26
 } from "three";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new Vector26();
 var RAYCAST_HITS = [];
@@ -13865,11 +14333,12 @@ function HotspotPlane({
   map,
   opacity
 }) {
-  return /* @__PURE__ */ jsxs17("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ jsx26("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx26(
-      "meshBasicMaterial",
+  return /* @__PURE__ */ jsxs18("mesh", { raycast: hotspotPlaneRaycast, children: [
+    /* @__PURE__ */ jsx27("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx27(
+      PanoBasicMaterial,
       {
+        target: "hotspot",
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
         alphaToCoverage: true,
         map,
@@ -13883,15 +14352,15 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = useThree21((state) => state.gl);
-  const [texture, setTexture] = useState15(null);
-  const onLoadRef = useRef29(onLoad);
-  const onErrorRef = useRef29(onError);
+  const gl = useThree22((state) => state.gl);
+  const [texture, setTexture] = useState17(null);
+  const onLoadRef = useRef31(onLoad);
+  const onErrorRef = useRef31(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect30(() => {
+  useEffect32(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13929,7 +14398,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  useEffect30(
+  useEffect32(
     () => () => {
       texture?.dispose();
     },
@@ -13947,33 +14416,33 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx27(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx27(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx28(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx28(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useEffect as useEffect31, useMemo as useMemo23, useRef as useRef31 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo24, useRef as useRef33 } from "react";
 import {
-  BufferGeometry,
+  BufferGeometry as BufferGeometry2,
   DoubleSide as DoubleSide5,
-  Float32BufferAttribute,
-  Matrix4 as Matrix43,
+  Float32BufferAttribute as Float32BufferAttribute2,
+  Matrix4 as Matrix45,
   Quaternion as Quaternion4,
   ShapeUtils,
   Vector2 as Vector27,
-  Vector3 as Vector315
+  Vector3 as Vector316
 } from "three";
 
 // src/hotspot/hotspot-stroke-line.tsx
 import { Line } from "@react-three/drei";
-import { useFrame as useFrame14, useThree as useThree22 } from "@react-three/fiber";
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef30 } from "react";
+import { useFrame as useFrame15, useThree as useThree23 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef32 } from "react";
 import {
-  MathUtils as MathUtils8,
-  PerspectiveCamera as PerspectiveCamera6,
-  Vector3 as Vector314
+  MathUtils as MathUtils9,
+  PerspectiveCamera as PerspectiveCamera7,
+  Vector3 as Vector315
 } from "three";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var LINE_WORLD_POSITION = new Vector314();
+import { jsx as jsx29 } from "react/jsx-runtime";
+var LINE_WORLD_POSITION = new Vector315();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -13981,8 +14450,8 @@ function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   }
   object.getWorldPosition(LINE_WORLD_POSITION);
   const depth = Math.max(camera.position.distanceTo(LINE_WORLD_POSITION), 1);
-  const fov = camera instanceof PerspectiveCamera6 ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils8.degToRad(fov) * 0.5) * depth);
+  const fov = camera instanceof PerspectiveCamera7 ? camera.fov : 75;
+  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils9.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -14003,8 +14472,8 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = useRef30(null);
-  const { camera, size } = useThree22();
+  const lineRef = useRef32(null);
+  const { camera, size } = useThree23();
   const dash = resolveDash(dashSize, gapSize);
   useLayoutEffect5(() => {
     if (!dash.dashed) {
@@ -14012,13 +14481,13 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, camera, size.height);
   }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
-  useFrame14((state) => {
+  useFrame15((state) => {
     if (!dash.dashed) {
       return;
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     Line,
     {
       ref: lineRef,
@@ -14040,7 +14509,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -14112,7 +14581,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new Vector315()];
+  const candidates = [new Vector316()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14136,7 +14605,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new Vector315(0, 1, 0)) || polygonContainsDirection(normalized, new Vector315(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new Vector316(0, 1, 0)) || polygonContainsDirection(normalized, new Vector316(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14147,7 +14616,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector315()
+    new Vector316()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14156,20 +14625,20 @@ function surfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = position.pitch * Math.PI / 180;
   const yaw = position.yaw * Math.PI / 180;
-  const localUp = new Vector315(
+  const localUp = new Vector316(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
   return new Quaternion4().setFromRotationMatrix(
-    new Matrix43().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+    new Matrix45().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal(center) {
-  return new Matrix43().compose(
+  return new Matrix45().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new Vector315(1, 1, 1)
+    new Vector316(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14241,7 +14710,7 @@ function makeFillGeometry(vertices, center) {
       steps
     );
   }
-  return new BufferGeometry().setAttribute("position", new Float32BufferAttribute(positions, 3)).setIndex(indices);
+  return new BufferGeometry2().setAttribute("position", new Float32BufferAttribute2(positions, 3)).setIndex(indices);
 }
 function makeStrokePositions(vertices, center) {
   const points = [];
@@ -14296,24 +14765,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = useMemo23(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = useMemo24(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo23(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = useMemo23(
+  const center = useMemo24(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = useMemo24(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = useMemo23(
+  const strokePoints = useMemo24(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef31(null);
+  const startVerticesRef = useRef33(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  useEffect31(() => {
+  useEffect33(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  useEffect31(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  useEffect33(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -14328,7 +14797,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14343,7 +14812,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx29(
+      focusContent: /* @__PURE__ */ jsx30(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14365,7 +14834,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx29("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx30(
           "meshBasicMaterial",
           {
             color: fill,
@@ -14375,7 +14844,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -14393,14 +14862,14 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useEffect as useEffect32, useMemo as useMemo24, useRef as useRef32 } from "react";
+import { useEffect as useEffect34, useMemo as useMemo25, useRef as useRef34 } from "react";
 import {
-  MathUtils as MathUtils9,
-  Matrix4 as Matrix44,
+  MathUtils as MathUtils10,
+  Matrix4 as Matrix46,
   Quaternion as Quaternion5,
-  Vector3 as Vector316
+  Vector3 as Vector317
 } from "three";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -14425,29 +14894,29 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector316()
+    new Vector317()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
 function surfaceQuaternion2(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = MathUtils9.degToRad(position.pitch);
-  const yaw = MathUtils9.degToRad(position.yaw);
-  const localUp = new Vector316(
+  const pitch = MathUtils10.degToRad(position.pitch);
+  const yaw = MathUtils10.degToRad(position.yaw);
+  const localUp = new Vector317(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
   return new Quaternion5().setFromRotationMatrix(
-    new Matrix44().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+    new Matrix46().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal2(center) {
-  return new Matrix44().compose(
+  return new Matrix46().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new Vector316(1, 1, 1)
+    new Vector317(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -14462,7 +14931,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(MathUtils9.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(MathUtils10.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -14517,16 +14986,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = useMemo24(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = useMemo25(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo24(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = useMemo24(
+  const center = useMemo25(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = useMemo25(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef32(null);
-  useEffect32(() => {
+  const startVerticesRef = useRef34(null);
+  useEffect34(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -14540,7 +15009,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14554,7 +15023,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx30(
+      focusContent: /* @__PURE__ */ jsx31(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14575,7 +15044,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14592,7 +15061,7 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect33, useRef as useRef33, useState as useState16 } from "react";
+import { useEffect as useEffect35, useRef as useRef35, useState as useState18 } from "react";
 import {
   CanvasTexture,
   ClampToEdgeWrapping as ClampToEdgeWrapping4,
@@ -14600,7 +15069,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter4,
   SRGBColorSpace as SRGBColorSpace6
 } from "three";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -14789,12 +15258,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = useState16(null);
-  const onLoadRef = useRef33(onLoad);
-  const onErrorRef = useRef33(onError);
+  const [texture, setTexture] = useState18(null);
+  const onLoadRef = useRef35(onLoad);
+  const onErrorRef = useRef35(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect33(() => {
+  useEffect35(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -14820,20 +15289,20 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ jsx31(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx31(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx31(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx32(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx31(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx32(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-import { useFrame as useFrame15, useThree as useThree23 } from "@react-three/fiber";
-import { useEffect as useEffect34, useRef as useRef34, useState as useState17 } from "react";
+import { useFrame as useFrame16, useThree as useThree24 } from "@react-three/fiber";
+import { useEffect as useEffect36, useRef as useRef36, useState as useState19 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
   LinearFilter as LinearFilter8,
@@ -14841,7 +15310,7 @@ import {
   SRGBColorSpace as SRGBColorSpace7,
   TextureLoader as TextureLoader6
 } from "three";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -14855,13 +15324,13 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = useThree23((state) => state.gl);
-  const [texture, setTexture] = useState17(null);
-  const onErrorRef = useRef34(onError);
-  const onLoadProgressRef = useRef34(onLoadProgress);
+  const gl = useThree24((state) => state.gl);
+  const [texture, setTexture] = useState19(null);
+  const onErrorRef = useRef36(onError);
+  const onLoadProgressRef = useRef36(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  useEffect34(() => {
+  useEffect36(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14902,7 +15371,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  useEffect34(
+  useEffect36(
     () => () => {
       texture?.dispose();
     },
@@ -14931,24 +15400,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = useState17(0);
-  const elapsedRef = useRef34(0);
-  const frameIndexRef = useRef34(0);
-  const endedRef = useRef34(false);
-  const lastPlaybackStateRef = useRef34(null);
-  const onFrameChangeRef = useRef34(onFrameChange);
-  const onPlaybackStateChangeRef = useRef34(onPlaybackStateChange);
-  const onEndedRef = useRef34(onEnded);
+  const [frameIndex, setFrameIndex] = useState19(0);
+  const elapsedRef = useRef36(0);
+  const frameIndexRef = useRef36(0);
+  const endedRef = useRef36(false);
+  const lastPlaybackStateRef = useRef36(null);
+  const onFrameChangeRef = useRef36(onFrameChange);
+  const onPlaybackStateChangeRef = useRef36(onPlaybackStateChange);
+  const onEndedRef = useRef36(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  useEffect34(() => {
+  useEffect36(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  useEffect34(() => {
+  useEffect36(() => {
     if (!texture) {
       return;
     }
@@ -14962,13 +15431,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  useEffect34(() => {
+  useEffect36(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  useEffect34(() => {
+  useEffect36(() => {
     if (!texture) {
       return;
     }
@@ -14987,7 +15456,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  useFrame15((_, deltaSeconds) => {
+  useFrame16((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -15017,12 +15486,12 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
-import { useThree as useThree24 } from "@react-three/fiber";
-import { useEffect as useEffect35, useRef as useRef35, useState as useState18 } from "react";
+import { useThree as useThree25 } from "@react-three/fiber";
+import { useEffect as useEffect37, useRef as useRef37, useState as useState20 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
   LinearFilter as LinearFilter9,
@@ -15031,7 +15500,7 @@ import {
   TextureLoader as TextureLoader7,
   VideoTexture as VideoTexture2
 } from "three";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -15039,11 +15508,11 @@ function clampVolume2(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture2(id, poster, onError) {
-  const gl = useThree24((state) => state.gl);
-  const [texture, setTexture] = useState18(null);
-  const onErrorRef = useRef35(onError);
+  const gl = useThree25((state) => state.gl);
+  const [texture, setTexture] = useState20(null);
+  const onErrorRef = useRef37(onError);
   onErrorRef.current = onError;
-  useEffect35(() => {
+  useEffect37(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -15080,7 +15549,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  useEffect35(
+  useEffect37(
     () => () => {
       texture?.dispose();
     },
@@ -15098,14 +15567,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = useState18(null);
-  const onEndedRef = useRef35(onEnded);
-  const onErrorRef = useRef35(onError);
-  const onPlaybackStateChangeRef = useRef35(onPlaybackStateChange);
+  const [resource, setResource] = useState20(null);
+  const onEndedRef = useRef37(onEnded);
+  const onErrorRef = useRef37(onError);
+  const onPlaybackStateChangeRef = useRef37(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect35(() => {
+  useEffect37(() => {
     if (!src) {
       setResource(null);
       return;
@@ -15212,11 +15681,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = useRef35(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef35(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef37(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef37(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect35(() => {
+  useEffect37(() => {
     if (!resource) {
       return;
     }
@@ -15233,7 +15702,7 @@ function VideoHotspot({
     }
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect35(() => {
+  useEffect37(() => {
     if (!resource) {
       return;
     }
@@ -15256,12 +15725,12 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx34(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
-import { useFrame as useFrame16, useThree as useThree25 } from "@react-three/fiber";
-import { useEffect as useEffect36, useRef as useRef36, useState as useState19 } from "react";
+import { useFrame as useFrame17, useThree as useThree26 } from "@react-three/fiber";
+import { useEffect as useEffect38, useRef as useRef38, useState as useState21 } from "react";
 import {
   CanvasTexture as CanvasTexture2,
   ClampToEdgeWrapping as ClampToEdgeWrapping7,
@@ -15270,7 +15739,7 @@ import {
   SRGBColorSpace as SRGBColorSpace9,
   TextureLoader as TextureLoader8
 } from "three";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -15334,8 +15803,8 @@ function createSpeakerTexture(state) {
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = useState19({ playing: null, stopped: null });
-  useEffect36(() => {
+  const [textures, setTextures] = useState21({ playing: null, stopped: null });
+  useEffect38(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -15351,11 +15820,11 @@ function useSpeakerTextures(enabled) {
   return textures;
 }
 function useIconTexture(icon, enabled, onError, id) {
-  const gl = useThree25((state) => state.gl);
-  const [texture, setTexture] = useState19(null);
-  const onErrorRef = useRef36(onError);
+  const gl = useThree26((state) => state.gl);
+  const [texture, setTexture] = useState21(null);
+  const onErrorRef = useRef38(onError);
   onErrorRef.current = onError;
-  useEffect36(() => {
+  useEffect38(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -15392,7 +15861,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  useEffect36(
+  useEffect38(
     () => () => {
       texture?.dispose();
     },
@@ -15411,13 +15880,13 @@ function useAudioHowl({
   playing,
   src
 }) {
-  const [howl, setHowl] = useState19(null);
-  const playingRef = useRef36(playing);
-  const loopRef = useRef36(loop ?? false);
-  const onEndedRef = useRef36(onEnded);
-  const onErrorRef = useRef36(onError);
-  const onPlaybackErrorRef = useRef36(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef36(onPlaybackStateChange);
+  const [howl, setHowl] = useState21(null);
+  const playingRef = useRef38(playing);
+  const loopRef = useRef38(loop ?? false);
+  const onEndedRef = useRef38(onEnded);
+  const onErrorRef = useRef38(onError);
+  const onPlaybackErrorRef = useRef38(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef38(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -15425,7 +15894,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  useEffect36(() => {
+  useEffect38(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -15462,7 +15931,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  useEffect36(() => {
+  useEffect38(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -15490,7 +15959,7 @@ function AudioHotspot({
   ...anchorProps
 }) {
   usePanoMediaActivationIntent(playing);
-  const camera = useThree25((state) => state.camera);
+  const camera = useThree26((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
     id,
@@ -15506,15 +15975,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 = useRef36(playing);
+  const playingRef = useRef38(playing);
   playingRef.current = playing;
-  const mutedRef = useRef36(muted);
-  const volumeRef = useRef36(volume);
-  const rangeRef = useRef36(range);
+  const mutedRef = useRef38(muted);
+  const volumeRef = useRef38(volume);
+  const rangeRef = useRef38(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  useEffect36(() => {
+  useEffect38(() => {
     if (!howl) {
       return;
     }
@@ -15524,7 +15993,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  useEffect36(() => {
+  useEffect38(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -15542,7 +16011,7 @@ function AudioHotspot({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [howl, pauseWhenHidden]);
-  useFrame16(() => {
+  useFrame17(() => {
     if (!howl) {
       return;
     }
@@ -15555,11 +16024,11 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx34(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx35(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
-import { useEffect as useEffect37, useRef as useRef37, useState as useState20 } from "react";
+import { useEffect as useEffect39, useRef as useRef39, useState as useState22 } from "react";
 import {
   CanvasTexture as CanvasTexture3,
   ClampToEdgeWrapping as ClampToEdgeWrapping8,
@@ -15567,7 +16036,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter8,
   SRGBColorSpace as SRGBColorSpace10
 } from "three";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -15787,12 +16256,12 @@ function createTextTexture(text, width, height, style) {
   return texture;
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
-  const [texture, setTexture] = useState20(null);
-  const onLoadRef = useRef37(onLoad);
-  const onErrorRef = useRef37(onError);
+  const [texture, setTexture] = useState22(null);
+  const onLoadRef = useRef39(onLoad);
+  const onErrorRef = useRef39(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect37(() => {
+  useEffect39(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -15885,13 +16354,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx35(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx36(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx36(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 import { Html as Html2 } from "@react-three/drei";
 import { DoubleSide as DoubleSide6 } from "three";
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -15948,7 +16417,7 @@ function IframeHotspot({
     interactive,
     pointerEvents
   );
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -15957,9 +16426,9 @@ function IframeHotspot({
       pointerEvents,
       width,
       children: [
-        /* @__PURE__ */ jsxs19("mesh", { children: [
-          /* @__PURE__ */ jsx36("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsxs20("mesh", { children: [
+          /* @__PURE__ */ jsx37("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ jsx37(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -15970,7 +16439,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           Html2,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -15985,7 +16454,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ jsx36(
+            children: /* @__PURE__ */ jsx37(
               "iframe",
               {
                 allow,
@@ -16037,6 +16506,7 @@ export {
   Scenes,
   SequenceHotspot,
   Sphere,
+  SphereTile,
   TextHotspot,
   Tile,
   TouchControls,