@ericchen1990/pano-view 3.2.1 → 3.2.3

package/dist/index.mjs

@@ -7532,6 +7532,7 @@ var PanoViewer = forwardRef2(
             Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
+              resize: { debounce: 0 },
               camera: {
                 far: DEFAULT_PANORAMA_CAMERA_FAR,
                 fov: normalizedInitialView.fov,
@@ -13335,8 +13336,8 @@ function Scenes({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { useThree as useThree22 } from "@react-three/fiber";
-import { useEffect as useEffect32, useRef as useRef31, useState as useState17 } from "react";
+import { useThree as useThree23 } from "@react-three/fiber";
+import { useEffect as useEffect32, useRef as useRef32, useState as useState17 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping3,
   LinearFilter as LinearFilter6,
@@ -13346,34 +13347,40 @@ import {
 } from "three";
 
 // src/hotspot/hotspot-anchor.tsx
-import { useFrame as useFrame14, useThree as useThree21 } from "@react-three/fiber";
+import { useFrame as useFrame15, useThree as useThree22 } from "@react-three/fiber";
 import {
   useContext as useContext25,
   useEffect as useEffect31,
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo23,
-  useRef as useRef30,
+  useRef as useRef31,
   useState as useState16
 } from "react";
 import {
   Box3 as Box34,
   EdgesGeometry,
-  MathUtils as MathUtils8,
+  MathUtils as MathUtils9,
   Matrix4 as Matrix44,
   Plane,
   PlaneGeometry as PlaneGeometry5,
-  PerspectiveCamera as PerspectiveCamera6,
-  Quaternion as Quaternion3,
+  Quaternion as Quaternion4,
   Ray,
-  Vector3 as Vector314
+  Vector3 as Vector316
 } from "three";
 
 // src/hotspot/hotspot-tooltip.tsx
 import { useEffect as useEffect30, useMemo as useMemo22, useState as useState15 } from "react";
 
 // src/webvr/stereo-html.tsx
-import { Html } from "@react-three/drei";
-import { useContext as useContext24, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { useFrame as useFrame14, useThree as useThree21 } from "@react-three/fiber";
+import {
+  useContext as useContext24,
+  useLayoutEffect as useLayoutEffect4,
+  useRef as useRef30,
+  useSyncExternalStore as useSyncExternalStore7
+} from "react";
+import { createRoot } from "react-dom/client";
+import { Vector3 as Vector314 } from "three";
 import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function useFallbackStereoView() {
   const runtime = useContext24(WebVRRuntimeContext);
@@ -13383,43 +13390,87 @@ function useFallbackStereoView() {
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
   );
-  if (!fallback || !runtime) {
-    return null;
-  }
-  return runtime.stereoView;
+  return fallback && runtime ? runtime.stereoView : null;
 }
-function stereoCalculatePosition(eye, stereoView) {
-  return (el, _camera, size) => projectStereoHtmlPosition(
-    el,
-    eye === "left" ? stereoView.stereo.cameraL : stereoView.stereo.cameraR,
-    size,
-    eye
-  );
+function ProjectedHtml({
+  children,
+  pointerEvents = "auto",
+  style,
+  zIndexRange = [16777271, 0],
+  stereoView,
+  eye
+}) {
+  const { camera, gl, events, size } = useThree21();
+  const group = useRef30(null);
+  const overlay = useRef30(null);
+  const scratch = useRef30(new Vector314());
+  const target = events.connected || gl.domElement.parentElement;
+  const updatePosition = () => {
+    const anchor = group.current;
+    const element = overlay.current?.element;
+    if (!anchor || !element) return;
+    const viewCamera = stereoView && eye ? eye === "left" ? stereoView.stereo.cameraL : stereoView.stereo.cameraR : camera;
+    anchor.updateWorldMatrix(true, false);
+    const position = scratch.current.setFromMatrixPosition(anchor.matrixWorld);
+    const distance = position.distanceTo(viewCamera.position);
+    position.applyMatrix4(viewCamera.matrixWorldInverse);
+    element.style.display = position.z < 0 ? "block" : "none";
+    let x;
+    let y;
+    if (stereoView && eye) {
+      [x, y] = projectStereoHtmlPosition(anchor, viewCamera, size, eye);
+    } else {
+      position.setFromMatrixPosition(anchor.matrixWorld).project(viewCamera);
+      x = (position.x + 1) * size.width / 2;
+      y = (1 - position.y) * size.height / 2;
+    }
+    element.style.transform = `translate3d(${x}px,${y}px,0)`;
+    element.style.zIndex = String(
+      Math.round(
+        zIndexRange[0] + (zIndexRange[1] - zIndexRange[0]) * (distance - viewCamera.near) / (viewCamera.far - viewCamera.near)
+      )
+    );
+  };
+  useLayoutEffect4(() => {
+    if (!target) return;
+    const element = document.createElement("div");
+    Object.assign(element.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      transformOrigin: "0 0"
+    });
+    const root = createRoot(element);
+    overlay.current = { element, root };
+    target.appendChild(element);
+    return () => {
+      overlay.current = null;
+      element.remove();
+      queueMicrotask(() => root.unmount());
+    };
+  }, [target]);
+  useLayoutEffect4(() => {
+    overlay.current?.root.render(
+      /* @__PURE__ */ jsx24(
+        "div",
+        {
+          "aria-hidden": eye === "right" || void 0,
+          style: { position: "absolute", pointerEvents, ...style },
+          children
+        }
+      )
+    );
+    updatePosition();
+  });
+  useFrame14(updatePosition);
+  return /* @__PURE__ */ jsx24("group", { ref: group });
 }
-function PanoHtml({ children, ...htmlProps }) {
+function PanoHtml(props) {
   const stereoView = useFallbackStereoView();
-  if (!stereoView) {
-    return /* @__PURE__ */ jsx24(Html, { ...htmlProps, children });
-  }
-  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsx24(
-      Html,
-      {
-        ...htmlProps,
-        calculatePosition: stereoCalculatePosition("left", stereoView),
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx24(
-      Html,
-      {
-        ...htmlProps,
-        "aria-hidden": true,
-        calculatePosition: stereoCalculatePosition("right", stereoView),
-        children
-      }
-    )
-  ] });
+  return stereoView ? /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsx24(ProjectedHtml, { ...props, stereoView, eye: "left" }),
+    /* @__PURE__ */ jsx24(ProjectedHtml, { ...props, stereoView, eye: "right" })
+  ] }) : /* @__PURE__ */ jsx24(ProjectedHtml, { ...props });
 }
 
 // src/hotspot/hotspot-tooltip.tsx
@@ -13551,6 +13602,41 @@ function HotspotTooltip({
   ] }) });
 }
 
