npm - rizzo-css - Versions diffs - 0.0.17 → 0.0.19 - Mend

rizzo-css 0.0.17 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (261) hide show

package/bin/rizzo-css.js CHANGED Viewed

@@ -10,21 +10,61 @@ const RIZZO_CONFIG_FILE = 'rizzo-css.json';
 const COMMANDS = ['init', 'add', 'theme', 'help'];
 const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
-/** Template options per framework for "create new". full-app = full Astro/Svelte app scaffold; full = vanilla with theme switcher + js; minimal = CSS + single HTML only. */
+/** Full = everything we ship. Minimal = recommended starting set. Manual = you choose. */
 const TEMPLATES = {
   vanilla: [
-    { value: 'full', label: 'Full — index.html + theme switcher, js/main.js, icons, README' },
-    { value: 'minimal', label: 'Minimal — index.html + CSS link only' },
+    { value: 'full', label: 'Full — index.html + theme switcher, js/main.js, icons, component showcase, README' },
+    { value: 'minimal', label: 'Minimal — index.html + CSS + js/main.js (recommended starter; no showcase)' },
+    { value: 'manual', label: 'Manual — index.html + CSS; pick components to add their pages + js/main.js' },
   ],
   astro: [
-    { value: 'full-app', label: 'Full app — complete Astro project with Rizzo CSS' },
-    { value: 'minimal', label: 'Minimal — public/css + index.html with CSS link' },
+    { value: 'full', label: 'Full — Astro app + all 25 components (config, one page, README, LICENSE, .env.example)' },
+    { value: 'minimal', label: 'Minimal — Astro app + recommended components (Button, Badge, Card, Modal, Tabs, ThemeSwitcher, FormGroup, Alert, Toast, Dropdown)' },
+    { value: 'manual', label: 'Manual — minimal base + pick the components you want' },
   ],
   svelte: [
-    { value: 'full-app', label: 'Full app — complete SvelteKit project with Rizzo CSS' },
-    { value: 'minimal', label: 'Minimal — static/css + index.html with CSS link' },
+    { value: 'full', label: 'Full — SvelteKit app + all 25 components (config, one page, README, LICENSE, .env.example)' },
+    { value: 'minimal', label: 'Minimal — SvelteKit app + recommended components (Button, Badge, Card, Modal, Tabs, ThemeSwitcher, FormGroup, Alert, Toast, Dropdown)' },
+    { value: 'manual', label: 'Manual — minimal base + pick the components you want' },
   ],
 };
+const VANILLA_MINIMAL_README = `# Vanilla + Rizzo CSS (minimal)
+Minimal starter: HTML + CSS + js/main.js + recommended component pages. Scaffolded with \`npx rizzo-css init --framework vanilla --template minimal\`.
+- Open \`index.html\` in a browser or serve the folder. Edit \`index.html\` and add your content. CSS: \`css/rizzo.min.css\`. Script: \`js/main.js\` (already linked).
+- \`components/\` contains HTML pages for the recommended set (Button, Badge, Card, Modal, Tabs, ThemeSwitcher, FormGroup, Alert, Toast, Dropdown). Open \`components/index.html\` to browse them.
+- Set a theme: \`<html data-theme="github-dark-classic">\` (see \`npx rizzo-css theme\` for all themes).
+- For the full component showcase and icons, use template **Full** or copy from a Full scaffold.
+Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
+`;
+const VANILLA_MANUAL_README = `# Vanilla + Rizzo CSS (manual)
+Manual setup: HTML + CSS, plus any component pages you chose. Scaffolded with \`npx rizzo-css init --framework vanilla --template manual\`.
+- Open \`index.html\` in a browser or serve the folder with any static server.
+- Edit \`index.html\` and add your content. CSS: \`css/rizzo.min.css\`.
+- If you picked components, \`components/\` has their HTML pages and \`js/main.js\` is included (open \`components/index.html\` to browse).
+- Set a theme: \`<html data-theme="github-dark-classic">\` (see \`npx rizzo-css theme\` for all themes).
+**If you chose no components:** To add component JavaScript (modal, dropdown, tabs, toast, theme switcher, etc.), use the [Vanilla component docs](https://rizzo-css.vercel.app/docs/vanilla/components) or run \`npx rizzo-css init\` with Vanilla → **Full** in a temp folder and copy \`js/main.js\` and \`icons/\` into this project.
+Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
+`;
+const FALLBACK_MINIMAL_README = `# Rizzo CSS (minimal)
+Minimal project with Rizzo CSS. Add a proper framework (e.g. \`npm create astro@latest\` or \`npm create svelte@latest\`), then run \`npx rizzo-css add\` in the project.
+- This folder has a single HTML file and \`css/rizzo.min.css\`.
+- For a full app with config and tooling, use the framework's create command and \`rizzo-css add\`.
+Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
+`;
 // Dark and light themes (order matches scaffold optgroups and config/themes.ts)
 const DARK_THEMES = [
   'github-dark-classic',
@@ -59,11 +99,20 @@ const ASTRO_COMPONENTS = [
   'Modal', 'Toast', 'Table', 'ThemeSwitcher',
 ];
-// Recommended subset for "Recommended set" option (keeps CLI simple; power users can pick)
+// Recommended subset for Full/Minimal (same for Astro, Svelte, Vanilla)
 const RECOMMENDED_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Modal', 'Tabs', 'ThemeSwitcher', 'FormGroup', 'Alert', 'Toast', 'Dropdown',
 ];
+// Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug
+const VANILLA_COMPONENT_SLUGS = {
+  Button: 'button', Badge: 'badge', Card: 'cards', Divider: 'divider', Spinner: 'spinner', ProgressBar: 'progress-bar',
+  Avatar: 'avatar', Alert: 'alert', Breadcrumb: 'breadcrumb', FormGroup: 'forms', Input: 'forms', Checkbox: 'forms',
+  Textarea: 'forms', Select: 'forms', Radio: 'forms', CopyToClipboard: 'copy-to-clipboard', Tooltip: 'tooltip',
+  Pagination: 'pagination', Tabs: 'tabs', Accordion: 'accordion', Dropdown: 'dropdown', Modal: 'modal',
+  Toast: 'toast', Table: 'table', ThemeSwitcher: 'theme-switcher',
+};
 // ANSI colors for CLI (framework logo colors)
 const C = {
   reset: '\u001b[0m',
@@ -86,6 +135,14 @@ function getCssPath() {
   return join(getPackageRoot(), 'dist', 'rizzo.min.css');
 }
+/** Copy the package LICENSE into the project dir. Call after every scaffold so every install includes a license. */
+function copyPackageLicense(projectDir) {
+  const licensePath = join(getPackageRoot(), 'LICENSE');
+  if (existsSync(licensePath)) {
+    copyFileSync(licensePath, join(projectDir, 'LICENSE'));
+  }
+}
 /** Read rizzo-css.json from cwd. Returns { targetDir?, framework?, packageManager? } or null. */
 function readRizzoConfig(cwd) {
   if (!cwd || !existsSync(cwd)) return null;
@@ -127,6 +184,19 @@ function getFlagValue(argv, flag) {
   return i !== -1 && argv[i + 1] != null ? argv[i + 1] : null;
 }
+/** Get positional args for a command (excludes --flag and --flag value). Used for e.g. add Button ThemeSwitcher. */
+function getPositionalArgs(argv) {
+  const positionals = [];
+  for (let i = 1; i < argv.length; i++) {
+    if (argv[i].startsWith('--')) {
+      if (!argv[i].includes('=')) i++;
+      continue;
+    }
+    positionals.push(argv[i]);
+  }
+  return positionals;
+}
 /** Package manager detection (manual: lockfiles + packageManager field). Returns { agent, command } or null if none found. */
 function detectPackageManager(cwd) {
   if (!cwd || !existsSync(cwd)) return null;
@@ -189,10 +259,10 @@ async function promptPackageManager(projectDir) {
   return selectMenu(options, '? Package manager (for install and run commands)');
 }
-/** Prompt user to select template for the chosen framework. Returns template value (full-app, full, or minimal). */
+/** Prompt user to select Full or Manual for the chosen framework. Returns 'full' or 'manual'. */
 async function promptTemplate(framework) {
   const options = TEMPLATES[framework] || TEMPLATES.vanilla;
-  return selectMenu(options, '? Template');
+  return selectMenu(options, '? Full or Manual?');
 }
 function question(prompt) {
@@ -476,16 +546,16 @@ Usage (use your package manager):
   bunx rizzo-css <command> [options]
 Commands:
-  init    Add Rizzo to existing project or scaffold new one (framework → existing vs new → themes/components/PM)
-  add     Copy Rizzo CSS into the current project (auto-detects Vanilla/Astro/Svelte; use rizzo-css.json if present)
+  init    New project = Full (everything) | Minimal (recommended set) | Manual (pick what you want). Existing = drop in CSS + hand-pick. First: framework, then existing vs new.
+  add     Same as init → existing: drop in CSS + hand-pick components (framework detected or from rizzo-css.json)
   theme   List all available themes (use in init or set data-theme on <html>)
   help    Show this help
 Options (init):
-  --yes             Non-interactive: scaffold new in cwd with defaults (framework: astro, template: full-app, no components)
+  --yes             Non-interactive: scaffold new in cwd with defaults (framework: astro, template: full)
   --framework <fw>  vanilla | astro | svelte (with --yes; otherwise first prompt)
-  --template <t>    full-app (Astro/Svelte) or full | minimal (Vanilla); with --yes defaults to full-app or full
-  --install         After scaffolding, run package manager install (full-app only)
+  --template <t>    full | minimal | manual (all frameworks); with --yes defaults to full
+  --install         After scaffolding, run package manager install (new project)
   --no-install      Do not run install
   --write-config    Write rizzo-css.json (targetDir, framework, packageManager) in the project
@@ -514,10 +584,11 @@ Examples:
   npx rizzo-css init
   npx rizzo-css init --yes --framework astro --install --write-config
   npx rizzo-css init --yes --framework vanilla
-  npx rizzo-css init --yes --framework svelte --template minimal
+  npx rizzo-css init --yes --framework svelte --template full
   npx rizzo-css add
+  npx rizzo-css add Button
+  npx rizzo-css add Button ThemeSwitcher --path public/css --framework svelte
   npx rizzo-css add --install-package
-  npx rizzo-css add --path public/css --framework svelte
   npx rizzo-css theme
 Docs: https://rizzo-css.vercel.app
@@ -618,67 +689,33 @@ function getLinkHrefForTargetDir(framework, targetDir) {
   return base ? base + '/' + file : file;
 }
-function cmdAdd(argv) {
+async function cmdAdd(argv) {
   const customPath = getFlagValue(argv, '--path');
   const explicitFrameworkRaw = getFlagValue(argv, '--framework');
   const explicitFramework = explicitFrameworkRaw && FRAMEWORKS.includes(explicitFrameworkRaw.toLowerCase()) ? explicitFrameworkRaw.toLowerCase() : null;
   const installPackage = hasFlag(argv, '--install-package');
   const noInstall = hasFlag(argv, '--no-install');
+  const positionals = getPositionalArgs(argv);
   const cwd = process.cwd();
   const config = readRizzoConfig(cwd);
-  let framework = explicitFramework || (config && config.framework) || detectFramework(cwd);
-  const paths = getFrameworkCssPaths(framework);
-  const targetDir = customPath || (config && config.targetDir) || paths.targetDir;
-  const targetFile = join(cwd, targetDir, 'rizzo.min.css');
-  const cssSource = getCssPath();
-  if (!existsSync(cssSource)) {
-    console.error('Error: Rizzo CSS build not found. Run from repo root: pnpm build:css');
-    process.exit(1);
-  }
-  const pm = (config && config.packageManager)
-    ? getPackageManagerCommands({ agent: config.packageManager, command: config.packageManager })
-    : resolvePackageManager(cwd);
-  const addPkg = pm.add('rizzo-css');
-  const linkHref = customPath ? getLinkHrefForTargetDir(framework, targetDir) : paths.linkHref;
-  const cliExample = pm.dlx('rizzo-css theme');
-  const initExample = pm.dlx('rizzo-css init');
-  mkdirSync(join(cwd, targetDir), { recursive: true });
-  copyFileSync(cssSource, targetFile);
-  console.log('\n✓ Rizzo CSS copied to ' + targetFile);
+  const options = {
+    config,
+    targetDir: customPath || (config && config.targetDir) || undefined,
+    preselectedComponents: positionals.length > 0 ? positionals : undefined,
+  };
+  await runAddToExisting(explicitFramework, options);
   if (installPackage && !noInstall) {
+    const pm = (config && config.packageManager)
+      ? getPackageManagerCommands({ agent: config.packageManager, command: config.packageManager })
+      : resolvePackageManager(cwd);
+    const addPkg = pm.add('rizzo-css');
     console.log('\nRunning: ' + addPkg);
     const code = runInDir(cwd, addPkg);
     if (code !== 0) {
       console.error('\nInstall failed (exit ' + code + '). You can run manually: ' + addPkg);
     }
   }
-  if (framework === 'svelte') {
-    console.log('\nDetected Svelte/SvelteKit. Add to your root layout (e.g. src/app.html):\n');
-    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
-    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: ' + cliExample + ')');
-    console.log('\nTo add Rizzo Svelte components later: copy from this package\'s scaffold or run ' + initExample + ' and pick Svelte + components in an empty folder, then copy the generated files.\n');
-  } else if (framework === 'astro') {
-    console.log('\nDetected Astro. Add to your layout (e.g. src/layouts/Layout.astro):\n');
-    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
-    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: ' + cliExample + ')\n');
-  } else {
-    console.log('\nAdd to your HTML or layout:\n');
-    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
-    if (framework === 'vanilla') {
-      console.log('\nVanilla JS: same CSS and component classes as Astro/Svelte. Use the same BEM markup from the docs.');
-    }
-    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: ' + cliExample + ')');
-  }
-  if (!installPackage || noInstall) {
-    console.log('\nTo install the package (CLI + components): ' + addPkg);
-  }
-  console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
 function getScaffoldSvelteDir() {
@@ -697,6 +734,61 @@ function getScaffoldVanillaIconsDir() {
   return join(getPackageRoot(), 'scaffold', 'vanilla', 'icons');
 }
+function getScaffoldVanillaComponentsDir() {
+  return join(getPackageRoot(), 'scaffold', 'vanilla', 'components');
+}
+/** Copy selected Vanilla component HTML files into projectDir/components/, with replacements. Writes a simple components/index.html. */
+function copyVanillaComponents(projectDir, selectedNames, replacements) {
+  const srcDir = getScaffoldVanillaComponentsDir();
+  if (!existsSync(srcDir)) return;
+  const linkHref = replacements['{{LINK_HREF}}'] || 'css/rizzo.min.css';
+  const slugsToCopy = [];
+  const seen = new Set();
+  for (const name of selectedNames) {
+    const slug = VANILLA_COMPONENT_SLUGS[name];
+    if (slug && !seen.has(slug)) {
+      seen.add(slug);
+      slugsToCopy.push(slug);
+    }
+  }
+  if (slugsToCopy.length === 0) return;
+  const destDir = join(projectDir, 'components');
+  mkdirSync(destDir, { recursive: true });
+  for (const slug of slugsToCopy) {
+    const src = join(srcDir, slug + '.html');
+    if (existsSync(src)) {
+      let content = readFileSync(src, 'utf8');
+      for (const [key, value] of Object.entries(replacements)) {
+        content = content.split(key).join(value);
+      }
+      writeFileSync(join(destDir, slug + '.html'), content, 'utf8');
+    }
+  }
+  const indexLinks = slugsToCopy.map((s) => '    <li><a href="' + s + '.html">' + s + '</a></li>').join('\n');
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en" data-theme="${replacements['{{DATA_THEME}}'] || 'github-dark-classic'}">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Components</title>
+  <link rel="stylesheet" href="../${linkHref}" />
+</head>
+<body>
+  <main style="padding: var(--spacing-6); max-width: 60ch;">
+    <h1>Components</h1>
+    <ul>
+${indexLinks}
+    </ul>
+    <p><a href="../index.html">Back to index</a></p>
+  </main>
+  <script src="../js/main.js"></script>
+</body>
+</html>
+`;
+  writeFileSync(join(destDir, 'index.html'), indexHtml, 'utf8');
+}
 /** Copy Rizzo icons into the project for the given framework. */
 function copyRizzoIcons(projectDir, framework) {
   if (framework === 'astro') {
@@ -720,12 +812,12 @@ function copyRizzoIcons(projectDir, framework) {
   }
 }
-function getScaffoldAstroAppDir() {
-  return join(getPackageRoot(), 'scaffold', 'astro-app');
+function getScaffoldAstroMinimalDir() {
+  return join(getPackageRoot(), 'scaffold', 'astro-minimal');
 }
-function getScaffoldSvelteAppDir() {
-  return join(getPackageRoot(), 'scaffold', 'svelte-app');
+function getScaffoldSvelteMinimalDir() {
+  return join(getPackageRoot(), 'scaffold', 'svelte-minimal');
 }
 function copyDirRecursive(src, dest) {
@@ -847,7 +939,7 @@ function copyAstroComponents(projectDir, selectedNames) {
   }
 }
-/** Add Rizzo CSS (and optional components) to an existing project in cwd. frameworkOverride: when set (from init), skip framework prompt. options: { config? }. */
+/** Add Rizzo CSS and hand-picked components to an existing project in cwd. frameworkOverride: when set (from init), skip framework prompt. options: { config?, targetDir? }. */
 async function runAddToExisting(frameworkOverride, options) {
   const cwd = process.cwd();
   const config = (options && options.config) || readRizzoConfig(cwd);
@@ -866,14 +958,31 @@ async function runAddToExisting(frameworkOverride, options) {
     framework = await selectMenu(frameworkOptions, frameworkPrompt);
   }
-  const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
-  const selectedComponents = componentList.length > 0
-    ? await promptComponentChoice(componentList, framework)
-    : [];
+  const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : framework === 'vanilla' ? Object.keys(VANILLA_COMPONENT_SLUGS) : [];
+  const preselected = options.preselectedComponents && options.preselectedComponents.length > 0 ? options.preselectedComponents : null;
+  let selectedComponents;
+  if (preselected && componentList.length > 0) {
+    const valid = preselected.filter((c) => componentList.includes(c));
+    const invalid = preselected.filter((c) => !componentList.includes(c));
+    if (invalid.length > 0) {
+      console.log('Unknown or unsupported component name(s) (skipped): ' + invalid.join(', '));
+    }
+    selectedComponents = valid;
+    if (selectedComponents.length > 0) {
+      const n = selectedComponents.length;
+      console.log('Adding ' + n + ' component' + (n === 1 ? '' : 's') + ': ' + selectedComponents.join(', '));
+    }
+  } else if (preselected && componentList.length === 0) {
+    selectedComponents = [];
+  } else {
+    selectedComponents = componentList.length > 0
+      ? await promptComponentChoice(componentList, framework)
+      : [];
+  }
   let theme, defaultDark, defaultLight;
   const wantsThemeSwitcher = selectedComponents.includes('ThemeSwitcher');
-  if (wantsThemeSwitcher) {
+  if (wantsThemeSwitcher && !preselected) {
     const setDefaults = await selectMenu(
       [
         { value: true, label: 'Yes — choose default dark, default light, and initial theme' },
@@ -904,7 +1013,8 @@ async function runAddToExisting(frameworkOverride, options) {
   }
   const paths = getFrameworkCssPaths(framework);
-  const targetDir = join(cwd, paths.targetDir);
+  const targetDirRaw = (options && options.targetDir) || (config && config.targetDir) || paths.targetDir;
+  const targetDir = join(cwd, targetDirRaw);
   const cssTarget = join(targetDir, 'rizzo.min.css');
   mkdirSync(targetDir, { recursive: true });
   copyFileSync(cssSource, cssTarget);
@@ -914,9 +1024,13 @@ async function runAddToExisting(frameworkOverride, options) {
     copySvelteComponents(cwd, selectedComponents);
   } else if (framework === 'astro' && selectedComponents.length > 0) {
     copyAstroComponents(cwd, selectedComponents);
+  } else if (framework === 'vanilla' && selectedComponents.length > 0) {
+    const linkHrefForVanilla = (options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref;
+    const vanillaRepl = { '{{LINK_HREF}}': linkHrefForVanilla, '{{DATA_THEME}}': theme };
+    copyVanillaComponents(cwd, selectedComponents, vanillaRepl);
   }
-  const linkHref = paths.linkHref;
+  const linkHref = (options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref;
   const pm = (config && config.packageManager)
     ? getPackageManagerCommands({ agent: config.packageManager, command: config.packageManager })
     : resolvePackageManager(cwd);
@@ -945,6 +1059,9 @@ async function runAddToExisting(frameworkOverride, options) {
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
     console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: ' + cliExample + ')');
     console.log('  For theme "system": default dark ' + defaultDark + ', default light ' + defaultLight);
+    if (selectedComponents.length > 0) {
+      console.log('  Component HTML files are in components/.');
+    }
   }
   console.log('\nTo install the package (CLI + components): ' + pm.add('rizzo-css'));
   console.log('\nDocs: https://rizzo-css.vercel.app\n');
@@ -963,17 +1080,22 @@ async function cmdInit(argv) {
   let initMode;
   let name = '';
   let theme, defaultDark, defaultLight;
-  let selectedComponents = [];
   let selectedPm;
   let selectedTemplate;
+  let selectedComponents = [];
   if (yes) {
     const frameworkArg = getFlagValue(argv, '--framework');
     framework = (frameworkArg && FRAMEWORKS.includes(frameworkArg.toLowerCase())) ? frameworkArg.toLowerCase() : (config && config.framework) || 'astro';
     initMode = 'new';
     const templateArg = getFlagValue(argv, '--template');
-    selectedTemplate = (templateArg && (templateArg === 'full-app' || templateArg === 'full' || templateArg === 'minimal')) ? templateArg : (framework === 'vanilla' ? 'full' : 'full-app');
-    if (framework === 'vanilla' && selectedTemplate === 'full-app') selectedTemplate = 'full';
+    selectedTemplate = (templateArg && (templateArg === 'full' || templateArg === 'minimal' || templateArg === 'manual')) ? templateArg : 'full';
+    if (selectedTemplate === 'full' && (framework === 'astro' || framework === 'svelte')) {
+      selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : [...ASTRO_COMPONENTS];
+    } else if (selectedTemplate === 'minimal' && (framework === 'astro' || framework === 'svelte')) {
+      const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : ASTRO_COMPONENTS;
+      selectedComponents = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
+    }
     const projectDir = cwd;
     const resolved = resolvePackageManager(projectDir, cwd);
     selectedPm = (config && config.packageManager) || resolved.agent || 'npm';
@@ -1012,17 +1134,29 @@ async function cmdInit(argv) {
     );
     name = projectChoice === 'name' ? await question('Project name (folder name): ') : '';
-    selectedTemplate = await promptTemplate(framework);
+    selectedTemplate = await selectMenu(TEMPLATES[framework] || TEMPLATES.vanilla, '? Full, Minimal, or Manual?');
-    const themeOut = await promptThemes();
-    theme = themeOut.theme;
-    defaultDark = themeOut.defaultDark;
-    defaultLight = themeOut.defaultLight;
+    if (selectedTemplate === 'full' && (framework === 'astro' || framework === 'svelte')) {
+      selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : [...ASTRO_COMPONENTS];
+    } else if (selectedTemplate === 'minimal' && (framework === 'astro' || framework === 'svelte')) {
+      const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : ASTRO_COMPONENTS;
+      selectedComponents = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
+    } else if (selectedTemplate === 'manual') {
+      const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : ASTRO_COMPONENTS;
+      selectedComponents = await promptComponentChoice(componentList, framework);
+    }
-    const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
-    selectedComponents = componentList.length > 0
-      ? await promptComponentChoice(componentList, framework)
-      : [];
+    const wantsThemeSwitcher = (framework === 'vanilla' && (selectedTemplate === 'full' || selectedTemplate === 'minimal')) || selectedComponents.includes('ThemeSwitcher');
+    if (wantsThemeSwitcher) {
+      const themeOut = await promptThemes();
+      theme = themeOut.theme;
+      defaultDark = themeOut.defaultDark;
+      defaultLight = themeOut.defaultLight;
+    } else {
+      theme = 'system';
+      defaultDark = DARK_THEMES[0];
+      defaultLight = LIGHT_THEMES[0];
+    }
     const projectDirForPm = name ? join(cwd, name) : cwd;
     selectedPm = await promptPackageManager(projectDirForPm);
@@ -1049,12 +1183,15 @@ async function cmdInit(argv) {
     '{{PROJECT_NAME}}': projectNamePkg,
   };
-  const astroAppDir = getScaffoldAstroAppDir();
-  const svelteAppDir = getScaffoldSvelteAppDir();
+  const astroMinimalDir = getScaffoldAstroMinimalDir();
+  const svelteMinimalDir = getScaffoldSvelteMinimalDir();
   const pathsForScaffold = getFrameworkCssPaths(framework);
-  const useAstroApp = framework === 'astro' && selectedTemplate === 'full-app' && existsSync(astroAppDir);
-  const useSvelteApp = framework === 'svelte' && selectedTemplate === 'full-app' && existsSync(svelteAppDir);
-  const useVanillaFull = framework === 'vanilla' && selectedTemplate === 'full' && existsSync(getScaffoldVanillaIndex());
+  const useHandpickAstro = selectedTemplate === 'manual' && framework === 'astro' && existsSync(astroMinimalDir);
+  const useHandpickSvelte = selectedTemplate === 'manual' && framework === 'svelte' && existsSync(svelteMinimalDir);
+  const useAstroBase = (selectedTemplate === 'full' || selectedTemplate === 'minimal') && framework === 'astro' && existsSync(astroMinimalDir);
+  const useSvelteBase = (selectedTemplate === 'full' || selectedTemplate === 'minimal') && framework === 'svelte' && existsSync(svelteMinimalDir);
+  const useVanillaFull = selectedTemplate === 'full' && framework === 'vanilla' && existsSync(getScaffoldVanillaIndex());
+  const useVanillaMinimal = selectedTemplate === 'minimal' && framework === 'vanilla';
   let cssTarget;
   let indexPath;
@@ -1074,30 +1211,60 @@ async function cmdInit(argv) {
 </html>
 `;
-  if (useAstroApp) {
+  if (useHandpickAstro) {
+    mkdirSync(projectDir, { recursive: true });
+    copyDirRecursiveWithReplacements(astroMinimalDir, projectDir, replacements);
+    mkdirSync(join(projectDir, 'public', 'css'), { recursive: true });
+    cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
+    copyFileSync(cssSource, cssTarget);
+    if (statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
+    copyPackageLicense(projectDir);
+    if (selectedComponents.length > 0) {
+      copyRizzoIcons(projectDir, 'astro');
+      copyAstroComponents(projectDir, selectedComponents);
+    }
+  } else if (useAstroBase) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(astroAppDir, projectDir, replacements);
+    copyDirRecursiveWithReplacements(astroMinimalDir, projectDir, replacements);
     mkdirSync(join(projectDir, 'public', 'css'), { recursive: true });
     cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
     copyFileSync(cssSource, cssTarget);
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
-    copyRizzoIcons(projectDir, 'astro');
+    copyPackageLicense(projectDir);
     if (selectedComponents.length > 0) {
+      copyRizzoIcons(projectDir, 'astro');
       copyAstroComponents(projectDir, selectedComponents);
     }
-  } else if (useSvelteApp) {
+  } else if (useHandpickSvelte) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(svelteAppDir, projectDir, replacements);
+    copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
     mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
     copyFileSync(cssSource, cssTarget);
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
-    copyRizzoIcons(projectDir, 'svelte');
+    copyPackageLicense(projectDir);
     if (selectedComponents.length > 0) {
+      copyRizzoIcons(projectDir, 'svelte');
+      copySvelteComponents(projectDir, selectedComponents);
+    }
+  } else if (useSvelteBase) {
+    mkdirSync(projectDir, { recursive: true });
+    copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
+    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
+    copyFileSync(cssSource, cssTarget);
+    if (statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
+    copyPackageLicense(projectDir);
+    if (selectedComponents.length > 0) {
+      copyRizzoIcons(projectDir, 'svelte');
       copySvelteComponents(projectDir, selectedComponents);
     }
   } else if (useVanillaFull) {
@@ -1132,6 +1299,30 @@ async function cmdInit(argv) {
       mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
       writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
     }
+    copyPackageLicense(projectDir);
+  } else if (useVanillaMinimal) {
+    const cssDir = join(projectDir, pathsForScaffold.targetDir);
+    cssTarget = join(cssDir, 'rizzo.min.css');
+    mkdirSync(cssDir, { recursive: true });
+    copyFileSync(cssSource, cssTarget);
+    if (statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
+    mkdirSync(join(projectDir, 'js'), { recursive: true });
+    const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
+    if (existsSync(vanillaJs)) {
+      let mainJs = readFileSync(vanillaJs, 'utf8');
+      mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
+      writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
+    }
+    const vanillaRepl = { ...replacements, '{{LINK_HREF}}': 'css/rizzo.min.css' };
+    copyVanillaComponents(projectDir, RECOMMENDED_COMPONENTS, vanillaRepl);
+    copyRizzoIcons(projectDir, 'vanilla');
+    const minimalIndexWithScript = minimalHtml.replace('</body>', '  <script src="js/main.js"></script>\n</body>');
+    indexPath = join(projectDir, 'index.html');
+    writeFileSync(indexPath, minimalIndexWithScript, 'utf8');
+    writeFileSync(join(projectDir, 'README.md'), VANILLA_MINIMAL_README, 'utf8');
+    copyPackageLicense(projectDir);
   } else {
     const cssDir = join(projectDir, pathsForScaffold.targetDir);
     cssTarget = join(cssDir, 'rizzo.min.css');
@@ -1140,25 +1331,36 @@ async function cmdInit(argv) {
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
-    if (framework === 'vanilla') {
+    if (framework === 'vanilla' && selectedTemplate === 'manual') {
       indexPath = join(projectDir, 'index.html');
-      writeFileSync(indexPath, minimalHtml, 'utf8');
+      let indexContent = minimalHtml;
+      if (selectedComponents.length > 0) {
+        mkdirSync(join(projectDir, 'js'), { recursive: true });
+        const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
+        if (existsSync(vanillaJs)) {
+          let mainJs = readFileSync(vanillaJs, 'utf8');
+          mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
+          writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
+        }
+        const vanillaRepl = { ...replacements, '{{LINK_HREF}}': 'css/rizzo.min.css' };
+        copyVanillaComponents(projectDir, selectedComponents, vanillaRepl);
+        copyRizzoIcons(projectDir, 'vanilla');
+        indexContent = minimalHtml.replace('</body>', '  <script src="js/main.js"></script>\n</body>');
+      }
+      writeFileSync(indexPath, indexContent, 'utf8');
+      writeFileSync(join(projectDir, 'README.md'), VANILLA_MANUAL_README, 'utf8');
     } else if (framework === 'astro') {
       indexPath = join(projectDir, 'public', 'index.html');
       mkdirSync(join(projectDir, 'public'), { recursive: true });
       writeFileSync(indexPath, minimalHtml, 'utf8');
+      writeFileSync(join(projectDir, 'README.md'), FALLBACK_MINIMAL_README, 'utf8');
     } else {
       indexPath = join(projectDir, 'static', 'index.html');
       mkdirSync(join(projectDir, 'static'), { recursive: true });
       writeFileSync(indexPath, minimalHtml, 'utf8');
+      writeFileSync(join(projectDir, 'README.md'), FALLBACK_MINIMAL_README, 'utf8');
     }
-    if (framework === 'svelte' && selectedComponents.length > 0) {
-      copyRizzoIcons(projectDir, 'svelte');
-      copySvelteComponents(projectDir, selectedComponents);
-    } else if (framework === 'astro' && selectedComponents.length > 0) {
-      copyRizzoIcons(projectDir, 'astro');
-      copyAstroComponents(projectDir, selectedComponents);
-    }
+    copyPackageLicense(projectDir);
   }
   console.log('\n✓ Project ready at ' + projectDir);
@@ -1166,16 +1368,18 @@ async function cmdInit(argv) {
   if (indexPath) console.log('  - ' + indexPath);
   if (framework === 'vanilla') {
     if (useVanillaFull) {
-      console.log('  - Vanilla JS (full): theme switcher, js/main.js, icons, README.');
+      console.log('  - Vanilla JS (full): theme switcher, js/main.js, icons, component showcase, README.');
+    } else if (useVanillaMinimal) {
+      console.log('  - Vanilla JS (minimal): index.html + CSS + js/main.js. Add components from docs or use Full for showcase.');
     } else {
-      console.log('  - Vanilla JS (minimal): index.html + CSS link. Open index.html in a browser or add your own app.');
+      console.log('  - Vanilla JS (manual): index.html + CSS only. Add JS from docs or copy from Full.');
     }
   }
   const pm = getPackageManagerCommands({ agent: selectedPm, command: selectedPm });
   const nextStep = pm.install + ' && ' + pm.run('dev');
   const runPrefix = name ? 'cd ' + name + ' && ' : '';
-  if (runInstallAfterScaffold && !noInstall && (useAstroApp || useSvelteApp)) {
+  if (runInstallAfterScaffold && !noInstall && (useHandpickAstro || useHandpickSvelte || useAstroBase || useSvelteBase)) {
     console.log('\nRunning: ' + pm.install);
     const code = runInDir(projectDir, pm.install);
     if (code !== 0) {
@@ -1189,15 +1393,19 @@ async function cmdInit(argv) {
     console.log('\n  - Wrote ' + RIZZO_CONFIG_FILE);
   }
-  if (useAstroApp) {
-    console.log('  - Full Astro project with Rizzo CSS. Run: ' + runPrefix + nextStep);
-    console.log('  - Icons: src/components/rizzo/icons/ (Astro components)');
+  if (useHandpickAstro || useHandpickSvelte) {
+    const fw = useHandpickAstro ? 'Astro' : 'SvelteKit';
+    console.log('  - ' + fw + ' (manual): base + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
   }
-  if (useSvelteApp) {
-    console.log('  - Full SvelteKit project with Rizzo CSS. Run: ' + runPrefix + nextStep);
-    console.log('  - Install dependencies first (required before dev). Icons: src/lib/rizzo/icons/ (Svelte components)');
+  if (useAstroBase) {
+    const label = selectedTemplate === 'full' ? 'Full' : 'Minimal';
+    console.log('  - Astro (' + label.toLowerCase() + '): app + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
   }
-  if ((framework === 'astro' || framework === 'svelte') && !useAstroApp && !useSvelteApp) {
+  if (useSvelteBase) {
+    const label = selectedTemplate === 'full' ? 'Full' : 'Minimal';
+    console.log('  - SvelteKit (' + label.toLowerCase() + '): app + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
+  }
+  if ((framework === 'astro' || framework === 'svelte') && !useAstroBase && !useSvelteBase && !useHandpickAstro && !useHandpickSvelte) {
     const fw = framework === 'svelte' ? 'Svelte' : 'Astro';
     const createExample = getCreateProjectExample(pm, framework);
     console.log('\n  - Minimal template (CSS + index). To get a full app: ' + createExample + ', then cd into the project and run ' + pm.dlx('rizzo-css add') + '.');
@@ -1223,7 +1431,10 @@ function main() {
   }
   if (command === 'add') {
-    cmdAdd(argv);
+    cmdAdd(argv).catch((err) => {
+      console.error(err);
+      process.exit(1);
+    });
     return;
   }