@webmcp-auto-ui/ui 2.5.26 → 2.5.28

package/src/widgets/rich/cards.ts

@@ -0,0 +1,181 @@
+/**
+ * Cards (vanilla) — grid of cards with optional image, subtitle, description, tags.
+ * Mirrors Cards.svelte. Interactive mode: cards are clickable (dblclick + Enter/Space).
+ *
+ * Contract:
+ *   render(container, data) -> cleanup()
+ * Event:
+ *   'widget:interact' { action: 'cardclick', payload: card }
+ */
+
+import { createSafeImage } from '../helpers/safe-image.js';
+
+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;
+  interactive?: boolean;
+}
+
+interface CardsPayload {
+  spec?: Partial<CardsSpec>;
+  data?: unknown;
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]!));
+}
+
+function resolveCards(spec: Partial<CardsSpec>, data: unknown): CardItem[] {
+  if (Array.isArray(spec.cards) && spec.cards.length) return spec.cards as CardItem[];
+  if (Array.isArray(data)) {
+    return (data as Record<string, unknown>[]).map((d) => ({
+      title: String(d.title ?? d.name ?? d.label ?? JSON.stringify(d)),
+      description: typeof d.description === 'string' ? (d.description as string) : undefined,
+      subtitle: typeof d.subtitle === 'string' ? (d.subtitle as string) : undefined,
+    }));
+  }
+  return [];
+}
+
+export function render(container: HTMLElement, data: any): () => void {
+  const payload: CardsPayload = (data && typeof data === 'object' ? data : {}) as CardsPayload;
+  const spec: Partial<CardsSpec> = payload.spec ?? {};
+  const inner = payload.data;
+  const interactive = spec.interactive === true;
+  const cards = resolveCards(spec, inner);
+
+  // Root
+  const root = document.createElement('div');
+  root.className = 'bg-surface border border-border rounded-lg p-3 md:p-4 font-sans';
+
+  if (spec.title) {
+    const h3 = document.createElement('h3');
+    h3.className = 'text-sm font-semibold text-text1 mb-3';
+    h3.textContent = spec.title;
+    root.appendChild(h3);
+  }
+
+  // Tracked listeners for cleanup
+  const listeners: Array<{ el: HTMLElement; type: string; handler: EventListener }> = [];
+  const addL = (el: HTMLElement, type: string, handler: EventListener) => {
+    el.addEventListener(type, handler);
+    listeners.push({ el, type, handler });
+  };
+
+  if (cards.length === 0) {
+    const p = document.createElement('p');
+    p.className = 'text-text2 text-sm';
+    p.textContent = spec.emptyMessage ?? 'No items';
+    root.appendChild(p);
+  } else {
+    const grid = document.createElement('div');
+    grid.className = 'grid';
+    const minW = spec.minCardWidth ?? '180px';
+    const gap = spec.gap ?? '1rem';
+    grid.setAttribute('style', `grid-template-columns: repeat(auto-fill, minmax(${minW}, 1fr)); gap: ${gap};`);
+
+    for (const card of cards) {
+      const cardEl = document.createElement('div');
+      cardEl.className =
+        'bg-surface2 border border-border rounded-lg overflow-hidden hover:border-border2 transition-all' +
+        (interactive ? ' cursor-pointer' : '');
+      if (interactive) {
+        cardEl.setAttribute('role', 'button');
+        cardEl.setAttribute('tabindex', '0');
+        cardEl.setAttribute('title', 'Double-cliquez pour interagir');
+
+        const dispatch = () => {
+          container.dispatchEvent(
+            new CustomEvent('widget:interact', {
+              detail: { action: 'cardclick', payload: card },
+              bubbles: true,
+            }),
+          );
+        };
+
+        addL(cardEl, 'dblclick', () => dispatch());
+        addL(cardEl, 'keydown', (ev: Event) => {
+          const ke = ev as KeyboardEvent;
+          if (ke.key === 'Enter' || ke.key === ' ') {
+            ke.preventDefault();
+            dispatch();
+          }
+        });
+      }
+
+      if (card.image) {
+        const img = createSafeImage({
+          src: card.image,
+          alt: card.title,
+          className: 'w-full h-32 object-cover',
+          hideOnError: true,
+        });
+        cardEl.appendChild(img);
+      }
+
+      const body = document.createElement('div');
+      body.className = 'p-3';
+
+      const titleEl = document.createElement('div');
+      titleEl.className = 'font-semibold text-sm text-text1 leading-tight';
+      titleEl.textContent = card.title;
+      body.appendChild(titleEl);
+
+      if (card.subtitle) {
+        const sub = document.createElement('div');
+        sub.className = 'text-xs text-text2 mt-0.5';
+        sub.textContent = card.subtitle;
+        body.appendChild(sub);
+      }
+
+      if (card.description) {
+        const desc = document.createElement('div');
+        desc.className = 'text-xs text-text2 mt-1.5 leading-relaxed';
+        desc.textContent = card.description;
+        body.appendChild(desc);
+      }
+
+      if (Array.isArray(card.tags) && card.tags.length) {
+        const tagsWrap = document.createElement('div');
+        tagsWrap.className = 'flex gap-1 flex-wrap mt-2';
+        for (const tag of card.tags) {
+          const span = document.createElement('span');
+          span.className = 'text-[10px] font-mono px-1.5 py-0.5 rounded bg-surface2 text-text2';
+          span.textContent = String(tag);
+          tagsWrap.appendChild(span);
+        }
+        body.appendChild(tagsWrap);
+      }
+
+      cardEl.appendChild(body);
+      grid.appendChild(cardEl);
+    }
+
+    root.appendChild(grid);
+  }
+
+  container.appendChild(root);
+
+  return () => {
+    for (const { el, type, handler } of listeners) {
+      el.removeEventListener(type, handler);
+    }
+    listeners.length = 0;
+    container.innerHTML = '';
+  };
+}
+
+// Silence unused warning on some toolchains
+void escapeHtml;

