@webmcp-auto-ui/ui 2.5.31 → 2.5.33

package/src/widgets/notebook/left-pane.ts

@@ -7,7 +7,7 @@
 // ---------------------------------------------------------------------------
 
 import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
-import { openRecipeViewerModal, openToolViewerModal, type ImportedRecipe } from './import-modals.js';
+import { openRecipeViewerModal, openToolViewerModal, type ImportedRecipe } from './import-modal-api.js';
 import type { NotebookCell, NotebookState, DataServerDescriptor } from './shared.js';
 
 export interface LeftPaneHandlers {

package/src/widgets/notebook/notebook.svelte

@@ -0,0 +1,75 @@
+<svelte:options customElement={{ tag: 'auto-notebook', shadow: 'none' }} />
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+
+  // ---------------------------------------------------------------------------
+  // Types (mirror shared.ts without importing it — avoids circular deps)
+  // ---------------------------------------------------------------------------
+
+  export interface NotebookCell {
+    id: string;
+    type: 'md' | 'sql' | 'js';
+    content: string;
+    status?: 'idle' | 'running' | 'done' | 'error' | 'stale';
+    hideSource?: boolean;
+    hideResult?: boolean;
+    lastResult?: unknown;
+    lastMs?: number;
+  }
+
+  export interface NotebookData {
+    id?: string;
+    title?: string;
+    kicker?: string;
+    mode?: 'edit' | 'view';
+    autoRun?: boolean;
+    hideLiveToggle?: boolean;
+    cells?: NotebookCell[];
+    /** MCP servers for SQL execution (array of {name, url}) */
+    servers?: Array<{ name: string; url?: string }>;
+    /** Legacy flat field — also accepted */
+    mcpUrl?: string;
+  }
+
+  interface Props {
+    data?: NotebookData | null;
+  }
+
+  let { data = null }: Props = $props();
+
+  // ---------------------------------------------------------------------------
+  // DOM ref and vanilla cleanup
+  // ---------------------------------------------------------------------------
+
+  let container: HTMLDivElement;
+  let cleanup: (() => void) | null = null;
+
+  // ---------------------------------------------------------------------------
+  // Mount / unmount
+  // ---------------------------------------------------------------------------
+
+  onMount(async () => {
+    if (!container) return;
+
+    // Lazy-import to avoid pulling 900 lines into the Svelte bundle at parse time.
+    const { render } = await import('./notebook.js');
+
+    const plainData: Record<string, unknown> = data
+      ? (data as Record<string, unknown>)
+      : {};
+
+    cleanup = await render(container, plainData);
+  });
+
+  onDestroy(() => {
+    cleanup?.();
+    cleanup = null;
+  });
+</script>
+
+<!--
+  The vanilla render() writes directly into this div.
+  No Svelte template content needed — the notebook manages its own DOM.
+-->
+<div bind:this={container}></div>

package/src/widgets/notebook/notebook.ts

@@ -11,7 +11,7 @@ import {
   addImportedCells, registerExecutor, collectDataServers,
   autosize, openShareModal, registerHistoryObserver,
   renderCellLogs,
-  createPublishControls, autoConnectFrontmatterServers, bootstrapMcpBridge,
+  createPublishControls, autoConnectFrontmatterServers,
   createRuntimeOverlay, effectiveResult, cellRuntimeStatus,
   lastRefreshedAt, bootstrapLiveRefresh, fmtRelTime, preserveScrollAround,
   type NotebookState, type NotebookCell, type CellResult, type CellExecContext,
@@ -20,10 +20,11 @@ import {
 import { renderChart } from './chart-renderer.js';
 import { dispatchShare } from './share-handlers.js';
 import { renderProse, mountEditableProse } from './prose.js';
-import { openAddMdModal, openAddRecipeModal } from './import-modals.js';
+import { openAddMdModal, openAddRecipeModal } from './import-modal-api.js';
 import { extractCellsFromRecipe, extractCellFromMarkdown } from './resource-extractor.js';
 import { mountLeftPane } from './left-pane.js';
-import { callToolViaPostMessage, MultiMcpBridge } from '@webmcp-auto-ui/core';
+import { highlightCode } from '../../primitives/markdown-renderer.js';
+import { createSqlExecutor } from './executors/sql.js';
 
 export async function render(container: HTMLElement, data: Record<string, unknown>): Promise<() => void> {
   injectStyles();
@@ -45,7 +46,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
 
   // --- register executors -------------------------------------------------
   registerExecutor(state, 'js', jsExecutor);
-  registerExecutor(state, 'sql', makeSqlExecutor(data));
+  registerExecutor(state, 'sql', createSqlExecutor(() => collectDataServers(data)));
 
   container.classList.add('nb-root');
   container.classList.toggle('nb-view-mode', state.mode === 'view');
@@ -170,15 +171,21 @@ export async function render(container: HTMLElement, data: Record<string, unknow
       state,
       data,
       overlay,
-      MultiMcpBridgeCtor: MultiMcpBridge as any,
       onCellChange: (cellId) => {
         const node = cellsEl.querySelector(`[data-id="${cellId}"]`) as HTMLElement | null;
-        if (!node) { renderCells(); return; }
+        if (!node) {
+          const restore = preserveScrollAround(cellsEl);
+          renderCells();
+          restore();
+          return;
+        }
         const idx = state.cells.findIndex((c) => c.id === cellId);
         if (idx < 0) return;
+        const restore = preserveScrollAround(cellsEl);
         const fresh = renderCell(state.cells[idx], state, overlay, rerender);
         fresh.addEventListener('focusin', () => { lastActiveIdx = idx; });
         node.replaceWith(fresh);
+        restore();
       },
       onTick: () => {
         renderLiveBadge();
@@ -286,13 +293,10 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     },
   });
 
-  // Auto-connect data servers declared in the recipe frontmatter (data.servers)
+  // Auto-connect data servers declared in the recipe frontmatter (data.servers).
+  // The notebook reads MCP state passively from globalThis.__multiMcp (singleton).
   autoConnectFrontmatterServers(data, () => pane.setServers(collectDataServers(data)));
 
-  // Start a persistent MCP bridge so the sql executor can find tools in edit mode
-  // too (not just when live-refresh is running in view mode).
-  const mcpBridgeCleanup = bootstrapMcpBridge({ data, MultiMcpBridgeCtor: MultiMcpBridge as any });
-
   // Keep pane servers in sync with canvas changes
   let canvasUnsub: (() => void) | null = null;
   try {
@@ -319,7 +323,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     pane.destroy();
     publishCleanup();
     liveCleanup?.();
-    mcpBridgeCleanup();
   };
 }
 
@@ -361,54 +364,6 @@ async function jsExecutor(ctx: CellExecContext): Promise<CellResult> {
   }
 }
 
-function makeSqlExecutor(data: Record<string, unknown>) {
-  return async function sqlExecutor(ctx: CellExecContext): Promise<CellResult> {
-    const start = Date.now();
-    const sql = ctx.cell.content;
-    const servers = collectDataServers(data);
-    const candidates: string[] = [];
-    for (const srv of servers) {
-      for (const t of srv.tools ?? []) candidates.push(t.name);
-    }
-    const precise = candidates.find((n) => /^.*query_sql$/i.test(n));
-    const loose = precise ?? candidates.find((n) => /^(query|run|execute)(_sql)?$/i.test(n));
-    const toolName = precise ?? loose;
-    if (!toolName) {
-      return {
-        ok: false,
-        error: 'No SQL tool available on connected servers (looked for *query_sql or query/run/execute).',
-        errorKind: 'schema',
-        durationMs: Date.now() - start,
-      };
-    }
-    try {
-      const res: any = await callToolViaPostMessage(toolName, { sql });
-      const text = res?.content?.find?.((c: any) => c.type === 'text')?.text ?? '';
-      const durationMs = Date.now() - start;
-      let parsed: any = null;
-      try { parsed = JSON.parse(text); } catch { /* not JSON */ }
-      if (parsed) {
-        const rows: any[] = Array.isArray(parsed) ? parsed
-          : Array.isArray(parsed?.rows) ? parsed.rows
-          : Array.isArray(parsed?.data) ? parsed.data
-          : Array.isArray(parsed?.results) ? parsed.results
-          : [];
-        if (rows.length && rows.every((r) => r && typeof r === 'object')) {
-          const columns = Array.isArray(parsed?.columns)
-            ? parsed.columns.map(String)
-            : Array.from(new Set(rows.flatMap((r) => Object.keys(r))));
-          return { ok: true, kind: 'table', rows, columns, rowCount: rows.length, durationMs };
-        }
-        return { ok: true, kind: 'value', value: parsed, durationMs };
-      }
-      if (!text) return { ok: true, kind: 'empty', durationMs };
-      return { ok: true, kind: 'value', value: text, durationMs };
-    } catch (err: any) {
-      return { ok: false, error: String(err?.message ?? err), errorKind: 'runtime', durationMs: Date.now() - start };
-    }
-  };
-}
-
 // ---------------------------------------------------------------------------
 // Cell rendering — prose + code share the unified flow, same DnD handle
 // ---------------------------------------------------------------------------
@@ -482,15 +437,25 @@ function renderCell(cell: NotebookCell, state: NotebookState, overlay: RuntimeOv
 
   const body = document.createElement('div');
   body.className = 'nbe-code-body' + (cell.hideSource ? ' nbe-hidden' : '');
-  const ta = document.createElement('textarea');
-  ta.className = 'nb-code-edit';
-  ta.value = cell.content;
-  ta.rows = 1;
-  ta.spellcheck = false;
-  ta.addEventListener('input', () => { cell.content = ta.value; autosize(ta); cell.status = 'stale'; });
-  body.appendChild(ta);
+  if (state.mode === 'view') {
+    const lang = cell.type === 'js' ? 'javascript' : cell.type;
+    const pre = document.createElement('pre');
+    pre.className = 'hljs-pre nb-code-view';
+    pre.innerHTML = `<code class="hljs language-${lang}">${highlightCode(cell.content, lang)}</code>`;
+    body.appendChild(pre);
+  } else {
+    const ta = document.createElement('textarea');
+    ta.className = 'nb-code-edit';
+    ta.value = cell.content;
+    ta.rows = 1;
+    ta.spellcheck = false;
+    ta.addEventListener('input', () => { cell.content = ta.value; autosize(ta); cell.status = 'stale'; });
+    body.appendChild(ta);
+    requestAnimationFrame(() => requestAnimationFrame(() => autosize(ta)));
+    const ro = new ResizeObserver(() => autosize(ta));
+    ro.observe(ta);
+  }
   codeCell.appendChild(body);
-  requestAnimationFrame(() => requestAnimationFrame(() => autosize(ta)));
 
   if (!cell.hideResult) {
     const res = document.createElement('div');
@@ -669,7 +634,7 @@ function injectLayoutStyles(): void {
 .nbe-kicker-input:focus { border-color: var(--color-border); background: var(--color-bg); color: var(--color-text1); }
 .nb-root.nb-view-mode .nbe-kicker-input { pointer-events: none; }
 .nbe-title {
-  font-family: 'EB Garamond', Georgia, serif;
+  font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
   font-size: 30px; font-weight: 500;
   margin: 0 0 12px;
   letter-spacing: -0.01em; line-height: 1.2;
@@ -691,7 +656,7 @@ function injectLayoutStyles(): void {
 .nbe-del-abs:hover { opacity: 1 !important; }
 
 .nbe-prose {
-  font-family: 'EB Garamond', Georgia, serif;
+  font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
   font-size: 17px; line-height: 1.7;
   color: var(--color-text1);
   max-width: 620px;
@@ -700,7 +665,7 @@ function injectLayoutStyles(): void {
 }
 .nbe-prose-render h1, .nbe-prose-render h2, .nbe-prose-render h3,
 .nbe-prose-render h4, .nbe-prose-render h5, .nbe-prose-render h6 {
-  font-family: 'EB Garamond', Georgia, serif;
+  font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
   font-weight: 600; letter-spacing: -0.01em;
   margin: 0.6em 0 0.3em;
 }
@@ -788,7 +753,7 @@ function injectLayoutStyles(): void {
   font-variant-numeric: tabular-nums;
 }
 .nbe-result-table thead th {
-  font-family: 'EB Garamond', Georgia, serif;
+  font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
   font-size: 12.5px; font-weight: 600;
   letter-spacing: 0.02em;
   color: var(--color-text2);
@@ -921,7 +886,7 @@ function injectLayoutStyles(): void {
 .nb-empty-icon { font-size: 22px; line-height: 1; }
 .nb-empty-body { flex: 1; min-width: 0; }
 .nb-empty-title {
-  font-family: 'EB Garamond', Georgia, serif;
+  font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
   font-weight: 600; font-size: 14px; color: var(--color-text1);
 }
 .nb-empty-desc {

package/src/widgets/notebook/prose.ts

@@ -5,6 +5,8 @@
 // No external dependencies.
 // ---------------------------------------------------------------------------
 
+import { highlightCode } from '../../primitives/markdown-renderer.js';
+
 const BLOCK_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'hr', 'br']);
 const INLINE_TAGS = new Set(['strong', 'em', 'code', 'a', 'mark', 's', 'u']);
 const ALLOWED_TAGS = new Set([...BLOCK_TAGS, ...INLINE_TAGS]);
@@ -88,8 +90,9 @@ export function renderProse(content: string): string {
         i++;
       }
       i++; // skip closing fence
-      const cls = lang ? ` class="language-${escapeHtml(lang)}"` : '';
-      out.push(`<pre><code${cls}>${escapeHtml(code.join('\n'))}</code></pre>`);
+      const langKey = (lang || 'plaintext').toLowerCase();
+      const highlighted = highlightCode(code.join('\n'), langKey);
+      out.push(`<pre class="hljs-pre"><code class="hljs language-${escapeHtml(langKey)}">${highlighted}</code></pre>`);
       continue;
     }
 
@@ -601,7 +604,7 @@ export function renderMarkdownWithInjectButtons(
           <span class="nb-md-fence-lang">${escapeHtml(lang)}</span>
           <button type="button" class="nb-md-fence-inject">↳ inject</button>
         </div>
-        <pre><code class="language-${escapeHtml(lang)}">${escapeHtml(content)}</code></pre>
+        <pre class="hljs-pre"><code class="hljs language-${escapeHtml(lang)}">${highlightCode(content, lang)}</code></pre>
       `;
       const btn = block.querySelector('.nb-md-fence-inject') as HTMLButtonElement;
       const handler = () => onInject({ lang, content });

package/src/widgets/notebook/shared.ts

@@ -4,6 +4,8 @@
 // Used by the four notebook layout renderers (compact/workspace/document/editorial)
 // ---------------------------------------------------------------------------
 
+import { installMultiMcpBridge } from '@webmcp-auto-ui/core';
+
 export const NB_PUBLISH_HOST: string = (() => {
   try {
     const override = (import.meta as any)?.env?.PUBLIC_NB_HOST;
@@ -409,35 +411,30 @@ export function createBridgeSqlRunner(bridge: {
  * a bridge-backed runner, fire runAutoRefresh. Safe to call from any layout at
  * mount time when `state.autoRun && state.mode === 'view'`. Returns a cleanup.
  *
- * `MultiMcpBridgeCtor` is injected (via dynamic import from @webmcp-auto-ui/core
- * by the caller) to keep this file free of a hard import cycle.
+ * Reuses the global singleton bridge on `globalThis.__multiMcp` (installed via
+ * `installMultiMcpBridge` from @webmcp-auto-ui/core) — never creates a parallel
+ * bridge. If no singleton exists yet we install it here, and only the installer
+ * is allowed to stop it on cleanup.
  */
 export interface BootstrapLiveRefreshOptions {
   state: NotebookState;
   data: Record<string, unknown>;
   overlay: RuntimeOverlay;
-  MultiMcpBridgeCtor: new (opts: { getCanvas: () => unknown }) => {
-    start(): void;
-    stop(): void;
-    waitForEnabledServers(timeoutMs?: number): Promise<void>;
-    connectedServers(): string[];
-    hasServer(name: string): boolean;
-    callTool(serverName: string, toolName: string, args: unknown): Promise<unknown>;
-    multiClient: unknown;
-  };
   onCellChange?: (cellId: string) => void;
   onTick?: (overlay: RuntimeOverlay) => void;
   timeoutMs?: number;
 }
 
 export function bootstrapLiveRefresh(opts: BootstrapLiveRefreshOptions): () => void {
-  const { state, data, overlay, MultiMcpBridgeCtor, onCellChange, onTick, timeoutMs } = opts;
+  const { state, data, overlay, onCellChange, onTick, timeoutMs } = opts;
   const ac = new AbortController();
+  let weCreatedBridge = false;
+  let bridgeRef: any = null;
 
   void (async () => {
     try {
       autoConnectFrontmatterServers(data);
-      const canvas: unknown = (globalThis as { __canvasVanilla?: unknown; canvasVanilla?: unknown })
+      const canvas: any = (globalThis as { __canvasVanilla?: unknown; canvasVanilla?: unknown })
         .__canvasVanilla ?? (globalThis as { canvasVanilla?: unknown }).canvasVanilla;
       if (!canvas) {
         overlay.error = 'No canvas available';
@@ -445,8 +442,12 @@ export function bootstrapLiveRefresh(opts: BootstrapLiveRefreshOptions): () => v
         onTick?.(overlay);
         return;
       }
-      const bridge = new MultiMcpBridgeCtor({ getCanvas: () => canvas });
-      bridge.start();
+      const existing = (globalThis as any).__multiMcp;
+      const bridge = existing ?? installMultiMcpBridge({ getCanvas: () => canvas });
+      weCreatedBridge = !existing;
+      bridgeRef = bridge;
+      // `installMultiMcpBridge` already starts the bridge; a pre-existing
+      // singleton is assumed to be running.
       await bridge.waitForEnabledServers(timeoutMs ?? 5000);
 
       const runner = createBridgeSqlRunner(bridge, () => {
@@ -463,7 +464,16 @@ export function bootstrapLiveRefresh(opts: BootstrapLiveRefreshOptions): () => v
     }
   })();
 
-  return () => { ac.abort(); };
+  return () => {
+    ac.abort();
+    if (weCreatedBridge && bridgeRef && typeof bridgeRef.stop === 'function') {
+      try { bridgeRef.stop(); } catch { /* ignore */ }
+      try {
+        const g: any = globalThis as any;
+        if (g.__multiMcp === bridgeRef) g.__multiMcp = undefined;
+      } catch { /* ignore */ }
+    }
+  };
 }
 
 export function registerExecutor(state: NotebookState, type: CellType, fn: CellExecutor): void {
@@ -855,35 +865,6 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
   };
 }
 
-/**
- * Start a persistent MCP bridge that connects declared data servers and keeps
- * their tool/recipe metadata populated on the canvas store. Independent of
- * live-refresh — this runs even in edit mode, so the sql executor can discover
- * `*_query_sql` tools as soon as the bridge is connected.
- *
- * Returns a cleanup function. Caller is expected to start this once at mount
- * and call cleanup on unmount.
- */
-export function bootstrapMcpBridge(opts: {
-  data: Record<string, unknown>;
-  MultiMcpBridgeCtor: new (opts: { getCanvas: () => unknown }) => {
-    start(): void;
-    stop(): void;
-  };
-}): () => void {
-  try {
-    autoConnectFrontmatterServers(opts.data);
-    const canvas: unknown = (globalThis as { __canvasVanilla?: unknown; canvasVanilla?: unknown })
-      .__canvasVanilla ?? (globalThis as { canvasVanilla?: unknown }).canvasVanilla;
-    if (!canvas) return () => { /* no-op */ };
-    const bridge = new opts.MultiMcpBridgeCtor({ getCanvas: () => canvas });
-    bridge.start();
-    return () => { try { bridge.stop(); } catch { /* ignore */ } };
-  } catch {
-    return () => { /* no-op */ };
-  }
-}
-
 /**
  * Auto-connect any data servers declared in recipe frontmatter (`data.servers`)
  * to the shared canvas store. No-op / no-throw if the canvas store is absent.
@@ -906,7 +887,10 @@ export function autoConnectFrontmatterServers(
       if (existing) {
         if (existing.enabled === false) canvas.setDataServerEnabled?.(name, true);
       } else {
-        canvas.addDataServer({ name: String(name), url: url ? String(url) : undefined });
+        // Never register a server without a URL — downstream connect logic
+        // requires it and would silently fail otherwise.
+        if (!url) continue;
+        canvas.addDataServer({ name: String(name), url: String(url) });
       }
     }
     refresh?.();
@@ -1391,6 +1375,31 @@ textarea.nb-md-edit {
   background: none; border: none; padding: 0; text-decoration: underline;
 }
 .nb-undo-toast-undo:hover { filter: brightness(1.15); }
+
+/* ─── Syntax highlighting (highlight.js tokens, app-palette-driven) ─── */
+pre.hljs-pre {
+  background: var(--color-surface2);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 12px 14px;
+  margin: 0;
+  overflow-x: auto;
+  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+pre.hljs-pre code.hljs { background: transparent; padding: 0; color: var(--color-text1); display: block; }
+.nb-code-view { margin: 0; }
+.hljs-comment, .hljs-quote { color: var(--color-text2); font-style: italic; }
+.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-meta-keyword { color: var(--color-accent); font-weight: 500; }
+.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string { color: var(--color-teal); }
+.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--color-amber); }
+.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--color-accent2, var(--color-accent)); font-weight: 500; }
+.hljs-variable, .hljs-template-variable, .hljs-attr, .hljs-built_in, .hljs-builtin-name { color: var(--color-accent); }
+.hljs-tag, .hljs-type, .hljs-params { color: var(--color-text1); }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 600; }
+.hljs-deletion { color: var(--color-accent2, #fa6d7c); }
 `;
 
 // ---------------------------------------------------------------------------
@@ -1534,9 +1543,19 @@ export function deleteCellWithConfirm(
   const idx = state.cells.findIndex((c) => c.id === cell.id);
   if (idx < 0) return;
   const label = labelFor(cell);
-  const snapshotCell: NotebookCell = typeof (globalThis as any).structuredClone === 'function'
-    ? (globalThis as any).structuredClone(cell)
-    : JSON.parse(JSON.stringify(cell));
+  let snapshotCell: NotebookCell;
+  try { snapshotCell = structuredClone(cell); }
+  catch {
+    snapshotCell = JSON.parse(JSON.stringify(cell, (_k, v) => {
+      if (v === null || v === undefined) return v;
+      const t = typeof v;
+      if (t === 'function' || t === 'symbol' || t === 'bigint') return undefined;
+      if (t !== 'object') return v;
+      if (typeof Node !== 'undefined' && v instanceof Node) return undefined;
+      if (typeof Window !== 'undefined' && v instanceof Window) return undefined;
+      return v;
+    }));
+  }
   // Manually push a history entry so we have a direct reference to remove on undo.
   const entry: HistoryEntry = {
     ts: Date.now(),

package/src/widgets/rich/cards.svelte

@@ -0,0 +1,74 @@
+<svelte:options customElement={{ tag: 'auto-cards', shadow: 'none' }} />
+
+<script lang="ts">
+  import SafeImage from '../SafeImage.svelte';
+
+  export interface CardItem {
+    title: string;
+    description?: string;
+    subtitle?: string;
+    image?: string;
+    tags?: string[];
+    href?: string;
+  }
+
+  export interface CardsData {
+    title?: string;
+    cards?: CardItem[];
+    minCardWidth?: string;
+    gap?: string;
+    emptyMessage?: string;
+  }
+
+  interface Props {
+    data?: CardsData | null;
+    oncardclick?: (c: CardItem) => void;
+  }
+
+  let { data = {}, oncardclick }: Props = $props();
+
+  const cards = $derived.by<CardItem[]>(() => {
+    if (Array.isArray(data?.cards) && (data!.cards as unknown[]).length) return data!.cards as CardItem[];
+    return [];
+  });
+</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 cards.length === 0}
+    <p class="text-text2 text-sm">{data?.emptyMessage ?? 'No items'}</p>
+  {:else}
+    <div
+      class="grid"
+      style="grid-template-columns: repeat(auto-fill, minmax({data?.minCardWidth ?? '180px'}, 1fr)); gap: {data?.gap ?? '1rem'};"
+    >
+      {#each cards as card}
+        <div
+          class="bg-surface2 border border-border rounded-lg overflow-hidden hover:border-border2 transition-all {oncardclick ? 'cursor-pointer' : ''}"
+          role={oncardclick ? 'button' : undefined}
+          tabindex={oncardclick ? 0 : undefined}
+          aria-label={oncardclick ? card.title : undefined}
+          title={oncardclick ? 'Double-cliquez pour interagir' : undefined}
+          ondblclick={() => oncardclick?.(card)}
+          onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); oncardclick?.(card); } }}
+        >
+          {#if card.image}
+            <SafeImage src={card.image} alt={card.title} class="w-full h-32 object-cover" hideOnError />
+          {/if}
+          <div class="p-3">
+            <div class="font-semibold text-sm text-text1 leading-tight">{card.title}</div>
+            {#if card.subtitle}<div class="text-xs text-text2 mt-0.5">{card.subtitle}</div>{/if}
+            {#if card.description}<div class="text-xs text-text2 mt-1.5 leading-relaxed">{card.description}</div>{/if}
+            {#if card.tags?.length}
+              <div class="flex gap-1 flex-wrap mt-2">
+                {#each card.tags as tag}
+                  <span class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-surface2 text-text2">{tag}</span>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>