rizzo-css 0.0.7 → 0.0.9

package/README.md

@@ -41,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). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files for convenience.
+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. The **Vanilla** scaffold includes a full Settings panel and toast; **Astro** and **Svelte** scaffold layouts include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -154,13 +154,28 @@ function selectMenu(options, title) {
   });
 }
 
-/** Multi-select menu: circles ○/●, Space toggles, Enter confirms. Returns array of selected values. */
+/** Index of first "real" option when using all/none sentinels (0=Select all, 1=Select none, 2+=real). */
+const SENTINEL_ALL = '__all__';
+const SENTINEL_NONE = '__none__';
+
+function hasAllNoneSentinels(items) {
+  return items.length >= 2 && items[0].value === SENTINEL_ALL && items[1].value === SENTINEL_NONE;
+}
+
+function getRealValues(items) {
+  if (hasAllNoneSentinels(items)) return items.slice(2).map((i) => i.value);
+  return items.map((i) => i.value);
+}
+
+/** Multi-select menu: circles ○/●, Space toggles, Enter confirms. Optional first two options: Select all / Select none (value __all__ / __none__). 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;
+  const withSentinels = hasAllNoneSentinels(items);
+  const realValues = getRealValues(items);
 
   if (!isTty) {
-    console.log('\n' + (title || 'Choose (space to toggle, enter when done') + ':');
+    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) => {
@@ -168,7 +183,15 @@ function multiSelectMenu(options, title) {
         rl.close();
         const s = (answer || '').trim().toLowerCase();
         if (s === 'all' || s === 'a') {
-          resolve(items.map((i) => i.value));
+          resolve(realValues);
+          return;
+        }
+        if (withSentinels && s === '1') {
+          resolve(realValues);
+          return;
+        }
+        if (withSentinels && (s === '2' || s === 'none' || s === 'n')) {
+          resolve([]);
           return;
         }
         const parts = s.split(/[\s,]+/).filter(Boolean);
@@ -177,7 +200,19 @@ function multiSelectMenu(options, title) {
           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));
+        if (withSentinels && indices.has(0)) {
+          resolve(realValues);
+          return;
+        }
+        if (withSentinels && indices.has(1)) {
+          resolve([]);
+          return;
+        }
+        const result = Array.from(indices)
+          .sort((a, b) => a - b)
+          .filter((i) => !withSentinels || (i !== 0 && i !== 1))
+          .map((i) => items[i].value);
+        resolve(result);
       });
     });
   }
@@ -186,11 +221,30 @@ function multiSelectMenu(options, title) {
     let index = 0;
     const selected = new Set();
     const lineCount = (title ? 1 : 0) + items.length + 1;
+    const realStart = withSentinels ? 2 : 0;
+
+    const finish = () => {
+      if (withSentinels && index === 0) {
+        resolve(realValues);
+        return;
+      }
+      if (withSentinels && index === 1) {
+        resolve([]);
+        return;
+      }
+      resolve(
+        Array.from(selected)
+          .filter((i) => i >= realStart)
+          .sort((a, b) => a - b)
+          .map((i) => items[i].value)
+      );
+    };
 
     const render = (first) => {
       const lines = (title ? [title] : []).concat(
         items.map((item, i) => {
-          const circle = selected.has(i) ? CIRCLE_FILLED : CIRCLE_EMPTY;
+          const isAction = withSentinels && (i === 0 || i === 1);
+          const circle = isAction ? CIRCLE_EMPTY : selected.has(i) ? CIRCLE_FILLED : CIRCLE_EMPTY;
           const prefix = i === index ? C.cyan + '>' + C.reset + ' ' : '  ';
           return prefix + circle + formatLabel(item);
         })
@@ -222,25 +276,36 @@ function multiSelectMenu(options, title) {
         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));
+        if (withSentinels && (index === 0 || index === 1)) {
+          if (index === 0) resolve(realValues);
+          else resolve([]);
+        } else {
+          finish();
+        }
         return;
       }
       if (ch === ' ') {
         buf = '';
-        if (selected.has(index)) selected.delete(index);
-        else selected.add(index);
+        if (withSentinels && index === 0) {
+          for (let i = realStart; i < items.length; i++) selected.add(i);
+        } else if (withSentinels && index === 1) {
+          for (let i = realStart; i < items.length; i++) selected.delete(i);
+        } else {
+          if (selected.has(index)) selected.delete(index);
+          else selected.add(index);
+        }
         render(false);
         return;
       }
       if (ch === 'a' || ch === 'A') {
         buf = '';
-        for (let i = 0; i < items.length; i++) selected.add(i);
+        for (let i = realStart; i < items.length; i++) selected.add(i);
         render(false);
         return;
       }
       if (ch === 'n' || ch === 'N') {
         buf = '';
-        selected.clear();
+        for (let i = realStart; i < items.length; i++) selected.delete(i);
         render(false);
         return;
       }
@@ -532,12 +597,11 @@ async function runAddToExisting() {
   }
   const framework = await selectMenu(frameworkOptions, frameworkPrompt);
 
-  const selectedThemes = await multiSelectMenu(
+  const defaultTheme = await selectMenu(
     THEMES.map((t) => ({ value: t, label: t })),
-    '? Themes (Space to toggle, Enter to confirm) — we\'ll suggest the first as default data-theme'
+    '? Default theme (all 14 themes are included in the CSS; this sets the initial data-theme)'
   );
-  const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
-  const suggestedTheme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
+  const theme = THEMES.includes(defaultTheme) ? defaultTheme : THEMES[0];
 
   let selectedComponents = [];
   const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
@@ -552,8 +616,12 @@ async function runAddToExisting() {
     );
     if (includeChoice === 'pick') {
       selectedComponents = await multiSelectMenu(
-        componentList.map((c) => ({ value: c, label: c })),
-        '? Components (Space to toggle, Enter to confirm)'
+        [
+          { 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'
       );
     }
   }
@@ -583,21 +651,21 @@ async function runAddToExisting() {
   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)');
+    console.log('\nSet a theme on <html>: data-theme="' + theme + '" (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)');
+    console.log('\nSet a theme on <html>: data-theme="' + theme + '" (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('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
   }
   console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
@@ -634,12 +702,11 @@ async function cmdInit() {
     '? Framework (arrows, Enter to select) — all get the same CSS and component styles'
   );
 
-  const selectedThemes = await multiSelectMenu(
+  const defaultTheme = await selectMenu(
     THEMES.map((t) => ({ value: t, label: t })),
-    '? Themes (Space to toggle, Enter to confirm)'
+    '? Default theme (all 14 themes are included in the CSS; this sets the initial data-theme)'
   );
-  const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
-  const theme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
+  const theme = THEMES.includes(defaultTheme) ? defaultTheme : THEMES[0];
 
   let selectedComponents = [];
   const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
@@ -654,8 +721,12 @@ async function cmdInit() {
     );
     if (includeChoice === 'pick') {
       selectedComponents = await multiSelectMenu(
-        componentList.map((c) => ({ value: c, label: c })),
-        '? Components (Space to toggle, Enter to confirm)'
+        [
+          { 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'
       );
     }
   }
@@ -668,9 +739,7 @@ async function cmdInit() {
     process.exit(1);
   }
 
-  const themeComment = themeList.length > 0
-    ? '\n  <!-- Selected themes: ' + themeList.join(', ') + ' -->'
-    : '';
+  const themeComment = '\n  <!-- Default theme: ' + theme + ' (all 14 themes included in CSS) -->';
   const projectNamePkg = name
     ? name.replace(/\s+/g, '-').toLowerCase()
     : (framework === 'astro' ? 'my-astro-app' : framework === 'svelte' ? 'my-svelte-app' : 'my-app');
@@ -765,13 +834,14 @@ async function cmdInit() {
     console.log('  - Vanilla JS: same CSS and component styles; index includes theme switcher and sample components.');
     console.log('  - Icons: ' + join(projectDir, 'icons') + ' (SVG files)');
   }
+  const runPrefix = name ? 'cd ' + name + ' && ' : '';
   if (framework === 'astro' && existsSync(astroAppDir)) {
-    console.log('  - Default Astro project with Rizzo CSS. Run: pnpm install && pnpm dev');
+    console.log('  - Default Astro project with Rizzo CSS. Run: ' + runPrefix + 'pnpm install && pnpm dev');
     console.log('  - Icons: src/components/rizzo/icons/ (Astro components)');
   }
   if (framework === 'svelte' && existsSync(svelteAppDir)) {
-    console.log('  - Default SvelteKit project with Rizzo CSS. Run: pnpm install && pnpm dev');
-    console.log('  - Icons: src/lib/rizzo/icons/ (Svelte components)');
+    console.log('  - Default SvelteKit project with Rizzo CSS. Run: ' + runPrefix + 'pnpm install && pnpm dev');
+    console.log('  - Install dependencies first (required before dev). Icons: src/lib/rizzo/icons/ (Svelte components)');
   }
   if ((framework === 'svelte' || framework === 'astro') && !existsSync(framework === 'astro' ? astroAppDir : svelteAppDir)) {
     const fw = framework === 'svelte' ? 'Svelte' : 'Astro';