@iselect/select 1.0.1 → 1.0.4

package/lib/commands/build.js

@@ -55,47 +55,116 @@ async function build(target, options) {
     }
 }
 
-// ==================== PROJECT TYPE DETECTION ====================
-async function detectProjectType(projectPath) {
-    const hasPackageJson = await fs.pathExists(path.join(projectPath, 'package.json'));
-    const hasViteConfig = await fs.pathExists(path.join(projectPath, 'vite.config.js')) ||
-        await fs.pathExists(path.join(projectPath, 'vite.config.ts'));
-    const hasIndexHtml = await fs.pathExists(path.join(projectPath, 'index.html'));
-    const hasSrcMain = await fs.pathExists(path.join(projectPath, 'src', 'main.js')) ||
-        await fs.pathExists(path.join(projectPath, 'src', 'main.jsx')) ||
-        await fs.pathExists(path.join(projectPath, 'src', 'main.ts')) ||
-        await fs.pathExists(path.join(projectPath, 'src', 'main.tsx'));
-
-    // Check if package.json has a build script
-    let hasBuildScript = false;
-    if (hasPackageJson) {
-        try {
-            const pkg = await fs.readJson(path.join(projectPath, 'package.json'));
-            hasBuildScript = !!(pkg.scripts && pkg.scripts.build);
-        } catch { }
+// ==================== 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: '⚛️' },
+    'vite': { name: 'Vite', build: 'npm run build', output: 'dist', icon: '⚡' },
+    'astro': { name: 'Astro', build: 'npm run build', output: 'dist', icon: '🚀' },
+    'svelte': { name: 'Svelte', build: 'npm run build', output: 'build', icon: '🔶' },
+    'nuxt': { name: 'Nuxt', build: 'npm run build', output: '.nuxt', 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 };
+        }
     }
 
-    // Static site: has index.html but no package.json or no build script
-    if (hasIndexHtml && (!hasPackageJson || !hasBuildScript)) {
-        return 'static';
-    }
+    // 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 };
 
-    // Vite project
-    if (hasViteConfig) {
-        return 'vite';
-    }
+            for (const [dep, framework] of Object.entries(DEPENDENCY_SIGNATURES)) {
+                if (allDeps[dep]) {
+                    return { ...framework, detected: 'dependency', dependency: dep };
+                }
+            }
 
-    // Has package.json with build script
-    if (hasPackageJson && hasBuildScript) {
-        return 'bundled';
+            // Check for generic build script
+            if (pkg.scripts?.build) {
+                return {
+                    name: 'Custom',
+                    build: 'npm run build',
+                    output: 'dist',
+                    icon: '📦',
+                    detected: 'build-script'
+                };
+            }
+        } catch { }
     }
 
-    // Default to static if just has HTML
+    // 3. Static site detection
+    const hasIndexHtml = await fs.pathExists(path.join(projectPath, 'index.html'));
     if (hasIndexHtml) {
-        return 'static';
+        return {
+            name: 'Static',
+            build: null, // No build needed
+            output: '.',
+            icon: '📄',
+            detected: 'static'
+        };
     }
 
