@webmcp-auto-ui/ui 2.5.26 → 2.5.28

package/src/widgets/rich/D3Widget.svelte

@@ -1,373 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-
-  export interface D3Spec {
-    title?: string;
-    preset?: 'hex-heatmap' | 'radial' | 'treemap' | 'force';
-    data: unknown;
-    config?: Record<string, unknown>;
-  }
-
-  interface Props { spec: D3Spec; }
-  let { spec }: Props = $props();
-
-  let container: HTMLDivElement;
-  let width = $state(0);
-  let height = $state(0);
-  let loading = $state(true);
-  let error = $state<string | null>(null);
-  let ro: ResizeObserver | undefined;
-
-  // ── Colour helpers ─────────────────────────────────────────────────────────
-  function cssVar(name: string, fallback: string): string {
-    if (typeof document === 'undefined') return fallback;
-    return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
-  }
-
-  // ── Presets ────────────────────────────────────────────────────────────────
-
-  function renderHexHeatmap(d3: typeof import('d3'), el: HTMLDivElement, d: D3Spec) {
-    const values = (d.data as { values?: number[][] })?.values;
-    if (!values || values.length === 0) {
-      el.innerHTML = '<p class="text-xs text-text2 p-2">No data (values missing)</p>';
-      return;
-    }
-    const cfg = d.config ?? {};
-    const cellSize: number = (cfg.cellSize as number) ?? 14;
-    const colorScale: string[] = (cfg.colorScale as string[]) ?? [
-      cssVar('--color-surface2', '#f0f0f6'),
-      cssVar('--color-accent', '#6c5ce7'),
-    ];
-
-    const rows = values.length;
-    const cols = Math.max(...values.map((r) => r.length));
-    const gap = 2;
-    const hex = cellSize;
-    const hx = hex * Math.sqrt(3);
-    const hy = hex * 1.5;
-    const svgW = cols * hx + hex * 0.5 + gap * cols;
-    const svgH = rows * hy + hex * 0.5 + gap * rows;
-
-    const allVals = values.flat();
-    const minVal = d3.min(allVals) ?? 0;
-    const maxVal = d3.max(allVals) ?? 1;
-
-    const colorInterp = d3.scaleLinear<string>()
-      .domain([minVal, maxVal])
-      .range(colorScale as [string, string]);
-
-    const svg = d3
-      .select(el)
-      .append('svg')
-      .attr('viewBox', `0 0 ${svgW} ${svgH}`)
-      .attr('width', '100%')
-      .attr('height', svgH);
-
-    // Hexagon path generator
-    function hexPath(cx: number, cy: number, r: number): string {
-      const pts = d3.range(6).map((i) => {
-        const angle = (Math.PI / 180) * (60 * i - 30);
-        return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
-      });
-      return `M${pts.map((p) => p.join(',')).join('L')}Z`;
-    }
-
-    values.forEach((row, ri) => {
-      row.forEach((val, ci) => {
-        const cx = ci * (hx + gap) + (ri % 2 === 1 ? hx / 2 : 0) + hx / 2;
-        const cy = ri * (hy + gap) + hex;
-        svg
-          .append('path')
-          .attr('d', hexPath(cx, cy, hex * 0.9))
-          .attr('fill', colorInterp(val))
-          .attr('stroke', 'none')
-          .append('title')
-          .text(String(val));
-      });
-    });
-  }
-
-  function renderRadial(d3: typeof import('d3'), el: HTMLDivElement, d: D3Spec) {
-    const segments = (d.data as { segments?: { label: string; value: number; color?: string }[] })?.segments;
-    if (!segments || segments.length === 0) {
-      el.innerHTML = '<p class="text-xs text-text2 p-2">No data (segments missing)</p>';
-      return;
-    }
-    const cfg = d.config ?? {};
-    const innerRatio: number = (cfg.innerRadius as number) ?? 0.4;
-    const size = Math.min(width || 300, 300);
-    const outerR = size / 2 - 10;
-    const innerR = outerR * innerRatio;
-
-    const defaultColors = [
-      cssVar('--color-accent', '#6c5ce7'),
-      cssVar('--color-accent2', '#e17055'),
-      '#00b894', '#fdcb6e', '#0984e3', '#e84393',
-    ];
-
-    const svg = d3
-      .select(el)
-      .append('svg')
-      .attr('viewBox', `0 0 ${size} ${size}`)
-      .attr('width', '100%')
-      .attr('height', size);
-
-    const g = svg.append('g').attr('transform', `translate(${size / 2},${size / 2})`);
-
-    const pie = d3.pie<{ label: string; value: number; color?: string }>()
-      .value((seg) => seg.value)
-      .sort(null);
-
-    const arc = d3.arc<d3.PieArcDatum<{ label: string; value: number; color?: string }>>()
-      .innerRadius(innerR)
-      .outerRadius(outerR);
-
-    const arcs = pie(segments);
-
-    g.selectAll('path')
-      .data(arcs)
-      .enter()
-      .append('path')
-      .attr('d', arc)
-      .attr('fill', (_, i) => arcs[i].data.color ?? defaultColors[i % defaultColors.length])
-      .attr('stroke', 'var(--color-surface, #fff)')
-      .attr('stroke-width', 2)
-      .append('title')
-      .text((arcDatum) => `${arcDatum.data.label}: ${arcDatum.data.value}`);
-
-    // Labels
-    const labelArc = d3.arc<d3.PieArcDatum<{ label: string; value: number; color?: string }>>()
-      .innerRadius(outerR * 0.7)
-      .outerRadius(outerR * 0.7);
-
-    g.selectAll('text')
-      .data(arcs)
-      .enter()
-      .append('text')
-      .attr('transform', (arcDatum) => `translate(${labelArc.centroid(arcDatum)})`)
-      .attr('text-anchor', 'middle')
-      .attr('font-size', '10px')
-      .attr('fill', 'var(--color-text1, #111)')
-      .text((arcDatum) => arcDatum.data.label.length > 8 ? arcDatum.data.label.slice(0, 7) + '…' : arcDatum.data.label);
-  }
-
-  function renderTreemap(d3: typeof import('d3'), el: HTMLDivElement, d: D3Spec) {
-    type TreeNode = { name: string; value?: number; children?: TreeNode[] };
-    const rawData = d.data as { children?: TreeNode[] };
-    if (!rawData?.children || rawData.children.length === 0) {
-      el.innerHTML = '<p class="text-xs text-text2 p-2">No data (children missing)</p>';
-      return;
-    }
-    const cfg = d.config ?? {};
-    const padding: number = (cfg.padding as number) ?? 2;
-    const w = width || 400;
-    const h = Math.max(200, Math.round(w * 0.6));
-
-    const accent = cssVar('--color-accent', '#6c5ce7');
-    const colorScale = d3.scaleSequential(d3.interpolateBlues).domain([0, 10]);
-
-    const root = d3
-      .hierarchy<TreeNode>({ name: 'root', children: rawData.children })
-      .sum((node) => node.value ?? 1)
-      .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
-
-    d3.treemap<TreeNode>()
-      .size([w, h])
-      .padding(padding)(root);
-
-    const svg = d3
-      .select(el)
-      .append('svg')
-      .attr('viewBox', `0 0 ${w} ${h}`)
-      .attr('width', '100%')
-      .attr('height', h);
-
-    const leaves = root.leaves() as (d3.HierarchyRectangularNode<TreeNode>)[];
-
-    const cell = svg
-      .selectAll('g')
-      .data(leaves)
-      .enter()
-      .append('g')
-      .attr('transform', (node) => `translate(${node.x0},${node.y0})`);
-
-    cell
-      .append('rect')
-      .attr('width', (node) => Math.max(0, node.x1 - node.x0))
-      .attr('height', (node) => Math.max(0, node.y1 - node.y0))
-      .attr('fill', (_, i) => colorScale(i % 11))
-      .attr('stroke', accent)
-      .attr('stroke-width', 1)
-      .append('title')
-      .text((node) => `${node.data.name}: ${node.value}`);
-
-    cell
-      .append('text')
-      .attr('x', 4)
-      .attr('y', 14)
-      .attr('font-size', '11px')
-      .attr('fill', '#fff')
-      .text((node) => {
-        const w2 = node.x1 - node.x0;
-        const label = node.data.name;
-        return w2 > 30 ? (label.length > 12 ? label.slice(0, 11) + '…' : label) : '';
-      });
-  }
-
-  function renderForce(d3: typeof import('d3'), el: HTMLDivElement, d: D3Spec) {
-    type FNode = { id: string; label?: string; group?: number };
-    type FLink = { source: string; target: string; value?: number };
-    const rawData = d.data as { nodes?: FNode[]; links?: FLink[] };
-    if (!rawData?.nodes || rawData.nodes.length === 0) {
-      el.innerHTML = '<p class="text-xs text-text2 p-2">No data (nodes missing)</p>';
-      return;
-    }
-    const nodes: FNode[] = rawData.nodes.map((n) => ({ ...n }));
-    const links: FLink[] = (rawData.links ?? []).map((l) => ({ ...l }));
-    const w = width || 400;
-    const h = Math.max(250, Math.round(w * 0.65));
-
-    const accent = cssVar('--color-accent', '#6c5ce7');
-    const accent2 = cssVar('--color-accent2', '#e17055');
-    const groups = Array.from(new Set(nodes.map((n) => n.group ?? 0)));
-    const colorMap = d3.scaleOrdinal<number, string>()
-      .domain(groups)
-      .range([accent, accent2, '#00b894', '#fdcb6e', '#0984e3', '#e84393']);
-
-    const svg = d3
-      .select(el)
-      .append('svg')
-      .attr('viewBox', `0 0 ${w} ${h}`)
-      .attr('width', '100%')
-      .attr('height', h);
-
-    const sim = d3
-      .forceSimulation(nodes as d3.SimulationNodeDatum[])
-      .force('link', d3.forceLink(links).id((n: d3.SimulationNodeDatum) => (n as FNode).id).distance(60))
-      .force('charge', d3.forceManyBody().strength(-120))
-      .force('center', d3.forceCenter(w / 2, h / 2))
-      .force('collision', d3.forceCollide(18));
-
-    const link = svg
-      .append('g')
-      .attr('stroke', 'var(--color-border, #ccc)')
-      .attr('stroke-opacity', 0.6)
-      .selectAll('line')
-      .data(links)
-      .enter()
-      .append('line')
-      .attr('stroke-width', (l) => Math.sqrt(l.value ?? 1));
-
-    const node = svg
-      .append('g')
-      .selectAll('g')
-      .data(nodes)
-      .enter()
-      .append('g')
-      .call(
-        d3.drag<SVGGElement, FNode>()
-          .on('start', (event, n) => {
-            if (!event.active) sim.alphaTarget(0.3).restart();
-            (n as d3.SimulationNodeDatum).fx = (n as d3.SimulationNodeDatum).x;
-            (n as d3.SimulationNodeDatum).fy = (n as d3.SimulationNodeDatum).y;
-          })
-          .on('drag', (event, n) => {
-            (n as d3.SimulationNodeDatum).fx = event.x;
-            (n as d3.SimulationNodeDatum).fy = event.y;
-          })
-          .on('end', (event, n) => {
-            if (!event.active) sim.alphaTarget(0);
-            (n as d3.SimulationNodeDatum).fx = null;
-            (n as d3.SimulationNodeDatum).fy = null;
-          })
-      );
-
-    node
-      .append('circle')
-      .attr('r', 10)
-      .attr('fill', (n) => colorMap(n.group ?? 0))
-      .attr('stroke', '#fff')
-      .attr('stroke-width', 1.5);
-
-    node
-      .append('text')
-      .attr('x', 14)
-      .attr('y', 4)
-      .attr('font-size', '10px')
-      .attr('fill', 'var(--color-text1, #111)')
-      .text((n) => n.label ?? n.id);
-
-    node.append('title').text((n) => n.label ?? n.id);
-
-    sim.on('tick', () => {
-      link
-        .attr('x1', (l) => (l.source as d3.SimulationNodeDatum).x ?? 0)
-        .attr('y1', (l) => (l.source as d3.SimulationNodeDatum).y ?? 0)
-        .attr('x2', (l) => (l.target as d3.SimulationNodeDatum).x ?? 0)
-        .attr('y2', (l) => (l.target as d3.SimulationNodeDatum).y ?? 0);
-      node.attr('transform', (n) => `translate(${(n as d3.SimulationNodeDatum).x ?? 0},${(n as d3.SimulationNodeDatum).y ?? 0})`);
-    });
-  }
-
-  // ── Main render dispatcher ─────────────────────────────────────────────────
-  function render(d3: typeof import('d3')) {
-    if (!container) return;
-    container.innerHTML = '';
-    if (!spec?.preset) {
-      container.innerHTML = '<p class="text-xs text-text2 p-2">No preset specified.</p>';
-      return;
-    }
-    switch (spec.preset) {
-      case 'hex-heatmap': renderHexHeatmap(d3, container, spec); break;
-      case 'radial':      renderRadial(d3, container, spec);      break;
-      case 'treemap':     renderTreemap(d3, container, spec);     break;
-      case 'force':       renderForce(d3, container, spec);       break;
-      default:
-        container.innerHTML = `<p class="text-xs text-text2 p-2">Preset inconnu : ${spec.preset}</p>`;
-    }
-  }
-
-  // ── Lifecycle ──────────────────────────────────────────────────────────────
-  onMount(async () => {
-    ro = new ResizeObserver((entries) => {
-      const r = entries[0]?.contentRect;
-      if (r) { width = r.width; height = r.height; }
-    });
-    ro.observe(container);
-
-    try {
-      const d3 = await import('d3');
-      loading = false;
-      render(d3);
-    } catch (e) {
-      error = e instanceof Error ? e.message : 'D3 load failed';
-      loading = false;
-    }
-  });
-
-  onDestroy(() => {
-    ro?.disconnect();
-  });
-
-  // Re-render when spec or size changes
-  $effect(() => {
-    void spec;
-    void width;
-    if (!loading && !error && width > 0) {
-      import('d3').then((d3) => render(d3));
-    }
-  });
-</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 loading}
-    <div class="flex items-center justify-center h-48 text-text2 text-sm">Chargement D3...</div>
-  {:else if error}
-    <div class="text-accent2 text-sm">{error}</div>
-  {:else}
-    <div bind:this={container} class="w-full min-h-[200px]"></div>
-  {/if}
-</div>

