feat(studio): flat inspector — Layout + Motion groups#2122
Open
vanceingalls wants to merge 11 commits into
Open
feat(studio): flat inspector — Layout + Motion groups#2122vanceingalls wants to merge 11 commits into
vanceingalls wants to merge 11 commits into
Conversation
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Thread the Layout-group values through PropertyPanel -> PropertyPanelFlat and add the third FlatGroup to the one-open/pin accordion (unconditional, matching legacy Layout). Default-open Layout when neither Text nor Style applies. Fix the Flex double-render: the legacy StyleSections still renders its own Flex Section, and the new flat Layout group renders its own LayoutFlexBlock. Add an additive optional hideFlex prop to StyleSections and pass it on the flat path so Flex renders exactly once (from the flat Layout group). Non-flat callers omit it and are unchanged. Extract the shared onLivePreviewProps closure into gsapLivePreview.ts (it was duplicated inline in the legacy path) so PropertyPanel.tsx stays within the 600-LOC studio gate. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… and Motion groups Whole-plan coherence review (Plan 3a Layout + Plan 3b Motion) found that Layout's keyframe gutter and Motion's Timing row independently derived an element's start/duration and disagreed whenever an element had animations but no explicit data-duration: Motion correctly inferred the range from the element's GSAP tweens, while Layout's keyframe gutter fell back to a naive `duration ?? 1`, so clicking a keyframe percentage in Layout could seek to a different absolute time than what Motion's Timing row displayed. Extract deriveElementTiming (propertyPanelFlatTimingDerivation.ts) as the single shared basis both paths now consume: FlatTimingRow (Motion) and PropertyPanelFlat's own elStart/elDuration (Layout's keyframe gutter and 3D Transform block). PropertyPanelFlat now recomputes this basis itself from its own element/gsapAnimations props instead of trusting the parent's naive value, so PropertyPanel.tsx (and its legacy non-flat panel) is untouched. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…basis in the flat Layout group Follow-up to 684ec4e: that fix corrected the seek target for Layout's keyframe gutter via deriveElementTiming, but currentPct — which drives KeyframeNavigation's diamond active/inactive state and prev/next arrow targeting — still used PropertyPanel's naive elStart=0/elDuration=1 basis. For an element with animations but no explicit data-duration, seeking to a keyframe's real absolute time no longer lit that keyframe's diamond as active, and the prev/next arrows targeted the wrong keyframes. Thread currentTime into PropertyPanelFlat (swapping the now-redundant currentPct prop 1-for-1, so PropertyPanel.tsx's line count is unchanged) and recompute currentPct there from the same deriveElementTiming basis already used for the seek fix. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This was referenced Jul 10, 2026
Collaborator
Author
|
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.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
This was referenced Jul 10, 2026
vanceingalls
changed the title
This was referenced Jul 10, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Third PR in a 6-PR stack for the flat inspector redesign (see #2120 for the foundation and full stack list). Adds the flat Layout group (X/Y/W/H/Angle geometry rows with keyframe gutters, Z-index, Flex, a wrapped 3D transform sub-view) and the flat Motion group (Timing row, effect-card list), each wired into the accordion, plus a cross-group fix reconciling their timing basis.
Stack: #2120 (Foundation+Text) → #2121 (Style) → #2122 (this) → #2123 (Media) → #2124 (Grade) → #2125 (Pinning + multi-field Text).
Why
Layout and Motion are the two groups most entangled with GSAP keyframe state — an element's timing (start/duration) has to agree between Layout's keyframe-seek gutter and Motion's Timing row, or keyframe diamonds and prev/next-arrow navigation land in the wrong place.
How
FlatLayoutSectioncomposes geometry/Z-index/Flex/3D-transform sub-blocks; the 3D transform view is the existing component nested in a new flat wrapper, not rebuilt.FlatMotionSectioncomposes a newFlatTimingRowwith the existing effect-card list (given a new flat collapsed-header variant).data-duration(Layout used a naiveduration ?? 1, Motion correctly inferred from the GSAP tween). Fixed via a new sharedderiveElementTiminghelper both groups now read from, plus a follow-up fix threading the corrected basis into the keyframe diamond active-state/arrow-navigation calculation.STUDIO_FLAT_INSPECTOR_ENABLED(default off).Test plan
oxlint/oxfmt/fallowclean.