@webmcp-auto-ui/agent 2.5.8 → 2.5.10

package/src/recipes/widgets/chart.md

@@ -1,6 +1,6 @@
 ---
 widget: chart
-description: Graphique à barres simples
+description: Simple bar chart
 group: simple
 schema:
   type: object
@@ -20,13 +20,13 @@ schema:
         maxItems: 2
 ---
 
-## Quand utiliser
-Pour un graphique à barres rapide avec des données catégorielles simples. Préférer `chart-rich` pour les graphiques multi-séries, les lignes ou les camemberts.
+## When to use
+Use for a quick bar chart with simple categorical data. Prefer `chart-rich` for multi-series charts, line charts, or pie charts.
 
-## Comment
-1. Récupérer les données via MCP (ex: comptages par catégorie)
-2. Formater en tableau de paires `[label, valeur]`
-3. Appeler `autoui_webmcp_widget_display('chart', { title: 'Ventes par région', bars: [['Nord', 150], ['Sud', 230], ['Est', 180]] })`
+## How to use
+1. Fetch the data via MCP (e.g. counts by category)
+2. Format as an array of `[label, value]` pairs
+3. Call `autoui_webmcp_widget_display('chart', { title: 'Sales by region', bars: [['North', 150], ['South', 230], ['East', 180]] })`
 
-## Erreurs courantes
-- Inverser label et valeur dans les paires — le format est `[string, number]`, pas `[number, string]`
+## Common mistakes
+- Swapping label and value in pairs — the format is `[string, number]`, not `[number, string]`

package/src/recipes/widgets/code.md

@@ -1,6 +1,6 @@
 ---
 widget: code
-description: Bloc de code avec coloration syntaxique
+description: Code block with syntax highlighting
 group: simple
 schema:
   type: object
@@ -13,9 +13,9 @@ schema:
       type: string
 ---
 
-## Quand utiliser
-Pour afficher du code source, des snippets, des commandes shell ou toute sortie formatée en monospace. Spécifier `lang` pour activer la coloration syntaxique.
+## When to use
+Display source code, snippets, shell commands, or any monospace-formatted output. Specify `lang` to enable syntax highlighting.
 
-## Comment
-1. Récupérer le code ou le générer selon la demande
-2. Appeler `autoui_webmcp_widget_display('code', { lang: 'python', content: 'def hello():\n    print("Hello")' })`
+## How to use
+1. Fetch or generate the code based on the request
+2. Call `autoui_webmcp_widget_display('code', { lang: 'python', content: 'def hello():\n    print("Hello")' })`

package/src/recipes/widgets/d3.md

@@ -1,6 +1,6 @@
 ---
 widget: d3
-description: Visualisation D3.js avec presets (heatmap, radial, treemap, force)
+description: D3.js visualization with presets (heatmap, radial, treemap, force)
 group: advanced
 schema:
   type: object
@@ -23,14 +23,14 @@ schema:
       type: object
 ---
 
-## Quand utiliser
-Pour des visualisations avancées non couvertes par les autres widgets — heatmaps hexagonales, graphiques radiaux, treemaps hiérarchiques, graphes de force. Choisir le preset selon le type de données.
+## When to use
+For advanced visualizations not covered by other widgets — hexagonal heatmaps, radial charts, hierarchical treemaps, force graphs. Choose the preset based on the data type.
 
-## Comment
-1. Récupérer les données via MCP
-2. Choisir le preset adapté : `hex-heatmap` pour densité spatiale, `radial` pour données cycliques, `treemap` pour hiérarchies, `force` pour graphes de relations
-3. Appeler `autoui_webmcp_widget_display('d3', { title: 'Répartition budget', preset: 'treemap', data: { name: 'Budget', children: [{ name: 'R&D', value: 500 }, { name: 'Marketing', value: 300 }] } })`
+## How to use
+1. Retrieve data via MCP
+2. Choose the appropriate preset: `hex-heatmap` for spatial density, `radial` for cyclical data, `treemap` for hierarchies, `force` for relationship graphs
+3. Call `autoui_webmcp_widget_display('d3', { title: 'Budget breakdown', preset: 'treemap', data: { name: 'Budget', children: [{ name: 'R&D', value: 500 }, { name: 'Marketing', value: 300 }] } })`
 
