@webmcp-auto-ui/agent 2.5.32 → 2.5.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/agent",
-  "version": "2.5.32",
+  "version": "2.5.34",
   "description": "LLM agent loop + remote/WASM/local providers + MCP wrapper",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/autoui-server.ts

@@ -12,7 +12,6 @@ import notebookRecipe from '@webmcp-auto-ui/ui/widgets/notebook/recipes/notebook
 // Notebook widget renderer (vanilla JS) — import via subpath to avoid pulling
 // the .svelte exports of the ui package root through tsc.
 import { render as renderNotebook } from '@webmcp-auto-ui/ui/widgets/notebook/notebook.js';
-import { render as renderRecipeBrowser } from '@webmcp-auto-ui/ui/widgets/notebook/recipe-browser.js';
 
 // Inline recipe for recipe-browser (real vanilla widget)
 const recipeBrowserRecipe = `---
@@ -143,7 +142,7 @@ Call widget_display({name: "list", params: {items: ["A", "B", "C"]}}).
   // ── chart ────────────────────────────────────────────────────────────────
   `---
 widget: chart
-description: Simple bar chart. Labels + numeric values.
+description: Simple bar chart. bars is an array of tuples [label: string, value: number]. Each entry MUST be an array of length exactly 2, NOT an object.
 schema:
   type: object
   required:
@@ -153,8 +152,11 @@ schema:
       type: string
     bars:
       type: array
+      description: Array of tuples [label, value]. Each item is an array [string, number] of length exactly 2. Do NOT use objects like {label, value}.
       items:
         type: array
+        minItems: 2
+        maxItems: 2
 ---
 
 ## When to use
@@ -162,6 +164,7 @@ Pour un graphique a barres simple avec des labels et valeurs numeriques.
 
 ## How to use
 Call widget_display({name: "chart", params: {bars: [["Jan", 10], ["Fev", 20]]}}).
+Each bar is a tuple array of exactly 2 elements: [label: string, value: number]. NEVER use objects.
 `,
 
   // ── alert ────────────────────────────────────────────────────────────────
@@ -765,57 +768,6 @@ Call widget_display({name: "carousel", params: {slides: [{src: "https://...", ti
 
 ## Common mistakes
 - NEVER fabricate image URLs for src — only use those returned by MCP tools
-`,
-
-  // ── map ──────────────────────────────────────────────────────────────────
-  `---
-widget: map
-description: Interactive Leaflet map with markers. Dark CARTO basemap.
-schema:
-  type: object
-  properties:
-    title:
-      type: string
-    center:
-      type: object
-      description: Centre de la carte
-      required:
-        - lat
-        - lng
-      properties:
-        lat:
-          type: number
-        lng:
-          type: number
-    zoom:
-      type: number
-      description: Niveau de zoom (1-18)
-    height:
-      type: string
-      description: Hauteur CSS de la carte (ex "400px")
-    markers:
-      type: array
-      items:
-        type: object
-        required:
-          - lat
-          - lng
-        properties:
-          lat:
-            type: number
-          lng:
-            type: number
-          label:
-            type: string
-          color:
-            type: string
----
-
-## When to use
-Display a geographic map with markers.
-
-## How to use
-Call widget_display({name: "map", params: {center: {lat: 48.8, lng: 2.3}, zoom: 12, markers: [{lat: 48.8, lng: 2.3, label: "Paris"}]}}).
 `,
 
   // ── stat-card ────────────────────────────────────────────────────────────
@@ -882,9 +834,10 @@ schema:
             type: string
     rows:
       type: array
-      description: Tableau de tableaux de valeurs (row-major)
+      description: Array of rows, row-major. Each row is an array of primitive values (string/number/boolean) with length equal to the number of columns. Do NOT use objects as rows.
       items:
         type: array
+        minItems: 1
     highlights:
       type: array
       description: Cellules a coloriser
@@ -907,34 +860,6 @@ Pour des grilles de donnees avec mise en valeur de cellules (heatmap, comparaiso
 
 ## How to use
 Call widget_display({name: "grid-data", params: {columns: [{key:"a",label:"A"}], rows: [[1,2],[3,4]], highlights: [{row:0,col:1,color:"#ff0"}]}}).
-`,
-
-  // ── d3 ───────────────────────────────────────────────────────────────────
-  `---
-widget: d3
-description: D3.js visualization (hex-heatmap, radial, treemap, force graph).
-schema:
-  type: object
-  required:
-    - preset
-    - data
-  properties:
-    title:
-      type: string
-    preset:
-      type: string
-      enum: [hex-heatmap, radial, treemap, force]
-    data:
-      type: object
-    config:
-      type: object
----
-
-## When to use
-Pour des visualisations avancees D3.js (heatmap hexagonale, radial, treemap, graphe de force).
-
-## How to use
-Call widget_display({name: "d3", params: {preset: "treemap", data: {name: "root", children: [...]}}}).
 `,
 
   // ── js-sandbox ───────────────────────────────────────────────────────────
@@ -970,6 +895,31 @@ Pour des visualisations custom, animations, ou prototypes interactifs en JS pur.
 Call widget_display({name: "js-sandbox", params: {code: "document.getElementById('root').innerHTML = '<h1>Hello</h1>'"}}).
 `,
 
+`---
+widget: chat-input
+description: Minimal inline chat bar with a text input and stop button. Use when the agent needs to solicit a short free-form user reply inside the current canvas (e.g. "explain this result").
+group: rich
+schema:
+  type: object
+  properties:
+    placeholder:
+      type: string
+      description: Placeholder text shown in the input (default "Your reply...").
+    value:
+      type: string
+      description: Optional initial value.
+    disabled:
+      type: boolean
+      description: Disable the input (while the agent is processing).
+---
+
+## When to use
+When you need the user to reply with a short text — clarifying questions, follow-ups, free-form input mid-canvas. Prefer this over a modal for lightweight conversation inside a widget layout.
+
+## How to use
+Call widget_display({name: "chat-input", params: {placeholder: "Your reply..."}}). The widget emits a bubbling 'widget:interact' CustomEvent with detail={action: "submit", payload: {text}} when the user submits, and detail={action: "stop"} when the stop button is pressed.
+`,
+
 ];
 
 // ---------------------------------------------------------------------------
@@ -999,14 +949,11 @@ for (const recipe of RECIPES) {
   autoui.registerWidget(recipe, undefined);
 }
 
-// Notebook widget — vanilla renderer (resolved via WidgetRenderer vanilla path)
-const NOTEBOOK_WIDGETS: Array<[string, (container: HTMLElement, data: any) => any]> = [
-  [notebookRecipe as string, renderNotebook],
-  [recipeBrowserRecipe, renderRecipeBrowser],
-];
-for (const [recipe, renderer] of NOTEBOOK_WIDGETS) {
-  autoui.registerWidget(recipe, renderer as any);
-}
+// Notebook widget — vanilla renderer (wrapped by <auto-notebook> custom element)
+autoui.registerWidget(notebookRecipe as string, renderNotebook as any);
+
+// Recipe browser — resolved by WidgetRenderer as <auto-recipe-browser> custom element
+autoui.registerWidget(recipeBrowserRecipe, undefined);
 
 // Register flow recipes (multi-step procedures) from the global recipe registry
 // that declare this server (autoui) in their frontmatter.

package/src/index.ts

@@ -79,6 +79,14 @@ export type { RepairResult } from './auto-repair.js';
 // Pipeline trace
 export { PipelineTrace, type TraceEntry } from './pipeline-trace.js';
 
+// onnxruntime-web version pins (centralised — see ort-version.ts)
+export {
+  ORT_VERSION,
+  ORT_CDN_BASE,
+  ORT_TRANSFORMERS_VERSION,
+  ORT_TRANSFORMERS_CDN_BASE,
+} from './ort-version.js';
+
 // Trace observer — live visual trace for runAgentLoop
 export { createTraceObserver, type TraceObserver, type TraceObserverContext, type RoundTripDetail } from './trace-observer.js';
 

