@webmcp-auto-ui/ui 2.5.26 → 2.5.28

package/src/widgets/rich/timeline.ts

@@ -0,0 +1,179 @@
+export interface TimelineEvent {
+  date?: string;
+  title?: string;
+  description?: string;
+  status?: 'done' | 'active' | 'pending';
+  color?: string;
+  href?: string;
+  tags?: string[];
+}
+
+export interface TimelineSpec {
+  title?: string;
+  events?: TimelineEvent[];
+}
+
+const STATUS: Record<string, string> = {
+  done: 'var(--color-teal)',
+  active: 'var(--color-accent)',
+  pending: 'var(--color-border2)',
+};
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function escapeAttr(s: string): string {
+  return escapeHtml(s);
+}
+
+function resolveEvents(spec: Partial<TimelineSpec>, data: unknown): TimelineEvent[] {
+  if (Array.isArray(spec.events) && spec.events.length) return spec.events;
+  if (Array.isArray(data)) return data as TimelineEvent[];
+  return [];
+}
+
+function renderEvent(event: TimelineEvent, index: number, isLast: boolean, interactive: boolean): string {
+  const dotColor = event.color ?? STATUS[event.status ?? 'pending'] ?? 'var(--color-border2)';
+  const activeShadow = event.status === 'active' ? `box-shadow:0 0 0 3px ${dotColor}33;` : '';
+  const pbClass = !isLast ? 'pb-5' : '';
+  const cursorClass = interactive ? 'cursor-pointer' : '';
+  const role = interactive ? ' role="button"' : '';
+  const tabindex = interactive ? ' tabindex="0"' : '';
+  const title = interactive ? ' title="Double-cliquez pour interagir"' : '';
+
+  const titleHtml = event.href
+    ? `<a href="${escapeAttr(event.href)}" class="text-accent no-underline hover:underline">${escapeHtml(event.title ?? '')}</a>`
+    : escapeHtml(event.title ?? '');
+
+  const descriptionHtml = event.description
+    ? `<div class="text-sm text-text2 mt-0.5">${escapeHtml(event.description)}</div>`
+    : '';
+
+  const tagsHtml = event.tags?.length
+    ? `<div class="flex gap-1 flex-wrap mt-1">${event.tags
+        .map(
+          (tag) =>
+            `<span class="text-xs bg-surface2 text-text2 px-1.5 py-0.5 rounded">${escapeHtml(tag)}</span>`
+        )
+        .join('')}</div>`
+    : '';
+
+  const connector = !isLast ? `<div class="w-0.5 flex-1 bg-border mt-1"></div>` : '';
+
+  return `
+    <div class="flex gap-4 relative ${pbClass} ${cursorClass}" data-event-index="${index}"${role}${tabindex}${title}>
+      <div class="flex flex-col items-center flex-shrink-0">
+        <div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5" style="background:${dotColor};${activeShadow}"></div>
+        ${connector}
+      </div>
+      <div class="flex-1 min-w-0 pb-1">
+        <div class="text-xs text-text2 mb-0.5">${escapeHtml(event.date ?? '')}</div>
+        <div class="font-semibold text-text1 text-sm">${titleHtml}</div>
+        ${descriptionHtml}
+        ${tagsHtml}
+      </div>
+    </div>
+  `;
+}
+
+export function render(container: HTMLElement, data: any): () => void {
+  const spec: Partial<TimelineSpec> =
+    data && typeof data === 'object' && !Array.isArray(data)
+      ? (data.spec && typeof data.spec === 'object' ? data.spec : data)
+      : {};
+  const rawData =
+    data && typeof data === 'object' && !Array.isArray(data) && 'data' in data
+      ? (data as any).data
+      : data;
+
+  const events = resolveEvents(spec, rawData);
+  const interactive = true;
+
+  const titleHtml = spec.title
+    ? `<h3 class="text-sm font-semibold text-text1 mb-3">${escapeHtml(spec.title)}</h3>`
+    : '';
+
+  if (events.length === 0) {
+    container.innerHTML = `
+      <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
+        ${titleHtml}
+        <p class="text-text2 text-sm">No events</p>
+      </div>
+    `;
+    return () => {
+      container.innerHTML = '';
+    };
+  }
+
+  const eventsHtml = events
+    .map((event, i) => renderEvent(event, i, i === events.length - 1, interactive))
+    .join('');
+
+  container.innerHTML = `
+    <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
+      ${titleHtml}
+      <div class="py-1">${eventsHtml}</div>
+    </div>
+  `;
+
+  const root = container.firstElementChild as HTMLElement | null;
+
+  const dispatch = (index: number) => {
+    const event = events[index];
+    if (!event) return;
+    container.dispatchEvent(
+      new CustomEvent('widget:interact', {
+        detail: { action: 'eventclick', payload: event },
+        bubbles: true,
+      })
+    );
+  };
+
+  const findIndex = (target: EventTarget | null): number | null => {
+    let el = target as HTMLElement | null;
+    while (el && el !== root) {
+      if (el.dataset && el.dataset.eventIndex !== undefined) {
+        const n = Number(el.dataset.eventIndex);
+        return Number.isFinite(n) ? n : null;
+      }
+      el = el.parentElement;
+    }
+    return null;
+  };
+
+  const onDblClick = (e: Event) => {
+    const i = findIndex(e.target);
+    if (i !== null) {
+      dispatch(i);
+      e.stopPropagation();
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'Enter') return;
+    const i = findIndex(e.target);
+    if (i !== null) {
+      dispatch(i);
+      e.stopPropagation();
+    }
+  };
+
+  if (root) {
+    root.addEventListener('dblclick', onDblClick);
+    root.addEventListener('keydown', onKeyDown);
+  }
+
+  return () => {
+    if (root) {
+      root.removeEventListener('dblclick', onDblClick);
+      root.removeEventListener('keydown', onKeyDown);
+    }
+    container.innerHTML = '';
+  };
+}

