rizzo-css 0.0.22 → 0.0.23

package/README.md

@@ -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 in the package: `scaffold/vanilla/` (Full or Manual), `scaffold/astro-minimal/`, `scaffold/svelte-minimal/`, plus `scaffold/astro/` and `scaffold/svelte/` (component templates for hand-pick). Use `npx rizzo-css init` and choose **Create new project** to get a **Full** or **Manual** scaffold; the stylesheet link is in the layout. **Add to existing** (or `add` command) drops in CSS + hand-pick components; **you must add the stylesheet `<link>` yourself** — the CLI prints the exact tag. Every scaffold includes RIZZO-LICENSE and RIZZO-README.md (does not overwrite your project LICENSE/README); Astro/Svelte minimal include package.json and .env.example.
+Scaffolds in the package: `scaffold/vanilla/` (Full or Manual), `scaffold/astro-minimal/`, `scaffold/svelte-minimal/`, plus `scaffold/astro/` and `scaffold/svelte/` (component templates for hand-pick). Use `npx rizzo-css init` and choose **Create new project** to get a **Full** or **Manual** scaffold; the stylesheet link is in the layout. **Add to existing** (or `add` command) drops in CSS + hand-pick components; **you must add the stylesheet `<link>` yourself** — the CLI prints the exact tag. Every scaffold includes LICENSE-RIZZO and README-RIZZO.md (does not overwrite your project LICENSE/README); Astro/Svelte minimal include package.json and .env.example.
 
 ## 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.22 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.23 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->
@@ -65,7 +65,7 @@ import 'rizzo-css';
 
 Short URLs also work: `https://unpkg.com/rizzo-css@latest` and `https://cdn.jsdelivr.net/npm/rizzo-css@latest` (CDNs serve the default file from package.json). To verify after publish: open the URL in a browser or run `curl -I https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css` and expect `200 OK`.
 
-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 when you hand-pick. Each scaffold has RIZZO-README.md; every install includes RIZZO-LICENSE. The **Navbar** component in the scaffold includes the default Cat logo in the brand link (optional `logo` prop for a custom image). The **Vanilla** Full includes a Settings panel and toast; **Astro** and **Svelte** Full scaffolds include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
+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 when you hand-pick. Each scaffold has README-RIZZO.md; every install includes LICENSE-RIZZO. The **Navbar** component in the scaffold includes the default Cat logo in the brand link (optional `logo` prop for a custom image). The **Vanilla** Full includes a Settings panel and toast; **Astro** and **Svelte** Full scaffolds include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -7,9 +7,9 @@ const readline = require('readline');
 
 const RIZZO_CONFIG_FILE = 'rizzo-css.json';
 /** Scaffold README filename; avoids overwriting an existing project README.md. */
-const SCAFFOLD_README_FILENAME = 'RIZZO-README.md';
+const SCAFFOLD_README_FILENAME = 'README-RIZZO.md';
 /** Scaffold license filename; avoids overwriting an existing project LICENSE. */
-const SCAFFOLD_LICENSE_FILENAME = 'RIZZO-LICENSE';
+const SCAFFOLD_LICENSE_FILENAME = 'LICENSE-RIZZO';
 
 const COMMANDS = ['init', 'add', 'theme', 'help'];
 const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
@@ -185,7 +185,30 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
   }
 }
 
