@webmcp-auto-ui/ui 2.5.27 → 2.5.28

package/src/widgets/rich/profile.ts

@@ -0,0 +1,256 @@
+import { createSafeImage } from '../helpers/safe-image.js';
+
+export interface ProfileField {
+  label: string;
+  value: string;
+  href?: string;
+}
+
+export interface ProfileStat {
+  label: string;
+  value: string;
+}
+
+export interface ProfileAction {
+  label: string;
+  href?: string;
+  variant?: 'primary' | 'secondary' | 'danger';
+  /** Identifier forwarded in `widget:interact` detail.payload when clicked. */
+  id?: string;
+  action?: string;
+}
+
+export interface ProfileSpec {
+  name?: string;
+  subtitle?: string;
+  avatar?: { src: string; alt?: string };
+  badge?: { text: string; variant?: 'default' | 'success' | 'warning' | 'error' };
+  fields?: ProfileField[];
+  stats?: ProfileStat[];
+  actions?: ProfileAction[];
+}
+
+const BADGE: Record<string, string> = {
+  default: 'bg-surface2 text-text2',
+  success: 'bg-teal/20 text-teal',
+  warning: 'bg-amber/20 text-amber',
+  error: 'bg-accent2/20 text-accent2',
+};
+
+const ACTION: Record<string, string> = {
+  primary: 'bg-accent text-white',
+  secondary: 'bg-surface2 text-text2',
+  danger: 'bg-accent2 text-white',
+};
+
+function computeInitials(name: string | undefined): string {
+  const src = (name ?? '?').trim();
+  if (!src) return '?';
+  const parts = src.split(/\s+/).slice(0, 2);
+  const out = parts.map((w) => w[0] ?? '').join('').toUpperCase();
+  return out || '?';
+}
+
+/**
+ * Vanilla renderer for the "profile" / ProfileCard widget.
+ *
+ * Mounts a profile card (avatar, name/subtitle/badge, fields, stats, actions)
+ * into `container`. Returns a cleanup function that removes listeners and
+ * empties the container.
+ *
+ * Contract:
+ *  - Pure imperative DOM.
+ *  - Emits CustomEvent('widget:interact', { detail: { action, payload }, bubbles: true })
+ *    when a button action is clicked (the Svelte version invoked `a.onclick()`
+ *    locally; here we both bubble an event AND call `onclick` if provided).
+ *  - Tailwind classes and CSS vars preserved verbatim.
+ *  - Avatar fallback: a dedicated initials bubble is rendered when the src is
+ *    missing/invalid. For valid URLs, createSafeImage adds an error listener
+ *    that self-replaces with a placeholder — we additionally swap to an
+ *    initials bubble on load error to match the original behaviour.
+ */
+export function render(container: HTMLElement, data: any): () => void {
+  const spec: Partial<ProfileSpec> = (data && typeof data === 'object') ? data : {};
+  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 max-w-full md:max-w-[480px]';
+
+  // --- Header (avatar + name/subtitle/badge) ---
+  const header = document.createElement('div');
+  header.className = 'flex flex-col sm:flex-row items-center sm:items-start mb-4 gap-3 sm:gap-4';
+
+  const initials = computeInitials(spec.name);
+  const avatarClasses = 'w-16 h-16 rounded-full object-cover border-2 border-border2 flex-shrink-0';
+  const fallbackClasses = 'w-16 h-16 rounded-full bg-accent text-white flex items-center justify-center text-xl font-bold flex-shrink-0';
+
+  const buildInitialsFallback = (): HTMLElement => {
+    const div = document.createElement('div');
+    div.className = fallbackClasses;
+    div.setAttribute('role', 'img');
+    div.setAttribute('aria-label', spec.name ?? 'Avatar');
+    div.textContent = initials;
+    return div;
+  };
+
+  const avatarSrc = spec.avatar?.src;
+  const avatarAlt = spec.avatar?.alt ?? spec.name ?? '';
+  const VALID_PREFIXES = ['http://', 'https://', 'data:', '/'];
+  const srcLooksValid =
+    typeof avatarSrc === 'string' &&
+    avatarSrc.length > 0 &&
+    VALID_PREFIXES.some((p) => avatarSrc.startsWith(p));
+
+  if (srcLooksValid) {
+    // Use createSafeImage; also listen for its error to swap in initials fallback.
+    const imgEl = createSafeImage({
+      src: avatarSrc!,
+      alt: avatarAlt,
+      className: avatarClasses,
+      fallbackText: initials,
+    });
+    header.appendChild(imgEl);
+
+    // If it's a real <img>, on error we swap for initials (prefer over placeholder).
+    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 {
+    header.appendChild(buildInitialsFallback());
+  }
+
+  // Text block (name, subtitle, badge)
+  const textBlock = document.createElement('div');
+
+  const nameEl = document.createElement('h3');
+  nameEl.className = 'text-lg font-bold text-text1 m-0';
+  nameEl.textContent = spec.name ?? '';
+  textBlock.appendChild(nameEl);
+
+  if (spec.subtitle) {
+    const sub = document.createElement('div');
+    sub.className = 'text-sm text-text2 mt-0.5';
+    sub.textContent = spec.subtitle;
+    textBlock.appendChild(sub);
+  }
+
+  if (spec.badge) {
+    const badgeWrap = document.createElement('div');
+    badgeWrap.className = 'mt-1';
+    const span = document.createElement('span');
+    const variantCls = BADGE[spec.badge.variant ?? 'default'] ?? BADGE.default;
+    span.className = `text-xs font-semibold px-2 py-0.5 rounded-full ${variantCls}`;
+    span.textContent = spec.badge.text;
+    badgeWrap.appendChild(span);
+    textBlock.appendChild(badgeWrap);
+  }
+
+  header.appendChild(textBlock);
+  root.appendChild(header);
+
+  // --- Fields ---
+  if (Array.isArray(spec.fields) && spec.fields.length) {
+    const dl = document.createElement('dl');
+    dl.className = 'border-t border-border pt-3 m-0';
+    for (const f of spec.fields) {
+      const row = document.createElement('div');
+      row.className = 'flex gap-2 mb-1.5';
+
+      const dt = document.createElement('dt');
+      dt.className = 'text-xs text-text2 min-w-[80px] sm:min-w-[100px] font-mono';
+      dt.textContent = f.label;
+      row.appendChild(dt);
+
+      const dd = document.createElement('dd');
+      dd.className = 'text-sm text-text1 m-0';
+      if (f.href) {
+        const a = document.createElement('a');
+        a.href = f.href;
+        a.className = 'text-accent hover:underline';
+        a.textContent = f.value;
+        dd.appendChild(a);
+      } else {
+        dd.textContent = f.value;
+      }
+      row.appendChild(dd);
+      dl.appendChild(row);
+    }
+    root.appendChild(dl);
+  }
+
+  // --- Stats ---
+  if (Array.isArray(spec.stats) && spec.stats.length) {
+    const statsWrap = document.createElement('div');
+    statsWrap.className = 'flex flex-wrap border border-border rounded overflow-hidden mt-3';
+    for (const s of spec.stats) {
+      const cell = document.createElement('div');
+      cell.className = 'text-center px-4 py-2 border-r border-border last:border-r-0 flex-1 min-w-[80px]';
+      const vEl = document.createElement('div');
+      vEl.className = 'text-xl font-bold text-accent';
+      vEl.textContent = s.value;
+      const lEl = document.createElement('div');
+      lEl.className = 'text-xs text-text2';
+      lEl.textContent = s.label;
+      cell.appendChild(vEl);
+      cell.appendChild(lEl);
+      statsWrap.appendChild(cell);
+    }
+    root.appendChild(statsWrap);
+  }
+
+  // --- Actions ---
+  if (Array.isArray(spec.actions) && spec.actions.length) {
+    const actionsWrap = document.createElement('div');
+    actionsWrap.className = 'flex gap-2 mt-3 flex-wrap';
+
+    spec.actions.forEach((a, idx) => {
+      const variantCls = ACTION[a.variant ?? 'secondary'] ?? ACTION.secondary;
+      if (a.href) {
+        const link = document.createElement('a');
+        link.href = a.href;
+        link.className = `inline-flex items-center px-3.5 py-1.5 rounded text-xs font-semibold no-underline ${variantCls}`;
+        link.textContent = a.label;
+        actionsWrap.appendChild(link);
+      } else {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = `inline-flex items-center px-3.5 py-1.5 rounded text-xs font-semibold border-0 cursor-pointer ${variantCls}`;
+        btn.textContent = a.label;
+        const handler = (ev: MouseEvent) => {
+          // Bubble a canonical widget:interact event.
+          container.dispatchEvent(new CustomEvent('widget:interact', {
+            detail: {
+              action: a.action ?? a.id ?? a.label,
+              payload: { index: idx, label: a.label },
+            },
+            bubbles: true,
+          }));
+          // Preserve original local onclick if provided.
+          if (typeof (a as any).onclick === 'function') {
+            try { (a as any).onclick(ev); } catch { /* swallow */ }
+          }
+        };
+        btn.addEventListener('click', handler);
+        cleanups.push(() => btn.removeEventListener('click', handler));
+        actionsWrap.appendChild(btn);
+      }
+    });
+
+    root.appendChild(actionsWrap);
+  }
+
+  container.appendChild(root);
+
+  return () => {
+    for (const fn of cleanups) {
+      try { fn(); } catch { /* swallow */ }
+    }
+    cleanups.length = 0;
+    container.innerHTML = '';
+  };
+}

package/src/widgets/rich/sankey.ts

@@ -0,0 +1,262 @@
+/**
+ * Sankey (simulated) — vanilla renderer.
+ *
+ * Contract:
+ *   render(container, spec): () => void
+ *
+ * Emits on `container`:
+ *   - CustomEvent 'widget:interact' { detail: { action: 'nodeclick', payload: node }, bubbles: true }
+ *   - CustomEvent 'widget:interact' { detail: { action: 'linkclick', payload: link }, bubbles: true }
+ *   - CustomEvent 'widget:node-dblclick' { detail: { nodeId, nodeData }, bubbles: true }
+ *
+ * Not a real d3-sankey layout — horizontal "bar" visualization sorted by value,
+ * matching the historical Svelte widget (Sankey.svelte).
+ */
+
+export interface SankeyNode {
+  id: string;
+  label: string;
+  color?: string;
+  summary?: string;
+}
+
+export interface SankeyLink {
+  source: string;
+  target: string;
+  value: number;
+  label?: string;
+}
+
+export interface SankeySpec {
+  title?: string;
+  nodes?: SankeyNode[];
+  links?: SankeyLink[];
+}
+
+type Cleanup = () => void;
+
+function emitInteract(
+  container: HTMLElement,
+  action: 'nodeclick' | 'linkclick',
+  payload: unknown,
+): void {
+  container.dispatchEvent(
+    new CustomEvent('widget:interact', {
+      detail: { action, payload },
+      bubbles: true,
+    }),
+  );
+}
+
+function emitNodeDblclick(container: HTMLElement, node: SankeyNode): void {
+  container.dispatchEvent(
+    new CustomEvent('widget:node-dblclick', {
+      detail: { nodeId: node.id, nodeData: node },
+      bubbles: true,
+    }),
+  );
+}
+
+export function render(container: HTMLElement, data: unknown): Cleanup {
+  const spec: Partial<SankeySpec> =
+    data && typeof data === 'object' ? (data as Partial<SankeySpec>) : {};
+
+  const nodes: SankeyNode[] = Array.isArray(spec.nodes) ? spec.nodes! : [];
+  const links: SankeyLink[] = Array.isArray(spec.links) ? spec.links! : [];
+
+  // Clear container.
+  container.innerHTML = '';
+
+  const root = document.createElement('div');
+  root.className = 'bg-surface border border-border rounded-lg p-3 md:p-4 font-sans';
+  container.appendChild(root);
+
+  if (spec.title) {
+    const h = document.createElement('h3');
+    h.className = 'text-sm font-semibold text-text1 mb-3';
+    h.textContent = String(spec.title);
+    root.appendChild(h);
+  }
+
+  // Empty state.
+  if (!nodes.length || !links.length) {
+    const p = document.createElement('p');
+    p.className = 'text-text2 text-sm';
+    p.textContent = 'No flow data';
+    root.appendChild(p);
+
+    const cleanupEmpty: Cleanup = () => {
+      container.innerHTML = '';
+    };
+    // PNG export — empty placeholder.
+    (container as unknown as { __exportPng?: () => Promise<Blob | null> }).__exportPng =
+      async () => null;
+    return cleanupEmpty;
+  }
+
+  const nodeMap = new Map<string, SankeyNode>(nodes.map((n) => [n.id, n]));
+  const maxVal = Math.max(...links.map((l) => l.value), 1);
+  const sorted = [...links].sort((a, b) => b.value - a.value);
+
+  // Counts line.
+  const counts = document.createElement('div');
+  counts.className = 'text-xs text-text2 mb-2 font-mono';
+  counts.textContent = `${nodes.length} nodes · ${links.length} flows`;
+  root.appendChild(counts);
+
+  const list = document.createElement('div');
+  list.className = 'flex flex-col gap-1.5';
+  root.appendChild(list);
+
+  // Track attached listeners for cleanup.
+  type Binding = { el: Element; type: string; fn: EventListener };
+  const bindings: Binding[] = [];
+  const on = (el: Element, type: string, fn: EventListener) => {
+    el.addEventListener(type, fn);
+    bindings.push({ el, type, fn });
+  };
+
+  for (const link of sorted) {
+    const src = nodeMap.get(link.source);
+    const tgt = nodeMap.get(link.target);
+    const sc = src?.color ?? 'var(--color-accent)';
+    const tc = tgt?.color ?? 'var(--color-teal)';
+    const pct = Math.round((link.value / maxVal) * 100);
+    const barH = Math.max(4, Math.round((link.value / maxVal) * 20));
+
+    const row = document.createElement('div');
+    row.className =
+      'flex items-center gap-2 text-xs cursor-pointer hover:opacity-80 transition-opacity';
+    row.setAttribute('role', 'button');
+    row.setAttribute('tabindex', '0');
+
+    const onLinkActivate = () => emitInteract(container, 'linkclick', link);
+    on(row, 'click', onLinkActivate as EventListener);
+    on(row, 'keydown', ((e: Event) => {
+      const ke = e as KeyboardEvent;
+      if (ke.key === 'Enter' || ke.key === ' ') {
+        ke.preventDefault();
+        onLinkActivate();
+      }
+    }) as EventListener);
+
+    // Source label.
+    const srcSpan = document.createElement('span');
+    srcSpan.className = 'text-text2 min-w-[80px] truncate font-mono';
+    srcSpan.style.color = sc;
+    srcSpan.title = src?.summary ?? src?.label ?? link.source;
+    srcSpan.textContent = src?.label ?? link.source;
+    if (src) {
+      on(srcSpan, 'dblclick', ((e: Event) => {
+        e.stopPropagation();
+        emitNodeDblclick(container, src);
+        emitInteract(container, 'nodeclick', src);
+      }) as EventListener);
+    }
+    row.appendChild(srcSpan);
+
+    // Bar.
+    const barWrap = document.createElement('div');
+    barWrap.className = 'flex-1 bg-surface2 rounded-full overflow-hidden';
+    barWrap.style.height = `${barH}px`;
+    const bar = document.createElement('div');
+    bar.className = 'rounded-full h-full';
+    bar.style.width = `${pct}%`;
+    bar.style.background = `linear-gradient(to right, ${sc}, ${tc})`;
+    barWrap.appendChild(bar);
+    row.appendChild(barWrap);
+
+    // Target label.
+    const tgtSpan = document.createElement('span');
+    tgtSpan.className = 'text-text2 min-w-[80px] truncate text-right font-mono';
+    tgtSpan.style.color = tc;
+    tgtSpan.title = tgt?.summary ?? tgt?.label ?? link.target;
+    tgtSpan.textContent = tgt?.label ?? link.target;
+    if (tgt) {
+      on(tgtSpan, 'dblclick', ((e: Event) => {
+        e.stopPropagation();
+        emitNodeDblclick(container, tgt);
+        emitInteract(container, 'nodeclick', tgt);
+      }) as EventListener);
+    }
+    row.appendChild(tgtSpan);
+
+    // Value.
+    const val = document.createElement('span');
+    val.className = 'text-text2 min-w-[40px] text-right font-mono';
+    val.textContent = String(link.value);
+    row.appendChild(val);
+
+    list.appendChild(row);
+  }
+
+  // Optional PNG export — rasterize the root via html2canvas-less approach:
+  // use foreignObject inside an SVG, then draw to canvas.
+  (container as unknown as { __exportPng?: () => Promise<Blob | null> }).__exportPng =
+    async () => {
+      try {
+        const rect = root.getBoundingClientRect();
+        const w = Math.max(1, Math.ceil(rect.width));
+        const h = Math.max(1, Math.ceil(rect.height));
+        const xmlns = 'http://www.w3.org/2000/svg';
+        const svg = document.createElementNS(xmlns, 'svg');
+        svg.setAttribute('xmlns', xmlns);
+        svg.setAttribute('width', String(w));
+        svg.setAttribute('height', String(h));
+        const fo = document.createElementNS(xmlns, 'foreignObject');
+        fo.setAttribute('width', '100%');
+        fo.setAttribute('height', '100%');
+        const clone = root.cloneNode(true) as HTMLElement;
+        // Embed clone inside a namespaced div so the browser renders HTML.
+        const wrap = document.createElement('div');
+        wrap.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+        wrap.appendChild(clone);
+        fo.appendChild(wrap);
+        svg.appendChild(fo);
+        const svgStr = new XMLSerializer().serializeToString(svg);
+        const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        try {
+          const img = new Image();
+          img.decoding = 'sync';
+          await new Promise<void>((resolve, reject) => {
+            img.onload = () => resolve();
+            img.onerror = () => reject(new Error('svg load failed'));
+            img.src = url;
+          });
+          const scale = Math.min(2, (globalThis.devicePixelRatio as number) || 1);
+          const canvas = document.createElement('canvas');
+          canvas.width = w * scale;
+          canvas.height = h * scale;
+          const ctx = canvas.getContext('2d');
+          if (!ctx) return null;
+          ctx.scale(scale, scale);
+          ctx.drawImage(img, 0, 0);
+          return await new Promise<Blob | null>((resolve) =>
+            canvas.toBlob((b) => resolve(b), 'image/png'),
+          );
+        } finally {
+          URL.revokeObjectURL(url);
+        }
+      } catch {
+        return null;
+      }
+    };
+
+  const cleanup: Cleanup = () => {
+    for (const { el, type, fn } of bindings) {
+      el.removeEventListener(type, fn);
+    }
+    bindings.length = 0;
+    try {
+      delete (container as unknown as { __exportPng?: unknown }).__exportPng;
+    } catch {
+      /* noop */
+    }
+    container.innerHTML = '';
+  };
+
+  return cleanup;
+}
+
+export default { render };

package/src/widgets/rich/stat-card.ts

@@ -0,0 +1,125 @@
+export interface StatCardTrend {
+  direction: 'up' | 'down' | 'flat';
+  value?: string;
+  positive?: boolean;
+}
+
+export interface StatCardSpec {
+  label?: string;
+  value?: unknown;
+  unit?: string;
+  delta?: string;
+  trend?: 'up' | 'down' | 'flat' | StatCardTrend;
+  previousValue?: unknown;
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+}
+
+const COLORS: Record<string, string> = {
+  default: 'var(--color-accent)',
+  success: 'var(--color-teal)',
+  warning: 'var(--color-amber)',
+  error: 'var(--color-accent2)',
+  info: '#3b82f6',
+};
+
+function computeAccent(spec: Partial<StatCardSpec>): string {
+  return COLORS[spec.variant ?? 'default'] ?? 'var(--color-accent)';
+}
+
+interface TrendInfo {
+  arrow: string;
+  val: string;
+  color: string;
+}
+
+function computeTrendInfo(spec: Partial<StatCardSpec>): TrendInfo | null {
+  const t = spec.trend;
+  if (!t) return null;
+  if (typeof t === 'string') {
+    const arrow = t === 'up' ? '↑' : t === 'down' ? '↓' : '→';
+    const color =
+      t === 'up'
+        ? 'var(--color-teal)'
+        : t === 'flat'
+          ? 'var(--color-text2)'
+          : 'var(--color-accent2)';
+    return { arrow, val: spec.delta ?? '', color };
+  }
+  const positive = t.positive ?? t.direction === 'up';
+  const arrow = t.direction === 'up' ? '↑' : t.direction === 'down' ? '↓' : '→';
+  const color = positive
+    ? 'var(--color-teal)'
+    : t.direction === 'flat'
+      ? 'var(--color-text2)'
+      : 'var(--color-accent2)';
+  return { arrow, val: t.value ?? '', color };
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function toDisplay(v: unknown): string {
+  if (v === null || v === undefined) return '';
+  return escapeHtml(String(v));
+}
+
+export function render(container: HTMLElement, data: any): () => void {
+  const spec: Partial<StatCardSpec> = data && typeof data === 'object' ? data : {};
+  const accent = computeAccent(spec);
+  const trend = computeTrendInfo(spec);
+
+  const label = toDisplay(spec.label ?? '');
+  const valueStr =
+    spec.value === null || spec.value === undefined ? '—' : toDisplay(spec.value);
+  const unit = spec.unit ? toDisplay(spec.unit) : '';
+  const prev =
+    spec.previousValue !== undefined ? toDisplay(spec.previousValue) : null;
+
+  const unitHtml = unit ? `<span class="text-base text-text2 ml-1">${unit}</span>` : '';
+
+  const trendHtml = trend
+    ? `<div class="flex items-center gap-1 justify-center mt-1">
+        <span class="text-base font-bold" style="color:${trend.color};" aria-hidden="true">${trend.arrow}</span>
+        ${trend.val ? `<span class="text-sm font-semibold" style="color:${trend.color};">${escapeHtml(trend.val)}</span>` : ''}
+      </div>`
+    : '';
+
+  const prevHtml =
+    prev !== null ? `<div class="text-xs text-text2 mt-1">prev: ${prev}</div>` : '';
+
+  container.innerHTML = `
+    <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans min-w-[140px] md:min-w-[160px]" style="border-top: 3px solid ${accent};" role="group" aria-label="${label || 'stat'}">
+      <div class="text-center py-2">
+        <div class="text-xs font-mono text-text2 uppercase tracking-widest mb-2">${label}</div>
+        <div class="text-3xl md:text-4xl font-bold leading-none" style="color:${accent};">
+          ${valueStr}${unitHtml}
+        </div>
+        ${trendHtml}
+        ${prevHtml}
+      </div>
+    </div>
+  `;
+
+  const root = container.firstElementChild as HTMLElement | null;
+  const onClick = (e: Event) => {
+    container.dispatchEvent(
+      new CustomEvent('widget:interact', {
+        detail: { action: 'select', payload: { label: spec.label, value: spec.value } },
+        bubbles: true,
+      })
+    );
+    e.stopPropagation();
+  };
+  if (root) root.addEventListener('click', onClick);
+
+  return () => {
+    if (root) root.removeEventListener('click', onClick);
+    container.innerHTML = '';
+  };
+}