@ericchen1990/pano-view 0.2.0 → 1.0.0

package/dist/index.cjs

@@ -22,7 +22,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AutoRotate: () => AutoRotate,
+  DEFAULT_HOTSPOT_TOOLTIP_OFFSET: () => DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
+  DEFAULT_PANO_CURSORS: () => DEFAULT_PANO_CURSORS,
   GraphicHotspot: () => GraphicHotspot,
+  IframeHotspot: () => IframeHotspot,
   ImageHotspot: () => ImageHotspot,
   KeyboardControls: () => KeyboardControls,
   MAX_HOTSPOT_PITCH: () => MAX_HOTSPOT_PITCH,
@@ -30,12 +33,13 @@ __export(index_exports, {
   MouseControls: () => MouseControls,
   PanoContextMenu: () => PanoContextMenu,
   PanoEvents: () => PanoEvents,
-  PanoView: () => PanoView,
-  PanoramaScenes: () => PanoramaScenes,
+  PanoViewer: () => PanoViewer,
   PolygonHotspot: () => PolygonHotspot,
   PolylineHotspot: () => PolylineHotspot,
+  Scenes: () => Scenes,
   SequenceHotspot: () => SequenceHotspot,
   Sphere: () => Sphere,
+  TextHotspot: () => TextHotspot,
   Tile: () => Tile,
   TouchControls: () => TouchControls,
   VideoHotspot: () => VideoHotspot,
@@ -56,9 +60,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/pano-view.tsx
-var import_fiber8 = require("@react-three/fiber");
-var import_react11 = require("react");
+// src/pano-viewer.tsx
+var import_fiber9 = require("@react-three/fiber");
+var import_react13 = require("react");
 
 // src/auto-rotate.tsx
 var import_fiber2 = require("@react-three/fiber");
@@ -446,7 +450,7 @@ function AutoRotate({
   const rotatingRef = (0, import_react3.useRef)(false);
   const yawAccumulatedRef = (0, import_react3.useRef)(0);
   if (!controlsRef) {
-    throw new Error("<AutoRotate> must be rendered inside <PanoView>.");
+    throw new Error("<AutoRotate> must be rendered inside <PanoViewer>.");
   }
   (0, import_react3.useEffect)(() => {
     elapsedRef.current = 0;
@@ -502,10 +506,46 @@ function AutoRotate({
   return null;
 }
 
-// src/hotspot/accessibility.tsx
+// src/control-claims.ts
 var import_react4 = require("react");
+var ControlClaimsContext = (0, import_react4.createContext)(null);
+var DefaultControlChannelContext = (0, import_react4.createContext)(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 = (0, import_react4.useContext)(ControlClaimsContext);
+  const isDefault = (0, import_react4.useContext)(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
+var import_react5 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var HotspotAccessibilityContext = (0, import_react4.createContext)(null);
+var HotspotAccessibilityContext = (0, import_react5.createContext)(null);
 var VISUALLY_HIDDEN_STYLE = {
   border: 0,
   clip: "rect(0 0 0 0)",
@@ -531,12 +571,12 @@ function useHotspotAccessibility({
   ariaLabel,
   onActivate
 }) {
-  const registry = (0, import_react4.useContext)(HotspotAccessibilityContext);
-  const [focused, setFocused] = (0, import_react4.useState)(false);
-  const activateRef = (0, import_react4.useRef)(onActivate);
+  const registry = (0, import_react5.useContext)(HotspotAccessibilityContext);
+  const [focused, setFocused] = (0, import_react5.useState)(false);
+  const activateRef = (0, import_react5.useRef)(onActivate);
   const enabled = Boolean(onActivate);
   activateRef.current = onActivate;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!enabled) {
       setFocused(false);
       return;
@@ -558,8 +598,8 @@ function useHotspotAccessibility({
   return focused;
 }
 function useHotspotAccessibilityLayer() {
-  const [entries, setEntries] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
-  const register = (0, import_react4.useCallback)(
+  const [entries, setEntries] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
+  const register = (0, import_react5.useCallback)(
     (entry) => {
       const token = Symbol(entry.id);
       const nextEntry = { ...entry, token };
@@ -581,11 +621,11 @@ function useHotspotAccessibilityLayer() {
     },
     []
   );
-  const registry = (0, import_react4.useMemo)(
+  const registry = (0, import_react5.useMemo)(
     () => ({ register }),
     [register]
   );
-  const controls = (0, import_react4.useMemo)(
+  const controls = (0, import_react5.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-label": "Panorama hotspots", style: { pointerEvents: "none" }, children: Array.from(entries.values()).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
@@ -612,7 +652,7 @@ function useHotspotAccessibilityLayer() {
 
 // src/keyboard-controls.tsx
 var import_fiber3 = require("@react-three/fiber");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var DEFAULT_ROTATE_SPEED = 60;
 var DEFAULT_ZOOM_SPEED = 30;
 var DEFAULT_SHIFT_MULTIPLIER = 3;
@@ -681,23 +721,24 @@ function KeyboardControls({
   onPreviousScene,
   onNextScene
 }) {
-  const controlsRef = (0, import_react5.useContext)(PanoramaViewContext);
+  useClaimControlChannel("keyboard");
+  const controlsRef = (0, import_react6.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber3.useThree)();
-  const pressedRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
-  const shiftHeldRef = (0, import_react5.useRef)(false);
-  const invertRef = (0, import_react5.useRef)(invert);
-  const fovSpeedRef = (0, import_react5.useRef)(fovSpeed);
-  const onPreviousSceneRef = (0, import_react5.useRef)(onPreviousScene);
-  const onNextSceneRef = (0, import_react5.useRef)(onNextScene);
-  const keyMap = (0, import_react5.useMemo)(() => resolveKeyMap(keys), [keys]);
+  const pressedRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
+  const shiftHeldRef = (0, import_react6.useRef)(false);
+  const invertRef = (0, import_react6.useRef)(invert);
+  const fovSpeedRef = (0, import_react6.useRef)(fovSpeed);
+  const onPreviousSceneRef = (0, import_react6.useRef)(onPreviousScene);
+  const onNextSceneRef = (0, import_react6.useRef)(onNextScene);
+  const keyMap = (0, import_react6.useMemo)(() => 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;
   onPreviousSceneRef.current = onPreviousScene;
   onNextSceneRef.current = onNextScene;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const element = gl.domElement;
     if (!enabled) {
       pressedRef.current.clear();
@@ -838,7 +879,7 @@ function KeyboardControls({
 
 // src/mouse-controls.tsx
 var import_fiber4 = require("@react-three/fiber");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var DEFAULT_ROTATE_SPEED2 = 0.35;
 var DEFAULT_ZOOM_SPEED2 = 0.08;
 var BUTTON_FLAG = {
@@ -862,12 +903,13 @@ function MouseControls({
   buttons,
   fovSpeed
 }) {
-  const controlsRef = (0, import_react6.useContext)(PanoramaViewContext);
+  useClaimControlChannel("mouse");
+  const controlsRef = (0, import_react7.useContext)(PanoramaViewContext);
   const { gl } = (0, import_fiber4.useThree)();
-  const pointersRef = (0, import_react6.useRef)(
+  const pointersRef = (0, import_react7.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const optionsRef = (0, import_react6.useRef)({
+  const optionsRef = (0, import_react7.useRef)({
     rotateSpeed,
     zoomSpeed,
     wheel,
@@ -875,7 +917,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,
@@ -884,7 +926,7 @@ function MouseControls({
     invert,
     fovSpeed
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const element = gl.domElement;
     const allowedButtons = resolveButtons(buttons);
     const clearPointers = () => {
@@ -1008,12 +1050,12 @@ function MouseControls({
 }
 
 // src/pano-context-menu.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
-var PanoContextMenuOverlayContext = (0, import_react7.createContext)(null);
+var PanoContextMenuOverlayContext = (0, import_react8.createContext)(null);
 var DEFAULT_APPEARANCE = {
   background: "#161616",
   color: "#f4f4f4",
@@ -1053,11 +1095,11 @@ function DefaultContextMenuPanel({
   selectContext,
   onRequestClose
 }) {
-  const menuRef = (0, import_react7.useRef)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react7.useState)(0);
+  const menuRef = (0, import_react8.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react8.useState)(0);
   const resolved = { ...DEFAULT_APPEARANCE, ...appearance };
   const iconSize = Number.isFinite(resolved.iconSize) ? Math.max(0, resolved.iconSize) : DEFAULT_ICON_SIZE;
-  const visibleItems = (0, import_react7.useMemo)(
+  const visibleItems = (0, import_react8.useMemo)(
     () => items.filter((item) => {
       if (!isActionItem(item)) {
         return true;
@@ -1066,7 +1108,7 @@ function DefaultContextMenuPanel({
     }),
     [items]
   );
-  const focusableIndices = (0, import_react7.useMemo)(() => {
+  const focusableIndices = (0, import_react8.useMemo)(() => {
     const indices = [];
     visibleItems.forEach((item, index) => {
       if (isActionItem(item) && !item.disabled) {
@@ -1075,7 +1117,7 @@ function DefaultContextMenuPanel({
     });
     return indices;
   }, [visibleItems]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const first = focusableIndices[0];
     setActiveIndex(first ?? 0);
     const frame = requestAnimationFrame(() => {
@@ -1086,7 +1128,7 @@ function DefaultContextMenuPanel({
     });
     return () => cancelAnimationFrame(frame);
   }, [focusableIndices]);
-  const activateItem = (0, import_react7.useCallback)(
+  const activateItem = (0, import_react8.useCallback)(
     (item) => {
       if (item.disabled) {
         return;
@@ -1301,9 +1343,9 @@ function PositionedMenuShell({
   overlayElement,
   children
 }) {
-  const shellRef = (0, import_react7.useRef)(null);
-  const [offset, setOffset] = (0, import_react7.useState)({ left: 0, top: 0 });
-  (0, import_react7.useLayoutEffect)(() => {
+  const shellRef = (0, import_react8.useRef)(null);
+  const [offset, setOffset] = (0, import_react8.useState)({ left: 0, top: 0 });
+  (0, import_react8.useLayoutEffect)(() => {
     const shell = shellRef.current;
     if (!overlayElement || !shell) {
       return;
@@ -1340,20 +1382,20 @@ function PositionedMenuShell({
   );
 }
 function usePanoContextMenuOverlay() {
-  const [session, setSession] = (0, import_react7.useState)(null);
-  const overlayRef = (0, import_react7.useRef)(null);
-  const [overlayElement, setOverlayElement] = (0, import_react7.useState)(
+  const [session, setSession] = (0, import_react8.useState)(null);
+  const overlayRef = (0, import_react8.useRef)(null);
+  const [overlayElement, setOverlayElement] = (0, import_react8.useState)(
     null
   );
-  const api = (0, import_react7.useMemo)(
+  const api = (0, import_react8.useMemo)(
     () => ({ setSession, overlayRef }),
     []
   );
-  const setOverlayNode = (0, import_react7.useCallback)((node) => {
+  const setOverlayNode = (0, import_react8.useCallback)((node) => {
     overlayRef.current = node;
     setOverlayElement(node);
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!session) {
       return;
     }
@@ -1421,13 +1463,13 @@ function PanoContextMenu({
   separatorClassName,
   children
 }) {
-  const eventBus = (0, import_react7.useContext)(PanoEventBusContext);
-  const controlsRef = (0, import_react7.useContext)(PanoramaViewContext);
-  const overlayApi = (0, import_react7.useContext)(PanoContextMenuOverlayContext);
-  const actions = (0, import_react7.useContext)(PanoContextMenuActionsContext);
-  const instanceId = (0, import_react7.useId)();
-  const sessionKeyRef = (0, import_react7.useRef)(0);
-  const propsRef = (0, import_react7.useRef)({
+  const eventBus = (0, import_react8.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react8.useContext)(PanoramaViewContext);
+  const overlayApi = (0, import_react8.useContext)(PanoContextMenuOverlayContext);
+  const actions = (0, import_react8.useContext)(PanoContextMenuActionsContext);
+  const instanceId = (0, import_react8.useId)();
+  const sessionKeyRef = (0, import_react8.useRef)(0);
+  const propsRef = (0, import_react8.useRef)({
     items,
     prepend,
     append,
@@ -1450,17 +1492,17 @@ 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 = (0, import_react7.useCallback)(() => {
+  const close = (0, import_react8.useCallback)(() => {
     overlayApi.setSession(null);
   }, [overlayApi]);
-  const openMenu = (0, import_react7.useCallback)(
+  const openMenu = (0, import_react8.useCallback)(
     (event) => {
       event.nativeEvent.preventDefault();
       const view = controlsRef.current?.getView() ?? {
@@ -1509,7 +1551,7 @@ function PanoContextMenu({
     },
     [actions, close, controlsRef, instanceId, overlayApi]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const unsubscribeContextMenu = eventBus.subscribe(
       "contextmenu",
       openMenu
@@ -1688,11 +1730,156 @@ function composePanoContextMenuItems(props, presets) {
     ...resolvePanoContextMenuEntries(props.append ?? [], presets)
   ];
 }
-var PanoContextMenuActionsContext = (0, import_react7.createContext)(null);
+var PanoContextMenuActionsContext = (0, import_react8.createContext)(null);
 
-// src/pano-events.tsx
+// src/pano-cursor.tsx
 var import_fiber5 = require("@react-three/fiber");
-var import_react8 = require("react");
+var import_react9 = require("react");
+var import_jsx_runtime3 = require("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 = (0, import_react9.createContext)(null);
+function usePanoCursor() {
+  return (0, import_react9.useContext)(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 } = (0, import_fiber5.useThree)();
+  const eventBus = (0, import_react9.useContext)(PanoEventBusContext);
+  const claimsRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  const cursorsRef = (0, import_react9.useRef)(cursors);
+  const appliedCursorRef = (0, import_react9.useRef)(null);
+  cursorsRef.current = cursors;
+  const applyCursor = (0, import_react9.useCallback)(() => {
+    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 = (0, import_react9.useCallback)(
+    (id, layer, cursor) => {
+      claimsRef.current.set(id, { layer, cursor });
+      applyCursor();
+    },
+    [applyCursor]
+  );
+  const release = (0, import_react9.useCallback)(
+    (id) => {
+      if (claimsRef.current.delete(id)) {
+        applyCursor();
+      }
+    },
+    [applyCursor]
+  );
+  const api = (0, import_react9.useMemo)(
+    () => ({
+      cursors,
+      claim,
+      release
+    }),
+    [claim, cursors, release]
+  );
+  (0, import_react9.useEffect)(() => {
+    const element = gl.domElement;
+    const previous = element.style.cursor;
+    return () => {
+      claimsRef.current.clear();
+      appliedCursorRef.current = null;
+      element.style.cursor = previous;
+    };
+  }, [gl]);
+  (0, import_react9.useEffect)(() => {
+    applyCursor();
+  }, [applyCursor, cursors]);
+  (0, import_react9.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime3.jsx)(PanoCursorContext.Provider, { value: api, children });
+}
+
+// src/pano-events.tsx
+var import_fiber6 = require("@react-three/fiber");
+var import_react10 = require("react");
 var DEFAULT_IDLE_TIME_MS = 2e3;
 function resolveIdleTime(value) {
   return Number.isFinite(value) && value >= 0 ? value : DEFAULT_IDLE_TIME_MS;
@@ -1719,13 +1906,13 @@ function usePanoEvents({
   onAutoRotateStop,
   onAutoRotateOneRound
 }) {
-  const eventBus = (0, import_react8.useContext)(PanoEventBusContext);
-  const controlsRef = (0, import_react8.useContext)(PanoramaViewContext);
-  const { gl } = (0, import_fiber5.useThree)();
+  const eventBus = (0, import_react10.useContext)(PanoEventBusContext);
+  const controlsRef = (0, import_react10.useContext)(PanoramaViewContext);
+  const { gl } = (0, import_fiber6.useThree)();
   if (!eventBus || !controlsRef) {
-    throw new Error("usePanoEvents must be used inside <PanoView>.");
+    throw new Error("usePanoEvents must be used inside <PanoViewer>.");
   }
-  const callbacksRef = (0, import_react8.useRef)({
+  const callbacksRef = (0, import_react10.useRef)({
     onViewChange,
     onViewSettled,
     onViewInteractionStart,
@@ -1767,15 +1954,15 @@ function usePanoEvents({
     onAutoRotateStop,
     onAutoRotateOneRound
   };
-  const idleElapsedRef = (0, import_react8.useRef)(0);
-  const isIdleRef = (0, import_react8.useRef)(false);
-  const idleTimeRef = (0, import_react8.useRef)(resolveIdleTime(idleTime));
+  const idleElapsedRef = (0, import_react10.useRef)(0);
+  const isIdleRef = (0, import_react10.useRef)(false);
+  const idleTimeRef = (0, import_react10.useRef)(resolveIdleTime(idleTime));
   idleTimeRef.current = resolveIdleTime(idleTime);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     idleElapsedRef.current = 0;
     isIdleRef.current = false;
   }, [idleTime]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const unsubscribers = [
       eventBus.subscribe("viewchange", (view) => {
         callbacksRef.current.onViewChange?.(view);
@@ -1823,7 +2010,7 @@ function usePanoEvents({
       }
     };
   }, [eventBus]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const element = gl.domElement;
     const handleWheel = (nativeEvent) => {
       callbacksRef.current.onWheel?.({
@@ -1836,7 +2023,7 @@ function usePanoEvents({
       element.removeEventListener("wheel", handleWheel);
     };
   }, [gl]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -1865,7 +2052,7 @@ function usePanoEvents({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [gl]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const element = gl.domElement;
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -1883,7 +2070,7 @@ function usePanoEvents({
       observer.disconnect();
     };
   }, [gl]);
-  (0, import_fiber5.useFrame)((_, deltaSeconds) => {
+  (0, import_fiber6.useFrame)((_, deltaSeconds) => {
     const interacting = controlsRef.current?.isUserInteracting() ?? false;
     if (interacting) {
       idleElapsedRef.current = 0;
@@ -1906,8 +2093,8 @@ function PanoEvents(props) {
 }
 
 // src/panorama-event-surface.tsx
-var import_fiber6 = require("@react-three/fiber");
-var import_react9 = require("react");
+var import_fiber7 = require("@react-three/fiber");
+var import_react11 = require("react");
 var import_three3 = require("three");
 
 // src/hotspot/coordinates.ts
@@ -1973,7 +2160,7 @@ var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
 var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
 
 // src/panorama-event-surface.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -1988,9 +2175,9 @@ function makePanoramaPointerEvent(event) {
   };
 }
 function PanoramaEventSurface() {
-  const eventBus = (0, import_react9.useContext)(PanoEventBusContext);
-  const { camera, gl } = (0, import_fiber6.useThree)();
-  (0, import_react9.useEffect)(() => {
+  const eventBus = (0, import_react11.useContext)(PanoEventBusContext);
+  const { camera, gl } = (0, import_fiber7.useThree)();
+  (0, import_react11.useEffect)(() => {
     if (!eventBus) {
       return;
     }
@@ -2031,7 +2218,7 @@ function PanoramaEventSurface() {
     event.stopPropagation();
     eventBus.emit(type, makePanoramaPointerEvent(event));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "mesh",
     {
       renderOrder: -200,
@@ -2041,8 +2228,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -2059,8 +2246,8 @@ function PanoramaEventSurface() {
 }
 
 // src/touch-controls.tsx
-var import_fiber7 = require("@react-three/fiber");
-var import_react10 = require("react");
+var import_fiber8 = require("@react-three/fiber");
+var import_react12 = require("react");
 var DEFAULT_ROTATE_SPEED3 = 0.35;
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
@@ -2074,16 +2261,17 @@ function TouchControls({
   invert = false,
   pinchZoom = true
 }) {
-  const controlsRef = (0, import_react10.useContext)(PanoramaViewContext);
-  const { gl } = (0, import_fiber7.useThree)();
-  const pointersRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
-  const pinchDistanceRef = (0, import_react10.useRef)(null);
-  const optionsRef = (0, import_react10.useRef)({ rotateSpeed, invert, pinchZoom });
+  useClaimControlChannel("touch");
+  const controlsRef = (0, import_react12.useContext)(PanoramaViewContext);
+  const { gl } = (0, import_fiber8.useThree)();
+  const pointersRef = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = (0, import_react12.useRef)(null);
+  const optionsRef = (0, import_react12.useRef)({ 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 };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const element = gl.domElement;
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
@@ -2204,8 +2392,8 @@ function TouchControls({
   return null;
 }
 
-// src/pano-view.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+// src/pano-viewer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -2243,13 +2431,46 @@ function resolveContextMenuChannel(value) {
   }
   return { mount: true, props: { ...value } };
 }
-var PanoView = (0, import_react11.forwardRef)(
-  function PanoView2({
+function PanoCursorTree({
+  cursors,
+  children
+}) {
+  if (!cursors) {
+    return children;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoCursorController, { cursors, children });
+}
+function DefaultControlChannels({
+  userControlsEnabled,
+  mouseChannel,
+  touchChannel,
+  keyboardChannel,
+  fovSpeed
+}) {
+  const claims = (0, import_react13.useContext)(ControlClaimsContext);
+  if (!claims) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DefaultControlChannelContext.Provider, { value: true, children: [
+    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
+    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TouchControls, { ...touchChannel.props }) : null,
+    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      KeyboardControls,
+      {
+        ...keyboardChannel.props,
+        fovSpeed: keyboardChannel.props.fovSpeed ?? fovSpeed
+      }
+    ) : null
+  ] });
+}
+var PanoViewer = (0, import_react13.forwardRef)(
+  function PanoViewer2({
     children,
     initialView,
     minFov = 30,
     maxFov = 100,
     controls = true,
+    cursors,
     contextMenu = true,
     onViewChange,
     onPanoramaClick,
@@ -2260,18 +2481,18 @@ var PanoView = (0, import_react11.forwardRef)(
     "aria-label": ariaLabel = "Panorama viewer",
     ...divProps
   }, ref) {
-    const rootRef = (0, import_react11.useRef)(null);
-    const controlsRef = (0, import_react11.useRef)(null);
-    const eventBus = (0, import_react11.useMemo)(() => createPanoEventBus(), []);
+    const rootRef = (0, import_react13.useRef)(null);
+    const controlsRef = (0, import_react13.useRef)(null);
+    const eventBus = (0, import_react13.useMemo)(() => createPanoEventBus(), []);
     const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
     const { api: contextMenuOverlayApi, overlay: contextMenuOverlay } = usePanoContextMenuOverlay();
-    const fallbackViewRef = (0, import_react11.useRef)(DEFAULT_VIEW);
+    const fallbackViewRef = (0, import_react13.useRef)(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
       179,
       Math.max(maxFov, normalizedMinFov + 1)
     );
-    const normalizedInitialView = (0, import_react11.useMemo)(
+    const normalizedInitialView = (0, import_react13.useMemo)(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
         pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
@@ -2289,8 +2510,10 @@ var PanoView = (0, import_react11.forwardRef)(
       ]
     );
     fallbackViewRef.current = normalizedInitialView;
+    const controlClaims = (0, import_react13.useMemo)(() => createControlClaims(), []);
+    resetControlClaims(controlClaims);
     const controlsEnabled = controls !== false;
-    const controlOptions = (0, import_react11.useMemo)(
+    const controlOptions = (0, import_react13.useMemo)(
       () => typeof controls === "object" ? controls : {},
       [controls]
     );
@@ -2298,7 +2521,7 @@ var PanoView = (0, import_react11.forwardRef)(
     const allModeInvert = controlOptions.invert === true;
     const topRotateSpeed = controlOptions.rotateSpeed ?? DEFAULT_POINTER_ROTATE_SPEED;
     const topZoomSpeed = controlOptions.zoomSpeed ?? DEFAULT_MOUSE_ZOOM_SPEED;
-    const mouseChannel = (0, import_react11.useMemo)(
+    const mouseChannel = (0, import_react13.useMemo)(
       () => resolveChannel(controlOptions.mouse, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -2314,7 +2537,7 @@ var PanoView = (0, import_react11.forwardRef)(
         topZoomSpeed
       ]
     );
-    const touchChannel = (0, import_react11.useMemo)(
+    const touchChannel = (0, import_react13.useMemo)(
       () => resolveChannel(controlOptions.touch, {
         enabled: true,
         rotateSpeed: topRotateSpeed,
@@ -2323,13 +2546,13 @@ var PanoView = (0, import_react11.forwardRef)(
       }),
       [allModeInvert, controlOptions.touch, topRotateSpeed]
     );
-    const keyboardChannel = (0, import_react11.useMemo)(
+    const keyboardChannel = (0, import_react13.useMemo)(
       () => resolveChannel(controlOptions.keyboard, {
         enabled: true
       }),
       [controlOptions.keyboard]
     );
-    const toggleFullscreen = (0, import_react11.useCallback)(async () => {
+    const toggleFullscreen = (0, import_react13.useCallback)(async () => {
       if (typeof document === "undefined") {
         return;
       }
@@ -2339,8 +2562,8 @@ var PanoView = (0, import_react11.forwardRef)(
       }
       await rootRef.current?.requestFullscreen?.();
     }, []);
-    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react11.useState)(false);
-    (0, import_react11.useEffect)(() => {
+    const [isViewerFullscreen, setIsViewerFullscreen] = (0, import_react13.useState)(false);
+    (0, import_react13.useEffect)(() => {
       if (typeof document === "undefined") {
         return;
       }
@@ -2361,7 +2584,7 @@ var PanoView = (0, import_react11.forwardRef)(
         document.removeEventListener("fullscreenchange", syncFullscreen);
       };
     }, []);
-    const contextMenuActions = (0, import_react11.useMemo)(
+    const contextMenuActions = (0, import_react13.useMemo)(
       () => ({
         reset: () => {
           controlsRef.current?.reset();
@@ -2373,18 +2596,22 @@ var PanoView = (0, import_react11.forwardRef)(
       }),
       [isViewerFullscreen, toggleFullscreen]
     );
-    const contextMenuChannel = (0, import_react11.useMemo)(
+    const contextMenuChannel = (0, import_react13.useMemo)(
       () => resolveContextMenuChannel(contextMenu),
       [contextMenu]
     );
+    const resolvedCursors = (0, import_react13.useMemo)(
+      () => resolvePanoCursors(cursors),
+      [cursors]
+    );
     const legacyAutoRotateOptions = controlOptions;
-    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react11.useState)(
+    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react13.useState)(
       legacyAutoRotateOptions.autoRotate ?? false
     );
-    (0, import_react11.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
     }, [legacyAutoRotateOptions.autoRotate]);
-    (0, import_react11.useImperativeHandle)(
+    (0, import_react13.useImperativeHandle)(
       ref,
       () => ({
         getView: () => controlsRef.current?.getView() ?? { ...fallbackViewRef.current },
@@ -2404,7 +2631,7 @@ var PanoView = (0, import_react11.forwardRef)(
       }),
       [toggleFullscreen]
     );
-    const rootStyle = (0, import_react11.useMemo)(
+    const rootStyle = (0, import_react13.useMemo)(
       () => ({
         overflow: "hidden",
         position: "relative",
@@ -2412,7 +2639,7 @@ var PanoView = (0, import_react11.forwardRef)(
       }),
       [style]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         ...divProps,
@@ -2420,8 +2647,8 @@ var PanoView = (0, import_react11.forwardRef)(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_fiber8.Canvas,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_fiber9.Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
               camera: {
@@ -2443,16 +2670,16 @@ var PanoView = (0, import_react11.forwardRef)(
                 touchAction: userControlsEnabled ? "none" : "auto"
               },
               tabIndex: userControlsEnabled ? 0 : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 PanoContextMenuOverlayContext.Provider,
                 {
                   value: contextMenuOverlayApi,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                     PanoContextMenuActionsContext.Provider,
                     {
                       value: contextMenuActions,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           PanoramaViewRuntime,
                           {
                             ref: controlsRef,
@@ -2463,7 +2690,7 @@ var PanoView = (0, import_react11.forwardRef)(
                             options: controlOptions
                           }
                         ),
-                        (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           PanoEvents,
                           {
                             onViewChange,
@@ -2472,36 +2699,33 @@ var PanoView = (0, import_react11.forwardRef)(
                             onPointerMove: onPanoramaPointerMove
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           AutoRotate,
                           {
                             enabled: legacyAutoRotate,
                             speed: legacyAutoRotateOptions.autoRotateSpeed
                           }
                         ),
-                        userControlsEnabled && mouseChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                          MouseControls,
-                          {
-                            ...mouseChannel.props,
-                            fovSpeed: controlOptions.fovSpeed
-                          }
-                        ) : null,
-                        userControlsEnabled && touchChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TouchControls, { ...touchChannel.props }) : null,
-                        userControlsEnabled && keyboardChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                          KeyboardControls,
-                          {
-                            ...keyboardChannel.props,
-                            fovSpeed: keyboardChannel.props.fovSpeed ?? controlOptions.fovSpeed
-                          }
-                        ) : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoramaEventSurface, {}),
-                        contextMenuChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanoContextMenu, { ...contextMenuChannel.props }) : null,
-                        children
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoramaEventSurface, {}),
+                        contextMenuChannel.mount ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ControlClaimsContext.Provider, { value: controlClaims, children: [
+                          children,
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            DefaultControlChannels,
+                            {
+                              fovSpeed: controlOptions.fovSpeed,
+                              keyboardChannel,
+                              mouseChannel,
+                              touchChannel,
+                              userControlsEnabled
+                            }
+                          )
+                        ] })
                       ]
                     }
                   )
                 }
-              ) }) }) })
+              ) }) }) }) })
             }
           ),
           contextMenuOverlay,
@@ -2513,10 +2737,10 @@ var PanoView = (0, import_react11.forwardRef)(
 );
 
 // src/sphere.tsx
-var import_fiber9 = require("@react-three/fiber");
-var import_react12 = require("react");
+var import_fiber10 = require("@react-three/fiber");
+var import_react14 = require("react");
 var import_three4 = require("three");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Sphere({
   src,
   yawOffset = 0,
@@ -2524,13 +2748,13 @@ function Sphere({
   onError,
   visible = true
 }) {
-  const gl = (0, import_fiber9.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react12.useState)(null);
-  const onLoadRef = (0, import_react12.useRef)(onLoad);
-  const onErrorRef = (0, import_react12.useRef)(onError);
+  const gl = (0, import_fiber10.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react14.useState)(null);
+  const onLoadRef = (0, import_react14.useRef)(onLoad);
+  const onErrorRef = (0, import_react14.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     let active = true;
     const loader = new import_three4.TextureLoader();
     setTexture(null);
@@ -2564,7 +2788,7 @@ function Sphere({
       active = false;
     };
   }, [gl, src]);
-  (0, import_react12.useEffect)(
+  (0, import_react14.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -2573,14 +2797,14 @@ function Sphere({
   if (!texture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "mesh",
     {
       rotation: [0, import_three4.MathUtils.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "meshBasicMaterial",
           {
             map: texture,
@@ -2593,14 +2817,14 @@ function Sphere({
   );
 }
 
-// src/panorama-scenes.tsx
-var import_fiber12 = require("@react-three/fiber");
-var import_react15 = require("react");
+// src/scenes.tsx
+var import_fiber13 = require("@react-three/fiber");
+var import_react17 = require("react");
 var import_three8 = require("three");
 
 // src/tile/texture-manager-context.tsx
-var import_fiber10 = require("@react-three/fiber");
-var import_react13 = require("react");
+var import_fiber11 = require("@react-three/fiber");
+var import_react15 = require("react");
 
 // src/tile/texture-manager.ts
 var import_three5 = require("three");
@@ -2824,8 +3048,8 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var TileTextureManagerContext = (0, import_react13.createContext)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TileTextureManagerContext = (0, import_react15.createContext)(
   null
 );
 function TileTextureManagerProvider({
@@ -2833,9 +3057,9 @@ function TileTextureManagerProvider({
   maxTextureMemoryMb = 128,
   maxConcurrentLoads = 4
 }) {
-  const gl = (0, import_fiber10.useThree)((state) => state.gl);
+  const gl = (0, import_fiber11.useThree)((state) => state.gl);
   const anisotropy = gl.capabilities.getMaxAnisotropy();
-  const manager = (0, import_react13.useMemo)(
+  const manager = (0, import_react15.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -2844,19 +3068,19 @@ function TileTextureManagerProvider({
     }),
     [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
-  return (0, import_react13.useContext)(TileTextureManagerContext);
+  return (0, import_react15.useContext)(TileTextureManagerContext);
 }
 
 // src/tile/tile.tsx
-var import_fiber11 = require("@react-three/fiber");
-var import_react14 = require("react");
+var import_fiber12 = require("@react-three/fiber");
+var import_react16 = require("react");
 var import_three7 = require("three");
 
 // src/tile/face-layout.ts
@@ -3037,7 +3261,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
@@ -3046,10 +3270,10 @@ var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
 var SHARED_TILE_GEOMETRY = new import_three7.PlaneGeometry(1, 1);
 function usePreviewTexture(url, anisotropy, onError) {
-  const [texture, setTexture] = (0, import_react14.useState)(null);
-  const onErrorRef = (0, import_react14.useRef)(onError);
+  const [texture, setTexture] = (0, import_react16.useState)(null);
+  const onErrorRef = (0, import_react16.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!url) {
       setTexture(null);
       return;
@@ -3086,7 +3310,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       active = false;
     };
   }, [anisotropy, url]);
-  (0, import_react14.useEffect)(
+  (0, import_react16.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -3099,7 +3323,7 @@ function PreviewFace({
   texture,
   faceOrder
 }) {
-  const geometry = (0, import_react14.useMemo)(() => {
+  const geometry = (0, import_react16.useMemo)(() => {
     const nextGeometry = new import_three7.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
@@ -3117,21 +3341,21 @@ function PreviewFace({
     uv.needsUpdate = true;
     return nextGeometry;
   }, [face, faceOrder]);
-  (0, import_react14.useEffect)(
+  (0, import_react16.useEffect)(
     () => () => {
       geometry.dispose();
     },
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "meshBasicMaterial",
         {
           depthTest: false,
@@ -3147,7 +3371,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     PreviewFace,
     {
       face,
@@ -3158,14 +3382,14 @@ function PreviewCube({
   ));
 }
 function useManagedTexture(manager, key, url, address) {
-  const [managedState, setManagedState] = (0, import_react14.useState)(() => ({
+  const [managedState, setManagedState] = (0, import_react16.useState)(() => ({
     manager,
     key,
     url,
     snapshot: manager.getSnapshot(key)
   }));
   const snapshot = managedState.manager === manager && managedState.key === key && managedState.url === url ? managedState.snapshot : manager.getSnapshot(key);
-  (0, import_react14.useEffect)(
+  (0, import_react16.useEffect)(
     () => manager.acquire(key, url, address, (nextSnapshot) => {
       setManagedState({
         manager,
@@ -3178,7 +3402,7 @@ function useManagedTexture(manager, key, url, address) {
   );
   return snapshot;
 }
-var TileMesh = (0, import_react14.memo)(function TileMesh2({
+var TileMesh = (0, import_react16.memo)(function TileMesh2({
   address,
   manager,
   renderOrder,
@@ -3192,14 +3416,14 @@ var TileMesh = (0, import_react14.memo)(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "meshBasicMaterial",
         {
           depthTest: false,
@@ -3211,12 +3435,12 @@ var TileMesh = (0, import_react14.memo)(function TileMesh2({
     }
   ) });
 });
-var TileLayerMeshes = (0, import_react14.memo)(function TileLayerMeshes2({
+var TileLayerMeshes = (0, import_react16.memo)(function TileLayerMeshes2({
   layer,
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     TileMesh,
     {
       address,
@@ -3384,11 +3608,11 @@ function Tile({
   onTileError,
   onLevelChange
 }) {
-  const { camera, gl, size } = (0, import_fiber11.useThree)();
-  const multiresConfig = (0, import_react14.useMemo)(() => parseMultires(multires), [multires]);
+  const { camera, gl, size } = (0, import_fiber12.useThree)();
+  const multiresConfig = (0, import_react16.useMemo)(() => parseMultires(multires), [multires]);
   const { levels, tileSize } = multiresConfig;
   const multiresToken = `${tileSize}:${levels.join(",")}`;
-  const candidatesByLevel = (0, import_react14.useMemo)(
+  const candidatesByLevel = (0, import_react16.useMemo)(
     () => buildTileCandidates(levels, tileSize),
     [levels, tileSize]
   );
@@ -3400,13 +3624,13 @@ function Tile({
     onPreviewError
   );
   const sharedManager = useSharedTileTextureManager();
-  const progressRef = (0, import_react14.useRef)(onLoadProgress);
-  const errorRef = (0, import_react14.useRef)(onTileError);
-  const levelChangeRef = (0, import_react14.useRef)(onLevelChange);
+  const progressRef = (0, import_react16.useRef)(onLoadProgress);
+  const errorRef = (0, import_react16.useRef)(onTileError);
+  const levelChangeRef = (0, import_react16.useRef)(onLevelChange);
   progressRef.current = onLoadProgress;
   errorRef.current = onTileError;
   levelChangeRef.current = onLevelChange;
-  const ownedManager = (0, import_react14.useMemo)(
+  const ownedManager = (0, import_react16.useMemo)(
     () => new TileTextureManager({
       anisotropy,
       maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
@@ -3427,7 +3651,7 @@ function Tile({
     ]
   );
   const manager = sharedManager ?? ownedManager;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     manager.resume();
     return () => {
       if (manager === ownedManager) {
@@ -3437,11 +3661,11 @@ function Tile({
       queueMicrotask(() => manager.releaseUnused());
     };
   }, [manager, ownedManager]);
-  const readyRef = (0, import_react14.useRef)(false);
-  (0, import_react14.useEffect)(() => {
+  const readyRef = (0, import_react16.useRef)(false);
+  (0, import_react16.useEffect)(() => {
     readyRef.current = false;
   }, [effectivePreviewUrl]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!previewTexture || readyRef.current) {
       return;
     }
@@ -3449,31 +3673,31 @@ function Tile({
     onReady?.();
   }, [onReady, previewTexture]);
   const template = urlTemplate ?? buildDefaultTileUrlTemplate();
-  const resolveUrl = (0, import_react14.useMemo)(
+  const resolveUrl = (0, import_react16.useMemo)(
     () => (address) => {
       const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
       return resolveRelativeTileUrl(baseUrl, relativePath);
     },
     [baseUrl, resolveTileUrl, template]
   );
-  const [layers, setLayers] = (0, import_react14.useState)([]);
-  const layerTokenRef = (0, import_react14.useRef)("");
-  const currentLevelRef = (0, import_react14.useRef)(1);
-  const lastUpdateAtRef = (0, import_react14.useRef)(-Infinity);
-  const visibilityDirtyRef = (0, import_react14.useRef)(true);
-  const lastVisibilityQuaternionRef = (0, import_react14.useRef)(camera.quaternion.clone());
-  const lastVisibilityFovRef = (0, import_react14.useRef)(Number.NaN);
-  const lastViewportRef = (0, import_react14.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react14.useRef)(new import_three7.Frustum());
-  const projectionMatrixRef = (0, import_react14.useRef)(new import_three7.Matrix4());
-  const visibilityCameraRef = (0, import_react14.useRef)(new import_three7.PerspectiveCamera());
-  (0, import_react14.useEffect)(() => {
+  const [layers, setLayers] = (0, import_react16.useState)([]);
+  const layerTokenRef = (0, import_react16.useRef)("");
+  const currentLevelRef = (0, import_react16.useRef)(1);
+  const lastUpdateAtRef = (0, import_react16.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react16.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react16.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react16.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react16.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react16.useRef)(new import_three7.Frustum());
+  const projectionMatrixRef = (0, import_react16.useRef)(new import_three7.Matrix4());
+  const visibilityCameraRef = (0, import_react16.useRef)(new import_three7.PerspectiveCamera());
+  (0, import_react16.useEffect)(() => {
     currentLevelRef.current = 1;
     layerTokenRef.current = "";
     visibilityDirtyRef.current = true;
     setLayers([]);
   }, [manager, multiresToken]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (loadMode !== "preview") {
       return;
     }
@@ -3487,7 +3711,7 @@ function Tile({
       setLayers(nextLayers);
     }
   };
-  (0, import_fiber11.useFrame)(() => {
+  (0, import_fiber12.useFrame)(() => {
     if (loadMode === "preview") {
       return;
     }
@@ -3553,15 +3777,15 @@ function Tile({
     };
     commitLayers(nextLayers);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       TileLayerMeshes,
       {
         layer,
@@ -3573,8 +3797,8 @@ function Tile({
   ] });
 }
 
-// src/panorama-scenes.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+// src/scenes.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var TRANSITION_DEFAULTS = {
   none: { duration: 0, krpanoBlend: "NOBLEND" },
   crossfade: { duration: 1, krpanoBlend: "BLEND(1.0, easeInCubic)" },
@@ -3624,7 +3848,7 @@ function SceneSource({
     return null;
   }
   if (scene.type === "sphere") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Sphere,
       {
         src: scene.src,
@@ -3636,7 +3860,7 @@ function SceneSource({
     );
   }
   const { id: _id, type: _type, ...tileProps } = scene;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Tile,
     {
       ...tileProps,
@@ -3652,17 +3876,17 @@ function SnapshotCapture({
   maxPixels,
   onCaptured
 }) {
-  const { camera, gl, scene, size } = (0, import_fiber12.useThree)();
-  const capturedRequestRef = (0, import_react15.useRef)(0);
-  const renderTargetRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(
+  const { camera, gl, scene, size } = (0, import_fiber13.useThree)();
+  const capturedRequestRef = (0, import_react17.useRef)(0);
+  const renderTargetRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(
     () => () => {
       renderTargetRef.current?.dispose();
       renderTargetRef.current = null;
     },
     []
   );
-  (0, import_fiber12.useFrame)(() => {
+  (0, import_fiber13.useFrame)(() => {
     if (requestId === 0 || requestId === capturedRequestRef.current) {
       return;
     }
@@ -3708,12 +3932,12 @@ function SnapshotOverlay({
   runId,
   onFinish
 }) {
-  const { camera, size } = (0, import_fiber12.useThree)();
-  const meshRef = (0, import_react15.useRef)(null);
-  const startRef = (0, import_react15.useRef)(null);
-  const finishedRef = (0, import_react15.useRef)(false);
-  const directionRef = (0, import_react15.useRef)(new import_three8.Vector3());
-  const material = (0, import_react15.useMemo)(
+  const { camera, size } = (0, import_fiber13.useThree)();
+  const meshRef = (0, import_react17.useRef)(null);
+  const startRef = (0, import_react17.useRef)(null);
+  const finishedRef = (0, import_react17.useRef)(false);
+  const directionRef = (0, import_react17.useRef)(new import_three8.Vector3());
+  const material = (0, import_react17.useMemo)(
     () => new import_three8.ShaderMaterial({
       transparent: true,
       depthTest: false,
@@ -3792,13 +4016,13 @@ function SnapshotOverlay({
     }),
     [snapshot.texture, transition.preset]
   );
-  (0, import_react15.useEffect)(() => () => material.dispose(), [material]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react17.useEffect)(() => {
     startRef.current = null;
     finishedRef.current = false;
     material.uniforms.progress.value = 0;
   }, [material, runId]);
-  (0, import_fiber12.useFrame)((state) => {
+  (0, import_fiber13.useFrame)((state) => {
     const mesh = meshRef.current;
     if (!mesh || !camera.isPerspectiveCamera) {
       return;
@@ -3823,13 +4047,13 @@ function SnapshotOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("mesh", { ref: meshRef, renderOrder: 1e4, frustumCulled: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("primitive", { attach: "material", object: material })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("mesh", { ref: meshRef, renderOrder: 1e4, frustumCulled: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("primitive", { attach: "material", object: material })
   ] });
 }
 var FULLSCREEN_PLANE = new import_three8.PlaneGeometry(1, 1);
-function PanoramaScenesController({
+function ScenesController({
   scenes,
   activeSceneId,
   transition: transitionInput,
@@ -3838,47 +4062,47 @@ function PanoramaScenesController({
   onTransitionError,
   snapshotMaxPixels = 3686400
 }) {
-  const controlsRef = (0, import_react15.useContext)(PanoramaViewContext);
+  const controlsRef = (0, import_react17.useContext)(PanoramaViewContext);
   const manager = useSharedTileTextureManager();
-  const transition = (0, import_react15.useMemo)(
+  const transition = (0, import_react17.useMemo)(
     () => resolveTransition(transitionInput),
     [transitionInput]
   );
-  const sceneMap = (0, import_react15.useMemo)(
+  const sceneMap = (0, import_react17.useMemo)(
     () => new Map(scenes.map((scene) => [scene.id, scene])),
     [scenes]
   );
   const initialScene = sceneMap.get(activeSceneId) ?? null;
-  const [slots, setSlots] = (0, import_react15.useState)([
+  const [slots, setSlots] = (0, import_react17.useState)([
     initialScene,
     null
   ]);
-  const [activeSlot, setActiveSlot] = (0, import_react15.useState)(0);
-  const [liveSlot, setLiveSlot] = (0, import_react15.useState)(0);
-  const [pendingSlot, setPendingSlot] = (0, import_react15.useState)(null);
-  const [phase, setPhase] = (0, import_react15.useState)(initialScene ? "idle" : "preloading");
-  const [captureRequestId, setCaptureRequestId] = (0, import_react15.useState)(0);
-  const [transitionRunId, setTransitionRunId] = (0, import_react15.useState)(0);
-  const [snapshot, setSnapshot] = (0, import_react15.useState)(null);
-  const [recoveryKey, setRecoveryKey] = (0, import_react15.useState)(0);
-  const requestedSceneIdRef = (0, import_react15.useRef)(activeSceneId);
-  const captureReasonRef = (0, import_react15.useRef)("start");
-  const interactionReleaseRef = (0, import_react15.useRef)(null);
-  const slotsRef = (0, import_react15.useRef)(slots);
-  const phaseRef = (0, import_react15.useRef)(phase);
-  const liveSlotRef = (0, import_react15.useRef)(liveSlot);
-  const transitionFromRef = (0, import_react15.useRef)(initialScene);
+  const [activeSlot, setActiveSlot] = (0, import_react17.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react17.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react17.useState)(null);
+  const [phase, setPhase] = (0, import_react17.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react17.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react17.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react17.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react17.useState)(0);
+  const requestedSceneIdRef = (0, import_react17.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react17.useRef)("start");
+  const interactionReleaseRef = (0, import_react17.useRef)(null);
+  const slotsRef = (0, import_react17.useRef)(slots);
+  const phaseRef = (0, import_react17.useRef)(phase);
+  const liveSlotRef = (0, import_react17.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react17.useRef)(initialScene);
   slotsRef.current = slots;
   phaseRef.current = phase;
   liveSlotRef.current = liveSlot;
-  const releaseInteraction = (0, import_react15.useCallback)(() => {
+  const releaseInteraction = (0, import_react17.useCallback)(() => {
     interactionReleaseRef.current?.();
     interactionReleaseRef.current = null;
   }, []);
-  const reportError = (0, import_react15.useCallback)((sceneId, error) => {
+  const reportError = (0, import_react17.useCallback)((sceneId, error) => {
     onTransitionError?.({ sceneId, error });
   }, [onTransitionError]);
-  const startPreload = (0, import_react15.useCallback)((scene) => {
+  const startPreload = (0, import_react17.useCallback)((scene) => {
     const nextSlot = 1 - liveSlotRef.current;
     requestedSceneIdRef.current = scene.id;
     setSlots((current) => {
@@ -3889,7 +4113,7 @@ function PanoramaScenesController({
     setPendingSlot(nextSlot);
     setPhase("preloading");
   }, []);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const requested = sceneMap.get(activeSceneId);
     if (!requested) {
       reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
@@ -3913,7 +4137,7 @@ function PanoramaScenesController({
     }
     startPreload(requested);
   }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
-  const handleReady = (0, import_react15.useCallback)((slot) => {
+  const handleReady = (0, import_react17.useCallback)((slot) => {
     if (slot !== pendingSlot || phaseRef.current !== "preloading") {
       return;
     }
@@ -3944,7 +4168,7 @@ function PanoramaScenesController({
     setPhase("capturing");
     setCaptureRequestId((current) => current + 1);
   }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
-  const handleCaptured = (0, import_react15.useCallback)((nextSnapshot) => {
+  const handleCaptured = (0, import_react17.useCallback)((nextSnapshot) => {
     setSnapshot((current) => {
       current?.dispose();
       return nextSnapshot;
@@ -3966,7 +4190,7 @@ function PanoramaScenesController({
     setPhase("transitioning");
     setTransitionRunId((current) => current + 1);
   }, [manager, pendingSlot, sceneMap, startPreload]);
-  const finishTransition = (0, import_react15.useCallback)(() => {
+  const finishTransition = (0, import_react17.useCallback)(() => {
     const nextSlot = pendingSlot;
     const previousScene = transitionFromRef.current;
     const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
@@ -3991,12 +4215,12 @@ function PanoramaScenesController({
       });
     }
   }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
-  (0, import_react15.useEffect)(() => () => {
+  (0, import_react17.useEffect)(() => () => {
     releaseInteraction();
     snapshot?.dispose();
   }, [releaseInteraction, snapshot]);
-  const { gl } = (0, import_fiber12.useThree)();
-  (0, import_react15.useEffect)(() => {
+  const { gl } = (0, import_fiber13.useThree)();
+  (0, import_react17.useEffect)(() => {
     const canvas = gl.domElement;
     const onContextLost = (event) => {
       event.preventDefault();
@@ -4020,8 +4244,8 @@ function PanoramaScenesController({
   }, [gl, manager, releaseInteraction, snapshot]);
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -4033,7 +4257,7 @@ function PanoramaScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         SceneSource,
         {
           scene: source,
@@ -4049,7 +4273,7 @@ function PanoramaScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SnapshotOverlay,
       {
         snapshot,
@@ -4062,60 +4286,186 @@ function PanoramaScenesController({
     phase === "idle" && renderedScene ? renderHotspots?.(renderedScene) : null
   ] });
 }
-function PanoramaScenes({
+function Scenes({
   maxTextureMemoryMb,
   maxConcurrentTileLoads,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PanoramaScenesController, { ...props })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScenesController, { ...props })
     }
   );
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_fiber14 = require("@react-three/fiber");
-var import_react17 = require("react");
-var import_three10 = require("three");
+var import_fiber15 = require("@react-three/fiber");
+var import_react20 = require("react");
+var import_three11 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
-var import_fiber13 = require("@react-three/fiber");
-var import_react16 = require("react");
+var import_fiber14 = require("@react-three/fiber");
+var import_react19 = require("react");
 var import_three9 = require("three");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var DEFAULT_FLOATING_DISTANCE = 10;
-var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
-var PANORAMA_SURFACE_INSET = 4;
-var DEFAULT_REFERENCE_FOV = 75;
-var MIN_ANGULAR_SIZE = 0.01;
-var MAX_ANGULAR_SIZE = 179;
-var DRAG_EPSILON_DEGREES = 1e-3;
-var LOCAL_FORWARD = new import_three9.Vector3(0, 0, 1);
-var HOTSPOT_MODE_RENDERING = {
-  surface: { orientation: "surface", placement: "surface" },
-  billboard: { orientation: "billboard", placement: "floating" }
+
+// src/hotspot/hotspot-tooltip.tsx
+var import_drei = require("@react-three/drei");
+var import_react18 = require("react");
+var import_jsx_runtime10 = require("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"
 };
-function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? import_three9.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(import_three9.MathUtils.degToRad(safeSize) / 2);
-}
-function resolveScale(scale) {
-  return Number.isFinite(scale) && scale > 0 ? scale : 1;
-}
-function resolveDistance(placement, distance, width, height) {
-  const maximumDistance = maximumHotspotDistance(width, height);
-  if (placement === "surface") {
-    return maximumDistance;
+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 (!Number.isFinite(distance)) {
-    return DEFAULT_FLOATING_DISTANCE;
+  if (typeof tooltip === "string") {
+    const text2 = tooltip.trim();
+    return text2 ? { text: text2 } : null;
   }
-  return import_three9.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
-}
+  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] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    setImageFailed(false);
+  }, [content.image]);
+  const showImage = Boolean(content.image) && !imageFailed;
+  const bubbleStyle = (0, import_react18.useMemo)(
+    () => ({
+      ...BUBBLE_STYLE,
+      transform: tooltipBubbleTransform(
+        placement,
+        resolveHotspotTooltipOffset(offset)
+      )
+    }),
+    [offset, placement]
+  );
+  if (!showImage && !content.text) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_drei.Html, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { role: "tooltip", style: bubbleStyle, children: [
+    showImage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "img",
+      {
+        alt: content.imageAlt ?? content.text ?? "",
+        onError: () => setImageFailed(true),
+        src: content.image,
+        style: IMAGE_STYLE
+      }
+    ) : null,
+    content.text ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: TEXT_STYLE, children: content.text }) : null
+  ] }) });
+}
+
+// src/hotspot/hotspot-anchor.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DEFAULT_FLOATING_DISTANCE = 10;
+var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
+var PANORAMA_SURFACE_INSET = 4;
+var DEFAULT_REFERENCE_FOV = 75;
+var MIN_ANGULAR_SIZE = 0.01;
+var MAX_ANGULAR_SIZE = 179;
+var DRAG_EPSILON_DEGREES = 1e-3;
+var LOCAL_FORWARD = new import_three9.Vector3(0, 0, 1);
+var TOOLTIP_WORLD_BOX = new import_three9.Box3();
+var TOOLTIP_LOCAL_BOX = new import_three9.Box3();
+var TOOLTIP_CORNER = new import_three9.Vector3();
+var TOOLTIP_INVERSE = new import_three9.Matrix4();
+var HOTSPOT_MODE_RENDERING = {
+  surface: { orientation: "surface", placement: "surface" },
+  billboard: { orientation: "billboard", placement: "floating" }
+};
+function angularSizeToWorldSize(size, radius) {
+  const safeSize = Number.isFinite(size) ? import_three9.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(import_three9.MathUtils.degToRad(safeSize) / 2);
+}
+function resolveScale(scale) {
+  return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
+function resolveDistance(placement, distance, width, height) {
+  const maximumDistance = maximumHotspotDistance(width, height);
+  if (placement === "surface") {
+    return maximumDistance;
+  }
+  if (!Number.isFinite(distance)) {
+    return DEFAULT_FLOATING_DISTANCE;
+  }
+  return import_three9.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
+}
 function maximumHotspotDistance(width, height) {
   const safeWidth = import_three9.MathUtils.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
@@ -4165,6 +4515,100 @@ function angularDistance(a, b) {
   const bVector = panoPositionToVector3(b);
   return import_three9.MathUtils.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,
@@ -4184,7 +4628,12 @@ function HotspotAnchor({
   visible = true,
   draggable = false,
   interactive = true,
+  cursor,
   ariaLabel,
+  tooltip,
+  tooltipTrigger = "always",
+  tooltipPlacement = "top",
+  tooltipOffset,
   children,
   onClick,
   onHoverChange,
@@ -4192,10 +4641,20 @@ function HotspotAnchor({
   onPositionChange,
   onDragEnd
 }) {
-  const controlsRef = (0, import_react16.useContext)(PanoramaViewContext);
-  const groupRef = (0, import_react16.useRef)(null);
-  const dragStateRef = (0, import_react16.useRef)(null);
-  const suppressNextClickRef = (0, import_react16.useRef)(false);
+  const controlsRef = (0, import_react19.useContext)(PanoramaViewContext);
+  const eventBus = (0, import_react19.useContext)(PanoEventBusContext);
+  const cursorApi = usePanoCursor();
+  const groupRef = (0, import_react19.useRef)(null);
+  const tooltipAnchorRef = (0, import_react19.useRef)(null);
+  const dragStateRef = (0, import_react19.useRef)(null);
+  const suppressNextClickRef = (0, import_react19.useRef)(false);
+  const [hovered, setHovered] = (0, import_react19.useState)(false);
+  const [dragging, setDragging] = (0, import_react19.useState)(false);
+  const [pinned, setPinned] = (0, import_react19.useState)(false);
+  const tooltipContent = (0, import_react19.useMemo)(
+    () => resolveHotspotTooltipContent(tooltip),
+    [tooltip]
+  );
   const normalizedPosition = normalizePanoPosition(position);
   const rendering = internalOrientation && internalPlacement ? { orientation: internalOrientation, placement: internalPlacement } : HOTSPOT_MODE_RENDERING[mode];
   const { orientation: orientation2, placement } = rendering;
@@ -4208,27 +4667,33 @@ function HotspotAnchor({
     scaledWidth,
     scaledHeight
   );
-  const worldPosition = (0, import_react16.useMemo)(
+  const worldPosition = (0, import_react19.useMemo)(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
   );
-  const surfaceQuaternion3 = (0, import_react16.useMemo)(
+  const surfaceQuaternion3 = (0, import_react19.useMemo)(
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
-  const focusGeometry = (0, import_react16.useMemo)(() => {
+  const focusGeometry = (0, import_react19.useMemo)(() => {
     const planeGeometry = new import_three9.PlaneGeometry(1, 1);
     const geometry = new import_three9.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",
@@ -4236,15 +4701,59 @@ function HotspotAnchor({
       });
     } : void 0
   });
-  (0, import_react16.useEffect)(
+  const tooltipOpen = visible && tooltipContent !== null && isTooltipOpen(tooltipTrigger, hovered, focused, pinned);
+  const cursorClaimId = hotspotCursorClaimId(id);
+  (0, import_react19.useEffect)(
     () => () => {
       dragStateRef.current?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
   );
-  (0, import_react16.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
-  (0, import_fiber13.useFrame)(({ camera }) => {
+  (0, import_react19.useEffect)(() => {
+    if (!cursorApi) {
+      return;
+    }
+    if (interactive && visible && dragging) {
+      cursorApi.claim(cursorClaimId, "hotspotDragging");
+      return;
+    }
+    if (interactive && visible && hovered) {
+      cursorApi.claim(cursorClaimId, "hotspot", cursor);
+      return;
+    }
+    cursorApi.release(cursorClaimId);
+  }, [
+    cursor,
+    cursorApi,
+    cursorClaimId,
+    dragging,
+    hovered,
+    interactive,
+    visible
+  ]);
+  (0, import_react19.useEffect)(
+    () => () => {
+      cursorApi?.release(cursorClaimId);
+    },
+    [cursorApi, cursorClaimId]
+  );
+  (0, import_react19.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_react19.useEffect)(() => {
+    if (tooltipTrigger !== "click") {
+      setPinned(false);
+      return;
+    }
+    return eventBus?.subscribe("click", () => {
+      setPinned(false);
+    });
+  }, [eventBus, tooltipTrigger]);
+  (0, import_react19.useEffect)(() => {
+    if (tooltipTrigger !== "hover") {
+      setHovered(false);
+    }
+  }, [tooltipTrigger]);
+  (0, import_fiber14.useFrame)(({ camera }) => {
     if (!groupRef.current) {
       return;
     }
@@ -4263,6 +4772,14 @@ function HotspotAnchor({
       (useAngularScale ? worldHeight : 1) * scaleFactor,
       1
     );
+    if (tooltipOpen && tooltipAnchorRef.current) {
+      updateTooltipAnchor(
+        tooltipAnchorRef.current,
+        groupRef.current,
+        tooltipPlacement,
+        useAngularScale
+      );
+    }
   });
   const stopPointerEvent = (event) => {
     event.stopPropagation();
@@ -4289,8 +4806,12 @@ function HotspotAnchor({
     suppressNextClickRef.current = dragState.moved;
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
+    setDragging(false);
+    if (emitDragEnd) {
+      setHovered(true);
+    }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "group",
     {
       ref: groupRef,
@@ -4301,6 +4822,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;
@@ -4322,6 +4846,8 @@ function HotspotAnchor({
           releaseInteractionLock,
           moved: false
         };
+        setHovered(false);
+        setDragging(true);
         onDragStart?.({
           ...makeInteractionEvent(id, startPosition, event),
           source: "pointer",
@@ -4344,6 +4870,7 @@ function HotspotAnchor({
       } : void 0,
       onPointerOut: interactive ? (event) => {
         if (!dragStateRef.current) {
+          setHovered(false);
           onHoverChange?.(
             false,
             makeInteractionEvent(id, normalizedPosition, event)
@@ -4352,6 +4879,7 @@ function HotspotAnchor({
       } : void 0,
       onPointerOver: interactive ? (event) => {
         if (!dragStateRef.current) {
+          setHovered(true);
           onHoverChange?.(
             true,
             makeInteractionEvent(id, normalizedPosition, event)
@@ -4360,38 +4888,161 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: interactive ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
-        children
+        children,
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          HotspotTooltip,
+          {
+            content: tooltipContent,
+            offset: resolveHotspotTooltipOffset(tooltipOffset),
+            placement: tooltipPlacement
+          }
+        ) }) : null
       ]
     }
   );
 }
 
-// src/hotspot/image-hotspot.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+// src/hotspot/hotspot-plane.tsx
+var import_three10 = require("three");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var HOTSPOT_ALPHA_CUTOFF = 0.05;
+var SAMPLE_UV = new import_three10.Vector2();
+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 import_three10.MeshBasicMaterial)) {
+    import_three10.Mesh.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;
+  import_three10.Mesh.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__ */ (0, import_jsx_runtime12.jsxs)("mesh", { raycast: hotspotPlaneRaycast, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "meshBasicMaterial",
+      {
+        alphaTest: HOTSPOT_ALPHA_CUTOFF,
+        alphaToCoverage: true,
+        map,
+        opacity: map ? clampOpacity(opacity) : 0,
+        side: import_three10.DoubleSide,
+        toneMapped: false,
+        transparent: true
+      }
+    )
+  ] });
+}
+
+// src/hotspot/image-hotspot.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = (0, import_fiber14.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react17.useState)(null);
-  const onLoadRef = (0, import_react17.useRef)(onLoad);
-  const onErrorRef = (0, import_react17.useRef)(onError);
+  const gl = (0, import_fiber15.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react20.useState)(null);
+  const onLoadRef = (0, import_react20.useRef)(onLoad);
+  const onErrorRef = (0, import_react20.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -4399,7 +5050,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
         active = false;
       };
     }
-    const loader = new import_three10.TextureLoader();
+    const loader = new import_three11.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -4407,11 +5058,11 @@ function useHotspotImageTexture(src, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three10.SRGBColorSpace;
-        loadedTexture.wrapS = import_three10.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three10.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three10.LinearFilter;
-        loadedTexture.minFilter = import_three10.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three11.SRGBColorSpace;
+        loadedTexture.wrapS = import_three11.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three11.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three11.LinearFilter;
+        loadedTexture.minFilter = import_three11.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -4429,7 +5080,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
       active = false;
     };
   }, [gl, src]);
-  (0, import_react17.useEffect)(
+  (0, import_react20.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -4447,29 +5098,42 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("mesh", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "meshBasicMaterial",
-      {
-        map: texture,
-        opacity: texture ? clampOpacity(opacity) : 0,
-        side: import_three10.DoubleSide,
-        toneMapped: false,
-        transparent: true
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
-var import_fiber15 = require("@react-three/fiber");
-var import_react18 = require("react");
-var import_three11 = require("three");
-var import_Line2 = require("three/addons/lines/Line2.js");
-var import_LineGeometry = require("three/addons/lines/LineGeometry.js");
-var import_LineMaterial = require("three/addons/lines/LineMaterial.js");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_three12 = require("three");
+
+// src/hotspot/hotspot-stroke-line.tsx
+var import_drei2 = require("@react-three/drei");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function HotspotStrokeLine({
+  points,
+  color,
+  lineWidth,
+  opacity,
+  renderOrder
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_drei2.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
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -4504,7 +5168,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new import_three11.Vector2(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new import_three12.Vector2(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -4541,7 +5205,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new import_three11.Vector3()];
+  const candidates = [new import_three12.Vector3()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -4565,7 +5229,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new import_three11.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three11.Vector3(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new import_three12.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three12.Vector3(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -4576,7 +5240,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three11.Vector3()
+    new import_three12.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -4585,20 +5249,20 @@ function surfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = position.pitch * Math.PI / 180;
   const yaw = position.yaw * Math.PI / 180;
-  const localUp = new import_three11.Vector3(
+  const localUp = new import_three12.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three11.Quaternion().setFromRotationMatrix(
-    new import_three11.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three12.Quaternion().setFromRotationMatrix(
+    new import_three12.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal(center) {
-  return new import_three11.Matrix4().compose(
+  return new import_three12.Matrix4().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new import_three11.Vector3(1, 1, 1)
+    new import_three12.Vector3(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -4653,8 +5317,8 @@ function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps)
 }
 function makeFillGeometry(vertices, center) {
   const unwrapped = unwrapPolygonVertices(vertices);
-  const contour = unwrapped.map((vertex) => new import_three11.Vector2(vertex.unwrappedYaw, vertex.pitch));
-  const triangles = import_three11.ShapeUtils.triangulateShape(contour, []);
+  const contour = unwrapped.map((vertex) => new import_three12.Vector2(vertex.unwrappedYaw, vertex.pitch));
+  const triangles = import_three12.ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
   const worldToLocal = makeWorldToLocal(center);
@@ -4670,10 +5334,10 @@ function makeFillGeometry(vertices, center) {
       steps
     );
   }
-  return new import_three11.BufferGeometry().setAttribute("position", new import_three11.Float32BufferAttribute(positions, 3)).setIndex(indices);
+  return new import_three12.BufferGeometry().setAttribute("position", new import_three12.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);
@@ -4689,33 +5353,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 import_LineGeometry.LineGeometry();
-  geometry.setPositions(positions);
-  const material = new import_LineMaterial.LineMaterial({
-    color,
-    depthTest: true,
-    depthWrite: false,
-    linewidth: Math.max(0.5, width),
-    opacity,
-    transparent: true,
-    worldUnits: false,
-    alphaToCoverage: true
-  });
-  const line = new import_Line2.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);
@@ -4742,45 +5387,27 @@ function PolygonHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const gl = (0, import_fiber15.useThree)((state) => state.gl);
-  const size = (0, import_fiber15.useThree)((state) => state.size);
-  const issues = (0, import_react18.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const issues = (0, import_react21.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react18.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
-  const fillGeometry = (0, import_react18.useMemo)(
+  const center = (0, import_react21.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react21.useMemo)(
     () => valid && center ? makeFillGeometry(vertices, center) : null,
     [center, valid, vertices]
   );
-  const strokePositions = (0, import_react18.useMemo)(
+  const strokePoints = (0, import_react21.useMemo)(
     () => valid && center ? makeStrokePositions(vertices, center) : null,
     [center, valid, vertices]
   );
   const resolvedStrokeOpacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const devicePixelRatio = gl.getPixelRatio();
-  const strokeLine = (0, import_react18.useMemo)(
-    () => strokePositions ? makeStrokeLine(strokePositions, stroke, strokeWidth * devicePixelRatio, resolvedStrokeOpacity) : null,
-    [devicePixelRatio, resolvedStrokeOpacity, stroke, strokePositions, strokeWidth]
-  );
-  const focusStrokeLine = (0, import_react18.useMemo)(
-    () => strokePositions ? makeStrokeLine(strokePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
-    [devicePixelRatio, strokePositions, strokeWidth]
-  );
-  const startVerticesRef = (0, import_react18.useRef)(null);
+  const startVerticesRef = (0, import_react21.useRef)(null);
   const issuesKey = issues.map((issue) => issue.code).join(",");
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, issuesKey, onInvalid, valid]);
-  (0, import_react18.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
-  (0, import_react18.useEffect)(() => () => disposeStrokeLine(strokeLine), [strokeLine]);
-  (0, import_react18.useEffect)(() => () => disposeStrokeLine(focusStrokeLine), [focusStrokeLine]);
-  (0, import_react18.useEffect)(() => {
-    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;
+  (0, import_react21.useEffect)(() => () => 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);
@@ -4792,7 +5419,7 @@ function PolygonHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -4807,7 +5434,16 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("primitive", { object: focusStrokeLine, renderOrder: renderOrder + 2 }),
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        HotspotStrokeLine,
+        {
+          color: "#75cbd3",
+          lineWidth: strokeWidth + 2,
+          opacity: 1,
+          points: strokePoints,
+          renderOrder: renderOrder + 2
+        }
+      ),
       onDragStart: (event) => {
         startVerticesRef.current = cloneVertices(vertices);
         emitVerticesChange(event, onDragStart);
@@ -4818,30 +5454,35 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "meshBasicMaterial",
           {
             color: fill,
             depthWrite: false,
             opacity: Math.max(0, Math.min(fillOpacity, 1)),
-            side: import_three11.DoubleSide,
+            side: import_three12.DoubleSide,
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("primitive", { object: strokeLine, renderOrder: renderOrder + 1 })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          HotspotStrokeLine,
+          {
+            color: stroke,
+            lineWidth: strokeWidth,
+            opacity: resolvedStrokeOpacity,
+            points: strokePoints,
+            renderOrder: renderOrder + 1
+          }
+        )
       ]
     }
   );
 }
 
 // src/hotspot/polyline-hotspot.tsx
-var import_fiber16 = require("@react-three/fiber");
-var import_react19 = require("react");
-var import_three12 = require("three");
-var import_Line22 = require("three/addons/lines/Line2.js");
-var import_LineGeometry2 = require("three/addons/lines/LineGeometry.js");
-var import_LineMaterial2 = require("three/addons/lines/LineMaterial.js");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_three13 = require("three");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -4866,29 +5507,29 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three12.Vector3()
+    new import_three13.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
 function surfaceQuaternion2(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = import_three12.MathUtils.degToRad(position.pitch);
-  const yaw = import_three12.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three12.Vector3(
+  const pitch = import_three13.MathUtils.degToRad(position.pitch);
+  const yaw = import_three13.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three13.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three12.Quaternion().setFromRotationMatrix(
-    new import_three12.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three13.Quaternion().setFromRotationMatrix(
+    new import_three13.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal2(center) {
-  return new import_three12.Matrix4().compose(
+  return new import_three13.Matrix4().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new import_three12.Vector3(1, 1, 1)
+    new import_three13.Vector3(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -4903,11 +5544,11 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(import_three12.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(import_three13.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
-  const positions = [];
+  const points = [];
   const worldToLocal = makeWorldToLocal2(center);
   const unwrapped = unwrapVertices(vertices);
   const steps = subdivisionSteps(vertices);
@@ -4923,35 +5564,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 import_LineGeometry2.LineGeometry();
-  geometry.setPositions(positions);
-  const material = new import_LineMaterial2.LineMaterial({
-    color,
-    depthTest: true,
-    depthWrite: false,
-    linewidth: Math.max(0.5, width),
-    opacity,
-    transparent: true,
-    worldUnits: false,
-    alphaToCoverage: true
-  });
-  const line = new import_Line22.Line2(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);
@@ -4978,39 +5597,19 @@ function PolylineHotspot({
   onInvalid,
   ...anchorProps
 }) {
-  const gl = (0, import_fiber16.useThree)((state) => state.gl);
-  const size = (0, import_fiber16.useThree)((state) => state.size);
-  const issues = (0, import_react19.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const issues = (0, import_react22.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
   const valid = issues.length === 0;
-  const center = (0, import_react19.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
-  const linePositions = (0, import_react19.useMemo)(
+  const center = (0, import_react22.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePoints = (0, import_react22.useMemo)(
     () => valid && center ? makeLinePositions(vertices, center) : null,
     [center, valid, vertices]
   );
-  const devicePixelRatio = gl.getPixelRatio();
   const opacity = Math.max(0, Math.min(strokeOpacity, 1));
-  const line = (0, import_react19.useMemo)(
-    () => linePositions ? makeLine(linePositions, stroke, strokeWidth * devicePixelRatio, opacity) : null,
-    [devicePixelRatio, linePositions, opacity, stroke, strokeWidth]
-  );
-  const focusLine = (0, import_react19.useMemo)(
-    () => linePositions ? makeLine(linePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
-    [devicePixelRatio, linePositions, strokeWidth]
-  );
-  const startVerticesRef = (0, import_react19.useRef)(null);
-  (0, import_react19.useEffect)(() => {
+  const startVerticesRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (!valid) onInvalid?.(issues);
   }, [issues, onInvalid, valid]);
-  (0, import_react19.useEffect)(() => () => disposeLine(line), [line]);
-  (0, import_react19.useEffect)(() => () => disposeLine(focusLine), [focusLine]);
-  (0, import_react19.useEffect)(() => {
-    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?.({
@@ -5021,7 +5620,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -5035,7 +5634,16 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("primitive", { object: focusLine, renderOrder: renderOrder + 2 }),
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        HotspotStrokeLine,
+        {
+          color: "#75cbd3",
+          lineWidth: strokeWidth + 2,
+          opacity: 1,
+          points: linePoints,
+          renderOrder: renderOrder + 2
+        }
+      ),
       onDragStart: (event) => {
         startVerticesRef.current = cloneVertices2(vertices);
         emitVerticesChange(event, onDragStart);
@@ -5045,22 +5653,25 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("primitive", { object: line, renderOrder: renderOrder + 1 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        HotspotStrokeLine,
+        {
+          color: stroke,
+          lineWidth: strokeWidth,
+          opacity,
+          points: linePoints,
+          renderOrder: renderOrder + 1
+        }
+      )
     }
   );
 }
 
 // src/hotspot/graphic-hotspot.tsx
-var import_react20 = require("react");
-var import_three13 = require("three");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_three14 = require("three");
+var import_jsx_runtime17 = require("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;
 }
@@ -5237,23 +5848,23 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
     throw new Error("Canvas 2D is unavailable for this graphic hotspot.");
   }
   drawGraphic(context, graphic, aspectWidth, aspectHeight);
-  const texture = new import_three13.CanvasTexture(canvas);
-  texture.colorSpace = import_three13.SRGBColorSpace;
-  texture.wrapS = import_three13.ClampToEdgeWrapping;
-  texture.wrapT = import_three13.ClampToEdgeWrapping;
-  texture.magFilter = import_three13.LinearFilter;
-  texture.minFilter = import_three13.LinearMipmapLinearFilter;
+  const texture = new import_three14.CanvasTexture(canvas);
+  texture.colorSpace = import_three14.SRGBColorSpace;
+  texture.wrapS = import_three14.ClampToEdgeWrapping;
+  texture.wrapT = import_three14.ClampToEdgeWrapping;
+  texture.magFilter = import_three14.LinearFilter;
+  texture.minFilter = import_three14.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
 }
 function useGraphicTexture(graphic, aspectWidth, aspectHeight, onLoad, onError) {
-  const [texture, setTexture] = (0, import_react20.useState)(null);
-  const onLoadRef = (0, import_react20.useRef)(onLoad);
-  const onErrorRef = (0, import_react20.useRef)(onError);
+  const [texture, setTexture] = (0, import_react23.useState)(null);
+  const onLoadRef = (0, import_react23.useRef)(onLoad);
+  const onErrorRef = (0, import_react23.useRef)(onError);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     let nextTexture = null;
     try {
       nextTexture = createGraphicTexture(graphic, aspectWidth, aspectHeight);
@@ -5279,41 +5890,23 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("mesh", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "meshBasicMaterial",
-      {
-        map: texture,
-        opacity: texture ? clampOpacity2(opacity) : 0,
-        side: import_three13.DoubleSide,
-        toneMapped: false,
-        transparent: true
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
-var import_fiber17 = require("@react-three/fiber");
-var import_react21 = require("react");
-var import_three14 = require("three");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_fiber16 = require("@react-three/fiber");
+var import_react24 = require("react");
+var import_three15 = require("three");
+var import_jsx_runtime18 = require("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;
 }
@@ -5326,13 +5919,13 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = (0, import_fiber17.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react21.useState)(null);
-  const onErrorRef = (0, import_react21.useRef)(onError);
-  const onLoadProgressRef = (0, import_react21.useRef)(onLoadProgress);
+  const gl = (0, import_fiber16.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react24.useState)(null);
+  const onErrorRef = (0, import_react24.useRef)(onError);
+  const onLoadProgressRef = (0, import_react24.useRef)(onLoadProgress);
   onErrorRef.current = onError;
   onLoadProgressRef.current = onLoadProgress;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!src) {
@@ -5341,7 +5934,7 @@ function useSpriteTexture({
         active = false;
       };
     }
-    const loader = new import_three14.TextureLoader();
+    const loader = new import_three15.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -5349,11 +5942,11 @@ function useSpriteTexture({
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three14.SRGBColorSpace;
-        loadedTexture.wrapS = import_three14.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three14.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three14.LinearFilter;
-        loadedTexture.minFilter = import_three14.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three15.SRGBColorSpace;
+        loadedTexture.wrapS = import_three15.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three15.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three15.LinearFilter;
+        loadedTexture.minFilter = import_three15.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -5373,7 +5966,7 @@ function useSpriteTexture({
       active = false;
     };
   }, [gl, id, src]);
-  (0, import_react21.useEffect)(
+  (0, import_react24.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -5402,24 +5995,24 @@ function SequenceHotspot({
   const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
   const frameCount = resolveFrameCount(requestedFrameCount);
   const safeFps = resolveFps(fps);
-  const [frameIndex, setFrameIndex] = (0, import_react21.useState)(0);
-  const elapsedRef = (0, import_react21.useRef)(0);
-  const frameIndexRef = (0, import_react21.useRef)(0);
-  const endedRef = (0, import_react21.useRef)(false);
-  const lastPlaybackStateRef = (0, import_react21.useRef)(null);
-  const onFrameChangeRef = (0, import_react21.useRef)(onFrameChange);
-  const onPlaybackStateChangeRef = (0, import_react21.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react21.useRef)(onEnded);
+  const [frameIndex, setFrameIndex] = (0, import_react24.useState)(0);
+  const elapsedRef = (0, import_react24.useRef)(0);
+  const frameIndexRef = (0, import_react24.useRef)(0);
+  const endedRef = (0, import_react24.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react24.useRef)(null);
+  const onFrameChangeRef = (0, import_react24.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react24.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react24.useRef)(onEnded);
   onFrameChangeRef.current = onFrameChange;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     elapsedRef.current = 0;
     frameIndexRef.current = 0;
     endedRef.current = false;
     setFrameIndex(0);
   }, [frameCount, frameDirection, src]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -5433,13 +6026,13 @@ function SequenceHotspot({
     );
     texture.needsUpdate = true;
   }, [frameCount, frameDirection, frameIndex, texture]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!texture) {
       return;
     }
     onFrameChangeRef.current?.({ id, index: 0, src });
   }, [id, src, texture]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!texture) {
       return;
     }
@@ -5458,7 +6051,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  (0, import_fiber17.useFrame)((_, deltaSeconds) => {
+  (0, import_fiber16.useFrame)((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -5488,32 +6081,14 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("mesh", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      "meshBasicMaterial",
-      {
-        map: texture,
-        opacity: texture ? clampOpacity3(opacity) : 0,
-        side: import_three14.DoubleSide,
-        toneMapped: false,
-        transparent: true
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
-var import_fiber18 = require("@react-three/fiber");
-var import_react22 = require("react");
-var import_three15 = require("three");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function clampOpacity4(opacity) {
-  if (!Number.isFinite(opacity)) {
-    return 1;
-  }
-  return Math.max(0, Math.min(opacity, 1));
-}
+var import_fiber17 = require("@react-three/fiber");
+var import_react25 = require("react");
+var import_three16 = require("three");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function clampVolume(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -5521,11 +6096,11 @@ function clampVolume(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture(id, poster, onError) {
-  const gl = (0, import_fiber18.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react22.useState)(null);
-  const onErrorRef = (0, import_react22.useRef)(onError);
+  const gl = (0, import_fiber17.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react25.useState)(null);
+  const onErrorRef = (0, import_react25.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -5533,7 +6108,7 @@ function usePosterTexture(id, poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three15.TextureLoader();
+    const loader = new import_three16.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -5541,11 +6116,11 @@ function usePosterTexture(id, poster, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three15.SRGBColorSpace;
-        loadedTexture.wrapS = import_three15.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three15.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three15.LinearFilter;
-        loadedTexture.minFilter = import_three15.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three16.SRGBColorSpace;
+        loadedTexture.wrapS = import_three16.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three16.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three16.LinearFilter;
+        loadedTexture.minFilter = import_three16.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -5562,7 +6137,7 @@ function usePosterTexture(id, poster, onError) {
       active = false;
     };
   }, [gl, id, poster]);
-  (0, import_react22.useEffect)(
+  (0, import_react25.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -5580,14 +6155,14 @@ function useVideoResource({
   poster,
   src
 }) {
-  const [resource, setResource] = (0, import_react22.useState)(null);
-  const onEndedRef = (0, import_react22.useRef)(onEnded);
-  const onErrorRef = (0, import_react22.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react22.useRef)(onPlaybackStateChange);
+  const [resource, setResource] = (0, import_react25.useState)(null);
+  const onEndedRef = (0, import_react25.useRef)(onEnded);
+  const onErrorRef = (0, import_react25.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react25.useRef)(onPlaybackStateChange);
   onEndedRef.current = onEnded;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!src) {
       setResource(null);
       return;
@@ -5599,12 +6174,12 @@ function useVideoResource({
     }
     video.playsInline = playsInline ?? true;
     video.poster = poster ?? "";
-    const texture = new import_three15.VideoTexture(video);
-    texture.colorSpace = import_three15.SRGBColorSpace;
-    texture.wrapS = import_three15.ClampToEdgeWrapping;
-    texture.wrapT = import_three15.ClampToEdgeWrapping;
-    texture.magFilter = import_three15.LinearFilter;
-    texture.minFilter = import_three15.LinearFilter;
+    const texture = new import_three16.VideoTexture(video);
+    texture.colorSpace = import_three16.SRGBColorSpace;
+    texture.wrapS = import_three16.ClampToEdgeWrapping;
+    texture.wrapT = import_three16.ClampToEdgeWrapping;
+    texture.magFilter = import_three16.LinearFilter;
+    texture.minFilter = import_three16.LinearFilter;
     texture.generateMipmaps = false;
     const notifyState = (state) => {
       if (active) {
@@ -5688,11 +6263,11 @@ function VideoHotspot({
     src
   });
   const posterTexture = usePosterTexture(id, poster, onError);
-  const onPlaybackErrorRef = (0, import_react22.useRef)(onPlaybackError);
-  const onPlaybackStateChangeRef = (0, import_react22.useRef)(onPlaybackStateChange);
+  const onPlaybackErrorRef = (0, import_react25.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react25.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -5702,7 +6277,7 @@ function VideoHotspot({
     resource.video.playsInline = playsInline;
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -5725,24 +6300,405 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("mesh", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "meshBasicMaterial",
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HotspotPlane, { map: activeTexture, opacity }) });
+}
+
+// src/hotspot/text-hotspot.tsx
+var import_react26 = require("react");
+var import_three17 = require("three");
+var import_jsx_runtime20 = require("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 import_three17.CanvasTexture(canvas);
+  texture.colorSpace = import_three17.SRGBColorSpace;
+  texture.wrapS = import_three17.ClampToEdgeWrapping;
+  texture.wrapT = import_three17.ClampToEdgeWrapping;
+  texture.magFilter = import_three17.LinearFilter;
+  texture.minFilter = import_three17.LinearMipmapLinearFilter;
+  texture.generateMipmaps = true;
+  texture.needsUpdate = true;
+  return texture;
+}
+function useTextTexture(text, width, height, style, onLoad, onError) {
+  const [texture, setTexture] = (0, import_react26.useState)(null);
+  const onLoadRef = (0, import_react26.useRef)(onLoad);
+  const onErrorRef = (0, import_react26.useRef)(onError);
+  onLoadRef.current = onLoad;
+  onErrorRef.current = onError;
+  (0, import_react26.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime20.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HotspotPlane, { map: texture, opacity }) });
+}
+
+// src/hotspot/iframe-hotspot.tsx
+var import_drei3 = require("@react-three/drei");
+var import_three18 = require("three");
+var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime21.jsxs)(HotspotAnchor, { ...anchorProps, height, width, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("mesh", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("planeGeometry", { args: [1, 1] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "meshBasicMaterial",
+        {
+          depthWrite: false,
+          opacity: 0,
+          side: import_three18.DoubleSide,
+          toneMapped: false,
+          transparent: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_drei3.Html,
       {
-        map: activeTexture,
-        opacity: activeTexture ? clampOpacity4(opacity) : 0,
-        side: import_three15.DoubleSide,
-        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__ */ (0, import_jsx_runtime21.jsx)(
+          "iframe",
+          {
+            allow,
+            loading,
+            onError: (event) => onError?.(event.nativeEvent),
+            onLoad,
+            referrerPolicy,
+            sandbox,
+            src,
+            style: {
+              border: 0,
+              display: "block",
+              height: "100%",
+              width: "100%"
+            },
+            title: iframeTitle
+          }
+        )
       }
     )
-  ] }) });
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AutoRotate,
+  DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
+  DEFAULT_PANO_CURSORS,
   GraphicHotspot,
+  IframeHotspot,
   ImageHotspot,
   KeyboardControls,
   MAX_HOTSPOT_PITCH,
@@ -5750,12 +6706,13 @@ function VideoHotspot({
   MouseControls,
   PanoContextMenu,
   PanoEvents,
-  PanoView,
-  PanoramaScenes,
+  PanoViewer,
   PolygonHotspot,
   PolylineHotspot,
+  Scenes,
   SequenceHotspot,
   Sphere,
+  TextHotspot,
   Tile,
   TouchControls,
   VideoHotspot,