@webmcp-auto-ui/ui 2.5.19 → 2.5.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.19",
+  "version": "2.5.21",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -50,6 +50,7 @@
     "@types/d3": "^7.4.3",
     "bits-ui": "^2.17.2",
     "clsx": "^2.1.1",
+    "html-to-image": "^1.11.13",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2"
   }

package/src/agent/SettingsPanel.svelte

@@ -11,6 +11,7 @@
     compressHistory?: boolean;
     compressPreview?: number;
     contextRAGEnabled?: boolean;
+    ragResidueSize?: number;
     cacheEnabled?: boolean;
     temperature?: number;
     topK?: number;
@@ -29,6 +30,7 @@
     compressHistory = $bindable(false),
     compressPreview = $bindable(500),
     contextRAGEnabled = $bindable(false),
+    ragResidueSize = $bindable(200),
     cacheEnabled = $bindable(true),
     temperature = $bindable(0.7),
     topK = $bindable(10),
@@ -210,7 +212,7 @@
     <div>
       <label class="flex items-center gap-2 cursor-pointer select-none mb-1">
         <input type="checkbox" bind:checked={compressHistory} class="accent-accent w-3.5 h-3.5" />
-        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Compresser l'historique</span>
+        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Tronquer l'historique</span>
       </label>
       {#if compressHistory}
       <div class="flex justify-between items-baseline mb-1">
@@ -230,9 +232,18 @@
       <span class="text-[8px] font-mono text-text2/40 ml-auto">experimental</span>
     </label>
     {#if contextRAGEnabled}
-      <div class="text-[9px] font-mono text-text2/60 pl-5">
+      <div class="text-[9px] font-mono text-text2/60 pl-5 mb-2">
         Semantic context compaction via vector embeddings
       </div>
+      <div class="pl-5">
+        <div class="flex justify-between items-baseline mb-1">
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Résidu inline (chars)</span>
+          <span class="font-mono text-xs text-text1">{ragResidueSize}</span>
+        </div>
+        <input type="range" bind:value={ragResidueSize}
+               min={0} max={2000} step={50}
+               class="w-full accent-accent" />
+      </div>
     {/if}
   </section>
 

package/src/widgets/export-widget.ts

@@ -3,6 +3,10 @@
  * Determines the best export format based on widget type and triggers a file download.
  */
 
+import { toPng } from 'html-to-image';
+
+const TARGET_PNG_WIDTH = 2048;
+
 // ── helpers ──────────────────────────────────────────────────────────────────
 
 function timestamp(): string {
@@ -81,54 +85,37 @@ function exportCsv(type: string, data: Record<string, unknown>): void {
   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);
-}
+// ── PNG via html-to-image ─────────────────────────────────────────────────────
 
-function exportPng(type: string, containerEl: HTMLElement): void {
+async function exportPng(type: string, containerEl: HTMLElement): Promise<void> {
   const name = filename(type, 'png');
-
-  // Prefer canvas (chart.js renders to <canvas>)
-  const canvasEl = containerEl.querySelector('canvas');
-  if (canvasEl) {
-    canvasToPng(canvasEl, name);
-    return;
+  // Use scroll dimensions to capture the FULL content, not just the visible viewport.
+  // Widgets like data-table can overflow horizontally; clientWidth would crop them.
+  const scrollW = Math.max(containerEl.scrollWidth, containerEl.clientWidth, 1);
+  const scrollH = Math.max(containerEl.scrollHeight, containerEl.clientHeight, 1);
+  const pixelRatio = TARGET_PNG_WIDTH / scrollW;
+
+  const bg = (typeof document !== 'undefined'
+    ? getComputedStyle(document.documentElement).getPropertyValue('--color-surface').trim()
+    : '') || '#ffffff';
+
+  try {
+    const dataUrl = await toPng(containerEl, {
+      pixelRatio,
+      width: scrollW,
+      height: scrollH,
+      cacheBust: true,
+      backgroundColor: bg,
+      style: {
+        // Force children visibility inside the cloned node so overflow content renders
+        overflow: 'visible',
+      },
+    });
+    downloadFile(dataUrl, name);
+  } catch (err) {
+    console.error('[exportWidget] PNG export failed for type', type, err);
+    alert(`Export PNG impossible : ${err instanceof Error ? err.message : String(err)}`);
   }
-
-  // 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 ──────────────────────────────────────────────────────────────────
@@ -209,53 +196,39 @@ 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[] {
+  const base: ExportFormat[] = [PNG_FMT, JSON_FMT];
   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];
-
+      return [CSV_FMT, ...base];
     case 'text':
     case 'code':
     case 'log':
-      return [MD_FMT, JSON_FMT];
-
+      return [MD_FMT, ...base];
     case 'js-sandbox':
-      return [HTML_FMT, JSON_FMT];
-
-    case 'gallery':
-    case 'carousel':
-      return [JSON_FMT];
-
+      return [HTML_FMT, ...base];
     default:
-      return [JSON_FMT];
+      return base;
   }
 }
 
 /**
  * Export a widget in a specific format chosen by the user.
  */
-export function exportWidgetAs(
+export async function exportWidgetAs(
   format: string,
   type: string,
   data: Record<string, unknown>,
   containerEl?: HTMLElement
-): void {
+): Promise<void> {
   switch (format) {
     case 'csv':
       exportCsv(type, data);
       break;
     case 'png':
-      if (containerEl) exportPng(type, containerEl);
+      if (containerEl) await exportPng(type, containerEl);
       else console.warn('[exportWidgetAs] containerEl required for PNG export');
       break;
     case 'md':
@@ -281,11 +254,11 @@ export function exportWidgetAs(
  * @param data       The widget's data object
  * @param containerEl Optional DOM container — required for PNG exports
  */
-export function exportWidget(
+export async function exportWidget(
   type: string,
   data: Record<string, unknown>,
   containerEl?: HTMLElement
-): void {
+): Promise<void> {
   switch (type) {
     // ── CSV ──
     case 'data-table':
@@ -303,7 +276,7 @@ export function exportWidget(
     case 'hemicycle':
     case 'map':
       if (containerEl) {
-        exportPng(type, containerEl);
+        await exportPng(type, containerEl);
       } else {
         console.warn('[exportWidget] containerEl required for PNG export of type:', type);
       }