fix(studio): add GSAP 3D inspector metadata (#1250)

packages/studio/src/components/editor/gsapAnimationConstants.ts

@@ -20,6 +20,12 @@ export const PROP_LABELS: Record<string, string> = {
   width: "Width",
   height: "Height",
   rotation: "Rotate",
+  z: "Move Z",
+  rotationX: "Rotate X",
+  rotationY: "Rotate Y",
+  rotationZ: "Rotate Z",
+  perspective: "Perspective",
+  transformOrigin: "Transform Origin",
   opacity: "Opacity",
   scale: "Scale",
   scaleX: "Scale X",
@@ -46,6 +52,12 @@ export const PROP_UNITS: Record<string, string> = {
   width: "px",
   height: "px",
   rotation: "°",
+  z: "px",
+  rotationX: "°",
+  rotationY: "°",
+  rotationZ: "°",
+  perspective: "px",
+  transformOrigin: "",
   opacity: "%",
   scale: "×",
   scaleX: "×",
@@ -62,6 +74,13 @@ export const PROP_TOOLTIPS: Record<string, string> = {
   scaleX: "Horizontal stretch (1 = normal)",
   scaleY: "Vertical stretch (1 = normal)",
   rotation: "Spin angle (360 = full rotation)",
+  z: "Move forward/back along the Z axis",
+  rotationX: "Rotate around the horizontal X axis",
+  rotationY: "Rotate around the vertical Y axis",
+  rotationZ: "Rotate around the screen-facing Z axis",
+  perspective:
+    "3D depth context for child elements; set it on a parent when rotating children in 3D",
+  transformOrigin: "Pivot point for transforms, for example center center or 50% 50%",
   width: "Element width",
   height: "Element height",
   autoAlpha: "Like opacity but hides element completely at 0",
@@ -147,6 +166,11 @@ export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step
   scaleX: { min: -10, max: 10, step: 0.01 },
   scaleY: { min: -10, max: 10, step: 0.01 },
   rotation: { step: 1 },
+  z: { step: 1 },
+  rotationX: { step: 1 },
+  rotationY: { step: 1 },
+  rotationZ: { step: 1 },
+  perspective: { min: 0, step: 1 },
   skewX: { min: -90, max: 90, step: 1 },
   skewY: { min: -90, max: 90, step: 1 },
   width: { min: 0, step: 1 },

packages/studio/src/components/editor/gsapAnimationHelpers.test.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
+import { SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 import { buildTweenSummary } from "./gsapAnimationHelpers";
+import { PROP_LABELS } from "./gsapAnimationConstants";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 
 function anim(overrides: Partial<GsapAnimation>): GsapAnimation {
@@ -23,6 +25,27 @@ describe("buildTweenSummary", () => {
     expect(s).toContain("move x");
   });
 
+  it("describes 3D transform tweens with labels and units", () => {
+    const s = buildTweenSummary(
+      anim({
+        properties: {
+          z: 120,
+          rotationX: 45,
+          rotationY: -30,
+          rotationZ: 90,
+          perspective: 800,
+          transformOrigin: "50% 50%",
+        },
+      }),
+    );
+    expect(s).toContain("move z to 120px");
+    expect(s).toContain("rotate x to 45°");
+    expect(s).toContain("rotate y to -30°");
+    expect(s).toContain("rotate z to 90°");
+    expect(s).toContain("perspective to 800px");
+    expect(s).toContain("transform origin to 50% 50%");
+  });
+
   it("describes a from tween", () => {
     const s = buildTweenSummary(anim({ method: "from", properties: { opacity: 0 } }));
     expect(s).toContain("enters from");
@@ -65,3 +88,9 @@ describe("buildTweenSummary", () => {
     expect(s).toContain("no properties yet");
   });
 });
+
+describe("PROP_LABELS", () => {
+  it("provides labels for every inspector-supported GSAP property", () => {
+    expect(SUPPORTED_PROPS.filter((prop) => !PROP_LABELS[prop])).toEqual([]);
+  });
+});