rizzo-css 0.0.3 → 0.0.5

package/README.md

@@ -1,6 +1,6 @@
 # rizzo-css
 
-A modern CSS design system with semantic theming, 14 built-in themes, and accessible components (BEM). Framework-agnostic: use with Astro, Svelte, React, Vue, or plain HTML.
+A modern CSS design system with semantic theming, 14 built-in themes, and accessible components (BEM). **The same CSS and component styles** ship for every option: **Vanilla JS**, Astro, and Svelte. Framework-agnostic: use with any stack or plain HTML.
 
 ## Install
 
@@ -12,7 +12,14 @@ pnpm add rizzo-css
 yarn add rizzo-css
 ```
 
-**Quick start (no install):** `npx rizzo-css init` scaffolds a project (prompts for framework and optional Astro/Svelte components). `npx rizzo-css add` copies the CSS into the current project. `npx rizzo-css theme` lists themes.
+**Quick start (no install):** `npx rizzo-css init` — first choose **add to existing project** or **create new**. Existing: framework (auto-detect), themes, optional components. New: scaffold (Vanilla example, default Astro app, or default Svelte app; CLI colors: Vanilla = yellow, Astro = orange, Svelte = orange-red). All get the **same CSS and component styles**. To use the **official Svelte or Astro scaffold** plus Rizzo CSS, create the app with their CLI first, then run `npx rizzo-css add`:
+
+```bash
+npm create svelte@latest my-app && cd my-app && npx rizzo-css add
+npm create astro@latest my-app   && cd my-app && npx rizzo-css add
+```
+
+`add` auto-detects Svelte/Astro and copies CSS to the right place (`static/css` or `public/css`). `npx rizzo-css theme` lists themes.
 
 ## Use
 
@@ -34,7 +41,7 @@ import 'rizzo-css';
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rizzo-css@latest" />
 ```
 
-Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). For Astro or Svelte, reference components and examples are in the [documentation](https://rizzo-css.vercel.app/docs/getting-started).
+Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files for convenience.
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -36,6 +36,19 @@ const ASTRO_COMPONENTS = [
   'Modal', 'Toast', 'Table',
 ];
 
+// ANSI colors for CLI (framework logo colors)
+const C = {
+  reset: '\u001b[0m',
+  dim: '\u001b[90m',
+  cyan: '\u001b[36m',
+  vanilla: '\u001b[38;5;226m', // Vanilla JS yellow
+  astro: '\u001b[38;5;208m',   // Astro orange #ff5d01
+  svelte: '\u001b[38;5;202m',  // Svelte orange #ff3e00
+};
+
+const CIRCLE_EMPTY = '\u25CB ';  // ○
+const CIRCLE_FILLED = '\u25CF '; // ●
+
 // Resolve path to this package (works when run via npx or from repo)
 function getPackageRoot() {
   return dirname(require.resolve('../package.json'));
@@ -55,6 +68,189 @@ function question(prompt) {
   });
 }
 