package/src/widgets/rich/trombinoscope.ts

@@ -0,0 +1,246 @@
+import { createSafeImage } from '../helpers/safe-image.js';
+
+export interface TrombinoscopePerson {
+  name: string;
+  subtitle?: string;
+  avatar?: string;
+  badge?: string;
+  color?: string;
+  badgeColor?: string;
+}
+
+export interface TrombinoscopeSpec {
+  title?: string;
+  people?: TrombinoscopePerson[];
+  columns?: number;
+  showBadge?: boolean;
+}
+
+const COLORS = [
+  '#7c6dfa',
+  '#3ecfb2',
+  '#f0a050',
+  '#fa6d7c',
+  '#3b82f6',
+  '#a855f7',
+  '#14b8a6',
+  '#f97316',
+];
+
+function nameColor(name: string): string {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = name.charCodeAt(i) + ((h << 5) - h);
+  return COLORS[Math.abs(h) % COLORS.length]!;
+}
+
+function initials(name: string): string {
+  return (
+    name
+      .split(/\s+/)
+      .slice(0, 2)
+      .map((w) => w[0] ?? '')
+      .join('')
+      .toUpperCase() || '?'
+  );
+}
+
+function extractPeople(input: any): TrombinoscopePerson[] {
+  if (input && typeof input === 'object' && Array.isArray(input.people) && input.people.length) {
+    return input.people as TrombinoscopePerson[];
+  }
+  if (Array.isArray(input)) return input as TrombinoscopePerson[];
+  if (input && typeof input === 'object' && Array.isArray((input as any).data)) {
+    return (input as any).data as TrombinoscopePerson[];
+  }
+  return [];
+}
+
+/**
+ * Vanilla renderer for the "trombinoscope" widget.
+ *
+ * Contract:
+ *  - render(container, data): () => void
+ *  - `data` is the spec (may include `people`); if `data` is itself an array
+ *    of persons, that is used as the roster.
+ *  - Emits CustomEvent('widget:interact', {
+ *      detail: { action: 'personclick', payload: person }, bubbles: true })
+ *    when a person card is clicked.
+ *  - Cleanup removes all listeners and empties the container.
+ *  - Avatar fallback: createSafeImage handles URL validation + error fallback;
+ *    we additionally render an "initials bubble" when the URL is invalid/missing
+ *    and swap the <img> for an initials bubble on load error (closer to the
+ *    original Svelte behaviour than a generic placeholder).
+ */
+export function render(container: HTMLElement, data: any): () => void {
+  const spec: Partial<TrombinoscopeSpec> =
+    data && typeof data === 'object' && !Array.isArray(data) ? data : {};
+  const people = extractPeople(data);
+  const cols = spec.columns ?? 4;
+  const showBadge = spec.showBadge !== false;
+  const hasClickHandler = true; // vanilla renderer always bubbles clicks
+
+  const cleanups: Array<() => void> = [];
+
+  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 h = document.createElement('h3');
+    h.className = 'text-sm font-semibold text-text1 mb-3';
+    h.textContent = spec.title;
+    root.appendChild(h);
+  }
+
+  if (people.length === 0) {
+    const empty = document.createElement('p');
+    empty.className = 'text-text2 text-sm';
+    empty.textContent = 'Aucune personne';
+    root.appendChild(empty);
+    container.appendChild(root);
+    return () => {
+      container.innerHTML = '';
+    };
+  }
+
+  const grid = document.createElement('div');
+  grid.className = 'grid gap-3 responsive-trombi';
+  grid.setAttribute('style', `--trombi-cols: repeat(${cols}, minmax(0, 1fr));`);
+
+  for (const person of people) {
+    const accent = person.color ?? nameColor(person.name);
+
+    const card = document.createElement('div');
+    card.className =
+      'flex flex-col items-center text-center p-3 rounded-lg border border-border hover:border-border2 transition-all' +
+      (hasClickHandler ? ' cursor-pointer' : '');
+    if (hasClickHandler) {
+      card.setAttribute('role', 'button');
+      card.setAttribute('tabindex', '0');
+    }
+
+    // Avatar
+    const avatarClasses = 'w-12 h-12 rounded-full object-cover mb-2 border-2';
+    const fallbackClasses =
+      'w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-base mb-2 flex-shrink-0';
+
+    const buildInitialsFallback = (): HTMLElement => {
+      const div = document.createElement('div');
+      div.className = fallbackClasses;
+      div.setAttribute('style', `background:${accent};`);
+      div.setAttribute('role', 'img');
+      div.setAttribute('aria-label', person.name);
+      div.textContent = initials(person.name);
+      return div;
+    };
+
+    const VALID_PREFIXES = ['http://', 'https://', 'data:', '/'];
+    const srcLooksValid =
+      typeof person.avatar === 'string' &&
+      person.avatar.length > 0 &&
+      VALID_PREFIXES.some((p) => person.avatar!.startsWith(p));
+
+    if (srcLooksValid) {
+      const imgEl = createSafeImage({
+        src: person.avatar!,
+        alt: person.name,
+        className: avatarClasses,
+        style: `border-color:${accent};`,
+        fallbackText: initials(person.name),
+      });
+      card.appendChild(imgEl);
+
+      if (imgEl.tagName === 'IMG') {
+        const onErr = () => {
+          const fb = buildInitialsFallback();
+          imgEl.replaceWith(fb);
+        };
+        imgEl.addEventListener('error', onErr, { once: true });
+        cleanups.push(() => imgEl.removeEventListener('error', onErr));
+      }
+    } else {
+      card.appendChild(buildInitialsFallback());
+    }
+
+    // Name
+    const nameEl = document.createElement('div');
+    nameEl.className = 'text-xs font-semibold text-text1 leading-tight truncate w-full';
+    nameEl.textContent = person.name;
+    card.appendChild(nameEl);
+
+    // Subtitle
+    if (person.subtitle) {
+      const sub = document.createElement('div');
+      sub.className = 'text-xs text-text2 mt-0.5 truncate w-full';
+      sub.textContent = person.subtitle;
+      card.appendChild(sub);
+    }
+
+    // Badge
+    if (showBadge && person.badge) {
+      const badge = document.createElement('span');
+      badge.className = 'text-xs font-semibold px-2 py-0.5 rounded-full mt-1.5 text-white';
+      badge.setAttribute('style', `background:${person.badgeColor ?? accent};`);
+      badge.textContent = person.badge;
+      card.appendChild(badge);
+    }
+
+    // Click / keyboard handlers
+    const emitClick = () => {
+      container.dispatchEvent(
+        new CustomEvent('widget:interact', {
+          detail: { action: 'personclick', payload: person },
+          bubbles: true,
+        }),
+      );
+    };
+    const onClick = (e: Event) => {
+      emitClick();
+      e.stopPropagation();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        emitClick();
+      }
+    };
+    card.addEventListener('click', onClick);
+    card.addEventListener('keydown', onKey);
+    cleanups.push(() => card.removeEventListener('click', onClick));
+    cleanups.push(() => card.removeEventListener('keydown', onKey));
+
+    grid.appendChild(card);
+  }
+
+  root.appendChild(grid);
+
+  const count = document.createElement('div');
+  count.className = 'mt-3 text-xs text-text2';
+  count.textContent = `${people.length} personne${people.length !== 1 ? 's' : ''}`;
+  root.appendChild(count);
+
+  // Inject scoped responsive grid styles (preserves original <style> block).
+  // Only injected once per document to avoid duplication across instances.
+  const STYLE_ID = 'wmcp-trombi-style';
+  if (typeof document !== 'undefined' && !document.getElementById(STYLE_ID)) {
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent =
+      '.responsive-trombi { grid-template-columns: repeat(2, minmax(0, 1fr)); }' +
+      '@media (min-width: 768px) { .responsive-trombi { grid-template-columns: var(--trombi-cols); } }';
+    document.head.appendChild(style);
+  }
+
+  container.appendChild(root);
+
+  return () => {
+    for (const fn of cleanups) {
+      try {
+        fn();
+      } catch {
+        /* swallow */
+      }
+    }
+    cleanups.length = 0;
+    container.innerHTML = '';
+  };
+}

