rizzo-css 0.0.17 → 0.0.18

package/README.md

@@ -12,7 +12,7 @@ pnpm add rizzo-css
 yarn add rizzo-css
 ```
 
-**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, or Svelte), then **add to existing** or **create new**. For new projects choose a **template** (Vanilla: full or minimal; Astro/Svelte: full-app or minimal) and **package manager** (npm, pnpm, yarn, bun). For Astro/Svelte: **What to include?** — CSS only, Recommended set, All (25 components), or Pick. Add to existing: you must add the stylesheet `<link>` yourself (CLI prints the exact tag). New: full scaffold. Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro scaffold** plus Rizzo CSS, create the app with their CLI first, then run `npx rizzo-css add`:
+**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, or Svelte), then **add to existing** or **create new**. **Existing** (or `npx rizzo-css add`) → drop in CSS + hand-pick components; you must add the `<link>` yourself (CLI prints the exact tag). **New** → choose **template** (Vanilla: full or minimal; Astro/Svelte: minimal) or **no template** (minimal base + hand-pick components), then package manager. Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
 
 ```bash
 npm create svelte@latest my-app && cd my-app && npx rizzo-css add
@@ -41,7 +41,7 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
 
 With `npx rizzo-css add --path <dir>`, the CLI still suggests the correct href for your framework (e.g. Astro/Svelte get a leading `/` path).
 
-Scaffolds (full starter apps) are in the package: `scaffold/vanilla/`, `scaffold/astro-app/`, `scaffold/svelte-app/`. Use `npx rizzo-css init` and choose **Create new project** to get the full clone (navbar/chrome + component showcase) for the chosen framework; the stylesheet link is already in the layout. **Add to existing** only adds the CSS and optional components (no full scaffold); **you must add the stylesheet `<link>` to your layout yourself** — the CLI prints the exact tag for your framework (e.g. Svelte/Astro: `/css/rizzo.min.css`; Vanilla: `css/rizzo.min.css`). Each scaffold folder has a README with setup and instructions for editing the cloned site.
+Scaffolds in the package: `scaffold/vanilla/` (full or minimal template), `scaffold/astro-minimal/`, `scaffold/svelte-minimal/`, plus `scaffold/astro/` and `scaffold/svelte/` (component templates for hand-pick). Use `npx rizzo-css init` and choose **Create new project** to get a template-based scaffold or minimal base + hand-picked components; the stylesheet link is in the layout. **Add to existing** (or `add` command) drops in CSS + hand-pick components; **you must add the stylesheet `<link>` yourself** — the CLI prints the exact tag. Every scaffold includes LICENSE and README; Astro/Svelte minimal include package.json and .env.example.
 
 ## Use
 
@@ -56,7 +56,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.17 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.18 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->
@@ -65,7 +65,7 @@ import 'rizzo-css';
 
 Short URLs also work: `https://unpkg.com/rizzo-css@latest` and `https://cdn.jsdelivr.net/npm/rizzo-css@latest` (CDNs serve the default file from package.json). To verify after publish: open the URL in a browser or run `curl -I https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css` and expect `200 OK`.
 
-Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files for convenience. Each scaffold has a README in its folder (`scaffold/vanilla/README.md`, `scaffold/astro-app/README.md`, `scaffold/svelte-app/README.md`) with setup and commands. The **Vanilla** scaffold includes a full Settings panel and toast; **Astro** and **Svelte** scaffold layouts include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
+Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files when you hand-pick. Each scaffold has a README; every install includes LICENSE. The **Vanilla** full template includes a Settings panel and toast; **Astro** and **Svelte** minimal layouts include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -10,21 +10,41 @@ 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. */
+/** 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: 'full-app', label: 'Full app — complete Astro project with Rizzo CSS' },
-    { value: 'minimal', label: 'Minimal — public/css + index.html with CSS link' },
+    { value: 'minimal', label: 'Minimal — Astro with config, one page, README, LICENSE, .env.example' },
   ],
   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: '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',
@@ -86,6 +106,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;
@@ -189,7 +217,7 @@ 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 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');
@@ -476,16 +504,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 = 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
 
 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: minimal)
   --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 (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
 
@@ -618,7 +646,7 @@ 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;
@@ -627,58 +655,19 @@ function cmdAdd(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 };
+  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() {
@@ -720,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) {
@@ -847,7 +836,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);
@@ -904,7 +893,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);
@@ -916,7 +906,7 @@ async function runAddToExisting(frameworkOverride, options) {
     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);
@@ -963,17 +953,17 @@ 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';
+    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';
@@ -1012,17 +1002,45 @@ async function cmdInit(argv) {
     );
     name = projectChoice === 'name' ? await question('Project name (folder name): ') : '';
 
-    selectedTemplate = await promptTemplate(framework);
-
-    const themeOut = await promptThemes();
-    theme = themeOut.theme;
-    defaultDark = themeOut.defaultDark;
-    defaultLight = themeOut.defaultLight;
+    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 : [];
-    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 projectDirForPm = name ? join(cwd, name) : cwd;
     selectedPm = await promptPackageManager(projectDirForPm);
@@ -1049,11 +1067,13 @@ 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 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;
@@ -1074,32 +1094,54 @@ async function cmdInit(argv) {
 </html>
 `;
 
-  if (useAstroApp) {
+  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 (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 (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');
@@ -1132,6 +1174,7 @@ 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 {
     const cssDir = join(projectDir, pathsForScaffold.targetDir);
     cssTarget = join(cssDir, 'rizzo.min.css');
@@ -1143,22 +1186,19 @@ async function cmdInit(argv) {
     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');
     }
-    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);
@@ -1175,7 +1215,7 @@ async function cmdInit(argv) {
   const nextStep = pm.install + ' && ' + pm.run('dev');
   const runPrefix = name ? 'cd ' + name + ' && ' : '';
 
-  if (runInstallAfterScaffold && !noInstall && (useAstroApp || useSvelteApp)) {
+  if (runInstallAfterScaffold && !noInstall && (useHandpickAstro || useHandpickSvelte || useAstroMinimal || useSvelteMinimal)) {
     console.log('\nRunning: ' + pm.install);
     const code = runInDir(projectDir, pm.install);
     if (code !== 0) {
@@ -1189,15 +1229,20 @@ 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('  - Minimal ' + fw + ' base + ' + selectedComponents.length + ' hand-picked component(s). Run: ' + runPrefix + nextStep);
+  }
+  if (useAstroMinimal) {
+    console.log('  - Minimal Astro project (config, README, LICENSE, .env.example). 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 (useSvelteMinimal) {
+    console.log('  - Minimal SvelteKit project (config, README, LICENSE, .env.example). Run: ' + runPrefix + nextStep);
   }
-  if ((framework === 'astro' || framework === 'svelte') && !useAstroApp && !useSvelteApp) {
+  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';
     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 +1268,10 @@ function main() {
   }
 
   if (command === 'add') {
-    cmdAdd(argv);
+    cmdAdd(argv).catch((err) => {
+      console.error(err);
+      process.exit(1);
+    });
     return;
   }
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "scripts": {
-    "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-astro-scaffold.js && node scripts/prepare-vanilla-scaffold.js && node scripts/prepare-svelte-scaffold.js"
+    "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },
   "description": "A modern CSS design system with semantic theming, 14 themes, and accessible components (BEM). Optimized for Vanilla JS, Astro, and Svelte; same CSS and component styles for all.",
   "style": "dist/rizzo.min.css",
@@ -25,7 +25,11 @@
     "LICENSE",
     ".env.example",
     "bin",
-    "scaffold"
+    "scaffold/astro",
+    "scaffold/svelte",
+    "scaffold/vanilla",
+    "scaffold/astro-minimal",
+    "scaffold/svelte-minimal"
   ],
   "keywords": [
     "css",

package/scaffold/astro-minimal/.env.example

@@ -0,0 +1,3 @@
+# Copy to .env and adjust as needed.
+# Example:
+# PUBLIC_SITE_URL=https://example.com

package/scaffold/astro-minimal/README.md

@@ -0,0 +1,36 @@
+# Astro + Rizzo CSS (minimal)
+
+Minimal Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework astro --template minimal`.
+
+## Setup
+
+1. Copy environment example (optional):
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Install dependencies:
+   ```bash
+   pnpm install
+   # or: npm install
+   ```
+
+3. Start the dev server:
+   ```bash
+   pnpm dev
+   ```
+
+## Project structure
+
+- `astro.config.mjs` — Astro configuration
+- `src/layouts/Layout.astro` — Layout with Rizzo CSS and theme (edit `data-theme` for default)
+- `src/pages/index.astro` — Home page
+- `public/css/rizzo.min.css` — Rizzo CSS bundle
+
+## Commands
+
+- `pnpm dev` — Start dev server
+- `pnpm build` — Build for production
+- `pnpm preview` — Preview production build
+
+Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/astro-minimal/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "astro": "^5.17.1"
+  }
+}

package/scaffold/astro-minimal/src/layouts/Layout.astro

@@ -0,0 +1,28 @@
+---
+/* Placeholders replaced by rizzo-css CLI when scaffolding */
+const DATA_THEME = '{{DATA_THEME}}';
+const THEME_LIST_COMMENT = '{{THEME_LIST_COMMENT}}';
+interface Props {
+  title?: string;
+}
+const { title = '{{TITLE}}' } = Astro.props;
+---
+<!doctype html>
+<html lang="en" data-theme={DATA_THEME}>{THEME_LIST_COMMENT}
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script is:inline>
+      (function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
+    </script>
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+    <main id="main-content">
+      <slot />
+    </main>
+  </body>
+</html>

package/scaffold/astro-minimal/src/pages/index.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../layouts/Layout.astro';
+const TITLE = '{{TITLE}}';
+---
+<Layout title={TITLE}>
+  <div class="layout__container" style="padding: var(--spacing-12) var(--spacing-4); min-height: 100vh;">
+    <h1>Hello, Rizzo CSS</h1>
+    <p>Edit <code>src/pages/index.astro</code> and add your content. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
+  </div>
+</Layout>

package/scaffold/svelte-minimal/.env.example

@@ -0,0 +1,3 @@
+# Copy to .env and adjust as needed.
+# Example:
+# PUBLIC_SITE_URL=https://example.com