rizzo-css 0.0.24 → 0.0.26

package/README.md

@@ -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.24 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.26 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -450,7 +450,7 @@ function selectMenu(options, title) {
     });
   }
 
-  const HINT = '  \u2191\u2193 move \u00b7 Enter select \u00b7 1-9 pick';
+  const HINT = '  \u2191\u2193 move \u00b7 Enter select';
   return new Promise((resolve) => {
     let index = 0;
     const lineCount = (title ? 1 : 0) + items.length + 2; // +1 blank +1 hint
@@ -471,16 +471,6 @@ function selectMenu(options, title) {
       process.stdout.write('\u001b[?25h');
     };
 
-    const selectByNumber = (num) => {
-      const n = num === 0 ? 10 : num; // 0 = 10th item
-      const idx = n >= 1 && n <= items.length ? n - 1 : index;
-      process.stdin.setRawMode(false);
-      process.stdin.removeListener('data', onData);
-      process.stdin.pause();
-      process.stdout.write('\n');
-      resolve(items[idx].value);
-    };
-
     process.stdin.setRawMode(true);
     process.stdin.resume();
     process.stdin.setEncoding('utf8');
@@ -503,16 +493,6 @@ function selectMenu(options, title) {
         resolve(items[index].value);
         return;
       }
-      if (ch >= '1' && ch <= '9') {
-        buf = '';
-        selectByNumber(parseInt(ch, 10));
-        return;
-      }
-      if (ch === '0' && items.length >= 10) {
-        buf = '';
-        selectByNumber(10);
-        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'));
@@ -604,7 +584,7 @@ function multiSelectMenu(options, title, initialSelected) {
         if (initialSet.has(items[i].value)) selected.add(i);
       }
     }
-    const HINT = '  \u2191\u2193 move \u00b7 Space toggle \u00b7 a all \u00b7 n none \u00b7 Enter confirm';
+    const HINT = '  \u2191\u2193 move \u00b7 Space toggle \u00b7 a all \u00b7 n none \u00b7 1-9 toggle (0=10th) \u00b7 Enter confirm';
     const lineCount = (title ? 1 : 0) + items.length + 2; // +1 blank +1 hint
     const realStart = withSentinels ? 2 : 0;
 
@@ -776,8 +756,8 @@ Package managers:
   Supported: npm, pnpm, yarn, bun. Detection: lockfiles (pnpm-lock.yaml, yarn.lock, bun.lockb, package-lock.json) or package.json "packageManager"/"devEngines.packageManager". Use --package-manager to override.
 
 Interactive prompts (when no --yes/flag provided):
-  Single-choice: ↑/↓ move, Enter select, 1-9 pick by number (0 = 10th).
-  Multi-choice:  ↑/↓ move, Space toggle, a = all, n = none, Enter confirm, 1-9 toggle by number.
+  Single-choice (framework, template, etc.): ↑/↓ move, Enter select.
+  Multi-choice (component selection only): ↑/↓ move, Space toggle, a = all, n = none, Enter confirm, 1-9 toggle by number (0 = 10th).
   Ctrl+C to exit.
 
 Config:
@@ -1507,6 +1487,22 @@ async function cmdInit(argv) {
     logAddedDeps(selectedComponents, componentsToCopy, framework);
   }
 
+  // Astro layout: inject Navbar and Settings when those components are selected so the settings menu works.
+  if ((framework === 'astro') && (useHandpickAstro || useAstroBase)) {
+    const hasNavbar = componentsToCopy.includes('Navbar');
+    const hasSettings = componentsToCopy.includes('Settings');
+    const layoutImports = [];
+    if (hasNavbar) layoutImports.push("import Navbar from '../components/rizzo/Navbar.astro';");
+    if (hasSettings) layoutImports.push("import Settings from '../components/rizzo/Settings.astro';");
+    replacements['{{RIZZO_LAYOUT_IMPORTS}}'] = layoutImports.length ? '\n' + layoutImports.join('\n') + '\n' : '\n';
+    replacements['{{RIZZO_LAYOUT_BODY_TOP}}'] = hasNavbar ? '\n    <Navbar />' : '';
+    replacements['{{RIZZO_LAYOUT_BODY_BOTTOM}}'] = hasSettings ? '\n    <Settings />' : '';
+  } else {
+    replacements['{{RIZZO_LAYOUT_IMPORTS}}'] = '\n';
+    replacements['{{RIZZO_LAYOUT_BODY_TOP}}'] = '';
+    replacements['{{RIZZO_LAYOUT_BODY_BOTTOM}}'] = '';
+  }
+
   let cssTarget;
   let indexPath;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },
@@ -26,6 +26,7 @@
     ".env.example",
     "bin",
     "scaffold/astro",
+    "scaffold/utils",
     "scaffold/svelte",
     "scaffold/vanilla",
     "scaffold/astro-minimal",

package/scaffold/astro/Settings.astro

@@ -140,7 +140,7 @@ const { open = false } = Astro.props;
 </div>
 
 <script>
-  (function initSettings() {
+  function initSettings() {
     const settings = document.querySelector('[data-settings]');
     if (!settings) return;
 
@@ -378,5 +378,10 @@ const { open = false } = Astro.props;
 
     // Expose open function globally
     window.openSettings = openSettings;
-  })();
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSettings);
+  } else {
+    initSettings();
+  }
 </script>

