@teleporthq/teleport-plugin-next-data-source 0.42.4 → 0.42.6

package/src/pagination-plugin.ts

@@ -5,20 +5,232 @@ import {
   FileType,
 } from '@teleporthq/teleport-types'
 import * as types from '@babel/types'
-import { generatePaginationLogic, ArrayMapperPaginationInfo } from './array-mapper-pagination'
-import { extractDataSourceIntoNextAPIFolder } from './utils'
-
-interface DetectedPagination {
-  paginationNodeClass: string
-  prevButtonClass: string | null
-  nextButtonClass: string | null
+import { StringUtils } from '@teleporthq/teleport-shared'
+import { generateSafeFileName } from './utils'
+
+// ==================== UIDL-FIRST STATE MANAGEMENT ====================
+// This module uses a UIDL-first approach: we scan the UIDL FIRST to identify
+// ALL data source usages and assign unique state IDs BEFORE any JSX processing.
+// This ensures consistent state mapping across DataProviders, search inputs, and pagination buttons.
+
+interface DataSourceUsage {
+  // Unique sequential index for this usage (0, 1, 2, ...)
+  index: number
+  // The data-source-list renderPropIdentifier (e.g., "dsadsa3_users_data")
   dataSourceIdentifier: string
-  dataProviderJSX: any
-  arrayMapperRenderProp?: string
-  searchInputClass?: string | null
-  searchInputJSX?: any
+  // The cms-list-repeater renderPropIdentifier (e.g., "context_1i871")
+  arrayMapperRenderProp: string
+  // Resource definition from UIDL
+  resourceDefinition: {
+    dataSourceId: string
+    tableName: string
+    dataSourceType: string
+  }
+  // Pagination config
+  paginated: boolean
+  perPage: number
+  // Search config
+  searchEnabled: boolean
+  searchDebounce: number
+  // Query columns from resource params
+  queryColumns: string[]
+  // Computed category
+  category: 'paginated+search' | 'paginated-only' | 'search-only' | 'plain'
+}
+
+interface StateRegistry {
+  usages: DataSourceUsage[]
+  // Map from dataSourceIdentifier to all usages with that identifier
+  byDataSourceId: Map<string, DataSourceUsage[]>
+  // Map from arrayMapperRenderProp to usage
+  byArrayMapperRenderProp: Map<string, DataSourceUsage>
+}
+
+// Scan UIDL to find all data source usages and build a registry
+function buildStateRegistry(uidlNode: any): StateRegistry {
+  const usages: DataSourceUsage[] = []
+  const byDataSourceId = new Map<string, DataSourceUsage[]>()
+  const byArrayMapperRenderProp = new Map<string, DataSourceUsage>()
+  let index = 0
+
+  const traverse = (
+    node: any,
+    parentDataSource?: { identifier: string; resourceDef: any; resourceParams: any }
+  ): void => {
+    if (!node || typeof node !== 'object') {
+      return
+    }
+
+    // Found a data-source-list (DataProvider)
+    if (node.type === 'data-source-list' && node.content?.renderPropIdentifier) {
+      const dsIdentifier = node.content.renderPropIdentifier
+      const resourceDef = node.content.resourceDefinition || {}
+      const resourceParams = node.content.resource?.params || {}
+
+      // Look for cms-list-repeater inside this data-source-list
+      const newParent = {
+        identifier: dsIdentifier,
+        resourceDef,
+        resourceParams,
+      }
+
+      // Traverse into success/error/loading nodes
+      if (node.content.nodes?.success) {
+        traverse(node.content.nodes.success, newParent)
+      }
+      if (node.content.nodes?.error) {
+        traverse(node.content.nodes.error, newParent)
+      }
+      if (node.content.nodes?.loading) {
+        traverse(node.content.nodes.loading, newParent)
+      }
+      return
+    }
+
+    // Found a cms-list-repeater (Repeater with pagination/search config)
+    const isCmsListRepeater =
+      node.type === 'cms-list-repeater' ||
+      (node.type === 'element' && node.content?.elementType === 'cms-list-repeater')
+
+    if (isCmsListRepeater && parentDataSource) {
+      const content = node.content || node
+      const arrayMapperRenderProp = content.renderPropIdentifier
+
+      if (arrayMapperRenderProp) {
+        // Extract query columns from parent's resource params
+        let queryColumns: string[] = []
+        if (parentDataSource.resourceParams?.queryColumns?.content) {
+          queryColumns = parentDataSource.resourceParams.queryColumns.content
+        }
+
+        // Extract limit from parent's resource params (for plain array mappers)
+        let limit = 0
+        if (parentDataSource.resourceParams?.limit?.content) {
+          limit = parentDataSource.resourceParams.limit.content
+        }
+
+        // For paginated mappers, use perPage from cms-list-repeater
+        // For plain mappers, use limit from data-source-list resource params
+        const effectivePerPage = content.paginated ? content.perPage : limit || content.perPage
+
+        const usage: DataSourceUsage = {
+          index: index++,
+          dataSourceIdentifier: parentDataSource.identifier,
+          arrayMapperRenderProp,
+          resourceDefinition: {
+            dataSourceId: parentDataSource.resourceDef.dataSourceId || '',
+            tableName: parentDataSource.resourceDef.tableName || '',
+            dataSourceType: parentDataSource.resourceDef.dataSourceType || '',
+          },
+          paginated: !!content.paginated,
+          perPage: effectivePerPage,
+          searchEnabled: !!content.searchEnabled,
+          searchDebounce: content.searchDebounce || 300,
+          queryColumns,
+          category: 'plain',
+        }
+
+        // Determine category
+        if (usage.paginated && usage.searchEnabled) {
+          usage.category = 'paginated+search'
+        } else if (usage.paginated) {
+          usage.category = 'paginated-only'
+        } else if (usage.searchEnabled) {
+          usage.category = 'search-only'
+        }
+
+        usages.push(usage)
+
+        // Add to maps
+        if (!byDataSourceId.has(usage.dataSourceIdentifier)) {
+          byDataSourceId.set(usage.dataSourceIdentifier, [])
+        }
+        byDataSourceId.get(usage.dataSourceIdentifier)!.push(usage)
+        byArrayMapperRenderProp.set(arrayMapperRenderProp, usage)
+      }
+
+      // Continue traversing inside the repeater
+      if (content.nodes?.list) {
+        traverse(content.nodes.list, parentDataSource)
+      }
+      return
+    }
+
+    // Recurse into children
+    if (node.content?.children && Array.isArray(node.content.children)) {
+      for (const child of node.content.children) {
+        traverse(child, parentDataSource)
+      }
+    }
+    if (node.content?.node) {
+      traverse(node.content.node, parentDataSource)
+    }
+    if (node.content?.nodes) {
+      if (node.content.nodes.success) {
+        traverse(node.content.nodes.success, parentDataSource)
+      }
+      if (node.content.nodes.error) {
+        traverse(node.content.nodes.error, parentDataSource)
+      }
+      if (node.content.nodes.loading) {
+        traverse(node.content.nodes.loading, parentDataSource)
+      }
+      if (node.content.nodes.list) {
+        traverse(node.content.nodes.list, parentDataSource)
+      }
+      if (node.content.nodes.empty) {
+        traverse(node.content.nodes.empty, parentDataSource)
+      }
+    }
+    if (Array.isArray(node.children)) {
+      for (const child of node.children) {
+        traverse(child, parentDataSource)
+      }
+    }
+  }
+
+  traverse(uidlNode)
+
+  return { usages, byDataSourceId, byArrayMapperRenderProp }
+}
+
+// Generate state variable names for a usage
+function getStateVarsForUsage(usage: DataSourceUsage): {
+  pageStateVar: string
+  setPageStateVar: string
+  maxPagesStateVar: string
+  setMaxPagesStateVar: string
+  searchQueryVar: string
+  setSearchQueryVar: string
+  debouncedSearchQueryVar: string
+  setDebouncedSearchQueryVar: string
+  combinedStateVar: string
+  setCombinedStateVar: string
+  skipDebounceRefVar: string
+  skipCountFetchRefVar: string
+  propsPrefix: string
+} {
+  const idx = usage.index
+
+  return {
+    pageStateVar: `ds_${idx}_page`,
+    setPageStateVar: `setDs_${idx}_page`,
+    maxPagesStateVar: `ds_${idx}_maxPages`,
+    setMaxPagesStateVar: `setDs_${idx}_maxPages`,
+    searchQueryVar: `ds_${idx}_searchQuery`,
+    setSearchQueryVar: `setDs_${idx}_searchQuery`,
+    debouncedSearchQueryVar: `ds_${idx}_debouncedQuery`,
+    setDebouncedSearchQueryVar: `setDs_${idx}_debouncedQuery`,
+    combinedStateVar: `ds_${idx}_state`,
+    setCombinedStateVar: `setDs_${idx}_state`,
+    skipDebounceRefVar: `ds_${idx}_skipDebounce`,
+    skipCountFetchRefVar: `ds_${idx}_skipCountFetch`,
+    propsPrefix: `${usage.dataSourceIdentifier}_ds_${idx}`,
+  }
 }
 
+// ==================== MAIN PLUGIN ====================
+
 export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> = () => {
   const paginationPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks, dependencies, options } = structure
@@ -46,62 +258,56 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
     }
     const blockStatement = arrowFunction.body as types.BlockStatement
 
-    const { paginatedMappers, searchOnlyMappers, paginationOnlyMappers } =
-      detectPaginationsAndSearchFromJSX(blockStatement, uidl.node)
+    // STEP 1: Build state registry from UIDL
+    const registry = buildStateRegistry(uidl.node)
 
-    if (
-      paginatedMappers.length === 0 &&
-      searchOnlyMappers.length === 0 &&
-      paginationOnlyMappers.length === 0
-    ) {
+    if (registry.usages.length === 0) {
       return structure
     }
 
-    // Combine pagination+search and pagination-only into one array for processing
-    const detectedPaginations = [...paginatedMappers, ...paginationOnlyMappers]
-    const detectedSearchOnly = searchOnlyMappers
+    // Check if this is a page or component
+    const getStaticPropsChunk = chunks.find((chunk) => chunk.name === 'getStaticProps')
+    const isPage = !!getStaticPropsChunk
 
+    // Add React dependencies
     if (!dependencies.useState) {
       dependencies.useState = {
         type: 'library',
         path: 'react',
         version: '',
-        meta: {
-          namedImport: true,
-        },
+        meta: { namedImport: true },
       }
     }
-
     if (!dependencies.useMemo) {
       dependencies.useMemo = {
         type: 'library',
         path: 'react',
         version: '',
-        meta: {
-          namedImport: true,
-        },
+        meta: { namedImport: true },
       }
     }
-
     if (!dependencies.useCallback) {
       dependencies.useCallback = {
         type: 'library',
         path: 'react',
         version: '',
-        meta: {
-          namedImport: true,
-        },
+        meta: { namedImport: true },
       }
     }
-
     if (!dependencies.useRef) {
       dependencies.useRef = {
         type: 'library',
         path: 'react',
         version: '',
-        meta: {
-          namedImport: true,
-        },
+        meta: { namedImport: true },
+      }
+    }
+    if (!dependencies.useEffect) {
+      dependencies.useEffect = {
+        type: 'library',
+        path: 'react',
+        version: '',
+        meta: { namedImport: true },
       }
     }
 
@@ -110,2389 +316,1911 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
     }
     componentChunk.meta.isClientComponent = true
 
-    const paginationInfos: ArrayMapperPaginationInfo[] = []
-
-    // Check if this is a page (has getStaticProps) or a component
-    const getStaticPropsChunk = chunks.find((chunk) => chunk.name === 'getStaticProps')
-    const isPage = !!getStaticPropsChunk
-    const isComponent = !isPage
-
-    // Get pagination and search config from early extraction (done before transformations)
-    const opts = options as any
-    const perPageMap = opts.paginationConfig?.perPageMap || new Map<string, number>()
-    const searchConfigMap = opts.paginationConfig?.searchConfigMap || new Map<string, any>()
-    const queryColumnsMap = opts.paginationConfig?.queryColumnsMap || new Map<string, string[]>()
-
+    // STEP 2: Generate state declarations for all usages
     const stateDeclarations: types.Statement[] = []
+    const effectStatements: types.Statement[] = []
 
-    detectedPaginations.forEach((detected, index) => {
-      const paginationNodeId = `pg_${index}`
-      // Use arrayMapperRenderProp if available, otherwise fall back to dataSourceIdentifier
-      const lookupKey = detected.arrayMapperRenderProp || detected.dataSourceIdentifier
-      const perPage = perPageMap.get(lookupKey) || 10
-      const searchConfig = searchConfigMap.get(lookupKey)
-      // queryColumns is keyed by dataSourceIdentifier, not array mapper render prop
-      const queryColumns = queryColumnsMap.get(detected.dataSourceIdentifier)
-
-      const info = generatePaginationLogic(
-        paginationNodeId,
-        detected.dataSourceIdentifier,
-        perPage,
-        searchConfig,
-        queryColumns
-      )
-      paginationInfos.push(info)
-
-      // Add refs to track first render for each useEffect (add first)
-      if (info.searchEnabled) {
-        const skipCountFetchOnMountRefVar = `skipCountFetchOnMount_pg_${index}`
-        const skipCountFetchRefAST = types.variableDeclaration('const', [
-          types.variableDeclarator(
-            types.identifier(skipCountFetchOnMountRefVar),
-            types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
-          ),
-        ])
-        stateDeclarations.push(skipCountFetchRefAST)
-        ;(info as any).skipCountFetchOnMountRefVar = skipCountFetchOnMountRefVar
-
-        const skipDebounceOnMountRefVar = `skipDebounceOnMount_pg_${index}`
-        const skipDebounceRefAST = types.variableDeclaration('const', [
-          types.variableDeclarator(
-            types.identifier(skipDebounceOnMountRefVar),
-            types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
-          ),
-        ])
-        stateDeclarations.push(skipDebounceRefAST)
-        ;(info as any).skipDebounceOnMountRefVar = skipDebounceOnMountRefVar
+    registry.usages.forEach((usage) => {
+      if (usage.category === 'plain') {
+        return // Plain mappers don't need state
       }
 
-      // Add maxPages state
-      const maxPagesStateVar = `${info.pageStateVar.replace('_page', '')}_maxPages`
-      const setMaxPagesStateVar = `set${
-        maxPagesStateVar.charAt(0).toUpperCase() + maxPagesStateVar.slice(1)
-      }`
-
-      // For pages: initialize from props (with pagination-specific prop name), for components: initialize to 0
-      const maxPagesInitValue = isPage
-        ? types.logicalExpression(
-            '||',
-            types.optionalMemberExpression(
-              types.identifier('props'),
-              types.identifier(`${info.dataSourceIdentifier}_pg_${index}_maxPages`),
-              false,
-              true
-            ),
-            types.numericLiteral(0)
-          )
-        : types.numericLiteral(0)
-
-      const maxPagesStateAST = types.variableDeclaration('const', [
-        types.variableDeclarator(
-          types.arrayPattern([
-            types.identifier(maxPagesStateVar),
-            types.identifier(setMaxPagesStateVar),
-          ]),
-          types.callExpression(types.identifier('useState'), [maxPagesInitValue])
-        ),
-      ])
-      stateDeclarations.push(maxPagesStateAST)
-
-      // Store these for later use
-      ;(info as any).maxPagesStateVar = maxPagesStateVar
-      ;(info as any).setMaxPagesStateVar = setMaxPagesStateVar
-
-      // If both pagination and search are enabled, combine them into a single state object
-      if (info.searchEnabled && info.searchQueryVar && info.setSearchQueryVar) {
-        // Combined state: { page: 1, debouncedQuery: '' }
-        const combinedStateVar = `paginationState_pg_${index}`
-        const setCombinedStateVar = `setPaginationState_pg_${index}`
-
-        const combinedStateAST = types.variableDeclaration('const', [
-          types.variableDeclarator(
-            types.arrayPattern([
-              types.identifier(combinedStateVar),
-              types.identifier(setCombinedStateVar),
-            ]),
-            types.callExpression(types.identifier('useState'), [
-              types.objectExpression([
-                types.objectProperty(types.identifier('page'), types.numericLiteral(1)),
-                types.objectProperty(types.identifier('debouncedQuery'), types.stringLiteral('')),
-              ]),
-            ])
-          ),
-        ])
-        stateDeclarations.push(combinedStateAST)
-
-        // Still need the immediate search query state for the input
-        const searchStateAST = types.variableDeclaration('const', [
-          types.variableDeclarator(
-            types.arrayPattern([
-              types.identifier(info.searchQueryVar),
-              types.identifier(info.setSearchQueryVar),
-            ]),
-            types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
-          ),
-        ])
-        stateDeclarations.push(searchStateAST)
+      const vars = getStateVarsForUsage(usage)
 
-        // Store the combined state var names
-        ;(info as any).combinedStateVar = combinedStateVar
-        ;(info as any).setCombinedStateVar = setCombinedStateVar
-      } else {
-        // If search is not enabled, just add regular page state
-        const pageStateAST = types.variableDeclaration('const', [
-          types.variableDeclarator(
-            types.arrayPattern([
-              types.identifier(info.pageStateVar),
-              types.identifier(info.setPageStateVar),
-            ]),
-            types.callExpression(types.identifier('useState'), [types.numericLiteral(1)])
-          ),
-        ])
-        stateDeclarations.push(pageStateAST)
-      }
-    })
+      if (usage.category === 'paginated+search') {
+        // Combined state object for pagination + search
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier(vars.skipDebounceRefVar),
+              types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
+            ),
+          ])
+        )
 