-    return 'unknown';
+    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 ====================
@@ -224,6 +293,37 @@ async function buildWeb(config, options) {
     const projectPath = process.cwd();
     const outputDir = path.resolve(projectPath, config.build?.outDir || 'dist');
 
+    // Check if npm install has been run (for projects with package.json)
+    const hasPackageJson = await fs.pathExists(path.join(projectPath, 'package.json'));
+    const hasNodeModules = await fs.pathExists(path.join(projectPath, 'node_modules'));
+
+    if (hasPackageJson && !hasNodeModules) {
+        console.log(chalk.yellow('⚠️  Dependencies not installed'));
+        console.log(chalk.gray('   Run: npm install\n'));
+
+        const answers = await inquirer.prompt([{
+            type: 'confirm',
+            name: 'install',
+            message: 'Run npm install now?',
+            default: true
+        }]);
+
+        if (answers.install) {
+            const spinner = ora('Installing dependencies...').start();
+            try {
+                execSync('npm install', { cwd: projectPath, stdio: 'pipe' });
+                spinner.succeed('Dependencies installed!');
+                console.log('');
+            } catch (error) {
+                spinner.fail('Failed to install dependencies');
+                throw error;
+            }
+        } else {
+            console.log(chalk.gray('   Skipping build.\n'));
+            return;
+        }
+    }
+
     // Check for --static flag
     if (options.static) {
         console.log(chalk.gray('   Mode: Static (--static flag)'));
@@ -242,40 +342,55 @@ async function buildWeb(config, options) {
         return;
     }
 
-    // Auto-detect project type
-    const projectType = await detectProjectType(projectPath);
-    console.log(chalk.gray(`   Detected: ${projectType} project`));
+    // Auto-detect framework (Vercel-style)
+    const framework = await detectFramework(projectPath);
 
-    if (projectType === 'static') {
-        console.log(chalk.gray('   Mode: Static site (copying files directly)\n'));
-        await copyStaticFiles(projectPath, outputDir);
-        console.log(chalk.green('\n✅ Static web build complete!'));
-        console.log(chalk.gray(`   Output: ${outputDir}/\n`));
-        return;
-    }
-
-    if (projectType === 'unknown') {
+    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
-    const spinner = ora('Running build command...').start();
+    // 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 {
-        const buildCommand = config.build?.command || 'npm run build';
         execSync(buildCommand, {
             stdio: 'inherit',
             cwd: projectPath
         });
-        spinner.succeed('Web build complete!');
+        spinner.succeed(`${framework.icon} ${framework.name} build complete!`);
 
         // Validate output
-        await validateBuildOutput(outputDir);
+        await validateBuildOutput(finalOutputDir);
 
-        console.log(chalk.gray(`   Output: ${outputDir}/\n`));
+        console.log(chalk.gray(`   Output: ${finalOutputDir}/\n`));
     } catch (error) {
         spinner.fail('Web build failed');
         throw error;

package/lib/commands/deploy.js

@@ -121,27 +121,107 @@ async function deploy(options) {
 
     // Web App
     if (config.platforms.includes('web')) {
-        const buildDir = path.resolve(process.cwd(), config.build?.outDir || 'dist');
-        if (await fs.pathExists(buildDir)) {
-            const zipPath = path.join(os.tmpdir(), `web-build-${Date.now()}.zip`);
-            const output = fs.createWriteStream(zipPath);
-            const archive = archiver('zip', { zlib: { level: 9 } });
-
-            spinner.text = 'Zipping web build...';
-
-            await new Promise((resolve, reject) => {
-                output.on('close', resolve);
-                archive.on('error', reject);
-                archive.pipe(output);
-                archive.directory(buildDir, false);
-                archive.finalize();
-            });
-
-            form.append('web', fs.createReadStream(zipPath));
-            manifest.platforms.push('web');
-            foundArtifacts++;
+        const isStaticSite = !config.build?.command;
+
+        if (isStaticSite) {
+            // Static site - upload files directly (no zipping)
+            spinner.text = 'Preparing static files for upload...';
+
+            // For static sites, the source IS the dist
+            const sourceDir = process.cwd();
+            const staticFiles = ['index.html', 'style.css', 'app.js', 'script.js', 'main.js'];
+            const staticFolders = ['assets', 'css', 'js', 'images', 'fonts'];
+
+            const filesToUpload = [];
+
+            // Collect individual files
+            for (const file of staticFiles) {
+                const filePath = path.join(sourceDir, file);
+                if (await fs.pathExists(filePath)) {
+                    const content = await fs.readFile(filePath);
+                    const hash = require('crypto').createHash('md5').update(content).digest('hex').slice(0, 8);
+                    filesToUpload.push({ path: file, content, hash });
+                }
+            }
+
+            // Collect files from folders
+            for (const folder of staticFolders) {
+                const folderPath = path.join(sourceDir, folder);
+                if (await fs.pathExists(folderPath)) {
+                    const files = await fs.readdir(folderPath, { recursive: true });
+                    for (const file of files) {
+                        const fullPath = path.join(folderPath, file);
+                        const stat = await fs.stat(fullPath);
+                        if (stat.isFile()) {
+                            const content = await fs.readFile(fullPath);
+                            const hash = require('crypto').createHash('md5').update(content).digest('hex').slice(0, 8);
+                            filesToUpload.push({ path: `${folder}/${file}`, content, hash });
+                        }
+                    }
+                }
+            }
+
+            if (filesToUpload.length === 0) {
+                spinner.warn('No static files found to deploy');
+            } else {
+                spinner.text = `Found ${filesToUpload.length} files to upload...`;
+
+                // Create a manifest of files with hashes
+                manifest.staticFiles = filesToUpload.map(f => ({ path: f.path, hash: f.hash }));
+
+                // For now, still use zip but with the static files only
+                // TODO: Switch to direct R2 upload when backend supports it
+                const zipPath = path.join(os.tmpdir(), `static-build-${Date.now()}.zip`);
+                const output = fs.createWriteStream(zipPath);
+                const archive = archiver('zip', { zlib: { level: 9 } });
+
+                spinner.text = 'Creating deployment package...';
+
+                await new Promise((resolve, reject) => {
+                    output.on('close', resolve);
+                    archive.on('error', reject);
+                    archive.pipe(output);
+                    for (const file of filesToUpload) {
+                        archive.append(file.content, { name: file.path });
+                    }
+                    archive.finalize();
+                });
+
+                form.append('web', fs.createReadStream(zipPath));
+                manifest.platforms.push('web');
+                manifest.deployMode = 'static';
+                foundArtifacts++;
+
+                // Log file hashes for potential future deduplication
+                console.log(chalk.gray(`\n   Files to deploy:`));
+                filesToUpload.forEach(f => {
+                    console.log(chalk.gray(`     ${f.hash} ${f.path}`));
+                });
+            }
         } else {
-            spinner.warn('Web build directory not found (skipping web upload)');
+            // Bundled project - use dist directory
+            const buildDir = path.resolve(process.cwd(), config.build?.outDir || 'dist');
+            if (await fs.pathExists(buildDir)) {
+                const zipPath = path.join(os.tmpdir(), `web-build-${Date.now()}.zip`);
+                const output = fs.createWriteStream(zipPath);
+                const archive = archiver('zip', { zlib: { level: 9 } });
+
+                spinner.text = 'Zipping web build...';
+
+                await new Promise((resolve, reject) => {
+                    output.on('close', resolve);
+                    archive.on('error', reject);
+                    archive.pipe(output);
+                    archive.directory(buildDir, false);
+                    archive.finalize();
+                });
+
+                form.append('web', fs.createReadStream(zipPath));
+                manifest.platforms.push('web');
+                foundArtifacts++;
+            } else {
+                spinner.warn('Web build directory not found (skipping web upload)');
+            }
         }
     } else if (foundArtifacts === 0) { // Only error if NO artifacts found and web not requested
         spinner.fail('No build artifacts found!');

package/lib/commands/init.js

@@ -5,125 +5,218 @@ 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 + Vite', value: 'vanilla' },
+        { name: 'Pure Static (no bundler)', value: 'static' }
+      ],
+      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'
+      }
+    };
+
+    // Add build config only for non-static templates
+    if (answers.template !== 'static') {
+      selectConfig.build = {
+        command: 'npm run build',
+        devCommand: 'npm run dev',
+        outDir: 'dist'
+      };
+    }
 
-    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, 'select.json'), selectConfig, { spaces: 2 });
+
+    // Only create package.json for bundled templates (not static)
+    if (answers.template !== 'static') {
+      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 });
+    }
+
+    // Handle template-specific file generation
+    if (answers.template === 'static') {
+      // Pure static template - no bundler, files in root
+      await fs.writeFile(path.join(projectDir, 'index.html'), `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${name}</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="app">
+        <div class="container">
+            <h1>Welcome to ${name}</h1>
+            <p>Built with Select CLI</p>
+            <button id="counter-btn">Count: 0</button>
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>`);
+
+      await fs.writeFile(path.join(projectDir, '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;
+}
+
+.container {
+    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;
+    margin-bottom: 1.5rem;
+}
+
+button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 0.75rem 2rem;
+    font-size: 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+}
+`);
+
+      await fs.writeFile(path.join(projectDir, 'app.js'), `// Simple counter example
+let count = 0;
+const button = document.getElementById('counter-btn');
 
-        await fs.writeJson(path.join(projectDir, 'package.json'), packageJson, { spaces: 2 });
+button.addEventListener('click', () => {
+    count++;
+    button.textContent = 'Count: ' + count;
+});
+
+console.log('${name} loaded!');
+`);
 
-        // Create basic index.html
-        const indexHtml = `<!DOCTYPE html>
+    } else {
+      // Vite-based templates (react, vue, vanilla)
+      const indexHtml = `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -132,25 +225,21 @@ async function init(name, options) {
 </head>
 <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.${answers.template === 'vanilla' ? 'js' : answers.template === 'react' ? 'jsx' : 'js'}"></script>
+    <script type="module" src="/src/main.${answers.template === 'react' ? 'jsx' : 'js'}"></script>
 </body>
 </html>`;
 
-        await fs.writeFile(path.join(projectDir, 'index.html'), indexHtml);
-
-        // Create src directory with basic file
-        await fs.ensureDir(path.join(projectDir, 'src'));
+      await fs.writeFile(path.join(projectDir, 'index.html'), indexHtml);
+      await fs.ensureDir(path.join(projectDir, 'src'));
 
-        // 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 +248,74 @@ 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;">
+      } 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 Vite templates
+      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;
+}
 
