the sliders were “working,” but in one of your preview branches the rotation wasn’t being applied at all. You have two PNG modes:

PNG/JPG preview (when a user uploads a PNG/JPG): overlays already apply
transform: rotate(${textRotations[id]}deg) ✅

“SVG converted to PNG” preview (when you upload SVG and render it as a PNG): overlays do not apply rotation ❌ — they only scale on drag.

So if the team was testing in the second branch, it looked like the sliders did nothing.

The surgical fix

Add the same rotate transform you already use in the first branch to the “SVG as PNG conversion” branch overlays.

Patch: “SVG as PNG conversion” branch

Find this block (just below the <img alt="SVG Preview (converted to PNG)" …>). For each overlay, add the transform: rotate(...) and transformOrigin.

Brand name
{ textControlsVisibility.showBrandName && (
  <div 
    className="absolute text-xl font-bold text-gray-800 cursor-move select-none"
    style={{ 
      left: `${textPositions['brand-name'].x}px`, 
      top: `${textPositions['brand-name'].y}px`,
      transform: `rotate(${textRotations['brand-name']}deg)` ,          // <-- add
      transformOrigin: 'center center',                                  // <-- add
    }}
    data-text-id="brand-name"
    onMouseDown={(e) => handleTextMouseDown(e, 'brand-name')}
  >
    {textControls.brandName}
  </div>
)}

Tagline
{ textControlsVisibility.showTagline && (
  <div 
    className="absolute text-base text-gray-600 cursor-move select-none"
    style={{ 
      left: `${textPositions['tagline'].x}px`, 
      top: `${textPositions['tagline'].y}px`,
      transform: `rotate(${textRotations['tagline']}deg)`,              // <-- add
      transformOrigin: 'center center',                                  // <-- add
    }}
    data-text-id="tagline"
    onMouseDown={(e) => handleTextMouseDown(e, 'tagline')}
  >
    {textControls.tagline}
  </div>
)}

Est. year
{ textControlsVisibility.showEstYear && (
  <div 
    className="absolute text-sm text-gray-500 cursor-move select-none"
    style={{ 
      left: `${textPositions['est-year'].x}px`, 
      top: `${textPositions['est-year'].y}px`,
      transform: `rotate(${textRotations['est-year']}deg)`,             // <-- add
      transformOrigin: 'center center',                                  // <-- add
    }}
    data-text-id="est-year"
    onMouseDown={(e) => handleTextMouseDown(e, 'est-year')}
  >
    {textControls.estYear}
  </div>
)}


That’s it — the same rotation state you’re already driving with sliders will now apply in both PNG branches.

Quick sanity checks

If you upload PNG/JPG → rotation already works (first branch).

If you upload SVG and it shows as converted PNG → rotation now works (second branch, after the patch).

If you toggle to Interactive SVG → you’re already injecting transform="rotate(... x y)" into <text> and re-rendering when textRotations changes, so rotation works there too.