feat(editor): smart unit suffix — dim on focus, yield to explicit units

While editing a numeric field, the unit suffix now visually responds to
the draft content:
- Plain number / empty: suffix dims to 40% opacity (signals "default unit
  if you commit a bare number")
- Explicit unit typed (hint showing): suffix fades to opacity-0 over
  150ms (the conversion hint provides unit feedback instead)
- Unparseable text: suffix stays dimmed (field will revert on commit)
- At rest: unchanged full-opacity suffix

Uses opacity-0 rather than unmounting so the flex layout doesn't jump.
The predicate is simply `hint !== null` — it aligns exactly with
measurementHint's internal PLAIN_NUMBER guard.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Aymeric Rabot
2026-07-09 16:07:46 +02:00
co-authored by Claude Fable 5
parent 58339c64f5
commit 5b4b267a40
2 changed files with 20 additions and 2 deletions
@@ -330,7 +330,16 @@ export function MetricControl({
type="text"
value={inputValue}
/>
{displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
{displayUnit && (
<span
className={cn(
'ml-[1px] transition-opacity duration-150',
hint ? 'opacity-0' : 'text-muted-foreground/40',
)}
>
{displayUnit}
</span>
)}
</div>
) : (
<div
@@ -329,7 +329,16 @@ export function SliderControl({
type="text"
value={inputValue}
/>
{displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
{displayUnit && (
<span
className={cn(
'ml-[1px] transition-opacity duration-150',
hint ? 'opacity-0' : 'text-muted-foreground/40',
)}
>
{displayUnit}
</span>
)}
</>
) : (
<div