@webmcp-auto-ui/ui 2.5.32 → 2.5.33

package/src/widgets/rich/timeline.ts

@@ -1,179 +0,0 @@
-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

@@ -1,246 +0,0 @@
-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

@@ -1,89 +0,0 @@
-/**
- * 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

@@ -1,100 +0,0 @@
-/**
- * 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 = '';
-  };
-}