Skip to content

fix(studio): keyframe stability + modular border-radius editor#1217

Open
miguel-heygen wants to merge 6 commits into
mainfrom
fix/keyframe-stability-border-radius
Open

fix(studio): keyframe stability + modular border-radius editor#1217
miguel-heygen wants to merge 6 commits into
mainfrom
fix/keyframe-stability-border-radius

Conversation

@miguel-heygen
Copy link
Copy Markdown
Collaborator

Summary

  • Fix code editor not refreshing after GSAP script mutations (stale content until page refresh)
  • Fix keyframe cache not clearing on animation/keyframe deletion (orphaned timeline diamonds)
  • Fix pre-existing typecheck error (handleGsapMaterializeKeyframes optional in TimelineToolbar)
  • Add Figma-style visual border-radius editor with per-corner display and link/unlink toggle
  • Wire GSAP runtime-interpolated border-radius values to the corner picker

Test plan

  • Select element with GSAP animation, add keyframe via design panel diamond → code tab updates immediately
  • Delete keyframe via context menu → timeline diamond disappears without refresh
  • Delete all keyframes → Animation card resets, all diamonds gone
  • Select blob in 01-liquid-blob → Radius section shows per-corner values
  • Scrub playhead on GSAP-animated borderRadius element → corner values update in real-time
  • Toggle link/unlink in corner picker → uniform vs per-corner editing works

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 5, 2026

Fallow audit report

Found 22 findings.

Duplication (11)
Severity Rule Location Description
minor fallow/code-duplication packages/studio/src/components/editor/MotionPanel.tsx:173 Code clone group 1 (18 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/components/editor/PropertyPanel.tsx:259 Code clone group 1 (18 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/contexts/DomEditContext.tsx:38 Code clone group 2 (40 lines, 3 instances)
minor fallow/code-duplication packages/studio/src/contexts/DomEditContext.tsx:107 Code clone group 2 (40 lines, 3 instances)
minor fallow/code-duplication packages/studio/src/contexts/FileManagerContext.tsx:54 Code clone group 3 (44 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useDomEditSession.ts:573 Code clone group 2 (40 lines, 3 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:87 Code clone group 4 (8 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:117 Code clone group 4 (8 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:296 Code clone group 5 (31 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:382 Code clone group 5 (31 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:450 Code clone group 3 (44 lines, 2 instances)
Health (11)
Severity Rule Location Description
major fallow/high-crap-score packages/studio/src/components/StudioHeader.tsx:143 'StudioHeader' has CRAP score 90.0 (threshold: 30.0, cyclomatic 9)
minor fallow/high-crap-score packages/studio/src/components/editor/PropertyPanel.tsx:128 'commitManualOffset' has CRAP score 31.6 (threshold: 30.0, cyclomatic 10)
critical fallow/high-crap-score packages/studio/src/components/editor/PropertyPanel.tsx:185 'gsapRuntimeValues' has CRAP score 106.4 (threshold: 30.0, cyclomatic 20)
minor fallow/high-crap-score packages/studio/src/components/editor/PropertyPanel.tsx:220 'gsapBorderRadius' has CRAP score 37.1 (threshold: 30.0, cyclomatic 11)
critical fallow/high-crap-score packages/studio/src/components/editor/propertyPanelStyleSections.tsx:38 'StyleSections' has CRAP score 62.5 (threshold: 30.0, cyclomatic 53)
major fallow/high-crap-score packages/studio/src/hooks/useFileManager.ts:69 '<arrow>' has CRAP score 56.0 (threshold: 30.0, cyclomatic 7)
major fallow/high-crap-score packages/studio/src/hooks/useFileManager.ts:194 'openSourceForSelection' has CRAP score 56.0 (threshold: 30.0, cyclomatic 7)
critical fallow/high-crap-score packages/studio/src/hooks/useFileManager.ts:237 'uploadProjectFiles' has CRAP score 182.0 (threshold: 30.0, cyclomatic 13)
major fallow/high-crap-score packages/studio/src/hooks/useGsapTweenCache.ts:123 'animations' has CRAP score 49.5 (threshold: 30.0, cyclomatic 13)
minor fallow/high-crap-score packages/studio/src/hooks/useGsapTweenCache.ts:225 '<arrow>' has CRAP score 31.6 (threshold: 30.0, cyclomatic 10)
minor fallow/high-crap-score packages/studio/src/hooks/useGsapTweenCache.ts:254 'tryRuntimeScan' has CRAP score 31.6 (threshold: 30.0, cyclomatic 10)

Generated by fallow.

Copy link
Copy Markdown
Collaborator Author

miguel-heygen commented Jun 6, 2026

…ache on deletion

Two stability fixes for the keyframe editing flow:

1. Code editor refreshes after GSAP script mutations via onFileContentChanged
   callback that syncs result.after to editingFile state.

2. Keyframe cache clears on deletion: commitMutation removes cache entries for
   elements without keyframes, usePopulateKeyframeCacheForFile clears stale
   entries before repopulating.

Also fixes pre-existing typecheck: handleGsapMaterializeKeyframes optional
in TimelineToolbar DomEditSessionSlice.
Add border-top-left-radius, border-top-right-radius,
border-bottom-right-radius, border-bottom-left-radius to
CURATED_STYLE_PROPERTIES. The Radius section auto-detects
uniform vs per-corner mode: single slider when all corners
match, 4 MetricFields (TL/TR/BR/BL) when they differ.
Figma-style SVG corner picker showing a rounded rectangle preview
with 4 corner handles. Link/unlink toggle switches between uniform
mode (single field) and per-corner mode (4 fields TL/TR/BL/BR).
When GSAP animates borderRadius, read the per-corner computed styles
from the iframe element and pass them to the BorderRadiusEditor. The
design panel now shows interpolated border-radius values as the
playhead moves through GSAP keyframes.
When the code editor saves changes (via refreshKey), the GSAP keyframe
cache was not invalidated because code-tab edits bypass commitMutation.
Watch refreshKey changes and bump gsapCacheVersion so timeline diamonds
clear when keyframes are manually removed in the code editor.
@miguel-heygen miguel-heygen force-pushed the fix/keyframe-stability-border-radius branch from 84d75b7 to 60573ad Compare June 6, 2026 02:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant