@webmcp-auto-ui/ui 2.5.27 → 2.5.29

package/src/widgets/rich/grid-data.ts

@@ -0,0 +1,173 @@
+/**
+ * GridData — vanilla renderer.
+ * Port of GridData.svelte. Preserves Tailwind classes, CSS vars, highlights, a11y.
+ *
+ * Contract:
+ *   render(container, spec): cleanup
+ * Events:
+ *   On cell double-click -> CustomEvent('widget:interact', {
+ *     detail: { action: 'cellclick', payload: { row, col, value } },
+ *     bubbles: true
+ *   })
+ */
+
+export interface GridDataColumn {
+  key: string;
+  label: string;
+  width?: string;
+}
+
+export interface GridDataHighlight {
+  row: number;
+  col: number;
+  color?: string;
+}
+
+export interface GridDataSpec {
+  title?: string;
+  columns?: GridDataColumn[];
+  rows?: unknown[][];
+  highlights?: GridDataHighlight[];
+  cellHeight?: number;
+}
+
+function displayValue(v: unknown): string {
+  if (v == null) return '';
+  if (typeof v === 'object') {
+    try {
+      return JSON.stringify(v);
+    } catch {
+      return String(v);
+    }
+  }
+  return String(v);
+}
+
+function buildHighlightMap(highlights: GridDataHighlight[] | undefined): Map<string, string> {
+  const m = new Map<string, string>();
+  if (Array.isArray(highlights)) {
+    for (const h of highlights) {
+      if (!h || typeof h.row !== 'number' || typeof h.col !== 'number') continue;
+      const color =
+        h.color ?? 'color-mix(in srgb, var(--color-accent) 20%, transparent)';
+      m.set(`${h.row},${h.col}`, color);
+    }
+  }
+  return m;
+}
+
+export function render(container: HTMLElement, data: any): () => void {
+  const spec: Partial<GridDataSpec> = (data ?? {}) as Partial<GridDataSpec>;
+  const columns: GridDataColumn[] = Array.isArray(spec.columns) ? spec.columns : [];
+  const rows: unknown[][] = Array.isArray(spec.rows) ? (spec.rows as unknown[][]) : [];
+  const cellH: number = typeof spec.cellHeight === 'number' ? spec.cellHeight : 32;
+  const hlMap = buildHighlightMap(spec.highlights);
+
+  // Clear container
+  container.innerHTML = '';
+
+  // Root
+  const root = document.createElement('div');
+  root.className = 'bg-surface border border-border rounded-lg p-3 md:p-4 font-sans';
+
+  // Title
+  if (spec.title) {
+    const h3 = document.createElement('h3');
+    h3.className = 'text-sm font-semibold text-text1 mb-3';
+    h3.textContent = String(spec.title);
+    root.appendChild(h3);
+  }
+
+  // Empty state
+  if (!columns.length && !rows.length) {
+    const empty = document.createElement('p');
+    empty.className = 'text-text2 text-sm';
+    empty.textContent = 'No data';
+    root.appendChild(empty);
+    container.appendChild(root);
+    return () => {
+      container.innerHTML = '';
+    };
+  }
+
+  // Scroll wrapper
+  const scroll = document.createElement('div');
+  scroll.className = 'overflow-auto rounded border border-border';
+
+  // Table
+  const table = document.createElement('table');
+  table.className = 'w-full border-collapse text-xs font-mono';
+  table.setAttribute('role', 'grid');
+
+  // Head
+  if (columns.length) {
+    const thead = document.createElement('thead');
+    const trh = document.createElement('tr');
+    for (const col of columns) {
+      const th = document.createElement('th');
+      th.className =
+        'sticky top-0 bg-surface2 px-3 py-2 text-left text-text2 border-b border-r border-border whitespace-nowrap font-medium';
+      if (col && col.width) th.style.width = String(col.width);
+      th.setAttribute('scope', 'col');
+      th.textContent = col && col.label != null ? String(col.label) : '';
+      trh.appendChild(th);
+    }
+    thead.appendChild(trh);
+    table.appendChild(thead);
+  }
+
+  // Body — store listeners for cleanup
+  const listeners: Array<{ el: HTMLElement; handler: EventListener }> = [];
+  const tbody = document.createElement('tbody');
+
+  rows.forEach((row, ri) => {
+    const tr = document.createElement('tr');
+    tr.className = 'hover:bg-surface2';
+    const cells = Array.isArray(row) ? row : [];
+    cells.forEach((cell, ci) => {
+      const td = document.createElement('td');
+      td.className =
+        'px-3 text-text2 border-b border-r border-border cursor-pointer hover:bg-surface2';
+      const bgColor = hlMap.get(`${ri},${ci}`);
+      td.style.height = `${cellH}px`;
+      if (bgColor) td.style.background = bgColor;
+      td.setAttribute('role', 'gridcell');
+      td.title = 'Double-cliquez pour interagir';
+      td.textContent = displayValue(cell);
+
+      const handler = (() => {
+        return () => {
+          container.dispatchEvent(
+            new CustomEvent('widget:interact', {
+              detail: {
+                action: 'cellclick',
+                payload: { row: ri, col: ci, value: cell }
+              },
+              bubbles: true
+            })
+          );
+        };
+      })();
+      td.addEventListener('dblclick', handler);
+      listeners.push({ el: td, handler: handler as EventListener });
+
+      tr.appendChild(td);
+    });
+    tbody.appendChild(tr);
+  });
+
+  table.appendChild(tbody);
+  scroll.appendChild(table);
+  root.appendChild(scroll);
+  container.appendChild(root);
+
+  return () => {
+    for (const { el, handler } of listeners) {
+      el.removeEventListener('dblclick', handler);
+    }
+    listeners.length = 0;
+    container.innerHTML = '';
+  };
+}
+
+export default { render };

package/src/widgets/rich/hemicycle.ts

@@ -0,0 +1,313 @@
+/**
+ * Vanilla renderer for the Hemicycle widget.
+ *
+ * Geometric calculations are preserved 1:1 from Hemicycle.svelte:
+ *   - viewBox 420x230, cx=W/2, cy=H-10
+ *   - rings: radii = rMin + i*step (rMin=60, step=28)
+ *   - seats-per-row proportional to ring circumference (Math.PI*r)
+ *   - groups sorted ascending by seat count, colors filled left->right
+ *   - per-row angle: Math.PI - (j/(n-1||1))*Math.PI
+ *   - seat position: cx + r*cos(angle), cy - r*sin(angle)
+ *
+ * Contract:
+ *   export function render(container, data): () => void
+ *   data = spec (HemicycleSpec)
+ *
+ * Interactions:
+ *   - mouseenter/mouseleave on seats -> tooltip
+ *   - dblclick on seat or legend item -> 'widget:interact' CustomEvent
+ *     with detail { action: 'groupclick', payload: group }
+ *   - keydown Enter on legend item -> same event
+ */
+
+export interface HemicycleGroup {
+  id: string;
+  label: string;
+  seats: number;
+  color: string;
+}
+
+export interface HemicycleSpec {
+  title?: string;
+  groups?: HemicycleGroup[];
+  totalSeats?: number;
+  rows?: number;
+}
+
+interface Seat {
+  x: number;
+  y: number;
+  color: string;
+  gid: string;
+}
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+function dispatchGroupClick(container: HTMLElement, group: HemicycleGroup): void {
+  container.dispatchEvent(
+    new CustomEvent('widget:interact', {
+      detail: { action: 'groupclick', payload: group },
+      bubbles: true,
+    }),
+  );
+}
+
+function computeSeats(
+  groups: HemicycleGroup[],
+  total: number,
+  rows: number,
+  cx: number,
+  cy: number,
+  rMin: number,
+  step: number,
+): Seat[] {
+  if (!groups.length || !total) return [];
+  const radii = Array.from({ length: rows }, (_, i) => rMin + i * step);
+  const circs = radii.map((r) => Math.PI * r);
+  const totalC = circs.reduce((a, b) => a + b, 0);
+  const spr = radii.map((r) => Math.round((Math.PI * r) / totalC * total));
+  spr[spr.length - 1] += total - spr.reduce((a, b) => a + b, 0);
+  const sorted = [...groups].sort((a, b) => a.seats - b.seats);
+  const colors: { color: string; gid: string }[] = [];
+  for (const g of sorted) for (let i = 0; i < g.seats; i++) colors.push({ color: g.color, gid: g.id });
+  while (colors.length < total) colors.push({ color: '#333355', gid: '' });
+  const result: Seat[] = [];
+  let idx = 0;
+  for (let row = 0; row < rows; row++) {
+    const r = radii[row];
+    const n = spr[row];
+    for (let j = 0; j < n; j++) {
+      if (idx >= colors.length) break;
+      const angle = Math.PI - (j / (n - 1 || 1)) * Math.PI;
+      result.push({
+        x: cx + r * Math.cos(angle),
+        y: cy - r * Math.sin(angle),
+        ...colors[idx++],
+      });
+    }
+  }
+  return result;
+}
+
+export function render(container: HTMLElement, data: any): () => void {
+  const spec: Partial<HemicycleSpec> = (data ?? {}) as Partial<HemicycleSpec>;
+  const groups: HemicycleGroup[] = Array.isArray(spec.groups) ? spec.groups : [];
+  const total = spec.totalSeats ?? groups.reduce((s, g) => s + g.seats, 0);
+
+  const W = 420;
+  const H = 230;
+  const cx = W / 2;
+  const cy = H - 10;
+  const rMin = 60;
+  const step = 28;
+  const rows = spec.rows ?? Math.min(Math.max(3, Math.ceil(Math.sqrt(total / 6))), 7);
+  const rMax = rMin + rows * step;
+
+  // Cleanup any prior content
+  container.innerHTML = '';
+
+  const cleanups: Array<() => void> = [];
+  const addListener = <K extends keyof HTMLElementEventMap>(
+    el: Element,
+    type: string,
+    handler: EventListener,
+  ) => {
+    el.addEventListener(type, handler);
+    cleanups.push(() => el.removeEventListener(type, handler));
+  };
+
+  // Root card
+  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);
+  }
+
+  if (!groups.length || !total) {
+    const p = document.createElement('p');
+    p.className = 'text-text2 text-sm';
+    p.textContent = 'No data';
+    root.appendChild(p);
+    container.appendChild(root);
+    return () => {
+      for (const c of cleanups) c();
+      container.innerHTML = '';
+    };
+  }
+
+  const seats = computeSeats(groups, total, rows, cx, cy, rMin, step);
+  const legend = [...groups].sort((a, b) => b.seats - a.seats);
+
+  // SVG container (relative wrapper for tooltip positioning)
+  const svgWrap = document.createElement('div');
+  svgWrap.className = 'relative';
+
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
+  svg.setAttribute('xmlns', SVG_NS);
+  svg.setAttribute('class', 'block w-full max-h-[220px]');
+
+  // Backdrop arc
+  const arc = document.createElementNS(SVG_NS, 'path');
+  arc.setAttribute(
+    'd',
+    `M ${cx - rMax - 15} ${cy} A ${rMax + 15} ${rMax + 15} 0 0 1 ${cx + rMax + 15} ${cy}`,
+  );
+  arc.setAttribute('fill', 'none');
+  arc.setAttribute('stroke', 'var(--color-surface2)');
+  arc.setAttribute('stroke-width', '2');
+  svg.appendChild(arc);
+
+  // Tooltip DOM (created eagerly, toggled via hidden)
+  const tooltip = document.createElement('div');
+  tooltip.className =
+    'absolute top-0 right-0 bg-surface2 border border-border2 rounded px-2 py-1 text-xs text-text1 pointer-events-none';
+  tooltip.style.display = 'none';
+  const tooltipLabel = document.createElement('span');
+  tooltipLabel.className = 'font-semibold';
+  const tooltipSep = document.createTextNode(' — ');
+  const tooltipSeats = document.createTextNode('');
+  tooltip.appendChild(tooltipLabel);
+  tooltip.appendChild(tooltipSep);
+  tooltip.appendChild(tooltipSeats);
+
+  const showTooltip = (gid: string) => {
+    const g = groups.find((x) => x.id === gid);
+    if (!g) return;
+    tooltipLabel.textContent = g.label;
+    tooltipSeats.textContent = String(g.seats);
+    tooltip.style.display = '';
+  };
+  const hideTooltip = () => {
+    tooltip.style.display = 'none';
+  };
+
+  // Seats
+  for (const s of seats) {
+    const c = document.createElementNS(SVG_NS, 'circle');
+    c.setAttribute('cx', s.x.toFixed(1));
+    c.setAttribute('cy', s.y.toFixed(1));
+    c.setAttribute('r', '4');
+    c.setAttribute('fill', s.color);
+    c.setAttribute('opacity', '0.9');
+    if (s.gid) {
+      c.setAttribute('class', 'cursor-pointer');
+      const title = document.createElementNS(SVG_NS, 'title');
+      title.textContent = 'Double-click to interact';
+      c.appendChild(title);
+
+      const gid = s.gid;
+      const onEnter = () => showTooltip(gid);
+      const onLeave = () => hideTooltip();
+      const onDbl = () => {
+        const g = groups.find((x) => x.id === gid);
+        if (g) dispatchGroupClick(container, g);
+      };
+      addListener(c, 'mouseenter', onEnter);
+      addListener(c, 'mouseleave', onLeave);
+      addListener(c, 'dblclick', onDbl);
+    }
+    svg.appendChild(c);
+  }
+
+  // Total seats label
+  const label = document.createElementNS(SVG_NS, 'text');
+  label.setAttribute('x', String(cx));
+  label.setAttribute('y', String(cy + 18));
+  label.setAttribute('text-anchor', 'middle');
+  label.setAttribute('font-size', '11');
+  label.setAttribute('fill', 'var(--color-text2)');
+  label.setAttribute('font-family', 'system-ui');
+  label.textContent = `${total} seats`;
+  svg.appendChild(label);
+
+  svgWrap.appendChild(svg);
+  svgWrap.appendChild(tooltip);
+  root.appendChild(svgWrap);
+
+  // Legend
+  const legendWrap = document.createElement('div');
+  legendWrap.className = 'flex flex-wrap gap-x-4 gap-y-1 mt-3';
+  for (const g of legend) {
+    const item = document.createElement('div');
+    item.className = 'flex items-center gap-1.5 text-xs cursor-pointer hover:opacity-80';
+    item.setAttribute('role', 'button');
+    item.setAttribute('tabindex', '0');
+    item.setAttribute('title', 'Double-click to interact');
+
+    const swatch = document.createElement('div');
+    swatch.className = 'w-3 h-3 rounded-full flex-shrink-0';
+    swatch.style.background = g.color;
+
+    const labelEl = document.createElement('span');
+    labelEl.className = 'text-text2';
+    labelEl.textContent = g.label;
+
+    const seatsEl = document.createElement('span');
+    seatsEl.className = 'text-text2';
+    seatsEl.textContent = String(g.seats);
+
+    item.appendChild(swatch);
+    item.appendChild(labelEl);
+    item.appendChild(seatsEl);
+
+    const onDbl = () => dispatchGroupClick(container, g);
+    const onKey = (e: Event) => {
+      const ke = e as KeyboardEvent;
+      if (ke.key === 'Enter') dispatchGroupClick(container, g);
+    };
+    addListener(item, 'dblclick', onDbl);
+    addListener(item, 'keydown', onKey);
+
+    legendWrap.appendChild(item);
+  }
+  root.appendChild(legendWrap);
+
+  container.appendChild(root);
+
+  // High-res SVG -> PNG export hook
+  (container as any).__exportPng = async (scale = 2): Promise<string | null> => {
+    try {
+      const svgEl = container.querySelector('svg');
+      if (!svgEl) return null;
+      const clone = svgEl.cloneNode(true) as SVGSVGElement;
+      clone.setAttribute('xmlns', SVG_NS);
+      if (!clone.getAttribute('width')) clone.setAttribute('width', String(W));
+      if (!clone.getAttribute('height')) clone.setAttribute('height', String(H));
+      const xml = new XMLSerializer().serializeToString(clone);
+      const svg64 = btoa(unescape(encodeURIComponent(xml)));
+      const src = `data:image/svg+xml;base64,${svg64}`;
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      await new Promise<void>((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = (e) => reject(e);
+        img.src = src;
+      });
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.round(W * scale);
+      canvas.height = Math.round(H * scale);
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return null;
+      ctx.scale(scale, scale);
+      ctx.drawImage(img, 0, 0, W, H);
+      return canvas.toDataURL('image/png');
+    } catch {
+      return null;
+    }
+  };
+
+  return () => {
+    for (const c of cleanups) c();
+    try {
+      delete (container as any).__exportPng;
+    } catch {
+      /* ignore */
+    }
+    container.innerHTML = '';
+  };
+}

package/src/widgets/rich/js-sandbox.ts

@@ -0,0 +1,122 @@
+/**
+ * JsSandbox vanilla renderer.
+ *
+ * Renders an iframe sandbox that executes user-provided JS + HTML + CSS in
+ * isolation. Mirrors the Svelte version (JsSandbox.svelte) 1:1.
+ */
+
+export interface JsSandboxSpec {
+  title?: string;
+  code: string;
+  html?: string;
+  css?: string;
+  height?: string;
+}
+
+export interface JsSandboxData {
+  spec: JsSandboxSpec;
+}
+
+function buildSrcdoc(spec: JsSandboxSpec): string {
+  const css = spec.css ?? '';
+  const html = spec.html ?? '';
+  const code = spec.code ?? '';
+  // Neutral base: just reset box-sizing and remove body margin. NO default
+  // colours — sandboxed iframes can't inherit the host's CSS custom properties,
+  // so forcing a dark palette here would clash with user-provided `css` that
+  // assumes the browser default (white bg, black text).
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+*,*::before,*::after{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{padding:8px;font-family:system-ui,sans-serif;font-size:13px}
+${css}
+</style>
+</head>
+<body>
+<div id="root">${html}</div>
+<script>
+(function(){
+try{
+${code}
+}catch(e){
+document.getElementById('root').innerHTML='<pre style="color:red;white-space:pre-wrap;padding:8px;margin:0">'+e+'</pre>';
+}
+})();
+<\/script>
+</body>
+</html>`;
+}
+
+export function render(container: HTMLElement, data: JsSandboxData | JsSandboxSpec | undefined): () => void {
+  // Tolerate three shapes from callers:
+  //   { spec: { code, html, css, ... } }   — explicit spec wrapper
+  //   { code, html, css, ... }             — bare spec (widget_display params)
+  //   undefined / {}                       — empty placeholder
+  const raw = data ?? {};
+  const spec: JsSandboxSpec = ('spec' in raw && raw.spec)
+    ? (raw as JsSandboxData).spec
+    : (raw as JsSandboxSpec);
+
+  // Outer wrapper mirrors the Svelte markup classes.
+  const wrapper = document.createElement('div');
+  wrapper.className = 'bg-surface border border-border rounded-lg overflow-hidden font-sans';
+
+  if (spec.title) {
+    const header = document.createElement('div');
+    header.className =
+      'px-3 py-2 border-b border-border text-sm font-semibold text-text1 flex items-center gap-2';
+
+    const tag = document.createElement('span');
+    tag.className = 'text-xs opacity-50';
+    tag.textContent = 'JS';
+    header.appendChild(tag);
+
+    header.appendChild(document.createTextNode(' ' + spec.title));
+    wrapper.appendChild(header);
+  }
+
+  const iframe = document.createElement('iframe');
+  // Exact sandbox flags from the Svelte source: allow-scripts only.
+  iframe.setAttribute('sandbox', 'allow-scripts');
+  iframe.setAttribute('title', spec.title ?? 'JS Sandbox');
+  iframe.style.width = '100%';
+  iframe.style.height = spec.height ?? '300px';
+  iframe.style.border = 'none';
+  iframe.style.display = 'block';
+
+  // Only build/assign srcdoc when we have code (or html) — otherwise render an
+  // empty iframe placeholder. This matches the Svelte behaviour (srcdoc is
+  // always computed) while being a touch more defensive for empty specs.
+  if (spec && (spec.code || spec.html || spec.css)) {
+    iframe.srcdoc = buildSrcdoc(spec);
+  } else {
+    iframe.srcdoc = buildSrcdoc({
+      code: '',
+      html: '<div style="opacity:.7;font-family:system-ui;font-size:13px;padding:12px">⚠ js-sandbox: no code/html/css provided.</div>',
+      css: 'body{background:#f5f5f7;color:#333}',
+    });
+  }
+
+  wrapper.appendChild(iframe);
+  container.appendChild(wrapper);
+
+  return () => {
+    try {
+      // Blank the iframe first to stop any running scripts cleanly.
+      iframe.srcdoc = '';
+    } catch {
+      /* noop */
+    }
+    if (wrapper.parentNode === container) {
+      container.removeChild(wrapper);
+    } else {
+      container.innerHTML = '';
+    }
+  };
+}
+
+export default { render };