feat(studio): GSAP tween editing in Design panel (#1092)

Add an ANIMATION section to the Design panel that lets users inspect and
edit GSAP tween properties directly — no code editing required.

- Recast AST parser replaces regex for GSAP script manipulation
- Collapsible per-tween cards with video-editor language
- Editable properties with add/remove, easing curve preview
- DOMParser for HTML script extraction (no regex)
- Selection position fix: force reapply before rect reads
- GSAP translate bake fix: MutationObserver on offset elements strips
  doubled translate instantly; disconnects when seek wrappers install
- PropertyPanel visual offset: X/Y show actual position
- Input validation: duration/position reject negatives
- Feature flag: VITE_STUDIO_ENABLE_GSAP_PANEL (default false)

Author: miguel-heygen

bun.lock

@@ -58,6 +58,10 @@
       "import": "./src/registry/index.ts",
       "types": "./src/registry/index.ts"
     },
+    "./gsap-parser": {
+      "import": "./src/parsers/gsapParser.ts",
+      "types": "./src/parsers/gsapParser.ts"
+    },
     "./schemas/registry.json": "./schemas/registry.json",
     "./schemas/registry-item.json": "./schemas/registry-item.json"
   },
@@ -105,6 +109,10 @@
         "import": "./dist/registry/index.js",
         "types": "./dist/registry/index.d.ts"
       },
+      "./gsap-parser": {
+        "import": "./dist/parsers/gsapParser.js",
+        "types": "./dist/parsers/gsapParser.d.ts"
+      },
       "./schemas/registry.json": "./schemas/registry.json",
       "./schemas/registry-item.json": "./schemas/registry-item.json"
     },
@@ -134,8 +142,10 @@
     "prepublishOnly": "echo skip"
   },
   "dependencies": {
+    "@babel/parser": "^7.27.0",
     "@chenglou/pretext": "^0.0.5",
-    "postcss": "^8.5.8"
+    "postcss": "^8.5.8",
+    "recast": "^0.23.11"
   },
   "devDependencies": {
     "@types/jsdom": "^28.0.0",

packages/core/package.json

@@ -79,9 +79,7 @@ describe("parseGsapScript", () => {
     expect(anim.position).toBe(2);
   });
 
-  it("parseObjectLiteral does not match negative numbers (known limitation)", () => {
-    // The regex in parseObjectLiteral only matches [\d.]+, not negative numbers.
-    // Negative values like x: -100 won't be parsed by the object literal parser.
+  it("parses negative numbers in property values", () => {
     const script = `
       const tl = gsap.timeline({ paused: true });
       tl.fromTo("#el5", { opacity: 0, x: -100 }, { opacity: 1, x: 0, duration: 1 }, 0);
@@ -92,8 +90,7 @@ describe("parseGsapScript", () => {
     const anim = result.animations[0];
     expect(anim.fromProperties).toBeDefined();
     expect(anim.fromProperties?.opacity).toBe(0);
-    // -100 is not parseable by the regex, so x won't be in fromProperties
-    expect(anim.fromProperties?.x).toBeUndefined();
+    expect(anim.fromProperties?.x).toBe(-100);
   });
 
   it("handles an empty script", () => {
@@ -142,7 +139,7 @@ describe("parseGsapScript", () => {
     expect(result.animations[2].method).toBe("to");
   });
 
-  it("filters out unsupported properties from animations", () => {
+  it("extracts all GSAP properties including non-standard ones", () => {
     const script = `
       const tl = gsap.timeline({ paused: true });
       tl.to("#el1", { opacity: 1, backgroundColor: "red", x: 50, duration: 0.5 }, 0);
@@ -151,8 +148,7 @@ describe("parseGsapScript", () => {
 
     expect(result.animations[0].properties.opacity).toBe(1);
     expect(result.animations[0].properties.x).toBe(50);
-    // backgroundColor is not in SUPPORTED_PROPS, so it's filtered out
-    expect(result.animations[0].properties.backgroundColor).toBeUndefined();
+    expect(result.animations[0].properties.backgroundColor).toBe("red");
   });
 
   it("extracts ease from properties", () => {
@@ -244,7 +240,7 @@ describe("gsapAnimationsToKeyframes", () => {
         targetSelector: "#el1",
         method: "set",
         position: 5,
-        properties: { x: 0, y: 0, scale: 1 },
+        properties: { x: 0, y: 0 },
       },
       {
         id: "anim-2",
@@ -258,7 +254,6 @@ describe("gsapAnimationsToKeyframes", () => {
 
     const keyframes = gsapAnimationsToKeyframes(animations, 5, { skipBaseSet: true });
 
-    // The set at position 5 (time=0) with x=0, y=0, scale=1 (base values) should be skipped
     expect(keyframes).toHaveLength(1);
     expect(keyframes[0].id).toBe("anim-2");
   });