@astryxdesign/cli 0.1.0-canary.f94dd07 → 0.1.1-canary.a514b99

package/src/codemods/transforms/v0.1.0/index.mjs

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.1.0 transform manifest
+ *
+ * Lists all codemods for the v0.1.0 release in the order they should run.
+ */
+
+import migrateXdsConfigSurfaces, {
+  meta as migrateXdsConfigSurfacesMeta,
+} from './migrate-xds-config-surfaces.mjs';
+
+import migrateXdsModuleSpecifiers, {
+  meta as migrateXdsModuleSpecifiersMeta,
+} from './migrate-xds-module-specifiers.mjs';
+
+export default [
+  {
+    name: 'migrate-xds-config-surfaces',
+    transform: migrateXdsConfigSurfaces,
+    meta: migrateXdsConfigSurfacesMeta,
+  },
+  {
+    name: 'migrate-xds-module-specifiers',
+    transform: migrateXdsModuleSpecifiers,
+    meta: migrateXdsModuleSpecifiersMeta,
+  },
+];

package/src/codemods/transforms/v0.1.0/migrate-xds-config-surfaces.mjs

@@ -0,0 +1,230 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: migrate XDS config surfaces to Astryx v0.1.0
+ *
+ * The v0.1.0 CLI reads astryx.config.mjs. This config codemod migrates
+ * legacy xds.config.mjs and package.json's top-level `xds` config without
+ * changing dependency names or versions.
+ */
+
+export const meta = {
+  title: 'Migrate xds config surfaces to astryx',
+  description:
+    'Moves legacy package.json xds config into astryx.config.mjs, or renames ' +
+    'xds.config.mjs when no package.json config exists. Bails out if both exist.',
+  pr: '#3092',
+  codemodType: 'config',
+};
+
+function findTopLevelKey(source, targetKey) {
+  let depth = 0;
+  let inString = false;
+  let escaped = false;
+  let stringStart = -1;
+
+  for (let i = 0; i < source.length; i++) {
+    const ch = source[i];
+
+    if (inString) {
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (ch === '\\') {
+        escaped = true;
+        continue;
+      }
+      if (ch !== '"') continue;
+
+      inString = false;
+      const rawKey = source.slice(stringStart + 1, i);
+      if (depth !== 1 || rawKey !== targetKey) continue;
+
+      let j = i + 1;
+      while (/\s/.test(source[j] ?? '')) j++;
+      if (source[j] !== ':') continue;
+
+      const valueStart = j + 1;
+      const value = readJsonValue(source, valueStart);
+      if (!value) return null;
+      return {keyStart: stringStart, keyEnd: i + 1, colon: j, ...value};
+    }
+
+    if (ch === '"') {
+      inString = true;
+      stringStart = i;
+      continue;
+    }
+    if (ch === '{' || ch === '[') depth++;
+    else if (ch === '}' || ch === ']') depth--;
+  }
+  return null;
+}
+
+function readJsonValue(source, start) {
+  let i = start;
+  while (/\s/.test(source[i] ?? '')) i++;
+  const valueStart = i;
+  let inString = false;
+  let escaped = false;
+  let depth = 0;
+
+  for (; i < source.length; i++) {
+    const ch = source[i];
+    if (inString) {
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (ch === '\\') {
+        escaped = true;
+        continue;
+      }
+      if (ch === '"') inString = false;
+      continue;
+    }
+    if (ch === '"') {
+      inString = true;
+      continue;
+    }
+    if (ch === '{' || ch === '[') {
+      depth++;
+      continue;
+    }
+    if (ch === '}' || ch === ']') {
+      if (depth === 0) break;
+      depth--;
+      continue;
+    }
+    if (depth === 0 && ch === ',') break;
+  }
+
+  const valueEnd = i;
+  const rawValue = source.slice(valueStart, valueEnd).trim();
+  try {
+    JSON.parse(rawValue);
+  } catch {
+    return null;
+  }
+  return {valueStart, valueEnd, rawValue, terminator: source[i]};
+}
+
+function removeTopLevelProperty(source, property) {
+  let removeStart = property.keyStart;
+  let removeEnd = property.valueEnd;
+
+  if (source[removeEnd] === ',') {
+    removeEnd++;
+    if (source[removeEnd] === '\n') removeEnd++;
+    return source.slice(0, removeStart) + source.slice(removeEnd);
+  }
+
+  let i = removeStart - 1;
+  while (/\s/.test(source[i] ?? '')) i--;
+  if (source[i] === ',') {
+    const whitespaceBetweenCommaAndKey = source.slice(i + 1, removeStart);
+    const preservedWhitespace = whitespaceBetweenCommaAndKey.includes('\n')
+      ? '\n'
+      : '';
+    return source.slice(0, i) + preservedWhitespace + source.slice(removeEnd);
+  }
+
+  return source.slice(0, removeStart) + source.slice(removeEnd);
+}
+
+function formatConfigSource(rawConfig) {
+  const parsed = JSON.parse(rawConfig);
+  return `export default ${JSON.stringify(parsed, null, 2)};\n`;
+}
+
+function migratePackageJsonConfig(config) {
+  if (!config.packageJson) return {changes: []};
+
+  const packageJson = config.packageJson.source;
+  const xdsConfig = findTopLevelKey(packageJson, 'xds');
+  const astryxConfig = findTopLevelKey(packageJson, 'astryx');
+  if (!xdsConfig && !astryxConfig) return {changes: []};
+
+  if (config.astryxConfig) {
+    return {
+      errors: [
+        {
+          file: 'package.json',
+          error:
+            'package.json contains xds/astryx config and astryx.config.mjs already exists; migrate the config manually.',
+        },
+      ],
+    };
+  }
+
+  if (xdsConfig && astryxConfig) {
+    return {
+      errors: [
+        {
+          file: 'package.json',
+          error:
+            'package.json contains both xds and astryx config keys; migrate the config manually.',
+        },
+      ],
+    };
+  }
+
+  const configProperty = astryxConfig ?? xdsConfig;
+  const packageJsonWithoutConfig = removeTopLevelProperty(
+    packageJson,
+    configProperty,
+  );
+  return {
+    changes: [
+      {path: 'package.json', source: packageJsonWithoutConfig},
+      {
+        path: 'astryx.config.mjs',
+        source: formatConfigSource(configProperty.rawValue),
+      },
+    ],
+  };
+}
+
+function migrateXdsConfigFile(config) {
+  if (!config.xdsConfig) return {changes: []};
+  if (config.astryxConfig) {
+    return {
+      errors: [
+        {
+          file: 'xds.config.mjs',
+          error:
+            'xds.config.mjs and astryx.config.mjs both exist; migrate the config manually.',
+        },
+      ],
+    };
+  }
+  return {
+    changes: [
+      {path: 'astryx.config.mjs', source: config.xdsConfig.source},
+      {path: 'xds.config.mjs', delete: true},
+    ],
+  };
+}
+
+export default function transformer(_file, api) {
+  const config = api.config ?? {};
+  const packageResult = migratePackageJsonConfig(config);
+  if (packageResult.errors?.length) return packageResult;
+  if (packageResult.changes?.length) {
+    if (config.xdsConfig) {
+      return {
+        errors: [
+          {
+            file: 'package.json',
+            error:
+              'package.json contains xds/astryx config and xds.config.mjs exists; migrate the config manually.',
+          },
+        ],
+      };
+    }
+    return packageResult;
+  }
+
+  return migrateXdsConfigFile(config);
+}

