From 5b4b267a40b453dc1b2903ee4e35bcaa7d150e11 Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric@pascal.app>
Date: Thu, 9 Jul 2026 16:06:12 +0200
Subject: [PATCH] =?UTF-8?q?feat(editor):=20smart=20unit=20suffix=20?=
 =?UTF-8?q?=E2=80=94=20dim=20on=20focus,=20yield=20to=20explicit=20units?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/components/ui/controls/metric-control.tsx     | 11 ++++++++++-
 .../src/components/ui/controls/slider-control.tsx     | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/ui/controls/metric-control.tsx b/packages/editor/src/components/ui/controls/metric-control.tsx
index 9742c813c..e48e39880 100644
--- a/packages/editor/src/components/ui/controls/metric-control.tsx
+++ b/packages/editor/src/components/ui/controls/metric-control.tsx
@@ -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
diff --git a/packages/editor/src/components/ui/controls/slider-control.tsx b/packages/editor/src/components/ui/controls/slider-control.tsx
index c902cecd9..e46b56b37 100644
--- a/packages/editor/src/components/ui/controls/slider-control.tsx
+++ b/packages/editor/src/components/ui/controls/slider-control.tsx
@@ -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