@agent-native/core-corpus 0.218.0 → 0.219.0

package/corpus/templates/design/shared/motion-react-source.ts

@@ -441,6 +441,14 @@ export function applyMotionReactSourceEdit(
 export function readMotionReactSource(
   source: string,
   modulePath?: string,
+): MotionReactSourceReadResult {
+  return readMotionReactSourceInternal(source, modulePath);
+}
+
+function readMotionReactSourceInternal(
+  source: string,
+  modulePath: string | undefined,
+  options: { allowUnsupportedRuntimeCallbacks?: boolean } = {},
 ): MotionReactSourceReadResult {
   try {
     const sourceFile = parseTsx(source);
@@ -502,6 +510,11 @@ export function readMotionReactSource(
       modulePath,
       managedStyles,
       managedTargetNodeIds,
+      {
+        allowManagedMotionWithUnresolvedStylesheets: true,
+        allowUnsupportedRuntimeCallbacks:
+          options.allowUnsupportedRuntimeCallbacks,
+      },
     );
     if (authoredMotion.document) {
       try {
@@ -599,6 +612,12 @@ export function inspectMotionReactSourceWriteCapability(args: {
   try {
     if (read.status === "invalid") throw read.error;
     const sourceFile = parseTsx(args.source);
+    if (targetNodeIds.length > 0 && hasUnresolvedReactStylesheet(sourceFile)) {
+      throw new MotionReactSourceError(
+        "unsupported-authored-motion",
+        "Resolve external stylesheets before editing or adding Motion.",
+      );
+    }
     if (targetNodeIds.length === 0) {
       const canEditMetadata =
         read.status === "valid" &&
@@ -629,6 +648,11 @@ export function inspectMotionReactSourceWriteCapability(args: {
       }
     } else {
       const targets = findTargets(sourceFile, targetNodeIds, args.modulePath);
+      assertNoUnsupportedReactStylePropAnimations(
+        sourceFile,
+        targetNodeIds,
+        args.modulePath,
+      );
       const targetRoots = new Set(
         targets.map((target) => target.componentRoot),
       );
@@ -679,7 +703,9 @@ export function removeMotionReactSource(
   source: string,
   modulePath?: string,
 ): MotionReactSourceRemoval {
-  const read = readMotionReactSource(source, modulePath);
+  const read = readMotionReactSourceInternal(source, modulePath, {
+    allowUnsupportedRuntimeCallbacks: true,
+  });
   if (read.status === "invalid") throw read.error;
   if (read.status === "absent") return { source, changed: false };
 
@@ -689,6 +715,10 @@ export function removeMotionReactSource(
     modulePath,
     findManagedStyles(originalSourceFile),
     read.status === "valid" ? read.targetNodeIds : [],
+    {
+      allowManagedMotionWithUnresolvedStylesheets: true,
+      allowUnsupportedRuntimeCallbacks: true,
+    },
   );
   const withoutAuthored = removeAuthoredCssSourceRanges(
     source,
@@ -756,7 +786,22 @@ function readAuthoredReactMotion(
   modulePath: string | undefined,
   managedStyles: readonly ManagedStyle[],
   managedTargetNodeIds: readonly string[] = [],
+  options: {
+    allowManagedMotionWithUnresolvedStylesheets?: boolean;
+    allowUnsupportedRuntimeCallbacks?: boolean;
+  } = {},
 ): AuthoredReactMotion {
+  if (
+    !options.allowManagedMotionWithUnresolvedStylesheets &&
+    managedTargetNodeIds.length > 0 &&
+    hasUnresolvedReactStylesheet(sourceFile)
+  ) {
+    throw new MotionReactSourceError(
+      "unsupported-authored-motion",
+      "Resolve external stylesheets before editing or adding Motion.",
+    );
+  }
+
   const managedElements = new Set(managedStyles.map((style) => style.element));
   const authoredStyles: TypeScript.JsxElement[] = [];
   const visit = (node: TypeScript.Node): void => {
@@ -773,6 +818,10 @@ function readAuthoredReactMotion(
   visit(sourceFile);
 
   const hosts = findReactAuthoredHosts(sourceFile);
+  const transitionCssBlocks = authoredStyles.flatMap((style) => {
+    const content = readStaticReactStyleContent(sourceFile, style);
+    return content ? [content.css] : [];
+  });
   const tracks: NonNullable<MotionCodeDocument["tracks"]> = [];
   const rangesToRemove: MotionAuthoredCssSourceRange[] = [];
   const importedTargetNodeIds = new Set<string>();
@@ -795,27 +844,31 @@ function readAuthoredReactMotion(
       continue;
     }
 
-    const result = importAuthoredCssAnimations(content.css, (selector) => {
-      let styleRoot: TypeScript.JsxElement | TypeScript.JsxFragment;
-      try {
-        styleRoot = findComponentRoot(sourceFile, style);
-      } catch (error) {
-        return {
-          status: "unsupported",
-          reason:
-            error instanceof Error
-              ? error.message
-              : "React inline style animations must belong to one static component root.",
-        };
-      }
-      return resolveAuthoredReactTarget(
-        selector,
-        hosts,
-        modulePath,
-        sourceFile,
-        styleRoot,
-      );
-    });
+    const result = importAuthoredCssAnimations(
+      content.css,
+      (selector) => {
+        let styleRoot: TypeScript.JsxElement | TypeScript.JsxFragment;
+        try {
+          styleRoot = findComponentRoot(sourceFile, style);
+        } catch (error) {
+          return {
+            status: "unsupported",
+            reason:
+              error instanceof Error
+                ? error.message
+                : "React inline style animations must belong to one static component root.",
+          };
+        }
+        return resolveAuthoredReactTarget(
+          selector,
+          hosts,
+          modulePath,
+          sourceFile,
+          styleRoot,
+        );
+      },
+      { transitionCssBlocks },
+    );
     if (result.status === "absent") {
       for (const name of result.definedKeyframeNames) {
         keyframeNameCounts.set(name, (keyframeNameCounts.get(name) ?? 0) + 1);
@@ -828,10 +881,10 @@ function readAuthoredReactMotion(
         result.reason,
       );
     }
-    if (hasImportedStylesheet(sourceFile)) {
+    if (hasUnresolvedReactStylesheet(sourceFile)) {
       throw new MotionReactSourceError(
         "unsupported-authored-motion",
-        "Inline CSS animations cannot be imported while CSS module dependencies remain unresolved.",
+        "Inline CSS animations cannot be imported while stylesheet dependencies remain unresolved.",
       );
     }
     for (const name of result.definedKeyframeNames) {
@@ -861,11 +914,13 @@ function readAuthoredReactMotion(
     );
   }
 
-  assertNoUnsupportedReactStylePropAnimations(
-    sourceFile,
-    [...managedTargetNodeIds, ...importedTargetNodeIds],
-    modulePath,
-  );
+  if (!options.allowUnsupportedRuntimeCallbacks) {
+    assertNoUnsupportedReactStylePropAnimations(
+      sourceFile,
+      [...managedTargetNodeIds, ...importedTargetNodeIds],
+      modulePath,
+    );
+  }
   if (tracks.length === 0) return { document: null, rangesToRemove: [] };
   for (const name of usedKeyframeNames) {
     if ((keyframeNameCounts.get(name) ?? 0) > 1) {
@@ -917,13 +972,117 @@ function hasImportedStylesheet(sourceFile: TypeScript.SourceFile): boolean {
         ts.isIdentifier(node.expression) && node.expression.text === "require";
       const isDynamicImport =
         node.expression.kind === ts.SyntaxKind.ImportKeyword;
+      const isImportMetaGlob =
+        ts.isPropertyAccessExpression(node.expression) &&
+        ts.isMetaProperty(node.expression.expression) &&
+        node.expression.expression.keywordToken ===
+          ts.SyntaxKind.ImportKeyword &&
+        node.expression.expression.name.text === "meta" &&
+        ["glob", "globEager"].includes(node.expression.name.text);
       if (
         (isRequire || isDynamicImport) &&
-        isCssModuleSpecifier(node.arguments[0]!)
+        isPotentialCssModuleSpecifier(node.arguments[0]!)
       ) {
         found = true;
         return;
       }
+      if (isImportMetaGlob && isPotentialCssGlobPattern(node.arguments[0]!)) {
+        found = true;
+        return;
+      }
+    }
+    if (!found) ts.forEachChild(node, visit);
+  };
+  visit(sourceFile);
+  return found;
+}
+
+function hasUnresolvedReactStylesheet(
+  sourceFile: TypeScript.SourceFile,
+): boolean {
+  return (
+    hasImportedStylesheet(sourceFile) || hasLinkedReactStylesheet(sourceFile)
+  );
+}
+
+function isPotentialCssGlobPattern(node: TypeScript.Expression): boolean {
+  if (ts.isArrayLiteralExpression(node)) {
+    return node.elements.some(isPotentialCssGlobPattern);
+  }
+  if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) {
+    return true;
+  }
+
+  const pattern = node.text;
+  if (/\.(?:css|scss|sass|less|styl)(?:$|[?#*{}])/i.test(pattern)) {
+    return true;
+  }
+  const extensionList = pattern.match(/\.\{([^}]+)\}(?:[?#].*)?$/);
+  if (extensionList) {
+    return extensionList[1]!
+      .split(",")
+      .some((extension) => /^(?:css|scss|sass|less|styl)$/i.test(extension));
+  }
+  return !/\.[a-z0-9]+(?:[?#].*)?$/i.test(pattern);
+}
+
+function hasLinkedReactStylesheet(sourceFile: TypeScript.SourceFile): boolean {
+  let found = false;
+  const visit = (node: TypeScript.Node): void => {
+    if (found) return;
+    const opening = ts.isJsxElement(node)
+      ? node.openingElement
+      : ts.isJsxSelfClosingElement(node)
+        ? node
+        : null;
+    if (
+      opening &&
+      ts.isIdentifier(opening.tagName) &&
+      opening.tagName.text === "link"
+    ) {
+      const properties = opening.attributes.properties;
+      const attributes = new Map<string, TypeScript.JsxAttribute>();
+      let hasSpread = false;
+      for (const property of properties) {
+        if (ts.isJsxSpreadAttribute(property)) {
+          hasSpread = true;
+        } else {
+          attributes.set(
+            property.name.getText(sourceFile).toLowerCase(),
+            property,
+          );
+        }
+      }
+      const relAttribute = attributes.get("rel");
+      const hrefAttribute = attributes.get("href");
+      const rel = relAttribute
+        ? readStaticJsxAttributeValue(relAttribute)
+        : null;
+      const relationTokens =
+        rel?.status === "static"
+          ? rel.value.split(/[\t\n\f\r ]+/).map((value) => value.toLowerCase())
+          : [];
+      const href = hrefAttribute
+        ? readStaticJsxAttributeValue(hrefAttribute)
+        : null;
+      const asAttribute = attributes.get("as");
+      const as = asAttribute ? readStaticJsxAttributeValue(asAttribute) : null;
+      const hasHref =
+        href?.status === "dynamic" ||
+        (href?.status === "static" && href.value.trim().length > 0);
+      const relMayBeStylesheet =
+        rel?.status === "dynamic" && hrefAttribute !== undefined;
+      const preloadMayBecomeStylesheet =
+        relationTokens.includes("preload") &&
+        (as?.status === "dynamic" ||
+          (as?.status === "static" && as.value.toLowerCase() === "style")) &&
+        attributes.has("onload");
+      found =
+        hasSpread ||
+        (hasHref &&
+          (relationTokens.includes("stylesheet") ||
+            relMayBeStylesheet ||
+            preloadMayBecomeStylesheet));
     }
     if (!found) ts.forEachChild(node, visit);
   };
@@ -931,6 +1090,13 @@ function hasImportedStylesheet(sourceFile: TypeScript.SourceFile): boolean {
   return found;
 }
 
+function isPotentialCssModuleSpecifier(node: TypeScript.Expression): boolean {
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
+    return isCssModuleSpecifier(node);
+  }
+  return true;
+}
+
 function isCssModuleSpecifier(node: TypeScript.Expression): boolean {
   if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) {
     return false;
@@ -943,34 +1109,199 @@ function assertNoUnsupportedReactStylePropAnimations(
   targetNodeIds: readonly string[],
   modulePath: string | undefined,
 ): void {
-  const targetElements = new Set(
+  const targets =
     targetNodeIds.length > 0
-      ? findStaticTargets(
-          sourceFile,
-          [...new Set(targetNodeIds)],
-          modulePath,
-        ).map((target) => target.element)
-      : [],
+      ? findStaticTargets(sourceFile, [...new Set(targetNodeIds)], modulePath)
+      : [];
+  const targetElements = new Set(targets.map((target) => target.element));
+  const capturedMotionRefNames = new Set<string>();
+  for (const target of targets) {
+    const attributes = ts.isJsxElement(target.element)
+      ? target.element.openingElement.attributes
+      : target.element.attributes;
+    for (const property of attributes.properties) {
+      if (
+        !ts.isJsxAttribute(property) ||
+        property.name.getText(sourceFile) !== "ref" ||
+        !property.initializer ||
+        !ts.isJsxExpression(property.initializer) ||
+        !property.initializer.expression
+      ) {
+        continue;
+      }
+      for (const name of collectReactCapturedRefNames(
+        property.initializer.expression,
+        sourceFile,
+        new Set(),
+      )) {
+        capturedMotionRefNames.add(name);
+      }
+    }
+  }
+  const targetRoots = new Set(
+    targets.map((target) => findComponentRoot(sourceFile, target.element)),
   );
+  const isWithinTargetRoot = (node: TypeScript.Node): boolean => {
+    for (
+      let current: TypeScript.Node | undefined = node;
+      current;
+      current = current.parent
+    ) {
+      if (
+        targetRoots.has(
+          current as TypeScript.JsxElement | TypeScript.JsxFragment,
+        )
+      ) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const componentFunctions = new Set<
+    | TypeScript.FunctionDeclaration
+    | TypeScript.FunctionExpression
+    | TypeScript.ArrowFunction
+    | TypeScript.MethodDeclaration
+  >();
+  for (const root of targetRoots) {
+    for (
+      let current: TypeScript.Node | undefined = root.parent;
+      current;
+      current = current.parent
+    ) {
+      if (isFunctionBoundary(current)) {
+        if (
+          ts.isFunctionDeclaration(current) ||
+          ts.isFunctionExpression(current) ||
+          ts.isArrowFunction(current) ||
+          ts.isMethodDeclaration(current)
+        ) {
+          componentFunctions.add(current);
+        }
+        break;
+      }
+    }
+  }
+  for (const component of componentFunctions) {
+    if (!component.body) continue;
+    const inspectLifecycleEffects = (node: TypeScript.Node): void => {
+      if (node !== component.body && isFunctionBoundary(node)) return;
+      if (
+        ts.isCallExpression(node) &&
+        isReactLifecycleEffectCall(node, sourceFile)
+      ) {
+        const callback = node.arguments[0];
+        const inspection = callback
+          ? inspectReactStyleMutationCallback(
+              callback,
+              sourceFile,
+              new Set(),
+              false,
+              capturedMotionRefNames,
+              true,
+            )
+          : "unknown";
+        if (inspection !== "safe") {
+          throw new MotionReactSourceError(
+            "unsupported-authored-motion",
+            "React effect callbacks in a Motion component can access or mutate target styles and cannot be proven safe.",
+          );
+        }
+        return;
+      }
+      ts.forEachChild(node, inspectLifecycleEffects);
+    };
+    inspectLifecycleEffects(component.body);
+  }
+  for (const root of targetRoots) {
+    const visitRoot = (node: TypeScript.Node): void => {
+      if (
+        ts.isJsxAttribute(node) &&
+        node.name.getText(sourceFile) === "dangerouslySetInnerHTML"
+      ) {
+        throw new MotionReactSourceError(
+          "unsupported-authored-motion",
+          "React dangerouslySetInnerHTML in a Motion component can hide CSS from source inspection.",
+        );
+      }
+      ts.forEachChild(node, visitRoot);
+    };
+    visitRoot(root);
+  }
   const visit = (node: TypeScript.Node): void => {
-    if (ts.isJsxAttribute(node) && node.name.getText(sourceFile) === "style") {
+    if (ts.isJsxSpreadAttribute(node)) {
+      const opening = node.parent.parent;
+      const host = ts.isJsxOpeningElement(opening) ? opening.parent : opening;
+      const isRelevantTargetProp =
+        targetElements.has(host) || isWithinTargetRoot(host);
+      if (isRelevantTargetProp) {
+        const inspection = inspectReactJsxSpreadExpression(
+          node.expression,
+          sourceFile,
+          new Set(),
+          capturedMotionRefNames,
+        );
+        if (inspection !== "safe") {
+          throw new MotionReactSourceError(
+            "unsupported-authored-motion",
+            "React JSX spread props in a Motion component can supply style declarations or callbacks that mutate target styles and cannot be proven safe.",
+          );
+        }
+      }
+      ts.forEachChild(node, visit);
+      return;
+    }
+
+    if (ts.isJsxAttribute(node)) {
+      const attributeName = node.name.getText(sourceFile);
       const initializer = node.initializer;
-      if (!initializer || !ts.isJsxExpression(initializer)) return;
-      if (!initializer.expression) return;
-      const inspection = inspectReactStyleExpression(
-        initializer.expression,
-        sourceFile,
-        new Set(),
-      );
       const attributes = node.parent;
       const opening = attributes.parent;
       const host = ts.isJsxOpeningElement(opening) ? opening.parent : opening;
-      if (targetElements.has(host) && inspection !== "safe") {
+      const isRelevantTargetProp =
+        targetElements.has(host) ||
+        (attributeName !== "style" && isWithinTargetRoot(host));
+      const expression =
+        initializer && ts.isJsxExpression(initializer) && initializer.expression
+          ? initializer.expression
+          : null;
+
+      if (!["style", "css", "sx"].includes(attributeName)) {
+        if (
+          isRelevantTargetProp &&
+          (attributeName === "ref" || /^on[A-Za-z]/.test(attributeName))
+        ) {
+          const inspection = expression
+            ? inspectReactStyleMutationCallback(
+                expression,
+                sourceFile,
+                new Set(),
+                attributeName === "ref",
+                capturedMotionRefNames,
+              )
+            : "unknown";
+          if (inspection !== "safe") {
+            throw new MotionReactSourceError(
+              "unsupported-authored-motion",
+              `React ${attributeName} callbacks on a Motion component can access or mutate target styles and cannot be proven safe.`,
+            );
+          }
+        }
+        ts.forEachChild(node, visit);
+        return;
+      }
+      if (!isRelevantTargetProp) return;
+      const inspection = expression
+        ? attributeName === "style"
+          ? inspectReactStyleExpression(expression, sourceFile, new Set())
+          : inspectReactCssExpression(expression, sourceFile, new Set(), true)
+        : "unknown";
+      if (inspection !== "safe") {
         throw new MotionReactSourceError(
           "unsupported-authored-motion",
           inspection === "motion"
-            ? "React inline style-prop animations and transitions cannot be imported losslessly; use a supported static JSX <style> animation rule."
-            : "A React dynamic style prop on a Motion target cannot be proven free of animation or transition declarations.",
+            ? `React ${attributeName} prop animations and transitions cannot be imported losslessly; use a supported static JSX <style> animation rule.`
+            : `A React dynamic ${attributeName} prop on a Motion target cannot be proven free of animation or transition declarations.`,
         );
       }
     }
@@ -980,12 +1311,60 @@ function assertNoUnsupportedReactStylePropAnimations(
 }
 
 type ReactStyleInspection = "safe" | "motion" | "unknown";
+const REACT_EVENT_TARGET_PROPERTIES = new Set([
+  "currentTarget",
+  "target",
+  "srcElement",
+]);
+const REACT_EVENT_TARGET_SCALAR_PROPERTIES = new Set([
+  "alt",
+  "checked",
+  "disabled",
+  "height",
+  "htmlFor",
+  "id",
+  "innerText",
+  "max",
+  "maxLength",
+  "min",
+  "minLength",
+  "multiple",
+  "name",
+  "placeholder",
+  "readOnly",
+  "required",
+  "role",
+  "scrollLeft",
+  "scrollTop",
+  "selected",
+  "selectedIndex",
+  "selectionEnd",
+  "selectionStart",
+  "tabIndex",
+  "textContent",
+  "title",
+  "type",
+  "value",
+  "width",
+]);
+const REACT_EVENT_TARGET_SCALAR_METHODS = new Set(["trim"]);
+const REACT_REF_READ_METHODS = new Set([
+  "closest",
+  "contains",
+  "getAttribute",
+  "getBoundingClientRect",
+  "getClientRects",
+  "hasAttribute",
+  "matches",
+  "querySelector",
+  "querySelectorAll",
+]);
 
-function inspectReactStyleExpression(
+function collectReactCapturedRefNames(
   expression: TypeScript.Expression,
   sourceFile: TypeScript.SourceFile,
   resolving: Set<string>,
-): ReactStyleInspection {
+): Set<string> {
   while (
     ts.isParenthesizedExpression(expression) ||
     ts.isAsExpression(expression) ||
@@ -995,95 +1374,1654 @@ function inspectReactStyleExpression(
     expression = expression.expression;
   }
 
-  if (expression.kind === ts.SyntaxKind.NullKeyword) return "safe";
-  if (ts.isObjectLiteralExpression(expression)) {
-    for (const property of expression.properties) {
-      if (ts.isSpreadAssignment(property)) return "unknown";
-      const name = ts.isPropertyAssignment(property)
-        ? property.name
-        : ts.isShorthandPropertyAssignment(property)
-          ? property.name
-          : null;
-      const text = name
-        ? ts.isIdentifier(name) || ts.isStringLiteral(name)
-          ? name.text
-          : null
-        : null;
-      if (text && isReactMotionStylePropName(text)) return "motion";
-      if (!text) return "unknown";
+  if (!ts.isArrowFunction(expression) && !ts.isFunctionExpression(expression)) {
+    if (!ts.isIdentifier(expression)) return new Set();
+
+    const resolved = resolveReactStyleExpression(expression, sourceFile);
+    if (resolved) {
+      const declarationKey = `${resolved.start}:${resolved.end}`;
+      if (resolving.has(declarationKey)) return new Set();
+      resolving.add(declarationKey);
+      const names = collectReactCapturedRefNames(
+        resolved.expression,
+        sourceFile,
+        resolving,
+      );
+      resolving.delete(declarationKey);
+      return names;
     }
-    return "safe";
+
+    const functions: TypeScript.FunctionDeclaration[] = [];
+    const findFunction = (node: TypeScript.Node): void => {
+      if (
+        ts.isFunctionDeclaration(node) &&
+        node.name?.text === expression.text
+      ) {
+        functions.push(node);
+      }
+      ts.forEachChild(node, findFunction);
+    };
+    findFunction(sourceFile);
+    const callback = functions.length === 1 ? functions[0] : null;
+    if (!callback?.body) return new Set();
+    return collectReactCapturedRefNamesFromCallback(
+      callback.parameters,
+      callback.body,
+    );
   }
 
-  const resolved = resolveReactStyleExpression(expression, sourceFile);
-  if (!resolved) return "unknown";
-  const declarationKey = `${resolved.start}:${resolved.end}`;
-  if (resolving.has(declarationKey)) return "unknown";
-  resolving.add(declarationKey);
-  const result = inspectReactStyleExpression(
-    resolved.expression,
-    sourceFile,
-    resolving,
+  return collectReactCapturedRefNamesFromCallback(
+    expression.parameters,
+    expression.body,
   );
-  resolving.delete(declarationKey);
-  return result;
 }
 
-function resolveReactStyleExpression(
-  expression: TypeScript.Expression,
-  sourceFile: TypeScript.SourceFile,
-): { expression: TypeScript.Expression; start: number; end: number } | null {
-  const name = ts.isIdentifier(expression)
-    ? expression.text
-    : ts.isPropertyAccessExpression(expression) &&
-        ts.isIdentifier(expression.expression)
-      ? expression.expression.text
-      : null;
-  if (!name) return null;
-
-  if (hasReactStyleParameterShadow(expression, sourceFile, name)) return null;
+function collectReactCapturedRefNamesFromCallback(
+  parameters: TypeScript.NodeArray<TypeScript.ParameterDeclaration>,
+  body: TypeScript.ConciseBody,
+): Set<string> {
+  const capturedNames = new Set<string>();
+  const parameterNames = getReactCallbackParameterNames(parameters);
+  if (parameterNames.size === 0) return capturedNames;
 
-  const matches: TypeScript.VariableDeclaration[] = [];
   const visit = (node: TypeScript.Node): void => {
     if (
-      ts.isVariableDeclaration(node) &&
-      ts.isIdentifier(node.name) &&
-      node.name.text === name
+      ts.isBinaryExpression(node) &&
+      isReactAssignmentOperator(node.operatorToken.getText()) &&
+      ts.isIdentifier(node.left) &&
+      !parameterNames.has(node.left.text) &&
+      !isReactNameBoundWithinCallback(node, node.left.text, parameters, body) &&
+      isReactCallbackParameterDerivedExpression(
+        node.right,
+        parameterNames,
+        body,
+        new Set(),
+      )
     ) {
-      matches.push(node);
+      capturedNames.add(node.left.text);
     }
     ts.forEachChild(node, visit);
   };
-  visit(sourceFile);
-  if (matches.length !== 1) return null;
-  const declaration = matches[0]!;
-  const scope = reactVariableDeclarationScope(declaration);
-  if (!scope || !isReactNodeWithinScope(scope, expression)) return null;
-  const initializer = declaration.initializer;
-  if (
-    ts.isPropertyAccessExpression(expression) &&
-    initializer &&
-    ts.isObjectLiteralExpression(initializer)
-  ) {
-    const propertyName = expression.name.text;
-    const properties = initializer.properties.filter(
-      (property): property is TypeScript.PropertyAssignment =>
-        ts.isPropertyAssignment(property) &&
-        ((ts.isIdentifier(property.name) &&
-          property.name.text === propertyName) ||
-          (ts.isStringLiteral(property.name) &&
-            property.name.text === propertyName)),
+  visit(body);
+  return capturedNames;
+}
+
+function isReactNameBoundWithinCallback(
+  assignment: TypeScript.BinaryExpression,
+  name: string,
+  callbackParameters: TypeScript.NodeArray<TypeScript.ParameterDeclaration>,
+  callbackBody: TypeScript.ConciseBody,
+): boolean {
+  const bindingContainsName = (
+    bindingName: TypeScript.BindingName,
+  ): boolean => {
+    if (ts.isIdentifier(bindingName)) return bindingName.text === name;
+    return bindingName.elements.some(
+      (element) =>
+        !ts.isOmittedExpression(element) && bindingContainsName(element.name),
     );
-    if (properties.length === 1) {
-      return {
-        expression: properties[0]!.initializer,
-        start: properties[0]!.getStart(sourceFile),
-        end: properties[0]!.end,
-      };
-    }
-  }
-  return initializer
-    ? {
+  };
+  const hasFunctionScopedBinding = (
+    functionNode: TypeScript.FunctionLikeDeclaration,
+  ): boolean => {
+    if (
+      functionNode.parameters.some((parameter) =>
+        bindingContainsName(parameter.name),
+      )
+    ) {
+      return true;
+    }
+    if (
+      (ts.isFunctionExpression(functionNode) ||
+        ts.isFunctionDeclaration(functionNode)) &&
+      functionNode.name?.text === name
+    ) {
+      return true;
+    }
+
+    let found = false;
+    const visit = (node: TypeScript.Node): void => {
+      if (found || (node !== functionNode.body && isFunctionBoundary(node))) {
+        return;
+      }
+      if (
+        ts.isVariableDeclaration(node) &&
+        ts.isIdentifier(node.name) &&
+        node.name.text === name &&
+        node.parent &&
+        ts.isVariableDeclarationList(node.parent) &&
+        (node.parent.flags & (ts.NodeFlags.Let | ts.NodeFlags.Const)) === 0
+      ) {
+        found = true;
+        return;
+      }
+      ts.forEachChild(node, visit);
+    };
+    if (functionNode.body) visit(functionNode.body);
+    return found;
+  };
+  const hasBlockScopedBinding = (block: TypeScript.Block): boolean => {
+    let found = false;
+    const visit = (node: TypeScript.Node): void => {
+      if (
+        found ||
+        (node !== block && (ts.isBlock(node) || isFunctionBoundary(node)))
+      ) {
+        return;
+      }
+      if (
+        ts.isVariableDeclaration(node) &&
+        ts.isIdentifier(node.name) &&
+        node.name.text === name &&
+        node.parent &&
+        ts.isVariableDeclarationList(node.parent) &&
+        (node.parent.flags & (ts.NodeFlags.Let | ts.NodeFlags.Const)) !== 0
+      ) {
+        found = true;
+        return;
+      }
+      if (
+        (ts.isFunctionDeclaration(node) ||
+          ts.isClassDeclaration(node) ||
+          ts.isEnumDeclaration(node)) &&
+        node.name?.text === name
+      ) {
+        found = true;
+        return;
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(block);
+    return found;
+  };
+
+  if (
+    callbackParameters.some((parameter) => bindingContainsName(parameter.name))
+  ) {
+    return true;
+  }
+  for (
+    let current: TypeScript.Node | undefined = assignment.parent;
+    current;
+    current = current.parent
+  ) {
+    if (ts.isBlock(current) && hasBlockScopedBinding(current)) return true;
+    if (
+      isFunctionBoundary(current) &&
+      hasFunctionScopedBinding(current as TypeScript.FunctionLikeDeclaration)
+    ) {
+      return true;
+    }
+    if (current === callbackBody) {
+      const callbackFunction = current.parent;
+      if (
+        callbackFunction &&
+        isFunctionBoundary(callbackFunction) &&
+        hasFunctionScopedBinding(
+          callbackFunction as TypeScript.FunctionLikeDeclaration,
+        )
+      ) {
+        return true;
+      }
+      break;
+    }
+  }
+  return false;
+}
+
+function inspectReactStyleMutationCallback(
+  expression: TypeScript.Expression,
+  sourceFile: TypeScript.SourceFile,
+  resolving: Set<string>,
+  isRefCallback: boolean,
+  capturedMotionRefNames: ReadonlySet<string> = new Set(),
+  inspectLifecycleCalls = false,
+): ReactStyleInspection {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+
+  if (!ts.isArrowFunction(expression) && !ts.isFunctionExpression(expression)) {
+    if (ts.isIdentifier(expression)) {
+      const resolved = resolveReactStyleExpression(expression, sourceFile);
+      if (resolved) {
+        const declarationKey = `${resolved.start}:${resolved.end}`;
+        if (resolving.has(declarationKey)) return "unknown";
+        resolving.add(declarationKey);
+        const result = inspectReactStyleMutationCallback(
+          resolved.expression,
+          sourceFile,
+          resolving,
+          isRefCallback,
+          capturedMotionRefNames,
+          inspectLifecycleCalls,
+        );
+        resolving.delete(declarationKey);
+        return result;
+      }
+
+      const handlerName = expression.text;
+      const functions: TypeScript.FunctionDeclaration[] = [];
+      const findFunction = (node: TypeScript.Node): void => {
+        if (ts.isFunctionDeclaration(node) && node.name?.text === handlerName) {
+          functions.push(node);
+        }
+        ts.forEachChild(node, findFunction);
+      };
+      findFunction(sourceFile);
+      if (functions.length === 1 && functions[0]!.body) {
+        if (
+          isRefCallback &&
+          functions[0]!.parameters.some(
+            (parameter) => !ts.isIdentifier(parameter.name),
+          )
+        ) {
+          return "unknown";
+        }
+        const callback = functions[0]!;
+        const declarationKey = `${callback.getStart(sourceFile)}:${callback.end}`;
+        if (resolving.has(declarationKey)) return "unknown";
+        resolving.add(declarationKey);
+        const callbackParameterNames = getReactCallbackParameterNames(
+          callback.parameters,
+        );
+        const eventTargetBindings = isRefCallback
+          ? { targetNames: new Set<string>(), scalarNames: new Set<string>() }
+          : getReactCallbackEventTargetBindings(
+              callback.parameters,
+              callback.body!,
+              callbackParameterNames,
+            );
+        if (!isRefCallback) {
+          for (const name of capturedMotionRefNames) {
+            eventTargetBindings.targetNames.add(name);
+          }
+        }
+        const result = inspectReactStyleMutationBody(
+          callback.body!,
+          callbackParameterNames,
+          isRefCallback,
+          sourceFile,
+          eventTargetBindings.targetNames,
+          eventTargetBindings.scalarNames,
+          resolving,
+          inspectLifecycleCalls,
+        );
+        resolving.delete(declarationKey);
+        return result;
+      }
+    }
+    return "unknown";
+  }
+
+  if (
+    isRefCallback &&
+    expression.parameters.some((parameter) => !ts.isIdentifier(parameter.name))
+  ) {
+    return "unknown";
+  }
+
+  const callbackParameterNames = getReactCallbackParameterNames(
+    expression.parameters,
+  );
+  const eventTargetBindings = isRefCallback
+    ? { targetNames: new Set<string>(), scalarNames: new Set<string>() }
+    : getReactCallbackEventTargetBindings(
+        expression.parameters,
+        expression.body,
+        callbackParameterNames,
+      );
+  if (!isRefCallback) {
+    for (const name of capturedMotionRefNames) {
+      eventTargetBindings.targetNames.add(name);
+    }
+  }
+  return inspectReactStyleMutationBody(
+    expression.body,
+    callbackParameterNames,
+    isRefCallback,
+    sourceFile,
+    eventTargetBindings.targetNames,
+    eventTargetBindings.scalarNames,
+    resolving,
+    inspectLifecycleCalls,
+  );
+}
+
+function inspectReactStyleMutationBody(
+  body: TypeScript.ConciseBody,
+  callbackParameterNames: Set<string>,
+  isRefCallback: boolean,
+  sourceFile: TypeScript.SourceFile,
+  eventTargetNames: Set<string>,
+  eventTargetScalarNames: Set<string>,
+  resolving: Set<string>,
+  inspectLifecycleCalls: boolean,
+): ReactStyleInspection {
+  let inspection: ReactStyleInspection = "safe";
+  const visit = (node: TypeScript.Node): void => {
+    if (inspection !== "safe") return;
+
+    if (isReactGlobalDocumentReference(node, sourceFile)) {
+      inspection = "unknown";
+      return;
+    }
+
+    if (inspectLifecycleCalls && ts.isCallExpression(node)) {
+      const callInspection = inspectReactLifecycleHelperCall(
+        node,
+        sourceFile,
+        resolving,
+        eventTargetNames,
+      );
+      if (callInspection !== "safe") {
+        inspection = callInspection;
+        return;
+      }
+    }
+
+    if (
+      isRefCallback &&
+      ts.isBinaryExpression(node) &&
+      isReactAssignmentOperator(node.operatorToken.getText()) &&
+      containsReactCallbackParameterReference(
+        node.right,
+        callbackParameterNames,
+      ) &&
+      (!ts.isIdentifier(node.left) ||
+        !isReactCallbackParameterDerivedExpression(
+          node.right,
+          callbackParameterNames,
+          body,
+          new Set(),
+        ))
+    ) {
+      inspection = "unknown";
+      return;
+    }
+
+    if (
+      isRefCallback &&
+      ts.isVariableDeclaration(node) &&
+      !ts.isIdentifier(node.name) &&
+      node.initializer &&
+      isReactCallbackParameterDerivedExpression(
+        node.initializer,
+        callbackParameterNames,
+        body,
+        new Set(),
+      )
+    ) {
+      inspection = "unknown";
+      return;
+    }
+
+    if (
+      isRefCallback &&
+      ((ts.isCallExpression(node) &&
+        isReactRefTargetMethodCall(node, callbackParameterNames, body)) ||
+        isReactRefTargetMemberAccess(node, callbackParameterNames, body) ||
+        (ts.isBinaryExpression(node) &&
+          isReactRefTargetMemberAssignment(node, callbackParameterNames, body)))
+    ) {
+      inspection = "unknown";
+      return;
+    }
+
+    if (
+      !isRefCallback &&
+      isReactEventTargetMutation(
+        node,
+        callbackParameterNames,
+        body,
+        eventTargetNames,
+      )
+    ) {
+      inspection = "unknown";
+      return;
+    }
+
+    if (
+      !isRefCallback &&
+      ts.isIdentifier(node) &&
+      eventTargetNames.has(node.text) &&
+      !isReactStaticPropertyName(node) &&
+      !isReactBindingNameIdentifier(node)
+    ) {
+      const access = getReactMemberAccessFollowing(node);
+      if (
+        !access ||
+        !isReactSafeEventTargetScalarValue(
+          access,
+          callbackParameterNames,
+          body,
+          eventTargetNames,
+          eventTargetScalarNames,
+        )
+      ) {
+        inspection = "unknown";
+        return;
+      }
+    }
+
+    if (
+      ts.isPropertyAccessExpression(node) &&
+      ["style", ...REACT_EVENT_TARGET_PROPERTIES, "current"].includes(
+        node.name.text,
+      )
+    ) {
+      inspection =
+        node.name.text === "style"
+          ? "motion"
+          : !isRefCallback &&
+              isReactSafeEventTargetScalarRead(
+                node,
+                callbackParameterNames,
+                body,
+                eventTargetNames,
+              )
+            ? "safe"
+            : "unknown";
+      return;
+    }
+    if (
+      ts.isElementAccessExpression(node) &&
+      node.argumentExpression &&
+      ts.isStringLiteralLike(node.argumentExpression) &&
+      ["style", ...REACT_EVENT_TARGET_PROPERTIES, "current"].includes(
+        node.argumentExpression.text,
+      )
+    ) {
+      inspection =
+        node.argumentExpression.text === "style"
+          ? "motion"
+          : !isRefCallback &&
+              isReactSafeEventTargetScalarRead(
+                node,
+                callbackParameterNames,
+                body,
+                eventTargetNames,
+              )
+            ? "safe"
+            : "unknown";
+      return;
+    }
+
+    if (
+      ts.isCallExpression(node) &&
+      node.arguments.some(
+        (argument) =>
+          containsReactCallbackParameterReference(
+            argument,
+            callbackParameterNames,
+          ) &&
+          !isReactSafeEventTargetScalarValue(
+            argument,
+            callbackParameterNames,
+            body,
+            eventTargetNames,
+            eventTargetScalarNames,
+          ),
+      )
+    ) {
+      inspection = "unknown";
+      return;
+    }
+
+    ts.forEachChild(node, visit);
+  };
+  visit(body);
+  return inspection;
+}
+
+function inspectReactLifecycleHelperCall(
+  call: TypeScript.CallExpression,
+  sourceFile: TypeScript.SourceFile,
+  resolving: Set<string>,
+  capturedMotionRefNames: ReadonlySet<string>,
+): ReactStyleInspection {
+  if (call.arguments.length > 0) return "unknown";
+  const callee = unwrapReactMotionExpression(call.expression);
+  if (!ts.isIdentifier(callee)) return "unknown";
+  return inspectReactStyleMutationCallback(
+    callee,
+    sourceFile,
+    resolving,
+    false,
+    capturedMotionRefNames,
+    true,
+  );
+}
+
+function isReactGlobalDocumentReference(
+  node: TypeScript.Node,
+  sourceFile: TypeScript.SourceFile,
+  resolving = new Set<string>(),
+): boolean {
+  if (ts.isIdentifier(node) && node.text === "document") {
+    return !isReactStaticPropertyName(node);
+  }
+
+  const propertyAccess = ts.isPropertyAccessExpression(node) ? node : null;
+  const elementAccess = ts.isElementAccessExpression(node) ? node : null;
+  const receiver =
+    propertyAccess?.expression ?? elementAccess?.expression ?? null;
+  const propertyName = propertyAccess
+    ? propertyAccess.name.text
+    : elementAccess?.argumentExpression &&
+        ts.isStringLiteralLike(elementAccess.argumentExpression)
+      ? elementAccess.argumentExpression.text
+      : null;
+  if (
+    propertyName === "document" &&
+    receiver !== null &&
+    isReactGlobalObjectReference(receiver, sourceFile, resolving)
+  ) {
+    return true;
+  }
+
+  if (!ts.isIdentifier(node) || isReactStaticPropertyName(node)) return false;
+  const resolved = resolveReactStyleExpression(node, sourceFile);
+  if (!resolved) return false;
+  const declarationKey = `${resolved.start}:${resolved.end}`;
+  if (resolving.has(declarationKey)) return true;
+  resolving.add(declarationKey);
+
+  let found = false;
+  const visit = (current: TypeScript.Node): void => {
+    if (found) return;
+    if (isReactGlobalDocumentReference(current, sourceFile, resolving)) {
+      found = true;
+      return;
+    }
+    ts.forEachChild(current, visit);
+  };
+  visit(resolved.expression);
+  resolving.delete(declarationKey);
+  return found;
+}
+
+function isReactGlobalObjectReference(
+  expression: TypeScript.Expression,
+  sourceFile: TypeScript.SourceFile,
+  resolving: Set<string>,
+): boolean {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+  if (!ts.isIdentifier(expression) || isReactStaticPropertyName(expression)) {
+    return false;
+  }
+  if (
+    ["globalThis", "self", "window"].includes(expression.text) &&
+    !hasReactStyleParameterShadow(expression, sourceFile, expression.text) &&
+    !resolveReactStyleExpression(expression, sourceFile)
+  ) {
+    return true;
+  }
+
+  const resolved = resolveReactStyleExpression(expression, sourceFile);
+  if (!resolved) return false;
+  const declarationKey = `${resolved.start}:${resolved.end}`;
+  if (resolving.has(declarationKey)) return false;
+  resolving.add(declarationKey);
+  const isGlobal = isReactGlobalObjectReference(
+    resolved.expression,
+    sourceFile,
+    resolving,
+  );
+  resolving.delete(declarationKey);
+  return isGlobal;
+}
+
+function isReactLifecycleEffectCall(
+  call: TypeScript.CallExpression,
+  sourceFile: TypeScript.SourceFile,
+): boolean {
+  return isReactLifecycleEffectExpression(call.expression, sourceFile);
+}
+
+function isReactLifecycleEffectExpression(
+  expression: TypeScript.Expression,
+  sourceFile: TypeScript.SourceFile,
+  resolving = new Set<string>(),
+): boolean {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+  if (ts.isPropertyAccessExpression(expression)) {
+    return ["useEffect", "useLayoutEffect", "useInsertionEffect"].includes(
+      expression.name.text,
+    );
+  }
+  if (!ts.isIdentifier(expression)) return false;
+  if (
+    ["useEffect", "useLayoutEffect", "useInsertionEffect"].includes(
+      expression.text,
+    )
+  ) {
+    return true;
+  }
+
+  const importedReactHook = sourceFile.statements.some((statement) => {
+    if (
+      !ts.isImportDeclaration(statement) ||
+      !ts.isStringLiteral(statement.moduleSpecifier) ||
+      statement.moduleSpecifier.text !== "react"
+    ) {
+      return false;
+    }
+    const namedBindings = statement.importClause?.namedBindings;
+    return (
+      !!namedBindings &&
+      ts.isNamedImports(namedBindings) &&
+      namedBindings.elements.some(
+        (element) =>
+          element.name.text === expression.text &&
+          ["useEffect", "useLayoutEffect", "useInsertionEffect"].includes(
+            element.propertyName?.text ?? element.name.text,
+          ),
+      )
+    );
+  });
+  if (importedReactHook) return true;
+
+  const resolved = resolveReactStyleExpression(expression, sourceFile);
+  if (!resolved) return false;
+  const declarationKey = `${resolved.start}:${resolved.end}`;
+  if (resolving.has(declarationKey)) return false;
+  resolving.add(declarationKey);
+  const isEffect = isReactLifecycleEffectExpression(
+    resolved.expression,
+    sourceFile,
+    resolving,
+  );
+  resolving.delete(declarationKey);
+  return isEffect;
+}
+
+function inspectReactJsxSpreadExpression(
+  expression: TypeScript.Expression,
+  sourceFile: TypeScript.SourceFile,
+  resolving: Set<string>,
+  capturedMotionRefNames: ReadonlySet<string> = new Set(),
+): ReactStyleInspection {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+
+  if (!ts.isObjectLiteralExpression(expression)) {
+    const resolved = resolveReactStyleExpression(expression, sourceFile);
+    if (!resolved) return "unknown";
+    const declarationKey = `${resolved.start}:${resolved.end}`;
+    if (resolving.has(declarationKey)) return "unknown";
+    resolving.add(declarationKey);
+    const result = inspectReactJsxSpreadExpression(
+      resolved.expression,
+      sourceFile,
+      resolving,
+      capturedMotionRefNames,
+    );
+    resolving.delete(declarationKey);
+    return result;
+  }
+
+  for (const property of expression.properties) {
+    if (ts.isSpreadAssignment(property)) {
+      const inspection = inspectReactJsxSpreadExpression(
+        property.expression,
+        sourceFile,
+        resolving,
+        capturedMotionRefNames,
+      );
+      if (inspection !== "safe") return inspection;
+      continue;
+    }
+
+    const name =
+      ts.isPropertyAssignment(property) ||
+      ts.isShorthandPropertyAssignment(property)
+        ? property.name
+        : null;
+    if (!name) return "unknown";
+    const propertyName =
+      ts.isIdentifier(name) || ts.isStringLiteral(name)
+        ? name.text
+        : ts.isComputedPropertyName(name) && ts.isStringLiteral(name.expression)
+          ? name.expression.text
+          : null;
+    if (!propertyName) return "unknown";
+
+    const value = ts.isPropertyAssignment(property)
+      ? property.initializer
+      : ts.isShorthandPropertyAssignment(property)
+        ? property.name
+        : null;
+    if (!value) return "unknown";
+
+    let inspection: ReactStyleInspection;
+    if (propertyName === "style") {
+      inspection = inspectReactStyleExpression(value, sourceFile, new Set());
+    } else if (propertyName === "css" || propertyName === "sx") {
+      inspection = inspectReactCssExpression(
+        value,
+        sourceFile,
+        new Set(),
+        true,
+      );
+    } else if (propertyName === "ref" || /^on[A-Z]/.test(propertyName)) {
+      inspection = inspectReactStyleMutationCallback(
+        value,
+        sourceFile,
+        new Set(),
+        propertyName === "ref",
+        capturedMotionRefNames,
+      );
+    } else if (
+      ["class", "className", "children", "dangerouslySetInnerHTML"].includes(
+        propertyName,
+      )
+    ) {
+      inspection = "unknown";
+    } else {
+      inspection = isStaticReactJsxSpreadValue(value) ? "safe" : "unknown";
+    }
+    if (inspection !== "safe") return inspection;
+  }
+
+  return "safe";
+}
+
+function isStaticReactJsxSpreadValue(
+  expression: TypeScript.Expression,
+): boolean {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+
+  return (
+    ts.isStringLiteralLike(expression) ||
+    ts.isNumericLiteral(expression) ||
+    expression.kind === ts.SyntaxKind.TrueKeyword ||
+    expression.kind === ts.SyntaxKind.FalseKeyword ||
+    expression.kind === ts.SyntaxKind.NullKeyword ||
+    (ts.isIdentifier(expression) && expression.text === "undefined")
+  );
+}
+
+function isReactRefTargetMethodCall(
+  call: TypeScript.CallExpression,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+): boolean {
+  const callee = call.expression;
+  const propertyAccess = ts.isPropertyAccessExpression(callee) ? callee : null;
+  const elementAccess = ts.isElementAccessExpression(callee) ? callee : null;
+  const receiver =
+    propertyAccess?.expression ?? elementAccess?.expression ?? null;
+  if (
+    !receiver ||
+    !isReactCallbackParameterDerivedExpression(
+      receiver,
+      callbackParameterNames,
+      body,
+      new Set(),
+    )
+  ) {
+    return false;
+  }
+
+  const argumentExpression = elementAccess?.argumentExpression;
+  const methodName = propertyAccess
+    ? propertyAccess.name.text
+    : argumentExpression && ts.isStringLiteralLike(argumentExpression)
+      ? argumentExpression.text
+      : null;
+  return !methodName || !REACT_REF_READ_METHODS.has(methodName);
+}
+
+function isReactRefTargetMemberAccess(
+  node: TypeScript.Node,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+): boolean {
+  const propertyAccess = ts.isPropertyAccessExpression(node) ? node : null;
+  const elementAccess = ts.isElementAccessExpression(node) ? node : null;
+  const receiver =
+    propertyAccess?.expression ?? elementAccess?.expression ?? null;
+  if (
+    !receiver ||
+    !isReactCallbackParameterDerivedExpression(
+      receiver,
+      callbackParameterNames,
+      body,
+      new Set(),
+    )
+  ) {
+    return false;
+  }
+
+  const argumentExpression = elementAccess?.argumentExpression;
+  const propertyName = propertyAccess
+    ? propertyAccess.name.text
+    : argumentExpression && ts.isStringLiteralLike(argumentExpression)
+      ? argumentExpression.text
+      : null;
+  return !propertyName || !REACT_REF_READ_METHODS.has(propertyName);
+}
+
+function isReactRefTargetMemberAssignment(
+  assignment: TypeScript.BinaryExpression,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+): boolean {
+  if (!isReactAssignmentOperator(assignment.operatorToken.getText())) {
+    return false;
+  }
+
+  const left = assignment.left;
+  const receiver = ts.isPropertyAccessExpression(left)
+    ? left.expression
+    : ts.isElementAccessExpression(left)
+      ? left.expression
+      : null;
+  return (
+    receiver !== null &&
+    isReactCallbackParameterDerivedExpression(
+      receiver,
+      callbackParameterNames,
+      body,
+      new Set(),
+    )
+  );
+}
+
+function isReactSafeEventTargetScalarRead(
+  node:
+    | TypeScript.PropertyAccessExpression
+    | TypeScript.ElementAccessExpression,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+  eventTargetNames: Set<string>,
+): boolean {
+  const parent = getReactMemberAccessFollowing(node);
+  const propertyName = parent
+    ? ts.isPropertyAccessExpression(parent)
+      ? parent.name.text
+      : parent.argumentExpression &&
+          ts.isStringLiteralLike(parent.argumentExpression)
+        ? parent.argumentExpression.text
+        : null
+    : null;
+  return (
+    propertyName !== null &&
+    REACT_EVENT_TARGET_SCALAR_PROPERTIES.has(propertyName) &&
+    isReactEventTargetBaseAccess(
+      node,
+      callbackParameterNames,
+      body,
+      eventTargetNames,
+    )
+  );
+}
+
+function isReactSafeEventTargetScalarValue(
+  expression: TypeScript.Expression,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+  eventTargetNames: Set<string>,
+  eventTargetScalarNames: Set<string>,
+): boolean {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression) ||
+    ts.isNonNullExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+  if (
+    ts.isIdentifier(expression) &&
+    eventTargetScalarNames.has(expression.text)
+  ) {
+    return true;
+  }
+  if (ts.isPropertyAccessExpression(expression)) {
+    return (
+      REACT_EVENT_TARGET_SCALAR_PROPERTIES.has(expression.name.text) &&
+      isReactEventTargetBaseAccess(
+        expression.expression,
+        callbackParameterNames,
+        body,
+        eventTargetNames,
+      )
+    );
+  }
+  if (ts.isElementAccessExpression(expression)) {
+    const propertyName = expression.argumentExpression;
+    return (
+      !!propertyName &&
+      ts.isStringLiteralLike(propertyName) &&
+      REACT_EVENT_TARGET_SCALAR_PROPERTIES.has(propertyName.text) &&
+      isReactEventTargetBaseAccess(
+        expression.expression,
+        callbackParameterNames,
+        body,
+        eventTargetNames,
+      )
+    );
+  }
+  if (ts.isCallExpression(expression) && expression.arguments.length === 0) {
+    const callee = unwrapReactMotionExpression(expression.expression);
+    return (
+      ts.isPropertyAccessExpression(callee) &&
+      REACT_EVENT_TARGET_SCALAR_METHODS.has(callee.name.text) &&
+      isReactSafeEventTargetScalarValue(
+        callee.expression,
+        callbackParameterNames,
+        body,
+        eventTargetNames,
+        eventTargetScalarNames,
+      )
+    );
+  }
+  return false;
+}
+
+function isReactEventTargetBaseAccess(
+  expression: TypeScript.Expression,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+  eventTargetNames: Set<string>,
+): boolean {
+  expression = unwrapReactMotionExpression(expression);
+  if (ts.isIdentifier(expression) && eventTargetNames.has(expression.text)) {
+    return true;
+  }
+  if (ts.isPropertyAccessExpression(expression)) {
+    return (
+      REACT_EVENT_TARGET_PROPERTIES.has(expression.name.text) &&
+      isReactCallbackParameterDerivedExpression(
+        expression.expression,
+        callbackParameterNames,
+        body,
+        new Set(),
+      )
+    );
+  }
+  if (ts.isElementAccessExpression(expression)) {
+    const propertyName = expression.argumentExpression;
+    return (
+      !!propertyName &&
+      ts.isStringLiteralLike(propertyName) &&
+      REACT_EVENT_TARGET_PROPERTIES.has(propertyName.text) &&
+      isReactCallbackParameterDerivedExpression(
+        expression.expression,
+        callbackParameterNames,
+        body,
+        new Set(),
+      )
+    );
+  }
+  return false;
+}
+
+function getReactMemberAccessFollowing(
+  node: TypeScript.Node,
+):
+  | TypeScript.PropertyAccessExpression
+  | TypeScript.ElementAccessExpression
+  | null {
+  let current: TypeScript.Node = node;
+  let parent = current.parent;
+  while (
+    (ts.isParenthesizedExpression(parent) ||
+      ts.isAsExpression(parent) ||
+      ts.isTypeAssertionExpression(parent) ||
+      ts.isSatisfiesExpression(parent) ||
+      ts.isNonNullExpression(parent)) &&
+    parent.expression === current
+  ) {
+    current = parent;
+    parent = current.parent;
+  }
+  return (ts.isPropertyAccessExpression(parent) ||
+    ts.isElementAccessExpression(parent)) &&
+    parent.expression === current
+    ? parent
+    : null;
+}
+
+function unwrapReactMotionExpression(
+  expression: TypeScript.Expression,
+): TypeScript.Expression {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression) ||
+    ts.isNonNullExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+  return expression;
+}
+
+function isReactEventTargetMutation(
+  node: TypeScript.Node,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+  eventTargetNames: Set<string>,
+): boolean {
+  if (ts.isBinaryExpression(node)) {
+    return (
+      isReactAssignmentOperator(node.operatorToken.getText()) &&
+      containsReactEventTargetBaseAccess(
+        node.left,
+        callbackParameterNames,
+        body,
+        eventTargetNames,
+      )
+    );
+  }
+  if (ts.isPrefixUnaryExpression(node)) {
+    return (
+      [
+        ts.SyntaxKind.DeleteKeyword,
+        ts.SyntaxKind.PlusPlusToken,
+        ts.SyntaxKind.MinusMinusToken,
+      ].includes(node.operator) &&
+      containsReactEventTargetBaseAccess(
+        node.operand,
+        callbackParameterNames,
+        body,
+        eventTargetNames,
+      )
+    );
+  }
+  if (ts.isPostfixUnaryExpression(node)) {
+    return (
+      [ts.SyntaxKind.PlusPlusToken, ts.SyntaxKind.MinusMinusToken].includes(
+        node.operator,
+      ) &&
+      containsReactEventTargetBaseAccess(
+        node.operand,
+        callbackParameterNames,
+        body,
+        eventTargetNames,
+      )
+    );
+  }
+  return false;
+}
+
+function containsReactEventTargetBaseAccess(
+  expression: TypeScript.Expression,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+  eventTargetNames: Set<string>,
+): boolean {
+  expression = unwrapReactMotionExpression(expression);
+  if (
+    isReactEventTargetBaseAccess(
+      expression,
+      callbackParameterNames,
+      body,
+      eventTargetNames,
+    )
+  ) {
+    return true;
+  }
+  if (
+    ts.isPropertyAccessExpression(expression) ||
+    ts.isElementAccessExpression(expression)
+  ) {
+    return containsReactEventTargetBaseAccess(
+      expression.expression,
+      callbackParameterNames,
+      body,
+      eventTargetNames,
+    );
+  }
+  return false;
+}
+
+function isReactAssignmentOperator(operator: string): boolean {
+  return [
+    "=",
+    "+=",
+    "-=",
+    "*=",
+    "**=",
+    "/=",
+    "%=",
+    "<<=",
+    ">>=",
+    ">>>=",
+    "&=",
+    "|=",
+    "^=",
+    "&&=",
+    "||=",
+    "??=",
+  ].includes(operator);
+}
+
+function isReactCallbackParameterDerivedExpression(
+  expression: TypeScript.Expression,
+  callbackParameterNames: Set<string>,
+  body: TypeScript.ConciseBody,
+  resolving: Set<string>,
+): boolean {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression) ||
+    ts.isNonNullExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+
+  if (ts.isIdentifier(expression)) {
+    if (callbackParameterNames.has(expression.text)) return true;
+    if (resolving.has(expression.text)) return false;
+
+    const assignments: TypeScript.Expression[] = [];
+    const visit = (node: TypeScript.Node): void => {
+      if (
+        ts.isVariableDeclaration(node) &&
+        ts.isIdentifier(node.name) &&
+        node.name.text === expression.text &&
+        node.initializer
+      ) {
+        assignments.push(node.initializer);
+      } else if (
+        ts.isBinaryExpression(node) &&
+        ts.isIdentifier(node.left) &&
+        node.left.text === expression.text &&
+        isReactAssignmentOperator(node.operatorToken.getText())
+      ) {
+        assignments.push(node.right);
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(body);
+    if (assignments.length === 0) return false;
+
+    resolving.add(expression.text);
+    const derived = assignments.some((assignment) =>
+      isReactCallbackParameterDerivedExpression(
+        assignment,
+        callbackParameterNames,
+        body,
+        resolving,
+      ),
+    );
+    resolving.delete(expression.text);
+    return derived;
+  }
+
+  if (ts.isPropertyAccessExpression(expression)) {
+    return isReactCallbackParameterDerivedExpression(
+      expression.expression,
+      callbackParameterNames,
+      body,
+      resolving,
+    );
+  }
+  if (ts.isElementAccessExpression(expression)) {
+    return isReactCallbackParameterDerivedExpression(
+      expression.expression,
+      callbackParameterNames,
+      body,
+      resolving,
+    );
+  }
+  if (ts.isCallExpression(expression)) {
+    const callee = expression.expression;
+    const receiver = ts.isPropertyAccessExpression(callee)
+      ? callee.expression
+      : ts.isElementAccessExpression(callee)
+        ? callee.expression
+        : null;
+    return (
+      receiver !== null &&
+      isReactCallbackParameterDerivedExpression(
+        receiver,
+        callbackParameterNames,
+        body,
+        resolving,
+      )
+    );
+  }
+  return false;
+}
+
+function containsReactCallbackParameterReference(
+  node: TypeScript.Node,
+  callbackParameterNames: Set<string>,
+): boolean {
+  let found = false;
+  const visit = (current: TypeScript.Node): void => {
+    if (found) return;
+    if (
+      ts.isIdentifier(current) &&
+      callbackParameterNames.has(current.text) &&
+      !isReactStaticPropertyName(current)
+    ) {
+      found = true;
+      return;
+    }
+    ts.forEachChild(current, visit);
+  };
+  visit(node);
+  return found;
+}
+
+function isReactStaticPropertyName(node: TypeScript.Identifier): boolean {
+  const parent = node.parent;
+  return (
+    (ts.isPropertyAccessExpression(parent) && parent.name === node) ||
+    ((ts.isPropertyAssignment(parent) ||
+      ts.isMethodDeclaration(parent) ||
+      ts.isMethodSignature(parent) ||
+      ts.isPropertyDeclaration(parent) ||
+      ts.isPropertySignature(parent)) &&
+      parent.name === node &&
+      !ts.isComputedPropertyName(parent.name))
+  );
+}
+
+function isReactBindingNameIdentifier(node: TypeScript.Identifier): boolean {
+  const parent = node.parent;
+  return (
+    (ts.isBindingElement(parent) && parent.name === node) ||
+    (ts.isParameter(parent) && parent.name === node) ||
+    (ts.isVariableDeclaration(parent) && parent.name === node)
+  );
+}
+
+function getReactCallbackParameterNames(
+  parameters: TypeScript.NodeArray<TypeScript.ParameterDeclaration>,
+): Set<string> {
+  const names = new Set<string>();
+  const addBindingNames = (bindingName: TypeScript.BindingName): void => {
+    if (ts.isIdentifier(bindingName)) {
+      names.add(bindingName.text);
+      return;
+    }
+    if (ts.isObjectBindingPattern(bindingName)) {
+      for (const element of bindingName.elements) {
+        addBindingNames(element.name);
+      }
+      return;
+    }
+    for (const element of bindingName.elements) {
+      if (!ts.isOmittedExpression(element)) addBindingNames(element.name);
+    }
+  };
+
+  for (const parameter of parameters) addBindingNames(parameter.name);
+  return names;
+}
+
+interface ReactCallbackEventTargetBindings {
+  targetNames: Set<string>;
+  scalarNames: Set<string>;
+}
+
+function getReactCallbackEventTargetBindings(
+  parameters: TypeScript.NodeArray<TypeScript.ParameterDeclaration>,
+  body: TypeScript.ConciseBody,
+  callbackParameterNames: Set<string>,
+): ReactCallbackEventTargetBindings {
+  const targetNames = new Set<string>();
+  const scalarNames = new Set<string>();
+  const eventObjectNames = new Set(
+    parameters.flatMap((parameter) =>
+      ts.isIdentifier(parameter.name) ? [parameter.name.text] : [],
+    ),
+  );
+  const localDeclarations: TypeScript.VariableDeclaration[] = [];
+  const addBindingNames = (
+    bindingName: TypeScript.BindingName,
+    into: Set<string>,
+  ): boolean => {
+    if (ts.isIdentifier(bindingName)) {
+      const previousSize = into.size;
+      into.add(bindingName.text);
+      return into.size !== previousSize;
+    }
+    let changed = false;
+    if (ts.isObjectBindingPattern(bindingName)) {
+      for (const element of bindingName.elements) {
+        changed = addBindingNames(element.name, into) || changed;
+      }
+      return changed;
+    }
+    for (const element of bindingName.elements) {
+      if (!ts.isOmittedExpression(element)) {
+        changed = addBindingNames(element.name, into) || changed;
+      }
+    }
+    return changed;
+  };
+
+  const addTargetObjectBinding = (
+    bindingName: TypeScript.BindingName,
+  ): boolean => {
+    if (!ts.isObjectBindingPattern(bindingName)) {
+      return addBindingNames(bindingName, targetNames);
+    }
+    let changed = false;
+    for (const element of bindingName.elements) {
+      const propertyName = element.propertyName
+        ? getReactStaticBindingPropertyName(element.propertyName)
+        : ts.isIdentifier(element.name)
+          ? element.name.text
+          : null;
+      if (
+        !element.dotDotDotToken &&
+        propertyName &&
+        REACT_EVENT_TARGET_SCALAR_PROPERTIES.has(propertyName) &&
+        ts.isIdentifier(element.name)
+      ) {
+        const previousSize = scalarNames.size;
+        scalarNames.add(element.name.text);
+        changed = scalarNames.size !== previousSize || changed;
+      } else {
+        changed = addBindingNames(element.name, targetNames) || changed;
+      }
+    }
+    return changed;
+  };
+
+  const addEventObjectBinding = (
+    bindingName: TypeScript.BindingName,
+  ): boolean => {
+    if (!ts.isObjectBindingPattern(bindingName)) {
+      return addBindingNames(bindingName, targetNames);
+    }
+    let changed = false;
+    for (const element of bindingName.elements) {
+      const propertyName = element.propertyName
+        ? getReactStaticBindingPropertyName(element.propertyName)
+        : ts.isIdentifier(element.name)
+          ? element.name.text
+          : null;
+      if (
+        !element.dotDotDotToken &&
+        propertyName &&
+        REACT_EVENT_TARGET_PROPERTIES.has(propertyName)
+      ) {
+        if (ts.isIdentifier(element.name)) {
+          const previousSize = targetNames.size;
+          targetNames.add(element.name.text);
+          changed = targetNames.size !== previousSize || changed;
+        } else {
+          changed = addTargetObjectBinding(element.name) || changed;
+        }
+      } else if (element.dotDotDotToken) {
+        changed = addBindingNames(element.name, targetNames) || changed;
+      }
+    }
+    return changed;
+  };
+
+  for (const parameter of parameters) {
+    if (!ts.isObjectBindingPattern(parameter.name)) continue;
+    addEventObjectBinding(parameter.name);
+  }
+
+  const collectDeclarations = (node: TypeScript.Node): void => {
+    if (ts.isVariableDeclaration(node)) localDeclarations.push(node);
+    ts.forEachChild(node, collectDeclarations);
+  };
+  collectDeclarations(body);
+
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const declaration of localDeclarations) {
+      if (!declaration.initializer) continue;
+      const initializer = unwrapReactMotionExpression(declaration.initializer);
+      if (
+        ts.isIdentifier(declaration.name) &&
+        ts.isIdentifier(initializer) &&
+        eventObjectNames.has(initializer.text)
+      ) {
+        const previousSize = eventObjectNames.size;
+        eventObjectNames.add(declaration.name.text);
+        changed = eventObjectNames.size !== previousSize || changed;
+        continue;
+      }
+      if (
+        ts.isObjectBindingPattern(declaration.name) &&
+        ts.isIdentifier(initializer) &&
+        eventObjectNames.has(initializer.text)
+      ) {
+        changed = addEventObjectBinding(declaration.name) || changed;
+        continue;
+      }
+      if (
+        ts.isObjectBindingPattern(declaration.name) &&
+        isReactEventTargetBaseAccess(
+          initializer,
+          callbackParameterNames,
+          body,
+          targetNames,
+        )
+      ) {
+        changed = addTargetObjectBinding(declaration.name) || changed;
+      }
+    }
+  }
+  return { targetNames, scalarNames };
+}
+
+function getReactStaticBindingPropertyName(
+  name: TypeScript.PropertyName,
+): string | null {
+  if (ts.isIdentifier(name) || ts.isStringLiteralLike(name)) return name.text;
+  return ts.isComputedPropertyName(name) &&
+    ts.isStringLiteralLike(name.expression)
+    ? name.expression.text
+    : null;
+}
+
+function inspectReactStyleExpression(
+  expression: TypeScript.Expression,
+  sourceFile: TypeScript.SourceFile,
+  resolving: Set<string>,
+): ReactStyleInspection {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+
+  if (expression.kind === ts.SyntaxKind.NullKeyword) return "safe";
+  if (ts.isObjectLiteralExpression(expression)) {
+    for (const property of expression.properties) {
+      if (ts.isSpreadAssignment(property)) return "unknown";
+      const name = ts.isPropertyAssignment(property)
+        ? property.name
+        : ts.isShorthandPropertyAssignment(property)
+          ? property.name
+          : null;
+      const text = name
+        ? ts.isIdentifier(name) || ts.isStringLiteral(name)
+          ? name.text
+          : null
+        : null;
+      if (text && isReactMotionStylePropName(text)) return "motion";
+      if (!text) return "unknown";
+    }
+    return "safe";
+  }
+
+  const resolved = resolveReactStyleExpression(expression, sourceFile);
+  if (!resolved) return "unknown";
+  const declarationKey = `${resolved.start}:${resolved.end}`;
+  if (resolving.has(declarationKey)) return "unknown";
+  resolving.add(declarationKey);
+  const result = inspectReactStyleExpression(
+    resolved.expression,
+    sourceFile,
+    resolving,
+  );
+  resolving.delete(declarationKey);
+  return result;
+}
+
+function inspectReactCssExpression(
+  expression: TypeScript.Expression,
+  sourceFile: TypeScript.SourceFile,
+  resolving: Set<string>,
+  inspectRootCssString = false,
+): ReactStyleInspection {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+
+  if (inspectRootCssString && isReactCssStringLiteral(expression)) {
+    return inspectReactCssString(expression.text);
+  }
+  if (isStaticReactCssValueExpression(expression)) return "safe";
+  if (ts.isObjectLiteralExpression(expression)) {
+    for (const property of expression.properties) {
+      if (ts.isSpreadAssignment(property)) return "unknown";
+      if (
+        !ts.isPropertyAssignment(property) &&
+        !ts.isShorthandPropertyAssignment(property)
+      ) {
+        return "unknown";
+      }
+      const name = property.name;
+      const text =
+        ts.isIdentifier(name) || ts.isStringLiteral(name) ? name.text : null;
+      if (!text) return "unknown";
+      if (isReactMotionStylePropName(text)) return "motion";
+      const valueExpression = ts.isPropertyAssignment(property)
+        ? property.initializer
+        : property.name;
+      if (!isStaticReactCssValueExpression(valueExpression)) {
+        const nested = inspectReactCssExpression(
+          valueExpression,
+          sourceFile,
+          resolving,
+        );
+        if (nested !== "safe") return nested;
+      }
+    }
+    return "safe";
+  }
+
+  const resolved = resolveReactStyleExpression(expression, sourceFile);
+  if (!resolved) return "unknown";
+  const declarationKey = `${resolved.start}:${resolved.end}`;
+  if (resolving.has(declarationKey)) return "unknown";
+  resolving.add(declarationKey);
+  const result = inspectReactCssExpression(
+    resolved.expression,
+    sourceFile,
+    resolving,
+    inspectRootCssString,
+  );
+  resolving.delete(declarationKey);
+  return result;
+}
+
+function resolveReactStyleExpression(
+  expression: TypeScript.Expression,
+  sourceFile: TypeScript.SourceFile,
+): { expression: TypeScript.Expression; start: number; end: number } | null {
+  const name = ts.isIdentifier(expression)
+    ? expression.text
+    : ts.isPropertyAccessExpression(expression) &&
+        ts.isIdentifier(expression.expression)
+      ? expression.expression.text
+      : null;
+  if (!name) return null;
+
+  if (hasReactStyleParameterShadow(expression, sourceFile, name)) return null;
+
+  const matches: TypeScript.VariableDeclaration[] = [];
+  const visit = (node: TypeScript.Node): void => {
+    if (
+      ts.isVariableDeclaration(node) &&
+      ts.isIdentifier(node.name) &&
+      node.name.text === name
+    ) {
+      matches.push(node);
+    }
+    ts.forEachChild(node, visit);
+  };
+  visit(sourceFile);
+  if (matches.length !== 1) return null;
+  const declaration = matches[0]!;
+  const scope = reactVariableDeclarationScope(declaration);
+  if (!scope || !isReactNodeWithinScope(scope, expression)) return null;
+  const initializer = declaration.initializer;
+  if (
+    ts.isPropertyAccessExpression(expression) &&
+    initializer &&
+    ts.isObjectLiteralExpression(initializer)
+  ) {
+    const propertyName = expression.name.text;
+    const properties = initializer.properties.filter(
+      (property): property is TypeScript.PropertyAssignment =>
+        ts.isPropertyAssignment(property) &&
+        ((ts.isIdentifier(property.name) &&
+          property.name.text === propertyName) ||
+          (ts.isStringLiteral(property.name) &&
+            property.name.text === propertyName)),
+    );
+    if (properties.length === 1) {
+      return {
+        expression: properties[0]!.initializer,
+        start: properties[0]!.getStart(sourceFile),
+        end: properties[0]!.end,
+      };
+    }
+  }
+  return initializer
+    ? {
         expression: initializer,
         start: initializer.getStart(sourceFile),
         end: initializer.end,
@@ -1172,12 +3110,102 @@ function isReactMotionStylePropName(name: string): boolean {
     /^(?:webkit|moz|ms|o)?animation(?:name|duration|delay|timingfunction|fillmode|iterationcount|direction|playstate|composition|timeline|range(?:start|end)?)?$/.test(
       normalized,
     ) ||
-    /^(?:webkit|moz|ms|o)?transition(?:property|duration|delay|timingfunction)?$/.test(
+    /^(?:webkit|moz|ms|o)?transition(?:property|duration|delay|timingfunction|behavior)?$/.test(
       normalized,
     )
   );
 }
 
+function isReactCssStringLiteral(
+  expression: TypeScript.Expression,
+): expression is
+  | TypeScript.StringLiteral
+  | TypeScript.NoSubstitutionTemplateLiteral {
+  return (
+    ts.isStringLiteral(expression) ||
+    ts.isNoSubstitutionTemplateLiteral(expression)
+  );
+}
+
+function inspectReactCssString(css: string): ReactStyleInspection {
+  const inspected = maskReactCssCommentsAndStrings(css);
+  if (inspected.includes("\\")) return "unknown";
+  const declarations = inspected.matchAll(/(?:^|[;{}\s])\s*([\w-]+)\s*:/g);
+  let foundDeclaration = false;
+  for (const declaration of declarations) {
+    foundDeclaration = true;
+    if (isReactMotionStylePropName(declaration[1]!)) return "motion";
+  }
+  if (foundDeclaration || inspected.trim().length === 0) return "safe";
+  return "unknown";
+}
+
+function maskReactCssCommentsAndStrings(css: string): string {
+  let result = "";
+  let quote: "'" | '"' | null = null;
+  for (let index = 0; index < css.length; index++) {
+    const character = css[index]!;
+    if (quote) {
+      if (character === "\\") {
+        result += " ";
+        const escaped = css[index + 1];
+        if (escaped !== undefined) {
+          result += escaped === "\n" ? "\n" : " ";
+          index++;
+        }
+      } else {
+        if (character === quote) quote = null;
+        result += character === "\n" ? "\n" : " ";
+      }
+      continue;
+    }
+    if (character === "/" && css[index + 1] === "*") {
+      result += "  ";
+      index++;
+      while (
+        index + 1 < css.length &&
+        !(css[index] === "*" && css[index + 1] === "/")
+      ) {
+        index++;
+        result += css[index] === "\n" ? "\n" : " ";
+      }
+      if (index + 1 < css.length) {
+        result += "  ";
+        index++;
+      }
+      continue;
+    }
+    if (character === "'" || character === '"') {
+      quote = character;
+      result += " ";
+      continue;
+    }
+    result += character;
+  }
+  return result;
+}
+
+function isStaticReactCssValueExpression(
+  expression: TypeScript.Expression,
+): boolean {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+  return (
+    ts.isStringLiteral(expression) ||
+    ts.isNoSubstitutionTemplateLiteral(expression) ||
+    ts.isNumericLiteral(expression) ||
+    expression.kind === ts.SyntaxKind.TrueKeyword ||
+    expression.kind === ts.SyntaxKind.FalseKeyword ||
+    expression.kind === ts.SyntaxKind.NullKeyword
+  );
+}
+
 function readStaticReactStyleContent(
   sourceFile: TypeScript.SourceFile,
   style: TypeScript.JsxElement,