@codingame/monaco-vscode-api 37.6.1 → 38.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatPetWidget.js

@@ -3,7 +3,7 @@ import { registerCss } from '../../../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../../../external/tslib/tslib.es6.js';
 import * as chatPet from './media/chatPet.css';
 import { BroadcastDataChannel } from '../../../../../base/browser/broadcast.js';
-import { isHTMLElement, $, append, addDisposableListener, getWindow, DisposableResizeObserver, AnimationFrameScheduler, EventType, EventHelper, getWindowId, getActiveWindow, scheduleAtNextAnimationFrame } from '../../../../../base/browser/dom.js';
+import { isHTMLElement, $, AnimationFrameScheduler, append, addDisposableListener, getWindow, DisposableResizeObserver, EventType, EventHelper, getWindowId, getActiveWindow, scheduleAtNextAnimationFrame } from '../../../../../base/browser/dom.js';
 import { GlobalPointerMoveMonitor } from '../../../../../base/browser/globalPointerMoveMonitor.js';
 import { StandardKeyboardEvent } from '../../../../../base/browser/keyboardEvent.js';
 import { StandardMouseEvent } from '../../../../../base/browser/mouseEvent.js';
@@ -25,11 +25,16 @@ import { IHostService } from '../../../../services/host/browser/host.service.js'
 import { CHAT_PET_OPEN_ACHIEVEMENTS_COMMAND_ID, getChatPetAchievement, getChatPetAccessory } from '../chatPetAchievements.js';
 import { CHAT_PET_DEFAULT_SCALE } from '../chatPetService.js';
 import { IChatPetService } from '../chatPetService.service.js';
+import { getChatPetBodyColor, getChatPetColorVariant, getChatPetEyeColor, CHAT_PET_CHANGE_COLOR_COMMAND_ID, setChatPetImageSource, getChatPetColoredSprite } from '../chatPetColors.js';
 import { getChatPetAccessoryImageSource, hasChatPetBodyImageDimensions, hasChatPetAccessoryImageDimensions, drawChatPetComposite, drawChatPetEyeAccessory } from './chatPetAccessoryRenderer.js';
 import { getChatPetReducedMotionRigFrame, getChatPetAccessoryRigFrame } from './chatPetAccessoryRig.js';
+import { isImageGenerationToolInProgress } from './chatContentParts/toolInvocationParts/chatToolPartUtilities.js';
+import { derived } from '../../../../../base/common/observableInternal/observables/derived.js';
+import { observableSignalFromEvent } from '../../../../../base/common/observableInternal/observables/observableSignalFromEvent.js';
 import { observableValue } from '../../../../../base/common/observableInternal/observables/observableValue.js';
 import { autorun } from '../../../../../base/common/observableInternal/reactions/autorun.js';
 import { observableFromEvent } from '../../../../../base/common/observableInternal/observables/observableFromEvent.js';
+import { transaction } from '../../../../../base/common/observableInternal/transaction.js';
 
 registerCss(chatPet, 1);
 const CHAT_PET_OVERLAY_CLASS = "chat-pet-overlay";
@@ -94,6 +99,7 @@ const CHAT_PET_DISPLAY_SIZE = 48;
 const CHAT_PET_SOURCE_SIZE = 96;
 const CHAT_PET_SLEEP_SOURCE_WIDTH = 120;
 const CHAT_PET_TYPING_SOURCE_WIDTH = 168;
+const CHAT_PET_PAINTING_SOURCE_WIDTH = 192;
 const CHAT_PET_BUTTON_PRESS_SOURCE_WIDTH = 160;
 const CHAT_PET_SING_SOURCE_WIDTH = 164;
 const CHAT_PET_SING_SOURCE_HEIGHT = 124;
@@ -105,6 +111,7 @@ const CHAT_PET_SCALE_STEP = 0.2;
 const CHAT_PET_SPEECH_BUBBLE_RIGHT_OVERHANG = 20;
 const CHAT_PET_SLEEP_RIGHT_OVERHANG = (CHAT_PET_SLEEP_SOURCE_WIDTH - CHAT_PET_SOURCE_SIZE) / 2;
 const CHAT_PET_TYPING_RIGHT_OVERHANG = (CHAT_PET_TYPING_SOURCE_WIDTH - CHAT_PET_SOURCE_SIZE) / 2;
