@webmcp-auto-ui/ui 2.5.31 → 2.5.33

package/src/widgets/rich/timeline.svelte

@@ -0,0 +1,95 @@
+<svelte:options customElement={{ tag: 'auto-timeline', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface TimelineEvent {
+    date?: string;
+    title?: string;
+    description?: string;
+    status?: 'done' | 'active' | 'pending';
+    color?: string;
+    href?: string;
+    tags?: string[];
+  }
+
+  export interface TimelineData {
+    title?: string;
+    events?: TimelineEvent[];
+  }
+
+  interface Props {
+    data?: TimelineData | null;
+    oneventclick?: (e: TimelineEvent) => void;
+  }
+
+  let { data = {}, oneventclick }: Props = $props();
+
+  const STATUS: Record<string, string> = {
+    done: 'var(--color-teal)',
+    active: 'var(--color-accent)',
+    pending: 'var(--color-border2)',
+  };
+
+  const events = $derived<TimelineEvent[]>(
+    Array.isArray(data?.events) && (data!.events as unknown[]).length
+      ? data!.events as TimelineEvent[]
+      : []
+  );
+
+  function handleEventActivate(event: TimelineEvent, e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      oneventclick?.(event);
+    }
+  }
+</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 events.length === 0}
+    <p class="text-text2 text-sm">No events</p>
+  {:else}
+    <div class="py-1">
+      {#each events as event, i}
+        {@const isLast = i === events.length - 1}
+        {@const dotColor = event.color ?? STATUS[event.status ?? 'pending'] ?? 'var(--color-border2)'}
+        <div
+          class="flex gap-4 relative {!isLast ? 'pb-5' : ''} {oneventclick ? 'cursor-pointer' : ''}"
+          role={oneventclick ? 'button' : undefined}
+          tabindex={oneventclick ? 0 : undefined}
+          aria-label={oneventclick ? `${event.title ?? 'Event'} — ${event.date ?? ''}` : undefined}
+          title={oneventclick ? 'Double-cliquez pour interagir' : undefined}
+          ondblclick={() => oneventclick?.(event)}
+          onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); oneventclick?.(event); } }}
+        >
+          <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};{event.status === 'active' ? `box-shadow:0 0 0 3px ${dotColor}33;` : ''}"
+            ></div>
+            {#if !isLast}<div class="w-0.5 flex-1 bg-border mt-1"></div>{/if}
+          </div>
+          <div class="flex-1 min-w-0 pb-1">
+            <div class="text-xs text-text2 mb-0.5">{event.date ?? ''}</div>
+            <div class="font-semibold text-text1 text-sm">
+              {#if event.href}
+                <a href={event.href} class="text-accent no-underline hover:underline">{event.title ?? ''}</a>
+              {:else}
+                {event.title ?? ''}
+              {/if}
+            </div>
+            {#if event.description}
+              <div class="text-sm text-text2 mt-0.5">{event.description}</div>
+            {/if}
+            {#if event.tags?.length}
+              <div class="flex gap-1 flex-wrap mt-1">
+                {#each event.tags as tag}
+                  <span class="text-xs bg-surface2 text-text2 px-1.5 py-0.5 rounded">{tag}</span>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/widgets/rich/trombinoscope.svelte

@@ -0,0 +1,87 @@
+<svelte:options customElement={{ tag: 'auto-trombinoscope', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface TrombinoscopePerson { name: string; subtitle?: string; avatar?: string; badge?: string; color?: string; badgeColor?: string; }
+  export interface TrombinoscopeData {
+    title?: string;
+    people?: TrombinoscopePerson[];
+    columns?: number;
+    showBadge?: boolean;
+  }
+
+  interface Props {
+    data?: TrombinoscopeData | null;
+    onpersonclick?: (p: TrombinoscopePerson) => void;
+  }
+  let { data = {}, onpersonclick }: Props = $props();
+
+  const COLORS = ['#7c6dfa', '#3ecfb2', '#f0a050', '#fa6d7c', '#3b82f6', '#a855f7', '#14b8a6', '#f97316'];
+  const VALID_PREFIXES = ['http://', 'https://', 'data:', '/'];
+
+  function isValidImageUrl(url: string | undefined): boolean {
+    return !!url && VALID_PREFIXES.some(p => url.startsWith(p));
+  }
+  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: string) => w[0] ?? '').join('').toUpperCase() || '?';
+  }
+
+  /** Track per-person avatar load failures to fall back to initials */
+  let failedAvatars = $state(new Set<string>());
+
+  const people = $derived.by<TrombinoscopePerson[]>(() => {
+    if (Array.isArray(data?.people) && data!.people!.length) return data!.people!;
+    return [];
+  });
+
+  const cols = $derived(data?.columns ?? 4);
+</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 people.length === 0}<p class="text-text2 text-sm">Aucune personne</p>
+  {:else}
+    <div class="grid gap-3 responsive-trombi" style="--trombi-cols: repeat({cols}, minmax(0, 1fr));">
+      {#each people as person}
+        {@const accent = person.color ?? nameColor(person.name)}
+        <!-- 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 -->
+        <div
+          class="flex flex-col items-center text-center p-3 rounded-lg border border-border hover:border-border2 transition-all {onpersonclick ? 'cursor-pointer' : ''}"
+          role={onpersonclick ? 'button' : undefined}
+          tabindex={onpersonclick ? 0 : undefined}
+          onclick={() => onpersonclick?.(person)}
+        >
+          {#if isValidImageUrl(person.avatar) && !failedAvatars.has(person.avatar!)}
+            <img
+              src={person.avatar}
+              alt={person.name}
+              class="w-12 h-12 rounded-full object-cover mb-2 border-2"
+              style="border-color:{accent};"
+              onerror={() => { failedAvatars = new Set([...failedAvatars, person.avatar!]); }}
+            />
+          {:else}
+            <div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-base mb-2 flex-shrink-0" style="background:{accent};">{initials(person.name)}</div>
+          {/if}
+          <div class="text-xs font-semibold text-text1 leading-tight truncate w-full">{person.name}</div>
+          {#if person.subtitle}<div class="text-xs text-text2 mt-0.5 truncate w-full">{person.subtitle}</div>{/if}
+          {#if data?.showBadge !== false && person.badge}
+            <span class="text-xs font-semibold px-2 py-0.5 rounded-full mt-1.5 text-white" style="background:{person.badgeColor ?? accent};">{person.badge}</span>
+          {/if}
+        </div>
+      {/each}
+    </div>
+    <div class="mt-3 text-xs text-text2">{people.length} personne{people.length !== 1 ? 's' : ''}</div>
+  {/if}
+</div>
+
+<style>
+  .responsive-trombi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  @media (min-width: 768px) { .responsive-trombi { grid-template-columns: var(--trombi-cols); } }
+</style>

package/src/widgets/simple/actions.svelte

@@ -0,0 +1,36 @@
+<svelte:options customElement={{ tag: 'auto-actions', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface ActionButton {
+    label: string;
+    primary?: boolean;
+    /** aria-label override for icon-only buttons */
+    ariaLabel?: string;
+    onclick?: () => void;
+  }
+
+  export interface ActionsData {
+    buttons?: ActionButton[];
+  }
+
+  interface Props {
+    data?: ActionsData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  const buttons = $derived(data?.buttons ?? []);
+</script>
+
+<div class="p-3 md:p-4 flex gap-2 flex-wrap">
+  {#each buttons as btn}
+    <button
+      class="text-xs font-mono px-4 py-2 rounded border transition-all
+        {btn.primary
+          ? 'bg-accent border-accent text-white hover:opacity-85'
+          : 'border-border2 text-text2 hover:border-accent hover:text-accent'}"
+      aria-label={btn.ariaLabel ?? btn.label}
+      onclick={btn.onclick}
+    >{btn.label}</button>
+  {/each}
+</div>

package/src/widgets/simple/alert.svelte

@@ -0,0 +1,52 @@
+<svelte:options customElement={{ tag: 'auto-alert', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface AlertData {
+    title?: string;
+    message?: string;
+    level?: 'info' | 'warn' | 'error';
+  }
+
+  interface Props {
+    data?: AlertData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  const title = $derived(data?.title);
+  const message = $derived(data?.message);
+  const level = $derived(data?.level ?? 'warn');
+
+  const borderColor = $derived(
+    level === 'error'
+      ? 'border-accent2'
+      : level === 'info'
+        ? 'border-blue-500'
+        : 'border-amber',
+  );
+  const titleColor = $derived(
+    level === 'error'
+      ? 'text-accent2'
+      : level === 'info'
+        ? 'text-blue-400'
+        : 'text-amber',
+  );
+
+  // a11y: error/warn → role="alert" + aria-live="assertive"
+  //       info → role="status" + aria-live="polite"
+  const role = $derived(level === 'error' || level === 'warn' ? 'alert' : 'status');
+  const ariaLive = $derived(level === 'error' || level === 'warn' ? 'assertive' : 'polite');
+</script>
+
+<div
+  class="p-3 md:p-4 border-l-4 {borderColor}"
+  role={role}
+  aria-live={ariaLive}
+>
+  {#if title}
+    <div class="font-semibold text-sm mb-1 {titleColor}">{title}</div>
+  {/if}
+  {#if message}
+    <div class="text-xs font-mono text-text2">{message}</div>
+  {/if}
+</div>

package/src/widgets/simple/chart.svelte

@@ -0,0 +1,38 @@
+<svelte:options customElement={{ tag: 'auto-chart', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface ChartData {
+    title?: string;
+    bars?: [string, number][];
+  }
+
+  interface Props {
+    data?: ChartData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  const title = $derived(data?.title);
+  const bars = $derived(data?.bars ?? []);
+  const max = $derived(Math.max(...bars.map((b) => b[1]), 1));
+</script>
+
+<div class="p-3 md:p-4">
+  {#if title}
+    <div class="text-[10px] font-mono text-text2 mb-4 uppercase tracking-widest">{title}</div>
+  {/if}
+  <div class="flex items-end gap-1.5 h-32" role="img" aria-label={title ?? 'Bar chart'}>
+    {#each bars as [label, val]}
+      <div
+        class="flex-1 rounded-t bg-accent opacity-80 hover:opacity-100 transition-all"
+        style="height: max(2px, {Math.round((val / max) * 100)}%)"
+        title="{label}: {val}"
+      ></div>
+    {/each}
+  </div>
+  <div class="flex gap-1.5 mt-1" aria-hidden="true">
+    {#each bars as [label]}
+      <span class="flex-1 text-center text-[9px] font-mono text-text2 truncate">{label}</span>
+    {/each}
+  </div>
+</div>

package/src/widgets/simple/code.svelte

@@ -0,0 +1,30 @@
+<svelte:options customElement={{ tag: 'auto-code', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface CodeData {
+    lang?: string;
+    content?: string;
+  }
+
+  interface Props {
+    data?: CodeData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  const lang = $derived(data?.lang ?? 'text');
+  const content = $derived(data?.content ?? '');
+</script>
+
+<div class="rounded overflow-hidden">
+  <div class="bg-black/40 px-3 py-1.5 md:px-4 border-b border-border">
+    <span class="text-[10px] font-mono text-text2">{lang}</span>
+  </div>
+  <!-- a11y: tabindex + focus-visible for keyboard access to scrollable code block -->
+  <pre
+    class="font-mono text-xs text-teal bg-black/30 p-3 md:p-4 overflow-x-auto leading-relaxed focus:outline focus:outline-2 focus:outline-accent"
+    tabindex="0"
+    role="region"
+    aria-label="Code block: {lang}"
+  >{content}</pre>
+</div>

package/src/widgets/simple/kv.svelte

@@ -0,0 +1,31 @@
+<svelte:options customElement={{ tag: 'auto-kv', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface KvData {
+    title?: string;
+    rows?: [string, string][];
+  }
+
+  interface Props {
+    data?: KvData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  const title = $derived(data?.title);
+  const rows = $derived(data?.rows ?? []);
+</script>
+
+<div class="p-3 md:p-4">
+  {#if title}
+    <div class="text-[10px] font-mono text-text2 mb-3 uppercase tracking-widest">{title}</div>
+  {/if}
+  <div class="flex flex-col gap-1.5">
+    {#each rows as [k, v]}
+      <div class="flex justify-between items-center text-sm border-b border-border pb-1.5 last:border-none last:pb-0">
+        <span class="font-mono text-xs text-text2">{k}</span>
+        <span class="text-text1 font-medium">{v}</span>
+      </div>
+    {/each}
+  </div>
+</div>

package/src/widgets/simple/list.svelte

@@ -0,0 +1,35 @@
+<svelte:options customElement={{ tag: 'auto-list', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface ListData {
+    title?: string;
+    items?: string[];
+  }
+
+  interface Props {
+    data?: ListData | null;
+    onitemclick?: (item: string, index: number) => void;
+  }
+
+  let { data = {}, onitemclick }: Props = $props();
+
+  const title = $derived(data?.title);
+  const items = $derived(data?.items ?? []);
+</script>
+
+<div class="p-3 md:p-4">
+  {#if title}
+    <div class="text-[10px] font-mono text-text2 mb-3 uppercase tracking-widest">{title}</div>
+  {/if}
+  <ul class="flex flex-col gap-1.5">
+    {#each items as item, i}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <li
+        class="text-sm text-text1 bg-surface2 rounded px-3 py-2 border-l-2 border-accent {onitemclick ? 'cursor-pointer hover:bg-surface2/80' : ''}"
+        title={onitemclick ? 'Double-cliquez pour interagir' : undefined}
+        ondblclick={() => onitemclick?.(item, i)}
+      >{item}</li>
+    {/each}
+  </ul>
+</div>

package/src/widgets/simple/stat.svelte

@@ -0,0 +1,36 @@
+<svelte:options customElement={{ tag: 'auto-stat', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface StatData {
+    label?: string;
+    value?: string | number;
+    trend?: string;
+    trendDir?: 'up' | 'down' | 'neutral';
+  }
+
+  interface Props {
+    data?: StatData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  const label = $derived(data?.label ?? 'Metric');
+  const value = $derived(data?.value ?? '—');
+  const trend = $derived(data?.trend);
+  const trendDir = $derived(data?.trendDir);
+
+  const trendColor = $derived(
+    trendDir === 'up' ? 'text-teal' : trendDir === 'down' ? 'text-accent2' : 'text-text2',
+  );
+  const trendArrow = $derived(
+    trendDir === 'up' ? '↑' : trendDir === 'down' ? '↓' : '→',
+  );
+</script>
+
+<div class="p-4 md:p-5">
+  <div class="text-[11px] font-mono text-text2 mb-1 uppercase tracking-widest">{label}</div>
+  <div class="text-3xl md:text-4xl font-bold text-text1 leading-none">{value}</div>
+  {#if trend}
+    <div class="text-xs font-mono mt-2 {trendColor}">{trendArrow} {trend}</div>
+  {/if}
+</div>

package/src/widgets/simple/tags.svelte

@@ -0,0 +1,34 @@
+<svelte:options customElement={{ tag: 'auto-tags', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface TagItem {
+    text: string;
+    active?: boolean;
+  }
+
+  export interface TagsData {
+    label?: string;
+    tags?: TagItem[];
+  }
+
+  interface Props {
+    data?: TagsData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  const label = $derived(data?.label);
+  const tags = $derived(data?.tags ?? []);
+</script>
+
+<div class="p-3 md:p-4 flex gap-2 flex-wrap items-center">
+  {#if label}
+    <span class="text-[10px] font-mono text-text2">{label}</span>
+  {/if}
+  {#each tags as tag}
+    <span
+      class="text-[11px] font-mono px-3 py-1 rounded-full border transition-colors
+        {tag.active ? 'border-teal text-teal bg-teal/10' : 'border-border2 text-text2'}"
+    >{tag.text}</span>
+  {/each}
+</div>

package/src/widgets/simple/text.svelte

@@ -0,0 +1,130 @@
+<svelte:options customElement={{ tag: 'auto-text', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface TextData {
+    content?: string;
+  }
+
+  interface Props {
+    data?: TextData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  /** Minimal markdown → HTML renderer (no deps, naturally XSS-safe: only produces known tags) */
+  function renderMarkdown(src: string): string {
+    if (!src) return '';
+
+    // Escape HTML entities first (XSS protection)
+    const esc = (s: string) =>
+      s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+
+    const lines = src.split('\n');
+    const out: string[] = [];
+    let inCode = false;
+    let codeLines: string[] = [];
+    let inUl = false;
+    let inOl = false;
+
+    const closeList = () => {
+      if (inUl) { out.push('</ul>'); inUl = false; }
+      if (inOl) { out.push('</ol>'); inOl = false; }
+    };
+
+    /** Inline formatting: bold, italic, code, links */
+    const inline = (s: string): string =>
+      esc(s)
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+        .replace(
+          /\[([^\]]+)\]\(([^)]+)\)/g,
+          '<a href="$2" target="_blank" rel="noopener">$1</a>',
+        );
+
+    for (const line of lines) {
+      if (line.trimStart().startsWith('```')) {
+        if (!inCode) {
+          closeList();
+          inCode = true;
+          codeLines = [];
+        } else {
+          out.push(`<pre><code>${esc(codeLines.join('\n'))}</code></pre>`);
+          inCode = false;
+        }
+        continue;
+      }
+      if (inCode) { codeLines.push(line); continue; }
+
+      const trimmed = line.trim();
+
+      if (!trimmed) { closeList(); out.push(''); continue; }
+
+      const hMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+      if (hMatch) {
+        closeList();
+        const level = hMatch[1].length;
+        out.push(`<h${level}>${inline(hMatch[2])}</h${level}>`);
+        continue;
+      }
+
+      if (/^[-*+]\s+/.test(trimmed)) {
+        if (inOl) { out.push('</ol>'); inOl = false; }
+        if (!inUl) { out.push('<ul>'); inUl = true; }
+        out.push(`<li>${inline(trimmed.replace(/^[-*+]\s+/, ''))}</li>`);
+        continue;
+      }
+
+      const olMatch = trimmed.match(/^(\d+)\.\s+(.+)$/);
+      if (olMatch) {
+        if (inUl) { out.push('</ul>'); inUl = false; }
+        if (!inOl) { out.push('<ol>'); inOl = true; }
+        out.push(`<li>${inline(olMatch[2])}</li>`);
+        continue;
+      }
+
+      if (/^[-*_]{3,}$/.test(trimmed)) {
+        closeList();
+        out.push('<hr>');
+        continue;
+      }
+
+      closeList();
+      out.push(`<p>${inline(trimmed)}</p>`);
+    }
+
+    if (inCode) out.push(`<pre><code>${esc(codeLines.join('\n'))}</code></pre>`);
+    closeList();
+
+    return out.join('\n');
+  }
+
+  const rendered = $derived(renderMarkdown(data?.content ?? ''));
+</script>
+
+<div class="tb-md p-4 md:p-5 text-sm leading-relaxed">{@html rendered}</div>
+
+<style>
+  .tb-md { color: var(--color-text2); }
+  .tb-md :global(h1) { font-size: 1.5em; font-weight: 700; color: var(--color-text1); margin: 0.8em 0 0.4em; }
+  .tb-md :global(h2) { font-size: 1.25em; font-weight: 600; color: var(--color-text1); margin: 0.7em 0 0.35em; }
+  .tb-md :global(h3) { font-size: 1.1em; font-weight: 600; color: var(--color-text1); margin: 0.6em 0 0.3em; }
+  .tb-md :global(h4), .tb-md :global(h5), .tb-md :global(h6) { font-size: 1em; font-weight: 600; color: var(--color-text1); margin: 0.5em 0 0.25em; }
+  .tb-md :global(p) { margin: 0.4em 0; }
+  .tb-md :global(strong) { font-weight: 600; color: var(--color-text1); }
+  .tb-md :global(em) { font-style: italic; }
+  .tb-md :global(a) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
+  .tb-md :global(a:hover) { opacity: 0.8; }
+  .tb-md :global(ul), .tb-md :global(ol) { margin: 0.4em 0; padding-left: 1.5em; }
+  .tb-md :global(ul) { list-style: disc; }
+  .tb-md :global(ol) { list-style: decimal; }
+  .tb-md :global(li) { margin: 0.15em 0; }
+  .tb-md :global(code) { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.9em; background: var(--color-surface2); padding: 0.15em 0.35em; border-radius: 4px; }
+  .tb-md :global(pre) { background: var(--color-surface2); border-radius: 6px; padding: 0.75em 1em; margin: 0.5em 0; overflow-x: auto; }
+  .tb-md :global(pre code) { background: none; padding: 0; font-size: 0.85em; }
+  .tb-md :global(hr) { border: none; border-top: 1px solid var(--color-surface2); margin: 0.8em 0; }
+</style>