@webmcp-auto-ui/ui 2.5.32 → 2.5.33

package/src/widgets/rich/carousel.svelte

@@ -0,0 +1,126 @@
+<svelte:options customElement={{ tag: 'auto-carousel', shadow: 'none' }} />
+
+<script lang="ts">
+  import SafeImage from '../SafeImage.svelte';
+
+  export interface CarouselSlide { src?: string; content?: string; title?: string; subtitle?: string; }
+  export interface CarouselData {
+    title?: string;
+    slides?: CarouselSlide[];
+    autoPlay?: boolean;
+    interval?: number;
+  }
+
+  interface Props { data?: CarouselData | null; }
+  let { data = {} }: Props = $props();
+
+  const slides = $derived<CarouselSlide[]>(
+    Array.isArray(data?.slides) && data!.slides!.length ? data!.slides! : []
+  );
+
+  let current = $state(0);
+  let paused = $state(false);
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  function goTo(i: number) {
+    current = Math.max(0, Math.min(i, slides.length - 1));
+    resetAuto();
+  }
+  function prev() { goTo(current > 0 ? current - 1 : slides.length - 1); }
+  function next() { goTo(current < slides.length - 1 ? current + 1 : 0); }
+
+  function resetAuto() {
+    if (timer) clearInterval(timer);
+    if (data?.autoPlay !== false && slides.length > 1 && !paused) {
+      timer = setInterval(next, data?.interval ?? 5000);
+    }
+  }
+
+  $effect(() => {
+    if (data?.autoPlay !== false && slides.length > 1) {
+      resetAuto();
+      return () => { if (timer) clearInterval(timer); };
+    }
+  });
+
+  function onPauseStart() { paused = true; if (timer) { clearInterval(timer); timer = null; } }
+  function onPauseEnd() { paused = false; resetAuto(); }
+
+  // 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 data?.title}<h3 class="text-sm font-semibold text-text1 mb-3">{data.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"
+      aria-roledescription="carousel"
+      aria-label={data?.title ?? 'Carousel'}
+      ontouchstart={onTouchStart}
+      ontouchend={onTouchEnd}
+      onmouseenter={onPauseStart}
+      onmouseleave={onPauseEnd}
+      onfocusin={onPauseStart}
+      onfocusout={onPauseEnd}
+    >
+      <div class="flex transition-transform duration-300 ease-out" style="transform: translateX(-{current * 100}%);">
+        {#each slides as slide, i}
+          <div
+            class="w-full flex-shrink-0"
+            role="group"
+            aria-roledescription="slide"
+            aria-label="{i + 1} sur {slides.length}{slide.title ? ': ' + slide.title : ''}"
+            aria-hidden={i !== current ? true : undefined}
+          >
+            {#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"
+          aria-label="Slide précédente"
+          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"
+          aria-label="Slide suivante"
+          onclick={next}
+        >&rsaquo;</button>
+      {/if}
+    </div>
+
+    {#if slides.length > 1}
+      <div class="flex justify-center gap-1.5 mt-2" role="tablist" aria-label="Slides">
+        {#each slides as _, i}
+          <button
+            class="w-2 h-2 rounded-full transition-colors {i === current ? 'bg-accent' : 'bg-border2'}"
+            role="tab"
+            aria-selected={i === current}
+            aria-label="Slide {i + 1}"
+            onclick={() => goTo(i)}
+          ></button>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>

package/src/widgets/rich/chart-rich.svelte

@@ -0,0 +1,221 @@
+<svelte:options customElement={{ tag: 'auto-chart-rich', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface ChartDataset { label?: string; values: number[]; color?: string; }
+  export interface ChartData {
+    title?: string;
+    type?: 'bar' | 'line' | 'area' | 'pie' | 'donut';
+    labels?: string[];
+    datasets?: ChartDataset[];
+    legend?: boolean;
+    xAxis?: { label?: string };
+    yAxis?: { label?: string };
+  }
+
+  interface Props { data?: ChartData | null; }
+  let { data = {} }: 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');
+
+  /**
+   * Defensive coercion — port of normalizeBars from be5ab97.
+   * Accepts raw values arrays or object shapes, never throws.
+   */
+  function coerceValues(raw: unknown): number[] {
+    if (!Array.isArray(raw)) return [];
+    const toNum = (v: unknown): number => {
+      if (typeof v === 'number' && Number.isFinite(v)) return v;
+      if (typeof v === 'string') { const n = Number(v); return Number.isFinite(n) ? n : 0; }
+      return 0;
+    };
+    return raw.map(toNum);
+  }
+
+  function isPrimitiveLabel(v: unknown): v is string | number | boolean {
+    return typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean';
+  }
+
+  function normalizeDatasets(raw: unknown): ChartDataset[] {
+    if (!Array.isArray(raw)) return [];
+    return raw.flatMap(item => {
+      if (!item || typeof item !== 'object') return [];
+      const o = item as Record<string, unknown>;
+      // Validate values field
+      const values = coerceValues(o.values);
+      if (!values.length) return [];
+      return [{ label: isPrimitiveLabel(o.label) ? String(o.label) : undefined, values, color: typeof o.color === 'string' ? o.color : undefined }];
+    });
+  }
+
+  const datasets = $derived<ChartDataset[]>(normalizeDatasets(data?.datasets));
+  const labels = $derived<string[]>(Array.isArray(data?.labels) ? (data!.labels! as unknown[]).filter(isPrimitiveLabel).map(String) : []);
+  const type = $derived(data?.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((_, i) => String(i + 1)));
+  const showLegend = $derived(data?.legend !== false && datasets.length > 1);
+
+  function col(ds: ChartDataset, i: number) { return ds.color ?? PAL[i % PAL.length]; }
+
+  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);
+      const 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 data?.title}<h3 class="text-sm font-semibold text-text1 mb-3">{data.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" role="img" aria-label={data?.title ?? 'Pie chart'}>
+        {#each slices as s}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <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"
+          >
+            <title>{s.label}: {fmt.format(s.value)} ({Math.round(s.pct * 100)}%)</title>
+          </path>
+        {/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" role="img" aria-label={data?.title ?? 'Bar chart'}>
+          {#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" role="img" aria-label={data?.title ?? 'Line chart'}>
+          {#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">
+                <title>{ds.label ?? xLabels[i] ?? String(i)}: {fmt.format(v)}</title>
+              </circle>
+            {/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>

package/src/widgets/rich/chat-input.svelte

@@ -0,0 +1,52 @@
+<svelte:options customElement={{ tag: 'auto-chat-input', shadow: 'none' }} />
+
+<script lang="ts">
+  import ChatInline from '../../base/chat-inline.svelte';
+
+  export interface ChatInputData {
+    placeholder?: string;
+  }
+
+  interface Props {
+    data?: ChatInputData | null;
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string;
+  }
+
+  let { data = null, placeholder = '', disabled = $bindable(false), value = $bindable('') }: Props = $props();
+
+  const resolvedPlaceholder = $derived(data?.placeholder ?? placeholder ?? 'Type a message...');
+
+  let rootEl = $state<HTMLElement | null>(null);
+
+  function handleSubmit(e: CustomEvent<string>) {
+    const text = e.detail;
+    if (!text) return;
+    rootEl?.dispatchEvent(
+      new CustomEvent('widget:interact', {
+        detail: { action: 'submit', payload: { text } },
+        bubbles: true,
+      })
+    );
+  }
+
+  function handleStop() {
+    rootEl?.dispatchEvent(
+      new CustomEvent('widget:interact', {
+        detail: { action: 'stop', payload: null },
+        bubbles: true,
+      })
+    );
+  }
+</script>
+
+<div bind:this={rootEl} class="w-full">
+  <ChatInline
+    placeholder={resolvedPlaceholder}
+    {disabled}
+    bind:value
+    onsubmit={handleSubmit}
+    onstop={handleStop}
+  />
+</div>

package/src/widgets/rich/data-table.svelte

@@ -0,0 +1,132 @@
+<svelte:options customElement={{ tag: 'auto-data-table', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface DataTableColumn { key: string; label: string; align?: 'left'|'center'|'right'; type?: 'text'|'number'|'boolean'|'link'; }
+  export interface DataTableData {
+    title?: string;
+    columns?: DataTableColumn[];
+    rows?: Record<string,unknown>[];
+    compact?: boolean;
+    striped?: boolean;
+    emptyMessage?: string;
+  }
+
+  interface Props {
+    data?: DataTableData | null;
+    onrowclick?: (row: Record<string,unknown>) => void;
+  }
+
+  let { data = {}, onrowclick }: Props = $props();
+
+  const MAX = 200;
+  const fmt = new Intl.NumberFormat('fr-FR');
+  let sortCol = $state<string|null>(null);
+  let sortAsc = $state(true);
+
+  const rows = $derived<Record<string,unknown>[]>(
+    Array.isArray(data?.rows) && (data!.rows as unknown[]).length
+      ? data!.rows as Record<string,unknown>[]
+      : []
+  );
+
+  const columns = $derived<DataTableColumn[]>(
+    Array.isArray(data?.columns) && (data!.columns as unknown[]).length
+      ? data!.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!];
+      const 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(data?.compact === true);
+
+  function handleSort(colKey: string) {
+    if (sortCol === colKey) {
+      sortAsc = !sortAsc;
+    } else {
+      sortCol = colKey;
+      sortAsc = true;
+    }
+  }
+</script>
+
+<div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
+  {#if data?.title}<h3 class="text-sm font-semibold text-text1 mb-3">{data.title}</h3>{/if}
+  {#if columns.length === 0 && rows.length === 0}
+    <p class="text-text2 text-sm">{data?.emptyMessage ?? 'No data'}</p>
+  {:else}
+    <div class="overflow-auto max-h-[480px] rounded border border-border">
+      <table class="w-full border-collapse" role="grid">
+        <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' : ''}"
+                aria-sort={sortCol === col.key ? (sortAsc ? 'ascending' : 'descending') : 'none'}
+                onclick={() => handleSort(col.key)}
+                onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleSort(col.key); } }}
+                tabindex="0"
+                role="columnheader"
+                scope="col"
+              >
+                {col.label}{#if sortCol === col.key}<span class="ml-1 text-accent" aria-hidden="true">{sortAsc ? '↑' : '↓'}</span>{/if}
+              </th>
+            {/each}
+          </tr>
+        </thead>
+        <tbody>
+          {#each displayed as row, i}
+            <tr
+              class="hover:bg-surface2 transition-colors {data?.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

@@ -0,0 +1,115 @@
+<svelte:options customElement={{ tag: 'auto-gallery', shadow: 'none' }} />
+
+<script lang="ts">
+  import SafeImage from '../SafeImage.svelte';
+  import Dialog from '../../base/dialog-root.svelte';
+  import DialogTrigger from '../../base/dialog-trigger.svelte';
+  import DialogContent from '../../base/dialog-content.svelte';
+
+  export interface GalleryImage { src: string; alt?: string; caption?: string; href?: string; }
+  export interface GalleryData {
+    title?: string;
+    images?: GalleryImage[];
+    columns?: number;
+    emptyMessage?: string;
+  }
+
+  interface Props { data?: GalleryData | null; }
+  let { data = {} }: Props = $props();
+
+  const images = $derived<GalleryImage[]>(
+    Array.isArray(data?.images) && data!.images!.length ? data!.images! :
+    []
+  );
+
+  let lightboxOpen = $state(false);
+  let lightboxIdx = $state(0);
+  const lightboxImg = $derived(images[lightboxIdx] ?? null);
+
+  function open(i: number) { lightboxIdx = i; lightboxOpen = true; }
+  function close() { lightboxOpen = false; }
+  function prev() { if (lightboxIdx > 0) lightboxIdx--; }
+  function next() { if (lightboxIdx < images.length - 1) lightboxIdx++; }
+
+  function onKey(e: KeyboardEvent) {
+    if (!lightboxOpen) 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 data?.title}<h3 class="text-sm font-semibold text-text1 mb-3">{data.title}</h3>{/if}
+  {#if images.length === 0}
+    <p class="text-text2 text-sm">{data?.emptyMessage ?? 'Aucune image'}</p>
+  {:else if images.length === 1}
+    {@const img = images[0]}
+    <Dialog bind:open={lightboxOpen}>
+      <DialogTrigger class="relative overflow-hidden rounded-lg border border-border hover:border-border2 transition-all cursor-pointer bg-transparent p-0 group w-full text-left">
+        <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}
+      </DialogTrigger>
+      <DialogContent class="max-w-[90vw] max-h-[90vh] p-2 overflow-hidden">
+        {#if lightboxImg}
+          <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-text2 text-sm mt-2">{lightboxImg.caption}</div>
+          {/if}
+        {/if}
+      </DialogContent>
+    </Dialog>
+  {:else}
+    <Dialog bind:open={lightboxOpen}>
+      <div class="grid gap-2 responsive-gallery" style="--gallery-cols: repeat({data?.columns ?? 3}, minmax(0, 1fr));">
+        {#each images as img, i}
+          <DialogTrigger
+            class="relative overflow-hidden rounded-lg border border-border hover:border-border2 transition-all cursor-pointer bg-transparent p-0 group text-left"
+            onclick={() => (lightboxIdx = 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}
+          </DialogTrigger>
+        {/each}
+      </div>
+      <div class="mt-2 text-xs text-text2">{images.length} image{images.length !== 1 ? 's' : ''}</div>
+
+      <DialogContent class="max-w-[90vw] max-h-[90vh] p-2 overflow-hidden">
+        {#if lightboxImg}
+          <div class="relative">
+            <SafeImage src={lightboxImg.src} alt={lightboxImg.alt ?? ''} class="max-w-full max-h-[80vh] object-contain rounded" />
+            {#if lightboxImg.caption}
+              <div class="text-center text-text2 text-sm mt-2">{lightboxImg.caption}</div>
+            {/if}
+            {#if 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"
+                aria-label="Image précédente"
+                onclick={prev}>&lsaquo;</button>
+            {/if}
+            {#if 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"
+                aria-label="Image suivante"
+                onclick={next}>&rsaquo;</button>
+            {/if}
+          </div>
+          <div class="text-center text-xs text-text2 mt-1">{lightboxIdx + 1} / {images.length}</div>
+        {/if}
+      </DialogContent>
+    </Dialog>
+  {/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>