@webmcp-auto-ui/ui 2.5.31 → 2.5.33

package/src/widgets/simple/chart.ts

@@ -1,189 +0,0 @@
-/**
- * chart.ts — vanilla renderer for the simple bar chart widget.
- *
- * Mirrors ChartBlock.svelte 1:1: a minimal SVG-less inline bar chart built
- * from flexbox-sized <div> bars. We keep the flex/div approach (not SVG)
- * because it is strictly what the Svelte widget does — Tailwind classes,
- * hover transitions, truncation on labels — and we want visual parity.
- *
- * PNG export is still wired via the generic export-widget.ts fallback
- * (html-to-image captures the DOM). We do NOT expose __exportPng here
- * because the flex/div layout rasterises identically through html-to-image.
- */
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-
-export interface ChartBlockData {
-  title?: string;
-  bars: [string, number][];
-}
-
-type ChartInput = Partial<ChartBlockData> | null | undefined;
-
-// ── derived computations (mirrors $derived in Svelte) ───────────────────────
-
-function computeBars(data: ChartInput): [string, number][] {
-  const raw = data?.bars;
-  if (!Array.isArray(raw)) return [];
-  return raw.filter(
-    (b) => Array.isArray(b) && b.length >= 2
-  ) as [string, number][];
-}
-
-function computeMax(bars: [string, number][]): number {
-  let m = 1;
-  for (const [, v] of bars) {
-    const n = typeof v === 'number' && Number.isFinite(v) ? v : 0;
-    if (n > m) m = n;
-  }
-  return m;
-}
-
-// ── helpers ─────────────────────────────────────────────────────────────────
-
-function el<K extends keyof HTMLElementTagNameMap>(
-  tag: K,
-  className?: string
-): HTMLElementTagNameMap[K] {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  return node;
-}
-
-function dispatchInteract(
-  container: HTMLElement,
-  action: string,
-  payload: unknown
-): void {
-  container.dispatchEvent(
-    new CustomEvent('widget:interact', {
-      detail: { action, payload },
-      bubbles: true,
-    })
-  );
-}
-
-// ── renderer ────────────────────────────────────────────────────────────────
-
-/**
- * Render a bar chart into `container`. Returns a cleanup function that
- * removes listeners and empties the container.
- *
- * Contract:
- *   - data.title  : optional string header (mono, uppercase tracking).
- *   - data.bars   : array of [label, value] tuples. Missing/invalid → empty.
- *   - Partial data yields an empty placeholder (no bars, no labels).
- *
- * Events:
- *   - `widget:interact` CustomEvent with detail `{ action: 'bar:click',
- *     payload: { index, label, value } }` when a bar is clicked. Bars are
- *     keyboard-activatable (Enter/Space) and exposed as role=button.
- */
-export function render(container: HTMLElement, data: ChartInput): () => void {
-  // Reset in case of re-render into a dirty container.
-  container.innerHTML = '';
-
-  const bars = computeBars(data);
-  const max = computeMax(bars);
-  const title = typeof data?.title === 'string' ? data.title : '';
-
-  const root = el('div', 'p-3 md:p-4');
-
-  // Title
-  if (title) {
-    const titleEl = el(
-      'div',
-      'text-[10px] font-mono text-text2 mb-4 uppercase tracking-widest'
-    );
-    titleEl.textContent = title;
-    root.appendChild(titleEl);
-  }
-
-  // Bars row
-  const barsRow = el('div', 'flex items-end gap-1.5 h-32');
-  const labelsRow = el('div', 'flex gap-1.5 mt-1');
-
-  // Track bar-level listeners so we can unbind on cleanup.
-  const unbinders: Array<() => void> = [];
-
-  if (bars.length === 0) {
-    // Placeholder: keep rows present so layout stays stable.
-    const placeholder = el('div', 'flex-1 rounded-t bg-accent opacity-20');
-    placeholder.style.height = '2px';
-    barsRow.appendChild(placeholder);
-
-    const placeholderLbl = el(
-      'span',
-      'flex-1 text-center text-[9px] font-mono text-text2 truncate'
-    );
-    placeholderLbl.textContent = '';
-    labelsRow.appendChild(placeholderLbl);
-  } else {
-    bars.forEach(([label, val], index) => {
-      const numVal = typeof val === 'number' && Number.isFinite(val) ? val : 0;
-      const pct = Math.round((numVal / max) * 100);
-
-      const bar = el(
-        'div',
-        'flex-1 rounded-t bg-accent opacity-80 hover:opacity-100 transition-all cursor-pointer'
-      );
-      bar.style.height = `max(2px, ${pct}%)`;
-      bar.setAttribute('role', 'button');
-      bar.setAttribute('tabindex', '0');
-      bar.setAttribute(
-        'aria-label',
-        `${String(label ?? '')}: ${String(numVal)}`
-      );
-      bar.title = `${String(label ?? '')}: ${String(numVal)}`;
-
-      const onClick = () => {
-        dispatchInteract(container, 'bar:click', {
-          index,
-          label: String(label ?? ''),
-          value: numVal,
-        });
-      };
-      const onKey = (ev: KeyboardEvent) => {
-        if (ev.key === 'Enter' || ev.key === ' ') {
-          ev.preventDefault();
-          onClick();
-        }
-      };
-
-      bar.addEventListener('click', onClick);
-      bar.addEventListener('keydown', onKey);
-      unbinders.push(() => {
-        bar.removeEventListener('click', onClick);
-        bar.removeEventListener('keydown', onKey);
-      });
-
-      barsRow.appendChild(bar);
-
-      const lbl = el(
-        'span',
-        'flex-1 text-center text-[9px] font-mono text-text2 truncate'
-      );
-      lbl.textContent = String(label ?? '');
-      labelsRow.appendChild(lbl);
-    });
-  }
-
-  root.appendChild(barsRow);
-  root.appendChild(labelsRow);
-  container.appendChild(root);
-
-  // a11y: describe the widget as a figure.
-  container.setAttribute('role', 'figure');
-  if (title) container.setAttribute('aria-label', title);
-
-  // SVG_NS is imported but unused in this flex-based impl; keep it referenced
-  // so future variants (e.g. axis ticks) can drop in without re-import.
-  void SVG_NS;
-
-  return () => {
-    for (const off of unbinders) off();
-    container.innerHTML = '';
-    container.removeAttribute('role');
-    container.removeAttribute('aria-label');
-  };
-}

