rizzo-css 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/README.md +1 -1
  2. package/bin/rizzo-css.js +250 -32
  3. package/package.json +1 -1
  4. package/scaffold/astro-app/astro.config.mjs +4 -0
  5. package/scaffold/astro-app/package.json +13 -0
  6. package/scaffold/astro-app/public/.gitkeep +0 -0
  7. package/scaffold/astro-app/public/favicon.svg +18 -0
  8. package/scaffold/astro-app/src/layouts/Layout.astro +21 -0
  9. package/scaffold/astro-app/src/pages/index.astro +13 -0
  10. package/scaffold/astro-app/tsconfig.json +5 -0
  11. package/scaffold/svelte/icons/Brush.svelte +11 -0
  12. package/scaffold/svelte/icons/Cake.svelte +12 -0
  13. package/scaffold/svelte/icons/Check.svelte +22 -0
  14. package/scaffold/svelte/icons/Cherry.svelte +12 -0
  15. package/scaffold/svelte/icons/ChevronDown.svelte +22 -0
  16. package/scaffold/svelte/icons/Circle.svelte +22 -0
  17. package/scaffold/svelte/icons/Close.svelte +23 -0
  18. package/scaffold/svelte/icons/Copy.svelte +23 -0
  19. package/scaffold/svelte/icons/Eye.svelte +23 -0
  20. package/scaffold/svelte/icons/Filter.svelte +22 -0
  21. package/scaffold/svelte/icons/Flame.svelte +22 -0
  22. package/scaffold/svelte/icons/Flower.svelte +12 -0
  23. package/scaffold/svelte/icons/Gear.svelte +23 -0
  24. package/scaffold/svelte/icons/Heart.svelte +22 -0
  25. package/scaffold/svelte/icons/IceCream.svelte +24 -0
  26. package/scaffold/svelte/icons/Leaf.svelte +23 -0
  27. package/scaffold/svelte/icons/Lemon.svelte +12 -0
  28. package/scaffold/svelte/icons/Moon.svelte +22 -0
  29. package/scaffold/svelte/icons/Owl.svelte +27 -0
  30. package/scaffold/svelte/icons/Palette.svelte +26 -0
  31. package/scaffold/svelte/icons/Rainbow.svelte +24 -0
  32. package/scaffold/svelte/icons/Search.svelte +23 -0
  33. package/scaffold/svelte/icons/Shield.svelte +22 -0
  34. package/scaffold/svelte/icons/Snowflake.svelte +27 -0
  35. package/scaffold/svelte/icons/Sort.svelte +23 -0
  36. package/scaffold/svelte/icons/Sun.svelte +23 -0
  37. package/scaffold/svelte/icons/Sunset.svelte +11 -0
  38. package/scaffold/svelte/icons/Zap.svelte +10 -0
  39. package/scaffold/svelte/icons/devicons/Astro.svelte +31 -0
  40. package/scaffold/svelte/icons/devicons/Bash.svelte +27 -0
  41. package/scaffold/svelte/icons/devicons/Css3.svelte +22 -0
  42. package/scaffold/svelte/icons/devicons/Git.svelte +17 -0
  43. package/scaffold/svelte/icons/devicons/Html5.svelte +20 -0
  44. package/scaffold/svelte/icons/devicons/Javascript.svelte +18 -0
  45. package/scaffold/svelte/icons/devicons/Nodejs.svelte +40 -0
  46. package/scaffold/svelte/icons/devicons/Plaintext.svelte +26 -0
  47. package/scaffold/svelte/icons/devicons/React.svelte +20 -0
  48. package/scaffold/svelte/icons/devicons/Svelte.svelte +18 -0
  49. package/scaffold/svelte/icons/devicons/Vue.svelte +19 -0
  50. package/scaffold/svelte-app/package.json +20 -0
  51. package/scaffold/svelte-app/src/app.d.ts +13 -0
  52. package/scaffold/svelte-app/src/app.html +14 -0
  53. package/scaffold/svelte-app/src/routes/+layout.svelte +5 -0
  54. package/scaffold/svelte-app/src/routes/+page.svelte +12 -0
  55. package/scaffold/svelte-app/static/.gitkeep +0 -0
  56. package/scaffold/svelte-app/static/favicon.svg +1 -0
  57. package/scaffold/svelte-app/svelte.config.js +11 -0
  58. package/scaffold/svelte-app/tsconfig.json +15 -0
  59. package/scaffold/svelte-app/vite.config.ts +6 -0
  60. package/scaffold/vanilla/icons/Brush.svg +5 -0
  61. package/scaffold/vanilla/icons/Cake.svg +6 -0
  62. package/scaffold/vanilla/icons/Check.svg +13 -0
  63. package/scaffold/vanilla/icons/Cherry.svg +6 -0
  64. package/scaffold/vanilla/icons/ChevronDown.svg +13 -0
  65. package/scaffold/vanilla/icons/Circle.svg +13 -0
  66. package/scaffold/vanilla/icons/Close.svg +14 -0
  67. package/scaffold/vanilla/icons/Copy.svg +14 -0
  68. package/scaffold/vanilla/icons/Eye.svg +14 -0
  69. package/scaffold/vanilla/icons/Filter.svg +13 -0
  70. package/scaffold/vanilla/icons/Flame.svg +13 -0
  71. package/scaffold/vanilla/icons/Flower.svg +6 -0
  72. package/scaffold/vanilla/icons/Gear.svg +14 -0
  73. package/scaffold/vanilla/icons/Heart.svg +13 -0
  74. package/scaffold/vanilla/icons/IceCream.svg +15 -0
  75. package/scaffold/vanilla/icons/Leaf.svg +14 -0
  76. package/scaffold/vanilla/icons/Lemon.svg +6 -0
  77. package/scaffold/vanilla/icons/Moon.svg +13 -0
  78. package/scaffold/vanilla/icons/Owl.svg +18 -0
  79. package/scaffold/vanilla/icons/Palette.svg +17 -0
  80. package/scaffold/vanilla/icons/Rainbow.svg +15 -0
  81. package/scaffold/vanilla/icons/Search.svg +14 -0
  82. package/scaffold/vanilla/icons/Shield.svg +13 -0
  83. package/scaffold/vanilla/icons/Snowflake.svg +18 -0
  84. package/scaffold/vanilla/icons/Sort.svg +14 -0
  85. package/scaffold/vanilla/icons/Sun.svg +14 -0
  86. package/scaffold/vanilla/icons/Sunset.svg +5 -0
  87. package/scaffold/vanilla/icons/Zap.svg +4 -0
  88. package/scaffold/vanilla/icons/devicons/Astro.svg +20 -0
  89. package/scaffold/vanilla/icons/devicons/Bash.svg +9 -0
  90. package/scaffold/vanilla/icons/devicons/Css3.svg +13 -0
  91. package/scaffold/vanilla/icons/devicons/Git.svg +8 -0
  92. package/scaffold/vanilla/icons/devicons/Html5.svg +11 -0
  93. package/scaffold/vanilla/icons/devicons/Javascript.svg +9 -0
  94. package/scaffold/vanilla/icons/devicons/Nodejs.svg +31 -0
  95. package/scaffold/vanilla/icons/devicons/Plaintext.svg +8 -0
  96. package/scaffold/vanilla/icons/devicons/React.svg +11 -0
  97. package/scaffold/vanilla/icons/devicons/Svelte.svg +9 -0
  98. package/scaffold/vanilla/icons/devicons/Vue.svg +10 -0
