rizzo-css 0.0.79 → 0.0.81

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.79 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.81 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',

package/package.json

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

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.79",
+    "rizzo-css": "^0.0.81",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

package/scaffold/svelte/Settings.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from './config/fonts';
+  import ThemeSwitcher from './ThemeSwitcher.svelte';
+  import FontSwitcher from './FontSwitcher.svelte';
+  import SoundEffects from './SoundEffects.svelte';
 
   interface Props {
     open?: boolean;
@@ -11,8 +13,6 @@
   const isBrowser = typeof window !== 'undefined' && typeof localStorage?.getItem === 'function';
   let fontSizeLabel = $state('100%');
   let fontSizeSlider = $state(1);
-  let fontPairValue = $state(isBrowser ? localStorage.getItem('fontPair') || FONT_PAIR_DEFAULT : FONT_PAIR_DEFAULT);
-  let soundEffects = $state(isBrowser && localStorage.getItem('soundEffects') === 'true');
   let reducedMotion = $state(isBrowser && localStorage.getItem('reducedMotion') === 'true');
   let highContrast = $state(isBrowser && localStorage.getItem('highContrast') === 'true');
   let scrollbarStyle = $state((isBrowser ? localStorage.getItem('scrollbarStyle') || 'thin' : 'thin') as 'thin' | 'thick' | 'hidden');
@@ -24,16 +24,6 @@
     fontSizeLabel = `${Math.round(scale * 100)}%`;
   }
 
-  function applyFontPair(value: string) {
-    if (typeof document === 'undefined') return;
-    const pair = FONT_PAIRS.find((p) => p.value === value);
-    if (pair) {
-      document.documentElement.style.setProperty('--font-family', pair.sans);
-      document.documentElement.style.setProperty('--font-family-mono', pair.mono);
-      localStorage?.setItem('fontPair', value);
-    }
-  }
-
   $effect(() => {
     if (typeof window === 'undefined') return;
     (window as unknown as { openSettings?: () => void }).openSettings = () => {
@@ -61,21 +51,12 @@
       const scale = saved ? parseFloat(saved) : 1;
       fontSizeSlider = scale;
       fontSizeLabel = `${Math.round(scale * 100)}%`;
-      const savedPair = localStorage?.getItem('fontPair') || FONT_PAIR_DEFAULT;
-      fontPairValue = savedPair;
-      soundEffects = localStorage?.getItem('soundEffects') === 'true';
       reducedMotion = localStorage?.getItem('reducedMotion') === 'true';
       highContrast = localStorage?.getItem('highContrast') === 'true';
       scrollbarStyle = (localStorage?.getItem('scrollbarStyle') || 'thin') as 'thin' | 'thick' | 'hidden';
     }
   });
 
-  function onSoundEffectsChange(e: Event) {
-    const checked = (e.target as HTMLInputElement).checked;
-    soundEffects = checked;
-    localStorage?.setItem('soundEffects', checked ? 'true' : 'false');
-  }
-
   function close() {
     openInternal = false;
   }
@@ -87,13 +68,6 @@
     applyFontSize(scale);
   }
 
-  function onFontPairChange(e: Event) {
-    const target = e.target as HTMLSelectElement;
-    const value = target.value;
-    fontPairValue = value;
-    applyFontPair(value);
-  }
-
   function onReducedMotionChange(e: Event) {
     const checked = (e.target as HTMLInputElement).checked;
     reducedMotion = checked;
@@ -133,6 +107,12 @@
       <button type="button" class="settings__close" data-settings-close aria-label="Close settings" onclick={close}>×</button>
     </div>
     <div class="settings__content" tabindex="-1" aria-label="Settings options">
+      <section class="settings__section">
+        <h3 class="settings__section-title">Theme</h3>
+        <div class="settings__control">
+          <ThemeSwitcher idPrefix="settings" />
+        </div>
+      </section>
       <section class="settings__section">
         <h3 class="settings__section-title">Font Size</h3>
         <div class="settings__control">
@@ -159,31 +139,14 @@
       <section class="settings__section">
         <h3 class="settings__section-title">Font</h3>
         <div class="settings__control">
-          <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
-          <select
-            id="font-pair-select"
-            class="form-control"
-            aria-label="Font pair"
-            data-font-pair
-            style="width: 100%;"
-            value={fontPairValue}
-            onchange={onFontPairChange}
-          >
-            {#each FONT_PAIRS as pair}
-              <option value={pair.value} data-sans={pair.sans} data-mono={pair.mono}>{pair.label}</option>
-            {/each}
-          </select>
+          <FontSwitcher idPrefix="settings" />
           <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
         </div>
       </section>
       <section class="settings__section">
         <h3 class="settings__section-title">Sound</h3>
         <div class="settings__control">
-          <label class="settings__checkbox-label">
-            <input type="checkbox" class="settings__checkbox" aria-label="Play sound on click" checked={soundEffects} onchange={onSoundEffectsChange} />
-            <span>Play sound on click</span>
-          </label>
-          <p class="settings__help-text">Short click sound when you interact with buttons and links. Off by default.</p>
+          <SoundEffects showHelp={true} />
         </div>
       </section>
       <section class="settings__section">

package/scaffold/svelte/variants/full/.svelte-kit/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["../src/lib"],
+      "$lib/*": ["../src/lib/*"]
+    },
+    "rootDir": ".."
+  },
+  "include": ["../src/**/*", "../*.config.js"]
+}

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

