Skip to content

feat(studio): flat inspector foundation + Text group#2120

Open
vanceingalls wants to merge 12 commits into
mainfrom
studio-flat-01-foundation-text
Open

feat(studio): flat inspector foundation + Text group#2120
vanceingalls wants to merge 12 commits into
mainfrom
studio-flat-01-foundation-text

Conversation

@vanceingalls

@vanceingalls vanceingalls commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator

What

First PR in a 6-PR stack migrating Studio's right-panel property inspector from an always-expanded stacked-sections layout to a "flat" one-open-at-a-time accordion. This PR lays the foundation: the STUDIO_FLAT_INSPECTOR_ENABLED feature flag, the accordion primitives (FlatRow, FlatSegmentedRow, FlatGroup, PinnedZoneDivider), the flat identity header/footer, and the first migrated group — Text.

Stack: #2120 (this) → #2121 (Style) → #2122 (Layout+Motion) → #2123 (Media) → #2124 (Grade) → #2125 (Pinning + multi-field Text).

Why

The legacy inspector renders every applicable section expanded at once, which gets unwieldy as an element accumulates properties across style/layout/motion/media/grade. The flat redesign shows one section at a time (plus pinned sections), matching a design handoff mock.

How

  • FlatGroup owns the one-open accordion state (openGroupId/onToggleOpen) and pin affordance (onTogglePin), styled per the design mock.
  • FlatTextSection is the first migrated group and the reference implementation every later group's task followed for the isOpen/onToggleOpen/onTogglePin/summary wiring pattern.
  • Includes a same-PR bugfix (found via live browser testing, not caught by any automated test): the Text FlatGroup was rendering unconditionally regardless of element type (empty for non-text elements), and the multi-field fallback doubled the "Text" heading. Fixed by gating on isTextEditableSelection and adding a hideOwnHeading prop to the legacy TextSection fallback.
  • Entirely gated behind STUDIO_FLAT_INSPECTOR_ENABLED (default off) — the legacy panel is untouched and remains the default for all users.

Test plan

  • Every primitive and the Text group have dedicated Vitest suites using real DOM events (click/pointerdown) with exact assertions, not shallow snapshots.
  • Manually verified in Studio via live browser testing against the design mock (this is what caught the bugfix above).
  • Full monorepo test suite green; oxlint/oxfmt clean; this repo's fallow complexity/duplication gate passes.
  • Unit tests added/updated
  • Manual testing performed
  • Documentation updated (not applicable — internal Studio UI behind an off-by-default flag)

vanceingalls and others added 12 commits July 9, 2026 11:52
…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.
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