package/README.md CHANGED
@@ -12,7 +12,7 @@ pnpm add rizzo-css
12
12
  yarn add rizzo-css
13
13
  ```
14
14
 
15
- **Quick start (no install):** `npx rizzo-css init` scaffolds a project. Choose **Vanilla JS** (yellow in the CLI), **Astro** (orange), or **Svelte** (orange-red). All options get the **same CSS and component styles**. Vanilla JS gets an example page with theme switcher and sample components; Astro/Svelte can optionally add component files. To use the **official Svelte or Astro scaffold** plus Rizzo CSS, create the app with their CLI first, then add our CSS:
15
+ **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`:
16
16
 
17
17
  ```bash
18
18
  npm create svelte@latest my-app && cd my-app && npx rizzo-css add
package/bin/rizzo-css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  #!/usr/bin/env node
2
2
 
3
- const { copyFileSync, mkdirSync, writeFileSync, existsSync, readFileSync, readdirSync } = require('fs');
3
+ const { copyFileSync, mkdirSync, writeFileSync, existsSync, readFileSync, readdirSync, statSync } = require('fs');
4
4
  const { join, dirname } = require('path');
5
5
  const readline = require('readline');
6
6
 
@@ -259,7 +259,7 @@ Usage:
259
259
  npx rizzo-css <command> [options]
260
260
 
261
261
  Commands:
262
- init Scaffold a minimal project (menus: location, framework, themes, components)
262
+ init Add Rizzo to existing project or scaffold new one (first menu: existing vs new)
263
263
  add Copy Rizzo CSS into the current project (auto-detects Svelte/Astro)
264
264
  theme List all available themes (use in init or set data-theme on <html>)
265
265
  help Show this help
@@ -363,6 +363,41 @@ function getScaffoldVanillaIndex() {
363
363
  return join(getPackageRoot(), 'scaffold', 'vanilla', 'index.html');
364
364
  }
365
365
 
366
+ function getScaffoldVanillaIconsDir() {
367
+ return join(getPackageRoot(), 'scaffold', 'vanilla', 'icons');
368
+ }
369
+
370
+ /** Copy Rizzo icons into the project for the given framework. */
371
+ function copyRizzoIcons(projectDir, framework) {
372
+ if (framework === 'astro') {
373
+ const iconsSrc = join(getScaffoldAstroDir(), 'icons');
374
+ if (!existsSync(iconsSrc)) return;
375
+ const targetDir = join(projectDir, 'src', 'components', 'rizzo', 'icons');
376
+ mkdirSync(targetDir, { recursive: true });
377
+ copyDirRecursive(iconsSrc, targetDir);
378
+ } else if (framework === 'svelte') {
379
+ const iconsSrc = join(getScaffoldSvelteDir(), 'icons');
380
+ if (!existsSync(iconsSrc)) return;
381
+ const targetDir = join(projectDir, 'src', 'lib', 'rizzo', 'icons');
382
+ mkdirSync(targetDir, { recursive: true });
383
+ copyDirRecursive(iconsSrc, targetDir);
384
+ } else if (framework === 'vanilla') {
385
+ const iconsSrc = getScaffoldVanillaIconsDir();
386
+ if (!existsSync(iconsSrc)) return;
387
+ const targetDir = join(projectDir, 'icons');
388
+ mkdirSync(targetDir, { recursive: true });
389
+ copyDirRecursive(iconsSrc, targetDir);
390
+ }
391
+ }
392
+
393
+ function getScaffoldAstroAppDir() {
394
+ return join(getPackageRoot(), 'scaffold', 'astro-app');
395
+ }
396
+
397
+ function getScaffoldSvelteAppDir() {
398
+ return join(getPackageRoot(), 'scaffold', 'svelte-app');
399
+ }
400
+
366
401
  function copyDirRecursive(src, dest) {
367
402
  mkdirSync(dest, { recursive: true });
368
403
  const entries = readdirSync(src, { withFileTypes: true });
@@ -377,6 +412,31 @@ function copyDirRecursive(src, dest) {
377
412
  }
378
413
  }
379
414
 
415
+ /** Copy directory recursively; in text files (utf-8), replace each key in replacements with its value. */
416
+ function copyDirRecursiveWithReplacements(src, dest, replacements) {
417
+ mkdirSync(dest, { recursive: true });
418
+ const entries = readdirSync(src, { withFileTypes: true });
419
+ const textExtensions = new Set(['.html', '.astro', '.svelte', '.ts', '.js', '.mjs', '.json', '.css', '.md']);
420
+ for (const e of entries) {
421
+ const srcPath = join(src, e.name);
422
+ const destPath = join(dest, e.name);
423
+ if (e.isDirectory()) {
424
+ copyDirRecursiveWithReplacements(srcPath, destPath, replacements);
425
+ } else {
426
+ const ext = srcPath.slice(srcPath.lastIndexOf('.'));
427
+ if (textExtensions.has(ext)) {
428
+ let content = readFileSync(srcPath, 'utf8');
429
+ for (const [key, value] of Object.entries(replacements)) {
430
+ content = content.split(key).join(value);
431
+ }
432
+ writeFileSync(destPath, content, 'utf8');
433
+ } else {
434
+ copyFileSync(srcPath, destPath);
435
+ }
436
+ }
437
+ }
438
+ }
439
+
380
440
  function copySvelteComponents(projectDir, selectedNames) {
381
441
  const scaffoldDir = getScaffoldSvelteDir();
382
442
  if (!existsSync(scaffoldDir)) {
@@ -400,10 +460,14 @@ function copySvelteComponents(projectDir, selectedNames) {
400
460
  exports.push(`export { default as ${name} } from './${name}.svelte';`);
401
461
  }
402
462
  }
463
+ const iconsSrc = join(scaffoldDir, 'icons');
464
+ if (existsSync(iconsSrc)) {
465
+ copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
466
+ }
403
467
  if (exports.length > 0) {
404
468
  const indexContent = `/** Rizzo CSS Svelte components — selected via npx rizzo-css init */\n${exports.join('\n')}\n`;
405
469
  writeFileSync(join(targetDir, 'index.ts'), indexContent, 'utf8');
406
- console.log('\n ✓ ' + exports.length + ' Svelte components copied to ' + targetDir);
470
+ console.log('\n ✓ ' + exports.length + ' Svelte components copied to ' + targetDir + (existsSync(iconsSrc) ? ' + icons' : ''));
407
471
  console.log(' Import in your app: import { Button, Badge, ... } from \'$lib/rizzo\';\n');
408
472
  }
409
473
  }
@@ -441,7 +505,105 @@ function copyAstroComponents(projectDir, selectedNames) {
441
505
  }
442
506
  }
443
507
 
508
+ /** Add Rizzo CSS (and optional components) to an existing project in cwd. */
509
+ async function runAddToExisting() {
510
+ const cwd = process.cwd();
511
+ const detected = detectFramework(cwd);
512
+ const frameworkOptions = [
513
+ { value: 'vanilla', label: 'Vanilla JS (HTML + CSS)', color: C.vanilla },
514
+ { value: 'astro', label: 'Astro', color: C.astro },
515
+ { value: 'svelte', label: 'Svelte', color: C.svelte },
516
+ ];
517
+ let frameworkPrompt = '? Framework';
518
+ if (detected) {
519
+ frameworkPrompt += ' (detected: ' + detected + ' — pick to confirm or choose another)';
520
+ }
521
+ const framework = await selectMenu(frameworkOptions, frameworkPrompt);
522
+
523
+ const selectedThemes = await multiSelectMenu(
524
+ THEMES.map((t) => ({ value: t, label: t })),
525
+ '? Themes (Space to toggle, Enter to confirm) — we\'ll suggest the first as default data-theme'
526
+ );
527
+ const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
528
+ const suggestedTheme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
529
+
530
+ let selectedComponents = [];
531
+ const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
532
+ if (componentList.length > 0) {
533
+ const includeLabel = framework === 'svelte' ? 'Svelte' : 'Astro';
534
+ const includeChoice = await selectMenu(
535
+ [
536
+ { value: 'none', label: 'None' },
537
+ { value: 'pick', label: 'Yes, pick ' + includeLabel + ' components' },
538
+ ],
539
+ '? Include ' + includeLabel + ' components?'
540
+ );
541
+ if (includeChoice === 'pick') {
542
+ selectedComponents = await multiSelectMenu(
543
+ componentList.map((c) => ({ value: c, label: c })),
544
+ '? Components (Space to toggle, Enter to confirm)'
545
+ );
546
+ }
547
+ }
548
+
549
+ const cssSource = getCssPath();
550
+ if (!existsSync(cssSource)) {
551
+ console.error('Error: Rizzo CSS build not found. Run from repo root: pnpm build:css');
552
+ process.exit(1);
553
+ }
554
+
555
+ const paths = getFrameworkCssPaths(framework);
556
+ const targetDir = join(cwd, paths.targetDir);
557
+ const cssTarget = join(targetDir, 'rizzo.min.css');
558
+ mkdirSync(targetDir, { recursive: true });
559
+ copyFileSync(cssSource, cssTarget);
560
+
561
+ copyRizzoIcons(cwd, framework);
562
+ if (framework === 'svelte' && selectedComponents.length > 0) {
563
+ copySvelteComponents(cwd, selectedComponents);
564
+ } else if (framework === 'astro' && selectedComponents.length > 0) {
565
+ copyAstroComponents(cwd, selectedComponents);
566
+ }
567
+
568
+ const linkHref = paths.linkHref;
569
+ console.log('\n✓ Rizzo CSS added to your existing project');
570
+ console.log(' - ' + cssTarget);
571
+ if (framework === 'svelte') {
572
+ console.log('\nAdd to your root layout (e.g. src/app.html):');
573
+ console.log(' <link rel="stylesheet" href="' + linkHref + '" />');
574
+ console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
575
+ if (selectedComponents.length > 0) {
576
+ console.log(' Components are in src/lib/rizzo — import from \'$lib/rizzo\'.');
577
+ }
578
+ } else if (framework === 'astro') {
579
+ console.log('\nAdd to your layout (e.g. src/layouts/Layout.astro):');
580
+ console.log(' <link rel="stylesheet" href="' + linkHref + '" />');
581
+ console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
582
+ if (selectedComponents.length > 0) {
583
+ console.log(' Components are in src/components/rizzo — import from there.');
584
+ }
585
+ } else {
586
+ console.log('\nAdd to your HTML or layout:');
587
+ console.log(' <link rel="stylesheet" href="' + linkHref + '" />');
588
+ console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
589
+ }
590
+ console.log('\nDocs: https://rizzo-css.vercel.app\n');
591
+ }
592
+
444
593
  async function cmdInit() {
594
+ const initMode = await selectMenu(
595
+ [
596
+ { value: 'existing', label: 'Add to existing project (current directory)' },
597
+ { value: 'new', label: 'Create new project (scaffold)' },
598
+ ],
599
+ '? Are you using an existing project or creating a new one?'
600
+ );
601
+
602
+ if (initMode === 'existing') {
603
+ await runAddToExisting();
604
+ return;
605
+ }
606
+
445
607
  const projectChoice = await selectMenu(
446
608
  [
447
609
  { value: 'cwd', label: 'Current directory' },
@@ -487,8 +649,6 @@ async function cmdInit() {
487
649
  }
488
650
 
489
651
  const projectDir = name ? join(process.cwd(), name) : process.cwd();
490
- const cssDir = framework === 'astro' ? join(projectDir, 'public', 'css') : join(projectDir, 'css');
491
- const cssTarget = join(cssDir, 'rizzo.min.css');
492
652
  const cssSource = getCssPath();
493
653
 
494
654
  if (!existsSync(cssSource)) {
@@ -496,25 +656,73 @@ async function cmdInit() {
496
656
  process.exit(1);
497
657
  }
498
658
 
499
- mkdirSync(cssDir, { recursive: true });
500
- copyFileSync(cssSource, cssTarget);
501
-
502
- const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
503
659
  const themeComment = themeList.length > 0
504
660
  ? '\n <!-- Selected themes: ' + themeList.join(', ') + ' -->'
505
661
  : '';
506
- const indexPath = join(projectDir, 'index.html');
507
- const vanillaScaffoldPath = getScaffoldVanillaIndex();
508
- if (framework === 'vanilla' && existsSync(vanillaScaffoldPath)) {
509
- let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
510
- indexHtml = indexHtml
511
- .replace(/\{\{DATA_THEME\}\}/g, theme)
512
- .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
513
- .replace(/\{\{TITLE\}\}/g, name || 'App')
514
- .replace(/\{\{LINK_HREF\}\}/g, linkHref);
515
- writeFileSync(indexPath, indexHtml, 'utf8');
662
+ const projectNamePkg = name
663
+ ? name.replace(/\s+/g, '-').toLowerCase()
664
+ : (framework === 'astro' ? 'my-astro-app' : framework === 'svelte' ? 'my-svelte-app' : 'my-app');
665
+ const replacements = {
666
+ '{{DATA_THEME}}': theme,
667
+ '{{THEME_LIST_COMMENT}}': themeComment,
668
+ '{{TITLE}}': name || 'App',
669
+ '{{PROJECT_NAME}}': projectNamePkg,
670
+ };
671
+
672
+ const astroAppDir = getScaffoldAstroAppDir();
673
+ const svelteAppDir = getScaffoldSvelteAppDir();
674
+
675
+ let cssTarget;
676
+ let indexPath;
677
+
678
+ if (framework === 'astro' && existsSync(astroAppDir)) {
679
+ mkdirSync(projectDir, { recursive: true });
680
+ copyDirRecursiveWithReplacements(astroAppDir, projectDir, replacements);
681
+ mkdirSync(join(projectDir, 'public', 'css'), { recursive: true });
682
+ cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
683
+ copyFileSync(cssSource, cssTarget);
684
+ if (statSync(cssTarget).size < 5000) {
685
+ console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
686
+ }
687
+ copyRizzoIcons(projectDir, 'astro');
688
+ if (selectedComponents.length > 0) {
689
+ copyAstroComponents(projectDir, selectedComponents);
690
+ }
691
+ } else if (framework === 'svelte' && existsSync(svelteAppDir)) {
692
+ mkdirSync(projectDir, { recursive: true });
693
+ copyDirRecursiveWithReplacements(svelteAppDir, projectDir, replacements);
694
+ mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
695
+ cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
696
+ copyFileSync(cssSource, cssTarget);
697
+ if (statSync(cssTarget).size < 5000) {
698
+ console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
699
+ }
700
+ copyRizzoIcons(projectDir, 'svelte');
701
+ if (selectedComponents.length > 0) {
702
+ copySvelteComponents(projectDir, selectedComponents);
703
+ }
516
704
  } else {
517
- const indexHtml = `<!DOCTYPE html>
705
+ const cssDir = framework === 'astro' ? join(projectDir, 'public', 'css') : join(projectDir, 'css');
706
+ cssTarget = join(cssDir, 'rizzo.min.css');
707
+ const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
708
+ mkdirSync(cssDir, { recursive: true });
709
+ copyFileSync(cssSource, cssTarget);
710
+ if (statSync(cssTarget).size < 5000) {
711
+ console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
712
+ }
713
+
714
+ const vanillaScaffoldPath = getScaffoldVanillaIndex();
715
+ indexPath = join(projectDir, 'index.html');
716
+ if (framework === 'vanilla' && existsSync(vanillaScaffoldPath)) {
717
+ let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
718
+ indexHtml = indexHtml
719
+ .replace(/\{\{DATA_THEME\}\}/g, theme)
720
+ .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
721
+ .replace(/\{\{TITLE\}\}/g, name || 'App')
722
+ .replace(/\{\{LINK_HREF\}\}/g, linkHref);
723
+ writeFileSync(indexPath, indexHtml, 'utf8');
724
+ } else {
725
+ const indexHtml = `<!DOCTYPE html>
518
726
  <html lang="en" data-theme="${theme}">${themeComment}
519
727
  <head>
520
728
  <meta charset="UTF-8" />
@@ -528,26 +736,36 @@ async function cmdInit() {
528
736
  </body>
529
737
  </html>
530
738
  `;
531
- writeFileSync(indexPath, indexHtml, 'utf8');
532
- }
533
-
534
- if (framework === 'svelte' && selectedComponents.length > 0) {
535
- copySvelteComponents(projectDir, selectedComponents);
536
- } else if (framework === 'astro' && selectedComponents.length > 0) {
537
- copyAstroComponents(projectDir, selectedComponents);
739
+ writeFileSync(indexPath, indexHtml, 'utf8');
740
+ }
741
+ copyRizzoIcons(projectDir, framework);
742
+ if (framework === 'svelte' && selectedComponents.length > 0) {
743
+ copySvelteComponents(projectDir, selectedComponents);
744
+ } else if (framework === 'astro' && selectedComponents.length > 0) {
745
+ copyAstroComponents(projectDir, selectedComponents);
746
+ }
538
747
  }
