@codeyam/codeyam-cli 0.1.0-staging.e38f7bd → 0.1.0-staging.fef152f

package/packages/ai/src/lib/dataStructure/equivalencyManagers/frameworks/MuiManager.js

@@ -0,0 +1,661 @@
+/**
+ * Framework manager for MUI (Material UI) components.
+ *
+ * Handles patterns where MUI component callbacks receive data from array props:
+ *
+ * 1. DataGrid: `rows` array → `columns[].renderCell` callback receives `params.row`
+ * 2. Autocomplete: `options` array → `renderOption`/`getOptionLabel` callbacks receive option
+ *
+ * Example DataGrid:
+ * ```tsx
+ * <DataGrid
+ *   rows={data}
+ *   columns={[{ renderCell: (params) => <Cell value={params.row.id} /> }]}
+ * />
+ * ```
+ *
+ * Example Autocomplete:
+ * ```tsx
+ * <Autocomplete
+ *   options={users}
+ *   getOptionLabel={(option) => option.name}
+ *   renderOption={(props, option) => <li {...props}>{option.email}</li>}
+ * />
+ * ```
+ */
+export class MuiManager {
+    constructor() {
+        // NOTE: We intentionally do NOT include DataGrid/Autocomplete in internalFunctions.
+        // While they're MUI components (not external data sources), we need them to remain
+        // in externalFunctionCalls so that data flow tracing works correctly.
+        // For example: DataGrid().signature[0].rows → data.items[] tracing
+        this.internalFunctions = new Set([]);
+    }
+    postProcess(scopeNode, scopeDataStructure) {
+        // Check this scope for DataGrid patterns when it's post-processed
+        this.processDataGridCallbacks(scopeNode, scopeDataStructure);
+        // Check for Autocomplete patterns
+        this.processAutocompleteCallbacks(scopeNode, scopeDataStructure);
+        // Also check if this scope is inside a DataGrid callback and propagate row property accesses
+        this.propagateFromChildScope(scopeNode, scopeDataStructure);
+        // NOTE: processGridApiContext, processCreateTheme, and processGridSelector
+        // are now called from finalize() instead of here.
+        // This is because external function calls are only added AFTER postProcess()
+        // runs (in trackFunctionCalls), so getExternalFunctionCallInfo() would return
+        // undefined during postProcess(). See Issue 23.
+    }
+    /**
+     * Handle useGridApiContext() calls by adding the expected apiRef structure to the schema.
+     *
+     * useGridApiContext() returns an apiRef that has internal state used by useGridSelector.
+     * When useGridSelector(apiRef, selector) is called, it accesses apiRef.current.state
+     * to extract data like filterModel, sortModel, etc.
+     *
+     * We add the state structure directly to the external function call's schema
+     * to ensure mocks include the necessary paths.
+     */
+    processGridApiContext(_scopeNode, scopeDataStructure) {
+        // Find the external function call for useGridApiContext
+        const gridApiContextCall = scopeDataStructure.getExternalFunctionCallInfo('useGridApiContext');
+        if (!gridApiContextCall) {
+            return;
+        }
+        // Add the state structure that useGridSelector needs to the external function call's schema
+        // useGridSelector reads from apiRef.current.state internally
+        // gridFilterModelSelector reads state.filter.filterModel
+        const basePath = 'useGridApiContext().functionCallReturnValue.current';
+        const statePaths = {
+            [`${basePath}.state`]: 'object',
+            [`${basePath}.state.filter`]: 'object',
+            [`${basePath}.state.filter.filterModel`]: 'object',
+            [`${basePath}.state.filter.filterModel.items`]: 'array',
+            // Also add common state paths that might be needed by other selectors
+            [`${basePath}.state.sorting`]: 'object',
+            [`${basePath}.state.sorting.sortModel`]: 'array',
+            [`${basePath}.state.pagination`]: 'object',
+            [`${basePath}.state.pagination.paginationModel`]: 'object',
+            [`${basePath}.state.pagination.paginationModel.page`]: 'number',
+            [`${basePath}.state.pagination.paginationModel.pageSize`]: 'number',
+            [`${basePath}.state.rows`]: 'object',
+            [`${basePath}.state.rows.dataRowIds`]: 'array',
+            [`${basePath}.state.columns`]: 'object',
+            [`${basePath}.state.columns.all`]: 'array',
+        };
+        // Add each path to the external function call's schema if it doesn't exist
+        for (const [path, type] of Object.entries(statePaths)) {
+            if (!gridApiContextCall.schema[path]) {
+                gridApiContextCall.schema[path] = type;
+            }
+        }
+    }
+    /**
+     * Handle createTheme() calls by adding required MUI theme properties to the schema.
+     *
+     * MUI's ThemeProvider and related components check for specific properties:
+     * - `'$$material' in theme` - validates it's a MUI theme object
+     * - `'colorSchemes' in theme` - checks for color scheme support (MUI v6+)
+     *
+     * Without these properties, ThemeProvider throws:
+     * "TypeError: Cannot use 'in' operator to search for '$$material' in object"
+     * "TypeError: Cannot use 'in' operator to search for 'colorSchemes' in true"
+     *
+     * We add these properties to the createTheme return value schema
+     * to ensure mocks include the necessary properties.
+     */
+    processCreateTheme(_scopeNode, scopeDataStructure) {
+        // Find the external function call for createTheme
+        const createThemeCall = scopeDataStructure.getExternalFunctionCallInfo('createTheme');
+        if (!createThemeCall) {
+            return;
+        }
+        // Use the actual call signature to construct the path
+        // createTheme can be called with various arguments:
+        // - createTheme()
+        // - createTheme(options)
+        // - createTheme(getTheme(false), { components: {} })
+        const callSignature = createThemeCall.callSignature;
+        const basePath = `${callSignature}.functionCallReturnValue`;
+        // Add required MUI theme properties
+        const themeProperties = {
+            [`${basePath}.$$material`]: 'boolean',
+            [`${basePath}.colorSchemes`]: 'object',
+        };
+        for (const [path, type] of Object.entries(themeProperties)) {
+            if (!createThemeCall.schema[path]) {
+                createThemeCall.schema[path] = type;
+            }
+        }
+    }
+    /**
+     * Handle useGridSelector(apiRef, selector) calls by adding return value schema.
+     *
+     * useGridSelector is a MUI X Data Grid hook that extracts data from the grid's
+     * internal state using a selector function. It's unique because:
+     * 1. It takes arguments (apiRef and selector), so it's not automatically mocked
+     * 2. But its return value depends on which selector is used
+     * 3. The selector reads from apiRef.current.state
+     *
+     * Common selectors and their return types:
+     * - gridFilterModelSelector -> { items: GridFilterItem[] }
+     * - gridSortModelSelector -> GridSortItem[]
+     * - gridPaginationModelSelector -> { page: number, pageSize: number }
+     * - gridRowCountSelector -> number
+     *
+     * We detect which selector is used from the call signature and add the
+     * appropriate return value schema.
+     */
+    processGridSelector(_scopeNode, scopeDataStructure) {
+        // Find external function calls for useGridSelector
+        const gridSelectorCall = scopeDataStructure.getExternalFunctionCallInfo('useGridSelector');
+        if (!gridSelectorCall) {
+            return;
+        }
+        const callSignature = gridSelectorCall.callSignature;
+        const basePath = `${callSignature}.functionCallReturnValue`;
+        // Determine which selector is being used and add appropriate schema
+        if (callSignature.includes('gridFilterModelSelector')) {
+            // gridFilterModelSelector returns { items: GridFilterItem[] }
+            const filterPaths = {
+                [basePath]: 'object',
+                [`${basePath}.items`]: 'array',
+                [`${basePath}.items[]`]: 'object',
+                [`${basePath}.items[].field`]: 'string',
+                [`${basePath}.items[].operator`]: 'string',
+                [`${basePath}.items[].value`]: 'array',
+                [`${basePath}.items[].value[]`]: 'string',
+            };
+            for (const [path, type] of Object.entries(filterPaths)) {
+                if (!gridSelectorCall.schema[path]) {
+                    gridSelectorCall.schema[path] = type;
+                }
+            }
+        }
+        else if (callSignature.includes('gridSortModelSelector')) {
+            // gridSortModelSelector returns GridSortItem[]
+            const sortPaths = {
+                [basePath]: 'array',
+                [`${basePath}[]`]: 'object',
+                [`${basePath}[].field`]: 'string',
+                [`${basePath}[].sort`]: 'string',
+            };
+            for (const [path, type] of Object.entries(sortPaths)) {
+                if (!gridSelectorCall.schema[path]) {
+                    gridSelectorCall.schema[path] = type;
+                }
+            }
+        }
+        else if (callSignature.includes('gridPaginationModelSelector')) {
+            // gridPaginationModelSelector returns { page: number, pageSize: number }
+            const paginationPaths = {
+                [basePath]: 'object',
+                [`${basePath}.page`]: 'number',
+                [`${basePath}.pageSize`]: 'number',
+            };
+            for (const [path, type] of Object.entries(paginationPaths)) {
+                if (!gridSelectorCall.schema[path]) {
+                    gridSelectorCall.schema[path] = type;
+                }
+            }
+        }
+        else if (callSignature.includes('gridRowCountSelector')) {
+            // gridRowCountSelector returns number
+            if (!gridSelectorCall.schema[basePath]) {
+                gridSelectorCall.schema[basePath] = 'number';
+            }
+        }
+        else {
+            // Unknown selector - add generic object return type
+            // This ensures the hook is at least mocked with some structure
+            if (!gridSelectorCall.schema[basePath]) {
+                gridSelectorCall.schema[basePath] = 'object';
+            }
+        }
+    }
+    processDataGridCallbacks(scopeNode, scopeDataStructure) {
+        // Find DataGrid calls and link renderCell callbacks to rows
+        for (const [path, equivalencies] of Object.entries(scopeNode.equivalencies)) {
+            // Case 1: Look for DataGrid().signature[0].columns equivalency pointing to a columns variable
+            const dataGridMatch = path.match(/^(DataGrid(?:Pro|Premium)?\(\))\.signature\[0\]\.columns$/);
+            if (dataGridMatch) {
+                const dataGridCall = dataGridMatch[1];
+                // Find what columns is equivalent to (e.g., "columns" variable)
+                for (const equiv of equivalencies) {
+                    const columnsVar = equiv.schemaPath;
+                    // Find renderCell callbacks, following equivalency chains if needed
+                    const callbackScopes = this.findRenderCellCallbacks(columnsVar, scopeNode, new Set(), scopeDataStructure);
+                    for (const callbackScopeName of callbackScopes) {
+                        this.addRowEquivalencyToCallback(callbackScopeName, dataGridCall, scopeNode, scopeDataStructure);
+                    }
+                }
+                continue;
+            }
+            // Case 2: Look for inline array props where DataGrid().signature[0].columns[N].renderCell
+            // directly points to a callback scope (e.g., DataGrid().signature[0].columns[0].renderCell → cyScope1())
+            // Also handles columns[].renderCell for normalized paths
+            const inlineRenderCellMatch = path.match(/^(DataGrid(?:Pro|Premium)?\(\))\.signature\[0\]\.columns\[(?:\d+|)\]\.renderCell$/);
+            if (inlineRenderCellMatch) {
+                const dataGridCall = inlineRenderCellMatch[1];
+                for (const equiv of equivalencies) {
+                    // Check if the equivalency points to a callback scope (cyScope*)
+                    // Could be cyScope1() or cyScope1().functionCallReturnValue
+                    const callbackMatch = equiv.schemaPath.match(/^(cyScope[0-9A-Fa-f]+)\(\)(?:\.functionCallReturnValue)?$/);
+                    if (callbackMatch) {
+                        // Try both naming conventions:
+                        // 1. Just the cyScope name (e.g., "cyScope1")
+                        // 2. Parent____cyScope name (e.g., "CustomersPage____cyScope1")
+                        const callbackScopeName = callbackMatch[1];
+                        const prefixedCallbackScopeName = `${scopeNode.name}____${callbackMatch[1]}`;
+                        // Try unprefixed name first, then prefixed
+                        this.addRowEquivalencyToCallback(callbackScopeName, dataGridCall, scopeNode, scopeDataStructure);
+                        // Also try prefixed version in case it exists
+                        this.addRowEquivalencyToCallback(prefixedCallbackScopeName, dataGridCall, scopeNode, scopeDataStructure);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Helper to add the signature[0].row → DataGrid().signature[0].rows[] equivalency
+     */
+    addRowEquivalencyToCallback(callbackScopeName, dataGridCall, scopeNode, scopeDataStructure) {
+        const callbackScopeNode = scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
+        if (!callbackScopeNode) {
+            return;
+        }
+        // Add equivalency: signature[0].row ≡ DataGrid().signature[0].rows[]
+        const callbackParamRowPath = 'signature[0].row';
+        const rowsArrayElementPath = `${dataGridCall}.signature[0].rows[]`;
+        scopeDataStructure.addEquivalency(callbackParamRowPath, rowsArrayElementPath, scopeNode.name, callbackScopeNode, 'MUI DataGrid renderCell params.row equivalency');
+    }
+    /**
+     * Process Autocomplete callbacks to link option parameters to options array.
+     *
+     * Autocomplete has two callback props that receive individual options:
+     * - getOptionLabel(option) - param 0 is the option
+     * - renderOption(props, option, state) - param 1 is the option
+     */
+    processAutocompleteCallbacks(scopeNode, scopeDataStructure) {
+        for (const [path, equivalencies] of Object.entries(scopeNode.equivalencies)) {
+            // Look for Autocomplete().signature[0].options equivalency
+            const autocompleteMatch = path.match(/^(Autocomplete\(\))\.signature\[0\]\.options$/);
+            if (!autocompleteMatch)
+                continue;
+            const autocompleteCall = autocompleteMatch[1];
+            // Find callback props: getOptionLabel, renderOption
+            for (const callbackProp of ['getOptionLabel', 'renderOption']) {
+                const callbackPath = `${autocompleteCall}.signature[0].${callbackProp}`;
+                const callbackEquivs = scopeNode.equivalencies[callbackPath];
+                if (callbackEquivs) {
+                    for (const callbackEquiv of callbackEquivs) {
+                        const callbackMatch = callbackEquiv.schemaPath.match(/^(cyScope[0-9A-Fa-f]+)\(\)\.functionCallReturnValue$/);
+                        if (!callbackMatch)
+                            continue;
+                        const callbackScopeName = callbackMatch[1];
+                        const callbackScopeNode = scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
+                        if (!callbackScopeNode)
+                            continue;
+                        // Determine which parameter index receives the option
+                        // getOptionLabel: (option) => ... → param 0
+                        // renderOption: (props, option, state) => ... → param 1
+                        const paramIndex = callbackProp === 'renderOption' ? 1 : 0;
+                        const callbackParamPath = `signature[${paramIndex}]`;
+                        const optionsArrayElementPath = `${autocompleteCall}.signature[0].options[]`;
+                        scopeDataStructure.addEquivalency(callbackParamPath, optionsArrayElementPath, scopeNode.name, callbackScopeNode, `MUI Autocomplete ${callbackProp} option equivalency`);
+                        // Note: Property accesses are propagated in finalize() after all scopes are established
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Propagate property accesses from Autocomplete callback scope.
+     * When we find usages like `option.email`, create equivalencies to `options[].email`
+     * and trace back to the original data source (e.g., `users[].email`).
+     */
+    propagateAutocompletePropertyAccesses(callbackScope, autocompleteCall, optionParamIndex, parentScopeName, scopeDataStructure) {
+        const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(parentScopeName);
+        if (!parentScope)
+            return;
+        // Find what options is equivalent to (e.g., "users")
+        const optionsPath = `${autocompleteCall}.signature[0].options`;
+        const optionsEquivs = parentScope.equivalencies?.[optionsPath];
+        const dataSourcePath = optionsEquivs?.[0]?.schemaPath;
+        // Check for property accesses on the option parameter in the schema
+        // The schema contains entries like "signature[1].email" for property accesses
+        for (const schemaPath of Object.keys(callbackScope.schema || {})) {
+            // Match patterns like signature[0].name, signature[1].email (depending on param index)
+            const optionPropertyMatch = schemaPath.match(new RegExp(`^signature\\[${optionParamIndex}\\]\\.(\\w+)$`));
+            if (optionPropertyMatch) {
+                const propertyName = optionPropertyMatch[1];
+                // Create equivalency: schemaPath → options[].propertyName
+                const optionsPropertyPath = `${autocompleteCall}.signature[0].options[].${propertyName}`;
+                scopeDataStructure.addEquivalency(schemaPath, optionsPropertyPath, parentScopeName, callbackScope, 'MUI Autocomplete option property equivalency');
+                // Also create equivalency to the data source (e.g., users[].email)
+                if (dataSourcePath) {
+                    const dataPropertyPath = `${dataSourcePath}[].${propertyName}`;
+                    // Add to parent scope's schema
+                    if (!parentScope.schema[dataPropertyPath]) {
+                        parentScope.schema[dataPropertyPath] = 'unknown';
+                    }
+                    // Create bidirectional equivalencies to ensure propagation
+                    scopeDataStructure.addEquivalency(schemaPath, dataPropertyPath, parentScopeName, callbackScope, 'MUI Autocomplete option property equivalency');
+                    scopeDataStructure.addEquivalency(dataPropertyPath, schemaPath, parentScopeName, parentScope, 'MUI Autocomplete option property equivalency');
+                }
+            }
+        }
+    }
+    /**
+     * Find renderCell callbacks for a columns variable, following equivalency chains.
+     * For example: tableColumns → allColumns → allColumns[].renderCell → cyScope
+     *
+     * Also handles useMemo patterns where:
+     * - tableColumns → useMemo(cyScope(), [allColumns]).functionCallReturnValue
+     * - And allColumns[].renderCell → cyScope()
+     */
+    findRenderCellCallbacks(columnsVar, scopeNode, visited, scopeDataStructure) {
+        if (visited.has(columnsVar))
+            return [];
+        visited.add(columnsVar);
+        const callbackScopes = [];
+        // Try direct path: columnsVar[].renderCell - check both current scope and parent scopes
+        // Also check for indexed paths like columnsVar[3].renderCell (with specific indices)
+        const renderCellPath = `${columnsVar}[].renderCell`;
+        let renderCellEquivs = scopeNode.equivalencies[renderCellPath];
+        // If not found in current scope, check parent scopes (via scopeNode.tree)
+        if (!renderCellEquivs && scopeDataStructure && scopeNode.tree) {
+            for (const parentScopeName of scopeNode.tree) {
+                const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(parentScopeName);
+                if (parentScope?.equivalencies?.[renderCellPath]) {
+                    renderCellEquivs = parentScope.equivalencies[renderCellPath];
+                    break;
+                }
+            }
+        }
+        // Also look for indexed paths like tableColumns[3].renderCell, tableColumns[5].renderCell, etc.
+        // This is needed because column definitions often have specific indices
+        const indexedRenderCellPattern = new RegExp(`^${columnsVar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\[\\d+\\]\\.renderCell$`);
+        const allScopesToCheck = [scopeNode];
+        if (scopeDataStructure && scopeNode.tree) {
+            for (const parentScopeName of scopeNode.tree) {
+                const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(parentScopeName);
+                if (parentScope)
+                    allScopesToCheck.push(parentScope);
+            }
+        }
+        for (const scope of allScopesToCheck) {
+            for (const [path, equivs] of Object.entries(scope.equivalencies || {})) {
+                if (indexedRenderCellPattern.test(path)) {
+                    for (const equiv of equivs) {
+                        const callbackMatch = equiv.schemaPath.match(/^(cyScope\d+)\(\)\.functionCallReturnValue$/);
+                        if (callbackMatch && !callbackScopes.includes(callbackMatch[1])) {
+                            callbackScopes.push(callbackMatch[1]);
+                        }
+                    }
+                }
+            }
+        }
+        if (renderCellEquivs) {
+            for (const renderCellEquiv of renderCellEquivs) {
+                // Check if it points to a callback (cyScope().functionCallReturnValue)
+                const callbackMatch = renderCellEquiv.schemaPath.match(/^(cyScope\d+)\(\)\.functionCallReturnValue$/);
+                if (callbackMatch && !callbackScopes.includes(callbackMatch[1])) {
+                    callbackScopes.push(callbackMatch[1]);
+                }
+            }
+        }
+        // If no direct callbacks found, follow equivalency chains
+        if (callbackScopes.length === 0) {
+            // Look for what columnsVar is equivalent to - check current scope and parent scopes
+            let varEquivs = scopeNode.equivalencies[columnsVar];
+            let equivScopeNode = scopeNode;
+            // If not found or only self-reference, check parent scopes (via scopeNode.tree)
+            if ((!varEquivs ||
+                (varEquivs.length === 1 && varEquivs[0].schemaPath === columnsVar)) &&
+                scopeDataStructure &&
+                scopeNode.tree) {
+                for (const parentScopeName of scopeNode.tree) {
+                    const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(parentScopeName);
+                    if (parentScope?.equivalencies?.[columnsVar]) {
+                        const parentEquivs = parentScope.equivalencies[columnsVar];
+                        // Check if it has non-self-reference equivalencies
+                        if (parentEquivs.some((e) => e.schemaPath !== columnsVar) ||
+                            parentEquivs.some((e) => e.schemaPath.includes('useMemo'))) {
+                            varEquivs = parentEquivs;
+                            equivScopeNode = parentScope;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (varEquivs) {
+                for (const varEquiv of varEquivs) {
+                    const schemaPath = varEquiv.schemaPath;
+                    // Handle useMemo pattern: useMemo(cyScope(), [allColumns]).functionCallReturnValue
+                    // The second argument [allColumns] tells us what's being passed to useMemo
+                    const useMemoMatch = schemaPath.match(/^useMemo\(cyScope\d+\(\), \[([^\]]+)\]\)\.functionCallReturnValue$/);
+                    if (useMemoMatch) {
+                        // The array in the dependency list often contains the actual columns variable
+                        const depsList = useMemoMatch[1];
+                        // Parse the deps - could be comma-separated
+                        const deps = depsList.split(',').map((d) => d.trim());
+                        for (const dep of deps) {
+                            const nestedCallbacks = this.findRenderCellCallbacks(dep, equivScopeNode, visited, scopeDataStructure);
+                            callbackScopes.push(...nestedCallbacks);
+                        }
+                        continue;
+                    }
+                    // Skip other function calls and internal paths
+                    if (schemaPath.includes('()') || schemaPath.includes('[')) {
+                        continue;
+                    }
+                    // Skip self-references
+                    if (schemaPath === columnsVar) {
+                        continue;
+                    }
+                    // Recursively search in the equivalent variable
+                    const nestedCallbacks = this.findRenderCellCallbacks(schemaPath, equivScopeNode, visited, scopeDataStructure);
+                    callbackScopes.push(...nestedCallbacks);
+                }
+            }
+        }
+        return callbackScopes;
+    }
+    /**
+     * Propagate row property accesses from callback scope and its children.
+     * When we find usages like `params.row.id`, create equivalencies to `rows[].id`.
+     */
+    propagateRowPropertyAccesses(callbackScope, dataGridCall, parentScopeName, scopeDataStructure) {
+        // Check all scopes (callback and its children) for params.row.* accesses
+        const scopesToCheck = [callbackScope];
+        // Find child scopes by looking for scopes whose tree includes the callback scope
+        const callbackScopeName = callbackScope.name;
+        for (const [scopeName, scope] of Object.entries(scopeDataStructure.scopeNodes)) {
+            if (scope.tree &&
+                scope.tree.includes(callbackScopeName) &&
+                scopeName !== callbackScopeName) {
+                scopesToCheck.push(scope);
+            }
+        }
+        for (const scope of scopesToCheck) {
+            // Find equivalencies that reference params.row.* or signature[0].row.*
+            for (const [path, equivs] of Object.entries(scope.equivalencies)) {
+                for (const equiv of equivs) {
+                    const schemaPath = equiv.schemaPath;
+                    // Match patterns like params.row.id, params.row.flagged, signature[0].row.status
+                    const rowPropertyMatch = schemaPath.match(/^(?:params|signature\[0\])\.row\.(\w+)$/);
+                    if (rowPropertyMatch) {
+                        const propertyName = rowPropertyMatch[1];
+                        // Create equivalency: the path accessing params.row.X → rows[].X
+                        // e.g., updateStatus().signature[0].id → DataGrid().signature[0].rows[].id
+                        const rowsPropertyPath = `${dataGridCall}.signature[0].rows[].${propertyName}`;
+                        scopeDataStructure.addEquivalency(path, rowsPropertyPath, parentScopeName, scope, 'MUI DataGrid renderCell params.row equivalency');
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Process from child scope perspective: look for params.row.* accesses
+     * and trace back to find DataGrid rows equivalency in parent scopes.
+     */
+    propagateFromChildScope(scopeNode, scopeDataStructure) {
+        // Look for equivalencies in this scope that reference params.row.*
+        for (const [path, equivs] of Object.entries(scopeNode.equivalencies)) {
+            for (const equiv of equivs) {
+                const schemaPath = equiv.schemaPath;
+                // Match patterns like params.row.id, params.row.status
+                const rowPropertyMatch = schemaPath.match(/^params\.row\.(\w+)$/);
+                if (rowPropertyMatch) {
+                    const propertyName = rowPropertyMatch[1];
+                    // Look in parent scopes for DataGrid rows equivalency
+                    // The pattern we're looking for is: signature[0].row → DataGrid().signature[0].rows[]
+                    const dataGridCall = this.findDataGridInParentScopes(scopeNode, scopeDataStructure);
+                    if (dataGridCall) {
+                        // Find the parent scope that has the DataGrid
+                        const parentScopeName = this.findDataGridScopeName(scopeNode, scopeDataStructure);
+                        const parentScope = parentScopeName
+                            ? scopeDataStructure.getScopeOrFunctionCallInfo(parentScopeName)
+                            : undefined;
+                        // Find what DataGrid().signature[0].rows is equivalent to (e.g., "data.quotes")
+                        const rowsPath = `${dataGridCall}.signature[0].rows`;
+                        const rowsEquivs = parentScope?.equivalencies?.[rowsPath];
+                        const dataSourcePath = rowsEquivs?.[0]?.schemaPath;
+                        if (dataSourcePath && parentScope) {
+                            // Create equivalency: path → dataSource[].propertyName (e.g., data.quotes[].id)
+                            const dataPropertyPath = `${dataSourcePath}[].${propertyName}`;
+                            // Add equivalency in child scope
+                            scopeDataStructure.addEquivalency(path, dataPropertyPath, parentScopeName || scopeNode.name, scopeNode, 'MUI DataGrid renderCell params.row equivalency');
+                            // Also add the property access to the parent scope's schema
+                            // This ensures that data.quotes[].id shows up as an accessed property
+                            if (!parentScope.schema[dataPropertyPath]) {
+                                parentScope.schema[dataPropertyPath] = 'unknown';
+                            }
+                            // And create an equivalency FROM the data path so it propagates to returnValue
+                            scopeDataStructure.addEquivalency(dataPropertyPath, path, parentScopeName, parentScope, 'MUI DataGrid renderCell params.row equivalency');
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Find the DataGrid call in parent scopes by looking for signature[0].row → DataGrid().signature[0].rows[]
+     */
+    findDataGridInParentScopes(scopeNode, scopeDataStructure) {
+        // Check the scope tree (parent scopes)
+        if (!scopeNode.tree)
+            return undefined;
+        for (const parentScopeName of scopeNode.tree) {
+            const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(parentScopeName);
+            if (!parentScope?.equivalencies)
+                continue;
+            // Look for signature[0].row → DataGrid().signature[0].rows[]
+            const rowEquivs = parentScope.equivalencies['signature[0].row'];
+            if (rowEquivs) {
+                for (const equiv of rowEquivs) {
+                    const match = equiv.schemaPath.match(/^(DataGrid(?:Pro|Premium)?)\(\)\.signature\[0\]\.rows\[\]$/);
+                    if (match) {
+                        return `${match[1]}()`;
+                    }
+                }
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Find the scope name that contains the DataGrid call
+     */
+    findDataGridScopeName(scopeNode, scopeDataStructure) {
+        if (!scopeNode.tree)
+            return undefined;
+        for (const parentScopeName of scopeNode.tree) {
+            const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(parentScopeName);
+            if (!parentScope?.equivalencies)
+                continue;
+            // Look for DataGrid().signature[0].columns
+            for (const path of Object.keys(parentScope.equivalencies)) {
+                if (path.match(/^DataGrid(?:Pro|Premium)?\(\)\.signature\[0\]\.columns$/)) {
+                    return parentScopeName;
+                }
+            }
+        }
+        return undefined;
+    }
+    isInterestedInSubpath(subPathParts, _scopeNode, _scopeDataStructure) {
+        // We're interested in MUI component paths (DataGrid variants and Autocomplete)
+        const hasMuiComponent = subPathParts.some((part) => part.match(/^(DataGrid(Pro|Premium)?|Autocomplete)\(/));
+        return hasMuiComponent;
+    }
+    addEquivalencies(_addEquivalenciesInfo) {
+        // We handle DataGrid in finalize() instead, since we need to scan
+        // for all equivalencies after they've been established
+        return false;
+    }
+    finalize(_scopeNode, scopeDataStructure) {
+        // Process external function call schemas ONCE (not per-scope) since they
+        // are global. These were moved from postProcess() because external function
+        // calls are only available AFTER postProcess() runs (in trackFunctionCalls).
+        // See Issue 23.
+        this.processGridApiContext(_scopeNode, scopeDataStructure);
+        this.processCreateTheme(_scopeNode, scopeDataStructure);
+        this.processGridSelector(_scopeNode, scopeDataStructure);
+        // Iterate through all scopes (finalize is only called on root)
+        for (const [scopeName, scopeNode] of Object.entries(scopeDataStructure.scopeNodes)) {
+            this.finalizeScope(scopeNode, scopeDataStructure);
+        }
+    }
+    finalizeScope(scopeNode, scopeDataStructure) {
+        // Propagate row property accesses after all scopes are established
+        // Find DataGrid calls in this scope and link renderCell params.row.* to rows[].*
+        for (const [path, equivalencies] of Object.entries(scopeNode.equivalencies)) {
+            // Look for DataGrid().signature[0].columns equivalency
+            const dataGridMatch = path.match(/^(DataGrid(?:Pro|Premium)?\(\))\.signature\[0\]\.columns$/);
+            if (dataGridMatch) {
+                const dataGridCall = dataGridMatch[1];
+                // Find what columns is equivalent to
+                for (const equiv of equivalencies) {
+                    const columnsVar = equiv.schemaPath;
+                    // Find renderCell callbacks
+                    const callbackScopes = this.findRenderCellCallbacks(columnsVar, scopeNode, new Set(), scopeDataStructure);
+                    for (const callbackScopeName of callbackScopes) {
+                        const callbackScopeNode = scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
+                        if (!callbackScopeNode)
+                            continue;
+                        // Propagate sub-property accesses from params.row.*
+                        this.propagateRowPropertyAccesses(callbackScopeNode, dataGridCall, scopeNode.name, scopeDataStructure);
+                    }
+                }
+                continue;
+            }
+            // Look for Autocomplete().signature[0].options equivalency
+            const autocompleteMatch = path.match(/^(Autocomplete\(\))\.signature\[0\]\.options$/);
+            if (autocompleteMatch) {
+                const autocompleteCall = autocompleteMatch[1];
+                // Find callback props and propagate property accesses
+                for (const callbackProp of ['getOptionLabel', 'renderOption']) {
+                    const callbackPath = `${autocompleteCall}.signature[0].${callbackProp}`;
+                    const callbackEquivs = scopeNode.equivalencies[callbackPath];
+                    if (callbackEquivs) {
+                        for (const callbackEquiv of callbackEquivs) {
+                            const callbackMatch = callbackEquiv.schemaPath.match(/^(cyScope[0-9A-Fa-f]+)\(\)\.functionCallReturnValue$/);
+                            if (!callbackMatch)
+                                continue;
+                            const callbackScopeName = callbackMatch[1];
+                            const callbackScopeNode = scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
+                            if (!callbackScopeNode)
+                                continue;
+                            // Determine which parameter index receives the option
+                            const paramIndex = callbackProp === 'renderOption' ? 1 : 0;
+                            // Propagate property accesses from this callback
+                            this.propagateAutocompletePropertyAccesses(callbackScopeNode, autocompleteCall, paramIndex, scopeNode.name, scopeDataStructure);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    toString() {
+        return 'MuiManager';
+    }
+}
+//# sourceMappingURL=MuiManager.js.map