fix(studio): overlay jump, delete-all, split polish [9/10]

[miguel-heygen]

Summary

• Fix overlay bounding box jump: gsapAnimatesProperty guard prevents reapplyBoxSizes from overwriting GSAP-interpolated width/height
• Delete All Keyframes removes entire animation (handleGsapDeleteAnimation with fallback)
• Wire split through component chain (App → StudioPreviewArea → NLELayout → Timeline)
• Split restricted to media only (video/audio/img) — hidden for divs/compositions
• Clip context menu with onContextMenu prop

+175 LOC

[miguel-heygen]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(studio): runtime-synced design panel + 3D props + split polish #1188
• fix(studio): overlay jump, delete-all, split polish [9/10] #1191 👈 (View in Graphite)
• feat(studio): runtime-first dynamic keyframe system [8/10] #1190
• feat(studio): split clip at playhead for media elements [7/10] #1189
• feat(studio): design panel, timeline polish, feature flag [6/6] #1172
• feat(studio): keyframe hooks wiring — session, cache, toolbar [5/6] #1171
• feat(studio): keyframe diamonds, navigation, context menu [4/6] #1170
• feat(studio): GSAP runtime bridge + optimistic updates [3/6] #1169
• feat(core): spring physics solver + runtime fixes [2/6] #1168
• feat(core): GSAP keyframe parsing, mutations, and API routes [1/6] #1167
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[jrusso1020]

Polish + bugfix PR. +175/-40. Five concerns named in the body — let me verify each is correctly scoped:

1. gsapAnimatesProperty guard preventing reapplyBoxSizes overwrite

The mechanism is sound: when a GSAP tween interpolates width/height, the bounding-box reapply path must skip those properties. Two checks:

• Guard granularity: per-property, not per-element. If GSAP animates width but not height, reapplyBoxSizes should still set height. Verify the guard doesn't blanket-skip.
• Guard timing: must fire before the reapply, not after. A late guard reverts the GSAP-interpolated value.

2. Delete All Keyframes → handleGsapDeleteAnimation fallback

When "delete all keyframes" runs removeAllKeyframesFromScript from #1167, the function collapses to flat tween with the last keyframe's properties. So "delete all" actually means "convert to flat tween" — not "remove the entire animation".

The fallback to handleGsapDeleteAnimation extends this: if the user truly wants to remove the whole tween, the fallback path catches that intent. Verify:

• Trigger condition: when does handleGsapDeleteAnimation fire vs the keyframe-collapse path? Worth a comment in the code explaining the discriminator.
• Confirmation prompt: "delete all" is destructive at two different scales (drop keyframes vs drop the whole tween). User should know which one they're getting.

3. Wire split through component chain

App → StudioPreviewArea → NLELayout → Timeline. Verify prop-drilling didn't break a single intermediate (a missing prop at any layer is silent — TypeScript catches Required props, but optional ones can no-op).

4. Split restricted to media (video/audio/img) — hidden for divs/compositions

This is the client-side gate from my #1189 comment. Both PRs should be hardening together — confirm splitElementInHtml server-side also gates on the same element-type check.

5. Clip context menu onContextMenu prop

Verify it doesn't double-fire if a parent (Timeline / NLELayout) also has an onContextMenu handler. React events bubble; if the parent has a non-e.stopPropagation() handler, both menus could render.

Architecture is fine — five independent fixes, each bounded. None of them should affect the main keyframe flow. Test coverage would benefit from at least one "split on a tween-targeted div" test (should be hidden, but the negative-case test is good defense).

Review by Jerrai (hyperframes specialist)