@dialpad/dialtone-css 8.81.0-next.1 → 8.81.0-next.3

package/lib/build/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs

@@ -36,7 +36,7 @@ const NEGATIVE_SPACING_MAP = {
   32: '400', 48: '600', 64: '800',
 };
 
-// Layout sizes for margin/padding (96px, 128px use layout tokens)
+// Layout sizes for sizing (96px, 128px use layout tokens)
 const SPACING_LAYOUT_MAP = {
   96: '150', 128: '200',
 };
@@ -77,8 +77,8 @@ export default {
     'Migrates pixel-based utility class names to token-stop-based names.\n' +
     '- Sizing: d-h16 → d-h-25, d-w64 → d-w-100, d-hmn96 → d-hmn-150\n' +
     '- Off-scale sizing: d-w1 → d-w-1px, d-h24 → d-h-24px (pixel-indexed exceptions)\n' +
-    '- Margin: d-m8 → d-m-100, d-mt16 → d-mt-200, d-mtn8 → d-mt-n100\n' +
-    '- Padding: d-p8 → d-p-100, d-pt16 → d-pt-200\n' +
+    '- Margin: d-m8 → d-m-100, d-mt16 → d-mt-200, d-mtn8 → d-mt-n100 (values ≥ 96px left unchanged)\n' +
+    '- Padding: d-p8 → d-p-100, d-pt16 → d-pt-200 (values ≥ 96px left unchanged — no layout-token padding class exists)\n' +
     '- Gap: d-g8 → d-g-100, d-rg16 → d-rg-200\n' +
     '- Position: d-t8 → d-t-100, d-tn8 → d-t-n100\n' +
     '- Border-radius all: d-bar6 → d-bar-350, d-bar24 → d-bar-550\n' +
@@ -134,18 +134,13 @@ export default {
     ]),
 
     // ── Margin: d-m{px} → d-m-{spacing-stop} ─────────────────────────────