package/src/widgets/simple/code.ts

@@ -1,79 +0,0 @@
-/**
- * Vanilla renderer for the "code" widget.
- *
- * Contract:
- *   render(container, data) => cleanup()
- *
- * Data shape: { lang?: string; content?: string }
- *
- * Security: uses textContent (never innerHTML) for the code source to avoid XSS.
- */
-
-export interface CodeBlockData {
-  lang?: string;
-  content?: string;
-}
-
-export function render(container: HTMLElement, data: any): () => void {
-  // Defensive normalization
-  const safe: CodeBlockData =
-    data && typeof data === 'object' ? (data as CodeBlockData) : {};
-  const lang = typeof safe.lang === 'string' && safe.lang.length > 0 ? safe.lang : 'text';
-  const content = typeof safe.content === 'string' ? safe.content : '';
-
-  // Clear container before mounting
-  container.innerHTML = '';
-
-  // Root wrapper
-  const wrapper = document.createElement('div');
-  wrapper.className = 'rounded overflow-hidden';
-
-  // Header bar showing the language
-  const header = document.createElement('div');
-  header.className = 'bg-black/40 px-3 py-1.5 md:px-4 border-b border-border';
-
-  const langLabel = document.createElement('span');
-  langLabel.className = 'text-[10px] font-mono text-text2';
-  langLabel.textContent = lang;
-  // A11y: expose the language for assistive tech
-  langLabel.setAttribute('aria-label', `Language: ${lang}`);
-  header.appendChild(langLabel);
-
-  // Code block (<pre><code> for semantics + a11y)
-  const pre = document.createElement('pre');
-  pre.className =
-    'font-mono text-xs text-teal bg-black/30 p-3 md:p-4 overflow-x-auto leading-relaxed';
-  // A11y: code regions are useful as landmarks for screen readers
-  pre.setAttribute('tabindex', '0');
-  pre.setAttribute('role', 'region');
-  pre.setAttribute('aria-label', `Code block (${lang})`);
-
-  const code = document.createElement('code');
-  // Hint for assistive tech + syntax highlighters (e.g. highlight.js, prism)
-  code.className = `language-${lang}`;
-  // IMPORTANT: textContent, never innerHTML — prevents XSS.
-  code.textContent = content;
-  pre.appendChild(code);
-
-  wrapper.appendChild(header);
-  wrapper.appendChild(pre);
-  container.appendChild(wrapper);
-
-  // Interaction: emit a "copy" intent when the user double-clicks the code.
-  // Consumers can listen via container.addEventListener('widget:interact', ...).
-  const onDblClick = () => {
-    container.dispatchEvent(
-      new CustomEvent('widget:interact', {
-        detail: { action: 'copy', payload: { lang, content } },
-        bubbles: true,
-      })
-    );
-  };
-  pre.addEventListener('dblclick', onDblClick);
-
-  // Cleanup: remove listeners and wipe DOM
-  return () => {
-    pre.removeEventListener('dblclick', onDblClick);
-    container.innerHTML = '';
-  };
-}

