rizzo-css 0.0.22 → 0.0.24

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**. **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), 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`:
+**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`:
 
 ```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 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 RIZZO-LICENSE and RIZZO-README.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 and README-RIZZO.md (does not overwrite your project LICENSE/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.22 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.24 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 when you hand-pick. Each scaffold has RIZZO-README.md; every install includes RIZZO-LICENSE. The **Navbar** component in the scaffold includes the default Cat logo in the brand link (optional `logo` prop for a custom image). The **Vanilla** Full includes a Settings panel and toast; **Astro** and **Svelte** Full scaffolds 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 README-RIZZO.md; every install includes LICENSE-RIZZO. The **Navbar** component in the scaffold includes the default Cat logo in the brand link (optional `logo` prop for a custom image). The **Vanilla** Full includes a Settings panel and toast; **Astro** and **Svelte** Full scaffolds include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -7,9 +7,9 @@ const readline = require('readline');
 
 const RIZZO_CONFIG_FILE = 'rizzo-css.json';
 /** Scaffold README filename; avoids overwriting an existing project README.md. */
-const SCAFFOLD_README_FILENAME = 'RIZZO-README.md';
+const SCAFFOLD_README_FILENAME = 'README-RIZZO.md';
 /** Scaffold license filename; avoids overwriting an existing project LICENSE. */
-const SCAFFOLD_LICENSE_FILENAME = 'RIZZO-LICENSE';
+const SCAFFOLD_LICENSE_FILENAME = 'LICENSE-RIZZO';
 
 const COMMANDS = ['init', 'add', 'theme', 'help'];
 const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
@@ -24,14 +24,14 @@ const TEMPLATES = {
     { value: 'manual', label: 'Manual — index.html + CSS; pick components to add their pages + js/main.js' },
   ],
   astro: [
-    { value: 'full', label: 'Full — Astro app + all 25 components (config, one page, ' + SCAFFOLD_README_FILENAME + ', ' + SCAFFOLD_LICENSE_FILENAME + ', .env.example)' },
-    { value: 'minimal', label: 'Minimal — Astro app + recommended components (Button, Badge, Card, Modal, Tabs, ThemeSwitcher, FormGroup, Alert, Toast, Dropdown)' },
-    { value: 'manual', label: 'Manual — minimal base + pick the components you want' },
+    { value: 'full', label: 'Full — Astro app + all components (with dependencies so everything works)' },
+    { value: 'minimal', label: 'Minimal — Astro app + recommended set (includes any required dependencies)' },
+    { value: 'manual', label: 'Manual — minimal base + pick components (list shows which add others)' },
   ],
   svelte: [
-    { value: 'full', label: 'Full — SvelteKit app + all 25 components (config, one page, ' + SCAFFOLD_README_FILENAME + ', ' + SCAFFOLD_LICENSE_FILENAME + ', .env.example)' },
-    { value: 'minimal', label: 'Minimal — SvelteKit app + recommended components (Button, Badge, Card, Modal, Tabs, ThemeSwitcher, FormGroup, Alert, Toast, Dropdown)' },
-    { value: 'manual', label: 'Manual — minimal base + pick the components you want' },
+    { value: 'full', label: 'Full — SvelteKit app + all components (with dependencies so everything works)' },
+    { value: 'minimal', label: 'Minimal — SvelteKit app + recommended set (includes any required dependencies)' },
+    { value: 'manual', label: 'Manual — minimal base + pick components (list shows which add others)' },
   ],
 };
 
@@ -112,6 +112,61 @@ const RECOMMENDED_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Modal', 'Tabs', 'ThemeSwitcher', 'FormGroup', 'Alert', 'Toast', 'Dropdown',
 ];
 
+// 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'] },
+};
+
+function getComponentDeps(framework, componentName) {
+  const deps = COMPONENT_DEPS[framework];
+  return (deps && deps[componentName]) ? deps[componentName] : [];
+}
+
+/** Returns a short label for the picker, e.g. " (adds ThemeSwitcher)" or "". */
+function getComponentDependencyLabel(framework, componentName) {
+  const deps = getComponentDeps(framework, componentName);
+  if (deps.length === 0) return '';
+  return ' (adds ' + deps.join(', ') + ')';
+}
+
+/** Expand a list of component names with all required dependencies. Used for full, minimal, and add so everything works. */
+function expandWithDeps(framework, names) {
+  const depsMap = COMPONENT_DEPS[framework];
+  if (!depsMap) return [...names];
+  const out = new Set(names);
+  let added = true;
+  while (added) {
+    added = false;
+    for (const name of out) {
+      const req = depsMap[name];
+      if (req) for (const d of req) {
+        if (!out.has(d)) { out.add(d); added = true; }
+      }
+    }
+  }
+  return [...names].filter((n) => out.has(n)).concat([...out].filter((n) => !names.includes(n)));
+}
+
+/** Log which components were added automatically because others require them. Call before copy when expanded.length > selected.length. */
+function logAddedDeps(selected, expanded, framework) {
+  const added = expanded.filter((n) => !selected.includes(n));
+  if (added.length === 0) return;
+  const depsMap = COMPONENT_DEPS[framework];
+  if (!depsMap) return;
+  const byRequirement = [];
+  for (const name of added) {
+    for (const [parent, deps] of Object.entries(depsMap)) {
+      if (deps.includes(name) && selected.includes(parent)) {
+        byRequirement.push(name + ' (required by ' + parent + ')');
+        break;
+      }
+    }
+  }
+  if (byRequirement.length) console.log('\n  Also adding: ' + byRequirement.join('; '));
+}
+
 // Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug. Navbar, Settings, Search, Icons are vanilla-only.
 const VANILLA_COMPONENT_SLUGS = {
   Button: 'button', Badge: 'badge', Card: 'cards', Divider: 'divider', Spinner: 'spinner', ProgressBar: 'progress-bar',
@@ -185,7 +240,30 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
   }
 }
 
-/** Copy the package LICENSE into the project dir as RIZZO-LICENSE so we do not overwrite an existing LICENSE. */
+/** SvelteKit only: copy rizzo.min.css to static/css with font URLs rewritten to /assets/fonts/, and copy fonts to static/assets/fonts. */
+function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
+  const cssDir = join(projectDir, 'static', 'css');
+  const cssTarget = join(cssDir, 'rizzo.min.css');
+  const fontsDest = join(projectDir, 'static', 'assets', 'fonts');
+  mkdirSync(cssDir, { recursive: true });
+  mkdirSync(fontsDest, { recursive: true });
+  copyFileSync(cssSource, cssTarget);
+  let css = readFileSync(cssTarget, 'utf8');
+  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
+  writeFileSync(cssTarget, css, 'utf8');
+  const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
+  if (existsSync(fontsSrc)) {
+    const entries = readdirSync(fontsSrc, { withFileTypes: true });
+    for (const e of entries) {
+      const srcPath = join(fontsSrc, e.name);
+      const destPath = join(fontsDest, e.name);
+      if (e.isDirectory()) copyDirRecursive(srcPath, destPath);
+      else copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+/** Copy the package LICENSE into the project dir as LICENSE-RIZZO so we do not overwrite an existing LICENSE. */
 function copyPackageLicense(projectDir) {
   const licensePath = join(getPackageRoot(), 'LICENSE');
   if (existsSync(licensePath)) {
@@ -208,11 +286,17 @@ function readRizzoConfig(cwd) {
   } catch (_) { return null; }
 }
 
-/** Write rizzo-css.json to cwd. config: { targetDir?, framework?, packageManager? }. */
+/** Write rizzo-css.json to cwd. config: { targetDir?, framework?, packageManager? }. Preserves unknown keys from existing file. */
 function writeRizzoConfig(cwd, config) {
   if (!cwd || !existsSync(cwd)) return;
   const configPath = join(cwd, RIZZO_CONFIG_FILE);
-  const obj = {};
+  let obj = {};
+  if (existsSync(configPath)) {
+    try {
+      const raw = JSON.parse(readFileSync(configPath, 'utf8'));
+      if (raw && typeof raw === 'object') obj = { ...raw };
+    } catch (_) { /* ignore */ }
+  }
   if (config.targetDir != null) obj.targetDir = config.targetDir;
   if (config.framework != null) obj.framework = config.framework;
   if (config.packageManager != null) obj.packageManager = config.packageManager;
@@ -366,9 +450,10 @@ function selectMenu(options, title) {
     });
   }
 
+  const HINT = '  \u2191\u2193 move \u00b7 Enter select \u00b7 1-9 pick';
   return new Promise((resolve) => {
     let index = 0;
-    const lineCount = (title ? 1 : 0) + items.length + 1;
+    const lineCount = (title ? 1 : 0) + items.length + 2; // +1 blank +1 hint
 
     const render = (first) => {
       const lines = (title ? [title] : []).concat(
@@ -377,15 +462,25 @@ function selectMenu(options, title) {
           const prefix = i === index ? C.cyan + '>' + C.reset + ' ' : '  ';
           return prefix + circle + formatLabel(item);
         })
-      );
+      ).concat(['', HINT]);
       if (!first) {
         process.stdout.write('\u001b[' + lineCount + 'A');
       }
       process.stdout.write('\u001b[?25l');
-      process.stdout.write(lines.join('\n') + '\n\n');
+      process.stdout.write(lines.join('\n') + '\n');
       process.stdout.write('\u001b[?25h');
     };
 
+    const selectByNumber = (num) => {
+      const n = num === 0 ? 10 : num; // 0 = 10th item
+      const idx = n >= 1 && n <= items.length ? n - 1 : index;
+      process.stdin.setRawMode(false);
+      process.stdin.removeListener('data', onData);
+      process.stdin.pause();
+      process.stdout.write('\n');
+      resolve(items[idx].value);
+    };
+
     process.stdin.setRawMode(true);
     process.stdin.resume();
     process.stdin.setEncoding('utf8');
@@ -408,6 +503,16 @@ function selectMenu(options, title) {
         resolve(items[index].value);
         return;
       }
+      if (ch >= '1' && ch <= '9') {
+        buf = '';
+        selectByNumber(parseInt(ch, 10));
+        return;
+      }
+      if (ch === '0' && items.length >= 10) {
+        buf = '';
+        selectByNumber(10);
+        return;
+      }
       buf += ch;
       const isUp = buf === '\u001b[A' || buf === '\u001bOA' || (buf.length >= 2 && buf.endsWith('A') && buf.startsWith('\u001b'));
       const isDown = buf === '\u001b[B' || buf === '\u001bOB' || (buf.length >= 2 && buf.endsWith('B') && buf.startsWith('\u001b'));
@@ -499,7 +604,8 @@ function multiSelectMenu(options, title, initialSelected) {
         if (initialSet.has(items[i].value)) selected.add(i);
       }
     }
-    const lineCount = (title ? 1 : 0) + items.length + 1;
+    const HINT = '  \u2191\u2193 move \u00b7 Space toggle \u00b7 a all \u00b7 n none \u00b7 Enter confirm';
+    const lineCount = (title ? 1 : 0) + items.length + 2; // +1 blank +1 hint
     const realStart = withSentinels ? 2 : 0;
 
     const finish = () => {
@@ -527,15 +633,24 @@ function multiSelectMenu(options, title, initialSelected) {
           const prefix = i === index ? C.cyan + '>' + C.reset + ' ' : '  ';
           return prefix + circle + formatLabel(item);
         })
-      );
+      ).concat(['', HINT]);
       if (!first) {
         process.stdout.write('\u001b[' + lineCount + 'A');
       }
       process.stdout.write('\u001b[?25l');
-      process.stdout.write(lines.join('\n') + '\n\n');
+      process.stdout.write(lines.join('\n') + '\n');
       process.stdout.write('\u001b[?25h');
     };
 
+    const toggleByNumber = (num) => {
+      const n = num === 0 ? 10 : num;
+      const idx = n >= 1 && n <= items.length ? n - 1 : -1;
+      if (idx < realStart) return; // don't toggle "Select all" / "Select none"
+      if (selected.has(idx)) selected.delete(idx);
+      else selected.add(idx);
+      render(false);
+    };
+
     process.stdin.setRawMode(true);
     process.stdin.resume();
     process.stdin.setEncoding('utf8');
@@ -576,6 +691,16 @@ function multiSelectMenu(options, title, initialSelected) {
         render(false);
         return;
       }
+      if (ch >= '1' && ch <= '9') {
+        buf = '';
+        toggleByNumber(parseInt(ch, 10));
+        return;
+      }
+      if (ch === '0' && items.length >= 10) {
+        buf = '';
+        toggleByNumber(10);
+        return;
+      }
       if (ch === 'a' || ch === 'A') {
         buf = '';
         for (let i = realStart; i < items.length; i++) selected.add(i);
@@ -611,6 +736,14 @@ function printHelp() {
   console.log(`
 rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte)
 
