distark-render 1.1.5 → 1.1.9

package/dist/modules/renderRig.js

@@ -58,13 +58,12 @@ export class CharacterRigRenderer {
         const jointOffset = rigData.jointOffset || {};
         const zIndexValues = rigData.zIndexValues || {};
         const eyes = rigData.eyes || {};
-        const hiddenValues = rigData.hiddenValues || {}; // true = hidden
+        const visibility = rigData.visibility || {}; // Default: all visible if not specified
         const flipX = rigData.flipX || false; // No flip by default
         const flipHead = rigData.flipHead || false; // No head flip by default
         const imageScale = rigData.imageScale ?? 1.0; // Use imageScale from rigData, default to 1.0
         // Create array of all limbs/components with their computed transforms
         const allObjects = [];
-        const isVisible = (partName) => hiddenValues[partName] !== true;
         // Root transform (character position in world space)
         const rootTransform = {
             x: centerX,
@@ -73,35 +72,58 @@ export class CharacterRigRenderer {
             scaleX: flipX ? -1 : 1,
             scaleY: 1
         };
+        // Torso pivot transform: allows the torso (and all children) to rotate/offset
+        // around a configurable pivot point (e.g. hip/waist area).
+        // root_torso defines where in root-local space the pivot lives.
+        // rotationValues["torso"] is the rotation angle applied around that pivot.
+        const root_torso = pivotPoints['root_torso'] || { x: 0, y: 0 };
+        const torsoPivotRot = rotations["torso"] || 0;
+        const torsoTransform = this.applyTransform(rootTransform, {
+            x: root_torso.x || 0,
+            y: root_torso.y || 0,
+            rotation: torsoPivotRot,
+            scaleX: 1,
+            scaleY: 1
+        });
         // Torso
-        if (isVisible('torso')) {
+        if (visibility.torso !== false) {
             const torsoWidth = dimensions.torso?.width || 60;
             const torsoHeight = dimensions.torso?.height || 120;
             const selfRot = selfRotations["torso"] || 0;
             // CRITICAL FIX: Look up image by ACTUAL PATH from rigData, not semantic key!
             const torsoImagePath = rigData.imagePaths?.torso;
             const torsoImage = torsoImagePath ? loadedImages[torsoImagePath] : undefined;
+            // The torso image bottom-center is anchored at torsoTransform (= root_torso
+            // world position).  Moving root_torso moves the torso image; rotating
+            // rotationValues["torso"] rotates the torso around that anchor point.
+            const torsoJointOffset = jointOffset['root_torso'] || { x: 0, y: 0 };
+            const torsoImageTransform = this.applyTransform(torsoTransform, {
+                x: torsoJointOffset.x || 0,
+                y: torsoJointOffset.y || 0,
+                rotation: selfRot,
+                scaleX: 1,
+                scaleY: 1
+            });
             allObjects.push({
                 name: 'torso',
                 type: 'limb',
                 zIndex: zIndexValues['torso'] || 1,
                 width: torsoWidth * imageScale,
                 height: torsoHeight * imageScale,
-                x: rootTransform.x,
-                y: rootTransform.y,
-                rotation: rootTransform.rotation + selfRot,
-                scaleX: rootTransform.scaleX,
-                scaleY: rootTransform.scaleY,
-                // Anchor point (where the image is drawn from - top center for torso)
+                x: torsoImageTransform.x,
+                y: torsoImageTransform.y,
+                rotation: torsoImageTransform.rotation,
+                scaleX: torsoImageTransform.scaleX,
+                scaleY: torsoImageTransform.scaleY,
                 anchorX: 0.5,
-                anchorY: 1,
+                anchorY: 1, // bottom-center sits at root_torso world position
                 imageKey: 'imagePaths.torso',
                 imageData: torsoImage,
                 selfRotation: selfRot
             });
         }
         // Head
-        if (isVisible('head')) {
+        if (visibility.head !== false) {
             const connectionKey = `torso_head`;
             const pivotPoint = pivotPoints[connectionKey] || { x: 0, y: 0 };
             const headJointOffset = jointOffset[connectionKey] || { x: 0, y: 0 };
@@ -109,10 +131,10 @@ export class CharacterRigRenderer {
             const headHeight = dimensions.head?.height || 80;
             const headRot = rotations["head"] || 0;
             const selfRot = selfRotations["head"] || 0;
-            // Calculate head transform
-            const headParentTransform = this.applyTransform(rootTransform, {
-                x: pivotPoint.x || 0,
-                y: pivotPoint.y || 0,
+            // Calculate head transform — pivot is expressed in root space; convert to torso-local.
+            const headParentTransform = this.applyTransform(torsoTransform, {
+                x: (pivotPoint.x || 0) - (root_torso.x || 0),
+                y: (pivotPoint.y || 0) - (root_torso.y || 0),
                 rotation: headRot,
                 scaleX: flipHead ? -1 : 1,
                 scaleY: 1
@@ -147,7 +169,7 @@ export class CharacterRigRenderer {
             });
         }
         // Mouth (child of head)
-        if (isVisible('mouth')) {
+        if (visibility.mouth !== false) {
             const headPivot = pivotPoints['torso_head'] || { x: 0, y: 0 };
             const selfRot = selfRotations["mouth"] || 0;
             const headRot = rotations["head"] || 0;
@@ -183,9 +205,9 @@ export class CharacterRigRenderer {
             // Calculate final dimensions with size scaling
             const finalMouthWidth = baseMouthWidth * mouthSizeScale;
             const finalMouthHeight = baseMouthHeight * mouthSizeScale;
-            const headBaseTransform = this.applyTransform(rootTransform, {
-                x: headPivot.x || 0,
-                y: headPivot.y || 0,
+            const headBaseTransform = this.applyTransform(torsoTransform, {
+                x: (headPivot.x || 0) - (root_torso.x || 0),
+                y: (headPivot.y || 0) - (root_torso.y || 0),
                 rotation: headRot,
                 scaleX: flipHead ? -1 : 1,
                 scaleY: 1
@@ -237,12 +259,12 @@ export class CharacterRigRenderer {
         // CRITICAL FIX: Look up image by ACTUAL PATH from rigData.eyes
         const leftEyeImagePath = eyes?.leftEyeImage;
         const leftEyeImage = leftEyeImagePath ? loadedImages[leftEyeImagePath] : undefined;
-        if (isVisible('leftEye') && leftEyeImage && eyes) {
+        if (visibility.leftEye !== false && leftEyeImage && eyes) {
             const headPivot = pivotPoints['torso_head'] || { x: 0, y: 0 };
             const headRot = rotations["head"] || 0;
-            const headBaseTransform = this.applyTransform(rootTransform, {
-                x: headPivot.x || 0,
-                y: headPivot.y || 0,
+            const headBaseTransform = this.applyTransform(torsoTransform, {
+                x: (headPivot.x || 0) - (root_torso.x || 0),
+                y: (headPivot.y || 0) - (root_torso.y || 0),
                 rotation: headRot,
                 scaleX: flipHead ? -1 : 1,
                 scaleY: 1
@@ -280,12 +302,12 @@ export class CharacterRigRenderer {
         // Right Eye  
         const rightEyeImagePath = eyes?.rightEyeImage;
         const rightEyeImage = getImage(rightEyeImagePath);
-        if (isVisible('rightEye') && rightEyeImage && eyes) {
+        if (visibility.rightEye !== false && rightEyeImage && eyes) {
             const headPivot = pivotPoints['torso_head'] || { x: 0, y: 0 };
             const headRot = rotations["head"] || 0;
-            const headBaseTransform = this.applyTransform(rootTransform, {
-                x: headPivot.x || 0,
-                y: headPivot.y || 0,
+            const headBaseTransform = this.applyTransform(torsoTransform, {
+                x: (headPivot.x || 0) - (root_torso.x || 0),
+                y: (headPivot.y || 0) - (root_torso.y || 0),
                 rotation: headRot,
                 scaleX: flipHead ? -1 : 1,
                 scaleY: 1
@@ -323,12 +345,12 @@ export class CharacterRigRenderer {
         // Left Iris
         const leftIrisImagePath = eyes?.leftIris;
         const leftIrisImage = getImage(leftIrisImagePath);
-        if (isVisible('leftIris') && leftIrisImage && eyes) {
+        if (visibility.leftIris !== false && leftIrisImage && eyes) {
             const headPivot = pivotPoints['torso_head'] || { x: 0, y: 0 };
             const headRot = rotations["head"] || 0;
-            const headBaseTransform = this.applyTransform(rootTransform, {
-                x: headPivot.x || 0,
-                y: headPivot.y || 0,
+            const headBaseTransform = this.applyTransform(torsoTransform, {
+                x: (headPivot.x || 0) - (root_torso.x || 0),
+                y: (headPivot.y || 0) - (root_torso.y || 0),
                 rotation: headRot,
                 scaleX: flipHead ? -1 : 1,
                 scaleY: 1
@@ -368,12 +390,12 @@ export class CharacterRigRenderer {
         // Right Iris
         const rightIrisImagePath = eyes?.rightIris;
         const rightIrisImage = getImage(rightIrisImagePath);
-        if (isVisible('rightIris') && rightIrisImage && eyes) {
+        if (visibility.rightIris !== false && rightIrisImage && eyes) {
             const headPivot = pivotPoints['torso_head'] || { x: 0, y: 0 };
             const headRot = rotations["head"] || 0;
-            const headBaseTransform = this.applyTransform(rootTransform, {
-                x: headPivot.x || 0,
-                y: headPivot.y || 0,
+            const headBaseTransform = this.applyTransform(torsoTransform, {
+                x: (headPivot.x || 0) - (root_torso.x || 0),
+                y: (headPivot.y || 0) - (root_torso.y || 0),
                 rotation: headRot,
                 scaleX: flipHead ? -1 : 1,
                 scaleY: 1
@@ -429,12 +451,12 @@ export class CharacterRigRenderer {
                 getImage(eyes?.leftEyeLidHalfClosed) ||
                 getImage(eyes?.leftEyeLidClosed);
         }
-        if (isVisible('leftEyeLid') && leftEyeLidImage && eyes) {
+        if (visibility.leftEyeLid !== false && leftEyeLidImage && eyes) {
             const headPivot = pivotPoints['torso_head'] || { x: 0, y: 0 };
             const headRot = rotations["head"] || 0;
-            const headBaseTransform = this.applyTransform(rootTransform, {
-                x: headPivot.x || 0,
-                y: headPivot.y || 0,
+            const headBaseTransform = this.applyTransform(torsoTransform, {
+                x: (headPivot.x || 0) - (root_torso.x || 0),
+                y: (headPivot.y || 0) - (root_torso.y || 0),
                 rotation: headRot,
                 scaleX: flipHead ? -1 : 1,
                 scaleY: 1
@@ -487,12 +509,12 @@ export class CharacterRigRenderer {
                 getImage(eyes?.rightEyeLidHalfClosed) ||
                 getImage(eyes?.rightEyeLidClosed);
         }
-        if (isVisible('rightEyeLid') && rightEyeLidImage && eyes) {
+        if (visibility.rightEyeLid !== false && rightEyeLidImage && eyes) {
             const headPivot = pivotPoints['torso_head'] || { x: 0, y: 0 };
             const headRot = rotations["head"] || 0;
-            const headBaseTransform = this.applyTransform(rootTransform, {
-                x: headPivot.x || 0,
-                y: headPivot.y || 0,
+            const headBaseTransform = this.applyTransform(torsoTransform, {
+                x: (headPivot.x || 0) - (root_torso.x || 0),
+                y: (headPivot.y || 0) - (root_torso.y || 0),
                 rotation: headRot,
                 scaleX: flipHead ? -1 : 1,
                 scaleY: 1
@@ -529,7 +551,7 @@ export class CharacterRigRenderer {
         }
         // Left Arm chain (leftUpperArm, leftForearm, leftHand)
         // Left Upper Arm
-        if (isVisible('leftUpperArm')) {
+        if (visibility.leftUpperArm !== false) {
             const connectionKey = `torso_leftUpperArm`;
             const pivotPoint = pivotPoints[connectionKey] || { x: 0, y: 0 };
             const jointOff = jointOffset[connectionKey] || { x: 0, y: 0 };
@@ -537,9 +559,9 @@ export class CharacterRigRenderer {
             const height = dimensions.leftUpperArm?.height || 50;
             const limbRot = rotations['leftUpperArm'] || 0;
             const selfRot = selfRotations['leftUpperArm'] || 0;
-            const upperArmParentTransform = this.applyTransform(rootTransform, {
-                x: pivotPoint.x || 0,
-                y: pivotPoint.y || 0,
+            const upperArmParentTransform = this.applyTransform(torsoTransform, {
+                x: (pivotPoint.x || 0) - (root_torso.x || 0),
+                y: (pivotPoint.y || 0) - (root_torso.y || 0),
                 rotation: limbRot,
                 scaleX: 1,
                 scaleY: 1
@@ -571,7 +593,7 @@ export class CharacterRigRenderer {
             });
         }
         // Left Forearm
-        if (isVisible('leftForearm')) {
+        if (visibility.leftForearm !== false) {
             const upperConnectionKey = `torso_leftUpperArm`;
             const upperPivot = pivotPoints[upperConnectionKey] || { x: 0, y: 0 };
             const upperHeight = dimensions.leftUpperArm?.height || 50;
@@ -583,9 +605,9 @@ export class CharacterRigRenderer {
             const height = dimensions.leftForearm?.height || 45;
             const limbRot = rotations["leftForearm"] || 0;
             const selfRot = selfRotations["leftForearm"] || 0;
-            const upperArmBase = this.applyTransform(rootTransform, {
-                x: upperPivot.x || 0,
-                y: upperPivot.y || 0,
+            const upperArmBase = this.applyTransform(torsoTransform, {
+                x: (upperPivot.x || 0) - (root_torso.x || 0),
+                y: (upperPivot.y || 0) - (root_torso.y || 0),
                 rotation: upperRot,
                 scaleX: 1,
                 scaleY: 1
@@ -624,7 +646,7 @@ export class CharacterRigRenderer {
             });
         }
         // Left Hand
-        if (isVisible('leftHand')) {
+        if (visibility.leftHand !== false) {
             const upperConnectionKey = `torso_leftUpperArm`;
             const upperPivot = pivotPoints[upperConnectionKey] || { x: 0, y: 0 };
             const upperHeight = dimensions.leftUpperArm?.height || 50;
@@ -640,9 +662,9 @@ export class CharacterRigRenderer {
             const height = dimensions.leftHand?.height || 30;
             const handRot = rotations["leftHand"] || 0;
             const selfRot = selfRotations["leftHand"] || 0;
-            const upperArmBase = this.applyTransform(rootTransform, {
-                x: upperPivot.x || 0,
-                y: upperPivot.y || 0,
+            const upperArmBase = this.applyTransform(torsoTransform, {
+                x: (upperPivot.x || 0) - (root_torso.x || 0),
+                y: (upperPivot.y || 0) - (root_torso.y || 0),
                 rotation: upperRot,
                 scaleX: 1,
                 scaleY: 1
@@ -688,7 +710,7 @@ export class CharacterRigRenderer {
         }
         // Right Arm chain (rightUpperArm, rightForearm, rightHand)
         // Right Upper Arm
-        if (isVisible('rightUpperArm')) {
+        if (visibility.rightUpperArm !== false) {
             const connectionKey = `torso_rightUpperArm`;
             const pivotPoint = pivotPoints[connectionKey] || { x: 0, y: 0 };
             const jointOff = jointOffset[connectionKey] || { x: 0, y: 0 };
@@ -696,9 +718,9 @@ export class CharacterRigRenderer {
             const height = dimensions.rightUpperArm?.height || 50;
             const limbRot = rotations['rightUpperArm'] || 0;
             const selfRot = selfRotations['rightUpperArm'] || 0;
-            const upperArmParentTransform = this.applyTransform(rootTransform, {
-                x: pivotPoint.x || 0,
-                y: pivotPoint.y || 0,
+            const upperArmParentTransform = this.applyTransform(torsoTransform, {
+                x: (pivotPoint.x || 0) - (root_torso.x || 0),
+                y: (pivotPoint.y || 0) - (root_torso.y || 0),
                 rotation: limbRot,
                 scaleX: 1,
                 scaleY: 1
@@ -730,7 +752,7 @@ export class CharacterRigRenderer {
             });
         }
         // Right Forearm
-        if (isVisible('rightForearm')) {
+        if (visibility.rightForearm !== false) {
             const upperConnectionKey = `torso_rightUpperArm`;
             const upperPivot = pivotPoints[upperConnectionKey] || { x: 0, y: 0 };
             const upperHeight = dimensions.rightUpperArm?.height || 50;
@@ -742,9 +764,9 @@ export class CharacterRigRenderer {
             const height = dimensions.rightForearm?.height || 45;
             const limbRot = rotations["rightForearm"] || 0;
             const selfRot = selfRotations["rightForearm"] || 0;
-            const upperArmBase = this.applyTransform(rootTransform, {
-                x: upperPivot.x || 0,
-                y: upperPivot.y || 0,
+            const upperArmBase = this.applyTransform(torsoTransform, {
+                x: (upperPivot.x || 0) - (root_torso.x || 0),
+                y: (upperPivot.y || 0) - (root_torso.y || 0),
                 rotation: upperRot,
                 scaleX: 1,
                 scaleY: 1
@@ -783,7 +805,7 @@ export class CharacterRigRenderer {
             });
         }
         // Right Hand
-        if (isVisible('rightHand')) {
+        if (visibility.rightHand !== false) {
             const upperConnectionKey = `torso_rightUpperArm`;
             const upperPivot = pivotPoints[upperConnectionKey] || { x: 0, y: 0 };
             const upperHeight = dimensions.rightUpperArm?.height || 50;
@@ -799,9 +821,9 @@ export class CharacterRigRenderer {
             const height = dimensions.rightHand?.height || 30;
             const handRot = rotations["rightHand"] || 0;
             const selfRot = selfRotations["rightHand"] || 0;
-            const upperArmBase = this.applyTransform(rootTransform, {
-                x: upperPivot.x || 0,
-                y: upperPivot.y || 0,
+            const upperArmBase = this.applyTransform(torsoTransform, {
+                x: (upperPivot.x || 0) - (root_torso.x || 0),
+                y: (upperPivot.y || 0) - (root_torso.y || 0),
                 rotation: upperRot,
                 scaleX: 1,
                 scaleY: 1
@@ -847,7 +869,7 @@ export class CharacterRigRenderer {
         }
         // Left Leg chain (leftThigh, leftLeg)
         // Left Thigh
-        if (isVisible('leftThigh')) {
+        if (visibility.leftThigh !== false) {
             const connectionKey = `torso_leftThigh`;
             const pivotPoint = pivotPoints[connectionKey] || { x: 0, y: 0 };
             const jointOff = jointOffset[connectionKey] || { x: 0, y: 0 };
@@ -889,7 +911,7 @@ export class CharacterRigRenderer {
             });
         }
         // Left Leg
-        if (isVisible('leftLeg')) {
+        if (visibility.leftLeg !== false) {
             const upperConnectionKey = `torso_leftThigh`;
             const upperPivot = pivotPoints[upperConnectionKey] || { x: 0, y: 0 };
             const upperHeight = dimensions.leftThigh?.height || 60;
@@ -942,7 +964,7 @@ export class CharacterRigRenderer {
         }
         // Right Leg chain (rightThigh, rightLeg)
         // Right Thigh
-        if (isVisible('rightThigh')) {
+        if (visibility.rightThigh !== false) {
             const connectionKey = `torso_rightThigh`;
             const pivotPoint = pivotPoints[connectionKey] || { x: 0, y: 0 };
             const jointOff = jointOffset[connectionKey] || { x: 0, y: 0 };
@@ -984,7 +1006,7 @@ export class CharacterRigRenderer {
             });
         }
         // Right Leg
-        if (isVisible('rightLeg')) {
+        if (visibility.rightLeg !== false) {
             const upperConnectionKey = `torso_rightThigh`;
             const upperPivot = pivotPoints[upperConnectionKey] || { x: 0, y: 0 };
             const upperHeight = dimensions.rightThigh?.height || 60;
@@ -1037,58 +1059,49 @@ export class CharacterRigRenderer {
         }
         // Sort all objects by zIndex
         allObjects.sort((a, b) => a.zIndex - b.zIndex);
-        // Compute pivot points in world space
+        // Compute pivot points in world space.
+        // All torso-attached joints are resolved via torsoTransform so they correctly
+        // follow any torso rotation applied around root_torso.
         const computedPivotPoints = [];
-        // Head/torso pivot
-        const torsoHead = pivotPoints['torso_head'] || { x: 0, y: 0 };
-        const headPivotWorld = this.applyTransform(rootTransform, {
-            x: torsoHead.x || 0,
-            y: torsoHead.y || 0,
-            rotation: 0,
+        // Helper: convert a root-space pivot offset to torso-local space, then to world.
+        const torsoLocalPivot = (px, py, rot) => this.applyTransform(torsoTransform, {
+            x: px - (root_torso.x || 0),
+            y: py - (root_torso.y || 0),
+            rotation: rot,
             scaleX: 1,
             scaleY: 1
         });
-        computedPivotPoints.push({
-            name: 'torso_head',
-            x: headPivotWorld.x,
-            y: headPivotWorld.y
-        });
-        // Mouth pivot
+        // root_torso pivot (the torso rotation origin in world space)
+        computedPivotPoints.push({ name: 'root_torso', x: torsoTransform.x, y: torsoTransform.y });
+        // Head/torso pivot
+        const torsoHead = pivotPoints['torso_head'] || { x: 0, y: 0 };
+        const headPivotWorld = torsoLocalPivot(torsoHead.x || 0, torsoHead.y || 0, 0);
+        computedPivotPoints.push({ name: 'torso_head', x: headPivotWorld.x, y: headPivotWorld.y });
+        // Mouth pivot — child of head, uses applyTransform chain for correctness
         const headAngle = rotations['head'] || 0;
-        const headAngleEff = flipHead ? -headAngle : headAngle;
-        const headOffX = 0; // head offset defaults to 0
-        const headOffY = 0; // head offset defaults to 0
-        const headOffEffX = flipHead ? -headOffX : headOffX;
-        const cosH = Math.cos(headAngleEff);
-        const sinH = Math.sin(headAngleEff);
         const mouthOffset = pivotPoints['head_mouth'] || { x: 0, y: 0 };
-        const mouthOffX = flipHead ? -(mouthOffset.x || 0) : (mouthOffset.x || 0);
-        const mouthOffY = mouthOffset.y || 0;
-        computedPivotPoints.push({
-            name: 'head_mouth',
-            x: centerX + (torsoHead.x || 0) + headOffEffX + (mouthOffX * cosH - mouthOffY * sinH),
-            y: centerY + (torsoHead.y || 0) + headOffY + (mouthOffX * sinH + mouthOffY * cosH)
-        });
-        // Left arm chain pivots
-        const lShoulder = pivotPoints['torso_leftUpperArm'] || { x: 0, y: 0 };
-        const lShoulderWorld = this.applyTransform(rootTransform, {
-            x: lShoulder.x || 0,
-            y: lShoulder.y || 0,
+        const mouthHeadBase = torsoLocalPivot(torsoHead.x || 0, torsoHead.y || 0, headAngle);
+        // Apply flipHead mirror to the head base before computing mouth
+        const mouthHeadBaseFlipped = {
+            ...mouthHeadBase,
+            scaleX: mouthHeadBase.scaleX * (flipHead ? -1 : 1)
+        };
+        const mouthPivotWorld = this.applyTransform(mouthHeadBaseFlipped, {
+            x: mouthOffset.x || 0,
+            y: mouthOffset.y || 0,
             rotation: 0,
             scaleX: 1,
             scaleY: 1
         });
+        computedPivotPoints.push({ name: 'head_mouth', x: mouthPivotWorld.x, y: mouthPivotWorld.y });
+        // Left arm chain pivots
+        const lShoulder = pivotPoints['torso_leftUpperArm'] || { x: 0, y: 0 };
+        const lShoulderWorld = torsoLocalPivot(lShoulder.x || 0, lShoulder.y || 0, 0);
         computedPivotPoints.push({ name: 'torso_leftUpperArm', x: lShoulderWorld.x, y: lShoulderWorld.y });
         const rL1 = rotations['leftUpperArm'] || 0;
         const leftUpperArmHeight = dimensions.leftUpperArm?.height || 50;
         const lElbowOff = pivotPoints['leftUpperArm_leftForearm'] || { x: 0, y: 0 };
-        const lElbowBase = this.applyTransform(rootTransform, {
-            x: lShoulder.x || 0,
-            y: lShoulder.y || 0,
-            rotation: rL1,
-            scaleX: 1,
-            scaleY: 1
-        });
+        const lElbowBase = torsoLocalPivot(lShoulder.x || 0, lShoulder.y || 0, rL1);
         const lElbowWorld = this.applyTransform(lElbowBase, {
             x: lElbowOff.x || 0,
             y: (lElbowOff.y || 0) - leftUpperArmHeight,
@@ -1116,24 +1129,12 @@ export class CharacterRigRenderer {
         computedPivotPoints.push({ name: 'leftForearm_leftHand', x: lWristWorld.x, y: lWristWorld.y });
         // Right arm chain pivots
         const rShoulder = pivotPoints['torso_rightUpperArm'] || { x: 0, y: 0 };
-        const rShoulderWorld = this.applyTransform(rootTransform, {
-            x: rShoulder.x || 0,
-            y: rShoulder.y || 0,
-            rotation: 0,
-            scaleX: 1,
-            scaleY: 1
-        });
+        const rShoulderWorld = torsoLocalPivot(rShoulder.x || 0, rShoulder.y || 0, 0);
         computedPivotPoints.push({ name: 'torso_rightUpperArm', x: rShoulderWorld.x, y: rShoulderWorld.y });
         const rR1 = rotations['rightUpperArm'] || 0;
         const rightUpperArmHeight = dimensions.rightUpperArm?.height || 50;
         const rElbowOff = pivotPoints['rightUpperArm_rightForearm'] || { x: 0, y: 0 };
-        const rElbowBase = this.applyTransform(rootTransform, {
-            x: rShoulder.x || 0,
-            y: rShoulder.y || 0,
-            rotation: rR1,
-            scaleX: 1,
-            scaleY: 1
-        });
+        const rElbowBase = torsoLocalPivot(rShoulder.x || 0, rShoulder.y || 0, rR1);
         const rElbowWorld = this.applyTransform(rElbowBase, {
             x: rElbowOff.x || 0,
             y: (rElbowOff.y || 0) - rightUpperArmHeight,
@@ -1159,25 +1160,17 @@ export class CharacterRigRenderer {
             scaleY: 1
         });
         computedPivotPoints.push({ name: 'rightForearm_rightHand', x: rWristWorld.x, y: rWristWorld.y });
-        // Left leg chain pivots
+        // Left leg chain pivots — legs are rooted to rootTransform, not torsoTransform
         const lHip = pivotPoints['torso_leftThigh'] || { x: 0, y: 0 };
         const lHipWorld = this.applyTransform(rootTransform, {
-            x: lHip.x || 0,
-            y: lHip.y || 0,
-            rotation: 0,
-            scaleX: 1,
-            scaleY: 1
+            x: lHip.x || 0, y: lHip.y || 0, rotation: 0, scaleX: 1, scaleY: 1
         });
         computedPivotPoints.push({ name: 'torso_leftThigh', x: lHipWorld.x, y: lHipWorld.y });
         const rLT1 = rotations['leftThigh'] || 0;
         const leftThighHeight = dimensions.leftThigh?.height || 60;
         const lKneeOff = pivotPoints['leftThigh_leftLeg'] || { x: 0, y: 0 };
         const lThighBase = this.applyTransform(rootTransform, {
-            x: lHip.x || 0,
-            y: lHip.y || 0,
-            rotation: rLT1,
-            scaleX: 1,
-            scaleY: 1
+            x: lHip.x || 0, y: lHip.y || 0, rotation: rLT1, scaleX: 1, scaleY: 1
         });
         const lKneeWorld = this.applyTransform(lThighBase, {
             x: lKneeOff.x || 0,
@@ -1187,25 +1180,17 @@ export class CharacterRigRenderer {
             scaleY: 1
         });
         computedPivotPoints.push({ name: 'leftThigh_leftLeg', x: lKneeWorld.x, y: lKneeWorld.y });
-        // Right leg chain pivots
+        // Right leg chain pivots — legs are rooted to rootTransform, not torsoTransform
         const rHip = pivotPoints['torso_rightThigh'] || { x: 0, y: 0 };
         const rHipWorld = this.applyTransform(rootTransform, {
-            x: rHip.x || 0,
-            y: rHip.y || 0,
-            rotation: 0,
-            scaleX: 1,
-            scaleY: 1
+            x: rHip.x || 0, y: rHip.y || 0, rotation: 0, scaleX: 1, scaleY: 1
         });
         computedPivotPoints.push({ name: 'torso_rightThigh', x: rHipWorld.x, y: rHipWorld.y });
         const rRT1 = rotations['rightThigh'] || 0;
         const rightThighHeight = dimensions.rightThigh?.height || 60;
         const rKneeOff = pivotPoints['rightThigh_rightLeg'] || { x: 0, y: 0 };
         const rThighBase = this.applyTransform(rootTransform, {
-            x: rHip.x || 0,
-            y: rHip.y || 0,
-            rotation: rRT1,
-            scaleX: 1,
-            scaleY: 1
+            x: rHip.x || 0, y: rHip.y || 0, rotation: rRT1, scaleX: 1, scaleY: 1
         });
         const rKneeWorld = this.applyTransform(rThighBase, {
             x: rKneeOff.x || 0,