+/** Format label with optional ANSI color (item.color). */
+function formatLabel(item) {
+  const text = item.label || item.value;
+  return item.color ? item.color + text + C.reset : text;
+}
+
+/** Single-select menu with circles. options: array of { value, label, color? }. Returns selected value. */
+function selectMenu(options, title) {
+  const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+  const isTty = process.stdin.isTTY && process.stdout.isTTY;
+
+  if (!isTty) {
+    console.log('\n' + (title || 'Choose one') + ':');
+    items.forEach((item, i) => console.log('  ' + (i + 1) + '. ' + (item.label || item.value)));
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+      rl.question('\nEnter number [1]: ', (answer) => {
+        rl.close();
+        const n = parseInt((answer || '1').trim(), 10);
+        const idx = n >= 1 && n <= items.length ? n - 1 : 0;
+        resolve(items[idx].value);
+      });
+    });
+  }
+
+  return new Promise((resolve) => {
+    let index = 0;
+    const lineCount = (title ? 1 : 0) + items.length + 1;
+
+    const render = (first) => {
+      const lines = (title ? [title] : []).concat(
+        items.map((item, i) => {
+          const circle = i === index ? CIRCLE_FILLED : CIRCLE_EMPTY;
+          const prefix = i === index ? C.cyan + '>' + C.reset + ' ' : '  ';
+          return prefix + circle + formatLabel(item);
+        })
+      );
+      if (!first) {
+        process.stdout.write('\u001b[' + lineCount + 'A');
+      }
+      process.stdout.write('\u001b[?25l');
+      process.stdout.write(lines.join('\n') + '\n\n');
+      process.stdout.write('\u001b[?25h');
+    };
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf8');
+
+    render(true);
+
+    let buf = '';
+    const onData = (ch) => {
+      if (ch === '\u0003') {
+        process.stdin.setRawMode(false);
+        process.stdin.removeListener('data', onData);
+        process.stdout.write('\n');
+        process.exit(130);
+      }
+      if (ch === '\r' || ch === '\n') {
+        process.stdin.setRawMode(false);
+        process.stdin.removeListener('data', onData);
+        process.stdin.pause();
+        process.stdout.write('\n');
+        resolve(items[index].value);
+        return;
+      }
+      buf += ch;
+      const isUp = buf === '\u001b[A' || buf === '\u001bOA' || (buf.length >= 2 && buf.endsWith('A') && buf.startsWith('\u001b'));
+      const isDown = buf === '\u001b[B' || buf === '\u001bOB' || (buf.length >= 2 && buf.endsWith('B') && buf.startsWith('\u001b'));
+      if (isUp) {
+        buf = '';
+        index = index <= 0 ? items.length - 1 : index - 1;
+        render(false);
+      } else if (isDown) {
+        buf = '';
+        index = index >= items.length - 1 ? 0 : index + 1;
+        render(false);
+      } else if (buf.length > 12 || (buf.length === 1 && ch !== '\u001b')) {
+        buf = '';
+      }
+    };
+    process.stdin.on('data', onData);
+  });
+}
+
+/** Multi-select menu: circles ○/●, Space toggles, Enter confirms. Returns array of selected values. */
+function multiSelectMenu(options, title) {
+  const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+  const isTty = process.stdin.isTTY && process.stdout.isTTY;
+
+  if (!isTty) {
+    console.log('\n' + (title || 'Choose (space to toggle, enter when done') + ':');
+    items.forEach((item, i) => console.log('  ' + (i + 1) + '. ' + (item.label || item.value)));
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+      rl.question('\nEnter numbers to include (e.g. 1 3 5 or all): ', (answer) => {
+        rl.close();
+        const s = (answer || '').trim().toLowerCase();
+        if (s === 'all' || s === 'a') {
+          resolve(items.map((i) => i.value));
+          return;
+        }
+        const parts = s.split(/[\s,]+/).filter(Boolean);
+        const indices = new Set();
+        for (const p of parts) {
+          const n = parseInt(p, 10);
+          if (n >= 1 && n <= items.length) indices.add(n - 1);
+        }
+        resolve(Array.from(indices).sort((a, b) => a - b).map((i) => items[i].value));
+      });
+    });
+  }
+
+  return new Promise((resolve) => {
+    let index = 0;
+    const selected = new Set();
+    const lineCount = (title ? 1 : 0) + items.length + 1;
+
+    const render = (first) => {
+      const lines = (title ? [title] : []).concat(
+        items.map((item, i) => {
+          const circle = selected.has(i) ? CIRCLE_FILLED : CIRCLE_EMPTY;
+          const prefix = i === index ? C.cyan + '>' + C.reset + ' ' : '  ';
+          return prefix + circle + formatLabel(item);
+        })
+      );
+      if (!first) {
+        process.stdout.write('\u001b[' + lineCount + 'A');
+      }
+      process.stdout.write('\u001b[?25l');
+      process.stdout.write(lines.join('\n') + '\n\n');
+      process.stdout.write('\u001b[?25h');
+    };
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf8');
+
+    render(true);
+
+    let buf = '';
+    const onData = (ch) => {
+      if (ch === '\u0003') {
+        process.stdin.setRawMode(false);
+        process.stdin.removeListener('data', onData);
+        process.stdout.write('\n');
+        process.exit(130);
+      }
+      if (ch === '\r' || ch === '\n') {
+        process.stdin.setRawMode(false);
+        process.stdin.removeListener('data', onData);
+        process.stdin.pause();
+        process.stdout.write('\n');
+        resolve(Array.from(selected).sort((a, b) => a - b).map((i) => items[i].value));
+        return;
+      }
+      if (ch === ' ') {
+        buf = '';
+        if (selected.has(index)) selected.delete(index);
+        else selected.add(index);
+        render(false);
+        return;
+      }
+      buf += ch;
+      const isUp = buf === '\u001b[A' || buf === '\u001bOA' || (buf.length >= 2 && buf.endsWith('A') && buf.startsWith('\u001b'));
+      const isDown = buf === '\u001b[B' || buf === '\u001bOB' || (buf.length >= 2 && buf.endsWith('B') && buf.startsWith('\u001b'));
+      if (isUp) {
+        buf = '';
+        index = index <= 0 ? items.length - 1 : index - 1;
+        render(false);
+      } else if (isDown) {
+        buf = '';
+        index = index >= items.length - 1 ? 0 : index + 1;
+        render(false);
+      } else if (buf.length > 12 || (buf.length === 1 && ch !== '\u001b')) {
+        buf = '';
+      }
+    };
+    process.stdin.on('data', onData);
+  });
+}
+
 function printHelp() {
   console.log(`
 rizzo-css CLI — Add Rizzo CSS to your project
@@ -63,15 +259,23 @@ Usage:
   npx rizzo-css <command> [options]
 
 Commands:
-  init    Scaffold a new project (prompts: name, framework, theme; Astro/Svelte: optional component picker)
-  add     Copy Rizzo CSS into the current project
-  theme   List available themes
+  init    Add Rizzo to existing project or scaffold new one (first menu: existing vs new)
+  add     Copy Rizzo CSS into the current project (auto-detects Svelte/Astro)
+  theme   List all available themes (use in init or set data-theme on <html>)
   help    Show this help
 
+Use framework CLI first, then add Rizzo CSS:
+  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
+
 Examples:
   npx rizzo-css init
   npx rizzo-css add
   npx rizzo-css add --path public/css
+  npx rizzo-css add --framework svelte
   npx rizzo-css theme
 
 Docs: https://rizzo-css.vercel.app
@@ -79,16 +283,44 @@ Docs: https://rizzo-css.vercel.app
 }
 
 function cmdTheme() {
-  console.log('\nAvailable themes (set data-theme on <html>):\n');
-  THEMES.forEach((t) => console.log('  ' + t));
-  console.log('\nExample: <html lang="en" data-theme="github-dark-classic">\n');
+  process.stdout.write('\nAvailable themes (set data-theme on <html>):\n\n');
+  THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
+  process.stdout.write('\nExample: <html lang="en" data-theme="github-dark-classic">\n\n');
+}
+
+/** Detect framework from cwd: "svelte" | "astro" | null. */
+function detectFramework(cwd) {
+  if (existsSync(join(cwd, 'svelte.config.js')) || existsSync(join(cwd, 'svelte.config.ts'))) return 'svelte';
+  if (existsSync(join(cwd, 'astro.config.mjs')) || existsSync(join(cwd, 'astro.config.mts')) || existsSync(join(cwd, 'astro.config.js'))) return 'astro';
+  try {
+    const pkg = readFileSync(join(cwd, 'package.json'), 'utf8');
+    const json = JSON.parse(pkg);
+    const deps = { ...json.dependencies, ...(json.devDependencies || {}) };
+    if (deps['@sveltejs/kit'] || deps['svelte']) return 'svelte';
+    if (deps['astro']) return 'astro';
+  } catch (_) { /* ignore */ }
+  return null;
+}
+
+/** Default CSS directory and link href for a framework (for add command). */
+function getFrameworkCssPaths(framework) {
+  if (framework === 'svelte') return { targetDir: 'static/css', linkHref: '/css/rizzo.min.css' };
+  if (framework === 'astro') return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css' };
+  return { targetDir: 'css', linkHref: 'css/rizzo.min.css' };
 }
 
 function cmdAdd(argv) {
   const pathIdx = argv.indexOf('--path');
   const customPath = pathIdx !== -1 && argv[pathIdx + 1] ? argv[pathIdx + 1] : null;
-  const targetDir = customPath || 'css';
-  const targetFile = join(process.cwd(), targetDir, 'rizzo.min.css');
+  const frameworkIdx = argv.indexOf('--framework');
+  const explicitFramework = frameworkIdx !== -1 && argv[frameworkIdx + 1] ? argv[frameworkIdx + 1].toLowerCase() : null;
+  const cwd = process.cwd();
+  const framework = explicitFramework && FRAMEWORKS.includes(explicitFramework)
+    ? explicitFramework
+    : (explicitFramework === null ? detectFramework(cwd) : null);
+  const paths = getFrameworkCssPaths(framework);
+  const targetDir = customPath || paths.targetDir;
+  const targetFile = join(cwd, targetDir, 'rizzo.min.css');
   const cssSource = getCssPath();
 
   if (!existsSync(cssSource)) {
@@ -96,26 +328,27 @@ function cmdAdd(argv) {
     process.exit(1);
   }
 
-  mkdirSync(join(process.cwd(), targetDir), { recursive: true });
+  mkdirSync(join(cwd, targetDir), { recursive: true });
   copyFileSync(cssSource, targetFile);
-  const linkPath = targetDir + '/rizzo.min.css';
+  const linkHref = customPath ? customPath + '/rizzo.min.css' : paths.linkHref;
   console.log('\n✓ Rizzo CSS copied to ' + targetFile);
-  console.log('\nAdd to your HTML or layout:\n');
-  console.log('  <link rel="stylesheet" href="' + linkPath + '" />');
-  console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)\n');
-}
-
-function parseComponentSelection(input, componentList, maxNum) {
-  const s = (input || '').trim().toLowerCase();
-  if (s === 'none' || s === 'n') return [];
-  if (s === 'all' || s === 'a') return componentList.slice();
-  const parts = s.split(/[\s,]+/).filter(Boolean);
-  const indices = new Set();
-  for (const p of parts) {
-    const n = parseInt(p, 10);
-    if (n >= 1 && n <= maxNum) indices.add(n - 1);
-  }
-  return indices.size === 0 ? [] : Array.from(indices).sort((a, b) => a - b).map((i) => componentList[i]);
+  if (framework === 'svelte') {
+    console.log('\nDetected Svelte/SvelteKit. Add to your root layout (e.g. src/app.html):\n');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)');
+    console.log('\nTo add Rizzo Svelte components later: copy from this package\'s scaffold or run npx rizzo-css init and pick Svelte + components in an empty folder, then copy the generated files.\n');
+  } else if (framework === 'astro') {
+    console.log('\nDetected Astro. Add to your layout (e.g. src/layouts/Layout.astro):\n');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)\n');
+  } else {
+    console.log('\nAdd to your HTML or layout:\n');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    if (framework === 'vanilla') {
+      console.log('\nVanilla JS: same CSS and component classes as Astro/Svelte. Use the same BEM markup from the docs.');
+    }
+    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)\n');
+  }
 }
 
 function getScaffoldSvelteDir() {
@@ -126,6 +359,18 @@ function getScaffoldAstroDir() {
   return join(getPackageRoot(), 'scaffold', 'astro');
 }
 
+function getScaffoldVanillaIndex() {
+  return join(getPackageRoot(), 'scaffold', 'vanilla', 'index.html');
+}
+
+function getScaffoldAstroAppDir() {
+  return join(getPackageRoot(), 'scaffold', 'astro-app');
+}
+
+function getScaffoldSvelteAppDir() {
+  return join(getPackageRoot(), 'scaffold', 'svelte-app');
+}
+
 function copyDirRecursive(src, dest) {
   mkdirSync(dest, { recursive: true });
   const entries = readdirSync(src, { withFileTypes: true });
@@ -140,6 +385,31 @@ function copyDirRecursive(src, dest) {
   }
 }
 
+/** Copy directory recursively; in text files (utf-8), replace each key in replacements with its value. */
+function copyDirRecursiveWithReplacements(src, dest, replacements) {
+  mkdirSync(dest, { recursive: true });
+  const entries = readdirSync(src, { withFileTypes: true });
+  const textExtensions = new Set(['.html', '.astro', '.svelte', '.ts', '.js', '.mjs', '.json', '.css', '.md']);
+  for (const e of entries) {
+    const srcPath = join(src, e.name);
+    const destPath = join(dest, e.name);
+    if (e.isDirectory()) {
+      copyDirRecursiveWithReplacements(srcPath, destPath, replacements);
+    } else {
+      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);
+      }
+    }
+  }
+}
+
 function copySvelteComponents(projectDir, selectedNames) {
   const scaffoldDir = getScaffoldSvelteDir();
   if (!existsSync(scaffoldDir)) {
@@ -204,30 +474,149 @@ function copyAstroComponents(projectDir, selectedNames) {
   }
 }
 
+/** Add Rizzo CSS (and optional components) to an existing project in cwd. */
+async function runAddToExisting() {
+  const cwd = process.cwd();
+  const detected = detectFramework(cwd);
+  const frameworkOptions = [
+    { value: 'vanilla', label: 'Vanilla JS (HTML + CSS)', color: C.vanilla },
+    { value: 'astro', label: 'Astro', color: C.astro },
+    { value: 'svelte', label: 'Svelte', color: C.svelte },
+  ];
+  let frameworkPrompt = '? Framework';
+  if (detected) {
+    frameworkPrompt += ' (detected: ' + detected + ' — pick to confirm or choose another)';
+  }
+  const framework = await selectMenu(frameworkOptions, frameworkPrompt);
+
+  const selectedThemes = await multiSelectMenu(
+    THEMES.map((t) => ({ value: t, label: t })),
+    '? Themes (Space to toggle, Enter to confirm) — we\'ll suggest the first as default data-theme'
+  );
+  const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
+  const suggestedTheme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
+
+  let selectedComponents = [];
+  const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
+  if (componentList.length > 0) {
+    const includeLabel = framework === 'svelte' ? 'Svelte' : 'Astro';
+    const includeChoice = await selectMenu(
+      [
+        { value: 'none', label: 'None' },
+        { value: 'pick', label: 'Yes, pick ' + includeLabel + ' components' },
+      ],
+      '? Include ' + includeLabel + ' components?'
+    );
+    if (includeChoice === 'pick') {
+      selectedComponents = await multiSelectMenu(
+        componentList.map((c) => ({ value: c, label: c })),
+        '? Components (Space to toggle, Enter to confirm)'
+      );
+    }
+  }
+
+  const cssSource = getCssPath();
+  if (!existsSync(cssSource)) {
+    console.error('Error: Rizzo CSS build not found. Run from repo root: pnpm build:css');
+    process.exit(1);
+  }
+
+  const paths = getFrameworkCssPaths(framework);
+  const targetDir = join(cwd, paths.targetDir);
+  const cssTarget = join(targetDir, 'rizzo.min.css');
+  mkdirSync(targetDir, { recursive: true });
+  copyFileSync(cssSource, cssTarget);
+
+  if (framework === 'svelte' && selectedComponents.length > 0) {
+    copySvelteComponents(cwd, selectedComponents);
+  } else if (framework === 'astro' && selectedComponents.length > 0) {
+    copyAstroComponents(cwd, selectedComponents);
+  }
+
+  const linkHref = paths.linkHref;
+  console.log('\n✓ Rizzo CSS added to your existing project');
+  console.log('  - ' + cssTarget);
+  if (framework === 'svelte') {
+    console.log('\nAdd to your root layout (e.g. src/app.html):');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
+    if (selectedComponents.length > 0) {
+      console.log('  Components are in src/lib/rizzo — import from \'$lib/rizzo\'.');
+    }
+  } else if (framework === 'astro') {
+    console.log('\nAdd to your layout (e.g. src/layouts/Layout.astro):');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
+    if (selectedComponents.length > 0) {
+      console.log('  Components are in src/components/rizzo — import from there.');
+    }
+  } else {
+    console.log('\nAdd to your HTML or layout:');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
+  }
+  console.log('\nDocs: https://rizzo-css.vercel.app\n');
+}
+
 async function cmdInit() {
-  const name = await question('Project name (folder name, or leave blank for current directory): ');
-  let framework = await question('Framework: vanilla, astro, svelte (default: vanilla): ') || 'vanilla';
-  framework = framework.toLowerCase();
-  if (!FRAMEWORKS.includes(framework)) framework = 'vanilla';
+  const initMode = await selectMenu(
+    [
+      { value: 'existing', label: 'Add to existing project (current directory)' },
+      { value: 'new', label: 'Create new project (scaffold)' },
+    ],
+    '? Are you using an existing project or creating a new one?'
+  );
+
+  if (initMode === 'existing') {
+    await runAddToExisting();
+    return;
+  }
 
-  const theme = await question('Theme (default: github-dark-classic, or run "npx rizzo-css theme" for list): ') || 'github-dark-classic';
+  const projectChoice = await selectMenu(
+    [
+      { value: 'cwd', label: 'Current directory' },
+      { value: 'name', label: 'Enter project name (new folder)' },
+    ],
+    '? Project location'
+  );
+  const name = projectChoice === 'name' ? await question('Project name (folder name): ') : '';
+
+  const framework = await selectMenu(
+    [
+      { value: 'vanilla', label: 'Vanilla JS (HTML + CSS + same styles & components)', color: C.vanilla },
+      { value: 'astro', label: 'Astro', color: C.astro },
+      { value: 'svelte', label: 'Svelte', color: C.svelte },
+    ],
+    '? Framework (arrows, Enter to select) — all get the same CSS and component styles'
+  );
+
+  const selectedThemes = await multiSelectMenu(
+    THEMES.map((t) => ({ value: t, label: t })),
+    '? Themes (Space to toggle, Enter to confirm)'
+  );
+  const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
+  const theme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
 
   let selectedComponents = [];
   const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
   if (componentList.length > 0) {
-    const label = framework === 'svelte' ? 'Svelte' : 'Astro';
-    const include = await question('Include ' + label + ' components? (y/n, default: n): ') || 'n';
-    if (include.toLowerCase() === 'y' || include.toLowerCase() === 'yes') {
-      console.log('\nComponents (enter numbers to include, e.g. 1 3 5, or "all" / "none"):');
-      componentList.forEach((c, i) => console.log('  ' + (i + 1) + '. ' + c));
-      const choice = await question('\nSelection (e.g. 1 2 3 or all): ');
-      selectedComponents = parseComponentSelection(choice, componentList, componentList.length);
+    const includeLabel = framework === 'svelte' ? 'Svelte' : 'Astro';
+    const includeChoice = await selectMenu(
+      [
+        { value: 'none', label: 'None' },
+        { value: 'pick', label: 'Yes, pick ' + includeLabel + ' components' },
+      ],
+      '? Include ' + includeLabel + ' components?'
+    );
+    if (includeChoice === 'pick') {
+      selectedComponents = await multiSelectMenu(
+        componentList.map((c) => ({ value: c, label: c })),
+        '? Components (Space to toggle, Enter to confirm)'
+      );
     }
   }
 
   const projectDir = name ? join(process.cwd(), name) : process.cwd();
-  const cssDir = framework === 'astro' ? join(projectDir, 'public', 'css') : join(projectDir, 'css');
-  const cssTarget = join(cssDir, 'rizzo.min.css');
   const cssSource = getCssPath();
 
   if (!existsSync(cssSource)) {
@@ -235,12 +624,63 @@ async function cmdInit() {
     process.exit(1);
   }
 
-  mkdirSync(cssDir, { recursive: true });
-  copyFileSync(cssSource, cssTarget);
-
-  const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
-  const indexHtml = `<!DOCTYPE html>
-<html lang="en" data-theme="${theme}">
+  const themeComment = themeList.length > 0
+    ? '\n  <!-- Selected themes: ' + themeList.join(', ') + ' -->'
+    : '';
+  const projectNamePkg = name
+    ? name.replace(/\s+/g, '-').toLowerCase()
+    : (framework === 'astro' ? 'my-astro-app' : framework === 'svelte' ? 'my-svelte-app' : 'my-app');
+  const replacements = {
+    '{{DATA_THEME}}': theme,
+    '{{THEME_LIST_COMMENT}}': themeComment,
+    '{{TITLE}}': name || 'App',
+    '{{PROJECT_NAME}}': projectNamePkg,
+  };
+
+  const astroAppDir = getScaffoldAstroAppDir();
+  const svelteAppDir = getScaffoldSvelteAppDir();
+
+  let cssTarget;
+  let indexPath;
+
+  if (framework === 'astro' && existsSync(astroAppDir)) {
+    mkdirSync(projectDir, { recursive: true });
+    copyDirRecursiveWithReplacements(astroAppDir, projectDir, replacements);
+    mkdirSync(join(projectDir, 'public', 'css'), { recursive: true });
+    cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
+    copyFileSync(cssSource, cssTarget);
+    if (selectedComponents.length > 0) {
+      copyAstroComponents(projectDir, selectedComponents);
+    }
+  } else if (framework === 'svelte' && existsSync(svelteAppDir)) {
+    mkdirSync(projectDir, { recursive: true });
+    copyDirRecursiveWithReplacements(svelteAppDir, projectDir, replacements);
+    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
+    copyFileSync(cssSource, cssTarget);
+    if (selectedComponents.length > 0) {
+      copySvelteComponents(projectDir, selectedComponents);
+    }
+  } else {
+    const cssDir = framework === 'astro' ? join(projectDir, 'public', 'css') : join(projectDir, 'css');
+    cssTarget = join(cssDir, 'rizzo.min.css');
+    const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
+    mkdirSync(cssDir, { recursive: true });
+    copyFileSync(cssSource, cssTarget);
+
+    const vanillaScaffoldPath = getScaffoldVanillaIndex();
+    indexPath = join(projectDir, 'index.html');
+    if (framework === 'vanilla' && existsSync(vanillaScaffoldPath)) {
+      let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
+      indexHtml = indexHtml
+        .replace(/\{\{DATA_THEME\}\}/g, theme)
+        .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
+        .replace(/\{\{TITLE\}\}/g, name || 'App')
+        .replace(/\{\{LINK_HREF\}\}/g, linkHref);
+      writeFileSync(indexPath, indexHtml, 'utf8');
+    } else {
+      const indexHtml = `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">${themeComment}
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -253,20 +693,32 @@ async function cmdInit() {
 </body>
 </html>
 `;
-
-  const indexPath = join(projectDir, 'index.html');
-  writeFileSync(indexPath, indexHtml, 'utf8');
-
-  if (framework === 'svelte' && selectedComponents.length > 0) {
-    copySvelteComponents(projectDir, selectedComponents);
-  } else if (framework === 'astro' && selectedComponents.length > 0) {
-    copyAstroComponents(projectDir, selectedComponents);
+      writeFileSync(indexPath, indexHtml, 'utf8');
+    }
+    if (framework === 'svelte' && selectedComponents.length > 0) {
+      copySvelteComponents(projectDir, selectedComponents);
+    } else if (framework === 'astro' && selectedComponents.length > 0) {
+      copyAstroComponents(projectDir, selectedComponents);
+    }
   }
 
   console.log('\n✓ Project ready at ' + projectDir);
   console.log('  - ' + cssTarget);
-  console.log('  - ' + indexPath);
-  console.log('\nRun a local server (e.g. npx serve .) or open index.html. Docs: https://rizzo-css.vercel.app\n');
+  if (indexPath) console.log('  - ' + indexPath);
+  if (framework === 'vanilla') {
+    console.log('  - Vanilla JS: same CSS and component styles; index includes theme switcher and sample components.');
+  }
+  if (framework === 'astro' && existsSync(astroAppDir)) {
+    console.log('  - Default Astro project with Rizzo CSS. Run: pnpm install && pnpm dev');
+  }
+  if (framework === 'svelte' && existsSync(svelteAppDir)) {
+    console.log('  - Default SvelteKit project with Rizzo CSS. Run: pnpm install && pnpm dev');
+  }
+  if ((framework === 'svelte' || framework === 'astro') && !existsSync(framework === 'astro' ? astroAppDir : svelteAppDir)) {
+    const fw = framework === 'svelte' ? 'Svelte' : 'Astro';
+    console.log('\nTip: To use the official ' + fw + ' scaffold, create a project with their CLI (e.g. npm create ' + framework + '@latest my-app), then run npx rizzo-css add in that folder.');
+  }
+  console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
 
 function main() {

package/dist/rizzo.min.css

@@ -1,6 +1,4 @@
-:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-sans:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:"SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--max-height-dropdown:600px;--max-height-modal:32rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:var(--success-text);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:var(--info-text);--selection:oklch(70% 0.15 250deg);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*,
-*::after,
-*::before{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;padding:0} blockquote,body, dd, dl,
+:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-sans:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:"SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--max-height-dropdown:600px;--max-height-modal:32rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:var(--success-text);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:var(--info-text);--selection:oklch(70% 0.15 250deg);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*, *::after, *::before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;padding:0} blockquote,body, dd, dl,
 figure, h1, h2, h3, h4, h5, h6, p{margin-block-end:0}
 ol[role="list"],ul[role="list"]{list-style:none}body{line-height:1.5;margin:0;min-height:100vh;padding:0}
 button,h1, h2, h3, h4, h5, h6, input, label{line-height:1.1}h1, h2, h3, h4, h5, h6{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip:ink;color:currentcolor;text-decoration-skip-ink:auto}img,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js"
   },

package/scaffold/astro-app/astro.config.mjs

@@ -0,0 +1,4 @@
+// https://astro.build/config
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({});

package/scaffold/astro-app/package.json

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

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

@@ -0,0 +1,19 @@
+---
+interface Props {
+  title?: string;
+}
+
+const { title = '{{TITLE}}' } = Astro.props;
+---
+<!doctype html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

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

@@ -0,0 +1,13 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+<Layout>
+  <main style="padding: var(--spacing-6); max-width: 65ch;">
+    <h1>Hello, Rizzo CSS</h1>
+    <p>Your Astro project is set up with Rizzo CSS. Same styles and components as Vanilla JS and Svelte.</p>
+    <p>
+      <a href="https://rizzo-css.vercel.app/docs/components">Component docs</a>
+      — Set theme via <code>data-theme</code> on <code>&lt;html&gt;</code> (e.g. <code>github-dark-classic</code>). Run <code>npx rizzo-css theme</code> to list themes.
+    </p>
+  </main>
+</Layout>

package/scaffold/astro-app/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

package/scaffold/svelte-app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "svelte": "^5.0.0",
+    "vite": "^6.0.0"
+  }
+}

package/scaffold/svelte-app/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

package/scaffold/svelte-app/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/scaffold/svelte-app/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  // Root layout — Rizzo CSS is loaded via app.html
+</script>
+
+<slot />

package/scaffold/svelte-app/src/routes/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+  // Welcome page
+</script>
+
+<main style="padding: var(--spacing-6); max-width: 65ch;">
+  <h1>Hello, Rizzo CSS</h1>
+  <p>Your SvelteKit project is set up with Rizzo CSS. Same styles and components as Vanilla JS and Astro.</p>
+  <p>
+    <a href="https://rizzo-css.vercel.app/docs/components">Component docs</a>
+    — Set theme via <code>data-theme</code> on <code>&lt;html&gt;</code> (e.g. <code>github-dark-classic</code>). Run <code>npx rizzo-css theme</code> to list themes.
+  </p>
+</main>

package/scaffold/svelte-app/svelte.config.js

@@ -0,0 +1,11 @@
+// @ts-check
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapter()
+  }
+};
+
+export default config;

