rizzo-css 0.0.13 → 0.0.14

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 **framework** (Vanilla, Astro, or Svelte), then **add to existing** or **create new**. Existing: themes, optional components. New: full scaffold (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
@@ -41,7 +41,7 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
 
 With `npx rizzo-css add --path <dir>`, the CLI still suggests the correct href for your framework (e.g. Astro/Svelte get a leading `/` path).
 
-Scaffolds (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. **Add to existing** only adds the CSS and optional components (no full scaffold). Each scaffold folder has a README with setup and instructions for editing the cloned site.
+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
 
@@ -56,7 +56,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.13 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 -->

package/bin/rizzo-css.js

@@ -31,13 +31,18 @@ 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)
@@ -393,6 +398,31 @@ async function promptThemes() {
   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';
@@ -587,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');
@@ -622,6 +658,12 @@ 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');
@@ -646,29 +688,35 @@ async function runAddToExisting(frameworkOverride) {
     framework = await selectMenu(frameworkOptions, frameworkPrompt);
   }
 
-  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(
+  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();
@@ -693,8 +741,9 @@ async function runAddToExisting(frameworkOverride) {
   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);
@@ -702,7 +751,7 @@ async function runAddToExisting(frameworkOverride) {
       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);
@@ -710,7 +759,7 @@ async function runAddToExisting(frameworkOverride) {
       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);
@@ -752,28 +801,10 @@ async function cmdInit() {
 
   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();

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "scripts": {
-    "prepublishOnly": "cd ../.. && pnpm 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"
+    "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",