fix: retain captured visual inputs and reduce analysis overhead

Author: Bill Leoutsakos

scripts/design-diff/README.md

@@ -363,6 +363,20 @@ ground truth. Corrections must be documented separately rather than rewriting fr
 Holdout PRs #6986 and #6929 were inspected while debugging resolver precision and resource
 use after labels were frozen, so this is not a wholly untouched blind evaluation.
 
+Import-graph construction uses syntax parsing without repeatedly running expression/refactor
+normalization. Bounded expression fallbacks retain captured helper inputs (including progress
+title maps), select statically known properties, and exclude type-only references. Re-export
+watchers distinguish changes to the forwarded export from unrelated declarations in its module.
+Custom props are exempt as event-only only when a resolved destructured prop is used exclusively
+to select JSX event handlers; the same rule applies inside nested JSX expressions. Unknown
+components and props with rendered uses keep conservative findings.
+
+Opaque runtime factories can still connect backend or authentication changes to UI inputs too
+broadly. These findings count as apparent false positives against the frozen nonvisual labels;
+an unresolved finding is not proof that pixels changed. Qualification and false-positive rates
+must be reported separately, with failed comparisons excluded from neither the failure count
+nor the denominator disclosure.
+
 ```sh
 bun --no-env-file scripts/design-diff/benchmark.ts \
   --engine /path/to/clean/engine-checkout --sha <immutable-engine-commit> \

scripts/design-diff/ast.ts

@@ -11,14 +11,19 @@ export const traverse: typeof traverseModule =
     ? traverseModule
     : (traverseModule as unknown as { default: typeof traverseModule }).default
 
-export function parseSource(source: string, file: string) {
-  const ast = parse(source, {
+/** Parse import/reference syntax without doing the resolver's literal/refactor work. */
+export function parseSyntax(source: string, file: string) {
+  return parse(source, {
     sourceType: 'unambiguous',
     sourceFilename: file,
     plugins: ['jsx', 'typescript', 'decorators-legacy'],
     errorRecovery: false,
     attachComment: false,
   })
+}
+
+export function parseSource(source: string, file: string) {
+  const ast = parseSyntax(source, file)
   normalizeRefactors(ast, traverse)
   normalizeLiteralAliases(ast, traverse)
   return ast

scripts/design-diff/dependencies.ts

@@ -1,6 +1,6 @@
 import type { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
-import { fingerprint, location, parseSource, propertyName, traverse } from '#design-diff/ast'
+import { fingerprint, location, parseSyntax, propertyName, traverse } from '#design-diff/ast'
 import { environmentFields } from '#design-diff/environment'
 import { finiteKeys } from '#design-diff/finite'
 import { reclaimMemory } from '#design-diff/memory'
@@ -100,7 +100,7 @@ export class DependencyGraph {
         if (target) raw.add(target)
       }
       try {
-        const ast = parseSource(source, file)
+        const ast = parseSyntax(source, file)
         const exports = new Map<string, ExportTarget>()
         const imports = new Map<string, ExportTarget>()
         const stars: string[] = []
@@ -314,10 +314,7 @@ export class DependencyGraph {
     if (precise) {
       for (const origin of trace.origins) edge(origin.file, origin.symbol)
       for (const route of trace.routes) {
-        if (!this.modules.get(route)?.barrel) {
-          if (!trace.origins.some((origin) => origin.file === route)) edge(route, '*')
-          continue
-        }
+        if (trace.origins.some((origin) => origin.file === route)) continue
         const watchers = this.watches.get(route) ?? new Map<string, Set<string>>()
         const signatures = watchers.get(file) ?? new Set<string>()
         signatures.add(
@@ -352,7 +349,7 @@ export class DependencyGraph {
       for (const target of this.raw.get(file) ?? []) this.dependencies.get(file)!.add(target)
       return
     }
-    const ast = parseSource(this.tree.texts.get(file) as string, file)
+    const ast = parseSyntax(this.tree.texts.get(file) as string, file)
     const namespaces = new Map([...module.imports].filter(([, target]) => target.name === '*'))
     const referenced = new Set<string>()
     traverse(ast, {
@@ -418,7 +415,7 @@ export class DependencyGraph {
   private count(file: string) {
     if (this.counted.has(file) || this.modules.get(file)?.barrel) return
     this.counted.add(file)
-    const ast = parseSource(this.tree.texts.get(file) as string, file)
+    const ast = parseSyntax(this.tree.texts.get(file) as string, file)
     const record = (specifier: string, name: string, references: NodePath[]) => {
       const target = this.tree.resolve(file, specifier)
       if (!target) return
@@ -488,8 +485,8 @@ export class DependencyGraph {
       const b = other.watches.get(root)
       for (const file of new Set([...(a?.keys() ?? []), ...(b?.keys() ?? [])])) {
         if (
-          this.modules.get(root)?.barrel &&
-          other.modules.get(root)?.barrel &&
+          this.modules.has(root) &&
+          other.modules.has(root) &&
           JSON.stringify([...(a?.get(file) ?? [])].sort()) ===
             JSON.stringify([...(b?.get(file) ?? [])].sort())
         )
@@ -598,7 +595,7 @@ export class DependencyGraph {
     const unowned = new Set<string>()
     const members = new Map<string, { keys?: string[]; owners?: string[] }[]>()
     const resolver = new Resolver(this.tree)
-    const ast = parseSource(source, file)
+    const ast = parseSyntax(source, file)
     traverse(ast, {
       Program(p) {
         const entries = Object.entries(p.scope.bindings)

scripts/design-diff/extract/tsx.ts

@@ -143,7 +143,14 @@ export function extractTsx(resolver: Resolver, file: string): Definition[] {
       })
       const attributeOrder = opening.attributes
         .filter(
-          (attr) => !t.isJSXAttribute(attr) || !nonvisualAttributes.test(propertyName(attr.name))
+          (attr) =>
+            !t.isJSXAttribute(attr) ||
+            (!nonvisualAttributes.test(propertyName(attr.name)) &&
+              !resolver.eventOnlyProp(
+                child(child(path, 'openingElement'), 'name'),
+                propertyName(attr.name),
+                file
+              ))
         )
         .map((attr) => (t.isJSXAttribute(attr) ? propertyName(attr.name) : '...spread'))
       const evidence = literal({ tag: name, children: childShapes, attributeOrder })
@@ -190,6 +197,7 @@ export function extractTsx(resolver: Resolver, file: string): Definition[] {
     JSXAttribute(path) {
       const name = propertyName(path.node.name)
       if (nonvisualAttributes.test(name)) return
+      if (resolver.eventOnlyProp(child(path.parentPath, 'name'), name, file)) return
       const value = child(path, 'value')
       const evidence = value.node ? resolver.evaluate(value, file) : literal(true)
       if (

scripts/design-diff/resolve.ts

@@ -40,12 +40,14 @@ export class Resolver {
   private readonly evaluations = new WeakMap<t.Node, Evidence>()
   private unknowns = new WeakMap<t.Node, Map<string, Evidence>>()
   private readonly opaqueValues = new Map<string, Evidence>()
+  private readonly resolvingExports = new Set<string>()
   private readonly resolvingUnknown = new Set<t.Node>()
   private steps = 0
   private parsedModules = 0
   private readonly active = new Set<t.Node>()
   private dependencies = new Set<string>()
   private unresolved = new Set<string>()
+  private readonly eventProps = new WeakMap<t.Node, Set<string>>()
 
   constructor(
     readonly tree: SourceTree,
@@ -295,7 +297,7 @@ export class Resolver {
       'Configured capability adapter: declared environment fields and provider factories are traced without execution'
     )
     return {
-      $environmentAdapter: this.opaqueExports(adapter.module, adapter.export),
+      $environmentAdapter: fingerprint(this.module(adapter.module).ast.program),
       implementation,
       environment: selected,
       arguments: children(path, 'arguments').map((argument) =>
@@ -331,6 +333,44 @@ export class Resolver {
     return { value: this.value(input, file, depth + 1), conditions }
   }
 
+  /** Resolve props whose only uses select event handlers, without assuming custom prop names. */
+  eventOnlyProp(name: NodePath, property: string, file: string): boolean {
+    if (!name.isJSXIdentifier() || !/^[A-Z]/.test(name.node.name)) return false
+    const key = name.node
+    let properties = this.eventProps.get(key)
+    if (!properties) {
+      properties = new Set<string>()
+      this.eventProps.set(key, properties)
+      const target = this.callable(name, file)
+      if (!target) return false
+      const parameter = children(target.path, 'params')[0]
+      if (!parameter?.isObjectPattern()) return false
+      for (const prop of children(parameter, 'properties')) {
+        if (!prop.isObjectProperty() || prop.node.computed) continue
+        const value = child(prop, 'value')
+        const local = value.isAssignmentPattern() ? child(value, 'left') : value
+        if (!local.isIdentifier()) continue
+        const references = local.scope
+          .getBinding(local.node.name)
+          ?.referencePaths.filter(
+            (reference) => !reference.findParent((parent) => parent.isTSType())
+          )
+        if (!references?.length) continue
+        if (
+          references.every((reference) => {
+            for (let parent = reference.parentPath; parent; parent = parent.parentPath) {
+              if (parent.isFunction() || parent.isCallExpression()) return false
+              if (parent.isJSXAttribute()) return /^on[A-Z]/.test(propertyName(parent.node.name))
+            }
+            return false
+          })
+        )
+          properties.add(propertyName(prop.node.key))
+      }
+    }
+    return properties.has(property)
+  }
+
   private currentFile = ''
 
   /** Select a property before expanding siblings, including createEnv's schema convention. */
@@ -492,7 +532,7 @@ export class Resolver {
     if (path.isFunction()) return { path, file }
     if (path.isTSAsExpression() || path.isTSSatisfiesExpression() || path.isTSNonNullExpression())
       return this.callable(child(path, 'expression'), file, seen)
-    if (!path.isIdentifier()) return undefined
+    if (!path.isIdentifier() && !path.isJSXIdentifier()) return undefined
     const binding = path.scope.getBinding(path.node.name)
     if (!binding?.constant) return undefined
     if (binding.path.isFunctionDeclaration()) return { path: binding.path, file }
@@ -691,24 +731,42 @@ export class Resolver {
     })
     return renders
       ? { $renderFunction: { file, symbol: symbolName(path) } }
-      : fingerprint(path.node)
+      : this.unknown(path, 'Opaque helper input is traced without execution', file)
   }
 
   /** Opaque export summaries are independent of expression budgets and parser cache eviction. */
   private opaqueExports(file: string, name: string): Data {
     const key = `${file}:${name}`
+    if (this.affected && !this.affected.has(file)) {
+      this.dependencies.add(file)
+      return { $unchangedInput: { file, export: name } }
+    }
     const cached = this.opaqueValues.get(key)
     if (cached) {
       for (const file of cached.dependencies) this.dependencies.add(file)
       return cached.value
     }
+    this.dependencies.add(file)
+    if (this.resolvingExports.has(key)) {
+      this.unresolved.add('Opaque export dependency cycle')
+      return { $cycle: key }
+    }
+    if (this.resolvingExports.size >= 64) {
+      this.unresolved.add('Opaque export dependency depth limit')
+      return { $unresolvedExport: key, blob: this.tree.entries.get(file)?.oid ?? null }
+    }
+    this.resolvingExports.add(key)
     const dependencies = this.dependencies
     this.dependencies = new Set([file])
-    const value = this.opaqueExportInner(file, name)
-    this.opaqueValues.set(key, { value, dependencies: [...this.dependencies], unresolved: [] })
-    for (const file of this.dependencies) dependencies.add(file)
-    this.dependencies = dependencies
-    return value
+    try {
+      const value = this.opaqueExportInner(file, name)
+      this.opaqueValues.set(key, { value, dependencies: [...this.dependencies], unresolved: [] })
+      return value
+    } finally {
+      for (const file of this.dependencies) dependencies.add(file)
+      this.dependencies = dependencies
+      this.resolvingExports.delete(key)
+    }
   }
 
   /** Follow export declarations only when normal evaluation is bounded or ambiguous. */
@@ -770,11 +828,50 @@ export class Resolver {
     const dependencies = this.dependencies
     this.dependencies = new Set([file])
     const inputs = new Map<string, Data>()
+    const inspected = new Set<t.Node>()
     const inspect = (reference: NodePath) => {
       if (!reference.isReferencedIdentifier()) return
+      if (reference.findParent((parent) => parent.isTSType())) return
       const binding = reference.scope.getBinding(reference.node.name)
       if (!binding) return
       const bound = binding.path
+      if (bound === path || bound.findParent((parent) => parent === path)) return
+      const member = reference.parentPath
+      if (member?.isMemberExpression() && member.node.object === reference.node) {
+        const selection = member.node.computed
+          ? finiteKeys(child(member, 'property'), file, this)
+          : { keys: [propertyName(member.node.property)], dependencies: [] }
+        if (selection?.keys) {
+          for (const dependency of selection.dependencies) this.dependencies.add(dependency)
+          const values = selection.keys.map((key) => this.selected(reference, String(key), file, 0))
+          if (values.every((value) => value !== undefined)) {
+            inputs.set(`selected:${reference.node.name}.[${selection.keys.join(',')}]`, {
+              $finiteSelection: selection.keys.map((key, index) => [key, values[index]!] as Data),
+            })
+            return
+          }
+        }
+      }
+      if (
+        !bound.isImportSpecifier() &&
+        !bound.isImportDefaultSpecifier() &&
+        !bound.isImportNamespaceSpecifier()
+      ) {
+        if (inspected.has(bound.node)) return
+        inspected.add(bound.node)
+        const parameter = this.parameter(bound, reference.node.name, file, 0)
+        if (parameter !== undefined) {
+          inputs.set(`parameter:${reference.node.name}`, parameter)
+          return
+        }
+        const value = bound.isVariableDeclarator() ? child(bound, 'init') : bound
+        if (value.node)
+          inputs.set(
+            `local:${reference.node.name}`,
+            this.unknown(value, 'Captured input feeds unresolved rendering', file)
+          )
+        return
+      }
       if (
         bound.isImportSpecifier() ||
         bound.isImportDefaultSpecifier() ||
@@ -790,25 +887,11 @@ export class Resolver {
             ? 'default'
             : '*'
         this.dependencies.add(target)
-        const member = reference.parentPath
-        if (member?.isMemberExpression() && member.node.object === reference.node) {
-          const selection = member.node.computed
-            ? finiteKeys(child(member, 'property'), file, this)
-            : { keys: [propertyName(member.node.property)], dependencies: [] }
-          if (selection?.keys) {
-            for (const file of selection.dependencies) this.dependencies.add(file)
-            const values = selection.keys.map((key) =>
-              this.selected(reference, String(key), file, 0)
-            )
-            if (values.every((value) => value !== undefined)) {
-              inputs.set(`${target}:${name}.[${selection.keys.join(',')}]`, {
-                $finiteSelection: selection.keys.map((key, index) => [key, values[index]!] as Data),
-              })
-              return
-            }
-          }
-        }
         const origin = this.tree.graph?.resolvedExport(target, name)?.origin
+        if (this.affected && origin && !this.affected.has(origin.file)) {
+          inputs.set(`${target}:${name}`, this.opaqueExports(origin.file, origin.exported))
+          return
+        }
         inputs.set(
           `${target}:${name}`,
           origin
@@ -858,7 +941,7 @@ export class Resolver {
     const key = `${file}:${name}`
     if (depth > this.tree.config.limits.resolutionDepth || visited.has(key)) {
       this.unresolved.add(visited.has(key) ? 'Dependency cycle' : 'Export resolution depth limit')
-      return { $unresolved: key }
+      return this.opaqueExports(file, name)
     }
     visited.add(key)
     this.dependencies.add(file)
@@ -960,6 +1043,7 @@ export class Resolver {
           if (attribute.isJSXAttribute()) {
             const name = propertyName(attribute.node.name)
             if (/^(?:key|ref|on[A-Z].*)$/.test(name)) continue
+            if (this.eventOnlyProp(child(opening, 'name'), name, file)) continue
             attributes.push([
               name,
               attribute.node.value ? this.value(child(attribute, 'value'), file, depth + 1) : true,

scripts/design-diff/tests/dependencies.test.ts

@@ -10,6 +10,26 @@ const index = 'apps/sim/index.ts'
 const consumer = 'apps/sim/page.tsx'
 const unrelated = 'apps/sim/unrelated.tsx'
 
+it('keeps re-exports independent of other declarations in a non-barrel module', async () => {
+  const files = {
+    [token]: 'export const colour="red";export {size} from "./other"',
+    [other]: 'export const size=4',
+    [consumer]: 'import {size} from "./token";export const Page=()=> <div style={{width:size}}/>',
+  }
+  expect(
+    (
+      await compareFiles(
+        files,
+        { [token]: 'export const colour="blue";export {size} from "./other"' },
+        settings
+      )
+    ).flagged
+  ).toBe(false)
+  expect((await compareFiles(files, { [other]: 'export const size=8' }, settings)).flagged).toBe(
+    true
+  )
+})
+
 it.each([
   [
     'named alias',