npm - rizzo-css - Versions diffs - 0.0.53 → 0.0.55 - Mend

rizzo-css 0.0.53 → 0.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

package/bin/rizzo-css.js CHANGED Viewed

@@ -25,38 +25,89 @@ const SCAFFOLD_README_FILENAME = 'README-RIZZO.md';
 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';
+/** Setup instructions + snippets when we skip overwriting; written by init for landing/docs/dashboard/full. */
+const RIZZO_SETUP_FILE = 'RIZZO-SETUP.md';
 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'];
-/** Core = everything we ship. Manual = same base, pick which components to include. */
-const TEMPLATES = {
-  vanilla: [
-    { 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: '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: '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)' },
-  ],
-};
+/** Template options for create new and add to existing. All get full framework + Rizzo; template chooses starter content. */
+const TEMPLATES = [
+  { value: 'landing', label: 'Landing — Marketing/hero page with features and CTAs' },
+  { value: 'docs', label: 'Docs — Documentation site with sidebar and sample doc page' },
+  { value: 'dashboard', label: 'Dashboard — App dashboard with sidebar, stat cards, and table' },
+  { value: 'full', label: 'Full — Clone of the Rizzo docs site (home, docs, components, themes)' },
+];
+/** Build RIZZO-SETUP.md content: instructions + snippets. Never overwrites; use for landing or when files were skipped. */
+function buildRizzoSetupMd(framework, opts) {
+  const { linkTag, linkHref, theme, defaultDark, defaultLight, skippedFiles = [], exampleMinimalPage } = opts;
+  const fw = framework === 'vanilla' ? 'Vanilla' : framework === 'astro' ? 'Astro' : 'Svelte';
+  let md = `# Rizzo CSS setup
+This file was generated by \`npx rizzo-css init\` or \`npx rizzo-css add\`. Use it to integrate Rizzo CSS into your project. **We never overwrite your existing files** — add the snippets below where needed.
+## 1. Link the CSS
+Add this to your \`<head>\` or root layout:
+\`\`\`html
+${linkTag || `<link rel="stylesheet" href="${linkHref || '/css/rizzo.min.css'}" />`}
+\`\`\`
+## 2. Set a theme (optional)
+On your \`<html>\` element:
+\`\`\`html
+<html lang="en" data-theme="${theme || 'system'}">
+\`\`\`
-const VANILLA_MANUAL_README = `# Vanilla + Rizzo CSS (manual)
+Theme IDs: \`npx rizzo-css theme\`. Default dark: ${defaultDark || 'github-dark-classic'}; default light: ${defaultLight || 'github-light'}.
-Manual setup: HTML + CSS, plus the component pages you chose (base = all interactive components). Scaffolded with \`npx rizzo-css init --framework vanilla --template manual\`.
+## 3. Accessibility basics (recommended)
+- Skip link: \`<a href="#main-content" class="skip-link">Skip to main content</a>\`
+- Main landmark: \`<main id="main-content">\`
+`;
+  if (skippedFiles.length > 0) {
+    md += `## Files we didn't overwrite
+Your project already had these files. Add the following snippets manually if you want the same content as the scaffold:\n\n`;
+    for (const { relativePath, content } of skippedFiles) {
+      if (!content) continue;
+      const ext = relativePath.slice(relativePath.lastIndexOf('.'));
+      const lang = ext === '.html' ? 'html' : ext === '.astro' ? 'astro' : ext === '.svelte' ? 'svelte' : ext === '.ts' || ext === '.js' ? 'ts' : 'text';
+      md += `### \`${relativePath}\`\n\n\`\`\`${lang}\n${content.substring(0, 8000)}${content.length > 8000 ? '\n...' : ''}\n\`\`\`\n\n`;
+    }
+  }
+  if (exampleMinimalPage) {
+    md += `## Example landing page
+If you don't have an HTML file yet, you can use this (from \`scaffold/landing/index.html\`):\n\n\`\`\`html\n${exampleMinimalPage}\n\`\`\`\n\n`;
+  }
+  md += `## Docs
+- [Getting started](https://rizzo-css.vercel.app/docs/getting-started)
+- [Components](https://rizzo-css.vercel.app/docs/components)
+- [Theming](https://rizzo-css.vercel.app/docs/theming)
+`;
+  return md;
+}
+const VANILLA_MANUAL_README = `# Vanilla + Rizzo CSS (Full template)
+Full template: HTML + CSS, plus the component pages you chose (or all). Scaffolded with \`npx rizzo-css init --framework vanilla --template full\` (or \`npx rizzo-css add --template full\` for existing projects).
 - Open \`index.html\` in a browser or serve the folder with any static server.
 - Edit \`index.html\` and add your content. CSS: \`css/rizzo.min.css\`.
 - 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 → **Core** 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 → **Full** in a temp folder and copy \`js/main.js\` and \`components/\` into this project.
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
 `;
@@ -91,29 +142,35 @@ const LIGHT_THEMES = [
   'semi-light-purple',
 ];
 const THEMES = [...DARK_THEMES, ...LIGHT_THEMES];
-// Components available for scaffold (must match scaffold/svelte and scaffold/astro)
+// Components available for scaffold (must match scaffold/svelte and scaffold/astro; missing files are skipped on copy)
 const SVELTE_COMPONENTS = [
-  'Button', 'Badge', 'Card', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'Button', 'Badge', 'Card', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'BackToTop', 'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
-  'Navbar', 'Settings', 'Search', 'Icons',
+  'Navbar', 'Settings', 'Search', 'Icons', 'Skeleton', 'Switch',
+  'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
+  'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
 ];
 const ASTRO_COMPONENTS = [
-  'Button', 'Badge', 'Card', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'Button', 'Badge', 'Card', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'BackToTop', 'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
-  'Navbar', 'Settings', 'Search', 'Icons',
+  'Navbar', 'Settings', 'Search', 'Icons', 'Skeleton', 'Switch',
+  'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
+  'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
 ];
 // 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', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'Button', 'Badge', 'Card', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'BackToTop', 'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
-  'Navbar', 'Search', 'Settings', 'Icons',
+  'Navbar', 'Search', 'Settings', 'Icons', 'Skeleton', 'Switch',
+  'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
+  'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
 ];
 // Vanilla components that need js/main.js for interactivity.
@@ -174,15 +231,16 @@ function logAddedDeps(selected, expanded, framework) {
   if (byRequirement.length) console.log('\n  Also adding: ' + byRequirement.join('; '));
 }
-// Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug.
+// Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug. New components (label, kbd, etc.) have stub pages in scaffold/vanilla/components/.
 const VANILLA_COMPONENT_SLUGS = {
-  Accordion: 'accordion', Alert: 'alert', Avatar: 'avatar', BackToTop: 'back-to-top', Badge: 'badge', Breadcrumb: 'breadcrumb', Button: 'button',
-  Card: 'cards', Checkbox: 'forms', CopyToClipboard: 'copy-to-clipboard', Divider: 'divider', DocsSidebar: 'docs-sidebar', Dropdown: 'dropdown',
-  Footer: 'footer', FormGroup: 'forms', Input: 'forms', Modal: 'modal', Pagination: 'pagination', ProgressBar: 'progress-bar',
-  Radio: 'forms', Search: 'search', Select: 'forms', Settings: 'settings', Spinner: 'spinner', Table: 'table',
-  Tabs: 'tabs', Textarea: 'forms', ThemeSwitcher: 'theme-switcher', Toast: 'toast', Tooltip: 'tooltip',
-  FontSwitcher: 'font-switcher', SoundEffects: 'sound-effects',
-  Navbar: 'navbar', Icons: 'icons',
+  Accordion: 'accordion', Alert: 'alert', AlertDialog: 'alert-dialog', AspectRatio: 'aspect-ratio', Avatar: 'avatar', BackToTop: 'back-to-top', Badge: 'badge', Breadcrumb: 'breadcrumb', Button: 'button', ButtonGroup: 'button-group',
+  Card: 'cards', Checkbox: 'forms', Collapsible: 'collapsible', ContextMenu: 'context-menu', CopyToClipboard: 'copy-to-clipboard', Dashboard: 'dashboard', Divider: 'divider', DocsSidebar: 'docs-sidebar', Dropdown: 'dropdown',
+  Empty: 'empty', Footer: 'footer', FormGroup: 'forms', HoverCard: 'hover-card', Input: 'forms', Icons: 'icons', Kbd: 'kbd', Label: 'label',
+  Modal: 'modal', Navbar: 'navbar', Pagination: 'pagination', Popover: 'popover', ProgressBar: 'progress-bar',
+  Radio: 'forms', ResizableHandle: 'resizable', ResizablePane: 'resizable', ResizablePaneGroup: 'resizable', ScrollArea: 'scroll-area', Search: 'search', Separator: 'separator', Select: 'forms', Settings: 'settings', Sheet: 'sheet',
+  Skeleton: 'skeleton', Slider: 'slider', SoundEffects: 'sound-effects', Spinner: 'spinner', Switch: 'switch', Table: 'table',
+  Tabs: 'tabs', Textarea: 'forms', ThemeSwitcher: 'theme-switcher', Toast: 'toast', Toggle: 'toggle', ToggleGroup: 'toggle-group', Tooltip: 'tooltip',
+  FontSwitcher: 'font-switcher',
 };
 // ANSI colors for CLI (framework logo colors)
@@ -402,12 +460,14 @@ function parsePackageManager(value) {
   return VALID_PACKAGE_MANAGERS.includes(v) ? v : null;
 }
