rizzo-css 0.0.27 → 0.0.29

package/README.md

@@ -12,14 +12,19 @@ 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**. **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 **Full** (everything) | **Minimal** (recommended) | **Manual** (pick components; list shows which add others, e.g. Settings adds ThemeSwitcher), then package manager. Full and Minimal include all required dependencies so every component works. Run `npx rizzo-css help components` for the dependency list. 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`:
+**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 **Full** | **Minimal** (recommended) | **Manual** (pick components; list shows which add others, e.g. Navbar adds Search and Settings, Settings adds ThemeSwitcher), then package manager. Full and Minimal include all required dependencies so every component works. Run `npx rizzo-css help components` for the dependency list. 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
 npm create astro@latest my-app   && cd my-app && npx rizzo-css add
 ```
 
-`add` auto-detects Svelte/Astro and copies CSS to the right place (`static/css` or `public/css`). `npx rizzo-css theme` lists themes.
+`add` writes **RIZZO-SNIPPET.txt** (link + theme) by default; use `--no-snippet` to skip. `npx rizzo-css doctor` checks config and CSS path. `npx rizzo-css theme` lists themes.
+
+| | **Create new** (`init` → new) | **Add to existing** (`add` or `init` → existing) |
+|---|------------------------------|--------------------------------------------------|
+| Writes | Scaffold, CSS, config, LICENSE-RIZZO, README-RIZZO, .gitignore | CSS, components, config, optional RIZZO-SNIPPET.txt |
+| Link | Already in scaffold | You add it (CLI prints the tag) |
 
 ## One package, any framework
 
@@ -41,7 +46,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 in the package: `scaffold/vanilla/` (Full or Manual), `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 **Full** or **Manual** scaffold; 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-RIZZO and README-RIZZO.md (does not overwrite your project LICENSE/README); Astro/Svelte minimal include package.json and .env.example.
+Scaffolds in the package: `scaffold/vanilla/` (Full or Manual), `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 **Full** or **Manual** scaffold; 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-RIZZO, README-RIZZO.md, and .gitignore (does not overwrite your project files); Astro/Svelte minimal include package.json and .env.example.
 
 ## Use
 
@@ -56,7 +61,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.27 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.29 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const { copyFileSync, mkdirSync, writeFileSync, existsSync, readFileSync, readdirSync, statSync } = require('fs');
+const { copyFileSync, mkdirSync, writeFileSync, existsSync, readFileSync, readdirSync, statSync, unlinkSync } = require('fs');
 const { join, dirname } = require('path');
 const { spawnSync } = require('child_process');
 const readline = require('readline');
@@ -10,8 +10,10 @@ const RIZZO_CONFIG_FILE = 'rizzo-css.json';
 const SCAFFOLD_README_FILENAME = 'README-RIZZO.md';
 /** Scaffold license filename; avoids overwriting an existing project LICENSE. */
 const SCAFFOLD_LICENSE_FILENAME = 'LICENSE-RIZZO';
+/** Snippet file written by add command for copy-paste of link and theme. */
+const RIZZO_SNIPPET_FILE = 'RIZZO-SNIPPET.txt';
 
-const COMMANDS = ['init', 'add', 'theme', 'help'];
+const COMMANDS = ['init', 'add', 'theme', 'doctor', 'help'];
 const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
 /** Supported package managers: detection, install/add commands, and --package-manager override. */
 const VALID_PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'];
@@ -112,11 +114,14 @@ const RECOMMENDED_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Modal', 'Tabs', 'ThemeSwitcher', 'FormGroup', 'Alert', 'Toast', 'Dropdown',
 ];
 
