rizzo-css 0.0.80 → 0.0.82

package/README.md

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

package/bin/rizzo-css.js

@@ -199,7 +199,7 @@ const SVELTE_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Chart', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'BackToTop', 'Breadcrumb', 'Command', 'FormGroup', 'Input', 'InputGroup', 'InputOtp', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown', 'Direction', 'Menubar',
-  'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
+  'Modal', 'Toast', 'Table', 'ThemeIcon', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Settings', 'Search', 'Icons', 'Skeleton', 'Switch',
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
   'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
@@ -208,7 +208,7 @@ const ASTRO_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Chart', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'BackToTop', 'Breadcrumb', 'Command', 'FormGroup', 'Input', 'InputGroup', 'InputOtp', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown', 'Direction', 'Menubar',
-  'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
+  'Modal', 'Toast', 'Table', 'ThemeIcon', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Settings', 'Search', 'Icons', 'Skeleton', 'Switch',
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
   'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
@@ -221,7 +221,7 @@ const RECOMMENDED_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'BackToTop', 'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
-  'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
+  'Modal', 'Toast', 'Table', 'ThemeIcon', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Search', 'Settings', 'Icons', 'Skeleton', 'Switch',
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
   'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
@@ -2036,6 +2036,12 @@ function copyReactComponents(projectDir, selectedNames, opts) {
   }
   const iconsSrc = join(scaffoldDir, 'icons');
   if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
