@astryxdesign/cli 0.1.0-canary.e2d38fb → 0.1.0-canary.eb78210

package/docs/theme.doc.dense.mjs

@@ -5,8 +5,8 @@
 export const docsDense = {
   description: 'Theme provider, custom themes, light/dark, component overrides',
   sections: [
-    { title: 'Quick Start', content: [null, null, null, null, { type: 'prose', text: 'default import = runtime injection. /built import = pre-compiled CSS (pair with theme.css).' }] },
-    { title: 'Themes', content: [null, null, { type: 'prose', text: 'published: neutral (start here), butter, chocolate, gothic (dark-only), matcha, stone, y2k. @astryxdesign/theme-{name} = source (runtime). @astryxdesign/theme-{name}/built = optimized (+ theme.css).' }] },
+    { title: 'Quick Start', content: [null, null, { type: 'prose', text: 'default import = runtime injection. /built import = pre-compiled CSS (pair with theme.css).' }] },
+    { title: 'Themes', content: [null, { type: 'prose', text: 'published: neutral (start here), butter, chocolate, gothic (dark-only), matcha, stone, y2k. @astryxdesign/theme-{name} = source (runtime). @astryxdesign/theme-{name}/built = optimized (+ theme.css).' }] },
     { title: 'Props', content: [null] },
     { title: 'Custom Theme', content: [{ type: 'prose', text: 'CLI wizard or manual defineTheme. only override tokens that differ.' }, null] },
     { title: 'defineTheme', content: [{ type: 'prose', text: 'scale configs (color, typography, radius, motion) + explicit token overrides + component overrides. color derives full palette from accent hex via HCT.' }, null, null] },

package/docs/theme.doc.mjs

@@ -14,12 +14,6 @@ export const docs = {
       title: 'Quick Start',
   category: 'guide',
       content: [
-        {
-          type: 'code',
-          lang: 'bash',
-          label: 'Install a theme package',
-          code: 'npm install @astryxdesign/theme-neutral',
-        },
         {
           type: 'code',
           lang: 'tsx',
@@ -51,10 +45,6 @@ function App() {
   );
 }`,
         },
-        {
-          type: 'prose',
-          text: 'Each theme ships as its own npm package. Install the one you want, then wrap your app in `<Theme>` — the same pattern works for every theme; just swap the package and import name.',
-        },
         {
           type: 'prose',
           text: 'The default import uses runtime style injection, which works everywhere with no build step. The `/built` import skips injection and relies on the pre-compiled CSS file for better performance and SSR support.',
@@ -65,10 +55,6 @@ function App() {
       title: 'Available Themes',
   category: 'guide',
       content: [
-        {
-          type: 'prose',
-          text: 'Install the theme package you want with `npm install @astryxdesign/theme-{name}`, then import its theme object as shown below.',
-        },
         {
           type: 'table',
           headers: ['Theme', 'Import', 'Description'],

package/docs/theme.doc.zh.mjs

@@ -5,8 +5,8 @@
 export const docsZh = {
   description: 'Theme 提供者、自定义主题、亮/暗模式和组件样式覆盖。',
   sections: [
-    { title: '快速开始', content: [null, null, null, null, { type: 'prose', text: '默认导入使用运行时样式注入。/built 导入使用预编译 CSS（需配合 theme.css）。' }] },
-    { title: '可用主题', content: [null, null, { type: 'prose', text: '已发布主题：neutral（推荐起点）、butter、chocolate、gothic（仅暗色）、matcha、stone、y2k。@astryxdesign/theme-{name} = 源码版（运行时注入）。@astryxdesign/theme-{name}/built = 优化版（配合 theme.css）。' }] },
+    { title: '快速开始', content: [null, null, { type: 'prose', text: '默认导入使用运行时样式注入。/built 导入使用预编译 CSS（需配合 theme.css）。' }] },
+    { title: '可用主题', content: [null, { type: 'prose', text: '已发布主题：neutral（推荐起点）、butter、chocolate、gothic（仅暗色）、matcha、stone、y2k。@astryxdesign/theme-{name} = 源码版（运行时注入）。@astryxdesign/theme-{name}/built = 优化版（配合 theme.css）。' }] },
     { title: 'Theme 属性', content: [null] },
     { title: '创建自定义主题', content: [{ type: 'prose', text: '使用 CLI 向导（推荐）或手动 defineTheme。只覆盖与默认值不同的令牌。' }, null] },
     { title: 'defineTheme', content: [{ type: 'prose', text: '支持比例配置（typography、radius、motion）+ 显式令牌覆盖 + 组件覆盖。' }, null, null] },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.0-canary.e2d38fb",
+  "version": "0.1.0-canary.eb78210",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -15,7 +15,7 @@
     "url": "https://github.com/facebook/astryx/issues"
   },
   "keywords": [
-    "astryx",
+    "xds",
     "cli",
     "design-system",
     "init",
@@ -54,9 +54,9 @@
     "jscodeshift": "^17.3.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.0-canary.e2d38fb",
-    "@astryxdesign/lab": "0.1.0-canary.e2d38fb",
-    "@astryxdesign/theme-neutral": "0.1.0-canary.e2d38fb"
+    "@astryxdesign/core": "0.1.0-canary.eb78210",
+    "@astryxdesign/lab": "0.1.0-canary.eb78210",
+    "@astryxdesign/theme-neutral": "0.1.0-canary.eb78210"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -70,9 +70,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.0-canary.e2d38fb",
-    "@astryxdesign/lab": "0.1.0-canary.e2d38fb",
-    "@astryxdesign/theme-neutral": "0.1.0-canary.e2d38fb"
+    "@astryxdesign/core": "0.1.0-canary.eb78210",
+    "@astryxdesign/lab": "0.1.0-canary.eb78210",
+    "@astryxdesign/theme-neutral": "0.1.0-canary.eb78210"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

package/src/codemods/__tests__/registry.test.mjs

@@ -16,7 +16,6 @@ describe('registry', () => {
         '0.0.13',
         '0.0.14',
         '0.0.15',
-        '0.1.0',
       ]);
     });
   });

package/src/codemods/registry.mjs

@@ -17,7 +17,6 @@ const registry = new Map([
   ['0.0.13', () => import('./transforms/v0.0.13/index.mjs')],
   ['0.0.14', () => import('./transforms/v0.0.14/index.mjs')],
   ['0.0.15', () => import('./transforms/v0.0.15/index.mjs')],
-  ['0.1.0', () => import('./transforms/v0.1.0/index.mjs')],
 ]);
 
 // Re-export from the shared utility so registry callers and other consumers

package/src/codemods/runner.mjs

@@ -11,6 +11,7 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import * as p from '@clack/prompts';
+import {getRunPrefix} from '../utils/package-manager.mjs';
 import {humanLog} from '../lib/json.mjs';
 
 // Known corruption patterns that indicate a broken transform.
@@ -86,6 +87,39 @@ function findSourceFiles(dir) {
   return results.sort();
 }
 
+/**
+ * Detect the project's formatter and run it on changed files.
+ * Tries prettier, then biome. Silently skips if none found.
+ *
+ * @param {string[]} files - Absolute paths to files that were modified
+ * @param {boolean} [silent] - Suppress human-facing output
+ */
+async function formatChangedFiles(files, silent = false) {
+  if (files.length === 0) return;
+
+  const {execSync} = await import('node:child_process');
+  const fileArgs = files.map(f => `"${f}"`).join(' ');
+  const prefix = getRunPrefix();
+
+  const formatters = [
+    {name: 'prettier', cmd: `${prefix} prettier --write ${fileArgs}`},
+    {name: 'biome', cmd: `${prefix} biome format --write ${fileArgs}`},
+  ];
+
+  for (const {name, cmd} of formatters) {
+    try {
+      execSync(cmd, {stdio: 'pipe', timeout: 30000});
+      if (!silent)
+        p.log.info(
+          `Formatted ${files.length} file${files.length === 1 ? '' : 's'} with ${name}`,
+        );
+      return;
+    } catch {
+      // Formatter not available or failed — try next
+    }
+  }
+}
+
 /**
  * Validate transform output before writing to disk.
  *
@@ -128,86 +162,6 @@ export function validateOutput(result, source, j, {parse = true} = {}) {
   return {valid: true};
 }
 
-function isConfigCodemod(transformEntry) {
-  return transformEntry.meta?.codemodType === 'config';
-}
-
-const CONFIG_CODEMOD_PATHS = new Set([
-  'package.json',
-  'astryx.config.mjs',
-  'xds.config.mjs',
-]);
-
-function resolveConfigPath(relativePath) {
-  if (!CONFIG_CODEMOD_PATHS.has(relativePath)) {
-    throw new Error(`unsupported config codemod path: ${relativePath}`);
-  }
-  return path.resolve(process.cwd(), relativePath);
-}
-
-function readOptionalConfigFile(relativePath) {
-  const fullPath = resolveConfigPath(relativePath);
-  if (!fs.existsSync(fullPath)) return null;
-  return {path: relativePath, source: fs.readFileSync(fullPath, 'utf-8')};
-}
-
-function getConfigCodemodContext() {
-  return {
-    packageJson: readOptionalConfigFile('package.json'),
-    astryxConfig: readOptionalConfigFile('astryx.config.mjs'),
-    xdsConfig: readOptionalConfigFile('xds.config.mjs'),
-  };
-}
-
-async function runConfigCodemod(transformEntry, {apply, log}) {
-  const {transform} = transformEntry;
-  const api = {config: getConfigCodemodContext()};
-  const result = await transform({path: process.cwd(), source: ''}, api);
-  const errors = result?.errors ?? [];
-  if (errors.length > 0) {
-    for (const error of errors) {
-      log.error(`    ✗ ${error.file ?? 'config'} — ${error.error}`);
-    }
-    return {filesChanged: 0, errors};
-  }
-
-  const changes = result?.changes ?? [];
-  if (changes.length === 0) return {filesChanged: 0, errors: []};
-
-  for (const change of changes) {
-    const fullPath = resolveConfigPath(change.path);
-    if (change.delete) {
-      if (apply) fs.rmSync(fullPath, {force: true});
-      log[apply ? 'success' : 'warn'](
-        `    ${apply ? '✓' : '~'} ${change.path} (delete${apply ? '' : ', dry run'})`,
-      );
-      continue;
-    }
-
-    if (apply) {
-      fs.writeFileSync(fullPath, change.source, 'utf-8');
-    }
-    log[apply ? 'success' : 'warn'](
-      `    ${apply ? '✓' : '~'} ${change.path}${apply ? '' : ' (would change)'}`,
-    );
-  }
-
-  if (changes.length > 0) {
-    const verb = apply ? 'Updated' : 'Would update';
-    log.info(
-      `  ${verb} ${changes.length} config file${changes.length === 1 ? '' : 's'}`,
-    );
-  }
-
-  return {
-    filesChanged: changes.length,
-    writtenFiles: changes
-      .filter(change => !change.delete && path.extname(change.path) !== '.json')
-      .map(change => resolveConfigPath(change.path)),
-    errors: [],
-  };
-}
-
 /**
  * Run codemods against source files.
  *
@@ -243,12 +197,18 @@ export async function runCodemods(
 
   if (files.length === 0) {
     log.warn('No source files found.');
-  } else {
-    log.info(
-      `Found ${files.length} source file${files.length === 1 ? '' : 's'}`,
-    );
+    return {
+      ok: true,
+      totalFilesChanged: 0,
+      totalTransformsApplied: 0,
+      errors: [],
+      writtenFiles: [],
+      skippedOptional: [],
+    };
   }
 
+  log.info(`Found ${files.length} source file${files.length === 1 ? '' : 's'}`);
+
   // Dynamically import jscodeshift
   const jscodeshift = (await import('jscodeshift')).default;
 
@@ -279,24 +239,6 @@ export async function runCodemods(
 
       log.info(`  ${meta.title}`);
 
-      if (isConfigCodemod(transformEntry)) {
-        const result = await runConfigCodemod(transformEntry, {apply, log});
-        if (result.errors.length > 0) {
-          for (const error of result.errors) {
-            errors.push({
-              file: error.file ?? 'config',
-              codemod: name,
-              error: error.error,
-            });
-          }
-        } else if (result.filesChanged > 0) {
-          totalFilesChanged += result.filesChanged;
-          totalTransformsApplied += result.filesChanged;
-          writtenFiles.push(...(result.writtenFiles ?? []));
-        }
-        continue;
-      }
-
       let filesChanged = 0;
 
       for (const filePath of files) {
@@ -381,6 +323,12 @@ export async function runCodemods(
     }
   }
 
+  // Post-codemod formatting: run the project's formatter on changed files
+  // so codemods don't introduce style drift (jscodeshift may change quotes, etc.)
+  if (apply && writtenFiles.length > 0) {
+    await formatChangedFiles(writtenFiles, silent);
+  }
+
   if (totalValidationBlocked > 0) {
     log.warn(
       `${totalValidationBlocked} file${totalValidationBlocked === 1 ? ' was' : 's were'} blocked by validation — no changes written to ${totalValidationBlocked === 1 ? 'that file' : 'those files'}.`,
@@ -418,9 +366,7 @@ export async function runCodemods(
       if (meta.description) {
         log.info(`    ${meta.description}`);
       }
-      log.info(
-        `    Run: astryx upgrade --codemod ${name} --path <dir> --apply`,
-      );
+      log.info(`    Run: astryx upgrade --codemod ${name} --path <dir> --apply`);
     }
   }
 

package/src/commands/agent-docs.mjs

@@ -93,55 +93,14 @@ 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(), stylingSystem = 'css'} = {}) {
+export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPrefix()} = {}) {
   const run = `${runPrefix} astryx`;
   const lines = [MARKER_START];
 
@@ -158,57 +117,69 @@ export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPre
     }
   }
 
-  // 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 ...\`).`);
+  // Header
+  lines.push(`Astryx v${version} — ${componentCount} components`);
   lines.push('');
 
-  // 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";');
+  // 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('');
-
-  // 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('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.');
   lines.push('');
 
-  // 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.');
+  // 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.`);
   lines.push('');
 
-  // 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');
+  // CLI quick reference
+  lines.push(`${run} component --list         ${componentCount} components by category`);
+  lines.push(`${run} component <Name>         props, types, examples`);
+
+  // Doc topics from live discovery
   const docsDir = path.join(CLI_ROOT, 'docs');
   if (fs.existsSync(docsDir)) {
-    const topics = fs.readdirSync(docsDir)
-      .map(f => f.match(/^(\w+)\.doc\.mjs$/))
-      .filter(Boolean)
-      .map(m => m[1])
+    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)
       .sort();
-    if (topics.length > 0) lines.push(`  docs <topic>       ${topics.join(', ')}`);
+    if (templates.length > 0) {
+      lines.push(`${run} template --list           page recipes with component lists`);
+      lines.push(`${run} template <name> [path]     scaffold from template`);
+    }
   }
-  lines.push('  swizzle <Name>     eject component source (--gap reports why)');
-  lines.push('  upgrade --apply    run after any @astryxdesign/core bump');
+
+  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(MARKER_END);
 
   return lines.join('\n');
@@ -287,10 +258,7 @@ 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),
-    stylingSystem: detectStylingSystem(targetDir),
-  });
+  const compressedIndex = generateCompressedIndex(version, {coreDir: findCoreDir(targetDir)});
   injectXdsBlock(agentsPath, compressedIndex, {
     createIfMissing: true,
     header: `# AGENTS.md\n\nProject-specific guidance for AI coding agents.`,
@@ -305,10 +273,7 @@ export function injectAgentsMd(targetDir, version) {
  */
 export function injectClaudeMd(targetDir, version) {
   const claudePath = path.join(targetDir, CLAUDE_MD);
-  const compressedIndex = generateCompressedIndex(version, {
-    coreDir: findCoreDir(targetDir),
-    stylingSystem: detectStylingSystem(targetDir),
-  });
+  const compressedIndex = generateCompressedIndex(version, {coreDir: findCoreDir(targetDir)});
   return injectXdsBlock(claudePath, compressedIndex);
 }
 
@@ -391,8 +356,7 @@ export function installAgentDocs(targetDir, {zh = false, lang, agent, paths, onl
   const coreDir = findCoreDir(targetDir);
   const version = getXdsVersion(coreDir);
   const runPrefix = getRunPrefix(targetDir);
-  const stylingSystem = detectStylingSystem(targetDir);
-  const compressedIndex = generateCompressedIndex(version, {coreDir, zh, lang, runPrefix, stylingSystem});
+  const compressedIndex = generateCompressedIndex(version, {coreDir, zh, lang, runPrefix});
   const written = [];
 
   // Explicit paths override everything

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

@@ -6,7 +6,6 @@ import * as path from 'node:path';
 import * as os from 'node:os';
 import {
   generateCompressedIndex,
-  detectStylingSystem,
   getXdsVersion,
   installAgentDocs,
   injectAgentsMd,
@@ -40,86 +39,31 @@ describe('generateCompressedIndex', () => {
   it('includes theme nudge rule', () => {
     const result = generateCompressedIndex('1.0.0');
     expect(result).toMatch(/astryx theme/);
-    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/);
+    expect(result).toMatch(/never override --astryx-color/);
   });
 
   it('includes upgrade command and migration rule', () => {
     const result = generateCompressedIndex('1.0.0');
-    expect(result).toContain('upgrade --apply');
-    expect(result).toMatch(/after any @astryxdesign\/core bump/);
+    expect(result).toContain('astryx upgrade');
+    expect(result).toContain('astryx upgrade --apply');
+    expect(result).toMatch(/always run .+ astryx upgrade --apply/);
   });
 
-  it('states the runPrefix once in the CLI header', () => {
+  it('uses custom runPrefix when provided', () => {
     const result = generateCompressedIndex('1.0.0', {runPrefix: 'yarn'});
-    expect(result).toContain('yarn astryx <cmd>');
+    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).not.toContain('npx astryx');
   });
 
   it('uses pnpm exec prefix', () => {
     const result = generateCompressedIndex('1.0.0', {runPrefix: 'pnpm exec'});
-    expect(result).toContain('pnpm exec astryx <cmd>');
+    expect(result).toContain('pnpm exec astryx component <Name>');
     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');