package/src/loop.ts

@@ -10,7 +10,7 @@ import type {
 } from './types.js';
 import type { ToolLayer, SchemaTransformOptions } from './tool-layers.js';
 import { buildToolsFromLayers, buildDiscoveryToolsWithAliases, activateServerTools, toProviderTools, sanitizeServerName } from './tool-layers.js';
-import { buildSystemPromptWithAliases, buildSystemPrompt } from './prompts/index.js';
+import { buildSystemPromptWithAliases } from './prompts/index.js';
 import type { DiscoveryCache } from './discovery-cache.js';
 import { unflattenParams, validateJsonSchema } from '@webmcp-auto-ui/core';
 import type { JsonSchema } from '@webmcp-auto-ui/core';
@@ -395,13 +395,19 @@ export async function runAgentLoop(
             const protocol = tokenToProtocol(token);
             const serverKey = `${serverName}_${token}`;
             if (!activatedServers.has(serverKey)) {
-              activatedServers.add(serverKey);
               const layer = (options.layers ?? []).find(l => sanitizeServerName(l.serverName) === serverName && l.protocol === protocol);
               if (layer) {
-                const act = activateServerTools(activeTools, layer, schemaOptions, trace);
-                activeTools = act.tools;
-                // Merge new pathMaps so unflattenParams works for lazily-activated tools.
-                for (const [k, v] of act.pathMaps) localPathMaps.set(k, v);
+                try {
+                  const act = activateServerTools(activeTools, layer, schemaOptions, trace);
+                  activeTools = act.tools;
+                  // Merge new pathMaps so unflattenParams works for lazily-activated tools.
+                  for (const [k, v] of act.pathMaps) localPathMaps.set(k, v);
+                  activatedServers.add(serverKey);
+                } catch (e) {
+                  trace.push('activate', name, `activation failed for ${serverKey}: ${e instanceof Error ? e.message : String(e)}`, 'error');
+                }
+              } else {
+                trace.push('activate', name, `layer not found for server="${serverName}" protocol="${protocol}"`, 'warn');
               }
             }
           }

package/src/nano-rag/embedder.ts

@@ -9,6 +9,7 @@
  */
 
 import type * as OrtTypes from 'onnxruntime-web';
+import { ORT_CDN_BASE } from '../ort-version.js';
 
 export const EMBEDDING_DIMS = 384;
 
@@ -47,7 +48,7 @@ export class Embedder {
 
     // Use WASM backend, load WASM binaries from CDN (avoids bundling 70MB in builds)
     ort.env.wasm.numThreads = 1;
-    ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.21.0/dist/';
+    ort.env.wasm.wasmPaths = `${ORT_CDN_BASE}/dist/`;
 
     const modelUrl =
       'https://huggingface.co/Xenova/all-MiniLM-L6-v2/resolve/main/onnx/model_quantized.onnx';

package/src/ort-version.ts

@@ -0,0 +1,35 @@
+/**
+ * Centralised onnxruntime-web version pins.
+ *
+ * Two distinct usages exist in the codebase, each requiring a different ORT
+ * build, so we expose two constants rather than one:
+ *
+ * 1. STANDALONE (`ORT_VERSION` / `ORT_CDN_BASE`) — used by the nano-RAG
+ *    embedder (packages/agent/src/nano-rag/embedder.ts). The embedder does
+ *    `await import('onnxruntime-web')`, which resolves through the host app's
+ *    importmap (apps/flex, apps/notebook-viewer). The matching .wasm binaries
+ *    must be served from a CDN that mirrors the *exact* same release. We pin
+ *    1.21.0 because it is a stable release present on jsdelivr/esm.sh and
+ *    matches the embedder's tested chain.
+ *
+ * 2. TRANSFORMERS-PINNED (`ORT_TRANSFORMERS_VERSION` /
+ *    `ORT_TRANSFORMERS_CDN_BASE`) — used by transformers.worker.ts when it
+ *    loads transformers.js 4.1.0 from esm.sh. transformers.js 4.1.0 ships
+ *    with ORT 1.26.0-dev.20260410-5e55544225 internally; we override the
+ *    wasm paths to fetch the matching native binaries from jsdelivr (esm.sh
+ *    serves the JS, jsdelivr serves the .wasm). Bumping this requires
+ *    bumping the transformers.js version in lock-step.
+ *
+ * The two pins are intentionally NOT the same: mixing 1.21 wasm with the
+ * 1.26-dev JS bundle (or vice versa) crashes at runtime with cryptic
+ * "wasm backend not initialised" / signature mismatch errors.
+ */
+
+// Standalone embedder usage (nano-RAG). Stable release.
+export const ORT_VERSION = '1.21.0';
+export const ORT_CDN_BASE = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_VERSION}`;
+
+// transformers.js 4.1.0 internal pin. Must match the version baked into
+// https://esm.sh/@huggingface/transformers@4.1.0.
+export const ORT_TRANSFORMERS_VERSION = '1.26.0-dev.20260410-5e55544225';
+export const ORT_TRANSFORMERS_CDN_BASE = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_TRANSFORMERS_VERSION}`;

package/src/prompts/index.ts

@@ -43,7 +43,12 @@ export function buildSystemPromptWithAliases(
   return { prompt, aliasMap: refs.aliasMap };
 }
 
