refine(visual-edits): polimento visual e UX do dropdown

- Remove tooltip (title) dos itens; ruído visual sem ganho real.
- Centraliza ícone e título no header com tracking premium; ícone agora
  é cinza/muted, gradient sutil de fundo e ring fino para acabamento.
- Adiciona botão "X" de fechar à direita do header.
- Clique em um item NÃO fecha mais o menu: marca o item como ativo
  (anel/ring com primary) e mantém o dropdown aberto. Fecha com X,
  Escape ou clique fora.
- Badge HTML </>: muda de laranja para roxo (alinhado ao tema premium).
- Label HTML deixa de ser genérico (<div>/<span>) e passa a mostrar a
  primeira propriedade do style (ex.: "font-size", "background") ou o
  nome do primeiro atributo — bem mais informativo.
- Centraliza o dropdown no canvas do preview (data-ve-anchor) em vez
  de aparecer no ponto exato do clique.

Author: claude

src/components/HtmlPreview.tsx

@@ -239,6 +239,7 @@ export function HtmlPreview({
 
       <div
         ref={canvasRef}
+        data-ve-anchor="preview-canvas"
         className={`relative flex flex-1 items-center justify-center overflow-hidden bg-[hsl(var(--preview-bg))]${visualEditsEnabled ? ' ve-border-pulse' : ''}`}
       >
         {menuOpen && (

src/components/VisualEditsMenu.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { MousePointerClick } from 'lucide-react';
+import { MousePointerClick, X } from 'lucide-react';
 import type { Contributor } from '@/lib/daxParser/types';
 
 export interface VisualEditsMenuState {
@@ -28,7 +28,7 @@ function TypeBadge({ kind }: { kind: BadgeKind }) {
   if (kind === 'html') {
     return (
       <span
-        className={`${base} bg-orange-100 text-orange-600 border-orange-200 dark:bg-orange-900/40 dark:text-orange-400 dark:border-orange-700`}
+        className={`${base} bg-purple-100 text-purple-600 border-purple-200 dark:bg-purple-900/40 dark:text-purple-300 dark:border-purple-700`}
       >
         {'</>'}
       </span>
@@ -52,18 +52,27 @@ function TypeBadge({ kind }: { kind: BadgeKind }) {
   );
 }
 
-function labelOf(c: Contributor): string {
-  if (c.kind === 'var') return c.name;
-  if (c.kind === 'html') {
-    // Mostra só o nome da tag para não poluir com atributos inline
-    const m = /^<([a-zA-Z][a-zA-Z0-9-]*)/.exec(c.text);
-    if (m) return `<${m[1]}>`;
-  }
-  return c.text;
+// Para fragmentos HTML, em vez do genérico <div>/<span>, mostra a primeira
+// propriedade do style (ex.: "font-size", "background") ou o nome do primeiro
+// atributo, caindo de volta para a tag se nada for encontrado.
+function htmlLabel(text: string): string {
+  const tagMatch = /^<([a-zA-Z][a-zA-Z0-9-]*)/.exec(text);
+  if (!tagMatch) return text;
+  const tag = tagMatch[1];
+  const rest = text.slice(tagMatch[0].length);
+
+  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];
+
+  return `<${tag}>`;
 }
 
-function tooltipOf(c: Contributor): string | undefined {
-  if (c.kind === 'var') return c.snippet;
+function labelOf(c: Contributor): string {
+  if (c.kind === 'var') return c.name;
+  if (c.kind === 'html') return htmlLabel(c.text);
   return c.text;
 }
 
@@ -72,10 +81,19 @@ function locOf(c: Contributor): { start: number; end: number } {
   return c.loc;
 }
 
+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 [activeKey, setActiveKey] = useState<string | null>(null);
+
+  // Reset feedback quando o menu abre para um novo elemento.
+  useEffect(() => {
+    setActiveKey(null);
+  }, [menu?.clickedLoc.start, menu?.clickedLoc.end]);
 
+  // Centraliza o menu no canvas do preview (e mantém dentro do viewport).
   useLayoutEffect(() => {
     if (!menu || !ref.current) {
       setAdjusted(null);
@@ -84,8 +102,18 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
     const rect = ref.current.getBoundingClientRect();
     const vw = window.innerWidth;
     const vh = window.innerHeight;
-    let left = menu.x;
-    let top = menu.y;
+
+    let cx = menu.x;
+    let cy = menu.y;
+    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;
+    }
+
+    let left = cx - rect.width / 2;
+    let top = cy - rect.height / 2;
     if (left + rect.width > vw - VIEWPORT_PAD) left = vw - rect.width - VIEWPORT_PAD;
     if (top + rect.height > vh - VIEWPORT_PAD) top = vh - rect.height - VIEWPORT_PAD;
     if (left < VIEWPORT_PAD) left = VIEWPORT_PAD;
@@ -129,75 +157,85 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
   };
 
   return (
-    <>
-      <div
-        ref={ref}
-        style={menuStyle}
-        className="rounded-lg border border-border bg-white dark:bg-zinc-900 shadow-[var(--shadow-popover)] overflow-hidden"
-        role="menu"
-      >
-        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border">
-          <MousePointerClick className="h-3.5 w-3.5 text-primary" />
-          <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
-            Elemento selecionado
-          </span>
-        </div>
-        <div className="py-1">
-          {menu.items.length > 0 && (
-            <div className="max-h-72 overflow-y-auto">
-              {menu.items.map((c, i) => {
-                const loc = locOf(c);
-                return (
-                  <MenuItem
-                    key={`${c.kind}-${loc.start}-${i}`}
-                    kind={c.kind}
-                    label={labelOf(c)}
-                    line={c.line}
-                    tooltip={tooltipOf(c)}
-                    onClick={() => {
-                      onSelect(loc.start, loc.end);
-                      onClose();
-                    }}
-                  />
-                );
-              })}
-            </div>
-          )}
-          {menu.items.length > 0 && <div className="my-1 h-px bg-border" />}
-          <MenuItem
-            kind="html"
-            label="Trecho HTML final"
-            line={menu.clickedLine}
-            highlight
-            onClick={() => {
-              onSelect(menu.clickedLoc.start, menu.clickedLoc.end);
-              onClose();
-            }}
-          />
-        </div>
+    <div
+      ref={ref}
+      style={menuStyle}
+      className="rounded-xl border border-border bg-white dark:bg-zinc-900 shadow-[var(--shadow-popover)] overflow-hidden ring-1 ring-black/5 dark:ring-white/10"
+      role="menu"
+    >
+      <div className="relative flex items-center justify-center gap-2 px-3 py-2 border-b border-border bg-gradient-to-b from-muted/40 to-transparent">
+        <MousePointerClick className="h-3.5 w-3.5 text-muted-foreground/70" />
+        <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+          Elemento selecionado
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Fechar"
+          className="absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent transition-colors"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+      <div className="py-1">
+        {menu.items.length > 0 && (
+          <div className="max-h-72 overflow-y-auto">
+            {menu.items.map((c, i) => {
+              const loc = locOf(c);
+              const key = `${c.kind}-${loc.start}-${i}`;
+              return (
+                <MenuItem
+                  key={key}
+                  kind={c.kind}
+                  label={labelOf(c)}
+                  line={c.line}
+                  active={activeKey === key}
+                  onClick={() => {
+                    onSelect(loc.start, loc.end);
+                    setActiveKey(key);
+                  }}
+                />
+              );
+            })}
+          </div>
+        )}
+        {menu.items.length > 0 && <div className="my-1 h-px bg-border" />}
+        <MenuItem
+          kind="html"
+          label="Trecho HTML final"
+          line={menu.clickedLine}
+          highlight
+          active={activeKey === TRECHO_KEY}
+          onClick={() => {
+            onSelect(menu.clickedLoc.start, menu.clickedLoc.end);
+            setActiveKey(TRECHO_KEY);
+          }}
+        />
       </div>
-    </>
+    </div>
   );
 }
 
 interface ItemProps {
   kind: BadgeKind;
   label: string;
   line: number;
-  tooltip?: string;
   highlight?: boolean;
+  active?: boolean;
   onClick: () => void;
 }
 
-function MenuItem({ kind, label, line, tooltip, highlight, onClick }: ItemProps) {
+function MenuItem({ kind, label, line, highlight, active, onClick }: ItemProps) {
+  const bg = active
+    ? 'bg-primary/10 ring-1 ring-inset ring-primary/30'
+    : highlight
+      ? 'bg-primary/5 hover:bg-accent'
+      : 'hover:bg-accent';
   return (
     <button
       type="button"
       onClick={onClick}
-      title={tooltip}
-      className={`w-full flex items-center gap-2 px-2.5 py-1 text-xs hover:bg-accent transition-colors ${
-        highlight ? 'bg-primary/5' : ''
-      }`}
+      className={`w-full flex items-center gap-2 px-2.5 py-1 text-xs transition-colors ${bg}`}
       role="menuitem"
     >
       <TypeBadge kind={kind} />