package/src/widgets/simple/kv.ts

@@ -1,68 +0,0 @@
-/**
- * KV vanilla renderer.
- * Ported from KVBlock.svelte — preserves Tailwind classes, a11y, and data shape.
- *
- * Data contract:
- *   { title?: string; rows?: [string, string][] }
- *
- * Interactions: this widget is purely presentational — no events emitted.
- */
-
-export interface KVData {
-  title?: string;
-  rows?: [string, string][];
-}
-
-export function render(container: HTMLElement, data: any): () => void {
-  const d: KVData = (data && typeof data === 'object' ? data : {}) as KVData;
-
-  const wrap = document.createElement('div');
-  wrap.className = 'p-3 md:p-4';
-
-  if (d.title) {
-    const titleEl = document.createElement('div');
-    titleEl.className = 'text-[10px] font-mono text-text2 mb-3 uppercase tracking-widest';
-    titleEl.textContent = String(d.title);
-    wrap.appendChild(titleEl);
-  }
-
-  const list = document.createElement('div');
-  list.className = 'flex flex-col gap-1.5';
-
-  const rows: [string, string][] = Array.isArray(d.rows) ? d.rows : [];
-
-  if (rows.length === 0) {
-    const empty = document.createElement('div');
-    empty.className = 'text-xs text-text2 italic';
-    empty.textContent = '—';
-    list.appendChild(empty);
-  } else {
-    for (const entry of rows) {
-      const row = document.createElement('div');
-      row.className =
-        'flex justify-between items-center text-sm border-b border-border pb-1.5 last:border-none last:pb-0';
-
-      const k = Array.isArray(entry) ? entry[0] : '';
-      const v = Array.isArray(entry) ? entry[1] : '';
-
-      const keyEl = document.createElement('span');
-      keyEl.className = 'font-mono text-xs text-text2';
-      keyEl.textContent = k == null ? '' : String(k);
-
-      const valEl = document.createElement('span');
-      valEl.className = 'text-text1 font-medium';
-      valEl.textContent = v == null ? '' : String(v);
-
-      row.appendChild(keyEl);
-      row.appendChild(valEl);
-      list.appendChild(row);
-    }
-  }
-
-  wrap.appendChild(list);
-  container.appendChild(wrap);
-
-  return () => {
-    container.innerHTML = '';
-  };
-}

package/src/widgets/simple/list.ts

