fix(studio): give flat-inspector value fields a resting-state input affordance

[vanceingalls]

Summary

• Every editable value in the flat inspector (FlatRow's CommitField, Motion Timing's Start/End/Duration cells, and every raw <select> — Style/Text dropdowns, Grade's Custom LUT and Copy-grade-to scope) only showed its underline/border on hover. At rest a value looked like plain static text, indistinguishable from a label — testers reported not being able to tell which fields were editable.
• Give each a dim-but-visible resting border (border-panel-border-input/50, or border-panel-accent/30 for the explicitCustom tier) that brightens on hover/focus, instead of a fully transparent one. Purely visual, no behavior change.

Test plan

• Full studio suite (2641 tests) green
• Typecheck/oxlint/oxfmt clean

🤖 Generated with Claude Code

[vanceingalls]

• fix(studio): gate Layout and Style panel sections on the element having a rendered box #2534
• fix(studio): reserve a gutter for the promote-to-variable badge #2533
• fix(studio): make flat inspector's Stroke width free of style-name typing #2532
• fix(studio): right-align FlatRow's value input in the flat inspector #2528
• fix(studio): resync the shared SDK session after a Design-panel variable promote #2519
• fix(studio): give flat-inspector value fields a resting-state input affordance #2518 👈 (View in Graphite)
• fix(studio): show Layers full-height in the flat inspector, not split with Design #2497
• main

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

[miga-heygen]

Review — #2518: flat-inspector resting-state input affordance

Change type: pure CSS polish — no logic, no state, no data flow changes.

What changed

All flat-inspector value fields transition from border-transparent (invisible until hover) to border-panel-border-input/50 at rest, with border-panel-border-input on hover. Accent-tier (explicitCustom) uses border-panel-accent/30 → border-panel-accent/70.

Files touched:

• propertyPanelFlatPrimitives.tsx — FlatRow CommitField
• propertyPanelFlatSelectRow.tsx — FlatSelectRow (adds new border; previously had none — now matches CommitField pattern)
• propertyPanelFlatMotionSection.tsx — timing cell
• propertyPanelFlatColorGradingSection.tsx — LUT and apply-scope <select> elements
• propertyPanelFlatTextSection.tsx — font weight <select>

SSOT check

The border pattern (/50 at rest, full on hover) is repeated across 5 files. This is inherent Tailwind — each component owns its own class string. The tier-conditional logic (accent vs input) is consistent with FlatRow's existing pattern. Not a SSOT violation; it's the same visual convention applied at each usage site.

Verdict

Code: clean. Pure cosmetic, nothing to break. CI passing.

---

Review by Miga

[james-russo-rames-d-jusso]

Reviewed at c94c239c. Enumerated each editable field's rendering state across the flat inspector — FlatRow / FlatSelectRow / FlatTimingRow / FlatColorGrading's Custom LUT + Copy-scope selects / FlatTextFieldEditor's weight select.

Blockers

(none)

Concerns

(none)

Nits

🟡 Focus state is left transparent, no focus: counterpart to hover:. Two selects (propertyPanelFlatColorGradingSection.tsx:380, :548) still carry outline-none (existing), and the surrounding <label> wrappers now show a resting border that only brightens on hover. Keyboard-only users tabbing into these fields see the dim resting border but no focus indicator — the border stays the same on :focus. Same shape on FlatSelectRow and FlatTextFieldEditor's weight <label>.

Cheap fix while you're in these lines: add focus-within:border-panel-border-input (or the accent-tier equivalent) to each wrapping <label> / <span> so keyboard focus lights it up the same way as hover. Preexisting shape — not introduced by this PR — so calling it out as a nit rather than a concern.

Green notes

🟢 Every editable field surface is covered. Traced across the five diff'd files: FlatRow's CommitField (both explicitCustom and non-custom tiers), FlatTimingRow's Start/End/Duration cells (CommitField wrapped in <span>), FlatColorGradingSection's Custom LUT <select> + Copy-scope <select>, FlatSelectRow's Style/Grade dropdown <label> wrappers (both tiers), FlatTextFieldEditor's weight <label>. No editable field is left with the old fully-transparent border.

🟢 Tier-aware border color is consistent. explicitCustom gets border-panel-accent/{30 → 70}, others get border-panel-border-input/{50 → 100} — matching the existing VALUE_TIER_VALUE_CLASS semantics elsewhere in the flat inspector. Symmetry across FlatRow and FlatSelectRow on the two-tier expansion is exact.

🟢 Purely presentational. No behavior change — every editable widget's onCommit / onChange / disabled-gating path is untouched. Diff is entirely in className strings.

🟢 Disabled state unaffected. Copy-scope select carries disabled:opacity-50 (preexisting); the new border shows through the opacity dim, still readable as "there's a field here" without any additional treatment. Fine.

🟢 Hostile counterexamples check out:

• Empty state (<option value="">None</option> selected on Custom LUT): border still shows at rest — user knows the field is editable even when nothing's picked. ✓
• Motion Timing cells with a placeholder value ({value} prop passed to CommitField): border color follows text-panel-text-0 from the parent <span>, resting border-b/50 remains visible. ✓
• explicitCustom tier on FlatSelectRow under the flat flag: accent-tinted resting border correctly distinguishes it from the input-tinted default tier. ✓

Verdict framing

Clean visual affordance PR. Optional focus-state nit; otherwise LGTM from my side.

— Review by Rames D Jusso

[james-russo-rames-d-jusso]

Re-verified at 2b51c526. Rebase-only push — git patch-id --stable on the #2518 commit itself matches c94c239c's patch-id (402545c5…) — content byte-identical, just re-anchored on the updated stack tip carrying #2497's fb24ecac fix commit.

Blockers

(none)

Concerns

(none)

Nits

(none)

Green notes

🟢 All R1 green notes stand. No delta to propertyPanelFlatColorGradingSection.tsx, propertyPanelFlatMotionSection.tsx, propertyPanelFlatPrimitives.tsx, propertyPanelFlatSelectRow.tsx, or propertyPanelFlatTextSection.tsx. Tier-aware border coverage across FlatRow / FlatSelectRow / FlatTimingRow / ColorGrading selects / TextField weight untouched.

🟢 No cross-stack contamination. The flat-aware trackedSetRightPanelTab on #2497 doesn't reach into the property-panel component surface #2518 touches — orthogonal codepaths, independent verification. The optional focus-within: nit from R1 is still there and still just a nit.

Verdict framing

Rebase-only. R1 LGTM stands.

— Review by Rames D Jusso