@birdapi/velinstyle 1.2.1 → 1.2.2

package/README.de.md

@@ -26,7 +26,7 @@ Ein Framework. Eine CLI. Ein Design System. Ein AI-fähiges Ökosystem.
 npm i @birdapi/velinstyle
 ```
 
-**[Website](https://velinstyle.info)** · **[Doku](https://velinstyle.info/docs/getting-started/introduction.html)** · **[Demos](https://velinstyle.info/demos/)** · **[Getting Started](GETTING_STARTED.md)** · **[Architecture](ARCHITECTURE.md)** · **[English](README.md)**
+**[Website](https://velinstyle.info)** · **[Atelier](https://velinstyle.info/atelier/index.de.html)** · **[Doku](https://velinstyle.info/docs/getting-started/introduction.html)** · **[Demos](https://velinstyle.info/demos/)** · **[Getting Started](GETTING_STARTED.md)** · **[Architecture](ARCHITECTURE.md)** · **[English](README.md)**
 
 </div>
 
@@ -34,10 +34,12 @@ npm i @birdapi/velinstyle
 
 VelinStyle ist ein **produktives CSS- + Web-Components-Framework** mit **WCAG-2.2-AAA-orientierten Defaults**, einer echten **CLI-Ship-Surface**, dem **Transparency Framework** (Kennzeichnung + Nachweis, Beta) und den ersten **Design-Intelligence- / AI-Foundation**-Systemen (Beta). Kein externes UI-Framework im Kern.
 
-**Passung heute:** Marketing-Landings, Docs-Shells, einfache Admin-Starter.  
+**VelinStyle Atelier** ist die kuratierte Oberfläche darüber: **über 2.600 produktionsreife Interfaces**, vier komplette Produktwelten und eine durchsuchbare Bibliothek — fertige Oberflächen statt leerer Komponenten-Fragmente.
+
+**Passung heute:** Marketing-Landings, Docs-Shells, Admin-/SaaS-Starter, Shop- und Community-UIs über Atelier.  
 **Noch nicht:** alleiniger Primary-Stack für große Multipage-Shops + Enterprise-Admin ohne Custom-Arbeit.
 
-> **Release:** **1.2.1** (Transparency Framework + Core + Design Intelligence Foundation + Trust/Ship). VelinStyle **zertifiziert keine Anwendung** — siehe [A11y-Matrix](https://velinstyle.info/docs/getting-started/accessibility.html).
+> **Release:** **1.2.2** (Production Release — Production Builder + Atelier CLI). VelinStyle **zertifiziert keine Anwendung** — siehe [A11y-Matrix](https://velinstyle.info/docs/getting-started/accessibility.html).
 
 ---
 
@@ -52,7 +54,21 @@ VelinStyle ist ein **produktives CSS- + Web-Components-Framework** mit **WCAG-2.
 | Quality Gates | `scan`, `review`, `check` — echte Defekte vor dem Merge |
 | KI, die hilft | Skills, Workflows, Agent-Metadata — **Mensch → Framework → KI** |
 
-Gegenüber **Tailwind**: weniger Class-Sprawl, stärkere Defaults für Kontrast und Semantik.  
+### Das Tailwind-Sprawl-Problem
+
+Intensive Tailwind-Nutzung wird im HTML oft zum **Klassensalat** — ein einfacher Button braucht dann 10–15 Utilities (`flex items-center … hover:bg-blue-700 … focus:ring-2 …`). VelinStyle nutzt zwar ein `velin-`-Präfix, liefert aber **semantische, fertige Komponenten** (Utilities nur für Feinschliff) statt jedes UI aus atomaren Einzelteilen zusammenzustecken. Ergebnis: kürzeres Markup, AAA-orientierte Defaults und optionale Blueprints / `plan`-Rezepte — kein fertiges Studio-Produkt (Studio bleibt **planned**).
+
+```html
+<!-- Tailwind-Sprawl -->
+<button class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+  Speichern
+</button>
+
+<!-- VelinStyle -->
+<button class="velin-btn velin-btn--primary">Speichern</button>
+```
+
+Gegenüber **Tailwind**: weniger Class-Sprawl, stärkere Defaults für Kontrast und Semantik. Siehe den [Migrationsleitfaden](https://velinstyle.info/docs/migration-de.html).  
 Gegenüber **Bootstrap**: moderne Tokens/Layers, progressive WCs, CLI-Automation statt Legacy-JS-Chrome.
 
 ---
@@ -62,7 +78,7 @@ Gegenüber **Bootstrap**: moderne Tokens/Layers, progressive WCs, CLI-Automation
 | | Bereich | Kurz |
 |---|--------|------|
 | 🎨 | **CSS-Framework** | OKLCH-Themes, Utilities, Komponenten, Lite-Preset |
-| 🧩 | **Web Components** | 40 kanonische Custom Elements; CSS allein reicht oft |
+| 🧩 | **Web Components** | 43 kanonische Custom Elements; CSS allein reicht oft |
 | ⚡ | **Runtime** | Search, Motion, Highlight, Attributes, Tree-Shaking |
 | 🛠 | **CLI** | `create` · `serve` · `doctor` · `check` · `scan` · `review` · `skills` · `transparency` |
 | 🔎 | **Transparency** | Kennzeichnung + Nachweis (KI / Trust / Compliance / Metadaten) — Beta-Foundation |
@@ -75,9 +91,61 @@ Gegenüber **Bootstrap**: moderne Tokens/Layers, progressive WCs, CLI-Automation
 | 🛡 | **Scan Engine** | A11y, Security, CSS-Honesty, PII |
 | 🚀 | **Performance** | Lite-CSS, Chunked Runtime, CLS-Platzhalter |
 | ♿ | **Accessibility** | Contracts, WCAG-2.2-Tooling, Keyboard + ARIA |
+| 🖼 | **Atelier** | Kuratierte Bibliothek kompletter Interfaces, Layouts & Studio-Bausteine |
 
 ---
 
+## VelinStyle Atelier
+
+[Atelier](https://velinstyle.info/atelier/index.de.html) ist die Produkt-Showcase-Fläche für VelinStyle: **komplette Interfaces**, keine einzelnen Buttons und Karten. Nach Einsatzzweck browsen (Apps, Marketing, Commerce, Auth…), Live-Welten öffnen, Quellcode kopieren oder ZIPs laden.
+
+| Fläche | Was du bekommst | Link |
+|--------|-----------------|------|
+| **Atelier Home** | Brand-Hub — Warum Atelier, vier Welten, Bau-Pfade | [Öffnen](https://velinstyle.info/atelier/index.de.html) |
+| **Library** | 2.638 Templates — Filter nach Mode, Kategorie, Tags, Qualität | [Durchsuchen](https://velinstyle.info/atelier/library/) |
+| **Cascade Console** | Enterprise-/SaaS-Dashboard-Welt | [Live-Demo](https://velinstyle.info/showcase-reihe/01-enterprise-api-ai-dashboard/) |
+| **LUMEN** | Kompletter Shop — Katalog, Warenkorb, Checkout | [Live-Demo](https://velinstyle.info/showcase-reihe/02-enterprise-ecommerce-storefront/) |
+| **FORGE** | Community- & Forum-System | [Live-Demo](https://velinstyle.info/showcase-reihe/03-modern-community-forum/) |
+
+Library-Shortcuts: [Apps](https://velinstyle.info/atelier/library/?mode=apps) · [Studio-Bausteine](https://velinstyle.info/atelier/library/?mode=studio) · [Recipes](https://velinstyle.info/atelier/library/?mode=recipes) · [Marketing](https://velinstyle.info/atelier/library/?cat=marketing) · [Dashboards](https://velinstyle.info/atelier/library/?cat=dashboards) · [Auth](https://velinstyle.info/atelier/library/?cat=authentication)
+
+Englischer Hub: [atelier/](https://velinstyle.info/atelier/)
+
+---
+
+## Neu in 1.2.2
+
+**Production Release** — **Build only what your project actually uses.** / Nur bauen, was das Projekt wirklich nutzt.
+
+VelinStyle analysiert das Projekt und erzeugt ein optimiertes Produktionspaket statt das komplette Framework auszuliefern. Dazu: erste **Atelier-CLI** (Beta) und neue produktionsreife Komponenten.
+
+### Production Builder
+
+```bash
+npx velinstyle build --production --explain
+# → ./dist/velin-production/
+```
+
+- CSS nur für verwendete Komponenten · Runtime nur für benötigte Web Components
+- Themes / Icons / Motion nur bei Nutzung · Größen-Report
+
+### Atelier CLI (Beta)
+
+```bash
+npx velinstyle atelier list
+npx velinstyle atelier 24
+npx velinstyle scaffold --atelier 24
+```
+
+Atelier Library ≠ Velin Studio (Studio bleibt **planned**). Siehe [`docs/guides/atelier-cli.md`](docs/guides/atelier-cli.md).
+
+### Neue Komponenten & Verbesserungen
+
+- `<velin-otp-input>`, `<velin-password-strength>`, `<velin-empty-state>`
+- Tabellen-Severity · dynamische Overlay-Titel (Modal / Drawer / Sheet)
+
+Siehe [`RELEASE_NOTES_1.2.2.md`](RELEASE_NOTES_1.2.2.md) und [`docs/guides/production-build.md`](docs/guides/production-build.md).
+
 ## Neu in 1.2.1
 
 - **Transparency Framework (Beta)** — `@birdapi/velinstyle/transparency`, Bridge `velin-transparency`, Claim-Taxonomie, CLI `transparency doctor|validate|report|export|migrate`
@@ -99,11 +167,11 @@ bun add @birdapi/velinstyle
 **CDN** (Version pinnen):
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.2.1/dist/velinstyle.min.css">
-<script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.2.1/dist/velinstyle-components.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.2.2/dist/velinstyle.min.css">
+<script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.2.2/dist/velinstyle-components.min.js"></script>
 ```
 
