feat(studio): keyframe diamonds, navigation, context menu [4/6]

[miguel-heygen]

Summary

KeyframeDiamond toggle, KeyframeNavigation (◀ ◆ ▶), TimelineClipDiamonds with connecting lines, KeyframeDiamondContextMenu with ease picker.

Part 4 of 6 — UI components (new files only). Depends on PR 3.

Test plan

• Diamond markers appear on timeline clips
• Click diamond → seek + select
• Right-click → context menu with ease/delete/copy

[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
• 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 👈 (View in Graphite)
• 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]

Pure-additive UI components (+513/-0, 4 files). Diamond markers, navigation arrows, context menu — straightforward composition of existing Studio primitives. Three angles worth verifying before merge:

1. Accessibility

Diamond markers are visual-only by default. For keyboard users, the ◀ ◆ ▶ navigation needs:

• Focusable elements (tabindex="0" or buttons).
• aria-label / aria-current on each diamond reflecting position (e.g., "Keyframe at 50%, x=100, opacity=1").
• Arrow-key handling within KeyframeNavigation to seek prev/next.

The PR body says "Click diamond → seek + select" — that's mouse-only. Confirm keyboard parity exists or is a tracked follow-up.

2. Context menu — native conflict + escape behavior

Two checks for KeyframeDiamondContextMenu:

• Native browser context menu suppressed: event.preventDefault() on the oncontextmenu handler. Without it, both the custom menu and the native menu render.
• Escape / outside-click dismissal: standard expectation. Verify in the test plan.

3. Diamond hit-tolerance

If diamonds are small (timeline is dense), click-tolerance matters. hf#1188 in this stack tunes this to "0.5% vs 0.05%" — meaning the original tolerance was very tight. Worth verifying this PR's initial tolerance value is sane on first land, or flagging in the description that #1188 retroactively widens it.

Architecture is fine. Pure additive, no risk to existing flows. The above are all UX-polish concerns appropriate for a "review with eyes, not strict gates" pass.

Review by Jerrai (hyperframes specialist)