fix(studio): strip a group's GSAP when ungrouping

Ungrouping removed the wrapper element but left its gsap.set("#group-1") behind,
targeting a now-deleted element. GSAP then threw "target not found" on every
preview run, which drove a selection re-render storm that made canvas context
menus (e.g. Delete All Keyframes) unclickable. unwrapElementsFromHtml now returns
the unwrapped wrapper's id, and the unwrap route strips any GSAP animation
targeting it (reusing the parser + removeAnimationFromScript).

Author: miguel-heygen

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

@@ -404,6 +404,9 @@ export interface WrapElementsResult {
 export interface UnwrapElementsResult {
   html: string;
   unwrapped: boolean;
+  /** 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;
 }
 
 export interface ElementRebase {
@@ -421,6 +424,23 @@ function getInlineStylePx(el: Element, property: string): number {
   return Number.isFinite(n) ? n : 0;
 }
 
+// Slug the group name ("Group 1" → "group-1") into a unique, valid element id.
+function uniqueGroupDomId(document: Document, groupId: string): string {
+  const base =
+    groupId
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "group";
+  let id = base;
+  let n = 2;
+  while (document.getElementById(id)) {
+    id = `${base}-${n}`;
+    n += 1;
+  }
+  return id;
+}
+
 function setInlineLeftTop(el: HTMLElement, left: number, top: number): void {
   let style = el.getAttribute("style") ?? "";
   style = patchStyleAttrString(style, "left", `${left}px`);
@@ -478,6 +498,10 @@ export function wrapElementsInHtml(
 
   const wrapper = document.createElement("div");
   wrapper.setAttribute("data-hf-group", groupId);
+  // A real `id` (slug of the group name) makes the wrapper a first-class node in the
+  // clip manifest / timeline parent-map (both keyed by id) and a clean GSAP target —
+  // without it the wrapper is invisible to the timeline and breaks child enumeration.
+  wrapper.setAttribute("id", uniqueGroupDomId(document, groupId));
   wrapper.setAttribute(
     "style",
     `position: absolute; left: ${bbox.left}px; top: ${bbox.top}px; width: ${bbox.width}px; height: ${bbox.height}px`,
@@ -524,10 +548,12 @@ export function unwrapElementsFromHtml(
     }
     parent.insertBefore(child, group);
   }
+  const groupId = group.id || undefined;
   group.remove();
 
   return {
     html: wrappedFragment ? document.body.innerHTML || "" : document.toString(),
     unwrapped: true,
+    unwrappedGroupId: groupId,
   };
 }

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

@@ -314,6 +314,25 @@ function extractGsapScriptBlock(html: string): {
   return null;
 }
 
+/**
+ * Remove every GSAP animation that targets `selector` from an HTML string's
+ * inline script. Used after unwrapping a group so its leftover `gsap.set("#id")`
+ * (the wrapper is gone) doesn't throw "target not found" on every preview run.
+ */
+function stripGsapAnimationsForSelector(html: string, selector: string): string {
+  const block = extractGsapScriptBlock(html);
+  if (!block) return html;
+  const parsed = parseGsapScriptAcorn(block.scriptText);
+  const matching = parsed.animations.filter((a) => a.targetSelector === selector);
+  if (matching.length === 0) return html;
+  let script = block.scriptText;
+  // Reverse so earlier removals don't shift the spans of later ones.
+  for (const anim of [...matching].reverse()) {
+    script = removeAnimationFromScript(script, anim.id);
+  }
+  return block.replaceScript(script);
+}
+
 function stripStudioEditsFromTarget(document: Document, selector: string): number {
   if (!selector) return 0;
   let stripped = 0;
@@ -1649,14 +1668,12 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
     if (!result.unwrapped) {
       return c.json({ ok: false, changed: false, content: originalContent, path: ctx.filePath });
     }
-    return writeIfChanged(
-      c,
-      ctx.project.dir,
-      ctx.filePath,
-      ctx.absPath,
-      originalContent,
-      result.html,
-    );
+    // The wrapper is gone — strip any GSAP that targeted it, or a leftover
+    // `gsap.set("#group-1")` throws "target not found" every preview run.
+    const cleaned = result.unwrappedGroupId
+      ? stripGsapAnimationsForSelector(result.html, `#${result.unwrappedGroupId}`)
+      : result.html;
+    return writeIfChanged(c, ctx.project.dir, ctx.filePath, ctx.absPath, originalContent, cleaned);
   });
 
   api.post("/projects/:id/file-mutations/probe-element/*", async (c) => {