🐛 fix: corrigido bug de resize azul e alça cortada nas camadas do canvas

public/app.js

@@ -8366,6 +8366,9 @@ document.addEventListener('DOMContentLoaded', () => {
       dragStartLeft = ((itemRect.left - parentRect.left) / parentRect.width) * 100;
       dragStartTop = ((itemRect.top - parentRect.top) / parentRect.height) * 100;
 
+      // Previne o highlight azul do browser durante o drag
+      document.body.style.userSelect = 'none';
+      
       document.addEventListener('mousemove', handleCanvasDrag);
       document.addEventListener('mouseup', stopCanvasDrag);
     });
@@ -8405,6 +8408,12 @@ document.addEventListener('DOMContentLoaded', () => {
         e.stopPropagation();
         e.preventDefault();
 
+        // Garante que o item clicado seja o selecionado
+        document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
+        selectedCanvasItem = item;
+        item.classList.add('active-item');
+        updateToolbarForSelected();
+
         isResizingCanvas = true;
         dragStartX = e.clientX;
         dragStartY = e.clientY;
@@ -8415,6 +8424,9 @@ document.addEventListener('DOMContentLoaded', () => {
         dragStartWidth = (itemRect.width / parentRect.width) * 100;
         dragStartHeight = (itemRect.height / parentRect.height) * 100;
 
+        // Previne seleção de texto durante o drag de resize
+        document.body.style.userSelect = 'none';
+
         document.addEventListener('mousemove', handleCanvasResize);
         document.addEventListener('mouseup', stopCanvasResize);
       });
@@ -8424,6 +8436,11 @@ document.addEventListener('DOMContentLoaded', () => {
         e.stopPropagation();
         e.preventDefault();
 
+        document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
+        selectedCanvasItem = item;
+        item.classList.add('active-item');
+        updateToolbarForSelected();
+
         isResizingCanvas = true;
         const touch = e.touches[0];
         dragStartX = touch.clientX;
@@ -8493,6 +8510,7 @@ document.addEventListener('DOMContentLoaded', () => {
   
   function stopCanvasDrag() {
     isDraggingCanvas = false;
+    document.body.style.userSelect = ''; // Restaura seleção de texto
     document.removeEventListener('mousemove', handleCanvasDrag);
     document.removeEventListener('mouseup', stopCanvasDrag);
     document.removeEventListener('touchmove', handleCanvasTouchDrag);
@@ -8551,6 +8569,7 @@ document.addEventListener('DOMContentLoaded', () => {
   
   function stopCanvasResize() {
     isResizingCanvas = false;
+    document.body.style.userSelect = ''; // Restaura seleção de texto
     document.removeEventListener('mousemove', handleCanvasResize);
     document.removeEventListener('mouseup', stopCanvasResize);
     document.removeEventListener('touchmove', handleCanvasTouchResize);

public/style.css

@@ -3773,6 +3773,7 @@ code {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   user-select: text; /* Permite selecionar texto interno para edição */
+  overflow: visible !important; /* Garante que a alça de resize não seja cortada */
 }
 
 .canvas-item:hover {
@@ -3821,8 +3822,18 @@ code {
 .canvas-scene-layer {
   padding: 0 !important;
   background: transparent !important;
-  border-radius: 0 !important;
-  overflow: hidden;
+  border-radius: 4px !important;
+  overflow: visible !important; /* IMPORTANTE: permite que a alça de resize fique fora do item */
+}
+
+/* A imagem dentro da camada fica com overflow clipado no wrapper interno */
+.canvas-scene-layer img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  border-radius: 4px;
 }
 
 .canvas-scene-layer:hover {
@@ -3831,8 +3842,8 @@ code {
 }
 
 .canvas-scene-layer.active-item {
-  border: 2.5px solid #8b5cf6 !important;
-  box-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
+  border: 2px dashed #8b5cf6 !important;
+  box-shadow: 0 0 14px rgba(139, 92, 246, 0.4);
 }
 
 /* Animação dos dots de loading */