package/src/widgets/simple/actions.ts

@@ -0,0 +1,89 @@
+/**
+ * Vanilla renderer for the Actions widget.
+ *
+ * Mirrors the Svelte version in `ActionsBlock.svelte`:
+ * renders a flex-wrap row of buttons. Each button may carry its own
+ * `onclick` handler (preserved from the Svelte shape). When no handler is
+ * provided, a `widget:interact` CustomEvent is dispatched on the container
+ * with `{ action: 'action-click', payload: { action: <label>, index } }`.
+ */
+
+export interface ActionButton {
+  label: string;
+  primary?: boolean;
+  onclick?: () => void;
+}
+
+export interface ActionsBlockData {
+  buttons: ActionButton[];
+}
+
+export function render(container: HTMLElement, data: Partial<ActionsBlockData> | undefined | null): () => void {
+  // Reset the container.
+  container.innerHTML = '';
+
+  const buttons: ActionButton[] = Array.isArray(data?.buttons) ? (data!.buttons as ActionButton[]) : [];
+
+  const root = document.createElement('div');
+  root.className = 'p-3 md:p-4 flex gap-2 flex-wrap';
+  root.setAttribute('role', 'group');
+
+  // Nothing to render: keep the empty wrapper (stays consistent with Svelte output).
+  if (buttons.length === 0) {
+    container.appendChild(root);
+    return () => {
+      container.innerHTML = '';
+    };
+  }
+
+  // Track listeners so we can clean up precisely.
+  const listeners: Array<{ el: HTMLButtonElement; handler: (ev: Event) => void }> = [];
+
+  buttons.forEach((btn, index) => {
+    const el = document.createElement('button');
+    el.type = 'button';
+
+    const base = 'text-xs font-mono px-4 py-2 rounded border transition-all';
+    const variant = btn.primary
+      ? 'bg-accent border-accent text-white hover:opacity-85'
+      : 'border-border2 text-text2 hover:border-accent hover:text-accent';
+    el.className = `${base} ${variant}`;
+
+    el.textContent = btn.label ?? '';
+    el.setAttribute('aria-label', btn.label ?? `action-${index}`);
+
+    const handler = (_ev: Event) => {
+      if (typeof btn.onclick === 'function') {
+        try {
+          btn.onclick();
+        } catch (err) {
+          console.error('[actions widget] onclick handler threw', err);
+        }
+        return;
+      }
+      container.dispatchEvent(
+        new CustomEvent('widget:interact', {
+          detail: {
+            action: 'action-click',
+            payload: { action: btn.label, index },
+          },
+          bubbles: true,
+        })
+      );
+    };
+
+    el.addEventListener('click', handler);
+    listeners.push({ el, handler });
+    root.appendChild(el);
+  });
+
+  container.appendChild(root);
+
+  return () => {
+    for (const { el, handler } of listeners) {
+      el.removeEventListener('click', handler);
+    }
+    listeners.length = 0;
+    container.innerHTML = '';
+  };
+}