@@ -39,10 +39,12 @@ SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you
 
 - `svelte.config.js` — SvelteKit configuration
 - `vite.config.js` — Vite config with SvelteKit plugin (required for `pnpm dev`)
+- `tsconfig.json` — Extends `.svelte-kit/tsconfig.json`; a minimal fallback is committed so TypeScript and the IDE work before the first `pnpm dev`. Running `pnpm dev` or `svelte-kit sync` regenerates the full config.
 - `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
 - **Navbar** — Flat links (Docs, Components, Blocks, Themes, Colors); Search and Settings in the scaffold
+- **Settings** — Slide-in panel (gear icon): Theme (ThemeSwitcher), Font Size, Font (FontSwitcher), Sound (SoundEffects), Accessibility (reduce motion, high contrast, scrollbar style). Same contents as the docs site.
 - `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)

package/scaffold/svelte/variants/full/gitignore

@@ -2,7 +2,8 @@ node_modules
 .output
 .vercel
 .netlify
-/.svelte-kit
+/.svelte-kit/*
+!/.svelte-kit/tsconfig.json
 /build
 .DS_Store
 .env

package/scaffold/svelte/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/svelte/variants/full/src/config/docsNav.ts

@@ -0,0 +1,50 @@
+/**
+ * Minimal docs nav for the full template. Matches DOCS_NAV structure so DocsSidebar works.
+ */
+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 },
+      { href: 'getting-started', label: 'Getting Started' },
+    ],
+  },
+  {
+    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 }],
+  },
+];

package/scaffold/svelte/variants/full/src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import CopyToClipboard from '$lib/rizzo/CopyToClipboard.svelte';
-  const DOCS_BASE = 'https://rizzo-css.vercel.app';
   const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
 </script>
 
@@ -11,8 +10,8 @@
       <h1 class="home__title">Rizzo CSS</h1>
       <p class="home__subtitle">A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, and Svelte. Start here then make it your own.</p>
       <div class="home__hero-ctas">
-        <a href={DOCS_BASE + '/docs/getting-started'} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started<span class="sr-only"> (opens in new tab)</span></a>
-        <a href={DOCS_BASE + '/docs/components'} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components<span class="sr-only"> (opens in new tab)</span></a>
+        <a href="/docs/getting-started" class="btn btn-primary home__hero-cta">Get Started</a>
+        <a href="/docs/components" class="btn btn-outline home__hero-cta">View Components</a>
       </div>
     </header>
 
@@ -69,34 +68,29 @@
     <section class="home__docs">
       <h2 class="home__section-title">Documentation</h2>
       <div class="home__docs-grid">