+const CHAT_PET_PAINTING_RIGHT_OVERHANG = (CHAT_PET_PAINTING_SOURCE_WIDTH - CHAT_PET_SOURCE_SIZE) / 2;
 const CHAT_PET_BUTTON_PRESS_RIGHT_OVERHANG = (CHAT_PET_BUTTON_PRESS_SOURCE_WIDTH - CHAT_PET_SOURCE_SIZE) / 2;
 const CHAT_PET_SING_RIGHT_OVERHANG = (CHAT_PET_SING_SOURCE_WIDTH - CHAT_PET_SOURCE_SIZE) / 2;
 const IDLE_FRAME_DURATIONS = Array.from({
@@ -115,6 +122,7 @@ const SLEEP_FRAME_DURATIONS = Array.from({
 }, () => 300);
 const WAKE_FRAME_DURATIONS = [160, 100, 80, 90, 90, 90, 100, 170];
 const TYPING_FRAME_DURATIONS = [320, 480];
+const PAINTING_FRAME_DURATIONS = [240, 160, 180, 220, 180, 160, 240, 320];
 const BUTTON_PRESS_FRAME_DURATIONS = [500, 300, 350, 250, 450, 1_000];
 const FALLING_FRAME_DURATIONS = [120, 80, 80, 120, 80, 80];
 const JUMP_FRAME_DURATIONS = [70, 80, 90, 160, 100, 100];
@@ -145,10 +153,10 @@ const spriteSources = ( new Map());
 const speechSpriteSources = ( new Map());
 const respawnSpriteSources = ( new Map());
 function doesChatPetStateTrackCursor(state) {
-    return state !== undefined && state !== "sleep" && state !== "waking" && state !== "typing" && state !== "buttonPress" && state !== "complete" && state !== "jump" && state !== "love" && state !== "cool" && state !== "yappingMouthOpen" && state !== "sing" && state !== "speechless" && state !== "worry" && state !== "dizzy" && state !== "falling" && state !== "wallImpact" && state !== "splat" && state !== "onTheRun" && state !== "searching" && state !== "searchingDown";
+    return state !== undefined && state !== "sleep" && state !== "waking" && state !== "typing" && state !== "painting" && state !== "buttonPress" && state !== "complete" && state !== "jump" && state !== "love" && state !== "cool" && state !== "yappingMouthOpen" && state !== "sing" && state !== "speechless" && state !== "worry" && state !== "dizzy" && state !== "falling" && state !== "wallImpact" && state !== "splat" && state !== "onTheRun" && state !== "searching" && state !== "searchingDown";
 }
 function doesChatPetStateBlink(state, frameIndex) {
-    return (state === "typing" || state === "buttonPress" || state === "love") && (state !== "buttonPress" || frameIndex !== BUTTON_PRESS_FRAME_DURATIONS.length - 1);
+    return (state === "typing" || state === "painting" || state === "buttonPress" || state === "love") && (state !== "buttonPress" || frameIndex !== BUTTON_PRESS_FRAME_DURATIONS.length - 1);
 }
 function getChatPetSpriteName(state, quality) {
     const variant = quality === "stable" ? "stable" : "insiders";
@@ -181,6 +189,8 @@ function getChatPetSpriteName(state, quality) {
         return `buddy-waking-${variant}`;
     case "typing":
         return `buddy-typing-${variant}`;
+    case "painting":
+        return `buddy-painting-${variant}`;
     case "rendering":
     case "achievementUnlocked":
         return `buddy-rendering-${variant}`;
@@ -202,6 +212,8 @@ function getChatPetFrameDurations(state) {
         return WAKE_FRAME_DURATIONS;
     case "typing":
         return TYPING_FRAME_DURATIONS;
+    case "painting":
+        return PAINTING_FRAME_DURATIONS;
     case "buttonPress":
         return BUTTON_PRESS_FRAME_DURATIONS;
     case "falling":
@@ -273,7 +285,7 @@ function createSpriteSources(
         reducedMotion: staticSource
     };
 }
-function getSpriteSources(variant) {
+function getChatPetSpriteSources(variant) {
     let sources = spriteSources.get(variant);
     if (!sources) {
         const createStateSpriteSources = state => createSpriteSources(
@@ -297,6 +309,12 @@ function getSpriteSources(variant) {
             ),
             typing: createStateSpriteSources("typing"),
             rendering: createStateSpriteSources("rendering"),
+            painting: createSpriteSources(
+                getChatPetSpriteName("painting", variant),
+                "painting",
+                false,
+                CHAT_PET_PAINTING_SOURCE_WIDTH
+            ),
             achievementUnlocked: createStateSpriteSources("achievementUnlocked"),
             buttonPress: createStateSpriteSources("buttonPress"),
             complete: createStateSpriteSources("complete"),
@@ -383,8 +401,8 @@ function getRespawnSpriteSources(variant) {
 function doesChatPetStateSpeak(state) {
     return state === "rendering" || state === "achievementUnlocked";
 }
-function drawChatPetAchievementStar(context, variant) {
-    context.fillStyle = variant === "stable" ? "rgb(35, 168, 242)" : "rgb(36, 191, 165)";
+function drawChatPetAchievementStar(context, color) {
+    context.fillStyle = getChatPetBodyColor(color);
     context.fillRect(56, 34, 24, 24);
     context.fillStyle = "rgb(255, 205, 15)";
     const rows = ["..#..", ".###.", "#####", ".#.#.", "#...#"];
@@ -404,13 +422,14 @@ function getChatPetBaseState(
     needsInput,
     confirmationAttentionExpired,
     hasInput,
-    idleExpired
+    idleExpired,
+    isGeneratingImage = false
 ) {
     if (needsInput) {
         return confirmationAttentionExpired ? "idle" : "clapping";
     }
     if (hasActiveRequest) {
-        return "rendering";
+        return isGeneratingImage ? "painting" : "rendering";
     }
     if (idleExpired) {
         return "sleep";
@@ -997,7 +1016,7 @@ function getChatPetWideSpriteHorizontalOffset(
     inputRight,
     scale = 1
 ) {
-    const overhang = state === "sleep" || state === "waking" ? CHAT_PET_SLEEP_RIGHT_OVERHANG : state === "typing" ? CHAT_PET_TYPING_RIGHT_OVERHANG : state === "buttonPress" ? CHAT_PET_BUTTON_PRESS_RIGHT_OVERHANG : state === "sing" ? CHAT_PET_SING_RIGHT_OVERHANG : 0;
+    const overhang = state === "sleep" || state === "waking" ? CHAT_PET_SLEEP_RIGHT_OVERHANG : state === "typing" ? CHAT_PET_TYPING_RIGHT_OVERHANG : state === "painting" ? CHAT_PET_PAINTING_RIGHT_OVERHANG : state === "buttonPress" ? CHAT_PET_BUTTON_PRESS_RIGHT_OVERHANG : state === "sing" ? CHAT_PET_SING_RIGHT_OVERHANG : 0;
     if (overhang === 0) {
         return 0;
     }
@@ -1081,7 +1100,26 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this.commandService = commandService;
         this.logService = logService;
         this.hostService = hostService;
+        this._isGeneratingImage = derived(this, reader => {
+            const model = this._host.read(reader).model.read(reader);
+            if (!model?.hasActiveRequest.read(reader)) {
+                return false;
+            }
+            const response = model.lastRequestObs.read(reader)?.response;
+            if (!response) {
+                return false;
+            }
+            observableSignalFromEvent(this, response.onDidChange).read(reader);
+            return ( response.response.value.some(part => {
+                if (part.kind !== "toolInvocation") {
+                    return false;
+                }
+                part.toolSpecificDataKind.read(reader);
+                return isImageGenerationToolInProgress(part, part.state.read(reader));
+            }));
+        });
         this._hostLayoutDisposables = this._register(( new MutableDisposable()));
+        this._hostTransition = observableValue(this, undefined);
         this._eyeAccessoryVisible = false;
         this._eyeAccessoryFixedOrientation = false;
         this._eyeAccessoryGazeOffset = [0, 0];
@@ -1154,7 +1192,8 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this.dragBounds = host.dragBounds;
         this.movementBounds = host.movementBounds;
         this._host = observableValue(this, host);
-        this._variant = this.chatPetService.variant.get();
+        this._color = this.chatPetService.color.get();
+        this._variant = getChatPetColorVariant(this._color);
         this._selectedAccessory = this.chatPetService.selectedAccessory.get();
         this.parent.classList.add("chat-pet-host");
         this._overlay = $(`.${CHAT_PET_OVERLAY_CLASS}`);
@@ -1168,6 +1207,13 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         })));
         this._button.element.classList.add("chat-pet-button");
         this._button.element.dataset.facing = this._facingController.direction;
+        this._hostPositionScheduler = this._register(new AnimationFrameScheduler(this._button.element, () => {
+            if (this._hostTransition.get()?.phase === "pending") {
+                this._startHostTransition();
+            } else if (!this._hostTransition.get()) {
+                this._lastHostPosition = this._getHostPosition() ?? this._lastHostPosition;
+            }
+        }));
         this._visual = append(this._button.element, $(".chat-pet-visual"));
         this._bounceCounter = append(this._overlay, $("span.chat-pet-bounce-counter.hidden", {
             "aria-hidden": "true"
@@ -1188,11 +1234,22 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this._respawnEffect = {
             container: respawnEffectCanvas,
             image: respawnEffectImage,
-            canvas: respawnEffectCanvas
+            canvas: respawnEffectCanvas,
+            color: this._color
         };
         this._register(
             addDisposableListener(respawnEffectImage, "load", () => this._startRespawnEffectAnimation())
         );
+        this._register(addDisposableListener(respawnEffectImage, "error", () => {
+            this.logService.error(
+                `[ChatPetWidget] Failed to load respawn sprite: ${respawnEffectImage.getAttribute("src")}`
+            );
+            respawnEffectImage.removeAttribute("src");
+            const phase = this._hostTransition.get()?.phase;
+            if (phase === "despawning" || phase === "respawning") {
+                this._finishHostTransition();
+            }
+        }));
         this._sprites = [0, 1].map(() => {
             const container = append(this._visual, $(".chat-pet-sprite.hidden"));
             const canvas = append(container, $("canvas.chat-pet-canvas"));
@@ -1212,7 +1269,8 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 container,
                 image,
                 accessoryImages,
-                canvas
+                canvas,
+                color: this._color
             };
             this._register(
                 addDisposableListener(image, "load", () => this._onBodyImageLoad(sprite))
@@ -1235,6 +1293,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             return sprite;
         });
         this._eyes = append(this._visual, $(".chat-pet-eyes"));
+        this._eyes.style.color = getChatPetEyeColor(this._color);
         this._eyes.setAttribute("aria-hidden", "true");
         for (const side of ["left", "right"]) {
             const eye = append(this._eyes, $(`.chat-pet-eye.${side}`));
@@ -1266,7 +1325,8 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this._speechBubble = {
             container: speechBubbleContainer,
             image: speechBubbleImage,
-            canvas: speechBubbleCanvas
+            canvas: speechBubbleCanvas,
+            color: this._color
         };
         this._resizeObserver = this._register(new DisposableResizeObserver(
             "ChatPetWidget.dragBounds",
@@ -1303,6 +1363,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         const onAnimationComplete = event => {
             if (event.animationName === "chat-pet-enter") {
                 this._button.element.classList.remove("entering");
+                this._rememberHostPosition();
             } else if (event.animationName === "chat-pet-exit" && !this._enabled) {
                 this._finishDisable();
             } else if (event.animationName === "chat-pet-yapping-fall" && !this._isDragging.get() && event.target === this._activeSprite?.container && this._button.element.dataset.state === "yapping") {
@@ -1318,11 +1379,15 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             addDisposableListener(this._button.element, "animationcancel", onAnimationComplete)
         );
         const onTransitionComplete = event => {
-            if (event.propertyName === "top" && this._button.element.classList.contains("falling")) {
+            if (event.target === this._button.element && event.propertyName === "top" && this._button.element.classList.contains("falling")) {
+                if (event.type === "transitioncancel" && this._hostTransition.get()) {
+                    return;
+                }
                 this._finishFall();
             } else if (event.target === this._button.element && event.propertyName === "transform") {
                 this._button.element.classList.remove("returning-from-run");
                 this._updateRunLayer();
+                this._rememberHostPosition();
             }
         };
         this._register(
@@ -1362,6 +1427,9 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this._register(this._button.onDidClick(e => {
             EventHelper.stop(e, true);
             this._dragMonitor.stopMonitoring(false);
+            if (this._hostTransition.get()) {
+                return;
+            }
             if (this._isAirborne()) {
                 if (e.type === EventType.KEY_DOWN) {
                     const bounds = this._button.element.getBoundingClientRect();
@@ -1396,7 +1464,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 this._wake();
             }
             if (wasSleeping || this._transientState.get() === "waking") {
-                status(( localize(12006, "The VS Code pet woke up")));
+                status(( localize(14338, "The VS Code pet woke up")));
                 return;
             }
             const interaction = getChatPetClickInteraction(Math.random(), this._lastClickInteraction);
@@ -1404,28 +1472,28 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             this._showTransientState(interaction);
             switch (interaction) {
             case "buttonPress":
-                status(( localize(12007, "The VS Code pet pressed its button")));
+                status(( localize(14339, "The VS Code pet pressed its button")));
                 break;
             case "complete":
-                status(( localize(12008, "The VS Code pet did a rare spin")));
+                status(( localize(14340, "The VS Code pet did a rare spin")));
                 break;
             case "love":
-                status(( localize(12009, "The VS Code pet feels loved")));
+                status(( localize(14341, "The VS Code pet feels loved")));
                 break;
             case "cool":
-                status(( localize(12010, "The VS Code pet put on sunglasses")));
+                status(( localize(14342, "The VS Code pet put on sunglasses")));
                 break;
             case "yapping":
-                status(( localize(12011, "The VS Code pet is yapping")));
+                status(( localize(14343, "The VS Code pet is yapping")));
                 break;
             case "sing":
-                status(( localize(12012, "The VS Code pet is singing")));
+                status(( localize(14344, "The VS Code pet is singing")));
                 break;
             case "speechless":
-                status(( localize(12013, "The VS Code pet is speechless")));
+                status(( localize(14345, "The VS Code pet is speechless")));
                 break;
             case "worry":
-                status(( localize(12014, "The VS Code pet is worried")));
+                status(( localize(14346, "The VS Code pet is worried")));
                 break;
             }
         }));
@@ -1435,7 +1503,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             }
             this._showTransientState("achievementUnlocked", false);
             status(( localize(
-                12015,
+                14347,
                 "Achievement unlocked: {0}. Activate the VS Code pet to view achievements.",
                 getChatPetAchievement(id).title
             )));
@@ -1494,9 +1562,21 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 this._setScale(scale);
             }
             const enabled = isChatPetVisible(serviceEnabled, isWindowActive);
-            const variant = this.chatPetService.variant.read(reader);
+            const color = this.chatPetService.color.read(reader);
+            const colorChanged = color !== this._color;
+            this._color = color;
+            const variant = getChatPetColorVariant(color);
             const variantChanged = variant !== this._variant;
             this._variant = variant;
+            if (colorChanged && (!variantChanged || color.startsWith("#"))) {
+                this._eyes.style.color = getChatPetEyeColor(color);
+                for (const sprite of [this._activeSprite, this._speechBubble, this._respawnEffect]) {
+                    if (sprite) {
+                        sprite.color = color;
+                        sprite.redrawFrame?.();
+                    }
+                }
+            }
             const selectedAccessory = this.chatPetService.selectedAccessory.read(reader);
             const accessoryChanged = selectedAccessory !== this._selectedAccessory;
             this._selectedAccessory = selectedAccessory;
@@ -1527,12 +1607,18 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 this._confirmationAttentionScheduler.schedule();
             }
             const hasActiveRequest = chatModel?.hasActiveRequest.read(reader) ?? false;
+            const isGeneratingImage = enabled && this._isGeneratingImage.read(reader);
             const inputHasContent = currentHost.hasInput.read(reader);
             this._busy = hasActiveRequest || needsInput;
             let idleExpired = this._idleExpired.read(reader);
             let transientState = this._transientState.read(reader);
-            this._button.setAriaLabel(this._getAriaLabel(onTheRun, transientState === "achievementUnlocked"));
+            this._button.setAriaLabel(this._getAriaLabel(
+                onTheRun,
+                transientState === "achievementUnlocked",
+                isGeneratingImage && !needsInput
+            ));
             const isDragging = this._isDragging.read(reader);
+            const hostTransition = this._hostTransition.read(reader);
             if (!this._enablementInitialized || enabled !== this._enabled) {
                 const wasInitialized = this._enablementInitialized;
                 this._enablementInitialized = true;
@@ -1574,12 +1660,21 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 return;
             }
             if (onTheRun) {
+                this._finishHostTransition();
                 this._dismissBounceResult();
                 this._hopController.cancel();
                 this._idleScheduler.cancel();
                 this._renderState("onTheRun", variantChanged);
                 return;
             }
+            if (hostTransition) {
+                if (this._motionReduced) {
+                    this._finishHostTransition();
+                } else {
+                    this._idleScheduler.cancel();
+                }
+                return;
+            }
             if (this._busy) {
                 this._idleScheduler.cancel();
                 if (idleExpired) {
@@ -1595,7 +1690,8 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 needsInput,
                 confirmationAttentionExpired,
                 inputHasContent,
-                idleExpired
+                idleExpired,
+                isGeneratingImage
             );
             if (isChatPetYapState(transientState) && baseState !== "idle") {
                 transientState = undefined;
@@ -1627,6 +1723,15 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         if (this._host.get() === host) {
             return;
         }
+        const transition = this._hostTransition.get();
+        let source = transition ? transition.phase === "pending" ? transition.source : this._getHostPosition() ?? transition.source : this._lastHostPosition ?? this._getHostPosition();
+        if (source && transition && (!host.transition || host.transition === this._host.get().transition)) {
+            source = {
+                ...source,
+                transition: transition.source.transition
+            };
+        }
+        const canAnimate = this._enabled && !this._motionReduced && !this._isDead.get() && !this._isDragging.get() && (!this._isAirborne() || !!transition) && !this.chatPetService.onTheRun.get();
         this.parent.classList.remove("chat-pet-host");
         this.parent = host.parent;
         this.dragBounds = host.dragBounds;
@@ -1634,9 +1739,185 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this.parent.classList.add("chat-pet-host");
         this.parent.prepend(this._overlay);
         this._observeHost(host);
-        this._host.set(host, undefined);
+        transaction(tx => {
+            this._host.set(host, tx);
+            this._finishHostTransition();
+            this._lastHostPosition = source;
+            this._hostTransition.set(
+                canAnimate && source?.transition && host.transition && source.transition !== host.transition ? {
+                    source,
+                    phase: "pending"
+                } : undefined,
+                tx
+            );
+        });
+        const pendingTransition = this._hostTransition.get();
+        if (pendingTransition) {
+            this._prepareHostTransition(pendingTransition.source);
+        }
         this._handleHostLayoutChange();
     }
+    _getHostPosition() {
+        const phase = this._hostTransition.get()?.phase;
+        const element = phase === "despawning" || phase === "respawning" ? this._respawnEffect.container : this._button.element;
+        const bounds = element.getBoundingClientRect();
+        return this._enabled && bounds.width > 0 && bounds.height > 0 ? {
+            left: bounds.left,
+            top: bounds.top,
+            transition: this._host.get().transition
+        } : undefined;
+    }
+    _rememberHostPosition() {
+        if (!this._hostTransition.get()) {
+            this._hostPositionScheduler.schedule();
+        }
+    }
+    _getHostTransitionTarget() {
+        const host = this._host.get();
+        const inputBounds = this.dragBounds.getBoundingClientRect();
+        const displaySize = this._getDisplaySize();
+        const maximumLeft = inputBounds.right - displaySize;
+        const left = this._hasCustomPosition && this._horizontalAnchor ? getChatPetAnchoredHorizontalPosition(this._horizontalAnchor, inputBounds.left, maximumLeft) : getChatPetDefaultHorizontalPosition(inputBounds.left, maximumLeft);
+        const top = getChatPetPlatformTop(
+            this.parent.getBoundingClientRect().top,
+            inputBounds.top,
+            host.getPlatformTop(left + displaySize / 2)
+        ) - displaySize;
+        return {
+            left,
+            top,
+            transition: host.transition
+        };
+    }
+    _setHostTransitionPosition(element, position) {
+        const overlayBounds = this._overlay.getBoundingClientRect();
+        element.style.left = `${position.left - overlayBounds.left}px`;
+        element.style.top = `${position.top - overlayBounds.top}px`;
+        element.style.right = "auto";
+        element.style.bottom = "auto";
+    }
+    _updateHostTransition() {
+        const transition = this._hostTransition.get();
+        if (!transition || this._getHorizontalBounds() === undefined) {
+            return;
+        }
+        if (transition.phase === "pending") {
+            this._hostPositionScheduler.schedule();
+        } else if (transition.phase === "falling") {
+            this._setHostTransitionPosition(this._button.element, this._getHostTransitionTarget());
+        } else if (transition.phase === "respawning") {
+            this._updateRespawnEffectPosition();
+        }
+    }
+    _prepareHostTransition(source) {
+        this._hopController.cancel();
+        this._transientScheduler.cancel();
+        this._blinkController.setEnabled(false);
+        this._resetBounceCount();
+        this._button.element.classList.remove("entering", "exiting");
+        this._button.element.tabIndex = -1;
+        this._speechBubble.container.classList.add("hidden");
+        (this.parent.closest(".monaco-workbench") ?? getWindow(this.parent).document.body).appendChild(this._overlay);
+        this._overlay.classList.add("relocating");
+        this._setHostTransitionPosition(this._button.element, source);
+    }
+    _startHostTransition() {
+        const transition = this._hostTransition.get();
+        if (transition?.phase !== "pending" || this._getHorizontalBounds() === undefined) {
+            return;
+        }
+        const target = this._getHostTransitionTarget();
+        if ((Math.abs(target.left - transition.source.left) <= POSITION_EPSILON && Math.abs(target.top - transition.source.top) <= POSITION_EPSILON) || (target.transition === "fall" && target.top <= transition.source.top + POSITION_EPSILON)) {
+            this._finishHostTransition();
+            return;
+        }
+        if (target.transition === "fall") {
+            this._hostTransition.set({
+                ...transition,
+                phase: "startingFall"
+            }, undefined);
+            this._renderState("falling", true);
+        } else {
+            this._hostTransition.set({
+                ...transition,
+                phase: "despawning"
+            }, undefined);
+            this._setHostTransitionPosition(this._respawnEffect.container, transition.source);
+            this._button.element.classList.add("hidden");
+            this._respawnEffect.container.classList.remove("hidden");
+            this._startRespawnEffectAnimation();
+        }
+    }
+    _beginHostTransitionFall() {
+        const transition = this._hostTransition.get();
+        if (transition?.phase !== "startingFall" && transition?.phase !== "respawning") {
+            return;
+        }
+        const target = this._getHostTransitionTarget();
+        const sourceElement = transition.phase === "respawning" ? this._respawnEffect.container : this._button.element;
+        const source = sourceElement.getBoundingClientRect();
+        const distance = target.top - source.top;
+        this._setHostTransitionPosition(this._button.element, {
+            ...target,
+            left: source.left,
+            top: source.top
+        });
+        this._respawnAnimation.clear();
+        this._respawnEffect.container.classList.add("hidden");
+        this._button.element.classList.remove("hidden");
+        this._hostTransition.set({
+            ...transition,
+            phase: "falling"
+        }, undefined);
+        this._button.element.style.transitionDuration = `${getChatPetFallDuration(distance)}ms`;
+        this._button.element.getBoundingClientRect();
+        this._button.element.classList.add("falling");
+        this._setHostTransitionPosition(this._button.element, target);
+        if (distance <= POSITION_EPSILON) {
+            this._finishHostTransition(true);
+        }
+    }
+    _completeHostTeleport() {
+        const transition = this._hostTransition.get();
+        if (transition?.phase === "despawning") {
+            this._hostTransition.set({
+                ...transition,
+                phase: "respawning"
+            }, undefined);
+            this._updateHostTransition();
+            this._startRespawnEffectAnimation();
+        } else if (transition?.phase === "respawning") {
+            this._renderState("falling", true);
+        }
+    }
+    _finishHostTransition(landed = false) {
+        if (!this._hostTransition.get()) {
+            return;
+        }
+        this._hostPositionScheduler.cancel();
+        this._spriteAnimation.clear();
+        this._respawnAnimation.clear();
+        this._respawnPosition = undefined;
+        this._respawnEffect.container.classList.add("hidden");
+        this._button.element.classList.remove("falling");
+        this._button.element.style.transitionDuration = "";
+        this._overlay.classList.remove("relocating");
+        this.parent.prepend(this._overlay);
+        this._button.element.classList.toggle("hidden", !this._enabled);
+        this._button.element.tabIndex = this._enabled ? 0 : -1;
+        if (this._getHorizontalBounds() !== undefined) {
+            this._updateRestingPosition();
+        }
+        transaction(tx => {
+            this._idleExpired.set(false, tx);
+            this._transientState.set(landed ? "splat" : undefined, tx);
+            this._hostTransition.set(undefined, tx);
+        });
+        if (landed) {
+            this._transientScheduler.schedule(SPLAT_STATE_DURATION);
+        }
+        this._rememberHostPosition();
+    }
     _observeHost(host) {
         const store = ( new DisposableStore());
         if (this._enabled) {
@@ -1651,6 +1932,10 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         if (!this._enabled || this._getHorizontalBounds() === undefined) {
             return;
         }
+        if (this._hostTransition.get()) {
+            this._updateHostTransition();
+            return;
+        }
         if (!this._positionInitialized) {
             this._restoreHorizontalPosition();
             this._updateVerticalPosition();
@@ -1671,6 +1956,10 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         if (!this._enabled || this._isDead.get() || this._getHorizontalBounds() === undefined) {
             return;
         }
+        if (this._hostTransition.get()) {
+            this._updateHostTransition();
+            return;
+        }
         if (this._isAirborne()) {
             if (this._button.element.classList.contains("throwing")) {
                 this._throwGeometryDirty = true;
@@ -2079,7 +2368,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this._completeFall(announce, wallImpact);
     }
     _isAirborne() {
-        return this._button.element.classList.contains("falling") || this._button.element.classList.contains("throwing");
+        return !!this._hostTransition.get() || this._button.element.classList.contains("falling") || this._button.element.classList.contains("throwing");
     }
     _beginFall(mouseBounceDelay = 0) {
         const top = Number.parseFloat(this._button.element.style.top);
@@ -2113,6 +2402,10 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         if (!this._button.element.classList.contains("falling")) {
             return;
         }
+        if (this._hostTransition.get()?.phase === "falling") {
+            this._finishHostTransition(true);
+            return;
+        }
         this._button.element.classList.remove("falling");
         this._button.element.style.transitionDuration = "";
         this._completeFall(announce);
@@ -2127,25 +2420,25 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             if (announce) {
                 this._showTransientState("splat");
                 if (respawned) {
-                    status(( localize(12016, "The VS Code pet respawned")));
+                    status(( localize(14348, "The VS Code pet respawned")));
                 } else if (shouldCelebrateChatPetBounceScore(this._bounceCount)) {
                     status(( localize(
-                        12017,
+                        14349,
                         "The VS Code pet landed with a {0}-bounce streak",
                         this._bounceCount
                     )));
                 } else if (wallImpact === "left") {
                     status(( localize(
-                        12018,
+                        14350,
                         "The VS Code pet bounced off the left wall and landed on the chat input"
                     )));
                 } else if (wallImpact === "right") {
                     status(( localize(
-                        12019,
+                        14351,
                         "The VS Code pet bounced off the right wall and landed on the chat input"
                     )));
                 } else {
-                    status(( localize(12020, "The VS Code pet landed on the chat input")));
+                    status(( localize(14352, "The VS Code pet landed on the chat input")));
                 }
             }
             this._showBounceResult();
@@ -2165,16 +2458,16 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         if (announce) {
             if (wallImpact === "left") {
                 status(( localize(
-                    12021,
+                    14353,
                     "The VS Code pet bounced off the left wall, fell off, and will respawn automatically"
                 )));
             } else if (wallImpact === "right") {
                 status(( localize(
-                    12022,
+                    14354,
                     "The VS Code pet bounced off the right wall, fell off, and will respawn automatically"
                 )));
             } else {
-                status(( localize(12023, "The VS Code pet fell off and will respawn automatically")));
+                status(( localize(14355, "The VS Code pet fell off and will respawn automatically")));
             }
         }
     }
@@ -2183,26 +2476,23 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         const onTheRun = this.chatPetService.onTheRun.get();
         const actions = ( new DisposableStore());
         this._contextMenuActions.value = actions;
-        const achievements = actions.add(( new Action("chat.pet.achievements", ( localize(12024, "Achievements…")), undefined, true, () => this.commandService.executeCommand(CHAT_PET_OPEN_ACHIEVEMENTS_COMMAND_ID))));
-        const stable = actions.add(( new Action("chat.pet.variant.stable", ( localize(12025, "Stable Colors")), undefined, true, () => this.chatPetService.setVariant("stable"))));
-        stable.checked = this.chatPetService.variant.get() === "stable";
-        const insiders = actions.add(( new Action("chat.pet.variant.insiders", ( localize(12026, "Insiders Colors")), undefined, true, () => this.chatPetService.setVariant("insiders"))));
-        insiders.checked = this.chatPetService.variant.get() === "insiders";
-        const grow = actions.add(( new Action("chat.pet.grow", ( localize(12027, "Grow")), undefined, true, () => {
+        const achievements = actions.add(( new Action("chat.pet.achievements", ( localize(14356, "Achievements…")), undefined, true, () => this.commandService.executeCommand(CHAT_PET_OPEN_ACHIEVEMENTS_COMMAND_ID))));
+        const changeColor = actions.add(( new Action(CHAT_PET_CHANGE_COLOR_COMMAND_ID, ( localize(14357, "Change Color")), undefined, true, () => this.commandService.executeCommand(CHAT_PET_CHANGE_COLOR_COMMAND_ID))));
+        const grow = actions.add(( new Action("chat.pet.grow", ( localize(14358, "Grow")), undefined, true, () => {
             const scale = getChatPetScale(this._scale, CHAT_PET_SCALE_STEP);
             this.chatPetService.setScale(scale);
-            status(( localize(12028, "VS Code pet size: {0} percent", Math.round(scale * 100))));
+            status(( localize(14359, "VS Code pet size: {0} percent", Math.round(scale * 100))));
         })));
-        const shrink = actions.add(( new Action("chat.pet.shrink", ( localize(12029, "Shrink")), undefined, this._scale > CHAT_PET_MIN_SCALE, () => {
+        const shrink = actions.add(( new Action("chat.pet.shrink", ( localize(14360, "Shrink")), undefined, this._scale > CHAT_PET_MIN_SCALE, () => {
             const scale = getChatPetScale(this._scale, -CHAT_PET_SCALE_STEP);
             this.chatPetService.setScale(scale);
-            status(( localize(12030, "VS Code pet size: {0} percent", Math.round(scale * 100))));
+            status(( localize(14361, "VS Code pet size: {0} percent", Math.round(scale * 100))));
         })));
-        const resetSize = actions.add(( new Action("chat.pet.resetSize", ( localize(12031, "Reset Size")), undefined, this._scale !== CHAT_PET_DEFAULT_SCALE, () => {
+        const resetSize = actions.add(( new Action("chat.pet.resetSize", ( localize(14362, "Reset Size")), undefined, this._scale !== CHAT_PET_DEFAULT_SCALE, () => {
             this.chatPetService.resetScale();
-            status(( localize(12032, "VS Code pet size: {0} percent", CHAT_PET_DEFAULT_SCALE * 100)));
+            status(( localize(14363, "VS Code pet size: {0} percent", CHAT_PET_DEFAULT_SCALE * 100)));
         })));
-        const onTheRunAction = actions.add(( new Action("chat.pet.onTheRun", onTheRun ? ( localize(12033, "Come Back")) : ( localize(12034, "Go on the Run")), undefined, true, () => {
+        const onTheRunAction = actions.add(( new Action("chat.pet.onTheRun", onTheRun ? ( localize(14364, "Come Back")) : ( localize(14365, "Go on the Run")), undefined, true, () => {
             this._transientState.set(undefined, undefined);
             this.chatPetService.setOnTheRun(!onTheRun);
         })));
@@ -2218,8 +2508,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 shrink,
                 resetSize,
                 appearanceSeparator,
-                stable,
-                insiders
+                changeColor
             ],
             onHide: () => {
                 this._contextMenuVisible = false;
@@ -2272,17 +2561,24 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 x: direction * THROW_KEYBOARD_HORIZONTAL_VELOCITY,
                 y: -420
             });
-            status(direction < 0 ? ( localize(12035, "The VS Code pet was thrown toward the left wall")) : ( localize(12036, "The VS Code pet was thrown toward the right wall")));
+            status(direction < 0 ? ( localize(14366, "The VS Code pet was thrown toward the left wall")) : ( localize(14367, "The VS Code pet was thrown toward the right wall")));
             return;
         }
         this._hopController.request(direction, this._motionReduced);
-        status(direction < 0 ? ( localize(12037, "VS Code pet moved left")) : ( localize(12038, "VS Code pet moved right")));
+        status(direction < 0 ? ( localize(14368, "VS Code pet moved left")) : ( localize(14369, "VS Code pet moved right")));
     }
-    _getAriaLabel(onTheRun, achievementUnlocked) {
-        return achievementUnlocked ? ( localize(12039, "Open pet achievements. A new achievement is unlocked.")) : onTheRun ? ( localize(12040, "Bring back the VS Code pet")) : ( localize(
-            12041,
+    _getAriaLabel(onTheRun, achievementUnlocked, isGeneratingImage = false) {
+        if (achievementUnlocked) {
+            return localize(14370, "Open pet achievements. A new achievement is unlocked.");
+        }
+        if (onTheRun) {
+            return localize(14371, "Bring back the VS Code pet");
+        }
+        const label = ( localize(
+            14372,
             "Interact with the VS Code pet. Drag it around the chat, or flick it toward either side to throw it. While it is falling, catch it with the pointer to bounce it; while it is airborne, press Enter or Space to bounce it. Use the left and right arrow keys to make it hop, or hold Shift to throw it toward a wall. Use the context menu to put it on the run."
         ));
+        return isGeneratingImage ? ( localize(14373, "Painting an image. {0}", label)) : label;
     }
     _getCurrentLeft() {
         return this._button.element.offsetLeft;
@@ -2297,6 +2593,10 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this._button.element.style.height = `${displaySize}px`;
         this._visual.style.transform = `scale(${scale})`;
         this._updateBounceCounterPosition();
+        if (this._hostTransition.get()) {
+            this._updateHostTransition();
+            return;
+        }
         if (this._button.element.classList.contains("throwing")) {
             this._throwGeometryDirty = true;
         }
@@ -2392,6 +2692,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         const platformTop = this._getPlatformBounds().top;
         this._button.element.style.top = "auto";
         this._button.element.style.bottom = `calc(100% - ${platformTop - overlayBounds.top}px)`;
+        this._rememberHostPosition();
     }
     _setPlatformPosition(left) {
         this._setHorizontalPosition(left);
@@ -2407,6 +2708,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         const platformBounds = this._getPlatformBounds();
         this._button.element.style.top = `${platformBounds.top - overlayBounds.top - this._getDisplaySize()}px`;
         this._button.element.style.bottom = "auto";
+        this._rememberHostPosition();
     }
     _setDefaultPlatformPosition() {
         this._setDefaultHorizontalPosition();
@@ -2433,12 +2735,14 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         }
     }
     _updateRespawnEffectPosition() {
+        const transition = this._hostTransition.get();
+        const phase = transition?.phase ?? this._respawnPhase;
         const overlayBounds = this._overlay.getBoundingClientRect();
         const movementBounds = this.movementBounds.getBoundingClientRect();
         const displaySize = this._getDisplaySize();
         let left;
         let top;
-        if (this._respawnPhase === "despawning") {
+        if (phase === "despawning") {
             if (!this._deathPosition) {
                 return;
             }
@@ -2455,11 +2759,11 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 maximumTop
             );
             this._deathPosition = [left, top];
-        } else if (this._respawnPhase === "respawning") {
+        } else if (phase === "respawning") {
             const inputBounds = this.dragBounds.getBoundingClientRect();
             const minimumLeft = inputBounds.left - overlayBounds.left;
             const maximumLeft = inputBounds.right - overlayBounds.left - displaySize;
-            left = getChatPetDefaultHorizontalPosition(minimumLeft, maximumLeft);
+            left = transition ? this._getHostTransitionTarget().left - overlayBounds.left : getChatPetDefaultHorizontalPosition(minimumLeft, maximumLeft);
             top = movementBounds.top - overlayBounds.top;
             this._respawnPosition = [left, top];
         } else {
@@ -2479,18 +2783,19 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this._respawnFallScheduler.schedule(
             this._motionReduced ? RESPAWN_EFFECT_REDUCED_MOTION_DURATION : RESPAWN_EFFECT_DURATION
         );
-        status(( localize(12042, "The VS Code pet is respawning")));
+        status(( localize(14374, "The VS Code pet is respawning")));
     }
     _startRespawnEffectAnimation() {
-        if (this._respawnPhase !== "despawning" && this._respawnPhase !== "respawning") {
+        const transition = this._hostTransition.get();
+        const phase = transition?.phase ?? this._respawnPhase;
+        if (phase !== "despawning" && phase !== "respawning") {
             return;
         }
         const sources = getRespawnSpriteSources(this._variant);
         const source = this._motionReduced ? sources.reducedMotion : sources.animated;
         if (!isChatPetImageSource(this._respawnEffect.image, source.url)) {
             this._respawnAnimation.clear();
-            this._respawnEffect.image.removeAttribute("src");
-            this._respawnEffect.image.src = source.url;
+            setChatPetImageSource(this._respawnEffect.image, source.url);
             return;
         }
         if (this._respawnEffect.image.complete && this._respawnEffect.image.naturalWidth > 0) {
@@ -2499,8 +2804,8 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 source,
                 this._respawnEffect,
                 this._respawnAnimation,
-                undefined,
-                this._respawnPhase === "despawning"
+                transition ? () => this._completeHostTeleport() : undefined,
+                phase === "despawning"
             );
         }
     }
@@ -2565,7 +2870,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         ]);
     }
     _tryMouseBounce(now, previousCursorPosition) {
-        if (!this._enabled || this._motionReduced || this._isDead.get() || !this._isAirborne() || !this._cursorPosition) {
+        if (!this._enabled || this._motionReduced || this._isDead.get() || this._hostTransition.get() || !this._isAirborne() || !this._cursorPosition) {
             this._cursorContactingPet = false;
             return false;
         }
@@ -2630,7 +2935,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         };
     }
     _bounceAirbornePet(pointerX, pointerVelocity, requireDescending = false, collisionMotion) {
-        if (!this._enabled || this._motionReduced || this._isDead.get()) {
+        if (!this._enabled || this._motionReduced || this._isDead.get() || this._hostTransition.get()) {
             return false;
         }
         let bounced = false;
@@ -2653,7 +2958,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             this._bounceCounter.textContent = String(this._bounceCount);
             this._bounceCounter.classList.remove("hidden");
             this._updateBounceCounterPosition();
-            status(( localize(12043, "VS Code pet bounce count: {0}", this._bounceCount)));
+            status(( localize(14375, "VS Code pet bounce count: {0}", this._bounceCount)));
         }
         return bounced;
     }
@@ -2755,7 +3060,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         }
         this._setFacingDirection(direction);
         this._showTransientState("dizzy", false);
-        status(( localize(12044, "The VS Code pet got dizzy")));
+        status(( localize(14376, "The VS Code pet got dizzy")));
         return true;
     }
     _startEnableAnimation() {
@@ -2784,6 +3089,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this._updateSpeechBubblePosition();
     }
     _startDisableAnimation() {
+        this._finishHostTransition();
         this._blinkController.setEnabled(false);
         if (this._button.element.classList.contains("throwing")) {
             this._finishThrow(false);
@@ -2797,6 +3103,8 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         this._button.element.classList.add("exiting");
     }
     _finishDisable() {
+        this._finishHostTransition();
+        this._lastHostPosition = undefined;
         if (this._button.element.classList.contains("throwing")) {
             this._finishThrow(false);
         }
@@ -2861,7 +3169,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         }
     }
     _showTransientState(state, snapFacingToCursor = true) {
-        if (!this.chatPetService.enabled.get()) {
+        if (!this.chatPetService.enabled.get() || this._hostTransition.get()) {
             return;
         }
         if (this._transientState.get() === "achievementUnlocked" && state !== "achievementUnlocked") {
@@ -2907,7 +3215,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         if (state !== "idle" || useStaticSprite) {
             this._facingController.setState(state, useStaticSprite);
         }
-        const sources = getSpriteSources(this._variant)[state];
+        const sources = getChatPetSpriteSources(this._variant)[state];
         const source = this._motionReduced || useStaticSprite ? sources.reducedMotion : sources.animated;
         if (!restart && this._activeSprite && isChatPetImageSource(this._activeSprite.image, source.url)) {
             this._pendingRender = undefined;
@@ -2939,11 +3247,9 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             state,
             useStaticSprite
         };
-        sprite.image.removeAttribute("src");
-        sprite.image.src = source.url;
+        setChatPetImageSource(sprite.image, source.url);
         if (accessoryImage && accessorySource && accessoryImage !== cachedAccessoryImage) {
-            accessoryImage.removeAttribute("src");
-            accessoryImage.src = accessorySource.url;
+            setChatPetImageSource(accessoryImage, accessorySource.url);
         }
     }
     _getAccessoryImageSource() {
@@ -2967,6 +3273,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             `[ChatPetWidget] Failed to load pet sprite: ${pendingRender.bodySource.url}`
         );
         this._pendingRender = undefined;
+        this._finishHostTransition();
     }
     _onAccessoryImageLoad(sprite, image) {
         if (this._pendingRender?.sprite === sprite && this._pendingRender.accessoryImage === image) {
@@ -3011,6 +3318,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 `[ChatPetWidget] Invalid pet sprite dimensions: ${pendingRender.bodySource.url}`
             );
             this._pendingRender = undefined;
+            this._finishHostTransition();
             return;
         }
         if (pendingRender.accessorySource && pendingRender.accessoryImage) {
@@ -3068,6 +3376,9 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             this._clearUnusedAccessoryImages(previousSprite, pendingRender.accessorySource?.url);
         }
         this._restartEyeAnimation();
+        if (state === "falling") {
+            this._beginHostTransitionFall();
+        }
     }
     _switchAccessory(accessory) {
         const pendingRender = this._pendingRender;
@@ -3108,8 +3419,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             image,
             accessory
         };
-        image.removeAttribute("src");
-        image.src = source.url;
+        setChatPetImageSource(image, source.url);
     }
     _tryCompleteAccessorySwitch() {
         const pendingSwitch = this._pendingAccessorySwitch;
@@ -3208,6 +3518,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         onFrame,
         state
     ) {
+        sprite.color = this._color;
         const {
             frameDurations
         } = source;
@@ -3231,7 +3542,9 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             return;
         }
         context.imageSmoothingEnabled = false;
+        let renderedFrameIndex = 0;
         const drawFrame = frameIndex => {
+            renderedFrameIndex = frameIndex;
             if (state) {
                 const activeAccessory = sprite.activeAccessory ? getChatPetAccessory(sprite.activeAccessory) : undefined;
                 drawChatPetComposite(
@@ -3247,7 +3560,8 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                     source.fixedOrientationDecorations,
                     false,
                     activeAccessory?.eyeAccessoryMirrorsWithFacing !== false,
-                    activeAccessory?.coversAntennae === true
+                    activeAccessory?.coversAntennae === true,
+                    sprite.color
                 );
                 this._drawEyeAccessory(
                     sprite.activeAccessory,
@@ -3259,7 +3573,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             } else {
                 context.clearRect(0, 0, source.frameWidth, frameHeight);
                 context.drawImage(
-                    image,
+                    getChatPetColoredSprite(image, sprite.color),
                     frameIndex * source.frameWidth,
                     0,
                     source.frameWidth,
@@ -3275,7 +3589,13 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
             }
             onFrame?.(frameIndex);
         };
+        sprite.redrawFrame = () => {
+            if (image.complete && image.naturalWidth > 0 && isChatPetImageSource(image, source.url)) {
+                drawFrame(renderedFrameIndex);
+            }
+        };
         if (sprite === this._activeSprite) {
+            this._eyes.style.color = getChatPetEyeColor(sprite.color);
             this._redrawActiveFrame = () => drawFrame(this._activeFrameIndex);
             this._redrawEyeAccessory = state ? () => this._drawEyeAccessory(
                 sprite.activeAccessory,
@@ -3401,8 +3721,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
         const source = this._motionReduced ? sources.reducedMotion : sources.animated;
         if (!isChatPetImageSource(this._speechBubble.image, source.url)) {
             this._speechAnimation.clear();
-            this._speechBubble.image.removeAttribute("src");
-            this._speechBubble.image.src = source.url;
+            setChatPetImageSource(this._speechBubble.image, source.url);
             return;
         }
         if ((restart || stateChanged) && this._speechBubble.image.complete && this._speechBubble.image.naturalWidth > 0) {
@@ -3416,7 +3735,7 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
                 state === "achievementUnlocked" ? () => {
                     const context = this._speechBubble.canvas.getContext("2d");
                     if (context) {
-                        drawChatPetAchievementStar(context, this._variant);
+                        drawChatPetAchievementStar(context, this._speechBubble.color);
                     }
                 } : undefined
             );
@@ -3432,4 +3751,4 @@ let ChatPetWidget = class ChatPetWidget extends Disposable {
 };
 ChatPetWidget = ( __decorate([( __param(2, IChatPetService)), ( __param(3, IAccessibilityService)), ( __param(4, IContextMenuService)), ( __param(5, ICommandService)), ( __param(6, ILogService)), ( __param(7, IHostService))], ChatPetWidget));
 
-export { CHAT_PET_ACHIEVEMENT_UNLOCKED_DURATION, CHAT_PET_BOUNCE_RESULT_DURATION, CHAT_PET_CONFETTI_SCORE, CHAT_PET_CONFIRMATION_ATTENTION_DURATION, CHAT_PET_ICON_TRANSFORMATION_CHANCE, CHAT_PET_IDLE_SLEEP_DELAY, CHAT_PET_MOUSE_BOUNCE_RELEASE_GRACE_DURATION, CHAT_PET_OVERLAY_CLASS, CHAT_PET_SING_FIXED_ORIENTATION_DECORATIONS, CHAT_PET_WALL_IMPACT_DURATION, CHAT_PET_WINDOW_OWNERSHIP_CHANNEL, CHAT_PET_YAPPING_CHANCE, ChatPetBlinkController, ChatPetDirectionChangeController, ChatPetFacingController, ChatPetHopController, ChatPetWidget, advanceChatPetThrow, doesChatPetStateBlink, doesChatPetStateTrackCursor, drawChatPetAchievementStar, getChatPetAnchoredHorizontalPosition, getChatPetAnimationFrame, getChatPetBaseState, getChatPetBlinkDelay, getChatPetBuddyName, getChatPetClickInteraction, getChatPetDefaultHorizontalPosition, getChatPetDragPosition, getChatPetEyeAccessoryGazeOffset, getChatPetFallDuration, getChatPetFallTarget, getChatPetFrameDurations, getChatPetGazeDirection, getChatPetHorizontalAnchor, getChatPetHorizontalPosition, getChatPetListPadding, getChatPetMouseBounceVelocity, getChatPetMouseCollisionTime, getChatPetPillPlatformTop, getChatPetPlatformTop, getChatPetRelativeHorizontalPosition, getChatPetRenderedState, getChatPetRestoredHorizontalPosition, getChatPetScale, getChatPetSpriteName, getChatPetStackPlatformTop, getChatPetSweptPlatformTop, getChatPetThrowLanding, getChatPetThrowRotation, getChatPetThrowVelocity, getChatPetVerticalOffset, getChatPetWallReboundVelocity, getChatPetWideSpriteHorizontalOffset, isChatPetImageSource, isChatPetKeyboardInteractionEnabled, isChatPetMouseBounceEligible, isChatPetMouseBounceGracePeriodElapsed, isChatPetMouseContact, isChatPetVisible, isChatPetWindowActive, setChatPetWideLayerOffset, shouldCelebrateChatPetBounceScore, shouldClaimChatPetWindowOnConstruction, shouldDismissChatPetBounceResult, shouldPlaceChatPetSpeechBubbleLeft, shouldSettleChatPetThrow };
+export { CHAT_PET_ACHIEVEMENT_UNLOCKED_DURATION, CHAT_PET_BOUNCE_RESULT_DURATION, CHAT_PET_CONFETTI_SCORE, CHAT_PET_CONFIRMATION_ATTENTION_DURATION, CHAT_PET_ICON_TRANSFORMATION_CHANCE, CHAT_PET_IDLE_SLEEP_DELAY, CHAT_PET_MOUSE_BOUNCE_RELEASE_GRACE_DURATION, CHAT_PET_OVERLAY_CLASS, CHAT_PET_SING_FIXED_ORIENTATION_DECORATIONS, CHAT_PET_WALL_IMPACT_DURATION, CHAT_PET_WINDOW_OWNERSHIP_CHANNEL, CHAT_PET_YAPPING_CHANCE, ChatPetBlinkController, ChatPetDirectionChangeController, ChatPetFacingController, ChatPetHopController, ChatPetWidget, advanceChatPetThrow, doesChatPetStateBlink, doesChatPetStateTrackCursor, drawChatPetAchievementStar, getChatPetAnchoredHorizontalPosition, getChatPetAnimationFrame, getChatPetBaseState, getChatPetBlinkDelay, getChatPetBuddyName, getChatPetClickInteraction, getChatPetDefaultHorizontalPosition, getChatPetDragPosition, getChatPetEyeAccessoryGazeOffset, getChatPetFallDuration, getChatPetFallTarget, getChatPetFrameDurations, getChatPetGazeDirection, getChatPetHorizontalAnchor, getChatPetHorizontalPosition, getChatPetListPadding, getChatPetMouseBounceVelocity, getChatPetMouseCollisionTime, getChatPetPillPlatformTop, getChatPetPlatformTop, getChatPetRelativeHorizontalPosition, getChatPetRenderedState, getChatPetRestoredHorizontalPosition, getChatPetScale, getChatPetSpriteName, getChatPetSpriteSources, getChatPetStackPlatformTop, getChatPetSweptPlatformTop, getChatPetThrowLanding, getChatPetThrowRotation, getChatPetThrowVelocity, getChatPetVerticalOffset, getChatPetWallReboundVelocity, getChatPetWideSpriteHorizontalOffset, isChatPetImageSource, isChatPetKeyboardInteractionEnabled, isChatPetMouseBounceEligible, isChatPetMouseBounceGracePeriodElapsed, isChatPetMouseContact, isChatPetVisible, isChatPetWindowActive, setChatPetWideLayerOffset, shouldCelebrateChatPetBounceScore, shouldClaimChatPetWindowOnConstruction, shouldDismissChatPetBounceResult, shouldPlaceChatPetSpeechBubbleLeft, shouldSettleChatPetThrow };