@@ -1,89 +0,0 @@
-/**
- * Vanilla renderer for the "list" widget.
- *
- * Mirrors ListBlock.svelte:
- *  - optional title
- *  - items rendered as <li> with Tailwind classes
- *  - double-click (and Enter/Space for a11y) dispatches a bubbling
- *    `widget:interact` CustomEvent with { action: 'itemclick', payload: { item, index } }
- */
-
-export interface ListBlockData {
-  title?: string;
-  items: string[];
-}
-
-type Cleanup = () => void;
-
-export function render(container: HTMLElement, data: Partial<ListBlockData>): Cleanup {
-  // Reset container
-  container.innerHTML = '';
-
-  const items = Array.isArray(data?.items) ? data!.items : [];
-  const title = typeof data?.title === 'string' ? data!.title : undefined;
-
-  const wrapper = document.createElement('div');
-  wrapper.className = 'p-3 md:p-4';
-
-  if (title) {
-    const titleEl = document.createElement('div');
-    titleEl.className =
-      'text-[10px] font-mono text-text2 mb-3 uppercase tracking-widest';
-    titleEl.textContent = title;
-    wrapper.appendChild(titleEl);
-  }
-
-  const ul = document.createElement('ul');
-  ul.className = 'flex flex-col gap-1.5';
-
-  // Track listeners for cleanup
-  const disposers: Array<() => void> = [];
-
-  items.forEach((item, i) => {
-    const li = document.createElement('li');
-    li.className =
-      'text-sm text-text1 bg-surface2 rounded px-3 py-2 border-l-2 border-accent cursor-pointer hover:bg-surface2/80';
-    li.title = 'Double-cliquez pour interagir';
-    li.textContent = String(item);
-
-    // a11y: make keyboard-interactive
-    li.setAttribute('role', 'button');
-    li.setAttribute('tabindex', '0');
-
-    const fire = () => {
-      container.dispatchEvent(
-        new CustomEvent('widget:interact', {
-          detail: { action: 'itemclick', payload: { item, index: i } },
-          bubbles: true,
-        })
-      );
-    };
-
-    const onDblClick = () => fire();
-    const onKeyDown = (ev: KeyboardEvent) => {
-      if (ev.key === 'Enter' || ev.key === ' ' || ev.key === 'Spacebar') {
-        ev.preventDefault();
-        fire();
-      }
-    };
-
-    li.addEventListener('dblclick', onDblClick);
-    li.addEventListener('keydown', onKeyDown);
-
-    disposers.push(() => {
-      li.removeEventListener('dblclick', onDblClick);
-      li.removeEventListener('keydown', onKeyDown);
-    });
-
-    ul.appendChild(li);
-  });
-
-  wrapper.appendChild(ul);
-  container.appendChild(wrapper);
-
-  return () => {
-    for (const d of disposers) d();
-    disposers.length = 0;
-    container.innerHTML = '';
-  };
-}

package/src/widgets/simple/stat.ts

@@ -1,58 +0,0 @@
-export interface StatBlockData {
-  label: string;
-  value: string;
-  trend?: string;
-  trendDir?: 'up' | 'down' | 'neutral';
-}
-
-/**
- * Vanilla renderer for the "stat" / StatBlock widget.
- *
- * Mounts a metric block (label + value + optional trend) into `container`.
- * Returns a cleanup function that clears the container.
- *
- * Contract:
- *  - Pure imperative DOM (no Svelte runes, no framework).
- *  - Emits no events by default (the Svelte original had none either) but keeps
- *    the standard `widget:interact` channel available via helper if ever needed.
- *  - Tailwind classes and CSS vars are preserved verbatim.
- */
-export function render(container: HTMLElement, data: any): () => void {
-  const d: Partial<StatBlockData> = (data && typeof data === 'object') ? data : {};
-
-  const trendDir = d.trendDir;
-  const trendColor =
-    trendDir === 'up' ? 'text-teal'
-    : trendDir === 'down' ? 'text-accent2'
-    : 'text-text2';
-  const trendArrow =
-    trendDir === 'up' ? '↑'
-    : trendDir === 'down' ? '↓'
-    : '→';
-
-  const root = document.createElement('div');
-  root.className = 'p-4 md:p-5';
-
-  const labelEl = document.createElement('div');
-  labelEl.className = 'text-[11px] font-mono text-text2 mb-1 uppercase tracking-widest';
-  labelEl.textContent = d.label ?? 'Metric';
-  root.appendChild(labelEl);
-
-  const valueEl = document.createElement('div');
-  valueEl.className = 'text-3xl md:text-4xl font-bold text-text1 leading-none';
-  valueEl.textContent = d.value ?? '—';
-  root.appendChild(valueEl);
-
-  if (d.trend) {
-    const trendEl = document.createElement('div');
-    trendEl.className = `text-xs font-mono mt-2 ${trendColor}`;
-    trendEl.textContent = `${trendArrow} ${d.trend}`;
-    root.appendChild(trendEl);
-  }
-
-  container.appendChild(root);
-
-  return () => {
-    container.innerHTML = '';
-  };
-}

package/src/widgets/simple/tags.ts