package/scaffold/svelte-app/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  }
+}

package/scaffold/svelte-app/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()]
+});

package/scaffold/vanilla/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{TITLE}}</title>
+  <link rel="stylesheet" href="{{LINK_HREF}}" />
+</head>
+<body>
+  <header style="margin-bottom: var(--spacing-6);">
+    <h1>Hello, Rizzo CSS</h1>
+    <p>Vanilla JS — same styles and components as Astro/Svelte. Use the same BEM classes; see <a href="https://rizzo-css.vercel.app/docs/components">docs</a>.</p>
+    <div style="display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; margin-top: var(--spacing-3);">
+      <label for="theme-select">Theme:</label>
+      <select id="theme-select" style="width: auto; min-width: 12rem;">
+        <option value="github-dark-classic">github-dark-classic</option>
+        <option value="github-light">github-light</option>
+        <option value="shades-of-purple">shades-of-purple</option>
+        <option value="sandstorm-classic">sandstorm-classic</option>
+        <option value="rocky-blood-orange">rocky-blood-orange</option>
+        <option value="minimal-dark-neon-yellow">minimal-dark-neon-yellow</option>
+        <option value="hack-the-box">hack-the-box</option>
+        <option value="pink-cat-boo">pink-cat-boo</option>
+        <option value="red-velvet-cupcake">red-velvet-cupcake</option>
+        <option value="orangy-one-light">orangy-one-light</option>
+        <option value="sunflower">sunflower</option>
+        <option value="green-breeze-light">green-breeze-light</option>
+        <option value="cute-pink">cute-pink</option>
+        <option value="semi-light-purple">semi-light-purple</option>
+      </select>
+    </div>
+  </header>
+
+  <section style="margin-bottom: var(--spacing-6);">
+    <h2>Buttons</h2>
+    <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
+      <button type="button" class="btn">Default</button>
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-success">Success</button>
+      <button type="button" class="btn btn-warning">Warning</button>
+      <button type="button" class="btn btn-error">Error</button>
+      <button type="button" class="btn btn-outline">Outline</button>
+    </div>
+  </section>
+
+  <section style="margin-bottom: var(--spacing-6);">
+    <h2>Card &amp; Badge</h2>
+    <div class="card" style="max-width: 20rem;">
+      <div class="card__body">
+        <h3 class="card__title">Card title</h3>
+        <p>Same component styles as Astro and Svelte. Use class names from the <a href="https://rizzo-css.vercel.app/docs/components">component docs</a>.</p>
+        <span class="badge badge--primary">Badge</span>
+      </div>
+    </div>
+  </section>
+
+  <p><small>All themes and component styles are included. Run <code>npx rizzo-css theme</code> to list themes.</small></p>
+
+  <script>
+    (function () {
+      var select = document.getElementById('theme-select');
+      var html = document.documentElement;
+      var key = 'rizzo-theme';
+      function applyTheme(value) {
+        html.setAttribute('data-theme', value);
+        try { localStorage.setItem(key, value); } catch (e) {}
+        select.value = value;
+      }
+      var stored = null;
+      try { stored = localStorage.getItem(key); } catch (e) {}
+      var initial = stored || html.getAttribute('data-theme') || 'github-dark-classic';
+      applyTheme(initial);
+      select.addEventListener('change', function () { applyTheme(select.value); });
+    })();
+  </script>
+</body>
+</html>