@webmcp-auto-ui/ui 2.5.27 → 2.5.28

package/src/widgets/rich/json-viewer.ts

@@ -0,0 +1,202 @@
+/**
+ * JsonViewer — vanilla renderer
+ *
+ * Ported from JsonViewer.svelte (recursive snippet -> recursive JS function).
+ * Renders a JSON value with collapsible object/array nodes, typed colors,
+ * and cycle detection. XSS-safe (textContent only).
+ */
+
+export interface JsonViewerSpec {
+  title?: string;
+  data?: unknown;
+  maxDepth?: number;
+  expanded?: boolean;
+  theme?: 'dark' | 'light';
+}
+
+export interface JsonViewerProps {
+  spec?: Partial<JsonViewerSpec>;
+  data?: unknown;
+}
+
+const COLOR_NULL = 'var(--color-text2)';
+const COLOR_BOOL = '#a855f7';
+const COLOR_NUMBER = 'var(--color-amber)';
+const COLOR_STRING = 'var(--color-teal)';
+
+function dispatch(container: HTMLElement, action: string, payload: unknown) {
+  container.dispatchEvent(
+    new CustomEvent('widget:interact', {
+      detail: { action, payload },
+      bubbles: true,
+    }),
+  );
+}
+
+function makeSpan(text: string, color?: string, className?: string): HTMLSpanElement {
+  const s = document.createElement('span');
+  if (color) s.style.color = color;
+  if (className) s.className = className;
+  s.textContent = text;
+  return s;
+}
+
+export function render(container: HTMLElement, props: JsonViewerProps | unknown = {}): () => void {
+  // Tolerate being called with just the raw data, or with {spec, data}.
+  let spec: Partial<JsonViewerSpec> = {};
+  let rawData: unknown;
+  if (props && typeof props === 'object' && ('spec' in (props as any) || 'data' in (props as any))) {
+    const p = props as JsonViewerProps;
+    spec = p.spec ?? {};
+    rawData = p.data;
+  } else {
+    rawData = props;
+  }
+
+  const value = spec.data !== undefined ? spec.data : rawData;
+  const maxDepth = spec.maxDepth ?? 5;
+  const expanded = spec.expanded !== false;
+
+  // Root wrapper
+  container.innerHTML = '';
+  const root = document.createElement('div');
+  root.className = 'bg-bg border border-border rounded-lg p-3 md:p-4 font-mono text-xs leading-5 text-text1';
+  container.appendChild(root);
+
+  if (spec.title) {
+    const title = document.createElement('div');
+    title.className = 'font-sans text-sm font-semibold text-text1 mb-3';
+    title.textContent = spec.title;
+    root.appendChild(title);
+  }
+
+  // Track toggles for interact events + cleanup.
+  const toggleHandlers: Array<{ el: HTMLDetailsElement; handler: EventListener }> = [];
+
+  // Cycle detection: WeakSet of currently-visited object/array references in the
+  // current DFS path. We can't use a Set because we must allow the same object
+  // to appear in sibling branches (non-cycle). Use an ancestor stack instead.
+  function renderNode(val: unknown, depth: number, ancestors: Set<object>): HTMLElement {
+    // null
+    if (val === null) {
+      return makeSpan('null', COLOR_NULL);
+    }
+
+    const t = typeof val;
+
+    if (t === 'boolean') {
+      return makeSpan(String(val), COLOR_BOOL);
+    }
+    if (t === 'number') {
+      return makeSpan(String(val), COLOR_NUMBER);
+    }
+    if (t === 'string') {
+      return makeSpan(`"${val as string}"`, COLOR_STRING);
+    }
+
+    // Arrays
+    if (Array.isArray(val)) {
+      if (ancestors.has(val)) {
+        return makeSpan('[Circular]', undefined, 'text-text2');
+      }
+      if (depth >= maxDepth) {
+        return makeSpan(`[Array(${val.length})]`, undefined, 'text-text2');
+      }
+      const details = document.createElement('details');
+      if (expanded && depth < 2) details.open = true;
+
+      const summary = document.createElement('summary');
+      summary.className = 'cursor-pointer text-text2 hover:text-text1 select-none';
+      summary.textContent = `Array(${val.length})`;
+      details.appendChild(summary);
+
+      const body = document.createElement('div');
+      body.className = 'ml-4 border-l border-border pl-3 mt-0.5';
+
+      ancestors.add(val);
+      val.forEach((item, i) => {
+        const row = document.createElement('div');
+        row.className = 'py-0.5';
+        const idx = document.createElement('span');
+        idx.className = 'text-text2 text-xs mr-1';
+        idx.textContent = `${i}:`;
+        row.appendChild(idx);
+        row.appendChild(renderNode(item, depth + 1, ancestors));
+        body.appendChild(row);
+      });
+      ancestors.delete(val);
+
+      details.appendChild(body);
+
+      const handler: EventListener = () => {
+        dispatch(container, 'toggle', { kind: 'array', open: details.open, length: val.length });
+      };
+      details.addEventListener('toggle', handler);
+      toggleHandlers.push({ el: details, handler });
+
+      return details;
+    }
+
+    // Objects
+    if (t === 'object') {
+      const obj = val as Record<string, unknown>;
+      if (ancestors.has(obj)) {
+        return makeSpan('[Circular]', undefined, 'text-text2');
+      }
+      const keys = Object.keys(obj);
+      if (depth >= maxDepth) {
+        return makeSpan(`{Object(${keys.length})}`, undefined, 'text-text2');
+      }
+      const details = document.createElement('details');
+      if (expanded && depth < 2) details.open = true;
+
+      const summary = document.createElement('summary');
+      summary.className = 'cursor-pointer text-text2 hover:text-text1 select-none';
+      summary.textContent = `{${keys.length}}`;
+      details.appendChild(summary);
+
+      const body = document.createElement('div');
+      body.className = 'ml-4 border-l border-border pl-3 mt-0.5';
+
+      ancestors.add(obj);
+      for (const k of keys) {
+        const row = document.createElement('div');
+        row.className = 'py-0.5';
+        const key = document.createElement('span');
+        key.className = 'text-accent mr-1';
+        key.textContent = `"${k}":`;
+        row.appendChild(key);
+        row.appendChild(renderNode(obj[k], depth + 1, ancestors));
+        body.appendChild(row);
+      }
+      ancestors.delete(obj);
+
+      details.appendChild(body);
+
+      const handler: EventListener = () => {
+        dispatch(container, 'toggle', { kind: 'object', open: details.open, keys: keys.length });
+      };
+      details.addEventListener('toggle', handler);
+      toggleHandlers.push({ el: details, handler });
+
+      return details;
+    }
+
+    // Fallback (undefined, function, symbol, bigint)
+    return makeSpan(String(val), undefined, 'text-text2');
+  }
+
+  if (value === undefined) {
+    root.appendChild(makeSpan('undefined', undefined, 'text-text2'));
+  } else {
+    root.appendChild(renderNode(value, 0, new Set<object>()));
+  }
+
+  return () => {
+    for (const { el, handler } of toggleHandlers) {
+      el.removeEventListener('toggle', handler);
+    }
+    toggleHandlers.length = 0;
+    container.innerHTML = '';
+  };
+}