package/src/widgets/simple/alert.ts

@@ -0,0 +1,100 @@
+/**
+ * Vanilla renderer for the AlertBlock widget.
+ *
+ * Contract:
+ *   render(container, data) => cleanup()
+ *
+ * Mirrors AlertBlock.svelte — a simple left-bordered alert with optional
+ * title and message, color-coded by severity level.
+ */
+
+export interface AlertBlockData {
+  title?: string;
+  message?: string;
+  level?: 'info' | 'warn' | 'error';
+}
+
+type Level = 'info' | 'warn' | 'error';
+
+function deriveBorderColor(level: Level | undefined): string {
+  if (level === 'error') return 'border-accent2';
+  if (level === 'info') return 'border-blue-500';
+  return 'border-amber';
+}
+
+function deriveTitleColor(level: Level | undefined): string {
+  if (level === 'error') return 'text-accent2';
+  if (level === 'info') return 'text-blue-400';
+  return 'text-amber';
+}
+
+function normalizeLevel(raw: unknown): Level | undefined {
+  if (raw === 'info' || raw === 'warn' || raw === 'error') return raw;
+  return undefined;
+}
+
+export function render(
+  container: HTMLElement,
+  data: Partial<AlertBlockData> | null | undefined
+): () => void {
+  const safe: Partial<AlertBlockData> = data && typeof data === 'object' ? data : {};
+  const level = normalizeLevel(safe.level);
+  const title = typeof safe.title === 'string' ? safe.title : '';
+  const message = typeof safe.message === 'string' ? safe.message : '';
+
+  const borderColor = deriveBorderColor(level);
+  const titleColor = deriveTitleColor(level);
+
+  // Clear target
+  container.innerHTML = '';
+
+  // Root
+  const root = document.createElement('div');
+  root.className = `p-3 md:p-4 border-l-4 ${borderColor}`;
+
+  // Accessibility: role=alert for warn/error, status for info
+  if (level === 'error' || level === 'warn') {
+    root.setAttribute('role', 'alert');
+    root.setAttribute('aria-live', 'assertive');
+  } else {
+    root.setAttribute('role', 'status');
+    root.setAttribute('aria-live', 'polite');
+  }
+
+  if (title) {
+    const titleEl = document.createElement('div');
+    titleEl.className = `font-semibold text-sm mb-1 ${titleColor}`;
+    titleEl.textContent = title;
+    root.appendChild(titleEl);
+  }
+
+  if (message) {
+    const msgEl = document.createElement('div');
+    msgEl.className = 'text-xs font-mono text-text2';
+    msgEl.textContent = message;
+    root.appendChild(msgEl);
+  }
+
+  // Click-to-interact (non-breaking: widget:interact bubbles up)
+  const onClick = (ev: MouseEvent) => {
+    container.dispatchEvent(
+      new CustomEvent('widget:interact', {
+        detail: {
+          action: 'alert.click',
+          payload: { level: level ?? null, title, message },
+          originalEvent: ev,
+        },
+        bubbles: true,
+      })
+    );
+  };
+  root.addEventListener('click', onClick);
+
+  container.appendChild(root);
+
+  // Cleanup
+  return () => {
+    root.removeEventListener('click', onClick);
+    container.innerHTML = '';
+  };
+}