@webmcp-auto-ui/ui 2.5.35 → 2.5.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.35",
+  "version": "2.5.37",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/agent/MCPserversList.svelte

@@ -3,7 +3,7 @@
 <script lang="ts">
   interface Server {
     id: string;
-    name: string;
+    label: string;
     description: string;
     url: string;
     tags?: string[];
@@ -11,21 +11,30 @@
 
   interface Props {
     servers: Server[];
-    connectedUrls?: string[];
-    loading?: string[];
-    onconnect?: (url: string) => void;
+    /** Set of registry ids currently enabled/connected. Aligned with WebMCPserversList. */
+    enabledServers?: Set<string>;
+    /** Set of registry ids currently in a loading/connecting state. */
+    loading?: Set<string>;
+    onconnect?: (id: string) => void;
     onconnectall?: () => void;
-    ondisconnect?: (url: string) => void;
+    ondisconnect?: (id: string) => void;
+    /** Recipe counts keyed by registry id. */
     recipeCountByServer?: Record<string, number>;
-    onrecipeclick?: (url: string) => void;
+    onrecipeclick?: (id: string) => void;
+    /** Tool counts keyed by registry id. */
     toolCountByServer?: Record<string, number>;
-    ontoolclick?: (url: string) => void;
+    ontoolclick?: (id: string) => void;
+    /** Hide the built-in "Available MCP servers" header (when caller wraps the
+     * list in its own disclosure/section that already provides a title). */
+    hideHeader?: boolean;
   }
 
+  const EMPTY_SET: Set<string> = new Set();
+
   let {
     servers,
-    connectedUrls = [],
-    loading = [],
+    enabledServers = EMPTY_SET,
+    loading = EMPTY_SET,
     onconnect,
     onconnectall,
     ondisconnect,
@@ -33,32 +42,35 @@
     onrecipeclick,
     toolCountByServer,
     ontoolclick,
+    hideHeader = false,
   }: Props = $props();
 
   const allConnected = $derived(
-    servers.length > 0 && servers.every(s => connectedUrls.includes(s.url))
+    servers.length > 0 && servers.every(s => enabledServers.has(s.id))
   );
   const anyConnected = $derived(
-    servers.some(s => connectedUrls.includes(s.url))
+    servers.some(s => enabledServers.has(s.id))
   );
 
-  function isConnected(url: string) {
-    return connectedUrls.includes(url);
+  function isConnected(id: string) {
+    return enabledServers.has(id);
   }
-  function isLoading(url: string) {
-    return loading.includes(url);
+  function isLoading(id: string) {
+    return loading.has(id);
   }
 </script>
 
 <div class="flex flex-col gap-2">
-  <span class="text-[9px] font-mono uppercase tracking-wider text-text2">
-    Available MCP servers
-  </span>
+  {#if !hideHeader}
+    <span class="text-[9px] font-mono uppercase tracking-wider text-text2">
+      Available MCP servers
+    </span>
+  {/if}
 
   <div class="flex flex-col gap-1">
     {#each servers as server (server.id)}
-      {@const connected = isConnected(server.url)}
-      {@const busy = isLoading(server.url)}
+      {@const connected = isConnected(server.id)}
+      {@const busy = isLoading(server.id)}
       <div
         class="group flex items-center gap-2 px-2 py-1.5 rounded border border-border2 bg-surface2 hover:border-accent/30 transition-colors"
       >
@@ -73,23 +85,23 @@
 
         <!-- info -->
         <div class="flex-1 min-w-0 flex flex-col">
-          <span class="font-mono text-xs font-medium text-text1">{server.name}</span>
+          <span class="font-mono text-xs font-medium text-text1">{server.label}</span>
           <span class="text-[10px] text-text2 truncate">{server.description}</span>
-          {#if connected && (recipeCountByServer?.[server.url] || toolCountByServer?.[server.url])}
+          {#if connected && (recipeCountByServer?.[server.id] || toolCountByServer?.[server.id])}
             <span class="flex items-center gap-1.5 mt-0.5">
-              {#if recipeCountByServer?.[server.url]}
+              {#if recipeCountByServer?.[server.id]}
                 <button class="text-[10px] font-mono text-accent hover:underline"
-                        onclick={(e) => { e.stopPropagation(); onrecipeclick?.(server.url); }}>
-                  {recipeCountByServer[server.url]} recipes
+                        onclick={(e) => { e.stopPropagation(); onrecipeclick?.(server.id); }}>
+                  {recipeCountByServer[server.id]} recipes
                 </button>
               {/if}
-              {#if recipeCountByServer?.[server.url] && toolCountByServer?.[server.url]}
+              {#if recipeCountByServer?.[server.id] && toolCountByServer?.[server.id]}
                 <span class="text-[10px] text-text2">·</span>
               {/if}
-              {#if toolCountByServer?.[server.url]}
+              {#if toolCountByServer?.[server.id]}
                 <button class="text-[10px] font-mono text-accent hover:underline"
-                        onclick={(e) => { e.stopPropagation(); ontoolclick?.(server.url); }}>
-                  {toolCountByServer[server.url]} tools
+                        onclick={(e) => { e.stopPropagation(); ontoolclick?.(server.id); }}>
+                  {toolCountByServer[server.id]} tools
                 </button>
               {/if}
             </span>
@@ -102,7 +114,7 @@
             <div class="w-4 h-4 border border-accent/50 border-t-accent rounded-full animate-spin"></div>
           {:else if connected}
             <button
-              onclick={() => ondisconnect?.(server.url)}
+              onclick={() => ondisconnect?.(server.id)}
               class="text-xs font-mono px-1.5 h-6 rounded text-teal group-hover:text-accent2 transition-colors"
               title="Disconnect"
             >
@@ -111,7 +123,7 @@
             </button>
           {:else}
             <button
-              onclick={() => onconnect?.(server.url)}
+              onclick={() => onconnect?.(server.id)}
               class="text-[10px] font-mono px-1.5 h-6 rounded border border-border2 bg-surface2 hover:border-accent/50 hover:text-accent text-text2 transition-colors"
             >
               connect
@@ -135,7 +147,7 @@
       <button
         onclick={() => {
           for (const s of servers) {
-            if (isConnected(s.url)) ondisconnect?.(s.url);
+            if (isConnected(s.id)) ondisconnect?.(s.id);
           }
         }}
         class="text-xs font-mono px-2 h-7 rounded border border-border2 bg-surface2 hover:border-accent2/50 hover:text-accent2 text-text2 transition-colors"

package/src/agent/RecipeBrowser.svelte

@@ -4,8 +4,8 @@
   import { fade, fly } from 'svelte/transition';
   import { filterRecipes, sortRecipes, recipeToMarkdown, recipeToDownloadBlob } from '@webmcp-auto-ui/agent';
   import { encode } from '@webmcp-auto-ui/sdk';
+  import { canvas } from '@webmcp-auto-ui/sdk/canvas';
   import { extractCellsFromRecipe } from '@webmcp-auto-ui/ui';
-  import type { McpMultiClient } from '@webmcp-auto-ui/core';
   import type { RecipeData } from '@webmcp-auto-ui/sdk';
 
   interface RecipeItem {
@@ -34,6 +34,14 @@
     onOpenInNotebook?: (type: string, data: Record<string, unknown>) => void;
     /** Called when user clicks a recipe to view its detail. Host shows the recipe modal. */
     onOpenRecipe?: (recipe: RecipeItem) => void;
+    /** Agent widget_display payload — when present, takes priority over named props. */
+    data?: {
+      recipes?: RecipeItem[];
+      mcpRecipes?: RecipeItem[];
+      webmcpRecipes?: RecipeItem[];
+      layout?: 'list' | 'grid';
+      filters?: { q?: string; kind?: 'all' | 'mcp' | 'webmcp' };
+    } | null;
   }
 
   let {
@@ -44,10 +52,19 @@
     layout: initialLayout = 'list',
     onOpenInNotebook,
     onOpenRecipe,
+    data = null,
   }: Props = $props();
 
-  function getMultiClient(): McpMultiClient | undefined {
-    return (globalThis as unknown as { __multiMcp?: { multiClient: McpMultiClient } }).__multiMcp?.multiClient;
+  // Agent mode: when `data` is present, use it as source of truth and force open.
+  let agentClosed = $state(false);
+  const effectiveMcp = $derived<RecipeItem[]>(data?.recipes ?? data?.mcpRecipes ?? mcpRecipes);
+  const effectiveWebmcp = $derived<RecipeItem[]>(data?.webmcpRecipes ?? webmcpRecipes);
+  const effectiveOpen = $derived(data ? !agentClosed : open);
+
+  /** Look up the canvas server name (= registry id) matching the given URL. */
+  function findServerNameByUrl(url: string | undefined): string | undefined {
+    if (!url) return undefined;
+    return canvas.dataServers.find((s) => s.url === url)?.name;
   }
 
   let query = $state('');
@@ -61,32 +78,50 @@
   let copyState = $state<'idle' | 'copied'>('idle');
   let copyTimer: ReturnType<typeof setTimeout> | undefined;
 
-  // Sync initialFilter into search when modal opens
+  // Sync initialFilter into search when modal opens (Settings mode)
   $effect(() => {
-    if (open) {
+    if (open && !data) {
       query = initialFilter ?? '';
       kind = 'all';
       selected = null;
     }
   });
 
+  // Sync agent payload into local state when `data` arrives
+  $effect(() => {
+    if (data) {
+      query = data.filters?.q ?? '';
+      kind = data.filters?.kind ?? 'all';
+      layout = data.layout ?? initialLayout;
+      selected = null;
+    }
+  });
+
   function applyKindFilter(recipes: RecipeItem[], filterKind: 'all' | 'mcp' | 'webmcp'): RecipeItem[] {
     if (filterKind === 'all') return recipes;
     return recipes.filter((_r) => {
       // webmcpRecipes are already separated — use the array membership to determine kind
-      return filterKind === 'webmcp' ? webmcpRecipes.includes(_r) : mcpRecipes.includes(_r);
+      return filterKind === 'webmcp' ? effectiveWebmcp.includes(_r) : effectiveMcp.includes(_r);
     });
   }
 
   const filteredMcp = $derived(
-    kind === 'webmcp' ? [] : sortRecipes(filterRecipes(mcpRecipes, query))
+    kind === 'webmcp' ? [] : sortRecipes(filterRecipes(effectiveMcp, query))
   );
   const filteredWebmcp = $derived(
-    kind === 'mcp' ? [] : sortRecipes(filterRecipes(webmcpRecipes, query))
+    kind === 'mcp' ? [] : sortRecipes(filterRecipes(effectiveWebmcp, query))
   );
   const totalResults = $derived(filteredMcp.length + filteredWebmcp.length);
 
-  function close() { open = false; selected = null; }
+  // Reset agent-close override when a fresh payload arrives
+  $effect(() => {
+    if (data) agentClosed = false;
+  });
+  function close() {
+    open = false;
+    selected = null;
+    if (data) agentClosed = true;
+  }
 
   function onKeydown(e: KeyboardEvent) {
     if (e.key === 'Escape') close();
@@ -111,15 +146,16 @@
   }
 
   async function ensureBody(recipe: RecipeItem) {
-    const multiClient = getMultiClient();
-    if (recipe.body || !recipe.serverUrl || !multiClient) return;
+    if (recipe.body || !recipe.serverUrl) return;
+    const serverName = findServerNameByUrl(recipe.serverUrl);
+    if (!serverName) return;
     try {
       const identifier = recipe.originalName ?? recipe.name;
-      const res = await multiClient.callToolOn(recipe.serverUrl, 'get_recipe', {
+      const res = await canvas.callTool(serverName, 'get_recipe', {
         name: identifier,
         id: (recipe as any).id ?? identifier,
-      });
-      const text = res.content?.find((c: { type: string }) => c.type === 'text') as { text?: string } | undefined;
+      }) as { content?: { type: string; text?: string }[] };
+      const text = res?.content?.find((c: { type: string }) => c.type === 'text') as { text?: string } | undefined;
       if (text?.text) {
         let body = text.text;
         try {
@@ -144,11 +180,11 @@
       description: recipe.description,
     });
 
-    const connected = getMultiClient()?.listServers() ?? [];
+    const connected = canvas.dataServers ?? [];
     const serverNames = Array.isArray(recipe.servers) ? recipe.servers : [];
     const servers = serverNames
       .map((name) => {
-        const hit = connected.find((s) => s.name === name);
+        const hit = connected.find((s) => s.name === name || s.serverName === name || s.label === name);
         const url = hit?.url ?? (typeof recipe.serverUrl === 'string' ? recipe.serverUrl : undefined);
         return url ? { name, url, kind: 'data' as const } : null;
       })
@@ -181,7 +217,7 @@
 
 <svelte:window onkeydown={onKeydown} />
 
-{#if open}
+{#if effectiveOpen}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-6"
@@ -248,7 +284,7 @@
           {#if layout === 'grid'}
             <div class="grid grid-cols-2 gap-2 mt-2">
               {#each [...filteredMcp, ...filteredWebmcp] as recipe, i (`grid:${recipe.name}:${i}`)}
-                {@const isWebmcp = webmcpRecipes.includes(recipe)}
+                {@const isWebmcp = effectiveWebmcp.includes(recipe)}
                 <div class="group flex flex-col gap-1 p-3 bg-surface2/50 rounded-lg hover:bg-surface2 transition-colors cursor-pointer border border-border2/50"
                      onclick={() => openRecipe(recipe)}>
                   <div class="font-mono text-[11px] text-text1 font-medium truncate">{recipe.name}</div>

package/src/agent/RemoteMCPserversDemo.svelte

@@ -4,7 +4,7 @@
 
   interface Server {
     id: string;
-    name: string;
+    label: string;
     description: string;
     url: string;
     tags?: string[];
@@ -12,15 +12,15 @@
 
   interface Props {
     servers: Server[];
-    connectedUrls?: string[];
-    loading?: string[];
-    onconnect?: (url: string) => void;
+    enabledServers?: Set<string>;
+    loading?: Set<string>;
+    onconnect?: (id: string) => void;
     onconnectall?: () => void;
-    ondisconnect?: (url: string) => void;
+    ondisconnect?: (id: string) => void;
     recipeCountByServer?: Record<string, number>;
-    onrecipeclick?: (url: string) => void;
+    onrecipeclick?: (id: string) => void;
     toolCountByServer?: Record<string, number>;
-    ontoolclick?: (url: string) => void;
+    ontoolclick?: (id: string) => void;
   }
 
   let props: Props = $props();

package/src/agent/ToolBrowser.svelte

@@ -9,26 +9,55 @@
     open: boolean;
     tools: BrowsableTool[];
     initialFilter?: string;
+    /** Layout toggle: list (default) or grid — reserved for future grid view */
+    layout?: 'list' | 'grid';
+    /** Agent widget_display payload — when present, takes priority over named props. */
+    data?: {
+      tools?: BrowsableTool[];
+      layout?: 'list' | 'grid';
+      filters?: { q?: string };
+    } | null;
   }
 
-  let { open = $bindable(false), tools = [], initialFilter = '' }: Props = $props();
+  let {
+    open = $bindable(false),
+    tools = [],
+    initialFilter = '',
+    layout: _initialLayout = 'list',
+    data = null,
+  }: Props = $props();
+
+  let agentClosed = $state(false);
+  const effectiveTools = $derived<BrowsableTool[]>(data?.tools ?? tools);
+  const effectiveOpen = $derived(data ? !agentClosed : open);
 
   let query = $state('');
   let selected = $state<BrowsableTool | null>(null);
 
+  // Settings mode: sync initialFilter when modal opens
   $effect(() => {
-    if (open) {
+    if (open && !data) {
       query = initialFilter || '';
       selected = null;
     }
   });
 
-  const filtered = $derived(sortRecipes(filterRecipes(tools, query)));
+  // Agent mode: sync payload when `data` arrives
+  $effect(() => {
+    if (data) {
+      query = data.filters?.q ?? '';
+      selected = null;
+      agentClosed = false;
+    }
+  });
+
+  const filtered = $derived(sortRecipes(filterRecipes(effectiveTools, query)));
   const grouped = $derived(groupToolsByServer(filtered));
 
   function close() {
     open = false;
     selected = null;
+    if (data) agentClosed = true;
   }
 
   function handleKeydown(e: KeyboardEvent) {
@@ -39,9 +68,9 @@
   }
 </script>
 
-<svelte:window onkeydown={open ? handleKeydown : undefined} />
+<svelte:window onkeydown={effectiveOpen ? handleKeydown : undefined} />
 
-{#if open}
+{#if effectiveOpen}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
        onclick={close}>

package/src/agent/WebMCPserversList.svelte

@@ -6,6 +6,12 @@
     label: string;
     description: string;
     widgetCount: number;
+    category?: string;
+  }
+
+  interface CategoryGroup {
+    key: string;
+    label: string;
   }
 
   interface Props {
@@ -16,6 +22,12 @@
     toolCountByServer?: Record<string, number>;
     onrecipeclick?: (id: string) => void;
     ontoolclick?: (id: string) => void;
+    /** Optional category grouping. When provided AND any server has a `category`,
+     * servers are rendered grouped under category headers. Order from this array
+     * is preserved; servers whose category isn't listed fall into a tail "Other"
+     * group. When absent, behavior is unchanged (flat list). */
+    categories?: CategoryGroup[];
+    initialCollapsed?: boolean;
   }
 
   let {
@@ -26,9 +38,25 @@
     toolCountByServer,
     onrecipeclick,
     ontoolclick,
+    categories,
+    initialCollapsed = true,
   }: Props = $props();
 
-  let collapsed = $state(true);
+  let collapsed = $state(initialCollapsed);
+
+  const grouped = $derived.by(() => {
+    if (!categories || categories.length === 0) return null;
+    if (!servers.some(s => s.category)) return null;
+    const groups = categories.map(c => ({
+      key: c.key,
+      label: c.label,
+      items: servers.filter(s => (s.category ?? '') === c.key),
+    }));
+    const known = new Set(categories.map(c => c.key));
+    const others = servers.filter(s => !s.category || !known.has(s.category));
+    if (others.length > 0) groups.push({ key: '_other', label: 'Other', items: others });
+    return groups.filter(g => g.items.length > 0);
+  });
 </script>
 
 <div class="flex flex-col gap-2">
@@ -40,47 +68,64 @@
     <span class="text-[10px] text-text2 ml-auto transition-transform {collapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
   </div>
 
-  {#if !collapsed}
-    <div class="flex flex-col gap-1">
-      {#each servers as srv (srv.id)}
-        {@const enabled = enabledServers.has(srv.id)}
-        {@const recipes = recipeCountByServer?.[srv.id] ?? 0}
-        {@const tools = toolCountByServer?.[srv.id] ?? 0}
-        <div class="group flex items-center gap-2 px-2 py-1.5 rounded border border-border2 bg-surface2 hover:border-accent/30 transition-colors">
-          <input
-            type="checkbox"
-            checked={enabled}
-            onchange={() => onToggle?.(srv.id)}
-            class="w-3.5 h-3.5 rounded border-border2 accent-accent cursor-pointer flex-shrink-0"
-          />
-          <div class="flex-1 min-w-0 flex flex-col">
-            <span class="font-mono text-xs font-medium text-text1 truncate">{srv.label}</span>
-            {#if srv.description}
-              <span class="text-[10px] text-text2 truncate">{srv.description}</span>
+  {#snippet row(srv: Server)}
+    {@const enabled = enabledServers.has(srv.id)}
+    {@const recipes = recipeCountByServer?.[srv.id] ?? 0}
+    {@const tools = toolCountByServer?.[srv.id] ?? 0}
+    <div class="group flex items-center gap-2 px-2 py-1.5 rounded border border-border2 bg-surface2 hover:border-accent/30 transition-colors">
+      <input
+        type="checkbox"
+        checked={enabled}
+        onchange={() => onToggle?.(srv.id)}
+        class="w-3.5 h-3.5 rounded border-border2 accent-accent cursor-pointer flex-shrink-0"
+      />
+      <div class="flex-1 min-w-0 flex flex-col">
+        <span class="font-mono text-xs font-medium text-text1 truncate">{srv.label}</span>
+        {#if srv.description}
+          <span class="text-[10px] text-text2 truncate">{srv.description}</span>
+        {/if}
+        {#if enabled && (recipes > 0 || tools > 0)}
+          <span class="flex items-center gap-1.5 mt-0.5">
+            {#if recipes > 0}
+              <button class="text-[10px] font-mono text-accent hover:underline"
+                      onclick={(e) => { e.stopPropagation(); onrecipeclick?.(srv.id); }}>
+                {recipes} recipes
+              </button>
             {/if}
-            {#if enabled && (recipes > 0 || tools > 0)}
-              <span class="flex items-center gap-1.5 mt-0.5">
-                {#if recipes > 0}
-                  <button class="text-[10px] font-mono text-accent hover:underline"
-                          onclick={(e) => { e.stopPropagation(); onrecipeclick?.(srv.id); }}>
-                    {recipes} recipes
-                  </button>
-                {/if}
-                {#if recipes > 0 && tools > 0}
-                  <span class="text-[10px] text-text2">·</span>
-                {/if}
-                {#if tools > 0}
-                  <button class="text-[10px] font-mono text-accent hover:underline"
-                          onclick={(e) => { e.stopPropagation(); ontoolclick?.(srv.id); }}>
-                    {tools} tools
-                  </button>
-                {/if}
-              </span>
+            {#if recipes > 0 && tools > 0}
+              <span class="text-[10px] text-text2">·</span>
             {/if}
-          </div>
-          <span class="text-[9px] font-mono text-text2/50 flex-shrink-0">{srv.widgetCount}w</span>
-        </div>
-      {/each}
+            {#if tools > 0}
+              <button class="text-[10px] font-mono text-accent hover:underline"
+                      onclick={(e) => { e.stopPropagation(); ontoolclick?.(srv.id); }}>
+                {tools} tools
+              </button>
+            {/if}
+          </span>
+        {/if}
+      </div>
+      <span class="text-[9px] font-mono text-text2/50 flex-shrink-0">{srv.widgetCount}w</span>
     </div>
+  {/snippet}
+
+  {#if !collapsed}
+    {#if grouped}
+      <div class="flex flex-col gap-3">
+        {#each grouped as group (group.key)}
+          <div class="flex flex-col gap-1">
+            <div class="text-[9px] font-mono text-text2/70 uppercase tracking-wider pl-0.5">{group.label}</div>
+            {#each group.items as srv (srv.id)}
+              {@render row(srv)}
+            {/each}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="flex flex-col gap-1">
+        {#each servers as srv (srv.id)}
+          {@render row(srv)}
+        {/each}
+      </div>
+    {/if}
   {/if}
 </div>

package/src/index.ts

@@ -19,6 +19,11 @@ export { default as MarkdownView } from './primitives/MarkdownView.svelte';
 export { default as CodeView } from './primitives/CodeView.svelte';
 export { renderMarkdown, highlightCode, createMarkdownRenderer } from './primitives/markdown-renderer.js';
 
+// Recipe building blocks (used by RecipeModal and notebook recipe-viewer)
+export { default as RecipeCodeBlock } from './recipe/RecipeCodeBlock.svelte';
+export { default as RecipeRunModal } from './recipe/RecipeRunModal.svelte';
+export type { RecipeBlockAction } from './recipe/types.js';
+
 // Widgets are shipped as Svelte 5 custom elements — import the widget file
 // side-effect to register its tag (e.g. `import '@webmcp-auto-ui/ui/widgets/simple/stat.svelte';`
 // then use `<auto-stat data={spec}></auto-stat>`). `WidgetRenderer` does this for you.

package/src/primitives/MarkdownView.svelte

@@ -5,13 +5,23 @@
   interface Props {
     source: string;
     class?: string;
+    onLinkClick?: (href: string, ev: MouseEvent) => void;
   }
 
-  let { source, class: className = '' }: Props = $props();
+  let { source, class: className = '', onLinkClick }: Props = $props();
   const html = $derived(renderMarkdown(source ?? ''));
+
+  function handleClick(ev: MouseEvent) {
+    if (!onLinkClick) return;
+    const a = (ev.target as HTMLElement | null)?.closest?.('a');
+    if (!a) return;
+    const href = a.getAttribute('href');
+    if (!href) return;
+    onLinkClick(href, ev);
+  }
 </script>
 
-<div class="markdown-body {className}">
+<div class="markdown-body {className}" onclick={handleClick} role="presentation">
   {@html html}
 </div>