Fix incorrect line highlight for comments

Author: satya164

.gitignore

@@ -17,3 +17,6 @@ i18n/*
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# AI
+.claude/

__tests__/rehype-static-to-dynamic.test.mjs

@@ -939,6 +939,117 @@ describe('rehype-static-to-dynamic', () => {
     assert.strictEqual(output, expected);
   });
 
+  test('nested navigator with highlight on screen property', async () => {
+    const input = dedent /* javascript */ `
+      import { createNativeStackNavigator } from '@react-navigation/native-stack';
+      import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+      import { createStaticNavigation } from '@react-navigation/native';
+
+      const SearchStack = createNativeStackNavigator({
+        screens: {
+          FruitsList: {
+            screen: FruitsListScreen,
+            options: {
+              title: 'Search',
+            },
+          },
+        },
+      });
+
+      const HomeTabs = createBottomTabNavigator({
+        screens: {
+          Home: {
+            screen: HomeScreen,
+            options: {
+              tabBarIcon: {
+                type: 'sfSymbol',
+                name: 'house',
+              },
+            },
+          },
+          Search: {
+            // highlight-next-line
+            screen: SearchStack,
+            options: {
+              tabBarSystemItem: 'search',
+            },
+          },
+        },
+      });
+
+      const Navigation = createStaticNavigation(HomeTabs);
+
+      export default function App() {
+        return <Navigation />;
+      }
+    `;
+
+    const tree = createTestTree(input);
+    const plugin = rehypeStaticToDynamic();
+    await plugin(tree);
+
+    const output = extractTransformedCode(tree);
+
+    const expected = dedent /* javascript */ `
+      import { createNativeStackNavigator } from '@react-navigation/native-stack';
+      import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+      import { NavigationContainer } from '@react-navigation/native';
+
+      const Stack = createNativeStackNavigator();
+
+      function SearchStack() {
+        return (
+          <Stack.Navigator>
+            <Stack.Screen
+              name="FruitsList"
+              component={FruitsListScreen}
+              options={{
+                title: 'Search',
+              }}
+            />
+          </Stack.Navigator>
+        );
+      }
+
+      const Tab = createBottomTabNavigator();
+
+      function HomeTabs() {
+        return (
+          <Tab.Navigator>
+            <Tab.Screen
+              name="Home"
+              component={HomeScreen}
+              options={{
+                tabBarIcon: {
+                  type: 'sfSymbol',
+                  name: 'house',
+                },
+              }}
+            />
+            <Tab.Screen
+              name="Search"
+              // highlight-next-line
+              component={SearchStack}
+              options={{
+                tabBarSystemItem: 'search',
+              }}
+            />
+          </Tab.Navigator>
+        );
+      }
+
+      export default function App() {
+        return (
+          <NavigationContainer>
+            <HomeTabs />
+          </NavigationContainer>
+        );
+      }
+    `;
+
+    assert.strictEqual(output, expected);
+  });
+
   test('mixed screen definitions', async () => {
     const input = dedent /* javascript */ `
       import { createNativeStackNavigator, createNativeStackScreen } from '@react-navigation/native-stack';

src/plugins/rehype-static-to-dynamic.mjs

@@ -748,16 +748,16 @@ function attachCommentsToNode(node, comments, isTrailing = false) {
 }
 
 /**
- * Find a property line within a context (searches nearby lines for context marker)
+ * Find a property line within a context (searches lines before for context marker)
  */
 function findPropertyLine(lines, propMatcher, contextMatcher, searchRange) {
   for (let i = 0; i < lines.length; i++) {
     if (propMatcher(lines[i])) {
-      // Check if this is within the right context by searching nearby lines
+      // Check if this is within the right context by searching lines before only
+      // We only look backwards because name= comes before component= in the output JSX
       const startIdx = Math.max(0, i - searchRange);
-      const endIdx = Math.min(i + searchRange, lines.length);
 
-      for (let j = startIdx; j < endIdx; j++) {
+      for (let j = startIdx; j <= i; j++) {
         if (contextMatcher(lines[j])) {
           return i;
         }