-> Pin **`@1.2.1`** (oder `@latest` nach Publish). Nach Clone: `npm install && npm run build`.
+> Pin **`@1.2.2`** (oder `@latest` nach Publish). Nach Clone: `npm install && npm run build`.
 
 ---
 
@@ -126,15 +194,19 @@ Minimal-HTML und Import-Pfade: [`GETTING_STARTED.md`](GETTING_STARTED.md) · Sys
 | `check` | doctor + blueprints + scan + review (+ Transparency-Scores) |
 | `scan` / `review` | Statische bzw. Design-Intelligence-Gates |
 | `transparency` | doctor · validate · report · export · migrate (Beta) |
+| `atelier` | Library-Showcase per Nummer/ID pullen (`--format`-Wrapper) |
+| `scaffold` / `plan` | Prompt-HTML oder `--atelier`-Compose (Beta) |
 | `skills` / `workflow` | AI-Registry & Graphen (Beta) |
 | `wc api <tag>` | WC-API aus dem Source |
 | `meta` | Agent-Bundle + `llms.txt` |
 
+Atelier-Pull/Compose und **Einschränkungen** (Wrapper ≠ natives Blade/Vue/React; Studio geplant): [`docs/guides/atelier-cli.md`](docs/guides/atelier-cli.md).
+
 ---
 
 ## Komponenten & Accessibility
 
