@ericchen1990/pano-view 2.0.0 → 2.1.0

package/dist/index.d.mts

@@ -790,14 +790,25 @@ declare function TouchControls({ enabled, rotateSpeed, invert, pinchZoom, }: Tou
 
 type SphereProps = {
     src: string;
+    /**
+     * Low-resolution 2:1 equirectangular image shown while `src` loads.
+     * Relative paths resolve against the directory of `src`. Root-absolute and
+     * `http(s)` / `blob:` / `data:` URLs are used as-is. For krpano sphere
+     * scenes, copy `<preview url>`.
+     */
+    previewUrl: string;
     /** Horizontal image offset in degrees. */
     yawOffset?: number;
+    /** Called once the first paintable texture (preview or `src`) is ready. */
+    onReady?: () => void;
     onLoad?: (texture: Texture) => void;
     onError?: (error: unknown) => void;
+    /** Called when `previewUrl` cannot be loaded; `src` still continues. */
+    onPreviewError?: (error: unknown) => void;
     /** Keeps the source mounted for preloading without drawing it. */
     visible?: boolean;
 };
-declare function Sphere({ src, yawOffset, onLoad, onError, visible, }: SphereProps): react.JSX.Element | null;
+declare function Sphere({ src, previewUrl, yawOffset, onReady, onLoad, onError, onPreviewError, visible, }: SphereProps): react.JSX.Element | null;
 
 type VideoPlaybackState = "playing" | "paused" | "ended" | "blocked";
 type VideoHotspotErrorEvent = {
@@ -1001,18 +1012,30 @@ type TileLoadError = {
 };
 type TileProps = {
     baseUrl: string;
+    /**
+     * Tile size followed by ascending cube-face sizes (`TILESIZE,LEVELSIZE1,...`).
+     * For krpano output, copy `image.cube.multires` from the XML.
+     */
     multires: string | TileMultiresConfig;
-    /** Defaults to `${baseUrl}/previews/cube-vertical.webp`. */
-    previewUrl?: string | null;
+    /**
+     * Preview atlas path. Relative paths resolve against `baseUrl`; root-absolute
+     * and `http(s)` / `blob:` / `data:` URLs are used as-is. For krpano output,
+     * copy `<preview url>` (often `preview.jpg` at the scene root). This package's
+     * common cube atlas path is `previews/cube-vertical.webp`.
+     */
+    previewUrl: string;
     /**
      * Face order in the vertical preview atlas, from top to bottom. Defaults to
-     * `l/f/r/b/u/d`.
+     * `l/f/r/b/u/d`, matching krpano `preview.striporder` `LFRBUD`.
      */
     previewFaceOrder?: readonly CubeFaceCode[];
     /**
-     * Relative to `baseUrl`; supports krpano cube-tile `%s` and `%l` placeholders,
-     * horizontal `%h`/`%x`/`%u`/`%c`, vertical `%v`/`%y`/`%w`/`%r`, and index padding
-     * such as `%0h` or `%00v`.
+     * Path relative to `baseUrl`. Defaults to
+     * `tiles/%s/l%l/%v/l%l_%s_%h_%v.webp`. For krpano output, copy `<cube url>`
+     * from the XML; krpano templates often use `%v_%h` instead of this default
+     * `%h_%v`, so omitting `urlTemplate` requests the wrong files. Supports
+     * krpano cube-tile `%s` and `%l` placeholders, horizontal `%h`/`%x`/`%u`/`%c`,
+     * vertical `%v`/`%y`/`%w`/`%r`, and index padding such as `%0h` or `%00v`.
      */
     urlTemplate?: string;
     /** Returns a path relative to `baseUrl`; takes precedence over `urlTemplate`. */
@@ -1040,6 +1063,7 @@ type SphereScene = {
     id: string;
     type: "sphere";
     src: string;
+    previewUrl: string;
     yawOffset?: number;
 };
 type TileScene = Omit<TileProps, "loadMode" | "visible" | "onReady" | "onPreviewError" | "onLoadProgress" | "onTileError" | "onLevelChange"> & {

package/dist/index.d.ts

@@ -790,14 +790,25 @@ declare function TouchControls({ enabled, rotateSpeed, invert, pinchZoom, }: Tou
 
 type SphereProps = {
     src: string;
+    /**
+     * Low-resolution 2:1 equirectangular image shown while `src` loads.
+     * Relative paths resolve against the directory of `src`. Root-absolute and
+     * `http(s)` / `blob:` / `data:` URLs are used as-is. For krpano sphere
+     * scenes, copy `<preview url>`.
+     */
+    previewUrl: string;
     /** Horizontal image offset in degrees. */
     yawOffset?: number;
+    /** Called once the first paintable texture (preview or `src`) is ready. */
+    onReady?: () => void;
     onLoad?: (texture: Texture) => void;
     onError?: (error: unknown) => void;
+    /** Called when `previewUrl` cannot be loaded; `src` still continues. */
+    onPreviewError?: (error: unknown) => void;
     /** Keeps the source mounted for preloading without drawing it. */
     visible?: boolean;
 };
-declare function Sphere({ src, yawOffset, onLoad, onError, visible, }: SphereProps): react.JSX.Element | null;
+declare function Sphere({ src, previewUrl, yawOffset, onReady, onLoad, onError, onPreviewError, visible, }: SphereProps): react.JSX.Element | null;
 
 type VideoPlaybackState = "playing" | "paused" | "ended" | "blocked";
 type VideoHotspotErrorEvent = {
@@ -1001,18 +1012,30 @@ type TileLoadError = {
 };
 type TileProps = {
     baseUrl: string;
+    /**
+     * Tile size followed by ascending cube-face sizes (`TILESIZE,LEVELSIZE1,...`).
+     * For krpano output, copy `image.cube.multires` from the XML.
+     */
     multires: string | TileMultiresConfig;
-    /** Defaults to `${baseUrl}/previews/cube-vertical.webp`. */
-    previewUrl?: string | null;
+    /**
+     * Preview atlas path. Relative paths resolve against `baseUrl`; root-absolute
+     * and `http(s)` / `blob:` / `data:` URLs are used as-is. For krpano output,
+     * copy `<preview url>` (often `preview.jpg` at the scene root). This package's
+     * common cube atlas path is `previews/cube-vertical.webp`.
+     */
+    previewUrl: string;
     /**
      * Face order in the vertical preview atlas, from top to bottom. Defaults to
-     * `l/f/r/b/u/d`.
+     * `l/f/r/b/u/d`, matching krpano `preview.striporder` `LFRBUD`.
      */
     previewFaceOrder?: readonly CubeFaceCode[];
     /**
-     * Relative to `baseUrl`; supports krpano cube-tile `%s` and `%l` placeholders,
-     * horizontal `%h`/`%x`/`%u`/`%c`, vertical `%v`/`%y`/`%w`/`%r`, and index padding
-     * such as `%0h` or `%00v`.
+     * Path relative to `baseUrl`. Defaults to
+     * `tiles/%s/l%l/%v/l%l_%s_%h_%v.webp`. For krpano output, copy `<cube url>`
+     * from the XML; krpano templates often use `%v_%h` instead of this default
+     * `%h_%v`, so omitting `urlTemplate` requests the wrong files. Supports
+     * krpano cube-tile `%s` and `%l` placeholders, horizontal `%h`/`%x`/`%u`/`%c`,
+     * vertical `%v`/`%y`/`%w`/`%r`, and index padding such as `%0h` or `%00v`.
      */
     urlTemplate?: string;
     /** Returns a path relative to `baseUrl`; takes precedence over `urlTemplate`. */
@@ -1040,6 +1063,7 @@ type SphereScene = {
     id: string;
     type: "sphere";
     src: string;
+    previewUrl: string;
     yawOffset?: number;
 };
 type TileScene = Omit<TileProps, "loadMode" | "visible" | "onReady" | "onPreviewError" | "onLoadProgress" | "onTileError" | "onLevelChange"> & {

package/dist/index.mjs

@@ -6369,7 +6369,7 @@ var WebVR = forwardRef4(function WebVR2({
 
 // src/sphere.tsx
 import { useThree as useThree13 } from "@react-three/fiber";
-import { useEffect as useEffect19, useRef as useRef19, useState as useState8 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo12, useRef as useRef19, useState as useState8 } from "react";
 import {
   BackSide as BackSide2,
   LinearFilter,
@@ -6380,6 +6380,27 @@ import {
   TextureLoader
 } from "three";
 
+// src/asset-url.ts
+function isAbsoluteAssetUrl(url) {
+  return url.startsWith("/") || url.startsWith("//") || /^[a-z][a-z0-9+.-]*:/i.test(url);
+}
+function resolveRelativeAssetUrl(baseUrl, relativePath) {
+  const normalizedBaseUrl = baseUrl.replace(/\/+$/, "");
+  const normalizedPath = relativePath.replace(/^\/+/, "");
+  return normalizedBaseUrl ? `${normalizedBaseUrl}/${normalizedPath}` : normalizedPath;
+}
+function resolveAssetUrl(baseUrl, path) {
+  return isAbsoluteAssetUrl(path) ? path : resolveRelativeAssetUrl(baseUrl, path);
+}
+function resolveUrlAgainstFile(fileUrl, path) {
+  if (isAbsoluteAssetUrl(path)) {
+    return path;
+  }
+  const slash = fileUrl.lastIndexOf("/");
+  const directory = slash === -1 ? "" : fileUrl.slice(0, slash);
+  return resolveRelativeAssetUrl(directory, path);
+}
+
 // src/pano-filter/pano-basic-material.tsx
 import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo11, useRef as useRef18 } from "react";
 
@@ -6596,25 +6617,22 @@ function PanoBasicMaterial({
 
 // src/sphere.tsx
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function Sphere({
-  src,
-  yawOffset = 0,
-  onLoad,
-  onError,
-  visible = true
-}) {
-  const gl = useThree13((state) => state.gl);
+function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
   const [texture, setTexture] = useState8(null);
   const onLoadRef = useRef19(onLoad);
   const onErrorRef = useRef19(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect19(() => {
+    if (!url) {
+      setTexture(null);
+      return;
+    }
     let active = true;
     const loader = new TextureLoader();
     setTexture(null);
     loader.load(
-      src,
+      url,
       (loadedTexture) => {
         if (!active) {
           loadedTexture.dispose();
@@ -6624,10 +6642,10 @@ function Sphere({
         loadedTexture.wrapS = RepeatWrapping;
         loadedTexture.repeat.x = -1;
         loadedTexture.offset.x = 1;
-        loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
+        loadedTexture.anisotropy = anisotropy;
         loadedTexture.magFilter = LinearFilter;
-        loadedTexture.minFilter = LinearMipmapLinearFilter;
-        loadedTexture.generateMipmaps = true;
+        loadedTexture.minFilter = generateMipmaps ? LinearMipmapLinearFilter : LinearFilter;
+        loadedTexture.generateMipmaps = generateMipmaps;
         loadedTexture.needsUpdate = true;
         setTexture(loadedTexture);
         onLoadRef.current?.(loadedTexture);
@@ -6635,6 +6653,7 @@ function Sphere({
       void 0,
       (error) => {
         if (active) {
+          setTexture(null);
           onErrorRef.current?.(error);
         }
       }
@@ -6642,14 +6661,58 @@ function Sphere({
     return () => {
       active = false;
     };
-  }, [gl, src]);
+  }, [anisotropy, generateMipmaps, url]);
   useEffect19(
     () => () => {
       texture?.dispose();
     },
     [texture]
   );
-  if (!texture) {
+  return texture;
+}
+function Sphere({
+  src,
+  previewUrl,
+  yawOffset = 0,
+  onReady,
+  onLoad,
+  onError,
+  onPreviewError,
+  visible = true
+}) {
+  const gl = useThree13((state) => state.gl);
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const resolvedPreviewUrl = useMemo12(
+    () => resolveUrlAgainstFile(src, previewUrl),
+    [previewUrl, src]
+  );
+  const texture = useEquirectTexture(
+    src,
+    anisotropy,
+    true,
+    onLoad,
+    onError
+  );
+  const previewTexture = useEquirectTexture(
+    texture ? null : resolvedPreviewUrl,
+    anisotropy,
+    false,
+    void 0,
+    onPreviewError
+  );
+  const displayTexture = texture ?? previewTexture;
+  const readyRef = useRef19(false);
+  useEffect19(() => {
+    readyRef.current = false;
+  }, [resolvedPreviewUrl, src]);
+  useEffect19(() => {
+    if (!displayTexture || readyRef.current) {
+      return;
+    }
+    readyRef.current = true;
+    onReady?.();
+  }, [displayTexture, onReady]);
+  if (!displayTexture) {
     return null;
   }
   return /* @__PURE__ */ jsxs9(
@@ -6662,7 +6725,7 @@ function Sphere({
         /* @__PURE__ */ jsx15(
           PanoBasicMaterial,
           {
-            map: texture,
+            map: displayTexture,
             side: BackSide2,
             toneMapped: false
           }
@@ -6679,7 +6742,7 @@ import {
   useContext as useContext19,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo12,
+  useMemo as useMemo13,
   useRef as useRef20,
   useState as useState9
 } from "react";
@@ -6878,13 +6941,13 @@ function PanoVideo({
   const gl = useThree14((state) => state.gl);
   const host = useContext19(PanoVideoHostContext);
   const overlay = useContext19(PanoChromeOverlayContext);
-  const variants = useMemo12(
+  const variants = useMemo13(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = useMemo12(
+  const captionAppearance = useMemo13(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
@@ -6949,7 +7012,7 @@ function PanoVideo({
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = useMemo12(() => {
+  const resource = useMemo13(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -7062,7 +7125,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = useMemo12(
+  const controller = useMemo13(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -7429,7 +7492,7 @@ import {
   useCallback as useCallback10,
   useContext as useContext21,
   useEffect as useEffect25,
-  useMemo as useMemo17,
+  useMemo as useMemo18,
   useRef as useRef24,
   useState as useState11
 } from "react";
@@ -7487,7 +7550,7 @@ function isSnapshotTransition(preset) {
 
 // src/scene-transitions/particle-overlay.tsx
 import { useFrame as useFrame9, useThree as useThree15 } from "@react-three/fiber";
-import { useEffect as useEffect21, useMemo as useMemo13, useRef as useRef21 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo14, useRef as useRef21 } from "react";
 import {
   DoubleSide as DoubleSide2,
   InstancedBufferAttribute,
@@ -7631,8 +7694,8 @@ function ParticleOverlay({
   const startRef = useRef21(null);
   const finishedRef = useRef21(false);
   const directionRef = useRef21(new Vector38());
-  const geometry = useMemo13(() => createParticleGeometry(), []);
-  const material = useMemo13(
+  const geometry = useMemo14(() => createParticleGeometry(), []);
+  const material = useMemo14(
     () => new ShaderMaterial2({
       transparent: true,
       depthTest: false,
@@ -7686,7 +7749,7 @@ function ParticleOverlay({
 
 // src/scene-transitions/snapshot-overlay.tsx
 import { useFrame as useFrame10, useThree as useThree16 } from "@react-three/fiber";
-import { useEffect as useEffect22, useMemo as useMemo14, useRef as useRef22 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo15, useRef as useRef22 } from "react";
 import { Vector3 as Vector39 } from "three";
 
 // src/scene-transitions/snapshot-shaders.ts
@@ -7979,7 +8042,7 @@ function SnapshotOverlay({
   const startRef = useRef22(null);
   const finishedRef = useRef22(false);
   const directionRef = useRef22(new Vector39());
-  const material = useMemo14(() => {
+  const material = useMemo15(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
     }
@@ -8072,7 +8135,7 @@ import {
   createContext as createContext11,
   useContext as useContext20,
   useEffect as useEffect23,
-  useMemo as useMemo15
+  useMemo as useMemo16
 } from "react";
 
 // src/tile/texture-manager.ts
@@ -8313,7 +8376,7 @@ function TileTextureManagerProvider({
 }) {
   const gl = useThree17((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = useMemo15(
+  const manager = useMemo16(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -8337,7 +8400,7 @@ import { useFrame as useFrame11, useThree as useThree18 } from "@react-three/fib
 import {
   memo,
   useEffect as useEffect24,
-  useMemo as useMemo16,
+  useMemo as useMemo17,
   useRef as useRef23,
   useState as useState10
 } from "react";
@@ -8520,13 +8583,12 @@ function parseMultires(multires) {
   );
   return { tileSize, levels };
 }
+var DEFAULT_TILE_URL_TEMPLATE = "tiles/%s/l%l/%v/l%l_%s_%h_%v.webp";
 function buildDefaultTileUrlTemplate() {
-  return "tiles/%s/l%l/%v/l%l_%s_%h_%v.webp";
+  return DEFAULT_TILE_URL_TEMPLATE;
 }
 function resolveRelativeTileUrl(baseUrl, relativePath) {
-  const normalizedBaseUrl = baseUrl.replace(/\/+$/, "");
-  const normalizedPath = relativePath.replace(/^\/+/, "");
-  return normalizedBaseUrl ? `${normalizedBaseUrl}/${normalizedPath}` : normalizedPath;
+  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) => {
@@ -8598,7 +8660,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = useMemo16(() => {
+  const geometry = useMemo17(() => {
     const nextGeometry = new PlaneGeometry4(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -8884,15 +8946,15 @@ function Tile({
   onLevelChange
 }) {
   const { camera, gl, size } = useThree18();
-  const multiresConfig = useMemo16(() => parseMultires(multires), [multires]);
+  const multiresConfig = useMemo17(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = useMemo16(
+  const candidatesByLevel = useMemo17(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const effectivePreviewUrl = previewUrl === void 0 ? `${baseUrl.replace(/\/$/, "")}/previews/cube-vertical.webp` : previewUrl;
+  const effectivePreviewUrl = resolveAssetUrl(baseUrl, previewUrl);
   const previewTexture = usePreviewTexture(
     effectivePreviewUrl,
     anisotropy,
@@ -8905,7 +8967,7 @@ function Tile({
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = useMemo16(
+  const ownedManager = useMemo17(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -8948,7 +9010,7 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = useMemo16(
+  const resolveUrl = useMemo17(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
@@ -9090,9 +9152,10 @@ function SceneSource({
         Sphere,
         {
           src: scene.src,
+          previewUrl: scene.previewUrl,
           yawOffset: scene.yawOffset,
           visible,
-          onLoad: onReady,
+          onReady,
           onError
         }
       );
@@ -9181,11 +9244,11 @@ function ScenesController({
 }) {
   const controlsRef = useContext21(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = useMemo17(
+  const transition = useMemo18(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = useMemo17(
+  const sceneMap = useMemo18(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
@@ -9435,7 +9498,7 @@ import {
   useContext as useContext23,
   useEffect as useEffect27,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo19,
+  useMemo as useMemo20,
   useRef as useRef25,
   useState as useState13
 } from "react";
@@ -9453,7 +9516,7 @@ import {
 } from "three";
 
 // src/hotspot/hotspot-tooltip.tsx
-import { useEffect as useEffect26, useMemo as useMemo18, useState as useState12 } from "react";
+import { useEffect as useEffect26, useMemo as useMemo19, useState as useState12 } from "react";
 
 // src/webvr/stereo-html.tsx
 import { Html } from "@react-three/drei";
@@ -9581,11 +9644,11 @@ function HotspotTooltip({
     setImageFailed(false);
   }, [content.image]);
   const showImage = Boolean(content.image) && !imageFailed;
-  const resolvedAppearance = useMemo18(
+  const resolvedAppearance = useMemo19(
     () => resolveHotspotTooltipAppearance(appearance),
     [appearance]
   );
-  const bubbleStyle = useMemo18(
+  const bubbleStyle = useMemo19(
     () => ({
       background: resolvedAppearance.background,
       border: resolvedAppearance.border,
@@ -9975,7 +10038,7 @@ function HotspotAnchor({
   const [hovered, setHovered] = useState13(false);
   const [dragging, setDragging] = useState13(false);
   const [pinned, setPinned] = useState13(false);
-  const tooltipContent = useMemo19(
+  const tooltipContent = useMemo20(
     () => resolveHotspotTooltipContent(tooltip),
     [tooltip]
   );
@@ -9991,17 +10054,17 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = useMemo19(
+  const worldPosition = useMemo20(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = useMemo19(
+  const surfaceQuaternion3 = useMemo20(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = useMemo19(() => {
+  const focusGeometry = useMemo20(() => {
     const planeGeometry = new PlaneGeometry5(1, 1);
     const geometry = new EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
@@ -10487,7 +10550,7 @@ function ImageHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useEffect as useEffect29, useMemo as useMemo20, useRef as useRef28 } from "react";
+import { useEffect as useEffect29, useMemo as useMemo21, useRef as useRef28 } from "react";
 import {
   BufferGeometry,
   DoubleSide as DoubleSide5,
@@ -10832,14 +10895,14 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = useMemo20(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = useMemo21(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo20(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = useMemo20(
+  const center = useMemo21(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = useMemo21(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePoints = useMemo20(
+  const strokePoints = useMemo21(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
@@ -10929,7 +10992,7 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useEffect as useEffect30, useMemo as useMemo21, useRef as useRef29 } from "react";
+import { useEffect as useEffect30, useMemo as useMemo22, useRef as useRef29 } from "react";
 import {
   MathUtils as MathUtils8,
   Matrix4 as Matrix44,
@@ -11053,10 +11116,10 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const issues = useMemo21(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = useMemo22(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo21(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePoints = useMemo21(
+  const center = useMemo22(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = useMemo22(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );