npm - rizzo-css - Versions diffs - 0.0.16 → 0.0.18 - Mend

rizzo-css 0.0.16 → 0.0.18

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 (259) hide show

package/bin/rizzo-css.js CHANGED Viewed

@@ -2,10 +2,49 @@
 const { copyFileSync, mkdirSync, writeFileSync, existsSync, readFileSync, readdirSync, statSync } = require('fs');
 const { join, dirname } = require('path');
+const { spawnSync } = require('child_process');
 const readline = require('readline');
+const RIZZO_CONFIG_FILE = 'rizzo-css.json';
 const COMMANDS = ['init', 'add', 'theme', 'help'];
 const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
+/** Template options for "create new" when user chooses "Use a template". When they choose "No template" they get minimal base + hand-pick components. */
+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' },
+  ],
+  astro: [
+    { value: 'minimal', label: 'Minimal — Astro with config, one page, README, LICENSE, .env.example' },
+  ],
+  svelte: [
+    { value: 'minimal', label: 'Minimal — SvelteKit with config, one page, README, LICENSE, .env.example' },
+  ],
+};
+const VANILLA_MINIMAL_README = `# Vanilla + Rizzo CSS (minimal)
+Minimal HTML + Rizzo CSS. Scaffolded with \`npx rizzo-css init --framework vanilla --template minimal\`.
+- 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\`.
+- Set a theme: \`<html data-theme="github-dark-classic">\` (see \`npx rizzo-css theme\` for all themes).
+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',
@@ -67,6 +106,123 @@ 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;
+  const configPath = join(cwd, RIZZO_CONFIG_FILE);
+  if (!existsSync(configPath)) return null;
+  try {
+    const raw = JSON.parse(readFileSync(configPath, 'utf8'));
+    const out = {};
+    if (typeof raw.targetDir === 'string') out.targetDir = raw.targetDir;
+    if (typeof raw.framework === 'string' && FRAMEWORKS.includes(raw.framework)) out.framework = raw.framework;
+    if (typeof raw.packageManager === 'string' && ['npm', 'pnpm', 'yarn', 'bun'].includes(raw.packageManager)) out.packageManager = raw.packageManager;
+    return Object.keys(out).length ? out : null;
+  } catch (_) { return null; }
+}
+/** Write rizzo-css.json to cwd. config: { targetDir?, framework?, packageManager? }. */
+function writeRizzoConfig(cwd, config) {
+  if (!cwd || !existsSync(cwd)) return;
+  const configPath = join(cwd, RIZZO_CONFIG_FILE);
+  const obj = {};
+  if (config.targetDir != null) obj.targetDir = config.targetDir;
+  if (config.framework != null) obj.framework = config.framework;
+  if (config.packageManager != null) obj.packageManager = config.packageManager;
+  writeFileSync(configPath, JSON.stringify(obj, null, 2) + '\n', 'utf8');
+}
+/** Run a command in cwd. command is the full string (e.g. "pnpm add rizzo-css"). Returns exit code. */
+function runInDir(cwd, command) {
+  const result = spawnSync(command, { cwd, shell: true, stdio: 'inherit' });
+  return result.status != null ? result.status : result.signal ? 1 : 0;
+}
+function hasFlag(argv, flag) {
+  return argv.indexOf(flag) !== -1;
+}
+function getFlagValue(argv, flag) {
+  const i = argv.indexOf(flag);
+  return i !== -1 && argv[i + 1] != null ? argv[i + 1] : null;
+}
+/** Package manager detection (manual: lockfiles + packageManager field). Returns { agent, command } or null if none found. */
+function detectPackageManager(cwd) {
+  if (!cwd || !existsSync(cwd)) return null;
+  if (existsSync(join(cwd, 'pnpm-lock.yaml'))) return { agent: 'pnpm', command: 'pnpm' };
+  if (existsSync(join(cwd, 'yarn.lock'))) return { agent: 'yarn', command: 'yarn' };
+  if (existsSync(join(cwd, 'bun.lockb'))) return { agent: 'bun', command: 'bun' };
+  if (existsSync(join(cwd, 'package-lock.json')) || existsSync(join(cwd, 'npm-shrinkwrap.json'))) return { agent: 'npm', command: 'npm' };
+  const pkgPath = join(cwd, 'package.json');
+  if (existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+      const pm = pkg.packageManager || (pkg.devEngines && pkg.devEngines.packageManager);
+      if (typeof pm === 'string') {
+        const name = (pm.split('@')[0] || '').toLowerCase();
+        if (['npm', 'pnpm', 'yarn', 'bun'].includes(name)) return { agent: name, command: name };
+      }
+    } catch (_) { /* ignore */ }
+  }
+  return null;
+}
+/** Get install and run commands for a package manager. pm: { agent, command } from detectPackageManager. */
+function getPackageManagerCommands(pm) {
+  if (!pm) pm = { agent: 'npm', command: 'npm' };
+  const c = pm.command;
+  return {
+    agent: pm.agent,
+    install: c + ' install',
+    run: (script) => (pm.agent === 'npm' ? c + ' run ' + script : c + ' run ' + script),
+    add: (pkg) => (pm.agent === 'npm' ? c + ' install ' + pkg : c + ' add ' + pkg),
+    addDev: (pkg) => (pm.agent === 'npm' ? c + ' install -D ' + pkg : pm.agent === 'bun' ? c + ' add -d ' + pkg : c + ' add -D ' + pkg),
+    dlx: (pkgAndArgs) => (pm.agent === 'npm' ? 'npx ' + pkgAndArgs : pm.agent === 'pnpm' ? 'pnpm dlx ' + pkgAndArgs : pm.agent === 'yarn' ? 'yarn dlx ' + pkgAndArgs : 'bunx ' + pkgAndArgs),
+  };
+}
+/** Detect package manager for a project dir, falling back to cwd then default npm. */
+function resolvePackageManager(projectDir, fallbackCwd) {
+  const pm = detectPackageManager(projectDir) || detectPackageManager(fallbackCwd || process.cwd());
+  return getPackageManagerCommands(pm || { agent: 'npm', command: 'npm' });
+}
+/** Example command to create a new framework project (e.g. create-astro, create-svelte). */
+function getCreateProjectExample(pm, framework) {
+  const createPkg = 'create-' + framework + '@latest';
+  if (pm.agent === 'npm') return 'npm create ' + framework + '@latest my-app';
+  if (pm.agent === 'pnpm') return 'pnpm dlx ' + createPkg + ' my-app';
+  if (pm.agent === 'yarn') return 'yarn create ' + framework + ' my-app';
+  if (pm.agent === 'bun') return 'bun create ' + framework + ' my-app';
+  return 'npm create ' + framework + '@latest my-app';
+}
+/** Prompt user to select package manager (npm, pnpm, yarn, bun). Puts detected first with "(detected)" label. Returns agent string. */
+async function promptPackageManager(projectDir) {
+  const detected = resolvePackageManager(projectDir, process.cwd());
+  const agents = ['npm', 'pnpm', 'yarn', 'bun'];
+  const options = agents.map((a) => ({
+    value: a,
+    label: a === detected.agent ? a + ' (detected)' : a,
+  }));
+  return selectMenu(options, '? Package manager (for install and run commands)');
+}
+/** Prompt user to select template for the chosen framework. Returns template value (full or minimal for Vanilla; minimal for Astro/Svelte). */
+async function promptTemplate(framework) {
+  const options = TEMPLATES[framework] || TEMPLATES.vanilla;
+  return selectMenu(options, '? Template');
+}
 function question(prompt) {
   const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
   return new Promise((resolve) => {
@@ -339,29 +495,57 @@ function multiSelectMenu(options, title) {
 function printHelp() {
   console.log(`