package/src/widgets/rich/carousel.ts

@@ -0,0 +1,319 @@
+/**
+ * Carousel (vanilla) — slides with prev/next buttons, dots, auto-advance and swipe.
+ * Mirrors Carousel.svelte. Replaces $effect/setInterval with a closure-managed timer.
+ *
+ * Contract:
+ *   render(container, data) -> cleanup()
+ * Payload shape:
+ *   { spec: Partial<CarouselSpec>, data?: unknown, onslidechange?: (slide, index) => void }
+ * Event:
+ *   'widget:interact' { action: 'slidechange', payload: { slide, index } }
+ *
+ * Cleanup: clears the auto-advance interval, removes all listeners and empties the container.
+ */
+
+import { createSafeImage } from '../helpers/safe-image.js';
+
+export interface CarouselSlide {
+  src?: string;
+  content?: string;
+  title?: string;
+  subtitle?: string;
+}
+
+export interface CarouselSpec {
+  title?: string;
+  slides?: CarouselSlide[];
+  autoPlay?: boolean;
+  interval?: number;
+}
+
+interface CarouselPayload {
+  spec?: Partial<CarouselSpec>;
+  data?: unknown;
+  onslidechange?: (slide: CarouselSlide, index: number) => void;
+}
+
+function resolveSlides(spec: Partial<CarouselSpec>, data: unknown): CarouselSlide[] {
+  if (Array.isArray(spec.slides) && spec.slides.length) return spec.slides as CarouselSlide[];
+  if (Array.isArray(data)) return data as CarouselSlide[];
+  return [];
+}
+
+export function render(container: HTMLElement, data: any): () => void {
+  const payload: CarouselPayload = (data && typeof data === 'object' ? data : {}) as CarouselPayload;
+  const spec: Partial<CarouselSpec> = payload.spec ?? {};
+  const inner = payload.data;
+  const onslidechange = typeof payload.onslidechange === 'function' ? payload.onslidechange : undefined;
+  const slides = resolveSlides(spec, inner);
+  const autoPlay = spec.autoPlay !== false;
+  const intervalMs = spec.interval ?? 5000;
+
+  // --- Root ---
+  const root = document.createElement('div');
+  root.className = 'bg-surface border border-border rounded-lg p-3 md:p-4 font-sans';
+
+  if (spec.title) {
+    const h3 = document.createElement('h3');
+    h3.className = 'text-sm font-semibold text-text1 mb-3';
+    h3.textContent = spec.title;
+    root.appendChild(h3);
+  }
+
+  // --- Tracked listeners for robust cleanup ---
+  const listeners: Array<{ el: EventTarget; type: string; handler: EventListener; opts?: AddEventListenerOptions }> = [];
+  const addL = (el: EventTarget, type: string, handler: EventListener, opts?: AddEventListenerOptions) => {
+    el.addEventListener(type, handler, opts);
+    listeners.push({ el, type, handler, opts });
+  };
+
+  // --- Auto-advance timer (closure-managed, replaces $effect) ---
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  const clearTimer = () => {
+    if (timer !== null) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+
+  // Empty state — no slides, nothing else to wire
+  if (slides.length === 0) {
+    const p = document.createElement('p');
+    p.className = 'text-text2 text-sm';
+    p.textContent = 'Aucun contenu';
+    root.appendChild(p);
+    container.appendChild(root);
+    return () => {
+      container.innerHTML = '';
+    };
+  }
+
+  // --- Current index via closure ---
+  let currentIdx = 0;
+
+  // --- Viewport ---
+  const viewport = document.createElement('div');
+  viewport.className = 'relative overflow-hidden rounded-lg';
+  viewport.setAttribute('role', 'region');
+  viewport.setAttribute('aria-roledescription', 'carousel');
+  viewport.setAttribute('aria-label', spec.title ?? 'Carousel');
+  viewport.setAttribute('tabindex', '0');
+
+  // --- Track (flex row translated on change) ---
+  const track = document.createElement('div');
+  track.className = 'flex transition-transform duration-300 ease-out';
+  track.style.transform = 'translateX(0%)';
+
+  const slideEls: HTMLElement[] = [];
+  slides.forEach((slide, i) => {
+    const slideEl = document.createElement('div');
+    slideEl.className = 'w-full flex-shrink-0';
+    slideEl.setAttribute('role', 'group');
+    slideEl.setAttribute('aria-roledescription', 'slide');
+    slideEl.setAttribute('aria-label', `${i + 1} / ${slides.length}`);
+    slideEl.setAttribute('aria-current', i === 0 ? 'true' : 'false');
+
+    if (slide.src) {
+      const img = createSafeImage({
+        src: slide.src,
+        alt: slide.title ?? '',
+        className: 'w-full h-48 sm:h-64 object-cover',
+        loading: 'lazy',
+      });
+      slideEl.appendChild(img);
+    }
+
+    if (slide.title || slide.subtitle || slide.content) {
+      const body = document.createElement('div');
+      body.className = 'p-3';
+
+      if (slide.title) {
+        const t = document.createElement('div');
+        t.className = 'font-semibold text-sm text-text1';
+        t.textContent = slide.title;
+        body.appendChild(t);
+      }
+      if (slide.subtitle) {
+        const s = document.createElement('div');
+        s.className = 'text-xs text-text2 mt-0.5';
+        s.textContent = slide.subtitle;
+        body.appendChild(s);
+      }
+      if (slide.content) {
+        const c = document.createElement('div');
+        c.className = 'text-xs text-text2 mt-1.5';
+        c.textContent = slide.content;
+        body.appendChild(c);
+      }
+
+      slideEl.appendChild(body);
+    }
+
+    track.appendChild(slideEl);
+    slideEls.push(slideEl);
+  });
+
+  viewport.appendChild(track);
+
+  // --- Dots container (built up front, updated on change) ---
+  const dots: HTMLButtonElement[] = [];
+  let dotsWrap: HTMLDivElement | null = null;
+  if (slides.length > 1) {
+    dotsWrap = document.createElement('div');
+    dotsWrap.className = 'flex justify-center gap-1.5 mt-2';
+    slides.forEach((_, i) => {
+      const dot = document.createElement('button');
+      dot.type = 'button';
+      dot.className = `w-2 h-2 rounded-full transition-colors ${i === 0 ? 'bg-accent' : 'bg-border2'}`;
+      dot.setAttribute('aria-label', `Aller à la diapositive ${i + 1}`);
+      dot.setAttribute('aria-current', i === 0 ? 'true' : 'false');
+      dots.push(dot);
+    });
+  }
+
+  // --- Render state (DOM updates) ---
+  const renderState = () => {
+    track.style.transform = `translateX(-${currentIdx * 100}%)`;
+    slideEls.forEach((el, i) => {
+      el.setAttribute('aria-current', i === currentIdx ? 'true' : 'false');
+    });
+    dots.forEach((dot, i) => {
+      const active = i === currentIdx;
+      dot.className = `w-2 h-2 rounded-full transition-colors ${active ? 'bg-accent' : 'bg-border2'}`;
+      dot.setAttribute('aria-current', active ? 'true' : 'false');
+    });
+  };
+
+  // --- Navigation ---
+  const resetAuto = () => {
+    clearTimer();
+    if (autoPlay && slides.length > 1) {
+      timer = setInterval(() => {
+        // internal tick — not user-initiated
+        goTo(currentIdx < slides.length - 1 ? currentIdx + 1 : 0, false);
+      }, intervalMs);
+    }
+  };
+
+  const goTo = (i: number, userInitiated: boolean) => {
+    const next = Math.max(0, Math.min(i, slides.length - 1));
+    if (next === currentIdx && !userInitiated) {
+      // still reset timer to avoid drift
+      resetAuto();
+      return;
+    }
+    currentIdx = next;
+    renderState();
+    if (userInitiated) {
+      const slide = slides[currentIdx];
+      onslidechange?.(slide, currentIdx);
+      container.dispatchEvent(
+        new CustomEvent('widget:interact', {
+          detail: { action: 'slidechange', payload: { slide, index: currentIdx } },
+          bubbles: true,
+        }),
+      );
+    }
+    resetAuto();
+  };
+
+  const prev = (userInitiated: boolean) => {
+    goTo(currentIdx > 0 ? currentIdx - 1 : slides.length - 1, userInitiated);
+  };
+  const next = (userInitiated: boolean) => {
+    goTo(currentIdx < slides.length - 1 ? currentIdx + 1 : 0, userInitiated);
+  };
+
+  // --- Prev/Next buttons ---
+  if (slides.length > 1) {
+    const prevBtn = document.createElement('button');
+    prevBtn.type = 'button';
+    prevBtn.className =
+      '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';
+    prevBtn.setAttribute('aria-label', 'Diapositive précédente');
+    prevBtn.innerHTML = '&lsaquo;';
+    addL(prevBtn, 'click', () => prev(true));
+
+    const nextBtn = document.createElement('button');
+    nextBtn.type = 'button';
+    nextBtn.className =
+      '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';
+    nextBtn.setAttribute('aria-label', 'Diapositive suivante');
+    nextBtn.innerHTML = '&rsaquo;';
+    addL(nextBtn, 'click', () => next(true));
+
+    viewport.appendChild(prevBtn);
+    viewport.appendChild(nextBtn);
+  }
+
+  // --- Touch/swipe ---
+  let touchStartX = 0;
+  addL(
+    viewport,
+    'touchstart',
+    (e) => {
+      const te = e as TouchEvent;
+      touchStartX = te.touches[0]?.clientX ?? 0;
+    },
+    { passive: true },
+  );
+  addL(
+    viewport,
+    'touchend',
+    (e) => {
+      const te = e as TouchEvent;
+      const endX = te.changedTouches[0]?.clientX ?? 0;
+      const diff = touchStartX - endX;
+      if (Math.abs(diff) > 50) {
+        if (diff > 0) next(true);
+        else prev(true);
+      }
+    },
+    { passive: true },
+  );
+
+  // --- Keyboard arrows ---
+  addL(viewport, 'keydown', (e) => {
+    const ke = e as KeyboardEvent;
+    if (ke.key === 'ArrowLeft') {
+      ke.preventDefault();
+      prev(true);
+    } else if (ke.key === 'ArrowRight') {
+      ke.preventDefault();
+      next(true);
+    }
+  });
+
+  // --- Pause auto-advance on hover / focus for accessibility ---
+  addL(viewport, 'mouseenter', () => clearTimer());
+  addL(viewport, 'mouseleave', () => resetAuto());
+  addL(viewport, 'focusin', () => clearTimer());
+  addL(viewport, 'focusout', () => resetAuto());
+
+  // --- Wire dots ---
+  if (dotsWrap) {
+    dots.forEach((dot, i) => {
+      addL(dot, 'click', () => goTo(i, true));
+      dotsWrap!.appendChild(dot);
+    });
+  }
+
+  // --- Mount ---
+  root.appendChild(viewport);
+  if (dotsWrap) root.appendChild(dotsWrap);
+  container.appendChild(root);
+
+  // --- Start auto-advance ---
+  resetAuto();
+
+  // --- Cleanup ---
+  return () => {
+    clearTimer();
+    for (const { el, type, handler, opts } of listeners) {
+      el.removeEventListener(type, handler, opts);
+    }
+    listeners.length = 0;
+    container.innerHTML = '';
+  };
+}