@@ -1,125 +0,0 @@
-/**
- * Vanilla renderer for the Tags widget.
- *
- * Mirrors the Svelte TagsBlock.svelte component but uses imperative DOM
- * manipulation so it can be mounted without a framework.
- *
- * Contract:
- *   render(container, data) -> cleanup()
- *
- * Data shape:
- *   { label?: string; tags: Array<{ text: string; active?: boolean }> }
- *
- * Events:
- *   Dispatches a bubbling `widget:interact` CustomEvent on the container
- *   when a tag is activated (click / Enter / Space) with:
- *     detail: { action: 'tag:toggle', payload: { index, text, active } }
- */
-
-export interface TagItem {
-  text: string;
-  active?: boolean;
-}
-
-export interface TagsBlockData {
-  label?: string;
-  tags: TagItem[];
-}
-
-type Cleanup = () => void;
-
-const WRAPPER_CLASS = 'p-3 md:p-4 flex gap-2 flex-wrap items-center';
-const LABEL_CLASS = 'text-[10px] font-mono text-text2';
-const TAG_BASE_CLASS =
-  'text-[11px] font-mono px-3 py-1 rounded-full border transition-colors';
-const TAG_ACTIVE_CLASS = 'border-teal text-teal bg-teal/10';
-const TAG_INACTIVE_CLASS = 'border-border2 text-text2';
-
-export function render(container: HTMLElement, data: any): Cleanup {
-  // Reset container
-  container.innerHTML = '';
-
-  const safeData: Partial<TagsBlockData> =
-    data && typeof data === 'object' ? data : {};
-  const tags: TagItem[] = Array.isArray(safeData.tags) ? safeData.tags : [];
-
-  const wrapper = document.createElement('div');
-  wrapper.className = WRAPPER_CLASS;
-  wrapper.setAttribute('role', 'group');
-  if (safeData.label) {
-    wrapper.setAttribute('aria-label', String(safeData.label));
-  }
-
-  if (safeData.label) {
-    const labelEl = document.createElement('span');
-    labelEl.className = LABEL_CLASS;
-    labelEl.textContent = String(safeData.label);
-    wrapper.appendChild(labelEl);
-  }
-
-  // Robustness: empty tags -> render nothing beyond (possibly) the label.
-  // If neither label nor tags, leave the wrapper empty silently.
-  const listeners: Array<{
-    el: HTMLElement;
-    type: string;
-    fn: EventListener;
-  }> = [];
-
-  tags.forEach((tag, index) => {
-    if (!tag || typeof tag !== 'object') return;
-    const text = tag.text == null ? '' : String(tag.text);
-    const active = Boolean(tag.active);
-
-    const chip = document.createElement('span');
-    chip.className = `${TAG_BASE_CLASS} ${active ? TAG_ACTIVE_CLASS : TAG_INACTIVE_CLASS}`;
-    chip.textContent = text;
-
-    // a11y + interactivity
-    chip.setAttribute('role', 'button');
-    chip.setAttribute('tabindex', '0');
-    chip.setAttribute('aria-pressed', active ? 'true' : 'false');
-    chip.dataset.index = String(index);
-
-    const emit = () => {
-      const ev = new CustomEvent('widget:interact', {
-        detail: {
-          action: 'tag:toggle',
-          payload: { index, text, active },
-        },
-        bubbles: true,
-      });
-      container.dispatchEvent(ev);
-    };
-
-    const onClick: EventListener = (e) => {
-      e.preventDefault();
-      emit();
-    };
-    const onKey: EventListener = (e) => {
-      const ke = e as KeyboardEvent;
-      if (ke.key === 'Enter' || ke.key === ' ') {
-        ke.preventDefault();
-        emit();
-      }
-    };
-
-    chip.addEventListener('click', onClick);
-    chip.addEventListener('keydown', onKey);
-    listeners.push({ el: chip, type: 'click', fn: onClick });
-    listeners.push({ el: chip, type: 'keydown', fn: onKey });
-
-    wrapper.appendChild(chip);
-  });
-
-  container.appendChild(wrapper);
-
-  return () => {
-    for (const { el, type, fn } of listeners) {
-      el.removeEventListener(type, fn);
-    }
-    listeners.length = 0;
-    container.innerHTML = '';
-  };
-}
-
-export default { render };