-rizzo-css CLI — Add Rizzo CSS to your project
+rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte)
-Usage:
+Usage (use your package manager):
   npx rizzo-css <command> [options]
+  pnpm dlx rizzo-css <command> [options]
+  yarn dlx rizzo-css <command> [options]
+  bunx rizzo-css <command> [options]
 Commands:
-  init    Add Rizzo to existing project or scaffold new one (first: framework, then existing vs new)
-  add     Copy Rizzo CSS into the current project (auto-detects Svelte/Astro)
+  init    New project = template (or no template → hand-pick components). 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
-Use framework CLI first, then add Rizzo CSS:
-  npm create svelte@latest my-app
-  cd my-app && npx rizzo-css add
-  npm create astro@latest my-app
-  cd my-app && npx rizzo-css add
+Options (init):
+  --yes             Non-interactive: scaffold new in cwd with defaults (framework: astro, template: minimal)
+  --framework <fw>  vanilla | astro | svelte (with --yes; otherwise first prompt)
+  --template <t>    full | minimal (Vanilla); minimal only (Astro/Svelte); with --yes defaults to full or minimal
+  --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
+Options (add):
+  --path <dir>      Target directory for rizzo.min.css (overrides config and framework default)
+  --framework <fw>   vanilla | astro | svelte (overrides config and detection)
+  --install-package  After copying CSS, run package manager add rizzo-css
+  --no-install      Do not run install or add (overrides --install-package)
+Config:
+  Optional rizzo-css.json in project root: { "targetDir", "framework", "packageManager" }.
+  Used by add and init when present. Detection: lockfiles and packageManager field in package.json.
+Use framework CLI first, then add Rizzo CSS (match your package manager):
+  For Vanilla:  npx rizzo-css init --yes --framework vanilla
+  npm create svelte@latest my-app   && cd my-app && npx rizzo-css add
+  pnpm dlx create-svelte@latest my-app && cd my-app && pnpm dlx rizzo-css add
+  yarn create svelte my-app         && cd my-app && yarn dlx rizzo-css add
+  bun create svelte my-app         && cd my-app && bunx rizzo-css add
+  npm create astro@latest my-app   && cd my-app && npx rizzo-css add
+  pnpm dlx create-astro@latest my-app && cd my-app && pnpm dlx rizzo-css add
+  yarn create astro my-app         && cd my-app && yarn dlx rizzo-css add
+  bun create astro my-app         && cd my-app && bunx rizzo-css add
 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 add