+Available commands: init, add, theme, 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
+  theme  (no flags)
+  help   (no flags)
+
 Usage (use your package manager):
   npx rizzo-css <command> [options]
   pnpm dlx rizzo-css <command> [options]
@@ -642,6 +775,11 @@ Options (add):
 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.
 
+Interactive prompts (when no --yes/flag provided):
+  Single-choice: ↑/↓ move, Enter select, 1-9 pick by number (0 = 10th).
+  Multi-choice:  ↑/↓ move, Space toggle, a = all, n = none, Enter confirm, 1-9 toggle by number.
+  Ctrl+C to exit.
+
 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.
@@ -670,10 +808,43 @@ Examples:
   npx rizzo-css add --install-package
   npx rizzo-css theme
 
+Component dependencies (manual / add):
+  Some components require others to work. Picking them adds the required ones automatically.
+  Full list of available components and what relies on what: npx rizzo-css help components
+
 Docs: https://rizzo-css.vercel.app
 `);
 }
 
+function printHelpComponents() {
+  const list = ASTRO_COMPONENTS.map((name) => {
+    const deps = getComponentDeps('astro', name);
+    return deps.length ? name + ' (adds ' + deps.join(', ') + ')' : name;
+  });
+  const line1 = list.slice(0, 10).join(', ');
+  const line2 = list.slice(10, 20).join(', ');
+  const line3 = list.slice(20).join(', ');
+  console.log(`
+Components — full list and what relies on what
+
+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):
+  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.
+
+  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.
+
+To see this again: npx rizzo-css help components
+`);
+}
+
 function cmdTheme() {
   process.stdout.write('\nDark themes (set data-theme on <html>):\n');
   DARK_THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
@@ -704,6 +875,11 @@ async function promptThemes() {
   return { theme, defaultDark: DARK_THEMES.includes(defaultDark) ? defaultDark : DARK_THEMES[0], defaultLight: LIGHT_THEMES.includes(defaultLight) ? defaultLight : LIGHT_THEMES[0] };
 }
 
+function componentOptionLabel(framework, name) {
+  const suffix = getComponentDependencyLabel(framework, name);
+  return name + suffix;
+}
+
 /** Ask what to include: CSS only, recommended set, all components, or pick. Returns array of component names. Only call when componentList.length > 0. initialSelection: when set (e.g. for manual = minimal base), skip the menu and show multi-select with these pre-selected. */
 async function promptComponentChoice(componentList, framework, initialSelection) {
   const recommended = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
@@ -712,7 +888,7 @@ async function promptComponentChoice(componentList, framework, initialSelection)
       [
         { value: SENTINEL_ALL, label: 'Select all components' },
         { value: SENTINEL_NONE, label: 'Select no components' },
-        ...componentList.map((c) => ({ value: c, label: c })),
+        ...componentList.map((c) => ({ value: c, label: componentOptionLabel(framework, c) })),
       ],
       '? Components (minimal set pre-selected) — Space to toggle, Enter to confirm',
       initialSelection
@@ -734,9 +910,9 @@ async function promptComponentChoice(componentList, framework, initialSelection)
     [
       { value: SENTINEL_ALL, label: 'Select all components' },
       { value: SENTINEL_NONE, label: 'Select no components' },
-      ...componentList.map((c) => ({ value: c, label: c })),
+      ...componentList.map((c) => ({ value: c, label: componentOptionLabel(framework, c) })),
     ],
-    '? Components — Space to toggle, Enter to confirm'
+    '? Components — Space to toggle, Enter to confirm. Items like "Settings (adds ThemeSwitcher)" add those deps automatically. List: npx rizzo-css help components'
   );
 }
 
@@ -757,12 +933,12 @@ function detectFramework(cwd) {
 /**
  * Framework-specific paths for CSS and static assets. Use these so fonts, sounds, images
  * go in the right place per framework (Astro: public/, SvelteKit: static/, Vanilla: project root).
- * - targetDir: where rizzo.min.css is copied. Fonts: for Astro, public/assets/fonts (CLI rewrites URLs); for Svelte/Vanilla, targetDir/fonts so ./fonts/ resolves.
- * - assetsRoot: root for static assets (Astro: public; use public/assets/fonts, public/assets/sounds).
+ * - targetDir: where rizzo.min.css is copied. Fonts: Astro public/assets/fonts, Svelte static/assets/fonts (CLI rewrites URLs); Vanilla targetDir/fonts.
+ * - assetsRoot: root for static assets (Astro: public; Svelte: static; Vanilla: '').
  */
 function getFrameworkCssPaths(framework) {
   if (framework === 'svelte') {
-    return { targetDir: 'static/css', linkHref: '/css/rizzo.min.css', fontsDir: 'static/css/fonts', assetsRoot: 'static' };
+    return { targetDir: 'static/css', linkHref: '/css/rizzo.min.css', fontsDir: 'static/assets/fonts', assetsRoot: 'static' };
   }
   if (framework === 'astro') {
     return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css', fontsDir: 'public/assets/fonts', assetsRoot: 'public' };
@@ -990,7 +1166,7 @@ function copySvelteComponents(projectDir, selectedNames) {
   if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) {
     copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
   }
-  if (toCopy.includes('ThemeSwitcher')) {
+  if (toCopy.includes('ThemeSwitcher') || toCopy.includes('ThemeIcon')) {
     const themesSrc = join(scaffoldDir, 'themes.ts');
     const themeSrc = join(scaffoldDir, 'theme.ts');
     if (existsSync(themesSrc)) copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
@@ -1035,7 +1211,7 @@ function copyAstroComponents(projectDir, selectedNames) {
   if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) {
     copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
   }
-  if (toCopy.includes('ThemeSwitcher')) {
+  if (toCopy.includes('ThemeSwitcher') || toCopy.includes('ThemeIcon')) {
     const themesSrc = join(scaffoldDir, 'themes.ts');
     if (existsSync(themesSrc)) {
       copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
@@ -1127,6 +1303,9 @@ async function runAddToExisting(frameworkOverride, options) {
   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');
@@ -1137,16 +1316,20 @@ async function runAddToExisting(frameworkOverride, options) {
 
   copyRizzoIcons(cwd, framework);
   if (framework === 'svelte' && selectedComponents.length > 0) {
-    copySvelteComponents(cwd, selectedComponents);
+    const expanded = expandWithDeps('svelte', selectedComponents);
+    logAddedDeps(selectedComponents, expanded, 'svelte');
+    copySvelteComponents(cwd, expanded);
   } else if (framework === 'astro' && selectedComponents.length > 0) {
-    copyAstroComponents(cwd, selectedComponents);
+    const expanded = expandWithDeps('astro', selectedComponents);
+    logAddedDeps(selectedComponents, expanded, 'astro');
+    copyAstroComponents(cwd, expanded);
   } else if (framework === 'vanilla' && selectedComponents.length > 0) {
     const linkHrefForVanilla = (options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref;
     const vanillaRepl = { '{{LINK_HREF}}': linkHrefForVanilla, '{{DATA_THEME}}': theme };
     copyVanillaComponents(cwd, selectedComponents, vanillaRepl);
   }
 
-  const linkHref = (options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref;
+  const linkHref = (framework === 'astro' || framework === 'svelte') ? paths.linkHref : ((options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref);
   const pmFromOption = options && options.packageManager && VALID_PACKAGE_MANAGERS.includes(options.packageManager);
   const pm = pmFromOption
     ? getPackageManagerCommands({ agent: options.packageManager, command: options.packageManager })
@@ -1154,7 +1337,8 @@ async function runAddToExisting(frameworkOverride, options) {
       ? getPackageManagerCommands({ agent: config.packageManager, command: config.packageManager })
       : resolvePackageManager(cwd);
   const cliExample = pm.dlx('rizzo-css theme');
-  writeRizzoConfig(cwd, { targetDir: targetDirRaw, framework, packageManager: pm.agent });
+  const configTargetDir = framework === 'astro' ? 'public/css' : framework === 'svelte' ? 'static/css' : targetDirRaw;
+  writeRizzoConfig(cwd, { targetDir: configTargetDir, framework, packageManager: pm.agent });
   console.log('\n✓ Rizzo CSS added to your existing project');
   console.log('  - ' + cssTarget);
   console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
@@ -1316,6 +1500,13 @@ async function cmdInit(argv) {
   const useVanillaFull = selectedTemplate === 'full' && framework === 'vanilla' && existsSync(getScaffoldVanillaIndex());
   const useVanillaMinimal = selectedTemplate === 'minimal' && framework === 'vanilla';
 
+  // Full and minimal get all required dependencies so everything works; manual gets deps when user picks (see prompt labels).
+  let componentsToCopy = selectedComponents;
+  if ((framework === 'astro' || framework === 'svelte') && selectedComponents.length > 0) {
+    componentsToCopy = expandWithDeps(framework, selectedComponents);
+    logAddedDeps(selectedComponents, componentsToCopy, framework);
+  }
+
   let cssTarget;
   let indexPath;
 
@@ -1343,9 +1534,9 @@ async function cmdInit(argv) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
     copyPackageLicense(projectDir);
-    if (selectedComponents.length > 0) {
+    if (componentsToCopy.length > 0) {
       copyRizzoIcons(projectDir, 'astro');
-      copyAstroComponents(projectDir, selectedComponents);
+      copyAstroComponents(projectDir, componentsToCopy);
     }
   } else if (useAstroBase) {
     mkdirSync(projectDir, { recursive: true });
@@ -1356,39 +1547,35 @@ async function cmdInit(argv) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
     copyPackageLicense(projectDir);
-    if (selectedComponents.length > 0) {
+    if (componentsToCopy.length > 0) {
       copyRizzoIcons(projectDir, 'astro');
-      copyAstroComponents(projectDir, selectedComponents);
+      copyAstroComponents(projectDir, componentsToCopy);
     }
   } else if (useHandpickSvelte) {
     mkdirSync(projectDir, { recursive: true });
     copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
-    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
     copyPackageLicense(projectDir);
-    if (selectedComponents.length > 0) {
+    if (componentsToCopy.length > 0) {
       copyRizzoIcons(projectDir, 'svelte');
-      copySvelteComponents(projectDir, selectedComponents);
+      copySvelteComponents(projectDir, componentsToCopy);
     }
   } else if (useSvelteBase) {
     mkdirSync(projectDir, { recursive: true });
     copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
-    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
     copyPackageLicense(projectDir);
-    if (selectedComponents.length > 0) {
+    if (componentsToCopy.length > 0) {
       copyRizzoIcons(projectDir, 'svelte');
-      copySvelteComponents(projectDir, selectedComponents);
+      copySvelteComponents(projectDir, componentsToCopy);
     }
   } else if (useVanillaFull) {
     const cssDir = join(projectDir, pathsForScaffold.targetDir);
@@ -1449,11 +1636,16 @@ async function cmdInit(argv) {
     writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), VANILLA_MINIMAL_README, 'utf8');
     copyPackageLicense(projectDir);
   } else {
-    const cssDir = join(projectDir, pathsForScaffold.targetDir);
-    cssTarget = join(cssDir, 'rizzo.min.css');
-    mkdirSync(cssDir, { recursive: true });
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
+    if (framework === 'svelte') {
+      copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
+      cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
+    } else {
+      const cssDir = join(projectDir, pathsForScaffold.targetDir);
+      cssTarget = join(cssDir, 'rizzo.min.css');
+      mkdirSync(cssDir, { recursive: true });
+      copyFileSync(cssSource, cssTarget);
+      copyRizzoFonts(dirname(cssTarget));
+    }
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1553,6 +1745,10 @@ function main() {
   const command = (argv[0] || 'help').toLowerCase().replace(/^--?/, '');
 
   if (command === 'help' || command === 'h' || !COMMANDS.includes(command)) {
+    if (argv[1] === 'components') {
+      printHelpComponents();
+      return;
+    }
     if (argv[0] && !COMMANDS.includes(command) && command !== 'h') {
       console.error('Unknown command: ' + argv[0] + '\n');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "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/Navbar.astro

@@ -1,5 +1,6 @@
 ---
 import Cat from './icons/Cat.astro';
+import Gear from './icons/Gear.astro';
 interface Props { siteName?: string; logo?: string; }
 const { siteName = 'Site', logo } = Astro.props;
 ---
@@ -15,6 +16,12 @@ const { siteName = 'Site', logo } = Astro.props;
         {siteName}
       </a>
     </div>
+    <div class="navbar__actions-desktop">
+      <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
+        <Gear class="navbar__settings-icon" width={20} height={20} />
+        <span class="navbar__settings-label">Settings</span>
+      </button>
+    </div>
     <button type="button" class="navbar__toggle" aria-label="Toggle menu" aria-expanded="false">
       <span class="navbar__toggle-icon" aria-hidden="true"><span></span><span></span><span></span></span>
     </button>