-/** Copy the package LICENSE into the project dir as RIZZO-LICENSE so we do not overwrite an existing LICENSE. */
+/** SvelteKit only: copy rizzo.min.css to static/css with font URLs rewritten to /assets/fonts/, and copy fonts to static/assets/fonts. */
+function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
+  const cssDir = join(projectDir, 'static', 'css');
+  const cssTarget = join(cssDir, 'rizzo.min.css');
+  const fontsDest = join(projectDir, 'static', 'assets', 'fonts');
+  mkdirSync(cssDir, { recursive: true });
+  mkdirSync(fontsDest, { recursive: true });
+  copyFileSync(cssSource, cssTarget);
+  let css = readFileSync(cssTarget, 'utf8');
+  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
+  writeFileSync(cssTarget, css, 'utf8');
+  const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
+  if (existsSync(fontsSrc)) {
+    const entries = readdirSync(fontsSrc, { withFileTypes: true });
+    for (const e of entries) {
+      const srcPath = join(fontsSrc, e.name);
+      const destPath = join(fontsDest, e.name);
+      if (e.isDirectory()) copyDirRecursive(srcPath, destPath);
+      else copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+/** Copy the package LICENSE into the project dir as LICENSE-RIZZO so we do not overwrite an existing LICENSE. */
 function copyPackageLicense(projectDir) {
   const licensePath = join(getPackageRoot(), 'LICENSE');
   if (existsSync(licensePath)) {
@@ -208,11 +231,17 @@ function readRizzoConfig(cwd) {
   } catch (_) { return null; }
 }
 
-/** Write rizzo-css.json to cwd. config: { targetDir?, framework?, packageManager? }. */
+/** Write rizzo-css.json to cwd. config: { targetDir?, framework?, packageManager? }. Preserves unknown keys from existing file. */
 function writeRizzoConfig(cwd, config) {
   if (!cwd || !existsSync(cwd)) return;
   const configPath = join(cwd, RIZZO_CONFIG_FILE);
-  const obj = {};
+  let obj = {};
+  if (existsSync(configPath)) {
+    try {
+      const raw = JSON.parse(readFileSync(configPath, 'utf8'));
+      if (raw && typeof raw === 'object') obj = { ...raw };
+    } catch (_) { /* ignore */ }
+  }
   if (config.targetDir != null) obj.targetDir = config.targetDir;
   if (config.framework != null) obj.framework = config.framework;
   if (config.packageManager != null) obj.packageManager = config.packageManager;
@@ -611,6 +640,8 @@ function printHelp() {
   console.log(`
 rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte)
 
+Available commands: init, add, theme, help
+
 Usage (use your package manager):
   npx rizzo-css <command> [options]
   pnpm dlx rizzo-css <command> [options]
@@ -757,12 +788,12 @@ function detectFramework(cwd) {
 /**
  * Framework-specific paths for CSS and static assets. Use these so fonts, sounds, images
  * go in the right place per framework (Astro: public/, SvelteKit: static/, Vanilla: project root).
- * - targetDir: where rizzo.min.css is copied. Fonts: for Astro, public/assets/fonts (CLI rewrites URLs); for Svelte/Vanilla, targetDir/fonts so ./fonts/ resolves.
- * - assetsRoot: root for static assets (Astro: public; use public/assets/fonts, public/assets/sounds).
+ * - targetDir: where rizzo.min.css is copied. Fonts: Astro public/assets/fonts, Svelte static/assets/fonts (CLI rewrites URLs); Vanilla targetDir/fonts.
+ * - assetsRoot: root for static assets (Astro: public; Svelte: static; Vanilla: '').
  */
 function getFrameworkCssPaths(framework) {
   if (framework === 'svelte') {
-    return { targetDir: 'static/css', linkHref: '/css/rizzo.min.css', fontsDir: 'static/css/fonts', assetsRoot: 'static' };
+    return { targetDir: 'static/css', linkHref: '/css/rizzo.min.css', fontsDir: 'static/assets/fonts', assetsRoot: 'static' };
   }
   if (framework === 'astro') {
     return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css', fontsDir: 'public/assets/fonts', assetsRoot: 'public' };
@@ -1127,6 +1158,9 @@ async function runAddToExisting(frameworkOverride, options) {
   if (framework === 'astro') {
     copyRizzoCssAndFontsForAstro(cwd, cssSource);
     cssTarget = join(cwd, 'public', 'css', 'rizzo.min.css');
+  } else if (framework === 'svelte') {
+    copyRizzoCssAndFontsForSvelte(cwd, cssSource);
+    cssTarget = join(cwd, 'static', 'css', 'rizzo.min.css');
   } else {
     const targetDir = join(cwd, targetDirRaw);
     cssTarget = join(targetDir, 'rizzo.min.css');
@@ -1146,7 +1180,7 @@ async function runAddToExisting(frameworkOverride, options) {
     copyVanillaComponents(cwd, selectedComponents, vanillaRepl);
   }
 
-  const linkHref = (options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref;
+  const linkHref = (framework === 'astro' || framework === 'svelte') ? paths.linkHref : ((options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref);
   const pmFromOption = options && options.packageManager && VALID_PACKAGE_MANAGERS.includes(options.packageManager);
   const pm = pmFromOption
     ? getPackageManagerCommands({ agent: options.packageManager, command: options.packageManager })
@@ -1154,7 +1188,8 @@ async function runAddToExisting(frameworkOverride, options) {
       ? getPackageManagerCommands({ agent: config.packageManager, command: config.packageManager })
       : resolvePackageManager(cwd);
   const cliExample = pm.dlx('rizzo-css theme');
-  writeRizzoConfig(cwd, { targetDir: targetDirRaw, framework, packageManager: pm.agent });
+  const configTargetDir = framework === 'astro' ? 'public/css' : framework === 'svelte' ? 'static/css' : targetDirRaw;
+  writeRizzoConfig(cwd, { targetDir: configTargetDir, framework, packageManager: pm.agent });
   console.log('\n✓ Rizzo CSS added to your existing project');
   console.log('  - ' + cssTarget);
   console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
@@ -1363,10 +1398,8 @@ async function cmdInit(argv) {
   } else if (useHandpickSvelte) {
     mkdirSync(projectDir, { recursive: true });
     copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
-    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1378,10 +1411,8 @@ async function cmdInit(argv) {
   } else if (useSvelteBase) {
     mkdirSync(projectDir, { recursive: true });
     copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
-    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1449,11 +1480,16 @@ async function cmdInit(argv) {
     writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), VANILLA_MINIMAL_README, 'utf8');
     copyPackageLicense(projectDir);
   } else {
-    const cssDir = join(projectDir, pathsForScaffold.targetDir);
-    cssTarget = join(cssDir, 'rizzo.min.css');
-    mkdirSync(cssDir, { recursive: true });
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
+    if (framework === 'svelte') {
+      copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
+      cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
+    } else {
+      const cssDir = join(projectDir, pathsForScaffold.targetDir);
+      cssTarget = join(cssDir, 'rizzo.min.css');
+      mkdirSync(cssDir, { recursive: true });
+      copyFileSync(cssSource, cssTarget);
+      copyRizzoFonts(dirname(cssTarget));
+    }
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },

package/scaffold/astro-minimal/{RIZZO-README.md → README-RIZZO.md}

@@ -28,8 +28,8 @@ Minimal Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init --fram
 - `src/pages/index.astro` — Home page
 - `public/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI; font URLs point to `/assets/fonts/`)
 - `public/assets/fonts/` — Rizzo font files (added by CLI)
-- `RIZZO-README.md` — This file (scaffold docs; does not replace your project README)
-- `RIZZO-LICENSE` — Rizzo CSS license (does not replace your project LICENSE)
+- `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)
+- `LICENSE-RIZZO` — Rizzo CSS license (does not replace your project LICENSE)
 
 ## Commands
 

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

@@ -1,13 +1,12 @@
 ---
 /* Placeholders replaced by rizzo-css CLI when scaffolding */
+/* {{THEME_LIST_COMMENT}} */
 const DATA_THEME = '{{DATA_THEME}}';
-const THEME_LIST_COMMENT = '{{THEME_LIST_COMMENT}}';
 /** @type {{ 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" />

package/scaffold/svelte-minimal/{RIZZO-README.md → README-RIZZO.md}

@@ -26,10 +26,10 @@ Minimal SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --
 - `src/app.html` — HTML shell with Rizzo CSS and theme (edit `data-theme` for default)
 - `src/routes/+layout.svelte` — Root layout
 - `src/routes/+page.svelte` — Home page
-- `static/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI)
-- `static/css/fonts/` — Rizzo font files (added by CLI)
-- `RIZZO-README.md` — This file (scaffold docs; does not replace your project README)
-- `RIZZO-LICENSE` — Rizzo CSS license (does not replace your project LICENSE)
+- `static/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI; font URLs point to `/assets/fonts/`)
+- `static/assets/fonts/` — Rizzo font files (added by CLI)
+- `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)
+- `LICENSE-RIZZO` — Rizzo CSS license (does not replace your project LICENSE)
 
 ## Commands
 

package/scaffold/vanilla/{RIZZO-README.md → 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.22`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.23`, 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.
 
@@ -48,7 +48,7 @@ pnpm dlx serve .
 
 ## Other scaffolds
 
-- **Astro:** `scaffold/astro-minimal/` — minimal Astro app; optional components from `scaffold/astro/` (see RIZZO-README.md).
-- **Svelte:** `scaffold/svelte-minimal/` — minimal SvelteKit app; optional components from `scaffold/svelte/` (see RIZZO-README.md).
+- **Astro:** `scaffold/astro-minimal/` — minimal Astro app; optional components from `scaffold/astro/` (see README-RIZZO.md).
+- **Svelte:** `scaffold/svelte-minimal/` — minimal SvelteKit app; optional components from `scaffold/svelte/` (see README-RIZZO.md).
 
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/vanilla/components/accordion.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

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

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/icons.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/index.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -283,6 +286,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/modal.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/navbar.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/pagination.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

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

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/search.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/settings.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

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

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -258,6 +261,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -206,6 +206,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -270,6 +273,9 @@
 
 
 
+
+
+