package/src/widgets/rich/DataTable.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-  export interface DataTableColumn { key: string; label: string; align?: 'left'|'center'|'right'; type?: 'text'|'number'|'boolean'|'link'; }
-  export interface DataTableSpec { title?: string; columns?: DataTableColumn[]; rows?: Record<string,unknown>[]; compact?: boolean; striped?: boolean; emptyMessage?: string; }
-  interface Props { spec: Partial<DataTableSpec>; data?: unknown; onrowclick?: (row: Record<string,unknown>) => void; }
-  let { spec, data, onrowclick }: Props = $props();
-  const MAX = 200;
-  const fmt = new Intl.NumberFormat('fr-FR');
-  let sortCol = $state<string|null>(null), sortAsc = $state(true);
-  const rows = $derived<Record<string,unknown>[]>(Array.isArray(spec.rows)&&spec.rows.length ? spec.rows as Record<string,unknown>[] : Array.isArray(data) ? data as Record<string,unknown>[] : []);
-  const columns = $derived<DataTableColumn[]>(Array.isArray(spec.columns)&&(spec.columns as DataTableColumn[]).length ? spec.columns as DataTableColumn[] : rows.length>0 ? Object.keys(rows[0] as object).map(k=>({key:k,label:k})) : []);
-  const sorted = $derived.by<Record<string,unknown>[]>(()=>{
-    if (!sortCol) return rows;
-    return [...rows].sort((a,b)=>{ const av=a[sortCol!],bv=b[sortCol!],an=Number(av),bn=Number(bv); const c=!isNaN(an)&&!isNaN(bn)?an-bn:String(av??'').localeCompare(String(bv??''),'fr'); return sortAsc?c:-c; });
-  });
-  const displayed = $derived(sorted.slice(0,MAX));
-  const overflow = $derived(rows.length>MAX?rows.length-MAX:0);
-  function dv(v: unknown): string { if(v==null)return''; if(typeof v==='object')return JSON.stringify(v); return String(v); }
-  const compact = $derived(spec.compact===true);
-</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 columns.length===0&&rows.length===0}
-    <p class="text-text2 text-sm">{spec.emptyMessage??'No data'}</p>
-  {:else}
-    <div class="overflow-auto max-h-[480px] rounded border border-border">
-      <table class="w-full border-collapse">
-        <thead>
-          <tr>
-            {#each columns as col}
-              <th class="sticky top-0 bg-surface2 border-b-2 border-border2 px-3 py-2 text-left text-xs font-mono font-medium text-text2 uppercase tracking-wider whitespace-nowrap cursor-pointer select-none hover:text-text1 transition-colors {col.align==='center'?'text-center':col.align==='right'?'text-right':''}"
-                onclick={()=>{ if(sortCol===col.key){sortAsc=!sortAsc;}else{sortCol=col.key;sortAsc=true;} }}>
-                {col.label}{#if sortCol===col.key}<span class="ml-1 text-accent">{sortAsc?'↑':'↓'}</span>{/if}
-              </th>
-            {/each}
-          </tr>
-        </thead>
-        <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':''}"
-              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':''}">
-                  {#if val==null}<span class="text-text2">—</span>
-                  {:else if col.type==='boolean'}<span>{val?'✓':'✗'}</span>
-                  {:else if col.type==='link'&&typeof val==='string'}<a href={val} class="text-accent hover:underline">{val}</a>
-                  {:else if typeof val==='object'}<code class="text-xs bg-surface2 px-1 py-0.5 rounded">{JSON.stringify(val)}</code>
-                  {:else if typeof val==='number'}<span title={String(val)}>{fmt.format(val)}</span>
-                  {:else}{@const s=String(val)}<span title={s}>{s.length>80?s.slice(0,77)+'…':s}</span>
-                  {/if}
-                </td>
-              {/each}
-            </tr>
-          {/each}
-          {#if overflow>0}<tr><td colspan={columns.length} class="text-center text-text2 text-xs py-2 px-3">… {overflow} more rows</td></tr>{/if}
-        </tbody>
-      </table>
-    </div>
-    <div class="mt-2 text-text2 text-xs">{rows.length} ligne{rows.length!==1?'s':''}</div>
-  {/if}
-</div>

package/src/widgets/rich/Gallery.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-  import SafeImage from '../SafeImage.svelte';
-  export interface GalleryImage { src: string; alt?: string; caption?: string; href?: string; }
-  export interface GallerySpec { title?: string; images?: GalleryImage[]; columns?: number; gap?: string; emptyMessage?: string; }
-  interface Props { spec: Partial<GallerySpec>; data?: unknown; onimageclick?: (img: GalleryImage, index: number) => void; }
-  let { spec, data, onimageclick }: Props = $props();
-
-  const images = $derived.by<GalleryImage[]>(() => {
-    if (Array.isArray(spec.images) && spec.images.length) return spec.images;
-    if (Array.isArray(data)) return (data as GalleryImage[]);
-    return [];
-  });
-
-  let lightboxIdx = $state<number | null>(null);
-  const lightboxImg = $derived(lightboxIdx !== null ? images[lightboxIdx] : null);
-
-  function open(i: number) {
-    lightboxIdx = i;
-  }
-  function interact(i: number) {
-    onimageclick?.(images[i], i);
-  }
-  function close() { lightboxIdx = null; }
-  function prev() { if (lightboxIdx !== null && lightboxIdx > 0) lightboxIdx--; }
-  function next() { if (lightboxIdx !== null && lightboxIdx < images.length - 1) lightboxIdx++; }
-  function onKey(e: KeyboardEvent) {
-    if (lightboxIdx === null) return;
-    if (e.key === 'Escape') close();
-    else if (e.key === 'ArrowLeft') prev();
-    else if (e.key === 'ArrowRight') next();
-  }
-</script>
-
-<svelte:window onkeydown={onKey} />
-
-<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 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"
-          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">
-              <span class="text-white text-xs">{img.caption}</span>
-            </div>
-          {/if}
-        </button>
-      {/each}
-    </div>
-    <div class="mt-2 text-xs text-text2">{images.length} image{images.length !== 1 ? 's' : ''}</div>
-  {/if}
-
-  {#if lightboxImg}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="fixed inset-0 z-50 bg-black/80 flex items-center justify-center" onclick={close}>
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div class="relative max-w-[90vw] max-h-[90vh]" onclick={(e) => e.stopPropagation()}>
-        <SafeImage src={lightboxImg.src} alt={lightboxImg.alt ?? ''} class="max-w-full max-h-[85vh] object-contain rounded" />
-        {#if lightboxImg.caption}
-          <div class="text-center text-white text-sm mt-2">{lightboxImg.caption}</div>
-        {/if}
-        <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center text-lg hover:bg-black/70" onclick={close}>&times;</button>
-        {#if lightboxIdx !== null && lightboxIdx > 0}
-          <button class="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70" onclick={prev}>&lsaquo;</button>
-        {/if}
-        {#if lightboxIdx !== null && lightboxIdx < images.length - 1}
-          <button class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70" onclick={next}>&rsaquo;</button>
-        {/if}
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .responsive-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  @media (min-width: 768px) { .responsive-gallery { grid-template-columns: var(--gallery-cols); } }
-</style>

package/src/widgets/rich/GridData.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  export interface GridDataColumn { key: string; label: string; width?: string; }
-  export interface GridDataHighlight { row: number; col: number; color?: string; }
-  export interface GridDataSpec { title?: string; columns?: GridDataColumn[]; rows?: unknown[][]; highlights?: GridDataHighlight[]; cellHeight?: number; }
-  interface Props { spec: Partial<GridDataSpec>; oncellclick?: (row: number, col: number, value: unknown) => void; }
-  let { spec, oncellclick }: Props = $props();
-  const columns=$derived(Array.isArray(spec.columns)?spec.columns:[]);
-  const rows=$derived(Array.isArray(spec.rows)?spec.rows:[]);
-  const cellH=$derived(spec.cellHeight??32);
-  const hlMap=$derived(()=>{const m=new Map<string,string>();if(Array.isArray(spec.highlights))for(const h of spec.highlights)m.set(`${h.row},${h.col}`,h.color??'color-mix(in srgb, var(--color-accent) 20%, transparent)');return m;});
-  function bg(r:number,c:number):string{return hlMap().get(`${r},${c}`)??'';}
-  function dv(v:unknown):string{if(v==null)return'';if(typeof v==='object')return JSON.stringify(v);return String(v);}
-</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 !columns.length&&!rows.length}<p class="text-text2 text-sm">No data</p>
-  {:else}
-    <div class="overflow-auto rounded border border-border">
-      <table class="w-full border-collapse text-xs font-mono">
-        {#if columns.length}
-          <thead>
-            <tr>
-              {#each columns as col}<th class="sticky top-0 bg-surface2 px-3 py-2 text-left text-text2 border-b border-r border-border whitespace-nowrap font-medium" style={col.width?`width:${col.width}`:''}>
-                {col.label}
-              </th>{/each}
-            </tr>
-          </thead>
-        {/if}
-        <tbody>
-          {#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 {oncellclick?'cursor-pointer':''} hover:bg-surface2"
-                  style="height:{cellH}px;{bg(ri,ci)?`background:${bg(ri,ci)};`:''}"
-                  title={oncellclick?"Double-cliquez pour interagir":undefined}
-                  ondblclick={()=>oncellclick?.(ri,ci,cell)}>{dv(cell)}</td>
-              {/each}
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  {/if}
-</div>

package/src/widgets/rich/Hemicycle.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  export interface HemicycleGroup { id: string; label: string; seats: number; color: string; }
-  export interface HemicycleSpec { title?: string; groups?: HemicycleGroup[]; totalSeats?: number; rows?: number; }
-  interface Props { spec: Partial<HemicycleSpec>; ongroupclick?: (g: HemicycleGroup) => void; }
-  let { spec, ongroupclick }: Props = $props();
-  const groups = $derived<HemicycleGroup[]>(Array.isArray(spec.groups) ? spec.groups : []);
-  const total = $derived(spec.totalSeats ?? groups.reduce((s,g)=>s+g.seats,0));
-  const W=420, H=230, cx=W/2, cy=H-10, rMin=60, step=28;
-  const rows = $derived(spec.rows ?? Math.min(Math.max(3, Math.ceil(Math.sqrt(total/6))), 7));
-  interface Seat { x: number; y: number; color: string; gid: string }
-  const seats = $derived.by<Seat[]>(()=>{
-    if(!groups.length||!total) return [];
-    const radii = Array.from({length:rows},(_,i)=>rMin+i*step);
-    const circs = radii.map(r=>Math.PI*r);
-    const totalC = circs.reduce((a,b)=>a+b,0);
-    const spr = radii.map(r=>Math.round(Math.PI*r/totalC*total));
-    spr[spr.length-1]+=total-spr.reduce((a,b)=>a+b,0);
-    const sorted=[...groups].sort((a,b)=>a.seats-b.seats);
-    const colors: {color:string;gid:string}[]=[];
-    for(const g of sorted) for(let i=0;i<g.seats;i++) colors.push({color:g.color,gid:g.id});
-    while(colors.length<total) colors.push({color:'#333355',gid:''});
-    const result: Seat[]=[];
-    let idx=0;
-    for(let row=0;row<rows;row++){
-      const r=radii[row], n=spr[row];
-      for(let j=0;j<n;j++){
-        if(idx>=colors.length) break;
-        const angle=Math.PI-(j/(n-1||1))*Math.PI;
-        result.push({x:cx+r*Math.cos(angle),y:cy-r*Math.sin(angle),...colors[idx++]});
-      }
-    }
-    return result;
-  });
-  const rMax = $derived(rMin+rows*step);
-  const legend = $derived([...groups].sort((a,b)=>b.seats-a.seats));
-  let tooltip = $state<{label:string;seats:number}|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 !groups.length||!total}<p class="text-text2 text-sm">No data</p>
-  {:else}
-    <div class="relative">
-      <svg viewBox="0 0 {W} {H}" class="block w-full max-h-[220px]" xmlns="http://www.w3.org/2000/svg">
-        <path d="M {cx-rMax-15} {cy} A {rMax+15} {rMax+15} 0 0 1 {cx+rMax+15} {cy}" fill="none" stroke="var(--color-surface2)" stroke-width="2"/>
-        {#each seats as s}
-          <!-- 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 -->
-          <circle cx={s.x.toFixed(1)} cy={s.y.toFixed(1)} r="4" fill={s.color} opacity="0.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}
-            ondblclick={()=>{const g=groups.find(g=>g.id===s.gid);if(g)ongroupclick?.(g);}}>
-            {#if s.gid}<title>Double-click to interact</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} seats</text>
-      </svg>
-      {#if tooltip}
-        <div class="absolute top-0 right-0 bg-surface2 border border-border2 rounded px-2 py-1 text-xs text-text1 pointer-events-none">
-          <span class="font-semibold">{tooltip.label}</span> — {tooltip.seats}
-        </div>
-      {/if}
-    </div>
-    <div class="flex flex-wrap gap-x-4 gap-y-1 mt-3">
-      {#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" title="Double-click to interact" 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>
-        </div>
-      {/each}
-    </div>
-  {/if}
-</div>