Changes

src/components/ViewerControls.tsx

@@ -1,10 +1,10 @@
-import { Eye, Grid3X3 } from 'lucide-react';
+import { Eye, Grid3X3, Ruler, Trash2 } from 'lucide-react';
 import { Slider } from '@/components/ui/slider';
 import { Button } from '@/components/ui/button';
 import { useModelStore } from '@/stores/useModelStore';
 
 export function ViewerControls() {
-  const { opacity, setOpacity, renderMode, setRenderMode } = useModelStore();
+  const { opacity, setOpacity, renderMode, setRenderMode, measureMode, setMeasureMode, measurements, clearMeasurements, measurePoints } = useModelStore();
 
   return (
     <div className="absolute bottom-4 left-4 z-10 flex items-end gap-3">
@@ -38,6 +38,37 @@ export function ViewerControls() {
           {renderMode === 'wireframe' ? 'Wireframe' : 'Sólido'}
         </span>
       </Button>
+
+      {/* Measure tool */}
+      <div className="flex items-end gap-1.5">
+        <Button
+          variant={measureMode ? 'default' : 'outline'}
+          size="sm"
+          className="gap-2 h-9"
+          onClick={() => setMeasureMode(!measureMode)}
+        >
+          <Ruler className="h-3.5 w-3.5" />
+          <span className="font-mono text-xs">
+            {measureMode
+              ? measurePoints.length === 0
+                ? 'Ponto A…'
+                : 'Ponto B…'
+              : 'Medir'}
+          </span>
+        </Button>
+
+        {measurements.length > 0 && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9"
+            onClick={clearMeasurements}
+            title="Limpar medições"
+          >
+            <Trash2 className="h-3.5 w-3.5 text-destructive" />
+          </Button>
+        )}
+      </div>
     </div>
   );
 }