-  npx rizzo-css add --path public/css
-  npx rizzo-css add --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
@@ -462,45 +646,27 @@ function getLinkHrefForTargetDir(framework, targetDir) {
   return base ? base + '/' + file : file;
 }
-function cmdAdd(argv) {
-  const pathIdx = argv.indexOf('--path');
-  const customPath = pathIdx !== -1 && argv[pathIdx + 1] ? argv[pathIdx + 1] : null;
-  const frameworkIdx = argv.indexOf('--framework');
-  const explicitFramework = frameworkIdx !== -1 && argv[frameworkIdx + 1] ? argv[frameworkIdx + 1].toLowerCase() : null;
-  const cwd = process.cwd();
-  const framework = explicitFramework && FRAMEWORKS.includes(explicitFramework)
-    ? explicitFramework
-    : (explicitFramework === null ? detectFramework(cwd) : null);
-  const paths = getFrameworkCssPaths(framework);
-  const targetDir = customPath || paths.targetDir;
-  const targetFile = join(cwd, targetDir, 'rizzo.min.css');
-  const cssSource = getCssPath();
+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');
-  if (!existsSync(cssSource)) {
-    console.error('Error: Rizzo CSS build not found. Run from repo root: pnpm build:css');
-    process.exit(1);
-  }
-  mkdirSync(join(cwd, targetDir), { recursive: true });
-  copyFileSync(cssSource, targetFile);
-  const linkHref = customPath ? getLinkHrefForTargetDir(framework, targetDir) : paths.linkHref;
-  console.log('\n✓ Rizzo CSS copied to ' + targetFile);
-  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: npx rizzo-css theme)');
-    console.log('\nTo add Rizzo Svelte components later: copy from this package\'s scaffold or run npx rizzo-css init 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: npx rizzo-css theme)\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.');
+  const cwd = process.cwd();
+  const config = readRizzoConfig(cwd);
+  const options = { config, targetDir: customPath || (config && config.targetDir) || 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);
     }
-    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)\n');
   }
 }
@@ -543,12 +709,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) {
@@ -670,10 +836,11 @@ function copyAstroComponents(projectDir, selectedNames) {
   }
 }
