feat(studio): design panel, timeline polish, feature flag [6/6]

[miguel-heygen]

Summary

Property panel keyframe-aware editing. clip-path + filter UI. AnimationCard string props with presets. Timeline 48px tracks, diamond sizing, 0.1% precision. Feature flag defaults false.

Part 6 of 6 — final integration. Depends on PR 5.

Test plan

• Design panel X/Y edits update keyframes
• clip-path and filter editable via presets
• Flag off → no keyframe UI

[miguel-heygen]

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

Final integration PR. +800/-77 across 20 files. The 77 deletions are where the most regression risk lives — they touch existing design-panel code. Feature flag defaulting false is the right safety net but doesn't substitute for verifying the flag-OFF path.

Critical — flag-OFF path regression check:

With the feature flag default-off, every change in this PR should be either:

1. Behind the flag — code path that only executes when flag === true.
2. Refactor-neutral — touches existing code but produces identical output when flag is off.

The 20 files + 77 deletions makes (2) hard to eyeball. The PR body's test plan ("Flag off → no keyframe UI") covers UI visibility but not behavior — for example, do the existing "Restore defaults" / drag / property-edit paths still produce the exact same script output with the flag off?

I'd want at minimum one test that:

• Sets flag = false.
• Performs the prior workflows (drag, color change, font change, restore defaults).
• Asserts the resulting script.txt byte-equals the pre-PR output for the same input sequence.

If that's not there, this PR is "trust me bro" on the flag-OFF path.

Flag naming + storage:

What's the flag called? Where does it live (env var, localStorage, server-side)? Two checks:

• Name should be hyperframes_keyframes_v1 or similar versioned slug so a future v2 can coexist.
• Default-off in prod explicitly — if it's a localStorage flag, an early-adopter who toggled it on will keep that state across releases. Confirm the storage layer can't accidentally persist a user-toggle into other users' sessions.

Timeline polish — 48px tracks:

Verify this matches existing visual-density expectations. If older Studio sessions render 32px or 40px tracks, the change shifts vertical positions of every clip element. With keyframe diamonds added (from #1170), the layout system has new pressure. Worth a screenshot diff verification.

0.1% precision on diamond drag:

Reasonable for fine control. But: the parser stores percentages as Number.parseFloat(pctMatch[1]!) from a regex /^(\d+(?:\.\d+)?)%$/ (in #1167). A 0.1% drag at percentage 33.3 produces 33.3% — the regex accepts decimals so round-trip is safe. Good.

But — the mutation functions in #1167 use percentage exact-match (existingIdx !== -1). At 0.1% drag granularity, the user can drag from 33.3% to 33.4% and end up with two adjacent keyframes the parser treats as distinct (because 33.3 !== 33.4). Likely intended, but worth a note in the keyframe-edit UX: "drag with no Shift key snaps to 0.1%; with Shift snaps to 1%" or similar to prevent unintentional clutter.

clip-path + filter UI:

Two new editable property classes. Verify the preset list is sane (no broken CSS values that GSAP would silently drop) and that custom-input validation is in place for the freeform string case.

Review by Jerrai (hyperframes specialist)