feat(studio): MotionPathPlugin arc motion + design panel redesign

[miguel-heygen]

Summary

• Integrate GSAP MotionPathPlugin for arc/curved motion between keyframe positions
• Full design panel visual redesign with instrument-panel aesthetic
• Runtime auto-discovery of GSAP-animated elements for timeline
• Export button in header + redesigned render controls

MotionPathPlugin Arc Motion

• Lift MotionPathPlugin validation ban + conditional CDN loading
• ArcPathConfig types + parser recognition (waypoints, control points, curviness, autoRotate)
• AST mutation functions for setting/updating/removing arc paths
• Studio API mutation routes (set-arc-path, update-arc-segment, remove-arc-path)
• Design panel controls: toggle, per-segment curviness sliders, auto-rotate
• SVG MotionPathOverlay component for visual path rendering
• Runtime MotionPathPlugin registration + soft reload support
• Add-to-basket arc animation demo composition

Runtime Timeline Discovery

• Auto-stamp data-start/data-duration on GSAP-targeted elements
• Elements start at t=0 spanning full composition duration
• Synthesize keyframe diamonds from flat tweens (not just keyframes: {} format)

Design Panel Redesign

• panel-* color tokens in Tailwind config
• Teal #2DD4BF unified accent (replaces 4 inconsistent colors)
• Title-case bold section headers (Figma UI3 pattern)
• Borderless bg-panel-input fields with teal focus ring
• 2px slider tracks, 28x16px toggles, 6px input radius
• Collapsed sections with "+" icon
• Text section collapsed by default
• Remove card wrapper from text field sections

Layers & Renders Panel

• Layers panel uses panel-* tokens
• Render controls: clean 2×2 grid (Format, Resolution, Frame rate, Quality)
• Export button in header navigates to Renders tab
• Format help tooltip restored
• SSR externals broadened for render route

Test plan

• Select element with keyframes → Arc Motion toggle appears in animation card
• Enable arc → curviness sliders show per-segment
• Timeline shows individual GSAP-animated elements with diamonds
• Design panel uses teal accent throughout
• Section headers are title-case bold
• Export button in header opens Renders tab
• Render controls show 2×2 labeled grid
• Layers panel uses panel-* tokens

[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): gesture-to-keyframes recording #1256
• feat(studio): MotionPathPlugin arc motion + design panel redesign #1232 👈 (View in Graphite)
• fix(studio): keyframe stability + modular border-radius editor #1217
• main

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