package/src/codemods/transforms/v0.1.0/migrate-xds-module-specifiers.mjs

@@ -0,0 +1,84 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: migrate module specifiers from @xds/* to @astryxdesign/*
+ *
+ * The v0.1.0 release moved the public package scope from @xds to
+ * @astryxdesign. Consumers update dependencies first, install, then run
+ * `astryx upgrade`; this transform only updates JS/TS module specifiers in
+ * source code.
+ */
+
+export const meta = {
+  title: 'Migrate module specifiers from @xds/* to @astryxdesign/*',
+  description:
+    'Updates JS/TS import, export, dynamic import, and require module ' +
+    'specifiers from @xds/* to the @astryxdesign/* packages used by Astryx v0.1.0.',
+  pr: '#3092',
+  fileExtensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs'],
+};
+
+const PACKAGE_RENAMES = new Map([
+  ['@xds/build', '@astryxdesign/build'],
+  ['@xds/cli', '@astryxdesign/cli'],
+  ['@xds/core', '@astryxdesign/core'],
+  ['@xds/lab', '@astryxdesign/lab'],
+  ['@xds/theme-butter', '@astryxdesign/theme-butter'],
+  ['@xds/theme-chocolate', '@astryxdesign/theme-chocolate'],
+  ['@xds/theme-daily', '@astryxdesign/theme-neutral'],
+  ['@xds/theme-default', '@astryxdesign/theme-neutral'],
+  ['@xds/theme-gothic', '@astryxdesign/theme-gothic'],
+  ['@xds/theme-matcha', '@astryxdesign/theme-matcha'],
+  ['@xds/theme-neutral', '@astryxdesign/theme-neutral'],
+  ['@xds/theme-stone', '@astryxdesign/theme-stone'],
+  ['@xds/theme-y2k', '@astryxdesign/theme-y2k'],
+]);
+
+function renamePackageSpecifier(value) {
+  if (typeof value !== 'string') return value;
+  for (const [from, to] of PACKAGE_RENAMES) {
+    if (value === from) return to;
+    if (value.startsWith(from + '/')) return to + value.slice(from.length);
+  }
+  return value;
+}
+
+function rewriteLiteral(node) {
+  if (!node || typeof node.value !== 'string') return false;
+  const next = renamePackageSpecifier(node.value);
+  if (next === node.value) return false;
+  node.value = next;
+  return true;
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  root.find(j.ImportDeclaration).forEach(path => {
+    hasChanges = rewriteLiteral(path.node.source) || hasChanges;
+  });
+
+  root.find(j.ExportNamedDeclaration).forEach(path => {
+    hasChanges = rewriteLiteral(path.node.source) || hasChanges;
+  });
+
+  root.find(j.ExportAllDeclaration).forEach(path => {
+    hasChanges = rewriteLiteral(path.node.source) || hasChanges;
+  });
+
+  root.find(j.CallExpression).forEach(path => {
+    const isDynamicImport = path.node.callee.type === 'Import';
+    const isRequire =
+      path.node.callee.type === 'Identifier' &&
+      path.node.callee.name === 'require';
+    if (!isDynamicImport && !isRequire) return;
+    const [arg] = path.node.arguments;
+    if (arg?.type === 'StringLiteral' || arg?.type === 'Literal') {
+      hasChanges = rewriteLiteral(arg) || hasChanges;
+    }
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/commands/agent-docs.mjs

@@ -93,14 +93,55 @@ export function resolveAgentPaths(targetDir, agent) {
   return {inject: [], create: [searchPaths[searchPaths.length - 1]]};
 }
 
+/**
+ * Detect which styling system the consumer project has wired up, so the agent
+ * docs recommend a path that actually compiles in THIS project.
+ *
+ * `xstyle`/StyleX needs the StyleX compiler (the `@stylexjs/stylex` runtime
+ * alone throws at runtime → blank page); Tailwind utilities need Tailwind.
+ * Recommending either when it isn't configured yields unstyled or blank output.
+ * Plain CSS variables (via `style`/`className`) always work, so they're the
+ * safe default. Precedence: stylex (compiler wired) → tailwind → css.
+ *
+ * @param {string} targetDir
+ * @returns {'stylex' | 'tailwind' | 'css'}
+ */
+export function detectStylingSystem(targetDir) {
+  try {
+    const pkgPath = path.join(targetDir, 'package.json');
+    if (!fs.existsSync(pkgPath)) return 'css';
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+    const deps = {...pkg.dependencies, ...pkg.devDependencies};
+    // Key off a StyleX *compiler* plugin — the runtime alone won't render.
+    const stylexCompilers = [
+      '@stylexjs/babel-plugin',
+      'vite-plugin-stylex',
+      'unplugin-stylex',
+      '@stylexswc/unplugin',
+      '@stylexswc/nextjs-plugin',
+      'stylex-webpack',
+    ];
+    if (stylexCompilers.some(d => d in deps)) return 'stylex';
+    if ('tailwindcss' in deps) return 'tailwind';
+    return 'css';
+  } catch {
+    // Best-effort: default to the universally-safe CSS-variable path.
+    return 'css';
+  }
+}
+
 /**
  * Generate the agent cheat sheet from live CLI metadata.
  *
  * Structured as: workflow (behavioral) → rules (error prevention) → CLI reference.
  * Templates are positioned first in the workflow to teach agents the
  * "look at reference code" reflex before writing any UI.
+ *
+ * `stylingSystem` tailors the custom-styling guidance to what the project has
+ * configured (see {@link detectStylingSystem}) so the agent never reaches for a
+ * styling path that isn't compiled here.
  */
-export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPrefix()} = {}) {
+export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPrefix(), stylingSystem = 'css'} = {}) {
   const run = `${runPrefix} astryx`;
   const lines = [MARKER_START];
 
@@ -117,69 +158,57 @@ export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPre
     }
   }
 
