@ericchen1990/pano-view 3.1.3 → 3.2.1

package/dist/index.cjs

@@ -2278,6 +2278,7 @@ __export(index_exports, {
   Scenes: () => Scenes,
   SequenceHotspot: () => SequenceHotspot,
   Sphere: () => Sphere,
+  SphereTile: () => SphereTile,
   TextHotspot: () => TextHotspot,
   Tile: () => Tile,
   TouchControls: () => TouchControls,
@@ -3786,7 +3787,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)) {
@@ -3795,15 +3798,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 = (0, import_react10.createContext)(null);
@@ -8055,15 +8060,23 @@ var import_react28 = require("react");
 function PanoFilter({
   preset = "none",
   intensity,
-  enabled = true
+  enabled = true,
+  colorMatrix,
+  colorMatrixScope
 }) {
   const host = (0, import_react28.useContext)(PanoFilterHostContext);
   if (!host) {
     throw new Error("<PanoFilter> must be rendered inside <PanoViewer>.");
   }
   const snapshot = (0, import_react28.useMemo)(
-    () => resolvePanoFilterSnapshot({ preset, intensity, enabled }),
-    [enabled, intensity, preset]
+    () => resolvePanoFilterSnapshot({
+      preset,
+      intensity,
+      enabled,
+      colorMatrix,
+      colorMatrixScope
+    }),
+    [enabled, intensity, preset, colorMatrix, colorMatrixScope]
   );
   (0, import_react28.useEffect)(() => {
     claimPanoFilter(host);
@@ -9684,10 +9697,10 @@ function usePanoViewer() {
   return (0, import_react35.useMemo)(() => ({ ref, ...handle }), [handle]);
 }
 
-// src/sphere.tsx
+// src/sphere-tile/sphere-tile.tsx
 var import_fiber15 = require("@react-three/fiber");
-var import_react37 = require("react");
-var import_three10 = require("three");
+var import_react38 = require("react");
+var import_three14 = require("three");
 
 // src/asset-url.ts
 function isAbsoluteAssetUrl(url) {
@@ -9712,6 +9725,7 @@ function resolveUrlAgainstFile(fileUrl, path) {
 
 // src/pano-filter/pano-basic-material.tsx
 var import_react36 = require("react");
+var import_three10 = require("three");
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -9860,77 +9874,327 @@ ${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
 var import_jsx_runtime14 = require("react/jsx-runtime");
+function matrixUniforms(matrix) {
+  return {
+    matrix: new import_three10.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 import_three10.Vector4(matrix[4], matrix[9], matrix[14], matrix[19])
+  };
+}
 function PanoBasicMaterial({
-  map,
-  side,
-  depthTest,
-  depthWrite,
-  toneMapped = false
+  target = "panorama",
+  ...props
 }) {
   const snapshot = usePanoFilterSnapshot();
-  const materialRef = (0, import_react36.useRef)(null);
-  const intensityRef = (0, import_react36.useRef)(snapshot.intensity);
-  const intensityUniformRef = (0, import_react36.useRef)(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 = (0, import_react36.useRef)({ matrix, intensity: snapshot.intensity });
+  currentRef.current = { matrix, intensity: snapshot.intensity };
+  const shaderRef = (0, import_react36.useRef)(null);
   const onBeforeCompile = (0, import_react36.useMemo)(() => {
-    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]);
-  (0, import_react36.useLayoutEffect)(() => {
-    if (!active) {
-      intensityUniformRef.current = null;
-    }
-    const material = materialRef.current;
-    if (!material) {
-      return;
-    }
-    material.needsUpdate = true;
-  }, [active, preset]);
+  }, [preset, hasMatrix]);
   (0, import_react36.useLayoutEffect)(() => {
-    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__ */ (0, import_jsx_runtime14.jsx)(
     "meshBasicMaterial",
     {
-      ref: materialRef,
-      depthTest,
-      depthWrite,
-      map,
-      onBeforeCompile,
-      side,
-      toneMapped
+      toneMapped: false,
+      ...props,
+      onBeforeCompile
     },
-    active ? preset : "none"
+    `${preset}:${hasMatrix}`
   );
 }
 
-// src/sphere.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
+// src/tile/texture-manager.ts
+var import_three11 = require("three");
+var EMPTY_TEXTURE_SNAPSHOT = {
+  status: "idle",
+  texture: null,
+  error: null
+};
+var TileTextureManager = class {
+  constructor(options) {
+    this.loader = new import_three11.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);
+    }
+    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) {
+      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 = import_three11.SRGBColorSpace;
+    texture.wrapS = import_three11.ClampToEdgeWrapping;
+    texture.wrapT = import_three11.ClampToEdgeWrapping;
+    texture.magFilter = import_three11.LinearFilter;
+    texture.minFilter = import_three11.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
+var import_react37 = require("react");
+var import_three12 = require("three");
+function usePreviewTexture(url, anisotropy, onError) {
   const [texture, setTexture] = (0, import_react37.useState)(null);
-  const onLoadRef = (0, import_react37.useRef)(onLoad);
   const onErrorRef = (0, import_react37.useRef)(onError);
-  onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   (0, import_react37.useEffect)(() => {
     if (!url) {
@@ -9938,7 +10202,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       return;
     }
     let active = true;
-    const loader = new import_three10.TextureLoader();
+    const loader = new import_three12.TextureLoader();
     setTexture(null);
     loader.load(
       url,
@@ -9947,14 +10211,472 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three10.SRGBColorSpace;
-        loadedTexture.wrapS = import_three10.RepeatWrapping;
-        loadedTexture.repeat.x = -1;
-        loadedTexture.offset.x = 1;
-        loadedTexture.anisotropy = anisotropy;
-        loadedTexture.magFilter = import_three10.LinearFilter;
-        loadedTexture.minFilter = generateMipmaps ? import_three10.LinearMipmapLinearFilter : import_three10.LinearFilter;
-        loadedTexture.generateMipmaps = generateMipmaps;
+        loadedTexture.colorSpace = import_three12.SRGBColorSpace;
+        loadedTexture.wrapS = import_three12.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three12.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three12.LinearFilter;
+        loadedTexture.minFilter = import_three12.LinearFilter;
+        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]);
+  (0, import_react37.useEffect)(
+    () => () => {
+      texture?.dispose();
+    },
+    [texture]
+  );
+  return texture;
+}
+function useManagedTexture(manager, key, url, address) {
+  const [managedState, setManagedState] = (0, import_react37.useState)(() => ({
+    manager,
+    key,
+    url,
+    snapshot: manager.getSnapshot(key)
+  }));
+  const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
+  (0, import_react37.useEffect)(
+    () => manager.acquire(key, url, address, (nextSnapshot) => {
+      setManagedState({
+        manager,
+        key,
+        url,
+        snapshot: nextSnapshot
+      });
+    }),
+    [key, manager, url]
+  );
+  return snapshot;
+}
+
+// src/sphere-tile/layout.ts
+var import_three13 = require("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 + import_three13.MathUtils.degToRad(yawOffset);
+  const pitch = (0.5 - v) * Math.PI;
+  return new import_three13.Vector3(
+    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 import_three13.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 import_three13.BufferGeometry();
+  geometry.setAttribute("position", new import_three13.Float32BufferAttribute(positions, 3));
+  geometry.setAttribute("uv", new import_three13.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
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function SpherePatch({
+  address,
+  texture,
+  yawOffset,
+  preview = false
+}) {
+  const geometry = (0, import_react38.useMemo)(
+    () => sphereTileGeometry(
+      address,
+      yawOffset,
+      DEFAULT_PANORAMA_RADIUS + (preview ? 0.05 : 0)
+    ),
+    [address, yawOffset, preview]
+  );
+  (0, import_react38.useEffect)(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "mesh",
+    {
+      geometry,
+      renderOrder: preview ? -1e3 : -900 + address.level,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        PanoBasicMaterial,
+        {
+          map: texture,
+          side: import_three14.BackSide,
+          depthTest: false,
+          depthWrite: false,
+          toneMapped: false
+        }
+      )
+    }
+  );
+}
+var ManagedPatch = (0, import_react38.memo)(function ManagedPatch2({
+  address,
+  manager,
+  resolveUrl,
+  yawOffset,
+  ready
+}) {
+  const url = resolveUrl(address);
+  const snapshot = useManagedTexture(
+    manager,
+    `${url}\0${sphereTileKey(address)}`,
+    url,
+    address
+  );
+  (0, import_react38.useEffect)(() => {
+    if (snapshot.texture) ready();
+  }, [snapshot.texture, ready]);
+  return snapshot.texture ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    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 } = (0, import_fiber15.useThree)();
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const preview = usePreviewTexture(
+    resolveAssetUrl(baseUrl, previewUrl),
+    anisotropy,
+    onPreviewError
+  );
+  const callbacks = (0, import_react38.useRef)({
+    onReady,
+    onLoadProgress,
+    onTileError,
+    onLevelChange
+  });
+  callbacks.current = { onReady, onLoadProgress, onTileError, onLevelChange };
+  const budget = Math.max(
+    1,
+    Number.isFinite(maxTextureMemoryMb) ? maxTextureMemoryMb : 128
+  ) * 1024 * 1024;
+  const manager = (0, import_react38.useMemo)(
+    () => 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 = (0, import_react38.useRef)(false);
+  const ready = (0, import_react38.useCallback)(() => {
+    if (!readyRef.current) {
+      readyRef.current = true;
+      callbacks.current.onReady?.();
+    }
+  }, []);
+  (0, import_react38.useEffect)(() => {
+    if (preview) ready();
+  }, [preview, ready]);
+  (0, import_react38.useEffect)(() => {
+    manager.resume();
+    return () => manager.dispose();
+  }, [manager]);
+  const resolveUrl = (0, import_react38.useMemo)(
+    () => (address) => resolveAssetUrl(
+      baseUrl,
+      resolveTileUrl ? resolveTileUrl(address) : resolveSphereTemplateUrl(urlTemplate, address, indexBase)
+    ),
+    [baseUrl, resolveTileUrl, urlTemplate, indexBase]
+  );
+  const candidates = (0, import_react38.useMemo)(
+    () => config.levels.map(
+      (level, index) => sphereTileAddresses(level, index, config.tileSize).map((address) => ({
+        address,
+        bounds: sphereTileBounds(address, yawOffset)
+      }))
+    ),
+    [config, yawOffset]
+  );
+  const previewAddress = (0, import_react38.useMemo)(
+    () => sphereTileAddresses({ width: 2, height: 1 }, 0, 2)[0],
+    []
+  );
+  const [layers, setLayers] = (0, import_react38.useState)([]);
+  const scratch = (0, import_react38.useMemo)(
+    () => ({
+      camera: new import_three14.PerspectiveCamera(),
+      frustum: new import_three14.Frustum(),
+      matrix: new import_three14.Matrix4(),
+      quaternion: camera.quaternion.clone(),
+      fov: NaN,
+      width: 0,
+      height: 0,
+      dpr: 0,
+      time: -Infinity,
+      token: "",
+      level: -1,
+      loadMode: "",
+      manager: null
+    }),
+    [camera, candidates]
+  );
+  (0, import_fiber15.useFrame)(() => {
+    if (!(camera instanceof import_three14.PerspectiveCamera)) return;
+    const now = performance.now(), dpr = gl.getPixelRatio();
+    const reset = scratch.manager !== manager || scratch.loadMode !== loadMode;
+    if (!reset && (now - scratch.time < 100 || scratch.fov === camera.fov && scratch.width === size.width && scratch.height === size.height && scratch.dpr === dpr && scratch.quaternion.angleTo(camera.quaternion) < 1e-4))
+      return;
+    scratch.time = now;
+    scratch.fov = camera.fov;
+    scratch.width = size.width;
+    scratch.height = size.height;
+    scratch.dpr = dpr;
+    scratch.quaternion.copy(camera.quaternion);
+    scratch.manager = manager;
+    scratch.loadMode = loadMode;
+    scratch.camera.copy(camera, false);
+    scratch.camera.fov = Math.min(179, camera.fov + 8);
+    scratch.camera.updateProjectionMatrix();
+    scratch.camera.updateMatrixWorld();
+    scratch.matrix.multiplyMatrices(
+      scratch.camera.projectionMatrix,
+      scratch.camera.matrixWorldInverse
+    );
+    scratch.frustum.setFromProjectionMatrix(scratch.matrix);
+    let level = loadMode === "preview" ? -1 : loadMode === "base" ? 0 : preferredSphereLevel(config.levels, size.height, dpr, camera.fov);
+    const next = [];
+    let residentBytes = 0;
+    for (let index = 0; index <= level; index++) {
+      const addresses = candidates[index].filter(
+        ({ bounds }) => scratch.frustum.intersectsBox(bounds)
+      ).map(({ address }) => address);
+      const bytes = addresses.reduce(
+        (total, address) => total + address.width * address.height * 4,
+        0
+      );
+      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__ */ (0, import_jsx_runtime15.jsxs)("group", { visible, children: [
+    preview ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      SpherePatch,
+      {
+        address: previewAddress,
+        texture: preview,
+        yawOffset,
+        preview: true
+      }
+    ) : null,
+    loadMode !== "preview" ? layers.flatMap(
+      (layer) => layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        ManagedPatch,
+        {
+          address,
+          manager,
+          resolveUrl,
+          yawOffset,
+          ready
+        },
+        sphereTileKey(address)
+      ))
+    ) : null
+  ] });
+}
+function SphereTile({ multires, ...props }) {
+  const token = typeof multires === "string" ? multires : JSON.stringify(multires);
+  const config = (0, import_react38.useMemo)(() => parseSphereMultires(multires), [token]);
+  const sourceKey = `${props.baseUrl}\0${token}\0${props.previewUrl}\0${props.urlTemplate ?? ""}\0${props.indexBase ?? 1}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SphereTileSource, { ...props, config }, sourceKey);
+}
+
+// src/sphere.tsx
+var import_fiber16 = require("@react-three/fiber");
+var import_react39 = require("react");
+var import_three15 = require("three");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
+  const [texture, setTexture] = (0, import_react39.useState)(null);
+  const onLoadRef = (0, import_react39.useRef)(onLoad);
+  const onErrorRef = (0, import_react39.useRef)(onError);
+  onLoadRef.current = onLoad;
+  onErrorRef.current = onError;
+  (0, import_react39.useEffect)(() => {
+    if (!url) {
+      setTexture(null);
+      return;
+    }
+    let active = true;
+    const loader = new import_three15.TextureLoader();
+    setTexture(null);
+    loader.load(
+      url,
+      (loadedTexture) => {
+        if (!active) {
+          loadedTexture.dispose();
+          return;
+        }
+        loadedTexture.colorSpace = import_three15.SRGBColorSpace;
+        loadedTexture.wrapS = import_three15.RepeatWrapping;
+        loadedTexture.repeat.x = -1;
+        loadedTexture.offset.x = 1;
+        loadedTexture.anisotropy = anisotropy;
+        loadedTexture.magFilter = import_three15.LinearFilter;
+        loadedTexture.minFilter = generateMipmaps ? import_three15.LinearMipmapLinearFilter : import_three15.LinearFilter;
+        loadedTexture.generateMipmaps = generateMipmaps;
         loadedTexture.needsUpdate = true;
         setTexture(loadedTexture);
         onLoadRef.current?.(loadedTexture);
@@ -9971,7 +10693,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       active = false;
     };
   }, [anisotropy, generateMipmaps, url]);
-  (0, import_react37.useEffect)(
+  (0, import_react39.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -9989,9 +10711,9 @@ function Sphere({
   onPreviewError,
   visible = true
 }) {
-  const gl = (0, import_fiber15.useThree)((state) => state.gl);
+  const gl = (0, import_fiber16.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const resolvedPreviewUrl = (0, import_react37.useMemo)(
+  const resolvedPreviewUrl = (0, import_react39.useMemo)(
     () => resolveUrlAgainstFile(src, previewUrl),
     [previewUrl, src]
   );
@@ -10010,11 +10732,11 @@ function Sphere({
     onPreviewError
   );
   const displayTexture = texture ?? previewTexture;
-  const readyRef = (0, import_react37.useRef)(false);
-  (0, import_react37.useEffect)(() => {
+  const readyRef = (0, import_react39.useRef)(false);
+  (0, import_react39.useEffect)(() => {
     readyRef.current = false;
   }, [resolvedPreviewUrl, src]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!displayTexture || readyRef.current) {
       return;
     }
@@ -10024,18 +10746,18 @@ function Sphere({
   if (!displayTexture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "mesh",
     {
-      rotation: [0, import_three10.MathUtils.degToRad(90 + yawOffset), 0],
+      rotation: [0, import_three15.MathUtils.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           PanoBasicMaterial,
           {
             map: displayTexture,
-            side: import_three10.BackSide,
+            side: import_three15.BackSide,
             toneMapped: false
           }
         )
@@ -10045,10 +10767,10 @@ function Sphere({
 }
 
 // src/video/pano-video.tsx
-var import_fiber16 = require("@react-three/fiber");
-var import_react38 = require("react");
-var import_three11 = require("three");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_fiber17 = require("@react-three/fiber");
+var import_react40 = require("react");
+var import_three16 = require("three");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -10124,19 +10846,19 @@ function findTextTrack(video, tracks, trackId) {
   return list.length > 0 ? list[0] : null;
 }
 function applyEquirectangularLayout(texture, anisotropy) {
-  texture.colorSpace = import_three11.SRGBColorSpace;
-  texture.wrapS = import_three11.RepeatWrapping;
+  texture.colorSpace = import_three16.SRGBColorSpace;
+  texture.wrapS = import_three16.RepeatWrapping;
   texture.repeat.x = -1;
   texture.offset.x = 1;
   texture.anisotropy = anisotropy;
   texture.needsUpdate = true;
 }
 function usePosterTexture(poster, onError) {
-  const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react38.useState)(null);
-  const onErrorRef = (0, import_react38.useRef)(onError);
+  const gl = (0, import_fiber17.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react40.useState)(null);
+  const onErrorRef = (0, import_react40.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -10144,7 +10866,7 @@ function usePosterTexture(poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three11.TextureLoader();
+    const loader = new import_three16.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -10156,9 +10878,9 @@ function usePosterTexture(poster, onError) {
           loadedTexture,
           gl.capabilities.getMaxAnisotropy()
         );
-        loadedTexture.wrapT = import_three11.RepeatWrapping;
-        loadedTexture.magFilter = import_three11.LinearFilter;
-        loadedTexture.minFilter = import_three11.LinearMipmapLinearFilter;
+        loadedTexture.wrapT = import_three16.RepeatWrapping;
+        loadedTexture.magFilter = import_three16.LinearFilter;
+        loadedTexture.minFilter = import_three16.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         setTexture(loadedTexture);
       },
@@ -10173,7 +10895,7 @@ function usePosterTexture(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react38.useEffect)(
+  (0, import_react40.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -10231,39 +10953,39 @@ function PanoVideo({
   onTrackChange
 }) {
   usePanoMediaActivationIntent(autoPlay);
-  const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const host = (0, import_react38.useContext)(PanoVideoHostContext);
-  const overlay = (0, import_react38.useContext)(PanoChromeOverlayContext);
-  const variants = (0, import_react38.useMemo)(
+  const gl = (0, import_fiber17.useThree)((state) => state.gl);
+  const host = (0, import_react40.useContext)(PanoVideoHostContext);
+  const overlay = (0, import_react40.useContext)(PanoChromeOverlayContext);
+  const variants = (0, import_react40.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react38.useMemo)(
+  const captionAppearance = (0, import_react40.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react38.useState)(
+  const [variantId, setVariantId] = (0, import_react40.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react38.useState)(
+  const [trackId, setTrackId] = (0, import_react40.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react38.useState)(false);
-  const autoPlayRef = (0, import_react38.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react40.useState)(false);
+  const autoPlayRef = (0, import_react40.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react38.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react38.useRef)(
+  const blockedRef = (0, import_react40.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react40.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react38.useRef)({
+  const mediaCapabilitiesRef = (0, import_react40.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react38.useRef)(null);
+  const storeRef = (0, import_react40.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -10273,7 +10995,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react38.useRef)({
+  const actionsRef = (0, import_react40.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -10293,19 +11015,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = (0, import_react38.useRef)(onLoad);
-  const onErrorRef = (0, import_react38.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react38.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react38.useRef)(onEnded);
-  const onVariantChangeRef = (0, import_react38.useRef)(onVariantChange);
-  const onTrackChangeRef = (0, import_react38.useRef)(onTrackChange);
+  const onLoadRef = (0, import_react40.useRef)(onLoad);
+  const onErrorRef = (0, import_react40.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react40.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react40.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react40.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react40.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react38.useMemo)(() => {
+  const resource = (0, import_react40.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10315,14 +11037,14 @@ function PanoVideo({
     video.setAttribute("playsinline", "true");
     video.setAttribute("webkit-playsinline", "true");
     video.preload = "metadata";
-    const texture = new import_three11.VideoTexture(video);
+    const texture = new import_three16.VideoTexture(video);
     applyEquirectangularLayout(texture, 1);
-    texture.magFilter = import_three11.LinearFilter;
-    texture.minFilter = import_three11.LinearFilter;
+    texture.magFilter = import_three16.LinearFilter;
+    texture.minFilter = import_three16.LinearFilter;
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react38.useEffect)(
+  (0, import_react40.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -10337,13 +11059,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!resource || !overlay?.overlayElement) {
       return;
     }
@@ -10366,7 +11088,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react38.useCallback)(
+  const emitSnapshot = (0, import_react40.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -10418,7 +11140,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react38.useMemo)(
+  const controller = (0, import_react40.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -10470,7 +11192,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react38.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -10483,7 +11205,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react38.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10496,10 +11218,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -10556,7 +11278,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10648,7 +11370,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10668,7 +11390,7 @@ function PanoVideo({
     }
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10718,7 +11440,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -10753,7 +11475,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -10764,33 +11486,33 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "mesh",
       {
-        rotation: [0, import_three11.MathUtils.degToRad(90 + yawOffset), 0],
+        rotation: [0, import_three16.MathUtils.degToRad(90 + yawOffset), 0],
         visible,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             PanoBasicMaterial,
             {
               map: activeTexture,
-              side: import_three11.BackSide,
+              side: import_three16.BackSide,
               toneMapped: false
             }
           )
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
 // src/scenes.tsx
-var import_fiber21 = require("@react-three/fiber");
-var import_react43 = require("react");
-var import_three19 = require("three");
+var import_fiber22 = require("@react-three/fiber");
+var import_react45 = require("react");
+var import_three23 = require("three");
 
 // src/scene-transitions/presets.ts
 var TRANSITION_DEFAULTS = {
@@ -10839,9 +11561,9 @@ function isSnapshotTransition(preset) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-var import_fiber17 = require("@react-three/fiber");
-var import_react39 = require("react");
-var import_three13 = require("three");
+var import_fiber18 = require("@react-three/fiber");
+var import_react41 = require("react");
+var import_three18 = require("three");
 
 // src/scene-transitions/glsl.ts
 var GLSL_COMMON = `
@@ -10874,9 +11596,9 @@ float fbm(vec2 p) {
 `;
 
 // src/scene-transitions/overlay-utils.ts
-var import_three12 = require("three");
+var import_three17 = require("three");
 var OVERLAY_RENDER_ORDER = 1e4;
-var FULLSCREEN_PLANE = new import_three12.PlaneGeometry(1, 1);
+var FULLSCREEN_PLANE = new import_three17.PlaneGeometry(1, 1);
 function isPerspectiveCamera(camera) {
   return camera.isPerspectiveCamera === true;
 }
@@ -10895,7 +11617,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -10948,8 +11670,8 @@ var PARTICLE_FRAGMENT_SHADER = `
   }
 `;
 function createParticleGeometry() {
-  const quad = new import_three13.PlaneGeometry(1, 1);
-  const geometry = new import_three13.InstancedBufferGeometry();
+  const quad = new import_three18.PlaneGeometry(1, 1);
+  const geometry = new import_three18.InstancedBufferGeometry();
   if (quad.index) {
     geometry.setIndex(quad.index.clone());
   }
@@ -10959,7 +11681,7 @@ function createParticleGeometry() {
   for (let i = 0; i < PARTICLE_COUNT; i += 1) {
     indexes[i] = i;
   }
-  geometry.setAttribute("instanceIndex", new import_three13.InstancedBufferAttribute(indexes, 1));
+  geometry.setAttribute("instanceIndex", new import_three18.InstancedBufferAttribute(indexes, 1));
   geometry.instanceCount = PARTICLE_COUNT;
   quad.dispose();
   return geometry;
@@ -10971,36 +11693,36 @@ function ParticleOverlay({
   runId,
   onFinish
 }) {
-  const { camera } = (0, import_fiber17.useThree)();
-  const meshRef = (0, import_react39.useRef)(null);
-  const startRef = (0, import_react39.useRef)(null);
-  const finishedRef = (0, import_react39.useRef)(false);
-  const directionRef = (0, import_react39.useRef)(new import_three13.Vector3());
-  const geometry = (0, import_react39.useMemo)(() => createParticleGeometry(), []);
-  const material = (0, import_react39.useMemo)(
-    () => new import_three13.ShaderMaterial({
+  const { camera } = (0, import_fiber18.useThree)();
+  const meshRef = (0, import_react41.useRef)(null);
+  const startRef = (0, import_react41.useRef)(null);
+  const finishedRef = (0, import_react41.useRef)(false);
+  const directionRef = (0, import_react41.useRef)(new import_three18.Vector3());
+  const geometry = (0, import_react41.useMemo)(() => createParticleGeometry(), []);
+  const material = (0, import_react41.useMemo)(
+    () => new import_three18.ShaderMaterial({
       transparent: true,
       depthTest: false,
       depthWrite: false,
-      side: import_three13.DoubleSide,
+      side: import_three18.DoubleSide,
       uniforms: {
         map: { value: snapshot.texture },
         progress: { value: 0 },
-        grid: { value: new import_three13.Vector2(PARTICLE_GRID, PARTICLE_GRID) }
+        grid: { value: new import_three18.Vector2(PARTICLE_GRID, PARTICLE_GRID) }
       },
       vertexShader: PARTICLE_VERTEX_SHADER,
       fragmentShader: PARTICLE_FRAGMENT_SHADER
     }),
     [snapshot.texture]
   );
-  (0, import_react39.useEffect)(() => () => geometry.dispose(), [geometry]);
-  (0, import_react39.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react41.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react41.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
   }, [material, runId]);
-  (0, import_fiber17.useFrame)((state) => {
+  (0, import_fiber18.useFrame)((state) => {
     const mesh = meshRef.current;
     if (!mesh || !isPerspectiveCamera(camera)) {
       return;
@@ -11017,7 +11739,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "mesh",
     {
       ref: meshRef,
@@ -11030,12 +11752,12 @@ function ParticleOverlay({
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-var import_fiber18 = require("@react-three/fiber");
-var import_react40 = require("react");
-var import_three15 = require("three");
+var import_fiber19 = require("@react-three/fiber");
+var import_react42 = require("react");
+var import_three20 = require("three");
 
 // src/scene-transitions/snapshot-shaders.ts
-var import_three14 = require("three");
+var import_three19 = require("three");
 var SNAPSHOT_VERTEX_SHADER = `
   varying vec2 vUv;
   void main() {
@@ -11295,15 +12017,15 @@ var SNAPSHOT_FRAGMENT_SHADERS = {
   `)
 };
 function createSnapshotMaterial(preset, texture) {
-  return new import_three14.ShaderMaterial({
+  return new import_three19.ShaderMaterial({
     transparent: true,
     depthTest: false,
     depthWrite: false,
-    side: import_three14.DoubleSide,
+    side: import_three19.DoubleSide,
     uniforms: {
       map: { value: texture },
       progress: { value: 0 },
-      resolution: { value: new import_three14.Vector2(1, 1) }
+      resolution: { value: new import_three19.Vector2(1, 1) }
     },
     vertexShader: SNAPSHOT_VERTEX_SHADER,
     fragmentShader: SNAPSHOT_FRAGMENT_SHADERS[preset]
@@ -11311,7 +12033,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -11319,26 +12041,26 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, gl } = (0, import_fiber18.useThree)();
-  const meshRef = (0, import_react40.useRef)(null);
-  const startRef = (0, import_react40.useRef)(null);
-  const finishedRef = (0, import_react40.useRef)(false);
-  const directionRef = (0, import_react40.useRef)(new import_three15.Vector3());
-  const material = (0, import_react40.useMemo)(() => {
+  const { camera, gl } = (0, import_fiber19.useThree)();
+  const meshRef = (0, import_react42.useRef)(null);
+  const startRef = (0, import_react42.useRef)(null);
+  const finishedRef = (0, import_react42.useRef)(false);
+  const directionRef = (0, import_react42.useRef)(new import_three20.Vector3());
+  const material = (0, import_react42.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
     return createSnapshotMaterial(transition.preset, snapshot.texture);
   }, [snapshot.texture, transition.preset]);
-  (0, import_react40.useEffect)(() => () => material?.dispose(), [material]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => () => material?.dispose(), [material]);
+  (0, import_react42.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     if (material) {
       material.uniforms.progress.value = 0;
     }
   }, [material, runId]);
-  (0, import_fiber18.useFrame)((state) => {
+  (0, import_fiber19.useFrame)((state) => {
     const mesh = meshRef.current;
     if (!mesh || !material || !isPerspectiveCamera(camera)) {
       return;
@@ -11360,21 +12082,21 @@ function SnapshotOverlay({
   if (!material) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -11402,7 +12124,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -11412,233 +12134,10 @@ function TransitionOverlay(props) {
 }
 
 // src/tile/texture-manager-context.tsx
-var import_fiber19 = require("@react-three/fiber");
-var import_react41 = require("react");
-
-// src/tile/texture-manager.ts
-var import_three16 = require("three");
-var EMPTY_TEXTURE_SNAPSHOT = {
-  status: "idle",
-  texture: null,
-  error: null
-};
-var TileTextureManager = class {
-  constructor(options) {
-    this.loader = new import_three16.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);
-    }
-    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 = import_three16.SRGBColorSpace;
-    texture.wrapS = import_three16.ClampToEdgeWrapping;
-    texture.wrapT = import_three16.ClampToEdgeWrapping;
-    texture.magFilter = import_three16.LinearFilter;
-    texture.minFilter = import_three16.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-manager-context.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react41.createContext)(
+var import_fiber20 = require("@react-three/fiber");
+var import_react43 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var TileTextureManagerContext = (0, import_react43.createContext)(
   null
 );
 function TileTextureManagerProvider({
@@ -11646,9 +12145,9 @@ function TileTextureManagerProvider({
   maxTextureMemoryMb = 128,
   maxConcurrentLoads = 4
 }) {
-  const gl = (0, import_fiber19.useThree)((state) => state.gl);
+  const gl = (0, import_fiber20.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react41.useMemo)(
+  const manager = (0, import_react43.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -11657,23 +12156,23 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return (0, import_react41.useContext)(TileTextureManagerContext);
+  return (0, import_react43.useContext)(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
-var import_fiber20 = require("@react-three/fiber");
-var import_react42 = require("react");
-var import_three18 = require("three");
+var import_fiber21 = require("@react-three/fiber");
+var import_react44 = require("react");
+var import_three22 = require("three");
 
 // src/tile/face-layout.ts
-var import_three17 = require("three");
+var import_three21 = require("three");
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
 var CUBE_RADIUS = DEFAULT_PANORAMA_RADIUS;
@@ -11724,8 +12223,8 @@ function getFaceQuaternion(face) {
     return cached;
   }
   const transform = getFaceTransform(face);
-  const quaternion = new import_three17.Quaternion().setFromEuler(
-    new import_three17.Euler(...transform.rotation, "XYZ")
+  const quaternion = new import_three21.Quaternion().setFromEuler(
+    new import_three21.Euler(...transform.rotation, "XYZ")
   );
   faceQuaternionCache.set(face, quaternion);
   return quaternion;
@@ -11736,17 +12235,17 @@ function getTileBoundingBox(address, radius = CUBE_RADIUS) {
   const halfWidth = local.width / 2;
   const halfHeight = local.height / 2;
   const quaternion = getFaceQuaternion(address.face);
-  const position = new import_three17.Vector3(...transform.position);
+  const position = new import_three21.Vector3(...transform.position);
   const corners = [
-    new import_three17.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
-    new import_three17.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
-    new import_three17.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
-    new import_three17.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
+    new import_three21.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
+    new import_three21.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
+    new import_three21.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
+    new import_three21.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
   }
-  return new import_three17.Box3().setFromPoints(corners);
+  return new import_three21.Box3().setFromPoints(corners);
 }
 function makeTileAddress(face, level, faceSize, tileSize, col, row) {
   const left = (col - 1) * tileSize;
@@ -11793,7 +12292,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)}`);
   }
@@ -11809,110 +12308,61 @@ 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 };
-  }
-  const values = multires.split(",").map((part) => Number(part.trim()));
-  if (values.length < 2 || values.some((value) => !Number.isFinite(value))) {
-    throw new Error(
-      "multires must contain a tile size followed by at least one face size"
-    );
-  }
-  const tileSize = positiveInteger(values[0], "multires tile size");
-  const levels = ascendingLevels(
-    values.slice(1).map(
-      (level, index) => positiveInteger(level, `multires level ${index + 1}`)
-    )
-  );
-  return { tileSize, levels };
-}
-var DEFAULT_TILE_URL_TEMPLATE = "tiles/%s/l%l/%v/l%l_%s_%h_%v.webp";
-function buildDefaultTileUrlTemplate() {
-  return DEFAULT_TILE_URL_TEMPLATE;
-}
-function resolveRelativeTileUrl(baseUrl, relativePath) {
-  return resolveRelativeAssetUrl(baseUrl, relativePath);
-}
-function resolveTemplateUrl(template, address) {
-  return template.replace(/%s/g, address.face).replace(/%l/g, String(address.level)).replace(/%(0*)([hxucvywr])/g, (_match, zeroes, placeholder) => {
-    const value = "hxuc".includes(placeholder) ? address.col : address.row;
-    return String(value).padStart(zeroes.length + 1, "0");
-  });
-}
-
-// src/tile/tile.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var MAX_LOD_UPDATE_INTERVAL_MS = 100;
-var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
-var FAST_FOV_THRESHOLD_DEGREES = 0.5;
-var VIEW_CHANGE_EPSILON = 1e-4;
-var VISIBILITY_FOV_PADDING_DEGREES = 8;
-var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
-var SHARED_TILE_GEOMETRY = new import_three18.PlaneGeometry(1, 1);
-function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = (0, import_react42.useState)(null);
-  const onErrorRef = (0, import_react42.useRef)(onError);
-  onErrorRef.current = onError;
-  (0, import_react42.useEffect)(() => {
-    if (!url) {
-      setTexture(null);
-      return;
-    }
-    let active = true;
-    const loader = new import_three18.TextureLoader();
-    setTexture(null);
-    loader.load(
-      url,
-      (loadedTexture) => {
-        if (!active) {
-          loadedTexture.dispose();
-          return;
-        }
-        loadedTexture.colorSpace = import_three18.SRGBColorSpace;
-        loadedTexture.wrapS = import_three18.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three18.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three18.LinearFilter;
-        loadedTexture.minFilter = import_three18.LinearFilter;
-        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]);
-  (0, import_react42.useEffect)(
-    () => () => {
-      texture?.dispose();
-    },
-    [texture]
+    return { tileSize: tileSize2, levels: levels2 };
+  }
+  const values = multires.split(",").map((part) => Number(part.trim()));
+  if (values.length < 2 || values.some((value) => !Number.isFinite(value))) {
+    throw new Error(
+      "multires must contain a tile size followed by at least one face size"
+    );
+  }
+  const tileSize = positiveInteger2(values[0], "multires tile size");
+  const levels = ascendingLevels(
+    values.slice(1).map(
+      (level, index) => positiveInteger2(level, `multires level ${index + 1}`)
+    )
   );
-  return texture;
+  return { tileSize, levels };
+}
+var DEFAULT_TILE_URL_TEMPLATE = "tiles/%s/l%l/%v/l%l_%s_%h_%v.webp";
+function buildDefaultTileUrlTemplate() {
+  return DEFAULT_TILE_URL_TEMPLATE;
+}
+function resolveRelativeTileUrl(baseUrl, relativePath) {
+  return resolveRelativeAssetUrl(baseUrl, relativePath);
+}
+function resolveTemplateUrl(template, address) {
+  return template.replace(/%s/g, address.face).replace(/%l/g, String(address.level)).replace(/%(0*)([hxucvywr])/g, (_match, zeroes, placeholder) => {
+    const value = "hxuc".includes(placeholder) ? address.col : address.row;
+    return String(value).padStart(zeroes.length + 1, "0");
+  });
 }
+
+// src/tile/tile.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var MAX_LOD_UPDATE_INTERVAL_MS = 100;
+var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
+var FAST_FOV_THRESHOLD_DEGREES = 0.5;
+var VIEW_CHANGE_EPSILON = 1e-4;
+var VISIBILITY_FOV_PADDING_DEGREES = 8;
+var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
+var SHARED_TILE_GEOMETRY = new import_three22.PlaneGeometry(1, 1);
 function PreviewFace({
   face,
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react42.useMemo)(() => {
-    const nextGeometry = new import_three18.PlaneGeometry(
+  const geometry = (0, import_react44.useMemo)(() => {
+    const nextGeometry = new import_three22.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
     );
@@ -11921,29 +12371,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]);
-  (0, import_react42.useEffect)(
+  (0, import_react44.useEffect)(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11959,7 +12406,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     PreviewFace,
     {
       face,
@@ -11969,28 +12416,7 @@ function PreviewCube({
     face
   ));
 }
-function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react42.useState)(() => ({
-    manager,
-    key,
-    url,
-    snapshot: manager.getSnapshot(key)
-  }));
-  const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  (0, import_react42.useEffect)(
-    () => manager.acquire(key, url, address, (nextSnapshot) => {
-      setManagedState({
-        manager,
-        key,
-        url,
-        snapshot: nextSnapshot
-      });
-    }),
-    [key, manager, url]
-  );
-  return snapshot;
-}
-var TileMesh = (0, import_react42.memo)(function TileMesh2({
+var TileMesh = (0, import_react44.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -12004,14 +12430,14 @@ var TileMesh = (0, import_react42.memo)(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -12023,12 +12449,12 @@ var TileMesh = (0, import_react42.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react42.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react44.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     TileMesh,
     {
       address,
@@ -12128,8 +12554,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new import_three18.Vector3());
-  const center = new import_three18.Vector3();
+  const direction = camera.getWorldDirection(new import_three22.Vector3());
+  const center = new import_three22.Vector3();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -12174,9 +12600,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,
@@ -12196,11 +12620,11 @@ function Tile({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = (0, import_fiber20.useThree)();
-  const multiresConfig = (0, import_react42.useMemo)(() => parseMultires(multires), [multires]);
+  const { camera, gl, size } = (0, import_fiber21.useThree)();
+  const multiresConfig = (0, import_react44.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react42.useMemo)(
+  const candidatesByLevel = (0, import_react44.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -12212,13 +12636,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react42.useRef)(onLoadProgress);
-  const errorRef = (0, import_react42.useRef)(onTileError);
-  const levelChangeRef = (0, import_react42.useRef)(onLevelChange);
+  const progressRef = (0, import_react44.useRef)(onLoadProgress);
+  const errorRef = (0, import_react44.useRef)(onTileError);
+  const levelChangeRef = (0, import_react44.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react42.useMemo)(
+  const ownedManager = (0, import_react44.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -12239,7 +12663,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react42.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -12249,11 +12673,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react42.useRef)(false);
-  (0, import_react42.useEffect)(() => {
+  const readyRef = (0, import_react44.useRef)(false);
+  (0, import_react44.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -12261,31 +12685,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react42.useMemo)(
+  const resolveUrl = (0, import_react44.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = (0, import_react42.useState)([]);
-  const layerTokenRef = (0, import_react42.useRef)("");
-  const currentLevelRef = (0, import_react42.useRef)(1);
-  const lastUpdateAtRef = (0, import_react42.useRef)(-Infinity);
-  const visibilityDirtyRef = (0, import_react42.useRef)(true);
-  const lastVisibilityQuaternionRef = (0, import_react42.useRef)(camera.quaternion.clone());
-  const lastVisibilityFovRef = (0, import_react42.useRef)(Number.NaN);
-  const lastViewportRef = (0, import_react42.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react42.useRef)(new import_three18.Frustum());
-  const projectionMatrixRef = (0, import_react42.useRef)(new import_three18.Matrix4());
-  const visibilityCameraRef = (0, import_react42.useRef)(new import_three18.PerspectiveCamera());
-  (0, import_react42.useEffect)(() => {
+  const [layers, setLayers] = (0, import_react44.useState)([]);
+  const layerTokenRef = (0, import_react44.useRef)("");
+  const currentLevelRef = (0, import_react44.useRef)(1);
+  const lastUpdateAtRef = (0, import_react44.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react44.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react44.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react44.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react44.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react44.useRef)(new import_three22.Frustum());
+  const projectionMatrixRef = (0, import_react44.useRef)(new import_three22.Matrix4());
+  const visibilityCameraRef = (0, import_react44.useRef)(new import_three22.PerspectiveCamera());
+  (0, import_react44.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -12299,11 +12723,11 @@ function Tile({
       setLayers(nextLayers);
     }
   };
-  (0, import_fiber20.useFrame)(() => {
+  (0, import_fiber21.useFrame)(() => {
     if (loadMode === "preview") {
       return;
     }
-    if (!(camera instanceof import_three18.PerspectiveCamera)) {
+    if (!(camera instanceof import_three22.PerspectiveCamera)) {
       return;
     }
     const now = performance.now();
@@ -12365,15 +12789,9 @@ function Tile({
     };
     commitLayers(nextLayers);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      PreviewCube,
-      {
-        texture: previewTexture,
-        faceOrder: previewFaceOrder
-      }
-    ) : null,
-    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PreviewCube, { texture: previewTexture, faceOrder: previewFaceOrder }) : null,
+    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       TileLayerMeshes,
       {
         layer,
@@ -12386,7 +12804,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function SceneSource({
   scene,
   visible,
@@ -12399,7 +12817,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         Sphere,
         {
           src: scene.src,
@@ -12412,7 +12830,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         Tile,
         {
           ...tileProps,
@@ -12435,17 +12853,17 @@ function SnapshotCapture({
   maxPixels,
   onCaptured
 }) {
-  const { camera, gl, scene, size } = (0, import_fiber21.useThree)();
-  const capturedRequestRef = (0, import_react43.useRef)(0);
-  const renderTargetRef = (0, import_react43.useRef)(null);
-  (0, import_react43.useEffect)(
+  const { camera, gl, scene, size } = (0, import_fiber22.useThree)();
+  const capturedRequestRef = (0, import_react45.useRef)(0);
+  const renderTargetRef = (0, import_react45.useRef)(null);
+  (0, import_react45.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
     },
     []
   );
-  (0, import_fiber21.useFrame)(() => {
+  (0, import_fiber22.useFrame)(() => {
     if (requestId === 0 || requestId === capturedRequestRef.current) {
       return;
     }
@@ -12455,14 +12873,14 @@ function SnapshotCapture({
     const scale = Math.min(1, Math.sqrt(maxPixels / (sourceWidth * sourceHeight)));
     const width = Math.max(1, Math.floor(sourceWidth * scale));
     const height = Math.max(1, Math.floor(sourceHeight * scale));
-    const nextTarget = new import_three19.WebGLRenderTarget(width, height, {
+    const nextTarget = new import_three23.WebGLRenderTarget(width, height, {
       depthBuffer: false,
       stencilBuffer: false
     });
-    nextTarget.texture.colorSpace = import_three19.LinearSRGBColorSpace;
+    nextTarget.texture.colorSpace = import_three23.LinearSRGBColorSpace;
     nextTarget.texture.generateMipmaps = false;
-    nextTarget.texture.minFilter = import_three19.LinearFilter;
-    nextTarget.texture.magFilter = import_three19.LinearFilter;
+    nextTarget.texture.minFilter = import_three23.LinearFilter;
+    nextTarget.texture.magFilter = import_three23.LinearFilter;
     const previousTarget = gl.getRenderTarget();
     gl.setRenderTarget(nextTarget);
     gl.clear();
@@ -12494,50 +12912,50 @@ function ScenesController({
   snapshotMaxPixels = 3686400,
   phaseRef: externalPhaseRef
 }) {
-  const controlsRef = (0, import_react43.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react45.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react43.useMemo)(
+  const transition = (0, import_react45.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react43.useMemo)(
+  const sceneMap = (0, import_react45.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react43.useState)([
+  const [slots, setSlots] = (0, import_react45.useState)([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = (0, import_react43.useState)(0);
-  const [liveSlot, setLiveSlot] = (0, import_react43.useState)(0);
-  const [pendingSlot, setPendingSlot] = (0, import_react43.useState)(null);
-  const [phase, setPhase] = (0, import_react43.useState)(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = (0, import_react43.useState)(0);
-  const [transitionRunId, setTransitionRunId] = (0, import_react43.useState)(0);
-  const [snapshot, setSnapshot] = (0, import_react43.useState)(null);
-  const [recoveryKey, setRecoveryKey] = (0, import_react43.useState)(0);
-  const requestedSceneIdRef = (0, import_react43.useRef)(activeSceneId);
-  const captureReasonRef = (0, import_react43.useRef)("start");
-  const interactionReleaseRef = (0, import_react43.useRef)(null);
-  const slotsRef = (0, import_react43.useRef)(slots);
-  const phaseRef = (0, import_react43.useRef)(phase);
-  const liveSlotRef = (0, import_react43.useRef)(liveSlot);
-  const transitionFromRef = (0, import_react43.useRef)(initialScene);
+  const [activeSlot, setActiveSlot] = (0, import_react45.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react45.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react45.useState)(null);
+  const [phase, setPhase] = (0, import_react45.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react45.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react45.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react45.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react45.useState)(0);
+  const requestedSceneIdRef = (0, import_react45.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react45.useRef)("start");
+  const interactionReleaseRef = (0, import_react45.useRef)(null);
+  const slotsRef = (0, import_react45.useRef)(slots);
+  const phaseRef = (0, import_react45.useRef)(phase);
+  const liveSlotRef = (0, import_react45.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react45.useRef)(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   if (externalPhaseRef) {
     externalPhaseRef.current = phase;
   }
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = (0, import_react43.useCallback)(() => {
+  const releaseInteraction = (0, import_react45.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react43.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react45.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = (0, import_react43.useCallback)((scene) => {
+  const startPreload = (0, import_react45.useCallback)((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -12548,7 +12966,7 @@ function ScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -12572,7 +12990,7 @@ function ScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = (0, import_react43.useCallback)((slot) => {
+  const handleReady = (0, import_react45.useCallback)((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -12603,7 +13021,7 @@ function ScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = (0, import_react43.useCallback)((nextSnapshot) => {
+  const handleCaptured = (0, import_react45.useCallback)((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -12625,7 +13043,7 @@ function ScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = (0, import_react43.useCallback)(() => {
+  const finishTransition = (0, import_react45.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -12650,12 +13068,12 @@ function ScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  (0, import_react43.useEffect)(() => () => {
+  (0, import_react45.useEffect)(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
-  const { gl } = (0, import_fiber21.useThree)();
-  (0, import_react43.useEffect)(() => {
+  const { gl } = (0, import_fiber22.useThree)();
+  (0, import_react45.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -12679,8 +13097,8 @@ function ScenesController({
   }, [gl, manager, releaseInteraction, snapshot]);
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react45.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -12692,7 +13110,7 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         SceneSource,
         {
           scene: source,
@@ -12708,7 +13126,7 @@ function ScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       TransitionOverlay,
       {
         snapshot,
@@ -12731,11 +13149,11 @@ function Scenes({
   ...rest
 }) {
   const isControlled = controlledId !== void 0;
-  const [internalId, setInternalId] = (0, import_react43.useState)(
+  const [internalId, setInternalId] = (0, import_react45.useState)(
     () => controlledId ?? defaultActiveSceneId ?? scenes[0]?.id ?? ""
   );
   const resolvedId = isControlled ? controlledId : internalId;
-  const requestSceneChange = (0, import_react43.useCallback)(
+  const requestSceneChange = (0, import_react45.useCallback)(
     (id) => {
       if (isControlled) {
         onActiveSceneIdChange?.(id);
@@ -12745,13 +13163,13 @@ function Scenes({
     },
     [isControlled, onActiveSceneIdChange]
   );
-  const scenesRef = (0, import_react43.useRef)(scenes);
+  const scenesRef = (0, import_react45.useRef)(scenes);
   scenesRef.current = scenes;
-  const resolvedIdRef = (0, import_react43.useRef)(resolvedId);
+  const resolvedIdRef = (0, import_react45.useRef)(resolvedId);
   resolvedIdRef.current = resolvedId;
-  const host = (0, import_react43.useContext)(ScenesHostContext);
-  const phaseRef = (0, import_react43.useRef)("idle");
-  (0, import_react43.useEffect)(() => {
+  const host = (0, import_react45.useContext)(ScenesHostContext);
+  const phaseRef = (0, import_react45.useRef)("idle");
+  (0, import_react45.useEffect)(() => {
     if (!host) {
       return;
     }
@@ -12801,12 +13219,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         ScenesController,
         {
           ...rest,
@@ -12820,26 +13238,26 @@ function Scenes({
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_fiber23 = require("@react-three/fiber");
-var import_react47 = require("react");
-var import_three22 = require("three");
+var import_fiber24 = require("@react-three/fiber");
+var import_react49 = require("react");
+var import_three26 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
-var import_fiber22 = require("@react-three/fiber");
-var import_react46 = require("react");
-var import_three20 = require("three");
+var import_fiber23 = require("@react-three/fiber");
+var import_react48 = require("react");
+var import_three24 = require("three");
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 
 // src/webvr/stereo-html.tsx
 var import_drei = require("@react-three/drei");
-var import_react44 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react46 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function useFallbackStereoView() {
-  const runtime = (0, import_react44.useContext)(WebVRRuntimeContext);
+  const runtime = (0, import_react46.useContext)(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
-  const fallback = (0, import_react44.useSyncExternalStore)(
+  const fallback = (0, import_react46.useSyncExternalStore)(
     (onStoreChange) => host ? subscribeWebVRHost(host, onStoreChange) : () => void 0,
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
@@ -12860,10 +13278,10 @@ function stereoCalculatePosition(eye, stereoView) {
 function PanoHtml({ children, ...htmlProps }) {
   const stereoView = useFallbackStereoView();
   if (!stereoView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drei.Html, { ...htmlProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_drei.Html, { ...htmlProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_drei.Html,
       {
         ...htmlProps,
@@ -12871,7 +13289,7 @@ function PanoHtml({ children, ...htmlProps }) {
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_drei.Html,
       {
         ...htmlProps,
@@ -12884,7 +13302,7 @@ function PanoHtml({ children, ...htmlProps }) {
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -12893,7 +13311,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"
@@ -12953,16 +13374,16 @@ function HotspotTooltip({
   offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   appearance
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react45.useState)(false);
-  (0, import_react45.useEffect)(() => {
+  const [imageFailed, setImageFailed] = (0, import_react47.useState)(false);
+  (0, import_react47.useEffect)(() => {
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = (0, import_react45.useMemo)(
+  const resolvedAppearance = (0, import_react47.useMemo)(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = (0, import_react45.useMemo)(
+  const bubbleStyle = (0, import_react47.useMemo)(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -12970,6 +13391,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,
@@ -12981,30 +13405,33 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    "div",
-    {
-      className: "pano-hotspot-tooltip",
-      role: "tooltip",
-      style: bubbleStyle,
-      children: [
-        showImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "img",
-          {
-            alt: content.imageAlt ?? content.text ?? "",
-            className: "pano-hotspot-tooltip-image",
-            onError: () => setImageFailed(true),
-            src: content.image
-          }
-        ) : null,
-        content.text ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pano-hotspot-tooltip", role: "tooltip", style: bubbleStyle, children: [
+    showImage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "img",
+      {
+        alt: content.imageAlt ?? content.text ?? "",
+        className: "pano-hotspot-tooltip-image",
+        onError: () => setImageFailed(true),
+        src: content.image
+      }
+    ) : null,
+    content.text ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "p",
+      {
+        className: "pano-hotspot-tooltip-text",
+        style: {
+          lineHeight: "inherit",
+          letterSpacing: "inherit",
+          fontFamily: "inherit"
+        },
+        children: content.text
+      }
+    ) : null
+  ] }) });
 }
 
 // src/hotspot/hotspot-anchor.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -13012,28 +13439,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 import_three20.Vector3(0, 0, 1);
-var TOOLTIP_WORLD_BOX = new import_three20.Box3();
-var TOOLTIP_LOCAL_BOX = new import_three20.Box3();
-var TOOLTIP_CORNER = new import_three20.Vector3();
-var TOOLTIP_INVERSE = new import_three20.Matrix4();
-var TOOLTIP_WORLD_CORNER = new import_three20.Vector3();
-var TOOLTIP_PROJECTED = new import_three20.Vector3();
-var TOOLTIP_RAY_ORIGIN = new import_three20.Vector3();
-var TOOLTIP_RAY_FAR = new import_three20.Vector3();
-var TOOLTIP_RAY_DIRECTION = new import_three20.Vector3();
-var TOOLTIP_RAY = new import_three20.Ray();
-var TOOLTIP_PLANE = new import_three20.Plane();
-var TOOLTIP_INTERSECTION = new import_three20.Vector3();
-var TOOLTIP_PLANE_NORMAL = new import_three20.Vector3();
-var TOOLTIP_PLANE_POINT = new import_three20.Vector3();
+var LOCAL_FORWARD = new import_three24.Vector3(0, 0, 1);
+var TOOLTIP_WORLD_BOX = new import_three24.Box3();
+var TOOLTIP_LOCAL_BOX = new import_three24.Box3();
+var TOOLTIP_CORNER = new import_three24.Vector3();
+var TOOLTIP_INVERSE = new import_three24.Matrix4();
+var TOOLTIP_WORLD_CORNER = new import_three24.Vector3();
+var TOOLTIP_PROJECTED = new import_three24.Vector3();
+var TOOLTIP_RAY_ORIGIN = new import_three24.Vector3();
+var TOOLTIP_RAY_FAR = new import_three24.Vector3();
+var TOOLTIP_RAY_DIRECTION = new import_three24.Vector3();
+var TOOLTIP_RAY = new import_three24.Ray();
+var TOOLTIP_PLANE = new import_three24.Plane();
+var TOOLTIP_INTERSECTION = new import_three24.Vector3();
+var TOOLTIP_PLANE_NORMAL = new import_three24.Vector3();
+var TOOLTIP_PLANE_POINT = new import_three24.Vector3();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? import_three20.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(import_three20.MathUtils.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? import_three24.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(import_three24.MathUtils.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -13046,7 +13473,7 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return import_three20.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return import_three24.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight) {
   if (orientation2 === "billboard") {
@@ -13054,8 +13481,8 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   } else {
     group.quaternion.copy(surfaceQuaternion3);
   }
-  group.rotateOnAxis(LOCAL_FORWARD, import_three20.MathUtils.degToRad(-rotation));
-  const scaleFactor = scaleMode === "fixed" && camera instanceof import_three20.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+  group.rotateOnAxis(LOCAL_FORWARD, import_three24.MathUtils.degToRad(-rotation));
+  const scaleFactor = scaleMode === "fixed" && camera instanceof import_three24.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
   group.scale.set(
     (useAngularScale ? worldWidth : 1) * scaleFactor,
     (useAngularScale ? worldHeight : 1) * scaleFactor,
@@ -13064,40 +13491,40 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   group.updateMatrixWorld();
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = import_three20.MathUtils.clamp(
+  const safeWidth = import_three24.MathUtils.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = import_three20.MathUtils.clamp(
+  const safeHeight = import_three24.MathUtils.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(import_three20.MathUtils.degToRad(safeWidth) / 2),
-    Math.tan(import_three20.MathUtils.degToRad(safeHeight) / 2)
+    Math.tan(import_three24.MathUtils.degToRad(safeWidth) / 2),
+    Math.tan(import_three24.MathUtils.degToRad(safeHeight) / 2)
   );
   return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
 }
 function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = import_three20.MathUtils.clamp(referenceFov, 1, 179);
-  return Math.tan(import_three20.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three20.MathUtils.degToRad(safeReferenceFov) / 2);
+  const safeReferenceFov = import_three24.MathUtils.clamp(referenceFov, 1, 179);
+  return Math.tan(import_three24.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three24.MathUtils.degToRad(safeReferenceFov) / 2);
 }
 function createSurfaceQuaternion(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = import_three20.MathUtils.degToRad(position.pitch);
-  const yaw = import_three20.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three20.Vector3(
+  const pitch = import_three24.MathUtils.degToRad(position.pitch);
+  const yaw = import_three24.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three24.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
   const localRight = localUp.clone().cross(inward).normalize();
-  const basis = new import_three20.Matrix4().makeBasis(localRight, localUp, inward);
-  return new import_three20.Quaternion().setFromRotationMatrix(basis);
+  const basis = new import_three24.Matrix4().makeBasis(localRight, localUp, inward);
+  return new import_three24.Quaternion().setFromRotationMatrix(basis);
 }
 function makeInteractionEvent(id, position, event) {
   return {
@@ -13110,7 +13537,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return import_three20.MathUtils.radToDeg(aVector.angleTo(bVector));
+  return import_three24.MathUtils.radToDeg(aVector.angleTo(bVector));
 }
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
@@ -13341,24 +13768,24 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react46.useContext)(PanoramaViewContext);
-  const hotspotTargetRegistry = (0, import_react46.useContext)(HotspotTargetRegistryContext);
-  const eventBus = (0, import_react46.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react48.useContext)(PanoramaViewContext);
+  const hotspotTargetRegistry = (0, import_react48.useContext)(HotspotTargetRegistryContext);
+  const eventBus = (0, import_react48.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = (0, import_fiber22.useThree)();
-  const groupRef = (0, import_react46.useRef)(null);
-  const tooltipAnchorRef = (0, import_react46.useRef)(null);
-  const dragStateRef = (0, import_react46.useRef)(null);
-  const suppressNextClickRef = (0, import_react46.useRef)(false);
-  const [hovered, setHovered] = (0, import_react46.useState)(false);
-  const [dragging, setDragging] = (0, import_react46.useState)(false);
-  const [pinned, setPinned] = (0, import_react46.useState)(false);
-  const tooltipContent = (0, import_react46.useMemo)(
+  const { camera, size } = (0, import_fiber23.useThree)();
+  const groupRef = (0, import_react48.useRef)(null);
+  const tooltipAnchorRef = (0, import_react48.useRef)(null);
+  const dragStateRef = (0, import_react48.useRef)(null);
+  const suppressNextClickRef = (0, import_react48.useRef)(false);
+  const [hovered, setHovered] = (0, import_react48.useState)(false);
+  const [dragging, setDragging] = (0, import_react48.useState)(false);
+  const [pinned, setPinned] = (0, import_react48.useState)(false);
+  const tooltipContent = (0, import_react48.useMemo)(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
   const normalizedPosition = normalizePanoPosition(position);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!hotspotTargetRegistry) {
       return;
     }
@@ -13375,19 +13802,19 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = (0, import_react46.useMemo)(
+  const worldPosition = (0, import_react48.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react46.useMemo)(
+  const surfaceQuaternion3 = (0, import_react48.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = (0, import_react46.useMemo)(() => {
-    const planeGeometry = new import_three20.PlaneGeometry(1, 1);
-    const geometry = new import_three20.EdgesGeometry(planeGeometry);
+  const focusGeometry = (0, import_react48.useMemo)(() => {
+    const planeGeometry = new import_three24.PlaneGeometry(1, 1);
+    const geometry = new import_three24.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
     return geometry;
   }, []);
@@ -13412,14 +13839,14 @@ function HotspotAnchor({
   });
   const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
   const cursorClaimId = hotspotCursorClaimId(id);
-  (0, import_react46.useEffect)(
+  (0, import_react48.useEffect)(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!cursorApi) {
       return;
     }
@@ -13441,14 +13868,14 @@ function HotspotAnchor({
     hovered,
     visible
   ]);
-  (0, import_react46.useEffect)(
+  (0, import_react48.useEffect)(
     () => () => {
       cursorApi?.release(cursorClaimId);
     },
     [cursorApi, cursorClaimId]
   );
-  (0, import_react46.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_react48.useEffect)(() => {
     if (tooltipTrigger !== "click") {
       setPinned(false);
       return;
@@ -13457,12 +13884,12 @@ function HotspotAnchor({
       setPinned(false);
     });
   }, [eventBus, tooltipTrigger]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (tooltipTrigger !== "hover") {
       setHovered(false);
     }
   }, [tooltipTrigger]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (acceptsPointer) {
       return;
     }
@@ -13475,7 +13902,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  (0, import_react46.useLayoutEffect)(() => {
+  (0, import_react48.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -13516,7 +13943,7 @@ function HotspotAnchor({
     worldHeight,
     worldWidth
   ]);
-  (0, import_fiber22.useFrame)((state) => {
+  (0, import_fiber23.useFrame)((state) => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -13574,7 +14001,7 @@ function HotspotAnchor({
       setHovered(true);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "group",
     {
       ref: groupRef,
@@ -13651,18 +14078,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -13677,10 +14104,10 @@ function HotspotAnchor({
 }
 
 // src/hotspot/hotspot-plane.tsx
-var import_three21 = require("three");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_three25 = require("three");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
-var SAMPLE_UV = new import_three21.Vector2();
+var SAMPLE_UV = new import_three25.Vector2();
 var RAYCAST_HITS = [];
 var IMAGE_DATA_CACHE = /* @__PURE__ */ new WeakMap();
 function clampOpacity(opacity) {
@@ -13754,8 +14181,8 @@ function sampleTextureAlpha(texture, u, v) {
 }
 function hotspotPlaneRaycast(raycaster, intersects2) {
   const material = Array.isArray(this.material) ? this.material[0] : this.material;
-  if (!(material instanceof import_three21.MeshBasicMaterial)) {
-    import_three21.Mesh.prototype.raycast.call(this, raycaster, intersects2);
+  if (!(material instanceof import_three25.MeshBasicMaterial)) {
+    import_three25.Mesh.prototype.raycast.call(this, raycaster, intersects2);
     return;
   }
   const cutoff = Math.max(material.alphaTest, HOTSPOT_ALPHA_CUTOFF);
@@ -13763,7 +14190,7 @@ function hotspotPlaneRaycast(raycaster, intersects2) {
     return;
   }
   RAYCAST_HITS.length = 0;
-  import_three21.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
+  import_three25.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
   const map = material.map;
   for (const hit of RAYCAST_HITS) {
     if (!map || !hit.uv) {
@@ -13780,16 +14207,17 @@ function HotspotPlane({
   map,
   opacity
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      "meshBasicMaterial",
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("mesh", { raycast: hotspotPlaneRaycast, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      PanoBasicMaterial,
       {
+        target: "hotspot",
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
         alphaToCoverage: true,
         map,
         opacity: map ? clampOpacity(opacity) : 0,
-        side: import_three21.DoubleSide,
+        side: import_three25.DoubleSide,
         toneMapped: false,
         transparent: true
       }
@@ -13798,15 +14226,15 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = (0, import_fiber23.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react47.useState)(null);
-  const onLoadRef = (0, import_react47.useRef)(onLoad);
-  const onErrorRef = (0, import_react47.useRef)(onError);
+  const gl = (0, import_fiber24.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react49.useState)(null);
+  const onLoadRef = (0, import_react49.useRef)(onLoad);
+  const onErrorRef = (0, import_react49.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -13814,7 +14242,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
         active = false;
       };
     }
-    const loader = new import_three22.TextureLoader();
+    const loader = new import_three26.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -13822,11 +14250,11 @@ function useHotspotImageTexture(src, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three22.SRGBColorSpace;
-        loadedTexture.wrapS = import_three22.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three22.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three22.LinearFilter;
-        loadedTexture.minFilter = import_three22.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three26.SRGBColorSpace;
+        loadedTexture.wrapS = import_three26.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three26.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three26.LinearFilter;
+        loadedTexture.minFilter = import_three26.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -13844,7 +14272,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react47.useEffect)(
+  (0, import_react49.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -13862,20 +14290,20 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_react49 = require("react");
-var import_three24 = require("three");
+var import_react51 = require("react");
+var import_three28 = require("three");
 
 // src/hotspot/hotspot-stroke-line.tsx
 var import_drei2 = require("@react-three/drei");
-var import_fiber24 = require("@react-three/fiber");
-var import_react48 = require("react");
-var import_three23 = require("three");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var LINE_WORLD_POSITION = new import_three23.Vector3();
+var import_fiber25 = require("@react-three/fiber");
+var import_react50 = require("react");
+var import_three27 = require("three");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var LINE_WORLD_POSITION = new import_three27.Vector3();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -13883,8 +14311,8 @@ function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   }
   object.getWorldPosition(LINE_WORLD_POSITION);
   const depth = Math.max(camera.position.distanceTo(LINE_WORLD_POSITION), 1);
-  const fov = camera instanceof import_three23.PerspectiveCamera ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(import_three23.MathUtils.degToRad(fov) * 0.5) * depth);
+  const fov = camera instanceof import_three27.PerspectiveCamera ? camera.fov : 75;
+  material.dashScale = viewportHeight / (2 * Math.tan(import_three27.MathUtils.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -13905,22 +14333,22 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = (0, import_react48.useRef)(null);
-  const { camera, size } = (0, import_fiber24.useThree)();
+  const lineRef = (0, import_react50.useRef)(null);
+  const { camera, size } = (0, import_fiber25.useThree)();
   const dash = resolveDash(dashSize, gapSize);
-  (0, import_react48.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     if (!dash.dashed) {
       return;
     }
     applyScreenSpaceDashScale(lineRef.current, camera, size.height);
   }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
-  (0, import_fiber24.useFrame)((state) => {
+  (0, import_fiber25.useFrame)((state) => {
     if (!dash.dashed) {
       return;
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_drei2.Line,
     {
       ref: lineRef,
@@ -13942,7 +14370,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -13977,7 +14405,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new import_three24.Vector2(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new import_three28.Vector2(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -14014,7 +14442,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new import_three24.Vector3()];
+  const candidates = [new import_three28.Vector3()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14038,7 +14466,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new import_three24.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three24.Vector3(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new import_three28.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three28.Vector3(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14049,7 +14477,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three24.Vector3()
+    new import_three28.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14058,20 +14486,20 @@ function surfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = position.pitch * Math.PI / 180;
   const yaw = position.yaw * Math.PI / 180;
-  const localUp = new import_three24.Vector3(
+  const localUp = new import_three28.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three24.Quaternion().setFromRotationMatrix(
-    new import_three24.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three28.Quaternion().setFromRotationMatrix(
+    new import_three28.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal(center) {
-  return new import_three24.Matrix4().compose(
+  return new import_three28.Matrix4().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new import_three24.Vector3(1, 1, 1)
+    new import_three28.Vector3(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14126,8 +14554,8 @@ function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps)
 }
 function makeFillGeometry(vertices, center) {
   const unwrapped = unwrapPolygonVertices(vertices);
-  const contour = unwrapped.map((vertex) => new import_three24.Vector2(vertex.unwrappedYaw, vertex.pitch));
-  const triangles = import_three24.ShapeUtils.triangulateShape(contour, []);
+  const contour = unwrapped.map((vertex) => new import_three28.Vector2(vertex.unwrappedYaw, vertex.pitch));
+  const triangles = import_three28.ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
   const worldToLocal = makeWorldToLocal(center);
@@ -14143,7 +14571,7 @@ function makeFillGeometry(vertices, center) {
       steps
     );
   }
-  return new import_three24.BufferGeometry().setAttribute("position", new import_three24.Float32BufferAttribute(positions, 3)).setIndex(indices);
+  return new import_three28.BufferGeometry().setAttribute("position", new import_three28.Float32BufferAttribute(positions, 3)).setIndex(indices);
 }
 function makeStrokePositions(vertices, center) {
   const points = [];
@@ -14198,24 +14626,24 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react49.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = (0, import_react51.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react49.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react49.useMemo)(
+  const center = (0, import_react51.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react51.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = (0, import_react49.useMemo)(
+  const strokePoints = (0, import_react51.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react49.useRef)(null);
+  const startVerticesRef = (0, import_react51.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react49.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react51.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
   if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
     return null;
   }
@@ -14230,7 +14658,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14245,7 +14673,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14267,17 +14695,17 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "meshBasicMaterial",
           {
             color: fill,
             depthWrite: false,
             opacity: Math.max(0, Math.min(fillOpacity, 1)),
-            side: import_three24.DoubleSide,
+            side: import_three28.DoubleSide,
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -14295,9 +14723,9 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-var import_react50 = require("react");
-var import_three25 = require("three");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react52 = require("react");
+var import_three29 = require("three");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -14322,29 +14750,29 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three25.Vector3()
+    new import_three29.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
 function surfaceQuaternion2(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = import_three25.MathUtils.degToRad(position.pitch);
-  const yaw = import_three25.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three25.Vector3(
+  const pitch = import_three29.MathUtils.degToRad(position.pitch);
+  const yaw = import_three29.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three29.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three25.Quaternion().setFromRotationMatrix(
-    new import_three25.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three29.Quaternion().setFromRotationMatrix(
+    new import_three29.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal2(center) {
-  return new import_three25.Matrix4().compose(
+  return new import_three29.Matrix4().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new import_three25.Vector3(1, 1, 1)
+    new import_three29.Vector3(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -14359,7 +14787,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(import_three25.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(import_three29.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -14414,16 +14842,16 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = (0, import_react50.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = (0, import_react52.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react50.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = (0, import_react50.useMemo)(
+  const center = (0, import_react52.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = (0, import_react52.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = (0, import_react50.useRef)(null);
-  (0, import_react50.useEffect)(() => {
+  const startVerticesRef = (0, import_react52.useRef)(null);
+  (0, import_react52.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
   if (!valid || !center || !linePoints || linePoints.length < 2) return null;
@@ -14437,7 +14865,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14451,7 +14879,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14472,7 +14900,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14489,9 +14917,9 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-var import_react51 = require("react");
-var import_three26 = require("three");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react53 = require("react");
+var import_three30 = require("three");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -14669,23 +15097,23 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
     throw new Error("Canvas 2D is unavailable for this graphic hotspot.");
   }
   drawGraphic(context, graphic, aspectWidth, aspectHeight);
-  const texture = new import_three26.CanvasTexture(canvas);
-  texture.colorSpace = import_three26.SRGBColorSpace;
-  texture.wrapS = import_three26.ClampToEdgeWrapping;
-  texture.wrapT = import_three26.ClampToEdgeWrapping;
-  texture.magFilter = import_three26.LinearFilter;
-  texture.minFilter = import_three26.LinearMipmapLinearFilter;
+  const texture = new import_three30.CanvasTexture(canvas);
+  texture.colorSpace = import_three30.SRGBColorSpace;
+  texture.wrapS = import_three30.ClampToEdgeWrapping;
+  texture.wrapT = import_three30.ClampToEdgeWrapping;
+  texture.magFilter = import_three30.LinearFilter;
+  texture.minFilter = import_three30.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react51.useState)(null);
-  const onLoadRef = (0, import_react51.useRef)(onLoad);
-  const onErrorRef = (0, import_react51.useRef)(onError);
+  const [texture, setTexture] = (0, import_react53.useState)(null);
+  const onLoadRef = (0, import_react53.useRef)(onLoad);
+  const onErrorRef = (0, import_react53.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -14711,22 +15139,22 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-var import_fiber25 = require("@react-three/fiber");
-var import_react52 = require("react");
-var import_three27 = require("three");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_fiber26 = require("@react-three/fiber");
+var import_react54 = require("react");
+var import_three31 = require("three");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -14740,13 +15168,13 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = (0, import_fiber25.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react52.useState)(null);
-  const onErrorRef = (0, import_react52.useRef)(onError);
-  const onLoadProgressRef = (0, import_react52.useRef)(onLoadProgress);
+  const gl = (0, import_fiber26.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react54.useState)(null);
+  const onErrorRef = (0, import_react54.useRef)(onError);
+  const onLoadProgressRef = (0, import_react54.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -14755,7 +15183,7 @@ function useSpriteTexture({
         active = false;
       };
     }
-    const loader = new import_three27.TextureLoader();
+    const loader = new import_three31.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -14763,11 +15191,11 @@ function useSpriteTexture({
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three27.SRGBColorSpace;
-        loadedTexture.wrapS = import_three27.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three27.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three27.LinearFilter;
-        loadedTexture.minFilter = import_three27.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three31.SRGBColorSpace;
+        loadedTexture.wrapS = import_three31.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three31.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three31.LinearFilter;
+        loadedTexture.minFilter = import_three31.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -14787,7 +15215,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react52.useEffect)(
+  (0, import_react54.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14816,24 +15244,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = (0, import_react52.useState)(0);
-  const elapsedRef = (0, import_react52.useRef)(0);
-  const frameIndexRef = (0, import_react52.useRef)(0);
-  const endedRef = (0, import_react52.useRef)(false);
-  const lastPlaybackStateRef = (0, import_react52.useRef)(null);
-  const onFrameChangeRef = (0, import_react52.useRef)(onFrameChange);
-  const onPlaybackStateChangeRef = (0, import_react52.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react52.useRef)(onEnded);
+  const [frameIndex, setFrameIndex] = (0, import_react54.useState)(0);
+  const elapsedRef = (0, import_react54.useRef)(0);
+  const frameIndexRef = (0, import_react54.useRef)(0);
+  const endedRef = (0, import_react54.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react54.useRef)(null);
+  const onFrameChangeRef = (0, import_react54.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react54.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react54.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14847,13 +15275,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -14872,7 +15300,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  (0, import_fiber25.useFrame)((_, deltaSeconds) => {
+  (0, import_fiber26.useFrame)((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -14902,14 +15330,14 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
-var import_fiber26 = require("@react-three/fiber");
-var import_react53 = require("react");
-var import_three28 = require("three");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_fiber27 = require("@react-three/fiber");
+var import_react55 = require("react");
+var import_three32 = require("three");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -14917,11 +15345,11 @@ function clampVolume2(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture2(id, poster, onError) {
-  const gl = (0, import_fiber26.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react53.useState)(null);
-  const onErrorRef = (0, import_react53.useRef)(onError);
+  const gl = (0, import_fiber27.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react55.useState)(null);
+  const onErrorRef = (0, import_react55.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -14929,7 +15357,7 @@ function usePosterTexture2(id, poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three28.TextureLoader();
+    const loader = new import_three32.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -14937,11 +15365,11 @@ function usePosterTexture2(id, poster, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three28.SRGBColorSpace;
-        loadedTexture.wrapS = import_three28.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three28.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three28.LinearFilter;
-        loadedTexture.minFilter = import_three28.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three32.SRGBColorSpace;
+        loadedTexture.wrapS = import_three32.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three32.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three32.LinearFilter;
+        loadedTexture.minFilter = import_three32.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -14958,7 +15386,7 @@ function usePosterTexture2(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react53.useEffect)(
+  (0, import_react55.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -14976,14 +15404,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = (0, import_react53.useState)(null);
-  const onEndedRef = (0, import_react53.useRef)(onEnded);
-  const onErrorRef = (0, import_react53.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react53.useRef)(onPlaybackStateChange);
+  const [resource, setResource] = (0, import_react55.useState)(null);
+  const onEndedRef = (0, import_react55.useRef)(onEnded);
+  const onErrorRef = (0, import_react55.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react55.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -15000,12 +15428,12 @@ function useVideoResource({
       video.setAttribute("webkit-playsinline", "true");
     }
     video.poster = poster ?? "";
-    const texture = new import_three28.VideoTexture(video);
-    texture.colorSpace = import_three28.SRGBColorSpace;
-    texture.wrapS = import_three28.ClampToEdgeWrapping;
-    texture.wrapT = import_three28.ClampToEdgeWrapping;
-    texture.magFilter = import_three28.LinearFilter;
-    texture.minFilter = import_three28.LinearFilter;
+    const texture = new import_three32.VideoTexture(video);
+    texture.colorSpace = import_three32.SRGBColorSpace;
+    texture.wrapS = import_three32.ClampToEdgeWrapping;
+    texture.wrapT = import_three32.ClampToEdgeWrapping;
+    texture.magFilter = import_three32.LinearFilter;
+    texture.minFilter = import_three32.LinearFilter;
     texture.generateMipmaps = false;
     const notifyState = (state) => {
       if (active) {
@@ -15090,11 +15518,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react53.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react53.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react55.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react55.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -15111,7 +15539,7 @@ function VideoHotspot({
     }
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -15134,14 +15562,14 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
-var import_fiber27 = require("@react-three/fiber");
-var import_react54 = require("react");
-var import_three29 = require("three");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_fiber28 = require("@react-three/fiber");
+var import_react56 = require("react");
+var import_three33 = require("three");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -15194,19 +15622,19 @@ function createSpeakerTexture(state) {
       return exhaustive;
     }
   }
-  const texture = new import_three29.CanvasTexture(canvas);
-  texture.colorSpace = import_three29.SRGBColorSpace;
-  texture.wrapS = import_three29.ClampToEdgeWrapping;
-  texture.wrapT = import_three29.ClampToEdgeWrapping;
-  texture.magFilter = import_three29.LinearFilter;
-  texture.minFilter = import_three29.LinearMipmapLinearFilter;
+  const texture = new import_three33.CanvasTexture(canvas);
+  texture.colorSpace = import_three33.SRGBColorSpace;
+  texture.wrapS = import_three33.ClampToEdgeWrapping;
+  texture.wrapT = import_three33.ClampToEdgeWrapping;
+  texture.magFilter = import_three33.LinearFilter;
+  texture.minFilter = import_three33.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
 }
 function useSpeakerTextures(enabled) {
-  const [textures, setTextures] = (0, import_react54.useState)({ playing: null, stopped: null });
-  (0, import_react54.useEffect)(() => {
+  const [textures, setTextures] = (0, import_react56.useState)({ playing: null, stopped: null });
+  (0, import_react56.useEffect)(() => {
     if (!enabled) {
       setTextures({ playing: null, stopped: null });
       return;
@@ -15222,11 +15650,11 @@ function useSpeakerTextures(enabled) {
   return textures;
 }
 function useIconTexture(icon, enabled, onError, id) {
-  const gl = (0, import_fiber27.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react54.useState)(null);
-  const onErrorRef = (0, import_react54.useRef)(onError);
+  const gl = (0, import_fiber28.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react56.useState)(null);
+  const onErrorRef = (0, import_react56.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!enabled || !icon) {
@@ -15234,7 +15662,7 @@ function useIconTexture(icon, enabled, onError, id) {
         active = false;
       };
     }
-    const loader = new import_three29.TextureLoader();
+    const loader = new import_three33.TextureLoader();
     loader.load(
       icon,
       (loadedTexture) => {
@@ -15242,11 +15670,11 @@ function useIconTexture(icon, enabled, onError, id) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three29.SRGBColorSpace;
-        loadedTexture.wrapS = import_three29.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three29.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three29.LinearFilter;
-        loadedTexture.minFilter = import_three29.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three33.SRGBColorSpace;
+        loadedTexture.wrapS = import_three33.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three33.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three33.LinearFilter;
+        loadedTexture.minFilter = import_three33.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -15263,7 +15691,7 @@ function useIconTexture(icon, enabled, onError, id) {
       active = false;
     };
   }, [enabled, gl, icon, id]);
-  (0, import_react54.useEffect)(
+  (0, import_react56.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -15282,13 +15710,13 @@ function useAudioHowl({
   playing,
   src
 }) {
-  const [howl, setHowl] = (0, import_react54.useState)(null);
-  const playingRef = (0, import_react54.useRef)(playing);
-  const loopRef = (0, import_react54.useRef)(loop ?? false);
-  const onEndedRef = (0, import_react54.useRef)(onEnded);
-  const onErrorRef = (0, import_react54.useRef)(onError);
-  const onPlaybackErrorRef = (0, import_react54.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react54.useRef)(onPlaybackStateChange);
+  const [howl, setHowl] = (0, import_react56.useState)(null);
+  const playingRef = (0, import_react56.useRef)(playing);
+  const loopRef = (0, import_react56.useRef)(loop ?? false);
+  const onEndedRef = (0, import_react56.useRef)(onEnded);
+  const onErrorRef = (0, import_react56.useRef)(onError);
+  const onPlaybackErrorRef = (0, import_react56.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react56.useRef)(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -15296,7 +15724,7 @@ function useAudioHowl({
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   const sourcesKey = sourceList(src).join("\0");
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const sources = sourcesKey.length > 0 ? sourcesKey.split("\0") : [];
     if (sources.length === 0) {
       setHowl(null);
@@ -15333,7 +15761,7 @@ function useAudioHowl({
       handle.dispose();
     };
   }, [crossOrigin, id, sourcesKey]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     howl?.loop(loop ?? false);
   }, [howl, loop]);
   return howl;
@@ -15361,7 +15789,7 @@ function AudioHotspot({
   ...anchorProps
 }) {
   usePanoMediaActivationIntent(playing);
-  const camera = (0, import_fiber27.useThree)((state) => state.camera);
+  const camera = (0, import_fiber28.useThree)((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
     id,
@@ -15377,15 +15805,15 @@ function AudioHotspot({
   const stoppedIconTexture = useIconTexture(icon, marker, onError, id);
   const playingIconTexture = useIconTexture(playingIcon, marker, onError, id);
   const markerTexture = playing ? playingIconTexture ?? stoppedIconTexture ?? speakerTextures.playing : stoppedIconTexture ?? speakerTextures.stopped;
-  const playingRef = (0, import_react54.useRef)(playing);
+  const playingRef = (0, import_react56.useRef)(playing);
   playingRef.current = playing;
-  const mutedRef = (0, import_react54.useRef)(muted);
-  const volumeRef = (0, import_react54.useRef)(volume);
-  const rangeRef = (0, import_react54.useRef)(range);
+  const mutedRef = (0, import_react56.useRef)(muted);
+  const volumeRef = (0, import_react56.useRef)(volume);
+  const rangeRef = (0, import_react56.useRef)(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!howl) {
       return;
     }
@@ -15395,7 +15823,7 @@ function AudioHotspot({
     }
     howl.play();
   }, [howl, playing]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!howl || !pauseWhenHidden) {
       return;
     }
@@ -15413,7 +15841,7 @@ function AudioHotspot({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [howl, pauseWhenHidden]);
-  (0, import_fiber27.useFrame)(() => {
+  (0, import_fiber28.useFrame)(() => {
     if (!howl) {
       return;
     }
@@ -15426,13 +15854,13 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
-var import_react55 = require("react");
-var import_three30 = require("three");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react57 = require("react");
+var import_three34 = require("three");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -15641,23 +16069,23 @@ function createTextTexture(text, width, height, style) {
     throw new Error("Canvas 2D is unavailable for this text hotspot.");
   }
   drawTextHotspot(context, canvasWidth, canvasHeight, text, style);
-  const texture = new import_three30.CanvasTexture(canvas);
-  texture.colorSpace = import_three30.SRGBColorSpace;
-  texture.wrapS = import_three30.ClampToEdgeWrapping;
-  texture.wrapT = import_three30.ClampToEdgeWrapping;
-  texture.magFilter = import_three30.LinearFilter;
-  texture.minFilter = import_three30.LinearMipmapLinearFilter;
+  const texture = new import_three34.CanvasTexture(canvas);
+  texture.colorSpace = import_three34.SRGBColorSpace;
+  texture.wrapS = import_three34.ClampToEdgeWrapping;
+  texture.wrapT = import_three34.ClampToEdgeWrapping;
+  texture.magFilter = import_three34.LinearFilter;
+  texture.minFilter = import_three34.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react55.useState)(null);
-  const onLoadRef = (0, import_react55.useRef)(onLoad);
-  const onErrorRef = (0, import_react55.useRef)(onError);
+  const [texture, setTexture] = (0, import_react57.useState)(null);
+  const onLoadRef = (0, import_react57.useRef)(onLoad);
+  const onErrorRef = (0, import_react57.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     let cancelled = false;
     let nextTexture = null;
     const run = async () => {
@@ -15750,13 +16178,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 var import_drei3 = require("@react-three/drei");
-var import_three31 = require("three");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_three35 = require("three");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -15813,7 +16241,7 @@ function IframeHotspot({
     interactive,
     pointerEvents
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -15822,20 +16250,20 @@ function IframeHotspot({
       pointerEvents,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("mesh", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("mesh", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "meshBasicMaterial",
             {
               depthWrite: false,
               opacity: 0,
-              side: import_three31.DoubleSide,
+              side: import_three35.DoubleSide,
               toneMapped: false,
               transparent: true
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           import_drei3.Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -15850,7 +16278,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "iframe",
               {
                 allow,
@@ -15903,6 +16331,7 @@ function IframeHotspot({
   Scenes,
   SequenceHotspot,
   Sphere,
+  SphereTile,
   TextHotspot,
   Tile,
   TouchControls,