+// src/hotspot/transform.ts
+import {
+  MathUtils as MathUtils8,
+  PerspectiveCamera as PerspectiveCamera6,
+  Vector3 as Vector315
+} from "three";
+var LOCAL_FORWARD = new Vector315(0, 0, 1);
+var CAMERA_POSITION = new Vector315();
+function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight, distance) {
+  if (orientation2 === "billboard") {
+    group.quaternion.copy(camera.quaternion);
+  } else {
+    group.quaternion.copy(surfaceQuaternion3);
+  }
+  group.rotateOnAxis(LOCAL_FORWARD, MathUtils8.degToRad(-rotation));
+  let scaleFactor = scaleMode === "fixed" && camera instanceof PerspectiveCamera6 ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof PerspectiveCamera6) {
+    group.updateWorldMatrix(true, false);
+    CAMERA_POSITION.setFromMatrixPosition(group.matrixWorld).applyMatrix4(
+      camera.matrixWorldInverse
+    );
+    scaleFactor *= Math.max(0, -CAMERA_POSITION.z) / distance;
+  }
+  group.scale.set(
+    (useAngularScale ? worldWidth : 1) * scaleFactor,
+    (useAngularScale ? worldHeight : 1) * scaleFactor,
+    1
+  );
+  group.updateMatrixWorld();
+}
+function fixedScaleFactor(cameraFov, referenceFov) {
+  const safeReferenceFov = MathUtils8.clamp(referenceFov, 1, 179);
+  return Math.tan(MathUtils8.degToRad(cameraFov) / 2) / Math.tan(MathUtils8.degToRad(safeReferenceFov) / 2);
+}
+
 // src/hotspot/hotspot-anchor.tsx
 import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