package/scaffold/astro/ThemeSwitcher.astro

@@ -183,7 +183,7 @@ const InitialIcon = initialTheme ? initialTheme.icon : null;
     THEME_SYSTEM,
   } from '../utils/theme';
 
-  (function initThemeSwitcher() {
+  function initThemeSwitcher() {
     const getIconSVG = (themeValue: string) => {
       const svgMap: Record<string, string> = {
         'system': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>',
@@ -500,5 +500,10 @@ const InitialIcon = initialTheme ? initialTheme.icon : null;
         updateAllSwitchers();
       }
     });
-  })();
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initThemeSwitcher);
+  } else {
+    initThemeSwitcher();
+  }
 </script>

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

@@ -4,6 +4,7 @@
 const DATA_THEME = '{{DATA_THEME}}';
 /** @type {{ title?: string }} */
 const { title = '{{TITLE}}' } = Astro.props;
+{{RIZZO_LAYOUT_IMPORTS}}
 ---
 <!doctype html>
 <html lang="en" data-theme={DATA_THEME}>
@@ -19,8 +20,10 @@ const { title = '{{TITLE}}' } = Astro.props;
   </head>
   <body>
     <a href="#main-content" class="skip-link">Skip to main content</a>
+    {{RIZZO_LAYOUT_BODY_TOP}}
     <main id="main-content">
       <slot />
     </main>
+    {{RIZZO_LAYOUT_BODY_BOTTOM}}
   </body>
 </html>

package/scaffold/utils/theme.ts

@@ -0,0 +1,65 @@
+/**
+ * Theme utilities — apply theme, resolve system preference, get/set stored theme.
+ * Used by ThemeSwitcher, Layout (flash prevention), and any consumer that sets data-theme.
+ */
+import { ALL_THEMES } from '../astro/themes';
+
+export const THEME_SYSTEM = 'system';
+export const DEFAULT_THEME_DARK = 'github-dark-classic';
+export const DEFAULT_THEME_LIGHT = 'github-light';
+
+/** Current theme id from the DOM (data-theme on html). */
+export function getCurrentTheme(): string {
+  if (typeof document === 'undefined') return DEFAULT_THEME_DARK;
+  return document.documentElement.getAttribute('data-theme') || DEFAULT_THEME_DARK;
+}
+
+/** Stored theme from localStorage (may be 'system' or a theme id). */
+export function getStoredTheme(): string {
+  if (typeof localStorage === 'undefined') return getCurrentTheme();
+  return localStorage.getItem('theme') || getCurrentTheme();
+}
+
+/** Resolve system preference to a concrete theme id. */
+export function resolveSystemTheme(): string {
+  if (typeof window === 'undefined') return DEFAULT_THEME_DARK;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? DEFAULT_THEME_DARK : DEFAULT_THEME_LIGHT;
+}
+
+/** Resolve stored theme to the effective theme id (for 'system', returns resolved dark/light). */
+export function getResolvedTheme(): string {
+  const stored = getStoredTheme();
+  if (!stored || stored === THEME_SYSTEM) return resolveSystemTheme();
+  return stored;
+}
+
+/** Get { value, label } for a theme (for UI display). */
+export function getThemeInfo(themeValue: string): { value: string; label: string } {
+  if (themeValue === THEME_SYSTEM) return { value: THEME_SYSTEM, label: 'System' };
+  const entry = ALL_THEMES.find((t) => t.value === themeValue);
+  return entry ? { value: entry.value, label: entry.label } : { value: themeValue, label: 'Theme' };
+}
+
+/** Get display label for a theme value (from config). */
+export function getThemeLabel(themeValue: string): string {
+  return getThemeInfo(themeValue).label;
+}
+
+/** Apply a theme: set data-theme and persist to localStorage. Use for ThemeSwitcher and programmatic changes. */
+export function applyTheme(themeValue: string): void {
+  if (typeof document === 'undefined' || typeof localStorage === 'undefined') return;
+  let effective: string;
+  if (themeValue === THEME_SYSTEM) {
+    effective = resolveSystemTheme();
+    document.documentElement.setAttribute('data-theme', effective);
+    localStorage.setItem('theme', THEME_SYSTEM);
+  } else {
+    document.documentElement.setAttribute('data-theme', themeValue);
+    localStorage.setItem('theme', themeValue);
+    effective = themeValue;
+  }
+  // Allow listeners to sync UI (e.g. ThemeSwitcher)
+  try {
+    window.dispatchEvent(new CustomEvent('rizzo-theme-change', { detail: { themeValue, effective } }));
+  } catch (_) {}
+}

package/scaffold/vanilla/README-RIZZO.md

@@ -13,7 +13,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.24`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.26`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/copy-to-clipboard.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/icons.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/index.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -290,6 +298,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/modal.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/navbar.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/pagination.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/progress-bar.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/search.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/settings.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/theme-switcher.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -265,6 +273,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -207,6 +207,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -277,6 +285,14 @@
 
 
 
+
+
+
+
+
+
+
+