-    ...['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'].flatMap(prefix => [
-      // Spacing sizes (0-64px)
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
-      },
-      // Layout sizes (96, 128px)
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
-      },
-    ]),
+    // Only spacing-scale values (0-64px) are migrated. Values ≥ 96px (e.g. d-mt96)
+    // are left unchanged: token-stop margin classes use spacing tokens only, so
+    // d-mt-150 resolves to --dt-spacing-150 (12px), not --dt-layout-150 (96px).
+    ...['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+    })),
 
     // ── Negative margin: d-m{dir}n{px} → d-m{dir}-n{spacing-stop} ────────
     ...['mt', 'mr', 'mb', 'ml', 'mx', 'my', 'm'].map(prefix => ({
@@ -154,16 +149,13 @@ export default {
     })),
 
     // ── Padding: d-p{px} → d-p-{spacing-stop} ────────────────────────────
-    ...['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].flatMap(prefix => [
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
-      },
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
-      },
-    ]),
+    // Only spacing-scale values (0-64px) are migrated. Values ≥ 96px (e.g. d-pt96)
+    // are left unchanged: token-stop padding classes use spacing tokens only, so
+    // d-pt-150 resolves to --dt-spacing-150 (12px), not --dt-layout-150 (96px).
+    ...['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+    })),
 
     // ── Gap: d-g{px} → d-g-{spacing-stop} ────────────────────────────────
     ...['g', 'rg', 'cg'].map(prefix => ({
@@ -172,17 +164,13 @@ export default {
     })),
 
     // ── Position: d-t{px} → d-t-{spacing-stop} ───────────────────────────
-    ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].flatMap(prefix => [
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
-      },
-      // Layout position sizes (96px)
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
-      },
-    ]),
+    // Only spacing-scale values (0-64px) are migrated. Values ≥ 96px (e.g. d-t96)
+    // are left unchanged: token-stop position classes use spacing tokens only, so
+    // d-t-150 resolves to --dt-spacing-150 (12px), not --dt-layout-150 (96px).
+    ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+    })),
 
     // ── Negative position: d-{dir}n{px} → d-{dir}-n{spacing-stop} ────────
     ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].map(prefix => ({

package/lib/build/js/dialtone_migration_helper/tests/space-to-spacing-test-examples.vue

@@ -149,23 +149,19 @@
 }
 
 /* ============================================ */
-/* PERCENT VARIANTS                             */
+/* SKIP CASES (should NOT be modified)          */
 /* ============================================ */
 
-/* space-400-percent → spacing-100-percent */
-.test-percent-400 {
+/* -percent variants — no --dt-spacing-*-percent tokens exist; percent tokens live under
+   --dt-layout-*-percent with a different stop axis, so these are left for manual review */
+.test-skip-percent-400 {
   padding: var(--dt-space-400-percent);
 }
 
-/* space-600-percent → spacing-400-percent */
-.test-percent-600 {
+.test-skip-percent-600 {
   gap: var(--dt-space-600-percent);
 }
 
-/* ============================================ */
-/* SKIP CASES (should NOT be modified)          */
-/* ============================================ */
-
 /* Stops with no --dt-spacing-* equivalent — leave unchanged */
 .test-skip-720 {
   padding: var(--dt-space-720); /* 72px — no spacing equivalent */

package/lib/build/js/dialtone_migration_helper/tests/utility-class-to-token-stops.test.mjs

@@ -89,6 +89,28 @@ describe('utility-class-to-token-stops config', () => {
     });
   });
 
+
+  // ─── Large spacing values (≥ 96px) pass through unchanged ────────────
+  //
+  // Token-stop margin/padding/position classes (d-mt-{stop}, d-pt-{stop}, d-t-{stop})
+  // use spacing tokens only. d-mt-150 = --dt-spacing-150 (12px), not --dt-layout-150 (96px).
+  // These classes must be left for manual review rather than silently changed.
+
+  describe('large margin/padding/position values — pass through unchanged', () => {
+    const unchanged = [
+      'd-mt96', 'd-mb96', 'd-ml96', 'd-mr96', 'd-mx96', 'd-my96', 'd-m96',
+      'd-mt128', 'd-mb128', 'd-ml128', 'd-mr128', 'd-mx128', 'd-my128', 'd-m128',
+      'd-pt96', 'd-pb96', 'd-pl96', 'd-pr96', 'd-px96', 'd-py96', 'd-p96',
+      'd-pt128', 'd-pb128', 'd-pl128', 'd-pr128', 'd-px128', 'd-py128', 'd-p128',
+      'd-t96', 'd-r96', 'd-b96', 'd-l96',
+    ];
+    for (const cls of unchanged) {
+      it(`${cls} is left unchanged`, () => {
+        assert.equal(apply(`<div class="${cls}" />`), `<div class="${cls}" />`);
+      });
+    }
+  });
+
   // ─── Border-radius migration (DLT-3329) ───────────────────────────────
 
   describe('border-radius all-corners — legacy pixel-suffix to token stop', () => {

package/lib/dist/js/dialtone_migrate/index.mjs

@@ -363,6 +363,7 @@ function parseArgs (args) {
     help: args.includes('--help'),
     dryRun: args.includes('--dry-run'),
     autoYes: args.includes('--yes'),
+    noImport: args.includes('--no-import'),
     healthCheck: args.includes('--health-check'),
     all: args.includes('--all'),
     cwd: cwdIndex !== -1 && args[cwdIndex + 1]
@@ -742,8 +743,8 @@ async function runConfigMigration (migration, opts) {
   // Loop until convergence: some config regexes only match one token per
   // property declaration per pass (e.g. border-width with two var(--dt-size-*)).
   for (const entry of matched) {
-    let changed = true;
-    while (changed) {
+    let changed;
+    do {
       changed = false;
       for (const expr of configData.expressions) {
         const before = entry.data;
@@ -757,7 +758,7 @@ async function runConfigMigration (migration, opts) {
           changed = true;
         }
       }
-    }
+    } while (changed && !configData.singlePass);
     if (entry.matches > 0) {
       await fs.writeFile(entry.file, entry.data, 'utf8');
       const shortname = path.relative(opts.cwd, entry.file);
@@ -778,6 +779,7 @@ async function runStandaloneMigration (migration, opts) {
   const args = ['--cwd', opts.cwd];
   if (opts.dryRun) args.push('--dry-run');
   if (opts.autoYes) args.push('--yes');
+  if (opts.noImport) args.push('--no-import');
 
   return new Promise((resolve, reject) => {
     const child = spawn(process.execPath, [scriptPath, ...args], {

package/lib/dist/js/dialtone_migrate_flex_to_stack/index.mjs

@@ -1028,15 +1028,28 @@ async function processFile(filePath, options) {
       newContent = newContent.slice(0, r.start) + r.replacement + newContent.slice(r.end);
     }
 
-    await fs.writeFile(filePath, newContent, 'utf-8');
-    console.log(log.green(`   ✓ Saved ${changes} change(s)`));
+    // Auto-inject DtStack import before writing; fall back to manual instructions if needed.
+    // Skipped entirely when --no-import is set (e.g. DtStack is globally registered).
+    const importCheck = options.noImport ? null : detectMissingStackImport(newContent, changes > 0);
+    let finalContent = newContent;
+    if (importCheck?.needsImport) {
+      const injected = injectComponentImport(newContent, 'DtStack', importCheck.suggestedPath);
+      if (injected) finalContent = injected;
+    }
+
+    await fs.writeFile(filePath, finalContent, 'utf-8');
 
-    // Check if file needs DtStack import
-    const importCheck = detectMissingStackImport(newContent, changes > 0);
     if (importCheck?.needsImport) {
+      if (finalContent !== newContent) {
+        console.log(log.green(`   ✓ Saved ${changes} change(s) + added DtStack import`));
+        return { changes, skipped, needsImport: false };
+      }
+      console.log(log.green(`   ✓ Saved ${changes} change(s)`));
       printImportInstructions(filePath, importCheck);
       return { changes, skipped, needsImport: true };
     }
+
+    console.log(log.green(`   ✓ Saved ${changes} change(s)`));
   }
 
   return { changes, skipped, needsImport: false };
@@ -1133,6 +1146,70 @@ function detectImportPattern(content) {
   return '@/components/stack';
 }
 
+/**
+ * Attempt to auto-insert a component import (and Options API registration) into a Vue SFC.
+ * Returns updated content on success, or null when the insertion can't be made safely
+ * (caller should fall back to printing manual instructions).
+ *
+ * Handles:
+ *   - <script setup>: inserts import after the last existing import; no components
+ *     registration needed (auto-registered when imported in setup context).
+ *   - Options API with existing `components: {}`: inserts import + adds to the object.
+ *   - Options API without a components object: returns null (manual step required).
+ */
+function injectComponentImport(content, componentName, importPath) {
+  if (new RegExp(`import\\s+(?:\\{[^}]*\\b${componentName}\\b[^}]*\\}|${componentName})\\s+from`).test(content)) {
+    return null; // already imported
+  }
+
+  const isScriptSetup = /<script\b[^>]*\bsetup\b/.test(content);
+  const scriptBlockRe = isScriptSetup
+    ? /<script\b[^>]*\bsetup\b[^>]*>([\s\S]*?)<\/script>/
+    : /<script\b(?![^>]*\bsetup\b)[^>]*>([\s\S]*?)<\/script>/;
+  const scriptMatch = scriptBlockRe.exec(content);
+  if (!scriptMatch) return null;
+
+  const scriptInnerStart = scriptMatch.index + scriptMatch[0].indexOf('>') + 1;
+  const scriptInner = scriptMatch[1];
+
+  const importLineRe = /^import\s.+from\s+['"][^'"]+['"]\s*;?/gm;
+  let lastImportMatch = null;
+  let m;
+  while ((m = importLineRe.exec(scriptInner)) !== null) lastImportMatch = m;
+
+  const insertOffset = lastImportMatch
+    ? scriptInnerStart + lastImportMatch.index + lastImportMatch[0].length
+    : scriptInnerStart;
+
+  const importLine = `\nimport { ${componentName} } from '${importPath}';`;
+  let out = content.slice(0, insertOffset) + importLine + content.slice(insertOffset);
+
+  if (isScriptSetup) return out; // import alone is sufficient for <script setup>
+
+  // Options API: also register in components: {}
+  // Re-exec against the updated content to get current positions, then restrict
+  // the components: { search to within the script block and after export default
+  // to avoid matching template bindings or helper objects that appear earlier.
+  const scriptMatchUpdated = scriptBlockRe.exec(out);
+  if (!scriptMatchUpdated) return null;
+  const scriptBodyStart = scriptMatchUpdated.index + scriptMatchUpdated[0].indexOf('>') + 1;
+  const scriptBodyText = scriptMatchUpdated[1];
+  const exportDefaultMatch = /\bexport\s+default\b/.exec(scriptBodyText);
+  if (!exportDefaultMatch) return null;
+  const searchFrom = scriptBodyStart + exportDefaultMatch.index;
+  const compMatchInSlice = /components\s*:\s*\{/.exec(out.slice(searchFrom));
+  if (!compMatchInSlice) return null; // no components object — can't safely auto-register
+  const compAbsIndex = searchFrom + compMatchInSlice.index;
+
+  const lineStart = out.lastIndexOf('\n', compAbsIndex) + 1;
+  const compIndent = out.slice(lineStart, compAbsIndex).match(/^[ \t]*/)[0];
+  const memberIndent = compIndent + '  ';
+  const insertAt = compAbsIndex + compMatchInSlice[0].length;
+  out = out.slice(0, insertAt) + `\n${memberIndent}${componentName},` + out.slice(insertAt);
+
+  return out;
+}
+
 /**
  * Print instructions for adding DtStack import and registration
  * @param {string} filePath - Path to the file
@@ -1179,6 +1256,7 @@ function parseArgs() {
     files: [], // Explicit file list via --file flag
     showOutline: false, // Add migration marker for visual debugging
     removeOutline: false, // Remove migration markers (cleanup mode)
+    noImport: false, // Skip import injection (for apps that globally register DtStack)
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -1206,11 +1284,12 @@ Options:
   --yes, -y        Apply all changes without prompting
   --show-outline   Add data-migrate-outline attribute for visual debugging
   --remove-outline Remove data-migrate-outline attributes after review
+  --no-import      Skip import injection (use when DtStack is globally registered)
   --help, -h       Show help
 
 Post-Migration Steps:
   1. Review template changes with data-migrate-outline markers
-  2. Add DtStack imports as instructed by the script
+  2. Add DtStack imports as instructed by the script (skipped with --no-import)
   3. Test your application
   4. Run with --remove-outline to clean up markers
 
@@ -1252,6 +1331,8 @@ Examples:
       options.showOutline = true;
     } else if (arg === '--remove-outline') {
       options.removeOutline = true;
+    } else if (arg === '--no-import') {
+      options.noImport = true;
     } else if (arg === '--file' && args[i + 1]) {
       const filePath = args[++i];
       options.files.push(filePath);
@@ -1348,6 +1429,7 @@ async function main() {
         yes: options.yes,
         showOutline: options.showOutline,
         validate: options.validate,
+        noImport: options.noImport,
       });
     }
 

package/lib/dist/js/dialtone_migrate_typography/index.mjs

@@ -1002,17 +1002,31 @@ function flagDynamicClasses (content) {
   const re = new RegExp(DYNAMIC_CLASS_PATTERN);
   if (!re.test(content)) return content;
 
-  const lines = content.split('\n');
-  const out = lines.map(line => {
-    if (!/:class=|v-bind:class=/.test(line)) return line;
-    if (!new RegExp(DYNAMIC_CLASS_PATTERN).test(line)) return line;
-    // Preserve the line's indentation; put the marker on its own line above.
-    const indentMatch = line.match(/^[ \t]*/);
-    const indent = indentMatch ? indentMatch[0] : '';
-    return `${indent}<!-- dt-text-migrate: review dynamic class -->\n${line}`;
-  });
+  // Walk whole opening tags (quote-aware) so the marker is never injected between
+  // attributes of a multi-line element. The old line-by-line approach would insert
+  // the comment before the :class= line, which lands it between attributes when the
+  // opening tag spans multiple lines.
+  const tagRe = new RegExp(`<[a-zA-Z][\\w-]*(${ATTR_BODY})>`, 'g');
+  const insertions = [];
+  let m;
 
-  return out.join('\n');
+  while ((m = tagRe.exec(content)) !== null) {
+    if (!new RegExp(DYNAMIC_CLASS_PATTERN).test(m[0])) continue;
+    const before = content.slice(Math.max(0, m.index - 80), m.index);
+    if (/<!--\s*dt-text-migrate:\s*review dynamic class\s*-->/.test(before)) continue;
+    insertions.push(m.index);
+  }
+
+  if (insertions.length === 0) return content;
+
+  let out = content;
+  for (const idx of insertions.reverse()) {
+    const lineStart = out.lastIndexOf('\n', idx - 1) + 1;
+    const indent = out.slice(lineStart, idx).match(/^[ \t]*/)[0];
+    const marker = `${indent}<!-- dt-text-migrate: review dynamic class -->\n`;
+    out = out.slice(0, lineStart) + marker + out.slice(lineStart);
+  }
+  return out;
 }
 
 // Find composed typography classes on tags outside the rewrite scope
@@ -1245,6 +1259,70 @@ function detectMissingDtTextImport (content, usesText) {
   };
 }
 
+/**
+ * Attempt to auto-insert a component import (and Options API registration) into a Vue SFC.
+ * Returns updated content on success, or null when the insertion can't be made safely
+ * (caller should fall back to printing manual instructions).
+ *
+ * Handles:
+ *   - <script setup>: inserts import after the last existing import; no components
+ *     registration needed (auto-registered when imported in setup context).
+ *   - Options API with existing `components: {}`: inserts import + adds to the object.
+ *   - Options API without a components object: returns null (manual step required).
+ */
+export function injectComponentImport (content, componentName, importPath) {
+  if (new RegExp(`import\\s+(?:\\{[^}]*\\b${componentName}\\b[^}]*\\}|${componentName})\\s+from`).test(content)) {
+    return null; // already imported
+  }
+
+  const isScriptSetup = /<script\b[^>]*\bsetup\b/.test(content);
+  const scriptBlockRe = isScriptSetup
+    ? /<script\b[^>]*\bsetup\b[^>]*>([\s\S]*?)<\/script>/
+    : /<script\b(?![^>]*\bsetup\b)[^>]*>([\s\S]*?)<\/script>/;
+  const scriptMatch = scriptBlockRe.exec(content);
+  if (!scriptMatch) return null;
+
+  const scriptInnerStart = scriptMatch.index + scriptMatch[0].indexOf('>') + 1;
+  const scriptInner = scriptMatch[1];
+
+  const importLineRe = /^import\s.+from\s+['"][^'"]+['"]\s*;?/gm;
+  let lastImportMatch = null;
+  let m;
+  while ((m = importLineRe.exec(scriptInner)) !== null) lastImportMatch = m;
+
+  const insertOffset = lastImportMatch
+    ? scriptInnerStart + lastImportMatch.index + lastImportMatch[0].length
+    : scriptInnerStart;
+
+  const importLine = `\nimport { ${componentName} } from '${importPath}';`;
+  let out = content.slice(0, insertOffset) + importLine + content.slice(insertOffset);
+
+  if (isScriptSetup) return out; // import alone is sufficient for <script setup>
+
+  // Options API: also register in components: {}
+  // Re-exec against the updated content to get current positions, then restrict
+  // the components: { search to within the script block and after export default
+  // to avoid matching template bindings or helper objects that appear earlier.
+  const scriptMatchUpdated = scriptBlockRe.exec(out);
+  if (!scriptMatchUpdated) return null;
+  const scriptBodyStart = scriptMatchUpdated.index + scriptMatchUpdated[0].indexOf('>') + 1;
+  const scriptBodyText = scriptMatchUpdated[1];
+  const exportDefaultMatch = /\bexport\s+default\b/.exec(scriptBodyText);
+  if (!exportDefaultMatch) return null;
+  const searchFrom = scriptBodyStart + exportDefaultMatch.index;
+  const compMatchInSlice = /components\s*:\s*\{/.exec(out.slice(searchFrom));
+  if (!compMatchInSlice) return null; // no components object — can't safely auto-register
+  const compAbsIndex = searchFrom + compMatchInSlice.index;
+
+  const lineStart = out.lastIndexOf('\n', compAbsIndex) + 1;
+  const compIndent = out.slice(lineStart, compAbsIndex).match(/^[ \t]*/)[0];
+  const memberIndent = compIndent + '  ';
+  const insertAt = compAbsIndex + compMatchInSlice[0].length;
+  out = out.slice(0, insertAt) + `\n${memberIndent}${componentName},` + out.slice(insertAt);
+
+  return out;
+}
+
 function printImportInstructions (filePath, importCheck) {
   console.log(log.yellow('\n⚠️  ACTION REQUIRED: Add DtText import and registration'));
   log.cyan(`   File: ${filePath}`);
@@ -1450,9 +1528,6 @@ async function processFile (filePath, options) {
 
   if (!shouldApply) return { changes: 0, needsImport: false };
 
-  await fs.writeFile(filePath, transformed, 'utf-8');
-  console.log(log.green('   ✓ Saved'));
-
   // Only warn about missing DtText import when we actually INSERTED new <dt-text> elements
   // — review-marker-only changes (eyebrow/d-code--sm/d-fs-* flags) don't require an import.
   // Use a count delta (not boolean presence) so partial migrations on a file that already
@@ -1460,14 +1535,34 @@ async function processFile (filePath, options) {
   const beforeCount = (content.match(/<dt-text\b/g) || []).length;
   const afterCount = (transformed.match(/<dt-text\b/g) || []).length;
   const addedDtText = afterCount > beforeCount;
-  const importCheck = detectMissingDtTextImport(transformed, addedDtText);
-  if (importCheck?.needsImport) printImportInstructions(filePath, importCheck);
+  // Auto-inject DtText import before writing; fall back to manual instructions if needed.
+  // Skipped entirely when --no-import is set (e.g. DtText is globally registered).
+  const importCheck = options.noImport ? null : detectMissingDtTextImport(transformed, addedDtText);
+
+  let finalContent = transformed;
+  if (importCheck?.needsImport) {
+    const injected = injectComponentImport(transformed, 'DtText', importCheck.suggestedPath);
+    if (injected) finalContent = injected;
+  }
+
+  await fs.writeFile(filePath, finalContent, 'utf-8');
+
+  if (importCheck?.needsImport) {
+    if (finalContent !== transformed) {
+      console.log(log.green('   ✓ Saved + added DtText import'));
+    } else {
+      console.log(log.green('   ✓ Saved'));
+      printImportInstructions(filePath, importCheck);
+    }
+  } else {
+    console.log(log.green('   ✓ Saved'));
+  }
 
   if (notes.length > 0) {
     for (const note of notes) log.gray(`   ℹ ${note}`);
   }
 
-  return { changes: 1, needsImport: !!importCheck?.needsImport };
+  return { changes: 1, needsImport: importCheck?.needsImport && finalContent === transformed };
 }
 
 //------------------------------------------------------------------------------
@@ -1484,6 +1579,7 @@ function parseArgs () {
     files: [],
     removeMarkers: false,
     validate: false,
+    noImport: false, // Skip import injection (for apps that globally register DtText)
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -1503,6 +1599,7 @@ Options:
   --remove-markers    Strip all <!-- dt-text-migrate: review ... --> comments
   --validate          Read-only mode: scan existing <dt-text> for prop bugs
                       (object syntax, invalid values, mixed CSS classes)
+  --no-import         Skip import injection (use when DtText is globally registered)
   --help, -h          Show help
 
 Examples:
@@ -1512,7 +1609,7 @@ Examples:
   npx dialtone-migrate-typography --remove-markers --cwd ./src
 
 Post-Migration Steps:
-  1. Add DtText imports as instructed by the script
+  1. Add DtText imports as instructed by the script (skipped with --no-import)
   2. Review files marked with <!-- dt-text-migrate: review --> comments
   3. Run with --remove-markers to clean up all markers after manual review
 `);
@@ -1531,6 +1628,8 @@ Post-Migration Steps:
       options.removeMarkers = true;
     } else if (arg === '--validate') {
       options.validate = true;
+    } else if (arg === '--no-import') {
+      options.noImport = true;
     }
   }