539
748
 
540
749
  console.log('\n✓ Project ready at ' + projectDir);
541
750
  console.log(' - ' + cssTarget);
542
- console.log(' - ' + indexPath);
751
+ if (indexPath) console.log(' - ' + indexPath);
543
752
  if (framework === 'vanilla') {
544
- console.log(' - Vanilla JS: same CSS and component styles as Astro/Svelte; index includes theme switcher and sample components.');
753
+ console.log(' - Vanilla JS: same CSS and component styles; index includes theme switcher and sample components.');
754
+ console.log(' - Icons: ' + join(projectDir, 'icons') + ' (SVG files)');
755
+ }
756
+ if (framework === 'astro' && existsSync(astroAppDir)) {
757
+ console.log(' - Default Astro project with Rizzo CSS. Run: pnpm install && pnpm dev');
758
+ console.log(' - Icons: src/components/rizzo/icons/ (Astro components)');
759
+ }
760
+ if (framework === 'svelte' && existsSync(svelteAppDir)) {
761
+ console.log(' - Default SvelteKit project with Rizzo CSS. Run: pnpm install && pnpm dev');
762
+ console.log(' - Icons: src/lib/rizzo/icons/ (Svelte components)');
545
763
  }
546
- if (framework === 'svelte' || framework === 'astro') {
764
+ if ((framework === 'svelte' || framework === 'astro') && !existsSync(framework === 'astro' ? astroAppDir : svelteAppDir)) {
547
765
  const fw = framework === 'svelte' ? 'Svelte' : 'Astro';
548
- console.log('\nTip: To use the official ' + fw + ' scaffold instead, create a project with their CLI (e.g. npm create ' + framework + '@latest my-app), then run npx rizzo-css add in that folder.');
766
+ console.log('\nTip: To use the official ' + fw + ' scaffold, create a project with their CLI (e.g. npm create ' + framework + '@latest my-app), then run npx rizzo-css add in that folder.');
549
767
  }
550
- console.log('\nRun a local server (e.g. npx serve .) or open index.html. Docs: https://rizzo-css.vercel.app\n');
768
+ console.log('\nDocs: https://rizzo-css.vercel.app\n');
551
769
  }