-## Erreurs courantes
-- La structure de `data` dépend du preset choisi — consulter la documentation du preset
-- Ne pas confondre avec `chart-rich` qui est plus simple mais couvre bar/line/pie
+## Common mistakes
+- The structure of `data` depends on the chosen preset — consult the preset documentation
+- Do not confuse with `chart-rich` which is simpler but covers bar/line/pie

package/src/recipes/widgets/data-table.md

@@ -1,6 +1,6 @@
 ---
 widget: data-table
-description: Tableau de données triable avec colonnes configurables
+description: Sortable data table with configurable columns
 group: rich
 schema:
   type: object
@@ -33,14 +33,14 @@ schema:
         type: object
 ---
 
-## Quand utiliser
-Pour afficher des données tabulaires avec plusieurs colonnes — résultats de requêtes, listes d'enregistrements, inventaires. Préférer `kv` pour une seule entité, `list` pour une seule colonne.
+## When to use
+Display tabular data with multiple columns — query results, record lists, inventories. Prefer `kv` for a single entity, `list` for a single column.
 
-## Comment
-1. Récupérer les données via MCP (ex: résultat SQL, liste d'objets)
-2. Optionnel : définir `columns` pour contrôler l'ordre et les labels des colonnes
-3. Appeler `autoui_webmcp_widget_display('data-table', { title: 'Utilisateurs', columns: [{ key: 'name', label: 'Nom' }, { key: 'email', label: 'Email' }], rows: [{ name: 'Alice', email: 'alice@ex.com' }] })`
+## How to use
+1. Fetch data via MCP (e.g. SQL result, list of objects)
+2. Optional: define `columns` to control column order and labels
+3. Call `autoui_webmcp_widget_display('data-table', { title: 'Users', columns: [{ key: 'name', label: 'Name' }, { key: 'email', label: 'Email' }], rows: [{ name: 'Alice', email: 'alice@ex.com' }] })`
 
-## Erreurs courantes
-- Oublier que `rows` est un tableau d'objets (pas un tableau de tableaux)
-- Définir des `columns.key` qui ne correspondent pas aux clés des objets dans `rows`
+## Common mistakes
+- Forgetting that `rows` is an array of objects (not an array of arrays)
+- Defining `columns.key` values that do not match the keys in the `rows` objects

package/src/recipes/widgets/gallery.md

@@ -1,6 +1,6 @@
 ---
 widget: gallery
-description: Galerie d'images en grille
+description: Image gallery in grid layout
 group: media
 schema:
   type: object
@@ -26,14 +26,14 @@ schema:
       type: number
 ---
 
-## Quand utiliser
-Pour afficher une collection d'images en grille — galerie photo, résultats de recherche d'images, portfolio. Préférer `carousel` pour un défilement séquentiel.
+## When to use
+Display a collection of images in a grid — photo gallery, image search results, portfolio. Prefer `carousel` for sequential browsing.
 
-## Comment
-1. Récupérer les URLs d'images via MCP (ne jamais inventer d'URLs)
-2. Appeler `autoui_webmcp_widget_display('gallery', { title: 'Photos du site', images: [{ src: 'https://...', alt: 'Vue principale', caption: 'Façade nord' }], columns: 3 })`
+## How to use
+1. Retrieve image URLs via MCP (never fabricate URLs)
+2. Call `autoui_webmcp_widget_display('gallery', { title: 'Site photos', images: [{ src: 'https://...', alt: 'Main view', caption: 'North facade' }], columns: 3 })`
 