-    // Add all state declarations at once to the beginning in correct order
-    stateDeclarations.reverse().forEach((stateDecl) => {
-      blockStatement.body.unshift(stateDecl)
-    })
+        // Only add skipCountFetchRef for pages (where we have server-side count)
+        // For components, we need to fetch count on mount
+        if (isPage) {
+          stateDeclarations.push(
+            types.variableDeclaration('const', [
+              types.variableDeclarator(
+                types.identifier(vars.skipCountFetchRefVar),
+                types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
+              ),
+            ])
+          )
+        }
 
-    // Add useEffect dependency if any pagination has search enabled
-    const hasSearchEnabled = paginationInfos.some((info) => info.searchEnabled)
-    if (hasSearchEnabled && !dependencies.useEffect) {
-      dependencies.useEffect = {
-        type: 'library',
-        path: 'react',
-        version: '',
-        meta: {
-          namedImport: true,
-        },
-      }
-    }
+        // maxPages state
+        const maxPagesInit = isPage
+          ? types.logicalExpression(
+              '||',
+              types.optionalMemberExpression(
+                types.identifier('props'),
+                types.identifier(`${vars.propsPrefix}_maxPages`),
+                false,
+                true
+              ),
+              types.numericLiteral(0)
+            )
+          : types.numericLiteral(0)
+
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.arrayPattern([
+                types.identifier(vars.maxPagesStateVar),
+                types.identifier(vars.setMaxPagesStateVar),
+              ]),
+              types.callExpression(types.identifier('useState'), [maxPagesInit])
+            ),
+          ])
+        )
 