package/src/widgets/rich/log.ts

@@ -0,0 +1,143 @@
+/**
+ * LogViewer vanilla renderer.
+ *
+ * Contract:
+ *   render(container, data): () => void (cleanup)
+ *
+ * `data` is expected to match { spec, data } where spec is Partial<LogViewerSpec>.
+ * For robustness, if the caller passes a bare spec or a bare array of entries,
+ * we try to coerce.
+ */
+
+export interface LogEntry {
+  timestamp?: string;
+  level?: 'debug' | 'info' | 'warn' | 'error';
+  message: string;
+  source?: string;
+}
+
+export interface LogViewerSpec {
+  title?: string;
+  entries?: LogEntry[];
+  maxHeight?: string;
+}
+
+const LEVEL_CLASS: Record<string, string> = {
+  debug: 'text-text2',
+  info: 'text-teal',
+  warn: 'text-amber',
+  error: 'text-accent2',
+};
+
+function extractSpecAndData(input: any): { spec: Partial<LogViewerSpec>; data: unknown } {
+  if (input && typeof input === 'object' && !Array.isArray(input)) {
+    if ('spec' in input || 'data' in input) {
+      return {
+        spec: (input.spec ?? {}) as Partial<LogViewerSpec>,
+        data: input.data,
+      };
+    }
+    // Bare spec object.
+    return { spec: input as Partial<LogViewerSpec>, data: undefined };
+  }
+  if (Array.isArray(input)) {
+    return { spec: {}, data: input };
+  }
+  return { spec: {}, data: undefined };
+}
+
+function resolveEntries(spec: Partial<LogViewerSpec>, data: unknown): LogEntry[] {
+  if (Array.isArray(spec.entries) && spec.entries.length) return spec.entries;
+  if (Array.isArray(data)) return data as LogEntry[];
+  return [];
+}
+
+export function render(container: HTMLElement, data: any): () => void {
+  const { spec, data: payload } = extractSpecAndData(data);
+  const entries = resolveEntries(spec, payload);
+  const maxHeight = spec.maxHeight ?? '320px';
+
+  const rowListeners: Array<{ el: HTMLElement; handler: (ev: MouseEvent) => void }> = [];
+
+  const root = document.createElement('div');
+  root.className = 'bg-bg border border-border rounded-lg font-mono';
+  root.setAttribute('role', 'log');
+  root.setAttribute('aria-live', 'polite');
+
+  if (spec.title) {
+    const header = document.createElement('div');
+    header.className = 'px-4 py-2 border-b border-border text-xs text-text2';
+    header.textContent = spec.title;
+    root.appendChild(header);
+  }
+
+  const body = document.createElement('div');
+  body.className = 'overflow-y-auto text-xs leading-5 p-3 flex flex-col gap-0.5';
+  body.style.maxHeight = maxHeight;
+
+  if (!entries.length) {
+    const empty = document.createElement('span');
+    empty.className = 'text-text2';
+    empty.textContent = 'No log entries';
+    body.appendChild(empty);
+  } else {
+    for (let i = 0; i < entries.length; i++) {
+      const e = entries[i] ?? ({ message: '' } as LogEntry);
+      const row = document.createElement('div');
+      row.className = 'flex gap-2 items-start hover:bg-surface2 px-1 rounded cursor-pointer';
+      row.setAttribute('role', 'listitem');
+      row.dataset.index = String(i);
+      if (e.level) row.dataset.level = e.level;
+
+      if (e.timestamp) {
+        const ts = document.createElement('span');
+        ts.className = 'text-text2 flex-shrink-0';
+        ts.textContent = e.timestamp;
+        row.appendChild(ts);
+      }
+
+      const level = e.level ?? 'info';
+      const lvl = document.createElement('span');
+      lvl.className = `flex-shrink-0 uppercase text-[10px] font-semibold w-10 ${LEVEL_CLASS[level] ?? LEVEL_CLASS.info}`;
+      lvl.textContent = level;
+      row.appendChild(lvl);
+
+      if (e.source) {
+        const src = document.createElement('span');
+        src.className = 'text-text2 flex-shrink-0';
+        src.textContent = `[${e.source}]`;
+        row.appendChild(src);
+      }
+
+      const msg = document.createElement('span');
+      msg.className = 'text-text1 break-all';
+      msg.textContent = e.message ?? '';
+      row.appendChild(msg);
+
+      const handler = (_ev: MouseEvent) => {
+        row.dispatchEvent(
+          new CustomEvent('widget:interact', {
+            bubbles: true,
+            composed: true,
+            detail: { action: 'log-entry-click', payload: { index: i, entry: e } },
+          }),
+        );
+      };
+      row.addEventListener('click', handler);
+      rowListeners.push({ el: row, handler });
+
+      body.appendChild(row);
+    }
+  }
+
+  root.appendChild(body);
+  container.appendChild(root);
+
+  return () => {
+    for (const { el, handler } of rowListeners) {
+      el.removeEventListener('click', handler);
+    }
+    rowListeners.length = 0;
+    container.innerHTML = '';
+  };
+}

