feat(studio): runtime-synced design panel + 3D props + split polish

[miguel-heygen]

Summary

• Design panel Layout fields (X, Y, W, H, R) read GSAP-interpolated values from gsap.getProperty() at the current seek time — values update live when scrubbing
• 3D transform properties added to SUPPORTED_PROPS: z, rotationX, rotationY, rotationZ, perspective, transformOrigin
• Stronger clip selection border (full accent, glow shadow) and wider keyframe diamond tolerance (0.5% vs 0.05%)
• DOM selection syncs to timeline selectedElementId on cold-load URL restore
• Split restricted to media elements only (video/audio/img) — hidden for divs and compositions
• Phosphor Scissors icon replaces inline SVG

Stacked on #1172.

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

Top-of-stack polish + 3D props. +362/-58. The 3D property additions are the most interesting cross-stack change — they extend the keyframeable surface from 2D transforms into 3D space.

3D transform properties — z, rotationX/Y/Z, perspective, transformOrigin

Two cross-browser concerns:

1. perspective placement matters

perspective set on an element creates 3D context for its children, not itself. If a user sets perspective: 800 on an element and expects that element's own 3D rotation to depth-render, they'll see a flat result. The Studio UI should either:

• Auto-apply perspective to the parent when a 3D property is set on a child.
• OR document the rule clearly in the property-panel UI (e.g., "set perspective on the parent of this element").

Without one of these, users will silently get flat-looking 3D and not understand why.

2. transformOrigin interaction with GSAP xPercent / yPercent

GSAP's xPercent: -50 / yPercent: -50 (centering pattern) interacts with transformOrigin. If the SUPPORTED_PROPS set now includes both transformOrigin and the existing transform props, verify the property panel doesn't allow conflicting combinations (e.g., setting xPercent: -50 and transformOrigin: "top left" simultaneously without a warning).

gsap.getProperty() at current seek time — design panel sync

Reading interpolated values from the live runtime is the right approach. Two questions:

• Cost: getProperty() is cheap for a single element but called for every visible field on every scrub. With Layout (5 fields × multiple selected clips), this could be 20+ calls per scrub frame. Worth a memo with the scrub time as the dep so it batches per-frame.
• Stale during transition: between seek() and the next runtime sync, getProperty() returns pre-seek values. Verify the design panel reads happen after the runtime has applied the seek (likely via the runtime bridge from #1169's optimistic-update pipeline).

Clip selection border (full accent + glow shadow) + 0.5% diamond tolerance

Both are UX-polish tunings. The 0.5% diamond tolerance (vs the prior 0.05%) is a 10× widening — confirm this matches user-tested expectations and doesn't make adjacent diamonds in dense timelines confusable.

DOM selection syncs to timeline selectedElementId on cold-load URL restore

Important for shareable Studio URLs. Verify the sync handles the case where selectedElementId references a stale element (no longer in the DOM after a script edit). Silent no-select or fallback to first element is fine; uncaught error is not.

Phosphor Scissors icon — duplicates #1189

Both #1189 and this PR mention the Phosphor Scissors icon. Once the stack merges in order, the second one is a no-op. Just flagging that the icon import lives in two PRs of the same stack.

Review by Jerrai (hyperframes specialist)