@ericchen1990/pano-view 0.2.0 → 1.0.0

package/dist/index.mjs

@@ -1,14 +1,15 @@
 "use client";
 
-// src/pano-view.tsx
+// src/pano-viewer.tsx
 import { Canvas } from "@react-three/fiber";
 import {
   forwardRef as forwardRef2,
-  useCallback as useCallback3,
-  useEffect as useEffect10,
+  useCallback as useCallback4,
+  useContext as useContext11,
+  useEffect as useEffect11,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo4,
-  useRef as useRef9,
+  useMemo as useMemo5,
+  useRef as useRef10,
   useState as useState3
 } from "react";
 
@@ -404,7 +405,7 @@ function AutoRotate({
   const rotatingRef = useRef2(false);
   const yawAccumulatedRef = useRef2(0);
   if (!controlsRef) {
-    throw new Error("<AutoRotate> must be rendered inside <PanoView>.");
+    throw new Error("<AutoRotate> must be rendered inside <PanoViewer>.");
   }
   useEffect2(() => {
     elapsedRef.current = 0;
@@ -460,18 +461,54 @@ function AutoRotate({
   return null;
 }
 
+// src/control-claims.ts
+import { createContext as createContext3, useContext as useContext2 } from "react";
+var ControlClaimsContext = createContext3(null);
+var DefaultControlChannelContext = createContext3(false);
+var CHANNEL_COMPONENT = {
+  mouse: "MouseControls",
+  touch: "TouchControls",
+  keyboard: "KeyboardControls"
+};
+function createControlClaims() {
+  return { mouse: 0, touch: 0, keyboard: 0 };
+}
+function resetControlClaims(claims) {
+  claims.mouse = 0;
+  claims.touch = 0;
+  claims.keyboard = 0;
+}
+function isProduction() {
+  const nodeEnv = globalThis.process?.env?.NODE_ENV;
+  return nodeEnv === "production";
+}
+function useClaimControlChannel(channel) {
+  const claims = useContext2(ControlClaimsContext);
+  const isDefault = useContext2(DefaultControlChannelContext);
+  if (!claims || isDefault) {
+    return;
+  }
+  claims[channel] += 1;
+  if (!isProduction() && claims[channel] > 1) {
+    const name = CHANNEL_COMPONENT[channel];
+    console.warn(
+      `PanoViewer: multiple <${name}> instances are mounted. Render at most one per channel.`
+    );
+  }
+}
+
 // src/hotspot/accessibility.tsx
 import {
-  createContext as createContext3,
+  createContext as createContext4,
   useCallback,
-  useContext as useContext2,
+  useContext as useContext3,
   useEffect as useEffect3,
   useMemo,
   useRef as useRef3,
   useState
 } from "react";
 import { jsx } from "react/jsx-runtime";
-var HotspotAccessibilityContext = createContext3(null);
+var HotspotAccessibilityContext = createContext4(null);
 var VISUALLY_HIDDEN_STYLE = {
   border: 0,
   clip: "rect(0 0 0 0)",
@@ -497,7 +534,7 @@ function useHotspotAccessibility({
   ariaLabel,
   onActivate
 }) {
-  const registry = useContext2(HotspotAccessibilityContext);
+  const registry = useContext3(HotspotAccessibilityContext);
   const [focused, setFocused] = useState(false);
   const activateRef = useRef3(onActivate);
   const enabled = Boolean(onActivate);
@@ -578,7 +615,7 @@ function useHotspotAccessibilityLayer() {
 
 // src/keyboard-controls.tsx
 import { useFrame as useFrame3, useThree as useThree2 } from "@react-three/fiber";
-import { useContext as useContext3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4 } from "react";
+import { useContext as useContext4, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4 } from "react";
 var DEFAULT_ROTATE_SPEED = 60;
 var DEFAULT_ZOOM_SPEED = 30;
 var DEFAULT_SHIFT_MULTIPLIER = 3;
@@ -647,7 +684,8 @@ function KeyboardControls({
   onPreviousScene,
   onNextScene
 }) {
-  const controlsRef = useContext3(PanoramaViewContext);
+  useClaimControlChannel("keyboard");
+  const controlsRef = useContext4(PanoramaViewContext);
   const { gl } = useThree2();
   const pressedRef = useRef4(/* @__PURE__ */ new Set());
   const shiftHeldRef = useRef4(false);
@@ -657,7 +695,7 @@ function KeyboardControls({
   const onNextSceneRef = useRef4(onNextScene);
   const keyMap = useMemo2(() => resolveKeyMap(keys), [keys]);
   if (!controlsRef) {
-    throw new Error("<KeyboardControls> must be rendered inside <PanoView>.");
+    throw new Error("<KeyboardControls> must be rendered inside <PanoViewer>.");
   }
   invertRef.current = invert;
   fovSpeedRef.current = fovSpeed;
@@ -804,7 +842,7 @@ function KeyboardControls({
 
 // src/mouse-controls.tsx
 import { useThree as useThree3 } from "@react-three/fiber";
-import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "react";
+import { useContext as useContext5, useEffect as useEffect5, useRef as useRef5 } from "react";
 var DEFAULT_ROTATE_SPEED2 = 0.35;
 var DEFAULT_ZOOM_SPEED2 = 0.08;
 var BUTTON_FLAG = {
@@ -828,7 +866,8 @@ function MouseControls({
   buttons,
   fovSpeed
 }) {
-  const controlsRef = useContext4(PanoramaViewContext);
+  useClaimControlChannel("mouse");
+  const controlsRef = useContext5(PanoramaViewContext);
   const { gl } = useThree3();
   const pointersRef = useRef5(
     /* @__PURE__ */ new Map()
@@ -841,7 +880,7 @@ function MouseControls({
     fovSpeed
   });
   if (!controlsRef) {
-    throw new Error("<MouseControls> must be rendered inside <PanoView>.");
+    throw new Error("<MouseControls> must be rendered inside <PanoViewer>.");
   }
   optionsRef.current = {
     rotateSpeed,
@@ -975,9 +1014,9 @@ function MouseControls({
 
 // src/pano-context-menu.tsx
 import {
-  createContext as createContext4,
+  createContext as createContext5,
   useCallback as useCallback2,
-  useContext as useContext5,
+  useContext as useContext6,
   useEffect as useEffect6,
   useId,
   useLayoutEffect,
@@ -989,7 +1028,7 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
-var PanoContextMenuOverlayContext = createContext4(null);
+var PanoContextMenuOverlayContext = createContext5(null);
 var DEFAULT_APPEARANCE = {
   background: "#161616",
   color: "#f4f4f4",
@@ -1397,10 +1436,10 @@ function PanoContextMenu({
   separatorClassName,
   children
 }) {
-  const eventBus = useContext5(PanoEventBusContext);
-  const controlsRef = useContext5(PanoramaViewContext);
-  const overlayApi = useContext5(PanoContextMenuOverlayContext);
-  const actions = useContext5(PanoContextMenuActionsContext);
+  const eventBus = useContext6(PanoEventBusContext);
+  const controlsRef = useContext6(PanoramaViewContext);
+  const overlayApi = useContext6(PanoContextMenuOverlayContext);
+  const actions = useContext6(PanoContextMenuActionsContext);
   const instanceId = useId();
   const sessionKeyRef = useRef6(0);
   const propsRef = useRef6({
@@ -1426,11 +1465,11 @@ function PanoContextMenu({
     children
   };
   if (!eventBus || !controlsRef) {
-    throw new Error("<PanoContextMenu> must be rendered inside <PanoView>.");
+    throw new Error("<PanoContextMenu> must be rendered inside <PanoViewer>.");
   }
   if (!overlayApi) {
     throw new Error(
-      "<PanoContextMenu> requires the PanoView context-menu overlay host."
+      "<PanoContextMenu> requires the PanoViewer context-menu overlay host."
     );
   }
   const close = useCallback2(() => {
@@ -1664,11 +1703,163 @@ function composePanoContextMenuItems(props, presets) {
     ...resolvePanoContextMenuEntries(props.append ?? [], presets)
   ];
 }
-var PanoContextMenuActionsContext = createContext4(null);
+var PanoContextMenuActionsContext = createContext5(null);
+
+// src/pano-cursor.tsx
+import { useThree as useThree4 } from "@react-three/fiber";
+import {
+  createContext as createContext6,
+  useCallback as useCallback3,
+  useContext as useContext7,
+  useEffect as useEffect7,
+  useMemo as useMemo4,
+  useRef as useRef7
+} from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DEFAULT_PANO_CURSORS = {
+  default: "grab",
+  dragging: "grabbing",
+  hotspot: "pointer",
+  hotspotDragging: "move"
+};
+var PANO_DRAG_CLAIM_ID = "pano-cursor:dragging";
+var LAYER_PRIORITY = {
+  dragging: 1,
+  hotspot: 2,
+  hotspotDragging: 3
+};
+var PanoCursorContext = createContext6(null);
+function usePanoCursor() {
+  return useContext7(PanoCursorContext);
+}
+function hotspotCursorClaimId(id) {
+  return `pano-cursor:hotspot:${id}`;
+}
+function resolveClaimCursor(claim, cursors) {
+  switch (claim.layer) {
+    case "dragging":
+      return cursors.dragging;
+    case "hotspot":
+      return claim.cursor ?? cursors.hotspot;
+    case "hotspotDragging":
+      return claim.cursor ?? cursors.hotspotDragging;
+    default: {
+      const exhaustive = claim.layer;
+      return exhaustive;
+    }
+  }
+}
+function resolveHighestCursor(claims, cursors) {
+  let best = null;
+  let bestPriority = 0;
+  for (const claim of claims.values()) {
+    const priority = LAYER_PRIORITY[claim.layer];
+    if (priority >= bestPriority) {
+      best = claim;
+      bestPriority = priority;
+    }
+  }
+  return best ? resolveClaimCursor(best, cursors) : cursors.default;
+}
+function resolvePanoCursors(value) {
+  if (value === false) {
+    return null;
+  }
+  if (value === true || value === void 0) {
+    return DEFAULT_PANO_CURSORS;
+  }
+  return {
+    default: value.default ?? DEFAULT_PANO_CURSORS.default,
+    dragging: value.dragging ?? DEFAULT_PANO_CURSORS.dragging,
+    hotspot: value.hotspot ?? DEFAULT_PANO_CURSORS.hotspot,
+    hotspotDragging: value.hotspotDragging ?? DEFAULT_PANO_CURSORS.hotspotDragging
+  };
+}
+function PanoCursorController({
+  cursors,
+  children
+}) {
+  const { gl } = useThree4();
+  const eventBus = useContext7(PanoEventBusContext);
+  const claimsRef = useRef7(/* @__PURE__ */ new Map());
+  const cursorsRef = useRef7(cursors);
+  const appliedCursorRef = useRef7(null);
+  cursorsRef.current = cursors;
+  const applyCursor = useCallback3(() => {
+    const next = resolveHighestCursor(claimsRef.current, cursorsRef.current);
+    const element = gl.domElement;
+    if (appliedCursorRef.current === next && element.style.cursor === next) {
+      return;
+    }
+    element.style.cursor = next;
+    appliedCursorRef.current = next;
+  }, [gl]);
+  const claim = useCallback3(
+    (id, layer, cursor) => {
+      claimsRef.current.set(id, { layer, cursor });
+      applyCursor();
+    },
+    [applyCursor]
+  );
+  const release = useCallback3(
+    (id) => {
+      if (claimsRef.current.delete(id)) {
+        applyCursor();
+      }
+    },
+    [applyCursor]
+  );
+  const api = useMemo4(
+    () => ({
+      cursors,
+      claim,
+      release
+    }),
+    [claim, cursors, release]
+  );
+  useEffect7(() => {
+    const element = gl.domElement;
+    const previous = element.style.cursor;
+    return () => {
+      claimsRef.current.clear();
+      appliedCursorRef.current = null;
+      element.style.cursor = previous;
+    };
+  }, [gl]);
+  useEffect7(() => {
+    applyCursor();
+  }, [applyCursor, cursors]);
+  useEffect7(() => {
+    if (!eventBus) {
+      return;
+    }
+    const unsubscribeStart = eventBus.subscribe(
+      "viewinteractionstart",
+      (event) => {
+        if (event.source !== "mouse") {
+          return;
+        }
+        claim(PANO_DRAG_CLAIM_ID, "dragging");
+      }
+    );
+    const unsubscribeEnd = eventBus.subscribe("viewinteractionend", (event) => {
+      if (event.source !== "mouse") {
+        return;
+      }
+      release(PANO_DRAG_CLAIM_ID);
+    });
+    return () => {
+      unsubscribeStart();
+      unsubscribeEnd();
+      release(PANO_DRAG_CLAIM_ID);
+    };
+  }, [claim, eventBus, release]);
+  return /* @__PURE__ */ jsx3(PanoCursorContext.Provider, { value: api, children });
+}
 
 // src/pano-events.tsx
-import { useFrame as useFrame4, useThree as useThree4 } from "@react-three/fiber";
-import { useContext as useContext6, useEffect as useEffect7, useRef as useRef7 } from "react";
+import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
+import { useContext as useContext8, useEffect as useEffect8, useRef as useRef8 } from "react";
 var DEFAULT_IDLE_TIME_MS = 2e3;
 function resolveIdleTime(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_IDLE_TIME_MS;
@@ -1695,13 +1886,13 @@ function usePanoEvents({
   onAutoRotateStop,
   onAutoRotateOneRound
 }) {
-  const eventBus = useContext6(PanoEventBusContext);
-  const controlsRef = useContext6(PanoramaViewContext);
-  const { gl } = useThree4();
+  const eventBus = useContext8(PanoEventBusContext);
+  const controlsRef = useContext8(PanoramaViewContext);
+  const { gl } = useThree5();
   if (!eventBus || !controlsRef) {
-    throw new Error("usePanoEvents must be used inside <PanoView>.");
+    throw new Error("usePanoEvents must be used inside <PanoViewer>.");
   }
-  const callbacksRef = useRef7({
+  const callbacksRef = useRef8({
     onViewChange,
     onViewSettled,
     onViewInteractionStart,
@@ -1743,15 +1934,15 @@ function usePanoEvents({
     onAutoRotateStop,
     onAutoRotateOneRound
   };
-  const idleElapsedRef = useRef7(0);
-  const isIdleRef = useRef7(false);
-  const idleTimeRef = useRef7(resolveIdleTime(idleTime));
+  const idleElapsedRef = useRef8(0);
+  const isIdleRef = useRef8(false);
+  const idleTimeRef = useRef8(resolveIdleTime(idleTime));
   idleTimeRef.current = resolveIdleTime(idleTime);
-  useEffect7(() => {
+  useEffect8(() => {
     idleElapsedRef.current = 0;
     isIdleRef.current = false;
   }, [idleTime]);
-  useEffect7(() => {
+  useEffect8(() => {
     const unsubscribers = [
       eventBus.subscribe("viewchange", (view) => {
         callbacksRef.current.onViewChange?.(view);
@@ -1799,7 +1990,7 @@ function usePanoEvents({
       }
     };
   }, [eventBus]);
-  useEffect7(() => {
+  useEffect8(() => {
     const element = gl.domElement;
     const handleWheel = (nativeEvent) => {
       callbacksRef.current.onWheel?.({
@@ -1812,7 +2003,7 @@ function usePanoEvents({
       element.removeEventListener("wheel", handleWheel);
     };
   }, [gl]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -1841,7 +2032,7 @@ function usePanoEvents({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [gl]);
-  useEffect7(() => {
+  useEffect8(() => {
     const element = gl.domElement;
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -1882,8 +2073,8 @@ function PanoEvents(props) {
 }
 
 // src/panorama-event-surface.tsx
-import { useThree as useThree5 } from "@react-three/fiber";
-import { useContext as useContext7, useEffect as useEffect8 } from "react";
+import { useThree as useThree6 } from "@react-three/fiber";
+import { useContext as useContext9, useEffect as useEffect9 } from "react";
 import { BackSide, Raycaster, Vector2, Vector3 as Vector32 } from "three";
 
 // src/hotspot/coordinates.ts
@@ -1949,7 +2140,7 @@ var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
 var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
 
 // src/panorama-event-surface.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -1964,9 +2155,9 @@ function makePanoramaPointerEvent(event) {
   };
 }
 function PanoramaEventSurface() {
-  const eventBus = useContext7(PanoEventBusContext);
-  const { camera, gl } = useThree5();
-  useEffect8(() => {
+  const eventBus = useContext9(PanoEventBusContext);
+  const { camera, gl } = useThree6();
+  useEffect9(() => {
     if (!eventBus) {
       return;
     }
@@ -2017,8 +2208,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ jsx3("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ jsx4(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -2035,8 +2226,8 @@ function PanoramaEventSurface() {
 }
 
 // src/touch-controls.tsx
-import { useThree as useThree6 } from "@react-three/fiber";
-import { useContext as useContext8, useEffect as useEffect9, useRef as useRef8 } from "react";
+import { useThree as useThree7 } from "@react-three/fiber";
+import { useContext as useContext10, useEffect as useEffect10, useRef as useRef9 } from "react";
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
@@ -2050,16 +2241,17 @@ function TouchControls({
   invert = false,
   pinchZoom = true
 }) {
-  const controlsRef = useContext8(PanoramaViewContext);
-  const { gl } = useThree6();
-  const pointersRef = useRef8(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = useRef8(null);
-  const optionsRef = useRef8({ rotateSpeed, invert, pinchZoom });
+  useClaimControlChannel("touch");
+  const controlsRef = useContext10(PanoramaViewContext);
+  const { gl } = useThree7();
+  const pointersRef = useRef9(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = useRef9(null);
+  const optionsRef = useRef9({ rotateSpeed, invert, pinchZoom });
   if (!controlsRef) {
-    throw new Error("<TouchControls> must be rendered inside <PanoView>.");
+    throw new Error("<TouchControls> must be rendered inside <PanoViewer>.");
   }
   optionsRef.current = { rotateSpeed, invert, pinchZoom };
-  useEffect9(() => {
+  useEffect10(() => {
     const element = gl.domElement;
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
@@ -2180,8 +2372,8 @@ function TouchControls({
   return null;
 }
 
-// src/pano-view.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+// src/pano-viewer.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -2219,13 +2411,46 @@ function resolveContextMenuChannel(value) {
   }
   return { mount: true, props: { ...value } };
 }
-var PanoView = forwardRef2(
-  function PanoView2({
+function PanoCursorTree({
+  cursors,
+  children
+}) {
+  if (!cursors) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx5(PanoCursorController, { cursors, children });
+}
+function DefaultControlChannels({
+  userControlsEnabled,
+  mouseChannel,
+  touchChannel,
+  keyboardChannel,
+  fovSpeed
+}) {
+  const claims = useContext11(ControlClaimsContext);
+  if (!claims) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs3(DefaultControlChannelContext.Provider, { value: true, children: [
+    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx5(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
+    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx5(TouchControls, { ...touchChannel.props }) : null,
+    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx5(
+      KeyboardControls,
+      {
+        ...keyboardChannel.props,
+        fovSpeed: keyboardChannel.props.fovSpeed ?? fovSpeed
+      }
+    ) : null
+  ] });
+}
+var PanoViewer = forwardRef2(
+  function PanoViewer2({
     children,
     initialView,
     minFov = 30,
     maxFov = 100,
     controls = true,
+    cursors,
     contextMenu = true,
     onViewChange,
     onPanoramaClick,
@@ -2236,18 +2461,18 @@ var PanoView = forwardRef2(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = useRef9(null);
-    const controlsRef = useRef9(null);
-    const eventBus = useMemo4(() => createPanoEventBus(), []);
+    const rootRef = useRef10(null);
+    const controlsRef = useRef10(null);
+    const eventBus = useMemo5(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
-    const fallbackViewRef = useRef9(DEFAULT_VIEW);
+    const fallbackViewRef = useRef10(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
       Math.max(maxFov, normalizedMinFov + 1)
     );
-    const normalizedInitialView = useMemo4(
+    const normalizedInitialView = useMemo5(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
         pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
@@ -2265,8 +2490,10 @@ var PanoView = forwardRef2(
       ]
     );
     fallbackViewRef.current = normalizedInitialView;
+    const controlClaims = useMemo5(() => createControlClaims(), []);
+    resetControlClaims(controlClaims);
     const controlsEnabled = controls !== false;
-    const controlOptions = useMemo4(
+    const controlOptions = useMemo5(
       () => typeof controls === "object" ? controls : {},
       [controls]
     );
@@ -2274,7 +2501,7 @@ var PanoView = forwardRef2(
     const allModeInvert = controlOptions.invert === true;
     const topRotateSpeed = controlOptions.rotateSpeed ?? DEFAULT_POINTER_ROTATE_SPEED;
     const topZoomSpeed = controlOptions.zoomSpeed ?? DEFAULT_MOUSE_ZOOM_SPEED;
-    const mouseChannel = useMemo4(
+    const mouseChannel = useMemo5(
       () => resolveChannel(controlOptions.mouse, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -2290,7 +2517,7 @@ var PanoView = forwardRef2(
         topZoomSpeed
       ]
     );
-    const touchChannel = useMemo4(
+    const touchChannel = useMemo5(
       () => resolveChannel(controlOptions.touch, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -2299,13 +2526,13 @@ var PanoView = forwardRef2(
       }),
       [allModeInvert, controlOptions.touch, topRotateSpeed]
     );
-    const keyboardChannel = useMemo4(
+    const keyboardChannel = useMemo5(
       () => resolveChannel(controlOptions.keyboard, {
         enabled: true
       }),
       [controlOptions.keyboard]
     );
-    const toggleFullscreen = useCallback3(async () => {
+    const toggleFullscreen = useCallback4(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -2316,7 +2543,7 @@ var PanoView = forwardRef2(
       await rootRef.current?.requestFullscreen?.();
     }, []);
     const [isViewerFullscreen, setIsViewerFullscreen] = useState3(false);
-    useEffect10(() => {
+    useEffect11(() => {
       if (typeof document === "undefined") {
         return;
       }
@@ -2337,7 +2564,7 @@ var PanoView = forwardRef2(
         document.removeEventListener("fullscreenchange", syncFullscreen);
       };
     }, []);
-    const contextMenuActions = useMemo4(
+    const contextMenuActions = useMemo5(
       () => ({
         reset: () => {
           controlsRef.current?.reset();
@@ -2349,15 +2576,19 @@ var PanoView = forwardRef2(
       }),
       [isViewerFullscreen, toggleFullscreen]
     );
-    const contextMenuChannel = useMemo4(
+    const contextMenuChannel = useMemo5(
       () => resolveContextMenuChannel(contextMenu),
       [contextMenu]
     );
+    const resolvedCursors = useMemo5(
+      () => resolvePanoCursors(cursors),
+      [cursors]
+    );
     const legacyAutoRotateOptions = controlOptions;
     const [legacyAutoRotate, setLegacyAutoRotate] = useState3(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    useEffect10(() => {
+    useEffect11(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
     useImperativeHandle2(
@@ -2380,7 +2611,7 @@ var PanoView = forwardRef2(
       }),
       [toggleFullscreen]
     );
-    const rootStyle = useMemo4(
+    const rootStyle = useMemo5(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -2396,7 +2627,7 @@ var PanoView = forwardRef2(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
@@ -2419,7 +2650,7 @@ var PanoView = forwardRef2(
                 touchAction: userControlsEnabled ? "none" : "auto"
               },
               tabIndex: userControlsEnabled ? 0 : void 0,
-              children: /* @__PURE__ */ jsx4(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx4(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx4(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx4(
+              children: /* @__PURE__ */ jsx5(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx5(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx5(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx5(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx5(
                 PanoContextMenuOverlayContext.Provider,
                 {
                   value: contextMenuOverlayApi,
@@ -2428,7 +2659,7 @@ var PanoView = forwardRef2(
                     {
                       value: contextMenuActions,
                       children: [
-                        /* @__PURE__ */ jsx4(
+                        /* @__PURE__ */ jsx5(
                           PanoramaViewRuntime,
                           {
                             ref: controlsRef,
@@ -2439,7 +2670,7 @@ var PanoView = forwardRef2(
                             options: controlOptions
                           }
                         ),
-                        (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx4(
+                        (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx5(
                           PanoEvents,
                           {
                             onViewChange,
@@ -2448,36 +2679,33 @@ var PanoView = forwardRef2(
                             onPointerMove: onPanoramaPointerMove
                           }
                         ),
-                        /* @__PURE__ */ jsx4(
+                        /* @__PURE__ */ jsx5(
                           AutoRotate,
                           {
                             enabled: legacyAutoRotate,
                             speed: legacyAutoRotateOptions.autoRotateSpeed
                           }
                         ),
-                        userControlsEnabled && mouseChannel.mount ? /* @__PURE__ */ jsx4(
-                          MouseControls,
-                          {
-                            ...mouseChannel.props,
-                            fovSpeed: controlOptions.fovSpeed
-                          }
-                        ) : null,
-                        userControlsEnabled && touchChannel.mount ? /* @__PURE__ */ jsx4(TouchControls, { ...touchChannel.props }) : null,
-                        userControlsEnabled && keyboardChannel.mount ? /* @__PURE__ */ jsx4(
-                          KeyboardControls,
-                          {
-                            ...keyboardChannel.props,
-                            fovSpeed: keyboardChannel.props.fovSpeed ?? controlOptions.fovSpeed
-                          }
-                        ) : null,
-                        /* @__PURE__ */ jsx4(PanoramaEventSurface, {}),
-                        contextMenuChannel.mount ? /* @__PURE__ */ jsx4(PanoContextMenu, { ...contextMenuChannel.props }) : null,
-                        children
+                        /* @__PURE__ */ jsx5(PanoramaEventSurface, {}),
+                        contextMenuChannel.mount ? /* @__PURE__ */ jsx5(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                        /* @__PURE__ */ jsxs3(ControlClaimsContext.Provider, { value: controlClaims, children: [
+                          children,
+                          /* @__PURE__ */ jsx5(
+                            DefaultControlChannels,
+                            {
+                              fovSpeed: controlOptions.fovSpeed,
+                              keyboardChannel,
+                              mouseChannel,
+                              touchChannel,
+                              userControlsEnabled
+                            }
+                          )
+                        ] })
                       ]
                     }
                   )
                 }
-              ) }) }) })
+              ) }) }) }) })
             }
           ),
           contextMenuOverlay,
@@ -2489,8 +2717,8 @@ var PanoView = forwardRef2(
 );
 
 // src/sphere.tsx
-import { useThree as useThree7 } from "@react-three/fiber";
-import { useEffect as useEffect11, useRef as useRef10, useState as useState4 } from "react";
+import { useThree as useThree8 } from "@react-three/fiber";
+import { useEffect as useEffect12, useRef as useRef11, useState as useState4 } from "react";
 import {
   BackSide as BackSide2,
   LinearFilter,
@@ -2500,7 +2728,7 @@ import {
   SRGBColorSpace,
   TextureLoader
 } from "three";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Sphere({
   src,
   yawOffset = 0,
@@ -2508,13 +2736,13 @@ function Sphere({
   onError,
   visible = true
 }) {
-  const gl = useThree7((state) => state.gl);
+  const gl = useThree8((state) => state.gl);
   const [texture, setTexture] = useState4(null);
-  const onLoadRef = useRef10(onLoad);
-  const onErrorRef = useRef10(onError);
+  const onLoadRef = useRef11(onLoad);
+  const onErrorRef = useRef11(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect11(() => {
+  useEffect12(() => {
     let active = true;
     const loader = new TextureLoader();
     setTexture(null);
@@ -2548,7 +2776,7 @@ function Sphere({
       active = false;
     };
   }, [gl, src]);
-  useEffect11(
+  useEffect12(
     () => () => {
       texture?.dispose();
     },
@@ -2563,8 +2791,8 @@ function Sphere({
       rotation: [0, MathUtils3.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ jsx5("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx6(
           "meshBasicMaterial",
           {
             map: texture,
@@ -2577,15 +2805,15 @@ function Sphere({
   );
 }
 
-// src/panorama-scenes.tsx
-import { useFrame as useFrame6, useThree as useThree10 } from "@react-three/fiber";
+// src/scenes.tsx
+import { useFrame as useFrame6, useThree as useThree11 } from "@react-three/fiber";
 import {
   Fragment,
-  useCallback as useCallback4,
-  useContext as useContext10,
-  useEffect as useEffect14,
-  useMemo as useMemo7,
-  useRef as useRef12,
+  useCallback as useCallback5,
+  useContext as useContext13,
+  useEffect as useEffect15,
+  useMemo as useMemo8,
+  useRef as useRef13,
   useState as useState6
 } from "react";
 import {
@@ -2599,12 +2827,12 @@ import {
 } from "three";
 
 // src/tile/texture-manager-context.tsx
-import { useThree as useThree8 } from "@react-three/fiber";
+import { useThree as useThree9 } from "@react-three/fiber";
 import {
-  createContext as createContext5,
-  useContext as useContext9,
-  useEffect as useEffect12,
-  useMemo as useMemo5
+  createContext as createContext7,
+  useContext as useContext12,
+  useEffect as useEffect13,
+  useMemo as useMemo6
 } from "react";
 
 // src/tile/texture-manager.ts
@@ -2834,8 +3062,8 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var TileTextureManagerContext = createContext5(
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TileTextureManagerContext = createContext7(
   null
 );
 function TileTextureManagerProvider({
@@ -2843,9 +3071,9 @@ function TileTextureManagerProvider({
   maxTextureMemoryMb = 128,
   maxConcurrentLoads = 4
 }) {
-  const gl = useThree8((state) => state.gl);
+  const gl = useThree9((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = useMemo5(
+  const manager = useMemo6(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -2854,23 +3082,23 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ jsx6(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsx7(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return useContext9(TileTextureManagerContext);
+  return useContext12(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
-import { useFrame as useFrame5, useThree as useThree9 } from "@react-three/fiber";
+import { useFrame as useFrame5, useThree as useThree10 } from "@react-three/fiber";
 import {
   memo,
-  useEffect as useEffect13,
-  useMemo as useMemo6,
-  useRef as useRef11,
+  useEffect as useEffect14,
+  useMemo as useMemo7,
+  useRef as useRef12,
   useState as useState5
 } from "react";
 import {
@@ -3068,7 +3296,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
@@ -3078,9 +3306,9 @@ var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
 var SHARED_TILE_GEOMETRY = new PlaneGeometry(1, 1);
 function usePreviewTexture(url, anisotropy, onError) {
   const [texture, setTexture] = useState5(null);
-  const onErrorRef = useRef11(onError);
+  const onErrorRef = useRef12(onError);
   onErrorRef.current = onError;
-  useEffect13(() => {
+  useEffect14(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -3117,7 +3345,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  useEffect13(
+  useEffect14(
     () => () => {
       texture?.dispose();
     },
@@ -3130,7 +3358,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = useMemo6(() => {
+  const geometry = useMemo7(() => {
     const nextGeometry = new PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -3148,21 +3376,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  useEffect13(
+  useEffect14(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "meshBasicMaterial",
         {
           depthTest: false,
@@ -3178,7 +3406,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx7(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx8(
     PreviewFace,
     {
       face,
@@ -3196,7 +3424,7 @@ function useManagedTexture(manager, key, url, address) {
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  useEffect13(
+  useEffect14(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -3223,14 +3451,14 @@ var TileMesh = memo(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx7("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx8(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "meshBasicMaterial",
         {
           depthTest: false,
@@ -3247,7 +3475,7 @@ var TileLayerMeshes = memo(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx7(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx8(
     TileMesh,
     {
       address,
@@ -3415,11 +3643,11 @@ function Tile({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = useThree9();
-  const multiresConfig = useMemo6(() => parseMultires(multires), [multires]);
+  const { camera, gl, size } = useThree10();
+  const multiresConfig = useMemo7(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = useMemo6(
+  const candidatesByLevel = useMemo7(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -3431,13 +3659,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = useRef11(onLoadProgress);
-  const errorRef = useRef11(onTileError);
-  const levelChangeRef = useRef11(onLevelChange);
+  const progressRef = useRef12(onLoadProgress);
+  const errorRef = useRef12(onTileError);
+  const levelChangeRef = useRef12(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = useMemo6(
+  const ownedManager = useMemo7(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -3458,7 +3686,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  useEffect13(() => {
+  useEffect14(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -3468,11 +3696,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = useRef11(false);
-  useEffect13(() => {
+  const readyRef = useRef12(false);
+  useEffect14(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -3480,7 +3708,7 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = useMemo6(
+  const resolveUrl = useMemo7(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
@@ -3488,23 +3716,23 @@ function Tile({
     [baseUrl, resolveTileUrl, template]
   );
   const [layers, setLayers] = useState5([]);
-  const layerTokenRef = useRef11("");
-  const currentLevelRef = useRef11(1);
-  const lastUpdateAtRef = useRef11(-Infinity);
-  const visibilityDirtyRef = useRef11(true);
-  const lastVisibilityQuaternionRef = useRef11(camera.quaternion.clone());
-  const lastVisibilityFovRef = useRef11(Number.NaN);
-  const lastViewportRef = useRef11({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = useRef11(new Frustum());
-  const projectionMatrixRef = useRef11(new Matrix4());
-  const visibilityCameraRef = useRef11(new PerspectiveCamera2());
-  useEffect13(() => {
+  const layerTokenRef = useRef12("");
+  const currentLevelRef = useRef12(1);
+  const lastUpdateAtRef = useRef12(-Infinity);
+  const visibilityDirtyRef = useRef12(true);
+  const lastVisibilityQuaternionRef = useRef12(camera.quaternion.clone());
+  const lastVisibilityFovRef = useRef12(Number.NaN);
+  const lastViewportRef = useRef12({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = useRef12(new Frustum());
+  const projectionMatrixRef = useRef12(new Matrix4());
+  const visibilityCameraRef = useRef12(new PerspectiveCamera2());
+  useEffect14(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -3585,14 +3813,14 @@ function Tile({
     commitLayers(nextLayers);
   });
   return /* @__PURE__ */ jsxs5("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx7(
+    previewTexture ? /* @__PURE__ */ jsx8(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx7(
+    layers.map((layer) => /* @__PURE__ */ jsx8(
       TileLayerMeshes,
       {
         layer,
@@ -3604,8 +3832,8 @@ function Tile({
   ] });
 }
 
-// src/panorama-scenes.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+// src/scenes.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var TRANSITION_DEFAULTS = {
   none: { duration: 0, krpanoBlend: "NOBLEND" },
   crossfade: { duration: 1, krpanoBlend: "BLEND(1.0, easeInCubic)" },
@@ -3655,7 +3883,7 @@ function SceneSource({
     return null;
   }
   if (scene.type === "sphere") {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       Sphere,
       {
         src: scene.src,
@@ -3667,7 +3895,7 @@ function SceneSource({
     );
   }
   const { id: _id, type: _type, ...tileProps } = scene;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     Tile,
     {
       ...tileProps,
@@ -3683,10 +3911,10 @@ function SnapshotCapture({
   maxPixels,
   onCaptured
 }) {
-  const { camera, gl, scene, size } = useThree10();
-  const capturedRequestRef = useRef12(0);
-  const renderTargetRef = useRef12(null);
-  useEffect14(
+  const { camera, gl, scene, size } = useThree11();
+  const capturedRequestRef = useRef13(0);
+  const renderTargetRef = useRef13(null);
+  useEffect15(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
@@ -3739,12 +3967,12 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, size } = useThree10();
-  const meshRef = useRef12(null);
-  const startRef = useRef12(null);
-  const finishedRef = useRef12(false);
-  const directionRef = useRef12(new Vector35());
-  const material = useMemo7(
+  const { camera, size } = useThree11();
+  const meshRef = useRef13(null);
+  const startRef = useRef13(null);
+  const finishedRef = useRef13(false);
+  const directionRef = useRef13(new Vector35());
+  const material = useMemo8(
     () => new ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -3823,8 +4051,8 @@ function SnapshotOverlay({
     }),
     [snapshot.texture, transition.preset]
   );
-  useEffect14(() => () => material.dispose(), [material]);
-  useEffect14(() => {
+  useEffect15(() => () => material.dispose(), [material]);
+  useEffect15(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
@@ -3855,12 +4083,12 @@ function SnapshotOverlay({
     }
   });
   return /* @__PURE__ */ jsxs6("mesh", { ref: meshRef, renderOrder: 1e4, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx8("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx8("primitive", { attach: "material", object: material })
+    /* @__PURE__ */ jsx9("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx9("primitive", { attach: "material", object: material })
   ] });
 }
 var FULLSCREEN_PLANE = new PlaneGeometry2(1, 1);
-function PanoramaScenesController({
+function ScenesController({
   scenes,
   activeSceneId,
   transition: transitionInput,
@@ -3869,13 +4097,13 @@ function PanoramaScenesController({
   onTransitionError,
   snapshotMaxPixels = 3686400
 }) {
-  const controlsRef = useContext10(PanoramaViewContext);
+  const controlsRef = useContext13(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = useMemo7(
+  const transition = useMemo8(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = useMemo7(
+  const sceneMap = useMemo8(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
@@ -3892,24 +4120,24 @@ function PanoramaScenesController({
   const [transitionRunId, setTransitionRunId] = useState6(0);
   const [snapshot, setSnapshot] = useState6(null);
   const [recoveryKey, setRecoveryKey] = useState6(0);
-  const requestedSceneIdRef = useRef12(activeSceneId);
-  const captureReasonRef = useRef12("start");
-  const interactionReleaseRef = useRef12(null);
-  const slotsRef = useRef12(slots);
-  const phaseRef = useRef12(phase);
-  const liveSlotRef = useRef12(liveSlot);
-  const transitionFromRef = useRef12(initialScene);
+  const requestedSceneIdRef = useRef13(activeSceneId);
+  const captureReasonRef = useRef13("start");
+  const interactionReleaseRef = useRef13(null);
+  const slotsRef = useRef13(slots);
+  const phaseRef = useRef13(phase);
+  const liveSlotRef = useRef13(liveSlot);
+  const transitionFromRef = useRef13(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = useCallback4(() => {
+  const releaseInteraction = useCallback5(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = useCallback4((sceneId, error) => {
+  const reportError = useCallback5((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = useCallback4((scene) => {
+  const startPreload = useCallback5((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -3920,7 +4148,7 @@ function PanoramaScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -3944,7 +4172,7 @@ function PanoramaScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = useCallback4((slot) => {
+  const handleReady = useCallback5((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -3975,7 +4203,7 @@ function PanoramaScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = useCallback4((nextSnapshot) => {
+  const handleCaptured = useCallback5((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -3997,7 +4225,7 @@ function PanoramaScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = useCallback4(() => {
+  const finishTransition = useCallback5(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -4022,12 +4250,12 @@ function PanoramaScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  useEffect14(() => () => {
+  useEffect15(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
-  const { gl } = useThree10();
-  useEffect14(() => {
+  const { gl } = useThree11();
+  useEffect15(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -4052,7 +4280,7 @@ function PanoramaScenesController({
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
   return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -4064,7 +4292,7 @@ function PanoramaScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         SceneSource,
         {
           scene: source,
@@ -4080,7 +4308,7 @@ function PanoramaScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ jsx8(
+    snapshotVisible ? /* @__PURE__ */ jsx9(
       SnapshotOverlay,
       {
         snapshot,
@@ -4093,27 +4321,26 @@ function PanoramaScenesController({
     phase === "idle" && renderedScene ? renderHotspots?.(renderedScene) : null
   ] });
 }
-function PanoramaScenes({
+function Scenes({
   maxTextureMemoryMb,
   maxConcurrentTileLoads,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx8(PanoramaScenesController, { ...props })
+      children: /* @__PURE__ */ jsx9(ScenesController, { ...props })
     }
   );
 }
 
 // src/hotspot/image-hotspot.tsx
-import { useThree as useThree11 } from "@react-three/fiber";
-import { useEffect as useEffect16, useRef as useRef14, useState as useState7 } from "react";
+import { useThree as useThree12 } from "@react-three/fiber";
+import { useEffect as useEffect18, useRef as useRef15, useState as useState9 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping3,
-  DoubleSide as DoubleSide2,
   LinearFilter as LinearFilter5,
   LinearMipmapLinearFilter as LinearMipmapLinearFilter2,
   SRGBColorSpace as SRGBColorSpace4,
@@ -4123,12 +4350,14 @@ import {
 // src/hotspot/hotspot-anchor.tsx
 import { useFrame as useFrame7 } from "@react-three/fiber";
 import {
-  useContext as useContext11,
-  useEffect as useEffect15,
-  useMemo as useMemo8,
-  useRef as useRef13
+  useContext as useContext14,
+  useEffect as useEffect17,
+  useMemo as useMemo10,
+  useRef as useRef14,
+  useState as useState8
 } from "react";
 import {
+  Box3 as Box33,
   EdgesGeometry,
   MathUtils as MathUtils4,
   Matrix4 as Matrix42,
@@ -4137,7 +4366,129 @@ import {
   Quaternion as Quaternion2,
   Vector3 as Vector36
 } from "three";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/hotspot/hotspot-tooltip.tsx
+import { Html } from "@react-three/drei";
+import { useEffect as useEffect16, useMemo as useMemo9, useState as useState7 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var TOOLTIP_MAX_WIDTH = 220;
+var TOOLTIP_IMAGE_MAX_HEIGHT = 120;
+var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
+var WRAPPER_STYLE = {
+  pointerEvents: "none"
+};
+var BUBBLE_STYLE = {
+  background: "rgba(22, 22, 22, 0.72)",
+  border: "1px solid rgba(46, 46, 46, 0.7)",
+  borderRadius: 8,
+  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.35)",
+  boxSizing: "border-box",
+  color: "#f5fbfc",
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  padding: 8,
+  pointerEvents: "none",
+  whiteSpace: "nowrap"
+};
+var IMAGE_STYLE = {
+  borderRadius: 4,
+  display: "block",
+  height: "auto",
+  maxHeight: TOOLTIP_IMAGE_MAX_HEIGHT,
+  maxWidth: TOOLTIP_MAX_WIDTH,
+  objectFit: "contain"
+};
+var TEXT_STYLE = {
+  fontFamily: "system-ui, sans-serif",
+  fontSize: 12,
+  lineHeight: 1.4,
+  margin: 0,
+  overflow: "visible",
+  whiteSpace: "nowrap"
+};
+function resolveHotspotTooltipContent(tooltip) {
+  if (tooltip == null) {
+    return null;
+  }
+  if (typeof tooltip === "string") {
+    const text2 = tooltip.trim();
+    return text2 ? { text: text2 } : null;
+  }
+  const text = tooltip.text?.trim();
+  const image = tooltip.image?.trim();
+  if (!text && !image) {
+    return null;
+  }
+  const imageAlt = tooltip.imageAlt?.trim();
+  return {
+    image: image || void 0,
+    imageAlt: imageAlt || void 0,
+    text: text || void 0
+  };
+}
+function resolveHotspotTooltipOffset(offset) {
+  if (!Number.isFinite(offset)) {
+    return DEFAULT_HOTSPOT_TOOLTIP_OFFSET;
+  }
+  return Math.max(0, offset);
+}
+function tooltipBubbleTransform(placement, offset) {
+  const gap = `${offset}px`;
+  switch (placement) {
+    case "top":
+      return `translate(-50%, calc(-100% - ${gap}))`;
+    case "bottom":
+      return `translate(-50%, ${gap})`;
+    case "left":
+      return `translate(calc(-100% - ${gap}), -50%)`;
+    case "right":
+      return `translate(${gap}, -50%)`;
+    default: {
+      const exhaustive = placement;
+      return exhaustive;
+    }
+  }
+}
+function HotspotTooltip({
+  content,
+  placement = "top",
+  offset = DEFAULT_HOTSPOT_TOOLTIP_OFFSET
+}) {
+  const [imageFailed, setImageFailed] = useState7(false);
+  useEffect16(() => {
+    setImageFailed(false);
+  }, [content.image]);
+  const showImage = Boolean(content.image) && !imageFailed;
+  const bubbleStyle = useMemo9(
+    () => ({
+      ...BUBBLE_STYLE,
+      transform: tooltipBubbleTransform(
+        placement,
+        resolveHotspotTooltipOffset(offset)
+      )
+    }),
+    [offset, placement]
+  );
+  if (!showImage && !content.text) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx10(Html, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs7("div", { role: "tooltip", style: bubbleStyle, children: [
+    showImage ? /* @__PURE__ */ jsx10(
+      "img",
+      {
+        alt: content.imageAlt ?? content.text ?? "",
+        onError: () => setImageFailed(true),
+        src: content.image,
+        style: IMAGE_STYLE
+      }
+    ) : null,
+    content.text ? /* @__PURE__ */ jsx10("p", { style: TEXT_STYLE, children: content.text }) : null
+  ] }) });
+}
+
+// src/hotspot/hotspot-anchor.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -4146,6 +4497,10 @@ var MIN_ANGULAR_SIZE = 0.01;
 var MAX_ANGULAR_SIZE = 179;
 var DRAG_EPSILON_DEGREES = 1e-3;
 var LOCAL_FORWARD = new Vector36(0, 0, 1);
+var TOOLTIP_WORLD_BOX = new Box33();
+var TOOLTIP_LOCAL_BOX = new Box33();
+var TOOLTIP_CORNER = new Vector36();
+var TOOLTIP_INVERSE = new Matrix42();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
@@ -4216,6 +4571,100 @@ function angularDistance(a, b) {
   const bVector = panoPositionToVector3(b);
   return MathUtils4.radToDeg(aVector.angleTo(bVector));
 }
+function isTooltipOpen(trigger, hovered, focused, pinned) {
+  switch (trigger) {
+    case "always":
+      return true;
+    case "hover":
+      return hovered || focused;
+    case "click":
+      return pinned;
+    default: {
+      const exhaustive = trigger;
+      return exhaustive;
+    }
+  }
+}
+function setTooltipAnchorOnUnitPlane(anchor, placement) {
+  switch (placement) {
+    case "top":
+      anchor.position.set(0, 0.5, 0);
+      return;
+    case "bottom":
+      anchor.position.set(0, -0.5, 0);
+      return;
+    case "left":
+      anchor.position.set(-0.5, 0, 0);
+      return;
+    case "right":
+      anchor.position.set(0.5, 0, 0);
+      return;
+    default: {
+      const exhaustive = placement;
+      return exhaustive;
+    }
+  }
+}
+function setTooltipAnchorOnLocalBox(anchor, placement, minX, maxX, minY, maxY) {
+  switch (placement) {
+    case "top":
+      anchor.position.set((minX + maxX) / 2, maxY, 0);
+      return;
+    case "bottom":
+      anchor.position.set((minX + maxX) / 2, minY, 0);
+      return;
+    case "left":
+      anchor.position.set(minX, (minY + maxY) / 2, 0);
+      return;
+    case "right":
+      anchor.position.set(maxX, (minY + maxY) / 2, 0);
+      return;
+    default: {
+      const exhaustive = placement;
+      return exhaustive;
+    }
+  }
+}
+function updateTooltipAnchor(anchor, group, placement, useAngularScale) {
+  if (useAngularScale) {
+    setTooltipAnchorOnUnitPlane(anchor, placement);
+    return;
+  }
+  group.updateMatrixWorld(true);
+  TOOLTIP_WORLD_BOX.makeEmpty();
+  for (const child of group.children) {
+    if (child === anchor) {
+      continue;
+    }
+    TOOLTIP_WORLD_BOX.expandByObject(child);
+  }
+  if (TOOLTIP_WORLD_BOX.isEmpty()) {
+    setTooltipAnchorOnUnitPlane(anchor, placement);
+    return;
+  }
+  TOOLTIP_INVERSE.copy(group.matrixWorld).invert();
+  TOOLTIP_LOCAL_BOX.makeEmpty();
+  for (let x = 0; x <= 1; x += 1) {
+    for (let y = 0; y <= 1; y += 1) {
+      for (let z = 0; z <= 1; z += 1) {
+        TOOLTIP_CORNER.set(
+          x === 0 ? TOOLTIP_WORLD_BOX.min.x : TOOLTIP_WORLD_BOX.max.x,
+          y === 0 ? TOOLTIP_WORLD_BOX.min.y : TOOLTIP_WORLD_BOX.max.y,
+          z === 0 ? TOOLTIP_WORLD_BOX.min.z : TOOLTIP_WORLD_BOX.max.z
+        ).applyMatrix4(TOOLTIP_INVERSE);
+        TOOLTIP_LOCAL_BOX.expandByPoint(TOOLTIP_CORNER);
+      }
+    }
+  }
+  setTooltipAnchorOnLocalBox(
+    anchor,
+    placement,
+    TOOLTIP_LOCAL_BOX.min.x,
+    TOOLTIP_LOCAL_BOX.max.x,
+    TOOLTIP_LOCAL_BOX.min.y,
+    TOOLTIP_LOCAL_BOX.max.y
+  );
+}
 function HotspotAnchor({
   id,
   position,
@@ -4235,7 +4684,12 @@ function HotspotAnchor({
   visible = true,
   draggable = false,
   interactive = true,
+  cursor,
   ariaLabel,
+  tooltip,
+  tooltipTrigger = "always",
+  tooltipPlacement = "top",
+  tooltipOffset,
   children,
   onClick,
   onHoverChange,
@@ -4243,10 +4697,20 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = useContext11(PanoramaViewContext);
-  const groupRef = useRef13(null);
-  const dragStateRef = useRef13(null);
-  const suppressNextClickRef = useRef13(false);
+  const controlsRef = useContext14(PanoramaViewContext);
+  const eventBus = useContext14(PanoEventBusContext);
+  const cursorApi = usePanoCursor();
+  const groupRef = useRef14(null);
+  const tooltipAnchorRef = useRef14(null);
+  const dragStateRef = useRef14(null);
+  const suppressNextClickRef = useRef14(false);
+  const [hovered, setHovered] = useState8(false);
+  const [dragging, setDragging] = useState8(false);
+  const [pinned, setPinned] = useState8(false);
+  const tooltipContent = useMemo10(
+    () => resolveHotspotTooltipContent(tooltip),
+    [tooltip]
+  );
   const normalizedPosition = normalizePanoPosition(position);
   const rendering = internalOrientation && internalPlacement ? { orientation: internalOrientation, placement: internalPlacement } : HOTSPOT_MODE_RENDERING[mode];
   const { orientation: orientation2, placement } = rendering;
@@ -4259,27 +4723,33 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = useMemo8(
+  const worldPosition = useMemo10(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = useMemo8(
+  const surfaceQuaternion3 = useMemo10(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = useMemo8(() => {
+  const focusGeometry = useMemo10(() => {
     const planeGeometry = new PlaneGeometry3(1, 1);
     const geometry = new EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
     return geometry;
   }, []);
+  const canActivateFromKeyboard = Boolean(
+    visible && interactive && (onClick || tooltipTrigger === "click")
+  );
   const focused = useHotspotAccessibility({
     id,
     ariaLabel,
-    onActivate: visible && interactive && onClick ? (event) => {
-      onClick({
+    onActivate: canActivateFromKeyboard ? (event) => {
+      if (tooltipTrigger === "click") {
+        setPinned((current) => !current);
+      }
+      onClick?.({
         id,
         position: normalizedPosition,
         source: "keyboard",
@@ -4287,24 +4757,68 @@ function HotspotAnchor({
       });
     } : void 0
   });
-  useEffect15(
+  const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
+  const cursorClaimId = hotspotCursorClaimId(id);
+  useEffect17(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  useEffect15(() => () => focusGeometry.dispose(), [focusGeometry]);
-  useFrame7(({ camera }) => {
-    if (!groupRef.current) {
+  useEffect17(() => {
+    if (!cursorApi) {
       return;
     }
-    if (orientation2 === "billboard") {
-      groupRef.current.quaternion.copy(camera.quaternion);
-    } else {
-      groupRef.current.quaternion.copy(surfaceQuaternion3);
+    if (interactive && visible && dragging) {
+      cursorApi.claim(cursorClaimId, "hotspotDragging");
+      return;
     }
-    groupRef.current.rotateOnAxis(
+    if (interactive && visible && hovered) {
+      cursorApi.claim(cursorClaimId, "hotspot", cursor);
+      return;
+    }
+    cursorApi.release(cursorClaimId);
+  }, [
+    cursor,
+    cursorApi,
+    cursorClaimId,
+    dragging,
+    hovered,
+    interactive,
+    visible
+  ]);
+  useEffect17(
+    () => () => {
+      cursorApi?.release(cursorClaimId);
+    },
+    [cursorApi, cursorClaimId]
+  );
+  useEffect17(() => () => focusGeometry.dispose(), [focusGeometry]);
+  useEffect17(() => {
+    if (tooltipTrigger !== "click") {
+      setPinned(false);
+      return;
+    }
+    return eventBus?.subscribe("click", () => {
+      setPinned(false);
+    });
+  }, [eventBus, tooltipTrigger]);
+  useEffect17(() => {
+    if (tooltipTrigger !== "hover") {
+      setHovered(false);
+    }
+  }, [tooltipTrigger]);
+  useFrame7(({ camera }) => {
+    if (!groupRef.current) {
+      return;
+    }
+    if (orientation2 === "billboard") {
+      groupRef.current.quaternion.copy(camera.quaternion);
+    } else {
+      groupRef.current.quaternion.copy(surfaceQuaternion3);
+    }
+    groupRef.current.rotateOnAxis(
       LOCAL_FORWARD,
       MathUtils4.degToRad(-rotation)
     );
@@ -4314,6 +4828,14 @@ function HotspotAnchor({
       (useAngularScale ? worldHeight : 1) * scaleFactor,
       1
     );
+    if (tooltipOpen && tooltipAnchorRef.current) {
+      updateTooltipAnchor(
+        tooltipAnchorRef.current,
+        groupRef.current,
+        tooltipPlacement,
+        useAngularScale
+      );
+    }
   });
   const stopPointerEvent = (event) => {
     event.stopPropagation();
@@ -4340,8 +4862,12 @@ function HotspotAnchor({
     suppressNextClickRef.current = dragState.moved;
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
+    setDragging(false);
+    if (emitDragEnd) {
+      setHovered(true);
+    }
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "group",
     {
       ref: groupRef,
@@ -4352,6 +4878,9 @@ function HotspotAnchor({
       onClick: interactive ? (event) => {
         stopPointerEvent(event);
         if (!suppressNextClickRef.current) {
+          if (tooltipTrigger === "click") {
+            setPinned((current) => !current);
+          }
           onClick?.(makeInteractionEvent(id, normalizedPosition, event));
         }
         suppressNextClickRef.current = false;
@@ -4373,6 +4902,8 @@ function HotspotAnchor({
           releaseInteractionLock,
           moved: false
         };
+        setHovered(false);
+        setDragging(true);
         onDragStart?.({
           ...makeInteractionEvent(id, startPosition, event),
           source: "pointer",
@@ -4395,6 +4926,7 @@ function HotspotAnchor({
       } : void 0,
       onPointerOut: interactive ? (event) => {
         if (!dragStateRef.current) {
+          setHovered(false);
           onHoverChange?.(
             false,
             makeInteractionEvent(id, normalizedPosition, event)
@@ -4403,6 +4935,7 @@ function HotspotAnchor({
       } : void 0,
       onPointerOver: interactive ? (event) => {
         if (!dragStateRef.current) {
+          setHovered(true);
           onHoverChange?.(
             true,
             makeInteractionEvent(id, normalizedPosition, event)
@@ -4411,38 +4944,166 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: interactive ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx9(
+        focused ? focusContent ?? /* @__PURE__ */ jsx11(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx9("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx11("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
-        children
+        children,
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx11("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx11(
+          HotspotTooltip,
+          {
+            content: tooltipContent,
+            offset: resolveHotspotTooltipOffset(tooltipOffset),
+            placement: tooltipPlacement
+          }
+        ) }) : null
       ]
     }
   );
 }
 
-// src/hotspot/image-hotspot.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+// src/hotspot/hotspot-plane.tsx
+import {
+  DoubleSide as DoubleSide2,
+  Mesh as Mesh2,
+  MeshBasicMaterial,
+  Vector2 as Vector23
+} from "three";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var HOTSPOT_ALPHA_CUTOFF = 0.05;
+var SAMPLE_UV = new Vector23();
+var RAYCAST_HITS = [];
+var IMAGE_DATA_CACHE = /* @__PURE__ */ new WeakMap();
 function clampOpacity(opacity) {
   if (!Number.isFinite(opacity)) {
     return 1;
   }
   return Math.max(0, Math.min(opacity, 1));
 }
+function isSampleableImage(image) {
+  if (image instanceof HTMLImageElement) {
+    return image.naturalWidth > 0 && image.naturalHeight > 0;
+  }
+  if (image instanceof HTMLCanvasElement) {
+    return image.width > 0 && image.height > 0;
+  }
+  if (typeof OffscreenCanvas !== "undefined" && image instanceof OffscreenCanvas) {
+    return image.width > 0 && image.height > 0;
+  }
+  if (typeof ImageBitmap !== "undefined" && image instanceof ImageBitmap) {
+    return image.width > 0 && image.height > 0;
+  }
+  return false;
+}
+function imageSize(image) {
+  if (image instanceof HTMLImageElement) {
+    return { width: image.naturalWidth, height: image.naturalHeight };
+  }
+  return { width: image.width, height: image.height };
+}
+function readImageData(image) {
+  const cached = IMAGE_DATA_CACHE.get(image);
+  if (cached) {
+    return cached;
+  }
+  const { width, height } = imageSize(image);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    return null;
+  }
+  try {
+    context.drawImage(image, 0, 0);
+    const data = context.getImageData(0, 0, width, height);
+    IMAGE_DATA_CACHE.set(image, data);
+    return data;
+  } catch {
+    return null;
+  }
+}
+function sampleTextureAlpha(texture, u, v) {
+  if (!isSampleableImage(texture.image)) {
+    return null;
+  }
+  const data = readImageData(texture.image);
+  if (!data) {
+    return null;
+  }
+  SAMPLE_UV.set(u, v);
+  texture.transformUv(SAMPLE_UV);
+  const pixelX = Math.min(
+    data.width - 1,
+    Math.max(0, Math.floor(SAMPLE_UV.x * data.width))
+  );
+  const pixelY = Math.min(
+    data.height - 1,
+    Math.max(0, Math.floor(SAMPLE_UV.y * data.height))
+  );
+  return data.data[(pixelY * data.width + pixelX) * 4 + 3] / 255;
+}
+function hotspotPlaneRaycast(raycaster, intersects2) {
+  const material = Array.isArray(this.material) ? this.material[0] : this.material;
+  if (!(material instanceof MeshBasicMaterial)) {
+    Mesh2.prototype.raycast.call(this, raycaster, intersects2);
+    return;
+  }
+  const cutoff = Math.max(material.alphaTest, HOTSPOT_ALPHA_CUTOFF);
+  if (material.opacity < cutoff) {
+    return;
+  }
+  RAYCAST_HITS.length = 0;
+  Mesh2.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
+  const map = material.map;
+  for (const hit of RAYCAST_HITS) {
+    if (!map || !hit.uv) {
+      intersects2.push(hit);
+      continue;
+    }
+    const texelAlpha = sampleTextureAlpha(map, hit.uv.x, hit.uv.y);
+    if (texelAlpha === null || texelAlpha * material.opacity >= cutoff) {
+      intersects2.push(hit);
+    }
+  }
+}
+function HotspotPlane({
+  map,
+  opacity
+}) {
+  return /* @__PURE__ */ jsxs9("mesh", { raycast: hotspotPlaneRaycast, children: [
+    /* @__PURE__ */ jsx12("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx12(
+      "meshBasicMaterial",
+      {
+        alphaTest: HOTSPOT_ALPHA_CUTOFF,
+        alphaToCoverage: true,
+        map,
+        opacity: map ? clampOpacity(opacity) : 0,
+        side: DoubleSide2,
+        toneMapped: false,
+        transparent: true
+      }
+    )
+  ] });
+}
+
+// src/hotspot/image-hotspot.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = useThree11((state) => state.gl);
-  const [texture, setTexture] = useState7(null);
-  const onLoadRef = useRef14(onLoad);
-  const onErrorRef = useRef14(onError);
+  const gl = useThree12((state) => state.gl);
+  const [texture, setTexture] = useState9(null);
+  const onLoadRef = useRef15(onLoad);
+  const onErrorRef = useRef15(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect16(() => {
+  useEffect18(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -4480,7 +5141,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  useEffect16(
+  useEffect18(
     () => () => {
       texture?.dispose();
     },
@@ -4498,24 +5159,11 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx10(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsxs8("mesh", { children: [
-    /* @__PURE__ */ jsx10("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx10(
-      "meshBasicMaterial",
-      {
-        map: texture,
-        opacity: texture ? clampOpacity(opacity) : 0,
-        side: DoubleSide2,
-        toneMapped: false,
-        transparent: true
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx13(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx13(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { useThree as useThree12 } from "@react-three/fiber";
-import { useEffect as useEffect17, useMemo as useMemo9, useRef as useRef15 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo11, useRef as useRef16 } from "react";
 import {
   BufferGeometry,
   DoubleSide as DoubleSide3,
@@ -4523,13 +5171,39 @@ import {
   Matrix4 as Matrix43,
   Quaternion as Quaternion3,
   ShapeUtils,
-  Vector2 as Vector23,
+  Vector2 as Vector24,
   Vector3 as Vector37
 } from "three";
-import { Line2 } from "three/addons/lines/Line2.js";
-import { LineGeometry } from "three/addons/lines/LineGeometry.js";
-import { LineMaterial } from "three/addons/lines/LineMaterial.js";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/hotspot/hotspot-stroke-line.tsx
+import { Line } from "@react-three/drei";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function HotspotStrokeLine({
+  points,
+  color,
+  lineWidth,
+  opacity,
+  renderOrder
+}) {
+  return /* @__PURE__ */ jsx14(
+    Line,
+    {
+      alphaToCoverage: true,
+      color,
+      depthTest: true,
+      depthWrite: false,
+      lineWidth: Math.max(0.5, lineWidth),
+      opacity,
+      points,
+      renderOrder,
+      transparent: true,
+      worldUnits: false
+    }
+  );
+}
+
+// src/hotspot/polygon-hotspot.tsx
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -4564,7 +5238,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new Vector23(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new Vector24(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -4713,7 +5387,7 @@ function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps)
 }
 function makeFillGeometry(vertices, center) {
   const unwrapped = unwrapPolygonVertices(vertices);
-  const contour = unwrapped.map((vertex) => new Vector23(vertex.unwrappedYaw, vertex.pitch));
+  const contour = unwrapped.map((vertex) => new Vector24(vertex.unwrappedYaw, vertex.pitch));
   const triangles = ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
@@ -4733,7 +5407,7 @@ function makeFillGeometry(vertices, center) {
   return new BufferGeometry().setAttribute("position", new Float32BufferAttribute(positions, 3)).setIndex(indices);
 }
 function makeStrokePositions(vertices, center) {
-  const positions = [];
+  const points = [];
   const worldToLocal = makeWorldToLocal(center);
   const unwrapped = unwrapPolygonVertices(vertices);
   const steps = polygonSubdivisionSteps(vertices);
@@ -4749,33 +5423,14 @@ function makeStrokePositions(vertices, center) {
         },
         POLYGON_RADIUS
       ).applyMatrix4(worldToLocal);
-      positions.push(point.x, point.y, point.z);
+      points.push([point.x, point.y, point.z]);
     }
   }
-  positions.push(...positions.slice(0, 3));
-  return positions;
-}
-function makeStrokeLine(positions, color, width, opacity) {
-  const geometry = new LineGeometry();
-  geometry.setPositions(positions);
-  const material = new LineMaterial({
-    color,
-    depthTest: true,
-    depthWrite: false,
-    linewidth: Math.max(0.5, width),
-    opacity,
-    transparent: true,
-    worldUnits: false,
-    alphaToCoverage: true
-  });
-  const line = new Line2(geometry, material);
-  line.computeLineDistances();
-  return line;
-}
-function disposeStrokeLine(line) {
-  if (!line) return;
-  line.geometry.dispose();
-  line.material.dispose();
+  const first = points[0];
+  if (first) {
+    points.push(first);
+  }
+  return points;
 }
 function translateVertices(vertices, from, to) {
   const yawOffset = normalizePanoYaw(to.yaw - from.yaw);
@@ -4802,45 +5457,27 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const gl = useThree12((state) => state.gl);
-  const size = useThree12((state) => state.size);
-  const issues = useMemo9(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = useMemo11(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo9(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = useMemo9(
+  const center = useMemo11(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = useMemo11(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePositions = useMemo9(
+  const strokePoints = useMemo11(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const devicePixelRatio = gl.getPixelRatio();
-  const strokeLine = useMemo9(
-    () => strokePositions ? makeStrokeLine(strokePositions, stroke, strokeWidth * devicePixelRatio, resolvedStrokeOpacity) : null,
-    [devicePixelRatio, resolvedStrokeOpacity, stroke, strokePositions, strokeWidth]
-  );
-  const focusStrokeLine = useMemo9(
-    () => strokePositions ? makeStrokeLine(strokePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
-    [devicePixelRatio, strokePositions, strokeWidth]
-  );
-  const startVerticesRef = useRef15(null);
+  const startVerticesRef = useRef16(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  useEffect17(() => {
+  useEffect19(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  useEffect17(() => () => fillGeometry?.dispose(), [fillGeometry]);
-  useEffect17(() => () => disposeStrokeLine(strokeLine), [strokeLine]);
-  useEffect17(() => () => disposeStrokeLine(focusStrokeLine), [focusStrokeLine]);
-  useEffect17(() => {
-    const width = gl.domElement.width;
-    const height = gl.domElement.height;
-    for (const line of [strokeLine, focusStrokeLine]) {
-      if (line) line.material.resolution.set(width, height);
-    }
-  }, [focusStrokeLine, gl, size.height, size.width, strokeLine]);
-  if (!valid || !center || !fillGeometry || !strokeLine || !focusStrokeLine) return null;
+  useEffect19(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  if (!valid || !center || !fillGeometry || !strokePoints || strokePoints.length < 2) {
+    return null;
+  }
   const emitVerticesChange = (event, callback) => {
     const startVertices = startVerticesRef.current ?? cloneVertices(vertices);
     const nextVertices = translateVertices(startVertices, event.startPosition, event.position);
@@ -4852,7 +5489,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -4867,7 +5504,16 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx11("primitive", { object: focusStrokeLine, renderOrder: renderOrder + 2 }),
+      focusContent: /* @__PURE__ */ jsx15(
+        HotspotStrokeLine,
+        {
+          color: "#75cbd3",
+          lineWidth: strokeWidth + 2,
+          opacity: 1,
+          points: strokePoints,
+          renderOrder: renderOrder + 2
+        }
+      ),
       onDragStart: (event) => {
         startVerticesRef.current = cloneVertices(vertices);
         emitVerticesChange(event, onDragStart);
@@ -4878,7 +5524,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx11("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx15("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx15(
           "meshBasicMaterial",
           {
             color: fill,
@@ -4888,25 +5534,30 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx11("primitive", { object: strokeLine, renderOrder: renderOrder + 1 })
+        /* @__PURE__ */ jsx15(
+          HotspotStrokeLine,
+          {
+            color: stroke,
+            lineWidth: strokeWidth,
+            opacity: resolvedStrokeOpacity,
+            points: strokePoints,
+            renderOrder: renderOrder + 1
+          }
+        )
       ]
     }
   );
 }
 
 // src/hotspot/polyline-hotspot.tsx
-import { useThree as useThree13 } from "@react-three/fiber";
-import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef16 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo12, useRef as useRef17 } from "react";
 import {
   MathUtils as MathUtils5,
   Matrix4 as Matrix44,
   Quaternion as Quaternion4,
   Vector3 as Vector38
 } from "three";
-import { Line2 as Line22 } from "three/addons/lines/Line2.js";
-import { LineGeometry as LineGeometry2 } from "three/addons/lines/LineGeometry.js";
-import { LineMaterial as LineMaterial2 } from "three/addons/lines/LineMaterial.js";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -4972,7 +5623,7 @@ function subdivisionSteps(vertices) {
   );
 }
 function makeLinePositions(vertices, center) {
-  const positions = [];
+  const points = [];
   const worldToLocal = makeWorldToLocal2(center);
   const unwrapped = unwrapVertices(vertices);
   const steps = subdivisionSteps(vertices);
@@ -4988,35 +5639,13 @@ function makeLinePositions(vertices, center) {
         },
         POLYLINE_RADIUS
       ).applyMatrix4(worldToLocal);
-      positions.push(point.x, point.y, point.z);
+      points.push([point.x, point.y, point.z]);
     }
   }
   const last = unwrapped[unwrapped.length - 1];
   const lastPoint = panoPositionToVector3(last, POLYLINE_RADIUS).applyMatrix4(worldToLocal);
-  positions.push(lastPoint.x, lastPoint.y, lastPoint.z);
-  return positions;
-}
-function makeLine(positions, color, width, opacity) {
-  const geometry = new LineGeometry2();
-  geometry.setPositions(positions);
-  const material = new LineMaterial2({
-    color,
-    depthTest: true,
-    depthWrite: false,
-    linewidth: Math.max(0.5, width),
-    opacity,
-    transparent: true,
-    worldUnits: false,
-    alphaToCoverage: true
-  });
-  const line = new Line22(geometry, material);
-  line.computeLineDistances();
-  return line;
-}
-function disposeLine(line) {
-  if (!line) return;
-  line.geometry.dispose();
-  line.material.dispose();
+  points.push([lastPoint.x, lastPoint.y, lastPoint.z]);
+  return points;
 }
 function translateVertices2(vertices, from, to) {
   const yawOffset = normalizePanoYaw(to.yaw - from.yaw);
@@ -5043,39 +5672,19 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const gl = useThree13((state) => state.gl);
-  const size = useThree13((state) => state.size);
-  const issues = useMemo10(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = useMemo12(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = useMemo10(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePositions = useMemo10(
+  const center = useMemo12(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = useMemo12(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
-  const devicePixelRatio = gl.getPixelRatio();
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const line = useMemo10(
-    () => linePositions ? makeLine(linePositions, stroke, strokeWidth * devicePixelRatio, opacity) : null,
-    [devicePixelRatio, linePositions, opacity, stroke, strokeWidth]
-  );
-  const focusLine = useMemo10(
-    () => linePositions ? makeLine(linePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
-    [devicePixelRatio, linePositions, strokeWidth]
-  );
-  const startVerticesRef = useRef16(null);
-  useEffect18(() => {
+  const startVerticesRef = useRef17(null);
+  useEffect20(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
-  useEffect18(() => () => disposeLine(line), [line]);
-  useEffect18(() => () => disposeLine(focusLine), [focusLine]);
-  useEffect18(() => {
-    const width = gl.domElement.width;
-    const height = gl.domElement.height;
-    for (const nextLine of [line, focusLine]) {
-      if (nextLine) nextLine.material.resolution.set(width, height);
-    }
-  }, [focusLine, gl, line, size.height, size.width]);
-  if (!valid || !center || !line || !focusLine) return null;
+  if (!valid || !center || !linePoints || linePoints.length < 2) return null;
   const emitVerticesChange = (event, callback) => {
     const startVertices = startVerticesRef.current ?? cloneVertices2(vertices);
     callback?.({
@@ -5086,7 +5695,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx16(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -5100,7 +5709,16 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx12("primitive", { object: focusLine, renderOrder: renderOrder + 2 }),
+      focusContent: /* @__PURE__ */ jsx16(
+        HotspotStrokeLine,
+        {
+          color: "#75cbd3",
+          lineWidth: strokeWidth + 2,
+          opacity: 1,
+          points: linePoints,
+          renderOrder: renderOrder + 2
+        }
+      ),
       onDragStart: (event) => {
         startVerticesRef.current = cloneVertices2(vertices);
         emitVerticesChange(event, onDragStart);
@@ -5110,29 +5728,31 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx12("primitive", { object: line, renderOrder: renderOrder + 1 })
+      children: /* @__PURE__ */ jsx16(
+        HotspotStrokeLine,
+        {
+          color: stroke,
+          lineWidth: strokeWidth,
+          opacity,
+          points: linePoints,
+          renderOrder: renderOrder + 1
+        }
+      )
     }
   );
 }
 
 // src/hotspot/graphic-hotspot.tsx
-import { useEffect as useEffect19, useRef as useRef17, useState as useState8 } from "react";
+import { useEffect as useEffect21, useRef as useRef18, useState as useState10 } from "react";
 import {
   CanvasTexture,
   ClampToEdgeWrapping as ClampToEdgeWrapping4,
-  DoubleSide as DoubleSide4,
   LinearFilter as LinearFilter6,
   LinearMipmapLinearFilter as LinearMipmapLinearFilter3,
   SRGBColorSpace as SRGBColorSpace5
 } from "three";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
-function clampOpacity2(opacity) {
-  if (!Number.isFinite(opacity)) {
-    return 1;
-  }
-  return Math.max(0, Math.min(opacity, 1));
-}
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
 }
@@ -5320,12 +5940,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = useState8(null);
-  const onLoadRef = useRef17(onLoad);
-  const onErrorRef = useRef17(onError);
+  const [texture, setTexture] = useState10(null);
+  const onLoadRef = useRef18(onLoad);
+  const onErrorRef = useRef18(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  useEffect19(() => {
+  useEffect21(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -5351,48 +5971,29 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ jsx13(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsxs10("mesh", { children: [
-    /* @__PURE__ */ jsx13("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx13(
-      "meshBasicMaterial",
-      {
-        map: texture,
-        opacity: texture ? clampOpacity2(opacity) : 0,
-        side: DoubleSide4,
-        toneMapped: false,
-        transparent: true
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx17(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx17(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx13(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx17(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx13(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx17(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-import { useFrame as useFrame8, useThree as useThree14 } from "@react-three/fiber";
-import { useEffect as useEffect20, useRef as useRef18, useState as useState9 } from "react";
+import { useFrame as useFrame8, useThree as useThree13 } from "@react-three/fiber";
+import { useEffect as useEffect22, useRef as useRef19, useState as useState11 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping5,
-  DoubleSide as DoubleSide5,
   LinearFilter as LinearFilter7,
   LinearMipmapLinearFilter as LinearMipmapLinearFilter4,
   SRGBColorSpace as SRGBColorSpace6,
   TextureLoader as TextureLoader5
 } from "three";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
-function clampOpacity3(opacity) {
-  if (!Number.isFinite(opacity)) {
-    return 1;
-  }
-  return Math.max(0, Math.min(opacity, 1));
-}
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
 }
@@ -5405,13 +6006,13 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = useThree14((state) => state.gl);
-  const [texture, setTexture] = useState9(null);
-  const onErrorRef = useRef18(onError);
-  const onLoadProgressRef = useRef18(onLoadProgress);
+  const gl = useThree13((state) => state.gl);
+  const [texture, setTexture] = useState11(null);
+  const onErrorRef = useRef19(onError);
+  const onLoadProgressRef = useRef19(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  useEffect20(() => {
+  useEffect22(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -5452,7 +6053,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  useEffect20(
+  useEffect22(
     () => () => {
       texture?.dispose();
     },
@@ -5481,24 +6082,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = useState9(0);
-  const elapsedRef = useRef18(0);
-  const frameIndexRef = useRef18(0);
-  const endedRef = useRef18(false);
-  const lastPlaybackStateRef = useRef18(null);
-  const onFrameChangeRef = useRef18(onFrameChange);
-  const onPlaybackStateChangeRef = useRef18(onPlaybackStateChange);
-  const onEndedRef = useRef18(onEnded);
+  const [frameIndex, setFrameIndex] = useState11(0);
+  const elapsedRef = useRef19(0);
+  const frameIndexRef = useRef19(0);
+  const endedRef = useRef19(false);
+  const lastPlaybackStateRef = useRef19(null);
+  const onFrameChangeRef = useRef19(onFrameChange);
+  const onPlaybackStateChangeRef = useRef19(onPlaybackStateChange);
+  const onEndedRef = useRef19(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  useEffect20(() => {
+  useEffect22(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (!texture) {
       return;
     }
@@ -5512,13 +6113,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (!texture) {
       return;
     }
@@ -5567,40 +6168,21 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx14(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsxs11("mesh", { children: [
-    /* @__PURE__ */ jsx14("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx14(
-      "meshBasicMaterial",
-      {
-        map: texture,
-        opacity: texture ? clampOpacity3(opacity) : 0,
-        side: DoubleSide5,
-        toneMapped: false,
-        transparent: true
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx18(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx18(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
-import { useThree as useThree15 } from "@react-three/fiber";
-import { useEffect as useEffect21, useRef as useRef19, useState as useState10 } from "react";
+import { useThree as useThree14 } from "@react-three/fiber";
+import { useEffect as useEffect23, useRef as useRef20, useState as useState12 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
-  DoubleSide as DoubleSide6,
   LinearFilter as LinearFilter8,
   LinearMipmapLinearFilter as LinearMipmapLinearFilter5,
   SRGBColorSpace as SRGBColorSpace7,
   TextureLoader as TextureLoader6,
   VideoTexture
 } from "three";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-function clampOpacity4(opacity) {
-  if (!Number.isFinite(opacity)) {
-    return 1;
-  }
-  return Math.max(0, Math.min(opacity, 1));
-}
+import { jsx as jsx19 } from "react/jsx-runtime";
 function clampVolume(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -5608,11 +6190,11 @@ function clampVolume(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture(id, poster, onError) {
-  const gl = useThree15((state) => state.gl);
-  const [texture, setTexture] = useState10(null);
-  const onErrorRef = useRef19(onError);
+  const gl = useThree14((state) => state.gl);
+  const [texture, setTexture] = useState12(null);
+  const onErrorRef = useRef20(onError);
   onErrorRef.current = onError;
-  useEffect21(() => {
+  useEffect23(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -5649,7 +6231,7 @@ function usePosterTexture(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  useEffect21(
+  useEffect23(
     () => () => {
       texture?.dispose();
     },
@@ -5667,14 +6249,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = useState10(null);
-  const onEndedRef = useRef19(onEnded);
-  const onErrorRef = useRef19(onError);
-  const onPlaybackStateChangeRef = useRef19(onPlaybackStateChange);
+  const [resource, setResource] = useState12(null);
+  const onEndedRef = useRef20(onEnded);
+  const onErrorRef = useRef20(onError);
+  const onPlaybackStateChangeRef = useRef20(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect21(() => {
+  useEffect23(() => {
     if (!src) {
       setResource(null);
       return;
@@ -5775,11 +6357,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture(id, poster, onError);
-  const onPlaybackErrorRef = useRef19(onPlaybackError);
-  const onPlaybackStateChangeRef = useRef19(onPlaybackStateChange);
+  const onPlaybackErrorRef = useRef20(onPlaybackError);
+  const onPlaybackStateChangeRef = useRef20(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect21(() => {
+  useEffect23(() => {
     if (!resource) {
       return;
     }
@@ -5789,7 +6371,7 @@ function VideoHotspot({
     resource.video.playsInline = playsInline;
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect21(() => {
+  useEffect23(() => {
     if (!resource) {
       return;
     }
@@ -5812,23 +6394,410 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx15(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsxs12("mesh", { children: [
-    /* @__PURE__ */ jsx15("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx15(
-      "meshBasicMaterial",
+  return /* @__PURE__ */ jsx19(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx19(HotspotPlane, { map: activeTexture, opacity }) });
+}
+
+// src/hotspot/text-hotspot.tsx
+import { useEffect as useEffect24, useRef as useRef21, useState as useState13 } from "react";
+import {
+  CanvasTexture as CanvasTexture2,
+  ClampToEdgeWrapping as ClampToEdgeWrapping7,
+  LinearFilter as LinearFilter9,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter6,
+  SRGBColorSpace as SRGBColorSpace8
+} from "three";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var TEXT_TEXTURE_LONG_SIDE = 1024;
+var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
+var DEFAULT_COLOR = "#f8fafc";
+var DEFAULT_BACKGROUND = "#111827";
+function clamp01(value, fallback) {
+  if (!Number.isFinite(value)) {
+    return fallback;
+  }
+  return Math.max(0, Math.min(value, 1));
+}
+function resolvePositive(value, fallback) {
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function resolveCornerRadius2(value) {
+  return Number.isFinite(value) ? Math.max(0, Math.min(value, 0.5)) : 0.08;
+}
+function textureSize(width, height) {
+  const safeWidth = resolvePositive(width, 1);
+  const safeHeight = resolvePositive(height, 1);
+  if (safeWidth >= safeHeight) {
+    return {
+      canvasWidth: TEXT_TEXTURE_LONG_SIDE,
+      canvasHeight: Math.max(
+        1,
+        Math.round(TEXT_TEXTURE_LONG_SIDE * (safeHeight / safeWidth))
+      )
+    };
+  }
+  return {
+    canvasWidth: Math.max(
+      1,
+      Math.round(TEXT_TEXTURE_LONG_SIDE * (safeWidth / safeHeight))
+    ),
+    canvasHeight: TEXT_TEXTURE_LONG_SIDE
+  };
+}
+function roundedRectanglePath2(context, x, y, width, height, radius) {
+  const safeRadius = Math.max(
+    0,
+    Math.min(radius, width / 2, height / 2)
+  );
+  context.beginPath();
+  if (safeRadius <= 0) {
+    context.rect(x, y, width, height);
+    return;
+  }
+  context.moveTo(x + safeRadius, y);
+  context.lineTo(x + width - safeRadius, y);
+  context.quadraticCurveTo(x + width, y, x + width, y + safeRadius);
+  context.lineTo(x + width, y + height - safeRadius);
+  context.quadraticCurveTo(
+    x + width,
+    y + height,
+    x + width - safeRadius,
+    y + height
+  );
+  context.lineTo(x + safeRadius, y + height);
+  context.quadraticCurveTo(x, y + height, x, y + height - safeRadius);
+  context.lineTo(x, y + safeRadius);
+  context.quadraticCurveTo(x, y, x + safeRadius, y);
+  context.closePath();
+}
+function wrapLine(context, line, maxWidth) {
+  if (maxWidth <= 0 || context.measureText(line).width <= maxWidth) {
+    return [line];
+  }
+  const lines = [];
+  let current = "";
+  for (const word of line.split(" ")) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (context.measureText(candidate).width <= maxWidth) {
+      current = candidate;
+      continue;
+    }
+    if (current) {
+      lines.push(current);
+    }
+    if (context.measureText(word).width <= maxWidth) {
+      current = word;
+      continue;
+    }
+    let chunk = "";
+    for (const character of word) {
+      const nextChunk = chunk + character;
+      if (context.measureText(nextChunk).width <= maxWidth || chunk === "") {
+        chunk = nextChunk;
+      } else {
+        lines.push(chunk);
+        chunk = character;
+      }
+    }
+    current = chunk;
+  }
+  if (current) {
+    lines.push(current);
+  }
+  return lines.length > 0 ? lines : [""];
+}
+function wrapText(context, text, maxWidth, nowrap) {
+  const paragraphs = text.split("\n");
+  if (nowrap) {
+    return paragraphs;
+  }
+  return paragraphs.flatMap((paragraph) => wrapLine(context, paragraph, maxWidth));
+}
+function drawTextHotspot(context, canvasWidth, canvasHeight, text, style) {
+  const shortSide = Math.min(canvasWidth, canvasHeight);
+  const padding = clamp01(style.padding, 0.08) * shortSide;
+  const fontSize = Math.max(1, clamp01(style.fontSize, 0.18) * canvasHeight);
+  const lineHeight = resolvePositive(style.lineHeight, 1.25) * fontSize;
+  const align = style.align ?? "center";
+  const verticalAlign = style.verticalAlign ?? "middle";
+  const fontFamily = style.fontFamily?.trim() || DEFAULT_FONT_FAMILY;
+  const fontWeight = style.fontWeight ?? 600;
+  const fontStyle = style.fontStyle ?? "normal";
+  const contentWidth = Math.max(1, canvasWidth - padding * 2);
+  const contentHeight = Math.max(1, canvasHeight - padding * 2);
+  context.clearRect(0, 0, canvasWidth, canvasHeight);
+  const background = style.background ?? DEFAULT_BACKGROUND;
+  if (background !== "") {
+    roundedRectanglePath2(
+      context,
+      0,
+      0,
+      canvasWidth,
+      canvasHeight,
+      resolveCornerRadius2(style.borderRadius) * shortSide
+    );
+    context.save();
+    context.globalAlpha = clamp01(style.backgroundOpacity, 0.72);
+    context.fillStyle = background;
+    context.fill();
+    context.restore();
+  }
+  context.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+  context.textAlign = align;
+  context.textBaseline = "top";
+  const lines = wrapText(
+    context,
+    text,
+    contentWidth,
+    (style.whiteSpace ?? "normal") === "nowrap"
+  );
+  const maxLines = Math.max(1, Math.floor(contentHeight / lineHeight));
+  const visibleLines = lines.slice(0, maxLines);
+  const blockHeight = visibleLines.length * lineHeight;
+  let startY = padding;
+  if (verticalAlign === "middle") {
+    startY = padding + Math.max(0, (contentHeight - blockHeight) / 2);
+  } else if (verticalAlign === "bottom") {
+    startY = padding + Math.max(0, contentHeight - blockHeight);
+  }
+  const startX = align === "left" ? padding : align === "right" ? canvasWidth - padding : canvasWidth / 2;
+  const color = style.color?.trim() || DEFAULT_COLOR;
+  const strokeWidth = Number.isFinite(style.strokeWidth) ? Math.max(style.strokeWidth, 0) : 0;
+  context.save();
+  context.beginPath();
+  context.rect(padding, padding, contentWidth, contentHeight);
+  context.clip();
+  visibleLines.forEach((line, index) => {
+    const y = startY + index * lineHeight;
+    if (style.stroke && strokeWidth > 0) {
+      context.lineWidth = strokeWidth;
+      context.strokeStyle = style.stroke;
+      context.lineJoin = "round";
+      context.miterLimit = 2;
+      context.strokeText(line, startX, y);
+    }
+    context.fillStyle = color;
+    context.fillText(line, startX, y);
+  });
+  context.restore();
+}
+function createTextTexture(text, width, height, style) {
+  const { canvasWidth, canvasHeight } = textureSize(width, height);
+  const canvas = document.createElement("canvas");
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Canvas 2D is unavailable for this text hotspot.");
+  }
+  drawTextHotspot(context, canvasWidth, canvasHeight, text, style);
+  const texture = new CanvasTexture2(canvas);
+  texture.colorSpace = SRGBColorSpace8;
+  texture.wrapS = ClampToEdgeWrapping7;
+  texture.wrapT = ClampToEdgeWrapping7;
+  texture.magFilter = LinearFilter9;
+  texture.minFilter = LinearMipmapLinearFilter6;
+  texture.generateMipmaps = true;
+  texture.needsUpdate = true;
+  return texture;
+}
+function useTextTexture(text, width, height, style, onLoad, onError) {
+  const [texture, setTexture] = useState13(null);
+  const onLoadRef = useRef21(onLoad);
+  const onErrorRef = useRef21(onError);
+  onLoadRef.current = onLoad;
+  onErrorRef.current = onError;
+  useEffect24(() => {
+    let nextTexture = null;
+    try {
+      nextTexture = createTextTexture(text, width, height, style);
+      setTexture(nextTexture);
+      onLoadRef.current?.(nextTexture);
+    } catch (error) {
+      setTexture(null);
+      onErrorRef.current?.(error);
+    }
+    return () => {
+      nextTexture?.dispose();
+    };
+  }, [
+    height,
+    style.align,
+    style.background,
+    style.backgroundOpacity,
+    style.borderRadius,
+    style.color,
+    style.fontFamily,
+    style.fontSize,
+    style.fontStyle,
+    style.fontWeight,
+    style.lineHeight,
+    style.padding,
+    style.stroke,
+    style.strokeWidth,
+    style.verticalAlign,
+    style.whiteSpace,
+    text,
+    width
+  ]);
+  return texture;
+}
+function TextHotspot({
+  text,
+  width = 16,
+  height = 6,
+  opacity,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  fontStyle,
+  color,
+  background,
+  backgroundOpacity,
+  padding,
+  align,
+  verticalAlign,
+  lineHeight,
+  whiteSpace,
+  borderRadius,
+  stroke,
+  strokeWidth,
+  onLoad,
+  onError,
+  ...anchorProps
+}) {
+  const style = {
+    align,
+    background,
+    backgroundOpacity,
+    borderRadius,
+    color,
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontWeight,
+    lineHeight,
+    padding,
+    stroke,
+    strokeWidth,
+    verticalAlign,
+    whiteSpace
+  };
+  const texture = useTextTexture(text, width, height, style, onLoad, onError);
+  return /* @__PURE__ */ jsx20(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx20(HotspotPlane, { map: texture, opacity }) });
+}
+
+// src/hotspot/iframe-hotspot.tsx
+import { Html as Html2 } from "@react-three/drei";
+import { DoubleSide as DoubleSide4 } from "three";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var IFRAME_LONG_SIDE = 800;
+var CSS3D_DISTANCE_FACTOR = 400;
+var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
+function clampOpacity2(opacity) {
+  if (!Number.isFinite(opacity)) {
+    return 1;
+  }
+  return Math.max(0, Math.min(opacity, 1));
+}
+function resolvePositive2(value, fallback) {
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function iframeCssSize(width, height) {
+  const safeWidth = resolvePositive2(width, 1);
+  const safeHeight = resolvePositive2(height, 1);
+  if (safeWidth >= safeHeight) {
+    return {
+      cssWidth: IFRAME_LONG_SIDE,
+      cssHeight: Math.max(
+        1,
+        Math.round(IFRAME_LONG_SIDE * (safeHeight / safeWidth))
+      )
+    };
+  }
+  return {
+    cssWidth: Math.max(
+      1,
+      Math.round(IFRAME_LONG_SIDE * (safeWidth / safeHeight))
+    ),
+    cssHeight: IFRAME_LONG_SIDE
+  };
+}
+function IframeHotspot({
+  src,
+  title,
+  sandbox = DEFAULT_SANDBOX,
+  allow,
+  referrerPolicy = "strict-origin-when-cross-origin",
+  loading,
+  pointerPolicy = "hotspot",
+  background,
+  opacity,
+  width = 18,
+  height = 12,
+  onLoad,
+  onError,
+  ...anchorProps
+}) {
+  const { cssWidth, cssHeight } = iframeCssSize(width, height);
+  const iframeTitle = title ?? anchorProps.ariaLabel;
+  return /* @__PURE__ */ jsxs11(HotspotAnchor, { ...anchorProps, height, width, children: [
+    /* @__PURE__ */ jsxs11("mesh", { children: [
+      /* @__PURE__ */ jsx21("planeGeometry", { args: [1, 1] }),
+      /* @__PURE__ */ jsx21(
+        "meshBasicMaterial",
+        {
+          depthWrite: false,
+          opacity: 0,
+          side: DoubleSide4,
+          toneMapped: false,
+          transparent: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx21(
+      Html2,
       {
-        map: activeTexture,
-        opacity: activeTexture ? clampOpacity4(opacity) : 0,
-        side: DoubleSide6,
-        toneMapped: false,
-        transparent: true
+        distanceFactor: CSS3D_DISTANCE_FACTOR,
+        pointerEvents: pointerPolicy === "content" ? "auto" : "none",
+        scale: [1 / cssWidth, 1 / cssHeight, 1],
+        style: {
+          background: background ?? "transparent",
+          height: cssHeight,
+          opacity: clampOpacity2(opacity),
+          overflow: "hidden",
+          width: cssWidth
+        },
+        transform: true,
+        zIndexRange: [10, 0],
+        children: /* @__PURE__ */ jsx21(
+          "iframe",
+          {
+            allow,
+            loading,
+            onError: (event) => onError?.(event.nativeEvent),
+            onLoad,
+            referrerPolicy,
+            sandbox,
+            src,
+            style: {
+              border: 0,
+              display: "block",
+              height: "100%",
+              width: "100%"
+            },
+            title: iframeTitle
+          }
+        )
       }
     )
-  ] }) });
+  ] });
 }
 export {
   AutoRotate,
+  DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
+  DEFAULT_PANO_CURSORS,
   GraphicHotspot,
+  IframeHotspot,
   ImageHotspot,
   KeyboardControls,
   MAX_HOTSPOT_PITCH,
@@ -5836,12 +6805,13 @@ export {
   MouseControls,
   PanoContextMenu,
   PanoEvents,
-  PanoView,
-  PanoramaScenes,
+  PanoViewer,
   PolygonHotspot,
   PolylineHotspot,
+  Scenes,
   SequenceHotspot,
   Sphere,
+  TextHotspot,
   Tile,
   TouchControls,
   VideoHotspot,