@webmcp-auto-ui/ui 2.5.5 → 2.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.5",
+  "version": "2.5.7",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/agent/TokenBubble.svelte

@@ -16,10 +16,19 @@
       totalCachedGB: number;
       isWasm: boolean;
     };
+    maxContextTokens?: number;
     visible?: boolean;
   }
 
-  let { metrics, visible = true }: Props = $props();
+  let { metrics, maxContextTokens, visible = true }: Props = $props();
+
+  const ctxRatio = $derived(
+    maxContextTokens && maxContextTokens > 0 && metrics.lastInputTokens > 0
+      ? metrics.lastInputTokens / maxContextTokens
+      : 0
+  );
+
+  const ctxWarn = $derived(ctxRatio > 0.8);
 
   // Rate limits (Anthropic tier)
   const LIMITS = { reqPerMin: 1000, inPerMin: 450_000, outPerMin: 90_000 };
@@ -65,16 +74,20 @@
     in:fly={{ y: -8, duration: 200, opacity: 0 }}
     out:fly={{ y: -8, duration: 150, opacity: 0 }}
   >
+    {#if maxContextTokens && maxContextTokens > 0 && metrics.lastInputTokens > 0}
+      <span class:warn={ctxWarn}>Ctx {fmt(metrics.lastInputTokens)}/{fmt(maxContextTokens)}</span>
+    {/if}
     {#if !metrics.isWasm && metrics.totalCacheReadTokens > 0}
       <span class="cached-active">Cached {fmt(metrics.totalCacheReadTokens)}</span>
     {/if}
+    <span class="sep">|</span>
     {#if metrics.isWasm}
-      <span>Req {metrics.requestsPerMin}/min</span>
       <span>Out {fmt(metrics.outputTokensPerMin)}/min</span>
+      <span>Req {metrics.requestsPerMin}/min</span>
     {:else}
-      <span class:warn={metrics.requestsPerMin > LIMITS.reqPerMin * 0.8}>Req {metrics.requestsPerMin}/min</span> <span class="limit">({fmt(LIMITS.reqPerMin)} max)</span>
       <span class:warn={metrics.inputTokensPerMin > LIMITS.inPerMin * 0.8}>In {fmt(metrics.inputTokensPerMin)}/min</span> <span class="limit">({fmt(LIMITS.inPerMin)} max)</span>
       <span class:warn={metrics.outputTokensPerMin > LIMITS.outPerMin * 0.8}>Out {fmt(metrics.outputTokensPerMin)}/min</span> <span class="limit">({fmt(LIMITS.outPerMin)} max)</span>
+      <span class:warn={metrics.requestsPerMin > LIMITS.reqPerMin * 0.8}>Req {metrics.requestsPerMin}/min</span> <span class="limit">({fmt(LIMITS.reqPerMin)} max)</span>
     {/if}
   </div>
 {/if}

package/src/index.ts

@@ -46,6 +46,11 @@ export { default as Carousel } from './widgets/rich/Carousel.svelte';
 // Safe image (URL validation + error fallback)
 export { default as SafeImage } from './widgets/SafeImage.svelte';
 
+// Widget export utility
+export { exportWidget, getExportFormats, exportWidgetAs } from './widgets/export-widget.js';
+export type { ExportFormat } from './widgets/export-widget.js';
+export { default as ExportModal } from './widgets/ExportModal.svelte';
+
 // Dispatcher
 export { default as BlockRenderer } from './widgets/BlockRenderer.svelte';
 export { default as WidgetRenderer } from './widgets/WidgetRenderer.svelte';

package/src/widgets/ExportModal.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { getExportFormats, exportWidgetAs, type ExportFormat } from './export-widget.js';
+
+  interface Props {
+    open: boolean;
+    type: string;
+    data: Record<string, unknown>;
+    containerEl?: HTMLElement;
+    onclose?: () => void;
+  }
+
+  let { open = $bindable(false), type, data, containerEl, onclose }: Props = $props();
+
+  const formats = $derived(open ? getExportFormats(type, containerEl) : []);
+
+  function doExport(fmt: ExportFormat) {
+    exportWidgetAs(fmt.id, type, data, containerEl);
+    open = false;
+    onclose?.();
+  }
+
+  function handleBackdrop() {
+    open = false;
+    onclose?.();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      open = false;
+      onclose?.();
+    }
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="export-modal-backdrop" onclick={handleBackdrop} onkeydown={handleKeydown}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="export-modal" onclick={(e) => e.stopPropagation()}>
+      <div class="export-modal-title">Exporter — {type}</div>
+      <div class="export-modal-list">
+        {#each formats as fmt}
+          <button class="export-modal-btn" onclick={() => doExport(fmt)}>
+            <span class="export-modal-icon">{fmt.icon}</span>
+            <span class="export-modal-label">{fmt.label}</span>
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .export-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.35);
+  }
+  .export-modal {
+    background: var(--color-surface, #1a1a2e);
+    border: 1px solid var(--color-border, #333);
+    border-radius: 8px;
+    padding: 12px;
+    max-width: 250px;
+    width: 100%;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    font-family: var(--font-mono, ui-monospace, monospace);
+  }
+  .export-modal-title {
+    font-size: 11px;
+    color: var(--color-text2, #888);
+    margin-bottom: 8px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--color-border, #333);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .export-modal-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .export-modal-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--color-text1, #eee);
+    font-family: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+  }
+  .export-modal-btn:hover {
+    background: var(--color-surface2, #2a2a3e);
+    border-color: var(--color-border, #444);
+  }
+  .export-modal-icon {
+    font-size: 16px;
+    flex-shrink: 0;
+    width: 20px;
+    text-align: center;
+  }
+  .export-modal-label {
+    flex: 1;
+    text-align: left;
+  }
+</style>

package/src/widgets/SafeImage.svelte

@@ -71,5 +71,6 @@
     {loading}
     onerror={onError}
     onload={onLoad}
+    referrerpolicy="no-referrer"
   />
 {/if}

package/src/widgets/WidgetRenderer.svelte

@@ -168,6 +168,10 @@
     const mc = getMC();
     if (!mc) return;
 
+    // Unregister first in case widget was re-mounted with same busId
+    const toolNames = [`widget_${busId}_get`, `widget_${busId}_update`, `widget_${busId}_remove`];
+    toolNames.forEach(n => { try { mc.unregisterTool(n); } catch { /* ok */ } });
+
     mc.registerTool({
       name: `widget_${busId}_get`,
       description: `Get current data of ${type} widget (id: ${busId}).`,
@@ -211,7 +215,7 @@
 </script>
 
 {#if isVanillaRenderer}
-  <div bind:this={vanillaContainer}></div>
+  <div bind:this={vanillaContainer} class="vanilla-container w-full h-full overflow-auto p-2"></div>
 {:else if customRenderer}
   <svelte:component this={customRenderer as Component<any>} {data} {id} />
 {:else if nativeEntry}
@@ -219,3 +223,24 @@
 {:else}
   <div class="p-3 font-mono text-xs text-text2">[{type}]</div>
 {/if}
+
+<style>
+  .vanilla-container :global(svg) {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    display: block;
+  }
+  .vanilla-container :global(canvas) {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    display: block;
+  }
+  .vanilla-container :global(img) {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    object-fit: contain;
+  }
+</style>

package/src/widgets/export-widget.ts

@@ -0,0 +1,345 @@
+/**
+ * export-widget.ts — contextual export utility for widgets
+ * Determines the best export format based on widget type and triggers a file download.
+ */
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+function timestamp(): string {
+  return new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+}
+
+function filename(type: string, ext: string): string {
+  return `${type}_${timestamp()}.${ext}`;
+}
+
+/**
+ * Download a file. Accepts either a data: URL or plain text content.
+ */
+function downloadFile(content: string, name: string, mimeType = 'text/plain'): void {
+  const a = document.createElement('a');
+  if (content.startsWith('data:')) {
+    a.href = content;
+  } else {
+    const blob = new Blob([content], { type: mimeType });
+    a.href = URL.createObjectURL(blob);
+  }
+  a.download = name;
+  a.click();
+}
+
+// ── CSV ───────────────────────────────────────────────────────────────────────
+
+/** Escape a cell value for CSV (RFC 4180). */
+function csvCell(value: unknown): string {
+  const str = value === null || value === undefined ? '' : String(value);
+  if (str.includes('"') || str.includes(',') || str.includes('\n') || str.includes('\r')) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+
+function csvRow(cells: unknown[]): string {
+  return cells.map(csvCell).join(',');
+}
+
+function exportCsv(type: string, data: Record<string, unknown>): void {
+  let lines: string[] = [];
+
+  if (type === 'data-table') {
+    const columns = (data.columns as string[] | undefined) ?? [];
+    const rows = (data.rows as (Record<string, unknown> | unknown[])[]) ?? [];
+    lines.push(csvRow(columns));
+    for (const row of rows) {
+      if (Array.isArray(row)) {
+        lines.push(csvRow(row));
+      } else {
+        lines.push(csvRow(columns.map((c) => (row as Record<string, unknown>)[c])));
+      }
+    }
+  } else if (type === 'grid-data') {
+    const headers = (data.headers as string[] | undefined) ?? [];
+    const rows = (data.rows as unknown[][] | undefined) ?? [];
+    lines.push(csvRow(headers));
+    for (const row of rows) lines.push(csvRow(row));
+  } else if (type === 'kv') {
+    lines.push(csvRow(['key', 'value']));
+    const items = (data.items as { key: unknown; value: unknown }[] | undefined) ?? [];
+    for (const item of items) lines.push(csvRow([item.key, item.value]));
+  } else if (type === 'list') {
+    lines.push(csvRow(['value']));
+    const items = (data.items as unknown[] | undefined) ?? [];
+    for (const item of items) {
+      if (typeof item === 'object' && item !== null && 'label' in item) {
+        lines.push(csvRow([(item as { label: unknown }).label]));
+      } else {
+        lines.push(csvRow([item]));
+      }
+    }
+  }
+
+  downloadFile(lines.join('\r\n'), filename(type, 'csv'), 'text/csv;charset=utf-8');
+}
+
+// ── PNG via SVG ───────────────────────────────────────────────────────────────
+
+function svgToPng(svgEl: SVGElement, name: string): void {
+  // Inline computed styles on the SVG to improve fidelity when rendered off-DOM
+  const svgData = new XMLSerializer().serializeToString(svgEl);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d')!;
+  const img = new Image();
+  const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  img.onload = () => {
+    canvas.width = img.naturalWidth || svgEl.clientWidth || 800;
+    canvas.height = img.naturalHeight || svgEl.clientHeight || 600;
+    ctx.drawImage(img, 0, 0);
+    const pngUrl = canvas.toDataURL('image/png');
+    downloadFile(pngUrl, name);
+    URL.revokeObjectURL(url);
+  };
+  img.onerror = () => {
+    // Fallback: try canvas.toDataURL directly if available
+    URL.revokeObjectURL(url);
+  };
+  img.src = url;
+}
+
+function canvasToPng(canvasEl: HTMLCanvasElement, name: string): void {
+  const url = canvasEl.toDataURL('image/png');
+  downloadFile(url, name);
+}
+
+function exportPng(type: string, containerEl: HTMLElement): void {
+  const name = filename(type, 'png');
+
+  // Prefer canvas (chart.js renders to <canvas>)
+  const canvasEl = containerEl.querySelector('canvas');
+  if (canvasEl) {
+    canvasToPng(canvasEl, name);
+    return;
+  }
+
+  // Fall back to SVG
+  const svgEl = containerEl.querySelector('svg');
+  if (svgEl) {
+    svgToPng(svgEl as SVGElement, name);
+    return;
+  }
+
+  console.warn('[exportWidget] No <canvas> or <svg> found in container for type:', type);
+}
+
+// ── Markdown ──────────────────────────────────────────────────────────────────
+
+function exportMarkdown(type: string, data: Record<string, unknown>): void {
+  let content = '';
+
+  if (type === 'text') {
+    content = String((data.content ?? data.text) ?? '');
+  } else if (type === 'code') {
+    const lang = String(data.language ?? '');
+    const code = String(data.code ?? data.content ?? '');
+    content = `\`\`\`${lang}\n${code}\n\`\`\``;
+  } else if (type === 'log') {
+    const entries = (data.entries as unknown[] | undefined) ?? [];
+    content = entries.map((e) => (typeof e === 'object' ? JSON.stringify(e) : String(e))).join('\n');
+  }
+
+  downloadFile(content, filename(type, 'md'), 'text/markdown;charset=utf-8');
+}
+
+// ── JSON ──────────────────────────────────────────────────────────────────────
+
+function exportJson(type: string, data: Record<string, unknown>): void {
+  const content = JSON.stringify(data, null, 2);
+  downloadFile(content, filename(type, 'json'), 'application/json');
+}
+
+// ── HTML (js-sandbox) ─────────────────────────────────────────────────────────
+
+function exportHtml(type: string, data: Record<string, unknown>, containerEl?: HTMLElement): void {
+  // Try to grab the iframe srcdoc/src first
+  const iframeEl = containerEl?.querySelector('iframe');
+  let content = '';
+  if (iframeEl) {
+    try {
+      content = iframeEl.contentDocument?.documentElement?.outerHTML ?? '';
+    } catch {
+      // cross-origin — fall back to data
+    }
+  }
+  if (!content) {
+    content = String(data.html ?? data.source ?? data.content ?? '');
+  }
+  downloadFile(content, filename(type, 'html'), 'text/html;charset=utf-8');
+}
+
+// ── Gallery / Carousel (JSON of image URLs) ──────────────────────────────────
+
+function exportImageUrls(type: string, data: Record<string, unknown>): void {
+  const items = (data.items as unknown[] | undefined) ?? (data.images as unknown[] | undefined) ?? [];
+  const urls = items.map((item) => {
+    if (typeof item === 'string') return item;
+    if (typeof item === 'object' && item !== null) {
+      return (item as Record<string, unknown>).url ?? (item as Record<string, unknown>).src ?? item;
+    }
+    return item;
+  });
+  const content = JSON.stringify({ type, urls }, null, 2);
+  downloadFile(content, filename(type, 'json'), 'application/json');
+}
+
+// ── Export Format types ───────────────────────────────────────────────────────
+
+export interface ExportFormat {
+  id: string;       // 'csv', 'png', 'json', 'md', 'html'
+  label: string;    // 'CSV', 'PNG', 'JSON', 'Markdown', 'HTML'
+  icon: string;     // emoji or unicode
+}
+
+const CSV_FMT:  ExportFormat = { id: 'csv',  label: 'CSV',      icon: '📊' };
+const PNG_FMT:  ExportFormat = { id: 'png',  label: 'PNG',      icon: '📷' };
+const JSON_FMT: ExportFormat = { id: 'json', label: 'JSON',     icon: '📋' };
+const MD_FMT:   ExportFormat = { id: 'md',   label: 'Markdown', icon: '📝' };
+const HTML_FMT: ExportFormat = { id: 'html', label: 'HTML',     icon: '🌐' };
+
+/**
+ * Return the list of export formats available for a given widget type.
+ */
+export function getExportFormats(type: string, containerEl?: HTMLElement): ExportFormat[] {
+  switch (type) {
+    case 'data-table':
+    case 'grid-data':
+    case 'kv':
+    case 'list':
+      return [CSV_FMT, JSON_FMT];
+
+    case 'chart':
+    case 'chart-rich':
+    case 'sankey':
+    case 'd3':
+    case 'hemicycle':
+    case 'map':
+      return [PNG_FMT, JSON_FMT];
+
+    case 'text':
+    case 'code':
+    case 'log':
+      return [MD_FMT, JSON_FMT];
+
+    case 'js-sandbox':
+      return [HTML_FMT, JSON_FMT];
+
+    case 'gallery':
+    case 'carousel':
+      return [JSON_FMT];
+
+    default:
+      return [JSON_FMT];
+  }
+}
+
+/**
+ * Export a widget in a specific format chosen by the user.
+ */
+export function exportWidgetAs(
+  format: string,
+  type: string,
+  data: Record<string, unknown>,
+  containerEl?: HTMLElement
+): void {
+  switch (format) {
+    case 'csv':
+      exportCsv(type, data);
+      break;
+    case 'png':
+      if (containerEl) exportPng(type, containerEl);
+      else console.warn('[exportWidgetAs] containerEl required for PNG export');
+      break;
+    case 'md':
+      exportMarkdown(type, data);
+      break;
+    case 'html':
+      exportHtml(type, data, containerEl);
+      break;
+    case 'json':
+    default:
+      exportJson(type, data);
+      break;
+  }
+}
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+/**
+ * Export a widget's data in the most appropriate format for its type.
+ * @deprecated Use getExportFormats() + exportWidgetAs() for format selection modal.
+ *
+ * @param type       Widget type identifier (e.g. "data-table", "chart", "text")
+ * @param data       The widget's data object
+ * @param containerEl Optional DOM container — required for PNG exports
+ */
+export function exportWidget(
+  type: string,
+  data: Record<string, unknown>,
+  containerEl?: HTMLElement
+): void {
+  switch (type) {
+    // ── CSV ──
+    case 'data-table':
+    case 'grid-data':
+    case 'kv':
+    case 'list':
+      exportCsv(type, data);
+      break;
+
+    // ── PNG ──
+    case 'chart':
+    case 'chart-rich':
+    case 'sankey':
+    case 'd3':
+    case 'hemicycle':
+    case 'map':
+      if (containerEl) {
+        exportPng(type, containerEl);
+      } else {
+        console.warn('[exportWidget] containerEl required for PNG export of type:', type);
+      }
+      break;
+
+    // ── Markdown ──
+    case 'text':
+    case 'code':
+    case 'log':
+      exportMarkdown(type, data);
+      break;
+
+    // ── HTML ──
+    case 'js-sandbox':
+      exportHtml(type, data, containerEl);
+      break;
+
+    // ── Image URL lists ──
+    case 'gallery':
+    case 'carousel':
+      exportImageUrls(type, data);
+      break;
+
+    // ── JSON (everything else) ──
+    case 'json-viewer':
+    case 'profile':
+    case 'stat-card':
+    case 'stat':
+    case 'tags':
+    case 'alert':
+    case 'actions':
+    case 'cards':
+    case 'timeline':
+    case 'trombinoscope':
+    default:
+      exportJson(type, data);
+      break;
+  }
+}

package/src/widgets/rich/Cards.svelte

@@ -20,7 +20,7 @@
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <!-- svelte-ignore a11y_interactive_supports_focus -->
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-        <div class="bg-surface2 border border-border rounded-lg overflow-hidden hover:border-border2 transition-all {oncardclick?'cursor-pointer':''}" role={oncardclick?"button":undefined} tabindex={oncardclick?0:undefined} onclick={()=>oncardclick?.(card)}>
+        <div class="bg-surface2 border border-border rounded-lg overflow-hidden hover:border-border2 transition-all {oncardclick?'cursor-pointer':''}" role={oncardclick?"button":undefined} tabindex={oncardclick?0:undefined} title={oncardclick?"Double-cliquez pour interagir":undefined} ondblclick={()=>oncardclick?.(card)}>
           {#if card.image}<SafeImage src={card.image} alt={card.title} class="w-full h-32 object-cover" hideOnError />{/if}
           <div class="p-3">
             <div class="font-semibold text-sm text-text1 leading-tight">{card.title}</div>

package/src/widgets/rich/Chart.svelte

@@ -3,7 +3,11 @@
   export interface ChartSpec { title?: string; type?: 'bar'|'line'|'area'|'pie'|'donut'; labels?: string[]; data?: ChartDataset[]; legend?: boolean; xAxis?: {label?:string}; yAxis?: {label?:string}; }
   interface Props { spec: Partial<ChartSpec>; }
   let { spec }: Props = $props();
-  const PAL=['#7c6dfa','#3ecfb2','#f0a050','#fa6d7c','#3b82f6','#a855f7','#14b8a6','#f97316'];
+  const PAL=[
+    '#6366f1','#f59e0b','#10b981','#ef4444','#8b5cf6',
+    '#06b6d4','#f97316','#ec4899','#14b8a6','#a855f7',
+    '#eab308','#3b82f6','#22c55e','#e11d48','#0ea5e9',
+  ];
   const fmt=new Intl.NumberFormat('fr-FR');
   const datasets=$derived<ChartDataset[]>(Array.isArray(spec.data)?spec.data:[]);
   const labels=$derived<string[]>(Array.isArray(spec.labels)?spec.labels:[]);
@@ -14,6 +18,10 @@
   const xLabels=$derived(labels.length>0?labels:(datasets[0]?.values??[]).map((_:number,i:number)=>String(i+1)));
   const showLegend=$derived(spec.legend!==false&&datasets.length>1);
   function col(ds:ChartDataset,i:number){return ds.color??PAL[i%PAL.length];}
+  /** For single-series bar charts, color each bar distinctly by x-index */
+  const isCategoricalBar=$derived(type==='bar'&&datasets.length===1);
+  const isCategoricalLine=$derived((type==='line'||type==='area')&&datasets.length===1);
+  function barCol(ds:ChartDataset,di:number,xi:number){return isCategoricalBar?PAL[xi%PAL.length]:col(ds,di);}
   // Pie
   const pieTotal=$derived.by<number>(()=>{const ds=datasets[0];if(!ds)return 1;return ds.values.reduce((a,b)=>a+b,0)||1;});
   interface Slice{label:string;value:number;color:string;startAngle:number;endAngle:number;pct:number}
@@ -71,7 +79,7 @@
                 {@const v=ds.values[xi]??0}
                 {@const pct=Math.round(v/maxVal*100)}
                 <div class="flex-1 rounded-t transition-all hover:opacity-80 cursor-default"
-                  style="height:{pct}%;background:{col(ds,di)};"
+                  style="height:{pct}%;background:{barCol(ds,di,xi)};"
                   title="{ds.label??''} {lbl}: {fmt.format(v)}">
                 </div>
               {/each}
@@ -90,6 +98,11 @@
               <polygon points="{pad},{H-pad} {pts.join(' ')} {pad+((ds.values.length-1)*((W-pad*2)/(ds.values.length-1||1)))},{H-pad}" fill={col(ds,di)} opacity="0.15"/>
             {/if}
             <polyline points={pts.join(' ')} fill="none" stroke={col(ds,di)} stroke-width="2" stroke-linejoin="round"/>
+            {#each ds.values as v, i}
+              {@const cx = pad + i * ((W - pad * 2) / (ds.values.length - 1 || 1))}
+              {@const cy = H - pad - (v / maxVal) * (H - pad * 2)}
+              <circle cx={cx} cy={cy} r="4" fill={isCategoricalLine ? PAL[i % PAL.length] : col(ds, di)} stroke="var(--color-surface, white)" stroke-width="1.5" />
+            {/each}
           {/each}
         </svg>
         <div class="flex gap-1">
@@ -97,7 +110,25 @@
         </div>
       {/if}
     </div>
-    {#if showLegend}
+    {#if isCategoricalLine && xLabels.length>1}
+      <div class="flex gap-3 flex-wrap mt-2">
+        {#each xLabels as lbl, xi}
+          <div class="flex items-center gap-1 text-xs">
+            <div class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:{PAL[xi%PAL.length]};"></div>
+            <span class="text-text2">{lbl}</span>
+          </div>
+        {/each}
+      </div>
+    {:else if isCategoricalBar && xLabels.length>1}
+      <div class="flex gap-3 flex-wrap mt-2">
+        {#each xLabels as lbl,xi}
+          <div class="flex items-center gap-1 text-xs">
+            <div class="w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:{PAL[xi%PAL.length]};"></div>
+            <span class="text-text2">{lbl}</span>
+          </div>
+        {/each}
+      </div>
+    {:else if showLegend}
       <div class="flex gap-3 flex-wrap mt-2">
         {#each datasets as ds,i}
           <div class="flex items-center gap-1 text-xs">

package/src/widgets/rich/DataTable.svelte

@@ -37,7 +37,8 @@
         <tbody>
           {#each displayed as row, i}
             <tr class="hover:bg-surface2 transition-colors {spec.striped!==false&&i%2===1?'bg-white/[0.02]':''} {onrowclick?'cursor-pointer':''}"
-              onclick={()=>onrowclick?.(row)}>
+              title={onrowclick?"Double-cliquez pour interagir":undefined}
+              ondblclick={()=>onrowclick?.(row)}>
               {#each columns as col}
                 {@const val=row[col.key]}
                 <td class="border-b border-border text-text1 overflow-hidden text-ellipsis whitespace-nowrap max-w-[280px] {compact?'px-2 py-1 text-xs':'px-3 py-2 text-sm'} {col.align==='center'?'text-center':col.align==='right'?'text-right':''}">

package/src/widgets/rich/Gallery.svelte

@@ -16,6 +16,8 @@
 
   function open(i: number) {
     lightboxIdx = i;
+  }
+  function interact(i: number) {
     onimageclick?.(images[i], i);
   }
   function close() { lightboxIdx = null; }
@@ -35,11 +37,22 @@
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
   {#if images.length === 0}
     <p class="text-text2 text-sm">{spec.emptyMessage ?? 'Aucune image'}</p>
+  {:else if images.length === 1}
+    {@const img = images[0]}
+    <button class="relative overflow-hidden rounded-lg border border-border hover:border-border2 transition-all cursor-pointer bg-transparent p-0 group w-full"
+      onclick={() => open(0)}>
+      <SafeImage src={img.src} alt={img.alt ?? ''} class="w-full max-h-[400px] object-contain rounded-lg" loading="eager" />
+      {#if img.caption || img.alt}
+        <div class="mt-2 text-center text-xs text-text2">{img.caption ?? img.alt}</div>
+      {/if}
+    </button>
   {:else}
     <div class="grid gap-2 responsive-gallery" style="--gallery-cols: repeat({spec.columns ?? 3}, minmax(0, 1fr));">
       {#each images as img, i}
         <button class="relative overflow-hidden rounded-lg border border-border hover:border-border2 transition-all cursor-pointer bg-transparent p-0 group"
-          onclick={() => open(i)}>
+          title={onimageclick?"Double-cliquez pour interagir":undefined}
+          onclick={() => open(i)}
+          ondblclick={() => interact(i)}>
           <SafeImage src={img.src} alt={img.alt ?? ''} class="w-full h-32 sm:h-40 object-cover transition-transform group-hover:scale-105" loading="lazy" />
           {#if img.caption}
             <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1.5">

package/src/widgets/rich/GridData.svelte

@@ -30,9 +30,10 @@
           {#each rows as row, ri}
             <tr class="hover:bg-surface2">
               {#each (Array.isArray(row)?row:[]) as cell, ci}
-                <td class="px-3 text-text2 border-b border-r border-border cursor-pointer hover:bg-surface2"
+                <td class="px-3 text-text2 border-b border-r border-border {oncellclick?'cursor-pointer':''} hover:bg-surface2"
                   style="height:{cellH}px;{bg(ri,ci)?`background:${bg(ri,ci)};`:''}"
-                  onclick={()=>oncellclick?.(ri,ci,cell)}>{dv(cell)}</td>
+                  title={oncellclick?"Double-cliquez pour interagir":undefined}
+                  ondblclick={()=>oncellclick?.(ri,ci,cell)}>{dv(cell)}</td>
               {/each}
             </tr>
           {/each}

package/src/widgets/rich/Hemicycle.svelte

@@ -51,7 +51,9 @@
             class={s.gid?'cursor-pointer':''}
             onmouseenter={()=>{const g=groups.find(g=>g.id===s.gid);if(g)tooltip={label:g.label,seats:g.seats};}}
             onmouseleave={()=>tooltip=null}
-            onclick={()=>{const g=groups.find(g=>g.id===s.gid);if(g)ongroupclick?.(g);}}/>
+            ondblclick={()=>{const g=groups.find(g=>g.id===s.gid);if(g)ongroupclick?.(g);}}>
+            {#if s.gid}<title>Double-cliquez pour interagir</title>{/if}
+          </circle>
         {/each}
         <text x={cx} y={cy+18} text-anchor="middle" font-size="11" fill="var(--color-text2)" font-family="system-ui">{total} sièges</text>
       </svg>
@@ -65,7 +67,7 @@
       {#each legend as g}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="flex items-center gap-1.5 text-xs cursor-pointer hover:opacity-80" role="button" tabindex="0" onclick={()=>ongroupclick?.(g)} onkeydown={(e)=>{if(e.key==="Enter")ongroupclick?.(g)}}>
+        <div class="flex items-center gap-1.5 text-xs cursor-pointer hover:opacity-80" role="button" tabindex="0" title="Double-cliquez pour interagir" ondblclick={()=>ongroupclick?.(g)} onkeydown={(e)=>{if(e.key==="Enter")ongroupclick?.(g)}}>
           <div class="w-3 h-3 rounded-full flex-shrink-0" style="background:{g.color};"></div>
           <span class="text-text2">{g.label}</span>
           <span class="text-text2">{g.seats}</span>

package/src/widgets/rich/Timeline.svelte

@@ -18,7 +18,7 @@
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <!-- svelte-ignore a11y_interactive_supports_focus -->
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-        <div class="flex gap-4 relative {!isLast?'pb-5':''} {oneventclick?'cursor-pointer':''}" role={oneventclick?"button":undefined} tabindex={oneventclick?0:undefined} onclick={()=>oneventclick?.(event)} onkeydown={(e)=>{if(e.key==='Enter')oneventclick?.(event)}}>
+        <div class="flex gap-4 relative {!isLast?'pb-5':''} {oneventclick?'cursor-pointer':''}" role={oneventclick?"button":undefined} tabindex={oneventclick?0:undefined} title={oneventclick?"Double-cliquez pour interagir":undefined} ondblclick={()=>oneventclick?.(event)} onkeydown={(e)=>{if(e.key==='Enter')oneventclick?.(event)}}>
           <div class="flex flex-col items-center flex-shrink-0">
             <div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5" style="background:{dotColor};{event.status==='active'?`box-shadow:0 0 0 3px ${dotColor}33;`:''}"></div>
             {#if !isLast}<div class="w-0.5 flex-1 bg-border mt-1"></div>{/if}

package/src/widgets/simple/ChartBlock.svelte

@@ -9,7 +9,7 @@
   {#if data.title}<div class="text-[10px] font-mono text-text2 mb-4 uppercase tracking-widest">{data.title}</div>{/if}
   <div class="flex items-end gap-1.5 h-32">
     {#each bars as [, val]}
-      <div class="flex-1 rounded-t bg-accent/80 hover:bg-accent transition-all"
+      <div class="flex-1 rounded-t bg-accent opacity-80 hover:opacity-100 transition-all"
         style="height: max(2px, {Math.round(val / max * 100)}%)"></div>
     {/each}
   </div>

package/src/widgets/simple/ListBlock.svelte

@@ -10,7 +10,8 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <li class="text-sm text-text1 bg-surface2 rounded px-3 py-2 border-l-2 border-accent {onitemclick ? 'cursor-pointer hover:bg-surface2/80' : ''}"
-          onclick={() => onitemclick?.(item, i)}>{item}</li>
+          title={onitemclick?"Double-cliquez pour interagir":undefined}
+          ondblclick={() => onitemclick?.(item, i)}>{item}</li>
     {/each}
   </ul>
 </div>

package/src/widgets/simple/TextBlock.svelte

@@ -2,5 +2,121 @@
   export interface TextBlockData { content?: string; }
   interface Props { data: Partial<TextBlockData>; }
   let { data }: Props = $props();
+
+  /** Minimal markdown → HTML renderer (no deps, naturally XSS-safe: only produces known tags) */
+  function renderMarkdown(src: string): string {
+    if (!src) return '';
+
+    // Escape HTML entities first (XSS protection)
+    const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+    const lines = src.split('\n');
+    const out: string[] = [];
+    let inCode = false;
+    let codeLines: string[] = [];
+    let inUl = false;
+    let inOl = false;
+
+    const closeList = () => {
+      if (inUl) { out.push('</ul>'); inUl = false; }
+      if (inOl) { out.push('</ol>'); inOl = false; }
+    };
+
+    /** Inline formatting: bold, italic, code, links */
+    const inline = (s: string): string => {
+      return esc(s)
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    };
+
+    for (const line of lines) {
+      // Fenced code block toggle
+      if (line.trimStart().startsWith('```')) {
+        if (!inCode) {
+          closeList();
+          inCode = true;
+          codeLines = [];
+        } else {
+          out.push(`<pre><code>${esc(codeLines.join('\n'))}</code></pre>`);
+          inCode = false;
+        }
+        continue;
+      }
+      if (inCode) { codeLines.push(line); continue; }
+
+      const trimmed = line.trim();
+
+      // Empty line → close lists, push break
+      if (!trimmed) { closeList(); out.push(''); continue; }
+
+      // Headers
+      const hMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+      if (hMatch) {
+        closeList();
+        const level = hMatch[1].length;
+        out.push(`<h${level}>${inline(hMatch[2])}</h${level}>`);
+        continue;
+      }
+
+      // Unordered list
+      if (/^[-*+]\s+/.test(trimmed)) {
+        if (inOl) { out.push('</ol>'); inOl = false; }
+        if (!inUl) { out.push('<ul>'); inUl = true; }
+        out.push(`<li>${inline(trimmed.replace(/^[-*+]\s+/, ''))}</li>`);
+        continue;
+      }
+
+      // Ordered list
+      const olMatch = trimmed.match(/^(\d+)\.\s+(.+)$/);
+      if (olMatch) {
+        if (inUl) { out.push('</ul>'); inUl = false; }
+        if (!inOl) { out.push('<ol>'); inOl = true; }
+        out.push(`<li>${inline(olMatch[2])}</li>`);
+        continue;
+      }
+
+      // Horizontal rule
+      if (/^[-*_]{3,}$/.test(trimmed)) {
+        closeList();
+        out.push('<hr>');
+        continue;
+      }
+
+      // Regular paragraph line
+      closeList();
+      out.push(`<p>${inline(trimmed)}</p>`);
+    }
+
+    // Close any open blocks
+    if (inCode) out.push(`<pre><code>${esc(codeLines.join('\n'))}</code></pre>`);
+    closeList();
+
+    return out.join('\n');
+  }
+
+  let rendered = $derived(renderMarkdown(data.content ?? ''));
 </script>
-<div class="p-4 md:p-5 text-sm text-text2 leading-relaxed">{data.content ?? ''}</div>
+<div class="tb-md p-4 md:p-5 text-sm leading-relaxed">{@html rendered}</div>
+
+<style>
+  .tb-md { color: var(--color-text2); }
+  .tb-md :global(h1) { font-size: 1.5em; font-weight: 700; color: var(--color-text1); margin: 0.8em 0 0.4em; }
+  .tb-md :global(h2) { font-size: 1.25em; font-weight: 600; color: var(--color-text1); margin: 0.7em 0 0.35em; }
+  .tb-md :global(h3) { font-size: 1.1em; font-weight: 600; color: var(--color-text1); margin: 0.6em 0 0.3em; }
+  .tb-md :global(h4), .tb-md :global(h5), .tb-md :global(h6) { font-size: 1em; font-weight: 600; color: var(--color-text1); margin: 0.5em 0 0.25em; }
+  .tb-md :global(p) { margin: 0.4em 0; }
+  .tb-md :global(strong) { font-weight: 600; color: var(--color-text1); }
+  .tb-md :global(em) { font-style: italic; }
+  .tb-md :global(a) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
+  .tb-md :global(a:hover) { opacity: 0.8; }
+  .tb-md :global(ul), .tb-md :global(ol) { margin: 0.4em 0; padding-left: 1.5em; }
+  .tb-md :global(ul) { list-style: disc; }
+  .tb-md :global(ol) { list-style: decimal; }
+  .tb-md :global(li) { margin: 0.15em 0; }
+  .tb-md :global(code) { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.9em; background: var(--color-surface2); padding: 0.15em 0.35em; border-radius: 4px; }
+  .tb-md :global(pre) { background: var(--color-surface2); border-radius: 6px; padding: 0.75em 1em; margin: 0.5em 0; overflow-x: auto; }
+  .tb-md :global(pre code) { background: none; padding: 0; font-size: 0.85em; }
+  .tb-md :global(hr) { border: none; border-top: 1px solid var(--color-surface2); margin: 0.8em 0; }
+</style>

package/src/wm/FlexLayout.svelte

@@ -81,6 +81,7 @@
   .flex-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--min-w), 1fr));
+    grid-auto-rows: 280px;
     gap: var(--gap);
     padding: var(--gap);
   }