rizzo-css 0.0.40 → 0.0.42

package/README.md

@@ -12,13 +12,15 @@ 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** | **Minimal** (recommended; all interactive components) | **Manual** (same base; pick which to include; all pre-selected), then package manager. Full and Minimal include all 29 components and 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 **Core** (all 31 components) or **Manual** (pick which to include; all pre-selected), then package manager. Core includes all 31 components and 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
 ```
 
+**Running the CLI:** npm → `npx`; pnpm → `pnpm dlx`; yarn → `npx` (Yarn 1 has no `dlx`; works with Yarn 2+ too); bun → `bunx`. The [docs site](https://rizzo-css.vercel.app/docs/getting-started) tabs show the correct command for each manager.
+
 `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) |
@@ -46,7 +48,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**; **Minimal** and **Manual** both use the full set of interactive components as the base (so everything works together), **Full** includes everything. 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.
+Scaffolds in the package: `scaffold/vanilla/` (Core or Manual), `scaffold/astro-core/`, `scaffold/svelte-core/`, plus `scaffold/astro/` and `scaffold/svelte/` (component templates for hand-pick), and `scaffold/config/` (font pairs for the Settings component). When you add **Settings** via the CLI (Astro or Svelte), the CLI also copies `scaffold/config/fonts.ts` into your project so the font-pair dropdown works (Astro: `src/components/config/fonts.ts`; Svelte: `src/lib/config/fonts.ts`). Use `npx rizzo-css init` and choose **Create new project**; **Core** includes all 31 components, **Manual** lets you pick (all interactive pre-selected). 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 include package.json and .env.example.
 
 ## Use
 
@@ -61,7 +63,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.39 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.42 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->
@@ -70,7 +72,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 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`).
+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** Core includes a Settings panel and toast; **Astro** and **Svelte** Core scaffolds include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -31,37 +31,22 @@ const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
 /** Supported package managers: detection, install/add commands, and --package-manager override. */
 const VALID_PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'];
 
-/** Full = everything we ship. Minimal = same full interactive base (all components). Manual = same base, pick which to include. */
+/** Core = everything we ship. Manual = same base, pick which components to include. */
 const TEMPLATES = {
   vanilla: [
-    { value: 'full', label: 'Full — index.html + theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME },
-    { value: 'minimal', label: 'Minimal — index.html + CSS + js/main.js + all interactive components (recommended starter)' },
+    { value: 'core', label: 'Core — index.html + theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME },
     { value: 'manual', label: 'Manual — index.html + CSS; pick which components to add (base = all interactive)' },
   ],
   astro: [
-    { value: 'full', label: 'Full — Astro app + all components (with dependencies so everything works)' },
-    { value: 'minimal', label: 'Minimal — Astro app + all interactive components (full base; everything works together)' },
+    { value: 'core', label: 'Core — Astro app + all components (with dependencies so everything works)' },
     { value: 'manual', label: 'Manual — same base; pick which components to include (all interactive pre-selected)' },
   ],
   svelte: [
-    { value: 'full', label: 'Full — SvelteKit app + all components (with dependencies so everything works)' },
-    { value: 'minimal', label: 'Minimal — SvelteKit app + all interactive components (full base; everything works together)' },
+    { value: 'core', label: 'Core — SvelteKit app + all components (with dependencies so everything works)' },
     { value: 'manual', label: 'Manual — same base; pick which components to include (all interactive pre-selected)' },
   ],
 };
 
-const VANILLA_MINIMAL_README = `# Vanilla + Rizzo CSS (minimal)
-
-Minimal starter: HTML + CSS + js/main.js + all interactive component pages. Scaffolded with \`npx rizzo-css init --framework vanilla --template minimal\`.
-
-- Open \`index.html\` in a browser or serve the folder. Edit \`index.html\` and add your content. CSS: \`css/rizzo.min.css\`. Script: \`js/main.js\` (already linked).
-- \`components/\` contains HTML pages for every interactive component (Button, Badge, Card, Modal, Tabs, Navbar, Search, Settings, ThemeSwitcher, Dropdown, Accordion, Toast, CopyToClipboard, forms, table, etc.). Open \`components/index.html\` to browse them.
-- Set a theme: \`<html data-theme="github-dark-classic">\` (see \`npx rizzo-css theme\` for all themes).
-- Template **Full** adds the same components in a full showcase layout with theme switcher on every page.
-
-Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
-`;
-
 const VANILLA_MANUAL_README = `# Vanilla + Rizzo CSS (manual)
 
 Manual setup: HTML + CSS, plus the component pages you chose (base = all interactive components). Scaffolded with \`npx rizzo-css init --framework vanilla --template manual\`.
@@ -71,7 +56,7 @@ Manual setup: HTML + CSS, plus the component pages you chose (base = all interac
 - If you picked components, \`components/\` has their HTML pages and \`js/main.js\` is included (open \`components/index.html\` to browse).
 - Set a theme: \`<html data-theme="github-dark-classic">\` (see \`npx rizzo-css theme\` for all themes).
 
-**If you chose no components:** To add component JavaScript (modal, dropdown, tabs, toast, search, navbar, copy-to-clipboard, theme switcher, etc.), use the [Vanilla component docs](https://rizzo-css.vercel.app/docs/vanilla/components) or run \`npx rizzo-css init\` with Vanilla → **Minimal** or **Full** in a temp folder and copy \`js/main.js\` and \`components/\` into this project.
+**If you chose no components:** To add component JavaScript (modal, dropdown, tabs, toast, search, navbar, copy-to-clipboard, theme switcher, etc.), use the [Vanilla component docs](https://rizzo-css.vercel.app/docs/vanilla/components) or run \`npx rizzo-css init\` with Vanilla → **Core** in a temp folder and copy \`js/main.js\` and \`components/\` into this project.
 
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
 `;