+// Vanilla components that need js/main.js for interactivity (modal, dropdown, tabs, toast, theme switcher).
+const VANILLA_JS_COMPONENTS = ['Modal', 'Dropdown', 'Tabs', 'Toast', 'ThemeSwitcher'];
+
 // Component dependencies per framework: when user selects a component, these are copied automatically so it works.
 // Manual users can run: npx rizzo-css help components
 const COMPONENT_DEPS = {
-  astro: { Settings: ['ThemeSwitcher'], Toast: ['Alert'] },
-  svelte: { Settings: ['ThemeSwitcher'], Toast: ['Alert'] },
+  astro: { Settings: ['ThemeSwitcher'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
+  svelte: { Settings: ['ThemeSwitcher'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
 };
 
 function getComponentDeps(framework, componentName) {
@@ -271,31 +276,38 @@ function copyPackageLicense(projectDir) {
   }
 }
 
-/** Copy scaffold vanilla .gitignore into project so new vanilla projects have sensible defaults. */
+/** Name of the scaffold gitignore file (no leading dot so npm pack includes it). Copied to project as .gitignore. */
+const SCAFFOLD_GITIGNORE_FILE = 'gitignore';
+
+/** Copy scaffold vanilla gitignore into project as .gitignore so new vanilla projects have sensible defaults. */
 function copyVanillaGitignore(projectDir) {
-  const gitignorePath = join(getPackageRoot(), 'scaffold', 'vanilla', '.gitignore');
+  const gitignorePath = join(getPackageRoot(), 'scaffold', 'vanilla', SCAFFOLD_GITIGNORE_FILE);
   if (existsSync(gitignorePath)) {
     copyFileSync(gitignorePath, join(projectDir, '.gitignore'));
   }
 }
 
-/** Copy Astro minimal scaffold .gitignore into project (full and minimal templates). */
+/** Copy Astro minimal scaffold gitignore into project as .gitignore (full and minimal templates). */
 function copyAstroGitignore(projectDir) {
-  const gitignorePath = join(getScaffoldAstroMinimalDir(), '.gitignore');
+  const gitignorePath = join(getScaffoldAstroMinimalDir(), SCAFFOLD_GITIGNORE_FILE);
   if (existsSync(gitignorePath)) {
     copyFileSync(gitignorePath, join(projectDir, '.gitignore'));
+    const copiedAsFile = join(projectDir, SCAFFOLD_GITIGNORE_FILE);
+    if (existsSync(copiedAsFile)) unlinkSync(copiedAsFile);
   }
 }
 
-/** Copy Svelte minimal scaffold .gitignore into project (full and minimal templates). */
+/** Copy Svelte minimal scaffold gitignore into project as .gitignore (full and minimal templates). */
 function copySvelteGitignore(projectDir) {
-  const gitignorePath = join(getScaffoldSvelteMinimalDir(), '.gitignore');
+  const gitignorePath = join(getScaffoldSvelteMinimalDir(), SCAFFOLD_GITIGNORE_FILE);
   if (existsSync(gitignorePath)) {
     copyFileSync(gitignorePath, join(projectDir, '.gitignore'));
+    const copiedAsFile = join(projectDir, SCAFFOLD_GITIGNORE_FILE);
+    if (existsSync(copiedAsFile)) unlinkSync(copiedAsFile);
   }
 }
 
-/** Read rizzo-css.json from cwd. Returns { targetDir?, framework?, packageManager? } or null. */
+/** Read rizzo-css.json from cwd. Returns { targetDir?, framework?, packageManager?, theme? } or null. Preserves unknown keys. */
 function readRizzoConfig(cwd) {
   if (!cwd || !existsSync(cwd)) return null;
   const configPath = join(cwd, RIZZO_CONFIG_FILE);
@@ -306,6 +318,7 @@ function readRizzoConfig(cwd) {
     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;
+    if (typeof raw.theme === 'string') out.theme = raw.theme;
     return Object.keys(out).length ? out : null;
   } catch (_) { return null; }
 }
@@ -324,6 +337,7 @@ function writeRizzoConfig(cwd, config) {
   if (config.targetDir != null) obj.targetDir = config.targetDir;
   if (config.framework != null) obj.framework = config.framework;
   if (config.packageManager != null) obj.packageManager = config.packageManager;
+  if (config.theme != null) obj.theme = config.theme;
   writeFileSync(configPath, JSON.stringify(obj, null, 2) + '\n', 'utf8');
 }
 
@@ -449,6 +463,24 @@ async function confirmRunInstall(pm) {
   return answer === '' || /^y(es)?$/i.test(answer);
 }
 
+/** Ask user to copy js/main.js for vanilla interactive components. */
+async function confirmCopyVanillaJs() {
+  const answer = await question('\nCopy js/main.js for modal, dropdown, tabs, toast, theme switcher? (Y/n) ');
+  return answer === '' || /^y(es)?$/i.test(answer);
+}
+
+/** True if directory looks like an existing project (has package.json, src/, or index.html). */
+function isDirNonEmpty(dir) {
+  if (!dir || !existsSync(dir)) return false;
+  return existsSync(join(dir, 'package.json')) || existsSync(join(dir, 'src')) || existsSync(join(dir, 'index.html'));
+}
+
+/** Ask user to confirm creating in a non-empty directory. */
+async function confirmNonEmptyDir(projectDir) {
+  const answer = await question('\nCurrent directory is not empty. Continue? (y/N) ');
+  return /^y(es)?$/i.test(answer);
+}
+
 /** Format label with optional ANSI color (item.color). */
 function formatLabel(item) {
   const text = item.label || item.value;
@@ -740,12 +772,13 @@ function printHelp() {
   console.log(`
 rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte)
 
-Available commands: init, add, theme, help
+Available commands: init, add, theme, doctor, help
 
 Flags summary:
   init   --yes  --framework <fw>  --template <t>  --package-manager <pm>  --install  --no-install
-  add    --path <dir>  --framework <fw>  --package-manager <pm>  --install-package  --no-install
+  add    --path <dir>  --framework <fw>  ...  --no-snippet  --readme  --force  --vanilla-js
   theme  (no flags)
+  doctor Check config, CSS file, and optional layout link
   help   (no flags)
 
 Usage (use your package manager):
@@ -775,6 +808,10 @@ Options (add):
   --package-manager <pm>  npm | pnpm | yarn | bun (override detection for install/print commands)
   --install-package  After copying CSS, run package manager add rizzo-css
   --no-install      Do not run install or add (overrides --install-package)
+  --no-snippet      Do not write RIZZO-SNIPPET.txt (link + theme copy-paste)
+  --readme          Write README-RIZZO.md into the project
+  --force           Overwrite existing rizzo.min.css without prompting
+  --vanilla-js      (Vanilla) Copy js/main.js for interactive components (modal, dropdown, tabs, toast, theme switcher)
 
 Package managers:
   Supported: npm, pnpm, yarn, bun. Detection: lockfiles (pnpm-lock.yaml, yarn.lock, bun.lockb, package-lock.json) or package.json "packageManager"/"devEngines.packageManager". Use --package-manager to override.
@@ -835,12 +872,18 @@ Available to pick (Astro & Svelte; same list):
   ` + line1 + (line2 ? ',\n  ' + line2 : '') + (line3 ? ',\n  ' + line3 : '') + `
 
 Dependencies (when you pick the component on the left, the right is added automatically):
+  Navbar    →  Search, Settings (navbar includes search bar; Settings so gear button works)
   Settings  →  ThemeSwitcher (and themes.ts)
   Toast     →  Alert
 
 ThemeSwitcher and ThemeIcon: when selected, themes.ts (and Svelte theme.ts) is copied so they work.
 Icons: copied whenever you add any component.
 
+Where components are copied:
+  Astro   → src/components/rizzo/   (import from there)
+  Svelte  → src/lib/rizzo/          (import from '$lib/rizzo')
+  Vanilla → components/ (HTML)     (for interactivity add js/main.js; use --vanilla-js on add)
+
   Full     = all components above; dependencies are included so everything works.
   Minimal  = recommended set; any component in that set that requires others gets them.
   Manual   = you pick; the picker shows e.g. "Settings (adds ThemeSwitcher)". Required deps are added when you confirm.
@@ -857,6 +900,45 @@ function cmdTheme() {
   process.stdout.write('\nExample: <html lang="en" data-theme="github-dark-classic">\n\n');
 }
 
+/** Check project for Rizzo CSS: config, CSS file, optional link in layout. */
+function cmdDoctor() {
+  const cwd = process.cwd();
+  const config = readRizzoConfig(cwd);
+  console.log('\nRizzo CSS doctor\n');
+  let ok = true;
+  if (!config) {
+    console.log('  ✗ No ' + RIZZO_CONFIG_FILE + '. Run: npx rizzo-css add or init');
+    ok = false;
+  } else {
+    console.log('  ✓ ' + RIZZO_CONFIG_FILE + ' (framework: ' + (config.framework || '?') + ')');
+    const fw = config.framework || 'vanilla';
+    const paths = getFrameworkCssPaths(fw);
+    const targetDir = (config.targetDir || paths.targetDir);
+    const cssPath = fw === 'astro' ? join(cwd, 'public', 'css', 'rizzo.min.css') : fw === 'svelte' ? join(cwd, 'static', 'css', 'rizzo.min.css') : join(cwd, targetDir, 'rizzo.min.css');
+    if (!existsSync(cssPath)) {
+      console.log('  ✗ CSS not found at ' + cssPath);
+      ok = false;
+    } else {
+      console.log('  ✓ CSS at ' + cssPath);
+    }
+    const layoutPaths = fw === 'svelte' ? ['src/app.html'] : fw === 'astro' ? ['src/layouts/Layout.astro', 'src/layouts/BaseLayout.astro'] : [];
+    for (const lp of layoutPaths) {
+      const full = join(cwd, lp);
+      if (existsSync(full)) {
+        const content = readFileSync(full, 'utf8');
+        if (!content.includes('rizzo') && !content.includes('rizzo.min.css')) {
+          console.log('  ? Layout ' + lp + ' may not include the stylesheet — add <link rel="stylesheet" href="' + (fw === 'svelte' ? '/css/rizzo.min.css' : '/css/rizzo.min.css') + '" />');
+        } else {
+          console.log('  ✓ Layout ' + lp + ' includes Rizzo link');
+        }
+        break;
+      }
+    }
+  }
+  if (config && config.theme) console.log('  Theme (from config): ' + config.theme);
+  console.log(ok ? '\nAll checks passed.\n' : '\nFix the items above, then run your dev server.\n');
+}
+
 /** Prompt for default dark theme, default light theme, and initial theme. Returns { theme, defaultDark, defaultLight }. */
 async function promptThemes() {
   const defaultDark = await selectMenu(
@@ -974,6 +1056,10 @@ async function cmdAdd(argv) {
   const explicitFramework = explicitFrameworkRaw && FRAMEWORKS.includes(explicitFrameworkRaw.toLowerCase()) ? explicitFrameworkRaw.toLowerCase() : null;
   const installPackage = hasFlag(argv, '--install-package');
   const noInstall = hasFlag(argv, '--no-install');
+  const writeSnippet = !hasFlag(argv, '--no-snippet');
+  const writeReadme = hasFlag(argv, '--readme');
+  const force = hasFlag(argv, '--force');
+  const copyVanillaJs = hasFlag(argv, '--vanilla-js');
   const positionals = getPositionalArgs(argv);
 
   const cwd = process.cwd();
@@ -984,6 +1070,10 @@ async function cmdAdd(argv) {
     targetDir: customPath || (config && config.targetDir) || undefined,
     packageManager: pmOverride || undefined,
     preselectedComponents: positionals.length > 0 ? positionals : undefined,
+    writeSnippet,
+    writeReadme,
+    force,
+    copyVanillaJs,
   };
   await runAddToExisting(explicitFramework, options);
   if (installPackage && !noInstall) {
@@ -1320,17 +1410,37 @@ async function runAddToExisting(frameworkOverride, options) {
   const targetDirRaw = (options && options.targetDir) || (config && config.targetDir) || paths.targetDir;
   let cssTarget;
   if (framework === 'astro') {
-    copyRizzoCssAndFontsForAstro(cwd, cssSource);
     cssTarget = join(cwd, 'public', 'css', 'rizzo.min.css');
   } else if (framework === 'svelte') {
-    copyRizzoCssAndFontsForSvelte(cwd, cssSource);
     cssTarget = join(cwd, 'static', 'css', 'rizzo.min.css');
   } else {
     const targetDir = join(cwd, targetDirRaw);
     cssTarget = join(targetDir, 'rizzo.min.css');
-    mkdirSync(targetDir, { recursive: true });
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(targetDir);
+  }
+  const cssExists = existsSync(cssTarget);
+  if (cssExists && !options.force) {
+    const answer = await question('\nCSS already exists at ' + cssTarget + '. Overwrite? (y/N) ');
+    if (answer !== '' && !/^y(es)?$/i.test(answer)) {
+      console.log('Skipping CSS copy. Updating config and components only.');
+    } else {
+      options._overwriteCss = true;
+    }
+  } else if (cssExists && options.force) {
+    options._overwriteCss = true;
+  } else {
+    options._overwriteCss = true;
+  }
+  if (options._overwriteCss) {
+    if (framework === 'astro') {
+      copyRizzoCssAndFontsForAstro(cwd, cssSource);
+    } else if (framework === 'svelte') {
+      copyRizzoCssAndFontsForSvelte(cwd, cssSource);
+    } else {
+      const targetDir = join(cwd, targetDirRaw);
+      mkdirSync(targetDir, { recursive: true });
+      copyFileSync(cssSource, cssTarget);
+      copyRizzoFonts(dirname(cssTarget));
+    }
   }
 
   copyRizzoIcons(cwd, framework);
@@ -1346,6 +1456,20 @@ async function runAddToExisting(frameworkOverride, options) {
     const linkHrefForVanilla = (options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref;
     const vanillaRepl = { '{{LINK_HREF}}': linkHrefForVanilla, '{{DATA_THEME}}': theme };
     copyVanillaComponents(cwd, selectedComponents, vanillaRepl);
+    const needsJs = selectedComponents.some((c) => VANILLA_JS_COMPONENTS.includes(c));
+    const vanillaJsPath = join(cwd, 'js', 'main.js');
+    if (needsJs && !existsSync(vanillaJsPath) && (options.copyVanillaJs || (!preselected && (await confirmCopyVanillaJs())))) {
+      const vanillaJsSrc = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
+      if (existsSync(vanillaJsSrc)) {
+        mkdirSync(join(cwd, 'js'), { recursive: true });
+        let mainJs = readFileSync(vanillaJsSrc, 'utf8');
+        mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
+        writeFileSync(vanillaJsPath, mainJs, 'utf8');
+        console.log('  - Wrote js/main.js (for modal, dropdown, tabs, toast, theme switcher)');
+      }
+    } else if (needsJs && !existsSync(vanillaJsPath)) {
+      options._vanillaJsHint = true;
+    }
   }
 
   const linkHref = (framework === 'astro' || framework === 'svelte') ? paths.linkHref : ((options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref);
@@ -1357,38 +1481,56 @@ async function runAddToExisting(frameworkOverride, options) {
       : resolvePackageManager(cwd);
   const cliExample = pm.dlx('rizzo-css theme');
   const configTargetDir = framework === 'astro' ? 'public/css' : framework === 'svelte' ? 'static/css' : targetDirRaw;
-  writeRizzoConfig(cwd, { targetDir: configTargetDir, framework, packageManager: pm.agent });
+  writeRizzoConfig(cwd, { targetDir: configTargetDir, framework, packageManager: pm.agent, theme });
+  const writeSnippet = options.writeSnippet !== false;
+  if (writeSnippet) {
+    const where = framework === 'svelte' ? 'Root layout (e.g. src/app.html)' : framework === 'astro' ? 'Layout (e.g. src/layouts/Layout.astro)' : 'HTML or layout';
+    const snippetBody = [
+      'Add to ' + where + ':',
+      '',
+      '  <link rel="stylesheet" href="' + linkHref + '" />',
+      '',
+      'On <html>: data-theme="' + theme + '"',
+      'Themes: ' + cliExample,
+    ].join('\n');
+    writeFileSync(join(cwd, RIZZO_SNIPPET_FILE), snippetBody + '\n', 'utf8');
+  }
+  if (options.writeReadme) {
+    const readmePath = join(getPackageRoot(), 'scaffold', 'vanilla', SCAFFOLD_README_FILENAME);
+    if (existsSync(readmePath)) {
+      copyFileSync(readmePath, join(cwd, SCAFFOLD_README_FILENAME));
+    }
+  }
   console.log('\n✓ Rizzo CSS added to your existing project');
   console.log('  - ' + cssTarget);
   console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
+  if (writeSnippet) console.log('  - Wrote ' + RIZZO_SNIPPET_FILE + ' (copy-paste link + theme)');
+  if (options.writeReadme) console.log('  - Wrote ' + SCAFFOLD_README_FILENAME);
   console.log('\nYou must add the stylesheet link yourself — it is not added automatically.');
-  if (framework === 'svelte') {
+  if (selectedComponents.length === 0) {
+    console.log('\n  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('  data-theme="' + theme + '" on <html> — list themes: ' + cliExample);
+  } else 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: ' + 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\'.');
-    }
+    console.log('  data-theme="' + theme + '" on <html> (themes: ' + cliExample + ')');
+    console.log('  Components: src/lib/rizzo — import from \'$lib/rizzo\'.');
   } 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: ' + 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.');
-    }
+    console.log('  data-theme="' + theme + '" on <html> (themes: ' + cliExample + ')');
+    console.log('  Components: src/components/rizzo — import from there.');
   } 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: ' + 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('  data-theme="' + theme + '" on <html> (themes: ' + cliExample + ')');
+    console.log('  Component HTML files are in components/.');
+    if (options._vanillaJsHint) {
+      console.log('  For interactive components (modal, dropdown, tabs, toast, theme switcher), add js/main.js — run again with --vanilla-js or copy from a Full scaffold.');
     }
   }
-  console.log('\nTo install the package (CLI + components): ' + pm.add('rizzo-css'));
-  console.log('\nDocs: https://rizzo-css.vercel.app\n');
+  console.log('\nTo install the package: ' + pm.add('rizzo-css'));
+  console.log('\nNext: add the link above, then run your dev server. Docs: https://rizzo-css.vercel.app\n');
 }
 
 async function cmdInit(argv) {
@@ -1412,7 +1554,8 @@ async function cmdInit(argv) {
     framework = (frameworkArg && FRAMEWORKS.includes(frameworkArg.toLowerCase())) ? frameworkArg.toLowerCase() : (config && config.framework) || 'astro';
     initMode = 'new';
     const templateArg = getFlagValue(argv, '--template');
-    selectedTemplate = (templateArg && (templateArg === 'full' || templateArg === 'minimal' || templateArg === 'manual')) ? templateArg : 'full';
+    const defaultTemplate = framework === 'vanilla' ? 'minimal' : 'full';
+    selectedTemplate = (templateArg && (templateArg === 'full' || templateArg === 'minimal' || templateArg === 'manual')) ? templateArg : defaultTemplate;
     if (selectedTemplate === 'full' && (framework === 'astro' || framework === 'svelte')) {
       selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : [...ASTRO_COMPONENTS];
     } else if (selectedTemplate === 'minimal' && (framework === 'astro' || framework === 'svelte')) {
@@ -1489,6 +1632,13 @@ async function cmdInit(argv) {
   }
 
   const projectDir = name ? join(cwd, name) : cwd;
+  if (projectDir === cwd && isDirNonEmpty(cwd) && !yes) {
+    const ok = await confirmNonEmptyDir(projectDir);
+    if (!ok) {
+      console.log('Aborted.');
+      return;
+    }
+  }
   const cssSource = getCssPath();
 
   if (!existsSync(cssSource)) {
@@ -1742,7 +1892,7 @@ async function cmdInit(argv) {
 
   // Always write rizzo-css.json for new projects (targetDir, framework, packageManager).
   const pathsForConfig = getFrameworkCssPaths(framework);
-  writeRizzoConfig(projectDir, { targetDir: pathsForConfig.targetDir, framework, packageManager: selectedPm });
+  writeRizzoConfig(projectDir, { targetDir: pathsForConfig.targetDir, framework, packageManager: selectedPm, theme });
   console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
 
   if (runInstallAfterScaffold && !noInstall && hasPackageJson) {
@@ -1779,6 +1929,8 @@ async function cmdInit(argv) {
     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') + '.');
   }
+  if (hasPackageJson) console.log('\nNext: ' + runPrefix + nextStep);
+  else if (framework === 'vanilla') console.log('\nNext: open index.html or serve the folder.');
   console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
 
@@ -1803,6 +1955,11 @@ function main() {
     return;
   }
 
+  if (command === 'doctor') {
+    cmdDoctor();
+    return;
+  }
+
   if (command === 'add') {
     cmdAdd(argv).catch((err) => {
       console.error(err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },

package/scaffold/astro-minimal/gitignore

@@ -0,0 +1,24 @@
+# Astro default .gitignore (same as npm create astro@latest)
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

package/scaffold/svelte-minimal/gitignore

@@ -0,0 +1,10 @@
+node_modules
+.output
+.vercel
+.netlify
+/.svelte-kit
+/build
+.DS_Store
+.env
+.env.*
+!.env.example

package/scaffold/vanilla/README-RIZZO.md

@@ -13,7 +13,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.27`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.29`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/copy-to-clipboard.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/icons.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/index.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -314,6 +320,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/modal.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/navbar.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/pagination.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/progress-bar.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/search.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/settings.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/theme-switcher.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -289,6 +295,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/gitignore

@@ -0,0 +1,27 @@
+# Vanilla / static site default .gitignore (Rizzo CSS scaffold)
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Editor / IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# Environment
+.env
+.env.*
+!.env.example
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Optional: if you add Node/npm later
+node_modules/

package/scaffold/vanilla/index.html

@@ -220,6 +220,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -301,6 +307,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/js/main.js

@@ -731,6 +731,38 @@
     document.querySelectorAll('[data-accordion]').forEach(initOne);
   }
 
+  function initNavbarMobile() {
+    document.querySelectorAll('.navbar').forEach(function (navbar) {
+      var toggle = navbar.querySelector('.navbar__toggle');
+      var menu = navbar.querySelector('.navbar__menu');
+      if (!toggle || !menu) return;
+      function setMenuOpen(open) {
+        menu.classList.toggle('navbar__menu--open', open);
+        navbar.classList.toggle('navbar--menu-open', open);
+        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+        menu.setAttribute('aria-hidden', open ? 'false' : 'true');
+      }
+      toggle.addEventListener('click', function () {
+        setMenuOpen(!menu.classList.contains('navbar__menu--open'));
+      });
+      menu.querySelectorAll('.navbar__link').forEach(function (link) {
+        link.addEventListener('click', function () { setMenuOpen(false); });
+      });
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') {
+        document.querySelectorAll('.navbar__menu.navbar__menu--open').forEach(function (menu) {
+          var navbar = menu.closest('.navbar');
+          var toggle = navbar && navbar.querySelector('.navbar__toggle');
+          menu.classList.remove('navbar__menu--open');
+          navbar.classList.remove('navbar--menu-open');
+          if (toggle) toggle.setAttribute('aria-expanded', 'false');
+          menu.setAttribute('aria-hidden', 'true');
+        });
+      }
+    });
+  }
+
   function run() {
     initTheme();
     initSettings();
@@ -738,6 +770,7 @@
     initModals();
     initDropdowns();
     initAccordions();
+    initNavbarMobile();
   }
 
   if (document.readyState === 'loading') {