-  // Header
-  lines.push(`Astryx v${version} — ${componentCount} components`);
+  // Header — state the CLI prefix once; commands below are shown as `astryx <cmd>`.
+  lines.push(`Astryx v${version} · ${componentCount} components`);
+  lines.push(`CLI: run every command as \`${run} <cmd>\` (shown below as \`astryx ...\`).`);
   lines.push('');
 
-  // Behavioral workflow — templates first, then component lookup
-  lines.push('Before writing any UI code:');
-  lines.push(`1. \`${run} template --list\` — find a related page pattern`);
-  lines.push(`2. \`${run} template <name> --skeleton\` — study layout structure (gap, padding, nesting)`);
-  lines.push(`3. \`${run} component <Name>\` — read props + examples for EVERY component you use`);
-  lines.push('');
-  lines.push('Templates are reference code — read them for composition patterns, not just scaffolding.');
-  lines.push('Full pages → dashboard (uses AppShell). Forms → contact-form. Tables → data-table. Settings → settings-sidebar.');
+  // Required setup — components ship precompiled CSS; without these imports
+  // everything renders unstyled. Theme is optional (a default ships in astryx.css).
+  lines.push('SETUP (once, in your app entry e.g. main.tsx) — without these, components render unstyled:');
+  lines.push('  import "@astryxdesign/core/reset.css";');
+  lines.push('  import "@astryxdesign/core/astryx.css";');
   lines.push('');
 
