From 5e25b5f1045acf1e5faa26c53aa8dcd281b60a02 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Mon, 9 Mar 2026 19:27:48 +0100
Subject: [PATCH 01/30] Add optional component displayed at the right side of
 the pane header

---
 .../inspector-v2/src/services/shellService.tsx  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/dev/inspector-v2/src/services/shellService.tsx b/packages/dev/inspector-v2/src/services/shellService.tsx
index 27de9c888e8..3daa28b0de6 100644
--- a/packages/dev/inspector-v2/src/services/shellService.tsx
+++ b/packages/dev/inspector-v2/src/services/shellService.tsx
@@ -212,6 +212,12 @@ export type SidePaneDefinition = {
      * user to lose the complex visual state when switching between tabs.
      */
     keepMounted?: boolean;
+
+    /**
+     * An optional component to render at the right side of the pane header, between the title and
+     * the dock menu button. Useful for adding icon-button actions specific to the pane.
+     */
+    headerExtra?: ComponentType;
 };
 
 type RegisteredSidePane = {
@@ -620,7 +626,13 @@ 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;
+    headerExtra?: ComponentType;
+    dockOptions: Map<DockLocation, (sidePaneKey: string) => void>;
+}> = (props) => {
     const { id, title, dockOptions } = props;
 
     const classes = useStyles();
@@ -633,6 +645,7 @@ const PaneHeader: FunctionComponent<{ id: string; title: string; icon?: Componen
                 </div>
             )}
             <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>{title}</Subtitle2Stronger>
+            {props.headerExtra && <props.headerExtra />}
             <DockMenu sidePaneId={id} dockOptions={dockOptions}>
                 <Button className={classes.paneHeaderButton} appearance="transparent" icon={<MoreHorizontalRegular />} />
             </DockMenu>
@@ -1070,6 +1083,7 @@ function usePane(
                                     id={topSelectedTab.key}
                                     title={topSelectedTab.title}
                                     icon={topPanes.length > 1 ? undefined : topSelectedTab.icon}
+                                    headerExtra={topSelectedTab.headerExtra}
                                     dockOptions={validTopDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}
@@ -1110,6 +1124,7 @@ function usePane(
                                     id={bottomSelectedTab.key}
                                     title={bottomSelectedTab.title}
                                     icon={bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon}
+                                    headerExtra={bottomSelectedTab.headerExtra}
                                     dockOptions={validBottomDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}

From 31367625931e6c56a6b4160f87d207d08ccf064d Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Mon, 9 Mar 2026 19:28:27 +0100
Subject: [PATCH 02/30] Add support for the disabled attribute to fluent check
 box

---
 .../dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
index af63564b20f..adb8d9de0bf 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
@@ -30,5 +30,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 }} />;
 };

From 0f9fdbbcbbf297a82fbc148717dcdbc5717f78eb Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Mon, 9 Mar 2026 19:29:55 +0100
Subject: [PATCH 03/30] Create an extension for animation retargeting

---
 .../defaultInspectorExtensionFeed.ts          |   8 +
 .../animationRetargeting/animation.ts         | 521 +++++++++++
 .../animationRetargetingExtension.tsx         | 167 ++++
 .../animationRetargetingPanel.tsx             | 826 +++++++++++++++++
 .../animationRetargetingViewport.tsx          |  77 ++
 .../extensions/animationRetargeting/avatar.ts | 473 ++++++++++
 .../animationRetargeting/boneDropdown.tsx     |  71 ++
 .../extensions/animationRetargeting/data.ts   | 182 ++++
 .../animationRetargeting/helperFunctions.ts   | 225 +++++
 .../animationRetargeting/htmlConsole.ts       |  84 ++
 .../namingSchemeManager.ts                    | 557 +++++++++++
 .../namingSchemeManagerDialog.tsx             | 867 ++++++++++++++++++
 .../retargetingSceneManager.ts                | 255 ++++++
 13 files changed, 4313 insertions(+)
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/data.ts
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManagerDialog.tsx
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts

diff --git a/packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts b/packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts
index 446ada09c99..a621c1fef29 100644
--- a/packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts
+++ b/packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts
@@ -28,4 +28,12 @@ export const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspecto
         author: { name: "Babylon.js", forumUserName: "" },
         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..b61b57ce068
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -0,0 +1,521 @@
+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, Quaternion } from "core/Maths/math.vector";
+import type { RestPoseDataUpdate } from "./data";
+
+import { Color3 } from "core/Maths/math.color";
+import { Matrix } 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 { 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 { Animations } from "./data";
+import { FindAnimationFromPath, 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 _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, updateRestPose: boolean): Promise<void> {
+        this._cleanScene();
+        await this._loadFileAsync(path, updateRestPose);
+    }
+
+    /** Returns a sorted list of transform node names targeted by the animation group. */
+    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. */
+    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. */
+    public buildExportData(animationPath: string, animationUpdateRestPose: boolean, epsilon: number): RestPoseDataUpdate {
+        const animationTransformNodes: RestPoseDataUpdate = [];
+
+        if (!animationUpdateRestPose) {
+            return animationTransformNodes;
+        }
+
+        const restPoseUpdate = Animations[FindAnimationFromPath(animationPath)]?.restPoseUpdate;
+        if (restPoseUpdate) {
+            for (const dataBlock of restPoseUpdate) {
+                animationTransformNodes.push(dataBlock);
+            }
+        }
+
+        for (const [node, newTransformations] of this._retargetedTransformNodeTransformations) {
+            const initialTransformations = this._initialTransformNodeTransformations.get(node);
+            if (!initialTransformations) {
+                continue;
+            }
+
+            const name = node.name.replace(/"/g, '\\"');
+            const entry = animationTransformNodes.find((v) => v.name === name);
+            let key = entry?.data;
+
+            if (!initialTransformations.scaling.equals(newTransformations.scaling)) {
+                if (!key) {
+                    key = {};
+                    animationTransformNodes.push({ name, data: key });
+                }
+                key.scaling = newTransformations.scaling.asArray();
+            }
+            if (!initialTransformations.quaternion.equals(newTransformations.quaternion)) {
+                if (!key) {
+                    key = {};
+                    animationTransformNodes.push({ name, data: key });
+                }
+                key.quaternion = newTransformations.quaternion.asArray();
+            }
+            if (!initialTransformations.position.equals(newTransformations.position)) {
+                if (!key) {
+                    key = {};
+                    animationTransformNodes.push({ name, data: key });
+                }
+                key.position = newTransformations.position.asArray();
+            }
+        }
+
+        return animationTransformNodes;
+    }
+
+    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();
+        if (this._inRestPose) {
+            this._restPoseTransformNodeTransformations.clear();
+            this._saveTransformNodes(this._restPoseTransformNodeTransformations);
+        }
+        this._restoreTransformNodes(this._restPoseTransformNodeTransformations);
+        this._inRestPose = true;
+        this.onPlayingObservable.notifyObservers(false);
+    }
+
+    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). */
+    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, updateRestPose: boolean): Promise<void> {
+        await AppendSceneAsync(path, this._scene);
+
+        this._rootNode = this._scene.getMeshByName("__root__");
+        if (!this._rootNode) {
+            return;
+        }
+        this._rootNode.name = "reference";
+
+        // 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 first animation group (not the "avatar" retargeted one)
+        this._animationGroup = null;
+        const lstAnimDelete = new Set<AnimationGroup>();
+        for (const animGroup of this._scene.animationGroups) {
+            if (animGroup.name !== "avatar") {
+                if (!this._animationGroup) {
+                    this._animationGroup = animGroup;
+                } else {
+                    lstAnimDelete.add(animGroup);
+                }
+            }
+        }
+        lstAnimDelete.forEach((anim) => anim.dispose());
+
+        if (!this._animationGroup) {
+            return;
+        }
+        this._animationGroup.name = "reference";
+
+        // Delete all skeletons loaded from the animation file (we don't need them)
+        const skeletonsDelete = new Set<import("core/Bones/skeleton").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();
+            });
+
+        // Find the hips/pelvis node to use as skeleton root
+        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;
+        }
+        hipsNode = hipsNode ?? this._rootNode;
+
+        // 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(hipsNode, this._scene, meshOptions);
+        const meshAnim = meshOptions.mesh!;
+        meshAnim.layerMask = ShadowLayerMask;
+        this._shadowGenerator.addShadowCaster(meshAnim);
+
+        this._selectedTransformNode = hipsNode;
+        this._gizmoManager.attachToNode(hipsNode);
+        this.onGizmoNodeSelectedObservable.notifyObservers(hipsNode.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(hipsNode.absolutePosition);
+
+        if (updateRestPose) {
+            this._updateRestPose(path);
+        }
+
+        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 _updateRestPose(path: string): void {
+        if (!this._rootNode) {
+            return;
+        }
+        const restPoseUpdate = Animations[FindAnimationFromPath(path)]?.restPoseUpdate;
+        if (!restPoseUpdate) {
+            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();
+        this._skeletonViewer?.skeleton.dispose();
+        this._rootNode?.dispose(false, true);
+        this._animationGroup = null;
+        this._skeletonViewer = null;
+        this._rootNode = null;
+        this._selectedTransformNode = null;
+    }
+}
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..0d2ff8743a5
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -0,0 +1,167 @@
+import type { IDisposable } from "core/index";
+import type { FunctionComponent } from "react";
+import type { ServiceDefinition } from "../../modularity/serviceDefinition";
+import type { IShellService } from "../../services/shellService";
+import { ShellServiceIdentity } from "../../services/shellService";
+
+import { useState, useEffect } from "react";
+import { Observable } from "core/Misc/observable";
+import { Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Database20Regular, PersonRunning20Regular } from "@fluentui/react-icons";
+import { Button } from "@fluentui/react-components";
+
+import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
+import { AnimationRetargetingPanel, defaultPanelState } from "./animationRetargetingPanel";
+import type { PanelStateStore } from "./animationRetargetingPanel";
+import type { RetargetingSceneManager } from "./retargetingSceneManager";
+import { NamingSchemeManager } from "./namingSchemeManager";
+import { NamingSchemeManagerDialog } from "./namingSchemeManagerDialog";
+
+/**
+ * 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]> = {
+    friendlyName: "Animation Retargeting",
+    consumes: [ShellServiceIdentity],
+    factory: (shellService) => {
+        // 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>();
+
+        // Naming scheme manager — persists across extension lifetime via localStorage
+        const namingSchemeManager = new NamingSchemeManager();
+
+        let isEnabled = false;
+        let viewportReg: IDisposable | null = null;
+        let currentManager: RetargetingSceneManager | null = null;
+        // Persists all panel UI state across remounts (e.g. when the panel is docked elsewhere)
+        const persistedPanelState: PanelStateStore = { ...defaultPanelState };
+
+        function setEnabled(enabled: boolean): void {
+            if (enabled === isEnabled) {
+                return;
+            }
+            isEnabled = enabled;
+
+            if (enabled) {
+                // Register the central-content viewport; the component creates the Engine+Scene
+                viewportReg = shellService.addCentralContent({
+                    key: "AnimationRetargetingViewport",
+                    order: 10,
+                    component: () => (
+                        <AnimationRetargetingViewport
+                            onManagerReady={(manager) => {
+                                currentManager = manager;
+                                onManagerReadyObs.notifyObservers(manager);
+                            }}
+                        />
+                    ),
+                });
+            } else {
+                // Dispose viewport — the component's useEffect cleanup will dispose Engine+Scene
+                viewportReg?.dispose();
+                viewportReg = null;
+                currentManager = null;
+            }
+
+            isEnabledObs.notifyObservers(enabled);
+        }
+
+        // Start disabled so the user opts-in to the viewport
+        setEnabled(false);
+
+        // Header icon buttons: enable/disable toggle and console toggle.
+        const headerActions: FunctionComponent = () => {
+            const [localIsEnabled, setLocalIsEnabled] = useState(isEnabled);
+            const [isConsoleVisible, setIsConsoleVisible] = useState(false);
+            const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+            useEffect(() => {
+                const obs = isEnabledObs.add((v) => setLocalIsEnabled(v));
+                return () => {
+                    isEnabledObs.remove(obs);
+                };
+            }, []);
+
+            useEffect(() => {
+                const manager = currentManager;
+                if (!manager) {
+                    return;
+                }
+                setIsConsoleVisible(manager.htmlConsole.isVisible);
+                const obs = manager.htmlConsole.onVisibilityChangedObservable.add((v) => setIsConsoleVisible(v));
+                return () => {
+                    manager.htmlConsole.onVisibilityChangedObservable.remove(obs);
+                };
+            }, []);
+
+            // Re-subscribe to the console observable whenever a new manager becomes ready.
+            useEffect(() => {
+                const managerObs = onManagerReadyObs.add((manager) => {
+                    setIsConsoleVisible(manager.htmlConsole.isVisible);
+                    manager.htmlConsole.onVisibilityChangedObservable.add((v) => setIsConsoleVisible(v));
+                });
+                return () => {
+                    onManagerReadyObs.remove(managerObs);
+                };
+            }, []);
+
+            return (
+                <>
+                    <Button
+                        appearance="transparent"
+                        size="small"
+                        icon={localIsEnabled ? <EyeOff20Regular /> : <Eye20Regular />}
+                        title={localIsEnabled ? "Disable viewport" : "Enable viewport"}
+                        onClick={() => setEnabled(!localIsEnabled)}
+                    />
+                    <Button
+                        appearance={isConsoleVisible ? "primary" : "transparent"}
+                        size="small"
+                        icon={<WindowConsole20Regular />}
+                        title="Toggle console"
+                        disabled={!localIsEnabled}
+                        onClick={() => currentManager?.htmlConsole.toggle()}
+                    />
+                    <Button appearance="transparent" size="small" icon={<Database20Regular />} title="Manage naming schemes" onClick={() => setIsDialogOpen(true)} />
+                    <NamingSchemeManagerDialog manager={namingSchemeManager} open={isDialogOpen} onClose={() => setIsDialogOpen(false)} />
+                </>
+            );
+        };
+
+        const panelReg = shellService.addSidePane({
+            key: "AnimationRetargetingPanel",
+            title: "Animation Retargeting",
+            icon: PersonRunning20Regular,
+            headerExtra: headerActions,
+            horizontalLocation: "left",
+            verticalLocation: "top",
+            content: () => (
+                <AnimationRetargetingPanel
+                    initialIsEnabled={isEnabled}
+                    isEnabledObs={isEnabledObs}
+                    onManagerReadyObs={onManagerReadyObs}
+                    getCurrentManager={() => currentManager}
+                    namingSchemeManager={namingSchemeManager}
+                    stateStore={persistedPanelState}
+                />
+            ),
+        });
+
+        return {
+            dispose: () => {
+                setEnabled(false);
+                panelReg.dispose();
+                onManagerReadyObs.clear();
+                isEnabledObs.clear();
+            },
+        };
+    },
+};
+
+export default {
+    serviceDefinitions: [AnimationRetargetingServiceDefinition],
+} 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..3c978123fd3
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -0,0 +1,826 @@
+import type { FunctionComponent } from "react";
+import type { Observable } from "core/Misc/observable";
+import type { Transform } from "../../components/properties/transformProperties";
+import { makeStyles, tokens, Body1Strong } from "@fluentui/react-components";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
+import { CheckboxPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/checkboxPropertyLine";
+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 { TransformProperties } from "../../components/properties/transformProperties";
+import { Avatars, Animations } from "./data";
+import { FindAvatarFromPath, FindAnimationFromPath } from "./helperFunctions";
+import type { RetargetingSceneManager } from "./retargetingSceneManager";
+import type { NamingSchemeManager } from "./namingSchemeManager";
+import type { GizmoType } from "./avatar";
+
+/**
+ * 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.
+ */
+function buildFilteredBoneList(names: string[], animPath: string, avatarPath: string, namingSchemeManager: NamingSchemeManager): string[] {
+    const animName = FindAnimationFromPath(animPath);
+    const avatarName = FindAvatarFromPath(avatarPath);
+    const sourceScheme = Animations[animName]?.namingScheme;
+    const targetScheme = Avatars[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",
+    },
+    enableRow: {
+        display: "none", // removed: button moved to title bar headerExtra
+    },
+    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: "13px",
+        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,
+    },
+});
+
+const AvatarOptions = Object.keys(Avatars).map((name) => ({ label: name, value: Avatars[name].path }));
+const AnimationOptions = Object.keys(Animations).map((name) => ({ label: name, value: Animations[name].path }));
+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 = {
+    avatarPath: string;
+    avatarUpdateRestPose: boolean;
+    avatarRescaleAvatar: boolean;
+    avatarAnimSpeed: number;
+    avatarShowSkeleton: boolean;
+    avatarShowSkeletonLocalAxes: boolean;
+    avatarGizmoEnabled: boolean;
+    avatarGizmoType: string;
+    avatarGizmoSelectedNode: string;
+    animationPath: string;
+    animationUpdateRestPose: boolean;
+    animationSpeed: number;
+    animationShowSkeleton: boolean;
+    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 = {
+    avatarPath: Avatars["Goblin"].path,
+    avatarUpdateRestPose: true,
+    avatarRescaleAvatar: true,
+    avatarAnimSpeed: 1,
+    avatarShowSkeleton: false,
+    avatarShowSkeletonLocalAxes: false,
+    avatarGizmoEnabled: false,
+    avatarGizmoType: "Rotation",
+    avatarGizmoSelectedNode: "",
+    animationPath: Animations["Rumba Dancing"].path,
+    animationUpdateRestPose: true,
+    animationSpeed: 1,
+    animationShowSkeleton: true,
+    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>;
+    onManagerReadyObs: Observable<RetargetingSceneManager>;
+    getCurrentManager: () => RetargetingSceneManager | null;
+    namingSchemeManager: NamingSchemeManager;
+    /** Persisted across remounts (e.g. when the panel is docked elsewhere). Lives in the extension closure. */
+    stateStore: PanelStateStore;
+};
+
+export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPanelProps> = ({
+    initialIsEnabled,
+    isEnabledObs,
+    onManagerReadyObs,
+    getCurrentManager,
+    namingSchemeManager,
+    stateStore,
+}) => {
+    const classes = useStyles();
+    const managerRef = useRef<RetargetingSceneManager | null>(null);
+    const [isEnabled, setIsEnabled] = useState(initialIsEnabled);
+    const [, forceUpdate] = useState(0);
+
+    // Avatar state
+    const [avatarPath, setAvatarPath] = useState(() => stateStore.avatarPath);
+    const [avatarUpdateRestPose, setAvatarUpdateRestPose] = useState(() => stateStore.avatarUpdateRestPose);
+    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 [animationPath, setAnimationPath] = useState(() => stateStore.animationPath);
+    const [animationUpdateRestPose, setAnimationUpdateRestPose] = useState(() => stateStore.animationUpdateRestPose);
+    const [animationSpeed, setAnimationSpeed] = useState(() => stateStore.animationSpeed);
+    const [animationShowSkeleton, setAnimationShowSkeleton] = useState(() => stateStore.animationShowSkeleton);
+    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 }[]>([]);
+
+    // 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 [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({
+        avatarPath,
+        avatarUpdateRestPose,
+        avatarRescaleAvatar,
+        avatarAnimSpeed,
+        avatarShowSkeleton,
+        avatarShowSkeletonLocalAxes,
+        avatarGizmoEnabled,
+        avatarGizmoType,
+        avatarGizmoSelectedNode,
+        animationPath,
+        animationUpdateRestPose,
+        animationSpeed,
+        animationShowSkeleton,
+        animationShowSkeletonLocalAxes,
+        animationGizmoEnabled,
+        animationGizmoType,
+        animationGizmoSelectedNode,
+        fixAnimations,
+        checkHierarchy,
+        retargetAnimationKeys,
+        fixRootPosition,
+        fixGroundReference,
+        fixGroundReferenceDynamicRefNode,
+        rootNodeName,
+        groundReferenceNodeName,
+        groundReferenceVerticalAxis,
+    });
+    stateSnapshotRef.current = {
+        avatarPath,
+        avatarUpdateRestPose,
+        avatarRescaleAvatar,
+        avatarAnimSpeed,
+        avatarShowSkeleton,
+        avatarShowSkeletonLocalAxes,
+        avatarGizmoEnabled,
+        avatarGizmoType,
+        avatarGizmoSelectedNode,
+        animationPath,
+        animationUpdateRestPose,
+        animationSpeed,
+        animationShowSkeleton,
+        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);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Subscribe to isEnabled observable
+    useEffect(() => {
+        const obs = isEnabledObs.add((v) => setIsEnabled(v));
+        return () => {
+            isEnabledObs.remove(obs);
+        };
+    }, [isEnabledObs]);
+
+    // 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).
+         */
+        const setupManager = (manager: RetargetingSceneManager, triggerLoads: boolean) => {
+            managerRef.current = manager;
+
+            // 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 }[], animPath: string, avatarPath: string, currentGroundRef: string) => {
+                const filtered = buildFilteredBoneList(allNames, animPath, avatarPath, namingSchemeManager);
+                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.animationPath,
+                        s.avatarPath,
+                        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(s.animationShowSkeleton);
+                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.animationPath, s.avatarPath, 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);
+                manager.avatar!.loadAsync(s.avatarPath, s.avatarUpdateRestPose, s.avatarRescaleAvatar);
+                manager.animationSource!.loadAsync(s.animationPath, s.animationUpdateRestPose).then(() => {
+                    manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
+                });
+            } 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.animationPath,
+                        s.avatarPath,
+                        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);
+            };
+        };
+
+        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?.();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onManagerReadyObs]);
+
+    const handleLoadAvatar = useCallback((path: string, updateRestPose: boolean, rescale: boolean) => {
+        const manager = managerRef.current;
+        if (!manager?.avatar) {
+            return;
+        }
+        setIsLoading(true);
+        setIsAvatarLoaded(false);
+        setIsRetargeted(false);
+        manager.avatar.loadAsync(path, updateRestPose, rescale);
+    }, []);
+
+    const handleLoadAnimation = useCallback(
+        (path: string, updateRestPose: boolean) => {
+            const manager = managerRef.current;
+            if (!manager?.animationSource) {
+                return;
+            }
+            setIsLoading(true);
+            setIsAnimLoaded(false);
+            setIsRetargeted(false);
+            manager.animationSource.loadAsync(path, updateRestPose).then(() => {
+                manager.animationSource!.setSkeletonVisible(animationShowSkeleton);
+                manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
+            });
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [animationShowSkeleton]
+    );
+
+    const handleRetarget = useCallback(() => {
+        const manager = managerRef.current;
+        if (!manager) {
+            return;
+        }
+        setIsLoading(true);
+        manager.htmlConsole.clear();
+        manager.retarget(
+            {
+                avatarPath,
+                avatarUpdateRestPose,
+                avatarRescaleAvatar,
+                avatarAnimSpeed,
+                animationPath,
+                animationUpdateRestPose,
+                animationSpeed,
+                fixAnimations,
+                checkHierarchy,
+                retargetAnimationKeys,
+                fixRootPosition,
+                fixGroundReference,
+                fixGroundReferenceDynamicRefNode,
+                rootNodeName,
+                groundReferenceNodeName,
+                groundReferenceVerticalAxis: groundReferenceVerticalAxis as "" | "X" | "Y" | "Z",
+            },
+            namingSchemeManager
+        );
+    }, [
+        avatarPath,
+        avatarUpdateRestPose,
+        avatarRescaleAvatar,
+        avatarAnimSpeed,
+        animationPath,
+        animationUpdateRestPose,
+        animationSpeed,
+        fixAnimations,
+        checkHierarchy,
+        retargetAnimationKeys,
+        fixRootPosition,
+        fixGroundReference,
+        fixGroundReferenceDynamicRefNode,
+        rootNodeName,
+        groundReferenceNodeName,
+        groundReferenceVerticalAxis,
+    ]);
+
+    const loadingText = isLoading && !isAvatarLoaded && !isAnimLoaded ? "Loading..." : isLoading ? "Loading..." : null;
+
+    return (
+        <div className={classes.root}>
+            {!isEnabled ? (
+                <div className={classes.disabledOverlay}>Extension is disabled -- original scene is shown</div>
+            ) : (
+                <>
+                    <div className={classes.actionRow}>
+                        <ButtonLine label="Retarget" onClick={handleRetarget} disabled={!isAvatarLoaded || !isAnimLoaded || isLoading} />
+                        <ButtonLine label="Export to Playground" onClick={() => managerRef.current?.exportToPlayground()} disabled={!isRetargeted} />
+                    </div>
+                    <div className={classes.scrollContent}>
+                        {loadingText && <div style={{ padding: "4px 12px", fontSize: "12px", color: tokens.colorNeutralForeground3 }}>{loadingText}</div>}
+                        <BabylonAccordion>
+                            {/* Avatar */}
+                            <BabylonAccordionSection title="Avatar">
+                                <StringDropdownPropertyLine
+                                    label="Name"
+                                    value={avatarPath}
+                                    options={AvatarOptions}
+                                    onChange={(path) => {
+                                        setAvatarPath(path);
+                                        handleLoadAvatar(path, avatarUpdateRestPose, avatarRescaleAvatar);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Update rest pose"
+                                    value={avatarUpdateRestPose}
+                                    onChange={(v) => {
+                                        setAvatarUpdateRestPose(v);
+                                        handleLoadAvatar(avatarPath, v, avatarRescaleAvatar);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Rescale"
+                                    value={avatarRescaleAvatar}
+                                    onChange={(v) => {
+                                        setAvatarRescaleAvatar(v);
+                                        handleLoadAvatar(avatarPath, avatarUpdateRestPose, v);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Show skeleton"
+                                    value={avatarShowSkeleton}
+                                    onChange={(v) => {
+                                        setAvatarShowSkeleton(v);
+                                        managerRef.current?.avatar?.setSkeletonVisible(v);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Show skel. local axes"
+                                    value={avatarShowSkeletonLocalAxes}
+                                    disabled={!avatarShowSkeleton}
+                                    onChange={(v) => {
+                                        setAvatarShowSkeletonLocalAxes(v);
+                                        managerRef.current?.avatar?.setSkeletonLocalAxes(v);
+                                    }}
+                                />
+                                <SyncedSliderPropertyLine
+                                    label="Anim. speed"
+                                    value={avatarAnimSpeed}
+                                    min={0.01}
+                                    max={2}
+                                    step={0.05}
+                                    onChange={(v) => {
+                                        setAvatarAnimSpeed(v);
+                                        managerRef.current?.avatar?.setAnimSpeed(v);
+                                    }}
+                                />
+                                <ButtonLine label="Return to rest" onClick={() => managerRef.current?.avatar?.returnToRest()} disabled={!isAvatarLoaded} />
+                                <ButtonLine label="Play" onClick={() => managerRef.current?.avatar?.play(avatarAnimSpeed)} disabled={!isRetargeted} />
+                            </BabylonAccordionSection>
+                            {/* Avatar Gizmo */}
+                            <BabylonAccordionSection title="Avatar Gizmo">
+                                <CheckboxPropertyLine
+                                    label="Enabled"
+                                    value={avatarGizmoEnabled && !isAvatarPlaying}
+                                    disabled={isAvatarPlaying}
+                                    onChange={(v) => {
+                                        setAvatarGizmoEnabled(v);
+                                        managerRef.current?.avatar?.setGizmo(v, avatarGizmoType as GizmoType);
+                                    }}
+                                />
+                                <StringDropdownPropertyLine
+                                    label="Type"
+                                    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">
+                                <StringDropdownPropertyLine
+                                    label="Name"
+                                    value={animationPath}
+                                    options={AnimationOptions}
+                                    onChange={(path) => {
+                                        setAnimationPath(path);
+                                        handleLoadAnimation(path, animationUpdateRestPose);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Update rest pose"
+                                    value={animationUpdateRestPose}
+                                    onChange={(v) => {
+                                        setAnimationUpdateRestPose(v);
+                                        handleLoadAnimation(animationPath, v);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Show skeleton"
+                                    value={animationShowSkeleton}
+                                    onChange={(v) => {
+                                        setAnimationShowSkeleton(v);
+                                        managerRef.current?.animationSource?.setSkeletonVisible(v);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Show skel. local axes"
+                                    value={animationShowSkeletonLocalAxes}
+                                    disabled={!animationShowSkeleton}
+                                    onChange={(v) => {
+                                        setAnimationShowSkeletonLocalAxes(v);
+                                        managerRef.current?.animationSource?.setSkeletonLocalAxes(v);
+                                    }}
+                                />
+                                <SyncedSliderPropertyLine
+                                    label="Anim. speed"
+                                    value={animationSpeed}
+                                    min={0.01}
+                                    max={2}
+                                    step={0.05}
+                                    onChange={(v) => {
+                                        setAnimationSpeed(v);
+                                        managerRef.current?.animationSource?.play(v);
+                                    }}
+                                />
+                                <ButtonLine label="Return to rest" onClick={() => managerRef.current?.animationSource?.returnToRest()} disabled={!isAnimLoaded} />
+                                <ButtonLine label="Play" onClick={() => managerRef.current?.animationSource?.play(animationSpeed)} disabled={!isAnimLoaded} />
+                            </BabylonAccordionSection>
+                            {/* Animation Gizmo */}
+                            <BabylonAccordionSection title="Animation Gizmo">
+                                <CheckboxPropertyLine
+                                    label="Enabled"
+                                    value={animationGizmoEnabled && !isAnimPlaying}
+                                    disabled={isAnimPlaying}
+                                    onChange={(v) => {
+                                        setAnimationGizmoEnabled(v);
+                                        managerRef.current?.animationSource?.setGizmo(v, animationGizmoType as GizmoType);
+                                    }}
+                                />
+                                <StringDropdownPropertyLine
+                                    label="Type"
+                                    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">
+                                <CheckboxPropertyLine label="Fix animations" value={fixAnimations} onChange={setFixAnimations} />
+                                <CheckboxPropertyLine label="Check hierarchy" value={checkHierarchy} onChange={setCheckHierarchy} />
+                                <CheckboxPropertyLine label="Retarget keys" value={retargetAnimationKeys} onChange={setRetargetAnimationKeys} />
+                                <CheckboxPropertyLine label="Fix root position" value={fixRootPosition} onChange={setFixRootPosition} />
+                                <CheckboxPropertyLine label="Fix ground reference" value={fixGroundReference} onChange={setFixGroundReference} />
+                                <div style={{ paddingLeft: "16px" }}>
+                                    <CheckboxPropertyLine
+                                        label="Dynamic ref. node"
+                                        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>
+                                <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 style={{ paddingLeft: "16px" }}>
+                                    <StringDropdownPropertyLine
+                                        label="Vertical axis"
+                                        value={groundReferenceVerticalAxis}
+                                        options={VerticalAxisOptions}
+                                        disabled={!fixRootPosition && !fixGroundReference}
+                                        onChange={setGroundReferenceVerticalAxis}
+                                    />
+                                </div>
+                            </BabylonAccordionSection>
+                        </BabylonAccordion>
+                    </div>
+                </>
+            )}
+        </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..ee913e4a4a0
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
@@ -0,0 +1,77 @@
+import type { FunctionComponent } from "react";
+
+import { makeStyles } from "@fluentui/react-components";
+import { useEffect, useRef } from "react";
+
+import { RetargetingSceneManager } from "./retargetingSceneManager";
+
+const useStyles = makeStyles({
+    container: {
+        position: "absolute",
+        inset: "0",
+        overflow: "hidden",
+        backgroundColor: "#1a1a1a",
+    },
+    canvas: {
+        width: "100%",
+        height: "100%",
+        display: "block",
+        outline: "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: "13px",
+        fontFamily: "sans-serif",
+    },
+});
+
+type AnimationRetargetingViewportProps = {
+    onManagerReady: (manager: RetargetingSceneManager) => void;
+};
+
+export const AnimationRetargetingViewport: FunctionComponent<AnimationRetargetingViewportProps> = ({ onManagerReady }) => {
+    const classes = useStyles();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const managerRef = useRef<RetargetingSceneManager | null>(null);
+
+    useEffect(() => {
+        if (!canvasRef.current || !containerRef.current) {
+            return;
+        }
+
+        const manager = new RetargetingSceneManager();
+        managerRef.current = manager;
+        manager.initialize(canvasRef.current);
+        manager.htmlConsole.attachToContainer(containerRef.current);
+        onManagerReady(manager);
+
+        const resizeObserver = new ResizeObserver(() => manager.resize());
+        resizeObserver.observe(containerRef.current);
+
+        return () => {
+            resizeObserver.disconnect();
+            manager.dispose();
+            managerRef.current = null;
+        };
+        // onManagerReady is intentionally not in deps - it's a stable callback from the service
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <div ref={containerRef} className={classes.container}>
+            <canvas ref={canvasRef} className={classes.canvas} />
+            <div className={classes.labels}>
+                <span>◀ Avatar</span>
+                <span>Animation ▶</span>
+            </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..4b0b62351bb
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -0,0 +1,473 @@
+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 { Color3 } from "core/Maths/math.color";
+import type { Vector3 } from "core/Maths/math.vector";
+
+import { Matrix, TmpVectors } 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 { Avatars } from "./data";
+import { FindAvatarFromPath, DistancePointToLine } from "./helperFunctions";
+
+export type GizmoType = "Position" | "Rotation" | "Scale";
+
+const ShadowLayerMask = 0x10000000;
+
+type BoneTransformations = Map<Bone, { position: Vector3; scaling: Vector3; quaternion: import("core/Maths/math.vector").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();
+
+    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;
+    }
+    /** 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, updateRestPose: boolean, rescaleAvatar: boolean): Promise<void> {
+        this._cleanScene();
+        await this._loadFileAsync(path, updateRestPose, rescaleAvatar);
+    }
+
+    /** Returns the list of all bone names in the avatar skeleton, in hierarchy order. */
+    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. */
+    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) {
+                if (this._inRestPose) {
+                    skeleton.setCurrentPoseAsRest();
+                }
+                skeleton.returnToRest();
+                skeleton.prepare(true);
+            }
+        }
+        this._inRestPose = true;
+        if (deleteAnimation) {
+            this._animationGroup?.dispose();
+            this._animationGroup = null;
+        }
+        this.onPlayingObservable.notifyObservers(false);
+    }
+
+    public prepareRetargeting(): void {
+        this.returnToRest(true);
+        this._retargetedBoneTransformations.clear();
+        this._saveBoneTransformations(this._retargetedBoneTransformations);
+    }
+
+    public buildExportData(avatarPath: string, avatarUpdateRestPose: boolean, epsilon: number): import("./data").RestPoseDataUpdate {
+        const boneTransformations: import("./data").RestPoseDataUpdate = [];
+
+        if (!avatarUpdateRestPose) {
+            return boneTransformations;
+        }
+
+        const avatarName = FindAvatarFromPath(avatarPath);
+        const restPoseUpdate = Avatars[avatarName]?.restPoseUpdate;
+        if (restPoseUpdate) {
+            for (const dataBlock of restPoseUpdate) {
+                boneTransformations.push(dataBlock);
+            }
+        }
+
+        for (const [bone, newT] of this._retargetedBoneTransformations) {
+            const initT = this._initialBoneTransformations.get(bone);
+            if (!initT) {
+                continue;
+            }
+            const name = bone.name.replace(/"/g, '\\"');
+            const entry = boneTransformations.find((v) => v.name === name);
+            let key = entry?.data;
+            if (!initT.scaling.equalsWithEpsilon(newT.scaling)) {
+                if (!key) {
+                    key = {};
+                    boneTransformations.push({ name, data: key });
+                }
+                key.scaling = newT.scaling.asArray();
+            }
+            if (!initT.quaternion.equalsWithEpsilon(newT.quaternion, epsilon)) {
+                if (!key) {
+                    key = {};
+                    boneTransformations.push({ name, data: key });
+                }
+                key.quaternion = newT.quaternion.asArray();
+            }
+            if (!initT.position.equalsWithEpsilon(newT.position, epsilon)) {
+                if (!key) {
+                    key = {};
+                    boneTransformations.push({ name, data: key });
+                }
+                key.position = newT.position.asArray();
+            }
+        }
+
+        return boneTransformations;
+    }
+
+    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();
+    }
+
+    private async _loadFileAsync(path: string, updateRestPose: boolean, rescaleAvatar: boolean): Promise<void> {
+        const result = await ImportMeshAsync(path, this._scene);
+        const avatarRootNode = result.meshes[0];
+        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;
+            avatarRootNode.scaling.setAll(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 (updateRestPose) {
+            this._updateRestPose(path);
+        }
+
+        this._initialBoneTransformations.clear();
+        this._saveBoneTransformations(this._initialBoneTransformations);
+
+        const [avatarSkeleton] = this._animatorAvatar.skeletons;
+        const skeletonViewer = new SkeletonViewer(avatarSkeleton, (avatarMesh ?? result.meshes[1]) 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 {
+        this._animatorAvatar?.dispose();
+        this._animatorAvatar = null;
+        this._skeletonViewer?.dispose();
+        this._skeletonViewer = null;
+        this._gizmoSelectedNode?.dispose();
+        this._gizmoSelectedNode = null;
+        this._selectedBoneTransform = null;
+        this._scene.getAnimationGroupByName("avatar")?.dispose();
+    }
+
+    private _updateRestPose(path: string): void {
+        const avatarName = FindAvatarFromPath(path);
+        const restPoseUpdate = Avatars[avatarName]?.restPoseUpdate;
+        if (!restPoseUpdate || !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 = TmpVectors.Vector3[0].fromArray(dataBlock.data.position);
+                }
+                if (dataBlock.data.scaling) {
+                    bone.scaling = TmpVectors.Vector3[0].fromArray(dataBlock.data.scaling);
+                }
+                if (dataBlock.data.quaternion) {
+                    bone.rotationQuaternion = TmpVectors.Quaternion[0].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/boneDropdown.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
new file mode 100644
index 00000000000..b4bc12f0838
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
@@ -0,0 +1,71 @@
+import { Dropdown, makeStyles, Option, useId } from "@fluentui/react-components";
+import type { FunctionComponent } from "react";
+import { 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",
+    },
+});
+
+/**
+ * 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.
+ */
+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={<span className={classes.buttonText}>{optionLabel}</span>}
+            positioning={{ matchTargetSize: undefined, position: "below", align: "start" }}
+            listbox={{ style: { overflowX: "hidden", minWidth: "max-content" } }}
+            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/data.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/data.ts
new file mode 100644
index 00000000000..5a97d29830b
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/data.ts
@@ -0,0 +1,182 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export type NamingScheme = string;
+
+export type RestPoseDataUpdate = Array<{ name: string; data: { position?: number[]; scaling?: number[]; quaternion?: number[] } }>;
+
+export const Avatars: {
+    [name: string]: {
+        path: string;
+        namingScheme: NamingScheme;
+        restPoseUpdate?: RestPoseDataUpdate;
+    };
+} = {
+    Goblin: {
+        path: "https://assets.babylonjs.com/mixamo/Characters/goblin_d_shareyko.glb",
+        namingScheme: "Mixamo",
+    },
+    "Big Vegas": {
+        path: "https://assets.babylonjs.com/mixamo/Characters/Big Vegas.glb",
+        namingScheme: "Mixamo",
+    },
+    "White Clown": {
+        path: "https://assets.babylonjs.com/mixamo/Characters/Whiteclown N Hallin.glb",
+        namingScheme: "Mixamo",
+    },
+    Mousey: {
+        path: "https://assets.babylonjs.com/mixamo/Characters/Ch14_nonPBR.glb",
+        namingScheme: "Mixamo",
+    },
+    "Ready Player Me": {
+        path: "https://assets.babylonjs.com/mixamo/Characters/rpm.glb",
+        namingScheme: "Mixamo No Namespace",
+        restPoseUpdate: [
+            { name: "Neck", data: { quaternion: [0.034619355720038936, 4.672305324509115e-8, 1.2327723869642098e-7, 0.9994005701445136] } },
+            { name: "Head", data: { quaternion: [-0.01219221211246064, -3.615570438034387e-7, -3.367146232302434e-7, 0.9999256702455088] } },
+            { name: "LeftShoulder", data: { quaternion: [-0.4888535487255111, -0.5055423403794744, 0.5302840821460562, -0.4735482630931305] } },
+            { name: "LeftArm", data: { quaternion: [0.008704805528198944, 0.06488486926052185, 0.02791158863460149, 0.9974643477902022] } },
+            { name: "LeftForeArm", data: { quaternion: [-0.05352775158188574, 0.0119205769810382, 0.003214396597565389, 0.9984900280144573] } },
+            { name: "RightShoulder", data: { quaternion: [0.4670848252944479, -0.5257200898704908, 0.549788596763065, 0.45075786114169936] } },
+            { name: "RightArm", data: { quaternion: [0.007797015816145728, -0.0649425313836908, -0.06250639119864947, 0.9958988971488447] } },
+            { name: "RightForeArm", data: { quaternion: [-0.053545557969461616, -0.01182403014636169, -0.0013402246314159288, 0.9984945051130866] } },
+            { name: "LeftUpLeg", data: { quaternion: [-0.0016660471658626209, 0.00970464150074662, 0.9999236137302893, -0.007470431708105472] } },
+            { name: "RightUpLeg", data: { quaternion: [0.0017072740086764113, 0.009685813129036259, 0.9999064759389724, 0.009503174401248248] } },
+        ],
+    },
+    Dude: {
+        path: "https://assets.babylonjs.com/meshes/Dude/dude.babylon",
+        namingScheme: "Dude",
+        restPoseUpdate: [
+            { name: "bone0", data: { quaternion: [-0.4956382108411332, -0.495637539287752, -0.5043240625640419, 0.5043247225089963] } },
+            {
+                name: "bone7",
+                data: {
+                    quaternion: [6.118323346972899e-7, 2.566696352359036e-7, -0.06278098256710099, 0.9980273310171722],
+                    position: [3.953911542892456, 0.00007303011079784483, -0.000011959440598729998],
+                },
+            },
+            {
+                name: "bone13",
+                data: {
+                    quaternion: [-0.017243666667216433, -0.09375516674288878, 0.011190084226846867, 0.9953830427505721],
+                    position: [6.843832969665527, 0.0000010450148693053052, -0.0000037226973290671594],
+                },
+            },
+            {
+                name: "bone14",
+                data: {
+                    quaternion: [-2.2745848490743344e-7, -7.993348609217729e-7, -0.04529758609725934, 0.9989735431461285],
+                    position: [13.142180442810059, 0.00011519173858687282, -0.0005142003647051752],
+                },
+            },
+            {
+                name: "bone32",
+                data: {
+                    quaternion: [0.014759507524885264, 0.05232950511551538, 0.02534179747048678, 0.9981991601312742],
+                    position: [6.843867778778076, 0.000034889206290245056, -0.000012921306733915117],
+                },
+            },
+            {
+                name: "bone33",
+                data: {
+                    quaternion: [-4.979581737795843e-7, -6.461808455694249e-7, -0.021828819836246977, 0.9997617243966206],
+                    position: [13.14214038848877, -0.000036571920645656064, 0.00035435488098300993],
+                },
+            },
+            {
+                name: "bone50",
+                data: {
+                    quaternion: [-0.024342876199033407, 0.9955010539441587, 0.08997531640320489, -0.017015403996628355],
+                    position: [-3.7692983150482178, -0.3552809953689575, 3.4951446056365967],
+                },
+            },
+            {
+                name: "bone51",
+                data: {
+                    quaternion: [-1.7234181971844284e-7, -3.178950951473535e-7, -0.04279816521194403, 0.9990837399656395],
+                    position: [18.257123947143555, 0.000011578077646845486, 1.4664297509625612e-7],
+                },
+            },
+            {
+                name: "bone54",
+                data: {
+                    quaternion: [0.013458383790773848, 0.9953978033355617, -0.08915652455748883, 0.03245303966196451],
+                    position: [-3.7693002223968506, -0.35523295402526855, -3.4951460361480713],
+                },
+            },
+            {
+                name: "bone55",
+                data: {
+                    quaternion: [2.8163977536254093e-8, -2.0904395193615398e-7, -0.09351755875877536, 0.995617629309489],
+                    position: [18.25729751586914, 0.000010011796803155448, -0.00000868310235091485],
+                },
+            },
+        ],
+    },
+};
+
+export const Animations: {
+    [name: string]: {
+        path: string;
+        namingScheme: NamingScheme;
+        restPoseUpdate?: RestPoseDataUpdate;
+    };
+} = {
+    "Rumba Dancing": {
+        path: "https://assets.babylonjs.com/mixamo/Animations/Rumba Dancing.glb",
+        namingScheme: "Mixamo",
+    },
+    "Hip Hop Dancing": {
+        path: "https://assets.babylonjs.com/mixamo/Animations/Hip Hop Dancing.glb",
+        namingScheme: "Mixamo",
+    },
+    "Sitting Clap": {
+        path: "https://assets.babylonjs.com/mixamo/Animations/Sitting Clap.glb",
+        namingScheme: "Mixamo",
+    },
+    Walking: {
+        path: "https://assets.babylonjs.com/mixamo/Animations/Walking.glb",
+        namingScheme: "Mixamo",
+    },
+    "Catwalk Walking": {
+        path: "https://assets.babylonjs.com/mixamo/Animations/Catwalk Walking.glb",
+        namingScheme: "Mixamo",
+    },
+    Praying: {
+        path: "https://assets.babylonjs.com/mixamo/Animations/Praying.glb",
+        namingScheme: "Mixamo",
+    },
+    "Mousey walking": {
+        path: "https://assets.babylonjs.com/mixamo/Animations/Mousey_walking.glb",
+        namingScheme: "Mixamo",
+    },
+    "Hip Hop": {
+        path: "https://assets.babylonjs.com/mixamo/Animations/hiphop.glb",
+        namingScheme: "Mixamo No Namespace",
+        restPoseUpdate: [
+            {
+                name: "Hiphop",
+                data: {
+                    scaling: [0.009999999776482582, 0.009999998410327421, 0.009999998410327421],
+                    quaternion: [0.030719497659612304, 0, 0, 0.9995280448609439],
+                    position: [0, 0.02035129815340042, 1.1486760377883911],
+                },
+            },
+            {
+                name: "Hips",
+                data: {
+                    scaling: [0.9999986007074148, 0.9999962094110727, 0.999997142588067],
+                    quaternion: [0.052553157917843873, -0.01805944576098157, 0.004367241634189689, 0.9984452660071943],
+                    position: [13.188420295715332, 99.95006561279297, -98.15790557861328],
+                },
+            },
+            { name: "RightUpLeg", data: { quaternion: [-0.08596637511297929, 0.014617736988054434, -0.013545213999786802, 0.9960987055974838] } },
+            { name: "LeftUpLeg", data: { quaternion: [-0.07820982526524597, 0.11147862411271901, 0.030835694345175777, 0.990204473607429] } },
+            { name: "Spine1", data: { quaternion: [0.04900287931205046, 0.027042963899555204, -0.024301365217254737, 0.9981366838120086] } },
+            { name: "LeftShoulder", data: { quaternion: [-0.04931914589884397, -0.12596940975740217, 0.06417621343333987, 0.988726829454192] } },
+            { name: "LeftArm", data: { quaternion: [0.6732927881818989, 0.04568916112857387, -0.12122590687031896, 0.7279379104299217] } },
+            { name: "RightShoulder", data: { quaternion: [-0.0012312282728442689, 0.048555807875653556, -0.03611679100293636, 0.9981665166725106] } },
+            { name: "RightArm", data: { quaternion: [0.60239787641809, -0.02177013258724727, 0.07259245132646759, 0.7945899545202696] } },
+            { name: "Neck", data: { quaternion: [-0.1367366086184092, -0.008306950825413764, 0.009321711794875032, 0.9905287477507827] } },
+        ],
+    },
+};
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..74146502f7a
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
@@ -0,0 +1,225 @@
+import { Avatars, Animations } from "./data";
+
+let CurrentSnippetToken = "";
+
+export function FindAvatarFromPath(path: string): string {
+    for (const name in Avatars) {
+        if (Avatars[name].path === path) {
+            return name;
+        }
+    }
+    return "";
+}
+
+export function FindAnimationFromPath(path: string): string {
+    for (const name in Animations) {
+        if (Animations[name].path === path) {
+            return name;
+        }
+    }
+    return "";
+}
+
+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: {},
+        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: "",
+    });
+}
+
+export function SaveSnippet(code: string) {
+    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;
+                }
+                window.open(newUrl, "_blank");
+            } else {
+                console.error("Unable to save your code. It may be too long.");
+            }
+        }
+    };
+
+    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[] } }>;
+
+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 BABYLON.ImportMeshAsync(avatarPath, scene);
+
+        const avatarRootNode = result.meshes[0];
+        avatarRootNode.name = "avatar";
+
+        const numAnimations = scene.animationGroups.length;
+
+        // Load the animation
+        await BABYLON.AppendSceneAsync(animationPath, scene);
+
+        const animRootNode = scene.getMeshByName("__root__");
+        animRootNode.name = "reference";
+
+        const sourceAnimationGroup = scene.animationGroups[numAnimations];
+
+        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 };
+`;
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..684d41f9232
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
@@ -0,0 +1,84 @@
+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) => {
+            // 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). */
+    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..d534ad5addb
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
@@ -0,0 +1,557 @@
+const StorageKey = "BabylonInspector_NamingSchemeManager";
+
+/**
+ * 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 },
+];
+
+// prettier-ignore
+// Each entry carries the Mixamo No Namespace name, the Dude bone name, and the depth of the Dude bone.
+// An empty mixamoNoNs string means no counterpart exists for that Dude bone.
+const DudeRemapToMixamo: Array<{ mixamoNoNs: string; dude: string; depth: number }> = [
+    { mixamoNoNs: "Hips", dude: "bone0", depth: 0 },
+    { mixamoNoNs: "", dude: "bone1", depth: 0 },
+    { mixamoNoNs: "Spine", dude: "bone2", depth: 1 },
+    { mixamoNoNs: "Spine1", dude: "bone3", depth: 2 },
+    { mixamoNoNs: "Spine2", dude: "bone4", depth: 3 },
+    { mixamoNoNs: "", dude: "bone5", depth: 3 },
+    { mixamoNoNs: "", dude: "bone6", depth: 3 },
+    { mixamoNoNs: "Neck", dude: "bone7", depth: 4 },
+    { mixamoNoNs: "", dude: "bone8", depth: 4 },
+    { mixamoNoNs: "", dude: "bone9", depth: 4 },
+    { mixamoNoNs: "RightEye", dude: "bone10", depth: 5 },
+    { mixamoNoNs: "LeftEye", dude: "bone11", depth: 5 },
+    { mixamoNoNs: "RightShoulder", dude: "bone12", depth: 4 },
+    { mixamoNoNs: "RightArm", dude: "bone13", depth: 5 },
+    { mixamoNoNs: "RightForeArm", dude: "bone14", depth: 6 },
+    { mixamoNoNs: "RightHand", dude: "bone15", depth: 7 },
+    { mixamoNoNs: "RightHandThumb1", dude: "bone16", depth: 8 },
+    { mixamoNoNs: "RightHandThumb2", dude: "bone17", depth: 9 },
+    { mixamoNoNs: "RightHandThumb3", dude: "bone18", depth: 10 },
+    { mixamoNoNs: "RightHandIndex1", dude: "bone19", depth: 8 },
+    { mixamoNoNs: "RightHandIndex2", dude: "bone20", depth: 9 },
+    { mixamoNoNs: "RightHandIndex3", dude: "bone21", depth: 10 },
+    { mixamoNoNs: "RightHandMiddle1", dude: "bone22", depth: 8 },
+    { mixamoNoNs: "RightHandMiddle2", dude: "bone23", depth: 9 },
+    { mixamoNoNs: "RightHandMiddle3", dude: "bone24", depth: 10 },
+    { mixamoNoNs: "RightHandRing1", dude: "bone25", depth: 8 },
+    { mixamoNoNs: "RightHandRing2", dude: "bone26", depth: 9 },
+    { mixamoNoNs: "RightHandRing3", dude: "bone27", depth: 10 },
+    { mixamoNoNs: "RightHandPinky1", dude: "bone28", depth: 8 },
+    { mixamoNoNs: "RightHandPinky2", dude: "bone29", depth: 9 },
+    { mixamoNoNs: "RightHandPinky3", dude: "bone30", depth: 10 },
+    { mixamoNoNs: "LeftShoulder", dude: "bone31", depth: 4 },
+    { mixamoNoNs: "LeftArm", dude: "bone32", depth: 5 },
+    { mixamoNoNs: "LeftForeArm", dude: "bone33", depth: 6 },
+    { mixamoNoNs: "LeftHand", dude: "bone34", depth: 7 },
+    { mixamoNoNs: "LeftHandThumb1", dude: "bone35", depth: 8 },
+    { mixamoNoNs: "LeftHandThumb2", dude: "bone36", depth: 9 },
+    { mixamoNoNs: "LeftHandThumb3", dude: "bone37", depth: 10 },
+    { mixamoNoNs: "LeftHandIndex1", dude: "bone38", depth: 8 },
+    { mixamoNoNs: "LeftHandIndex2", dude: "bone39", depth: 9 },
+    { mixamoNoNs: "LeftHandIndex3", dude: "bone40", depth: 10 },
+    { mixamoNoNs: "LeftHandMiddle1", dude: "bone41", depth: 8 },
+    { mixamoNoNs: "LeftHandMiddle2", dude: "bone42", depth: 9 },
+    { mixamoNoNs: "LeftHandMiddle3", dude: "bone43", depth: 10 },
+    { mixamoNoNs: "LeftHandRing1", dude: "bone44", depth: 8 },
+    { mixamoNoNs: "LeftHandRing2", dude: "bone45", depth: 9 },
+    { mixamoNoNs: "LeftHandRing3", dude: "bone46", depth: 10 },
+    { mixamoNoNs: "LeftHandPinky1", dude: "bone47", depth: 8 },
+    { mixamoNoNs: "LeftHandPinky2", dude: "bone48", depth: 9 },
+    { mixamoNoNs: "LeftHandPinky3", dude: "bone49", depth: 10 },
+    { mixamoNoNs: "RightUpLeg", dude: "bone50", depth: 1 },
+    { mixamoNoNs: "RightLeg", dude: "bone51", depth: 2 },
+    { mixamoNoNs: "RightFoot", dude: "bone52", depth: 3 },
+    { mixamoNoNs: "RightToeBase", dude: "bone53", depth: 4 },
+    { mixamoNoNs: "LeftUpLeg", dude: "bone54", depth: 1 },
+    { mixamoNoNs: "LeftLeg", dude: "bone55", depth: 2 },
+    { mixamoNoNs: "LeftFoot", dude: "bone56", depth: 3 },
+    { mixamoNoNs: "LeftToeBase", dude: "bone57", depth: 4 },
+];
+
+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() {
+        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.
+     */
+    public getNamingScheme(name: string): BoneEntry[] | undefined {
+        const scheme = this._schemes.get(name);
+        return scheme ? [...scheme] : undefined;
+    }
+
+    /**
+     * Returns the names of all registered naming schemes.
+     */
+    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.
+     */
+    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, Dude).
+     * 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 (!this._schemes.has("Dude")) {
+            this._schemes.set(
+                "Dude",
+                DudeRemapToMixamo.map((e) => ({ name: e.dude, depth: e.depth }))
+            );
+            changed = true;
+        }
+        if (changed) {
+            this._saveToStorage();
+        }
+        return changed;
+    }
+
+    /**
+     * Recreates any missing default remappings (Mixamo ↔ Mixamo No Namespace, Dude ↔ Mixamo No Namespace,
+     * Dude ↔ Mixamo). 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 all three 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;
+        }
+        if (!this._schemes.has("Dude")) {
+            this._schemes.set(
+                "Dude",
+                DudeRemapToMixamo.map((e) => ({ name: e.dude, 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;
+        }
+
+        // Dude → Mixamo No Namespace
+        if (!this._remappings.some((r) => this._sameSchemes(r, "Dude", "Mixamo No Namespace"))) {
+            const map = new Map<string, string>();
+            for (const entry of DudeRemapToMixamo) {
+                map.set(entry.dude, entry.mixamoNoNs);
+            }
+            this._remappings.push({ fromScheme: "Dude", toScheme: "Mixamo No Namespace", map });
+            changed = true;
+        }
+
+        // Dude → Mixamo
+        if (!this._remappings.some((r) => this._sameSchemes(r, "Dude", "Mixamo"))) {
+            const map = new Map<string, string>();
+            for (const entry of DudeRemapToMixamo) {
+                map.set(entry.dude, entry.mixamoNoNs !== "" ? "mixamorig:" + entry.mixamoNoNs : "");
+            }
+            this._remappings.push({ fromScheme: "Dude", toScheme: "Mixamo", map });
+            changed = true;
+        }
+
+        if (changed) {
+            this._saveToStorage();
+        }
+        return changed;
+    }
+
+    /**
+     * Removes a naming scheme and all remappings that reference it.
+     * @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.
+     *
+     * @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.
+     *
+     * @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). */
+    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. */
+    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;
+    }
+
+    /**
+     * Removes the remapping between the two given schemes (regardless of the direction it was stored in).
+     * @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 {
+            localStorage.setItem(StorageKey, JSON.stringify(data));
+        } catch {
+            // Storage may be unavailable (e.g. private browsing quota exceeded).
+        }
+    }
+
+    private _loadFromStorage(): void {
+        try {
+            const raw = localStorage.getItem(StorageKey);
+            if (!raw) {
+                this._createDefaultSchemes();
+                return;
+            }
+            const data: StoredData = JSON.parse(raw);
+            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 }))
+        );
+        this._schemes.set(
+            "Dude",
+            DudeRemapToMixamo.map((e) => ({ name: e.dude, 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 });
+
+        // Dude → Mixamo No Namespace remapping.
+        const dudeToNoNsMap = new Map<string, string>();
+        for (const entry of DudeRemapToMixamo) {
+            dudeToNoNsMap.set(entry.dude, entry.mixamoNoNs);
+        }
+        this._remappings.push({ fromScheme: "Dude", toScheme: "Mixamo No Namespace", map: dudeToNoNsMap });
+
+        // Dude → Mixamo (full namespace) remapping.
+        const dudeToMixamoMap = new Map<string, string>();
+        for (const entry of DudeRemapToMixamo) {
+            dudeToMixamoMap.set(entry.dude, entry.mixamoNoNs !== "" ? "mixamorig:" + entry.mixamoNoNs : "");
+        }
+        this._remappings.push({ fromScheme: "Dude", toScheme: "Mixamo", map: dudeToMixamoMap });
+
+        this._saveToStorage();
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManagerDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManagerDialog.tsx
new file mode 100644
index 00000000000..d369a01d246
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManagerDialog.tsx
@@ -0,0 +1,867 @@
+import type { FunctionComponent } from "react";
+import type { NamingSchemeManager, BoneEntry } from "./namingSchemeManager";
+
+import { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import {
+    Dialog,
+    DialogBody,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    DialogSurface,
+    Button,
+    Tab,
+    TabList,
+    Input,
+    Select,
+    Label,
+    makeStyles,
+    mergeClasses,
+    tokens,
+    Body1Strong,
+    Caption1,
+} from "@fluentui/react-components";
+import { Add20Regular, Delete20Regular, Edit20Regular, ArrowCounterclockwise20Regular, ArrowBidirectionalUpDown20Regular, Dismiss20Regular } from "@fluentui/react-icons";
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const useStyles = makeStyles({
+    surface: {
+        width: "820px",
+        minWidth: "400px",
+        maxWidth: "95vw",
+        height: "660px",
+        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,
+    },
+    listArea: {
+        overflowY: "auto",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        display: "flex",
+        flexDirection: "column",
+    },
+    listRow: {
+        display: "flex",
+        alignItems: "center",
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+        gap: tokens.spacingHorizontalXS,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        ":last-child": { borderBottom: "none" },
+    },
+    listRowName: {
+        flex: 1,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    listRowMeta: {
+        color: tokens.colorNeutralForeground3,
+        fontSize: "12px",
+        flexShrink: 0,
+        marginRight: tokens.spacingHorizontalXS,
+    },
+    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,
+    },
+    mappingTable: {
+        flex: 1,
+        overflowY: "auto",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+    },
+    mappingRow: {
+        display: "flex",
+        alignItems: "center",
+        padding: `2px ${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: "12px",
+    },
+    mappingSelect: {
+        flex: 1,
+        fontSize: "12px",
+        padding: "2px 4px",
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusSmall,
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+        cursor: "pointer",
+    },
+    errorText: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: "12px",
+        flexShrink: 0,
+    },
+    actionRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalS,
+        justifyContent: "flex-end",
+        flexShrink: 0,
+    },
+    emptyMsg: {
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+        color: tokens.colorNeutralForeground3,
+        fontSize: "12px",
+    },
+    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",
+        },
+    },
+});
+
+// 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;
+};
+
+// ─── Schemes Panel ────────────────────────────────────────────────────────────
+
+const SchemesPanel: FunctionComponent<{
+    manager: NamingSchemeManager;
+    onMutate: () => void;
+    onEditingChange: (editing: boolean) => void;
+}> = ({ manager, 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 setEditingWithNotify = useCallback(
+        (value: SchemeEdit | null) => {
+            setEditing(value);
+            onEditingChange(value !== null);
+        },
+        [onEditingChange]
+    );
+
+    const schemeNames = manager.getAllSchemeNames();
+
+    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) => {
+        setConfirmDelete(name);
+    }, []);
+
+    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]);
+
+    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" onClick={() => setConfirmDelete(null)}>
+                                Cancel
+                            </Button>
+                            <Button appearance="primary" onClick={handleConfirmDelete}>
+                                Delete
+                            </Button>
+                        </DialogActions>
+                    </DialogBody>
+                </DialogSurface>
+            </Dialog>
+
+            <div className={classes.listHeader}>
+                <div className={classes.listButtons}>
+                    <Button size="small" icon={<ArrowCounterclockwise20Regular />} onClick={handleRecreateDefaults} disabled={!!editing}>
+                        Recreate Defaults
+                    </Button>
+                    <Button size="small" icon={<Add20Regular />} onClick={startAdd} disabled={!!editing}>
+                        Add
+                    </Button>
+                </div>
+            </div>
+            <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "160px" : undefined }}>
+                {schemeNames.length === 0 && <span className={classes.emptyMsg}>No naming schemes defined.</span>}
+                {schemeNames.map((name) => {
+                    const count = manager.getNamingScheme(name)?.length ?? 0;
+                    return (
+                        <div key={name} className={classes.listRow}>
+                            <span className={classes.listRowName}>{name}</span>
+                            <span className={classes.listRowMeta}>
+                                {count} bone{count !== 1 ? "s" : ""}
+                            </span>
+                            <Button size="small" appearance="transparent" icon={<Edit20Regular />} title="Edit" disabled={!!editing} onClick={() => startEdit(name)} />
+                            <Button size="small" appearance="transparent" icon={<Delete20Regular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(name)} />
+                        </div>
+                    );
+                })}
+            </div>
+            {editing && (
+                <div className={classes.editSectionFlex}>
+                    <Body1Strong>{editing.originalName ? `Editing "${editing.originalName}"` : "New Scheme"}</Body1Strong>
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Name</Label>
+                        <Input className={classes.formControl} value={editing.name} onChange={(_, d) => setEditing({ ...editing, name: d.value })} />
+                    </div>
+                    <div style={{ display: "flex", flex: 1, minHeight: 0, gap: tokens.spacingHorizontalS }}>
+                        <Label className={classes.formLabel} style={{ paddingTop: "6px", flexShrink: 0 }}>
+                            Bone names
+                        </Label>
+                        <textarea
+                            className={classes.boneTextarea}
+                            value={editing.namesText}
+                            placeholder="One bone name per line"
+                            onChange={(e) => setEditing({ ...editing, namesText: e.target.value })}
+                        />
+                    </div>
+                    {error && <span className={classes.errorText}>{error}</span>}
+                    <div className={classes.actionRow}>
+                        <Button size="small" appearance="secondary" onClick={handleCancel}>
+                            Cancel
+                        </Button>
+                        <Button size="small" appearance="primary" onClick={handleSave}>
+                            Save
+                        </Button>
+                    </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();
+    const allRemappings = manager.getAllRemappings();
+
+    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) ?? []) : []),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [editing?.fromScheme, manager]
+    );
+
+    const toSchemeEntries = useMemo(
+        () => (editing ? (manager.getNamingScheme(editing.toScheme) ?? []) : []),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [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" onClick={() => setConfirmDelete(null)}>
+                                Cancel
+                            </Button>
+                            <Button appearance="primary" onClick={handleConfirmDelete}>
+                                Delete
+                            </Button>
+                        </DialogActions>
+                    </DialogBody>
+                </DialogSurface>
+            </Dialog>
+
+            <div className={classes.listHeader}>
+                <div className={classes.listButtons}>
+                    <Button size="small" icon={<ArrowCounterclockwise20Regular />} onClick={handleRecreateDefaults} disabled={!!editing}>
+                        Recreate Defaults
+                    </Button>
+                    <Button size="small" icon={<Add20Regular />} onClick={startAdd} disabled={!!editing || schemeNames.length < 2}>
+                        Add
+                    </Button>
+                </div>
+            </div>
+            <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
+                {allRemappings.length === 0 && <span className={classes.emptyMsg}>No remappings defined.</span>}
+                {allRemappings.map(({ fromScheme, toScheme }) => (
+                    <div key={`${fromScheme}|${toScheme}`} className={classes.listRow}>
+                        <span className={classes.listRowName}>
+                            {fromScheme} → {toScheme}
+                        </span>
+                        <Button size="small" appearance="transparent" icon={<Edit20Regular />} title="Edit" disabled={!!editing} onClick={() => startEdit(fromScheme, toScheme)} />
+                        <Button
+                            size="small"
+                            appearance="transparent"
+                            icon={<Delete20Regular />}
+                            title="Delete"
+                            disabled={!!editing}
+                            onClick={() => handleDelete(fromScheme, toScheme)}
+                        />
+                    </div>
+                ))}
+            </div>
+            {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>
+                        <Select className={classes.formControl} value={editing.fromScheme} disabled={!editing.isNew} onChange={(_, d) => handleFromSchemeChange(d.value)}>
+                            {schemeNames.map((n) => (
+                                <option key={n} value={n}>
+                                    {n}
+                                </option>
+                            ))}
+                        </Select>
+                    </div>
+                    <div style={{ display: "flex", justifyContent: "center" }}>
+                        <Button size="small" appearance="transparent" icon={<ArrowBidirectionalUpDown20Regular />} title="Swap From / To schemes" onClick={handleSwapSchemes} />
+                    </div>
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>To scheme</Label>
+                        <Select className={classes.formControl} value={editing.toScheme} disabled={!editing.isNew} onChange={(_, d) => handleToSchemeChange(d.value)}>
+                            {schemeNames
+                                .filter((n) => n !== editing.fromScheme)
+                                .map((n) => (
+                                    <option key={n} value={n}>
+                                        {n}
+                                    </option>
+                                ))}
+                        </Select>
+                    </div>
+                    {conflictLabel && <span className={classes.errorText}>A remapping "{conflictLabel}" already exists. Edit that remapping instead.</span>}
+                    <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>{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)}>
+                                <span className={classes.mappingBoneName} title={entry.name}>
+                                    {"\u00A0\u00A0".repeat(entry.depth) + entry.name}
+                                </span>
+                                <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 && <span className={classes.errorText}>{error}</span>}
+                    <div className={classes.actionRow}>
+                        <Button size="small" appearance="secondary" onClick={handleCancel}>
+                            Cancel
+                        </Button>
+                        <Button size="small" appearance="primary" onClick={handleSave} disabled={!!conflictLabel || faultyBones.size > 0}>
+                            Save
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ─── Main Dialog ──────────────────────────────────────────────────────────────
+
+export type NamingSchemeManagerDialogProps = {
+    manager: NamingSchemeManager;
+    open: boolean;
+    onClose: () => void;
+};
+
+export const NamingSchemeManagerDialog: FunctionComponent<NamingSchemeManagerDialogProps> = ({ manager, open, onClose }) => {
+    const classes = useStyles();
+    const [activeTab, setActiveTab] = useState<"schemes" | "remappings">("schemes");
+    const [version, setVersion] = useState(0);
+    const [isEditing, setIsEditing] = useState(false);
+    const [confirmClose, setConfirmClose] = useState(false);
+    const surfaceRef = useRef<HTMLElement>(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]);
+
+    // 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();
+                }
+            }}
+        >
+            <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}>Naming Scheme Manager</DialogTitle>
+                        <Button appearance="subtle" icon={<Dismiss20Regular />} onClick={handleClose} title="Close" aria-label="Close" />
+                    </div>
+                    {/* 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" onClick={() => setConfirmClose(false)}>
+                                        Cancel
+                                    </Button>
+                                    <Button
+                                        appearance="primary"
+                                        onClick={() => {
+                                            setConfirmClose(false);
+                                            onClose();
+                                        }}
+                                    >
+                                        Close Anyway
+                                    </Button>
+                                </DialogActions>
+                            </DialogBody>
+                        </DialogSurface>
+                    </Dialog>
+                    <TabList
+                        className={classes.tabList}
+                        selectedValue={activeTab}
+                        onTabSelect={(_, d) => {
+                            if (!isEditing) {
+                                setActiveTab(d.value as "schemes" | "remappings");
+                            }
+                        }}
+                    >
+                        <Tab value="schemes" disabled={isEditing && activeTab !== "schemes"}>
+                            Naming Schemes
+                        </Tab>
+                        <Tab value="remappings" disabled={isEditing && activeTab !== "remappings"}>
+                            Remappings
+                        </Tab>
+                    </TabList>
+                    <DialogContent className={classes.content}>
+                        {activeTab === "schemes" ? (
+                            <SchemesPanel manager={manager} 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..b095fcd8a39
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -0,0 +1,255 @@
+import type { Nullable } from "core/types";
+import type { IRetargetOptions } from "core/Animations/animatorAvatar";
+
+import { ArcRotateCamera } from "core/Cameras/arcRotateCamera";
+import { Engine } from "core/Engines/engine";
+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 { 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 { Avatars, Animations } from "./data";
+import type { NamingSchemeManager } from "./namingSchemeManager";
+import { FindAvatarFromPath, FindAnimationFromPath, SaveSnippet, TestPlaygroundCode } from "./helperFunctions";
+
+export type { GizmoType } from "./avatar";
+
+export interface IRetargetingParams {
+    // Avatar
+    avatarPath: string;
+    avatarUpdateRestPose: boolean;
+    avatarRescaleAvatar: boolean;
+    avatarAnimSpeed: number;
+    // Animation
+    animationPath: string;
+    animationUpdateRestPose: boolean;
+    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;
+
+    public avatar: Nullable<Avatar> = null;
+    public animationSource: Nullable<AnimationSource> = null;
+    public htmlConsole!: HTMLConsole;
+
+    private _retargetOptions: Nullable<IRetargetOptions> = null;
+    private _lastRetargetParams: Nullable<IRetargetingParams> = null;
+    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(canvas: HTMLCanvasElement): void {
+        this._engine = new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+        this.htmlConsole = new HTMLConsole();
+        this._scene = new Scene(this._engine);
+        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): void {
+        const { avatar, animationSource } = this;
+        if (!avatar?.animatorAvatar || !animationSource?.animationGroup) {
+            return;
+        }
+
+        this._lastRetargetParams = params;
+
+        avatar.prepareRetargeting();
+        animationSource.prepareRetargeting();
+
+        const avatarName = FindAvatarFromPath(params.avatarPath);
+        const animationName = FindAnimationFromPath(params.animationPath);
+        const sourceScheme = Animations[animationName]?.namingScheme;
+        const targetScheme = Avatars[avatarName]?.namingScheme;
+        if (!sourceScheme || !targetScheme) {
+            return;
+        }
+
+        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();
+    }
+
+    public exportToPlayground(): void {
+        if (!this._isRetargeted || !this._retargetOptions || !this._lastRetargetParams || !this.avatar || !this.animationSource) {
+            return;
+        }
+
+        const epsilon = 1e-4;
+        const params = this._lastRetargetParams;
+
+        const boneTransformations = this.avatar.buildExportData(params.avatarPath, params.avatarUpdateRestPose, epsilon);
+        const animationTransformNodes = this.animationSource.buildExportData(params.animationPath, params.animationUpdateRestPose, epsilon);
+
+        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 };
+        const code = TestPlaygroundCode.replace("%avatarPath%", params.avatarPath.replace(/"/g, '\\"'))
+            .replace("%animationPath%", params.animationPath.replace(/"/g, '\\"'))
+            .replace("%retargetOptions%", JSON.stringify(optionsCopy, undefined, 8))
+            .replace("%avatarRestPoseUpdate%", JSON.stringify(boneTransformations))
+            .replace("%animationRestPoseUpdate%", JSON.stringify(animationTransformNodes))
+            .replace("%nameRemapping%", JSON.stringify(mapNodes));
+
+        SaveSnippet(code);
+    }
+
+    public resize(): void {
+        this._engine?.resize();
+    }
+
+    public dispose(): void {
+        this.avatar?.dispose();
+        this.animationSource?.dispose();
+        this.htmlConsole.dispose();
+        this._scene?.dispose();
+        this._engine?.dispose();
+        this.avatar = null;
+        this.animationSource = null;
+        this._scene = null;
+        this._engine = null;
+    }
+}

From 680c5c9f482c18ce124602ac64f9774f5f391641 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Wed, 18 Mar 2026 11:15:06 +0100
Subject: [PATCH 04/30] More changes

---
 .../animationRetargeting/animation.ts         |   57 +-
 .../animationRetargeting/animationManager.ts  |  216 ++
 .../animationRetargetingExtension.tsx         |   33 +-
 .../animationRetargetingPanel.tsx             | 1771 +++++++++--------
 .../animationRetargetingViewport.tsx          |    1 -
 .../animationRetargeting/animationsPanel.tsx  |  678 +++++++
 .../extensions/animationRetargeting/avatar.ts |   72 +-
 .../animationRetargeting/avatarManager.ts     |  216 ++
 .../animationRetargeting/avatarsPanel.tsx     |  739 +++++++
 .../animationRetargeting/helperFunctions.ts   |   23 +-
 .../namingSchemeManager.ts                    |    2 +-
 ...Dialog.tsx => retargetingConfigDialog.tsx} |  244 ++-
 .../retargetingSceneManager.ts                |   96 +-
 13 files changed, 3200 insertions(+), 948 deletions(-)
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
 rename packages/dev/inspector-v2/src/extensions/animationRetargeting/{namingSchemeManagerDialog.tsx => retargetingConfigDialog.tsx} (75%)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
index b61b57ce068..d64ef8558cd 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -24,8 +24,7 @@ import { CreateSkeletonFromTransformNodeHierarchy } from "core/Bones/skeleton.fu
 // Side-effect import needed for scene.createPickingRay (prototype-augmented)
 import "core/Culling/ray";
 
-import { Animations } from "./data";
-import { FindAnimationFromPath, DistancePointToLine } from "./helperFunctions";
+import { DistancePointToLine } from "./helperFunctions";
 import type { GizmoType } from "./avatar";
 
 const ShadowLayerMask = 0x20000000;
@@ -78,9 +77,9 @@ export class AnimationSource {
         this._gizmoManager.coordinatesMode = GizmoCoordinatesMode.Local;
     }
 
-    public async loadAsync(path: string, updateRestPose: boolean): Promise<void> {
+    public async loadAsync(path: string, restPoseUpdate?: RestPoseDataUpdate): Promise<void> {
         this._cleanScene();
-        await this._loadFileAsync(path, updateRestPose);
+        await this._loadFileAsync(path, restPoseUpdate);
     }
 
     /** Returns a sorted list of transform node names targeted by the animation group. */
@@ -155,14 +154,13 @@ export class AnimationSource {
     }
 
     /** Builds the rest-pose export data for the playground code generator. */
-    public buildExportData(animationPath: string, animationUpdateRestPose: boolean, epsilon: number): RestPoseDataUpdate {
+    public buildExportData(_animationUrl: string, animationUpdateRestPose: boolean, epsilon: number, restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
         const animationTransformNodes: RestPoseDataUpdate = [];
 
         if (!animationUpdateRestPose) {
             return animationTransformNodes;
         }
 
-        const restPoseUpdate = Animations[FindAnimationFromPath(animationPath)]?.restPoseUpdate;
         if (restPoseUpdate) {
             for (const dataBlock of restPoseUpdate) {
                 animationTransformNodes.push(dataBlock);
@@ -226,15 +224,36 @@ export class AnimationSource {
             return;
         }
         this._animationGroup.stop();
-        if (this._inRestPose) {
-            this._restPoseTransformNodeTransformations.clear();
-            this._saveTransformNodes(this._restPoseTransformNodeTransformations);
-        }
         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.
+     */
+    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);
     }
@@ -296,8 +315,12 @@ export class AnimationSource {
         this._gizmoManager.dispose();
     }
 
-    private async _loadFileAsync(path: string, updateRestPose: boolean): Promise<void> {
-        await AppendSceneAsync(path, this._scene);
+    private async _loadFileAsync(path: string, restPoseUpdate?: RestPoseDataUpdate): Promise<void> {
+        if (path.startsWith("file:")) {
+            await AppendSceneAsync(path.substring(5), this._scene, { rootUrl: "file:" });
+        } else {
+            await AppendSceneAsync(path, this._scene);
+        }
 
         this._rootNode = this._scene.getMeshByName("__root__");
         if (!this._rootNode) {
@@ -401,8 +424,8 @@ export class AnimationSource {
         this._gizmoSelectedNode.renderingGroupId = 3;
         this._gizmoSelectedNode.position.copyFrom(hipsNode.absolutePosition);
 
-        if (updateRestPose) {
-            this._updateRestPose(path);
+        if (restPoseUpdate && restPoseUpdate.length > 0) {
+            this._applyRestPoseUpdate(restPoseUpdate);
         }
 
         this._initialTransformNodeTransformations.clear();
@@ -485,14 +508,10 @@ export class AnimationSource {
         });
     }
 
-    private _updateRestPose(path: string): void {
+    private _applyRestPoseUpdate(restPoseUpdate: RestPoseDataUpdate): void {
         if (!this._rootNode) {
             return;
         }
-        const restPoseUpdate = Animations[FindAnimationFromPath(path)]?.restPoseUpdate;
-        if (!restPoseUpdate) {
-            return;
-        }
         for (const dataBlock of restPoseUpdate) {
             const node = this._rootNode.getChildTransformNodes(false, (node) => node.name === dataBlock.name)[0];
             if (node) {
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..c9e6b3d8849
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -0,0 +1,216 @@
+import type { RestPoseDataUpdate } from "./data";
+
+const AnimationStorageKey = "BabylonInspector_AnimRetargeting_AnimationManager";
+const IDBName = "BabylonInspector_AnimRetargeting";
+const IDBStore = "animationFiles";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type StoredAnimation = {
+    /** Unique, immutable identifier generated at creation time. Used as the IndexedDB key prefix. */
+    id: string;
+    name: string;
+    source: "url" | "file";
+    url?: string;
+    fileNames?: string[];
+    namingScheme: string;
+    animationGroupName: string;
+    restPoseUpdate?: RestPoseDataUpdate;
+};
+
+type SerializedData = {
+    animations: StoredAnimation[];
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function GenerateId(): string {
+    return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+// ─── 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() {
+        this._loadFromStorage();
+    }
+
+    // ─── Public API ───────────────────────────────────────────────────────────
+
+    public getAllAnimations(): readonly StoredAnimation[] {
+        return this._animations;
+    }
+
+    public getAnimation(name: string): StoredAnimation | undefined {
+        return this._animations.find((a) => a.name === name);
+    }
+
+    public getAnimationById(id: string): StoredAnimation | undefined {
+        return this._animations.find((a) => a.id === id);
+    }
+
+    /**
+     * 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`.
+     */
+    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.
+     */
+    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.
+     * @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.
+     */
+    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);
+    }
+
+    // ─── Private ──────────────────────────────────────────────────────────────
+
+    private _loadFromStorage(): void {
+        try {
+            const raw = localStorage.getItem(AnimationStorageKey);
+            if (!raw) {
+                return;
+            }
+            const data: SerializedData = JSON.parse(raw);
+            this._animations = data.animations ?? [];
+        } catch {
+            this._animations = [];
+        }
+    }
+
+    private _saveToStorage(): void {
+        const data: SerializedData = { animations: this._animations };
+        localStorage.setItem(AnimationStorageKey, JSON.stringify(data));
+    }
+}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 0d2ff8743a5..b08574e4f47 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -10,11 +10,13 @@ import { Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Database20Regula
 import { Button } from "@fluentui/react-components";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
-import { AnimationRetargetingPanel, defaultPanelState } from "./animationRetargetingPanel";
+import { AnimationRetargetingPanel, DefaultPanelState } from "./animationRetargetingPanel";
 import type { PanelStateStore } from "./animationRetargetingPanel";
 import type { RetargetingSceneManager } from "./retargetingSceneManager";
 import { NamingSchemeManager } from "./namingSchemeManager";
-import { NamingSchemeManagerDialog } from "./namingSchemeManagerDialog";
+import { AvatarManager } from "./avatarManager";
+import { AnimationManager } from "./animationManager";
+import { RetargetingConfigDialog } from "./retargetingConfigDialog";
 
 /**
  * Service definition for the Animation Retargeting extension.
@@ -30,15 +32,23 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         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 localStorage
         const namingSchemeManager = new NamingSchemeManager();
 
+        // Avatar manager — persists across extension lifetime via localStorage + IndexedDB
+        const avatarManager = new AvatarManager();
+
+        // Animation manager — persists across extension lifetime via localStorage + IndexedDB
+        const animationManager = new AnimationManager();
+
         let isEnabled = false;
         let viewportReg: IDisposable | null = null;
         let currentManager: RetargetingSceneManager | null = null;
         // Persists all panel UI state across remounts (e.g. when the panel is docked elsewhere)
-        const persistedPanelState: PanelStateStore = { ...defaultPanelState };
+        const persistedPanelState: PanelStateStore = { ...DefaultPanelState };
 
         function setEnabled(enabled: boolean): void {
             if (enabled === isEnabled) {
@@ -126,8 +136,17 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                         disabled={!localIsEnabled}
                         onClick={() => currentManager?.htmlConsole.toggle()}
                     />
-                    <Button appearance="transparent" size="small" icon={<Database20Regular />} title="Manage naming schemes" onClick={() => setIsDialogOpen(true)} />
-                    <NamingSchemeManagerDialog manager={namingSchemeManager} open={isDialogOpen} onClose={() => setIsDialogOpen(false)} />
+                    <Button appearance="transparent" size="small" icon={<Database20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
+                    <RetargetingConfigDialog
+                        manager={namingSchemeManager}
+                        avatarManager={avatarManager}
+                        animationManager={animationManager}
+                        open={isDialogOpen}
+                        onClose={() => {
+                            setIsDialogOpen(false);
+                            onConfigChangedObs.notifyObservers();
+                        }}
+                    />
                 </>
             );
         };
@@ -143,9 +162,12 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                 <AnimationRetargetingPanel
                     initialIsEnabled={isEnabled}
                     isEnabledObs={isEnabledObs}
+                    onConfigChangedObs={onConfigChangedObs}
                     onManagerReadyObs={onManagerReadyObs}
                     getCurrentManager={() => currentManager}
                     namingSchemeManager={namingSchemeManager}
+                    avatarManager={avatarManager}
+                    animationManager={animationManager}
                     stateStore={persistedPanelState}
                 />
             ),
@@ -157,6 +179,7 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                 panelReg.dispose();
                 onManagerReadyObs.clear();
                 isEnabledObs.clear();
+                onConfigChangedObs.clear();
             },
         };
     },
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index 3c978123fd3..8f1561b7f5e 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -1,826 +1,945 @@
-import type { FunctionComponent } from "react";
-import type { Observable } from "core/Misc/observable";
-import type { Transform } from "../../components/properties/transformProperties";
-import { makeStyles, tokens, Body1Strong } from "@fluentui/react-components";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
-import { CheckboxPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/checkboxPropertyLine";
-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 { TransformProperties } from "../../components/properties/transformProperties";
-import { Avatars, Animations } from "./data";
-import { FindAvatarFromPath, FindAnimationFromPath } from "./helperFunctions";
-import type { RetargetingSceneManager } from "./retargetingSceneManager";
-import type { NamingSchemeManager } from "./namingSchemeManager";
-import type { GizmoType } from "./avatar";
-
-/**
- * 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.
- */
-function buildFilteredBoneList(names: string[], animPath: string, avatarPath: string, namingSchemeManager: NamingSchemeManager): string[] {
-    const animName = FindAnimationFromPath(animPath);
-    const avatarName = FindAvatarFromPath(avatarPath);
-    const sourceScheme = Animations[animName]?.namingScheme;
-    const targetScheme = Avatars[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",
-    },
-    enableRow: {
-        display: "none", // removed: button moved to title bar headerExtra
-    },
-    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: "13px",
-        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,
-    },
-});
-
-const AvatarOptions = Object.keys(Avatars).map((name) => ({ label: name, value: Avatars[name].path }));
-const AnimationOptions = Object.keys(Animations).map((name) => ({ label: name, value: Animations[name].path }));
-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 = {
-    avatarPath: string;
-    avatarUpdateRestPose: boolean;
-    avatarRescaleAvatar: boolean;
-    avatarAnimSpeed: number;
-    avatarShowSkeleton: boolean;
-    avatarShowSkeletonLocalAxes: boolean;
-    avatarGizmoEnabled: boolean;
-    avatarGizmoType: string;
-    avatarGizmoSelectedNode: string;
-    animationPath: string;
-    animationUpdateRestPose: boolean;
-    animationSpeed: number;
-    animationShowSkeleton: boolean;
-    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 = {
-    avatarPath: Avatars["Goblin"].path,
-    avatarUpdateRestPose: true,
-    avatarRescaleAvatar: true,
-    avatarAnimSpeed: 1,
-    avatarShowSkeleton: false,
-    avatarShowSkeletonLocalAxes: false,
-    avatarGizmoEnabled: false,
-    avatarGizmoType: "Rotation",
-    avatarGizmoSelectedNode: "",
-    animationPath: Animations["Rumba Dancing"].path,
-    animationUpdateRestPose: true,
-    animationSpeed: 1,
-    animationShowSkeleton: true,
-    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>;
-    onManagerReadyObs: Observable<RetargetingSceneManager>;
-    getCurrentManager: () => RetargetingSceneManager | null;
-    namingSchemeManager: NamingSchemeManager;
-    /** Persisted across remounts (e.g. when the panel is docked elsewhere). Lives in the extension closure. */
-    stateStore: PanelStateStore;
-};
-
-export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPanelProps> = ({
-    initialIsEnabled,
-    isEnabledObs,
-    onManagerReadyObs,
-    getCurrentManager,
-    namingSchemeManager,
-    stateStore,
-}) => {
-    const classes = useStyles();
-    const managerRef = useRef<RetargetingSceneManager | null>(null);
-    const [isEnabled, setIsEnabled] = useState(initialIsEnabled);
-    const [, forceUpdate] = useState(0);
-
-    // Avatar state
-    const [avatarPath, setAvatarPath] = useState(() => stateStore.avatarPath);
-    const [avatarUpdateRestPose, setAvatarUpdateRestPose] = useState(() => stateStore.avatarUpdateRestPose);
-    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 [animationPath, setAnimationPath] = useState(() => stateStore.animationPath);
-    const [animationUpdateRestPose, setAnimationUpdateRestPose] = useState(() => stateStore.animationUpdateRestPose);
-    const [animationSpeed, setAnimationSpeed] = useState(() => stateStore.animationSpeed);
-    const [animationShowSkeleton, setAnimationShowSkeleton] = useState(() => stateStore.animationShowSkeleton);
-    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 }[]>([]);
-
-    // 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 [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({
-        avatarPath,
-        avatarUpdateRestPose,
-        avatarRescaleAvatar,
-        avatarAnimSpeed,
-        avatarShowSkeleton,
-        avatarShowSkeletonLocalAxes,
-        avatarGizmoEnabled,
-        avatarGizmoType,
-        avatarGizmoSelectedNode,
-        animationPath,
-        animationUpdateRestPose,
-        animationSpeed,
-        animationShowSkeleton,
-        animationShowSkeletonLocalAxes,
-        animationGizmoEnabled,
-        animationGizmoType,
-        animationGizmoSelectedNode,
-        fixAnimations,
-        checkHierarchy,
-        retargetAnimationKeys,
-        fixRootPosition,
-        fixGroundReference,
-        fixGroundReferenceDynamicRefNode,
-        rootNodeName,
-        groundReferenceNodeName,
-        groundReferenceVerticalAxis,
-    });
-    stateSnapshotRef.current = {
-        avatarPath,
-        avatarUpdateRestPose,
-        avatarRescaleAvatar,
-        avatarAnimSpeed,
-        avatarShowSkeleton,
-        avatarShowSkeletonLocalAxes,
-        avatarGizmoEnabled,
-        avatarGizmoType,
-        avatarGizmoSelectedNode,
-        animationPath,
-        animationUpdateRestPose,
-        animationSpeed,
-        animationShowSkeleton,
-        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);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    // Subscribe to isEnabled observable
-    useEffect(() => {
-        const obs = isEnabledObs.add((v) => setIsEnabled(v));
-        return () => {
-            isEnabledObs.remove(obs);
-        };
-    }, [isEnabledObs]);
-
-    // 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).
-         */
-        const setupManager = (manager: RetargetingSceneManager, triggerLoads: boolean) => {
-            managerRef.current = manager;
-
-            // 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 }[], animPath: string, avatarPath: string, currentGroundRef: string) => {
-                const filtered = buildFilteredBoneList(allNames, animPath, avatarPath, namingSchemeManager);
-                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.animationPath,
-                        s.avatarPath,
-                        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(s.animationShowSkeleton);
-                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.animationPath, s.avatarPath, 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);
-                manager.avatar!.loadAsync(s.avatarPath, s.avatarUpdateRestPose, s.avatarRescaleAvatar);
-                manager.animationSource!.loadAsync(s.animationPath, s.animationUpdateRestPose).then(() => {
-                    manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
-                });
-            } 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.animationPath,
-                        s.avatarPath,
-                        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);
-            };
-        };
-
-        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?.();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onManagerReadyObs]);
-
-    const handleLoadAvatar = useCallback((path: string, updateRestPose: boolean, rescale: boolean) => {
-        const manager = managerRef.current;
-        if (!manager?.avatar) {
-            return;
-        }
-        setIsLoading(true);
-        setIsAvatarLoaded(false);
-        setIsRetargeted(false);
-        manager.avatar.loadAsync(path, updateRestPose, rescale);
-    }, []);
-
-    const handleLoadAnimation = useCallback(
-        (path: string, updateRestPose: boolean) => {
-            const manager = managerRef.current;
-            if (!manager?.animationSource) {
-                return;
-            }
-            setIsLoading(true);
-            setIsAnimLoaded(false);
-            setIsRetargeted(false);
-            manager.animationSource.loadAsync(path, updateRestPose).then(() => {
-                manager.animationSource!.setSkeletonVisible(animationShowSkeleton);
-                manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
-            });
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [animationShowSkeleton]
-    );
-
-    const handleRetarget = useCallback(() => {
-        const manager = managerRef.current;
-        if (!manager) {
-            return;
-        }
-        setIsLoading(true);
-        manager.htmlConsole.clear();
-        manager.retarget(
-            {
-                avatarPath,
-                avatarUpdateRestPose,
-                avatarRescaleAvatar,
-                avatarAnimSpeed,
-                animationPath,
-                animationUpdateRestPose,
-                animationSpeed,
-                fixAnimations,
-                checkHierarchy,
-                retargetAnimationKeys,
-                fixRootPosition,
-                fixGroundReference,
-                fixGroundReferenceDynamicRefNode,
-                rootNodeName,
-                groundReferenceNodeName,
-                groundReferenceVerticalAxis: groundReferenceVerticalAxis as "" | "X" | "Y" | "Z",
-            },
-            namingSchemeManager
-        );
-    }, [
-        avatarPath,
-        avatarUpdateRestPose,
-        avatarRescaleAvatar,
-        avatarAnimSpeed,
-        animationPath,
-        animationUpdateRestPose,
-        animationSpeed,
-        fixAnimations,
-        checkHierarchy,
-        retargetAnimationKeys,
-        fixRootPosition,
-        fixGroundReference,
-        fixGroundReferenceDynamicRefNode,
-        rootNodeName,
-        groundReferenceNodeName,
-        groundReferenceVerticalAxis,
-    ]);
-
-    const loadingText = isLoading && !isAvatarLoaded && !isAnimLoaded ? "Loading..." : isLoading ? "Loading..." : null;
-
-    return (
-        <div className={classes.root}>
-            {!isEnabled ? (
-                <div className={classes.disabledOverlay}>Extension is disabled -- original scene is shown</div>
-            ) : (
-                <>
-                    <div className={classes.actionRow}>
-                        <ButtonLine label="Retarget" onClick={handleRetarget} disabled={!isAvatarLoaded || !isAnimLoaded || isLoading} />
-                        <ButtonLine label="Export to Playground" onClick={() => managerRef.current?.exportToPlayground()} disabled={!isRetargeted} />
-                    </div>
-                    <div className={classes.scrollContent}>
-                        {loadingText && <div style={{ padding: "4px 12px", fontSize: "12px", color: tokens.colorNeutralForeground3 }}>{loadingText}</div>}
-                        <BabylonAccordion>
-                            {/* Avatar */}
-                            <BabylonAccordionSection title="Avatar">
-                                <StringDropdownPropertyLine
-                                    label="Name"
-                                    value={avatarPath}
-                                    options={AvatarOptions}
-                                    onChange={(path) => {
-                                        setAvatarPath(path);
-                                        handleLoadAvatar(path, avatarUpdateRestPose, avatarRescaleAvatar);
-                                    }}
-                                />
-                                <CheckboxPropertyLine
-                                    label="Update rest pose"
-                                    value={avatarUpdateRestPose}
-                                    onChange={(v) => {
-                                        setAvatarUpdateRestPose(v);
-                                        handleLoadAvatar(avatarPath, v, avatarRescaleAvatar);
-                                    }}
-                                />
-                                <CheckboxPropertyLine
-                                    label="Rescale"
-                                    value={avatarRescaleAvatar}
-                                    onChange={(v) => {
-                                        setAvatarRescaleAvatar(v);
-                                        handleLoadAvatar(avatarPath, avatarUpdateRestPose, v);
-                                    }}
-                                />
-                                <CheckboxPropertyLine
-                                    label="Show skeleton"
-                                    value={avatarShowSkeleton}
-                                    onChange={(v) => {
-                                        setAvatarShowSkeleton(v);
-                                        managerRef.current?.avatar?.setSkeletonVisible(v);
-                                    }}
-                                />
-                                <CheckboxPropertyLine
-                                    label="Show skel. local axes"
-                                    value={avatarShowSkeletonLocalAxes}
-                                    disabled={!avatarShowSkeleton}
-                                    onChange={(v) => {
-                                        setAvatarShowSkeletonLocalAxes(v);
-                                        managerRef.current?.avatar?.setSkeletonLocalAxes(v);
-                                    }}
-                                />
-                                <SyncedSliderPropertyLine
-                                    label="Anim. speed"
-                                    value={avatarAnimSpeed}
-                                    min={0.01}
-                                    max={2}
-                                    step={0.05}
-                                    onChange={(v) => {
-                                        setAvatarAnimSpeed(v);
-                                        managerRef.current?.avatar?.setAnimSpeed(v);
-                                    }}
-                                />
-                                <ButtonLine label="Return to rest" onClick={() => managerRef.current?.avatar?.returnToRest()} disabled={!isAvatarLoaded} />
-                                <ButtonLine label="Play" onClick={() => managerRef.current?.avatar?.play(avatarAnimSpeed)} disabled={!isRetargeted} />
-                            </BabylonAccordionSection>
-                            {/* Avatar Gizmo */}
-                            <BabylonAccordionSection title="Avatar Gizmo">
-                                <CheckboxPropertyLine
-                                    label="Enabled"
-                                    value={avatarGizmoEnabled && !isAvatarPlaying}
-                                    disabled={isAvatarPlaying}
-                                    onChange={(v) => {
-                                        setAvatarGizmoEnabled(v);
-                                        managerRef.current?.avatar?.setGizmo(v, avatarGizmoType as GizmoType);
-                                    }}
-                                />
-                                <StringDropdownPropertyLine
-                                    label="Type"
-                                    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">
-                                <StringDropdownPropertyLine
-                                    label="Name"
-                                    value={animationPath}
-                                    options={AnimationOptions}
-                                    onChange={(path) => {
-                                        setAnimationPath(path);
-                                        handleLoadAnimation(path, animationUpdateRestPose);
-                                    }}
-                                />
-                                <CheckboxPropertyLine
-                                    label="Update rest pose"
-                                    value={animationUpdateRestPose}
-                                    onChange={(v) => {
-                                        setAnimationUpdateRestPose(v);
-                                        handleLoadAnimation(animationPath, v);
-                                    }}
-                                />
-                                <CheckboxPropertyLine
-                                    label="Show skeleton"
-                                    value={animationShowSkeleton}
-                                    onChange={(v) => {
-                                        setAnimationShowSkeleton(v);
-                                        managerRef.current?.animationSource?.setSkeletonVisible(v);
-                                    }}
-                                />
-                                <CheckboxPropertyLine
-                                    label="Show skel. local axes"
-                                    value={animationShowSkeletonLocalAxes}
-                                    disabled={!animationShowSkeleton}
-                                    onChange={(v) => {
-                                        setAnimationShowSkeletonLocalAxes(v);
-                                        managerRef.current?.animationSource?.setSkeletonLocalAxes(v);
-                                    }}
-                                />
-                                <SyncedSliderPropertyLine
-                                    label="Anim. speed"
-                                    value={animationSpeed}
-                                    min={0.01}
-                                    max={2}
-                                    step={0.05}
-                                    onChange={(v) => {
-                                        setAnimationSpeed(v);
-                                        managerRef.current?.animationSource?.play(v);
-                                    }}
-                                />
-                                <ButtonLine label="Return to rest" onClick={() => managerRef.current?.animationSource?.returnToRest()} disabled={!isAnimLoaded} />
-                                <ButtonLine label="Play" onClick={() => managerRef.current?.animationSource?.play(animationSpeed)} disabled={!isAnimLoaded} />
-                            </BabylonAccordionSection>
-                            {/* Animation Gizmo */}
-                            <BabylonAccordionSection title="Animation Gizmo">
-                                <CheckboxPropertyLine
-                                    label="Enabled"
-                                    value={animationGizmoEnabled && !isAnimPlaying}
-                                    disabled={isAnimPlaying}
-                                    onChange={(v) => {
-                                        setAnimationGizmoEnabled(v);
-                                        managerRef.current?.animationSource?.setGizmo(v, animationGizmoType as GizmoType);
-                                    }}
-                                />
-                                <StringDropdownPropertyLine
-                                    label="Type"
-                                    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">
-                                <CheckboxPropertyLine label="Fix animations" value={fixAnimations} onChange={setFixAnimations} />
-                                <CheckboxPropertyLine label="Check hierarchy" value={checkHierarchy} onChange={setCheckHierarchy} />
-                                <CheckboxPropertyLine label="Retarget keys" value={retargetAnimationKeys} onChange={setRetargetAnimationKeys} />
-                                <CheckboxPropertyLine label="Fix root position" value={fixRootPosition} onChange={setFixRootPosition} />
-                                <CheckboxPropertyLine label="Fix ground reference" value={fixGroundReference} onChange={setFixGroundReference} />
-                                <div style={{ paddingLeft: "16px" }}>
-                                    <CheckboxPropertyLine
-                                        label="Dynamic ref. node"
-                                        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>
-                                <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 style={{ paddingLeft: "16px" }}>
-                                    <StringDropdownPropertyLine
-                                        label="Vertical axis"
-                                        value={groundReferenceVerticalAxis}
-                                        options={VerticalAxisOptions}
-                                        disabled={!fixRootPosition && !fixGroundReference}
-                                        onChange={setGroundReferenceVerticalAxis}
-                                    />
-                                </div>
-                            </BabylonAccordionSection>
-                        </BabylonAccordion>
-                    </div>
-                </>
-            )}
-        </div>
-    );
-};
+import type { FunctionComponent } from "react";
+import type { Observable } from "core/Misc/observable";
+import { FilesInputStore } from "core/Misc/filesInputStore";
+import { SceneLoader } from "core/Loading/sceneLoader";
+import type { Transform } from "../../components/properties/transformProperties";
+import { makeStyles, tokens, Body1Strong } from "@fluentui/react-components";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
+import { CheckboxPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/checkboxPropertyLine";
+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 { TransformProperties } from "../../components/properties/transformProperties";
+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";
+
+/**
+ * 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.
+ */
+function BuildFilteredBoneList(
+    names: string[],
+    animName: string,
+    avatarName: string,
+    namingSchemeManager: NamingSchemeManager,
+    avatarManager: AvatarManager,
+    animationManager: AnimationManager
+): string[] {
+    const sourceScheme = animationManager.getAnimation(animName)?.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",
+    },
+    enableRow: {
+        display: "none", // removed: button moved to title bar headerExtra
+    },
+    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: "13px",
+        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,
+    },
+});
+
+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;
+    namingSchemeManager: NamingSchemeManager;
+    avatarManager: AvatarManager;
+    animationManager: AnimationManager;
+    /** Persisted across remounts (e.g. when the panel is docked elsewhere). Lives in the extension closure. */
+    stateStore: PanelStateStore;
+};
+
+export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPanelProps> = ({
+    initialIsEnabled,
+    isEnabledObs,
+    onConfigChangedObs,
+    onManagerReadyObs,
+    getCurrentManager,
+    namingSchemeManager,
+    avatarManager,
+    animationManager,
+    stateStore,
+}) => {
+    const classes = useStyles();
+    const managerRef = useRef<RetargetingSceneManager | null>(null);
+    const [isEnabled, setIsEnabled] = useState(initialIsEnabled);
+    const [, forceUpdate] = useState(0);
+
+    // 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 })));
+    const [animationOptions, setAnimationOptions] = useState(() => animationManager.getAllAnimations().map((a) => ({ label: a.name, value: a.name })));
+
+    // 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 [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 }));
+            const newAnimationOptions = animationManager.getAllAnimations().map((a) => ({ label: a.name, value: a.name }));
+            setAvatarOptions(newAvatarOptions);
+            setAnimationOptions(newAnimationOptions);
+
+            const s = stateSnapshotRef.current;
+            if (s.avatarName && !avatarManager.getAvatar(s.avatarName)) {
+                setAvatarName("");
+                setIsAvatarLoaded(false);
+                setIsRetargeted(false);
+            }
+            if (s.animationName && !animationManager.getAnimation(s.animationName)) {
+                setAnimationName("");
+                setIsAnimLoaded(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).
+         */
+        const setupManager = (manager: RetargetingSceneManager, triggerLoads: boolean) => {
+            managerRef.current = manager;
+
+            // 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 storedAn = animationManager.getAnimation(s.animationName);
+                if (storedAv) {
+                    if (storedAv.source === "url" && storedAv.url) {
+                        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) {
+                                manager.avatar!.loadAsync("file:" + sceneFile.name, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
+                            }
+                        })();
+                    }
+                }
+                if (storedAn) {
+                    const loadAndPlayAsync = async (path: string) => {
+                        await manager.animationSource!.loadAsync(path, storedAn.restPoseUpdate);
+                        manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
+                    };
+                    if (storedAn.source === "url" && storedAn.url) {
+                        void loadAndPlayAsync(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 loadAndPlayAsync("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);
+            };
+        };
+
+        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 === "url" && storedAvatar.url) {
+                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) {
+                    manager.avatar.loadAsync("file:" + sceneFile.name, rescale, storedAvatar.restPoseUpdate);
+                }
+            }
+        },
+        [avatarManager]
+    );
+
+    const handleLoadAnimation = useCallback(
+        async (name: string) => {
+            const manager = managerRef.current;
+            if (!manager?.animationSource) {
+                return;
+            }
+            const storedAnimation = animationManager.getAnimation(name);
+            if (!storedAnimation) {
+                return;
+            }
+            setIsLoading(true);
+            setIsAnimLoaded(false);
+            setIsRetargeted(false);
+
+            let loadPath: string | undefined;
+            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);
+                manager.animationSource!.setSkeletonVisible(true);
+                manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
+            }
+        },
+        [animationManager]
+    );
+
+    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}>
+            {!isEnabled ? (
+                <div className={classes.disabledOverlay}>Extension is disabled -- original scene is shown</div>
+            ) : (
+                <>
+                    <div className={classes.actionRow}>
+                        <ButtonLine label="Retarget" onClick={handleRetarget} disabled={!isAvatarLoaded || !isAnimLoaded || isLoading} />
+                        <ButtonLine
+                            label="Export to Playground"
+                            onClick={() => managerRef.current?.exportToPlaygroundAsync(avatarManager, animationManager)}
+                            disabled={!isRetargeted}
+                        />
+                    </div>
+                    <div className={classes.scrollContent}>
+                        {loadingText && <div style={{ padding: "4px 12px", fontSize: "12px", color: tokens.colorNeutralForeground3 }}>{loadingText}</div>}
+                        <BabylonAccordion>
+                            {/* Avatar */}
+                            <BabylonAccordionSection title="Avatar">
+                                <StringDropdownPropertyLine
+                                    label="Name"
+                                    value={avatarName}
+                                    options={avatarOptions}
+                                    onChange={(name) => {
+                                        setAvatarName(name);
+                                        handleLoadAvatar(name, avatarRescaleAvatar);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Rescale"
+                                    value={avatarRescaleAvatar}
+                                    onChange={(v) => {
+                                        setAvatarRescaleAvatar(v);
+                                        handleLoadAvatar(avatarName, v);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Show skeleton"
+                                    value={avatarShowSkeleton}
+                                    onChange={(v) => {
+                                        setAvatarShowSkeleton(v);
+                                        managerRef.current?.avatar?.setSkeletonVisible(v);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Show skel. local axes"
+                                    value={avatarShowSkeletonLocalAxes}
+                                    disabled={!avatarShowSkeleton}
+                                    onChange={(v) => {
+                                        setAvatarShowSkeletonLocalAxes(v);
+                                        managerRef.current?.avatar?.setSkeletonLocalAxes(v);
+                                    }}
+                                />
+                                <SyncedSliderPropertyLine
+                                    label="Anim. speed"
+                                    value={avatarAnimSpeed}
+                                    min={0.01}
+                                    max={2}
+                                    step={0.05}
+                                    onChange={(v) => {
+                                        setAvatarAnimSpeed(v);
+                                        managerRef.current?.avatar?.setAnimSpeed(v);
+                                    }}
+                                />
+                                <ButtonLine label="Return to rest" onClick={() => managerRef.current?.avatar?.returnToRest()} disabled={!isAvatarLoaded} />
+                                <ButtonLine
+                                    label="Save as rest pose"
+                                    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" onClick={() => managerRef.current?.avatar?.play(avatarAnimSpeed)} disabled={!isRetargeted} />
+                            </BabylonAccordionSection>
+                            {/* Avatar Gizmo */}
+                            <BabylonAccordionSection title="Avatar Gizmo">
+                                <CheckboxPropertyLine
+                                    label="Enabled"
+                                    value={avatarGizmoEnabled && !isAvatarPlaying}
+                                    disabled={isAvatarPlaying}
+                                    onChange={(v) => {
+                                        setAvatarGizmoEnabled(v);
+                                        managerRef.current?.avatar?.setGizmo(v, avatarGizmoType as GizmoType);
+                                    }}
+                                />
+                                <StringDropdownPropertyLine
+                                    label="Type"
+                                    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">
+                                <StringDropdownPropertyLine
+                                    label="Name"
+                                    value={animationName}
+                                    options={animationOptions}
+                                    onChange={(name) => {
+                                        setAnimationName(name);
+                                        handleLoadAnimation(name);
+                                    }}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Show skel. local axes"
+                                    value={animationShowSkeletonLocalAxes}
+                                    onChange={(v) => {
+                                        setAnimationShowSkeletonLocalAxes(v);
+                                        managerRef.current?.animationSource?.setSkeletonLocalAxes(v);
+                                    }}
+                                />
+                                <SyncedSliderPropertyLine
+                                    label="Anim. speed"
+                                    value={animationSpeed}
+                                    min={0.01}
+                                    max={2}
+                                    step={0.05}
+                                    onChange={(v) => {
+                                        setAnimationSpeed(v);
+                                        managerRef.current?.animationSource?.play(v);
+                                    }}
+                                />
+                                <ButtonLine label="Return to rest" onClick={() => managerRef.current?.animationSource?.returnToRest()} disabled={!isAnimLoaded} />
+                                <ButtonLine
+                                    label="Save as rest pose"
+                                    disabled={!isAnimLoaded || isAnimPlaying}
+                                    onClick={() => {
+                                        const restPose = managerRef.current?.animationSource?.saveAsRestPose();
+                                        if (restPose && animationName) {
+                                            const stored = animationManager.getAnimation(animationName);
+                                            if (stored) {
+                                                animationManager.addAnimation({ ...stored, restPoseUpdate: restPose });
+                                            }
+                                        }
+                                    }}
+                                />
+                                <ButtonLine label="Play" onClick={() => managerRef.current?.animationSource?.play(animationSpeed)} disabled={!isAnimLoaded} />
+                            </BabylonAccordionSection>
+                            {/* Animation Gizmo */}
+                            <BabylonAccordionSection title="Animation Gizmo">
+                                <CheckboxPropertyLine
+                                    label="Enabled"
+                                    value={animationGizmoEnabled && !isAnimPlaying}
+                                    disabled={isAnimPlaying}
+                                    onChange={(v) => {
+                                        setAnimationGizmoEnabled(v);
+                                        managerRef.current?.animationSource?.setGizmo(v, animationGizmoType as GizmoType);
+                                    }}
+                                />
+                                <StringDropdownPropertyLine
+                                    label="Type"
+                                    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">
+                                <CheckboxPropertyLine label="Fix animations" value={fixAnimations} onChange={setFixAnimations} />
+                                <CheckboxPropertyLine label="Check hierarchy" value={checkHierarchy} onChange={setCheckHierarchy} />
+                                <CheckboxPropertyLine label="Retarget keys" value={retargetAnimationKeys} onChange={setRetargetAnimationKeys} />
+                                <CheckboxPropertyLine label="Fix root position" value={fixRootPosition} onChange={setFixRootPosition} />
+                                <CheckboxPropertyLine label="Fix ground reference" value={fixGroundReference} onChange={setFixGroundReference} />
+                                <div style={{ paddingLeft: "16px" }}>
+                                    <CheckboxPropertyLine
+                                        label="Dynamic ref. node"
+                                        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>
+                                <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 style={{ paddingLeft: "16px" }}>
+                                    <StringDropdownPropertyLine
+                                        label="Vertical axis"
+                                        value={groundReferenceVerticalAxis}
+                                        options={VerticalAxisOptions}
+                                        disabled={!fixRootPosition && !fixGroundReference}
+                                        onChange={setGroundReferenceVerticalAxis}
+                                    />
+                                </div>
+                            </BabylonAccordionSection>
+                        </BabylonAccordion>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
index ee913e4a4a0..6dd2afb7e40 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
@@ -62,7 +62,6 @@ export const AnimationRetargetingViewport: FunctionComponent<AnimationRetargetin
             managerRef.current = null;
         };
         // onManagerReady is intentionally not in deps - it's a stable callback from the service
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (
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..f0b7a02787f
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -0,0 +1,678 @@
+import type { FunctionComponent } from "react";
+import type { AnimationManager, StoredAnimation } from "./animationManager";
+import type { NamingSchemeManager } from "./namingSchemeManager";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import {
+    Button,
+    Input,
+    Select,
+    Label,
+    makeStyles,
+    mergeClasses,
+    tokens,
+    Body1Strong,
+    Caption1,
+    Dialog,
+    DialogSurface,
+    DialogBody,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Spinner,
+} from "@fluentui/react-components";
+import { Add20Regular, Delete20Regular, Edit20Regular, ArrowUpload20Regular } 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";
+
+// ─── 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,
+    },
+    listArea: {
+        overflowY: "auto",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        display: "flex",
+        flexDirection: "column",
+    },
+    listRow: {
+        display: "flex",
+        alignItems: "center",
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+        gap: tokens.spacingHorizontalXS,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        ":last-child": { borderBottom: "none" },
+    },
+    listRowName: {
+        flex: 1,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    listRowMeta: {
+        color: tokens.colorNeutralForeground3,
+        fontSize: "12px",
+        flexShrink: 0,
+        marginRight: tokens.spacingHorizontalXS,
+    },
+    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,
+    },
+    actionRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalS,
+        justifyContent: "flex-end",
+        flexShrink: 0,
+    },
+    errorText: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: "12px",
+        flexShrink: 0,
+    },
+    emptyMsg: {
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+        color: tokens.colorNeutralForeground3,
+        fontSize: "12px",
+    },
+    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: "11px",
+        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: "12px",
+    },
+    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: {
+        padding: `2px ${tokens.spacingHorizontalS}`,
+        fontSize: "12px",
+        cursor: "pointer",
+    },
+    animRowSelected: {
+        backgroundColor: tokens.colorBrandBackground2,
+        fontWeight: "bold",
+    },
+});
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type AnimationEdit = {
+    id: string | null;
+    originalName: string | null;
+    name: string;
+    sourceType: "url" | "file";
+    url: string;
+    files: File[];
+    animationGroupName: string;
+    namingScheme: string;
+    restPoseJson: string;
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * 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.
+ */
+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 ────────────────────────────────────────────────────────────────
+
+export const AnimationsPanel: FunctionComponent<{
+    animationManager: AnimationManager;
+    namingSchemeManager: NamingSchemeManager;
+    onMutate: () => void;
+    onEditingChange: (editing: boolean) => void;
+}> = ({ animationManager, namingSchemeManager, onMutate, onEditingChange }) => {
+    const classes = useStyles();
+    const [editing, setEditing] = useState<AnimationEdit | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [confirmDelete, setConfirmDelete] = useState<{ id: string; name: string } | null>(null);
+    const [animGroupNames, setAnimGroupNames] = useState<string[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+
+    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();
+    const schemeNames = namingSchemeManager.getAllSchemeNames();
+
+    // ─── Load preview ─────────────────────────────────────────────────────
+
+    const loadPreview = useCallback(
+        async (sourceType: "url" | "file", url: string, files: File[]) => {
+            setIsLoading(true);
+            setAnimGroupNames([]);
+            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;
+                }
+
+                const names = groups.map((g) => g.name);
+                setAnimGroupNames(names);
+
+                // Collect target names for scheme detection
+                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);
+
+                // Auto-select first animation group
+                setEditing((prev) => {
+                    if (!prev) {
+                        return prev;
+                    }
+                    return {
+                        ...prev,
+                        animationGroupName: prev.animationGroupName || names[0],
+                        ...(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,
+            originalName: null,
+            name: "",
+            sourceType: "url",
+            url: "",
+            files: [],
+            animationGroupName: "",
+            namingScheme: schemeNames[0] ?? "",
+            restPoseJson: "",
+        });
+        setError(null);
+        setAnimGroupNames([]);
+    }, [schemeNames, setEditingWithNotify]);
+
+    const startEdit = useCallback(
+        async (animation: StoredAnimation) => {
+            setEditingWithNotify({
+                id: animation.id,
+                originalName: animation.name,
+                name: animation.name,
+                sourceType: animation.source,
+                url: animation.url ?? "",
+                files: [],
+                animationGroupName: animation.animationGroupName,
+                namingScheme: animation.namingScheme,
+                restPoseJson: animation.restPoseUpdate ? JSON.stringify(animation.restPoseUpdate, undefined, 2) : "",
+            });
+            setError(null);
+            setAnimGroupNames([]);
+            if (animation.source === "url" && animation.url) {
+                void loadPreview("url", animation.url, []);
+            } 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);
+                }
+            }
+        },
+        [setEditingWithNotify, loadPreview, animationManager]
+    );
+
+    const handleCancel = useCallback(() => {
+        setEditingWithNotify(null);
+        setError(null);
+        setAnimGroupNames([]);
+        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.animationGroupName) {
+            setError("Please load the file and select an animation.");
+            return;
+        }
+        if (!editing.namingScheme) {
+            setError("Please select a naming scheme.");
+            return;
+        }
+        if (editing.originalName !== editing.name.trim()) {
+            const existing = animationManager.getAnimation(editing.name.trim());
+            if (existing) {
+                setError(`An animation named "${editing.name.trim()}" already exists.`);
+                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: import("./data").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,
+                animationGroupName: editing.animationGroupName,
+                restPoseUpdate,
+            };
+
+            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);
+            setAnimGroupNames([]);
+            onMutate();
+        } catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+    }, [editing, animationManager, onMutate, setEditingWithNotify]);
+
+    const handleDelete = useCallback((animation: StoredAnimation) => {
+        setConfirmDelete({ id: animation.id, name: animation.name });
+    }, []);
+
+    const handleConfirmDelete = useCallback(async () => {
+        if (!confirmDelete) {
+            return;
+        }
+        await animationManager.removeAnimationAsync(confirmDelete.id);
+        setConfirmDelete(null);
+        onMutate();
+    }, [confirmDelete, animationManager, 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);
+            }
+        },
+        [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);
+            }
+        },
+        [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?.name}"</strong> and all associated files?
+                        </DialogContent>
+                        <DialogActions>
+                            <Button appearance="secondary" onClick={() => setConfirmDelete(null)}>
+                                Cancel
+                            </Button>
+                            <Button appearance="primary" onClick={handleConfirmDelete}>
+                                Delete
+                            </Button>
+                        </DialogActions>
+                    </DialogBody>
+                </DialogSurface>
+            </Dialog>
+
+            <div className={classes.listHeader}>
+                <div className={classes.listButtons}>
+                    <Button size="small" icon={<Add20Regular />} onClick={startAdd} disabled={!!editing}>
+                        Add
+                    </Button>
+                </div>
+            </div>
+            <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
+                {allAnimations.length === 0 && <span className={classes.emptyMsg}>No custom animations defined.</span>}
+                {allAnimations.map((animation) => (
+                    <div key={animation.id} className={classes.listRow}>
+                        <span className={classes.listRowName}>{animation.name}</span>
+                        <span className={classes.listRowMeta}>{animation.source === "url" ? "URL" : "File"}</span>
+                        <span className={classes.listRowMeta}>{animation.namingScheme}</span>
+                        <Button size="small" appearance="transparent" icon={<Edit20Regular />} title="Edit" disabled={!!editing} onClick={() => startEdit(animation)} />
+                        <Button size="small" appearance="transparent" icon={<Delete20Regular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(animation)} />
+                    </div>
+                ))}
+            </div>
+
+            {editing && (
+                <div className={classes.editSectionFlex}>
+                    <Body1Strong>{editing.originalName ? `Editing "${editing.originalName}"` : "New Animation"}</Body1Strong>
+
+                    {/* Name */}
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Name</Label>
+                        <Input className={classes.formControl} size="small" value={editing.name} onChange={(_, d) => setEditing({ ...editing, name: d.value })} />
+                    </div>
+
+                    {/* URL input */}
+                    <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, []);
+                                }
+                            }}
+                            input={{
+                                onBlur: () => {
+                                    if (editing.url.trim() && editing.sourceType !== "file") {
+                                        void loadPreview("url", editing.url, []);
+                                    }
+                                },
+                            }}
+                        />
+                    </div>
+
+                    {/* Drop zone */}
+                    <div
+                        className={mergeClasses(classes.dropZone, isDragOver ? classes.dropZoneActive : undefined)}
+                        onDragOver={handleDragOver}
+                        onDragLeave={handleDragLeave}
+                        onDrop={handleDrop}
+                        onClick={() => fileInputRef.current?.click()}
+                    >
+                        <ArrowUpload20Regular />
+                        <div>Drop file(s) here or click to browse</div>
+                        <input ref={fileInputRef} type="file" multiple style={{ display: "none" }} onChange={handleFileInput} />
+                    </div>
+
+                    {/* Loading indicator */}
+                    {isLoading && (
+                        <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>
+                            Loading… <Spinner size="tiny" style={{ display: "inline-block" }} />
+                        </Caption1>
+                    )}
+
+                    {/* Animation group list */}
+                    {animGroupNames.length > 0 && (
+                        <>
+                            <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>Select the animation to use ({animGroupNames.length} found):</Caption1>
+                            <div className={classes.animList}>
+                                {animGroupNames.map((name) => (
+                                    <div
+                                        key={name}
+                                        className={mergeClasses(classes.animRow, editing.animationGroupName === name ? classes.animRowSelected : undefined)}
+                                        onClick={() => setEditing({ ...editing, animationGroupName: name })}
+                                    >
+                                        {name}
+                                    </div>
+                                ))}
+                            </div>
+                        </>
+                    )}
+
+                    {/* Naming scheme */}
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Naming scheme</Label>
+                        <Select className={classes.formControl} size="small" value={editing.namingScheme} onChange={(_, d) => setEditing({ ...editing, namingScheme: d.value })}>
+                            {schemeNames.map((n) => (
+                                <option key={n} value={n}>
+                                    {n}
+                                </option>
+                            ))}
+                        </Select>
+                    </div>
+
+                    {/* Rest pose data */}
+                    <div className={classes.formRow} style={{ alignItems: "flex-start" }}>
+                        <Label className={classes.formLabel} style={{ paddingTop: "6px" }}>
+                            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={(e) => setEditing({ ...editing, restPoseJson: e.target.value })}
+                        />
+                    </div>
+
+                    {error && <span className={classes.errorText}>{error}</span>}
+                    <div className={classes.actionRow}>
+                        <Button size="small" appearance="secondary" onClick={handleCancel}>
+                            Cancel
+                        </Button>
+                        <Button size="small" appearance="primary" onClick={handleSave}>
+                            Save
+                        </Button>
+                    </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
index 4b0b62351bb..766cefb9b64 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -7,9 +7,7 @@ import type { AbstractMesh } from "core/Meshes/abstractMesh";
 import type { TransformNode } from "core/Meshes/transformNode";
 
 import { Color3 } from "core/Maths/math.color";
-import type { Vector3 } from "core/Maths/math.vector";
-
-import { Matrix, TmpVectors } from "core/Maths/math.vector";
+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";
@@ -25,8 +23,8 @@ import type { Bone } from "core/Bones/bone";
 // Side-effect import needed for scene.createPickingRay (prototype-augmented)
 import "core/Culling/ray";
 
-import { Avatars } from "./data";
-import { FindAvatarFromPath, DistancePointToLine } from "./helperFunctions";
+import type { RestPoseDataUpdate } from "./data";
+import { DistancePointToLine } from "./helperFunctions";
 
 export type GizmoType = "Position" | "Rotation" | "Scale";
 
@@ -91,9 +89,9 @@ export class Avatar {
         this._gizmoManager.coordinatesMode = GizmoCoordinatesMode.Local;
     }
 
-    public async loadAsync(path: string, updateRestPose: boolean, rescaleAvatar: boolean): Promise<void> {
+    public async loadAsync(path: string, rescaleAvatar: boolean, restPoseUpdate?: RestPoseDataUpdate): Promise<void> {
         this._cleanScene();
-        await this._loadFileAsync(path, updateRestPose, rescaleAvatar);
+        await this._loadFileAsync(path, rescaleAvatar, restPoseUpdate);
     }
 
     /** Returns the list of all bone names in the avatar skeleton, in hierarchy order. */
@@ -150,9 +148,6 @@ export class Avatar {
         this._animationGroup?.stop();
         if (this._animatorAvatar) {
             for (const skeleton of this._animatorAvatar.skeletons) {
-                if (this._inRestPose) {
-                    skeleton.setCurrentPoseAsRest();
-                }
                 skeleton.returnToRest();
                 skeleton.prepare(true);
             }
@@ -165,21 +160,45 @@ export class Avatar {
         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.
+     */
+    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(avatarPath: string, avatarUpdateRestPose: boolean, epsilon: number): import("./data").RestPoseDataUpdate {
-        const boneTransformations: import("./data").RestPoseDataUpdate = [];
+    public buildExportData(_avatarUrl: string, avatarUpdateRestPose: boolean, epsilon: number, restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
+        const boneTransformations: RestPoseDataUpdate = [];
 
         if (!avatarUpdateRestPose) {
             return boneTransformations;
         }
 
-        const avatarName = FindAvatarFromPath(avatarPath);
-        const restPoseUpdate = Avatars[avatarName]?.restPoseUpdate;
         if (restPoseUpdate) {
             for (const dataBlock of restPoseUpdate) {
                 boneTransformations.push(dataBlock);
@@ -280,8 +299,13 @@ export class Avatar {
         this._gizmoManager.dispose();
     }
 
-    private async _loadFileAsync(path: string, updateRestPose: boolean, rescaleAvatar: boolean): Promise<void> {
-        const result = await ImportMeshAsync(path, this._scene);
+    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];
         avatarRootNode.name = "avatar";
 
@@ -319,8 +343,8 @@ export class Avatar {
             this._shadowGenerator.addShadowCaster(mesh);
         }
 
-        if (updateRestPose) {
-            this._updateRestPose(path);
+        if (restPoseUpdate && restPoseUpdate.length > 0) {
+            this._applyRestPoseUpdate(restPoseUpdate);
         }
 
         this._initialBoneTransformations.clear();
@@ -380,10 +404,8 @@ export class Avatar {
         this._scene.getAnimationGroupByName("avatar")?.dispose();
     }
 
-    private _updateRestPose(path: string): void {
-        const avatarName = FindAvatarFromPath(path);
-        const restPoseUpdate = Avatars[avatarName]?.restPoseUpdate;
-        if (!restPoseUpdate || !this._animatorAvatar) {
+    private _applyRestPoseUpdate(restPoseUpdate: RestPoseDataUpdate): void {
+        if (!this._animatorAvatar) {
             return;
         }
 
@@ -393,13 +415,13 @@ export class Avatar {
             if (index !== -1) {
                 const bone = avatarSkeleton.bones[index];
                 if (dataBlock.data.position) {
-                    bone.position = TmpVectors.Vector3[0].fromArray(dataBlock.data.position);
+                    bone.position = Vector3.FromArray(dataBlock.data.position);
                 }
                 if (dataBlock.data.scaling) {
-                    bone.scaling = TmpVectors.Vector3[0].fromArray(dataBlock.data.scaling);
+                    bone.scaling = Vector3.FromArray(dataBlock.data.scaling);
                 }
                 if (dataBlock.data.quaternion) {
-                    bone.rotationQuaternion = TmpVectors.Quaternion[0].fromArray(dataBlock.data.quaternion);
+                    bone.rotationQuaternion = Quaternion.FromArray(dataBlock.data.quaternion);
                 }
             }
         }
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..178eea20d3d
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -0,0 +1,216 @@
+import type { RestPoseDataUpdate } from "./data";
+
+const AvatarStorageKey = "BabylonInspector_AnimRetargeting_AvatarManager";
+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";
+    url?: string;
+    fileNames?: string[];
+    namingScheme: string;
+    rootNodeName: string;
+    restPoseUpdate?: RestPoseDataUpdate;
+};
+
+type SerializedData = {
+    avatars: StoredAvatar[];
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function GenerateId(): string {
+    return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+// ─── 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() {
+        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`.
+     */
+    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.
+     */
+    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.
+     * @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.
+     */
+    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);
+    }
+
+    // ─── Private ──────────────────────────────────────────────────────────────
+
+    private _loadFromStorage(): void {
+        try {
+            const raw = localStorage.getItem(AvatarStorageKey);
+            if (!raw) {
+                return;
+            }
+            const data: SerializedData = JSON.parse(raw);
+            this._avatars = data.avatars ?? [];
+        } catch {
+            this._avatars = [];
+        }
+    }
+
+    private _saveToStorage(): void {
+        const data: SerializedData = { avatars: this._avatars };
+        localStorage.setItem(AvatarStorageKey, JSON.stringify(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..3210ce745da
--- /dev/null
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -0,0 +1,739 @@
+import type { FunctionComponent } from "react";
+import type { AvatarManager, StoredAvatar } from "./avatarManager";
+import type { NamingSchemeManager } from "./namingSchemeManager";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import {
+    Button,
+    Input,
+    Select,
+    Label,
+    makeStyles,
+    mergeClasses,
+    tokens,
+    Body1Strong,
+    Caption1,
+    Dialog,
+    DialogSurface,
+    DialogBody,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Spinner,
+} from "@fluentui/react-components";
+import { Add20Regular, Delete20Regular, Edit20Regular, ArrowUpload20Regular } from "@fluentui/react-icons";
+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 { 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,
+    },
+    listArea: {
+        overflowY: "auto",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        display: "flex",
+        flexDirection: "column",
+    },
+    listRow: {
+        display: "flex",
+        alignItems: "center",
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+        gap: tokens.spacingHorizontalXS,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        ":last-child": { borderBottom: "none" },
+    },
+    listRowName: {
+        flex: 1,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    listRowMeta: {
+        color: tokens.colorNeutralForeground3,
+        fontSize: "12px",
+        flexShrink: 0,
+        marginRight: 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,
+    },
+    actionRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalS,
+        justifyContent: "flex-end",
+        flexShrink: 0,
+    },
+    errorText: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: "12px",
+        flexShrink: 0,
+    },
+    emptyMsg: {
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+        color: tokens.colorNeutralForeground3,
+        fontSize: "12px",
+    },
+    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: "11px",
+        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: "12px",
+    },
+    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: "12px",
+        lineHeight: "13px",
+        fontFamily: "monospace",
+        cursor: "pointer",
+        whiteSpace: "pre",
+    },
+    nodeRowSelected: {
+        backgroundColor: tokens.colorBrandBackground2,
+        fontWeight: "bold",
+    },
+});
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type AvatarEdit = {
+    id: string | null;
+    originalName: string | null;
+    name: string;
+    sourceType: "url" | "file";
+    url: string;
+    files: File[];
+    rootNodeName: string;
+    namingScheme: string;
+    restPoseJson: string;
+};
+
+type NodeInfo = {
+    name: string;
+    depth: 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).
+ */
+function BuildNodeList(node: Node, depth: number, list: NodeInfo[], ancestorContinues: boolean[]): 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 ? "└─ " : "├─ ";
+    }
+    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 node names
+ * appear in each scheme. Returns the scheme with the most matches
+ * (minimum 10 required), or null if none qualify.
+ */
+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 ────────────────────────────────────────────────────────────────
+
+export const AvatarsPanel: FunctionComponent<{
+    avatarManager: AvatarManager;
+    namingSchemeManager: NamingSchemeManager;
+    onMutate: () => void;
+    onEditingChange: (editing: boolean) => void;
+}> = ({ avatarManager, namingSchemeManager, 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();
+    const schemeNames = namingSchemeManager.getAllSchemeNames();
+
+    // ─── Load preview ─────────────────────────────────────────────────────
+
+    const loadPreview = useCallback(
+        async (sourceType: "url" | "file", url: string, files: File[]) => {
+            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;
+                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-select first node and try to detect the naming scheme from loaded nodes
+                if (nodes.length > 0) {
+                    const nodeNames = new Set(nodes.map((n) => n.name));
+                    let 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;
+                        }
+                        return {
+                            ...prev,
+                            rootNodeName: prev.rootNodeName || nodes[0].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,
+            originalName: null,
+            name: "",
+            sourceType: "url",
+            url: "",
+            files: [],
+            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: [],
+                rootNodeName: avatar.rootNodeName,
+                namingScheme: avatar.namingScheme,
+                restPoseJson: avatar.restPoseUpdate ? JSON.stringify(avatar.restPoseUpdate, undefined, 2) : "",
+            });
+            setError(null);
+            setNodeList([]);
+            // Auto-load preview
+            if (avatar.source === "url" && avatar.url) {
+                void loadPreview("url", avatar.url, []);
+            } 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);
+                }
+            }
+        },
+        [setEditingWithNotify, loadPreview, avatarManager]
+    );
+
+    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: import("./data").RestPoseDataUpdate | undefined;
+            if (editing.restPoseJson.trim()) {
+                try {
+                    restPoseUpdate = JSON.parse(editing.restPoseJson);
+                } catch {
+                    setError("Invalid JSON in rest pose data.");
+                    return;
+                }
+            }
+
+            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,
+                restPoseUpdate,
+            };
+
+            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);
+            }
+        },
+        [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);
+            }
+        },
+        [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" onClick={() => setConfirmDelete(null)}>
+                                Cancel
+                            </Button>
+                            <Button appearance="primary" onClick={handleConfirmDelete}>
+                                Delete
+                            </Button>
+                        </DialogActions>
+                    </DialogBody>
+                </DialogSurface>
+            </Dialog>
+
+            <div className={classes.listHeader}>
+                <div className={classes.listButtons}>
+                    <Button size="small" icon={<Add20Regular />} onClick={startAdd} disabled={!!editing}>
+                        Add
+                    </Button>
+                </div>
+            </div>
+            <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
+                {allAvatars.length === 0 && <span className={classes.emptyMsg}>No custom avatars defined.</span>}
+                {allAvatars.map((avatar) => (
+                    <div key={avatar.id} className={classes.listRow}>
+                        <span className={classes.listRowName}>{avatar.name}</span>
+                        <span className={classes.listRowMeta}>{avatar.source === "url" ? "URL" : "File"}</span>
+                        <span className={classes.listRowMeta}>{avatar.namingScheme}</span>
+                        <Button size="small" appearance="transparent" icon={<Edit20Regular />} title="Edit" disabled={!!editing} onClick={() => startEdit(avatar)} />
+                        <Button size="small" appearance="transparent" icon={<Delete20Regular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(avatar)} />
+                    </div>
+                ))}
+            </div>
+
+            {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>
+                        <Input className={classes.formControl} size="small" value={editing.name} onChange={(_, d) => setEditing({ ...editing, name: d.value })} />
+                    </div>
+
+                    {/* URL input — loads on Enter or blur */}
+                    <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, []);
+                                }
+                            }}
+                            input={{
+                                onBlur: () => {
+                                    if (editing.url.trim() && editing.sourceType !== "file") {
+                                        void loadPreview("url", editing.url, []);
+                                    }
+                                },
+                            }}
+                        />
+                    </div>
+
+                    {/* Drop zone — always visible */}
+                    <div
+                        className={mergeClasses(classes.dropZone, isDragOver ? classes.dropZoneActive : undefined)}
+                        onDragOver={handleDragOver}
+                        onDragLeave={handleDragLeave}
+                        onDrop={handleDrop}
+                        onClick={() => fileInputRef.current?.click()}
+                    >
+                        <ArrowUpload20Regular />
+                        <div>Drop file(s) here or click to browse</div>
+                        <input ref={fileInputRef} type="file" multiple style={{ display: "none" }} onChange={handleFileInput} />
+                    </div>
+
+                    {/* Loading indicator */}
+                    {isLoading && (
+                        <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>
+                            Loading… <Spinner size="tiny" style={{ display: "inline-block" }} />
+                        </Caption1>
+                    )}
+
+                    {/* Node tree */}
+                    {nodeList.length > 0 && (
+                        <>
+                            <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>Select the root node of the avatar ({nodeList.length} nodes found):</Caption1>
+                            <div className={classes.nodeTree}>
+                                {nodeList.map((node) => (
+                                    <div
+                                        key={node.name}
+                                        className={mergeClasses(classes.nodeRow, editing.rootNodeName === node.name ? classes.nodeRowSelected : undefined)}
+                                        onClick={() => setEditing({ ...editing, rootNodeName: node.name })}
+                                    >
+                                        {node.prefix + node.name}
+                                    </div>
+                                ))}
+                            </div>
+                        </>
+                    )}
+
+                    {/* Naming scheme */}
+                    <div className={classes.formRow}>
+                        <Label className={classes.formLabel}>Naming scheme</Label>
+                        <Select className={classes.formControl} size="small" value={editing.namingScheme} onChange={(_, d) => setEditing({ ...editing, namingScheme: d.value })}>
+                            {schemeNames.map((n) => (
+                                <option key={n} value={n}>
+                                    {n}
+                                </option>
+                            ))}
+                        </Select>
+                    </div>
+
+                    {/* Rest pose data */}
+                    <div className={classes.formRow} style={{ alignItems: "flex-start" }}>
+                        <Label className={classes.formLabel} style={{ paddingTop: "6px" }}>
+                            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={(e) => setEditing({ ...editing, restPoseJson: e.target.value })}
+                        />
+                    </div>
+
+                    {error && <span className={classes.errorText}>{error}</span>}
+                    <div className={classes.actionRow}>
+                        <Button size="small" appearance="secondary" onClick={handleCancel}>
+                            Cancel
+                        </Button>
+                        <Button size="small" appearance="primary" onClick={handleSave}>
+                            Save
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
index 74146502f7a..12c887d92c8 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
@@ -1,25 +1,7 @@
-import { Avatars, Animations } from "./data";
+import { Logger } from "core/Misc/logger";
 
 let CurrentSnippetToken = "";
 
-export function FindAvatarFromPath(path: string): string {
-    for (const name in Avatars) {
-        if (Avatars[name].path === path) {
-            return name;
-        }
-    }
-    return "";
-}
-
-export function FindAnimationFromPath(path: string): string {
-    for (const name in Animations) {
-        if (Animations[name].path === path) {
-            return name;
-        }
-    }
-    return "";
-}
-
 export function DistancePointToLine(
     point: { x: number; y: number; z: number },
     origin: { x: number; y: number; z: number },
@@ -48,6 +30,7 @@ function PackSnippetData(code: string) {
         language: "TS",
         entry: "index.ts",
         imports: {},
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         files: { "index.ts": code },
     };
     const codeToSave = JSON.stringify(v2);
@@ -88,7 +71,7 @@ export function SaveSnippet(code: string) {
                 }
                 window.open(newUrl, "_blank");
             } else {
-                console.error("Unable to save your code. It may be too long.");
+                Logger.Error("Unable to save your code. It may be too long.");
             }
         }
     };
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
index d534ad5addb..74b5321cc14 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
@@ -1,4 +1,4 @@
-const StorageKey = "BabylonInspector_NamingSchemeManager";
+const StorageKey = "BabylonInspector_AnimRetargeting_NamingSchemeManager";
 
 /**
  * A bone/node entry in a naming scheme.
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManagerDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
similarity index 75%
rename from packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManagerDialog.tsx
rename to packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index d369a01d246..c952a9334fc 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManagerDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -1,5 +1,7 @@
 import type { FunctionComponent } from "react";
 import type { NamingSchemeManager, BoneEntry } from "./namingSchemeManager";
+import type { AvatarManager, StoredAvatar } from "./avatarManager";
+import type { AnimationManager, StoredAnimation } from "./animationManager";
 
 import { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import {
@@ -20,8 +22,15 @@ import {
     tokens,
     Body1Strong,
     Caption1,
+    Spinner,
 } from "@fluentui/react-components";
 import { Add20Regular, Delete20Regular, Edit20Regular, ArrowCounterclockwise20Regular, ArrowBidirectionalUpDown20Regular, Dismiss20Regular } 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 ───────────────────────────────────────────────────────────────────
 
@@ -214,7 +223,7 @@ const useStyles = makeStyles({
 });
 
 // Session-only size persistence: survives dialog close/reopen but not page reload.
-let _savedDialogSize: { width: number; height: number } | null = null;
+let SavedDialogSize: { width: number; height: number } | null = null;
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -231,17 +240,58 @@ type RemappingEdit = {
     isNew: boolean;
 };
 
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Loads a stored avatar or animation into a scene (handles both URL and file sources). */
+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 {
+        throw new Error("No URL or files available for this entry.");
+    }
+}
+
 // ─── Schemes Panel ────────────────────────────────────────────────────────────
 
 const SchemesPanel: FunctionComponent<{
     manager: NamingSchemeManager;
+    avatarManager: AvatarManager;
+    animationManager: AnimationManager;
     onMutate: () => void;
     onEditingChange: (editing: boolean) => void;
-}> = ({ manager, onMutate, onEditingChange }) => {
+}> = ({ manager, avatarManager, animationManager, 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()) {
+            options.push({ label: `Animation: ${an.name}`, value: `animation:${an.name}` });
+        }
+        return options;
+    }, [avatarManager, animationManager]);
 
     const setEditingWithNotify = useCallback(
         (value: SchemeEdit | null) => {
@@ -268,9 +318,27 @@ const SchemesPanel: FunctionComponent<{
         [manager, setEditingWithNotify]
     );
 
-    const handleDelete = useCallback((name: string) => {
-        setConfirmDelete(name);
-    }, []);
+    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) {
+                users.push(`animation "${a.name}"`);
+            }
+            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) {
@@ -292,6 +360,89 @@ const SchemesPanel: FunctionComponent<{
         }
     }, [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.`);
+                    }
+                    await LoadIntoScene(scene, avatar, avatarManager);
+
+                    // Extract bone names from the first skeleton, with indentation for hierarchy
+                    const skeleton = scene.skeletons[0];
+                    if (!skeleton) {
+                        throw new Error("No skeleton found in this avatar.");
+                    }
+                    const lines: string[] = [];
+                    for (const bone of skeleton.bones) {
+                        let depth = 0;
+                        let p = bone.parent;
+                        while (p) {
+                            depth++;
+                            p = p.parent;
+                        }
+                        lines.push("  ".repeat(depth) + bone.name);
+                    }
+                    setEditing({ ...editing, namesText: lines.join("\n") });
+                } else {
+                    const animation = animationManager.getAnimation(name);
+                    if (!animation) {
+                        throw new Error(`Animation "${name}" not found.`);
+                    }
+                    await LoadIntoScene(scene, animation, animationManager);
+
+                    // Extract target names from animation groups, with hierarchy indentation
+                    // Collect unique targets first, then sort by hierarchy
+                    const targetMap = new Map<string, import("core/Meshes/transformNode").TransformNode>();
+                    for (const group of scene.animationGroups) {
+                        for (const ta of group.targetedAnimations) {
+                            const target = ta.target as import("core/Meshes/transformNode").TransformNode;
+                            if (target?.name && target.parent !== undefined) {
+                                targetMap.set(target.name, target);
+                            }
+                        }
+                    }
+                    if (targetMap.size === 0) {
+                        throw new Error("No animation targets found.");
+                    }
+                    const lines: string[] = [];
+                    for (const [nodeName, node] of targetMap) {
+                        let depth = 0;
+                        let p = node.parent;
+                        while (p) {
+                            depth++;
+                            p = p.parent;
+                        }
+                        lines.push("  ".repeat(depth) + nodeName);
+                    }
+                    setEditing({ ...editing, namesText: lines.join("\n") });
+                }
+            } catch (e) {
+                setError(e instanceof Error ? e.message : String(e));
+            } finally {
+                engine?.dispose();
+                setIsPopulating(false);
+            }
+        },
+        [editing, avatarManager, animationManager]
+    );
+
     const handleSave = useCallback(() => {
         if (!editing) {
             return;
@@ -390,6 +541,7 @@ const SchemesPanel: FunctionComponent<{
                     );
                 })}
             </div>
+            {!editing && error && <span className={classes.errorText}>{error}</span>}
             {editing && (
                 <div className={classes.editSectionFlex}>
                     <Body1Strong>{editing.originalName ? `Editing "${editing.originalName}"` : "New Scheme"}</Body1Strong>
@@ -397,6 +549,26 @@ const SchemesPanel: FunctionComponent<{
                         <Label className={classes.formLabel}>Name</Label>
                         <Input className={classes.formControl} value={editing.name} onChange={(_, d) => setEditing({ ...editing, name: d.value })} />
                     </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 style={{ display: "flex", flex: 1, minHeight: 0, gap: tokens.spacingHorizontalS }}>
                         <Label className={classes.formLabel} style={{ paddingTop: "6px", flexShrink: 0 }}>
                             Bone names
@@ -424,10 +596,12 @@ const SchemesPanel: FunctionComponent<{
 };
 
 // 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> {
+function ComputeFaultyBones(map: Map<string, string>): Set<string> {
     const targetCount = new Map<string, string[]>();
     for (const [from, to] of map) {
-        if (to === "") continue;
+        if (to === "") {
+            continue;
+        }
         const list = targetCount.get(to) ?? [];
         list.push(from);
         targetCount.set(to, list);
@@ -435,7 +609,9 @@ function computeFaultyBones(map: Map<string, string>): Set<string> {
     const faulty = new Set<string>();
     for (const froms of targetCount.values()) {
         if (froms.length > 1) {
-            for (const f of froms) faulty.add(f);
+            for (const f of froms) {
+                faulty.add(f);
+            }
         }
     }
     return faulty;
@@ -481,7 +657,7 @@ const RemappingsPanel: FunctionComponent<{
             const map = manager.getRemapping(fromScheme, toScheme) ?? new Map();
             setEditingWithNotify({ fromScheme, toScheme, map, isNew: false });
             setError(null);
-            setFaultyBones(computeFaultyBones(map));
+            setFaultyBones(ComputeFaultyBones(map));
         },
         [manager, setEditingWithNotify]
     );
@@ -556,7 +732,7 @@ const RemappingsPanel: FunctionComponent<{
             const newMap = new Map(editing.map);
             newMap.set(fromBone, toBone);
             setEditing({ ...editing, map: newMap });
-            const faulty = computeFaultyBones(newMap);
+            const faulty = ComputeFaultyBones(newMap);
             setFaultyBones(faulty);
             if (faulty.size === 0) {
                 setError(null);
@@ -592,17 +768,9 @@ const RemappingsPanel: FunctionComponent<{
         setFaultyBones(new Set());
     }, [setEditingWithNotify]);
 
-    const fromSchemeEntries = useMemo(
-        () => (editing ? (manager.getNamingScheme(editing.fromScheme) ?? []) : []),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [editing?.fromScheme, manager]
-    );
+    const fromSchemeEntries = useMemo(() => (editing ? (manager.getNamingScheme(editing.fromScheme) ?? []) : []), [editing?.fromScheme, manager]);
 
-    const toSchemeEntries = useMemo(
-        () => (editing ? (manager.getNamingScheme(editing.toScheme) ?? []) : []),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [editing?.toScheme, 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
@@ -742,15 +910,17 @@ const RemappingsPanel: FunctionComponent<{
 
 // ─── Main Dialog ──────────────────────────────────────────────────────────────
 
-export type NamingSchemeManagerDialogProps = {
+export type RetargetingConfigDialogProps = {
     manager: NamingSchemeManager;
+    avatarManager: AvatarManager;
+    animationManager: AnimationManager;
     open: boolean;
     onClose: () => void;
 };
 
-export const NamingSchemeManagerDialog: FunctionComponent<NamingSchemeManagerDialogProps> = ({ manager, open, onClose }) => {
+export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogProps> = ({ manager, avatarManager, animationManager, open, onClose }) => {
     const classes = useStyles();
-    const [activeTab, setActiveTab] = useState<"schemes" | "remappings">("schemes");
+    const [activeTab, setActiveTab] = useState<"avatars" | "animations" | "schemes" | "remappings">("avatars");
     const [version, setVersion] = useState(0);
     const [isEditing, setIsEditing] = useState(false);
     const [confirmClose, setConfirmClose] = useState(false);
@@ -771,7 +941,7 @@ export const NamingSchemeManagerDialog: FunctionComponent<NamingSchemeManagerDia
             return;
         }
         const observer = new ResizeObserver(() => {
-            _savedDialogSize = { width: el.offsetWidth, height: el.offsetHeight };
+            SavedDialogSize = { width: el.offsetWidth, height: el.offsetHeight };
         });
         observer.observe(el);
         return () => observer.disconnect();
@@ -800,11 +970,11 @@ export const NamingSchemeManagerDialog: FunctionComponent<NamingSchemeManagerDia
             <DialogSurface
                 ref={surfaceRef as React.Ref<HTMLDivElement>}
                 className={classes.surface}
-                style={_savedDialogSize ? { width: `${_savedDialogSize.width}px`, height: `${_savedDialogSize.height}px` } : undefined}
+                style={SavedDialogSize ? { width: `${SavedDialogSize.width}px`, height: `${SavedDialogSize.height}px` } : undefined}
             >
                 <DialogBody className={classes.body}>
                     <div className={classes.titleRow}>
-                        <DialogTitle action={null}>Naming Scheme Manager</DialogTitle>
+                        <DialogTitle action={null}>Retargeting Configuration</DialogTitle>
                         <Button appearance="subtle" icon={<Dismiss20Regular />} onClick={handleClose} title="Close" aria-label="Close" />
                     </div>
                     {/* Confirm close when edits are pending */}
@@ -842,10 +1012,16 @@ export const NamingSchemeManagerDialog: FunctionComponent<NamingSchemeManagerDia
                         selectedValue={activeTab}
                         onTabSelect={(_, d) => {
                             if (!isEditing) {
-                                setActiveTab(d.value as "schemes" | "remappings");
+                                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>
@@ -854,8 +1030,18 @@ export const NamingSchemeManagerDialog: FunctionComponent<NamingSchemeManagerDia
                         </Tab>
                     </TabList>
                     <DialogContent className={classes.content}>
-                        {activeTab === "schemes" ? (
-                            <SchemesPanel manager={manager} onMutate={onMutate} onEditingChange={onEditingChange} />
+                        {activeTab === "avatars" ? (
+                            <AvatarsPanel avatarManager={avatarManager} namingSchemeManager={manager} onMutate={onMutate} onEditingChange={onEditingChange} />
+                        ) : activeTab === "animations" ? (
+                            <AnimationsPanel animationManager={animationManager} namingSchemeManager={manager} onMutate={onMutate} onEditingChange={onEditingChange} />
+                        ) : activeTab === "schemes" ? (
+                            <SchemesPanel
+                                manager={manager}
+                                avatarManager={avatarManager}
+                                animationManager={animationManager}
+                                onMutate={onMutate}
+                                onEditingChange={onEditingChange}
+                            />
                         ) : (
                             <RemappingsPanel manager={manager} onMutate={onMutate} onEditingChange={onEditingChange} />
                         )}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
index b095fcd8a39..a8910f17a47 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -10,6 +10,7 @@ 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";
@@ -17,21 +18,20 @@ import { Scene } from "core/scene";
 import { Avatar } from "./avatar";
 import { AnimationSource } from "./animation";
 import { HTMLConsole } from "./htmlConsole";
-import { Avatars, Animations } from "./data";
 import type { NamingSchemeManager } from "./namingSchemeManager";
-import { FindAvatarFromPath, FindAnimationFromPath, SaveSnippet, TestPlaygroundCode } from "./helperFunctions";
+import type { AvatarManager } from "./avatarManager";
+import type { AnimationManager } from "./animationManager";
+import { SaveSnippet, TestPlaygroundCode } from "./helperFunctions";
 
 export type { GizmoType } from "./avatar";
 
 export interface IRetargetingParams {
     // Avatar
-    avatarPath: string;
-    avatarUpdateRestPose: boolean;
+    avatarName: string;
     avatarRescaleAvatar: boolean;
     avatarAnimSpeed: number;
     // Animation
-    animationPath: string;
-    animationUpdateRestPose: boolean;
+    animationName: string;
     animationSpeed: number;
     // Retarget
     fixAnimations: boolean;
@@ -61,6 +61,8 @@ export class RetargetingSceneManager {
 
     private _retargetOptions: Nullable<IRetargetOptions> = null;
     private _lastRetargetParams: Nullable<IRetargetingParams> = null;
+    private _lastAvatarRestPose: import("./data").RestPoseDataUpdate | undefined;
+    private _lastAnimationRestPose: import("./data").RestPoseDataUpdate | undefined;
     private _isRetargeted = false;
 
     public readonly onRetargetDoneObservable = new Observable<void>();
@@ -165,25 +167,27 @@ export class RetargetingSceneManager {
         this._engine.runRenderLoop(() => this._scene?.render());
     }
 
-    public retarget(params: IRetargetingParams, namingSchemeManager: NamingSchemeManager): void {
+    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.getAnimation(params.animationName);
+        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();
 
-        const avatarName = FindAvatarFromPath(params.avatarPath);
-        const animationName = FindAnimationFromPath(params.animationPath);
-        const sourceScheme = Animations[animationName]?.namingScheme;
-        const targetScheme = Avatars[avatarName]?.namingScheme;
-        if (!sourceScheme || !targetScheme) {
-            return;
-        }
-
         this._retargetOptions = {
             animationGroupName: "avatar",
             fixAnimations: params.fixAnimations,
@@ -207,16 +211,39 @@ export class RetargetingSceneManager {
         this.onRetargetDoneObservable.notifyObservers();
     }
 
-    public exportToPlayground(): void {
+    public async exportToPlaygroundAsync(avatarManager: AvatarManager, animationManager: AnimationManager): Promise<boolean> {
         if (!this._isRetargeted || !this._retargetOptions || !this._lastRetargetParams || !this.avatar || !this.animationSource) {
-            return;
+            return false;
         }
 
-        const epsilon = 1e-4;
         const params = this._lastRetargetParams;
+        const storedAvatar = avatarManager.getAvatar(params.avatarName);
+        const storedAnimation = animationManager.getAnimation(params.animationName);
+        if (!storedAvatar || !storedAnimation) {
+            return false;
+        }
 
-        const boneTransformations = this.avatar.buildExportData(params.avatarPath, params.avatarUpdateRestPose, epsilon);
-        const animationTransformNodes = this.animationSource.buildExportData(params.animationPath, params.animationUpdateRestPose, epsilon);
+        // 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) {
+            avatarUrl.length; // ensure avatar is resolved first
+            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 epsilon = 1e-4;
+
+        const boneTransformations = this.avatar.buildExportData(avatarUrl, true, epsilon, this._lastAvatarRestPose);
+        const animationTransformNodes = this.animationSource.buildExportData(animationUrl, true, epsilon, this._lastAnimationRestPose);
 
         const mapNodes: string[] = [];
         const map = this._retargetOptions.mapNodeNames;
@@ -227,14 +254,39 @@ export class RetargetingSceneManager {
         }
 
         const optionsCopy = { ...this._retargetOptions, mapNodeNames: undefined };
-        const code = TestPlaygroundCode.replace("%avatarPath%", params.avatarPath.replace(/"/g, '\\"'))
-            .replace("%animationPath%", params.animationPath.replace(/"/g, '\\"'))
+        const code = TestPlaygroundCode.replace("%avatarPath%", avatarUrl.replace(/"/g, '\\"'))
+            .replace("%animationPath%", animationUrl.replace(/"/g, '\\"'))
             .replace("%retargetOptions%", JSON.stringify(optionsCopy, undefined, 8))
             .replace("%avatarRestPoseUpdate%", JSON.stringify(boneTransformations))
             .replace("%animationRestPoseUpdate%", JSON.stringify(animationTransformNodes))
             .replace("%nameRemapping%", JSON.stringify(mapNodes));
 
         SaveSnippet(code);
+        return true;
+    }
+
+    /** Reads files from IndexedDB, finds the main scene file, and converts it to a base64 data URL. */
+    private async _fileToDataUrlAsync(manager: { getFilesAsync(id: string, fileNames: string[]): Promise<File[]> }, id: string, fileNames: string[]): Promise<string> {
+        const files = await manager.getFilesAsync(id, fileNames);
+        // Find the main scene file (the one with a registered loader plugin)
+        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 "";
+        }
+        const buffer = await mainFile.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 resize(): void {

From 007299891558b17504f269177ff8cf54668ad144 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Wed, 18 Mar 2026 11:15:35 +0100
Subject: [PATCH 05/30] Don't crash when trying to store a string too big for
 the local storage

---
 packages/tools/playground/src/tools/utilities.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/tools/playground/src/tools/utilities.ts b/packages/tools/playground/src/tools/utilities.ts
index 7e292d443b8..4cb68f6bb3e 100644
--- a/packages/tools/playground/src/tools/utilities.ts
+++ b/packages/tools/playground/src/tools/utilities.ts
@@ -1,3 +1,4 @@
+import { Logger } from "@dev/core";
 import type { GlobalState } from "../globalState";
 
 // One-shot session flag for user-initiated engine reloads.
@@ -57,7 +58,11 @@ export class Utilities {
 
     public static StoreStringToStore(key: string, value: string, useSession = false): void {
         const storage = useSession ? sessionStorage : localStorage;
-        storage.setItem(key, value);
+        try {
+            storage.setItem(key, value);
+        } catch (e) {
+            Logger.Warn(`Could not store ${key} in ${useSession ? "sessionStorage" : "localStorage"}. Error: ${(e as Error)?.message}`);
+        }
     }
 
     public static StoreBoolToStore(key: string, value: boolean): void {

From 53db1b1ce0f387c2ab029bfe0340dee2d3db1b54 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Wed, 18 Mar 2026 18:45:19 +0100
Subject: [PATCH 06/30] More changes

---
 .../animationRetargeting/animation.ts         |  24 +-
 .../animationRetargeting/animationManager.ts  | 184 +++++++++++++++-
 .../animationRetargetingExtension.tsx         |  14 +-
 .../animationRetargetingPanel.tsx             | 205 ++++++++++++++----
 .../animationRetargeting/animationsPanel.tsx  | 199 +++++++++++------
 .../extensions/animationRetargeting/avatar.ts |   4 +
 .../animationRetargeting/avatarManager.ts     | 102 +++++++++
 .../animationRetargeting/avatarsPanel.tsx     |  46 ++--
 .../animationRetargeting/htmlConsole.ts       |   5 +
 .../namingSchemeManager.ts                    |  64 ++++++
 .../retargetingConfigDialog.tsx               | 202 ++++++++++++++---
 .../retargetingSceneManager.ts                |   4 +-
 12 files changed, 887 insertions(+), 166 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
index d64ef8558cd..618f35a7a6b 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -82,6 +82,10 @@ export class AnimationSource {
         await this._loadFileAsync(path, restPoseUpdate);
     }
 
+    public clearScene(): void {
+        this._cleanScene();
+    }
+
     /** Returns a sorted list of transform node names targeted by the animation group. */
     public getTransformNodeNames(): string[] {
         if (!this._animationGroup || !this._rootNode) {
@@ -368,7 +372,7 @@ export class AnimationSource {
                 (mesh as Mesh).dispose();
             });
 
-        // Find the hips/pelvis node to use as skeleton root
+        // Find the hips/pelvis node to determine the skeleton root
         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;
@@ -379,7 +383,12 @@ export class AnimationSource {
         if (!hipsNode) {
             hipsNode = this._rootNode.getChildTransformNodes(false, (node) => node.name.toLowerCase().indexOf("pelvis") >= 0)[0] ?? null;
         }
-        hipsNode = hipsNode ?? this._rootNode;
+        // Use the hips' parent as skeleton root (so siblings like Spine are included),
+        // but fall back to hips itself or the root node.
+        let skeletonRoot: TransformNode = hipsNode ?? this._rootNode;
+        if (hipsNode && hipsNode.parent && hipsNode.parent !== this._rootNode) {
+            skeletonRoot = hipsNode.parent as TransformNode;
+        }
 
         // Create a skeleton + visualization mesh from the transform node hierarchy
         const meshOptions: { name?: string; boneMeshSize?: number; createMesh?: boolean; mesh?: Mesh } = {
@@ -388,14 +397,15 @@ export class AnimationSource {
             createMesh: true,
         };
 
-        const animSkeleton = CreateSkeletonFromTransformNodeHierarchy(hipsNode, this._scene, meshOptions);
+        const animSkeleton = CreateSkeletonFromTransformNodeHierarchy(skeletonRoot, this._scene, meshOptions);
         const meshAnim = meshOptions.mesh!;
         meshAnim.layerMask = ShadowLayerMask;
         this._shadowGenerator.addShadowCaster(meshAnim);
 
-        this._selectedTransformNode = hipsNode;
-        this._gizmoManager.attachToNode(hipsNode);
-        this.onGizmoNodeSelectedObservable.notifyObservers(hipsNode.name);
+        const initialNode = hipsNode ?? skeletonRoot;
+        this._selectedTransformNode = initialNode;
+        this._gizmoManager.attachToNode(initialNode);
+        this.onGizmoNodeSelectedObservable.notifyObservers(initialNode.name);
 
         const meshAnimExtendSize = meshAnim.getBoundingInfo().boundingBox.extendSizeWorld;
 
@@ -422,7 +432,7 @@ export class AnimationSource {
         this._gizmoSelectedNode.material = mat;
         this._gizmoSelectedNode.layerMask = ShadowLayerMask;
         this._gizmoSelectedNode.renderingGroupId = 3;
-        this._gizmoSelectedNode.position.copyFrom(hipsNode.absolutePosition);
+        this._gizmoSelectedNode.position.copyFrom(initialNode.absolutePosition);
 
         if (restPoseUpdate && restPoseUpdate.length > 0) {
             this._applyRestPoseUpdate(restPoseUpdate);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
index c9e6b3d8849..1e6ac62b851 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -6,15 +6,27 @@ 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";
     url?: string;
     fileNames?: string[];
     namingScheme: string;
-    animationGroupName: string;
+    /** One entry per animation group in the file. */
+    animations: AnimationGroupMapping[];
     restPoseUpdate?: RestPoseDataUpdate;
 };
 
@@ -28,6 +40,27 @@ function GenerateId(): string {
     return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
+function BlobToBase64(blob: Blob): Promise<string> {
+    return 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> {
@@ -120,14 +153,53 @@ export class AnimationManager {
         return this._animations;
     }
 
-    public getAnimation(name: string): StoredAnimation | undefined {
-        return this._animations.find((a) => a.name === name);
+    /** Returns all non-empty display names across all stored animation files. */
+    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. */
+    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). */
+    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.
@@ -194,6 +266,90 @@ export class AnimationManager {
         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.
+     */
+    public async exportDataAsync(): Promise<Array<StoredAnimation & { fileData?: Record<string, string> }>> {
+        const result: Array<StoredAnimation & { fileData?: Record<string, string> }> = [];
+        for (const animation of this._animations) {
+            const entry: StoredAnimation & { fileData?: Record<string, string> } = { ...animation };
+            if (animation.source === "file" && animation.fileNames?.length) {
+                const fileData: Record<string, string> = {};
+                const files = await this.getFilesAsync(animation.id, animation.fileNames);
+                for (const file of files) {
+                    fileData[file.name] = await BlobToBase64(file);
+                }
+                entry.fileData = fileData;
+            }
+            result.push(entry);
+        }
+        return result;
+    }
+
+    /**
+     * Imports animations, including restoring file-based entries to IndexedDB from base64 data.
+     */
+    public async importDataAsync(animations: Array<StoredAnimation & { fileData?: Record<string, string> }>, mode: "replace" | "append"): Promise<string[]> {
+        const skipped: string[] = [];
+
+        if (mode === "replace") {
+            this._animations = [];
+        }
+
+        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 fileNames: string[] = [];
+                    for (const [fileName, base64] of Object.entries(fileData)) {
+                        const blob = Base64ToBlob(base64);
+                        await IdbPut(`animation:${newId}/${fileName}`, blob);
+                        fileNames.push(fileName);
+                    }
+                    this._animations[this._animations.length - 1].fileNames = fileNames;
+                }
+            }
+        }
+
+        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 }[] = [
+            { name: "Rumba Dancing", file: "Rumba Dancing.glb", scheme: "Mixamo", displayName: "Rumba Dancing" },
+            { name: "Hip Hop Dancing", file: "Hip Hop Dancing.glb", scheme: "Mixamo", displayName: "Hip Hop Dancing" },
+            { name: "Sitting Clap", file: "Sitting Clap.glb", scheme: "Mixamo", displayName: "Sitting Clap" },
+            { name: "Walking", file: "Walking.glb", scheme: "Mixamo", displayName: "Walking" },
+            { name: "Catwalk Walking", file: "Catwalk Walking.glb", scheme: "Mixamo", displayName: "Catwalk Walking" },
+            { name: "Praying", file: "Praying.glb", scheme: "Mixamo", displayName: "Praying" },
+            { name: "Mousey Walking", file: "Mousey_walking.glb", scheme: "Mixamo", displayName: "Mousey Walking" },
+            { name: "Hip Hop", file: "hiphop.glb", scheme: "Mixamo No Namespace", displayName: "Hip Hop" },
+        ];
+        for (const d of defaults) {
+            this.addAnimation({
+                id: "",
+                name: d.name,
+                source: "url",
+                url: baseUrl + d.file,
+                namingScheme: d.scheme,
+                animations: [{ index: 0, groupName: d.displayName, displayName: d.displayName }],
+            });
+        }
+    }
+
     // ─── Private ──────────────────────────────────────────────────────────────
 
     private _loadFromStorage(): void {
@@ -203,7 +359,27 @@ export class AnimationManager {
                 return;
             }
             const data: SerializedData = JSON.parse(raw);
-            this._animations = data.animations ?? [];
+            // 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";
+                }
+                return entry as StoredAnimation;
+            });
         } catch {
             this._animations = [];
         }
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index b08574e4f47..35a7e05e20f 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -44,11 +44,23 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         // Animation manager — persists across extension lifetime via localStorage + IndexedDB
         const animationManager = new AnimationManager();
 
+        // 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;
         // Persists all panel UI state across remounts (e.g. when the panel is docked elsewhere)
-        const persistedPanelState: PanelStateStore = { ...DefaultPanelState };
+        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 setEnabled(enabled: boolean): void {
             if (enabled === isEnabled) {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index 8f1561b7f5e..31024364738 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -3,7 +3,8 @@ import type { Observable } from "core/Misc/observable";
 import { FilesInputStore } from "core/Misc/filesInputStore";
 import { SceneLoader } from "core/Loading/sceneLoader";
 import type { Transform } from "../../components/properties/transformProperties";
-import { makeStyles, tokens, Body1Strong } from "@fluentui/react-components";
+import { makeStyles, tokens, Body1Strong, Button } from "@fluentui/react-components";
+import { ArrowClockwise20Regular } from "@fluentui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
 import { CheckboxPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/checkboxPropertyLine";
@@ -31,7 +32,7 @@ function BuildFilteredBoneList(
     avatarManager: AvatarManager,
     animationManager: AnimationManager
 ): string[] {
-    const sourceScheme = animationManager.getAnimation(animName)?.namingScheme;
+    const sourceScheme = animationManager.getByDisplayName(animName)?.entry.namingScheme;
     const targetScheme = avatarManager.getAvatar(avatarName)?.namingScheme;
     if (!sourceScheme || !targetScheme) {
         return names;
@@ -196,6 +197,8 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
 }) => {
     const classes = useStyles();
     const managerRef = useRef<RetargetingSceneManager | null>(null);
+    const handleLoadAvatarRef = useRef<(name: string, rescale: boolean) => void>(() => {});
+    const handleLoadAnimationRef = useRef<(name: string) => void>(() => {});
     const [isEnabled, setIsEnabled] = useState(initialIsEnabled);
     const [, forceUpdate] = useState(0);
 
@@ -235,7 +238,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
 
     // Dropdown options derived from managers — refreshed when config dialog closes
     const [avatarOptions, setAvatarOptions] = useState(() => avatarManager.getAllAvatars().map((a) => ({ label: a.name, value: a.name })));
-    const [animationOptions, setAnimationOptions] = useState(() => animationManager.getAllAnimations().map((a) => ({ label: a.name, value: a.name })));
+    const [animationOptions, setAnimationOptions] = useState(() => animationManager.getAllDisplayNames().map((n) => ({ label: n, value: n })));
 
     // Selected bone/node transforms for the Properties section
     const [avatarGizmoSelectedTransform, setAvatarGizmoSelectedTransform] = useState<Transform | null>(null);
@@ -323,19 +326,42 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     useEffect(() => {
         const obs = onConfigChangedObs.add(() => {
             const newAvatarOptions = avatarManager.getAllAvatars().map((a) => ({ label: a.name, value: a.name }));
-            const newAnimationOptions = animationManager.getAllAnimations().map((a) => ({ label: a.name, value: a.name }));
+            const newAnimationOptions = animationManager.getAllDisplayNames().map((n) => ({ label: n, value: n }));
             setAvatarOptions(newAvatarOptions);
             setAnimationOptions(newAnimationOptions);
 
             const s = stateSnapshotRef.current;
             if (s.avatarName && !avatarManager.getAvatar(s.avatarName)) {
-                setAvatarName("");
-                setIsAvatarLoaded(false);
+                const firstAvatar = newAvatarOptions.length > 0 ? newAvatarOptions[0].value : "";
+                setAvatarName(firstAvatar);
+                if (firstAvatar) {
+                    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.getAnimation(s.animationName)) {
-                setAnimationName("");
-                setIsAnimLoaded(false);
+            if (s.animationName && !animationManager.getByDisplayName(s.animationName)) {
+                const firstAnim = newAnimationOptions.length > 0 ? newAnimationOptions[0].value : "";
+                setAnimationName(firstAnim);
+                if (firstAnim) {
+                    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);
             }
         });
@@ -457,7 +483,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 setIsAvatarPlaying(false);
                 setIsAnimPlaying(false);
                 const storedAv = avatarManager.getAvatar(s.avatarName);
-                const storedAn = animationManager.getAnimation(s.animationName);
+                const storedAn = animationManager.getByDisplayName(s.animationName)?.entry;
                 if (storedAv) {
                     if (storedAv.source === "url" && storedAv.url) {
                         manager.avatar!.loadAsync(storedAv.url, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
@@ -602,7 +628,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             if (!manager?.animationSource) {
                 return;
             }
-            const storedAnimation = animationManager.getAnimation(name);
+            const storedAnimation = animationManager.getByDisplayName(name)?.entry;
             if (!storedAnimation) {
                 return;
             }
@@ -638,6 +664,10 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
         [animationManager]
     );
 
+    // 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) {
@@ -692,9 +722,15 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             ) : (
                 <>
                     <div className={classes.actionRow}>
-                        <ButtonLine label="Retarget" onClick={handleRetarget} disabled={!isAvatarLoaded || !isAnimLoaded || isLoading} />
+                        <ButtonLine
+                            label="Retarget"
+                            title="Apply the animation from the source to the avatar using the current settings"
+                            onClick={handleRetarget}
+                            disabled={!isAvatarLoaded || !isAnimLoaded || isLoading}
+                        />
                         <ButtonLine
                             label="Export to Playground"
+                            title="Export the retargeted animation as a Babylon.js Playground snippet"
                             onClick={() => managerRef.current?.exportToPlaygroundAsync(avatarManager, animationManager)}
                             disabled={!isRetargeted}
                         />
@@ -704,17 +740,31 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                         <BabylonAccordion>
                             {/* Avatar */}
                             <BabylonAccordionSection title="Avatar">
-                                <StringDropdownPropertyLine
-                                    label="Name"
-                                    value={avatarName}
-                                    options={avatarOptions}
-                                    onChange={(name) => {
-                                        setAvatarName(name);
-                                        handleLoadAvatar(name, avatarRescaleAvatar);
-                                    }}
-                                />
+                                <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+                                    <div style={{ flex: 1 }}>
+                                        <StringDropdownPropertyLine
+                                            label="Name"
+                                            description="Select the avatar model to retarget animations onto"
+                                            value={avatarName}
+                                            options={avatarOptions}
+                                            onChange={(name) => {
+                                                setAvatarName(name);
+                                                handleLoadAvatar(name, avatarRescaleAvatar);
+                                            }}
+                                        />
+                                    </div>
+                                    <Button
+                                        size="small"
+                                        appearance="subtle"
+                                        icon={<ArrowClockwise20Regular />}
+                                        title="Reload avatar"
+                                        disabled={!avatarName}
+                                        onClick={() => handleLoadAvatar(avatarName, avatarRescaleAvatar)}
+                                    />
+                                </div>
                                 <CheckboxPropertyLine
                                     label="Rescale"
+                                    description="Automatically rescale the avatar if it's too large or too small"
                                     value={avatarRescaleAvatar}
                                     onChange={(v) => {
                                         setAvatarRescaleAvatar(v);
@@ -723,6 +773,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 />
                                 <CheckboxPropertyLine
                                     label="Show skeleton"
+                                    description="Display the avatar skeleton overlay"
                                     value={avatarShowSkeleton}
                                     onChange={(v) => {
                                         setAvatarShowSkeleton(v);
@@ -731,6 +782,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 />
                                 <CheckboxPropertyLine
                                     label="Show skel. local axes"
+                                    description="Show local coordinate axes on each skeleton bone (requires Show skeleton)"
                                     value={avatarShowSkeletonLocalAxes}
                                     disabled={!avatarShowSkeleton}
                                     onChange={(v) => {
@@ -740,6 +792,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 />
                                 <SyncedSliderPropertyLine
                                     label="Anim. speed"
+                                    description="Playback speed for the retargeted animation on the avatar"
                                     value={avatarAnimSpeed}
                                     min={0.01}
                                     max={2}
@@ -749,9 +802,15 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         managerRef.current?.avatar?.setAnimSpeed(v);
                                     }}
                                 />
-                                <ButtonLine label="Return to rest" onClick={() => managerRef.current?.avatar?.returnToRest()} disabled={!isAvatarLoaded} />
+                                <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();
@@ -763,14 +822,20 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         }
                                     }}
                                 />
-                                <ButtonLine label="Play" onClick={() => managerRef.current?.avatar?.play(avatarAnimSpeed)} disabled={!isRetargeted} />
+                                <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">
                                 <CheckboxPropertyLine
                                     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}
+                                    disabled={isAvatarPlaying || !isAvatarLoaded}
                                     onChange={(v) => {
                                         setAvatarGizmoEnabled(v);
                                         managerRef.current?.avatar?.setGizmo(v, avatarGizmoType as GizmoType);
@@ -778,6 +843,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 />
                                 <StringDropdownPropertyLine
                                     label="Type"
+                                    description="Type of transform gizmo: Position, Rotation, or Scale"
                                     value={avatarGizmoType}
                                     options={GizmoTypeOptions}
                                     onChange={(v) => {
@@ -806,17 +872,31 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             </BabylonAccordionSection>
                             {/* Animation */}
                             <BabylonAccordionSection title="Animation">
-                                <StringDropdownPropertyLine
-                                    label="Name"
-                                    value={animationName}
-                                    options={animationOptions}
-                                    onChange={(name) => {
-                                        setAnimationName(name);
-                                        handleLoadAnimation(name);
-                                    }}
-                                />
+                                <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+                                    <div style={{ flex: 1 }}>
+                                        <StringDropdownPropertyLine
+                                            label="Name"
+                                            description="Select the animation to retarget onto the avatar"
+                                            value={animationName}
+                                            options={animationOptions}
+                                            onChange={(name) => {
+                                                setAnimationName(name);
+                                                handleLoadAnimation(name);
+                                            }}
+                                        />
+                                    </div>
+                                    <Button
+                                        size="small"
+                                        appearance="subtle"
+                                        icon={<ArrowClockwise20Regular />}
+                                        title="Reload animation"
+                                        disabled={!animationName}
+                                        onClick={() => handleLoadAnimation(animationName)}
+                                    />
+                                </div>
                                 <CheckboxPropertyLine
                                     label="Show skel. local axes"
+                                    description="Show local coordinate axes on each animation bone"
                                     value={animationShowSkeletonLocalAxes}
                                     onChange={(v) => {
                                         setAnimationShowSkeletonLocalAxes(v);
@@ -825,6 +905,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 />
                                 <SyncedSliderPropertyLine
                                     label="Anim. speed"
+                                    description="Playback speed for the source animation"
                                     value={animationSpeed}
                                     min={0.01}
                                     max={2}
@@ -834,28 +915,40 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         managerRef.current?.animationSource?.play(v);
                                     }}
                                 />
-                                <ButtonLine label="Return to rest" onClick={() => managerRef.current?.animationSource?.returnToRest()} disabled={!isAnimLoaded} />
+                                <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.getAnimation(animationName);
+                                            const stored = animationManager.getByDisplayName(animationName)?.entry;
                                             if (stored) {
                                                 animationManager.addAnimation({ ...stored, restPoseUpdate: restPose });
                                             }
                                         }
                                     }}
                                 />
-                                <ButtonLine label="Play" onClick={() => managerRef.current?.animationSource?.play(animationSpeed)} disabled={!isAnimLoaded} />
+                                <ButtonLine
+                                    label="Play"
+                                    title="Play the source animation"
+                                    onClick={() => managerRef.current?.animationSource?.play(animationSpeed)}
+                                    disabled={!isAnimLoaded}
+                                />
                             </BabylonAccordionSection>
                             {/* Animation Gizmo */}
                             <BabylonAccordionSection title="Animation Gizmo">
                                 <CheckboxPropertyLine
                                     label="Enabled"
+                                    description="Enable the transform gizmo to edit node positions. Only available when the animation is stopped"
                                     value={animationGizmoEnabled && !isAnimPlaying}
-                                    disabled={isAnimPlaying}
+                                    disabled={isAnimPlaying || !isAnimLoaded}
                                     onChange={(v) => {
                                         setAnimationGizmoEnabled(v);
                                         managerRef.current?.animationSource?.setGizmo(v, animationGizmoType as GizmoType);
@@ -863,6 +956,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 />
                                 <StringDropdownPropertyLine
                                     label="Type"
+                                    description="Type of transform gizmo: Position, Rotation, or Scale"
                                     value={animationGizmoType}
                                     options={GizmoTypeOptions}
                                     onChange={(v) => {
@@ -891,14 +985,40 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             </BabylonAccordionSection>
                             {/* Retarget Options */}
                             <BabylonAccordionSection title="Retarget Options">
-                                <CheckboxPropertyLine label="Fix animations" value={fixAnimations} onChange={setFixAnimations} />
-                                <CheckboxPropertyLine label="Check hierarchy" value={checkHierarchy} onChange={setCheckHierarchy} />
-                                <CheckboxPropertyLine label="Retarget keys" value={retargetAnimationKeys} onChange={setRetargetAnimationKeys} />
-                                <CheckboxPropertyLine label="Fix root position" value={fixRootPosition} onChange={setFixRootPosition} />
-                                <CheckboxPropertyLine label="Fix ground reference" value={fixGroundReference} onChange={setFixGroundReference} />
+                                <CheckboxPropertyLine
+                                    label="Fix animations"
+                                    description="Apply fixes to animation data before retargeting"
+                                    value={fixAnimations}
+                                    onChange={setFixAnimations}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Check hierarchy"
+                                    description="Verify that the bone hierarchy matches between source and target"
+                                    value={checkHierarchy}
+                                    onChange={setCheckHierarchy}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Retarget keys"
+                                    description="Retarget animation keyframes to match the avatar skeleton"
+                                    value={retargetAnimationKeys}
+                                    onChange={setRetargetAnimationKeys}
+                                />
+                                <CheckboxPropertyLine
+                                    label="Fix root position"
+                                    description="Correct the root bone position to prevent floating or sinking. Uses the Root node setting"
+                                    value={fixRootPosition}
+                                    onChange={setFixRootPosition}
+                                />
+                                <CheckboxPropertyLine
+                                    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 style={{ paddingLeft: "16px" }}>
                                     <CheckboxPropertyLine
                                         label="Dynamic ref. node"
+                                        description="Dynamically update the ground reference node each frame (requires Fix ground reference)"
                                         value={fixGroundReferenceDynamicRefNode}
                                         disabled={!fixGroundReference}
                                         onChange={setFixGroundReferenceDynamicRefNode}
@@ -929,6 +1049,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 <div style={{ paddingLeft: "16px" }}>
                                     <StringDropdownPropertyLine
                                         label="Vertical axis"
+                                        description="The vertical axis used for ground reference correction (Auto detects automatically)"
                                         value={groundReferenceVerticalAxis}
                                         options={VerticalAxisOptions}
                                         disabled={!fixRootPosition && !fixGroundReference}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index f0b7a02787f..def0940161a 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -1,5 +1,5 @@
 import type { FunctionComponent } from "react";
-import type { AnimationManager, StoredAnimation } from "./animationManager";
+import type { AnimationManager, StoredAnimation, AnimationGroupMapping } from "./animationManager";
 import type { NamingSchemeManager } from "./namingSchemeManager";
 
 import { useState, useCallback, useRef, useEffect } from "react";
@@ -77,7 +77,7 @@ const useStyles = makeStyles({
     },
     editSectionFlex: {
         flex: 1,
-        overflow: "hidden",
+        overflowY: "auto",
         borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
         paddingTop: tokens.spacingVerticalS,
         display: "flex",
@@ -152,13 +152,28 @@ const useStyles = makeStyles({
         minHeight: "60px",
     },
     animRow: {
+        display: "flex",
+        alignItems: "center",
         padding: `2px ${tokens.spacingHorizontalS}`,
+        gap: tokens.spacingHorizontalS,
         fontSize: "12px",
-        cursor: "pointer",
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        ":last-child": { borderBottom: "none" },
     },
-    animRowSelected: {
-        backgroundColor: tokens.colorBrandBackground2,
-        fontWeight: "bold",
+    animRowName: {
+        flex: "0 0 40%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        color: tokens.colorNeutralForeground3,
+    },
+    animRowInput: {
+        flex: 1,
+    },
+    animRowError: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: "11px",
+        flexShrink: 0,
     },
 });
 
@@ -166,12 +181,12 @@ const useStyles = makeStyles({
 
 type AnimationEdit = {
     id: string | null;
-    originalName: string | null;
     name: string;
     sourceType: "url" | "file";
     url: string;
     files: File[];
-    animationGroupName: string;
+    /** One row per animation group found in the file. */
+    mappings: AnimationGroupMapping[];
     namingScheme: string;
     restPoseJson: string;
 };
@@ -220,8 +235,7 @@ export const AnimationsPanel: FunctionComponent<{
     const classes = useStyles();
     const [editing, setEditing] = useState<AnimationEdit | null>(null);
     const [error, setError] = useState<string | null>(null);
-    const [confirmDelete, setConfirmDelete] = useState<{ id: string; name: string } | null>(null);
-    const [animGroupNames, setAnimGroupNames] = useState<string[]>([]);
+    const [confirmDelete, setConfirmDelete] = useState<{ id: string; label: string } | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const [isDragOver, setIsDragOver] = useState(false);
 
@@ -250,9 +264,8 @@ export const AnimationsPanel: FunctionComponent<{
     // ─── Load preview ─────────────────────────────────────────────────────
 
     const loadPreview = useCallback(
-        async (sourceType: "url" | "file", url: string, files: File[]) => {
+        async (sourceType: "url" | "file", url: string, files: File[], autoDetectScheme: boolean) => {
             setIsLoading(true);
-            setAnimGroupNames([]);
             setError(null);
 
             tempSceneRef.current?.dispose();
@@ -289,28 +302,39 @@ export const AnimationsPanel: FunctionComponent<{
                     return;
                 }
 
-                const names = groups.map((g) => g.name);
-                setAnimGroupNames(names);
-
-                // Collect target names for scheme detection
-                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);
+                // 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);
                 }
-                const detectedScheme = DetectNamingScheme(targetNames, namingSchemeManager);
 
-                // Auto-select first animation group
+                // 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) ?? "",
+                    }));
                     return {
                         ...prev,
-                        animationGroupName: prev.animationGroupName || names[0],
+                        mappings: newMappings,
                         ...(detectedScheme ? { namingScheme: detectedScheme } : {}),
                     };
                 });
@@ -328,40 +352,36 @@ export const AnimationsPanel: FunctionComponent<{
     const startAdd = useCallback(() => {
         setEditingWithNotify({
             id: null,
-            originalName: null,
             name: "",
             sourceType: "url",
             url: "",
             files: [],
-            animationGroupName: "",
+            mappings: [],
             namingScheme: schemeNames[0] ?? "",
             restPoseJson: "",
         });
         setError(null);
-        setAnimGroupNames([]);
     }, [schemeNames, setEditingWithNotify]);
 
     const startEdit = useCallback(
         async (animation: StoredAnimation) => {
             setEditingWithNotify({
                 id: animation.id,
-                originalName: animation.name,
                 name: animation.name,
                 sourceType: animation.source,
                 url: animation.url ?? "",
                 files: [],
-                animationGroupName: animation.animationGroupName,
+                mappings: animation.animations.map((m) => ({ ...m })),
                 namingScheme: animation.namingScheme,
                 restPoseJson: animation.restPoseUpdate ? JSON.stringify(animation.restPoseUpdate, undefined, 2) : "",
             });
             setError(null);
-            setAnimGroupNames([]);
             if (animation.source === "url" && animation.url) {
-                void loadPreview("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);
+                    void loadPreview("file", "", files, false);
                 }
             }
         },
@@ -371,7 +391,6 @@ export const AnimationsPanel: FunctionComponent<{
     const handleCancel = useCallback(() => {
         setEditingWithNotify(null);
         setError(null);
-        setAnimGroupNames([]);
         tempSceneRef.current?.dispose();
         tempSceneRef.current = null;
         tempEngineRef.current?.dispose();
@@ -386,18 +405,26 @@ export const AnimationsPanel: FunctionComponent<{
             setError("Name is required.");
             return;
         }
-        if (!editing.animationGroupName) {
-            setError("Please load the file and select an animation.");
-            return;
-        }
         if (!editing.namingScheme) {
             setError("Please select a naming scheme.");
             return;
         }
-        if (editing.originalName !== editing.name.trim()) {
-            const existing = animationManager.getAnimation(editing.name.trim());
-            if (existing) {
-                setError(`An animation named "${editing.name.trim()}" already exists.`);
+
+        // 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;
             }
         }
@@ -432,7 +459,7 @@ export const AnimationsPanel: FunctionComponent<{
                 url: editing.sourceType === "url" ? editing.url.trim() : undefined,
                 fileNames: editing.sourceType === "file" ? fileNames : undefined,
                 namingScheme: editing.namingScheme,
-                animationGroupName: editing.animationGroupName,
+                animations: editing.mappings.map((m) => ({ ...m, displayName: m.displayName.trim() })),
                 restPoseUpdate,
             };
 
@@ -446,7 +473,6 @@ export const AnimationsPanel: FunctionComponent<{
 
             setEditingWithNotify(null);
             setError(null);
-            setAnimGroupNames([]);
             onMutate();
         } catch (e) {
             setError(e instanceof Error ? e.message : String(e));
@@ -454,7 +480,7 @@ export const AnimationsPanel: FunctionComponent<{
     }, [editing, animationManager, onMutate, setEditingWithNotify]);
 
     const handleDelete = useCallback((animation: StoredAnimation) => {
-        setConfirmDelete({ id: animation.id, name: animation.name });
+        setConfirmDelete({ id: animation.id, label: animation.name });
     }, []);
 
     const handleConfirmDelete = useCallback(async () => {
@@ -466,6 +492,44 @@ export const AnimationsPanel: FunctionComponent<{
         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) => {
@@ -492,7 +556,7 @@ export const AnimationsPanel: FunctionComponent<{
             if (droppedFiles.length > 0) {
                 const updated = { ...editing, sourceType: "file" as const, files: droppedFiles, url: "" };
                 setEditing(updated);
-                void loadPreview("file", "", droppedFiles);
+                void loadPreview("file", "", droppedFiles, true);
             }
         },
         [editing, loadPreview]
@@ -507,7 +571,7 @@ export const AnimationsPanel: FunctionComponent<{
             if (selectedFiles.length > 0) {
                 const updated = { ...editing, sourceType: "file" as const, files: selectedFiles, url: "" };
                 setEditing(updated);
-                void loadPreview("file", "", selectedFiles);
+                void loadPreview("file", "", selectedFiles, true);
             }
         },
         [editing, loadPreview]
@@ -530,7 +594,7 @@ export const AnimationsPanel: FunctionComponent<{
                     <DialogBody>
                         <DialogTitle>Delete Animation</DialogTitle>
                         <DialogContent>
-                            Delete animation <strong>"{confirmDelete?.name}"</strong> and all associated files?
+                            Delete animation <strong>"{confirmDelete?.label}"</strong> and all associated files?
                         </DialogContent>
                         <DialogActions>
                             <Button appearance="secondary" onClick={() => setConfirmDelete(null)}>
@@ -566,7 +630,7 @@ export const AnimationsPanel: FunctionComponent<{
 
             {editing && (
                 <div className={classes.editSectionFlex}>
-                    <Body1Strong>{editing.originalName ? `Editing "${editing.originalName}"` : "New Animation"}</Body1Strong>
+                    <Body1Strong>{editing.id ? "Edit Animation File" : "New Animation File"}</Body1Strong>
 
                     {/* Name */}
                     <div className={classes.formRow}>
@@ -586,13 +650,13 @@ export const AnimationsPanel: FunctionComponent<{
                             onKeyDown={(e) => {
                                 if (e.key === "Enter" && editing.url.trim()) {
                                     setEditing({ ...editing, sourceType: "url", files: [] });
-                                    void loadPreview("url", editing.url, []);
+                                    void loadPreview("url", editing.url, [], true);
                                 }
                             }}
                             input={{
                                 onBlur: () => {
                                     if (editing.url.trim() && editing.sourceType !== "file") {
-                                        void loadPreview("url", editing.url, []);
+                                        void loadPreview("url", editing.url, [], true);
                                     }
                                 },
                             }}
@@ -619,20 +683,31 @@ export const AnimationsPanel: FunctionComponent<{
                         </Caption1>
                     )}
 
-                    {/* Animation group list */}
-                    {animGroupNames.length > 0 && (
+                    {/* Animation group mapping table */}
+                    {editing.mappings.length > 0 && (
                         <>
-                            <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>Select the animation to use ({animGroupNames.length} found):</Caption1>
+                            <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>
+                                Assign display names to animation groups ({editing.mappings.length} found). Leave empty to exclude an animation.
+                            </Caption1>
                             <div className={classes.animList}>
-                                {animGroupNames.map((name) => (
-                                    <div
-                                        key={name}
-                                        className={mergeClasses(classes.animRow, editing.animationGroupName === name ? classes.animRowSelected : undefined)}
-                                        onClick={() => setEditing({ ...editing, animationGroupName: name })}
-                                    >
-                                        {name}
-                                    </div>
-                                ))}
+                                {editing.mappings.map((mapping) => {
+                                    const rowError = getMappingError(mapping);
+                                    return (
+                                        <div key={mapping.index} className={classes.animRow}>
+                                            <span className={classes.animRowName} title={mapping.groupName}>
+                                                {mapping.groupName}
+                                            </span>
+                                            <Input
+                                                className={classes.animRowInput}
+                                                size="small"
+                                                placeholder="Display name"
+                                                value={mapping.displayName}
+                                                onChange={(_, d) => updateMappingDisplayName(mapping.index, d.value)}
+                                            />
+                                            {rowError && <span className={classes.animRowError}>{rowError}</span>}
+                                        </div>
+                                    );
+                                })}
                             </div>
                         </>
                     )}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
index 766cefb9b64..4f7f3d4622d 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -94,6 +94,10 @@ export class Avatar {
         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. */
     public getBoneNames(): string[] {
         if (!this._animatorAvatar) {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
index 178eea20d3d..fca213d716e 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -28,6 +28,27 @@ function GenerateId(): string {
     return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
+function BlobToBase64(blob: Blob): Promise<string> {
+    return 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> {
@@ -194,6 +215,87 @@ export class AvatarManager {
         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.
+     */
+    public async exportDataAsync(): Promise<Array<StoredAvatar & { fileData?: Record<string, string> }>> {
+        const result: Array<StoredAvatar & { fileData?: Record<string, string> }> = [];
+        for (const avatar of this._avatars) {
+            const entry: StoredAvatar & { fileData?: Record<string, string> } = { ...avatar };
+            if (avatar.source === "file" && avatar.fileNames?.length) {
+                const fileData: Record<string, string> = {};
+                const files = await this.getFilesAsync(avatar.id, avatar.fileNames);
+                for (const file of files) {
+                    fileData[file.name] = await BlobToBase64(file);
+                }
+                entry.fileData = fileData;
+            }
+            result.push(entry);
+        }
+        return result;
+    }
+
+    /**
+     * Imports avatars, including restoring file-based entries to IndexedDB from base64 data.
+     */
+    public async importDataAsync(avatars: Array<StoredAvatar & { fileData?: Record<string, string> }>, mode: "replace" | "append"): Promise<string[]> {
+        const skipped: string[] = [];
+
+        if (mode === "replace") {
+            this._avatars = [];
+        }
+
+        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 fileNames: string[] = [];
+                    for (const [fileName, base64] of Object.entries(fileData)) {
+                        const blob = Base64ToBlob(base64);
+                        await IdbPut(`avatar:${newId}/${fileName}`, blob);
+                        fileNames.push(fileName);
+                    }
+                    this._avatars[this._avatars.length - 1].fileNames = fileNames;
+                }
+            }
+        }
+
+        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__",
+            });
+        }
+    }
+
     // ─── Private ──────────────────────────────────────────────────────────────
 
     private _loadFromStorage(): void {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index 3210ce745da..d43b1b77a6c 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -289,7 +289,7 @@ export const AvatarsPanel: FunctionComponent<{
     // ─── Load preview ─────────────────────────────────────────────────────
 
     const loadPreview = useCallback(
-        async (sourceType: "url" | "file", url: string, files: File[]) => {
+        async (sourceType: "url" | "file", url: string, files: File[], autoDetectScheme: boolean) => {
             setIsLoading(true);
             setNodeList([]);
             setError(null);
@@ -336,23 +336,27 @@ export const AvatarsPanel: FunctionComponent<{
                 }
                 setNodeList(nodes);
 
-                // Auto-select first node and try to detect the naming scheme from loaded nodes
+                // Auto-select first node and optionally detect the naming scheme
                 if (nodes.length > 0) {
-                    const nodeNames = new Set(nodes.map((n) => n.name));
-                    let 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);
+                    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);
+                            if (boneNames.size > 0) {
+                                detectedScheme = DetectNamingScheme(boneNames, namingSchemeManager);
+                            }
                         }
                     }
 
@@ -411,11 +415,11 @@ export const AvatarsPanel: FunctionComponent<{
             setNodeList([]);
             // Auto-load preview
             if (avatar.source === "url" && avatar.url) {
-                void loadPreview("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);
+                    void loadPreview("file", "", files, false);
                 }
             }
         },
@@ -553,7 +557,7 @@ export const AvatarsPanel: FunctionComponent<{
             if (droppedFiles.length > 0) {
                 const updated = { ...editing, sourceType: "file" as const, files: droppedFiles, url: "" };
                 setEditing(updated);
-                void loadPreview("file", "", droppedFiles);
+                void loadPreview("file", "", droppedFiles, true);
             }
         },
         [editing, loadPreview]
@@ -568,7 +572,7 @@ export const AvatarsPanel: FunctionComponent<{
             if (selectedFiles.length > 0) {
                 const updated = { ...editing, sourceType: "file" as const, files: selectedFiles, url: "" };
                 setEditing(updated);
-                void loadPreview("file", "", selectedFiles);
+                void loadPreview("file", "", selectedFiles, true);
             }
         },
         [editing, loadPreview]
@@ -647,13 +651,13 @@ export const AvatarsPanel: FunctionComponent<{
                             onKeyDown={(e) => {
                                 if (e.key === "Enter" && editing.url.trim()) {
                                     setEditing({ ...editing, sourceType: "url", files: [] });
-                                    void loadPreview("url", editing.url, []);
+                                    void loadPreview("url", editing.url, [], true);
                                 }
                             }}
                             input={{
                                 onBlur: () => {
                                     if (editing.url.trim() && editing.sourceType !== "file") {
-                                        void loadPreview("url", editing.url, []);
+                                        void loadPreview("url", editing.url, [], true);
                                     }
                                 },
                             }}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
index 684d41f9232..de810491a16 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
@@ -42,6 +42,11 @@ export class HTMLConsole {
 
         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, "")
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
index 74b5321cc14..e5c6c4e114e 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
@@ -460,6 +460,70 @@ export class NamingSchemeManager {
         return result;
     }
 
+    /**
+     * Returns all naming schemes and remappings in a JSON-serializable format.
+     */
+    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).
      * @throws Error if no such remapping exists.
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index c952a9334fc..4b66aa4a3ff 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -24,7 +24,16 @@ import {
     Caption1,
     Spinner,
 } from "@fluentui/react-components";
-import { Add20Regular, Delete20Regular, Edit20Regular, ArrowCounterclockwise20Regular, ArrowBidirectionalUpDown20Regular, Dismiss20Regular } from "@fluentui/react-icons";
+import {
+    Add20Regular,
+    Delete20Regular,
+    Edit20Regular,
+    ArrowCounterclockwise20Regular,
+    ArrowBidirectionalUpDown20Regular,
+    ArrowDownload20Regular,
+    ArrowUpload20Regular,
+    Dismiss20Regular,
+} from "@fluentui/react-icons";
 import { NullEngine } from "core/Engines/nullEngine";
 import { Scene } from "core/scene";
 import { ImportMeshAsync, SceneLoader } from "core/Loading/sceneLoader";
@@ -288,7 +297,12 @@ const SchemesPanel: FunctionComponent<{
             options.push({ label: `Avatar: ${av.name}`, value: `avatar:${av.name}` });
         }
         for (const an of animationManager.getAllAnimations()) {
-            options.push({ label: `Animation: ${an.name}`, value: `animation:${an.name}` });
+            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]);
@@ -328,7 +342,12 @@ const SchemesPanel: FunctionComponent<{
                 users.push(`avatar "${a.name}"`);
             }
             for (const a of usingAnimations) {
-                users.push(`animation "${a.name}"`);
+                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(", ")}.`);
@@ -384,52 +403,57 @@ const SchemesPanel: FunctionComponent<{
                     }
                     await LoadIntoScene(scene, avatar, avatarManager);
 
-                    // Extract bone names from the first skeleton, with indentation for hierarchy
+                    // Extract bone names from the first skeleton in hierarchy order (DFS)
                     const skeleton = scene.skeletons[0];
                     if (!skeleton) {
                         throw new Error("No skeleton found in this avatar.");
                     }
                     const lines: string[] = [];
+                    const visitBone = (bone: import("core/Bones/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) {
-                        let depth = 0;
-                        let p = bone.parent;
-                        while (p) {
-                            depth++;
-                            p = p.parent;
+                        if (!bone.parent) {
+                            visitBone(bone, 0);
                         }
-                        lines.push("  ".repeat(depth) + bone.name);
                     }
                     setEditing({ ...editing, namesText: lines.join("\n") });
                 } else {
-                    const animation = animationManager.getAnimation(name);
+                    const animation = animationManager.getAnimationById(name);
                     if (!animation) {
                         throw new Error(`Animation "${name}" not found.`);
                     }
                     await LoadIntoScene(scene, animation, animationManager);
 
-                    // Extract target names from animation groups, with hierarchy indentation
-                    // Collect unique targets first, then sort by hierarchy
-                    const targetMap = new Map<string, import("core/Meshes/transformNode").TransformNode>();
+                    // Collect animation target names, then sort by scene hierarchy (DFS order)
+                    const targetNames = new Set<string>();
                     for (const group of scene.animationGroups) {
                         for (const ta of group.targetedAnimations) {
-                            const target = ta.target as import("core/Meshes/transformNode").TransformNode;
-                            if (target?.name && target.parent !== undefined) {
-                                targetMap.set(target.name, target);
+                            if (ta.target?.name) {
+                                targetNames.add(ta.target.name as string);
                             }
                         }
                     }
-                    if (targetMap.size === 0) {
+                    if (targetNames.size === 0) {
                         throw new Error("No animation targets found.");
                     }
+                    // Walk scene in DFS order, include only animation targets
                     const lines: string[] = [];
-                    for (const [nodeName, node] of targetMap) {
-                        let depth = 0;
-                        let p = node.parent;
-                        while (p) {
-                            depth++;
-                            p = p.parent;
+                    const visited = new Set<string>();
+                    const walkNode = (node: import("core/node").Node, depth: number) => {
+                        if (targetNames.has(node.name) && !visited.has(node.name)) {
+                            visited.add(node.name);
+                            lines.push("  ".repeat(depth) + node.name);
                         }
-                        lines.push("  ".repeat(depth) + nodeName);
+                        for (const child of node.getChildren()) {
+                            walkNode(child, depth + 1);
+                        }
+                    };
+                    for (const rootNode of scene.rootNodes) {
+                        walkNode(rootNode, 0);
                     }
                     setEditing({ ...editing, namesText: lines.join("\n") });
                 }
@@ -924,7 +948,11 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
     const [version, setVersion] = useState(0);
     const [isEditing, setIsEditing] = useState(false);
     const [confirmClose, setConfirmClose] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    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), []);
 
@@ -955,6 +983,65 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
         }
     }, [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;
 
@@ -975,8 +1062,69 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                 <DialogBody className={classes.body}>
                     <div className={classes.titleRow}>
                         <DialogTitle action={null}>Retargeting Configuration</DialogTitle>
-                        <Button appearance="subtle" icon={<Dismiss20Regular />} onClick={handleClose} title="Close" aria-label="Close" />
+                        <div style={{ display: "flex", gap: "4px" }}>
+                            <Button appearance="subtle" icon={<ArrowDownload20Regular />} onClick={handleExport} title="Export configuration" disabled={isEditing} />
+                            <Button
+                                appearance="subtle"
+                                icon={<ArrowUpload20Regular />}
+                                onClick={() => importInputRef.current?.click()}
+                                title="Import configuration"
+                                disabled={isEditing}
+                            />
+                            <input ref={importInputRef} type="file" accept=".json" style={{ display: "none" }} onChange={handleImportFile} />
+                            <Button appearance="subtle" icon={<Dismiss20Regular />} onClick={handleClose} title="Close" aria-label="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" onClick={() => setPendingImport(null)}>
+                                        Cancel
+                                    </Button>
+                                    <Button appearance="primary" onClick={() => handleImport("replace")}>
+                                        Replace
+                                    </Button>
+                                    <Button appearance="primary" onClick={() => handleImport("append")}>
+                                        Append
+                                    </Button>
+                                </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" onClick={() => setImportResult(null)}>
+                                        OK
+                                    </Button>
+                                </DialogActions>
+                            </DialogBody>
+                        </DialogSurface>
+                    </Dialog>
                     {/* Confirm close when edits are pending */}
                     <Dialog
                         open={confirmClose}
@@ -1026,7 +1174,7 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                             Naming Schemes
                         </Tab>
                         <Tab value="remappings" disabled={isEditing && activeTab !== "remappings"}>
-                            Remappings
+                            Scheme Remappings
                         </Tab>
                     </TabList>
                     <DialogContent className={classes.content}>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
index a8910f17a47..07e963ecd7d 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -174,7 +174,7 @@ export class RetargetingSceneManager {
         }
 
         const storedAvatar = avatarManager.getAvatar(params.avatarName);
-        const storedAnimation = animationManager.getAnimation(params.animationName);
+        const storedAnimation = animationManager.getByDisplayName(params.animationName)?.entry;
         const sourceScheme = storedAnimation?.namingScheme;
         const targetScheme = storedAvatar?.namingScheme;
         if (!sourceScheme || !targetScheme) {
@@ -218,7 +218,7 @@ export class RetargetingSceneManager {
 
         const params = this._lastRetargetParams;
         const storedAvatar = avatarManager.getAvatar(params.avatarName);
-        const storedAnimation = animationManager.getAnimation(params.animationName);
+        const storedAnimation = animationManager.getByDisplayName(params.animationName)?.entry;
         if (!storedAvatar || !storedAnimation) {
             return false;
         }

From 8df07f4d0e0ed7b4de1b6afb5a820b95be7e4c13 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Wed, 18 Mar 2026 22:30:04 +0100
Subject: [PATCH 07/30] More changes

---
 .../animationRetargeting/animation.ts         |  61 +++---
 .../animationRetargeting/animationManager.ts  |  70 ++++---
 .../animationRetargetingExtension.tsx         |   9 +-
 .../animationRetargetingPanel.tsx             |  11 +-
 .../animationRetargeting/animationsPanel.tsx  |  85 +++++++-
 .../extensions/animationRetargeting/avatar.ts |   2 +-
 .../animationRetargeting/avatarManager.ts     |  46 +++--
 .../animationRetargeting/avatarsPanel.tsx     |   4 +-
 .../extensions/animationRetargeting/data.ts   | 182 ------------------
 .../retargetingSceneManager.ts                |   6 +-
 10 files changed, 208 insertions(+), 268 deletions(-)
 delete mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/data.ts

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
index 618f35a7a6b..780213ac258 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -6,7 +6,7 @@ import type { AnimationGroup } from "core/Animations/animationGroup";
 import type { AbstractMesh } from "core/Meshes/abstractMesh";
 import type { TransformNode } from "core/Meshes/transformNode";
 import type { Vector3, Quaternion } from "core/Maths/math.vector";
-import type { RestPoseDataUpdate } from "./data";
+import type { RestPoseDataUpdate } from "./avatarManager";
 
 import { Color3 } from "core/Maths/math.color";
 import { Matrix } from "core/Maths/math.vector";
@@ -38,6 +38,7 @@ type TransformNodeTransformations = Map<TransformNode, { position: Vector3; scal
 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;
@@ -77,9 +78,9 @@ export class AnimationSource {
         this._gizmoManager.coordinatesMode = GizmoCoordinatesMode.Local;
     }
 
-    public async loadAsync(path: string, restPoseUpdate?: RestPoseDataUpdate): Promise<void> {
+    public async loadAsync(path: string, restPoseUpdate?: RestPoseDataUpdate, skeletonRootNodeName?: string): Promise<void> {
         this._cleanScene();
-        await this._loadFileAsync(path, restPoseUpdate);
+        await this._loadFileAsync(path, restPoseUpdate, skeletonRootNodeName);
     }
 
     public clearScene(): void {
@@ -319,7 +320,7 @@ export class AnimationSource {
         this._gizmoManager.dispose();
     }
 
-    private async _loadFileAsync(path: string, restPoseUpdate?: RestPoseDataUpdate): Promise<void> {
+    private async _loadFileAsync(path: string, restPoseUpdate?: RestPoseDataUpdate, skeletonRootNodeName?: string): Promise<void> {
         if (path.startsWith("file:")) {
             await AppendSceneAsync(path.substring(5), this._scene, { rootUrl: "file:" });
         } else {
@@ -372,22 +373,28 @@ export class AnimationSource {
                 (mesh as Mesh).dispose();
             });
 
-        // Find the hips/pelvis node to determine the skeleton root
-        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;
-        }
-        // Use the hips' parent as skeleton root (so siblings like Spine are included),
-        // but fall back to hips itself or the root node.
-        let skeletonRoot: TransformNode = hipsNode ?? this._rootNode;
-        if (hipsNode && hipsNode.parent && hipsNode.parent !== this._rootNode) {
-            skeletonRoot = hipsNode.parent as TransformNode;
+        // 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
@@ -399,10 +406,11 @@ export class AnimationSource {
 
         const animSkeleton = CreateSkeletonFromTransformNodeHierarchy(skeletonRoot, this._scene, meshOptions);
         const meshAnim = meshOptions.mesh!;
+        this._skeletonMesh = meshAnim;
         meshAnim.layerMask = ShadowLayerMask;
-        this._shadowGenerator.addShadowCaster(meshAnim);
+        meshAnim.isVisible = false;
 
-        const initialNode = hipsNode ?? skeletonRoot;
+        const initialNode = skeletonRoot;
         this._selectedTransformNode = initialNode;
         this._gizmoManager.attachToNode(initialNode);
         this.onGizmoNodeSelectedObservable.notifyObservers(initialNode.name);
@@ -540,10 +548,15 @@ export class AnimationSource {
 
     private _cleanScene(): void {
         this._animationGroup?.dispose();
-        this._skeletonViewer?.skeleton.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._skeletonViewer = 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
index 1e6ac62b851..d80cca2ede8 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -1,4 +1,4 @@
-import type { RestPoseDataUpdate } from "./data";
+import type { RestPoseDataUpdate } from "./avatarManager";
 
 const AnimationStorageKey = "BabylonInspector_AnimRetargeting_AnimationManager";
 const IDBName = "BabylonInspector_AnimRetargeting";
@@ -25,6 +25,8 @@ export type StoredAnimation = {
     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;
@@ -270,20 +272,21 @@ export class AnimationManager {
      * Returns all animations in a JSON-serializable format, including base64-encoded file data for file-based entries.
      */
     public async exportDataAsync(): Promise<Array<StoredAnimation & { fileData?: Record<string, string> }>> {
-        const result: Array<StoredAnimation & { fileData?: Record<string, string> }> = [];
-        for (const animation of this._animations) {
-            const entry: StoredAnimation & { fileData?: Record<string, string> } = { ...animation };
-            if (animation.source === "file" && animation.fileNames?.length) {
-                const fileData: Record<string, string> = {};
-                const files = await this.getFilesAsync(animation.id, animation.fileNames);
-                for (const file of files) {
-                    fileData[file.name] = await BlobToBase64(file);
+        return await Promise.all(
+            this._animations.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;
                 }
-                entry.fileData = fileData;
-            }
-            result.push(entry);
-        }
-        return result;
+                return entry;
+            })
+        );
     }
 
     /**
@@ -296,6 +299,7 @@ export class AnimationManager {
             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}"`);
@@ -305,13 +309,15 @@ export class AnimationManager {
                 this._animations.push({ ...animData, id: newId });
 
                 if (animData.source === "file" && fileData) {
-                    const fileNames: string[] = [];
-                    for (const [fileName, base64] of Object.entries(fileData)) {
-                        const blob = Base64ToBlob(base64);
-                        await IdbPut(`animation:${newId}/${fileName}`, blob);
-                        fileNames.push(fileName);
-                    }
-                    this._animations[this._animations.length - 1].fileNames = fileNames;
+                    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);
                 }
             }
         }
@@ -328,15 +334,15 @@ export class AnimationManager {
             return;
         }
         const baseUrl = "https://assets.babylonjs.com/mixamo/Animations/";
-        const defaults: { name: string; file: string; scheme: string; displayName: string }[] = [
-            { name: "Rumba Dancing", file: "Rumba Dancing.glb", scheme: "Mixamo", displayName: "Rumba Dancing" },
-            { name: "Hip Hop Dancing", file: "Hip Hop Dancing.glb", scheme: "Mixamo", displayName: "Hip Hop Dancing" },
-            { name: "Sitting Clap", file: "Sitting Clap.glb", scheme: "Mixamo", displayName: "Sitting Clap" },
-            { name: "Walking", file: "Walking.glb", scheme: "Mixamo", displayName: "Walking" },
-            { name: "Catwalk Walking", file: "Catwalk Walking.glb", scheme: "Mixamo", displayName: "Catwalk Walking" },
-            { name: "Praying", file: "Praying.glb", scheme: "Mixamo", displayName: "Praying" },
-            { name: "Mousey Walking", file: "Mousey_walking.glb", scheme: "Mixamo", displayName: "Mousey Walking" },
-            { name: "Hip Hop", file: "hiphop.glb", scheme: "Mixamo No Namespace", displayName: "Hip Hop" },
+        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" },
+            { name: "Hip Hop", file: "hiphop.glb", scheme: "Mixamo No Namespace", displayName: "Hip Hop", rootNode: "Hips" },
         ];
         for (const d of defaults) {
             this.addAnimation({
@@ -345,6 +351,7 @@ export class AnimationManager {
                 source: "url",
                 url: baseUrl + d.file,
                 namingScheme: d.scheme,
+                rootNodeName: d.rootNode,
                 animations: [{ index: 0, groupName: d.displayName, displayName: d.displayName }],
             });
         }
@@ -378,6 +385,9 @@ export class AnimationManager {
                 if (!entry.name) {
                     entry.name = "Unnamed";
                 }
+                if (!entry.rootNodeName) {
+                    entry.rootNodeName = "";
+                }
                 return entry as StoredAnimation;
             });
         } catch {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 35a7e05e20f..e28f504afe2 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -6,7 +6,7 @@ import { ShellServiceIdentity } from "../../services/shellService";
 
 import { useState, useEffect } from "react";
 import { Observable } from "core/Misc/observable";
-import { Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Database20Regular, PersonRunning20Regular } from "@fluentui/react-icons";
+import { Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Database20Regular, PersonRunning20Regular, QuestionCircle20Regular } from "@fluentui/react-icons";
 import { Button } from "@fluentui/react-components";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
@@ -149,6 +149,13 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                         onClick={() => currentManager?.htmlConsole.toggle()}
                     />
                     <Button appearance="transparent" size="small" icon={<Database20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
+                    <Button
+                        appearance="transparent"
+                        size="small"
+                        icon={<QuestionCircle20Regular />}
+                        title="Documentation"
+                        onClick={() => window.open("https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/", "_blank")}
+                    />
                     <RetargetingConfigDialog
                         manager={namingSchemeManager}
                         avatarManager={avatarManager}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index 31024364738..6f33e0ac88b 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -507,7 +507,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 }
                 if (storedAn) {
                     const loadAndPlayAsync = async (path: string) => {
-                        await manager.animationSource!.loadAsync(path, storedAn.restPoseUpdate);
+                        await manager.animationSource!.loadAsync(path, storedAn.restPoseUpdate, storedAn.rootNodeName);
                         manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
                     };
                     if (storedAn.source === "url" && storedAn.url) {
@@ -656,7 +656,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             }
 
             if (loadPath) {
-                await manager.animationSource.loadAsync(loadPath, storedAnimation.restPoseUpdate);
+                await manager.animationSource.loadAsync(loadPath, storedAnimation.restPoseUpdate, storedAnimation.rootNodeName);
                 manager.animationSource!.setSkeletonVisible(true);
                 manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
             }
@@ -726,7 +726,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             label="Retarget"
                             title="Apply the animation from the source to the avatar using the current settings"
                             onClick={handleRetarget}
-                            disabled={!isAvatarLoaded || !isAnimLoaded || isLoading}
+                            disabled={!isAvatarLoaded || !isAnimLoaded || isLoading || (rootNodeName !== "Auto" && rootNodeName === groundReferenceNodeName)}
                         />
                         <ButtonLine
                             label="Export to Playground"
@@ -1035,6 +1035,11 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         />
                                     </div>
                                 </div>
+                                {rootNodeName !== "Auto" && rootNodeName === groundReferenceNodeName && (
+                                    <span style={{ color: tokens.colorPaletteRedForeground1, fontSize: "12px", paddingLeft: "16px" }}>
+                                        Root node and Ground ref. node must be different.
+                                    </span>
+                                )}
                                 <div className={classes.boneDropdownWrapper}>
                                     <Body1Strong className={classes.boneDropdownLabel}>Ground ref. node</Body1Strong>
                                     <div className={classes.boneDropdownControl}>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index def0940161a..9ae01d46e0c 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -1,6 +1,7 @@
 import type { FunctionComponent } from "react";
 import type { AnimationManager, StoredAnimation, AnimationGroupMapping } from "./animationManager";
 import type { NamingSchemeManager } from "./namingSchemeManager";
+import type { RestPoseDataUpdate } from "./avatarManager";
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import {
@@ -26,6 +27,7 @@ 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 ───────────────────────────────────────────────────────────────────
 
@@ -175,10 +177,36 @@ const useStyles = makeStyles({
         fontSize: "11px",
         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: "12px",
+        lineHeight: "13px",
+        fontFamily: "monospace",
+        cursor: "pointer",
+        whiteSpace: "pre",
+    },
+    nodeRowSelected: {
+        backgroundColor: tokens.colorBrandBackground2,
+        fontWeight: "bold",
+    },
 });
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
+type NodeInfo = {
+    name: string;
+    depth: number;
+    prefix: string;
+};
+
 type AnimationEdit = {
     id: string | null;
     name: string;
@@ -187,12 +215,31 @@ type AnimationEdit = {
     files: File[];
     /** One row per animation group found in the file. */
     mappings: AnimationGroupMapping[];
+    rootNodeName: string;
     namingScheme: string;
     restPoseJson: string;
 };
 
 // ─── 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
@@ -238,6 +285,7 @@ export const AnimationsPanel: FunctionComponent<{
     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);
@@ -316,6 +364,16 @@ export const AnimationsPanel: FunctionComponent<{
                     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) {
@@ -335,6 +393,7 @@ export const AnimationsPanel: FunctionComponent<{
                     return {
                         ...prev,
                         mappings: newMappings,
+                        rootNodeName: prev.rootNodeName || (nodes.length > 0 ? nodes[0].name : ""),
                         ...(detectedScheme ? { namingScheme: detectedScheme } : {}),
                     };
                 });
@@ -357,10 +416,12 @@ export const AnimationsPanel: FunctionComponent<{
             url: "",
             files: [],
             mappings: [],
+            rootNodeName: "",
             namingScheme: schemeNames[0] ?? "",
             restPoseJson: "",
         });
         setError(null);
+        setNodeList([]);
     }, [schemeNames, setEditingWithNotify]);
 
     const startEdit = useCallback(
@@ -372,6 +433,7 @@ export const AnimationsPanel: FunctionComponent<{
                 url: animation.url ?? "",
                 files: [],
                 mappings: animation.animations.map((m) => ({ ...m })),
+                rootNodeName: animation.rootNodeName ?? "",
                 namingScheme: animation.namingScheme,
                 restPoseJson: animation.restPoseUpdate ? JSON.stringify(animation.restPoseUpdate, undefined, 2) : "",
             });
@@ -391,6 +453,7 @@ export const AnimationsPanel: FunctionComponent<{
     const handleCancel = useCallback(() => {
         setEditingWithNotify(null);
         setError(null);
+        setNodeList([]);
         tempSceneRef.current?.dispose();
         tempSceneRef.current = null;
         tempEngineRef.current?.dispose();
@@ -442,7 +505,7 @@ export const AnimationsPanel: FunctionComponent<{
                 fileNames = existing?.fileNames;
             }
 
-            let restPoseUpdate: import("./data").RestPoseDataUpdate | undefined;
+            let restPoseUpdate: RestPoseDataUpdate | undefined;
             if (editing.restPoseJson.trim()) {
                 try {
                     restPoseUpdate = JSON.parse(editing.restPoseJson);
@@ -459,6 +522,7 @@ export const AnimationsPanel: FunctionComponent<{
                 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,
             };
@@ -473,6 +537,7 @@ export const AnimationsPanel: FunctionComponent<{
 
             setEditingWithNotify(null);
             setError(null);
+            setNodeList([]);
             onMutate();
         } catch (e) {
             setError(e instanceof Error ? e.message : String(e));
@@ -712,6 +777,24 @@ export const AnimationsPanel: FunctionComponent<{
                         </>
                     )}
 
+                    {/* Node tree for root node selection */}
+                    {nodeList.length > 0 && (
+                        <>
+                            <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>Select the root node for skeleton creation ({nodeList.length} nodes found):</Caption1>
+                            <div className={classes.nodeTree}>
+                                {nodeList.map((node) => (
+                                    <div
+                                        key={node.name}
+                                        className={mergeClasses(classes.nodeRow, editing.rootNodeName === node.name ? classes.nodeRowSelected : undefined)}
+                                        onClick={() => setEditing({ ...editing, rootNodeName: node.name })}
+                                    >
+                                        {node.prefix + node.name}
+                                    </div>
+                                ))}
+                            </div>
+                        </>
+                    )}
+
                     {/* Naming scheme */}
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>Naming scheme</Label>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
index 4f7f3d4622d..93aa7728b76 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -23,7 +23,7 @@ import type { Bone } from "core/Bones/bone";
 // Side-effect import needed for scene.createPickingRay (prototype-augmented)
 import "core/Culling/ray";
 
-import type { RestPoseDataUpdate } from "./data";
+import type { RestPoseDataUpdate } from "./avatarManager";
 import { DistancePointToLine } from "./helperFunctions";
 
 export type GizmoType = "Position" | "Rotation" | "Scale";
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
index fca213d716e..ed5afc1440f 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -1,4 +1,4 @@
-import type { RestPoseDataUpdate } from "./data";
+export type RestPoseDataUpdate = Array<{ name: string; data: { position?: number[]; scaling?: number[]; quaternion?: number[] } }>;
 
 const AvatarStorageKey = "BabylonInspector_AnimRetargeting_AvatarManager";
 const IDBName = "BabylonInspector_AnimRetargeting";
@@ -219,20 +219,21 @@ export class AvatarManager {
      * Returns all avatars in a JSON-serializable format, including base64-encoded file data for file-based entries.
      */
     public async exportDataAsync(): Promise<Array<StoredAvatar & { fileData?: Record<string, string> }>> {
-        const result: Array<StoredAvatar & { fileData?: Record<string, string> }> = [];
-        for (const avatar of this._avatars) {
-            const entry: StoredAvatar & { fileData?: Record<string, string> } = { ...avatar };
-            if (avatar.source === "file" && avatar.fileNames?.length) {
-                const fileData: Record<string, string> = {};
-                const files = await this.getFilesAsync(avatar.id, avatar.fileNames);
-                for (const file of files) {
-                    fileData[file.name] = await BlobToBase64(file);
+        return await Promise.all(
+            this._avatars.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;
                 }
-                entry.fileData = fileData;
-            }
-            result.push(entry);
-        }
-        return result;
+                return entry;
+            })
+        );
     }
 
     /**
@@ -245,6 +246,7 @@ export class AvatarManager {
             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}"`);
@@ -254,13 +256,15 @@ export class AvatarManager {
                 this._avatars.push({ ...avatarData, id: newId });
 
                 if (avatarData.source === "file" && fileData) {
-                    const fileNames: string[] = [];
-                    for (const [fileName, base64] of Object.entries(fileData)) {
-                        const blob = Base64ToBlob(base64);
-                        await IdbPut(`avatar:${newId}/${fileName}`, blob);
-                        fileNames.push(fileName);
-                    }
-                    this._avatars[this._avatars.length - 1].fileNames = fileNames;
+                    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);
                 }
             }
         }
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index d43b1b77a6c..995f6a630f2 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -1,5 +1,5 @@
 import type { FunctionComponent } from "react";
-import type { AvatarManager, StoredAvatar } from "./avatarManager";
+import type { AvatarManager, StoredAvatar, RestPoseDataUpdate } from "./avatarManager";
 import type { NamingSchemeManager } from "./namingSchemeManager";
 
 import { useState, useCallback, useRef, useEffect } from "react";
@@ -479,7 +479,7 @@ export const AvatarsPanel: FunctionComponent<{
                 fileNames = existing?.fileNames;
             }
 
-            let restPoseUpdate: import("./data").RestPoseDataUpdate | undefined;
+            let restPoseUpdate: RestPoseDataUpdate | undefined;
             if (editing.restPoseJson.trim()) {
                 try {
                     restPoseUpdate = JSON.parse(editing.restPoseJson);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/data.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/data.ts
deleted file mode 100644
index 5a97d29830b..00000000000
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/data.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-export type NamingScheme = string;
-
-export type RestPoseDataUpdate = Array<{ name: string; data: { position?: number[]; scaling?: number[]; quaternion?: number[] } }>;
-
-export const Avatars: {
-    [name: string]: {
-        path: string;
-        namingScheme: NamingScheme;
-        restPoseUpdate?: RestPoseDataUpdate;
-    };
-} = {
-    Goblin: {
-        path: "https://assets.babylonjs.com/mixamo/Characters/goblin_d_shareyko.glb",
-        namingScheme: "Mixamo",
-    },
-    "Big Vegas": {
-        path: "https://assets.babylonjs.com/mixamo/Characters/Big Vegas.glb",
-        namingScheme: "Mixamo",
-    },
-    "White Clown": {
-        path: "https://assets.babylonjs.com/mixamo/Characters/Whiteclown N Hallin.glb",
-        namingScheme: "Mixamo",
-    },
-    Mousey: {
-        path: "https://assets.babylonjs.com/mixamo/Characters/Ch14_nonPBR.glb",
-        namingScheme: "Mixamo",
-    },
-    "Ready Player Me": {
-        path: "https://assets.babylonjs.com/mixamo/Characters/rpm.glb",
-        namingScheme: "Mixamo No Namespace",
-        restPoseUpdate: [
-            { name: "Neck", data: { quaternion: [0.034619355720038936, 4.672305324509115e-8, 1.2327723869642098e-7, 0.9994005701445136] } },
-            { name: "Head", data: { quaternion: [-0.01219221211246064, -3.615570438034387e-7, -3.367146232302434e-7, 0.9999256702455088] } },
-            { name: "LeftShoulder", data: { quaternion: [-0.4888535487255111, -0.5055423403794744, 0.5302840821460562, -0.4735482630931305] } },
-            { name: "LeftArm", data: { quaternion: [0.008704805528198944, 0.06488486926052185, 0.02791158863460149, 0.9974643477902022] } },
-            { name: "LeftForeArm", data: { quaternion: [-0.05352775158188574, 0.0119205769810382, 0.003214396597565389, 0.9984900280144573] } },
-            { name: "RightShoulder", data: { quaternion: [0.4670848252944479, -0.5257200898704908, 0.549788596763065, 0.45075786114169936] } },
-            { name: "RightArm", data: { quaternion: [0.007797015816145728, -0.0649425313836908, -0.06250639119864947, 0.9958988971488447] } },
-            { name: "RightForeArm", data: { quaternion: [-0.053545557969461616, -0.01182403014636169, -0.0013402246314159288, 0.9984945051130866] } },
-            { name: "LeftUpLeg", data: { quaternion: [-0.0016660471658626209, 0.00970464150074662, 0.9999236137302893, -0.007470431708105472] } },
-            { name: "RightUpLeg", data: { quaternion: [0.0017072740086764113, 0.009685813129036259, 0.9999064759389724, 0.009503174401248248] } },
-        ],
-    },
-    Dude: {
-        path: "https://assets.babylonjs.com/meshes/Dude/dude.babylon",
-        namingScheme: "Dude",
-        restPoseUpdate: [
-            { name: "bone0", data: { quaternion: [-0.4956382108411332, -0.495637539287752, -0.5043240625640419, 0.5043247225089963] } },
-            {
-                name: "bone7",
-                data: {
-                    quaternion: [6.118323346972899e-7, 2.566696352359036e-7, -0.06278098256710099, 0.9980273310171722],
-                    position: [3.953911542892456, 0.00007303011079784483, -0.000011959440598729998],
-                },
-            },
-            {
-                name: "bone13",
-                data: {
-                    quaternion: [-0.017243666667216433, -0.09375516674288878, 0.011190084226846867, 0.9953830427505721],
-                    position: [6.843832969665527, 0.0000010450148693053052, -0.0000037226973290671594],
-                },
-            },
-            {
-                name: "bone14",
-                data: {
-                    quaternion: [-2.2745848490743344e-7, -7.993348609217729e-7, -0.04529758609725934, 0.9989735431461285],
-                    position: [13.142180442810059, 0.00011519173858687282, -0.0005142003647051752],
-                },
-            },
-            {
-                name: "bone32",
-                data: {
-                    quaternion: [0.014759507524885264, 0.05232950511551538, 0.02534179747048678, 0.9981991601312742],
-                    position: [6.843867778778076, 0.000034889206290245056, -0.000012921306733915117],
-                },
-            },
-            {
-                name: "bone33",
-                data: {
-                    quaternion: [-4.979581737795843e-7, -6.461808455694249e-7, -0.021828819836246977, 0.9997617243966206],
-                    position: [13.14214038848877, -0.000036571920645656064, 0.00035435488098300993],
-                },
-            },
-            {
-                name: "bone50",
-                data: {
-                    quaternion: [-0.024342876199033407, 0.9955010539441587, 0.08997531640320489, -0.017015403996628355],
-                    position: [-3.7692983150482178, -0.3552809953689575, 3.4951446056365967],
-                },
-            },
-            {
-                name: "bone51",
-                data: {
-                    quaternion: [-1.7234181971844284e-7, -3.178950951473535e-7, -0.04279816521194403, 0.9990837399656395],
-                    position: [18.257123947143555, 0.000011578077646845486, 1.4664297509625612e-7],
-                },
-            },
-            {
-                name: "bone54",
-                data: {
-                    quaternion: [0.013458383790773848, 0.9953978033355617, -0.08915652455748883, 0.03245303966196451],
-                    position: [-3.7693002223968506, -0.35523295402526855, -3.4951460361480713],
-                },
-            },
-            {
-                name: "bone55",
-                data: {
-                    quaternion: [2.8163977536254093e-8, -2.0904395193615398e-7, -0.09351755875877536, 0.995617629309489],
-                    position: [18.25729751586914, 0.000010011796803155448, -0.00000868310235091485],
-                },
-            },
-        ],
-    },
-};
-
-export const Animations: {
-    [name: string]: {
-        path: string;
-        namingScheme: NamingScheme;
-        restPoseUpdate?: RestPoseDataUpdate;
-    };
-} = {
-    "Rumba Dancing": {
-        path: "https://assets.babylonjs.com/mixamo/Animations/Rumba Dancing.glb",
-        namingScheme: "Mixamo",
-    },
-    "Hip Hop Dancing": {
-        path: "https://assets.babylonjs.com/mixamo/Animations/Hip Hop Dancing.glb",
-        namingScheme: "Mixamo",
-    },
-    "Sitting Clap": {
-        path: "https://assets.babylonjs.com/mixamo/Animations/Sitting Clap.glb",
-        namingScheme: "Mixamo",
-    },
-    Walking: {
-        path: "https://assets.babylonjs.com/mixamo/Animations/Walking.glb",
-        namingScheme: "Mixamo",
-    },
-    "Catwalk Walking": {
-        path: "https://assets.babylonjs.com/mixamo/Animations/Catwalk Walking.glb",
-        namingScheme: "Mixamo",
-    },
-    Praying: {
-        path: "https://assets.babylonjs.com/mixamo/Animations/Praying.glb",
-        namingScheme: "Mixamo",
-    },
-    "Mousey walking": {
-        path: "https://assets.babylonjs.com/mixamo/Animations/Mousey_walking.glb",
-        namingScheme: "Mixamo",
-    },
-    "Hip Hop": {
-        path: "https://assets.babylonjs.com/mixamo/Animations/hiphop.glb",
-        namingScheme: "Mixamo No Namespace",
-        restPoseUpdate: [
-            {
-                name: "Hiphop",
-                data: {
-                    scaling: [0.009999999776482582, 0.009999998410327421, 0.009999998410327421],
-                    quaternion: [0.030719497659612304, 0, 0, 0.9995280448609439],
-                    position: [0, 0.02035129815340042, 1.1486760377883911],
-                },
-            },
-            {
-                name: "Hips",
-                data: {
-                    scaling: [0.9999986007074148, 0.9999962094110727, 0.999997142588067],
-                    quaternion: [0.052553157917843873, -0.01805944576098157, 0.004367241634189689, 0.9984452660071943],
-                    position: [13.188420295715332, 99.95006561279297, -98.15790557861328],
-                },
-            },
-            { name: "RightUpLeg", data: { quaternion: [-0.08596637511297929, 0.014617736988054434, -0.013545213999786802, 0.9960987055974838] } },
-            { name: "LeftUpLeg", data: { quaternion: [-0.07820982526524597, 0.11147862411271901, 0.030835694345175777, 0.990204473607429] } },
-            { name: "Spine1", data: { quaternion: [0.04900287931205046, 0.027042963899555204, -0.024301365217254737, 0.9981366838120086] } },
-            { name: "LeftShoulder", data: { quaternion: [-0.04931914589884397, -0.12596940975740217, 0.06417621343333987, 0.988726829454192] } },
-            { name: "LeftArm", data: { quaternion: [0.6732927881818989, 0.04568916112857387, -0.12122590687031896, 0.7279379104299217] } },
-            { name: "RightShoulder", data: { quaternion: [-0.0012312282728442689, 0.048555807875653556, -0.03611679100293636, 0.9981665166725106] } },
-            { name: "RightArm", data: { quaternion: [0.60239787641809, -0.02177013258724727, 0.07259245132646759, 0.7945899545202696] } },
-            { name: "Neck", data: { quaternion: [-0.1367366086184092, -0.008306950825413764, 0.009321711794875032, 0.9905287477507827] } },
-        ],
-    },
-};
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
index 07e963ecd7d..a017b0c461c 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -19,7 +19,7 @@ import { Avatar } from "./avatar";
 import { AnimationSource } from "./animation";
 import { HTMLConsole } from "./htmlConsole";
 import type { NamingSchemeManager } from "./namingSchemeManager";
-import type { AvatarManager } from "./avatarManager";
+import type { AvatarManager, RestPoseDataUpdate } from "./avatarManager";
 import type { AnimationManager } from "./animationManager";
 import { SaveSnippet, TestPlaygroundCode } from "./helperFunctions";
 
@@ -61,8 +61,8 @@ export class RetargetingSceneManager {
 
     private _retargetOptions: Nullable<IRetargetOptions> = null;
     private _lastRetargetParams: Nullable<IRetargetingParams> = null;
-    private _lastAvatarRestPose: import("./data").RestPoseDataUpdate | undefined;
-    private _lastAnimationRestPose: import("./data").RestPoseDataUpdate | undefined;
+    private _lastAvatarRestPose: RestPoseDataUpdate | undefined;
+    private _lastAnimationRestPose: RestPoseDataUpdate | undefined;
     private _isRetargeted = false;
 
     public readonly onRetargetDoneObservable = new Observable<void>();

From e49e2d336aa5d315e19ecfba19ee30baf11ad27a Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Wed, 18 Mar 2026 23:00:24 +0100
Subject: [PATCH 08/30] Fix lint problems

---
 .../animationRetargeting/animationManager.ts  |  4 +--
 .../animationRetargetingPanel.tsx             | 34 +++++++++++--------
 .../animationRetargeting/animationsPanel.tsx  | 11 +++++-
 .../animationRetargeting/avatarManager.ts     |  4 +--
 .../animationRetargeting/avatarsPanel.tsx     | 11 +++++-
 .../retargetingConfigDialog.tsx               | 14 ++++++--
 6 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
index d80cca2ede8..f5765c980c6 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -42,8 +42,8 @@ function GenerateId(): string {
     return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
-function BlobToBase64(blob: Blob): Promise<string> {
-    return new Promise((resolve, reject) => {
+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;
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index 6f33e0ac88b..e4e8cfe4691 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -197,8 +197,8 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
 }) => {
     const classes = useStyles();
     const managerRef = useRef<RetargetingSceneManager | null>(null);
-    const handleLoadAvatarRef = useRef<(name: string, rescale: boolean) => void>(() => {});
-    const handleLoadAnimationRef = useRef<(name: string) => void>(() => {});
+    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);
 
@@ -335,7 +335,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 const firstAvatar = newAvatarOptions.length > 0 ? newAvatarOptions[0].value : "";
                 setAvatarName(firstAvatar);
                 if (firstAvatar) {
-                    handleLoadAvatarRef.current(firstAvatar, s.avatarRescaleAvatar);
+                    void handleLoadAvatarRef.current(firstAvatar, s.avatarRescaleAvatar);
                 } else {
                     managerRef.current?.avatar?.clearScene();
                     managerRef.current?.avatar?.setGizmo(false, s.avatarGizmoType as GizmoType);
@@ -351,7 +351,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 const firstAnim = newAnimationOptions.length > 0 ? newAnimationOptions[0].value : "";
                 setAnimationName(firstAnim);
                 if (firstAnim) {
-                    handleLoadAnimationRef.current(firstAnim);
+                    void handleLoadAnimationRef.current(firstAnim);
                 } else {
                     managerRef.current?.animationSource?.clearScene();
                     managerRef.current?.animationSource?.setGizmo(false, s.animationGizmoType as GizmoType);
@@ -486,7 +486,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 const storedAn = animationManager.getByDisplayName(s.animationName)?.entry;
                 if (storedAv) {
                     if (storedAv.source === "url" && storedAv.url) {
-                        manager.avatar!.loadAsync(storedAv.url, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
+                        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!);
@@ -500,7 +500,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 }
                             }
                             if (sceneFile) {
-                                manager.avatar!.loadAsync("file:" + sceneFile.name, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
+                                void manager.avatar!.loadAsync("file:" + sceneFile.name, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
                             }
                         })();
                     }
@@ -602,7 +602,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             setIsRetargeted(false);
 
             if (storedAvatar.source === "url" && storedAvatar.url) {
-                manager.avatar.loadAsync(storedAvatar.url, rescale, storedAvatar.restPoseUpdate);
+                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;
@@ -615,7 +615,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                     }
                 }
                 if (sceneFile) {
-                    manager.avatar.loadAsync("file:" + sceneFile.name, rescale, storedAvatar.restPoseUpdate);
+                    void manager.avatar.loadAsync("file:" + sceneFile.name, rescale, storedAvatar.restPoseUpdate);
                 }
             }
         },
@@ -731,7 +731,9 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                         <ButtonLine
                             label="Export to Playground"
                             title="Export the retargeted animation as a Babylon.js Playground snippet"
-                            onClick={() => managerRef.current?.exportToPlaygroundAsync(avatarManager, animationManager)}
+                            onClick={() => {
+                                void managerRef.current?.exportToPlaygroundAsync(avatarManager, animationManager);
+                            }}
                             disabled={!isRetargeted}
                         />
                     </div>
@@ -749,7 +751,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                             options={avatarOptions}
                                             onChange={(name) => {
                                                 setAvatarName(name);
-                                                handleLoadAvatar(name, avatarRescaleAvatar);
+                                                void handleLoadAvatar(name, avatarRescaleAvatar);
                                             }}
                                         />
                                     </div>
@@ -759,7 +761,9 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         icon={<ArrowClockwise20Regular />}
                                         title="Reload avatar"
                                         disabled={!avatarName}
-                                        onClick={() => handleLoadAvatar(avatarName, avatarRescaleAvatar)}
+                                        onClick={() => {
+                                            void handleLoadAvatar(avatarName, avatarRescaleAvatar);
+                                        }}
                                     />
                                 </div>
                                 <CheckboxPropertyLine
@@ -768,7 +772,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                     value={avatarRescaleAvatar}
                                     onChange={(v) => {
                                         setAvatarRescaleAvatar(v);
-                                        handleLoadAvatar(avatarName, v);
+                                        void handleLoadAvatar(avatarName, v);
                                     }}
                                 />
                                 <CheckboxPropertyLine
@@ -881,7 +885,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                             options={animationOptions}
                                             onChange={(name) => {
                                                 setAnimationName(name);
-                                                handleLoadAnimation(name);
+                                                void handleLoadAnimation(name);
                                             }}
                                         />
                                     </div>
@@ -891,7 +895,9 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         icon={<ArrowClockwise20Regular />}
                                         title="Reload animation"
                                         disabled={!animationName}
-                                        onClick={() => handleLoadAnimation(animationName)}
+                                        onClick={() => {
+                                            void handleLoadAnimation(animationName);
+                                        }}
                                     />
                                 </div>
                                 <CheckboxPropertyLine
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index 9ae01d46e0c..417fb9137e6 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -687,7 +687,16 @@ export const AnimationsPanel: FunctionComponent<{
                         <span className={classes.listRowName}>{animation.name}</span>
                         <span className={classes.listRowMeta}>{animation.source === "url" ? "URL" : "File"}</span>
                         <span className={classes.listRowMeta}>{animation.namingScheme}</span>
-                        <Button size="small" appearance="transparent" icon={<Edit20Regular />} title="Edit" disabled={!!editing} onClick={() => startEdit(animation)} />
+                        <Button
+                            size="small"
+                            appearance="transparent"
+                            icon={<Edit20Regular />}
+                            title="Edit"
+                            disabled={!!editing}
+                            onClick={() => {
+                                void startEdit(animation);
+                            }}
+                        />
                         <Button size="small" appearance="transparent" icon={<Delete20Regular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(animation)} />
                     </div>
                 ))}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
index ed5afc1440f..4cb24c36c1d 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -28,8 +28,8 @@ function GenerateId(): string {
     return `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
-function BlobToBase64(blob: Blob): Promise<string> {
-    return new Promise((resolve, reject) => {
+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;
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index 995f6a630f2..7cb7b27c744 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -623,7 +623,16 @@ export const AvatarsPanel: FunctionComponent<{
                         <span className={classes.listRowName}>{avatar.name}</span>
                         <span className={classes.listRowMeta}>{avatar.source === "url" ? "URL" : "File"}</span>
                         <span className={classes.listRowMeta}>{avatar.namingScheme}</span>
-                        <Button size="small" appearance="transparent" icon={<Edit20Regular />} title="Edit" disabled={!!editing} onClick={() => startEdit(avatar)} />
+                        <Button
+                            size="small"
+                            appearance="transparent"
+                            icon={<Edit20Regular />}
+                            title="Edit"
+                            disabled={!!editing}
+                            onClick={() => {
+                                void startEdit(avatar);
+                            }}
+                        />
                         <Button size="small" appearance="transparent" icon={<Delete20Regular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(avatar)} />
                     </div>
                 ))}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index 4b66aa4a3ff..7d4a4203769 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -1094,10 +1094,20 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                                     <Button appearance="secondary" onClick={() => setPendingImport(null)}>
                                         Cancel
                                     </Button>
-                                    <Button appearance="primary" onClick={() => handleImport("replace")}>
+                                    <Button
+                                        appearance="primary"
+                                        onClick={() => {
+                                            void handleImport("replace");
+                                        }}
+                                    >
                                         Replace
                                     </Button>
-                                    <Button appearance="primary" onClick={() => handleImport("append")}>
+                                    <Button
+                                        appearance="primary"
+                                        onClick={() => {
+                                            void handleImport("append");
+                                        }}
+                                    >
                                         Append
                                     </Button>
                                 </DialogActions>

From 091920522949d941551677478c57b90c830b35dd Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Thu, 19 Mar 2026 11:03:20 +0100
Subject: [PATCH 09/30] Remove unused parameters

---
 .../src/extensions/animationRetargeting/animation.ts        | 6 +-----
 .../src/extensions/animationRetargeting/avatar.ts           | 6 +-----
 .../animationRetargeting/retargetingSceneManager.ts         | 4 ++--
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
index 780213ac258..8a7d1d64912 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -159,13 +159,9 @@ export class AnimationSource {
     }
 
     /** Builds the rest-pose export data for the playground code generator. */
-    public buildExportData(_animationUrl: string, animationUpdateRestPose: boolean, epsilon: number, restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
+    public buildExportData(restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
         const animationTransformNodes: RestPoseDataUpdate = [];
 
-        if (!animationUpdateRestPose) {
-            return animationTransformNodes;
-        }
-
         if (restPoseUpdate) {
             for (const dataBlock of restPoseUpdate) {
                 animationTransformNodes.push(dataBlock);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
index 93aa7728b76..a02f9b7c065 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -196,13 +196,9 @@ export class Avatar {
         this._saveBoneTransformations(this._retargetedBoneTransformations);
     }
 
-    public buildExportData(_avatarUrl: string, avatarUpdateRestPose: boolean, epsilon: number, restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
+    public buildExportData(epsilon: number, restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
         const boneTransformations: RestPoseDataUpdate = [];
 
-        if (!avatarUpdateRestPose) {
-            return boneTransformations;
-        }
-
         if (restPoseUpdate) {
             for (const dataBlock of restPoseUpdate) {
                 boneTransformations.push(dataBlock);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
index a017b0c461c..9743e4cd98b 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -242,8 +242,8 @@ export class RetargetingSceneManager {
 
         const epsilon = 1e-4;
 
-        const boneTransformations = this.avatar.buildExportData(avatarUrl, true, epsilon, this._lastAvatarRestPose);
-        const animationTransformNodes = this.animationSource.buildExportData(animationUrl, true, epsilon, this._lastAnimationRestPose);
+        const boneTransformations = this.avatar.buildExportData(epsilon, this._lastAvatarRestPose);
+        const animationTransformNodes = this.animationSource.buildExportData(this._lastAnimationRestPose);
 
         const mapNodes: string[] = [];
         const map = this._retargetOptions.mapNodeNames;

From 4dccce0909f2a0785ea32665135d3d8d795c8f5d Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Thu, 19 Mar 2026 13:56:07 +0100
Subject: [PATCH 10/30] More changes (4)

---
 .../animationRetargeting/animation.ts         | 43 +------------------
 .../animationRetargeting/animationManager.ts  |  1 -
 .../animationRetargetingExtension.tsx         | 17 +++++---
 .../animationRetargetingPanel.tsx             | 24 +++++++++--
 .../animationRetargeting/animationsPanel.tsx  |  2 +-
 .../extensions/animationRetargeting/avatar.ts | 43 +------------------
 .../animationRetargeting/avatarsPanel.tsx     |  2 +-
 .../retargetingConfigDialog.tsx               | 10 ++---
 .../retargetingSceneManager.ts                |  4 +-
 9 files changed, 41 insertions(+), 105 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
index 8a7d1d64912..f67a02c07fc 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -160,48 +160,7 @@ export class AnimationSource {
 
     /** Builds the rest-pose export data for the playground code generator. */
     public buildExportData(restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
-        const animationTransformNodes: RestPoseDataUpdate = [];
-
-        if (restPoseUpdate) {
-            for (const dataBlock of restPoseUpdate) {
-                animationTransformNodes.push(dataBlock);
-            }
-        }
-
-        for (const [node, newTransformations] of this._retargetedTransformNodeTransformations) {
-            const initialTransformations = this._initialTransformNodeTransformations.get(node);
-            if (!initialTransformations) {
-                continue;
-            }
-
-            const name = node.name.replace(/"/g, '\\"');
-            const entry = animationTransformNodes.find((v) => v.name === name);
-            let key = entry?.data;
-
-            if (!initialTransformations.scaling.equals(newTransformations.scaling)) {
-                if (!key) {
-                    key = {};
-                    animationTransformNodes.push({ name, data: key });
-                }
-                key.scaling = newTransformations.scaling.asArray();
-            }
-            if (!initialTransformations.quaternion.equals(newTransformations.quaternion)) {
-                if (!key) {
-                    key = {};
-                    animationTransformNodes.push({ name, data: key });
-                }
-                key.quaternion = newTransformations.quaternion.asArray();
-            }
-            if (!initialTransformations.position.equals(newTransformations.position)) {
-                if (!key) {
-                    key = {};
-                    animationTransformNodes.push({ name, data: key });
-                }
-                key.position = newTransformations.position.asArray();
-            }
-        }
-
-        return animationTransformNodes;
+        return restPoseUpdate ? [...restPoseUpdate] : [];
     }
 
     public play(speed: number): void {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
index f5765c980c6..bf994038a04 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -342,7 +342,6 @@ export class AnimationManager {
             { 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" },
-            { name: "Hip Hop", file: "hiphop.glb", scheme: "Mixamo No Namespace", displayName: "Hip Hop", rootNode: "Hips" },
         ];
         for (const d of defaults) {
             this.addAnimation({
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index e28f504afe2..7e0b1e8b2ce 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -149,13 +149,6 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                         onClick={() => currentManager?.htmlConsole.toggle()}
                     />
                     <Button appearance="transparent" size="small" icon={<Database20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
-                    <Button
-                        appearance="transparent"
-                        size="small"
-                        icon={<QuestionCircle20Regular />}
-                        title="Documentation"
-                        onClick={() => window.open("https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/", "_blank")}
-                    />
                     <RetargetingConfigDialog
                         manager={namingSchemeManager}
                         avatarManager={avatarManager}
@@ -173,6 +166,16 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         const panelReg = shellService.addSidePane({
             key: "AnimationRetargetingPanel",
             title: "Animation Retargeting",
+            titleContent: (
+                <>
+                    Animation Retargeting
+                    <QuestionCircle20Regular
+                        style={{ marginLeft: "4px", cursor: "pointer", verticalAlign: "middle" }}
+                        title="Documentation"
+                        onClick={() => window.open("https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/", "_blank")}
+                    />
+                </>
+            ),
             icon: PersonRunning20Regular,
             headerExtra: headerActions,
             horizontalLocation: "left",
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index e4e8cfe4691..51c011d7264 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -237,8 +237,18 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     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 })));
-    const [animationOptions, setAnimationOptions] = useState(() => animationManager.getAllDisplayNames().map((n) => ({ label: n, value: n })));
+    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);
@@ -325,8 +335,14 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     // 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 }));
-            const newAnimationOptions = animationManager.getAllDisplayNames().map((n) => ({ label: n, value: n }));
+            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);
 
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index 417fb9137e6..c572562a54b 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -306,7 +306,7 @@ export const AnimationsPanel: FunctionComponent<{
         [onEditingChange]
     );
 
-    const allAnimations = animationManager.getAllAnimations();
+    const allAnimations = [...animationManager.getAllAnimations()].sort((a, b) => a.name.localeCompare(b.name));
     const schemeNames = namingSchemeManager.getAllSchemeNames();
 
     // ─── Load preview ─────────────────────────────────────────────────────
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
index a02f9b7c065..304486270e1 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -196,47 +196,8 @@ export class Avatar {
         this._saveBoneTransformations(this._retargetedBoneTransformations);
     }
 
-    public buildExportData(epsilon: number, restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
-        const boneTransformations: RestPoseDataUpdate = [];
-
-        if (restPoseUpdate) {
-            for (const dataBlock of restPoseUpdate) {
-                boneTransformations.push(dataBlock);
-            }
-        }
-
-        for (const [bone, newT] of this._retargetedBoneTransformations) {
-            const initT = this._initialBoneTransformations.get(bone);
-            if (!initT) {
-                continue;
-            }
-            const name = bone.name.replace(/"/g, '\\"');
-            const entry = boneTransformations.find((v) => v.name === name);
-            let key = entry?.data;
-            if (!initT.scaling.equalsWithEpsilon(newT.scaling)) {
-                if (!key) {
-                    key = {};
-                    boneTransformations.push({ name, data: key });
-                }
-                key.scaling = newT.scaling.asArray();
-            }
-            if (!initT.quaternion.equalsWithEpsilon(newT.quaternion, epsilon)) {
-                if (!key) {
-                    key = {};
-                    boneTransformations.push({ name, data: key });
-                }
-                key.quaternion = newT.quaternion.asArray();
-            }
-            if (!initT.position.equalsWithEpsilon(newT.position, epsilon)) {
-                if (!key) {
-                    key = {};
-                    boneTransformations.push({ name, data: key });
-                }
-                key.position = newT.position.asArray();
-            }
-        }
-
-        return boneTransformations;
+    public buildExportData(restPoseUpdate?: RestPoseDataUpdate): RestPoseDataUpdate {
+        return restPoseUpdate ? [...restPoseUpdate] : [];
     }
 
     public setRetargetedAnimation(animGroup: AnimationGroup, speed: number): void {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index 7cb7b27c744..6b0fea6f77b 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -283,7 +283,7 @@ export const AvatarsPanel: FunctionComponent<{
         [onEditingChange]
     );
 
-    const allAvatars = avatarManager.getAllAvatars();
+    const allAvatars = [...avatarManager.getAllAvatars()].sort((a, b) => a.name.localeCompare(b.name));
     const schemeNames = namingSchemeManager.getAllSchemeNames();
 
     // ─── Load preview ─────────────────────────────────────────────────────
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index 7d4a4203769..a25e4520cc9 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -45,10 +45,10 @@ import { AnimationsPanel } from "./animationsPanel";
 
 const useStyles = makeStyles({
     surface: {
-        width: "820px",
+        width: "1000px",
         minWidth: "400px",
         maxWidth: "95vw",
-        height: "660px",
+        height: "800px",
         minHeight: "300px",
         maxHeight: "95vh",
         resize: "both",
@@ -315,7 +315,7 @@ const SchemesPanel: FunctionComponent<{
         [onEditingChange]
     );
 
-    const schemeNames = manager.getAllSchemeNames();
+    const schemeNames = manager.getAllSchemeNames().sort((a, b) => a.localeCompare(b));
 
     const startAdd = useCallback(() => {
         setEditingWithNotify({ originalName: null, name: "", namesText: "" });
@@ -662,8 +662,8 @@ const RemappingsPanel: FunctionComponent<{
         [onEditingChange]
     );
 
-    const schemeNames = manager.getAllSchemeNames();
-    const allRemappings = manager.getAllRemappings();
+    const schemeNames = manager.getAllSchemeNames().sort((a, b) => a.localeCompare(b));
+    const allRemappings = [...manager.getAllRemappings()].sort((a, b) => `${a.fromScheme}→${a.toScheme}`.localeCompare(`${b.fromScheme}→${b.toScheme}`));
 
     const startAdd = useCallback(() => {
         if (schemeNames.length < 2) {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
index 9743e4cd98b..bb658a6d225 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -240,9 +240,7 @@ export class RetargetingSceneManager {
             return false;
         }
 
-        const epsilon = 1e-4;
-
-        const boneTransformations = this.avatar.buildExportData(epsilon, this._lastAvatarRestPose);
+        const boneTransformations = this.avatar.buildExportData(this._lastAvatarRestPose);
         const animationTransformNodes = this.animationSource.buildExportData(this._lastAnimationRestPose);
 
         const mapNodes: string[] = [];

From 87f8498c3a78af85094302d24f8c47eaa92fedb3 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Thu, 19 Mar 2026 13:56:36 +0100
Subject: [PATCH 11/30] Allow to pass a react component for the side panel
 title

---
 .../dev/inspector-v2/src/services/shellService.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/dev/inspector-v2/src/services/shellService.tsx b/packages/dev/inspector-v2/src/services/shellService.tsx
index 3daa28b0de6..b4539b9a5d1 100644
--- a/packages/dev/inspector-v2/src/services/shellService.tsx
+++ b/packages/dev/inspector-v2/src/services/shellService.tsx
@@ -1,5 +1,5 @@
 import type { MenuTriggerProps } from "@fluentui/react-components";
-import type { ComponentType, FunctionComponent } from "react";
+import type { ComponentType, FunctionComponent, ReactNode } from "react";
 
 import type { IDisposable, Nullable } from "core/index";
 import type { IService, ServiceDefinition } from "../modularity/serviceDefinition";
@@ -199,6 +199,13 @@ export type SidePaneDefinition = {
      */
     title: string;
 
+    /**
+     * Optional rich content to render in place of the plain text title in the pane header.
+     * When provided, this is used instead of `title` for the header display.
+     * The plain `title` string is still used for tooltips, teaching moments, and error boundaries.
+     */
+    titleContent?: ReactNode;
+
     /**
      * An optional teaching moment info. The default assumes the side pane was added by an extension and provides a generic title and description based on the display name or id, which is helpful for discoverability of new items.
      * Set this to false to suppress the teaching moment, which may be desirable for built in items or items that are added in a non-dynamic way.
@@ -629,6 +636,7 @@ const DockMenu: FunctionComponent<
 const PaneHeader: FunctionComponent<{
     id: string;
     title: string;
+    titleContent?: ReactNode;
     icon?: ComponentType;
     headerExtra?: ComponentType;
     dockOptions: Map<DockLocation, (sidePaneKey: string) => void>;
@@ -644,7 +652,7 @@ const PaneHeader: FunctionComponent<{
                     <props.icon />
                 </div>
             )}
-            <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>{title}</Subtitle2Stronger>
+            <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>{props.titleContent ?? title}</Subtitle2Stronger>
             {props.headerExtra && <props.headerExtra />}
             <DockMenu sidePaneId={id} dockOptions={dockOptions}>
                 <Button className={classes.paneHeaderButton} appearance="transparent" icon={<MoreHorizontalRegular />} />
@@ -1082,6 +1090,7 @@ function usePane(
                                 <PaneHeader
                                     id={topSelectedTab.key}
                                     title={topSelectedTab.title}
+                                    titleContent={topSelectedTab.titleContent}
                                     icon={topPanes.length > 1 ? undefined : topSelectedTab.icon}
                                     headerExtra={topSelectedTab.headerExtra}
                                     dockOptions={validTopDockOptions}
@@ -1123,6 +1132,7 @@ function usePane(
                                 <PaneHeader
                                     id={bottomSelectedTab.key}
                                     title={bottomSelectedTab.title}
+                                    titleContent={bottomSelectedTab.titleContent}
                                     icon={bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon}
                                     headerExtra={bottomSelectedTab.headerExtra}
                                     dockOptions={validBottomDockOptions}

From 3975e6aaabeec67a693c6cde3a5d2ec327f1289c Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Thu, 19 Mar 2026 14:15:55 +0100
Subject: [PATCH 12/30] Remove Dude

---
 .../animationRetargetingExtension.tsx         |   4 +-
 .../namingSchemeManager.ts                    | 124 +-----------------
 2 files changed, 6 insertions(+), 122 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 7e0b1e8b2ce..55ff7006124 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -6,7 +6,7 @@ import { ShellServiceIdentity } from "../../services/shellService";
 
 import { useState, useEffect } from "react";
 import { Observable } from "core/Misc/observable";
-import { Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Database20Regular, PersonRunning20Regular, QuestionCircle20Regular } from "@fluentui/react-icons";
+import { Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Settings20Regular, PersonRunning20Regular, QuestionCircle20Regular } from "@fluentui/react-icons";
 import { Button } from "@fluentui/react-components";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
@@ -148,7 +148,7 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                         disabled={!localIsEnabled}
                         onClick={() => currentManager?.htmlConsole.toggle()}
                     />
-                    <Button appearance="transparent" size="small" icon={<Database20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
+                    <Button appearance="transparent" size="small" icon={<Settings20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
                     <RetargetingConfigDialog
                         manager={namingSchemeManager}
                         avatarManager={avatarManager}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
index e5c6c4e114e..a6f87b28cd9 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
@@ -102,70 +102,6 @@ const MixamoBones: BoneEntry[] = [
     { name: "mixamorig:Crotch4", depth: 2 },
 ];
 
-// prettier-ignore
-// Each entry carries the Mixamo No Namespace name, the Dude bone name, and the depth of the Dude bone.
-// An empty mixamoNoNs string means no counterpart exists for that Dude bone.
-const DudeRemapToMixamo: Array<{ mixamoNoNs: string; dude: string; depth: number }> = [
-    { mixamoNoNs: "Hips", dude: "bone0", depth: 0 },
-    { mixamoNoNs: "", dude: "bone1", depth: 0 },
-    { mixamoNoNs: "Spine", dude: "bone2", depth: 1 },
-    { mixamoNoNs: "Spine1", dude: "bone3", depth: 2 },
-    { mixamoNoNs: "Spine2", dude: "bone4", depth: 3 },
-    { mixamoNoNs: "", dude: "bone5", depth: 3 },
-    { mixamoNoNs: "", dude: "bone6", depth: 3 },
-    { mixamoNoNs: "Neck", dude: "bone7", depth: 4 },
-    { mixamoNoNs: "", dude: "bone8", depth: 4 },
-    { mixamoNoNs: "", dude: "bone9", depth: 4 },
-    { mixamoNoNs: "RightEye", dude: "bone10", depth: 5 },
-    { mixamoNoNs: "LeftEye", dude: "bone11", depth: 5 },
-    { mixamoNoNs: "RightShoulder", dude: "bone12", depth: 4 },
-    { mixamoNoNs: "RightArm", dude: "bone13", depth: 5 },
-    { mixamoNoNs: "RightForeArm", dude: "bone14", depth: 6 },
-    { mixamoNoNs: "RightHand", dude: "bone15", depth: 7 },
-    { mixamoNoNs: "RightHandThumb1", dude: "bone16", depth: 8 },
-    { mixamoNoNs: "RightHandThumb2", dude: "bone17", depth: 9 },
-    { mixamoNoNs: "RightHandThumb3", dude: "bone18", depth: 10 },
-    { mixamoNoNs: "RightHandIndex1", dude: "bone19", depth: 8 },
-    { mixamoNoNs: "RightHandIndex2", dude: "bone20", depth: 9 },
-    { mixamoNoNs: "RightHandIndex3", dude: "bone21", depth: 10 },
-    { mixamoNoNs: "RightHandMiddle1", dude: "bone22", depth: 8 },
-    { mixamoNoNs: "RightHandMiddle2", dude: "bone23", depth: 9 },
-    { mixamoNoNs: "RightHandMiddle3", dude: "bone24", depth: 10 },
-    { mixamoNoNs: "RightHandRing1", dude: "bone25", depth: 8 },
-    { mixamoNoNs: "RightHandRing2", dude: "bone26", depth: 9 },
-    { mixamoNoNs: "RightHandRing3", dude: "bone27", depth: 10 },
-    { mixamoNoNs: "RightHandPinky1", dude: "bone28", depth: 8 },
-    { mixamoNoNs: "RightHandPinky2", dude: "bone29", depth: 9 },
-    { mixamoNoNs: "RightHandPinky3", dude: "bone30", depth: 10 },
-    { mixamoNoNs: "LeftShoulder", dude: "bone31", depth: 4 },
-    { mixamoNoNs: "LeftArm", dude: "bone32", depth: 5 },
-    { mixamoNoNs: "LeftForeArm", dude: "bone33", depth: 6 },
-    { mixamoNoNs: "LeftHand", dude: "bone34", depth: 7 },
-    { mixamoNoNs: "LeftHandThumb1", dude: "bone35", depth: 8 },
-    { mixamoNoNs: "LeftHandThumb2", dude: "bone36", depth: 9 },
-    { mixamoNoNs: "LeftHandThumb3", dude: "bone37", depth: 10 },
-    { mixamoNoNs: "LeftHandIndex1", dude: "bone38", depth: 8 },
-    { mixamoNoNs: "LeftHandIndex2", dude: "bone39", depth: 9 },
-    { mixamoNoNs: "LeftHandIndex3", dude: "bone40", depth: 10 },
-    { mixamoNoNs: "LeftHandMiddle1", dude: "bone41", depth: 8 },
-    { mixamoNoNs: "LeftHandMiddle2", dude: "bone42", depth: 9 },
-    { mixamoNoNs: "LeftHandMiddle3", dude: "bone43", depth: 10 },
-    { mixamoNoNs: "LeftHandRing1", dude: "bone44", depth: 8 },
-    { mixamoNoNs: "LeftHandRing2", dude: "bone45", depth: 9 },
-    { mixamoNoNs: "LeftHandRing3", dude: "bone46", depth: 10 },
-    { mixamoNoNs: "LeftHandPinky1", dude: "bone47", depth: 8 },
-    { mixamoNoNs: "LeftHandPinky2", dude: "bone48", depth: 9 },
-    { mixamoNoNs: "LeftHandPinky3", dude: "bone49", depth: 10 },
-    { mixamoNoNs: "RightUpLeg", dude: "bone50", depth: 1 },
-    { mixamoNoNs: "RightLeg", dude: "bone51", depth: 2 },
-    { mixamoNoNs: "RightFoot", dude: "bone52", depth: 3 },
-    { mixamoNoNs: "RightToeBase", dude: "bone53", depth: 4 },
-    { mixamoNoNs: "LeftUpLeg", dude: "bone54", depth: 1 },
-    { mixamoNoNs: "LeftLeg", dude: "bone55", depth: 2 },
-    { mixamoNoNs: "LeftFoot", dude: "bone56", depth: 3 },
-    { mixamoNoNs: "LeftToeBase", dude: "bone57", depth: 4 },
-];
-
 type StoredRemapping = {
     fromScheme: string;
     toScheme: string;
@@ -229,7 +165,7 @@ export class NamingSchemeManager {
     }
 
     /**
-     * Recreates any missing default naming schemes (Mixamo, Mixamo No Namespace, Dude).
+     * 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.
      */
@@ -246,13 +182,6 @@ export class NamingSchemeManager {
             );
             changed = true;
         }
-        if (!this._schemes.has("Dude")) {
-            this._schemes.set(
-                "Dude",
-                DudeRemapToMixamo.map((e) => ({ name: e.dude, depth: e.depth }))
-            );
-            changed = true;
-        }
         if (changed) {
             this._saveToStorage();
         }
@@ -260,15 +189,15 @@ export class NamingSchemeManager {
     }
 
     /**
-     * Recreates any missing default remappings (Mixamo ↔ Mixamo No Namespace, Dude ↔ Mixamo No Namespace,
-     * Dude ↔ Mixamo). Also ensures the required schemes exist, creating any that are absent.
+     * 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 all three default schemes exist before building remappings.
+        // Ensure default schemes exist before building remappings.
         if (!this._schemes.has("Mixamo")) {
             this._schemes.set("Mixamo", [...MixamoBones]);
             changed = true;
@@ -280,13 +209,6 @@ export class NamingSchemeManager {
             );
             changed = true;
         }
-        if (!this._schemes.has("Dude")) {
-            this._schemes.set(
-                "Dude",
-                DudeRemapToMixamo.map((e) => ({ name: e.dude, depth: e.depth }))
-            );
-            changed = true;
-        }
 
         // Mixamo → Mixamo No Namespace
         if (!this._remappings.some((r) => this._sameSchemes(r, "Mixamo", "Mixamo No Namespace"))) {
@@ -298,26 +220,6 @@ export class NamingSchemeManager {
             changed = true;
         }
 
-        // Dude → Mixamo No Namespace
-        if (!this._remappings.some((r) => this._sameSchemes(r, "Dude", "Mixamo No Namespace"))) {
-            const map = new Map<string, string>();
-            for (const entry of DudeRemapToMixamo) {
-                map.set(entry.dude, entry.mixamoNoNs);
-            }
-            this._remappings.push({ fromScheme: "Dude", toScheme: "Mixamo No Namespace", map });
-            changed = true;
-        }
-
-        // Dude → Mixamo
-        if (!this._remappings.some((r) => this._sameSchemes(r, "Dude", "Mixamo"))) {
-            const map = new Map<string, string>();
-            for (const entry of DudeRemapToMixamo) {
-                map.set(entry.dude, entry.mixamoNoNs !== "" ? "mixamorig:" + entry.mixamoNoNs : "");
-            }
-            this._remappings.push({ fromScheme: "Dude", toScheme: "Mixamo", map });
-            changed = true;
-        }
-
         if (changed) {
             this._saveToStorage();
         }
@@ -590,10 +492,6 @@ export class NamingSchemeManager {
             "Mixamo No Namespace",
             MixamoBones.map((e) => ({ name: e.name.replace("mixamorig:", ""), depth: e.depth }))
         );
-        this._schemes.set(
-            "Dude",
-            DudeRemapToMixamo.map((e) => ({ name: e.dude, depth: e.depth }))
-        );
 
         // Mixamo → Mixamo No Namespace remapping.
         const mixamoMap = new Map<string, string>();
@@ -602,20 +500,6 @@ export class NamingSchemeManager {
         }
         this._remappings.push({ fromScheme: "Mixamo", toScheme: "Mixamo No Namespace", map: mixamoMap });
 
-        // Dude → Mixamo No Namespace remapping.
-        const dudeToNoNsMap = new Map<string, string>();
-        for (const entry of DudeRemapToMixamo) {
-            dudeToNoNsMap.set(entry.dude, entry.mixamoNoNs);
-        }
-        this._remappings.push({ fromScheme: "Dude", toScheme: "Mixamo No Namespace", map: dudeToNoNsMap });
-
-        // Dude → Mixamo (full namespace) remapping.
-        const dudeToMixamoMap = new Map<string, string>();
-        for (const entry of DudeRemapToMixamo) {
-            dudeToMixamoMap.set(entry.dude, entry.mixamoNoNs !== "" ? "mixamorig:" + entry.mixamoNoNs : "");
-        }
-        this._remappings.push({ fromScheme: "Dude", toScheme: "Mixamo", map: dudeToMixamoMap });
-
         this._saveToStorage();
     }
 }

From 11e141017a04505c0bb0b76e46835dcbb4aa0ab6 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Thu, 19 Mar 2026 20:18:22 +0100
Subject: [PATCH 13/30] Address comments

---
 .../animationRetargetingExtension.tsx         | 94 +++----------------
 .../animationRetargetingPanel.tsx             | 38 +++++++-
 .../src/services/shellService.tsx             | 37 ++++----
 3 files changed, 64 insertions(+), 105 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 55ff7006124..804ae07a5f2 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -1,13 +1,10 @@
 import type { IDisposable } from "core/index";
-import type { FunctionComponent } from "react";
 import type { ServiceDefinition } from "../../modularity/serviceDefinition";
 import type { IShellService } from "../../services/shellService";
 import { ShellServiceIdentity } from "../../services/shellService";
 
-import { useState, useEffect } from "react";
 import { Observable } from "core/Misc/observable";
-import { Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Settings20Regular, PersonRunning20Regular, QuestionCircle20Regular } from "@fluentui/react-icons";
-import { Button } from "@fluentui/react-components";
+import { PersonRunning20Regular } from "@fluentui/react-icons";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
 import { AnimationRetargetingPanel, DefaultPanelState } from "./animationRetargetingPanel";
@@ -16,7 +13,6 @@ import type { RetargetingSceneManager } from "./retargetingSceneManager";
 import { NamingSchemeManager } from "./namingSchemeManager";
 import { AvatarManager } from "./avatarManager";
 import { AnimationManager } from "./animationManager";
-import { RetargetingConfigDialog } from "./retargetingConfigDialog";
 
 /**
  * Service definition for the Animation Retargeting extension.
@@ -95,89 +91,19 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         // Start disabled so the user opts-in to the viewport
         setEnabled(false);
 
-        // Header icon buttons: enable/disable toggle and console toggle.
-        const headerActions: FunctionComponent = () => {
-            const [localIsEnabled, setLocalIsEnabled] = useState(isEnabled);
-            const [isConsoleVisible, setIsConsoleVisible] = useState(false);
-            const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-            useEffect(() => {
-                const obs = isEnabledObs.add((v) => setLocalIsEnabled(v));
-                return () => {
-                    isEnabledObs.remove(obs);
-                };
-            }, []);
-
-            useEffect(() => {
-                const manager = currentManager;
-                if (!manager) {
-                    return;
-                }
-                setIsConsoleVisible(manager.htmlConsole.isVisible);
-                const obs = manager.htmlConsole.onVisibilityChangedObservable.add((v) => setIsConsoleVisible(v));
-                return () => {
-                    manager.htmlConsole.onVisibilityChangedObservable.remove(obs);
-                };
-            }, []);
-
-            // Re-subscribe to the console observable whenever a new manager becomes ready.
-            useEffect(() => {
-                const managerObs = onManagerReadyObs.add((manager) => {
-                    setIsConsoleVisible(manager.htmlConsole.isVisible);
-                    manager.htmlConsole.onVisibilityChangedObservable.add((v) => setIsConsoleVisible(v));
-                });
-                return () => {
-                    onManagerReadyObs.remove(managerObs);
-                };
-            }, []);
-
-            return (
-                <>
-                    <Button
-                        appearance="transparent"
-                        size="small"
-                        icon={localIsEnabled ? <EyeOff20Regular /> : <Eye20Regular />}
-                        title={localIsEnabled ? "Disable viewport" : "Enable viewport"}
-                        onClick={() => setEnabled(!localIsEnabled)}
-                    />
-                    <Button
-                        appearance={isConsoleVisible ? "primary" : "transparent"}
-                        size="small"
-                        icon={<WindowConsole20Regular />}
-                        title="Toggle console"
-                        disabled={!localIsEnabled}
-                        onClick={() => currentManager?.htmlConsole.toggle()}
-                    />
-                    <Button appearance="transparent" size="small" icon={<Settings20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
-                    <RetargetingConfigDialog
-                        manager={namingSchemeManager}
-                        avatarManager={avatarManager}
-                        animationManager={animationManager}
-                        open={isDialogOpen}
-                        onClose={() => {
-                            setIsDialogOpen(false);
-                            onConfigChangedObs.notifyObservers();
-                        }}
-                    />
-                </>
-            );
-        };
-
         const panelReg = shellService.addSidePane({
             key: "AnimationRetargetingPanel",
             title: "Animation Retargeting",
-            titleContent: (
-                <>
-                    Animation Retargeting
-                    <QuestionCircle20Regular
-                        style={{ marginLeft: "4px", cursor: "pointer", verticalAlign: "middle" }}
-                        title="Documentation"
-                        onClick={() => window.open("https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/", "_blank")}
-                    />
-                </>
+            infoLabel: (
+                <span>
+                    Click{" "}
+                    <a href="https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/" target="_blank" rel="noopener noreferrer">
+                        here
+                    </a>{" "}
+                    to open the documentation.
+                </span>
             ),
             icon: PersonRunning20Regular,
-            headerExtra: headerActions,
             horizontalLocation: "left",
             verticalLocation: "top",
             content: () => (
@@ -191,6 +117,8 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                     avatarManager={avatarManager}
                     animationManager={animationManager}
                     stateStore={persistedPanelState}
+                    onSetEnabled={setEnabled}
+                    onToggleConsole={() => currentManager?.htmlConsole.toggle()}
                 />
             ),
         });
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index 51c011d7264..3368e6e617c 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -4,7 +4,7 @@ import { FilesInputStore } from "core/Misc/filesInputStore";
 import { SceneLoader } from "core/Loading/sceneLoader";
 import type { Transform } from "../../components/properties/transformProperties";
 import { makeStyles, tokens, Body1Strong, Button } from "@fluentui/react-components";
-import { ArrowClockwise20Regular } from "@fluentui/react-icons";
+import { ArrowClockwise20Regular, Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Settings20Regular } from "@fluentui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
 import { CheckboxPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/checkboxPropertyLine";
@@ -18,6 +18,7 @@ import type { NamingSchemeManager } from "./namingSchemeManager";
 import type { AvatarManager } from "./avatarManager";
 import type { AnimationManager } from "./animationManager";
 import type { GizmoType } from "./avatar";
+import { RetargetingConfigDialog } from "./retargetingConfigDialog";
 
 /**
  * Mirrors gui.ts _getSourceTransformNodeList: returns animation transform nodes filtered
@@ -57,8 +58,12 @@ const useStyles = makeStyles({
         height: "100%",
         overflow: "hidden",
     },
-    enableRow: {
-        display: "none", // removed: button moved to title bar headerExtra
+    toolbar: {
+        display: "flex",
+        gap: "2px",
+        padding: "4px",
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        flexShrink: 0,
     },
     actionRow: {
         flexShrink: 0,
@@ -182,6 +187,8 @@ export type AnimationRetargetingPanelProps = {
     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;
 };
 
 export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPanelProps> = ({
@@ -194,6 +201,8 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     avatarManager,
     animationManager,
     stateStore,
+    onSetEnabled,
+    onToggleConsole,
 }) => {
     const classes = useStyles();
     const managerRef = useRef<RetargetingSceneManager | null>(null);
@@ -201,6 +210,8 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     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);
@@ -733,6 +744,27 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
 
     return (
         <div className={classes.root}>
+            <div className={classes.toolbar}>
+                <Button
+                    appearance="transparent"
+                    size="small"
+                    icon={isEnabled ? <EyeOff20Regular /> : <Eye20Regular />}
+                    title={isEnabled ? "Disable viewport" : "Enable viewport"}
+                    onClick={() => onSetEnabled(!isEnabled)}
+                />
+                <Button appearance="transparent" size="small" icon={<WindowConsole20Regular />} title="Toggle console" disabled={!isEnabled} onClick={onToggleConsole} />
+                <Button appearance="transparent" size="small" icon={<Settings20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
+                <RetargetingConfigDialog
+                    manager={namingSchemeManager}
+                    avatarManager={avatarManager}
+                    animationManager={animationManager}
+                    open={isDialogOpen}
+                    onClose={() => {
+                        setIsDialogOpen(false);
+                        onConfigChangedObs.notifyObservers();
+                    }}
+                />
+            </div>
             {!isEnabled ? (
                 <div className={classes.disabledOverlay}>Extension is disabled -- original scene is shown</div>
             ) : (
diff --git a/packages/dev/inspector-v2/src/services/shellService.tsx b/packages/dev/inspector-v2/src/services/shellService.tsx
index b4539b9a5d1..2c6fa915103 100644
--- a/packages/dev/inspector-v2/src/services/shellService.tsx
+++ b/packages/dev/inspector-v2/src/services/shellService.tsx
@@ -1,5 +1,5 @@
 import type { MenuTriggerProps } from "@fluentui/react-components";
-import type { ComponentType, FunctionComponent, ReactNode } from "react";
+import type { ComponentType, FunctionComponent } from "react";
 
 import type { IDisposable, Nullable } from "core/index";
 import type { IService, ServiceDefinition } from "../modularity/serviceDefinition";
@@ -8,6 +8,7 @@ import type { SettingDescriptor } from "./settingsStore";
 import {
     Button,
     Divider,
+    InfoLabel as FluentInfoLabel,
     Toolbar as FluentToolbar,
     makeStyles,
     Menu,
@@ -199,13 +200,6 @@ export type SidePaneDefinition = {
      */
     title: string;
 
-    /**
-     * Optional rich content to render in place of the plain text title in the pane header.
-     * When provided, this is used instead of `title` for the header display.
-     * The plain `title` string is still used for tooltips, teaching moments, and error boundaries.
-     */
-    titleContent?: ReactNode;
-
     /**
      * An optional teaching moment info. The default assumes the side pane was added by an extension and provides a generic title and description based on the display name or id, which is helpful for discoverability of new items.
      * Set this to false to suppress the teaching moment, which may be desirable for built in items or items that are added in a non-dynamic way.
@@ -221,10 +215,9 @@ export type SidePaneDefinition = {
     keepMounted?: boolean;
 
     /**
-     * An optional component to render at the right side of the pane header, between the title and
-     * the dock menu button. Useful for adding icon-button actions specific to the pane.
+     * Optional info popup content shown next to the title.
      */
-    headerExtra?: ComponentType;
+    infoLabel?: JSX.Element;
 };
 
 type RegisteredSidePane = {
@@ -636,9 +629,8 @@ const DockMenu: FunctionComponent<
 const PaneHeader: FunctionComponent<{
     id: string;
     title: string;
-    titleContent?: ReactNode;
     icon?: ComponentType;
-    headerExtra?: ComponentType;
+    infoLabel?: JSX.Element;
     dockOptions: Map<DockLocation, (sidePaneKey: string) => void>;
 }> = (props) => {
     const { id, title, dockOptions } = props;
@@ -652,8 +644,17 @@ const PaneHeader: FunctionComponent<{
                     <props.icon />
                 </div>
             )}
-            <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>{props.titleContent ?? title}</Subtitle2Stronger>
-            {props.headerExtra && <props.headerExtra />}
+            {props.infoLabel ? (
+                <FluentInfoLabel
+                    htmlFor={id}
+                    info={<div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>{props.infoLabel}</div>}
+                    className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}
+                >
+                    <Subtitle2Stronger>{title}</Subtitle2Stronger>
+                </FluentInfoLabel>
+            ) : (
+                <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>{title}</Subtitle2Stronger>
+            )}
             <DockMenu sidePaneId={id} dockOptions={dockOptions}>
                 <Button className={classes.paneHeaderButton} appearance="transparent" icon={<MoreHorizontalRegular />} />
             </DockMenu>
@@ -1090,9 +1091,8 @@ function usePane(
                                 <PaneHeader
                                     id={topSelectedTab.key}
                                     title={topSelectedTab.title}
-                                    titleContent={topSelectedTab.titleContent}
                                     icon={topPanes.length > 1 ? undefined : topSelectedTab.icon}
-                                    headerExtra={topSelectedTab.headerExtra}
+                                    infoLabel={topSelectedTab.infoLabel}
                                     dockOptions={validTopDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}
@@ -1132,9 +1132,8 @@ function usePane(
                                 <PaneHeader
                                     id={bottomSelectedTab.key}
                                     title={bottomSelectedTab.title}
-                                    titleContent={bottomSelectedTab.titleContent}
                                     icon={bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon}
-                                    headerExtra={bottomSelectedTab.headerExtra}
+                                    infoLabel={bottomSelectedTab.infoLabel}
                                     dockOptions={validBottomDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}

From b8a23879cef796697b68c87f113e804e1c1590cf Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Thu, 19 Mar 2026 20:41:30 +0100
Subject: [PATCH 14/30] More fixes

---
 .../animationRetargetingExtension.tsx              |  9 +++++----
 .../animationRetargetingPanel.tsx                  | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 804ae07a5f2..83cbc1b929f 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -4,6 +4,7 @@ import type { IShellService } from "../../services/shellService";
 import { ShellServiceIdentity } from "../../services/shellService";
 
 import { Observable } from "core/Misc/observable";
+import { Body1, Link } from "@fluentui/react-components";
 import { PersonRunning20Regular } from "@fluentui/react-icons";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
@@ -95,13 +96,13 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
             key: "AnimationRetargetingPanel",
             title: "Animation Retargeting",
             infoLabel: (
-                <span>
+                <Body1>
                     Click{" "}
-                    <a href="https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/" target="_blank" rel="noopener noreferrer">
+                    <Link href="https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/" target="_blank" inline>
                         here
-                    </a>{" "}
+                    </Link>{" "}
                     to open the documentation.
-                </span>
+                </Body1>
             ),
             icon: PersonRunning20Regular,
             horizontalLocation: "left",
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index 3368e6e617c..c07a6d21a14 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -409,6 +409,10 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
         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) => {
@@ -594,6 +598,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 manager.animationSource?.onGizmoNodeSelectedObservable.remove(animGizmoObs);
                 manager.animationSource?.onPlayingObservable.remove(animPlayingObs);
                 manager.onRetargetDoneObservable.remove(retargetObs);
+                manager.htmlConsole.onVisibilityChangedObservable.remove(consoleObs);
             };
         };
 
@@ -752,7 +757,14 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                     title={isEnabled ? "Disable viewport" : "Enable viewport"}
                     onClick={() => onSetEnabled(!isEnabled)}
                 />
-                <Button appearance="transparent" size="small" icon={<WindowConsole20Regular />} title="Toggle console" disabled={!isEnabled} onClick={onToggleConsole} />
+                <Button
+                    appearance={isConsoleVisible ? "primary" : "transparent"}
+                    size="small"
+                    icon={<WindowConsole20Regular />}
+                    title="Toggle console"
+                    disabled={!isEnabled}
+                    onClick={onToggleConsole}
+                />
                 <Button appearance="transparent" size="small" icon={<Settings20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
                 <RetargetingConfigDialog
                     manager={namingSchemeManager}

From 933ae33a9c1ea289e73fa8c1d5de952b225b1cd8 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Thu, 19 Mar 2026 21:04:23 +0100
Subject: [PATCH 15/30] Fix documentation link

---
 .../animationRetargetingExtension.tsx         | 11 +-----
 .../src/services/shellService.tsx             | 37 ++++++++++++-------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 83cbc1b929f..2495428bf63 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -4,7 +4,6 @@ import type { IShellService } from "../../services/shellService";
 import { ShellServiceIdentity } from "../../services/shellService";
 
 import { Observable } from "core/Misc/observable";
-import { Body1, Link } from "@fluentui/react-components";
 import { PersonRunning20Regular } from "@fluentui/react-icons";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
@@ -95,15 +94,7 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         const panelReg = shellService.addSidePane({
             key: "AnimationRetargetingPanel",
             title: "Animation Retargeting",
-            infoLabel: (
-                <Body1>
-                    Click{" "}
-                    <Link href="https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/" target="_blank" inline>
-                        here
-                    </Link>{" "}
-                    to open the documentation.
-                </Body1>
-            ),
+            onInfoClick: () => window.open("https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/", "_blank"),
             icon: PersonRunning20Regular,
             horizontalLocation: "left",
             verticalLocation: "top",
diff --git a/packages/dev/inspector-v2/src/services/shellService.tsx b/packages/dev/inspector-v2/src/services/shellService.tsx
index 2c6fa915103..13794d71a76 100644
--- a/packages/dev/inspector-v2/src/services/shellService.tsx
+++ b/packages/dev/inspector-v2/src/services/shellService.tsx
@@ -8,7 +8,6 @@ import type { SettingDescriptor } from "./settingsStore";
 import {
     Button,
     Divider,
-    InfoLabel as FluentInfoLabel,
     Toolbar as FluentToolbar,
     makeStyles,
     Menu,
@@ -37,6 +36,7 @@ import {
     PanelRightContractRegular,
     PanelRightExpandRegular,
     PictureInPictureEnterRegular,
+    InfoRegular,
 } from "@fluentui/react-icons";
 import { Fade as FluentFade } from "@fluentui/react-motion-components-preview";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -215,9 +215,15 @@ export type SidePaneDefinition = {
     keepMounted?: boolean;
 
     /**
-     * Optional info popup content shown next to the title.
+     * Optional info content shown in a popup next to the title when hovering the info icon.
      */
     infoLabel?: JSX.Element;
+
+    /**
+     * Optional callback invoked when the info icon is clicked.
+     * When provided without `infoLabel`, the icon acts as a simple button.
+     */
+    onInfoClick?: () => void;
 };
 
 type RegisteredSidePane = {
@@ -631,6 +637,7 @@ const PaneHeader: FunctionComponent<{
     title: string;
     icon?: ComponentType;
     infoLabel?: JSX.Element;
+    onInfoClick?: () => void;
     dockOptions: Map<DockLocation, (sidePaneKey: string) => void>;
 }> = (props) => {
     const { id, title, dockOptions } = props;
@@ -644,17 +651,19 @@ const PaneHeader: FunctionComponent<{
                     <props.icon />
                 </div>
             )}
-            {props.infoLabel ? (
-                <FluentInfoLabel
-                    htmlFor={id}
-                    info={<div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>{props.infoLabel}</div>}
-                    className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}
-                >
-                    <Subtitle2Stronger>{title}</Subtitle2Stronger>
-                </FluentInfoLabel>
-            ) : (
-                <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>{title}</Subtitle2Stronger>
-            )}
+            <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>
+                {title}
+                {(props.infoLabel || props.onInfoClick) && (
+                    <Button
+                        appearance="transparent"
+                        size="small"
+                        icon={<InfoRegular />}
+                        style={{ marginLeft: "4px", verticalAlign: "middle" }}
+                        title={props.infoLabel ? undefined : "Info"}
+                        onClick={props.onInfoClick}
+                    />
+                )}
+            </Subtitle2Stronger>
             <DockMenu sidePaneId={id} dockOptions={dockOptions}>
                 <Button className={classes.paneHeaderButton} appearance="transparent" icon={<MoreHorizontalRegular />} />
             </DockMenu>
@@ -1093,6 +1102,7 @@ function usePane(
                                     title={topSelectedTab.title}
                                     icon={topPanes.length > 1 ? undefined : topSelectedTab.icon}
                                     infoLabel={topSelectedTab.infoLabel}
+                                    onInfoClick={topSelectedTab.onInfoClick}
                                     dockOptions={validTopDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}
@@ -1134,6 +1144,7 @@ function usePane(
                                     title={bottomSelectedTab.title}
                                     icon={bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon}
                                     infoLabel={bottomSelectedTab.infoLabel}
+                                    onInfoClick={bottomSelectedTab.onInfoClick}
                                     dockOptions={validBottomDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}

From c8cd98ea3327eb929e1596b8eadaec6c169042d0 Mon Sep 17 00:00:00 2001
From: Ryan Tremblay <ryan.tremblay@microsoft.com>
Date: Thu, 19 Mar 2026 15:12:58 -0700
Subject: [PATCH 16/30] Clean up ShellService changes

---
 .../animationRetargetingExtension.tsx         |  8 +++-
 .../src/services/shellService.tsx             | 44 +++++++------------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 2495428bf63..3ac9fc6339b 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -5,6 +5,7 @@ import { ShellServiceIdentity } from "../../services/shellService";
 
 import { Observable } from "core/Misc/observable";
 import { PersonRunning20Regular } from "@fluentui/react-icons";
+import { Body1 } from "@fluentui/react-components";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
 import { AnimationRetargetingPanel, DefaultPanelState } from "./animationRetargetingPanel";
@@ -13,6 +14,7 @@ import type { RetargetingSceneManager } from "./retargetingSceneManager";
 import { NamingSchemeManager } from "./namingSchemeManager";
 import { AvatarManager } from "./avatarManager";
 import { AnimationManager } from "./animationManager";
+import { Link } from "shared-ui-components/fluent/primitives/link";
 
 /**
  * Service definition for the Animation Retargeting extension.
@@ -94,7 +96,11 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         const panelReg = shellService.addSidePane({
             key: "AnimationRetargetingPanel",
             title: "Animation Retargeting",
-            onInfoClick: () => window.open("https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/", "_blank"),
+            description: (
+                <Body1>
+                    Learn more in the <Link url="https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/" value="docs" />.
+                </Body1>
+            ),
             icon: PersonRunning20Regular,
             horizontalLocation: "left",
             verticalLocation: "top",
diff --git a/packages/dev/inspector-v2/src/services/shellService.tsx b/packages/dev/inspector-v2/src/services/shellService.tsx
index 13794d71a76..d65f1a2ac26 100644
--- a/packages/dev/inspector-v2/src/services/shellService.tsx
+++ b/packages/dev/inspector-v2/src/services/shellService.tsx
@@ -9,6 +9,7 @@ import {
     Button,
     Divider,
     Toolbar as FluentToolbar,
+    InfoLabel,
     makeStyles,
     Menu,
     MenuGroup,
@@ -19,9 +20,9 @@ import {
     MenuTrigger,
     mergeClasses,
     SplitButton,
-    Subtitle2Stronger,
     tokens,
     ToolbarRadioButton,
+    typographyStyles,
 } from "@fluentui/react-components";
 import {
     LayoutColumnTwoFocusLeftFilled,
@@ -36,7 +37,6 @@ import {
     PanelRightContractRegular,
     PanelRightExpandRegular,
     PictureInPictureEnterRegular,
-    InfoRegular,
 } from "@fluentui/react-icons";
 import { Fade as FluentFade } from "@fluentui/react-motion-components-preview";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -217,13 +217,7 @@ export type SidePaneDefinition = {
     /**
      * Optional info content shown in a popup next to the title when hovering the info icon.
      */
-    infoLabel?: JSX.Element;
-
-    /**
-     * Optional callback invoked when the info icon is clicked.
-     * When provided without `infoLabel`, the icon acts as a simple button.
-     */
-    onInfoClick?: () => void;
+    description?: JSX.Element;
 };
 
 type RegisteredSidePane = {
@@ -487,6 +481,9 @@ const useStyles = makeStyles({
     paneHeaderText: {
         flex: 1,
     },
+    paneHeaderLabel: {
+        ...typographyStyles.subtitle2Stronger,
+    },
     paneHeaderTextNoIcon: {
         marginLeft: tokens.spacingHorizontalM,
     },
@@ -636,11 +633,11 @@ const PaneHeader: FunctionComponent<{
     id: string;
     title: string;
     icon?: ComponentType;
-    infoLabel?: JSX.Element;
+    description?: JSX.Element;
     onInfoClick?: () => void;
     dockOptions: Map<DockLocation, (sidePaneKey: string) => void>;
 }> = (props) => {
-    const { id, title, dockOptions } = props;
+    const { id, title, description, dockOptions } = props;
 
     const classes = useStyles();
 
@@ -651,19 +648,14 @@ const PaneHeader: FunctionComponent<{
                     <props.icon />
                 </div>
             )}
-            <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>
+            <InfoLabel
+                className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}
+                label={{ className: classes.paneHeaderLabel }}
+                htmlFor={id}
+                info={description}
+            >
                 {title}
-                {(props.infoLabel || props.onInfoClick) && (
-                    <Button
-                        appearance="transparent"
-                        size="small"
-                        icon={<InfoRegular />}
-                        style={{ marginLeft: "4px", verticalAlign: "middle" }}
-                        title={props.infoLabel ? undefined : "Info"}
-                        onClick={props.onInfoClick}
-                    />
-                )}
-            </Subtitle2Stronger>
+            </InfoLabel>
             <DockMenu sidePaneId={id} dockOptions={dockOptions}>
                 <Button className={classes.paneHeaderButton} appearance="transparent" icon={<MoreHorizontalRegular />} />
             </DockMenu>
@@ -1101,8 +1093,7 @@ function usePane(
                                     id={topSelectedTab.key}
                                     title={topSelectedTab.title}
                                     icon={topPanes.length > 1 ? undefined : topSelectedTab.icon}
-                                    infoLabel={topSelectedTab.infoLabel}
-                                    onInfoClick={topSelectedTab.onInfoClick}
+                                    description={topSelectedTab.description}
                                     dockOptions={validTopDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}
@@ -1143,8 +1134,7 @@ function usePane(
                                     id={bottomSelectedTab.key}
                                     title={bottomSelectedTab.title}
                                     icon={bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon}
-                                    infoLabel={bottomSelectedTab.infoLabel}
-                                    onInfoClick={bottomSelectedTab.onInfoClick}
+                                    description={bottomSelectedTab.description}
                                     dockOptions={validBottomDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}

From 931475098fbb2646a1e761a5a3066da1c39d0d6a Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Fri, 20 Mar 2026 11:11:23 +0100
Subject: [PATCH 17/30] Address comments related to visuals

---
 .../animationRetargetingExtension.tsx         |  4 +-
 .../animationRetargetingPanel.tsx             | 86 ++++++++++++-------
 .../animationRetargeting/animationsPanel.tsx  | 12 +--
 .../animationRetargeting/avatarsPanel.tsx     | 10 +--
 .../retargetingConfigDialog.tsx               | 50 ++++++-----
 5 files changed, 93 insertions(+), 69 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 2495428bf63..01ed5156ac0 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -4,7 +4,7 @@ import type { IShellService } from "../../services/shellService";
 import { ShellServiceIdentity } from "../../services/shellService";
 
 import { Observable } from "core/Misc/observable";
-import { PersonRunning20Regular } from "@fluentui/react-icons";
+import { PersonRunningRegular } from "@fluentui/react-icons";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
 import { AnimationRetargetingPanel, DefaultPanelState } from "./animationRetargetingPanel";
@@ -95,7 +95,7 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
             key: "AnimationRetargetingPanel",
             title: "Animation Retargeting",
             onInfoClick: () => window.open("https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/", "_blank"),
-            icon: PersonRunning20Regular,
+            icon: PersonRunningRegular,
             horizontalLocation: "left",
             verticalLocation: "top",
             content: () => (
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index c07a6d21a14..1e3cd7dfc7e 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -4,10 +4,10 @@ import { FilesInputStore } from "core/Misc/filesInputStore";
 import { SceneLoader } from "core/Loading/sceneLoader";
 import type { Transform } from "../../components/properties/transformProperties";
 import { makeStyles, tokens, Body1Strong, Button } from "@fluentui/react-components";
-import { ArrowClockwise20Regular, Eye20Regular, EyeOff20Regular, WindowConsole20Regular, Settings20Regular } from "@fluentui/react-icons";
+import { ArrowClockwiseRegular, EyeRegular, EyeOffRegular, WindowConsoleRegular, SettingsRegular } from "@fluentui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
-import { CheckboxPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/checkboxPropertyLine";
+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";
@@ -19,6 +19,7 @@ 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
@@ -60,8 +61,8 @@ const useStyles = makeStyles({
     },
     toolbar: {
         display: "flex",
-        gap: "2px",
-        padding: "4px",
+        gap: tokens.spacingHorizontalXXS,
+        padding: tokens.spacingVerticalXS,
         borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
         flexShrink: 0,
     },
@@ -110,6 +111,27 @@ const useStyles = makeStyles({
         boxSizing: "border-box",
         flexShrink: 0,
     },
+    loadingText: {
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalM}`,
+        fontSize: "12px",
+        color: tokens.colorNeutralForeground3,
+    },
+    dropdownRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+    },
+    flexOne: {
+        flex: 1,
+    },
+    indented: {
+        paddingLeft: tokens.spacingHorizontalL,
+    },
+    errorHint: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: "12px",
+        paddingLeft: tokens.spacingHorizontalL,
+    },
 });
 
 const GizmoTypeOptions: { label: string; value: string }[] = [
@@ -753,19 +775,19 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 <Button
                     appearance="transparent"
                     size="small"
-                    icon={isEnabled ? <EyeOff20Regular /> : <Eye20Regular />}
+                    icon={isEnabled ? <EyeOffRegular /> : <EyeRegular />}
                     title={isEnabled ? "Disable viewport" : "Enable viewport"}
                     onClick={() => onSetEnabled(!isEnabled)}
                 />
                 <Button
                     appearance={isConsoleVisible ? "primary" : "transparent"}
                     size="small"
-                    icon={<WindowConsole20Regular />}
+                    icon={<WindowConsoleRegular />}
                     title="Toggle console"
                     disabled={!isEnabled}
                     onClick={onToggleConsole}
                 />
-                <Button appearance="transparent" size="small" icon={<Settings20Regular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
+                <Button appearance="transparent" size="small" icon={<SettingsRegular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
                 <RetargetingConfigDialog
                     manager={namingSchemeManager}
                     avatarManager={avatarManager}
@@ -780,7 +802,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             {!isEnabled ? (
                 <div className={classes.disabledOverlay}>Extension is disabled -- original scene is shown</div>
             ) : (
-                <>
+                <UXContextProvider>
                     <div className={classes.actionRow}>
                         <ButtonLine
                             label="Retarget"
@@ -798,12 +820,12 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                         />
                     </div>
                     <div className={classes.scrollContent}>
-                        {loadingText && <div style={{ padding: "4px 12px", fontSize: "12px", color: tokens.colorNeutralForeground3 }}>{loadingText}</div>}
+                        {loadingText && <div className={classes.loadingText}>{loadingText}</div>}
                         <BabylonAccordion>
                             {/* Avatar */}
                             <BabylonAccordionSection title="Avatar">
-                                <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-                                    <div style={{ flex: 1 }}>
+                                <div className={classes.dropdownRow}>
+                                    <div className={classes.flexOne}>
                                         <StringDropdownPropertyLine
                                             label="Name"
                                             description="Select the avatar model to retarget animations onto"
@@ -818,7 +840,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                     <Button
                                         size="small"
                                         appearance="subtle"
-                                        icon={<ArrowClockwise20Regular />}
+                                        icon={<ArrowClockwiseRegular />}
                                         title="Reload avatar"
                                         disabled={!avatarName}
                                         onClick={() => {
@@ -826,7 +848,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         }}
                                     />
                                 </div>
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Rescale"
                                     description="Automatically rescale the avatar if it's too large or too small"
                                     value={avatarRescaleAvatar}
@@ -835,7 +857,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         void handleLoadAvatar(avatarName, v);
                                     }}
                                 />
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Show skeleton"
                                     description="Display the avatar skeleton overlay"
                                     value={avatarShowSkeleton}
@@ -844,7 +866,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         managerRef.current?.avatar?.setSkeletonVisible(v);
                                     }}
                                 />
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Show skel. local axes"
                                     description="Show local coordinate axes on each skeleton bone (requires Show skeleton)"
                                     value={avatarShowSkeletonLocalAxes}
@@ -895,7 +917,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             </BabylonAccordionSection>
                             {/* Avatar Gizmo */}
                             <BabylonAccordionSection title="Avatar Gizmo">
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Enabled"
                                     description="Enable the transform gizmo to edit bone positions. Only available when the avatar is in rest pose"
                                     value={avatarGizmoEnabled && !isAvatarPlaying}
@@ -936,8 +958,8 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             </BabylonAccordionSection>
                             {/* Animation */}
                             <BabylonAccordionSection title="Animation">
-                                <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-                                    <div style={{ flex: 1 }}>
+                                <div className={classes.dropdownRow}>
+                                    <div className={classes.flexOne}>
                                         <StringDropdownPropertyLine
                                             label="Name"
                                             description="Select the animation to retarget onto the avatar"
@@ -952,7 +974,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                     <Button
                                         size="small"
                                         appearance="subtle"
-                                        icon={<ArrowClockwise20Regular />}
+                                        icon={<ArrowClockwiseRegular />}
                                         title="Reload animation"
                                         disabled={!animationName}
                                         onClick={() => {
@@ -960,7 +982,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         }}
                                     />
                                 </div>
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Show skel. local axes"
                                     description="Show local coordinate axes on each animation bone"
                                     value={animationShowSkeletonLocalAxes}
@@ -1010,7 +1032,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             </BabylonAccordionSection>
                             {/* Animation Gizmo */}
                             <BabylonAccordionSection title="Animation Gizmo">
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Enabled"
                                     description="Enable the transform gizmo to edit node positions. Only available when the animation is stopped"
                                     value={animationGizmoEnabled && !isAnimPlaying}
@@ -1051,38 +1073,38 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             </BabylonAccordionSection>
                             {/* Retarget Options */}
                             <BabylonAccordionSection title="Retarget Options">
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Fix animations"
                                     description="Apply fixes to animation data before retargeting"
                                     value={fixAnimations}
                                     onChange={setFixAnimations}
                                 />
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Check hierarchy"
                                     description="Verify that the bone hierarchy matches between source and target"
                                     value={checkHierarchy}
                                     onChange={setCheckHierarchy}
                                 />
-                                <CheckboxPropertyLine
+                                <SwitchPropertyLine
                                     label="Retarget keys"
                                     description="Retarget animation keyframes to match the avatar skeleton"
                                     value={retargetAnimationKeys}
                                     onChange={setRetargetAnimationKeys}
                                 />
-                                <CheckboxPropertyLine
+                                <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}
                                 />
-                                <CheckboxPropertyLine
+                                <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 style={{ paddingLeft: "16px" }}>
-                                    <CheckboxPropertyLine
+                                <div className={classes.indented}>
+                                    <SwitchPropertyLine
                                         label="Dynamic ref. node"
                                         description="Dynamically update the ground reference node each frame (requires Fix ground reference)"
                                         value={fixGroundReferenceDynamicRefNode}
@@ -1102,9 +1124,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                     </div>
                                 </div>
                                 {rootNodeName !== "Auto" && rootNodeName === groundReferenceNodeName && (
-                                    <span style={{ color: tokens.colorPaletteRedForeground1, fontSize: "12px", paddingLeft: "16px" }}>
-                                        Root node and Ground ref. node must be different.
-                                    </span>
+                                    <span className={classes.errorHint}>Root node and Ground ref. node must be different.</span>
                                 )}
                                 <div className={classes.boneDropdownWrapper}>
                                     <Body1Strong className={classes.boneDropdownLabel}>Ground ref. node</Body1Strong>
@@ -1117,7 +1137,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         />
                                     </div>
                                 </div>
-                                <div style={{ paddingLeft: "16px" }}>
+                                <div className={classes.indented}>
                                     <StringDropdownPropertyLine
                                         label="Vertical axis"
                                         description="The vertical axis used for ground reference correction (Auto detects automatically)"
@@ -1130,7 +1150,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             </BabylonAccordionSection>
                         </BabylonAccordion>
                     </div>
-                </>
+                </UXContextProvider>
             )}
         </div>
     );
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index c572562a54b..a1b466f61b9 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -22,7 +22,7 @@ import {
     DialogActions,
     Spinner,
 } from "@fluentui/react-components";
-import { Add20Regular, Delete20Regular, Edit20Regular, ArrowUpload20Regular } from "@fluentui/react-icons";
+import { AddRegular, DeleteRegular, EditRegular, ArrowUploadRegular } from "@fluentui/react-icons";
 import { NullEngine } from "core/Engines/nullEngine";
 import { Scene } from "core/scene";
 import { ImportMeshAsync, SceneLoader } from "core/Loading/sceneLoader";
@@ -156,7 +156,7 @@ const useStyles = makeStyles({
     animRow: {
         display: "flex",
         alignItems: "center",
-        padding: `2px ${tokens.spacingHorizontalS}`,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
         gap: tokens.spacingHorizontalS,
         fontSize: "12px",
         borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
@@ -675,7 +675,7 @@ export const AnimationsPanel: FunctionComponent<{
 
             <div className={classes.listHeader}>
                 <div className={classes.listButtons}>
-                    <Button size="small" icon={<Add20Regular />} onClick={startAdd} disabled={!!editing}>
+                    <Button size="small" icon={<AddRegular />} onClick={startAdd} disabled={!!editing}>
                         Add
                     </Button>
                 </div>
@@ -690,14 +690,14 @@ export const AnimationsPanel: FunctionComponent<{
                         <Button
                             size="small"
                             appearance="transparent"
-                            icon={<Edit20Regular />}
+                            icon={<EditRegular />}
                             title="Edit"
                             disabled={!!editing}
                             onClick={() => {
                                 void startEdit(animation);
                             }}
                         />
-                        <Button size="small" appearance="transparent" icon={<Delete20Regular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(animation)} />
+                        <Button size="small" appearance="transparent" icon={<DeleteRegular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(animation)} />
                     </div>
                 ))}
             </div>
@@ -745,7 +745,7 @@ export const AnimationsPanel: FunctionComponent<{
                         onDrop={handleDrop}
                         onClick={() => fileInputRef.current?.click()}
                     >
-                        <ArrowUpload20Regular />
+                        <ArrowUploadRegular />
                         <div>Drop file(s) here or click to browse</div>
                         <input ref={fileInputRef} type="file" multiple style={{ display: "none" }} onChange={handleFileInput} />
                     </div>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index 6b0fea6f77b..0e57784c23e 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -21,7 +21,7 @@ import {
     DialogActions,
     Spinner,
 } from "@fluentui/react-components";
-import { Add20Regular, Delete20Regular, Edit20Regular, ArrowUpload20Regular } from "@fluentui/react-icons";
+import { AddRegular, DeleteRegular, EditRegular, ArrowUploadRegular } from "@fluentui/react-icons";
 import { NullEngine } from "core/Engines/nullEngine";
 import { Scene } from "core/scene";
 import { ImportMeshAsync, SceneLoader } from "core/Loading/sceneLoader";
@@ -611,7 +611,7 @@ export const AvatarsPanel: FunctionComponent<{
 
             <div className={classes.listHeader}>
                 <div className={classes.listButtons}>
-                    <Button size="small" icon={<Add20Regular />} onClick={startAdd} disabled={!!editing}>
+                    <Button size="small" icon={<AddRegular />} onClick={startAdd} disabled={!!editing}>
                         Add
                     </Button>
                 </div>
@@ -626,14 +626,14 @@ export const AvatarsPanel: FunctionComponent<{
                         <Button
                             size="small"
                             appearance="transparent"
-                            icon={<Edit20Regular />}
+                            icon={<EditRegular />}
                             title="Edit"
                             disabled={!!editing}
                             onClick={() => {
                                 void startEdit(avatar);
                             }}
                         />
-                        <Button size="small" appearance="transparent" icon={<Delete20Regular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(avatar)} />
+                        <Button size="small" appearance="transparent" icon={<DeleteRegular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(avatar)} />
                     </div>
                 ))}
             </div>
@@ -681,7 +681,7 @@ export const AvatarsPanel: FunctionComponent<{
                         onDrop={handleDrop}
                         onClick={() => fileInputRef.current?.click()}
                     >
-                        <ArrowUpload20Regular />
+                        <ArrowUploadRegular />
                         <div>Drop file(s) here or click to browse</div>
                         <input ref={fileInputRef} type="file" multiple style={{ display: "none" }} onChange={handleFileInput} />
                     </div>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index a25e4520cc9..3d3d093d45c 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -25,14 +25,14 @@ import {
     Spinner,
 } from "@fluentui/react-components";
 import {
-    Add20Regular,
-    Delete20Regular,
-    Edit20Regular,
-    ArrowCounterclockwise20Regular,
-    ArrowBidirectionalUpDown20Regular,
-    ArrowDownload20Regular,
-    ArrowUpload20Regular,
-    Dismiss20Regular,
+    AddRegular,
+    DeleteRegular,
+    EditRegular,
+    ArrowCounterclockwiseRegular,
+    ArrowBidirectionalUpDownRegular,
+    ArrowDownloadRegular,
+    ArrowUploadRegular,
+    DismissRegular,
 } from "@fluentui/react-icons";
 import { NullEngine } from "core/Engines/nullEngine";
 import { Scene } from "core/scene";
@@ -162,7 +162,7 @@ const useStyles = makeStyles({
     mappingRow: {
         display: "flex",
         alignItems: "center",
-        padding: `2px ${tokens.spacingHorizontalS}`,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
         gap: tokens.spacingHorizontalS,
         borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
         ":last-child": { borderBottom: "none" },
@@ -180,7 +180,7 @@ const useStyles = makeStyles({
     mappingSelect: {
         flex: 1,
         fontSize: "12px",
-        padding: "2px 4px",
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS}`,
         border: `1px solid ${tokens.colorNeutralStroke1}`,
         borderRadius: tokens.borderRadiusSmall,
         backgroundColor: tokens.colorNeutralBackground1,
@@ -229,6 +229,10 @@ const useStyles = makeStyles({
             outlineOffset: "1px",
         },
     },
+    titleButtons: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+    },
 });
 
 // Session-only size persistence: survives dialog close/reopen but not page reload.
@@ -541,10 +545,10 @@ const SchemesPanel: FunctionComponent<{
 
             <div className={classes.listHeader}>
                 <div className={classes.listButtons}>
-                    <Button size="small" icon={<ArrowCounterclockwise20Regular />} onClick={handleRecreateDefaults} disabled={!!editing}>
+                    <Button size="small" icon={<ArrowCounterclockwiseRegular />} onClick={handleRecreateDefaults} disabled={!!editing}>
                         Recreate Defaults
                     </Button>
-                    <Button size="small" icon={<Add20Regular />} onClick={startAdd} disabled={!!editing}>
+                    <Button size="small" icon={<AddRegular />} onClick={startAdd} disabled={!!editing}>
                         Add
                     </Button>
                 </div>
@@ -559,8 +563,8 @@ const SchemesPanel: FunctionComponent<{
                             <span className={classes.listRowMeta}>
                                 {count} bone{count !== 1 ? "s" : ""}
                             </span>
-                            <Button size="small" appearance="transparent" icon={<Edit20Regular />} title="Edit" disabled={!!editing} onClick={() => startEdit(name)} />
-                            <Button size="small" appearance="transparent" icon={<Delete20Regular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(name)} />
+                            <Button size="small" appearance="transparent" icon={<EditRegular />} title="Edit" disabled={!!editing} onClick={() => startEdit(name)} />
+                            <Button size="small" appearance="transparent" icon={<DeleteRegular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(name)} />
                         </div>
                     );
                 })}
@@ -839,10 +843,10 @@ const RemappingsPanel: FunctionComponent<{
 
             <div className={classes.listHeader}>
                 <div className={classes.listButtons}>
-                    <Button size="small" icon={<ArrowCounterclockwise20Regular />} onClick={handleRecreateDefaults} disabled={!!editing}>
+                    <Button size="small" icon={<ArrowCounterclockwiseRegular />} onClick={handleRecreateDefaults} disabled={!!editing}>
                         Recreate Defaults
                     </Button>
-                    <Button size="small" icon={<Add20Regular />} onClick={startAdd} disabled={!!editing || schemeNames.length < 2}>
+                    <Button size="small" icon={<AddRegular />} onClick={startAdd} disabled={!!editing || schemeNames.length < 2}>
                         Add
                     </Button>
                 </div>
@@ -854,11 +858,11 @@ const RemappingsPanel: FunctionComponent<{
                         <span className={classes.listRowName}>
                             {fromScheme} → {toScheme}
                         </span>
-                        <Button size="small" appearance="transparent" icon={<Edit20Regular />} title="Edit" disabled={!!editing} onClick={() => startEdit(fromScheme, toScheme)} />
+                        <Button size="small" appearance="transparent" icon={<EditRegular />} title="Edit" disabled={!!editing} onClick={() => startEdit(fromScheme, toScheme)} />
                         <Button
                             size="small"
                             appearance="transparent"
-                            icon={<Delete20Regular />}
+                            icon={<DeleteRegular />}
                             title="Delete"
                             disabled={!!editing}
                             onClick={() => handleDelete(fromScheme, toScheme)}
@@ -880,7 +884,7 @@ const RemappingsPanel: FunctionComponent<{
                         </Select>
                     </div>
                     <div style={{ display: "flex", justifyContent: "center" }}>
-                        <Button size="small" appearance="transparent" icon={<ArrowBidirectionalUpDown20Regular />} title="Swap From / To schemes" onClick={handleSwapSchemes} />
+                        <Button size="small" appearance="transparent" icon={<ArrowBidirectionalUpDownRegular />} title="Swap From / To schemes" onClick={handleSwapSchemes} />
                     </div>
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>To scheme</Label>
@@ -1062,17 +1066,17 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                 <DialogBody className={classes.body}>
                     <div className={classes.titleRow}>
                         <DialogTitle action={null}>Retargeting Configuration</DialogTitle>
-                        <div style={{ display: "flex", gap: "4px" }}>
-                            <Button appearance="subtle" icon={<ArrowDownload20Regular />} onClick={handleExport} title="Export configuration" disabled={isEditing} />
+                        <div className={classes.titleButtons}>
+                            <Button appearance="subtle" icon={<ArrowDownloadRegular />} onClick={handleExport} title="Export configuration" disabled={isEditing} />
                             <Button
                                 appearance="subtle"
-                                icon={<ArrowUpload20Regular />}
+                                icon={<ArrowUploadRegular />}
                                 onClick={() => importInputRef.current?.click()}
                                 title="Import configuration"
                                 disabled={isEditing}
                             />
                             <input ref={importInputRef} type="file" accept=".json" style={{ display: "none" }} onChange={handleImportFile} />
-                            <Button appearance="subtle" icon={<Dismiss20Regular />} onClick={handleClose} title="Close" aria-label="Close" />
+                            <Button appearance="subtle" icon={<DismissRegular />} onClick={handleClose} title="Close" aria-label="Close" />
                         </div>
                     </div>
                     {/* Import mode chooser dialog */}

From f828eb4dbf422018144b222ed40e6fbb8861fc6b Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Fri, 20 Mar 2026 11:51:27 +0100
Subject: [PATCH 18/30] Use shared components

---
 .../animationRetargetingPanel.tsx             |  17 +--
 .../animationRetargeting/animationsPanel.tsx  |  45 +++---
 .../animationRetargeting/avatarsPanel.tsx     |  45 +++---
 .../retargetingConfigDialog.tsx               | 137 ++++++------------
 4 files changed, 89 insertions(+), 155 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index 1e3cd7dfc7e..c881b2d5e75 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -3,7 +3,8 @@ import type { Observable } from "core/Misc/observable";
 import { FilesInputStore } from "core/Misc/filesInputStore";
 import { SceneLoader } from "core/Loading/sceneLoader";
 import type { Transform } from "../../components/properties/transformProperties";
-import { makeStyles, tokens, Body1Strong, Button } from "@fluentui/react-components";
+import { makeStyles, tokens, Body1Strong } from "@fluentui/react-components";
+import { Button } from "shared-ui-components/fluent/primitives/button";
 import { ArrowClockwiseRegular, EyeRegular, EyeOffRegular, WindowConsoleRegular, SettingsRegular } from "@fluentui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
@@ -774,20 +775,18 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             <div className={classes.toolbar}>
                 <Button
                     appearance="transparent"
-                    size="small"
-                    icon={isEnabled ? <EyeOffRegular /> : <EyeRegular />}
+                    icon={isEnabled ? EyeOffRegular : EyeRegular}
                     title={isEnabled ? "Disable viewport" : "Enable viewport"}
                     onClick={() => onSetEnabled(!isEnabled)}
                 />
                 <Button
                     appearance={isConsoleVisible ? "primary" : "transparent"}
-                    size="small"
-                    icon={<WindowConsoleRegular />}
+                    icon={WindowConsoleRegular}
                     title="Toggle console"
                     disabled={!isEnabled}
                     onClick={onToggleConsole}
                 />
-                <Button appearance="transparent" size="small" icon={<SettingsRegular />} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
+                <Button appearance="transparent" icon={SettingsRegular} title="Retargeting configuration" onClick={() => setIsDialogOpen(true)} />
                 <RetargetingConfigDialog
                     manager={namingSchemeManager}
                     avatarManager={avatarManager}
@@ -838,9 +837,8 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         />
                                     </div>
                                     <Button
-                                        size="small"
                                         appearance="subtle"
-                                        icon={<ArrowClockwiseRegular />}
+                                        icon={ArrowClockwiseRegular}
                                         title="Reload avatar"
                                         disabled={!avatarName}
                                         onClick={() => {
@@ -972,9 +970,8 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                         />
                                     </div>
                                     <Button
-                                        size="small"
                                         appearance="subtle"
-                                        icon={<ArrowClockwiseRegular />}
+                                        icon={ArrowClockwiseRegular}
                                         title="Reload animation"
                                         disabled={!animationName}
                                         onClick={() => {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index a1b466f61b9..fec3b8a30c2 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -5,9 +5,7 @@ import type { RestPoseDataUpdate } from "./avatarManager";
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import {
-    Button,
     Input,
-    Select,
     Label,
     makeStyles,
     mergeClasses,
@@ -22,6 +20,9 @@ import {
     DialogActions,
     Spinner,
 } 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 } from "@fluentui/react-icons";
 import { NullEngine } from "core/Engines/nullEngine";
 import { Scene } from "core/scene";
@@ -662,12 +663,8 @@ export const AnimationsPanel: FunctionComponent<{
                             Delete animation <strong>"{confirmDelete?.label}"</strong> and all associated files?
                         </DialogContent>
                         <DialogActions>
-                            <Button appearance="secondary" onClick={() => setConfirmDelete(null)}>
-                                Cancel
-                            </Button>
-                            <Button appearance="primary" onClick={handleConfirmDelete}>
-                                Delete
-                            </Button>
+                            <Button appearance="secondary" label="Cancel" onClick={() => setConfirmDelete(null)} />
+                            <Button appearance="primary" label="Delete" onClick={handleConfirmDelete} />
                         </DialogActions>
                     </DialogBody>
                 </DialogSurface>
@@ -675,9 +672,7 @@ export const AnimationsPanel: FunctionComponent<{
 
             <div className={classes.listHeader}>
                 <div className={classes.listButtons}>
-                    <Button size="small" icon={<AddRegular />} onClick={startAdd} disabled={!!editing}>
-                        Add
-                    </Button>
+                    <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
                 </div>
             </div>
             <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
@@ -688,16 +683,15 @@ export const AnimationsPanel: FunctionComponent<{
                         <span className={classes.listRowMeta}>{animation.source === "url" ? "URL" : "File"}</span>
                         <span className={classes.listRowMeta}>{animation.namingScheme}</span>
                         <Button
-                            size="small"
                             appearance="transparent"
-                            icon={<EditRegular />}
+                            icon={EditRegular}
                             title="Edit"
                             disabled={!!editing}
                             onClick={() => {
                                 void startEdit(animation);
                             }}
                         />
-                        <Button size="small" appearance="transparent" icon={<DeleteRegular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(animation)} />
+                        <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(animation)} />
                     </div>
                 ))}
             </div>
@@ -709,7 +703,7 @@ export const AnimationsPanel: FunctionComponent<{
                     {/* Name */}
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>Name</Label>
-                        <Input className={classes.formControl} size="small" value={editing.name} onChange={(_, d) => setEditing({ ...editing, name: d.value })} />
+                        <TextInput className={classes.formControl} value={editing.name} onChange={(v) => setEditing({ ...editing, name: v })} />
                     </div>
 
                     {/* URL input */}
@@ -807,13 +801,12 @@ export const AnimationsPanel: FunctionComponent<{
                     {/* Naming scheme */}
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>Naming scheme</Label>
-                        <Select className={classes.formControl} size="small" value={editing.namingScheme} onChange={(_, d) => setEditing({ ...editing, namingScheme: d.value })}>
-                            {schemeNames.map((n) => (
-                                <option key={n} value={n}>
-                                    {n}
-                                </option>
-                            ))}
-                        </Select>
+                        <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 */}
@@ -831,12 +824,8 @@ export const AnimationsPanel: FunctionComponent<{
 
                     {error && <span className={classes.errorText}>{error}</span>}
                     <div className={classes.actionRow}>
-                        <Button size="small" appearance="secondary" onClick={handleCancel}>
-                            Cancel
-                        </Button>
-                        <Button size="small" appearance="primary" onClick={handleSave}>
-                            Save
-                        </Button>
+                        <Button appearance="secondary" label="Cancel" onClick={handleCancel} />
+                        <Button appearance="primary" label="Save" onClick={handleSave} />
                     </div>
                 </div>
             )}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index 0e57784c23e..7d744b534eb 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -4,9 +4,7 @@ import type { NamingSchemeManager } from "./namingSchemeManager";
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import {
-    Button,
     Input,
-    Select,
     Label,
     makeStyles,
     mergeClasses,
@@ -21,6 +19,9 @@ import {
     DialogActions,
     Spinner,
 } 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 } from "@fluentui/react-icons";
 import { NullEngine } from "core/Engines/nullEngine";
 import { Scene } from "core/scene";
@@ -598,12 +599,8 @@ export const AvatarsPanel: FunctionComponent<{
                             Delete avatar <strong>"{confirmDelete?.name}"</strong> and all associated files?
                         </DialogContent>
                         <DialogActions>
-                            <Button appearance="secondary" onClick={() => setConfirmDelete(null)}>
-                                Cancel
-                            </Button>
-                            <Button appearance="primary" onClick={handleConfirmDelete}>
-                                Delete
-                            </Button>
+                            <Button appearance="secondary" label="Cancel" onClick={() => setConfirmDelete(null)} />
+                            <Button appearance="primary" label="Delete" onClick={handleConfirmDelete} />
                         </DialogActions>
                     </DialogBody>
                 </DialogSurface>
@@ -611,9 +608,7 @@ export const AvatarsPanel: FunctionComponent<{
 
             <div className={classes.listHeader}>
                 <div className={classes.listButtons}>
-                    <Button size="small" icon={<AddRegular />} onClick={startAdd} disabled={!!editing}>
-                        Add
-                    </Button>
+                    <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
                 </div>
             </div>
             <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
@@ -624,16 +619,15 @@ export const AvatarsPanel: FunctionComponent<{
                         <span className={classes.listRowMeta}>{avatar.source === "url" ? "URL" : "File"}</span>
                         <span className={classes.listRowMeta}>{avatar.namingScheme}</span>
                         <Button
-                            size="small"
                             appearance="transparent"
-                            icon={<EditRegular />}
+                            icon={EditRegular}
                             title="Edit"
                             disabled={!!editing}
                             onClick={() => {
                                 void startEdit(avatar);
                             }}
                         />
-                        <Button size="small" appearance="transparent" icon={<DeleteRegular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(avatar)} />
+                        <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(avatar)} />
                     </div>
                 ))}
             </div>
@@ -645,7 +639,7 @@ export const AvatarsPanel: FunctionComponent<{
                     {/* Name */}
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>Name</Label>
-                        <Input className={classes.formControl} size="small" value={editing.name} onChange={(_, d) => setEditing({ ...editing, name: d.value })} />
+                        <TextInput className={classes.formControl} value={editing.name} onChange={(v) => setEditing({ ...editing, name: v })} />
                     </div>
 
                     {/* URL input — loads on Enter or blur */}
@@ -714,13 +708,12 @@ export const AvatarsPanel: FunctionComponent<{
                     {/* Naming scheme */}
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>Naming scheme</Label>
-                        <Select className={classes.formControl} size="small" value={editing.namingScheme} onChange={(_, d) => setEditing({ ...editing, namingScheme: d.value })}>
-                            {schemeNames.map((n) => (
-                                <option key={n} value={n}>
-                                    {n}
-                                </option>
-                            ))}
-                        </Select>
+                        <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 */}
@@ -738,12 +731,8 @@ export const AvatarsPanel: FunctionComponent<{
 
                     {error && <span className={classes.errorText}>{error}</span>}
                     <div className={classes.actionRow}>
-                        <Button size="small" appearance="secondary" onClick={handleCancel}>
-                            Cancel
-                        </Button>
-                        <Button size="small" appearance="primary" onClick={handleSave}>
-                            Save
-                        </Button>
+                        <Button appearance="secondary" label="Cancel" onClick={handleCancel} />
+                        <Button appearance="primary" label="Save" onClick={handleSave} />
                     </div>
                 </div>
             )}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index 3d3d093d45c..60f028b5eb3 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -11,11 +11,9 @@ import {
     DialogContent,
     DialogActions,
     DialogSurface,
-    Button,
+    Select,
     Tab,
     TabList,
-    Input,
-    Select,
     Label,
     makeStyles,
     mergeClasses,
@@ -24,6 +22,9 @@ import {
     Caption1,
     Spinner,
 } 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,
@@ -532,12 +533,8 @@ const SchemesPanel: FunctionComponent<{
                             Delete scheme <strong>"{confirmDelete}"</strong>? All remappings that reference it will also be removed.
                         </DialogContent>
                         <DialogActions>
-                            <Button appearance="secondary" onClick={() => setConfirmDelete(null)}>
-                                Cancel
-                            </Button>
-                            <Button appearance="primary" onClick={handleConfirmDelete}>
-                                Delete
-                            </Button>
+                            <Button appearance="secondary" label="Cancel" onClick={() => setConfirmDelete(null)} />
+                            <Button appearance="primary" label="Delete" onClick={handleConfirmDelete} />
                         </DialogActions>
                     </DialogBody>
                 </DialogSurface>
@@ -545,12 +542,8 @@ const SchemesPanel: FunctionComponent<{
 
             <div className={classes.listHeader}>
                 <div className={classes.listButtons}>
-                    <Button size="small" icon={<ArrowCounterclockwiseRegular />} onClick={handleRecreateDefaults} disabled={!!editing}>
-                        Recreate Defaults
-                    </Button>
-                    <Button size="small" icon={<AddRegular />} onClick={startAdd} disabled={!!editing}>
-                        Add
-                    </Button>
+                    <Button icon={ArrowCounterclockwiseRegular} label="Recreate Defaults" onClick={handleRecreateDefaults} disabled={!!editing} />
+                    <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
                 </div>
             </div>
             <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "160px" : undefined }}>
@@ -563,8 +556,8 @@ const SchemesPanel: FunctionComponent<{
                             <span className={classes.listRowMeta}>
                                 {count} bone{count !== 1 ? "s" : ""}
                             </span>
-                            <Button size="small" appearance="transparent" icon={<EditRegular />} title="Edit" disabled={!!editing} onClick={() => startEdit(name)} />
-                            <Button size="small" appearance="transparent" icon={<DeleteRegular />} title="Delete" disabled={!!editing} onClick={() => handleDelete(name)} />
+                            <Button appearance="transparent" icon={EditRegular} title="Edit" disabled={!!editing} onClick={() => startEdit(name)} />
+                            <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(name)} />
                         </div>
                     );
                 })}
@@ -575,7 +568,7 @@ const SchemesPanel: FunctionComponent<{
                     <Body1Strong>{editing.originalName ? `Editing "${editing.originalName}"` : "New Scheme"}</Body1Strong>
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>Name</Label>
-                        <Input className={classes.formControl} value={editing.name} onChange={(_, d) => setEditing({ ...editing, name: d.value })} />
+                        <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>
@@ -610,12 +603,8 @@ const SchemesPanel: FunctionComponent<{
                     </div>
                     {error && <span className={classes.errorText}>{error}</span>}
                     <div className={classes.actionRow}>
-                        <Button size="small" appearance="secondary" onClick={handleCancel}>
-                            Cancel
-                        </Button>
-                        <Button size="small" appearance="primary" onClick={handleSave}>
-                            Save
-                        </Button>
+                        <Button appearance="secondary" label="Cancel" onClick={handleCancel} />
+                        <Button appearance="primary" label="Save" onClick={handleSave} />
                     </div>
                 </div>
             )}
@@ -830,12 +819,8 @@ const RemappingsPanel: FunctionComponent<{
                             ?
                         </DialogContent>
                         <DialogActions>
-                            <Button appearance="secondary" onClick={() => setConfirmDelete(null)}>
-                                Cancel
-                            </Button>
-                            <Button appearance="primary" onClick={handleConfirmDelete}>
-                                Delete
-                            </Button>
+                            <Button appearance="secondary" label="Cancel" onClick={() => setConfirmDelete(null)} />
+                            <Button appearance="primary" label="Delete" onClick={handleConfirmDelete} />
                         </DialogActions>
                     </DialogBody>
                 </DialogSurface>
@@ -843,12 +828,8 @@ const RemappingsPanel: FunctionComponent<{
 
             <div className={classes.listHeader}>
                 <div className={classes.listButtons}>
-                    <Button size="small" icon={<ArrowCounterclockwiseRegular />} onClick={handleRecreateDefaults} disabled={!!editing}>
-                        Recreate Defaults
-                    </Button>
-                    <Button size="small" icon={<AddRegular />} onClick={startAdd} disabled={!!editing || schemeNames.length < 2}>
-                        Add
-                    </Button>
+                    <Button icon={ArrowCounterclockwiseRegular} label="Recreate Defaults" onClick={handleRecreateDefaults} disabled={!!editing} />
+                    <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing || schemeNames.length < 2} />
                 </div>
             </div>
             <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
@@ -858,15 +839,8 @@ const RemappingsPanel: FunctionComponent<{
                         <span className={classes.listRowName}>
                             {fromScheme} → {toScheme}
                         </span>
-                        <Button size="small" appearance="transparent" icon={<EditRegular />} title="Edit" disabled={!!editing} onClick={() => startEdit(fromScheme, toScheme)} />
-                        <Button
-                            size="small"
-                            appearance="transparent"
-                            icon={<DeleteRegular />}
-                            title="Delete"
-                            disabled={!!editing}
-                            onClick={() => handleDelete(fromScheme, toScheme)}
-                        />
+                        <Button appearance="transparent" icon={EditRegular} title="Edit" disabled={!!editing} onClick={() => startEdit(fromScheme, toScheme)} />
+                        <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(fromScheme, toScheme)} />
                     </div>
                 ))}
             </div>
@@ -875,28 +849,26 @@ const RemappingsPanel: FunctionComponent<{
                     <Body1Strong>{editing.isNew ? "New Remapping" : `Editing "${editing.fromScheme}" → "${editing.toScheme}"`}</Body1Strong>
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>From scheme</Label>
-                        <Select className={classes.formControl} value={editing.fromScheme} disabled={!editing.isNew} onChange={(_, d) => handleFromSchemeChange(d.value)}>
-                            {schemeNames.map((n) => (
-                                <option key={n} value={n}>
-                                    {n}
-                                </option>
-                            ))}
-                        </Select>
+                        <StringDropdown
+                            className={classes.formControl}
+                            value={editing.fromScheme}
+                            disabled={!editing.isNew}
+                            options={schemeNames.map((n) => ({ label: n, value: n }))}
+                            onChange={(v) => handleFromSchemeChange(v)}
+                        />
                     </div>
                     <div style={{ display: "flex", justifyContent: "center" }}>
-                        <Button size="small" appearance="transparent" icon={<ArrowBidirectionalUpDownRegular />} title="Swap From / To schemes" onClick={handleSwapSchemes} />
+                        <Button appearance="transparent" icon={ArrowBidirectionalUpDownRegular} title="Swap From / To schemes" onClick={handleSwapSchemes} />
                     </div>
                     <div className={classes.formRow}>
                         <Label className={classes.formLabel}>To scheme</Label>
-                        <Select className={classes.formControl} value={editing.toScheme} disabled={!editing.isNew} onChange={(_, d) => handleToSchemeChange(d.value)}>
-                            {schemeNames
-                                .filter((n) => n !== editing.fromScheme)
-                                .map((n) => (
-                                    <option key={n} value={n}>
-                                        {n}
-                                    </option>
-                                ))}
-                        </Select>
+                        <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 && <span className={classes.errorText}>A remapping "{conflictLabel}" already exists. Edit that remapping instead.</span>}
                     <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>{fromSchemeEntries.length} bones — select the target bone for each, or leave blank.</Caption1>
@@ -923,12 +895,8 @@ const RemappingsPanel: FunctionComponent<{
                     </div>
                     {error && <span className={classes.errorText}>{error}</span>}
                     <div className={classes.actionRow}>
-                        <Button size="small" appearance="secondary" onClick={handleCancel}>
-                            Cancel
-                        </Button>
-                        <Button size="small" appearance="primary" onClick={handleSave} disabled={!!conflictLabel || faultyBones.size > 0}>
-                            Save
-                        </Button>
+                        <Button appearance="secondary" label="Cancel" onClick={handleCancel} />
+                        <Button appearance="primary" label="Save" onClick={handleSave} disabled={!!conflictLabel || faultyBones.size > 0} />
                     </div>
                 </div>
             )}
@@ -1067,16 +1035,16 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                     <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={ArrowDownloadRegular} onClick={handleExport} title="Export configuration" disabled={isEditing} />
                             <Button
                                 appearance="subtle"
-                                icon={<ArrowUploadRegular />}
+                                icon={ArrowUploadRegular}
                                 onClick={() => importInputRef.current?.click()}
                                 title="Import configuration"
                                 disabled={isEditing}
                             />
                             <input ref={importInputRef} type="file" accept=".json" style={{ display: "none" }} onChange={handleImportFile} />
-                            <Button appearance="subtle" icon={<DismissRegular />} onClick={handleClose} title="Close" aria-label="Close" />
+                            <Button appearance="subtle" icon={DismissRegular} onClick={handleClose} title="Close" />
                         </div>
                     </div>
                     {/* Import mode chooser dialog */}
@@ -1095,25 +1063,21 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                                     <strong>Replace</strong> all existing data, or <strong>Append</strong> and skip duplicates?
                                 </DialogContent>
                                 <DialogActions>
-                                    <Button appearance="secondary" onClick={() => setPendingImport(null)}>
-                                        Cancel
-                                    </Button>
+                                    <Button appearance="secondary" label="Cancel" onClick={() => setPendingImport(null)} />
                                     <Button
                                         appearance="primary"
+                                        label="Replace"
                                         onClick={() => {
                                             void handleImport("replace");
                                         }}
-                                    >
-                                        Replace
-                                    </Button>
+                                    />
                                     <Button
                                         appearance="primary"
+                                        label="Append"
                                         onClick={() => {
                                             void handleImport("append");
                                         }}
-                                    >
-                                        Append
-                                    </Button>
+                                    />
                                 </DialogActions>
                             </DialogBody>
                         </DialogSurface>
@@ -1132,9 +1096,7 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                                 <DialogTitle>Import Result</DialogTitle>
                                 <DialogContent>{importResult}</DialogContent>
                                 <DialogActions>
-                                    <Button appearance="primary" onClick={() => setImportResult(null)}>
-                                        OK
-                                    </Button>
+                                    <Button appearance="primary" label="OK" onClick={() => setImportResult(null)} />
                                 </DialogActions>
                             </DialogBody>
                         </DialogSurface>
@@ -1153,18 +1115,15 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                                 <DialogTitle>Unsaved Changes</DialogTitle>
                                 <DialogContent>You may have unsaved changes. Close anyway and lose them?</DialogContent>
                                 <DialogActions>
-                                    <Button appearance="secondary" onClick={() => setConfirmClose(false)}>
-                                        Cancel
-                                    </Button>
+                                    <Button appearance="secondary" label="Cancel" onClick={() => setConfirmClose(false)} />
                                     <Button
                                         appearance="primary"
+                                        label="Close Anyway"
                                         onClick={() => {
                                             setConfirmClose(false);
                                             onClose();
                                         }}
-                                    >
-                                        Close Anyway
-                                    </Button>
+                                    />
                                 </DialogActions>
                             </DialogBody>
                         </DialogSurface>

From 49a8a4890d08c4a67065ad86d97d71b25376a425 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Fri, 20 Mar 2026 12:11:57 +0100
Subject: [PATCH 19/30] Use ISettingStore instead of direct local storage
 access

---
 .../animationRetargeting/animationManager.ts  | 17 ++++++++--------
 .../animationRetargetingExtension.tsx         | 20 ++++++++++---------
 .../animationRetargeting/avatarManager.ts     | 18 +++++++++--------
 .../namingSchemeManager.ts                    | 16 +++++++++------
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
index bf994038a04..19bd8875468 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -1,6 +1,6 @@
+import type { ISettingsStore, SettingDescriptor } from "../../services/settingsStore";
 import type { RestPoseDataUpdate } from "./avatarManager";
 
-const AnimationStorageKey = "BabylonInspector_AnimRetargeting_AnimationManager";
 const IDBName = "BabylonInspector_AnimRetargeting";
 const IDBStore = "animationFiles";
 
@@ -36,6 +36,11 @@ type SerializedData = {
     animations: StoredAnimation[];
 };
 
+const AnimationSettingDescriptor: SettingDescriptor<SerializedData> = {
+    key: "AnimRetargeting/Animations",
+    defaultValue: { animations: [] },
+};
+
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 function GenerateId(): string {
@@ -145,7 +150,7 @@ async function IdbDeletePrefix(prefix: string): Promise<void> {
 export class AnimationManager {
     private _animations: StoredAnimation[] = [];
 
-    public constructor() {
+    public constructor(private readonly _settingsStore: ISettingsStore) {
         this._loadFromStorage();
     }
 
@@ -360,11 +365,7 @@ export class AnimationManager {
 
     private _loadFromStorage(): void {
         try {
-            const raw = localStorage.getItem(AnimationStorageKey);
-            if (!raw) {
-                return;
-            }
-            const data: SerializedData = JSON.parse(raw);
+            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) {
@@ -396,6 +397,6 @@ export class AnimationManager {
 
     private _saveToStorage(): void {
         const data: SerializedData = { animations: this._animations };
-        localStorage.setItem(AnimationStorageKey, JSON.stringify(data));
+        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
index a408546990e..db8e18f9c9e 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -1,7 +1,9 @@
 import type { IDisposable } from "core/index";
 import type { ServiceDefinition } from "../../modularity/serviceDefinition";
 import type { IShellService } from "../../services/shellService";
+import type { ISettingsStore } from "../../services/settingsStore";
 import { ShellServiceIdentity } from "../../services/shellService";
+import { SettingsStoreIdentity } from "../../services/settingsStore";
 
 import { Observable } from "core/Misc/observable";
 import { PersonRunningRegular } from "@fluentui/react-icons";
@@ -22,10 +24,10 @@ import { Link } from "shared-ui-components/fluent/primitives/link";
  * - 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]> = {
+export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShellService, ISettingsStore]> = {
     friendlyName: "Animation Retargeting",
-    consumes: [ShellServiceIdentity],
-    factory: (shellService) => {
+    consumes: [ShellServiceIdentity, SettingsStoreIdentity],
+    factory: (shellService, settingsStore) => {
         // 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
@@ -33,14 +35,14 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         // Observable that fires when the config dialog closes — panel refreshes dropdowns
         const onConfigChangedObs = new Observable<void>();
 
-        // Naming scheme manager — persists across extension lifetime via localStorage
-        const namingSchemeManager = new NamingSchemeManager();
+        // Naming scheme manager — persists across extension lifetime via ISettingsStore
+        const namingSchemeManager = new NamingSchemeManager(settingsStore);
 
-        // Avatar manager — persists across extension lifetime via localStorage + IndexedDB
-        const avatarManager = new AvatarManager();
+        // Avatar manager — persists across extension lifetime via ISettingsStore + IndexedDB
+        const avatarManager = new AvatarManager(settingsStore);
 
-        // Animation manager — persists across extension lifetime via localStorage + IndexedDB
-        const animationManager = new AnimationManager();
+        // Animation manager — persists across extension lifetime via ISettingsStore + IndexedDB
+        const animationManager = new AnimationManager(settingsStore);
 
         // Create default entries if both lists are empty (first-time use)
         if (avatarManager.getAllAvatars().length === 0 && animationManager.getAllDisplayNames().length === 0) {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
index 4cb24c36c1d..2e0255f24cf 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -1,6 +1,7 @@
+import type { ISettingsStore, SettingDescriptor } from "../../services/settingsStore";
+
 export type RestPoseDataUpdate = Array<{ name: string; data: { position?: number[]; scaling?: number[]; quaternion?: number[] } }>;
 
-const AvatarStorageKey = "BabylonInspector_AnimRetargeting_AvatarManager";
 const IDBName = "BabylonInspector_AnimRetargeting";
 const IDBStore = "avatarFiles";
 
@@ -22,6 +23,11 @@ type SerializedData = {
     avatars: StoredAvatar[];
 };
 
+const AvatarSettingDescriptor: SettingDescriptor<SerializedData> = {
+    key: "AnimRetargeting/Avatars",
+    defaultValue: { avatars: [] },
+};
+
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 function GenerateId(): string {
@@ -131,7 +137,7 @@ async function IdbDeletePrefix(prefix: string): Promise<void> {
 export class AvatarManager {
     private _avatars: StoredAvatar[] = [];
 
-    public constructor() {
+    public constructor(private readonly _settingsStore: ISettingsStore) {
         this._loadFromStorage();
     }
 
@@ -304,11 +310,7 @@ export class AvatarManager {
 
     private _loadFromStorage(): void {
         try {
-            const raw = localStorage.getItem(AvatarStorageKey);
-            if (!raw) {
-                return;
-            }
-            const data: SerializedData = JSON.parse(raw);
+            const data = this._settingsStore.readSetting(AvatarSettingDescriptor);
             this._avatars = data.avatars ?? [];
         } catch {
             this._avatars = [];
@@ -317,6 +319,6 @@ export class AvatarManager {
 
     private _saveToStorage(): void {
         const data: SerializedData = { avatars: this._avatars };
-        localStorage.setItem(AvatarStorageKey, JSON.stringify(data));
+        this._settingsStore.writeSetting(AvatarSettingDescriptor, data);
     }
 }
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
index a6f87b28cd9..b32b5a22b0a 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
@@ -1,4 +1,9 @@
-const StorageKey = "BabylonInspector_AnimRetargeting_NamingSchemeManager";
+import type { ISettingsStore, SettingDescriptor } from "../../services/settingsStore";
+
+const NamingSchemeSettingDescriptor: SettingDescriptor<StoredData> = {
+    key: "AnimRetargeting/NamingSchemes",
+    defaultValue: { schemes: {}, remappings: [] },
+};
 
 /**
  * A bone/node entry in a naming scheme.
@@ -125,7 +130,7 @@ export class NamingSchemeManager {
     private _schemes: Map<string, BoneEntry[]> = new Map();
     private _remappings: Array<{ fromScheme: string; toScheme: string; map: Map<string, string> }> = [];
 
-    constructor() {
+    constructor(private readonly _settingsStore: ISettingsStore) {
         this._loadFromStorage();
     }
 
@@ -461,7 +466,7 @@ export class NamingSchemeManager {
             });
         }
         try {
-            localStorage.setItem(StorageKey, JSON.stringify(data));
+            this._settingsStore.writeSetting(NamingSchemeSettingDescriptor, data);
         } catch {
             // Storage may be unavailable (e.g. private browsing quota exceeded).
         }
@@ -469,12 +474,11 @@ export class NamingSchemeManager {
 
     private _loadFromStorage(): void {
         try {
-            const raw = localStorage.getItem(StorageKey);
-            if (!raw) {
+            const data = this._settingsStore.readSetting(NamingSchemeSettingDescriptor);
+            if (Object.keys(data.schemes).length === 0 && data.remappings.length === 0) {
                 this._createDefaultSchemes();
                 return;
             }
-            const data: StoredData = JSON.parse(raw);
             for (const [name, entries] of Object.entries(data.schemes)) {
                 this._schemes.set(name, entries as BoneEntry[]);
             }

From d81d5417b846e099a34321dcdab9a8ae10ce0c4b Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Fri, 20 Mar 2026 12:36:51 +0100
Subject: [PATCH 20/30] Remove changes to ShellService

---
 .../animationRetargetingExtension.tsx         |  7 -----
 .../animationRetargetingPanel.tsx             |  8 +++++-
 .../src/services/shellService.tsx             | 26 +++----------------
 3 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index db8e18f9c9e..4c969372fb2 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -7,7 +7,6 @@ import { SettingsStoreIdentity } from "../../services/settingsStore";
 
 import { Observable } from "core/Misc/observable";
 import { PersonRunningRegular } from "@fluentui/react-icons";
-import { Body1 } from "@fluentui/react-components";
 
 import { AnimationRetargetingViewport } from "./animationRetargetingViewport";
 import { AnimationRetargetingPanel, DefaultPanelState } from "./animationRetargetingPanel";
@@ -16,7 +15,6 @@ import type { RetargetingSceneManager } from "./retargetingSceneManager";
 import { NamingSchemeManager } from "./namingSchemeManager";
 import { AvatarManager } from "./avatarManager";
 import { AnimationManager } from "./animationManager";
-import { Link } from "shared-ui-components/fluent/primitives/link";
 
 /**
  * Service definition for the Animation Retargeting extension.
@@ -98,11 +96,6 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         const panelReg = shellService.addSidePane({
             key: "AnimationRetargetingPanel",
             title: "Animation Retargeting",
-            description: (
-                <Body1>
-                    Learn more in the <Link url="https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/" value="docs" />.
-                </Body1>
-            ),
             icon: PersonRunningRegular,
             horizontalLocation: "left",
             verticalLocation: "top",
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index c881b2d5e75..dac55cece2a 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -5,7 +5,7 @@ import { SceneLoader } from "core/Loading/sceneLoader";
 import type { Transform } from "../../components/properties/transformProperties";
 import { makeStyles, tokens, Body1Strong } from "@fluentui/react-components";
 import { Button } from "shared-ui-components/fluent/primitives/button";
-import { ArrowClockwiseRegular, EyeRegular, EyeOffRegular, WindowConsoleRegular, SettingsRegular } from "@fluentui/react-icons";
+import { ArrowClockwiseRegular, EyeRegular, EyeOffRegular, WindowConsoleRegular, SettingsRegular, InfoRegular } from "@fluentui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Accordion as BabylonAccordion, AccordionSection as BabylonAccordionSection } from "shared-ui-components/fluent/primitives/accordion";
 import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
@@ -787,6 +787,12 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                     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}
diff --git a/packages/dev/inspector-v2/src/services/shellService.tsx b/packages/dev/inspector-v2/src/services/shellService.tsx
index d65f1a2ac26..330f527b271 100644
--- a/packages/dev/inspector-v2/src/services/shellService.tsx
+++ b/packages/dev/inspector-v2/src/services/shellService.tsx
@@ -9,7 +9,7 @@ import {
     Button,
     Divider,
     Toolbar as FluentToolbar,
-    InfoLabel,
+    Subtitle2Stronger,
     makeStyles,
     Menu,
     MenuGroup,
@@ -22,7 +22,6 @@ import {
     SplitButton,
     tokens,
     ToolbarRadioButton,
-    typographyStyles,
 } from "@fluentui/react-components";
 import {
     LayoutColumnTwoFocusLeftFilled,
@@ -213,11 +212,6 @@ export type SidePaneDefinition = {
      * user to lose the complex visual state when switching between tabs.
      */
     keepMounted?: boolean;
-
-    /**
-     * Optional info content shown in a popup next to the title when hovering the info icon.
-     */
-    description?: JSX.Element;
 };
 
 type RegisteredSidePane = {
@@ -481,9 +475,6 @@ const useStyles = makeStyles({
     paneHeaderText: {
         flex: 1,
     },
-    paneHeaderLabel: {
-        ...typographyStyles.subtitle2Stronger,
-    },
     paneHeaderTextNoIcon: {
         marginLeft: tokens.spacingHorizontalM,
     },
@@ -633,11 +624,9 @@ const PaneHeader: FunctionComponent<{
     id: string;
     title: string;
     icon?: ComponentType;
-    description?: JSX.Element;
-    onInfoClick?: () => void;
     dockOptions: Map<DockLocation, (sidePaneKey: string) => void>;
 }> = (props) => {
-    const { id, title, description, dockOptions } = props;
+    const { id, title, dockOptions } = props;
 
     const classes = useStyles();
 
@@ -648,14 +637,7 @@ const PaneHeader: FunctionComponent<{
                     <props.icon />
                 </div>
             )}
-            <InfoLabel
-                className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}
-                label={{ className: classes.paneHeaderLabel }}
-                htmlFor={id}
-                info={description}
-            >
-                {title}
-            </InfoLabel>
+            <Subtitle2Stronger className={mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon)}>{title}</Subtitle2Stronger>
             <DockMenu sidePaneId={id} dockOptions={dockOptions}>
                 <Button className={classes.paneHeaderButton} appearance="transparent" icon={<MoreHorizontalRegular />} />
             </DockMenu>
@@ -1093,7 +1075,6 @@ function usePane(
                                     id={topSelectedTab.key}
                                     title={topSelectedTab.title}
                                     icon={topPanes.length > 1 ? undefined : topSelectedTab.icon}
-                                    description={topSelectedTab.description}
                                     dockOptions={validTopDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}
@@ -1134,7 +1115,6 @@ function usePane(
                                     id={bottomSelectedTab.key}
                                     title={bottomSelectedTab.title}
                                     icon={bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon}
-                                    description={bottomSelectedTab.description}
                                     dockOptions={validBottomDockOptions}
                                 />
                                 {/* Render all panes to retain their state even when they are not selected, but only display the selected pane. */}

From 0a8fd56f4a137ba9c74a797ebc064c3c01b19c6d Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Fri, 20 Mar 2026 14:26:10 +0100
Subject: [PATCH 21/30] Use DataGrid

---
 .../animationRetargeting/animationsPanel.tsx  | 105 ++++++-----
 .../animationRetargeting/avatarsPanel.tsx     | 105 ++++++-----
 .../retargetingConfigDialog.tsx               | 163 ++++++++++++------
 3 files changed, 223 insertions(+), 150 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index fec3b8a30c2..86eba912c62 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -19,7 +19,15 @@ import {
     DialogContent,
     DialogActions,
     Spinner,
+    DataGrid,
+    DataGridHeader,
+    DataGridBody,
+    DataGridRow,
+    DataGridHeaderCell,
+    DataGridCell,
+    createTableColumn,
 } from "@fluentui/react-components";
+import type { TableColumnDefinition, 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";
@@ -51,33 +59,6 @@ const useStyles = makeStyles({
         display: "flex",
         gap: tokens.spacingHorizontalXS,
     },
-    listArea: {
-        overflowY: "auto",
-        border: `1px solid ${tokens.colorNeutralStroke2}`,
-        borderRadius: tokens.borderRadiusMedium,
-        display: "flex",
-        flexDirection: "column",
-    },
-    listRow: {
-        display: "flex",
-        alignItems: "center",
-        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
-        gap: tokens.spacingHorizontalXS,
-        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
-        ":last-child": { borderBottom: "none" },
-    },
-    listRowName: {
-        flex: 1,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-    },
-    listRowMeta: {
-        color: tokens.colorNeutralForeground3,
-        fontSize: "12px",
-        flexShrink: 0,
-        marginRight: tokens.spacingHorizontalXS,
-    },
     editSectionFlex: {
         flex: 1,
         overflowY: "auto",
@@ -99,6 +80,9 @@ const useStyles = makeStyles({
     },
     formControl: {
         flex: 1,
+        textAlign: "left",
+        "& span": { textAlign: "left" },
+        "& input": { textAlign: "left" },
     },
     actionRow: {
         display: "flex",
@@ -310,6 +294,37 @@ export const AnimationsPanel: FunctionComponent<{
     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.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(
@@ -675,26 +690,22 @@ export const AnimationsPanel: FunctionComponent<{
                     <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
                 </div>
             </div>
-            <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
-                {allAnimations.length === 0 && <span className={classes.emptyMsg}>No custom animations defined.</span>}
-                {allAnimations.map((animation) => (
-                    <div key={animation.id} className={classes.listRow}>
-                        <span className={classes.listRowName}>{animation.name}</span>
-                        <span className={classes.listRowMeta}>{animation.source === "url" ? "URL" : "File"}</span>
-                        <span className={classes.listRowMeta}>{animation.namingScheme}</span>
-                        <Button
-                            appearance="transparent"
-                            icon={EditRegular}
-                            title="Edit"
-                            disabled={!!editing}
-                            onClick={() => {
-                                void startEdit(animation);
-                            }}
-                        />
-                        <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(animation)} />
-                    </div>
-                ))}
-            </div>
+            {allAnimations.length === 0 && <span className={classes.emptyMsg}>No custom animations defined.</span>}
+            <DataGrid
+                items={allAnimations}
+                columns={animationColumns}
+                getRowId={(item) => item.id}
+                style={{ flex: editing ? undefined : 1, maxHeight: editing ? "140px" : undefined, overflowY: "auto" }}
+                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}>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index 7d744b534eb..0c169943e46 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -18,7 +18,15 @@ import {
     DialogContent,
     DialogActions,
     Spinner,
+    DataGrid,
+    DataGridHeader,
+    DataGridBody,
+    DataGridRow,
+    DataGridHeaderCell,
+    DataGridCell,
+    createTableColumn,
 } from "@fluentui/react-components";
+import type { TableColumnDefinition, 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";
@@ -50,33 +58,6 @@ const useStyles = makeStyles({
         display: "flex",
         gap: tokens.spacingHorizontalXS,
     },
-    listArea: {
-        overflowY: "auto",
-        border: `1px solid ${tokens.colorNeutralStroke2}`,
-        borderRadius: tokens.borderRadiusMedium,
-        display: "flex",
-        flexDirection: "column",
-    },
-    listRow: {
-        display: "flex",
-        alignItems: "center",
-        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
-        gap: tokens.spacingHorizontalXS,
-        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
-        ":last-child": { borderBottom: "none" },
-    },
-    listRowName: {
-        flex: 1,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-    },
-    listRowMeta: {
-        color: tokens.colorNeutralForeground3,
-        fontSize: "12px",
-        flexShrink: 0,
-        marginRight: tokens.spacingHorizontalXS,
-    },
     editSectionFlex: {
         flex: 1,
         overflowY: "auto",
@@ -98,6 +79,9 @@ const useStyles = makeStyles({
     },
     formControl: {
         flex: 1,
+        textAlign: "left",
+        "& span": { textAlign: "left" },
+        "& input": { textAlign: "left" },
     },
     actionRow: {
         display: "flex",
@@ -287,6 +271,37 @@ export const AvatarsPanel: FunctionComponent<{
     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.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(
@@ -611,26 +626,22 @@ export const AvatarsPanel: FunctionComponent<{
                     <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
                 </div>
             </div>
-            <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
-                {allAvatars.length === 0 && <span className={classes.emptyMsg}>No custom avatars defined.</span>}
-                {allAvatars.map((avatar) => (
-                    <div key={avatar.id} className={classes.listRow}>
-                        <span className={classes.listRowName}>{avatar.name}</span>
-                        <span className={classes.listRowMeta}>{avatar.source === "url" ? "URL" : "File"}</span>
-                        <span className={classes.listRowMeta}>{avatar.namingScheme}</span>
-                        <Button
-                            appearance="transparent"
-                            icon={EditRegular}
-                            title="Edit"
-                            disabled={!!editing}
-                            onClick={() => {
-                                void startEdit(avatar);
-                            }}
-                        />
-                        <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(avatar)} />
-                    </div>
-                ))}
-            </div>
+            {allAvatars.length === 0 && <span className={classes.emptyMsg}>No custom avatars defined.</span>}
+            <DataGrid
+                items={allAvatars}
+                columns={avatarColumns}
+                getRowId={(item) => item.id}
+                style={{ flex: editing ? undefined : 1, maxHeight: editing ? "140px" : undefined, overflowY: "auto" }}
+                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}>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index 60f028b5eb3..78a881b48e2 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -21,7 +21,15 @@ import {
     Body1Strong,
     Caption1,
     Spinner,
+    DataGrid,
+    DataGridHeader,
+    DataGridBody,
+    DataGridRow,
+    DataGridHeaderCell,
+    DataGridCell,
+    createTableColumn,
 } from "@fluentui/react-components";
+import type { TableColumnDefinition, 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";
@@ -97,33 +105,6 @@ const useStyles = makeStyles({
         flexShrink: 0,
         paddingBottom: tokens.spacingVerticalXS,
     },
-    listArea: {
-        overflowY: "auto",
-        border: `1px solid ${tokens.colorNeutralStroke2}`,
-        borderRadius: tokens.borderRadiusMedium,
-        display: "flex",
-        flexDirection: "column",
-    },
-    listRow: {
-        display: "flex",
-        alignItems: "center",
-        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
-        gap: tokens.spacingHorizontalXS,
-        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
-        ":last-child": { borderBottom: "none" },
-    },
-    listRowName: {
-        flex: 1,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-    },
-    listRowMeta: {
-        color: tokens.colorNeutralForeground3,
-        fontSize: "12px",
-        flexShrink: 0,
-        marginRight: tokens.spacingHorizontalXS,
-    },
     editSection: {
         flexShrink: 0,
         borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
@@ -153,6 +134,9 @@ const useStyles = makeStyles({
     },
     formControl: {
         flex: 1,
+        textAlign: "left",
+        "& span": { textAlign: "left" },
+        "& input": { textAlign: "left" },
     },
     mappingTable: {
         flex: 1,
@@ -254,6 +238,16 @@ type RemappingEdit = {
     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 both URL and file sources). */
@@ -322,6 +316,36 @@ const SchemesPanel: FunctionComponent<{
 
     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);
@@ -546,22 +570,22 @@ const SchemesPanel: FunctionComponent<{
                     <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
                 </div>
             </div>
-            <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "160px" : undefined }}>
-                {schemeNames.length === 0 && <span className={classes.emptyMsg}>No naming schemes defined.</span>}
-                {schemeNames.map((name) => {
-                    const count = manager.getNamingScheme(name)?.length ?? 0;
-                    return (
-                        <div key={name} className={classes.listRow}>
-                            <span className={classes.listRowName}>{name}</span>
-                            <span className={classes.listRowMeta}>
-                                {count} bone{count !== 1 ? "s" : ""}
-                            </span>
-                            <Button appearance="transparent" icon={EditRegular} title="Edit" disabled={!!editing} onClick={() => startEdit(name)} />
-                            <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(name)} />
-                        </div>
-                    );
-                })}
-            </div>
+            {schemeNames.length === 0 && <span className={classes.emptyMsg}>No naming schemes defined.</span>}
+            <DataGrid
+                items={schemeRows}
+                columns={schemeColumns}
+                getRowId={(item) => item.name}
+                style={{ flex: editing ? undefined : 1, maxHeight: editing ? "160px" : undefined, overflowY: "auto" }}
+                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 && <span className={classes.errorText}>{error}</span>}
             {editing && (
                 <div className={classes.editSectionFlex}>
@@ -656,7 +680,30 @@ const RemappingsPanel: FunctionComponent<{
     );
 
     const schemeNames = manager.getAllSchemeNames().sort((a, b) => a.localeCompare(b));
-    const allRemappings = [...manager.getAllRemappings()].sort((a, b) => `${a.fromScheme}→${a.toScheme}`.localeCompare(`${b.fromScheme}→${b.toScheme}`));
+    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) {
@@ -832,18 +879,22 @@ const RemappingsPanel: FunctionComponent<{
                     <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing || schemeNames.length < 2} />
                 </div>
             </div>
-            <div className={classes.listArea} style={{ flex: editing ? "0 0 auto" : 1, maxHeight: editing ? "140px" : undefined }}>
-                {allRemappings.length === 0 && <span className={classes.emptyMsg}>No remappings defined.</span>}
-                {allRemappings.map(({ fromScheme, toScheme }) => (
-                    <div key={`${fromScheme}|${toScheme}`} className={classes.listRow}>
-                        <span className={classes.listRowName}>
-                            {fromScheme} → {toScheme}
-                        </span>
-                        <Button appearance="transparent" icon={EditRegular} title="Edit" disabled={!!editing} onClick={() => startEdit(fromScheme, toScheme)} />
-                        <Button appearance="transparent" icon={DeleteRegular} title="Delete" disabled={!!editing} onClick={() => handleDelete(fromScheme, toScheme)} />
-                    </div>
-                ))}
-            </div>
+            {allRemappings.length === 0 && <span className={classes.emptyMsg}>No remappings defined.</span>}
+            <DataGrid
+                items={allRemappings}
+                columns={remappingColumns}
+                getRowId={(item) => `${item.fromScheme}|${item.toScheme}`}
+                style={{ flex: editing ? undefined : 1, maxHeight: editing ? "140px" : undefined, overflowY: "auto" }}
+                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>

From 28d969db5d40ffb50fa221844633717938b2d820 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Fri, 20 Mar 2026 16:19:01 +0100
Subject: [PATCH 22/30] Use engine from current scene, don't create a new
 instance

---
 .../animationRetargetingExtension.tsx         | 20 ++++++++++----
 .../animationRetargetingViewport.tsx          | 26 +++++++++---------
 .../retargetingSceneManager.ts                | 27 +++++++++++++------
 3 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 4c969372fb2..b3ca008cbdf 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -1,9 +1,12 @@
 import type { IDisposable } from "core/index";
+import type { Engine } from "core/Engines/engine";
 import type { ServiceDefinition } from "../../modularity/serviceDefinition";
 import type { IShellService } from "../../services/shellService";
 import type { ISettingsStore } from "../../services/settingsStore";
+import type { ISceneContext } from "../../services/sceneContext";
 import { ShellServiceIdentity } from "../../services/shellService";
 import { SettingsStoreIdentity } from "../../services/settingsStore";
+import { SceneContextIdentity } from "../../services/sceneContext";
 
 import { Observable } from "core/Misc/observable";
 import { PersonRunningRegular } from "@fluentui/react-icons";
@@ -22,10 +25,10 @@ import { AnimationManager } from "./animationManager";
  * - 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]> = {
+export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShellService, ISettingsStore, ISceneContext]> = {
     friendlyName: "Animation Retargeting",
-    consumes: [ShellServiceIdentity, SettingsStoreIdentity],
-    factory: (shellService, settingsStore) => {
+    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
@@ -67,12 +70,19 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
             isEnabled = enabled;
 
             if (enabled) {
-                // Register the central-content viewport; the component creates the Engine+Scene
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    return;
+                }
+                const engine = scene.getEngine() as Engine;
+
+                // 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);
@@ -81,7 +91,7 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                     ),
                 });
             } else {
-                // Dispose viewport — the component's useEffect cleanup will dispose Engine+Scene
+                // Dispose viewport — the component's useEffect cleanup will restore the PG's render loops
                 viewportReg?.dispose();
                 viewportReg = null;
                 currentManager = null;
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
index 6dd2afb7e40..2d58754bb92 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "react";
 
+import type { Engine } from "core/Engines/engine";
 import { makeStyles } from "@fluentui/react-components";
 import { useEffect, useRef } from "react";
 
@@ -10,13 +11,7 @@ const useStyles = makeStyles({
         position: "absolute",
         inset: "0",
         overflow: "hidden",
-        backgroundColor: "#1a1a1a",
-    },
-    canvas: {
-        width: "100%",
-        height: "100%",
-        display: "block",
-        outline: "none",
+        pointerEvents: "none",
     },
     labels: {
         position: "absolute",
@@ -30,30 +25,34 @@ const useStyles = makeStyles({
         fontSize: "13px",
         fontFamily: "sans-serif",
     },
+    consoleContainer: {
+        pointerEvents: "auto",
+    },
 });
 
 type AnimationRetargetingViewportProps = {
+    engine: Engine;
     onManagerReady: (manager: RetargetingSceneManager) => void;
 };
 
-export const AnimationRetargetingViewport: FunctionComponent<AnimationRetargetingViewportProps> = ({ onManagerReady }) => {
+export const AnimationRetargetingViewport: FunctionComponent<AnimationRetargetingViewportProps> = ({ engine, onManagerReady }) => {
     const classes = useStyles();
     const containerRef = useRef<HTMLDivElement>(null);
-    const canvasRef = useRef<HTMLCanvasElement>(null);
     const managerRef = useRef<RetargetingSceneManager | null>(null);
 
     useEffect(() => {
-        if (!canvasRef.current || !containerRef.current) {
+        if (!containerRef.current) {
             return;
         }
 
         const manager = new RetargetingSceneManager();
         managerRef.current = manager;
-        manager.initialize(canvasRef.current);
+        manager.initialize(engine);
         manager.htmlConsole.attachToContainer(containerRef.current);
         onManagerReady(manager);
 
-        const resizeObserver = new ResizeObserver(() => manager.resize());
+        // Resize the engine when the central content area changes size
+        const resizeObserver = new ResizeObserver(() => engine.resize());
         resizeObserver.observe(containerRef.current);
 
         return () => {
@@ -62,11 +61,10 @@ export const AnimationRetargetingViewport: FunctionComponent<AnimationRetargetin
             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}>
-            <canvas ref={canvasRef} className={classes.canvas} />
             <div className={classes.labels}>
                 <span>◀ Avatar</span>
                 <span>Animation ▶</span>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
index bb658a6d225..cc861ca1d1a 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -1,8 +1,8 @@
 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 { Engine } from "core/Engines/engine";
 import { Vector3 } from "core/Maths/math.vector";
 import { DirectionalLight } from "core/Lights/directionalLight";
 import { ShadowGenerator } from "core/Lights/Shadows/shadowGenerator";
@@ -54,6 +54,7 @@ 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;
@@ -77,8 +78,13 @@ export class RetargetingSceneManager {
 
     public constructor() {}
 
-    public initialize(canvas: HTMLCanvasElement): void {
-        this._engine = new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+    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);
         this._scene.environmentTexture = CubeTexture.CreateFromPrefilteredData("https://playground.babylonjs.com/textures/environment.env", this._scene);
@@ -287,16 +293,21 @@ export class RetargetingSceneManager {
         return "data:;base64," + btoa(binary);
     }
 
-    public resize(): void {
-        this._engine?.resize();
-    }
-
     public dispose(): void {
         this.avatar?.dispose();
         this.animationSource?.dispose();
         this.htmlConsole.dispose();
         this._scene?.dispose();
-        this._engine?.dispose();
+
+        // Restore original render loops instead of disposing the engine — we don't own it
+        if (this._engine) {
+            this._engine.stopRenderLoop();
+            for (const loop of this._savedRenderLoops) {
+                this._engine.runRenderLoop(loop);
+            }
+            this._savedRenderLoops = [];
+        }
+
         this.avatar = null;
         this.animationSource = null;
         this._scene = null;

From c414193ba5a894e48fa3cd6d7a36e82081150545 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Fri, 20 Mar 2026 16:39:05 +0100
Subject: [PATCH 23/30] feat(inspector): add 'Import from current scene' for
 animation retargeting

Add the ability to import avatars and animations directly from the
current PG scene into the animation retargeting extension. Since the
retargeting viewport and PG share the same WebGL engine, scene data
is serialized via SceneSerializer and loaded as data: URLs.

Changes:
- avatarManager/animationManager: add source='scene', sessionOnly flag,
  purgeSessionOnly(), skip session-only in export
- Extension startup: purge stale session-only entries before defaults
- Pass getCurrentScene through panel -> config dialog -> sub-panels
- avatarsPanel/animationsPanel: 'Import from scene' button, build node
  tree and auto-detect naming scheme directly from PG scene, hide
  URL/drop-zone for scene-sourced entries
- animationRetargetingPanel: handle source='scene' in load handlers
  using SceneSerializer.SerializeMesh / SceneSerializer.Serialize
- DataGrid source column shows 'Scene (session)' badge for transient entries

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../animationRetargeting/animationManager.ts  |  42 +++--
 .../animationRetargetingExtension.tsx         |   5 +
 .../animationRetargetingPanel.tsx             |  48 ++++-
 .../animationRetargeting/animationsPanel.tsx  | 169 +++++++++++++----
 .../animationRetargeting/avatarManager.ts     |  42 +++--
 .../animationRetargeting/avatarsPanel.tsx     | 175 ++++++++++++++----
 .../retargetingConfigDialog.tsx               |  24 ++-
 7 files changed, 389 insertions(+), 116 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
index 19bd8875468..28dd344f34b 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -21,7 +21,7 @@ export type StoredAnimation = {
     id: string;
     /** User-chosen name for this animation file entry (shown in the list). */
     name: string;
-    source: "url" | "file";
+    source: "url" | "file" | "scene";
     url?: string;
     fileNames?: string[];
     namingScheme: string;
@@ -30,6 +30,8 @@ export type StoredAnimation = {
     /** 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 = {
@@ -275,22 +277,25 @@ export class AnimationManager {
 
     /**
      * 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.
      */
     public async exportDataAsync(): Promise<Array<StoredAnimation & { fileData?: Record<string, string> }>> {
         return await Promise.all(
-            this._animations.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;
+            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;
                     }
-                    entry.fileData = fileData;
-                }
-                return entry;
-            })
+                    return entry;
+                })
         );
     }
 
@@ -361,6 +366,17 @@ export class AnimationManager {
         }
     }
 
+    /**
+     * 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 {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index b3ca008cbdf..2f50a1143d6 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -45,6 +45,10 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         // 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();
@@ -116,6 +120,7 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                     onConfigChangedObs={onConfigChangedObs}
                     onManagerReadyObs={onManagerReadyObs}
                     getCurrentManager={() => currentManager}
+                    getCurrentScene={() => sceneContext.currentScene}
                     namingSchemeManager={namingSchemeManager}
                     avatarManager={avatarManager}
                     animationManager={animationManager}
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index dac55cece2a..29a36cf1659 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -1,7 +1,10 @@
 import type { FunctionComponent } from "react";
 import type { Observable } from "core/Misc/observable";
+import type { Nullable } from "core/types";
+import type { Scene } from "core/scene";
 import { FilesInputStore } from "core/Misc/filesInputStore";
 import { SceneLoader } from "core/Loading/sceneLoader";
+import { SceneSerializer } from "core/Misc/sceneSerializer";
 import type { Transform } from "../../components/properties/transformProperties";
 import { makeStyles, tokens, Body1Strong } from "@fluentui/react-components";
 import { Button } from "shared-ui-components/fluent/primitives/button";
@@ -205,6 +208,7 @@ export type AnimationRetargetingPanelProps = {
     onConfigChangedObs: Observable<void>;
     onManagerReadyObs: Observable<RetargetingSceneManager>;
     getCurrentManager: () => RetargetingSceneManager | null;
+    getCurrentScene: () => Nullable<Scene>;
     namingSchemeManager: NamingSchemeManager;
     avatarManager: AvatarManager;
     animationManager: AnimationManager;
@@ -220,6 +224,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     onConfigChangedObs,
     onManagerReadyObs,
     getCurrentManager,
+    getCurrentScene,
     namingSchemeManager,
     avatarManager,
     animationManager,
@@ -539,7 +544,16 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 const storedAv = avatarManager.getAvatar(s.avatarName);
                 const storedAn = animationManager.getByDisplayName(s.animationName)?.entry;
                 if (storedAv) {
-                    if (storedAv.source === "url" && storedAv.url) {
+                    if (storedAv.source === "scene") {
+                        const pgScene = getCurrentScene();
+                        if (pgScene) {
+                            const rootMesh = pgScene.getMeshByName(storedAv.rootNodeName);
+                            if (rootMesh) {
+                                const serialized = JSON.stringify(SceneSerializer.SerializeMesh(rootMesh, false, true));
+                                void manager.avatar!.loadAsync("data:" + serialized, 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 () => {
@@ -564,7 +578,13 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                         await manager.animationSource!.loadAsync(path, storedAn.restPoseUpdate, storedAn.rootNodeName);
                         manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
                     };
-                    if (storedAn.source === "url" && storedAn.url) {
+                    if (storedAn.source === "scene") {
+                        const pgScene = getCurrentScene();
+                        if (pgScene) {
+                            const serialized = JSON.stringify(SceneSerializer.Serialize(pgScene));
+                            void loadAndPlayAsync("data:" + serialized);
+                        }
+                    } else if (storedAn.source === "url" && storedAn.url) {
                         void loadAndPlayAsync(storedAn.url);
                     } else if (storedAn.source === "file" && storedAn.fileNames?.length) {
                         void (async () => {
@@ -656,7 +676,16 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             setIsAvatarLoaded(false);
             setIsRetargeted(false);
 
-            if (storedAvatar.source === "url" && storedAvatar.url) {
+            if (storedAvatar.source === "scene") {
+                const pgScene = getCurrentScene();
+                if (pgScene) {
+                    const rootMesh = pgScene.getMeshByName(storedAvatar.rootNodeName);
+                    if (rootMesh) {
+                        const serialized = JSON.stringify(SceneSerializer.SerializeMesh(rootMesh, false, true));
+                        void manager.avatar.loadAsync("data:" + serialized, 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);
@@ -674,7 +703,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 }
             }
         },
-        [avatarManager]
+        [avatarManager, getCurrentScene]
     );
 
     const handleLoadAnimation = useCallback(
@@ -692,7 +721,13 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             setIsRetargeted(false);
 
             let loadPath: string | undefined;
-            if (storedAnimation.source === "url" && storedAnimation.url) {
+            if (storedAnimation.source === "scene") {
+                const pgScene = getCurrentScene();
+                if (pgScene) {
+                    const serialized = JSON.stringify(SceneSerializer.Serialize(pgScene));
+                    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);
@@ -716,7 +751,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
             }
         },
-        [animationManager]
+        [animationManager, getCurrentScene]
     );
 
     // Keep refs up to date so the config-changed handler can call the latest versions
@@ -797,6 +832,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                     manager={namingSchemeManager}
                     avatarManager={avatarManager}
                     animationManager={animationManager}
+                    getCurrentScene={getCurrentScene}
                     open={isDialogOpen}
                     onClose={() => {
                         setIsDialogOpen(false);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index 86eba912c62..5b63ef36b8f 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -2,6 +2,7 @@ import type { FunctionComponent } from "react";
 import type { AnimationManager, StoredAnimation, AnimationGroupMapping } from "./animationManager";
 import type { NamingSchemeManager } from "./namingSchemeManager";
 import type { RestPoseDataUpdate } from "./avatarManager";
+import type { Nullable } from "core/types";
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import {
@@ -31,7 +32,7 @@ import type { TableColumnDefinition, TableColumnSizingOptions } from "@fluentui/
 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 } from "@fluentui/react-icons";
+import { AddRegular, DeleteRegular, EditRegular, ArrowUploadRegular, DocumentArrowLeftRegular } from "@fluentui/react-icons";
 import { NullEngine } from "core/Engines/nullEngine";
 import { Scene } from "core/scene";
 import { ImportMeshAsync, SceneLoader } from "core/Loading/sceneLoader";
@@ -195,7 +196,7 @@ type NodeInfo = {
 type AnimationEdit = {
     id: string | null;
     name: string;
-    sourceType: "url" | "file";
+    sourceType: "url" | "file" | "scene";
     url: string;
     files: File[];
     /** One row per animation group found in the file. */
@@ -203,6 +204,7 @@ type AnimationEdit = {
     rootNodeName: string;
     namingScheme: string;
     restPoseJson: string;
+    sessionOnly?: boolean;
 };
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -261,9 +263,10 @@ function DetectNamingScheme(targetNames: Set<string>, namingSchemeManager: Namin
 export const AnimationsPanel: FunctionComponent<{
     animationManager: AnimationManager;
     namingSchemeManager: NamingSchemeManager;
+    getCurrentScene: () => Nullable<Scene>;
     onMutate: () => void;
     onEditingChange: (editing: boolean) => void;
-}> = ({ animationManager, namingSchemeManager, onMutate, onEditingChange }) => {
+}> = ({ animationManager, namingSchemeManager, getCurrentScene, onMutate, onEditingChange }) => {
     const classes = useStyles();
     const [editing, setEditing] = useState<AnimationEdit | null>(null);
     const [error, setError] = useState<string | null>(null);
@@ -303,7 +306,18 @@ export const AnimationsPanel: FunctionComponent<{
 
     const animationColumns: TableColumnDefinition<StoredAnimation>[] = [
         createTableColumn({ columnId: "name", renderHeaderCell: () => "Name", renderCell: (item) => item.name }),
-        createTableColumn({ columnId: "source", renderHeaderCell: () => "Source", renderCell: (item) => (item.source === "url" ? "URL" : "File") }),
+        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",
@@ -452,9 +466,22 @@ export const AnimationsPanel: FunctionComponent<{
                 rootNodeName: animation.rootNodeName ?? "",
                 namingScheme: animation.namingScheme,
                 restPoseJson: animation.restPoseUpdate ? JSON.stringify(animation.restPoseUpdate, undefined, 2) : "",
+                sessionOnly: animation.sessionOnly,
             });
             setError(null);
-            if (animation.source === "url" && animation.url) {
+            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);
+                }
+            } 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);
@@ -463,9 +490,65 @@ export const AnimationsPanel: FunctionComponent<{
                 }
             }
         },
-        [setEditingWithNotify, loadPreview, animationManager]
+        [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;
+        }
+
+        // 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
+        let detectedScheme: string | null = null;
+        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);
+
+        setEditingWithNotify({
+            id: null,
+            name: "",
+            sourceType: "scene",
+            url: "",
+            files: [],
+            mappings,
+            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);
@@ -541,6 +624,7 @@ export const AnimationsPanel: FunctionComponent<{
                 rootNodeName: editing.rootNodeName,
                 animations: editing.mappings.map((m) => ({ ...m, displayName: m.displayName.trim() })),
                 restPoseUpdate,
+                sessionOnly: editing.sessionOnly,
             };
 
             animationManager.addAnimation(animation);
@@ -688,6 +772,7 @@ export const AnimationsPanel: FunctionComponent<{
             <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 && <span className={classes.emptyMsg}>No custom animations defined.</span>}
@@ -717,43 +802,47 @@ export const AnimationsPanel: FunctionComponent<{
                         <TextInput className={classes.formControl} value={editing.name} onChange={(v) => setEditing({ ...editing, name: v })} />
                     </div>
 
-                    {/* URL input */}
-                    <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") {
+                    {/* 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);
                                     }
-                                },
-                            }}
-                        />
-                    </div>
+                                }}
+                                input={{
+                                    onBlur: () => {
+                                        if (editing.url.trim() && editing.sourceType !== "file") {
+                                            void loadPreview("url", editing.url, [], true);
+                                        }
+                                    },
+                                }}
+                            />
+                        </div>
+                    )}
 
-                    {/* Drop zone */}
-                    <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 style={{ display: "none" }} onChange={handleFileInput} />
-                    </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 style={{ display: "none" }} onChange={handleFileInput} />
+                        </div>
+                    )}
 
                     {/* Loading indicator */}
                     {isLoading && (
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
index 2e0255f24cf..abaadb546f8 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -11,12 +11,14 @@ export type StoredAvatar = {
     /** Unique, immutable identifier generated at creation time. Used as the IndexedDB key prefix. */
     id: string;
     name: string;
-    source: "url" | "file";
+    source: "url" | "file" | "scene";
     url?: string;
     fileNames?: string[];
     namingScheme: string;
     rootNodeName: string;
     restPoseUpdate?: RestPoseDataUpdate;
+    /** When true, this entry is transient and will be purged on next startup. */
+    sessionOnly?: boolean;
 };
 
 type SerializedData = {
@@ -223,22 +225,25 @@ export class AvatarManager {
 
     /**
      * 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.
      */
     public async exportDataAsync(): Promise<Array<StoredAvatar & { fileData?: Record<string, string> }>> {
         return await Promise.all(
-            this._avatars.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;
+            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;
                     }
-                    entry.fileData = fileData;
-                }
-                return entry;
-            })
+                    return entry;
+                })
         );
     }
 
@@ -306,6 +311,17 @@ export class AvatarManager {
         }
     }
 
+    /**
+     * 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 {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index 0c169943e46..aabcda3fe1a 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -1,6 +1,7 @@
 import type { FunctionComponent } from "react";
 import type { AvatarManager, StoredAvatar, RestPoseDataUpdate } from "./avatarManager";
 import type { NamingSchemeManager } from "./namingSchemeManager";
+import type { Nullable } from "core/types";
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import {
@@ -30,7 +31,7 @@ import type { TableColumnDefinition, TableColumnSizingOptions } from "@fluentui/
 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 } from "@fluentui/react-icons";
+import { AddRegular, DeleteRegular, EditRegular, ArrowUploadRegular, DocumentArrowLeftRegular } from "@fluentui/react-icons";
 import { NullEngine } from "core/Engines/nullEngine";
 import { Scene } from "core/scene";
 import { ImportMeshAsync, SceneLoader } from "core/Loading/sceneLoader";
@@ -157,12 +158,13 @@ type AvatarEdit = {
     id: string | null;
     originalName: string | null;
     name: string;
-    sourceType: "url" | "file";
+    sourceType: "url" | "file" | "scene";
     url: string;
     files: File[];
     rootNodeName: string;
     namingScheme: string;
     restPoseJson: string;
+    sessionOnly?: boolean;
 };
 
 type NodeInfo = {
@@ -236,9 +238,10 @@ function DetectNamingScheme(nodeNames: Set<string>, namingSchemeManager: NamingS
 export const AvatarsPanel: FunctionComponent<{
     avatarManager: AvatarManager;
     namingSchemeManager: NamingSchemeManager;
+    getCurrentScene: () => Nullable<Scene>;
     onMutate: () => void;
     onEditingChange: (editing: boolean) => void;
-}> = ({ avatarManager, namingSchemeManager, onMutate, onEditingChange }) => {
+}> = ({ avatarManager, namingSchemeManager, getCurrentScene, onMutate, onEditingChange }) => {
     const classes = useStyles();
     const [editing, setEditing] = useState<AvatarEdit | null>(null);
     const [error, setError] = useState<string | null>(null);
@@ -280,7 +283,18 @@ export const AvatarsPanel: FunctionComponent<{
 
     const avatarColumns: TableColumnDefinition<StoredAvatar>[] = [
         createTableColumn({ columnId: "name", renderHeaderCell: () => "Name", renderCell: (item) => item.name }),
-        createTableColumn({ columnId: "source", renderHeaderCell: () => "Source", renderCell: (item) => (item.source === "url" ? "URL" : "File") }),
+        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",
@@ -426,11 +440,24 @@ export const AvatarsPanel: FunctionComponent<{
                 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 === "url" && avatar.url) {
+            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);
+                }
+            } 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);
@@ -439,9 +466,71 @@ export const AvatarsPanel: FunctionComponent<{
                 }
             }
         },
-        [setEditingWithNotify, loadPreview, avatarManager]
+        [setEditingWithNotify, loadPreview, avatarManager, getCurrentScene]
     );
 
+    const startImportFromScene = useCallback(() => {
+        const scene = getCurrentScene();
+        if (!scene) {
+            return;
+        }
+
+        setEditingWithNotify({
+            id: null,
+            originalName: null,
+            name: "",
+            sourceType: "scene",
+            url: "",
+            files: [],
+            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
+        let detectedScheme: string | null = null;
+        const nodeNames = new Set(nodes.map((n) => n.name));
+        detectedScheme = DetectNamingScheme(nodeNames, namingSchemeManager);
+        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,
+                    rootNodeName: nodes[0].name,
+                    ...(detectedScheme ? { namingScheme: detectedScheme } : {}),
+                };
+            });
+        }
+    }, [getCurrentScene, schemeNames, setEditingWithNotify, namingSchemeManager]);
+
     const handleCancel = useCallback(() => {
         setEditingWithNotify(null);
         setError(null);
@@ -514,6 +603,7 @@ export const AvatarsPanel: FunctionComponent<{
                 namingScheme: editing.namingScheme,
                 rootNodeName: editing.rootNodeName,
                 restPoseUpdate,
+                sessionOnly: editing.sessionOnly,
             };
 
             avatarManager.addAvatar(avatar);
@@ -624,6 +714,7 @@ export const AvatarsPanel: FunctionComponent<{
             <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 && <span className={classes.emptyMsg}>No custom avatars defined.</span>}
@@ -653,43 +744,47 @@ export const AvatarsPanel: FunctionComponent<{
                         <TextInput className={classes.formControl} value={editing.name} onChange={(v) => setEditing({ ...editing, name: v })} />
                     </div>
 
-                    {/* URL input — loads on Enter or blur */}
-                    <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") {
+                    {/* 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);
                                     }
-                                },
-                            }}
-                        />
-                    </div>
+                                }}
+                                input={{
+                                    onBlur: () => {
+                                        if (editing.url.trim() && editing.sourceType !== "file") {
+                                            void loadPreview("url", editing.url, [], true);
+                                        }
+                                    },
+                                }}
+                            />
+                        </div>
+                    )}
 
-                    {/* Drop zone — always visible */}
-                    <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 style={{ display: "none" }} onChange={handleFileInput} />
-                    </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 style={{ display: "none" }} onChange={handleFileInput} />
+                        </div>
+                    )}
 
                     {/* Loading indicator */}
                     {isLoading && (
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index 78a881b48e2..c2735550e08 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -2,6 +2,7 @@ import type { FunctionComponent } from "react";
 import type { NamingSchemeManager, BoneEntry } from "./namingSchemeManager";
 import type { AvatarManager, StoredAvatar } from "./avatarManager";
 import type { AnimationManager, StoredAnimation } from "./animationManager";
+import type { Nullable } from "core/types";
 
 import { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import {
@@ -250,7 +251,7 @@ type RemappingRow = {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-/** Loads a stored avatar or animation into a scene (handles both URL and file sources). */
+/** Loads a stored avatar or animation into a scene (handles URL, file, and scene sources). */
 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);
@@ -269,6 +270,8 @@ async function LoadIntoScene(scene: Scene, entry: StoredAvatar | StoredAnimation
             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.");
     }
@@ -961,11 +964,12 @@ export type RetargetingConfigDialogProps = {
     manager: NamingSchemeManager;
     avatarManager: AvatarManager;
     animationManager: AnimationManager;
+    getCurrentScene: () => Nullable<Scene>;
     open: boolean;
     onClose: () => void;
 };
 
-export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogProps> = ({ manager, avatarManager, animationManager, open, onClose }) => {
+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);
@@ -1203,9 +1207,21 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                     </TabList>
                     <DialogContent className={classes.content}>
                         {activeTab === "avatars" ? (
-                            <AvatarsPanel avatarManager={avatarManager} namingSchemeManager={manager} onMutate={onMutate} onEditingChange={onEditingChange} />
+                            <AvatarsPanel
+                                avatarManager={avatarManager}
+                                namingSchemeManager={manager}
+                                getCurrentScene={getCurrentScene}
+                                onMutate={onMutate}
+                                onEditingChange={onEditingChange}
+                            />
                         ) : activeTab === "animations" ? (
-                            <AnimationsPanel animationManager={animationManager} namingSchemeManager={manager} onMutate={onMutate} onEditingChange={onEditingChange} />
+                            <AnimationsPanel
+                                animationManager={animationManager}
+                                namingSchemeManager={manager}
+                                getCurrentScene={getCurrentScene}
+                                onMutate={onMutate}
+                                onEditingChange={onEditingChange}
+                            />
                         ) : activeTab === "schemes" ? (
                             <SchemesPanel
                                 manager={manager}

From b6a2a6e1db91fab0fb31b8a1e6e2db784252d031 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Tue, 24 Mar 2026 15:43:29 +0100
Subject: [PATCH 24/30] Add support for avatars and animations created from
 scene, as well as exporting to scene

---
 .../animationRetargeting/animation.ts         |  55 +++-
 .../animationRetargeting/animationManager.ts  |  26 +-
 .../animationRetargetingExtension.tsx         |  68 ++++-
 .../animationRetargetingPanel.tsx             | 149 ++++++++--
 .../animationRetargetingViewport.tsx          |  14 +-
 .../animationRetargeting/animationsPanel.tsx  | 150 +++++++---
 .../extensions/animationRetargeting/avatar.ts |  56 +++-
 .../animationRetargeting/avatarManager.ts     |  21 ++
 .../animationRetargeting/avatarsPanel.tsx     | 166 ++++++++---
 .../animationRetargeting/boneDropdown.tsx     |  14 +-
 .../animationRetargeting/helperFunctions.ts   | 262 ++++++++++++++++--
 .../animationRetargeting/htmlConsole.ts       |   4 +-
 .../namingSchemeManager.ts                    |  24 +-
 .../retargetingConfigDialog.tsx               | 161 ++++++++---
 .../retargetingSceneManager.ts                | 147 ++++++++--
 .../animationRetargeting/sceneTransfer.ts     | 180 ++++++++++++
 16 files changed, 1282 insertions(+), 215 deletions(-)
 create mode 100644 packages/dev/inspector-v2/src/extensions/animationRetargeting/sceneTransfer.ts

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
index f67a02c07fc..bf2fd233b7a 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -6,6 +6,7 @@ import type { AnimationGroup } from "core/Animations/animationGroup";
 import type { AbstractMesh } from "core/Meshes/abstractMesh";
 import type { TransformNode } from "core/Meshes/transformNode";
 import type { Vector3, Quaternion } from "core/Maths/math.vector";
+import type { Skeleton } from "core/Bones/skeleton";
 import type { RestPoseDataUpdate } from "./avatarManager";
 
 import { Color3 } from "core/Maths/math.color";
@@ -78,16 +79,18 @@ export class AnimationSource {
         this._gizmoManager.coordinatesMode = GizmoCoordinatesMode.Local;
     }
 
-    public async loadAsync(path: string, restPoseUpdate?: RestPoseDataUpdate, skeletonRootNodeName?: string): Promise<void> {
+    public async loadAsync(path: string, restPoseUpdate?: RestPoseDataUpdate, skeletonRootNodeName?: string, animationGroupIndex = 0): Promise<void> {
         this._cleanScene();
-        await this._loadFileAsync(path, restPoseUpdate, skeletonRootNodeName);
+        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 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 [];
@@ -118,7 +121,9 @@ export class AnimationSource {
         return listSorted;
     }
 
-    /** Returns transform node options in hierarchy order, with indented labels for parenting. */
+    /** 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 [];
@@ -158,7 +163,10 @@ export class AnimationSource {
         this._saveTransformNodes();
     }
 
-    /** Builds the rest-pose export data for the playground code generator. */
+    /** 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] : [];
     }
@@ -192,6 +200,7 @@ export class AnimationSource {
     /**
      * 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 = [];
@@ -226,7 +235,9 @@ export class AnimationSource {
         this._updateGizmoEnabled(enabled, type);
     }
 
-    /** Attaches the gizmo to the transform node with the given name (called when user picks from the dropdown). */
+    /** 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;
@@ -275,34 +286,55 @@ export class AnimationSource {
         this._gizmoManager.dispose();
     }
 
-    private async _loadFileAsync(path: string, restPoseUpdate?: RestPoseDataUpdate, skeletonRootNodeName?: string): Promise<void> {
+    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);
         }
 
-        this._rootNode = this._scene.getMeshByName("__root__");
+        // 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 first animation group (not the "avatar" retargeted one)
+        // 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 (!this._animationGroup) {
+                if (currentIndex === animationGroupIndex) {
                     this._animationGroup = animGroup;
                 } else {
                     lstAnimDelete.add(animGroup);
                 }
+                currentIndex++;
             }
         }
         lstAnimDelete.forEach((anim) => anim.dispose());
@@ -311,9 +343,10 @@ export class AnimationSource {
             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<import("core/Bones/skeleton").Skeleton>();
+        const skeletonsDelete = new Set<Skeleton>();
         for (const skeleton of this._scene.skeletons) {
             if (skeleton.name !== "avatar") {
                 skeletonsDelete.add(skeleton);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
index 28dd344f34b..e998e94d7a6 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -162,7 +162,9 @@ export class AnimationManager {
         return this._animations;
     }
 
-    /** Returns all non-empty display names across all stored animation files. */
+    /** 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) {
@@ -175,7 +177,10 @@ export class AnimationManager {
         return names;
     }
 
-    /** Finds the stored animation file and specific mapping for a given display name. */
+    /** 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;
@@ -194,7 +199,11 @@ export class AnimationManager {
         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). */
+    /** 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) {
@@ -213,6 +222,7 @@ export class AnimationManager {
      * 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) {
@@ -229,6 +239,7 @@ export class AnimationManager {
 
     /**
      * 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);
@@ -244,6 +255,8 @@ export class AnimationManager {
 
     /**
      * 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[]> {
@@ -260,6 +273,9 @@ export class AnimationManager {
 
     /**
      * 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(
@@ -278,6 +294,7 @@ export class AnimationManager {
     /**
      * 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(
@@ -301,6 +318,9 @@ export class AnimationManager {
 
     /**
      * 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[] = [];
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 2f50a1143d6..27d717990cc 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -4,10 +4,13 @@ import type { ServiceDefinition } from "../../modularity/serviceDefinition";
 import type { IShellService } from "../../services/shellService";
 import type { ISettingsStore } from "../../services/settingsStore";
 import type { ISceneContext } from "../../services/sceneContext";
+import type { IPlaygroundBridge } from "../../services/playgroundBridgeService";
 import { ShellServiceIdentity } from "../../services/shellService";
 import { SettingsStoreIdentity } from "../../services/settingsStore";
 import { SceneContextIdentity } from "../../services/sceneContext";
+import { PlaygroundBridgeIdentity } from "../../services/playgroundBridgeService";
 
+import type { IObserver } from "core/Misc/observable";
 import { Observable } from "core/Misc/observable";
 import { PersonRunningRegular } from "@fluentui/react-icons";
 
@@ -19,6 +22,18 @@ 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).
@@ -58,6 +73,8 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
         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();
@@ -67,6 +84,14 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
             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;
@@ -80,6 +105,14 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                 }
                 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",
@@ -95,10 +128,7 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                     ),
                 });
             } else {
-                // Dispose viewport — the component's useEffect cleanup will restore the PG's render loops
-                viewportReg?.dispose();
-                viewportReg = null;
-                currentManager = null;
+                cleanupViewport();
             }
 
             isEnabledObs.notifyObservers(enabled);
@@ -121,6 +151,7 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
                     onManagerReadyObs={onManagerReadyObs}
                     getCurrentManager={() => currentManager}
                     getCurrentScene={() => sceneContext.currentScene}
+                    getPlaygroundBridge={GetPlaygroundBridge}
                     namingSchemeManager={namingSchemeManager}
                     avatarManager={avatarManager}
                     animationManager={animationManager}
@@ -131,9 +162,18 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
             ),
         });
 
+        // 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();
@@ -143,6 +183,24 @@ export const AnimationRetargetingServiceDefinition: ServiceDefinition<[], [IShel
     },
 };
 
+/**
+ * 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],
+    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
index 29a36cf1659..f1e4f668635 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -2,11 +2,12 @@ import type { FunctionComponent } 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 } from "../../components/properties/transformProperties";
-import { makeStyles, tokens, Body1Strong } from "@fluentui/react-components";
+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 { useCallback, useEffect, useRef, useState } from "react";
@@ -29,6 +30,13 @@ 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[],
@@ -90,7 +98,7 @@ const useStyles = makeStyles({
         alignItems: "center",
         justifyContent: "center",
         color: tokens.colorNeutralForeground3,
-        fontSize: "13px",
+        fontSize: tokens.fontSizeBase200,
         fontStyle: "italic",
     },
     boneDropdownLabel: {
@@ -117,7 +125,7 @@ const useStyles = makeStyles({
     },
     loadingText: {
         padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalM}`,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
         color: tokens.colorNeutralForeground3,
     },
     dropdownRow: {
@@ -133,7 +141,7 @@ const useStyles = makeStyles({
     },
     errorHint: {
         color: tokens.colorPaletteRedForeground1,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
         paddingLeft: tokens.spacingHorizontalL,
     },
 });
@@ -209,6 +217,7 @@ export type AnimationRetargetingPanelProps = {
     onManagerReadyObs: Observable<RetargetingSceneManager>;
     getCurrentManager: () => RetargetingSceneManager | null;
     getCurrentScene: () => Nullable<Scene>;
+    getPlaygroundBridge: () => IPlaygroundBridge | null;
     namingSchemeManager: NamingSchemeManager;
     avatarManager: AvatarManager;
     animationManager: AnimationManager;
@@ -225,6 +234,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     onManagerReadyObs,
     getCurrentManager,
     getCurrentScene,
+    getPlaygroundBridge,
     namingSchemeManager,
     avatarManager,
     animationManager,
@@ -298,6 +308,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     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);
 
@@ -433,6 +444,9 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
          * 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;
@@ -542,15 +556,16 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                 setIsAvatarPlaying(false);
                 setIsAnimPlaying(false);
                 const storedAv = avatarManager.getAvatar(s.avatarName);
-                const storedAn = animationManager.getByDisplayName(s.animationName)?.entry;
+                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) {
-                                const serialized = JSON.stringify(SceneSerializer.SerializeMesh(rootMesh, false, true));
-                                void manager.avatar!.loadAsync("data:" + serialized, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
+                                void manager.avatar!.loadFromSceneAsync(pgScene, storedAv.rootNodeName, s.avatarRescaleAvatar, storedAv.restPoseUpdate);
                             }
                         }
                     } else if (storedAv.source === "url" && storedAv.url) {
@@ -574,18 +589,27 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                     }
                 }
                 if (storedAn) {
-                    const loadAndPlayAsync = async (path: string) => {
-                        await manager.animationSource!.loadAsync(path, storedAn.restPoseUpdate, storedAn.rootNodeName);
-                        manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
+                    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 serialized = JSON.stringify(SceneSerializer.Serialize(pgScene));
-                            void loadAndPlayAsync("data:" + serialized);
+                            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 loadAndPlayAsync(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!);
@@ -599,7 +623,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                 }
                             }
                             if (sceneFile) {
-                                void loadAndPlayAsync("file:" + sceneFile.name);
+                                void loadAnimAsync("file:" + sceneFile.name);
                             }
                         })();
                     }
@@ -679,11 +703,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             if (storedAvatar.source === "scene") {
                 const pgScene = getCurrentScene();
                 if (pgScene) {
-                    const rootMesh = pgScene.getMeshByName(storedAvatar.rootNodeName);
-                    if (rootMesh) {
-                        const serialized = JSON.stringify(SceneSerializer.SerializeMesh(rootMesh, false, true));
-                        void manager.avatar.loadAsync("data:" + serialized, rescale, storedAvatar.restPoseUpdate);
-                    }
+                    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);
@@ -712,7 +732,9 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             if (!manager?.animationSource) {
                 return;
             }
-            const storedAnimation = animationManager.getByDisplayName(name)?.entry;
+            const animResult = animationManager.getByDisplayName(name);
+            const storedAnimation = animResult?.entry;
+            const animGroupIdx = animResult?.mapping.index ?? 0;
             if (!storedAnimation) {
                 return;
             }
@@ -724,7 +746,9 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             if (storedAnimation.source === "scene") {
                 const pgScene = getCurrentScene();
                 if (pgScene) {
-                    const serialized = JSON.stringify(SceneSerializer.Serialize(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) {
@@ -746,9 +770,8 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
             }
 
             if (loadPath) {
-                await manager.animationSource.loadAsync(loadPath, storedAnimation.restPoseUpdate, storedAnimation.rootNodeName);
+                await manager.animationSource.loadAsync(loadPath, storedAnimation.restPoseUpdate, storedAnimation.rootNodeName, animGroupIdx);
                 manager.animationSource!.setSkeletonVisible(true);
-                manager.animationSource?.play(stateSnapshotRef.current.animationSpeed);
             }
         },
         [animationManager, getCurrentScene]
@@ -852,13 +875,85 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                             disabled={!isAvatarLoaded || !isAnimLoaded || isLoading || (rootNodeName !== "Auto" && rootNodeName === groundReferenceNodeName)}
                         />
                         <ButtonLine
-                            label="Export to Playground"
+                            label={isExporting ? "Exporting…" : "Export to Playground"}
                             title="Export the retargeted animation as a Babylon.js Playground snippet"
                             onClick={() => {
-                                void managerRef.current?.exportToPlaygroundAsync(avatarManager, animationManager);
+                                setIsExporting(true);
+                                void (async () => {
+                                    try {
+                                        await managerRef.current?.exportToPlaygroundAsync(avatarManager, animationManager, () => setIsExporting(false));
+                                    } catch {
+                                        setIsExporting(false);
+                                    }
+                                })();
                             }}
-                            disabled={!isRetargeted}
+                            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>}
@@ -1163,7 +1258,7 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
                                     </div>
                                 </div>
                                 {rootNodeName !== "Auto" && rootNodeName === groundReferenceNodeName && (
-                                    <span className={classes.errorHint}>Root node and Ground ref. node must be different.</span>
+                                    <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>
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
index 2d58754bb92..47c502159b7 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
@@ -1,7 +1,7 @@
 import type { FunctionComponent } from "react";
 
 import type { Engine } from "core/Engines/engine";
-import { makeStyles } from "@fluentui/react-components";
+import { makeStyles, tokens, Body1 } from "@fluentui/react-components";
 import { useEffect, useRef } from "react";
 
 import { RetargetingSceneManager } from "./retargetingSceneManager";
@@ -22,7 +22,7 @@ const useStyles = makeStyles({
         justifyContent: "space-around",
         pointerEvents: "none",
         color: "rgba(255,255,255,0.7)",
-        fontSize: "13px",
+        fontSize: tokens.fontSizeBase200,
         fontFamily: "sans-serif",
     },
     consoleContainer: {
@@ -57,7 +57,11 @@ export const AnimationRetargetingViewport: FunctionComponent<AnimationRetargetin
 
         return () => {
             resizeObserver.disconnect();
-            manager.dispose();
+            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
@@ -66,8 +70,8 @@ export const AnimationRetargetingViewport: FunctionComponent<AnimationRetargetin
     return (
         <div ref={containerRef} className={classes.container}>
             <div className={classes.labels}>
-                <span>◀ Avatar</span>
-                <span>Animation ▶</span>
+                <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
index 5b63ef36b8f..1752db64276 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -33,6 +33,7 @@ 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";
@@ -93,13 +94,18 @@ const useStyles = makeStyles({
     },
     errorText: {
         color: tokens.colorPaletteRedForeground1,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
+        flexShrink: 0,
+    },
+    warningText: {
+        color: tokens.colorPaletteYellowForeground1,
+        fontSize: tokens.fontSizeBase200,
         flexShrink: 0,
     },
     emptyMsg: {
         padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
         color: tokens.colorNeutralForeground3,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
     },
     confirmSurface: {
         width: "380px",
@@ -115,7 +121,7 @@ const useStyles = makeStyles({
         borderRadius: tokens.borderRadiusMedium,
         padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
         fontFamily: "monospace",
-        fontSize: "11px",
+        fontSize: tokens.fontSizeBase100,
         backgroundColor: tokens.colorNeutralBackground1,
         color: tokens.colorNeutralForeground1,
     },
@@ -126,7 +132,7 @@ const useStyles = makeStyles({
         textAlign: "center",
         cursor: "pointer",
         color: tokens.colorNeutralForeground3,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
     },
     dropZoneActive: {
         border: `2px dashed ${tokens.colorCompoundBrandStroke}`,
@@ -144,7 +150,7 @@ const useStyles = makeStyles({
         alignItems: "center",
         padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
         gap: tokens.spacingHorizontalS,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
         borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
         ":last-child": { borderBottom: "none" },
     },
@@ -160,7 +166,7 @@ const useStyles = makeStyles({
     },
     animRowError: {
         color: tokens.colorPaletteRedForeground1,
-        fontSize: "11px",
+        fontSize: tokens.fontSizeBase100,
         flexShrink: 0,
     },
     nodeTree: {
@@ -173,7 +179,7 @@ const useStyles = makeStyles({
     },
     nodeRow: {
         padding: `0 ${tokens.spacingHorizontalS}`,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
         lineHeight: "13px",
         fontFamily: "monospace",
         cursor: "pointer",
@@ -183,6 +189,29 @@ const useStyles = makeStyles({
         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 ────────────────────────────────────────────────────────────────────
@@ -201,6 +230,9 @@ type AnimationEdit = {
     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;
@@ -231,6 +263,9 @@ function BuildNodeList(node: Node, depth: number, list: NodeInfo[], ancestorCont
  * 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();
@@ -270,6 +305,7 @@ export const AnimationsPanel: FunctionComponent<{
     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);
@@ -420,10 +456,19 @@ export const AnimationsPanel: FunctionComponent<{
                         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,
-                        rootNodeName: prev.rootNodeName || (nodes.length > 0 ? nodes[0].name : ""),
+                        rootNodeIndex: idx,
+                        rootNodeName: prev.rootNodeName || (nodes.length > 0 ? (nodes[idx]?.name ?? "") : ""),
                         ...(detectedScheme ? { namingScheme: detectedScheme } : {}),
                     };
                 });
@@ -446,6 +491,7 @@ export const AnimationsPanel: FunctionComponent<{
             url: "",
             files: [],
             mappings: [],
+            rootNodeIndex: -1,
             rootNodeName: "",
             namingScheme: schemeNames[0] ?? "",
             restPoseJson: "",
@@ -463,6 +509,7 @@ export const AnimationsPanel: FunctionComponent<{
                 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) : "",
@@ -480,6 +527,11 @@ export const AnimationsPanel: FunctionComponent<{
                         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);
@@ -505,6 +557,24 @@ export const AnimationsPanel: FunctionComponent<{
             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,
@@ -523,7 +593,6 @@ export const AnimationsPanel: FunctionComponent<{
         setNodeList(nodes);
 
         // Auto-detect naming scheme from animation targets
-        let detectedScheme: string | null = null;
         const targetNames = new Set<string>();
         for (const group of groups) {
             for (const ta of group.targetedAnimations) {
@@ -532,7 +601,7 @@ export const AnimationsPanel: FunctionComponent<{
                 }
             }
         }
-        detectedScheme = DetectNamingScheme(targetNames, namingSchemeManager);
+        const detectedScheme = DetectNamingScheme(targetNames, namingSchemeManager);
 
         setEditingWithNotify({
             id: null,
@@ -541,6 +610,7 @@ export const AnimationsPanel: FunctionComponent<{
             url: "",
             files: [],
             mappings,
+            rootNodeIndex: 0,
             rootNodeName: nodes.length > 0 ? nodes[0].name : "",
             namingScheme: detectedScheme ?? schemeNames[0] ?? "",
             restPoseJson: "",
@@ -552,6 +622,7 @@ export const AnimationsPanel: FunctionComponent<{
     const handleCancel = useCallback(() => {
         setEditingWithNotify(null);
         setError(null);
+        setWarning(null);
         setNodeList([]);
         tempSceneRef.current?.dispose();
         tempSceneRef.current = null;
@@ -775,12 +846,12 @@ export const AnimationsPanel: FunctionComponent<{
                     <Button icon={DocumentArrowLeftRegular} label="Import from scene" onClick={startImportFromScene} disabled={!!editing || !getCurrentScene()} />
                 </div>
             </div>
-            {allAnimations.length === 0 && <span className={classes.emptyMsg}>No custom animations defined.</span>}
+            {allAnimations.length === 0 && <Caption1 className={classes.emptyMsg}>No custom animations defined.</Caption1>}
             <DataGrid
                 items={allAnimations}
                 columns={animationColumns}
                 getRowId={(item) => item.id}
-                style={{ flex: editing ? undefined : 1, maxHeight: editing ? "140px" : undefined, overflowY: "auto" }}
+                className={mergeClasses(editing ? classes.dataGridCompact : classes.dataGridFlex)}
                 resizableColumns
                 columnSizingOptions={animationColumnSizing}
             >
@@ -840,21 +911,21 @@ export const AnimationsPanel: FunctionComponent<{
                         >
                             <ArrowUploadRegular />
                             <div>Drop file(s) here or click to browse</div>
-                            <input ref={fileInputRef} type="file" multiple style={{ display: "none" }} onChange={handleFileInput} />
+                            <input ref={fileInputRef} type="file" multiple className={classes.hiddenInput} onChange={handleFileInput} />
                         </div>
                     )}
 
                     {/* Loading indicator */}
                     {isLoading && (
-                        <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>
-                            Loading… <Spinner size="tiny" style={{ display: "inline-block" }} />
+                        <Caption1 className={classes.subtleText}>
+                            Loading… <Spinner size="tiny" className={classes.spinnerInline} />
                         </Caption1>
                     )}
 
                     {/* Animation group mapping table */}
                     {editing.mappings.length > 0 && (
                         <>
-                            <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>
+                            <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}>
@@ -862,9 +933,9 @@ export const AnimationsPanel: FunctionComponent<{
                                     const rowError = getMappingError(mapping);
                                     return (
                                         <div key={mapping.index} className={classes.animRow}>
-                                            <span className={classes.animRowName} title={mapping.groupName}>
+                                            <Caption1 className={classes.animRowName} title={mapping.groupName}>
                                                 {mapping.groupName}
-                                            </span>
+                                            </Caption1>
                                             <Input
                                                 className={classes.animRowInput}
                                                 size="small"
@@ -872,7 +943,7 @@ export const AnimationsPanel: FunctionComponent<{
                                                 value={mapping.displayName}
                                                 onChange={(_, d) => updateMappingDisplayName(mapping.index, d.value)}
                                             />
-                                            {rowError && <span className={classes.animRowError}>{rowError}</span>}
+                                            {rowError && <Caption1 className={classes.animRowError}>{rowError}</Caption1>}
                                         </div>
                                     );
                                 })}
@@ -883,13 +954,31 @@ export const AnimationsPanel: FunctionComponent<{
                     {/* Node tree for root node selection */}
                     {nodeList.length > 0 && (
                         <>
-                            <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>Select the root node for skeleton creation ({nodeList.length} nodes found):</Caption1>
+                            <Caption1 className={classes.subtleText}>Select the root node for skeleton creation ({nodeList.length} nodes found):</Caption1>
                             <div className={classes.nodeTree}>
-                                {nodeList.map((node) => (
+                                {nodeList.map((node, idx) => (
                                     <div
-                                        key={node.name}
-                                        className={mergeClasses(classes.nodeRow, editing.rootNodeName === node.name ? classes.nodeRowSelected : undefined)}
-                                        onClick={() => setEditing({ ...editing, rootNodeName: node.name })}
+                                        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>
@@ -910,19 +999,18 @@ export const AnimationsPanel: FunctionComponent<{
                     </div>
 
                     {/* Rest pose data */}
-                    <div className={classes.formRow} style={{ alignItems: "flex-start" }}>
-                        <Label className={classes.formLabel} style={{ paddingTop: "6px" }}>
-                            Rest pose data
-                        </Label>
-                        <textarea
+                    <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={(e) => setEditing({ ...editing, restPoseJson: e.target.value })}
+                            onChange={(newVal) => setEditing({ ...editing, restPoseJson: newVal })}
                         />
                     </div>
 
-                    {error && <span className={classes.errorText}>{error}</span>}
+                    {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} />
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
index 304486270e1..e4dcb77c7c4 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -3,10 +3,12 @@ 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 { 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";
@@ -30,7 +32,7 @@ export type GizmoType = "Position" | "Rotation" | "Scale";
 
 const ShadowLayerMask = 0x10000000;
 
-type BoneTransformations = Map<Bone, { position: Vector3; scaling: Vector3; quaternion: import("core/Maths/math.vector").Quaternion }>;
+type BoneTransformations = Map<Bone, { position: Vector3; scaling: Vector3; quaternion: Quaternion }>;
 
 export class Avatar {
     private _animatorAvatar: Nullable<AnimatorAvatar> = null;
@@ -44,6 +46,9 @@ export class Avatar {
     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>();
@@ -63,6 +68,9 @@ export class Avatar {
     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;
@@ -98,7 +106,9 @@ export class Avatar {
         this._cleanScene();
     }
 
-    /** Returns the list of all bone names in the avatar skeleton, in hierarchy order. */
+    /** 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 [];
@@ -107,7 +117,9 @@ export class Avatar {
         return skeleton.bones.map((b) => b.name);
     }
 
-    /** Returns bone options in hierarchy order, with indented labels for parenting. */
+    /** 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 [];
@@ -167,6 +179,7 @@ export class Avatar {
     /**
      * 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 = [];
@@ -260,6 +273,15 @@ export class Avatar {
         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:")) {
@@ -268,6 +290,10 @@ export class Avatar {
             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);
@@ -312,7 +338,7 @@ export class Avatar {
         this._saveBoneTransformations(this._initialBoneTransformations);
 
         const [avatarSkeleton] = this._animatorAvatar.skeletons;
-        const skeletonViewer = new SkeletonViewer(avatarSkeleton, (avatarMesh ?? result.meshes[1]) as Mesh, this._scene, undefined, 0, {
+        const skeletonViewer = new SkeletonViewer(avatarSkeleton, (avatarMesh ?? avatarRootNode) as Mesh, this._scene, undefined, 0, {
             displayMode: SkeletonViewer.DISPLAY_SPHERE_AND_SPURS,
             displayOptions: {
                 showLocalAxes: false,
@@ -355,13 +381,29 @@ export class Avatar {
     }
 
     private _cleanScene(): void {
-        this._animatorAvatar?.dispose();
-        this._animatorAvatar = null;
+        // 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();
     }
 
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
index abaadb546f8..fdfe66bf129 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -15,7 +15,10 @@ export type StoredAvatar = {
     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;
@@ -161,6 +164,7 @@ export class AvatarManager {
      * 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) {
@@ -177,6 +181,7 @@ export class AvatarManager {
 
     /**
      * 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);
@@ -192,6 +197,8 @@ export class AvatarManager {
 
     /**
      * 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[]> {
@@ -208,6 +215,9 @@ export class AvatarManager {
 
     /**
      * 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(
@@ -226,6 +236,7 @@ export class AvatarManager {
     /**
      * 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(
@@ -249,6 +260,9 @@ export class AvatarManager {
 
     /**
      * 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[] = [];
@@ -307,6 +321,7 @@ export class AvatarManager {
                 url: baseUrl + d.file,
                 namingScheme: d.scheme,
                 rootNodeName: "__root__",
+                rootNodeIndex: 0,
             });
         }
     }
@@ -328,6 +343,12 @@ export class AvatarManager {
         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 = [];
         }
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index aabcda3fe1a..06dfa29e28f 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -32,10 +32,12 @@ 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 ───────────────────────────────────────────────────────────────────
@@ -92,13 +94,13 @@ const useStyles = makeStyles({
     },
     errorText: {
         color: tokens.colorPaletteRedForeground1,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
         flexShrink: 0,
     },
     emptyMsg: {
         padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
         color: tokens.colorNeutralForeground3,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
     },
     confirmSurface: {
         width: "380px",
@@ -114,7 +116,7 @@ const useStyles = makeStyles({
         borderRadius: tokens.borderRadiusMedium,
         padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
         fontFamily: "monospace",
-        fontSize: "11px",
+        fontSize: tokens.fontSizeBase100,
         backgroundColor: tokens.colorNeutralBackground1,
         color: tokens.colorNeutralForeground1,
     },
@@ -125,7 +127,7 @@ const useStyles = makeStyles({
         textAlign: "center",
         cursor: "pointer",
         color: tokens.colorNeutralForeground3,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
     },
     dropZoneActive: {
         border: `2px dashed ${tokens.colorCompoundBrandStroke}`,
@@ -140,7 +142,7 @@ const useStyles = makeStyles({
     },
     nodeRow: {
         padding: `0 ${tokens.spacingHorizontalS}`,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
         lineHeight: "13px",
         fontFamily: "monospace",
         cursor: "pointer",
@@ -150,6 +152,29 @@ const useStyles = makeStyles({
         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 ────────────────────────────────────────────────────────────────────
@@ -161,6 +186,9 @@ type AvatarEdit = {
     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;
@@ -170,6 +198,8 @@ type AvatarEdit = {
 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;
 };
@@ -180,8 +210,13 @@ type NodeInfo = {
  * 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[]): void {
+function BuildNodeList(node: Node, depth: number, list: NodeInfo[], ancestorContinues: boolean[], meshes?: AbstractMesh[]): void {
     let prefix = "";
     if (depth > 0) {
         // Draw continuation lines for ancestors
@@ -192,13 +227,14 @@ function BuildNodeList(node: Node, depth: number, list: NodeInfo[], ancestorCont
         const isLast = !ancestorContinues[depth];
         prefix += isLast ? "└─ " : "├─ ";
     }
-    list.push({ name: node.name, depth, prefix });
+    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);
+        BuildNodeList(children[i], depth + 1, list, ancestorContinues, meshes);
     }
 }
 
@@ -206,6 +242,9 @@ function BuildNodeList(node: Node, depth: number, list: NodeInfo[], ancestorCont
  * 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();
@@ -359,13 +398,13 @@ export const AvatarsPanel: FunctionComponent<{
                 // 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);
+                    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;
@@ -394,10 +433,35 @@ export const AvatarsPanel: FunctionComponent<{
                         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,
-                            rootNodeName: prev.rootNodeName || nodes[0].name,
-                            ...(detectedScheme ? { namingScheme: detectedScheme } : {}),
+                            rootNodeIndex: idx,
+                            rootNodeName: prev.rootNodeName || nodes[idx].name,
+                            ...(scheme ? { namingScheme: scheme } : {}),
                         };
                     });
                 }
@@ -420,6 +484,7 @@ export const AvatarsPanel: FunctionComponent<{
             sourceType: "url",
             url: "",
             files: [],
+            rootNodeIndex: -1,
             rootNodeName: "",
             namingScheme: schemeNames[0] ?? "",
             restPoseJson: "",
@@ -437,6 +502,7 @@ export const AvatarsPanel: FunctionComponent<{
                 sourceType: avatar.source,
                 url: avatar.url ?? "",
                 files: [],
+                rootNodeIndex: -1,
                 rootNodeName: avatar.rootNodeName,
                 namingScheme: avatar.namingScheme,
                 restPoseJson: avatar.restPoseUpdate ? JSON.stringify(avatar.restPoseUpdate, undefined, 2) : "",
@@ -456,6 +522,11 @@ export const AvatarsPanel: FunctionComponent<{
                         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);
@@ -482,6 +553,7 @@ export const AvatarsPanel: FunctionComponent<{
             sourceType: "scene",
             url: "",
             files: [],
+            rootNodeIndex: -1,
             rootNodeName: "",
             namingScheme: schemeNames[0] ?? "",
             restPoseJson: "",
@@ -499,10 +571,21 @@ export const AvatarsPanel: FunctionComponent<{
         }
         setNodeList(nodes);
 
-        // Auto-detect naming scheme
+        // Auto-detect naming scheme from the first (default-selected) node's subtree
         let detectedScheme: string | null = null;
-        const nodeNames = new Set(nodes.map((n) => n.name));
-        detectedScheme = DetectNamingScheme(nodeNames, namingSchemeManager);
+        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) {
@@ -524,6 +607,7 @@ export const AvatarsPanel: FunctionComponent<{
                 }
                 return {
                     ...prev,
+                    rootNodeIndex: 0,
                     rootNodeName: nodes[0].name,
                     ...(detectedScheme ? { namingScheme: detectedScheme } : {}),
                 };
@@ -594,6 +678,7 @@ export const AvatarsPanel: FunctionComponent<{
                 }
             }
 
+            const selectedNode = editing.rootNodeIndex >= 0 ? nodeList[editing.rootNodeIndex] : undefined;
             const avatar: StoredAvatar = {
                 id: avatarId,
                 name: editing.name.trim(),
@@ -602,6 +687,7 @@ export const AvatarsPanel: FunctionComponent<{
                 fileNames: editing.sourceType === "file" ? fileNames : undefined,
                 namingScheme: editing.namingScheme,
                 rootNodeName: editing.rootNodeName,
+                rootNodeIndex: editing.sourceType !== "scene" && selectedNode ? selectedNode.meshIndex : undefined,
                 restPoseUpdate,
                 sessionOnly: editing.sessionOnly,
             };
@@ -717,12 +803,12 @@ export const AvatarsPanel: FunctionComponent<{
                     <Button icon={DocumentArrowLeftRegular} label="Import from scene" onClick={startImportFromScene} disabled={!!editing || !getCurrentScene()} />
                 </div>
             </div>
-            {allAvatars.length === 0 && <span className={classes.emptyMsg}>No custom avatars defined.</span>}
+            {allAvatars.length === 0 && <Caption1 className={classes.emptyMsg}>No custom avatars defined.</Caption1>}
             <DataGrid
                 items={allAvatars}
                 columns={avatarColumns}
                 getRowId={(item) => item.id}
-                style={{ flex: editing ? undefined : 1, maxHeight: editing ? "140px" : undefined, overflowY: "auto" }}
+                className={mergeClasses(editing ? classes.dataGridCompact : classes.dataGridFlex)}
                 resizableColumns
                 columnSizingOptions={avatarColumnSizing}
             >
@@ -782,27 +868,45 @@ export const AvatarsPanel: FunctionComponent<{
                         >
                             <ArrowUploadRegular />
                             <div>Drop file(s) here or click to browse</div>
-                            <input ref={fileInputRef} type="file" multiple style={{ display: "none" }} onChange={handleFileInput} />
+                            <input ref={fileInputRef} type="file" multiple className={classes.hiddenInput} onChange={handleFileInput} />
                         </div>
                     )}
 
                     {/* Loading indicator */}
                     {isLoading && (
-                        <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>
-                            Loading… <Spinner size="tiny" style={{ display: "inline-block" }} />
+                        <Caption1 className={classes.subtleText}>
+                            Loading… <Spinner size="tiny" className={classes.spinnerInline} />
                         </Caption1>
                     )}
 
                     {/* Node tree */}
                     {nodeList.length > 0 && (
                         <>
-                            <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>Select the root node of the avatar ({nodeList.length} nodes found):</Caption1>
+                            <Caption1 className={classes.subtleText}>Select the root node of the avatar ({nodeList.length} nodes found):</Caption1>
                             <div className={classes.nodeTree}>
-                                {nodeList.map((node) => (
+                                {nodeList.map((node, idx) => (
                                     <div
-                                        key={node.name}
-                                        className={mergeClasses(classes.nodeRow, editing.rootNodeName === node.name ? classes.nodeRowSelected : undefined)}
-                                        onClick={() => setEditing({ ...editing, rootNodeName: node.name })}
+                                        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>
@@ -823,19 +927,17 @@ export const AvatarsPanel: FunctionComponent<{
                     </div>
 
                     {/* Rest pose data */}
-                    <div className={classes.formRow} style={{ alignItems: "flex-start" }}>
-                        <Label className={classes.formLabel} style={{ paddingTop: "6px" }}>
-                            Rest pose data
-                        </Label>
-                        <textarea
+                    <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={(e) => setEditing({ ...editing, restPoseJson: e.target.value })}
+                            onChange={(newVal) => setEditing({ ...editing, restPoseJson: newVal })}
                         />
                     </div>
 
-                    {error && <span className={classes.errorText}>{error}</span>}
+                    {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} />
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
index b4bc12f0838..b7be9767e30 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, makeStyles, Option, useId } from "@fluentui/react-components";
+import { Dropdown, makeStyles, Option, useId, Body1 } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
 import { useContext, useEffect, useState } from "react";
 import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
@@ -23,12 +23,18 @@ const useStyles = makeStyles({
         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";
@@ -49,11 +55,11 @@ export const BoneDropdown: FunctionComponent<BoneDropdownProps> = (props) => {
             disabled={props.disabled}
             size={size}
             className={classes.dropdown}
-            button={<span className={classes.buttonText}>{optionLabel}</span>}
+            button={<Body1 className={classes.buttonText}>{optionLabel}</Body1>}
             positioning={{ matchTargetSize: undefined, position: "below", align: "start" }}
-            listbox={{ style: { overflowX: "hidden", minWidth: "max-content" } }}
+            listbox={{ className: classes.listbox }}
             selectedOptions={[currentValue]}
-            value={optionLabel}
+            value={optionLabel ?? ""}
             onOptionSelect={(_evt, data) => {
                 if (data.optionValue !== undefined) {
                     setCurrentValue(data.optionValue);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
index 12c887d92c8..d1a786e5947 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
@@ -56,35 +56,74 @@ function PackSnippetData(code: string) {
     });
 }
 
-export function SaveSnippet(code: string) {
-    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;
+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"));
                 }
-                window.open(newUrl, "_blank");
-            } else {
-                Logger.Error("Unable to save your code. It may be too long.");
             }
-        }
-    };
+        };
 
-    xmlHttp.open("POST", "https://snippet.babylonjs.com" + (CurrentSnippetToken ? "/" + CurrentSnippetToken : ""), true);
-    xmlHttp.withCredentials = false;
-    xmlHttp.setRequestHeader("Content-Type", "application/json");
-    xmlHttp.send(PackSnippetData(code));
+        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%;
@@ -103,20 +142,21 @@ class Playground {
         }
 
         // Load the avatar
-        const result = await BABYLON.ImportMeshAsync(avatarPath, scene);
+        const result = await loadMeshesAsync(avatarPath, scene);
 
-        const avatarRootNode = result.meshes[0];
+        const avatarRootNode = result.meshes[%avatarRootNodeIndex%];
         avatarRootNode.name = "avatar";
 
         const numAnimations = scene.animationGroups.length;
+        const animationGroupIndex = %animationGroupIndex%;
 
         // Load the animation
-        await BABYLON.AppendSceneAsync(animationPath, scene);
+        await appendSceneAsync(animationPath, scene);
 
         const animRootNode = scene.getMeshByName("__root__");
         animRootNode.name = "reference";
 
-        const sourceAnimationGroup = scene.animationGroups[numAnimations];
+        const sourceAnimationGroup = scene.animationGroups[numAnimations + animationGroupIndex];
 
         scene.stopAllAnimations();
 
@@ -206,3 +246,175 @@ class Playground {
 }
 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
index de810491a16..ae4767363cf 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
@@ -64,7 +64,9 @@ export class HTMLConsole {
         };
     }
 
-    /** Appends the overlay element to the given container (should be position:relative). */
+    /** 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);
     }
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
index b32b5a22b0a..034c580a6ac 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
@@ -148,6 +148,8 @@ export class NamingSchemeManager {
 
     /**
      * 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);
@@ -156,6 +158,7 @@ export class NamingSchemeManager {
 
     /**
      * Returns the names of all registered naming schemes.
+     * @returns Array of scheme name strings.
      */
     public getAllSchemeNames(): string[] {
         return Array.from(this._schemes.keys());
@@ -164,6 +167,7 @@ export class NamingSchemeManager {
     /**
      * 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 }));
@@ -233,6 +237,7 @@ export class NamingSchemeManager {
 
     /**
      * 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 {
@@ -255,6 +260,9 @@ export class NamingSchemeManager {
      *
      * 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 {
@@ -295,6 +303,8 @@ export class NamingSchemeManager {
      * 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.
      */
@@ -328,7 +338,11 @@ export class NamingSchemeManager {
         return undefined;
     }
 
-    /** Returns the single-step map from one scheme to an adjacent one (forward or inverse). */
+    /** 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) {
@@ -347,7 +361,10 @@ export class NamingSchemeManager {
         return undefined;
     }
 
-    /** Composes the per-step maps along a BFS (Breadth-First Search) path into a single from→to map. */
+    /** 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) {
@@ -369,6 +386,7 @@ export class NamingSchemeManager {
 
     /**
      * 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[]> = {};
@@ -433,6 +451,8 @@ export class NamingSchemeManager {
 
     /**
      * 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 {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index c2735550e08..ca3226199c2 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -3,6 +3,9 @@ import type { NamingSchemeManager, BoneEntry } from "./namingSchemeManager";
 import type { AvatarManager, StoredAvatar } from "./avatarManager";
 import type { AnimationManager, 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 { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import {
@@ -34,6 +37,7 @@ import type { TableColumnDefinition, TableColumnSizingOptions } from "@fluentui/
 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,
@@ -161,11 +165,11 @@ const useStyles = makeStyles({
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "pre",
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
     },
     mappingSelect: {
         flex: 1,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
         padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS}`,
         border: `1px solid ${tokens.colorNeutralStroke1}`,
         borderRadius: tokens.borderRadiusSmall,
@@ -175,7 +179,7 @@ const useStyles = makeStyles({
     },
     errorText: {
         color: tokens.colorPaletteRedForeground1,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
         flexShrink: 0,
     },
     actionRow: {
@@ -187,7 +191,7 @@ const useStyles = makeStyles({
     emptyMsg: {
         padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
         color: tokens.colorNeutralForeground3,
-        fontSize: "12px",
+        fontSize: tokens.fontSizeBase200,
     },
     confirmSurface: {
         width: "380px",
@@ -219,6 +223,38 @@ const useStyles = makeStyles({
         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.
@@ -251,7 +287,11 @@ type RemappingRow = {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-/** Loads a stored avatar or animation into a scene (handles URL, file, and scene sources). */
+/**
+ * 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);
@@ -283,9 +323,10 @@ const SchemesPanel: FunctionComponent<{
     manager: NamingSchemeManager;
     avatarManager: AvatarManager;
     animationManager: AnimationManager;
+    getCurrentScene: () => Scene | null;
     onMutate: () => void;
     onEditingChange: (editing: boolean) => void;
-}> = ({ manager, avatarManager, animationManager, onMutate, onEditingChange }) => {
+}> = ({ manager, avatarManager, animationManager, getCurrentScene, onMutate, onEditingChange }) => {
     const classes = useStyles();
     const [editing, setEditing] = useState<SchemeEdit | null>(null);
     const [error, setError] = useState<string | null>(null);
@@ -433,36 +474,64 @@ const SchemesPanel: FunctionComponent<{
                     if (!avatar) {
                         throw new Error(`Avatar "${name}" not found.`);
                     }
-                    await LoadIntoScene(scene, avatar, avatarManager);
 
-                    // Extract bone names from the first skeleton in hierarchy order (DFS)
-                    const skeleton = scene.skeletons[0];
-                    if (!skeleton) {
-                        throw new Error("No skeleton found in this avatar.");
-                    }
-                    const lines: string[] = [];
-                    const visitBone = (bone: import("core/Bones/bone").Bone, depth: number) => {
-                        lines.push("  ".repeat(depth) + bone.name);
-                        for (const child of bone.children) {
-                            visitBone(child, depth + 1);
+                    if (avatar.source === "scene") {
+                        // Read directly from PG scene
+                        const pgScene = getCurrentScene();
+                        if (!pgScene) {
+                            throw new Error("No active scene available.");
                         }
-                    };
-                    for (const bone of skeleton.bones) {
-                        if (!bone.parent) {
-                            visitBone(bone, 0);
+                        // 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") });
                     }
-                    setEditing({ ...editing, namesText: lines.join("\n") });
                 } else {
                     const animation = animationManager.getAnimationById(name);
                     if (!animation) {
                         throw new Error(`Animation "${name}" not found.`);
                     }
-                    await LoadIntoScene(scene, animation, animationManager);
+
+                    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 scene.animationGroups) {
+                    for (const group of targetScene.animationGroups) {
                         for (const ta of group.targetedAnimations) {
                             if (ta.target?.name) {
                                 targetNames.add(ta.target.name as string);
@@ -475,7 +544,7 @@ const SchemesPanel: FunctionComponent<{
                     // Walk scene in DFS order, include only animation targets
                     const lines: string[] = [];
                     const visited = new Set<string>();
-                    const walkNode = (node: import("core/node").Node, depth: number) => {
+                    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);
@@ -484,7 +553,7 @@ const SchemesPanel: FunctionComponent<{
                             walkNode(child, depth + 1);
                         }
                     };
-                    for (const rootNode of scene.rootNodes) {
+                    for (const rootNode of targetScene.rootNodes) {
                         walkNode(rootNode, 0);
                     }
                     setEditing({ ...editing, namesText: lines.join("\n") });
@@ -496,7 +565,7 @@ const SchemesPanel: FunctionComponent<{
                 setIsPopulating(false);
             }
         },
-        [editing, avatarManager, animationManager]
+        [editing, avatarManager, animationManager, getCurrentScene]
     );
 
     const handleSave = useCallback(() => {
@@ -573,12 +642,12 @@ const SchemesPanel: FunctionComponent<{
                     <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing} />
                 </div>
             </div>
-            {schemeNames.length === 0 && <span className={classes.emptyMsg}>No naming schemes defined.</span>}
+            {schemeNames.length === 0 && <Caption1 className={classes.emptyMsg}>No naming schemes defined.</Caption1>}
             <DataGrid
                 items={schemeRows}
                 columns={schemeColumns}
                 getRowId={(item) => item.name}
-                style={{ flex: editing ? undefined : 1, maxHeight: editing ? "160px" : undefined, overflowY: "auto" }}
+                className={mergeClasses(editing ? classes.dataGridCompactTall : classes.dataGridFlex)}
                 resizableColumns
                 columnSizingOptions={schemeColumnSizing}
             >
@@ -589,7 +658,7 @@ const SchemesPanel: FunctionComponent<{
                     {({ item, rowId }) => <DataGridRow<SchemeRow> key={rowId}>{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}</DataGridRow>}
                 </DataGridBody>
             </DataGrid>
-            {!editing && error && <span className={classes.errorText}>{error}</span>}
+            {!editing && error && <Caption1 className={classes.errorText}>{error}</Caption1>}
             {editing && (
                 <div className={classes.editSectionFlex}>
                     <Body1Strong>{editing.originalName ? `Editing "${editing.originalName}"` : "New Scheme"}</Body1Strong>
@@ -617,18 +686,16 @@ const SchemesPanel: FunctionComponent<{
                         </Select>
                         {isPopulating && <Spinner size="tiny" />}
                     </div>
-                    <div style={{ display: "flex", flex: 1, minHeight: 0, gap: tokens.spacingHorizontalS }}>
-                        <Label className={classes.formLabel} style={{ paddingTop: "6px", flexShrink: 0 }}>
-                            Bone names
-                        </Label>
-                        <textarea
+                    <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={(e) => setEditing({ ...editing, namesText: e.target.value })}
+                            onChange={(newVal) => setEditing({ ...editing, namesText: newVal })}
                         />
                     </div>
-                    {error && <span className={classes.errorText}>{error}</span>}
+                    {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} />
@@ -882,12 +949,12 @@ const RemappingsPanel: FunctionComponent<{
                     <Button icon={AddRegular} label="Add" onClick={startAdd} disabled={!!editing || schemeNames.length < 2} />
                 </div>
             </div>
-            {allRemappings.length === 0 && <span className={classes.emptyMsg}>No remappings defined.</span>}
+            {allRemappings.length === 0 && <Caption1 className={classes.emptyMsg}>No remappings defined.</Caption1>}
             <DataGrid
                 items={allRemappings}
                 columns={remappingColumns}
                 getRowId={(item) => `${item.fromScheme}|${item.toScheme}`}
-                style={{ flex: editing ? undefined : 1, maxHeight: editing ? "140px" : undefined, overflowY: "auto" }}
+                className={mergeClasses(editing ? classes.dataGridCompact : classes.dataGridFlex)}
                 resizableColumns
                 columnSizingOptions={remappingColumnSizing}
             >
@@ -911,7 +978,7 @@ const RemappingsPanel: FunctionComponent<{
                             onChange={(v) => handleFromSchemeChange(v)}
                         />
                     </div>
-                    <div style={{ display: "flex", justifyContent: "center" }}>
+                    <div className={classes.swapRow}>
                         <Button appearance="transparent" icon={ArrowBidirectionalUpDownRegular} title="Swap From / To schemes" onClick={handleSwapSchemes} />
                     </div>
                     <div className={classes.formRow}>
@@ -924,14 +991,14 @@ const RemappingsPanel: FunctionComponent<{
                             onChange={(v) => handleToSchemeChange(v)}
                         />
                     </div>
-                    {conflictLabel && <span className={classes.errorText}>A remapping "{conflictLabel}" already exists. Edit that remapping instead.</span>}
-                    <Caption1 style={{ color: tokens.colorNeutralForeground3 }}>{fromSchemeEntries.length} bones — select the target bone for each, or leave blank.</Caption1>
+                    {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)}>
-                                <span className={classes.mappingBoneName} title={entry.name}>
+                                <Caption1 className={classes.mappingBoneName} title={entry.name}>
                                     {"\u00A0\u00A0".repeat(entry.depth) + entry.name}
-                                </span>
+                                </Caption1>
                                 <select
                                     className={classes.mappingSelect}
                                     value={editing.map.get(entry.name) ?? ""}
@@ -947,7 +1014,7 @@ const RemappingsPanel: FunctionComponent<{
                             </div>
                         ))}
                     </div>
-                    {error && <span className={classes.errorText}>{error}</span>}
+                    {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} />
@@ -1081,6 +1148,7 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                 }
             }}
         >
+            {/* Dynamic: depends on runtime resize value */}
             <DialogSurface
                 ref={surfaceRef as React.Ref<HTMLDivElement>}
                 className={classes.surface}
@@ -1098,7 +1166,7 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                                 title="Import configuration"
                                 disabled={isEditing}
                             />
-                            <input ref={importInputRef} type="file" accept=".json" style={{ display: "none" }} onChange={handleImportFile} />
+                            <input ref={importInputRef} type="file" accept=".json" className={classes.hiddenInput} onChange={handleImportFile} />
                             <Button appearance="subtle" icon={DismissRegular} onClick={handleClose} title="Close" />
                         </div>
                     </div>
@@ -1227,6 +1295,7 @@ export const RetargetingConfigDialog: FunctionComponent<RetargetingConfigDialogP
                                 manager={manager}
                                 avatarManager={avatarManager}
                                 animationManager={animationManager}
+                                getCurrentScene={getCurrentScene}
                                 onMutate={onMutate}
                                 onEditingChange={onEditingChange}
                             />
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
index cc861ca1d1a..dea48d9d407 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -21,7 +21,7 @@ import { HTMLConsole } from "./htmlConsole";
 import type { NamingSchemeManager } from "./namingSchemeManager";
 import type { AvatarManager, RestPoseDataUpdate } from "./avatarManager";
 import type { AnimationManager } from "./animationManager";
-import { SaveSnippet, TestPlaygroundCode } from "./helperFunctions";
+import { SaveSnippet, TestPlaygroundCode, ExportToSceneCode, ExportToSceneHeader, ExportToSceneHelpersCode } from "./helperFunctions";
 
 export type { GizmoType } from "./avatar";
 
@@ -87,6 +87,15 @@ export class RetargetingSceneManager {
 
         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);
@@ -217,17 +226,86 @@ export class RetargetingSceneManager {
         this.onRetargetDoneObservable.notifyObservers();
     }
 
-    public async exportToPlaygroundAsync(avatarManager: AvatarManager, animationManager: AnimationManager): Promise<boolean> {
+    /**
+     * 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 storedAnimation = animationManager.getByDisplayName(params.animationName)?.entry;
-        if (!storedAvatar || !storedAnimation) {
+        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 ?? "";
@@ -237,7 +315,6 @@ export class RetargetingSceneManager {
             avatarUrl = await this._fileToDataUrlAsync(avatarManager, storedAvatar.id, storedAvatar.fileNames);
         }
         if (storedAnimation.source === "file" && storedAnimation.fileNames?.length) {
-            avatarUrl.length; // ensure avatar is resolved first
             animationUrl = await this._fileToDataUrlAsync(animationManager, storedAnimation.id, storedAnimation.fileNames);
         }
 
@@ -257,22 +334,32 @@ export class RetargetingSceneManager {
             }
         }
 
-        const optionsCopy = { ...this._retargetOptions, mapNodeNames: undefined };
+        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));
 
-        SaveSnippet(code);
+        await SaveSnippet(code, onBeforeOpen);
         return true;
     }
 
-    /** Reads files from IndexedDB, finds the main scene file, and converts it to a base64 data URL. */
+    /**
+     * 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);
-        // Find the main scene file (the one with a registered loader plugin)
         let mainFile: File | undefined;
         for (const file of files) {
             const ext = file.name.toLowerCase().split(".").pop();
@@ -284,7 +371,21 @@ export class RetargetingSceneManager {
         if (!mainFile) {
             return "";
         }
-        const buffer = await mainFile.arrayBuffer();
+
+        // 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++) {
@@ -294,19 +395,33 @@ export class RetargetingSceneManager {
     }
 
     public dispose(): void {
-        this.avatar?.dispose();
-        this.animationSource?.dispose();
+        try {
+            this.avatar?.dispose();
+        } catch {
+            // Ignore — engine/scene may already be disposed
+        }
+        try {
+            this.animationSource?.dispose();
+        } catch {
+            // Ignore
+        }
         this.htmlConsole.dispose();
-        this._scene?.dispose();
+        try {
+            this._scene?.dispose();
+        } catch {
+            // Ignore
+        }
 
-        // Restore original render loops instead of disposing the engine — we don't own it
-        if (this._engine) {
+        // 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._savedRenderLoops = [];
 
         this.avatar = null;
         this.animationSource = 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..a6d7786b559
--- /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 = "";
+    }
+}

From ef7e7c37105f7581b07e03c3b2e91fbebe6149a8 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Tue, 24 Mar 2026 15:45:16 +0100
Subject: [PATCH 25/30] Add bridge between inspector and PG

---
 packages/dev/inspector-v2/src/index.ts        |  2 ++
 .../src/services/playgroundBridgeService.ts   | 32 +++++++++++++++++++
 .../src/components/editor/monacoComponent.tsx | 13 ++++++++
 .../src/components/rendererComponent.tsx      | 20 ++++++++++++
 packages/tools/playground/src/globalState.ts  |  6 ++++
 .../src/tools/monaco/monacoManager.ts         |  8 +++++
 6 files changed, 81 insertions(+)
 create mode 100644 packages/dev/inspector-v2/src/services/playgroundBridgeService.ts

diff --git a/packages/dev/inspector-v2/src/index.ts b/packages/dev/inspector-v2/src/index.ts
index 96fd3cc1d89..bf636802bf6 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..30043c8cfe3
--- /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/tools/playground/src/components/editor/monacoComponent.tsx b/packages/tools/playground/src/components/editor/monacoComponent.tsx
index 72b5aa7c052..e4ec0f324c5 100644
--- a/packages/tools/playground/src/components/editor/monacoComponent.tsx
+++ b/packages/tools/playground/src/components/editor/monacoComponent.tsx
@@ -84,6 +84,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 9c8c3cb0a8d..1a7867768de 100644
--- a/packages/tools/playground/src/components/rendererComponent.tsx
+++ b/packages/tools/playground/src/components/rendererComponent.tsx
@@ -129,12 +129,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: () => ({
+                        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 98eb69320aa..51e6ff46063 100644
--- a/packages/tools/playground/src/globalState.ts
+++ b/packages/tools/playground/src/globalState.ts
@@ -110,6 +110,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 42fbf19da53..c7efd7ac6ae 100644
--- a/packages/tools/playground/src/tools/monaco/monacoManager.ts
+++ b/packages/tools/playground/src/tools/monaco/monacoManager.ts
@@ -288,6 +288,14 @@ export class MonacoManager {
         this.globalState.onManifestChangedObservable.notifyObservers();
     }
 
+    /** Updates the content of an existing file in the Monaco 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];

From 2c2dfb611ca35506283225f178c62eb9c57315d9 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Tue, 24 Mar 2026 16:22:25 +0100
Subject: [PATCH 26/30] Scale the animation skeleton to fit the screen

---
 .../src/extensions/animationRetargeting/animation.ts  | 11 +++++++++++
 .../src/extensions/animationRetargeting/avatar.ts     |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
index bf2fd233b7a..304b088c0d7 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -398,6 +398,17 @@ export class AnimationSource {
         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);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
index e4dcb77c7c4..e8e829da469 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -309,7 +309,8 @@ export class Avatar {
         this._scaleRatio = 1;
         if (rescaleAvatar && (maxDim > 3 || maxDim < 0.1)) {
             this._scaleRatio = 2 / maxDim;
-            avatarRootNode.scaling.setAll(this._scaleRatio);
+            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

From fb875900d720692b947e58eb930b0d028b153eeb Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Tue, 24 Mar 2026 16:43:07 +0100
Subject: [PATCH 27/30] Fix ts

---
 packages/tools/playground/src/components/rendererComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tools/playground/src/components/rendererComponent.tsx b/packages/tools/playground/src/components/rendererComponent.tsx
index 1a7867768de..ec5d5b0ed41 100644
--- a/packages/tools/playground/src/components/rendererComponent.tsx
+++ b/packages/tools/playground/src/components/rendererComponent.tsx
@@ -133,7 +133,7 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
                 const playgroundBridgeServiceDefinition = {
                     friendlyName: "Playground Bridge",
                     produces: [inspectorV2Module.PlaygroundBridgeIdentity],
-                    factory: () => ({
+                    factory: (): any => ({
                         addFileTab: (path: string, content: string) => {
                             if (gs.addOrUpdateFile) {
                                 gs.addOrUpdateFile(path, content);

From 69ee4580e10348a83cf20abc05a751db0c148e19 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Tue, 31 Mar 2026 20:43:19 +0200
Subject: [PATCH 28/30] Update code doc

---
 .../tools/playground/src/tools/monaco/monacoManager.ts     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/tools/playground/src/tools/monaco/monacoManager.ts b/packages/tools/playground/src/tools/monaco/monacoManager.ts
index 0ce2039dc0a..00ed0f261f9 100644
--- a/packages/tools/playground/src/tools/monaco/monacoManager.ts
+++ b/packages/tools/playground/src/tools/monaco/monacoManager.ts
@@ -286,7 +286,12 @@ export class MonacoManager {
         this.globalState.onManifestChangedObservable.notifyObservers();
     }
 
-    /** Updates the content of an existing file in the Monaco model. */
+    /**
+     * 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) {

From ef252764df2840fa595852c200a994434e00e9f8 Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Tue, 31 Mar 2026 21:18:09 +0200
Subject: [PATCH 29/30] Animation retargeting: scene import, export to scene,
 lint fixes, auto-scaling

- Shared engine: use PG engine, save/restore render loops, scene dispose observer
- Scene import: SceneTransfer class for cross-scene node transfer with _scene patching
- Export to Scene: PlaygroundBridge service, retargeting.ts with incremental functions
- Export to Playground: loading state, onBeforeOpen callback, animation group index
- Multi-file support: base64 encoding with files: protocol for gltf+bin+textures
- Auto-scaling: preserve sign of scaling components for avatar and animation
- Node selection: index-based (no duplicate name issues), naming scheme re-detection
- PG Play button: auto-disable extension, try-catch guards in dispose
- Lint: inline type imports, merged duplicates, JSDoc completeness, naming conventions
- UI: Fluent tokens for fontSize, Caption1/Body1 for text, shared-ui Textarea

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../animationRetargeting/animation.ts         |  32 ++--
 .../animationRetargeting/animationManager.ts  | 130 ++++++++++---
 .../animationRetargetingExtension.tsx         |  30 ++-
 .../animationRetargetingPanel.tsx             | 175 ++++++++++++++++--
 .../animationRetargetingViewport.tsx          |   9 +-
 .../animationRetargeting/animationsPanel.tsx  |  28 ++-
 .../extensions/animationRetargeting/avatar.ts |  55 ++++--
 .../animationRetargeting/avatarManager.ts     |  96 +++++++++-
 .../animationRetargeting/avatarsPanel.tsx     |  28 ++-
 .../animationRetargeting/boneDropdown.tsx     |  29 ++-
 .../animationRetargeting/helperFunctions.ts   |  13 ++
 .../animationRetargeting/htmlConsole.ts       |   2 +-
 .../namingSchemeManager.ts                    |  15 +-
 .../retargetingConfigDialog.tsx               |  28 +--
 .../retargetingSceneManager.ts                |  88 ++++++++-
 .../animationRetargeting/sceneTransfer.ts     |  10 +-
 16 files changed, 628 insertions(+), 140 deletions(-)

diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
index 304b088c0d7..a9b9fefda21 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animation.ts
@@ -1,16 +1,15 @@
-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, Quaternion } from "core/Maths/math.vector";
-import type { Skeleton } from "core/Bones/skeleton";
-import type { RestPoseDataUpdate } from "./avatarManager";
+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 { Matrix } from "core/Maths/math.vector";
 import { StandardMaterial } from "core/Materials/standardMaterial";
 import { MeshBuilder } from "core/Meshes/meshBuilder";
 import { Mesh } from "core/Meshes/mesh";
@@ -26,7 +25,7 @@ import { CreateSkeletonFromTransformNodeHierarchy } from "core/Bones/skeleton.fu
 import "core/Culling/ray";
 
 import { DistancePointToLine } from "./helperFunctions";
-import type { GizmoType } from "./avatar";
+import { type GizmoType } from "./avatar";
 
 const ShadowLayerMask = 0x20000000;
 
@@ -49,8 +48,17 @@ export class AnimationSource {
     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> {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
index e998e94d7a6..f3f76bfa8c3 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationManager.ts
@@ -1,5 +1,5 @@
-import type { ISettingsStore, SettingDescriptor } from "../../services/settingsStore";
-import type { RestPoseDataUpdate } from "./avatarManager";
+import { type ISettingsStore, type SettingDescriptor } from "../../services/settingsStore";
+import { type RestPoseDataUpdate } from "./avatarManager";
 
 const IDBName = "BabylonInspector_AnimRetargeting";
 const IDBStore = "animationFiles";
@@ -21,14 +21,29 @@ export type StoredAnimation = {
     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;
@@ -149,6 +164,9 @@ async function IdbDeletePrefix(prefix: string): Promise<void> {
 
 // ─── AnimationManager ─────────────────────────────────────────────────────────
 
+/**
+ *
+ */
 export class AnimationManager {
     private _animations: StoredAnimation[] = [];
 
@@ -181,7 +199,17 @@ export class AnimationManager {
      * @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 {
+    public getByDisplayName(displayName: string):
+        | {
+              /**
+               *
+               */
+              entry: StoredAnimation /**
+               *
+               */;
+              mapping: AnimationGroupMapping;
+          }
+        | undefined {
         if (!displayName) {
             return undefined;
         }
@@ -296,12 +324,26 @@ export class AnimationManager {
      * 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> }>> {
+    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 };
+                    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));
@@ -322,7 +364,17 @@ export class AnimationManager {
      * @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[]> {
+    public async importDataAsync(
+        animations: Array<
+            StoredAnimation & {
+                /**
+                 *
+                 */
+                fileData?: Record<string, string>;
+            }
+        >,
+        mode: "replace" | "append"
+    ): Promise<string[]> {
         const skipped: string[] = [];
 
         if (mode === "replace") {
@@ -364,7 +416,24 @@ export class AnimationManager {
             return;
         }
         const baseUrl = "https://assets.babylonjs.com/mixamo/Animations/";
-        const defaults: { name: string; file: string; scheme: string; displayName: string; rootNode: string }[] = [
+        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" },
@@ -403,29 +472,38 @@ export class AnimationManager {
         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,
-                        });
+            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 = entry.animationGroupName ?? "Unnamed";
+                        entry.name = "Unnamed";
                     }
-                    delete entry.animationGroupName;
-                }
-                if (!entry.name) {
-                    entry.name = "Unnamed";
-                }
-                if (!entry.rootNodeName) {
-                    entry.rootNodeName = "";
+                    if (!entry.rootNodeName) {
+                        entry.rootNodeName = "";
+                    }
+                    return entry as StoredAnimation;
                 }
-                return entry as StoredAnimation;
-            });
+            );
         } catch {
             this._animations = [];
         }
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
index 27d717990cc..0efc2dccd30 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingExtension.tsx
@@ -1,23 +1,19 @@
-import type { IDisposable } from "core/index";
-import type { Engine } from "core/Engines/engine";
-import type { ServiceDefinition } from "../../modularity/serviceDefinition";
-import type { IShellService } from "../../services/shellService";
-import type { ISettingsStore } from "../../services/settingsStore";
-import type { ISceneContext } from "../../services/sceneContext";
-import type { IPlaygroundBridge } from "../../services/playgroundBridgeService";
-import { ShellServiceIdentity } from "../../services/shellService";
-import { SettingsStoreIdentity } from "../../services/settingsStore";
-import { SceneContextIdentity } from "../../services/sceneContext";
-import { PlaygroundBridgeIdentity } from "../../services/playgroundBridgeService";
-
-import type { IObserver } from "core/Misc/observable";
-import { Observable } from "core/Misc/observable";
+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 } from "./animationRetargetingPanel";
-import type { PanelStateStore } from "./animationRetargetingPanel";
-import type { RetargetingSceneManager } from "./retargetingSceneManager";
+import { AnimationRetargetingPanel, DefaultPanelState, type PanelStateStore } from "./animationRetargetingPanel";
+
+import { type RetargetingSceneManager } from "./retargetingSceneManager";
 import { NamingSchemeManager } from "./namingSchemeManager";
 import { AvatarManager } from "./avatarManager";
 import { AnimationManager } from "./animationManager";
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
index f1e4f668635..d03924bf365 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingPanel.tsx
@@ -1,28 +1,28 @@
-import type { FunctionComponent } 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 { 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 } from "../../components/properties/transformProperties";
+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 { useCallback, useEffect, useRef, useState } from "react";
+
 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 { TransformProperties } from "../../components/properties/transformProperties";
-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 { 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";
 
@@ -159,28 +159,97 @@ const VerticalAxisOptions: { label: string; value: string }[] = [
 ];
 
 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;
 };
 
@@ -211,22 +280,62 @@ export const DefaultPanelState: PanelStateStore = {
 };
 
 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,
@@ -281,9 +390,29 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
     const [groundReferenceVerticalAxis, setGroundReferenceVerticalAxis] = useState(() => stateStore.groundReferenceVerticalAxis);
 
     // Dynamic bone lists
-    const [avatarBoneOptions, setAvatarBoneOptions] = useState<{ label: string; value: string }[]>([]);
+    const [avatarBoneOptions, setAvatarBoneOptions] = useState<
+        {
+            /**
+             *
+             */
+            label: string /**
+             *
+             */;
+            value: string;
+        }[]
+    >([]);
     const [rootNodeOptions, setRootNodeOptions] = useState([{ label: "Auto", value: "Auto" }]);
-    const [groundRefNodeOptions, setGroundRefNodeOptions] = useState<{ label: string; value: string }[]>([]);
+    const [groundRefNodeOptions, setGroundRefNodeOptions] = useState<
+        {
+            /**
+             *
+             */
+            label: string /**
+             *
+             */;
+            value: string;
+        }[]
+    >([]);
 
     // Dropdown options derived from managers — refreshed when config dialog closes
     const [avatarOptions, setAvatarOptions] = useState(() =>
@@ -457,7 +586,21 @@ export const AnimationRetargetingPanel: FunctionComponent<AnimationRetargetingPa
 
             // 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 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));
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
index 47c502159b7..7e961582105 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationRetargetingViewport.tsx
@@ -1,8 +1,7 @@
-import type { FunctionComponent } from "react";
+import { type FunctionComponent, useEffect, useRef } from "react";
 
-import type { Engine } from "core/Engines/engine";
+import { type Engine } from "core/Engines/engine";
 import { makeStyles, tokens, Body1 } from "@fluentui/react-components";
-import { useEffect, useRef } from "react";
 
 import { RetargetingSceneManager } from "./retargetingSceneManager";
 
@@ -35,6 +34,10 @@ type AnimationRetargetingViewportProps = {
     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);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
index 1752db64276..50d9124988e 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/animationsPanel.tsx
@@ -1,10 +1,9 @@
-import type { FunctionComponent } from "react";
-import type { AnimationManager, StoredAnimation, AnimationGroupMapping } from "./animationManager";
-import type { NamingSchemeManager } from "./namingSchemeManager";
-import type { RestPoseDataUpdate } from "./avatarManager";
-import type { Nullable } from "core/types";
+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 { useState, useCallback, useRef, useEffect } from "react";
 import {
     Input,
     Label,
@@ -27,8 +26,10 @@ import {
     DataGridHeaderCell,
     DataGridCell,
     createTableColumn,
+    type TableColumnDefinition,
+    type TableColumnSizingOptions,
 } from "@fluentui/react-components";
-import type { TableColumnDefinition, 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";
@@ -38,7 +39,7 @@ 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";
+import { type Node } from "core/node";
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 
@@ -295,6 +296,10 @@ function DetectNamingScheme(targetNames: Set<string>, namingSchemeManager: Namin
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
+/**
+ * Animations tab panel for the retargeting config dialog.
+ * @returns The React element.
+ */
 export const AnimationsPanel: FunctionComponent<{
     animationManager: AnimationManager;
     namingSchemeManager: NamingSchemeManager;
@@ -306,7 +311,12 @@ export const AnimationsPanel: FunctionComponent<{
     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 [confirmDelete, setConfirmDelete] = useState<{
+        id: string /**
+         *
+         */;
+        label: string;
+    } | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const [isDragOver, setIsDragOver] = useState(false);
     const [nodeList, setNodeList] = useState<NodeInfo[]>([]);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
index e8e829da469..9bda39e7f90 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatar.ts
@@ -1,11 +1,11 @@
-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 { 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";
@@ -20,12 +20,12 @@ 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";
+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 { type RestPoseDataUpdate } from "./avatarManager";
 import { DistancePointToLine } from "./helperFunctions";
 
 export type GizmoType = "Position" | "Rotation" | "Scale";
@@ -34,6 +34,9 @@ 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;
@@ -49,8 +52,17 @@ export class Avatar {
     // 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> {
@@ -120,7 +132,15 @@ export class Avatar {
     /** Returns bone options in hierarchy order, with indented labels for parenting.
      * @returns Array of label/value pairs.
      */
-    public getBoneOptions(): { label: string; value: string }[] {
+    public getBoneOptions(): {
+        /**
+         *
+         */
+        label: string /**
+         *
+         */;
+        value: string;
+    }[] {
         if (!this._animatorAvatar) {
             return [];
         }
@@ -188,7 +208,18 @@ export class Avatar {
         }
         const [skeleton] = this._animatorAvatar.skeletons;
         for (const bone of skeleton.bones) {
-            const data: { position?: number[]; scaling?: number[]; quaternion?: number[] } = {};
+            const data: {
+                /**
+                 *
+                 */
+                position?: number[] /**
+                 *
+                 */;
+                scaling?: number[] /**
+                 *
+                 */;
+                quaternion?: number[];
+            } = {};
             data.position = bone.position.asArray();
             data.scaling = bone.scaling.asArray();
             if (bone.rotationQuaternion) {
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
index fdfe66bf129..53b60c49bf9 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarManager.ts
@@ -1,6 +1,34 @@
-import type { ISettingsStore, SettingDescriptor } from "../../services/settingsStore";
+import { type ISettingsStore, type SettingDescriptor } from "../../services/settingsStore";
 
-export type RestPoseDataUpdate = Array<{ name: string; data: { position?: number[]; scaling?: number[]; quaternion?: number[] } }>;
+export type RestPoseDataUpdate = Array<{
+    /**
+     *
+     */
+    name: string /**
+     *
+     */;
+    /**
+     *
+     */
+    data: {
+        /**
+         *
+         */
+        position?: number[] /**
+         *
+         */;
+        /**
+         *
+         */
+        scaling?: number[] /**
+         *
+         */;
+        /**
+         *
+         */
+        quaternion?: number[];
+    };
+}>;
 
 const IDBName = "BabylonInspector_AnimRetargeting";
 const IDBStore = "avatarFiles";
@@ -10,15 +38,33 @@ const IDBStore = "avatarFiles";
 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;
@@ -139,6 +185,9 @@ async function IdbDeletePrefix(prefix: string): Promise<void> {
 
 // ─── AvatarManager ────────────────────────────────────────────────────────────
 
+/**
+ *
+ */
 export class AvatarManager {
     private _avatars: StoredAvatar[] = [];
 
@@ -238,12 +287,26 @@ export class AvatarManager {
      * 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> }>> {
+    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 };
+                    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));
@@ -264,7 +327,17 @@ export class AvatarManager {
      * @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[]> {
+    public async importDataAsync(
+        avatars: Array<
+            StoredAvatar & {
+                /**
+                 *
+                 */
+                fileData?: Record<string, string>;
+            }
+        >,
+        mode: "replace" | "append"
+    ): Promise<string[]> {
         const skipped: string[] = [];
 
         if (mode === "replace") {
@@ -306,7 +379,18 @@ export class AvatarManager {
             return;
         }
         const baseUrl = "https://assets.babylonjs.com/mixamo/Characters/";
-        const defaults: { name: string; file: string; scheme: string }[] = [
+        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" },
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
index 06dfa29e28f..fe718dc218b 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/avatarsPanel.tsx
@@ -1,9 +1,8 @@
-import type { FunctionComponent } from "react";
-import type { AvatarManager, StoredAvatar, RestPoseDataUpdate } from "./avatarManager";
-import type { NamingSchemeManager } from "./namingSchemeManager";
-import type { Nullable } from "core/types";
+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 { useState, useCallback, useRef, useEffect } from "react";
 import {
     Input,
     Label,
@@ -26,8 +25,10 @@ import {
     DataGridHeaderCell,
     DataGridCell,
     createTableColumn,
+    type TableColumnDefinition,
+    type TableColumnSizingOptions,
 } from "@fluentui/react-components";
-import type { TableColumnDefinition, 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";
@@ -36,8 +37,8 @@ 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 { type Node } from "core/node";
+import { type AbstractMesh } from "core/Meshes/abstractMesh";
 import { FilesInputStore } from "core/Misc/filesInputStore";
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
@@ -274,6 +275,10 @@ function DetectNamingScheme(nodeNames: Set<string>, namingSchemeManager: NamingS
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
+/**
+ * Avatars tab panel for the retargeting config dialog.
+ * @returns The React element.
+ */
 export const AvatarsPanel: FunctionComponent<{
     avatarManager: AvatarManager;
     namingSchemeManager: NamingSchemeManager;
@@ -284,7 +289,12 @@ export const AvatarsPanel: FunctionComponent<{
     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 [confirmDelete, setConfirmDelete] = useState<{
+        id: string /**
+         *
+         */;
+        name: string;
+    } | null>(null);
     const [nodeList, setNodeList] = useState<NodeInfo[]>([]);
     const [isLoading, setIsLoading] = useState(false);
     const [isDragOver, setIsDragOver] = useState(false);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
index b7be9767e30..e4ad38a6801 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/boneDropdown.tsx
@@ -1,14 +1,37 @@
 import { Dropdown, makeStyles, Option, useId, Body1 } from "@fluentui/react-components";
-import type { FunctionComponent } from "react";
-import { useContext, useEffect, useState } from "react";
+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 BoneOption = {
+    /**
+     *
+     */
+    label: string /**
+     *
+     */;
+    /**
+     *
+     */
+    value: string;
+};
 
 export type BoneDropdownProps = {
+    /**
+     *
+     */
     value: string;
+    /**
+     *
+     */
     options: readonly BoneOption[];
+    /**
+     *
+     */
     onChange: (value: string) => void;
+    /**
+     *
+     */
     disabled?: boolean;
 };
 
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
index d1a786e5947..f6077771988 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/helperFunctions.ts
@@ -2,6 +2,13 @@ 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 },
@@ -56,6 +63,12 @@ function PackSnippetData(code: string) {
     });
 }
 
+/**
+ * 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();
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
index ae4767363cf..dbc489d0438 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/htmlConsole.ts
@@ -1,4 +1,4 @@
-import type { Nullable } from "core/types";
+import { type Nullable } from "core/types";
 
 import { Observable } from "core/Misc/observable";
 import { Logger } from "core/Misc/logger";
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
index 034c580a6ac..18d7e37b771 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/namingSchemeManager.ts
@@ -1,4 +1,4 @@
-import type { ISettingsStore, SettingDescriptor } from "../../services/settingsStore";
+import { type ISettingsStore, type SettingDescriptor } from "../../services/settingsStore";
 
 const NamingSchemeSettingDescriptor: SettingDescriptor<StoredData> = {
     key: "AnimRetargeting/NamingSchemes",
@@ -9,7 +9,18 @@ const NamingSchemeSettingDescriptor: SettingDescriptor<StoredData> = {
  * 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 };
+export type BoneEntry = {
+    /**
+     *
+     */
+    name: string /**
+     *
+     */;
+    /**
+     *
+     */
+    depth: number;
+};
 
 // prettier-ignore
 const MixamoBones: BoneEntry[] = [
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
index ca3226199c2..71f919b688f 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingConfigDialog.tsx
@@ -1,13 +1,12 @@
-import type { FunctionComponent } from "react";
-import type { NamingSchemeManager, BoneEntry } from "./namingSchemeManager";
-import type { AvatarManager, StoredAvatar } from "./avatarManager";
-import type { AnimationManager, 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 { useState, useMemo, useCallback, useEffect, useRef } from "react";
+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,
@@ -32,8 +31,9 @@ import {
     DataGridHeaderCell,
     DataGridCell,
     createTableColumn,
+    type TableColumnDefinition,
+    type TableColumnSizingOptions,
 } from "@fluentui/react-components";
-import type { TableColumnDefinition, 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";
@@ -1036,13 +1036,17 @@ export type RetargetingConfigDialogProps = {
     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);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
     const [pendingImport, setPendingImport] = useState<any>(null);
     const [importResult, setImportResult] = useState<string | null>(null);
     const surfaceRef = useRef<HTMLElement>(null);
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
index dea48d9d407..0709b995695 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/retargetingSceneManager.ts
@@ -1,6 +1,6 @@
-import type { Nullable } from "core/types";
-import type { IRetargetOptions } from "core/Animations/animatorAvatar";
-import type { Engine } from "core/Engines/engine";
+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";
@@ -18,30 +18,75 @@ 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, RestPoseDataUpdate } from "./avatarManager";
-import type { AnimationManager } from "./animationManager";
+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";
 }
 
@@ -51,13 +96,25 @@ 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;
@@ -66,6 +123,9 @@ export class RetargetingSceneManager {
     private _lastAnimationRestPose: RestPoseDataUpdate | undefined;
     private _isRetargeted = false;
 
+    /**
+     *
+     */
     public readonly onRetargetDoneObservable = new Observable<void>();
 
     public get isRetargeted(): boolean {
@@ -239,7 +299,21 @@ export class RetargetingSceneManager {
         avatarManager: AvatarManager,
         animationManager: AnimationManager,
         functionName: string
-    ): Promise<{ helpersCode: string; headerCode: string; functionCode: string; functionName: string } | null> {
+    ): Promise<{
+        /**
+         *
+         */
+        helpersCode: string /**
+         *
+         */;
+        headerCode: string /**
+         *
+         */;
+        functionCode: string /**
+         *
+         */;
+        functionName: string;
+    } | null> {
         if (!this._isRetargeted || !this._retargetOptions || !this._lastRetargetParams || !this.avatar || !this.animationSource) {
             return null;
         }
diff --git a/packages/dev/inspector-v2/src/extensions/animationRetargeting/sceneTransfer.ts b/packages/dev/inspector-v2/src/extensions/animationRetargeting/sceneTransfer.ts
index a6d7786b559..e01b5e44066 100644
--- a/packages/dev/inspector-v2/src/extensions/animationRetargeting/sceneTransfer.ts
+++ b/packages/dev/inspector-v2/src/extensions/animationRetargeting/sceneTransfer.ts
@@ -1,8 +1,8 @@
-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 { 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";
 

From 958564641ed2f92966c9e1a27501a773ed1f798a Mon Sep 17 00:00:00 2001
From: Popov72 <github@evpopov.com>
Date: Tue, 31 Mar 2026 21:54:15 +0200
Subject: [PATCH 30/30] Fix import

---
 .../dev/inspector-v2/src/services/playgroundBridgeService.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/inspector-v2/src/services/playgroundBridgeService.ts b/packages/dev/inspector-v2/src/services/playgroundBridgeService.ts
index 30043c8cfe3..363da56f3a9 100644
--- a/packages/dev/inspector-v2/src/services/playgroundBridgeService.ts
+++ b/packages/dev/inspector-v2/src/services/playgroundBridgeService.ts
@@ -1,4 +1,4 @@
-import type { IService } from "../modularity/serviceDefinition";
+import { type IService } from "../modularity/serviceDefinition";
 
 /**
  * The unique identity symbol for the playground bridge service.