# MCP Carousel Engine v4.0

<div align="center">

![Carousel Engine Pro Banner](./assets/gumroad_cover.jpg)

[![npm version](https://img.shields.io/npm/v/mcp-carousel-engine.svg?style=flat&color=38BDF8)](https://www.npmjs.com/package/mcp-carousel-engine)
[![License: Proprietary](https://img.shields.io/badge/License-Proprietary-red.svg)](./LICENSE)
[![MCP Specification](https://img.shields.io/badge/MCP-4.0-blue)](https://modelcontextprotocol.io)
[![Renderer](https://img.shields.io/badge/Renderer-Chromium%20Headless%20Automated-purple)](https://pptr.dev)
[![Export](https://img.shields.io/badge/Export-PNG%202x%20Retina%20%2B%20PDF%20LinkedIn-red)](https://github.com)
[![Gumroad Lifetime](https://img.shields.io/badge/Gumroad-Lifetime%20License%20$29-pink)](https://devauthentic.gumroad.com/l/carousel-engine-pro)
[![Agensi Store](https://img.shields.io/badge/Agensi.io-Available%20on%20Store-emerald)](https://agensi.io)

**The Sovereign Multi-Archetype Model Context Protocol (MCP) Server for High-End 4:5 Vertical Social Carousels.**  
*Designed and engineered by Said KOMI (Ingénieur Réseaux et Système).*

[Aperçu Visuel](#-aperçu-visuel--showcase) •
[Nouveautés v4.0](#-quoi-de-neuf-dans-la-version-40-) •
[Les 4 Archétypes](#-les-4-archétypes-de-design) •
[Presets Métiers](#-presets-de-thèmes-métiers) •
[Micro-Charts SVG](#-micro-graphiques-vectoriels-svg) •
[Patterns de Slides](#-les-patterns-de-mise-en-page) •
[Outils MCP](#-outils-mcp-exposés) •
[Intégration Agensi.io](#-packaging-commercial-agensiio)

</div>

---

## [▸] Quoi de neuf dans la Version 4.0 ?

1. **Sécurité Entreprise & Neutralisation Anti-XSS :**
   - Sanitisation systématique et whitelisting strict de toutes les interpolations HTML utilisateur et LLM.
   - Éradication des risques d'injection DOM dans Chromium (`--no-sandbox`) : les balises malveillantes (`<script>`, `<iframe>`, `onload=`, etc.) sont neutralisées en entités HTML.
   - Préservation ciblée des balises sémantiques et de style autorisées (`<span class="accent">`, `<code>`, `<mark>`, `<strong>`, `<em>`, `<br>`).

2. **Validation d'Entrée Stricte par Schéma Zod :**
   - Validation typée Zod (`CarouselProjectSchema`, `SlideInputSchema`) en amont de toute exécution.
   - Contraintes strictes sur la pagination : **2 à 10 slides** par carrousel (optimisé pour LinkedIn 5 à 7 slides).
   - Sanitisation des répertoires d'export (`outputDirectory`) contre les attaques par traversée de chemin (*Path Traversal*).

3. **Portabilité Multi-OS & Détection Dynamique des Navigateurs :**
   - Détection intelligente de Google Chrome, Microsoft Edge et Brave sur **Windows**, **macOS** et **Linux**.
   - Fallback automatique transparent sur le Chromium géré par Puppeteer.

4. **Avatar Vectoriel Procédural SVG Dynamique :**
   - Découplage complet des chemins de fichiers locaux en dur.
   - Si aucun avatar photo n'est spécifié, le moteur synthétise automatiquement un avatar SVG vectoriel haute définition avec monogramme d'autorité et halo néon calibré selon la palette active.

5. **Déblocage Intégral des 4 Archétypes de Design :**
   - Tous les archétypes sont désormais pleinement opérationnels et testés à 100% :
     - `swiss-editorial-clean` (Minimalisme suisse, Klein Blue, typographie 900 asymétrique).
     - `cyber-glass-bento` (Glassmorphism cyber-sécurité, bordures laser cyan, compartiments floutés).
     - `paper-light-editorial` (Presse économique, papier ivoire chaud, liseré bordeaux).
     - `neo-geometric-dark` (La Formule Souveraine originale, fond noir absolu, orbes 3D et carte blanche).
   - Tag Matcher sémantique corrigé avec détection par mot entier (`word boundary`) gérant les accents français.

6. **Architecture Allégée & Zéro Code Mort :**
   - Purge complète de `react`, `react-dom` et `remotion` superflus.
   - Restauration des sources documentaires TypeScript (`src/documents/`) pour une compilation TypeScript 100% autonome et déterministe.

7. **Packaging Commercial Agensi.io & Claude Code :**
   - Module agentique prêt à l'emploi dans `skills/linkedin-carousel-pro/` avec fichier de compétence `SKILL.md`, prompts orchestrateurs et exemples JSON réels.

---

## [▸] Les 4 Archétypes de Design

| Archétype | ADN Visuel | Cas d'Usage Idéaux |
| :--- | :--- | :--- |
| **`neo-geometric-dark`** | Fond noir absolu `#000000`, sphères volumétriques 3D, carte centrale blanche à fort contraste, capsules dégradées. | Architecture Cloud, Systèmes Distribués, Santé Digitale. |
| **`paper-light-editorial`** | Fond papier ivoire chaud `#F7F5F0`, typographie encre de presse, filet bordeaux `#C8102E`, texture procédurale sans 3D. | Rapports Annuels, Conjoncture, Intelligence Économique, Mémos. |
| **`swiss-editorial-clean`** | Fond papier ivoire chaud `#F6F5F0`, typographie asymétrique monumentale (poids 900), accents Bleu Klein `#002FA7`. | Fintech, Core Banking, Mémos Stratégiques, Leadership. |
| **`cyber-glass-bento`** | Fond nuit cyber `#060911`, compartiments Bento translucides (`backdrop-filter: blur`), bordures laser cyan `#00F0FF`. | Cybersécurité, SOC, Télémétrie, Zero-Trust, Protocoles Réseau. |

---

## [▸] Presets de Thèmes Métiers

| Preset | Industrie / Spécialité | Couleurs d'accent | Usage recommandé |
| :--- | :--- | :--- | :--- |
| **`cloud-devops`** | Cloud, Infra, SRE | Orange AWS (`#FF9900`) & Émeraude (`#10B981`) | AWS, Kubernetes, Terraform, VPC, Scalabilité |
| **`cybersecurity`** | Sécurité, SOC, Pentest | Vert Matrice (`#10B981`) & Cyan Laser (`#00F0FF`) | Zero-Trust, mTLS, Audit, SIEM, ISO 27001 |
| **`fintech-systems`** | Finance & Micro-latence | Bleu Klein (`#0052FF`) & Cyan Électrique (`#06B6D4`) | Passerelles de paiement, P99, Kafka, Consensus |
| **`ai-deeptech`** | IA, LLM & MLOps | Violet Quantique (`#8B5CF6`) & Cyber Cyan (`#06B6D4`) | Transformers, GPU H100, Inférence, RAG, Fine-tuning |
| **`monochrome-swiss`** | Pure Architecture & Craft | Encre Noire (`#0A0A0A`) & Zinc Architectural (`#71717A`) | Clean Architecture, Refactoring, Manifestes |

*(Le moteur sélectionne automatiquement le preset le plus adapté par analyse sémantique si le champ est omis).*

---

## [▸] Micro-Graphiques Vectoriels SVG Mathématiques

Chaque slide de type `metric-chart` peut accueillir un visualiseur vectoriel natif calculé géométriquement :

1. **`area-sparkline`** : Courbe de Bézier cubique Catmull-Rom avec ligne de seuil SLA, points d'inflexion et dégradé d'aire remplie.
2. **`bento-bars`** : Barres horizontales de benchmark avec badge d'accentuation, métrique delta et étiquettes comparatives.
3. **`radial-gauge`** : Jauge circulaire à arc paramétrique (260°), score central et sous-titre de certification.
4. **`pipeline-flow`** : Topologie de flux horizontal reliant des nœuds de microservices avec tags de protocole et latences associées.

---

## [▸] Les Patterns de Mise en Page

| Pattern | Rôle Visuel | Champs Déclencheurs |
| :--- | :--- | :--- |
| `stat-highlight` | Métrique monumentale au centre avec adaptation typographique anti-débordement. | `statValue`, `statLabel`, `statSubtext` |
| `comparison-versus` | Comparaison split 2 colonnes : Mauvaise pratique vs Standard recommandé. | `versus: { badTitle, badPoints, goodTitle, goodPoints }` |
| `flow-pipeline` | Étapes séquentielles numérotées reliées par connecteur vertical. | `steps: [{ title, desc }]` |
| `code-terminal` | Terminal développeur avec en-tête macOS et code pré-formaté. | `codeSnippet`, `codeFilename` |
| `manifesto-quote` | Citation d'autorité avec grand guillemet esthétique et signature auteur. | `quote`, `quoteAuthor` |
| `classic-card` | Carte maîtresse avec titre bicolore bold/thin, description et tirets d'accent. | `bulletPoints`, `features` |

---

## [▸] Les 5 Règles d'Or du Système

| N° | Règle | Spécification Technique | Rationale |
| :---: | :--- | :--- | :--- |
| **01** | **Ratio 4:5 Vertical Strict** | Canvas fixé à **$1080\text{ px} \times 1350\text{ px}$** avec `overflow: hidden`. | Format d'engagement maximal sur LinkedIn mobile & desktop. |
| **02** | **Zéro Émoji (Strict Policy)** | Interdiction totale des émojis. Glyphes autorisés : `::`, `//`, `[+]`, `[✓]`, `->`. | Esthétique d'ingénierie moderne, sobre et hautement crédible. |
| **03** | **Éclairage & Contraste Harmonique** | Halos diffus, sphères 3D ou bordures de verre selon l'archétype sélectionné. | Profondeur et finitions de niveau agence de design. |
| **04** | **Avatar Vectoriel ou Cadrage Précis** | Avatar vectoriel SVG automatique ou photo utilisateur cadrée sans distorsion. | L'identité de l'auteur n'est jamais déformée ni tronquée. |
| **05** | **Rendu Headless Chromium Autonome** | Capture native via Chromium Headless à échelle 2x Retina + PDF LinkedIn. | Images PNG d'une netteté cristalline et PDF multipages prêts à poster. |

---

## [▸] Installation & Configuration

### Option A : Exécution Directe (NPX)

```json
{
  "mcpServers": {
    "carousel-engine": {
      "command": "npx",
      "args": ["-y", "mcp-carousel-engine"]
    }
  }
}
```

### Option B : Installation Locale depuis les sources

```bash
git clone https://github.com/saidkomi/mcp-carousel-engine.git
cd mcp-carousel-engine
npm install
npm run build
```

Configuration locale du client MCP :
```json
{
  "mcpServers": {
    "carousel-engine": {
      "command": "node",
      "args": ["c:/VEILLE TECHNOLOGIQUE/laboratoires/agentic-google/mcp-carousel-engine/dist/index.js"]
    }
  }
}
```

---

## [▸] Outils MCP Exposés

### 1. `render_carousel_project`
Compile le projet complet (slides vectorielles, micro-graphiques mathématiques SVG, orbes 3D), pilote Chromium Headless en tâche de fond, génère les PNGs $1080 \times 1350$ Retina 2x, assemble le PDF multipages natif LinkedIn (`linkedin_carousel.pdf`) et crée la galerie interactive `index.html`.

### 2. `list_theme_presets`
Retourne les 5 presets métiers calibrés (`cloud-devops`, `cybersecurity`, `fintech-systems`, `ai-deeptech`, `monochrome-swiss`) et les spécifications des 3 modes visuels (`hybrid`, `dark`, `light`).

### 3. `get_design_rules`
Retourne les règles typographiques, la Formule Souveraine Hybride, le ratio strict (1080x1350) et la politique zéro-émoji.

### 4. `list_creative_archetypes`
Catalogue des 4 archétypes de mise en page avec recommandations de palettes et structures.

### 5. `match_design_dna`
Prend `{ topic, industry, tone }` et déduit automatiquement le profil de Design DNA le plus adapté (palette, grille, tokens, archétype).

### 6. `list_design_primitives`
Liste les primitives de mise en page réutilisables HTML/CSS/SVG (grilles 4:5, sphères 3D, pilules néon, conteneurs bento, cartes monumentales).

---

## [▸] Packaging Commercial Agensi.io

Le serveur est livré avec son package de compétence certifié :
- Répertoire : `skills/linkedin-carousel-pro/`
- Spécification : `SKILL.md` (compatible Agensi.io, Claude Code, Cursor, Copilot)
- Exemples complets :
  - `skills/linkedin-carousel-pro/examples/cloud-architecture.json`
  - `skills/linkedin-carousel-pro/examples/cybersecurity-audit.json`
  - `skills/linkedin-carousel-pro/examples/fintech-executive.json`
- Prompt orchestrateur : `skills/linkedin-carousel-pro/prompts/orchestrator.md`

---

## [▸] Auteur & Licence

* **Concepteur & Architecte :** **Said KOMI**  
* **Rôle :** Ingénieur Réseaux et Système  
* **Licence :** Propriétaire — Tous droits réservés ([voir LICENSE](./LICENSE))  
* *Toute reproduction, distribution ou exploitation commerciale non autorisée est strictement interdite.*