-  // Rules — inline, compact, prevents the top error categories
-  lines.push('No <div> anywhere — not for layout, not for wrappers, not for spacing. Use components.');
-  lines.push('Full-page shells → AppShell (not Layout). Sidebar nav → SideNav (not List).');
-  lines.push('No style={{}} — use the xstyle prop on components for custom styling.');
-  lines.push('If a component prop does what you need, use it — never replicate with CSS/stylex.');
-  lines.push(`No magic values — run \`${run} docs tokens\` for spacing/color/radius.`);
-  lines.push(`To change accent/brand colors: \`${run} theme\` — never override --astryx-color-* in :root.`);
+  // Workflow — `build` is the front door; discover before writing UI.
+  lines.push("WORKFLOW — discover, don't guess. Before writing UI:");
+  lines.push('1. `astryx build "<idea>"` — START HERE: returns a kit (closest [page] + [block]s + [component]s). No args = full playbook.');
+  lines.push('2. `astryx template <name> [--skeleton]` — scaffold the [page]/[block]s it named, or study their layout. Templates are reference code.');
+  lines.push('3. `astryx component <Name>` — props + examples for every component you use.');
   lines.push('');
 
-  // CLI quick reference
-  lines.push(`${run} component --list         ${componentCount} components by category`);
-  lines.push(`${run} component <Name>         props, types, examples`);
+  // Rules — the top error-preventers.
+  lines.push('RULES:');
+  lines.push('- No <div> — components do all layout/spacing. Full page → AppShell; sidebar nav → SideNav.');
+  // Styling guidance tailored to the project's configured system — never
+  // recommend a path that isn't compiled here (xstyle needs the StyleX compiler;
+  // utilities need Tailwind). Tokens are always the source of truth.
+  if (stylingSystem === 'stylex') {
+    lines.push('- Custom styling: component props first; else the xstyle prop / StyleX tokens (@astryxdesign/core/theme/tokens.stylex). No raw hex/px.');
+  } else if (stylingSystem === 'tailwind') {
+    lines.push('- Custom styling: component props first; else Tailwind utilities backed by tokens (bg-surface, text-primary, rounded-lg) via tailwind-theme.css. No raw hex/px.');
+  } else {
+    lines.push("- Custom styling: component props first; else style/className with tokens — var(--color-*|--spacing-*|--radius-*). No raw hex/px. (No StyleX/Tailwind compiler here — don't use xstyle/utility classes.)");
+  }
+  lines.push('- Tokens for every value (`astryx docs tokens`). Brand/accent via `astryx theme` — never override --color-* in :root.');
+  lines.push('');
 
