refine(visual-edits): backdrop só no preview e label mostra valor do atributo

- Backdrop esmaecido deixa de cobrir a aplicação inteira: agora é
  posicionado e dimensionado pelo bounding rect do canvas do preview
  (data-ve-anchor). Header, editor e sidebar permanecem nítidos.
- Para fragmentos HTML sem atributo style, o label passa a exibir o
  VALOR do primeiro atributo (ex.: class='avatar' → "avatar") em vez
  do nome do atributo ("class"). Mais informativo e alinhado ao
  comportamento já existente para style (primeira propriedade CSS).

Author: claude

src/components/VisualEditsMenu.tsx

@@ -57,10 +57,13 @@ function htmlLabel(text: string): string {
   if (!tagMatch) return text;
   const tag = tagMatch[1];
   const rest = text.slice(tagMatch[0].length);
+  // style: primeira propriedade do CSS (ex.: "font-size")
   const styleMatch = /\bstyle\s*=\s*['"]\s*([a-zA-Z-]+)/.exec(rest);
   if (styleMatch) return styleMatch[1];
-  const attrMatch = /\s+([a-zA-Z][a-zA-Z0-9-]*)\s*=/.exec(rest);
-  if (attrMatch) return attrMatch[1];
+  // Demais atributos: retorna o VALOR (ex.: class='fade fade-1' → "fade fade-1"),
+  // não o nome do atributo, para refletir o conteúdo real do elemento.
+  const attrMatch = /\s+[a-zA-Z][a-zA-Z0-9-]*\s*=\s*['"]([^'"]+)['"]/.exec(rest);
+  if (attrMatch) return attrMatch[1].trim();
   return `<${tag}>`;
 }
 
@@ -79,7 +82,11 @@ const TRECHO_KEY = '__trecho__';
 
 export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
-  const [adjusted, setAdjusted] = useState<{ left: number; top: number } | null>(null);
+  const [adjusted, setAdjusted] = useState<{
+    left: number;
+    top: number;
+    anchor?: { left: number; top: number; width: number; height: number };
+  } | null>(null);
   const [activeKey, setActiveKey] = useState<string | null>(null);
 
   useEffect(() => {
@@ -97,11 +104,13 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
 
     let cx = menu.x;
     let cy = menu.y;
+    let anchorRect: { left: number; top: number; width: number; height: number } | undefined;
     const anchor = document.querySelector<HTMLElement>('[data-ve-anchor="preview-canvas"]');
     if (anchor) {
       const ar = anchor.getBoundingClientRect();
       cx = ar.left + ar.width / 2;
       cy = ar.top + ar.height / 2;
+      anchorRect = { left: ar.left, top: ar.top, width: ar.width, height: ar.height };
     }
 
     let left = cx - rect.width / 2;
@@ -110,7 +119,7 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
     if (top + rect.height > vh - VIEWPORT_PAD) top = vh - rect.height - VIEWPORT_PAD;
     if (left < VIEWPORT_PAD) left = VIEWPORT_PAD;
     if (top < VIEWPORT_PAD) top = VIEWPORT_PAD;
-    setAdjusted({ left, top });
+    setAdjusted({ left, top, anchor: anchorRect });
   }, [menu]);
 
   useEffect(() => {
@@ -138,16 +147,20 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
 
   if (!menu) return null;
 
-  // Backdrop z-[59], menu z-[60]
-  const backdropStyle: React.CSSProperties = {
-    position: 'fixed',
-    inset: 0,
-    zIndex: 59,
-    backgroundColor: 'rgba(0,0,0,0.35)',
-    backdropFilter: 'blur(1px)',
-    WebkitBackdropFilter: 'blur(1px)',
-    visibility: adjusted ? 'visible' : 'hidden',
-  };
+  // Backdrop limitado ao container do preview (não cobre a aplicação inteira).
+  const backdropStyle: React.CSSProperties = adjusted?.anchor
+    ? {
+        position: 'fixed',
+        left: adjusted.anchor.left,
+        top: adjusted.anchor.top,
+        width: adjusted.anchor.width,
+        height: adjusted.anchor.height,
+        zIndex: 59,
+        backgroundColor: 'rgba(0,0,0,0.35)',
+        backdropFilter: 'blur(1px)',
+        WebkitBackdropFilter: 'blur(1px)',
+      }
+    : { display: 'none' };
 
   const menuStyle: React.CSSProperties = {
     position: 'fixed',