diff --git a/packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts b/packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts
index 3ef10e970e1..9f1fb3beafc 100644
--- a/packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts
+++ b/packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts
@@ -35,4 +35,12 @@ export const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspecto
         ...BabylonWebResources,
         getExtensionModuleAsync: async () => await import("../services/panes/tools/reflectorService"),
     },
+    {
+        name: "Animation Retargeting",
+        description: "Retarget animations from one skeleton to another using AnimatorAvatar. Includes a dedicated 3D viewport with dual-camera preview.",
+        keywords: ["animation", "retargeting", "skeleton", "avatar", "bones"],
+        ...BabylonWebResources,
+        author: { name: "Babylon.js", forumUserName: "" },
+        getExtensionModuleAsync: async () => await import("../extensions/animationRetargeting/animationRetargetingExtension"),
+    },
 ]);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
new file mode 100644
index 00000000000..a9b9fefda21
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -0,0 +1,570 @@
+import { type Nullable } from "core/types";
+import { type ArcRotateCamera } from "core/Cameras/arcRotateCamera";
+import { type ShadowGenerator } from "core/Lights/Shadows/shadowGenerator";
+import { type Scene } from "core/scene";
+import { type AnimationGroup } from "core/Animations/animationGroup";
+import { type AbstractMesh } from "core/Meshes/abstractMesh";
+import { type TransformNode } from "core/Meshes/transformNode";
+import { type Vector3, type Quaternion, Matrix } from "core/Maths/math.vector";
+import { type Skeleton } from "core/Bones/skeleton";
+import { type RestPoseDataUpdate } from "./avatarManager";
+
+import { Color3 } from "core/Maths/math.color";
+import { StandardMaterial } from "core/Materials/standardMaterial";
+import { MeshBuilder } from "core/Meshes/meshBuilder";
+import { Mesh } from "core/Meshes/mesh";
+import { Observable } from "core/Misc/observable";
+import { GizmoManager } from "core/Gizmos/gizmoManager";
+import { GizmoCoordinatesMode } from "core/Gizmos/gizmo";
+import { UtilityLayerRenderer } from "core/Rendering/utilityLayerRenderer";
+import { SkeletonViewer } from "core/Debug/skeletonViewer";
+import { AppendSceneAsync } from "core/Loading/sceneLoader";
+import { CreateSkeletonFromTransformNodeHierarchy } from "core/Bones/skeleton.functions";
+
+// Side-effect import needed for scene.createPickingRay (prototype-augmented)
+import "core/Culling/ray";
+
+import { DistancePointToLine } from "./helperFunctions";
+import { type GizmoType } from "./avatar";
+
+const ShadowLayerMask = 0x20000000;
+
+type TransformNodeTransformations = Map<TransformNode, { position: Vector3; scaling: Vector3; quaternion: Quaternion }>;
+
+/**
+ * Manages the right-side animation source viewport.
+ * Mirrors the original animation.ts from the playground (no AnimatorAvatar — uses TransformNodes directly).
+ */
+export class AnimationSource {
+    private _animationGroup: Nullable<AnimationGroup> = null;
+    private _skeletonViewer: Nullable<SkeletonViewer> = null;
+    private _skeletonMesh: Nullable<Mesh> = null;
+    private _rootNode: Nullable<AbstractMesh> = null;
+    private _gizmoManager: GizmoManager;
+    private _gizmoSelectedNode: Nullable<Mesh> = null;
+    private _selectedTransformNode: Nullable<TransformNode> = null;
+    private _inRestPose = false;
+    private _initialTransformNodeTransformations: TransformNodeTransformations = new Map();
+    private _restPoseTransformNodeTransformations: TransformNodeTransformations = new Map();
+    private _retargetedTransformNodeTransformations: TransformNodeTransformations = new Map();
+
+    /**
+     *
+     */
+    public readonly onLoadedObservable = new Observable<void>();
+    /**
+     *
+     */
+    public readonly onGizmoNodeSelectedObservable = new Observable<string>();
+    /**
+     *
+     */
+    public readonly onPlayingObservable = new Observable<boolean>();
+
+    public get animationGroup(): Nullable<AnimationGroup> {
+        return this._animationGroup;
+    }
+    public get isLoaded(): boolean {
+        return this._animationGroup !== null;
+    }
+    /** True when the animation is actively playing (not in rest pose). */
+    public get isPlaying(): boolean {
+        return this._animationGroup !== null && !this._inRestPose;
+    }
+    public get selectedTransformNode(): Nullable<TransformNode> {
+        return this._selectedTransformNode;
+    }
+
+    public constructor(
+        private readonly _scene: Scene,
+        private readonly _camera: ArcRotateCamera,
+        private readonly _shadowGenerator: ShadowGenerator
+    ) {
+        this._gizmoManager = new GizmoManager(this._scene, undefined, new UtilityLayerRenderer(this._scene), new UtilityLayerRenderer(this._scene));
+        this._gizmoManager.keepDepthUtilityLayer.setRenderCamera(this._camera);
+        this._gizmoManager.utilityLayer.setRenderCamera(this._camera);
+        this._gizmoManager.usePointerToAttachGizmos = false;
+        this._gizmoManager.coordinatesMode = GizmoCoordinatesMode.Local;
+    }
+
+    public async loadAsync(path: string, restPoseUpdate?: RestPoseDataUpdate, skeletonRootNodeName?: string, animationGroupIndex = 0): Promise<void> {
+        this._cleanScene();
+        await this._loadFileAsync(path, restPoseUpdate, skeletonRootNodeName, animationGroupIndex);
+    }
+
+    public clearScene(): void {
+        this._cleanScene();
+    }
+
+    /** Returns a sorted list of transform node names targeted by the animation group.
+     * @returns Sorted list of transform node names.
+     */
+    public getTransformNodeNames(): string[] {
+        if (!this._animationGroup || !this._rootNode) {
+            return [];
+        }
+
+        const listUnsorted = new Set<string>();
+        const listSorted: string[] = [];
+        const listAllSorted: string[] = [];
+
+        for (const ta of this._animationGroup.targetedAnimations) {
+            if ((ta.target as TransformNode).getClassName?.() === "TransformNode") {
+                listUnsorted.add((ta.target as TransformNode).name);
+            }
+        }
+
+        this._rootNode.getChildTransformNodes(false).forEach((node) => {
+            if (node.getClassName() === "TransformNode") {
+                listAllSorted.push(node.name);
+            }
+        });
+
+        for (const name of listAllSorted) {
+            if (listUnsorted.has(name)) {
+                listSorted.push(name);
+            }
+        }
+
+        return listSorted;
+    }
+
+    /** Returns transform node options in hierarchy order, with indented labels for parenting.
+     * @returns Array of label/value pairs.
+     */
+    public getTransformNodeOptions(): { label: string; value: string }[] {
+        if (!this._animationGroup || !this._rootNode) {
+            return [];
+        }
+
+        const allNames = new Set(this.getTransformNodeNames());
+        // getChildTransformNodes(false) traverses in DFS order (parent before children)
+        const result: { label: string; value: string }[] = [];
+
+        this._rootNode.getChildTransformNodes(false).forEach((node) => {
+            if (!allNames.has(node.name)) {
+                return;
+            }
+            // Compute depth relative to _rootNode
+            let depth = 0;
+            let p = node.parent;
+            while (p && p !== this._rootNode) {
+                depth++;
+                p = p.parent;
+            }
+            const indent = "\u00A0\u00A0".repeat(depth);
+            result.push({ label: indent + node.name, value: node.name });
+        });
+
+        return result;
+    }
+
+    /** Called just before retargeting; saves the current rest-pose state. */
+    public prepareRetargeting(): void {
+        if (this._inRestPose) {
+            this._restPoseTransformNodeTransformations.clear();
+            this._saveTransformNodes(this._restPoseTransformNodeTransformations);
+        } else {
+            this._restoreTransformNodes(this._restPoseTransformNodeTransformations);
+        }
+        this._retargetedTransformNodeTransformations.clear();
+        this._saveTransformNodes();
+    }
+
+    /** Builds the rest-pose export data for the playground code generator.
+     * @param restPoseUpdate - Optional existing rest-pose data.
+     * @returns The rest-pose data update array.
+     */
+    public buildExportData(restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
+        return restPoseUpdate ? [...restPoseUpdate] : [];
+    }
+
+    public play(speed: number): void {
+        if (!this._animationGroup) {
+            return;
+        }
+        this._animationGroup.stop();
+        this._animationGroup.start(true, speed);
+        this._inRestPose = false;
+        this.onPlayingObservable.notifyObservers(true);
+    }
+
+    public setAnimSpeed(speed: number): void {
+        if (this._animationGroup) {
+            this._animationGroup.speedRatio = speed;
+        }
+    }
+
+    public returnToRest(): void {
+        if (!this._animationGroup) {
+            return;
+        }
+        this._animationGroup.stop();
+        this._restoreTransformNodes(this._restPoseTransformNodeTransformations);
+        this._inRestPose = true;
+        this.onPlayingObservable.notifyObservers(false);
+    }
+
+    /**
+     * Captures the current transform node transformations (while in rest pose, possibly edited via gizmo)
+     * as a `RestPoseDataUpdate`. All transform node transformations are saved as absolute values.
+     * @returns The rest-pose data update array.
+     */
+    public saveAsRestPose(): RestPoseDataUpdate {
+        const result: RestPoseDataUpdate = [];
+        if (!this._rootNode) {
+            return result;
+        }
+        this._rootNode.getChildTransformNodes(false).forEach((node) => {
+            if (!node.rotationQuaternion) {
+                return;
+            }
+            const data: { position?: number[]; scaling?: number[]; quaternion?: number[] } = {};
+            data.position = node.position.asArray();
+            data.scaling = node.scaling.asArray();
+            data.quaternion = node.rotationQuaternion.asArray();
+            result.push({ name: node.name, data });
+        });
+        // Update internal rest pose baseline
+        this._restPoseTransformNodeTransformations.clear();
+        this._saveTransformNodes(this._restPoseTransformNodeTransformations);
+        return result;
+    }
+
+    public setSkeletonVisible(visible: boolean): void {
+        this._skeletonShow(visible);
+    }
+
+    public setSkeletonLocalAxes(visible: boolean): void {
+        this._skeletonShowLocalAxes(visible);
+    }
+
+    public setGizmo(enabled: boolean, type: GizmoType): void {
+        this._updateGizmoEnabled(enabled, type);
+    }
+
+    /** Attaches the gizmo to the transform node with the given name (called when user picks from the dropdown).
+     * @param nodeName - The name of the transform node to attach the gizmo to.
+     */
+    public attachGizmoToTransformNode(nodeName: string): void {
+        if (!this._rootNode) {
+            return;
+        }
+        const node = this._rootNode.getChildTransformNodes(false, (n) => n.name === nodeName)[0];
+        if (!node) {
+            return;
+        }
+        if (this._gizmoSelectedNode) {
+            this._gizmoSelectedNode.position.copyFrom(node.absolutePosition);
+        }
+        this._selectedTransformNode = node;
+        this._gizmoManager.attachToNode(node);
+    }
+
+    public handleBoneClick(x: number, y: number): void {
+        if (!this._rootNode) {
+            return;
+        }
+        const ray = this._scene.createPickingRay(x, y, Matrix.Identity(), this._camera, false);
+        let selectedNode: Nullable<TransformNode> = null;
+        let minDistance = Number.POSITIVE_INFINITY;
+
+        this._rootNode.getChildTransformNodes(false).forEach((node) => {
+            const d = DistancePointToLine(node.absolutePosition, ray.origin, ray.direction);
+            if (d < minDistance) {
+                minDistance = d;
+                selectedNode = node;
+                if (this._gizmoSelectedNode) {
+                    this._gizmoSelectedNode.position.copyFrom(node.absolutePosition);
+                }
+            }
+        });
+
+        if (selectedNode) {
+            this._selectedTransformNode = selectedNode as TransformNode;
+            this._gizmoManager.attachToNode(selectedNode as TransformNode);
+            this.onGizmoNodeSelectedObservable.notifyObservers((selectedNode as TransformNode).name);
+        }
+    }
+
+    public dispose(): void {
+        this._cleanScene();
+        this._gizmoSelectedNode?.dispose();
+        this._gizmoSelectedNode = null;
+        this._gizmoManager.dispose();
+    }
+
+    private async _loadFileAsync(path: string, restPoseUpdate?: RestPoseDataUpdate, skeletonRootNodeName?: string, animationGroupIndex = 0): Promise<void> {
+        // Track meshes before loading so we can identify newly added ones
+        const meshesBefore = new Set(this._scene.meshes);
+
+        if (path.startsWith("file:")) {
+            await AppendSceneAsync(path.substring(5), this._scene, { rootUrl: "file:" });
+        } else {
+            await AppendSceneAsync(path, this._scene);
+        }
+
+        // Find the newly added root node (avoid collision with existing nodes named "__root__")
+        this._rootNode = null;
+        for (const mesh of this._scene.meshes) {
+            if (!meshesBefore.has(mesh) && !mesh.parent) {
+                this._rootNode = mesh;
+                break;
+            }
+        }
+        if (!this._rootNode) {
+            return;
+        }
+        this._rootNode.name = "reference";
+
+        // Dispose ALL newly added meshes except the animation root node itself.
+        // The animation side only needs transform nodes for the skeleton, not meshes.
+        // This also cleans up duplicate avatar meshes from serialized PG scene data.
+        for (const mesh of [...this._scene.meshes]) {
+            if (!meshesBefore.has(mesh) && mesh !== this._rootNode) {
+                mesh.dispose(false, false);
+            }
+        }
+
+        // Keep only our 2 cameras; remove any cameras loaded from the file
+        while (this._scene.cameras.length > 2) {
+            this._scene.cameras[2].dispose();
+        }
+
+        // Keep only the animation group at the requested index (skip "avatar" retargeted ones)
+        this._animationGroup = null;
+        const lstAnimDelete = new Set<AnimationGroup>();
+        let currentIndex = 0;
+        for (const animGroup of this._scene.animationGroups) {
+            if (animGroup.name !== "avatar") {
+                if (currentIndex === animationGroupIndex) {
+                    this._animationGroup = animGroup;
+                } else {
+                    lstAnimDelete.add(animGroup);
+                }
+                currentIndex++;
+            }
+        }
+        lstAnimDelete.forEach((anim) => anim.dispose());
+
+        if (!this._animationGroup) {
+            return;
+        }
+        this._animationGroup.name = "reference";
+        this._animationGroup.stop();
+
+        // Delete all skeletons loaded from the animation file (we don't need them)
+        const skeletonsDelete = new Set<Skeleton>();
+        for (const skeleton of this._scene.skeletons) {
+            if (skeleton.name !== "avatar") {
+                skeletonsDelete.add(skeleton);
+            }
+        }
+        skeletonsDelete.forEach((skeleton) => skeleton.dispose());
+
+        // Delete all meshes under the root node (animation files only need transform nodes)
+        this._rootNode
+            .getChildren((node) => node instanceof Mesh, false)
+            .forEach((mesh) => {
+                (mesh as Mesh).dispose();
+            });
+
+        // Use the user-selected root node, or fall back to hips heuristic
+        let skeletonRoot: TransformNode = this._rootNode;
+        if (skeletonRootNodeName) {
+            const found = this._rootNode.getChildTransformNodes(false, (node) => node.name === skeletonRootNodeName)[0];
+            if (found) {
+                skeletonRoot = found;
+            }
+        } else {
+            // Legacy heuristic: find hips/pelvis node
+            let hipsNode: Nullable<TransformNode> = this._rootNode.getChildTransformNodes(false, (node) => node.name === "mixamorig:Hips")?.[0] ?? null;
+            if (!hipsNode) {
+                hipsNode = this._rootNode.getChildTransformNodes(false, (node) => node.name === "Hips")[0] ?? null;
+            }
+            if (!hipsNode) {
+                hipsNode = this._rootNode.getChildTransformNodes(false, (node) => node.name.toLowerCase().indexOf("hips") >= 0)[0] ?? null;
+            }
+            if (!hipsNode) {
+                hipsNode = this._rootNode.getChildTransformNodes(false, (node) => node.name.toLowerCase().indexOf("pelvis") >= 0)[0] ?? null;
+            }
+            if (hipsNode) {
+                skeletonRoot = hipsNode;
+            }
+        }
+
+        // Create a skeleton + visualization mesh from the transform node hierarchy
+        const meshOptions: { name?: string; boneMeshSize?: number; createMesh?: boolean; mesh?: Mesh } = {
+            name: "reference",
+            boneMeshSize: 0.0001,
+            createMesh: true,
+        };
+
+        const animSkeleton = CreateSkeletonFromTransformNodeHierarchy(skeletonRoot, this._scene, meshOptions);
+        const meshAnim = meshOptions.mesh!;
+        this._skeletonMesh = meshAnim;
+        meshAnim.layerMask = ShadowLayerMask;
+        meshAnim.isVisible = false;
+
+        // Auto-scale the animation hierarchy to fit the viewport (~2 units)
+        const boundingVectors = meshAnim.getHierarchyBoundingVectors(true);
+        const extendSize = boundingVectors.max.subtract(boundingVectors.min);
+        const maxDim = Math.max(extendSize.x, extendSize.y, extendSize.z);
+
+        if (maxDim > 3 || maxDim < 0.1) {
+            const scaleRatio = 2 / maxDim;
+            const s = this._rootNode.scaling;
+            this._rootNode.scaling.set(Math.sign(s.x) * scaleRatio, Math.sign(s.y) * scaleRatio, Math.sign(s.z) * scaleRatio);
+        }
+
+        const initialNode = skeletonRoot;
+        this._selectedTransformNode = initialNode;
+        this._gizmoManager.attachToNode(initialNode);
+        this.onGizmoNodeSelectedObservable.notifyObservers(initialNode.name);
+
+        const meshAnimExtendSize = meshAnim.getBoundingInfo().boundingBox.extendSizeWorld;
+
+        const skeletonViewer = new SkeletonViewer(animSkeleton, meshAnim, this._scene, undefined, 0, {
+            displayMode: SkeletonViewer.DISPLAY_SPHERE_AND_SPURS,
+            displayOptions: {
+                showLocalAxes: false,
+                localAxesSize: Math.max(meshAnimExtendSize.x, meshAnimExtendSize.y, meshAnimExtendSize.z) * 5,
+            },
+        });
+        this._skeletonViewer = skeletonViewer;
+        skeletonViewer.isEnabled = false;
+        skeletonViewer.utilityLayer!.setRenderCamera(this._camera);
+        this._skeletonDebugMeshSet();
+
+        const utilScene = skeletonViewer.utilityLayer!.utilityLayerScene!;
+        const mat = new StandardMaterial("selectedBoneMatAnim", utilScene);
+        mat.emissiveColor = Color3.Red();
+        mat.disableLighting = true;
+
+        this._gizmoSelectedNode?.dispose();
+        this._gizmoSelectedNode = MeshBuilder.CreateSphere("selectedTransformNode", { diameter: 0.07, segments: 10 }, utilScene);
+        this._gizmoSelectedNode.setEnabled(false);
+        this._gizmoSelectedNode.material = mat;
+        this._gizmoSelectedNode.layerMask = ShadowLayerMask;
+        this._gizmoSelectedNode.renderingGroupId = 3;
+        this._gizmoSelectedNode.position.copyFrom(initialNode.absolutePosition);
+
+        if (restPoseUpdate && restPoseUpdate.length > 0) {
+            this._applyRestPoseUpdate(restPoseUpdate);
+        }
+
+        this._initialTransformNodeTransformations.clear();
+        this._restPoseTransformNodeTransformations.clear();
+        this._saveTransformNodes(this._initialTransformNodeTransformations);
+        this._saveTransformNodes(this._restPoseTransformNodeTransformations);
+        this._animationGroup.speedRatio = 1;
+
+        this._inRestPose = false;
+
+        this.onLoadedObservable.notifyObservers();
+    }
+
+    private _skeletonShow(visible: boolean): void {
+        if (!this._skeletonViewer) {
+            return;
+        }
+        this._skeletonViewer.isEnabled = visible;
+        this._skeletonDebugMeshSet();
+    }
+
+    private _skeletonShowLocalAxes(visible: boolean): void {
+        if (!this._skeletonViewer) {
+            return;
+        }
+        this._skeletonViewer.changeDisplayOptions("showLocalAxes", visible);
+        this._skeletonDebugMeshSet();
+    }
+
+    private _gizmoShow(show: boolean): void {
+        if (this._gizmoSelectedNode) {
+            this._gizmoSelectedNode.setEnabled(show);
+        }
+    }
+
+    private _updateGizmoEnabled(enabled: boolean, type: GizmoType): void {
+        this._gizmoManager.positionGizmoEnabled = enabled && type === "Position";
+        this._gizmoManager.rotationGizmoEnabled = enabled && type === "Rotation";
+        this._gizmoManager.scaleGizmoEnabled = enabled && type === "Scale";
+        this._gizmoShow(enabled);
+    }
+
+    private _skeletonDebugMeshSet(): void {
+        if (!this._skeletonViewer?.debugMesh) {
+            return;
+        }
+        this._skeletonViewer.debugMesh.layerMask = ShadowLayerMask;
+        this._skeletonViewer.debugMesh.alwaysSelectAsActiveMesh = true;
+        this._shadowGenerator.addShadowCaster(this._skeletonViewer.debugMesh);
+        if (this._skeletonViewer.debugLocalAxesMesh) {
+            this._skeletonViewer.debugLocalAxesMesh.layerMask = ShadowLayerMask;
+            this._skeletonViewer.debugLocalAxesMesh.alwaysSelectAsActiveMesh = true;
+        }
+    }
+
+    private _saveTransformNodes(map?: TransformNodeTransformations): void {
+        if (!this._rootNode) {
+            return;
+        }
+        map = map ?? this._retargetedTransformNodeTransformations;
+        this._rootNode.getChildTransformNodes(false).forEach((node) => {
+            if (!node.rotationQuaternion) {
+                return;
+            }
+            map!.set(node, {
+                position: node.position.clone(),
+                scaling: node.scaling.clone(),
+                quaternion: node.rotationQuaternion.clone(),
+            });
+        });
+    }
+
+    private _restoreTransformNodes(map?: TransformNodeTransformations): void {
+        map = map ?? this._retargetedTransformNodeTransformations;
+        map.forEach((transformation, tn) => {
+            tn.position = transformation.position.clone();
+            tn.scaling = transformation.scaling.clone();
+            tn.rotationQuaternion = transformation.quaternion.clone();
+            tn.computeWorldMatrix(true);
+        });
+    }
+
+    private _applyRestPoseUpdate(restPoseUpdate: RestPoseDataUpdate): void {
+        if (!this._rootNode) {
+            return;
+        }
+        for (const dataBlock of restPoseUpdate) {
+            const node = this._rootNode.getChildTransformNodes(false, (node) => node.name === dataBlock.name)[0];
+            if (node) {
+                if (dataBlock.data.position) {
+                    node.position.fromArray(dataBlock.data.position);
+                }
+                if (dataBlock.data.scaling) {
+                    node.scaling.fromArray(dataBlock.data.scaling);
+                }
+                if (dataBlock.data.quaternion) {
+                    node.rotationQuaternion!.fromArray(dataBlock.data.quaternion);
+                }
+            }
+        }
+    }
+
+    private _cleanScene(): void {
+        this._animationGroup?.dispose();
+        if (this._skeletonViewer) {
+            this._skeletonViewer.skeleton.dispose();
+            this._skeletonViewer.dispose();
+            this._skeletonViewer = null;
+        }
+        this._skeletonMesh?.dispose();
+        this._skeletonMesh = null;
+        this._rootNode?.dispose(false, true);
+        this._animationGroup = null;
+        this._rootNode = null;
+        this._selectedTransformNode = null;
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
new file mode 100644
index 00000000000..f3f76bfa8c3
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -0,0 +1,516 @@
+import { type ISettingsStore, type SettingDescriptor } from "../../services/settingsStore";
+import { type RestPoseDataUpdate } from "./avatarManager";
+
+const IDBName = "BabylonInspector_AnimRetargeting";
+const IDBStore = "animationFiles";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/** Maps an animation group (by its index in scene.animationGroups) to a user-chosen display name. */
+export type AnimationGroupMapping = {
+    /** The index of the AnimationGroup in scene.animationGroups — stable across reloads of the same file. */
+    index: number;
+    /** The original AnimationGroup.name from the file. */
+    groupName: string;
+    /** User-chosen display name shown in the main UI dropdown. Empty = not included. */
+    displayName: string;
+};
+
+export type StoredAnimation = {
+    /** Unique, immutable identifier generated at creation time. Used as the IndexedDB key prefix. */
+    id: string;
+    /** User-chosen name for this animation file entry (shown in the list). */
+    name: string;
+    /**
+     *
+     */
+    source: "url" | "file" | "scene";
+    /**
+     *
+     */
+    url?: string;
+    /**
+     *
+     */
+    fileNames?: string[];
+    /**
+     *
+     */
+    namingScheme: string;
+    /** User-selected root node for skeleton creation. */
+    rootNodeName: string;
+    /** One entry per animation group in the file. */
+    animations: AnimationGroupMapping[];
+    /**
+     *
+     */
+    restPoseUpdate?: RestPoseDataUpdate;
+    /** When true, this entry is transient and will be purged on next startup. */
+    sessionOnly?: boolean;
+};
+
+type SerializedData = {
+    animations: StoredAnimation[];
+};
+
+const AnimationSettingDescriptor: SettingDescriptor<SerializedData> = {
+    key: "AnimRetargeting/Animations",
+    defaultValue: { animations: [] },
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function GenerateId(): string {
+    return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+async function BlobToBase64(blob: Blob): Promise<string> {
+    return await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            const result = reader.result as string;
+            resolve(result.substring(result.indexOf(",") + 1));
+        };
+        reader.onerror = () => reject(new Error("Failed to read blob"));
+        reader.readAsDataURL(blob);
+    });
+}
+
+function Base64ToBlob(base64: string): Blob {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return new Blob([bytes]);
+}
+
+// ─── IndexedDB helpers ────────────────────────────────────────────────────────
+
+async function OpenIDB(): Promise<IDBDatabase> {
+    return await new Promise((resolve, reject) => {
+        const request = indexedDB.open(IDBName, 2);
+        request.onupgradeneeded = () => {
+            const db = request.result;
+            if (!db.objectStoreNames.contains("avatarFiles")) {
+                db.createObjectStore("avatarFiles");
+            }
+            if (!db.objectStoreNames.contains(IDBStore)) {
+                db.createObjectStore(IDBStore);
+            }
+        };
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error ?? new Error("IDB open failed"));
+    });
+}
+
+async function IdbPut(key: string, value: Blob): Promise<void> {
+    const db = await OpenIDB();
+    return await new Promise((resolve, reject) => {
+        const tx = db.transaction(IDBStore, "readwrite");
+        tx.objectStore(IDBStore).put(value, key);
+        tx.oncomplete = () => {
+            db.close();
+            resolve();
+        };
+        tx.onerror = () => {
+            db.close();
+            reject(tx.error ?? new Error("IDB transaction failed"));
+        };
+    });
+}
+
+async function IdbGet(key: string): Promise<Blob | undefined> {
+    const db = await OpenIDB();
+    return await new Promise((resolve, reject) => {
+        const tx = db.transaction(IDBStore, "readonly");
+        const req = tx.objectStore(IDBStore).get(key);
+        req.onsuccess = () => {
+            db.close();
+            resolve(req.result as Blob | undefined);
+        };
+        req.onerror = () => {
+            db.close();
+            reject(req.error ?? new Error("IDB get failed"));
+        };
+    });
+}
+
+async function IdbDeletePrefix(prefix: string): Promise<void> {
+    const db = await OpenIDB();
+    return await new Promise((resolve, reject) => {
+        const tx = db.transaction(IDBStore, "readwrite");
+        const store = tx.objectStore(IDBStore);
+        const cursorReq = store.openCursor();
+        cursorReq.onsuccess = () => {
+            const cursor = cursorReq.result;
+            if (cursor) {
+                if (typeof cursor.key === "string" && cursor.key.startsWith(prefix)) {
+                    cursor.delete();
+                }
+                cursor.continue();
+            }
+        };
+        tx.oncomplete = () => {
+            db.close();
+            resolve();
+        };
+        tx.onerror = () => {
+            db.close();
+            reject(tx.error ?? new Error("IDB transaction failed"));
+        };
+    });
+}
+
+// ─── AnimationManager ─────────────────────────────────────────────────────────
+
+/**
+ *
+ */
+export class AnimationManager {
+    private _animations: StoredAnimation[] = [];
+
+    public constructor(private readonly _settingsStore: ISettingsStore) {
+        this._loadFromStorage();
+    }
+
+    // ─── Public API ───────────────────────────────────────────────────────────
+
+    public getAllAnimations(): readonly StoredAnimation[] {
+        return this._animations;
+    }
+
+    /** Returns all non-empty display names across all stored animation files.
+     * @returns Array of display name strings.
+     */
+    public getAllDisplayNames(): string[] {
+        const names: string[] = [];
+        for (const entry of this._animations) {
+            for (const mapping of entry.animations) {
+                if (mapping.displayName) {
+                    names.push(mapping.displayName);
+                }
+            }
+        }
+        return names;
+    }
+
+    /** Finds the stored animation file and specific mapping for a given display name.
+     * @param displayName - The display name to look up.
+     * @returns The stored animation entry and mapping, or undefined.
+     */
+    public getByDisplayName(displayName: string):
+        | {
+              /**
+               *
+               */
+              entry: StoredAnimation /**
+               *
+               */;
+              mapping: AnimationGroupMapping;
+          }
+        | undefined {
+        if (!displayName) {
+            return undefined;
+        }
+        for (const entry of this._animations) {
+            for (const mapping of entry.animations) {
+                if (mapping.displayName === displayName) {
+                    return { entry, mapping };
+                }
+            }
+        }
+        return undefined;
+    }
+
+    public getAnimationById(id: string): StoredAnimation | undefined {
+        return this._animations.find((a) => a.id === id);
+    }
+
+    /** Checks whether a display name is already used by any animation (optionally excluding a specific file id).
+     * @param displayName - The display name to check.
+     * @param excludeFileId - Optional file id to exclude from the check.
+     * @returns True if the display name is already in use.
+     */
+    public isDisplayNameUsed(displayName: string, excludeFileId?: string): boolean {
+        for (const entry of this._animations) {
+            if (excludeFileId && entry.id === excludeFileId) {
+                continue;
+            }
+            for (const mapping of entry.animations) {
+                if (mapping.displayName === displayName) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Adds or replaces an animation.
+     * If the animation has no `id`, one is generated automatically.
+     * For file-based animations, the files must already be stored in IndexedDB via `storeFilesAsync`.
+     * @param animation - The animation to add or replace.
+     */
+    public addAnimation(animation: StoredAnimation): void {
+        if (!animation.id) {
+            animation.id = GenerateId();
+        }
+        const idx = this._animations.findIndex((a) => a.id === animation.id);
+        if (idx !== -1) {
+            this._animations[idx] = animation;
+        } else {
+            this._animations.push(animation);
+        }
+        this._saveToStorage();
+    }
+
+    /**
+     * Removes an animation by id and its associated files from IndexedDB.
+     * @param id - The animation id to remove.
+     */
+    public async removeAnimationAsync(id: string): Promise<void> {
+        const animation = this._animations.find((a) => a.id === id);
+        if (!animation) {
+            return;
+        }
+        if (animation.source === "file") {
+            await IdbDeletePrefix(`animation:${id}/`);
+        }
+        this._animations = this._animations.filter((a) => a.id !== id);
+        this._saveToStorage();
+    }
+
+    /**
+     * Stores files in IndexedDB for a file-based animation, keyed by its immutable id.
+     * @param animationId - The animation id.
+     * @param files - The files to store.
+     * @returns The list of file names stored.
+     */
+    public async storeFilesAsync(animationId: string, files: File[]): Promise<string[]> {
+        const fileNames: string[] = [];
+        await Promise.all(
+            files.map(async (file) => {
+                const key = `animation:${animationId}/${file.name}`;
+                await IdbPut(key, file);
+                fileNames.push(file.name);
+            })
+        );
+        return fileNames;
+    }
+
+    /**
+     * Retrieves files from IndexedDB for a file-based animation and converts them to File objects.
+     * @param animationId - The animation id.
+     * @param fileNames - The file names to retrieve.
+     * @returns Array of File objects.
+     */
+    public async getFilesAsync(animationId: string, fileNames: string[]): Promise<File[]> {
+        const results = await Promise.all(
+            fileNames.map(async (fileName) => {
+                const key = `animation:${animationId}/${fileName}`;
+                const blob = await IdbGet(key);
+                if (blob) {
+                    return new File([blob], fileName, { type: blob.type });
+                }
+                return undefined;
+            })
+        );
+        return results.filter((f): f is File => f !== undefined);
+    }
+
+    /**
+     * Returns all animations in a JSON-serializable format, including base64-encoded file data for file-based entries.
+     * Session-only entries are excluded from the export.
+     * @returns Array of stored animations with optional file data.
+     */
+    public async exportDataAsync(): Promise<
+        Array<
+            StoredAnimation & {
+                /**
+                 *
+                 */
+                fileData?: Record<string, string>;
+            }
+        >
+    > {
+        return await Promise.all(
+            this._animations
+                .filter((animation) => !animation.sessionOnly)
+                .map(async (animation) => {
+                    const entry: StoredAnimation & {
+                        /**
+                         *
+                         */
+                        fileData?: Record<string, string>;
+                    } = { ...animation };
+                    if (animation.source === "file" && animation.fileNames?.length) {
+                        const files = await this.getFilesAsync(animation.id, animation.fileNames);
+                        const pairs = await Promise.all(files.map(async (file) => [file.name, await BlobToBase64(file)] as const));
+                        const fileData: Record<string, string> = {};
+                        for (const [name, b64] of pairs) {
+                            fileData[name] = b64;
+                        }
+                        entry.fileData = fileData;
+                    }
+                    return entry;
+                })
+        );
+    }
+
+    /**
+     * Imports animations, including restoring file-based entries to IndexedDB from base64 data.
+     * @param animations - The animations to import with optional file data.
+     * @param mode - "replace" clears all existing data first; "append" skips duplicates.
+     * @returns List of skipped entry descriptions.
+     */
+    public async importDataAsync(
+        animations: Array<
+            StoredAnimation & {
+                /**
+                 *
+                 */
+                fileData?: Record<string, string>;
+            }
+        >,
+        mode: "replace" | "append"
+    ): Promise<string[]> {
+        const skipped: string[] = [];
+
+        if (mode === "replace") {
+            this._animations = [];
+        }
+
+        // Sequential processing needed: each entry may depend on prior state for duplicate detection
+        for (const animation of animations) {
+            if (mode === "append" && this._animations.some((a) => a.name === animation.name)) {
+                skipped.push(`animation "${animation.name}"`);
+            } else {
+                const newId = GenerateId();
+                const { fileData, ...animData } = animation;
+                this._animations.push({ ...animData, id: newId });
+
+                if (animData.source === "file" && fileData) {
+                    const fileEntries = Object.entries(fileData);
+                    // eslint-disable-next-line no-await-in-loop
+                    await Promise.all(
+                        fileEntries.map(async ([fileName, base64]) => {
+                            const blob = Base64ToBlob(base64);
+                            await IdbPut(`animation:${newId}/${fileName}`, blob);
+                        })
+                    );
+                    this._animations[this._animations.length - 1].fileNames = fileEntries.map(([n]) => n);
+                }
+            }
+        }
+
+        this._saveToStorage();
+        return skipped;
+    }
+
+    /**
+     * Creates default animation entries if the list is empty.
+     */
+    public createDefaults(): void {
+        if (this._animations.length > 0) {
+            return;
+        }
+        const baseUrl = "https://assets.babylonjs.com/mixamo/Animations/";
+        const defaults: {
+            /**
+             *
+             */
+            name: string /**
+             *
+             */;
+            file: string /**
+             *
+             */;
+            scheme: string /**
+             *
+             */;
+            displayName: string /**
+             *
+             */;
+            rootNode: string;
+        }[] = [
+            { name: "Rumba Dancing", file: "Rumba Dancing.glb", scheme: "Mixamo", displayName: "Rumba Dancing", rootNode: "mixamorig:Hips" },
+            { name: "Hip Hop Dancing", file: "Hip Hop Dancing.glb", scheme: "Mixamo", displayName: "Hip Hop Dancing", rootNode: "mixamorig:Hips" },
+            { name: "Sitting Clap", file: "Sitting Clap.glb", scheme: "Mixamo", displayName: "Sitting Clap", rootNode: "mixamorig:Hips" },
+            { name: "Walking", file: "Walking.glb", scheme: "Mixamo", displayName: "Walking", rootNode: "mixamorig:Hips" },
+            { name: "Catwalk Walking", file: "Catwalk Walking.glb", scheme: "Mixamo", displayName: "Catwalk Walking", rootNode: "mixamorig:Hips" },
+            { name: "Praying", file: "Praying.glb", scheme: "Mixamo", displayName: "Praying", rootNode: "mixamorig:Hips" },
+            { name: "Mousey Walking", file: "Mousey_walking.glb", scheme: "Mixamo", displayName: "Mousey Walking", rootNode: "mixamorig:Hips" },
+        ];
+        for (const d of defaults) {
+            this.addAnimation({
+                id: "",
+                name: d.name,
+                source: "url",
+                url: baseUrl + d.file,
+                namingScheme: d.scheme,
+                rootNodeName: d.rootNode,
+                animations: [{ index: 0, groupName: d.displayName, displayName: d.displayName }],
+            });
+        }
+    }
+
+    /**
+     * Removes all session-only entries and saves the updated list.
+     */
+    public purgeSessionOnly(): void {
+        const before = this._animations.length;
+        this._animations = this._animations.filter((a) => !a.sessionOnly);
+        if (this._animations.length !== before) {
+            this._saveToStorage();
+        }
+    }
+
+    // ─── Private ──────────────────────────────────────────────────────────────
+
+    private _loadFromStorage(): void {
+        try {
+            const data = this._settingsStore.readSetting(AnimationSettingDescriptor);
+            // Migrate old format: entries with `animationGroupName` but no `animations` array
+            this._animations = (data.animations ?? []).map(
+                (
+                    entry: StoredAnimation & {
+                        /**
+                         *
+                         */
+                        animationGroupName?: string;
+                    }
+                ) => {
+                    if (!entry.animations) {
+                        entry.animations = [];
+                        if (entry.animationGroupName) {
+                            entry.animations.push({
+                                index: 0,
+                                groupName: entry.animationGroupName,
+                                displayName: entry.name || entry.animationGroupName,
+                            });
+                        }
+                        if (!entry.name) {
+                            entry.name = entry.animationGroupName ?? "Unnamed";
+                        }
+                        delete entry.animationGroupName;
+                    }
+                    if (!entry.name) {
+                        entry.name = "Unnamed";
+                    }
+                    if (!entry.rootNodeName) {
+                        entry.rootNodeName = "";
+                    }
+                    return entry as StoredAnimation;
+                }
+            );
+        } catch {
+            this._animations = [];
+        }
+    }
+
+    private _saveToStorage(): void {
+        const data: SerializedData = { animations: this._animations };
+        this._settingsStore.writeSetting(AnimationSettingDescriptor, data);
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
new file mode 100644
index 00000000000..0efc2dccd30
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -0,0 +1,202 @@
+import { type IDisposable } from "core/index";
+import { type Engine } from "core/Engines/engine";
+import { type ServiceDefinition } from "../../modularity/serviceDefinition";
+import { type IShellService, ShellServiceIdentity } from "../../services/shellService";
+import { type ISettingsStore, SettingsStoreIdentity } from "../../services/settingsStore";
+import { type ISceneContext, SceneContextIdentity } from "../../services/sceneContext";
+import { type IPlaygroundBridge, PlaygroundBridgeIdentity } from "../../services/playgroundBridgeService";
+
+import { type IObserver, Observable } from "core/Misc/observable";
+
+import { PersonRunningRegular } from "@fluentui/react-icons";
+
+import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
+import { AnimationRetargetingPanel, DefaultPanelState, type PanelStateStore } from "./animationRetargetingPanel";
+
+import { type RetargetingSceneManager } from "./retargetingSceneManager";
+import { NamingSchemeManager } from "./namingSchemeManager";
+import { AvatarManager } from "./avatarManager";
+import { AnimationManager } from "./animationManager";
+
+// Module-level reference to the playground bridge. Set by the BridgeConsumer service
+// when the inspector is opened from the Playground. Null otherwise.
+let PlaygroundBridge: IPlaygroundBridge | null = null;
+
+/**
+ * Returns the playground bridge if available (inspector opened from PG).
+ * @returns The playground bridge instance or null.
+ */
+export function GetPlaygroundBridge(): IPlaygroundBridge | null {
+    return PlaygroundBridge;
+}
+
+/**
+ * Service definition for the Animation Retargeting extension.
+ * - Registers a dedicated 3D viewport (central content, left+right cameras).
+ * - Registers a controls side pane with Avatar / Animation / Retarget sections.
+ * - Exposes an Enable / Disable toggle to restore the original inspector scene.
+ */
+export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShellService, ISettingsStore, ISceneContext]> = {
+    friendlyName: "Animation Retargeting",
+    consumes: [ShellServiceIdentity, SettingsStoreIdentity, SceneContextIdentity],
+    factory: (shellService, settingsStore, sceneContext) => {
+        // Observable that fires whenever a new scene manager is ready (on each enable)
+        const onManagerReadyObs = new Observable<RetargetingSceneManager>();
+        // Observable that broadcasts enable/disable state changes to the panel
+        const isEnabledObs = new Observable<boolean>();
+        // Observable that fires when the config dialog closes — panel refreshes dropdowns
+        const onConfigChangedObs = new Observable<void>();
+
+        // Naming scheme manager — persists across extension lifetime via ISettingsStore
+        const namingSchemeManager = new NamingSchemeManager(settingsStore);
+
+        // Avatar manager — persists across extension lifetime via ISettingsStore + IndexedDB
+        const avatarManager = new AvatarManager(settingsStore);
+
+        // Animation manager — persists across extension lifetime via ISettingsStore + IndexedDB
+        const animationManager = new AnimationManager(settingsStore);
+
+        // Purge any session-only entries left over from a previous session
+        avatarManager.purgeSessionOnly();
+        animationManager.purgeSessionOnly();
+
+        // Create default entries if both lists are empty (first-time use)
+        if (avatarManager.getAllAvatars().length === 0 && animationManager.getAllDisplayNames().length === 0) {
+            avatarManager.createDefaults();
+            animationManager.createDefaults();
+        }
+
+        let isEnabled = false;
+        let viewportReg: IDisposable | null = null;
+        let currentManager: RetargetingSceneManager | null = null;
+        let sceneDisposeObserver: IObserver | null = null;
+
+        // Persists all panel UI state across remounts (e.g. when the panel is docked elsewhere)
+        const allAvatars = avatarManager.getAllAvatars();
+        const allDisplayNames = animationManager.getAllDisplayNames();
+        const persistedPanelState: PanelStateStore = {
+            ...DefaultPanelState,
+            avatarName: allAvatars.length > 0 ? allAvatars[0].name : "",
+            animationName: allDisplayNames.length > 0 ? allDisplayNames[0] : "",
+        };
+
+        function cleanupViewport(): void {
+            sceneDisposeObserver?.remove();
+            sceneDisposeObserver = null;
+            viewportReg?.dispose();
+            viewportReg = null;
+            currentManager = null;
+        }
+
+        function setEnabled(enabled: boolean): void {
+            if (enabled === isEnabled) {
+                return;
+            }
+            isEnabled = enabled;
+
+            if (enabled) {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    return;
+                }
+                const engine = scene.getEngine() as Engine;
+
+                // When the PG scene is disposed (e.g. Play button), clean up immediately
+                // so the retargeting scene is torn down before the engine is fully disposed.
+                sceneDisposeObserver = scene.onDisposeObservable.add(() => {
+                    cleanupViewport();
+                    isEnabled = false;
+                    isEnabledObs.notifyObservers(false);
+                });
+
+                // Register the central-content viewport; the component uses the PG's engine
+                viewportReg = shellService.addCentralContent({
+                    key: "AnimationRetargetingViewport",
+                    order: 10,
+                    component: () => (
+                        <AnimationRetargetingViewport
+                            engine={engine}
+                            onManagerReady={(manager) => {
+                                currentManager = manager;
+                                onManagerReadyObs.notifyObservers(manager);
+                            }}
+                        />
+                    ),
+                });
+            } else {
+                cleanupViewport();
+            }
+
+            isEnabledObs.notifyObservers(enabled);
+        }
+
+        // Start disabled so the user opts-in to the viewport
+        setEnabled(false);
+
+        const panelReg = shellService.addSidePane({
+            key: "AnimationRetargetingPanel",
+            title: "Animation Retargeting",
+            icon: PersonRunningRegular,
+            horizontalLocation: "left",
+            verticalLocation: "top",
+            content: () => (
+                <AnimationRetargetingPanel
+                    initialIsEnabled={isEnabled}
+                    isEnabledObs={isEnabledObs}
+                    onConfigChangedObs={onConfigChangedObs}
+                    onManagerReadyObs={onManagerReadyObs}
+                    getCurrentManager={() => currentManager}
+                    getCurrentScene={() => sceneContext.currentScene}
+                    getPlaygroundBridge={GetPlaygroundBridge}
+                    namingSchemeManager={namingSchemeManager}
+                    avatarManager={avatarManager}
+                    animationManager={animationManager}
+                    stateStore={persistedPanelState}
+                    onSetEnabled={setEnabled}
+                    onToggleConsole={() => currentManager?.htmlConsole.toggle()}
+                />
+            ),
+        });
+
+        // When the PG scene changes (e.g. Play button), auto-disable so the old
+        // engine/scene references are released and render loops are restored cleanly.
+        const sceneObserver = sceneContext.currentSceneObservable.add(() => {
+            if (isEnabled) {
+                setEnabled(false);
+            }
+        });
+
+        return {
+            dispose: () => {
+                setEnabled(false);
+                sceneObserver.remove();
+                panelReg.dispose();
+                onManagerReadyObs.clear();
+                isEnabledObs.clear();
+                onConfigChangedObs.clear();
+            },
+        };
+    },
+};
+
+/**
+ * Optional service that wires the Playground bridge when the inspector is opened from the PG.
+ * If the bridge service is not registered (inspector opened outside PG), this service is simply
+ * never created and the extension works without it.
+ */
+const BridgeConsumerServiceDefinition: ServiceDefinition<[], [IPlaygroundBridge]> = {
+    friendlyName: "Animation Retargeting Bridge Consumer",
+    consumes: [PlaygroundBridgeIdentity],
+    factory: (bridge) => {
+        PlaygroundBridge = bridge;
+        return {
+            dispose: () => {
+                PlaygroundBridge = null;
+            },
+        };
+    },
+};
+
+export default {
+    serviceDefinitions: [AnimationRetargetingServiceDefinition, BridgeConsumerServiceDefinition],
+} as const;
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
new file mode 100644
index 00000000000..d03924bf365
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -0,0 +1,1434 @@
+import { type FunctionComponent, useCallback, useEffect, useRef, useState } from "react";
+import { type Observable } from "core/Misc/observable";
+import { type Nullable } from "core/types";
+import { type Scene } from "core/scene";
+import { type IPlaygroundBridge } from "../../services/playgroundBridgeService";
+import { FilesInputStore } from "core/Misc/filesInputStore";
+import { SceneLoader } from "core/Loading/sceneLoader";
+import { SceneSerializer } from "core/Misc/sceneSerializer";
+import { type Transform, TransformProperties } from "../../components/properties/transformProperties";
+import { makeStyles, tokens, Body1Strong, Caption1 } from "@fluentui/react-components";
+import { Button } from "shared-ui-components/fluent/primitives/button";
+import { ArrowClockwiseRegular, EyeRegular, EyeOffRegular, WindowConsoleRegular, SettingsRegular, InfoRegular } from "@fluentui/react-icons";
+
+import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
+import { SyncedSliderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/syncedSliderPropertyLine";
+import { StringDropdownPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/dropdownPropertyLine";
+import { BoneDropdown } from "./boneDropdown";
+import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
+
+import { type RetargetingSceneManager } from "./retargetingSceneManager";
+import { type NamingSchemeManager } from "./namingSchemeManager";
+import { type AvatarManager } from "./avatarManager";
+import { type AnimationManager } from "./animationManager";
+import { type GizmoType } from "./avatar";
+import { RetargetingConfigDialog } from "./retargetingConfigDialog";
+import { UXContextProvider } from "../../components/uxContextProvider";
+
+/**
+ * Mirrors gui.ts _getSourceTransformNodeList: returns animation transform nodes filtered
+ * to only those that have a bone remapping entry for the current avatar/animation pair.
+ * Matches original PG behaviour for "Root node" and "Ground ref. node" dropdowns.
+ * @param names - List of all transform node names.
+ * @param animName - The animation display name.
+ * @param avatarName - The avatar name.
+ * @param namingSchemeManager - The naming scheme manager.
+ * @param avatarManager - The avatar manager.
+ * @param animationManager - The animation manager.
+ * @returns Filtered list of bone names.
+ */
+function BuildFilteredBoneList(
+    names: string[],
+    animName: string,
+    avatarName: string,
+    namingSchemeManager: NamingSchemeManager,
+    avatarManager: AvatarManager,
+    animationManager: AnimationManager
+): string[] {
+    const sourceScheme = animationManager.getByDisplayName(animName)?.entry.namingScheme;
+    const targetScheme = avatarManager.getAvatar(avatarName)?.namingScheme;
+    if (!sourceScheme || !targetScheme) {
+        return names;
+    }
+    const remapping = namingSchemeManager.getRemapping(sourceScheme, targetScheme);
+    if (!remapping) {
+        return names;
+    }
+    const result: string[] = [];
+    for (const [key] of remapping) {
+        if (names.includes(key)) {
+            result.push(key);
+        }
+    }
+    return result;
+}
+
+const useStyles = makeStyles({
+    root: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "hidden",
+    },
+    toolbar: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXXS,
+        padding: tokens.spacingVerticalXS,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        flexShrink: 0,
+    },
+    actionRow: {
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalXS,
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+        backgroundColor: tokens.colorNeutralBackground2,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
+    scrollContent: {
+        flex: 1,
+        overflowY: "auto",
+        overflowX: "hidden",
+    },
+    disabledOverlay: {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: tokens.colorNeutralForeground3,
+        fontSize: tokens.fontSizeBase200,
+        fontStyle: "italic",
+    },
+    boneDropdownLabel: {
+        flex: "1 1 0",
+        minWidth: "50px",
+        textAlign: "left",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    boneDropdownWrapper: {
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        paddingTop: tokens.spacingVerticalXXS,
+        paddingBottom: tokens.spacingVerticalXXS,
+        minHeight: tokens.lineHeightHero700,
+        boxSizing: "border-box",
+    },
+    boneDropdownControl: {
+        width: "225px", // 150px (standard) * 1.5 = 50% larger
+        boxSizing: "border-box",
+        flexShrink: 0,
+    },
+    loadingText: {
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalM}`,
+        fontSize: tokens.fontSizeBase200,
+        color: tokens.colorNeutralForeground3,
+    },
+    dropdownRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+    },
+    flexOne: {
+        flex: 1,
+    },
+    indented: {
+        paddingLeft: tokens.spacingHorizontalL,
+    },
+    errorHint: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: tokens.fontSizeBase200,
+        paddingLeft: tokens.spacingHorizontalL,
+    },
+});
+
+const GizmoTypeOptions: { label: string; value: string }[] = [
+    { label: "Position", value: "Position" },
+    { label: "Rotation", value: "Rotation" },
+    { label: "Scale", value: "Scale" },
+];
+const VerticalAxisOptions: { label: string; value: string }[] = [
+    { label: "Auto", value: "" },
+    { label: "X", value: "X" },
+    { label: "Y", value: "Y" },
+    { label: "Z", value: "Z" },
+];
+
+export type PanelStateStore = {
+    /**
+     *
+     */
+    avatarName: string;
+    /**
+     *
+     */
+    avatarRescaleAvatar: boolean;
+    /**
+     *
+     */
+    avatarAnimSpeed: number;
+    /**
+     *
+     */
+    avatarShowSkeleton: boolean;
+    /**
+     *
+     */
+    avatarShowSkeletonLocalAxes: boolean;
+    /**
+     *
+     */
+    avatarGizmoEnabled: boolean;
+    /**
+     *
+     */
+    avatarGizmoType: string;
+    /**
+     *
+     */
+    avatarGizmoSelectedNode: string;
+    /**
+     *
+     */
+    animationName: string;
+    /**
+     *
+     */
+    animationSpeed: number;
+    /**
+     *
+     */
+    animationShowSkeletonLocalAxes: boolean;
+    /**
+     *
+     */
+    animationGizmoEnabled: boolean;
+    /**
+     *
+     */
+    animationGizmoType: string;
+    /**
+     *
+     */
+    animationGizmoSelectedNode: string;
+    /**
+     *
+     */
+    fixAnimations: boolean;
+    /**
+     *
+     */
+    checkHierarchy: boolean;
+    /**
+     *
+     */
+    retargetAnimationKeys: boolean;
+    /**
+     *
+     */
+    fixRootPosition: boolean;
+    /**
+     *
+     */
+    fixGroundReference: boolean;
+    /**
+     *
+     */
+    fixGroundReferenceDynamicRefNode: boolean;
+    /**
+     *
+     */
+    rootNodeName: string;
+    /**
+     *
+     */
+    groundReferenceNodeName: string;
+    /**
+     *
+     */
+    groundReferenceVerticalAxis: string;
+};
+
+export const DefaultPanelState: PanelStateStore = {
+    avatarName: "",
+    avatarRescaleAvatar: true,
+    avatarAnimSpeed: 1,
+    avatarShowSkeleton: false,
+    avatarShowSkeletonLocalAxes: false,
+    avatarGizmoEnabled: false,
+    avatarGizmoType: "Rotation",
+    avatarGizmoSelectedNode: "",
+    animationName: "",
+    animationSpeed: 1,
+    animationShowSkeletonLocalAxes: false,
+    animationGizmoEnabled: false,
+    animationGizmoType: "Rotation",
+    animationGizmoSelectedNode: "",
+    fixAnimations: false,
+    checkHierarchy: false,
+    retargetAnimationKeys: true,
+    fixRootPosition: true,
+    fixGroundReference: false,
+    fixGroundReferenceDynamicRefNode: false,
+    rootNodeName: "Auto",
+    groundReferenceNodeName: "",
+    groundReferenceVerticalAxis: "",
+};
+
+export type AnimationRetargetingPanelProps = {
+    /**
+     *
+     */
+    initialIsEnabled: boolean;
+    /**
+     *
+     */
+    isEnabledObs: Observable<boolean>;
+    /**
+     *
+     */
+    onConfigChangedObs: Observable<void>;
+    /**
+     *
+     */
+    onManagerReadyObs: Observable<RetargetingSceneManager>;
+    /**
+     *
+     */
+    getCurrentManager: () => RetargetingSceneManager | null;
+    /**
+     *
+     */
+    getCurrentScene: () => Nullable<Scene>;
+    /**
+     *
+     */
+    getPlaygroundBridge: () => IPlaygroundBridge | null;
+    /**
+     *
+     */
+    namingSchemeManager: NamingSchemeManager;
+    /**
+     *
+     */
+    avatarManager: AvatarManager;
+    /**
+     *
+     */
+    animationManager: AnimationManager;
+    /** Persisted across remounts (e.g. when the panel is docked elsewhere). Lives in the extension closure. */
+    stateStore: PanelStateStore;
+    /**
+     *
+     */
+    onSetEnabled: (enabled: boolean) => void;
+    /**
+     *
+     */
+    onToggleConsole: () => void;
+};
+
+/**
+ * Main panel component for the Animation Retargeting extension.
+ * @returns The React element.
+ */
+export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPanelProps> = ({
+    initialIsEnabled,
+    isEnabledObs,
+    onConfigChangedObs,
+    onManagerReadyObs,
+    getCurrentManager,
+    getCurrentScene,
+    getPlaygroundBridge,
+    namingSchemeManager,
+    avatarManager,
+    animationManager,
+    stateStore,
+    onSetEnabled,
+    onToggleConsole,
+}) => {
+    const classes = useStyles();
+    const managerRef = useRef<RetargetingSceneManager | null>(null);
+    const handleLoadAvatarRef = useRef<(name: string, rescale: boolean) => void | Promise<void>>(() => {});
+    const handleLoadAnimationRef = useRef<(name: string) => void | Promise<void>>(() => {});
+    const [isEnabled, setIsEnabled] = useState(initialIsEnabled);
+    const [, forceUpdate] = useState(0);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [isConsoleVisible, setIsConsoleVisible] = useState(false);
+
+    // Avatar state
+    const [avatarName, setAvatarName] = useState(() => stateStore.avatarName);
+    const [avatarRescaleAvatar, setAvatarRescaleAvatar] = useState(() => stateStore.avatarRescaleAvatar);
+    const [avatarAnimSpeed, setAvatarAnimSpeed] = useState(() => stateStore.avatarAnimSpeed);
+    const [avatarShowSkeleton, setAvatarShowSkeleton] = useState(() => stateStore.avatarShowSkeleton);
+    const [avatarShowSkeletonLocalAxes, setAvatarShowSkeletonLocalAxes] = useState(() => stateStore.avatarShowSkeletonLocalAxes);
+    const [avatarGizmoEnabled, setAvatarGizmoEnabled] = useState(() => stateStore.avatarGizmoEnabled);
+    const [avatarGizmoType, setAvatarGizmoType] = useState<string>(() => stateStore.avatarGizmoType);
+    const [avatarGizmoSelectedNode, setAvatarGizmoSelectedNode] = useState(() => stateStore.avatarGizmoSelectedNode);
+
+    // Animation state
+    const [animationName, setAnimationName] = useState(() => stateStore.animationName);
+    const [animationSpeed, setAnimationSpeed] = useState(() => stateStore.animationSpeed);
+    const [animationShowSkeletonLocalAxes, setAnimationShowSkeletonLocalAxes] = useState(() => stateStore.animationShowSkeletonLocalAxes);
+    const [animationGizmoEnabled, setAnimationGizmoEnabled] = useState(() => stateStore.animationGizmoEnabled);
+    const [animationGizmoType, setAnimationGizmoType] = useState<string>(() => stateStore.animationGizmoType);
+    const [animationGizmoSelectedNode, setAnimationGizmoSelectedNode] = useState(() => stateStore.animationGizmoSelectedNode);
+
+    // Retarget options
+    const [fixAnimations, setFixAnimations] = useState(() => stateStore.fixAnimations);
+    const [checkHierarchy, setCheckHierarchy] = useState(() => stateStore.checkHierarchy);
+    const [retargetAnimationKeys, setRetargetAnimationKeys] = useState(() => stateStore.retargetAnimationKeys);
+    const [fixRootPosition, setFixRootPosition] = useState(() => stateStore.fixRootPosition);
+    const [fixGroundReference, setFixGroundReference] = useState(() => stateStore.fixGroundReference);
+    const [fixGroundReferenceDynamicRefNode, setFixGroundReferenceDynamicRefNode] = useState(() => stateStore.fixGroundReferenceDynamicRefNode);
+    const [rootNodeName, setRootNodeName] = useState(() => stateStore.rootNodeName);
+    const [groundReferenceNodeName, setGroundReferenceNodeName] = useState(() => stateStore.groundReferenceNodeName);
+    const [groundReferenceVerticalAxis, setGroundReferenceVerticalAxis] = useState(() => stateStore.groundReferenceVerticalAxis);
+
+    // Dynamic bone lists
+    const [avatarBoneOptions, setAvatarBoneOptions] = useState<
+        {
+            /**
+             *
+             */
+            label: string /**
+             *
+             */;
+            value: string;
+        }[]
+    >([]);
+    const [rootNodeOptions, setRootNodeOptions] = useState([{ label: "Auto", value: "Auto" }]);
+    const [groundRefNodeOptions, setGroundRefNodeOptions] = useState<
+        {
+            /**
+             *
+             */
+            label: string /**
+             *
+             */;
+            value: string;
+        }[]
+    >([]);
+
+    // Dropdown options derived from managers — refreshed when config dialog closes
+    const [avatarOptions, setAvatarOptions] = useState(() =>
+        avatarManager
+            .getAllAvatars()
+            .map((a) => ({ label: a.name, value: a.name }))
+            .sort((a, b) => a.label.localeCompare(b.label))
+    );
+    const [animationOptions, setAnimationOptions] = useState(() =>
+        animationManager
+            .getAllDisplayNames()
+            .map((n) => ({ label: n, value: n }))
+            .sort((a, b) => a.label.localeCompare(b.label))
+    );
+
+    // Selected bone/node transforms for the Properties section
+    const [avatarGizmoSelectedTransform, setAvatarGizmoSelectedTransform] = useState<Transform | null>(null);
+    const [animGizmoSelectedTransform, setAnimGizmoSelectedTransform] = useState<Transform | null>(null);
+
+    // Loading / retargeted states
+    const [isAvatarLoaded, setIsAvatarLoaded] = useState(false);
+    const [isAnimLoaded, setIsAnimLoaded] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isRetargeted, setIsRetargeted] = useState(false);
+    const [isExporting, setIsExporting] = useState(false);
+    const [isAvatarPlaying, setIsAvatarPlaying] = useState(false);
+    const [isAnimPlaying, setIsAnimPlaying] = useState(false);
+
+    // Refs tracking current values for callbacks (always up-to-date even in stale closures).
+    // Updated synchronously during render so callbacks always read the latest values.
+    // Also used to save all state to stateStore on unmount.
+    const stateSnapshotRef = useRef({
+        avatarName,
+        avatarRescaleAvatar,
+        avatarAnimSpeed,
+        avatarShowSkeleton,
+        avatarShowSkeletonLocalAxes,
+        avatarGizmoEnabled,
+        avatarGizmoType,
+        avatarGizmoSelectedNode,
+        animationName,
+        animationSpeed,
+        animationShowSkeletonLocalAxes,
+        animationGizmoEnabled,
+        animationGizmoType,
+        animationGizmoSelectedNode,
+        fixAnimations,
+        checkHierarchy,
+        retargetAnimationKeys,
+        fixRootPosition,
+        fixGroundReference,
+        fixGroundReferenceDynamicRefNode,
+        rootNodeName,
+        groundReferenceNodeName,
+        groundReferenceVerticalAxis,
+    });
+    stateSnapshotRef.current = {
+        avatarName,
+        avatarRescaleAvatar,
+        avatarAnimSpeed,
+        avatarShowSkeleton,
+        avatarShowSkeletonLocalAxes,
+        avatarGizmoEnabled,
+        avatarGizmoType,
+        avatarGizmoSelectedNode,
+        animationName,
+        animationSpeed,
+        animationShowSkeletonLocalAxes,
+        animationGizmoEnabled,
+        animationGizmoType,
+        animationGizmoSelectedNode,
+        fixAnimations,
+        checkHierarchy,
+        retargetAnimationKeys,
+        fixRootPosition,
+        fixGroundReference,
+        fixGroundReferenceDynamicRefNode,
+        rootNodeName,
+        groundReferenceNodeName,
+        groundReferenceVerticalAxis,
+    };
+
+    // Save all UI state back to the persistent store on unmount so it survives re-docking.
+    useEffect(() => {
+        return () => {
+            Object.assign(stateStore, stateSnapshotRef.current);
+        };
+    }, []);
+
+    // Subscribe to isEnabled observable
+    useEffect(() => {
+        const obs = isEnabledObs.add((v) => setIsEnabled(v));
+        return () => {
+            isEnabledObs.remove(obs);
+        };
+    }, [isEnabledObs]);
+
+    // Refresh dropdown options when the config dialog closes.
+    // If the current avatar/animation was removed, clear it and dispose the loaded model.
+    useEffect(() => {
+        const obs = onConfigChangedObs.add(() => {
+            const newAvatarOptions = avatarManager
+                .getAllAvatars()
+                .map((a) => ({ label: a.name, value: a.name }))
+                .sort((a, b) => a.label.localeCompare(b.label));
+            const newAnimationOptions = animationManager
+                .getAllDisplayNames()
+                .map((n) => ({ label: n, value: n }))
+                .sort((a, b) => a.label.localeCompare(b.label));
+            setAvatarOptions(newAvatarOptions);
+            setAnimationOptions(newAnimationOptions);
+
+            const s = stateSnapshotRef.current;
+            if (s.avatarName && !avatarManager.getAvatar(s.avatarName)) {
+                const firstAvatar = newAvatarOptions.length > 0 ? newAvatarOptions[0].value : "";
+                setAvatarName(firstAvatar);
+                if (firstAvatar) {
+                    void handleLoadAvatarRef.current(firstAvatar, s.avatarRescaleAvatar);
+                } else {
+                    managerRef.current?.avatar?.clearScene();
+                    managerRef.current?.avatar?.setGizmo(false, s.avatarGizmoType as GizmoType);
+                    setAvatarGizmoEnabled(false);
+                    setAvatarBoneOptions([]);
+                    setAvatarGizmoSelectedTransform(null);
+                    setIsAvatarLoaded(false);
+                    setIsAvatarPlaying(false);
+                }
+                setIsRetargeted(false);
+            }
+            if (s.animationName && !animationManager.getByDisplayName(s.animationName)) {
+                const firstAnim = newAnimationOptions.length > 0 ? newAnimationOptions[0].value : "";
+                setAnimationName(firstAnim);
+                if (firstAnim) {
+                    void handleLoadAnimationRef.current(firstAnim);
+                } else {
+                    managerRef.current?.animationSource?.clearScene();
+                    managerRef.current?.animationSource?.setGizmo(false, s.animationGizmoType as GizmoType);
+                    setAnimationGizmoEnabled(false);
+                    setRootNodeOptions([{ label: "Auto", value: "Auto" }]);
+                    setGroundRefNodeOptions([]);
+                    setAnimGizmoSelectedTransform(null);
+                    setIsAnimLoaded(false);
+                    setIsAnimPlaying(false);
+                }
+                setIsRetargeted(false);
+            }
+        });
+        return () => {
+            onConfigChangedObs.remove(obs);
+        };
+    }, [onConfigChangedObs, avatarManager, animationManager]);
+
+    // Subscribe to manager ready observable -- re-subscribe each time a new manager is created
+    useEffect(() => {
+        let cleanup: (() => void) | null = null;
+
+        /**
+         * Attaches observable listeners to `manager` and either triggers fresh loads
+         * (triggerLoads=true, first enable) or restores state from the existing scene
+         * (triggerLoads=false, panel remount after docking elsewhere).
+         * @param manager - The retargeting scene manager.
+         * @param triggerLoads - Whether to trigger fresh loads.
+         * @returns Void.
+         */
+        const setupManager = (manager: RetargetingSceneManager, triggerLoads: boolean) => {
+            managerRef.current = manager;
+
+            // Track console visibility
+            setIsConsoleVisible(manager.htmlConsole.isVisible);
+            const consoleObs = manager.htmlConsole.onVisibilityChangedObservable.add((v) => setIsConsoleVisible(v));
+
+            // Helper: rebuild "Root node" / "Ground ref. node" dropdowns using bone-remapping filtering.
+            // Mirrors original gui.ts _getSourceTransformNodeList + updateBoneList logic.
+            const rebuildBoneLists = (
+                allNames: string[],
+                allOptions: {
+                    /**
+                     *
+                     */
+                    label: string /**
+                     *
+                     */;
+                    value: string;
+                }[],
+                animName: string,
+                avatarName: string,
+                currentGroundRef: string
+            ) => {
+                const filtered = BuildFilteredBoneList(allNames, animName, avatarName, namingSchemeManager, avatarManager, animationManager);
+                const filteredSet = new Set(filtered);
+                const filteredOptions = allOptions.filter((o) => filteredSet.has(o.value));
+                setRootNodeOptions([{ label: "Auto", value: "Auto" }, ...filteredOptions]);
+                setGroundRefNodeOptions(filteredOptions);
+                const best = filtered.includes(currentGroundRef)
+                    ? currentGroundRef
+                    : (filtered.find((n) => n.toLowerCase().includes("lefttoe_end")) ?? filtered.find((n) => n.toLowerCase().includes("lefttoebase")) ?? filtered[0] ?? "");
+                setGroundReferenceNodeName(best);
+            };
+
+            // Subscribe to Avatar observables
+            const avatarLoadObs = manager.avatar!.onLoadedObservable.add(() => {
+                const s = stateSnapshotRef.current;
+                setIsAvatarLoaded(true);
+                setIsRetargeted(false);
+                setIsLoading(false);
+                setIsAvatarPlaying(false); // new avatar starts in rest pose -- gizmo is usable
+                // Rebuild avatar bone list for the Avatar Gizmo "Selected node" dropdown
+                setAvatarBoneOptions(manager.avatar!.getBoneOptions());
+                // Restore visual state
+                manager.avatar!.setSkeletonVisible(s.avatarShowSkeleton);
+                manager.avatar!.setSkeletonLocalAxes(s.avatarShowSkeletonLocalAxes);
+                manager.avatar!.setAnimSpeed(s.avatarAnimSpeed);
+                manager.avatar!.setGizmo(s.avatarGizmoEnabled, s.avatarGizmoType as GizmoType);
+                // Rebuild bone lists: avatar naming scheme affects the filtered list
+                if (manager.animationSource) {
+                    rebuildBoneLists(
+                        manager.animationSource.getTransformNodeNames(),
+                        manager.animationSource.getTransformNodeOptions(),
+                        s.animationName,
+                        s.avatarName,
+                        s.groundReferenceNodeName
+                    );
+                }
+            });
+
+            const avatarGizmoObs = manager.avatar!.onGizmoNodeSelectedObservable.add((name) => {
+                setAvatarGizmoSelectedNode(name);
+                setAvatarGizmoSelectedTransform(manager.avatar!.selectedBoneTransform as Transform | null);
+            });
+
+            const avatarPlayingObs = manager.avatar!.onPlayingObservable.add((playing) => {
+                setIsAvatarPlaying(playing);
+                if (playing) {
+                    setAvatarGizmoEnabled(false);
+                }
+                const s = stateSnapshotRef.current;
+                manager.avatar!.setGizmo(playing ? false : s.avatarGizmoEnabled, s.avatarGizmoType as GizmoType);
+            });
+
+            // Subscribe to AnimationSource observables
+            const animLoadObs = manager.animationSource!.onLoadedObservable.add(() => {
+                const s = stateSnapshotRef.current;
+                setIsAnimLoaded(true);
+                setIsRetargeted(false);
+                setIsLoading(false);
+                setIsAnimPlaying(true); // animation always starts in "playing" state after load
+                // Return avatar to rest pose when a new animation is loaded
+                manager.avatar?.returnToRest();
+                // Restore visual state
+                manager.animationSource!.setSkeletonVisible(true);
+                manager.animationSource!.setSkeletonLocalAxes(s.animationShowSkeletonLocalAxes);
+                manager.animationSource!.setGizmo(s.animationGizmoEnabled, s.animationGizmoType as GizmoType);
+                // Rebuild bone list dropdowns using filtered names (matching original updateBoneList logic)
+                const allNames = manager.animationSource!.getTransformNodeNames();
+                rebuildBoneLists(allNames, manager.animationSource!.getTransformNodeOptions(), s.animationName, s.avatarName, stateSnapshotRef.current.groundReferenceNodeName);
+            });
+
+            const animGizmoObs = manager.animationSource!.onGizmoNodeSelectedObservable.add((name) => {
+                setAnimationGizmoSelectedNode(name);
+                setAnimGizmoSelectedTransform(manager.animationSource!.selectedTransformNode as Transform | null);
+            });
+
+            const animPlayingObs = manager.animationSource!.onPlayingObservable.add((playing) => {
+                setIsAnimPlaying(playing);
+                if (playing) {
+                    setAnimationGizmoEnabled(false);
+                }
+                const s = stateSnapshotRef.current;
+                manager.animationSource!.setGizmo(playing ? false : s.animationGizmoEnabled, s.animationGizmoType as GizmoType);
+            });
+
+            // Subscribe to retarget done
+            const retargetObs = manager.onRetargetDoneObservable.add(() => {
+                setIsRetargeted(true);
+                setIsLoading(false);
+            });
+
+            if (triggerLoads) {
+                // Fresh enable: kick off loads from the current UI state
+                const s = stateSnapshotRef.current;
+                setIsLoading(true);
+                setIsAvatarLoaded(false);
+                setIsAnimLoaded(false);
+                setIsAvatarPlaying(false);
+                setIsAnimPlaying(false);
+                const storedAv = avatarManager.getAvatar(s.avatarName);
+                const animResult = animationManager.getByDisplayName(s.animationName);
+                const storedAn = animResult?.entry;
+                const animGroupIndex = animResult?.mapping.index ?? 0;
+                if (storedAv) {
+                    if (storedAv.source === "scene") {
+                        const pgScene = getCurrentScene();
+                        if (pgScene) {
+                            const rootMesh = pgScene.getMeshByName(storedAv.rootNodeName);
+                            if (rootMesh) {
+                                void manager.avatar!.loadFromSceneAsync(pgScene, storedAv.rootNodeName, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
+                            }
+                        }
+                    } else if (storedAv.source === "url" && storedAv.url) {
+                        void manager.avatar!.loadAsync(storedAv.url, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
+                    } else if (storedAv.source === "file" && storedAv.fileNames?.length) {
+                        void (async () => {
+                            const files = await avatarManager.getFilesAsync(storedAv.id, storedAv.fileNames!);
+                            let sceneFile: File | undefined;
+                            for (const file of files) {
+                                const lowerName = file.name.toLowerCase();
+                                FilesInputStore.FilesToLoad[lowerName] = file;
+                                const ext = lowerName.split(".").pop();
+                                if (ext && SceneLoader.IsPluginForExtensionAvailable("." + ext)) {
+                                    sceneFile = file;
+                                }
+                            }
+                            if (sceneFile) {
+                                void manager.avatar!.loadAsync("file:" + sceneFile.name, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
+                            }
+                        })();
+                    }
+                }
+                if (storedAn) {
+                    const loadAnimAsync = async (path: string) => {
+                        await manager.animationSource!.loadAsync(path, storedAn.restPoseUpdate, storedAn.rootNodeName, animGroupIndex);
+                        manager.animationSource?.setSkeletonVisible(true);
+                    };
+                    if (storedAn.source === "scene") {
+                        const pgScene = getCurrentScene();
+                        if (pgScene) {
+                            const doSerializeAndLoadAsync = async () => {
+                                const serialized = JSON.stringify(SceneSerializer.Serialize(pgScene));
+                                await loadAnimAsync("data:" + serialized);
+                            };
+                            // If the avatar was transferred from the scene, temporarily restore it
+                            // so the serializer captures the full scene
+                            if (manager.avatar?.sceneTransfer.isActive) {
+                                void manager.avatar.sceneTransfer.withRestoredSourceAsync(doSerializeAndLoadAsync);
+                            } else {
+                                void doSerializeAndLoadAsync();
+                            }
+                        }
+                    } else if (storedAn.source === "url" && storedAn.url) {
+                        void loadAnimAsync(storedAn.url);
+                    } else if (storedAn.source === "file" && storedAn.fileNames?.length) {
+                        void (async () => {
+                            const files = await animationManager.getFilesAsync(storedAn.id, storedAn.fileNames!);
+                            let sceneFile: File | undefined;
+                            for (const file of files) {
+                                const lowerName = file.name.toLowerCase();
+                                FilesInputStore.FilesToLoad[lowerName] = file;
+                                const ext = lowerName.split(".").pop();
+                                if (ext && SceneLoader.IsPluginForExtensionAvailable("." + ext)) {
+                                    sceneFile = file;
+                                }
+                            }
+                            if (sceneFile) {
+                                void loadAnimAsync("file:" + sceneFile.name);
+                            }
+                        })();
+                    }
+                }
+            } else {
+                // Remount: scene is already loaded -- restore UI state from the manager directly
+                const avatarLoaded = manager.avatar!.isLoaded;
+                const animLoaded = manager.animationSource!.isLoaded;
+                setIsAvatarLoaded(avatarLoaded);
+                setIsAnimLoaded(animLoaded);
+                setIsRetargeted(manager.isRetargeted);
+                setIsAvatarPlaying(manager.avatar!.isPlaying);
+                setIsAnimPlaying(manager.animationSource!.isPlaying);
+                setIsLoading(false);
+                if (avatarLoaded) {
+                    setAvatarBoneOptions(manager.avatar!.getBoneOptions());
+                    setAvatarGizmoSelectedTransform(manager.avatar!.selectedBoneTransform as Transform | null);
+                }
+                if (animLoaded) {
+                    const s = stateSnapshotRef.current;
+                    rebuildBoneLists(
+                        manager.animationSource!.getTransformNodeNames(),
+                        manager.animationSource!.getTransformNodeOptions(),
+                        s.animationName,
+                        s.avatarName,
+                        s.groundReferenceNodeName
+                    );
+                    setAnimGizmoSelectedTransform(manager.animationSource!.selectedTransformNode as Transform | null);
+                }
+            }
+
+            forceUpdate((n) => n + 1);
+
+            return () => {
+                manager.avatar?.onLoadedObservable.remove(avatarLoadObs);
+                manager.avatar?.onGizmoNodeSelectedObservable.remove(avatarGizmoObs);
+                manager.avatar?.onPlayingObservable.remove(avatarPlayingObs);
+                manager.animationSource?.onLoadedObservable.remove(animLoadObs);
+                manager.animationSource?.onGizmoNodeSelectedObservable.remove(animGizmoObs);
+                manager.animationSource?.onPlayingObservable.remove(animPlayingObs);
+                manager.onRetargetDoneObservable.remove(retargetObs);
+                manager.htmlConsole.onVisibilityChangedObservable.remove(consoleObs);
+            };
+        };
+
+        const obs = onManagerReadyObs.add((manager) => {
+            cleanup?.();
+            cleanup = setupManager(manager, true);
+        });
+
+        // If a manager already exists (panel remounted after docking elsewhere), restore state now
+        const existingManager = getCurrentManager();
+        if (existingManager) {
+            cleanup = setupManager(existingManager, false);
+        }
+
+        return () => {
+            onManagerReadyObs.remove(obs);
+            cleanup?.();
+        };
+    }, [onManagerReadyObs]);
+
+    const handleLoadAvatar = useCallback(
+        async (name: string, rescale: boolean) => {
+            const manager = managerRef.current;
+            if (!manager?.avatar) {
+                return;
+            }
+            const storedAvatar = avatarManager.getAvatar(name);
+            if (!storedAvatar) {
+                return;
+            }
+            setIsLoading(true);
+            setIsAvatarLoaded(false);
+            setIsRetargeted(false);
+
+            if (storedAvatar.source === "scene") {
+                const pgScene = getCurrentScene();
+                if (pgScene) {
+                    void manager.avatar.loadFromSceneAsync(pgScene, storedAvatar.rootNodeName, rescale, storedAvatar.restPoseUpdate);
+                }
+            } else if (storedAvatar.source === "url" && storedAvatar.url) {
+                void manager.avatar.loadAsync(storedAvatar.url, rescale, storedAvatar.restPoseUpdate);
+            } else if (storedAvatar.source === "file" && storedAvatar.fileNames?.length) {
+                const files = await avatarManager.getFilesAsync(storedAvatar.id, storedAvatar.fileNames);
+                let sceneFile: File | undefined;
+                for (const file of files) {
+                    const lowerName = file.name.toLowerCase();
+                    FilesInputStore.FilesToLoad[lowerName] = file;
+                    const ext = lowerName.split(".").pop();
+                    if (ext && SceneLoader.IsPluginForExtensionAvailable("." + ext)) {
+                        sceneFile = file;
+                    }
+                }
+                if (sceneFile) {
+                    void manager.avatar.loadAsync("file:" + sceneFile.name, rescale, storedAvatar.restPoseUpdate);
+                }
+            }
+        },
+        [avatarManager, getCurrentScene]
+    );
+
+    const handleLoadAnimation = useCallback(
+        async (name: string) => {
+            const manager = managerRef.current;
+            if (!manager?.animationSource) {
+                return;
+            }
+            const animResult = animationManager.getByDisplayName(name);
+            const storedAnimation = animResult?.entry;
+            const animGroupIdx = animResult?.mapping.index ?? 0;
+            if (!storedAnimation) {
+                return;
+            }
+            setIsLoading(true);
+            setIsAnimLoaded(false);
+            setIsRetargeted(false);
+
+            let loadPath: string | undefined;
+            if (storedAnimation.source === "scene") {
+                const pgScene = getCurrentScene();
+                if (pgScene) {
+                    const serializeFn = () => JSON.stringify(SceneSerializer.Serialize(pgScene));
+                    // If the avatar was transferred from the scene, temporarily restore it
+                    const serialized = manager.avatar?.sceneTransfer.isActive ? await manager.avatar.sceneTransfer.withRestoredSourceAsync(serializeFn) : serializeFn();
+                    loadPath = "data:" + serialized;
+                }
+            } else if (storedAnimation.source === "url" && storedAnimation.url) {
+                loadPath = storedAnimation.url;
+            } else if (storedAnimation.source === "file" && storedAnimation.fileNames?.length) {
+                const files = await animationManager.getFilesAsync(storedAnimation.id, storedAnimation.fileNames);
+                let sceneFile: File | undefined;
+                for (const file of files) {
+                    const lowerName = file.name.toLowerCase();
+                    FilesInputStore.FilesToLoad[lowerName] = file;
+                    const ext = lowerName.split(".").pop();
+                    if (ext && SceneLoader.IsPluginForExtensionAvailable("." + ext)) {
+                        sceneFile = file;
+                    }
+                }
+                if (sceneFile) {
+                    loadPath = "file:" + sceneFile.name;
+                }
+            }
+
+            if (loadPath) {
+                await manager.animationSource.loadAsync(loadPath, storedAnimation.restPoseUpdate, storedAnimation.rootNodeName, animGroupIdx);
+                manager.animationSource!.setSkeletonVisible(true);
+            }
+        },
+        [animationManager, getCurrentScene]
+    );
+
+    // Keep refs up to date so the config-changed handler can call the latest versions
+    handleLoadAvatarRef.current = handleLoadAvatar;
+    handleLoadAnimationRef.current = handleLoadAnimation;
+
+    const handleRetarget = useCallback(() => {
+        const manager = managerRef.current;
+        if (!manager) {
+            return;
+        }
+        setIsLoading(true);
+        manager.htmlConsole.clear();
+        manager.retarget(
+            {
+                avatarName,
+                avatarRescaleAvatar,
+                avatarAnimSpeed,
+                animationName,
+                animationSpeed,
+                fixAnimations,
+                checkHierarchy,
+                retargetAnimationKeys,
+                fixRootPosition,
+                fixGroundReference,
+                fixGroundReferenceDynamicRefNode,
+                rootNodeName,
+                groundReferenceNodeName,
+                groundReferenceVerticalAxis: groundReferenceVerticalAxis as "" | "X" | "Y" | "Z",
+            },
+            namingSchemeManager,
+            avatarManager,
+            animationManager
+        );
+    }, [
+        avatarName,
+        avatarRescaleAvatar,
+        avatarAnimSpeed,
+        animationName,
+        animationSpeed,
+        fixAnimations,
+        checkHierarchy,
+        retargetAnimationKeys,
+        fixRootPosition,
+        fixGroundReference,
+        fixGroundReferenceDynamicRefNode,
+        rootNodeName,
+        groundReferenceNodeName,
+        groundReferenceVerticalAxis,
+    ]);
+
+    const loadingText = isLoading && !isAvatarLoaded && !isAnimLoaded ? "Loading..." : isLoading ? "Loading..." : null;
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.toolbar}>
+                <Button
+                    appearance="transparent"
+                    icon={isEnabled ? EyeOffRegular : EyeRegular}
+                    title={isEnabled ? "Disable viewport" : "Enable viewport"}
+                    onClick={() => onSetEnabled(!isEnabled)}
+                />
+                <Button
+                    appearance={isConsoleVisible ? "primary" : "transparent"}
+                    icon={WindowConsoleRegular}
+                    title="Toggle console"
+                    disabled={!isEnabled}
+                    onClick={onToggleConsole}
+                />
+                <Button appearance="transparent" icon={SettingsRegular} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
+                <Button
+                    appearance="transparent"
+                    icon={InfoRegular}
+                    title="Documentation"
+                    onClick={() => window.open("https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/", "_blank")}
+                />
+                <RetargetingConfigDialog
+                    manager={namingSchemeManager}
+                    avatarManager={avatarManager}
+                    animationManager={animationManager}
+                    getCurrentScene={getCurrentScene}
+                    open={isDialogOpen}
+                    onClose={() => {
+                        setIsDialogOpen(false);
+                        onConfigChangedObs.notifyObservers();
+                    }}
+                />
+            </div>
+            {!isEnabled ? (
+                <div className={classes.disabledOverlay}>Extension is disabled -- original scene is shown</div>
+            ) : (
+                <UXContextProvider>
+                    <div className={classes.actionRow}>
+                        <ButtonLine
+                            label="Retarget"
+                            title="Apply the animation from the source to the avatar using the current settings"
+                            onClick={handleRetarget}
+                            disabled={!isAvatarLoaded || !isAnimLoaded || isLoading || (rootNodeName !== "Auto" && rootNodeName === groundReferenceNodeName)}
+                        />
+                        <ButtonLine
+                            label={isExporting ? "Exporting…" : "Export to Playground"}
+                            title="Export the retargeted animation as a Babylon.js Playground snippet"
+                            onClick={() => {
+                                setIsExporting(true);
+                                void (async () => {
+                                    try {
+                                        await managerRef.current?.exportToPlaygroundAsync(avatarManager, animationManager, () => setIsExporting(false));
+                                    } catch {
+                                        setIsExporting(false);
+                                    }
+                                })();
+                            }}
+                            disabled={!isRetargeted || isExporting}
+                        />
+                        {getPlaygroundBridge() && (
+                            <ButtonLine
+                                label="Export to Scene"
+                                title="Export the retargeting code as a new file tab in the current Playground"
+                                onClick={() => {
+                                    const bridge = getPlaygroundBridge();
+                                    if (bridge) {
+                                        void (async () => {
+                                            // Read existing retargeting.ts to find existing function names
+                                            const existingContent = bridge.getFileContent("retargeting.ts");
+                                            const existingFunctions = new Set<string>();
+                                            if (existingContent) {
+                                                const regex = /export\s+async\s+function\s+(retargetAnimation\d*)\s*\(/g;
+                                                let match;
+                                                while ((match = regex.exec(existingContent)) !== null) {
+                                                    existingFunctions.add(match[1]);
+                                                }
+                                            }
+
+                                            // Find the next available function name
+                                            let functionName = "retargetAnimation";
+                                            if (existingFunctions.has(functionName)) {
+                                                let counter = 2;
+                                                while (existingFunctions.has(`retargetAnimation${counter}`)) {
+                                                    counter++;
+                                                }
+                                                functionName = `retargetAnimation${counter}`;
+                                            }
+
+                                            const result = await managerRef.current?.generateRetargetingCodeAsync(avatarManager, animationManager, functionName);
+                                            if (result) {
+                                                // Always write/update the helpers file
+                                                bridge.addFileTab("retarget.helpers.ts", result.helpersCode);
+
+                                                // Create or append to retargeting.ts
+                                                let newContent: string;
+                                                if (existingContent) {
+                                                    newContent = existingContent + result.functionCode;
+                                                } else {
+                                                    newContent = result.headerCode + result.functionCode;
+                                                }
+                                                bridge.addFileTab("retargeting.ts", newContent);
+
+                                                // Collect all function names now in the file
+                                                existingFunctions.add(functionName);
+
+                                                // Add/update the import in the entry file
+                                                const entryPath = bridge.getEntryFilePath();
+                                                const entryContent = bridge.getFileContent(entryPath) ?? "";
+                                                const importLine = `import { ${[...existingFunctions].join(", ")} } from "./retargeting";`;
+                                                const importRegex = /import\s*\{[^}]*\}\s*from\s*["']\.\/retargeting["'];?\s*\n?/;
+                                                let updatedEntry: string;
+                                                if (importRegex.test(entryContent)) {
+                                                    updatedEntry = entryContent.replace(importRegex, importLine + "\n");
+                                                } else {
+                                                    updatedEntry = importLine + "\n" + entryContent;
+                                                }
+                                                bridge.addFileTab(entryPath, updatedEntry);
+                                            }
+                                        })();
+                                    }
+                                }}
+                                disabled={!isRetargeted}
+                            />
+                        )}
+                    </div>
+                    <div className={classes.scrollContent}>
+                        {loadingText && <div className={classes.loadingText}>{loadingText}</div>}
+                        <BabylonAccordion>
+                            {/* Avatar */}
+                            <BabylonAccordionSection title="Avatar">
+                                <div className={classes.dropdownRow}>
+                                    <div className={classes.flexOne}>
+                                        <StringDropdownPropertyLine
+                                            label="Name"
+                                            description="Select the avatar model to retarget animations onto"
+                                            value={avatarName}
+                                            options={avatarOptions}
+                                            onChange={(name) => {
+                                                setAvatarName(name);
+                                                void handleLoadAvatar(name, avatarRescaleAvatar);
+                                            }}
+                                        />
+                                    </div>
+                                    <Button
+                                        appearance="subtle"
+                                        icon={ArrowClockwiseRegular}
+                                        title="Reload avatar"
+                                        disabled={!avatarName}
+                                        onClick={() => {
+                                            void handleLoadAvatar(avatarName, avatarRescaleAvatar);
+                                        }}
+                                    />
+                                </div>
+                                <SwitchPropertyLine
+                                    label="Rescale"
+                                    description="Automatically rescale the avatar if it's too large or too small"
+                                    value={avatarRescaleAvatar}
+                                    onChange={(v) => {
+                                        setAvatarRescaleAvatar(v);
+                                        void handleLoadAvatar(avatarName, v);
+                                    }}
+                                />
+                                <SwitchPropertyLine
+                                    label="Show skeleton"
+                                    description="Display the avatar skeleton overlay"
+                                    value={avatarShowSkeleton}
+                                    onChange={(v) => {
+                                        setAvatarShowSkeleton(v);
+                                        managerRef.current?.avatar?.setSkeletonVisible(v);
+                                    }}
+                                />
+                                <SwitchPropertyLine
+                                    label="Show skel. local axes"
+                                    description="Show local coordinate axes on each skeleton bone (requires Show skeleton)"
+                                    value={avatarShowSkeletonLocalAxes}
+                                    disabled={!avatarShowSkeleton}
+                                    onChange={(v) => {
+                                        setAvatarShowSkeletonLocalAxes(v);
+                                        managerRef.current?.avatar?.setSkeletonLocalAxes(v);
+                                    }}
+                                />
+                                <SyncedSliderPropertyLine
+                                    label="Anim. speed"
+                                    description="Playback speed for the retargeted animation on the avatar"
+                                    value={avatarAnimSpeed}
+                                    min={0.01}
+                                    max={2}
+                                    step={0.05}
+                                    onChange={(v) => {
+                                        setAvatarAnimSpeed(v);
+                                        managerRef.current?.avatar?.setAnimSpeed(v);
+                                    }}
+                                />
+                                <ButtonLine
+                                    label="Return to rest"
+                                    title="Stop playback and return the avatar to its rest pose"
+                                    onClick={() => managerRef.current?.avatar?.returnToRest()}
+                                    disabled={!isAvatarLoaded}
+                                />
+                                <ButtonLine
+                                    label="Save as rest pose"
+                                    title="Save current bone positions as the rest pose for this avatar"
+                                    disabled={!isAvatarLoaded || isAvatarPlaying}
+                                    onClick={() => {
+                                        const restPose = managerRef.current?.avatar?.saveAsRestPose();
+                                        if (restPose && avatarName) {
+                                            const stored = avatarManager.getAvatar(avatarName);
+                                            if (stored) {
+                                                avatarManager.addAvatar({ ...stored, restPoseUpdate: restPose });
+                                            }
+                                        }
+                                    }}
+                                />
+                                <ButtonLine
+                                    label="Play"
+                                    title="Play the retargeted animation on the avatar"
+                                    onClick={() => managerRef.current?.avatar?.play(avatarAnimSpeed)}
+                                    disabled={!isRetargeted}
+                                />
+                            </BabylonAccordionSection>
+                            {/* Avatar Gizmo */}
+                            <BabylonAccordionSection title="Avatar Gizmo">
+                                <SwitchPropertyLine
+                                    label="Enabled"
+                                    description="Enable the transform gizmo to edit bone positions. Only available when the avatar is in rest pose"
+                                    value={avatarGizmoEnabled && !isAvatarPlaying}
+                                    disabled={isAvatarPlaying || !isAvatarLoaded}
+                                    onChange={(v) => {
+                                        setAvatarGizmoEnabled(v);
+                                        managerRef.current?.avatar?.setGizmo(v, avatarGizmoType as GizmoType);
+                                    }}
+                                />
+                                <StringDropdownPropertyLine
+                                    label="Type"
+                                    description="Type of transform gizmo: Position, Rotation, or Scale"
+                                    value={avatarGizmoType}
+                                    options={GizmoTypeOptions}
+                                    onChange={(v) => {
+                                        setAvatarGizmoType(v);
+                                        managerRef.current?.avatar?.setGizmo(avatarGizmoEnabled, v as GizmoType);
+                                    }}
+                                />
+                                <div className={classes.boneDropdownWrapper}>
+                                    <Body1Strong className={classes.boneDropdownLabel}>Selected node</Body1Strong>
+                                    <div className={classes.boneDropdownControl}>
+                                        <BoneDropdown
+                                            value={avatarGizmoSelectedNode}
+                                            options={avatarBoneOptions}
+                                            onChange={(name) => {
+                                                setAvatarGizmoSelectedNode(name);
+                                                managerRef.current?.avatar?.attachGizmoToBone(name);
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                                {avatarGizmoSelectedTransform && (
+                                    <BabylonAccordionSection title="Properties">
+                                        <TransformProperties transform={avatarGizmoSelectedTransform} />
+                                    </BabylonAccordionSection>
+                                )}
+                            </BabylonAccordionSection>
+                            {/* Animation */}
+                            <BabylonAccordionSection title="Animation">
+                                <div className={classes.dropdownRow}>
+                                    <div className={classes.flexOne}>
+                                        <StringDropdownPropertyLine
+                                            label="Name"
+                                            description="Select the animation to retarget onto the avatar"
+                                            value={animationName}
+                                            options={animationOptions}
+                                            onChange={(name) => {
+                                                setAnimationName(name);
+                                                void handleLoadAnimation(name);
+                                            }}
+                                        />
+                                    </div>
+                                    <Button
+                                        appearance="subtle"
+                                        icon={ArrowClockwiseRegular}
+                                        title="Reload animation"
+                                        disabled={!animationName}
+                                        onClick={() => {
+                                            void handleLoadAnimation(animationName);
+                                        }}
+                                    />
+                                </div>
+                                <SwitchPropertyLine
+                                    label="Show skel. local axes"
+                                    description="Show local coordinate axes on each animation bone"
+                                    value={animationShowSkeletonLocalAxes}
+                                    onChange={(v) => {
+                                        setAnimationShowSkeletonLocalAxes(v);
+                                        managerRef.current?.animationSource?.setSkeletonLocalAxes(v);
+                                    }}
+                                />
+                                <SyncedSliderPropertyLine
+                                    label="Anim. speed"
+                                    description="Playback speed for the source animation"
+                                    value={animationSpeed}
+                                    min={0.01}
+                                    max={2}
+                                    step={0.05}
+                                    onChange={(v) => {
+                                        setAnimationSpeed(v);
+                                        managerRef.current?.animationSource?.play(v);
+                                    }}
+                                />
+                                <ButtonLine
+                                    label="Return to rest"
+                                    title="Stop playback and return to the rest pose"
+                                    onClick={() => managerRef.current?.animationSource?.returnToRest()}
+                                    disabled={!isAnimLoaded}
+                                />
+                                <ButtonLine
+                                    label="Save as rest pose"
+                                    title="Save current node positions as the rest pose for this animation"
+                                    disabled={!isAnimLoaded || isAnimPlaying}
+                                    onClick={() => {
+                                        const restPose = managerRef.current?.animationSource?.saveAsRestPose();
+                                        if (restPose && animationName) {
+                                            const stored = animationManager.getByDisplayName(animationName)?.entry;
+                                            if (stored) {
+                                                animationManager.addAnimation({ ...stored, restPoseUpdate: restPose });
+                                            }
+                                        }
+                                    }}
+                                />
+                                <ButtonLine
+                                    label="Play"
+                                    title="Play the source animation"
+                                    onClick={() => managerRef.current?.animationSource?.play(animationSpeed)}
+                                    disabled={!isAnimLoaded}
+                                />
+                            </BabylonAccordionSection>
+                            {/* Animation Gizmo */}
+                            <BabylonAccordionSection title="Animation Gizmo">
+                                <SwitchPropertyLine
+                                    label="Enabled"
+                                    description="Enable the transform gizmo to edit node positions. Only available when the animation is stopped"
+                                    value={animationGizmoEnabled && !isAnimPlaying}
+                                    disabled={isAnimPlaying || !isAnimLoaded}
+                                    onChange={(v) => {
+                                        setAnimationGizmoEnabled(v);
+                                        managerRef.current?.animationSource?.setGizmo(v, animationGizmoType as GizmoType);
+                                    }}
+                                />
+                                <StringDropdownPropertyLine
+                                    label="Type"
+                                    description="Type of transform gizmo: Position, Rotation, or Scale"
+                                    value={animationGizmoType}
+                                    options={GizmoTypeOptions}
+                                    onChange={(v) => {
+                                        setAnimationGizmoType(v);
+                                        managerRef.current?.animationSource?.setGizmo(animationGizmoEnabled, v as GizmoType);
+                                    }}
+                                />
+                                <div className={classes.boneDropdownWrapper}>
+                                    <Body1Strong className={classes.boneDropdownLabel}>Selected node</Body1Strong>
+                                    <div className={classes.boneDropdownControl}>
+                                        <BoneDropdown
+                                            value={animationGizmoSelectedNode}
+                                            options={groundRefNodeOptions}
+                                            onChange={(name) => {
+                                                setAnimationGizmoSelectedNode(name);
+                                                managerRef.current?.animationSource?.attachGizmoToTransformNode(name);
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                                {animGizmoSelectedTransform && (
+                                    <BabylonAccordionSection title="Properties">
+                                        <TransformProperties transform={animGizmoSelectedTransform} />
+                                    </BabylonAccordionSection>
+                                )}
+                            </BabylonAccordionSection>
+                            {/* Retarget Options */}
+                            <BabylonAccordionSection title="Retarget Options">
+                                <SwitchPropertyLine
+                                    label="Fix animations"
+                                    description="Apply fixes to animation data before retargeting"
+                                    value={fixAnimations}
+                                    onChange={setFixAnimations}
+                                />
+                                <SwitchPropertyLine
+                                    label="Check hierarchy"
+                                    description="Verify that the bone hierarchy matches between source and target"
+                                    value={checkHierarchy}
+                                    onChange={setCheckHierarchy}
+                                />
+                                <SwitchPropertyLine
+                                    label="Retarget keys"
+                                    description="Retarget animation keyframes to match the avatar skeleton"
+                                    value={retargetAnimationKeys}
+                                    onChange={setRetargetAnimationKeys}
+                                />
+                                <SwitchPropertyLine
+                                    label="Fix root position"
+                                    description="Correct the root bone position to prevent floating or sinking. Uses the Root node setting"
+                                    value={fixRootPosition}
+                                    onChange={setFixRootPosition}
+                                />
+                                <SwitchPropertyLine
+                                    label="Fix ground reference"
+                                    description="Adjust the animation so feet stay on the ground. Uses the Ground ref. node setting"
+                                    value={fixGroundReference}
+                                    onChange={setFixGroundReference}
+                                />
+                                <div className={classes.indented}>
+                                    <SwitchPropertyLine
+                                        label="Dynamic ref. node"
+                                        description="Dynamically update the ground reference node each frame (requires Fix ground reference)"
+                                        value={fixGroundReferenceDynamicRefNode}
+                                        disabled={!fixGroundReference}
+                                        onChange={setFixGroundReferenceDynamicRefNode}
+                                    />
+                                </div>
+                                <div className={classes.boneDropdownWrapper}>
+                                    <Body1Strong className={classes.boneDropdownLabel}>Root node</Body1Strong>
+                                    <div className={classes.boneDropdownControl}>
+                                        <BoneDropdown
+                                            value={rootNodeName}
+                                            options={rootNodeOptions}
+                                            disabled={!fixRootPosition && !fixGroundReference}
+                                            onChange={setRootNodeName}
+                                        />
+                                    </div>
+                                </div>
+                                {rootNodeName !== "Auto" && rootNodeName === groundReferenceNodeName && (
+                                    <Caption1 className={classes.errorHint}>Root node and Ground ref. node must be different.</Caption1>
+                                )}
+                                <div className={classes.boneDropdownWrapper}>
+                                    <Body1Strong className={classes.boneDropdownLabel}>Ground ref. node</Body1Strong>
+                                    <div className={classes.boneDropdownControl}>
+                                        <BoneDropdown
+                                            value={groundReferenceNodeName}
+                                            options={groundRefNodeOptions}
+                                            disabled={!fixRootPosition && !fixGroundReference}
+                                            onChange={setGroundReferenceNodeName}
+                                        />
+                                    </div>
+                                </div>
+                                <div className={classes.indented}>
+                                    <StringDropdownPropertyLine
+                                        label="Vertical axis"
+                                        description="The vertical axis used for ground reference correction (Auto detects automatically)"
+                                        value={groundReferenceVerticalAxis}
+                                        options={VerticalAxisOptions}
+                                        disabled={!fixRootPosition && !fixGroundReference}
+                                        onChange={setGroundReferenceVerticalAxis}
+                                    />
+                                </div>
+                            </BabylonAccordionSection>
+                        </BabylonAccordion>
+                    </div>
+                </UXContextProvider>
+            )}
+        </div>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
new file mode 100644
index 00000000000..7e961582105
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
@@ -0,0 +1,81 @@
+import { type FunctionComponent, useEffect, useRef } from "react";
+
+import { type Engine } from "core/Engines/engine";
+import { makeStyles, tokens, Body1 } from "@fluentui/react-components";
+
+import { RetargetingSceneManager } from "./retargetingSceneManager";
+
+const useStyles = makeStyles({
+    container: {
+        position: "absolute",
+        inset: "0",
+        overflow: "hidden",
+        pointerEvents: "none",
+    },
+    labels: {
+        position: "absolute",
+        top: "8px",
+        left: 0,
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-around",
+        pointerEvents: "none",
+        color: "rgba(255,255,255,0.7)",
+        fontSize: tokens.fontSizeBase200,
+        fontFamily: "sans-serif",
+    },
+    consoleContainer: {
+        pointerEvents: "auto",
+    },
+});
+
+type AnimationRetargetingViewportProps = {
+    engine: Engine;
+    onManagerReady: (manager: RetargetingSceneManager) => void;
+};
+
+/**
+ * Overlay component for the animation retargeting viewport.
+ * @returns The React element.
+ */
+export const AnimationRetargetingViewport: FunctionComponent<AnimationRetargetingViewportProps> = ({ engine, onManagerReady }) => {
+    const classes = useStyles();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const managerRef = useRef<RetargetingSceneManager | null>(null);
+
+    useEffect(() => {
+        if (!containerRef.current) {
+            return;
+        }
+
+        const manager = new RetargetingSceneManager();
+        managerRef.current = manager;
+        manager.initialize(engine);
+        manager.htmlConsole.attachToContainer(containerRef.current);
+        onManagerReady(manager);
+
+        // Resize the engine when the central content area changes size
+        const resizeObserver = new ResizeObserver(() => engine.resize());
+        resizeObserver.observe(containerRef.current);
+
+        return () => {
+            resizeObserver.disconnect();
+            try {
+                manager.dispose();
+            } catch {
+                // Ignore errors during dispose — the engine/scene may already be partially disposed
+            }
+            managerRef.current = null;
+        };
+        // onManagerReady is intentionally not in deps - it's a stable callback from the service
+    }, [engine]);
+
+    return (
+        <div ref={containerRef} className={classes.container}>
+            <div className={classes.labels}>
+                <Body1>◀ Avatar</Body1>
+                <Body1>Animation ▶</Body1>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
new file mode 100644
index 00000000000..50d9124988e
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -0,0 +1,1032 @@
+import { type FunctionComponent, useState, useCallback, useRef, useEffect } from "react";
+import { type AnimationManager, type StoredAnimation, type AnimationGroupMapping } from "./animationManager";
+import { type NamingSchemeManager } from "./namingSchemeManager";
+import { type RestPoseDataUpdate } from "./avatarManager";
+import { type Nullable } from "core/types";
+
+import {
+    Input,
+    Label,
+    makeStyles,
+    mergeClasses,
+    tokens,
+    Body1Strong,
+    Caption1,
+    Dialog,
+    DialogSurface,
+    DialogBody,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Spinner,
+    DataGrid,
+    DataGridHeader,
+    DataGridBody,
+    DataGridRow,
+    DataGridHeaderCell,
+    DataGridCell,
+    createTableColumn,
+    type TableColumnDefinition,
+    type TableColumnSizingOptions,
+} from "@fluentui/react-components";
+
+import { Button } from "shared-ui-components/fluent/primitives/button";
+import { TextInput } from "shared-ui-components/fluent/primitives/textInput";
+import { StringDropdown } from "shared-ui-components/fluent/primitives/dropdown";
+import { AddRegular, DeleteRegular, EditRegular, ArrowUploadRegular, DocumentArrowLeftRegular } from "@fluentui/react-icons";
+import { Textarea } from "shared-ui-components/fluent/primitives/textarea";
+import { NullEngine } from "core/Engines/nullEngine";
+import { Scene } from "core/scene";
+import { ImportMeshAsync, SceneLoader } from "core/Loading/sceneLoader";
+import { FilesInputStore } from "core/Misc/filesInputStore";
+import { type Node } from "core/node";
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const useStyles = makeStyles({
+    panel: {
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+    },
+    listHeader: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexShrink: 0,
+        paddingBottom: tokens.spacingVerticalXS,
+    },
+    listButtons: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+    },
+    editSectionFlex: {
+        flex: 1,
+        overflowY: "auto",
+        borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+        paddingTop: tokens.spacingVerticalS,
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+    },
+    formRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        flexShrink: 0,
+    },
+    formLabel: {
+        flexShrink: 0,
+        width: "110px",
+    },
+    formControl: {
+        flex: 1,
+        textAlign: "left",
+        "& span": { textAlign: "left" },
+        "& input": { textAlign: "left" },
+    },
+    actionRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalS,
+        justifyContent: "flex-end",
+        flexShrink: 0,
+    },
+    errorText: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: tokens.fontSizeBase200,
+        flexShrink: 0,
+    },
+    warningText: {
+        color: tokens.colorPaletteYellowForeground1,
+        fontSize: tokens.fontSizeBase200,
+        flexShrink: 0,
+    },
+    emptyMsg: {
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+        color: tokens.colorNeutralForeground3,
+        fontSize: tokens.fontSizeBase200,
+    },
+    confirmSurface: {
+        width: "380px",
+        maxWidth: "90vw",
+    },
+    restPoseTextarea: {
+        resize: "vertical",
+        width: "100%",
+        minHeight: "150px",
+        maxHeight: "300px",
+        boxSizing: "border-box",
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusMedium,
+        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
+        fontFamily: "monospace",
+        fontSize: tokens.fontSizeBase100,
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+    },
+    dropZone: {
+        border: `2px dashed ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusMedium,
+        padding: tokens.spacingVerticalM,
+        textAlign: "center",
+        cursor: "pointer",
+        color: tokens.colorNeutralForeground3,
+        fontSize: tokens.fontSizeBase200,
+    },
+    dropZoneActive: {
+        border: `2px dashed ${tokens.colorCompoundBrandStroke}`,
+        backgroundColor: tokens.colorBrandBackground2,
+    },
+    animList: {
+        flex: 1,
+        overflowY: "auto",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        minHeight: "60px",
+    },
+    animRow: {
+        display: "flex",
+        alignItems: "center",
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+        gap: tokens.spacingHorizontalS,
+        fontSize: tokens.fontSizeBase200,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        ":last-child": { borderBottom: "none" },
+    },
+    animRowName: {
+        flex: "0 0 40%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        color: tokens.colorNeutralForeground3,
+    },
+    animRowInput: {
+        flex: 1,
+    },
+    animRowError: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: tokens.fontSizeBase100,
+        flexShrink: 0,
+    },
+    nodeTree: {
+        flex: 1,
+        overflowY: "auto",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        minHeight: "60px",
+        maxHeight: "150px",
+    },
+    nodeRow: {
+        padding: `0 ${tokens.spacingHorizontalS}`,
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: "13px",
+        fontFamily: "monospace",
+        cursor: "pointer",
+        whiteSpace: "pre",
+    },
+    nodeRowSelected: {
+        backgroundColor: tokens.colorBrandBackground2,
+        fontWeight: "bold",
+    },
+    dataGridFlex: {
+        flex: 1,
+        overflowY: "auto",
+    },
+    dataGridCompact: {
+        maxHeight: "140px",
+        overflowY: "auto",
+    },
+    hiddenInput: {
+        display: "none",
+    },
+    subtleText: {
+        color: tokens.colorNeutralForeground3,
+    },
+    spinnerInline: {
+        display: "inline-block",
+    },
+    formRowAlignStart: {
+        alignItems: "flex-start",
+    },
+    formLabelPadTop: {
+        paddingTop: "6px",
+    },
+});
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type NodeInfo = {
+    name: string;
+    depth: number;
+    prefix: string;
+};
+
+type AnimationEdit = {
+    id: string | null;
+    name: string;
+    sourceType: "url" | "file" | "scene";
+    url: string;
+    files: File[];
+    /** One row per animation group found in the file. */
+    mappings: AnimationGroupMapping[];
+    /** Index into the nodeList array — used for unique selection in the dialog. */
+    rootNodeIndex: number;
+    /** Display name of the root node. */
+    rootNodeName: string;
+    namingScheme: string;
+    restPoseJson: string;
+    sessionOnly?: boolean;
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function BuildNodeList(node: Node, depth: number, list: NodeInfo[], ancestorContinues: boolean[]): void {
+    let prefix = "";
+    if (depth > 0) {
+        for (let i = 1; i < depth; i++) {
+            prefix += ancestorContinues[i] ? "│  " : "   ";
+        }
+        const isLast = !ancestorContinues[depth];
+        prefix += isLast ? "└─ " : "├─ ";
+    }
+    list.push({ name: node.name, depth, prefix });
+    const children = node.getChildren();
+    for (let i = 0; i < children.length; i++) {
+        const isLastChild = i === children.length - 1;
+        ancestorContinues[depth + 1] = !isLastChild;
+        BuildNodeList(children[i], depth + 1, list, ancestorContinues);
+    }
+}
+
+/**
+ * Detects the best matching naming scheme by checking how many target names
+ * appear in each scheme. Returns the scheme with the most matches
+ * (minimum 10 required), or null if none qualify.
+ * @param targetNames - Set of animation target names.
+ * @param namingSchemeManager - The naming scheme manager.
+ * @returns The best matching scheme name, or null.
+ */
+function DetectNamingScheme(targetNames: Set<string>, namingSchemeManager: NamingSchemeManager): string | null {
+    const schemeNames = namingSchemeManager.getAllSchemeNames();
+    let bestScheme: string | null = null;
+    let bestCount = 0;
+
+    for (const schemeName of schemeNames) {
+        const entries = namingSchemeManager.getNamingScheme(schemeName);
+        if (!entries) {
+            continue;
+        }
+        const boneSet = new Set(entries.map((e) => e.name));
+        let matches = 0;
+        for (const name of targetNames) {
+            if (boneSet.has(name)) {
+                matches++;
+            }
+        }
+        if (matches > bestCount) {
+            bestCount = matches;
+            bestScheme = schemeName;
+        }
+    }
+
+    return bestCount >= 10 ? bestScheme : null;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Animations tab panel for the retargeting config dialog.
+ * @returns The React element.
+ */
+export const AnimationsPanel: FunctionComponent<{
+    animationManager: AnimationManager;
+    namingSchemeManager: NamingSchemeManager;
+    getCurrentScene: () => Nullable<Scene>;
+    onMutate: () => void;
+    onEditingChange: (editing: boolean) => void;
+}> = ({ animationManager, namingSchemeManager, getCurrentScene, onMutate, onEditingChange }) => {
+    const classes = useStyles();
+    const [editing, setEditing] = useState<AnimationEdit | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [warning, setWarning] = useState<string | null>(null);
+    const [confirmDelete, setConfirmDelete] = useState<{
+        id: string /**
+         *
+         */;
+        label: string;
+    } | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [nodeList, setNodeList] = useState<NodeInfo[]>([]);
+
+    const tempEngineRef = useRef<NullEngine | null>(null);
+    const tempSceneRef = useRef<Scene | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        return () => {
+            tempSceneRef.current?.dispose();
+            tempEngineRef.current?.dispose();
+        };
+    }, []);
+
+    const setEditingWithNotify = useCallback(
+        (value: AnimationEdit | null) => {
+            setEditing(value);
+            onEditingChange(value !== null);
+        },
+        [onEditingChange]
+    );
+
+    const allAnimations = [...animationManager.getAllAnimations()].sort((a, b) => a.name.localeCompare(b.name));
+    const schemeNames = namingSchemeManager.getAllSchemeNames();
+
+    const animationColumnSizing: TableColumnSizingOptions = {
+        name: { defaultWidth: 150 },
+        source: { defaultWidth: 60 },
+        scheme: { defaultWidth: 150 },
+        actions: { defaultWidth: 80 },
+    };
+
+    const animationColumns: TableColumnDefinition<StoredAnimation>[] = [
+        createTableColumn({ columnId: "name", renderHeaderCell: () => "Name", renderCell: (item) => item.name }),
+        createTableColumn({
+            columnId: "source",
+            renderHeaderCell: () => "Source",
+            renderCell: (item) =>
+                item.sessionOnly
+                    ? `${item.source === "scene" ? "Scene" : item.source === "url" ? "URL" : "File"} (session)`
+                    : item.source === "scene"
+                      ? "Scene"
+                      : item.source === "url"
+                        ? "URL"
+                        : "File",
+        }),
+        createTableColumn({ columnId: "scheme", renderHeaderCell: () => "Scheme", renderCell: (item) => item.namingScheme }),
+        createTableColumn({
+            columnId: "actions",
+            renderHeaderCell: () => "",
+            renderCell: (item) => (
+                <>
+                    <Button
+                        appearance="transparent"
+                        icon={EditRegular}
+                        title="Edit"
+                        disabled={!!editing}
+                        onClick={() => {
+                            void startEdit(item);
+                        }}
+                    />
+                    <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(item)} />
+                </>
+            ),
+        }),
+    ];
+
+    // ─── Load preview ─────────────────────────────────────────────────────
+
+    const loadPreview = useCallback(
+        async (sourceType: "url" | "file", url: string, files: File[], autoDetectScheme: boolean) => {
+            setIsLoading(true);
+            setError(null);
+
+            tempSceneRef.current?.dispose();
+            tempEngineRef.current?.dispose();
+
+            try {
+                const engine = new NullEngine();
+                tempEngineRef.current = engine;
+                const scene = new Scene(engine);
+                tempSceneRef.current = scene;
+
+                if (sourceType === "url") {
+                    await ImportMeshAsync(url.trim(), scene);
+                } else {
+                    let sceneFile: File | undefined;
+                    for (const file of files) {
+                        const name = file.name.toLowerCase();
+                        FilesInputStore.FilesToLoad[name] = file;
+                        const ext = name.split(".").pop();
+                        if (ext && SceneLoader.IsPluginForExtensionAvailable("." + ext)) {
+                            sceneFile = file;
+                        }
+                    }
+                    if (!sceneFile) {
+                        sceneFile = files[0];
+                    }
+                    await ImportMeshAsync(sceneFile.name, scene, { rootUrl: "file:" });
+                }
+
+                const groups = scene.animationGroups;
+                if (groups.length === 0) {
+                    setError("No animations found in this file.");
+                    setIsLoading(false);
+                    return;
+                }
+
+                // Detect naming scheme only for new loads (not when editing an existing entry)
+                let detectedScheme: string | null = null;
+                if (autoDetectScheme) {
+                    const targetNames = new Set<string>();
+                    for (const group of groups) {
+                        for (const ta of group.targetedAnimations) {
+                            if (ta.target?.name) {
+                                targetNames.add(ta.target.name as string);
+                            }
+                        }
+                    }
+                    detectedScheme = DetectNamingScheme(targetNames, namingSchemeManager);
+                }
+
+                // Build the node tree from root nodes
+                const nodes: NodeInfo[] = [];
+                const rootNodes = scene.rootNodes;
+                for (let i = 0; i < rootNodes.length; i++) {
+                    const ancestorContinues: boolean[] = [];
+                    ancestorContinues[0] = i < rootNodes.length - 1;
+                    BuildNodeList(rootNodes[i], 0, nodes, ancestorContinues);
+                }
+                setNodeList(nodes);
+
+                // Build mappings from the loaded animation groups, preserving existing display names by index
+                setEditing((prev) => {
+                    if (!prev) {
+                        return prev;
+                    }
+                    const existingByIndex = new Map<number, string>();
+                    for (const m of prev.mappings) {
+                        if (m.displayName) {
+                            existingByIndex.set(m.index, m.displayName);
+                        }
+                    }
+                    const newMappings: AnimationGroupMapping[] = groups.map((g, i) => ({
+                        index: i,
+                        groupName: g.name,
+                        displayName: existingByIndex.get(i) ?? "",
+                    }));
+                    // Resolve rootNodeIndex
+                    let idx = prev.rootNodeIndex;
+                    if (idx < 0 && prev.rootNodeName) {
+                        idx = nodes.findIndex((n) => n.name === prev.rootNodeName);
+                    }
+                    if (idx < 0) {
+                        idx = 0;
+                    }
+                    return {
+                        ...prev,
+                        mappings: newMappings,
+                        rootNodeIndex: idx,
+                        rootNodeName: prev.rootNodeName || (nodes.length > 0 ? (nodes[idx]?.name ?? "") : ""),
+                        ...(detectedScheme ? { namingScheme: detectedScheme } : {}),
+                    };
+                });
+            } catch (e) {
+                setError(`Failed to load: ${e instanceof Error ? e.message : String(e)}`);
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [namingSchemeManager]
+    );
+
+    // ─── CRUD handlers ────────────────────────────────────────────────────
+
+    const startAdd = useCallback(() => {
+        setEditingWithNotify({
+            id: null,
+            name: "",
+            sourceType: "url",
+            url: "",
+            files: [],
+            mappings: [],
+            rootNodeIndex: -1,
+            rootNodeName: "",
+            namingScheme: schemeNames[0] ?? "",
+            restPoseJson: "",
+        });
+        setError(null);
+        setNodeList([]);
+    }, [schemeNames, setEditingWithNotify]);
+
+    const startEdit = useCallback(
+        async (animation: StoredAnimation) => {
+            setEditingWithNotify({
+                id: animation.id,
+                name: animation.name,
+                sourceType: animation.source,
+                url: animation.url ?? "",
+                files: [],
+                mappings: animation.animations.map((m) => ({ ...m })),
+                rootNodeIndex: -1,
+                rootNodeName: animation.rootNodeName ?? "",
+                namingScheme: animation.namingScheme,
+                restPoseJson: animation.restPoseUpdate ? JSON.stringify(animation.restPoseUpdate, undefined, 2) : "",
+                sessionOnly: animation.sessionOnly,
+            });
+            setError(null);
+            if (animation.source === "scene") {
+                const scene = getCurrentScene();
+                if (scene) {
+                    const nodes: NodeInfo[] = [];
+                    const rootNodes = scene.rootNodes;
+                    for (let i = 0; i < rootNodes.length; i++) {
+                        const ancestorContinues: boolean[] = [];
+                        ancestorContinues[0] = i < rootNodes.length - 1;
+                        BuildNodeList(rootNodes[i], 0, nodes, ancestorContinues);
+                    }
+                    setNodeList(nodes);
+                    // Resolve rootNodeIndex from the stored name
+                    const foundIdx = nodes.findIndex((n) => n.name === animation.rootNodeName);
+                    if (foundIdx >= 0) {
+                        setEditing((prev) => (prev ? { ...prev, rootNodeIndex: foundIdx } : prev));
+                    }
+                }
+            } else if (animation.source === "url" && animation.url) {
+                void loadPreview("url", animation.url, [], false);
+            } else if (animation.source === "file" && animation.fileNames?.length) {
+                const files = await animationManager.getFilesAsync(animation.id, animation.fileNames);
+                if (files.length > 0) {
+                    void loadPreview("file", "", files, false);
+                }
+            }
+        },
+        [setEditingWithNotify, loadPreview, animationManager, getCurrentScene]
+    );
+
+    const startImportFromScene = useCallback(() => {
+        const scene = getCurrentScene();
+        if (!scene) {
+            return;
+        }
+
+        const groups = scene.animationGroups;
+        if (groups.length === 0) {
+            setError("No animation groups found in the current scene.");
+            return;
+        }
+
+        // Pause any playing animations and go to frame 0 so we capture the correct rest pose
+        let hadPlayingAnimations = false;
+        for (const group of groups) {
+            if (group.isPlaying) {
+                hadPlayingAnimations = true;
+                group.pause();
+                group.goToFrame(0);
+            }
+        }
+        if (hadPlayingAnimations) {
+            setWarning(
+                "Playing animations have been stopped. Animations should not be playing during import to ensure correct rest pose data. " +
+                    "The first frame will be used as the rest pose, but it may not be accurate if the animation was already running."
+            );
+        } else {
+            setWarning(null);
+        }
+
+        // Build mappings from scene animation groups
+        const mappings: AnimationGroupMapping[] = groups.map((g, i) => ({
+            index: i,
+            groupName: g.name,
+            displayName: "",
+        }));
+
+        // Build node tree from the scene
+        const nodes: NodeInfo[] = [];
+        const rootNodes = scene.rootNodes;
+        for (let i = 0; i < rootNodes.length; i++) {
+            const ancestorContinues: boolean[] = [];
+            ancestorContinues[0] = i < rootNodes.length - 1;
+            BuildNodeList(rootNodes[i], 0, nodes, ancestorContinues);
+        }
+        setNodeList(nodes);
+
+        // Auto-detect naming scheme from animation targets
+        const targetNames = new Set<string>();
+        for (const group of groups) {
+            for (const ta of group.targetedAnimations) {
+                if (ta.target?.name) {
+                    targetNames.add(ta.target.name as string);
+                }
+            }
+        }
+        const detectedScheme = DetectNamingScheme(targetNames, namingSchemeManager);
+
+        setEditingWithNotify({
+            id: null,
+            name: "",
+            sourceType: "scene",
+            url: "",
+            files: [],
+            mappings,
+            rootNodeIndex: 0,
+            rootNodeName: nodes.length > 0 ? nodes[0].name : "",
+            namingScheme: detectedScheme ?? schemeNames[0] ?? "",
+            restPoseJson: "",
+            sessionOnly: true,
+        });
+        setError(null);
+    }, [getCurrentScene, schemeNames, setEditingWithNotify, namingSchemeManager]);
+
+    const handleCancel = useCallback(() => {
+        setEditingWithNotify(null);
+        setError(null);
+        setWarning(null);
+        setNodeList([]);
+        tempSceneRef.current?.dispose();
+        tempSceneRef.current = null;
+        tempEngineRef.current?.dispose();
+        tempEngineRef.current = null;
+    }, [setEditingWithNotify]);
+
+    const handleSave = useCallback(async () => {
+        if (!editing) {
+            return;
+        }
+        if (!editing.name.trim()) {
+            setError("Name is required.");
+            return;
+        }
+        if (!editing.namingScheme) {
+            setError("Please select a naming scheme.");
+            return;
+        }
+
+        // Validate display names: check for duplicates within the current mappings
+        const seenNames = new Set<string>();
+        for (const m of editing.mappings) {
+            const dn = m.displayName.trim();
+            if (!dn) {
+                continue;
+            }
+            if (seenNames.has(dn)) {
+                setError(`Duplicate display name "${dn}" within this file.`);
+                return;
+            }
+            seenNames.add(dn);
+            // Check against other files
+            if (animationManager.isDisplayNameUsed(dn, editing.id ?? undefined)) {
+                setError(`Display name "${dn}" is already used by another animation file.`);
+                return;
+            }
+        }
+
+        try {
+            const animId = editing.id ?? "";
+
+            let fileNames: string[] | undefined;
+            if (editing.sourceType === "file" && editing.files.length > 0) {
+                if (animId) {
+                    fileNames = await animationManager.storeFilesAsync(animId, editing.files);
+                }
+            } else if (editing.sourceType === "file" && editing.id) {
+                const existing = animationManager.getAnimationById(editing.id);
+                fileNames = existing?.fileNames;
+            }
+
+            let restPoseUpdate: RestPoseDataUpdate | undefined;
+            if (editing.restPoseJson.trim()) {
+                try {
+                    restPoseUpdate = JSON.parse(editing.restPoseJson);
+                } catch {
+                    setError("Invalid JSON in rest pose data.");
+                    return;
+                }
+            }
+
+            const animation: StoredAnimation = {
+                id: animId,
+                name: editing.name.trim(),
+                source: editing.sourceType,
+                url: editing.sourceType === "url" ? editing.url.trim() : undefined,
+                fileNames: editing.sourceType === "file" ? fileNames : undefined,
+                namingScheme: editing.namingScheme,
+                rootNodeName: editing.rootNodeName,
+                animations: editing.mappings.map((m) => ({ ...m, displayName: m.displayName.trim() })),
+                restPoseUpdate,
+                sessionOnly: editing.sessionOnly,
+            };
+
+            animationManager.addAnimation(animation);
+
+            if (editing.sourceType === "file" && editing.files.length > 0 && !animId) {
+                const storedFileNames = await animationManager.storeFilesAsync(animation.id, editing.files);
+                animation.fileNames = storedFileNames;
+                animationManager.addAnimation(animation);
+            }
+
+            setEditingWithNotify(null);
+            setError(null);
+            setNodeList([]);
+            onMutate();
+        } catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+    }, [editing, animationManager, onMutate, setEditingWithNotify]);
+
+    const handleDelete = useCallback((animation: StoredAnimation) => {
+        setConfirmDelete({ id: animation.id, label: animation.name });
+    }, []);
+
+    const handleConfirmDelete = useCallback(async () => {
+        if (!confirmDelete) {
+            return;
+        }
+        await animationManager.removeAnimationAsync(confirmDelete.id);
+        setConfirmDelete(null);
+        onMutate();
+    }, [confirmDelete, animationManager, onMutate]);
+
+    // ─── Mapping display name helpers ─────────────────────────────────────
+
+    const updateMappingDisplayName = useCallback(
+        (index: number, displayName: string) => {
+            if (!editing) {
+                return;
+            }
+            setEditing({
+                ...editing,
+                mappings: editing.mappings.map((m) => (m.index === index ? { ...m, displayName } : m)),
+            });
+        },
+        [editing]
+    );
+
+    const getMappingError = useCallback(
+        (mapping: AnimationGroupMapping): string | null => {
+            if (!editing) {
+                return null;
+            }
+            const dn = mapping.displayName.trim();
+            if (!dn) {
+                return null;
+            }
+            // Duplicate within current file
+            const duplicateInFile = editing.mappings.some((m) => m.index !== mapping.index && m.displayName.trim() === dn);
+            if (duplicateInFile) {
+                return "Duplicate name in this file";
+            }
+            // Duplicate in other files
+            if (animationManager.isDisplayNameUsed(dn, editing.id ?? undefined)) {
+                return "Name already used";
+            }
+            return null;
+        },
+        [editing, animationManager]
+    );
+
+    // ─── Drag & drop ──────────────────────────────────────────────────────
+
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(true);
+    }, []);
+
+    const handleDragLeave = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    }, []);
+
+    const handleDrop = useCallback(
+        (e: React.DragEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragOver(false);
+            if (!editing) {
+                return;
+            }
+            const droppedFiles = Array.from(e.dataTransfer.files);
+            if (droppedFiles.length > 0) {
+                const updated = { ...editing, sourceType: "file" as const, files: droppedFiles, url: "" };
+                setEditing(updated);
+                void loadPreview("file", "", droppedFiles, true);
+            }
+        },
+        [editing, loadPreview]
+    );
+
+    const handleFileInput = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            if (!editing || !e.target.files) {
+                return;
+            }
+            const selectedFiles = Array.from(e.target.files);
+            if (selectedFiles.length > 0) {
+                const updated = { ...editing, sourceType: "file" as const, files: selectedFiles, url: "" };
+                setEditing(updated);
+                void loadPreview("file", "", selectedFiles, true);
+            }
+        },
+        [editing, loadPreview]
+    );
+
+    // ─── Render ───────────────────────────────────────────────────────────
+
+    return (
+        <div className={classes.panel}>
+            {/* Confirm delete dialog */}
+            <Dialog
+                open={confirmDelete !== null}
+                onOpenChange={(_, d) => {
+                    if (!d.open) {
+                        setConfirmDelete(null);
+                    }
+                }}
+            >
+                <DialogSurface className={classes.confirmSurface}>
+                    <DialogBody>
+                        <DialogTitle>Delete Animation</DialogTitle>
+                        <DialogContent>
+                            Delete animation <strong>"{confirmDelete?.label}"</strong> and all associated files?
+                        </DialogContent>
+                        <DialogActions>
+                            <Button appearance="secondary" label="Cancel" onClick={() => setConfirmDelete(null)} />
+                            <Button appearance="primary" label="Delete" onClick={handleConfirmDelete} />
+                        </DialogActions>
+                    </DialogBody>
+                </DialogSurface>
+            </Dialog>
+
+            <div className={classes.listHeader}>
+                <div className={classes.listButtons}>
+                    <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
+                    <Button icon={DocumentArrowLeftRegular} label="Import from scene" onClick={startImportFromScene} disabled={!!editing || !getCurrentScene()} />
+                </div>
+            </div>
+            {allAnimations.length === 0 && <Caption1 className={classes.emptyMsg}>No custom animations defined.</Caption1>}
+            <DataGrid
+                items={allAnimations}
+                columns={animationColumns}
+                getRowId={(item) => item.id}
+                className={mergeClasses(editing ? classes.dataGridCompact : classes.dataGridFlex)}
+                resizableColumns
+                columnSizingOptions={animationColumnSizing}
+            >
+                <DataGridHeader>
+                    <DataGridRow>{({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}</DataGridRow>
+                </DataGridHeader>
+                <DataGridBody<StoredAnimation>>
+                    {({ item, rowId }) => <DataGridRow<StoredAnimation> key={rowId}>{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}</DataGridRow>}
+                </DataGridBody>
+            </DataGrid>
+
+            {editing && (
+                <div className={classes.editSectionFlex}>
+                    <Body1Strong>{editing.id ? "Edit Animation File" : "New Animation File"}</Body1Strong>
+
+                    {/* Name */}
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Name</Label>
+                        <TextInput className={classes.formControl} value={editing.name} onChange={(v) => setEditing({ ...editing, name: v })} />
+                    </div>
+
+                    {/* URL input — hidden for scene-sourced entries */}
+                    {editing.sourceType !== "scene" && (
+                        <div className={classes.formRow}>
+                            <Label className={classes.formLabel}>URL</Label>
+                            <Input
+                                className={classes.formControl}
+                                size="small"
+                                value={editing.url}
+                                placeholder="https://..."
+                                onChange={(_, d) => setEditing({ ...editing, url: d.value })}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter" && editing.url.trim()) {
+                                        setEditing({ ...editing, sourceType: "url", files: [] });
+                                        void loadPreview("url", editing.url, [], true);
+                                    }
+                                }}
+                                input={{
+                                    onBlur: () => {
+                                        if (editing.url.trim() && editing.sourceType !== "file") {
+                                            void loadPreview("url", editing.url, [], true);
+                                        }
+                                    },
+                                }}
+                            />
+                        </div>
+                    )}
+
+                    {/* Drop zone — hidden for scene-sourced entries */}
+                    {editing.sourceType !== "scene" && (
+                        <div
+                            className={mergeClasses(classes.dropZone, isDragOver ? classes.dropZoneActive : undefined)}
+                            onDragOver={handleDragOver}
+                            onDragLeave={handleDragLeave}
+                            onDrop={handleDrop}
+                            onClick={() => fileInputRef.current?.click()}
+                        >
+                            <ArrowUploadRegular />
+                            <div>Drop file(s) here or click to browse</div>
+                            <input ref={fileInputRef} type="file" multiple className={classes.hiddenInput} onChange={handleFileInput} />
+                        </div>
+                    )}
+
+                    {/* Loading indicator */}
+                    {isLoading && (
+                        <Caption1 className={classes.subtleText}>
+                            Loading… <Spinner size="tiny" className={classes.spinnerInline} />
+                        </Caption1>
+                    )}
+
+                    {/* Animation group mapping table */}
+                    {editing.mappings.length > 0 && (
+                        <>
+                            <Caption1 className={classes.subtleText}>
+                                Assign display names to animation groups ({editing.mappings.length} found). Leave empty to exclude an animation.
+                            </Caption1>
+                            <div className={classes.animList}>
+                                {editing.mappings.map((mapping) => {
+                                    const rowError = getMappingError(mapping);
+                                    return (
+                                        <div key={mapping.index} className={classes.animRow}>
+                                            <Caption1 className={classes.animRowName} title={mapping.groupName}>
+                                                {mapping.groupName}
+                                            </Caption1>
+                                            <Input
+                                                className={classes.animRowInput}
+                                                size="small"
+                                                placeholder="Display name"
+                                                value={mapping.displayName}
+                                                onChange={(_, d) => updateMappingDisplayName(mapping.index, d.value)}
+                                            />
+                                            {rowError && <Caption1 className={classes.animRowError}>{rowError}</Caption1>}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </>
+                    )}
+
+                    {/* Node tree for root node selection */}
+                    {nodeList.length > 0 && (
+                        <>
+                            <Caption1 className={classes.subtleText}>Select the root node for skeleton creation ({nodeList.length} nodes found):</Caption1>
+                            <div className={classes.nodeTree}>
+                                {nodeList.map((node, idx) => (
+                                    <div
+                                        key={idx}
+                                        className={mergeClasses(classes.nodeRow, editing.rootNodeIndex === idx ? classes.nodeRowSelected : undefined)}
+                                        onClick={() => {
+                                            // Collect descendant names for naming scheme detection
+                                            const selectedDepth = node.depth;
+                                            const descendantNames = new Set<string>();
+                                            descendantNames.add(node.name);
+                                            for (let j = idx + 1; j < nodeList.length; j++) {
+                                                if (nodeList[j].depth <= selectedDepth) {
+                                                    break;
+                                                }
+                                                descendantNames.add(nodeList[j].name);
+                                            }
+                                            const detected = DetectNamingScheme(descendantNames, namingSchemeManager);
+                                            setEditing({
+                                                ...editing,
+                                                rootNodeIndex: idx,
+                                                rootNodeName: node.name,
+                                                ...(detected ? { namingScheme: detected } : {}),
+                                            });
+                                        }}
+                                    >
+                                        {node.prefix + node.name}
+                                    </div>
+                                ))}
+                            </div>
+                        </>
+                    )}
+
+                    {/* Naming scheme */}
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Naming scheme</Label>
+                        <StringDropdown
+                            className={classes.formControl}
+                            value={editing.namingScheme}
+                            options={schemeNames.map((n) => ({ label: n, value: n }))}
+                            onChange={(v) => setEditing({ ...editing, namingScheme: v })}
+                        />
+                    </div>
+
+                    {/* Rest pose data */}
+                    <div className={mergeClasses(classes.formRow, classes.formRowAlignStart)}>
+                        <Label className={mergeClasses(classes.formLabel, classes.formLabelPadTop)}>Rest pose data</Label>
+                        <Textarea
+                            className={classes.restPoseTextarea}
+                            value={editing.restPoseJson}
+                            placeholder='JSON array (optional). Use gizmos + "Save as rest pose" to generate this data.'
+                            onChange={(newVal) => setEditing({ ...editing, restPoseJson: newVal })}
+                        />
+                    </div>
+
+                    {warning && <Caption1 className={classes.warningText}>{warning}</Caption1>}
+                    {error && <Caption1 className={classes.errorText}>{error}</Caption1>}
+                    <div className={classes.actionRow}>
+                        <Button appearance="secondary" label="Cancel" onClick={handleCancel} />
+                        <Button appearance="primary" label="Save" onClick={handleSave} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
new file mode 100644
index 00000000000..9bda39e7f90
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -0,0 +1,530 @@
+import { type Nullable } from "core/types";
+import { type ArcRotateCamera } from "core/Cameras/arcRotateCamera";
+import { type ShadowGenerator } from "core/Lights/Shadows/shadowGenerator";
+import { type Scene } from "core/scene";
+import { type AnimationGroup } from "core/Animations/animationGroup";
+import { type TransformNode } from "core/Meshes/transformNode";
+
+import { type AbstractMesh } from "core/Meshes/abstractMesh";
+import { Color3 } from "core/Maths/math.color";
+
+import { SceneTransfer } from "./sceneTransfer";
+import { Matrix, Quaternion, Vector3 } from "core/Maths/math.vector";
+import { StandardMaterial } from "core/Materials/standardMaterial";
+import { MeshBuilder } from "core/Meshes/meshBuilder";
+import { Mesh } from "core/Meshes/mesh";
+import { Observable } from "core/Misc/observable";
+import { GizmoManager } from "core/Gizmos/gizmoManager";
+import { GizmoCoordinatesMode } from "core/Gizmos/gizmo";
+import { UtilityLayerRenderer } from "core/Rendering/utilityLayerRenderer";
+import { AnimatorAvatar } from "core/Animations/animatorAvatar";
+import { SkeletonViewer } from "core/Debug/skeletonViewer";
+import { ImportMeshAsync } from "core/Loading/sceneLoader";
+import { type Bone } from "core/Bones/bone";
+
+// Side-effect import needed for scene.createPickingRay (prototype-augmented)
+import "core/Culling/ray";
+
+import { type RestPoseDataUpdate } from "./avatarManager";
+import { DistancePointToLine } from "./helperFunctions";
+
+export type GizmoType = "Position" | "Rotation" | "Scale";
+
+const ShadowLayerMask = 0x10000000;
+
+type BoneTransformations = Map<Bone, { position: Vector3; scaling: Vector3; quaternion: Quaternion }>;
+
+/**
+ *
+ */
+export class Avatar {
+    private _animatorAvatar: Nullable<AnimatorAvatar> = null;
+    private _animationGroup: Nullable<AnimationGroup> = null;
+    private _skeletonViewer: Nullable<SkeletonViewer> = null;
+    private _gizmoManager: GizmoManager;
+    private _gizmoSelectedNode: Nullable<Mesh> = null;
+    private _selectedBoneTransform: Nullable<TransformNode | Bone> = null;
+    private _scaleRatio = 1;
+    private _inRestPose = false;
+    private _initialBoneTransformations: BoneTransformations = new Map();
+    private _retargetedBoneTransformations: BoneTransformations = new Map();
+
+    // For scene-sourced avatars: manages node transfer between scenes
+    private readonly _sceneTransfer = new SceneTransfer();
+
+    /**
+     *
+     */
+    public readonly onLoadedObservable = new Observable<void>();
+    /**
+     *
+     */
+    public readonly onGizmoNodeSelectedObservable = new Observable<string>();
+    /**
+     *
+     */
+    public readonly onPlayingObservable = new Observable<boolean>();
+
+    public get animatorAvatar(): Nullable<AnimatorAvatar> {
+        return this._animatorAvatar;
+    }
+    public get animationGroup(): Nullable<AnimationGroup> {
+        return this._animationGroup;
+    }
+    public get scaleRatio(): number {
+        return this._scaleRatio;
+    }
+    public get inRestPose(): boolean {
+        return this._inRestPose;
+    }
+    public get isLoaded(): boolean {
+        return this._animatorAvatar !== null;
+    }
+    public get sceneTransfer(): SceneTransfer {
+        return this._sceneTransfer;
+    }
+    /** True when a retargeted animation is actively playing (not in rest pose). */
+    public get isPlaying(): boolean {
+        return this._animationGroup !== null && !this._inRestPose;
+    }
+    public get selectedBoneTransform(): Nullable<TransformNode | Bone> {
+        return this._selectedBoneTransform;
+    }
+    public get initialBoneTransformations(): BoneTransformations {
+        return this._initialBoneTransformations;
+    }
+    public get retargetedBoneTransformations(): BoneTransformations {
+        return this._retargetedBoneTransformations;
+    }
+
+    public constructor(
+        private readonly _scene: Scene,
+        private readonly _camera: ArcRotateCamera,
+        private readonly _shadowGenerator: ShadowGenerator
+    ) {
+        this._gizmoManager = new GizmoManager(this._scene, undefined, new UtilityLayerRenderer(this._scene), new UtilityLayerRenderer(this._scene));
+        this._gizmoManager.keepDepthUtilityLayer.setRenderCamera(this._camera);
+        this._gizmoManager.utilityLayer.setRenderCamera(this._camera);
+        this._gizmoManager.usePointerToAttachGizmos = false;
+        this._gizmoManager.coordinatesMode = GizmoCoordinatesMode.Local;
+    }
+
+    public async loadAsync(path: string, rescaleAvatar: boolean, restPoseUpdate?: RestPoseDataUpdate): Promise<void> {
+        this._cleanScene();
+        await this._loadFileAsync(path, rescaleAvatar, restPoseUpdate);
+    }
+
+    public clearScene(): void {
+        this._cleanScene();
+    }
+
+    /** Returns the list of all bone names in the avatar skeleton, in hierarchy order.
+     * @returns Array of bone name strings.
+     */
+    public getBoneNames(): string[] {
+        if (!this._animatorAvatar) {
+            return [];
+        }
+        const [skeleton] = this._animatorAvatar.skeletons;
+        return skeleton.bones.map((b) => b.name);
+    }
+
+    /** Returns bone options in hierarchy order, with indented labels for parenting.
+     * @returns Array of label/value pairs.
+     */
+    public getBoneOptions(): {
+        /**
+         *
+         */
+        label: string /**
+         *
+         */;
+        value: string;
+    }[] {
+        if (!this._animatorAvatar) {
+            return [];
+        }
+        const [skeleton] = this._animatorAvatar.skeletons;
+        return skeleton.bones.map((bone) => {
+            let depth = 0;
+            let p = bone.parent;
+            while (p) {
+                depth++;
+                p = p.parent;
+            }
+            const indent = "\u00A0\u00A0".repeat(depth);
+            return { label: indent + bone.name, value: bone.name };
+        });
+    }
+
+    public setSkeletonVisible(visible: boolean): void {
+        this._skeletonShow(visible);
+    }
+
+    public setSkeletonLocalAxes(visible: boolean): void {
+        this._skeletonShowLocalAxes(visible);
+    }
+
+    public setGizmo(enabled: boolean, type: GizmoType): void {
+        this._updateGizmoEnabled(enabled, type);
+    }
+
+    public setAnimSpeed(speed: number): void {
+        if (this._animationGroup) {
+            this._animationGroup.speedRatio = speed;
+        }
+    }
+
+    public play(speed: number): void {
+        this._play(speed);
+        this.onPlayingObservable.notifyObservers(true);
+    }
+
+    public returnToRest(deleteAnimation = false): void {
+        this._animationGroup?.stop();
+        if (this._animatorAvatar) {
+            for (const skeleton of this._animatorAvatar.skeletons) {
+                skeleton.returnToRest();
+                skeleton.prepare(true);
+            }
+        }
+        this._inRestPose = true;
+        if (deleteAnimation) {
+            this._animationGroup?.dispose();
+            this._animationGroup = null;
+        }
+        this.onPlayingObservable.notifyObservers(false);
+    }
+
+    /**
+     * Captures the current bone transformations (while in rest pose, possibly edited via gizmo)
+     * as a `RestPoseDataUpdate`. All bone transformations are saved as absolute values.
+     * @returns The rest-pose data update array.
+     */
+    public saveAsRestPose(): RestPoseDataUpdate {
+        const result: RestPoseDataUpdate = [];
+        if (!this._animatorAvatar) {
+            return result;
+        }
+        const [skeleton] = this._animatorAvatar.skeletons;
+        for (const bone of skeleton.bones) {
+            const data: {
+                /**
+                 *
+                 */
+                position?: number[] /**
+                 *
+                 */;
+                scaling?: number[] /**
+                 *
+                 */;
+                quaternion?: number[];
+            } = {};
+            data.position = bone.position.asArray();
+            data.scaling = bone.scaling.asArray();
+            if (bone.rotationQuaternion) {
+                data.quaternion = bone.rotationQuaternion.asArray();
+            }
+            result.push({ name: bone.name, data });
+        }
+        // Update internal rest pose so subsequent retargeting uses the new baseline
+        for (const skel of this._animatorAvatar.skeletons) {
+            skel.setCurrentPoseAsRest();
+        }
+        return result;
+    }
+
+    public prepareRetargeting(): void {
+        this.returnToRest(true);
+        this._retargetedBoneTransformations.clear();
+        this._saveBoneTransformations(this._retargetedBoneTransformations);
+    }
+
+    public buildExportData(restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
+        return restPoseUpdate ? [...restPoseUpdate] : [];
+    }
+
+    public setRetargetedAnimation(animGroup: AnimationGroup, speed: number): void {
+        this._animationGroup = animGroup;
+        this._animationGroup.start(true, speed);
+        this._inRestPose = false;
+        this.onPlayingObservable.notifyObservers(true);
+    }
+
+    public attachGizmoToBone(boneName: string): void {
+        if (!this._animatorAvatar) {
+            return;
+        }
+        for (const skeleton of this._animatorAvatar.skeletons) {
+            const bone = skeleton.bones.find((b) => b.name === boneName);
+            if (!bone) {
+                continue;
+            }
+            if (this._gizmoSelectedNode) {
+                const bonePos = bone._linkedTransformNode?.absolutePosition ?? bone.getAbsolutePosition(this._animatorAvatar.rootNode);
+                this._gizmoSelectedNode.position.copyFrom(bonePos);
+            }
+            this._selectedBoneTransform = bone.getTransformNode() ?? bone;
+            this._gizmoManager.attachToNode(bone.getTransformNode() ?? bone);
+            return;
+        }
+    }
+
+    public handleBoneClick(x: number, y: number): void {
+        if (!this._animatorAvatar || !this._inRestPose) {
+            return;
+        }
+        const ray = this._scene.createPickingRay(x, y, Matrix.Identity(), this._camera, false);
+        let selectedBone: Nullable<Bone> = null;
+        let minDistance = Number.POSITIVE_INFINITY;
+        for (const skeleton of this._animatorAvatar.skeletons) {
+            for (const bone of skeleton.bones) {
+                const rootNode = this._animatorAvatar.rootNode;
+                const bonePos = bone._linkedTransformNode?.absolutePosition ?? bone.getAbsolutePosition(rootNode);
+                const d = DistancePointToLine(bonePos, ray.origin, ray.direction);
+                if (d < minDistance) {
+                    minDistance = d;
+                    selectedBone = bone;
+                }
+            }
+        }
+        if (selectedBone) {
+            if (this._gizmoSelectedNode) {
+                const bonePos = selectedBone._linkedTransformNode?.absolutePosition ?? selectedBone.getAbsolutePosition(this._animatorAvatar.rootNode);
+                this._gizmoSelectedNode.position.copyFrom(bonePos);
+            }
+            this._selectedBoneTransform = selectedBone.getTransformNode() ?? selectedBone;
+            this._gizmoManager.attachToNode(selectedBone.getTransformNode() ?? selectedBone);
+            this.onGizmoNodeSelectedObservable.notifyObservers(selectedBone.name);
+        }
+    }
+
+    public dispose(): void {
+        this._cleanScene();
+        this._gizmoManager.dispose();
+    }
+
+    public async loadFromSceneAsync(sourceScene: Scene, rootNodeName: string, rescaleAvatar: boolean, restPoseUpdate?: RestPoseDataUpdate): Promise<void> {
+        this._cleanScene();
+        const sourceRoot = this._sceneTransfer.transfer(sourceScene, this._scene, rootNodeName);
+        if (!sourceRoot) {
+            return;
+        }
+        this._setupAvatar(sourceRoot, rescaleAvatar, restPoseUpdate);
+    }
+
+    private async _loadFileAsync(path: string, rescaleAvatar: boolean, restPoseUpdate?: RestPoseDataUpdate): Promise<void> {
+        let result;
+        if (path.startsWith("file:")) {
+            result = await ImportMeshAsync(path.substring(5), this._scene, { rootUrl: "file:" });
+        } else {
+            result = await ImportMeshAsync(path, this._scene);
+        }
+        const avatarRootNode = result.meshes[0];
+        this._setupAvatar(avatarRootNode, rescaleAvatar, restPoseUpdate);
+    }
+
+    private _setupAvatar(avatarRootNode: AbstractMesh, rescaleAvatar: boolean, restPoseUpdate?: RestPoseDataUpdate): void {
+        avatarRootNode.name = "avatar";
+
+        this._animatorAvatar = new AnimatorAvatar("avatar", avatarRootNode);
+        for (const skeleton of this._animatorAvatar.skeletons) {
+            skeleton.name = "avatar";
+            skeleton.returnToRest();
+        }
+
+        const boundingVectors = avatarRootNode.getHierarchyBoundingVectors(true, (node) => node instanceof Mesh);
+        const extendSize = boundingVectors.max.subtract(boundingVectors.min);
+        const maxDim = Math.max(extendSize.x, extendSize.y, extendSize.z);
+
+        this._scaleRatio = 1;
+        if (rescaleAvatar && (maxDim > 3 || maxDim < 0.1)) {
+            this._scaleRatio = 2 / maxDim;
+            const s = avatarRootNode.scaling;
+            avatarRootNode.scaling.set(Math.sign(s.x) * this._scaleRatio, Math.sign(s.y) * this._scaleRatio, Math.sign(s.z) * this._scaleRatio);
+        }
+
+        // Delete avatar's own animation groups, keep only the reference animation
+        for (const anim of [...this._scene.animationGroups]) {
+            if (anim.name !== "reference") {
+                anim.dispose();
+            }
+        }
+
+        // Set layer masks for all meshes recursively
+        let avatarMesh: Nullable<AbstractMesh> = null;
+        for (const mesh of avatarRootNode.getChildMeshes()) {
+            if (!avatarMesh) {
+                avatarMesh = mesh;
+            }
+            mesh.layerMask = ShadowLayerMask;
+            mesh.receiveShadows = true;
+            this._shadowGenerator.addShadowCaster(mesh);
+        }
+
+        if (restPoseUpdate && restPoseUpdate.length > 0) {
+            this._applyRestPoseUpdate(restPoseUpdate);
+        }
+
+        this._initialBoneTransformations.clear();
+        this._saveBoneTransformations(this._initialBoneTransformations);
+
+        const [avatarSkeleton] = this._animatorAvatar.skeletons;
+        const skeletonViewer = new SkeletonViewer(avatarSkeleton, (avatarMesh ?? avatarRootNode) as Mesh, this._scene, undefined, 0, {
+            displayMode: SkeletonViewer.DISPLAY_SPHERE_AND_SPURS,
+            displayOptions: {
+                showLocalAxes: false,
+                localAxesSize: Math.max(extendSize.x, extendSize.y, extendSize.z) / 20,
+            },
+        });
+        this._skeletonViewer = skeletonViewer;
+        skeletonViewer.isEnabled = false;
+        skeletonViewer.utilityLayer!.setRenderCamera(this._camera);
+
+        let rootBone = avatarSkeleton.bones[0];
+        for (const bone of avatarSkeleton.bones) {
+            if (!bone.parent) {
+                rootBone = bone;
+                break;
+            }
+        }
+
+        const utilScene = skeletonViewer.utilityLayer!.utilityLayerScene!;
+        const mat = new StandardMaterial("selectedBoneMatAvatar", utilScene);
+        mat.emissiveColor = Color3.Red();
+        mat.disableLighting = true;
+
+        this._gizmoSelectedNode = MeshBuilder.CreateSphere("selectedBoneAvatar", { diameter: 0.07, segments: 10 }, utilScene);
+        this._gizmoSelectedNode.setEnabled(false);
+        this._gizmoSelectedNode.material = mat;
+        this._gizmoSelectedNode.layerMask = ShadowLayerMask;
+        this._gizmoSelectedNode.renderingGroupId = 1;
+
+        const bonePos = rootBone._linkedTransformNode?.absolutePosition ?? rootBone.getAbsolutePosition(avatarRootNode);
+        this._gizmoSelectedNode.position.copyFrom(bonePos);
+
+        this._selectedBoneTransform = rootBone.getTransformNode() ?? rootBone;
+        this._gizmoManager.attachToNode(rootBone.getTransformNode() ?? rootBone);
+        this._gizmoManager.additionalTransformNode = rootBone.getTransformNode() ? undefined : avatarRootNode;
+
+        this._inRestPose = true;
+        this.onLoadedObservable.notifyObservers();
+        this.onGizmoNodeSelectedObservable.notifyObservers(rootBone.name);
+    }
+
+    private _cleanScene(): void {
+        // Dispose skeleton viewer and gizmo node first, before moving meshes back
+        this._skeletonViewer?.dispose();
+        this._skeletonViewer = null;
+        this._gizmoSelectedNode?.dispose();
+        this._gizmoSelectedNode = null;
+        this._selectedBoneTransform = null;
+
+        // Remove shadow casters added by _setupAvatar
+        if (this._animatorAvatar?.rootNode) {
+            for (const mesh of this._animatorAvatar.rootNode.getChildMeshes()) {
+                this._shadowGenerator.removeShadowCaster(mesh);
+            }
+        }
+
+        // Restore scene-sourced nodes back to their original scene
+        if (this._sceneTransfer.isActive) {
+            this._sceneTransfer.restore();
+            // Don't dispose the animatorAvatar — its meshes belong to the PG scene
+            this._animatorAvatar = null;
+        } else {
+            this._animatorAvatar?.dispose();
+            this._animatorAvatar = null;
+        }
+        this._scene.getAnimationGroupByName("avatar")?.dispose();
+    }
+
+    private _applyRestPoseUpdate(restPoseUpdate: RestPoseDataUpdate): void {
+        if (!this._animatorAvatar) {
+            return;
+        }
+
+        const [avatarSkeleton] = this._animatorAvatar.skeletons;
+        for (const dataBlock of restPoseUpdate) {
+            const index = avatarSkeleton.getBoneIndexByName(dataBlock.name);
+            if (index !== -1) {
+                const bone = avatarSkeleton.bones[index];
+                if (dataBlock.data.position) {
+                    bone.position = Vector3.FromArray(dataBlock.data.position);
+                }
+                if (dataBlock.data.scaling) {
+                    bone.scaling = Vector3.FromArray(dataBlock.data.scaling);
+                }
+                if (dataBlock.data.quaternion) {
+                    bone.rotationQuaternion = Quaternion.FromArray(dataBlock.data.quaternion);
+                }
+            }
+        }
+        avatarSkeleton.setCurrentPoseAsRest();
+        avatarSkeleton.returnToRest();
+    }
+
+    private _skeletonDebugMeshSet(): void {
+        if (!this._skeletonViewer?.debugMesh) {
+            return;
+        }
+        this._skeletonViewer.debugMesh.layerMask = ShadowLayerMask;
+        this._skeletonViewer.debugMesh.alwaysSelectAsActiveMesh = true;
+        if (this._skeletonViewer.debugLocalAxesMesh) {
+            this._skeletonViewer.debugLocalAxesMesh.layerMask = ShadowLayerMask;
+        }
+    }
+
+    private _skeletonShow(visible: boolean): void {
+        if (!this._skeletonViewer) {
+            return;
+        }
+        this._skeletonViewer.isEnabled = visible;
+        this._skeletonDebugMeshSet();
+    }
+
+    private _skeletonShowLocalAxes(visible: boolean): void {
+        if (!this._skeletonViewer) {
+            return;
+        }
+        this._skeletonViewer.changeDisplayOptions("showLocalAxes", visible);
+        this._skeletonDebugMeshSet();
+    }
+
+    private _gizmoShow(show: boolean): void {
+        if (this._gizmoSelectedNode) {
+            this._gizmoSelectedNode.setEnabled(show);
+        }
+    }
+
+    private _updateGizmoEnabled(enabled: boolean, type: GizmoType): void {
+        const show = enabled && this._inRestPose;
+        this._gizmoManager.positionGizmoEnabled = show && type === "Position";
+        this._gizmoManager.rotationGizmoEnabled = show && type === "Rotation";
+        this._gizmoManager.scaleGizmoEnabled = show && type === "Scale";
+        this._gizmoShow(show);
+    }
+
+    private _saveBoneTransformations(map: BoneTransformations): void {
+        if (!this._animatorAvatar) {
+            return;
+        }
+        const [skeleton] = this._animatorAvatar.skeletons;
+        for (const bone of skeleton.bones) {
+            map.set(bone, {
+                position: bone.position.clone(),
+                scaling: bone.scaling.clone(),
+                quaternion: bone.rotationQuaternion!.clone(),
+            });
+        }
+    }
+
+    private _play(speed: number): void {
+        if (!this._animationGroup) {
+            return;
+        }
+        this._animationGroup.stop();
+        this._animationGroup.start(true, speed);
+        this._inRestPose = false;
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
new file mode 100644
index 00000000000..53b60c49bf9
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -0,0 +1,445 @@
+import { type ISettingsStore, type SettingDescriptor } from "../../services/settingsStore";
+
+export type RestPoseDataUpdate = Array<{
+    /**
+     *
+     */
+    name: string /**
+     *
+     */;
+    /**
+     *
+     */
+    data: {
+        /**
+         *
+         */
+        position?: number[] /**
+         *
+         */;
+        /**
+         *
+         */
+        scaling?: number[] /**
+         *
+         */;
+        /**
+         *
+         */
+        quaternion?: number[];
+    };
+}>;
+
+const IDBName = "BabylonInspector_AnimRetargeting";
+const IDBStore = "avatarFiles";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type StoredAvatar = {
+    /** Unique, immutable identifier generated at creation time. Used as the IndexedDB key prefix. */
+    id: string;
+    /**
+     *
+     */
+    name: string;
+    /**
+     *
+     */
+    source: "url" | "file" | "scene";
+    /**
+     *
+     */
+    url?: string;
+    /**
+     *
+     */
+    fileNames?: string[];
+    /**
+     *
+     */
+    namingScheme: string;
+    /** Display name of the root node (for UI and scene-source lookup). */
+    rootNodeName: string;
+    /** Index of the root node in the loaded scene's getNodes() array (url/file sources only). */
+    rootNodeIndex?: number;
+    /**
+     *
+     */
+    restPoseUpdate?: RestPoseDataUpdate;
+    /** When true, this entry is transient and will be purged on next startup. */
+    sessionOnly?: boolean;
+};
+
+type SerializedData = {
+    avatars: StoredAvatar[];
+};
+
+const AvatarSettingDescriptor: SettingDescriptor<SerializedData> = {
+    key: "AnimRetargeting/Avatars",
+    defaultValue: { avatars: [] },
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function GenerateId(): string {
+    return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+async function BlobToBase64(blob: Blob): Promise<string> {
+    return await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            const result = reader.result as string;
+            resolve(result.substring(result.indexOf(",") + 1));
+        };
+        reader.onerror = () => reject(new Error("Failed to read blob"));
+        reader.readAsDataURL(blob);
+    });
+}
+
+function Base64ToBlob(base64: string): Blob {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return new Blob([bytes]);
+}
+
+// ─── IndexedDB helpers ────────────────────────────────────────────────────────
+
+async function OpenIDB(): Promise<IDBDatabase> {
+    return await new Promise((resolve, reject) => {
+        const request = indexedDB.open(IDBName, 2);
+        request.onupgradeneeded = () => {
+            const db = request.result;
+            if (!db.objectStoreNames.contains(IDBStore)) {
+                db.createObjectStore(IDBStore);
+            }
+            if (!db.objectStoreNames.contains("animationFiles")) {
+                db.createObjectStore("animationFiles");
+            }
+        };
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error ?? new Error("IDB open failed"));
+    });
+}
+
+async function IdbPut(key: string, value: Blob): Promise<void> {
+    const db = await OpenIDB();
+    return await new Promise((resolve, reject) => {
+        const tx = db.transaction(IDBStore, "readwrite");
+        tx.objectStore(IDBStore).put(value, key);
+        tx.oncomplete = () => {
+            db.close();
+            resolve();
+        };
+        tx.onerror = () => {
+            db.close();
+            reject(tx.error ?? new Error("IDB transaction failed"));
+        };
+    });
+}
+
+async function IdbGet(key: string): Promise<Blob | undefined> {
+    const db = await OpenIDB();
+    return await new Promise((resolve, reject) => {
+        const tx = db.transaction(IDBStore, "readonly");
+        const req = tx.objectStore(IDBStore).get(key);
+        req.onsuccess = () => {
+            db.close();
+            resolve(req.result as Blob | undefined);
+        };
+        req.onerror = () => {
+            db.close();
+            reject(req.error ?? new Error("IDB get failed"));
+        };
+    });
+}
+
+async function IdbDeletePrefix(prefix: string): Promise<void> {
+    const db = await OpenIDB();
+    return await new Promise((resolve, reject) => {
+        const tx = db.transaction(IDBStore, "readwrite");
+        const store = tx.objectStore(IDBStore);
+        const cursorReq = store.openCursor();
+        cursorReq.onsuccess = () => {
+            const cursor = cursorReq.result;
+            if (cursor) {
+                if (typeof cursor.key === "string" && cursor.key.startsWith(prefix)) {
+                    cursor.delete();
+                }
+                cursor.continue();
+            }
+        };
+        tx.oncomplete = () => {
+            db.close();
+            resolve();
+        };
+        tx.onerror = () => {
+            db.close();
+            reject(tx.error ?? new Error("IDB transaction failed"));
+        };
+    });
+}
+
+// ─── AvatarManager ────────────────────────────────────────────────────────────
+
+/**
+ *
+ */
+export class AvatarManager {
+    private _avatars: StoredAvatar[] = [];
+
+    public constructor(private readonly _settingsStore: ISettingsStore) {
+        this._loadFromStorage();
+    }
+
+    // ─── Public API ───────────────────────────────────────────────────────────
+
+    public getAllAvatars(): readonly StoredAvatar[] {
+        return this._avatars;
+    }
+
+    public getAvatar(name: string): StoredAvatar | undefined {
+        return this._avatars.find((a) => a.name === name);
+    }
+
+    public getAvatarById(id: string): StoredAvatar | undefined {
+        return this._avatars.find((a) => a.id === id);
+    }
+
+    /**
+     * Adds or replaces an avatar.
+     * If the avatar has no `id`, one is generated automatically.
+     * For file-based avatars, the files must already be stored in IndexedDB via `storeFilesAsync`.
+     * @param avatar - The avatar to add or replace.
+     */
+    public addAvatar(avatar: StoredAvatar): void {
+        if (!avatar.id) {
+            avatar.id = GenerateId();
+        }
+        const idx = this._avatars.findIndex((a) => a.id === avatar.id);
+        if (idx !== -1) {
+            this._avatars[idx] = avatar;
+        } else {
+            this._avatars.push(avatar);
+        }
+        this._saveToStorage();
+    }
+
+    /**
+     * Removes an avatar by id and its associated files from IndexedDB.
+     * @param id - The avatar id to remove.
+     */
+    public async removeAvatarAsync(id: string): Promise<void> {
+        const avatar = this._avatars.find((a) => a.id === id);
+        if (!avatar) {
+            return;
+        }
+        if (avatar.source === "file") {
+            await IdbDeletePrefix(`avatar:${id}/`);
+        }
+        this._avatars = this._avatars.filter((a) => a.id !== id);
+        this._saveToStorage();
+    }
+
+    /**
+     * Stores files in IndexedDB for a file-based avatar, keyed by its immutable id.
+     * @param avatarId - The avatar id.
+     * @param files - The files to store.
+     * @returns The list of file names stored.
+     */
+    public async storeFilesAsync(avatarId: string, files: File[]): Promise<string[]> {
+        const fileNames: string[] = [];
+        await Promise.all(
+            files.map(async (file) => {
+                const key = `avatar:${avatarId}/${file.name}`;
+                await IdbPut(key, file);
+                fileNames.push(file.name);
+            })
+        );
+        return fileNames;
+    }
+
+    /**
+     * Retrieves files from IndexedDB for a file-based avatar and converts them to File objects.
+     * @param avatarId - The avatar id.
+     * @param fileNames - The file names to retrieve.
+     * @returns Array of File objects.
+     */
+    public async getFilesAsync(avatarId: string, fileNames: string[]): Promise<File[]> {
+        const results = await Promise.all(
+            fileNames.map(async (fileName) => {
+                const key = `avatar:${avatarId}/${fileName}`;
+                const blob = await IdbGet(key);
+                if (blob) {
+                    return new File([blob], fileName, { type: blob.type });
+                }
+                return undefined;
+            })
+        );
+        return results.filter((f): f is File => f !== undefined);
+    }
+
+    /**
+     * Returns all avatars in a JSON-serializable format, including base64-encoded file data for file-based entries.
+     * Session-only entries are excluded from the export.
+     * @returns Array of stored avatars with optional file data.
+     */
+    public async exportDataAsync(): Promise<
+        Array<
+            StoredAvatar & {
+                /**
+                 *
+                 */
+                fileData?: Record<string, string>;
+            }
+        >
+    > {
+        return await Promise.all(
+            this._avatars
+                .filter((avatar) => !avatar.sessionOnly)
+                .map(async (avatar) => {
+                    const entry: StoredAvatar & {
+                        /**
+                         *
+                         */
+                        fileData?: Record<string, string>;
+                    } = { ...avatar };
+                    if (avatar.source === "file" && avatar.fileNames?.length) {
+                        const files = await this.getFilesAsync(avatar.id, avatar.fileNames);
+                        const pairs = await Promise.all(files.map(async (file) => [file.name, await BlobToBase64(file)] as const));
+                        const fileData: Record<string, string> = {};
+                        for (const [name, b64] of pairs) {
+                            fileData[name] = b64;
+                        }
+                        entry.fileData = fileData;
+                    }
+                    return entry;
+                })
+        );
+    }
+
+    /**
+     * Imports avatars, including restoring file-based entries to IndexedDB from base64 data.
+     * @param avatars - The avatars to import with optional file data.
+     * @param mode - "replace" clears all existing data first; "append" skips duplicates.
+     * @returns List of skipped entry descriptions.
+     */
+    public async importDataAsync(
+        avatars: Array<
+            StoredAvatar & {
+                /**
+                 *
+                 */
+                fileData?: Record<string, string>;
+            }
+        >,
+        mode: "replace" | "append"
+    ): Promise<string[]> {
+        const skipped: string[] = [];
+
+        if (mode === "replace") {
+            this._avatars = [];
+        }
+
+        // Sequential processing needed: each entry may depend on prior state for duplicate detection
+        for (const avatar of avatars) {
+            if (mode === "append" && this._avatars.some((a) => a.name === avatar.name)) {
+                skipped.push(`avatar "${avatar.name}"`);
+            } else {
+                const newId = GenerateId();
+                const { fileData, ...avatarData } = avatar;
+                this._avatars.push({ ...avatarData, id: newId });
+
+                if (avatarData.source === "file" && fileData) {
+                    const fileEntries = Object.entries(fileData);
+                    // eslint-disable-next-line no-await-in-loop
+                    await Promise.all(
+                        fileEntries.map(async ([fileName, base64]) => {
+                            const blob = Base64ToBlob(base64);
+                            await IdbPut(`avatar:${newId}/${fileName}`, blob);
+                        })
+                    );
+                    this._avatars[this._avatars.length - 1].fileNames = fileEntries.map(([n]) => n);
+                }
+            }
+        }
+
+        this._saveToStorage();
+        return skipped;
+    }
+
+    /**
+     * Creates default avatar entries if the list is empty.
+     */
+    public createDefaults(): void {
+        if (this._avatars.length > 0) {
+            return;
+        }
+        const baseUrl = "https://assets.babylonjs.com/mixamo/Characters/";
+        const defaults: {
+            /**
+             *
+             */
+            name: string /**
+             *
+             */;
+            file: string /**
+             *
+             */;
+            scheme: string;
+        }[] = [
+            { name: "Big Vegas", file: "Big Vegas.glb", scheme: "Mixamo" },
+            { name: "Mousey", file: "Ch14_nonPBR.glb", scheme: "Mixamo" },
+            { name: "Goblin", file: "goblin_d_shareyko.glb", scheme: "Mixamo" },
+            { name: "Ready Player Me", file: "rpm.glb", scheme: "Mixamo No Namespace" },
+            { name: "White Clown", file: "Whiteclown N Hallin.glb", scheme: "Mixamo" },
+        ];
+        for (const d of defaults) {
+            this.addAvatar({
+                id: "",
+                name: d.name,
+                source: "url",
+                url: baseUrl + d.file,
+                namingScheme: d.scheme,
+                rootNodeName: "__root__",
+                rootNodeIndex: 0,
+            });
+        }
+    }
+
+    /**
+     * Removes all session-only entries and saves the updated list.
+     */
+    public purgeSessionOnly(): void {
+        const before = this._avatars.length;
+        this._avatars = this._avatars.filter((a) => !a.sessionOnly);
+        if (this._avatars.length !== before) {
+            this._saveToStorage();
+        }
+    }
+
+    // ─── Private ──────────────────────────────────────────────────────────────
+
+    private _loadFromStorage(): void {
+        try {
+            const data = this._settingsStore.readSetting(AvatarSettingDescriptor);
+            this._avatars = data.avatars ?? [];
+            // Backward compat: ensure rootNodeIndex exists for url/file sources
+            for (const a of this._avatars) {
+                if (a.rootNodeIndex === undefined && a.source !== "scene") {
+                    a.rootNodeIndex = 0;
+                }
+            }
+        } catch {
+            this._avatars = [];
+        }
+    }
+
+    private _saveToStorage(): void {
+        const data: SerializedData = { avatars: this._avatars };
+        this._settingsStore.writeSetting(AvatarSettingDescriptor, data);
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
new file mode 100644
index 00000000000..fe718dc218b
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -0,0 +1,959 @@
+import { type FunctionComponent, useState, useCallback, useRef, useEffect } from "react";
+import { type AvatarManager, type StoredAvatar, type RestPoseDataUpdate } from "./avatarManager";
+import { type NamingSchemeManager } from "./namingSchemeManager";
+import { type Nullable } from "core/types";
+
+import {
+    Input,
+    Label,
+    makeStyles,
+    mergeClasses,
+    tokens,
+    Body1Strong,
+    Caption1,
+    Dialog,
+    DialogSurface,
+    DialogBody,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Spinner,
+    DataGrid,
+    DataGridHeader,
+    DataGridBody,
+    DataGridRow,
+    DataGridHeaderCell,
+    DataGridCell,
+    createTableColumn,
+    type TableColumnDefinition,
+    type TableColumnSizingOptions,
+} from "@fluentui/react-components";
+
+import { Button } from "shared-ui-components/fluent/primitives/button";
+import { TextInput } from "shared-ui-components/fluent/primitives/textInput";
+import { StringDropdown } from "shared-ui-components/fluent/primitives/dropdown";
+import { AddRegular, DeleteRegular, EditRegular, ArrowUploadRegular, DocumentArrowLeftRegular } from "@fluentui/react-icons";
+import { Textarea } from "shared-ui-components/fluent/primitives/textarea";
+import { NullEngine } from "core/Engines/nullEngine";
+import { Scene } from "core/scene";
+import { ImportMeshAsync, SceneLoader } from "core/Loading/sceneLoader";
+import { type Node } from "core/node";
+import { type AbstractMesh } from "core/Meshes/abstractMesh";
+import { FilesInputStore } from "core/Misc/filesInputStore";
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const useStyles = makeStyles({
+    panel: {
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+    },
+    listHeader: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexShrink: 0,
+        paddingBottom: tokens.spacingVerticalXS,
+    },
+    listButtons: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+    },
+    editSectionFlex: {
+        flex: 1,
+        overflowY: "auto",
+        borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+        paddingTop: tokens.spacingVerticalS,
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+    },
+    formRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        flexShrink: 0,
+    },
+    formLabel: {
+        flexShrink: 0,
+        width: "110px",
+    },
+    formControl: {
+        flex: 1,
+        textAlign: "left",
+        "& span": { textAlign: "left" },
+        "& input": { textAlign: "left" },
+    },
+    actionRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalS,
+        justifyContent: "flex-end",
+        flexShrink: 0,
+    },
+    errorText: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: tokens.fontSizeBase200,
+        flexShrink: 0,
+    },
+    emptyMsg: {
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+        color: tokens.colorNeutralForeground3,
+        fontSize: tokens.fontSizeBase200,
+    },
+    confirmSurface: {
+        width: "380px",
+        maxWidth: "90vw",
+    },
+    restPoseTextarea: {
+        resize: "vertical",
+        width: "100%",
+        minHeight: "150px",
+        maxHeight: "300px",
+        boxSizing: "border-box",
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusMedium,
+        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
+        fontFamily: "monospace",
+        fontSize: tokens.fontSizeBase100,
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+    },
+    dropZone: {
+        border: `2px dashed ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusMedium,
+        padding: tokens.spacingVerticalM,
+        textAlign: "center",
+        cursor: "pointer",
+        color: tokens.colorNeutralForeground3,
+        fontSize: tokens.fontSizeBase200,
+    },
+    dropZoneActive: {
+        border: `2px dashed ${tokens.colorCompoundBrandStroke}`,
+        backgroundColor: tokens.colorBrandBackground2,
+    },
+    nodeTree: {
+        flex: 1,
+        overflowY: "auto",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        minHeight: "80px",
+    },
+    nodeRow: {
+        padding: `0 ${tokens.spacingHorizontalS}`,
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: "13px",
+        fontFamily: "monospace",
+        cursor: "pointer",
+        whiteSpace: "pre",
+    },
+    nodeRowSelected: {
+        backgroundColor: tokens.colorBrandBackground2,
+        fontWeight: "bold",
+    },
+    dataGridFlex: {
+        flex: 1,
+        overflowY: "auto",
+    },
+    dataGridCompact: {
+        maxHeight: "140px",
+        overflowY: "auto",
+    },
+    hiddenInput: {
+        display: "none",
+    },
+    subtleText: {
+        color: tokens.colorNeutralForeground3,
+    },
+    spinnerInline: {
+        display: "inline-block",
+    },
+    formRowAlignStart: {
+        alignItems: "flex-start",
+    },
+    formLabelPadTop: {
+        paddingTop: "6px",
+    },
+});
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type AvatarEdit = {
+    id: string | null;
+    originalName: string | null;
+    name: string;
+    sourceType: "url" | "file" | "scene";
+    url: string;
+    files: File[];
+    /** Index into the nodeList array — used for unique selection in the dialog. */
+    rootNodeIndex: number;
+    /** Name of the root node — for display and scene-source lookup. */
+    rootNodeName: string;
+    namingScheme: string;
+    restPoseJson: string;
+    sessionOnly?: boolean;
+};
+
+type NodeInfo = {
+    name: string;
+    depth: number;
+    /** Index in scene.meshes (-1 if not a mesh). */
+    meshIndex: number;
+    /** Pre-computed tree prefix using box-drawing characters (e.g. "│  ├─ "). */
+    prefix: string;
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Recursively builds a flat node list with tree-drawing prefixes.
+ * `ancestorContinues` tracks, for each ancestor depth, whether a vertical line should continue
+ * (i.e. the ancestor has more siblings below it).
+ * @param node - The current node.
+ * @param depth - The current depth level.
+ * @param list - The flat list being built.
+ * @param ancestorContinues - Tracks vertical line continuation per depth.
+ * @param meshes - Optional meshes array for mesh index lookup.
+ */
+function BuildNodeList(node: Node, depth: number, list: NodeInfo[], ancestorContinues: boolean[], meshes?: AbstractMesh[]): void {
+    let prefix = "";
+    if (depth > 0) {
+        // Draw continuation lines for ancestors
+        for (let i = 1; i < depth; i++) {
+            prefix += ancestorContinues[i] ? "│  " : "   ";
+        }
+        // Draw the branch connector for this node
+        const isLast = !ancestorContinues[depth];
+        prefix += isLast ? "└─ " : "├─ ";
+    }
+    const meshIndex = meshes ? meshes.indexOf(node as AbstractMesh) : -1;
+    list.push({ name: node.name, depth, meshIndex, prefix });
+
+    const children = node.getChildren();
+    for (let i = 0; i < children.length; i++) {
+        const isLastChild = i === children.length - 1;
+        ancestorContinues[depth + 1] = !isLastChild;
+        BuildNodeList(children[i], depth + 1, list, ancestorContinues, meshes);
+    }
+}
+
+/**
+ * Detects the best matching naming scheme by checking how many node names
+ * appear in each scheme. Returns the scheme with the most matches
+ * (minimum 10 required), or null if none qualify.
+ * @param nodeNames - Set of node names to match against schemes.
+ * @param namingSchemeManager - The naming scheme manager.
+ * @returns The best matching scheme name, or null.
+ */
+function DetectNamingScheme(nodeNames: Set<string>, namingSchemeManager: NamingSchemeManager): string | null {
+    const schemeNames = namingSchemeManager.getAllSchemeNames();
+    let bestScheme: string | null = null;
+    let bestCount = 0;
+
+    for (const schemeName of schemeNames) {
+        const entries = namingSchemeManager.getNamingScheme(schemeName);
+        if (!entries) {
+            continue;
+        }
+        const boneSet = new Set(entries.map((e) => e.name));
+        let matches = 0;
+        for (const name of nodeNames) {
+            if (boneSet.has(name)) {
+                matches++;
+            }
+        }
+        if (matches > bestCount) {
+            bestCount = matches;
+            bestScheme = schemeName;
+        }
+    }
+
+    return bestCount >= 10 ? bestScheme : null;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Avatars tab panel for the retargeting config dialog.
+ * @returns The React element.
+ */
+export const AvatarsPanel: FunctionComponent<{
+    avatarManager: AvatarManager;
+    namingSchemeManager: NamingSchemeManager;
+    getCurrentScene: () => Nullable<Scene>;
+    onMutate: () => void;
+    onEditingChange: (editing: boolean) => void;
+}> = ({ avatarManager, namingSchemeManager, getCurrentScene, onMutate, onEditingChange }) => {
+    const classes = useStyles();
+    const [editing, setEditing] = useState<AvatarEdit | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [confirmDelete, setConfirmDelete] = useState<{
+        id: string /**
+         *
+         */;
+        name: string;
+    } | null>(null);
+    const [nodeList, setNodeList] = useState<NodeInfo[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+
+    // Temp engine/scene for preview loading
+    const tempEngineRef = useRef<NullEngine | null>(null);
+    const tempSceneRef = useRef<Scene | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // Dispose temp engine on unmount
+    useEffect(() => {
+        return () => {
+            tempSceneRef.current?.dispose();
+            tempEngineRef.current?.dispose();
+        };
+    }, []);
+
+    const setEditingWithNotify = useCallback(
+        (value: AvatarEdit | null) => {
+            setEditing(value);
+            onEditingChange(value !== null);
+        },
+        [onEditingChange]
+    );
+
+    const allAvatars = [...avatarManager.getAllAvatars()].sort((a, b) => a.name.localeCompare(b.name));
+    const schemeNames = namingSchemeManager.getAllSchemeNames();
+
+    const avatarColumnSizing: TableColumnSizingOptions = {
+        name: { defaultWidth: 150 },
+        source: { defaultWidth: 60 },
+        scheme: { defaultWidth: 150 },
+        actions: { defaultWidth: 80 },
+    };
+
+    const avatarColumns: TableColumnDefinition<StoredAvatar>[] = [
+        createTableColumn({ columnId: "name", renderHeaderCell: () => "Name", renderCell: (item) => item.name }),
+        createTableColumn({
+            columnId: "source",
+            renderHeaderCell: () => "Source",
+            renderCell: (item) =>
+                item.sessionOnly
+                    ? `${item.source === "scene" ? "Scene" : item.source === "url" ? "URL" : "File"} (session)`
+                    : item.source === "scene"
+                      ? "Scene"
+                      : item.source === "url"
+                        ? "URL"
+                        : "File",
+        }),
+        createTableColumn({ columnId: "scheme", renderHeaderCell: () => "Scheme", renderCell: (item) => item.namingScheme }),
+        createTableColumn({
+            columnId: "actions",
+            renderHeaderCell: () => "",
+            renderCell: (item) => (
+                <>
+                    <Button
+                        appearance="transparent"
+                        icon={EditRegular}
+                        title="Edit"
+                        disabled={!!editing}
+                        onClick={() => {
+                            void startEdit(item);
+                        }}
+                    />
+                    <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(item)} />
+                </>
+            ),
+        }),
+    ];
+
+    // ─── Load preview ─────────────────────────────────────────────────────
+
+    const loadPreview = useCallback(
+        async (sourceType: "url" | "file", url: string, files: File[], autoDetectScheme: boolean) => {
+            setIsLoading(true);
+            setNodeList([]);
+            setError(null);
+
+            // Dispose previous temp scene/engine
+            tempSceneRef.current?.dispose();
+            tempEngineRef.current?.dispose();
+
+            try {
+                const engine = new NullEngine();
+                tempEngineRef.current = engine;
+                const scene = new Scene(engine);
+                tempSceneRef.current = scene;
+
+                if (sourceType === "url") {
+                    await ImportMeshAsync(url.trim(), scene);
+                } else {
+                    // Register all files in FilesInputStore so the scene loader can resolve relative references.
+                    // Keys must be lowercase filenames — this matches how fileTools.ts resolves "file:" URLs.
+                    let sceneFile: File | undefined;
+                    for (const file of files) {
+                        const name = file.name.toLowerCase();
+                        FilesInputStore.FilesToLoad[name] = file;
+                        // The main scene file is the one whose extension has a registered loader plugin
+                        const ext = name.split(".").pop();
+                        if (ext && SceneLoader.IsPluginForExtensionAvailable("." + ext)) {
+                            sceneFile = file;
+                        }
+                    }
+                    if (!sceneFile) {
+                        sceneFile = files[0];
+                    }
+                    // Use "file:" as rootUrl so the loader resolves relative assets (e.g. .bin, textures) from FilesInputStore
+                    await ImportMeshAsync(sceneFile.name, scene, { rootUrl: "file:" });
+                }
+
+                // Build the node tree from root nodes
+                const nodes: NodeInfo[] = [];
+                const rootNodes = scene.rootNodes;
+                const meshList = [...scene.meshes];
+                for (let i = 0; i < rootNodes.length; i++) {
+                    const ancestorContinues: boolean[] = [];
+                    ancestorContinues[0] = i < rootNodes.length - 1;
+                    BuildNodeList(rootNodes[i], 0, nodes, ancestorContinues, meshList);
+                }
+                setNodeList(nodes);
+                // Auto-select first node and optionally detect the naming scheme
+                if (nodes.length > 0) {
+                    let detectedScheme: string | null = null;
+
+                    if (autoDetectScheme) {
+                        const nodeNames = new Set(nodes.map((n) => n.name));
+                        detectedScheme = DetectNamingScheme(nodeNames, namingSchemeManager);
+
+                        // Fallback: if no match from node names, try skeleton bone names
+                        if (!detectedScheme) {
+                            const boneNames = new Set<string>();
+                            for (const mesh of scene.meshes) {
+                                if (mesh.skeleton) {
+                                    for (const bone of mesh.skeleton.bones) {
+                                        boneNames.add(bone.name);
+                                    }
+                                }
+                            }
+                            if (boneNames.size > 0) {
+                                detectedScheme = DetectNamingScheme(boneNames, namingSchemeManager);
+                            }
+                        }
+                    }
+
+                    setEditing((prev) => {
+                        if (!prev) {
+                            return prev;
+                        }
+                        // Resolve rootNodeIndex: use existing if valid, else find by name, else default to 0
+                        let idx = prev.rootNodeIndex;
+                        if (idx < 0 && prev.rootNodeName) {
+                            idx = nodes.findIndex((n) => n.name === prev.rootNodeName);
+                        }
+                        if (idx < 0) {
+                            idx = 0;
+                        }
+
+                        // Detect naming scheme from the selected node's subtree
+                        let scheme = detectedScheme;
+                        if (!scheme) {
+                            const selectedDepth = nodes[idx].depth;
+                            const descendantNames = new Set<string>();
+                            descendantNames.add(nodes[idx].name);
+                            for (let j = idx + 1; j < nodes.length; j++) {
+                                if (nodes[j].depth <= selectedDepth) {
+                                    break;
+                                }
+                                descendantNames.add(nodes[j].name);
+                            }
+                            scheme = DetectNamingScheme(descendantNames, namingSchemeManager);
+                        }
+
+                        return {
+                            ...prev,
+                            rootNodeIndex: idx,
+                            rootNodeName: prev.rootNodeName || nodes[idx].name,
+                            ...(scheme ? { namingScheme: scheme } : {}),
+                        };
+                    });
+                }
+            } catch (e) {
+                setError(`Failed to load: ${e instanceof Error ? e.message : String(e)}`);
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [namingSchemeManager]
+    );
+
+    // ─── CRUD handlers ────────────────────────────────────────────────────
+
+    const startAdd = useCallback(() => {
+        setEditingWithNotify({
+            id: null,
+            originalName: null,
+            name: "",
+            sourceType: "url",
+            url: "",
+            files: [],
+            rootNodeIndex: -1,
+            rootNodeName: "",
+            namingScheme: schemeNames[0] ?? "",
+            restPoseJson: "",
+        });
+        setError(null);
+        setNodeList([]);
+    }, [schemeNames, setEditingWithNotify]);
+
+    const startEdit = useCallback(
+        async (avatar: StoredAvatar) => {
+            setEditingWithNotify({
+                id: avatar.id,
+                originalName: avatar.name,
+                name: avatar.name,
+                sourceType: avatar.source,
+                url: avatar.url ?? "",
+                files: [],
+                rootNodeIndex: -1,
+                rootNodeName: avatar.rootNodeName,
+                namingScheme: avatar.namingScheme,
+                restPoseJson: avatar.restPoseUpdate ? JSON.stringify(avatar.restPoseUpdate, undefined, 2) : "",
+                sessionOnly: avatar.sessionOnly,
+            });
+            setError(null);
+            setNodeList([]);
+            // Auto-load preview
+            if (avatar.source === "scene") {
+                const scene = getCurrentScene();
+                if (scene) {
+                    const nodes: NodeInfo[] = [];
+                    const rootNodes = scene.rootNodes;
+                    for (let i = 0; i < rootNodes.length; i++) {
+                        const ancestorContinues: boolean[] = [];
+                        ancestorContinues[0] = i < rootNodes.length - 1;
+                        BuildNodeList(rootNodes[i], 0, nodes, ancestorContinues);
+                    }
+                    setNodeList(nodes);
+                    // Resolve rootNodeIndex from the stored name
+                    const foundIdx = nodes.findIndex((n) => n.name === avatar.rootNodeName);
+                    if (foundIdx >= 0) {
+                        setEditing((prev) => (prev ? { ...prev, rootNodeIndex: foundIdx } : prev));
+                    }
+                }
+            } else if (avatar.source === "url" && avatar.url) {
+                void loadPreview("url", avatar.url, [], false);
+            } else if (avatar.source === "file" && avatar.fileNames?.length) {
+                const files = await avatarManager.getFilesAsync(avatar.id, avatar.fileNames);
+                if (files.length > 0) {
+                    void loadPreview("file", "", files, false);
+                }
+            }
+        },
+        [setEditingWithNotify, loadPreview, avatarManager, getCurrentScene]
+    );
+
+    const startImportFromScene = useCallback(() => {
+        const scene = getCurrentScene();
+        if (!scene) {
+            return;
+        }
+
+        setEditingWithNotify({
+            id: null,
+            originalName: null,
+            name: "",
+            sourceType: "scene",
+            url: "",
+            files: [],
+            rootNodeIndex: -1,
+            rootNodeName: "",
+            namingScheme: schemeNames[0] ?? "",
+            restPoseJson: "",
+            sessionOnly: true,
+        });
+        setError(null);
+
+        // Build node tree directly from the PG scene's root nodes
+        const nodes: NodeInfo[] = [];
+        const rootNodes = scene.rootNodes;
+        for (let i = 0; i < rootNodes.length; i++) {
+            const ancestorContinues: boolean[] = [];
+            ancestorContinues[0] = i < rootNodes.length - 1;
+            BuildNodeList(rootNodes[i], 0, nodes, ancestorContinues);
+        }
+        setNodeList(nodes);
+
+        // Auto-detect naming scheme from the first (default-selected) node's subtree
+        let detectedScheme: string | null = null;
+        if (nodes.length > 0) {
+            const firstDepth = nodes[0].depth;
+            const descendantNames = new Set<string>();
+            descendantNames.add(nodes[0].name);
+            for (let j = 1; j < nodes.length; j++) {
+                if (nodes[j].depth <= firstDepth) {
+                    break;
+                }
+                descendantNames.add(nodes[j].name);
+            }
+            detectedScheme = DetectNamingScheme(descendantNames, namingSchemeManager);
+        }
+        // Fallback: try skeleton bone names
+        if (!detectedScheme) {
+            const boneNames = new Set<string>();
+            for (const mesh of scene.meshes) {
+                if (mesh.skeleton) {
+                    for (const bone of mesh.skeleton.bones) {
+                        boneNames.add(bone.name);
+                    }
+                }
+            }
+            if (boneNames.size > 0) {
+                detectedScheme = DetectNamingScheme(boneNames, namingSchemeManager);
+            }
+        }
+
+        if (nodes.length > 0) {
+            setEditing((prev) => {
+                if (!prev) {
+                    return prev;
+                }
+                return {
+                    ...prev,
+                    rootNodeIndex: 0,
+                    rootNodeName: nodes[0].name,
+                    ...(detectedScheme ? { namingScheme: detectedScheme } : {}),
+                };
+            });
+        }
+    }, [getCurrentScene, schemeNames, setEditingWithNotify, namingSchemeManager]);
+
+    const handleCancel = useCallback(() => {
+        setEditingWithNotify(null);
+        setError(null);
+        setNodeList([]);
+        // Dispose temp scene
+        tempSceneRef.current?.dispose();
+        tempSceneRef.current = null;
+        tempEngineRef.current?.dispose();
+        tempEngineRef.current = null;
+    }, [setEditingWithNotify]);
+
+    const handleSave = useCallback(async () => {
+        if (!editing) {
+            return;
+        }
+        if (!editing.name.trim()) {
+            setError("Name is required.");
+            return;
+        }
+        if (!editing.rootNodeName) {
+            setError("Please load the file and select a root node.");
+            return;
+        }
+        if (!editing.namingScheme) {
+            setError("Please select a naming scheme.");
+            return;
+        }
+        // Check for duplicate name (only when adding or renaming)
+        if (editing.originalName !== editing.name.trim()) {
+            const existing = avatarManager.getAvatar(editing.name.trim());
+            if (existing) {
+                setError(`An avatar named "${editing.name.trim()}" already exists.`);
+                return;
+            }
+        }
+
+        try {
+            // Use existing id or let addAvatar generate a new one
+            const avatarId = editing.id ?? "";
+
+            let fileNames: string[] | undefined;
+            if (editing.sourceType === "file" && editing.files.length > 0) {
+                // For new avatars, we pass "" and addAvatar will assign the id before we store.
+                // So we need to store files after addAvatar for new entries. Let's handle this:
+                if (avatarId) {
+                    fileNames = await avatarManager.storeFilesAsync(avatarId, editing.files);
+                }
+            } else if (editing.sourceType === "file" && editing.id) {
+                // Editing an existing file-based avatar without new files — keep existing file names
+                const existing = avatarManager.getAvatarById(editing.id);
+                fileNames = existing?.fileNames;
+            }
+
+            let restPoseUpdate: RestPoseDataUpdate | undefined;
+            if (editing.restPoseJson.trim()) {
+                try {
+                    restPoseUpdate = JSON.parse(editing.restPoseJson);
+                } catch {
+                    setError("Invalid JSON in rest pose data.");
+                    return;
+                }
+            }
+
+            const selectedNode = editing.rootNodeIndex >= 0 ? nodeList[editing.rootNodeIndex] : undefined;
+            const avatar: StoredAvatar = {
+                id: avatarId,
+                name: editing.name.trim(),
+                source: editing.sourceType,
+                url: editing.sourceType === "url" ? editing.url.trim() : undefined,
+                fileNames: editing.sourceType === "file" ? fileNames : undefined,
+                namingScheme: editing.namingScheme,
+                rootNodeName: editing.rootNodeName,
+                rootNodeIndex: editing.sourceType !== "scene" && selectedNode ? selectedNode.meshIndex : undefined,
+                restPoseUpdate,
+                sessionOnly: editing.sessionOnly,
+            };
+
+            avatarManager.addAvatar(avatar);
+
+            // For new file-based avatars, the id was just generated by addAvatar — store files now
+            if (editing.sourceType === "file" && editing.files.length > 0 && !avatarId) {
+                const storedFileNames = await avatarManager.storeFilesAsync(avatar.id, editing.files);
+                avatar.fileNames = storedFileNames;
+                avatarManager.addAvatar(avatar); // update with file names
+            }
+
+            setEditingWithNotify(null);
+            setError(null);
+            setNodeList([]);
+            onMutate();
+        } catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+    }, [editing, avatarManager, onMutate, setEditingWithNotify]);
+
+    const handleDelete = useCallback((avatar: StoredAvatar) => {
+        setConfirmDelete({ id: avatar.id, name: avatar.name });
+    }, []);
+
+    const handleConfirmDelete = useCallback(async () => {
+        if (!confirmDelete) {
+            return;
+        }
+        await avatarManager.removeAvatarAsync(confirmDelete.id);
+        setConfirmDelete(null);
+        onMutate();
+    }, [confirmDelete, avatarManager, onMutate]);
+
+    // ─── Drag & drop ──────────────────────────────────────────────────────
+
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(true);
+    }, []);
+
+    const handleDragLeave = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    }, []);
+
+    const handleDrop = useCallback(
+        (e: React.DragEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragOver(false);
+            if (!editing) {
+                return;
+            }
+            const droppedFiles = Array.from(e.dataTransfer.files);
+            if (droppedFiles.length > 0) {
+                const updated = { ...editing, sourceType: "file" as const, files: droppedFiles, url: "" };
+                setEditing(updated);
+                void loadPreview("file", "", droppedFiles, true);
+            }
+        },
+        [editing, loadPreview]
+    );
+
+    const handleFileInput = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            if (!editing || !e.target.files) {
+                return;
+            }
+            const selectedFiles = Array.from(e.target.files);
+            if (selectedFiles.length > 0) {
+                const updated = { ...editing, sourceType: "file" as const, files: selectedFiles, url: "" };
+                setEditing(updated);
+                void loadPreview("file", "", selectedFiles, true);
+            }
+        },
+        [editing, loadPreview]
+    );
+
+    // ─── Render ───────────────────────────────────────────────────────────
+
+    return (
+        <div className={classes.panel}>
+            {/* Confirm delete dialog */}
+            <Dialog
+                open={confirmDelete !== null}
+                onOpenChange={(_, d) => {
+                    if (!d.open) {
+                        setConfirmDelete(null);
+                    }
+                }}
+            >
+                <DialogSurface className={classes.confirmSurface}>
+                    <DialogBody>
+                        <DialogTitle>Delete Avatar</DialogTitle>
+                        <DialogContent>
+                            Delete avatar <strong>"{confirmDelete?.name}"</strong> and all associated files?
+                        </DialogContent>
+                        <DialogActions>
+                            <Button appearance="secondary" label="Cancel" onClick={() => setConfirmDelete(null)} />
+                            <Button appearance="primary" label="Delete" onClick={handleConfirmDelete} />
+                        </DialogActions>
+                    </DialogBody>
+                </DialogSurface>
+            </Dialog>
+
+            <div className={classes.listHeader}>
+                <div className={classes.listButtons}>
+                    <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
+                    <Button icon={DocumentArrowLeftRegular} label="Import from scene" onClick={startImportFromScene} disabled={!!editing || !getCurrentScene()} />
+                </div>
+            </div>
+            {allAvatars.length === 0 && <Caption1 className={classes.emptyMsg}>No custom avatars defined.</Caption1>}
+            <DataGrid
+                items={allAvatars}
+                columns={avatarColumns}
+                getRowId={(item) => item.id}
+                className={mergeClasses(editing ? classes.dataGridCompact : classes.dataGridFlex)}
+                resizableColumns
+                columnSizingOptions={avatarColumnSizing}
+            >
+                <DataGridHeader>
+                    <DataGridRow>{({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}</DataGridRow>
+                </DataGridHeader>
+                <DataGridBody<StoredAvatar>>
+                    {({ item, rowId }) => <DataGridRow<StoredAvatar> key={rowId}>{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}</DataGridRow>}
+                </DataGridBody>
+            </DataGrid>
+
+            {editing && (
+                <div className={classes.editSectionFlex}>
+                    <Body1Strong>{editing.originalName ? `Editing "${editing.originalName}"` : "New Avatar"}</Body1Strong>
+
+                    {/* Name */}
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Name</Label>
+                        <TextInput className={classes.formControl} value={editing.name} onChange={(v) => setEditing({ ...editing, name: v })} />
+                    </div>
+
+                    {/* URL input — loads on Enter or blur (hidden for scene-sourced entries) */}
+                    {editing.sourceType !== "scene" && (
+                        <div className={classes.formRow}>
+                            <Label className={classes.formLabel}>URL</Label>
+                            <Input
+                                className={classes.formControl}
+                                size="small"
+                                value={editing.url}
+                                placeholder="https://..."
+                                onChange={(_, d) => setEditing({ ...editing, url: d.value })}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter" && editing.url.trim()) {
+                                        setEditing({ ...editing, sourceType: "url", files: [] });
+                                        void loadPreview("url", editing.url, [], true);
+                                    }
+                                }}
+                                input={{
+                                    onBlur: () => {
+                                        if (editing.url.trim() && editing.sourceType !== "file") {
+                                            void loadPreview("url", editing.url, [], true);
+                                        }
+                                    },
+                                }}
+                            />
+                        </div>
+                    )}
+
+                    {/* Drop zone — hidden for scene-sourced entries */}
+                    {editing.sourceType !== "scene" && (
+                        <div
+                            className={mergeClasses(classes.dropZone, isDragOver ? classes.dropZoneActive : undefined)}
+                            onDragOver={handleDragOver}
+                            onDragLeave={handleDragLeave}
+                            onDrop={handleDrop}
+                            onClick={() => fileInputRef.current?.click()}
+                        >
+                            <ArrowUploadRegular />
+                            <div>Drop file(s) here or click to browse</div>
+                            <input ref={fileInputRef} type="file" multiple className={classes.hiddenInput} onChange={handleFileInput} />
+                        </div>
+                    )}
+
+                    {/* Loading indicator */}
+                    {isLoading && (
+                        <Caption1 className={classes.subtleText}>
+                            Loading… <Spinner size="tiny" className={classes.spinnerInline} />
+                        </Caption1>
+                    )}
+
+                    {/* Node tree */}
+                    {nodeList.length > 0 && (
+                        <>
+                            <Caption1 className={classes.subtleText}>Select the root node of the avatar ({nodeList.length} nodes found):</Caption1>
+                            <div className={classes.nodeTree}>
+                                {nodeList.map((node, idx) => (
+                                    <div
+                                        key={idx}
+                                        className={mergeClasses(classes.nodeRow, editing.rootNodeIndex === idx ? classes.nodeRowSelected : undefined)}
+                                        onClick={() => {
+                                            // Collect descendant names from the selected node for naming scheme detection
+                                            const selectedDepth = node.depth;
+                                            const descendantNames = new Set<string>();
+                                            descendantNames.add(node.name);
+                                            for (let j = idx + 1; j < nodeList.length; j++) {
+                                                if (nodeList[j].depth <= selectedDepth) {
+                                                    break;
+                                                }
+                                                descendantNames.add(nodeList[j].name);
+                                            }
+                                            const detected = DetectNamingScheme(descendantNames, namingSchemeManager);
+                                            setEditing({
+                                                ...editing,
+                                                rootNodeIndex: idx,
+                                                rootNodeName: node.name,
+                                                ...(detected ? { namingScheme: detected } : {}),
+                                            });
+                                        }}
+                                    >
+                                        {node.prefix + node.name}
+                                    </div>
+                                ))}
+                            </div>
+                        </>
+                    )}
+
+                    {/* Naming scheme */}
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Naming scheme</Label>
+                        <StringDropdown
+                            className={classes.formControl}
+                            value={editing.namingScheme}
+                            options={schemeNames.map((n) => ({ label: n, value: n }))}
+                            onChange={(v) => setEditing({ ...editing, namingScheme: v })}
+                        />
+                    </div>
+
+                    {/* Rest pose data */}
+                    <div className={mergeClasses(classes.formRow, classes.formRowAlignStart)}>
+                        <Label className={mergeClasses(classes.formLabel, classes.formLabelPadTop)}>Rest pose data</Label>
+                        <Textarea
+                            className={classes.restPoseTextarea}
+                            value={editing.restPoseJson}
+                            placeholder='JSON array (optional). Use gizmos + "Save as rest pose" to generate this data.'
+                            onChange={(newVal) => setEditing({ ...editing, restPoseJson: newVal })}
+                        />
+                    </div>
+
+                    {error && <Caption1 className={classes.errorText}>{error}</Caption1>}
+                    <div className={classes.actionRow}>
+                        <Button appearance="secondary" label="Cancel" onClick={handleCancel} />
+                        <Button appearance="primary" label="Save" onClick={handleSave} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
new file mode 100644
index 00000000000..e4ad38a6801
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
@@ -0,0 +1,100 @@
+import { Dropdown, makeStyles, Option, useId, Body1 } from "@fluentui/react-components";
+import { type FunctionComponent, useContext, useEffect, useState } from "react";
+
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
+
+export type BoneOption = {
+    /**
+     *
+     */
+    label: string /**
+     *
+     */;
+    /**
+     *
+     */
+    value: string;
+};
+
+export type BoneDropdownProps = {
+    /**
+     *
+     */
+    value: string;
+    /**
+     *
+     */
+    options: readonly BoneOption[];
+    /**
+     *
+     */
+    onChange: (value: string) => void;
+    /**
+     *
+     */
+    disabled?: boolean;
+};
+
+const useStyles = makeStyles({
+    dropdown: {
+        minWidth: 0,
+        width: "100%",
+    },
+    buttonText: {
+        textAlign: "end",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflowX: "hidden",
+    },
+    listbox: {
+        overflowX: "hidden",
+        minWidth: "max-content",
+    },
+});
+
+/**
+ * A dropdown for bone/node selection.
+ * Unlike the generic StringDropdown, the popup list auto-sizes to content width
+ * (no matchTargetSize constraint) and hides horizontal overflow.
+ * @param props - The component props.
+ * @returns The rendered dropdown element.
+ */
+export const BoneDropdown: FunctionComponent<BoneDropdownProps> = (props) => {
+    BoneDropdown.displayName = "BoneDropdown";
+    const classes = useStyles();
+    const { size } = useContext(ToolContext);
+    const id = useId("bone-dropdown");
+    const [currentValue, setCurrentValue] = useState(props.value);
+
+    useEffect(() => {
+        setCurrentValue(props.value);
+    }, [props.value]);
+
+    const optionLabel = props.options.find((o) => o.value === currentValue)?.label;
+
+    return (
+        <Dropdown
+            id={id}
+            disabled={props.disabled}
+            size={size}
+            className={classes.dropdown}
+            button={<Body1 className={classes.buttonText}>{optionLabel}</Body1>}
+            positioning={{ matchTargetSize: undefined, position: "below", align: "start" }}
+            listbox={{ className: classes.listbox }}
+            selectedOptions={[currentValue]}
+            value={optionLabel ?? ""}
+            onOptionSelect={(_evt, data) => {
+                if (data.optionValue !== undefined) {
+                    setCurrentValue(data.optionValue);
+                    props.onChange(data.optionValue);
+                }
+            }}
+        >
+            {props.options.map((opt) => (
+                <Option key={opt.value} value={opt.value} text={opt.value}>
+                    {opt.label}
+                </Option>
+            ))}
+        </Dropdown>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
new file mode 100644
index 00000000000..f6077771988
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
@@ -0,0 +1,433 @@
+import { Logger } from "core/Misc/logger";
+
+let CurrentSnippetToken = "";
+
+/**
+ * Computes the squared distance from a point to a line defined by origin and direction.
+ * @param point - The point.
+ * @param origin - The line origin.
+ * @param direction - The line direction.
+ * @returns The squared distance.
+ */
+export function DistancePointToLine(
+    point: { x: number; y: number; z: number },
+    origin: { x: number; y: number; z: number },
+    direction: { x: number; y: number; z: number }
+): number {
+    const opX = point.x - origin.x;
+    const opY = point.y - origin.y;
+    const opZ = point.z - origin.z;
+
+    const dot = opX * direction.x + opY * direction.y + opZ * direction.z;
+
+    const projX = direction.x * dot;
+    const projY = direction.y * dot;
+    const projZ = direction.z * dot;
+
+    const diffX = opX - projX;
+    const diffY = opY - projY;
+    const diffZ = opZ - projZ;
+
+    return diffX * diffX + diffY * diffY + diffZ * diffZ;
+}
+
+function PackSnippetData(code: string) {
+    const v2 = {
+        v: 2,
+        language: "TS",
+        entry: "index.ts",
+        imports: {},
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        files: { "index.ts": code },
+    };
+    const codeToSave = JSON.stringify(v2);
+    const encoder = new TextEncoder();
+    const buffer = encoder.encode(codeToSave);
+    let testData = "";
+    for (let i = 0; i < buffer.length; i++) {
+        testData += String.fromCharCode(buffer[i]);
+    }
+    // EncodeArrayBufferToBase64 is not available as a module import easily, use btoa fallback
+    const unicode = testData !== codeToSave ? btoa(testData) : undefined;
+    const payload = JSON.stringify({
+        code: codeToSave,
+        unicode,
+        engine: "WebGL2",
+        version: 2,
+    });
+    return JSON.stringify({
+        payload,
+        name: "",
+        description: "",
+        tags: "",
+    });
+}
+
+/**
+ * Saves code as a Playground snippet and opens it in a new tab.
+ * @param code - The code to save.
+ * @param onBeforeOpen - Optional callback invoked just before opening the new tab.
+ * @returns A promise that resolves when the snippet is saved and opened.
+ */
+export async function SaveSnippet(code: string, onBeforeOpen?: () => void): Promise<void> {
+    return await new Promise<void>((resolve, reject) => {
+        const xmlHttp = new XMLHttpRequest();
+        xmlHttp.onreadystatechange = () => {
+            if (xmlHttp.readyState === 4) {
+                if (xmlHttp.status === 200) {
+                    const snippet = JSON.parse(xmlHttp.responseText);
+                    const baseUrl = location.href.replace(location.hash, "");
+                    let newUrl = baseUrl + "#" + snippet.id;
+                    newUrl = newUrl.replace("##", "#");
+                    CurrentSnippetToken = snippet.id;
+                    if (snippet.version && snippet.version !== "0") {
+                        newUrl += "#" + snippet.version;
+                    }
+                    onBeforeOpen?.();
+                    window.open(newUrl, "_blank");
+                    resolve();
+                } else {
+                    Logger.Error("Unable to save your code. It may be too long.");
+                    reject(new Error("Unable to save snippet"));
+                }
+            }
+        };
+
+        xmlHttp.open("POST", "https://snippet.babylonjs.com" + (CurrentSnippetToken ? "/" + CurrentSnippetToken : ""), true);
+        xmlHttp.withCredentials = false;
+        xmlHttp.setRequestHeader("Content-Type", "application/json");
+        xmlHttp.send(PackSnippetData(code));
+    });
+}
+
+export const TestPlaygroundCode = `
+type SourceDataUpdate = Array<{ name: string; data: { position?: number[], scaling?: number[], quaternion?: number[] } }>;
+
+async function loadMeshesAsync(path: string, scene: BABYLON.Scene) {
+    if (path.startsWith("files:")) {
+        const entries = JSON.parse(path.substring(6)) as { name: string; dataUrl: string }[];
+        let mainFile = "";
+        for (const entry of entries) {
+            const blob = await (await fetch(entry.dataUrl)).blob();
+            BABYLON.FilesInputStore.FilesToLoad[entry.name.toLowerCase()] = new File([blob], entry.name);
+            const ext = entry.name.toLowerCase().split(".").pop();
+            if (ext === "gltf" || ext === "glb" || ext === "babylon") {
+                mainFile = entry.name;
+            }
+        }
+        return BABYLON.ImportMeshAsync(mainFile, scene, { rootUrl: "file:" });
+    }
+    return BABYLON.ImportMeshAsync(path, scene);
+}
+
+async function appendSceneAsync(path: string, scene: BABYLON.Scene) {
+    if (path.startsWith("files:")) {
+        const entries = JSON.parse(path.substring(6)) as { name: string; dataUrl: string }[];
+        let mainFile = "";
+        for (const entry of entries) {
+            const blob = await (await fetch(entry.dataUrl)).blob();
+            BABYLON.FilesInputStore.FilesToLoad[entry.name.toLowerCase()] = new File([blob], entry.name);
+            const ext = entry.name.toLowerCase().split(".").pop();
+            if (ext === "gltf" || ext === "glb" || ext === "babylon") {
+                mainFile = entry.name;
+            }
+        }
+        return BABYLON.AppendSceneAsync(mainFile, scene, { rootUrl: "file:" });
+    }
+    return BABYLON.AppendSceneAsync(path, scene);
+}
+
+const avatarRestPoseUpdate: SourceDataUpdate = %avatarRestPoseUpdate%;
+const animationRestPoseUpdate: SourceDataUpdate = %animationRestPoseUpdate%;
+const nameRemapping = %nameRemapping%;
+
+class Playground {
+    public static async CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): Promise<BABYLON.Scene> {
+        const avatarPath = "%avatarPath%";
+        const animationPath = "%animationPath%";
+
+        const scene = new BABYLON.Scene(engine);
+
+        scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.env", scene);
+
+        if (avatarPath.indexOf("glb") < 0 && avatarPath.indexOf("gltf") < 0) {
+            new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
+        }
+
+        // Load the avatar
+        const result = await loadMeshesAsync(avatarPath, scene);
+
+        const avatarRootNode = result.meshes[%avatarRootNodeIndex%];
+        avatarRootNode.name = "avatar";
+
+        const numAnimations = scene.animationGroups.length;
+        const animationGroupIndex = %animationGroupIndex%;
+
+        // Load the animation
+        await appendSceneAsync(animationPath, scene);
+
+        const animRootNode = scene.getMeshByName("__root__");
+        animRootNode.name = "reference";
+
+        const sourceAnimationGroup = scene.animationGroups[numAnimations + animationGroupIndex];
+
+        scene.stopAllAnimations();
+
+        // Create the camera
+        scene.createDefaultCamera(true, true, true);
+
+        const camera = scene.activeCamera as BABYLON.ArcRotateCamera;
+
+        camera.alpha += Math.PI;
+
+        // Retarget the animation and play it
+        const retargetOptions: BABYLON.IRetargetOptions = %retargetOptions%;
+
+        const retargetedAnimation = Playground._RetargetAnimation(
+            sourceAnimationGroup,
+            animRootNode,
+            avatarRootNode,
+            animationRestPoseUpdate,
+            avatarRestPoseUpdate,
+            nameRemapping,
+            retargetOptions
+        );
+
+        retargetedAnimation.start(true);
+
+        return scene;
+    }
+
+    private static _RetargetAnimation(
+        sourceAnimationGroup: BABYLON.AnimationGroup,
+        animRootNode: BABYLON.AbstractMesh,
+        avatarRootNode: BABYLON.AbstractMesh,
+        animationRestPoseUpdate: SourceDataUpdate,
+        avatarRestPoseUpdate: SourceDataUpdate,
+        nameRemapping: string[],
+        retargetOptions: BABYLON.IRetargetOptions,
+        disposeSource = true)
+    {
+        const avatar = new BABYLON.AnimatorAvatar("avatar", avatarRootNode, false);
+
+        for (const dataBlock of animationRestPoseUpdate) {
+            const node = animRootNode.getChildTransformNodes(false, (node) => node.name === dataBlock.name)[0];
+            if (node) {
+                if (dataBlock.data.position) node.position.fromArray(dataBlock.data.position);
+                if (dataBlock.data.scaling) node.scaling.fromArray(dataBlock.data.scaling);
+                if (dataBlock.data.quaternion) node.rotationQuaternion!.fromArray(dataBlock.data.quaternion);
+            }
+        }
+
+        if (avatarRestPoseUpdate.length > 0) {
+            const [avatarSkeleton] = avatar.skeletons;
+
+            for (const dataBlock of avatarRestPoseUpdate) {
+                const index = avatarSkeleton.getBoneIndexByName(dataBlock.name);
+                if (index !== -1) {
+                    const bone = avatarSkeleton.bones[index];
+                    if (dataBlock.data.position) bone.position = BABYLON.TmpVectors.Vector3[0].fromArray(dataBlock.data.position);
+                    if (dataBlock.data.scaling) bone.scaling = BABYLON.TmpVectors.Vector3[0].fromArray(dataBlock.data.scaling);
+                    if (dataBlock.data.quaternion) bone.rotationQuaternion = BABYLON.TmpVectors.Quaternion[0].fromArray(dataBlock.data.quaternion);
+                }
+            }
+            avatarSkeleton.setCurrentPoseAsRest();
+        }
+
+        for (const skeleton of avatar.skeletons) {
+            skeleton.returnToRest();
+        }
+
+        const mapNodeNames = new Map<string, string>();
+        for (let i = 0; i < nameRemapping.length; i += 2) {
+            mapNodeNames.set(nameRemapping[i], nameRemapping[i + 1]);
+        }
+
+        retargetOptions.mapNodeNames = mapNodeNames;
+
+        const retargetedAnimation = avatar.retargetAnimationGroup(sourceAnimationGroup, retargetOptions);
+
+        avatar.dispose();
+
+        if (disposeSource) {
+            sourceAnimationGroup.dispose();
+            animRootNode.dispose(false);
+        }
+
+        return retargetedAnimation;
+    }
+}
+export { Playground };
+`;
+
+/**
+ * Helper code shared across all "Export to Scene" tabs.
+ * Written to "retarget.helpers.ts" once and imported by each retargetingN.ts file.
+ */
+export const ExportToSceneHelpersCode = `
+export type SourceDataUpdate = Array<{ name: string; data: { position?: number[], scaling?: number[], quaternion?: number[] } }>;
+
+export async function loadMeshesAsync(path: string, scene: BABYLON.Scene) {
+    if (path.startsWith("files:")) {
+        const entries = JSON.parse(path.substring(6)) as { name: string; dataUrl: string }[];
+        let mainFile = "";
+        for (const entry of entries) {
+            const blob = await (await fetch(entry.dataUrl)).blob();
+            BABYLON.FilesInputStore.FilesToLoad[entry.name.toLowerCase()] = new File([blob], entry.name);
+            const ext = entry.name.toLowerCase().split(".").pop();
+            if (ext === "gltf" || ext === "glb" || ext === "babylon") {
+                mainFile = entry.name;
+            }
+        }
+        return BABYLON.ImportMeshAsync(mainFile, scene, { rootUrl: "file:" });
+    }
+    return BABYLON.ImportMeshAsync(path, scene);
+}
+
+export async function appendSceneAsync(path: string, scene: BABYLON.Scene) {
+    if (path.startsWith("files:")) {
+        const entries = JSON.parse(path.substring(6)) as { name: string; dataUrl: string }[];
+        let mainFile = "";
+        for (const entry of entries) {
+            const blob = await (await fetch(entry.dataUrl)).blob();
+            BABYLON.FilesInputStore.FilesToLoad[entry.name.toLowerCase()] = new File([blob], entry.name);
+            const ext = entry.name.toLowerCase().split(".").pop();
+            if (ext === "gltf" || ext === "glb" || ext === "babylon") {
+                mainFile = entry.name;
+            }
+        }
+        return BABYLON.AppendSceneAsync(mainFile, scene, { rootUrl: "file:" });
+    }
+    return BABYLON.AppendSceneAsync(path, scene);
+}
+
+export function retargetAnimationGroup(
+    sourceAnimationGroup: BABYLON.AnimationGroup,
+    animRootNode: BABYLON.AbstractMesh,
+    avatarRootNode: BABYLON.AbstractMesh,
+    animationRestPoseUpdate: SourceDataUpdate,
+    avatarRestPoseUpdate: SourceDataUpdate,
+    nameRemapping: string[],
+    retargetOptions: BABYLON.IRetargetOptions,
+    disposeSource = true,
+): BABYLON.AnimationGroup {
+    const avatar = new BABYLON.AnimatorAvatar("avatar", avatarRootNode, false, false);
+
+    for (const dataBlock of animationRestPoseUpdate) {
+        const node = animRootNode.getChildTransformNodes(false, (n) => n.name === dataBlock.name)[0];
+        if (node) {
+            if (dataBlock.data.position) node.position.fromArray(dataBlock.data.position);
+            if (dataBlock.data.scaling) node.scaling.fromArray(dataBlock.data.scaling);
+            if (dataBlock.data.quaternion) node.rotationQuaternion!.fromArray(dataBlock.data.quaternion);
+        }
+    }
+
+    if (avatarRestPoseUpdate.length > 0) {
+        const [avatarSkeleton] = avatar.skeletons;
+        for (const dataBlock of avatarRestPoseUpdate) {
+            const index = avatarSkeleton.getBoneIndexByName(dataBlock.name);
+            if (index !== -1) {
+                const bone = avatarSkeleton.bones[index];
+                if (dataBlock.data.position) bone.position = BABYLON.TmpVectors.Vector3[0].fromArray(dataBlock.data.position);
+                if (dataBlock.data.scaling) bone.scaling = BABYLON.TmpVectors.Vector3[0].fromArray(dataBlock.data.scaling);
+                if (dataBlock.data.quaternion) bone.rotationQuaternion = BABYLON.TmpVectors.Quaternion[0].fromArray(dataBlock.data.quaternion);
+            }
+        }
+        avatarSkeleton.setCurrentPoseAsRest();
+    }
+
+    for (const skeleton of avatar.skeletons) {
+        skeleton.returnToRest();
+    }
+
+    const mapNodeNames = new Map<string, string>();
+    for (let i = 0; i < nameRemapping.length; i += 2) {
+        mapNodeNames.set(nameRemapping[i], nameRemapping[i + 1]);
+    }
+    retargetOptions.mapNodeNames = mapNodeNames;
+
+    const retargetedAnimation = avatar.retargetAnimationGroup(sourceAnimationGroup, retargetOptions);
+
+    avatar.dispose();
+
+    if (disposeSource) {
+        sourceAnimationGroup.dispose();
+        animRootNode.dispose(false);
+    }
+
+    return retargetedAnimation;
+}
+`;
+
+/**
+ * Header for the retargeting.ts file — written once on first export.
+ */
+export const ExportToSceneHeader = `import { retargetAnimationGroup, loadMeshesAsync, appendSceneAsync } from "./retarget.helpers";
+import type { SourceDataUpdate } from "./retarget.helpers";
+`;
+
+/**
+ * Code template for "Export to Scene" — appended as a new function to retargeting.ts.
+ * Data constants are inside the function so multiple functions can coexist.
+ */
+export const ExportToSceneCode = `
+export async function %functionName%(scene: BABYLON.Scene): Promise<BABYLON.AnimationGroup | null> {
+    const avatarSource: "url" | "scene" = "%avatarSource%";
+    const animationSource: "url" | "scene" = "%animationSource%";
+    const animationGroupIndex = %animationGroupIndex%;
+
+    const avatarRestPoseUpdate: SourceDataUpdate = %avatarRestPoseUpdate%;
+    const animationRestPoseUpdate: SourceDataUpdate = %animationRestPoseUpdate%;
+    const nameRemapping: string[] = %nameRemapping%;
+
+    let avatarRootNode: BABYLON.AbstractMesh;
+    let sourceAnimationGroup: BABYLON.AnimationGroup;
+
+    // Load or find the avatar
+    // @ts-ignore
+    if (avatarSource === "url") {
+        const result = await loadMeshesAsync("%avatarPath%", scene);
+        avatarRootNode = result.meshes[%avatarRootNodeIndex%];
+    } else {
+        const found = scene.getMeshByName("%avatarRootNodeName%");
+        if (!found) {
+            console.error("%functionName%: avatar root node '%avatarRootNodeName%' not found in scene.");
+            return null;
+        }
+        avatarRootNode = found;
+    }
+
+    // Load or find the animation
+    const numAnimsBefore = scene.animationGroups.length;
+    // @ts-ignore
+    if (animationSource === "url") {
+        await appendSceneAsync("%animationPath%", scene);
+        sourceAnimationGroup = scene.animationGroups[numAnimsBefore + animationGroupIndex];
+    } else {
+        sourceAnimationGroup = scene.animationGroups[animationGroupIndex];
+    }
+
+    // Find the animation root node by walking up from the first animation target
+    const target = sourceAnimationGroup.targetedAnimations[0]?.target as BABYLON.TransformNode | undefined;
+    let animRoot = target;
+    while (animRoot?.parent) {
+        animRoot = animRoot.parent as BABYLON.TransformNode;
+    }
+    const animRootNode = (animRoot ?? avatarRootNode) as BABYLON.AbstractMesh;
+
+    sourceAnimationGroup.stop();
+
+    const retargetOptions: BABYLON.IRetargetOptions = %retargetOptions%;
+
+    const retargetedAnimation = retargetAnimationGroup(
+        sourceAnimationGroup, animRootNode, avatarRootNode,
+        animationRestPoseUpdate, avatarRestPoseUpdate, nameRemapping,
+        // @ts-ignore
+        retargetOptions, animationSource === "url",
+    );
+
+    retargetedAnimation.start(true);
+
+    return retargetedAnimation;
+}
+`;
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
new file mode 100644
index 00000000000..dbc489d0438
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
@@ -0,0 +1,91 @@
+import { type Nullable } from "core/types";
+
+import { Observable } from "core/Misc/observable";
+import { Logger } from "core/Misc/logger";
+
+/**
+ * Manages log output from the retargeting process as a DOM overlay over the viewport canvas.
+ * Intercepts BABYLON.Logger.OnNewCacheEntry and writes to the overlay element.
+ */
+export class HTMLConsole {
+    private _element: HTMLDivElement;
+    private _isVisible = false;
+    private _originalHandler: Nullable<(entry: string) => void>;
+
+    /** Fires with the new visibility state whenever the console is shown or hidden. */
+    public readonly onVisibilityChangedObservable = new Observable<boolean>();
+
+    public get isVisible(): boolean {
+        return this._isVisible;
+    }
+
+    public constructor() {
+        this._element = document.createElement("div");
+        this._element.style.cssText = [
+            "position:absolute",
+            "bottom:10px",
+            "left:10px",
+            "right:10px",
+            "height:200px",
+            "background:rgba(18,18,18,0.88)",
+            "color:#ccc",
+            "font-size:11px",
+            "font-family:monospace",
+            "padding:6px 8px",
+            "overflow-y:scroll",
+            "word-break:break-all",
+            "pointer-events:auto",
+            "z-index:10",
+            "border-radius:4px",
+            "display:none",
+        ].join(";");
+
+        this._originalHandler = Logger.OnNewCacheEntry;
+        Logger.OnNewCacheEntry = (entry: string) => {
+            if (entry.indexOf("RetargetAnimationGroup") === -1) {
+                this._originalHandler?.(entry);
+                return;
+            }
+
+            // Strip function-name prefix (e.g. "RetargetAnimationGroup...: ") and trailing <br>.
+            const cleaned = entry
+                .replace(/RetargetAnimationGroup.*?: /g, "")
+                .replace(/<br\s*\/?>/gi, "")
+                .trimEnd();
+            this._element.insertAdjacentHTML("beforeend", cleaned);
+            this._element.scrollTop = this._element.scrollHeight;
+            // Auto-show the console the first time output arrives (matches original PG behavior)
+            if (!this._isVisible) {
+                this._isVisible = true;
+                this._element.style.display = "block";
+                this.onVisibilityChangedObservable.notifyObservers(true);
+            }
+            this._originalHandler?.(entry);
+        };
+    }
+
+    /** Appends the overlay element to the given container (should be position:relative).
+     * @param container - The container element to append to.
+     */
+    public attachToContainer(container: HTMLElement): void {
+        container.appendChild(this._element);
+    }
+
+    public toggle(): void {
+        this._isVisible = !this._isVisible;
+        this._element.style.display = this._isVisible ? "block" : "none";
+        this.onVisibilityChangedObservable.notifyObservers(this._isVisible);
+    }
+
+    public clear(): void {
+        while (this._element.firstChild) {
+            this._element.removeChild(this._element.firstChild);
+        }
+    }
+
+    public dispose(): void {
+        Logger.OnNewCacheEntry = this._originalHandler as (entry: string) => void;
+        this._originalHandler = null;
+        this._element.remove();
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
new file mode 100644
index 00000000000..18d7e37b771
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
@@ -0,0 +1,540 @@
+import { type ISettingsStore, type SettingDescriptor } from "../../services/settingsStore";
+
+const NamingSchemeSettingDescriptor: SettingDescriptor<StoredData> = {
+    key: "AnimRetargeting/NamingSchemes",
+    defaultValue: { schemes: {}, remappings: [] },
+};
+
+/**
+ * A bone/node entry in a naming scheme.
+ * `depth` encodes the parent-child hierarchy: a depth-N entry is a child of the nearest preceding entry with depth N-1.
+ */
+export type BoneEntry = {
+    /**
+     *
+     */
+    name: string /**
+     *
+     */;
+    /**
+     *
+     */
+    depth: number;
+};
+
+// prettier-ignore
+const MixamoBones: BoneEntry[] = [
+    { name: "mixamorig:Hips", depth: 0 },
+    { name: "mixamorig:Spine", depth: 1 },
+    { name: "mixamorig:Spine1", depth: 2 },
+    { name: "mixamorig:Spine2", depth: 3 },
+    { name: "mixamorig:Neck", depth: 4 },
+    { name: "mixamorig:Head", depth: 5 },
+    { name: "mixamorig:HeadTop_End", depth: 6 },
+    { name: "mixamorig:HeadTop_End1", depth: 7 },
+    { name: "mixamorig:Hair_Back", depth: 6 },
+    { name: "mixamorig:LeftEye", depth: 6 },
+    { name: "mixamorig:RightEye", depth: 6 },
+    { name: "mixamorig:LeftShoulder", depth: 4 },
+    { name: "mixamorig:LeftArm", depth: 5 },
+    { name: "mixamorig:LeftForeArm", depth: 6 },
+    { name: "mixamorig:LeftHand", depth: 7 },
+    { name: "mixamorig:LeftHandThumb1", depth: 8 },
+    { name: "mixamorig:LeftHandThumb2", depth: 9 },
+    { name: "mixamorig:LeftHandThumb3", depth: 10 },
+    { name: "mixamorig:LeftHandThumb4", depth: 11 },
+    { name: "mixamorig:LeftHandIndex1", depth: 8 },
+    { name: "mixamorig:LeftHandIndex2", depth: 9 },
+    { name: "mixamorig:LeftHandIndex3", depth: 10 },
+    { name: "mixamorig:LeftHandIndex4", depth: 11 },
+    { name: "mixamorig:LeftHandMiddle1", depth: 8 },
+    { name: "mixamorig:LeftHandMiddle2", depth: 9 },
+    { name: "mixamorig:LeftHandMiddle3", depth: 10 },
+    { name: "mixamorig:LeftHandMiddle4", depth: 11 },
+    { name: "mixamorig:LeftHandRing1", depth: 8 },
+    { name: "mixamorig:LeftHandRing2", depth: 9 },
+    { name: "mixamorig:LeftHandRing3", depth: 10 },
+    { name: "mixamorig:LeftHandRing4", depth: 11 },
+    { name: "mixamorig:LeftHandPinky1", depth: 8 },
+    { name: "mixamorig:LeftHandPinky2", depth: 9 },
+    { name: "mixamorig:LeftHandPinky3", depth: 10 },
+    { name: "mixamorig:LeftHandPinky4", depth: 11 },
+    { name: "mixamorig:Left_CapeC", depth: 7 },
+    { name: "mixamorig:Left_CapeC1", depth: 8 },
+    { name: "mixamorig:Left_CapeB", depth: 6 },
+    { name: "mixamorig:Left_CapeB1", depth: 7 },
+    { name: "mixamorig:Left_CapeA", depth: 6 },
+    { name: "mixamorig:Left_CapeA1", depth: 7 },
+    { name: "mixamorig:RightShoulder", depth: 4 },
+    { name: "mixamorig:RightArm", depth: 5 },
+    { name: "mixamorig:RightForeArm", depth: 6 },
+    { name: "mixamorig:RightHand", depth: 7 },
+    { name: "mixamorig:RightHandThumb1", depth: 8 },
+    { name: "mixamorig:RightHandThumb2", depth: 9 },
+    { name: "mixamorig:RightHandThumb3", depth: 10 },
+    { name: "mixamorig:RightHandThumb4", depth: 11 },
+    { name: "mixamorig:RightHandIndex1", depth: 8 },
+    { name: "mixamorig:RightHandIndex2", depth: 9 },
+    { name: "mixamorig:RightHandIndex3", depth: 10 },
+    { name: "mixamorig:RightHandIndex4", depth: 11 },
+    { name: "mixamorig:RightHandMiddle1", depth: 8 },
+    { name: "mixamorig:RightHandMiddle2", depth: 9 },
+    { name: "mixamorig:RightHandMiddle3", depth: 10 },
+    { name: "mixamorig:RightHandMiddle4", depth: 11 },
+    { name: "mixamorig:RightHandRing1", depth: 8 },
+    { name: "mixamorig:RightHandRing2", depth: 9 },
+    { name: "mixamorig:RightHandRing3", depth: 10 },
+    { name: "mixamorig:RightHandRing4", depth: 11 },
+    { name: "mixamorig:RightHandPinky1", depth: 8 },
+    { name: "mixamorig:RightHandPinky2", depth: 9 },
+    { name: "mixamorig:RightHandPinky3", depth: 10 },
+    { name: "mixamorig:RightHandPinky4", depth: 11 },
+    { name: "mixamorig:Right_CapeC", depth: 7 },
+    { name: "mixamorig:Right_CapeC1", depth: 7 },
+    { name: "mixamorig:Right_CapeB", depth: 6 },
+    { name: "mixamorig:Right_CapeB1", depth: 7 },
+    { name: "mixamorig:Right_CapeA", depth: 6 },
+    { name: "mixamorig:Right_CapeA1", depth: 7 },
+    { name: "mixamorig:Right_Peck", depth: 4 },
+    { name: "mixamorig:Left_Peck", depth: 4 },
+    { name: "mixamorig:Left_Collar", depth: 4 },
+    { name: "mixamorig:Left_Collar1", depth: 5 },
+    { name: "mixamorig:Right_Collar", depth: 4 },
+    { name: "mixamorig:Right_Collar1", depth: 5 },
+    { name: "mixamorig:Belly", depth: 2 },
+    { name: "mixamorig:LeftUpLeg", depth: 1 },
+    { name: "mixamorig:LeftLeg", depth: 2 },
+    { name: "mixamorig:LeftFoot", depth: 3 },
+    { name: "mixamorig:LeftToeBase", depth: 4 },
+    { name: "mixamorig:LeftToe_End", depth: 5 },
+    { name: "mixamorig:RightUpLeg", depth: 1 },
+    { name: "mixamorig:RightLeg", depth: 2 },
+    { name: "mixamorig:RightFoot", depth: 3 },
+    { name: "mixamorig:RightToeBase", depth: 4 },
+    { name: "mixamorig:RightToe_End", depth: 5 },
+    { name: "mixamorig:Crotch1", depth: 1 },
+    { name: "mixamorig:Crotch2", depth: 2 },
+    { name: "mixamorig:Crotch3", depth: 1 },
+    { name: "mixamorig:Crotch4", depth: 2 },
+];
+
+type StoredRemapping = {
+    fromScheme: string;
+    toScheme: string;
+    map: [string, string][];
+};
+
+type StoredData = {
+    schemes: { [name: string]: BoneEntry[] };
+    remappings: StoredRemapping[];
+};
+
+/**
+ * Manages named sets of bone/node names ("naming schemes") and the remappings between them.
+ * Data is persisted to localStorage and reloaded on construction.
+ *
+ * A naming scheme is a name + an ordered list of bone/node name strings.
+ * A remapping maps a subset of names from one scheme to names in another scheme.
+ * Mapping to an empty string is valid and means "no suitable counterpart exists".
+ */
+export class NamingSchemeManager {
+    private _schemes: Map<string, BoneEntry[]> = new Map();
+    private _remappings: Array<{ fromScheme: string; toScheme: string; map: Map<string, string> }> = [];
+
+    constructor(private readonly _settingsStore: ISettingsStore) {
+        this._loadFromStorage();
+    }
+
+    // ─── Public methods ───────────────────────────────────────────────────────
+
+    /**
+     * Creates or replaces a naming scheme.
+     * @param name - Unique identifier for the scheme.
+     * @param entries - Ordered list of bone/node entries (name + hierarchy depth) belonging to the scheme.
+     */
+    public addNamingScheme(name: string, entries: BoneEntry[]): void {
+        this._schemes.set(name, [...entries]);
+        this._saveToStorage();
+    }
+
+    /**
+     * Returns the list of bone entries for the given scheme, or undefined if it does not exist.
+     * @param name - The scheme name to look up.
+     * @returns Array of bone entries or undefined.
+     */
+    public getNamingScheme(name: string): BoneEntry[] | undefined {
+        const scheme = this._schemes.get(name);
+        return scheme ? [...scheme] : undefined;
+    }
+
+    /**
+     * Returns the names of all registered naming schemes.
+     * @returns Array of scheme name strings.
+     */
+    public getAllSchemeNames(): string[] {
+        return Array.from(this._schemes.keys());
+    }
+
+    /**
+     * Returns all stored remappings as an array of { fromScheme, toScheme } pairs.
+     * These reflect the direction in which remappings were originally added.
+     * @returns Array of remapping pairs.
+     */
+    public getAllRemappings(): Array<{ fromScheme: string; toScheme: string }> {
+        return this._remappings.map((r) => ({ fromScheme: r.fromScheme, toScheme: r.toScheme }));
+    }
+
+    /**
+     * Recreates any missing default naming schemes (Mixamo, Mixamo No Namespace).
+     * Existing schemes with those names are not modified.
+     * @returns true if at least one scheme was added.
+     */
+    public recreateDefaultSchemes(): boolean {
+        let changed = false;
+        if (!this._schemes.has("Mixamo")) {
+            this._schemes.set("Mixamo", [...MixamoBones]);
+            changed = true;
+        }
+        if (!this._schemes.has("Mixamo No Namespace")) {
+            this._schemes.set(
+                "Mixamo No Namespace",
+                MixamoBones.map((e) => ({ name: e.name.replace("mixamorig:", ""), depth: e.depth }))
+            );
+            changed = true;
+        }
+        if (changed) {
+            this._saveToStorage();
+        }
+        return changed;
+    }
+
+    /**
+     * Recreates any missing default remappings (Mixamo ↔ Mixamo No Namespace).
+     * Also ensures the required schemes exist, creating any that are absent.
+     * Existing remappings are not modified.
+     * @returns true if at least one remapping or scheme was added.
+     */
+    public recreateDefaultRemappings(): boolean {
+        let changed = false;
+
+        // Ensure default schemes exist before building remappings.
+        if (!this._schemes.has("Mixamo")) {
+            this._schemes.set("Mixamo", [...MixamoBones]);
+            changed = true;
+        }
+        if (!this._schemes.has("Mixamo No Namespace")) {
+            this._schemes.set(
+                "Mixamo No Namespace",
+                MixamoBones.map((e) => ({ name: e.name.replace("mixamorig:", ""), depth: e.depth }))
+            );
+            changed = true;
+        }
+
+        // Mixamo → Mixamo No Namespace
+        if (!this._remappings.some((r) => this._sameSchemes(r, "Mixamo", "Mixamo No Namespace"))) {
+            const map = new Map<string, string>();
+            for (const entry of MixamoBones) {
+                map.set(entry.name, entry.name.replace("mixamorig:", ""));
+            }
+            this._remappings.push({ fromScheme: "Mixamo", toScheme: "Mixamo No Namespace", map });
+            changed = true;
+        }
+
+        if (changed) {
+            this._saveToStorage();
+        }
+        return changed;
+    }
+
+    /**
+     * Removes a naming scheme and all remappings that reference it.
+     * @param name - The scheme name to remove.
+     * @throws Error if the scheme does not exist.
+     */
+    public removeNamingScheme(name: string): void {
+        if (!this._schemes.has(name)) {
+            throw new Error(`Naming scheme "${name}" does not exist.`);
+        }
+        this._schemes.delete(name);
+        this._remappings = this._remappings.filter((r) => r.fromScheme !== name && r.toScheme !== name);
+        this._saveToStorage();
+    }
+
+    /**
+     * Adds a remapping from one naming scheme to another.
+     *
+     * Each key of `map` must exist in the `fromSchemeName` scheme.
+     * Each value of `map` must exist in the `toSchemeName` scheme, or be an empty string
+     * (indicating no suitable counterpart in the target scheme).
+     *
+     * Only a subset of names needs to be remapped — unmapped names are simply absent from the map.
+     *
+     * If a remapping between these two schemes already exists (in either direction), it is replaced.
+     *
+     * @param fromSchemeName - Source naming scheme.
+     * @param toSchemeName - Target naming scheme.
+     * @param map - Map from source names to target names.
+     * @throws Error if either scheme does not exist, or if any map entry violates the constraints.
+     */
+    public addRemapping(fromSchemeName: string, toSchemeName: string, map: Map<string, string>): void {
+        const fromScheme = this._schemes.get(fromSchemeName);
+        if (!fromScheme) {
+            throw new Error(`Naming scheme "${fromSchemeName}" does not exist.`);
+        }
+        const toScheme = this._schemes.get(toSchemeName);
+        if (!toScheme) {
+            throw new Error(`Naming scheme "${toSchemeName}" does not exist.`);
+        }
+
+        const fromSet = new Set(fromScheme.map((e) => e.name));
+        const toSet = new Set(toScheme.map((e) => e.name));
+
+        for (const [key, value] of map) {
+            if (!fromSet.has(key)) {
+                throw new Error(`Key "${key}" is not in naming scheme "${fromSchemeName}".`);
+            }
+            if (value !== "" && !toSet.has(value)) {
+                throw new Error(`Value "${value}" is not in naming scheme "${toSchemeName}".`);
+            }
+        }
+
+        // Replace any existing remapping between these two schemes (either direction).
+        this._remappings = this._remappings.filter((r) => !this._sameSchemes(r, fromSchemeName, toSchemeName));
+        this._remappings.push({ fromScheme: fromSchemeName, toScheme: toSchemeName, map: new Map(map) });
+        this._saveToStorage();
+    }
+
+    /**
+     * Returns the remapping from `fromSchemeName` to `toSchemeName`.
+     *
+     * Remappings are treated as **bidirectional** (a→b is the same edge as b→a) and **transitive**:
+     * if no direct remapping exists, the method searches for a path through intermediate schemes
+     * uses Breadth-First Search (BFS) and composes the maps along the path.
+     *
+     * For example, if a→b and b→c are stored, `getRemapping("a","c")` composes them.
+     * Likewise, since a→b implies b→a, `getRemapping("c","a")` is also derivable.
+     *
+     * @param fromSchemeName - Source naming scheme.
+     * @param toSchemeName - Target naming scheme.
+     * @returns A Map from names in `fromSchemeName` to names in `toSchemeName`, or undefined if
+     *          no path exists between the two schemes.
+     */
+    public getRemapping(fromSchemeName: string, toSchemeName: string): Map<string, string> | undefined {
+        // Breadth-First Search (BFS) to find the shortest path in the undirected remapping graph.
+        const visited = new Set<string>([fromSchemeName]);
+        const queue: string[][] = [[fromSchemeName]];
+
+        while (queue.length > 0) {
+            const path = queue.shift()!;
+            const current = path[path.length - 1];
+
+            for (const r of this._remappings) {
+                let neighbor: string | null = null;
+                if (r.fromScheme === current && !visited.has(r.toScheme)) {
+                    neighbor = r.toScheme;
+                } else if (r.toScheme === current && !visited.has(r.fromScheme)) {
+                    neighbor = r.fromScheme;
+                }
+                if (neighbor === null) {
+                    continue;
+                }
+                const newPath = [...path, neighbor];
+                if (neighbor === toSchemeName) {
+                    return this._composePath(newPath);
+                }
+                visited.add(neighbor);
+                queue.push(newPath);
+            }
+        }
+        return undefined;
+    }
+
+    /** Returns the single-step map from one scheme to an adjacent one (forward or inverse).
+     * @param fromScheme - Source scheme name.
+     * @param toScheme - Target scheme name.
+     * @returns The direct map or undefined.
+     */
+    private _getDirectMap(fromScheme: string, toScheme: string): Map<string, string> | undefined {
+        for (const r of this._remappings) {
+            if (r.fromScheme === fromScheme && r.toScheme === toScheme) {
+                return new Map(r.map);
+            }
+            if (r.fromScheme === toScheme && r.toScheme === fromScheme) {
+                const inverse = new Map<string, string>();
+                for (const [k, v] of r.map) {
+                    if (v !== "") {
+                        inverse.set(v, k);
+                    }
+                }
+                return inverse;
+            }
+        }
+        return undefined;
+    }
+
+    /** Composes the per-step maps along a BFS (Breadth-First Search) path into a single from→to map.
+     * @param path - Array of scheme names forming the path.
+     * @returns The composed map or undefined.
+     */
+    private _composePath(path: string[]): Map<string, string> | undefined {
+        let result = this._getDirectMap(path[0], path[1]);
+        if (!result) {
+            return undefined;
+        }
+        for (let i = 1; i < path.length - 1; i++) {
+            const next = this._getDirectMap(path[i], path[i + 1]);
+            if (!next) {
+                return undefined;
+            }
+            const composed = new Map<string, string>();
+            for (const [k, v] of result) {
+                composed.set(k, v !== "" ? (next.get(v) ?? "") : "");
+            }
+            result = composed;
+        }
+        return result;
+    }
+
+    /**
+     * Returns all naming schemes and remappings in a JSON-serializable format.
+     * @returns Object with schemes and remappings data.
+     */
+    public exportData(): { schemes: Record<string, BoneEntry[]>; remappings: Array<{ fromScheme: string; toScheme: string; map: [string, string][] }> } {
+        const schemes: Record<string, BoneEntry[]> = {};
+        for (const [name, entries] of this._schemes) {
+            schemes[name] = [...entries];
+        }
+        const remappings: Array<{ fromScheme: string; toScheme: string; map: [string, string][] }> = [];
+        for (const r of this._remappings) {
+            remappings.push({
+                fromScheme: r.fromScheme,
+                toScheme: r.toScheme,
+                map: Array.from(r.map.entries()),
+            });
+        }
+        return { schemes, remappings };
+    }
+
+    /**
+     * Imports naming schemes and remappings.
+     * @param data - The data to import, in the same format as `exportData` returns.
+     * @param mode - "replace" clears all existing data first. "append" skips entries with duplicate names.
+     * @returns List of skipped entry descriptions (for "append" mode).
+     */
+    public importData(
+        data: { schemes?: Record<string, BoneEntry[]>; remappings?: Array<{ fromScheme: string; toScheme: string; map: [string, string][] }> },
+        mode: "replace" | "append"
+    ): string[] {
+        const skipped: string[] = [];
+
+        if (mode === "replace") {
+            this._schemes.clear();
+            this._remappings = [];
+        }
+
+        if (data.schemes) {
+            for (const [name, entries] of Object.entries(data.schemes)) {
+                if (mode === "append" && this._schemes.has(name)) {
+                    skipped.push(`scheme "${name}"`);
+                } else {
+                    this._schemes.set(name, [...entries]);
+                }
+            }
+        }
+
+        if (data.remappings) {
+            for (const r of data.remappings) {
+                if (mode === "append" && this._remappings.some((existing) => this._sameSchemes(existing, r.fromScheme, r.toScheme))) {
+                    skipped.push(`remapping "${r.fromScheme}" ↔ "${r.toScheme}"`);
+                } else {
+                    if (mode === "append") {
+                        // Remove any existing remapping between these schemes before adding.
+                        this._remappings = this._remappings.filter((existing) => !this._sameSchemes(existing, r.fromScheme, r.toScheme));
+                    }
+                    this._remappings.push({ fromScheme: r.fromScheme, toScheme: r.toScheme, map: new Map(r.map) });
+                }
+            }
+        }
+
+        this._saveToStorage();
+        return skipped;
+    }
+
+    /**
+     * Removes the remapping between the two given schemes (regardless of the direction it was stored in).
+     * @param schemeAName - First scheme name.
+     * @param schemeBName - Second scheme name.
+     * @throws Error if no such remapping exists.
+     */
+    public removeRemapping(schemeAName: string, schemeBName: string): void {
+        const before = this._remappings.length;
+        this._remappings = this._remappings.filter((r) => !this._sameSchemes(r, schemeAName, schemeBName));
+        if (this._remappings.length === before) {
+            throw new Error(`No remapping found between "${schemeAName}" and "${schemeBName}".`);
+        }
+        this._saveToStorage();
+    }
+
+    // ─── Private methods ──────────────────────────────────────────────────────
+
+    private _sameSchemes(r: { fromScheme: string; toScheme: string }, a: string, b: string): boolean {
+        return (r.fromScheme === a && r.toScheme === b) || (r.fromScheme === b && r.toScheme === a);
+    }
+
+    private _saveToStorage(): void {
+        const data: StoredData = {
+            schemes: {},
+            remappings: [],
+        };
+        for (const [name, names] of this._schemes) {
+            data.schemes[name] = names;
+        }
+        for (const r of this._remappings) {
+            data.remappings.push({
+                fromScheme: r.fromScheme,
+                toScheme: r.toScheme,
+                map: Array.from(r.map.entries()),
+            });
+        }
+        try {
+            this._settingsStore.writeSetting(NamingSchemeSettingDescriptor, data);
+        } catch {
+            // Storage may be unavailable (e.g. private browsing quota exceeded).
+        }
+    }
+
+    private _loadFromStorage(): void {
+        try {
+            const data = this._settingsStore.readSetting(NamingSchemeSettingDescriptor);
+            if (Object.keys(data.schemes).length === 0 && data.remappings.length === 0) {
+                this._createDefaultSchemes();
+                return;
+            }
+            for (const [name, entries] of Object.entries(data.schemes)) {
+                this._schemes.set(name, entries as BoneEntry[]);
+            }
+            for (const { fromScheme, toScheme, map } of data.remappings) {
+                this._remappings.push({ fromScheme, toScheme, map: new Map(map) });
+            }
+        } catch {
+            // Ignore corrupted or missing storage data.
+        }
+    }
+
+    private _createDefaultSchemes(): void {
+        this._schemes.set("Mixamo", [...MixamoBones]);
+        this._schemes.set(
+            "Mixamo No Namespace",
+            MixamoBones.map((e) => ({ name: e.name.replace("mixamorig:", ""), depth: e.depth }))
+        );
+
+        // Mixamo → Mixamo No Namespace remapping.
+        const mixamoMap = new Map<string, string>();
+        for (const entry of MixamoBones) {
+            mixamoMap.set(entry.name, entry.name.replace("mixamorig:", ""));
+        }
+        this._remappings.push({ fromScheme: "Mixamo", toScheme: "Mixamo No Namespace", map: mixamoMap });
+
+        this._saveToStorage();
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
new file mode 100644
index 00000000000..71f919b688f
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -0,0 +1,1314 @@
+import { type FunctionComponent, useState, useMemo, useCallback, useEffect, useRef } from "react";
+import { type NamingSchemeManager, type BoneEntry } from "./namingSchemeManager";
+import { type AvatarManager, type StoredAvatar } from "./avatarManager";
+import { type AnimationManager, type StoredAnimation } from "./animationManager";
+import { type Nullable } from "core/types";
+import { type Skeleton } from "core/Bones/skeleton";
+import { type Bone } from "core/Bones/bone";
+import { type Node } from "core/node";
+
+import {
+    Dialog,
+    DialogBody,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    DialogSurface,
+    Select,
+    Tab,
+    TabList,
+    Label,
+    makeStyles,
+    mergeClasses,
+    tokens,
+    Body1Strong,
+    Caption1,
+    Spinner,
+    DataGrid,
+    DataGridHeader,
+    DataGridBody,
+    DataGridRow,
+    DataGridHeaderCell,
+    DataGridCell,
+    createTableColumn,
+    type TableColumnDefinition,
+    type TableColumnSizingOptions,
+} from "@fluentui/react-components";
+import { Button } from "shared-ui-components/fluent/primitives/button";
+import { TextInput } from "shared-ui-components/fluent/primitives/textInput";
+import { StringDropdown } from "shared-ui-components/fluent/primitives/dropdown";
+import { Textarea } from "shared-ui-components/fluent/primitives/textarea";
+import {
+    AddRegular,
+    DeleteRegular,
+    EditRegular,
+    ArrowCounterclockwiseRegular,
+    ArrowBidirectionalUpDownRegular,
+    ArrowDownloadRegular,
+    ArrowUploadRegular,
+    DismissRegular,
+} from "@fluentui/react-icons";
+import { NullEngine } from "core/Engines/nullEngine";
+import { Scene } from "core/scene";
+import { ImportMeshAsync, SceneLoader } from "core/Loading/sceneLoader";
+import { FilesInputStore } from "core/Misc/filesInputStore";
+import { AvatarsPanel } from "./avatarsPanel";
+import { AnimationsPanel } from "./animationsPanel";
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const useStyles = makeStyles({
+    surface: {
+        width: "1000px",
+        minWidth: "400px",
+        maxWidth: "95vw",
+        height: "800px",
+        minHeight: "300px",
+        maxHeight: "95vh",
+        resize: "both",
+        overflow: "hidden",
+    },
+    titleRow: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexShrink: 0,
+        paddingBottom: tokens.spacingVerticalXS,
+    },
+    body: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        gap: 0,
+        overflow: "hidden",
+    },
+    tabList: {
+        flexShrink: 0,
+        paddingBottom: tokens.spacingVerticalXS,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
+    content: {
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        paddingTop: tokens.spacingVerticalS,
+        paddingLeft: tokens.spacingHorizontalS,
+        paddingRight: tokens.spacingHorizontalS,
+    },
+    panel: {
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+    },
+    listHeader: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexShrink: 0,
+        paddingBottom: tokens.spacingVerticalXS,
+    },
+    editSection: {
+        flexShrink: 0,
+        borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+        paddingTop: tokens.spacingVerticalS,
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+    },
+    editSectionFlex: {
+        flex: 1,
+        overflow: "hidden",
+        borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+        paddingTop: tokens.spacingVerticalS,
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+    },
+    formRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        flexShrink: 0,
+    },
+    formLabel: {
+        flexShrink: 0,
+        width: "110px",
+    },
+    formControl: {
+        flex: 1,
+        textAlign: "left",
+        "& span": { textAlign: "left" },
+        "& input": { textAlign: "left" },
+    },
+    mappingTable: {
+        flex: 1,
+        overflowY: "auto",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+    },
+    mappingRow: {
+        display: "flex",
+        alignItems: "center",
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+        gap: tokens.spacingHorizontalS,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        ":last-child": { borderBottom: "none" },
+    },
+    mappingRowError: {
+        backgroundColor: tokens.colorStatusDangerBackground1,
+    },
+    mappingBoneName: {
+        flex: "0 0 220px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "pre",
+        fontSize: tokens.fontSizeBase200,
+    },
+    mappingSelect: {
+        flex: 1,
+        fontSize: tokens.fontSizeBase200,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS}`,
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusSmall,
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+        cursor: "pointer",
+    },
+    errorText: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: tokens.fontSizeBase200,
+        flexShrink: 0,
+    },
+    actionRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalS,
+        justifyContent: "flex-end",
+        flexShrink: 0,
+    },
+    emptyMsg: {
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+        color: tokens.colorNeutralForeground3,
+        fontSize: tokens.fontSizeBase200,
+    },
+    confirmSurface: {
+        width: "380px",
+        maxWidth: "90vw",
+    },
+    listButtons: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+    },
+    boneTextarea: {
+        flex: 1,
+        minHeight: 0,
+        resize: "none",
+        width: "100%",
+        boxSizing: "border-box",
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusMedium,
+        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalM}`,
+        fontFamily: "var(--fontFamilyBase)",
+        fontSize: tokens.fontSizeBase300,
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+        ":focus": {
+            outline: `2px solid ${tokens.colorCompoundBrandStroke}`,
+            outlineOffset: "1px",
+        },
+    },
+    titleButtons: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+    },
+    dataGridFlex: {
+        flex: 1,
+        overflowY: "auto",
+    },
+    dataGridCompactTall: {
+        maxHeight: "160px",
+        overflowY: "auto",
+    },
+    dataGridCompact: {
+        maxHeight: "140px",
+        overflowY: "auto",
+    },
+    boneEditRow: {
+        display: "flex",
+        flex: 1,
+        minHeight: 0,
+        gap: tokens.spacingHorizontalS,
+    },
+    formLabelPadTop: {
+        paddingTop: "6px",
+        flexShrink: 0,
+    },
+    swapRow: {
+        display: "flex",
+        justifyContent: "center",
+    },
+    subtleText: {
+        color: tokens.colorNeutralForeground3,
+    },
+    hiddenInput: {
+        display: "none",
+    },
+});
+
+// Session-only size persistence: survives dialog close/reopen but not page reload.
+let SavedDialogSize: { width: number; height: number } | null = null;
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type SchemeEdit = {
+    originalName: string | null; // null = new scheme
+    name: string;
+    namesText: string;
+};
+
+type RemappingEdit = {
+    fromScheme: string;
+    toScheme: string;
+    map: Map<string, string>;
+    isNew: boolean;
+};
+
+type SchemeRow = {
+    name: string;
+    boneCount: number;
+};
+
+type RemappingRow = {
+    fromScheme: string;
+    toScheme: string;
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Loads a stored avatar or animation into a scene (handles URL, file, and scene sources).
+ * @param scene - The target scene.
+ * @param entry - The stored avatar or animation entry.
+ */
+async function LoadIntoScene(scene: Scene, entry: StoredAvatar | StoredAnimation, manager: { getFilesAsync(id: string, fileNames: string[]): Promise<File[]> }): Promise<void> {
+    if (entry.source === "url" && entry.url) {
+        await ImportMeshAsync(entry.url, scene);
+    } else if (entry.source === "file" && entry.fileNames?.length) {
+        const files = await manager.getFilesAsync(entry.id, entry.fileNames);
+        let sceneFile: File | undefined;
+        for (const file of files) {
+            const lowerName = file.name.toLowerCase();
+            FilesInputStore.FilesToLoad[lowerName] = file;
+            const ext = lowerName.split(".").pop();
+            if (ext && SceneLoader.IsPluginForExtensionAvailable("." + ext)) {
+                sceneFile = file;
+            }
+        }
+        if (!sceneFile) {
+            throw new Error("No loadable scene file found.");
+        }
+        await ImportMeshAsync(sceneFile.name, scene, { rootUrl: "file:" });
+    } else if (entry.source === "scene") {
+        throw new Error("Scene-sourced entries cannot be loaded into a temporary scene. Use the original PG scene directly.");
+    } else {
+        throw new Error("No URL or files available for this entry.");
+    }
+}
+
+// ─── Schemes Panel ────────────────────────────────────────────────────────────
+
+const SchemesPanel: FunctionComponent<{
+    manager: NamingSchemeManager;
+    avatarManager: AvatarManager;
+    animationManager: AnimationManager;
+    getCurrentScene: () => Scene | null;
+    onMutate: () => void;
+    onEditingChange: (editing: boolean) => void;
+}> = ({ manager, avatarManager, animationManager, getCurrentScene, onMutate, onEditingChange }) => {
+    const classes = useStyles();
+    const [editing, setEditing] = useState<SchemeEdit | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+    const [isPopulating, setIsPopulating] = useState(false);
+
+    // Build populate options from avatars and animations
+    const populateOptions = useMemo(() => {
+        const options: { label: string; value: string }[] = [{ label: "(select)", value: "" }];
+        for (const av of avatarManager.getAllAvatars()) {
+            options.push({ label: `Avatar: ${av.name}`, value: `avatar:${av.name}` });
+        }
+        for (const an of animationManager.getAllAnimations()) {
+            const label =
+                an.animations
+                    .filter((m) => m.displayName)
+                    .map((m) => m.displayName)
+                    .join(", ") || an.id;
+            options.push({ label: `Animation: ${label}`, value: `animation:${an.id}` });
+        }
+        return options;
+    }, [avatarManager, animationManager]);
+
+    const setEditingWithNotify = useCallback(
+        (value: SchemeEdit | null) => {
+            setEditing(value);
+            onEditingChange(value !== null);
+        },
+        [onEditingChange]
+    );
+
+    const schemeNames = manager.getAllSchemeNames().sort((a, b) => a.localeCompare(b));
+
+    const schemeRows: SchemeRow[] = schemeNames.map((name) => ({
+        name,
+        boneCount: manager.getNamingScheme(name)?.length ?? 0,
+    }));
+
+    const schemeColumnSizing: TableColumnSizingOptions = {
+        name: { defaultWidth: 200 },
+        bones: { defaultWidth: 80 },
+        actions: { defaultWidth: 80 },
+    };
+
+    const schemeColumns: TableColumnDefinition<SchemeRow>[] = [
+        createTableColumn({ columnId: "name", renderHeaderCell: () => "Name", renderCell: (item) => item.name }),
+        createTableColumn({
+            columnId: "bones",
+            renderHeaderCell: () => "Bones",
+            renderCell: (item) => `${item.boneCount} bone${item.boneCount !== 1 ? "s" : ""}`,
+        }),
+        createTableColumn({
+            columnId: "actions",
+            renderHeaderCell: () => "",
+            renderCell: (item) => (
+                <>
+                    <Button appearance="transparent" icon={EditRegular} title="Edit" disabled={!!editing} onClick={() => startEdit(item.name)} />
+                    <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(item.name)} />
+                </>
+            ),
+        }),
+    ];
+
+    const startAdd = useCallback(() => {
+        setEditingWithNotify({ originalName: null, name: "", namesText: "" });
+        setError(null);
+    }, [setEditingWithNotify]);
+
+    const startEdit = useCallback(
+        (name: string) => {
+            const entries = manager.getNamingScheme(name) ?? [];
+            // Encode depth as leading spaces (2 per level) so the user can edit hierarchy in the textarea.
+            setEditingWithNotify({ originalName: name, name, namesText: entries.map((e) => "  ".repeat(e.depth) + e.name).join("\n") });
+            setError(null);
+        },
+        [manager, setEditingWithNotify]
+    );
+
+    const handleDelete = useCallback(
+        (name: string) => {
+            // Check if any avatar or animation uses this scheme
+            const usingAvatars = avatarManager.getAllAvatars().filter((a) => a.namingScheme === name);
+            const usingAnimations = animationManager.getAllAnimations().filter((a) => a.namingScheme === name);
+            const users: string[] = [];
+            for (const a of usingAvatars) {
+                users.push(`avatar "${a.name}"`);
+            }
+            for (const a of usingAnimations) {
+                const label =
+                    a.animations
+                        .filter((m) => m.displayName)
+                        .map((m) => m.displayName)
+                        .join(", ") || a.id;
+                users.push(`animation "${label}"`);
+            }
+            if (users.length > 0) {
+                setError(`Cannot delete: scheme is used by ${users.join(", ")}.`);
+                return;
+            }
+            setError(null);
+            setConfirmDelete(name);
+        },
+        [avatarManager, animationManager]
+    );
+
+    const handleConfirmDelete = useCallback(() => {
+        if (!confirmDelete) {
+            return;
+        }
+        try {
+            manager.removeNamingScheme(confirmDelete);
+            onMutate();
+        } catch {
+            // ignore
+        }
+        setConfirmDelete(null);
+    }, [confirmDelete, manager, onMutate]);
+
+    const handleRecreateDefaults = useCallback(() => {
+        const changed = manager.recreateDefaultSchemes();
+        if (changed) {
+            onMutate();
+        }
+    }, [manager, onMutate]);
+
+    /** Loads an avatar or animation into a temp scene and populates the bone names textarea. */
+    const handlePopulate = useCallback(
+        async (key: string) => {
+            if (!key || !editing) {
+                return;
+            }
+            setIsPopulating(true);
+            setError(null);
+
+            let engine: NullEngine | null = null;
+            try {
+                engine = new NullEngine();
+                const scene = new Scene(engine);
+
+                const isAvatar = key.startsWith("avatar:");
+                const name = key.substring(key.indexOf(":") + 1);
+
+                if (isAvatar) {
+                    const avatar = avatarManager.getAvatar(name);
+                    if (!avatar) {
+                        throw new Error(`Avatar "${name}" not found.`);
+                    }
+
+                    if (avatar.source === "scene") {
+                        // Read directly from PG scene
+                        const pgScene = getCurrentScene();
+                        if (!pgScene) {
+                            throw new Error("No active scene available.");
+                        }
+                        // Find the root node and look for a skeleton in its mesh hierarchy
+                        const rootNode = pgScene.getMeshByName(avatar.rootNodeName) ?? pgScene.getTransformNodeByName(avatar.rootNodeName);
+                        if (!rootNode) {
+                            throw new Error(`Root node "${avatar.rootNodeName}" not found in scene.`);
+                        }
+                        let skeleton: Skeleton | null = null;
+                        const meshes = rootNode.getChildMeshes(false);
+                        for (const mesh of meshes) {
+                            if (mesh.skeleton) {
+                                skeleton = mesh.skeleton;
+                                break;
+                            }
+                        }
+                        if (!skeleton) {
+                            throw new Error("No skeleton found in this avatar's mesh hierarchy.");
+                        }
+                        const lines: string[] = [];
+                        const visitBone = (bone: Bone, depth: number) => {
+                            lines.push("  ".repeat(depth) + bone.name);
+                            for (const child of bone.children) {
+                                visitBone(child, depth + 1);
+                            }
+                        };
+                        for (const bone of skeleton.bones) {
+                            if (!bone.parent) {
+                                visitBone(bone, 0);
+                            }
+                        }
+                        setEditing({ ...editing, namesText: lines.join("\n") });
+                    }
+                } else {
+                    const animation = animationManager.getAnimationById(name);
+                    if (!animation) {
+                        throw new Error(`Animation "${name}" not found.`);
+                    }
+
+                    let targetScene: Scene;
+                    if (animation.source === "scene") {
+                        const pgScene = getCurrentScene();
+                        if (!pgScene) {
+                            throw new Error("No active scene available.");
+                        }
+                        targetScene = pgScene;
+                    } else {
+                        await LoadIntoScene(scene, animation, animationManager);
+                        targetScene = scene;
+                    }
+
+                    // Collect animation target names, then sort by scene hierarchy (DFS order)
+                    const targetNames = new Set<string>();
+                    for (const group of targetScene.animationGroups) {
+                        for (const ta of group.targetedAnimations) {
+                            if (ta.target?.name) {
+                                targetNames.add(ta.target.name as string);
+                            }
+                        }
+                    }
+                    if (targetNames.size === 0) {
+                        throw new Error("No animation targets found.");
+                    }
+                    // Walk scene in DFS order, include only animation targets
+                    const lines: string[] = [];
+                    const visited = new Set<string>();
+                    const walkNode = (node: Node, depth: number) => {
+                        if (targetNames.has(node.name) && !visited.has(node.name)) {
+                            visited.add(node.name);
+                            lines.push("  ".repeat(depth) + node.name);
+                        }
+                        for (const child of node.getChildren()) {
+                            walkNode(child, depth + 1);
+                        }
+                    };
+                    for (const rootNode of targetScene.rootNodes) {
+                        walkNode(rootNode, 0);
+                    }
+                    setEditing({ ...editing, namesText: lines.join("\n") });
+                }
+            } catch (e) {
+                setError(e instanceof Error ? e.message : String(e));
+            } finally {
+                engine?.dispose();
+                setIsPopulating(false);
+            }
+        },
+        [editing, avatarManager, animationManager, getCurrentScene]
+    );
+
+    const handleSave = useCallback(() => {
+        if (!editing) {
+            return;
+        }
+        const trimmedName = editing.name.trim();
+        if (!trimmedName) {
+            setError("Scheme name cannot be empty.");
+            return;
+        }
+        // Parse indented text: leading spaces (2 per level) encode the hierarchy depth.
+        const names: BoneEntry[] = editing.namesText
+            .split("\n")
+            .filter((l) => l.trim().length > 0)
+            .map((l) => {
+                const leading = l.length - l.trimStart().length;
+                return { name: l.trim(), depth: Math.floor(leading / 2) };
+            });
+        if (names.length === 0) {
+            setError("A scheme must have at least one bone name.");
+            return;
+        }
+        if (trimmedName !== editing.originalName && manager.getNamingScheme(trimmedName) !== undefined) {
+            setError(`A naming scheme "${trimmedName}" already exists.`);
+            return;
+        }
+        if (editing.originalName && editing.originalName !== trimmedName) {
+            try {
+                manager.removeNamingScheme(editing.originalName);
+            } catch {
+                // ignore
+            }
+        }
+        manager.addNamingScheme(trimmedName, names);
+        setEditingWithNotify(null);
+        setError(null);
+        onMutate();
+    }, [editing, manager, onMutate, setEditingWithNotify]);
+
+    const handleCancel = useCallback(() => {
+        setEditingWithNotify(null);
+        setError(null);
+    }, [setEditingWithNotify]);
+
+    return (
+        <div className={classes.panel}>
+            {/* Confirm delete dialog */}
+            <Dialog
+                open={confirmDelete !== null}
+                onOpenChange={(_, d) => {
+                    if (!d.open) {
+                        setConfirmDelete(null);
+                    }
+                }}
+            >
+                <DialogSurface className={classes.confirmSurface}>
+                    <DialogBody>
+                        <DialogTitle>Delete Naming Scheme</DialogTitle>
+                        <DialogContent>
+                            Delete scheme <strong>"{confirmDelete}"</strong>? All remappings that reference it will also be removed.
+                        </DialogContent>
+                        <DialogActions>
+                            <Button appearance="secondary" label="Cancel" onClick={() => setConfirmDelete(null)} />
+                            <Button appearance="primary" label="Delete" onClick={handleConfirmDelete} />
+                        </DialogActions>
+                    </DialogBody>
+                </DialogSurface>
+            </Dialog>
+
+            <div className={classes.listHeader}>
+                <div className={classes.listButtons}>
+                    <Button icon={ArrowCounterclockwiseRegular} label="Recreate Defaults" onClick={handleRecreateDefaults} disabled={!!editing} />
+                    <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
+                </div>
+            </div>
+            {schemeNames.length === 0 && <Caption1 className={classes.emptyMsg}>No naming schemes defined.</Caption1>}
+            <DataGrid
+                items={schemeRows}
+                columns={schemeColumns}
+                getRowId={(item) => item.name}
+                className={mergeClasses(editing ? classes.dataGridCompactTall : classes.dataGridFlex)}
+                resizableColumns
+                columnSizingOptions={schemeColumnSizing}
+            >
+                <DataGridHeader>
+                    <DataGridRow>{({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}</DataGridRow>
+                </DataGridHeader>
+                <DataGridBody<SchemeRow>>
+                    {({ item, rowId }) => <DataGridRow<SchemeRow> key={rowId}>{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}</DataGridRow>}
+                </DataGridBody>
+            </DataGrid>
+            {!editing && error && <Caption1 className={classes.errorText}>{error}</Caption1>}
+            {editing && (
+                <div className={classes.editSectionFlex}>
+                    <Body1Strong>{editing.originalName ? `Editing "${editing.originalName}"` : "New Scheme"}</Body1Strong>
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Name</Label>
+                        <TextInput className={classes.formControl} value={editing.name} onChange={(v) => setEditing({ ...editing, name: v })} />
+                    </div>
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Populate from</Label>
+                        <Select
+                            className={classes.formControl}
+                            size="small"
+                            disabled={isPopulating}
+                            onChange={(_, d) => {
+                                if (d.value) {
+                                    void handlePopulate(d.value);
+                                }
+                            }}
+                        >
+                            {populateOptions.map((o) => (
+                                <option key={o.value} value={o.value}>
+                                    {o.label}
+                                </option>
+                            ))}
+                        </Select>
+                        {isPopulating && <Spinner size="tiny" />}
+                    </div>
+                    <div className={classes.boneEditRow}>
+                        <Label className={mergeClasses(classes.formLabel, classes.formLabelPadTop)}>Bone names</Label>
+                        <Textarea
+                            className={classes.boneTextarea}
+                            value={editing.namesText}
+                            placeholder="One bone name per line"
+                            onChange={(newVal) => setEditing({ ...editing, namesText: newVal })}
+                        />
+                    </div>
+                    {error && <Caption1 className={classes.errorText}>{error}</Caption1>}
+                    <div className={classes.actionRow}>
+                        <Button appearance="secondary" label="Cancel" onClick={handleCancel} />
+                        <Button appearance="primary" label="Save" onClick={handleSave} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Returns the set of from-bone names whose mapped-to target appears more than once (duplicate targets).
+function ComputeFaultyBones(map: Map<string, string>): Set<string> {
+    const targetCount = new Map<string, string[]>();
+    for (const [from, to] of map) {
+        if (to === "") {
+            continue;
+        }
+        const list = targetCount.get(to) ?? [];
+        list.push(from);
+        targetCount.set(to, list);
+    }
+    const faulty = new Set<string>();
+    for (const froms of targetCount.values()) {
+        if (froms.length > 1) {
+            for (const f of froms) {
+                faulty.add(f);
+            }
+        }
+    }
+    return faulty;
+}
+
+// ─── Remappings Panel ─────────────────────────────────────────────────────────
+
+const RemappingsPanel: FunctionComponent<{
+    manager: NamingSchemeManager;
+    onMutate: () => void;
+    onEditingChange: (editing: boolean) => void;
+}> = ({ manager, onMutate, onEditingChange }) => {
+    const classes = useStyles();
+    const [editing, setEditing] = useState<RemappingEdit | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [confirmDelete, setConfirmDelete] = useState<{ from: string; to: string } | null>(null);
+    const [faultyBones, setFaultyBones] = useState<Set<string>>(new Set());
+
+    const setEditingWithNotify = useCallback(
+        (value: RemappingEdit | null) => {
+            setEditing(value);
+            onEditingChange(value !== null);
+        },
+        [onEditingChange]
+    );
+
+    const schemeNames = manager.getAllSchemeNames().sort((a, b) => a.localeCompare(b));
+    const allRemappings: RemappingRow[] = [...manager.getAllRemappings()].sort((a, b) => `${a.fromScheme}→${a.toScheme}`.localeCompare(`${b.fromScheme}→${b.toScheme}`));
+
+    const remappingColumnSizing: TableColumnSizingOptions = {
+        mapping: { defaultWidth: 300 },
+        actions: { defaultWidth: 80 },
+    };
+
+    const remappingColumns: TableColumnDefinition<RemappingRow>[] = [
+        createTableColumn({
+            columnId: "mapping",
+            renderHeaderCell: () => "Mapping",
+            renderCell: (item) => `${item.fromScheme} → ${item.toScheme}`,
+        }),
+        createTableColumn({
+            columnId: "actions",
+            renderHeaderCell: () => "",
+            renderCell: (item) => (
+                <>
+                    <Button appearance="transparent" icon={EditRegular} title="Edit" disabled={!!editing} onClick={() => startEdit(item.fromScheme, item.toScheme)} />
+                    <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(item.fromScheme, item.toScheme)} />
+                </>
+            ),
+        }),
+    ];
+
+    const startAdd = useCallback(() => {
+        if (schemeNames.length < 2) {
+            return;
+        }
+        const fromScheme = schemeNames[0];
+        const toScheme = schemeNames[1];
+        setEditingWithNotify({ fromScheme, toScheme, map: new Map(), isNew: true });
+        setError(null);
+        setFaultyBones(new Set());
+    }, [schemeNames, setEditingWithNotify]);
+
+    const startEdit = useCallback(
+        (fromScheme: string, toScheme: string) => {
+            const map = manager.getRemapping(fromScheme, toScheme) ?? new Map();
+            setEditingWithNotify({ fromScheme, toScheme, map, isNew: false });
+            setError(null);
+            setFaultyBones(ComputeFaultyBones(map));
+        },
+        [manager, setEditingWithNotify]
+    );
+
+    const handleDelete = useCallback((fromScheme: string, toScheme: string) => {
+        setConfirmDelete({ from: fromScheme, to: toScheme });
+    }, []);
+
+    const handleConfirmDelete = useCallback(() => {
+        if (!confirmDelete) {
+            return;
+        }
+        try {
+            manager.removeRemapping(confirmDelete.from, confirmDelete.to);
+            onMutate();
+        } catch {
+            // ignore
+        }
+        setConfirmDelete(null);
+    }, [confirmDelete, manager, onMutate]);
+
+    const handleRecreateDefaults = useCallback(() => {
+        const changed = manager.recreateDefaultRemappings();
+        if (changed) {
+            onMutate();
+        }
+    }, [manager, onMutate]);
+
+    const handleSwapSchemes = useCallback(() => {
+        if (!editing) {
+            return;
+        }
+        // Invert the map: swap keys and values, dropping empty-string values (no inverse).
+        const invertedMap = new Map<string, string>();
+        for (const [k, v] of editing.map) {
+            if (v !== "") {
+                invertedMap.set(v, k);
+            }
+        }
+        setEditing({ ...editing, fromScheme: editing.toScheme, toScheme: editing.fromScheme, map: invertedMap });
+    }, [editing]);
+
+    const handleFromSchemeChange = useCallback(
+        (newFrom: string) => {
+            if (!editing) {
+                return;
+            }
+            let toScheme = editing.toScheme;
+            if (toScheme === newFrom) {
+                toScheme = schemeNames.find((n) => n !== newFrom) ?? newFrom;
+            }
+            setEditing({ ...editing, fromScheme: newFrom, toScheme, map: new Map() });
+        },
+        [editing, schemeNames]
+    );
+
+    const handleToSchemeChange = useCallback(
+        (newTo: string) => {
+            if (!editing) {
+                return;
+            }
+            setEditing({ ...editing, toScheme: newTo, map: new Map() });
+        },
+        [editing]
+    );
+
+    const handleMappingChange = useCallback(
+        (fromBone: string, toBone: string) => {
+            if (!editing) {
+                return;
+            }
+            const newMap = new Map(editing.map);
+            newMap.set(fromBone, toBone);
+            setEditing({ ...editing, map: newMap });
+            const faulty = ComputeFaultyBones(newMap);
+            setFaultyBones(faulty);
+            if (faulty.size === 0) {
+                setError(null);
+            } else {
+                setError("Multiple bones are mapped to the same target. Each target must be unique.");
+            }
+        },
+        [editing]
+    );
+
+    const handleSave = useCallback(() => {
+        if (!editing) {
+            return;
+        }
+        if (editing.fromScheme === editing.toScheme) {
+            setError("From and To schemes must be different.");
+            return;
+        }
+        try {
+            manager.addRemapping(editing.fromScheme, editing.toScheme, editing.map);
+            setEditingWithNotify(null);
+            setError(null);
+            setFaultyBones(new Set());
+            onMutate();
+        } catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+    }, [editing, manager, onMutate, setEditingWithNotify]);
+
+    const handleCancel = useCallback(() => {
+        setEditingWithNotify(null);
+        setError(null);
+        setFaultyBones(new Set());
+    }, [setEditingWithNotify]);
+
+    const fromSchemeEntries = useMemo(() => (editing ? (manager.getNamingScheme(editing.fromScheme) ?? []) : []), [editing?.fromScheme, manager]);
+
+    const toSchemeEntries = useMemo(() => (editing ? (manager.getNamingScheme(editing.toScheme) ?? []) : []), [editing?.toScheme, manager]);
+
+    // For new remappings, check in real-time whether a remapping between these two schemes already exists.
+    const schemeConflict = editing?.isNew
+        ? allRemappings.find(
+              (r) => (r.fromScheme === editing.fromScheme && r.toScheme === editing.toScheme) || (r.fromScheme === editing.toScheme && r.toScheme === editing.fromScheme)
+          )
+        : undefined;
+    const conflictLabel = schemeConflict ? `${schemeConflict.fromScheme} → ${schemeConflict.toScheme}` : null;
+
+    return (
+        <div className={classes.panel}>
+            {/* Confirm delete dialog */}
+            <Dialog
+                open={confirmDelete !== null}
+                onOpenChange={(_, d) => {
+                    if (!d.open) {
+                        setConfirmDelete(null);
+                    }
+                }}
+            >
+                <DialogSurface className={classes.confirmSurface}>
+                    <DialogBody>
+                        <DialogTitle>Delete Remapping</DialogTitle>
+                        <DialogContent>
+                            Delete remapping{" "}
+                            <strong>
+                                "{confirmDelete?.from}" → "{confirmDelete?.to}"
+                            </strong>
+                            ?
+                        </DialogContent>
+                        <DialogActions>
+                            <Button appearance="secondary" label="Cancel" onClick={() => setConfirmDelete(null)} />
+                            <Button appearance="primary" label="Delete" onClick={handleConfirmDelete} />
+                        </DialogActions>
+                    </DialogBody>
+                </DialogSurface>
+            </Dialog>
+
+            <div className={classes.listHeader}>
+                <div className={classes.listButtons}>
+                    <Button icon={ArrowCounterclockwiseRegular} label="Recreate Defaults" onClick={handleRecreateDefaults} disabled={!!editing} />
+                    <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing || schemeNames.length < 2} />
+                </div>
+            </div>
+            {allRemappings.length === 0 && <Caption1 className={classes.emptyMsg}>No remappings defined.</Caption1>}
+            <DataGrid
+                items={allRemappings}
+                columns={remappingColumns}
+                getRowId={(item) => `${item.fromScheme}|${item.toScheme}`}
+                className={mergeClasses(editing ? classes.dataGridCompact : classes.dataGridFlex)}
+                resizableColumns
+                columnSizingOptions={remappingColumnSizing}
+            >
+                <DataGridHeader>
+                    <DataGridRow>{({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}</DataGridRow>
+                </DataGridHeader>
+                <DataGridBody<RemappingRow>>
+                    {({ item, rowId }) => <DataGridRow<RemappingRow> key={rowId}>{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}</DataGridRow>}
+                </DataGridBody>
+            </DataGrid>
+            {editing && (
+                <div className={classes.editSectionFlex}>
+                    <Body1Strong>{editing.isNew ? "New Remapping" : `Editing "${editing.fromScheme}" → "${editing.toScheme}"`}</Body1Strong>
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>From scheme</Label>
+                        <StringDropdown
+                            className={classes.formControl}
+                            value={editing.fromScheme}
+                            disabled={!editing.isNew}
+                            options={schemeNames.map((n) => ({ label: n, value: n }))}
+                            onChange={(v) => handleFromSchemeChange(v)}
+                        />
+                    </div>
+                    <div className={classes.swapRow}>
+                        <Button appearance="transparent" icon={ArrowBidirectionalUpDownRegular} title="Swap From / To schemes" onClick={handleSwapSchemes} />
+                    </div>
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>To scheme</Label>
+                        <StringDropdown
+                            className={classes.formControl}
+                            value={editing.toScheme}
+                            disabled={!editing.isNew}
+                            options={schemeNames.filter((n) => n !== editing.fromScheme).map((n) => ({ label: n, value: n }))}
+                            onChange={(v) => handleToSchemeChange(v)}
+                        />
+                    </div>
+                    {conflictLabel && <Caption1 className={classes.errorText}>A remapping &quot;{conflictLabel}&quot; already exists. Edit that remapping instead.</Caption1>}
+                    <Caption1 className={classes.subtleText}>{fromSchemeEntries.length} bones — select the target bone for each, or leave blank.</Caption1>
+                    <div className={classes.mappingTable}>
+                        {fromSchemeEntries.map((entry) => (
+                            <div key={entry.name} className={mergeClasses(classes.mappingRow, faultyBones.has(entry.name) ? classes.mappingRowError : undefined)}>
+                                <Caption1 className={classes.mappingBoneName} title={entry.name}>
+                                    {"\u00A0\u00A0".repeat(entry.depth) + entry.name}
+                                </Caption1>
+                                <select
+                                    className={classes.mappingSelect}
+                                    value={editing.map.get(entry.name) ?? ""}
+                                    onChange={(e) => handleMappingChange(entry.name, e.target.value)}
+                                >
+                                    <option value="">— (no mapping)</option>
+                                    {toSchemeEntries.map((toEntry) => (
+                                        <option key={toEntry.name} value={toEntry.name}>
+                                            {"\u00A0\u00A0".repeat(toEntry.depth) + toEntry.name}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+                        ))}
+                    </div>
+                    {error && <Caption1 className={classes.errorText}>{error}</Caption1>}
+                    <div className={classes.actionRow}>
+                        <Button appearance="secondary" label="Cancel" onClick={handleCancel} />
+                        <Button appearance="primary" label="Save" onClick={handleSave} disabled={!!conflictLabel || faultyBones.size > 0} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ─── Main Dialog ──────────────────────────────────────────────────────────────
+
+export type RetargetingConfigDialogProps = {
+    manager: NamingSchemeManager;
+    avatarManager: AvatarManager;
+    animationManager: AnimationManager;
+    getCurrentScene: () => Nullable<Scene>;
+    open: boolean;
+    onClose: () => void;
+};
+
+/**
+ * Dialog component for managing retargeting configuration (avatars, animations, schemes, remappings).
+ * @returns The React element.
+ */
+export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogProps> = ({ manager, avatarManager, animationManager, getCurrentScene, open, onClose }) => {
+    const classes = useStyles();
+    const [activeTab, setActiveTab] = useState<"avatars" | "animations" | "schemes" | "remappings">("avatars");
+    const [version, setVersion] = useState(0);
+    const [isEditing, setIsEditing] = useState(false);
+    const [confirmClose, setConfirmClose] = useState(false);
+
+    const [pendingImport, setPendingImport] = useState<any>(null);
+    const [importResult, setImportResult] = useState<string | null>(null);
+    const surfaceRef = useRef<HTMLElement>(null);
+    const importInputRef = useRef<HTMLInputElement>(null);
+    const onMutate = useCallback(() => setVersion((v) => v + 1), []);
+    const onEditingChange = useCallback((editing: boolean) => setIsEditing(editing), []);
+
+    // Observe the surface size and persist it for the session so close/reopen keeps the same dimensions.
+    useEffect(() => {
+        if (!open) {
+            // Reset editing state so it's clean when the dialog is reopened.
+            setIsEditing(false);
+            setConfirmClose(false);
+            return;
+        }
+        const el = surfaceRef.current;
+        if (!el) {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            SavedDialogSize = { width: el.offsetWidth, height: el.offsetHeight };
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [open]);
+
+    const handleClose = useCallback(() => {
+        if (isEditing) {
+            setConfirmClose(true);
+        } else {
+            onClose();
+        }
+    }, [isEditing, onClose]);
+
+    const handleExport = useCallback(async () => {
+        const exportObj = {
+            avatars: await avatarManager.exportDataAsync(),
+            animations: await animationManager.exportDataAsync(),
+            namingSchemes: manager.exportData(),
+        };
+        const blob = new Blob([JSON.stringify(exportObj, null, 2)], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "retargeting-config.json";
+        a.click();
+        URL.revokeObjectURL(url);
+    }, [avatarManager, animationManager, manager]);
+
+    const handleImportFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) {
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const data = JSON.parse(reader.result as string);
+                setPendingImport(data);
+            } catch {
+                setImportResult("Failed to parse JSON file.");
+            }
+        };
+        reader.readAsText(file);
+        e.target.value = ""; // reset so same file can be re-selected
+    }, []);
+
+    const handleImport = useCallback(
+        async (mode: "replace" | "append") => {
+            if (!pendingImport) {
+                return;
+            }
+            const skipped: string[] = [];
+            if (pendingImport.namingSchemes) {
+                skipped.push(...manager.importData(pendingImport.namingSchemes, mode));
+            }
+            if (pendingImport.avatars) {
+                skipped.push(...(await avatarManager.importDataAsync(pendingImport.avatars, mode)));
+            }
+            if (pendingImport.animations) {
+                skipped.push(...(await animationManager.importDataAsync(pendingImport.animations, mode)));
+            }
+            setPendingImport(null);
+            onMutate();
+            if (skipped.length > 0) {
+                setImportResult(`Imported with ${skipped.length} skipped: ${skipped.join(", ")}`);
+            } else {
+                setImportResult("Import completed successfully.");
+            }
+        },
+        [pendingImport, manager, avatarManager, animationManager, onMutate]
+    );
+
+    // version is read to force a re-render of the child panels after mutations
+    void version;
+
+    return (
+        <Dialog
+            open={open}
+            onOpenChange={(_, d) => {
+                if (!d.open && d.type === "escapeKeyDown") {
+                    handleClose();
+                }
+            }}
+        >
+            {/* Dynamic: depends on runtime resize value */}
+            <DialogSurface
+                ref={surfaceRef as React.Ref<HTMLDivElement>}
+                className={classes.surface}
+                style={SavedDialogSize ? { width: `${SavedDialogSize.width}px`, height: `${SavedDialogSize.height}px` } : undefined}
+            >
+                <DialogBody className={classes.body}>
+                    <div className={classes.titleRow}>
+                        <DialogTitle action={null}>Retargeting Configuration</DialogTitle>
+                        <div className={classes.titleButtons}>
+                            <Button appearance="subtle" icon={ArrowDownloadRegular} onClick={handleExport} title="Export configuration" disabled={isEditing} />
+                            <Button
+                                appearance="subtle"
+                                icon={ArrowUploadRegular}
+                                onClick={() => importInputRef.current?.click()}
+                                title="Import configuration"
+                                disabled={isEditing}
+                            />
+                            <input ref={importInputRef} type="file" accept=".json" className={classes.hiddenInput} onChange={handleImportFile} />
+                            <Button appearance="subtle" icon={DismissRegular} onClick={handleClose} title="Close" />
+                        </div>
+                    </div>
+                    {/* Import mode chooser dialog */}
+                    <Dialog
+                        open={pendingImport !== null}
+                        onOpenChange={(_, d) => {
+                            if (!d.open) {
+                                setPendingImport(null);
+                            }
+                        }}
+                    >
+                        <DialogSurface className={classes.confirmSurface}>
+                            <DialogBody>
+                                <DialogTitle>Import Configuration</DialogTitle>
+                                <DialogContent>
+                                    <strong>Replace</strong> all existing data, or <strong>Append</strong> and skip duplicates?
+                                </DialogContent>
+                                <DialogActions>
+                                    <Button appearance="secondary" label="Cancel" onClick={() => setPendingImport(null)} />
+                                    <Button
+                                        appearance="primary"
+                                        label="Replace"
+                                        onClick={() => {
+                                            void handleImport("replace");
+                                        }}
+                                    />
+                                    <Button
+                                        appearance="primary"
+                                        label="Append"
+                                        onClick={() => {
+                                            void handleImport("append");
+                                        }}
+                                    />
+                                </DialogActions>
+                            </DialogBody>
+                        </DialogSurface>
+                    </Dialog>
+                    {/* Import result dialog */}
+                    <Dialog
+                        open={importResult !== null}
+                        onOpenChange={(_, d) => {
+                            if (!d.open) {
+                                setImportResult(null);
+                            }
+                        }}
+                    >
+                        <DialogSurface className={classes.confirmSurface}>
+                            <DialogBody>
+                                <DialogTitle>Import Result</DialogTitle>
+                                <DialogContent>{importResult}</DialogContent>
+                                <DialogActions>
+                                    <Button appearance="primary" label="OK" onClick={() => setImportResult(null)} />
+                                </DialogActions>
+                            </DialogBody>
+                        </DialogSurface>
+                    </Dialog>
+                    {/* Confirm close when edits are pending */}
+                    <Dialog
+                        open={confirmClose}
+                        onOpenChange={(_, d) => {
+                            if (!d.open) {
+                                setConfirmClose(false);
+                            }
+                        }}
+                    >
+                        <DialogSurface className={classes.confirmSurface}>
+                            <DialogBody>
+                                <DialogTitle>Unsaved Changes</DialogTitle>
+                                <DialogContent>You may have unsaved changes. Close anyway and lose them?</DialogContent>
+                                <DialogActions>
+                                    <Button appearance="secondary" label="Cancel" onClick={() => setConfirmClose(false)} />
+                                    <Button
+                                        appearance="primary"
+                                        label="Close Anyway"
+                                        onClick={() => {
+                                            setConfirmClose(false);
+                                            onClose();
+                                        }}
+                                    />
+                                </DialogActions>
+                            </DialogBody>
+                        </DialogSurface>
+                    </Dialog>
+                    <TabList
+                        className={classes.tabList}
+                        selectedValue={activeTab}
+                        onTabSelect={(_, d) => {
+                            if (!isEditing) {
+                                setActiveTab(d.value as "avatars" | "animations" | "schemes" | "remappings");
+                            }
+                        }}
+                    >
+                        <Tab value="avatars" disabled={isEditing && activeTab !== "avatars"}>
+                            Avatars
+                        </Tab>
+                        <Tab value="animations" disabled={isEditing && activeTab !== "animations"}>
+                            Animations
+                        </Tab>
+                        <Tab value="schemes" disabled={isEditing && activeTab !== "schemes"}>
+                            Naming Schemes
+                        </Tab>
+                        <Tab value="remappings" disabled={isEditing && activeTab !== "remappings"}>
+                            Scheme Remappings
+                        </Tab>
+                    </TabList>
+                    <DialogContent className={classes.content}>
+                        {activeTab === "avatars" ? (
+                            <AvatarsPanel
+                                avatarManager={avatarManager}
+                                namingSchemeManager={manager}
+                                getCurrentScene={getCurrentScene}
+                                onMutate={onMutate}
+                                onEditingChange={onEditingChange}
+                            />
+                        ) : activeTab === "animations" ? (
+                            <AnimationsPanel
+                                animationManager={animationManager}
+                                namingSchemeManager={manager}
+                                getCurrentScene={getCurrentScene}
+                                onMutate={onMutate}
+                                onEditingChange={onEditingChange}
+                            />
+                        ) : activeTab === "schemes" ? (
+                            <SchemesPanel
+                                manager={manager}
+                                avatarManager={avatarManager}
+                                animationManager={animationManager}
+                                getCurrentScene={getCurrentScene}
+                                onMutate={onMutate}
+                                onEditingChange={onEditingChange}
+                            />
+                        ) : (
+                            <RemappingsPanel manager={manager} onMutate={onMutate} onEditingChange={onEditingChange} />
+                        )}
+                    </DialogContent>
+                </DialogBody>
+            </DialogSurface>
+        </Dialog>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
new file mode 100644
index 00000000000..0709b995695
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -0,0 +1,505 @@
+import { type Nullable } from "core/types";
+import { type IRetargetOptions } from "core/Animations/animatorAvatar";
+import { type Engine } from "core/Engines/engine";
+
+import { ArcRotateCamera } from "core/Cameras/arcRotateCamera";
+import { Vector3 } from "core/Maths/math.vector";
+import { DirectionalLight } from "core/Lights/directionalLight";
+import { ShadowGenerator } from "core/Lights/Shadows/shadowGenerator";
+import { ShadowOnlyMaterial } from "materials/shadowOnly/shadowOnlyMaterial";
+import { GridMaterial } from "materials/grid/gridMaterial";
+import { MeshBuilder } from "core/Meshes/meshBuilder";
+import { Observable } from "core/Misc/observable";
+import { Logger } from "core/Misc/logger";
+import { PointerEventTypes } from "core/Events/pointerEvents";
+import { CubeTexture } from "core/Materials/Textures/cubeTexture";
+import { Scene } from "core/scene";
+
+import { Avatar } from "./avatar";
+import { AnimationSource } from "./animation";
+import { HTMLConsole } from "./htmlConsole";
+import { type NamingSchemeManager } from "./namingSchemeManager";
+import { type AvatarManager, type RestPoseDataUpdate } from "./avatarManager";
+import { type AnimationManager } from "./animationManager";
+import { SaveSnippet, TestPlaygroundCode, ExportToSceneCode, ExportToSceneHeader, ExportToSceneHelpersCode } from "./helperFunctions";
+
+export type { GizmoType } from "./avatar";
+
+/**
+ *
+ */
+export interface IRetargetingParams {
+    // Avatar
+    /**
+     *
+     */
+    avatarName: string;
+    /**
+     *
+     */
+    avatarRescaleAvatar: boolean;
+    /**
+     *
+     */
+    avatarAnimSpeed: number;
+    // Animation
+    /**
+     *
+     */
+    animationName: string;
+    /**
+     *
+     */
+    animationSpeed: number;
+    // Retarget
+    /**
+     *
+     */
+    fixAnimations: boolean;
+    /**
+     *
+     */
+    checkHierarchy: boolean;
+    /**
+     *
+     */
+    retargetAnimationKeys: boolean;
+    /**
+     *
+     */
+    fixRootPosition: boolean;
+    /**
+     *
+     */
+    fixGroundReference: boolean;
+    /**
+     *
+     */
+    fixGroundReferenceDynamicRefNode: boolean;
+    /**
+     *
+     */
+    rootNodeName: string;
+    /**
+     *
+     */
+    groundReferenceNodeName: string;
+    /**
+     *
+     */
+    groundReferenceVerticalAxis: "" | "X" | "Y" | "Z";
+}
+
+const Camera1LayerMask = 0x1fffffff;
+const Camera2LayerMask = 0x2fffffff;
+const SharedLayerMask = 0x30000000;
+const ShadowLayerMask1 = 0x10000000;
+const ShadowLayerMask2 = 0x20000000;
+
+/**
+ *
+ */
+export class RetargetingSceneManager {
+    private _engine: Nullable<Engine> = null;
+    private _scene: Nullable<Scene> = null;
+    private _savedRenderLoops: Array<() => void> = [];
+
+    /**
+     *
+     */
+    public avatar: Nullable<Avatar> = null;
+    /**
+     *
+     */
+    public animationSource: Nullable<AnimationSource> = null;
+    /**
+     *
+     */
+    public htmlConsole!: HTMLConsole;
+
+    private _retargetOptions: Nullable<IRetargetOptions> = null;
+    private _lastRetargetParams: Nullable<IRetargetingParams> = null;
+    private _lastAvatarRestPose: RestPoseDataUpdate | undefined;
+    private _lastAnimationRestPose: RestPoseDataUpdate | undefined;
+    private _isRetargeted = false;
+
+    /**
+     *
+     */
+    public readonly onRetargetDoneObservable = new Observable<void>();
+
+    public get isRetargeted(): boolean {
+        return this._isRetargeted;
+    }
+
+    public get scene(): Nullable<Scene> {
+        return this._scene;
+    }
+
+    public constructor() {}
+
+    public initialize(engine: Engine): void {
+        this._engine = engine;
+
+        // Save and clear existing render loops so we can run our own
+        this._savedRenderLoops = [...(engine as any)._activeRenderLoops];
+        engine.stopRenderLoop();
+
+        this.htmlConsole = new HTMLConsole();
+        this._scene = new Scene(this._engine);
+
+        // Remove the retargeting scene from the engine's scenes list so it won't
+        // be auto-disposed when the engine is disposed (e.g. PG Play button).
+        // We manage the scene lifecycle ourselves in dispose().
+        const idx = this._engine.scenes.indexOf(this._scene);
+        if (idx !== -1) {
+            this._engine.scenes.splice(idx, 1);
+        }
+
+        this._scene.environmentTexture = CubeTexture.CreateFromPrefilteredData("https://playground.babylonjs.com/textures/environment.env", this._scene);
+
+        const camera1 = new ArcRotateCamera("camera1", 1.57, Math.PI / 2.2, 11.5, new Vector3(0, 0.8, 0), this._scene);
+        camera1.wheelPrecision = 50;
+        camera1.layerMask = Camera1LayerMask;
+        camera1.minZ = 0.02;
+        camera1.viewport.width = 0.5;
+        camera1.attachControl(true);
+
+        const camera2 = camera1.clone("camera2") as ArcRotateCamera;
+        camera2.wheelPrecision = 50;
+        camera2.layerMask = Camera2LayerMask;
+        camera2.minZ = 0.02;
+        camera2.viewport.x = 0.5;
+        camera2.viewport.width = 0.5;
+        camera2.attachControl(true);
+
+        this._scene.activeCameras = [camera1, camera2];
+
+        // Shadow-only ground planes (left / right)
+        const sm = new ShadowOnlyMaterial("shadowMat", this._scene);
+        const groundShadow1 = MeshBuilder.CreateGround("groundShadow1", { width: 40, height: 40 }, this._scene);
+        groundShadow1.position.y = 0.01;
+        groundShadow1.material = sm;
+        groundShadow1.receiveShadows = true;
+        groundShadow1.layerMask = ShadowLayerMask1;
+
+        const groundShadow2 = MeshBuilder.CreateGround("groundShadow2", { width: 40, height: 40 }, this._scene);
+        groundShadow2.position.y = 0.01;
+        groundShadow2.material = sm;
+        groundShadow2.receiveShadows = true;
+        groundShadow2.layerMask = ShadowLayerMask2;
+
+        // Shared grid ground
+        const gridMaterial = new GridMaterial("grid", this._scene);
+        gridMaterial.mainColor.setAll(0.7);
+        gridMaterial.lineColor.setAll(0.2);
+        gridMaterial.gridRatio = 0.4;
+        gridMaterial.majorUnitFrequency = 1000;
+        const ground = MeshBuilder.CreateGround("ground", { width: 40, height: 40 }, this._scene);
+        ground.material = gridMaterial;
+        ground.layerMask = SharedLayerMask;
+
+        // Directional lights (one per viewport)
+        const light1 = new DirectionalLight("dirLight1", new Vector3(-1, -4, -2), this._scene);
+        light1.shadowMaxZ = 7;
+        light1.autoUpdateExtends = false;
+        light1.orthoLeft = -1.1;
+        light1.orthoRight = 5;
+        light1.orthoBottom = -3;
+        light1.orthoTop = 4;
+        light1.includeOnlyWithLayerMask = Camera1LayerMask;
+
+        const light2 = light1.clone("dirLight2") as DirectionalLight;
+        light2.includeOnlyWithLayerMask = Camera2LayerMask;
+
+        const shadowGen1 = new ShadowGenerator(2048, light1);
+        shadowGen1.usePercentageCloserFiltering = true;
+        shadowGen1.getShadowMap()!.activeCamera = camera1;
+        shadowGen1.bias = 0.01;
+
+        const shadowGen2 = new ShadowGenerator(2048, light2);
+        shadowGen2.usePercentageCloserFiltering = true;
+        shadowGen2.getShadowMap()!.activeCamera = camera2;
+        shadowGen2.bias = 0.01;
+
+        // Create Avatar and AnimationSource (separate classes)
+        this.avatar = new Avatar(this._scene, camera1, shadowGen1);
+        this.animationSource = new AnimationSource(this._scene, camera2, shadowGen2);
+
+        // Delegate bone-click picking to the correct half of the split viewport.
+        this._scene.onPointerObservable.add((pointerInfo) => {
+            if (pointerInfo.type === PointerEventTypes.POINTERDOWN) {
+                const x = this._scene!.pointerX;
+                const halfWidth = this._engine!.getRenderWidth() / 2;
+                if (x <= halfWidth) {
+                    this.avatar?.handleBoneClick(x, this._scene!.pointerY);
+                } else {
+                    this.animationSource?.handleBoneClick(x, this._scene!.pointerY);
+                }
+            }
+        });
+
+        this._engine.runRenderLoop(() => this._scene?.render());
+    }
+
+    public retarget(params: IRetargetingParams, namingSchemeManager: NamingSchemeManager, avatarManager: AvatarManager, animationManager: AnimationManager): void {
+        const { avatar, animationSource } = this;
+        if (!avatar?.animatorAvatar || !animationSource?.animationGroup) {
+            return;
+        }
+
+        const storedAvatar = avatarManager.getAvatar(params.avatarName);
+        const storedAnimation = animationManager.getByDisplayName(params.animationName)?.entry;
+        const sourceScheme = storedAnimation?.namingScheme;
+        const targetScheme = storedAvatar?.namingScheme;
+        if (!sourceScheme || !targetScheme) {
+            return;
+        }
+
+        this._lastRetargetParams = params;
+        this._lastAvatarRestPose = storedAvatar?.restPoseUpdate;
+        this._lastAnimationRestPose = storedAnimation?.restPoseUpdate;
+
+        avatar.prepareRetargeting();
+        animationSource.prepareRetargeting();
+
+        this._retargetOptions = {
+            animationGroupName: "avatar",
+            fixAnimations: params.fixAnimations,
+            checkHierarchy: params.checkHierarchy,
+            retargetAnimationKeys: params.retargetAnimationKeys,
+            fixRootPosition: params.fixRootPosition,
+            fixGroundReference: params.fixGroundReference,
+            fixGroundReferenceDynamicRefNode: params.fixGroundReferenceDynamicRefNode,
+            rootNodeName: params.rootNodeName === "Auto" ? "" : params.rootNodeName,
+            groundReferenceNodeName: params.groundReferenceNodeName,
+            groundReferenceVerticalAxis: params.groundReferenceVerticalAxis,
+            mapNodeNames: namingSchemeManager.getRemapping(sourceScheme, targetScheme),
+        };
+
+        const retargetedGroup = avatar.animatorAvatar.retargetAnimationGroup(animationSource.animationGroup, this._retargetOptions);
+
+        this._isRetargeted = true;
+        avatar.setRetargetedAnimation(retargetedGroup, params.avatarAnimSpeed);
+        animationSource.play(params.animationSpeed);
+
+        this.onRetargetDoneObservable.notifyObservers();
+    }
+
+    /**
+     * Generates retargeting code for "Export to Scene".
+     * Returns an object with helpers code and main function code, or null if not ready.
+     * For file-based entries, converts them to base64 data URLs.
+     * @param avatarManager - The avatar manager.
+     * @param animationManager - The animation manager.
+     * @param functionName - The name for the generated function.
+     * @returns Object with code strings, or null if not ready.
+     */
+    public async generateRetargetingCodeAsync(
+        avatarManager: AvatarManager,
+        animationManager: AnimationManager,
+        functionName: string
+    ): Promise<{
+        /**
+         *
+         */
+        helpersCode: string /**
+         *
+         */;
+        headerCode: string /**
+         *
+         */;
+        functionCode: string /**
+         *
+         */;
+        functionName: string;
+    } | null> {
+        if (!this._isRetargeted || !this._retargetOptions || !this._lastRetargetParams || !this.avatar || !this.animationSource) {
+            return null;
+        }
+
+        const params = this._lastRetargetParams;
+        const storedAvatar = avatarManager.getAvatar(params.avatarName);
+        const result = animationManager.getByDisplayName(params.animationName);
+        if (!storedAvatar || !result) {
+            return null;
+        }
+        const storedAnimation = result.entry;
+        const animationGroupIndex = result.mapping.index;
+
+        // Resolve URLs — for file-based entries, convert to base64 data URLs
+        let avatarUrl = storedAvatar.url ?? "";
+        let animationUrl = storedAnimation.url ?? "";
+
+        if (storedAvatar.source === "file" && storedAvatar.fileNames?.length) {
+            avatarUrl = await this._fileToDataUrlAsync(avatarManager, storedAvatar.id, storedAvatar.fileNames);
+        }
+        if (storedAnimation.source === "file" && storedAnimation.fileNames?.length) {
+            animationUrl = await this._fileToDataUrlAsync(animationManager, storedAnimation.id, storedAnimation.fileNames);
+        }
+
+        const boneTransformations = this.avatar.buildExportData(this._lastAvatarRestPose);
+        const animationTransformNodes = this.animationSource.buildExportData(this._lastAnimationRestPose);
+
+        const mapNodes: string[] = [];
+        const map = this._retargetOptions.mapNodeNames;
+        if (map) {
+            for (const [source, target] of map) {
+                mapNodes.push(source, target);
+            }
+        }
+
+        const optionsCopy = { ...this._retargetOptions, mapNodeNames: undefined, animationGroupName: `${storedAvatar.name} - ${params.animationName}` };
+
+        const functionCode = ExportToSceneCode.replace(/%functionName%/g, functionName)
+            .replace("%avatarSource%", storedAvatar.source === "scene" ? "scene" : "url")
+            .replace(/%avatarPath%/g, avatarUrl.replace(/"/g, '\\"'))
+            .replace(/%avatarRootNodeName%/g, storedAvatar.rootNodeName)
+            .replace(/%avatarRootNodeIndex%/g, String(storedAvatar.rootNodeIndex ?? 0))
+            .replace("%animationSource%", storedAnimation.source === "scene" ? "scene" : "url")
+            .replace(/%animationPath%/g, animationUrl.replace(/"/g, '\\"'))
+            .replace("%animationGroupIndex%", String(animationGroupIndex))
+            .replace("%retargetOptions%", JSON.stringify(optionsCopy, undefined, 8))
+            .replace("%avatarRestPoseUpdate%", JSON.stringify(boneTransformations))
+            .replace("%animationRestPoseUpdate%", JSON.stringify(animationTransformNodes))
+            .replace("%nameRemapping%", JSON.stringify(mapNodes));
+
+        return { helpersCode: ExportToSceneHelpersCode, headerCode: ExportToSceneHeader, functionCode, functionName };
+    }
+
+    public async exportToPlaygroundAsync(avatarManager: AvatarManager, animationManager: AnimationManager, onBeforeOpen?: () => void): Promise<boolean> {
+        if (!this._isRetargeted || !this._retargetOptions || !this._lastRetargetParams || !this.avatar || !this.animationSource) {
+            return false;
+        }
+
+        const params = this._lastRetargetParams;
+        const storedAvatar = avatarManager.getAvatar(params.avatarName);
+        const result = animationManager.getByDisplayName(params.animationName);
+        if (!storedAvatar || !result) {
+            return false;
+        }
+        const storedAnimation = result.entry;
+        const animationGroupIndex = result.mapping.index;
+
+        // Resolve URLs — for file-based entries, convert main file to a base64 data URL
+        let avatarUrl = storedAvatar.url ?? "";
+        let animationUrl = storedAnimation.url ?? "";
+
+        if (storedAvatar.source === "file" && storedAvatar.fileNames?.length) {
+            avatarUrl = await this._fileToDataUrlAsync(avatarManager, storedAvatar.id, storedAvatar.fileNames);
+        }
+        if (storedAnimation.source === "file" && storedAnimation.fileNames?.length) {
+            animationUrl = await this._fileToDataUrlAsync(animationManager, storedAnimation.id, storedAnimation.fileNames);
+        }
+
+        if (!avatarUrl || !animationUrl) {
+            Logger.Warn("Cannot export to playground: failed to resolve avatar/animation files.");
+            return false;
+        }
+
+        const boneTransformations = this.avatar.buildExportData(this._lastAvatarRestPose);
+        const animationTransformNodes = this.animationSource.buildExportData(this._lastAnimationRestPose);
+
+        const mapNodes: string[] = [];
+        const map = this._retargetOptions.mapNodeNames;
+        if (map) {
+            for (const [source, target] of map) {
+                mapNodes.push(source, target);
+            }
+        }
+
+        const optionsCopy = { ...this._retargetOptions, mapNodeNames: undefined, animationGroupName: `${storedAvatar.name} - ${params.animationName}` };
+        const code = TestPlaygroundCode.replace("%avatarPath%", avatarUrl.replace(/"/g, '\\"'))
+            .replace("%animationPath%", animationUrl.replace(/"/g, '\\"'))
+            .replace(/%avatarRootNodeIndex%/g, String(storedAvatar.rootNodeIndex ?? 0))
+            .replace("%animationGroupIndex%", String(animationGroupIndex))
+            .replace("%retargetOptions%", JSON.stringify(optionsCopy, undefined, 8))
+            .replace("%avatarRestPoseUpdate%", JSON.stringify(boneTransformations))
+            .replace("%animationRestPoseUpdate%", JSON.stringify(animationTransformNodes))
+            .replace("%nameRemapping%", JSON.stringify(mapNodes));
+
+        await SaveSnippet(code, onBeforeOpen);
+        return true;
+    }
+
+    /**
+     * Reads files from IndexedDB and converts them to base64 data URLs.
+     * For single-file formats (.glb), returns just the data URL.
+     * For multi-file formats (.gltf + .bin + textures), returns a "file:" URL
+     * and includes code to register all companion files in FilesInputStore.
+     * @param manager - The manager providing file access.
+     * @param id - The entry id.
+     * @param fileNames - The file names to retrieve.
+     * @returns The data URL string.
+     */
+    private async _fileToDataUrlAsync(manager: { getFilesAsync(id: string, fileNames: string[]): Promise<File[]> }, id: string, fileNames: string[]): Promise<string> {
+        const files = await manager.getFilesAsync(id, fileNames);
+        let mainFile: File | undefined;
+        for (const file of files) {
+            const ext = file.name.toLowerCase().split(".").pop();
+            if (ext === "glb" || ext === "gltf" || ext === "babylon") {
+                mainFile = file;
+                break;
+            }
+        }
+        if (!mainFile) {
+            return "";
+        }
+
+        // For .glb (single file), convert directly to base64 data URL
+        if (files.length === 1 || mainFile.name.toLowerCase().endsWith(".glb")) {
+            return await this._fileToBase64Async(mainFile);
+        }
+
+        // For multi-file (.gltf + companions): convert all files to base64 and
+        // use a special "files:" prefix that the export templates will handle
+        const fileEntries = await Promise.all(files.map(async (file) => ({ name: file.name, dataUrl: await this._fileToBase64Async(file) })));
+        // Encode all files as a JSON blob after a "files:" prefix
+        return "files:" + JSON.stringify(fileEntries);
+    }
+
+    private async _fileToBase64Async(file: File): Promise<string> {
+        const buffer = await file.arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        let binary = "";
+        for (let i = 0; i < bytes.byteLength; i++) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return "data:;base64," + btoa(binary);
+    }
+
+    public dispose(): void {
+        try {
+            this.avatar?.dispose();
+        } catch {
+            // Ignore — engine/scene may already be disposed
+        }
+        try {
+            this.animationSource?.dispose();
+        } catch {
+            // Ignore
+        }
+        this.htmlConsole.dispose();
+        try {
+            this._scene?.dispose();
+        } catch {
+            // Ignore
+        }
+
+        // Restore original render loops instead of disposing the engine — we don't own it.
+        // Guard against the engine already being disposed (e.g. PG Play button disposes
+        // the engine before our cleanup runs).
+        if (this._engine && !this._engine.isDisposed) {
+            this._engine.stopRenderLoop();
+            for (const loop of this._savedRenderLoops) {
+                this._engine.runRenderLoop(loop);
+            }
+        }
+        this._savedRenderLoops = [];
+
+        this.avatar = null;
+        this.animationSource = null;
+        this._scene = null;
+        this._engine = null;
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/sceneTransfer.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/sceneTransfer.ts
new file mode 100644
index 00000000000..e01b5e44066
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/sceneTransfer.ts
@@ -0,0 +1,180 @@
+import { type Nullable } from "core/types";
+import { type Scene } from "core/scene";
+import { type Node } from "core/node";
+import { type Skeleton } from "core/Bones/skeleton";
+import { type Material } from "core/Materials/material";
+
+import { AbstractMesh } from "core/Meshes/abstractMesh";
+
+/**
+ * Manages the temporary transfer of nodes from a source scene (e.g. the PG scene) into a
+ * target scene (the retargeting scene). Patches `_scene` and pushes into scene arrays
+ * directly to avoid observable side effects. On restore, reverts all changes so the
+ * source scene is left untouched.
+ */
+export class SceneTransfer {
+    private _sourceScene: Nullable<Scene> = null;
+    private _targetScene: Nullable<Scene> = null;
+    private _allNodes: Node[] = [];
+    private _meshes: Array<{ mesh: AbstractMesh; originalLayerMask: number }> = [];
+    private _skeletons: Skeleton[] = [];
+    private _materials: Material[] = [];
+    private _rootOriginalName = "";
+
+    /** True when nodes have been transferred and not yet restored. */
+    public get isActive(): boolean {
+        return this._sourceScene !== null;
+    }
+
+    /** The transferred meshes (with their saved original layer masks). */
+    public get movedMeshes(): ReadonlyArray<{ mesh: AbstractMesh; originalLayerMask: number }> {
+        return this._meshes;
+    }
+
+    /**
+     * Temporarily restores all nodes to the source scene, executes the callback,
+     * then re-transfers them to the target scene. Useful when the source scene
+     * needs to be serialized or inspected while nodes are borrowed.
+     * @param callback - The callback to execute while nodes are restored.
+     * @returns The result of the callback.
+     */
+    public async withRestoredSourceAsync<T>(callback: () => T | Promise<T>): Promise<T> {
+        if (!this._sourceScene || !this._targetScene) {
+            return await callback();
+        }
+        const source = this._sourceScene;
+        const target = this._targetScene;
+        const rootName = this._rootOriginalName;
+
+        // Save the current (retargeting) layer masks before restoring
+        const currentLayerMasks = new Map<AbstractMesh, number>();
+        for (const { mesh } of this._meshes) {
+            currentLayerMasks.set(mesh, mesh.layerMask);
+        }
+
+        // Temporarily restore
+        this._restoreInternal();
+
+        try {
+            return await callback();
+        } finally {
+            // Re-transfer (restore cleared all state, so re-run transfer)
+            const sourceRoot = source.getMeshByName(rootName);
+            if (sourceRoot) {
+                this.transfer(source, target, rootName);
+                // Re-apply the retargeting layer masks (not the original PG ones)
+                for (const { mesh } of this._meshes) {
+                    const savedMask = currentLayerMasks.get(mesh);
+                    if (savedMask !== undefined) {
+                        mesh.layerMask = savedMask;
+                    }
+                }
+                // Re-apply avatar name (transfer saves the original name)
+                sourceRoot.name = "avatar";
+            }
+        }
+    }
+
+    /**
+     * Transfers a node hierarchy from `sourceScene` into `targetScene`.
+     * The root node is looked up by name in the source scene.
+     * @param sourceScene - The source scene to transfer from.
+     * @param targetScene - The target scene to transfer into.
+     * @param rootNodeName - The name of the root node to transfer.
+     * @returns The root mesh, or null if not found.
+     */
+    public transfer(sourceScene: Scene, targetScene: Scene, rootNodeName: string): Nullable<AbstractMesh> {
+        this.restore();
+
+        const sourceRoot = sourceScene.getMeshByName(rootNodeName);
+        if (!sourceRoot) {
+            return null;
+        }
+
+        this._sourceScene = sourceScene;
+        this._targetScene = targetScene;
+        this._rootOriginalName = sourceRoot.name;
+
+        // Patch _scene on the root and all descendants, and push meshes/skeletons
+        // directly into the target scene arrays. We avoid addMesh/addTransformNode
+        // to prevent side effects (observable notifications, index bookkeeping issues).
+        const allNodes = [sourceRoot as Node, ...sourceRoot.getDescendants(false)];
+        for (const node of allNodes) {
+            node._scene = targetScene;
+            this._allNodes.push(node);
+            if (node instanceof AbstractMesh) {
+                this._meshes.push({ mesh: node, originalLayerMask: node.layerMask });
+                targetScene.meshes.push(node);
+                node._resyncLightSources();
+            }
+        }
+
+        // Push skeletons into the target scene and patch their _scene
+        for (const { mesh } of this._meshes) {
+            if (mesh.skeleton && !this._skeletons.includes(mesh.skeleton)) {
+                this._skeletons.push(mesh.skeleton);
+                (mesh.skeleton as any)._scene = targetScene;
+                targetScene.skeletons.push(mesh.skeleton);
+            }
+        }
+
+        // Patch _scene on materials
+        for (const { mesh } of this._meshes) {
+            if (mesh.material && !this._materials.includes(mesh.material)) {
+                this._materials.push(mesh.material);
+                (mesh.material as any)._scene = targetScene;
+            }
+        }
+
+        return sourceRoot;
+    }
+
+    /**
+     * Restores all transferred nodes back to the source scene.
+     * Reverts `_scene`, layer masks, and removes entries from the target scene arrays.
+     */
+    public restore(): void {
+        this._restoreInternal();
+    }
+
+    private _restoreInternal(): void {
+        if (!this._sourceScene || !this._targetScene) {
+            return;
+        }
+
+        // Restore original root name
+        if (this._meshes.length > 0) {
+            this._meshes[0].mesh.name = this._rootOriginalName;
+        }
+
+        // Build sets for fast lookup
+        const meshSet = new Set(this._meshes.map((m) => m.mesh));
+        const skeletonSet = new Set(this._skeletons);
+
+        // Filter borrowed entries out of the target scene arrays
+        this._targetScene.meshes = this._targetScene.meshes.filter((m) => !meshSet.has(m));
+        this._targetScene.skeletons = this._targetScene.skeletons.filter((s) => !skeletonSet.has(s));
+
+        // Restore _scene and layer masks on all borrowed nodes
+        for (const node of this._allNodes) {
+            node._scene = this._sourceScene;
+        }
+        for (const { mesh, originalLayerMask } of this._meshes) {
+            mesh.layerMask = originalLayerMask;
+        }
+        for (const skeleton of this._skeletons) {
+            (skeleton as any)._scene = this._sourceScene;
+        }
+        for (const material of this._materials) {
+            (material as any)._scene = this._sourceScene;
+        }
+
+        this._sourceScene = null;
+        this._targetScene = null;
+        this._allNodes = [];
+        this._meshes = [];
+        this._skeletons = [];
+        this._materials = [];
+        this._rootOriginalName = "";
+    }
+}
diff --git a/packages/dev/inspector-v2/src/index.ts b/packages/dev/inspector-v2/src/index.ts
index c2d12770597..8d595b2cdf6 100644
--- a/packages/dev/inspector-v2/src/index.ts
+++ b/packages/dev/inspector-v2/src/index.ts
@@ -38,6 +38,8 @@ export type { IThemeService } from "./services/themeService";
 export { ThemeServiceIdentity } from "./services/themeService";
 export type { ISettingsStore, SettingDescriptor } from "./services/settingsStore";
 export { SettingsStoreIdentity } from "./services/settingsStore";
+export type { IPlaygroundBridge } from "./services/playgroundBridgeService";
+export { PlaygroundBridgeIdentity } from "./services/playgroundBridgeService";
 export type { IGizmoService, GizmoMode } from "./services/gizmoService";
 export { GizmoServiceIdentity } from "./services/gizmoService";
 export type { IWatcherService } from "./services/watcherService";
diff --git a/packages/dev/inspector-v2/src/services/playgroundBridgeService.ts b/packages/dev/inspector-v2/src/services/playgroundBridgeService.ts
new file mode 100644
index 00000000000..363da56f3a9
--- /dev/null
+++ b/packages/dev/inspector-v2/src/services/playgroundBridgeService.ts
@@ -0,0 +1,32 @@
+import { type IService } from "../modularity/serviceDefinition";
+
+/**
+ * The unique identity symbol for the playground bridge service.
+ */
+export const PlaygroundBridgeIdentity = Symbol("PlaygroundBridge");
+
+/**
+ * Provides a communication bridge between the Inspector and the Playground editor.
+ * This service is only available when the Inspector is opened from the Playground.
+ * Extensions should consume it optionally and gracefully handle its absence.
+ */
+export interface IPlaygroundBridge extends IService<typeof PlaygroundBridgeIdentity> {
+    /**
+     * Adds a new file tab to the Playground editor with the given content.
+     * If a file with the same path already exists, its content is updated.
+     * @param path The file path (e.g. "retargeting.ts")
+     * @param content The file content
+     */
+    addFileTab(path: string, content: string): void;
+
+    /**
+     * Returns the content of a file, or undefined if it doesn't exist.
+     * @param path The file path
+     */
+    getFileContent(path: string): string | undefined;
+
+    /**
+     * Returns the entry file path (e.g. "index.ts" or "index.js").
+     */
+    getEntryFilePath(): string;
+}
diff --git a/packages/dev/inspector-v2/src/services/shellService.tsx b/packages/dev/inspector-v2/src/services/shellService.tsx
index 1bfce4a12e7..1d6d2edfa05 100644
--- a/packages/dev/inspector-v2/src/services/shellService.tsx
+++ b/packages/dev/inspector-v2/src/services/shellService.tsx
@@ -3,6 +3,7 @@ import {
     Button,
     Divider,
     Toolbar as FluentToolbar,
+    Subtitle2Stronger,
     makeStyles,
     Menu,
     MenuGroup,
@@ -13,7 +14,6 @@ import {
     MenuTrigger,
     mergeClasses,
     SplitButton,
-    Subtitle2Stronger,
     tokens,
     ToolbarRadioButton,
 } from "@fluentui/react-components";
@@ -619,7 +619,12 @@ const DockMenu: FunctionComponent<
     );
 };
 
-const PaneHeader: FunctionComponent<{ id: string; title: string; icon?: ComponentType; dockOptions: Map<DockLocation, (sidePaneKey: string) => void> }> = (props) => {
+const PaneHeader: FunctionComponent<{
+    id: string;
+    title: string;
+    icon?: ComponentType;
+    dockOptions: Map<DockLocation, (sidePaneKey: string) => void>;
+}> = (props) => {
     const { id, title, dockOptions } = props;
 
     const classes = useStyles();
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
index 2f0b8a95c65..85a9c22c113 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
@@ -28,5 +28,5 @@ export const Checkbox: FunctionComponent<PrimitiveProps<boolean>> = (props) => {
         setChecked(ev.target.checked);
     };
 
-    return <FluentCheckbox checked={checked} onChange={onChange} indicator={{ className: classes.indicator }} />;
+    return <FluentCheckbox checked={checked} onChange={onChange} disabled={props.disabled} indicator={{ className: classes.indicator }} />;
 };
diff --git a/packages/tools/playground/src/components/editor/monacoComponent.tsx b/packages/tools/playground/src/components/editor/monacoComponent.tsx
index f8fd10d9690..a3db5c63d4f 100644
--- a/packages/tools/playground/src/components/editor/monacoComponent.tsx
+++ b/packages/tools/playground/src/components/editor/monacoComponent.tsx
@@ -83,6 +83,19 @@ export class MonacoComponent extends React.Component<IMonacoComponentProps, ICom
 
         this._monacoManager = new MonacoManager(gs);
 
+        // Expose a callback for external code (e.g. Inspector PlaygroundBridge) to add/update files
+        gs.addOrUpdateFile = (path: string, content: string) => {
+            if (gs.files[path] !== undefined) {
+                // File exists — update its content in both gs.files and the Monaco model
+                gs.files[path] = content;
+                this._monacoManager.updateFileContent(path, content);
+                this._monacoManager.switchActiveFile(path);
+            } else {
+                // New file — create it
+                this._monacoManager.addFile(path, content);
+            }
+        };
+
         // NOTE: This is a workaround currently needed when using Fluent. Specifically, Fluent currently manages focus (handling tab key events),
         // and only excludes elements with `contentEditable` set to `"true"`. Monaco does not set this attribute on its text editor elements by default.
         // Probably Fluent should be checking `isContentEditable` instead as `contentEditable` can be set to `"inherit"`, in which case `isContentEditable`
diff --git a/packages/tools/playground/src/components/rendererComponent.tsx b/packages/tools/playground/src/components/rendererComponent.tsx
index ddd52742315..97ba86bc861 100644
--- a/packages/tools/playground/src/components/rendererComponent.tsx
+++ b/packages/tools/playground/src/components/rendererComponent.tsx
@@ -127,12 +127,32 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
         if (this._scene) {
             const inspectorV2Module: InspectorV2Module | undefined = (globalThis as any).INSPECTOR;
             if (inspectorV2Module?.ShowInspector) {
+                const gs = this.props.globalState;
+                const playgroundBridgeServiceDefinition = {
+                    friendlyName: "Playground Bridge",
+                    produces: [inspectorV2Module.PlaygroundBridgeIdentity],
+                    factory: (): any => ({
+                        addFileTab: (path: string, content: string) => {
+                            if (gs.addOrUpdateFile) {
+                                gs.addOrUpdateFile(path, content);
+                            }
+                        },
+                        getFileContent: (path: string): string | undefined => {
+                            return gs.files[path];
+                        },
+                        getEntryFilePath: (): string => {
+                            return gs.entryFilePath;
+                        },
+                    }),
+                };
+
                 const options = {
                     ...inspectorV2Module.ConvertOptions({
                         embedMode: true,
                     }),
                     showThemeSelector: false,
                     themeMode: Utilities.ReadStringFromStore("theme", "Light") === "Dark" ? "dark" : "light",
+                    serviceDefinitions: [playgroundBridgeServiceDefinition],
                 } as const;
                 this._inspectorV2Token = inspectorV2Module.ShowInspector(this._scene, options);
             } else {
diff --git a/packages/tools/playground/src/globalState.ts b/packages/tools/playground/src/globalState.ts
index f77cc78ab84..4b998865b49 100644
--- a/packages/tools/playground/src/globalState.ts
+++ b/packages/tools/playground/src/globalState.ts
@@ -109,6 +109,12 @@ export class GlobalState {
     public onV2HydrateRequiredObservable = new Observable<V2Manifest>();
     public onEngineSwitchDialogRequiredObservable = new Observable<IEngineSwitchDialogRequest>();
 
+    /**
+     * Callback set by the Monaco editor component to allow external code (e.g. the Inspector bridge)
+     * to add or update a file tab programmatically.
+     */
+    public addOrUpdateFile: ((path: string, content: string) => void) | null = null;
+
     public loadingCodeInProgress = false;
     public onCodeLoaded = new Observable<string>();
     public doNotRun = false;
diff --git a/packages/tools/playground/src/tools/monaco/monacoManager.ts b/packages/tools/playground/src/tools/monaco/monacoManager.ts
index db112b8de76..00ed0f261f9 100644
--- a/packages/tools/playground/src/tools/monaco/monacoManager.ts
+++ b/packages/tools/playground/src/tools/monaco/monacoManager.ts
@@ -286,6 +286,19 @@ export class MonacoManager {
         this.globalState.onManifestChangedObservable.notifyObservers();
     }
 
+    /**
+     * Updates the content of an existing file in the Monaco editor model.
+     * If a model exists for the given path, its value is replaced with the new content.
+     * @param path - The file path identifying the model to update
+     * @param content - The new text content to set on the model
+     */
+    public updateFileContent(path: string, content: string) {
+        const model = this._files.getModel(path);
+        if (model) {
+            model.setValue(content);
+        }
+    }
+
     public removeFile(path: string) {
         this._files.removeFile(path);
         delete this.globalState.files[path];