-## Erreurs courantes
-- Ne JAMAIS fabriquer d'URLs d'images — utiliser uniquement celles retournées par les outils MCP
-- STRICTEMENT INTERDIT : URLs placeholder (`via.placeholder.com`, `placehold.co`, `dummyimage.com`, `?text=...`, `example.com/image.jpg`). Si aucune image réelle n'est disponible, ne PAS afficher de galerie — utiliser un widget `text` ou `cards` sans image à la place
-- Toujours fournir un `alt` pour l'accessibilité
+## Common mistakes
+- NEVER fabricate image URLs — only use those returned by MCP tools
+- STRICTLY FORBIDDEN: placeholder URLs (`via.placeholder.com`, `placehold.co`, `dummyimage.com`, `?text=...`, `example.com/image.jpg`). If no real image is available, do NOT display a gallery — use a `text` or `cards` widget without an image instead
+- Always provide an `alt` for accessibility

package/src/recipes/widgets/grid-data.md

@@ -1,6 +1,6 @@
 ---
 widget: grid-data
-description: Grille de données avec mise en surbrillance de cellules
+description: Data grid with cell highlighting
 group: rich
 schema:
   type: object
@@ -43,15 +43,15 @@ schema:
             type: string
 ---
 
-## Quand utiliser
-Pour afficher des données en grille avec la possibilité de mettre en surbrillance des cellules spécifiques — tableaux de bord, matrices de comparaison, heatmaps tabulaires. Préférer `data-table` pour un tableau triable classique.
+## When to use
+Display data in a grid with the ability to highlight specific cells — dashboards, comparison matrices, tabular heatmaps. Prefer `data-table` for a classic sortable table.
 
-## Comment
-1. Récupérer les données via MCP
-2. Structurer en lignes (tableaux) avec colonnes optionnelles
-3. Ajouter des `highlights` pour attirer l'attention sur certaines cellules
-4. Appeler `autoui_webmcp_widget_display('grid-data', { title: 'Matrice de risques', columns: [{ key: 'zone', label: 'Zone' }, { key: 'score', label: 'Score' }], rows: [['Nord', 85], ['Sud', 42]], highlights: [{ row: 0, col: 1, color: '#f44336' }] })`
+## How to use
+1. Fetch data via MCP
+2. Structure into rows (arrays) with optional columns
+3. Add `highlights` to draw attention to specific cells
+4. Call `autoui_webmcp_widget_display('grid-data', { title: 'Risk Matrix', columns: [{ key: 'zone', label: 'Zone' }, { key: 'score', label: 'Score' }], rows: [['North', 85], ['South', 42]], highlights: [{ row: 0, col: 1, color: '#f44336' }] })`
 