552
770
 
553
771
  function main() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rizzo-css",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "scripts": {
5
5
  "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js"
6
6
  },
package/scaffold/astro-app/astro.config.mjs ADDED
@@ -0,0 +1,4 @@
1
+ // https://astro.build/config
2
+ import { defineConfig } from 'astro/config';
3
+
4
+ export default defineConfig({});
package/scaffold/astro-app/package.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "name": "{{PROJECT_NAME}}",
3
+ "type": "module",
4
+ "version": "0.0.1",
5
+ "scripts": {
6
+ "dev": "astro dev",
7
+ "build": "astro build",
8
+ "preview": "astro preview"
9
+ },
10
+ "dependencies": {
11
+ "astro": "^5.0.0"
12
+ }
13
+ }
package/scaffold/astro-app/public/.gitkeep ADDED
File without changes
package/scaffold/astro-app/public/favicon.svg ADDED
@@ -0,0 +1,18 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
2
+ <g>
3
+ <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
4
+ </g>
5
+ <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
6
+ <defs>
7
+ <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
8
+ <stop stop-color="#D83333"/>
9
+ <stop offset="1" stop-color="#F041FF"/>
10
+ </linearGradient>
11
+ </defs>
12
+ <style>
13
+ g { fill: #000; }
14
+ @media (prefers-color-scheme: dark) {
15
+ g { fill: #FFF; }
16
+ }
17
+ </style>
18
+ </svg>
package/scaffold/astro-app/src/layouts/Layout.astro ADDED
@@ -0,0 +1,21 @@
1
+ ---
2
+ interface Props {
3
+ title?: string;
4
+ }
5
+
6
+ const { title = '{{TITLE}}' } = Astro.props;
7
+ ---
8
+ <!doctype html>
9
+ <html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
10
+ <head>
11
+ <meta charset="UTF-8" />
12
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
13
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
14
+ <!-- Rizzo CSS: full bundle (reset + base + components + themes) -->
15
+ <link rel="stylesheet" href="/css/rizzo.min.css" />
16
+ <title>{title}</title>
17
+ </head>
18
+ <body>
19
+ <slot />
20
+ </body>
21
+ </html>
package/scaffold/astro-app/src/pages/index.astro ADDED
@@ -0,0 +1,13 @@
1
+ ---
2
+ import Layout from '../layouts/Layout.astro';
3
+ ---
4
+ <Layout>
5
+ <main style="padding: var(--spacing-6); max-width: 65ch;">
6
+ <h1>Hello, Rizzo CSS</h1>
7
+ <p>Your Astro project is set up with Rizzo CSS. Same styles and components as Vanilla JS and Svelte.</p>
8
+ <p>
9
+ <a href="https://rizzo-css.vercel.app/docs/components">Component docs</a>
10
+ — Set theme via <code>data-theme</code> on <code>&lt;html&gt;</code> (e.g. <code>github-dark-classic</code>). Run <code>npx rizzo-css theme</code> to list themes.
11
+ </p>
12
+ </main>
13
+ </Layout>
package/scaffold/astro-app/tsconfig.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "extends": "astro/tsconfigs/strict",
3
+ "include": [".astro/types.d.ts", "**/*"],
4
+ "exclude": ["dist"]
5
+ }
package/scaffold/svelte/icons/Brush.svelte ADDED
@@ -0,0 +1,11 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
+ <title>Brush</title>
9
+ <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" />
10
+ <path d="M7.87 14.14c-.32.32-.67.68-1.06 1.06a5.04 5.04 0 0 1-2.17 1.22c-.47.15-.85.2-1.15.2-.16 0-.3-.02-.41-.03a1 1 0 0 1-.63-.97c-.01-.14.02-.31.07-.51.1-.41.3-.95.6-1.59.3-.64.67-1.33 1.08-2.05" />
11
+ </svg>
package/scaffold/svelte/icons/Cake.svelte ADDED
@@ -0,0 +1,12 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
+ <title>Cake</title>
9
+ <path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" />
10
+ <path d="M4 16s1-1 4-1 5 2 8 2 4-1 4-1V4" />
11
+ <path d="M2 16v4M22 16v4M8 8h.01M16 8h.01M8 12h.01M16 12h.01" />
12
+ </svg>
package/scaffold/svelte/icons/Check.svelte ADDED
@@ -0,0 +1,22 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width={width}
10
+ height={height}
11
+ viewBox="0 0 24 24"
12
+ fill="none"
13
+ stroke="currentColor"
14
+ stroke-width="2"
15
+ stroke-linecap="round"
16
+ stroke-linejoin="round"
17
+ class={className}
18
+ aria-hidden="true"
19
+ >
20
+ <title>Check</title>
21
+ <path d="M20 6L9 17l-5-5" />
22
+ </svg>
package/scaffold/svelte/icons/Cherry.svelte ADDED
@@ -0,0 +1,12 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
+ <title>Cherry</title>
9
+ <path d="M9 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" />
10
+ <path d="M15 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" />
11
+ <path d="M12 8v4M10 10l-2 2M14 10l2 2" />
12
+ </svg>
package/scaffold/svelte/icons/ChevronDown.svelte ADDED
@@ -0,0 +1,22 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width={width}
10
+ height={height}
11
+ viewBox="0 0 24 24"
12
+ fill="none"
13
+ stroke="currentColor"
14
+ stroke-width="2"
15
+ stroke-linecap="round"
16
+ stroke-linejoin="round"
17
+ class={className}
18
+ aria-hidden="true"
19
+ >
20
+ <title>Chevron Down</title>
21
+ <path d="m6 9 6 6 6-6" />
22
+ </svg>
package/scaffold/svelte/icons/Circle.svelte ADDED
@@ -0,0 +1,22 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width={width}
10
+ height={height}
11
+ viewBox="0 0 24 24"
12
+ fill="none"
13
+ stroke="currentColor"
14
+ stroke-width="2"
15
+ stroke-linecap="round"
16
+ stroke-linejoin="round"
17
+ class={className}
18
+ aria-hidden="true"
19
+ >
20
+ <title>Circle</title>
21
+ <circle cx="12" cy="12" r="10" />
22
+ </svg>
package/scaffold/svelte/icons/Close.svelte ADDED
@@ -0,0 +1,23 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width={width}
10
+ height={height}
11
+ viewBox="0 0 24 24"
12
+ fill="none"
13
+ stroke="currentColor"
14
+ stroke-width="2"
15
+ stroke-linecap="round"
16
+ stroke-linejoin="round"
17
+ class={className}
18
+ aria-hidden="true"
19
+ >
20
+ <title>Close</title>
21
+ <path d="M18 6L6 18" />
22
+ <path d="M6 6l12 12" />
23
+ </svg>
package/scaffold/svelte/icons/Copy.svelte ADDED
@@ -0,0 +1,23 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width={width}
10
+ height={height}
11
+ viewBox="0 0 24 24"
12
+ fill="none"
13
+ stroke="currentColor"
14
+ stroke-width="2"
15
+ stroke-linecap="round"
16
+ stroke-linejoin="round"
17
+ class={className}
18
+ aria-hidden="true"
19
+ >
20
+ <title>Copy</title>
21
+ <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
22
+ <path d="M4 16c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2" />
23
+ </svg>
package/scaffold/svelte/icons/Eye.svelte ADDED
@@ -0,0 +1,23 @@
1
+ <script>
2
+ export let width = 16;
3
+ export let height = 16;
4
+ export let className = '';
5
+ </script>
6
+
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width={width}
10
+ height={height}
11
+ viewBox="0 0 24 24"
12
+ fill="none"
13
+ stroke="currentColor"
14
+ stroke-width="2"
15
+ stroke-linecap="round"
16
+ stroke-linejoin="round"
17
+ class={className}
18
+ aria-hidden="true"
19
+ >
20
+ <title>Eye</title>
21
+ <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
22
+ <circle cx="12" cy="12" r="3" />
23
+ </svg>