@catchdrift/cli 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catchdrift/cli",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "CLI for Drift — install, check, and manage design system coverage for any React app.",
   "keywords": [
     "design-system",

package/src/commands/init.mjs

@@ -121,12 +121,12 @@ export async function init(argv) {
   // ── Step 2c: Bootstrap foundation picker ─────────────────────────────────────
   // Fires when user has no existing DS
   const DS_FOUNDATIONS = [
-    { value: 'shadcn',  label: 'shadcn/ui',       hint: 'Radix + Tailwind — copy-paste components',         pkg: '@radix-ui/react-dialog', install: 'npx shadcn@latest init',                                          docs: 'https://ui.shadcn.com' },
-    { value: 'mui',     label: 'Material UI',      hint: 'Google Material Design — battle-tested ecosystem',  pkg: '@mui/material',          install: 'npm install @mui/material @emotion/react @emotion/styled',          docs: 'https://mui.com/material-ui/' },
-    { value: 'antd',    label: 'Ant Design',       hint: 'Enterprise-grade — rich component set',             pkg: 'antd',                   install: 'npm install antd',                                                 docs: 'https://ant.design/components/overview/' },
-    { value: 'chakra',  label: 'Chakra UI',        hint: 'Accessible, composable — great DX',                pkg: '@chakra-ui/react',       install: 'npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion', docs: 'https://chakra-ui.com/docs/components' },
-    { value: 'radix',   label: 'Radix Themes',     hint: 'Headless primitives + opinionated theme layer',     pkg: '@radix-ui/themes',       install: 'npm install @radix-ui/themes',                                     docs: 'https://www.radix-ui.com/themes' },
-    { value: 'primer',  label: 'Primer (GitHub)',   hint: "GitHub's DS — clean, minimal, production-grade",   pkg: '@primer/react',          install: 'npm install @primer/react styled-components',                      docs: 'https://primer.style/components' },
+    { value: 'shadcn',  label: 'shadcn/ui',       hint: 'Radix + Tailwind — copy-paste components',         pkg: '@radix-ui/react-dialog', install: 'npx shadcn@latest init',                                          installAuto: null,                                                                            docs: 'https://ui.shadcn.com',               figmaCommunity: 'shadcn/ui' },
+    { value: 'mui',     label: 'Material UI',      hint: 'Google Material Design — battle-tested ecosystem',  pkg: '@mui/material',          install: 'npm install @mui/material @emotion/react @emotion/styled',          installAuto: '@mui/material @emotion/react @emotion/styled',                                  docs: 'https://mui.com/material-ui/',        figmaCommunity: 'Material UI MUI' },
+    { value: 'antd',    label: 'Ant Design',       hint: 'Enterprise-grade — rich component set',             pkg: 'antd',                   install: 'npm install antd',                                                 installAuto: 'antd',                                                                          docs: 'https://ant.design/components/overview/', figmaCommunity: 'Ant Design' },
+    { value: 'chakra',  label: 'Chakra UI',        hint: 'Accessible, composable — great DX',                pkg: '@chakra-ui/react',       install: 'npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion', installAuto: '@chakra-ui/react @emotion/react @emotion/styled framer-motion', docs: 'https://chakra-ui.com/docs/components', figmaCommunity: 'Chakra UI' },
+    { value: 'radix',   label: 'Radix Themes',     hint: 'Headless primitives + opinionated theme layer',     pkg: '@radix-ui/themes',       install: 'npm install @radix-ui/themes',                                     installAuto: '@radix-ui/themes',                                                              docs: 'https://www.radix-ui.com/themes',     figmaCommunity: 'Radix Themes' },
+    { value: 'primer',  label: 'Primer (GitHub)',   hint: "GitHub's DS — clean, minimal, production-grade",   pkg: '@primer/react',          install: 'npm install @primer/react styled-components',                      installAuto: '@primer/react styled-components',                                               docs: 'https://primer.style/components',     figmaCommunity: 'GitHub Primer' },
   ]
 
   let chosenFoundation = null
@@ -146,8 +146,59 @@ export async function init(argv) {
     chosenFoundation = DS_FOUNDATIONS.find(f => f.value === foundationChoice)
 
     p.log.success(`${chosenFoundation.label} selected — Drift will track it via dsPackages.`)
-    p.log.info(`Install it now or later:\n  ${pc.bold(chosenFoundation.install)}`)
-    p.log.info(`Docs + live preview: ${pc.cyan(chosenFoundation.docs)}`)
+
+    // ── Auto-install the foundation ─────────────────────────────────────────────
+    if (chosenFoundation.installAuto) {
+      // Non-interactive: npm install — run automatically
+      const doInstall = await p.confirm({
+        message: `Install ${chosenFoundation.label} now? (${chosenFoundation.install})`,
+        initialValue: true,
+      })
+      if (p.isCancel(doInstall)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+
+      if (doInstall) {
+        const pkgManager =
+          existsSync(join(cwd, 'pnpm-lock.yaml')) ? 'pnpm add' :
+          existsSync(join(cwd, 'yarn.lock'))      ? 'yarn add' : 'npm install'
+        const installCmd = `${pkgManager} ${chosenFoundation.installAuto}`
+        spinner.start(`Installing ${chosenFoundation.label}...`)
+        try {
+          execSync(installCmd, { cwd, stdio: 'pipe' })
+          spinner.stop(`${chosenFoundation.label} installed ✓`)
+        } catch (err) {
+          const stderr = err.stderr?.toString() || ''
+          if (stderr.includes('EACCES') || stderr.includes('root-owned')) {
+            spinner.stop(pc.yellow(`Permission error — run: sudo chown -R $(id -u):$(id -g) ~/.npm  then re-run catchdrift init`))
+          } else {
+            spinner.stop(pc.yellow(`Install failed — run manually: ${chosenFoundation.install}`))
+          }
+        }
+      }
+    } else {
+      // shadcn is interactive — user must run it themselves
+      p.log.info(`shadcn/ui requires its own interactive setup:\n  ${pc.bold(chosenFoundation.install)}\n  Run this after catchdrift finishes, then run ${pc.bold('npx @catchdrift/cli sync')}`)
+    }
+
+    // ── Figma for fresh users ────────────────────────────────────────────────────
+    console.log('')
+    p.log.info(
+      `Want to connect a Figma file? This lets Drift link every component back to its Figma source.\n` +
+      pc.dim(`  ${chosenFoundation.label} has an official Figma community library — great starting point.\n`) +
+      pc.dim(`  1. Go to figma.com/community and search "${chosenFoundation.figmaCommunity}"\n`) +
+      pc.dim(`  2. Click "Open in Figma" to duplicate it to your workspace\n`) +
+      pc.dim(`  3. Paste the file URL below`)
+    )
+
+    const wantFigmaFresh = await p.confirm({
+      message: 'Connect a Figma file now?',
+      initialValue: false,
+    })
+    if (p.isCancel(wantFigmaFresh)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+    if (wantFigmaFresh) {
+      sources.push('figma')
+    } else {
+      console.log(pc.dim('  Skipping Figma. Re-run npx @catchdrift/cli init later to add it.'))
+    }
   }
 
   // ── Storybook nudge — fire whenever Storybook isn't in the setup ─────────────
@@ -165,17 +216,37 @@ export async function init(argv) {
     if (p.isCancel(setupSB)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
 
     if (setupSB) {
-      console.log(pc.dim('\n  Running npx storybook@latest init — follow the prompts:\n'))
-      try {
-        // Use inherit so the user can interact with Storybook's framework prompts
-        execSync('npx storybook@latest init', { cwd, stdio: 'inherit' })
-        p.log.success('Storybook installed — run `npm run storybook` to start it on :6006')
-        sources.push('storybook')
-      } catch {
-        p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
+      // Detect root-owned npm cache before spawning Storybook
+      const cacheOk = checkNpmCache()
+      if (!cacheOk) {
+        p.log.warn(
+          'npm cache is owned by root — Storybook install will fail.\n' +
+          pc.bold('  Fix it first by running:\n') +
+          `    sudo chown -R $(id -u):$(id -g) ~/.npm\n` +
+          `  Then re-run: ${pc.bold('npx @catchdrift/cli init')}`
+        )
+      } else {
+        console.log(pc.dim('\n  Running npx storybook@latest init — follow the prompts:\n'))
+        try {
+          // Use inherit so the user can interact with Storybook's framework prompts
+          execSync('npx storybook@latest init', { cwd, stdio: 'inherit' })
+          p.log.success('Storybook installed — run `npm run storybook` to start it on :6006')
+          sources.push('storybook')
+        } catch (err) {
+          const stderr = (err.stderr?.toString() || '') + (err.stdout?.toString() || '')
+          if (stderr.includes('EACCES') || stderr.includes('root-owned')) {
+            p.log.warn(
+              'npm cache permission error.\n' +
+              `  Fix: sudo chown -R $(id -u):$(id -g) ~/.npm\n` +
+              `  Then re-run: npx @catchdrift/cli init`
+            )
+          } else {
+            p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
+          }
+        }
       }
     } else {
-      p.log.info('Skipping Storybook. Run `npx storybook@latest init` when ready, then re-run `npx catchdrift init`.')
+      p.log.info('Skipping Storybook. Run `npx storybook@latest init` when ready, then re-run `npx @catchdrift/cli init`.')
     }
   }
 
@@ -188,19 +259,38 @@ export async function init(argv) {
     if (p.isCancel(installNow)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
 
     if (installNow) {
-      console.log(pc.dim('\n  Running npx storybook@latest init — follow the prompts:\n'))
-      try {
-        execSync('npx storybook@latest init', { cwd, stdio: 'inherit' })
-        p.log.success('Storybook installed — run `npm run storybook` to start it on :6006')
-      } catch {
-        p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
-        // Remove storybook from sources so we don't ask for a URL that doesn't exist yet
+      const cacheOk = checkNpmCache()
+      if (!cacheOk) {
+        p.log.warn(
+          'npm cache is owned by root — Storybook install will fail.\n' +
+          pc.bold('  Fix it first:\n') +
+          `    sudo chown -R $(id -u):$(id -g) ~/.npm\n` +
+          `  Then re-run: ${pc.bold('npx @catchdrift/cli init')}`
+        )
         sources.splice(sources.indexOf('storybook'), 1)
+      } else {
+        console.log(pc.dim('\n  Running npx storybook@latest init — follow the prompts:\n'))
+        try {
+          execSync('npx storybook@latest init', { cwd, stdio: 'inherit' })
+          p.log.success('Storybook installed — run `npm run storybook` to start it on :6006')
+        } catch (err) {
+          const stderr = (err.stderr?.toString() || '') + (err.stdout?.toString() || '')
+          if (stderr.includes('EACCES') || stderr.includes('root-owned')) {
+            p.log.warn(
+              'npm cache permission error.\n' +
+              `  Fix: sudo chown -R $(id -u):$(id -g) ~/.npm\n` +
+              `  Then re-run: npx @catchdrift/cli init`
+            )
+          } else {
+            p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
+          }
+          sources.splice(sources.indexOf('storybook'), 1)
+        }
       }
     } else {
       // User declined — remove from sources so the URL step is skipped
       sources.splice(sources.indexOf('storybook'), 1)
-      p.log.info('Skipping Storybook setup. Re-run `npx catchdrift init` after installing it.')
+      p.log.info('Skipping Storybook setup. Re-run `npx @catchdrift/cli init` after installing it.')
     }
   }
 
@@ -494,17 +584,18 @@ ${pc.bold('What was set up:')}
   console.log(`\n${pc.bold('Do this now:')}`)
 
   if (chosenFoundation) {
+    const alreadyInstalled = chosenFoundation.installAuto !== null
     console.log(`
   You chose ${pc.bold(chosenFoundation.label)} as your foundation.
-
+${alreadyInstalled ? '' : `
   ${pc.cyan('1.')} Install it:
-       ${pc.bold(chosenFoundation.install)}
-  ${pc.cyan('2.')} Run: ${pc.bold('npx catchdrift sync')}
+       ${pc.bold(chosenFoundation.install)}`}
+  ${alreadyInstalled ? pc.cyan('1.') : pc.cyan('2.')} Run: ${pc.bold('npx @catchdrift/cli sync')}
        Scans your codebase for imports from ${pc.bold(chosenFoundation.pkg)} and registers them.
-  ${pc.cyan('3.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  see live coverage
+  ${alreadyInstalled ? pc.cyan('2.') : pc.cyan('3.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  see live coverage
 
   ${pc.dim('Docs + live preview: ' + chosenFoundation.docs)}
-  ${pc.dim('Figma community library: search "' + chosenFoundation.label + '" at figma.com/community')}
+  ${pc.dim('Figma community library: search "' + chosenFoundation.figmaCommunity + '" at figma.com/community')}
 `)
   } else if (figmaFiles.length > 0 && skillFiles.length > 0) {
     console.log(`
@@ -524,7 +615,7 @@ ${pc.bold('What was set up:')}
 `)
   } else if (mergedDsPackages?.length) {
     console.log(`
-  ${pc.cyan('1.')} Run: ${pc.bold('npx catchdrift sync')}
+  ${pc.cyan('1.')} Run: ${pc.bold('npx @catchdrift/cli sync')}
        Scans your codebase for imports from ${mergedDsPackages.join(', ')} and registers them.
   ${pc.cyan('2.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  see live coverage
 `)
@@ -533,8 +624,8 @@ ${pc.bold('What was set up:')}
   ${pc.cyan('1.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  the overlay opens
        Coverage will show 0% until you register your DS components.
   ${pc.cyan('2.')} Add your components to ${pc.bold('drift.config.ts')} or connect a source:
-       • Figma:  re-run ${pc.bold('npx catchdrift init')} and select Figma
-       • npm:    add ${pc.bold('dsPackages')} to drift.config.ts, then run ${pc.bold('npx catchdrift sync')}
+       • Figma:  re-run ${pc.bold('npx @catchdrift/cli init')} and select Figma
+       • npm:    add ${pc.bold('dsPackages')} to drift.config.ts, then run ${pc.bold('npx @catchdrift/cli sync')}
 `)
   }
 
@@ -548,12 +639,12 @@ ${pc.bold('What was set up:')}
   ${pc.blue('/drift-context')}     Check DS health — run this before starting work
   ${pc.blue('/drift-scaffold')}    Build a new screen using only DS components
   ${pc.blue('/drift-sync')}        Update registry after Figma or Storybook changes
-  ${pc.blue('npx catchdrift check')}   Check coverage before submitting a PR
+  ${pc.blue('npx @catchdrift/cli check')}   Check coverage before submitting a PR
 `)
 
   if (!sources.includes('storybook') && !storybook.found) {
     console.log(`${pc.yellow('Note:')} Storybook isn't set up yet. Run ${pc.bold('npx storybook@latest init')} when ready,`)
-    console.log(`  then re-run ${pc.bold('npx catchdrift init')} to complete the coverage loop.\n`)
+    console.log(`  then re-run ${pc.bold('npx @catchdrift/cli init')} to complete the coverage loop.\n`)
   }
 
   if (!patchedShort) {
@@ -569,6 +660,18 @@ ${pc.bold('What was set up:')}
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
+/** Returns false if the npm cache is root-owned (common after sudo npm install -g) */
+function checkNpmCache() {
+  try {
+    execSync('npm cache verify', { stdio: 'pipe', timeout: 8000 })
+    return true
+  } catch (err) {
+    const msg = (err.stderr?.toString() || '') + (err.stdout?.toString() || '')
+    if (msg.includes('EACCES') || msg.includes('root-owned')) return false
+    return true // other errors are unrelated to ownership
+  }
+}
+
 function extractFigmaFileKey(input) {
   // Matches: figma.com/design/KEY/... or figma.com/file/KEY/...
   const match = input.match(/figma\.com\/(?:design|file)\/([a-zA-Z0-9]+)/)

package/src/index.mjs

@@ -5,30 +5,30 @@
 
 import pc from 'picocolors'
 
-const VERSION = '0.2.1'
+const VERSION = '0.2.3'
 
 const HELP = `
 ${pc.bold(pc.blue('catchdrift'))} — Design system compliance for teams shipping with AI
 
 ${pc.bold('Usage:')}
-  npx catchdrift init              Install Drift into your React project
-  npx catchdrift sync              Auto-discover DS components from dsPackages
-  npx catchdrift check             Run headless drift scan (requires running app)
-  npx catchdrift status            Show DS coverage snapshot from config
-  npx catchdrift spec              List all .drift-spec.md files
-  npx catchdrift spec validate     Validate specs against implementation
-  npx catchdrift spec show <file>  Show parsed spec details
+  npx @catchdrift/cli init              Install Drift into your React project
+  npx @catchdrift/cli sync              Auto-discover DS components from dsPackages
+  npx @catchdrift/cli check             Run headless drift scan (requires running app)
+  npx @catchdrift/cli status            Show DS coverage snapshot from config
+  npx @catchdrift/cli spec              List all .drift-spec.md files
+  npx @catchdrift/cli spec validate     Validate specs against implementation
+  npx @catchdrift/cli spec show <file>  Show parsed spec details
 
 ${pc.bold('Options:')}
   --help, -h      Show this help
   --version, -v   Show version
 
 ${pc.bold('Examples:')}
-  npx catchdrift init
-  npx catchdrift sync
-  npx catchdrift check --url http://localhost:5173 --threshold 80
-  npx catchdrift status
-  npx catchdrift spec validate
+  npx @catchdrift/cli init
+  npx @catchdrift/cli sync
+  npx @catchdrift/cli check --url http://localhost:5173 --threshold 80
+  npx @catchdrift/cli status
+  npx @catchdrift/cli spec validate
 
 ${pc.dim('Docs: https://catchdrift.ai  ·  GitHub: https://github.com/dyoon92/design-drift')}
 `

package/src/lib/writers.mjs

@@ -62,7 +62,7 @@ export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles,
     `  threshold: ${threshold},`,
     dsPackagesLine,
     `  components: {`,
-    registry || `    // Auto-populated by \`npx catchdrift sync\` — or add manually:`,
+    registry || `    // Auto-populated by \`npx @catchdrift/cli sync\` — or add manually:`,
     `    // Button: { storyPath: 'primitives-button--primary' },`,
     `  },`,
     `  // approvedGaps: {},`,
@@ -85,7 +85,7 @@ export function writeEnvLocal(cwd, { figmaToken }) {
     if (existing.includes('FIGMA_TOKEN=')) return
     writeFileSync(envPath, existing.trimEnd() + '\n' + line, 'utf8')
   } else {
-    writeFileSync(envPath, `# Drift — Figma token (auto-generated by npx catchdrift init)\n${line}`, 'utf8')
+    writeFileSync(envPath, `# Drift — Figma token (auto-generated by npx @catchdrift/cli init)\n${line}`, 'utf8')
   }
 }