Merge pull request #479 from pascalorg/feat/smart-unit-suffix

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

Author: Aymericr

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

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