@@ -13560,28 +13646,27 @@ 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 Vector314(0, 0, 1);
 var TOOLTIP_WORLD_BOX = new Box34();
 var TOOLTIP_LOCAL_BOX = new Box34();
-var TOOLTIP_CORNER = new Vector314();
+var TOOLTIP_CORNER = new Vector316();
 var TOOLTIP_INVERSE = new Matrix44();
-var TOOLTIP_WORLD_CORNER = new Vector314();
-var TOOLTIP_PROJECTED = new Vector314();
-var TOOLTIP_RAY_ORIGIN = new Vector314();
-var TOOLTIP_RAY_FAR = new Vector314();
-var TOOLTIP_RAY_DIRECTION = new Vector314();
+var TOOLTIP_WORLD_CORNER = new Vector316();
+var TOOLTIP_PROJECTED = new Vector316();
+var TOOLTIP_RAY_ORIGIN = new Vector316();
+var TOOLTIP_RAY_FAR = new Vector316();
+var TOOLTIP_RAY_DIRECTION = new Vector316();
 var TOOLTIP_RAY = new Ray();
 var TOOLTIP_PLANE = new Plane();
-var TOOLTIP_INTERSECTION = new Vector314();
-var TOOLTIP_PLANE_NORMAL = new Vector314();
-var TOOLTIP_PLANE_POINT = new Vector314();
+var TOOLTIP_INTERSECTION = new Vector316();
+var TOOLTIP_PLANE_NORMAL = new Vector316();
+var TOOLTIP_PLANE_POINT = new Vector316();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? MathUtils8.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(MathUtils8.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? MathUtils9.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(MathUtils9.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -13594,58 +13679,39 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return MathUtils8.clamp(Math.abs(distance), 0.1, maximumDistance);
-}
-function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight) {
-  if (orientation2 === "billboard") {
-    group.quaternion.copy(camera.quaternion);
-  } else {
-    group.quaternion.copy(surfaceQuaternion3);
-  }
-  group.rotateOnAxis(LOCAL_FORWARD, MathUtils8.degToRad(-rotation));
-  const scaleFactor = scaleMode === "fixed" && camera instanceof PerspectiveCamera6 ? fixedScaleFactor(camera.fov, referenceFov) : 1;
-  group.scale.set(
-    (useAngularScale ? worldWidth : 1) * scaleFactor,
-    (useAngularScale ? worldHeight : 1) * scaleFactor,
-    1
-  );
-  group.updateMatrixWorld();
+  return MathUtils9.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = MathUtils8.clamp(
+  const safeWidth = MathUtils9.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = MathUtils8.clamp(
+  const safeHeight = MathUtils9.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(MathUtils8.degToRad(safeWidth) / 2),
-    Math.tan(MathUtils8.degToRad(safeHeight) / 2)
+    Math.tan(MathUtils9.degToRad(safeWidth) / 2),
+    Math.tan(MathUtils9.degToRad(safeHeight) / 2)
   );
   return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
 }
-function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = MathUtils8.clamp(referenceFov, 1, 179);
-  return Math.tan(MathUtils8.degToRad(cameraFov) / 2) / Math.tan(MathUtils8.degToRad(safeReferenceFov) / 2);
-}
 function createSurfaceQuaternion(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = MathUtils8.degToRad(position.pitch);
-  const yaw = MathUtils8.degToRad(position.yaw);
-  const localUp = new Vector314(
+  const pitch = MathUtils9.degToRad(position.pitch);
+  const yaw = MathUtils9.degToRad(position.yaw);
+  const localUp = new Vector316(
     -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 Matrix44().makeBasis(localRight, localUp, inward);
-  return new Quaternion3().setFromRotationMatrix(basis);
+  return new Quaternion4().setFromRotationMatrix(basis);
 }
 function makeInteractionEvent(id, position, event) {
   return {
@@ -13658,7 +13724,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return MathUtils8.radToDeg(aVector.angleTo(bVector));
+  return MathUtils9.radToDeg(aVector.angleTo(bVector));
 }
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
@@ -13893,11 +13959,11 @@ function HotspotAnchor({
   const hotspotTargetRegistry = useContext25(HotspotTargetRegistryContext);
   const eventBus = useContext25(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = useThree21();
-  const groupRef = useRef30(null);
-  const tooltipAnchorRef = useRef30(null);
-  const dragStateRef = useRef30(null);
-  const suppressNextClickRef = useRef30(false);
+  const { camera, size } = useThree22();
+  const groupRef = useRef31(null);
+  const tooltipAnchorRef = useRef31(null);
+  const dragStateRef = useRef31(null);
+  const suppressNextClickRef = useRef31(false);
   const [hovered, setHovered] = useState16(false);
   const [dragging, setDragging] = useState16(false);
   const [pinned, setPinned] = useState16(false);
@@ -14023,7 +14089,7 @@ function HotspotAnchor({
     dragStateRef.current = null;
     setDragging(false);
   }, [acceptsPointer]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -14038,7 +14104,8 @@ function HotspotAnchor({
       referenceFov,
       useAngularScale,
       worldWidth,
-      worldHeight
+      worldHeight,
+      resolvedDistance
     );
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
@@ -14054,6 +14121,7 @@ function HotspotAnchor({
     camera,
     orientation2,
     referenceFov,
+    resolvedDistance,
     rotation,
     scaleMode,
     size,
@@ -14064,7 +14132,7 @@ function HotspotAnchor({
     worldHeight,
     worldWidth
   ]);
-  useFrame14((state) => {
+  useFrame15((state) => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -14079,7 +14147,8 @@ function HotspotAnchor({
       referenceFov,
       useAngularScale,
       worldWidth,
-      worldHeight
+      worldHeight,
+      resolvedDistance
     );
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
@@ -14340,7 +14409,6 @@ function HotspotPlane({
       {
         target: "hotspot",
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
-        alphaToCoverage: true,
         map,
         opacity: map ? clampOpacity(opacity) : 0,
         side: DoubleSide4,
@@ -14354,10 +14422,10 @@ function HotspotPlane({
 // src/hotspot/image-hotspot.tsx
 import { jsx as jsx28 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = useThree22((state) => state.gl);
+  const gl = useThree23((state) => state.gl);
   const [texture, setTexture] = useState17(null);
-  const onLoadRef = useRef31(onLoad);
-  const onErrorRef = useRef31(onError);
+  const onLoadRef = useRef32(onLoad);
+  const onErrorRef = useRef32(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect32(() => {
@@ -14420,29 +14488,29 @@ function ImageHotspot({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useEffect as useEffect33, useMemo as useMemo24, useRef as useRef33 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo24, useRef as useRef34 } from "react";
 import {
   BufferGeometry as BufferGeometry2,
   DoubleSide as DoubleSide5,
   Float32BufferAttribute as Float32BufferAttribute2,
   Matrix4 as Matrix45,
-  Quaternion as Quaternion4,
+  Quaternion as Quaternion5,
   ShapeUtils,
   Vector2 as Vector27,
-  Vector3 as Vector316
+  Vector3 as Vector318
 } from "three";
 
 // src/hotspot/hotspot-stroke-line.tsx
 import { Line } from "@react-three/drei";
-import { useFrame as useFrame15, useThree as useThree23 } from "@react-three/fiber";
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef32 } from "react";
+import { useFrame as useFrame16, useThree as useThree24 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef33 } from "react";
 import {
-  MathUtils as MathUtils9,
+  MathUtils as MathUtils10,
   PerspectiveCamera as PerspectiveCamera7,
-  Vector3 as Vector315
+  Vector3 as Vector317
 } from "three";
 import { jsx as jsx29 } from "react/jsx-runtime";
-var LINE_WORLD_POSITION = new Vector315();
+var LINE_WORLD_POSITION = new Vector317();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -14451,7 +14519,7 @@ 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 PerspectiveCamera7 ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils9.degToRad(fov) * 0.5) * depth);
+  material.dashScale = viewportHeight / (2 * Math.tan(MathUtils10.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -14472,16 +14540,16 @@ function HotspotStrokeLine({
   dashSize,
   gapSize
 }) {
-  const lineRef = useRef32(null);
-  const { camera, size } = useThree23();
+  const lineRef = useRef33(null);
+  const { camera, size } = useThree24();
   const dash = resolveDash(dashSize, gapSize);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     if (!dash.dashed) {
       return;
     }
     applyScreenSpaceDashScale(lineRef.current, camera, size.height);
   }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
-  useFrame15((state) => {
+  useFrame16((state) => {
     if (!dash.dashed) {
       return;
     }
@@ -14581,7 +14649,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new Vector316()];
+  const candidates = [new Vector318()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14605,7 +14673,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new Vector316(0, 1, 0)) || polygonContainsDirection(normalized, new Vector316(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new Vector318(0, 1, 0)) || polygonContainsDirection(normalized, new Vector318(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14616,7 +14684,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector316()
+    new Vector318()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14625,12 +14693,12 @@ 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 Vector316(
+  const localUp = new Vector318(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new Quaternion4().setFromRotationMatrix(
+  return new Quaternion5().setFromRotationMatrix(
     new Matrix45().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
@@ -14638,7 +14706,7 @@ function makeWorldToLocal(center) {
   return new Matrix45().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new Vector316(1, 1, 1)
+    new Vector318(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14777,7 +14845,7 @@ function PolygonHotspot({
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef33(null);
+  const startVerticesRef = useRef34(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
   useEffect33(() => {
     if (!valid) onInvalid?.(issues);
@@ -14862,12 +14930,12 @@ function PolygonHotspot({
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useEffect as useEffect34, useMemo as useMemo25, useRef as useRef34 } from "react";
+import { useEffect as useEffect34, useMemo as useMemo25, useRef as useRef35 } from "react";
 import {
-  MathUtils as MathUtils10,
+  MathUtils as MathUtils11,
   Matrix4 as Matrix46,
-  Quaternion as Quaternion5,
-  Vector3 as Vector317
+  Quaternion as Quaternion6,
+  Vector3 as Vector319
 } from "three";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
@@ -14894,21 +14962,21 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new Vector317()
+    new Vector319()
   );
   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 = MathUtils10.degToRad(position.pitch);
-  const yaw = MathUtils10.degToRad(position.yaw);
-  const localUp = new Vector317(
+  const pitch = MathUtils11.degToRad(position.pitch);
+  const yaw = MathUtils11.degToRad(position.yaw);
+  const localUp = new Vector319(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new Quaternion5().setFromRotationMatrix(
+  return new Quaternion6().setFromRotationMatrix(
     new Matrix46().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
@@ -14916,7 +14984,7 @@ function makeWorldToLocal2(center) {
   return new Matrix46().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new Vector317(1, 1, 1)
+    new Vector319(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -14931,7 +14999,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(MathUtils10.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(MathUtils11.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -14994,7 +15062,7 @@ function PolylineHotspot({
     [center, valid, vertices]
   );
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const startVerticesRef = useRef34(null);
+  const startVerticesRef = useRef35(null);
   useEffect34(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
@@ -15061,7 +15129,7 @@ function PolylineHotspot({
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect35, useRef as useRef35, useState as useState18 } from "react";
+import { useEffect as useEffect35, useRef as useRef36, useState as useState18 } from "react";
 import {
   CanvasTexture,
   ClampToEdgeWrapping as ClampToEdgeWrapping4,
@@ -15259,8 +15327,8 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
   const [texture, setTexture] = useState18(null);
-  const onLoadRef = useRef35(onLoad);
-  const onErrorRef = useRef35(onError);
+  const onLoadRef = useRef36(onLoad);
+  const onErrorRef = useRef36(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect35(() => {
@@ -15301,8 +15369,8 @@ function GraphicHotspot(props) {
 }
 
 // src/hotspot/sequence-hotspot.tsx
-import { useFrame as useFrame16, useThree as useThree24 } from "@react-three/fiber";
-import { useEffect as useEffect36, useRef as useRef36, useState as useState19 } from "react";
+import { useFrame as useFrame17, useThree as useThree25 } from "@react-three/fiber";
+import { useEffect as useEffect36, useRef as useRef37, useState as useState19 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
   LinearFilter as LinearFilter8,
@@ -15324,10 +15392,10 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = useThree24((state) => state.gl);
+  const gl = useThree25((state) => state.gl);
   const [texture, setTexture] = useState19(null);
-  const onErrorRef = useRef36(onError);
-  const onLoadProgressRef = useRef36(onLoadProgress);
+  const onErrorRef = useRef37(onError);
+  const onLoadProgressRef = useRef37(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
   useEffect36(() => {
@@ -15401,13 +15469,13 @@ function SequenceHotspot({
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
   const [frameIndex, setFrameIndex] = useState19(0);
-  const elapsedRef = useRef36(0);
-  const frameIndexRef = useRef36(0);
-  const endedRef = useRef36(false);
-  const lastPlaybackStateRef = useRef36(null);
-  const onFrameChangeRef = useRef36(onFrameChange);
-  const onPlaybackStateChangeRef = useRef36(onPlaybackStateChange);
-  const onEndedRef = useRef36(onEnded);
+  const elapsedRef = useRef37(0);
+  const frameIndexRef = useRef37(0);
+  const endedRef = useRef37(false);
+  const lastPlaybackStateRef = useRef37(null);
+  const onFrameChangeRef = useRef37(onFrameChange);
+  const onPlaybackStateChangeRef = useRef37(onPlaybackStateChange);
+  const onEndedRef = useRef37(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
@@ -15456,7 +15524,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  useFrame16((_, deltaSeconds) => {
+  useFrame17((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -15490,8 +15558,8 @@ function SequenceHotspot({
 }
 
 // src/hotspot/video-hotspot.tsx
-import { useThree as useThree25 } from "@react-three/fiber";
-import { useEffect as useEffect37, useRef as useRef37, useState as useState20 } from "react";
+import { useThree as useThree26 } from "@react-three/fiber";
+import { useEffect as useEffect37, useRef as useRef38, useState as useState20 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
   LinearFilter as LinearFilter9,
@@ -15508,9 +15576,9 @@ function clampVolume2(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture2(id, poster, onError) {
-  const gl = useThree25((state) => state.gl);
+  const gl = useThree26((state) => state.gl);
   const [texture, setTexture] = useState20(null);
-  const onErrorRef = useRef37(onError);
+  const onErrorRef = useRef38(onError);
   onErrorRef.current = onError;
   useEffect37(() => {
     let active = true;
@@ -15568,9 +15636,9 @@ function useVideoResource({
   src
 }) {
   const [resource, setResource] = useState20(null);
-  const onEndedRef = useRef37(onEnded);
-  const onErrorRef = useRef37(onError);
-  const onPlaybackStateChangeRef = useRef37(onPlaybackStateChange);
+  const onEndedRef = useRef38(onEnded);
+  const onErrorRef = useRef38(onError);
+  const onPlaybackStateChangeRef = useRef38(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
@@ -15681,8 +15749,8 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture2(id, poster, onError);
-  const onPlaybackErrorRef = useRef37(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef37(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef38(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef38(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   useEffect37(() => {
@@ -15729,8 +15797,8 @@ function VideoHotspot({
 }
 
 // src/hotspot/audio-hotspot.tsx
-import { useFrame as useFrame17, useThree as useThree26 } from "@react-three/fiber";
-import { useEffect as useEffect38, useRef as useRef38, useState as useState21 } from "react";
+import { useFrame as useFrame18, useThree as useThree27 } from "@react-three/fiber";
+import { useEffect as useEffect38, useRef as useRef39, useState as useState21 } from "react";
 import {
   CanvasTexture as CanvasTexture2,
   ClampToEdgeWrapping as ClampToEdgeWrapping7,
@@ -15820,9 +15888,9 @@ function useSpeakerTextures(enabled) {
   return textures;
 }
 function useIconTexture(icon, enabled, onError, id) {
-  const gl = useThree26((state) => state.gl);
+  const gl = useThree27((state) => state.gl);
   const [texture, setTexture] = useState21(null);
-  const onErrorRef = useRef38(onError);
+  const onErrorRef = useRef39(onError);
   onErrorRef.current = onError;
   useEffect38(() => {
     let active = true;
@@ -15881,12 +15949,12 @@ function useAudioHowl({
   src
 }) {
   const [howl, setHowl] = useState21(null);
-  const playingRef = useRef38(playing);
-  const loopRef = useRef38(loop ?? false);
-  const onEndedRef = useRef38(onEnded);
-  const onErrorRef = useRef38(onError);
-  const onPlaybackErrorRef = useRef38(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef38(onPlaybackStateChange);
+  const playingRef = useRef39(playing);
+  const loopRef = useRef39(loop ?? false);
+  const onEndedRef = useRef39(onEnded);
+  const onErrorRef = useRef39(onError);
+  const onPlaybackErrorRef = useRef39(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef39(onPlaybackStateChange);
   playingRef.current = playing;
   loopRef.current = loop ?? false;
   onEndedRef.current = onEnded;
@@ -15959,7 +16027,7 @@ function AudioHotspot({
   ...anchorProps
 }) {
   usePanoMediaActivationIntent(playing);
-  const camera = useThree26((state) => state.camera);
+  const camera = useThree27((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
     id,
@@ -15975,11 +16043,11 @@ 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 = useRef38(playing);
+  const playingRef = useRef39(playing);
   playingRef.current = playing;
-  const mutedRef = useRef38(muted);
-  const volumeRef = useRef38(volume);
-  const rangeRef = useRef38(range);
+  const mutedRef = useRef39(muted);
+  const volumeRef = useRef39(volume);
+  const rangeRef = useRef39(range);
   mutedRef.current = muted;
   volumeRef.current = volume;
   rangeRef.current = range;
@@ -16011,7 +16079,7 @@ function AudioHotspot({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [howl, pauseWhenHidden]);
-  useFrame17(() => {
+  useFrame18(() => {
     if (!howl) {
       return;
     }
@@ -16028,7 +16096,7 @@ function AudioHotspot({
 }
 
 // src/hotspot/text-hotspot.tsx
-import { useEffect as useEffect39, useRef as useRef39, useState as useState22 } from "react";
+import { useEffect as useEffect39, useRef as useRef40, useState as useState22 } from "react";
 import {
   CanvasTexture as CanvasTexture3,
   ClampToEdgeWrapping as ClampToEdgeWrapping8,
@@ -16257,8 +16325,8 @@ function createTextTexture(text, width, height, style) {
 }
 function useTextTexture(text, width, height, style, onLoad, onError) {
   const [texture, setTexture] = useState22(null);
-  const onLoadRef = useRef39(onLoad);
-  const onErrorRef = useRef39(onError);
+  const onLoadRef = useRef40(onLoad);
+  const onErrorRef = useRef40(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   useEffect39(() => {
@@ -16358,7 +16426,7 @@ function TextHotspot({
 }
 
 // src/hotspot/iframe-hotspot.tsx
-import { Html as Html2 } from "@react-three/drei";
+import { Html } from "@react-three/drei";
 import { DoubleSide as DoubleSide6 } from "three";
 import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var IFRAME_LONG_SIDE = 800;
@@ -16440,7 +16508,7 @@ function IframeHotspot({
           )
         ] }),
         /* @__PURE__ */ jsx37(
-          Html2,
+          Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
             pointerEvents: acceptsPointer && pointerPolicy === "content" ? "auto" : "none",