@webmcp-auto-ui/ui 2.5.27 → 2.5.29

package/src/widgets/simple/text.ts

@@ -0,0 +1,198 @@
+/**
+ * Vanilla renderer for the "text" / TextBlock widget.
+ *
+ * Mirrors the Svelte TextBlock.svelte output: a <div class="tb-md ..."> whose
+ * innerHTML is produced by a minimal, XSS-safe markdown -> HTML function.
+ *
+ * XSS note: renderMarkdown() escapes &, <, >, " BEFORE applying inline rules,
+ * so user-controlled text can only reach the DOM as already-escaped entities or
+ * as the structural tags we explicitly emit (h1-6, p, strong, em, code, pre, ul,
+ * ol, li, a, hr). Using innerHTML here is therefore safe — the function is the
+ * single source of trust for sanitization.
+ */
+
+export interface TextBlockData {
+  content?: string;
+}
+
+/** 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>')
+      // Whitelist URL protocols to block javascript:/data:/vbscript: XSS via markdown links.
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m, label, href) =>
+        /^(https?:|\/|#|mailto:)/i.test(href)
+          ? `<a href="${href}" target="_blank" rel="noopener">${label}</a>`
+          : label,
+      );
+  };
+
+  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');
+}
+
+/** Scoped styles — emitted once per document, matching TextBlock.svelte :global rules. */
+const STYLE_ID = 'autoui-text-widget-styles';
+const STYLE_CSS = `
+.tb-md { color: var(--color-text2); }
+.tb-md h1 { font-size: 1.5em; font-weight: 700; color: var(--color-text1); margin: 0.8em 0 0.4em; }
+.tb-md h2 { font-size: 1.25em; font-weight: 600; color: var(--color-text1); margin: 0.7em 0 0.35em; }
+.tb-md h3 { font-size: 1.1em; font-weight: 600; color: var(--color-text1); margin: 0.6em 0 0.3em; }
+.tb-md h4, .tb-md h5, .tb-md h6 { font-size: 1em; font-weight: 600; color: var(--color-text1); margin: 0.5em 0 0.25em; }
+.tb-md p { margin: 0.4em 0; }
+.tb-md strong { font-weight: 600; color: var(--color-text1); }
+.tb-md em { font-style: italic; }
+.tb-md a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
+.tb-md a:hover { opacity: 0.8; }
+.tb-md ul, .tb-md ol { margin: 0.4em 0; padding-left: 1.5em; }
+.tb-md ul { list-style: disc; }
+.tb-md ol { list-style: decimal; }
+.tb-md li { margin: 0.15em 0; }
+.tb-md 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 pre { background: var(--color-surface2); border-radius: 6px; padding: 0.75em 1em; margin: 0.5em 0; overflow-x: auto; }
+.tb-md pre code { background: none; padding: 0; font-size: 0.85em; }
+.tb-md hr { border: none; border-top: 1px solid var(--color-surface2); margin: 0.8em 0; }
+`;
+
+function ensureStyles(doc: Document): void {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = STYLE_CSS;
+  doc.head.appendChild(style);
+}
+
+/**
+ * Mount a text / markdown widget into `container`.
+ *
+ * Returns an `unmount()` function that clears the container and removes any
+ * attached listeners.
+ */
+export function render(container: HTMLElement, data: any): () => void {
+  const payload = (data ?? {}) as Partial<TextBlockData>;
+  const content = typeof payload.content === 'string' ? payload.content : '';
+
+  ensureStyles(container.ownerDocument ?? document);
+
+  const root = container.ownerDocument.createElement('div');
+  root.className = 'tb-md p-4 md:p-5 text-sm leading-relaxed';
+
+  if (!content.trim()) {
+    // Empty-state placeholder — keeps layout, signals absence to a11y tree.
+    const placeholder = container.ownerDocument.createElement('p');
+    placeholder.textContent = '';
+    placeholder.setAttribute('aria-label', 'empty text block');
+    placeholder.style.opacity = '0.5';
+    placeholder.style.fontStyle = 'italic';
+    root.appendChild(placeholder);
+  } else {
+    // Safe: renderMarkdown() escapes user text before emitting tags.
+    root.innerHTML = renderMarkdown(content);
+  }
+
+  // Delegated click handler — lets links emit widget:interact for host apps
+  // (e.g. analytics / canvas telemetry) without blocking default navigation.
+  const onClick = (ev: MouseEvent) => {
+    const target = ev.target as HTMLElement | null;
+    if (!target) return;
+    const anchor = target.closest('a');
+    if (!anchor || !root.contains(anchor)) return;
+    container.dispatchEvent(
+      new CustomEvent('widget:interact', {
+        detail: { action: 'link', payload: { href: (anchor as HTMLAnchorElement).href } },
+        bubbles: true,
+      }),
+    );
+  };
+  root.addEventListener('click', onClick);
+
+  container.appendChild(root);
+
+  return () => {
+    root.removeEventListener('click', onClick);
+    container.innerHTML = '';
+  };
+}

