@spatialwalk/avatarkit 1.0.0-beta.85 → 1.0.0-beta.86

package/CHANGELOG.md

@@ -5,31 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.0-beta.85] - 2026-03-03
+## [1.0.0-beta.86] - 2026-03-03
 
 ### 🐛 Bugfixes
-- **Startup Transition Continuity** - Fixed first-round playback jump by generating start transition from the currently displayed idle frame instead of fixed idle frame 0
-- **Startup Rendering Order** - Emit `startRendering` only after startup transition frames are injected to avoid first-frame state mismatch
+- **Transition Continuity** - Fixed start transition source frame selection to use the currently displayed idle frame, reducing first-frame jump.
+- **Transition Robustness** - Added frame index clamping for realtime callback and speaking->idle transition source lookup, preventing end-transition fallback jumps caused by out-of-range indices.
 
 ### ✅ Tests
-- Added regression tests for startup transition continuity and startup ordering to prevent reintroduction
-
-## [1.0.0-beta.84] - 2026-03-03
-
-### 🐛 Bugfixes
-- **End-Transition Continuity** - Fixed the visual jump after conversation end transition by resetting idle frame cursor when returning to `Idle` state
-
-## [1.0.0-beta.83] - 2026-03-03
-
-### 🐛 Bugfixes
-- **Playback Startup Sync** - Improved startup sequencing for SDK mode playback to reduce transition/audio desync at conversation start
-- **Initialization Guard** - Added explicit `appId` validation in `AvatarSDK.initialize()` to fail fast when `appId` is empty
-
-### 🔧 Improvements
-- **Server Error Propagation** - `onError` now consistently receives `AvatarError` with server message and mapped error code for `MESSAGE_SERVER_ERROR` in SDK mode
-
-### 📚 Documentation
-- **README Error Callback** - Added detailed `onError` callback behavior and server error code mapping documentation
+- **State Machine Coverage** - Updated `AvatarView` rendering state tests to align with current dual-transition flow, and added boundary tests for start/end transition frame selection.
 
 ## [1.0.0-beta.82] - 2026-02-12
 

