maplibre-gl-layers 0.16.0 → 0.17.0

package/dist/index.cjs

@@ -4,14 +4,13 @@ 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.16.0
+ * version: 0.17.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: 8d2149a6811cac25ed9d8c1d97acde73e1a38e25
+ * git.commit.hash: 9fe9aa30db6602d13643e32c94af39ae2b26b082
  */
-var _a;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 const UNLIMITED_SPRITE_SCALING_OPTIONS = {
@@ -124,7 +123,7 @@ const parseSvgSize = (svgText) => {
   }
 };
 const determineSvgRasterDimensions = (parsed, options) => {
-  var _a2, _b;
+  var _a, _b;
   const overrideWidth = options == null ? void 0 : options.width;
   const overrideHeight = options == null ? void 0 : options.height;
   if (overrideWidth !== void 0 && overrideHeight !== void 0 && overrideWidth > 0 && overrideHeight > 0) {
@@ -151,7 +150,7 @@ const determineSvgRasterDimensions = (parsed, options) => {
   } else if (intrinsicHeight !== void 0 && intrinsicHeight > 0 && aspect !== void 0) {
     baseHeight = intrinsicHeight;
     baseWidth = intrinsicHeight * aspect;
-  } else if (hasValidViewBox && ((_a2 = options == null ? void 0 : options.svg) == null ? void 0 : _a2.useViewBoxDimensions)) {
+  } else if (hasValidViewBox && ((_a = options == null ? void 0 : options.svg) == null ? void 0 : _a.useViewBoxDimensions)) {
     baseWidth = parsed.viewBoxWidth;
     baseHeight = parsed.viewBoxHeight;
     aspect = baseWidth / baseHeight;
@@ -298,14 +297,14 @@ const readImageBitmap = (blob, options) => {
   return internalReadImageBitmap(blob, shouldTreatAsSvg, options);
 };
 const loadImageBitmap = async (url, options) => {
-  var _a2;
+  var _a;
   const response = await fetch(url);
   if (!response.ok) {
     throw new Error(`Failed to fetch image from ${url}`);
   }
   const mimeType = response.headers.get("content-type");
   const blob = await response.blob();
-  const shouldTreatAsSvg = ((_a2 = options == null ? void 0 : options.svg) == null ? void 0 : _a2.assumeSvg) === true || isSvgMimeType(mimeType);
+  const shouldTreatAsSvg = ((_a = options == null ? void 0 : options.svg) == null ? void 0 : _a.assumeSvg) === true || isSvgMimeType(mimeType);
   return await internalReadImageBitmap(blob, shouldTreatAsSvg, options);
 };
 /*!
@@ -400,12 +399,12 @@ const createMutex = (maxConsecutiveCalls = 20) => {
   const queue = [];
   let count = 0;
   const processQueue = () => {
-    var _a2;
+    var _a;
     if (isLocked || queue.length === 0) {
       return;
     }
     const item = queue.shift();
-    if ((_a2 = item.signal) == null ? void 0 : _a2.aborted) {
+    if ((_a = item.signal) == null ? void 0 : _a.aborted) {
       item.reject(ABORTED_ERROR$2());
       scheduleNextProcess();
       return;
@@ -591,9 +590,9 @@ const resolveBaseUrl = (base) => {
 };
 let wasmBaseUrlOverride;
 const isNodeEnvironment = (() => {
-  var _a2;
+  var _a;
   const globalProcess = globalThis.process;
-  return !!((_a2 = globalProcess == null ? void 0 : globalProcess.versions) == null ? void 0 : _a2.node);
+  return !!((_a = globalProcess == null ? void 0 : globalProcess.versions) == null ? void 0 : _a.node);
 })();
 const canUseThreadedWasm = () => {
   if (isNodeEnvironment) {
@@ -665,7 +664,7 @@ const resolveThreadPoolLimit = () => {
   return hardware;
 };
 const instantiateThreadedProjectionWasm = async () => {
-  var _a2, _b;
+  var _a, _b;
   const scriptUrl = resolveVariantAssetUrl("simd-mt", "js");
   const wasmUrl = resolveVariantAssetUrl("simd-mt", "wasm");
   const workerUrl = resolveVariantAssetUrl("simd-mt", "worker");
@@ -673,7 +672,7 @@ const instantiateThreadedProjectionWasm = async () => {
     /* @vite-ignore */
     scriptUrl.href
   );
-  const createModule = (_b = (_a2 = moduleFactory == null ? void 0 : moduleFactory.default) != null ? _a2 : moduleFactory == null ? void 0 : moduleFactory.Module) != null ? _b : moduleFactory;
+  const createModule = (_b = (_a = moduleFactory == null ? void 0 : moduleFactory.default) != null ? _a : moduleFactory == null ? void 0 : moduleFactory.Module) != null ? _b : moduleFactory;
   if (typeof createModule !== "function") {
     throw new Error("maplibre-gl-layers: simd-mt module is unavailable.");
   }
@@ -709,11 +708,11 @@ const instantiateProjectionWasm = async (variant) => {
   return createWasmHostFromExports(exports2);
 };
 const createWasmHostFromExports = (exports2) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   if (typeof exports2.__wasm_call_ctors === "function") {
     exports2.__wasm_call_ctors();
   }
-  const memory = (_a2 = exports2.memory) != null ? _a2 : exports2.wasmMemory;
+  const memory = (_a = exports2.memory) != null ? _a : exports2.wasmMemory;
   if (!memory) {
     throw new Error("maplibre-gl-layers: wasm memory is unavailable.");
   }
@@ -944,14 +943,14 @@ const createWasmHostFromExports = (exports2) => {
   };
 };
 const initializeWasmHostInternal = async (preferredVariant) => {
-  var _a2;
+  var _a;
   if (preferredVariant === "disabled") {
     console.log(
       "maplibre-gl-layers: Wasm execution disabled by configuration."
     );
     return ["disabled", void 0];
   }
-  const variantsToTry = (_a2 = VARIANT_FALLBACKS[preferredVariant]) != null ? _a2 : ["nosimd"];
+  const variantsToTry = (_a = VARIANT_FALLBACKS[preferredVariant]) != null ? _a : ["nosimd"];
   for (const variant of variantsToTry) {
     if (variant === "simd-mt" && !canUseThreadedWasm()) {
       if (!threadedVariantWarningPrinted) {
@@ -982,7 +981,7 @@ const initializeWasmHostInternal = async (preferredVariant) => {
 };
 let currentVariant = "disabled";
 let currentWasmHost;
-const initializeWasmHost = async (preferredVariant = "simd", options) => {
+const initializeWasmHost = async (preferredVariant, options) => {
   let nextBaseUrl = wasmBaseUrlOverride;
   if ((options == null ? void 0 : options.wasmBaseUrl) !== void 0) {
     nextBaseUrl = options.wasmBaseUrl === "" ? void 0 : options.wasmBaseUrl;
@@ -1036,7 +1035,7 @@ const reportWasmRuntimeFailure = (reason) => {
   releaseRuntimeHost();
 };
 const initializeRuntimeHost = async (options) => {
-  var _a2;
+  var _a;
   const locker = await spriteLayerHostInitializationMutex.lock();
   try {
     if (wasmHostFatalError !== null) {
@@ -1045,7 +1044,7 @@ const initializeRuntimeHost = async (options) => {
       );
       return "disabled";
     }
-    const requestedVariant = (_a2 = options == null ? void 0 : options.variant) != null ? _a2 : "simd";
+    const requestedVariant = (_a = options == null ? void 0 : options.variant) != null ? _a : "simd";
     if (requestedVariant === "disabled") {
       releaseRuntimeHost();
       return "disabled";
@@ -5418,7 +5417,7 @@ Use an identity property function instead: \`{ "type": "identity", "property": $
           }
         }
         wa.prototype.bytesPerElement = 8, ls("StructArrayLayout1ul2ui8", wa);
-        class _a2 extends Ws {
+        class _a extends Ws {
           _refreshViews() {
             this.uint8 = new Uint8Array(this.arrayBuffer), this.uint16 = new Uint16Array(this.arrayBuffer);
           }
@@ -5431,7 +5430,7 @@ Use an identity property function instead: \`{ "type": "identity", "property": $
             return this.uint16[n2 + 0] = e2, this.uint16[n2 + 1] = r2, t2;
           }
         }
-        _a2.prototype.bytesPerElement = 4, ls("StructArrayLayout2ui4", _a2);
+        _a.prototype.bytesPerElement = 4, ls("StructArrayLayout2ui4", _a);
         class Sa extends Ws {
           _refreshViews() {
             this.uint8 = new Uint8Array(this.arrayBuffer), this.uint16 = new Uint16Array(this.arrayBuffer);
@@ -5745,7 +5744,7 @@ Use an identity property function instead: \`{ "type": "identity", "property": $
         }
         class Ka extends ma {
         }
-        class Ja extends _a2 {
+        class Ja extends _a {
         }
         const Wa = Qs([{ name: "a_pos", components: 2, type: "Int16" }], 4), { members: Qa } = Wa;
         class to {
@@ -10773,8 +10772,8 @@ Use an identity property function instead: \`{ "type": "identity", "property": $
           void 0 !== i2.id && t2.writeVarintField(1, i2.id), t2.writeMessage(2, p, e2), t2.writeVarintField(3, i2.type), t2.writeMessage(4, v, i2);
         }
         function p(e2, t2) {
-          var _a2;
-          for (const i2 in (_a2 = e2.feature) == null ? void 0 : _a2.properties) {
+          var _a;
+          for (const i2 in (_a = e2.feature) == null ? void 0 : _a.properties) {
             let o2 = e2.feature.properties[i2], s2 = e2.keycache[i2];
             if (null === o2) continue;
             void 0 === s2 && (e2.keys.push(i2), s2 = e2.keys.length - 1, e2.keycache[i2] = s2), t2.writeVarint(s2), "string" != typeof o2 && "boolean" != typeof o2 && "number" != typeof o2 && (o2 = JSON.stringify(o2));
@@ -18372,7 +18371,7 @@ uniform ${i3} ${o3} u_${a3};
         function da(e2, i2) {
           return i2.colorRampTexture || (i2.colorRampTexture = new t.T(e2, i2.colorRamp, e2.gl.RGBA)), i2.colorRampTexture;
         }
-        function _a2(e2, i2, o2, a2, r2, s2, n2, l2) {
+        function _a(e2, i2, o2, a2, r2, s2, n2, l2) {
           let c2 = 256;
           if (r2.stepInterpolant) {
             const a3 = i2.getSource().maxzoom, r3 = n2.canonical.z === a3 ? Math.ceil(1 << e2.transform.maxZoom - n2.canonical.z) : 1;
@@ -18389,12 +18388,12 @@ uniform ${i3} ${o3} u_${a3};
         function fa(e2, t2, i2, o2, a2, r2, s2) {
           const n2 = r2.gradients[a2.id];
           let l2 = n2.texture;
-          a2.gradientVersion !== n2.version && (l2 = _a2(e2, t2, i2, o2, a2, r2, s2, n2)), i2.activeTexture.set(o2.TEXTURE0), l2.bind(a2.stepInterpolant ? o2.NEAREST : o2.LINEAR, o2.CLAMP_TO_EDGE);
+          a2.gradientVersion !== n2.version && (l2 = _a(e2, t2, i2, o2, a2, r2, s2, n2)), i2.activeTexture.set(o2.TEXTURE0), l2.bind(a2.stepInterpolant ? o2.NEAREST : o2.LINEAR, o2.CLAMP_TO_EDGE);
         }
         function ga(e2, t2, i2, o2, a2, r2, s2, n2, l2) {
           const c2 = r2.gradients[a2.id];
           let h2 = c2.texture;
-          a2.gradientVersion !== c2.version && (h2 = _a2(e2, t2, i2, o2, a2, r2, s2, c2)), i2.activeTexture.set(o2.TEXTURE0), h2.bind(a2.stepInterpolant ? o2.NEAREST : o2.LINEAR, o2.CLAMP_TO_EDGE), i2.activeTexture.set(o2.TEXTURE1), e2.lineAtlas.bind(i2), n2.updatePaintBuffers(l2);
+          a2.gradientVersion !== c2.version && (h2 = _a(e2, t2, i2, o2, a2, r2, s2, c2)), i2.activeTexture.set(o2.TEXTURE0), h2.bind(a2.stepInterpolant ? o2.NEAREST : o2.LINEAR, o2.CLAMP_TO_EDGE), i2.activeTexture.set(o2.TEXTURE1), e2.lineAtlas.bind(i2), n2.updatePaintBuffers(l2);
         }
         function va(e2, t2, i2, o2, a2) {
           if (!i2 || !o2 || !o2.imageAtlas) return;
@@ -22134,17 +22133,17 @@ const clampProgress = (progress) => {
   return progress;
 };
 const linearEasing = (progress) => clampProgress(progress);
-const normalizePower = (power, fallback) => {
+const normalizePower = (power, fallback2) => {
   if (Number.isFinite(power) && power > 0) {
     return power;
   }
-  return fallback;
+  return fallback2;
 };
-const normalizeMode = (mode, fallback) => {
+const normalizeMode = (mode, fallback2) => {
   if (mode === "in" || mode === "out" || mode === "in-out") {
     return mode;
   }
-  return fallback;
+  return fallback2;
 };
 const toBounded = (value, min, max) => Math.min(max, Math.max(min, value));
 const createPowerEasing = (power, mode) => {
@@ -22245,65 +22244,65 @@ const createBackEasing = (overshoot) => {
     return 1 + c3 * p * p * p + c1 * p * p;
   };
 };
+const fallback = {
+  func: linearEasing,
+  param: { type: "linear" }
+};
 const resolveEasing = (easing) => {
-  const fallback = {
-    easing: linearEasing,
-    preset: { type: "linear" }
-  };
   if (!easing) {
     return fallback;
   }
   switch (easing.type) {
     case "linear": {
-      const preset = { type: "linear" };
-      return { easing: linearEasing, preset };
+      const param = { type: "linear" };
+      return { func: linearEasing, param };
     }
     case "ease": {
       const power = normalizePower(easing.power, 3);
       const mode = normalizeMode(easing.mode, "in-out");
-      const preset = { type: "ease", power, mode };
-      return { easing: createPowerEasing(power, mode), preset };
+      const param = { type: "ease", power, mode };
+      return { func: createPowerEasing(power, mode), param };
     }
     case "exponential": {
       const exponent = normalizePower(easing.exponent, 5);
       const mode = normalizeMode(easing.mode, "in-out");
-      const preset = {
+      const param = {
         type: "exponential",
         exponent,
         mode
       };
-      return { easing: createExponentialEasing(exponent, mode), preset };
+      return { func: createExponentialEasing(exponent, mode), param };
     }
     case "quadratic": {
       const mode = normalizeMode(easing.mode, "in-out");
-      const preset = { type: "quadratic", mode };
-      return { easing: createPowerEasing(2, mode), preset };
+      const param = { type: "quadratic", mode };
+      return { func: createPowerEasing(2, mode), param };
     }
     case "cubic": {
       const mode = normalizeMode(easing.mode, "in-out");
-      const preset = { type: "cubic", mode };
-      return { easing: createPowerEasing(3, mode), preset };
+      const param = { type: "cubic", mode };
+      return { func: createPowerEasing(3, mode), param };
     }
     case "sine": {
       const mode = normalizeMode(easing.mode, "in-out");
       const amplitude = Number.isFinite(easing.amplitude) && easing.amplitude > 0 ? easing.amplitude : 1;
-      const preset = { type: "sine", mode, amplitude };
-      return { easing: createSineEasing(mode, amplitude), preset };
+      const param = { type: "sine", mode, amplitude };
+      return { func: createSineEasing(mode, amplitude), param };
     }
     case "bounce": {
       const bounces = Number.isFinite(easing.bounces) && easing.bounces > 0 ? easing.bounces : 3;
       const decay = Number.isFinite(easing.decay) && easing.decay > 0 ? easing.decay : 0.5;
-      const preset = {
+      const param = {
         type: "bounce",
         bounces,
         decay
       };
-      return { easing: createBounceEasing(bounces, decay), preset };
+      return { func: createBounceEasing(bounces, decay), param };
     }
     case "back": {
       const overshoot = Number.isFinite(easing.overshoot) && easing.overshoot !== void 0 ? easing.overshoot : 1.70158;
-      const preset = { type: "back", overshoot };
-      return { easing: createBackEasing(overshoot), preset };
+      const param = { type: "back", overshoot };
+      return { func: createBackEasing(overshoot), param };
     }
     default:
       return fallback;
@@ -22351,6 +22350,28 @@ const UV_CORNERS = [
   [0, 1],
   [1, 1]
 ];
+const __CSS_KEYWORD_COLORS = {
+  black: [0, 0, 0, 1],
+  silver: [192, 192, 192, 1],
+  gray: [128, 128, 128, 1],
+  white: [255, 255, 255, 1],
+  maroon: [128, 0, 0, 1],
+  red: [255, 0, 0, 1],
+  purple: [128, 0, 128, 1],
+  fuchsia: [255, 0, 255, 1],
+  green: [0, 128, 0, 1],
+  lime: [0, 255, 0, 1],
+  olive: [128, 128, 0, 1],
+  yellow: [255, 255, 0, 1],
+  navy: [0, 0, 128, 1],
+  blue: [0, 0, 255, 1],
+  teal: [0, 128, 128, 1],
+  aqua: [0, 255, 255, 1],
+  transparent: [0, 0, 0, 0]
+};
+const CSS_KEYWORD_COLORS = __CSS_KEYWORD_COLORS;
+const DEFAULT_BORDER_COLOR = "red";
+const DEFAULT_BORDER_COLOR_RGBA = CSS_KEYWORD_COLORS.red;
 const cloneSpriteLocation = (location2) => {
   if (location2.z === void 0) {
     return { lng: location2.lng, lat: location2.lat };
@@ -22358,8 +22379,8 @@ const cloneSpriteLocation = (location2) => {
   return { lng: location2.lng, lat: location2.lat, z: location2.z };
 };
 const lerpSpriteLocation = (from, to, ratio) => {
-  var _a2, _b;
-  const zFrom = (_a2 = from.z) != null ? _a2 : 0;
+  var _a, _b;
+  const zFrom = (_a = from.z) != null ? _a : 0;
   const zTo = (_b = to.z) != null ? _b : 0;
   const hasZ = from.z !== void 0 || to.z !== void 0;
   const result = {
@@ -22372,16 +22393,16 @@ const lerpSpriteLocation = (from, to, ratio) => {
   return result;
 };
 const spriteLocationsEqual = (a, b) => {
-  var _a2, _b;
-  const zA = (_a2 = a.z) != null ? _a2 : null;
+  var _a, _b;
+  const zA = (_a = a.z) != null ? _a : null;
   const zB = (_b = b.z) != null ? _b : null;
   return a.lng === b.lng && a.lat === b.lat && zA === zB;
 };
 const toCartesianMeters = (location2) => {
-  var _a2;
+  var _a;
   const latitude = location2.lat;
   const longitude = location2.lng;
-  const altitude = (_a2 = location2.z) != null ? _a2 : 0;
+  const altitude = (_a = location2.z) != null ? _a : 0;
   const latRad = latitude * DEG2RAD;
   const lonRad = longitude * DEG2RAD;
   const cosLat = Math.cos(latRad);
@@ -22412,8 +22433,8 @@ const normalizeAngleDeg = (angle) => {
   return Object.is(normalized, -0) ? 0 : normalized;
 };
 const multiplyMatrixAndVector = (matrix, x, y, z, w) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-  const m0 = (_a2 = matrix[0]) != null ? _a2 : 0;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const m0 = (_a = matrix[0]) != null ? _a : 0;
   const m1 = (_b = matrix[1]) != null ? _b : 0;
   const m2 = (_c = matrix[2]) != null ? _c : 0;
   const m3 = (_d = matrix[3]) != null ? _d : 0;
@@ -22437,10 +22458,10 @@ const multiplyMatrixAndVector = (matrix, x, y, z, w) => {
   ];
 };
 const resolveScalingOptions = (options) => {
-  var _a2, _b;
+  var _a, _b;
   const base = UNLIMITED_SPRITE_SCALING_OPTIONS;
   const warnings = [];
-  const fallbackMetersPerPixel = Number.isFinite(base.metersPerPixel) && ((_a2 = base.metersPerPixel) != null ? _a2 : 0) > 0 ? base.metersPerPixel : 1;
+  const fallbackMetersPerPixel = Number.isFinite(base.metersPerPixel) && ((_a = base.metersPerPixel) != null ? _a : 0) > 0 ? base.metersPerPixel : 1;
   let metersPerPixel = (options == null ? void 0 : options.metersPerPixel) !== void 0 ? options.metersPerPixel : fallbackMetersPerPixel;
   if (!Number.isFinite(metersPerPixel) || metersPerPixel <= 0) {
     if ((options == null ? void 0 : options.metersPerPixel) !== void 0) {
@@ -22660,8 +22681,8 @@ const calculateBillboardPixelDimensions = (imageWidth, imageHeight, baseMetersPe
   );
 };
 const calculateBillboardOffsetPixels = (offset, imageScale, zoomScaleFactor, effectivePixelsPerMeter, sizeScaleAdjustment = 1) => {
-  var _a2, _b;
-  const offsetMeters = ((_a2 = offset == null ? void 0 : offset.offsetMeters) != null ? _a2 : 0) * imageScale * zoomScaleFactor;
+  var _a, _b;
+  const offsetMeters = ((_a = offset == null ? void 0 : offset.offsetMeters) != null ? _a : 0) * imageScale * zoomScaleFactor;
   const offsetPixels = offsetMeters * effectivePixelsPerMeter * sizeScaleAdjustment;
   const offsetRad = ((_b = offset == null ? void 0 : offset.offsetDeg) != null ? _b : 0) * DEG2RAD;
   return {
@@ -22670,11 +22691,11 @@ const calculateBillboardOffsetPixels = (offset, imageScale, zoomScaleFactor, eff
   };
 };
 const calculateBillboardAnchorShiftPixels = (halfWidth, halfHeight, anchor, totalRotateDeg) => {
-  var _a2, _b;
+  var _a, _b;
   if (halfWidth <= 0 || halfHeight <= 0) {
     return { x: 0, y: 0 };
   }
-  const anchorX = ((_a2 = anchor == null ? void 0 : anchor.x) != null ? _a2 : 0) * halfWidth;
+  const anchorX = ((_a = anchor == null ? void 0 : anchor.x) != null ? _a : 0) * halfWidth;
   const anchorY = ((_b = anchor == null ? void 0 : anchor.y) != null ? _b : 0) * halfHeight;
   if (anchorX === 0 && anchorY === 0) {
     return { x: 0, y: 0 };
@@ -22687,7 +22708,7 @@ const calculateBillboardAnchorShiftPixels = (halfWidth, halfHeight, anchor, tota
   return { x: shiftX, y: shiftY };
 };
 const calculateSurfaceWorldDimensions = (imageWidth, imageHeight, baseMetersPerPixel, imageScale, zoomScaleFactor, options) => {
-  var _a2, _b;
+  var _a, _b;
   if (!imageWidth || !imageHeight || imageWidth <= 0 || imageHeight <= 0 || baseMetersPerPixel <= 0) {
     return { width: 0, height: 0, scaleAdjustment: 1 };
   }
@@ -22696,7 +22717,7 @@ const calculateSurfaceWorldDimensions = (imageWidth, imageHeight, baseMetersPerP
   let height = ensureFinite(imageHeight * scaleFactor);
   let scaleAdjustment = 1;
   const effectivePixelsPerMeter = (options == null ? void 0 : options.effectivePixelsPerMeter) !== void 0 ? options.effectivePixelsPerMeter : 0;
-  const spriteMinPixel = (_a2 = options == null ? void 0 : options.spriteMinPixel) != null ? _a2 : 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);
@@ -22722,11 +22743,11 @@ const calculateSurfaceWorldDimensions = (imageWidth, imageHeight, baseMetersPerP
   return { width, height, scaleAdjustment };
 };
 const calculateSurfaceAnchorShiftMeters = (halfWidthMeters, halfHeightMeters, anchor, totalRotateDeg) => {
-  var _a2, _b;
+  var _a, _b;
   if (halfWidthMeters <= 0 || halfHeightMeters <= 0) {
     return { east: 0, north: 0 };
   }
-  const anchorEast = ((_a2 = anchor == null ? void 0 : anchor.x) != null ? _a2 : 0) * halfWidthMeters;
+  const anchorEast = ((_a = anchor == null ? void 0 : anchor.x) != null ? _a : 0) * halfWidthMeters;
   const anchorNorth = ((_b = anchor == null ? void 0 : anchor.y) != null ? _b : 0) * halfHeightMeters;
   if (anchorEast === 0 && anchorNorth === 0) {
     return { east: 0, north: 0 };
@@ -22739,8 +22760,8 @@ const calculateSurfaceAnchorShiftMeters = (halfWidthMeters, halfHeightMeters, an
   return { east, north };
 };
 const calculateSurfaceOffsetMeters = (offset, imageScale, zoomScaleFactor, sizeScaleAdjustment = 1) => {
-  var _a2, _b;
-  const offsetMeters = ((_a2 = offset == null ? void 0 : offset.offsetMeters) != null ? _a2 : 0) * imageScale * zoomScaleFactor;
+  var _a, _b;
+  const offsetMeters = ((_a = offset == null ? void 0 : offset.offsetMeters) != null ? _a : 0) * imageScale * zoomScaleFactor;
   if (offsetMeters === 0) {
     return { east: 0, north: 0 };
   }
@@ -22804,8 +22825,8 @@ const calculateBillboardDepthKey = (center, unproject, projectToClipSpace) => {
   return -ndcZ;
 };
 const calculateSurfaceDepthKey = (baseLngLat, displacements, projectToClipSpace, options) => {
-  var _a2;
-  const indices = (_a2 = options == null ? void 0 : options.indices) != null ? _a2 : TRIANGLE_INDICES;
+  var _a;
+  const indices = (_a = options == null ? void 0 : options.indices) != null ? _a : TRIANGLE_INDICES;
   let maxDepth = Number.NEGATIVE_INFINITY;
   for (const index of indices) {
     const displacement = displacements[index];
@@ -22893,12 +22914,12 @@ const BILLBOARD_BASE_CORNERS$1 = [
   [1, -1]
 ];
 const calculateBillboardCornerScreenPositions = (params) => {
-  var _a2, _b;
+  var _a, _b;
   const { center, halfWidth, halfHeight, anchor, totalRotateDeg } = params;
   if (halfWidth <= 0 || halfHeight <= 0) {
     return UV_CORNERS.map(([u, v]) => ({ x: center.x, y: center.y, u, v }));
   }
-  const anchorOffsetX = ((_a2 = anchor == null ? void 0 : anchor.x) != null ? _a2 : 0) * halfWidth;
+  const anchorOffsetX = ((_a = anchor == null ? void 0 : anchor.x) != null ? _a : 0) * halfWidth;
   const anchorOffsetY = ((_b = anchor == null ? void 0 : anchor.y) != null ? _b : 0) * halfHeight;
   const rad = -totalRotateDeg * DEG2RAD;
   const cosR = Math.cos(rad);
@@ -22923,7 +22944,7 @@ const calculateBillboardCornerScreenPositions = (params) => {
   return corners;
 };
 const computeSurfaceCornerShaderModel = (params) => {
-  var _a2, _b;
+  var _a, _b;
   const {
     baseLngLat,
     worldWidthMeters,
@@ -22946,7 +22967,7 @@ const computeSurfaceCornerShaderModel = (params) => {
       lat: baseLngLat.lat + deltaLat
     }));
   }
-  const anchorEast = ((_a2 = anchor == null ? void 0 : anchor.x) != null ? _a2 : 0) * halfWidth;
+  const anchorEast = ((_a = anchor == null ? void 0 : anchor.x) != null ? _a : 0) * halfWidth;
   const anchorNorth = ((_b = anchor == null ? void 0 : anchor.y) != null ? _b : 0) * halfHeight;
   const rad = -totalRotateDeg * DEG2RAD;
   const sinR = Math.sin(rad);
@@ -22973,7 +22994,7 @@ const computeSurfaceCornerShaderModel = (params) => {
   });
 };
 const calculateSurfaceCenterPosition = (params) => {
-  var _a2;
+  var _a;
   const {
     baseLngLat,
     imageWidth,
@@ -23053,7 +23074,7 @@ const calculateSurfaceCenterPosition = (params) => {
       baseLngLat,
       anchorlessDisplacement
     );
-    anchorlessCenter = (_a2 = projectPoint(anchorlessLngLat)) != null ? _a2 : null;
+    anchorlessCenter = (_a = projectPoint(anchorlessLngLat)) != null ? _a : null;
   }
   return {
     center,
@@ -23073,7 +23094,7 @@ const SURFACE_BASE_CORNERS$1 = [
 ];
 SURFACE_BASE_CORNERS$1.length;
 const calculateSurfaceCornerDisplacements = (params) => {
-  var _a2, _b;
+  var _a, _b;
   const {
     worldWidthMeters,
     worldHeightMeters,
@@ -23086,7 +23107,7 @@ const calculateSurfaceCornerDisplacements = (params) => {
   }
   const halfWidth = worldWidthMeters / 2;
   const halfHeight = worldHeightMeters / 2;
-  const anchorEast = ((_a2 = anchor == null ? void 0 : anchor.x) != null ? _a2 : 0) * halfWidth;
+  const anchorEast = ((_a = anchor == null ? void 0 : anchor.x) != null ? _a : 0) * halfWidth;
   const anchorNorth = ((_b = anchor == null ? void 0 : anchor.y) != null ? _b : 0) * halfHeight;
   const rad = -totalRotateDeg * DEG2RAD;
   const cosR = Math.cos(rad);
@@ -23131,11 +23152,11 @@ const clampOpacity = (value) => {
   return value;
 };
 const computeFeedforwardTarget = (previous, next) => {
-  var _a2, _b;
+  var _a, _b;
   if (!previous) {
     return cloneSpriteLocation(next);
   }
-  const prevZ = (_a2 = previous.z) != null ? _a2 : 0;
+  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 = {
@@ -23147,10 +23168,10 @@ const computeFeedforwardTarget = (previous, next) => {
   return target;
 };
 const normalizeOptions$2 = (options) => {
-  var _a2;
+  var _a;
   return {
     durationMs: Math.max(0, options.durationMs),
-    mode: (_a2 = options.mode) != null ? _a2 : "feedback",
+    mode: (_a = options.mode) != null ? _a : "feedback",
     easing: options.easing
   };
 };
@@ -23159,31 +23180,36 @@ const createInterpolationState = (params) => {
   const options = normalizeOptions$2(params.options);
   const from = cloneSpriteLocation(currentLocation);
   const resolvedEasing = resolveEasing(options.easing);
-  let to;
+  const commandTarget = cloneSpriteLocation(nextCommandLocation);
+  let pathTarget;
   if (options.mode === "feedforward") {
-    to = computeFeedforwardTarget(lastCommandLocation, nextCommandLocation);
-  } else {
-    to = cloneSpriteLocation(nextCommandLocation);
+    pathTarget = computeFeedforwardTarget(
+      lastCommandLocation,
+      nextCommandLocation
+    );
   }
-  const requiresInterpolation = options.durationMs > 0 && !spriteLocationsEqual(from, to);
+  const requiresInterpolation = options.durationMs > 0 && !spriteLocationsEqual(from, pathTarget != null ? pathTarget : commandTarget);
   const state = {
     mode: options.mode,
     durationMs: options.durationMs,
-    easing: resolvedEasing.easing,
-    easingPreset: resolvedEasing.preset,
+    easingFunc: resolvedEasing.func,
+    easingParam: resolvedEasing.param,
     startTimestamp: -1,
     from,
-    to
+    to: commandTarget,
+    pathTarget: pathTarget && !spriteLocationsEqual(pathTarget, commandTarget) ? pathTarget : void 0
   };
   return { state, requiresInterpolation };
 };
 const evaluateInterpolation = (params) => {
+  var _a;
   const { state } = params;
-  const easingFn = state.easing;
+  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;
-  if (duration === 0) {
+  const target = (_a = state.pathTarget) != null ? _a : state.to;
+  if (duration === 0 || spriteLocationsEqual(state.from, target)) {
     return {
       location: cloneSpriteLocation(state.to),
       completed: true,
@@ -23193,7 +23219,7 @@ const evaluateInterpolation = (params) => {
   const elapsed = timestamp - effectiveStart;
   const rawProgress = duration <= 0 ? 1 : elapsed / duration;
   const eased = easingFn(rawProgress);
-  const location2 = lerpSpriteLocation(state.from, state.to, eased);
+  const location2 = lerpSpriteLocation(state.from, target, eased);
   const completed = rawProgress >= 1;
   return {
     location: location2,
@@ -23216,13 +23242,13 @@ const normalizeDelta = (delta) => {
   return adjusted;
 };
 const normalizeOptions$1 = (options) => {
-  var _a2;
+  var _a;
   const resolved = resolveEasing(options.easing);
   return {
     durationMs: normalizeDuration$1(options.durationMs),
-    easing: resolved.easing,
-    easingPreset: resolved.preset,
-    mode: (_a2 = options.mode) != null ? _a2 : "feedback"
+    easingFunc: resolved.func,
+    easingParam: resolved.param,
+    mode: (_a = options.mode) != null ? _a : "feedback"
   };
 };
 const createDegreeInterpolationState = (params) => {
@@ -23236,14 +23262,16 @@ const createDegreeInterpolationState = (params) => {
   }
   const delta = normalizeDelta(effectiveTarget - currentValue);
   const pathTarget = currentValue + delta;
+  const normalizedPathTarget = Math.abs(pathTarget - targetValue) <= NUMERIC_EPSILON ? void 0 : pathTarget;
   const requiresInterpolation = options.durationMs > 0 && Math.abs(delta) > NUMERIC_EPSILON;
   const state = {
+    mode: options.mode,
     durationMs: options.durationMs,
-    easing: options.easing,
-    easingPreset: options.easingPreset,
+    easingFunc: options.easingFunc,
+    easingParam: options.easingParam,
     from: currentValue,
-    to: pathTarget,
-    finalValue: effectiveTarget,
+    to: targetValue,
+    pathTarget: normalizedPathTarget,
     startTimestamp: -1
   };
   return {
@@ -23264,38 +23292,40 @@ const clamp01$2 = (value) => {
   return value;
 };
 const evaluateDegreeInterpolation = (params) => {
+  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(state.to - state.from) <= NUMERIC_EPSILON) {
+  if (duration === 0 || Math.abs(targetValue - state.from) <= NUMERIC_EPSILON) {
     return {
-      value: state.finalValue,
+      value: state.to,
       completed: true,
       effectiveStartTimestamp: effectiveStart
     };
   }
   const elapsed = timestamp - effectiveStart;
   const rawProgress = duration <= 0 ? 1 : elapsed / duration;
-  const eased = clamp01$2(state.easing(rawProgress));
-  const interpolated = state.from + (state.to - state.from) * eased;
+  const eased = clamp01$2(state.easingFunc(rawProgress));
+  const interpolated = state.from + (targetValue - state.from) * eased;
   const completed = rawProgress >= 1;
   return {
-    value: completed ? state.finalValue : interpolated,
+    value: completed ? state.to : interpolated,
     completed,
     effectiveStartTimestamp: effectiveStart
   };
 };
 const DEGREE_INTERPOLATION_CHANNELS = {
   rotation: {
-    stateKey: "rotationInterpolationState",
+    resolveInterpolation: (image) => image.rotateDeg.interpolation,
     normalize: normalizeAngleDeg,
     applyValue: (image, value) => {
       image.displayedRotateDeg = value;
     }
   },
   offsetDeg: {
-    stateKey: "offsetDegInterpolationState",
+    resolveInterpolation: (image) => image.offset.offsetDeg.interpolation,
     applyValue: (image, value) => {
       image.offset.offsetDeg.current = value;
     },
@@ -23307,14 +23337,10 @@ const DEGREE_INTERPOLATION_CHANNELS = {
   }
 };
 const updateDegreeInterpolationState = (image, descriptor, nextState) => {
-  if (descriptor.stateKey === "rotationInterpolationState") {
-    image.rotationInterpolationState = nextState;
-  } else {
-    image.offsetDegInterpolationState = nextState;
-  }
+  descriptor.resolveInterpolation(image).state = nextState;
 };
 const collectDegreeInterpolationWorkItems = (image, workItems) => {
-  const rotationState = image.rotationInterpolationState;
+  const rotationState = DEGREE_INTERPOLATION_CHANNELS.rotation.resolveInterpolation(image).state;
   if (rotationState) {
     workItems.push({
       descriptor: DEGREE_INTERPOLATION_CHANNELS.rotation,
@@ -23322,7 +23348,7 @@ const collectDegreeInterpolationWorkItems = (image, workItems) => {
       state: rotationState
     });
   }
-  const offsetState = image.offsetDegInterpolationState;
+  const offsetState = DEGREE_INTERPOLATION_CHANNELS.offsetDeg.resolveInterpolation(image).state;
   if (offsetState) {
     workItems.push({
       descriptor: DEGREE_INTERPOLATION_CHANNELS.offsetDeg,
@@ -23332,11 +23358,11 @@ const collectDegreeInterpolationWorkItems = (image, workItems) => {
   }
 };
 const applyDegreeInterpolationEvaluations = (workItems, evaluations, timestamp) => {
-  var _a2, _b, _c;
+  var _a, _b, _c;
   let active = false;
   for (let index = 0; index < workItems.length; index += 1) {
     const item = workItems[index];
-    const evaluation = (_a2 = evaluations[index]) != null ? _a2 : evaluateDegreeInterpolation({
+    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateDegreeInterpolation({
       state: item.state,
       timestamp
     });
@@ -23348,7 +23374,7 @@ const applyDegreeInterpolationEvaluations = (workItems, evaluations, timestamp)
     const interpolatedValue = normalize(evaluation.value);
     item.descriptor.applyValue(item.image, interpolatedValue);
     if (evaluation.completed) {
-      const finalValue = normalize(item.state.finalValue);
+      const finalValue = normalize(item.state.to);
       applyFinalValue(item.image, finalValue);
       updateDegreeInterpolationState(item.image, item.descriptor, null);
     } else {
@@ -23394,32 +23420,13 @@ const normalizeRgba = (r, g, b, a) => [
   clamp255(b) / 255,
   clamp01$1(a)
 ];
-const CSS_KEYWORD_COLORS = {
-  black: normalizeRgba(0, 0, 0, 1),
-  silver: normalizeRgba(192, 192, 192, 1),
-  gray: normalizeRgba(128, 128, 128, 1),
-  white: normalizeRgba(255, 255, 255, 1),
-  maroon: normalizeRgba(128, 0, 0, 1),
-  red: normalizeRgba(255, 0, 0, 1),
-  purple: normalizeRgba(128, 0, 128, 1),
-  fuchsia: normalizeRgba(255, 0, 255, 1),
-  green: normalizeRgba(0, 128, 0, 1),
-  lime: normalizeRgba(0, 255, 0, 1),
-  olive: normalizeRgba(128, 128, 0, 1),
-  yellow: normalizeRgba(255, 255, 0, 1),
-  navy: normalizeRgba(0, 0, 128, 1),
-  blue: normalizeRgba(0, 0, 255, 1),
-  teal: normalizeRgba(0, 128, 128, 1),
-  aqua: normalizeRgba(0, 255, 255, 1),
-  transparent: normalizeRgba(0, 0, 0, 0)
-};
 const tryParseHexColor = (value) => {
-  var _a2;
+  var _a;
   const match = /^#([0-9a-f]{3,8})$/i.exec(value.trim());
   if (!match) {
     return null;
   }
-  const hex = (_a2 = match[1]) != null ? _a2 : "";
+  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);
@@ -23463,14 +23470,14 @@ const parseAlpha = (value) => {
   return Number.isFinite(number) ? clamp01$1(number) : Number.NaN;
 };
 const tryParseRgbFunction = (value) => {
-  var _a2, _b, _c;
+  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((_a2 = match[1]) != null ? _a2 : "");
+  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]);
@@ -23480,7 +23487,7 @@ const tryParseRgbFunction = (value) => {
   return normalizeRgba(r, g, b, a);
 };
 const parseColorUsingDom = (value) => {
-  var _a2;
+  var _a;
   if (typeof document === "undefined") {
     return null;
   }
@@ -23490,35 +23497,33 @@ const parseColorUsingDom = (value) => {
   if (!element.style.color) {
     return null;
   }
-  return (_a2 = tryParseRgbFunction(element.style.color)) != null ? _a2 : tryParseHexColor(element.style.color.toLowerCase());
+  return (_a = tryParseRgbFunction(element.style.color)) != null ? _a : tryParseHexColor(element.style.color.toLowerCase());
 };
-const parseCssColorToRgba = (color, fallback) => {
-  var _a2, _b, _c;
+const parseCssColorToRgba = (color, fallback2) => {
+  var _a, _b, _c;
   if (!color) {
-    return fallback;
+    return fallback2;
   }
   const trimmed = color.trim();
   if (trimmed.length === 0) {
-    return fallback;
+    return fallback2;
   }
   const keyword = CSS_KEYWORD_COLORS[trimmed.toLowerCase()];
   if (keyword) {
     return keyword;
   }
-  return (_c = (_b = (_a2 = tryParseHexColor(trimmed)) != null ? _a2 : tryParseRgbFunction(trimmed)) != null ? _b : parseColorUsingDom(trimmed)) != null ? _c : fallback;
+  return (_c = (_b = (_a = tryParseHexColor(trimmed)) != null ? _a : tryParseRgbFunction(trimmed)) != null ? _b : parseColorUsingDom(trimmed)) != null ? _c : fallback2;
 };
-const DEFAULT_BORDER_COLOR = "red";
-const DEFAULT_BORDER_COLOR_RGBA = (_a = CSS_KEYWORD_COLORS.red) != null ? _a : normalizeRgba(255, 0, 0, 1);
 const DISTANCE_EPSILON = 1e-6;
 const normalizeDuration = (durationMs) => Number.isFinite(durationMs) && durationMs > 0 ? durationMs : 0;
 const normalizeOptions = (options) => {
-  var _a2;
+  var _a;
   const resolved = resolveEasing(options.easing);
   return {
     durationMs: normalizeDuration(options.durationMs),
-    easing: resolved.easing,
-    easingPreset: resolved.preset,
-    mode: (_a2 = options.mode) != null ? _a2 : "feedback"
+    easingFunc: resolved.func,
+    easingParam: resolved.param,
+    mode: (_a = options.mode) != null ? _a : "feedback"
   };
 };
 const createDistanceInterpolationState = (params) => {
@@ -23532,13 +23537,16 @@ const createDistanceInterpolationState = (params) => {
   }
   const delta = effectiveTarget - currentValue;
   const requiresInterpolation = options.durationMs > 0 && Math.abs(delta) > DISTANCE_EPSILON;
+  const pathTarget = currentValue + delta;
+  const normalizedPathTarget = Math.abs(pathTarget - targetValue) <= DISTANCE_EPSILON ? void 0 : pathTarget;
   const state = {
+    mode: options.mode,
     durationMs: options.durationMs,
-    easing: options.easing,
-    easingPreset: options.easingPreset,
+    easingFunc: options.easingFunc,
+    easingParam: options.easingParam,
     from: currentValue,
-    to: currentValue + delta,
-    finalValue: effectiveTarget,
+    to: targetValue,
+    pathTarget: normalizedPathTarget,
     startTimestamp: -1
   };
   return {
@@ -23559,31 +23567,33 @@ const clamp01 = (value) => {
   return value;
 };
 const evaluateDistanceInterpolation = (params) => {
+  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(state.to - state.from) <= DISTANCE_EPSILON) {
+  if (duration === 0 || Math.abs(targetValue - state.from) <= DISTANCE_EPSILON) {
     return {
-      value: state.finalValue,
+      value: state.to,
       completed: true,
       effectiveStartTimestamp: effectiveStart
     };
   }
   const elapsed = timestamp - effectiveStart;
   const rawProgress = duration <= 0 ? 1 : elapsed / duration;
-  const eased = clamp01(state.easing(rawProgress));
-  const interpolated = state.from + (state.to - state.from) * eased;
+  const eased = clamp01(state.easingFunc(rawProgress));
+  const interpolated = state.from + (targetValue - state.from) * eased;
   const completed = rawProgress >= 1;
   return {
-    value: completed ? state.finalValue : interpolated,
+    value: completed ? state.to : interpolated,
     completed,
     effectiveStartTimestamp: effectiveStart
   };
 };
 const DISTANCE_INTERPOLATION_CHANNELS = {
   offsetMeters: {
-    stateKey: "offsetMetersInterpolationState",
+    resolveInterpolation: (image) => image.offset.offsetMeters.interpolation,
     applyValue: (image, value) => {
       image.offset.offsetMeters.current = value;
     },
@@ -23594,7 +23604,7 @@ const DISTANCE_INTERPOLATION_CHANNELS = {
     }
   },
   opacity: {
-    stateKey: "opacityInterpolationState",
+    resolveInterpolation: (image) => image.opacity.interpolation,
     normalize: clampOpacity,
     applyValue: (image, value) => {
       image.opacity.current = value;
@@ -23607,10 +23617,12 @@ const DISTANCE_INTERPOLATION_CHANNELS = {
   }
 };
 const collectDistanceInterpolationWorkItems = (image, workItems, options) => {
-  var _a2, _b;
-  const includeOffsetMeters = (_a2 = options == null ? void 0 : options.includeOffsetMeters) != null ? _a2 : true;
+  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 offsetMetersState = image.offsetMetersInterpolationState;
+  const offsetMetersState = DISTANCE_INTERPOLATION_CHANNELS.offsetMeters.resolveInterpolation(
+    image
+  ).state;
   if (includeOffsetMeters && offsetMetersState) {
     workItems.push({
       descriptor: DISTANCE_INTERPOLATION_CHANNELS.offsetMeters,
@@ -23618,7 +23630,7 @@ const collectDistanceInterpolationWorkItems = (image, workItems, options) => {
       state: offsetMetersState
     });
   }
-  const opacityState = image.opacityInterpolationState;
+  const opacityState = DISTANCE_INTERPOLATION_CHANNELS.opacity.resolveInterpolation(image).state;
   if (includeOpacity && opacityState) {
     workItems.push({
       descriptor: DISTANCE_INTERPOLATION_CHANNELS.opacity,
@@ -23628,18 +23640,14 @@ const collectDistanceInterpolationWorkItems = (image, workItems, options) => {
   }
 };
 const updateDistanceInterpolationState = (image, descriptor, nextState) => {
-  if (descriptor.stateKey === "offsetMetersInterpolationState") {
-    image.offsetMetersInterpolationState = nextState;
-  } else {
-    image.opacityInterpolationState = nextState;
-  }
+  descriptor.resolveInterpolation(image).state = nextState;
 };
 const applyDistanceInterpolationEvaluations = (workItems, evaluations, timestamp) => {
-  var _a2, _b, _c;
+  var _a, _b, _c;
   let active = false;
   for (let index = 0; index < workItems.length; index += 1) {
     const item = workItems[index];
-    const evaluation = (_a2 = evaluations[index]) != null ? _a2 : evaluateDistanceInterpolation({
+    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateDistanceInterpolation({
       state: item.state,
       timestamp
     });
@@ -23651,7 +23659,7 @@ const applyDistanceInterpolationEvaluations = (workItems, evaluations, timestamp
     const interpolatedValue = normalize(evaluation.value);
     item.descriptor.applyValue(item.image, interpolatedValue);
     if (evaluation.completed) {
-      const finalValue = normalize(item.state.finalValue);
+      const finalValue = normalize(item.state.to);
       applyFinalValue(item.image, finalValue);
       updateDistanceInterpolationState(item.image, item.descriptor, null);
     } else {
@@ -23662,7 +23670,7 @@ const applyDistanceInterpolationEvaluations = (workItems, evaluations, timestamp
   return active;
 };
 const stepDegreeInterpolationState = (interpolationState, timestamp, applyValue, options) => {
-  var _a2, _b;
+  var _a, _b;
   if (!interpolationState) {
     return { state: null, active: false };
   }
@@ -23673,20 +23681,20 @@ const stepDegreeInterpolationState = (interpolationState, timestamp, applyValue,
   if (interpolationState.startTimestamp < 0) {
     interpolationState.startTimestamp = evaluation.effectiveStartTimestamp;
   }
-  const normalizeValue = (_a2 = options == null ? void 0 : options.normalize) != null ? _a2 : ((value) => value);
+  const normalizeValue = (_a = options == null ? void 0 : options.normalize) != null ? _a : ((value) => value);
   const applyFinalValue = (_b = options == null ? void 0 : options.applyFinalValue) != null ? _b : applyValue;
   const interpolatedValue = normalizeValue(evaluation.value);
   applyValue(interpolatedValue);
   if (evaluation.completed) {
-    const finalValue = normalizeValue(interpolationState.finalValue);
+    const finalValue = normalizeValue(interpolationState.to);
     applyFinalValue(finalValue);
     return { state: null, active: false };
   }
   return { state: interpolationState, active: true };
 };
 const resolveManualRotationFromDisplayed = (image) => {
-  var _a2;
-  const baseRotation = (_a2 = image.resolvedBaseRotateDeg) != null ? _a2 : 0;
+  var _a;
+  const baseRotation = (_a = image.resolvedBaseRotateDeg) != null ? _a : 0;
   const fallbackRotation = normalizeAngleDeg(
     baseRotation + image.rotationCommandDeg
   );
@@ -23695,7 +23703,7 @@ const resolveManualRotationFromDisplayed = (image) => {
 };
 const refreshRotateDegInterpolatedValues = (image) => {
   image.rotateDeg.current = resolveManualRotationFromDisplayed(image);
-  if (!image.rotationInterpolationState) {
+  if (!image.rotateDeg.interpolation.state) {
     image.rotateDeg.from = void 0;
     image.rotateDeg.to = void 0;
   }
@@ -23705,8 +23713,8 @@ const updateImageDisplayedRotation = (image, optionsOverride) => {
     image.resolvedBaseRotateDeg + image.rotationCommandDeg
   );
   const currentAngle = Number.isFinite(image.displayedRotateDeg) ? image.displayedRotateDeg : targetAngle;
-  const previousCommandAngle = image.lastCommandRotateDeg;
-  const options = optionsOverride === void 0 ? image.rotationInterpolationOptions : optionsOverride;
+  const previousCommandAngle = image.rotateDeg.interpolation.lastCommandValue;
+  const options = optionsOverride === void 0 ? image.rotateDeg.interpolation.options : optionsOverride;
   const { nextAngleDeg, interpolationState } = resolveRotationTarget({
     currentAngleDeg: currentAngle,
     targetAngleDeg: targetAngle,
@@ -23714,11 +23722,11 @@ const updateImageDisplayedRotation = (image, optionsOverride) => {
     options: options != null ? options : void 0
   });
   image.displayedRotateDeg = nextAngleDeg;
-  image.rotationInterpolationState = interpolationState;
+  image.rotateDeg.interpolation.state = interpolationState;
   if (!interpolationState) {
     image.displayedRotateDeg = targetAngle;
   }
-  image.lastCommandRotateDeg = targetAngle;
+  image.rotateDeg.interpolation.lastCommandValue = targetAngle;
 };
 const syncImageRotationChannel = (image, optionsOverride) => {
   updateImageDisplayedRotation(image, optionsOverride);
@@ -23726,7 +23734,7 @@ const syncImageRotationChannel = (image, optionsOverride) => {
 };
 const stepRotationInterpolation = (image, timestamp) => {
   const { state, active } = stepDegreeInterpolationState(
-    image.rotationInterpolationState,
+    image.rotateDeg.interpolation.state,
     timestamp,
     (value) => {
       image.displayedRotateDeg = value;
@@ -23735,19 +23743,19 @@ const stepRotationInterpolation = (image, timestamp) => {
       normalize: normalizeAngleDeg
     }
   );
-  image.rotationInterpolationState = state;
+  image.rotateDeg.interpolation.state = state;
   refreshRotateDegInterpolatedValues(image);
   return active;
 };
 const stepOffsetDegInterpolation = (image, timestamp) => {
   const { state, active } = stepDegreeInterpolationState(
-    image.offsetDegInterpolationState,
+    image.offset.offsetDeg.interpolation.state,
     timestamp,
     (value) => {
       image.offset.offsetDeg.current = value;
     }
   );
-  image.offsetDegInterpolationState = state;
+  image.offset.offsetDeg.interpolation.state = state;
   if (!state) {
     image.offset.offsetDeg.from = void 0;
     image.offset.offsetDeg.to = void 0;
@@ -23755,12 +23763,12 @@ const stepOffsetDegInterpolation = (image, timestamp) => {
   return active;
 };
 const clearOffsetDegInterpolation = (image) => {
-  image.offsetDegInterpolationState = null;
+  image.offset.offsetDeg.interpolation.state = null;
   image.offset.offsetDeg.from = void 0;
   image.offset.offsetDeg.to = void 0;
 };
 const stepDistanceInterpolationState = (interpolationState, timestamp, applyValue, options) => {
-  var _a2, _b;
+  var _a, _b;
   if (!interpolationState) {
     return { state: null, active: false };
   }
@@ -23771,24 +23779,24 @@ const stepDistanceInterpolationState = (interpolationState, timestamp, applyValu
   if (interpolationState.startTimestamp < 0) {
     interpolationState.startTimestamp = evaluation.effectiveStartTimestamp;
   }
-  const normalizeValue = (_a2 = options == null ? void 0 : options.normalize) != null ? _a2 : ((value) => value);
+  const normalizeValue = (_a = options == null ? void 0 : options.normalize) != null ? _a : ((value) => value);
   const applyFinalValue = (_b = options == null ? void 0 : options.applyFinalValue) != null ? _b : applyValue;
   const interpolatedValue = normalizeValue(evaluation.value);
   applyValue(interpolatedValue);
   if (evaluation.completed) {
-    const finalValue = normalizeValue(interpolationState.finalValue);
+    const finalValue = normalizeValue(interpolationState.to);
     applyFinalValue(finalValue);
     return { state: null, active: false };
   }
   return { state: interpolationState, active: true };
 };
 const clearOffsetMetersInterpolation = (image) => {
-  image.offsetMetersInterpolationState = null;
+  image.offset.offsetMeters.interpolation.state = null;
   image.offset.offsetMeters.from = void 0;
   image.offset.offsetMeters.to = void 0;
 };
 const clearOpacityInterpolation = (image) => {
-  image.opacityInterpolationState = null;
+  image.opacity.interpolation.state = null;
 };
 const applyOffsetDegUpdate = (image, nextOffset, interpolationOptions) => {
   const options = interpolationOptions;
@@ -23796,26 +23804,26 @@ const applyOffsetDegUpdate = (image, nextOffset, interpolationOptions) => {
     image.offset.offsetDeg.current = nextOffset.offsetDeg;
     image.offset.offsetDeg.from = void 0;
     image.offset.offsetDeg.to = void 0;
-    image.offsetDegInterpolationState = null;
-    image.lastCommandOffsetDeg = nextOffset.offsetDeg;
+    image.offset.offsetDeg.interpolation.state = null;
+    image.offset.offsetDeg.interpolation.lastCommandValue = nextOffset.offsetDeg;
     return;
   }
   const { state, requiresInterpolation } = createDegreeInterpolationState({
     currentValue: image.offset.offsetDeg.current,
     targetValue: nextOffset.offsetDeg,
-    previousCommandValue: image.lastCommandOffsetDeg,
+    previousCommandValue: image.offset.offsetDeg.interpolation.lastCommandValue,
     options
   });
-  image.lastCommandOffsetDeg = nextOffset.offsetDeg;
+  image.offset.offsetDeg.interpolation.lastCommandValue = nextOffset.offsetDeg;
   if (requiresInterpolation) {
-    image.offsetDegInterpolationState = state;
+    image.offset.offsetDeg.interpolation.state = state;
     image.offset.offsetDeg.from = image.offset.offsetDeg.current;
     image.offset.offsetDeg.to = nextOffset.offsetDeg;
   } else {
     image.offset.offsetDeg.current = nextOffset.offsetDeg;
     image.offset.offsetDeg.from = void 0;
     image.offset.offsetDeg.to = void 0;
-    image.offsetDegInterpolationState = null;
+    image.offset.offsetDeg.interpolation.state = null;
   }
 };
 const applyOffsetMetersUpdate = (image, nextOffset, interpolationOptions) => {
@@ -23824,79 +23832,92 @@ const applyOffsetMetersUpdate = (image, nextOffset, interpolationOptions) => {
     image.offset.offsetMeters.current = nextOffset.offsetMeters;
     image.offset.offsetMeters.from = void 0;
     image.offset.offsetMeters.to = void 0;
-    image.offsetMetersInterpolationState = null;
-    image.lastCommandOffsetMeters = nextOffset.offsetMeters;
+    image.offset.offsetMeters.interpolation.state = null;
+    image.offset.offsetMeters.interpolation.lastCommandValue = nextOffset.offsetMeters;
     return;
   }
   const { state, requiresInterpolation } = createDistanceInterpolationState({
     currentValue: image.offset.offsetMeters.current,
     targetValue: nextOffset.offsetMeters,
-    previousCommandValue: image.lastCommandOffsetMeters,
+    previousCommandValue: image.offset.offsetMeters.interpolation.lastCommandValue,
     options
   });
-  image.lastCommandOffsetMeters = nextOffset.offsetMeters;
+  image.offset.offsetMeters.interpolation.lastCommandValue = nextOffset.offsetMeters;
   if (requiresInterpolation) {
-    image.offsetMetersInterpolationState = state;
+    image.offset.offsetMeters.interpolation.state = state;
     image.offset.offsetMeters.from = image.offset.offsetMeters.current;
     image.offset.offsetMeters.to = nextOffset.offsetMeters;
   } else {
     image.offset.offsetMeters.current = nextOffset.offsetMeters;
     image.offset.offsetMeters.from = void 0;
     image.offset.offsetMeters.to = void 0;
-    image.offsetMetersInterpolationState = null;
+    image.offset.offsetMeters.interpolation.state = null;
   }
 };
 const stepOffsetMetersInterpolation = (image, timestamp) => {
   const { state, active } = stepDistanceInterpolationState(
-    image.offsetMetersInterpolationState,
+    image.offset.offsetMeters.interpolation.state,
     timestamp,
     (value) => {
       image.offset.offsetMeters.current = value;
     }
   );
-  image.offsetMetersInterpolationState = state;
+  image.offset.offsetMeters.interpolation.state = state;
   if (!state) {
     image.offset.offsetMeters.from = void 0;
     image.offset.offsetMeters.to = void 0;
   }
   return active;
 };
-const applyOpacityUpdate = (image, nextOpacity, interpolationOptions) => {
-  const clampedTarget = clampOpacity(nextOpacity);
+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.opacityInterpolationState = null;
-    image.lastCommandOpacity = clampedTarget;
-    image.opacityTargetValue = clampedTarget;
-    image.lodLastCommandOpacity = clampedTarget;
-    return;
-  }
-  const { state, requiresInterpolation } = createDistanceInterpolationState({
-    currentValue: clampOpacity(image.opacity.current),
-    targetValue: clampedTarget,
-    previousCommandValue: image.lastCommandOpacity,
-    options
-  });
-  image.lastCommandOpacity = clampedTarget;
-  image.opacityTargetValue = clampedTarget;
-  image.lodLastCommandOpacity = clampedTarget;
-  if (requiresInterpolation) {
-    image.opacityInterpolationState = state;
-    image.opacity.from = image.opacity.current;
-    image.opacity.to = clampedTarget;
+    image.opacity.interpolation.state = null;
   } else {
-    image.opacity.current = clampedTarget;
-    image.opacity.from = void 0;
-    image.opacity.to = void 0;
-    image.opacityInterpolationState = null;
+    const { state, requiresInterpolation } = createDistanceInterpolationState({
+      currentValue: clampOpacity(image.opacity.current),
+      targetValue: clampedTarget,
+      previousCommandValue: image.opacity.interpolation.lastCommandValue,
+      options
+    });
+    if (requiresInterpolation) {
+      image.opacity.interpolation.state = state;
+      image.opacity.from = image.opacity.current;
+      image.opacity.to = clampedTarget;
+    } else {
+      image.opacity.current = clampedTarget;
+      image.opacity.from = void 0;
+      image.opacity.to = void 0;
+      image.opacity.interpolation.state = null;
+    }
   }
+  image.opacity.interpolation.lastCommandValue = clampedTarget;
+  image.opacity.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;
+  runOpacityTargetTransition(
+    image,
+    clampedBase * spriteOpacityMultiplier * lodMultiplier,
+    interpolationOptions != null ? interpolationOptions : null
+  );
+};
+const applyResolvedOpacityTarget = (image, resolvedTarget, interpolationOptions) => {
+  runOpacityTargetTransition(
+    image,
+    resolvedTarget,
+    interpolationOptions != null ? interpolationOptions : null
+  );
 };
 const stepOpacityInterpolation = (image, timestamp) => {
   const { state, active } = stepDistanceInterpolationState(
-    image.opacityInterpolationState,
+    image.opacity.interpolation.state,
     timestamp,
     (value) => {
       image.opacity.current = value;
@@ -23905,7 +23926,7 @@ const stepOpacityInterpolation = (image, timestamp) => {
       normalize: clampOpacity
     }
   );
-  image.opacityInterpolationState = state;
+  image.opacity.interpolation.state = state;
   if (!state) {
     image.opacity.from = void 0;
     image.opacity.to = void 0;
@@ -23919,9 +23940,9 @@ const IMAGE_INTERPOLATION_STEPPERS = [
   { id: "opacity", step: stepOpacityInterpolation }
 ];
 const stepSpriteImageInterpolations = (image, timestamp, options) => {
-  var _a2;
+  var _a;
   let active = false;
-  const skipChannels = (_a2 = options == null ? void 0 : options.skipChannels) != null ? _a2 : null;
+  const skipChannels = (_a = options == null ? void 0 : options.skipChannels) != null ? _a : null;
   for (const { id, step } of IMAGE_INTERPOLATION_STEPPERS) {
     if (skipChannels && skipChannels[id]) {
       continue;
@@ -23933,7 +23954,7 @@ const stepSpriteImageInterpolations = (image, timestamp, options) => {
   return active;
 };
 const hasActiveImageInterpolations = (image) => {
-  return image.rotationInterpolationState !== null || image.offsetDegInterpolationState !== null || image.offsetMetersInterpolationState !== null || image.opacityInterpolationState !== null;
+  return image.rotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null || image.offset.offsetMeters.interpolation.state !== null || image.opacity.interpolation.state !== null;
 };
 const applyOffsetUpdate = (image, nextOffset, options = {}) => {
   applyOffsetDegUpdate(image, nextOffset, options.deg);
@@ -24064,8 +24085,8 @@ const computeBillboardCornersShaderModel = ({
   anchor,
   rotationDeg
 }) => {
-  var _a2, _b;
-  const anchorX = (_a2 = anchor == null ? void 0 : anchor.x) != null ? _a2 : 0;
+  var _a, _b;
+  const anchorX = (_a = anchor == null ? void 0 : anchor.x) != null ? _a : 0;
   const anchorY = (_b = anchor == null ? void 0 : anchor.y) != null ? _b : 0;
   const rad = -rotationDeg * DEG2RAD;
   const cosR = Math.cos(rad);
@@ -24087,7 +24108,7 @@ const computeBillboardCornersShaderModel = ({
   });
 };
 const compileShader = (glContext, type, source) => {
-  var _a2;
+  var _a;
   const shader = glContext.createShader(type);
   if (!shader) {
     throw new Error("Failed to create shader.");
@@ -24095,14 +24116,14 @@ const compileShader = (glContext, type, source) => {
   glContext.shaderSource(shader, source);
   glContext.compileShader(shader);
   if (!glContext.getShaderParameter(shader, glContext.COMPILE_STATUS)) {
-    const info = (_a2 = glContext.getShaderInfoLog(shader)) != null ? _a2 : "unknown error";
+    const info = (_a = glContext.getShaderInfoLog(shader)) != null ? _a : "unknown error";
     glContext.deleteShader(shader);
     throw new Error(`Shader compile failed: ${info}`);
   }
   return shader;
 };
 const createShaderProgram = (glContext, vertexSource, fragmentSource) => {
-  var _a2;
+  var _a;
   const vertexShader = compileShader(
     glContext,
     glContext.VERTEX_SHADER,
@@ -24125,7 +24146,7 @@ const createShaderProgram = (glContext, vertexSource, fragmentSource) => {
   glContext.deleteShader(vertexShader);
   glContext.deleteShader(fragmentShader);
   if (!glContext.getProgramParameter(program, glContext.LINK_STATUS)) {
-    const info = (_a2 = glContext.getProgramInfoLog(program)) != null ? _a2 : "unknown error";
+    const info = (_a = glContext.getProgramInfoLog(program)) != null ? _a : "unknown error";
     glContext.deleteProgram(program);
     throw new Error(`Program link failed: ${info}`);
   }
@@ -24865,7 +24886,7 @@ const MIPMAP_MIN_FILTERS = /* @__PURE__ */ new Set([
 ]);
 const filterRequiresMipmaps = (filter) => MIPMAP_MIN_FILTERS.has(filter);
 const resolveTextureFilteringOptions = (options) => {
-  var _a2, _b;
+  var _a, _b;
   const minCandidate = options == null ? void 0 : options.minFilter;
   const minFilter = MIN_FILTER_VALUES.includes(
     minCandidate
@@ -24874,7 +24895,7 @@ const resolveTextureFilteringOptions = (options) => {
   const magFilter = MAG_FILTER_VALUES.includes(
     magCandidate
   ) ? magCandidate : DEFAULT_TEXTURE_FILTERING_OPTIONS.magFilter;
-  let generateMipmaps = (_a2 = options == null ? void 0 : options.generateMipmaps) != null ? _a2 : DEFAULT_TEXTURE_FILTERING_OPTIONS.generateMipmaps;
+  let generateMipmaps = (_a = options == null ? void 0 : options.generateMipmaps) != null ? _a : DEFAULT_TEXTURE_FILTERING_OPTIONS.generateMipmaps;
   if (filterRequiresMipmaps(minFilter)) {
     generateMipmaps = true;
   }
@@ -25326,7 +25347,7 @@ const MAX_MERCATOR_HORIZON_ANGLE = 89.25;
 const MIN_RENDER_DISTANCE_BELOW_CAMERA = 100;
 const NEAR_CLIP_DIVISOR = 50;
 const SIN_DENOMINATOR_EPSILON = 0.01;
-const toFiniteOr$1 = (value, fallback) => Number.isFinite(value) ? value : fallback;
+const toFiniteOr$1 = (value, fallback2) => Number.isFinite(value) ? value : fallback2;
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const circumferenceAtLatitude = (latitudeDeg) => 2 * Math.PI * EARTH_RADIUS_METERS * Math.cos(latitudeDeg * DEG2RAD);
 const mercatorXfromLng = (lng) => (180 + lng) / 360;
@@ -25416,7 +25437,7 @@ const calculateNearFarZ = (params, cameraToCenterDistance, cameraToSeaLevelDista
   };
 };
 const prepareProjectionState = (params) => {
-  var _a2;
+  var _a;
   const width = Math.max(0, params.width);
   const height = Math.max(0, params.height);
   const zoom = toFiniteOr$1(params.zoom, 0);
@@ -25517,7 +25538,7 @@ const prepareProjectionState = (params) => {
     clipSpaceToPixelsMatrix,
     worldMatrix
   );
-  const pixelMatrixInverse = (_a2 = invert(createMat4f64(), pixelMatrix)) != null ? _a2 : void 0;
+  const pixelMatrixInverse = (_a = invert(createMat4f64(), pixelMatrix)) != null ? _a : void 0;
   const clipContext = mercatorMatrix ? { mercatorMatrix } : void 0;
   return {
     zoom,
@@ -25623,7 +25644,7 @@ const createProjectionHost = (params) => {
     };
   };
   const calculatePerspectiveRatio = (location2, cachedMercator) => {
-    var _a2;
+    var _a;
     if (!state.mercatorMatrix || state.cameraToCenterDistance <= 0) {
       return 1;
     }
@@ -25633,7 +25654,7 @@ const createProjectionHost = (params) => {
         state.mercatorMatrix,
         mercator.x,
         mercator.y,
-        (_a2 = mercator.z) != null ? _a2 : 0,
+        (_a = mercator.z) != null ? _a : 0,
         1
       );
       if (!Number.isFinite(w) || w <= 0) {
@@ -25660,11 +25681,11 @@ const createProjectionHost = (params) => {
   };
 };
 const createProjectionHostParamsFromMapLibre = (map) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const ensureFinite2 = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
   const centerLngLat = map.getCenter();
   const transform = map.transform;
-  const canvas = typeof map.getCanvas === "function" ? (_a2 = map.getCanvas()) != null ? _a2 : null : null;
+  const canvas = typeof map.getCanvas === "function" ? (_a = map.getCanvas()) != null ? _a : null : null;
   if (!transform) {
     return {
       zoom: (_b = ensureFinite2(map.getZoom())) != null ? _b : 0,
@@ -25732,9 +25753,9 @@ const createFromLngLat = (wasm) => {
     WASM_FromLngLat_RESULT_ELEMENT_COUNT
   );
   const fromLngLat = (location2) => {
-    var _a2;
+    var _a;
     const { ptr, buffer } = resultHolder.prepare();
-    wasm.fromLngLat(location2.lng, location2.lat, (_a2 = location2.z) != null ? _a2 : 0, ptr);
+    wasm.fromLngLat(location2.lng, location2.lat, (_a = location2.z) != null ? _a : 0, ptr);
     const x = buffer[0];
     const y = buffer[1];
     const z = buffer[2];
@@ -25761,13 +25782,13 @@ const createProject = (wasm, preparedState) => {
     WASM_Project_RESULT_ELEMENT_COUNT
   );
   const project = (location2) => {
-    var _a2;
+    var _a;
     const { ptr: matrixPtr } = matrixHolder.prepare();
     const { ptr: resultPtr, buffer: result } = resultHolder.prepare();
     if (wasm.project(
       location2.lng,
       location2.lat,
-      (_a2 = location2.z) != null ? _a2 : 0,
+      (_a = location2.z) != null ? _a : 0,
       preparedState.worldSize,
       matrixPtr,
       resultPtr
@@ -25848,7 +25869,7 @@ const createCalculatePerspectiveRatio = (wasm, preparedState) => {
     WASM_CalculatePerspectiveRatio_RESULT_ELEMENT_COUNT
   );
   const calculatePerspectiveRatio = (location2, cachedMercator) => {
-    var _a2, _b;
+    var _a, _b;
     if (cachedMercator) {
       const { ptr: matrixPtr } = matrixHolder.prepare();
       const { ptr: cachedMercatorPtr, buffer: cachedMercatorBuffer } = cachedMercatorHolder.prepare();
@@ -25859,7 +25880,7 @@ const createCalculatePerspectiveRatio = (wasm, preparedState) => {
       if (wasm.calculatePerspectiveRatio(
         location2.lng,
         location2.lat,
-        (_a2 = location2.z) != null ? _a2 : 0,
+        (_a = location2.z) != null ? _a : 0,
         cachedMercatorPtr,
         preparedState.cameraToCenterDistance,
         matrixPtr,
@@ -26057,7 +26078,7 @@ const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor,
   drawingBufferHeight,
   pixelRatio
 }) => {
-  var _a2, _b, _c;
+  var _a, _b, _c;
   const itemsWithDepth = [];
   const projectToClipSpace = (location2) => projectLngLatToClipSpace(projectionHost, location2, clipContext);
   const unprojectPoint = (point) => {
@@ -26111,7 +26132,7 @@ const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor,
       clipContext,
       resolveOrigin
     };
-    const anchorResolved = (_a2 = imageEntry.anchor) != null ? _a2 : DEFAULT_ANCHOR;
+    const anchorResolved = (_a = imageEntry.anchor) != null ? _a : DEFAULT_ANCHOR;
     const offsetResolved = resolveImageOffset$2(imageEntry);
     const depthCenter = computeImageCenterXY(
       spriteEntry,
@@ -26151,7 +26172,7 @@ const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor,
         offsetMeters
       });
       const baseLngLat = (() => {
-        var _a3;
+        var _a2;
         if (imageEntry.originLocation !== void 0) {
           const refImg = resolveOrigin(spriteEntry, imageEntry);
           if (refImg) {
@@ -26159,7 +26180,7 @@ const collectDepthSortedItemsInternal = (projectionHost, zoom, zoomScaleFactor,
               spriteEntry,
               refImg,
               centerParams,
-              (_a3 = imageEntry.originLocation.useResolvedAnchor) != null ? _a3 : false
+              (_a2 = imageEntry.originLocation.useResolvedAnchor) != null ? _a2 : false
             );
             const baseLngLatLike = projectionHost.unproject(baseCenter);
             if (baseLngLatLike) {
@@ -26244,7 +26265,7 @@ const projectLngLatToClipSpace = (projectionHost, location2, context) => {
   return [clipX, clipY, clipZ, clipW];
 };
 const computeImageCenterXY = (sprite, image, params, useResolvedAnchor) => {
-  var _a2, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e;
   const {
     originCenterCache,
     projected,
@@ -26288,7 +26309,7 @@ const computeImageCenterXY = (sprite, image, params, useResolvedAnchor) => {
     }
   }
   const totalRotDeg = Number.isFinite(image.displayedRotateDeg) ? image.displayedRotateDeg : normalizeAngleDeg(
-    ((_a2 = image.resolvedBaseRotateDeg) != null ? _a2 : 0) + image.rotationCommandDeg
+    ((_a = image.resolvedBaseRotateDeg) != null ? _a : 0) + image.rotationCommandDeg
   );
   const imageScaleLocal = (_b = image.scale) != null ? _b : 1;
   const imageResourceRef = imageResources[image.imageHandle];
@@ -26367,7 +26388,7 @@ const calculateWorldToMercatorScale = (projectionHost, base) => {
   };
 };
 const prepareSurfaceShaderInputs = (projectionHost, params) => {
-  var _a2;
+  var _a;
   const {
     baseLngLat,
     worldWidthMeters,
@@ -26404,7 +26425,7 @@ const prepareSurfaceShaderInputs = (projectionHost, params) => {
     mercatorCenter: {
       x: mercatorCenter.x,
       y: mercatorCenter.y,
-      z: (_a2 = mercatorCenter.z) != null ? _a2 : 0
+      z: (_a = mercatorCenter.z) != null ? _a : 0
     },
     worldToMercatorScale,
     halfSizeMeters,
@@ -26455,7 +26476,7 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
   screenToClipOffsetX,
   screenToClipOffsetY
 }) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const spriteEntry = item.sprite;
   const imageEntry = item.image;
   const imageResource = item.resource;
@@ -26482,7 +26503,7 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
     offsetY: identityOffsetY
   };
   let borderSizeScaleAdjustment = 1;
-  const anchor = (_a2 = imageEntry.anchor) != null ? _a2 : DEFAULT_ANCHOR;
+  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
@@ -26539,22 +26560,22 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
     }
   }
   const resolveBaseLocation = () => {
-    var _a3, _b2, _c2;
-    const fallback = spriteEntry.location.current;
+    var _a2, _b2, _c2;
+    const fallback2 = spriteEntry.location.current;
     if (imageEntry.originLocation !== void 0) {
       const unprojected = projectionHost.unproject(baseProjected);
       if (unprojected) {
         return {
           lng: unprojected.lng,
           lat: unprojected.lat,
-          z: (_b2 = (_a3 = fallback.z) != null ? _a3 : unprojected.z) != null ? _b2 : 0
+          z: (_b2 = (_a2 = fallback2.z) != null ? _a2 : unprojected.z) != null ? _b2 : 0
         };
       }
     }
     return {
-      lng: fallback.lng,
-      lat: fallback.lat,
-      z: (_c2 = fallback.z) != null ? _c2 : 0
+      lng: fallback2.lng,
+      lat: fallback2.lat,
+      z: (_c2 = fallback2.z) != null ? _c2 : 0
     };
   };
   const baseLocation = resolveBaseLocation();
@@ -26903,10 +26924,10 @@ const prepareDrawSpriteImageInternal = (projectionHost, item, zoom, zoomScaleFac
   };
 };
 const prepareDrawSpriteImages = (projectionHost, params) => {
-  var _a2;
+  var _a;
   const originCenterCache = /* @__PURE__ */ new Map();
   const zoom = projectionHost.getZoom();
-  const resolvedScaling = (_a2 = params.resolvedScaling) != null ? _a2 : resolveScalingOptions({
+  const resolvedScaling = (_a = params.resolvedScaling) != null ? _a : resolveScalingOptions({
     metersPerPixel: params.baseMetersPerPixel,
     spriteMinPixel: params.spriteMinPixel,
     spriteMaxPixel: params.spriteMaxPixel,
@@ -26939,29 +26960,39 @@ const prepareDrawSpriteImages = (projectionHost, params) => {
   }
   return preparedItems;
 };
-const resolveVisibilityTargetOpacity = (sprite, image, cameraDistanceMeters) => {
-  const baseOpacity = clampOpacity(image.lastCommandOpacity);
+const resolveVisibilityLodMultiplier = (sprite, cameraDistanceMeters) => {
   const threshold = sprite.visibilityDistanceMeters;
   if (threshold === void 0 || !Number.isFinite(threshold) || threshold <= 0 || !Number.isFinite(cameraDistanceMeters)) {
-    return baseOpacity;
+    return 1;
   }
-  return cameraDistanceMeters >= threshold ? 0 : baseOpacity;
+  return cameraDistanceMeters >= threshold ? 0 : 1;
 };
 const applyVisibilityDistanceLod = (preparedItems) => {
+  var _a, _b, _c;
   if (!preparedItems.length) {
     return;
   }
   for (const prepared of preparedItems) {
     const image = prepared.imageEntry;
     const sprite = prepared.spriteEntry;
-    const targetOpacity = resolveVisibilityTargetOpacity(
+    const lodMultiplier = resolveVisibilityLodMultiplier(
       sprite,
-      image,
       prepared.cameraDistanceMeters
     );
-    if (!Number.isFinite(image.opacityTargetValue) || Math.abs(image.opacityTargetValue - targetOpacity) > OPACITY_TARGET_EPSILON) {
-      image.opacityTargetValue = targetOpacity;
+    const previousLod = (_a = image.lodOpacity) != null ? _a : 1;
+    if (Math.abs(previousLod - lodMultiplier) <= OPACITY_TARGET_EPSILON) {
+      continue;
     }
+    image.lodOpacity = lodMultiplier;
+    const baseOpacity = (_b = image.opacity.interpolation.baseValue) != null ? _b : image.opacity.current;
+    const combinedTarget = clampOpacity(
+      baseOpacity * (sprite.opacityMultiplier || 1) * lodMultiplier
+    );
+    applyResolvedOpacityTarget(
+      image,
+      combinedTarget,
+      (_c = image.opacity.interpolation.options) != null ? _c : null
+    );
   }
 };
 const syncPreparedOpacities = (preparedItems) => {
@@ -27008,12 +27039,12 @@ const defaultInterpolationEvaluationHandlers = {
   evaluateSprite: (requests) => evaluateSpriteInterpolationsBatch(requests)
 };
 const applySpriteInterpolationEvaluations$1 = (workItems, evaluations, timestamp) => {
-  var _a2;
+  var _a;
   let active = false;
   for (let index = 0; index < workItems.length; index += 1) {
     const item = workItems[index];
     const { sprite, state } = item;
-    const evaluation = (_a2 = evaluations[index]) != null ? _a2 : evaluateInterpolation({
+    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateInterpolation({
       state,
       timestamp
     });
@@ -27025,39 +27056,37 @@ const applySpriteInterpolationEvaluations$1 = (workItems, evaluations, timestamp
       sprite.location.current = cloneSpriteLocation(state.to);
       sprite.location.from = void 0;
       sprite.location.to = void 0;
-      sprite.interpolationState = null;
+      sprite.location.interpolation.state = null;
     } else {
       active = true;
     }
   }
   return active;
 };
-const ensureOpacityInterpolationTarget = (image) => {
-  var _a2, _b;
+const ensureOpacityInterpolationTarget = (sprite, image) => {
+  var _a, _b, _c;
   const target = clampOpacity(
-    (_b = (_a2 = image.opacityTargetValue) != null ? _a2 : image.lastCommandOpacity) != null ? _b : image.opacity.current
+    ((_a = image.opacity.interpolation.baseValue) != null ? _a : image.opacity.current) * (sprite.opacityMultiplier || 1) * ((_b = image.lodOpacity) != null ? _b : 1)
   );
-  const interpolationState = image.opacityInterpolationState;
-  const currentStateTarget = interpolationState ? clampOpacity(interpolationState.finalValue) : image.opacity.current;
+  const interpolationState = image.opacity.interpolation.state;
+  const currentStateTarget = interpolationState ? clampOpacity((_c = interpolationState.pathTarget) != null ? _c : interpolationState.to) : image.opacity.current;
   if (interpolationState) {
     if (Math.abs(currentStateTarget - target) <= OPACITY_TARGET_EPSILON) {
       return;
     }
   } else if (Math.abs(image.opacity.current - target) <= OPACITY_TARGET_EPSILON) {
-    image.lodLastCommandOpacity = target;
     return;
   }
-  const options = image.opacityInterpolationOptions;
+  const options = image.opacity.interpolation.options;
   if (options && options.durationMs > 0) {
     const { state, requiresInterpolation } = createDistanceInterpolationState({
       currentValue: clampOpacity(image.opacity.current),
       targetValue: target,
-      previousCommandValue: image.lodLastCommandOpacity,
+      previousCommandValue: image.opacity.interpolation.lastCommandValue,
       options
     });
-    image.lodLastCommandOpacity = target;
     if (requiresInterpolation) {
-      image.opacityInterpolationState = state;
+      image.opacity.interpolation.state = state;
       image.opacity.from = image.opacity.current;
       image.opacity.to = target;
       return;
@@ -27066,11 +27095,12 @@ const ensureOpacityInterpolationTarget = (image) => {
   image.opacity.current = target;
   image.opacity.from = void 0;
   image.opacity.to = void 0;
-  image.opacityInterpolationState = null;
-  image.lodLastCommandOpacity = target;
+  image.opacity.interpolation.state = null;
+  image.opacity.interpolation.lastCommandValue = target;
+  image.opacity.interpolation.targetValue = target;
 };
 const processInterpolationsInternal = (params, handlers = defaultInterpolationEvaluationHandlers) => {
-  var _a2;
+  var _a;
   const evaluationHandlers = handlers != null ? handlers : defaultInterpolationEvaluationHandlers;
   const { sprites, timestamp } = params;
   if (!sprites.length) {
@@ -27084,13 +27114,14 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
   const spriteInterpolationWorkItems = [];
   let hasActiveInterpolation = false;
   for (const sprite of sprites) {
-    const state = sprite.interpolationState;
+    const locationInterpolation = sprite.location.interpolation;
+    const state = locationInterpolation.state;
     if (state) {
       spriteInterpolationWorkItems.push({ sprite, state });
     }
     sprite.images.forEach((orderMap) => {
       orderMap.forEach((image) => {
-        const hasOffsetMetersInterpolation = image.offsetMetersInterpolationState !== null;
+        const hasOffsetMetersInterpolation = image.offset.offsetMeters.interpolation.state !== null;
         if (hasOffsetMetersInterpolation) {
           collectDistanceInterpolationWorkItems(
             image,
@@ -27100,9 +27131,9 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
             }
           );
         }
-        ensureOpacityInterpolationTarget(image);
-        const hasOpacityInterpolation = image.opacityInterpolationState !== null;
-        const hasDegreeInterpolation = image.rotationInterpolationState !== null || image.offsetDegInterpolationState !== null;
+        ensureOpacityInterpolationTarget(sprite, image);
+        const hasOpacityInterpolation = image.opacity.interpolation.state !== null;
+        const hasDegreeInterpolation = image.rotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null;
         if (hasDegreeInterpolation) {
           collectDegreeInterpolationWorkItems(
             image,
@@ -27148,7 +27179,7 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
   })) : [];
   const hasRequests = distanceRequests.length > 0 || degreeRequests.length > 0 || spriteRequests.length > 0;
   if (hasRequests) {
-    (_a2 = evaluationHandlers.prepare) == null ? void 0 : _a2.call(evaluationHandlers, {
+    (_a = evaluationHandlers.prepare) == null ? void 0 : _a.call(evaluationHandlers, {
       distance: distanceRequests,
       degree: degreeRequests,
       sprite: spriteRequests
@@ -27190,7 +27221,7 @@ const processInterpolationsInternal = (params, handlers = defaultInterpolationEv
   };
 };
 const processOpacityInterpolationsAfterPreparation = (params, preparedItems, handlers = defaultInterpolationEvaluationHandlers) => {
-  var _a2;
+  var _a;
   const evaluationHandlers = handlers != null ? handlers : defaultInterpolationEvaluationHandlers;
   const { sprites, timestamp } = params;
   if (!sprites.length) {
@@ -27203,8 +27234,8 @@ const processOpacityInterpolationsAfterPreparation = (params, preparedItems, han
   for (const sprite of sprites) {
     sprite.images.forEach((orderMap) => {
       orderMap.forEach((image) => {
-        ensureOpacityInterpolationTarget(image);
-        if (image.opacityInterpolationState !== null) {
+        ensureOpacityInterpolationTarget(sprite, image);
+        if (image.opacity.interpolation.state !== null) {
           collectDistanceInterpolationWorkItems(image, opacityWorkItems, {
             includeOffsetMeters: false
           });
@@ -27223,7 +27254,7 @@ const processOpacityInterpolationsAfterPreparation = (params, preparedItems, han
     timestamp
   })) : [];
   if (opacityRequests.length > 0) {
-    (_a2 = evaluationHandlers.prepare) == null ? void 0 : _a2.call(evaluationHandlers, {
+    (_a = evaluationHandlers.prepare) == null ? void 0 : _a.call(evaluationHandlers, {
       distance: opacityRequests,
       degree: [],
       sprite: []
@@ -27295,8 +27326,8 @@ const EASING_PRESET_IDS = {
   back: 9
 };
 const encodeEasingPreset = (preset) => {
-  var _a2, _b, _c, _d, _e, _f, _g;
-  const id = (_a2 = EASING_PRESET_IDS[preset.type]) != null ? _a2 : -1;
+  var _a, _b, _c, _d, _e, _f, _g;
+  const id = (_a = EASING_PRESET_IDS[preset.type]) != null ? _a : -1;
   switch (preset.type) {
     case "ease": {
       const mode = preset.mode === "in" ? 1 : preset.mode === "out" ? 2 : (
@@ -27369,8 +27400,9 @@ const resolveImageOffset$1 = (image) => {
   };
 };
 const encodeDistanceInterpolationRequest = (buffer, cursor, request) => {
+  var _a;
   const { state, timestamp } = request;
-  const preset = encodeEasingPreset(state.easingPreset);
+  const preset = encodeEasingPreset(state.easingParam);
   if (preset.id < 0) {
     throw new Error(
       "Distance interpolation request missing preset easing function."
@@ -27378,8 +27410,8 @@ const encodeDistanceInterpolationRequest = (buffer, cursor, request) => {
   }
   buffer[cursor++] = state.durationMs;
   buffer[cursor++] = state.from;
+  buffer[cursor++] = (_a = state.pathTarget) != null ? _a : state.to;
   buffer[cursor++] = state.to;
-  buffer[cursor++] = state.finalValue;
   buffer[cursor++] = state.startTimestamp;
   buffer[cursor++] = timestamp;
   buffer[cursor++] = preset.id;
@@ -27389,8 +27421,9 @@ const encodeDistanceInterpolationRequest = (buffer, cursor, request) => {
   return cursor;
 };
 const encodeDegreeInterpolationRequest = (buffer, cursor, request) => {
+  var _a;
   const { state, timestamp } = request;
-  const preset = encodeEasingPreset(state.easingPreset);
+  const preset = encodeEasingPreset(state.easingParam);
   if (preset.id < 0) {
     throw new Error(
       "Degree interpolation request missing preset easing function."
@@ -27398,8 +27431,8 @@ const encodeDegreeInterpolationRequest = (buffer, cursor, request) => {
   }
   buffer[cursor++] = state.durationMs;
   buffer[cursor++] = state.from;
+  buffer[cursor++] = (_a = state.pathTarget) != null ? _a : state.to;
   buffer[cursor++] = state.to;
-  buffer[cursor++] = state.finalValue;
   buffer[cursor++] = state.startTimestamp;
   buffer[cursor++] = timestamp;
   buffer[cursor++] = preset.id;
@@ -27409,9 +27442,9 @@ const encodeDegreeInterpolationRequest = (buffer, cursor, request) => {
   return cursor;
 };
 const encodeSpriteInterpolationRequest = (buffer, cursor, request) => {
-  var _a2, _b;
+  var _a, _b;
   const { state, timestamp } = request;
-  const preset = encodeEasingPreset(state.easingPreset);
+  const preset = encodeEasingPreset(state.easingParam);
   if (preset.id < 0) {
     throw new Error(
       "Sprite interpolation request missing preset easing function."
@@ -27421,7 +27454,7 @@ const encodeSpriteInterpolationRequest = (buffer, cursor, request) => {
   buffer[cursor++] = state.durationMs;
   buffer[cursor++] = state.from.lng;
   buffer[cursor++] = state.from.lat;
-  buffer[cursor++] = (_a2 = state.from.z) != null ? _a2 : 0;
+  buffer[cursor++] = (_a = state.from.z) != null ? _a : 0;
   buffer[cursor++] = state.to.lng;
   buffer[cursor++] = state.to.lat;
   buffer[cursor++] = (_b = state.to.z) != null ? _b : 0;
@@ -27544,12 +27577,12 @@ const processInterpolationsViaWasm = (wasm, requests) => {
   }
 };
 const applySpriteInterpolationEvaluations = (workItems, evaluations, timestamp) => {
-  var _a2;
+  var _a;
   let active = false;
   for (let index = 0; index < workItems.length; index += 1) {
     const item = workItems[index];
     const { sprite, state } = item;
-    const evaluation = (_a2 = evaluations[index]) != null ? _a2 : evaluateInterpolation({
+    const evaluation = (_a = evaluations[index]) != null ? _a : evaluateInterpolation({
       state,
       timestamp
     });
@@ -27561,7 +27594,7 @@ const applySpriteInterpolationEvaluations = (workItems, evaluations, timestamp)
       sprite.location.current = cloneSpriteLocation(state.to);
       sprite.location.from = void 0;
       sprite.location.to = void 0;
-      sprite.interpolationState = null;
+      sprite.location.interpolation.state = null;
     } else {
       active = true;
     }
@@ -27582,7 +27615,8 @@ const processInterpolationsWithWasm = (wasm, params) => {
   const processedSprites = [];
   let hasActiveInterpolation = false;
   for (const sprite of sprites) {
-    const state = sprite.interpolationState;
+    const locationInterpolation = sprite.location.interpolation;
+    const state = locationInterpolation.state;
     const hasSpriteInterpolation = state !== null;
     if (!hasSpriteInterpolation && !sprite.interpolationDirty) {
       continue;
@@ -27601,7 +27635,7 @@ const processInterpolationsWithWasm = (wasm, params) => {
         if (!imageHasInterpolations) {
           return;
         }
-        const hasOffsetMetersInterpolation = image.offsetMetersInterpolationState !== null;
+        const hasOffsetMetersInterpolation = image.offset.offsetMeters.interpolation.state !== null;
         if (hasOffsetMetersInterpolation) {
           collectDistanceInterpolationWorkItems(
             image,
@@ -27611,8 +27645,8 @@ const processInterpolationsWithWasm = (wasm, params) => {
             }
           );
         }
-        const hasOpacityInterpolation = image.opacityInterpolationState !== null;
-        const hasDegreeInterpolation = image.rotationInterpolationState !== null || image.offsetDegInterpolationState !== null;
+        const hasOpacityInterpolation = image.opacity.interpolation.state !== null;
+        const hasDegreeInterpolation = image.rotateDeg.interpolation.state !== null || image.offset.offsetDeg.interpolation.state !== null;
         if (hasDegreeInterpolation) {
           collectDegreeInterpolationWorkItems(
             image,
@@ -27749,7 +27783,7 @@ const RESULT_COMMON_ITEM_LENGTH = 4 + // spriteIndex,imageIndex,resourceIndex,op
 3 + // useShaderSurface, surfaceClipEnabled, useShaderBillboard
 RESULT_BILLBOARD_UNIFORM_LENGTH + 1;
 const RESULT_ITEM_STRIDE = RESULT_COMMON_ITEM_LENGTH + RESULT_VERTEX_COMPONENT_LENGTH + RESULT_HIT_TEST_COMPONENT_LENGTH + RESULT_SURFACE_BLOCK_LENGTH;
-const toFiniteOr = (value, fallback) => Number.isFinite(value) ? value : fallback;
+const toFiniteOr = (value, fallback2) => Number.isFinite(value) ? value : fallback2;
 const boolToNumber = (value) => value ? 1 : 0;
 const modeToNumber = (mode) => mode === "surface" ? 0 : 1;
 const computeInputElementCount = (resourceCount, spriteCount, resultItemCount) => {
@@ -27771,17 +27805,17 @@ const ensureHitTestCorners = (imageEntry) => {
   return imageEntry.hitTestCorners;
 };
 const converToPreparedDrawImageParams = (state, deps, resultBuffer) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa;
   const { buffer } = resultBuffer.prepare();
   if (buffer.length < RESULT_HEADER_LENGTH) {
     return [];
   }
   const preparedCount = Math.max(
     0,
-    Math.trunc((_a2 = buffer[
+    Math.trunc((_a = buffer[
       0
       /* PREPARED_COUNT */
-    ]) != null ? _a2 : 0)
+    ]) != null ? _a : 0)
   );
   const itemStride = Math.trunc((_b = buffer[
     1
@@ -27811,12 +27845,12 @@ const converToPreparedDrawImageParams = (state, deps, resultBuffer) => {
     return altitude / circumferenceAtLatitude2;
   };
   const calculatePerspectiveRatio = (location2) => {
-    var _a3, _b2, _c2;
+    var _a2, _b2, _c2;
     const { mercatorMatrix, cameraToCenterDistance } = state.preparedProjection;
     if (!mercatorMatrix || !Number.isFinite(cameraToCenterDistance)) {
       return 1;
     }
-    const lng = (_a3 = location2.lng) != null ? _a3 : 0;
+    const lng = (_a2 = location2.lng) != null ? _a2 : 0;
     const lat = clampLatitude((_b2 = location2.lat) != null ? _b2 : 0);
     const altitude = (_c2 = location2.z) != null ? _c2 : 0;
     const mercatorX = (180 + lng) / 360;
@@ -27840,10 +27874,10 @@ const converToPreparedDrawImageParams = (state, deps, resultBuffer) => {
     }
   };
   const resolveEffectivePixelsPerMeter = (location2) => {
-    var _a3;
+    var _a2;
     const metersPerPixelAtLat = calculateMetersPerPixelAtLatitude(
       state.preparedProjection.zoom,
-      (_a3 = location2.lat) != null ? _a3 : 0
+      (_a2 = location2.lat) != null ? _a2 : 0
     );
     const perspectiveRatio = calculatePerspectiveRatio(location2);
     const effective = calculateEffectivePixelsPerMeter(
@@ -28119,13 +28153,13 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
   let resourceRefs = [];
   let state;
   const writeMatrix = (buffer, start, matrix) => {
-    var _a2;
+    var _a;
     for (let i = 0; i < 16; i++) {
-      buffer[start + i] = matrix ? (_a2 = matrix[i]) != null ? _a2 : 0 : 0;
+      buffer[start + i] = matrix ? (_a = matrix[i]) != null ? _a : 0 : 0;
     }
   };
   const prepareInputBuffer = (callParams) => {
-    var _a2, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { bucket } = callParams;
     const resultItemCount = bucket.length;
     const spriteHandleSet = /* @__PURE__ */ new Set();
@@ -28250,7 +28284,7 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
     frameConstView[fcCursor++] = EPS_NDC;
     frameConstView[fcCursor++] = boolToNumber(ENABLE_NDC_BIAS_SURFACE);
     const cameraLocation = preparedProjection.cameraLocation;
-    frameConstView[fcCursor++] = (_a2 = cameraLocation == null ? void 0 : cameraLocation.lng) != null ? _a2 : 0;
+    frameConstView[fcCursor++] = (_a = cameraLocation == null ? void 0 : cameraLocation.lng) != null ? _a : 0;
     frameConstView[fcCursor++] = (_b = cameraLocation == null ? void 0 : cameraLocation.lat) != null ? _b : 0;
     frameConstView[fcCursor++] = (_c = cameraLocation == null ? void 0 : cameraLocation.z) != null ? _c : 0;
     state.lastFrameParams = {
@@ -28298,7 +28332,7 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
     }
     cursor = spriteOffset;
     spriteHandles.forEach((handle) => {
-      var _a3, _b2;
+      var _a2, _b2;
       const sprite = spriteByHandle.get(handle);
       if (!sprite) {
         return;
@@ -28307,7 +28341,7 @@ const convertToWasmProjectionState = (wasm, params, deps) => {
       const mercator = sprite.cachedMercator;
       parameterBuffer[cursor++] = location2.lng;
       parameterBuffer[cursor++] = location2.lat;
-      parameterBuffer[cursor++] = (_a3 = location2.z) != null ? _a3 : 0;
+      parameterBuffer[cursor++] = (_a2 = location2.z) != null ? _a2 : 0;
       parameterBuffer[cursor++] = mercator.x;
       parameterBuffer[cursor++] = mercator.y;
       parameterBuffer[cursor++] = (_b2 = mercator.z) != null ? _b2 : 0;
@@ -28316,10 +28350,10 @@ 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 _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k;
       const imageHandle = image.imageHandle;
       const spriteHandle = sprite.handle;
-      const originKeyCandidate = (_a3 = originReferenceKeys == null ? void 0 : originReferenceKeys[index]) != null ? _a3 : image.originReferenceKey;
+      const originKeyCandidate = (_a2 = originReferenceKeys == null ? void 0 : originReferenceKeys[index]) != null ? _a2 : image.originReferenceKey;
       const originKey = originKeyCandidate !== void 0 && originKeyCandidate !== SPRITE_ORIGIN_REFERENCE_KEY_NONE ? originKeyCandidate : originReference.encodeKey(image.subLayer, image.order);
       const originIndex = (_b2 = originTargetIndices == null ? void 0 : originTargetIndices[index]) != null ? _b2 : image.originRenderTargetIndex;
       const originLocation = image.originLocation;
@@ -28862,9 +28896,9 @@ const createAtlasManager = (options) => {
       return removed;
     },
     getImagePlacement: (id) => {
-      var _a2;
+      var _a;
       const entry = images.get(id);
-      return (_a2 = entry == null ? void 0 : entry.placement) != null ? _a2 : null;
+      return (_a = entry == null ? void 0 : entry.placement) != null ? _a : null;
     },
     getPages: () => {
       return pages.slice();
@@ -29016,8 +29050,8 @@ const rectContainsRectInclusive = (container, target) => container.x0 <= target.
 const rectsOverlapInclusive = (a, b) => !(a.x1 < b.x0 || a.x0 > b.x1 || a.y1 < b.y0 || a.y0 > b.y1);
 const rectEquals = (a, b) => a.x0 === b.x0 && a.y0 === b.y0 && a.x1 === b.x1 && a.y1 === b.y1;
 const createLooseQuadTree = (options) => {
-  var _a2, _b, _c;
-  const maxItemsPerNode = (_a2 = options.maxItemsPerNode) != null ? _a2 : DEFAULT_MAX_ITEMS_PER_NODE;
+  var _a, _b, _c;
+  const maxItemsPerNode = (_a = options.maxItemsPerNode) != null ? _a : DEFAULT_MAX_ITEMS_PER_NODE;
   const maxDepth = (_b = options.maxDepth) != null ? _b : DEFAULT_MAX_DEPTH;
   const looseness = (_c = options.looseness) != null ? _c : DEFAULT_LOOSENESS;
   if (maxItemsPerNode <= 0) {
@@ -29299,7 +29333,7 @@ const createHitTestController = ({
     return rectFromLngLatPoints([cornerNE, cornerSW]);
   };
   const estimateSurfaceImageBounds = (projectionHost, sprite, image) => {
-    var _a2, _b, _c;
+    var _a, _b, _c;
     const imageResource = images.get(image.imageId);
     if (!imageResource) {
       return null;
@@ -29327,7 +29361,7 @@ const createHitTestController = ({
     if (!Number.isFinite(effectivePixelsPerMeter) || effectivePixelsPerMeter <= 0) {
       return null;
     }
-    const imageScale = (_a2 = image.scale) != null ? _a2 : 1;
+    const imageScale = (_a = image.scale) != null ? _a : 1;
     const baseMetersPerPixel = scaling.metersPerPixel;
     const spriteMinPixel = scaling.spriteMinPixel;
     const spriteMaxPixel = scaling.spriteMaxPixel;
@@ -29370,7 +29404,7 @@ const createHitTestController = ({
     return rectFromLngLatPoints(corners);
   };
   const estimateBillboardImageBounds = (projectionHost, sprite, image) => {
-    var _a2, _b;
+    var _a, _b;
     const imageResource = images.get(image.imageId);
     if (!imageResource) {
       return null;
@@ -29401,7 +29435,7 @@ const createHitTestController = ({
     const baseMetersPerPixel = scaling.metersPerPixel;
     const spriteMinPixel = scaling.spriteMinPixel;
     const spriteMaxPixel = scaling.spriteMaxPixel;
-    const imageScale = (_a2 = image.scale) != null ? _a2 : 1;
+    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
     );
@@ -29678,7 +29712,7 @@ const createHitTestController = ({
     return findTopmostHitEntryLinear(point);
   };
   const resolveScreenPointFromEvent = (nativeEvent, canvasElement) => {
-    var _a2, _b, _c;
+    var _a, _b, _c;
     if (!canvasElement) {
       return void 0;
     }
@@ -29689,7 +29723,7 @@ const createHitTestController = ({
     });
     if ("changedTouches" in nativeEvent) {
       const touchEvent = nativeEvent;
-      const touch = (_c = (_a2 = touchEvent.changedTouches) == null ? void 0 : _a2[0]) != null ? _c : (_b = touchEvent.touches) == null ? void 0 : _b[0];
+      const touch = (_c = (_a = touchEvent.changedTouches) == null ? void 0 : _a[0]) != null ? _c : (_b = touchEvent.touches) == null ? void 0 : _b[0];
       if (!touch) {
         return void 0;
       }
@@ -29799,19 +29833,19 @@ const resolveTextAlign = (align) => {
   }
 };
 const resolveFontStyle = (style) => style === "italic" ? "italic" : DEFAULT_TEXT_GLYPH_FONT_STYLE;
-const resolvePositiveFinite = (value, fallback) => {
+const resolvePositiveFinite = (value, fallback2) => {
   if (typeof value !== "number" || !Number.isFinite(value)) {
-    return fallback;
+    return fallback2;
   }
-  return value > 0 ? value : fallback;
+  return value > 0 ? value : fallback2;
 };
-const resolveNonNegativeFinite = (value, fallback = 0) => {
+const resolveNonNegativeFinite = (value, fallback2 = 0) => {
   if (typeof value !== "number" || !Number.isFinite(value)) {
-    return fallback;
+    return fallback2;
   }
-  return value >= 0 ? value : fallback;
+  return value >= 0 ? value : fallback2;
 };
-const resolveFiniteOrDefault = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? value : fallback;
+const resolveFiniteOrDefault = (value, fallback2) => typeof value === "number" && Number.isFinite(value) ? value : fallback2;
 const resolveRenderPixelRatio = (value) => {
   if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
     return DEFAULT_TEXT_GLYPH_RENDER_PIXEL_RATIO;
@@ -29946,7 +29980,7 @@ const drawTextWithLetterSpacing = (ctx, text, startX, y, letterSpacing) => {
   }
 };
 const resolveTextGlyphOptions = (options, preferredLineHeight) => {
-  var _a2, _b, _c;
+  var _a, _b, _c;
   const fallbackFontSize = typeof preferredLineHeight === "number" && preferredLineHeight > 0 ? (
     // When a preferred line height is provided, use it as the baseline font size.
     preferredLineHeight
@@ -29959,7 +29993,7 @@ const resolveTextGlyphOptions = (options, preferredLineHeight) => {
     fallbackFontSize
   );
   return {
-    fontFamily: (_a2 = options == null ? void 0 : options.fontFamily) != null ? _a2 : DEFAULT_TEXT_GLYPH_FONT_FAMILY,
+    fontFamily: (_a = options == null ? void 0 : options.fontFamily) != null ? _a : DEFAULT_TEXT_GLYPH_FONT_FAMILY,
     fontStyle: resolveFontStyle(options == null ? void 0 : options.fontStyle),
     fontWeight: (_b = options == null ? void 0 : options.fontWeight) != null ? _b : DEFAULT_TEXT_GLYPH_FONT_WEIGHT,
     fontSizePixel: resolvedFontSize,
@@ -30221,6 +30255,7 @@ const renderTextGlyphBitmap = async (text, dimensions, options) => {
   );
   return { bitmap, width: totalWidth, height: totalHeight };
 };
+const OPACITY_VISIBILITY_EPSILON = 1e-4;
 const ATLAS_PAGE_INDEX_NONE = -1;
 const updateImageInterpolationDirtyState = (sprite, image) => {
   const dirty = hasActiveImageInterpolations(image);
@@ -30229,22 +30264,36 @@ const updateImageInterpolationDirtyState = (sprite, image) => {
     sprite.interpolationDirty = true;
   }
 };
-const applyAutoRotation = (sprite, nextLocation) => {
+const reapplySpriteOpacityMultiplier = (sprite) => {
+  const multiplier = sprite.opacityMultiplier || 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;
+      applyOpacityUpdate(image, baseOpacity, interpolationOption, multiplier);
+    });
+  });
+};
+const applyAutoRotation = (sprite, nextLocation, forceAutoRotation) => {
   let hasAutoRotation = false;
   let requiredDistance = 0;
   sprite.images.forEach((orderMap) => {
     orderMap.forEach((image) => {
-      var _a2;
+      var _a;
       if (!image.autoRotation) {
         return;
       }
       hasAutoRotation = true;
-      const minDistance = Math.max(0, (_a2 = image.autoRotationMinDistanceMeters) != null ? _a2 : 0);
+      const minDistance = Math.max(0, (_a = image.autoRotationMinDistanceMeters) != null ? _a : 0);
       if (minDistance > requiredDistance) {
         requiredDistance = minDistance;
       }
     });
   });
+  if (forceAutoRotation) {
+    requiredDistance = 0;
+  }
   if (!hasAutoRotation) {
     return false;
   }
@@ -30309,13 +30358,27 @@ const createInterpolatedOffsetState = (offset, invalidated) => {
       current: base.offsetMeters,
       from: void 0,
       to: void 0,
-      invalidated
+      invalidated,
+      interpolation: {
+        state: null,
+        options: null,
+        lastCommandValue: base.offsetMeters,
+        baseValue: void 0,
+        targetValue: void 0
+      }
     },
     offsetDeg: {
       current: base.offsetDeg,
       from: void 0,
       to: void 0,
-      invalidated
+      invalidated,
+      interpolation: {
+        state: null,
+        options: null,
+        lastCommandValue: base.offsetDeg,
+        baseValue: void 0,
+        targetValue: void 0
+      }
     }
   };
 };
@@ -30354,9 +30417,18 @@ const sanitizeVisibilityDistanceMeters = (value) => {
   }
   return value;
 };
+const sanitizeOpacityMultiplier = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return 1;
+  }
+  if (value <= 0) {
+    return 0;
+  }
+  return value;
+};
 const createImageStateFromInit = (imageInit, subLayer, order, originReference, invalidated) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const mode = (_a2 = imageInit.mode) != null ? _a2 : "surface";
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const mode = (_a = imageInit.mode) != null ? _a : "surface";
   const autoRotationDefault = mode === "surface";
   const initialOffset = cloneOffset(imageInit.offset);
   const initialOpacity = clampOpacity((_b = imageInit.opacity) != null ? _b : 1);
@@ -30373,8 +30445,16 @@ const createImageStateFromInit = (imageInit, subLayer, order, originReference, i
       current: initialOpacity,
       from: void 0,
       to: void 0,
-      invalidated
+      invalidated,
+      interpolation: {
+        state: null,
+        options: null,
+        targetValue: initialOpacity,
+        baseValue: initialOpacity,
+        lastCommandValue: initialOpacity
+      }
     },
+    lodOpacity: 1,
     scale: (_d = imageInit.scale) != null ? _d : 1,
     anchor: cloneAnchor(imageInit.anchor),
     border: resolveSpriteImageLineAttribute(imageInit.border),
@@ -30386,7 +30466,14 @@ const createImageStateFromInit = (imageInit, subLayer, order, originReference, i
       current: initialRotateDeg,
       from: void 0,
       to: void 0,
-      invalidated
+      invalidated,
+      interpolation: {
+        state: null,
+        options: null,
+        lastCommandValue: initialRotateDeg,
+        baseValue: void 0,
+        targetValue: void 0
+      }
     },
     rotationCommandDeg: initialRotateDeg,
     displayedRotateDeg: initialRotateDeg,
@@ -30396,34 +30483,22 @@ const createImageStateFromInit = (imageInit, subLayer, order, originReference, i
     originLocation,
     originReferenceKey,
     originRenderTargetIndex: SPRITE_ORIGIN_REFERENCE_INDEX_NONE,
-    rotationInterpolationState: null,
-    rotationInterpolationOptions: null,
-    offsetDegInterpolationState: null,
-    offsetMetersInterpolationState: null,
-    opacityInterpolationState: null,
-    opacityInterpolationOptions: null,
-    opacityTargetValue: initialOpacity,
-    lodLastCommandOpacity: initialOpacity,
-    lastCommandRotateDeg: initialRotateDeg,
-    lastCommandOffsetDeg: initialOffset.offsetDeg,
-    lastCommandOffsetMeters: initialOffset.offsetMeters,
-    lastCommandOpacity: initialOpacity,
     interpolationDirty: false
   };
   const rotateInitOption = (_h = (_g = imageInit.interpolation) == null ? void 0 : _g.rotateDeg) != null ? _h : null;
   if (rotateInitOption) {
-    state.rotationInterpolationOptions = cloneInterpolationOptions(rotateInitOption);
+    state.rotateDeg.interpolation.options = cloneInterpolationOptions(rotateInitOption);
   }
   const opacityInitOption = (_j = (_i = imageInit.interpolation) == null ? void 0 : _i.opacity) != null ? _j : null;
   if (opacityInitOption) {
-    state.opacityInterpolationOptions = cloneInterpolationOptions(opacityInitOption);
+    state.opacity.interpolation.options = cloneInterpolationOptions(opacityInitOption);
   }
   syncImageRotationChannel(state);
   return state;
 };
 const createSpriteLayer = (options) => {
-  var _a2;
-  const id = (_a2 = options == null ? void 0 : options.id) != null ? _a2 : "sprite-layer";
+  var _a;
+  const id = (_a = options == null ? void 0 : options.id) != null ? _a : "sprite-layer";
   let resolvedScaling = resolveScalingOptions(options == null ? void 0 : options.spriteScaling);
   const resolvedTextureFiltering = resolveTextureFilteringOptions(
     options == null ? void 0 : options.textureFiltering
@@ -30514,13 +30589,13 @@ const createSpriteLayer = (options) => {
     scheduleTextGlyphQueueProcessing();
   };
   const cancelPendingTextGlyphJob = (imageId, reason) => {
-    var _a3;
+    var _a2;
     for (let idx = textGlyphQueue.length - 1; idx >= 0; idx -= 1) {
       const entry = textGlyphQueue[idx];
       if (entry && entry.glyphId === imageId) {
         textGlyphQueue.splice(idx, 1);
         pendingTextGlyphIds.delete(imageId);
-        (_a3 = entry.abortHandle) == null ? void 0 : _a3.release();
+        (_a2 = entry.abortHandle) == null ? void 0 : _a2.release();
         entry.deferred.reject(
           reason != null ? reason : new Error(
             `[SpriteLayer][GlyphQueue] Image "${imageId}" was cancelled before generation.`
@@ -30530,19 +30605,19 @@ const createSpriteLayer = (options) => {
     }
   };
   const rejectAllPendingTextGlyphJobs = (reason) => {
-    var _a3;
+    var _a2;
     while (textGlyphQueue.length > 0) {
       const entry = textGlyphQueue.shift();
       if (entry) {
         pendingTextGlyphIds.delete(entry.glyphId);
-        (_a3 = entry.abortHandle) == null ? void 0 : _a3.release();
+        (_a2 = entry.abortHandle) == null ? void 0 : _a2.release();
         entry.deferred.reject(reason);
       }
     }
   };
   const executeTextGlyphJob = async (entry) => {
-    var _a3, _b, _c, _d, _e, _f, _g;
-    if ((_a3 = entry.signal) == null ? void 0 : _a3.aborted) {
+    var _a2, _b, _c, _d, _e, _f, _g;
+    if ((_a2 = entry.signal) == null ? void 0 : _a2.aborted) {
       (_b = entry.abortHandle) == null ? void 0 : _b.release();
       entry.deferred.reject(entry.signal.reason);
       pendingTextGlyphIds.delete(entry.glyphId);
@@ -30694,51 +30769,51 @@ const createSpriteLayer = (options) => {
   };
   const sprites = /* @__PURE__ */ new Map();
   const invalidateImageInterpolationState = (sprite, image) => {
-    var _a3;
-    const baseRotation = (_a3 = image.resolvedBaseRotateDeg) != null ? _a3 : 0;
-    const displayedRotation = Number.isFinite(image.displayedRotateDeg) ? image.displayedRotateDeg : baseRotation + image.rotationCommandDeg;
-    const manualRotation = normalizeAngleDeg(displayedRotation - baseRotation);
-    image.rotationInterpolationState = null;
-    image.offsetDegInterpolationState = null;
-    image.offsetMetersInterpolationState = null;
-    image.opacityInterpolationState = null;
-    image.rotateDeg.current = manualRotation;
+    image.rotateDeg.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.rotationCommandDeg = manualRotation;
-    image.displayedRotateDeg = displayedRotation;
-    image.lastCommandRotateDeg = normalizeAngleDeg(displayedRotation);
+    image.rotateDeg.interpolation.lastCommandValue = image.rotateDeg.current;
     image.offset.offsetDeg.from = void 0;
     image.offset.offsetDeg.to = void 0;
     image.offset.offsetDeg.invalidated = true;
-    image.lastCommandOffsetDeg = image.offset.offsetDeg.current;
+    image.offset.offsetDeg.interpolation.lastCommandValue = image.offset.offsetDeg.current;
     image.offset.offsetMeters.from = void 0;
     image.offset.offsetMeters.to = void 0;
     image.offset.offsetMeters.invalidated = true;
-    image.lastCommandOffsetMeters = image.offset.offsetMeters.current;
+    image.offset.offsetMeters.interpolation.lastCommandValue = image.offset.offsetMeters.current;
     image.opacity.from = void 0;
     image.opacity.to = void 0;
     image.opacity.invalidated = true;
-    image.opacityTargetValue = image.opacity.current;
-    image.lastCommandOpacity = image.opacity.current;
-    image.lodLastCommandOpacity = image.opacity.current;
+    image.opacity.interpolation.targetValue = image.opacity.current;
+    image.opacity.interpolation.lastCommandValue = image.opacity.current;
+    const spriteOpacityMultiplier = sprite.opacityMultiplier || 1;
+    const lodMultiplier = image.lodOpacity || 1;
+    if (spriteOpacityMultiplier > 0 && lodMultiplier > 0) {
+      image.opacity.interpolation.baseValue = clampOpacity(
+        image.opacity.current / (spriteOpacityMultiplier * lodMultiplier)
+      );
+    }
     updateImageInterpolationDirtyState(sprite, image);
   };
   const invalidateSpriteInterpolationState = (sprite) => {
+    const currentSnapshot = cloneSpriteLocation(sprite.location.current);
     sprite.location.from = void 0;
     sprite.location.to = void 0;
     sprite.location.invalidated = true;
-    sprite.interpolationState = null;
-    sprite.pendingInterpolationOptions = null;
-    sprite.lastCommandLocation = cloneSpriteLocation(sprite.location.current);
-    sprite.lastAutoRotationLocation = cloneSpriteLocation(
-      sprite.location.current
-    );
+    sprite.location.interpolation.state = null;
+    sprite.location.interpolation.options = null;
+    sprite.location.interpolation.lastCommandValue = cloneSpriteLocation(currentSnapshot);
+    sprite.lastAutoRotationLocation = cloneSpriteLocation(currentSnapshot);
+    sprite.autoRotationInvalidated = true;
     sprite.interpolationDirty = false;
     sprite.images.forEach((orderMap) => {
       orderMap.forEach((image) => {
         invalidateImageInterpolationState(sprite, image);
+        image.displayedRotateDeg = image.resolvedBaseRotateDeg + image.rotationCommandDeg;
       });
     });
   };
@@ -30767,10 +30842,10 @@ const createSpriteLayer = (options) => {
     });
   };
   const getImageState = (sprite, subLayer, order) => {
-    var _a3;
+    var _a2;
     return (
       // Use optional chaining to safely traverse the nested map hierarchy.
-      (_a3 = sprite.images.get(subLayer)) == null ? void 0 : _a3.get(order)
+      (_a2 = sprite.images.get(subLayer)) == null ? void 0 : _a2.get(order)
     );
   };
   const setImageState = (sprite, state) => {
@@ -30782,10 +30857,10 @@ const createSpriteLayer = (options) => {
     inner.set(state.order, state);
   };
   const hasImageState = (sprite, subLayer, order) => {
-    var _a3, _b;
+    var _a2, _b;
     return (
       // Return true only when the nested map exists and contains the desired order entry.
-      (_b = (_a3 = sprite.images.get(subLayer)) == null ? void 0 : _a3.has(order)) != null ? _b : false
+      (_b = (_a2 = sprite.images.get(subLayer)) == null ? void 0 : _a2.has(order)) != null ? _b : false
     );
   };
   const deleteImageState = (sprite, subLayer, order) => {
@@ -30837,22 +30912,22 @@ const createSpriteLayer = (options) => {
   const inputListenerDisposers = [];
   let mapVisible = typeof document !== "undefined" ? document.visibilityState !== "hidden" : true;
   const resolveDocumentVisibility = () => {
-    var _a3;
-    const doc = (_a3 = canvasElement == null ? void 0 : canvasElement.ownerDocument) != null ? _a3 : typeof document !== "undefined" ? document : void 0;
+    var _a2;
+    const doc = (_a2 = canvasElement == null ? void 0 : canvasElement.ownerDocument) != null ? _a2 : typeof document !== "undefined" ? document : void 0;
     return doc ? doc.visibilityState !== "hidden" : true;
   };
   const isLayerVisible = () => mapVisible;
   const hasSpriteListeners = (type) => {
-    var _a3, _b;
+    var _a2, _b;
     return (
       // Treat missing listener sets as zero, otherwise check the registered count.
-      ((_b = (_a3 = eventListeners.get(type)) == null ? void 0 : _a3.size) != null ? _b : 0) > 0
+      ((_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 _a3, _b;
+    var _a2, _b;
     if (!hitEntry) {
       return {
         sprite: void 0,
@@ -30860,7 +30935,7 @@ const createSpriteLayer = (options) => {
       };
     }
     const spriteState = getSpriteState(hitEntry.sprite.spriteId);
-    const imageState = (_b = (_a3 = spriteState == null ? void 0 : spriteState.images.get(hitEntry.image.subLayer)) == null ? void 0 : _a3.get(hitEntry.image.order)) != null ? _b : void 0;
+    const imageState = (_b = (_a2 = spriteState == null ? void 0 : spriteState.images.get(hitEntry.image.subLayer)) == null ? void 0 : _a2.get(hitEntry.image.order)) != null ? _b : void 0;
     return {
       sprite: spriteState,
       image: imageState
@@ -30940,7 +31015,7 @@ const createSpriteLayer = (options) => {
     scheduleRender();
   };
   const ensureRenderTargetEntries = () => {
-    var _a3;
+    var _a2;
     renderTargetEntries.length = 0;
     sprites.forEach((sprite) => {
       if (!sprite.isEnabled) {
@@ -30951,7 +31026,9 @@ const createSpriteLayer = (options) => {
       }
       sprite.images.forEach((orderMap) => {
         orderMap.forEach((image) => {
-          const shouldForceVisibilityCheck = sprite.visibilityDistanceMeters !== void 0 && image.lastCommandOpacity > 0;
+          var _a3;
+          const baseOpacity = (_a3 = image.opacity.interpolation.baseValue) != null ? _a3 : image.opacity.interpolation.lastCommandValue;
+          const shouldForceVisibilityCheck = sprite.visibilityDistanceMeters !== void 0 && (baseOpacity != null ? baseOpacity : 0) > OPACITY_VISIBILITY_EPSILON;
           if (image.opacity.current <= 0 && !shouldForceVisibilityCheck) {
             image.originRenderTargetIndex = SPRITE_ORIGIN_REFERENCE_INDEX_NONE;
             image.originReferenceKey = SPRITE_ORIGIN_REFERENCE_KEY_NONE;
@@ -31006,12 +31083,12 @@ const createSpriteLayer = (options) => {
         continue;
       }
       const indexMap = originIndexBySprite.get(sprite.spriteId);
-      const targetIndex = (_a3 = indexMap == null ? void 0 : indexMap.get(image.originReferenceKey)) != null ? _a3 : SPRITE_ORIGIN_REFERENCE_INDEX_NONE;
+      const targetIndex = (_a2 = indexMap == null ? void 0 : indexMap.get(image.originReferenceKey)) != null ? _a2 : SPRITE_ORIGIN_REFERENCE_INDEX_NONE;
       image.originRenderTargetIndex = targetIndex;
     }
   };
   const onAdd = (mapInstance, glContext) => {
-    var _a3;
+    var _a2;
     map = mapInstance;
     gl = glContext;
     anisotropyExtension = resolveAnisotropyExtension(glContext);
@@ -31097,7 +31174,7 @@ const createSpriteLayer = (options) => {
           canvasElement == null ? void 0 : canvasElement.removeEventListener("mousemove", mouseMoveListener);
         });
       }
-      const visibilityTarget = (_a3 = canvasElement.ownerDocument) != null ? _a3 : typeof document !== "undefined" ? document : void 0;
+      const visibilityTarget = (_a2 = canvasElement.ownerDocument) != null ? _a2 : typeof document !== "undefined" ? document : void 0;
       if (visibilityTarget) {
         const visibilityListener = () => updateVisibilityState();
         visibilityTarget.addEventListener(
@@ -31240,12 +31317,12 @@ const createSpriteLayer = (options) => {
       const drawProgram = spriteDrawProgram;
       let drawOrderCounter = 0;
       const drawPreparedSprite = (prepared) => {
-        var _a3;
+        var _a2;
         const didDraw = drawProgram.draw(prepared);
         if (!didDraw) {
           return;
         }
-        prepared.imageEntry.surfaceShaderInputs = (_a3 = prepared.surfaceShaderInputs) != null ? _a3 : void 0;
+        prepared.imageEntry.surfaceShaderInputs = (_a2 = prepared.surfaceShaderInputs) != null ? _a2 : void 0;
         if (prepared.hitTestCorners && prepared.hitTestCorners.length === 4) {
           hitTestController.registerHitTestEntry(
             prepared.spriteEntry,
@@ -31468,7 +31545,7 @@ const createSpriteLayer = (options) => {
     glContext.disable(glContext.BLEND);
   };
   const registerImage = async (imageId, imageSource, options2, signal) => {
-    var _a3;
+    var _a2;
     let bitmap;
     try {
       bitmap = typeof imageSource === "string" ? await loadImageBitmap(imageSource, options2) : imageSource;
@@ -31516,7 +31593,7 @@ const createSpriteLayer = (options) => {
       updateSpriteImageHandles(imageId, 0);
       imageHandleBuffersController.markDirty(images);
       atlasManager.removeImage(imageId);
-      (_a3 = bitmap.close) == null ? void 0 : _a3.call(bitmap);
+      (_a2 = bitmap.close) == null ? void 0 : _a2.call(bitmap);
       throw e;
     } finally {
       abortHandle == null ? void 0 : abortHandle.release();
@@ -31550,7 +31627,7 @@ const createSpriteLayer = (options) => {
     }
   };
   const unregisterImage = (imageId) => {
-    var _a3, _b;
+    var _a2, _b;
     const image = images.get(imageId);
     if (!image) {
       if (pendingTextGlyphIds.has(imageId)) {
@@ -31580,7 +31657,7 @@ const createSpriteLayer = (options) => {
       });
     });
     if (image.bitmap) {
-      (_b = (_a3 = image.bitmap).close) == null ? void 0 : _b.call(_a3);
+      (_b = (_a2 = image.bitmap).close) == null ? void 0 : _b.call(_a2);
     }
     images.delete(imageId);
     imageIdHandler.release(imageId);
@@ -31610,9 +31687,9 @@ const createSpriteLayer = (options) => {
     });
     atlasPageTextures.clear();
     images.forEach((image) => {
-      var _a3, _b;
+      var _a2, _b;
       if (image.bitmap) {
-        (_b = (_a3 = image.bitmap).close) == null ? void 0 : _b.call(_a3);
+        (_b = (_a2 = image.bitmap).close) == null ? void 0 : _b.call(_a2);
       }
     });
     images.clear();
@@ -31633,11 +31710,11 @@ const createSpriteLayer = (options) => {
   };
   const getAllImageIds = () => Array.from(images.keys());
   const addSpriteInternal = (projectionHost, spriteId, init) => {
-    var _a3, _b, _c, _d, _e, _f;
+    var _a2, _b, _c, _d, _e, _f;
     if (sprites.get(spriteId)) {
       return false;
     }
-    const initialInvalidated = ((_a3 = init.invalidate) != null ? _a3 : false) || !isLayerVisible();
+    const initialInvalidated = ((_a2 = init.invalidate) != null ? _a2 : false) || !isLayerVisible();
     const imagesInit = (_b = init.images) != null ? _b : [];
     const images2 = /* @__PURE__ */ new Map();
     for (const imageInit of imagesInit) {
@@ -31661,8 +31738,8 @@ const createSpriteLayer = (options) => {
     }
     const keyToStr = (k) => `${k.subLayer}:${k.order}`;
     const getRef = (k) => {
-      var _a4, _b2;
-      const ref = (_b2 = (_a4 = images2.get(k.subLayer)) == null ? void 0 : _a4.get(k.order)) == null ? void 0 : _b2.originLocation;
+      var _a3, _b2;
+      const ref = (_b2 = (_a3 = images2.get(k.subLayer)) == null ? void 0 : _a3.get(k.order)) == null ? void 0 : _b2.originLocation;
       if (!ref) return void 0;
       return { subLayer: ref.subLayer, order: ref.order };
     };
@@ -31711,20 +31788,26 @@ const createSpriteLayer = (options) => {
       // Sprites default to enabled unless explicitly disabled in the init payload.
       isEnabled: (_e = init.isEnabled) != null ? _e : true,
       visibilityDistanceMeters: spriteVisibilityDistanceMeters != null ? spriteVisibilityDistanceMeters : void 0,
+      opacityMultiplier: sanitizeOpacityMultiplier(init.opacityMultiplier),
       location: {
         current: currentLocation,
         from: void 0,
         to: void 0,
-        invalidated: initialInvalidated
+        invalidated: initialInvalidated,
+        interpolation: {
+          state: null,
+          options: initialInterpolationOptions,
+          lastCommandValue: cloneSpriteLocation(currentLocation),
+          baseValue: void 0,
+          targetValue: void 0
+        }
       },
       images: images2,
       // Tags default to null to simplify downstream comparisons.
       tag: (_f = init.tag) != null ? _f : null,
-      interpolationState: null,
-      pendingInterpolationOptions: initialInterpolationOptions,
-      lastCommandLocation: cloneSpriteLocation(currentLocation),
       lastAutoRotationLocation: cloneSpriteLocation(currentLocation),
       lastAutoRotationAngleDeg: 0,
+      autoRotationInvalidated: false,
       interpolationDirty: false,
       cachedMercator: initialMercator,
       cachedMercatorLng: currentLocation.lng,
@@ -31876,8 +31959,8 @@ const createSpriteLayer = (options) => {
       }
       const keyToStr = (k) => `${k.subLayer}:${k.order}`;
       const getRef = (k) => {
-        var _a3;
-        return (_a3 = getImageState(sprite, k.subLayer, k.order)) == null ? void 0 : _a3.originLocation;
+        var _a2;
+        return (_a2 = getImageState(sprite, k.subLayer, k.order)) == null ? void 0 : _a2.originLocation;
       };
       const visited = /* @__PURE__ */ new Set();
       let curMaybe = state.originLocation;
@@ -31938,7 +32021,7 @@ const createSpriteLayer = (options) => {
     }
   };
   const updateSpriteImageInternal = (projectionHost, sprite, subLayer, order, imageUpdate, resultOut) => {
-    var _a3;
+    var _a2;
     const state = getImageState(sprite, subLayer, order);
     if (!state) return false;
     const mapCurrentlyVisible = isLayerVisible();
@@ -31953,18 +32036,17 @@ const createSpriteLayer = (options) => {
     const interpolationOptions = imageUpdate.interpolation;
     const opacityInterpolationOption = interpolationOptions == null ? void 0 : interpolationOptions.opacity;
     if (opacityInterpolationOption !== void 0) {
-      state.opacityInterpolationOptions = opacityInterpolationOption === null ? null : cloneInterpolationOptions(opacityInterpolationOption);
+      state.opacity.interpolation.options = opacityInterpolationOption === null ? null : cloneInterpolationOptions(opacityInterpolationOption);
     }
     const allowOpacityInterpolation = interpolationAllowed && !state.opacity.invalidated;
-    const resolvedOpacityInterpolationOption = allowOpacityInterpolation ? opacityInterpolationOption === void 0 ? (_a3 = state.opacityInterpolationOptions) != null ? _a3 : null : opacityInterpolationOption : null;
+    const resolvedOpacityInterpolationOption = allowOpacityInterpolation ? opacityInterpolationOption === void 0 ? (_a2 = state.opacity.interpolation.options) != null ? _a2 : null : opacityInterpolationOption : null;
     if (imageUpdate.opacity !== void 0) {
       applyOpacityUpdate(
         state,
         imageUpdate.opacity,
-        resolvedOpacityInterpolationOption
+        resolvedOpacityInterpolationOption,
+        sprite.opacityMultiplier
       );
-      state.opacityTargetValue = state.lastCommandOpacity;
-      state.lodLastCommandOpacity = state.lastCommandOpacity;
       if (mapCurrentlyVisible && state.opacity.invalidated) {
         state.opacity.invalidated = false;
       }
@@ -32023,11 +32105,11 @@ const createSpriteLayer = (options) => {
     }
     if (rotateInterpolationOption !== void 0) {
       if (rotateInterpolationOption === null) {
-        state.rotationInterpolationOptions = null;
+        state.rotateDeg.interpolation.options = null;
         rotationOverride = null;
       } else {
         const cloned = cloneInterpolationOptions(rotateInterpolationOption);
-        state.rotationInterpolationOptions = cloned;
+        state.rotateDeg.interpolation.options = cloned;
         rotationOverride = cloned;
       }
       hasRotationOverride = true;
@@ -32064,7 +32146,7 @@ const createSpriteLayer = (options) => {
       requireRotationSync = true;
     }
     if (shouldReapplyAutoRotation) {
-      const applied = applyAutoRotation(sprite, sprite.location.current);
+      const applied = applyAutoRotation(sprite, sprite.location.current, true);
       if (!applied && state.autoRotation) {
         state.resolvedBaseRotateDeg = sprite.lastAutoRotationAngleDeg;
         requireRotationSync = true;
@@ -32141,7 +32223,7 @@ const createSpriteLayer = (options) => {
     return true;
   };
   const updateSpriteInternal = (projectionHost, spriteId, update) => {
-    var _a3;
+    var _a2;
     const sprite = sprites.get(spriteId);
     if (!sprite) {
       return "notfound";
@@ -32169,33 +32251,49 @@ const createSpriteLayer = (options) => {
         if (previousVisibilityDistance !== void 0 && (resolved === void 0 || resolved === null)) {
           sprite.images.forEach((orderMap) => {
             orderMap.forEach((image) => {
-              if (!(Number.isFinite(image.lastCommandOpacity) && image.lastCommandOpacity > 0)) {
+              var _a3;
+              const baseOpacity = (_a3 = image.opacity.interpolation.baseValue) != null ? _a3 : image.opacity.current;
+              if (!(Number.isFinite(baseOpacity) && baseOpacity > 0)) {
                 return;
               }
               if (image.opacity.current > 0) {
                 return;
               }
+              image.lodOpacity = 1;
               applyOpacityUpdate(
                 image,
-                image.lastCommandOpacity,
-                image.opacityInterpolationOptions
+                baseOpacity,
+                image.opacity.interpolation.options,
+                sprite.opacityMultiplier
               );
             });
           });
         }
       }
     }
+    if (update.opacityMultiplier !== void 0) {
+      const nextMultiplier = sanitizeOpacityMultiplier(
+        update.opacityMultiplier
+      );
+      if (nextMultiplier !== sprite.opacityMultiplier) {
+        sprite.opacityMultiplier = nextMultiplier;
+        reapplySpriteOpacityMultiplier(sprite);
+        updated = true;
+        isRequiredRender = true;
+      }
+    }
+    const locationState = sprite.location;
+    const locationInterpolation = locationState.interpolation;
     let interpolationOptionsForLocation = void 0;
     let interpolationExplicitlySpecified = false;
     const mapCurrentlyVisible = isLayerVisible();
-    const interpolationAllowed = interpolationCalculationEnabled && mapCurrentlyVisible && !sprite.location.invalidated;
+    const interpolationAllowed = interpolationCalculationEnabled && mapCurrentlyVisible && !locationState.invalidated;
     if (update.interpolation !== void 0) {
       interpolationExplicitlySpecified = true;
       if (update.interpolation === null) {
-        const locationState = sprite.location;
-        if (sprite.pendingInterpolationOptions !== null || sprite.interpolationState !== null || locationState.from !== void 0 || locationState.to !== void 0) {
-          sprite.pendingInterpolationOptions = null;
-          sprite.interpolationState = null;
+        if (locationInterpolation.state !== null || locationState.from !== void 0 || locationState.to !== void 0) {
+          locationInterpolation.state = null;
+          locationInterpolation.options = null;
           locationState.from = void 0;
           locationState.to = void 0;
           updated = true;
@@ -32203,8 +32301,8 @@ const createSpriteLayer = (options) => {
         interpolationOptionsForLocation = null;
       } else {
         const nextOptions = cloneInterpolationOptions(update.interpolation);
-        if (!sprite.pendingInterpolationOptions || sprite.pendingInterpolationOptions.durationMs !== nextOptions.durationMs || sprite.pendingInterpolationOptions.mode !== nextOptions.mode || sprite.pendingInterpolationOptions.easing !== nextOptions.easing) {
-          sprite.pendingInterpolationOptions = nextOptions;
+        if (!locationInterpolation.options || locationInterpolation.options.durationMs !== nextOptions.durationMs || locationInterpolation.options.mode !== nextOptions.mode || locationInterpolation.options.easing !== nextOptions.easing) {
+          locationInterpolation.options = nextOptions;
           updated = true;
         }
         interpolationOptionsForLocation = nextOptions;
@@ -32213,15 +32311,15 @@ const createSpriteLayer = (options) => {
     if (update.location !== void 0) {
       const newCommandLocation = cloneSpriteLocation(update.location);
       const locationChanged = !spriteLocationsEqual(
-        sprite.lastCommandLocation,
+        locationInterpolation.lastCommandValue,
         newCommandLocation
       );
       const optionsForLocation = interpolationExplicitlySpecified ? (
         // When new interpolation parameters accompanied the update, prefer them (or null to disable).
         interpolationOptionsForLocation != null ? interpolationOptionsForLocation : null
       ) : (
-        // Otherwise reuse any previously cached interpolation request.
-        sprite.pendingInterpolationOptions
+        // Otherwise reuse any previously interpolation request.
+        locationInterpolation.options
       );
       const effectiveOptions = (
         // Treat `undefined` as "no interpolation change" whereas explicit `null` disables interpolation.
@@ -32230,45 +32328,52 @@ const createSpriteLayer = (options) => {
       let handledByInterpolation = false;
       if (effectiveOptions && effectiveOptions.durationMs > 0) {
         const { state, requiresInterpolation } = createInterpolationState({
-          currentLocation: sprite.location.current,
-          lastCommandLocation: sprite.lastCommandLocation,
+          currentLocation: locationState.current,
+          lastCommandLocation: locationInterpolation.lastCommandValue,
           nextCommandLocation: newCommandLocation,
           options: effectiveOptions
         });
-        sprite.interpolationState = null;
+        locationInterpolation.state = null;
         if (requiresInterpolation) {
-          sprite.interpolationState = state;
-          sprite.location.from = cloneSpriteLocation(state.from);
-          sprite.location.to = cloneSpriteLocation(state.to);
-          sprite.location.current = cloneSpriteLocation(state.from);
+          locationInterpolation.state = state;
+          locationInterpolation.options = effectiveOptions;
+          locationState.from = cloneSpriteLocation(state.from);
+          locationState.to = cloneSpriteLocation(state.to);
+          locationState.current = cloneSpriteLocation(state.from);
           handledByInterpolation = true;
           updated = true;
           isRequiredRender = true;
         }
       }
-      sprite.lastCommandLocation = cloneSpriteLocation(newCommandLocation);
+      locationInterpolation.lastCommandValue = cloneSpriteLocation(newCommandLocation);
       if (handledByInterpolation) ;
       else if (locationChanged) {
-        sprite.location.current = cloneSpriteLocation(newCommandLocation);
-        sprite.location.from = void 0;
-        sprite.location.to = void 0;
-        sprite.interpolationState = null;
+        locationState.current = cloneSpriteLocation(newCommandLocation);
+        locationState.from = void 0;
+        locationState.to = void 0;
+        locationInterpolation.state = null;
         updated = true;
         isRequiredRender = true;
       } else {
-        sprite.interpolationState = null;
-        sprite.location.from = void 0;
-        sprite.location.to = void 0;
+        locationInterpolation.state = null;
+        locationState.from = void 0;
+        locationState.to = void 0;
+      }
+      if (mapCurrentlyVisible && locationState.invalidated) {
+        locationState.invalidated = false;
       }
-      if (mapCurrentlyVisible && sprite.location.invalidated) {
-        sprite.location.invalidated = false;
+      if (!mapCurrentlyVisible) {
+        sprite.autoRotationInvalidated = true;
+        sprite.lastAutoRotationLocation = cloneSpriteLocation(newCommandLocation);
+      } else {
+        const forceAutoRotation = sprite.autoRotationInvalidated;
+        sprite.autoRotationInvalidated = false;
+        applyAutoRotation(sprite, newCommandLocation, forceAutoRotation);
       }
-      sprite.pendingInterpolationOptions = null;
-      applyAutoRotation(sprite, newCommandLocation);
       needsHitTestRefresh = true;
     }
     if (update.tag !== void 0) {
-      const nextTag = (_a3 = update.tag) != null ? _a3 : null;
+      const nextTag = (_a2 = update.tag) != null ? _a2 : null;
       if (sprite.tag !== nextTag) {
         sprite.tag = nextTag;
         updated = true;