fix(visual-edits): badge VAR azul, overlay só no preview, Tx sem CSS

- Badge VAR: azul (era roxo)
- Overlay de esmaecer movido para HtmlPreview — cobre apenas o painel
  de preview, não o editor à esquerda; levemente mais escuro (20%)
- Classificação de Tx corrigida: texto visível exige ao menos uma letra
  e nenhum char CSS (: ;); fragmentos de CSS e atributos HTML são
  ignorados ou marcados como </> quando contêm '<'

Author: claude

src/App.tsx

@@ -365,6 +365,7 @@ export default function App() {
                 viewport={viewport}
                 onViewportChange={setViewport}
                 onLocate={onVisualEditsLocate}
+                menuOpen={veMenu !== null}
               />
             }
           />

src/components/HtmlPreview.tsx

@@ -25,6 +25,7 @@ interface HtmlPreviewProps {
   // Recebe o loc clicado e as coordenadas já convertidas para a janela principal
   // (levando em conta a posição e a escala do iframe).
   onLocate?: (loc: string, screenX: number, screenY: number) => void;
+  menuOpen?: boolean;
 }
 
 const MIN_W = 200;
@@ -51,6 +52,7 @@ export function HtmlPreview({
   viewport,
   onViewportChange,
   onLocate,
+  menuOpen,
 }: HtmlPreviewProps) {
   const [showWarnings, setShowWarnings] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -239,6 +241,9 @@ export function HtmlPreview({
         ref={canvasRef}
         className={`relative flex flex-1 items-center justify-center overflow-hidden bg-[hsl(var(--preview-bg))]${visualEditsEnabled ? ' ve-border-pulse' : ''}`}
       >
+        {menuOpen && (
+          <div className="absolute inset-0 bg-black/20 z-[59] pointer-events-none" />
+        )}
         {error ? (
           <div className="flex h-full w-full flex-col items-center justify-center gap-3 p-8 text-center">
             <AlertTriangle className="h-12 w-12 text-destructive" />

src/components/VisualEditsMenu.tsx

@@ -45,7 +45,7 @@ function TypeBadge({ kind }: { kind: BadgeKind }) {
   }
   return (
     <span
-      className={`${base} bg-violet-100 text-violet-600 border-violet-200 dark:bg-violet-900/40 dark:text-violet-400 dark:border-violet-700`}
+      className={`${base} bg-blue-100 text-blue-600 border-blue-200 dark:bg-blue-900/40 dark:text-blue-400 dark:border-blue-700`}
     >
       VAR
     </span>
@@ -125,11 +125,6 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
 
   return (
     <>
-      <div
-        className="fixed inset-0 bg-black/10"
-        style={{ zIndex: 59 }}
-        onClick={onClose}
-      />
       <div
         ref={ref}
         style={menuStyle}

src/lib/daxParser/varDependencies.ts

@@ -41,16 +41,23 @@ function splitLiteral(
   const contentEnd = loc.end - 1;
   const content = src.slice(contentStart, contentEnd);
   const out: Array<{ kind: 'html' | 'text'; text: string; loc: SourceLoc }> = [];
-  let lastEnd = 0;
+
+  // Texto visível: deve ter pelo menos uma letra e nenhum caractere CSS (:;)
+  const isVisibleText = (s: string) => /[a-zA-ZÀ-ÿ]/.test(s) && !/[;:]/.test(s);
+
   TAG_SPLIT_RE.lastIndex = 0;
   let m: RegExpExecArray | null;
+  let lastEnd = 0;
+  let foundTag = false;
+
   while ((m = TAG_SPLIT_RE.exec(content)) !== null) {
+    foundTag = true;
     if (m.index > lastEnd) {
-      const text = content.slice(lastEnd, m.index);
-      if (text.trim().length > 0) {
+      const text = content.slice(lastEnd, m.index).trim();
+      if (text.length > 0 && isVisibleText(text)) {
         out.push({
           kind: 'text',
-          text: text.trim(),
+          text,
           loc: { start: contentStart + lastEnd, end: contentStart + m.index },
         });
       }
@@ -62,23 +69,27 @@ function splitLiteral(
     });
     lastEnd = m.index + m[0].length;
   }
-  if (lastEnd < content.length) {
-    const tail = content.slice(lastEnd);
-    if (tail.trim().length > 0) {
-      out.push({
-        kind: 'text',
-        text: tail.trim(),
-        loc: { start: contentStart + lastEnd, end: contentEnd },
-      });
+
+  if (foundTag && lastEnd < content.length) {
+    const tail = content.slice(lastEnd).trim();
+    if (tail.length > 0 && isVisibleText(tail)) {
+      out.push({ kind: 'text', text: tail, loc: { start: contentStart + lastEnd, end: contentEnd } });
     }
   }
-  if (out.length === 0 && content.trim().length > 0) {
-    out.push({
-      kind: 'text',
-      text: content.trim(),
-      loc: { start: contentStart, end: contentEnd },
-    });
+
+  // Nenhuma tag completa encontrada: classifica o literal inteiro.
+  if (!foundTag) {
+    if (content.includes('<')) {
+      // Tag incompleta (ex.: "<div style='width:") → fragmento HTML
+      out.push({ kind: 'html', text: content, loc: { start: contentStart, end: contentEnd } });
+    } else {
+      const trimmed = content.trim();
+      if (trimmed.length > 0 && isVisibleText(trimmed)) {
+        out.push({ kind: 'text', text: trimmed, loc: { start: contentStart, end: contentEnd } });
+      }
+    }
   }
+
   return out;
 }