rizzo-css 0.0.54 → 0.0.55

package/scaffold/astro/variants/dashboard/src/pages/index.astro

@@ -0,0 +1,110 @@
+---
+import Layout from '../layouts/Layout.astro';
+const TITLE = '{{TITLE}}';
+---
+<Layout title={TITLE}>
+  <div class="dashboard-page">
+    <header class="dashboard-page__header">
+      <h1 class="dashboard-page__title">Dashboard</h1>
+      <p class="dashboard-page__subtitle">Overview of your app. Replace this with your own content.</p>
+    </header>
+
+    <section class="dashboard-page__stats" aria-labelledby="stats-heading">
+      <h2 id="stats-heading" class="sr-only">Key metrics</h2>
+      <div class="dashboard-page__stats-grid">
+        <div class="card dashboard-page__stat">
+          <div class="card__body">
+            <span class="card__label">Total users</span>
+            <span class="card__value">1,234</span>
+          </div>
+        </div>
+        <div class="card dashboard-page__stat">
+          <div class="card__body">
+            <span class="card__label">Revenue</span>
+            <span class="card__value">$12,345</span>
+          </div>
+        </div>
+        <div class="card dashboard-page__stat">
+          <div class="card__body">
+            <span class="card__label">Active</span>
+            <span class="card__value">89%</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="dashboard-page__table" aria-labelledby="table-heading">
+      <h2 id="table-heading" class="dashboard-page__section-title">Recent activity</h2>
+      <div class="table-wrapper">
+        <table class="table">
+          <caption class="sr-only">Recent activity list</caption>
+          <thead>
+            <tr class="table__row">
+              <th scope="col" class="table__cell table__cell--header">Name</th>
+              <th scope="col" class="table__cell table__cell--header">Status</th>
+              <th scope="col" class="table__cell table__cell--header">Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="table__row">
+              <td class="table__cell">Item one</td>
+              <td class="table__cell"><span class="badge badge--success">Done</span></td>
+              <td class="table__cell">Today</td>
+            </tr>
+            <tr class="table__row">
+              <td class="table__cell">Item two</td>
+              <td class="table__cell"><span class="badge badge--warning">Pending</span></td>
+              <td class="table__cell">Yesterday</td>
+            </tr>
+            <tr class="table__row">
+              <td class="table__cell">Item three</td>
+              <td class="table__cell"><span class="badge badge--error">Failed</span></td>
+              <td class="table__cell">Jan 15</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+</Layout>
+
+<style>
+  .dashboard-page__header {
+    margin-bottom: var(--spacing-6);
+  }
+  .dashboard-page__title {
+    font-size: var(--text-2xl);
+    font-weight: 700;
+    margin: 0 0 var(--spacing-1);
+  }
+  .dashboard-page__subtitle {
+    color: var(--text-dim);
+    margin: 0;
+  }
+  .dashboard-page__stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: var(--spacing-4);
+    margin-bottom: var(--spacing-6);
+  }
+  .dashboard-page__stat .card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .dashboard-page__stat .card__label {
+    font-size: var(--text-sm);
+    color: var(--text-dim);
+  }
+  .dashboard-page__stat .card__value {
+    font-size: var(--text-xl);
+    font-weight: 600;
+  }
+  .dashboard-page__section-title {
+    font-size: var(--text-lg);
+    margin: 0 0 var(--spacing-4);
+  }
+  .table-wrapper {
+    overflow-x: auto;
+  }
+</style>

package/scaffold/astro/variants/docs/src/layouts/Layout.astro

@@ -0,0 +1,81 @@
+---
+/* Placeholders replaced by rizzo-css CLI when scaffolding */
+/* {{THEME_LIST_COMMENT}} */
+const DATA_THEME = '{{DATA_THEME}}';
+/** @type {{ title?: string }} */
+const { title = '{{TITLE}}' } = Astro.props;
+{{RIZZO_LAYOUT_IMPORTS}}
+---
+<!doctype html>
+<html lang="en" data-theme={DATA_THEME}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script is:inline>
+      (function(){try{
+        var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);
+        var fs=localStorage.getItem('fontSizeScale');if(fs)document.documentElement.style.setProperty('--font-size-scale',fs);
+        var fp=localStorage.getItem('fontPair')||'geist';if(fp==='geist'){document.documentElement.style.setProperty('--font-family','var(--font-family-geist-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-geist-mono)');}else if(fp==='inter-jetbrains'){document.documentElement.style.setProperty('--font-family','var(--font-family-inter)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-jetbrains-mono)');}else if(fp==='ibm-plex'){document.documentElement.style.setProperty('--font-family','var(--font-family-ibm-plex-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-ibm-plex-mono)');}else if(fp==='source'){document.documentElement.style.setProperty('--font-family','var(--font-family-source-sans-3)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-source-code-pro)');}else if(fp==='dm'){document.documentElement.style.setProperty('--font-family','var(--font-family-dm-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-dm-mono)');}else if(fp==='outfit-jetbrains'){document.documentElement.style.setProperty('--font-family','var(--font-family-outfit)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-jetbrains-mono)');}
+      }catch(e){}})();
+    </script>
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    {{RIZZO_SOUND_SCRIPT}}
+    <title>{title}</title>
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+    {{RIZZO_LAYOUT_BODY_TOP}}
+    <div class="docs-layout">
+      <aside class="docs-layout__sidebar" aria-label="Documentation navigation">
+        <nav class="docs-layout__nav">
+          <a href="/" class="docs-layout__nav-link">Home</a>
+          <a href="/docs/getting-started" class="docs-layout__nav-link">Getting started</a>
+        </nav>
+      </aside>
+      <main id="main-content" class="docs-layout__main">
+        <slot />
+      </main>
+    </div>
+    {{RIZZO_LAYOUT_BODY_BOTTOM}}
+  </body>
+</html>
+
+<style is:global>
+  .docs-layout {
+    display: flex;
+    min-height: 100vh;
+  }
+  .docs-layout__sidebar {
+    width: 16rem;
+    flex-shrink: 0;
+    border-right: 1px solid var(--border);
+    padding: var(--spacing-4);
+    background: var(--background-alt);
+  }
+  .docs-layout__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .docs-layout__nav-link {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    text-decoration: none;
+  }
+  .docs-layout__nav-link:hover {
+    background: var(--background);
+  }
+  .docs-layout__main {
+    flex: 1;
+    padding: var(--spacing-6);
+    max-width: 65ch;
+    overflow: auto;
+  }
+  @media (max-width: 768px) {
+    .docs-layout { flex-direction: column; }
+    .docs-layout__sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
+  }
+</style>