-        spinner.succeed('Project created successfully!');
+p {
+    color: #718096;
+}
+`);
+    }
+
+    // Create GitHub Actions workflow (only for non-static with desktop targets)
+    if (answers.template !== 'static' && answers.platforms.some(p => ['windows', 'macos', 'linux'].includes(p))) {
+      await createGithubWorkflow(projectDir, answers.desktopFramework || 'tauri', name);
+    }
+
+    spinner.succeed('Project created successfully!');
+
+    // Different next steps for static vs bundled
+    if (answers.template === 'static') {
+      console.log(chalk.green(`
+✅ Project "${name}" created!
+
+Next steps:
+  ${chalk.cyan(`cd ${name}`)}
+  ${chalk.cyan('slct deploy')}
 
-        console.log(chalk.green(`
+No npm install needed - it's pure HTML/CSS/JS!
+`));
+    } else {
+      console.log(chalk.green(`
 ✅ Project "${name}" created!
 
 Next steps:
@@ -180,34 +324,35 @@ Next steps:
   ${chalk.cyan('slct build')}
 
 `));
+    }
 
-        // 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 +398,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 +432,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.1",
+    "version": "1.0.4",
     "description": "Build and deploy apps for web, desktop, and mobile from a single codebase",
     "main": "lib/index.js",
     "bin": {