fix(studio): bake the group transform into members on ungroup

Ungroup only baked the wrapper's layout (left/top), not its GSAP transform — so a
moved group's members snapped back to their creation-time positions. Distribute the
group's static transform onto each member before stripping it: translation is an
exact per-axis add; rotation/scale are composed about the group center so off-center
members don't drift. Animated group transforms are left to be stripped, not baked.

Author: miguel-heygen

packages/core/src/studio-api/helpers/sourceMutation.ts

@@ -407,6 +407,12 @@ export interface UnwrapElementsResult {
   /** The unwrapped wrapper's id, so callers can strip GSAP that targeted it
    *  (the wrapper is gone; a leftover `gsap.set("#id")` would throw at runtime). */
   unwrappedGroupId?: string;
+  /** Members (id'd children) with their absolute layout centres (post un-rebase),
+   *  so the caller can BAKE the group's GSAP transform into each member before
+   *  stripping it — otherwise the group's moves are lost on ungroup. */
+  members?: Array<{ id: string; cx: number; cy: number }>;
+  /** The wrapper's layout centre — the pivot for baking the group's rotation/scale. */
+  groupCenter?: { cx: number; cy: number };
 }
 
 export interface ElementRebase {
@@ -536,15 +542,25 @@ export function unwrapElementsFromHtml(
   // Undo the rebase: child absolute position = child (rebased) + wrapper origin.
   const wLeft = getInlineStylePx(group, "left");
   const wTop = getInlineStylePx(group, "top");
+  const groupCenter = {
+    cx: wLeft + getInlineStylePx(group, "width") / 2,
+    cy: wTop + getInlineStylePx(group, "height") / 2,
+  };
 
   // Move children back to the wrapper's slot, preserving order.
+  const members: Array<{ id: string; cx: number; cy: number }> = [];
   for (const child of Array.from(group.children)) {
     if (isHTMLElement(child)) {
-      setInlineLeftTop(
-        child,
-        getInlineStylePx(child, "left") + wLeft,
-        getInlineStylePx(child, "top") + wTop,
-      );
+      const newLeft = getInlineStylePx(child, "left") + wLeft;
+      const newTop = getInlineStylePx(child, "top") + wTop;
+      setInlineLeftTop(child, newLeft, newTop);
+      if (child.id) {
+        members.push({
+          id: child.id,
+          cx: newLeft + getInlineStylePx(child, "width") / 2,
+          cy: newTop + getInlineStylePx(child, "height") / 2,
+        });
+      }
     }
     parent.insertBefore(child, group);
   }
@@ -555,5 +571,7 @@ export function unwrapElementsFromHtml(
     html: wrappedFragment ? document.body.innerHTML || "" : document.toString(),
     unwrapped: true,
     unwrappedGroupId: groupId,
+    members,
+    groupCenter,
   };
 }

packages/core/src/studio-api/routes/files.ts

@@ -333,6 +333,90 @@ function stripGsapAnimationsForSelector(html: string, selector: string): string
   return block.replaceScript(script);
 }
 