package/scaffold/astro/variants/docs/src/pages/docs/getting-started.astro

@@ -0,0 +1,36 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Getting started">
+  <article class="docs-page">
+    <h1 class="docs-page__title">Getting started</h1>
+    <p>This is a sample doc page. Edit <code>src/pages/docs/getting-started.astro</code> and add your own content.</p>
+    <h2>Next steps</h2>
+    <ul>
+      <li>Add more pages in <code>src/pages/docs/</code></li>
+      <li>Update the sidebar links in <code>src/layouts/Layout.astro</code></li>
+      <li>Add the DocsSidebar component via <code>npx rizzo-css add DocsSidebar</code> for a richer nav</li>
+    </ul>
+  </article>
+</Layout>
+
+<style>
+  .docs-page__title {
+    font-size: var(--text-2xl);
+    margin: 0 0 var(--spacing-4);
+  }
+  .docs-page h2 {
+    font-size: var(--text-lg);
+    margin: var(--spacing-6) 0 var(--spacing-2);
+  }
+  .docs-page ul {
+    margin: 0 0 var(--spacing-4);
+    padding-left: var(--spacing-6);
+  }
+  .docs-page code {
+    padding: var(--spacing-1) var(--spacing-2);
+    border-radius: var(--radius-sm);
+    background: var(--background-alt);
+    font-size: var(--text-sm);
+  }
+</style>

package/scaffold/astro/variants/docs/src/pages/index.astro

@@ -0,0 +1,38 @@
+---
+import Layout from '../layouts/Layout.astro';
+const TITLE = '{{TITLE}}';
+---
+<Layout title={TITLE}>
+  <div class="docs-home">
+    <h1 class="docs-home__title">Documentation</h1>
+    <p class="docs-home__intro">Welcome to your docs. Add more pages under <code>src/pages/docs/</code> and link them from the sidebar.</p>
+    <ul class="docs-home__list">
+      <li><a href="/docs/getting-started">Getting started</a></li>
+    </ul>
+  </div>
+</Layout>
+
+<style>
+  .docs-home__title {
+    font-size: var(--text-2xl);
+    margin: 0 0 var(--spacing-4);
+  }
+  .docs-home__intro {
+    margin: 0 0 var(--spacing-4);
+    color: var(--text-dim);
+  }
+  .docs-home__intro code {
+    padding: var(--spacing-1) var(--spacing-2);
+    border-radius: var(--radius-sm);
+    background: var(--background-alt);
+    font-size: var(--text-sm);
+  }
+  .docs-home__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .docs-home__list li {
+    margin-bottom: var(--spacing-2);
+  }
+</style>

package/scaffold/{astro-core → astro/variants/full}/README-RIZZO.md

@@ -14,7 +14,7 @@
       Design system · Vanilla · Astro · Svelte
 ```
 
-Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Full** template. **Full** copies the base app and all 34 Rizzo components (or you pick which to include; all are pre-selected by default). **Minimal** / **Starter** = CSS, fonts, icons, sfx + RIZZO-SETUP.md only. Same template choice for **Add to existing** (`npx rizzo-css add`).
+Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 56 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 
@@ -40,6 +40,7 @@ Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chos
 - `astro.config.mjs` — Astro configuration
 - `src/layouts/Layout.astro` — Layout with Rizzo CSS and theme (edit `data-theme` for default)
 - `src/pages/index.astro` — Home page
+- **Navbar** — Flat links (Docs, Components, Blocks, Themes, Colors); Search and Settings in the scaffold
 - `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)
 - `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)

package/scaffold/astro/variants/full/astro.config.mjs

@@ -0,0 +1,5 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});

package/scaffold/astro/variants/full/dist/_noop-middleware.mjs

@@ -0,0 +1,3 @@
+const onRequest = (_, next) => next();
+
+export { onRequest };