package/dist/{StreamingAudioPlayer-By5EueKJ.js → StreamingAudioPlayer-pfCQ3Bn7.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { A as APP_CONFIG, l as logger, e as errorToMessage, a as logEvent } from "./index-vzFN-bug.js";
+import { A as APP_CONFIG, l as logger, e as errorToMessage, a as logEvent } from "./index-Z9AXSJw3.js";
 class StreamingAudioPlayer {
   // Mark if AudioContext is being resumed, avoid concurrent resume requests
   constructor(options) {

package/dist/core/AvatarController.d.ts

@@ -11,7 +11,6 @@ export declare class AvatarController {
     onError: ((error: Error) => void) | null;
     private eventListeners;
     private renderCallback?;
-    private getCurrentIdleFrameCallback?;
     private characterHandle;
     private characterId;
     private postProcessingConfig;

package/dist/core/AvatarView.d.ts

@@ -13,14 +13,16 @@ export declare class AvatarView {
     private currentKeyframes;
     private lastRenderedFrameIndex;
     private lastRealtimeProtoFrame;
-    private renderLoopId;
-    private endTransitionFrames;
-    private isConversationActive;
+    private idleAnimationLoopId;
+    private realtimeAnimationLoopId;
     private resizeObserver;
     private onWindowResize;
     private frameCount;
     private lastFpsUpdate;
     private currentFPS;
+    private transitionKeyframes;
+    private transitionStartTime;
+    private readonly startTransitionDurationMs;
     private readonly endTransitionDurationMs;
     private cachedIdleFirstFrame;
     private idleCurrentFrameIndex;

package/dist/{index-vzFN-bug.js → index-Z9AXSJw3.js}

@@ -2648,6 +2648,32 @@ function isObject(value) {
 function isSet(value) {
   return value !== null && value !== void 0;
 }
+function convertProtoFlameToWasmParams(protoFlame) {
+  var _a;
+  return {
+    translation: protoFlame.translation || [0, 0, 0],
+    rotation: protoFlame.rotation || [0, 0, 0],
+    neck_pose: protoFlame.neckPose || [0, 0, 0],
+    jaw_pose: protoFlame.jawPose || [0, 0, 0],
+    eyes_pose: protoFlame.eyePose || [0, 0, 0, 0, 0, 0],
+    eyelid: protoFlame.eyeLid || [0, 0],
+    expr_params: protoFlame.expression || [],
+    shape_params: [],
+    // Realtime doesn't provide shape params, use default
+    has_eyelid: (((_a = protoFlame.eyeLid) == null ? void 0 : _a.length) || 0) > 0
+  };
+}
+function convertWasmParamsToProtoFlame(wasmParams) {
+  return {
+    translation: wasmParams.translation || [0, 0, 0],
+    rotation: wasmParams.rotation || [0, 0, 0],
+    neckPose: wasmParams.neck_pose || [0, 0, 0],
+    jawPose: wasmParams.jaw_pose || [0, 0, 0],
+    eyePose: wasmParams.eyes_pose || [0, 0, 0, 0, 0, 0],
+    eyeLid: wasmParams.eyelid || [0, 0],
+    expression: wasmParams.expr_params || []
+  };
+}
 const POSTHOG_HOST_INTL = "https://i.spatialwalk.ai";
 const POSTHOG_API_KEY_INTL = "phc_IFTLa6Z6VhTaNvsxB7klvG2JeNwcSpnnwz8YvZRC96Q";
 function getPostHogConfig(_environment) {
@@ -2700,32 +2726,6 @@ const APP_CONFIG = {
     }
   }
 };
-function convertProtoFlameToWasmParams(protoFlame) {
-  var _a;
-  return {
-    translation: protoFlame.translation || [0, 0, 0],
-    rotation: protoFlame.rotation || [0, 0, 0],
-    neck_pose: protoFlame.neckPose || [0, 0, 0],
-    jaw_pose: protoFlame.jawPose || [0, 0, 0],
-    eyes_pose: protoFlame.eyePose || [0, 0, 0, 0, 0, 0],
-    eyelid: protoFlame.eyeLid || [0, 0],
-    expr_params: protoFlame.expression || [],
-    shape_params: [],
-    // Realtime doesn't provide shape params, use default
-    has_eyelid: (((_a = protoFlame.eyeLid) == null ? void 0 : _a.length) || 0) > 0
-  };
-}
-function convertWasmParamsToProtoFlame(wasmParams) {
-  return {
-    translation: wasmParams.translation || [0, 0, 0],
-    rotation: wasmParams.rotation || [0, 0, 0],
-    neckPose: wasmParams.neck_pose || [0, 0, 0],
-    jawPose: wasmParams.jaw_pose || [0, 0, 0],
-    eyePose: wasmParams.eyes_pose || [0, 0, 0, 0, 0, 0],
-    eyeLid: wasmParams.eyelid || [0, 0],
-    expression: wasmParams.expr_params || []
-  };
-}
 var t = "undefined" != typeof window ? window : void 0, i = "undefined" != typeof globalThis ? globalThis : t;
 "undefined" == typeof self && (i.self = i), "undefined" == typeof File && (i.File = function() {
 });
@@ -9491,7 +9491,7 @@ const _AnimationPlayer = class _AnimationPlayer {
     if (this.streamingPlayer) {
       return;
     }
-    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-By5EueKJ.js");
+    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-pfCQ3Bn7.js");
     const { AvatarSDK: AvatarSDK2 } = await Promise.resolve().then(() => AvatarSDK$1);
     const audioFormat = AvatarSDK2.getAudioFormat();
     this.streamingPlayer = new StreamingAudioPlayer({
@@ -11220,7 +11220,7 @@ class AvatarSDK {
 }
 __publicField(AvatarSDK, "_isInitialized", false);
 __publicField(AvatarSDK, "_configuration", null);
-__publicField(AvatarSDK, "_version", "1.0.0-beta.85");
+__publicField(AvatarSDK, "_version", "1.0.0-beta.86");
 __publicField(AvatarSDK, "_avatarCore", null);
 __publicField(AvatarSDK, "_dynamicSdkConfig", null);
 const AvatarSDK$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -12072,117 +12072,6 @@ class NetworkLayer {
     this.visibilityChangeHandler = null;
   }
 }
-function lerpArrays(from, to2, progress) {
-  const length = Math.min(from.length, to2.length);
-  const result2 = Array.from({ length });
-  for (let i2 = 0; i2 < length; i2++) {
-    result2[i2] = from[i2] + (to2[i2] - from[i2]) * progress;
-  }
-  return result2;
-}
-const clamp01 = (x2) => Math.max(0, Math.min(1, x2));
-function linearLerp(from, to2, progress) {
-  return {
-    translation: lerpArrays(from.translation || [0, 0, 0], to2.translation || [0, 0, 0], progress),
-    rotation: lerpArrays(from.rotation || [0, 0, 0], to2.rotation || [0, 0, 0], progress),
-    neckPose: lerpArrays(from.neckPose || [0, 0, 0], to2.neckPose || [0, 0, 0], progress),
-    jawPose: lerpArrays(from.jawPose || [0, 0, 0], to2.jawPose || [0, 0, 0], progress),
-    eyePose: lerpArrays(from.eyePose || [0, 0, 0, 0, 0, 0], to2.eyePose || [0, 0, 0, 0, 0, 0], progress),
-    eyeLid: (() => {
-      const fromEyelid = from.eyeLid;
-      const toEyelid = to2.eyeLid;
-      if ((fromEyelid == null ? void 0 : fromEyelid.length) && (toEyelid == null ? void 0 : toEyelid.length))
-        return lerpArrays(fromEyelid, toEyelid, progress);
-      return fromEyelid || toEyelid || [];
-    })(),
-    expression: lerpArrays(from.expression || [], to2.expression || [], progress)
-  };
-}
-function generateTransitionFramesLinear(from, to2, durationMs, fps = FLAME_FRAME_RATE) {
-  const steps = Math.max(1, Math.floor(durationMs / 1e3 * fps));
-  const frames = Array.from({ length: steps });
-  if (steps === 1) {
-    frames[0] = to2;
-    return frames;
-  }
-  for (let i2 = 0; i2 < steps; i2++) {
-    const progress = i2 / (steps - 1);
-    frames[i2] = linearLerp(from, to2, progress);
-  }
-  frames[0] = from;
-  frames[frames.length - 1] = to2;
-  return frames;
-}
-function createBezierEasing(x1, y1, x2, y2) {
-  const cx = 3 * x1;
-  const bx = 3 * (x2 - x1) - cx;
-  const ax = 1 - cx - bx;
-  const cy = 3 * y1;
-  const by = 3 * (y2 - y1) - cy;
-  const ay = 1 - cy - by;
-  const sampleCurveX = (t2) => ((ax * t2 + bx) * t2 + cx) * t2;
-  const sampleCurveY = (t2) => ((ay * t2 + by) * t2 + cy) * t2;
-  const sampleCurveDerivativeX = (t2) => (3 * ax * t2 + 2 * bx) * t2 + cx;
-  const solveCurveX = (x3) => {
-    let t2 = x3;
-    for (let i2 = 0; i2 < 8; i2++) {
-      const error = sampleCurveX(t2) - x3;
-      if (Math.abs(error) < 1e-6) break;
-      const d2 = sampleCurveDerivativeX(t2);
-      if (Math.abs(d2) < 1e-6) break;
-      t2 -= error / d2;
-    }
-    return t2;
-  };
-  return (x3) => {
-    if (x3 <= 0) return 0;
-    if (x3 >= 1) return 1;
-    return sampleCurveY(solveCurveX(x3));
-  };
-}
-const BEZIER_CURVES = {
-  jaw: createBezierEasing(...BEZIER_CURVES$1.jaw),
-  expression: createBezierEasing(...BEZIER_CURVES$1.expression),
-  eye: createBezierEasing(...BEZIER_CURVES$1.eye),
-  neck: createBezierEasing(...BEZIER_CURVES$1.neck),
-  global: createBezierEasing(...BEZIER_CURVES$1.global)
-};
-function bezierLerp(from, to2, progress) {
-  const getT = (key) => {
-    const scaledProgress = clamp01(progress * TIME_SCALE[key]);
-    return BEZIER_CURVES[key](scaledProgress);
-  };
-  return {
-    translation: lerpArrays(from.translation || [0, 0, 0], to2.translation || [0, 0, 0], getT("global")),
-    rotation: lerpArrays(from.rotation || [0, 0, 0], to2.rotation || [0, 0, 0], getT("global")),
-    neckPose: lerpArrays(from.neckPose || [0, 0, 0], to2.neckPose || [0, 0, 0], getT("neck")),
-    jawPose: lerpArrays(from.jawPose || [0, 0, 0], to2.jawPose || [0, 0, 0], getT("jaw")),
-    eyePose: lerpArrays(from.eyePose || [0, 0, 0, 0, 0, 0], to2.eyePose || [0, 0, 0, 0, 0, 0], getT("eye")),
-    eyeLid: (() => {
-      const fromEyelid = from.eyeLid;
-      const toEyelid = to2.eyeLid;
-      if ((fromEyelid == null ? void 0 : fromEyelid.length) && (toEyelid == null ? void 0 : toEyelid.length))
-        return lerpArrays(fromEyelid, toEyelid, getT("eye"));
-      return fromEyelid || toEyelid || [];
-    })(),
-    expression: lerpArrays(from.expression || [], to2.expression || [], getT("expression"))
-  };
-}
-function generateTransitionFrames(from, to2, durationMs, fps = FLAME_FRAME_RATE) {
-  const steps = Math.max(1, Math.floor(durationMs / 1e3 * fps));
-  const frames = Array.from({ length: steps });
-  if (steps === 1) {
-    frames[0] = to2;
-    return frames;
-  }
-  for (let i2 = 0; i2 < steps; i2++) {
-    const progress = i2 / (steps - 1);
-    frames[i2] = bezierLerp(from, to2, progress);
-  }
-  frames[0] = from;
-  frames[frames.length - 1] = to2;
-  return frames;
-}
 class AvatarController {
   // 16kHz * 2 bytes per sample
   constructor(avatar, options) {
@@ -12217,7 +12106,6 @@ class AvatarController {
     __publicField(this, "eventListeners", /* @__PURE__ */ new Map());
     // ========== Callbacks ==========
     __publicField(this, "renderCallback");
-    __publicField(this, "getCurrentIdleFrameCallback");
     __publicField(this, "characterHandle", null);
     // Character handle for multi-character support
     __publicField(this, "characterId", null);
@@ -13004,7 +12892,6 @@ class AvatarController {
    * @internal
    */
   setupInternalEventListeners(callbacks) {
-    this.getCurrentIdleFrameCallback = callbacks.getCurrentIdleFrame;
     if (callbacks.onKeyframesUpdate) {
       this.registerEventListener("keyframesUpdate", callbacks.onKeyframesUpdate);
     }
@@ -13024,7 +12911,7 @@ class AvatarController {
    * @internal
    */
   async startStreamingPlaybackInternal() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     this.checkAudioContextInitialized();
     if (this.isPlaying) {
       this.isStartingPlayback = false;
@@ -13063,30 +12950,19 @@ class AvatarController {
           conversationId: ((_b2 = this.networkLayer) == null ? void 0 : _b2.getCurrentConversationId()) || void 0
         });
       });
-      const transitionFrames = await this.generateStartTransitionFrames();
-      if (transitionFrames.length > 0) {
-        this.currentKeyframes.unshift(...transitionFrames);
-      }
       this.emit("startRendering");
-      const silenceDurationS = START_TRANSITION_DURATION_MS / 1e3;
-      const silenceChunk = this.createSilencePCMChunk(silenceDurationS);
-      const audioChunksWithSilence = [
-        { data: silenceChunk, isLast: false },
-        ...this.pendingAudioChunks
-      ];
       const streamingPlayer = this.animationPlayer.getStreamingPlayer();
       if (streamingPlayer) {
         streamingPlayer.setAutoStart(false);
-        await streamingPlayer.startNewSession(audioChunksWithSilence);
+      }
+      if (streamingPlayer) {
+        await streamingPlayer.startNewSession(this.pendingAudioChunks);
       }
       this.pendingAudioChunks = [];
       this.isPlaying = true;
       this.currentState = AvatarState.playing;
       (_a = this.onConversationState) == null ? void 0 : _a.call(this, this.mapToConversationState(AvatarState.playing));
       this.startPlaybackLoop();
-      if (streamingPlayer) {
-        streamingPlayer.play();
-      }
       this.isStartingPlayback = false;
       logEvent("character_player", "info", {
         avatar_id: this.avatar.id,
@@ -13096,52 +12972,11 @@ class AvatarController {
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       logger.error("[AvatarController] Failed to start streaming playback:", message);
-      this.stopPlaybackLoop();
       (_c = this.onError) == null ? void 0 : _c.call(this, new AvatarError("Failed to start streaming playback", "INIT_FAILED"));
-      this.emit("stopRendering");
       this.isPlaying = false;
-      this.currentState = AvatarState.idle;
-      (_d = this.onConversationState) == null ? void 0 : _d.call(this, this.mapToConversationState(AvatarState.idle));
       this.isStartingPlayback = false;
     }
   }
-  /**
-   * Generate start-transition frames (idle → first conversation keyframe)
-   * @returns transition frames array, or empty if generation fails
-   * @internal
-   */
-  async generateStartTransitionFrames() {
-    try {
-      const toFrame = this.currentKeyframes[0];
-      if (!toFrame) return [];
-      const toFrameWithPP = this.applyPostProcessingToFlame(toFrame);
-      let fromFrame = null;
-      if (this.getCurrentIdleFrameCallback) {
-        fromFrame = await this.getCurrentIdleFrameCallback();
-      }
-      const avatarCore = AvatarSDK.getAvatarCore();
-      if (!fromFrame && avatarCore && this.characterId) {
-        const idleParams = await avatarCore.getCurrentFrameParams(0, this.characterId);
-        fromFrame = convertWasmParamsToProtoFlame(idleParams);
-      }
-      if (!fromFrame) return [];
-      return generateTransitionFramesLinear(fromFrame, toFrameWithPP, START_TRANSITION_DURATION_MS);
-    } catch (e2) {
-      logger.warn("[AvatarController] Failed to generate start transition:", e2 instanceof Error ? e2.message : String(e2));
-      return [];
-    }
-  }
-  /**
-   * Create a silence PCM chunk (16-bit mono, 16kHz)
-   * @internal
-   */
-  createSilencePCMChunk(durationS) {
-    const sampleRate = APP_CONFIG.audio.sampleRate;
-    const channelCount = 1;
-    const bytesPerSample = 2;
-    const totalBytes = Math.round(sampleRate * channelCount * bytesPerSample * durationS);
-    return new Uint8Array(totalBytes);
-  }
   /**
    * Playback loop: Calculate animation frame based on audio time, notify render layer to render
    */
@@ -16248,6 +16083,117 @@ class RenderSystem {
     m2[15] = 1;
   }
 }
+function lerpArrays(from, to2, progress) {
+  const length = Math.min(from.length, to2.length);
+  const result2 = Array.from({ length });
+  for (let i2 = 0; i2 < length; i2++) {
+    result2[i2] = from[i2] + (to2[i2] - from[i2]) * progress;
+  }
+  return result2;
+}
+const clamp01 = (x2) => Math.max(0, Math.min(1, x2));
+function linearLerp(from, to2, progress) {
+  return {
+    translation: lerpArrays(from.translation || [0, 0, 0], to2.translation || [0, 0, 0], progress),
+    rotation: lerpArrays(from.rotation || [0, 0, 0], to2.rotation || [0, 0, 0], progress),
+    neckPose: lerpArrays(from.neckPose || [0, 0, 0], to2.neckPose || [0, 0, 0], progress),
+    jawPose: lerpArrays(from.jawPose || [0, 0, 0], to2.jawPose || [0, 0, 0], progress),
+    eyePose: lerpArrays(from.eyePose || [0, 0, 0, 0, 0, 0], to2.eyePose || [0, 0, 0, 0, 0, 0], progress),
+    eyeLid: (() => {
+      const fromEyelid = from.eyeLid;
+      const toEyelid = to2.eyeLid;
+      if ((fromEyelid == null ? void 0 : fromEyelid.length) && (toEyelid == null ? void 0 : toEyelid.length))
+        return lerpArrays(fromEyelid, toEyelid, progress);
+      return fromEyelid || toEyelid || [];
+    })(),
+    expression: lerpArrays(from.expression || [], to2.expression || [], progress)
+  };
+}
+function generateTransitionFramesLinear(from, to2, durationMs, fps = FLAME_FRAME_RATE) {
+  const steps = Math.max(1, Math.floor(durationMs / 1e3 * fps));
+  const frames = Array.from({ length: steps });
+  if (steps === 1) {
+    frames[0] = to2;
+    return frames;
+  }
+  for (let i2 = 0; i2 < steps; i2++) {
+    const progress = i2 / (steps - 1);
+    frames[i2] = linearLerp(from, to2, progress);
+  }
+  frames[0] = from;
+  frames[frames.length - 1] = to2;
+  return frames;
+}
+function createBezierEasing(x1, y1, x2, y2) {
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const sampleCurveX = (t2) => ((ax * t2 + bx) * t2 + cx) * t2;
+  const sampleCurveY = (t2) => ((ay * t2 + by) * t2 + cy) * t2;
+  const sampleCurveDerivativeX = (t2) => (3 * ax * t2 + 2 * bx) * t2 + cx;
+  const solveCurveX = (x3) => {
+    let t2 = x3;
+    for (let i2 = 0; i2 < 8; i2++) {
+      const error = sampleCurveX(t2) - x3;
+      if (Math.abs(error) < 1e-6) break;
+      const d2 = sampleCurveDerivativeX(t2);
+      if (Math.abs(d2) < 1e-6) break;
+      t2 -= error / d2;
+    }
+    return t2;
+  };
+  return (x3) => {
+    if (x3 <= 0) return 0;
+    if (x3 >= 1) return 1;
+    return sampleCurveY(solveCurveX(x3));
+  };
+}
+const BEZIER_CURVES = {
+  jaw: createBezierEasing(...BEZIER_CURVES$1.jaw),
+  expression: createBezierEasing(...BEZIER_CURVES$1.expression),
+  eye: createBezierEasing(...BEZIER_CURVES$1.eye),
+  neck: createBezierEasing(...BEZIER_CURVES$1.neck),
+  global: createBezierEasing(...BEZIER_CURVES$1.global)
+};
+function bezierLerp(from, to2, progress) {
+  const getT = (key) => {
+    const scaledProgress = clamp01(progress * TIME_SCALE[key]);
+    return BEZIER_CURVES[key](scaledProgress);
+  };
+  return {
+    translation: lerpArrays(from.translation || [0, 0, 0], to2.translation || [0, 0, 0], getT("global")),
+    rotation: lerpArrays(from.rotation || [0, 0, 0], to2.rotation || [0, 0, 0], getT("global")),
+    neckPose: lerpArrays(from.neckPose || [0, 0, 0], to2.neckPose || [0, 0, 0], getT("neck")),
+    jawPose: lerpArrays(from.jawPose || [0, 0, 0], to2.jawPose || [0, 0, 0], getT("jaw")),
+    eyePose: lerpArrays(from.eyePose || [0, 0, 0, 0, 0, 0], to2.eyePose || [0, 0, 0, 0, 0, 0], getT("eye")),
+    eyeLid: (() => {
+      const fromEyelid = from.eyeLid;
+      const toEyelid = to2.eyeLid;
+      if ((fromEyelid == null ? void 0 : fromEyelid.length) && (toEyelid == null ? void 0 : toEyelid.length))
+        return lerpArrays(fromEyelid, toEyelid, getT("eye"));
+      return fromEyelid || toEyelid || [];
+    })(),
+    expression: lerpArrays(from.expression || [], to2.expression || [], getT("expression"))
+  };
+}
+function generateTransitionFrames(from, to2, durationMs, fps = FLAME_FRAME_RATE) {
+  const steps = Math.max(1, Math.floor(durationMs / 1e3 * fps));
+  const frames = Array.from({ length: steps });
+  if (steps === 1) {
+    frames[0] = to2;
+    return frames;
+  }
+  for (let i2 = 0; i2 < steps; i2++) {
+    const progress = i2 / (steps - 1);
+    frames[i2] = bezierLerp(from, to2, progress);
+  }
+  frames[0] = from;
+  frames[frames.length - 1] = to2;
+  return frames;
+}
 class AvatarView {
   /**
    * Constructor
@@ -16271,16 +16217,20 @@ class AvatarView {
     __publicField(this, "currentKeyframes", []);
     __publicField(this, "lastRenderedFrameIndex", -1);
     __publicField(this, "lastRealtimeProtoFrame", null);
-    // Animation loop (single render loop)
-    __publicField(this, "renderLoopId", null);
-    __publicField(this, "endTransitionFrames", []);
-    __publicField(this, "isConversationActive", false);
+    // Animation loop types
+    __publicField(this, "idleAnimationLoopId", null);
+    __publicField(this, "realtimeAnimationLoopId", null);
     __publicField(this, "resizeObserver", null);
     __publicField(this, "onWindowResize", () => this.handleResize());
     // FPS 计算
     __publicField(this, "frameCount", 0);
     __publicField(this, "lastFpsUpdate", 0);
     __publicField(this, "currentFPS", 0);
+    // Transition animation data
+    __publicField(this, "transitionKeyframes", []);
+    __publicField(this, "transitionStartTime", 0);
+    __publicField(this, "startTransitionDurationMs", START_TRANSITION_DURATION_MS);
+    // Idle -> Speaking 过渡时长
     __publicField(this, "endTransitionDurationMs", END_TRANSITION_DURATION_MS);
     // Speaking -> Idle 过渡时长
     __publicField(this, "cachedIdleFirstFrame", null);
@@ -16380,6 +16330,27 @@ class AvatarView {
     keyframes[keyframes.length - 1] = aligned.to;
     return keyframes;
   }
+  /**
+   * Idle loop increments index after rendering, so the currently displayed idle frame is (idleCurrentFrameIndex - 1).
+   * @internal
+   */
+  getDisplayedIdleFrameIndex() {
+    return Math.max(0, this.idleCurrentFrameIndex - 1);
+  }
+  /**
+   * Clamp realtime frame index to current keyframes range to avoid out-of-bounds access.
+   * @internal
+   */
+  getClampedRealtimeFrameIndex(frameIndex) {
+    const lastIndex = this.currentKeyframes.length - 1;
+    if (lastIndex < 0) {
+      return -1;
+    }
+    if (frameIndex < 0) {
+      return 0;
+    }
+    return Math.min(frameIndex, lastIndex);
+  }
   /**
    * Get cached Idle first frame, fetch and cache if not cached
    * @internal
@@ -16398,28 +16369,6 @@ class AvatarView {
     }
     return this.cachedIdleFirstFrame;
   }
-  /**
-   * Get the currently displayed idle frame.
-   * Used as the start frame for idle -> speaking transition to avoid startup jump.
-   * @internal
-   */
-  async getCurrentDisplayedIdleFrame() {
-    if (this.renderingState !== "idle") {
-      return null;
-    }
-    const avatarCore = AvatarSDK.getAvatarCore();
-    if (!avatarCore) {
-      return null;
-    }
-    try {
-      const displayedIndex = Math.max(0, this.idleCurrentFrameIndex - 1);
-      const idleParams = await avatarCore.getCurrentFrameParams(displayedIndex, this.characterId);
-      return convertWasmParamsToProtoFlame(idleParams);
-    } catch (e2) {
-      logger.warn("[AvatarView] Failed to get current idle frame:", e2 instanceof Error ? e2.message : String(e2));
-      return null;
-    }
-  }
   /**
    * Get controller (public interface)
    */
@@ -16535,7 +16484,7 @@ class AvatarView {
       if (APP_CONFIG.debug)
         logger.log("[AvatarView] Starting rendering...");
       await this.renderFirstFrame();
-      this.startRenderLoop();
+      this.startIdleAnimationLoop();
       this.isInitialized = true;
       if (APP_CONFIG.debug)
         logger.log("[AvatarView] Avatar view initialized successfully");
@@ -16708,12 +16657,16 @@ class AvatarView {
     this.lastFpsUpdate = performance.now();
   }
   /**
-   * Start single render loop (unified idle/transition/conversation)
-   * Priority: endTransitionFrames > conversation (Controller playbackLoop) > idle
+   * Start idle animation loop
    * @internal
    */
-  startRenderLoop() {
-    if (this.renderLoopId) {
+  startIdleAnimationLoop() {
+    if (this.idleAnimationLoopId) {
+      this.stopIdleAnimationLoop();
+    }
+    if (this.renderingState !== "idle") {
+      if (APP_CONFIG.debug)
+        logger.log("[AvatarView] Skip starting idle loop because not in idle state");
       return;
     }
     this.idleCurrentFrameIndex = 0;
@@ -16727,72 +16680,185 @@ class AvatarView {
           return;
         }
         this.updateFPS();
+        if (this.renderingState !== "idle") {
+          this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
+          return;
+        }
         const elapsed = currentTime - lastTime;
         if (elapsed < frameInterval) {
-          this.renderLoopId = requestAnimationFrame(renderFrame);
+          this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
           return;
         }
         lastTime = currentTime - elapsed % frameInterval;
-        if (this.isPureRenderingMode || !this._renderingEnabled) {
-          this.renderLoopId = requestAnimationFrame(renderFrame);
+        if (this.isPureRenderingMode) {
+          this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
+          return;
+        }
+        if (!this._renderingEnabled) {
+          this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
+          return;
+        }
+        const avatarCore = AvatarSDK.getAvatarCore();
+        if (!avatarCore) {
+          return;
+        }
+        const splatData = await avatarCore.computeCompleteFrameFlat({ frameIndex: this.idleCurrentFrameIndex }, this.characterHandle ?? void 0);
+        this.idleCurrentFrameIndex++;
+        if (splatData) {
+          if (this.renderingState !== "idle") {
+            return;
+          }
+          if (this.isPureRenderingMode) {
+            return;
+          }
+          this.doRender(splatData);
+        }
+        this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
+      } catch (error) {
+        logger.error("[AvatarView] Idle animation loop error:", error instanceof Error ? error.message : String(error));
+        this.stopIdleAnimationLoop();
+      }
+    };
+    this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
+    if (APP_CONFIG.debug)
+      logger.log("[AvatarView] Idle animation loop started");
+  }
+  /**
+   * Start realtime conversation animation loop
+   * @internal
+   */
+  startRealtimeAnimationLoop() {
+    if (this.realtimeAnimationLoopId) {
+      this.stopRealtimeAnimationLoop();
+    }
+    let lastTime = 0;
+    const targetFPS = FLAME_FRAME_RATE;
+    const frameInterval = 1e3 / targetFPS;
+    this.initFPS();
+    const renderFrame = async (currentTime) => {
+      try {
+        const state = this.renderingState;
+        this.updateFPS();
+        if (!this.renderSystem || state === "idle") {
+          this.realtimeAnimationLoopId = null;
+          return;
+        }
+        const elapsed = currentTime - lastTime;
+        if (elapsed < frameInterval) {
+          this.realtimeAnimationLoopId = requestAnimationFrame(renderFrame);
           return;
         }
-        if (this.endTransitionFrames.length > 0) {
-          const frame = this.endTransitionFrames.shift();
-          this.currentPlayingFrame = frame;
-          const wasmParams = convertProtoFlameToWasmParams(frame);
-          const avatarCore2 = AvatarSDK.getAvatarCore();
-          if (avatarCore2) {
-            const sd = await avatarCore2.computeFrameFlatFromParams(wasmParams, this.characterHandle ?? void 0);
+        lastTime = currentTime - elapsed % frameInterval;
+        if (state === "transitioningToSpeaking" || state === "transitioningToIdle") {
+          if (this.transitionKeyframes.length === 0) {
+            if (state === "transitioningToSpeaking") {
+              this.setState(
+                "speaking"
+                /* Speaking */
+              );
+              this.avatarController.onTransitionComplete();
+            } else if (state === "transitioningToIdle") {
+              this.setState(
+                "idle"
+                /* Idle */
+              );
+              this.stopRealtimeAnimationLoop();
+              this.startIdleAnimationLoop();
+              return;
+            }
+            this.realtimeAnimationLoopId = requestAnimationFrame(renderFrame);
+            return;
+          }
+          const elapsed2 = performance.now() - this.transitionStartTime;
+          const currentTransitionDurationMs = state === "transitioningToSpeaking" ? this.startTransitionDurationMs : this.endTransitionDurationMs;
+          const progress = Math.min(1, Math.max(0, elapsed2 / currentTransitionDurationMs));
+          const steps = this.transitionKeyframes.length;
+          const idx = Math.min(steps - 1, Math.floor(progress * (steps - 1)));
+          const currentFrame = this.transitionKeyframes[idx];
+          this.currentPlayingFrame = currentFrame;
+          const wasmParams = convertProtoFlameToWasmParams(currentFrame);
+          const avatarCore = AvatarSDK.getAvatarCore();
+          if (avatarCore) {
+            const sd = await avatarCore.computeFrameFlatFromParams(wasmParams, this.characterHandle ?? void 0);
             if (sd) {
               this.doRender(sd);
             }
           }
-          if (this.endTransitionFrames.length === 0) {
+          if (progress >= 1) {
+            if (state === "transitioningToSpeaking") {
+              this.setState(
+                "speaking"
+                /* Speaking */
+              );
+              this.transitionKeyframes = [];
+              this.avatarController.onTransitionComplete();
+            } else if (state === "transitioningToIdle") {
+              this.setState(
+                "idle"
+                /* Idle */
+              );
+              this.transitionKeyframes = [];
+              this.stopRealtimeAnimationLoop();
+              this.startIdleAnimationLoop();
+              return;
+            }
+          }
+          if (state === "transitioningToSpeaking" && this.transitionStartTime > 0 && this.transitionKeyframes.length > 0 && elapsed2 >= this.startTransitionDurationMs + 100) {
             this.setState(
-              "idle"
-              /* Idle */
+              "speaking"
+              /* Speaking */
             );
+            this.transitionKeyframes = [];
+            this.avatarController.onTransitionComplete();
           }
-          this.renderLoopId = requestAnimationFrame(renderFrame);
+          this.realtimeAnimationLoopId = requestAnimationFrame(renderFrame);
           return;
         }
-        if (this.isConversationActive) {
-          this.renderLoopId = requestAnimationFrame(renderFrame);
+        if (state === "speaking") {
+          this.realtimeAnimationLoopId = requestAnimationFrame(renderFrame);
           return;
         }
-        const avatarCore = AvatarSDK.getAvatarCore();
-        if (!avatarCore) {
-          this.renderLoopId = requestAnimationFrame(renderFrame);
-          return;
-        }
-        const splatData = await avatarCore.computeCompleteFrameFlat({ frameIndex: this.idleCurrentFrameIndex }, this.characterHandle ?? void 0);
-        this.idleCurrentFrameIndex++;
-        if (splatData && this.renderingState === "idle" && !this.isPureRenderingMode && !this.isConversationActive) {
-          this.doRender(splatData);
-        }
-        this.renderLoopId = requestAnimationFrame(renderFrame);
       } catch (error) {
-        logger.error("[AvatarView] Render loop error:", error instanceof Error ? error.message : String(error));
-        this.renderLoopId = requestAnimationFrame(renderFrame);
+        logger.error("[AvatarView] Realtime animation loop error:", error instanceof Error ? error.message : String(error));
+        this.stopRealtimeAnimationLoop();
       }
     };
-    this.renderLoopId = requestAnimationFrame(renderFrame);
+    this.realtimeAnimationLoopId = requestAnimationFrame(renderFrame);
     if (APP_CONFIG.debug)
-      logger.log("[AvatarView] Render loop started");
+      logger.log("[AvatarView] Realtime animation loop started");
   }
   /**
-   * Stop render loop
+   * Stop idle animation loop
    * @internal
    */
-  stopRenderLoop() {
-    if (this.renderLoopId) {
-      cancelAnimationFrame(this.renderLoopId);
-      this.renderLoopId = null;
+  stopIdleAnimationLoop() {
+    if (this.idleAnimationLoopId) {
+      cancelAnimationFrame(this.idleAnimationLoopId);
+      this.idleAnimationLoopId = null;
       if (APP_CONFIG.debug)
-        logger.log("[AvatarView] Render loop stopped");
+        logger.log("[AvatarView] Idle animation loop stopped");
     }
   }
+  /**
+   * Stop realtime conversation animation loop
+   * @internal
+   */
+  stopRealtimeAnimationLoop() {
+    if (this.realtimeAnimationLoopId) {
+      cancelAnimationFrame(this.realtimeAnimationLoopId);
+      this.realtimeAnimationLoopId = null;
+      if (APP_CONFIG.debug)
+        logger.log("[AvatarView] Realtime animation loop stopped");
+    }
+  }
+  /**
+   * Stop all animation loops
+   * @internal
+   */
+  stopAllAnimationLoops() {
+    this.stopIdleAnimationLoop();
+    this.stopRealtimeAnimationLoop();
+  }
   /**
    * Unified render method - all rendering goes through here
    * This is the single point of control for renderingEnabled flag
@@ -16814,42 +16880,80 @@ class AvatarView {
       return;
     }
     this.lastRenderedFrameIndex = frameIndex;
-    if (frameIndex >= 0 && frameIndex < this.currentKeyframes.length) {
-      this.lastRealtimeProtoFrame = this.currentKeyframes[frameIndex];
+    const clampedFrameIndex = this.getClampedRealtimeFrameIndex(frameIndex);
+    if (clampedFrameIndex >= 0) {
+      this.lastRealtimeProtoFrame = this.currentKeyframes[clampedFrameIndex];
       this.currentPlayingFrame = this.lastRealtimeProtoFrame;
     }
     this.doRender(splatData);
   }
   /**
    * State transition method
+   * Unified state transition management to ensure state consistency
    * @internal
    */
   setState(newState) {
+    const oldState = this.renderingState;
     this.renderingState = newState;
+    if (oldState === "transitioningToIdle" && newState !== "transitioningToIdle") {
+      this.transitionKeyframes = [];
+    }
+    if (oldState === "transitioningToSpeaking" && newState !== "transitioningToSpeaking") {
+      this.transitionKeyframes = [];
+    }
     if (newState === "idle") {
       this.currentKeyframes = [];
       this.lastRenderedFrameIndex = -1;
       this.lastRealtimeProtoFrame = null;
-      this.endTransitionFrames = [];
-      this.isConversationActive = false;
+      this.transitionKeyframes = [];
+      this.transitionStartTime = 0;
       this.currentPlayingFrame = null;
-      this.idleCurrentFrameIndex = 0;
     }
   }
   /**
-   * Handle interrupt - immediately return to idle
+   * Check if in realtime playing state (Speaking or transitioning to Speaking)
+   * @internal
+   */
+  get isRealtimePlaying() {
+    return this.renderingState === "speaking" || this.renderingState === "transitioningToSpeaking";
+  }
+  /**
+   * Check if in transition state
+   * @internal
+   */
+  get isTransitioning() {
+    return this.renderingState === "transitioningToSpeaking" || this.renderingState === "transitioningToIdle";
+  }
+  /**
+   * Check if will return to Idle after transition ends
+   * @internal
+   */
+  get endToIdleAfterTransition() {
+    return this.renderingState === "transitioningToIdle";
+  }
+  /**
+   * Handle interrupt
+   * When interrupted, should generate transition animation instead of directly jumping back to Idle
    * @internal
    */
   handleInterrupt() {
-    if (this.renderingState === "idle") {
+    const state = this.renderingState;
+    if (state === "idle") {
       return;
     }
-    this.endTransitionFrames = [];
-    this.isConversationActive = false;
-    this.setState(
-      "idle"
-      /* Idle */
-    );
+    if (state === "transitioningToIdle") {
+      return;
+    }
+    if (state === "speaking" || state === "transitioningToSpeaking") {
+      this.stopRealtimeRendering();
+    } else {
+      this.setState(
+        "idle"
+        /* Idle */
+      );
+      this.stopRealtimeAnimationLoop();
+      this.startIdleAnimationLoop();
+    }
   }
   /**
    * Setup AvatarController event listeners
@@ -16858,75 +16962,197 @@ class AvatarView {
   setupControllerEventListeners() {
     this.avatarController.setupInternalEventListeners({
       onKeyframesUpdate: (keyframes) => {
-        this.currentKeyframes = keyframes;
+        this.prepareRealtimeRendering(keyframes);
       },
       onStartRendering: () => {
-        this.endTransitionFrames = [];
-        this.isConversationActive = true;
-        this.setState(
-          "speaking"
-          /* Speaking */
-        );
-        logEvent("character_view", "info", {
-          avatar_id: this.avatar.id,
-          event: "rendering_started",
-          keyframesCount: this.currentKeyframes.length
-        });
+        this.startRealtimeRendering();
       },
       onStopRendering: () => {
-        this.isConversationActive = false;
-        this.generateEndTransition();
+        this.stopRealtimeRendering();
       },
       onInterrupt: () => {
         this.handleInterrupt();
-      },
-      getCurrentIdleFrame: async () => {
-        return this.getCurrentDisplayedIdleFrame();
       }
     });
   }
   /**
-   * Generate conversation → idle end-transition frames
+   * Prepare realtime rendering (generate transition to Speaking)
+   * Unified logic: from current playing frame -> Speaking first frame
    * @internal
    */
-  async generateEndTransition() {
+  async prepareRealtimeRendering(keyframes) {
+    const state = this.renderingState;
+    if ((state === "speaking" || state === "transitioningToSpeaking") && this.currentKeyframes.length > 0) {
+      this.currentKeyframes = keyframes;
+      return;
+    }
+    this.stopIdleAnimationLoop();
+    this.currentKeyframes = keyframes;
     this.setState(
-      "transitioningToIdle"
-      /* TransitioningToIdle */
+      "transitioningToSpeaking"
+      /* TransitioningToSpeaking */
     );
     try {
-      let fromFrame = this.currentPlayingFrame || this.lastRealtimeProtoFrame;
-      if (!fromFrame && this.currentKeyframes.length > 0) {
-        fromFrame = this.currentKeyframes[Math.max(0, this.lastRenderedFrameIndex)];
-      }
-      if (!fromFrame) {
-        this.setState(
-          "idle"
-          /* Idle */
-        );
-        return;
-      }
-      const fromFrameWithPP = this.avatarController.applyPostProcessingToFlame(fromFrame);
-      const idleFirstProto = await this.getCachedIdleFirstFrame();
-      if (idleFirstProto) {
-        const frames = this.generateAndAlignTransitionFrames(fromFrameWithPP, idleFirstProto, this.endTransitionDurationMs);
-        if (frames.length > 0) {
-          this.endTransitionFrames = frames;
-          this.currentPlayingFrame = null;
-          if (APP_CONFIG.debug)
-            logger.log("[AvatarView] End transition started:", frames.length, "frames");
+      const avatarCore = AvatarSDK.getAvatarCore();
+      if (avatarCore && keyframes.length > 0) {
+        if (this.renderingState !== "transitioningToSpeaking") {
           return;
         }
+        let fromFrame = this.currentPlayingFrame;
+        if (!fromFrame) {
+          if (state === "idle") {
+            const displayedIdleFrameIndex = this.getDisplayedIdleFrameIndex();
+            const idleParams = await avatarCore.getCurrentFrameParams(displayedIdleFrameIndex, this.characterId);
+            fromFrame = convertWasmParamsToProtoFlame(idleParams);
+          } else if (state === "transitioningToIdle" || state === "transitioningToSpeaking") {
+            if (this.transitionKeyframes.length > 0) {
+              const elapsed = performance.now() - this.transitionStartTime;
+              const currentTransitionDurationMs = state === "transitioningToSpeaking" ? this.startTransitionDurationMs : this.endTransitionDurationMs;
+              const progress = Math.min(1, Math.max(0, elapsed / currentTransitionDurationMs));
+              const steps = this.transitionKeyframes.length;
+              const idx = Math.min(steps - 1, Math.floor(progress * (steps - 1)));
+              fromFrame = this.transitionKeyframes[idx];
+            }
+          }
+        }
+        if (!fromFrame) {
+          logger.warn("[AvatarView] Cannot get current playing frame, fallback to idle frame");
+          const displayedIdleFrameIndex = this.getDisplayedIdleFrameIndex();
+          const idleParams = await avatarCore.getCurrentFrameParams(displayedIdleFrameIndex, this.characterId);
+          fromFrame = convertWasmParamsToProtoFlame(idleParams);
+        }
+        await this.getCachedIdleFirstFrame();
+        const firstSpeaking = keyframes[0];
+        const firstSpeakingWithPostProcessing = this.avatarController.applyPostProcessingToFlame(firstSpeaking);
+        this.transitionKeyframes = this.generateAndAlignTransitionFrames(fromFrame, firstSpeakingWithPostProcessing, this.startTransitionDurationMs, true);
+        this.transitionStartTime = performance.now();
+        this.currentPlayingFrame = null;
+        if (this.transitionKeyframes.length === 0) {
+          this.setState(
+            "speaking"
+            /* Speaking */
+          );
+          this.avatarController.onTransitionComplete();
+        } else {
+          if (APP_CONFIG.debug)
+            logger.log("[AvatarView] Transition started:", this.transitionKeyframes.length, "frames");
+        }
       }
     } catch (e2) {
-      logger.warn("[AvatarView] End transition generation failed:", e2 instanceof Error ? e2.message : String(e2));
+      logger.warn("[AvatarView] Transition generation failed:", e2 instanceof Error ? e2.message : String(e2));
+      if (this.renderingState === "transitioningToSpeaking") {
+        this.setState(
+          "speaking"
+          /* Speaking */
+        );
+        this.avatarController.onTransitionComplete();
+      }
+    }
+    this.startRealtimeAnimationLoop();
+  }
+  /**
+   * Start realtime rendering loop
+   * @internal
+   */
+  startRealtimeRendering() {
+    if (APP_CONFIG.debug)
+      logger.log("[AvatarView] Starting realtime rendering with", this.currentKeyframes.length, "frames");
+    logEvent("character_view", "info", {
+      avatar_id: this.avatar.id,
+      event: "rendering_started",
+      keyframesCount: this.currentKeyframes.length
+    });
+  }
+  /**
+   * Stop realtime conversation rendering
+   * @internal
+   */
+  stopRealtimeRendering() {
+    var _a, _b;
+    const state = this.renderingState;
+    if (state === "idle" || state === "transitioningToIdle") {
+      return;
     }
-    if (this.renderingState === "transitioningToIdle") {
+    if (state !== "speaking" && state !== "transitioningToSpeaking") {
+      if (state === "transitioningToIdle") {
+        return;
+      }
       this.setState(
         "idle"
         /* Idle */
       );
+      this.stopRealtimeAnimationLoop();
+      this.startIdleAnimationLoop();
+      return;
     }
+    this.setState(
+      "transitioningToIdle"
+      /* TransitioningToIdle */
+    );
+    (_b = (_a = this.avatarController).onConversationState) == null ? void 0 : _b.call(_a, ConversationState.idle);
+    (async () => {
+      try {
+        if (this.renderingState !== "transitioningToIdle") {
+          return;
+        }
+        const avatarCore = AvatarSDK.getAvatarCore();
+        if (avatarCore) {
+          let fromFrame = this.currentPlayingFrame;
+          if (!fromFrame) {
+            if (this.lastRealtimeProtoFrame) {
+              fromFrame = this.lastRealtimeProtoFrame;
+            } else if (this.currentKeyframes.length > 0) {
+              const clampedFrameIndex = this.getClampedRealtimeFrameIndex(this.lastRenderedFrameIndex);
+              if (clampedFrameIndex >= 0) {
+                fromFrame = this.currentKeyframes[clampedFrameIndex];
+              }
+            }
+          }
+          if (!fromFrame && this.transitionKeyframes.length > 0) {
+            const elapsed = performance.now() - this.transitionStartTime;
+            const progress = Math.min(1, Math.max(0, elapsed / this.endTransitionDurationMs));
+            const steps = this.transitionKeyframes.length;
+            const idx = Math.min(steps - 1, Math.floor(progress * (steps - 1)));
+            fromFrame = this.transitionKeyframes[idx];
+          }
+          if (!fromFrame) {
+            logger.warn("[AvatarView] Cannot get current playing frame for transition to idle, fallback to idle frame");
+            this.setState(
+              "idle"
+              /* Idle */
+            );
+            this.stopRealtimeAnimationLoop();
+            this.startIdleAnimationLoop();
+            return;
+          }
+          const fromFrameWithPostProcessing = this.avatarController.applyPostProcessingToFlame(fromFrame);
+          const idleFirstProto = await this.getCachedIdleFirstFrame();
+          if (idleFirstProto) {
+            this.transitionKeyframes = this.generateAndAlignTransitionFrames(fromFrameWithPostProcessing, idleFirstProto, this.endTransitionDurationMs);
+            this.transitionStartTime = performance.now();
+            this.currentPlayingFrame = null;
+            if (this.transitionKeyframes.length > 0 && this.renderingState === "transitioningToIdle") {
+              if (APP_CONFIG.debug)
+                logger.log("[AvatarView] Return transition started:", this.transitionKeyframes.length, "frames");
+              if (!this.realtimeAnimationLoopId) {
+                this.startRealtimeAnimationLoop();
+              }
+              return;
+            }
+          }
+        }
+      } catch (e2) {
+        logger.warn("[AvatarView] Return transition generation failed:", e2 instanceof Error ? e2.message : String(e2));
+      }
+      if (this.renderingState === "transitioningToIdle") {
+        this.setState(
+          "idle"
+          /* Idle */
+        );
+        this.stopRealtimeAnimationLoop();
+        this.startIdleAnimationLoop();
+      }
+    })();
   }
   /**
    * Cleanup view resources
@@ -16943,7 +17169,7 @@ class AvatarView {
       this.avatarController.clear();
       this.avatarController.dispose();
     }
-    this.stopRenderLoop();
+    this.stopAllAnimationLoops();
     this.stopAvatarActiveHeartbeat();
     this.setState(
       "idle"
@@ -17100,14 +17326,14 @@ class AvatarView {
   }
   /**
    * Pause rendering loop
-   *
+   * 
    * When called:
    * - Rendering loop stops (no GPU/canvas updates)
    * - Audio playback continues normally
    * - Animation state machine continues running
-   *
+   * 
    * Use `resumeRendering()` to resume rendering.
-   *
+   * 
    * @example
    * // Stop rendering to save GPU resources (audio continues)
    * avatarView.pauseRendering()
@@ -17121,11 +17347,11 @@ class AvatarView {
   }
   /**
    * Resume rendering loop
-   *
+   * 
    * When called:
    * - Rendering loop resumes from current state
    * - If in Idle state, immediately renders current frame to restore display
-   *
+   * 
    * @example
    * // Resume rendering
    * avatarView.resumeRendering()
@@ -17187,11 +17413,11 @@ class AvatarView {
   }
   /**
    * Get or set avatar transform in canvas
-   *
+   * 
    * @example
    * // Get current transform
    * const current = avatarView.transform
-   *
+   * 
    * // Set transform
    * avatarView.transform = { x: 0.5, y: 0, scale: 2.0 }
    */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b, c, m, f, d, j, g, C, i, D, E, k, h, L, R, n } from "./index-vzFN-bug.js";
+import { b, c, m, f, d, j, g, C, i, D, E, k, h, L, R, n } from "./index-Z9AXSJw3.js";
 export {
   b as Avatar,
   c as AvatarController,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spatialwalk/avatarkit",
   "type": "module",
-  "version": "1.0.0-beta.85",
+  "version": "1.0.0-beta.86",
   "packageManager": "pnpm@10.18.2",
   "description": "AvatarKit SDK - 3D Gaussian Splatting Avatar Rendering SDK",
   "author": "AvatarKit Team",
@@ -62,12 +62,8 @@
     "next": ">=13.0.0"
   },
   "peerDependenciesMeta": {
-    "vite": {
-      "optional": true
-    },
-    "next": {
-      "optional": true
-    }
+    "vite": { "optional": true },
+    "next": { "optional": true }
   },
   "dependencies": {
     "@bufbuild/protobuf": "^2.10.0",