rizzo-css 0.0.12 → 0.0.14

package/.env.example

@@ -0,0 +1,12 @@
+# Optional: used only if you add search (e.g. Algolia) to a scaffold-based project
+# Copy to .env in your project and replace with your own values
+
+# Public (client-side) — safe to expose in the browser
+PUBLIC_ALGOLIA_APP_ID=your-algolia-app-id
+PUBLIC_ALGOLIA_SEARCH_KEY=your-search-only-api-key
+PUBLIC_ALGOLIA_INDEX_NAME=your-index-name
+
+# Private (server-side only) — do not commit or expose
+ALGOLIA_APP_ID=your-algolia-app-id
+ALGOLIA_ADMIN_KEY=your-admin-api-key
+ALGOLIA_INDEX_NAME=your-index-name

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mingleusa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -12,7 +12,7 @@ pnpm add rizzo-css
 yarn add rizzo-css
 ```
 
-**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`:
+**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, or Svelte), then **add to existing** or **create new**. For Astro/Svelte: **What to include?** — CSS only, Recommended set, All (25 components), or Pick. Add to existing: you must add the stylesheet `<link>` yourself (CLI prints the exact tag). New: full scaffold. 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
@@ -31,7 +31,17 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
 | **Astro** | `npm install rizzo-css` | `import 'rizzo-css'` in layout or link from `public/` | Copy components from `node_modules/rizzo-css/scaffold/astro/` or use `npx rizzo-css add` with components |
 | **Svelte** | `npm install rizzo-css` | `import 'rizzo-css'` in root layout or link from `static/` | Copy components from `node_modules/rizzo-css/scaffold/svelte/` or use `npx rizzo-css add` with components |
 
-Scaffolds (full starter apps) are in the package: `scaffold/vanilla/`, `scaffold/astro-app/`, `scaffold/svelte-app/`. Use `npx rizzo-css init` and choose “Create new” to generate a project from one of them; each scaffold folder has a README with setup and commands.
+**CSS paths (CLI and scaffolds):**
+
+| Framework | Where the CLI copies CSS | `<link href="...">` in your HTML/layout |
+|-----------|-------------------------|----------------------------------------|
+| **Vanilla** | `css/rizzo.min.css` (project root) | `css/rizzo.min.css` (relative) |
+| **Astro** | `public/css/rizzo.min.css` | `/css/rizzo.min.css` (Astro serves `public/` at `/`) |
+| **Svelte** | `static/css/rizzo.min.css` | `/css/rizzo.min.css` (SvelteKit serves `static/` at `/`) |
+
+With `npx rizzo-css add --path <dir>`, the CLI still suggests the correct href for your framework (e.g. Astro/Svelte get a leading `/` path).
+
+Scaffolds (full starter apps) are in the package: `scaffold/vanilla/`, `scaffold/astro-app/`, `scaffold/svelte-app/`. Use `npx rizzo-css init` and choose **Create new project** to get the full clone (navbar/chrome + component showcase) for the chosen framework; the stylesheet link is already in the layout. **Add to existing** only adds the CSS and optional components (no full scaffold); **you must add the stylesheet `<link>` to your layout yourself** — the CLI prints the exact tag for your framework (e.g. Svelte/Astro: `/css/rizzo.min.css`; Vanilla: `css/rizzo.min.css`). Each scaffold folder has a README with setup and instructions for editing the cloned site.
 
 ## Use
 