-**40 kanonische** Custom Elements (**42** Lazy-Loader inkl. Legacy-`*-wc`). Progressive Enhancement: HTML/CSS first, WC nur bei Verhalten.
+**43 kanonische** Custom Elements (**45** Lazy-Loader inkl. Legacy-`*-wc`). Progressive Enhancement: HTML/CSS first, WC nur bei Verhalten.
 
 AAA-orientierte Token-Defaults, Fokus-Management, Reduced Motion, Scanner-Contracts — siehe [A11y-Matrix](https://velinstyle.info/docs/getting-started/accessibility.html).
 
@@ -145,9 +217,9 @@ AAA-orientierte Token-Defaults, Fokus-Management, Reduced Motion, Scanner-Contra
 | Status | Surfaces |
 |--------|----------|
 | **Stable** | CSS · Runtime · WC · CLI-Kern · Blueprints |
-| **Beta** | Transparency Framework · Review · Prompt · Knowledge Graph · AI Metadata · Constraints |
+| **Beta** | Transparency Framework · Review · Prompt · Knowledge Graph · AI Metadata · Constraints · Atelier-Compose (`--atelier`) |
 | **Foundation** | AI Skills · Workflow Graphs · Registries · Transparency pillars |
-| **Planned** | Studio · Utility Engine Generator |
+| **Planned** | Velin Studio Builder · Utility Engine Generator · native Blade/Vue/React-Bausteine |
 
 ---
 
@@ -156,3 +228,54 @@ AAA-orientierte Token-Defaults, Fokus-Management, Reduced Motion, Scanner-Contra
 Siehe [`CONTRIBUTING.de.md`](CONTRIBUTING.de.md). Lizenz: [MIT](LICENSE).
 
 Vollständige englische README: [`README.md`](README.md).
+
+---
+
+## Live-Demos & Module
+
+Fertige Oberflächen erkunden — Atelier-Welten, Template-Bibliothek und klassische Demo-Module.
+
+### Atelier-Produktwelten
+
+| Modul | Fokus | Demo |
+|-------|-------|------|
+| **Cascade Console** | Enterprise-API- / AI-Dashboard | [Öffnen](https://velinstyle.info/showcase-reihe/01-enterprise-api-ai-dashboard/) |
+| **LUMEN** | E-Commerce-Storefront | [Öffnen](https://velinstyle.info/showcase-reihe/02-enterprise-ecommerce-storefront/) |
+| **FORGE** | Community-Forum | [Öffnen](https://velinstyle.info/showcase-reihe/03-modern-community-forum/) |
+| **Atelier Library** | Vollständige Template-Hub (2.638) | [Öffnen](https://velinstyle.info/atelier/library/) |
+| **Atelier Home** | Marketing-Hub (DE) | [Öffnen](https://velinstyle.info/atelier/index.de.html) |
+| **Atelier Home** | Marketing-Hub (EN) | [Öffnen](https://velinstyle.info/atelier/) |
+
+### Klassische Demo-Module
+
+| Modul | Fokus | Demo |
+|-------|-------|------|
+| **Demo-Index** | Alle klassischen Showcases | [Öffnen](https://velinstyle.info/demos/) |
+| **Crypto-Dashboard** | Dichtes Admin / Charts | [Öffnen](https://velinstyle.info/demos/showcase-crypto.html) |
+| **Dashboard** | App-Shell & KPIs | [Öffnen](https://velinstyle.info/demos/showcase-dashboard.html) |
+| **SaaS** | Product Marketing | [Öffnen](https://velinstyle.info/demos/showcase-saas.html) |
+| **E-Commerce** | Shop-Patterns | [Öffnen](https://velinstyle.info/demos/showcase-ecommerce.html) |
+| **Forum** | Community-UI | [Öffnen](https://velinstyle.info/demos/showcase-forum.html) |
+| **UI Kit** | Komponenten-Galerie | [Öffnen](https://velinstyle.info/demos/showcase-ui-kit.html) |
+| **Interactive** | WC-Verhalten | [Öffnen](https://velinstyle.info/demos/showcase-interactive.html) |
+| **Runtime** | Search / Motion / Boot | [Öffnen](https://velinstyle.info/demos/showcase-runtime.html) |
+
+### Library nach Intent
+
+| Intent | Link |
+|--------|------|
+| Applications | [library/?mode=apps](https://velinstyle.info/atelier/library/?mode=apps) |
+| Studio-Bausteine | [library/?mode=studio](https://velinstyle.info/atelier/library/?mode=studio) |
+| Recipes | [library/?mode=recipes](https://velinstyle.info/atelier/library/?mode=recipes) |
+| Marketing | [library/?cat=marketing](https://velinstyle.info/atelier/library/?cat=marketing) |
+| Dashboards | [library/?cat=dashboards](https://velinstyle.info/atelier/library/?cat=dashboards) |
+| Commerce | [library/?cat=commerce](https://velinstyle.info/atelier/library/?cat=commerce) |
+| Authentication | [library/?cat=authentication](https://velinstyle.info/atelier/library/?cat=authentication) |
+| Community | [library/?cat=community](https://velinstyle.info/atelier/library/?cat=community) |
+| Admin | [library/?cat=admin](https://velinstyle.info/atelier/library/?cat=admin) |
+
+<p align="center">
+  <a href="https://velinstyle.info/atelier/index.de.html">
+    <img src=".github/assets/readme/hero-demo.webp" alt="VelinStyle Atelier und Demo-Oberflächen" width="720">
+  </a>
+</p>

package/README.md

@@ -26,7 +26,7 @@ One framework. One CLI. One design system. One AI-ready ecosystem.
 npm i @birdapi/velinstyle
 ```
 
-**[Website](https://velinstyle.info)** · **[Docs](https://velinstyle.info/docs/getting-started/introduction.html)** · **[Demos](https://velinstyle.info/demos/)** · **[Getting Started](GETTING_STARTED.md)** · **[Architecture](ARCHITECTURE.md)** · **[Deutsch](README.de.md)**
+**[Website](https://velinstyle.info)** · **[Atelier](https://velinstyle.info/atelier/)** · **[Docs](https://velinstyle.info/docs/getting-started/introduction.html)** · **[Demos](https://velinstyle.info/demos/)** · **[Getting Started](GETTING_STARTED.md)** · **[Architecture](ARCHITECTURE.md)** · **[Deutsch](README.de.md)**
 
 </div>
 
@@ -34,10 +34,12 @@ npm i @birdapi/velinstyle
 
 VelinStyle is a **production CSS + Web Components framework** with **WCAG 2.2 AAA-oriented defaults**, a real **CLI ship surface**, the **Transparency Framework** (labeling + provenance, beta), and the first **Design Intelligence / AI Foundation** systems (beta). No external UI framework in the core.
 
-**Best fit today:** marketing landings, docs shells, simple admin starters.  
+**VelinStyle Atelier** is the curated surface on top: **2,600+ production-ready interfaces**, four complete product worlds, and a browsable library — complete screens instead of empty component fragments.
+
+**Best fit today:** marketing landings, docs shells, admin/SaaS starters, shop & community UIs via Atelier.  
 **Not yet:** sole primary stack for large multipage shop + enterprise admin without custom work.
 
-> **Release:** **1.2.1** (Transparency Framework + Core + Design Intelligence Foundation + Trust/Ship). Using VelinStyle does **not** certify your app — see the [a11y matrix](https://velinstyle.info/docs/getting-started/accessibility.html).
+> **Release:** **1.2.2** (Production Release — Production Builder + Atelier CLI). Using VelinStyle does **not** certify your app — see the [a11y matrix](https://velinstyle.info/docs/getting-started/accessibility.html).
 
 ---
 
@@ -52,7 +54,21 @@ VelinStyle is a **production CSS + Web Components framework** with **WCAG 2.2 AA
 | Quality gates | `scan`, `review`, `check` — catch real defects before merge |
 | AI that helps | Skills, workflows, and agent metadata — **Mensch → Framework → KI** |
 
-Compared to **Tailwind**: less class sprawl, stronger defaults for contrast and semantics.  
+### The Tailwind sprawl problem
+
+Heavy Tailwind use often turns HTML into a **class salad** — a simple button can need 10–15 utilities (`flex items-center … hover:bg-blue-700 … focus:ring-2 …`). VelinStyle still uses a `velin-` prefix, but ships **semantic, ready-made components** (plus utilities for one-off tweaks) instead of assembling every surface from atomic pieces. You get shorter markup, built-in a11y defaults, and optional blueprints / `plan` recipes — not a finished Studio product (Studio remains **planned**).
+
+```html
+<!-- Tailwind sprawl -->
+<button class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+  Save
+</button>
+
+<!-- VelinStyle -->
+<button class="velin-btn velin-btn--primary">Save</button>
+```
+
+Compared to **Tailwind**: less class sprawl, stronger defaults for contrast and semantics. See the [Migration Guide](https://velinstyle.info/docs/migration.html).  
 Compared to **Bootstrap**: modern tokens/layers, optional progressive WCs, CLI automation instead of jQuery-era chrome.
 
 ---
@@ -62,7 +78,7 @@ Compared to **Bootstrap**: modern tokens/layers, optional progressive WCs, CLI a
 | | Area | What it does |
 |---|------|----------------|
 | 🎨 | **CSS Framework** | OKLCH themes, utilities, components, lite preset for marketing budgets |
-| 🧩 | **Web Components** | 40 canonical custom elements; use CSS alone when you need no JS |
+| 🧩 | **Web Components** | 43 canonical custom elements; use CSS alone when you need no JS |
 | ⚡ | **Runtime** | Search, motion, highlight, attributes, `bootFromDOM` tree-shaking |
 | 🛠 | **CLI** | `create` · `serve` · `doctor` · `check` · `scan` · `review` · `skills` · `transparency` |
 | 🔎 | **Transparency** | Labeling + provenance (AI / trust / compliance / metadata) — beta foundation |
@@ -75,9 +91,61 @@ Compared to **Bootstrap**: modern tokens/layers, optional progressive WCs, CLI a
 | 🛡 | **Scan Engine** | A11y, security, CSS honesty, PII |
 | 🚀 | **Performance** | Lite CSS, chunked runtime, CLS placeholders |
 | ♿ | **Accessibility** | Contracts, WCAG 2.2 tooling, keyboard + ARIA patterns |
+| 🖼 | **Atelier** | Curated library of complete interfaces, layouts & studio blocks |
+
+---
+
+## VelinStyle Atelier
+
+[Atelier](https://velinstyle.info/atelier/) is the product showcase for VelinStyle: **complete interfaces**, not isolated buttons and cards. Browse by intent (apps, marketing, commerce, auth…), open live worlds, copy source, or download ZIPs.
+
+| Surface | What you get | Link |
+|---------|--------------|------|
+| **Atelier home** | Brand hub — why Atelier, four worlds, build paths | [Open](https://velinstyle.info/atelier/) |
+| **Library** | 2,638 templates — filter by mode, category, tags, quality | [Browse](https://velinstyle.info/atelier/library/) |
+| **Cascade Console** | Enterprise / SaaS dashboard world | [Live demo](https://velinstyle.info/showcase-reihe/01-enterprise-api-ai-dashboard/) |
+| **LUMEN** | Full shop — catalog, cart, checkout | [Live demo](https://velinstyle.info/showcase-reihe/02-enterprise-ecommerce-storefront/) |
+| **FORGE** | Community & forum system | [Live demo](https://velinstyle.info/showcase-reihe/03-modern-community-forum/) |
+
+Library shortcuts: [Apps](https://velinstyle.info/atelier/library/?mode=apps) · [Studio blocks](https://velinstyle.info/atelier/library/?mode=studio) · [Recipes](https://velinstyle.info/atelier/library/?mode=recipes) · [Marketing](https://velinstyle.info/atelier/library/?cat=marketing) · [Dashboards](https://velinstyle.info/atelier/library/?cat=dashboards) · [Auth](https://velinstyle.info/atelier/library/?cat=authentication)
+
+German Atelier hub: [atelier/index.de.html](https://velinstyle.info/atelier/index.de.html)
 
 ---
 
+## What's new in 1.2.2
+
+**Production Release** — **Build only what your project actually uses.**
+
+VelinStyle analyzes your project and creates an optimized production package instead of shipping the complete framework. This release also adds the first **Atelier CLI** (beta) and new production-ready components.
+
+### Production Builder
+
+```bash
+npx velinstyle build --production --explain
+# → ./dist/velin-production/ (CSS, JS stub, themes, icons, report)
+```
+
+- CSS only for used components · runtime only for needed Web Components
+- Themes / icons / motion only when used · size report
+
+### Atelier CLI (Beta)
+
+```bash
+npx velinstyle atelier list
+npx velinstyle atelier 24
+npx velinstyle scaffold --atelier 24
+```
+
+Atelier Library ≠ Velin Studio (Studio remains **planned**). See [`docs/guides/atelier-cli.md`](docs/guides/atelier-cli.md).
+
+### New components & improvements
+
+- `<velin-otp-input>`, `<velin-password-strength>`, `<velin-empty-state>`
+- Table severity states · dynamic overlay titles (modal / drawer / sheet)
+
+See [`RELEASE_NOTES_1.2.2.md`](RELEASE_NOTES_1.2.2.md) and [`docs/guides/production-build.md`](docs/guides/production-build.md).
+
 ## What's new in 1.2.1
 
 - **Transparency Framework (beta)** — `@birdapi/velinstyle/transparency`, `velin-transparency` bridge, claim taxonomy, CLI `transparency doctor|validate|report|export|migrate`
@@ -99,11 +167,11 @@ bun add @birdapi/velinstyle
 **CDN** (pin a version):
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.2.1/dist/velinstyle.min.css">
-<script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.2.1/dist/velinstyle-components.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.2.2/dist/velinstyle.min.css">
+<script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.2.2/dist/velinstyle-components.min.js"></script>
 ```
 
-> Pin **`@1.2.1`** (or `@latest` after publish). Examples above match this package version.
+> Pin **`@1.2.2`** (or `@latest` after publish). Examples above match this package version.
 
 | Export | Use |
 |--------|-----|
@@ -123,8 +191,8 @@ After clone: `npm install && npm run build` — `dist/` is generated, not commit
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.2.1/dist/velinstyle.min.css">
-  <script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.2.1/dist/velinstyle-components.min.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@1.2.2/dist/velinstyle.min.css">
+  <script type="module" src="https://unpkg.com/@birdapi/velinstyle@1.2.2/dist/velinstyle-components.min.js"></script>
 </head>
 <body class="velin-p-6">
   <button type="button" class="velin-btn velin-btn--primary">Ship it</button>
@@ -157,7 +225,9 @@ More: [`GETTING_STARTED.md`](GETTING_STARTED.md)
 | `scan` | A11y / security / CSS / PII |
 | `review` | Design-intelligence gate (beta) |
 | `transparency` | doctor · validate · report · export · migrate (beta) |
-| `plan` | Prompt → plan JSON → render (beta) |
+| `plan` | Prompt → plan JSON → render (beta); `--atelier` Library plan (beta) |
+| `scaffold` | Prompt HTML or `--atelier` Library compose (beta) |
+| `atelier` | Pull curated Library showcase by number/id (`--format` wrappers) |
 | `skills` / `workflow` | AI skill registry & graphs (beta) |
 | `meta` | Agent bundle + `llms.txt` |
 | `wc api <tag>` | Human-readable WC API from source |
@@ -165,9 +235,13 @@ More: [`GETTING_STARTED.md`](GETTING_STARTED.md)
 ```bash
 npx @birdapi/velinstyle check . --profile marketing
 npx @birdapi/velinstyle transparency doctor . --policy examples/transparency.policy.json
+npx @birdapi/velinstyle atelier 36 -o ./velin-atelier/36-calendar
+npx @birdapi/velinstyle scaffold --atelier 04,07 -o compose.html
 npx @birdapi/velinstyle wc api velin-toast
 ```
 
+Atelier pull / compose details and **limitations** (wrappers ≠ native Blade/Vue/React; Studio planned): [`docs/guides/atelier-cli.md`](docs/guides/atelier-cli.md).
+
 ---
 
 ## AI Skills & Design Intelligence
@@ -176,13 +250,15 @@ npx @birdapi/velinstyle wc api velin-toast
 
 **Design Intelligence** adds structure ordinary CSS frameworks lack: a knowledge graph seed, page/section registries, design constraints, and `plan` / `review` so pages are assembled from known patterns — then checked against profiles (`marketing` · `app` · `docs` · `ecommerce`).
 
+**Atelier compose (beta):** `scaffold --atelier` / `plan --atelier` can assemble pages from curated **Atelier Library** ids. This is Library compose — **not** Velin Studio (planned). Framework `--format` shells are wrappers only; native Blade/Vue/React blocks are planned later. See [`docs/guides/atelier-cli.md`](docs/guides/atelier-cli.md).
+
 Deep dive: [`ARCHITECTURE.md`](ARCHITECTURE.md) · [`VELINSTYLE_2030.md`](VELINSTYLE_2030.md) · Strategy (lokal, nicht im Git): [`docs/strategy/README.md`](docs/strategy/README.md)
 
 ---
 
 ## Components
 
-**40 canonical** custom elements (**42** lazy-loader entries including legacy `*-wc` aliases).
+**43 canonical** custom elements (**45** lazy-loader entries including legacy `*-wc` aliases).
 
 Philosophy: **progressive enhancement** — semantic HTML + CSS first; upgrade to a Web Component only when you need behavior (focus traps, sorting, offline search).
 
@@ -220,8 +296,9 @@ Docs: [a11y matrix](https://velinstyle.info/docs/getting-started/accessibility.h
 | CLI ship surface | [`docs/guides/cli-ship-surface.md`](docs/guides/cli-ship-surface.md) | create / check / wc |
 | AI Skills | [`docs/guides/ai-skills.md`](docs/guides/ai-skills.md) | Skills / workflows |
 | Product site | [velinstyle.info/docs](https://velinstyle.info/docs/getting-started/introduction.html) | Guides, demos, reference |
+| Atelier | [velinstyle.info/atelier](https://velinstyle.info/atelier/) | Template library + product worlds |
 | Transparency | [Site guide](https://velinstyle.info/docs/guides/transparency.html) · `@birdapi/velinstyle/transparency` | Labeling + provenance |
-| Upgrade | [`UPGRADING.md`](UPGRADING.md) | 1.2.0 → 1.2.1 · 1.1 → 1.2 |
+| Upgrade | [`UPGRADING.md`](UPGRADING.md) | 1.2.1 → 1.2.2 · 1.2.0 → 1.2.1 · 1.1 → 1.2 |
 | North star | [`VELINSTYLE_2030.md`](VELINSTYLE_2030.md) | Long-term vision |
 
 ---
@@ -260,7 +337,7 @@ Humans own product intent. The framework ships reliable CSS and components. Desi
 | **Stable** | CSS · Utilities · Runtime · Web Components · CLI core · Blueprints |
 | **Beta** | Transparency Framework · Review Engine · Prompt Engine · Knowledge Graph · AI Metadata · Design Constraints |
 | **Foundation** | AI Skills · Workflow Graphs · Registries · Transparency pillars |
-| **Planned** | Studio · Utility Engine Generator |
+| **Planned** | Velin Studio builder · Utility Engine Generator · native Blade/Vue/React blocks |
 
 ---
 
@@ -269,6 +346,7 @@ Humans own product intent. The framework ships reliable CSS and components. Desi
 | | Bootstrap | Tailwind | **VelinStyle** |
 |---|:---:|:---:|:---:|
 | HTML readability | Medium | Low | **High** |
+| Markup density | Low | High | **Controlled** |
 | Utility sprawl | Low | High | **Controlled** |
 | A11y defaults | Partial | DIY | **AAA-capable tokens** |
 | Dark mode | Manual | `dark:` everywhere | **Token swap** |
@@ -291,8 +369,53 @@ See [`CONTRIBUTING.md`](CONTRIBUTING.md).
 
 [MIT](LICENSE) — © 2026 VelinStyle · [SkyliteDesign](https://github.com/SkyliteDesign)
 
+---
+
+## Live demos & modules
+
+Explore finished surfaces — Atelier worlds, the template library, and classic component demos.
+
+### Atelier product worlds
+
+| Module | Focus | Demo |
+|--------|-------|------|
+| **Cascade Console** | Enterprise API / AI dashboard | [Open](https://velinstyle.info/showcase-reihe/01-enterprise-api-ai-dashboard/) |
+| **LUMEN** | E-commerce storefront | [Open](https://velinstyle.info/showcase-reihe/02-enterprise-ecommerce-storefront/) |
+| **FORGE** | Community forum | [Open](https://velinstyle.info/showcase-reihe/03-modern-community-forum/) |
+| **Atelier Library** | Full template hub (2,638) | [Open](https://velinstyle.info/atelier/library/) |
+| **Atelier home** | Marketing hub (EN) | [Open](https://velinstyle.info/atelier/) |
+| **Atelier home** | Marketing hub (DE) | [Open](https://velinstyle.info/atelier/index.de.html) |
+
+### Classic demo modules
+
+| Module | Focus | Demo |
+|--------|-------|------|
+| **Demo index** | All classic showcases | [Open](https://velinstyle.info/demos/) |
+| **Crypto dashboard** | Dense admin / charts | [Open](https://velinstyle.info/demos/showcase-crypto.html) |
+| **Dashboard** | App shell & KPIs | [Open](https://velinstyle.info/demos/showcase-dashboard.html) |
+| **SaaS** | Product marketing | [Open](https://velinstyle.info/demos/showcase-saas.html) |
+| **E-commerce** | Shop patterns | [Open](https://velinstyle.info/demos/showcase-ecommerce.html) |
+| **Forum** | Community UI | [Open](https://velinstyle.info/demos/showcase-forum.html) |
+| **UI Kit** | Component gallery | [Open](https://velinstyle.info/demos/showcase-ui-kit.html) |
+| **Interactive** | WC behavior samples | [Open](https://velinstyle.info/demos/showcase-interactive.html) |
+| **Runtime** | Search / motion / boot | [Open](https://velinstyle.info/demos/showcase-runtime.html) |
+
+### Library by intent
+
+| Intent | Link |
+|--------|------|
+| Applications | [library/?mode=apps](https://velinstyle.info/atelier/library/?mode=apps) |
+| Studio blocks | [library/?mode=studio](https://velinstyle.info/atelier/library/?mode=studio) |
+| Recipes | [library/?mode=recipes](https://velinstyle.info/atelier/library/?mode=recipes) |
+| Marketing | [library/?cat=marketing](https://velinstyle.info/atelier/library/?cat=marketing) |
+| Dashboards | [library/?cat=dashboards](https://velinstyle.info/atelier/library/?cat=dashboards) |
+| Commerce | [library/?cat=commerce](https://velinstyle.info/atelier/library/?cat=commerce) |
+| Authentication | [library/?cat=authentication](https://velinstyle.info/atelier/library/?cat=authentication) |
+| Community | [library/?cat=community](https://velinstyle.info/atelier/library/?cat=community) |
+| Admin | [library/?cat=admin](https://velinstyle.info/atelier/library/?cat=admin) |
+
 <p align="center">
-  <a href="https://velinstyle.info/demos/showcase-crypto.html">
-    <img src=".github/assets/readme/hero-demo.webp" alt="VelinStyle crypto dashboard demo" width="720">
+  <a href="https://velinstyle.info/atelier/">
+    <img src=".github/assets/readme/hero-demo.webp" alt="VelinStyle Atelier and demo surfaces" width="720">
   </a>
 </p>

package/cli/__fixtures__/atelier-library/showcases/01-login/app.css

@@ -0,0 +1 @@
+[data-fixture="01-login"] { padding: 1rem; }

package/cli/__fixtures__/atelier-library/showcases/01-login/app.js

@@ -0,0 +1,2 @@
+const root = document.getElementById('root');
+root.innerHTML = '<section class="velin-section" data-fixture="01-login"><h1>Fixture Login</h1></section>';

package/cli/__fixtures__/atelier-library/showcases/01-login/index.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8"><title>Fixture Login</title>
+<link rel="stylesheet" href="app.css"></head>
+<body><div id="root" data-atelier-id="01-login"></div>
+<script type="module" src="app.js"></script></body></html>

package/cli/__fixtures__/atelier-library/showcases/04-pricing/app.css

@@ -0,0 +1 @@
+[data-fixture="04-pricing"] { padding: 1rem; }

package/cli/__fixtures__/atelier-library/showcases/04-pricing/app.js

@@ -0,0 +1,2 @@
+const root = document.getElementById('root');
+root.innerHTML = '<section class="velin-section" data-fixture="04-pricing"><h1>Fixture Pricing</h1></section>';

package/cli/__fixtures__/atelier-library/showcases/04-pricing/index.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8"><title>Fixture Pricing</title>
+<link rel="stylesheet" href="app.css"></head>
+<body><div id="root" data-atelier-id="04-pricing"></div>
+<script type="module" src="app.js"></script></body></html>

package/cli/__fixtures__/atelier-library/showcases/36-calendar/app.css

@@ -0,0 +1 @@
+[data-fixture="36-calendar"] { padding: 1rem; }

package/cli/__fixtures__/atelier-library/showcases/36-calendar/app.js

@@ -0,0 +1,2 @@
+const root = document.getElementById('root');
+root.innerHTML = '<section class="velin-section" data-fixture="36-calendar"><h1>Fixture Calendar</h1></section>';

package/cli/__fixtures__/atelier-library/showcases/36-calendar/index.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8"><title>Fixture Calendar</title>
+<link rel="stylesheet" href="app.css"></head>
+<body><div id="root" data-atelier-id="36-calendar"></div>
+<script type="module" src="app.js"></script></body></html>