@nqlib/nqui 0.1.2 → 0.1.4

package/scripts/init-css.js

@@ -1,606 +1,125 @@
 #!/usr/bin/env node
 
 /**
- * nqui CSS initialization script
+ * nqui CSS initialization CLI
  *
- * Copies the nqui design system CSS (variables, colors, tokens) to the user's project.
- * Usage: npx nqui init-css [target-path]
+ * Usage:
+ *   npx nqui init-css [output.css] [options]
  */
 
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
-import { join, dirname, resolve } from 'path';
-import { fileURLToPath } from 'url';
-import { createInterface } from 'readline';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Get the project root (where package.json is)
-const projectRoot = resolve(__dirname, '..');
-const indexCssPath = join(projectRoot, 'src', 'index.css');
-const colorsCssPath = join(projectRoot, 'src', 'styles', 'colors.css');
-const distStylesPath = join(projectRoot, 'dist', 'styles.css');
-const examplesDir = join(projectRoot, 'scripts', 'examples');
-
-// Check if we're in a published package (source files don't exist, but dist/styles.css does)
-const isPublishedPackage = !existsSync(indexCssPath) && existsSync(distStylesPath);
-
-// Function to find actual CSS file location for Next.js
-function findNextJsCssFile() {
-  // Check for existing CSS files first (prioritize globals.css)
-  const possiblePaths = [
-    'src/app/globals.css',
-    'app/globals.css',
-    'src/app/layout.css',
-    'app/layout.css',
-  ];
-
-  for (const path of possiblePaths) {
-    const fullPath = join(process.cwd(), path);
-    if (existsSync(fullPath)) {
-      return path;
-    }
-  }
-
-  // If no CSS file exists, determine based on directory structure
-  // Check for src/app/ first (Next.js with src directory)
-  if (existsSync(join(process.cwd(), 'src', 'app'))) {
-    return 'src/app/globals.css';
-  }
-  // Check for app/ (Next.js without src directory)
-  if (existsSync(join(process.cwd(), 'app'))) {
-    return 'app/globals.css';
-  }
-
-  // Final fallback: prefer src/app/ if src exists, otherwise app/
-  if (existsSync(join(process.cwd(), 'src'))) {
-    return 'src/app/globals.css';
-  }
-  return 'app/globals.css';
-}
-
-// Function to find actual CSS file location for Vite
-function findViteCssFile() {
-  const possiblePaths = [
-    'src/index.css',
-    'src/main.css',
-    'src/App.css',
-  ];
-
-  for (const path of possiblePaths) {
-    const fullPath = join(process.cwd(), path);
-    if (existsSync(fullPath)) {
-      return path;
-    }
-  }
+import minimist from 'minimist';
+import { resolve, dirname } from 'path';
+import { readFileSync, existsSync } from 'fs';
+import { getPackageRoot } from './getPackageRoot.js';
+import { printHelp } from './help.js';
+import { runPipeline } from './pipeline/index.js';
+import { wizard, askAboutExamples } from './wizard.js';
+import { detectFramework, findMainCssFile } from './framework.js';
+import { generateSetupContent } from './setup-helper.js';
+import { copyNextJsExamples } from './examples.js';
+import { emit } from './pipeline/emit.js';
+
+// Filter out command names from argv
+const commandNames = ['init-css', 'nqui', 'nqui-init-css'];
+const filteredArgs = process.argv.slice(2).filter(arg => !commandNames.includes(arg));
+
+const args = minimist(filteredArgs, {
+  boolean: ['js', 'tokens-only', 'force', 'dry-run', 'wizard', 'setup', 'help', 'version', 'local-copy'],
+  alias: { h: 'help', v: 'version' },
+});
 
-  return 'src/index.css';
+if (args.help) {
+  printHelp();
+  process.exit(0);
 }
 
-// Get default path based on project type (uses detection functions)
-function getDefaultPath(projectType) {
-  switch (projectType) {
-    case 'nextjs':
-      return findNextJsCssFile();
-    case 'vite':
-      return findViteCssFile();
-    case 'remix':
-      return 'app/root.css';
-    case 'create-react-app':
-      return 'src/index.css';
-    default:
-      return 'nqui.css';
-  }
+if (args.version) {
+  const root = getPackageRoot();
+  const pkg = JSON.parse(readFileSync(resolve(root, 'package.json'), 'utf8'));
+  console.log(pkg.version);
+  process.exit(0);
 }
 
-function findProjectType() {
-  // Check for framework-specific files
-  // Next.js: check for next.config.js/ts OR app directory OR src/app directory
-  if (existsSync(join(process.cwd(), 'next.config.js')) ||
-      existsSync(join(process.cwd(), 'next.config.ts')) ||
-      existsSync(join(process.cwd(), 'app')) ||
-      existsSync(join(process.cwd(), 'src', 'app'))) {
-    return 'nextjs';
-  }
-  if (existsSync(join(process.cwd(), 'vite.config.js')) ||
-      existsSync(join(process.cwd(), 'vite.config.ts'))) {
-    return 'vite';
-  }
-  if (existsSync(join(process.cwd(), 'remix.config.js'))) {
-    return 'remix';
-  }
-  if (existsSync(join(process.cwd(), 'src', 'index.css'))) {
-    return 'create-react-app';
-  }
-  return null;
-}
+const output = args._[0] || 'nqui/index.css';
 
-function extractStandaloneCSS() {
-  // If we're in a published package, use dist/styles.css directly
-  if (isPublishedPackage) {
-    if (!existsSync(distStylesPath)) {
-      throw new Error(`Published package CSS file not found: ${distStylesPath}`);
-    }
-    return readFileSync(distStylesPath, 'utf-8');
-  }
-
-  // Read the source CSS files (for local development)
-  if (!existsSync(indexCssPath)) {
-    throw new Error(`Source CSS file not found: ${indexCssPath}`);
-  }
-  if (!existsSync(colorsCssPath)) {
-    throw new Error(`Colors CSS file not found: ${colorsCssPath}`);
-  }
-
-  let indexCss = readFileSync(indexCssPath, 'utf-8');
-  let colorsCss = readFileSync(colorsCssPath, 'utf-8');
-
-  // Extract :root and .dark blocks from colors.css (they're wrapped in @layer base)
-  // We need to unwrap them and merge with index.css's :root and .dark
-  const colorsRootMatch = colorsCss.match(/@layer base\s*\{\s*:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\}/s);
-
-  let colorsRootContent = '';
-  let colorsDarkContent = '';
-
-  if (colorsRootMatch) {
-    colorsRootContent = colorsRootMatch[1].trim();
-    colorsDarkContent = colorsRootMatch[2].trim();
-  } else {
-    // Fallback: try to extract without @layer base wrapper
-    const rootMatch = colorsCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
-    const darkMatch = colorsCss.match(/\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
-    if (rootMatch) colorsRootContent = rootMatch[1].trim();
-    if (darkMatch) colorsDarkContent = darkMatch[1].trim();
-  }
-
-  // Remove imports that require build tools (users should handle these in their own setup)
-  // Keep only the design tokens and variables
-  indexCss = indexCss
-    .replace(/@import\s+["']tailwindcss["'];?\s*\n/g, '')
-    .replace(/@import\s+["']tw-animate-css["'];?\s*\n/g, '')
-    .replace(/@import\s+["']shadcn\/tailwind\.css["'];?\s*\n/g, '')
-    .replace(/@import\s+["']@fontsource-variable\/inter["'];?\s*\n/g, '')
-    .replace(/@import\s+["']\.\/styles\/colors\.css["'];?\s*\n/g, '')
-    .replace(/\/\*\s*Import enhanced color system\s*\*\//g, '');
-
-  // Extract :root and .dark blocks from index.css
-  const indexRootMatch = indexCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
-  const indexDarkMatch = indexCss.match(/\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
-
-  let indexRootContent = '';
-  let indexDarkContent = '';
-
-  if (indexRootMatch) indexRootContent = indexRootMatch[1].trim();
-  if (indexDarkMatch) indexDarkContent = indexDarkMatch[1].trim();
-
-  // Merge :root blocks (colors.css first, then index.css)
-  const mergedRootContent = colorsRootContent
-    ? colorsRootContent + '\n\n    /* Additional variables from index.css */\n    ' + indexRootContent
-    : indexRootContent;
-
-  // Merge .dark blocks (colors.css first, then index.css)
-  const mergedDarkContent = colorsDarkContent
-    ? colorsDarkContent + '\n\n    /* Additional variables from index.css */\n    ' + indexDarkContent
-    : indexDarkContent;
-
-  // Replace :root and .dark in index.css with merged versions
-  if (indexRootMatch) {
-    indexCss = indexCss.replace(/:root\s*\{[^}]+(?:\{[^}]*\}[^}]*)*\}/s, `:root {\n    ${mergedRootContent}\n}`);
-  }
-
-  if (indexDarkMatch) {
-    indexCss = indexCss.replace(/\.dark\s*\{[^}]+(?:\{[^}]*\}[^}]*)*\}/s, `.dark {\n    ${mergedDarkContent}\n}`);
-  }
-
-  // Remove duplicate @layer base blocks (there are two identical ones in index.css)
-  // Match @layer base blocks with proper brace counting
-  const lines = indexCss.split('\n');
-  let inLayerBase = false;
-  let layerBaseStart = -1;
-  let braceCount = 0;
-  const layerBaseBlocks = [];
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line.includes('@layer base')) {
-      if (!inLayerBase) {
-        inLayerBase = true;
-        layerBaseStart = i;
-        braceCount = (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
-      } else {
-        braceCount += (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
-      }
-    } else if (inLayerBase) {
-      braceCount += (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
-      if (braceCount === 0) {
-        layerBaseBlocks.push({ start: layerBaseStart, end: i });
-        inLayerBase = false;
-      }
-    }
-  }
-
-  // If we found duplicate @layer base blocks, remove all but the first
-  if (layerBaseBlocks.length > 1) {
-    const firstBlock = layerBaseBlocks[0];
-    const firstBlockContent = lines.slice(firstBlock.start, firstBlock.end + 1).join('\n');
-
-    // Check if all blocks are identical
-    const allIdentical = layerBaseBlocks.every(block => {
-      const blockContent = lines.slice(block.start, block.end + 1).join('\n');
-      return blockContent === firstBlockContent;
-    });
-
-    if (allIdentical) {
-      // Remove all but the first block (working backwards to preserve indices)
-      for (let i = layerBaseBlocks.length - 1; i > 0; i--) {
-        const block = layerBaseBlocks[i];
-        lines.splice(block.start, block.end - block.start + 1);
-      }
-      indexCss = lines.join('\n');
-    }
-  }
-
-  // The :root and .dark blocks are already merged into indexCss
-  // Now we just need to add a comment header
-  let combinedCss = indexCss;
-
-  // Add comment before :root if it doesn't already have one
-  if (combinedCss.includes(':root') && !combinedCss.includes('nqui Color System')) {
-    const rootIndex = combinedCss.indexOf(':root');
-    combinedCss = combinedCss.slice(0, rootIndex) +
-                  '/* ============================================\n' +
-                  '   nqui Color System & Design Tokens\n' +
-                  '   ============================================ */\n\n' +
-                  combinedCss.slice(rootIndex);
-  }
-
-  // Clean up extra blank lines
-  combinedCss = combinedCss.replace(/\n{4,}/g, '\n\n\n');
-
-  // Add header comment
-  const header = `/* nqui Design System CSS
- *
- * This file contains ALL design tokens, CSS variables, and color scales from nqui.
- * It includes everything the library needs to style components correctly.
- *
- * IMPORTANT: This file does NOT include Tailwind CSS imports.
- * You must have Tailwind CSS configured in your project.
- *
- * For Tailwind CSS v4, add this at the TOP of your CSS file:
- *   @import "tailwindcss";
- *
- * For Tailwind CSS v3, configure it in your tailwind.config.js
+/**
+ * Generate index.css that imports from library package
+ */
+function generateIndexCssContent() {
+  return `/* nqui Design System
  *
- * This file includes:
- * - All CSS variables (--primary, --background, --foreground, etc.)
- * - Complete color scales (100-600) for all semantic colors
- * - Light and dark mode support
- * - Base layer styles
- * - Utility animations
+ * This file imports nqui styles from the library package.
+ * Import this file in your main CSS file (e.g. globals.css)
  *
- * Generated by: npx nqui init-css
- * Do not edit manually - regenerate if nqui is updated
+ * Usage in your globals.css:
+ *   @import "./nqui/index.css";
  */
 
+@import "@nqlib/nqui/styles";
 `;
-
-  return header + combinedCss;
-}
-
-function getFrameworkDirectives(projectType) {
-  switch (projectType) {
-    case 'nextjs':
-      return `@import "tailwindcss";
-@source "./**/*.{js,ts,jsx,tsx,mdx}";
-@source "../components/**/*.{js,ts,jsx,tsx,mdx}";
-@source "../node_modules/@nqlib/nqui/dist/**/*.js";
-@import "../node_modules/tw-animate-css/dist/tw-animate.css";
-@custom-variant dark (&:is(.dark *));
-
-`;
-    case 'vite':
-    case 'create-react-app':
-      return `@import "tailwindcss";
-@import "../node_modules/tw-animate-css/dist/tw-animate.css";
-
-`;
-    case 'remix':
-      return `@import "tailwindcss";
-@import "../node_modules/tw-animate-css/dist/tw-animate.css";
-
-`;
-    default:
-      return '';
-  }
-}
-
-// Function to ask user for input
-function askQuestion(question) {
-  const rl = createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
-
-  return new Promise((resolve) => {
-    rl.question(question, (answer) => {
-      rl.close();
-      resolve(answer.trim().toLowerCase());
-    });
-  });
-}
-
-// Function to find Next.js page.tsx file
-function findNextJsPageFile() {
-  const possiblePaths = [
-    'src/app/page.tsx',
-    'app/page.tsx',
-  ];
-
-  for (const path of possiblePaths) {
-    const fullPath = join(process.cwd(), path);
-    if (existsSync(fullPath)) {
-      return path;
-    }
-  }
-
-  // Default fallback based on directory structure
-  if (existsSync(join(process.cwd(), 'src', 'app'))) {
-    return 'src/app/page.tsx';
-  }
-  return 'app/page.tsx';
-}
-
-// Function to find Next.js layout.tsx file
-function findNextJsLayoutFile() {
-  const possiblePaths = [
-    'src/app/layout.tsx',
-    'app/layout.tsx',
-  ];
-
-  for (const path of possiblePaths) {
-    const fullPath = join(process.cwd(), path);
-    if (existsSync(fullPath)) {
-      return path;
-    }
-  }
-
-  // Default fallback based on directory structure
-  if (existsSync(join(process.cwd(), 'src', 'app'))) {
-    return 'src/app/layout.tsx';
-  }
-  return 'app/layout.tsx';
-}
-
-// Function to copy example files for Next.js
-async function copyNextJsExamples() {
-  const pageExamplePath = join(examplesDir, 'nextjs-page.tsx');
-  const layoutExamplePath = join(examplesDir, 'nextjs-layout.tsx');
-
-  if (!existsSync(pageExamplePath) || !existsSync(layoutExamplePath)) {
-    console.log('⚠️  Example files not found. Skipping example copy.');
-    return;
-  }
-
-  const targetPagePath = findNextJsPageFile();
-  const targetLayoutPath = findNextJsLayoutFile();
-  const fullPagePath = resolve(process.cwd(), targetPagePath);
-  const fullLayoutPath = resolve(process.cwd(), targetLayoutPath);
-
-  // Check if files exist
-  const pageExists = existsSync(fullPagePath);
-  const layoutExists = existsSync(fullLayoutPath);
-
-  if (pageExists || layoutExists) {
-    console.log('\n📄 Found existing Next.js files:');
-    if (pageExists) console.log(`   - ${targetPagePath}`);
-    if (layoutExists) console.log(`   - ${targetLayoutPath}`);
-
-    const overwrite = await askQuestion('\n   Do you want to overwrite them with nqui examples? (y/n): ');
-    if (overwrite !== 'y' && overwrite !== 'yes') {
-      console.log('   Skipping example files...');
-      return;
-    }
-  }
-
-  // Create directories if needed
-  const pageDir = dirname(fullPagePath);
-  const layoutDir = dirname(fullLayoutPath);
-  if (!existsSync(pageDir)) {
-    mkdirSync(pageDir, { recursive: true });
-  }
-  if (!existsSync(layoutDir)) {
-    mkdirSync(layoutDir, { recursive: true });
-  }
-
-  // Copy example files
-  try {
-    const pageContent = readFileSync(pageExamplePath, 'utf-8');
-    const layoutContent = readFileSync(layoutExamplePath, 'utf-8');
-
-    writeFileSync(fullPagePath, pageContent, 'utf-8');
-    writeFileSync(fullLayoutPath, layoutContent, 'utf-8');
-
-    console.log(`✅ Copied example page: ${targetPagePath}`);
-    console.log(`✅ Copied example layout: ${targetLayoutPath}`);
-    console.log('\n📝 Note: Make sure to install next-themes if not already installed:');
-    console.log('   npm install next-themes');
-  } catch (error) {
-    console.error('❌ Error copying example files:', error.message);
-  }
 }
 
-async function main() {
-  const args = process.argv.slice(2);
-  let targetPath = args[0];
-
-  // Ignore command names that might be passed as arguments when called via npx
-  // Common command names: 'init-css', 'nqui', 'nqui-init-css'
-  if (targetPath === 'init-css' || targetPath === 'nqui' || targetPath === 'nqui-init-css') {
-    targetPath = args[1] || undefined;
-  }
-
-  // If targetPath doesn't look like a file path (no extension, no directory separators), ignore it
-  // This prevents treating command names or other non-path arguments as file paths
-  if (targetPath && !targetPath.includes('.') && !targetPath.includes('/') && !targetPath.includes('\\')) {
-    targetPath = undefined;
-  }
-
+(async () => {
   try {
-    // Extract standalone CSS
-    const standaloneCss = extractStandaloneCSS();
+    const root = getPackageRoot();
+    const framework = detectFramework();
+    const wiz = args.wizard ? await wizard() : {};
 
-    let finalTargetPath;
-    let projectType = null;
+    const outCssPath = resolve(process.cwd(), output);
+    const useLibraryImport = !args['local-copy']; // Default to library import
 
-    if (targetPath) {
-      // User provided a custom path
-      finalTargetPath = resolve(process.cwd(), targetPath);
-      projectType = findProjectType();
+    if (useLibraryImport) {
+      // Create index.css that imports from library
+      const indexCssContent = generateIndexCssContent();
+      emit(outCssPath, indexCssContent, { force: args.force, dryRun: args['dry-run'] });
     } else {
-      // Auto-detect project type
-      projectType = findProjectType();
-
-      if (projectType) {
-        const defaultPath = getDefaultPath(projectType);
-        finalTargetPath = resolve(process.cwd(), defaultPath);
-        console.log(`📦 Detected ${projectType} project`);
-        console.log(`   Found CSS file: ${defaultPath}`);
-      } else {
-        // Fallback: create a new CSS file
-        finalTargetPath = resolve(process.cwd(), 'nqui.css');
-        console.log('⚠️  Could not detect project type.');
-        console.log(`   Creating standalone file: nqui.css`);
-        console.log('   You can import this file manually in your app.');
-      }
-    }
-
-    // Create target directory if it doesn't exist
-    const targetDir = dirname(finalTargetPath);
-    if (!existsSync(targetDir)) {
-      mkdirSync(targetDir, { recursive: true });
+      // Original behavior: generate local copy
+      await runPipeline({
+        root,
+        outCss: outCssPath,
+        outJs: args.js || wiz.js
+          ? resolve(process.cwd(), output.replace('.css', '.tokens.js'))
+          : null,
+        tokensOnly: args['tokens-only'] || wiz.tokensOnly,
+        force: args.force,
+        dryRun: args['dry-run'],
+      });
     }
 
-    // Get framework-specific directives
-    const frameworkDirectives = projectType ? getFrameworkDirectives(projectType) : '';
-    const fullCss = frameworkDirectives + standaloneCss;
-
-    // Check if target file exists
-    if (existsSync(finalTargetPath)) {
-      console.log(`\n⚠️  File already exists: ${finalTargetPath}`);
-
-      // Read existing content
-      const existingContent = readFileSync(finalTargetPath, 'utf-8');
-
-      // Check if nqui CSS is already present
-      if (existingContent.includes('nqui Design System CSS') ||
-          existingContent.includes('nqui Color System')) {
-        console.log('   ⚠️  nqui CSS already present in file.');
-        const update = await askQuestion('   Do you want to update it? (y/n): ');
-        if (update !== 'y' && update !== 'yes') {
-          console.log('   Skipping...');
-          return;
-        }
-        // Remove old nqui CSS and add new
-        const cleaned = existingContent.replace(
-          /\/\* nqui Design System CSS[\s\S]*?(?=\n\n|\n$|$)/,
-          ''
-        ).replace(
-          /\/\* ============================================[\s\S]*?============================================ \*\/[\s\S]*?}/g,
-          ''
-        );
-        const hasTailwindImport = cleaned.includes('@import "tailwindcss"');
-        if (hasTailwindImport && frameworkDirectives) {
-          writeFileSync(finalTargetPath, cleaned.trim() + '\n\n' + standaloneCss, 'utf-8');
-        } else {
-          writeFileSync(finalTargetPath, fullCss + '\n\n' + cleaned.trim(), 'utf-8');
-        }
-        console.log(`✅ Updated nqui CSS in: ${finalTargetPath}`);
-        console.log('\n✨ Done!');
-        return;
-      }
-
-      // Ask user what to do
-      console.log('\n   What would you like to do?');
-      console.log('   1. Overwrite the file (replace all content)');
-      console.log('   2. Append nqui CSS to the file');
-      console.log('   3. Create a separate file (nqui.css) and import it');
+    // Generate setup helper file (always, unless dry-run)
+    if (!args['dry-run'] && (args.setup || !args['tokens-only'])) {
+      const setupContent = generateSetupContent(framework, output, useLibraryImport);
+      const setupPath = resolve(process.cwd(), dirname(output), 'nqui-setup.css');
+      emit(setupPath, setupContent, { force: args.force, dryRun: false });
 
-      const choice = await askQuestion('\n   Enter your choice (1/2/3): ');
+      const mainCssFile = findMainCssFile(framework);
 
-      if (choice === '1') {
-        // Overwrite
-        const hasTailwindImport = existingContent.includes('@import "tailwindcss"');
-        if (hasTailwindImport && frameworkDirectives) {
-          // Keep existing Tailwind setup, add nqui CSS
-          writeFileSync(finalTargetPath, existingContent + '\n\n' + standaloneCss, 'utf-8');
-        } else {
-          // Replace with framework directives + nqui CSS
-          writeFileSync(finalTargetPath, fullCss, 'utf-8');
-        }
-        console.log(`✅ Updated: ${finalTargetPath}`);
-      } else if (choice === '2') {
-        // Append
-        const hasTailwindImport = existingContent.includes('@import "tailwindcss"');
-        if (hasTailwindImport && frameworkDirectives) {
-          writeFileSync(finalTargetPath, existingContent + '\n\n' + standaloneCss, 'utf-8');
-        } else {
-          writeFileSync(finalTargetPath, fullCss + '\n\n' + existingContent, 'utf-8');
-        }
-        console.log(`✅ Appended nqui CSS to: ${finalTargetPath}`);
-      } else if (choice === '3') {
-        // Create separate file
-        const separatePath = join(dirname(finalTargetPath), 'nqui.css');
-        writeFileSync(separatePath, standaloneCss, 'utf-8');
-        console.log(`✅ Created: ${separatePath}`);
-        console.log(`\n📝 Next step: Import this file in ${finalTargetPath}:`);
-        const relativeSeparatePath = separatePath.replace(process.cwd() + '/', '');
-        const relativeTargetPath = finalTargetPath.replace(process.cwd() + '/', '');
-        const importPath = relativeSeparatePath.replace(dirname(relativeTargetPath) + '/', './');
-        console.log(`   @import "${importPath}";`);
-        console.log('\n✨ Done!');
-        return;
-      } else {
-        console.log('   Invalid choice. Skipping...');
-        return;
-      }
-    } else {
-      // Create new file with framework directives + nqui CSS
-      writeFileSync(finalTargetPath, fullCss, 'utf-8');
-      console.log(`✅ Created: ${finalTargetPath}`);
-      if (frameworkDirectives) {
-        console.log(`   Added ${projectType}-specific Tailwind setup`);
-      }
+      console.log(`\n📝 Next steps:`);
+      console.log(`   1. Copy the contents of ${dirname(output)}/nqui-setup.css`);
+      console.log(`   2. Paste them at the VERY TOP of your main CSS file`);
+      console.log(`      (e.g. ${mainCssFile})\n`);
     }
 
-    // Provide next steps
-    console.log('\n📝 Next steps:');
-    if (!frameworkDirectives) {
-      console.log('   1. Ensure Tailwind CSS is configured in your project');
-      console.log('   2. Add Tailwind imports at the top of this CSS file if needed');
+    // Ask about copying examples (if not in wizard mode, ask for Next.js projects)
+    let shouldCopyExamples = wiz.copyExamples;
+    if (!args['dry-run'] && !shouldCopyExamples && framework === 'nextjs' && !args.wizard) {
+      shouldCopyExamples = await askAboutExamples(framework);
     }
-    console.log('   3. The CSS file is ready to use!');
 
-    // Offer to copy example files for Next.js
-    if (projectType === 'nextjs') {
-      const copyExamples = await askQuestion('\n   Would you like to copy example Next.js files (page.tsx, layout.tsx)? (y/n): ');
-      if (copyExamples === 'y' || copyExamples === 'yes') {
-        await copyNextJsExamples();
+    // Copy example files if requested
+    if (!args['dry-run'] && shouldCopyExamples) {
+      const copied = await copyNextJsExamples(framework, { force: args.force });
+      if (copied && copied.length === 0) {
+        // Files were skipped (user said no to overwrite)
+        console.log('\n⏭️  Example files skipped. Run with --force to overwrite existing files.\n');
       }
     }
 
-    console.log('\n✨ Done!');
-  } catch (error) {
-    console.error('❌ Error:', error.message);
-    if (error.message.includes('not found')) {
-      console.error('   Please ensure you are running this from the nqui package directory');
-      console.error('   or that the source CSS files exist.');
+    if (!args['dry-run']) {
+      console.log(`\n✅ nqui installed successfully`);
     }
+  } catch (err) {
+    console.error('❌ Error:', err.message);
     process.exit(1);
   }
-}
-
-main().catch((error) => {
-  console.error('❌ Unexpected error:', error);
-  process.exit(1);
-});
-
+})();