maplibre-gl-layers 0.17.0 → 0.19.0

package/dist/index.mjs

@@ -3,30 +3,22 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 /*!
  * name: maplibre-gl-layers
- * version: 0.17.0
+ * version: 0.19.0
  * description: MapLibre's layer extension library enabling the display, movement, and modification of large numbers of dynamic sprite images
  * author: Kouji Matsui (@kekyo@mi.kekyo.net)
  * license: MIT
  * repository.url: https://github.com/kekyo/maplibre-gl-layers.git
- * git.commit.hash: 9fe9aa30db6602d13643e32c94af39ae2b26b082
+ * git.commit.hash: 7bc93c11d7855dedb8d60f140af4e413252c32a7
  */
 const UNLIMITED_SPRITE_SCALING_OPTIONS = {
   metersPerPixel: 1,
-  zoomMin: 0,
-  zoomMax: 30,
-  scaleMin: 1,
-  scaleMax: 1,
-  spriteMinPixel: 0,
-  spriteMaxPixel: 1e5
+  minScaleDistanceMeters: 0,
+  maxScaleDistanceMeters: Number.POSITIVE_INFINITY
 };
 const STANDARD_SPRITE_SCALING_OPTIONS = {
   metersPerPixel: 1,
-  zoomMin: 8,
-  zoomMax: 20,
-  scaleMin: 0.1,
-  scaleMax: 1,
-  spriteMinPixel: 24,
-  spriteMaxPixel: 100
+  minScaleDistanceMeters: 500,
+  maxScaleDistanceMeters: 1e4
 };
 const DEFAULT_TEXTURE_FILTERING_OPTIONS = {
   minFilter: "linear",
@@ -22369,6 +22361,13 @@ const __CSS_KEYWORD_COLORS = {
 const CSS_KEYWORD_COLORS = __CSS_KEYWORD_COLORS;
 const DEFAULT_BORDER_COLOR = "red";
 const DEFAULT_BORDER_COLOR_RGBA = CSS_KEYWORD_COLORS.red;
+const resolveOffsetInput$1 = (offset) => {
+  var _a, _b;
+  return {
+    offsetMeters: (_a = offset == null ? void 0 : offset.offsetMeters) != null ? _a : DEFAULT_IMAGE_OFFSET.offsetMeters,
+    offsetDeg: (_b = offset == null ? void 0 : offset.offsetDeg) != null ? _b : DEFAULT_IMAGE_OFFSET.offsetDeg
+  };
+};
 const cloneSpriteLocation = (location2) => {
   if (location2.z === void 0) {
     return { lng: location2.lng, lat: location2.lat };
@@ -22468,105 +22467,45 @@ const resolveScalingOptions = (options) => {
     }
     metersPerPixel = fallbackMetersPerPixel;
   }
-  const fallbackZoomMin = Number.isFinite(base.zoomMin) ? base.zoomMin : 0;
-  let zoomMin = (options == null ? void 0 : options.zoomMin) !== void 0 ? options.zoomMin : fallbackZoomMin;
-  if (!Number.isFinite(zoomMin)) {
-    if ((options == null ? void 0 : options.zoomMin) !== void 0) {
-      warnings.push(
-        `zoomMin(${String(options.zoomMin)}) is not finite; using ${fallbackZoomMin}`
-      );
-    }
-    zoomMin = fallbackZoomMin;
-  }
-  const fallbackZoomMax = Number.isFinite(base.zoomMax) && base.zoomMax > fallbackZoomMin ? base.zoomMax : fallbackZoomMin;
-  let zoomMax = (options == null ? void 0 : options.zoomMax) !== void 0 ? options.zoomMax : fallbackZoomMax;
-  if (!Number.isFinite(zoomMax)) {
-    if ((options == null ? void 0 : options.zoomMax) !== void 0) {
-      warnings.push(
-        `zoomMax(${String(options.zoomMax)}) is not finite; using ${fallbackZoomMax}`
-      );
-    }
-    zoomMax = fallbackZoomMax;
-  }
-  if (zoomMax < zoomMin) {
-    warnings.push(
-      `zoomMax(${zoomMax}) < zoomMin(${zoomMin}); swapped values to maintain ascending order`
-    );
-    [zoomMin, zoomMax] = [zoomMax, zoomMin];
-  }
-  const fallbackScaleMin = Number.isFinite(base.scaleMin) ? base.scaleMin : 1;
-  let scaleMin = (options == null ? void 0 : options.scaleMin) !== void 0 ? options.scaleMin : fallbackScaleMin;
-  if (!Number.isFinite(scaleMin)) {
-    if ((options == null ? void 0 : options.scaleMin) !== void 0) {
+  const fallbackMinDistance = base.minScaleDistanceMeters !== void 0 && Number.isFinite(base.minScaleDistanceMeters) && base.minScaleDistanceMeters > 0 ? base.minScaleDistanceMeters : 0;
+  let minScaleDistanceMeters = (options == null ? void 0 : options.minScaleDistanceMeters) !== void 0 ? options.minScaleDistanceMeters : fallbackMinDistance;
+  if (!Number.isFinite(minScaleDistanceMeters) || minScaleDistanceMeters < 0) {
+    if ((options == null ? void 0 : options.minScaleDistanceMeters) !== void 0) {
       warnings.push(
-        `scaleMin(${String(options.scaleMin)}) is not finite; using ${fallbackScaleMin}`
+        `minScaleDistanceMeters(${String(
+          options.minScaleDistanceMeters
+        )}) is invalid; using ${fallbackMinDistance}`
       );
     }
-    scaleMin = fallbackScaleMin;
-  }
-  if (scaleMin < 0) {
-    warnings.push(`scaleMin(${scaleMin}) is negative; clamped to 0`);
-    scaleMin = 0;
-  }
-  const fallbackScaleMax = Number.isFinite(base.scaleMax) ? base.scaleMax : 1;
-  let scaleMax = (options == null ? void 0 : options.scaleMax) !== void 0 ? options.scaleMax : fallbackScaleMax;
-  if (!Number.isFinite(scaleMax)) {
-    if ((options == null ? void 0 : options.scaleMax) !== void 0) {
-      warnings.push(
-        `scaleMax(${String(options.scaleMax)}) is not finite; using ${fallbackScaleMax}`
-      );
-    }
-    scaleMax = fallbackScaleMax;
-  }
-  if (scaleMax < 0) {
-    warnings.push(`scaleMax(${scaleMax}) is negative; clamped to 0`);
-    scaleMax = 0;
+    minScaleDistanceMeters = fallbackMinDistance;
   }
-  if (scaleMax < scaleMin) {
-    warnings.push(
-      `scaleMax(${scaleMax}) < scaleMin(${scaleMin}); swapped values to maintain ascending order`
-    );
-    [scaleMin, scaleMax] = [scaleMax, scaleMin];
-  }
-  const fallbackSpriteMin = Number.isFinite(base.spriteMinPixel) && base.spriteMinPixel >= 0 ? base.spriteMinPixel : 0;
-  let spriteMinPixel = (options == null ? void 0 : options.spriteMinPixel) !== void 0 ? options.spriteMinPixel : fallbackSpriteMin;
-  if (!Number.isFinite(spriteMinPixel)) {
-    if ((options == null ? void 0 : options.spriteMinPixel) !== void 0) {
+  const baseMaxDistance = base.maxScaleDistanceMeters !== void 0 && base.maxScaleDistanceMeters > 0 ? base.maxScaleDistanceMeters : Number.POSITIVE_INFINITY;
+  const fallbackMaxDistance = Number.isFinite(baseMaxDistance) ? baseMaxDistance : Number.POSITIVE_INFINITY;
+  let maxScaleDistanceMeters = (options == null ? void 0 : options.maxScaleDistanceMeters) !== void 0 ? options.maxScaleDistanceMeters : fallbackMaxDistance;
+  const maxIsInfinite = maxScaleDistanceMeters === Number.POSITIVE_INFINITY && (options == null ? void 0 : options.maxScaleDistanceMeters) !== 0;
+  if (!Number.isFinite(maxScaleDistanceMeters) && !maxIsInfinite) {
+    if ((options == null ? void 0 : options.maxScaleDistanceMeters) !== void 0) {
       warnings.push(
-        `spriteMinPixel(${String(
-          options.spriteMinPixel
-        )}) is not finite; using ${fallbackSpriteMin}`
+        `maxScaleDistanceMeters(${String(
+          options.maxScaleDistanceMeters
+        )}) is not finite; using ${fallbackMaxDistance}`
       );
     }
-    spriteMinPixel = fallbackSpriteMin;
-  } else if (spriteMinPixel < 0) {
+    maxScaleDistanceMeters = fallbackMaxDistance;
+  } else if (Number.isFinite(maxScaleDistanceMeters) && maxScaleDistanceMeters <= 0) {
     warnings.push(
-      `spriteMinPixel(${spriteMinPixel}) is negative; clamped to 0`
+      `maxScaleDistanceMeters(${maxScaleDistanceMeters}) is non-positive; treated as unlimited`
     );
-    spriteMinPixel = 0;
+    maxScaleDistanceMeters = fallbackMaxDistance;
   }
-  const fallbackSpriteMax = Number.isFinite(base.spriteMaxPixel) && base.spriteMaxPixel >= 0 ? base.spriteMaxPixel : 0;
-  let spriteMaxPixel = (options == null ? void 0 : options.spriteMaxPixel) !== void 0 ? options.spriteMaxPixel : fallbackSpriteMax;
-  if (!Number.isFinite(spriteMaxPixel)) {
-    if ((options == null ? void 0 : options.spriteMaxPixel) !== void 0) {
-      warnings.push(
-        `spriteMaxPixel(${String(
-          options.spriteMaxPixel
-        )}) is not finite; using ${fallbackSpriteMax}`
-      );
-    }
-    spriteMaxPixel = fallbackSpriteMax;
-  } else if (spriteMaxPixel < 0) {
+  if (Number.isFinite(maxScaleDistanceMeters) && maxScaleDistanceMeters < minScaleDistanceMeters) {
     warnings.push(
-      `spriteMaxPixel(${spriteMaxPixel}) is negative; clamped to 0`
+      `maxScaleDistanceMeters(${maxScaleDistanceMeters}) < minScaleDistanceMeters(${minScaleDistanceMeters}); swapped values to maintain ascending order`
     );
-    spriteMaxPixel = 0;
-  }
-  if (spriteMinPixel > 0 && spriteMaxPixel > 0 && spriteMaxPixel < spriteMinPixel) {
-    warnings.push(
-      `spriteMaxPixel(${spriteMaxPixel}) < spriteMinPixel(${spriteMinPixel}); swapped values to maintain ascending order`
-    );
-    [spriteMinPixel, spriteMaxPixel] = [spriteMaxPixel, spriteMinPixel];
+    [minScaleDistanceMeters, maxScaleDistanceMeters] = [
+      maxScaleDistanceMeters,
+      minScaleDistanceMeters
+    ];
   }
   if (warnings.length > 0 && typeof console !== "undefined") {
     const warn = (_b = console.warn) != null ? _b : null;
@@ -22576,27 +22515,26 @@ const resolveScalingOptions = (options) => {
   }
   return {
     metersPerPixel,
-    zoomMin,
-    zoomMax,
-    scaleMin,
-    scaleMax,
-    spriteMinPixel,
-    spriteMaxPixel
+    minScaleDistanceMeters,
+    maxScaleDistanceMeters
   };
 };
-const calculateZoomScaleFactor = (zoom, scaling) => {
-  const { zoomMin, zoomMax, scaleMin, scaleMax } = scaling;
-  if (zoomMax <= zoomMin) {
-    return scaleMax;
+const calculateDistanceScaleFactor = (distanceMeters, scaling) => {
+  if (!Number.isFinite(distanceMeters) || distanceMeters <= 0) {
+    return 1;
   }
-  if (zoom <= zoomMin) {
-    return scaleMin;
+  const minDistance = Math.max(0, scaling.minScaleDistanceMeters);
+  const hasMax = Number.isFinite(scaling.maxScaleDistanceMeters) && scaling.maxScaleDistanceMeters > 0;
+  let clamped = distanceMeters;
+  if (minDistance > 0 && distanceMeters < minDistance) {
+    clamped = minDistance;
+  } else if (hasMax && distanceMeters > scaling.maxScaleDistanceMeters) {
+    clamped = scaling.maxScaleDistanceMeters;
   }
-  if (zoom >= zoomMax) {
-    return scaleMax;
+  if (clamped === distanceMeters || clamped === 0) {
+    return 1;
   }
-  const t = (zoom - zoomMin) / (zoomMax - zoomMin);
-  return scaleMin + (scaleMax - scaleMin) * t;
+  return distanceMeters / clamped;
 };
 const calculateMetersPerPixelAtLatitude = (zoom, latitude) => {
   const cosLatitude = Math.cos(latitude * DEG2RAD);
@@ -22639,49 +22577,20 @@ const calculateDistanceAndBearingMeters = (from, to) => {
   }
   return { distanceMeters, bearingDeg };
 };
-const clampSpritePixelSize = (width, height, spriteMinPixel, spriteMaxPixel) => {
-  const largest = Math.max(width, height);
-  if (!Number.isFinite(largest) || largest <= 0) {
-    return { width, height, scaleAdjustment: 1 };
-  }
-  let nextWidth = width;
-  let nextHeight = height;
-  let scaleAdjustment = 1;
-  let adjustedLargest = largest;
-  if (spriteMinPixel > 0 && largest < spriteMinPixel) {
-    const factor = spriteMinPixel / largest;
-    nextWidth *= factor;
-    nextHeight *= factor;
-    scaleAdjustment *= factor;
-    adjustedLargest *= factor;
-  }
-  if (spriteMaxPixel > 0 && adjustedLargest > spriteMaxPixel) {
-    const factor = spriteMaxPixel / adjustedLargest;
-    nextWidth *= factor;
-    nextHeight *= factor;
-    scaleAdjustment *= factor;
-  }
-  return { width: nextWidth, height: nextHeight, scaleAdjustment };
-};
-const calculateBillboardPixelDimensions = (imageWidth, imageHeight, baseMetersPerPixel, imageScale, zoomScaleFactor, effectivePixelsPerMeter, spriteMinPixel, spriteMaxPixel) => {
+const calculateBillboardPixelDimensions = (imageWidth, imageHeight, baseMetersPerPixel, imageScale, distanceScaleFactor, effectivePixelsPerMeter) => {
   if (!imageWidth || !imageHeight || imageWidth <= 0 || imageHeight <= 0 || baseMetersPerPixel <= 0 || effectivePixelsPerMeter <= 0) {
     return { width: 0, height: 0, scaleAdjustment: 1 };
   }
-  const scaleFactor = baseMetersPerPixel * imageScale * zoomScaleFactor * effectivePixelsPerMeter;
-  const rawWidth = ensureFinite(imageWidth * scaleFactor);
-  const rawHeight = ensureFinite(imageHeight * scaleFactor);
-  return clampSpritePixelSize(
-    rawWidth,
-    rawHeight,
-    spriteMinPixel,
-    spriteMaxPixel
-  );
+  const scaleFactor = baseMetersPerPixel * imageScale * distanceScaleFactor * effectivePixelsPerMeter;
+  const width = ensureFinite(imageWidth * scaleFactor);
+  const height = ensureFinite(imageHeight * scaleFactor);
+  return { width, height, scaleAdjustment: 1 };
 };
-const calculateBillboardOffsetPixels = (offset, imageScale, zoomScaleFactor, effectivePixelsPerMeter, sizeScaleAdjustment = 1) => {
-  var _a, _b;
-  const offsetMeters = ((_a = offset == null ? void 0 : offset.offsetMeters) != null ? _a : 0) * imageScale * zoomScaleFactor;
+const calculateBillboardOffsetPixels = (offset, imageScale, distanceScaleFactor, effectivePixelsPerMeter, sizeScaleAdjustment = 1) => {
+  const resolved = resolveOffsetInput$1(offset);
+  const offsetMeters = resolved.offsetMeters * imageScale * distanceScaleFactor;
   const offsetPixels = offsetMeters * effectivePixelsPerMeter * sizeScaleAdjustment;
-  const offsetRad = ((_b = offset == null ? void 0 : offset.offsetDeg) != null ? _b : 0) * DEG2RAD;
+  const offsetRad = resolved.offsetDeg * DEG2RAD;
   return {
     x: offsetPixels * Math.sin(offsetRad),
     y: offsetPixels * Math.cos(offsetRad)
@@ -22704,40 +22613,14 @@ const calculateBillboardAnchorShiftPixels = (halfWidth, halfHeight, anchor, tota
   const shiftY = -anchorX * sinR - anchorY * cosR;
   return { x: shiftX, y: shiftY };
 };
-const calculateSurfaceWorldDimensions = (imageWidth, imageHeight, baseMetersPerPixel, imageScale, zoomScaleFactor, options) => {
-  var _a, _b;
+const calculateSurfaceWorldDimensions = (imageWidth, imageHeight, baseMetersPerPixel, imageScale, distanceScaleFactor) => {
   if (!imageWidth || !imageHeight || imageWidth <= 0 || imageHeight <= 0 || baseMetersPerPixel <= 0) {
     return { width: 0, height: 0, scaleAdjustment: 1 };
   }
-  const scaleFactor = baseMetersPerPixel * imageScale * zoomScaleFactor;
-  let width = ensureFinite(imageWidth * scaleFactor);
-  let height = ensureFinite(imageHeight * scaleFactor);
-  let scaleAdjustment = 1;
-  const effectivePixelsPerMeter = (options == null ? void 0 : options.effectivePixelsPerMeter) !== void 0 ? options.effectivePixelsPerMeter : 0;
-  const spriteMinPixel = (_a = options == null ? void 0 : options.spriteMinPixel) != null ? _a : 0;
-  const spriteMaxPixel = (_b = options == null ? void 0 : options.spriteMaxPixel) != null ? _b : 0;
-  if (effectivePixelsPerMeter > 0 && Number.isFinite(effectivePixelsPerMeter) && (spriteMinPixel > 0 || spriteMaxPixel > 0)) {
-    const largestMeters = Math.max(width, height);
-    if (largestMeters > 0 && Number.isFinite(largestMeters)) {
-      const largestPixels = largestMeters * effectivePixelsPerMeter;
-      if (Number.isFinite(largestPixels) && largestPixels > 0) {
-        let scale2 = 1;
-        if (spriteMinPixel > 0 && largestPixels < spriteMinPixel) {
-          scale2 = spriteMinPixel / largestPixels;
-        }
-        const scaledLargest = largestPixels * scale2;
-        if (spriteMaxPixel > 0 && scaledLargest > spriteMaxPixel) {
-          scale2 = spriteMaxPixel / largestPixels;
-        }
-        if (scale2 !== 1) {
-          width *= scale2;
-          height *= scale2;
-          scaleAdjustment *= scale2;
-        }
-      }
-    }
-  }
-  return { width, height, scaleAdjustment };
+  const scaleFactor = baseMetersPerPixel * imageScale * distanceScaleFactor;
+  const width = ensureFinite(imageWidth * scaleFactor);
+  const height = ensureFinite(imageHeight * scaleFactor);
+  return { width, height, scaleAdjustment: 1 };
 };
 const calculateSurfaceAnchorShiftMeters = (halfWidthMeters, halfHeightMeters, anchor, totalRotateDeg) => {
   var _a, _b;
@@ -22756,13 +22639,13 @@ const calculateSurfaceAnchorShiftMeters = (halfWidthMeters, halfHeightMeters, an
   const north = -anchorEast * sinR - anchorNorth * cosR;
   return { east, north };
 };
-const calculateSurfaceOffsetMeters = (offset, imageScale, zoomScaleFactor, sizeScaleAdjustment = 1) => {
-  var _a, _b;
-  const offsetMeters = ((_a = offset == null ? void 0 : offset.offsetMeters) != null ? _a : 0) * imageScale * zoomScaleFactor;
+const calculateSurfaceOffsetMeters = (offset, imageScale, distanceScaleFactor, sizeScaleAdjustment = 1) => {
+  const resolved = resolveOffsetInput$1(offset);
+  const offsetMeters = resolved.offsetMeters * imageScale * distanceScaleFactor;
   if (offsetMeters === 0) {
     return { east: 0, north: 0 };
   }
-  const rad = ((_b = offset == null ? void 0 : offset.offsetDeg) != null ? _b : 0) * DEG2RAD;
+  const rad = resolved.offsetDeg * DEG2RAD;
   return {
     east: offsetMeters * Math.sin(rad) * sizeScaleAdjustment,
     north: offsetMeters * Math.cos(rad) * sizeScaleAdjustment
@@ -22856,10 +22739,8 @@ const calculateBillboardCenterPosition = (params) => {
     imageHeight,
     baseMetersPerPixel,
     imageScale,
-    zoomScaleFactor,
+    distanceScaleFactor,
     effectivePixelsPerMeter,
-    spriteMinPixel,
-    spriteMaxPixel,
     totalRotateDeg,
     anchor,
     offset
@@ -22869,10 +22750,8 @@ const calculateBillboardCenterPosition = (params) => {
     imageHeight,
     baseMetersPerPixel,
     imageScale,
-    zoomScaleFactor,
-    effectivePixelsPerMeter,
-    spriteMinPixel,
-    spriteMaxPixel
+    distanceScaleFactor,
+    effectivePixelsPerMeter
   );
   const halfWidth = pixelDims.width / 2;
   const halfHeight = pixelDims.height / 2;
@@ -22885,7 +22764,7 @@ const calculateBillboardCenterPosition = (params) => {
   const offsetShift = calculateBillboardOffsetPixels(
     offset,
     imageScale,
-    zoomScaleFactor,
+    distanceScaleFactor,
     effectivePixelsPerMeter,
     pixelDims.scaleAdjustment
   );
@@ -22998,13 +22877,10 @@ const calculateSurfaceCenterPosition = (params) => {
     imageHeight,
     baseMetersPerPixel,
     imageScale,
-    zoomScaleFactor,
+    distanceScaleFactor,
     totalRotateDeg,
     anchor,
     offset,
-    effectivePixelsPerMeter = 0,
-    spriteMinPixel = 0,
-    spriteMaxPixel = 0,
     project,
     projectToClipSpace,
     drawingBufferWidth,
@@ -23035,12 +22911,7 @@ const calculateSurfaceCenterPosition = (params) => {
     imageHeight,
     baseMetersPerPixel,
     imageScale,
-    zoomScaleFactor,
-    {
-      effectivePixelsPerMeter,
-      spriteMinPixel,
-      spriteMaxPixel
-    }
+    distanceScaleFactor
   );
   const halfWidthMeters = worldDims.width / 2;
   const halfHeightMeters = worldDims.height / 2;
@@ -23053,7 +22924,7 @@ const calculateSurfaceCenterPosition = (params) => {
   const offsetMeters = calculateSurfaceOffsetMeters(
     offset,
     imageScale,
-    zoomScaleFactor,
+    distanceScaleFactor,
     worldDims.scaleAdjustment
   );
   const totalDisplacement = {
@@ -23148,6 +23019,17 @@ const clampOpacity = (value) => {
   }
   return value;
 };
+const normalizeDuration$2 = (durationMs) => Number.isFinite(durationMs) && durationMs > 0 ? durationMs : 0;
+const normalizeOptions$2 = (options) => {
+  var _a;
+  const resolved = resolveEasing(options.easing);
+  return {
+    durationMs: normalizeDuration$2(options.durationMs),
+    easingFunc: resolved.func,
+    easingParam: resolved.param,
+    mode: (_a = options.mode) != null ? _a : "feedback"
+  };
+};
 const computeFeedforwardTarget = (previous, next) => {
   var _a, _b;
   if (!previous) {
@@ -23156,27 +23038,16 @@ const computeFeedforwardTarget = (previous, next) => {
   const prevZ = (_a = previous.z) != null ? _a : 0;
   const nextZ = (_b = next.z) != null ? _b : 0;
   const hasZ = previous.z !== void 0 || next.z !== void 0;
-  const target = {
+  return {
     lng: next.lng + (next.lng - previous.lng),
     lat: next.lat + (next.lat - previous.lat),
-    // Only extrapolate altitude when either point includes z; otherwise we maintain the 2D assumption.
     z: hasZ ? nextZ + (nextZ - prevZ) : void 0
   };
-  return target;
 };
-const normalizeOptions$2 = (options) => {
-  var _a;
-  return {
-    durationMs: Math.max(0, options.durationMs),
-    mode: (_a = options.mode) != null ? _a : "feedback",
-    easing: options.easing
-  };
-};
-const createInterpolationState = (params) => {
+const createLocationInterpolationState = (params) => {
   const { currentLocation, lastCommandLocation, nextCommandLocation } = params;
   const options = normalizeOptions$2(params.options);
   const from = cloneSpriteLocation(currentLocation);
-  const resolvedEasing = resolveEasing(options.easing);
   const commandTarget = cloneSpriteLocation(nextCommandLocation);
   let pathTarget;
   if (options.mode === "feedforward") {
@@ -23189,8 +23060,8 @@ const createInterpolationState = (params) => {
   const state = {
     mode: options.mode,
     durationMs: options.durationMs,
-    easingFunc: resolvedEasing.func,
-    easingParam: resolvedEasing.param,
+    easingFunc: options.easingFunc,
+    easingParam: options.easingParam,
     startTimestamp: -1,
     from,
     to: commandTarget,
@@ -23198,17 +23069,15 @@ const createInterpolationState = (params) => {
   };
   return { state, requiresInterpolation };
 };
-const evaluateInterpolation = (params) => {
+const evaluateLocationInterpolation = (state, timestamp) => {
   var _a;
-  const { state } = params;
   const easingFn = state.easingFunc;
-  const timestamp = Number.isFinite(params.timestamp) ? params.timestamp : Date.now();
   const duration = Math.max(0, state.durationMs);
   const effectiveStart = state.startTimestamp >= 0 ? state.startTimestamp : timestamp;
   const target = (_a = state.pathTarget) != null ? _a : state.to;
   if (duration === 0 || spriteLocationsEqual(state.from, target)) {
     return {
-      location: cloneSpriteLocation(state.to),
+      value: cloneSpriteLocation(state.to),
       completed: true,
       effectiveStartTimestamp: effectiveStart
     };
@@ -23216,14 +23085,155 @@ const evaluateInterpolation = (params) => {
   const elapsed = timestamp - effectiveStart;
   const rawProgress = duration <= 0 ? 1 : elapsed / duration;
   const eased = easingFn(rawProgress);
-  const location2 = lerpSpriteLocation(state.from, target, eased);
+  const value = lerpSpriteLocation(state.from, target, eased);
   const completed = rawProgress >= 1;
   return {
-    location: location2,
+    value,
     completed,
     effectiveStartTimestamp: effectiveStart
   };
 };
+const evaluateLocationInterpolationsBatch = (states, timestamp) => {
+  if (!states.length) {
+    return [];
+  }
+  return states.map((state) => evaluateLocationInterpolation(state, timestamp));
+};
+const collectLocationInterpolationWorkItems = (sprite, workItems) => {
+  const state = sprite.location.interpolation.state;
+  if (state) {
+    workItems.push({ ...state, sprite });
+  }
+};
+const applyLocationInterpolationEvaluations = (workItems, evaluations, timestamp) => {
+  var _a;
+  let active = false;
+  for (let index = 0; index < workItems.length; index += 1) {
+    const item = workItems[index];
+    const { sprite } = item;
+    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateLocationInterpolation(item, timestamp);
+    if (item.startTimestamp < 0) {
+      const effectiveStart = evaluation.effectiveStartTimestamp;
+      item.startTimestamp = effectiveStart;
+      const interpolationState = sprite.location.interpolation.state;
+      if (interpolationState && interpolationState.startTimestamp < 0) {
+        interpolationState.startTimestamp = effectiveStart;
+      }
+    }
+    sprite.location.current = evaluation.value;
+    if (evaluation.completed) {
+      sprite.location.current = cloneSpriteLocation(item.to);
+      sprite.location.from = void 0;
+      sprite.location.to = void 0;
+      sprite.location.interpolation.state = null;
+    } else {
+      active = true;
+    }
+  }
+  return active;
+};
+const clamp01$2 = (value) => Math.min(1, Math.max(0, value));
+const clamp255 = (value) => Math.min(255, Math.max(0, value));
+const normalizeRgba = (r, g, b, a) => [
+  clamp255(r) / 255,
+  clamp255(g) / 255,
+  clamp255(b) / 255,
+  clamp01$2(a)
+];
+const tryParseHexColor = (value) => {
+  var _a;
+  const match = /^#([0-9a-f]{3,8})$/i.exec(value.trim());
+  if (!match) {
+    return null;
+  }
+  const hex = (_a = match[1]) != null ? _a : "";
+  if (hex.length === 3) {
+    const [r, g, b] = hex.split("").map((c) => parseInt(c + c, 16));
+    return normalizeRgba(r, g, b, 1);
+  }
+  if (hex.length === 4) {
+    const [r, g, b, a] = hex.split("").map((c) => parseInt(c + c, 16));
+    return normalizeRgba(r, g, b, a / 255);
+  }
+  if (hex.length === 6 || hex.length === 8) {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
+    return normalizeRgba(r, g, b, a / 255);
+  }
+  return null;
+};
+const parseChannel = (value) => {
+  if (value.endsWith("%")) {
+    const percent = Number.parseFloat(value.slice(0, -1));
+    if (!Number.isFinite(percent)) {
+      return Number.NaN;
+    }
+    return clamp255(percent / 100 * 255);
+  }
+  const number = Number.parseFloat(value);
+  return Number.isFinite(number) ? clamp255(number) : Number.NaN;
+};
+const parseAlpha = (value) => {
+  if (value === void 0) {
+    return 1;
+  }
+  if (value.endsWith("%")) {
+    const percent = Number.parseFloat(value.slice(0, -1));
+    if (!Number.isFinite(percent)) {
+      return Number.NaN;
+    }
+    return clamp01$2(percent / 100);
+  }
+  const number = Number.parseFloat(value);
+  return Number.isFinite(number) ? clamp01$2(number) : Number.NaN;
+};
+const tryParseRgbFunction = (value) => {
+  var _a, _b, _c;
+  const match = /^rgba?\(\s*([^,]+?)\s*,\s*([^,]+?)\s*,\s*([^,]+?)(?:\s*,\s*([^,]+?)\s*)?\)$/i.exec(
+    value.trim()
+  );
+  if (!match) {
+    return null;
+  }
+  const r = parseChannel((_a = match[1]) != null ? _a : "");
+  const g = parseChannel((_b = match[2]) != null ? _b : "");
+  const b = parseChannel((_c = match[3]) != null ? _c : "");
+  const a = parseAlpha(match[4]);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b) || Number.isNaN(a)) {
+    return null;
+  }
+  return normalizeRgba(r, g, b, a);
+};
+const parseColorUsingDom = (value) => {
+  var _a;
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const element = document.createElement("div");
+  element.style.color = "";
+  element.style.color = value;
+  if (!element.style.color) {
+    return null;
+  }
+  return (_a = tryParseRgbFunction(element.style.color)) != null ? _a : tryParseHexColor(element.style.color.toLowerCase());
+};
+const parseCssColorToRgba = (color, fallback2) => {
+  var _a, _b, _c;
+  if (!color) {
+    return fallback2;
+  }
+  const trimmed = color.trim();
+  if (trimmed.length === 0) {
+    return fallback2;
+  }
+  const keyword = CSS_KEYWORD_COLORS[trimmed.toLowerCase()];
+  if (keyword) {
+    return keyword;
+  }
+  return (_c = (_b = (_a = tryParseHexColor(trimmed)) != null ? _a : tryParseRgbFunction(trimmed)) != null ? _b : parseColorUsingDom(trimmed)) != null ? _c : fallback2;
+};
 const NUMERIC_EPSILON = 1e-6;
 const normalizeDuration$1 = (durationMs) => Number.isFinite(durationMs) && durationMs > 0 ? durationMs : 0;
 const normalizeDelta = (delta) => {
@@ -23276,7 +23286,7 @@ const createDegreeInterpolationState = (params) => {
     requiresInterpolation
   };
 };
-const clamp01$2 = (value) => {
+const clamp01$1 = (value) => {
   if (!Number.isFinite(value)) {
     return 1;
   }
@@ -23288,11 +23298,9 @@ const clamp01$2 = (value) => {
   }
   return value;
 };
-const evaluateDegreeInterpolation = (params) => {
+const evaluateDegreeInterpolation = (state, timestamp) => {
   var _a;
-  const { state } = params;
   const targetValue = (_a = state.pathTarget) != null ? _a : state.to;
-  const timestamp = Number.isFinite(params.timestamp) ? params.timestamp : Date.now();
   const duration = Math.max(0, state.durationMs);
   const effectiveStart = state.startTimestamp >= 0 ? state.startTimestamp : timestamp;
   if (duration === 0 || Math.abs(targetValue - state.from) <= NUMERIC_EPSILON) {
@@ -23304,7 +23312,7 @@ const evaluateDegreeInterpolation = (params) => {
   }
   const elapsed = timestamp - effectiveStart;
   const rawProgress = duration <= 0 ? 1 : elapsed / duration;
-  const eased = clamp01$2(state.easingFunc(rawProgress));
+  const eased = clamp01$1(state.easingFunc(rawProgress));
   const interpolated = state.from + (targetValue - state.from) * eased;
   const completed = rawProgress >= 1;
   return {
@@ -23315,10 +23323,15 @@ const evaluateDegreeInterpolation = (params) => {
 };
 const DEGREE_INTERPOLATION_CHANNELS = {
   rotation: {
-    resolveInterpolation: (image) => image.rotateDeg.interpolation,
+    resolveInterpolation: (image) => image.finalRotateDeg.interpolation,
     normalize: normalizeAngleDeg,
     applyValue: (image, value) => {
-      image.displayedRotateDeg = value;
+      image.finalRotateDeg.current = normalizeAngleDeg(value);
+    },
+    applyFinalValue: (image, value) => {
+      image.finalRotateDeg.current = normalizeAngleDeg(value);
+      image.finalRotateDeg.from = void 0;
+      image.finalRotateDeg.to = void 0;
     }
   },
   offsetDeg: {
@@ -23340,17 +23353,17 @@ const collectDegreeInterpolationWorkItems = (image, workItems) => {
   const rotationState = DEGREE_INTERPOLATION_CHANNELS.rotation.resolveInterpolation(image).state;
   if (rotationState) {
     workItems.push({
+      ...rotationState,
       descriptor: DEGREE_INTERPOLATION_CHANNELS.rotation,
-      image,
-      state: rotationState
+      image
     });
   }
   const offsetState = DEGREE_INTERPOLATION_CHANNELS.offsetDeg.resolveInterpolation(image).state;
   if (offsetState) {
     workItems.push({
+      ...offsetState,
       descriptor: DEGREE_INTERPOLATION_CHANNELS.offsetDeg,
-      image,
-      state: offsetState
+      image
     });
   }
 };
@@ -23359,158 +23372,25 @@ const applyDegreeInterpolationEvaluations = (workItems, evaluations, timestamp)
   let active = false;
   for (let index = 0; index < workItems.length; index += 1) {
     const item = workItems[index];
-    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateDegreeInterpolation({
-      state: item.state,
-      timestamp
-    });
-    if (item.state.startTimestamp < 0) {
-      item.state.startTimestamp = evaluation.effectiveStartTimestamp;
+    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateDegreeInterpolation(item, timestamp);
+    if (item.startTimestamp < 0) {
+      item.startTimestamp = evaluation.effectiveStartTimestamp;
     }
     const normalize = (_b = item.descriptor.normalize) != null ? _b : ((value) => value);
     const applyFinalValue = (_c = item.descriptor.applyFinalValue) != null ? _c : item.descriptor.applyValue;
     const interpolatedValue = normalize(evaluation.value);
     item.descriptor.applyValue(item.image, interpolatedValue);
     if (evaluation.completed) {
-      const finalValue = normalize(item.state.to);
+      const finalValue = normalize(item.to);
       applyFinalValue(item.image, finalValue);
       updateDegreeInterpolationState(item.image, item.descriptor, null);
     } else {
-      updateDegreeInterpolationState(item.image, item.descriptor, item.state);
+      updateDegreeInterpolationState(item.image, item.descriptor, item);
       active = true;
     }
   }
   return active;
 };
-const resolveRotationTarget = (params) => {
-  const options = params.options;
-  const targetAngle = normalizeAngleDeg(params.targetAngleDeg);
-  const currentAngle = normalizeAngleDeg(params.currentAngleDeg);
-  const previousCommandAngleDeg = params.previousCommandAngleDeg !== void 0 ? normalizeAngleDeg(params.previousCommandAngleDeg) : void 0;
-  if (!options || options.durationMs <= 0) {
-    return {
-      nextAngleDeg: targetAngle,
-      interpolationState: null
-    };
-  }
-  const { state, requiresInterpolation } = createDegreeInterpolationState({
-    currentValue: currentAngle,
-    targetValue: targetAngle,
-    previousCommandValue: previousCommandAngleDeg,
-    options
-  });
-  if (!requiresInterpolation) {
-    return {
-      nextAngleDeg: targetAngle,
-      interpolationState: null
-    };
-  }
-  return {
-    nextAngleDeg: currentAngle,
-    interpolationState: state
-  };
-};
-const clamp01$1 = (value) => Math.min(1, Math.max(0, value));
-const clamp255 = (value) => Math.min(255, Math.max(0, value));
-const normalizeRgba = (r, g, b, a) => [
-  clamp255(r) / 255,
-  clamp255(g) / 255,
-  clamp255(b) / 255,
-  clamp01$1(a)
-];
-const tryParseHexColor = (value) => {
-  var _a;
-  const match = /^#([0-9a-f]{3,8})$/i.exec(value.trim());
-  if (!match) {
-    return null;
-  }
-  const hex = (_a = match[1]) != null ? _a : "";
-  if (hex.length === 3) {
-    const [r, g, b] = hex.split("").map((c) => parseInt(c + c, 16));
-    return normalizeRgba(r, g, b, 1);
-  }
-  if (hex.length === 4) {
-    const [r, g, b, a] = hex.split("").map((c) => parseInt(c + c, 16));
-    return normalizeRgba(r, g, b, a / 255);
-  }
-  if (hex.length === 6 || hex.length === 8) {
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-    const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
-    return normalizeRgba(r, g, b, a / 255);
-  }
-  return null;
-};
-const parseChannel = (value) => {
-  if (value.endsWith("%")) {
-    const percent = Number.parseFloat(value.slice(0, -1));
-    if (!Number.isFinite(percent)) {
-      return Number.NaN;
-    }
-    return clamp255(percent / 100 * 255);
-  }
-  const number = Number.parseFloat(value);
-  return Number.isFinite(number) ? clamp255(number) : Number.NaN;
-};
-const parseAlpha = (value) => {
-  if (value === void 0) {
-    return 1;
-  }
-  if (value.endsWith("%")) {
-    const percent = Number.parseFloat(value.slice(0, -1));
-    if (!Number.isFinite(percent)) {
-      return Number.NaN;
-    }
-    return clamp01$1(percent / 100);
-  }
-  const number = Number.parseFloat(value);
-  return Number.isFinite(number) ? clamp01$1(number) : Number.NaN;
-};
-const tryParseRgbFunction = (value) => {
-  var _a, _b, _c;
-  const match = /^rgba?\(\s*([^,]+?)\s*,\s*([^,]+?)\s*,\s*([^,]+?)(?:\s*,\s*([^,]+?)\s*)?\)$/i.exec(
-    value.trim()
-  );
-  if (!match) {
-    return null;
-  }
-  const r = parseChannel((_a = match[1]) != null ? _a : "");
-  const g = parseChannel((_b = match[2]) != null ? _b : "");
-  const b = parseChannel((_c = match[3]) != null ? _c : "");
-  const a = parseAlpha(match[4]);
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b) || Number.isNaN(a)) {
-    return null;
-  }
-  return normalizeRgba(r, g, b, a);
-};
-const parseColorUsingDom = (value) => {
-  var _a;
-  if (typeof document === "undefined") {
-    return null;
-  }
-  const element = document.createElement("div");
-  element.style.color = "";
-  element.style.color = value;
-  if (!element.style.color) {
-    return null;
-  }
-  return (_a = tryParseRgbFunction(element.style.color)) != null ? _a : tryParseHexColor(element.style.color.toLowerCase());
-};
-const parseCssColorToRgba = (color, fallback2) => {
-  var _a, _b, _c;
-  if (!color) {
-    return fallback2;
-  }
-  const trimmed = color.trim();
-  if (trimmed.length === 0) {
-    return fallback2;
-  }
-  const keyword = CSS_KEYWORD_COLORS[trimmed.toLowerCase()];
-  if (keyword) {
-    return keyword;
-  }
-  return (_c = (_b = (_a = tryParseHexColor(trimmed)) != null ? _a : tryParseRgbFunction(trimmed)) != null ? _b : parseColorUsingDom(trimmed)) != null ? _c : fallback2;
-};
 const DISTANCE_EPSILON = 1e-6;
 const normalizeDuration = (durationMs) => Number.isFinite(durationMs) && durationMs > 0 ? durationMs : 0;
 const normalizeOptions = (options) => {
@@ -23563,11 +23443,9 @@ const clamp01 = (value) => {
   }
   return value;
 };
-const evaluateDistanceInterpolation = (params) => {
+const evaluateDistanceInterpolation = (state, timestamp) => {
   var _a;
-  const { state } = params;
   const targetValue = (_a = state.pathTarget) != null ? _a : state.to;
-  const timestamp = Number.isFinite(params.timestamp) ? params.timestamp : Date.now();
   const duration = Math.max(0, state.durationMs);
   const effectiveStart = state.startTimestamp >= 0 ? state.startTimestamp : timestamp;
   if (duration === 0 || Math.abs(targetValue - state.from) <= DISTANCE_EPSILON) {
@@ -23601,80 +23479,105 @@ const DISTANCE_INTERPOLATION_CHANNELS = {
     }
   },
   opacity: {
-    resolveInterpolation: (image) => image.opacity.interpolation,
+    resolveInterpolation: (image) => image.finalOpacity.interpolation,
     normalize: clampOpacity,
     applyValue: (image, value) => {
-      image.opacity.current = value;
+      image.finalOpacity.current = value;
     },
     applyFinalValue: (image, value) => {
-      image.opacity.current = value;
-      image.opacity.from = void 0;
-      image.opacity.to = void 0;
+      image.finalOpacity.current = value;
+      image.finalOpacity.from = void 0;
+      image.finalOpacity.to = void 0;
     }
   }
 };
-const collectDistanceInterpolationWorkItems = (image, workItems, options) => {
-  var _a, _b;
-  const includeOffsetMeters = (_a = options == null ? void 0 : options.includeOffsetMeters) != null ? _a : true;
-  const includeOpacity = (_b = options == null ? void 0 : options.includeOpacity) != null ? _b : true;
+const updateDistanceInterpolationState = (image, descriptor, nextState) => {
+  descriptor.resolveInterpolation(image).state = nextState;
+};
+const collectDistanceInterpolationWorkItems = (image, workItems, includeOffsetMeters, includeOpacity) => {
   const offsetMetersState = DISTANCE_INTERPOLATION_CHANNELS.offsetMeters.resolveInterpolation(
     image
   ).state;
   if (includeOffsetMeters && offsetMetersState) {
     workItems.push({
+      ...offsetMetersState,
       descriptor: DISTANCE_INTERPOLATION_CHANNELS.offsetMeters,
-      image,
-      state: offsetMetersState
+      image
     });
   }
   const opacityState = DISTANCE_INTERPOLATION_CHANNELS.opacity.resolveInterpolation(image).state;
   if (includeOpacity && opacityState) {
     workItems.push({
+      ...opacityState,
       descriptor: DISTANCE_INTERPOLATION_CHANNELS.opacity,
-      image,
-      state: opacityState
+      image
     });
   }
 };
-const updateDistanceInterpolationState = (image, descriptor, nextState) => {
-  descriptor.resolveInterpolation(image).state = nextState;
-};
 const applyDistanceInterpolationEvaluations = (workItems, evaluations, timestamp) => {
   var _a, _b, _c;
   let active = false;
   for (let index = 0; index < workItems.length; index += 1) {
     const item = workItems[index];
-    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateDistanceInterpolation({
-      state: item.state,
-      timestamp
-    });
-    if (item.state.startTimestamp < 0) {
-      item.state.startTimestamp = evaluation.effectiveStartTimestamp;
+    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateDistanceInterpolation(item, timestamp);
+    const interpolationState = item.descriptor.resolveInterpolation(
+      item.image
+    ).state;
+    if (interpolationState && interpolationState.startTimestamp < 0) {
+      interpolationState.startTimestamp = evaluation.effectiveStartTimestamp;
+    }
+    if (item.startTimestamp < 0) {
+      item.startTimestamp = evaluation.effectiveStartTimestamp;
     }
     const normalize = (_b = item.descriptor.normalize) != null ? _b : ((value) => value);
     const applyFinalValue = (_c = item.descriptor.applyFinalValue) != null ? _c : item.descriptor.applyValue;
     const interpolatedValue = normalize(evaluation.value);
     item.descriptor.applyValue(item.image, interpolatedValue);
     if (evaluation.completed) {
-      const finalValue = normalize(item.state.to);
+      const finalValue = normalize(item.to);
       applyFinalValue(item.image, finalValue);
       updateDistanceInterpolationState(item.image, item.descriptor, null);
     } else {
-      updateDistanceInterpolationState(item.image, item.descriptor, item.state);
+      updateDistanceInterpolationState(item.image, item.descriptor, item);
       active = true;
     }
   }
   return active;
 };
+const resolveRotationTarget = (params) => {
+  const options = params.options;
+  const targetAngle = normalizeAngleDeg(params.targetAngleDeg);
+  const currentAngle = normalizeAngleDeg(params.currentAngleDeg);
+  const previousCommandAngleDeg = params.previousCommandAngleDeg !== void 0 ? normalizeAngleDeg(params.previousCommandAngleDeg) : void 0;
+  if (!options || options.durationMs <= 0) {
+    return {
+      nextAngleDeg: targetAngle,
+      interpolationState: null
+    };
+  }
+  const { state, requiresInterpolation } = createDegreeInterpolationState({
+    currentValue: currentAngle,
+    targetValue: targetAngle,
+    previousCommandValue: previousCommandAngleDeg,
+    options
+  });
+  if (!requiresInterpolation) {
+    return {
+      nextAngleDeg: targetAngle,
+      interpolationState: null
+    };
+  }
+  return {
+    nextAngleDeg: currentAngle,
+    interpolationState: state
+  };
+};
 const stepDegreeInterpolationState = (interpolationState, timestamp, applyValue, options) => {
   var _a, _b;
   if (!interpolationState) {
     return { state: null, active: false };
   }
-  const evaluation = evaluateDegreeInterpolation({
-    state: interpolationState,
-    timestamp
-  });
+  const evaluation = evaluateDegreeInterpolation(interpolationState, timestamp);
   if (interpolationState.startTimestamp < 0) {
     interpolationState.startTimestamp = evaluation.effectiveStartTimestamp;
   }
@@ -23689,59 +23592,80 @@ const stepDegreeInterpolationState = (interpolationState, timestamp, applyValue,
   }
   return { state: interpolationState, active: true };
 };
-const resolveManualRotationFromDisplayed = (image) => {
-  var _a;
-  const baseRotation = (_a = image.resolvedBaseRotateDeg) != null ? _a : 0;
-  const fallbackRotation = normalizeAngleDeg(
-    baseRotation + image.rotationCommandDeg
+const resolveAutoRotationDeg$2 = (image, spriteAutoRotationDeg) => {
+  return image.autoRotation ? spriteAutoRotationDeg : 0;
+};
+const resolveCurrentRotation = (image, spriteAutoRotationDeg) => {
+  const targetAngle = normalizeAngleDeg(
+    resolveAutoRotationDeg$2(image, spriteAutoRotationDeg) + image.rotateDeg
   );
-  const displayedRotation = Number.isFinite(image.displayedRotateDeg) ? image.displayedRotateDeg : fallbackRotation;
-  return normalizeAngleDeg(displayedRotation - baseRotation);
+  const current = image.finalRotateDeg.current;
+  return Number.isFinite(current) ? normalizeAngleDeg(current) : targetAngle;
 };
-const refreshRotateDegInterpolatedValues = (image) => {
-  image.rotateDeg.current = resolveManualRotationFromDisplayed(image);
-  if (!image.rotateDeg.interpolation.state) {
-    image.rotateDeg.from = void 0;
-    image.rotateDeg.to = void 0;
+const refreshRotateDegInterpolatedValues = (image, spriteAutoRotationDeg) => {
+  image.finalRotateDeg.current = resolveCurrentRotation(
+    image,
+    spriteAutoRotationDeg
+  );
+  if (!image.finalRotateDeg.interpolation.state) {
+    image.finalRotateDeg.from = void 0;
+    image.finalRotateDeg.to = void 0;
   }
 };
-const updateImageDisplayedRotation = (image, optionsOverride) => {
+const updateImageDisplayedRotation = (image, spriteAutoRotationDeg, optionsOverride) => {
   const targetAngle = normalizeAngleDeg(
-    image.resolvedBaseRotateDeg + image.rotationCommandDeg
+    resolveAutoRotationDeg$2(image, spriteAutoRotationDeg) + image.rotateDeg
   );
-  const currentAngle = Number.isFinite(image.displayedRotateDeg) ? image.displayedRotateDeg : targetAngle;
-  const previousCommandAngle = image.rotateDeg.interpolation.lastCommandValue;
-  const options = optionsOverride === void 0 ? image.rotateDeg.interpolation.options : optionsOverride;
+  const currentAngle = resolveCurrentRotation(image, spriteAutoRotationDeg);
+  const previousCommandAngle = image.finalRotateDeg.interpolation.lastCommandValue;
+  const options = optionsOverride === void 0 ? image.finalRotateDeg.interpolation.options : optionsOverride;
   const { nextAngleDeg, interpolationState } = resolveRotationTarget({
     currentAngleDeg: currentAngle,
     targetAngleDeg: targetAngle,
     previousCommandAngleDeg: previousCommandAngle,
     options: options != null ? options : void 0
   });
-  image.displayedRotateDeg = nextAngleDeg;
-  image.rotateDeg.interpolation.state = interpolationState;
+  image.finalRotateDeg.current = normalizeAngleDeg(
+    Number.isFinite(nextAngleDeg) ? nextAngleDeg : targetAngle
+  );
+  image.finalRotateDeg.interpolation.state = interpolationState;
   if (!interpolationState) {
-    image.displayedRotateDeg = targetAngle;
+    image.finalRotateDeg.current = targetAngle;
+    image.finalRotateDeg.from = void 0;
+    image.finalRotateDeg.to = void 0;
+  } else {
+    image.finalRotateDeg.from = normalizeAngleDeg(currentAngle);
+    image.finalRotateDeg.to = normalizeAngleDeg(targetAngle);
   }
-  image.rotateDeg.interpolation.lastCommandValue = targetAngle;
+  image.finalRotateDeg.interpolation.lastCommandValue = targetAngle;
 };
-const syncImageRotationChannel = (image, optionsOverride) => {
-  updateImageDisplayedRotation(image, optionsOverride);
-  refreshRotateDegInterpolatedValues(image);
+const syncImageRotationChannel = (image, spriteAutoRotationDeg, optionsOverride) => {
+  updateImageDisplayedRotation(image, spriteAutoRotationDeg, optionsOverride);
+  refreshRotateDegInterpolatedValues(image, spriteAutoRotationDeg);
 };
-const stepRotationInterpolation = (image, timestamp) => {
+const stepRotationInterpolation = (image, spriteAutoRotationDeg, timestamp) => {
   const { state, active } = stepDegreeInterpolationState(
-    image.rotateDeg.interpolation.state,
+    image.finalRotateDeg.interpolation.state,
     timestamp,
     (value) => {
-      image.displayedRotateDeg = value;
+      const fallback2 = normalizeAngleDeg(
+        resolveAutoRotationDeg$2(image, spriteAutoRotationDeg) + image.rotateDeg
+      );
+      image.finalRotateDeg.current = normalizeAngleDeg(
+        Number.isFinite(value) ? value : fallback2
+      );
     },
     {
-      normalize: normalizeAngleDeg
+      normalize: (value) => {
+        const fallback2 = normalizeAngleDeg(
+          resolveAutoRotationDeg$2(image, spriteAutoRotationDeg) + image.rotateDeg
+        );
+        return normalizeAngleDeg(Number.isFinite(value) ? value : fallback2);
+      }
     }
   );
-  image.rotateDeg.interpolation.state = state;
-  refreshRotateDegInterpolatedValues(image);
+  image.finalRotateDeg.interpolation.state = state;
+  refreshRotateDegInterpolatedValues(image, spriteAutoRotationDeg);
   return active;
 };
 const stepOffsetDegInterpolation = (image, timestamp) => {
@@ -23769,10 +23693,10 @@ const stepDistanceInterpolationState = (interpolationState, timestamp, applyValu
   if (!interpolationState) {
     return { state: null, active: false };
   }
-  const evaluation = evaluateDistanceInterpolation({
-    state: interpolationState,
+  const evaluation = evaluateDistanceInterpolation(
+    interpolationState,
     timestamp
-  });
+  );
   if (interpolationState.startTimestamp < 0) {
     interpolationState.startTimestamp = evaluation.effectiveStartTimestamp;
   }
@@ -23793,7 +23717,9 @@ const clearOffsetMetersInterpolation = (image) => {
   image.offset.offsetMeters.to = void 0;
 };
 const clearOpacityInterpolation = (image) => {
-  image.opacity.interpolation.state = null;
+  image.finalOpacity.interpolation.state = null;
+  image.finalOpacity.from = void 0;
+  image.finalOpacity.to = void 0;
 };
 const applyOffsetDegUpdate = (image, nextOffset, interpolationOptions) => {
   const options = interpolationOptions;
@@ -23870,35 +23796,36 @@ const runOpacityTargetTransition = (image, targetOpacity, interpolationOptions)
   const clampedTarget = clampOpacity(targetOpacity);
   const options = interpolationOptions;
   if (!options || options.durationMs <= 0) {
-    image.opacity.current = clampedTarget;
-    image.opacity.from = void 0;
-    image.opacity.to = void 0;
-    image.opacity.interpolation.state = null;
+    image.finalOpacity.current = clampedTarget;
+    image.finalOpacity.from = void 0;
+    image.finalOpacity.to = void 0;
+    image.finalOpacity.interpolation.state = null;
   } else {
     const { state, requiresInterpolation } = createDistanceInterpolationState({
-      currentValue: clampOpacity(image.opacity.current),
+      currentValue: clampOpacity(image.finalOpacity.current),
       targetValue: clampedTarget,
-      previousCommandValue: image.opacity.interpolation.lastCommandValue,
+      previousCommandValue: image.finalOpacity.interpolation.lastCommandValue,
       options
     });
     if (requiresInterpolation) {
-      image.opacity.interpolation.state = state;
-      image.opacity.from = image.opacity.current;
-      image.opacity.to = clampedTarget;
+      image.finalOpacity.interpolation.state = state;
+      image.finalOpacity.from = image.finalOpacity.current;
+      image.finalOpacity.to = clampedTarget;
     } else {
-      image.opacity.current = clampedTarget;
-      image.opacity.from = void 0;
-      image.opacity.to = void 0;
-      image.opacity.interpolation.state = null;
+      image.finalOpacity.current = clampedTarget;
+      image.finalOpacity.from = void 0;
+      image.finalOpacity.to = void 0;
+      image.finalOpacity.interpolation.state = null;
     }
   }
-  image.opacity.interpolation.lastCommandValue = clampedTarget;
-  image.opacity.interpolation.targetValue = clampedTarget;
+  image.finalOpacity.interpolation.lastCommandValue = clampedTarget;
+  image.finalOpacity.interpolation.targetValue = clampedTarget;
 };
 const applyOpacityUpdate = (image, nextOpacity, interpolationOptions, spriteOpacityMultiplier = 1) => {
   const clampedBase = clampOpacity(nextOpacity);
   const lodMultiplier = typeof image.lodOpacity === "number" ? image.lodOpacity : 1;
-  image.opacity.interpolation.baseValue = clampedBase;
+  image.finalOpacity.interpolation.baseValue = clampedBase;
+  image.opacity = clampedBase;
   runOpacityTargetTransition(
     image,
     clampedBase * spriteOpacityMultiplier * lodMultiplier,
@@ -23914,48 +23841,64 @@ const applyResolvedOpacityTarget = (image, resolvedTarget, interpolationOptions)
 };
 const stepOpacityInterpolation = (image, timestamp) => {
   const { state, active } = stepDistanceInterpolationState(
-    image.opacity.interpolation.state,
+    image.finalOpacity.interpolation.state,
     timestamp,
     (value) => {
-      image.opacity.current = value;
+      image.finalOpacity.current = value;
     },
     {
       normalize: clampOpacity
     }
   );
-  image.opacity.interpolation.state = state;
+  image.finalOpacity.interpolation.state = state;
   if (!state) {
-    image.opacity.from = void 0;
-    image.opacity.to = void 0;
+    image.finalOpacity.from = void 0;
+    image.finalOpacity.to = void 0;
   }
   return active;
 };
 const IMAGE_INTERPOLATION_STEPPERS = [
   { id: "rotation", step: stepRotationInterpolation },
-  { id: "offsetDeg", step: stepOffsetDegInterpolation },
-  { id: "offsetMeters", step: stepOffsetMetersInterpolation },
-  { id: "opacity", step: stepOpacityInterpolation }
+  {
+    id: "offsetDeg",
+    step: (image, timestamp, _autoRotationDeg) => stepOffsetDegInterpolation(image, timestamp)
+  },
+  {
+    id: "offsetMeters",
+    step: (image, timestamp, _autoRotationDeg) => stepOffsetMetersInterpolation(image, timestamp)
+  },
+  {
+    id: "opacity",
+    step: (image, timestamp, _autoRotationDeg) => stepOpacityInterpolation(image, timestamp)
+  }
 ];
 const stepSpriteImageInterpolations = (image, timestamp, options) => {
-  var _a;
+  var _a, _b;
   let active = false;
   const skipChannels = (_a = options == null ? void 0 : options.skipChannels) != null ? _a : null;
+  const autoRotationDeg = (_b = options == null ? void 0 : options.autoRotationDeg) != null ? _b : 0;
   for (const { id, step } of IMAGE_INTERPOLATION_STEPPERS) {
     if (skipChannels && skipChannels[id]) {
       continue;
     }
-    if (step(image, timestamp)) {
+    if (step(image, timestamp, autoRotationDeg)) {
       active = true;
     }
   }
   return active;
 };
 const hasActiveImageInterpolations = (image) => {
-  return image.rotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null || image.offset.offsetMeters.interpolation.state !== null || image.opacity.interpolation.state !== null;
+  return image.finalRotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null || image.offset.offsetMeters.interpolation.state !== null || image.finalOpacity.interpolation.state !== null;
 };
 const applyOffsetUpdate = (image, nextOffset, options = {}) => {
-  applyOffsetDegUpdate(image, nextOffset, options.deg);
-  applyOffsetMetersUpdate(image, nextOffset, options.meters);
+  const shouldUpdateMeters = options.meters !== void 0 || nextOffset.offsetMeters !== image.offset.offsetMeters.current;
+  if (shouldUpdateMeters) {
+    applyOffsetMetersUpdate(image, nextOffset, options.meters);
+  }
+  const shouldUpdateDeg = options.deg !== void 0 || nextOffset.offsetDeg !== image.offset.offsetDeg.current;
+  if (shouldUpdateDeg) {
+    applyOffsetDegUpdate(image, nextOffset, options.deg);
+  }
 };
 const VERTEX_COMPONENT_COUNT = 6;
 const POSITION_COMPONENT_COUNT = 4;
@@ -26017,14 +25960,17 @@ const resolveImageOffset$2 = (image) => {
     offsetDeg: offset.offsetDeg.current
   };
 };
-const calculateBorderWidthPixels = (widthMeters, imageScale, zoomScaleFactor, effectivePixelsPerMeter, sizeScaleAdjustment) => {
+const resolveAutoRotationDeg$1 = (sprite, image) => {
+  return image.autoRotation ? sprite.currentAutoRotateDeg : 0;
+};
+const calculateBorderWidthPixels = (widthMeters, imageScale, distanceScaleFactor, effectivePixelsPerMeter, sizeScaleAdjustment) => {
   if (widthMeters === void 0 || !Number.isFinite(widthMeters) || widthMeters <= 0) {
     return 0;
   }
   if (!Number.isFinite(effectivePixelsPerMeter) || effectivePixelsPerMeter <= 0) {
     return 0;
   }
-  const scaledWidthMeters = widthMeters * imageScale * zoomScaleFactor * sizeScaleAdjustment;
+  const scaledWidthMeters = widthMeters * imageScale * distanceScaleFactor * sizeScaleAdjustment;
   if (!Number.isFinite(scaledWidthMeters) || scaledWidthMeters <= 0) {
     return 0;
   }
@@ -26063,14 +26009,13 @@ const ensureHitTestCorners$1 = (imageEntry) => {
   }
   return imageEntry.hitTestCorners;
 };
-const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor, originCenterCache, {
+const collectDepthSortedItemsInternal = (projectionHost, zoom, originCenterCache, {
   bucket,
   bucketBuffers,
   imageResources,
+  resolvedScaling,
   clipContext,
   baseMetersPerPixel,
-  spriteMinPixel,
-  spriteMaxPixel,
   drawingBufferWidth,
   drawingBufferHeight,
   pixelRatio
@@ -26085,6 +26030,7 @@ const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor,
     throw new Error("bucketBuffers length mismatch");
   }
   const resolveOrigin = createBucketOriginResolver(bucket);
+  const cameraLocation = projectionHost.getCameraLocation();
   for (const [spriteEntry, imageEntry] of bucket) {
     const imageResource = imageResources[imageEntry.imageHandle];
     if (!imageResource || !imageResource.texture) {
@@ -26113,23 +26059,35 @@ const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor,
     if (effectivePixelsPerMeter <= 0) {
       continue;
     }
+    const spriteBaseLocation = spriteEntry.location.current;
+    const spriteDistanceLocation = {
+      lng: spriteBaseLocation.lng,
+      lat: spriteBaseLocation.lat,
+      z: (_a = spriteBaseLocation.z) != null ? _a : 0
+    };
+    const cameraDistanceMeters = cameraLocation !== void 0 ? calculateCartesianDistanceMeters(
+      cameraLocation,
+      spriteDistanceLocation
+    ) : Number.POSITIVE_INFINITY;
+    const distanceScaleFactor = calculateDistanceScaleFactor(
+      cameraDistanceMeters,
+      resolvedScaling
+    );
     const centerParams = {
       projectionHost,
       imageResources,
       originCenterCache,
       projected,
       baseMetersPerPixel,
-      spriteMinPixel,
-      spriteMaxPixel,
       effectivePixelsPerMeter,
-      zoomScaleFactor,
+      distanceScaleFactor,
       drawingBufferWidth,
       drawingBufferHeight,
       pixelRatio,
       clipContext,
       resolveOrigin
     };
-    const anchorResolved = (_a = imageEntry.anchor) != null ? _a : DEFAULT_ANCHOR;
+    const anchorResolved = (_b = imageEntry.anchor) != null ? _b : DEFAULT_ANCHOR;
     const offsetResolved = resolveImageOffset$2(imageEntry);
     const depthCenter = computeImageCenterXY(
       spriteEntry,
@@ -26139,26 +26097,22 @@ const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor,
     );
     let depthKey;
     if (imageEntry.mode === "surface") {
-      const imageScale = (_b = imageEntry.scale) != null ? _b : 1;
+      const imageScale = (_c = imageEntry.scale) != null ? _c : 1;
       const worldDims = calculateSurfaceWorldDimensions(
         imageResource.width,
         imageResource.height,
         baseMetersPerPixel,
         imageScale,
-        zoomScaleFactor,
-        {
-          effectivePixelsPerMeter,
-          spriteMinPixel,
-          spriteMaxPixel
-        }
+        distanceScaleFactor
       );
-      const totalRotateDeg = Number.isFinite(imageEntry.displayedRotateDeg) ? imageEntry.displayedRotateDeg : normalizeAngleDeg(
-        ((_c = imageEntry.resolvedBaseRotateDeg) != null ? _c : 0) + imageEntry.rotationCommandDeg
+      const autoRotationDeg = resolveAutoRotationDeg$1(spriteEntry, imageEntry);
+      const totalRotateDeg = normalizeAngleDeg(
+        Number.isFinite(imageEntry.finalRotateDeg.current) ? imageEntry.finalRotateDeg.current : autoRotationDeg + imageEntry.rotateDeg
       );
       const offsetMeters = calculateSurfaceOffsetMeters(
         offsetResolved,
         imageScale,
-        zoomScaleFactor,
+        distanceScaleFactor,
         worldDims.scaleAdjustment
       );
       const cornerDisplacements = calculateSurfaceCornerDisplacements({
@@ -26225,6 +26179,8 @@ const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor,
       image: imageEntry,
       resource: imageResource,
       depthKey,
+      cameraDistanceMeters,
+      distanceScaleFactor,
       resolveOrigin
     });
   }
@@ -26262,15 +26218,13 @@ const projectLngLatToClipSpace = (projectionHost, location2, context) => {
   return [clipX, clipY, clipZ, clipW];
 };
 const computeImageCenterXY = (sprite, image, params, useResolvedAnchor) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const {
     originCenterCache,
     projected,
     baseMetersPerPixel,
-    spriteMinPixel,
-    spriteMaxPixel,
     effectivePixelsPerMeter,
-    zoomScaleFactor,
+    distanceScaleFactor,
     imageResources,
     projectionHost,
     drawingBufferWidth,
@@ -26305,10 +26259,11 @@ const computeImageCenterXY = (sprite, image, params, useResolvedAnchor) => {
       base = refCenter;
     }
   }
-  const totalRotDeg = Number.isFinite(image.displayedRotateDeg) ? image.displayedRotateDeg : normalizeAngleDeg(
-    ((_a = image.resolvedBaseRotateDeg) != null ? _a : 0) + image.rotationCommandDeg
+  const autoRotationDeg = resolveAutoRotationDeg$1(sprite, image);
+  const totalRotDeg = normalizeAngleDeg(
+    Number.isFinite(image.finalRotateDeg.current) ? image.finalRotateDeg.current : autoRotationDeg + image.rotateDeg
   );
-  const imageScaleLocal = (_b = image.scale) != null ? _b : 1;
+  const imageScaleLocal = (_a = image.scale) != null ? _a : 1;
   const imageResourceRef = imageResources[image.imageHandle];
   if (image.mode === "billboard") {
     const placement = calculateBillboardCenterPosition({
@@ -26317,10 +26272,8 @@ const computeImageCenterXY = (sprite, image, params, useResolvedAnchor) => {
       imageHeight: imageResourceRef == null ? void 0 : imageResourceRef.height,
       baseMetersPerPixel,
       imageScale: imageScaleLocal,
-      zoomScaleFactor,
+      distanceScaleFactor,
       effectivePixelsPerMeter,
-      spriteMinPixel,
-      spriteMaxPixel,
       totalRotateDeg: totalRotDeg,
       anchor: image.anchor,
       offset: resolveImageOffset$2(image)
@@ -26336,7 +26289,7 @@ const computeImageCenterXY = (sprite, image, params, useResolvedAnchor) => {
   }
   const baseLngLat = image.originLocation !== void 0 ? (
     // When anchored to another image, reproject the 2D reference point back to geographic space.
-    (_c = projectionHost.unproject(base)) != null ? _c : sprite.location.current
+    (_b = projectionHost.unproject(base)) != null ? _b : sprite.location.current
   ) : (
     // Otherwise use the sprite's own interpolated geographic location.
     sprite.location.current
@@ -26348,13 +26301,10 @@ const computeImageCenterXY = (sprite, image, params, useResolvedAnchor) => {
     imageHeight: imageResourceRef == null ? void 0 : imageResourceRef.height,
     baseMetersPerPixel,
     imageScale: imageScaleLocal,
-    zoomScaleFactor,
+    distanceScaleFactor,
     totalRotateDeg: totalRotDeg,
     anchor: image.anchor,
     offset: resolveImageOffset$2(image),
-    effectivePixelsPerMeter,
-    spriteMinPixel,
-    spriteMaxPixel,
     projectToClipSpace,
     drawingBufferWidth,
     drawingBufferHeight,
@@ -26362,8 +26312,8 @@ const computeImageCenterXY = (sprite, image, params, useResolvedAnchor) => {
     resolveAnchorless: true,
     project: projectToClipSpace ? void 0 : projectionHost.project
   });
-  const anchorlessCenter = (_d = surfacePlacement.anchorlessCenter) != null ? _d : base;
-  const anchorAppliedCenter = (_e = surfacePlacement.center) != null ? _e : anchorlessCenter;
+  const anchorlessCenter = (_c = surfacePlacement.anchorlessCenter) != null ? _c : base;
+  const anchorAppliedCenter = (_d = surfacePlacement.center) != null ? _d : anchorlessCenter;
   const entry = cachedEntry != null ? cachedEntry : {
     anchorless: anchorlessCenter,
     anchorApplied: anchorAppliedCenter
@@ -26455,11 +26405,9 @@ const prepareSurfaceShaderInputs = (projectionHost, params) => {
     clipCorners: []
   };
 };
-const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFactor, originCenterCache, {
+const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, originCenterCache, {
   imageResources,
   baseMetersPerPixel,
-  spriteMinPixel,
-  spriteMaxPixel,
   drawingBufferWidth,
   drawingBufferHeight,
   pixelRatio,
@@ -26473,7 +26421,7 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
   screenToClipOffsetX,
   screenToClipOffsetY
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f;
   const spriteEntry = item.sprite;
   const imageEntry = item.image;
   const imageResource = item.resource;
@@ -26485,6 +26433,8 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
   const atlasUSpan = atlasU1 - atlasU0;
   const atlasVSpan = atlasV1 - atlasV0;
   const spriteMercator = resolveSpriteMercator(projectionHost, item.sprite);
+  const distanceScaleFactor = item.distanceScaleFactor;
+  const cameraDistanceMeters = item.cameraDistanceMeters;
   imageEntry.surfaceShaderInputs = void 0;
   imageEntry.borderPixelWidth = 0;
   let screenCornerBuffer = null;
@@ -26502,8 +26452,9 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
   let borderSizeScaleAdjustment = 1;
   const anchor = (_a = imageEntry.anchor) != null ? _a : DEFAULT_ANCHOR;
   const offsetDef = resolveImageOffset$2(imageEntry);
-  const totalRotateDeg = Number.isFinite(imageEntry.displayedRotateDeg) ? imageEntry.displayedRotateDeg : normalizeAngleDeg(
-    ((_b = imageEntry.resolvedBaseRotateDeg) != null ? _b : 0) + imageEntry.rotationCommandDeg
+  const autoRotationDeg = resolveAutoRotationDeg$1(spriteEntry, imageEntry);
+  const totalRotateDeg = normalizeAngleDeg(
+    Number.isFinite(imageEntry.finalRotateDeg.current) ? imageEntry.finalRotateDeg.current : autoRotationDeg + imageEntry.rotateDeg
   );
   const projected = projectionHost.project(spriteEntry.location.current);
   if (!projected) {
@@ -26527,17 +26478,15 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
   if (effectivePixelsPerMeter <= 0) {
     return null;
   }
-  const imageScale = (_c = imageEntry.scale) != null ? _c : 1;
+  const imageScale = (_b = imageEntry.scale) != null ? _b : 1;
   const centerParams = {
     projectionHost,
     imageResources,
     originCenterCache,
     projected,
     baseMetersPerPixel,
-    spriteMinPixel,
-    spriteMaxPixel,
     effectivePixelsPerMeter,
-    zoomScaleFactor,
+    distanceScaleFactor,
     drawingBufferWidth,
     drawingBufferHeight,
     pixelRatio,
@@ -26552,7 +26501,7 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
         spriteEntry,
         refImg,
         centerParams,
-        (_d = imageEntry.originLocation.useResolvedAnchor) != null ? _d : false
+        (_c = imageEntry.originLocation.useResolvedAnchor) != null ? _c : false
       );
     }
   }
@@ -26576,14 +26525,6 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
     };
   };
   const baseLocation = resolveBaseLocation();
-  const cameraLocation = projectionHost.getCameraLocation();
-  const spriteBaseLocation = spriteEntry.location.current;
-  const spriteDistanceLocation = {
-    lng: spriteBaseLocation.lng,
-    lat: spriteBaseLocation.lat,
-    z: (_e = spriteBaseLocation.z) != null ? _e : 0
-  };
-  const cameraDistanceMeters = cameraLocation !== void 0 ? calculateCartesianDistanceMeters(cameraLocation, spriteDistanceLocation) : Number.POSITIVE_INFINITY;
   if (imageEntry.mode === "surface") {
     screenToClipUniforms = {
       scaleX: identityScaleX,
@@ -26598,13 +26539,10 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
       imageHeight: imageResource.height,
       baseMetersPerPixel,
       imageScale,
-      zoomScaleFactor,
+      distanceScaleFactor,
       totalRotateDeg,
       anchor,
       offset: offsetDef,
-      effectivePixelsPerMeter,
-      spriteMinPixel,
-      spriteMaxPixel,
       projectToClipSpace: (location2) => projectLngLatToClipSpace(projectionHost, location2, clipContext),
       drawingBufferWidth,
       drawingBufferHeight,
@@ -26618,7 +26556,7 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
     const offsetMeters = calculateSurfaceOffsetMeters(
       offsetDef,
       imageScale,
-      zoomScaleFactor,
+      distanceScaleFactor,
       surfaceCenter.worldDimensions.scaleAdjustment
     );
     const cornerDisplacements = calculateSurfaceCornerDisplacements({
@@ -26630,7 +26568,7 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
     });
     const orderIndex = Math.min(imageEntry.order, ORDER_MAX - 1);
     const depthBiasNdc = -((imageEntry.subLayer * ORDER_BUCKET + orderIndex) * EPS_NDC);
-    const displacedCenter = (_f = surfaceCenter.displacedLngLat) != null ? _f : baseLngLat;
+    const displacedCenter = (_d = surfaceCenter.displacedLngLat) != null ? _d : baseLngLat;
     const surfaceShaderInputs = prepareSurfaceShaderInputs(projectionHost, {
       baseLngLat,
       worldWidthMeters: surfaceCenter.worldDimensions.width,
@@ -26816,10 +26754,8 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
       imageHeight: imageResource.height,
       baseMetersPerPixel,
       imageScale,
-      zoomScaleFactor,
+      distanceScaleFactor,
       effectivePixelsPerMeter,
-      spriteMinPixel,
-      spriteMaxPixel,
       totalRotateDeg,
       anchor,
       offset: offsetDef
@@ -26887,19 +26823,19 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
     }
     writeBillboardCorners(resolvedCorners, useShaderBillboard);
   }
-  const borderWidthMeters = (_g = imageEntry.border) == null ? void 0 : _g.widthMeters;
+  const borderWidthMeters = (_e = imageEntry.border) == null ? void 0 : _e.widthMeters;
   imageEntry.borderPixelWidth = calculateBorderWidthPixels(
     borderWidthMeters,
     imageScale,
-    zoomScaleFactor,
+    distanceScaleFactor,
     effectivePixelsPerMeter,
     borderSizeScaleAdjustment
   );
-  const leaderLineWidthMeters = (_h = imageEntry.leaderLine) == null ? void 0 : _h.widthMeters;
+  const leaderLineWidthMeters = (_f = imageEntry.leaderLine) == null ? void 0 : _f.widthMeters;
   imageEntry.leaderLinePixelWidth = calculateBorderWidthPixels(
     leaderLineWidthMeters,
     imageScale,
-    zoomScaleFactor,
+    distanceScaleFactor,
     effectivePixelsPerMeter,
     borderSizeScaleAdjustment
   );
@@ -26909,7 +26845,7 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
     imageEntry,
     imageResource,
     vertexData: new Float32Array(QUAD_VERTEX_SCRATCH),
-    opacity: imageEntry.opacity.current,
+    opacity: imageEntry.finalOpacity.current,
     hitTestCorners,
     screenToClip: screenToClipUniforms,
     useShaderSurface,
@@ -26925,19 +26861,17 @@ const prepareDrawSpriteImages = (projectionHost, params) => {
   const originCenterCache = /* @__PURE__ */ new Map();
   const zoom = projectionHost.getZoom();
   const resolvedScaling = (_a = params.resolvedScaling) != null ? _a : resolveScalingOptions({
-    metersPerPixel: params.baseMetersPerPixel,
-    spriteMinPixel: params.spriteMinPixel,
-    spriteMaxPixel: params.spriteMaxPixel,
-    zoomMin: zoom,
-    zoomMax: zoom
+    metersPerPixel: params.baseMetersPerPixel
   });
-  const zoomScaleFactor = calculateZoomScaleFactor(zoom, resolvedScaling);
+  const preparedParams = {
+    ...params,
+    resolvedScaling
+  };
   const itemsWithDepth = collectDepthSortedItemsInternal(
     projectionHost,
     zoom,
-    zoomScaleFactor,
     originCenterCache,
-    params
+    preparedParams
   );
   const preparedItems = [];
   for (const item of itemsWithDepth) {
@@ -26945,9 +26879,8 @@ const prepareDrawSpriteImages = (projectionHost, params) => {
       projectionHost,
       item,
       zoom,
-      zoomScaleFactor,
       originCenterCache,
-      params
+      preparedParams
     );
     if (prepared) {
       preparedItems.push(prepared);
@@ -26965,7 +26898,7 @@ const resolveVisibilityLodMultiplier = (sprite, cameraDistanceMeters) => {
   return cameraDistanceMeters >= threshold ? 0 : 1;
 };
 const applyVisibilityDistanceLod = (preparedItems) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   if (!preparedItems.length) {
     return;
   }
@@ -26981,14 +26914,14 @@ const applyVisibilityDistanceLod = (preparedItems) => {
       continue;
     }
     image.lodOpacity = lodMultiplier;
-    const baseOpacity = (_b = image.opacity.interpolation.baseValue) != null ? _b : image.opacity.current;
+    const baseOpacity = (_b = image.finalOpacity.interpolation.baseValue) != null ? _b : image.finalOpacity.current;
     const combinedTarget = clampOpacity(
-      baseOpacity * (sprite.opacityMultiplier || 1) * lodMultiplier
+      baseOpacity * ((_c = sprite.opacityMultiplier) != null ? _c : 1) * lodMultiplier
     );
     applyResolvedOpacityTarget(
       image,
       combinedTarget,
-      (_c = image.opacity.interpolation.options) != null ? _c : null
+      (_d = image.finalOpacity.interpolation.options) != null ? _d : null
     );
   }
 };
@@ -26997,7 +26930,7 @@ const syncPreparedOpacities = (preparedItems) => {
     return;
   }
   for (const prepared of preparedItems) {
-    prepared.opacity = prepared.imageEntry.opacity.current;
+    prepared.opacity = prepared.imageEntry.finalOpacity.current;
   }
 };
 const filterVisiblePreparedItems = (preparedItems) => {
@@ -27012,93 +26945,61 @@ const filterVisiblePreparedItems = (preparedItems) => {
   }
   return visibleItems;
 };
-const evaluateDistanceInterpolationsBatch = (requests) => {
-  if (!requests.length) {
-    return [];
-  }
-  return requests.map((request) => evaluateDistanceInterpolation(request));
-};
-const evaluateDegreeInterpolationsBatch = (requests) => {
-  if (!requests.length) {
+const evaluateDistanceInterpolationsBatch = (states, timestamp) => {
+  if (!states.length) {
     return [];
   }
-  return requests.map((request) => evaluateDegreeInterpolation(request));
+  return states.map((state) => evaluateDistanceInterpolation(state, timestamp));
 };
-const evaluateSpriteInterpolationsBatch = (requests) => {
-  if (!requests.length) {
+const evaluateDegreeInterpolationsBatch = (states, timestamp) => {
+  if (!states.length) {
     return [];
   }
-  return requests.map((request) => evaluateInterpolation(request));
-};
-const defaultInterpolationEvaluationHandlers = {
-  evaluateDistance: (requests) => evaluateDistanceInterpolationsBatch(requests),
-  evaluateDegree: (requests) => evaluateDegreeInterpolationsBatch(requests),
-  evaluateSprite: (requests) => evaluateSpriteInterpolationsBatch(requests)
-};
-const applySpriteInterpolationEvaluations$1 = (workItems, evaluations, timestamp) => {
-  var _a;
-  let active = false;
-  for (let index = 0; index < workItems.length; index += 1) {
-    const item = workItems[index];
-    const { sprite, state } = item;
-    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateInterpolation({
-      state,
-      timestamp
-    });
-    if (state.startTimestamp < 0) {
-      state.startTimestamp = evaluation.effectiveStartTimestamp;
-    }
-    sprite.location.current = evaluation.location;
-    if (evaluation.completed) {
-      sprite.location.current = cloneSpriteLocation(state.to);
-      sprite.location.from = void 0;
-      sprite.location.to = void 0;
-      sprite.location.interpolation.state = null;
-    } else {
-      active = true;
-    }
-  }
-  return active;
+  return states.map((state) => evaluateDegreeInterpolation(state, timestamp));
 };
 const ensureOpacityInterpolationTarget = (sprite, image) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const target = clampOpacity(
-    ((_a = image.opacity.interpolation.baseValue) != null ? _a : image.opacity.current) * (sprite.opacityMultiplier || 1) * ((_b = image.lodOpacity) != null ? _b : 1)
+    ((_a = image.finalOpacity.interpolation.baseValue) != null ? _a : image.finalOpacity.current) * ((_b = sprite.opacityMultiplier) != null ? _b : 1) * ((_c = image.lodOpacity) != null ? _c : 1)
   );
-  const interpolationState = image.opacity.interpolation.state;
-  const currentStateTarget = interpolationState ? clampOpacity((_c = interpolationState.pathTarget) != null ? _c : interpolationState.to) : image.opacity.current;
+  const interpolationState = image.finalOpacity.interpolation.state;
+  const currentStateTarget = interpolationState ? clampOpacity((_d = interpolationState.pathTarget) != null ? _d : interpolationState.to) : image.finalOpacity.current;
   if (interpolationState) {
     if (Math.abs(currentStateTarget - target) <= OPACITY_TARGET_EPSILON) {
       return;
     }
-  } else if (Math.abs(image.opacity.current - target) <= OPACITY_TARGET_EPSILON) {
+  } else if (Math.abs(image.finalOpacity.current - target) <= OPACITY_TARGET_EPSILON) {
     return;
   }
-  const options = image.opacity.interpolation.options;
+  const options = image.finalOpacity.interpolation.options;
   if (options && options.durationMs > 0) {
     const { state, requiresInterpolation } = createDistanceInterpolationState({
-      currentValue: clampOpacity(image.opacity.current),
+      currentValue: clampOpacity(image.finalOpacity.current),
       targetValue: target,
-      previousCommandValue: image.opacity.interpolation.lastCommandValue,
+      previousCommandValue: image.finalOpacity.interpolation.lastCommandValue,
       options
     });
     if (requiresInterpolation) {
-      image.opacity.interpolation.state = state;
-      image.opacity.from = image.opacity.current;
-      image.opacity.to = target;
+      image.finalOpacity.interpolation.state = state;
+      image.finalOpacity.from = image.finalOpacity.current;
+      image.finalOpacity.to = target;
       return;
     }
   }
-  image.opacity.current = target;
-  image.opacity.from = void 0;
-  image.opacity.to = void 0;
-  image.opacity.interpolation.state = null;
-  image.opacity.interpolation.lastCommandValue = target;
-  image.opacity.interpolation.targetValue = target;
+  image.finalOpacity.current = target;
+  image.finalOpacity.from = void 0;
+  image.finalOpacity.to = void 0;
+  image.finalOpacity.interpolation.state = null;
+  image.finalOpacity.interpolation.lastCommandValue = target;
+  image.finalOpacity.interpolation.targetValue = target;
+};
+const DEFAULT_INTERPOLATION_EVALUATION_HANDLERS = {
+  evaluateDistance: evaluateDistanceInterpolationsBatch,
+  evaluateDegree: evaluateDegreeInterpolationsBatch,
+  evaluateSprite: evaluateLocationInterpolationsBatch
 };
-const processInterpolationsInternal = (params, handlers = defaultInterpolationEvaluationHandlers) => {
+const processInterpolationsInternal = (params, handlers = DEFAULT_INTERPOLATION_EVALUATION_HANDLERS) => {
   var _a;
-  const evaluationHandlers = handlers != null ? handlers : defaultInterpolationEvaluationHandlers;
   const { sprites, timestamp } = params;
   if (!sprites.length) {
     return {
@@ -27108,14 +27009,13 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
   }
   const distanceInterpolationWorkItems = [];
   const degreeInterpolationWorkItems = [];
-  const spriteInterpolationWorkItems = [];
+  const locationInterpolationWorkItems = [];
   let hasActiveInterpolation = false;
   for (const sprite of sprites) {
-    const locationInterpolation = sprite.location.interpolation;
-    const state = locationInterpolation.state;
-    if (state) {
-      spriteInterpolationWorkItems.push({ sprite, state });
-    }
+    collectLocationInterpolationWorkItems(
+      sprite,
+      locationInterpolationWorkItems
+    );
     sprite.images.forEach((orderMap) => {
       orderMap.forEach((image) => {
         const hasOffsetMetersInterpolation = image.offset.offsetMeters.interpolation.state !== null;
@@ -27123,14 +27023,14 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
           collectDistanceInterpolationWorkItems(
             image,
             distanceInterpolationWorkItems,
-            {
-              includeOpacity: false
-            }
+            true,
+            // includeOffsetMeters
+            false
           );
         }
         ensureOpacityInterpolationTarget(sprite, image);
-        const hasOpacityInterpolation = image.opacity.interpolation.state !== null;
-        const hasDegreeInterpolation = image.rotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null;
+        const hasOpacityInterpolation = image.finalOpacity.interpolation.state !== null;
+        const hasDegreeInterpolation = image.finalRotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null;
         if (hasDegreeInterpolation) {
           collectDegreeInterpolationWorkItems(
             image,
@@ -27152,38 +27052,33 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
           skipChannels.offsetDeg = true;
           shouldSkipChannels = true;
         }
-        if (stepSpriteImageInterpolations(
-          image,
-          timestamp,
-          shouldSkipChannels ? { skipChannels } : void 0
-        )) {
+        const interpolationOptions = shouldSkipChannels ? {
+          skipChannels,
+          autoRotationDeg: resolveAutoRotationDeg$1(sprite, image)
+        } : { autoRotationDeg: resolveAutoRotationDeg$1(sprite, image) };
+        if (stepSpriteImageInterpolations(image, timestamp, interpolationOptions)) {
           hasActiveInterpolation = true;
         }
       });
     });
   }
-  const distanceRequests = distanceInterpolationWorkItems.length > 0 ? distanceInterpolationWorkItems.map(({ state }) => ({
-    state,
-    timestamp
-  })) : [];
-  const degreeRequests = degreeInterpolationWorkItems.length > 0 ? degreeInterpolationWorkItems.map(({ state }) => ({
-    state,
-    timestamp
-  })) : [];
-  const spriteRequests = spriteInterpolationWorkItems.length > 0 ? spriteInterpolationWorkItems.map(({ state }) => ({
-    state,
-    timestamp
-  })) : [];
-  const hasRequests = distanceRequests.length > 0 || degreeRequests.length > 0 || spriteRequests.length > 0;
+  const hasRequests = distanceInterpolationWorkItems.length > 0 || degreeInterpolationWorkItems.length > 0 || locationInterpolationWorkItems.length > 0;
   if (hasRequests) {
-    (_a = evaluationHandlers.prepare) == null ? void 0 : _a.call(evaluationHandlers, {
-      distance: distanceRequests,
-      degree: degreeRequests,
-      sprite: spriteRequests
-    });
+    (_a = handlers.prepare) == null ? void 0 : _a.call(
+      handlers,
+      {
+        distance: distanceInterpolationWorkItems,
+        degree: degreeInterpolationWorkItems,
+        sprite: locationInterpolationWorkItems
+      },
+      timestamp
+    );
   }
-  if (distanceRequests.length > 0) {
-    const evaluations = evaluationHandlers.evaluateDistance(distanceRequests);
+  if (distanceInterpolationWorkItems.length > 0) {
+    const evaluations = handlers.evaluateDistance(
+      distanceInterpolationWorkItems,
+      timestamp
+    );
     if (applyDistanceInterpolationEvaluations(
       distanceInterpolationWorkItems,
       evaluations,
@@ -27192,8 +27087,11 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
       hasActiveInterpolation = true;
     }
   }
-  if (degreeRequests.length > 0) {
-    const evaluations = evaluationHandlers.evaluateDegree(degreeRequests);
+  if (degreeInterpolationWorkItems.length > 0) {
+    const evaluations = handlers.evaluateDegree(
+      degreeInterpolationWorkItems,
+      timestamp
+    );
     if (applyDegreeInterpolationEvaluations(
       degreeInterpolationWorkItems,
       evaluations,
@@ -27202,10 +27100,13 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
       hasActiveInterpolation = true;
     }
   }
-  if (spriteRequests.length > 0) {
-    const evaluations = evaluationHandlers.evaluateSprite(spriteRequests);
-    if (applySpriteInterpolationEvaluations$1(
-      spriteInterpolationWorkItems,
+  if (locationInterpolationWorkItems.length > 0) {
+    const evaluations = handlers.evaluateSprite(
+      locationInterpolationWorkItems,
+      timestamp
+    );
+    if (applyLocationInterpolationEvaluations(
+      locationInterpolationWorkItems,
       evaluations,
       timestamp
     )) {
@@ -27217,9 +27118,8 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
     hasActiveInterpolation
   };
 };
-const processOpacityInterpolationsAfterPreparation = (params, preparedItems, handlers = defaultInterpolationEvaluationHandlers) => {
+const processOpacityInterpolationsAfterPreparation = (params, preparedItems, handlers = DEFAULT_INTERPOLATION_EVALUATION_HANDLERS) => {
   var _a;
-  const evaluationHandlers = handlers != null ? handlers : defaultInterpolationEvaluationHandlers;
   const { sprites, timestamp } = params;
   if (!sprites.length) {
     return {
@@ -27232,10 +27132,14 @@ const processOpacityInterpolationsAfterPreparation = (params, preparedItems, han
     sprite.images.forEach((orderMap) => {
       orderMap.forEach((image) => {
         ensureOpacityInterpolationTarget(sprite, image);
-        if (image.opacity.interpolation.state !== null) {
-          collectDistanceInterpolationWorkItems(image, opacityWorkItems, {
-            includeOffsetMeters: false
-          });
+        if (image.finalOpacity.interpolation.state !== null) {
+          collectDistanceInterpolationWorkItems(
+            image,
+            opacityWorkItems,
+            false,
+            true
+            // includeOpacity
+          );
         }
       });
     });
@@ -27246,20 +27150,20 @@ const processOpacityInterpolationsAfterPreparation = (params, preparedItems, han
       hasActiveInterpolation: false
     };
   }
-  const opacityRequests = opacityWorkItems.length > 0 ? opacityWorkItems.map(({ state }) => ({
-    state,
-    timestamp
-  })) : [];
-  if (opacityRequests.length > 0) {
-    (_a = evaluationHandlers.prepare) == null ? void 0 : _a.call(evaluationHandlers, {
-      distance: opacityRequests,
-      degree: [],
-      sprite: []
-    });
+  if (opacityWorkItems.length > 0) {
+    (_a = handlers.prepare) == null ? void 0 : _a.call(
+      handlers,
+      {
+        distance: opacityWorkItems,
+        degree: [],
+        sprite: []
+      },
+      timestamp
+    );
   }
   let hasActiveInterpolation = false;
-  if (opacityRequests.length > 0) {
-    const evaluations = evaluationHandlers.evaluateDistance(opacityRequests);
+  if (opacityWorkItems.length > 0) {
+    const evaluations = handlers.evaluateDistance(opacityWorkItems, timestamp);
     if (applyDistanceInterpolationEvaluations(
       opacityWorkItems,
       evaluations,
@@ -27396,9 +27300,11 @@ const resolveImageOffset$1 = (image) => {
     offsetDeg: offset.offsetDeg.current
   };
 };
-const encodeDistanceInterpolationRequest = (buffer, cursor, request) => {
+const resolveAutoRotationDeg = (sprite, image) => {
+  return image.autoRotation ? sprite.currentAutoRotateDeg : 0;
+};
+const encodeDistanceInterpolationRequest = (buffer, cursor, state, timestamp) => {
   var _a;
-  const { state, timestamp } = request;
   const preset = encodeEasingPreset(state.easingParam);
   if (preset.id < 0) {
     throw new Error(
@@ -27417,9 +27323,8 @@ const encodeDistanceInterpolationRequest = (buffer, cursor, request) => {
   buffer[cursor++] = preset.param2;
   return cursor;
 };
-const encodeDegreeInterpolationRequest = (buffer, cursor, request) => {
+const encodeDegreeInterpolationRequest = (buffer, cursor, state, timestamp) => {
   var _a;
-  const { state, timestamp } = request;
   const preset = encodeEasingPreset(state.easingParam);
   if (preset.id < 0) {
     throw new Error(
@@ -27438,9 +27343,8 @@ const encodeDegreeInterpolationRequest = (buffer, cursor, request) => {
   buffer[cursor++] = preset.param2;
   return cursor;
 };
-const encodeSpriteInterpolationRequest = (buffer, cursor, request) => {
+const encodeSpriteInterpolationRequest = (buffer, cursor, state, timestamp) => {
   var _a, _b;
-  const { state, timestamp } = request;
   const preset = encodeEasingPreset(state.easingParam);
   if (preset.id < 0) {
     throw new Error(
@@ -27471,17 +27375,17 @@ const decodeSpriteInterpolationResult = (buffer, cursor) => {
   const hasZ = buffer[cursor++] !== 0;
   const completed = buffer[cursor++] !== 0;
   const effectiveStartTimestamp = buffer[cursor++];
-  const location2 = hasZ ? { lng, lat, z } : { lng, lat };
+  const value = hasZ ? { lng, lat, z } : { lng, lat };
   return {
     nextCursor: cursor,
     result: {
-      location: location2,
+      value,
       completed,
       effectiveStartTimestamp
     }
   };
 };
-const processInterpolationsViaWasm = (wasm, requests) => {
+const processInterpolationsViaWasm = (wasm, requests, timestamp) => {
   const distanceCount = requests.distance.length;
   const degreeCount = requests.degree.length;
   const spriteCount = requests.sprite.length;
@@ -27510,14 +27414,25 @@ const processInterpolationsViaWasm = (wasm, requests) => {
       cursor = encodeDistanceInterpolationRequest(
         paramsBuffer,
         cursor,
-        request
+        request,
+        timestamp
       );
     }
     for (const request of requests.degree) {
-      cursor = encodeDegreeInterpolationRequest(paramsBuffer, cursor, request);
+      cursor = encodeDegreeInterpolationRequest(
+        paramsBuffer,
+        cursor,
+        request,
+        timestamp
+      );
     }
     for (const request of requests.sprite) {
-      cursor = encodeSpriteInterpolationRequest(paramsBuffer, cursor, request);
+      cursor = encodeSpriteInterpolationRequest(
+        paramsBuffer,
+        cursor,
+        request,
+        timestamp
+      );
     }
     const resultPrepared = resultHolder.prepare();
     const success = wasm.processInterpolations(
@@ -27529,9 +27444,7 @@ const processInterpolationsViaWasm = (wasm, requests) => {
     }
     const resultBuffer = resultPrepared.buffer;
     let read = WASM_PROCESS_INTERPOLATIONS_HEADER_LENGTH;
-    const distanceResults = new Array(
-      distanceCount
-    );
+    const distanceResults = new Array(distanceCount);
     for (let i = 0; i < distanceCount; i += 1) {
       const value = resultBuffer[read++];
       const completed = resultBuffer[read++] !== 0;
@@ -27542,9 +27455,7 @@ const processInterpolationsViaWasm = (wasm, requests) => {
         effectiveStartTimestamp
       };
     }
-    const degreeResults = new Array(
-      degreeCount
-    );
+    const degreeResults = new Array(degreeCount);
     for (let i = 0; i < degreeCount; i += 1) {
       const value = resultBuffer[read++];
       const completed = resultBuffer[read++] !== 0;
@@ -27555,9 +27466,7 @@ const processInterpolationsViaWasm = (wasm, requests) => {
         effectiveStartTimestamp
       };
     }
-    const spriteResults = new Array(
-      spriteCount
-    );
+    const spriteResults = new Array(spriteCount);
     for (let i = 0; i < spriteCount; i += 1) {
       const decoded = decodeSpriteInterpolationResult(resultBuffer, read);
       spriteResults[i] = decoded.result;
@@ -27573,31 +27482,6 @@ const processInterpolationsViaWasm = (wasm, requests) => {
     paramsHolder.release();
   }
 };
-const applySpriteInterpolationEvaluations = (workItems, evaluations, timestamp) => {
-  var _a;
-  let active = false;
-  for (let index = 0; index < workItems.length; index += 1) {
-    const item = workItems[index];
-    const { sprite, state } = item;
-    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateInterpolation({
-      state,
-      timestamp
-    });
-    if (state.startTimestamp < 0) {
-      state.startTimestamp = evaluation.effectiveStartTimestamp;
-    }
-    sprite.location.current = evaluation.location;
-    if (evaluation.completed) {
-      sprite.location.current = cloneSpriteLocation(state.to);
-      sprite.location.from = void 0;
-      sprite.location.to = void 0;
-      sprite.location.interpolation.state = null;
-    } else {
-      active = true;
-    }
-  }
-  return active;
-};
 const processInterpolationsWithWasm = (wasm, params) => {
   const { sprites, timestamp } = params;
   if (!sprites.length) {
@@ -27608,7 +27492,7 @@ const processInterpolationsWithWasm = (wasm, params) => {
   }
   const distanceInterpolationWorkItems = [];
   const degreeInterpolationWorkItems = [];
-  const spriteInterpolationWorkItems = [];
+  const locationInterpolationWorkItems = [];
   const processedSprites = [];
   let hasActiveInterpolation = false;
   for (const sprite of sprites) {
@@ -27618,9 +27502,10 @@ const processInterpolationsWithWasm = (wasm, params) => {
     if (!hasSpriteInterpolation && !sprite.interpolationDirty) {
       continue;
     }
-    if (state) {
-      spriteInterpolationWorkItems.push({ sprite, state });
-    }
+    collectLocationInterpolationWorkItems(
+      sprite,
+      locationInterpolationWorkItems
+    );
     const touchedImages = [];
     sprite.images.forEach((orderMap) => {
       orderMap.forEach((image) => {
@@ -27637,13 +27522,13 @@ const processInterpolationsWithWasm = (wasm, params) => {
           collectDistanceInterpolationWorkItems(
             image,
             distanceInterpolationWorkItems,
-            {
-              includeOpacity: false
-            }
+            true,
+            // includeOffsetMeters
+            false
           );
         }
-        const hasOpacityInterpolation = image.opacity.interpolation.state !== null;
-        const hasDegreeInterpolation = image.rotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null;
+        const hasOpacityInterpolation = image.finalOpacity.interpolation.state !== null;
+        const hasDegreeInterpolation = image.finalRotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null;
         if (hasDegreeInterpolation) {
           collectDegreeInterpolationWorkItems(
             image,
@@ -27665,11 +27550,11 @@ const processInterpolationsWithWasm = (wasm, params) => {
           skipChannels.offsetDeg = true;
           shouldSkipChannels = true;
         }
-        if (stepSpriteImageInterpolations(
-          image,
-          timestamp,
-          shouldSkipChannels ? { skipChannels } : void 0
-        )) {
+        const interpolationOptions = shouldSkipChannels ? {
+          skipChannels,
+          autoRotationDeg: resolveAutoRotationDeg(sprite, image)
+        } : { autoRotationDeg: resolveAutoRotationDeg(sprite, image) };
+        if (stepSpriteImageInterpolations(image, timestamp, interpolationOptions)) {
           hasActiveInterpolation = true;
         }
       });
@@ -27680,29 +27565,21 @@ const processInterpolationsWithWasm = (wasm, params) => {
     }
     processedSprites.push({ sprite, touchedImages });
   }
-  const distanceRequests = distanceInterpolationWorkItems.length > 0 ? distanceInterpolationWorkItems.map(({ state }) => ({
-    state,
-    timestamp
-  })) : [];
-  const degreeRequests = degreeInterpolationWorkItems.length > 0 ? degreeInterpolationWorkItems.map(({ state }) => ({
-    state,
-    timestamp
-  })) : [];
-  const spriteRequests = spriteInterpolationWorkItems.length > 0 ? spriteInterpolationWorkItems.map(({ state }) => ({
-    state,
+  const hasPresetRequests = distanceInterpolationWorkItems.length > 0 || degreeInterpolationWorkItems.length > 0 || locationInterpolationWorkItems.length > 0;
+  const wasmResults = hasPresetRequests ? processInterpolationsViaWasm(
+    wasm,
+    {
+      distance: distanceInterpolationWorkItems,
+      degree: degreeInterpolationWorkItems,
+      sprite: locationInterpolationWorkItems
+    },
     timestamp
-  })) : [];
-  const hasPresetRequests = distanceRequests.length > 0 || degreeRequests.length > 0 || spriteRequests.length > 0;
-  const wasmResults = hasPresetRequests ? processInterpolationsViaWasm(wasm, {
-    distance: distanceRequests,
-    degree: degreeRequests,
-    sprite: spriteRequests
-  }) : {
+  ) : {
     distance: [],
     degree: [],
     sprite: []
   };
-  if (distanceRequests.length > 0) {
+  if (distanceInterpolationWorkItems.length > 0) {
     if (applyDistanceInterpolationEvaluations(
       distanceInterpolationWorkItems,
       wasmResults.distance,
@@ -27711,7 +27588,7 @@ const processInterpolationsWithWasm = (wasm, params) => {
       hasActiveInterpolation = true;
     }
   }
-  if (degreeRequests.length > 0) {
+  if (degreeInterpolationWorkItems.length > 0) {
     if (applyDegreeInterpolationEvaluations(
       degreeInterpolationWorkItems,
       wasmResults.degree,
@@ -27720,9 +27597,9 @@ const processInterpolationsWithWasm = (wasm, params) => {
       hasActiveInterpolation = true;
     }
   }
-  if (spriteRequests.length > 0) {
-    if (applySpriteInterpolationEvaluations(
-      spriteInterpolationWorkItems,
+  if (locationInterpolationWorkItems.length > 0) {
+    if (applyLocationInterpolationEvaluations(
+      locationInterpolationWorkItems,
       wasmResults.sprite,
       timestamp
     )) {
@@ -28245,6 +28122,9 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
       9
       /* FLAGS */
     ] = inputFlags;
+    const zoomScaleFactor = 1;
+    const spriteMinPixel = 0;
+    const spriteMaxPixel = 0;
     const frameConstView = parameterBuffer.subarray(
       frameConstOffset,
       frameConstOffset + INPUT_FRAME_CONSTANT_LENGTH
@@ -28261,12 +28141,12 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
       0
     );
     frameConstView[fcCursor++] = callParams.baseMetersPerPixel;
-    frameConstView[fcCursor++] = callParams.spriteMinPixel;
-    frameConstView[fcCursor++] = callParams.spriteMaxPixel;
+    frameConstView[fcCursor++] = spriteMinPixel;
+    frameConstView[fcCursor++] = spriteMaxPixel;
     frameConstView[fcCursor++] = callParams.drawingBufferWidth;
     frameConstView[fcCursor++] = callParams.drawingBufferHeight;
     frameConstView[fcCursor++] = callParams.pixelRatio;
-    frameConstView[fcCursor++] = toFiniteOr(callParams.zoomScaleFactor, 1);
+    frameConstView[fcCursor++] = zoomScaleFactor;
     frameConstView[fcCursor++] = callParams.identityScaleX;
     frameConstView[fcCursor++] = callParams.identityScaleY;
     frameConstView[fcCursor++] = callParams.identityOffsetX;
@@ -28286,7 +28166,7 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
     frameConstView[fcCursor++] = (_c = cameraLocation == null ? void 0 : cameraLocation.z) != null ? _c : 0;
     state.lastFrameParams = {
       baseMetersPerPixel: callParams.baseMetersPerPixel,
-      zoomScaleFactor: toFiniteOr(callParams.zoomScaleFactor, 1)
+      zoomScaleFactor
     };
     writeMatrix(
       parameterBuffer,
@@ -28347,7 +28227,7 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
     const originTargetIndices = (_g = (_f = callParams.bucketBuffers) == null ? void 0 : _f.originTargetIndices) != null ? _g : null;
     cursor = itemOffset;
     bucket.forEach(([sprite, image], index) => {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l;
       const imageHandle = image.imageHandle;
       const spriteHandle = sprite.handle;
       const originKeyCandidate = (_a2 = originReferenceKeys == null ? void 0 : originReferenceKeys[index]) != null ? _a2 : image.originReferenceKey;
@@ -28355,37 +28235,52 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
       const originIndex = (_b2 = originTargetIndices == null ? void 0 : originTargetIndices[index]) != null ? _b2 : image.originRenderTargetIndex;
       const originLocation = image.originLocation;
       const currentLocation = sprite.location.current;
+      const cameraLocation2 = preparedProjection.cameraLocation;
+      const cameraDistanceMeters = cameraLocation2 !== void 0 ? calculateCartesianDistanceMeters(cameraLocation2, {
+        lng: currentLocation.lng,
+        lat: currentLocation.lat,
+        z: (_c2 = currentLocation.z) != null ? _c2 : 0
+      }) : Number.POSITIVE_INFINITY;
+      const distanceScaleFactor = calculateDistanceScaleFactor(
+        cameraDistanceMeters,
+        callParams.resolvedScaling
+      );
+      const scaledImageScale = ((_d2 = image.scale) != null ? _d2 : 1) * distanceScaleFactor;
       parameterBuffer[cursor++] = spriteHandle;
       parameterBuffer[cursor++] = imageHandle;
       parameterBuffer[cursor++] = originIndex != null ? originIndex : SPRITE_ORIGIN_REFERENCE_INDEX_NONE;
       parameterBuffer[cursor++] = boolToNumber(
-        (_c2 = originLocation == null ? void 0 : originLocation.useResolvedAnchor) != null ? _c2 : false
+        (_e2 = originLocation == null ? void 0 : originLocation.useResolvedAnchor) != null ? _e2 : false
       );
       parameterBuffer[cursor++] = modeToNumber(image.mode);
-      parameterBuffer[cursor++] = (_d2 = image.scale) != null ? _d2 : 1;
-      parameterBuffer[cursor++] = image.opacity.current;
-      const anchor = (_e2 = image.anchor) != null ? _e2 : { x: 0, y: 0 };
+      parameterBuffer[cursor++] = scaledImageScale;
+      parameterBuffer[cursor++] = image.finalOpacity.current;
+      const anchor = (_f2 = image.anchor) != null ? _f2 : { x: 0, y: 0 };
       parameterBuffer[cursor++] = anchor.x;
       parameterBuffer[cursor++] = anchor.y;
       const offset = resolveImageOffset$1(image);
       parameterBuffer[cursor++] = offset.offsetMeters;
       parameterBuffer[cursor++] = offset.offsetDeg;
-      parameterBuffer[cursor++] = toFiniteOr(image.displayedRotateDeg, 0);
-      parameterBuffer[cursor++] = toFiniteOr(image.resolvedBaseRotateDeg, 0);
-      parameterBuffer[cursor++] = toFiniteOr(image.rotationCommandDeg, 0);
+      const autoRotationDeg = resolveAutoRotationDeg(sprite, image);
+      const resolvedRotation = normalizeAngleDeg(
+        toFiniteOr(image.finalRotateDeg.current, 0)
+      );
+      parameterBuffer[cursor++] = resolvedRotation;
+      parameterBuffer[cursor++] = toFiniteOr(autoRotationDeg, 0);
+      parameterBuffer[cursor++] = toFiniteOr(image.rotateDeg, 0);
       parameterBuffer[cursor++] = image.order;
       parameterBuffer[cursor++] = image.subLayer;
       parameterBuffer[cursor++] = originKey != null ? originKey : SPRITE_ORIGIN_REFERENCE_KEY_NONE;
-      parameterBuffer[cursor++] = (_f2 = originReferenceKeys == null ? void 0 : originReferenceKeys[index]) != null ? _f2 : SPRITE_ORIGIN_REFERENCE_KEY_NONE;
-      parameterBuffer[cursor++] = (_g2 = originTargetIndices == null ? void 0 : originTargetIndices[index]) != null ? _g2 : SPRITE_ORIGIN_REFERENCE_INDEX_NONE;
+      parameterBuffer[cursor++] = (_g2 = originReferenceKeys == null ? void 0 : originReferenceKeys[index]) != null ? _g2 : SPRITE_ORIGIN_REFERENCE_KEY_NONE;
+      parameterBuffer[cursor++] = (_h = originTargetIndices == null ? void 0 : originTargetIndices[index]) != null ? _h : SPRITE_ORIGIN_REFERENCE_INDEX_NONE;
       parameterBuffer[cursor++] = image.imageHandle;
       parameterBuffer[cursor++] = currentLocation.lng;
       parameterBuffer[cursor++] = currentLocation.lat;
-      parameterBuffer[cursor++] = (_h = currentLocation.z) != null ? _h : 0;
-      parameterBuffer[cursor++] = (_i = originLocation == null ? void 0 : originLocation.subLayer) != null ? _i : -1;
-      parameterBuffer[cursor++] = (_j = originLocation == null ? void 0 : originLocation.order) != null ? _j : -1;
+      parameterBuffer[cursor++] = (_i = currentLocation.z) != null ? _i : 0;
+      parameterBuffer[cursor++] = (_j = originLocation == null ? void 0 : originLocation.subLayer) != null ? _j : -1;
+      parameterBuffer[cursor++] = (_k = originLocation == null ? void 0 : originLocation.order) != null ? _k : -1;
       parameterBuffer[cursor++] = boolToNumber(
-        (_k = originLocation == null ? void 0 : originLocation.useResolvedAnchor) != null ? _k : false
+        (_l = originLocation == null ? void 0 : originLocation.useResolvedAnchor) != null ? _l : false
       );
       parameterBuffer[cursor++] = index;
     });
@@ -28435,39 +28330,306 @@ const createWasmCalculationHost = (params, deps) => {
     }
   };
   return {
-    processDrawSpriteImages: (params2) => runWithFallback(
-      () => {
-        let interpolationResult = params2.interpolationParams ? processInterpolationsWithWasm(wasm, params2.interpolationParams) : DEFAULT_RENDER_INTERPOLATION_RESULT;
-        const preparedItems = params2.prepareParams ? prepareDrawSpriteImagesInternal(
-          wasm,
-          wasmState,
-          deps,
-          params2.prepareParams
-        ) : [];
-        if (preparedItems.length > 0) {
-          applyVisibilityDistanceLod(preparedItems);
-        }
-        if (params2.interpolationParams) {
-          const opacityResult = processOpacityInterpolationsAfterPreparation(
-            params2.interpolationParams,
-            preparedItems
-          );
-          interpolationResult = {
-            handled: interpolationResult.handled || opacityResult.handled,
-            hasActiveInterpolation: interpolationResult.hasActiveInterpolation || opacityResult.hasActiveInterpolation
-          };
-        }
-        syncPreparedOpacities(preparedItems);
-        const visiblePreparedItems = filterVisiblePreparedItems(preparedItems);
-        return {
-          interpolationResult,
-          preparedItems: visiblePreparedItems
-        };
-      },
-      () => ensureFallbackHost().processDrawSpriteImages(params2)
-    ),
+    processDrawSpriteImages: (params2) => runWithFallback(
+      () => {
+        let interpolationResult = params2.interpolationParams ? processInterpolationsWithWasm(wasm, params2.interpolationParams) : DEFAULT_RENDER_INTERPOLATION_RESULT;
+        const preparedItems = params2.prepareParams ? prepareDrawSpriteImagesInternal(
+          wasm,
+          wasmState,
+          deps,
+          params2.prepareParams
+        ) : [];
+        if (preparedItems.length > 0) {
+          applyVisibilityDistanceLod(preparedItems);
+        }
+        if (params2.interpolationParams) {
+          const opacityResult = processOpacityInterpolationsAfterPreparation(
+            params2.interpolationParams,
+            preparedItems
+          );
+          interpolationResult = {
+            handled: interpolationResult.handled || opacityResult.handled,
+            hasActiveInterpolation: interpolationResult.hasActiveInterpolation || opacityResult.hasActiveInterpolation
+          };
+        }
+        syncPreparedOpacities(preparedItems);
+        const visiblePreparedItems = filterVisiblePreparedItems(preparedItems);
+        return {
+          interpolationResult,
+          preparedItems: visiblePreparedItems
+        };
+      },
+      () => ensureFallbackHost().processDrawSpriteImages(params2)
+    ),
+    release: () => {
+      releaseFallbackHost();
+    }
+  };
+};
+const createSpriteTrackingController = (mapInstance) => {
+  let trackedSpriteTrackRotation = true;
+  let trackedSprite;
+  let trackedSpriteFrameId = null;
+  const cancelTrackedSpriteFrame = () => {
+    if (trackedSpriteFrameId === null) {
+      return;
+    }
+    if (typeof window !== "undefined") {
+      window.cancelAnimationFrame(trackedSpriteFrameId);
+    }
+    trackedSpriteFrameId = null;
+  };
+  const untrackSpriteInternal = () => {
+    cancelTrackedSpriteFrame();
+  };
+  const applyTrackedSpriteRotation = (sprite) => {
+    let targetBearing = null;
+    for (const orderMap of sprite.images.values()) {
+      const iterator = orderMap.values().next();
+      if (!iterator.done) {
+        targetBearing = normalizeAngleDeg(
+          iterator.value.finalRotateDeg.current
+        );
+        break;
+      }
+    }
+    if (targetBearing === null) {
+      return false;
+    }
+    const currentBearing = normalizeAngleDeg(mapInstance.getBearing());
+    if (currentBearing === targetBearing) {
+      return false;
+    }
+    mapInstance.setBearing(targetBearing);
+    return true;
+  };
+  const stepTrackedSprite = () => {
+    trackedSpriteFrameId = null;
+    if (!mapInstance || !trackedSprite || typeof window === "undefined") {
+      return;
+    }
+    mapInstance.setCenter(trackedSprite.location.current);
+    if (trackedSpriteTrackRotation) {
+      applyTrackedSpriteRotation(trackedSprite);
+    }
+    trackedSpriteFrameId = window.requestAnimationFrame(stepTrackedSprite);
+  };
+  const trackSprite = (sprite, trackRotation) => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    trackedSpriteTrackRotation = trackRotation !== false;
+    trackedSprite = sprite;
+    cancelTrackedSpriteFrame();
+    trackedSpriteFrameId = window.requestAnimationFrame(stepTrackedSprite);
+  };
+  const untrackSprite = () => {
+    trackedSpriteTrackRotation = true;
+    trackedSprite = void 0;
+    untrackSpriteInternal();
+  };
+  return {
+    trackSprite,
+    untrackSprite,
+    release: () => {
+      untrackSpriteInternal();
+      trackedSprite = void 0;
+    }
+  };
+};
+const createSpriteMouseEventsController = ({
+  resolveHitTestResult,
+  resolveSpriteEventPayload,
+  updateVisibilityState
+}) => {
+  const eventListeners = /* @__PURE__ */ new Map();
+  const inputListenerDisposers = [];
+  let boundCanvasElement;
+  const registerDisposer = (disposer) => {
+    inputListenerDisposers.push(disposer);
+  };
+  const clearDomListeners = () => {
+    inputListenerDisposers.forEach((dispose) => dispose());
+    inputListenerDisposers.length = 0;
+  };
+  const getListenerSet = (type) => {
+    let set = eventListeners.get(type);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      eventListeners.set(type, set);
+    }
+    return set;
+  };
+  const addEventListener2 = (type, listener) => {
+    getListenerSet(type).add(listener);
+  };
+  const removeEventListener2 = (type, listener) => {
+    const listeners = eventListeners.get(type);
+    if (!listeners) {
+      return;
+    }
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      eventListeners.delete(type);
+    }
+  };
+  const hasSpriteListeners = (type) => {
+    var _a, _b;
+    return ((_b = (_a = eventListeners.get(type)) == null ? void 0 : _a.size) != null ? _b : 0) > 0;
+  };
+  const hasSpriteClickListeners = () => hasSpriteListeners("spriteclick");
+  const hasSpriteHoverListeners = () => hasSpriteListeners("spritehover");
+  const dispatchSpriteClick = (hitEntry, screenPoint, originalEvent) => {
+    const listeners = eventListeners.get("spriteclick");
+    if (!listeners || listeners.size === 0) {
+      return;
+    }
+    const payload = resolveSpriteEventPayload(hitEntry);
+    const clickEvent = {
+      type: "spriteclick",
+      sprite: payload.sprite,
+      image: payload.image,
+      screenPoint,
+      originalEvent
+    };
+    listeners.forEach((listener) => {
+      listener(clickEvent);
+    });
+  };
+  const dispatchSpriteHover = (hitEntry, screenPoint, originalEvent) => {
+    const listeners = eventListeners.get("spritehover");
+    if (!listeners || listeners.size === 0) {
+      return;
+    }
+    const payload = resolveSpriteEventPayload(hitEntry);
+    const hoverEvent = {
+      type: "spritehover",
+      sprite: payload.sprite,
+      image: payload.image,
+      screenPoint,
+      originalEvent
+    };
+    listeners.forEach((listener) => {
+      listener(hoverEvent);
+    });
+  };
+  const processClickEvent = (nativeEvent) => {
+    if (!hasSpriteClickListeners()) {
+      return;
+    }
+    const hitResult = resolveHitTestResult(nativeEvent);
+    if (!hitResult || !hitResult.hitEntry) {
+      return;
+    }
+    dispatchSpriteClick(hitResult.hitEntry, hitResult.screenPoint, nativeEvent);
+  };
+  const processHoverEvent = (nativeEvent) => {
+    if (!hasSpriteHoverListeners()) {
+      return;
+    }
+    const hitResult = resolveHitTestResult(nativeEvent);
+    if (!hitResult) {
+      return;
+    }
+    dispatchSpriteHover(hitResult.hitEntry, hitResult.screenPoint, nativeEvent);
+  };
+  const bindCanvas = (canvasElement) => {
+    var _a;
+    clearDomListeners();
+    boundCanvasElement = canvasElement;
+    const supportsPointerEvents = typeof window !== "undefined" && "PointerEvent" in window;
+    if (canvasElement) {
+      if (supportsPointerEvents) {
+        const pointerUpListener = (event) => {
+          if (event.pointerType === "mouse" && event.button !== 0) {
+            return;
+          }
+          processClickEvent(event);
+        };
+        canvasElement.addEventListener("pointerup", pointerUpListener, {
+          passive: true
+        });
+        registerDisposer(() => {
+          canvasElement.removeEventListener("pointerup", pointerUpListener);
+        });
+        const pointerMoveListener = (event) => {
+          if (!event.isPrimary) {
+            return;
+          }
+          if (event.pointerType === "touch") {
+            return;
+          }
+          processHoverEvent(event);
+        };
+        canvasElement.addEventListener("pointermove", pointerMoveListener, {
+          passive: true
+        });
+        registerDisposer(() => {
+          canvasElement.removeEventListener("pointermove", pointerMoveListener);
+        });
+      } else {
+        const clickListener = (event) => {
+          if (event.button !== 0) {
+            return;
+          }
+          processClickEvent(event);
+        };
+        canvasElement.addEventListener("click", clickListener, {
+          passive: true
+        });
+        registerDisposer(() => {
+          canvasElement.removeEventListener("click", clickListener);
+        });
+        const touchListener = (event) => {
+          processClickEvent(event);
+        };
+        canvasElement.addEventListener("touchend", touchListener, {
+          passive: true
+        });
+        registerDisposer(() => {
+          canvasElement.removeEventListener("touchend", touchListener);
+        });
+        const mouseMoveListener = (event) => {
+          processHoverEvent(event);
+        };
+        canvasElement.addEventListener("mousemove", mouseMoveListener, {
+          passive: true
+        });
+        registerDisposer(() => {
+          canvasElement.removeEventListener("mousemove", mouseMoveListener);
+        });
+      }
+      const visibilityTarget = (_a = canvasElement.ownerDocument) != null ? _a : typeof document !== "undefined" ? document : void 0;
+      if (visibilityTarget) {
+        const visibilityListener = () => updateVisibilityState();
+        visibilityTarget.addEventListener(
+          "visibilitychange",
+          visibilityListener
+        );
+        registerDisposer(() => {
+          visibilityTarget.removeEventListener(
+            "visibilitychange",
+            visibilityListener
+          );
+        });
+        updateVisibilityState();
+      }
+    }
+  };
+  return {
+    get canvasElement() {
+      return boundCanvasElement;
+    },
+    addEventListener: addEventListener2,
+    removeEventListener: removeEventListener2,
+    hasSpriteClickListeners,
+    hasSpriteHoverListeners,
+    bindCanvas,
     release: () => {
-      releaseFallbackHost();
+      clearDomListeners();
+      eventListeners.forEach((set) => set.clear());
+      eventListeners.clear();
+      boundCanvasElement = void 0;
     }
   };
 };
@@ -29268,6 +29430,9 @@ const resolveImageOffset = (image) => {
     offsetDeg: offset.offsetDeg.current
   };
 };
+const resolveImageAutoRotationDeg$1 = (sprite, image) => {
+  return image.autoRotation ? sprite.currentAutoRotateDeg : 0;
+};
 const createHitTestController = ({
   images,
   getResolvedScaling
@@ -29338,7 +29503,6 @@ const createHitTestController = ({
     const scaling = getResolvedScaling();
     const baseLocation = sprite.location.current;
     const zoom = projectionHost.getZoom();
-    const zoomScaleFactor = calculateZoomScaleFactor(zoom, scaling);
     const metersPerPixelAtLat = calculateMetersPerPixelAtLatitude(
       zoom,
       baseLocation.lat
@@ -29358,35 +29522,39 @@ const createHitTestController = ({
     if (!Number.isFinite(effectivePixelsPerMeter) || effectivePixelsPerMeter <= 0) {
       return null;
     }
-    const imageScale = (_a = image.scale) != null ? _a : 1;
+    const cameraLocation = projectionHost.getCameraLocation();
+    const cameraDistanceMeters = cameraLocation !== void 0 ? calculateCartesianDistanceMeters(cameraLocation, {
+      lng: baseLocation.lng,
+      lat: baseLocation.lat,
+      z: (_a = baseLocation.z) != null ? _a : 0
+    }) : Number.POSITIVE_INFINITY;
+    const distanceScaleFactor = calculateDistanceScaleFactor(
+      cameraDistanceMeters,
+      scaling
+    );
+    const imageScale = (_b = image.scale) != null ? _b : 1;
     const baseMetersPerPixel = scaling.metersPerPixel;
-    const spriteMinPixel = scaling.spriteMinPixel;
-    const spriteMaxPixel = scaling.spriteMaxPixel;
     const worldDims = calculateSurfaceWorldDimensions(
       imageResource.width,
       imageResource.height,
       baseMetersPerPixel,
       imageScale,
-      zoomScaleFactor,
-      {
-        effectivePixelsPerMeter,
-        spriteMinPixel,
-        spriteMaxPixel
-      }
+      distanceScaleFactor
     );
     if (worldDims.width <= 0 || worldDims.height <= 0) {
       return null;
     }
-    const anchor = (_b = image.anchor) != null ? _b : DEFAULT_ANCHOR;
+    const anchor = (_c = image.anchor) != null ? _c : DEFAULT_ANCHOR;
     const offsetDef = resolveImageOffset(image);
     const offsetMetersVec = calculateSurfaceOffsetMeters(
       offsetDef,
       imageScale,
-      zoomScaleFactor,
+      distanceScaleFactor,
       worldDims.scaleAdjustment
     );
-    const totalRotateDeg = Number.isFinite(image.displayedRotateDeg) ? image.displayedRotateDeg : normalizeAngleDeg(
-      ((_c = image.resolvedBaseRotateDeg) != null ? _c : 0) + image.rotationCommandDeg
+    const autoRotationDeg = resolveImageAutoRotationDeg$1(sprite, image);
+    const totalRotateDeg = normalizeAngleDeg(
+      Number.isFinite(image.finalRotateDeg.current) ? image.finalRotateDeg.current : autoRotationDeg + image.rotateDeg
     );
     const cornerDisplacements = calculateSurfaceCornerDisplacements({
       worldWidthMeters: worldDims.width,
@@ -29409,7 +29577,6 @@ const createHitTestController = ({
     const scaling = getResolvedScaling();
     const baseLocation = sprite.location.current;
     const zoom = projectionHost.getZoom();
-    const zoomScaleFactor = calculateZoomScaleFactor(zoom, scaling);
     const metersPerPixelAtLat = calculateMetersPerPixelAtLatitude(
       zoom,
       baseLocation.lat
@@ -29429,22 +29596,29 @@ const createHitTestController = ({
     if (!Number.isFinite(effectivePixelsPerMeter) || effectivePixelsPerMeter <= 0) {
       return null;
     }
+    const cameraLocation = projectionHost.getCameraLocation();
+    const cameraDistanceMeters = cameraLocation !== void 0 ? calculateCartesianDistanceMeters(cameraLocation, {
+      lng: baseLocation.lng,
+      lat: baseLocation.lat,
+      z: (_a = baseLocation.z) != null ? _a : 0
+    }) : Number.POSITIVE_INFINITY;
+    const distanceScaleFactor = calculateDistanceScaleFactor(
+      cameraDistanceMeters,
+      scaling
+    );
     const baseMetersPerPixel = scaling.metersPerPixel;
-    const spriteMinPixel = scaling.spriteMinPixel;
-    const spriteMaxPixel = scaling.spriteMaxPixel;
-    const imageScale = (_a = image.scale) != null ? _a : 1;
-    const totalRotateDeg = Number.isFinite(image.displayedRotateDeg) ? image.displayedRotateDeg : normalizeAngleDeg(
-      ((_b = image.resolvedBaseRotateDeg) != null ? _b : 0) + image.rotationCommandDeg
+    const imageScale = (_b = image.scale) != null ? _b : 1;
+    const autoRotationDeg = resolveImageAutoRotationDeg$1(sprite, image);
+    const totalRotateDeg = normalizeAngleDeg(
+      Number.isFinite(image.finalRotateDeg.current) ? image.finalRotateDeg.current : autoRotationDeg + image.rotateDeg
     );
     const pixelDims = calculateBillboardPixelDimensions(
       imageResource.width,
       imageResource.height,
       baseMetersPerPixel,
       imageScale,
-      zoomScaleFactor,
-      effectivePixelsPerMeter,
-      spriteMinPixel,
-      spriteMaxPixel
+      distanceScaleFactor,
+      effectivePixelsPerMeter
     );
     const halfWidthMeters = pixelDims.width / 2 / effectivePixelsPerMeter;
     const halfHeightMeters = pixelDims.height / 2 / effectivePixelsPerMeter;
@@ -29457,7 +29631,7 @@ const createHitTestController = ({
     const offsetShift = calculateBillboardOffsetPixels(
       resolveImageOffset(image),
       imageScale,
-      zoomScaleFactor,
+      distanceScaleFactor,
       effectivePixelsPerMeter
     );
     const anchorShiftMeters = Math.hypot(anchorShift.x, anchorShift.y) / effectivePixelsPerMeter;
@@ -29466,7 +29640,7 @@ const createHitTestController = ({
     return rectFromRadiusMeters(baseLocation, safetyRadius);
   };
   const estimateImageBounds = (projectionHost, sprite, image) => {
-    if (image.opacity.current <= 0 || !sprite.isEnabled) {
+    if (image.finalOpacity.current <= 0 || !sprite.isEnabled) {
       return null;
     }
     if (image.mode === "surface") {
@@ -29746,7 +29920,7 @@ const createHitTestController = ({
     hitTestTree.clear();
     hitTestTreeItems = /* @__PURE__ */ new WeakMap();
   };
-  const setHitTestEnabled = (enabled) => {
+  const setHitTestDetection = (enabled) => {
     if (isHitTestEnabled === enabled) {
       return false;
     }
@@ -29765,7 +29939,7 @@ const createHitTestController = ({
     refreshSpriteHitTestBounds,
     findTopmostHitEntry,
     resolveHitTestResult,
-    setHitTestEnabled,
+    setHitTestDetection,
     isHitTestEnabled: isHitTestEnabledFn
   };
 };
@@ -30262,16 +30436,20 @@ const updateImageInterpolationDirtyState = (sprite, image) => {
   }
 };
 const reapplySpriteOpacityMultiplier = (sprite) => {
-  const multiplier = sprite.opacityMultiplier || 1;
+  var _a;
+  const multiplier = (_a = sprite.opacityMultiplier) != null ? _a : 1;
   sprite.images.forEach((orderMap) => {
     orderMap.forEach((image) => {
-      var _a, _b;
-      const baseOpacity = (_a = image.opacity.interpolation.baseValue) != null ? _a : image.opacity.current;
-      const interpolationOption = (_b = image.opacity.interpolation.options) != null ? _b : null;
+      var _a2, _b;
+      const baseOpacity = (_a2 = image.finalOpacity.interpolation.baseValue) != null ? _a2 : image.finalOpacity.current;
+      const interpolationOption = (_b = image.finalOpacity.interpolation.options) != null ? _b : null;
       applyOpacityUpdate(image, baseOpacity, interpolationOption, multiplier);
     });
   });
 };
+const resolveImageAutoRotationDeg = (sprite, image) => {
+  return image.autoRotation ? sprite.currentAutoRotateDeg : 0;
+};
 const applyAutoRotation = (sprite, nextLocation, forceAutoRotation) => {
   let hasAutoRotation = false;
   let requiredDistance = 0;
@@ -30304,20 +30482,19 @@ const applyAutoRotation = (sprite, nextLocation, forceAutoRotation) => {
   if (distanceMeters < requiredDistance) {
     return false;
   }
-  const resolvedAngleRaw = isFiniteNumber(bearingDeg) ? bearingDeg : sprite.lastAutoRotationAngleDeg;
+  const resolvedAngleRaw = isFiniteNumber(bearingDeg) ? bearingDeg : sprite.currentAutoRotateDeg;
   const resolvedAngle = normalizeAngleDeg(resolvedAngleRaw);
+  sprite.currentAutoRotateDeg = resolvedAngle;
   sprite.images.forEach((orderMap) => {
     orderMap.forEach((image) => {
       if (!image.autoRotation) {
         return;
       }
-      image.resolvedBaseRotateDeg = resolvedAngle;
-      syncImageRotationChannel(image);
+      syncImageRotationChannel(image, resolvedAngle);
       updateImageInterpolationDirtyState(sprite, image);
     });
   });
   sprite.lastAutoRotationLocation = cloneSpriteLocation(nextLocation);
-  sprite.lastAutoRotationAngleDeg = resolvedAngle;
   return true;
 };
 const cloneOriginLocation = (origin) => {
@@ -30339,17 +30516,15 @@ const cloneAnchor = (anchor) => {
   }
   return { x: anchor.x, y: anchor.y };
 };
-const cloneOffset = (offset) => {
-  if (!offset) {
-    return { ...DEFAULT_IMAGE_OFFSET };
-  }
+const resolveOffsetInput = (offset) => {
+  var _a, _b;
   return {
-    offsetMeters: offset.offsetMeters,
-    offsetDeg: offset.offsetDeg
+    offsetMeters: (_a = offset == null ? void 0 : offset.offsetMeters) != null ? _a : DEFAULT_IMAGE_OFFSET.offsetMeters,
+    offsetDeg: (_b = offset == null ? void 0 : offset.offsetDeg) != null ? _b : DEFAULT_IMAGE_OFFSET.offsetDeg
   };
 };
 const createInterpolatedOffsetState = (offset, invalidated) => {
-  const base = offset ? cloneOffset(offset) : { ...DEFAULT_IMAGE_OFFSET };
+  const base = resolveOffsetInput(offset);
   return {
     offsetMeters: {
       current: base.offsetMeters,
@@ -30423,11 +30598,14 @@ const sanitizeOpacityMultiplier = (value) => {
   }
   return value;
 };
-const createImageStateFromInit = (imageInit, subLayer, order, originReference, invalidated) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+const createImageStateFromInit = (imageInit, subLayer, order, originReference, invalidated, spriteAutoRotationDeg = 0) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const mode = (_a = imageInit.mode) != null ? _a : "surface";
   const autoRotationDefault = mode === "surface";
-  const initialOffset = cloneOffset(imageInit.offset);
+  const initialOffset = resolveOffsetInput({
+    offsetMeters: imageInit.offsetMeters,
+    offsetDeg: imageInit.offsetDeg
+  });
   const initialOpacity = clampOpacity((_b = imageInit.opacity) != null ? _b : 1);
   const initialRotateDeg = normalizeAngleDeg((_c = imageInit.rotateDeg) != null ? _c : 0);
   const originLocation = cloneOriginLocation(imageInit.originLocation);
@@ -30438,7 +30616,9 @@ const createImageStateFromInit = (imageInit, subLayer, order, originReference, i
     imageId: imageInit.imageId,
     imageHandle: 0,
     mode,
-    opacity: {
+    rotateDeg: initialRotateDeg,
+    opacity: initialOpacity,
+    finalOpacity: {
       current: initialOpacity,
       from: void 0,
       to: void 0,
@@ -30459,7 +30639,7 @@ const createImageStateFromInit = (imageInit, subLayer, order, originReference, i
     leaderLine: resolveSpriteImageLineAttribute(imageInit.leaderLine),
     leaderLinePixelWidth: 0,
     offset: createInterpolatedOffsetState(initialOffset, invalidated),
-    rotateDeg: {
+    finalRotateDeg: {
       current: initialRotateDeg,
       from: void 0,
       to: void 0,
@@ -30472,25 +30652,28 @@ const createImageStateFromInit = (imageInit, subLayer, order, originReference, i
         targetValue: void 0
       }
     },
-    rotationCommandDeg: initialRotateDeg,
-    displayedRotateDeg: initialRotateDeg,
     autoRotation: (_e = imageInit.autoRotation) != null ? _e : autoRotationDefault,
     autoRotationMinDistanceMeters: (_f = imageInit.autoRotationMinDistanceMeters) != null ? _f : DEFAULT_AUTO_ROTATION_MIN_DISTANCE_METERS,
-    resolvedBaseRotateDeg: 0,
     originLocation,
     originReferenceKey,
     originRenderTargetIndex: SPRITE_ORIGIN_REFERENCE_INDEX_NONE,
-    interpolationDirty: false
+    interpolationDirty: false,
+    surfaceShaderInputs: void 0,
+    hitTestCorners: void 0
   };
-  const rotateInitOption = (_h = (_g = imageInit.interpolation) == null ? void 0 : _g.rotateDeg) != null ? _h : null;
+  const rotateInitOption = (_h = (_g = imageInit.interpolation) == null ? void 0 : _g.finalRotateDeg) != null ? _h : null;
   if (rotateInitOption) {
-    state.rotateDeg.interpolation.options = cloneInterpolationOptions(rotateInitOption);
+    state.finalRotateDeg.interpolation.options = cloneInterpolationOptions(rotateInitOption);
   }
-  const opacityInitOption = (_j = (_i = imageInit.interpolation) == null ? void 0 : _i.opacity) != null ? _j : null;
+  const opacityInitOption = (_j = (_i = imageInit.interpolation) == null ? void 0 : _i.finalOpacity) != null ? _j : null;
   if (opacityInitOption) {
-    state.opacity.interpolation.options = cloneInterpolationOptions(opacityInitOption);
+    state.finalOpacity.interpolation.options = cloneInterpolationOptions(opacityInitOption);
   }
-  syncImageRotationChannel(state);
+  syncImageRotationChannel(
+    state,
+    spriteAutoRotationDeg,
+    (_k = state.finalRotateDeg.interpolation.options) != null ? _k : void 0
+  );
   return state;
 };
 const createSpriteLayer = (options) => {
@@ -30733,6 +30916,7 @@ const createSpriteLayer = (options) => {
     images,
     getResolvedScaling: () => resolvedScaling
   });
+  let trackingController;
   const syncAtlasPlacementsFromManager = () => {
     let placementsChanged = false;
     images.forEach((image, imageId) => {
@@ -30766,14 +30950,15 @@ const createSpriteLayer = (options) => {
   };
   const sprites = /* @__PURE__ */ new Map();
   const invalidateImageInterpolationState = (sprite, image) => {
-    image.rotateDeg.interpolation.state = null;
+    var _a2;
+    image.finalRotateDeg.interpolation.state = null;
     image.offset.offsetDeg.interpolation.state = null;
     image.offset.offsetMeters.interpolation.state = null;
-    image.opacity.interpolation.state = null;
-    image.rotateDeg.from = void 0;
-    image.rotateDeg.to = void 0;
-    image.rotateDeg.invalidated = true;
-    image.rotateDeg.interpolation.lastCommandValue = image.rotateDeg.current;
+    image.finalOpacity.interpolation.state = null;
+    image.finalRotateDeg.from = void 0;
+    image.finalRotateDeg.to = void 0;
+    image.finalRotateDeg.invalidated = true;
+    image.finalRotateDeg.interpolation.lastCommandValue = image.finalRotateDeg.current;
     image.offset.offsetDeg.from = void 0;
     image.offset.offsetDeg.to = void 0;
     image.offset.offsetDeg.invalidated = true;
@@ -30782,16 +30967,16 @@ const createSpriteLayer = (options) => {
     image.offset.offsetMeters.to = void 0;
     image.offset.offsetMeters.invalidated = true;
     image.offset.offsetMeters.interpolation.lastCommandValue = image.offset.offsetMeters.current;
-    image.opacity.from = void 0;
-    image.opacity.to = void 0;
-    image.opacity.invalidated = true;
-    image.opacity.interpolation.targetValue = image.opacity.current;
-    image.opacity.interpolation.lastCommandValue = image.opacity.current;
-    const spriteOpacityMultiplier = sprite.opacityMultiplier || 1;
+    image.finalOpacity.from = void 0;
+    image.finalOpacity.to = void 0;
+    image.finalOpacity.invalidated = true;
+    image.finalOpacity.interpolation.targetValue = image.finalOpacity.current;
+    image.finalOpacity.interpolation.lastCommandValue = image.finalOpacity.current;
+    const spriteOpacityMultiplier = (_a2 = sprite.opacityMultiplier) != null ? _a2 : 1;
     const lodMultiplier = image.lodOpacity || 1;
     if (spriteOpacityMultiplier > 0 && lodMultiplier > 0) {
-      image.opacity.interpolation.baseValue = clampOpacity(
-        image.opacity.current / (spriteOpacityMultiplier * lodMultiplier)
+      image.finalOpacity.interpolation.baseValue = clampOpacity(
+        image.finalOpacity.current / (spriteOpacityMultiplier * lodMultiplier)
       );
     }
     updateImageInterpolationDirtyState(sprite, image);
@@ -30810,7 +30995,8 @@ const createSpriteLayer = (options) => {
     sprite.images.forEach((orderMap) => {
       orderMap.forEach((image) => {
         invalidateImageInterpolationState(sprite, image);
-        image.displayedRotateDeg = image.resolvedBaseRotateDeg + image.rotationCommandDeg;
+        const autoRotationDeg = resolveImageAutoRotationDeg(sprite, image);
+        image.finalRotateDeg.current = autoRotationDeg + image.rotateDeg;
       });
     });
   };
@@ -30883,30 +31069,7 @@ const createSpriteLayer = (options) => {
     return Array.from(buckets.keys()).sort((a, b) => a - b).map((subLayer) => [subLayer, buckets.get(subLayer)]);
   };
   const renderTargetEntries = [];
-  const eventListeners = /* @__PURE__ */ new Map();
-  const getListenerSet = (type) => {
-    let set = eventListeners.get(type);
-    if (!set) {
-      set = /* @__PURE__ */ new Set();
-      eventListeners.set(type, set);
-    }
-    return set;
-  };
-  const addEventListener2 = (type, listener) => {
-    getListenerSet(type).add(listener);
-  };
-  const removeEventListener2 = (type, listener) => {
-    const listeners = eventListeners.get(type);
-    if (!listeners) {
-      return;
-    }
-    listeners.delete(listener);
-    if (listeners.size === 0) {
-      eventListeners.delete(type);
-    }
-  };
   let canvasElement;
-  const inputListenerDisposers = [];
   let mapVisible = typeof document !== "undefined" ? document.visibilityState !== "hidden" : true;
   const resolveDocumentVisibility = () => {
     var _a2;
@@ -30914,15 +31077,6 @@ const createSpriteLayer = (options) => {
     return doc ? doc.visibilityState !== "hidden" : true;
   };
   const isLayerVisible = () => mapVisible;
-  const hasSpriteListeners = (type) => {
-    var _a2, _b;
-    return (
-      // Treat missing listener sets as zero, otherwise check the registered count.
-      ((_b = (_a2 = eventListeners.get(type)) == null ? void 0 : _a2.size) != null ? _b : 0) > 0
-    );
-  };
-  const hasSpriteClickListeners = () => hasSpriteListeners("spriteclick");
-  const hasSpriteHoverListeners = () => hasSpriteListeners("spritehover");
   const resolveSpriteEventPayload = (hitEntry) => {
     var _a2, _b;
     if (!hitEntry) {
@@ -30938,40 +31092,6 @@ const createSpriteLayer = (options) => {
       image: imageState
     };
   };
-  const dispatchSpriteClick = (hitEntry, screenPoint, originalEvent) => {
-    const listeners = eventListeners.get("spriteclick");
-    if (!listeners || listeners.size === 0) {
-      return;
-    }
-    const payload = resolveSpriteEventPayload(hitEntry);
-    const clickEvent = {
-      type: "spriteclick",
-      sprite: payload.sprite,
-      image: payload.image,
-      screenPoint,
-      originalEvent
-    };
-    listeners.forEach((listener) => {
-      listener(clickEvent);
-    });
-  };
-  const dispatchSpriteHover = (hitEntry, screenPoint, originalEvent) => {
-    const listeners = eventListeners.get("spritehover");
-    if (!listeners || listeners.size === 0) {
-      return;
-    }
-    const payload = resolveSpriteEventPayload(hitEntry);
-    const hoverEvent = {
-      type: "spritehover",
-      sprite: payload.sprite,
-      image: payload.image,
-      screenPoint,
-      originalEvent
-    };
-    listeners.forEach((listener) => {
-      listener(hoverEvent);
-    });
-  };
   const resolveHitTestResult = (nativeEvent) => {
     return hitTestController.resolveHitTestResult(
       nativeEvent,
@@ -30979,26 +31099,11 @@ const createSpriteLayer = (options) => {
       map
     );
   };
-  const processClickEvent = (nativeEvent) => {
-    if (!hasSpriteClickListeners()) {
-      return;
-    }
-    const hitResult = resolveHitTestResult(nativeEvent);
-    if (!hitResult || !hitResult.hitEntry) {
-      return;
-    }
-    dispatchSpriteClick(hitResult.hitEntry, hitResult.screenPoint, nativeEvent);
-  };
-  const processHoverEvent = (nativeEvent) => {
-    if (!hasSpriteHoverListeners()) {
-      return;
-    }
-    const hitResult = resolveHitTestResult(nativeEvent);
-    if (!hitResult) {
-      return;
-    }
-    dispatchSpriteHover(hitResult.hitEntry, hitResult.screenPoint, nativeEvent);
-  };
+  const mouseEventsController = createSpriteMouseEventsController({
+    resolveHitTestResult,
+    resolveSpriteEventPayload,
+    updateVisibilityState
+  });
   let isRenderScheduled = false;
   const scheduleRender = () => {
     if (!map || isRenderScheduled) {
@@ -31024,9 +31129,10 @@ const createSpriteLayer = (options) => {
       sprite.images.forEach((orderMap) => {
         orderMap.forEach((image) => {
           var _a3;
-          const baseOpacity = (_a3 = image.opacity.interpolation.baseValue) != null ? _a3 : image.opacity.interpolation.lastCommandValue;
+          const isOpacityInterpolating = image.finalOpacity.interpolation.state !== null;
+          const baseOpacity = (_a3 = image.finalOpacity.interpolation.baseValue) != null ? _a3 : image.finalOpacity.interpolation.lastCommandValue;
           const shouldForceVisibilityCheck = sprite.visibilityDistanceMeters !== void 0 && (baseOpacity != null ? baseOpacity : 0) > OPACITY_VISIBILITY_EPSILON;
-          if (image.opacity.current <= 0 && !shouldForceVisibilityCheck) {
+          if (image.finalOpacity.current <= 0 && !isOpacityInterpolating && !shouldForceVisibilityCheck) {
             image.originRenderTargetIndex = SPRITE_ORIGIN_REFERENCE_INDEX_NONE;
             image.originReferenceKey = SPRITE_ORIGIN_REFERENCE_KEY_NONE;
             return;
@@ -31084,9 +31190,20 @@ const createSpriteLayer = (options) => {
       image.originRenderTargetIndex = targetIndex;
     }
   };
+  const trackSprite = (spriteId, trackRotation) => {
+    const sprite = sprites.get(spriteId);
+    if (!sprite) {
+      trackingController == null ? void 0 : trackingController.untrackSprite();
+      return;
+    }
+    trackingController == null ? void 0 : trackingController.trackSprite(sprite, trackRotation != null ? trackRotation : true);
+  };
+  const untrackSprite = () => {
+    trackingController == null ? void 0 : trackingController.untrackSprite();
+  };
   const onAdd = (mapInstance, glContext) => {
-    var _a2;
     map = mapInstance;
+    trackingController = createSpriteTrackingController(mapInstance);
     gl = glContext;
     anisotropyExtension = resolveAnisotropyExtension(glContext);
     if (anisotropyExtension) {
@@ -31103,96 +31220,15 @@ const createSpriteLayer = (options) => {
       maxSupportedAnisotropy = 1;
     }
     canvasElement = mapInstance.getCanvas();
-    const registerDisposer = (disposer) => {
-      inputListenerDisposers.push(disposer);
-    };
-    const supportsPointerEvents = typeof window !== "undefined" && "PointerEvent" in window;
-    if (canvasElement) {
-      if (supportsPointerEvents) {
-        const pointerUpListener = (event) => {
-          if (event.pointerType === "mouse" && event.button !== 0) {
-            return;
-          }
-          processClickEvent(event);
-        };
-        canvasElement.addEventListener("pointerup", pointerUpListener, {
-          passive: true
-        });
-        registerDisposer(() => {
-          canvasElement == null ? void 0 : canvasElement.removeEventListener("pointerup", pointerUpListener);
-        });
-        const pointerMoveListener = (event) => {
-          if (!event.isPrimary) {
-            return;
-          }
-          if (event.pointerType === "touch") {
-            return;
-          }
-          processHoverEvent(event);
-        };
-        canvasElement.addEventListener("pointermove", pointerMoveListener, {
-          passive: true
-        });
-        registerDisposer(() => {
-          canvasElement == null ? void 0 : canvasElement.removeEventListener(
-            "pointermove",
-            pointerMoveListener
-          );
-        });
-      } else {
-        const clickListener = (event) => {
-          if (event.button !== 0) {
-            return;
-          }
-          processClickEvent(event);
-        };
-        canvasElement.addEventListener("click", clickListener, {
-          passive: true
-        });
-        registerDisposer(() => {
-          canvasElement == null ? void 0 : canvasElement.removeEventListener("click", clickListener);
-        });
-        const touchListener = (event) => {
-          processClickEvent(event);
-        };
-        canvasElement.addEventListener("touchend", touchListener, {
-          passive: true
-        });
-        registerDisposer(() => {
-          canvasElement == null ? void 0 : canvasElement.removeEventListener("touchend", touchListener);
-        });
-        const mouseMoveListener = (event) => {
-          processHoverEvent(event);
-        };
-        canvasElement.addEventListener("mousemove", mouseMoveListener, {
-          passive: true
-        });
-        registerDisposer(() => {
-          canvasElement == null ? void 0 : canvasElement.removeEventListener("mousemove", mouseMoveListener);
-        });
-      }
-      const visibilityTarget = (_a2 = canvasElement.ownerDocument) != null ? _a2 : typeof document !== "undefined" ? document : void 0;
-      if (visibilityTarget) {
-        const visibilityListener = () => updateVisibilityState();
-        visibilityTarget.addEventListener(
-          "visibilitychange",
-          visibilityListener
-        );
-        registerDisposer(() => {
-          visibilityTarget.removeEventListener(
-            "visibilitychange",
-            visibilityListener
-          );
-        });
-        updateVisibilityState();
-      }
-    }
+    mouseEventsController.bindCanvas(canvasElement);
+    canvasElement = mouseEventsController.canvasElement;
     spriteDrawProgram = createSpriteDrawProgram(glContext);
     scheduleRender();
   };
   const onRemove = () => {
-    inputListenerDisposers.forEach((dispose) => dispose());
-    inputListenerDisposers.length = 0;
+    trackingController == null ? void 0 : trackingController.release();
+    trackingController = void 0;
+    mouseEventsController.release();
     canvasElement = void 0;
     hitTestController.clearAll();
     const glContext = gl;
@@ -31218,8 +31254,6 @@ const createSpriteLayer = (options) => {
         leaderLineRenderer = void 0;
       }
     }
-    eventListeners.forEach((set) => set.clear());
-    eventListeners.clear();
     gl = void 0;
     map = void 0;
     borderOutlineRenderer = void 0;
@@ -31256,9 +31290,7 @@ const createSpriteLayer = (options) => {
       sprites: spriteStateArray,
       timestamp: interpolationTimestamp2,
       frameContext: {
-        baseMetersPerPixel: resolvedScaling.metersPerPixel,
-        spriteMinPixel: resolvedScaling.spriteMinPixel,
-        spriteMaxPixel: resolvedScaling.spriteMaxPixel
+        baseMetersPerPixel: resolvedScaling.metersPerPixel
       }
     } : null;
     let hasActiveInterpolation = false;
@@ -31297,16 +31329,12 @@ const createSpriteLayer = (options) => {
     const identityOffsetX = 0;
     const identityOffsetY = 0;
     const baseMetersPerPixel = resolvedScaling.metersPerPixel;
-    const spriteMinPixel = resolvedScaling.spriteMinPixel;
-    const spriteMaxPixel = resolvedScaling.spriteMaxPixel;
     const projectionHost = createProjectionHostForMap(mapInstance);
     try {
       const clipContext = projectionHost.getClipContext();
       if (!clipContext) {
         return;
       }
-      const zoom = projectionHost.getZoom();
-      const zoomScaleFactor = calculateZoomScaleFactor(zoom, resolvedScaling);
       glContext.enable(glContext.BLEND);
       glContext.blendFunc(glContext.SRC_ALPHA, glContext.ONE_MINUS_SRC_ALPHA);
       glContext.disable(glContext.DEPTH_TEST);
@@ -31351,12 +31379,9 @@ const createSpriteLayer = (options) => {
             resolvedScaling,
             clipContext,
             baseMetersPerPixel,
-            spriteMinPixel,
-            spriteMaxPixel,
             drawingBufferWidth,
             drawingBufferHeight,
             pixelRatio,
-            zoomScaleFactor,
             identityScaleX,
             identityScaleY,
             identityOffsetX,
@@ -31509,7 +31534,7 @@ const createSpriteLayer = (options) => {
               continue;
             }
             const effectiveAlpha = clampOpacity(
-              border.rgba[3] * entry.image.opacity.current
+              border.rgba[3] * entry.image.finalOpacity.current
             );
             if (effectiveAlpha <= 0) {
               continue;
@@ -31706,6 +31731,7 @@ const createSpriteLayer = (options) => {
     scheduleRender();
   };
   const getAllImageIds = () => Array.from(images.keys());
+  const getAllSpriteIds = () => Array.from(sprites.keys());
   const addSpriteInternal = (projectionHost, spriteId, init) => {
     var _a2, _b, _c, _d, _e, _f;
     if (sprites.get(spriteId)) {
@@ -31803,7 +31829,7 @@ const createSpriteLayer = (options) => {
       // Tags default to null to simplify downstream comparisons.
       tag: (_f = init.tag) != null ? _f : null,
       lastAutoRotationLocation: cloneSpriteLocation(currentLocation),
-      lastAutoRotationAngleDeg: 0,
+      currentAutoRotateDeg: 0,
       autoRotationInvalidated: false,
       interpolationDirty: false,
       cachedMercator: initialMercator,
@@ -31944,7 +31970,8 @@ const createSpriteLayer = (options) => {
       subLayer,
       order,
       originReference,
-      !isLayerVisible() || sprite.location.invalidated === true
+      !isLayerVisible() || sprite.location.invalidated === true,
+      sprite.currentAutoRotateDeg
     );
     state.imageHandle = resolveImageHandle(state.imageId);
     if (state.originLocation !== void 0) {
@@ -31978,10 +32005,8 @@ const createSpriteLayer = (options) => {
         curMaybe = getRef(cur);
       }
     }
-    if (state.autoRotation) {
-      state.resolvedBaseRotateDeg = sprite.lastAutoRotationAngleDeg;
-    }
-    syncImageRotationChannel(state);
+    const autoRotationDeg = resolveImageAutoRotationDeg(sprite, state);
+    syncImageRotationChannel(state, autoRotationDeg);
     updateImageInterpolationDirtyState(sprite, state);
     setImageState(sprite, state);
     hitTestController.refreshSpriteHitTestBounds(projectionHost, sprite);
@@ -32018,11 +32043,12 @@ const createSpriteLayer = (options) => {
     }
   };
   const updateSpriteImageInternal = (projectionHost, sprite, subLayer, order, imageUpdate, resultOut) => {
-    var _a2;
+    var _a2, _b, _c;
     const state = getImageState(sprite, subLayer, order);
     if (!state) return false;
     const mapCurrentlyVisible = isLayerVisible();
     const interpolationAllowed = interpolationCalculationEnabled && mapCurrentlyVisible;
+    const resolveAutoRotationDeg2 = () => resolveImageAutoRotationDeg(sprite, state);
     if (imageUpdate.imageId !== void 0) {
       state.imageId = imageUpdate.imageId;
       state.imageHandle = resolveImageHandle(imageUpdate.imageId);
@@ -32031,12 +32057,12 @@ const createSpriteLayer = (options) => {
       state.mode = imageUpdate.mode;
     }
     const interpolationOptions = imageUpdate.interpolation;
-    const opacityInterpolationOption = interpolationOptions == null ? void 0 : interpolationOptions.opacity;
+    const opacityInterpolationOption = interpolationOptions == null ? void 0 : interpolationOptions.finalOpacity;
     if (opacityInterpolationOption !== void 0) {
-      state.opacity.interpolation.options = opacityInterpolationOption === null ? null : cloneInterpolationOptions(opacityInterpolationOption);
+      state.finalOpacity.interpolation.options = opacityInterpolationOption === null ? null : cloneInterpolationOptions(opacityInterpolationOption);
     }
-    const allowOpacityInterpolation = interpolationAllowed && !state.opacity.invalidated;
-    const resolvedOpacityInterpolationOption = allowOpacityInterpolation ? opacityInterpolationOption === void 0 ? (_a2 = state.opacity.interpolation.options) != null ? _a2 : null : opacityInterpolationOption : null;
+    const allowOpacityInterpolation = interpolationAllowed && !state.finalOpacity.invalidated;
+    const resolvedOpacityInterpolationOption = allowOpacityInterpolation ? opacityInterpolationOption === void 0 ? (_a2 = state.finalOpacity.interpolation.options) != null ? _a2 : null : opacityInterpolationOption : null;
     if (imageUpdate.opacity !== void 0) {
       applyOpacityUpdate(
         state,
@@ -32044,8 +32070,8 @@ const createSpriteLayer = (options) => {
         resolvedOpacityInterpolationOption,
         sprite.opacityMultiplier
       );
-      if (mapCurrentlyVisible && state.opacity.invalidated) {
-        state.opacity.invalidated = false;
+      if (mapCurrentlyVisible && state.finalOpacity.invalidated) {
+        state.finalOpacity.invalidated = false;
       }
     } else if (opacityInterpolationOption === null) {
       clearOpacityInterpolation(state);
@@ -32074,13 +32100,18 @@ const createSpriteLayer = (options) => {
     const allowOffsetMetersInterpolation = interpolationAllowed && !state.offset.offsetMeters.invalidated;
     const offsetDegInterpolationOption = allowOffsetDegInterpolation ? interpolationOptions == null ? void 0 : interpolationOptions.offsetDeg : null;
     const offsetMetersInterpolationOption = allowOffsetMetersInterpolation ? interpolationOptions == null ? void 0 : interpolationOptions.offsetMeters : null;
-    const allowRotateInterpolation = interpolationAllowed && !state.rotateDeg.invalidated;
-    const rotateInterpolationOption = allowRotateInterpolation ? interpolationOptions == null ? void 0 : interpolationOptions.rotateDeg : null;
+    const allowRotateInterpolation = interpolationAllowed && !state.finalRotateDeg.invalidated;
+    const rotateInterpolationOption = allowRotateInterpolation ? interpolationOptions == null ? void 0 : interpolationOptions.finalRotateDeg : null;
     let rotationOverride;
     let hasRotationOverride = false;
-    if (imageUpdate.offset !== void 0) {
-      const clonedOffset = cloneOffset(imageUpdate.offset);
-      applyOffsetUpdate(state, clonedOffset, {
+    const hasOffsetMetersUpdate = imageUpdate.offsetMeters !== void 0;
+    const hasOffsetDegUpdate = imageUpdate.offsetDeg !== void 0;
+    if (hasOffsetMetersUpdate || hasOffsetDegUpdate) {
+      const nextOffset = {
+        offsetMeters: (_b = imageUpdate.offsetMeters) != null ? _b : state.offset.offsetMeters.current,
+        offsetDeg: (_c = imageUpdate.offsetDeg) != null ? _c : state.offset.offsetDeg.current
+      };
+      applyOffsetUpdate(state, nextOffset, {
         deg: allowOffsetDegInterpolation ? offsetDegInterpolationOption : null,
         meters: allowOffsetMetersInterpolation ? offsetMetersInterpolationOption : null
       });
@@ -32102,11 +32133,11 @@ const createSpriteLayer = (options) => {
     }
     if (rotateInterpolationOption !== void 0) {
       if (rotateInterpolationOption === null) {
-        state.rotateDeg.interpolation.options = null;
+        state.finalRotateDeg.interpolation.options = null;
         rotationOverride = null;
       } else {
         const cloned = cloneInterpolationOptions(rotateInterpolationOption);
-        state.rotateDeg.interpolation.options = cloned;
+        state.finalRotateDeg.interpolation.options = cloned;
         rotationOverride = cloned;
       }
       hasRotationOverride = true;
@@ -32114,9 +32145,12 @@ const createSpriteLayer = (options) => {
     let requireRotationSync = false;
     if (imageUpdate.rotateDeg !== void 0) {
       const nextRotation = normalizeAngleDeg(imageUpdate.rotateDeg);
-      state.rotateDeg.from = state.rotateDeg.current;
-      state.rotateDeg.to = nextRotation;
-      state.rotationCommandDeg = nextRotation;
+      const targetDisplayed = normalizeAngleDeg(
+        resolveAutoRotationDeg2() + nextRotation
+      );
+      state.finalRotateDeg.from = state.finalRotateDeg.current;
+      state.finalRotateDeg.to = targetDisplayed;
+      state.rotateDeg = nextRotation;
       requireRotationSync = true;
     } else if (hasRotationOverride) {
       requireRotationSync = true;
@@ -32125,7 +32159,6 @@ const createSpriteLayer = (options) => {
       state.autoRotation = imageUpdate.autoRotation;
       if (imageUpdate.autoRotation) {
         if (!prevAutoRotation) {
-          state.resolvedBaseRotateDeg = sprite.lastAutoRotationAngleDeg;
           shouldReapplyAutoRotation = true;
         }
       } else if (prevAutoRotation) {
@@ -32139,24 +32172,24 @@ const createSpriteLayer = (options) => {
       }
     }
     if (shouldResetResolvedAngle) {
-      state.resolvedBaseRotateDeg = 0;
       requireRotationSync = true;
     }
     if (shouldReapplyAutoRotation) {
       const applied = applyAutoRotation(sprite, sprite.location.current, true);
       if (!applied && state.autoRotation) {
-        state.resolvedBaseRotateDeg = sprite.lastAutoRotationAngleDeg;
         requireRotationSync = true;
       }
     }
     if (requireRotationSync) {
+      const autoRotationDeg = resolveAutoRotationDeg2();
       syncImageRotationChannel(
         state,
+        autoRotationDeg,
         // When a rotation override has been computed, pass it along (null clears interpolation); otherwise leave undefined.
         interpolationAllowed ? hasRotationOverride ? rotationOverride != null ? rotationOverride : null : void 0 : null
       );
-      if (mapCurrentlyVisible && state.rotateDeg.invalidated) {
-        state.rotateDeg.invalidated = false;
+      if (mapCurrentlyVisible && state.finalRotateDeg.invalidated) {
+        state.finalRotateDeg.invalidated = false;
       }
     }
     updateImageInterpolationDirtyState(sprite, state);
@@ -32249,18 +32282,18 @@ const createSpriteLayer = (options) => {
           sprite.images.forEach((orderMap) => {
             orderMap.forEach((image) => {
               var _a3;
-              const baseOpacity = (_a3 = image.opacity.interpolation.baseValue) != null ? _a3 : image.opacity.current;
+              const baseOpacity = (_a3 = image.finalOpacity.interpolation.baseValue) != null ? _a3 : image.finalOpacity.current;
               if (!(Number.isFinite(baseOpacity) && baseOpacity > 0)) {
                 return;
               }
-              if (image.opacity.current > 0) {
+              if (image.finalOpacity.current > 0) {
                 return;
               }
               image.lodOpacity = 1;
               applyOpacityUpdate(
                 image,
                 baseOpacity,
-                image.opacity.interpolation.options,
+                image.finalOpacity.interpolation.options,
                 sprite.opacityMultiplier
               );
             });
@@ -32324,7 +32357,7 @@ const createSpriteLayer = (options) => {
       );
       let handledByInterpolation = false;
       if (effectiveOptions && effectiveOptions.durationMs > 0) {
-        const { state, requiresInterpolation } = createInterpolationState({
+        const { state, requiresInterpolation } = createLocationInterpolationState({
           currentLocation: locationState.current,
           lastCommandLocation: locationInterpolation.lastCommandValue,
           nextCommandLocation: newCommandLocation,
@@ -32636,9 +32669,9 @@ const createSpriteLayer = (options) => {
       scheduleRender();
     }
   };
-  const setHitTestEnabled = (enabled) => {
-    const changed = hitTestController.setHitTestEnabled(enabled);
-    if (!changed || !enabled || !map) {
+  const setHitTestDetection = (detect) => {
+    const changed = hitTestController.setHitTestDetection(detect);
+    if (!changed || !detect || !map) {
       return;
     }
     const projectionHost = createProjectionHostForMap(map);
@@ -32662,6 +32695,7 @@ const createSpriteLayer = (options) => {
     unregisterImage,
     unregisterAllImages,
     getAllImageIds,
+    getAllSpriteIds,
     addSprite,
     addSprites,
     removeSprite,
@@ -32676,9 +32710,11 @@ const createSpriteLayer = (options) => {
     mutateSprites,
     updateForEach,
     setInterpolationCalculation,
-    setHitTestEnabled,
-    on: addEventListener2,
-    off: removeEventListener2
+    setHitTestDetection,
+    trackSprite,
+    untrackSprite,
+    on: mouseEventsController.addEventListener,
+    off: mouseEventsController.removeEventListener
   };
   return spriteLayout;
 };