feat(visual-edits): contributors literais (HTML/Tx/VAR) sem expansão transitiva

claude · claude · commit a8199e9747b0 · 2026-05-27T01:17:43.000Z
Antes, ao clicar em um elemento, o dropdown listava TODAS as VARs
transitivamente alcançáveis via o cadeia de concatenação ancestral —
o que trazia dezenas de variáveis que sequer compunham aquele trecho.

Agora o dropdown enumera apenas os blocos literais que produzem o
trecho clicado, na ordem em que aparecem na fonte:

- Fragmentos de string com tags HTML → badge &lt;/&gt;
- Fragmentos de texto puro (ex.: "Sem fornecedores") → badge Tx
- Referências a VAR (cada ocorrência) → badge VAR (navega para a decl)

Recursão entra em chamadas (IF, SWITCH, etc.) para capturar todos os
varrefs e literais que contribuem para o resultado, sem expandir o corpo
das VARs.

"Trecho HTML final" passa a apontar para o range da concat-raiz
completa, não só o primeiro literal.
diff --git a/src/App.tsx b/src/App.tsx
@@ -69,9 +69,7 @@ export default function App() {
   const [rendered, setRendered] = useState<ParseResult | null>(null);
   const [veMenu, setVeMenu] = useState<VisualEditsMenuState | null>(null);
   const renderedRef = useRef<ParseResult | null>(null);
-  const codeRef = useRef(code);
   useEffect(() => { renderedRef.current = rendered; }, [rendered]);
-  useEffect(() => { codeRef.current = code; }, [code]);
 
   // Apply dark/light class
   useEffect(() => {
@@ -255,39 +253,27 @@ export default function App() {
     setPanelSplit(s);
   }, []);
 
-  // Calcula linha 1-based de um offset no documento atual.
-  const lineOfOffset = useCallback((offset: number) => {
-    const src = codeRef.current;
-    let line = 1;
-    for (let i = 0; i < offset && i < src.length; i++) {
-      if (src[i] === '\n') line++;
-    }
-    return line;
-  }, []);
-
   // Recebe clique do Visual Edits no preview (coords já em window space).
   const onVisualEditsLocate = useCallback(
     (loc: string, screenX: number, screenY: number) => {
       const m = /^(\d+)-(\d+)$/.exec(loc);
       if (!m) return;
-      const from = parseInt(m[1], 10);
-      const to = parseInt(m[2], 10);
-      const deps = renderedRef.current?.varDeps?.[loc] ?? [];
-      if (deps.length === 0) {
-        // Nada a desambiguar: mantém fluxo rápido, pula direto pro trecho.
-        editorRef.current?.scrollAndSelect(from, to);
+      const entry = renderedRef.current?.contributors?.[loc];
+      if (!entry || entry.items.length === 0) {
+        // Nada a desambiguar: pula direto pro literal clicado.
+        editorRef.current?.scrollAndSelect(parseInt(m[1], 10), parseInt(m[2], 10));
         setVeMenu(null);
         return;
       }
       setVeMenu({
         x: screenX,
         y: screenY,
-        clickedLoc: { start: from, end: to },
-        clickedLine: lineOfOffset(from),
-        deps,
+        clickedLoc: entry.rootLoc,
+        clickedLine: entry.rootLine,
+        items: entry.items,
       });
     },
-    [lineOfOffset],
+    [],
   );
 
   const onVeMenuSelect = useCallback((from: number, to: number) => {
diff --git a/src/components/VisualEditsMenu.tsx b/src/components/VisualEditsMenu.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { MousePointerClick } from 'lucide-react';
-import type { VarDep } from '@/lib/daxParser/types';
+import type { Contributor } from '@/lib/daxParser/types';
 
 export interface VisualEditsMenuState {
   x: number;
   y: number;
   clickedLoc: { start: number; end: number };
   clickedLine: number;
-  deps: VarDep[];
+  items: Contributor[];
 }
 
 interface Props {
@@ -16,32 +16,61 @@ interface Props {
   onClose: () => void;
 }
 
-const MENU_MIN_W = 260;
-const MENU_MAX_W = 420;
+const MENU_MIN_W = 280;
+const MENU_MAX_W = 460;
 const VIEWPORT_PAD = 8;
 
-type BadgeKind = 'var' | 'html';
+type BadgeKind = 'var' | 'html' | 'text';
 
 function TypeBadge({ kind }: { kind: BadgeKind }) {
+  const base =
+    'shrink-0 inline-flex items-center justify-center text-[9px] font-mono font-bold h-4 px-1 rounded border';
   if (kind === 'html') {
     return (
-      <span className="shrink-0 inline-flex items-center justify-center text-[9px] font-mono font-bold h-4 px-1 rounded bg-orange-100 text-orange-600 dark:bg-orange-900/40 dark:text-orange-400 border border-orange-200 dark:border-orange-700">
+      <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`}
+      >
         {'</>'}
       </span>
     );
   }
+  if (kind === 'text') {
+    return (
+      <span
+        className={`${base} bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/40 dark:text-emerald-400 dark:border-emerald-700`}
+      >
+        Tx
+      </span>
+    );
+  }
   return (
-    <span className="shrink-0 inline-flex items-center justify-center text-[9px] font-mono font-bold h-4 px-1 rounded bg-violet-100 text-violet-600 dark:bg-violet-900/40 dark:text-violet-400 border border-violet-200 dark:border-violet-700">
+    <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`}
+    >
       VAR
     </span>
   );
 }
 
+function labelOf(c: Contributor): string {
+  if (c.kind === 'var') return c.name;
+  return c.text;
+}
+
+function tooltipOf(c: Contributor): string | undefined {
+  if (c.kind === 'var') return c.snippet;
+  return c.text;
+}
+
+function locOf(c: Contributor): { start: number; end: number } {
+  if (c.kind === 'var') return c.declLoc;
+  return c.loc;
+}
+
 export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
   const [adjusted, setAdjusted] = useState<{ left: number; top: number } | null>(null);
 
-  // Reposiciona dentro do viewport.
   useLayoutEffect(() => {
     if (!menu || !ref.current) {
       setAdjusted(null);
@@ -72,7 +101,6 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
       if (!ref.current.contains(e.target as Node)) onClose();
     }
     window.addEventListener('keydown', onKey);
-    // Captura no próximo tick para não fechar imediatamente após o postMessage.
     const t = window.setTimeout(() => {
       window.addEventListener('mousedown', onClick, true);
     }, 0);
@@ -115,24 +143,27 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
           </span>
         </div>
         <div className="py-1">
-          {menu.deps.length > 0 && (
+          {menu.items.length > 0 && (
             <div className="max-h-72 overflow-y-auto">
-              {menu.deps.map((d) => (
-                <MenuItem
-                  key={d.name + d.declLoc.start}
-                  kind="var"
-                  label={d.name}
-                  line={d.line}
-                  tooltip={d.snippet}
-                  onClick={() => {
-                    onSelect(d.declLoc.start, d.declLoc.end);
-                    onClose();
-                  }}
-                />
-              ))}
+              {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.deps.length > 0 && <div className="my-1 h-px bg-border" />}
+          {menu.items.length > 0 && <div className="my-1 h-px bg-border" />}
           <MenuItem
             kind="html"
             label="Trecho HTML final"
diff --git a/src/lib/daxParser/index.ts b/src/lib/daxParser/index.ts
@@ -4,7 +4,7 @@ import { evalNode, makeContext } from './evaluator';
 import { ParseError } from './types';
 import type { ParseResult } from './types';
 import { processHtml } from './htmlProcessor';
-import { buildVarDepIndex } from './varDependencies';
+import { buildContributorIndex } from './varDependencies';
 
 function posToLineCol(src: string, pos: number): { line: number; col: number } {
   let line = 1, col = 1;
@@ -41,8 +41,8 @@ export function parseDax(src: string): ParseResult {
     const isPureDax = !!html.trim() && !/<[a-z][\s\S]*?>/i.test(html);
     const rawValue = isPureDax ? html.trim() : undefined;
     html = processHtml(html);
-    const varDeps = isPureDax ? undefined : buildVarDepIndex(ast, src);
-    return { html, warnings, isPureDax, rawValue, measureName, varDeps };
+    const contributors = isPureDax ? undefined : buildContributorIndex(ast, src);
+    return { html, warnings, isPureDax, rawValue, measureName, contributors };
   } catch (e) {
     const msg = e instanceof Error ? e.message : String(e);
     if (e instanceof ParseError) {
diff --git a/src/lib/daxParser/types.ts b/src/lib/daxParser/types.ts
@@ -43,17 +43,32 @@ export type Node =
   | { kind: 'in'; value: Node; list: Node[]; loc?: SourceLoc }
   | { kind: 'let'; vars: { name: string; expr: Node; loc?: SourceLoc }[]; body: Node; loc?: SourceLoc };
 
-// One VAR declaration referenced (directly or transitively) by an HTML element.
-export interface VarDep {
-  name: string;
-  declLoc: SourceLoc; // range covering "VAR _name = expr"
-  snippet: string;    // short preview of the declaration (~60 chars)
-  line: number;       // 1-based line of the VAR keyword
+// One concrete building block that composes a clicked HTML element.
+// Enumerated by walking the surrounding `&` concat chain (and recursing into
+// function-call args). Three flavors:
+//   - 'html': string literal fragment that contains tags
+//   - 'text': string literal fragment that is plain visible text
+//   - 'var' : a varref in the chain (with its declaration location)
+export type Contributor =
+  | { kind: 'html'; text: string; loc: SourceLoc; line: number }
+  | { kind: 'text'; text: string; loc: SourceLoc; line: number }
+  | {
+      kind: 'var';
+      name: string;
+      refLoc: SourceLoc;
+      declLoc: SourceLoc;
+      line: number;
+      snippet: string;
+    };
+
+export interface ContributorsEntry {
+  rootLoc: SourceLoc;       // full concat-chain range that produced this element
+  rootLine: number;         // 1-based line of rootLoc.start
+  items: Contributor[];     // building blocks in source order
 }
 
-// Map of data-dax-loc value ("start-end") -> ordered list of contributing VARs
-// (top-down by declaration position in the source).
-export type VarDepIndex = Record<string, VarDep[]>;
+// Map of data-dax-loc value ("start-end") -> contributors of that element.
+export type ContributorIndex = Record<string, ContributorsEntry>;
 
 export interface ParseResult {
   html: string;
@@ -66,7 +81,7 @@ export interface ParseResult {
   isPureDax?: boolean;
   rawValue?: string;
   measureName?: string;
-  varDeps?: VarDepIndex;
+  contributors?: ContributorIndex;
 }
 
 export class ParseError extends Error {
diff --git a/src/lib/daxParser/varDependencies.ts b/src/lib/daxParser/varDependencies.ts