-## Erreurs courantes
-- Les index `row` et `col` dans `highlights` sont 0-based
-- `rows` est un tableau de tableaux (pas d'objets), contrairement à `data-table`
+## Common mistakes
+- The `row` and `col` indexes in `highlights` are 0-based
+- `rows` is an array of arrays (not objects), unlike `data-table`

package/src/recipes/widgets/hemicycle.md

@@ -1,6 +1,6 @@
 ---
 widget: hemicycle
-description: Hémicycle parlementaire avec groupes politiques
+description: Parliamentary hemicycle with political groups
 group: rich
 schema:
   type: object
@@ -31,13 +31,13 @@ schema:
       type: number
 ---
 
-## Quand utiliser
-Pour visualiser la composition d'une assemblée parlementaire ou tout ensemble réparti en groupes avec des proportions. Idéal pour les résultats électoraux et la répartition des sièges.
+## When to use
+Visualize the composition of a parliamentary assembly or any set distributed into groups with proportions. Ideal for election results and seat distribution.
 
-## Comment
-1. Récupérer les données de composition via MCP (groupes, nombre de sièges, couleurs)
-2. Appeler `autoui_webmcp_widget_display('hemicycle', { title: 'Assemblée nationale', groups: [{ id: 'lfi', label: 'LFI', seats: 75, color: '#cc2443' }, { id: 'ren', label: 'Renaissance', seats: 170, color: '#ffeb00' }], totalSeats: 577 })`
+## How to use
+1. Fetch composition data via MCP (groups, seat counts, colors)
+2. Call `autoui_webmcp_widget_display('hemicycle', { title: 'National Assembly', groups: [{ id: 'lfi', label: 'LFI', seats: 75, color: '#cc2443' }, { id: 'ren', label: 'Renaissance', seats: 170, color: '#ffeb00' }], totalSeats: 577 })`
 
-## Erreurs courantes
-- Oublier un des 4 champs required dans chaque objet du tableau `groups` (id, label, seats, color sont TOUS obligatoires)
-- Ne pas fournir de couleur hexadécimale valide
+## Common mistakes
+- Forgetting one of the 4 required fields in each `groups` object (id, label, seats, color are ALL required)
+- Not providing a valid hexadecimal color

package/src/recipes/widgets/js-sandbox.md

@@ -1,6 +1,6 @@
 ---
 widget: js-sandbox
-description: Sandbox JavaScript isolée avec HTML/CSS
+description: Isolated JavaScript sandbox with HTML/CSS
 group: advanced
 schema:
   type: object
@@ -19,14 +19,14 @@ schema:
       type: string
 ---
 
-## Quand utiliser
-Pour exécuter du code JavaScript personnalisé dans un environnement isolé (iframe) — démos interactives, prototypes, visualisations custom, widgets sur mesure qu'aucun autre widget ne couvre.
+## When to use
+For executing custom JavaScript code in an isolated environment (iframe) — interactive demos, prototypes, custom visualizations, bespoke widgets that no other widget covers.
 
-## Comment
-1. Écrire le code JS, et optionnellement le HTML/CSS associé
-2. Appeler `autoui_webmcp_widget_display('js-sandbox', { title: 'Démo interactive', code: 'document.getElementById("app").textContent = "Hello!"', html: '<div id="app"></div>', css: '#app { font-size: 24px; }', height: '200px' })`
+## How to use
+1. Write the JS code, and optionally the associated HTML/CSS
+2. Call `autoui_webmcp_widget_display('js-sandbox', { title: 'Interactive demo', code: 'document.getElementById("app").textContent = "Hello!"', html: '<div id="app"></div>', css: '#app { font-size: 24px; }', height: '200px' })`
 
-## Erreurs courantes
-- Le code s'exécute dans un iframe isolé — pas d'accès au DOM parent ni aux variables globales de l'app
-- Toujours fournir le `html` si le code JS manipule le DOM (sinon il n'y a rien à afficher)
-- Ne pas utiliser ce widget quand un widget spécialisé existe (chart-rich, d3, etc.)
+## Common mistakes
+- The code runs in an isolated iframe — no access to the parent DOM or the app's global variables
+- Always provide `html` if the JS code manipulates the DOM (otherwise there is nothing to display)
+- Do not use this widget when a specialized widget exists (chart-rich, d3, etc.)

package/src/recipes/widgets/json-viewer.md

@@ -1,6 +1,6 @@
 ---
 widget: json-viewer
-description: Visualiseur JSON interactif avec expansion/contraction
+description: Interactive JSON viewer with expand/collapse
 group: rich
 schema:
   type: object
@@ -16,12 +16,12 @@ schema:
       type: boolean
 ---
 
-## Quand utiliser
-Pour afficher des données JSON brutes de manière interactive — réponses API, configurations, structures de données complexes. L'utilisateur peut explorer l'arborescence en dépliant les niveaux.
+## When to use
+Display raw JSON data interactively — API responses, configurations, complex data structures. The user can explore the tree by expanding levels.
 
-## Comment
-1. Récupérer les données JSON via MCP
-2. Appeler `autoui_webmcp_widget_display('json-viewer', { title: 'Réponse API', data: { users: [...] }, maxDepth: 3, expanded: false })`
+## How to use
+1. Fetch JSON data via MCP
+2. Call `autoui_webmcp_widget_display('json-viewer', { title: 'API Response', data: { users: [...] }, maxDepth: 3, expanded: false })`
 
-## Erreurs courantes
-- Passer une string JSON au lieu d'un objet — `data` attend un objet/tableau, pas une string
+## Common mistakes
+- Passing a JSON string instead of an object — `data` expects an object/array, not a string

package/src/recipes/widgets/kv.md

@@ -1,6 +1,6 @@
 ---
 widget: kv
-description: Paires clé-valeur (propriétés, métadonnées)
+description: Key-value pairs (properties, metadata)
 group: simple
 schema:
   type: object
@@ -19,13 +19,13 @@ schema:
         maxItems: 2
 ---
 
-## Quand utiliser
-Pour afficher des propriétés ou métadonnées sous forme de paires clé-valeur. Idéal pour les fiches détaillées, les configurations, les résumés structurés.
+## When to use
+Display properties or metadata as key-value pairs. Ideal for detail cards, configurations, and structured summaries.
 
-## Comment
-1. Récupérer les données via MCP (ex: détails d'un enregistrement, propriétés d'un objet)
-2. Formater en tableau de paires : `[['Nom', 'Alice'], ['Email', 'alice@example.com']]`
-3. Appeler `autoui_webmcp_widget_display('kv', { title: 'Détails utilisateur', rows: [['Nom', 'Alice'], ['Email', 'alice@example.com']] })`
+## How to use
+1. Fetch the data via MCP (e.g. record details, object properties)
+2. Format as an array of pairs: `[['Name', 'Alice'], ['Email', 'alice@example.com']]`
+3. Call `autoui_webmcp_widget_display('kv', { title: 'User details', rows: [['Name', 'Alice'], ['Email', 'alice@example.com']] })`
 
-## Erreurs courantes
-- Passer un objet `{key: value}` au lieu d'un tableau de paires `[[key, value]]`
+## Common mistakes
+- Passing an object `{key: value}` instead of an array of pairs `[[key, value]]`

package/src/recipes/widgets/list.md

@@ -1,6 +1,6 @@
 ---
 widget: list
-description: Liste ordonnée d'items
+description: Ordered list of items
 group: simple
 schema:
   type: object
@@ -15,10 +15,10 @@ schema:
         type: string
 ---
 
-## Quand utiliser
-Pour afficher une liste simple d'éléments textuels — résultats de recherche, étapes, noms, éléments d'inventaire. Préférer `data-table` si les items ont plusieurs champs.
+## When to use
+Display a simple list of text items — search results, steps, names, inventory items. Prefer `data-table` if items have multiple fields.
 
-## Comment
-1. Récupérer les données via MCP
-2. Extraire les éléments en tableau de strings
-3. Appeler `autoui_webmcp_widget_display('list', { title: 'Résultats', items: ['Item 1', 'Item 2', 'Item 3'] })`
+## How to use
+1. Fetch the data via MCP
+2. Extract items as an array of strings
+3. Call `autoui_webmcp_widget_display('list', { title: 'Results', items: ['Item 1', 'Item 2', 'Item 3'] })`

package/src/recipes/widgets/log.md

@@ -1,6 +1,6 @@
 ---
 widget: log
-description: Journal d'événements avec niveaux et timestamps
+description: Event log with levels and timestamps
 group: rich
 schema:
   type: object
@@ -31,9 +31,9 @@ schema:
             type: string
 ---
 
-## Quand utiliser
-Pour afficher un journal d'événements — logs applicatifs, audit trail, historique d'opérations. Chaque entrée peut être colorée par niveau (debug/info/warn/error).
+## When to use
+Display an event log — application logs, audit trail, operation history. Each entry can be color-coded by level (debug/info/warn/error).
 
-## Comment
-1. Récupérer les logs via MCP
-2. Appeler `autoui_webmcp_widget_display('log', { title: 'Logs serveur', entries: [{ timestamp: '14:32:01', level: 'error', message: 'Connection refused', source: 'db' }, { timestamp: '14:32:05', level: 'info', message: 'Retry successful', source: 'db' }] })`
+## How to use
+1. Fetch logs via MCP
+2. Call `autoui_webmcp_widget_display('log', { title: 'Server Logs', entries: [{ timestamp: '14:32:01', level: 'error', message: 'Connection refused', source: 'db' }, { timestamp: '14:32:05', level: 'info', message: 'Retry successful', source: 'db' }] })`

package/src/recipes/widgets/map.md

@@ -1,6 +1,6 @@
 ---
 widget: map
-description: Carte interactive avec marqueurs
+description: Interactive map with markers
 group: advanced
 schema:
   type: object
@@ -36,14 +36,14 @@ schema:
             type: string
 ---
 
-## Quand utiliser
-Pour afficher des données géolocalisées — adresses, points d'intérêt, itinéraires, zones de couverture. Idéal quand l'utilisateur demande "où se trouve..." ou "montre sur une carte".
+## When to use
+Display geolocated data — addresses, points of interest, itineraries, coverage areas. Ideal when the user asks "where is..." or "show on a map".
 
-## Comment
-1. Récupérer les coordonnées via MCP (lat/lng)
-2. Définir le centre et le zoom selon l'étendue des données
-3. Appeler `autoui_webmcp_widget_display('map', { title: 'Nos bureaux', center: { lat: 48.8566, lng: 2.3522 }, zoom: 12, markers: [{ lat: 48.8566, lng: 2.3522, label: 'Siège Paris' }] })`
+## How to use
+1. Retrieve coordinates via MCP (lat/lng)
+2. Set the center and zoom based on the extent of the data
+3. Call `autoui_webmcp_widget_display('map', { title: 'Our offices', center: { lat: 48.8566, lng: 2.3522 }, zoom: 12, markers: [{ lat: 48.8566, lng: 2.3522, label: 'Paris HQ' }] })`
 
-## Erreurs courantes
-- Inverser lat et lng (latitude = Nord/Sud, longitude = Est/Ouest)
-- Oublier de centrer la carte sur les marqueurs affichés
+## Common mistakes
+- Swapping lat and lng (latitude = North/South, longitude = East/West)
+- Forgetting to center the map on the displayed markers

package/src/recipes/widgets/profile.md

@@ -1,6 +1,6 @@
 ---
 widget: profile
-description: Fiche profil avec champs et statistiques
+description: Profile card with fields and statistics
 group: rich
 schema:
   type: object
@@ -37,13 +37,13 @@ schema:
             type: string
 ---
 
-## Quand utiliser
-Pour afficher la fiche d'une personne ou d'une entité — employé, client, organisation. Combine identité, champs détaillés et statistiques résumées.
+## When to use
+Display a profile card for a person or entity — employee, client, organization. Combines identity, detailed fields, and summarized statistics.
 
-## Comment
-1. Récupérer les informations de la personne/entité via MCP
-2. Séparer les données en `fields` (détails textuels) et `stats` (chiffres clés)
-3. Appeler `autoui_webmcp_widget_display('profile', { name: 'Alice Martin', subtitle: 'Développeuse Senior', fields: [{ label: 'Email', value: 'alice@ex.com' }], stats: [{ label: 'Projets', value: '12' }] })`
+## How to use
+1. Retrieve the person/entity information via MCP
+2. Separate the data into `fields` (text details) and `stats` (key figures)
+3. Call `autoui_webmcp_widget_display('profile', { name: 'Alice Martin', subtitle: 'Senior Developer', fields: [{ label: 'Email', value: 'alice@ex.com' }], stats: [{ label: 'Projects', value: '12' }] })`
 
-## Erreurs courantes
-- Ne JAMAIS inventer d'URLs d'images pour l'avatar. Utiliser UNIQUEMENT les URLs retournées par les outils MCP. Si aucune URL n'est disponible, ne pas inclure de champ avatar — le widget affichera les initiales automatiquement.
+## Common mistakes
+- NEVER fabricate image URLs for the avatar. Use ONLY the URLs returned by MCP tools. If no URL is available, do not include an avatar field — the widget will display initials automatically.

package/src/recipes/widgets/recipe-browser.md

@@ -1,6 +1,6 @@
 ---
 widget: recipe-browser
-description: Affiche les recettes disponibles sous forme de cartes interactives et permet de consulter le detail de chaque recette
+description: Displays available recipes as interactive cards and allows viewing the detail of each recipe
 group: rich
 schema:
   type: object
@@ -35,28 +35,28 @@ schema:
     - cards
 ---
 
-## Quand utiliser
-Quand l'utilisateur veut voir les recettes disponibles, explorer les possibilités du serveur, ou comprendre comment utiliser un widget spécifique.
+## When to use
+When the user wants to see available recipes, explore what the server can do, or understand how to use a specific widget.
 
-## Comment
+## How to use
 
-### Étape 1 — Lister les recettes
-Appelle `search_recipes()` sur chaque serveur connecté (MCP et WebMCP) pour obtenir la liste des recettes.
+### Step 1 — List recipes
+Call `search_recipes()` on each connected server (MCP and WebMCP) to get the list of recipes.
 
-### Étape 2 — Afficher en cartes interactives
-Utilise `widget_display('cards', ...)` avec le paramètre `interactive: true` pour rendre les cartes cliquables :
+### Step 2 — Display as interactive cards
+Use `widget_display('cards', ...)` with the `interactive: true` parameter to make cards clickable:
 
 ```json
 {
   "name": "cards",
   "params": {
-    "title": "Recettes disponibles",
+    "title": "Available recipes",
     "cards": [
       {
-        "title": "Nom de la recette",
-        "description": "Description courte",
-        "tags": ["serveur_source"],
-        "meta": { "recipe_name": "nom_technique", "server": "nom_serveur" }
+        "title": "Recipe name",
+        "description": "Short description",
+        "tags": ["source_server"],
+        "meta": { "recipe_name": "technical_name", "server": "server_name" }
       }
     ],
     "interactive": true
@@ -64,39 +64,39 @@ Utilise `widget_display('cards', ...)` avec le paramètre `interactive: true` po
 }
 ```
 
-Le champ `meta` est important : il sera renvoyé dans l'événement d'interaction quand l'utilisateur clique sur la carte.
+The `meta` field is important: it will be returned in the interaction event when the user clicks on a card.
 
-### Étape 3 — Réagir au clic
-Quand l'utilisateur clique sur une carte, tu recevras un message d'interaction contenant les données de `meta`. Utilise `meta.recipe_name` et `meta.server` pour :
+### Step 3 — React to a click
+When the user clicks on a card, you will receive an interaction message containing the `meta` data. Use `meta.recipe_name` and `meta.server` to:
 
-1. Appeler `get_recipe(meta.recipe_name)` sur le bon serveur
-2. Afficher le contenu de la recette dans un widget `code` avec `language: 'markdown'` :
+1. Call `get_recipe(meta.recipe_name)` on the right server
+2. Display the recipe content in a `code` widget with `language: 'markdown'`:
 
 ```json
 {
   "name": "code",
   "params": {
-    "title": "Recette : Nom",
+    "title": "Recipe: Name",
     "language": "markdown",
-    "code": "contenu complet de la recette..."
+    "code": "full recipe content..."
   }
 }
 ```
 
-3. **Lier les deux widgets** : le widget cartes (liste) et le widget code (détail) sont liés. Quand l'utilisateur clique sur une autre carte, mets à jour le widget détail au lieu d'en créer un nouveau via `canvas('update', ...)`.
+3. **Link the two widgets**: the cards widget (list) and the code widget (detail) are linked. When the user clicks on another card, update the detail widget instead of creating a new one via `canvas('update', ...)`.
 
-## Erreurs courantes
-- Ne pas oublier `interactive: true` dans les cartes — sans ça, les clics ne remontent pas
-- Ne pas créer un nouveau widget détail à chaque clic — réutiliser l'existant via `canvas('update', ...)`
-- Les recettes MCP et WebMCP ont des noms de serveur différents — utiliser le bon préfixe pour `get_recipe()`
+## Common mistakes
+- Do not forget `interactive: true` in the cards — without it, clicks are not forwarded
+- Do not create a new detail widget on each click — reuse the existing one via `canvas('update', ...)`
+- MCP and WebMCP recipes have different server names — use the correct prefix for `get_recipe()`
 
-## Exemple complet
+## Full example
 
-Utilisateur : « Montre-moi les recettes disponibles »
+User: "Show me the available recipes"
 
-1. `autoui_webmcp_search_recipes()` → 26 recettes widgets
-2. `tricoteuses_mcp_search_recipes()` → 10 recettes données
-3. `widget_display('cards', { title: "36 recettes", cards: [...], interactive: true })`
-4. *L'utilisateur clique sur « Composition de l'assemblée »*
-5. `autoui_webmcp_get_recipe('hemicycle')` → contenu markdown
-6. `widget_display('code', { title: "Recette : Composition de l'assemblée", language: "markdown", code: "..." })`
+1. `autoui_webmcp_search_recipes()` → 26 widget recipes
+2. `tricoteuses_mcp_search_recipes()` → 10 data recipes
+3. `widget_display('cards', { title: "36 recipes", cards: [...], interactive: true })`
+4. *User clicks on "Assembly composition"*
+5. `autoui_webmcp_get_recipe('hemicycle')` → markdown content
+6. `widget_display('code', { title: "Recipe: Assembly composition", language: "markdown", code: "..." })`

package/src/recipes/widgets/sankey.md

@@ -1,6 +1,6 @@
 ---
 widget: sankey
-description: Diagramme de Sankey (flux entre nœuds)
+description: Sankey diagram (flow between nodes)
 group: rich
 schema:
   type: object
@@ -41,14 +41,14 @@ schema:
             type: number
 ---
 
-## Quand utiliser
-Pour visualiser des flux ou transferts entre catégories — budget, conversions, migrations, flux de données. Les nœuds représentent les étapes et les liens les quantités transférées.
+## When to use
+Visualize flows or transfers between categories — budget, conversions, migrations, data flows. Nodes represent stages and links represent transferred quantities.
 
-## Comment
-1. Récupérer les données de flux via MCP
-2. Définir les nœuds (étapes) et les liens (flux entre étapes)
-3. Appeler `autoui_webmcp_widget_display('sankey', { title: 'Flux budgétaire', nodes: [{ id: 'rev', label: 'Revenus' }, { id: 'sal', label: 'Salaires' }], links: [{ source: 'rev', target: 'sal', value: 50000 }] })`
+## How to use
+1. Fetch flow data via MCP
+2. Define nodes (stages) and links (flows between stages)
+3. Call `autoui_webmcp_widget_display('sankey', { title: 'Budget Flow', nodes: [{ id: 'rev', label: 'Revenue' }, { id: 'sal', label: 'Salaries' }], links: [{ source: 'rev', target: 'sal', value: 50000 }] })`
 
-## Erreurs courantes
-- Les `source` et `target` dans les liens doivent correspondre à des `id` existants dans les nœuds
-- Ne pas créer de cycles (le flux doit être directionnel)
+## Common mistakes
+- The `source` and `target` in links must match existing `id` values in the nodes
+- Do not create cycles (flow must be directional)