fix(studio): add GSAP drag intercept feature flag, disabled by default (#1341)

Add VITE_STUDIO_ENABLE_GSAP_DRAG_INTERCEPT env var (default: false) to
gate the GSAP drag/resize/rotation intercept in useDomEditSession. When
off, dragging GSAP elements falls through to the standard CSS path
instead of committing via script mutation.

Manual dragging (STUDIO_PREVIEW_MANUAL_EDITING_ENABLED) remains on.

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

@@ -25,6 +25,18 @@ describe("manual editing availability", () => {
     expect(availability.STUDIO_MOTION_PANEL_ENABLED).toBe(false);
   });
 
+  it("disables GSAP drag intercept by default", async () => {
+    const availability = await loadAvailabilityWithEnv({});
+    expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(false);
+  });
+
+  it("enables GSAP drag intercept when env var is set", async () => {
+    const availability = await loadAvailabilityWithEnv({
+      VITE_STUDIO_ENABLE_GSAP_DRAG_INTERCEPT: "true",
+    });
+    expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(true);
+  });
+
   it("disables preview selection when the inspector panel flag is explicitly off", async () => {
     const availability = await loadAvailabilityWithEnv({
       VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "0",

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

@@ -47,6 +47,12 @@ export const STUDIO_PREVIEW_MANUAL_EDITING_ENABLED = resolveStudioBooleanEnvFlag
   true,
 );
 
+export const STUDIO_GSAP_DRAG_INTERCEPT_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_GSAP_DRAG_INTERCEPT"],
+  false,
+);
+
 export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   [STUDIO_INSPECTOR_PANELS_ENV, "VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],

packages/studio/src/hooks/useDomEditSession.ts

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
-import { STUDIO_GSAP_PANEL_ENABLED } from "../components/editor/manualEditingAvailability";
+import {
+  STUDIO_GSAP_DRAG_INTERCEPT_ENABLED,
+  STUDIO_GSAP_PANEL_ENABLED,
+} from "../components/editor/manualEditingAvailability";
 import { type DomEditSelection } from "../components/editor/domEditing";
 import { useDomEditPreviewSync } from "./useDomEditPreviewSync";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
@@ -326,7 +329,7 @@ export function useDomEditSession({
   // GSAP-aware: intercept offset/resize/rotation to commit via script mutation when animated.
   const handleGsapAwarePathOffsetCommit = useCallback(
     async (selection: DomEditSelection, next: { x: number; y: number }) => {
-      if (gsapCommitMutation) {
+      if (STUDIO_GSAP_DRAG_INTERCEPT_ENABLED && gsapCommitMutation) {
         const handled = await tryGsapDragIntercept(
           selection,
           next,
@@ -372,7 +375,7 @@ export function useDomEditSession({
 
   const handleGsapAwareBoxSizeCommit = useCallback(
     async (selection: DomEditSelection, next: { width: number; height: number }) => {
-      if (gsapCommitMutation) {
+      if (STUDIO_GSAP_DRAG_INTERCEPT_ENABLED && gsapCommitMutation) {
         const handled = await tryGsapResizeIntercept(
           selection,
           next,
@@ -396,7 +399,7 @@ export function useDomEditSession({
 
   const handleGsapAwareRotationCommit = useCallback(
     async (selection: DomEditSelection, next: { angle: number }) => {
-      if (gsapCommitMutation) {
+      if (STUDIO_GSAP_DRAG_INTERCEPT_ENABLED && gsapCommitMutation) {
         const handled = await tryGsapRotationIntercept(
           selection,
           next.angle,