@@ -46,7 +56,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.12 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.14 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->
@@ -71,6 +81,10 @@ Theme IDs and full docs: [Theming](https://rizzo-css.vercel.app/docs/theming).
 
 Full documentation: **[rizzo-css.vercel.app](https://rizzo-css.vercel.app)** — Getting Started, Components, Themes, and usage for Vanilla, Astro, and Svelte.
 
+## Package contents
+
+In addition to `dist/`, `bin/`, and `scaffold/`, the package includes **LICENSE** (MIT) and **.env.example** (optional; for projects that add search, e.g. Algolia — copy to `.env` and set your own values).
+
 ## License
 
 MIT

package/bin/rizzo-css.js

@@ -6,15 +6,18 @@ const readline = require('readline');
 
 const COMMANDS = ['init', 'add', 'theme', 'help'];
 const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
-const THEMES = [
+// Dark and light themes (order matches scaffold optgroups and config/themes.ts)
+const DARK_THEMES = [
   'github-dark-classic',
-  'github-light',
   'shades-of-purple',
   'sandstorm-classic',
   'rocky-blood-orange',
   'minimal-dark-neon-yellow',
   'hack-the-box',
   'pink-cat-boo',
+];
+const LIGHT_THEMES = [
+  'github-light',
   'red-velvet-cupcake',
   'orangy-one-light',
   'sunflower',
@@ -22,18 +25,24 @@ const THEMES = [
   'cute-pink',
   'semi-light-purple',
 ];
+const THEMES = [...DARK_THEMES, ...LIGHT_THEMES];
 // Components available for scaffold (must match scaffold/svelte and scaffold/astro)
 const SVELTE_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
-  'Modal', 'Toast', 'Table',
+  'Modal', 'Toast', 'Table', 'ThemeSwitcher',
 ];
 const ASTRO_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
-  'Modal', 'Toast', 'Table',
+  'Modal', 'Toast', 'Table', 'ThemeSwitcher',
+];
+
+// Recommended subset for "Recommended set" option (keeps CLI simple; power users can pick)
+const RECOMMENDED_COMPONENTS = [
+  'Button', 'Badge', 'Card', 'Modal', 'Tabs', 'ThemeSwitcher', 'FormGroup', 'Alert', 'Toast', 'Dropdown',
 ];
 
 // ANSI colors for CLI (framework logo colors)
@@ -336,7 +345,7 @@ Usage:
   npx rizzo-css <command> [options]
 
 Commands:
-  init    Add Rizzo to existing project or scaffold new one (first menu: existing vs new)
+  init    Add Rizzo to existing project or scaffold new one (first: framework, then 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
@@ -360,11 +369,60 @@ Docs: https://rizzo-css.vercel.app
 }
 
 function cmdTheme() {
-  process.stdout.write('\nAvailable themes (set data-theme on <html>):\n\n');
-  THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
+  process.stdout.write('\nDark themes (set data-theme on <html>):\n');
+  DARK_THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
+  process.stdout.write('\nLight themes:\n');
+  LIGHT_THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
   process.stdout.write('\nExample: <html lang="en" data-theme="github-dark-classic">\n\n');
 }
 
+/** Prompt for default dark theme, default light theme, and initial theme. Returns { theme, defaultDark, defaultLight }. */
+async function promptThemes() {
+  const defaultDark = await selectMenu(
+    DARK_THEMES.map((t) => ({ value: t, label: t })),
+    '? Default dark theme (used when system preference is dark)'
+  );
+  const defaultLight = await selectMenu(
+    LIGHT_THEMES.map((t) => ({ value: t, label: t })),
+    '? Default light theme (used when system preference is light)'
+  );
+  const initialChoice = await selectMenu(
+    [
+      { value: 'system', label: 'System (follow OS light/dark)' },
+      { value: defaultDark, label: defaultDark + ' (dark)' },
+      { value: defaultLight, label: defaultLight + ' (light)' },
+    ],
+    '? Initial theme on first load'
+  );
+  const theme = initialChoice;
+  return { theme, defaultDark: DARK_THEMES.includes(defaultDark) ? defaultDark : DARK_THEMES[0], defaultLight: LIGHT_THEMES.includes(defaultLight) ? defaultLight : LIGHT_THEMES[0] };
+}
+
+/** Ask what to include: CSS only, recommended set, all components, or pick. Returns array of component names. Only call when componentList.length > 0. */
+async function promptComponentChoice(componentList, framework) {
+  const recommended = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
+  const choice = await selectMenu(
+    [
+      { value: 'none', label: 'CSS only — no components' },
+      { value: 'recommended', label: 'Recommended set (' + recommended.length + ' components: Button, Badge, Card, Modal, Tabs, ThemeSwitcher, FormGroup, Alert, Toast, Dropdown)' },
+      { value: 'all', label: 'All components (' + componentList.length + ')' },
+      { value: 'pick', label: 'Pick components (choose each one)' },
+    ],
+    '? What to include?'
+  );
+  if (choice === 'none') return [];
+  if (choice === 'recommended') return recommended;
+  if (choice === 'all') return [...componentList];
+  return multiSelectMenu(
+    [
+      { value: SENTINEL_ALL, label: 'Select all components' },
+      { value: SENTINEL_NONE, label: 'Select no components' },
+      ...componentList.map((c) => ({ value: c, label: c })),
+    ],
+    '? Components — Space to toggle, Enter to confirm'
+  );
+}
+
 /** 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';
@@ -386,6 +444,24 @@ function getFrameworkCssPaths(framework) {
   return { targetDir: 'css', linkHref: 'css/rizzo.min.css' };
 }
 
+/**
+ * Browser-visible href for the CSS file. Astro serves public/ at /, SvelteKit serves static/ at /.
+ * Use this when a custom --path is provided so we tell the user the correct <link href="...">.
+ */
+function getLinkHrefForTargetDir(framework, targetDir) {
+  const file = 'rizzo.min.css';
+  if (framework === 'astro' && targetDir) {
+    const path = targetDir.replace(/^public\/?/, '').replace(/\/+$/, '') || 'css';
+    return '/' + (path ? path + '/' : '') + file;
+  }
+  if (framework === 'svelte' && targetDir) {
+    const path = targetDir.replace(/^static\/?/, '').replace(/\/+$/, '') || 'css';
+    return '/' + (path ? path + '/' : '') + file;
+  }
+  const base = targetDir ? targetDir.replace(/\/+$/, '') : 'css';
+  return base ? base + '/' + file : file;
+}
+
 function cmdAdd(argv) {
   const pathIdx = argv.indexOf('--path');
   const customPath = pathIdx !== -1 && argv[pathIdx + 1] ? argv[pathIdx + 1] : null;
@@ -407,7 +483,7 @@ function cmdAdd(argv) {
 
   mkdirSync(join(cwd, targetDir), { recursive: true });
   copyFileSync(cssSource, targetFile);
-  const linkHref = customPath ? customPath + '/rizzo.min.css' : paths.linkHref;
+  const linkHref = customPath ? getLinkHrefForTargetDir(framework, targetDir) : paths.linkHref;
   console.log('\n✓ Rizzo CSS copied to ' + targetFile);
   if (framework === 'svelte') {
     console.log('\nDetected Svelte/SvelteKit. Add to your root layout (e.g. src/app.html):\n');
@@ -541,6 +617,12 @@ function copySvelteComponents(projectDir, selectedNames) {
   if (existsSync(iconsSrc)) {
     copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
   }
+  if (toCopy.includes('ThemeSwitcher')) {
+    const themesSrc = join(scaffoldDir, 'themes.ts');
+    const themeSrc = join(scaffoldDir, 'theme.ts');
+    if (existsSync(themesSrc)) copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
+    if (existsSync(themeSrc)) copyFileSync(themeSrc, join(targetDir, 'theme.ts'));
+  }
   if (exports.length > 0) {
     const indexContent = `/** Rizzo CSS Svelte components — selected via npx rizzo-css init */\n${exports.join('\n')}\n`;
     writeFileSync(join(targetDir, 'index.ts'), indexContent, 'utf8');
@@ -576,54 +658,65 @@ function copyAstroComponents(projectDir, selectedNames) {
   if (existsSync(iconsSrc)) {
     copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
   }
+  if (toCopy.includes('ThemeSwitcher')) {
+    const themesSrc = join(scaffoldDir, 'themes.ts');
+    if (existsSync(themesSrc)) {
+      copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
+    }
+  }
   if (count > 0) {
     console.log('\n  ✓ ' + count + ' Astro components + icons copied to ' + targetDir);
     console.log('  Import in your pages: import Button from \'../components/rizzo/Button.astro\';\n');
   }
 }
 
-/** Add Rizzo CSS (and optional components) to an existing project in cwd. */
-async function runAddToExisting() {
+/** Add Rizzo CSS (and optional components) to an existing project in cwd. frameworkOverride: when set (from init), skip framework prompt. */
+async function runAddToExisting(frameworkOverride) {
   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 defaultTheme = await selectMenu(
-    THEMES.map((t) => ({ value: t, label: t })),
-    '? Default theme (all 14 themes are included in the CSS; this sets the initial data-theme)'
-  );
-  const theme = THEMES.includes(defaultTheme) ? defaultTheme : THEMES[0];
+  let framework = frameworkOverride;
+  if (framework == null) {
+    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)';
+    }
+    framework = await selectMenu(frameworkOptions, frameworkPrompt);
+  }
 
-  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(
+  const selectedComponents = componentList.length > 0
+    ? await promptComponentChoice(componentList, framework)
+    : [];
+
+  let theme, defaultDark, defaultLight;
+  const wantsThemeSwitcher = selectedComponents.includes('ThemeSwitcher');
+  if (wantsThemeSwitcher) {
+    const setDefaults = await selectMenu(
       [
-        { value: 'none', label: 'None' },
-        { value: 'pick', label: 'Yes, pick ' + includeLabel + ' components' },
+        { value: true, label: 'Yes — choose default dark, default light, and initial theme' },
+        { value: false, label: 'No — use defaults (github-dark-classic / github-light)' },
       ],
-      '? Include ' + includeLabel + ' components?'
+      '? Set default themes for ThemeSwitcher? (same as create-new flow)'
     );
-    if (includeChoice === 'pick') {
-      selectedComponents = await multiSelectMenu(
-        [
-          { value: SENTINEL_ALL, label: 'Select all components' },
-          { value: SENTINEL_NONE, label: 'Select no components' },
-          ...componentList.map((c) => ({ value: c, label: c })),
-        ],
-        '? Components — pick individuals (Space to toggle) or choose Select all/none below. Enter=confirm'
-      );
+    if (setDefaults) {
+      const out = await promptThemes();
+      theme = out.theme;
+      defaultDark = out.defaultDark;
+      defaultLight = out.defaultLight;
+    } else {
+      theme = DARK_THEMES[0];
+      defaultDark = DARK_THEMES[0];
+      defaultLight = LIGHT_THEMES[0];
     }
+  } else {
+    theme = DARK_THEMES[0];
+    defaultDark = DARK_THEMES[0];
+    defaultLight = LIGHT_THEMES[0];
   }
 
   const cssSource = getCssPath();
@@ -648,39 +741,52 @@ async function runAddToExisting() {
   const linkHref = paths.linkHref;
   console.log('\n✓ Rizzo CSS added to your existing project');
   console.log('  - ' + cssTarget);
+  console.log('\nYou must add the stylesheet link yourself — it is not added automatically.');
   if (framework === 'svelte') {
-    console.log('\nAdd to your root layout (e.g. src/app.html):');
+    console.log('\nIn your root layout (e.g. src/app.html), add:');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
     console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    console.log('  For theme "system": default dark ' + defaultDark + ', default light ' + defaultLight);
     if (selectedComponents.length > 0) {
       console.log('  Components are in src/lib/rizzo — import from \'$lib/rizzo\'.');
     }
   } else if (framework === 'astro') {
-    console.log('\nAdd to your layout (e.g. src/layouts/Layout.astro):');
+    console.log('\nIn your layout (e.g. src/layouts/Layout.astro), add:');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
     console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    console.log('  For theme "system": default dark ' + defaultDark + ', default light ' + defaultLight);
     if (selectedComponents.length > 0) {
       console.log('  Components are in src/components/rizzo — import from there.');
     }
   } else {
-    console.log('\nAdd to your HTML or layout:');
+    console.log('\nIn your HTML or layout, add:');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
     console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    console.log('  For theme "system": default dark ' + defaultDark + ', default light ' + defaultLight);
   }
   console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
 
 async function cmdInit() {
+  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 — all get the same CSS and component styles'
+  );
+
   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?'
+    '? Add to existing project or create a new one?'
   );
 
   if (initMode === 'existing') {
-    await runAddToExisting();
+    await runAddToExisting(framework);
     return;
   }
 
@@ -693,43 +799,12 @@ async function cmdInit() {
   );
   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 defaultTheme = await selectMenu(
-    THEMES.map((t) => ({ value: t, label: t })),
-    '? Default theme (all 14 themes are included in the CSS; this sets the initial data-theme)'
-  );
-  const theme = THEMES.includes(defaultTheme) ? defaultTheme : THEMES[0];
+  const { theme, defaultDark, defaultLight } = await promptThemes();
 
-  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(
-        [
-          { value: SENTINEL_ALL, label: 'Select all components' },
-          { value: SENTINEL_NONE, label: 'Select no components' },
-          ...componentList.map((c) => ({ value: c, label: c })),
-        ],
-        '? Components — pick individuals (Space to toggle) or choose Select all/none below. Enter=confirm'
-      );
-    }
-  }
+  const selectedComponents = componentList.length > 0
+    ? await promptComponentChoice(componentList, framework)
+    : [];
 
   const projectDir = name ? join(process.cwd(), name) : process.cwd();
   const cssSource = getCssPath();
@@ -739,12 +814,14 @@ async function cmdInit() {
     process.exit(1);
   }
 
-  const themeComment = '\n  <!-- Default theme: ' + theme + ' (all 14 themes included in CSS) -->';
+  const themeComment = '\n  <!-- Initial: ' + theme + '; dark: ' + defaultDark + '; light: ' + defaultLight + ' (all 14 themes in CSS) -->';
   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,
+    '{{DEFAULT_DARK}}': defaultDark,
+    '{{DEFAULT_LIGHT}}': defaultLight,
     '{{THEME_LIST_COMMENT}}': themeComment,
     '{{TITLE}}': name || 'App',
     '{{PROJECT_NAME}}': projectNamePkg,
@@ -798,6 +875,8 @@ async function cmdInit() {
       let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
       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);
@@ -828,7 +907,9 @@ async function cmdInit() {
       const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
       if (existsSync(vanillaJs)) {
         mkdirSync(join(projectDir, 'js'), { recursive: true });
-        copyFileSync(vanillaJs, join(projectDir, 'js', 'main.js'));
+        let mainJs = readFileSync(vanillaJs, 'utf8');
+        mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
+        writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
       }
     }
     if (framework === 'svelte' && selectedComponents.length > 0) {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "scripts": {
-    "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js"
+    "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-astro-scaffold.js && node scripts/prepare-vanilla-scaffold.js && node scripts/prepare-svelte-scaffold.js"
   },
   "description": "A modern CSS design system with semantic theming, 14 themes, and accessible components (BEM). Use with Astro, Svelte, or any framework.",
   "style": "dist/rizzo.min.css",
@@ -22,6 +22,8 @@
   "files": [
     "dist",
     "README.md",
+    "LICENSE",
+    ".env.example",
     "bin",
     "scaffold"
   ],
@@ -41,4 +43,4 @@
   "homepage": "https://rizzo-css.vercel.app",
   "license": "MIT",
   "author": "mingleusa"
-}
+}