@jonathankablan/noraivoire-mcp 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,64 @@
+NORAIVOIRE — LICENCE PROPRIÉTAIRE
+Copyright (c) 2026 Jonathan KABLAN. Tous droits réservés.
+
+Le présent logiciel, incluant sans limitation son code source, ses spécifications
+(fichiers .nora.json), son compilateur, son moteur d'effets, ses adaptateurs, ses
+modèles (templates), sa documentation, ses jeux de tests et ses éléments graphiques
+(ci-après « le Logiciel »), est la propriété exclusive de Jonathan KABLAN
+(ci-après « le Titulaire »).
+
+1. ABSENCE DE LICENCE OPEN SOURCE
+   Le Logiciel n'est pas distribué sous une licence open source. Aucun droit
+   n'est concédé implicitement, par estoppel ou autrement. La simple mise à
+   disposition du Logiciel, y compris dans un dépôt privé ou un registre de
+   paquets privé, ne vaut pas concession de licence.
+
+2. USAGE AUTORISÉ
+   Tout usage du Logiciel est subordonné à un contrat de licence écrit et signé
+   par le Titulaire (ci-après « Contrat de Licence »). En l'absence d'un tel
+   contrat, seul le Titulaire est autorisé à utiliser le Logiciel.
+
+3. INTERDICTIONS
+   Sauf autorisation écrite et préalable du Titulaire, il est interdit de :
+   a) copier, reproduire, modifier, adapter, traduire ou créer des œuvres
+      dérivées du Logiciel, en tout ou partie ;
+   b) distribuer, publier, sous-licencier, louer, prêter, vendre ou mettre à
+      disposition le Logiciel à des tiers, y compris sous forme de service
+      (SaaS) ou intégré dans un autre produit distribué ;
+   c) décompiler, désassembler ou procéder à de l'ingénierie inverse du
+      Logiciel, sauf dans les limites strictement prévues par l'article
+      L.122-6-1 du Code de la propriété intellectuelle ;
+   d) supprimer ou altérer les mentions de propriété, de copyright ou la
+      présente licence ;
+   e) utiliser le Logiciel, ses spécifications ou sa documentation pour
+      entraîner, affiner ou évaluer un modèle d'intelligence artificielle
+      destiné à des tiers, ou pour concevoir un produit concurrent.
+
+4. PRODUITS GÉNÉRÉS
+   Les fichiers produits par le compilateur NoraIvoire pour le compte d'un
+   licencié (CSS, Dart, TypeScript générés) peuvent être intégrés dans les
+   applications de ce licencié dans les conditions fixées par son Contrat de
+   Licence. Ils ne peuvent pas être redistribués en tant que bibliothèque,
+   framework ou kit de design autonome.
+
+5. CONFIDENTIALITÉ
+   Le Logiciel contient des informations confidentielles et des secrets
+   d'affaires du Titulaire. Toute personne y ayant accès s'engage à en
+   préserver la confidentialité.
+
+6. ABSENCE DE GARANTIE
+   Sauf stipulation contraire du Contrat de Licence, le Logiciel est fourni
+   « EN L'ÉTAT », sans garantie d'aucune sorte, expresse ou implicite. Dans
+   les limites autorisées par la loi, le Titulaire ne saurait être tenu
+   responsable d'aucun dommage résultant de l'utilisation du Logiciel.
+
+7. COMPOSANTS TIERS
+   Le Logiciel peut référencer des composants tiers soumis à leurs propres
+   licences, listés dans THIRD_PARTY_NOTICES.md. La présente licence ne
+   modifie pas ces licences.
+
+8. DROIT APPLICABLE
+   La présente licence est régie par le droit français. Tout litige relève de
+   la compétence des tribunaux du ressort de la Cour d'appel de Paris.
+
+Contact licences : jonathan.kablan@gmail.com

package/README.md