-    // Add all useEffect hooks AFTER state declarations
-    // Find the first return statement and insert effects before it
-    const firstReturnIndex = blockStatement.body.findIndex(
-      (stmt: any) => stmt.type === 'ReturnStatement'
-    )
-    const insertIndex = firstReturnIndex !== -1 ? firstReturnIndex : blockStatement.body.length
-
-    // Add effects in reverse order so they appear in correct order
-    paginationInfos.forEach((info) => {
-      if (
-        info.searchEnabled &&
-        info.searchQueryVar &&
-        info.debouncedSearchQueryVar &&
-        info.setDebouncedSearchQueryVar
-      ) {
-        // Add effect that updates debounced search after delay
-        const skipDebounceOnMountRefVar = (info as any).skipDebounceOnMountRefVar
-        const setCombinedStateVar = (info as any).setCombinedStateVar
-
-        const debounceEffect = types.expressionStatement(
-          types.callExpression(types.identifier('useEffect'), [
-            types.arrowFunctionExpression(
-              [],
-              types.blockStatement([
-                types.ifStatement(
-                  types.memberExpression(
-                    types.identifier(skipDebounceOnMountRefVar),
-                    types.identifier('current')
-                  ),
-                  types.blockStatement([
-                    types.expressionStatement(
-                      types.assignmentExpression(
-                        '=',
-                        types.memberExpression(
-                          types.identifier(skipDebounceOnMountRefVar),
-                          types.identifier('current')
-                        ),
-                        types.booleanLiteral(false)
-                      )
-                    ),
-                    types.returnStatement(),
-                  ])
-                ),
-                types.variableDeclaration('const', [
-                  types.variableDeclarator(
-                    types.identifier('timer'),
-                    types.callExpression(types.identifier('setTimeout'), [
-                      types.arrowFunctionExpression(
-                        [],
-                        types.blockStatement([
-                          types.expressionStatement(
-                            types.callExpression(types.identifier(setCombinedStateVar), [
-                              types.objectExpression([
-                                types.objectProperty(
-                                  types.identifier('page'),
-                                  types.numericLiteral(1)
-                                ),
-                                types.objectProperty(
-                                  types.identifier('debouncedQuery'),
-                                  types.identifier(info.searchQueryVar)
-                                ),
-                              ]),
-                            ])
-                          ),
-                        ])
-                      ),
-                      types.numericLiteral(info.searchDebounce || 300),
-                    ])
-                  ),
+        // Combined state { page, debouncedQuery }
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.arrayPattern([
+                types.identifier(vars.combinedStateVar),
+                types.identifier(vars.setCombinedStateVar),
+              ]),
+              types.callExpression(types.identifier('useState'), [
+                types.objectExpression([
+                  types.objectProperty(types.identifier('page'), types.numericLiteral(1)),
+                  types.objectProperty(types.identifier('debouncedQuery'), types.stringLiteral('')),
                 ]),
-                types.returnStatement(
-                  types.arrowFunctionExpression(
-                    [],
-                    types.callExpression(types.identifier('clearTimeout'), [
-                      types.identifier('timer'),
-                    ])
-                  )
-                ),
               ])
             ),
-            types.arrayExpression([types.identifier(info.searchQueryVar)]),
           ])
         )
 
-        blockStatement.body.splice(insertIndex, 0, debounceEffect)
-
-        // Add useEffect to refetch count when search changes (for both pages and components)
-        const detected = detectedPaginations.find(
-          (d) => d.dataSourceIdentifier === info.dataSourceIdentifier
-        )
-        if (!detected) {
-          return
-        }
-
-        const resourceDefAttr = detected.dataProviderJSX.openingElement.attributes.find(
-          (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'resourceDefinition'
+        // Immediate search query state
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.arrayPattern([
+                types.identifier(vars.searchQueryVar),
+                types.identifier(vars.setSearchQueryVar),
+              ]),
+              types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
+            ),
+          ])
         )
 
-        if (
-          resourceDefAttr &&
-          resourceDefAttr.value &&
-          resourceDefAttr.value.type === 'JSXExpressionContainer'
-        ) {
-          const resourceDef = resourceDefAttr.value.expression
-          if (resourceDef.type === 'ObjectExpression') {
-            const dataSourceIdProp = (resourceDef.properties as any[]).find(
-              (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceId'
-            )
-            const tableNameProp = (resourceDef.properties as any[]).find(
-              (p: any) => p.type === 'ObjectProperty' && p.key.value === 'tableName'
-            )
-            const dataSourceTypeProp = (resourceDef.properties as any[]).find(
-              (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceType'
-            )
-
-            if (dataSourceIdProp && tableNameProp && dataSourceTypeProp) {
-              const dataSourceId = dataSourceIdProp.value.value
-              const tableName = tableNameProp.value.value
-              const dataSourceType = dataSourceTypeProp.value.value
-              const fileName = `${dataSourceType}-${tableName}-${dataSourceId.substring(0, 8)}`
-              const setMaxPagesStateVar = (info as any).setMaxPagesStateVar
-
-              // Create useEffect to refetch count when debounced search changes
-              const skipCountFetchOnMountRefVar = (info as any).skipCountFetchOnMountRefVar
-              const combinedStateVar = (info as any).combinedStateVar
-
-              // Build URLSearchParams properties - query is always included, queryColumns is optional
-              const urlSearchParamsProperties: any[] = [
-                types.objectProperty(
-                  types.identifier('query'),
-                  types.memberExpression(
-                    types.identifier(combinedStateVar),
-                    types.identifier('debouncedQuery')
-                  )
-                ),
-              ]
-
-              // Add queryColumns only if they exist
-              if (info.queryColumns && info.queryColumns.length > 0) {
-                urlSearchParamsProperties.push(
-                  types.objectProperty(
-                    types.identifier('queryColumns'),
-                    types.callExpression(
-                      types.memberExpression(
-                        types.identifier('JSON'),
-                        types.identifier('stringify')
-                      ),
-                      [
-                        types.arrayExpression(
-                          info.queryColumns.map((col) => types.stringLiteral(col))
-                        ),
-                      ]
-                    )
-                  )
-                )
-              }
-
-              const refetchCountEffect = types.expressionStatement(
-                types.callExpression(types.identifier('useEffect'), [
-                  types.arrowFunctionExpression(
-                    [],
+        // Debounce effect
+        effectStatements.push(
+          types.expressionStatement(
+            types.callExpression(types.identifier('useEffect'), [
+              types.arrowFunctionExpression(
+                [],
+                types.blockStatement([
+                  types.ifStatement(
+                    types.memberExpression(
+                      types.identifier(vars.skipDebounceRefVar),
+                      types.identifier('current')
+                    ),
                     types.blockStatement([
-                      types.ifStatement(
-                        types.memberExpression(
-                          types.identifier(skipCountFetchOnMountRefVar),
-                          types.identifier('current')
-                        ),
-                        types.blockStatement([
-                          types.expressionStatement(
-                            types.assignmentExpression(
-                              '=',
-                              types.memberExpression(
-                                types.identifier(skipCountFetchOnMountRefVar),
-                                types.identifier('current')
-                              ),
-                              types.booleanLiteral(false)
-                            )
-                          ),
-                          types.returnStatement(),
-                        ])
-                      ),
                       types.expressionStatement(
-                        types.callExpression(
+                        types.assignmentExpression(
+                          '=',
                           types.memberExpression(
-                            types.callExpression(
-                              types.memberExpression(
-                                types.callExpression(types.identifier('fetch'), [
-                                  types.templateLiteral(
-                                    [
-                                      types.templateElement({
-                                        raw: `/api/${fileName}-count?`,
-                                        cooked: `/api/${fileName}-count?`,
-                                      }),
-                                      types.templateElement({ raw: '', cooked: '' }),
-                                    ],
-                                    [
-                                      types.newExpression(types.identifier('URLSearchParams'), [
-                                        types.objectExpression(urlSearchParamsProperties),
-                                      ]),
-                                    ]
-                                  ),
-                                ]),
-                                types.identifier('then')
-                              ),
-                              [
-                                types.arrowFunctionExpression(
-                                  [types.identifier('res')],
-                                  types.callExpression(
-                                    types.memberExpression(
-                                      types.identifier('res'),
-                                      types.identifier('json')
-                                    ),
-                                    []
-                                  )
-                                ),
-                              ]
-                            ),
-                            types.identifier('then')
+                            types.identifier(vars.skipDebounceRefVar),
+                            types.identifier('current')
                           ),
-                          [
-                            types.arrowFunctionExpression(
-                              [types.identifier('data')],
-                              types.blockStatement([
-                                types.ifStatement(
-                                  types.logicalExpression(
-                                    '&&',
-                                    types.identifier('data'),
-                                    types.binaryExpression(
-                                      'in',
-                                      types.stringLiteral('count'),
-                                      types.identifier('data')
-                                    )
-                                  ),
-                                  types.blockStatement([
-                                    types.expressionStatement(
-                                      types.callExpression(types.identifier(setMaxPagesStateVar), [
-                                        types.conditionalExpression(
-                                          types.binaryExpression(
-                                            '===',
-                                            types.memberExpression(
-                                              types.identifier('data'),
-                                              types.identifier('count')
-                                            ),
-                                            types.numericLiteral(0)
-                                          ),
-                                          types.numericLiteral(0),
-                                          types.callExpression(
-                                            types.memberExpression(
-                                              types.identifier('Math'),
-                                              types.identifier('ceil')
-                                            ),
-                                            [
-                                              types.binaryExpression(
-                                                '/',
-                                                types.memberExpression(
-                                                  types.identifier('data'),
-                                                  types.identifier('count')
-                                                ),
-                                                types.numericLiteral(info.perPage)
-                                              ),
-                                            ]
-                                          )
-                                        ),
-                                      ])
-                                    ),
-                                  ])
-                                ),
-                              ])
-                            ),
-                          ]
+                          types.booleanLiteral(false)
                         )
                       ),
+                      types.returnStatement(),
                     ])
                   ),
-                  types.arrayExpression([
-                    types.memberExpression(
-                      types.identifier(combinedStateVar),
-                      types.identifier('debouncedQuery')
+                  types.variableDeclaration('const', [
+                    types.variableDeclarator(
+                      types.identifier('timer'),
+                      types.callExpression(types.identifier('setTimeout'), [
+                        types.arrowFunctionExpression(
+                          [],
+                          types.blockStatement([
+                            types.expressionStatement(
+                              types.callExpression(types.identifier(vars.setCombinedStateVar), [
+                                types.objectExpression([
+                                  types.objectProperty(
+                                    types.identifier('page'),
+                                    types.numericLiteral(1)
+                                  ),
+                                  types.objectProperty(
+                                    types.identifier('debouncedQuery'),
+                                    types.identifier(vars.searchQueryVar)
+                                  ),
+                                ]),
+                              ])
+                            ),
+                          ])
+                        ),
+                        types.numericLiteral(usage.searchDebounce),
+                      ])
                     ),
                   ]),
+                  types.returnStatement(
+                    types.arrowFunctionExpression(
+                      [],
+                      types.callExpression(types.identifier('clearTimeout'), [
+                        types.identifier('timer'),
+                      ])
+                    )
+                  ),
                 ])
-              )
-
-              blockStatement.body.splice(insertIndex, 0, refetchCountEffect)
-            }
-          }
-        }
-      }
-    })
-
-    // For components, add useEffect to fetch count on mount
-    if (isComponent) {
-      if (!dependencies.useEffect) {
-        dependencies.useEffect = {
-          type: 'library',
-          path: 'react',
-          version: '',
-          meta: {
-            namedImport: true,
-          },
-        }
-      }
-
-      // Group paginationInfos by data source identifier to avoid duplicate fetches
-      const dataSourceToInfos = new Map<
-        string,
-        Array<{ info: ArrayMapperPaginationInfo; detected: any; fileName: string }>
-      >()
+              ),
+              types.arrayExpression([types.identifier(vars.searchQueryVar)]),
+            ])
+          )
+        )
 
-      paginationInfos.forEach((info) => {
-        const detected = detectedPaginations.find(
-          (d) => d.dataSourceIdentifier === info.dataSourceIdentifier
+        // Count refetch effect
+        const fileName = generateSafeFileName(
+          usage.resourceDefinition.dataSourceType,
+          usage.resourceDefinition.tableName,
+          usage.resourceDefinition.dataSourceId
         )
-        if (!detected) {
-          return
+        const urlParams: types.ObjectProperty[] = [
+          types.objectProperty(
+            types.identifier('query'),
+            types.memberExpression(
+              types.identifier(vars.combinedStateVar),
+              types.identifier('debouncedQuery')
+            )
+          ),
+        ]
+        if (usage.queryColumns.length > 0) {
+          urlParams.push(
+            types.objectProperty(
+              types.identifier('queryColumns'),
+              types.callExpression(
+                types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+                [types.arrayExpression(usage.queryColumns.map((c) => types.stringLiteral(c)))]
+              )
+            )
+          )
         }
 
-        const resourceDefAttr = detected.dataProviderJSX.openingElement.attributes.find(
-          (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'resourceDefinition'
-        )
+        // Build the count fetch effect body
+        const countFetchEffectBody: types.Statement[] = []
 
-        if (
-          !resourceDefAttr ||
-          !resourceDefAttr.value ||
-          resourceDefAttr.value.type !== 'JSXExpressionContainer'
-        ) {
-          return
-        }
-
-        const resourceDef = resourceDefAttr.value.expression
-        if (resourceDef.type !== 'ObjectExpression') {
-          return
+        // Only add skip-on-mount check for pages (where we have server-side count)
+        if (isPage) {
+          countFetchEffectBody.push(
+            types.ifStatement(
+              types.memberExpression(
+                types.identifier(vars.skipCountFetchRefVar),
+                types.identifier('current')
+              ),
+              types.blockStatement([
+                types.expressionStatement(
+                  types.assignmentExpression(
+                    '=',
+                    types.memberExpression(
+                      types.identifier(vars.skipCountFetchRefVar),
+                      types.identifier('current')
+                    ),
+                    types.booleanLiteral(false)
+                  )
+                ),
+                types.returnStatement(),
+              ])
+            )
+          )
         }
 
-        const dataSourceIdProp = (resourceDef.properties as any[]).find(
-          (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceId'
+        // Add the fetch call
+        countFetchEffectBody.push(
+          types.expressionStatement(
+            types.callExpression(
+              types.memberExpression(
+                types.callExpression(
+                  types.memberExpression(
+                    types.callExpression(types.identifier('fetch'), [
+                      types.templateLiteral(
+                        [
+                          types.templateElement({
+                            raw: `/api/${fileName}-count?`,
+                            cooked: `/api/${fileName}-count?`,
+                          }),
+                          types.templateElement({ raw: '', cooked: '' }),
+                        ],
+                        [
+                          types.newExpression(types.identifier('URLSearchParams'), [
+                            types.objectExpression(urlParams),
+                          ]),
+                        ]
+                      ),
+                    ]),
+                    types.identifier('then')
+                  ),
+                  [
+                    types.arrowFunctionExpression(
+                      [types.identifier('res')],
+                      types.callExpression(
+                        types.memberExpression(types.identifier('res'), types.identifier('json')),
+                        []
+                      )
+                    ),
+                  ]
+                ),
+                types.identifier('then')
+              ),
+              [
+                types.arrowFunctionExpression(
+                  [types.identifier('data')],
+                  types.blockStatement([
+                    types.ifStatement(
+                      types.logicalExpression(
+                        '&&',
+                        types.identifier('data'),
+                        types.binaryExpression(
+                          'in',
+                          types.stringLiteral('count'),
+                          types.identifier('data')
+                        )
+                      ),
+                      types.blockStatement([
+                        types.expressionStatement(
+                          types.callExpression(types.identifier(vars.setMaxPagesStateVar), [
+                            types.conditionalExpression(
+                              types.binaryExpression(
+                                '===',
+                                types.memberExpression(
+                                  types.identifier('data'),
+                                  types.identifier('count')
+                                ),
+                                types.numericLiteral(0)
+                              ),
+                              types.numericLiteral(0),
+                              types.callExpression(
+                                types.memberExpression(
+                                  types.identifier('Math'),
+                                  types.identifier('ceil')
+                                ),
+                                [
+                                  types.binaryExpression(
+                                    '/',
+                                    types.memberExpression(
+                                      types.identifier('data'),
+                                      types.identifier('count')
+                                    ),
+                                    types.numericLiteral(usage.perPage)
+                                  ),
+                                ]
+                              )
+                            ),
+                          ])
+                        ),
+                      ])
+                    ),
+                  ])
+                ),
+              ]
+            )
+          )
         )
-        const tableNameProp = (resourceDef.properties as any[]).find(
-          (p: any) => p.type === 'ObjectProperty' && p.key.value === 'tableName'
+
+        effectStatements.push(
+          types.expressionStatement(
+            types.callExpression(types.identifier('useEffect'), [
+              types.arrowFunctionExpression([], types.blockStatement(countFetchEffectBody)),
+              types.arrayExpression([
+                types.memberExpression(
+                  types.identifier(vars.combinedStateVar),
+                  types.identifier('debouncedQuery')
+                ),
+              ]),
+            ])
+          )
         )
-        const dataSourceTypeProp = (resourceDef.properties as any[]).find(
-          (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceType'
+      } else if (usage.category === 'paginated-only') {
+        // Simple page state
+        const maxPagesInit = isPage
+          ? types.logicalExpression(
+              '||',
+              types.optionalMemberExpression(
+                types.identifier('props'),
+                types.identifier(`${vars.propsPrefix}_maxPages`),
+                false,
+                true
+              ),
+              types.numericLiteral(0)
+            )
+          : types.numericLiteral(0)
+
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.arrayPattern([
+                types.identifier(vars.maxPagesStateVar),
+                types.identifier(vars.setMaxPagesStateVar),
+              ]),
+              types.callExpression(types.identifier('useState'), [maxPagesInit])
+            ),
+          ])
         )
 
-        if (!dataSourceIdProp || !tableNameProp || !dataSourceTypeProp) {
-          return
-        }
-
-        const dataSourceId = dataSourceIdProp.value.value
-        const tableName = tableNameProp.value.value
-        const dataSourceType = dataSourceTypeProp.value.value
-        const fileName = `${dataSourceType}-${tableName}-${dataSourceId.substring(0, 8)}`
-
-        // Group by data source identifier
-        if (!dataSourceToInfos.has(info.dataSourceIdentifier)) {
-          dataSourceToInfos.set(info.dataSourceIdentifier, [])
-        }
-        dataSourceToInfos.get(info.dataSourceIdentifier)!.push({ info, detected, fileName })
-      })
-
-      // Create ONE useEffect per unique data source
-      // Collect all useEffect statements first
-      const componentUseEffects: types.Statement[] = []
-
-      dataSourceToInfos.forEach((infos) => {
-        const { fileName } = infos[0]
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.arrayPattern([
+                types.identifier(vars.pageStateVar),
+                types.identifier(vars.setPageStateVar),
+              ]),
+              types.callExpression(types.identifier('useState'), [types.numericLiteral(1)])
+            ),
+          ])
+        )
 
-        // Create array of setState calls - one for each pagination using this data source
-        const setStateStatements = infos.map(({ info }) => {
-          const setMaxPagesStateVar = (info as any).setMaxPagesStateVar
-          return types.expressionStatement(
-            types.callExpression(types.identifier(setMaxPagesStateVar), [
-              types.callExpression(
-                types.memberExpression(types.identifier('Math'), types.identifier('ceil')),
-                [
-                  types.binaryExpression(
-                    '/',
-                    types.memberExpression(types.identifier('data'), types.identifier('count')),
-                    types.numericLiteral(info.perPage)
-                  ),
-                ]
-              ),
-            ])
+        // For components (not pages), add a useEffect to fetch count on mount
+        // Pages get count from getStaticProps, but components need to fetch it client-side
+        if (!isPage) {
+          const fileName = generateSafeFileName(
+            usage.resourceDefinition.dataSourceType,
+            usage.resourceDefinition.tableName,
+            usage.resourceDefinition.dataSourceId
           )
-        })
 
-        // Create useEffect to fetch count on mount - sets ALL maxPages for this data source
-        const useEffectAST = types.expressionStatement(
-          types.callExpression(types.identifier('useEffect'), [
-            types.arrowFunctionExpression(
-              [],
-              types.blockStatement([
-                types.expressionStatement(
-                  types.callExpression(
-                    types.memberExpression(
+          effectStatements.push(
+            types.expressionStatement(
+              types.callExpression(types.identifier('useEffect'), [
+                types.arrowFunctionExpression(
+                  [],
+                  types.blockStatement([
+                    types.expressionStatement(
                       types.callExpression(
                         types.memberExpression(
-                          types.callExpression(types.identifier('fetch'), [
-                            types.stringLiteral(`/api/${fileName}-count`),
-                          ]),
+                          types.callExpression(
+                            types.memberExpression(
+                              types.callExpression(types.identifier('fetch'), [
+                                types.stringLiteral(`/api/${fileName}-count`),
+                              ]),
+                              types.identifier('then')
+                            ),
+                            [
+                              types.arrowFunctionExpression(
+                                [types.identifier('res')],
+                                types.callExpression(
+                                  types.memberExpression(
+                                    types.identifier('res'),
+                                    types.identifier('json')
+                                  ),
+                                  []
+                                )
+                              ),
+                            ]
+                          ),
                           types.identifier('then')
                         ),
                         [
                           types.arrowFunctionExpression(
-                            [types.identifier('res')],
-                            types.callExpression(
-                              types.memberExpression(
-                                types.identifier('res'),
-                                types.identifier('json')
+                            [types.identifier('data')],
+                            types.blockStatement([
+                              types.ifStatement(
+                                types.logicalExpression(
+                                  '&&',
+                                  types.identifier('data'),
+                                  types.binaryExpression(
+                                    'in',
+                                    types.stringLiteral('count'),
+                                    types.identifier('data')
+                                  )
+                                ),
+                                types.blockStatement([
+                                  types.expressionStatement(
+                                    types.callExpression(
+                                      types.identifier(vars.setMaxPagesStateVar),
+                                      [
+                                        types.conditionalExpression(
+                                          types.binaryExpression(
+                                            '===',
+                                            types.memberExpression(
+                                              types.identifier('data'),
+                                              types.identifier('count')
+                                            ),
+                                            types.numericLiteral(0)
+                                          ),
+                                          types.numericLiteral(0),
+                                          types.callExpression(
+                                            types.memberExpression(
+                                              types.identifier('Math'),
+                                              types.identifier('ceil')
+                                            ),
+                                            [
+                                              types.binaryExpression(
+                                                '/',
+                                                types.memberExpression(
+                                                  types.identifier('data'),
+                                                  types.identifier('count')
+                                                ),
+                                                types.numericLiteral(usage.perPage)
+                                              ),
+                                            ]
+                                          )
+                                        ),
+                                      ]
+                                    )
+                                  ),
+                                ])
                               ),
-                              []
-                            )
+                            ])
                           ),
                         ]
-                      ),
-                      types.identifier('then')
+                      )
                     ),
-                    [
-                      types.arrowFunctionExpression(
-                        [types.identifier('data')],
-                        types.blockStatement([
-                          types.ifStatement(
-                            types.logicalExpression(
-                              '&&',
-                              types.identifier('data'),
-                              types.memberExpression(
-                                types.identifier('data'),
-                                types.identifier('count')
-                              )
-                            ),
-                            types.blockStatement(setStateStatements)
-                          ),
-                        ])
-                      ),
-                    ]
-                  )
+                  ])
                 ),
+                types.arrayExpression([]), // Empty dependency array - fetch on mount only
               ])
+            )
+          )
+        }
+      } else if (usage.category === 'search-only') {
+        // Search-only state
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier(vars.skipDebounceRefVar),
+              types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
             ),
-            types.arrayExpression([]),
           ])
         )
 
-        componentUseEffects.push(useEffectAST)
-      })
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.arrayPattern([
+                types.identifier(vars.debouncedSearchQueryVar),
+                types.identifier(vars.setDebouncedSearchQueryVar),
+              ]),
+              types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
+            ),
+          ])
+        )
 
-      // Insert all component useEffect hooks after state declarations but before return
-      // Find the first return statement
-      const componentReturnIndex = blockStatement.body.findIndex(
-        (stmt: any) => stmt.type === 'ReturnStatement'
-      )
-      const componentEffectsInsertIndex =
-        componentReturnIndex !== -1 ? componentReturnIndex : blockStatement.body.length
-
-      // Insert in reverse order to maintain correct order
-      componentUseEffects.reverse().forEach((effect) => {
-        blockStatement.body.splice(componentEffectsInsertIndex, 0, effect)
-      })
-    }
-
-    createAPIRoutesForPaginatedDataSources(
-      uidl.node,
-      options.dataSources,
-      componentChunk,
-      options.extractedResources,
-      paginationInfos,
-      isComponent
-    )
+        stateDeclarations.push(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.arrayPattern([
+                types.identifier(vars.searchQueryVar),
+                types.identifier(vars.setSearchQueryVar),
+              ]),
+              types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
+            ),
+          ])
+        )
 
-    detectedPaginations.forEach((detected, index) => {
-      addPaginationParamsToDataProvider(detected.dataProviderJSX, paginationInfos[index], index)
+        // Debounce effect
+        effectStatements.push(
+          types.expressionStatement(
+            types.callExpression(types.identifier('useEffect'), [
+              types.arrowFunctionExpression(
+                [],
+                types.blockStatement([
+                  types.ifStatement(
+                    types.memberExpression(
+                      types.identifier(vars.skipDebounceRefVar),
+                      types.identifier('current')
+                    ),
+                    types.blockStatement([
+                      types.expressionStatement(
+                        types.assignmentExpression(
+                          '=',
+                          types.memberExpression(
+                            types.identifier(vars.skipDebounceRefVar),
+                            types.identifier('current')
+                          ),
+                          types.booleanLiteral(false)
+                        )
+                      ),
+                      types.returnStatement(),
+                    ])
+                  ),
+                  types.variableDeclaration('const', [
+                    types.variableDeclarator(
+                      types.identifier('timer'),
+                      types.callExpression(types.identifier('setTimeout'), [
+                        types.arrowFunctionExpression(
+                          [],
+                          types.blockStatement([
+                            types.expressionStatement(
+                              types.callExpression(
+                                types.identifier(vars.setDebouncedSearchQueryVar),
+                                [types.identifier(vars.searchQueryVar)]
+                              )
+                            ),
+                          ])
+                        ),
+                        types.numericLiteral(usage.searchDebounce),
+                      ])
+                    ),
+                  ]),
+                  types.returnStatement(
+                    types.arrowFunctionExpression(
+                      [],
+                      types.callExpression(types.identifier('clearTimeout'), [
+                        types.identifier('timer'),
+                      ])
+                    )
+                  ),
+                ])
+              ),
+              types.arrayExpression([types.identifier(vars.searchQueryVar)]),
+            ])
+          )
+        )
+      }
     })
 
-    modifyPaginationButtons(blockStatement, detectedPaginations, paginationInfos)
-    modifySearchInputs(blockStatement, detectedPaginations, paginationInfos)
+    // Insert state declarations at the beginning
+    stateDeclarations.reverse().forEach((s) => blockStatement.body.unshift(s))
 
-    if (isPage) {
-      modifyGetStaticPropsForPagination(chunks, paginationInfos)
-    }
+    // Insert effects before return statement
+    const returnIndex = blockStatement.body.findIndex((s: any) => s.type === 'ReturnStatement')
+    const insertIndex = returnIndex !== -1 ? returnIndex : blockStatement.body.length
+    effectStatements.reverse().forEach((e) => blockStatement.body.splice(insertIndex, 0, e))
 
-    // Handle search-only array mappers (no need to filter - they're already separate)
-    // The detection function already separated them into different arrays
-    const searchOnlyDataSources = detectedSearchOnly
+    // STEP 3: Find all DataProviders in JSX that have Repeaters and wire them to correct states
+    const dataProviders = findAllDataProvidersInJSX(blockStatement)
 
-    if (searchOnlyDataSources.length > 0) {
-      handleSearchOnlyArrayMappers(
-        blockStatement,
-        searchOnlyDataSources,
-        searchConfigMap,
-        queryColumnsMap,
-        dependencies
-      )
+    // Filter to only DataProviders with Repeaters (array mappers)
+    const dataProvidersWithRepeaters = dataProviders.filter((dp) => {
+      const hasRepeater = findArrayMapperRenderPropInDataProvider(dp) !== undefined
+      return hasRepeater
+    })
 
-      // Create API routes for search-only data sources
-      createAPIRoutesForSearchOnlyDataSources(
-        uidl.node,
-        options.dataSources,
-        componentChunk,
-        options.extractedResources,
-        searchOnlyDataSources
+    // Track which usage index we're on for each dataSourceIdentifier
+    // We use pure order-based matching - the order of DataProviders in JSX should match UIDL order
+    const usageIndexByDataSourceId = new Map<string, number>()
+
+    dataProvidersWithRepeaters.forEach((dp) => {
+      const nameAttr = dp.openingElement.attributes.find(
+        (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'name'
       )
-    }
+      if (!nameAttr?.value?.expression?.value) {
+        return
+      }
 
-    return structure
-  }
+      const dataSourceIdentifier = nameAttr.value.expression.value
 
-  return paginationPlugin
-}
+      // Use pure order-based matching within each dataSourceIdentifier
+      const usages = registry.byDataSourceId.get(dataSourceIdentifier) || []
+      const currentIndex = usageIndexByDataSourceId.get(dataSourceIdentifier) || 0
 
-function findParentNode(root: any, target: any, currentParent: any = null): any | null {
-  if (!root || !target) {
-    return null
-  }
+      if (currentIndex >= usages.length) {
+        return
+      }
 
-  if (root === target) {
-    return currentParent
-  }
+      const usage = usages[currentIndex]
+      usageIndexByDataSourceId.set(dataSourceIdentifier, currentIndex + 1)
 
-  if (root.type === 'JSXElement' || root.type === 'JSXFragment') {
-    if (root.children && Array.isArray(root.children)) {
-      for (const child of root.children) {
-        const found = findParentNode(child, target, root)
-        if (found !== null) {
-          return found
-        }
-      }
-    }
-  } else if (root.type === 'JSXExpressionContainer') {
-    if (root.expression) {
-      const found = findParentNode(root.expression, target, root)
-      if (found !== null) {
-        return found
-      }
-    }
-  } else if (root.type === 'BlockStatement') {
-    if (root.body && Array.isArray(root.body)) {
-      for (const stmt of root.body) {
-        const found = findParentNode(stmt, target, root)
-        if (found !== null) {
-          return found
-        }
+      const vars = getStateVarsForUsage(usage)
+      const fileName = generateSafeFileName(
+        usage.resourceDefinition.dataSourceType,
+        usage.resourceDefinition.tableName,
+        usage.resourceDefinition.dataSourceId
+      )
+
+      // Update DataProvider based on category
+      if (usage.category === 'paginated+search') {
+        updateDataProviderForPaginatedSearch(dp, usage, vars, fileName)
+      } else if (usage.category === 'paginated-only') {
+        updateDataProviderForPaginationOnly(dp, usage, vars, fileName)
+      } else if (usage.category === 'search-only') {
+        updateDataProviderForSearchOnly(dp, usage, vars, fileName)
+      } else {
+        updateDataProviderForPlain(dp, vars)
       }
-    }
-  } else if (root.type === 'ReturnStatement') {
-    if (root.argument) {
-      const found = findParentNode(root.argument, target, root)
-      if (found !== null) {
-        return found
+
+      // Create API route if needed
+      if (usage.category !== 'plain') {
+        ensureAPIRouteExists(options.extractedResources, usage)
       }
-    }
-  } else if (root.type === 'ConditionalExpression') {
-    const foundConsequent = findParentNode(root.consequent, target, root)
-    if (foundConsequent !== null) {
-      return foundConsequent
-    }
-    const foundAlternate = findParentNode(root.alternate, target, root)
-    if (foundAlternate !== null) {
-      return foundAlternate
-    }
-  }
+    })
 
-  return null
-}
+    // STEP 3.5: Handle DataProviders WITHOUT repeaters (data-source-item type)
+    // These access single items like data[0].name and should not re-render on state changes
+    // We wrap their params in useMemo to prevent reference changes from triggering re-renders
+    const dataProvidersWithoutRepeaters = dataProviders.filter((dp) => {
+      const hasRepeater = findArrayMapperRenderPropInDataProvider(dp) !== undefined
+      return !hasRepeater
+    })
 
-function detectPaginationsAndSearchFromJSX(
-  blockStatement: types.BlockStatement,
-  uidlNode: any
-): {
-  paginatedMappers: DetectedPagination[]
-  searchOnlyMappers: DetectedPagination[]
-  paginationOnlyMappers: DetectedPagination[]
-  plainMappers: DetectedPagination[]
-} {
-  interface DataProviderInfo {
-    identifier: string
-    dataProvider: any
-    arrayMapperRenderProp?: string
-    paginationNode?: { class: string; prevClass: string | null; nextClass: string | null }
-    searchInput?: { class: string | null; jsx: any }
-    hasPagination: boolean
-    hasSearch: boolean
-  }
+    dataProvidersWithoutRepeaters.forEach((dp) => {
+      stabilizeDataProviderWithoutRepeater(dp)
+    })
 
-  const dataProviderList: DataProviderInfo[] = []
+    // STEP 4: Wire search inputs
+    // Match search inputs to usages by order (within each dataSourceIdentifier that has search enabled)
+    const searchInputs = findAllSearchInputsInJSX(blockStatement)
 
-  // First pass: collect array mapper info from UIDL, keyed by array mapper render prop (unique)
-  interface ArrayMapperInfo {
-    dataSourceIdentifier: string
-    renderProp: string
-    paginated: boolean
-    searchEnabled: boolean
-  }
-  const arrayMapperInfoMap = new Map<string, ArrayMapperInfo>()
+    // Get all search-enabled usages in order
+    const searchEnabledUsages = registry.usages.filter((u) => u.searchEnabled)
 
-  if (uidlNode) {
-    const collectArrayMapperInfo = (node: any): void => {
-      if (!node) {
+    // Match by order - search input 0 -> searchEnabledUsages[0], etc.
+    searchInputs.forEach((input, idx) => {
+      if (idx >= searchEnabledUsages.length) {
         return
       }
-      if (node.type === 'data-source-list' && node.content?.renderPropIdentifier) {
-        const dataSourceIdentifier = node.content.renderPropIdentifier
-        if (node.content.nodes?.success?.content?.children) {
-          node.content.nodes.success.content.children.forEach((child: any) => {
-            if (child.type === 'cms-list-repeater' && child.content?.renderPropIdentifier) {
-              const arrayMapperRenderProp = child.content.renderPropIdentifier
-              // Key by array mapper render prop (unique), not data source identifier
-              arrayMapperInfoMap.set(arrayMapperRenderProp, {
-                dataSourceIdentifier,
-                renderProp: arrayMapperRenderProp,
-                paginated: child.content.paginated || false,
-                searchEnabled: child.content.searchEnabled || false,
-              })
-            }
-          })
-        }
-      }
-      if (node.content?.children) {
-        node.content.children.forEach((child: any) => collectArrayMapperInfo(child))
-      }
-      if (node.children && Array.isArray(node.children)) {
-        node.children.forEach((child: any) => collectArrayMapperInfo(child))
+
+      const usage = searchEnabledUsages[idx]
+      const vars = getStateVarsForUsage(usage)
+      wireSearchInput(input.node, vars)
+    })
+
+    // STEP 5: Wire pagination buttons
+    // Match pagination nodes to usages by order (within paginated usages)
+    const paginationNodes = findAllPaginationNodesInJSX(blockStatement)
+
+    // Get all paginated usages in order
+    const paginatedUsages = registry.usages.filter((u) => u.paginated)
+
+    // Match by order - pagination node 0 -> paginatedUsages[0], etc.
+    paginationNodes.forEach((paginationNode, idx) => {
+      if (idx >= paginatedUsages.length) {
+        return
       }
+
+      const usage = paginatedUsages[idx]
+      const vars = getStateVarsForUsage(usage)
+      wirePaginationButtons(paginationNode.node, usage, vars)
+    })
+
+    // STEP 6: Update getStaticProps if this is a page
+    if (isPage) {
+      updateGetStaticProps(chunks, registry)
     }
-    collectArrayMapperInfo(uidlNode)
-  }
 
-  // Second pass: find all DataProviders and their parent containers
-  interface DataProviderWithParent {
-    dataProvider: any
-    parent: any
+    return structure
   }
-  const dataProvidersWithParents: DataProviderWithParent[] = []
 
-  const findDataProvidersAndParents = (node: any, parent: any = null): void => {
+  return paginationPlugin
+}
+
+// ==================== HELPER FUNCTIONS ====================
+
+function findAllDataProvidersInJSX(blockStatement: types.BlockStatement): any[] {
+  const results: any[] = []
+
+  const traverse = (node: any): void => {
     if (!node) {
       return
     }
 
-    // Check if this is a DataProvider
     if (node.type === 'JSXElement' && node.openingElement?.name?.name === 'DataProvider') {
-      dataProvidersWithParents.push({
-        dataProvider: node,
-        parent,
-      })
-    }
-
-    // Only recurse through JSX structure, not into embedded expressions or code
-    if (node.type === 'ReturnStatement' && node.argument) {
-      findDataProvidersAndParents(node.argument, parent)
-    } else if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
-      // Recurse through JSX children
-      if (node.children && Array.isArray(node.children)) {
-        node.children.forEach((child: any) => findDataProvidersAndParents(child, node))
-      }
-    } else if (node.type === 'JSXExpressionContainer') {
-      // For expression containers, continue but don't go into the expression itself
-      if (
-        node.expression &&
-        (node.expression.type === 'JSXElement' || node.expression.type === 'JSXFragment')
-      ) {
-        findDataProvidersAndParents(node.expression, parent)
-      }
-    } else if (node.type === 'BlockStatement') {
-      // For block statements (function bodies), look through body array
-      if (node.body && Array.isArray(node.body)) {
-        node.body.forEach((stmt: any) => findDataProvidersAndParents(stmt, node))
-      }
-    } else if (node.type === 'ConditionalExpression') {
-      // Check both branches of conditional
-      findDataProvidersAndParents(node.consequent, parent)
-      findDataProvidersAndParents(node.alternate, parent)
+      results.push(node)
     }
-  }
 
-  findDataProvidersAndParents(blockStatement)
+    if (node.children && Array.isArray(node.children)) {
+      node.children.forEach((c: any) => traverse(c))
+    }
 
-  // Now process each DataProvider and find its siblings
-  dataProvidersWithParents.forEach(({ dataProvider, parent }) => {
-    const nameAttr = dataProvider.openingElement.attributes.find(
-      (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'name'
-    )
+    if (node.body) {
+      if (Array.isArray(node.body)) {
+        node.body.forEach((s: any) => traverse(s))
+      } else {
+        traverse(node.body)
+      }
+    }
 
-    // Find the array mapper render prop by looking inside renderSuccess -> Repeater -> renderItem param
-    const renderSuccessAttr = dataProvider.openingElement.attributes.find(
-      (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'renderSuccess'
-    )
+    if (node.consequent) {
+      traverse(node.consequent)
+    }
 
-    let arrayMapperRenderProp: string | undefined
-    if (renderSuccessAttr && renderSuccessAttr.value?.type === 'JSXExpressionContainer') {
-      const renderFunc = renderSuccessAttr.value.expression
-      if (renderFunc.type === 'ArrowFunctionExpression') {
-        // Look for Repeater inside the render function
-        const findRepeater = (node: any): any => {
-          if (!node) {
-            return null
-          }
-          if (node.type === 'JSXElement' && node.openingElement?.name?.name === 'Repeater') {
-            return node
-          }
-          if (node.body) {
-            return findRepeater(node.body)
-          }
-          if (node.children && Array.isArray(node.children)) {
-            for (const child of node.children) {
-              const result = findRepeater(child)
-              if (result) {
-                return result
-              }
-            }
-          }
-          if (node.type === 'JSXFragment' || node.type === 'JSXElement') {
-            if (node.children && Array.isArray(node.children)) {
-              for (const child of node.children) {
-                const result = findRepeater(child)
-                if (result) {
-                  return result
-                }
-              }
-            }
-          }
-          if (node.type === 'JSXExpressionContainer') {
-            return findRepeater(node.expression)
-          }
-          if (node.expression) {
-            return findRepeater(node.expression)
-          }
-          if (node.consequent) {
-            const result = findRepeater(node.consequent)
-            if (result) {
-              return result
-            }
-          }
-          if (node.alternate) {
-            return findRepeater(node.alternate)
-          }
-          return null
-        }
+    if (node.alternate) {
+      traverse(node.alternate)
+    }
 
-        const repeater = findRepeater(renderFunc)
-        if (repeater) {
-          // Find renderItem attribute on Repeater
-          const renderItemAttr = repeater.openingElement.attributes.find(
-            (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'renderItem'
-          )
-          if (renderItemAttr && renderItemAttr.value?.type === 'JSXExpressionContainer') {
-            const renderItemFunc = renderItemAttr.value.expression
-            if (
-              renderItemFunc.type === 'ArrowFunctionExpression' &&
-              renderItemFunc.params &&
-              renderItemFunc.params.length > 0
-            ) {
-              const param = renderItemFunc.params[0]
-              if (param.type === 'Identifier') {
-                arrayMapperRenderProp = param.name
-              }
-            }
-          }
-        }
-      }
+    if (node.expression) {
+      traverse(node.expression)
     }
 
-    if (
-      !nameAttr ||
-      !nameAttr.value ||
-      nameAttr.value.type !== 'JSXExpressionContainer' ||
-      !arrayMapperRenderProp
-    ) {
-      return
+    if (node.argument) {
+      traverse(node.argument)
     }
 
-    const dataProviderIdentifier = nameAttr.value.expression.value
-    let paginationNodeInfo: {
-      class: string
-      prevClass: string | null
-      nextClass: string | null
-    } | null = null
-    let searchInputInfo: { class: string | null; jsx: any } | null = null
+    if (node.arguments) {
+      node.arguments.forEach((a: any) => traverse(a))
+    }
+  }
 
-    const findSearchAndPaginationInScope = (scopeNode: any, skipNode: any = null): boolean => {
-      if (!scopeNode || !scopeNode.children || !Array.isArray(scopeNode.children)) {
-        return false
-      }
+  traverse(blockStatement)
+  return results
+}
 
-      let foundSomething = false
+function findArrayMapperRenderPropInDataProvider(dataProvider: any): string | undefined {
+  const renderSuccessAttr = dataProvider.openingElement.attributes.find(
+    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'renderSuccess'
+  )
 
-      for (const child of scopeNode.children) {
-        if (child === skipNode) {
-          continue
-        }
+  if (!renderSuccessAttr?.value?.expression) {
+    return undefined
+  }
 
-        if (child.type === 'JSXElement') {
-          const childClassName = getClassName(child.openingElement?.attributes || [])
-          const childElementName = child.openingElement?.name?.name
-
-          // Found pagination node
-          if (childClassName && childClassName.includes('cms-pagination-node')) {
-            const prevClass = findChildWithClass(child, 'previous')
-            const nextClass = findChildWithClass(child, 'next')
-            if (prevClass || nextClass) {
-              paginationNodeInfo = {
-                class: childClassName,
-                prevClass,
-                nextClass,
-              }
-              foundSomething = true
-            }
-          }
-
-          // Found search container - search for input inside it
-          if (childClassName && childClassName.includes('data-source-search-node')) {
-            if (child.children && Array.isArray(child.children)) {
-              for (const searchChild of child.children) {
-                if (searchChild.type === 'JSXElement') {
-                  const searchChildElementName = searchChild.openingElement?.name?.name
-                  const searchChildClassName = getClassName(
-                    searchChild.openingElement?.attributes || []
-                  )
-                  if (
-                    searchChildClassName &&
-                    searchChildClassName.includes('search-input') &&
-                    searchChildElementName === 'input'
-                  ) {
-                    searchInputInfo = {
-                      class: searchChildClassName,
-                      jsx: searchChild,
-                    }
-                    foundSomething = true
-                  }
-                }
-              }
-            }
-          }
-
-          // Also check if search input is a direct child
-          if (
-            childClassName &&
-            childClassName.includes('search-input') &&
-            childElementName === 'input'
-          ) {
-            searchInputInfo = {
-              class: childClassName,
-              jsx: child,
-            }
-            foundSomething = true
-          }
-
-          // Stop searching if we found both or if we found what we're looking for
-          if (foundSomething && (searchInputInfo || paginationNodeInfo)) {
-            return true
-          }
-
-          // Only recurse if we haven't found what we're looking for yet
-          if (!searchInputInfo || !paginationNodeInfo) {
-            if (findSearchAndPaginationInScope(child, skipNode)) {
-              return true
-            }
-          }
-        }
-      }
+  const findRepeater = (node: any): any => {
+    if (!node) {
+      return null
+    }
 
-      return foundSomething
+    if (node.type === 'JSXElement' && node.openingElement?.name?.name === 'Repeater') {
+      return node
     }
 
-    let currentScope = parent
-    let depth = 0
-    const maxDepth = 5
+    if (node.body) {
+      return findRepeater(node.body)
+    }
 
-    while (currentScope && (!searchInputInfo || !paginationNodeInfo) && depth < maxDepth) {
-      const found = findSearchAndPaginationInScope(currentScope, depth === 0 ? dataProvider : null)
-      // Stop searching up the tree if we found a pagination node at this level
-      if (found && paginationNodeInfo) {
-        break
+    if (node.children && Array.isArray(node.children)) {
+      for (const c of node.children) {
+        const r = findRepeater(c)
+        if (r) {
+          return r
+        }
       }
-      currentScope = findParentNode(blockStatement, currentScope)
-      depth++
-    }
-
-    // Record the DataProvider with its pagination/search info
-    // Use array instead of Map to handle multiple DataProviders with same name
-    dataProviderList.push({
-      identifier: dataProviderIdentifier,
-      dataProvider,
-      arrayMapperRenderProp,
-      paginationNode: paginationNodeInfo || undefined,
-      searchInput: searchInputInfo || undefined,
-      hasPagination: !!paginationNodeInfo,
-      hasSearch: !!searchInputInfo,
-    })
-  })
-
-  // Categorize data providers
-  const paginatedMappers: DetectedPagination[] = []
-  const searchOnlyMappers: DetectedPagination[] = []
-  const paginationOnlyMappers: DetectedPagination[] = []
-  const plainMappers: DetectedPagination[] = []
-
-  dataProviderList.forEach((info) => {
-    // Check UIDL flags for this array mapper
-    const uidlInfo = info.arrayMapperRenderProp
-      ? arrayMapperInfoMap.get(info.arrayMapperRenderProp)
-      : null
-
-    // Only process pagination/search if UIDL explicitly enables it
-    const shouldHavePagination = uidlInfo?.paginated && info.hasPagination
-    const shouldHaveSearch = uidlInfo?.searchEnabled && info.hasSearch
-
-    if (shouldHavePagination && shouldHaveSearch) {
-      // Pagination + Search
-      paginatedMappers.push({
-        paginationNodeClass: info.paginationNode!.class,
-        prevButtonClass: info.paginationNode!.prevClass,
-        nextButtonClass: info.paginationNode!.nextClass,
-        dataSourceIdentifier: info.identifier,
-        dataProviderJSX: info.dataProvider,
-        arrayMapperRenderProp: info.arrayMapperRenderProp,
-        searchInputClass: info.searchInput?.class,
-        searchInputJSX: info.searchInput?.jsx,
-      })
-    } else if (shouldHavePagination && !shouldHaveSearch) {
-      // Pagination only
-      paginationOnlyMappers.push({
-        paginationNodeClass: info.paginationNode!.class,
-        prevButtonClass: info.paginationNode!.prevClass,
-        nextButtonClass: info.paginationNode!.nextClass,
-        dataSourceIdentifier: info.identifier,
-        dataProviderJSX: info.dataProvider,
-        arrayMapperRenderProp: info.arrayMapperRenderProp,
-        searchInputClass: undefined,
-        searchInputJSX: undefined,
-      })
-    } else if (!shouldHavePagination && shouldHaveSearch) {
-      // Search only
-      searchOnlyMappers.push({
-        paginationNodeClass: '',
-        prevButtonClass: null,
-        nextButtonClass: null,
-        dataSourceIdentifier: info.identifier,
-        dataProviderJSX: info.dataProvider,
-        arrayMapperRenderProp: info.arrayMapperRenderProp,
-        searchInputClass: info.searchInput?.class,
-        searchInputJSX: info.searchInput?.jsx,
-      })
-    } else {
-      // Plain (no pagination, no search) - UIDL doesn't enable it or no controls found
-      plainMappers.push({
-        paginationNodeClass: '',
-        prevButtonClass: null,
-        nextButtonClass: null,
-        dataSourceIdentifier: info.identifier,
-        dataProviderJSX: info.dataProvider,
-        arrayMapperRenderProp: info.arrayMapperRenderProp,
-        searchInputClass: undefined,
-        searchInputJSX: undefined,
-      })
     }
-  })
+    return null
+  }
 
-  return { paginatedMappers, searchOnlyMappers, paginationOnlyMappers, plainMappers }
+  const repeater = findRepeater(renderSuccessAttr.value.expression)
+  if (!repeater) {
+    return undefined
+  }
+
+  const renderItemAttr = repeater.openingElement.attributes.find(
+    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'renderItem'
+  )
+
+  if (!renderItemAttr?.value?.expression?.params?.[0]?.name) {
+    return undefined
+  }
+
+  return renderItemAttr.value.expression.params[0].name
 }
 
-function handleSearchOnlyArrayMappers(
-  blockStatement: types.BlockStatement,
-  searchOnlyDataSources: DetectedPagination[],
-  searchConfigMap: Map<string, any>,
-  queryColumnsMap: Map<string, string[]>,
-  dependencies: any
-): void {
-  const searchOnlyStates: types.Statement[] = []
-  const searchOnlyEffects: types.Statement[] = []
-
-  searchOnlyDataSources.forEach((detected, index) => {
-    const searchId = `search_${index}`
-    const searchQueryVar = `${searchId}_query`
-    const setSearchQueryVar = `set${
-      searchQueryVar.charAt(0).toUpperCase() + searchQueryVar.slice(1)
-    }`
-    const debouncedSearchQueryVar = `debounced${
-      searchQueryVar.charAt(0).toUpperCase() + searchQueryVar.slice(1)
-    }`
-    const setDebouncedSearchQueryVar = `set${
-      debouncedSearchQueryVar.charAt(0).toUpperCase() + debouncedSearchQueryVar.slice(1)
-    }`
-    const skipDebounceOnMountRefVar = `skipDebounceOnMount${searchId}`
-
-    const searchConfig = searchConfigMap.get(detected.dataSourceIdentifier)
-    const searchDebounce = searchConfig?.searchDebounce || 300
-    const queryColumns = queryColumnsMap.get(detected.dataSourceIdentifier)
-
-    // Add skip ref
-    const skipRefAST = types.variableDeclaration('const', [
-      types.variableDeclarator(
-        types.identifier(skipDebounceOnMountRefVar),
-        types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
-      ),
-    ])
-    searchOnlyStates.push(skipRefAST)
-
-    // Add debounced search state
-    const debouncedSearchStateAST = types.variableDeclaration('const', [
-      types.variableDeclarator(
-        types.arrayPattern([
-          types.identifier(debouncedSearchQueryVar),
-          types.identifier(setDebouncedSearchQueryVar),
-        ]),
-        types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
-      ),
-    ])
-    searchOnlyStates.push(debouncedSearchStateAST)
-
-    // Add search query state
-    const searchStateAST = types.variableDeclaration('const', [
-      types.variableDeclarator(
-        types.arrayPattern([types.identifier(searchQueryVar), types.identifier(setSearchQueryVar)]),
-        types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
-      ),
-    ])
-    searchOnlyStates.push(searchStateAST)
+function findAllSearchInputsInJSX(
+  blockStatement: types.BlockStatement
+): Array<{ node: any; className: string }> {
+  const results: Array<{ node: any; className: string }> = []
 
-    // Add useEffect for debouncing
-    if (!dependencies.useEffect) {
-      dependencies.useEffect = {
-        type: 'library',
-        path: 'react',
-        version: '',
-        meta: {
-          namedImport: true,
-        },
-      }
+  const traverse = (node: any): void => {
+    if (!node) {
+      return
     }
 
-    const debounceEffect = types.expressionStatement(
-      types.callExpression(types.identifier('useEffect'), [
-        types.arrowFunctionExpression(
-          [],
-          types.blockStatement([
-            types.ifStatement(
-              types.memberExpression(
-                types.identifier(skipDebounceOnMountRefVar),
-                types.identifier('current')
-              ),
-              types.blockStatement([
-                types.expressionStatement(
-                  types.assignmentExpression(
-                    '=',
-                    types.memberExpression(
-                      types.identifier(skipDebounceOnMountRefVar),
-                      types.identifier('current')
-                    ),
-                    types.booleanLiteral(false)
-                  )
-                ),
-                types.returnStatement(),
-              ])
-            ),
-            types.variableDeclaration('const', [
-              types.variableDeclarator(
-                types.identifier('timer'),
-                types.callExpression(types.identifier('setTimeout'), [
-                  types.arrowFunctionExpression(
-                    [],
-                    types.blockStatement([
-                      types.expressionStatement(
-                        types.callExpression(types.identifier(setDebouncedSearchQueryVar), [
-                          types.identifier(searchQueryVar),
-                        ])
-                      ),
-                    ])
-                  ),
-                  types.numericLiteral(searchDebounce),
-                ])
-              ),
-            ]),
-            types.returnStatement(
-              types.arrowFunctionExpression(
-                [],
-                types.callExpression(types.identifier('clearTimeout'), [types.identifier('timer')])
-              )
-            ),
-          ])
-        ),
-        types.arrayExpression([types.identifier(searchQueryVar)]),
-      ])
-    )
-    searchOnlyEffects.push(debounceEffect)
+    if (node.type === 'JSXElement' && node.openingElement?.name?.name === 'input') {
+      const classAttr = node.openingElement.attributes?.find(
+        (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'className'
+      )
+      const className = classAttr?.value?.value || classAttr?.value?.expression?.value || ''
+      if (className.includes('search-input')) {
+        results.push({ node, className })
+      }
+    }
 
-    // Modify DataProvider to include search params (even without queryColumns)
-    if (detected.dataProviderJSX) {
-      addSearchParamsToDataProvider(detected.dataProviderJSX, {
-        debouncedSearchQueryVar,
-        queryColumns: queryColumns || [],
-      })
+    if (node.children && Array.isArray(node.children)) {
+      node.children.forEach((c: any) => traverse(c))
+    }
+    if (node.body) {
+      if (Array.isArray(node.body)) {
+        node.body.forEach((s: any) => traverse(s))
+      } else {
+        traverse(node.body)
+      }
     }
+    if (node.consequent) {
+      traverse(node.consequent)
+    }
+    if (node.alternate) {
+      traverse(node.alternate)
+    }
+    if (node.expression) {
+      traverse(node.expression)
+    }
+    if (node.argument) {
+      traverse(node.argument)
+    }
+  }
+
+  traverse(blockStatement)
+  return results
+}
 
-    // Modify search input
-    if (detected.searchInputJSX) {
-      addSearchInputHandlers(detected.searchInputJSX, {
-        searchQueryVar,
-        setSearchQueryVar,
-        searchEnabled: true,
-      } as any)
+function findAllPaginationNodesInJSX(
+  blockStatement: types.BlockStatement
+): Array<{ node: any; className: string }> {
+  const results: Array<{ node: any; className: string }> = []
+
+  const traverse = (node: any): void => {
+    if (!node) {
+      return
     }
-  })
 
-  // Add all state declarations at the beginning in correct order
-  searchOnlyStates.reverse().forEach((stateDecl) => {
-    blockStatement.body.unshift(stateDecl)
-  })
+    if (node.type === 'JSXElement') {
+      const classAttr = node.openingElement?.attributes?.find(
+        (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'className'
+      )
+      const className = classAttr?.value?.value || classAttr?.value?.expression?.value || ''
+      if (className.includes('cms-pagination-node')) {
+        results.push({ node, className })
+      }
+    }
 
-  // Recalculate insertIndex after adding states (since unshift shifted everything)
-  const newInsertIndex = blockStatement.body.findIndex(
-    (stmt: any) => stmt.type === 'ReturnStatement'
-  )
-  const finalInsertIndex = newInsertIndex !== -1 ? newInsertIndex : blockStatement.body.length
+    if (node.children && Array.isArray(node.children)) {
+      node.children.forEach((c: any) => traverse(c))
+    }
+    if (node.body) {
+      if (Array.isArray(node.body)) {
+        node.body.forEach((s: any) => traverse(s))
+      } else {
+        traverse(node.body)
+      }
+    }
+    if (node.consequent) {
+      traverse(node.consequent)
+    }
+    if (node.alternate) {
+      traverse(node.alternate)
+    }
+    if (node.expression) {
+      traverse(node.expression)
+    }
+    if (node.argument) {
+      traverse(node.argument)
+    }
+  }
 
-  // Add all useEffect hooks before the return statement
-  searchOnlyEffects.reverse().forEach((effect) => {
-    blockStatement.body.splice(finalInsertIndex, 0, effect)
-  })
+  traverse(blockStatement)
+  return results
 }
 
-function addSearchParamsToDataProvider(
-  dataProviderJSX: any,
-  config: { debouncedSearchQueryVar: string; queryColumns: string[] }
+function updateDataProviderForPaginatedSearch(
+  dp: any,
+  usage: DataSourceUsage,
+  vars: ReturnType<typeof getStateVarsForUsage>,
+  fileName: string
 ): void {
-  if (!dataProviderJSX || !dataProviderJSX.openingElement) {
-    return
-  }
+  const attrs = dp.openingElement.attributes
 
-  const { debouncedSearchQueryVar, queryColumns } = config
-
-  // 1. Update params to be wrapped in useMemo
-  const existingParamsAttr = dataProviderJSX.openingElement.attributes.find(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'params'
+  // Remove existing params, key, initialData, fetchData, persistDataDuringLoading
+  dp.openingElement.attributes = attrs.filter(
+    (attr: any) =>
+      !['params', 'key', 'initialData', 'fetchData', 'persistDataDuringLoading'].includes(
+        attr.name?.name
+      )
   )
 
-  if (existingParamsAttr && existingParamsAttr.value?.type === 'JSXExpressionContainer') {
-    const paramsObj = existingParamsAttr.value.expression
+  // Add params with useMemo
+  const paramsProps: types.ObjectProperty[] = [
+    types.objectProperty(
+      types.identifier('page'),
+      types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page'))
+    ),
+    types.objectProperty(types.identifier('perPage'), types.numericLiteral(usage.perPage)),
+    types.objectProperty(
+      types.identifier('query'),
+      types.memberExpression(
+        types.identifier(vars.combinedStateVar),
+        types.identifier('debouncedQuery')
+      )
+    ),
+  ]
+  if (usage.queryColumns.length > 0) {
+    paramsProps.push(
+      types.objectProperty(
+        types.identifier('queryColumns'),
+        types.callExpression(
+          types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+          [types.arrayExpression(usage.queryColumns.map((c) => types.stringLiteral(c)))]
+        )
+      )
+    )
+  }
 
-    if (paramsObj.type === 'ObjectExpression') {
-      // Add query to existing params properties
-      paramsObj.properties.push(
-        types.objectProperty(types.identifier('query'), types.identifier(debouncedSearchQueryVar))
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('params'),
+      types.jsxExpressionContainer(
+        types.callExpression(types.identifier('useMemo'), [
+          types.arrowFunctionExpression([], types.objectExpression(paramsProps)),
+          types.arrayExpression([types.identifier(vars.combinedStateVar)]),
+        ])
       )
+    )
+  )
 
-      // Add queryColumns only if they exist
-      if (queryColumns.length > 0) {
-        paramsObj.properties.push(
-          types.objectProperty(
-            types.identifier('queryColumns'),
-            types.callExpression(
-              types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
-              [types.arrayExpression(queryColumns.map((col) => types.stringLiteral(col)))]
-            )
-          )
+  // Add initialData
+  const initialDataCondition = types.logicalExpression(
+    '&&',
+    types.binaryExpression(
+      '===',
+      types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page')),
+      types.numericLiteral(1)
+    ),
+    types.unaryExpression(
+      '!',
+      types.memberExpression(
+        types.identifier(vars.combinedStateVar),
+        types.identifier('debouncedQuery')
+      ),
+      true
+    )
+  )
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('initialData'),
+      types.jsxExpressionContainer(
+        types.conditionalExpression(
+          initialDataCondition,
+          types.optionalMemberExpression(
+            types.identifier('props'),
+            types.identifier(vars.propsPrefix),
+            false,
+            true
+          ),
+          types.identifier('undefined')
         )
-      }
+      )
+    )
+  )
 
-      // Wrap in useMemo with debouncedSearchQueryVar as dependency
-      const memoizedParamsValue = types.callExpression(types.identifier('useMemo'), [
-        types.arrowFunctionExpression([], paramsObj),
-        types.arrayExpression([types.identifier(debouncedSearchQueryVar)]),
-      ])
+  // Add key
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('key'),
+      types.jsxExpressionContainer(
+        types.templateLiteral(
+          [
+            types.templateElement({
+              raw: `${usage.dataSourceIdentifier}-`,
+              cooked: `${usage.dataSourceIdentifier}-`,
+            }),
+            types.templateElement({ raw: '-', cooked: '-' }),
+            types.templateElement({ raw: '', cooked: '' }),
+          ],
+          [
+            types.memberExpression(
+              types.identifier(vars.combinedStateVar),
+              types.identifier('page')
+            ),
+            types.memberExpression(
+              types.identifier(vars.combinedStateVar),
+              types.identifier('debouncedQuery')
+            ),
+          ]
+        )
+      )
+    )
+  )
 
-      existingParamsAttr.value.expression = memoizedParamsValue
-    }
-  }
+  // Add fetchData
+  dp.openingElement.attributes.push(createFetchDataAttribute(fileName))
+
+  // Add persistDataDuringLoading
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('persistDataDuringLoading'),
+      types.jsxExpressionContainer(types.booleanLiteral(true))
+    )
+  )
+}
+
+function updateDataProviderForPaginationOnly(
+  dp: any,
+  usage: DataSourceUsage,
+  vars: ReturnType<typeof getStateVarsForUsage>,
+  fileName: string
+): void {
+  const attrs = dp.openingElement.attributes
 
-  // 2. Update initialData to be conditional on empty search
-  const existingInitialDataAttr = dataProviderJSX.openingElement.attributes.find(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'initialData'
+  dp.openingElement.attributes = attrs.filter(
+    (attr: any) =>
+      !['params', 'key', 'initialData', 'fetchData', 'persistDataDuringLoading'].includes(
+        attr.name?.name
+      )
   )
 
-  if (existingInitialDataAttr && existingInitialDataAttr.value?.type === 'JSXExpressionContainer') {
-    const currentInitialData = existingInitialDataAttr.value.expression
-
-    // Make it conditional: only use initialData if search is empty
-    existingInitialDataAttr.value.expression = types.conditionalExpression(
-      types.unaryExpression('!', types.identifier(debouncedSearchQueryVar), true),
-      currentInitialData,
-      types.identifier('undefined')
+  // Add params
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('params'),
+      types.jsxExpressionContainer(
+        types.callExpression(types.identifier('useMemo'), [
+          types.arrowFunctionExpression(
+            [],
+            types.objectExpression([
+              types.objectProperty(types.identifier('page'), types.identifier(vars.pageStateVar)),
+              types.objectProperty(
+                types.identifier('perPage'),
+                types.numericLiteral(usage.perPage)
+              ),
+            ])
+          ),
+          types.arrayExpression([types.identifier(vars.pageStateVar)]),
+        ])
+      )
     )
-  }
-
-  // 3. Update key to include search query
-  const existingKeyAttr = dataProviderJSX.openingElement.attributes.find(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'key'
   )
 
-  const keyExpression = types.templateLiteral(
-    [
-      types.templateElement({ raw: 'search-', cooked: 'search-' }),
-      types.templateElement({ raw: '', cooked: '' }),
-    ],
-    [types.identifier(debouncedSearchQueryVar)]
+  // Add initialData
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('initialData'),
+      types.jsxExpressionContainer(
+        types.conditionalExpression(
+          types.binaryExpression(
+            '===',
+            types.identifier(vars.pageStateVar),
+            types.numericLiteral(1)
+          ),
+          types.optionalMemberExpression(
+            types.identifier('props'),
+            types.identifier(vars.propsPrefix),
+            false,
+            true
+          ),
+          types.identifier('undefined')
+        )
+      )
+    )
   )
 
-  const keyAttr = types.jsxAttribute(
-    types.jsxIdentifier('key'),
-    types.jsxExpressionContainer(keyExpression)
+  // Add key
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('key'),
+      types.jsxExpressionContainer(
+        types.templateLiteral(
+          [
+            types.templateElement({
+              raw: `${usage.dataSourceIdentifier}-page-`,
+              cooked: `${usage.dataSourceIdentifier}-page-`,
+            }),
+            types.templateElement({ raw: '', cooked: '' }),
+          ],
+          [types.identifier(vars.pageStateVar)]
+        )
+      )
+    )
   )
 
-  if (existingKeyAttr) {
-    const index = dataProviderJSX.openingElement.attributes.indexOf(existingKeyAttr)
-    dataProviderJSX.openingElement.attributes[index] = keyAttr
-  } else {
-    dataProviderJSX.openingElement.attributes.push(keyAttr)
-  }
+  // Add fetchData
+  dp.openingElement.attributes.push(createFetchDataAttribute(fileName))
+
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('persistDataDuringLoading'),
+      types.jsxExpressionContainer(types.booleanLiteral(true))
+    )
+  )
 }
 
-function addPaginationParamsToDataProvider(
-  dataProviderJSX: any,
-  info: ArrayMapperPaginationInfo,
-  paginationIndex: number
+function updateDataProviderForSearchOnly(
+  dp: any,
+  usage: DataSourceUsage,
+  vars: ReturnType<typeof getStateVarsForUsage>,
+  fileName: string
 ): void {
-  if (!dataProviderJSX || !dataProviderJSX.openingElement) {
-    return
-  }
-
-  const combinedStateVar = (info as any).combinedStateVar
+  const attrs = dp.openingElement.attributes
 
-  let paramsProperties: any[]
-  let dependencies: any[]
+  dp.openingElement.attributes = attrs.filter(
+    (attr: any) =>
+      !['params', 'key', 'initialData', 'fetchData', 'persistDataDuringLoading'].includes(
+        attr.name?.name
+      )
+  )
 
-  if (info.searchEnabled && combinedStateVar) {
-    // Use combined state for both page and query
-    paramsProperties = [
-      types.objectProperty(
-        types.identifier('page'),
-        types.memberExpression(types.identifier(combinedStateVar), types.identifier('page'))
-      ),
-      types.objectProperty(types.identifier('perPage'), types.numericLiteral(info.perPage)),
+  // Add params
+  const paramsProps: types.ObjectProperty[] = [
+    types.objectProperty(types.identifier('query'), types.identifier(vars.debouncedSearchQueryVar)),
+  ]
+  if (usage.queryColumns.length > 0) {
+    paramsProps.push(
       types.objectProperty(
-        types.identifier('query'),
-        types.memberExpression(
-          types.identifier(combinedStateVar),
-          types.identifier('debouncedQuery')
-        )
-      ),
-    ]
-
-    if (info.queryColumns && info.queryColumns.length > 0) {
-      paramsProperties.push(
-        types.objectProperty(
-          types.identifier('queryColumns'),
-          types.callExpression(
-            types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
-            [types.arrayExpression(info.queryColumns.map((col) => types.stringLiteral(col)))]
-          )
+        types.identifier('queryColumns'),
+        types.callExpression(
+          types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+          [types.arrayExpression(usage.queryColumns.map((c) => types.stringLiteral(c)))]
         )
       )
-    }
-
-    // Single dependency: the combined state object
-    dependencies = [types.identifier(combinedStateVar)]
-  } else {
-    // Pagination only (no search)
-    paramsProperties = [
-      types.objectProperty(types.identifier('page'), types.identifier(info.pageStateVar)),
-      types.objectProperty(types.identifier('perPage'), types.numericLiteral(info.perPage)),
-    ]
-
-    dependencies = [types.identifier(info.pageStateVar)]
+    )
   }
 
-  // Wrap params in useMemo to prevent unnecessary refetches
-  const memoizedParamsValue = types.callExpression(types.identifier('useMemo'), [
-    types.arrowFunctionExpression([], types.objectExpression(paramsProperties)),
-    types.arrayExpression(dependencies),
-  ])
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('params'),
+      types.jsxExpressionContainer(
+        types.callExpression(types.identifier('useMemo'), [
+          types.arrowFunctionExpression([], types.objectExpression(paramsProps)),
+          types.arrayExpression([types.identifier(vars.debouncedSearchQueryVar)]),
+        ])
+      )
+    )
+  )
 
-  const paramsAttr = types.jsxAttribute(
-    types.jsxIdentifier('params'),
-    types.jsxExpressionContainer(memoizedParamsValue)
+  // Add initialData
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('initialData'),
+      types.jsxExpressionContainer(
+        types.conditionalExpression(
+          types.unaryExpression('!', types.identifier(vars.debouncedSearchQueryVar), true),
+          types.optionalMemberExpression(
+            types.identifier('props'),
+            types.identifier(vars.propsPrefix),
+            false,
+            true
+          ),
+          types.identifier('undefined')
+        )
+      )
+    )
   )
 
-  const existingParamsAttr = dataProviderJSX.openingElement.attributes.find(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'params'
+  // Add key
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('key'),
+      types.jsxExpressionContainer(
+        types.templateLiteral(
+          [
+            types.templateElement({ raw: 'search-', cooked: 'search-' }),
+            types.templateElement({ raw: '', cooked: '' }),
+          ],
+          [types.identifier(vars.debouncedSearchQueryVar)]
+        )
+      )
+    )
   )
 
-  if (existingParamsAttr) {
-    const index = dataProviderJSX.openingElement.attributes.indexOf(existingParamsAttr)
-    dataProviderJSX.openingElement.attributes[index] = paramsAttr
-  } else {
-    dataProviderJSX.openingElement.attributes.push(paramsAttr)
-  }
+  // Add fetchData
+  dp.openingElement.attributes.push(createFetchDataAttribute(fileName))
 
-  const existingInitialDataAttr = dataProviderJSX.openingElement.attributes.find(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'initialData'
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('persistDataDuringLoading'),
+      types.jsxExpressionContainer(types.booleanLiteral(true))
+    )
   )
+}
 
-  if (existingInitialDataAttr && existingInitialDataAttr.value) {
-    // Update initialData to use the paginated prop name
-    const paginatedPropName = `${info.dataSourceIdentifier}_pg_${paginationIndex}`
+function updateDataProviderForPlain(dp: any, vars: ReturnType<typeof getStateVarsForUsage>): void {
+  const attrs = dp.openingElement.attributes
 
-    // If search is enabled, use combined state; otherwise use page state
-    let condition: any
+  // Remove params and fetchData - plain mappers only use initialData
+  dp.openingElement.attributes = attrs.filter(
+    (attr: any) => !['params', 'fetchData'].includes(attr.name?.name)
+  )
 
-    if (info.searchEnabled && combinedStateVar) {
-      condition = types.logicalExpression(
-        '&&',
-        types.binaryExpression(
-          '===',
-          types.memberExpression(types.identifier(combinedStateVar), types.identifier('page')),
-          types.numericLiteral(1)
-        ),
-        types.unaryExpression(
-          '!',
-          types.memberExpression(
-            types.identifier(combinedStateVar),
-            types.identifier('debouncedQuery')
-          ),
-          true
-        )
-      )
-    } else {
-      condition = types.binaryExpression(
-        '===',
-        types.identifier(info.pageStateVar),
-        types.numericLiteral(1)
-      )
-    }
+  // Update initialData to use correct prop
+  const existingInitialData = dp.openingElement.attributes.find(
+    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'initialData'
+  )
 
-    existingInitialDataAttr.value.expression = types.conditionalExpression(
-      condition,
+  if (existingInitialData) {
+    existingInitialData.value = types.jsxExpressionContainer(
       types.optionalMemberExpression(
         types.identifier('props'),
-        types.identifier(paginatedPropName),
+        types.identifier(vars.propsPrefix),
         false,
         true
-      ),
-      types.identifier('undefined')
+      )
     )
   }
+}
 
-  const existingKeyAttr = dataProviderJSX.openingElement.attributes.find(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'key'
+function stabilizeDataProviderWithoutRepeater(dp: any): void {
+  const attrs = dp.openingElement.attributes
+
+  // Find the params attribute
+  const paramsAttrIndex = attrs.findIndex(
+    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'params'
   )
 
-  // Include page and search in key to trigger refetch when they change
-  let keyExpression: any
-  if (info.searchEnabled && combinedStateVar) {
-    keyExpression = types.templateLiteral(
-      [
-        types.templateElement({
-          raw: `${info.dataSourceIdentifier}-page-`,
-          cooked: `${info.dataSourceIdentifier}-page-`,
-        }),
-        types.templateElement({ raw: '-search-', cooked: '-search-' }),
-        types.templateElement({ raw: '', cooked: '' }),
-      ],
-      [
-        types.memberExpression(types.identifier(combinedStateVar), types.identifier('page')),
-        types.memberExpression(
-          types.identifier(combinedStateVar),
-          types.identifier('debouncedQuery')
-        ),
-      ]
-    )
-  } else {
-    keyExpression = types.templateLiteral(
-      [
-        types.templateElement({
-          raw: `${info.dataSourceIdentifier}-`,
-          cooked: `${info.dataSourceIdentifier}-`,
-        }),
-        types.templateElement({ raw: '', cooked: '' }),
-      ],
-      [types.identifier(info.pageStateVar)]
-    )
+  if (paramsAttrIndex === -1) {
+    return
   }
 
-  const keyAttr = types.jsxAttribute(
-    types.jsxIdentifier('key'),
-    types.jsxExpressionContainer(keyExpression)
-  )
+  const paramsAttr = attrs[paramsAttrIndex] as types.JSXAttribute
 
-  if (existingKeyAttr) {
-    const index = dataProviderJSX.openingElement.attributes.indexOf(existingKeyAttr)
-    dataProviderJSX.openingElement.attributes[index] = keyAttr
-  } else {
-    dataProviderJSX.openingElement.attributes.push(keyAttr)
+  // Check if params is already wrapped in useMemo
+  if (
+    paramsAttr.value?.type === 'JSXExpressionContainer' &&
+    paramsAttr.value.expression.type === 'CallExpression' &&
+    (paramsAttr.value.expression.callee as types.Identifier)?.name === 'useMemo'
+  ) {
+    return
   }
 
-  // For pagination, always create a fresh fetchData that calls the API route
-  // Get the resource definition to build the API URL
-  const resourceDefAttr = dataProviderJSX.openingElement.attributes.find(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'resourceDefinition'
-  )
+  // Get the current params value expression
+  let paramsExpression: types.Expression | null = null
 
-  if (resourceDefAttr && resourceDefAttr.value?.type === 'JSXExpressionContainer') {
-    const resourceDef = resourceDefAttr.value.expression
-    if (resourceDef.type === 'ObjectExpression') {
-      const dataSourceIdProp = (resourceDef.properties as any[]).find(
-        (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceId'
-      )
-      const tableNameProp = (resourceDef.properties as any[]).find(
-        (p: any) => p.type === 'ObjectProperty' && p.key.value === 'tableName'
-      )
-      const dataSourceTypeProp = (resourceDef.properties as any[]).find(
-        (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceType'
-      )
+  if (paramsAttr.value?.type === 'JSXExpressionContainer') {
+    paramsExpression = paramsAttr.value.expression as types.Expression
+  }
 
-      if (dataSourceIdProp && tableNameProp && dataSourceTypeProp) {
-        const dataSourceId = dataSourceIdProp.value.value
-        const tableName = tableNameProp.value.value
-        const dataSourceType = dataSourceTypeProp.value.value
-        const fileName = `${dataSourceType}-${tableName}-${dataSourceId.substring(0, 8)}`
+  if (!paramsExpression) {
+    return
+  }
 
-        // Create fetchData attribute with proper fetch chain wrapped in useCallback
-        const fetchDataValue = types.callExpression(types.identifier('useCallback'), [
-          types.arrowFunctionExpression(
-            [types.identifier('params')],
-            types.callExpression(
-              types.memberExpression(
-                types.callExpression(
-                  types.memberExpression(
-                    types.callExpression(types.identifier('fetch'), [
-                      types.templateLiteral(
-                        [
-                          types.templateElement({
-                            raw: `/api/${fileName}?`,
-                            cooked: `/api/${fileName}?`,
-                          }),
-                          types.templateElement({ raw: '', cooked: '' }),
-                        ],
-                        [
-                          types.newExpression(types.identifier('URLSearchParams'), [
-                            types.identifier('params'),
-                          ]),
-                        ]
+  // Wrap params in useMemo with empty dependencies array
+  // This ensures the object reference stays stable across re-renders
+  const memoizedParams = types.callExpression(types.identifier('useMemo'), [
+    types.arrowFunctionExpression([], paramsExpression),
+    types.arrayExpression([]),
+  ])
+
+  // Replace the params attribute
+  attrs[paramsAttrIndex] = types.jsxAttribute(
+    types.jsxIdentifier('params'),
+    types.jsxExpressionContainer(memoizedParams)
+  )
+}
+
+function createFetchDataAttribute(fileName: string): types.JSXAttribute {
+  return types.jsxAttribute(
+    types.jsxIdentifier('fetchData'),
+    types.jsxExpressionContainer(
+      types.callExpression(types.identifier('useCallback'), [
+        types.arrowFunctionExpression(
+          [types.identifier('params')],
+          types.callExpression(
+            types.memberExpression(
+              types.callExpression(
+                types.memberExpression(
+                  types.callExpression(types.identifier('fetch'), [
+                    types.templateLiteral(
+                      [
+                        types.templateElement({
+                          raw: `/api/${fileName}?`,
+                          cooked: `/api/${fileName}?`,
+                        }),
+                        types.templateElement({ raw: '', cooked: '' }),
+                      ],
+                      [
+                        types.newExpression(types.identifier('URLSearchParams'), [
+                          types.identifier('params'),
+                        ]),
+                      ]
+                    ),
+                    types.objectExpression([
+                      types.objectProperty(
+                        types.identifier('headers'),
+                        types.objectExpression([
+                          types.objectProperty(
+                            types.stringLiteral('Content-Type'),
+                            types.stringLiteral('application/json')
+                          ),
+                        ])
                       ),
-                      types.objectExpression([
-                        types.objectProperty(
-                          types.identifier('headers'),
-                          types.objectExpression([
-                            types.objectProperty(
-                              types.stringLiteral('Content-Type'),
-                              types.stringLiteral('application/json')
-                            ),
-                          ])
-                        ),
-                      ]),
                     ]),
-                    types.identifier('then')
-                  ),
-                  [
-                    types.arrowFunctionExpression(
-                      [types.identifier('res')],
-                      types.callExpression(
-                        types.memberExpression(types.identifier('res'), types.identifier('json')),
-                        []
-                      )
-                    ),
-                  ]
+                  ]),
+                  types.identifier('then')
                 ),
-                types.identifier('then')
+                [
+                  types.arrowFunctionExpression(
+                    [types.identifier('res')],
+                    types.callExpression(
+                      types.memberExpression(types.identifier('res'), types.identifier('json')),
+                      []
+                    )
+                  ),
+                ]
               ),
-              [
-                types.arrowFunctionExpression(
-                  [types.identifier('response')],
-                  types.optionalMemberExpression(
-                    types.identifier('response'),
-                    types.identifier('data'),
-                    false,
-                    true
-                  )
-                ),
-              ]
-            )
-          ),
-          types.arrayExpression([]),
-        ])
-
-        const newFetchDataAttr = types.jsxAttribute(
-          types.jsxIdentifier('fetchData'),
-          types.jsxExpressionContainer(fetchDataValue)
-        )
-
-        // Remove existing fetchData attribute if present
-        const existingFetchDataIndex = dataProviderJSX.openingElement.attributes.findIndex(
-          (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'fetchData'
-        )
-
-        if (existingFetchDataIndex !== -1) {
-          dataProviderJSX.openingElement.attributes[existingFetchDataIndex] = newFetchDataAttr
-        } else {
-          dataProviderJSX.openingElement.attributes.push(newFetchDataAttr)
-        }
-      }
-    }
-  }
+              types.identifier('then')
+            ),
+            [
+              types.arrowFunctionExpression(
+                [types.identifier('response')],
+                types.optionalMemberExpression(
+                  types.identifier('response'),
+                  types.identifier('data'),
+                  false,
+                  true
+                )
+              ),
+            ]
+          )
+        ),
+        types.arrayExpression([]),
+      ])
+    )
+  )
 }
 
-function findChildWithClass(node: any, classSubstring: string): string | null {
-  if (!node) {
-    return null
-  }
-
-  if (node.type === 'JSXElement') {
-    const className = getClassName(node.openingElement?.attributes || [])
-    if (className && className.includes(classSubstring)) {
-      return className
-    }
-  }
-
-  if (node.children) {
-    for (const child of node.children) {
-      const found = findChildWithClass(child, classSubstring)
-      if (found) {
-        return found
-      }
-    }
-  }
+function wireSearchInput(inputNode: any, vars: ReturnType<typeof getStateVarsForUsage>): void {
+  // Remove existing onChange and value
+  inputNode.openingElement.attributes = inputNode.openingElement.attributes.filter(
+    (attr: any) => !['onChange', 'value'].includes(attr.name?.name)
+  )
 
-  if (typeof node === 'object') {
-    for (const value of Object.values(node)) {
-      if (Array.isArray(value)) {
-        for (const item of value) {
-          const found = findChildWithClass(item, classSubstring)
-          if (found) {
-            return found
-          }
-        }
-      } else if (typeof value === 'object') {
-        const found = findChildWithClass(value, classSubstring)
-        if (found) {
-          return found
-        }
-      }
-    }
-  }
+  // Add onChange
+  inputNode.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('onChange'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression(
+          [types.identifier('e')],
+          types.callExpression(types.identifier(vars.setSearchQueryVar), [
+            types.memberExpression(
+              types.memberExpression(types.identifier('e'), types.identifier('target')),
+              types.identifier('value')
+            ),
+          ])
+        )
+      )
+    )
+  )
 
-  return null
+  // Add value
+  inputNode.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('value'),
+      types.jsxExpressionContainer(types.identifier(vars.searchQueryVar))
+    )
+  )
 }
 
-function modifyPaginationButtons(
-  blockStatement: types.BlockStatement,
-  detectedPaginations: DetectedPagination[],
-  paginationInfos: ArrayMapperPaginationInfo[]
+function wirePaginationButtons(
+  paginationNode: any,
+  usage: DataSourceUsage,
+  vars: ReturnType<typeof getStateVarsForUsage>
 ): void {
-  const modifiedButtons = new Set<any>()
-
-  const modifyNode = (node: any): void => {
+  // Find prev and next buttons
+  const findButton = (node: any, direction: 'previous' | 'next'): any => {
     if (!node) {
-      return
+      return null
     }
 
     if (node.type === 'JSXElement') {
-      const openingElement = node.openingElement
-      if (openingElement && openingElement.name && openingElement.name.type === 'JSXIdentifier') {
-        const className = getClassName(openingElement.attributes)
-
-        if (className && !modifiedButtons.has(node)) {
-          for (let index = 0; index < detectedPaginations.length; index++) {
-            const detected = detectedPaginations[index]
-            const info = paginationInfos[index]
-
-            if (!info) {
-              continue
-            }
-
-            if (className === detected.prevButtonClass) {
-              convertToButton(node, info, 'prev')
-              modifiedButtons.add(node)
-              break
-            } else if (className === detected.nextButtonClass) {
-              convertToButton(node, info, 'next')
-              modifiedButtons.add(node)
-              break
-            }
-          }
-        }
+      const classAttr = node.openingElement?.attributes?.find(
+        (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'className'
+      )
+      const className = classAttr?.value?.value || classAttr?.value?.expression?.value || ''
+      if (className.includes(direction)) {
+        return node
       }
     }
 
-    if (typeof node === 'object') {
-      Object.values(node).forEach((value) => {
-        if (Array.isArray(value)) {
-          value.forEach((item) => modifyNode(item))
-        } else if (typeof value === 'object') {
-          modifyNode(value)
+    if (node.children && Array.isArray(node.children)) {
+      for (const c of node.children) {
+        const found = findButton(c, direction)
+        if (found) {
+          return found
         }
-      })
+      }
     }
+    return null
   }
 
-  modifyNode(blockStatement)
-}
-
-function modifySearchInputs(
-  blockStatement: types.BlockStatement,
-  detectedPaginations: DetectedPagination[],
-  paginationInfos: ArrayMapperPaginationInfo[]
-): void {
-  const modifiedInputs = new Set<any>()
+  const prevButton = findButton(paginationNode, 'previous')
+  const nextButton = findButton(paginationNode, 'next')
 
-  const modifyNode = (node: any): void => {
-    if (!node) {
-      return
-    }
+  const isCombinedState = usage.category === 'paginated+search'
 
-    if (node.type === 'JSXElement') {
-      const openingElement = node.openingElement
-      if (openingElement && openingElement.name && openingElement.name.type === 'JSXIdentifier') {
-        const className = getClassName(openingElement.attributes)
-
-        if (className && !modifiedInputs.has(node)) {
-          for (let index = 0; index < detectedPaginations.length; index++) {
-            const detected = detectedPaginations[index]
-            const info = paginationInfos[index]
-
-            if (!info || !info.searchEnabled) {
-              continue
-            }
-
-            if (className === detected.searchInputClass) {
-              addSearchInputHandlers(node, info)
-              modifiedInputs.add(node)
-              break
-            }
-          }
-        }
-      }
+  if (prevButton) {
+    // Change to button element
+    prevButton.openingElement.name.name = 'button'
+    if (prevButton.closingElement) {
+      prevButton.closingElement.name.name = 'button'
     }
 
-    if (typeof node === 'object') {
-      Object.values(node).forEach((value) => {
-        if (Array.isArray(value)) {
-          value.forEach((item) => modifyNode(item))
-        } else if (typeof value === 'object') {
-          modifyNode(value)
-        }
-      })
+    // Add type="button"
+    const hasType = prevButton.openingElement.attributes.some((a: any) => a.name?.name === 'type')
+    if (!hasType) {
+      prevButton.openingElement.attributes.push(
+        types.jsxAttribute(types.jsxIdentifier('type'), types.stringLiteral('button'))
+      )
     }
-  }
-
-  modifyNode(blockStatement)
-}
-
-function addSearchInputHandlers(jsxElement: any, info: ArrayMapperPaginationInfo): void {
-  if (!info.searchQueryVar || !info.setSearchQueryVar) {
-    return
-  }
-
-  const openingElement = jsxElement.openingElement
-
-  removeAttribute(openingElement.attributes, 'onChange')
-  removeAttribute(openingElement.attributes, 'value')
-
-  const onChangeHandler = types.arrowFunctionExpression(
-    [types.identifier('e')],
-    types.callExpression(types.identifier(info.setSearchQueryVar!), [
-      types.memberExpression(
-        types.memberExpression(types.identifier('e'), types.identifier('target')),
-        types.identifier('value')
-      ),
-    ])
-  )
-
-  openingElement.attributes.push(
-    types.jsxAttribute(
-      types.jsxIdentifier('onChange'),
-      types.jsxExpressionContainer(onChangeHandler)
-    )
-  )
-
-  openingElement.attributes.push(
-    types.jsxAttribute(
-      types.jsxIdentifier('value'),
-      types.jsxExpressionContainer(types.identifier(info.searchQueryVar!))
-    )
-  )
-}
-
-function convertToButton(
-  jsxElement: any,
-  info: ArrayMapperPaginationInfo,
-  buttonType: 'prev' | 'next'
-): void {
-  const openingElement = jsxElement.openingElement
-
-  if (openingElement.name.type === 'JSXIdentifier') {
-    openingElement.name.name = 'button'
-  }
-  if (jsxElement.closingElement && jsxElement.closingElement.name.type === 'JSXIdentifier') {
-    jsxElement.closingElement.name.name = 'button'
-  }
-
-  removeAttribute(openingElement.attributes, 'onClick')
-  removeAttribute(openingElement.attributes, 'disabled')
-  removeAttribute(openingElement.attributes, 'type')
 
-  const combinedStateVar = (info as any).combinedStateVar
-  const setCombinedStateVar = (info as any).setCombinedStateVar
+    // Add onClick
+    prevButton.openingElement.attributes = prevButton.openingElement.attributes.filter(
+      (a: any) => a.name?.name !== 'onClick'
+    )
 
-  let onClickHandler: any
-  if (info.searchEnabled && combinedStateVar && setCombinedStateVar) {
-    // Use combined state: update only the page property
-    onClickHandler =
-      buttonType === 'prev'
-        ? types.arrowFunctionExpression(
-            [],
-            types.callExpression(types.identifier(setCombinedStateVar), [
-              types.arrowFunctionExpression(
-                [types.identifier('state')],
-                types.objectExpression([
-                  types.spreadElement(types.identifier('state')),
-                  types.objectProperty(
-                    types.identifier('page'),
-                    types.callExpression(
-                      types.memberExpression(types.identifier('Math'), types.identifier('max')),
-                      [
-                        types.numericLiteral(1),
-                        types.binaryExpression(
-                          '-',
-                          types.memberExpression(
-                            types.identifier('state'),
-                            types.identifier('page')
+    if (isCombinedState) {
+      prevButton.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier('onClick'),
+          types.jsxExpressionContainer(
+            types.arrowFunctionExpression(
+              [],
+              types.callExpression(types.identifier(vars.setCombinedStateVar), [
+                types.arrowFunctionExpression(
+                  [types.identifier('state')],
+                  types.objectExpression([
+                    types.spreadElement(types.identifier('state')),
+                    types.objectProperty(
+                      types.identifier('page'),
+                      types.callExpression(
+                        types.memberExpression(types.identifier('Math'), types.identifier('max')),
+                        [
+                          types.numericLiteral(1),
+                          types.binaryExpression(
+                            '-',
+                            types.memberExpression(
+                              types.identifier('state'),
+                              types.identifier('page')
+                            ),
+                            types.numericLiteral(1)
                           ),
-                          types.numericLiteral(1)
-                        ),
-                      ]
-                    )
-                  ),
-                ])
-              ),
-            ])
+                        ]
+                      )
+                    ),
+                  ])
+                ),
+              ])
+            )
           )
-        : types.arrowFunctionExpression(
-            [],
-            types.callExpression(types.identifier(setCombinedStateVar), [
-              types.arrowFunctionExpression(
-                [types.identifier('state')],
-                types.objectExpression([
-                  types.spreadElement(types.identifier('state')),
-                  types.objectProperty(
-                    types.identifier('page'),
-                    types.binaryExpression(
-                      '+',
-                      types.memberExpression(types.identifier('state'), types.identifier('page')),
-                      types.numericLiteral(1)
-                    )
-                  ),
-                ])
+        )
+      )
+
+      // Add disabled
+      prevButton.openingElement.attributes = prevButton.openingElement.attributes.filter(
+        (a: any) => a.name?.name !== 'disabled'
+      )
+      prevButton.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier('disabled'),
+          types.jsxExpressionContainer(
+            types.binaryExpression(
+              '<=',
+              types.memberExpression(
+                types.identifier(vars.combinedStateVar),
+                types.identifier('page')
               ),
-            ])
+              types.numericLiteral(1)
+            )
           )
-  } else {
-    // Regular pagination (no search)
-    onClickHandler =
-      buttonType === 'prev'
-        ? types.arrowFunctionExpression(
-            [],
-            types.callExpression(types.identifier(info.setPageStateVar), [
-              types.arrowFunctionExpression(
-                [types.identifier('p')],
-                types.callExpression(
-                  types.memberExpression(types.identifier('Math'), types.identifier('max')),
-                  [
-                    types.numericLiteral(1),
-                    types.binaryExpression('-', types.identifier('p'), types.numericLiteral(1)),
-                  ]
-                )
-              ),
-            ])
+        )
+      )
+    } else {
+      prevButton.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier('onClick'),
+          types.jsxExpressionContainer(
+            types.arrowFunctionExpression(
+              [],
+              types.callExpression(types.identifier(vars.setPageStateVar), [
+                types.arrowFunctionExpression(
+                  [types.identifier('page')],
+                  types.callExpression(
+                    types.memberExpression(types.identifier('Math'), types.identifier('max')),
+                    [
+                      types.numericLiteral(1),
+                      types.binaryExpression(
+                        '-',
+                        types.identifier('page'),
+                        types.numericLiteral(1)
+                      ),
+                    ]
+                  )
+                ),
+              ])
+            )
           )
-        : types.arrowFunctionExpression(
-            [],
-            types.callExpression(types.identifier(info.setPageStateVar), [
-              types.arrowFunctionExpression(
-                [types.identifier('p')],
-                types.binaryExpression('+', types.identifier('p'), types.numericLiteral(1))
-              ),
-            ])
+        )
+      )
+
+      prevButton.openingElement.attributes = prevButton.openingElement.attributes.filter(
+        (a: any) => a.name?.name !== 'disabled'
+      )
+      prevButton.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier('disabled'),
+          types.jsxExpressionContainer(
+            types.binaryExpression(
+              '<=',
+              types.identifier(vars.pageStateVar),
+              types.numericLiteral(1)
+            )
           )
+        )
+      )
+    }
   }
 
-  openingElement.attributes.push(
-    types.jsxAttribute(types.jsxIdentifier('onClick'), types.jsxExpressionContainer(onClickHandler))
-  )
-  openingElement.attributes.push(
-    types.jsxAttribute(types.jsxIdentifier('type'), types.stringLiteral('button'))
-  )
+  if (nextButton) {
+    nextButton.openingElement.name.name = 'button'
+    if (nextButton.closingElement) {
+      nextButton.closingElement.name.name = 'button'
+    }
+
+    const hasType = nextButton.openingElement.attributes.some((a: any) => a.name?.name === 'type')
+    if (!hasType) {
+      nextButton.openingElement.attributes.push(
+        types.jsxAttribute(types.jsxIdentifier('type'), types.stringLiteral('button'))
+      )
+    }
 
-  // Add disabled attribute with simple page number checks
-  const maxPagesStateVar = (info as any).maxPagesStateVar
-  let disabledExpr: any
+    nextButton.openingElement.attributes = nextButton.openingElement.attributes.filter(
+      (a: any) => a.name?.name !== 'onClick'
+    )
 
-  if (info.searchEnabled && combinedStateVar) {
-    disabledExpr =
-      buttonType === 'prev'
-        ? types.binaryExpression(
-            '<=',
-            types.memberExpression(types.identifier(combinedStateVar), types.identifier('page')),
-            types.numericLiteral(1)
+    if (isCombinedState) {
+      nextButton.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier('onClick'),
+          types.jsxExpressionContainer(
+            types.arrowFunctionExpression(
+              [],
+              types.callExpression(types.identifier(vars.setCombinedStateVar), [
+                types.arrowFunctionExpression(
+                  [types.identifier('state')],
+                  types.objectExpression([
+                    types.spreadElement(types.identifier('state')),
+                    types.objectProperty(
+                      types.identifier('page'),
+                      types.binaryExpression(
+                        '+',
+                        types.memberExpression(types.identifier('state'), types.identifier('page')),
+                        types.numericLiteral(1)
+                      )
+                    ),
+                  ])
+                ),
+              ])
+            )
+          )
+        )
+      )
+
+      nextButton.openingElement.attributes = nextButton.openingElement.attributes.filter(
+        (a: any) => a.name?.name !== 'disabled'
+      )
+      nextButton.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier('disabled'),
+          types.jsxExpressionContainer(
+            types.binaryExpression(
+              '>=',
+              types.memberExpression(
+                types.identifier(vars.combinedStateVar),
+                types.identifier('page')
+              ),
+              types.identifier(vars.maxPagesStateVar)
+            )
           )
-        : types.binaryExpression(
-            '>=',
-            types.memberExpression(types.identifier(combinedStateVar), types.identifier('page')),
-            types.identifier(maxPagesStateVar)
+        )
+      )
+    } else {
+      nextButton.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier('onClick'),
+          types.jsxExpressionContainer(
+            types.arrowFunctionExpression(
+              [],
+              types.callExpression(types.identifier(vars.setPageStateVar), [
+                types.arrowFunctionExpression(
+                  [types.identifier('page')],
+                  types.binaryExpression('+', types.identifier('page'), types.numericLiteral(1))
+                ),
+              ])
+            )
           )
-  } else {
-    disabledExpr =
-      buttonType === 'prev'
-        ? types.binaryExpression('<=', types.identifier(info.pageStateVar), types.numericLiteral(1))
-        : types.binaryExpression(
-            '>=',
-            types.identifier(info.pageStateVar),
-            types.identifier(maxPagesStateVar)
+        )
+      )
+
+      nextButton.openingElement.attributes = nextButton.openingElement.attributes.filter(
+        (a: any) => a.name?.name !== 'disabled'
+      )
+      nextButton.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier('disabled'),
+          types.jsxExpressionContainer(
+            types.binaryExpression(
+              '>=',
+              types.identifier(vars.pageStateVar),
+              types.identifier(vars.maxPagesStateVar)
+            )
           )
+        )
+      )
+    }
   }
-
-  openingElement.attributes.push(
-    types.jsxAttribute(types.jsxIdentifier('disabled'), types.jsxExpressionContainer(disabledExpr))
-  )
 }
 
-function getClassName(attributes: any[]): string | null {
-  const classNameAttr = attributes.find(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'className'
+function ensureAPIRouteExists(extractedResources: any, usage: DataSourceUsage): void {
+  // Generate file name for the API route
+  const fileName = generateSafeFileName(
+    usage.resourceDefinition.dataSourceType,
+    usage.resourceDefinition.tableName,
+    usage.resourceDefinition.dataSourceId
   )
-  if (classNameAttr && classNameAttr.value && classNameAttr.value.type === 'StringLiteral') {
-    return classNameAttr.value.value
-  }
-  return null
-}
 
-function removeAttribute(attrs: any[], attributeName: string): void {
-  const index = attrs.findIndex(
-    (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === attributeName
-  )
-  if (index !== -1) {
-    attrs.splice(index, 1)
-  }
-}
+  // Check if the utils data source file exists - if so, create API routes that re-export from it
+  if (extractedResources[`utils/${fileName}`]) {
+    // Create main data API route if not exists
+    if (!extractedResources[`api/${fileName}`]) {
+      const apiRouteCode = `import dataSourceModule from '../../utils/data-sources/${fileName}'
+
+export default dataSourceModule.handler
+`
+      extractedResources[`api/${fileName}`] = {
+        fileName,
+        fileType: FileType.JS,
+        path: ['pages', 'api'],
+        content: apiRouteCode,
+      }
+    }
 
-function modifyGetStaticPropsForPagination(
-  chunks: any[],
-  paginationInfos: ArrayMapperPaginationInfo[]
-): void {
-  const getStaticPropsChunk = chunks.find((chunk) => chunk.name === 'getStaticProps')
-  if (!getStaticPropsChunk || getStaticPropsChunk.type !== 'ast') {
-    return
+    // Create count API route if not exists (needed for paginated+search cases)
+    const countFileName = `${fileName}-count`
+    if (!extractedResources[`api/${countFileName}`]) {
+      const countApiRouteCode = `import dataSourceModule from '../../utils/data-sources/${fileName}'
+
+export default dataSourceModule.getCount
+`
+      extractedResources[`api/${countFileName}`] = {
+        fileName: countFileName,
+        fileType: FileType.JS,
+        path: ['pages', 'api'],
+        content: countApiRouteCode,
+      }
+    }
   }
+}
 
-  const exportDeclaration = getStaticPropsChunk.content as types.ExportNamedDeclaration
-  if (!exportDeclaration || exportDeclaration.type !== 'ExportNamedDeclaration') {
+function updateGetStaticProps(chunks: any[], registry: StateRegistry): void {
+  const getStaticPropsChunk = chunks.find((c) => c.name === 'getStaticProps')
+  if (!getStaticPropsChunk || getStaticPropsChunk.type !== ChunkType.AST) {
     return
   }
 
-  const functionDeclaration = exportDeclaration.declaration as types.FunctionDeclaration
-  if (!functionDeclaration || functionDeclaration.type !== 'FunctionDeclaration') {
+  const content = getStaticPropsChunk.content as types.ExportNamedDeclaration
+  if (!content.declaration || content.declaration.type !== 'FunctionDeclaration') {
     return
   }
 
-  // Find Promise.all and add NEW fetchData calls for each paginated DataProvider
-  const functionBody = functionDeclaration.body.body
-  const tryBlock = functionBody.find((stmt: any) => stmt.type === 'TryStatement') as
+  const funcBody = content.declaration.body
+  const tryStmt = funcBody.body.find((s: any) => s.type === 'TryStatement') as
     | types.TryStatement
     | undefined
-
-  if (!tryBlock) {
+  if (!tryStmt) {
     return
   }
 
-  const tryBody = tryBlock.block.body
+  const tryBlock = tryStmt.block
 
-  // Find the Promise.all statement
-  const promiseAllStmt = tryBody.find(
-    (stmt: any) =>
-      stmt.type === 'VariableDeclaration' &&
-      stmt.declarations?.[0]?.init?.type === 'AwaitExpression' &&
-      stmt.declarations?.[0]?.init?.argument?.type === 'CallExpression' &&
-      stmt.declarations?.[0]?.init?.argument?.callee?.type === 'MemberExpression' &&
-      stmt.declarations?.[0]?.init?.argument?.callee?.property?.name === 'all'
+  // Find existing Promise.all
+  const promiseAllDecl = tryBlock.body.find(
+    (s: any) =>
+      s.type === 'VariableDeclaration' &&
+      s.declarations?.[0]?.init?.type === 'AwaitExpression' &&
+      s.declarations?.[0]?.init?.argument?.type === 'CallExpression' &&
+      s.declarations?.[0]?.init?.argument?.callee?.type === 'MemberExpression' &&
+      s.declarations?.[0]?.init?.argument?.callee?.object?.name === 'Promise'
   ) as types.VariableDeclaration | undefined
 
-  if (!promiseAllStmt) {
+  if (!promiseAllDecl) {
     return
   }
 
-  const awaitExpr = promiseAllStmt.declarations[0].init as types.AwaitExpression
+  const declarator = promiseAllDecl.declarations[0] as types.VariableDeclarator
+  const awaitExpr = declarator.init as types.AwaitExpression
   const promiseAllCall = awaitExpr.argument as types.CallExpression
-  const promiseArray = promiseAllCall.arguments[0] as types.ArrayExpression
-  const destructuringPattern = promiseAllStmt.declarations[0].id as types.ArrayPattern
-
-  // Map import names to data source identifiers from existing fetchData calls
-  // Also track which indices to remove (non-paginated calls that will be replaced)
-  const importToDataSource = new Map<string, string>()
-  const indicesToRemove: number[] = []
-
-  promiseArray.elements.forEach((element: any, index: number) => {
-    if (element && element.type === 'CallExpression') {
-      let fetchCallExpr = element
-
-      // If wrapped in .catch(), unwrap it
-      if (
-        element.callee?.type === 'MemberExpression' &&
-        element.callee?.property?.name === 'catch' &&
-        element.callee?.object?.type === 'CallExpression'
-      ) {
-        fetchCallExpr = element.callee.object
-      }
-
-      // Now find the .fetchData() call
-      if (
-        fetchCallExpr.callee?.type === 'MemberExpression' &&
-        fetchCallExpr.callee?.property?.name === 'fetchData' &&
-        fetchCallExpr.callee?.object?.type === 'Identifier'
-      ) {
-        const importName = fetchCallExpr.callee.object.name
-        const dataSourceVar = (destructuringPattern.elements[index] as types.Identifier).name
-
-        // Check if this fetchData call has page/perPage params
-        const params = fetchCallExpr.arguments[0]
-        const hasPageParam =
-          params &&
-          params.type === 'ObjectExpression' &&
-          params.properties.some(
-            (prop: any) =>
-              prop.type === 'ObjectProperty' &&
-              (prop.key.name === 'page' || prop.key.name === 'perPage')
-          )
+  const fetchesArray = promiseAllCall.arguments[0] as types.ArrayExpression
 
-        // If this is a data source that will be paginated but this call has NO pagination params,
-        // mark it for removal
-        if (
-          !hasPageParam &&
-          paginationInfos.some((info) => info.dataSourceIdentifier === dataSourceVar)
-        ) {
-          indicesToRemove.push(index)
-        }
+  // Find return statement
+  const returnStmt = tryBlock.body.find((s: any) => s.type === 'ReturnStatement') as
+    | types.ReturnStatement
+    | undefined
+  if (!returnStmt || returnStmt.argument?.type !== 'ObjectExpression') {
+    return
+  }
 
-        importToDataSource.set(importName, dataSourceVar)
-      }
-    }
-  })
+  const returnObj = returnStmt.argument as types.ObjectExpression
+  const propsProperty = returnObj.properties.find(
+    (p: any) => p.type === 'ObjectProperty' && p.key.type === 'Identifier' && p.key.name === 'props'
+  ) as types.ObjectProperty | undefined
 
-  // Remove non-paginated fetchData calls in reverse order to preserve indices
-  indicesToRemove.reverse().forEach((index) => {
-    // Get the prop name BEFORE removing it
-    const propToRemove = (destructuringPattern.elements[index] as types.Identifier)?.name
+  if (!propsProperty || propsProperty.value.type !== 'ObjectExpression') {
+    return
+  }
 
-    promiseArray.elements.splice(index, 1)
-    destructuringPattern.elements.splice(index, 1)
+  const propsObj = propsProperty.value as types.ObjectExpression
+  const arrayPattern = declarator.id as types.ArrayPattern
 
-    // Also remove from props in return statement
-    if (propToRemove) {
-      const foundReturnStmt = tryBody.find((stmt: any) => stmt.type === 'ReturnStatement') as
-        | types.ReturnStatement
-        | undefined
+  // Track unique data sources for count fetching
+  const dataSourcesNeedingCount = new Set<string>()
 
-      if (foundReturnStmt && foundReturnStmt.argument?.type === 'ObjectExpression') {
-        const propsProperty = (foundReturnStmt.argument as types.ObjectExpression).properties.find(
-          (prop: any) =>
-            prop.type === 'ObjectProperty' && (prop.key as types.Identifier).name === 'props'
-        ) as types.ObjectProperty | undefined
+  registry.usages.forEach((usage) => {
+    const vars = getStateVarsForUsage(usage)
+    const fileName = generateSafeFileName(
+      usage.resourceDefinition.dataSourceType,
+      usage.resourceDefinition.tableName,
+      usage.resourceDefinition.dataSourceId
+    )
+    // Use consistent import name generation (matches extractDataSourceIntoGetStaticProps)
+    const fetcherImportName = StringUtils.dashCaseToCamelCase(fileName)
 
-        if (propsProperty && propsProperty.value.type === 'ObjectExpression') {
-          const propsObject = propsProperty.value as types.ObjectExpression
+    // Add fetch call
+    const fetchParams: types.ObjectProperty[] = []
 
-          const propIndex = propsObject.properties.findIndex(
-            (prop: any) =>
-              prop.type === 'ObjectProperty' && (prop.key as types.Identifier).name === propToRemove
-          )
-          if (propIndex !== -1) {
-            propsObject.properties.splice(propIndex, 1)
-          }
-        }
-      }
+    if (usage.paginated) {
+      // For paginated array mappers, add page and perPage
+      fetchParams.push(types.objectProperty(types.identifier('page'), types.numericLiteral(1)))
+      fetchParams.push(
+        types.objectProperty(types.identifier('perPage'), types.numericLiteral(usage.perPage))
+      )
+    } else if (usage.perPage > 0) {
+      // For non-paginated array mappers with a limit, add the limit as perPage
+      // This ensures the initial data fetch respects the limit from the UIDL
+      fetchParams.push(
+        types.objectProperty(types.identifier('perPage'), types.numericLiteral(usage.perPage))
+      )
     }
-  })
-
-  // Add NEW fetchData calls for each paginated DataProvider
-  paginationInfos.forEach((info, index) => {
-    // Try exact match first, then case-insensitive match
-    let importName = Array.from(importToDataSource.entries()).find(
-      ([_, dataSourceVar]) => dataSourceVar === info.dataSourceIdentifier
-    )?.[0]
-
-    if (!importName) {
-      // Try case-insensitive match
-      const normalizedIdentifier = info.dataSourceIdentifier.toLowerCase().replace(/[_-]/g, '')
-      importName = Array.from(importToDataSource.entries()).find(
-        ([_, dataSourceVar]) =>
-          dataSourceVar.toLowerCase().replace(/[_-]/g, '') === normalizedIdentifier
-      )?.[0]
-    }
-
-    if (importName) {
-      const paginatedVarName = `${info.dataSourceIdentifier}_pg_${index}`
-
-      const fetchParams = [
-        types.objectProperty(types.identifier('page'), types.numericLiteral(1)),
-        types.objectProperty(types.identifier('perPage'), types.numericLiteral(info.perPage)),
-      ]
-
-      // Add queryColumns if they exist
-      if (info.queryColumns && info.queryColumns.length > 0) {
-        fetchParams.push(
-          types.objectProperty(
-            types.identifier('queryColumns'),
-            types.arrayExpression(info.queryColumns.map((col) => types.stringLiteral(col)))
+    if (usage.queryColumns.length > 0) {
+      fetchParams.push(
+        types.objectProperty(
+          types.identifier('queryColumns'),
+          types.callExpression(
+            types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+            [types.arrayExpression(usage.queryColumns.map((c) => types.stringLiteral(c)))]
           )
         )
-      }
-
-      // Create new fetchData call with pagination params
-      const newFetchDataCall = types.callExpression(
-        types.memberExpression(
-          types.callExpression(
-            types.memberExpression(types.identifier(importName), types.identifier('fetchData')),
-            [types.objectExpression(fetchParams)]
-          ),
-          types.identifier('catch')
-        ),
-        [
-          types.arrowFunctionExpression(
-            [types.identifier('error')],
-            types.blockStatement([
-              types.expressionStatement(
-                types.callExpression(
-                  types.memberExpression(types.identifier('console'), types.identifier('error')),
-                  [
-                    types.stringLiteral(`Error fetching ${paginatedVarName}:`),
-                    types.identifier('error'),
-                  ]
-                )
-              ),
-              types.returnStatement(types.arrayExpression([])),
-            ])
-          ),
-        ]
       )
-
-      promiseArray.elements.push(newFetchDataCall)
-      destructuringPattern.elements.push(types.identifier(paginatedVarName))
     }
-  })
 
-  // Add fetchCount calls for paginated data sources (deduplicated by data source)
+    // Check if this fetch already exists
+    const existingFetchIndex = arrayPattern.elements.findIndex(
+      (el: any) => el?.type === 'Identifier' && el.name === vars.propsPrefix
+    )
 
-  // Deduplicate by data source identifier
-  const uniqueDataSources = new Set(paginationInfos.map((info) => info.dataSourceIdentifier))
-  const addedCountFetches = new Set<string>()
+    if (existingFetchIndex === -1) {
+      arrayPattern.elements.push(types.identifier(vars.propsPrefix))
 
-  uniqueDataSources.forEach((dataSourceId) => {
-    let importName = Array.from(importToDataSource.entries()).find(
-      ([_, dataSourceVar]) => dataSourceVar === dataSourceId
-    )?.[0]
+      fetchesArray.elements.push(
+        types.callExpression(
+          types.memberExpression(
+            types.callExpression(
+              types.memberExpression(
+                types.identifier(fetcherImportName),
+                types.identifier('fetchData')
+              ),
+              [types.objectExpression(fetchParams)]
+            ),
+            types.identifier('catch')
+          ),
+          [
+            types.arrowFunctionExpression(
+              [types.identifier('error')],
+              types.blockStatement([
+                types.expressionStatement(
+                  types.callExpression(
+                    types.memberExpression(types.identifier('console'), types.identifier('error')),
+                    [
+                      types.stringLiteral(`Error fetching ${vars.propsPrefix}:`),
+                      types.identifier('error'),
+                    ]
+                  )
+                ),
+                types.returnStatement(types.arrayExpression([])),
+              ])
+            ),
+          ]
+        )
+      )
 
-    if (!importName) {
-      // Try case-insensitive match
-      const normalizedIdentifier = dataSourceId.toLowerCase().replace(/[_-]/g, '')
-      importName = Array.from(importToDataSource.entries()).find(
-        ([_, dataSourceVar]) =>
-          dataSourceVar.toLowerCase().replace(/[_-]/g, '') === normalizedIdentifier
-      )?.[0]
+      // Add to props
+      propsObj.properties.push(
+        types.objectProperty(types.identifier(vars.propsPrefix), types.identifier(vars.propsPrefix))
+      )
     }
 
-    if (importName && !addedCountFetches.has(dataSourceId)) {
-      const fetchCountCall = types.callExpression(
-        types.memberExpression(types.identifier(importName), types.identifier('fetchCount')),
-        []
+    // Track for count fetching
+    if (usage.paginated) {
+      dataSourcesNeedingCount.add(
+        `${usage.resourceDefinition.dataSourceType}:${usage.resourceDefinition.tableName}:${usage.resourceDefinition.dataSourceId}`
       )
-      promiseArray.elements.push(fetchCountCall)
-      destructuringPattern.elements.push(types.identifier(`${dataSourceId}_count`))
-      addedCountFetches.add(dataSourceId)
     }
-  })
-
-  // Calculate and add maxPages before return
-  const returnStmt = tryBody.find((stmt: any) => stmt.type === 'ReturnStatement') as
-    | types.ReturnStatement
-    | undefined
 
-  if (returnStmt && returnStmt.argument?.type === 'ObjectExpression') {
-    const propsProperty = (returnStmt.argument as types.ObjectExpression).properties.find(
-      (prop: any) =>
-        prop.type === 'ObjectProperty' && (prop.key as types.Identifier).name === 'props'
-    ) as types.ObjectProperty | undefined
+    // Add maxPages calculation for paginated
+    if (usage.paginated) {
+      const maxPagesPropName = `${vars.propsPrefix}_maxPages`
+      const countVarName = `${usage.dataSourceIdentifier}_count`
 
-    if (propsProperty && propsProperty.value.type === 'ObjectExpression') {
-      const propsObject = propsProperty.value as types.ObjectExpression
-      const returnIndex = tryBody.indexOf(returnStmt)
-
-      paginationInfos.forEach((info, index) => {
-        const paginatedVarName = `${info.dataSourceIdentifier}_pg_${index}`
-        const countVarName = `${info.dataSourceIdentifier}_count`
-        const maxPagesVarName = `${info.dataSourceIdentifier}_pg_${index}_maxPages`
+      // Check if maxPages calculation already exists
+      const existingMaxPages = tryBlock.body.find(
+        (s: any) =>
+          s.type === 'VariableDeclaration' && s.declarations?.[0]?.id?.name === maxPagesPropName
+      )
 
-        const maxPagesCalc = types.variableDeclaration('const', [
-          types.variableDeclarator(
-            types.identifier(maxPagesVarName),
-            types.callExpression(
-              types.memberExpression(types.identifier('Math'), types.identifier('ceil')),
-              [
-                types.binaryExpression(
-                  '/',
-                  types.logicalExpression(
-                    '||',
-                    types.identifier(countVarName),
-                    types.numericLiteral(0)
+      if (!existingMaxPages) {
+        // Insert maxPages calculation before return
+        const returnIndex = tryBlock.body.indexOf(returnStmt)
+        tryBlock.body.splice(
+          returnIndex,
+          0,
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier(maxPagesPropName),
+              types.callExpression(
+                types.memberExpression(types.identifier('Math'), types.identifier('ceil')),
+                [
+                  types.binaryExpression(
+                    '/',
+                    types.logicalExpression(
+                      '||',
+                      types.identifier(countVarName),
+                      types.numericLiteral(0)
+                    ),
+                    types.numericLiteral(usage.perPage)
                   ),
-                  types.numericLiteral(info.perPage)
-                ),
-              ]
-            )
-          ),
-        ])
-
-        tryBody.splice(returnIndex, 0, maxPagesCalc)
+                ]
+              )
+            ),
+          ])
+        )
 
-        // Add both the paginated data and maxPages to props
-        propsObject.properties.push(
+        // Add maxPages to props
+        propsObj.properties.push(
           types.objectProperty(
-            types.identifier(paginatedVarName),
-            types.identifier(paginatedVarName)
+            types.identifier(maxPagesPropName),
+            types.identifier(maxPagesPropName)
           )
         )
-        propsObject.properties.push(
-          types.objectProperty(types.identifier(maxPagesVarName), types.identifier(maxPagesVarName))
-        )
-      })
-    }
-  }
-}
-
-function createAPIRoutesForPaginatedDataSources(
-  uidlNode: any,
-  dataSources: any,
-  componentChunk: any,
-  extractedResources: any,
-  paginationInfos: ArrayMapperPaginationInfo[],
-  isComponent: boolean
-): void {
-  const paginatedDataSourceIds = new Set(paginationInfos.map((info) => info.dataSourceIdentifier))
-
-  const searchEnabledDataSources = new Set(
-    paginationInfos.filter((info) => info.searchEnabled).map((info) => info.dataSourceIdentifier)
-  )
-
-  const createdCountRoutes = new Set<string>()
-
-  const traverseForDataSources = (node: any): void => {
-    if (!node) {
-      return
-    }
-
-    if (node.type === 'data-source-list' || node.type === 'data-source-item') {
-      const renderProp = node.content.renderPropIdentifier
-
-      if (renderProp && paginatedDataSourceIds.has(renderProp)) {
-        extractDataSourceIntoNextAPIFolder(node, dataSources, componentChunk, extractedResources)
-
-        const hasSearch = searchEnabledDataSources.has(renderProp)
-        const needsCountRoute = isComponent || hasSearch
-
-        if (needsCountRoute) {
-          const resourceDef = node.content.resourceDefinition
-          if (resourceDef) {
-            const dataSourceId = resourceDef.dataSourceId
-            const tableName = resourceDef.tableName
-            const dataSourceType = resourceDef.dataSourceType
-            const fileName = `${dataSourceType}-${tableName}-${dataSourceId.substring(0, 8)}`
-            const countFileName = `${fileName}-count`
-
-            if (!createdCountRoutes.has(countFileName)) {
-              extractedResources[`api/${countFileName}`] = {
-                fileName: countFileName,
-                fileType: FileType.JS,
-                path: ['pages', 'api'],
-                content: `import dataSource from '../../utils/data-sources/${fileName}'
-
-export default dataSource.getCount
-`,
-              }
-              createdCountRoutes.add(countFileName)
-            }
-          }
-        }
       }
     }
+  })
 
-    if (node.content?.children) {
-      node.content.children.forEach((child: any) => traverseForDataSources(child))
-    }
-  }
-
-  traverseForDataSources(uidlNode)
-}
-
-function createAPIRoutesForSearchOnlyDataSources(
-  uidlNode: any,
-  dataSources: any,
-  componentChunk: any,
-  extractedResources: any,
-  searchOnlyDataSources: DetectedPagination[]
-): void {
-  const searchOnlyDataSourceIds = new Set(
-    searchOnlyDataSources.map((info) => info.dataSourceIdentifier)
-  )
-
-  const traverseForDataSources = (node: any): void => {
-    if (!node) {
+  // Add count fetches for unique data sources
+  dataSourcesNeedingCount.forEach((key) => {
+    const [dataSourceType, tableName, dataSourceId] = key.split(':')
+    const fileName = generateSafeFileName(dataSourceType, tableName, dataSourceId)
+    // Use consistent import name generation (matches extractDataSourceIntoGetStaticProps)
+    const fetcherImportName = StringUtils.dashCaseToCamelCase(fileName)
+
+    // Find usage to get dataSourceIdentifier
+    const usage = registry.usages.find(
+      (u) =>
+        u.resourceDefinition.dataSourceId === dataSourceId &&
+        u.resourceDefinition.tableName === tableName
+    )
+    if (!usage) {
       return
     }
 
-    if (node.type === 'data-source-list' || node.type === 'data-source-item') {
-      const renderProp = node.content.renderPropIdentifier
+    const countVarName = `${usage.dataSourceIdentifier}_count`
 
-      if (renderProp && searchOnlyDataSourceIds.has(renderProp)) {
-        extractDataSourceIntoNextAPIFolder(node, dataSources, componentChunk, extractedResources)
-      }
-    }
+    // Check if count fetch already exists
+    const existingCount = arrayPattern.elements.findIndex(
+      (el: any) => el?.type === 'Identifier' && el.name === countVarName
+    )
 
-    if (node.content?.children) {
-      node.content.children.forEach((child: any) => traverseForDataSources(child))
+    if (existingCount === -1) {
+      arrayPattern.elements.push(types.identifier(countVarName))
+      fetchesArray.elements.push(
+        types.callExpression(
+          types.memberExpression(
+            types.identifier(fetcherImportName),
+            types.identifier('fetchCount')
+          ),
+          []
+        )
+      )
     }
-  }
-
-  traverseForDataSources(uidlNode)
+  })
 }
-
-export default createNextArrayMapperPaginationPlugin()