@iselect/select 1.0.0 → 1.0.2

package/bin/select.js

@@ -33,7 +33,7 @@ program
     .option('-t, --template <template>', 'Project template (react, vue, vanilla)', 'react')
     .action(init);
 
-// select - Interactive platform selection
+// slct select - Interactive platform selection
 program
     .command('select')
     .alias('s')
@@ -47,6 +47,8 @@ program
     .option('--tauri', 'Use Tauri for desktop (default)')
     .option('--electron', 'Use Electron for desktop')
     .option('--release', 'Build for production release')
+    .option('--static', 'Copy files directly without bundling (vanilla HTML/CSS/JS)')
+    .option('--inline', 'Inline CSS and JS into a single HTML file')
     .action(build);
 
 // slct deploy - Deploy to Select marketplace
@@ -65,3 +67,4 @@ program
 
 // Parse arguments
 program.parse();
+

package/lib/commands/build.js

@@ -55,25 +55,348 @@ async function build(target, options) {
     }
 }
 
+// ==================== FRAMEWORK SIGNATURES (Vercel-style) ====================
+const FRAMEWORK_SIGNATURES = {
+    // Next.js
+    'next.config.js': { name: 'Next.js', build: 'npm run build', output: '.next', icon: '▲' },
+    'next.config.mjs': { name: 'Next.js', build: 'npm run build', output: '.next', icon: '▲' },
+    'next.config.ts': { name: 'Next.js', build: 'npm run build', output: '.next', icon: '▲' },
+
+    // Astro
+    'astro.config.mjs': { name: 'Astro', build: 'npm run build', output: 'dist', icon: '🚀' },
+    'astro.config.js': { name: 'Astro', build: 'npm run build', output: 'dist', icon: '🚀' },
+    'astro.config.ts': { name: 'Astro', build: 'npm run build', output: 'dist', icon: '🚀' },
+
+    // SvelteKit
+    'svelte.config.js': { name: 'SvelteKit', build: 'npm run build', output: 'build', icon: '🔶' },
+    'svelte.config.ts': { name: 'SvelteKit', build: 'npm run build', output: 'build', icon: '🔶' },
+
+    // Nuxt
+    'nuxt.config.js': { name: 'Nuxt', build: 'npm run build', output: '.nuxt', icon: '💚' },
+    'nuxt.config.ts': { name: 'Nuxt', build: 'npm run build', output: '.nuxt', icon: '💚' },
+
+    // Remix
+    'remix.config.js': { name: 'Remix', build: 'npm run build', output: 'build', icon: '💿' },
+
+    // Gatsby
+    'gatsby-config.js': { name: 'Gatsby', build: 'npm run build', output: 'public', icon: '💜' },
+    'gatsby-config.ts': { name: 'Gatsby', build: 'npm run build', output: 'public', icon: '💜' },
+
+    // Vite (generic)
+    'vite.config.js': { name: 'Vite', build: 'npm run build', output: 'dist', icon: '⚡' },
+    'vite.config.ts': { name: 'Vite', build: 'npm run build', output: 'dist', icon: '⚡' },
+    'vite.config.mjs': { name: 'Vite', build: 'npm run build', output: 'dist', icon: '⚡' },
+
+    // Angular
+    'angular.json': { name: 'Angular', build: 'npm run build', output: 'dist', icon: '🅰️' },
+
+    // Vue CLI
+    'vue.config.js': { name: 'Vue CLI', build: 'npm run build', output: 'dist', icon: '💚' },
+};
+
+// Package.json dependency-based detection
+const DEPENDENCY_SIGNATURES = {
+    'next': { name: 'Next.js', build: 'npm run build', output: '.next', icon: '▲' },
+    '@remix-run/react': { name: 'Remix', build: 'npm run build', output: 'build', icon: '💿' },
+    'gatsby': { name: 'Gatsby', build: 'npm run build', output: 'public', icon: '💜' },
+    '@angular/core': { name: 'Angular', build: 'npm run build', output: 'dist', icon: '🅰️' },
+    'react-scripts': { name: 'Create React App', build: 'npm run build', output: 'build', icon: '⚛️' },
+};
+
+// ==================== FRAMEWORK DETECTION ====================
+async function detectFramework(projectPath) {
+    // 1. Check for framework config files
+    for (const [configFile, framework] of Object.entries(FRAMEWORK_SIGNATURES)) {
+        if (await fs.pathExists(path.join(projectPath, configFile))) {
+            return { ...framework, detected: 'config', configFile };
+        }
+    }
+
+    // 2. Check package.json dependencies
+    const pkgPath = path.join(projectPath, 'package.json');
+    if (await fs.pathExists(pkgPath)) {
+        try {
+            const pkg = await fs.readJson(pkgPath);
+            const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+
+            for (const [dep, framework] of Object.entries(DEPENDENCY_SIGNATURES)) {
+                if (allDeps[dep]) {
+                    return { ...framework, detected: 'dependency', dependency: dep };
+                }
+            }
+
+            // Check for generic build script
+            if (pkg.scripts?.build) {
+                return {
+                    name: 'Custom',
+                    build: 'npm run build',
+                    output: 'dist',
+                    icon: '📦',
+                    detected: 'build-script'
+                };
+            }
+        } catch { }
+    }
+
+    // 3. Static site detection
+    const hasIndexHtml = await fs.pathExists(path.join(projectPath, 'index.html'));
+    if (hasIndexHtml) {
+        return {
+            name: 'Static',
+            build: null, // No build needed
+            output: '.',
+            icon: '📄',
+            detected: 'static'
+        };
+    }
+
+    return null;
+}
+
+// ==================== PROJECT TYPE DETECTION (legacy wrapper) ====================
+async function detectProjectType(projectPath) {
+    const framework = await detectFramework(projectPath);
+
+    if (!framework) return 'unknown';
+    if (framework.detected === 'static') return 'static';
+    if (framework.name === 'Vite') return 'vite';
+    return 'bundled';
+}
+
+// ==================== INLINE BUILD ====================
+async function buildInline(projectPath, outputDir) {
+    const spinner = ora('Building inline HTML...').start();
+
+    // Ensure output dir exists
+    await fs.ensureDir(outputDir);
+
+    // Read index.html
+    const indexPath = path.join(projectPath, 'index.html');
+    if (!await fs.pathExists(indexPath)) {
+        spinner.fail('No index.html found');
+        throw new Error('index.html not found in project root');
+    }
+
+    let html = await fs.readFile(indexPath, 'utf8');
+
+    // Inline CSS files
+    const cssLinkRegex = /<link[^>]+rel=["']stylesheet["'][^>]+href=["']([^"']+)["'][^>]*>/gi;
+    const cssLinks = [];
+    let match;
+    while ((match = cssLinkRegex.exec(html)) !== null) {
+        cssLinks.push({ full: match[0], href: match[1] });
+    }
+
+    for (const link of cssLinks) {
+        const cssPath = path.join(projectPath, link.href);
+        if (await fs.pathExists(cssPath)) {
+            const cssContent = await fs.readFile(cssPath, 'utf8');
+            html = html.replace(link.full, `<style>\n${cssContent}\n</style>`);
+        }
+    }
+
+    // Inline JS files
+    const jsScriptRegex = /<script[^>]+src=["']([^"']+)["'][^>]*><\/script>/gi;
+    const jsScripts = [];
+    while ((match = jsScriptRegex.exec(html)) !== null) {
+        jsScripts.push({ full: match[0], src: match[1] });
+    }
+
+    for (const script of jsScripts) {
+        const jsPath = path.join(projectPath, script.src);
+        if (await fs.pathExists(jsPath)) {
+            const jsContent = await fs.readFile(jsPath, 'utf8');
+            html = html.replace(script.full, `<script>\n${jsContent}\n</script>`);
+        }
+    }
+
+    // Write output
+    await fs.writeFile(path.join(outputDir, 'index.html'), html);
+
+    spinner.succeed(`Created single-file HTML (${cssLinks.length} CSS, ${jsScripts.length} JS inlined)`);
+
+    return { cssInlined: cssLinks.length, jsInlined: jsScripts.length };
+}
+
+// ==================== STATIC FILE COPY ====================
+async function copyStaticFiles(projectPath, outputDir) {
+    const spinner = ora('Copying static files...').start();
+
+    // Ensure output dir exists and is clean
+    await fs.emptyDir(outputDir);
+
+    // Files and folders to copy
+    const filesToCopy = ['index.html', 'style.css', 'styles.css', 'main.css', 'app.css'];
+    const foldersToCheck = ['assets', 'css', 'js', 'images', 'fonts', 'src'];
+
+    let copiedFiles = 0;
+    let cssFound = false;
+
+    // Copy individual files
+    for (const file of filesToCopy) {
+        const srcPath = path.join(projectPath, file);
+        if (await fs.pathExists(srcPath)) {
+            await fs.copy(srcPath, path.join(outputDir, file));
+            copiedFiles++;
+            if (file.endsWith('.css')) cssFound = true;
+        }
+    }
+
+    // Copy .js files from root
+    const rootFiles = await fs.readdir(projectPath);
+    for (const file of rootFiles) {
+        if (file.endsWith('.js') && !file.includes('.config.')) {
+            await fs.copy(path.join(projectPath, file), path.join(outputDir, file));
+            copiedFiles++;
+        }
+        if (file.endsWith('.css')) {
+            await fs.copy(path.join(projectPath, file), path.join(outputDir, file));
+            copiedFiles++;
+            cssFound = true;
+        }
+    }
+
+    // Copy folders
+    for (const folder of foldersToCheck) {
+        const srcPath = path.join(projectPath, folder);
+        if (await fs.pathExists(srcPath)) {
+            await fs.copy(srcPath, path.join(outputDir, folder));
+            copiedFiles++;
+
+            // Check for CSS in folders
+            const folderFiles = await fs.readdir(srcPath);
+            if (folderFiles.some(f => f.endsWith('.css'))) {
+                cssFound = true;
+            }
+        }
+    }
+
+    spinner.succeed(`Copied ${copiedFiles} files/folders to ${outputDir}`);
+
+    // Warning if no CSS found
+    if (!cssFound) {
+        console.log(chalk.yellow('\n⚠️  Warning: No CSS files found in build output'));
+        console.log(chalk.gray('   Ensure your HTML links to the CSS file correctly\n'));
+    }
+
+    return { copiedFiles, cssFound };
+}
+
 // ==================== WEB BUILD ====================
 async function buildWeb(config, options) {
     console.log(chalk.blue('\n📦 Building for Web...\n'));
 
-    const spinner = ora('Running build command...').start();
+    const projectPath = process.cwd();
+    const outputDir = path.resolve(projectPath, config.build?.outDir || 'dist');
+
+    // Check for --static flag
+    if (options.static) {
+        console.log(chalk.gray('   Mode: Static (--static flag)'));
+        await copyStaticFiles(projectPath, outputDir);
+        console.log(chalk.green('\n✅ Static web build complete!'));
+        console.log(chalk.gray(`   Output: ${outputDir}/\n`));
+        return;
+    }
+
+    // Check for --inline flag
+    if (options.inline) {
+        console.log(chalk.gray('   Mode: Inline (--inline flag)'));
+        await buildInline(projectPath, outputDir);
+        console.log(chalk.green('\n✅ Inline web build complete!'));
+        console.log(chalk.gray(`   Output: ${outputDir}/index.html (single file)\n`));
+        return;
+    }
+
+    // Auto-detect framework (Vercel-style)
+    const framework = await detectFramework(projectPath);
+
+    if (!framework) {
+        console.log(chalk.yellow('\n⚠️  Could not detect project type'));
+        console.log(chalk.gray('   No index.html or package.json found'));
+        console.log(chalk.gray('   Try: slct build web --static\n'));
+        process.exit(1);
+    }
+
+    // Display detected framework
+    console.log(chalk.cyan(`   ${framework.icon}  Detected: ${chalk.bold(framework.name)}`));
+    if (framework.detected === 'config') {
+        console.log(chalk.gray(`      via ${framework.configFile}`));
+    } else if (framework.detected === 'dependency') {
+        console.log(chalk.gray(`      via ${framework.dependency} dependency`));
+    } else if (framework.detected === 'static') {
+        console.log(chalk.gray('      (static HTML/CSS/JS site)'));
+    }
+    console.log('');
+
+    // Handle static sites
+    if (framework.detected === 'static') {
+        await copyStaticFiles(projectPath, outputDir);
+        console.log(chalk.green('\n✅ Static web build complete!'));
+        console.log(chalk.gray(`   Output: ${outputDir}/\n`));
+        return;
+    }
+
+    // Run build command for bundled projects
+    // Priority: select.json config > detected framework > default
+    const buildCommand = config.build?.command || framework.build || 'npm run build';
+    const finalOutputDir = config.build?.outDir
+        ? path.resolve(projectPath, config.build.outDir)
+        : path.resolve(projectPath, framework.output || 'dist');
+
+    const spinner = ora(`Running: ${chalk.cyan(buildCommand)}`).start();
 
     try {
-        execSync(config.build?.command || 'npm run build', {
+        execSync(buildCommand, {
             stdio: 'inherit',
-            cwd: process.cwd()
+            cwd: projectPath
         });
-        spinner.succeed('Web build complete!');
-        console.log(chalk.gray(`   Output: ${config.build?.outDir || 'dist'}/\n`));
+        spinner.succeed(`${framework.icon} ${framework.name} build complete!`);
+
+        // Validate output
+        await validateBuildOutput(finalOutputDir);
+
+        console.log(chalk.gray(`   Output: ${finalOutputDir}/\n`));
     } catch (error) {
         spinner.fail('Web build failed');
         throw error;
     }
 }
 
+// ==================== BUILD VALIDATION ====================
+async function validateBuildOutput(outputDir) {
+    if (!await fs.pathExists(outputDir)) {
+        console.log(chalk.yellow('\n⚠️  Warning: Output directory not found'));
+        return;
+    }
+
+    const files = await fs.readdir(outputDir);
+
+    // Check for index.html
+    if (!files.includes('index.html')) {
+        console.log(chalk.yellow('\n⚠️  Warning: No index.html found in build output'));
+    }
+
+    // Check for CSS
+    const hasCss = files.some(f => f.endsWith('.css'));
+    const hasAssetsFolder = files.includes('assets');
+
+    if (!hasCss && hasAssetsFolder) {
+        const assetsPath = path.join(outputDir, 'assets');
+        if (await fs.pathExists(assetsPath)) {
+            const assetFiles = await fs.readdir(assetsPath);
+            if (assetFiles.some(f => f.endsWith('.css'))) {
+                return; // CSS is in assets folder, all good
+            }
+        }
+    }
+
+    if (!hasCss) {
+        console.log(chalk.yellow('\n⚠️  Warning: No CSS files found in build output'));
+        console.log(chalk.gray('   If using vanilla CSS, ensure it\'s imported in your JS entry point'));
+        console.log(chalk.gray('   Or use: slct build web --static\n'));
+    }
+}
+
 // ==================== DESKTOP BUILD ====================
 async function buildDesktop(config, options) {
     const framework = options.electron ? 'electron' : (config.desktop?.framework || 'tauri');

package/lib/commands/deploy.js

@@ -39,8 +39,8 @@ async function deploy(options) {
             type: 'list',
             name: 'category',
             message: 'Category:',
-            choices: ['Productivity', 'Finance', 'Developer Tools', 'Education', 'Entertainment', 'Utilities', 'Other'],
-            default: config.category || 'Productivity'
+            choices: ['productivity', 'finance', 'developer-tools', 'education', 'entertainment', 'utilities', 'games', 'ai-tools', 'experiments'],
+            default: config.category || 'productivity'
         },
         {
             type: 'password',
@@ -66,7 +66,7 @@ async function deploy(options) {
         ...config,
         name: answers.name,
         tagline: answers.tagline,
-        category: answers.category.toLowerCase().replace(' ', '-'),
+        category: answers.category,
         platforms: []
     };
 

package/lib/commands/init.js

@@ -5,125 +5,125 @@ const inquirer = require('inquirer');
 const ora = require('ora');
 
 async function init(name, options) {
-    console.log(chalk.bold('\n📦 Initialize Select Project\n'));
-
-    // If no name provided, ask for it
-    if (!name) {
-        const answers = await inquirer.prompt([
-            {
-                type: 'input',
-                name: 'name',
-                message: 'Project name:',
-                default: 'my-select-app',
-                validate: (input) => {
-                    if (/^[a-z0-9-]+$/.test(input)) return true;
-                    return 'Project name must be lowercase with hyphens only';
-                }
-            }
-        ]);
-        name = answers.name;
-    }
-
-    const projectDir = path.resolve(process.cwd(), name);
+  console.log(chalk.bold('\n📦 Initialize Select Project\n'));
 
-    // Check if directory exists
-    if (await fs.pathExists(projectDir)) {
-        console.log(chalk.red(`\n❌ Directory "${name}" already exists.\n`));
-        process.exit(1);
-    }
-
-    // Ask for project details
+  // If no name provided, ask for it
+  if (!name) {
     const answers = await inquirer.prompt([
-        {
-            type: 'list',
-            name: 'template',
-            message: 'Select a template:',
-            choices: [
-                { name: 'React + Vite', value: 'react' },
-                { name: 'Vue + Vite', value: 'vue' },
-                { name: 'Vanilla JavaScript', value: 'vanilla' }
-            ],
-            default: options.template
-        },
-        {
-            type: 'checkbox',
-            name: 'platforms',
-            message: 'Target platforms:',
-            choices: [
-                { name: 'Web', value: 'web', checked: true },
-                { name: 'Windows', value: 'windows' },
-                { name: 'macOS', value: 'macos' },
-                { name: 'Linux', value: 'linux' }
-            ]
-        },
-        {
-            type: 'list',
-            name: 'desktopFramework',
-            message: 'Desktop framework:',
-            choices: [
-                { name: 'Tauri (Recommended - smaller, faster)', value: 'tauri' },
-                { name: 'Electron (Larger, more compatible)', value: 'electron' }
-            ],
-            when: (ans) => ans.platforms.some(p => ['windows', 'macos', 'linux'].includes(p))
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Project name:',
+        default: 'my-select-app',
+        validate: (input) => {
+          if (/^[a-z0-9-]+$/.test(input)) return true;
+          return 'Project name must be lowercase with hyphens only';
         }
+      }
     ]);
+    name = answers.name;
+  }
+
+  const projectDir = path.resolve(process.cwd(), name);
+
+  // Check if directory exists
+  if (await fs.pathExists(projectDir)) {
+    console.log(chalk.red(`\n❌ Directory "${name}" already exists.\n`));
+    process.exit(1);
+  }
+
+  // Ask for project details
+  const answers = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'template',
+      message: 'Select a template:',
+      choices: [
+        { name: 'React + Vite', value: 'react' },
+        { name: 'Vue + Vite', value: 'vue' },
+        { name: 'Vanilla JavaScript', value: 'vanilla' }
+      ],
+      default: options.template
+    },
+    {
+      type: 'checkbox',
+      name: 'platforms',
+      message: 'Target platforms:',
+      choices: [
+        { name: 'Web', value: 'web', checked: true },
+        { name: 'Windows', value: 'windows' },
+        { name: 'macOS', value: 'macos' },
+        { name: 'Linux', value: 'linux' }
+      ]
+    },
+    {
+      type: 'list',
+      name: 'desktopFramework',
+      message: 'Desktop framework:',
+      choices: [
+        { name: 'Tauri (Recommended - smaller, faster)', value: 'tauri' },
+        { name: 'Electron (Larger, more compatible)', value: 'electron' }
+      ],
+      when: (ans) => ans.platforms.some(p => ['windows', 'macos', 'linux'].includes(p))
+    }
+  ]);
+
+  const spinner = ora('Creating project...').start();
+
+  try {
+    // Create project directory
+    await fs.ensureDir(projectDir);
+
+    // Create select.json config
+    const selectConfig = {
+      name: name,
+      version: '1.0.0',
+      description: 'A Select app',
+      platforms: answers.platforms,
+      desktop: {
+        framework: answers.desktopFramework || 'tauri'
+      },
+      build: {
+        command: 'npm run build',
+        devCommand: 'npm run dev',
+        outDir: 'dist'
+      }
+    };
+
+    await fs.writeJson(path.join(projectDir, 'select.json'), selectConfig, { spaces: 2 });
+
+    // Create basic package.json
+    const packageJson = {
+      name: name,
+      version: '1.0.0',
+      private: true,
+      scripts: {
+        dev: 'vite',
+        build: 'vite build',
+        preview: 'vite preview',
+        'slct:build': 'slct build all',
+        'slct:deploy': 'slct deploy'
+      },
+      dependencies: {},
+      devDependencies: {
+        'vite': '^5.0.0'
+      }
+    };
+
+    // Add template-specific dependencies
+    if (answers.template === 'react') {
+      packageJson.dependencies['react'] = '^18.2.0';
+      packageJson.dependencies['react-dom'] = '^18.2.0';
+      packageJson.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+    } else if (answers.template === 'vue') {
+      packageJson.dependencies['vue'] = '^3.4.0';
+      packageJson.devDependencies['@vitejs/plugin-vue'] = '^4.5.0';
+    }
 
-    const spinner = ora('Creating project...').start();
-
-    try {
-        // Create project directory
-        await fs.ensureDir(projectDir);
-
-        // Create select.json config
-        const selectConfig = {
-            name: name,
-            version: '1.0.0',
-            description: 'A Select app',
-            platforms: answers.platforms,
-            desktop: {
-                framework: answers.desktopFramework || 'tauri'
-            },
-            build: {
-                command: 'npm run build',
-                devCommand: 'npm run dev',
-                outDir: 'dist'
-            }
-        };
-
-        await fs.writeJson(path.join(projectDir, 'select.json'), selectConfig, { spaces: 2 });
-
-        // Create basic package.json
-        const packageJson = {
-            name: name,
-            version: '1.0.0',
-            private: true,
-            scripts: {
-                dev: 'vite',
-                build: 'vite build',
-                preview: 'vite preview',
-                'slct:build': 'slct build all',
-                'slct:deploy': 'slct deploy'
-            },
-            dependencies: {},
-            devDependencies: {
-                'vite': '^5.0.0'
-            }
-        };
-
-        // Add template-specific dependencies
-        if (answers.template === 'react') {
-            packageJson.dependencies['react'] = '^18.2.0';
-            packageJson.dependencies['react-dom'] = '^18.2.0';
-            packageJson.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
-        } else if (answers.template === 'vue') {
-            packageJson.dependencies['vue'] = '^3.4.0';
-            packageJson.devDependencies['@vitejs/plugin-vue'] = '^4.5.0';
-        }
-
-        await fs.writeJson(path.join(projectDir, 'package.json'), packageJson, { spaces: 2 });
+    await fs.writeJson(path.join(projectDir, 'package.json'), packageJson, { spaces: 2 });
 
-        // Create basic index.html
-        const indexHtml = `<!DOCTYPE html>
+    // Create basic index.html
+    const indexHtml = `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -136,21 +136,22 @@ async function init(name, options) {
 </body>
 </html>`;
 
-        await fs.writeFile(path.join(projectDir, 'index.html'), indexHtml);
+    await fs.writeFile(path.join(projectDir, 'index.html'), indexHtml);
 
-        // Create src directory with basic file
-        await fs.ensureDir(path.join(projectDir, 'src'));
+    // Create src directory with basic file
+    await fs.ensureDir(path.join(projectDir, 'src'));
 
-        // Create GitHub Actions workflow
-        await createGithubWorkflow(projectDir, answers.desktopFramework || 'tauri', name);
+    // Create GitHub Actions workflow
+    await createGithubWorkflow(projectDir, answers.desktopFramework || 'tauri', name);
 
-        if (answers.template === 'react') {
-            await fs.writeFile(path.join(projectDir, 'src', 'main.jsx'), `import React from 'react'
+    if (answers.template === 'react') {
+      await fs.writeFile(path.join(projectDir, 'src', 'main.jsx'), `import React from 'react'
 import ReactDOM from 'react-dom/client'
+import './style.css'
 
 function App() {
     return (
-        <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+        <div className="app">
             <h1>Welcome to ${name}</h1>
             <p>Built with Select CLI</p>
         </div>
@@ -159,19 +160,88 @@ function App() {
 
 ReactDOM.createRoot(document.getElementById('app')).render(<App />)
 `);
-        } else {
-            await fs.writeFile(path.join(projectDir, 'src', 'main.js'), `document.getElementById('app').innerHTML = \`
-    <div style="padding: 2rem; font-family: system-ui;">
+      // Create React style.css
+      await fs.writeFile(path.join(projectDir, 'src', 'style.css'), `* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.app {
+    background: white;
+    padding: 3rem 4rem;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    text-align: center;
+}
+
+h1 {
+    color: #1a202c;
+    margin-bottom: 0.5rem;
+}
+
+p {
+    color: #718096;
+}
+`);
+    } else {
+      // Vanilla JS template
+      await fs.writeFile(path.join(projectDir, 'src', 'main.js'), `import './style.css'
+
+document.getElementById('app').innerHTML = \`
+    <div class="app">
         <h1>Welcome to ${name}</h1>
         <p>Built with Select CLI</p>
     </div>
 \`
 `);
-        }
+      // Create style.css for vanilla
+      await fs.writeFile(path.join(projectDir, 'src', 'style.css'), `* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.app {
+    background: white;
+    padding: 3rem 4rem;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    text-align: center;
+}
+
+h1 {
+    color: #1a202c;
+    margin-bottom: 0.5rem;
+}
+
+p {
+    color: #718096;
+}
+`);
+    }
 
-        spinner.succeed('Project created successfully!');
+    spinner.succeed('Project created successfully!');
 
-        console.log(chalk.green(`
+    console.log(chalk.green(`
 ✅ Project "${name}" created!
 
 Next steps:
@@ -181,33 +251,33 @@ Next steps:
 
 `));
 
-        // Check for required dependencies
-        await checkDependencies(answers);
+    // Check for required dependencies
+    await checkDependencies(answers);
 
-    } catch (error) {
-        spinner.fail('Failed to create project');
-        console.error(chalk.red(error.message));
-        process.exit(1);
-    }
+  } catch (error) {
+    spinner.fail('Failed to create project');
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
 }
 
 async function checkDependencies(answers) {
-    const hasDesktop = answers.platforms?.some(p => ['windows', 'macos', 'linux'].includes(p));
+  const hasDesktop = answers.platforms?.some(p => ['windows', 'macos', 'linux'].includes(p));
 
-    if (hasDesktop && answers.desktopFramework === 'tauri') {
-        console.log(chalk.yellow('\n⚠️  Tauri Requirements:'));
-        console.log(chalk.gray('   Run "slct build desktop" for detailed setup instructions.\n'));
-    }
+  if (hasDesktop && answers.desktopFramework === 'tauri') {
+    console.log(chalk.yellow('\n⚠️  Tauri Requirements:'));
+    console.log(chalk.gray('   Run "slct build desktop" for detailed setup instructions.\n'));
+  }
 }
 
 async function createGithubWorkflow(projectDir, framework, name) {
-    const workflowDir = path.join(projectDir, '.github', 'workflows');
-    await fs.ensureDir(workflowDir);
+  const workflowDir = path.join(projectDir, '.github', 'workflows');
+  await fs.ensureDir(workflowDir);
 
-    let workflowContent = '';
+  let workflowContent = '';
 
-    if (framework === 'tauri') {
-        workflowContent = `name: Build Apps
+  if (framework === 'tauri') {
+    workflowContent = `name: Build Apps
 on:
   push:
     branches: [ main ]
@@ -253,9 +323,9 @@ jobs:
           releaseDraft: true
           prerelease: false
 `;
-    } else {
-        // Electron Workflow
-        workflowContent = `name: Build Apps
+  } else {
+    // Electron Workflow
+    workflowContent = `name: Build Apps
 on:
   push:
     branches: [ main ]
@@ -287,9 +357,9 @@ jobs:
         env:
           GH_TOKEN: \${{ secrets.GITHUB_TOKEN }}
 `;
-    }
+  }
 
-    await fs.writeFile(path.join(workflowDir, 'build.yml'), workflowContent);
+  await fs.writeFile(path.join(workflowDir, 'build.yml'), workflowContent);
 }
 
 module.exports = init;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@iselect/select",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "Build and deploy apps for web, desktop, and mobile from a single codebase",
     "main": "lib/index.js",
     "bin": {