-  // Doc topics from live discovery
+  // Command reference — build/template/component are covered in WORKFLOW above.
+  lines.push('MORE CLI:');
+  lines.push('  search "<query>"   find any component / hook / doc / template / block');
+  lines.push(`  component --list   ${componentCount} components by category`);
+  lines.push('  template --list    page + block recipes');
   const docsDir = path.join(CLI_ROOT, 'docs');
   if (fs.existsSync(docsDir)) {
-    for (const file of fs.readdirSync(docsDir).sort()) {
-      const match = file.match(/^(\w+)\.doc\.mjs$/);
-      if (!match) continue;
-      const topic = match[1];
-      let desc = topic;
-      try {
-        const fileContent = fs.readFileSync(path.join(docsDir, file), 'utf-8');
-        const descMatch = fileContent.match(/description:\s*['"](.+?)['"]/);
-        if (descMatch) desc = descMatch[1];
-      } catch {
-        // Best-effort: fall back to the topic name if the file is unreadable.
-      }
-      if (desc.length > 50) desc = desc.slice(0, 47) + '...';
-      lines.push(`${run} docs ${topic.padEnd(20)} ${desc}`);
-    }
-  }
-
-  // Templates
-  const templatesDir = path.join(CLI_ROOT, 'templates');
-  if (fs.existsSync(templatesDir)) {
-    const templates = fs.readdirSync(templatesDir, {withFileTypes: true})
-      .filter(e => e.isDirectory())
-      .map(e => e.name)
+    const topics = fs.readdirSync(docsDir)
+      .map(f => f.match(/^(\w+)\.doc\.mjs$/))
+      .filter(Boolean)
+      .map(m => m[1])
       .sort();
-    if (templates.length > 0) {
-      lines.push(`${run} template --list           page recipes with component lists`);
-      lines.push(`${run} template <name> [path]     scaffold from template`);
-    }
+    if (topics.length > 0) lines.push(`  docs <topic>       ${topics.join(', ')}`);
   }
-
-  lines.push(`${run} swizzle <Name>            eject source (--gap to report why)`);
-  lines.push(`${run} upgrade --apply            codemods after version bump`);
-  lines.push(`after @astryxdesign/core bump, always run ${run} upgrade --apply`);
+  lines.push('  swizzle <Name>     eject component source (--gap reports why)');
+  lines.push('  upgrade --apply    run after any @astryxdesign/core bump');
   lines.push(MARKER_END);
 
   return lines.join('\n');
@@ -258,7 +287,10 @@ export function injectXdsBlock(filePath, compressedIndex, {createIfMissing = fal
  */
 export function injectAgentsMd(targetDir, version) {
   const agentsPath = path.join(targetDir, AGENTS_MD);
-  const compressedIndex = generateCompressedIndex(version, {coreDir: findCoreDir(targetDir)});
+  const compressedIndex = generateCompressedIndex(version, {
+    coreDir: findCoreDir(targetDir),
+    stylingSystem: detectStylingSystem(targetDir),
+  });
   injectXdsBlock(agentsPath, compressedIndex, {
     createIfMissing: true,
     header: `# AGENTS.md\n\nProject-specific guidance for AI coding agents.`,
@@ -273,7 +305,10 @@ export function injectAgentsMd(targetDir, version) {
  */
 export function injectClaudeMd(targetDir, version) {
   const claudePath = path.join(targetDir, CLAUDE_MD);
-  const compressedIndex = generateCompressedIndex(version, {coreDir: findCoreDir(targetDir)});
+  const compressedIndex = generateCompressedIndex(version, {
+    coreDir: findCoreDir(targetDir),
+    stylingSystem: detectStylingSystem(targetDir),
+  });
   return injectXdsBlock(claudePath, compressedIndex);
 }
 
@@ -356,7 +391,8 @@ export function installAgentDocs(targetDir, {zh = false, lang, agent, paths, onl
   const coreDir = findCoreDir(targetDir);
   const version = getXdsVersion(coreDir);
   const runPrefix = getRunPrefix(targetDir);
-  const compressedIndex = generateCompressedIndex(version, {coreDir, zh, lang, runPrefix});
+  const stylingSystem = detectStylingSystem(targetDir);
+  const compressedIndex = generateCompressedIndex(version, {coreDir, zh, lang, runPrefix, stylingSystem});
   const written = [];
 
   // Explicit paths override everything

package/src/commands/agent-docs.path-safety.test.mjs

@@ -20,7 +20,7 @@ import {PathSafetyError} from '../utils/path-safety.mjs';
 
 let tmpDir;
 beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xds-agent-docs-paths-'));
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-agent-docs-paths-'));
 });
 afterEach(() => {
   fs.rmSync(tmpDir, {recursive: true, force: true});

package/src/commands/agent-docs.test.mjs

@@ -6,6 +6,7 @@ import * as path from 'node:path';
 import * as os from 'node:os';
 import {
   generateCompressedIndex,
+  detectStylingSystem,
   getXdsVersion,
   installAgentDocs,
   injectAgentsMd,
@@ -20,7 +21,7 @@ import {
 let tmpDir;
 
 beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xds-agent-docs-test-'));
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-agent-docs-test-'));
 });
 
 afterEach(() => {
@@ -39,31 +40,86 @@ describe('generateCompressedIndex', () => {
   it('includes theme nudge rule', () => {
     const result = generateCompressedIndex('1.0.0');
     expect(result).toMatch(/astryx theme/);
-    expect(result).toMatch(/never override --astryx-color/);
+    expect(result).toMatch(/never override --color-/);
+  });
+
+  it('defaults to the CSS-variable styling path (no compiler)', () => {
+    const result = generateCompressedIndex('1.0.0');
+    expect(result).toMatch(/style\/className with tokens/);
+    expect(result).toMatch(/var\(--color-\*/);
+    // Must NOT push xstyle when no StyleX compiler is present.
+    expect(result).not.toMatch(/xstyle prop/);
+  });
+
+  it('recommends xstyle when StyleX is configured', () => {
+    const result = generateCompressedIndex('1.0.0', {stylingSystem: 'stylex'});
+    expect(result).toMatch(/xstyle prop \/ StyleX tokens/);
+  });
+
+  it('recommends Tailwind utilities when Tailwind is configured', () => {
+    const result = generateCompressedIndex('1.0.0', {stylingSystem: 'tailwind'});
+    expect(result).toMatch(/Tailwind utilities backed by tokens/);
+    expect(result).toMatch(/tailwind-theme\.css/);
   });
 
   it('includes upgrade command and migration rule', () => {
     const result = generateCompressedIndex('1.0.0');
-    expect(result).toContain('astryx upgrade');
-    expect(result).toContain('astryx upgrade --apply');
-    expect(result).toMatch(/always run .+ astryx upgrade --apply/);
+    expect(result).toContain('upgrade --apply');
+    expect(result).toMatch(/after any @astryxdesign\/core bump/);
   });
 
-  it('uses custom runPrefix when provided', () => {
+  it('states the runPrefix once in the CLI header', () => {
     const result = generateCompressedIndex('1.0.0', {runPrefix: 'yarn'});
-    expect(result).toContain('yarn astryx component <Name>');
-    expect(result).toContain('yarn astryx upgrade --apply');
-    expect(result).toContain('after @astryxdesign/core bump, always run yarn astryx upgrade --apply');
+    expect(result).toContain('yarn astryx <cmd>');
     expect(result).not.toContain('npx astryx');
   });
 
   it('uses pnpm exec prefix', () => {
     const result = generateCompressedIndex('1.0.0', {runPrefix: 'pnpm exec'});
-    expect(result).toContain('pnpm exec astryx component <Name>');
+    expect(result).toContain('pnpm exec astryx <cmd>');
     expect(result).not.toContain('npx astryx');
   });
 });
 
+describe('detectStylingSystem', () => {
+  function writePkg(deps) {
+    fs.writeFileSync(
+      path.join(tmpDir, 'package.json'),
+      JSON.stringify({name: 'x', devDependencies: deps}),
+    );
+  }
+
+  it('defaults to css when no package.json', () => {
+    expect(detectStylingSystem(tmpDir)).toBe('css');
+  });
+
+  it('returns css for a plain project', () => {
+    writePkg({react: '19.0.0', vite: '6.0.0'});
+    expect(detectStylingSystem(tmpDir)).toBe('css');
+  });
+
+  it('detects stylex when the compiler plugin is present', () => {
+    writePkg({'@stylexjs/babel-plugin': '0.0.1'});
+    expect(detectStylingSystem(tmpDir)).toBe('stylex');
+  });
+
+  it('detects tailwind when tailwindcss is present', () => {
+    writePkg({tailwindcss: '4.0.0'});
+    expect(detectStylingSystem(tmpDir)).toBe('tailwind');
+  });
+
+  it('does NOT treat the StyleX runtime alone as a compiler', () => {
+    // Only the runtime, no compiler plugin → must stay on the safe css path.
+    writePkg({'@stylexjs/stylex': '0.0.1'});
+    expect(detectStylingSystem(tmpDir)).toBe('css');
+  });
+
+  it('prefers stylex over tailwind when both are configured', () => {
+    writePkg({'@stylexjs/babel-plugin': '0.0.1', tailwindcss: '4.0.0'});
+    expect(detectStylingSystem(tmpDir)).toBe('stylex');
+  });
+});
+
 describe('getXdsVersion', () => {
   it('reads version from core package.json', () => {
     const coreDir = path.join(tmpDir, 'core');

package/src/commands/build-theme.import-path.test.mjs

@@ -70,7 +70,7 @@ beforeAll(() => {
 
 let tmpDir;
 beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xds-build-theme-import-path-'));
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-build-theme-import-path-'));
 });
 afterEach(() => {
   fs.rmSync(tmpDir, {recursive: true, force: true});