@@ -1,3 +1,143 @@
-# Temporary Holding Version
+# @jonathankablan/noraivoire-mcp — Serveur MCP NoraIvoire
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+© 2026 Jonathan KABLAN — Propriétaire, tous droits réservés. Usage réservé aux licenciés.
+
+Serveur [Model Context Protocol](https://modelcontextprotocol.io) qui donne aux agents IA (Claude Code, Claude Desktop, Cursor, VS Code…) un accès **en lecture seule** au contrat NoraIvoire : composants, tokens, validation `nora check` et recettes d'écrans.
+
+- Transport **stdio**, un message JSON-RPC 2.0 par ligne. Serveur *dual-era* : requêtes sans état de la spec `2026-07-28` (version et capacités dans le `_meta` de chaque requête, `server/discover`) et poignée de main `initialize` des versions `2025-11-25`, `2025-06-18`, `2025-03-26`, `2024-11-05` (la version demandée est retenue si elle est connue, sinon la plus récente).
+- **Zéro dépendance** : Node ≥ 20 suffit.
+- Aucune exécution de commande, aucun réseau, aucune écriture disque (contrôlé par `nora audit`, contrôle `mcp:read-only`).
+
+## Outils
+
+| Outil | Arguments | Renvoie |
+|---|---|---|
+| `nora_get_component` | `name` (ex. `btn`, `card`, `tilt`) | Définition du composant ou de l'effet : éléments, `data-tone`, `data-size`, tokens, accessibilité |
+| `nora_list_tokens` | `group` facultatif (`color`, `space`, `radius`, `font`, `duration`) | Liste des groupes, ou variables CSS du groupe |
+| `nora_validate` | `markup`, `format` (`html` par défaut, `jsx`, `tsx`, `vue`, `twig`, `jsp`, `angular`, `svelte`) | `{ valid, errors, warnings, issues[] }`, chaque problème avec sa correction `fix` |
+| `nora_recipe` | `intent` (« connexion », « tarifs », « panier »…) | `{ id, title, components, html }` de l'écran de référence |
+
+Tous les outils portent `readOnlyHint: true`, `destructiveHint: false`, `idempotentHint: true`, `openWorldHint: false`. Les résultats sont fournis en texte (JSON) et en `structuredContent`. Une erreur d'usage (composant inconnu, entrée trop longue, aucune recette) est un résultat `isError: true` lisible par l'agent, pas une erreur de protocole.
+
+## Fichiers lus
+
+| Fichier | Quand |
+|---|---|
+| `packages/core/dist/manifest.json` | Au démarrage (lancer `npm run build` s'il manque) |
+| `recipes/index.json` et les fichiers `.html` qu'il référence | À chaque appel de `nora_recipe` |
+
+Le dossier des recettes peut être changé avec la variable `NORA_MCP_RECIPES`. Les noms de fichiers de recettes sont en liste blanche (`[a-z0-9-].html`), sans sous-dossier ni lien symbolique.
+
+## Limites
+
+| Limite | Valeur |
+|---|---|
+| Message JSON-RPC entrant | 2 Mio de caractères (au-delà : erreur `-32600`, le serveur continue) |
+| `markup` de `nora_validate` | 200 Kio de caractères |
+| Autres arguments | 256 caractères |
+| Portée de `nora_get_component` | Composants et effets uniquement : ni utilitaires ni primitives de mise en page (voir `llms-full.txt`) |
+| `recipes/index.json` / fichier de recette | 256 Kio chacun, 500 recettes au plus |
+
+Les lots JSON-RPC (tableaux) ne sont pas acceptés, conformément au protocole MCP depuis la version `2025-06-18`.
+
+## Installation depuis npm
+
+```bash
+npm install --save-dev @jonathankablan/noraivoire-mcp
+claude mcp add nora -- npx -y @jonathankablan/noraivoire-mcp
+```
+
+Configuration JSON équivalente (Claude Desktop, Cursor, VS Code) : `"command": "npx"`, `"args": ["-y", "@jonathankablan/noraivoire-mcp"]`. Le paquet embarque le manifest (dépendance `@jonathankablan/noraivoire-core`) et les 20 recettes ; `NORA_MCP_RECIPES` reste disponible pour une autre bibliothèque. Les configurations ci-dessous lancent le serveur depuis le dépôt source.
+
+## Configuration
+
+Les chemins ci-dessous sont relatifs à la racine du dépôt ; remplacez-les par un chemin absolu si le client ne démarre pas le serveur depuis cette racine.
+
+### Claude Code
+
+```bash
+claude mcp add nora -- node packages/mcp/src/server.js
+# portée projet, partagée avec l'équipe via .mcp.json :
+claude mcp add --scope project nora -- node packages/mcp/src/server.js
+```
+
+Ou directement dans `.mcp.json` à la racine du projet :
+
+```json
+{
+  "mcpServers": {
+    "nora": {
+      "type": "stdio",
+      "command": "node",
+      "args": ["packages/mcp/src/server.js"]
+    }
+  }
+}
+```
+
+Vérifier avec `claude mcp list` puis `/mcp` dans une session.
+
+### Claude Desktop
+
+`claude_desktop_config.json` (menu Réglages › Développeur › Modifier la configuration) :
+
+```json
+{
+  "mcpServers": {
+    "nora": {
+      "command": "node",
+      "args": ["/chemin/absolu/vers/noraivoire/packages/mcp/src/server.js"]
+    }
+  }
+}
+```
+
+### Cursor
+
+`.cursor/mcp.json` dans le projet (ou `~/.cursor/mcp.json`) :
+
+```json
+{
+  "mcpServers": {
+    "nora": {
+      "command": "node",
+      "args": ["${workspaceFolder}/packages/mcp/src/server.js"]
+    }
+  }
+}
+```
+
+### VS Code (GitHub Copilot, mode agent)
+
+`.vscode/mcp.json` :
+
+```json
+{
+  "servers": {
+    "nora": {
+      "type": "stdio",
+      "command": "node",
+      "args": ["${workspaceFolder}/packages/mcp/src/server.js"]
+    }
+  }
+}
+```
+
+### Autres clients
+
+Tout client MCP compatible stdio : commande `node`, argument le chemin de `packages/mcp/src/server.js`, variable facultative `NORA_MCP_RECIPES`. Le binaire `nora-mcp` est fourni par le paquet npm (voir « Installation depuis npm »).
+
+## Essai manuel
+
+```bash
+printf '%s\n' \
+  '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-06-18","capabilities":{},"clientInfo":{"name":"essai","version":"1"}}}' \
+  '{"jsonrpc":"2.0","id":2,"method":"tools/call","params":{"name":"nora_validate","arguments":{"markup":"<button class=\"btn btn-primary\">OK</button>"}}}' \
+  | node packages/mcp/src/server.js
+```
+
+## Tests
+
+`tests/unit/mcp.test.js` lance le serveur en sous-processus et dialogue en JSON-RPC : poignée de main, liste des outils, chaque outil, erreurs JSON-RPC, traversée de chemin, lien symbolique, index absent, entrées trop grandes.
+
+Logiciel propriétaire © 2026 Jonathan KABLAN, tous droits réservés (voir LICENSE). La mise à disposition sur npm ne vaut pas concession de licence : tout usage est subordonné à un contrat de licence écrit.

package/package.json

@@ -1,6 +1,34 @@
 {
   "name": "@jonathankablan/noraivoire-mcp",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "license": "UNLICENSED",
+  "description": "Serveur MCP NoraIvoire (stdio, lecture seule) : composants, tokens, validation et recettes pour les agents IA. Propriétaire.",
+  "author": "Jonathan KABLAN",
+  "type": "module",
+  "bin": {
+    "nora-mcp": "src/server.js"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "@jonathankablan/noraivoire-cli": "0.1.1",
+    "@jonathankablan/noraivoire-core": "0.1.1"
+  },
+  "keywords": [
+    "noraivoire",
+    "mcp",
+    "model-context-protocol",
+    "ai"
+  ],
+  "files": [
+    "src",
+    "README.md",
+    "recipes",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/recipes/about.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<!-- NoraIvoire — recette « À propos et équipe ». © 2026 Jonathan KABLAN — Propriétaire. -->
+<!-- Présentation de l'entreprise et de l'équipe. Données fictives. Aucun JS inline (CSP stricte). -->
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>À propos et équipe — NoraIvoire</title>
+  <link rel="stylesheet" href="../packages/core/dist/noraivoire.css">
+  <script type="module" src="../packages/core/dist/noraivoire.auto.js"></script>
+</head>
+<body>
+  <header>
+    <nav class="navbar" aria-label="Navigation principale">
+      <a class="navbar-brand" href="home.html">Boutique Démo</a>
+      <ul class="navbar-menu">
+        <li><a href="products.html">Produits</a></li>
+        <li><a href="pricing.html">Tarifs</a></li>
+        <li><a href="search.html">Recherche</a></li>
+      </ul>
+      <div class="navbar-actions">
+        <a class="btn" data-tone="neutral" data-size="sm" href="cart.html">Panier <span class="badge" data-tone="primary">2</span></a>
+      </div>
+    </nav>
+  </header>
+  <main class="container stack py-8">
+    <section class="stack" aria-labelledby="titre">
+      <h1 id="titre" class="text-xl font-bold">À propos</h1>
+      <p class="text-lg text-muted">Nous travaillons avec des ateliers indépendants depuis 2020.</p>
+    </section>
+    <section class="stack" aria-labelledby="equipe">
+      <h2 id="equipe" class="text-lg font-bold">L'équipe</h2>
+      <ul class="grid-auto p-0">
+      <li class="card stack text-center">
+        <span class="avatar mx-auto" data-tone="primary" data-size="lg" aria-hidden="true">A</span>
+        <h3 class="font-bold">Membre A</h3>
+        <p class="text-sm text-muted">Direction</p>
+      </li>
+      <li class="card stack text-center">
+        <span class="avatar mx-auto" data-tone="success" data-size="lg" aria-hidden="true">B</span>
+        <h3 class="font-bold">Membre B</h3>
+        <p class="text-sm text-muted">Design</p>
+      </li>
+      <li class="card stack text-center">
+        <span class="avatar mx-auto" data-tone="warning" data-size="lg" aria-hidden="true">C</span>
+        <h3 class="font-bold">Membre C</h3>
+        <p class="text-sm text-muted">Logistique</p>
+      </li>
+      <li class="card stack text-center">
+        <span class="avatar mx-auto" data-tone="neutral" data-size="lg" aria-hidden="true">D</span>
+        <h3 class="font-bold">Membre D</h3>
+        <p class="text-sm text-muted">Service client</p>
+      </li>
+      </ul>
+    </section>
+    <div class="cluster">
+      <a class="btn" href="contact.html">Nous écrire</a>
+    </div>
+  </main>
+  <footer class="container py-8 text-sm text-muted">
+    <p>© 2026 Boutique Démo — données fictives. <a class="link" data-tone="neutral" href="contact.html">Contact</a> · <a class="link" data-tone="neutral" href="about.html">À propos</a></p>
+  </footer>
+</body>
+</html>

package/recipes/cart.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<!-- NoraIvoire — recette « Panier ». © 2026 Jonathan KABLAN — Propriétaire. -->
+<!-- Récapitulatif des articles et total. Données fictives. Aucun JS inline (CSP stricte). -->
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Panier — NoraIvoire</title>
+  <link rel="stylesheet" href="../packages/core/dist/noraivoire.css">
+  <script type="module" src="../packages/core/dist/noraivoire.auto.js"></script>
+</head>
+<body>
+  <header>
+    <nav class="navbar" aria-label="Navigation principale">
+      <a class="navbar-brand" href="home.html">Boutique Démo</a>
+      <ul class="navbar-menu">
+        <li><a href="products.html">Produits</a></li>
+        <li><a href="pricing.html">Tarifs</a></li>
+        <li><a href="search.html">Recherche</a></li>
+      </ul>
+      <div class="navbar-actions">
+        <a class="btn" data-tone="neutral" data-size="sm" href="cart.html" aria-current="page">Panier <span class="badge" data-tone="primary">2</span></a>
+      </div>
+    </nav>
+  </header>
+  <main class="container stack py-8">
+    <h1 class="text-xl font-bold">Mon panier</h1>
+    <ul class="stack" aria-label="Articles">
+      <li class="card cluster">
+        <span class="font-bold">Lampe en rotin</span>
+        <span class="text-muted">1 × 45,00 €</span>
+        <button class="btn" data-tone="danger" data-size="sm" type="button" aria-label="Retirer la lampe en rotin">Retirer</button>
+      </li>
+      <li class="card cluster">
+        <span class="font-bold">Tasse en céramique</span>
+        <span class="text-muted">2 × 12,00 €</span>
+        <button class="btn" data-tone="danger" data-size="sm" type="button" aria-label="Retirer la tasse en céramique">Retirer</button>
+      </li>
+    </ul>
+    <section class="card stack" aria-labelledby="total">
+      <h2 id="total" class="text-lg font-bold">Total : 69,00 €</h2>
+      <p class="text-sm text-muted">Livraison calculée à l'étape suivante.</p>
+      <div class="cluster">
+        <a class="btn" href="checkout.html" data-size="lg">Passer commande</a>
+        <a class="btn" data-tone="neutral" href="products.html">Continuer mes achats</a>
+      </div>
+    </section>
+  </main>
+  <footer class="container py-8 text-sm text-muted">
+    <p>© 2026 Boutique Démo — données fictives. <a class="link" data-tone="neutral" href="contact.html">Contact</a> · <a class="link" data-tone="neutral" href="about.html">À propos</a></p>
+  </footer>
+</body>
+</html>

package/recipes/checkout.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<!-- NoraIvoire — recette « Paiement ». © 2026 Jonathan KABLAN — Propriétaire. -->
+<!-- Adresse de livraison, mode de paiement et total. Données fictives. Aucun JS inline (CSP stricte). -->
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Paiement — NoraIvoire</title>
+  <link rel="stylesheet" href="../packages/core/dist/noraivoire.css">
+  <script type="module" src="../packages/core/dist/noraivoire.auto.js"></script>
+</head>
+<body>
+  <header>
+    <nav class="navbar" aria-label="Navigation principale">
+      <a class="navbar-brand" href="home.html">Boutique Démo</a>
+      <ul class="navbar-menu">
+        <li><a href="products.html">Produits</a></li>
+        <li><a href="pricing.html">Tarifs</a></li>
+        <li><a href="search.html">Recherche</a></li>
+      </ul>
+      <div class="navbar-actions">
+        <a class="btn" data-tone="neutral" data-size="sm" href="cart.html">Panier <span class="badge" data-tone="primary">2</span></a>
+      </div>
+    </nav>
+  </header>
+  <main class="container stack py-8">
+    <h1 class="text-xl font-bold">Paiement</h1>
+    <form class="grid-auto" action="#" method="post">
+      <section class="card">
+      <fieldset class="stack">
+        <legend class="text-lg font-bold">Livraison</legend>
+        <div class="field">
+          <label class="field-label" for="nom">Nom complet</label>
+          <input class="input" id="nom" name="nom" type="text" autocomplete="name" required>
+        </div>
+        <div class="field">
+          <label class="field-label" for="adresse">Adresse</label>
+          <input class="input" id="adresse" name="adresse" type="text" autocomplete="street-address" required>
+        </div>
+        <div class="field">
+          <label class="field-label" for="ville">Ville</label>
+          <input class="input" id="ville" name="ville" type="text" autocomplete="address-level2" required>
+        </div>
+      </fieldset>
+      </section>
+      <section class="card">
+      <fieldset class="stack">
+        <legend class="text-lg font-bold">Mode de paiement</legend>
+        <fieldset class="field">
+          <legend class="field-label">Moyen de paiement</legend>
+          <label class="radio"><input type="radio" name="mode" value="carte" checked> Carte bancaire</label>
+          <label class="radio"><input type="radio" name="mode" value="mobile"> Paiement mobile</label>
+        </fieldset>
+        <p class="text-sm text-muted">Le paiement est confié à votre prestataire certifié : aucune donnée de carte ne transite par cette page.</p>
+        <p class="text-lg font-bold">Total : 69,00 €</p>
+        <button class="btn w-full" type="submit" data-size="lg">Payer 69,00 €</button>
+      </fieldset>
+      </section>
+    </form>
+  </main>
+  <footer class="container py-8 text-sm text-muted">
+    <p>© 2026 Boutique Démo — données fictives. <a class="link" data-tone="neutral" href="contact.html">Contact</a> · <a class="link" data-tone="neutral" href="about.html">À propos</a></p>
+  </footer>
+</body>
+</html>

package/recipes/contact.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<!-- NoraIvoire — recette « Contact ». © 2026 Jonathan KABLAN — Propriétaire. -->
+<!-- Formulaire de contact et coordonnées. Données fictives. Aucun JS inline (CSP stricte). -->
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Contact — NoraIvoire</title>
+  <link rel="stylesheet" href="../packages/core/dist/noraivoire.css">
+  <script type="module" src="../packages/core/dist/noraivoire.auto.js"></script>
+</head>
+<body>
+  <header>
+    <nav class="navbar" aria-label="Navigation principale">
+      <a class="navbar-brand" href="home.html">Boutique Démo</a>
+      <ul class="navbar-menu">
+        <li><a href="products.html">Produits</a></li>
+        <li><a href="pricing.html">Tarifs</a></li>
+        <li><a href="search.html">Recherche</a></li>
+      </ul>
+      <div class="navbar-actions">
+        <a class="btn" data-tone="neutral" data-size="sm" href="cart.html">Panier <span class="badge" data-tone="primary">2</span></a>
+      </div>
+    </nav>
+  </header>
+  <main class="container grid-auto py-8">
+    <section class="card stack" aria-labelledby="titre">
+      <h1 id="titre" class="text-xl font-bold">Nous contacter</h1>
+      <form class="stack" action="#" method="post">
+        <div class="field">
+          <label class="field-label" for="nom">Nom</label>
+          <input class="input" id="nom" name="nom" type="text" autocomplete="name" required>
+        </div>
+        <div class="field">
+          <label class="field-label" for="email">Adresse e-mail</label>
+          <input class="input" id="email" name="email" type="email" autocomplete="email" required>
+        </div>
+        <div class="field">
+          <label class="field-label" for="sujet">Sujet</label>
+          <select class="select" id="sujet" name="sujet"><option>Commande</option><option>Partenariat</option><option>Autre</option></select>
+        </div>
+        <div class="field">
+          <label class="field-label" for="message">Message</label>
+          <textarea class="textarea" id="message" name="message" rows="6" required></textarea>
+        </div>
+        <button class="btn" type="submit">Envoyer</button>
+      </form>
+    </section>
+    <section class="card stack" aria-labelledby="coord">
+      <h2 id="coord" class="text-lg font-bold">Coordonnées</h2>
+      <p class="text-muted">contact@example.com</p>
+      <p class="text-muted">Réponse sous 2 jours ouvrés.</p>
+    </section>
+  </main>
+  <footer class="container py-8 text-sm text-muted">
+    <p>© 2026 Boutique Démo — données fictives. <a class="link" data-tone="neutral" href="contact.html">Contact</a> · <a class="link" data-tone="neutral" href="about.html">À propos</a></p>
+  </footer>
+</body>
+</html>

package/recipes/dashboard.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<!-- NoraIvoire — recette « Tableau de bord ». © 2026 Jonathan KABLAN — Propriétaire. -->
+<!-- Indicateurs clés et dernières commandes. Données fictives. Aucun JS inline (CSP stricte). -->
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tableau de bord — NoraIvoire</title>
+  <link rel="stylesheet" href="../packages/core/dist/noraivoire.css">
+  <script type="module" src="../packages/core/dist/noraivoire.auto.js"></script>
+</head>
+<body>
+  <header>
+    <nav class="navbar" aria-label="Navigation de l'application">
+      <a class="navbar-brand" href="dashboard.html">Espace Démo</a>
+      <ul class="navbar-menu">
+        <li><a href="dashboard.html" aria-current="page">Tableau de bord</a></li>
+        <li><a href="notifications.html">Notifications <span class="badge" data-tone="danger">3</span></a></li>
+        <li><a href="profile.html">Profil</a></li>
+        <li><a href="settings.html">Paramètres</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main class="container stack py-8">
+    <div class="cluster">
+      <h1 class="text-xl font-bold">Tableau de bord</h1>
+      <a class="btn" data-size="sm" href="products.html">Nouveau produit</a>
+    </div>
+    <section class="grid-auto" aria-label="Indicateurs">
+      <article class="card stack gap-2">
+        <h2 class="text-sm text-muted">Chiffre d'affaires</h2>
+        <p class="text-xl font-bold">12 480 €</p>
+        <span class="badge" data-tone="success">+8 %</span>
+      </article>
+      <article class="card stack gap-2">
+        <h2 class="text-sm text-muted">Commandes</h2>
+        <p class="text-xl font-bold">342</p>
+        <span class="badge" data-tone="success">+3 %</span>
+      </article>
+      <article class="card stack gap-2">
+        <h2 class="text-sm text-muted">Paniers abandonnés</h2>
+        <p class="text-xl font-bold">27</p>
+        <span class="badge" data-tone="warning">+5 %</span>
+      </article>
+      <article class="card stack gap-2">
+        <h2 class="text-sm text-muted">Remboursements</h2>
+        <p class="text-xl font-bold">4</p>
+        <span class="badge" data-tone="danger">+1</span>
+      </article>
+    </section>
+    <section class="card stack" aria-labelledby="dernieres">
+      <h2 id="dernieres" class="text-lg font-bold">Dernières commandes</h2>
+      <table class="w-full">
+        <caption class="sr-only">Quatre dernières commandes</caption>
+        <thead><tr><th scope="col">N°</th><th scope="col">Date</th><th scope="col">Montant</th><th scope="col">Statut</th></tr></thead>
+        <tbody>
+          <tr><td>1042</td><td>14/10/2026</td><td>89,00 €</td><td><span class="badge" data-tone="success">Payée</span></td></tr>
+          <tr><td>1041</td><td>14/10/2026</td><td>24,50 €</td><td><span class="badge" data-tone="warning">En attente</span></td></tr>
+          <tr><td>1040</td><td>13/10/2026</td><td>156,00 €</td><td><span class="badge" data-tone="success">Payée</span></td></tr>
+          <tr><td>1039</td><td>13/10/2026</td><td>12,00 €</td><td><span class="badge" data-tone="danger">Annulée</span></td></tr>
+        </tbody>
+      </table>
+    </section>
+  </main>
+</body>
+</html>

package/recipes/error-404.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<!-- NoraIvoire — recette « Erreur 404 ». © 2026 Jonathan KABLAN — Propriétaire. -->
+<!-- Page introuvable avec retours utiles. Données fictives. Aucun JS inline (CSP stricte). -->
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Erreur 404 — NoraIvoire</title>
+  <link rel="stylesheet" href="../packages/core/dist/noraivoire.css">
+  <script type="module" src="../packages/core/dist/noraivoire.auto.js"></script>
+</head>
+<body>
+  <main class="container py-12">
+    <section class="card mx-auto stack text-center" data-size="lg" aria-labelledby="titre">
+      <span class="badge" data-tone="danger">Erreur 404</span>
+      <h1 id="titre" class="text-xl font-bold">Page introuvable</h1>
+      <p class="text-muted">La page demandée n'existe pas ou a été déplacée.</p>
+      <div class="cluster">
+        <a class="btn" href="home.html">Retour à l'accueil</a>
+        <a class="btn" data-tone="neutral" href="search.html">Rechercher</a>
+      </div>
+    </section>
+  </main>
+</body>
+</html>

package/recipes/error-500.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<!-- NoraIvoire — recette « Erreur 500 ». © 2026 Jonathan KABLAN — Propriétaire. -->
+<!-- Erreur serveur avec nouvelle tentative. Données fictives. Aucun JS inline (CSP stricte). -->
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Erreur 500 — NoraIvoire</title>
+  <link rel="stylesheet" href="../packages/core/dist/noraivoire.css">
+  <script type="module" src="../packages/core/dist/noraivoire.auto.js"></script>
+</head>
+<body>
+  <main class="container py-12">
+    <section class="card mx-auto stack text-center" data-size="lg" aria-labelledby="titre">
+      <span class="badge" data-tone="danger">Erreur 500</span>
+      <h1 id="titre" class="text-xl font-bold">Une erreur est survenue</h1>
+      <p class="text-muted">Nos équipes ont été prévenues. Réessayez dans quelques instants.</p>
+      <div class="cluster">
+        <a class="btn" href="#">Réessayer</a>
+        <a class="btn" data-tone="neutral" href="contact.html">Contacter le support</a>
+      </div>
+    </section>
+  </main>
+</body>
+</html>

package/recipes/forgot-password.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<!-- NoraIvoire — recette « Mot de passe oublié ». © 2026 Jonathan KABLAN — Propriétaire. -->
+<!-- Demande de lien de réinitialisation. Données fictives. Aucun JS inline (CSP stricte). -->
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Mot de passe oublié — NoraIvoire</title>
+  <link rel="stylesheet" href="../packages/core/dist/noraivoire.css">
+  <script type="module" src="../packages/core/dist/noraivoire.auto.js"></script>
+</head>
+<body>
+  <main class="container py-12">
+    <section class="card mx-auto stack" aria-labelledby="titre">
+      <h1 id="titre" class="text-xl font-bold">Mot de passe oublié</h1>
+      <p class="text-muted">Saisissez votre adresse : nous vous enverrons un lien de réinitialisation.</p>
+      <form class="stack" action="#" method="post">
+        <div class="field">
+          <label class="field-label" for="email">Adresse e-mail</label>
+          <input class="input" id="email" name="email" type="email" autocomplete="email" required value="demo@" aria-invalid="true" aria-describedby="email-erreur">
+          <p class="field-error" id="email-erreur">Adresse incomplète : ajoutez le domaine, par exemple demo@example.com.</p>
+        </div>
+        <button class="btn w-full" type="submit">Envoyer le lien</button>
+      </form>
+      <p class="text-sm text-center"><a class="link" href="login.html">Retour à la connexion</a></p>
+    </section>
+  </main>
+</body>
+</html>