package/src/widgets/SafeImage.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-  /**
-   * SafeImage — Robust image component with URL validation, error fallback, and loading state.
-   * Replaces raw <img> tags in widgets to handle hallucinated/broken URLs gracefully.
-   */
-  interface Props {
-    src: string | undefined | null;
-    alt?: string;
-    class?: string;
-    style?: string;
-    loading?: 'lazy' | 'eager';
-    /** Fallback text shown when image fails or URL is invalid (defaults to alt or 'Image') */
-    fallbackText?: string;
-    /** If true, render nothing when URL is invalid/missing instead of showing placeholder */
-    hideOnError?: boolean;
-  }
-
-  let { src, alt = '', class: className = '', style = '', loading = 'lazy', fallbackText, hideOnError = false }: Props = $props();
-
-  const VALID_PREFIXES = ['http://', 'https://', 'data:', '/'];
-
-  const isValidUrl = $derived(
-    typeof src === 'string' && src.length > 0 && VALID_PREFIXES.some(p => src!.startsWith(p))
-  );
-
-  let hasError = $state(false);
-  let isLoaded = $state(false);
-
-  // Reset state when src changes
-  $effect(() => {
-    if (src) {
-      hasError = false;
-      isLoaded = false;
-    }
-  });
-
-  function onError() {
-    hasError = true;
-  }
-
-  function onLoad() {
-    isLoaded = true;
-  }
-
-  const showPlaceholder = $derived(!isValidUrl || hasError);
-  const label = $derived(fallbackText ?? alt ?? 'Image');
-</script>
-
-{#if showPlaceholder}
-  {#if !hideOnError}
-    <div
-      class="flex items-center justify-center bg-surface2 text-text2 text-xs {className}"
-      {style}
-      role="img"
-      aria-label={label}
-    >
-      <svg class="w-5 h-5 opacity-40 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-        <rect x="3" y="3" width="18" height="18" rx="2" />
-        <circle cx="8.5" cy="8.5" r="1.5" />
-        <path d="M21 15l-5-5L5 21" />
-      </svg>
-      <span class="truncate max-w-[80%]">{label}</span>
-    </div>
-  {/if}
-{:else}
-  <img
-    {src}
-    {alt}
-    class={className}
-    {style}
-    {loading}
-    onerror={onError}
-    onload={onLoad}
-    referrerpolicy="no-referrer"
-  />
-{/if}

package/src/widgets/rich/Cards.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import SafeImage from '../SafeImage.svelte';
-  export interface CardItem { title: string; description?: string; subtitle?: string; image?: string; tags?: string[]; href?: string; }
-  export interface CardsSpec { title?: string; cards?: CardItem[]; minCardWidth?: string; gap?: string; emptyMessage?: string; }
-  interface Props { spec: Partial<CardsSpec>; data?: unknown; oncardclick?: (c: CardItem) => void; }
-  let { spec, data, oncardclick }: Props = $props();
-  const cards=$derived.by<CardItem[]>(()=>{
-    if(Array.isArray(spec.cards)&&spec.cards.length) return spec.cards;
-    if(Array.isArray(data)) return (data as Record<string,unknown>[]).map(d=>({title:String(d.title??d.name??d.label??JSON.stringify(d)),description:d.description as string|undefined,subtitle:d.subtitle as string|undefined}));
-    return [];
-  });
-</script>
-<div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
-  {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if cards.length===0}<p class="text-text2 text-sm">{spec.emptyMessage??'No items'}</p>
-  {:else}
-    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax({spec.minCardWidth??'180px'}, 1fr)); gap: {spec.gap??'1rem'};">
-      {#each cards as card}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- 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} 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>
-            {#if card.subtitle}<div class="text-xs text-text2 mt-0.5">{card.subtitle}</div>{/if}
-            {#if card.description}<div class="text-xs text-text2 mt-1.5 leading-relaxed">{card.description}</div>{/if}
-            {#if card.tags?.length}
-              <div class="flex gap-1 flex-wrap mt-2">
-                {#each card.tags as tag}<span class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-surface2 text-text2">{tag}</span>{/each}
-              </div>
-            {/if}
-          </div>
-        </div>
-      {/each}
-    </div>
-  {/if}
-</div>

package/src/widgets/rich/Carousel.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-  import SafeImage from '../SafeImage.svelte';
-  export interface CarouselSlide { src?: string; content?: string; title?: string; subtitle?: string; }
-  export interface CarouselSpec { title?: string; slides?: CarouselSlide[]; autoPlay?: boolean; interval?: number; }
-  interface Props { spec: Partial<CarouselSpec>; data?: unknown; onslidechange?: (slide: CarouselSlide, index: number) => void; }
-  let { spec, data, onslidechange }: Props = $props();
-
-  const slides = $derived.by<CarouselSlide[]>(() => {
-    if (Array.isArray(spec.slides) && spec.slides.length) return spec.slides;
-    if (Array.isArray(data)) return data as CarouselSlide[];
-    return [];
-  });
-
-  let current = $state(0);
-  let timer: ReturnType<typeof setInterval> | null = null;
-
-  function goTo(i: number, userInitiated = false) {
-    current = Math.max(0, Math.min(i, slides.length - 1));
-    if (userInitiated) onslidechange?.(slides[current], current);
-    resetAuto();
-  }
-  function prev() { goTo(current > 0 ? current - 1 : slides.length - 1, true); }
-  function next() { goTo(current < slides.length - 1 ? current + 1 : 0); }
-
-  function resetAuto() {
-    if (timer) clearInterval(timer);
-    if (spec.autoPlay !== false && slides.length > 1) {
-      timer = setInterval(next, spec.interval ?? 5000);
-    }
-  }
-
-  $effect(() => {
-    if (spec.autoPlay !== false && slides.length > 1) {
-      resetAuto();
-      return () => { if (timer) clearInterval(timer); };
-    }
-  });
-
-  // Touch/swipe support
-  let touchStartX = 0;
-  function onTouchStart(e: TouchEvent) { touchStartX = e.touches[0].clientX; }
-  function onTouchEnd(e: TouchEvent) {
-    const diff = touchStartX - e.changedTouches[0].clientX;
-    if (Math.abs(diff) > 50) { diff > 0 ? next() : prev(); }
-  }
-</script>
-
-<div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
-  {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if slides.length === 0}
-    <p class="text-text2 text-sm">Aucun contenu</p>
-  {:else}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="relative overflow-hidden rounded-lg"
-      ontouchstart={onTouchStart} ontouchend={onTouchEnd}>
-      <div class="flex transition-transform duration-300 ease-out" style="transform: translateX(-{current * 100}%);">
-        {#each slides as slide}
-          <div class="w-full flex-shrink-0">
-            {#if slide.src}
-              <SafeImage src={slide.src} alt={slide.title ?? ''} class="w-full h-48 sm:h-64 object-cover" loading="lazy" />
-            {/if}
-            {#if slide.title || slide.subtitle || slide.content}
-              <div class="p-3">
-                {#if slide.title}<div class="font-semibold text-sm text-text1">{slide.title}</div>{/if}
-                {#if slide.subtitle}<div class="text-xs text-text2 mt-0.5">{slide.subtitle}</div>{/if}
-                {#if slide.content}<div class="text-xs text-text2 mt-1.5">{slide.content}</div>{/if}
-              </div>
-            {/if}
-          </div>
-        {/each}
-      </div>
-
-      {#if slides.length > 1}
-        <button class="absolute left-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/40 text-white flex items-center justify-center hover:bg-black/60 text-sm" onclick={prev}>&lsaquo;</button>
-        <button class="absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/40 text-white flex items-center justify-center hover:bg-black/60 text-sm" onclick={() => goTo(current < slides.length - 1 ? current + 1 : 0, true)}>&rsaquo;</button>
-      {/if}
-    </div>
-
-    {#if slides.length > 1}
-      <div class="flex justify-center gap-1.5 mt-2">
-        {#each slides as _, i}
-          <button class="w-2 h-2 rounded-full transition-colors {i === current ? 'bg-accent' : 'bg-border2'}"
-            onclick={() => goTo(i, true)}></button>
-        {/each}
-      </div>
-    {/if}
-  {/if}
-</div>

package/src/widgets/rich/Chart.svelte

@@ -1,142 +0,0 @@
-<script lang="ts">
-  export interface ChartDataset { label?: string; values: number[]; color?: string; }
-  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=[
-    '#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:[]);
-  const type=$derived(spec.type??'bar');
-  const isPie=$derived(type==='pie'||type==='donut');
-  const allVals=$derived(datasets.flatMap(d=>d.values??[]));
-  const maxVal=$derived(Math.max(...allVals.filter(v=>typeof v==='number'),1));
-  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}
-  const slices=$derived.by<Slice[]>(()=>{
-    if(!isPie||!datasets.length)return[];
-    const ds=datasets[0];const tot=pieTotal;
-    let angle=-Math.PI/2;
-    return (ds.values??[]).map((v,i)=>{
-      const pct=v/tot;const start=angle;angle+=pct*2*Math.PI;
-      return{label:xLabels[i]??String(i),value:v,color:col(ds,i),startAngle:start,endAngle:angle,pct};
-    });
-  });
-  function arc(cx:number,cy:number,r:number,start:number,end:number,ir=0):string{
-    const x1=cx+r*Math.cos(start),y1=cy+r*Math.sin(start);
-    const x2=cx+r*Math.cos(end),y2=cy+r*Math.sin(end);
-    const large=end-start>Math.PI?1:0;
-    if(ir>0){const ix1=cx+ir*Math.cos(end),iy1=cy+ir*Math.sin(end),ix2=cx+ir*Math.cos(start),iy2=cy+ir*Math.sin(start);return`M${x1},${y1}A${r},${r},0,${large},1,${x2},${y2}L${ix1},${iy1}A${ir},${ir},0,${large},0,${ix2},${iy2}Z`;}
-    return`M${cx},${cy}L${x1},${y1}A${r},${r},0,${large},1,${x2},${y2}Z`;
-  }
-  let tooltip=$state<string|null>(null);
-</script>
-<div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
-  {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if !datasets.length}<p class="text-text2 text-sm">No data</p>
-  {:else if isPie}
-    <div class="relative flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
-      <svg viewBox="-1 -1 2 2" class="w-40 h-40 flex-shrink-0" xmlns="http://www.w3.org/2000/svg">
-        {#each slices as s,i}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <!-- svelte-ignore a11y_no_static_element_interactions -->
-          <path d={arc(0,0,0.9,s.startAngle,s.endAngle,type==='donut'?0.5:0)} fill={s.color} opacity="0.85"
-            onmouseenter={()=>tooltip=`${s.label}: ${fmt.format(s.value)} (${Math.round(s.pct*100)}%)`}
-            onmouseleave={()=>tooltip=null}
-            class="cursor-pointer hover:opacity-100 transition-opacity"/>
-        {/each}
-      </svg>
-      <div class="flex flex-col gap-1.5 text-xs">
-        {#each slices as s}
-          <div class="flex items-center gap-1.5">
-            <div class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:{s.color};"></div>
-            <span class="text-text2">{s.label}</span>
-            <span class="text-text2 ml-1">{Math.round(s.pct*100)}%</span>
-          </div>
-        {/each}
-      </div>
-    </div>
-    {#if tooltip}<div class="mt-2 text-xs text-text2 font-mono">{tooltip}</div>{/if}
-  {:else}
-    <div class="relative">
-      {#if type==='bar'}
-        <div class="flex items-end gap-1 h-24 sm:h-32 mb-1">
-          {#each xLabels as lbl, xi}
-            <div class="flex-1 flex gap-0.5 items-end h-full">
-              {#each datasets as ds, di}
-                {@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:{barCol(ds,di,xi)};"
-                  title="{ds.label??''} {lbl}: {fmt.format(v)}">
-                </div>
-              {/each}
-            </div>
-          {/each}
-        </div>
-        <div class="flex gap-1 mb-2">
-          {#each xLabels as lbl}<div class="flex-1 text-center text-[9px] font-mono text-text2 truncate">{lbl}</div>{/each}
-        </div>
-      {:else}
-        {@const W=400}{@const H=120}{@const pad=10}
-        <svg viewBox="0 0 {W} {H}" class="w-full" xmlns="http://www.w3.org/2000/svg">
-          {#each datasets as ds, di}
-            {@const pts=ds.values.map((v,i)=>`${pad+i*((W-pad*2)/(ds.values.length-1||1))},${H-pad-(v/maxVal)*(H-pad*2)}`)}
-            {#if type==='area'}
-              <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">
-          {#each xLabels as lbl}<div class="flex-1 text-center text-[9px] font-mono text-text2 truncate">{lbl}</div>{/each}
-        </div>
-      {/if}
-    </div>
-    {#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">
-            <div class="w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:{col(ds,i)};"></div>
-            <span class="text-text2">{ds.label??`Series ${i+1}`}</span>
-          </div>
-        {/each}
-      </div>
-    {/if}
-  {/if}
-</div>