-/** Backward-compat wrapper — also populates the deprecated global toolAliasMap. */
+/**
+ * @deprecated Use `buildSystemPromptWithAliases()` instead and pass the returned
+ * `aliasMap` to the agent loop explicitly. This wrapper still populates the
+ * deprecated global `toolAliasMap` singleton as a side-effect, which is not
+ * parallel-safe across concurrent agent loops.
+ */
 export function buildSystemPrompt(
   layers: ToolLayer[],
   options?: { providerKind?: ProviderKind },

package/src/providers/transformers.worker.ts

@@ -28,6 +28,7 @@
 
 import type { ContentBlock } from '../types.js';
 import type { TransformersModelEntry } from './transformers-models.js';
+import { ORT_TRANSFORMERS_CDN_BASE } from '../ort-version.js';
 
 // --------------------------------------------------------------------------
 // Gemma 4 chat_template override.
@@ -204,7 +205,7 @@ async function loadModel(modelEntry: TransformersModelEntry): Promise<void> {
       // on jsdelivr). For the 3.8.1 path, ORT 1.22.0-dev is a transformers.js-
       // internal build not mirrored on jsdelivr — let transformers.js use its
       // default wasmPaths (which resolve against esm.sh, matching the JS bundle).
-      env.backends.onnx.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.26.0-dev.20260410-5e55544225/dist/';
+      env.backends.onnx.wasm.wasmPaths = `${ORT_TRANSFORMERS_CDN_BASE}/dist/`;
     }
     if (env) {
       env.allowLocalModels = false;

package/src/recipes/_generated.ts

@@ -1500,6 +1500,354 @@ component("table", {columns: ["Title", "Date", "NOR"], rows: results})
 - **Overly broad queries**: always use LIMIT and precise WHERE filters
 - **Displaying raw full text**: use the \`text\` component with Markdown formatting rather than dumping the JSON
 - **Forgetting to specify the text status**: an article can be repealed, amended or in force — always indicate it
+`,
+  'showcase-carto': `---
+id: showcase-cartography
+name: Showcase cartographic widgets — points, polygons, aggregations, tiles, 3D
+when: the user asks specifically for a map / cartography / geo demo, e.g. "showcase carto", "demo carto", "show me geo widgets", "what kinds of maps can you render?"
+servers: [deckgl, h3, s2, turf, maplibre]
+components_used: [deckgl-scatterplot, deckgl-arc, deckgl-polygon, deckgl-h3-hexagon, deckgl-heatmap, deckgl-tile, deckgl-trips]
+layout:
+  type: grid
+  columns: 2
+  arrangement: 7 deck.gl maps in a 2-column grid
+---
+
+## When to use
+
+The user wants to see the **cartographic capabilities** of the system. Typical phrases:
+- "Montre-moi un showcase carto"
+- "Demo cartographie"
+- "What kinds of maps / geo widgets can you render?"
+- "Showcase deckgl"
+
+This recipe covers the four major deck.gl layer families: **points/lines**, **polygons**, **aggregation** (hexagon/H3/heatmap), **tiles & animation**.
+
+## How to use
+
+Mount **7 deck.gl widgets**, each with realistic Paris-region demo data. **Do NOT** stuff all the widget names into a single \`deckgl-text\` widget — that is not a showcase, that is a label list. Each widget must render its own layer family with real geometric data.
+
+Use exact widget names and exact parameter names below. Schemas come from each widget's recipe.
+
+1. **Scatterplot** — points around Paris (\`deckgl-scatterplot\`, key: \`points\`):
+   \`\`\`
+   widget_display({name: "deckgl-scatterplot", params: {
+     points: [
+       {lng: 2.3522, lat: 48.8566, radius: 200, color: [255, 100, 100]},
+       {lng: 2.2945, lat: 48.8584, radius: 180, color: [100, 200, 255]},
+       {lng: 2.3499, lat: 48.8530, radius: 150, color: [120, 255, 120]},
+       {lng: 2.3376, lat: 48.8606, radius: 220, color: [255, 200, 80]},
+       {lng: 2.3326, lat: 48.8867, radius: 160, color: [200, 100, 255]}
+     ],
+     center: [2.3522, 48.8566], zoom: 12
+   }})
+   \`\`\`
+
+2. **Arc** — flows from Paris to other French cities (\`deckgl-arc\`, key: \`arcs\`):
+   \`\`\`
+   widget_display({name: "deckgl-arc", params: {
+     arcs: [
+       {from: [2.3522, 48.8566], to: [4.8357, 45.7640], width: 3},
+       {from: [2.3522, 48.8566], to: [5.3698, 43.2965], width: 4},
+       {from: [2.3522, 48.8566], to: [-1.5536, 47.2184], width: 2},
+       {from: [2.3522, 48.8566], to: [7.7521, 48.5734], width: 3}
+     ],
+     center: [3.5, 46.5], zoom: 5
+   }})
+   \`\`\`
+
+3. **Polygon** — three quadrilaterals around central Paris (\`deckgl-polygon\`, key: \`polygons\`, color key: \`fillColor\`):
+   \`\`\`
+   widget_display({name: "deckgl-polygon", params: {
+     polygons: [
+       {polygon: [[2.32, 48.86], [2.36, 48.86], [2.36, 48.88], [2.32, 48.88], [2.32, 48.86]], fillColor: [255, 100, 100, 120]},
+       {polygon: [[2.36, 48.86], [2.40, 48.86], [2.40, 48.88], [2.36, 48.88], [2.36, 48.86]], fillColor: [100, 200, 255, 120]},
+       {polygon: [[2.32, 48.84], [2.36, 48.84], [2.36, 48.86], [2.32, 48.86], [2.32, 48.84]], fillColor: [100, 255, 120, 120]}
+     ],
+     center: [2.35, 48.86], zoom: 12
+   }})
+   \`\`\`
+
+4. **H3 hexagon** — Uber H3 cells with values (\`deckgl-h3-hexagon\`, key: \`cells\`). If the \`h3\` server is activated, prefer to call \`latLngToCell({lat, lng, res: 8})\` first to obtain valid indices for Paris. Otherwise use known-valid Paris-area indices below:
+   \`\`\`
+   widget_display({name: "deckgl-h3-hexagon", params: {
+     cells: [
+       {hex: "881fb46625fffff", value: 12},
+       {hex: "881fb46627fffff", value: 8},
+       {hex: "881fb4662dfffff", value: 22},
+       {hex: "881fb46663fffff", value: 6},
+       {hex: "881fb46669fffff", value: 15}
+     ],
+     extruded: true, elevationScale: 30,
+     center: [2.35, 48.86], zoom: 11
+   }})
+   \`\`\`
+
+5. **Heatmap** — weighted point density (\`deckgl-heatmap\`, key: \`points\`):
+   \`\`\`
+   widget_display({name: "deckgl-heatmap", params: {
+     points: [
+       {lng: 2.35, lat: 48.86, weight: 5}, {lng: 2.36, lat: 48.86, weight: 8},
+       {lng: 2.34, lat: 48.87, weight: 3}, {lng: 2.33, lat: 48.85, weight: 12},
+       {lng: 2.37, lat: 48.88, weight: 6}, {lng: 2.32, lat: 48.84, weight: 9}
+     ],
+     center: [2.35, 48.86], zoom: 12
+   }})
+   \`\`\`
+
+6. **Tile** — OSM raster tiles (\`deckgl-tile\`, key: \`tileUrl\`):
+   \`\`\`
+   widget_display({name: "deckgl-tile", params: {
+     tileUrl: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+     center: [2.35, 48.86], zoom: 10
+   }})
+   \`\`\`
+
+7. **Trips** — animated trajectory (\`deckgl-trips\`, key: \`trips\`):
+   \`\`\`
+   widget_display({name: "deckgl-trips", params: {
+     trips: [
+       {path: [[2.30, 48.85], [2.33, 48.86], [2.36, 48.87], [2.40, 48.88]], timestamps: [0, 200, 400, 600], color: [253, 128, 93]}
+     ],
+     trailLength: 200, animationSpeed: 1,
+     center: [2.35, 48.86], zoom: 12
+   }})
+   \`\`\`
+
+## Important
+
+- **Never** call \`deckgl-text\` with a list of widget *names* as labels. That is not a showcase.
+- Each widget must contain real geometric data (positions, polygons, H3 cells…), not labels.
+- Use exactly the parameter keys above (\`points\` not \`data\`, \`arcs\` not \`data\`, \`polygons\` not \`data\`, \`cells\` not \`data\`, \`tileUrl\` not \`url\`, \`trips\` not \`data\`).
+- If the user asks for a specific layer family, drill down into the per-widget recipe (\`scatterplot\`, \`arc\`, \`h3-hexagon\`, etc.).
+- Keep the canvas under 8 maps to stay within WebGL context limits.
+
+## Output text
+
+Return a single sentence such as: "Tour cartographique : 7 widgets deck.gl — points, arcs, polygones, H3, heatmap, tiles OSM et trajets animés."
+`,
+  'showcase-dashboard': `---
+id: showcase-dashboard
+name: Showcase analytics dashboard widgets — Tremor, ECharts, Observable Plot, Recharts, Nivo, Perspective
+when: the user asks for a dashboard / analytics / charts demo, e.g. "showcase dashboard", "demo dashboard", "show me charts", "analytics demo"
+servers: [echarts, observable-plot, recharts, nivo, perspective, tremor, chartjs, d3]
+components_used: [tremor-kpi-card, echarts-line, observable-plot-dot, recharts-bar, nivo-pie, perspective-table]
+layout:
+  type: grid
+  columns: 3
+  arrangement: KPI strip on top, then charts in a grid, table at the bottom
+---
+
+## When to use
+
+The user wants to see the **analytics / dashboard** capabilities of the system — non-cartographic visualizations powered by JS chart libraries. Typical phrases:
+- "Montre-moi un showcase dashboard"
+- "Demo analytics / charts"
+- "Show me what charts you can do"
+- "Showcase ECharts / Observable / Recharts"
+
+This recipe covers the four major dashboard widget families: **KPIs**, **time series & comparisons**, **distributions & breakdowns**, **interactive tables**.
+
+## How to use
+
+Mount **6-7 widgets** drawn from different chart libraries to demonstrate variety. Pick one widget per server when possible. **Do not collapse everything into a single chart** — the showcase value is the variety.
+
+Use exact widget names and exact parameter keys below. Schemas come from each widget's recipe.
+
+1. **3 KPI cards** in a row (\`tremor-kpi-card\`, keys: \`title\`, \`metric\`, \`delta\`, \`deltaType\`):
+   \`\`\`
+   widget_display({name: "tremor-kpi-card", params: {title: "MRR", metric: "€ 184 200", delta: "+12.4%", deltaType: "increase"}})
+   widget_display({name: "tremor-kpi-card", params: {title: "Active users", metric: "12 480", delta: "+8.2%", deltaType: "increase"}})
+   widget_display({name: "tremor-kpi-card", params: {title: "Churn", metric: "3.1 %", delta: "-0.4 pts", deltaType: "decrease"}})
+   \`\`\`
+
+2. **Time-series line chart** (\`echarts-line\`, keys: \`categories\`, \`series\`):
+   \`\`\`
+   widget_display({name: "echarts-line", params: {
+     title: "Signups vs activations",
+     categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
+     series: [
+       {name: "Signups", data: [120, 145, 162, 198, 240, 285, 312, 358]},
+       {name: "Activations", data: [80, 102, 121, 148, 188, 225, 252, 290]}
+     ],
+     smooth: true
+   }})
+   \`\`\`
+
+3. **Scatter / dot plot** (\`observable-plot-dot\`, keys: \`data\`, \`xKey\`, \`yKey\`, \`fill\`):
+   \`\`\`
+   widget_display({name: "observable-plot-dot", params: {
+     title: "Cohort distribution",
+     data: [
+       {x: 1.2, y: 3.4, group: "A"}, {x: 2.5, y: 5.1, group: "A"}, {x: 3.8, y: 4.2, group: "B"},
+       {x: 4.1, y: 6.8, group: "B"}, {x: 5.4, y: 5.9, group: "C"}, {x: 6.2, y: 7.3, group: "C"},
+       {x: 7.0, y: 6.1, group: "A"}, {x: 8.3, y: 8.4, group: "B"}
+     ],
+     xKey: "x", yKey: "y", fill: "group", tip: true
+   }})
+   \`\`\`
+
+4. **Bar chart** (\`recharts-bar\`, keys: \`rows\`, \`bars\`, \`xKey\`):
+   \`\`\`
+   widget_display({name: "recharts-bar", params: {
+     title: "Users by plan",
+     rows: [
+       {plan: "Free", users: 8420},
+       {plan: "Pro", users: 3120},
+       {plan: "Team", users: 740},
+       {plan: "Enterprise", users: 200}
+     ],
+     xKey: "plan",
+     bars: [{dataKey: "users", color: "#4f8cff"}]
+   }})
+   \`\`\`
+
+5. **Pie / donut** (\`nivo-pie\`, key: \`data\` with \`{id, label, value}\`):
+   \`\`\`
+   widget_display({name: "nivo-pie", params: {
+     data: [
+       {id: "direct",  label: "Direct",  value: 38},
+       {id: "search",  label: "Search",  value: 27},
+       {id: "ref",     label: "Referral", value: 18},
+       {id: "social",  label: "Social",  value: 12},
+       {id: "email",   label: "Email",   value: 5}
+     ],
+     innerRadius: 0.5
+   }})
+   \`\`\`
+
+6. **Interactive datagrid** (\`perspective-table\`, key: \`rows\`):
+   \`\`\`
+   widget_display({name: "perspective-table", params: {
+     title: "Revenue by region & plan",
+     rows: [
+       {date: "2026-01", region: "EU", plan: "Pro",  revenue: 18400},
+       {date: "2026-01", region: "US", plan: "Pro",  revenue: 22100},
+       {date: "2026-02", region: "EU", plan: "Pro",  revenue: 19800},
+       {date: "2026-02", region: "US", plan: "Pro",  revenue: 24200},
+       {date: "2026-03", region: "EU", plan: "Team", revenue: 31200},
+       {date: "2026-03", region: "US", plan: "Team", revenue: 38400}
+     ]
+   }})
+   \`\`\`
+
+7. **Optional 7th widget** for extra variety, if the corresponding server is activated:
+   - \`chartjs-radar\` (multi-axis comparison),
+   - \`nivo-radar\` (alternative radar),
+   - \`d3-force-graph\` (mini network),
+   - \`recharts-area\` (stacked area).
+
+## Important
+
+- **Variety wins**: pick widgets from *different* libraries. Don't stack 5 ECharts widgets — the goal is to demonstrate the breadth of the dashboard ecosystem.
+- Use exactly the parameter keys above (\`metric\` not \`value\`, \`delta\` not \`trend\`, \`deltaType\` not \`trendDir\`, \`categories\` not \`xAxis\`, \`rows\` not \`data\` for recharts-bar / perspective-table, \`fill\` not \`color\` for observable-plot-dot).
+- Use realistic dashboard data (revenue, users, traffic sources, plans, regions). Avoid abstract \`[1, 2, 3]\` series.
+- For a **cartography**-focused showcase, use \`showcase-carto\` instead.
+- For a **mixed** showcase (carto + dashboard + others), use \`showcase\`.
+
+## Output text
+
+Return a single sentence such as: "Showcase dashboard : 6 widgets — KPIs Tremor, série ECharts, scatter Observable Plot, bar Recharts, pie Nivo, table Perspective."
+`,
+  'showcase': `---
+id: showcase-mixed-widgets
+name: Showcase a mix of widgets across categories
+components_used: [stat-card, chart-rich, data-table, deckgl-scatterplot, kv]
+when: the user asks for a generic widget showcase, demo, or sampler — phrases like "show me widgets", "demo", "showcase", "what can you display?"
+servers: [autoui, deckgl]
+layout:
+  type: grid
+  columns: 3
+  arrangement: KPIs row, then a chart and a table side-by-side, then a map and a kv
+---
+
+## When to use
+
+The user wants to see what kinds of widgets the system can render, without specifying a topic. Typical phrases:
+- "Montre-moi des widgets pour tester"
+- "Show me a demo / a showcase"
+- "What can you render?"
+- "I just want to see widgets"
+
+This recipe deliberately covers **multiple widget families** (KPI, chart, table, map, key/value) so the user gets a representative sampler in a single canvas.
+
+## How to use
+
+Mount **6 widgets** in this order, each with realistic demo data. **Do NOT list widget names as text labels on a map** — that defeats the purpose. Each widget must render real data of its own type.
+
+Use exact widget names and exact parameter keys below.
+
+1. **3 stat-cards** in a row (\`stat-card\`, keys: \`label\`, \`value\`, \`delta?\`, \`unit?\`):
+   \`\`\`
+   widget_display({name: "stat-card", params: {label: "Active users", value: 12480, unit: "users", delta: 8.2, variant: "success"}})
+   widget_display({name: "stat-card", params: {label: "Revenue (Q1)", value: 184200, unit: "€", delta: 12.4, variant: "success"}})
+   widget_display({name: "stat-card", params: {label: "Churn", value: 3.1, unit: "%", delta: -0.4, variant: "warning"}})
+   \`\`\`
+
+2. **A chart** (\`chart-rich\`, keys: \`type\`, \`labels\`, \`data\`):
+   \`\`\`
+   widget_display({name: "chart-rich", params: {
+     title: "Signups (last 6 months)",
+     type: "line",
+     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+     data: [{label: "Signups", values: [120, 145, 162, 198, 240, 285]}]
+   }})
+   \`\`\`
+
+3. **A table** (\`data-table\`, keys: \`rows\`, \`columns\`):
+   \`\`\`
+   widget_display({name: "data-table", params: {
+     title: "Plans",
+     columns: [
+       {key: "plan", label: "Plan"},
+       {key: "users", label: "Users"},
+       {key: "mrr", label: "MRR"},
+       {key: "delta", label: "Δ 30d"}
+     ],
+     rows: [
+       {plan: "Free", users: 8420, mrr: "€0", delta: "+5%"},
+       {plan: "Pro", users: 3120, mrr: "€62 400", delta: "+11%"},
+       {plan: "Team", users: 740, mrr: "€88 800", delta: "+18%"},
+       {plan: "Enterprise", users: 200, mrr: "€33 000", delta: "+4%"}
+     ]
+   }})
+   \`\`\`
+
+4. **A map** with a few markers (\`deckgl-scatterplot\`, key: \`points\`):
+   \`\`\`
+   widget_display({name: "deckgl-scatterplot", params: {
+     points: [
+       {lng: 2.3522, lat: 48.8566, radius: 600, color: [255, 100, 100]},
+       {lng: 4.8357, lat: 45.7640, radius: 500, color: [100, 200, 255]},
+       {lng: 5.3698, lat: 43.2965, radius: 500, color: [120, 255, 120]}
+     ],
+     center: [3.5, 46.5], zoom: 5
+   }})
+   \`\`\`
+
+5. **A kv** for metadata / sources (\`kv\`, key: \`rows\` with \`[[k, v], ...]\`):
+   \`\`\`
+   widget_display({name: "kv", params: {
+     title: "About this showcase",
+     rows: [
+       ["Source", "Demo dataset"],
+       ["Generated", "live"],
+       ["Refreshed", "just now"]
+     ]
+   }})
+   \`\`\`
+
+## Important
+
+- **Do NOT** call a single text/label widget that only contains widget *names*. Each widget shown must be a different visual type with its own real data.
+- For \`kv\`, the property is \`rows\` (not \`pairs\`), and each item is a \`[key, value]\` array of strings.
+- For \`chart\`, values are \`[label, value]\` tuples; for \`chart-rich\`, values are objects \`{label, values}\` with parallel arrays — pick the matching shape.
+- For a **cartography**-only showcase use \`showcase-carto\`; for a **dashboard / charts** showcase use \`showcase-dashboard\`.
+- Keep total widgets between 5 and 8 — beyond that the canvas becomes unreadable.
+
+## Output text
+
+After the tool calls, return a single sentence such as: "Voici un échantillon de 5 widgets — KPIs, courbe, table, carte et métadonnées."
 `,
   'weather-viz': `---
 id: visualize-weather-forecasts-with-charts-and-kpis

package/src/recipes/index.ts

@@ -1,12 +1,84 @@
 // Recipe loader — imports auto-generated .md strings, parses them, exports ready-to-use recipes
 
-export type { Recipe, McpRecipe } from './types.js';
-export { parseRecipe, parseRecipes } from './parser.js';
-
+import { parseFrontmatter } from '@webmcp-auto-ui/core';
+import type { Recipe } from './types.js';
 import { RAW_RECIPES } from './_generated.js';
-import { parseRecipes } from './parser.js';
 import { registerRecipes } from '../recipe-registry.js';
 
+export type { Recipe, McpRecipe } from './types.js';
+
+/**
+ * Parse a single recipe from its raw markdown string.
+ *
+ * Supports two formats:
+ * - **Structured**: YAML frontmatter between `---` delimiters + markdown body
+ * - **Freeform**: plain markdown without frontmatter (id derived from fileKey)
+ *
+ * @param raw - The raw markdown string
+ * @param fileKey - Optional file key (e.g. "gallery-images") used as fallback id for freeform recipes
+ */
+export function parseRecipe(raw: string, fileKey?: string): Recipe {
+  const { frontmatter, body } = parseFrontmatter(raw);
+
+  // No frontmatter found → freeform recipe
+  if (Object.keys(frontmatter).length === 0) {
+    return parseRecipeFreeform(raw, fileKey);
+  }
+
+  return {
+    id: (frontmatter.id as string) ?? fileKey ?? '',
+    name: (frontmatter.name as string) ?? (frontmatter.id as string) ?? fileKey ?? '',
+    description: frontmatter.description as string | undefined,
+    components_used: parseStringArray(frontmatter.components_used),
+    layout: frontmatter.layout as Recipe['layout'] | undefined,
+    interactions: parseInteractions(frontmatter.interactions),
+    when: (frontmatter.when as string) ?? '',
+    servers: parseStringArray(frontmatter.servers),
+    body: body.trim(),
+  };
+}
+
+/** Parse a freeform .md recipe (no frontmatter). Extracts id from fileKey, name from first heading. */
+function parseRecipeFreeform(raw: string, fileKey?: string): Recipe {
+  const body = raw.trim();
+  const headingMatch = body.match(/^#+ +(.+)$/m);
+  const name = headingMatch?.[1] ?? fileKey ?? 'untitled';
+  const id = fileKey ?? name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+
+  const whenMatch = body.match(/##\s*Quand[^\n]*\n([\s\S]*?)(?=\n##|\n$|$)/i);
+  const when = whenMatch?.[1]?.trim().split('\n')[0] ?? '';
+
+  return { id, name, when, body };
+}
+
+/** Parse all raw recipe strings into Recipe objects. Skips invalid ones with a warning. */
+export function parseRecipes(raws: Record<string, string>): Recipe[] {
+  const recipes: Recipe[] = [];
+  for (const [key, raw] of Object.entries(raws)) {
+    try {
+      recipes.push(parseRecipe(raw, key));
+    } catch (e) {
+      console.warn(`[recipes] Failed to parse "${key}":`, e);
+    }
+  }
+  return recipes;
+}
+
+function parseStringArray(val: unknown): string[] | undefined {
+  if (!val) return undefined;
+  if (Array.isArray(val)) return val.map(String);
+  if (typeof val === 'string') return val.split(',').map(s => s.trim()).filter(Boolean);
+  return undefined;
+}
+
+function parseInteractions(val: unknown): Recipe['interactions'] | undefined {
+  if (!Array.isArray(val)) return undefined;
+  return val.filter(
+    (v): v is { source: string; target: string; event: string; action: string } =>
+      typeof v === 'object' && v !== null && 'source' in v && 'target' in v,
+  );
+}
+
 /** All built-in WebMCP UI recipes, parsed and ready to use */
 export const WEBMCP_RECIPES = parseRecipes(RAW_RECIPES);
 

package/src/recipes/showcase-carto.md

@@ -0,0 +1,124 @@
+---
+id: showcase-cartography
+name: Showcase cartographic widgets — points, polygons, aggregations, tiles, 3D
+when: the user asks specifically for a map / cartography / geo demo, e.g. "showcase carto", "demo carto", "show me geo widgets", "what kinds of maps can you render?"
+servers: [deckgl, h3, s2, turf, maplibre]
+components_used: [deckgl-scatterplot, deckgl-arc, deckgl-polygon, deckgl-h3-hexagon, deckgl-heatmap, deckgl-tile, deckgl-trips]
+layout:
+  type: grid
+  columns: 2
+  arrangement: 7 deck.gl maps in a 2-column grid
+---
+
+## When to use
+
+The user wants to see the **cartographic capabilities** of the system. Typical phrases:
+- "Montre-moi un showcase carto"
+- "Demo cartographie"
+- "What kinds of maps / geo widgets can you render?"
+- "Showcase deckgl"
+
+This recipe covers the four major deck.gl layer families: **points/lines**, **polygons**, **aggregation** (hexagon/H3/heatmap), **tiles & animation**.
+
+## How to use
+
+Mount **7 deck.gl widgets**, each with realistic Paris-region demo data. **Do NOT** stuff all the widget names into a single `deckgl-text` widget — that is not a showcase, that is a label list. Each widget must render its own layer family with real geometric data.
+
+Use exact widget names and exact parameter names below. Schemas come from each widget's recipe.
+
+1. **Scatterplot** — points around Paris (`deckgl-scatterplot`, key: `points`):
+   ```
+   widget_display({name: "deckgl-scatterplot", params: {
+     points: [
+       {lng: 2.3522, lat: 48.8566, radius: 200, color: [255, 100, 100]},
+       {lng: 2.2945, lat: 48.8584, radius: 180, color: [100, 200, 255]},
+       {lng: 2.3499, lat: 48.8530, radius: 150, color: [120, 255, 120]},
+       {lng: 2.3376, lat: 48.8606, radius: 220, color: [255, 200, 80]},
+       {lng: 2.3326, lat: 48.8867, radius: 160, color: [200, 100, 255]}
+     ],
+     center: [2.3522, 48.8566], zoom: 12
+   }})
+   ```
+
+2. **Arc** — flows from Paris to other French cities (`deckgl-arc`, key: `arcs`):
+   ```
+   widget_display({name: "deckgl-arc", params: {
+     arcs: [
+       {from: [2.3522, 48.8566], to: [4.8357, 45.7640], width: 3},
+       {from: [2.3522, 48.8566], to: [5.3698, 43.2965], width: 4},
+       {from: [2.3522, 48.8566], to: [-1.5536, 47.2184], width: 2},
+       {from: [2.3522, 48.8566], to: [7.7521, 48.5734], width: 3}
+     ],
+     center: [3.5, 46.5], zoom: 5
+   }})
+   ```
+
+3. **Polygon** — three quadrilaterals around central Paris (`deckgl-polygon`, key: `polygons`, color key: `fillColor`):
+   ```
+   widget_display({name: "deckgl-polygon", params: {
+     polygons: [
+       {polygon: [[2.32, 48.86], [2.36, 48.86], [2.36, 48.88], [2.32, 48.88], [2.32, 48.86]], fillColor: [255, 100, 100, 120]},
+       {polygon: [[2.36, 48.86], [2.40, 48.86], [2.40, 48.88], [2.36, 48.88], [2.36, 48.86]], fillColor: [100, 200, 255, 120]},
+       {polygon: [[2.32, 48.84], [2.36, 48.84], [2.36, 48.86], [2.32, 48.86], [2.32, 48.84]], fillColor: [100, 255, 120, 120]}
+     ],
+     center: [2.35, 48.86], zoom: 12
+   }})
+   ```
+
+4. **H3 hexagon** — Uber H3 cells with values (`deckgl-h3-hexagon`, key: `cells`). If the `h3` server is activated, prefer to call `latLngToCell({lat, lng, res: 8})` first to obtain valid indices for Paris. Otherwise use known-valid Paris-area indices below:
+   ```
+   widget_display({name: "deckgl-h3-hexagon", params: {
+     cells: [
+       {hex: "881fb46625fffff", value: 12},
+       {hex: "881fb46627fffff", value: 8},
+       {hex: "881fb4662dfffff", value: 22},
+       {hex: "881fb46663fffff", value: 6},
+       {hex: "881fb46669fffff", value: 15}
+     ],
+     extruded: true, elevationScale: 30,
+     center: [2.35, 48.86], zoom: 11
+   }})
+   ```
+
+5. **Heatmap** — weighted point density (`deckgl-heatmap`, key: `points`):
+   ```
+   widget_display({name: "deckgl-heatmap", params: {
+     points: [
+       {lng: 2.35, lat: 48.86, weight: 5}, {lng: 2.36, lat: 48.86, weight: 8},
+       {lng: 2.34, lat: 48.87, weight: 3}, {lng: 2.33, lat: 48.85, weight: 12},
+       {lng: 2.37, lat: 48.88, weight: 6}, {lng: 2.32, lat: 48.84, weight: 9}
+     ],
+     center: [2.35, 48.86], zoom: 12
+   }})
+   ```
+
+6. **Tile** — OSM raster tiles (`deckgl-tile`, key: `tileUrl`):
+   ```
+   widget_display({name: "deckgl-tile", params: {
+     tileUrl: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+     center: [2.35, 48.86], zoom: 10
+   }})
+   ```
+
+7. **Trips** — animated trajectory (`deckgl-trips`, key: `trips`):
+   ```
+   widget_display({name: "deckgl-trips", params: {
+     trips: [
+       {path: [[2.30, 48.85], [2.33, 48.86], [2.36, 48.87], [2.40, 48.88]], timestamps: [0, 200, 400, 600], color: [253, 128, 93]}
+     ],
+     trailLength: 200, animationSpeed: 1,
+     center: [2.35, 48.86], zoom: 12
+   }})
+   ```
+
+## Important
+
+- **Never** call `deckgl-text` with a list of widget *names* as labels. That is not a showcase.
+- Each widget must contain real geometric data (positions, polygons, H3 cells…), not labels.
+- Use exactly the parameter keys above (`points` not `data`, `arcs` not `data`, `polygons` not `data`, `cells` not `data`, `tileUrl` not `url`, `trips` not `data`).
+- If the user asks for a specific layer family, drill down into the per-widget recipe (`scatterplot`, `arc`, `h3-hexagon`, etc.).
+- Keep the canvas under 8 maps to stay within WebGL context limits.
+
+## Output text
+
+Return a single sentence such as: "Tour cartographique : 7 widgets deck.gl — points, arcs, polygones, H3, heatmap, tiles OSM et trajets animés."

package/src/recipes/showcase-dashboard.md

@@ -0,0 +1,122 @@
+---
+id: showcase-dashboard
+name: Showcase analytics dashboard widgets — Tremor, ECharts, Observable Plot, Recharts, Nivo, Perspective
+when: the user asks for a dashboard / analytics / charts demo, e.g. "showcase dashboard", "demo dashboard", "show me charts", "analytics demo"
+servers: [echarts, observable-plot, recharts, nivo, perspective, tremor, chartjs, d3]
+components_used: [tremor-kpi-card, echarts-line, observable-plot-dot, recharts-bar, nivo-pie, perspective-table]
+layout:
+  type: grid
+  columns: 3
+  arrangement: KPI strip on top, then charts in a grid, table at the bottom
+---
+
+## When to use
+
+The user wants to see the **analytics / dashboard** capabilities of the system — non-cartographic visualizations powered by JS chart libraries. Typical phrases:
+- "Montre-moi un showcase dashboard"
+- "Demo analytics / charts"
+- "Show me what charts you can do"
+- "Showcase ECharts / Observable / Recharts"
+
+This recipe covers the four major dashboard widget families: **KPIs**, **time series & comparisons**, **distributions & breakdowns**, **interactive tables**.
+
+## How to use
+
+Mount **6-7 widgets** drawn from different chart libraries to demonstrate variety. Pick one widget per server when possible. **Do not collapse everything into a single chart** — the showcase value is the variety.
+
+Use exact widget names and exact parameter keys below. Schemas come from each widget's recipe.
+
+1. **3 KPI cards** in a row (`tremor-kpi-card`, keys: `title`, `metric`, `delta`, `deltaType`):
+   ```
+   widget_display({name: "tremor-kpi-card", params: {title: "MRR", metric: "€ 184 200", delta: "+12.4%", deltaType: "increase"}})
+   widget_display({name: "tremor-kpi-card", params: {title: "Active users", metric: "12 480", delta: "+8.2%", deltaType: "increase"}})
+   widget_display({name: "tremor-kpi-card", params: {title: "Churn", metric: "3.1 %", delta: "-0.4 pts", deltaType: "decrease"}})
+   ```
+
+2. **Time-series line chart** (`echarts-line`, keys: `categories`, `series`):
+   ```
+   widget_display({name: "echarts-line", params: {
+     title: "Signups vs activations",
+     categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
+     series: [
+       {name: "Signups", data: [120, 145, 162, 198, 240, 285, 312, 358]},
+       {name: "Activations", data: [80, 102, 121, 148, 188, 225, 252, 290]}
+     ],
+     smooth: true
+   }})
+   ```
+
+3. **Scatter / dot plot** (`observable-plot-dot`, keys: `data`, `xKey`, `yKey`, `fill`):
+   ```
+   widget_display({name: "observable-plot-dot", params: {
+     title: "Cohort distribution",
+     data: [
+       {x: 1.2, y: 3.4, group: "A"}, {x: 2.5, y: 5.1, group: "A"}, {x: 3.8, y: 4.2, group: "B"},
+       {x: 4.1, y: 6.8, group: "B"}, {x: 5.4, y: 5.9, group: "C"}, {x: 6.2, y: 7.3, group: "C"},
+       {x: 7.0, y: 6.1, group: "A"}, {x: 8.3, y: 8.4, group: "B"}
+     ],
+     xKey: "x", yKey: "y", fill: "group", tip: true
+   }})
+   ```
+
+4. **Bar chart** (`recharts-bar`, keys: `rows`, `bars`, `xKey`):
+   ```
+   widget_display({name: "recharts-bar", params: {
+     title: "Users by plan",
+     rows: [
+       {plan: "Free", users: 8420},
+       {plan: "Pro", users: 3120},
+       {plan: "Team", users: 740},
+       {plan: "Enterprise", users: 200}
+     ],
+     xKey: "plan",
+     bars: [{dataKey: "users", color: "#4f8cff"}]
+   }})
+   ```
+
+5. **Pie / donut** (`nivo-pie`, key: `data` with `{id, label, value}`):
+   ```
+   widget_display({name: "nivo-pie", params: {
+     data: [
+       {id: "direct",  label: "Direct",  value: 38},
+       {id: "search",  label: "Search",  value: 27},
+       {id: "ref",     label: "Referral", value: 18},
+       {id: "social",  label: "Social",  value: 12},
+       {id: "email",   label: "Email",   value: 5}
+     ],
+     innerRadius: 0.5
+   }})
+   ```
+
+6. **Interactive datagrid** (`perspective-table`, key: `rows`):
+   ```
+   widget_display({name: "perspective-table", params: {
+     title: "Revenue by region & plan",
+     rows: [
+       {date: "2026-01", region: "EU", plan: "Pro",  revenue: 18400},
+       {date: "2026-01", region: "US", plan: "Pro",  revenue: 22100},
+       {date: "2026-02", region: "EU", plan: "Pro",  revenue: 19800},
+       {date: "2026-02", region: "US", plan: "Pro",  revenue: 24200},
+       {date: "2026-03", region: "EU", plan: "Team", revenue: 31200},
+       {date: "2026-03", region: "US", plan: "Team", revenue: 38400}
+     ]
+   }})
+   ```
+
+7. **Optional 7th widget** for extra variety, if the corresponding server is activated:
+   - `chartjs-radar` (multi-axis comparison),
+   - `nivo-radar` (alternative radar),
+   - `d3-force-graph` (mini network),
+   - `recharts-area` (stacked area).
+
+## Important
+
+- **Variety wins**: pick widgets from *different* libraries. Don't stack 5 ECharts widgets — the goal is to demonstrate the breadth of the dashboard ecosystem.
+- Use exactly the parameter keys above (`metric` not `value`, `delta` not `trend`, `deltaType` not `trendDir`, `categories` not `xAxis`, `rows` not `data` for recharts-bar / perspective-table, `fill` not `color` for observable-plot-dot).
+- Use realistic dashboard data (revenue, users, traffic sources, plans, regions). Avoid abstract `[1, 2, 3]` series.
+- For a **cartography**-focused showcase, use `showcase-carto` instead.
+- For a **mixed** showcase (carto + dashboard + others), use `showcase`.
+
+## Output text
+
+Return a single sentence such as: "Showcase dashboard : 6 widgets — KPIs Tremor, série ECharts, scatter Observable Plot, bar Recharts, pie Nivo, table Perspective."

package/src/recipes/showcase.md

@@ -0,0 +1,99 @@
+---
+id: showcase-mixed-widgets
+name: Showcase a mix of widgets across categories
+components_used: [stat-card, chart-rich, data-table, deckgl-scatterplot, kv]
+when: the user asks for a generic widget showcase, demo, or sampler — phrases like "show me widgets", "demo", "showcase", "what can you display?"
+servers: [autoui, deckgl]
+layout:
+  type: grid
+  columns: 3
+  arrangement: KPIs row, then a chart and a table side-by-side, then a map and a kv
+---
+
+## When to use
+
+The user wants to see what kinds of widgets the system can render, without specifying a topic. Typical phrases:
+- "Montre-moi des widgets pour tester"
+- "Show me a demo / a showcase"
+- "What can you render?"
+- "I just want to see widgets"
+
+This recipe deliberately covers **multiple widget families** (KPI, chart, table, map, key/value) so the user gets a representative sampler in a single canvas.
+
+## How to use
+
+Mount **6 widgets** in this order, each with realistic demo data. **Do NOT list widget names as text labels on a map** — that defeats the purpose. Each widget must render real data of its own type.
+
+Use exact widget names and exact parameter keys below.
+
+1. **3 stat-cards** in a row (`stat-card`, keys: `label`, `value`, `delta?`, `unit?`):
+   ```
+   widget_display({name: "stat-card", params: {label: "Active users", value: 12480, unit: "users", delta: 8.2, variant: "success"}})
+   widget_display({name: "stat-card", params: {label: "Revenue (Q1)", value: 184200, unit: "€", delta: 12.4, variant: "success"}})
+   widget_display({name: "stat-card", params: {label: "Churn", value: 3.1, unit: "%", delta: -0.4, variant: "warning"}})
+   ```
+
+2. **A chart** (`chart-rich`, keys: `type`, `labels`, `data`):
+   ```
+   widget_display({name: "chart-rich", params: {
+     title: "Signups (last 6 months)",
+     type: "line",
+     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+     data: [{label: "Signups", values: [120, 145, 162, 198, 240, 285]}]
+   }})
+   ```
+
+3. **A table** (`data-table`, keys: `rows`, `columns`):
+   ```
+   widget_display({name: "data-table", params: {
+     title: "Plans",
+     columns: [
+       {key: "plan", label: "Plan"},
+       {key: "users", label: "Users"},
+       {key: "mrr", label: "MRR"},
+       {key: "delta", label: "Δ 30d"}
+     ],
+     rows: [
+       {plan: "Free", users: 8420, mrr: "€0", delta: "+5%"},
+       {plan: "Pro", users: 3120, mrr: "€62 400", delta: "+11%"},
+       {plan: "Team", users: 740, mrr: "€88 800", delta: "+18%"},
+       {plan: "Enterprise", users: 200, mrr: "€33 000", delta: "+4%"}
+     ]
+   }})
+   ```
+
+4. **A map** with a few markers (`deckgl-scatterplot`, key: `points`):
+   ```
+   widget_display({name: "deckgl-scatterplot", params: {
+     points: [
+       {lng: 2.3522, lat: 48.8566, radius: 600, color: [255, 100, 100]},
+       {lng: 4.8357, lat: 45.7640, radius: 500, color: [100, 200, 255]},
+       {lng: 5.3698, lat: 43.2965, radius: 500, color: [120, 255, 120]}
+     ],
+     center: [3.5, 46.5], zoom: 5
+   }})
+   ```
+
+5. **A kv** for metadata / sources (`kv`, key: `rows` with `[[k, v], ...]`):
+   ```
+   widget_display({name: "kv", params: {
+     title: "About this showcase",
+     rows: [
+       ["Source", "Demo dataset"],
+       ["Generated", "live"],
+       ["Refreshed", "just now"]
+     ]
+   }})
+   ```
+
+## Important
+
+- **Do NOT** call a single text/label widget that only contains widget *names*. Each widget shown must be a different visual type with its own real data.
+- For `kv`, the property is `rows` (not `pairs`), and each item is a `[key, value]` array of strings.
+- For `chart`, values are `[label, value]` tuples; for `chart-rich`, values are objects `{label, values}` with parallel arrays — pick the matching shape.
+- For a **cartography**-only showcase use `showcase-carto`; for a **dashboard / charts** showcase use `showcase-dashboard`.
+- Keep total widgets between 5 and 8 — beyond that the canvas becomes unreadable.
+
+## Output text
+
+After the tool calls, return a single sentence such as: "Voici un échantillon de 5 widgets — KPIs, courbe, table, carte et métadonnées."

package/src/recipes/parser.ts

@@ -1,182 +0,0 @@
-// Frontmatter parser for recipe .md files
-// Parses YAML-like frontmatter + markdown body into a Recipe object
-
-import type { Recipe } from './types.js';
-
-/**
- * Parse a single recipe from its raw markdown string.
- *
- * Supports two formats:
- * - **Structured**: YAML-like frontmatter between `---` delimiters + markdown body
- * - **Freeform**: plain markdown without frontmatter (id derived from fileKey)
- *
- * @param raw - The raw markdown string
- * @param fileKey - Optional file key (e.g. "gallery-images") used as fallback id for freeform recipes
- */
-export function parseRecipe(raw: string, fileKey?: string): Recipe {
-  const match = raw.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
-
-  if (!match) {
-    // Freeform recipe: no frontmatter — derive metadata from content
-    return parseRecipeFreeform(raw, fileKey);
-  }
-
-  const frontmatter = parseFrontmatter(match[1]);
-  const body = match[2].trim();
-
-  return {
-    id: frontmatter.id as string ?? fileKey ?? '',
-    name: frontmatter.name as string ?? frontmatter.id as string ?? fileKey ?? '',
-    description: frontmatter.description as string | undefined,
-    components_used: parseStringArray(frontmatter.components_used),
-    layout: frontmatter.layout as Recipe['layout'] | undefined,
-    interactions: parseInteractions(frontmatter.interactions),
-    when: frontmatter.when as string ?? '',
-    servers: parseStringArray(frontmatter.servers),
-    body,
-  };
-}
-
-/** Parse a freeform .md recipe (no frontmatter). Extracts id from fileKey, name from first heading. */
-function parseRecipeFreeform(raw: string, fileKey?: string): Recipe {
-  const body = raw.trim();
-  // Try to extract name from first markdown heading
-  const headingMatch = body.match(/^#+ +(.+)$/m);
-  const name = headingMatch?.[1] ?? fileKey ?? 'untitled';
-  const id = fileKey ?? name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
-
-  // Try to extract a "when" hint from the first paragraph or a "## Quand" section
-  const whenMatch = body.match(/##\s*Quand[^\n]*\n([\s\S]*?)(?=\n##|\n$|$)/i);
-  const when = whenMatch?.[1]?.trim().split('\n')[0] ?? '';
-
-  return { id, name, when, body };
-}
-
-/** Parse all raw recipe strings into Recipe objects. Skips invalid ones with a warning. */
-export function parseRecipes(raws: Record<string, string>): Recipe[] {
-  const recipes: Recipe[] = [];
-  for (const [key, raw] of Object.entries(raws)) {
-    try {
-      recipes.push(parseRecipe(raw, key));
-    } catch (e) {
-      console.warn(`[recipes] Failed to parse "${key}":`, e);
-    }
-  }
-  return recipes;
-}
-
-// ── Internal helpers ──────────────────────────────────────────────────────────
-
-function parseFrontmatter(raw: string): Record<string, unknown> {
-  const result: Record<string, unknown> = {};
-  let currentKey = '';
-  let currentArray: unknown[] | null = null;
-  let currentObj: Record<string, unknown> | null = null;
-  let inObjectArray = false;
-
-  for (const line of raw.split('\n')) {
-    // Array item: "  - value" or "  - key: value" (under a key)
-    if (/^\s+-\s/.test(line) && currentKey) {
-      const itemRaw = line.replace(/^\s+-\s*/, '').trim();
-      if (inObjectArray && currentArray) {
-        // Object item in array: "  - source: gallery"
-        // Collect key: value pairs into a single object until next "  -" or new top-level key
-        const obj = parseInlineObject(itemRaw);
-        if (obj) {
-          currentArray.push(obj);
-        } else {
-          // Simple string in array
-          if (!currentArray) currentArray = [];
-          currentArray.push(itemRaw);
-        }
-      } else {
-        if (!currentArray) currentArray = [];
-        // Check if it looks like "key: value" (object item)
-        if (itemRaw.includes(': ')) {
-          inObjectArray = true;
-          currentArray.push(parseInlineObject(itemRaw) ?? itemRaw);
-        } else {
-          currentArray.push(itemRaw);
-        }
-      }
-      continue;
-    }
-
-    // Nested key: "  key: value" (under a parent key with object value)
-    if (/^\s+\w/.test(line) && currentKey && !currentArray && currentObj !== null) {
-      const m = line.match(/^\s+(\w+):\s*(.*)$/);
-      if (m) {
-        const val = m[2].trim();
-        currentObj[m[1]] = isNumeric(val) ? Number(val) : val;
-        continue;
-      }
-    }
-
-    // Flush pending array/object
-    if (currentKey && (currentArray || currentObj)) {
-      result[currentKey] = currentArray ?? currentObj;
-      currentArray = null;
-      currentObj = null;
-      inObjectArray = false;
-    }
-
-    // Top-level key: "key: value" or "key:"
-    const topMatch = line.match(/^(\w[\w_]*)\s*:\s*(.*)$/);
-    if (topMatch) {
-      currentKey = topMatch[1];
-      const val = topMatch[2].trim();
-
-      if (val === '' || val === '|') {
-        // Next lines are nested (object or array)
-        currentObj = {};
-        continue;
-      }
-      if (val.startsWith('[') && val.endsWith(']')) {
-        // Inline array: [gallery, carousel]
-        result[currentKey] = val.slice(1, -1).split(',').map(s => s.trim()).filter(Boolean);
-        currentKey = '';
-        continue;
-      }
-      // Simple scalar
-      result[currentKey] = isNumeric(val) ? Number(val) : val;
-      currentKey = '';
-    }
-  }
-
-  // Flush last pending
-  if (currentKey && (currentArray || currentObj)) {
-    result[currentKey] = currentArray ?? currentObj;
-  }
-
-  return result;
-}
-
-function parseStringArray(val: unknown): string[] | undefined {
-  if (!val) return undefined;
-  if (Array.isArray(val)) return val.map(String);
-  if (typeof val === 'string') return val.split(',').map(s => s.trim()).filter(Boolean);
-  return undefined;
-}
-
-function parseInteractions(val: unknown): Recipe['interactions'] | undefined {
-  if (!Array.isArray(val)) return undefined;
-  return val.filter(
-    (v): v is { source: string; target: string; event: string; action: string } =>
-      typeof v === 'object' && v !== null && 'source' in v && 'target' in v
-  );
-}
-
-function parseInlineObject(raw: string): Record<string, unknown> | null {
-  if (!raw.includes(': ')) return null;
-  const obj: Record<string, unknown> = {};
-  // Split on ", " but not inside values — simple heuristic
-  for (const part of raw.split(/,\s+/)) {
-    const m = part.match(/^(\w+)\s*:\s*(.+)$/);
-    if (m) obj[m[1]] = isNumeric(m[2].trim()) ? Number(m[2].trim()) : m[2].trim();
-  }
-  return Object.keys(obj).length > 0 ? obj : null;
-}
-
-function isNumeric(val: string): boolean {
-  return val !== '' && !isNaN(Number(val));
-}