@ericchen1990/pano-view 0.1.0

package/dist/index.cjs

@@ -0,0 +1,4001 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AutoRotate: () => AutoRotate,
+  GraphicHotspot: () => GraphicHotspot,
+  ImageHotspot: () => ImageHotspot,
+  MAX_HOTSPOT_PITCH: () => MAX_HOTSPOT_PITCH,
+  PanoView: () => PanoView,
+  PanoramaScenes: () => PanoramaScenes,
+  PolygonHotspot: () => PolygonHotspot,
+  PolylineHotspot: () => PolylineHotspot,
+  SequenceHotspot: () => SequenceHotspot,
+  Sphere: () => Sphere,
+  Tile: () => Tile,
+  VideoHotspot: () => VideoHotspot,
+  clampPanoPitch: () => clampPanoPitch,
+  normalizePanoPosition: () => normalizePanoPosition,
+  normalizePanoYaw: () => normalizePanoYaw,
+  panoPositionToVector3: () => panoPositionToVector3,
+  unwrapPolygonVertices: () => unwrapPolygonVertices,
+  validatePolygonVertices: () => validatePolygonVertices,
+  validatePolylineVertices: () => validatePolylineVertices,
+  vector3ToPanoPosition: () => vector3ToPanoPosition
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/pano-view.tsx
+var import_fiber3 = require("@react-three/fiber");
+var import_react4 = require("react");
+
+// src/panorama-controls.tsx
+var import_fiber = require("@react-three/fiber");
+var import_react = require("react");
+var import_three = require("three");
+var MAX_PITCH = 89.9;
+var INERTIA_ROTATION_DAMPING = 8;
+var INERTIA_ZOOM_DAMPING = 12;
+var DEFAULT_ROTATE_DAMPING = 14;
+var DEFAULT_ZOOM_DAMPING = 16;
+var MIN_ROTATION_VELOCITY = 0.01;
+var MIN_ZOOM_VELOCITY = 0.01;
+var VIEW_SETTLE_EPSILON = 1e-3;
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function normalizeYaw(yaw) {
+  return import_three.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
+}
+function shortestYawDelta(from, to) {
+  return normalizeYaw(to - from);
+}
+function dampingFactor(damping, deltaSeconds) {
+  return damping === 0 ? 1 : 1 - Math.exp(-damping * deltaSeconds);
+}
+function resolveDamping(value, fallback) {
+  return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+function pointerDistance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function viewsEqual(a, b) {
+  return a.yaw === b.yaw && a.pitch === b.pitch && a.fov === b.fov;
+}
+var PanoramaControls = (0, import_react.forwardRef)(function PanoramaControls2({ enabled, initialView, minFov, maxFov, options, onViewChange }, ref) {
+  const { camera, gl } = (0, import_fiber.useThree)();
+  const viewRef = (0, import_react.useRef)({ ...initialView });
+  const targetViewRef = (0, import_react.useRef)({ ...initialView });
+  const initialViewRef = (0, import_react.useRef)({ ...initialView });
+  const pointersRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const pinchDistanceRef = (0, import_react.useRef)(null);
+  const yawVelocityRef = (0, import_react.useRef)(0);
+  const pitchVelocityRef = (0, import_react.useRef)(0);
+  const zoomVelocityRef = (0, import_react.useRef)(0);
+  const dirtyRef = (0, import_react.useRef)(true);
+  const interactingRef = (0, import_react.useRef)(false);
+  const interactionLockCountRef = (0, import_react.useRef)(0);
+  const optionsRef = (0, import_react.useRef)(options);
+  const onViewChangeRef = (0, import_react.useRef)(onViewChange);
+  const lastEmittedViewRef = (0, import_react.useRef)(null);
+  const eulerRef = (0, import_react.useRef)(new import_three.Euler(0, 0, 0, "YXZ"));
+  optionsRef.current = options;
+  onViewChangeRef.current = onViewChange;
+  const constrainView = (view, current = targetViewRef.current) => {
+    return {
+      yaw: normalizeYaw(view.yaw ?? current.yaw),
+      pitch: clamp(view.pitch ?? current.pitch, -MAX_PITCH, MAX_PITCH),
+      fov: clamp(view.fov ?? current.fov, minFov, maxFov)
+    };
+  };
+  const stopVelocity = () => {
+    yawVelocityRef.current = 0;
+    pitchVelocityRef.current = 0;
+    zoomVelocityRef.current = 0;
+  };
+  const acquireInteractionLock = () => {
+    interactionLockCountRef.current += 1;
+    stopVelocity();
+    interactingRef.current = false;
+    pinchDistanceRef.current = null;
+    for (const pointerId of pointersRef.current.keys()) {
+      if (gl.domElement.hasPointerCapture?.(pointerId)) {
+        gl.domElement.releasePointerCapture?.(pointerId);
+      }
+    }
+    pointersRef.current.clear();
+    let released = false;
+    return () => {
+      if (released) {
+        return;
+      }
+      released = true;
+      interactionLockCountRef.current = Math.max(
+        0,
+        interactionLockCountRef.current - 1
+      );
+    };
+  };
+  const setView = (view, setOptions) => {
+    const nextView = constrainView(view);
+    targetViewRef.current = nextView;
+    viewRef.current = nextView;
+    if (setOptions?.immediate !== false) {
+      stopVelocity();
+    }
+    dirtyRef.current = true;
+  };
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      getView: () => ({ ...viewRef.current }),
+      setView,
+      reset: () => setView(initialViewRef.current),
+      acquireInteractionLock,
+      applyAutoRotation: (yawDelta) => {
+        const inertiaFinished = yawVelocityRef.current === 0 && pitchVelocityRef.current === 0 && zoomVelocityRef.current === 0;
+        if (!Number.isFinite(yawDelta) || interactionLockCountRef.current > 0 || interactingRef.current || !inertiaFinished) {
+          return false;
+        }
+        targetViewRef.current.yaw += yawDelta;
+        dirtyRef.current = true;
+        return true;
+      }
+    }),
+    [gl, maxFov, minFov]
+  );
+  (0, import_react.useEffect)(() => {
+    initialViewRef.current = { ...initialView };
+    setView(initialView);
+  }, [initialView.fov, initialView.pitch, initialView.yaw]);
+  (0, import_react.useEffect)(() => {
+    const element = gl.domElement;
+    if (!enabled) {
+      pointersRef.current.clear();
+      interactingRef.current = false;
+      return;
+    }
+    const updatePointer = (event) => {
+      const previous = pointersRef.current.get(event.pointerId);
+      const now = performance.now();
+      const next = { x: event.clientX, y: event.clientY, at: now };
+      pointersRef.current.set(event.pointerId, next);
+      return { previous, next };
+    };
+    const onPointerDown = (event) => {
+      if (interactionLockCountRef.current > 0) {
+        return;
+      }
+      event.preventDefault();
+      interactingRef.current = true;
+      stopVelocity();
+      pointersRef.current.set(event.pointerId, {
+        x: event.clientX,
+        y: event.clientY,
+        at: performance.now()
+      });
+      element.setPointerCapture?.(event.pointerId);
+      if (pointersRef.current.size === 2) {
+        const [first, second] = Array.from(pointersRef.current.values());
+        pinchDistanceRef.current = pointerDistance(first, second);
+      }
+    };
+    const onPointerMove = (event) => {
+      if (interactionLockCountRef.current > 0) {
+        return;
+      }
+      if (!pointersRef.current.has(event.pointerId)) {
+        return;
+      }
+      event.preventDefault();
+      const { previous, next } = updatePointer(event);
+      if (!previous) {
+        return;
+      }
+      const pointers = Array.from(pointersRef.current.values());
+      if (pointers.length >= 2) {
+        const distance = pointerDistance(pointers[0], pointers[1]);
+        const previousDistance = pinchDistanceRef.current;
+        pinchDistanceRef.current = distance;
+        if (previousDistance && distance > 0) {
+          const currentFov = targetViewRef.current.fov;
+          const nextFov = clamp(
+            currentFov * (previousDistance / distance),
+            minFov,
+            maxFov
+          );
+          const elapsed2 = Math.max((next.at - previous.at) / 1e3, 1 / 120);
+          zoomVelocityRef.current = (nextFov - currentFov) / elapsed2;
+          targetViewRef.current = {
+            ...targetViewRef.current,
+            fov: nextFov
+          };
+          dirtyRef.current = true;
+        }
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      const rotateSpeed = optionsRef.current.rotateSpeed ?? 0.35;
+      const deltaYaw = -(next.x - previous.x) * 360 * rotateSpeed / Math.max(rect.width, 1);
+      const deltaPitch = (next.y - previous.y) * 180 * rotateSpeed / Math.max(rect.height, 1);
+      const elapsed = Math.max((next.at - previous.at) / 1e3, 1 / 120);
+      targetViewRef.current = constrainView({
+        yaw: targetViewRef.current.yaw + deltaYaw,
+        pitch: targetViewRef.current.pitch + deltaPitch
+      });
+      yawVelocityRef.current = deltaYaw / elapsed;
+      pitchVelocityRef.current = deltaPitch / elapsed;
+      dirtyRef.current = true;
+    };
+    const releasePointer = (event) => {
+      pointersRef.current.delete(event.pointerId);
+      if (element.hasPointerCapture?.(event.pointerId)) {
+        element.releasePointerCapture?.(event.pointerId);
+      }
+      if (pointersRef.current.size < 2) {
+        pinchDistanceRef.current = null;
+      }
+      interactingRef.current = pointersRef.current.size > 0;
+    };
+    const onWheel = (event) => {
+      if (interactionLockCountRef.current > 0) {
+        event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      const zoomSpeed = optionsRef.current.zoomSpeed ?? 0.08;
+      const delta = event.deltaY * zoomSpeed;
+      const nextFov = clamp(
+        targetViewRef.current.fov + delta,
+        minFov,
+        maxFov
+      );
+      zoomVelocityRef.current = clamp(
+        zoomVelocityRef.current + delta * 12,
+        -180,
+        180
+      );
+      targetViewRef.current = {
+        ...targetViewRef.current,
+        fov: nextFov
+      };
+      dirtyRef.current = true;
+    };
+    const onKeyDown = (event) => {
+      if (interactionLockCountRef.current > 0) {
+        return;
+      }
+      if (optionsRef.current.keyboard === false) {
+        return;
+      }
+      const step = event.shiftKey ? 10 : 3;
+      let next = null;
+      if (event.key === "ArrowLeft") {
+        next = { yaw: targetViewRef.current.yaw - step };
+      } else if (event.key === "ArrowRight") {
+        next = { yaw: targetViewRef.current.yaw + step };
+      } else if (event.key === "ArrowUp") {
+        next = { pitch: targetViewRef.current.pitch + step };
+      } else if (event.key === "ArrowDown") {
+        next = { pitch: targetViewRef.current.pitch - step };
+      } else if (event.key === "+" || event.key === "=") {
+        next = { fov: targetViewRef.current.fov - step };
+      } else if (event.key === "-" || event.key === "_") {
+        next = { fov: targetViewRef.current.fov + step };
+      } else if (event.key === "0") {
+        setView(initialViewRef.current);
+        event.preventDefault();
+        return;
+      }
+      if (next) {
+        event.preventDefault();
+        targetViewRef.current = constrainView(next);
+        dirtyRef.current = true;
+      }
+    };
+    element.addEventListener("pointerdown", onPointerDown);
+    element.addEventListener("pointermove", onPointerMove);
+    element.addEventListener("pointerup", releasePointer);
+    element.addEventListener("pointercancel", releasePointer);
+    element.addEventListener("wheel", onWheel, { passive: false });
+    element.addEventListener("keydown", onKeyDown);
+    return () => {
+      element.removeEventListener("pointerdown", onPointerDown);
+      element.removeEventListener("pointermove", onPointerMove);
+      element.removeEventListener("pointerup", releasePointer);
+      element.removeEventListener("pointercancel", releasePointer);
+      element.removeEventListener("wheel", onWheel);
+      element.removeEventListener("keydown", onKeyDown);
+      pointersRef.current.clear();
+    };
+  }, [enabled, gl, maxFov, minFov]);
+  (0, import_fiber.useFrame)((_, deltaSeconds) => {
+    if (!(camera instanceof import_three.PerspectiveCamera)) {
+      return;
+    }
+    const inertiaEnabled = optionsRef.current.inertia !== false;
+    if (!interactingRef.current && inertiaEnabled) {
+      const rotationDamping = Math.exp(
+        -INERTIA_ROTATION_DAMPING * deltaSeconds
+      );
+      const zoomDamping2 = Math.exp(-INERTIA_ZOOM_DAMPING * deltaSeconds);
+      if (Math.abs(yawVelocityRef.current) >= MIN_ROTATION_VELOCITY) {
+        targetViewRef.current.yaw += yawVelocityRef.current * deltaSeconds;
+        yawVelocityRef.current *= rotationDamping;
+        dirtyRef.current = true;
+      } else {
+        yawVelocityRef.current = 0;
+      }
+      if (Math.abs(pitchVelocityRef.current) >= MIN_ROTATION_VELOCITY) {
+        targetViewRef.current.pitch += pitchVelocityRef.current * deltaSeconds;
+        pitchVelocityRef.current *= rotationDamping;
+        dirtyRef.current = true;
+      } else {
+        pitchVelocityRef.current = 0;
+      }
+      if (Math.abs(zoomVelocityRef.current) >= MIN_ZOOM_VELOCITY) {
+        targetViewRef.current.fov += zoomVelocityRef.current * deltaSeconds;
+        zoomVelocityRef.current *= zoomDamping2;
+        dirtyRef.current = true;
+      } else {
+        zoomVelocityRef.current = 0;
+      }
+    } else if (!inertiaEnabled) {
+      stopVelocity();
+    }
+    targetViewRef.current = constrainView(targetViewRef.current);
+    if (!dirtyRef.current) {
+      return;
+    }
+    const targetView = targetViewRef.current;
+    const rotateDamping = resolveDamping(
+      optionsRef.current.rotateDamping,
+      DEFAULT_ROTATE_DAMPING
+    );
+    const zoomDamping = resolveDamping(
+      optionsRef.current.zoomDamping,
+      DEFAULT_ZOOM_DAMPING
+    );
+    const rotationFactor = dampingFactor(rotateDamping, deltaSeconds);
+    const zoomFactor = dampingFactor(zoomDamping, deltaSeconds);
+    const yawDelta = shortestYawDelta(viewRef.current.yaw, targetView.yaw);
+    const smoothedView = {
+      yaw: normalizeYaw(viewRef.current.yaw + yawDelta * rotationFactor),
+      pitch: viewRef.current.pitch + (targetView.pitch - viewRef.current.pitch) * rotationFactor,
+      fov: viewRef.current.fov + (targetView.fov - viewRef.current.fov) * zoomFactor
+    };
+    const hasSettled = Math.abs(shortestYawDelta(smoothedView.yaw, targetView.yaw)) < VIEW_SETTLE_EPSILON && Math.abs(smoothedView.pitch - targetView.pitch) < VIEW_SETTLE_EPSILON && Math.abs(smoothedView.fov - targetView.fov) < VIEW_SETTLE_EPSILON;
+    viewRef.current = hasSettled ? { ...targetView } : smoothedView;
+    eulerRef.current.set(
+      import_three.MathUtils.degToRad(viewRef.current.pitch),
+      import_three.MathUtils.degToRad(-viewRef.current.yaw),
+      0,
+      "YXZ"
+    );
+    camera.quaternion.setFromEuler(eulerRef.current);
+    camera.fov = viewRef.current.fov;
+    camera.updateProjectionMatrix();
+    camera.updateMatrixWorld();
+    const nextView = { ...viewRef.current };
+    const lastEmitted = lastEmittedViewRef.current;
+    if (!lastEmitted || !viewsEqual(lastEmitted, nextView)) {
+      lastEmittedViewRef.current = nextView;
+      onViewChangeRef.current?.(nextView);
+    }
+    dirtyRef.current = !hasSettled;
+  });
+  return null;
+});
+
+// src/auto-rotate.tsx
+var import_fiber2 = require("@react-three/fiber");
+var import_react2 = require("react");
+var DEFAULT_AUTO_ROTATE_SPEED = 18;
+var DEFAULT_AUTO_ROTATE_ACCELERATION = 18;
+var DEFAULT_AUTO_ROTATE_START_DELAY = 2;
+var PanoramaControlsContext = (0, import_react2.createContext)(null);
+function resolveStartDelay(value) {
+  return Number.isFinite(value) ? Math.max(value, 0) : 0;
+}
+function resolveAcceleration(value) {
+  return Number.isFinite(value) && value >= 0 ? value : DEFAULT_AUTO_ROTATE_ACCELERATION;
+}
+function AutoRotate({
+  enabled = true,
+  speed = DEFAULT_AUTO_ROTATE_SPEED,
+  acceleration = DEFAULT_AUTO_ROTATE_ACCELERATION,
+  startDelay = DEFAULT_AUTO_ROTATE_START_DELAY
+}) {
+  const controlsRef = (0, import_react2.useContext)(PanoramaControlsContext);
+  const elapsedRef = (0, import_react2.useRef)(0);
+  const rotationSpeedRef = (0, import_react2.useRef)(0);
+  if (!controlsRef) {
+    throw new Error("<AutoRotate> must be rendered inside <PanoView>.");
+  }
+  (0, import_react2.useEffect)(() => {
+    elapsedRef.current = 0;
+    rotationSpeedRef.current = 0;
+  }, [enabled, startDelay]);
+  (0, import_fiber2.useFrame)((_, deltaSeconds) => {
+    if (!enabled || !Number.isFinite(speed) || speed === 0) {
+      rotationSpeedRef.current = 0;
+      return;
+    }
+    const delaySeconds = resolveStartDelay(startDelay) / 1e3;
+    elapsedRef.current += deltaSeconds;
+    if (elapsedRef.current < delaySeconds) {
+      return;
+    }
+    const targetSpeed = Math.abs(speed);
+    const currentSpeed = rotationSpeedRef.current;
+    const accelerationPerSecond = resolveAcceleration(acceleration);
+    const nextSpeed = accelerationPerSecond === 0 ? targetSpeed : Math.min(
+      targetSpeed,
+      currentSpeed + accelerationPerSecond * deltaSeconds
+    );
+    const averageSpeed = (currentSpeed + nextSpeed) / 2;
+    const yawDelta = Math.sign(speed) * averageSpeed * deltaSeconds;
+    if (!controlsRef.current?.applyAutoRotation(yawDelta)) {
+      rotationSpeedRef.current = 0;
+      return;
+    }
+    rotationSpeedRef.current = nextSpeed;
+  });
+  return null;
+}
+
+// src/hotspot/accessibility.tsx
+var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var HotspotAccessibilityContext = (0, import_react3.createContext)(null);
+var VISUALLY_HIDDEN_STYLE = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: 1
+};
+function warnAboutMissingLabel(id) {
+  const nodeEnv = globalThis.process?.env?.NODE_ENV;
+  if (nodeEnv !== "production") {
+    console.warn(
+      `Hotspot "${id}" is clickable but has no ariaLabel, so it is unavailable to keyboard and screen-reader users.`
+    );
+  }
+}
+function useHotspotAccessibility({
+  id,
+  ariaLabel,
+  onActivate
+}) {
+  const registry = (0, import_react3.useContext)(HotspotAccessibilityContext);
+  const [focused, setFocused] = (0, import_react3.useState)(false);
+  const activateRef = (0, import_react3.useRef)(onActivate);
+  const enabled = Boolean(onActivate);
+  activateRef.current = onActivate;
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) {
+      setFocused(false);
+      return;
+    }
+    if (!ariaLabel) {
+      warnAboutMissingLabel(id);
+      return;
+    }
+    if (!registry) {
+      return;
+    }
+    return registry.register({
+      id,
+      label: ariaLabel,
+      activate: (event) => activateRef.current?.(event),
+      onFocusChange: setFocused
+    });
+  }, [ariaLabel, enabled, id, registry]);
+  return focused;
+}
+function useHotspotAccessibilityLayer() {
+  const [entries, setEntries] = (0, import_react3.useState)(() => /* @__PURE__ */ new Map());
+  const register = (0, import_react3.useCallback)(
+    (entry) => {
+      const token = Symbol(entry.id);
+      const nextEntry = { ...entry, token };
+      setEntries((current) => {
+        const next = new Map(current);
+        next.set(entry.id, nextEntry);
+        return next;
+      });
+      return () => {
+        setEntries((current) => {
+          if (current.get(entry.id)?.token !== token) {
+            return current;
+          }
+          const next = new Map(current);
+          next.delete(entry.id);
+          return next;
+        });
+      };
+    },
+    []
+  );
+  const registry = (0, import_react3.useMemo)(
+    () => ({ register }),
+    [register]
+  );
+  const controls = (0, import_react3.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",
+      {
+        "aria-label": entry.label,
+        onBlur: () => entry.onFocusChange(false),
+        onClick: (event) => entry.activate(event.nativeEvent),
+        onFocus: () => entry.onFocusChange(true),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            entry.activate(event.nativeEvent);
+          }
+        },
+        style: VISUALLY_HIDDEN_STYLE,
+        type: "button",
+        children: entry.label
+      },
+      entry.id
+    )) }),
+    [entries]
+  );
+  return { controls, registry };
+}
+
+// src/panorama-event-surface.tsx
+var import_three3 = require("three");
+
+// src/hotspot/coordinates.ts
+var import_three2 = require("three");
+
+// src/hotspot/types.ts
+var MAX_HOTSPOT_PITCH = 89.9;
+
+// src/hotspot/coordinates.ts
+function normalizePanoYaw(yaw) {
+  if (!Number.isFinite(yaw)) {
+    return 0;
+  }
+  return import_three2.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
+}
+function clampPanoPitch(pitch) {
+  if (!Number.isFinite(pitch)) {
+    return 0;
+  }
+  return import_three2.MathUtils.clamp(pitch, -MAX_HOTSPOT_PITCH, MAX_HOTSPOT_PITCH);
+}
+function normalizePanoPosition(position) {
+  return {
+    yaw: normalizePanoYaw(position.yaw),
+    pitch: clampPanoPitch(position.pitch)
+  };
+}
+function panoPositionToVector3(position, radius = 1) {
+  const normalized = normalizePanoPosition(position);
+  const safeRadius = Number.isFinite(radius) ? Math.max(0, radius) : 1;
+  const yaw = import_three2.MathUtils.degToRad(normalized.yaw);
+  const pitch = import_three2.MathUtils.degToRad(normalized.pitch);
+  const cosPitch = Math.cos(pitch);
+  return new import_three2.Vector3(
+    cosPitch * Math.sin(yaw) * safeRadius,
+    Math.sin(pitch) * safeRadius,
+    -cosPitch * Math.cos(yaw) * safeRadius
+  );
+}
+function vector3ToPanoPosition(vector) {
+  const length = Math.hypot(vector.x, vector.y, vector.z);
+  if (!Number.isFinite(length) || length === 0) {
+    return { yaw: 0, pitch: 0 };
+  }
+  return normalizePanoPosition({
+    yaw: import_three2.MathUtils.radToDeg(Math.atan2(vector.x, -vector.z)),
+    pitch: import_three2.MathUtils.radToDeg(
+      Math.asin(import_three2.MathUtils.clamp(vector.y / length, -1, 1))
+    )
+  });
+}
+
+// src/panorama-radius.ts
+var DEFAULT_PANORAMA_RADIUS = 1e3;
+var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
+var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
+
+// src/panorama-event-surface.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
+function makePanoramaPointerEvent(event) {
+  const nativeEvent = event.nativeEvent;
+  return {
+    position: vector3ToPanoPosition(event.ray.direction),
+    nativeEvent,
+    pointerId: "pointerId" in nativeEvent ? nativeEvent.pointerId : void 0,
+    button: nativeEvent.button,
+    buttons: nativeEvent.buttons,
+    clientX: nativeEvent.clientX,
+    clientY: nativeEvent.clientY
+  };
+}
+function emitPanoramaEvent(event, callback) {
+  if (!callback) {
+    return;
+  }
+  event.stopPropagation();
+  callback(makePanoramaPointerEvent(event));
+}
+function PanoramaEventSurface({
+  onClick,
+  onDoubleClick,
+  onPointerMove
+}) {
+  if (!onClick && !onDoubleClick && !onPointerMove) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "mesh",
+    {
+      renderOrder: -200,
+      onClick: (event) => emitPanoramaEvent(event, onClick),
+      onDoubleClick: (event) => emitPanoramaEvent(event, onDoubleClick),
+      onPointerMove: (event) => emitPanoramaEvent(event, onPointerMove),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "meshBasicMaterial",
+          {
+            colorWrite: false,
+            depthTest: false,
+            depthWrite: false,
+            opacity: 0,
+            side: import_three3.BackSide,
+            transparent: true
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/pano-view.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_VIEW = {
+  yaw: 0,
+  pitch: 0,
+  fov: 75
+};
+var DEFAULT_CANVAS_STYLE = {
+  display: "block",
+  height: "100%",
+  width: "100%"
+};
+var PanoView = (0, import_react4.forwardRef)(
+  function PanoView2({
+    children,
+    initialView,
+    minFov = 30,
+    maxFov = 100,
+    controls = true,
+    onViewChange,
+    onPanoramaClick,
+    onPanoramaDoubleClick,
+    onPanoramaPointerMove,
+    dpr = [1, 2],
+    style,
+    "aria-label": ariaLabel = "Panorama viewer",
+    ...divProps
+  }, ref) {
+    const rootRef = (0, import_react4.useRef)(null);
+    const controlsRef = (0, import_react4.useRef)(null);
+    const { controls: hotspotAccessibilityControls, registry } = useHotspotAccessibilityLayer();
+    const fallbackViewRef = (0, import_react4.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_react4.useMemo)(
+      () => ({
+        yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
+        pitch: initialView?.pitch ?? DEFAULT_VIEW.pitch,
+        fov: Math.max(
+          normalizedMinFov,
+          Math.min(initialView?.fov ?? DEFAULT_VIEW.fov, normalizedMaxFov)
+        )
+      }),
+      [
+        initialView?.fov,
+        initialView?.pitch,
+        initialView?.yaw,
+        normalizedMaxFov,
+        normalizedMinFov
+      ]
+    );
+    fallbackViewRef.current = normalizedInitialView;
+    const controlsEnabled = controls !== false;
+    const controlOptions = (0, import_react4.useMemo)(
+      () => typeof controls === "object" ? controls : {},
+      [controls]
+    );
+    const legacyAutoRotateOptions = controlOptions;
+    const [legacyAutoRotate, setLegacyAutoRotate] = (0, import_react4.useState)(
+      legacyAutoRotateOptions.autoRotate ?? false
+    );
+    (0, import_react4.useEffect)(() => {
+      setLegacyAutoRotate(legacyAutoRotateOptions.autoRotate ?? false);
+    }, [legacyAutoRotateOptions.autoRotate]);
+    (0, import_react4.useImperativeHandle)(
+      ref,
+      () => ({
+        getView: () => controlsRef.current?.getView() ?? { ...fallbackViewRef.current },
+        setView: (view, options) => {
+          controlsRef.current?.setView(view, options);
+        },
+        reset: () => {
+          controlsRef.current?.reset();
+        },
+        startAutoRotate: () => {
+          setLegacyAutoRotate(true);
+        },
+        stopAutoRotate: () => {
+          setLegacyAutoRotate(false);
+        },
+        toggleFullscreen: async () => {
+          if (typeof document === "undefined") {
+            return;
+          }
+          if (document.fullscreenElement) {
+            await document.exitFullscreen?.();
+            return;
+          }
+          await rootRef.current?.requestFullscreen?.();
+        }
+      }),
+      []
+    );
+    const rootStyle = (0, import_react4.useMemo)(
+      () => ({
+        overflow: "hidden",
+        position: "relative",
+        ...style
+      }),
+      [style]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ...divProps,
+        ref: rootRef,
+        "aria-label": ariaLabel,
+        style: rootStyle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_fiber3.Canvas,
+            {
+              "aria-label": `${ariaLabel} canvas`,
+              camera: {
+                far: DEFAULT_PANORAMA_CAMERA_FAR,
+                fov: normalizedInitialView.fov,
+                near: DEFAULT_PANORAMA_CAMERA_NEAR,
+                position: [0, 0, 0.01]
+              },
+              dpr,
+              gl: {
+                // Hotspots contain transparent textures and curved outlines. Keep
+                // the canvas multisampled so their visible edges are smoothed.
+                antialias: true,
+                powerPreference: "high-performance",
+                stencil: false
+              },
+              style: {
+                ...DEFAULT_CANVAS_STYLE,
+                touchAction: controlsEnabled ? "none" : "auto"
+              },
+              tabIndex: controlsEnabled ? 0 : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PanoramaControlsContext.Provider, { value: controlsRef, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  PanoramaControls,
+                  {
+                    ref: controlsRef,
+                    enabled: controlsEnabled,
+                    initialView: normalizedInitialView,
+                    maxFov: normalizedMaxFov,
+                    minFov: normalizedMinFov,
+                    onViewChange,
+                    options: controlOptions
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  AutoRotate,
+                  {
+                    enabled: legacyAutoRotate,
+                    speed: legacyAutoRotateOptions.autoRotateSpeed
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  PanoramaEventSurface,
+                  {
+                    onClick: onPanoramaClick,
+                    onDoubleClick: onPanoramaDoubleClick,
+                    onPointerMove: onPanoramaPointerMove
+                  }
+                ),
+                children
+              ] }) })
+            }
+          ),
+          hotspotAccessibilityControls
+        ]
+      }
+    );
+  }
+);
+
+// src/sphere.tsx
+var import_fiber4 = require("@react-three/fiber");
+var import_react5 = require("react");
+var import_three4 = require("three");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Sphere({
+  src,
+  yawOffset = 0,
+  onLoad,
+  onError,
+  visible = true
+}) {
+  const gl = (0, import_fiber4.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react5.useState)(null);
+  const onLoadRef = (0, import_react5.useRef)(onLoad);
+  const onErrorRef = (0, import_react5.useRef)(onError);
+  onLoadRef.current = onLoad;
+  onErrorRef.current = onError;
+  (0, import_react5.useEffect)(() => {
+    let active = true;
+    const loader = new import_three4.TextureLoader();
+    setTexture(null);
+    loader.load(
+      src,
+      (loadedTexture) => {
+        if (!active) {
+          loadedTexture.dispose();
+          return;
+        }
+        loadedTexture.colorSpace = import_three4.SRGBColorSpace;
+        loadedTexture.wrapS = import_three4.RepeatWrapping;
+        loadedTexture.repeat.x = -1;
+        loadedTexture.offset.x = 1;
+        loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
+        loadedTexture.magFilter = import_three4.LinearFilter;
+        loadedTexture.minFilter = import_three4.LinearMipmapLinearFilter;
+        loadedTexture.generateMipmaps = true;
+        loadedTexture.needsUpdate = true;
+        setTexture(loadedTexture);
+        onLoadRef.current?.(loadedTexture);
+      },
+      void 0,
+      (error) => {
+        if (active) {
+          onErrorRef.current?.(error);
+        }
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [gl, src]);
+  (0, import_react5.useEffect)(
+    () => () => {
+      texture?.dispose();
+    },
+    [texture]
+  );
+  if (!texture) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "mesh",
+    {
+      rotation: [0, import_three4.MathUtils.degToRad(90 + yawOffset), 0],
+      visible,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "meshBasicMaterial",
+          {
+            map: texture,
+            side: import_three4.BackSide,
+            toneMapped: false
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/panorama-scenes.tsx
+var import_fiber7 = require("@react-three/fiber");
+var import_react8 = require("react");
+var import_three8 = require("three");
+
+// src/tile/texture-manager-context.tsx
+var import_fiber5 = require("@react-three/fiber");
+var import_react6 = require("react");
+
+// src/tile/texture-manager.ts
+var import_three5 = require("three");
+var EMPTY_TEXTURE_SNAPSHOT = {
+  status: "idle",
+  texture: null,
+  error: null
+};
+var TileTextureManager = class {
+  constructor(options) {
+    this.loader = new import_three5.TextureLoader();
+    this.entries = /* @__PURE__ */ new Map();
+    this.queue = [];
+    this.activeLoads = 0;
+    this.totalBytes = 0;
+    this.requested = 0;
+    this.loaded = 0;
+    this.failed = 0;
+    this.disposed = false;
+    this.generation = 0;
+    this.options = options;
+  }
+  resume() {
+    this.disposed = false;
+    this.drain();
+  }
+  getSnapshot(key) {
+    const entry = this.entries.get(key);
+    return entry ? this.snapshot(entry) : EMPTY_TEXTURE_SNAPSHOT;
+  }
+  acquire(key, url, address, listener) {
+    let entry = this.entries.get(key);
+    if (!entry) {
+      entry = {
+        key,
+        url,
+        address,
+        status: "idle",
+        texture: null,
+        error: null,
+        refs: 0,
+        listeners: /* @__PURE__ */ new Set(),
+        lastUsed: performance.now(),
+        bytes: 0
+      };
+      this.entries.set(key, entry);
+    }
+    entry.refs += 1;
+    entry.lastUsed = performance.now();
+    entry.listeners.add(listener);
+    listener(this.snapshot(entry));
+    if (entry.status === "idle") {
+      entry.status = "queued";
+      this.queue.push(entry);
+      this.requested += 1;
+      this.emitProgress();
+      this.drain();
+    }
+    return () => {
+      entry.listeners.delete(listener);
+      entry.refs = Math.max(0, entry.refs - 1);
+      entry.lastUsed = performance.now();
+      if (entry.refs === 0 && entry.status === "queued") {
+        const queueIndex = this.queue.indexOf(entry);
+        if (queueIndex >= 0) {
+          this.queue.splice(queueIndex, 1);
+        }
+        entry.status = "idle";
+        this.entries.delete(entry.key);
+        this.requested = Math.max(0, this.requested - 1);
+        this.emitProgress();
+        this.drain();
+        return;
+      }
+      this.evict();
+    };
+  }
+  dispose() {
+    this.disposed = true;
+    this.generation += 1;
+    this.queue.length = 0;
+    for (const entry of this.entries.values()) {
+      entry.texture?.dispose();
+      entry.listeners.clear();
+    }
+    this.entries.clear();
+    this.totalBytes = 0;
+  }
+  /**
+   * Releases textures that are no longer rendered by any Tile instance.
+   * Scene transitions call this after the outgoing panorama has been
+   * snapshotted, so the incoming scene never competes with stale GPU tiles.
+   */
+  releaseUnused() {
+    for (const entry of Array.from(this.entries.values())) {
+      if (entry.refs > 0) {
+        continue;
+      }
+      entry.texture?.dispose();
+      this.totalBytes -= entry.bytes;
+      this.entries.delete(entry.key);
+    }
+    this.totalBytes = Math.max(0, this.totalBytes);
+  }
+  snapshot(entry) {
+    return {
+      status: entry.status,
+      texture: entry.texture,
+      error: entry.error
+    };
+  }
+  notify(entry) {
+    const snapshot = this.snapshot(entry);
+    for (const listener of entry.listeners) {
+      listener(snapshot);
+    }
+  }
+  emitProgress() {
+    this.options.onProgress?.({
+      requested: this.requested,
+      loaded: this.loaded,
+      failed: this.failed,
+      active: this.activeLoads,
+      queued: this.queue.length
+    });
+  }
+  drain() {
+    while (!this.disposed && this.activeLoads < this.options.concurrency && this.queue.length > 0) {
+      const entry = this.queue.shift();
+      if (entry.refs === 0) {
+        entry.status = "idle";
+        this.entries.delete(entry.key);
+        this.requested = Math.max(0, this.requested - 1);
+        continue;
+      }
+      entry.status = "loading";
+      this.activeLoads += 1;
+      this.notify(entry);
+      this.emitProgress();
+      void this.loadAndFinish(entry);
+    }
+  }
+  async load(entry, generation) {
+    let lastError = null;
+    for (let attempt = 0; attempt <= this.options.retryCount; attempt += 1) {
+      try {
+        const texture = await this.loader.loadAsync(entry.url);
+        if (this.disposed || generation !== this.generation) {
+          texture.dispose();
+          return;
+        }
+        this.configureTexture(texture);
+        entry.texture = texture;
+        entry.status = "loaded";
+        entry.error = null;
+        entry.bytes = entry.address.width * entry.address.height * 4;
+        entry.lastUsed = performance.now();
+        this.totalBytes += entry.bytes;
+        this.loaded += 1;
+        this.notify(entry);
+        return;
+      } catch (error) {
+        lastError = error;
+      }
+    }
+    if (!this.disposed && generation === this.generation) {
+      entry.status = "error";
+      entry.error = lastError;
+      this.failed += 1;
+      this.notify(entry);
+      this.options.onError?.({
+        address: entry.address,
+        url: entry.url,
+        error: lastError
+      });
+    }
+  }
+  configureTexture(texture) {
+    texture.colorSpace = import_three5.SRGBColorSpace;
+    texture.wrapS = import_three5.ClampToEdgeWrapping;
+    texture.wrapT = import_three5.ClampToEdgeWrapping;
+    texture.magFilter = import_three5.LinearFilter;
+    texture.minFilter = import_three5.LinearFilter;
+    texture.generateMipmaps = false;
+    texture.anisotropy = Math.min(4, this.options.anisotropy);
+    texture.needsUpdate = true;
+  }
+  evict() {
+    if (this.totalBytes <= this.options.maxBytes) {
+      return;
+    }
+    const candidates = Array.from(this.entries.values()).filter((entry) => entry.refs === 0 && entry.texture).sort((a, b) => a.lastUsed - b.lastUsed);
+    for (const entry of candidates) {
+      if (this.totalBytes <= this.options.maxBytes) {
+        break;
+      }
+      entry.texture?.dispose();
+      this.totalBytes -= entry.bytes;
+      this.entries.delete(entry.key);
+    }
+    this.totalBytes = Math.max(0, this.totalBytes);
+  }
+  finishLoad(generation) {
+    this.activeLoads = Math.max(0, this.activeLoads - 1);
+    if (!this.disposed && generation === this.generation) {
+      this.emitProgress();
+      this.evict();
+    }
+    if (!this.disposed) {
+      this.drain();
+    }
+  }
+  async loadAndFinish(entry) {
+    const generation = this.generation;
+    try {
+      await this.load(entry, generation);
+    } finally {
+      this.finishLoad(generation);
+    }
+  }
+};
+
+// src/tile/texture-manager-context.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TileTextureManagerContext = (0, import_react6.createContext)(
+  null
+);
+function TileTextureManagerProvider({
+  children,
+  maxTextureMemoryMb = 128,
+  maxConcurrentLoads = 4
+}) {
+  const gl = (0, import_fiber5.useThree)((state) => state.gl);
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const manager = (0, import_react6.useMemo)(
+    () => new TileTextureManager({
+      anisotropy,
+      maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
+      concurrency: Math.max(1, Math.floor(maxConcurrentLoads)),
+      retryCount: 1
+    }),
+    [anisotropy, maxConcurrentLoads, maxTextureMemoryMb]
+  );
+  (0, import_react6.useEffect)(() => {
+    manager.resume();
+    return () => manager.dispose();
+  }, [manager]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TileTextureManagerContext.Provider, { value: manager, children });
+}
+function useSharedTileTextureManager() {
+  return (0, import_react6.useContext)(TileTextureManagerContext);
+}
+
+// src/tile/tile.tsx
+var import_fiber6 = require("@react-three/fiber");
+var import_react7 = require("react");
+var import_three7 = require("three");
+
+// src/tile/face-layout.ts
+var import_three6 = require("three");
+var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
+var PREVIEW_FACE_ORDER = ["f", "r", "b", "l", "u", "d"];
+var CUBE_RADIUS = DEFAULT_PANORAMA_RADIUS;
+function getFaceTransform(face, radius = CUBE_RADIUS) {
+  switch (face) {
+    case "f":
+      return { position: [0, 0, -radius], rotation: [0, 0, 0] };
+    case "b":
+      return { position: [0, 0, radius], rotation: [0, Math.PI, 0] };
+    case "r":
+      return {
+        position: [radius, 0, 0],
+        rotation: [0, -Math.PI / 2, 0]
+      };
+    case "l":
+      return {
+        position: [-radius, 0, 0],
+        rotation: [0, Math.PI / 2, 0]
+      };
+    case "u":
+      return {
+        position: [0, radius, 0],
+        rotation: [Math.PI / 2, 0, 0]
+      };
+    case "d":
+      return {
+        position: [0, -radius, 0],
+        rotation: [-Math.PI / 2, 0, 0]
+      };
+  }
+}
+function getTileLocalLayout(address, radius = CUBE_RADIUS) {
+  const left = (address.col - 1) * address.tileSize;
+  const top = (address.row - 1) * address.tileSize;
+  const right = left + address.width;
+  const bottom = top + address.height;
+  return {
+    x: ((left + right) / address.faceSize - 1) * radius,
+    y: (1 - (top + bottom) / address.faceSize) * radius,
+    width: address.width / address.faceSize * radius * 2,
+    height: address.height / address.faceSize * radius * 2
+  };
+}
+var faceQuaternionCache = /* @__PURE__ */ new Map();
+function getFaceQuaternion(face) {
+  const cached = faceQuaternionCache.get(face);
+  if (cached) {
+    return cached;
+  }
+  const transform = getFaceTransform(face);
+  const quaternion = new import_three6.Quaternion().setFromEuler(
+    new import_three6.Euler(...transform.rotation, "XYZ")
+  );
+  faceQuaternionCache.set(face, quaternion);
+  return quaternion;
+}
+function getTileBoundingBox(address, radius = CUBE_RADIUS) {
+  const transform = getFaceTransform(address.face, radius);
+  const local = getTileLocalLayout(address, radius);
+  const halfWidth = local.width / 2;
+  const halfHeight = local.height / 2;
+  const quaternion = getFaceQuaternion(address.face);
+  const position = new import_three6.Vector3(...transform.position);
+  const corners = [
+    new import_three6.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
+    new import_three6.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
+    new import_three6.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
+    new import_three6.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
+  ];
+  for (const corner of corners) {
+    corner.applyQuaternion(quaternion).add(position);
+  }
+  return new import_three6.Box3().setFromPoints(corners);
+}
+function makeTileAddress(face, level, faceSize, tileSize, col, row) {
+  const left = (col - 1) * tileSize;
+  const top = (row - 1) * tileSize;
+  return {
+    face,
+    level,
+    row,
+    col,
+    faceSize,
+    tileSize,
+    width: Math.min(tileSize, faceSize - left),
+    height: Math.min(tileSize, faceSize - top)
+  };
+}
+function tileKey(address) {
+  return `${address.level}/${address.face}/${address.row}/${address.col}`;
+}
+function getPreferredLevel(levels, viewportHeight, pixelRatio, verticalFov, currentLevel) {
+  const requiredFaceSize = viewportHeight * pixelRatio * (90 / Math.max(verticalFov, 1));
+  let preferredLevel = levels.length;
+  for (let index = 0; index < levels.length; index += 1) {
+    if (levels[index] >= requiredFaceSize) {
+      preferredLevel = index + 1;
+      break;
+    }
+  }
+  if (preferredLevel > currentLevel) {
+    const currentSize = levels[currentLevel - 1] ?? levels[0];
+    return requiredFaceSize > currentSize * 1.2 ? preferredLevel : currentLevel;
+  }
+  if (preferredLevel < currentLevel) {
+    const preferredSize = levels[preferredLevel - 1] ?? levels[0];
+    return requiredFaceSize < preferredSize * 0.8 ? preferredLevel : currentLevel;
+  }
+  return currentLevel;
+}
+function previewAtlasVRange(face) {
+  const index = PREVIEW_FACE_ORDER.indexOf(face);
+  return {
+    offset: (PREVIEW_FACE_ORDER.length - index - 1) / PREVIEW_FACE_ORDER.length,
+    scale: 1 / PREVIEW_FACE_ORDER.length
+  };
+}
+
+// src/tile/multires.ts
+function positiveInteger(value, name) {
+  if (!Number.isFinite(value) || value <= 0 || !Number.isInteger(value)) {
+    throw new Error(`${name} must be a positive integer, received ${String(value)}`);
+  }
+  return value;
+}
+function ascendingLevels(levels) {
+  for (let index = 1; index < levels.length; index += 1) {
+    if (levels[index] <= levels[index - 1]) {
+      throw new Error("multires face sizes must be strictly ascending");
+    }
+  }
+  return levels;
+}
+function parseMultires(multires) {
+  if (typeof multires !== "string") {
+    const tileSize2 = positiveInteger(multires.tileSize, "multires.tileSize");
+    if (multires.levels.length === 0) {
+      throw new Error("multires.levels must contain at least one face size");
+    }
+    const levels2 = ascendingLevels(
+      multires.levels.map(
+        (level, index) => positiveInteger(level, `multires.levels[${index}]`)
+      )
+    );
+    return { tileSize: tileSize2, levels: levels2 };
+  }
+  const values = multires.split(",").map((part) => Number(part.trim()));
+  if (values.length < 2 || values.some((value) => !Number.isFinite(value))) {
+    throw new Error(
+      "multires must contain a tile size followed by at least one face size"
+    );
+  }
+  const tileSize = positiveInteger(values[0], "multires tile size");
+  const levels = ascendingLevels(
+    values.slice(1).map(
+      (level, index) => positiveInteger(level, `multires level ${index + 1}`)
+    )
+  );
+  return { tileSize, levels };
+}
+function buildDefaultTileUrlTemplate() {
+  return "tiles/%s/l%l/%v/l%l_%s_%h_%v.webp";
+}
+function resolveRelativeTileUrl(baseUrl, relativePath) {
+  const normalizedBaseUrl = baseUrl.replace(/\/+$/, "");
+  const normalizedPath = relativePath.replace(/^\/+/, "");
+  return normalizedBaseUrl ? `${normalizedBaseUrl}/${normalizedPath}` : normalizedPath;
+}
+function resolveTemplateUrl(template, address) {
+  return template.replace(/%s/g, address.face).replace(/%l/g, String(address.level)).replace(/%(0*)([hxucvywr])/g, (_match, zeroes, placeholder) => {
+    const value = "hxuc".includes(placeholder) ? address.col : address.row;
+    return String(value).padStart(zeroes.length + 1, "0");
+  });
+}
+
+// src/tile/tile.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MAX_LOD_UPDATE_INTERVAL_MS = 100;
+var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
+var FAST_FOV_THRESHOLD_DEGREES = 0.5;
+var VIEW_CHANGE_EPSILON = 1e-4;
+var VISIBILITY_FOV_PADDING_DEGREES = 8;
+var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
+var SHARED_TILE_GEOMETRY = new import_three7.PlaneGeometry(1, 1);
+function usePreviewTexture(url, anisotropy, onError) {
+  const [texture, setTexture] = (0, import_react7.useState)(null);
+  const onErrorRef = (0, import_react7.useRef)(onError);
+  onErrorRef.current = onError;
+  (0, import_react7.useEffect)(() => {
+    if (!url) {
+      setTexture(null);
+      return;
+    }
+    let active = true;
+    const loader = new import_three7.TextureLoader();
+    setTexture(null);
+    loader.load(
+      url,
+      (loadedTexture) => {
+        if (!active) {
+          loadedTexture.dispose();
+          return;
+        }
+        loadedTexture.colorSpace = import_three7.SRGBColorSpace;
+        loadedTexture.wrapS = import_three7.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three7.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three7.LinearFilter;
+        loadedTexture.minFilter = import_three7.LinearFilter;
+        loadedTexture.generateMipmaps = false;
+        loadedTexture.anisotropy = Math.min(4, anisotropy);
+        loadedTexture.needsUpdate = true;
+        setTexture(loadedTexture);
+      },
+      void 0,
+      (error) => {
+        if (active) {
+          setTexture(null);
+          onErrorRef.current?.(error);
+        }
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [anisotropy, url]);
+  (0, import_react7.useEffect)(
+    () => () => {
+      texture?.dispose();
+    },
+    [texture]
+  );
+  return texture;
+}
+function PreviewFace({
+  face,
+  texture
+}) {
+  const geometry = (0, import_react7.useMemo)(() => {
+    const nextGeometry = new import_three7.PlaneGeometry(
+      PREVIEW_RADIUS * 2,
+      PREVIEW_RADIUS * 2
+    );
+    const uv = nextGeometry.getAttribute("uv");
+    const { offset, scale } = previewAtlasVRange(face);
+    const inset = scale / 512;
+    for (let index = 0; index < uv.count; index += 1) {
+      const sourceV = uv.getY(index);
+      uv.setY(
+        index,
+        offset + inset + sourceV * Math.max(0, scale - inset * 2)
+      );
+    }
+    uv.needsUpdate = true;
+    return nextGeometry;
+  }, [face]);
+  (0, import_react7.useEffect)(
+    () => () => {
+      geometry.dispose();
+    },
+    [geometry]
+  );
+  const transform = getFaceTransform(face, PREVIEW_RADIUS);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "mesh",
+    {
+      geometry,
+      position: transform.position,
+      renderOrder: -100,
+      rotation: transform.rotation,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "meshBasicMaterial",
+        {
+          depthTest: false,
+          depthWrite: false,
+          map: texture,
+          toneMapped: false
+        }
+      )
+    }
+  );
+}
+function PreviewCube({ texture }) {
+  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PreviewFace, { face, texture }, face));
+}
+function useManagedTexture(manager, key, url, address) {
+  const [managedState, setManagedState] = (0, import_react7.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_react7.useEffect)(
+    () => manager.acquire(key, url, address, (nextSnapshot) => {
+      setManagedState({
+        manager,
+        key,
+        url,
+        snapshot: nextSnapshot
+      });
+    }),
+    [key, manager, url]
+  );
+  return snapshot;
+}
+var TileMesh = (0, import_react7.memo)(function TileMesh2({
+  address,
+  manager,
+  renderOrder,
+  resolveUrl
+}) {
+  const url = resolveUrl(address);
+  const cacheKey = `${url}\0${tileKey(address)}`;
+  const snapshot = useManagedTexture(manager, cacheKey, url, address);
+  const layout = getTileLocalLayout(address);
+  const transform = getFaceTransform(address.face);
+  if (!snapshot.texture) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "mesh",
+    {
+      geometry: SHARED_TILE_GEOMETRY,
+      position: [layout.x, layout.y, 0],
+      renderOrder,
+      scale: [layout.width, layout.height, 1],
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "meshBasicMaterial",
+        {
+          depthTest: false,
+          depthWrite: false,
+          map: snapshot.texture,
+          toneMapped: false
+        }
+      )
+    }
+  ) });
+});
+var TileLayerMeshes = (0, import_react7.memo)(function TileLayerMeshes2({
+  layer,
+  manager,
+  resolveUrl
+}) {
+  return layer.addresses.map((address) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    TileMesh,
+    {
+      address,
+      manager,
+      renderOrder: layer.renderOrder,
+      resolveUrl
+    },
+    tileKey(address)
+  ));
+});
+function buildTileCandidates(levels, tileSize) {
+  return levels.map((faceSize, index) => {
+    const level = index + 1;
+    const cols = Math.ceil(faceSize / tileSize);
+    const rows = Math.ceil(faceSize / tileSize);
+    const candidates = [];
+    for (const face of CUBE_FACES) {
+      for (let row = 1; row <= rows; row += 1) {
+        for (let col = 1; col <= cols; col += 1) {
+          const address = makeTileAddress(
+            face,
+            level,
+            faceSize,
+            tileSize,
+            col,
+            row
+          );
+          candidates.push({
+            address,
+            bounds: getTileBoundingBox(address)
+          });
+        }
+      }
+    }
+    return candidates;
+  });
+}
+function visibleAddresses(candidates, frustum) {
+  return candidates.filter((candidate) => frustum.intersectsBox(candidate.bounds)).map((candidate) => candidate.address);
+}
+function updateVisibilityFrustum(camera, projectionMatrix, frustum) {
+  camera.updateProjectionMatrix();
+  camera.updateMatrixWorld();
+  camera.matrixWorldInverse.copy(camera.matrixWorld).invert();
+  projectionMatrix.multiplyMatrices(
+    camera.projectionMatrix,
+    camera.matrixWorldInverse
+  );
+  frustum.setFromProjectionMatrix(projectionMatrix);
+}
+function addAddress(addressesByLevel, address) {
+  let levelAddresses = addressesByLevel.get(address.level);
+  if (!levelAddresses) {
+    levelAddresses = /* @__PURE__ */ new Map();
+    addressesByLevel.set(address.level, levelAddresses);
+  }
+  levelAddresses.set(tileKey(address), address);
+}
+function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
+  const childLeft = (child.col - 1) * child.tileSize / child.faceSize;
+  const childTop = (child.row - 1) * child.tileSize / child.faceSize;
+  const childRight = childLeft + child.width / child.faceSize;
+  const childBottom = childTop + child.height / child.faceSize;
+  const cols = Math.ceil(parentFaceSize / tileSize);
+  const rows = Math.ceil(parentFaceSize / tileSize);
+  const firstCol = Math.max(
+    1,
+    Math.floor(childLeft * parentFaceSize / tileSize) + 1
+  );
+  const lastCol = Math.min(
+    cols,
+    Math.ceil(childRight * parentFaceSize / tileSize)
+  );
+  const firstRow = Math.max(
+    1,
+    Math.floor(childTop * parentFaceSize / tileSize) + 1
+  );
+  const lastRow = Math.min(
+    rows,
+    Math.ceil(childBottom * parentFaceSize / tileSize)
+  );
+  const addresses = [];
+  for (let row = firstRow; row <= lastRow; row += 1) {
+    for (let col = firstCol; col <= lastCol; col += 1) {
+      addresses.push(
+        makeTileAddress(
+          child.face,
+          parentLevel,
+          parentFaceSize,
+          tileSize,
+          col,
+          row
+        )
+      );
+    }
+  }
+  return addresses;
+}
+function centerFacingAddress(candidates, camera) {
+  const direction = camera.getWorldDirection(new import_three7.Vector3());
+  const center = new import_three7.Vector3();
+  let bestCandidate = candidates[0];
+  let bestAlignment = -Infinity;
+  for (const candidate of candidates) {
+    candidate.bounds.getCenter(center).normalize();
+    const alignment = center.dot(direction);
+    if (alignment > bestAlignment) {
+      bestCandidate = candidate;
+      bestAlignment = alignment;
+    }
+  }
+  return bestCandidate.address;
+}
+function buildLayers(targetLevel, levels, tileSize, frustum, camera, candidatesByLevel) {
+  const addressesByLevel = /* @__PURE__ */ new Map();
+  const targetCandidates = candidatesByLevel[targetLevel - 1];
+  const targetAddresses = visibleAddresses(targetCandidates, frustum);
+  const visibleTargets = targetAddresses.length > 0 ? targetAddresses : [centerFacingAddress(targetCandidates, camera)];
+  for (const address of visibleTargets) {
+    addAddress(addressesByLevel, address);
+  }
+  let children = visibleTargets;
+  for (let parentLevel = targetLevel - 1; parentLevel >= 1; parentLevel -= 1) {
+    const parentFaceSize = levels[parentLevel - 1];
+    const parents = /* @__PURE__ */ new Map();
+    for (const child of children) {
+      for (const parent of parentAddresses(
+        child,
+        parentLevel,
+        parentFaceSize,
+        tileSize
+      )) {
+        parents.set(tileKey(parent), parent);
+        addAddress(addressesByLevel, parent);
+      }
+    }
+    children = Array.from(parents.values());
+  }
+  return Array.from(addressesByLevel.entries()).sort(([firstLevel], [secondLevel]) => firstLevel - secondLevel).map(([level, addresses]) => ({
+    level,
+    addresses: Array.from(addresses.values()),
+    renderOrder: -100 + level * 10
+  }));
+}
+function layerToken(layers) {
+  return layers.map(
+    (layer) => `${layer.level}:${layer.addresses.map(tileKey).join(",")}`
+  ).join("|");
+}
+function Tile({
+  baseUrl,
+  multires,
+  previewUrl,
+  urlTemplate,
+  resolveTileUrl,
+  maxTextureMemoryMb = 128,
+  maxConcurrentLoads = 8,
+  retryCount = 1,
+  loadMode = "full",
+  visible = true,
+  onReady,
+  onPreviewError,
+  onLoadProgress,
+  onTileError,
+  onLevelChange
+}) {
+  const { camera, gl, size } = (0, import_fiber6.useThree)();
+  const multiresConfig = (0, import_react7.useMemo)(() => parseMultires(multires), [multires]);
+  const { levels, tileSize } = multiresConfig;
+  const multiresToken = `${tileSize}:${levels.join(",")}`;
+  const candidatesByLevel = (0, import_react7.useMemo)(
+    () => buildTileCandidates(levels, tileSize),
+    [levels, tileSize]
+  );
+  const anisotropy = gl.capabilities.getMaxAnisotropy();
+  const effectivePreviewUrl = previewUrl === void 0 ? `${baseUrl.replace(/\/$/, "")}/previews/cube-vertical.webp` : previewUrl;
+  const previewTexture = usePreviewTexture(
+    effectivePreviewUrl,
+    anisotropy,
+    onPreviewError
+  );
+  const sharedManager = useSharedTileTextureManager();
+  const progressRef = (0, import_react7.useRef)(onLoadProgress);
+  const errorRef = (0, import_react7.useRef)(onTileError);
+  const levelChangeRef = (0, import_react7.useRef)(onLevelChange);
+  progressRef.current = onLoadProgress;
+  errorRef.current = onTileError;
+  levelChangeRef.current = onLevelChange;
+  const ownedManager = (0, import_react7.useMemo)(
+    () => new TileTextureManager({
+      anisotropy,
+      maxBytes: Math.max(1, maxTextureMemoryMb) * 1024 * 1024,
+      concurrency: Math.max(1, Math.floor(maxConcurrentLoads)),
+      retryCount: Math.max(0, Math.floor(retryCount)),
+      onProgress: (progress) => progressRef.current?.(progress),
+      onError: (event) => errorRef.current?.(event)
+    }),
+    [
+      anisotropy,
+      baseUrl,
+      maxConcurrentLoads,
+      maxTextureMemoryMb,
+      multiresToken,
+      retryCount,
+      resolveTileUrl,
+      urlTemplate
+    ]
+  );
+  const manager = sharedManager ?? ownedManager;
+  (0, import_react7.useEffect)(() => {
+    manager.resume();
+    return () => {
+      if (manager === ownedManager) {
+        manager.dispose();
+        return;
+      }
+      queueMicrotask(() => manager.releaseUnused());
+    };
+  }, [manager, ownedManager]);
+  const readyRef = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
+    readyRef.current = false;
+  }, [effectivePreviewUrl]);
+  (0, import_react7.useEffect)(() => {
+    if (!previewTexture || readyRef.current) {
+      return;
+    }
+    readyRef.current = true;
+    onReady?.();
+  }, [onReady, previewTexture]);
+  const template = urlTemplate ?? buildDefaultTileUrlTemplate();
+  const resolveUrl = (0, import_react7.useMemo)(
+    () => (address) => {
+      const relativePath = resolveTileUrl ? resolveTileUrl(address) : resolveTemplateUrl(template, address);
+      return resolveRelativeTileUrl(baseUrl, relativePath);
+    },
+    [baseUrl, resolveTileUrl, template]
+  );
+  const [layers, setLayers] = (0, import_react7.useState)([]);
+  const layerTokenRef = (0, import_react7.useRef)("");
+  const currentLevelRef = (0, import_react7.useRef)(1);
+  const lastUpdateAtRef = (0, import_react7.useRef)(-Infinity);
+  const visibilityDirtyRef = (0, import_react7.useRef)(true);
+  const lastVisibilityQuaternionRef = (0, import_react7.useRef)(camera.quaternion.clone());
+  const lastVisibilityFovRef = (0, import_react7.useRef)(Number.NaN);
+  const lastViewportRef = (0, import_react7.useRef)({ width: 0, height: 0, dpr: 0 });
+  const frustumRef = (0, import_react7.useRef)(new import_three7.Frustum());
+  const projectionMatrixRef = (0, import_react7.useRef)(new import_three7.Matrix4());
+  const visibilityCameraRef = (0, import_react7.useRef)(new import_three7.PerspectiveCamera());
+  (0, import_react7.useEffect)(() => {
+    currentLevelRef.current = 1;
+    layerTokenRef.current = "";
+    visibilityDirtyRef.current = true;
+    setLayers([]);
+  }, [manager, multiresToken]);
+  (0, import_react7.useEffect)(() => {
+    if (loadMode !== "preview") {
+      return;
+    }
+    layerTokenRef.current = "";
+    setLayers([]);
+  }, [loadMode]);
+  const commitLayers = (nextLayers) => {
+    const nextToken = layerToken(nextLayers);
+    if (nextToken !== layerTokenRef.current) {
+      layerTokenRef.current = nextToken;
+      setLayers(nextLayers);
+    }
+  };
+  (0, import_fiber6.useFrame)(() => {
+    if (loadMode === "preview") {
+      return;
+    }
+    if (!(camera instanceof import_three7.PerspectiveCamera)) {
+      return;
+    }
+    const now = performance.now();
+    const pixelRatio = gl.getPixelRatio();
+    const rotationDelta = lastVisibilityQuaternionRef.current.angleTo(
+      camera.quaternion
+    );
+    const fovDelta = Number.isFinite(lastVisibilityFovRef.current) ? Math.abs(camera.fov - lastVisibilityFovRef.current) : Infinity;
+    const lastViewport = lastViewportRef.current;
+    const viewportChanged = lastViewport.width !== size.width || lastViewport.height !== size.height || lastViewport.dpr !== pixelRatio;
+    const viewChanged = visibilityDirtyRef.current || viewportChanged || rotationDelta > VIEW_CHANGE_EPSILON || fovDelta > VIEW_CHANGE_EPSILON;
+    const movingQuickly = rotationDelta >= FAST_ROTATION_THRESHOLD_RADIANS || fovDelta >= FAST_FOV_THRESHOLD_DEGREES;
+    if (!viewChanged) {
+      return;
+    }
+    const needsImmediateUpdate = visibilityDirtyRef.current || viewportChanged || movingQuickly;
+    if (!needsImmediateUpdate && now - lastUpdateAtRef.current < MAX_LOD_UPDATE_INTERVAL_MS) {
+      return;
+    }
+    lastUpdateAtRef.current = now;
+    const targetLevel = loadMode === "base" ? 1 : getPreferredLevel(
+      levels,
+      size.height,
+      pixelRatio,
+      camera.fov,
+      currentLevelRef.current
+    );
+    if (targetLevel !== currentLevelRef.current) {
+      currentLevelRef.current = targetLevel;
+      levelChangeRef.current?.(targetLevel);
+    }
+    const visibilityCamera = visibilityCameraRef.current;
+    visibilityCamera.copy(camera, false);
+    visibilityCamera.fov = Math.min(
+      179,
+      camera.fov + VISIBILITY_FOV_PADDING_DEGREES
+    );
+    visibilityCamera.aspect = camera.aspect;
+    updateVisibilityFrustum(
+      visibilityCamera,
+      projectionMatrixRef.current,
+      frustumRef.current
+    );
+    const nextLayers = buildLayers(
+      targetLevel,
+      levels,
+      tileSize,
+      frustumRef.current,
+      camera,
+      candidatesByLevel
+    );
+    visibilityDirtyRef.current = false;
+    lastVisibilityQuaternionRef.current.copy(camera.quaternion);
+    lastVisibilityFovRef.current = camera.fov;
+    lastViewportRef.current = {
+      width: size.width,
+      height: size.height,
+      dpr: pixelRatio
+    };
+    commitLayers(nextLayers);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("group", { visible, children: [
+    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PreviewCube, { texture: previewTexture }) : null,
+    layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TileLayerMeshes,
+      {
+        layer,
+        manager,
+        resolveUrl
+      },
+      layer.level
+    ))
+  ] });
+}
+
+// src/panorama-scenes.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TRANSITION_DEFAULTS = {
+  none: { duration: 0, krpanoBlend: "NOBLEND" },
+  crossfade: { duration: 1, krpanoBlend: "BLEND(1.0, easeInCubic)" },
+  zoom: { duration: 2, krpanoBlend: "ZOOMBLEND(2.0, 2.0, easeInOutSine)" },
+  blackout: { duration: 2, krpanoBlend: "COLORBLEND(2.0, 0x000000, easeOutSine)" },
+  whiteFlash: { duration: 1, krpanoBlend: "LIGHTBLEND(1.0, 0xFFFFFF, 2.0, linear)" },
+  slideRightToLeft: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 0.0, 0.2, linear)" },
+  slideTopToBottom: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 90.0, 0.01, linear)" },
+  slideDiagonal: { duration: 1, krpanoBlend: "SLIDEBLEND(1.0, 135.0, 0.4, linear)" },
+  circleOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, 0.0, 0.2, 0.0, linear)" },
+  verticalOpen: { duration: 0.7, krpanoBlend: "OPENBLEND(0.7, 1.0, 0.1, 0.0, linear)" },
+  horizontalOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, -1.0, 0.3, 0.0, linear)" },
+  ellipticZoomOpen: { duration: 1, krpanoBlend: "OPENBLEND(1.0, -0.5, 0.3, 0.8, linear)" }
+};
+var EFFECT_INDEX = {
+  none: 0,
+  crossfade: 1,
+  zoom: 2,
+  blackout: 3,
+  whiteFlash: 4,
+  slideRightToLeft: 5,
+  slideTopToBottom: 6,
+  slideDiagonal: 7,
+  circleOpen: 8,
+  verticalOpen: 9,
+  horizontalOpen: 10,
+  ellipticZoomOpen: 11
+};
+function resolveTransition(transition) {
+  const preset = typeof transition === "string" ? transition : transition?.preset ?? "crossfade";
+  return {
+    preset,
+    duration: Math.max(
+      0,
+      transition && typeof transition === "object" && Number.isFinite(transition.duration) ? transition.duration : TRANSITION_DEFAULTS[preset].duration
+    )
+  };
+}
+function SceneSource({
+  scene,
+  visible,
+  baseOnly,
+  onReady,
+  onError
+}) {
+  if (!scene) {
+    return null;
+  }
+  if (scene.type === "sphere") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Sphere,
+      {
+        src: scene.src,
+        yawOffset: scene.yawOffset,
+        visible,
+        onLoad: onReady,
+        onError
+      }
+    );
+  }
+  const { id: _id, type: _type, ...tileProps } = scene;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Tile,
+    {
+      ...tileProps,
+      visible,
+      loadMode: baseOnly ? "base" : "full",
+      onReady,
+      onPreviewError: onError
+    }
+  );
+}
+function SnapshotCapture({
+  requestId,
+  maxPixels,
+  onCaptured
+}) {
+  const { camera, gl, scene, size } = (0, import_fiber7.useThree)();
+  const capturedRequestRef = (0, import_react8.useRef)(0);
+  const renderTargetRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(
+    () => () => {
+      renderTargetRef.current?.dispose();
+      renderTargetRef.current = null;
+    },
+    []
+  );
+  (0, import_fiber7.useFrame)(() => {
+    if (requestId === 0 || requestId === capturedRequestRef.current) {
+      return;
+    }
+    const pixelRatio = gl.getPixelRatio();
+    const sourceWidth = Math.max(1, Math.floor(size.width * pixelRatio));
+    const sourceHeight = Math.max(1, Math.floor(size.height * pixelRatio));
+    const scale = Math.min(1, Math.sqrt(maxPixels / (sourceWidth * sourceHeight)));
+    const width = Math.max(1, Math.floor(sourceWidth * scale));
+    const height = Math.max(1, Math.floor(sourceHeight * scale));
+    const nextTarget = new import_three8.WebGLRenderTarget(width, height, {
+      depthBuffer: false,
+      stencilBuffer: false
+    });
+    nextTarget.texture.colorSpace = import_three8.LinearSRGBColorSpace;
+    nextTarget.texture.generateMipmaps = false;
+    nextTarget.texture.minFilter = import_three8.LinearFilter;
+    nextTarget.texture.magFilter = import_three8.LinearFilter;
+    const previousTarget = gl.getRenderTarget();
+    gl.setRenderTarget(nextTarget);
+    gl.clear();
+    gl.render(scene, camera);
+    gl.setRenderTarget(previousTarget);
+    capturedRequestRef.current = requestId;
+    const previous = renderTargetRef.current;
+    renderTargetRef.current = nextTarget;
+    previous?.dispose();
+    onCaptured({
+      texture: nextTarget.texture,
+      dispose: () => {
+        if (renderTargetRef.current === nextTarget) {
+          renderTargetRef.current = null;
+        }
+        nextTarget.dispose();
+      }
+    });
+  });
+  return null;
+}
+function SnapshotOverlay({
+  snapshot,
+  transition,
+  running,
+  runId,
+  onFinish
+}) {
+  const { camera, size } = (0, import_fiber7.useThree)();
+  const meshRef = (0, import_react8.useRef)(null);
+  const startRef = (0, import_react8.useRef)(null);
+  const finishedRef = (0, import_react8.useRef)(false);
+  const directionRef = (0, import_react8.useRef)(new import_three8.Vector3());
+  const material = (0, import_react8.useMemo)(
+    () => new import_three8.ShaderMaterial({
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+      side: import_three8.DoubleSide,
+      uniforms: {
+        map: { value: snapshot.texture },
+        progress: { value: 0 },
+        effect: { value: EFFECT_INDEX[transition.preset] }
+      },
+      vertexShader: `
+          varying vec2 vUv;
+          void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }
+        `,
+      fragmentShader: `
+          uniform sampler2D map;
+          uniform float progress;
+          uniform float effect;
+          varying vec2 vUv;
+
+          float easeInCubic(float t) { return t * t * t; }
+          float easeOutSine(float t) { return sin(t * 1.57079632679); }
+          float easeInOutSine(float t) { return -(cos(3.14159265359 * t) - 1.0) * 0.5; }
+
+          void main() {
+            float t = clamp(progress, 0.0, 1.0);
+            vec2 uv = vUv;
+            vec4 old = texture2D(map, uv);
+            float alpha = 1.0;
+
+            if (effect == 1.0) {
+              alpha = 1.0 - easeInCubic(t);
+            } else if (effect == 2.0) {
+              float eased = easeInOutSine(t);
+              // ZOOMBLEND(2.0, 2.0, easeInOutSine): reach 2x zoom.
+              uv = 0.5 + (vUv - 0.5) / mix(1.0, 2.0, eased);
+              old = texture2D(map, uv);
+              alpha = 1.0 - eased;
+            } else if (effect == 3.0) {
+              // COLORBLEND(2.0, 0x000000, easeOutSine).
+              float blackout = easeOutSine(min(1.0, t * 2.0));
+              float reveal = easeOutSine(max(0.0, (t - 0.5) * 2.0));
+              old.rgb = mix(old.rgb, vec3(0.0), blackout);
+              alpha = 1.0 - reveal;
+            } else if (effect == 4.0) {
+              // LIGHTBLEND(1.0, 0xFFFFFF, 2.0, linear).
+              float flash = min(1.0, 2.0 * sin(t * 3.14159265359));
+              old.rgb = mix(old.rgb, vec3(1.0), flash);
+              alpha = 1.0 - t;
+            } else if (effect >= 5.0 && effect <= 7.0) {
+              vec2 direction = effect == 5.0 ? vec2(1.0, 0.0) : (effect == 6.0 ? vec2(0.0, 1.0) : normalize(vec2(-1.0, 1.0)));
+              float coordinate = dot(vUv - 0.5, direction) + 0.5;
+              float softness = effect == 5.0 ? 0.2 : (effect == 6.0 ? 0.01 : 0.4);
+              alpha = smoothstep(t - softness, t + softness, coordinate);
+            } else if (effect >= 8.0) {
+              vec2 point = vUv - 0.5;
+              vec2 scale = effect == 9.0 ? vec2(4.0, 1.0) : (effect == 10.0 ? vec2(1.0, 4.0) : vec2(1.35, 0.8));
+              float distanceFromCenter = length(point * scale);
+              float edge = effect == 8.0 ? 0.2 : (effect == 9.0 ? 0.1 : 0.3);
+              float radius = t * (effect == 9.0 ? 1.1 : 1.45);
+              alpha = smoothstep(radius, radius + edge, distanceFromCenter);
+              if (effect == 11.0) {
+                // OPENBLEND(1.0, -0.5, 0.3, 0.8, linear).
+                old = texture2D(map, 0.5 + point / (1.0 + 0.8 * t));
+              }
+            }
+            gl_FragColor = vec4(old.rgb, old.a * alpha);
+            // The snapshot is linear. Encode it for the drawing buffer so it
+            // matches the newly rendered panorama beneath this overlay.
+            #include <colorspace_fragment>
+          }
+        `
+    }),
+    [snapshot.texture, transition.preset]
+  );
+  (0, import_react8.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react8.useEffect)(() => {
+    startRef.current = null;
+    finishedRef.current = false;
+    material.uniforms.progress.value = 0;
+  }, [material, runId]);
+  (0, import_fiber7.useFrame)((state) => {
+    const mesh = meshRef.current;
+    if (!mesh || !camera.isPerspectiveCamera) {
+      return;
+    }
+    const perspectiveCamera = camera;
+    const distance = Math.max(perspectiveCamera.near * 1.1, 0.11);
+    camera.getWorldDirection(directionRef.current);
+    mesh.position.copy(camera.position).addScaledVector(directionRef.current, distance);
+    mesh.quaternion.copy(camera.quaternion);
+    const height = 2 * distance * Math.tan(perspectiveCamera.fov * Math.PI / 360);
+    mesh.scale.set(height * perspectiveCamera.aspect, height, 1);
+    if (!running || finishedRef.current) {
+      return;
+    }
+    if (startRef.current === null) {
+      startRef.current = state.clock.elapsedTime;
+    }
+    const progress = transition.duration === 0 ? 1 : Math.min(1, (state.clock.elapsedTime - startRef.current) / transition.duration);
+    material.uniforms.progress.value = progress;
+    if (progress === 1) {
+      finishedRef.current = true;
+      onFinish();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("mesh", { ref: meshRef, renderOrder: 1e4, frustumCulled: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("primitive", { attach: "material", object: material })
+  ] });
+}
+var FULLSCREEN_PLANE = new import_three8.PlaneGeometry(1, 1);
+function PanoramaScenesController({
+  scenes,
+  activeSceneId,
+  transition: transitionInput,
+  renderHotspots,
+  onTransitionEnd,
+  onTransitionError,
+  snapshotMaxPixels = 3686400
+}) {
+  const controlsRef = (0, import_react8.useContext)(PanoramaControlsContext);
+  const manager = useSharedTileTextureManager();
+  const transition = (0, import_react8.useMemo)(
+    () => resolveTransition(transitionInput),
+    [transitionInput]
+  );
+  const sceneMap = (0, import_react8.useMemo)(
+    () => new Map(scenes.map((scene) => [scene.id, scene])),
+    [scenes]
+  );
+  const initialScene = sceneMap.get(activeSceneId) ?? null;
+  const [slots, setSlots] = (0, import_react8.useState)([
+    initialScene,
+    null
+  ]);
+  const [activeSlot, setActiveSlot] = (0, import_react8.useState)(0);
+  const [liveSlot, setLiveSlot] = (0, import_react8.useState)(0);
+  const [pendingSlot, setPendingSlot] = (0, import_react8.useState)(null);
+  const [phase, setPhase] = (0, import_react8.useState)(initialScene ? "idle" : "preloading");
+  const [captureRequestId, setCaptureRequestId] = (0, import_react8.useState)(0);
+  const [transitionRunId, setTransitionRunId] = (0, import_react8.useState)(0);
+  const [snapshot, setSnapshot] = (0, import_react8.useState)(null);
+  const [recoveryKey, setRecoveryKey] = (0, import_react8.useState)(0);
+  const requestedSceneIdRef = (0, import_react8.useRef)(activeSceneId);
+  const captureReasonRef = (0, import_react8.useRef)("start");
+  const interactionReleaseRef = (0, import_react8.useRef)(null);
+  const slotsRef = (0, import_react8.useRef)(slots);
+  const phaseRef = (0, import_react8.useRef)(phase);
+  const liveSlotRef = (0, import_react8.useRef)(liveSlot);
+  const transitionFromRef = (0, import_react8.useRef)(initialScene);
+  slotsRef.current = slots;
+  phaseRef.current = phase;
+  liveSlotRef.current = liveSlot;
+  const releaseInteraction = (0, import_react8.useCallback)(() => {
+    interactionReleaseRef.current?.();
+    interactionReleaseRef.current = null;
+  }, []);
+  const reportError = (0, import_react8.useCallback)((sceneId, error) => {
+    onTransitionError?.({ sceneId, error });
+  }, [onTransitionError]);
+  const startPreload = (0, import_react8.useCallback)((scene) => {
+    const nextSlot = 1 - liveSlotRef.current;
+    requestedSceneIdRef.current = scene.id;
+    setSlots((current) => {
+      const next = [...current];
+      next[nextSlot] = scene;
+      return next;
+    });
+    setPendingSlot(nextSlot);
+    setPhase("preloading");
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    const requested = sceneMap.get(activeSceneId);
+    if (!requested) {
+      reportError(activeSceneId, new Error(`Unknown panorama scene: ${activeSceneId}`));
+      return;
+    }
+    const liveScene = slotsRef.current[liveSlotRef.current];
+    if (phaseRef.current === "idle" && liveScene?.id === requested.id) {
+      requestedSceneIdRef.current = requested.id;
+      return;
+    }
+    if (phaseRef.current === "preloading" && pendingSlot !== null && slotsRef.current[pendingSlot]?.id === requested.id) {
+      requestedSceneIdRef.current = requested.id;
+      return;
+    }
+    if (phaseRef.current === "transitioning" || phaseRef.current === "capturing") {
+      requestedSceneIdRef.current = requested.id;
+      captureReasonRef.current = "interrupt";
+      setPhase("recapturing");
+      setCaptureRequestId((current) => current + 1);
+      return;
+    }
+    startPreload(requested);
+  }, [activeSceneId, pendingSlot, reportError, sceneMap, startPreload]);
+  const handleReady = (0, import_react8.useCallback)((slot) => {
+    if (slot !== pendingSlot || phaseRef.current !== "preloading") {
+      return;
+    }
+    if (transition.preset === "none") {
+      const previousScene = slotsRef.current[liveSlotRef.current];
+      const nextScene = slotsRef.current[slot];
+      setSlots((current) => {
+        const next = [...current];
+        next[liveSlotRef.current] = null;
+        return next;
+      });
+      setLiveSlot(slot);
+      setActiveSlot(slot);
+      setPendingSlot(null);
+      setPhase("idle");
+      if (previousScene && nextScene) {
+        onTransitionEnd?.({
+          previousSceneId: previousScene.id,
+          sceneId: nextScene.id,
+          preset: "none"
+        });
+      }
+      return;
+    }
+    interactionReleaseRef.current ?? (interactionReleaseRef.current = controlsRef?.current?.acquireInteractionLock() ?? null);
+    transitionFromRef.current = slotsRef.current[liveSlotRef.current];
+    captureReasonRef.current = "start";
+    setPhase("capturing");
+    setCaptureRequestId((current) => current + 1);
+  }, [controlsRef, onTransitionEnd, pendingSlot, transition.preset]);
+  const handleCaptured = (0, import_react8.useCallback)((nextSnapshot) => {
+    setSnapshot((current) => {
+      current?.dispose();
+      return nextSnapshot;
+    });
+    if (captureReasonRef.current === "interrupt") {
+      startPreload(sceneMap.get(requestedSceneIdRef.current));
+      return;
+    }
+    const sourceSlot = liveSlotRef.current;
+    setSlots((current) => {
+      const next = [...current];
+      next[sourceSlot] = null;
+      return next;
+    });
+    manager?.releaseUnused();
+    if (pendingSlot !== null) {
+      setLiveSlot(pendingSlot);
+    }
+    setPhase("transitioning");
+    setTransitionRunId((current) => current + 1);
+  }, [manager, pendingSlot, sceneMap, startPreload]);
+  const finishTransition = (0, import_react8.useCallback)(() => {
+    const nextSlot = pendingSlot;
+    const previousScene = transitionFromRef.current;
+    const nextScene = nextSlot === null ? null : slotsRef.current[nextSlot];
+    if (nextSlot === null || !nextScene) {
+      releaseInteraction();
+      setPhase("idle");
+      return;
+    }
+    setActiveSlot(nextSlot);
+    setLiveSlot(nextSlot);
+    setPendingSlot(null);
+    setPhase("idle");
+    const oldSnapshot = snapshot;
+    setSnapshot(null);
+    oldSnapshot?.dispose();
+    releaseInteraction();
+    if (previousScene) {
+      onTransitionEnd?.({
+        previousSceneId: previousScene.id,
+        sceneId: nextScene.id,
+        preset: transition.preset
+      });
+    }
+  }, [onTransitionEnd, pendingSlot, releaseInteraction, snapshot, transition.preset]);
+  (0, import_react8.useEffect)(() => () => {
+    releaseInteraction();
+    snapshot?.dispose();
+  }, [releaseInteraction, snapshot]);
+  const { gl } = (0, import_fiber7.useThree)();
+  (0, import_react8.useEffect)(() => {
+    const canvas = gl.domElement;
+    const onContextLost = (event) => {
+      event.preventDefault();
+      releaseInteraction();
+      manager?.dispose();
+      snapshot?.dispose();
+      setSnapshot(null);
+      setPendingSlot(null);
+      setPhase("idle");
+    };
+    const onContextRestored = () => {
+      manager?.resume();
+      setRecoveryKey((current) => current + 1);
+    };
+    canvas.addEventListener("webglcontextlost", onContextLost);
+    canvas.addEventListener("webglcontextrestored", onContextRestored);
+    return () => {
+      canvas.removeEventListener("webglcontextlost", onContextLost);
+      canvas.removeEventListener("webglcontextrestored", onContextRestored);
+    };
+  }, [gl, manager, releaseInteraction, snapshot]);
+  const renderedScene = slots[liveSlot];
+  const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      SnapshotCapture,
+      {
+        requestId: captureRequestId,
+        maxPixels: Math.max(1, snapshotMaxPixels),
+        onCaptured: handleCaptured
+      }
+    ),
+    [0, 1].map((slot) => {
+      const source = slots[slot];
+      const isLive = slot === liveSlot;
+      const isPending = slot === pendingSlot;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        SceneSource,
+        {
+          scene: source,
+          visible: isLive,
+          baseOnly: isPending && phase !== "idle",
+          onReady: () => handleReady(slot),
+          onError: (error) => {
+            if (source) {
+              reportError(source.id, error);
+            }
+          }
+        },
+        `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
+      );
+    }),
+    snapshotVisible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      SnapshotOverlay,
+      {
+        snapshot,
+        transition,
+        running: phase === "transitioning",
+        runId: transitionRunId,
+        onFinish: finishTransition
+      }
+    ) : null,
+    phase === "idle" && renderedScene ? renderHotspots?.(renderedScene) : null
+  ] });
+}
+function PanoramaScenes({
+  maxTextureMemoryMb,
+  maxConcurrentTileLoads,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    TileTextureManagerProvider,
+    {
+      maxTextureMemoryMb,
+      maxConcurrentLoads: maxConcurrentTileLoads,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PanoramaScenesController, { ...props })
+    }
+  );
+}
+
+// src/hotspot/image-hotspot.tsx
+var import_fiber9 = require("@react-three/fiber");
+var import_react10 = require("react");
+var import_three10 = require("three");
+
+// src/hotspot/hotspot-anchor.tsx
+var import_fiber8 = require("@react-three/fiber");
+var import_react9 = require("react");
+var import_three9 = require("three");
+var import_jsx_runtime8 = 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" }
+};
+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 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),
+    MIN_ANGULAR_SIZE,
+    MAX_ANGULAR_SIZE
+  );
+  const safeHeight = import_three9.MathUtils.clamp(
+    Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
+    MIN_ANGULAR_SIZE,
+    MAX_ANGULAR_SIZE
+  );
+  const cornerFactor = Math.hypot(
+    1,
+    Math.tan(import_three9.MathUtils.degToRad(safeWidth) / 2),
+    Math.tan(import_three9.MathUtils.degToRad(safeHeight) / 2)
+  );
+  return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
+}
+function fixedScaleFactor(cameraFov, referenceFov) {
+  const safeReferenceFov = import_three9.MathUtils.clamp(referenceFov, 1, 179);
+  return Math.tan(import_three9.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three9.MathUtils.degToRad(safeReferenceFov) / 2);
+}
+function createSurfaceQuaternion(position) {
+  const outward = panoPositionToVector3(position).normalize();
+  const inward = outward.clone().negate();
+  const pitch = import_three9.MathUtils.degToRad(position.pitch);
+  const yaw = import_three9.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three9.Vector3(
+    -Math.sin(pitch) * Math.sin(yaw),
+    Math.cos(pitch),
+    Math.sin(pitch) * Math.cos(yaw)
+  ).normalize();
+  const localRight = localUp.clone().cross(inward).normalize();
+  const basis = new import_three9.Matrix4().makeBasis(localRight, localUp, inward);
+  return new import_three9.Quaternion().setFromRotationMatrix(basis);
+}
+function makeInteractionEvent(id, position, event) {
+  return {
+    id,
+    position: normalizePanoPosition(position),
+    source: "pointer",
+    nativeEvent: event.nativeEvent
+  };
+}
+function angularDistance(a, b) {
+  const aVector = panoPositionToVector3(a);
+  const bVector = panoPositionToVector3(b);
+  return import_three9.MathUtils.radToDeg(aVector.angleTo(bVector));
+}
+function HotspotAnchor({
+  id,
+  position,
+  width,
+  height,
+  useAngularScale = true,
+  focusContent,
+  mode = "billboard",
+  distance,
+  internalOrientation,
+  internalPlacement,
+  scaleMode = "fov",
+  referenceFov = DEFAULT_REFERENCE_FOV,
+  rotation = 0,
+  renderOrder = 0,
+  visible = true,
+  draggable = false,
+  interactive = true,
+  ariaLabel,
+  children,
+  onClick,
+  onHoverChange,
+  onDragStart,
+  onPositionChange,
+  onDragEnd
+}) {
+  const controlsRef = (0, import_react9.useContext)(PanoramaControlsContext);
+  const groupRef = (0, import_react9.useRef)(null);
+  const dragStateRef = (0, import_react9.useRef)(null);
+  const suppressNextClickRef = (0, import_react9.useRef)(false);
+  const normalizedPosition = normalizePanoPosition(position);
+  const rendering = internalOrientation && internalPlacement ? { orientation: internalOrientation, placement: internalPlacement } : HOTSPOT_MODE_RENDERING[mode];
+  const { orientation: orientation2, placement } = rendering;
+  const resolvedDistance = resolveDistance(placement, distance, width, height);
+  const worldPosition = (0, import_react9.useMemo)(
+    () => panoPositionToVector3(normalizedPosition, resolvedDistance),
+    [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
+  );
+  const surfaceQuaternion3 = (0, import_react9.useMemo)(
+    () => createSurfaceQuaternion(normalizedPosition),
+    [normalizedPosition.pitch, normalizedPosition.yaw]
+  );
+  const worldWidth = angularSizeToWorldSize(width, resolvedDistance);
+  const worldHeight = angularSizeToWorldSize(height, resolvedDistance);
+  const focusGeometry = (0, import_react9.useMemo)(() => {
+    const planeGeometry = new import_three9.PlaneGeometry(1, 1);
+    const geometry = new import_three9.EdgesGeometry(planeGeometry);
+    planeGeometry.dispose();
+    return geometry;
+  }, []);
+  const focused = useHotspotAccessibility({
+    id,
+    ariaLabel,
+    onActivate: visible && interactive && onClick ? (event) => {
+      onClick({
+        id,
+        position: normalizedPosition,
+        source: "keyboard",
+        nativeEvent: event
+      });
+    } : void 0
+  });
+  (0, import_react9.useEffect)(
+    () => () => {
+      dragStateRef.current?.releaseInteractionLock();
+      dragStateRef.current = null;
+    },
+    []
+  );
+  (0, import_react9.useEffect)(() => () => focusGeometry.dispose(), [focusGeometry]);
+  (0, import_fiber8.useFrame)(({ camera }) => {
+    if (!groupRef.current) {
+      return;
+    }
+    if (orientation2 === "billboard") {
+      groupRef.current.quaternion.copy(camera.quaternion);
+    } else {
+      groupRef.current.quaternion.copy(surfaceQuaternion3);
+    }
+    groupRef.current.rotateOnAxis(
+      LOCAL_FORWARD,
+      import_three9.MathUtils.degToRad(rotation)
+    );
+    const scaleFactor = scaleMode === "fixed" && camera instanceof import_three9.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+    groupRef.current.scale.set(
+      (useAngularScale ? worldWidth : 1) * scaleFactor,
+      (useAngularScale ? worldHeight : 1) * scaleFactor,
+      1
+    );
+  });
+  const stopPointerEvent = (event) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation?.();
+  };
+  const releasePointer = (event, emitDragEnd) => {
+    const dragState = dragStateRef.current;
+    if (!dragState || dragState.pointerId !== event.pointerId) {
+      return;
+    }
+    stopPointerEvent(event);
+    const target = event.target;
+    if (target.hasPointerCapture?.(event.pointerId)) {
+      target.releasePointerCapture?.(event.pointerId);
+    }
+    const nextPosition = vector3ToPanoPosition(event.ray.direction);
+    if (emitDragEnd) {
+      onDragEnd?.({
+        ...makeInteractionEvent(id, nextPosition, event),
+        source: "pointer",
+        startPosition: dragState.startPosition
+      });
+    }
+    suppressNextClickRef.current = dragState.moved;
+    dragState.releaseInteractionLock();
+    dragStateRef.current = null;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "group",
+    {
+      ref: groupRef,
+      position: worldPosition,
+      renderOrder,
+      scale: [worldWidth, worldHeight, 1],
+      visible,
+      onClick: interactive ? (event) => {
+        stopPointerEvent(event);
+        if (!suppressNextClickRef.current) {
+          onClick?.(makeInteractionEvent(id, normalizedPosition, event));
+        }
+        suppressNextClickRef.current = false;
+      } : void 0,
+      onLostPointerCapture: interactive ? (event) => releasePointer(event, false) : void 0,
+      onPointerCancel: interactive ? (event) => releasePointer(event, false) : void 0,
+      onPointerDown: interactive ? (event) => {
+        stopPointerEvent(event);
+        if (!draggable || dragStateRef.current) {
+          return;
+        }
+        const releaseInteractionLock = controlsRef?.current?.acquireInteractionLock() ?? (() => void 0);
+        const target = event.target;
+        target.setPointerCapture?.(event.pointerId);
+        const startPosition = { ...normalizedPosition };
+        dragStateRef.current = {
+          pointerId: event.pointerId,
+          startPosition,
+          releaseInteractionLock,
+          moved: false
+        };
+        onDragStart?.({
+          ...makeInteractionEvent(id, startPosition, event),
+          source: "pointer",
+          startPosition
+        });
+      } : void 0,
+      onPointerMove: interactive ? (event) => {
+        const dragState = dragStateRef.current;
+        if (!dragState || dragState.pointerId !== event.pointerId) {
+          return;
+        }
+        stopPointerEvent(event);
+        const nextPosition = vector3ToPanoPosition(event.ray.direction);
+        dragState.moved || (dragState.moved = angularDistance(dragState.startPosition, nextPosition) > DRAG_EPSILON_DEGREES);
+        onPositionChange?.({
+          ...makeInteractionEvent(id, nextPosition, event),
+          source: "pointer",
+          startPosition: dragState.startPosition
+        });
+      } : void 0,
+      onPointerOut: interactive ? (event) => {
+        if (!dragStateRef.current) {
+          onHoverChange?.(
+            false,
+            makeInteractionEvent(id, normalizedPosition, event)
+          );
+        }
+      } : void 0,
+      onPointerOver: interactive ? (event) => {
+        if (!dragStateRef.current) {
+          onHoverChange?.(
+            true,
+            makeInteractionEvent(id, normalizedPosition, event)
+          );
+        }
+      } : void 0,
+      onPointerUp: interactive ? (event) => releasePointer(event, true) : void 0,
+      children: [
+        focused ? focusContent ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "lineSegments",
+          {
+            geometry: focusGeometry,
+            position: [0, 0, 0.01],
+            renderOrder: renderOrder + 1,
+            scale: [1.12, 1.12, 1],
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/hotspot/image-hotspot.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function clampOpacity(opacity) {
+  if (!Number.isFinite(opacity)) {
+    return 1;
+  }
+  return Math.max(0, Math.min(opacity, 1));
+}
+function useHotspotImageTexture(src, onLoad, onError) {
+  const gl = (0, import_fiber9.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react10.useState)(null);
+  const onLoadRef = (0, import_react10.useRef)(onLoad);
+  const onErrorRef = (0, import_react10.useRef)(onError);
+  onLoadRef.current = onLoad;
+  onErrorRef.current = onError;
+  (0, import_react10.useEffect)(() => {
+    let active = true;
+    setTexture(null);
+    if (!src) {
+      return () => {
+        active = false;
+      };
+    }
+    const loader = new import_three10.TextureLoader();
+    loader.load(
+      src,
+      (loadedTexture) => {
+        if (!active) {
+          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.generateMipmaps = true;
+        loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
+        loadedTexture.needsUpdate = true;
+        setTexture(loadedTexture);
+        onLoadRef.current?.(loadedTexture);
+      },
+      void 0,
+      (error) => {
+        if (active) {
+          onErrorRef.current?.(error);
+        }
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [gl, src]);
+  (0, import_react10.useEffect)(
+    () => () => {
+      texture?.dispose();
+    },
+    [texture]
+  );
+  return texture;
+}
+function ImageHotspot({
+  src,
+  width = 12,
+  height = 8,
+  opacity,
+  onLoad,
+  onError,
+  ...anchorProps
+}) {
+  const texture = useHotspotImageTexture(src, onLoad, onError);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        opacity: texture ? clampOpacity(opacity) : 0,
+        side: import_three10.DoubleSide,
+        toneMapped: false,
+        transparent: true
+      }
+    )
+  ] }) });
+}
+
+// src/hotspot/polygon-hotspot.tsx
+var import_fiber10 = require("@react-three/fiber");
+var import_react11 = 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_runtime10 = require("react/jsx-runtime");
+var POLYGON_RADIUS = 990;
+var MAX_FILL_SEGMENT_DEGREES = 7;
+function cloneVertices(vertices) {
+  return vertices.map((vertex) => normalizePanoPosition(vertex));
+}
+function unwrapPolygonVertices(vertices) {
+  const unwrapped = [];
+  for (const vertex of vertices) {
+    const normalized = normalizePanoPosition(vertex);
+    const previous = unwrapped[unwrapped.length - 1];
+    if (!previous) {
+      unwrapped.push({ ...normalized, unwrappedYaw: normalized.yaw });
+      continue;
+    }
+    const previousYaw = previous.unwrappedYaw;
+    let yaw = normalized.yaw;
+    while (yaw - previousYaw > 180) yaw -= 360;
+    while (yaw - previousYaw <= -180) yaw += 360;
+    unwrapped.push({ ...normalized, unwrappedYaw: yaw });
+  }
+  return unwrapped;
+}
+function orientation(a, b, c) {
+  return (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+}
+function intersects(a, b, c, d) {
+  const abC = orientation(a, b, c);
+  const abD = orientation(a, b, d);
+  const cdA = orientation(c, d, a);
+  const cdB = orientation(c, d, b);
+  return Math.sign(abC) !== Math.sign(abD) && Math.sign(cdA) !== Math.sign(cdB);
+}
+function hasSelfIntersection(vertices) {
+  const points = vertices.map(
+    (vertex) => new import_three11.Vector2(vertex.unwrappedYaw, vertex.pitch)
+  );
+  for (let index = 0; index < points.length; index += 1) {
+    const nextIndex = (index + 1) % points.length;
+    for (let other = index + 1; other < points.length; other += 1) {
+      const otherNext = (other + 1) % points.length;
+      if (index === other || nextIndex === other || otherNext === index || index === 0 && otherNext === 0) {
+        continue;
+      }
+      if (intersects(points[index], points[nextIndex], points[other], points[otherNext])) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function polygonContainsDirection(vertices, direction) {
+  let winding = 0;
+  for (let index = 0; index < vertices.length; index += 1) {
+    const a = panoPositionToVector3(vertices[index]).normalize();
+    const b = panoPositionToVector3(vertices[(index + 1) % vertices.length]).normalize();
+    const projectedA = a.clone().addScaledVector(direction, -a.dot(direction));
+    const projectedB = b.clone().addScaledVector(direction, -b.dot(direction));
+    if (projectedA.lengthSq() < 1e-8 || projectedB.lengthSq() < 1e-8) {
+      return false;
+    }
+    projectedA.normalize();
+    projectedB.normalize();
+    winding += Math.atan2(
+      direction.dot(projectedA.clone().cross(projectedB)),
+      projectedA.dot(projectedB)
+    );
+  }
+  return Math.abs(winding) > Math.PI;
+}
+function fitsHemisphere(vertices) {
+  const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
+  const candidates = [new import_three11.Vector3()];
+  for (const direction of directions) {
+    candidates[0].add(direction);
+    candidates.push(direction.clone());
+  }
+  for (let index = 0; index < directions.length; index += 1) {
+    for (let other = index + 1; other < directions.length; other += 1) {
+      candidates.push(directions[index].clone().add(directions[other]));
+    }
+  }
+  return candidates.some(
+    (candidate) => candidate.lengthSq() > 1e-8 && directions.every((direction) => candidate.dot(direction) > 1e-6)
+  );
+}
+function validatePolygonVertices(vertices) {
+  if (vertices.length < 3) {
+    return [{ code: "too_few_vertices", message: "A polygon needs at least three vertices." }];
+  }
+  const normalized = cloneVertices(vertices);
+  const unwrapped = unwrapPolygonVertices(normalized);
+  const issues = [];
+  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))) {
+    issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
+  }
+  if (!fitsHemisphere(normalized)) {
+    issues.push({ code: "outside_hemisphere", message: "Polygons must fit within one hemisphere." });
+  }
+  return issues;
+}
+function polygonCenter(vertices) {
+  const sum = vertices.reduce(
+    (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
+    new import_three11.Vector3()
+  );
+  return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
+}
+function surfaceQuaternion(position) {
+  const outward = panoPositionToVector3(position).normalize();
+  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(
+    -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)
+  );
+}
+function makeWorldToLocal(center) {
+  return new import_three11.Matrix4().compose(
+    panoPositionToVector3(center, POLYGON_RADIUS),
+    surfaceQuaternion(center),
+    new import_three11.Vector3(1, 1, 1)
+  ).invert();
+}
+function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
+  const weightA = 1 - weightB - weightC;
+  return panoPositionToVector3(
+    {
+      yaw: a.unwrappedYaw * weightA + b.unwrappedYaw * weightB + c.unwrappedYaw * weightC,
+      pitch: a.pitch * weightA + b.pitch * weightB + c.pitch * weightC
+    },
+    radius
+  ).applyMatrix4(worldToLocal);
+}
+function polygonSubdivisionSteps(vertices) {
+  let maxAngle = 0;
+  for (let index = 0; index < vertices.length; index += 1) {
+    const start = panoPositionToVector3(vertices[index]).normalize();
+    for (let other = index + 1; other < vertices.length; other += 1) {
+      maxAngle = Math.max(
+        maxAngle,
+        start.angleTo(panoPositionToVector3(vertices[other]).normalize())
+      );
+    }
+  }
+  return Math.min(
+    8,
+    Math.max(1, Math.ceil(maxAngle * 180 / Math.PI / MAX_FILL_SEGMENT_DEGREES))
+  );
+}
+function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps) {
+  const grid = /* @__PURE__ */ new Map();
+  const pointIndex = (i, j) => {
+    const key = `${i}:${j}`;
+    const existing = grid.get(key);
+    if (existing !== void 0) return existing;
+    const point = projectedPoint(a, b, c, i / steps, j / steps, POLYGON_RADIUS, worldToLocal);
+    const index = positions.length / 3;
+    positions.push(point.x, point.y, point.z);
+    grid.set(key, index);
+    return index;
+  };
+  for (let i = 0; i <= steps; i += 1) {
+    for (let j = 0; j <= steps - i; j += 1) pointIndex(i, j);
+  }
+  for (let i = 0; i < steps; i += 1) {
+    for (let j = 0; j < steps - i; j += 1) {
+      indices.push(pointIndex(i, j), pointIndex(i + 1, j), pointIndex(i, j + 1));
+      if (i + j < steps - 1) {
+        indices.push(pointIndex(i + 1, j), pointIndex(i + 1, j + 1), pointIndex(i, j + 1));
+      }
+    }
+  }
+}
+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 positions = [];
+  const indices = [];
+  const worldToLocal = makeWorldToLocal(center);
+  const steps = polygonSubdivisionSteps(vertices);
+  for (const [a, b, c] of triangles) {
+    addSubdividedTriangle(
+      positions,
+      indices,
+      unwrapped[a],
+      unwrapped[b],
+      unwrapped[c],
+      worldToLocal,
+      steps
+    );
+  }
+  return new import_three11.BufferGeometry().setAttribute("position", new import_three11.Float32BufferAttribute(positions, 3)).setIndex(indices);
+}
+function makeStrokePositions(vertices, center) {
+  const positions = [];
+  const worldToLocal = makeWorldToLocal(center);
+  const unwrapped = unwrapPolygonVertices(vertices);
+  const steps = polygonSubdivisionSteps(vertices);
+  for (let edge = 0; edge < unwrapped.length; edge += 1) {
+    const start = unwrapped[edge];
+    const end = unwrapped[(edge + 1) % unwrapped.length];
+    for (let step = 0; step < steps; step += 1) {
+      const progress = step / steps;
+      const point = panoPositionToVector3(
+        {
+          yaw: start.unwrappedYaw + (end.unwrappedYaw - start.unwrappedYaw) * progress,
+          pitch: start.pitch + (end.pitch - start.pitch) * progress
+        },
+        POLYGON_RADIUS
+      ).applyMatrix4(worldToLocal);
+      positions.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();
+}
+function translateVertices(vertices, from, to) {
+  const yawOffset = normalizePanoYaw(to.yaw - from.yaw);
+  const pitchOffset = to.pitch - from.pitch;
+  return vertices.map((vertex) => ({
+    yaw: normalizePanoYaw(vertex.yaw + yawOffset),
+    pitch: clampPanoPitch(vertex.pitch + pitchOffset)
+  }));
+}
+function PolygonHotspot({
+  id,
+  vertices,
+  fill = "#df6b42",
+  fillOpacity = 0.34,
+  stroke = "#f5fbfc",
+  strokeWidth = 2,
+  strokeOpacity = 1,
+  interactive = true,
+  renderOrder = 10,
+  draggable = false,
+  onVerticesChange,
+  onDragStart,
+  onDragEnd,
+  onInvalid,
+  ...anchorProps
+}) {
+  const gl = (0, import_fiber10.useThree)((state) => state.gl);
+  const size = (0, import_fiber10.useThree)((state) => state.size);
+  const issues = (0, import_react11.useMemo)(() => validatePolygonVertices(vertices), [vertices]);
+  const valid = issues.length === 0;
+  const center = (0, import_react11.useMemo)(() => valid ? polygonCenter(vertices) : null, [valid, vertices]);
+  const fillGeometry = (0, import_react11.useMemo)(
+    () => valid && center ? makeFillGeometry(vertices, center) : null,
+    [center, valid, vertices]
+  );
+  const strokePositions = (0, import_react11.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_react11.useMemo)(
+    () => strokePositions ? makeStrokeLine(strokePositions, stroke, strokeWidth * devicePixelRatio, resolvedStrokeOpacity) : null,
+    [devicePixelRatio, resolvedStrokeOpacity, stroke, strokePositions, strokeWidth]
+  );
+  const focusStrokeLine = (0, import_react11.useMemo)(
+    () => strokePositions ? makeStrokeLine(strokePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
+    [devicePixelRatio, strokePositions, strokeWidth]
+  );
+  const startVerticesRef = (0, import_react11.useRef)(null);
+  const issuesKey = issues.map((issue) => issue.code).join(",");
+  (0, import_react11.useEffect)(() => {
+    if (!valid) onInvalid?.(issues);
+  }, [issues, issuesKey, onInvalid, valid]);
+  (0, import_react11.useEffect)(() => () => fillGeometry?.dispose(), [fillGeometry]);
+  (0, import_react11.useEffect)(() => () => disposeStrokeLine(strokeLine), [strokeLine]);
+  (0, import_react11.useEffect)(() => () => disposeStrokeLine(focusStrokeLine), [focusStrokeLine]);
+  (0, import_react11.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;
+  const emitVerticesChange = (event, callback) => {
+    const startVertices = startVerticesRef.current ?? cloneVertices(vertices);
+    const nextVertices = translateVertices(startVertices, event.startPosition, event.position);
+    callback?.({
+      id,
+      vertices: nextVertices,
+      startVertices,
+      position: event.position,
+      startPosition: event.startPosition
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    HotspotAnchor,
+    {
+      ...anchorProps,
+      id,
+      position: center,
+      width: 1,
+      height: 1,
+      internalPlacement: "floating",
+      distance: POLYGON_RADIUS,
+      internalOrientation: "surface",
+      renderOrder,
+      draggable,
+      interactive,
+      useAngularScale: false,
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("primitive", { object: focusStrokeLine, renderOrder: renderOrder + 2 }),
+      onDragStart: (event) => {
+        startVerticesRef.current = cloneVertices(vertices);
+        emitVerticesChange(event, onDragStart);
+      },
+      onPositionChange: (event) => emitVerticesChange(event, onVerticesChange),
+      onDragEnd: (event) => {
+        emitVerticesChange(event, onDragEnd);
+        startVerticesRef.current = null;
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "meshBasicMaterial",
+          {
+            color: fill,
+            depthWrite: false,
+            opacity: Math.max(0, Math.min(fillOpacity, 1)),
+            side: import_three11.DoubleSide,
+            transparent: true
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("primitive", { object: strokeLine, renderOrder: renderOrder + 1 })
+      ]
+    }
+  );
+}
+
+// src/hotspot/polyline-hotspot.tsx
+var import_fiber11 = require("@react-three/fiber");
+var import_react12 = 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_runtime11 = require("react/jsx-runtime");
+var POLYLINE_RADIUS = 990;
+var MAX_SEGMENT_DEGREES = 7;
+function cloneVertices2(vertices) {
+  return vertices.map((vertex) => normalizePanoPosition(vertex));
+}
+function unwrapVertices(vertices) {
+  const unwrapped = [];
+  for (const vertex of vertices) {
+    const normalized = normalizePanoPosition(vertex);
+    const previous = unwrapped[unwrapped.length - 1];
+    if (!previous) {
+      unwrapped.push({ ...normalized, unwrappedYaw: normalized.yaw });
+      continue;
+    }
+    let yaw = normalized.yaw;
+    while (yaw - previous.unwrappedYaw > 180) yaw -= 360;
+    while (yaw - previous.unwrappedYaw <= -180) yaw += 360;
+    unwrapped.push({ ...normalized, unwrappedYaw: yaw });
+  }
+  return unwrapped;
+}
+function polylineCenter(vertices) {
+  const sum = vertices.reduce(
+    (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
+    new import_three12.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(
+    -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)
+  );
+}
+function makeWorldToLocal2(center) {
+  return new import_three12.Matrix4().compose(
+    panoPositionToVector3(center, POLYLINE_RADIUS),
+    surfaceQuaternion2(center),
+    new import_three12.Vector3(1, 1, 1)
+  ).invert();
+}
+function subdivisionSteps(vertices) {
+  let maxAngle = 0;
+  for (let index = 0; index < vertices.length - 1; index += 1) {
+    maxAngle = Math.max(
+      maxAngle,
+      panoPositionToVector3(vertices[index]).angleTo(
+        panoPositionToVector3(vertices[index + 1])
+      )
+    );
+  }
+  return Math.min(
+    8,
+    Math.max(1, Math.ceil(import_three12.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+  );
+}
+function makeLinePositions(vertices, center) {
+  const positions = [];
+  const worldToLocal = makeWorldToLocal2(center);
+  const unwrapped = unwrapVertices(vertices);
+  const steps = subdivisionSteps(vertices);
+  for (let edge = 0; edge < unwrapped.length - 1; edge += 1) {
+    const start = unwrapped[edge];
+    const end = unwrapped[edge + 1];
+    for (let step = 0; step < steps; step += 1) {
+      const progress = step / steps;
+      const point = panoPositionToVector3(
+        {
+          yaw: start.unwrappedYaw + (end.unwrappedYaw - start.unwrappedYaw) * progress,
+          pitch: start.pitch + (end.pitch - start.pitch) * progress
+        },
+        POLYLINE_RADIUS
+      ).applyMatrix4(worldToLocal);
+      positions.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();
+}
+function translateVertices2(vertices, from, to) {
+  const yawOffset = normalizePanoYaw(to.yaw - from.yaw);
+  const pitchOffset = to.pitch - from.pitch;
+  return vertices.map((vertex) => ({
+    yaw: normalizePanoYaw(vertex.yaw + yawOffset),
+    pitch: clampPanoPitch(vertex.pitch + pitchOffset)
+  }));
+}
+function validatePolylineVertices(vertices) {
+  return vertices.length < 2 ? [{ code: "too_few_vertices", message: "A polyline needs at least two vertices." }] : [];
+}
+function PolylineHotspot({
+  id,
+  vertices,
+  stroke = "#f5fbfc",
+  strokeWidth = 2,
+  strokeOpacity = 1,
+  renderOrder = 10,
+  draggable = false,
+  onVerticesChange,
+  onDragStart,
+  onDragEnd,
+  onInvalid,
+  ...anchorProps
+}) {
+  const gl = (0, import_fiber11.useThree)((state) => state.gl);
+  const size = (0, import_fiber11.useThree)((state) => state.size);
+  const issues = (0, import_react12.useMemo)(() => validatePolylineVertices(vertices), [vertices]);
+  const valid = issues.length === 0;
+  const center = (0, import_react12.useMemo)(() => valid ? polylineCenter(vertices) : null, [valid, vertices]);
+  const linePositions = (0, import_react12.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_react12.useMemo)(
+    () => linePositions ? makeLine(linePositions, stroke, strokeWidth * devicePixelRatio, opacity) : null,
+    [devicePixelRatio, linePositions, opacity, stroke, strokeWidth]
+  );
+  const focusLine = (0, import_react12.useMemo)(
+    () => linePositions ? makeLine(linePositions, "#75cbd3", (strokeWidth + 2) * devicePixelRatio, 1) : null,
+    [devicePixelRatio, linePositions, strokeWidth]
+  );
+  const startVerticesRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    if (!valid) onInvalid?.(issues);
+  }, [issues, onInvalid, valid]);
+  (0, import_react12.useEffect)(() => () => disposeLine(line), [line]);
+  (0, import_react12.useEffect)(() => () => disposeLine(focusLine), [focusLine]);
+  (0, import_react12.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;
+  const emitVerticesChange = (event, callback) => {
+    const startVertices = startVerticesRef.current ?? cloneVertices2(vertices);
+    callback?.({
+      id,
+      vertices: translateVertices2(startVertices, event.startPosition, event.position),
+      startVertices,
+      position: event.position,
+      startPosition: event.startPosition
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    HotspotAnchor,
+    {
+      ...anchorProps,
+      id,
+      position: center,
+      width: 1,
+      height: 1,
+      internalPlacement: "floating",
+      distance: POLYLINE_RADIUS,
+      internalOrientation: "surface",
+      renderOrder,
+      draggable,
+      useAngularScale: false,
+      focusContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("primitive", { object: focusLine, renderOrder: renderOrder + 2 }),
+      onDragStart: (event) => {
+        startVerticesRef.current = cloneVertices2(vertices);
+        emitVerticesChange(event, onDragStart);
+      },
+      onPositionChange: (event) => emitVerticesChange(event, onVerticesChange),
+      onDragEnd: (event) => {
+        emitVerticesChange(event, onDragEnd);
+        startVerticesRef.current = null;
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("primitive", { object: line, renderOrder: renderOrder + 1 })
+    }
+  );
+}
+
+// src/hotspot/graphic-hotspot.tsx
+var import_react13 = require("react");
+var import_three13 = require("three");
+var import_jsx_runtime12 = 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;
+}
+function roundedRectanglePath(context, x, y, width, height, radius) {
+  const safeRadius = Math.min(Math.max(radius, 0), width / 2, height / 2);
+  context.beginPath();
+  context.moveTo(x + safeRadius, y);
+  context.arcTo(x + width, y, x + width, y + height, safeRadius);
+  context.arcTo(x + width, y + height, x, y + height, safeRadius);
+  context.arcTo(x, y + height, x, y, safeRadius);
+  context.arcTo(x, y, x + width, y, safeRadius);
+  context.closePath();
+}
+function paintPath(context, graphic, path) {
+  if (graphic.fill) {
+    context.fillStyle = graphic.fill;
+    path ? context.fill(path) : context.fill();
+  }
+  if (graphic.stroke) {
+    context.strokeStyle = graphic.stroke;
+    context.lineWidth = resolveStrokeWidth(graphic.strokeWidth);
+    path ? context.stroke(path) : context.stroke();
+  }
+}
+function drawGraphic(context, graphic) {
+  const padding = Math.max(resolveStrokeWidth(graphic.strokeWidth) / 2 + 2, 4);
+  const drawableSize = GRAPHIC_TEXTURE_SIZE - padding * 2;
+  context.clearRect(0, 0, GRAPHIC_TEXTURE_SIZE, GRAPHIC_TEXTURE_SIZE);
+  context.lineJoin = "round";
+  context.lineCap = "round";
+  if (graphic.kind === "circle") {
+    context.beginPath();
+    context.arc(
+      GRAPHIC_TEXTURE_SIZE / 2,
+      GRAPHIC_TEXTURE_SIZE / 2,
+      drawableSize / 2,
+      0,
+      Math.PI * 2
+    );
+    paintPath(context, graphic);
+    return;
+  }
+  if (graphic.kind === "rectangle") {
+    roundedRectanglePath(
+      context,
+      padding,
+      padding,
+      drawableSize,
+      drawableSize,
+      graphic.cornerRadius ?? 0
+    );
+    paintPath(context, graphic);
+    return;
+  }
+  if (graphic.kind === "ring") {
+    const center = GRAPHIC_TEXTURE_SIZE / 2;
+    const outerRadius = drawableSize / 2;
+    const innerRadius = Math.max(
+      0,
+      Math.min(outerRadius - 1, (graphic.innerRadius ?? 0.58) * outerRadius)
+    );
+    context.beginPath();
+    context.arc(center, center, outerRadius, 0, Math.PI * 2);
+    context.moveTo(center + innerRadius, center);
+    context.arc(center, center, innerRadius, 0, Math.PI * 2, true);
+    if (graphic.fill ?? graphic.stroke) {
+      context.fillStyle = graphic.fill ?? graphic.stroke ?? "#ffffff";
+      context.fill("evenodd");
+    }
+    if (graphic.stroke) {
+      context.strokeStyle = graphic.stroke;
+      context.lineWidth = resolveStrokeWidth(graphic.strokeWidth);
+      context.stroke();
+    }
+    return;
+  }
+  const [x, y, width, height] = graphic.viewBox;
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    throw new Error("SVG path viewBox must have a positive width and height.");
+  }
+  const path = new Path2D(graphic.path);
+  context.save();
+  context.translate(padding, padding);
+  context.scale(drawableSize / width, drawableSize / height);
+  context.translate(-x, -y);
+  paintPath(context, graphic, path);
+  context.restore();
+}
+function createGraphicTexture(graphic) {
+  const canvas = document.createElement("canvas");
+  canvas.width = GRAPHIC_TEXTURE_SIZE;
+  canvas.height = GRAPHIC_TEXTURE_SIZE;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Canvas 2D is unavailable for this graphic hotspot.");
+  }
+  drawGraphic(context, graphic);
+  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;
+  texture.generateMipmaps = true;
+  texture.needsUpdate = true;
+  return texture;
+}
+function useGraphicTexture(graphic, onLoad, onError) {
+  const [texture, setTexture] = (0, import_react13.useState)(null);
+  const onLoadRef = (0, import_react13.useRef)(onLoad);
+  const onErrorRef = (0, import_react13.useRef)(onError);
+  onLoadRef.current = onLoad;
+  onErrorRef.current = onError;
+  (0, import_react13.useEffect)(() => {
+    let nextTexture = null;
+    try {
+      nextTexture = createGraphicTexture(graphic);
+      setTexture(nextTexture);
+      onLoadRef.current?.(nextTexture);
+    } catch (error) {
+      setTexture(null);
+      onErrorRef.current?.(error);
+    }
+    return () => {
+      nextTexture?.dispose();
+    };
+  }, [graphic]);
+  return texture;
+}
+function CanvasGraphicHotspot({
+  graphic,
+  width = 10,
+  height = 10,
+  opacity,
+  onLoad,
+  onError,
+  ...anchorProps
+}) {
+  const texture = useGraphicTexture(graphic, onLoad, onError);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        opacity: texture ? clampOpacity2(opacity) : 0,
+        side: import_three13.DoubleSide,
+        toneMapped: false,
+        transparent: true
+      }
+    )
+  ] }) });
+}
+function GraphicHotspot(props) {
+  const { graphic, ...restProps } = props;
+  if (graphic.kind === "svg") {
+    const imageProps = restProps;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ImageHotspot, { ...imageProps, src: graphic.src });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CanvasGraphicHotspot, { ...restProps, graphic });
+}
+
+// src/hotspot/sequence-hotspot.tsx
+var import_fiber12 = require("@react-three/fiber");
+var import_react14 = require("react");
+var import_three14 = require("three");
+var import_jsx_runtime13 = 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;
+}
+function resolveFrameCount(value) {
+  return Number.isFinite(value) ? Math.max(1, Math.floor(value)) : 1;
+}
+function useSpriteTexture({
+  id,
+  src,
+  onError,
+  onLoadProgress
+}) {
+  const gl = (0, import_fiber12.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react14.useState)(null);
+  const onErrorRef = (0, import_react14.useRef)(onError);
+  const onLoadProgressRef = (0, import_react14.useRef)(onLoadProgress);
+  onErrorRef.current = onError;
+  onLoadProgressRef.current = onLoadProgress;
+  (0, import_react14.useEffect)(() => {
+    let active = true;
+    setTexture(null);
+    if (!src) {
+      onLoadProgressRef.current?.({ id, total: 1, loaded: 0, failed: 1 });
+      return () => {
+        active = false;
+      };
+    }
+    const loader = new import_three14.TextureLoader();
+    loader.load(
+      src,
+      (loadedTexture) => {
+        if (!active) {
+          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.generateMipmaps = true;
+        loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
+        loadedTexture.needsUpdate = true;
+        onLoadProgressRef.current?.({ id, total: 1, loaded: 1, failed: 0 });
+        setTexture(loadedTexture);
+      },
+      void 0,
+      (error) => {
+        if (!active) {
+          return;
+        }
+        onLoadProgressRef.current?.({ id, total: 1, loaded: 0, failed: 1 });
+        onErrorRef.current?.({ id, src, error });
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [gl, id, src]);
+  (0, import_react14.useEffect)(
+    () => () => {
+      texture?.dispose();
+    },
+    [texture]
+  );
+  return texture;
+}
+function SequenceHotspot({
+  id,
+  src,
+  frameCount: requestedFrameCount,
+  frameDirection = "vertical",
+  playing,
+  fps,
+  loop = true,
+  width = 12,
+  height = 8,
+  opacity,
+  onFrameChange,
+  onLoadProgress,
+  onPlaybackStateChange,
+  onEnded,
+  onError,
+  ...anchorProps
+}) {
+  const texture = useSpriteTexture({ id, src, onError, onLoadProgress });
+  const frameCount = resolveFrameCount(requestedFrameCount);
+  const safeFps = resolveFps(fps);
+  const [frameIndex, setFrameIndex] = (0, import_react14.useState)(0);
+  const elapsedRef = (0, import_react14.useRef)(0);
+  const frameIndexRef = (0, import_react14.useRef)(0);
+  const endedRef = (0, import_react14.useRef)(false);
+  const lastPlaybackStateRef = (0, import_react14.useRef)(null);
+  const onFrameChangeRef = (0, import_react14.useRef)(onFrameChange);
+  const onPlaybackStateChangeRef = (0, import_react14.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react14.useRef)(onEnded);
+  onFrameChangeRef.current = onFrameChange;
+  onPlaybackStateChangeRef.current = onPlaybackStateChange;
+  onEndedRef.current = onEnded;
+  (0, import_react14.useEffect)(() => {
+    elapsedRef.current = 0;
+    frameIndexRef.current = 0;
+    endedRef.current = false;
+    setFrameIndex(0);
+  }, [frameCount, frameDirection, src]);
+  (0, import_react14.useEffect)(() => {
+    if (!texture) {
+      return;
+    }
+    texture.repeat.set(
+      frameDirection === "horizontal" ? 1 / frameCount : 1,
+      frameDirection === "vertical" ? 1 / frameCount : 1
+    );
+    texture.offset.set(
+      frameDirection === "horizontal" ? frameIndex / frameCount : 0,
+      frameDirection === "vertical" ? 1 - (frameIndex + 1) / frameCount : 0
+    );
+    texture.needsUpdate = true;
+  }, [frameCount, frameDirection, frameIndex, texture]);
+  (0, import_react14.useEffect)(() => {
+    if (!texture) {
+      return;
+    }
+    onFrameChangeRef.current?.({ id, index: 0, src });
+  }, [id, src, texture]);
+  (0, import_react14.useEffect)(() => {
+    if (!texture) {
+      return;
+    }
+    if (playing && endedRef.current) {
+      elapsedRef.current = 0;
+      frameIndexRef.current = 0;
+      endedRef.current = false;
+      setFrameIndex(0);
+    }
+    if (!playing && endedRef.current) {
+      return;
+    }
+    const nextState = playing ? "playing" : "paused";
+    if (lastPlaybackStateRef.current !== nextState) {
+      lastPlaybackStateRef.current = nextState;
+      onPlaybackStateChangeRef.current?.(nextState);
+    }
+  }, [playing, texture]);
+  (0, import_fiber12.useFrame)((_, deltaSeconds) => {
+    if (!texture || !playing || endedRef.current) {
+      return;
+    }
+    elapsedRef.current += deltaSeconds;
+    const steps = Math.floor(elapsedRef.current * safeFps);
+    if (steps === 0) {
+      return;
+    }
+    elapsedRef.current -= steps / safeFps;
+    let nextIndex = frameIndexRef.current + steps;
+    if (nextIndex >= frameCount) {
+      if (loop) {
+        nextIndex %= frameCount;
+      } else {
+        nextIndex = frameCount - 1;
+        endedRef.current = true;
+        if (lastPlaybackStateRef.current !== "ended") {
+          lastPlaybackStateRef.current = "ended";
+          onPlaybackStateChangeRef.current?.("ended");
+          onEndedRef.current?.();
+        }
+      }
+    }
+    if (nextIndex !== frameIndexRef.current) {
+      frameIndexRef.current = nextIndex;
+      setFrameIndex(nextIndex);
+      onFrameChangeRef.current?.({ id, index: nextIndex, src });
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HotspotAnchor, { ...anchorProps, id, 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 ? clampOpacity3(opacity) : 0,
+        side: import_three14.DoubleSide,
+        toneMapped: false,
+        transparent: true
+      }
+    )
+  ] }) });
+}
+
+// src/hotspot/video-hotspot.tsx
+var import_fiber13 = require("@react-three/fiber");
+var import_react15 = require("react");
+var import_three15 = require("three");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function clampOpacity4(opacity) {
+  if (!Number.isFinite(opacity)) {
+    return 1;
+  }
+  return Math.max(0, Math.min(opacity, 1));
+}
+function clampVolume(volume) {
+  if (!Number.isFinite(volume)) {
+    return 1;
+  }
+  return Math.max(0, Math.min(volume, 1));
+}
+function usePosterTexture(id, poster, onError) {
+  const gl = (0, import_fiber13.useThree)((state) => state.gl);
+  const [texture, setTexture] = (0, import_react15.useState)(null);
+  const onErrorRef = (0, import_react15.useRef)(onError);
+  onErrorRef.current = onError;
+  (0, import_react15.useEffect)(() => {
+    let active = true;
+    setTexture(null);
+    if (!poster) {
+      return () => {
+        active = false;
+      };
+    }
+    const loader = new import_three15.TextureLoader();
+    loader.load(
+      poster,
+      (loadedTexture) => {
+        if (!active) {
+          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.generateMipmaps = true;
+        loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
+        loadedTexture.needsUpdate = true;
+        setTexture(loadedTexture);
+      },
+      void 0,
+      (error) => {
+        if (active) {
+          onErrorRef.current?.({ id, source: "poster", error });
+        }
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [gl, id, poster]);
+  (0, import_react15.useEffect)(
+    () => () => {
+      texture?.dispose();
+    },
+    [texture]
+  );
+  return texture;
+}
+function useVideoResource({
+  crossOrigin,
+  id,
+  onEnded,
+  onError,
+  onPlaybackStateChange,
+  playsInline,
+  poster,
+  src
+}) {
+  const [resource, setResource] = (0, import_react15.useState)(null);
+  const onEndedRef = (0, import_react15.useRef)(onEnded);
+  const onErrorRef = (0, import_react15.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react15.useRef)(onPlaybackStateChange);
+  onEndedRef.current = onEnded;
+  onErrorRef.current = onError;
+  onPlaybackStateChangeRef.current = onPlaybackStateChange;
+  (0, import_react15.useEffect)(() => {
+    if (!src) {
+      setResource(null);
+      return;
+    }
+    let active = true;
+    const video = document.createElement("video");
+    if (crossOrigin !== void 0) {
+      video.crossOrigin = crossOrigin;
+    }
+    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;
+    texture.generateMipmaps = false;
+    const notifyState = (state) => {
+      if (active) {
+        onPlaybackStateChangeRef.current?.(state);
+      }
+    };
+    const markReady = () => {
+      if (!active) {
+        return;
+      }
+      setResource(
+        (current) => current?.video === video ? { ...current, ready: true } : current
+      );
+    };
+    const reportError = () => {
+      if (active) {
+        onErrorRef.current?.({
+          id,
+          source: "video",
+          error: video.error ?? new Error(`Unable to load video source: ${src}`)
+        });
+      }
+    };
+    const handleEnded = () => {
+      notifyState("ended");
+      onEndedRef.current?.();
+    };
+    const handlePause = () => notifyState("paused");
+    const handlePlay = () => notifyState("playing");
+    video.addEventListener("canplay", markReady);
+    video.addEventListener("ended", handleEnded);
+    video.addEventListener("error", reportError);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("play", handlePlay);
+    setResource({ video, texture, ready: false });
+    video.src = src;
+    video.load();
+    return () => {
+      active = false;
+      video.removeEventListener("canplay", markReady);
+      video.removeEventListener("ended", handleEnded);
+      video.removeEventListener("error", reportError);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("play", handlePlay);
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      texture.dispose();
+    };
+  }, [crossOrigin, id, playsInline, poster, src]);
+  return resource;
+}
+function VideoHotspot({
+  id,
+  src,
+  playing,
+  poster,
+  loop = false,
+  muted = true,
+  volume = 1,
+  playsInline = true,
+  preload = "metadata",
+  crossOrigin,
+  width = 16,
+  height = 9,
+  opacity,
+  onPlaybackStateChange,
+  onPlaybackError,
+  onEnded,
+  onError,
+  ...anchorProps
+}) {
+  const resource = useVideoResource({
+    crossOrigin,
+    id,
+    onEnded,
+    onError,
+    onPlaybackStateChange,
+    playsInline,
+    poster,
+    src
+  });
+  const posterTexture = usePosterTexture(id, poster, onError);
+  const onPlaybackErrorRef = (0, import_react15.useRef)(onPlaybackError);
+  const onPlaybackStateChangeRef = (0, import_react15.useRef)(onPlaybackStateChange);
+  onPlaybackErrorRef.current = onPlaybackError;
+  onPlaybackStateChangeRef.current = onPlaybackStateChange;
+  (0, import_react15.useEffect)(() => {
+    if (!resource) {
+      return;
+    }
+    resource.video.loop = loop;
+    resource.video.muted = muted;
+    resource.video.volume = clampVolume(volume);
+    resource.video.playsInline = playsInline;
+    resource.video.preload = preload;
+  }, [loop, muted, playsInline, preload, resource, volume]);
+  (0, import_react15.useEffect)(() => {
+    if (!resource) {
+      return;
+    }
+    let active = true;
+    if (!playing) {
+      resource.video.pause();
+      return () => {
+        active = false;
+      };
+    }
+    void resource.video.play().catch((error) => {
+      if (!active) {
+        return;
+      }
+      onPlaybackStateChangeRef.current?.("blocked");
+      onPlaybackErrorRef.current?.(error);
+    });
+    return () => {
+      active = false;
+    };
+  }, [playing, resource]);
+  const activeTexture = resource?.ready ? resource.texture : posterTexture;
+  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: activeTexture,
+        opacity: activeTexture ? clampOpacity4(opacity) : 0,
+        side: import_three15.DoubleSide,
+        toneMapped: false,
+        transparent: true
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoRotate,
+  GraphicHotspot,
+  ImageHotspot,
+  MAX_HOTSPOT_PITCH,
+  PanoView,
+  PanoramaScenes,
+  PolygonHotspot,
+  PolylineHotspot,
+  SequenceHotspot,
+  Sphere,
+  Tile,
+  VideoHotspot,
+  clampPanoPitch,
+  normalizePanoPosition,
+  normalizePanoYaw,
+  panoPositionToVector3,
+  unwrapPolygonVertices,
+  validatePolygonVertices,
+  validatePolylineVertices,
+  vector3ToPanoPosition
+});
+//# sourceMappingURL=index.cjs.map