+  if (toCopy.includes('ThemeSwitcher') || toCopy.includes('ThemeIcon')) {
+    const themesSrc = join(scaffoldDir, 'themes.ts');
+    if (existsSync(themesSrc)) {
+      copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
+    }
+  }
   if (toCopy.includes('Settings')) {
     const configDir = getScaffoldConfigDir();
     const fontsSrc = join(configDir, 'fonts.ts');
@@ -2098,6 +2104,12 @@ function copyVueComponents(projectDir, selectedNames, opts) {
   }
   const iconsSrc = join(scaffoldDir, 'icons');
   if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
+  if (toCopy.includes('ThemeSwitcher') || toCopy.includes('ThemeIcon')) {
+    const themesSrc = join(scaffoldDir, 'themes.ts');
+    if (existsSync(themesSrc)) {
+      copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
+    }
+  }
   if (toCopy.includes('Settings')) {
     const configDir = getScaffoldConfigDir();
     const fontsSrc = join(configDir, 'fonts.ts');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "engines": {
     "node": ">=18"
   },

package/scaffold/react/DocsSidebar.tsx

@@ -1,46 +1,148 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
 
-export interface DocsSidebarLink {
+export interface DocsNavSection {
+  id: string;
+  label: string;
+}
+
+export interface DocsNavLink {
   href: string;
   label: string;
-  active?: boolean;
+  frameworkOnly?: boolean;
+  absolute?: boolean;
+  sections?: DocsNavSection[];
+}
+
+export interface DocsNavGroup {
+  label: string;
+  links: DocsNavLink[];
 }
 
 export interface DocsSidebarProps extends HTMLAttributes<HTMLElement> {
-  links?: DocsSidebarLink[];
-  children?: ReactNode;
+  /** Current URL pathname (e.g. location.pathname or useLocation().pathname). */
+  currentPath: string;
+  /** Path prefix for framework-specific links (e.g. /docs). */
+  pathPrefix?: string;
+  /** When true, omit the aside id to avoid duplicate ids when used inside a demo box. */
+  omitId?: boolean;
+  /** Nav config (when not provided, sidebar renders minimal placeholder for base template). */
+  nav?: DocsNavGroup[];
   className?: string;
 }
 
-const DEFAULT_LINKS: DocsSidebarLink[] = [
-  { href: '/docs', label: 'Overview' },
-  { href: '/docs/getting-started', label: 'Getting started' },
-  { href: '/docs/components', label: 'Components', active: true },
-];
+function fullHref(link: { href: string; frameworkOnly?: boolean; absolute?: boolean }, pathPrefix: string): string {
+  if (link.absolute && link.href.startsWith('/')) return link.href;
+  const base = link.frameworkOnly ? pathPrefix : '/docs';
+  return `${base}/${link.href}`;
+}
+
+function isActive(link: DocsNavLink, currentPath: string, pathPrefix: string): boolean {
+  const path = currentPath.replace(/\/$/, '');
+  const href = fullHref(link, pathPrefix);
+  return path === href;
+}
 
 export function DocsSidebar({
-  links = DEFAULT_LINKS,
-  children,
+  currentPath,
+  pathPrefix = '/docs',
+  omitId = false,
+  nav = [],
   className = '',
   ...rest
 }: DocsSidebarProps) {
+  const [activeSectionId, setActiveSectionId] = useState<string | null>(null);
+
+  useEffect(() => {
+    function setActiveFromHash() {
+      setActiveSectionId(window.location.hash.slice(1) || null);
+    }
+    setActiveFromHash();
+    window.addEventListener('hashchange', setActiveFromHash);
+
+    let io: IntersectionObserver | null = null;
+    const content = document.querySelector('.docs__content');
+    if (content) {
+      const headings = content.querySelectorAll<HTMLHeadingElement>('h2[id]');
+      if (headings.length) {
+        io = new IntersectionObserver(
+          (entries: IntersectionObserverEntry[]) => {
+            for (const e of entries) {
+              if (!e.isIntersecting) continue;
+              const id = (e.target as HTMLElement).id;
+              if (id) setActiveSectionId(id);
+              break;
+            }
+          },
+          { rootMargin: '-80px 0px -60% 0px', threshold: 0 }
+        );
+        headings.forEach((h) => io!.observe(h));
+      }
+    }
+    return () => {
+      window.removeEventListener('hashchange', setActiveFromHash);
+      io?.disconnect();
+    };
+  }, []);
+
+  const hasNav = nav && nav.length > 0;
+
   return (
-    <aside className={`docs-sidebar ${className}`.trim()} {...rest}>
-      <nav className="docs-sidebar__nav" aria-label="Docs">
-        <ul className="docs-sidebar__list">
-          {children ??
-            links.map((link, i) => (
-              <li key={i} className="docs-sidebar__item">
-                <a
-                  href={link.href}
-                  className={`docs-sidebar__link ${link.active ? 'docs-sidebar__link--active' : ''}`.trim()}
-                >
-                  {link.label}
-                </a>
-              </li>
-            ))}
-        </ul>
-      </nav>
+    <aside
+      id={omitId ? undefined : 'docs-sidebar'}
+      className={`docs-sidebar ${className}`.trim()}
+      aria-label="Documentation navigation"
+      {...rest}
+    >
+      {hasNav ? (
+        <nav className="docs-sidebar__nav">
+          {nav.map((group) => (
+            <div key={group.label} className="docs-sidebar__group">
+              <h2 className="docs-sidebar__group-label">{group.label}</h2>
+              <ul className="docs-sidebar__list">
+                {group.links.map((link) => {
+                  const href = fullHref(link, pathPrefix);
+                  const active = isActive(link, currentPath, pathPrefix);
+                  const sections = link.sections ?? [];
+                  return (
+                    <li key={link.href + link.label} className="docs-sidebar__item">
+                      <a
+                        href={href}
+                        className={`docs-sidebar__link ${active && (sections.length === 0 || activeSectionId == null) ? 'docs-sidebar__link--active' : ''}`.trim()}
+                        aria-current={active && (sections.length === 0 || activeSectionId == null) ? 'page' : undefined}
+                      >
+                        {link.label}
+                      </a>
+                      {sections.length > 0 && (
+                        <ul className="docs-sidebar__sublist" aria-label={`Sections in ${link.label}`}>
+                          {sections.map((section) => {
+                            const sublinkActive = activeSectionId === section.id && currentPath.replace(/\/$/, '') === href;
+                            return (
+                              <li key={section.id} className="docs-sidebar__subitem">
+                                <a
+                                  href={`${href}#${section.id}`}
+                                  className={`docs-sidebar__sublink ${sublinkActive ? 'docs-sidebar__sublink--active' : ''}`.trim()}
+                                  aria-current={sublinkActive ? 'location' : undefined}
+                                >
+                                  {section.label}
+                                </a>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          ))}
+        </nav>
+      ) : (
+        <div className="docs-sidebar__nav docs-sidebar__nav--placeholder">
+          <p className="docs-sidebar__placeholder">Docs sidebar — add <code>nav</code> prop with DOCS_NAV for full nav.</p>
+        </div>
+      )}
     </aside>
   );
 }

package/scaffold/react/ThemeIcon.tsx

@@ -0,0 +1,57 @@
+import type { HTMLAttributes } from 'react';
+
+const THEME_ICON_SVG: Record<string, string> = {
+  'github-dark-classic':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M16 7h.01" /><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20" /><path d="m20 7 2 .5-2 .5" /><path d="M10 18v3" /><path d="M14 17.75V21" /><path d="M7 18a6 6 0 0 0 3.84-10.61" /></svg>',
+  'github-light':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" /></svg>',
+  'red-velvet-cupcake':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" /><path d="M4 16s1-1 4-1 5 2 8 2 4-1 4-1V4" /><path d="M2 16v4M22 16v4M8 8h.01M16 8h.01M8 12h.01M16 12h.01" /></svg>',
+  'orangy-one-light':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M15.5 6.5c.5-2.5 2.5-4 5-4 1.5 0 2.5.5 3 1" /><path d="M12 12c-2 2-3 4-3 6 0 3 2 5 5 5 2 0 4-1 6-3" /><path d="M18 12c2 2 3 4 3 6 0 3-2 5-5 5-2 0-4-1-6-3" /></svg>',
+  sunflower:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 17a10 10 0 0 0-20 0" /><path d="M6 17a6 6 0 0 1 12 0" /><path d="M10 17a2 2 0 0 1 4 0" /></svg>',
+  'shades-of-purple':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/><path d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>',
+  'sandstorm-classic':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" /></svg>',
+  'rocky-blood-orange':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 10V2M4.93 10.93l1.41 1.41M2 18h2M20 18h2M17.66 10.93l1.41-1.41M22 22H2M8 6l4-4 4 4M16 18a4 4 0 0 0-8 0" /><path d="M12 22v-4" /></svg>',
+  'minimal-dark-neon-yellow':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" /></svg>',
+  'hack-the-box':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>',
+  'green-breeze-light':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg>',
+  'pink-cat-boo':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>',
+  'cute-pink':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M15 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M12 8v4M10 10l-2 2M14 10l2 2" /></svg>',
+  'semi-light-purple':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" /><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" /></svg>',
+};
+
+export interface ThemeIconProps extends HTMLAttributes<HTMLSpanElement> {
+  themeId: string;
+  size?: number;
+}
+
+export function ThemeIcon({ themeId, size = 24, className = '', ...rest }: ThemeIconProps) {
+  const iconSvg = THEME_ICON_SVG[themeId] ?? null;
+  const sizedSvg = iconSvg
+    ? iconSvg.replace(/width="16"/, `width="${size}"`).replace(/height="16"/, `height="${size}"`)
+    : null;
+
+  if (!sizedSvg) return null;
+
+  return (
+    <span
+      className={className}
+      style={{ display: 'inline-flex', verticalAlign: 'middle' }}
+      dangerouslySetInnerHTML={{ __html: sizedSvg }}
+      {...rest}
+    />
+  );
+}
+
+export default ThemeIcon;

package/scaffold/react/base/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "rizzo-css": "^0.0.80",
+    "rizzo-css": "^0.0.82",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

package/scaffold/react/themes.ts

@@ -0,0 +1,54 @@
+/**
+ * Single source of truth for theme id, label, type, icon, and preview colors.
+ * Used by ThemeSwitcher and Navbar so theme icons and labels stay consistent.
+ */
+
+export type ThemeIconKey =
+  | 'gear'
+  | 'owl'
+  | 'palette'
+  | 'flame'
+  | 'sunset'
+  | 'zap'
+  | 'shield'
+  | 'heart'
+  | 'sun'
+  | 'cake'
+  | 'lemon'
+  | 'rainbow'
+  | 'leaf'
+  | 'cherry'
+  | 'brush';
+
+export interface ThemeEntry {
+  value: string;
+  label: string;
+  type: 'dark' | 'light';
+  iconKey: ThemeIconKey;
+  /** OKLCH background for ThemeSwitcher preview */
+  bg: string;
+  /** OKLCH accent for ThemeSwitcher preview */
+  accent: string;
+}
+
+export const THEMES_DARK: ThemeEntry[] = [
+  { value: 'github-dark-classic', label: 'GitHub Dark Classic', type: 'dark', iconKey: 'owl', bg: 'oklch(18% 0.012 264deg)', accent: 'oklch(72% 0.12 250deg)' },
+  { value: 'shades-of-purple', label: 'Shades of Purple', type: 'dark', iconKey: 'palette', bg: 'oklch(18% 0.08 290deg)', accent: 'oklch(65% 0.25 290deg)' },
+  { value: 'sandstorm-classic', label: 'Sandstorm Classic', type: 'dark', iconKey: 'flame', bg: 'oklch(16% 0.025 25deg)', accent: 'oklch(58% 0.18 25deg)' },
+  { value: 'rocky-blood-orange', label: 'Rocky Blood Orange', type: 'dark', iconKey: 'sunset', bg: 'oklch(16% 0.03 45deg)', accent: 'oklch(62% 0.16 55deg)' },
+  { value: 'minimal-dark-neon-yellow', label: 'Minimal Dark Neon Yellow', type: 'dark', iconKey: 'zap', bg: 'oklch(14% 0.01 95deg)', accent: 'oklch(88% 0.18 95deg)' },
+  { value: 'hack-the-box', label: 'Hack The Box', type: 'dark', iconKey: 'shield', bg: 'oklch(16% 0.03 255deg)', accent: 'oklch(88% 0.22 130deg)' },
+  { value: 'pink-cat-boo', label: 'Pink Cat Boo', type: 'dark', iconKey: 'heart', bg: 'oklch(18% 0.03 280deg)', accent: 'oklch(78% 0.12 350deg)' },
+];
+
+export const THEMES_LIGHT: ThemeEntry[] = [
+  { value: 'github-light', label: 'GitHub Light', type: 'light', iconKey: 'sun', bg: 'oklch(100% 0 0deg)', accent: 'oklch(55% 0.18 255deg)' },
+  { value: 'red-velvet-cupcake', label: 'Red Velvet Cupcake', type: 'light', iconKey: 'cake', bg: 'oklch(99% 0.005 25deg)', accent: 'oklch(55% 0.17 25deg)' },
+  { value: 'orangy-one-light', label: 'Orangy One Light', type: 'light', iconKey: 'lemon', bg: 'oklch(99% 0.008 70deg)', accent: 'oklch(58% 0.16 55deg)' },
+  { value: 'sunflower', label: 'Sunflower', type: 'light', iconKey: 'rainbow', bg: 'oklch(98% 0.03 95deg)', accent: 'oklch(75% 0.16 95deg)' },
+  { value: 'green-breeze-light', label: 'Green Breeze Light', type: 'light', iconKey: 'leaf', bg: 'oklch(98% 0.008 140deg)', accent: 'oklch(48% 0.16 155deg)' },
+  { value: 'cute-pink', label: 'Cute Pink', type: 'light', iconKey: 'cherry', bg: 'oklch(98% 0.025 350deg)', accent: 'oklch(62% 0.22 350deg)' },
+  { value: 'semi-light-purple', label: 'Semi Light Purple', type: 'light', iconKey: 'brush', bg: 'oklch(96% 0.02 290deg)', accent: 'oklch(52% 0.2 290deg)' },
+];
+
+export const ALL_THEMES = [...THEMES_DARK, ...THEMES_LIGHT];

package/scaffold/react/variants/full/README-RIZZO.md

@@ -0,0 +1,35 @@
+# Rizzo CSS — React Full Template
+
+This project was generated with the **Full** template (React + React Router). It mirrors the structure of the Rizzo docs site: home, docs (overview, getting started, components), blocks, and themes.
+
+## Project structure
+
+- **Home** (`/`) — Hero, features, add-command, doc cards.
+- **Docs** (`/docs`, `/docs/overview`, `/docs/getting-started`, `/docs/components`) — Docs layout with sidebar (Introduction, Components, Blocks, Themes). Uses `DocsSidebar` with `DOCS_NAV` from `src/config/docsNav.ts`.
+- **Blocks** (`/blocks`) — Blocks layout with sidebar and index of block links (main site).
+- **Themes** (`/themes`) — Theme picker with ThemeSwitcher, Dark/Light theme cards (Card + ThemeIcon), and code snippet.
+
+Config used by the full template:
+
+- `src/config/docsNav.ts` — Sidebar nav (matches main site structure).
+- `src/config/componentCategories.ts` — Component categories for the components page.
+
+## Scripts
+
+- `pnpm dev` — Start dev server (Vite).
+- `pnpm build` — Build for production.
+- `pnpm preview` — Preview production build.
+
+## Adding components
+
+From the project root:
+
+```bash
+npx rizzo-css add <ComponentName>
+```
+
+Example: `npx rizzo-css add Modal` adds the Modal component to `src/components/rizzo`.
+
+## Settings panel
+
+The Settings panel (gear in the navbar) includes Theme (ThemeSwitcher), Font Size, Font (FontSwitcher), Sound (SoundEffects), and Accessibility options. Preferences are stored in `localStorage`.

package/scaffold/react/variants/full/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "rizzo-css": "^0.0.82",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1"
+  }
+}

package/scaffold/react/variants/full/src/App.tsx

@@ -0,0 +1,41 @@
+import { Routes, Route } from 'react-router-dom';
+import Navbar from '@/components/rizzo/Navbar';
+import Footer from '@/components/rizzo/Footer';
+import Settings from '@/components/rizzo/Settings';
+import BackToTop from '@/components/rizzo/BackToTop';
+import Home from './views/Home';
+import BlocksLayout from './layouts/BlocksLayout';
+import BlocksIndex from './views/BlocksIndex';
+import DocsLayout from './layouts/DocsLayout';
+import DocsIndex from './views/DocsIndex';
+import DocsOverview from './views/DocsOverview';
+import DocsGettingStarted from './views/DocsGettingStarted';
+import DocsComponents from './views/DocsComponents';
+import Themes from './views/Themes';
+
+export default function App() {
+  return (
+    <>
+      <a href="#main-content" className="skip-link">Skip to main content</a>
+      <Navbar siteName="Rizzo CSS" />
+      <main id="main-content">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/blocks" element={<BlocksLayout />}>
+            <Route index element={<BlocksIndex />} />
+          </Route>
+          <Route path="/docs" element={<DocsLayout />}>
+            <Route index element={<DocsIndex />} />
+            <Route path="overview" element={<DocsOverview />} />
+            <Route path="getting-started" element={<DocsGettingStarted />} />
+            <Route path="components" element={<DocsComponents />} />
+          </Route>
+          <Route path="/themes" element={<Themes />} />
+        </Routes>
+      </main>
+      <Footer />
+      <BackToTop />
+      <Settings />
+    </>
+  );
+}

package/scaffold/react/variants/full/src/config/componentCategories.ts

@@ -0,0 +1,43 @@
+/**
+ * Minimal component categories for the full template components page.
+ * Same structure as main site for consistent layout.
+ */
+export interface CategoryItem {
+  href: string;
+  title: string;
+  description: string;
+}
+
+export interface CategoryWithItems {
+  id: string;
+  label: string;
+  items: CategoryItem[];
+}
+
+function slugToTitle(slug: string): string {
+  return slug
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+const CATEGORIES: { id: string; label: string; slugs: string[] }[] = [
+  { id: 'layout', label: 'Layout', slugs: ['navbar', 'docs-sidebar', 'dashboard', 'resizable', 'footer'] },
+  { id: 'forms', label: 'Forms & inputs', slugs: ['button', 'button-group', 'forms', 'switch', 'slider', 'toggle', 'toggle-group', 'divider', 'separator', 'label', 'kbd'] },
+  { id: 'data', label: 'Data display', slugs: ['cards', 'table', 'badge', 'pagination', 'aspect-ratio', 'empty', 'scroll-area', 'alert', 'skeleton', 'spinner', 'progress-bar', 'toast'] },
+  { id: 'overlay', label: 'Overlay', slugs: ['modal', 'sheet', 'popover', 'dropdown', 'tooltip', 'accordion', 'collapsible', 'tabs'] },
+  { id: 'other', label: 'Other', slugs: ['avatar', 'copy-to-clipboard', 'theme-switcher', 'font-switcher', 'settings', 'search', 'breadcrumb', 'back-to-top'] },
+];
+
+export function getComponentsByCategory(): CategoryWithItems[] {
+  const pathPrefix = '/docs/components';
+  return CATEGORIES.map((cat) => ({
+    id: cat.id,
+    label: cat.label,
+    items: cat.slugs.map((slug) => ({
+      href: `${pathPrefix}/${slug}`,
+      title: slugToTitle(slug),
+      description: `Accessible, themeable ${slugToTitle(slug).toLowerCase()} component.`,
+    })),
+  }));
+}

package/scaffold/react/variants/full/src/config/docsNav.ts

@@ -0,0 +1,70 @@
+/**
+ * Docs nav for the full template. Matches main site structure (Introduction, Components, Blocks, Themes).
+ */
+export interface DocsNavSection {
+  id: string;
+  label: string;
+}
+
+export interface DocsNavLink {
+  href: string;
+  label: string;
+  frameworkOnly?: boolean;
+  absolute?: boolean;
+  sections?: DocsNavSection[];
+}
+
+export interface DocsNavGroup {
+  label: string;
+  links: DocsNavLink[];
+}
+
+export const DOCS_NAV: DocsNavGroup[] = [
+  {
+    label: 'Introduction',
+    links: [
+      {
+        href: 'overview',
+        label: 'Overview',
+        frameworkOnly: true,
+        sections: [
+          { id: 'overview', label: 'Overview' },
+          { id: 'installation', label: 'Installation' },
+          { id: 'components', label: 'Components' },
+          { id: 'blocks', label: 'Blocks' },
+        ],
+      },
+      {
+        href: 'getting-started',
+        label: 'Getting Started',
+        sections: [
+          { id: 'installation', label: 'Installation' },
+          { id: 'project-structure', label: 'Project Structure' },
+          { id: 'development', label: 'Development' },
+          { id: 'using-components', label: 'Using Components' },
+          { id: 'using-themes', label: 'Using Themes' },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Components',
+    links: [{ href: 'components', label: 'Overview', frameworkOnly: true }],
+  },
+  {
+    label: 'Blocks',
+    links: [
+      { href: '/blocks', label: 'Blocks overview', absolute: true },
+      { href: '/blocks/landing-hero', label: 'Landing hero', absolute: true },
+      { href: '/blocks/pricing', label: 'Pricing cards', absolute: true },
+      { href: '/blocks/dashboard-01', label: 'Dashboard', absolute: true },
+      { href: '/blocks/docs-layout', label: 'Docs layout', absolute: true },
+      { href: '/blocks/login', label: 'Login', absolute: true },
+      { href: '/blocks/signup', label: 'Sign up', absolute: true },
+    ],
+  },
+  {
+    label: 'Themes',
+    links: [{ href: '/themes', label: 'Themes', absolute: true }],
+  },
+];