package/src/widgets/rich/map.ts

@@ -0,0 +1,218 @@
+/**
+ * Vanilla renderer for MapView widget (Leaflet, dark basemap).
+ *
+ * Contract:
+ *   render(container, spec) => Promise<cleanup>
+ *
+ * Leaflet is lazy-loaded via dynamic import so this widget costs nothing
+ * until actually mounted. The cleanup function calls `map.remove()` to
+ * release Leaflet's DOM listeners, then clears the container.
+ *
+ * Events:
+ *   click on marker -> CustomEvent('widget:interact', {
+ *     detail: { action: 'markerclick', payload: marker },
+ *     bubbles: true
+ *   })
+ */
+
+export interface LatLng {
+  lat: number;
+  lng: number;
+}
+
+export interface MapMarker {
+  lat: number;
+  lng: number;
+  label?: string;
+  color?: string;
+}
+
+export interface MapSpec {
+  title?: string;
+  center?: LatLng;
+  zoom?: number;
+  height?: string;
+  markers?: MapMarker[];
+}
+
+function markerColor(color?: string): string {
+  return color ?? 'var(--color-accent)';
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export async function render(
+  container: HTMLElement,
+  data: Partial<MapSpec> | undefined
+): Promise<() => void> {
+  const spec: Partial<MapSpec> = data ?? {};
+
+  // Build static chrome (wrapper + optional title + map host + optional marker count).
+  container.innerHTML = '';
+
+  const wrapper = document.createElement('div');
+  wrapper.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;
+    wrapper.appendChild(h3);
+  }
+
+  const mapHost = document.createElement('div');
+  mapHost.className = 'rounded overflow-hidden border border-border';
+  mapHost.style.height = spec.height ?? '400px';
+  mapHost.setAttribute('role', 'region');
+  mapHost.setAttribute('aria-label', spec.title ?? 'Carte');
+
+  // Loader placeholder while Leaflet is being fetched.
+  const loader = document.createElement('div');
+  loader.className =
+    'w-full h-full bg-bg flex flex-col items-center justify-center text-text2 text-sm gap-2';
+  loader.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 13l4.553 2.276A1 1 0 0021 21.382V10.618a1 1 0 00-1.447-.894L15 12m0 8V12M9 7l6-2.5"/>
+    </svg>
+    <span class="font-mono text-xs">Chargement de la carte…</span>
+  `;
+  mapHost.appendChild(loader);
+  wrapper.appendChild(mapHost);
+
+  const markers = spec.markers ?? [];
+  if (markers.length) {
+    const count = document.createElement('div');
+    count.className = 'mt-2 text-xs text-text2 font-mono';
+    count.textContent = `${markers.length} marqueur${markers.length > 1 ? 's' : ''}`;
+    wrapper.appendChild(count);
+  }
+
+  container.appendChild(wrapper);
+
+  // Inject tooltip styles once (Svelte version used :global CSS).
+  if (!document.getElementById('mapview-tooltip-style')) {
+    const style = document.createElement('style');
+    style.id = 'mapview-tooltip-style';
+    style.textContent = `
+      .mapview-tooltip {
+        background: var(--color-surface2);
+        border: 1px solid var(--color-border);
+        color: var(--color-text1);
+        font-size: 11px;
+        font-family: ui-monospace, monospace;
+        border-radius: 4px;
+        padding: 2px 6px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
+      }
+      .mapview-tooltip::before {
+        border-top-color: var(--color-border);
+      }
+      .leaflet-container {
+        background: var(--color-bg);
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  let cancelled = false;
+  let mapInstance: any = null;
+
+  // Lazy-load Leaflet + its CSS. Keep this exact shape: dispatcher awaits us.
+  const leafletMod = await import('leaflet');
+  // @ts-ignore — CSS import handled by Vite.
+  await import('leaflet/dist/leaflet.css');
+
+  if (cancelled) {
+    // Cleanup fired before Leaflet finished loading.
+    return () => {};
+  }
+
+  const L: any = (leafletMod as any).default ?? leafletMod;
+
+  // Clear loader now that Leaflet is ready.
+  mapHost.innerHTML = '';
+
+  const center: [number, number] = spec.center
+    ? [spec.center.lat, spec.center.lng]
+    : [46.6, 2.3];
+
+  const map = L.map(mapHost, {
+    center,
+    zoom: spec.zoom ?? 6,
+    zoomControl: true,
+    attributionControl: true,
+  });
+  mapInstance = map;
+
+  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+    attribution:
+      '&copy; <a href="https://carto.com/">CARTO</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    subdomains: 'abcd',
+    maxZoom: 19,
+  }).addTo(map);
+
+  for (const marker of markers) {
+    const cm = L.circleMarker([marker.lat, marker.lng], {
+      radius: 7,
+      color: markerColor(marker.color),
+      fillColor: markerColor(marker.color),
+      fillOpacity: 0.85,
+      weight: 1.5,
+    }).addTo(map);
+
+    if (marker.label) {
+      cm.bindTooltip(escapeHtml(marker.label), {
+        direction: 'top',
+        offset: L.point(0, -8),
+        className: 'mapview-tooltip',
+      });
+    }
+
+    cm.on('click', () => {
+      container.dispatchEvent(
+        new CustomEvent('widget:interact', {
+          detail: { action: 'markerclick', payload: marker },
+          bubbles: true,
+        })
+      );
+    });
+  }
+
+  // Optional PNG export hook. Best-effort rasterization of the current map tiles.
+  // Leaflet tiles are cross-origin, so a full-fidelity export would require
+  // leaflet-image + proxied tiles. We expose a no-op-ish stub that returns the
+  // map container as a data-url via html-to-canvas if available, else null.
+  (container as any).__exportPng = async (): Promise<string | null> => {
+    try {
+      // @ts-ignore — optional dependency, may be absent.
+      const mod = await import('html-to-image').catch(() => null);
+      if (!mod || !mapHost) return null;
+      return await mod.toPng(mapHost, { pixelRatio: 2 });
+    } catch {
+      return null;
+    }
+  };
+
+  return () => {
+    cancelled = true;
+    try {
+      if (mapInstance) mapInstance.remove();
+    } catch {
+      /* swallow — Leaflet may already be torn down */
+    }
+    mapInstance = null;
+    try {
+      delete (container as any).__exportPng;
+    } catch {
+      /* ignore */
+    }
+    container.innerHTML = '';
+  };
+}