@webmcp-auto-ui/ui 2.5.32 → 2.5.33

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

@@ -0,0 +1,85 @@
+<svelte:options customElement={{ tag: 'auto-grid-data', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface GridDataColumn { key: string; label: string; width?: string; }
+  export interface GridDataHighlight { row: number; col: number; color?: string; }
+  export interface GridDataData {
+    title?: string;
+    columns?: GridDataColumn[];
+    rows?: unknown[][];
+    highlights?: GridDataHighlight[];
+    cellHeight?: number;
+  }
+
+  interface Props {
+    data?: GridDataData | null;
+    oncellclick?: (row: number, col: number, value: unknown) => void;
+  }
+
+  let { data = {}, oncellclick }: Props = $props();
+
+  const columns = $derived(Array.isArray(data?.columns) ? data!.columns as GridDataColumn[] : []);
+  const rows = $derived(Array.isArray(data?.rows) ? data!.rows as unknown[][] : []);
+  const cellH = $derived(data?.cellHeight ?? 32);
+
+  const hlMap = $derived.by(() => {
+    const m = new Map<string, string>();
+    if (Array.isArray(data?.highlights)) {
+      for (const h of data!.highlights as GridDataHighlight[]) {
+        m.set(`${h.row},${h.col}`, h.color ?? 'color-mix(in srgb, var(--color-accent) 20%, transparent)');
+      }
+    }
+    return m;
+  });
+
+  function bg(r: number, c: number): string {
+    return hlMap.get(`${r},${c}`) ?? '';
+  }
+
+  function dv(v: unknown): string {
+    if (v == null) return '';
+    if (typeof v === 'object') return JSON.stringify(v);
+    return String(v);
+  }
+</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 !columns.length && !rows.length}
+    <p class="text-text2 text-sm">No data</p>
+  {:else}
+    <div class="overflow-auto rounded border border-border">
+      <table class="w-full border-collapse text-xs font-mono" role="grid">
+        {#if columns.length}
+          <thead>
+            <tr>
+              {#each columns as col}
+                <th
+                  class="sticky top-0 bg-surface2 px-3 py-2 text-left text-text2 border-b border-r border-border whitespace-nowrap font-medium"
+                  style={col.width ? `width:${col.width}` : ''}
+                  scope="col"
+                >
+                  {col.label}
+                </th>
+              {/each}
+            </tr>
+          </thead>
+        {/if}
+        <tbody>
+          {#each rows as row, ri}
+            <tr class="hover:bg-surface2">
+              {#each (Array.isArray(row) ? row : []) as cell, ci}
+                <td
+                  class="px-3 text-text2 border-b border-r border-border {oncellclick ? 'cursor-pointer' : ''} hover:bg-surface2"
+                  style="height:{cellH}px;{bg(ri, ci) ? `background:${bg(ri, ci)};` : ''}"
+                  title={oncellclick ? 'Double-cliquez pour interagir' : undefined}
+                  ondblclick={() => oncellclick?.(ri, ci, cell)}
+                >{dv(cell)}</td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</div>

package/src/widgets/rich/hemicycle.svelte

@@ -0,0 +1,95 @@
+<svelte:options customElement={{ tag: 'auto-hemicycle', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface HemicycleGroup { id: string; label: string; seats: number; color: string; }
+  export interface HemicycleData {
+    title?: string;
+    groups?: HemicycleGroup[];
+    totalSeats?: number;
+    rows?: number;
+  }
+
+  interface Props {
+    data?: HemicycleData | null;
+    ongroupclick?: (g: HemicycleGroup) => void;
+  }
+  let { data = {}, ongroupclick }: Props = $props();
+
+  const groups = $derived<HemicycleGroup[]>(Array.isArray(data?.groups) ? data!.groups! : []);
+  const total = $derived(data?.totalSeats ?? groups.reduce((s, g) => s + g.seats, 0));
+
+  const W = 420, H = 230, cx = W / 2, cy = H - 10, rMin = 60, step = 28;
+  const rows = $derived(data?.rows ?? Math.min(Math.max(3, Math.ceil(Math.sqrt(total / 6))), 7));
+
+  interface Seat { x: number; y: number; color: string; gid: string }
+
+  const seats = $derived.by<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], 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;
+  });
+
+  const rMax = $derived(rMin + rows * step);
+  const legend = $derived([...groups].sort((a, b) => b.seats - a.seats));
+  let tooltip = $state<{ label: string; seats: number } | null>(null);
+</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 !groups.length || !total}<p class="text-text2 text-sm">No data</p>
+  {:else}
+    <div class="relative">
+      <svg viewBox="0 0 {W} {H}" class="block w-full max-h-[220px]" xmlns="http://www.w3.org/2000/svg">
+        <path d="M {cx - rMax - 15} {cy} A {rMax + 15} {rMax + 15} 0 0 1 {cx + rMax + 15} {cy}" fill="none" stroke="var(--color-surface2)" stroke-width="2"/>
+        {#each seats as s}
+          <!-- 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 -->
+          <circle cx={s.x.toFixed(1)} cy={s.y.toFixed(1)} r="4" fill={s.color} opacity="0.9"
+            class={s.gid ? 'cursor-pointer' : ''}
+            onmouseenter={() => { const g = groups.find(g => g.id === s.gid); if (g) tooltip = { label: g.label, seats: g.seats }; }}
+            onmouseleave={() => tooltip = null}
+            ondblclick={() => { const g = groups.find(g => g.id === s.gid); if (g) ongroupclick?.(g); }}>
+            {#if s.gid}<title>Double-click to interact</title>{/if}
+          </circle>
+        {/each}
+        <text x={cx} y={cy + 18} text-anchor="middle" font-size="11" fill="var(--color-text2)" font-family="system-ui">{total} seats</text>
+      </svg>
+      {#if tooltip}
+        <div class="absolute top-0 right-0 bg-surface2 border border-border2 rounded px-2 py-1 text-xs text-text1 pointer-events-none">
+          <span class="font-semibold">{tooltip.label}</span> — {tooltip.seats}
+        </div>
+      {/if}
+    </div>
+    <div class="flex flex-wrap gap-x-4 gap-y-1 mt-3">
+      {#each legend as g}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center gap-1.5 text-xs cursor-pointer hover:opacity-80" role="button" tabindex="0" title="Double-click to interact" ondblclick={() => ongroupclick?.(g)} onkeydown={(e) => { if (e.key === 'Enter') ongroupclick?.(g); }}>
+          <div class="w-3 h-3 rounded-full flex-shrink-0" style="background:{g.color};"></div>
+          <span class="text-text2">{g.label}</span>
+          <span class="text-text2">{g.seats}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,67 @@
+<svelte:options customElement={{ tag: 'auto-js-sandbox', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface JsSandboxData {
+    title?: string;
+    code?: string;
+    html?: string;
+    css?: string;
+    height?: string;
+  }
+
+  interface Props { data?: JsSandboxData | null; }
+  let { data = {} }: Props = $props();
+
+  /**
+   * Tolerate two shapes (fix f620091):
+   *   - bare spec: data = { code, html, css, title, height }
+   *   - wrapped:   data = { spec: { code, ... } }
+   * The cast handles the legacy wrapped shape defensively.
+   */
+  const resolved = $derived<JsSandboxData>(() => {
+    const d = data as Record<string, unknown> | null | undefined;
+    if (d && typeof d === 'object' && 'spec' in d && d.spec && typeof d.spec === 'object') {
+      return d.spec as JsSandboxData;
+    }
+    return (d as JsSandboxData) ?? {};
+  });
+
+  const srcdoc = $derived(`<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+*,*::before,*::after{box-sizing:border-box}
+body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:13px;}
+${resolved().css ?? ''}
+</style>
+</head>
+<body>
+<div id="root">${resolved().html ?? ''}</div>
+<script>
+(function(){
+try{
+${resolved().code ?? '// no code provided'}
+}catch(e){
+document.getElementById('root').innerHTML='<pre style="color:red;white-space:pre-wrap">'+e+'<\/pre>';
+}
+})();
+<\/script>
+</body>
+</html>`);
+</script>
+
+<div class="bg-surface border border-border rounded-lg overflow-hidden font-sans">
+  {#if resolved().title}
+    <div class="px-3 py-2 border-b border-border text-sm font-semibold text-text1 flex items-center gap-2">
+      <span class="text-xs opacity-50">JS</span>
+      {resolved().title}
+    </div>
+  {/if}
+  <iframe
+    {srcdoc}
+    sandbox="allow-scripts"
+    title={resolved().title ?? 'JS Sandbox'}
+    style="width:100%;height:{resolved().height ?? '300px'};border:none;display:block;"
+  ></iframe>
+</div>

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

@@ -0,0 +1,82 @@
+<svelte:options customElement={{ tag: 'auto-json-viewer', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface JsonViewerData {
+    title?: string;
+    data?: unknown;
+    maxDepth?: number;
+    expanded?: boolean;
+    theme?: 'dark' | 'light';
+  }
+
+  interface Props {
+    data?: JsonViewerData | null;
+  }
+
+  let { data = {} }: Props = $props();
+
+  const value = $derived(data?.data !== undefined ? data.data : undefined);
+  const maxDepth = $derived(data?.maxDepth ?? 5);
+  const expanded = $derived(data?.expanded !== false);
+</script>
+
+{#snippet node(val: unknown, depth: number, seen: WeakSet<object>)}
+  {#if val === null}
+    <span style="color:var(--color-text2)">null</span>
+  {:else if typeof val === 'boolean'}
+    <span style="color:#a855f7">{String(val)}</span>
+  {:else if typeof val === 'number'}
+    <span style="color:var(--color-amber)">{val}</span>
+  {:else if typeof val === 'string'}
+    <span style="color:var(--color-teal)">"{val}"</span>
+  {:else if Array.isArray(val)}
+    {#if depth >= maxDepth}
+      <span class="text-text2">[Array({val.length})]</span>
+    {:else if seen.has(val)}
+      <span class="text-text2 italic">[Circular]</span>
+    {:else}
+      {@const nextSeen = (seen.add(val), seen)}
+      <details open={expanded && depth < 2}>
+        <summary class="cursor-pointer text-text2 hover:text-text1 select-none">Array({val.length})</summary>
+        <div class="ml-4 border-l border-border pl-3 mt-0.5">
+          {#each val as item, i}
+            <div class="py-0.5">
+              <span class="text-text2 text-xs mr-1">{i}:</span>{@render node(item, depth + 1, nextSeen)}
+            </div>
+          {/each}
+        </div>
+      </details>
+    {/if}
+  {:else if typeof val === 'object'}
+    {#if depth >= maxDepth}
+      <span class="text-text2">{`{Object(${Object.keys(val as object).length})}`}</span>
+    {:else if seen.has(val as object)}
+      <span class="text-text2 italic">[Circular]</span>
+    {:else}
+      {@const nextSeen = ((seen as WeakSet<object>).add(val as object), seen)}
+      <details open={expanded && depth < 2}>
+        <summary class="cursor-pointer text-text2 hover:text-text1 select-none">{`{${Object.keys(val as object).length}}`}</summary>
+        <div class="ml-4 border-l border-border pl-3 mt-0.5">
+          {#each Object.entries(val as Record<string, unknown>) as [k, v]}
+            <div class="py-0.5">
+              <span class="text-accent mr-1">"{k}":</span>{@render node(v, depth + 1, nextSeen)}
+            </div>
+          {/each}
+        </div>
+      </details>
+    {/if}
+  {:else}
+    <span class="text-text2">{String(val)}</span>
+  {/if}
+{/snippet}
+
+<div class="bg-bg border border-border rounded-lg p-3 md:p-4 font-mono text-xs leading-5 text-text1">
+  {#if data?.title}
+    <div class="font-sans text-sm font-semibold text-text1 mb-3">{data.title}</div>
+  {/if}
+  {#if value === undefined}
+    <span class="text-text2">undefined</span>
+  {:else}
+    {@render node(value, 0, new WeakSet())}
+  {/if}
+</div>

package/src/widgets/rich/log.svelte

@@ -0,0 +1,62 @@
+<svelte:options customElement={{ tag: 'auto-log', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface LogEntry {
+    timestamp?: string;
+    level?: 'debug' | 'info' | 'warn' | 'error';
+    message: string;
+    source?: string;
+  }
+
+  export interface LogData {
+    title?: string;
+    entries?: LogEntry[];
+    maxHeight?: string;
+  }
+
+  interface Props { data?: LogData | null; }
+  let { data = {} }: Props = $props();
+
+  const LEVEL: Record<string, string> = {
+    debug: 'text-text2',
+    info: 'text-teal',
+    warn: 'text-amber',
+    error: 'text-accent2',
+  };
+
+  const entries = $derived<LogEntry[]>(
+    Array.isArray(data?.entries) && data!.entries!.length ? data!.entries! : []
+  );
+</script>
+
+<div class="bg-bg border border-border rounded-lg font-mono">
+  {#if data?.title}
+    <div class="px-4 py-2 border-b border-border text-xs text-text2">{data.title}</div>
+  {/if}
+  <div
+    class="overflow-y-auto text-xs leading-5 p-3 flex flex-col gap-0.5"
+    style="max-height:{data?.maxHeight ?? '320px'};"
+    role="log"
+    aria-live="polite"
+    aria-label={data?.title ?? 'Journal'}
+  >
+    {#if !entries.length}
+      <span class="text-text2">No log entries</span>
+    {:else}
+      {#each entries as e}
+        <div class="flex gap-2 items-start hover:bg-surface2 px-1 rounded">
+          {#if e.timestamp}
+            <span class="text-text2 flex-shrink-0">{e.timestamp}</span>
+          {/if}
+          <span class="flex-shrink-0 uppercase text-[10px] font-semibold w-10 {LEVEL[e.level ?? 'info'] ?? LEVEL.info}">
+            {e.level ?? 'info'}
+          </span>
+          {#if e.source}
+            <span class="text-text2 flex-shrink-0">[{e.source}]</span>
+          {/if}
+          <span class="text-text1 break-all">{e.message}</span>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>

package/src/widgets/rich/profile.svelte

@@ -0,0 +1,91 @@
+<svelte:options customElement={{ tag: 'auto-profile', shadow: 'none' }} />
+
+<script lang="ts">
+  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'; onclick?: () => void; }
+  export interface ProfileData {
+    name?: string;
+    subtitle?: string;
+    avatar?: { src: string; alt?: string };
+    badge?: { text: string; variant?: 'default' | 'success' | 'warning' | 'error' };
+    fields?: ProfileField[];
+    stats?: ProfileStat[];
+    actions?: ProfileAction[];
+  }
+
+  interface Props { data?: ProfileData | null; }
+  let { data = {} }: Props = $props();
+
+  const VALID_PREFIXES = ['http://', 'https://', 'data:', '/'];
+
+  /** Track if avatar failed to load — fall back to initials */
+  let avatarFailed = $state(false);
+  $effect(() => { if (data?.avatar?.src) avatarFailed = false; });
+
+  const avatarValid = $derived(
+    !!data?.avatar?.src && VALID_PREFIXES.some(p => data!.avatar!.src.startsWith(p))
+  );
+
+  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',
+  };
+
+  const initials = $derived(
+    (data?.name ?? '?').split(/\s+/).slice(0, 2).map((w: string) => w[0] ?? '').join('').toUpperCase() || '?'
+  );
+</script>
+
+<div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans max-w-full md:max-w-[480px]">
+  <div class="flex flex-col sm:flex-row items-center sm:items-start mb-4 gap-3 sm:gap-4">
+    {#if avatarValid && !avatarFailed}
+      <img src={data?.avatar?.src} alt={data?.avatar?.alt ?? ''} class="w-16 h-16 rounded-full object-cover border-2 border-border2 flex-shrink-0" onerror={() => { avatarFailed = true; }} />
+    {:else}
+      <div class="w-16 h-16 rounded-full bg-accent text-white flex items-center justify-center text-xl font-bold flex-shrink-0">{initials}</div>
+    {/if}
+    <div>
+      <h3 class="text-lg font-bold text-text1 m-0">{data?.name ?? ''}</h3>
+      {#if data?.subtitle}<div class="text-sm text-text2 mt-0.5">{data.subtitle}</div>{/if}
+      {#if data?.badge}<div class="mt-1"><span class="text-xs font-semibold px-2 py-0.5 rounded-full {BADGE[data.badge.variant ?? 'default'] ?? BADGE.default}">{data.badge.text}</span></div>{/if}
+    </div>
+  </div>
+  {#if data?.fields?.length}
+    <dl class="border-t border-border pt-3 m-0">
+      {#each data.fields as f}
+        <div class="flex gap-2 mb-1.5">
+          <dt class="text-xs text-text2 min-w-[80px] sm:min-w-[100px] font-mono">{f.label}</dt>
+          <dd class="text-sm text-text1 m-0">{#if f.href}<a href={f.href} class="text-accent hover:underline">{f.value}</a>{:else}{f.value}{/if}</dd>
+        </div>
+      {/each}
+    </dl>
+  {/if}
+  {#if data?.stats?.length}
+    <div class="flex flex-wrap border border-border rounded overflow-hidden mt-3">
+      {#each data.stats as s}
+        <div class="text-center px-4 py-2 border-r border-border last:border-r-0 flex-1 min-w-[80px]">
+          <div class="text-xl font-bold text-accent">{s.value}</div>
+          <div class="text-xs text-text2">{s.label}</div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+  {#if data?.actions?.length}
+    <div class="flex gap-2 mt-3 flex-wrap">
+      {#each data.actions as a}
+        {#if a.href}
+          <a href={a.href} class="inline-flex items-center px-3.5 py-1.5 rounded text-xs font-semibold no-underline {ACTION[a.variant ?? 'secondary'] ?? ACTION.secondary}">{a.label}</a>
+        {:else}
+          <button class="inline-flex items-center px-3.5 py-1.5 rounded text-xs font-semibold border-0 cursor-pointer {ACTION[a.variant ?? 'secondary'] ?? ACTION.secondary}" onclick={a.onclick}>{a.label}</button>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/widgets/rich/sankey.svelte

@@ -0,0 +1,73 @@
+<svelte:options customElement={{ tag: 'auto-sankey', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface SankeyNode { id: string; label: string; color?: string; summary?: string; }
+  export interface SankeyLink { source: string; target: string; value: number; label?: string; }
+  export interface SankeyData {
+    title?: string;
+    nodes?: SankeyNode[];
+    links?: SankeyLink[];
+  }
+
+  interface Props {
+    data?: SankeyData | null;
+    onnodeclick?: (n: SankeyNode) => void;
+    onlinkclick?: (l: SankeyLink) => void;
+  }
+  let { data = {}, onnodeclick, onlinkclick }: Props = $props();
+
+  let host: HTMLElement | undefined = $state();
+
+  const nodes = $derived<SankeyNode[]>(Array.isArray(data?.nodes) ? data!.nodes! : []);
+  const links = $derived<SankeyLink[]>(Array.isArray(data?.links) ? data!.links! : []);
+  const nodeMap = $derived(new Map(nodes.map(n => [n.id, n])));
+  const maxVal = $derived(Math.max(...links.map(l => l.value), 1));
+  const sorted = $derived([...links].sort((a, b) => b.value - a.value));
+
+  function dispatchNodeDblclick(node: SankeyNode | undefined) {
+    if (!node || !host) return;
+    // Fix(audit): emit widget:interact { action: 'node-dblclick' } — not the orphan widget:node-dblclick event
+    host.dispatchEvent(new CustomEvent('widget:interact', {
+      detail: { action: 'node-dblclick', payload: node },
+      bubbles: true,
+    }));
+  }
+</script>
+
+<div bind:this={host} 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 !nodes.length || !links.length}<p class="text-text2 text-sm">No flow data</p>
+  {:else}
+    <div class="text-xs text-text2 mb-2 font-mono">{nodes.length} nodes · {links.length} flows</div>
+    <div class="flex flex-col gap-1.5">
+      {#each sorted as link}
+        {@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))}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center gap-2 text-xs cursor-pointer hover:opacity-80 transition-opacity" role="button" tabindex="0" onclick={() => onlinkclick?.(link)} onkeydown={(e) => { if (e.key === 'Enter') onlinkclick?.(link); }}>
+          <span
+            class="text-text2 min-w-[80px] truncate font-mono"
+            style="color:{sc};"
+            title={src?.summary ?? src?.label ?? link.source}
+            ondblclick={(e) => { e.stopPropagation(); dispatchNodeDblclick(src); onnodeclick?.(src!); }}
+          >{src?.label ?? link.source}</span>
+          <div class="flex-1 bg-surface2 rounded-full overflow-hidden" style="height:{barH}px;">
+            <div class="rounded-full h-full" style="width:{pct}%;background:linear-gradient(to right,{sc},{tc});"></div>
+          </div>
+          <span
+            class="text-text2 min-w-[80px] truncate text-right font-mono"
+            style="color:{tc};"
+            title={tgt?.summary ?? tgt?.label ?? link.target}
+            ondblclick={(e) => { e.stopPropagation(); dispatchNodeDblclick(tgt); onnodeclick?.(tgt!); }}
+          >{tgt?.label ?? link.target}</span>
+          <span class="text-text2 min-w-[40px] text-right font-mono">{link.value}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,60 @@
+<svelte:options customElement={{ tag: 'auto-stat-card', shadow: 'none' }} />
+
+<script lang="ts">
+  export interface StatCardTrend { direction: 'up' | 'down' | 'flat'; value?: string; positive?: boolean; }
+  export interface StatCardData {
+    label?: string;
+    value?: unknown;
+    unit?: string;
+    delta?: string;
+    trend?: 'up' | 'down' | 'flat' | StatCardTrend;
+    previousValue?: unknown;
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+  }
+
+  interface Props { data?: StatCardData | null; }
+  let { data = {} }: Props = $props();
+
+  const COLORS: Record<string, string> = {
+    default: 'var(--color-accent)',
+    success: 'var(--color-teal)',
+    warning: 'var(--color-amber)',
+    error: 'var(--color-accent2)',
+    info: '#3b82f6',
+  };
+
+  const accent = $derived(COLORS[data?.variant ?? 'default'] ?? 'var(--color-accent)');
+
+  const trendInfo = $derived(() => {
+    const t = data?.trend;
+    if (!t) return null;
+    if (typeof t === 'string') {
+      const arr = t === 'up' ? '↑' : t === 'down' ? '↓' : '→';
+      const col = t === 'up' ? 'var(--color-teal)' : t === 'flat' ? 'var(--color-text2)' : 'var(--color-accent2)';
+      return { arrow: arr, val: data?.delta ?? '', color: col };
+    }
+    const positive = t.positive ?? t.direction === 'up';
+    return {
+      arrow: t.direction === 'up' ? '↑' : t.direction === 'down' ? '↓' : '→',
+      val: t.value ?? '',
+      color: positive ? 'var(--color-teal)' : t.direction === 'flat' ? 'var(--color-text2)' : 'var(--color-accent2)',
+    };
+  });
+</script>
+
+<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};">
+  <div class="text-center py-2">
+    <div class="text-xs font-mono text-text2 uppercase tracking-widest mb-2">{data?.label ?? ''}</div>
+    <div class="text-3xl md:text-4xl font-bold leading-none" style="color:{accent};">
+      {data?.value ?? '—'}{#if data?.unit}<span class="text-base text-text2 ml-1">{data.unit}</span>{/if}
+    </div>
+    {#if trendInfo()}
+      {@const t = trendInfo()!}
+      <div class="flex items-center gap-1 justify-center mt-1">
+        <span class="text-base font-bold" style="color:{t.color};">{t.arrow}</span>
+        {#if t.val}<span class="text-sm font-semibold" style="color:{t.color};">{t.val}</span>{/if}
+      </div>
+    {/if}
+    {#if data?.previousValue !== undefined}<div class="text-xs text-text2 mt-1">prev: {data.previousValue}</div>{/if}
+  </div>
+</div>