@dialpad/dialtone-css 8.80.0-next.9 → 8.81.0-next.1

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

@@ -28,7 +28,7 @@
  *   npx dialtone-migrate --only color-stops,hsl-to-oklch
  */
 
-import { spawn } from 'node:child_process';
+import { spawn, execFileSync } from 'node:child_process';
 import fs from 'fs/promises';
 import path from 'path';
 import readline from 'readline';
@@ -302,11 +302,12 @@ const MIGRATIONS = [
   {
     id: 'vue3-to-vue-imports',
     name: 'Vue 3 Import Paths',
-    description: '@dialpad/dialtone-icons/vue3 and @dialpad/dialtone-vue/vue3 import paths renamed to /vue.',
+    description: '@dialpad/dialtone/vue3, @dialpad/dialtone-icons/vue3, and @dialpad/dialtone-vue/vue3 import paths renamed to /vue.',
     category: 'required',
     type: 'config',
     configName: 'vue3-to-vue-imports',
     detectPatterns: [
+      /@dialpad\/dialtone\/vue3/,
       /@dialpad\/dialtone-icons\/vue3/,
       /@dialpad\/dialtone-vue\/vue3/,
     ],
@@ -314,6 +315,43 @@ const MIGRATIONS = [
   },
 ];
 
+// ---------------------------------------------------------------------------
+// Migration markers
+// ---------------------------------------------------------------------------
+
+const MARKER_DIR = '.dialtone-migrations';
+
+function getRepoRoot (cwd) {
+  try {
+    return execFileSync('git', ['rev-parse', '--show-toplevel'], {
+      cwd,
+      encoding: 'utf8',
+      stdio: ['ignore', 'pipe', 'ignore'],
+    }).trim();
+  } catch {
+    return cwd;
+  }
+}
+
+function markerPath (cwd, id) {
+  return path.join(getRepoRoot(cwd), MARKER_DIR, id);
+}
+
+async function checkMigrationMarker (cwd, id) {
+  try {
+    await fs.access(markerPath(cwd, id));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function writeMigrationMarker (cwd, id) {
+  const p = markerPath(cwd, id);
+  await fs.mkdir(path.dirname(p), { recursive: true });
+  await fs.writeFile(p, '', 'utf8');
+}
+
 // ---------------------------------------------------------------------------
 // CLI parsing
 // ---------------------------------------------------------------------------
@@ -370,7 +408,7 @@ Examples:
 // File walker (shared utility)
 // ---------------------------------------------------------------------------
 
-const DEFAULT_IGNORE = ['node_modules', 'dist', '.git', '.vuepress/public', '.vuepress/.temp', '.vuepress/.cache', 'storybook-static'];
+const DEFAULT_IGNORE = ['node_modules', 'dist', '.git', '.vuepress/public', '.vuepress/.temp', '.vuepress/.cache', 'storybook-static', 'compiled'];
 
 function isIgnoredPath (fullPath) {
   const segments = fullPath.split(path.sep);
@@ -386,6 +424,31 @@ function isIgnoredPath (fullPath) {
   });
 }
 
+/**
+ * Filter out files that are ignored by .gitignore using git check-ignore.
+ * Falls back gracefully if git is not available.
+ */
+function filterGitIgnored (files, cwd) {
+  if (files.length === 0) return files;
+  try {
+    const input = files.join('\n');
+    const output = execFileSync('git', ['check-ignore', '--stdin'], {
+      input,
+      cwd,
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'ignore'],
+    });
+    const ignored = new Set(output.trim().split('\n').filter(Boolean));
+    return files.filter(f => !ignored.has(f));
+  } catch (err) {
+    // status 1 → no paths ignored; status 128 → not a git repo; ENOENT → git missing
+    if (err.status === 1 || err.status === 128 || err.code === 'ENOENT') {
+      return files;
+    }
+    throw err;
+  }
+}
+
 async function findFiles (dir, extensions) {
   const results = [];
   async function walk (currentDir) {
@@ -404,7 +467,7 @@ async function findFiles (dir, extensions) {
     }
   }
   await walk(dir);
-  return results;
+  return filterGitIgnored(results, dir);
 }
 
 // ---------------------------------------------------------------------------
@@ -723,8 +786,11 @@ async function runStandaloneMigration (migration, opts) {
     });
 
     child.on('close', code => {
-      // Exit code 0 means success (or nothing to do)
-      resolve({ exitCode: code });
+      if (code !== 0) {
+        reject(new Error(`child process exited with code ${code}`));
+      } else {
+        resolve({ exitCode: code });
+      }
     });
 
     child.on('error', reject);