+/**
+ * Bake a group's STATIC GSAP transform into each member BEFORE the group is
+ * stripped on ungroup. Moving a group is stored as `gsap.set("#group-1",{x,y,…})`;
+ * without distributing it to the members they snap back to their creation-time
+ * positions. Translation (x/y/z) is an exact per-axis add; rotation/scale are
+ * composed about the group's centre (the pivot) so off-centre members don't drift.
+ * Animated group transforms (keyframes/tweens) are NOT baked — left to be stripped.
+ */
+function bakeGroupTransformIntoMembers(
+  html: string,
+  groupId: string,
+  members: Array<{ id: string; cx: number; cy: number }>,
+  groupCenter: { cx: number; cy: number },
+): string {
+  const block = extractGsapScriptBlock(html);
+  if (!block) return html;
+  const parsed = parseGsapScriptAcorn(block.scriptText);
+  const groupSel = `#${groupId}`;
+  const groupSets = parsed.animations.filter(
+    (a) => a.targetSelector === groupSel && a.method === "set",
+  );
+  if (groupSets.length === 0) return html;
+  // Merge the group's sets (later per-prop wins) → its effective static transform.
+  const gt: Record<string, number> = {};
+  for (const s of groupSets) {
+    for (const [k, v] of Object.entries(s.properties)) if (typeof v === "number") gt[k] = v;
+  }
+  const gx = gt.x ?? 0;
+  const gy = gt.y ?? 0;
+  const gz = gt.z ?? 0;
+  const grot = gt.rotation ?? 0;
+  const gscale = gt.scale ?? 1;
+  if (gx === 0 && gy === 0 && gz === 0 && grot === 0 && gscale === 1) return html;
+
+  const rad = (grot * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const round3 = (n: number) => Math.round(n * 1000) / 1000;
+
+  let script = block.scriptText;
+  for (const m of members) {
+    const memberSel = `#${m.id}`;
+    const sets = parsed.animations.filter(
+      (a) => a.targetSelector === memberSel && a.method === "set",
+    );
+    // Effective member transform (merge its sets — last per-prop wins).
+    const mProps: Record<string, number | string> = {};
+    for (const s of sets) Object.assign(mProps, s.properties);
+    const mx = typeof mProps.x === "number" ? mProps.x : 0;
+    const my = typeof mProps.y === "number" ? mProps.y : 0;
+    // Compose the group transform onto the member's centre, then back to an offset.
+    const dx = m.cx + mx - groupCenter.cx;
+    const dy = m.cy + my - groupCenter.cy;
+    const visX = groupCenter.cx + gscale * (cos * dx - sin * dy) + gx;
+    const visY = groupCenter.cy + gscale * (sin * dx + cos * dy) + gy;
+    const newProps: Record<string, number | string> = {
+      ...mProps,
+      x: round3(visX - m.cx),
+      y: round3(visY - m.cy),
+    };
+    if (gz !== 0) newProps.z = (typeof mProps.z === "number" ? mProps.z : 0) + gz;
+    if (grot !== 0) {
+      newProps.rotation = round3((typeof mProps.rotation === "number" ? mProps.rotation : 0) + grot);
+    }
+    if (gscale !== 1) {
+      newProps.scale = round3((typeof mProps.scale === "number" ? mProps.scale : 1) * gscale);
+    }
+
+    const last = sets[sets.length - 1];
+    if (last) {
+      script = updateAnimationInScript(script, last.id, { properties: newProps });
+    } else {
+      script = addAnimationToScript(script, {
+        targetSelector: memberSel,
+        method: "set",
+        position: 0,
+        properties: newProps,
+        global: true,
+      }).script;
+    }
+  }
+  return block.replaceScript(script);
+}
+
 function stripStudioEditsFromTarget(document: Document, selector: string): number {
   if (!selector) return 0;
   let stripped = 0;
@@ -1668,11 +1752,22 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
     if (!result.unwrapped) {
       return c.json({ ok: false, changed: false, content: originalContent, path: ctx.filePath });
     }
-    // The wrapper is gone — strip any GSAP that targeted it, or a leftover
+    // BAKE the group's static transform into the members FIRST, so the group's
+    // accumulated moves are preserved (otherwise members snap back to their
+    // creation-time positions), THEN strip the group's GSAP — a leftover
     // `gsap.set("#group-1")` throws "target not found" every preview run.
-    const cleaned = result.unwrappedGroupId
-      ? stripGsapAnimationsForSelector(result.html, `#${result.unwrappedGroupId}`)
-      : result.html;
+    let cleaned = result.html;
+    if (result.unwrappedGroupId && result.members && result.groupCenter) {
+      cleaned = bakeGroupTransformIntoMembers(
+        cleaned,
+        result.unwrappedGroupId,
+        result.members,
+        result.groupCenter,
+      );
+    }
+    if (result.unwrappedGroupId) {
+      cleaned = stripGsapAnimationsForSelector(cleaned, `#${result.unwrappedGroupId}`);
+    }
     return writeIfChanged(c, ctx.project.dir, ctx.filePath, ctx.absPath, originalContent, cleaned);
   });