@dialpad/dialtone-css 8.81.0-next.5 → 8.81.0-next.6

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

@@ -18,7 +18,11 @@
  *   --yes              Apply all changes without prompting
  *   --health-check     Report migration status without modifying files
  *   --all              Run all required migrations without selection prompt
+ *   --include-opt-in   Also run opt-in migrations (with --all, or on its own = everything)
  *   --only <ids>       Comma-separated list of migration IDs to run
+ *   --package <name>   Package name to use for injected component imports
+ *                      (default: @dialpad/dialtone-vue). Useful when running
+ *                      Dialtone under a custom package alias (e.g. @dialpad/dialtone-next).
  *   --help             Show help
  *
  * Examples:
@@ -50,6 +54,7 @@ const __dirname = path.dirname(__filename);
  * @property {'config'|'standalone'|'manual'} type
  * @property {string} [configName] - Config filename for migration-helper type
  * @property {string} [scriptDir]  - Directory name for standalone scripts
+ * @property {boolean} [supportsPackageArg] - Forward --package to this standalone script
  * @property {string[]} [extraArgs] - Extra CLI args to forward
  * @property {RegExp[]} detectPatterns - Patterns that indicate migration is still needed
  * @property {string[]} fileExtensions - File extensions to scan during health check
@@ -250,6 +255,8 @@ const MIGRATIONS = [
     category: 'opt-in',
     type: 'standalone',
     scriptDir: 'dialtone_migrate_flex_to_stack',
+    // Injects a DtStack import, so it honors the --package override.
+    supportsPackageArg: true,
     detectPatterns: [
       /class="[^"]*d-d-flex[^"]*"/,
     ],
@@ -304,6 +311,8 @@ const MIGRATIONS = [
     category: 'opt-in',
     type: 'standalone',
     scriptDir: 'dialtone_migrate_typography',
+    // Injects a DtText import, so it honors the --package override.
+    supportsPackageArg: true,
     detectPatterns: [
       /class="[^"]*d-(?:headline|body|label)--(?:sm|md|lg|xl|xxl)/,
       /class="[^"]*d-(?:headline|body|label)-(?:small|medium|large)/,
@@ -371,6 +380,17 @@ async function writeMigrationMarker (cwd, id) {
 function parseArgs (args) {
   const cwdIndex = args.indexOf('--cwd');
   const onlyIndex = args.indexOf('--only');
+  const packageIndex = args.indexOf('--package');
+
+  // --package must be followed by an actual package name. Reject a missing value
+  // or a value that is really the next option (e.g. `--package --all`) so invalid
+  // input never reaches the alias confirmation or child-migration args.
+  const packageValue = packageIndex !== -1 ? args[packageIndex + 1] : undefined;
+  if (packageIndex !== -1 && (!packageValue || packageValue.startsWith('-'))) {
+    console.error('\n  --package requires a package name (e.g. --package @dialpad/dialtone-next)\n');
+    process.exit(1);
+  }
+
   return {
     help: args.includes('--help'),
     dryRun: args.includes('--dry-run'),
@@ -378,12 +398,14 @@ function parseArgs (args) {
     noImport: args.includes('--no-import'),
     healthCheck: args.includes('--health-check'),
     all: args.includes('--all'),
+    includeOptIn: args.includes('--include-opt-in'),
     cwd: cwdIndex !== -1 && args[cwdIndex + 1]
       ? path.resolve(args[cwdIndex + 1])
       : process.cwd(),
     only: onlyIndex !== -1 && args[onlyIndex + 1]
       ? args[onlyIndex + 1].split(',').map(s => s.trim())
       : null,
+    packageName: packageIndex !== -1 ? packageValue : null,
   };
 }
 
@@ -400,7 +422,11 @@ Options:
   --yes              Apply all changes without prompting
   --health-check     Report migration status without modifying files
   --all              Run all required migrations without selection prompt
+  --include-opt-in   Also run opt-in migrations (with --all, or on its own = everything)
   --only <ids>       Comma-separated list of migration IDs to run
+  --package <name>   Package name to use for injected component imports
+                     (default: @dialpad/dialtone-vue). Useful when running
+                     Dialtone under a custom package alias (e.g. @dialpad/dialtone-next).
   --help             Show help
 
 Available migration IDs (required):
@@ -413,6 +439,7 @@ Examples:
   npx dialtone-migrate                              # Interactive selection
   npx dialtone-migrate --health-check --cwd ./src   # Check migration status
   npx dialtone-migrate --all --dry-run               # Dry-run all required
+  npx dialtone-migrate --all --include-opt-in --yes  # Run required + opt-in
   npx dialtone-migrate --only color-stops,hsl-to-oklch --yes
 `);
 }
@@ -792,6 +819,9 @@ async function runStandaloneMigration (migration, opts) {
   if (opts.dryRun) args.push('--dry-run');
   if (opts.autoYes) args.push('--yes');
   if (opts.noImport) args.push('--no-import');
+  if (opts.packageName && migration.supportsPackageArg) {
+    args.push('--package', opts.packageName);
+  }
 
   return new Promise((resolve, reject) => {
     const child = spawn(process.execPath, [scriptPath, ...args], {
@@ -872,8 +902,12 @@ async function main () {
       }
       return m;
     });
-  } else if (opts.all) {
-    selected = MIGRATIONS.filter(m => m.category === 'required');
+  } else if (opts.all || opts.includeOptIn) {
+    // --include-opt-in widens the selection to every migration; --all alone stays
+    // required-only. Either flag skips the interactive prompt.
+    selected = opts.includeOptIn
+      ? MIGRATIONS.slice()
+      : MIGRATIONS.filter(m => m.category === 'required');
   } else {
     selected = await selectMigrations(MIGRATIONS);
   }
@@ -885,6 +919,9 @@ async function main () {
 
   // Confirmation
   console.log(`\n  Target directory: ${opts.cwd}`);
+  if (opts.packageName) {
+    console.log(`  Import package:    ${opts.packageName}`);
+  }
   console.log(`  Migrations to run (${selected.length}):\n`);
   for (const m of selected) {
     const tag = m.category === 'required' ? '[REQUIRED]' : '[OPT-IN]';

package/lib/build/js/dialtone_migrate/test.mjs

@@ -0,0 +1,88 @@
+/**
+ * dialtone-migrate (master orchestrator) tests.
+ *
+ * Exercises migration selection via the CLI in --dry-run against an empty temp
+ * directory, asserting which categories each flag selects.
+ * Run: node --test packages/dialtone-css/lib/build/js/dialtone_migrate/test.mjs
+ */
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const cli = path.join(path.dirname(fileURLToPath(import.meta.url)), 'index.mjs');
+
+// Run the CLI in --dry-run against an empty temp dir and return stdout.
+function runDryRun (flags) {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'dlt-master-'));
+  try {
+    return execFileSync(
+      process.execPath,
+      [cli, '--dry-run', '--cwd', tmp, ...flags],
+      { encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] },
+    );
+  } finally {
+    fs.rmSync(tmp, { recursive: true, force: true });
+  }
+}
+
+function selectedCount (output) {
+  const m = output.match(/Migrations to run \((\d+)\)/);
+  return m ? Number(m[1]) : null;
+}
+
+describe('migration selection', () => {
+  it('--all selects the required migrations only (excludes opt-in)', () => {
+    const output = runDryRun(['--all']);
+    assert.equal(selectedCount(output), 12);
+    assert.ok(!output.includes('[OPT-IN]'), '--all must not select opt-in migrations');
+  });
+
+  it('--all --include-opt-in selects every migration', () => {
+    const output = runDryRun(['--all', '--include-opt-in']);
+    assert.equal(selectedCount(output), 20);
+    assert.ok(output.includes('[OPT-IN]'), 'opt-in migrations should be selected');
+  });
+
+  it('--include-opt-in on its own also selects every migration', () => {
+    const output = runDryRun(['--include-opt-in']);
+    assert.equal(selectedCount(output), 20);
+  });
+});
+
+describe('--package validation', () => {
+  // Run the CLI with the given args and return { status, stderr }; never throws.
+  function run (extraArgs) {
+    const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'dlt-master-'));
+    try {
+      execFileSync(process.execPath, [cli, '--dry-run', '--cwd', tmp, ...extraArgs],
+        { encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'] });
+      return { status: 0, stderr: '' };
+    } catch (err) {
+      return { status: err.status, stderr: String(err.stderr ?? '') };
+    } finally {
+      fs.rmSync(tmp, { recursive: true, force: true });
+    }
+  }
+
+  it('rejects --package with no value', () => {
+    const { status, stderr } = run(['--all', '--package']);
+    assert.equal(status, 1);
+    assert.match(stderr, /--package requires a package name/);
+  });
+
+  it('rejects --package followed by another option (--package --all)', () => {
+    const { status, stderr } = run(['--package', '--all']);
+    assert.equal(status, 1);
+    assert.match(stderr, /--package requires a package name/);
+  });
+
+  it('accepts a valid package name', () => {
+    const { status } = run(['--all', '--package', '@dialpad/dialtone-next']);
+    assert.equal(status, 0);
+  });
+});

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

@@ -1030,7 +1030,7 @@ async function processFile(filePath, options) {
 
     // 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);
+    const importCheck = options.noImport ? null : detectMissingStackImport(newContent, changes > 0, options.package);
     let finalContent = newContent;
     if (importCheck?.needsImport) {
       const injected = injectComponentImport(newContent, 'DtStack', importCheck.suggestedPath);
@@ -1102,9 +1102,10 @@ async function cleanupMarkers(filePath, options) {
  * Check if a file needs DtStack import
  * @param {string} content - Full file content
  * @param {boolean} usesStack - Whether file has <dt-stack> in template
+ * @param {string} [packageName] - Explicit package to import from (overrides detection)
  * @returns {object|null} - Detection result with suggested import path, or null if import exists
  */
-function detectMissingStackImport(content, usesStack) {
+function detectMissingStackImport(content, usesStack, packageName) {
   if (!usesStack) return null;
 
   // Check if DtStack is already imported
@@ -1112,7 +1113,7 @@ function detectMissingStackImport(content, usesStack) {
   if (hasImport) return null;
 
   // Analyze existing imports to suggest appropriate path
-  const importPath = detectImportPattern(content);
+  const importPath = detectImportPattern(content, packageName);
 
   return {
     needsImport: true,
@@ -1124,9 +1125,17 @@ function detectMissingStackImport(content, usesStack) {
 /**
  * Detect import pattern from existing imports in file
  * @param {string} content - File content
+ * @param {string} [packageName] - Explicit package name (e.g. @dialpad/dialtone-next).
+ *   When provided, it is used verbatim, overriding the heuristics below. This lets
+ *   consumers running Dialtone under a custom package alias inject the correct import.
  * @returns {string} - Suggested import path
  */
-function detectImportPattern(content) {
+function detectImportPattern(content, packageName) {
+  // Explicit override: honor the caller-provided package name.
+  if (packageName) {
+    return packageName;
+  }
+
   // Check for @/ alias (absolute from package root)
   if (content.includes('from \'@/components/')) {
     return '@/components/stack';
@@ -1257,6 +1266,7 @@ function parseArgs() {
     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)
+    package: null, // Override the package name used for injected DtStack imports
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -1285,6 +1295,9 @@ Options:
   --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)
+  --package <name> Package name for injected DtStack imports
+                   (default: @dialpad/dialtone-vue when a Dialtone import is detected).
+                   Use when Dialtone runs under a custom alias, e.g. @dialpad/dialtone-next.
   --help, -h       Show help
 
 Post-Migration Steps:
@@ -1333,6 +1346,15 @@ Examples:
       options.removeOutline = true;
     } else if (arg === '--no-import') {
       options.noImport = true;
+    } else if (arg === '--package') {
+      // Reject a missing value or one that is really the next option (e.g.
+      // `--package --yes`) so an invalid alias is never recorded.
+      const value = args[i + 1];
+      if (!value || value.startsWith('-')) {
+        console.error('\n  --package requires a package name (e.g. --package @dialpad/dialtone-next)\n');
+        process.exit(1);
+      }
+      options.package = args[++i];
     } else if (arg === '--file' && args[i + 1]) {
       const filePath = args[++i];
       options.files.push(filePath);
@@ -1430,6 +1452,7 @@ async function main() {
         showOutline: options.showOutline,
         validate: options.validate,
         noImport: options.noImport,
+        package: options.package,
       });
     }
 

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

@@ -1235,11 +1235,20 @@ async function validateAndResolveFiles (filePaths, extensions) {
 // Import detection (ported from flex-to-stack)
 //------------------------------------------------------------------------------
 
-export function detectImportPathFor (content) {
-  return detectImportPattern(content);
+export function detectImportPathFor (content, packageName) {
+  return detectImportPattern(content, packageName);
 }
 
-function detectImportPattern (content) {
+/**
+ * @param {string} content - File content
+ * @param {string} [packageName] - Explicit package name (e.g. @dialpad/dialtone-next).
+ *   When provided, it is used verbatim, overriding the heuristics below. This lets
+ *   consumers running Dialtone under a custom package alias inject the correct import.
+ */
+function detectImportPattern (content, packageName) {
+  // Explicit override: honor the caller-provided package name.
+  if (packageName) return packageName;
+
   if (content.includes('from \'@/components/')) return '@/components/text';
   if (content.includes('from \'./\'')) return './';
   if (content.includes('from \'@dialpad/dialtone-vue') || content.includes('from \'@dialpad/dialtone-icons')) {
@@ -1248,13 +1257,13 @@ function detectImportPattern (content) {
   return '@/components/text';
 }
 
-function detectMissingDtTextImport (content, usesText) {
+function detectMissingDtTextImport (content, usesText, packageName) {
   if (!usesText) return null;
   const hasImport = /import\s+(?:\{[^}]*\bDtText\b[^}]*\}|DtText)\s+from/.test(content);
   if (hasImport) return null;
   return {
     needsImport: true,
-    suggestedPath: detectImportPattern(content),
+    suggestedPath: detectImportPattern(content, packageName),
     hasComponentsObject: /components:\s*\{/.test(content),
   };
 }
@@ -1537,7 +1546,7 @@ async function processFile (filePath, options) {
   const addedDtText = afterCount > beforeCount;
   // 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);
+  const importCheck = options.noImport ? null : detectMissingDtTextImport(transformed, addedDtText, options.package);
 
   let finalContent = transformed;
   if (importCheck?.needsImport) {
@@ -1580,6 +1589,7 @@ function parseArgs () {
     removeMarkers: false,
     validate: false,
     noImport: false, // Skip import injection (for apps that globally register DtText)
+    package: null, // Override the package name used for injected DtText imports
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -1600,6 +1610,9 @@ Options:
   --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)
+  --package <name>    Package name for injected DtText imports
+                      (default: @dialpad/dialtone-vue when a Dialtone import is detected).
+                      Use when Dialtone runs under a custom alias, e.g. @dialpad/dialtone-next.
   --help, -h          Show help
 
 Examples:
@@ -1630,6 +1643,15 @@ Post-Migration Steps:
       options.validate = true;
     } else if (arg === '--no-import') {
       options.noImport = true;
+    } else if (arg === '--package') {
+      // Reject a missing value or one that is really the next option (e.g.
+      // `--package --yes`) so an invalid alias is never recorded.
+      const value = args[i + 1];
+      if (!value || value.startsWith('-')) {
+        console.error('\n  --package requires a package name (e.g. --package @dialpad/dialtone-next)\n');
+        process.exit(1);
+      }
+      options.package = args[++i];
     }
   }
 

package/lib/build/js/dialtone_migrate_typography/test.mjs

@@ -7,6 +7,11 @@
 
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import {
   transformContent,
   detectImportPathFor,
@@ -729,6 +734,83 @@ describe('import detection', () => {
     const path = detectImportPathFor(content);
     assert.equal(path, '@/components/text');
   });
+
+  it('uses the explicit package name when provided, overriding detection', () => {
+    const content = `<script>\nimport { DtButton } from '@/components/button';\n</script>`;
+    const path = detectImportPathFor(content, '@dialpad/dialtone-next');
+    assert.equal(path, '@dialpad/dialtone-next');
+  });
+
+  it('explicit package name applies even when no imports are present', () => {
+    const content = `<template><p class="d-headline--md">x</p></template>`;
+    const path = detectImportPathFor(content, '@dialpad/dialtone-next');
+    assert.equal(path, '@dialpad/dialtone-next');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// --package end-to-end: prove the flag reaches the injected import, both via
+// the standalone CLI and forwarded through the master orchestrator.
+// ---------------------------------------------------------------------------
+
+describe('--package end-to-end', () => {
+  const dir = path.dirname(fileURLToPath(import.meta.url));
+  const typographyCli = path.join(dir, 'index.mjs');
+  const masterCli = path.join(dir, '..', 'dialtone_migrate', 'index.mjs');
+
+  // Uses <script setup> so the import auto-injects, a local @/components import so
+  // that without --package detection would resolve to @/components/text (not the
+  // package), and a d-headline-- class so a <dt-text> is added (triggering the import).
+  const SOURCE = [
+    '<script setup>',
+    `import { DtButton } from '@/components/button';`,
+    '</script>',
+    '<template>',
+    '  <p class="d-headline--md">Title</p>',
+    '</template>',
+    '',
+  ].join('\n');
+
+  function migrate (argv) {
+    const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'dlt-typo-'));
+    const file = path.join(tmp, 'Sample.vue');
+    fs.writeFileSync(file, SOURCE, 'utf8');
+    try {
+      execFileSync(process.execPath, argv(tmp), { stdio: 'ignore' });
+      return fs.readFileSync(file, 'utf8');
+    } finally {
+      fs.rmSync(tmp, { recursive: true, force: true });
+    }
+  }
+
+  it('standalone CLI injects the explicit package into the generated import', () => {
+    const output = migrate(tmp => [
+      typographyCli, '--cwd', tmp, '--yes', '--package', '@dialpad/dialtone-next',
+    ]);
+    assert.match(output, /import \{ DtText \} from '@dialpad\/dialtone-next';/);
+  });
+
+  it('master orchestrator forwards --package to the typography child', () => {
+    // The import lands on @dialpad/dialtone-next only if the master forwarded the
+    // flag; otherwise detection would pick @/components/text from the existing import.
+    const output = migrate(tmp => [
+      masterCli, '--only', 'typography', '--yes', '--cwd', tmp, '--package', '@dialpad/dialtone-next',
+    ]);
+    assert.match(output, /import \{ DtText \} from '@dialpad\/dialtone-next';/);
+  });
+
+  it('rejects --package followed by another option (--package --yes)', () => {
+    const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'dlt-typo-'));
+    try {
+      assert.throws(
+        () => execFileSync(process.execPath, [typographyCli, '--cwd', tmp, '--package', '--yes'],
+          { stdio: ['ignore', 'ignore', 'pipe'] }),
+        err => err.status === 1 && /--package requires a package name/.test(String(err.stderr)),
+      );
+    } finally {
+      fs.rmSync(tmp, { recursive: true, force: true });
+    }
+  });
 });
 
 describe('--remove-markers', () => {

package/lib/dist/dialtone-default-theme.css

@@ -17000,6 +17000,7 @@
   --dt-layout-75: calc(var(--dt-layout-base) * 0.75); /* 48px */
   --dt-layout-50: calc(var(--dt-layout-base) * 0.5); /* 32px */
   --dt-layout-25: calc(var(--dt-layout-base) * 0.25); /* 16px */
+  --dt-layout-0: calc(var(--dt-layout-base) * 0); /* 0px */
   --dt-spacing-800: calc(var(--dt-spacing-base) * 8); /* 64px */
   --dt-spacing-750: calc(var(--dt-spacing-base) * 7.5); /* 60px */
   --dt-spacing-700: calc(var(--dt-spacing-base) * 7); /* 56px */