@@ -732,8 +798,21 @@ async function runStandaloneMigration (migration, opts) {
 }
 
 async function runMigration (migration, opts) {
+  if (migration.id === 'color-stops' && !opts.dryRun) {
+    if (await checkMigrationMarker(opts.cwd, migration.id)) {
+      console.log(`  ✓ Already applied on this branch (${path.join(getRepoRoot(opts.cwd), MARKER_DIR, migration.id)} exists). Skipping.\n`);
+      console.log(`    Remove that file to re-run.\n`);
+      return { skipped: true };
+    }
+  }
+
   if (migration.type === 'config') {
-    return runConfigMigration(migration, opts);
+    const result = await runConfigMigration(migration, opts);
+    if (migration.id === 'color-stops' && result.applied) {
+      await writeMigrationMarker(opts.cwd, migration.id);
+      console.log(`  Marker written to ${path.join(getRepoRoot(opts.cwd), MARKER_DIR, migration.id)} — commit this file with your changes.\n`);
+    }
+    return result;
   }
 
   if (migration.type === 'standalone') {

package/lib/build/js/dialtone_migration_helper/configs/vue3-to-vue-imports.mjs

@@ -5,10 +5,13 @@
 
 export default {
   description:
-    'Renames /vue3 import subpaths to /vue for @dialpad/dialtone-icons and\n' +
-    '@dialpad/dialtone-vue. After Vue 2 removal, /vue is the canonical path.',
+    'Renames /vue3 import subpaths to /vue for @dialpad/dialtone,\n' +
+    '@dialpad/dialtone-icons, and @dialpad/dialtone-vue.\n' +
+    'After Vue 2 removal, /vue is the canonical path.',
   patterns: ['**/*.{vue,js,ts,jsx,tsx,mjs,mts}'],
   expressions: [
+    // @dialpad/dialtone/vue3 → @dialpad/dialtone/vue
+    { from: /@dialpad\/dialtone\/vue3/g, to: '@dialpad/dialtone/vue' },
     // @dialpad/dialtone-icons/vue3 → @dialpad/dialtone-icons/vue
     { from: /@dialpad\/dialtone-icons\/vue3/g, to: '@dialpad/dialtone-icons/vue' },
     // @dialpad/dialtone-vue/vue3 → @dialpad/dialtone-vue (or /vue if used)

package/lib/build/less/components/box.less

@@ -111,7 +111,7 @@
 //  ============================================================================
 //  $   VALUE LISTS
 //  ----------------------------------------------------------------------------
-@box-surface-values: primary, secondary, moderate, bold, strong, contrast, backdrop, brand, info, warning, critical, positive, success, brand-subtle, brand-strong, info-subtle, info-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, positive-subtle, positive-strong, success-subtle, success-strong, primary-opaque, secondary-opaque, moderate-opaque, bold-opaque, strong-opaque, contrast-opaque, brand-opaque, brand-subtle-opaque, info-opaque, info-subtle-opaque, warning-opaque, warning-subtle-opaque, critical-opaque, critical-subtle-opaque, positive-opaque, positive-subtle-opaque, success-opaque, success-subtle-opaque;
+@box-surface-values: primary, secondary, moderate, bold, strong, contrast, backdrop, overlay, brand, info, warning, critical, positive, success, brand-subtle, brand-strong, info-subtle, info-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, positive-subtle, positive-strong, success-subtle, success-strong, primary-opaque, secondary-opaque, moderate-opaque, bold-opaque, strong-opaque, contrast-opaque, brand-opaque, brand-subtle-opaque, info-opaque, info-subtle-opaque, warning-opaque, warning-subtle-opaque, critical-opaque, critical-subtle-opaque, positive-opaque, positive-subtle-opaque, success-opaque, success-subtle-opaque;
 
 @box-border-color-values: subtle, default, moderate, bold, accent, focus, brand, warning, critical, info, positive, success, brand-subtle, brand-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, info-subtle, info-strong, positive-subtle, positive-strong, success-subtle, success-strong;
 

package/lib/build/less/components/rich-text-editor.less

@@ -25,6 +25,14 @@
       display: inline;
     }
 
+    // The :where(a) rule above has effective specificity (0,2,0) due to the scoping selectors,
+    // which overrides .d-link's (0,1,0) and flattens mention/channel node view links from
+    // inline-flex to inline. Restoring inline-flex at higher specificity keeps the flex layout
+    // intact so DtStack inside these chips doesn't create a stray block formatting context.
+    [data-node-view-wrapper] .d-link {
+      display: inline-flex;
+    }
+
     p.is-editor-empty:first-child::before {
       float: inline-start;
       block-size: 0;

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

@@ -1255,6 +1255,9 @@
   .d-box--surface-backdrop {
     --box-surface: var(--dt-color-surface-backdrop);
   }
+  .d-box--surface-overlay {
+    --box-surface: var(--dt-color-surface-overlay);
+  }
   .d-box--surface-brand {
     --box-surface: var(--dt-color-surface-brand);
   }
@@ -8449,6 +8452,9 @@
   .d-rich-text-editor > .ProseMirror :where(a) {
     display: inline;
   }
+  .d-rich-text-editor > .ProseMirror [data-node-view-wrapper] .d-link {
+    display: inline-flex;
+  }
   .d-rich-text-editor > .ProseMirror p.is-editor-empty:first-child::before {
     float: inline-start;
     block-size: 0;