chore: map ModalFooter/ModalFocus to MMDS, retroactively complete ModalBody/ModalOverlay targets, add sync-config auto-promotion

- config.json: map ModalFooter and ModalFocus to @metamask/design-system-react; update
  mobile Skeleton replacement to @metamask/design-system-react-native; add ModalFocus
  and ModalFooter to extension currentComponents
- scripts/sync-config.js: auto-promote migration-targets entries to complete when
  the component appears in the MMDS component list, preventing future drift
- metrics/migration-targets.json: retroactively mark ModalBody and ModalOverlay as
  complete (extension 27/48 → 29/48); ModalFocus and ModalFooter remain to_do as
  they only landed in MMDS this week

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: AndyMBridges

config.json

@@ -181,15 +181,21 @@
           "paths": [
             "ui/components/component-library/modal-footer/modal-footer.tsx"
           ],
-          "replacement": null,
+          "replacement": {
+            "component": "ModalFooter",
+            "package": "@metamask/design-system-react"
+          },
           "_deprecationMessage": null,
           "_autoGenerated": true
         },
         "ModalFocus": {
           "paths": [
             "ui/components/component-library/modal-focus/modal-focus.tsx"
           ],
-          "replacement": null,
+          "replacement": {
+            "component": "ModalFocus",
+            "package": "@metamask/design-system-react"
+          },
           "_deprecationMessage": null,
           "_autoGenerated": true
         },
@@ -527,6 +533,8 @@
         "Jazzicon",
         "Maskicon",
         "ModalBody",
+        "ModalFocus",
+        "ModalFooter",
         "ModalOverlay",
         "Text",
         "TextButton"
@@ -601,9 +609,8 @@
             "app/component-library/components/Skeleton/Skeleton.tsx"
           ],
           "replacement": {
-            "component": "ComponentsTemp",
-            "package": "component-library",
-            "path": "app/component-library/components/ComponentsTemp"
+            "component": "Skeleton",
+            "package": "@metamask/design-system-react-native"
           },
           "_deprecationMessage": "*\n * @deprecated Please update your code to use `Skeleton` from `app/component-library/components-temp/Skeleton`.\n * The API may have changed — compare props before migrating.\n * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Skeleton/README.md}\n * @since @metamask/design-system-react-native@0.7.0\n ",
           "_autoGenerated": true

dashboard/public/metrics/migration-targets.json

@@ -346,7 +346,7 @@
       },
       {
         "name": "ModalBody",
-        "status": "to_do"
+        "status": "complete"
       },
       {
         "name": "ModalContent",
@@ -366,7 +366,7 @@
       },
       {
         "name": "ModalOverlay",
-        "status": "to_do"
+        "status": "complete"
       },
       {
         "name": "Popover",

metrics/migration-targets.json

@@ -346,7 +346,7 @@
       },
       {
         "name": "ModalBody",
-        "status": "to_do"
+        "status": "complete"
       },
       {
         "name": "ModalContent",
@@ -366,7 +366,7 @@
       },
       {
         "name": "ModalOverlay",
-        "status": "to_do"
+        "status": "complete"
       },
       {
         "name": "Popover",

scripts/sync-config.js

@@ -175,7 +175,42 @@ async function sync(options = {}) {
     console.log();
   }
 
-  // Step 8: Write config (unless --dry-run)
+  // Step 8: Auto-update migration-targets.json based on MMDS availability
+  const MIGRATION_TARGETS_PATH = path.join(REPO_ROOT, 'metrics', 'migration-targets.json');
+  try {
+    const targetsContent = await fs.readFile(MIGRATION_TARGETS_PATH, 'utf8');
+    const targets = JSON.parse(targetsContent);
+    const reactSet = new Set(mmdsComponents.react.map(c => c.toLowerCase()));
+    const reactNativeSet = new Set(mmdsComponents.reactNative.map(c => c.toLowerCase()));
+
+    let targetsChanged = 0;
+    for (const [project, componentSet] of [['extension', reactSet], ['mobile', reactNativeSet]]) {
+      if (!targets[project]?.components) continue;
+      for (const entry of targets[project].components) {
+        if (entry.status === 'to_do' && componentSet.has(entry.name.toLowerCase())) {
+          entry.status = 'complete';
+          targetsChanged++;
+          console.log(`  ✓ migration-targets: [${project}] ${entry.name} → complete (now in MMDS)`);
+        }
+      }
+    }
+
+    if (targetsChanged > 0) {
+      targets.generatedAt = new Date().toISOString();
+      if (!dryRun) {
+        await fs.writeFile(MIGRATION_TARGETS_PATH, JSON.stringify(targets, null, 2));
+        console.log(`\n✅ migration-targets.json updated (${targetsChanged} component(s) marked complete)\n`);
+      } else {
+        console.log(`\n🔍 DRY RUN - Would mark ${targetsChanged} component(s) complete in migration-targets.json\n`);
+      }
+    } else {
+      console.log('  ℹ️  migration-targets.json already up to date\n');
+    }
+  } catch (err) {
+    console.warn('  ⚠️  Could not update migration-targets.json:', err.message, '\n');
+  }
+
+  // Step 9: Write config (unless --dry-run)
   if (dryRun) {
     console.log('🔍 DRY RUN - No changes written to config.json\n');
   } else {