@hyperframes/studio 0.7.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -45,9 +45,9 @@
     "dompurify": "^3.2.4",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.0",
-    "@hyperframes/player": "0.7.0",
-    "@hyperframes/sdk": "0.7.0"
+    "@hyperframes/core": "0.7.1",
+    "@hyperframes/player": "0.7.1",
+    "@hyperframes/sdk": "0.7.1"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -62,7 +62,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.0"
+    "@hyperframes/producer": "0.7.1"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/MotionPathOverlay.tsx

@@ -254,7 +254,7 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
     ref: MotionNodeRef,
   ) => {
     if (!interactive) return;
-    if (e.button !== 0) return; // primary button only — right-click is the context menu
+    if (e.button !== 0) return;
     e.stopPropagation();
     (e.target as Element).setPointerCapture(e.pointerId);
     dragRef.current = {

package/src/components/editor/manualEditsDom.ts

@@ -536,7 +536,6 @@ export function applyStudioRotationDraft(element: HTMLElement, rotation: { angle
 }
 
 /* ── Seek reapply (position + motion) ────────────────────────────── */
-
 function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
   const ctor = doc.defaultView?.HTMLElement;
   if (!ctor) return [];
@@ -584,7 +583,6 @@ function reapplyBoxSizes(doc: Document): void {
     }
   }
 }
-
 function reapplyRotations(doc: Document): void {
   for (const el of queryStudioElements(doc, STUDIO_ROTATION_ATTR)) {
     const angle = Number.parseFloat(el.style.getPropertyValue(STUDIO_ROTATION_PROP));

package/src/hooks/useDomEditPreviewSync.ts

@@ -28,6 +28,7 @@ interface UseDomEditPreviewSyncParams {
   >;
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
   getSidebarTab?: () => SidebarTab;
+  gsapCacheVersion?: number;
 }
 
 export function useDomEditPreviewSync({
@@ -43,6 +44,7 @@ export function useDomEditPreviewSync({
   applyStudioManualEditsToPreviewRef,
   openSourceForSelection,
   getSidebarTab,
+  gsapCacheVersion,
 }: UseDomEditPreviewSyncParams): void {
   // Sync selection from preview document on load / refresh
   // eslint-disable-next-line no-restricted-syntax
@@ -102,6 +104,7 @@ export function useDomEditPreviewSync({
     refreshPreviewDocumentVersion,
     syncPreviewHistoryHotkey,
     applyStudioManualEditsToPreviewRef,
+    gsapCacheVersion,
   ]);
 
   // Auto-reveal source when an element is selected while the Code tab is active.

package/src/hooks/useDomEditWiring.ts

@@ -242,6 +242,7 @@ export function useDomEditWiring({
     applyStudioManualEditsToPreviewRef,
     openSourceForSelection,
     getSidebarTab,
+    gsapCacheVersion,
   });
 
   return {

package/src/hooks/useGsapTweenCache.ts

@@ -137,7 +137,8 @@ export function useGsapAnimationsForElement(
   const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    const fetchKey = `${projectId}:${sourceFile}:${version}`;
+    const targetKey = target?.id ?? target?.selector ?? "";
+    const fetchKey = `${projectId}:${sourceFile}:${version}:${targetKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
 
@@ -366,9 +367,7 @@ export function usePopulateKeyframeCacheForFile(
 
     const sf = sourceFile;
     fetchParsedAnimations(projectId, sf).then((parsed) => {
-      if (!parsed) {
-        return;
-      }
+      if (!parsed) return;
       const { setKeyframeCache } = usePlayerStore.getState();
       clearKeyframeCacheForFile(sf);
       const { elements } = usePlayerStore.getState();
@@ -376,13 +375,9 @@ export function usePopulateKeyframeCacheForFile(
       for (const anim of parsed.animations) {
         const id = extractIdFromSelector(anim.targetSelector);
         if (!id) continue;
-        if (anim.hasUnresolvedKeyframes) {
-          continue;
-        }
+        if (anim.hasUnresolvedKeyframes) continue;
         const kfData = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
-        if (!kfData) {
-          continue;
-        }
+        if (!kfData) continue;
         const tweenPos =
           anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
         const tweenDur = anim.duration ?? 1;