-/** Get positional args for a command (excludes --flag and --flag value). Used for e.g. add Button ThemeSwitcher. */
-function getPositionalArgs(argv) {
+/** Get positional args for a command (excludes --flag and --flag value). Used for e.g. add Button ThemeSwitcher. startIndex: skip this many args (e.g. 3 to skip node, script, command name). */
+function getPositionalArgs(argv, startIndex) {
+  const start = startIndex == null ? 1 : startIndex;
   const positionals = [];
-  for (let i = 1; i < argv.length; i++) {
+  for (let i = start; i < argv.length; i++) {
     if (argv[i].startsWith('--')) {
-      if (!argv[i].includes('=')) i++;
+      if (!argv[i].includes('=') && i + 1 < argv.length) i += 2;
+      else i++;
       continue;
     }
     positionals.push(argv[i]);
@@ -480,10 +540,35 @@ async function promptPackageManager(projectDir) {
   return selectMenu(options, '? Package manager (for install and run commands)');
 }
-/** 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?');
+/** Prompt user to select template (Landing, Docs, Dashboard, Full) for create new or add to existing. Returns 'landing' | 'docs' | 'dashboard' | 'full'. */
+async function promptTemplate() {
+  return selectMenu(TEMPLATES, '? Which template? (all get full framework + Rizzo)');
+}
+/** Path to variant overlay (docs, dashboard, or full). Landing uses base as-is so no overlay. Framework scaffolds live under scaffold/<framework>/variants/<variation>. */
+function getVariantDir(framework, variation) {
+  if (variation !== 'docs' && variation !== 'dashboard' && variation !== 'full') return null;
+  const dir = join(getPackageRoot(), 'scaffold', framework, 'variants', variation);
+  return existsSync(dir) ? dir : null;
+}
+/** When template is Full we copy the entire full variant (site clone) instead of base + overlay. Returns true if full variant exists. */
+function hasFullVariant(framework) {
+  return getVariantDir(framework, 'full') !== null;
+}
+/** Copy variant overlay onto project (after base). Applies replacements. Overwrites matching paths. */
+function copyVariantOverlay(projectDir, framework, variation, replacements) {
+  const variantDir = getVariantDir(framework, variation);
+  if (!variantDir) return;
+  copyDirRecursiveWithReplacements(variantDir, projectDir, replacements);
+}
+/** Copy variant overlay with no-overwrite (for add to existing). Returns { skipped } like copyDirRecursiveWithReplacementsNoOverwrite. */
+function copyVariantOverlayNoOverwrite(projectDir, framework, variation, replacements) {
+  const variantDir = getVariantDir(framework, variation);
+  if (!variantDir) return { skipped: [] };
+  return copyDirRecursiveWithReplacementsNoOverwrite(variantDir, projectDir, replacements, projectDir);
 }
 function question(prompt) {
@@ -837,7 +922,7 @@ Available commands: init, add, theme, doctor, help
 Flags summary:
   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
+  add    --path <dir>  --framework <fw>  --template landing|docs|dashboard|full  --no-snippet  --readme  --force  --vanilla-js
   theme  (no flags)
   doctor Check config, CSS file, and optional layout link
   help   (no flags)
@@ -849,16 +934,16 @@ Usage (use your package manager):
   bunx rizzo-css <command> [options]
 Commands:
-  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)
+  init    New or existing. Create new → template (Landing | Docs | Dashboard | Full); all get full framework + Rizzo. Then component picker (all 56 or pick; Full = site clone skips picker). We never overwrite; skipped content in RIZZO-SETUP.md.
+  add     Add to existing: same template as create new (Landing | Docs | Dashboard | Full). Never overwrites existing or config files. 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: core)
+  --yes             Non-interactive: scaffold new in cwd with defaults (framework: astro, template: landing)
   --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>    core | manual (all frameworks); with --yes defaults to core
+  --template <t>    create new: landing | docs | dashboard | full (default: landing). add: same four options.
   --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
@@ -866,15 +951,16 @@ Options (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):
+  --template <t>    landing | docs | dashboard | full (same as init; Full = site clone)
   --path <dir>      Target directory for rizzo.min.css (overrides config and framework default)
   --framework <fw>   vanilla | astro | svelte (overrides config and detection)
   --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)
+  --no-snippet      (Full only) 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, search, navbar, copy-to-clipboard, theme switcher)
+  --vanilla-js      (Vanilla Full) 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. Yarn 1 (classic) has no dlx; we show npx for yarn so it works everywhere. Yarn 2+ can use yarn dlx instead.
@@ -905,7 +991,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 core
+  npx rizzo-css init --yes --framework svelte --template landing
   npx rizzo-css add --package-manager yarn --install-package
   npx rizzo-css add
   npx rizzo-css add Button
@@ -913,8 +999,8 @@ 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.
+Component dependencies (Full template):
+  Some components require others to work. The component picker adds required ones automatically.
   Full list of available components and what relies on what: npx rizzo-css help components
 Docs: https://rizzo-css.vercel.app
@@ -1030,7 +1116,7 @@ function componentOptionLabel(framework, name) {
   return name + suffix;
 }
-/** Ask what to include: CSS only, all 29 interactive, all components, or pick. Returns array of component names. Only call when componentList.length > 0. initialSelection: when set (e.g. for manual = all 29 pre-selected), skip the menu and show multi-select with these pre-selected. */
+/** Ask what to include: CSS only, all interactive (recommended), all components, or pick. Returns array of component names. Only call when componentList.length > 0. initialSelection: when set (e.g. for manual = all 29 pre-selected), 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));
   if (initialSelection !== undefined) {
@@ -1118,13 +1204,16 @@ async function cmdAdd(argv) {
   const customPath = getFlagValue(argv, '--path');
   const explicitFrameworkRaw = getFlagValue(argv, '--framework');
   const explicitFramework = explicitFrameworkRaw && FRAMEWORKS.includes(explicitFrameworkRaw.toLowerCase()) ? explicitFrameworkRaw.toLowerCase() : null;
+  const templateRaw = getFlagValue(argv, '--template');
+  const validAddTemplates = ['landing', 'docs', 'dashboard', 'full']; // same four as create new
+  const template = templateRaw && validAddTemplates.includes(templateRaw.toLowerCase()) ? templateRaw.toLowerCase() : undefined;
   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 positionals = getPositionalArgs(argv, 3);
   const cwd = process.cwd();
   const config = readRizzoConfig(cwd);
@@ -1133,6 +1222,7 @@ async function cmdAdd(argv) {
     config,
     targetDir: customPath || (config && config.targetDir) || undefined,
     packageManager: pmOverride || undefined,
+    template,
     preselectedComponents: positionals.length > 0 ? positionals : undefined,
     writeSnippet,
     writeReadme,
@@ -1175,6 +1265,42 @@ function getScaffoldVanillaIndex() {
   return join(getPackageRoot(), 'scaffold', 'vanilla', 'index.html');
 }
+/** Path to Landing template (simple index.html). Used when template is Landing (single-page snippet). */
+function getLandingTemplatePath() {
+  const landingPath = join(getPackageRoot(), 'scaffold', 'landing', 'index.html');
+  if (existsSync(landingPath)) return landingPath;
+  return join(getPackageRoot(), 'scaffold', 'minimal', 'index.html'); // fallback
+}
+/** Load landing template HTML from scaffold and apply replacements; fallback to inline if file missing. */
+function getLandingTemplateHtml(opts) {
+  const { theme, themeComment, name, framework } = opts;
+  const linkHref = framework === 'vanilla' ? 'css/rizzo.min.css' : '/css/rizzo.min.css';
+  const templatePath = getLandingTemplatePath();
+  if (existsSync(templatePath)) {
+    let html = readFileSync(templatePath, 'utf8');
+    return html
+      .replace(/\{\{TITLE\}\}/g, name || 'App')
+      .replace(/\{\{DATA_THEME\}\}/g, theme)
+      .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
+      .replace(/\{\{LINK_HREF\}\}/g, linkHref);
+  }
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">${themeComment}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${name || 'App'}</title>
+  <link rel="stylesheet" href="${linkHref}" />
+</head>
+<body>
+  <h1>Hello, Rizzo CSS</h1>
+  <p>Edit this file and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
+</body>
+</html>
+`;
+}
 function getScaffoldVanillaIconsDir() {
   return join(getPackageRoot(), 'scaffold', 'vanilla', 'icons');
 }
@@ -1183,11 +1309,23 @@ function getScaffoldVanillaComponentsDir() {
   return join(getPackageRoot(), 'scaffold', 'vanilla', 'components');
 }
+/** Read shared navbar snippet and fill {{TITLE}} and {{NAVBAR_BRAND_HREF}}. Same component as Astro/Svelte (flat links: Docs, Components, Blocks, Themes, Colors). */
+function getNavbarHtmlVanilla(title, brandHref) {
+  const path = join(getPackageRoot(), 'scaffold', 'shared', 'navbar-vanilla.html');
+  if (!existsSync(path)) return '';
+  let html = readFileSync(path, 'utf8');
+  return html.replace(/\{\{TITLE\}\}/g, title || 'App').replace(/\{\{NAVBAR_BRAND_HREF\}\}/g, brandHref || '#');
+}
 /** Copy selected Vanilla component HTML files into projectDir/components/, with replacements. Writes a simple components/index.html. */
 function copyVanillaComponents(projectDir, selectedNames, replacements) {
   const srcDir = getScaffoldVanillaComponentsDir();
   if (!existsSync(srcDir)) return;
   const linkHref = replacements['{{LINK_HREF}}'] || 'css/rizzo.min.css';
+  const title = replacements['{{TITLE}}'] || 'App';
+  if (!replacements['{{NAVBAR_HTML}}']) {
+    replacements['{{NAVBAR_HTML}}'] = getNavbarHtmlVanilla(title, '../index.html');
+  }
   const slugsToCopy = [];
   const seen = new Set();
   for (const name of selectedNames) {
@@ -1211,6 +1349,7 @@ function copyVanillaComponents(projectDir, selectedNames, replacements) {
     }
   }
   const indexLinks = slugsToCopy.map((s) => '    <li><a href="' + s + '.html">' + s + '</a></li>').join('\n');
+  const navHtml = replacements['{{NAVBAR_HTML}}'] || '';
   const indexHtml = `<!DOCTYPE html>
 <html lang="en" data-theme="${replacements['{{DATA_THEME}}'] || 'github-dark-classic'}">
 <head>
@@ -1220,7 +1359,9 @@ function copyVanillaComponents(projectDir, selectedNames, replacements) {
   <link rel="stylesheet" href="../${linkHref}" />
 </head>
 <body>
-  <main style="padding: var(--spacing-6); max-width: 60ch;">
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  ${navHtml}
+  <main id="main-content" style="padding: var(--spacing-6); max-width: 60ch;">
     <h1>Components</h1>
     <ul>
 ${indexLinks}
@@ -1258,11 +1399,11 @@ function copyRizzoIcons(projectDir, framework) {
 }
 function getScaffoldAstroCoreDir() {
-  return join(getPackageRoot(), 'scaffold', 'astro-core');
+  return join(getPackageRoot(), 'scaffold', 'astro', 'base');
 }
 function getScaffoldSvelteCoreDir() {
-  return join(getPackageRoot(), 'scaffold', 'svelte-core');
+  return join(getPackageRoot(), 'scaffold', 'svelte', 'base');
 }
 function copyDirRecursive(src, dest) {
@@ -1304,6 +1445,54 @@ function copyDirRecursiveWithReplacements(src, dest, replacements) {
   }
 }
+/**
+ * Like copyDirRecursiveWithReplacements but never overwrites existing files.
+ * Returns { skipped: Array<{ relativePath, content }> } for files that already existed (so caller can write RIZZO-SETUP.md).
+ * relativePath is from projectDir (dest).
+ */
+function copyDirRecursiveWithReplacementsNoOverwrite(src, dest, replacements, projectDir) {
+  const skipped = [];
+  projectDir = projectDir || dest;
+  const textExtensions = new Set(['.html', '.astro', '.svelte', '.ts', '.js', '.mjs', '.json', '.css', '.md']);
+  function recurse(s, d) {
+    mkdirSync(d, { recursive: true });
+    const entries = readdirSync(s, { withFileTypes: true });
+    for (const e of entries) {
+      const srcPath = join(s, e.name);
+      const destPath = join(d, e.name);
+      if (e.isDirectory()) {
+        recurse(srcPath, destPath);
+      } else {
+        if (existsSync(destPath)) {
+          const rel = pathRelative(projectDir, destPath);
+          let content = '';
+          const ext = srcPath.slice(srcPath.lastIndexOf('.'));
+          if (textExtensions.has(ext)) {
+            content = readFileSync(srcPath, 'utf8');
+            for (const [key, value] of Object.entries(replacements)) {
+              content = content.split(key).join(value);
+            }
+          }
+          skipped.push({ relativePath: rel, content });
+          continue;
+        }
+        const ext = srcPath.slice(srcPath.lastIndexOf('.'));
+        if (textExtensions.has(ext)) {
+          let content = readFileSync(srcPath, 'utf8');
+          for (const [key, value] of Object.entries(replacements)) {
+            content = content.split(key).join(value);
+          }
+          writeFileSync(destPath, content, 'utf8');
+        } else {
+          copyFileSync(srcPath, destPath);
+        }
+      }
+    }
+  }
+  recurse(src, dest);
+  return { skipped };
+}
 function copySvelteComponents(projectDir, selectedNames) {
   const scaffoldDir = getScaffoldSvelteDir();
   if (!existsSync(scaffoldDir)) {
@@ -1419,7 +1608,7 @@ function copyAstroComponents(projectDir, selectedNames) {
   }
 }
-/** Add Rizzo CSS and hand-picked components to an existing project in cwd. frameworkOverride: when set (from init), skip framework prompt. options: { config?, targetDir? }. */
+/** Add Rizzo CSS to an existing project. Same variation as create new: Landing | Docs | Dashboard. We never overwrite existing files (including config files). frameworkOverride: when set (from init), skip framework prompt. options: { config?, targetDir?, template? } — template is variation: landing|docs|dashboard (or full→landing). */
 async function runAddToExisting(frameworkOverride, options) {
   const cwd = process.cwd();
   const config = (options && options.config) || readRizzoConfig(cwd);
@@ -1438,6 +1627,12 @@ async function runAddToExisting(frameworkOverride, options) {
     framework = await selectMenu(frameworkOptions, frameworkPrompt);
   }
+  // Same choice as create new: template (Landing | Docs | Dashboard | Full). --template accepts landing|docs|dashboard|full.
+  let selectedVariation = (options && options.template) || null;
+  if (!selectedVariation || !['landing', 'docs', 'dashboard', 'full'].includes(selectedVariation)) {
+    selectedVariation = await promptTemplate();
+  }
   const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : framework === 'vanilla' ? Object.keys(VANILLA_COMPONENT_SLUGS) : [];
   const preselected = options.preselectedComponents && options.preselectedComponents.length > 0 ? options.preselectedComponents : null;
   let selectedComponents;
@@ -1460,6 +1655,7 @@ async function runAddToExisting(frameworkOverride, options) {
       : [];
   }
+  // Only ask about theming when ThemeSwitcher is selected (we will inject theme into layout/config).
   let theme, defaultDark, defaultLight;
   const wantsThemeSwitcher = selectedComponents.includes('ThemeSwitcher');
   if (wantsThemeSwitcher && !preselected) {
@@ -1468,7 +1664,7 @@ async function runAddToExisting(frameworkOverride, options) {
         { value: true, label: 'Yes — choose default dark, default light, and initial theme' },
         { value: false, label: 'No — use defaults (github-dark-classic / github-light)' },
       ],
-      '? Set default themes for ThemeSwitcher? (same as create-new flow)'
+      '? Set default themes for ThemeSwitcher?'
     );
     if (setDefaults) {
       const out = await promptThemes();
@@ -1516,6 +1712,66 @@ async function runAddToExisting(frameworkOverride, options) {
   } else {
     options._overwriteCss = true;
   }
+  // For Astro/Svelte add: copy base + variant with no-overwrite. For Vanilla add with docs/dashboard/full: copy variant overlay.
+  let addSkippedFiles = [];
+  const astroCoreDir = getScaffoldAstroCoreDir();
+  const svelteCoreDir = getScaffoldSvelteCoreDir();
+  const themeCommentAdd = '  <!-- Initial: ' + theme + '; dark: ' + defaultDark + '; light: ' + defaultLight + ' (all 14 themes in CSS) -->';
+  if (framework === 'vanilla' && getVariantDir('vanilla', selectedVariation)) {
+    const vanillaRepl = { '{{LINK_HREF}}': 'css/rizzo.min.css', '{{TITLE}}': 'App', '{{DATA_THEME}}': theme, '{{THEME_LIST_COMMENT}}': themeCommentAdd };
+    const variantResult = copyVariantOverlayNoOverwrite(cwd, 'vanilla', selectedVariation, vanillaRepl);
+    if (variantResult && variantResult.skipped) addSkippedFiles = variantResult.skipped;
+  } else if ((framework === 'astro' && existsSync(astroCoreDir)) || (framework === 'svelte' && existsSync(svelteCoreDir))) {
+    const themeComment = themeCommentAdd;
+    const replacements = {
+      '{{DATA_THEME}}': theme,
+      '{{DEFAULT_DARK}}': defaultDark,
+      '{{DEFAULT_LIGHT}}': defaultLight,
+      '{{THEME_LIST_COMMENT}}': themeComment,
+      '{{TITLE}}': 'App',
+      '{{PROJECT_NAME}}': 'app',
+      '{{RIZZO_SOUND_SCRIPT}}': '',
+    };
+    const componentsToCopy = selectedComponents.length > 0 ? expandWithDeps(framework, selectedComponents) : [];
+    if (framework === 'astro') {
+      const hasNavbar = componentsToCopy.includes('Navbar');
+      const hasSettings = componentsToCopy.includes('Settings');
+      const hasSound = hasSettings || componentsToCopy.includes('SoundEffects');
+      const layoutImports = [];
+      if (hasNavbar) layoutImports.push("import Navbar from '../components/rizzo/Navbar.astro';");
+      if (hasSettings) layoutImports.push("import Settings from '../components/rizzo/Settings.astro';");
+      replacements['{{RIZZO_LAYOUT_IMPORTS}}'] = layoutImports.length ? '\n' + layoutImports.join('\n') + '\n' : '\n';
+      replacements['{{RIZZO_LAYOUT_BODY_TOP}}'] = hasNavbar ? '\n    <Navbar />' : '';
+      replacements['{{RIZZO_LAYOUT_BODY_BOTTOM}}'] = hasSettings ? '\n    <Settings />' : '';
+      if (hasSound) {
+        const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
+        if (existsSync(soundPath)) {
+          replacements['{{RIZZO_SOUND_SCRIPT}}'] = '\n    <script is:inline>\n' + readFileSync(soundPath, 'utf8') + '\n    </script>';
+        }
+      }
+    }
+    if (framework === 'svelte') {
+      const hasSound = componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects');
+      if (hasSound) {
+        const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
+        if (existsSync(soundPath)) {
+          replacements['{{RIZZO_SOUND_SCRIPT}}'] = '\n    <script>\n' + readFileSync(soundPath, 'utf8') + '\n    </script>';
+        }
+      }
+    }
+    mkdirSync(cwd, { recursive: true });
+    if (framework === 'astro') {
+      const baseResult = copyDirRecursiveWithReplacementsNoOverwrite(astroCoreDir, cwd, replacements, cwd);
+      const variantResult = copyVariantOverlayNoOverwrite(cwd, 'astro', selectedVariation, replacements);
+      addSkippedFiles = baseResult.skipped.concat(variantResult.skipped || []);
+    } else if (framework === 'svelte') {
+      const baseResult = copyDirRecursiveWithReplacementsNoOverwrite(svelteCoreDir, cwd, replacements, cwd);
+      const variantResult = copyVariantOverlayNoOverwrite(cwd, 'svelte', selectedVariation, replacements);
+      addSkippedFiles = baseResult.skipped.concat(variantResult.skipped || []);
+    }
+  }
   if (options._overwriteCss) {
     if (framework === 'astro') {
       copyRizzoCssAndFontsForAstro(cwd, cssSource);
@@ -1582,6 +1838,10 @@ async function runAddToExisting(frameworkOverride, options) {
   if (!hadConfig) {
     writeRizzoConfig(cwd, { targetDir: configTargetDir, framework, packageManager: pm.agent, theme });
   }
+  // Same assets and docs as create new. Include any skipped files (from base/variant copy) in RIZZO-SETUP.md.
+  const setupMdContent = buildRizzoSetupMd(framework, { linkHref, theme, defaultDark, defaultLight, skippedFiles: addSkippedFiles.length > 0 ? addSkippedFiles : undefined });
+  writeFileSync(join(cwd, RIZZO_SETUP_FILE), setupMdContent + '\n', 'utf8');
+  copyPackageLicense(cwd);
   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';
@@ -1602,8 +1862,13 @@ async function runAddToExisting(frameworkOverride, options) {
     }
   }
   console.log('\n✓ Rizzo CSS added to your existing project');
-  console.log('  - ' + cssTarget);
+  console.log('  - ' + cssTarget + ' (CSS, fonts' + (framework === 'vanilla' ? ', sfx' : '') + ')');
+  console.log('  - Icons and ' + RIZZO_SETUP_FILE);
+  if (selectedVariation && selectedVariation !== 'landing') {
+    console.log('  - Variation: ' + selectedVariation + ' (layout + starter content; existing files not overwritten).');
+  }
   if (!hadConfig) console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
+  console.log('  - Wrote ' + RIZZO_SETUP_FILE + ' (instructions + link + theme)');
   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.');
@@ -1648,17 +1913,25 @@ async function cmdInit(argv) {
   let theme, defaultDark, defaultLight;
   let selectedPm;
   let selectedTemplate;
+  let selectedVariation = 'landing'; // For create new: landing | docs | dashboard (all get full setup)
   let selectedComponents = [];
+  let fullAllComponents = false;
   if (yes) {
     const frameworkArg = getFlagValue(argv, '--framework');
     framework = (frameworkArg && FRAMEWORKS.includes(frameworkArg.toLowerCase())) ? frameworkArg.toLowerCase() : (config && config.framework) || 'astro';
     initMode = 'new';
     const templateArg = getFlagValue(argv, '--template');
-    const defaultTemplate = 'core';
-    selectedTemplate = (templateArg && (templateArg === 'core' || templateArg === 'manual')) ? templateArg : defaultTemplate;
-    if (selectedTemplate === 'core' && (framework === 'astro' || framework === 'svelte')) {
-      selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : [...ASTRO_COMPONENTS];
+    const defaultTemplate = 'landing';
+    const validTemplates = ['landing', 'docs', 'dashboard', 'full'];
+    const rawTemplate = (templateArg && validTemplates.includes(templateArg)) ? templateArg : defaultTemplate;
+    selectedVariation = rawTemplate;
+    selectedTemplate = 'full'; // all four templates get full framework + Rizzo
+    if (selectedTemplate === 'full') {
+      fullAllComponents = true;
+      if (framework === 'svelte') selectedComponents = [...SVELTE_COMPONENTS];
+      else if (framework === 'astro') selectedComponents = [...ASTRO_COMPONENTS];
+      else selectedComponents = Object.keys(VANILLA_COMPONENT_SLUGS);
     }
     const projectDir = customProjectPath ? pathResolve(cwd, customProjectPath) : cwd;
     const resolved = resolvePackageManager(projectDir, cwd);
@@ -1707,17 +1980,33 @@ async function cmdInit(argv) {
       }
     }
-    selectedTemplate = await selectMenu(TEMPLATES[framework] || TEMPLATES.vanilla, '? Core or Manual?');
-    if (selectedTemplate === 'core' && (framework === 'astro' || framework === 'svelte')) {
-      selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : [...ASTRO_COMPONENTS];
-    } 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);
+    // Create new: choose template (Landing | Docs | Dashboard | Full)
+    selectedVariation = await promptTemplate();
+    selectedTemplate = 'full'; // all templates get full framework + Rizzo
+    // Full template = site clone (no component picker); Landing/Docs/Dashboard = choose all or pick components
+    if (selectedVariation === 'full' && hasFullVariant(framework)) {
+      fullAllComponents = true;
+      selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : framework === 'astro' ? [...ASTRO_COMPONENTS] : Object.keys(VANILLA_COMPONENT_SLUGS);
+    } else if (selectedVariation !== 'full' || !hasFullVariant(framework)) {
+      const addChoice = await selectMenu(
+        [
+          { value: 'all', label: 'All components' },
+          { value: 'pick', label: 'Pick components (choose which to include)' },
+        ],
+        '? Add all components or pick which to include?'
+      );
+      fullAllComponents = (addChoice === 'all');
+      if (fullAllComponents) {
+        selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : framework === 'astro' ? [...ASTRO_COMPONENTS] : Object.keys(VANILLA_COMPONENT_SLUGS);
+      } else {
+        const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : Object.keys(VANILLA_COMPONENT_SLUGS);
+        const recommended = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
+        selectedComponents = await promptComponentChoice(componentList, framework, recommended);
+      }
     }
-    const wantsThemeSwitcher = (framework === 'vanilla' && selectedTemplate === 'core') || selectedComponents.includes('ThemeSwitcher');
+    const wantsThemeSwitcher = (framework === 'vanilla' && selectedTemplate === 'full') || selectedComponents.includes('ThemeSwitcher');
     if (wantsThemeSwitcher) {
       const themeOut = await promptThemes();
       theme = themeOut.theme;
@@ -1766,11 +2055,13 @@ async function cmdInit(argv) {
   const astroCoreDir = getScaffoldAstroCoreDir();
   const svelteCoreDir = getScaffoldSvelteCoreDir();
   const pathsForScaffold = getFrameworkCssPaths(framework);
-  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());
+  const useFullVariant = selectedVariation === 'full' && hasFullVariant(framework);
+  const useHandpickAstro = selectedTemplate === 'full' && !fullAllComponents && framework === 'astro' && existsSync(astroCoreDir) && !useFullVariant;
+  const useHandpickSvelte = selectedTemplate === 'full' && !fullAllComponents && framework === 'svelte' && existsSync(svelteCoreDir) && !useFullVariant;
+  const useAstroBase = selectedTemplate === 'full' && fullAllComponents && framework === 'astro' && existsSync(astroCoreDir) && !useFullVariant;
+  const useSvelteBase = selectedTemplate === 'full' && fullAllComponents && framework === 'svelte' && existsSync(svelteCoreDir) && !useFullVariant;
+  const useVanillaCore = selectedTemplate === 'full' && fullAllComponents && framework === 'vanilla' && existsSync(getScaffoldVanillaIndex()) && !useFullVariant && selectedVariation === 'landing';
+  const useVanillaWithOverlay = selectedTemplate === 'full' && fullAllComponents && framework === 'vanilla' && (selectedVariation === 'docs' || selectedVariation === 'dashboard') && getVariantDir('vanilla', selectedVariation);
   // Full gets all required dependencies so everything works; manual gets deps when user picks (see prompt labels).
   let componentsToCopy = selectedComponents;
@@ -1825,25 +2116,56 @@ async function cmdInit(argv) {
   let cssTarget;
   let indexPath;
-  const minimalHtml = `<!DOCTYPE html>
-<html lang="en" data-theme="${theme}">${themeComment}
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>${name || 'App'}</title>
-  <link rel="stylesheet" href="${framework === 'vanilla' ? 'css/rizzo.min.css' : '/css/rizzo.min.css'}" />
-</head>
-<body>
-  <h1>Hello, Rizzo CSS</h1>
-  <p>Edit this file and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
-</body>
-</html>
-`;
+  const landingHtml = getLandingTemplateHtml({ theme, themeComment, name, framework });
-  if (useHandpickAstro) {
+  if (useFullVariant && framework === 'astro') {
+    mkdirSync(projectDir, { recursive: true });
+    const fullDir = getVariantDir('astro', 'full');
+    copyDirRecursiveWithReplacements(fullDir, projectDir, replacements);
+    copyRizzoCssAndFontsForAstro(projectDir, cssSource);
+    cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
+    if (existsSync(cssTarget) && statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
+    copyPackageLicense(projectDir);
+    copyAstroGitignore(projectDir);
+    copyRizzoIcons(projectDir, 'astro');
+  } else if (useFullVariant && framework === 'svelte') {
+    mkdirSync(projectDir, { recursive: true });
+    const fullDir = getVariantDir('svelte', 'full');
+    copyDirRecursiveWithReplacements(fullDir, projectDir, replacements);
+    copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
+    cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
+    if (existsSync(cssTarget) && statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
+    copyPackageLicense(projectDir);
+    copySvelteGitignore(projectDir);
+    copyRizzoIcons(projectDir, 'svelte');
+  } else if (useFullVariant && framework === 'vanilla') {
+    mkdirSync(projectDir, { recursive: true });
+    const fullDir = getVariantDir('vanilla', 'full');
+    copyDirRecursiveWithReplacements(fullDir, projectDir, replacements);
+    const cssDir = join(projectDir, pathsForScaffold.targetDir);
+    cssTarget = join(cssDir, 'rizzo.min.css');
+    mkdirSync(cssDir, { recursive: true });
+    copyFileSync(cssSource, cssTarget);
+    copyRizzoFonts(dirname(cssTarget));
+    copyRizzoSfx(projectDir);
+    if (existsSync(cssTarget) && statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
+    copyPackageLicense(projectDir);
+    copyVanillaGitignore(projectDir);
+    copyRizzoIcons(projectDir, 'vanilla');
+  } else if (useHandpickAstro) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(astroCoreDir, projectDir, replacements);
+    const { skipped } = copyDirRecursiveWithReplacementsNoOverwrite(astroCoreDir, projectDir, replacements, projectDir);
+    copyVariantOverlay(projectDir, 'astro', selectedVariation, replacements);
     copyRizzoCssAndFontsForAstro(projectDir, cssSource);
+    if (skipped.length > 0) {
+      writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd('astro', { linkHref: '/css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: skipped }), 'utf8');
+    }
     cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
@@ -1856,8 +2178,12 @@ async function cmdInit(argv) {
     }
   } else if (useAstroBase) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(astroCoreDir, projectDir, replacements);
+    const { skipped } = copyDirRecursiveWithReplacementsNoOverwrite(astroCoreDir, projectDir, replacements, projectDir);
+    copyVariantOverlay(projectDir, 'astro', selectedVariation, replacements);
     copyRizzoCssAndFontsForAstro(projectDir, cssSource);
+    if (skipped.length > 0) {
+      writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd('astro', { linkHref: '/css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: skipped }), 'utf8');
+    }
     cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
@@ -1870,8 +2196,12 @@ async function cmdInit(argv) {
     }
   } else if (useHandpickSvelte) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(svelteCoreDir, projectDir, replacements);
+    const { skipped } = copyDirRecursiveWithReplacementsNoOverwrite(svelteCoreDir, projectDir, replacements, projectDir);
+    copyVariantOverlay(projectDir, 'svelte', selectedVariation, replacements);
     copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
+    if (skipped.length > 0) {
+      writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd('svelte', { linkHref: '/css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: skipped }), 'utf8');
+    }
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
@@ -1884,8 +2214,12 @@ async function cmdInit(argv) {
     }
   } else if (useSvelteBase) {
     mkdirSync(projectDir, { recursive: true });
-    copyDirRecursiveWithReplacements(svelteCoreDir, projectDir, replacements);
+    const { skipped } = copyDirRecursiveWithReplacementsNoOverwrite(svelteCoreDir, projectDir, replacements, projectDir);
+    copyVariantOverlay(projectDir, 'svelte', selectedVariation, replacements);
     copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
+    if (skipped.length > 0) {
+      writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd('svelte', { linkHref: '/css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: skipped }), 'utf8');
+    }
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
@@ -1910,14 +2244,24 @@ async function cmdInit(argv) {
     const vanillaScaffoldPath = getScaffoldVanillaIndex();
     indexPath = join(projectDir, 'index.html');
     let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
+    const navbarForIndex = getNavbarHtmlVanilla(name || 'App', 'index.html');
     indexHtml = indexHtml
       .replace(/\{\{DATA_THEME\}\}/g, theme)
       .replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark)
       .replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight)
       .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
       .replace(/\{\{TITLE\}\}/g, name || 'App')
-      .replace(/\{\{LINK_HREF\}\}/g, linkHref);
-    writeFileSync(indexPath, indexHtml, 'utf8');
+      .replace(/\{\{LINK_HREF\}\}/g, linkHref)
+      .replace(/\{\{NAVBAR_HTML\}\}/g, navbarForIndex);
+    const vanillaSkipped = [];
+    if (existsSync(indexPath)) {
+      vanillaSkipped.push({ relativePath: 'index.html', content: indexHtml });
+    } else {
+      writeFileSync(indexPath, indexHtml, 'utf8');
+    }
+    if (useVanillaWithOverlay) {
+      copyVariantOverlay(projectDir, 'vanilla', selectedVariation, { ...replacements, '{{LINK_HREF}}': linkHref, '{{TITLE}}': name || 'App', '{{DATA_THEME}}': theme, '{{THEME_LIST_COMMENT}}': themeComment });
+    }
     copyRizzoIcons(projectDir, 'vanilla');
     const vanillaReadme = join(getPackageRoot(), 'scaffold', 'vanilla', SCAFFOLD_README_FILENAME);
     if (existsSync(vanillaReadme)) {
@@ -1932,10 +2276,17 @@ async function cmdInit(argv) {
     }
     const vanillaCoreRepl = { ...replacements, '{{LINK_HREF}}': linkHref };
     copyVanillaComponents(projectDir, Object.keys(VANILLA_COMPONENT_SLUGS), vanillaCoreRepl);
+    if (vanillaSkipped.length > 0) {
+      writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd('vanilla', { linkHref, theme, defaultDark, defaultLight, skippedFiles: vanillaSkipped }), 'utf8');
+    }
     copyPackageLicense(projectDir);
     copyVanillaGitignore(projectDir);
   } else {
-    if (framework === 'svelte') {
+    // Add-to-existing (landing) or Vanilla create new with picked components: CSS, fonts, icons, sfx (framework-appropriate)
+    if (framework === 'astro') {
+      copyRizzoCssAndFontsForAstro(projectDir, cssSource);
+      cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
+    } else if (framework === 'svelte') {
       copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
       cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
     } else {
@@ -1944,42 +2295,84 @@ async function cmdInit(argv) {
       mkdirSync(cssDir, { recursive: true });
       copyFileSync(cssSource, cssTarget);
       copyRizzoFonts(dirname(cssTarget));
-      if (framework === 'vanilla') copyRizzoSfx(projectDir);
+      copyRizzoSfx(projectDir);
+    }
+    if (selectedTemplate === 'landing') {
+      copyRizzoIcons(projectDir, framework);
     }
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
-    if (framework === 'vanilla' && selectedTemplate === 'manual') {
+    const linkHrefForSetup = framework === 'vanilla' ? 'css/rizzo.min.css' : '/css/rizzo.min.css';
+    const setupMdContent = buildRizzoSetupMd(framework, {
+      linkHref: linkHrefForSetup,
+      theme,
+      defaultDark,
+      defaultLight,
+      ...(selectedTemplate === 'landing' && { exampleMinimalPage: getLandingTemplateHtml({ theme, themeComment, name, framework }) }),
+    });
+    if (selectedTemplate === 'landing') {
+      const vanillaIndex = join(projectDir, 'index.html');
+      const landingHtmlForAdd = getLandingTemplateHtml({ theme, themeComment, name, framework });
+      const astroIndex = join(projectDir, 'public', 'index.html');
+      const svelteIndex = join(projectDir, 'static', 'index.html');
+      if (framework === 'vanilla' && !existsSync(vanillaIndex)) {
+        indexPath = vanillaIndex;
+        writeFileSync(vanillaIndex, landingHtmlForAdd, 'utf8');
+      } else if (framework === 'astro' && !existsSync(astroIndex)) {
+        mkdirSync(join(projectDir, 'public'), { recursive: true });
+        indexPath = astroIndex;
+        writeFileSync(astroIndex, landingHtmlForAdd, 'utf8');
+      } else if (framework === 'svelte' && !existsSync(svelteIndex)) {
+        mkdirSync(join(projectDir, 'static'), { recursive: true });
+        indexPath = svelteIndex;
+        writeFileSync(svelteIndex, landingHtmlForAdd, 'utf8');
+      }
+      writeFileSync(join(projectDir, RIZZO_SETUP_FILE), setupMdContent, 'utf8');
+      copyPackageLicense(projectDir);
+      if (framework === 'vanilla') copyVanillaGitignore(projectDir);
+    } else if (framework === 'vanilla' && selectedTemplate === 'full' && !fullAllComponents) {
       indexPath = join(projectDir, 'index.html');
-      let indexContent = minimalHtml;
-      if (selectedComponents.length > 0) {
-        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).replace(/\{\{RIZZO_SOUND_SCRIPT\}\}/g, vanillaSoundScript);
-          writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
+      if (!existsSync(indexPath)) {
+        let indexContent = landingHtml;
+        if (selectedComponents.length > 0) {
+          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).replace(/\{\{RIZZO_SOUND_SCRIPT\}\}/g, vanillaSoundScript);
+            writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
+          }
+          const vanillaRepl = { ...replacements, '{{LINK_HREF}}': 'css/rizzo.min.css' };
+          copyVanillaComponents(projectDir, selectedComponents, vanillaRepl);
+          copyRizzoIcons(projectDir, 'vanilla');
+          indexContent = landingHtml.replace('</body>', '  <script src="js/main.js"></script>\n</body>');
         }
-        const vanillaRepl = { ...replacements, '{{LINK_HREF}}': 'css/rizzo.min.css' };
-        copyVanillaComponents(projectDir, selectedComponents, vanillaRepl);
-        copyRizzoIcons(projectDir, 'vanilla');
-        indexContent = minimalHtml.replace('</body>', '  <script src="js/main.js"></script>\n</body>');
+        writeFileSync(indexPath, indexContent, 'utf8');
+      } else {
+        writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd(framework, { linkHref: 'css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: [{ relativePath: 'index.html', content: landingHtml }] }), 'utf8');
       }
-      writeFileSync(indexPath, indexContent, 'utf8');
       writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), VANILLA_MANUAL_README, 'utf8');
       copyVanillaGitignore(projectDir);
+      copyPackageLicense(projectDir);
     } else if (framework === 'astro') {
       indexPath = join(projectDir, 'public', 'index.html');
       mkdirSync(join(projectDir, 'public'), { recursive: true });
-      writeFileSync(indexPath, minimalHtml, 'utf8');
+      if (!existsSync(indexPath)) writeFileSync(indexPath, landingHtml, 'utf8');
+      else writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd(framework, { linkHref: '/css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: [{ relativePath: 'public/index.html', content: landingHtml }] }), 'utf8');
       writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), FALLBACK_MINIMAL_README, 'utf8');
-    } else {
+      copyPackageLicense(projectDir);
+    } else if (framework === 'svelte') {
       indexPath = join(projectDir, 'static', 'index.html');
       mkdirSync(join(projectDir, 'static'), { recursive: true });
-      writeFileSync(indexPath, minimalHtml, 'utf8');
+      if (!existsSync(indexPath)) writeFileSync(indexPath, landingHtml, 'utf8');
+      else writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd(framework, { linkHref: '/css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: [{ relativePath: 'static/index.html', content: landingHtml }] }), 'utf8');
       writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), FALLBACK_MINIMAL_README, 'utf8');
+      copyPackageLicense(projectDir);
+    } else {
+      copyPackageLicense(projectDir);
     }
-    copyPackageLicense(projectDir);
   }
   console.log('\n✓ Project ready at ' + projectDir);
@@ -1987,11 +2380,16 @@ async function cmdInit(argv) {
   if (indexPath) console.log('  - ' + indexPath);
   if (framework === 'vanilla') {
     if (useVanillaCore) {
-      console.log('  - Vanilla JS (core): theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME + '.');
+      console.log('  - Vanilla JS (full): theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME + '.');
+    } else if (selectedTemplate === 'landing') {
+      console.log('  - ' + RIZZO_SETUP_FILE + ' has instructions and snippets.');
     } else {
-      console.log('  - Vanilla JS (manual): index.html + CSS only. Add JS from docs or copy from Core.');
+      console.log('  - Vanilla JS (picked components): index.html + CSS. Add JS from docs or ' + RIZZO_SETUP_FILE + '.');
     }
   }
+  if (existsSync(join(projectDir, RIZZO_SETUP_FILE))) {
+    console.log('  - ' + RIZZO_SETUP_FILE + ' (instructions + snippets for anything we didn\'t overwrite)');
+  }
   const pm = getPackageManagerCommands({ agent: selectedPm, command: selectedPm });
   const nextStep = pm.install + ' && ' + pm.run('dev');
   const runPrefix = projectDir !== cwd ? 'cd ' + pathRelative(cwd, projectDir) + ' && ' : '';
@@ -2050,6 +2448,9 @@ async function cmdInit(argv) {
     const createExample = getCreateProjectExample(pm, framework);
     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 (selectedVariation && selectedVariation !== 'landing') {
+    console.log('  - Variation: ' + selectedVariation + ' (layout + starter content).');
+  }
   if (hasPackageJson) {
     console.log('\nNext: ' + runPrefix + nextStep);
   } else if (framework === 'vanilla') {
@@ -2072,6 +2473,7 @@ function main() {
     }
     if (argv[0] && !COMMANDS.includes(command) && command !== 'h') {
       console.error('Unknown command: ' + argv[0] + '\n');
+      process.exitCode = 1;
     }
     printHelp();
     return;