-/** Add Rizzo CSS (and optional components) to an existing project in cwd. frameworkOverride: when set (from init), skip framework prompt. */
-async function runAddToExisting(frameworkOverride) {
+/** 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();
-  let framework = frameworkOverride;
+  const config = (options && options.config) || readRizzoConfig(cwd);
+  let framework = frameworkOverride || (config && config.framework);
   if (framework == null) {
     const detected = detectFramework(cwd);
     const frameworkOptions = [
@@ -726,7 +893,8 @@ async function runAddToExisting(frameworkOverride) {
   }
   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);
@@ -738,14 +906,18 @@ async function runAddToExisting(frameworkOverride) {
     copyAstroComponents(cwd, selectedComponents);
   }
-  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);
+  const cliExample = pm.dlx('rizzo-css theme');
   console.log('\n✓ Rizzo CSS added to your existing project');
   console.log('  - ' + cssTarget);
   console.log('\nYou must add the stylesheet link yourself — it is not added automatically.');
   if (framework === 'svelte') {
     console.log('\nIn your root layout (e.g. src/app.html), add:');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
-    console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    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('  Components are in src/lib/rizzo — import from \'$lib/rizzo\'.');
@@ -753,7 +925,7 @@ async function runAddToExisting(frameworkOverride) {
   } else if (framework === 'astro') {
     console.log('\nIn your layout (e.g. src/layouts/Layout.astro), add:');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
-    console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    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('  Components are in src/components/rizzo — import from there.');
@@ -761,52 +933,120 @@ async function runAddToExisting(frameworkOverride) {
   } else {
     console.log('\nIn your HTML or layout, add:');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
-    console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: ' + cliExample + ')');
     console.log('  For theme "system": default dark ' + defaultDark + ', default light ' + defaultLight);
   }
+  console.log('\nTo install the package (CLI + components): ' + pm.add('rizzo-css'));
   console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
-async function cmdInit() {
-  const framework = await selectMenu(
-    [
-      { value: 'vanilla', label: 'Vanilla JS (HTML + CSS + same styles & components)', color: C.vanilla },
-      { value: 'astro', label: 'Astro', color: C.astro },
-      { value: 'svelte', label: 'Svelte', color: C.svelte },
-    ],
-    '? Framework — all get the same CSS and component styles'
-  );
+async function cmdInit(argv) {
+  argv = argv || [];
+  const yes = hasFlag(argv, '--yes');
+  const runInstallAfterScaffold = hasFlag(argv, '--install');
+  const noInstall = hasFlag(argv, '--no-install');
+  const writeConfig = hasFlag(argv, '--write-config');
+  const cwd = process.cwd();
+  const config = readRizzoConfig(cwd);
-  const initMode = await selectMenu(
-    [
-      { value: 'existing', label: 'Add to existing project (current directory)' },
-      { value: 'new', label: 'Create new project (scaffold)' },
-    ],
-    '? Add to existing project or create a new one?'
-  );
+  let framework;
+  let initMode;
+  let name = '';
+  let theme, defaultDark, defaultLight;
+  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');
+    const rawTemplate = (templateArg && (templateArg === 'full' || templateArg === 'minimal')) ? templateArg : (framework === 'vanilla' ? 'full' : 'minimal');
+    selectedTemplate = rawTemplate;
+    const projectDir = cwd;
+    const resolved = resolvePackageManager(projectDir, cwd);
+    selectedPm = (config && config.packageManager) || resolved.agent || 'npm';
+    theme = 'system';
+    defaultDark = DARK_THEMES[0];
+    defaultLight = LIGHT_THEMES[0];
+  } else {
+    framework = await selectMenu(
+      [
+        { value: 'vanilla', label: 'Vanilla JS (HTML + CSS + same styles & components)', color: C.vanilla },
+        { value: 'astro', label: 'Astro', color: C.astro },
+        { value: 'svelte', label: 'Svelte', color: C.svelte },
+      ],
+      '? Framework — all get the same CSS and component styles'
+    );
-  if (initMode === 'existing') {
-    await runAddToExisting(framework);
-    return;
-  }
+    initMode = await selectMenu(
+      [
+        { value: 'existing', label: 'Add to existing project (current directory)' },
+        { value: 'new', label: 'Create new project (scaffold)' },
+      ],
+      '? Add to existing project or create a new one?'
+    );
-  const projectChoice = await selectMenu(
-    [
-      { value: 'cwd', label: 'Current directory' },
-      { value: 'name', label: 'Enter project name (new folder)' },
-    ],
-    '? Project location'
-  );
-  const name = projectChoice === 'name' ? await question('Project name (folder name): ') : '';
+    if (initMode === 'existing') {
+      await runAddToExisting(framework, { config });
+      return;
+    }
+    const projectChoice = await selectMenu(
+      [
+        { value: 'cwd', label: 'Current directory' },
+        { value: 'name', label: 'Enter project name (new folder)' },
+      ],
+      '? Project location'
+    );
+    name = projectChoice === 'name' ? await question('Project name (folder name): ') : '';
-  const { theme, defaultDark, defaultLight } = await promptThemes();
+    const templateOrHandpick = await selectMenu(
+      [
+        { value: 'template', label: 'Use a template (Full or Minimal — ready-made scaffold)' },
+        { value: 'handpick', label: 'No template — minimal base + hand-pick components' },
+      ],
+      '? Template or hand-pick components?'
+    );
-  const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
-  const selectedComponents = componentList.length > 0
-    ? await promptComponentChoice(componentList, framework)
-    : [];
+    if (templateOrHandpick === 'template') {
+      selectedTemplate = await promptTemplate(framework);
+      const templateHasThemeSwitcher = framework === 'vanilla' && selectedTemplate === 'full';
+      if (templateHasThemeSwitcher) {
+        const themeOut = await promptThemes();
+        theme = themeOut.theme;
+        defaultDark = themeOut.defaultDark;
+        defaultLight = themeOut.defaultLight;
+      } else {
+        theme = 'system';
+        defaultDark = DARK_THEMES[0];
+        defaultLight = LIGHT_THEMES[0];
+      }
+    } else {
+      selectedTemplate = 'handpick';
+      const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
+      selectedComponents = componentList.length > 0
+        ? await promptComponentChoice(componentList, framework)
+        : [];
+      const wantsThemeSwitcher = 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 projectDir = name ? join(process.cwd(), name) : process.cwd();
+    const projectDirForPm = name ? join(cwd, name) : cwd;
+    selectedPm = await promptPackageManager(projectDirForPm);
+  }
+  const projectDir = name ? join(cwd, name) : cwd;
   const cssSource = getCssPath();
   if (!existsSync(cssSource)) {
@@ -827,119 +1067,185 @@ async function cmdInit() {
     '{{PROJECT_NAME}}': projectNamePkg,
   };
-  const astroAppDir = getScaffoldAstroAppDir();
-  const svelteAppDir = getScaffoldSvelteAppDir();
+  const astroMinimalDir = getScaffoldAstroMinimalDir();
+  const svelteMinimalDir = getScaffoldSvelteMinimalDir();
+  const pathsForScaffold = getFrameworkCssPaths(framework);
+  const useHandpickAstro = selectedTemplate === 'handpick' && framework === 'astro' && existsSync(astroMinimalDir);
+  const useHandpickSvelte = selectedTemplate === 'handpick' && framework === 'svelte' && existsSync(svelteMinimalDir);
+  const useAstroMinimal = framework === 'astro' && selectedTemplate === 'minimal' && existsSync(astroMinimalDir);
+  const useSvelteMinimal = framework === 'svelte' && selectedTemplate === 'minimal' && existsSync(svelteMinimalDir);
+  const useVanillaFull = framework === 'vanilla' && selectedTemplate === 'full' && existsSync(getScaffoldVanillaIndex());
   let cssTarget;
   let indexPath;
-  if (framework === 'astro' && existsSync(astroAppDir)) {
+  const minimalHtml = `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">${themeComment}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${name || 'App'}</title>
+  <link rel="stylesheet" href="${framework === 'vanilla' ? 'css/rizzo.min.css' : '/css/rizzo.min.css'}" />
+</head>
+<body>
+  <h1>Hello, Rizzo CSS</h1>
+  <p>Edit this file and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
+</body>
+</html>
+`;
+  if (useHandpickAstro) {
     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 (framework === 'svelte' && existsSync(svelteAppDir)) {
+  } 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 {
-    const cssDir = framework === 'astro' ? join(projectDir, 'public', 'css') : join(projectDir, 'css');
+  } else if (useAstroMinimal) {
+    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);
+  } else if (useSvelteMinimal) {
+    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);
+  } else if (useVanillaFull) {
+    const cssDir = join(projectDir, pathsForScaffold.targetDir);
     cssTarget = join(cssDir, 'rizzo.min.css');
-    const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
+    const linkHref = 'css/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');
     }
     const vanillaScaffoldPath = getScaffoldVanillaIndex();
     indexPath = join(projectDir, 'index.html');
-    if (framework === 'vanilla' && existsSync(vanillaScaffoldPath)) {
-      let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
-      indexHtml = indexHtml
-        .replace(/\{\{DATA_THEME\}\}/g, theme)
-        .replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark)
-        .replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight)
-        .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
-        .replace(/\{\{TITLE\}\}/g, name || 'App')
-        .replace(/\{\{LINK_HREF\}\}/g, linkHref);
-      writeFileSync(indexPath, indexHtml, 'utf8');
-    } else {
-      const indexHtml = `<!DOCTYPE html>
-<html lang="en" data-theme="${theme}">${themeComment}
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>${name || 'App'}</title>
-  <link rel="stylesheet" href="${linkHref}" />
-</head>
-<body>
-  <h1>Hello, Rizzo CSS</h1>
-  <p>Edit this file and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
-</body>
-</html>
-`;
-      writeFileSync(indexPath, indexHtml, 'utf8');
+    let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
+    indexHtml = indexHtml
+      .replace(/\{\{DATA_THEME\}\}/g, theme)
+      .replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark)
+      .replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight)
+      .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
+      .replace(/\{\{TITLE\}\}/g, name || 'App')
+      .replace(/\{\{LINK_HREF\}\}/g, linkHref);
+    writeFileSync(indexPath, indexHtml, 'utf8');
+    copyRizzoIcons(projectDir, 'vanilla');
+    const vanillaReadme = join(getPackageRoot(), 'scaffold', 'vanilla', 'README.md');
+    if (existsSync(vanillaReadme)) {
+      copyFileSync(vanillaReadme, join(projectDir, 'README.md'));
     }
-    copyRizzoIcons(projectDir, framework);
-    if (framework === 'vanilla') {
-      const vanillaReadme = join(getPackageRoot(), 'scaffold', 'vanilla', 'README.md');
-      if (existsSync(vanillaReadme)) {
-        copyFileSync(vanillaReadme, join(projectDir, 'README.md'));
-      }
-      const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
-      if (existsSync(vanillaJs)) {
-        mkdirSync(join(projectDir, 'js'), { recursive: true });
-        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 vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
+    if (existsSync(vanillaJs)) {
+      mkdirSync(join(projectDir, 'js'), { recursive: true });
+      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');
     }
-    if (framework === 'svelte' && selectedComponents.length > 0) {
-      copySvelteComponents(projectDir, selectedComponents);
-    } else if (framework === 'astro' && selectedComponents.length > 0) {
-      copyAstroComponents(projectDir, selectedComponents);
+    copyPackageLicense(projectDir);
+  } else {
+    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');
     }
+    if (framework === 'vanilla') {
+      indexPath = join(projectDir, 'index.html');
+      writeFileSync(indexPath, minimalHtml, 'utf8');
+      writeFileSync(join(projectDir, 'README.md'), VANILLA_MINIMAL_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');
+    }
+    copyPackageLicense(projectDir);
   }
   console.log('\n✓ Project ready at ' + projectDir);
   console.log('  - ' + cssTarget);
   if (indexPath) console.log('  - ' + indexPath);
   if (framework === 'vanilla') {
-    console.log('  - Vanilla JS: same CSS and component styles; index includes theme switcher and sample components.');
-    console.log('  - js/main.js (theme, toast, settings, tabs, modal, dropdown, accordion)');
-    console.log('  - Icons: ' + join(projectDir, 'icons') + ' (SVG files)');
-    console.log('  - README.md (setup and CDN/local options)');
+    if (useVanillaFull) {
+      console.log('  - Vanilla JS (full): theme switcher, js/main.js, icons, README.');
+    } else {
+      console.log('  - Vanilla JS (minimal): index.html + CSS link. Open index.html in a browser or add your own app.');
+    }
   }
+  const pm = getPackageManagerCommands({ agent: selectedPm, command: selectedPm });
+  const nextStep = pm.install + ' && ' + pm.run('dev');
   const runPrefix = name ? 'cd ' + name + ' && ' : '';
-  if (framework === 'astro' && existsSync(astroAppDir)) {
-    console.log('  - Default Astro project with Rizzo CSS. Run: ' + runPrefix + 'pnpm install && pnpm dev');
-    console.log('  - Icons: src/components/rizzo/icons/ (Astro components)');
+  if (runInstallAfterScaffold && !noInstall && (useHandpickAstro || useHandpickSvelte || useAstroMinimal || useSvelteMinimal)) {
+    console.log('\nRunning: ' + pm.install);
+    const code = runInDir(projectDir, pm.install);
+    if (code !== 0) {
+      console.error('\nInstall failed (exit ' + code + '). Run manually: ' + runPrefix + pm.install);
+    }
+  }
+  if (writeConfig) {
+    const pathsForConfig = getFrameworkCssPaths(framework);
+    writeRizzoConfig(projectDir, { targetDir: pathsForConfig.targetDir, framework, packageManager: selectedPm });
+    console.log('\n  - Wrote ' + RIZZO_CONFIG_FILE);
+  }
+  if (useHandpickAstro || useHandpickSvelte) {
+    const fw = useHandpickAstro ? 'Astro' : 'SvelteKit';
+    console.log('  - Minimal ' + fw + ' base + ' + selectedComponents.length + ' hand-picked component(s). Run: ' + runPrefix + nextStep);
   }
-  if (framework === 'svelte' && existsSync(svelteAppDir)) {
-    console.log('  - Default SvelteKit project with Rizzo CSS. Run: ' + runPrefix + 'pnpm install && pnpm dev');
-    console.log('  - Install dependencies first (required before dev). Icons: src/lib/rizzo/icons/ (Svelte components)');
+  if (useAstroMinimal) {
+    console.log('  - Minimal Astro project (config, README, LICENSE, .env.example). Run: ' + runPrefix + nextStep);
   }
-  if ((framework === 'svelte' || framework === 'astro') && !existsSync(framework === 'astro' ? astroAppDir : svelteAppDir)) {
+  if (useSvelteMinimal) {
+    console.log('  - Minimal SvelteKit project (config, README, LICENSE, .env.example). Run: ' + runPrefix + nextStep);
+  }
+  if (selectedTemplate === 'handpick' && framework === 'vanilla') {
+    console.log('  - Vanilla minimal base (index.html + CSS, README, LICENSE). No component files for Vanilla; use BEM markup from docs.');
+  }
+  if ((framework === 'astro' || framework === 'svelte') && !useAstroMinimal && !useSvelteMinimal && !useHandpickAstro && !useHandpickSvelte) {
     const fw = framework === 'svelte' ? 'Svelte' : 'Astro';
-    console.log('\nTip: To use the official ' + fw + ' scaffold, create a project with their CLI (e.g. npm create ' + framework + '@latest my-app), then run npx rizzo-css add in that folder.');
+    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') + '.');
   }
   console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
@@ -962,12 +1268,15 @@ function main() {
   }
   if (command === 'add') {
-    cmdAdd(argv);
+    cmdAdd(argv).catch((err) => {
+      console.error(err);
+      process.exit(1);
+    });
     return;
   }
   if (command === 'init') {
-    cmdInit().catch((err) => {
+    cmdInit(argv).catch((err) => {
       console.error(err);
       process.exit(1);
     });