feat(studio): gate flat inspector redesign - #2394
Closed
vanceingalls wants to merge 77 commits into
Closed
Conversation
…ld, TextAreaField
…AT_INSPECTOR_ENABLED Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…eading in multi-field fallback The flat inspector's Text FlatGroup rendered unconditionally, showing an empty "Text" header for non-text elements (image, video, etc). Gate it on isTextEditableSelection(element) so it disappears entirely when there's no text to edit. Also, the legacy multi-field TextSection (used as a fallback when an element has 2+ text fields) rendered its own internal "Text" heading nested inside the new flat Text FlatGroup, producing a doubled "Text" heading. Add a hideOwnHeading prop to TextSection (default false, so its other — legacy, non-flat — call site is unaffected) and pass it from FlatTextSection's fallback path.
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>
Review of the pin-aware group list refactor flagged the test name claiming the group "closes" on unpin — it doesn't assert that, and structurally the group re-opens (togglePin never touches openGroupId). Retitled to describe only the return-to-stack behavior actually tested. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Originated layout, no design mock exists — flag for design review. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Review proved the existing test didn't catch a broken stopPropagation by temporarily removing it and confirming the suite still passed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
FlatTextSection's multi-field branch (textFields.length > 1) now renders FlatTextLayerList (Task 5) + the existing single-field FlatTextFieldEditor for the active field, tracked via new local activeFieldKey state that resyncs (useEffect) when the active field disappears from props. This retires the legacy TextSection delegation entirely for that case; the TextSection import is removed from propertyPanelFlatTextSection.tsx since nothing else in the file referenced it. Also updates propertyPanelSections.test.tsx and PropertyPanel.test.tsx, which exercised/documented the old multi-field-falls-back-to-legacy- TextSection behavior in comments and test titles — reworded to describe the new flat path (assertions were already compatible and still pass). Flag for reviewer: hideOwnHeading on the legacy TextSection component (propertyPanelSections.tsx) was added in an earlier plan specifically for this now-removed call site. It has no remaining consumer after this task lands (PropertyPanel.tsx's legacy caller doesn't pass it). Left in place per brief instruction — not deleting unilaterally, since that's a scope decision for whoever reviews this task. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The flat inspector rendered its new Style/Grade groups AND the legacy ColorGradingSection/StyleSections components a second time below them, visibly doubling every control. Remove the now-redundant legacy render call sites (and their now-unused imports) from PropertyPanelFlat.tsx; those components stay intact for the legacy (flag-off) PropertyPanel.
…ail in flat Grade
…ofocus in flat Text Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Collapsed group headers render in fixed, non-scrolling document flow above and below the open group; only the open group's own content scrolls, in a dedicated region. Also fixes the flat inspector footer's missing background. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds a fast (120ms) CSS entrance animation for flat inspector accordion group headers/body, gated to the group actually toggling (not derived from remounting alone) to avoid a Chromium reflow quirk that otherwise replays the animation on untouched collapsed siblings.
The track's visible line was only 2px tall, and pointerdown was bound directly to that thin element, making it hard to grab. The hit area is now 20px tall (a wrapping div) with the visible line rendered as a thin decorative child, centered inside it — the ratio math only reads left/width so click accuracy is unaffected. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Only onPointerDown was wired, so dragging the knob/track only ever committed the initial click position — nothing tracked the pointer after that. Uses the Pointer Capture API (setPointerCapture on pointerdown, onPointerMove while captured, release on pointerup) so the value follows the cursor continuously during a drag, matching how the legacy native <input type="range"> control behaves for free. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
A pure debounce resets its timer on every pointermove, so a real drag (events faster than 40ms apart) never commits until the pointer pauses or lifts — killing live preview updates mid-drag. Throttle with a leading-edge commit + trailing flush instead.
Add panel.bg-inset token (#121214) and inset shadow to open-group body for visual separation from the header row.
vanceingalls
force-pushed
the
07-13-feat_studio_legacy_inspector_fallback
branch
from
July 14, 2026 03:14
13a8c30 to
70f0d1e
Compare
vanceingalls
changed the title
vanceingalls
force-pushed
the
07-13-feat_studio_legacy_inspector_fallback
branch
from
July 14, 2026 03:24
70f0d1e to
c8e293a
Compare
vanceingalls
force-pushed
the
07-13-style_studio_distinguish_open-section_body_from_header_background
branch
2 times, most recently
from
July 14, 2026 23:00
cdd5083 to
127b8e4
Compare
Base automatically changed from
07-13-style_studio_distinguish_open-section_body_from_header_background
to
main
July 14, 2026 23:10
Collaborator
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
2 participants
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.
Summary
VITE_STUDIO_FLAT_INSPECTOR_ENABLED=trueValidation
bun run --cwd packages/studio test -- src/components/editor/manualEditingAvailability.test.tsoxfmt --check(changed files)oxlint(changed files)