@@ -111,23 +96,23 @@ const SVELTE_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
-  'Modal', 'Toast', 'Table', 'ThemeSwitcher',
+  'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Settings', 'Search', 'Icons',
 ];
 const ASTRO_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
-  'Modal', 'Toast', 'Table', 'ThemeSwitcher',
+  'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Settings', 'Search', 'Icons',
 ];
 
-// Base set for Minimal and Manual: all interactive components we ship (so minimal/manual have a full working set). Full still includes everything (same list + any extras).
+// Base set for Manual: all interactive components we ship (so manual has a full working set). Full includes everything (same list).
 const RECOMMENDED_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
-  'Modal', 'Toast', 'Table', 'ThemeSwitcher',
+  'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Search', 'Settings', 'Icons',
 ];
 
@@ -137,8 +122,8 @@ const VANILLA_JS_COMPONENTS = ['Modal', 'Dropdown', 'Tabs', 'Toast', 'ThemeSwitc
 // 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'], Navbar: ['Search', 'Settings'] },
-  svelte: { Settings: ['ThemeSwitcher'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
+  astro: { Settings: ['ThemeSwitcher', 'FontSwitcher', 'SoundEffects'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
+  svelte: { Settings: ['ThemeSwitcher', 'FontSwitcher', 'SoundEffects'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
 };
 
 function getComponentDeps(framework, componentName) {
@@ -153,7 +138,7 @@ function getComponentDependencyLabel(framework, componentName) {
   return ' (adds ' + deps.join(', ') + ')';
 }
 
-/** Expand a list of component names with all required dependencies. Used for full, minimal, and add so everything works. */
+/** Expand a list of component names with all required dependencies. Used for full, manual, and add so everything works. */
 function expandWithDeps(framework, names) {
   const depsMap = COMPONENT_DEPS[framework];
   if (!depsMap) return [...names];
@@ -304,9 +289,9 @@ function copyVanillaGitignore(projectDir) {
   }
 }
 
-/** Copy Astro minimal scaffold gitignore into project as .gitignore (full and minimal templates). */
+/** Copy Astro scaffold gitignore into project as .gitignore (full template). */
 function copyAstroGitignore(projectDir) {
-  const gitignorePath = join(getScaffoldAstroMinimalDir(), SCAFFOLD_GITIGNORE_FILE);
+  const gitignorePath = join(getScaffoldAstroCoreDir(), SCAFFOLD_GITIGNORE_FILE);
   if (existsSync(gitignorePath)) {
     copyFileSync(gitignorePath, join(projectDir, '.gitignore'));
     const copiedAsFile = join(projectDir, SCAFFOLD_GITIGNORE_FILE);
@@ -314,9 +299,9 @@ function copyAstroGitignore(projectDir) {
   }
 }
 
-/** Copy Svelte minimal scaffold gitignore into project as .gitignore (full and minimal templates). */
+/** Copy Svelte scaffold gitignore into project as .gitignore (full template). */
 function copySvelteGitignore(projectDir) {
-  const gitignorePath = join(getScaffoldSvelteMinimalDir(), SCAFFOLD_GITIGNORE_FILE);
+  const gitignorePath = join(getScaffoldSvelteCoreDir(), SCAFFOLD_GITIGNORE_FILE);
   if (existsSync(gitignorePath)) {
     copyFileSync(gitignorePath, join(projectDir, '.gitignore'));
     const copiedAsFile = join(projectDir, SCAFFOLD_GITIGNORE_FILE);
@@ -424,7 +409,7 @@ function getPackageManagerCommands(pm) {
     run: (script) => (pm.agent === 'npm' ? c + ' run ' + script : c + ' run ' + script),
     add: (pkg) => (pm.agent === 'npm' ? c + ' install ' + pkg : c + ' add ' + pkg),
     addDev: (pkg) => (pm.agent === 'npm' ? c + ' install -D ' + pkg : pm.agent === 'bun' ? c + ' add -d ' + pkg : c + ' add -D ' + pkg),
-    dlx: (pkgAndArgs) => (pm.agent === 'npm' ? 'npx ' + pkgAndArgs : pm.agent === 'pnpm' ? 'pnpm dlx ' + pkgAndArgs : pm.agent === 'yarn' ? 'yarn dlx ' + pkgAndArgs : 'bunx ' + pkgAndArgs),
+    dlx: (pkgAndArgs) => (pm.agent === 'npm' ? 'npx ' + pkgAndArgs : pm.agent === 'pnpm' ? 'pnpm dlx ' + pkgAndArgs : pm.agent === 'yarn' ? 'npx ' + pkgAndArgs : 'bunx ' + pkgAndArgs),
   };
 }
 
@@ -458,7 +443,7 @@ async function promptPackageManager(projectDir) {
   return selectMenu(options, '? Package manager (for install and run commands)');
 }
 
-/** Prompt user to select Full or Manual for the chosen framework. Returns 'full' or 'manual'. */
+/** Prompt user to select Core or Manual for the chosen framework. Returns 'core' or 'manual'. */
 async function promptTemplate(framework) {
   const options = TEMPLATES[framework] || TEMPLATES.vanilla;
   return selectMenu(options, '? Full or Manual?');
@@ -480,6 +465,27 @@ async function confirmRunInstall(pm) {
   return answer === '' || /^y(es)?$/i.test(answer);
 }
 
+/** Prompt yes/no; default yes. Returns true to initialize git repo, false to skip. */
+async function confirmGitInit() {
+  const answer = await question('\nInitialize a git repository? (Y/n) ');
+  return answer === '' || /^y(es)?$/i.test(answer);
+}
+
+/** Run git init in projectDir if .git does not already exist. Returns true if init ran (or already a repo), false on failure. */
+function runGitInit(projectDir) {
+  const gitDir = join(projectDir, '.git');
+  if (existsSync(gitDir)) {
+    return true;
+  }
+  const code = runInDir(projectDir, 'git init');
+  if (code === 0) {
+    console.log('  ✓ Git repository initialized.');
+    return true;
+  }
+  console.error('  ✗ git init failed (exit ' + code + '). You can run "git init" manually in the project directory.');
+  return false;
+}
+
 /** 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, search, navbar, copy-to-clipboard, theme switcher? (Y/n) ');
@@ -793,7 +799,7 @@ rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte)
 Available commands: init, add, theme, doctor, help
 
 Flags summary:
-  init   --yes  --path <dir>  --framework <fw>  --template <t>  --package-manager <pm>  --install  --no-install
+  init   --yes  --path <dir>  --framework <fw>  --template <t>  --package-manager <pm>  --install  --no-install  --no-git
   add    --path <dir>  --framework <fw>  ...  --no-snippet  --readme  --force  --vanilla-js
   theme  (no flags)
   doctor Check config, CSS file, and optional layout link
@@ -802,24 +808,25 @@ Flags summary:
 Usage (use your package manager):
   npx rizzo-css <command> [options]
   pnpm dlx rizzo-css <command> [options]
-  yarn dlx rizzo-css <command> [options]
+  yarn: npx rizzo-css <command> [options]   (Yarn 1 has no dlx; Yarn 2+ can use yarn dlx)
   bunx rizzo-css <command> [options]
 
 Commands:
-  init    New project = Full (everything) | Minimal (all 29 interactive) | Manual (all pre-selected; pick what to include). Existing = drop in CSS + hand-pick. First: framework, then existing vs new.
+  init    New project = Core (everything) | Manual (pick which components; all pre-selected). 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)
+  --yes             Non-interactive: scaffold new in cwd with defaults (framework: astro, template: core)
   --path <dir>      Project directory (relative to cwd or absolute). Scaffold and run install there. With --yes; interactive: "Enter path" option.
   --framework <fw>  vanilla | astro | svelte (with --yes; otherwise first prompt)
-  --template <t>    full | minimal | manual (all frameworks); with --yes defaults to full
+  --template <t>    core | manual (all frameworks); with --yes defaults to core
   --package-manager <pm>  npm | pnpm | yarn | bun (with --yes, or skip PM prompt when interactive)
   --install         After scaffolding, run package manager install in project directory (no prompt)
   --no-install      Do not run install and do not prompt
-  (Install always runs in the project directory. rizzo-css.json is written for new and existing projects; interactive run prompts "Run install now? (Y/n)" for Astro/Svelte.)
+  --no-git          With --yes, skip initializing a git repository (default with --yes is to run git init)
+  (Git: only init offers or runs git init. Interactive init: "Initialize a git repository? (Y/n)" for all frameworks. With --yes, git init runs unless --no-git. Add (CSS + components) does not prompt for git. Astro/Svelte then get "Run install now? (Y/n)"; Vanilla has no package manager. rizzo-css.json is written only when the project does not already have one.)
 
 Options (add):
   --path <dir>      Target directory for rizzo.min.css (overrides config and framework default)
@@ -833,7 +840,7 @@ Options (add):
   --vanilla-js      (Vanilla) Copy js/main.js for interactive components (modal, dropdown, tabs, toast, search, navbar, copy-to-clipboard, 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.
+  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. Yarn 1 (classic) has no dlx; we show npx for yarn so it works everywhere. Yarn 2+ can use yarn dlx instead.
 
 Interactive prompts (when no --yes/flag provided):
   Single-choice (framework, template, etc.): ↑/↓ move, Enter select.
@@ -848,11 +855,11 @@ Use framework CLI first, then add Rizzo CSS (match your package manager):
   For Vanilla:  npx rizzo-css init --yes --framework vanilla
   npm create svelte@latest my-app   && cd my-app && npx rizzo-css add
   pnpm dlx create-svelte@latest my-app && cd my-app && pnpm dlx rizzo-css add
-  yarn create svelte my-app         && cd my-app && yarn dlx rizzo-css add
+  yarn create svelte my-app         && cd my-app && npx rizzo-css add
   bun create svelte my-app         && cd my-app && bunx rizzo-css add
   npm create astro@latest my-app   && cd my-app && npx rizzo-css add
   pnpm dlx create-astro@latest my-app && cd my-app && pnpm dlx rizzo-css add
-  yarn create astro my-app         && cd my-app && yarn dlx rizzo-css add
+  yarn create astro my-app         && cd my-app && npx rizzo-css add
   bun create astro my-app         && cd my-app && bunx rizzo-css add
 
 Examples:
@@ -861,7 +868,7 @@ Examples:
   npx rizzo-css init --yes --path my-app --framework astro --install
   npx rizzo-css init --yes --framework astro --package-manager pnpm --install
   npx rizzo-css init --yes --framework vanilla
-  npx rizzo-css init --yes --framework svelte --template full
+  npx rizzo-css init --yes --framework svelte --template core
   npx rizzo-css add --package-manager yarn --install-package
   npx rizzo-css add
   npx rizzo-css add Button
@@ -893,7 +900,7 @@ Available to pick (Astro & Svelte; same list):
 
 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)
+  Settings  →  ThemeSwitcher, FontSwitcher, SoundEffects (and themes.ts)
   Toast     →  Alert
 
 ThemeSwitcher and ThemeIcon: when selected, themes.ts (and Svelte theme.ts) is copied so they work.
@@ -904,9 +911,8 @@ Where components are copied:
   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  = all 29 interactive components; any component that requires others gets them.
-  Manual   = you pick; the picker shows e.g. "Settings (adds ThemeSwitcher)". Required deps are added when you confirm.
+  Core   = all components above; dependencies are included so everything works.
+  Manual = you pick; the picker shows e.g. "Settings (adds ThemeSwitcher, FontSwitcher, SoundEffects)". Required deps are added when you confirm.
 
 To see this again: npx rizzo-css help components
 `);
@@ -1124,6 +1130,10 @@ function getScaffoldUtilsDir() {
   return join(getPackageRoot(), 'scaffold', 'utils');
 }
 
+function getScaffoldConfigDir() {
+  return join(getPackageRoot(), 'scaffold', 'config');
+}
+
 function getScaffoldVanillaIndex() {
   return join(getPackageRoot(), 'scaffold', 'vanilla', 'index.html');
 }
@@ -1210,12 +1220,12 @@ function copyRizzoIcons(projectDir, framework) {
   }
 }
 
-function getScaffoldAstroMinimalDir() {
-  return join(getPackageRoot(), 'scaffold', 'astro-minimal');
+function getScaffoldAstroCoreDir() {
+  return join(getPackageRoot(), 'scaffold', 'astro-core');
 }
 
-function getScaffoldSvelteMinimalDir() {
-  return join(getPackageRoot(), 'scaffold', 'svelte-minimal');
+function getScaffoldSvelteCoreDir() {
+  return join(getPackageRoot(), 'scaffold', 'svelte-core');
 }
 
 function copyDirRecursive(src, dest) {
@@ -1291,6 +1301,15 @@ function copySvelteComponents(projectDir, selectedNames) {
     if (existsSync(themesSrc)) copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
     if (existsSync(themeSrc)) copyFileSync(themeSrc, join(targetDir, 'theme.ts'));
   }
+  if (toCopy.includes('Settings')) {
+    const configDir = getScaffoldConfigDir();
+    const fontsSrc = join(configDir, 'fonts.ts');
+    if (existsSync(fontsSrc)) {
+      const projectConfigDir = join(projectDir, 'src', 'lib', 'config');
+      mkdirSync(projectConfigDir, { recursive: true });
+      copyFileSync(fontsSrc, join(projectConfigDir, 'fonts.ts'));
+    }
+  }
   if (exports.length > 0 || copyIconsOnly) {
     if (exports.length > 0) {
       const indexContent = `/** Rizzo CSS Svelte components — selected via npx rizzo-css init */\n${exports.join('\n')}\n`;
@@ -1347,6 +1366,15 @@ function copyAstroComponents(projectDir, selectedNames) {
       writeFileSync(join(projectUtilsDir, 'theme.ts'), themeContent);
     }
   }
+  if (toCopy.includes('Settings')) {
+    const configDir = getScaffoldConfigDir();
+    const fontsSrc = join(configDir, 'fonts.ts');
+    if (existsSync(fontsSrc)) {
+      const projectConfigDir = join(projectDir, 'src', 'components', 'config');
+      mkdirSync(projectConfigDir, { recursive: true });
+      copyFileSync(fontsSrc, join(projectConfigDir, 'fonts.ts'));
+    }
+  }
   if (count > 0 || copyIconsOnly) {
     const msg = copyIconsOnly ? 'Icons' : count + ' Astro components + icons';
     console.log('\n  ✓ ' + msg + ' copied to ' + targetDir);
@@ -1502,7 +1530,11 @@ 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, theme });
+  const configPath = join(cwd, RIZZO_CONFIG_FILE);
+  const hadConfig = existsSync(configPath);
+  if (!hadConfig) {
+    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';
@@ -1524,7 +1556,7 @@ async function runAddToExisting(frameworkOverride, options) {
   }
   console.log('\n✓ Rizzo CSS added to your existing project');
   console.log('  - ' + cssTarget);
-  console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
+  if (!hadConfig) 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.');
@@ -1576,13 +1608,10 @@ async function cmdInit(argv) {
     framework = (frameworkArg && FRAMEWORKS.includes(frameworkArg.toLowerCase())) ? frameworkArg.toLowerCase() : (config && config.framework) || 'astro';
     initMode = 'new';
     const templateArg = getFlagValue(argv, '--template');
-    const defaultTemplate = framework === 'vanilla' ? 'minimal' : 'full';
-    selectedTemplate = (templateArg && (templateArg === 'full' || templateArg === 'minimal' || templateArg === 'manual')) ? templateArg : defaultTemplate;
-    if (selectedTemplate === 'full' && (framework === 'astro' || framework === 'svelte')) {
+    const defaultTemplate = 'core';
+    selectedTemplate = (templateArg && (templateArg === 'core' || templateArg === 'manual')) ? templateArg : defaultTemplate;
+    if (selectedTemplate === 'core' && (framework === 'astro' || framework === 'svelte')) {
       selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : [...ASTRO_COMPONENTS];
-    } else if (selectedTemplate === 'minimal' && (framework === 'astro' || framework === 'svelte')) {
-      const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : ASTRO_COMPONENTS;
-      selectedComponents = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
     }
     const projectDir = customProjectPath ? pathResolve(cwd, customProjectPath) : cwd;
     const resolved = resolvePackageManager(projectDir, cwd);
@@ -1631,20 +1660,17 @@ async function cmdInit(argv) {
       }
     }
 
-    selectedTemplate = await selectMenu(TEMPLATES[framework] || TEMPLATES.vanilla, '? Full, Minimal, or Manual?');
+    selectedTemplate = await selectMenu(TEMPLATES[framework] || TEMPLATES.vanilla, '? Core or Manual?');
 
-    if (selectedTemplate === 'full' && (framework === 'astro' || framework === 'svelte')) {
+    if (selectedTemplate === 'core' && (framework === 'astro' || framework === 'svelte')) {
       selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : [...ASTRO_COMPONENTS];
-    } else if (selectedTemplate === 'minimal' && (framework === 'astro' || framework === 'svelte')) {
-      const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : ASTRO_COMPONENTS;
-      selectedComponents = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
     } else if (selectedTemplate === 'manual') {
       const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : ASTRO_COMPONENTS;
       const recommended = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
       selectedComponents = await promptComponentChoice(componentList, framework, recommended);
     }
 
-    const wantsThemeSwitcher = (framework === 'vanilla' && (selectedTemplate === 'full' || selectedTemplate === 'minimal')) || selectedComponents.includes('ThemeSwitcher');
+    const wantsThemeSwitcher = (framework === 'vanilla' && selectedTemplate === 'core') || selectedComponents.includes('ThemeSwitcher');
     if (wantsThemeSwitcher) {
       const themeOut = await promptThemes();
       theme = themeOut.theme;
@@ -1689,17 +1715,16 @@ async function cmdInit(argv) {
     '{{PROJECT_NAME}}': projectNamePkg,
   };
 
-  const astroMinimalDir = getScaffoldAstroMinimalDir();
-  const svelteMinimalDir = getScaffoldSvelteMinimalDir();
+  const astroCoreDir = getScaffoldAstroCoreDir();
+  const svelteCoreDir = getScaffoldSvelteCoreDir();
   const pathsForScaffold = getFrameworkCssPaths(framework);
-  const useHandpickAstro = selectedTemplate === 'manual' && framework === 'astro' && existsSync(astroMinimalDir);
-  const useHandpickSvelte = selectedTemplate === 'manual' && framework === 'svelte' && existsSync(svelteMinimalDir);
-  const useAstroBase = (selectedTemplate === 'full' || selectedTemplate === 'minimal') && framework === 'astro' && existsSync(astroMinimalDir);
-  const useSvelteBase = (selectedTemplate === 'full' || selectedTemplate === 'minimal') && framework === 'svelte' && existsSync(svelteMinimalDir);
-  const useVanillaFull = selectedTemplate === 'full' && framework === 'vanilla' && existsSync(getScaffoldVanillaIndex());
-  const useVanillaMinimal = selectedTemplate === 'minimal' && framework === 'vanilla';
-
-  // Full and minimal get all required dependencies so everything works; manual gets deps when user picks (see prompt labels).
+  const useHandpickAstro = selectedTemplate === 'manual' && framework === 'astro' && existsSync(astroCoreDir);
+  const useHandpickSvelte = selectedTemplate === 'manual' && framework === 'svelte' && existsSync(svelteCoreDir);
+  const useAstroBase = selectedTemplate === 'core' && framework === 'astro' && existsSync(astroCoreDir);
+  const useSvelteBase = selectedTemplate === 'core' && framework === 'svelte' && existsSync(svelteCoreDir);
+  const useVanillaCore = selectedTemplate === 'core' && framework === 'vanilla' && existsSync(getScaffoldVanillaIndex());
+
+  // Full gets 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);
@@ -1742,7 +1767,7 @@ async function cmdInit(argv) {
 
   if (useHandpickAstro) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(astroMinimalDir, projectDir, replacements);
+    copyDirRecursiveWithReplacements(astroCoreDir, projectDir, replacements);
     copyRizzoCssAndFontsForAstro(projectDir, cssSource);
     cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
     if (statSync(cssTarget).size < 5000) {
@@ -1756,7 +1781,7 @@ async function cmdInit(argv) {
     }
   } else if (useAstroBase) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(astroMinimalDir, projectDir, replacements);
+    copyDirRecursiveWithReplacements(astroCoreDir, projectDir, replacements);
     copyRizzoCssAndFontsForAstro(projectDir, cssSource);
     cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
     if (statSync(cssTarget).size < 5000) {
@@ -1770,7 +1795,7 @@ async function cmdInit(argv) {
     }
   } else if (useHandpickSvelte) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
+    copyDirRecursiveWithReplacements(svelteCoreDir, projectDir, replacements);
     copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
     if (statSync(cssTarget).size < 5000) {
@@ -1784,7 +1809,7 @@ async function cmdInit(argv) {
     }
   } else if (useSvelteBase) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
+    copyDirRecursiveWithReplacements(svelteCoreDir, projectDir, replacements);
     copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
     if (statSync(cssTarget).size < 5000) {
@@ -1796,7 +1821,7 @@ async function cmdInit(argv) {
       copyRizzoIcons(projectDir, 'svelte');
       copySvelteComponents(projectDir, componentsToCopy);
     }
-  } else if (useVanillaFull) {
+  } else if (useVanillaCore) {
     const cssDir = join(projectDir, pathsForScaffold.targetDir);
     cssTarget = join(cssDir, 'rizzo.min.css');
     const linkHref = 'css/rizzo.min.css';
@@ -1829,33 +1854,8 @@ async function cmdInit(argv) {
       mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
       writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
     }
-    const vanillaFullRepl = { ...replacements, '{{LINK_HREF}}': linkHref };
-    copyVanillaComponents(projectDir, Object.keys(VANILLA_COMPONENT_SLUGS), vanillaFullRepl);
-    copyPackageLicense(projectDir);
-    copyVanillaGitignore(projectDir);
-  } else if (useVanillaMinimal) {
-    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');
-    }
-    mkdirSync(join(projectDir, 'js'), { recursive: true });
-    const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
-    if (existsSync(vanillaJs)) {
-      let mainJs = readFileSync(vanillaJs, 'utf8');
-      mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
-      writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
-    }
-    const vanillaRepl = { ...replacements, '{{LINK_HREF}}': 'css/rizzo.min.css' };
-    copyVanillaComponents(projectDir, RECOMMENDED_COMPONENTS, vanillaRepl);
-    copyRizzoIcons(projectDir, 'vanilla');
-    const minimalIndexWithScript = minimalHtml.replace('</body>', '  <script src="js/main.js"></script>\n</body>');
-    indexPath = join(projectDir, 'index.html');
-    writeFileSync(indexPath, minimalIndexWithScript, 'utf8');
-    writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), VANILLA_MINIMAL_README, 'utf8');
+    const vanillaCoreRepl = { ...replacements, '{{LINK_HREF}}': linkHref };
+    copyVanillaComponents(projectDir, Object.keys(VANILLA_COMPONENT_SLUGS), vanillaCoreRepl);
     copyPackageLicense(projectDir);
     copyVanillaGitignore(projectDir);
   } else {
@@ -1909,12 +1909,10 @@ async function cmdInit(argv) {
   console.log('  - ' + cssTarget);
   if (indexPath) console.log('  - ' + indexPath);
   if (framework === 'vanilla') {
-    if (useVanillaFull) {
-      console.log('  - Vanilla JS (full): theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME + '.');
-    } else if (useVanillaMinimal) {
-      console.log('  - Vanilla JS (minimal): index.html + CSS + js/main.js + all interactive components.');
+    if (useVanillaCore) {
+      console.log('  - Vanilla JS (core): theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME + '.');
     } else {
-      console.log('  - Vanilla JS (manual): index.html + CSS only. Add JS from docs or copy from Full.');
+      console.log('  - Vanilla JS (manual): index.html + CSS only. Add JS from docs or copy from Core.');
     }
   }
   const pm = getPackageManagerCommands({ agent: selectedPm, command: selectedPm });
@@ -1922,13 +1920,28 @@ async function cmdInit(argv) {
   const runPrefix = projectDir !== cwd ? 'cd ' + pathRelative(cwd, projectDir) + ' && ' : '';
   const hasPackageJson = useHandpickAstro || useHandpickSvelte || useAstroBase || useSvelteBase;
 
-  // Always write rizzo-css.json for new projects (targetDir, framework, packageManager).
+  // Write rizzo-css.json only when one doesn't exist (don't overwrite existing config).
   const pathsForConfig = getFrameworkCssPaths(framework);
-  writeRizzoConfig(projectDir, { targetDir: pathsForConfig.targetDir, framework, packageManager: selectedPm, theme });
-  console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
+  const initConfigPath = join(projectDir, RIZZO_CONFIG_FILE);
+  if (!existsSync(initConfigPath)) {
+    writeRizzoConfig(projectDir, { targetDir: pathsForConfig.targetDir, framework, packageManager: selectedPm, theme });
+    console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
+  }
+
+  // Git init: in every scenario — prompt when interactive, run when --yes (unless --no-git)
+  if (!yes) {
+    const shouldGitInit = await confirmGitInit();
+    if (shouldGitInit) {
+      runGitInit(projectDir);
+    }
+  } else if (!hasFlag(argv, '--no-git')) {
+    runGitInit(projectDir);
+  }
 
+  // Package manager install: only for Astro/Svelte (Vanilla has no package.json)
   if (runInstallAfterScaffold && !noInstall && hasPackageJson) {
-    console.log('\nRunning: ' + pm.install);
+    const dirLabel = projectDir !== cwd ? ' in ' + pathRelative(cwd, projectDir) : ' (current directory)';
+    console.log('\nRunning install' + dirLabel + ': ' + pm.install);
     const code = runInDir(projectDir, pm.install);
     if (code !== 0) {
       console.error('\nInstall failed (exit ' + code + '). Run manually: ' + runPrefix + pm.install);
@@ -1936,7 +1949,8 @@ async function cmdInit(argv) {
   } else if (!yes && !noInstall && hasPackageJson) {
     const shouldRun = await confirmRunInstall(pm);
     if (shouldRun) {
-      console.log('\nRunning: ' + pm.install);
+      const dirLabel = projectDir !== cwd ? ' in ' + pathRelative(cwd, projectDir) : ' here';
+      console.log('\nRunning install' + dirLabel + ': ' + pm.install);
       const code = runInDir(projectDir, pm.install);
       if (code !== 0) {
         console.error('\nInstall failed (exit ' + code + '). Run manually: ' + runPrefix + pm.install);
@@ -1949,20 +1963,24 @@ async function cmdInit(argv) {
     console.log('  - ' + fw + ' (manual): base + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
   }
   if (useAstroBase) {
-    const label = selectedTemplate === 'full' ? 'Full' : 'Minimal';
-    console.log('  - Astro (' + label.toLowerCase() + '): app + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
+    console.log('  - Astro (core): app + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
   }
   if (useSvelteBase) {
-    const label = selectedTemplate === 'full' ? 'Full' : 'Minimal';
-    console.log('  - SvelteKit (' + label.toLowerCase() + '): app + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
+    console.log('  - SvelteKit (core): app + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
   }
   if ((framework === 'astro' || framework === 'svelte') && !useAstroBase && !useSvelteBase && !useHandpickAstro && !useHandpickSvelte) {
     const fw = framework === 'svelte' ? 'Svelte' : 'Astro';
     const createExample = getCreateProjectExample(pm, framework);
-    console.log('\n  - Minimal template (CSS + index). To get a full app: ' + createExample + ', then cd into the project and run ' + pm.dlx('rizzo-css add') + '.');
+    console.log('\n  - Basic 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') {
+    const vanillaNext = projectDir !== cwd
+      ? 'cd ' + pathRelative(cwd, projectDir) + ' then open index.html or serve the folder (e.g. npx serve .)'
+      : 'open index.html or serve the folder (e.g. npx serve .)';
+    console.log('\nNext: ' + vanillaNext);
   }
-  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');
 }