-        <a href={DOCS_BASE + '/docs/getting-started'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+        <a href="/docs/getting-started" class="home__doc-card">
           <h3>Getting Started</h3>
           <p>Installation, project structure, and quick start guide</p>
-          <span class="sr-only"> (opens in new tab)</span>
         </a>
-        <a href={DOCS_BASE + '/docs/components'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+        <a href="/docs/components" class="home__doc-card">
           <h3>Components</h3>
           <p>Component library with usage examples and live demos</p>
-          <span class="sr-only"> (opens in new tab)</span>
         </a>
-        <a href={DOCS_BASE + '/docs/theming'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Theming</h3>
-          <p>Theme system, custom themes, and color format guide</p>
-          <span class="sr-only"> (opens in new tab)</span>
+        <a href="/themes" class="home__doc-card">
+          <h3>Themes</h3>
+          <p>Theme system, 14 themes, and live preview</p>
         </a>
-        <a href={DOCS_BASE + '/docs/design-system'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Design System</h3>
-          <p>Semantic variables, typography, and design principles</p>
-          <span class="sr-only"> (opens in new tab)</span>
+        <a href="/blocks" class="home__doc-card">
+          <h3>Blocks</h3>
+          <p>Pre-built layouts: landing, pricing, dashboard, docs, login, signup</p>
         </a>
-        <a href={DOCS_BASE + '/docs/accessibility'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Accessibility</h3>
-          <p>Accessibility guidelines, utilities, and best practices</p>
-          <span class="sr-only"> (opens in new tab)</span>
+        <a href="/docs" class="home__doc-card">
+          <h3>Docs Overview</h3>
+          <p>Condensed index of documentation and links</p>
         </a>
-        <a href={DOCS_BASE + '/docs/colors'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Colors</h3>
-          <p>Interactive color reference with multiple format options</p>
+        <a href="https://rizzo-css.vercel.app/docs/theming" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+          <h3>Theming (full docs)</h3>
+          <p>Custom themes, persistence, color format — on main site</p>
           <span class="sr-only"> (opens in new tab)</span>
         </a>
       </div>

package/scaffold/svelte/variants/full/src/routes/blocks/+layout.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import BackToTop from '$lib/rizzo/BackToTop.svelte';
+
+  const currentPath = $derived($page.url.pathname);
+  const BLOCKS_NAV = [
+    { href: '/blocks', label: 'Overview' },
+    { href: '/blocks/landing-hero', label: 'Landing hero' },
+    { href: '/blocks/pricing', label: 'Pricing cards' },
+    { href: '/blocks/dashboard-01', label: 'Dashboard with sidebar' },
+    { href: '/blocks/docs-layout', label: 'Docs layout with sidebar' },
+    { href: '/blocks/login', label: 'Login' },
+    { href: '/blocks/signup', label: 'Sign up' },
+  ];
+
+  onMount(() => {
+    const w = typeof window !== 'undefined' ? window.innerWidth : 1025;
+    document.documentElement.classList.add(w <= 1024 ? 'docs-sidebar-mobile' : 'docs-sidebar-desktop');
+
+    const container = document.getElementById('docs-sidebar-container');
+    if (!container) return;
+    const toggle = container.querySelector('[data-docs-sidebar-toggle]');
+    const overlay = container.querySelector('[data-docs-sidebar-overlay]');
+    const docs = document.querySelector('[data-docs]');
+    if (!toggle || !overlay || !docs) return;
+
+    function open() {
+      docs.classList.add('docs--sidebar-open');
+      toggle.setAttribute('aria-expanded', 'true');
+      overlay.setAttribute('aria-hidden', 'false');
+    }
+    function close() {
+      docs.classList.remove('docs--sidebar-open');
+      toggle.setAttribute('aria-expanded', 'false');
+      overlay.setAttribute('aria-hidden', 'true');
+    }
+    toggle.addEventListener('click', () => (docs.classList.contains('docs--sidebar-open') ? close() : open()));
+    overlay.addEventListener('click', close);
+
+    if (document.documentElement.classList.contains('docs-sidebar-mobile')) {
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => container.remove());
+      } else {
+        container.remove();
+      }
+    }
+  });
+</script>
+
+<div class="docs" data-docs>
+  <div id="docs-sidebar-container">
+    <button
+      type="button"
+      class="docs__sidebar-toggle"
+      aria-label="Open blocks menu"
+      aria-expanded="false"
+      aria-controls="docs-sidebar"
+      data-docs-sidebar-toggle
+    >
+      <span class="docs__sidebar-toggle-icon" aria-hidden="true">
+        <span></span><span></span><span></span>
+      </span>
+      <span class="docs__sidebar-toggle-text">Blocks</span>
+    </button>
+    <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true"></div>
+    <aside id="docs-sidebar" class="docs-sidebar" aria-label="Blocks navigation" tabindex="0">
+      <nav class="docs-sidebar__nav">
+        <div class="docs-sidebar__group">
+          <h2 class="docs-sidebar__group-label">Blocks</h2>
+          <ul class="docs-sidebar__list">
+            {#each BLOCKS_NAV as item}
+              {@const isActive = currentPath === item.href || (item.href !== '/blocks' && currentPath.startsWith(item.href))}
+              <li class="docs-sidebar__item">
+                <a
+                  href={item.href}
+                  class="docs-sidebar__link"
+                  class:docs-sidebar__link--active={isActive}
+                  aria-current={isActive ? 'page' : undefined}
+                >
+                  {item.label}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      </nav>
+    </aside>
+  </div>
+  <div class="docs__main">
+    <div class="docs__container">
+      <div class="docs__content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>
+<BackToTop threshold={300} />
+
+<svelte:head>
+  <title>Blocks — Rizzo CSS</title>
+</svelte:head>
+
+<style>
+  :global(.docs__container) {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: var(--container-default);
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+  }
+  :global(.docs__content) {
+    width: 100%;
+    min-width: 0;
+    color: var(--text);
+    line-height: var(--line-height-relaxed);
+  }
+</style>

package/scaffold/svelte/variants/full/src/routes/blocks/+page.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import Card from '$lib/rizzo/Card.svelte';
+
+  const blocks = [
+    { href: '/blocks/landing-hero', title: 'Landing hero', desc: 'Marketing hero with headline, subtitle, and primary CTAs. Typography and button tokens.', meta: 'Hero · Buttons · Typography' },
+    { href: '/blocks/pricing', title: 'Pricing cards', desc: 'Three-tier pricing section using Card, Badge, and buttons. Theme-aware.', meta: 'Card · Badge · Buttons' },
+    { href: '/blocks/dashboard-01', title: 'Dashboard', desc: 'App dashboard with sidebar, stat cards, and data table. Uses Dashboard, Card, and Table components.', meta: 'Dashboard · Sidebar · Cards · Table' },
+    { href: '/blocks/docs-layout', title: 'Docs layout', desc: 'Documentation layout with a sidebar nav and main content area. Same pattern as this docs site.', meta: 'Docs Sidebar · Layout' },
+    { href: '/blocks/login', title: 'Login', desc: 'Centered login form on a muted background. Brand link, email/password fields, and footer links.', meta: 'Form · Button · Tokens' },
+    { href: '/blocks/signup', title: 'Sign up', desc: 'Centered sign-up form with name, email, password, and link to sign in. Same tokens as Login.', meta: 'Form · Button · Tokens' },
+  ];
+  const DOCS_BASE = 'https://rizzo-css.vercel.app';
+</script>
+
+<svelte:head>
+  <title>Blocks — Rizzo CSS</title>
+</svelte:head>
+
+<section class="blocks-index__browse">
+  <h1 class="docs__title">Blocks</h1>
+  <p class="blocks-index__browse-desc">
+    Pre-built layouts and patterns using Rizzo components and design tokens. Use them as starting points for dashboards, docs sites, auth screens, and app shells.
+  </p>
+</section>
+
+<section>
+  <h2 class="blocks-index__section-label">Featured</h2>
+  <div class="blocks-index__grid">
+    {#each blocks as block}
+      <a href="{DOCS_BASE}{block.href}" class="block-card-link" target="_blank" rel="noopener noreferrer">
+        <Card variant="elevated">
+          <div class="card__body">
+            <h3 style="margin: 0 0 var(--spacing-2) 0;">{block.title}</h3>
+            <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">{block.desc}</p>
+            <span class="block-card-meta" style="margin-top: var(--spacing-2); font-size: var(--font-size-xs); color: var(--text-dim);">{block.meta}</span>
+          </div>
+        </Card>
+      </a>
+    {/each}
+  </div>
+</section>
+
+<section>
+  <h2>Scaffold from CLI</h2>
+  <p>When you create a new project or add to existing, choose a <strong>template</strong>: <strong>CSS only</strong>, <strong>Landing</strong>, <strong>Docs</strong>, <strong>Dashboard</strong>, or <strong>Full</strong>. Full clones the entire docs site with home, docs, components, blocks, and themes.</p>
+  <pre><code>npx rizzo-css init
+# → Choose framework (Vanilla, Astro, Svelte, React, Vue)
+# → Choose template: CSS only | Landing | Docs | Dashboard | Full</code></pre>
+</section>
+
+<style>
+  .blocks-index__browse {
+    margin-bottom: var(--section-spacing);
+  }
+  .blocks-index__browse-desc {
+    margin: 0;
+    color: var(--text-dim);
+    font-size: var(--font-size-sm);
+  }
+  .blocks-index__section-label {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    margin: 0 0 var(--page-header-margin-bottom);
+    color: var(--text);
+  }
+  .blocks-index__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+    gap: var(--spacing-6);
+    margin: var(--page-header-margin-bottom) 0;
+  }
+  .block-card-link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    transition: transform var(--transition-base);
+  }
+  .block-card-link :global(.card) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .block-card-link :global(.card .card__body) {
+    flex: 1;
+  }
+  .block-card-link:hover {
+    transform: translateY(calc(-1 * var(--spacing-0-125)));
+  }
+  .block-card-link:hover :global(.card__body h3) {
+    color: var(--accent-fg);
+  }
+  pre {
+    background: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-4);
+    overflow-x: auto;
+    font-size: var(--font-size-sm);
+  }
+  pre code {
+    background: none;
+    padding: 0;
+  }
+</style>