@seed-ship/mcp-ui-solid 6.23.0 → 6.25.1

package/dist/components/UIResourceRenderer.js

@@ -13,6 +13,8 @@ import { _registerMount, _unregisterMount, getDuplicateMountReporter } from "../
 import { useTelemetry } from "../context/MCPUITelemetryContext.js";
 import { useMCPUIStrings, DEFAULT_MCPUI_STRINGS } from "../context/MCPUIStringsContext.js";
 import { useMCPUIConfig } from "../context/MCPUIConfigContext.js";
+import { stripUndefinedDebris, isMissingCellValue } from "../utils/missing-value.js";
+import { MissingValueLegend, MissingValueMark } from "./MissingValue.js";
 import { shouldSetCredentialless } from "../utils/iframe-coep.js";
 import { IframeFallbackLink } from "./IframeFallbackLink.js";
 import { GridRenderer } from "./GridRenderer.js";
@@ -39,7 +41,7 @@ import { marked } from "marked";
 import { useMCPUIMath } from "../context/MCPUIMathContext.js";
 import { parseMathMarkdown } from "../utils/math-markdown.js";
 import { formatMCPUIString } from "../utils/format-string.js";
-var _tmpl$ = /* @__PURE__ */ template(`<svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">`), _tmpl$2 = /* @__PURE__ */ template(`<button data-mcp-ui-action=copy type=button>`), _tmpl$3 = /* @__PURE__ */ template(`<svg class="w-3 h-3 text-green-500"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 13l4 4L19 7">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"><p class="text-red-500 dark:text-red-400 text-sm">`), _tmpl$5 = /* @__PURE__ */ template(`<div class=p-3>`), _tmpl$6 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600">`), _tmpl$7 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center p-4"><div class=text-center><p class="text-red-600 dark:text-red-400 text-sm font-medium"></p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1">`), _tmpl$8 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$9 = /* @__PURE__ */ template(`<div class="w-full h-full p-4"><!$><!/><div class="w-full h-full"role=img><img class="w-full h-auto max-h-[300px] object-contain">`), _tmpl$0 = /* @__PURE__ */ template(`<div class="relative w-full h-full min-h-[300px] bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">`), _tmpl$10 = /* @__PURE__ */ template(`<tr>`), _tmpl$11 = /* @__PURE__ */ template(`<td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-200 whitespace-normal break-words leading-relaxed first:pl-6 last:pr-6">`), _tmpl$12 = /* @__PURE__ */ template(`<tbody class="bg-white dark:bg-gray-800 relative">`), _tmpl$13 = /* @__PURE__ */ template(`<button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<div class="absolute right-10 top-2 z-10"><button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"aria-haspopup=menu><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg></button><!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<span class="ml-2 text-xs font-normal text-gray-400">`), _tmpl$16 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3 flex-shrink-0"><!$><!/><!$><!/>`), _tmpl$17 = /* @__PURE__ */ template(`<button type=button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm">&times;`), _tmpl$18 = /* @__PURE__ */ template(`<div class="relative mb-3"><span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-sm">🔍</span><input type=text class="w-full max-w-xs min-w-[200px] pl-8 pr-8 py-1.5 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 outline-none"><!$><!/>`), _tmpl$19 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">`), _tmpl$20 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>`), _tmpl$21 = /* @__PURE__ */ template(`<select class="ml-2 px-1 py-0.5 text-xs border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300"data-mcp-ui-action=page-size>`), _tmpl$22 = /* @__PURE__ */ template(`<span class=text-gray-400>`), _tmpl$23 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span><!$><!/>&ndash;<!$><!/> / <!$><!/></span><div class="flex items-center gap-2"><button type=button class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"data-mcp-ui-action=page-prev><span aria-hidden=true>&#x25C0;</span></button><span aria-live=polite><!$><!/> / <!$><!/></span><button type=button class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"data-mcp-ui-action=page-next><span aria-hidden=true>&#x25B6;</span></button><!$><!/>`), _tmpl$24 = /* @__PURE__ */ template(`<div><!$><!/><div><!$><!/><!$><!/><div role=region tabindex=0><table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border-separate border-spacing-0"><thead class="bg-gray-100 dark:bg-gray-900 sticky top-0 z-10"><tr></tr></thead><!$><!/></table></div><!$><!/><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<th scope=col class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 first:pl-6 last:pr-6 bg-gray-100 dark:bg-gray-900 cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"><span class="inline-flex items-center gap-1"><!$><!/><span class="text-[10px] leading-none">`), _tmpl$26 = /* @__PURE__ */ template(`<option>`), _tmpl$27 = /* @__PURE__ */ template(`<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">`), _tmpl$28 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$29 = /* @__PURE__ */ template(`<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">`), _tmpl$30 = /* @__PURE__ */ template(`<div class="relative w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 group"><!$><!/><div class="flex flex-col h-full justify-between"><div><p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"></p><div class="mt-2 flex items-baseline"><p class="text-2xl font-semibold text-gray-900 dark:text-white"></p><!$><!/></div></div><!$><!/><!$><!/>`), _tmpl$31 = /* @__PURE__ */ template(`<div class="relative w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 group"><!$><!/><!$><!/>`), _tmpl$32 = /* @__PURE__ */ template(`<img class="max-w-full max-h-[400px] object-contain rounded shadow-sm hover:opacity-90 transition-opacity"loading=lazy>`, true, false, false), _tmpl$33 = /* @__PURE__ */ template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col"><div class="flex-1 flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 min-h-[200px]"></div><div class="p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"><p class="text-sm text-gray-600 dark:text-gray-400 text-center italic">`), _tmpl$34 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"class=cursor-zoom-in>`), _tmpl$35 = /* @__PURE__ */ template(`<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"><h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$36 = /* @__PURE__ */ template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col"><!$><!/><iframe class="w-full border-0 flex-1"loading=lazy></iframe><!$><!/>`, true, false, false), _tmpl$37 = /* @__PURE__ */ template(`<figcaption class="p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"><p class="text-sm text-gray-600 dark:text-gray-400 text-center">`), _tmpl$38 = /* @__PURE__ */ template(`<figure><div class="flex-1 flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 min-h-[200px]"><a target=_blank rel="noopener noreferrer"class="cursor-zoom-in focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded"><img class="max-w-full max-h-[500px] object-contain rounded shadow-sm hover:opacity-95 transition-opacity"loading=lazy></a></div><!$><!/>`, true, false, false), _tmpl$39 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 truncate">`), _tmpl$40 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"><div class="p-2 bg-blue-50 dark:bg-blue-900/30 rounded-full text-blue-600 dark:text-blue-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/50 shrink-0 transition-colors"aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></div><div class="flex-1 min-w-0"><h4 class="text-sm font-medium text-gray-900 dark:text-white truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"></h4><!$><!/></div><svg xmlns=http://www.w3.org/2000/svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 shrink-0 transition-colors"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1=10 y1=14 x2=21 y2=3>`), _tmpl$41 = /* @__PURE__ */ template(`<div class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200"role=alert><svg xmlns=http://www.w3.org/2000/svg class="w-3.5 h-3.5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1=12 y1=9 x2=12 y2=13></line><line x1=12 y1=17 x2=12.01 y2=17></line></svg><span>`), _tmpl$42 = /* @__PURE__ */ template(`<div class="w-full h-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4"><p class="text-sm font-medium text-red-900 dark:text-red-100"></p><p class="text-xs text-red-700 dark:text-red-300 mt-1">`), _tmpl$43 = /* @__PURE__ */ template(`<div role=alert class="w-full rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-200"><!$><!/> <code class=font-mono>`), _tmpl$44 = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$45 = /* @__PURE__ */ template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$46 = /* @__PURE__ */ template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full"aria-hidden=true>`), _tmpl$47 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/><!$><!/>`), _tmpl$48 = /* @__PURE__ */ template(`<p class="text-xs text-red-600 dark:text-red-400 mt-1">`), _tmpl$49 = /* @__PURE__ */ template(`<div class=mt-3><p class="text-xs font-medium text-red-700 dark:text-red-300"></p><ul class="mt-1 text-xs text-red-600 dark:text-red-400 list-disc list-inside">`), _tmpl$50 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-2">`), _tmpl$51 = /* @__PURE__ */ template(`<div class="relative w-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 group"><!$><!/><div class="flex items-start gap-3"><div class="p-2 bg-red-100 dark:bg-red-900/40 rounded-full shrink-0"><svg class="w-5 h-5 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><div class="flex-1 min-w-0"><h4 class="text-sm font-semibold text-red-800 dark:text-red-200"></h4><p class="text-sm text-red-700 dark:text-red-300 mt-1"></p><!$><!/><!$><!/><!$><!/>`), _tmpl$52 = /* @__PURE__ */ template(`<li>`), _tmpl$53 = /* @__PURE__ */ template(`<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"><h3 class="text-sm font-semibold text-gray-900 dark:text-white capitalize">`), _tmpl$54 = /* @__PURE__ */ template(`<div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><!$><!/><!$><!/>`), _tmpl$55 = /* @__PURE__ */ template(`<div><div class="grid gap-4"data-mcp-ui-grid></div><!$><!/>`), _tmpl$56 = /* @__PURE__ */ template(`<div class=min-w-0>`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">`), _tmpl$2 = /* @__PURE__ */ template(`<button data-mcp-ui-action=copy type=button>`), _tmpl$3 = /* @__PURE__ */ template(`<svg class="w-3 h-3 text-[color:var(--mcp-ui-success,var(--color-green-500))]"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 13l4 4L19 7">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="p-4 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]"><p class="text-[color:var(--mcp-ui-danger,var(--color-red-500))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))] text-sm">`), _tmpl$5 = /* @__PURE__ */ template(`<div class=p-3>`), _tmpl$6 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[color:var(--mcp-ui-accent-border,var(--color-blue-600))]">`), _tmpl$7 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center p-4"><div class=text-center><p class="text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))] text-sm font-medium"></p><p class="text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] text-xs mt-1">`), _tmpl$8 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] mb-3">`), _tmpl$9 = /* @__PURE__ */ template(`<div class="w-full h-full p-4"><!$><!/><div class="w-full h-full"role=img><img class="w-full h-auto max-h-[300px] object-contain">`), _tmpl$0 = /* @__PURE__ */ template(`<div class="relative w-full h-full min-h-[300px] bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] overflow-hidden"><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<tbody class="bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] divide-y divide-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:divide-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]">`), _tmpl$10 = /* @__PURE__ */ template(`<tr>`), _tmpl$11 = /* @__PURE__ */ template(`<td class="px-6 py-4 text-sm text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-200,#e5e7eb))] whitespace-normal break-words leading-relaxed first:pl-6 last:pr-6">`), _tmpl$12 = /* @__PURE__ */ template(`<tbody class="bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] relative">`), _tmpl$13 = /* @__PURE__ */ template(`<button class="w-full text-left px-3 py-1.5 hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]">`), _tmpl$14 = /* @__PURE__ */ template(`<div class="absolute right-10 top-2 z-10"><button class="opacity-60 hover:opacity-100 px-2 py-1 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"aria-haspopup=menu><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg></button><!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<span class="ml-2 text-xs font-normal text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$16 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] mb-3 flex-shrink-0"><!$><!/><!$><!/>`), _tmpl$17 = /* @__PURE__ */ template(`<button type=button class="absolute right-2 top-1/2 -translate-y-1/2 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] hover:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:hover:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] text-sm">&times;`), _tmpl$18 = /* @__PURE__ */ template(`<div class="relative mb-3"><span class="absolute left-3 top-1/2 -translate-y-1/2 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] pointer-events-none text-sm">🔍</span><input type=text class="w-full max-w-xs min-w-[200px] pl-8 pr-8 py-1.5 text-sm border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-md bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] placeholder-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] focus:border-[color:var(--mcp-ui-focus,var(--color-blue-400))] focus:ring-1 focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-400))] outline-none"><!$><!/>`), _tmpl$19 = /* @__PURE__ */ template(`<p class="text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] mb-2">`), _tmpl$20 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"><span>`), _tmpl$21 = /* @__PURE__ */ template(`<select class="ml-2 px-1 py-0.5 text-xs border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]"data-mcp-ui-action=page-size>`), _tmpl$22 = /* @__PURE__ */ template(`<span class=text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]>`), _tmpl$23 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"><span><!$><!/>&ndash;<!$><!/> / <!$><!/></span><div class="flex items-center gap-2"><button type=button class="px-2 py-1 rounded hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"data-mcp-ui-action=page-prev><span aria-hidden=true>&#x25C0;</span></button><span aria-live=polite><!$><!/> / <!$><!/></span><button type=button class="px-2 py-1 rounded hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"data-mcp-ui-action=page-next><span aria-hidden=true>&#x25B6;</span></button><!$><!/>`), _tmpl$24 = /* @__PURE__ */ template(`<div><!$><!/><div><!$><!/><!$><!/><div role=region tabindex=0><table class="min-w-full divide-y divide-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:divide-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] border-separate border-spacing-0"><thead class="bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-100,#f3f4f6))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-900,#111827))] sticky top-0 z-10"><tr></tr></thead><!$><!/></table></div><!$><!/><!$><!/><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<th scope=col class="px-6 py-3 text-left text-xs font-semibold text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] uppercase tracking-wider border-b border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] first:pl-6 last:pr-6 bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-100,#f3f4f6))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-900,#111827))] cursor-pointer select-none hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-200,#e5e7eb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-800,#1f2937))] transition-colors"><span class="inline-flex items-center gap-1"><!$><!/><span class="text-[10px] leading-none">`), _tmpl$26 = /* @__PURE__ */ template(`<option>`), _tmpl$27 = /* @__PURE__ */ template(`<span class="ml-2 text-sm font-medium text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$28 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$29 = /* @__PURE__ */ template(`<p class="mt-2 text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$30 = /* @__PURE__ */ template(`<div class="relative w-full h-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] p-4 group"><!$><!/><div class="flex flex-col h-full justify-between"><div><p class="text-xs font-medium text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] uppercase tracking-wide"></p><div class="mt-2 flex items-baseline"><p class="text-2xl font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]"></p><!$><!/></div></div><!$><!/><!$><!/>`), _tmpl$31 = /* @__PURE__ */ template(`<div class="relative w-full h-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] p-4 group"><!$><!/><!$><!/>`), _tmpl$32 = /* @__PURE__ */ template(`<img class="max-w-full max-h-[400px] object-contain rounded shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] hover:opacity-90 transition-opacity"loading=lazy>`, true, false, false), _tmpl$33 = /* @__PURE__ */ template(`<div class="w-full h-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] overflow-hidden flex flex-col"><div class="flex-1 flex items-center justify-center p-4 bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-900,#111827))] min-h-[200px]"></div><div class="p-3 border-t border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))]"><p class="text-sm text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] text-center italic">`), _tmpl$34 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"class=cursor-zoom-in>`), _tmpl$35 = /* @__PURE__ */ template(`<div class="px-4 py-2 border-b border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-900,#111827))]"><h3 class="text-sm font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]">`), _tmpl$36 = /* @__PURE__ */ template(`<div class="w-full h-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] overflow-hidden flex flex-col"><!$><!/><iframe class="w-full border-0 flex-1"loading=lazy></iframe><!$><!/>`, true, false, false), _tmpl$37 = /* @__PURE__ */ template(`<figcaption class="p-3 border-t border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))]"><p class="text-sm text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] text-center">`), _tmpl$38 = /* @__PURE__ */ template(`<figure><div class="flex-1 flex items-center justify-center p-4 bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-900,#111827))] min-h-[200px]"><a target=_blank rel="noopener noreferrer"class="cursor-zoom-in focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))] rounded"><img class="max-w-full max-h-[500px] object-contain rounded shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] hover:opacity-95 transition-opacity"loading=lazy></a></div><!$><!/>`, true, false, false), _tmpl$39 = /* @__PURE__ */ template(`<p class="text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] truncate">`), _tmpl$40 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"><div class="p-2 bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_30%,transparent))] rounded-full text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] group-hover:bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-100))] dark:group-hover:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_50%,transparent))] shrink-0 transition-colors"aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></div><div class="flex-1 min-w-0"><h4 class="text-sm font-medium text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] truncate group-hover:text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:group-hover:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] transition-colors"></h4><!$><!/></div><svg xmlns=http://www.w3.org/2000/svg class="w-4 h-4 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] group-hover:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:group-hover:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] shrink-0 transition-colors"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1=10 y1=14 x2=21 y2=3>`), _tmpl$41 = /* @__PURE__ */ template(`<div class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-[color:var(--mcp-ui-warning-soft,var(--color-yellow-50))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-yellow-900)_20%,transparent))] border border-[color:var(--mcp-ui-warning-border,var(--color-yellow-200))] dark:border-[color:var(--mcp-ui-warning-border,var(--color-yellow-800))] text-xs text-[color:var(--mcp-ui-warning,var(--color-yellow-800))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-200))]"role=alert><svg xmlns=http://www.w3.org/2000/svg class="w-3.5 h-3.5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1=12 y1=9 x2=12 y2=13></line><line x1=12 y1=17 x2=12.01 y2=17></line></svg><span>`), _tmpl$42 = /* @__PURE__ */ template(`<div class="w-full h-full bg-[color:var(--mcp-ui-danger-soft,var(--color-red-50))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_20%,transparent))] border border-[color:var(--mcp-ui-danger-border,var(--color-red-200))] dark:border-[color:var(--mcp-ui-danger-border,var(--color-red-800))] rounded-lg p-4"><p class="text-sm font-medium text-[color:var(--mcp-ui-danger,var(--color-red-900))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-100))]"></p><p class="text-xs text-[color:var(--mcp-ui-danger,var(--color-red-700))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-300))] mt-1">`), _tmpl$43 = /* @__PURE__ */ template(`<div role=alert class="w-full rounded-lg border border-[color:var(--mcp-ui-warning-border,var(--color-amber-300))] bg-[color:var(--mcp-ui-warning-soft,var(--color-amber-50))] px-3 py-2 text-sm text-[color:var(--mcp-ui-warning,var(--color-amber-800))] dark:border-[color:var(--mcp-ui-warning-border,color-mix(in_oklab,var(--color-amber-700)_50%,transparent))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-amber-900)_20%,transparent))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-200))]"><!$><!/> <code class=font-mono>`), _tmpl$44 = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$45 = /* @__PURE__ */ template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$46 = /* @__PURE__ */ template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full"aria-hidden=true>`), _tmpl$47 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/><!$><!/>`), _tmpl$48 = /* @__PURE__ */ template(`<p class="text-xs text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))] mt-1">`), _tmpl$49 = /* @__PURE__ */ template(`<div class=mt-3><p class="text-xs font-medium text-[color:var(--mcp-ui-danger,var(--color-red-700))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-300))]"></p><ul class="mt-1 text-xs text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))] list-disc list-inside">`), _tmpl$50 = /* @__PURE__ */ template(`<p class="text-xs text-[color:var(--mcp-ui-danger,var(--color-red-500))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-500))] mt-2">`), _tmpl$51 = /* @__PURE__ */ template(`<div class="relative w-full bg-[color:var(--mcp-ui-danger-soft,var(--color-red-50))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_20%,transparent))] border border-[color:var(--mcp-ui-danger-border,var(--color-red-200))] dark:border-[color:var(--mcp-ui-danger-border,var(--color-red-800))] rounded-lg p-4 group"><!$><!/><div class="flex items-start gap-3"><div class="p-2 bg-[color:var(--mcp-ui-danger-soft,var(--color-red-100))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_40%,transparent))] rounded-full shrink-0"><svg class="w-5 h-5 text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><div class="flex-1 min-w-0"><h4 class="text-sm font-semibold text-[color:var(--mcp-ui-danger,var(--color-red-800))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-200))]"></h4><p class="text-sm text-[color:var(--mcp-ui-danger,var(--color-red-700))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-300))] mt-1"></p><!$><!/><!$><!/><!$><!/>`), _tmpl$52 = /* @__PURE__ */ template(`<li>`), _tmpl$53 = /* @__PURE__ */ template(`<div class="px-4 py-2 border-b border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-900,#111827))]"><h3 class="text-sm font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] capitalize">`), _tmpl$54 = /* @__PURE__ */ template(`<div class="w-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] overflow-hidden"><!$><!/><!$><!/>`), _tmpl$55 = /* @__PURE__ */ template(`<div><div class="grid gap-4"data-mcp-ui-grid></div><!$><!/>`), _tmpl$56 = /* @__PURE__ */ template(`<div class=min-w-0>`);
 function CopyButton(props) {
   const strings = useMCPUIStrings();
   const [copied, setCopied] = createSignal(false);
@@ -70,7 +72,7 @@ function CopyButton(props) {
       }
     }));
     effect((_p$) => {
-      var _v$ = `${positionClasses()} opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm z-10`, _v$2 = props.title || strings.copy, _v$3 = props.title || strings.copy;
+      var _v$ = `${positionClasses()} opacity-60 hover:opacity-100 px-2 py-1 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] z-10`, _v$2 = props.title || strings.copy, _v$3 = props.title || strings.copy;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && setAttribute(_el$, "title", _p$.t = _v$2);
       _v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
@@ -194,7 +196,8 @@ function ChartRenderer(props) {
                 return strings.chartQuickchartCaption;
               }
             }, () => chartToDegradedTable(params() ?? {}, {
-              series: strings.degradedSeries
+              series: strings.degradedSeries,
+              withUnit: strings.chartLabelWithUnit
             }))));
             return _el$7;
           }
@@ -284,7 +287,7 @@ function ChartRenderer(props) {
     }
   });
 }
-const HIGHLIGHT_MARK_CLASS = "bg-yellow-200 dark:bg-[#222F49] text-inherit rounded px-0.5";
+const HIGHLIGHT_MARK_CLASS = "bg-[color:var(--mcp-ui-highlight,var(--color-yellow-200))] dark:bg-[color:var(--mcp-ui-highlight,#222F49)] text-inherit rounded px-0.5";
 function highlightQuery(html, query) {
   var _a, _b;
   const q = query.trim();
@@ -333,9 +336,9 @@ function defaultCitationChip(pageNum, fileName, verified = true, viewSourceLabel
   const safeDocName = encodeURIComponent(fileName || "");
   const label = fileName ? `${fileName} - ${pageNum}` : `${pageNum}`;
   if (!verified) {
-    return `<span class="citation-ref inline-flex items-center gap-0.5 align-middle opacity-60"><span class="text-gray-500 line-through">[${label}]</span></span>`;
+    return `<span class="citation-ref inline-flex items-center gap-0.5 align-middle opacity-60"><span class="text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] line-through">[${label}]</span></span>`;
   }
-  return ['<span class="citation-ref inline-flex items-center gap-0.5 align-middle">', `<span class="text-gray-500">[${label}]</span>`, '<button class="inline-flex items-center ml-0.5 px-1 py-0.5 text-xs bg-gray-800 hover:bg-gray-700 border border-gray-600 hover:border-teal-500 rounded cursor-pointer transition-colors align-middle"', ` data-citation-page="${pageNum}"`, ` data-citation-doc="${safeDocName}"`, ' data-citation-verified="true"', ` title="${escapeHtml(formatMCPUIString(viewSourceLabel, {
+  return ['<span class="citation-ref inline-flex items-center gap-0.5 align-middle">', `<span class="text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))]">[${label}]</span>`, '<button class="inline-flex items-center ml-0.5 px-1 py-0.5 text-xs bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] border border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] hover:border-[color:var(--mcp-ui-info-border,var(--color-teal-500))] rounded cursor-pointer transition-colors align-middle"', ` data-citation-page="${pageNum}"`, ` data-citation-doc="${safeDocName}"`, ' data-citation-verified="true"', ` title="${escapeHtml(formatMCPUIString(viewSourceLabel, {
     label
   }))}">`, '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>', "</button>", "</span>"].join("");
 }
@@ -362,7 +365,7 @@ function renderCellValue(value, citationCtx, mathRenderer) {
       const label = value.name || value.label || value.title || value.url;
       const sanitizedLabel = sanitizeHtml(String(label));
       const sanitizedUrl = sanitizeHtml(String(value.url));
-      const anchor = `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 hover:underline">${sanitizedLabel}</a>`;
+      const anchor = `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer" class="text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] hover:underline">${sanitizedLabel}</a>`;
       return sanitizeHtml(anchor, SANITIZE_PROFILES.cellLink);
     }
     if (value.name || value.label || value.title) {
@@ -375,8 +378,7 @@ function renderCellValue(value, citationCtx, mathRenderer) {
     }
   }
   let strValue = String(value);
-  strValue = strValue.replace(/\s*[–-]\s*undefined\s*$/gi, "");
-  strValue = strValue.replace(/^undefined\s*[–-]\s*/gi, "");
+  strValue = stripUndefinedDebris(strValue);
   if (strValue.trim().toLowerCase() === "undefined") {
     return "-";
   }
@@ -388,7 +390,7 @@ function renderCellValue(value, citationCtx, mathRenderer) {
   }
   const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
   if (markdownLinkRegex.test(strValue)) {
-    const htmlValue = strValue.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 hover:underline">$1</a>');
+    const htmlValue = strValue.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] hover:underline">$1</a>');
     return sanitizeHtml(htmlValue, SANITIZE_PROFILES.cellLink);
   }
   if (citationCtx) {
@@ -447,12 +449,14 @@ function TableRenderer(props) {
     const dir = sortDir();
     if (!key || !dir) return r;
     const col = columns().find((c) => c.key === key);
-    const isNum = (col == null ? void 0 : col.type) === "number" || r.length > 0 && typeof ((_a = r[0]) == null ? void 0 : _a[key]) === "number";
+    const firstObserved = (_a = r.find((row) => !isMissingCellValue(row == null ? void 0 : row[key]))) == null ? void 0 : _a[key];
+    const isNum = (col == null ? void 0 : col.type) === "number" || typeof firstObserved === "number";
     return [...r].sort((a, b) => {
       const va = a[key], vb = b[key];
-      if (va == null && vb == null) return 0;
-      if (va == null) return 1;
-      if (vb == null) return -1;
+      const missA = isMissingCellValue(va), missB = isMissingCellValue(vb);
+      if (missA && missB) return 0;
+      if (missA) return 1;
+      if (missB) return -1;
       let cmp;
       if (isNum) {
         cmp = (Number(va) || 0) - (Number(vb) || 0);
@@ -488,7 +492,7 @@ function TableRenderer(props) {
     const cols = columns();
     return sortedRows().filter((row) => cols.some((col) => {
       const val = row[col.key];
-      if (val == null) return false;
+      if (isMissingCellValue(val)) return false;
       return normalize(String(val)).includes(q);
     }));
   });
@@ -656,6 +660,10 @@ ${dataRows}`;
     }
   };
   const tableId = `table-${Math.random().toString(36).slice(2, 9)}`;
+  const hasMissingCells = createMemo(() => {
+    const cols = columns();
+    return allRows().some((row) => cols.some((col) => isMissingCellValue(row == null ? void 0 : row[col.key])));
+  });
   const StandardTableBody = () => (() => {
     var _el$25 = getNextElement(_tmpl$1);
     insert(_el$25, createComponent(For, {
@@ -670,13 +678,23 @@ ${dataRows}`;
           },
           children: (column) => (() => {
             var _el$27 = getNextElement(_tmpl$11);
-            insert(_el$27, createComponent(SafeHtml, {
-              html: () => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())
+            insert(_el$27, createComponent(Show, {
+              get when() {
+                return !isMissingCellValue(row[column.key]);
+              },
+              get fallback() {
+                return createComponent(MissingValueMark, {});
+              },
+              get children() {
+                return createComponent(SafeHtml, {
+                  html: () => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())
+                });
+              }
             }));
             return _el$27;
           })()
         }));
-        effect(() => className(_el$26, `hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${i() % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50/30 dark:bg-gray-800/50"}`));
+        effect(() => className(_el$26, `hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,color-mix(in_oklab,var(--color-gray-700,#374151)_50%,transparent))] transition-colors ${i() % 2 === 0 ? "bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))]" : "bg-[color:var(--mcp-ui-surface-muted,color-mix(in_oklab,var(--color-gray-50,#f9fafb)_30%,transparent))] dark:bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-gray-800,#1f2937)_50%,transparent))]"}`));
         return _el$26;
       })()
     }));
@@ -705,14 +723,24 @@ ${dataRows}`;
               },
               children: (column) => (() => {
                 var _el$30 = getNextElement(_tmpl$11);
-                insert(_el$30, createComponent(SafeHtml, {
-                  html: () => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())
+                insert(_el$30, createComponent(Show, {
+                  get when() {
+                    return !isMissingCellValue(row[column.key]);
+                  },
+                  get fallback() {
+                    return createComponent(MissingValueMark, {});
+                  },
+                  get children() {
+                    return createComponent(SafeHtml, {
+                      html: () => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())
+                    });
+                  }
                 }));
                 return _el$30;
               })()
             }));
             effect((_p$) => {
-              var _v$7 = `hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors absolute left-0 right-0 ${virtualRow.index % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50/30 dark:bg-gray-800/50"}`, _v$8 = `translateY(${virtualRow.start}px)`;
+              var _v$7 = `hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,color-mix(in_oklab,var(--color-gray-700,#374151)_50%,transparent))] transition-colors absolute left-0 right-0 ${virtualRow.index % 2 === 0 ? "bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))]" : "bg-[color:var(--mcp-ui-surface-muted,color-mix(in_oklab,var(--color-gray-50,#f9fafb)_30%,transparent))] dark:bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-gray-800,#1f2937)_50%,transparent))]"}`, _v$8 = `translateY(${virtualRow.start}px)`;
               _v$7 !== _p$.e && className(_el$29, _p$.e = _v$7);
               _v$8 !== _p$.t && setStyleProperty(_el$29, "transform", _p$.t = _v$8);
               return _p$;
@@ -742,7 +770,7 @@ ${dataRows}`;
     },
     onExpandedChange: setSelfExpanded,
     get children() {
-      var _el$31 = getNextElement(_tmpl$24), _el$92 = _el$31.firstChild, [_el$93, _co$19] = getNextMarker(_el$92.nextSibling), _el$39 = _el$93.nextSibling, _el$84 = _el$39.firstChild, [_el$85, _co$15] = getNextMarker(_el$84.nextSibling), _el$86 = _el$85.nextSibling, [_el$87, _co$16] = getNextMarker(_el$86.nextSibling), _el$53 = _el$87.nextSibling, _el$54 = _el$53.firstChild, _el$55 = _el$54.firstChild, _el$56 = _el$55.firstChild, _el$57 = _el$55.nextSibling, [_el$58, _co$0] = getNextMarker(_el$57.nextSibling), _el$88 = _el$53.nextSibling, [_el$89, _co$17] = getNextMarker(_el$88.nextSibling), _el$90 = _el$89.nextSibling, [_el$91, _co$18] = getNextMarker(_el$90.nextSibling);
+      var _el$31 = getNextElement(_tmpl$24), _el$94 = _el$31.firstChild, [_el$95, _co$20] = getNextMarker(_el$94.nextSibling), _el$39 = _el$95.nextSibling, _el$84 = _el$39.firstChild, [_el$85, _co$15] = getNextMarker(_el$84.nextSibling), _el$86 = _el$85.nextSibling, [_el$87, _co$16] = getNextMarker(_el$86.nextSibling), _el$53 = _el$87.nextSibling, _el$54 = _el$53.firstChild, _el$55 = _el$54.firstChild, _el$56 = _el$55.firstChild, _el$57 = _el$55.nextSibling, [_el$58, _co$0] = getNextMarker(_el$57.nextSibling), _el$88 = _el$53.nextSibling, [_el$89, _co$17] = getNextMarker(_el$88.nextSibling), _el$90 = _el$89.nextSibling, [_el$91, _co$18] = getNextMarker(_el$90.nextSibling), _el$92 = _el$91.nextSibling, [_el$93, _co$19] = getNextMarker(_el$92.nextSibling);
       insert(_el$31, createComponent(Show, {
         when: exportable,
         get fallback() {
@@ -817,7 +845,7 @@ ${dataRows}`;
           runHydrationEvents();
           return _el$32;
         }
-      }), _el$93, _co$19);
+      }), _el$95, _co$20);
       insert(_el$39, createComponent(Show, {
         get when() {
           return tableParams.title;
@@ -894,10 +922,10 @@ ${dataRows}`;
           return tableParams.columns;
         },
         children: (column) => (() => {
-          var _el$94 = getNextElement(_tmpl$25), _el$95 = _el$94.firstChild, _el$97 = _el$95.firstChild, [_el$98, _co$20] = getNextMarker(_el$97.nextSibling), _el$96 = _el$98.nextSibling;
-          addEventListener(_el$94, "click", () => handleSort(column.key));
-          insert(_el$95, () => column.label, _el$98, _co$20);
-          insert(_el$96, () => sortIndicator(column.key));
+          var _el$96 = getNextElement(_tmpl$25), _el$97 = _el$96.firstChild, _el$99 = _el$97.firstChild, [_el$100, _co$21] = getNextMarker(_el$99.nextSibling), _el$98 = _el$100.nextSibling;
+          addEventListener(_el$96, "click", () => handleSort(column.key));
+          insert(_el$97, () => column.label, _el$100, _co$21);
+          insert(_el$98, () => sortIndicator(column.key));
           effect((_p$) => {
             var _v$20 = column.width ? {
               width: column.width
@@ -905,18 +933,18 @@ ${dataRows}`;
               column: column.label
             }), _v$22 = {
               "opacity-30": sortKey() !== column.key,
-              "opacity-100 text-blue-600 dark:text-blue-400": sortKey() === column.key
+              "opacity-100 text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))]": sortKey() === column.key
             };
-            _p$.e = style(_el$94, _v$20, _p$.e);
-            _v$21 !== _p$.t && setAttribute(_el$94, "title", _p$.t = _v$21);
-            _p$.a = classList(_el$96, _v$22, _p$.a);
+            _p$.e = style(_el$96, _v$20, _p$.e);
+            _v$21 !== _p$.t && setAttribute(_el$96, "title", _p$.t = _v$21);
+            _p$.a = classList(_el$98, _v$22, _p$.a);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          return _el$94;
+          return _el$96;
         })()
       }));
       insert(_el$54, createComponent(Show, {
@@ -930,6 +958,16 @@ ${dataRows}`;
           return createComponent(VirtualizedTableBody, {});
         }
       }), _el$58, _co$0);
+      insert(_el$39, createComponent(Show, {
+        get when() {
+          return hasMissingCells();
+        },
+        get children() {
+          return createComponent(MissingValueLegend, {
+            "class": "mt-2 px-1"
+          });
+        }
+      }), _el$89, _co$17);
       insert(_el$39, createComponent(Show, {
         get when() {
           return tableParams.pagination;
@@ -943,7 +981,7 @@ ${dataRows}`;
           }));
           return _el$59;
         }
-      }), _el$89, _co$17);
+      }), _el$91, _co$18);
       insert(_el$39, createComponent(Show, {
         get when() {
           return needsClientPagination();
@@ -970,10 +1008,10 @@ ${dataRows}`;
                     return pageSizeOptions();
                   },
                   children: (opt) => (() => {
-                    var _el$99 = getNextElement(_tmpl$26);
-                    insert(_el$99, () => opt.label);
-                    effect(() => setProperty(_el$99, "value", opt.value));
-                    return _el$99;
+                    var _el$101 = getNextElement(_tmpl$26);
+                    insert(_el$101, () => opt.label);
+                    effect(() => setProperty(_el$101, "value", opt.value));
+                    return _el$101;
                   })()
                 }));
                 effect(() => setAttribute(_el$80, "aria-label", strings.paginationPageSize));
@@ -1002,9 +1040,9 @@ ${dataRows}`;
           runHydrationEvents();
           return _el$61;
         }
-      }), _el$91, _co$18);
+      }), _el$93, _co$19);
       effect((_p$) => {
-        var _v$14 = `relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden group ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : "h-full"} ${tableParams.className || ""}`, _v$15 = `p-4 ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`, _v$16 = `overflow-x-auto ${isExpanded() ? "flex-1 min-h-0" : ""}`, _v$17 = (
+        var _v$14 = `relative w-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] overflow-hidden group ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : "h-full"} ${tableParams.className || ""}`, _v$15 = `p-4 ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`, _v$16 = `overflow-x-auto ${isExpanded() ? "flex-1 min-h-0" : ""}`, _v$17 = (
           // v6.1.0 — when expanded, the scroll container fills the
           // remaining vertical space and scrolls internally.
           // v6.3.0 — `params.maxHeight` opt-out (axe 1 deposium handoff)
@@ -1063,53 +1101,53 @@ function MetricRenderer(props) {
     return `${title}: ${value}${unit ? " " + unit : ""}`;
   };
   return (() => {
-    var _el$100 = getNextElement(_tmpl$30), _el$122 = _el$100.firstChild, [_el$123, _co$26] = getNextMarker(_el$122.nextSibling), _el$101 = _el$123.nextSibling, _el$102 = _el$101.firstChild, _el$103 = _el$102.firstChild, _el$104 = _el$103.nextSibling, _el$105 = _el$104.firstChild, _el$107 = _el$105.nextSibling, [_el$108, _co$21] = getNextMarker(_el$107.nextSibling), _el$118 = _el$102.nextSibling, [_el$119, _co$24] = getNextMarker(_el$118.nextSibling), _el$120 = _el$119.nextSibling, [_el$121, _co$25] = getNextMarker(_el$120.nextSibling);
-    insert(_el$100, createComponent(CopyButton, {
+    var _el$102 = getNextElement(_tmpl$30), _el$124 = _el$102.firstChild, [_el$125, _co$27] = getNextMarker(_el$124.nextSibling), _el$103 = _el$125.nextSibling, _el$104 = _el$103.firstChild, _el$105 = _el$104.firstChild, _el$106 = _el$105.nextSibling, _el$107 = _el$106.firstChild, _el$109 = _el$107.nextSibling, [_el$110, _co$22] = getNextMarker(_el$109.nextSibling), _el$120 = _el$104.nextSibling, [_el$121, _co$25] = getNextMarker(_el$120.nextSibling), _el$122 = _el$121.nextSibling, [_el$123, _co$26] = getNextMarker(_el$122.nextSibling);
+    insert(_el$102, createComponent(CopyButton, {
       getText: getMetricText,
       get title() {
         return strings.copyMetric;
       },
       position: "top-right"
-    }), _el$123, _co$26);
-    insert(_el$103, () => metricParams.title);
-    insert(_el$105, () => metricParams.value);
-    insert(_el$104, createComponent(Show, {
+    }), _el$125, _co$27);
+    insert(_el$105, () => metricParams.title);
+    insert(_el$107, () => metricParams.value);
+    insert(_el$106, createComponent(Show, {
       get when() {
         return metricParams.unit;
       },
       get children() {
-        var _el$106 = getNextElement(_tmpl$27);
-        insert(_el$106, () => metricParams.unit);
-        return _el$106;
+        var _el$108 = getNextElement(_tmpl$27);
+        insert(_el$108, () => metricParams.unit);
+        return _el$108;
       }
-    }), _el$108, _co$21);
-    insert(_el$101, createComponent(Show, {
+    }), _el$110, _co$22);
+    insert(_el$103, createComponent(Show, {
       get when() {
         return metricParams.trend;
       },
       get children() {
-        var _el$109 = getNextElement(_tmpl$28), _el$110 = _el$109.firstChild, _el$113 = _el$110.firstChild, [_el$114, _co$22] = getNextMarker(_el$113.nextSibling), _el$111 = _el$114.nextSibling, _el$115 = _el$111.nextSibling, [_el$116, _co$23] = getNextMarker(_el$115.nextSibling);
-        _el$116.nextSibling;
-        insert(_el$110, (() => {
+        var _el$111 = getNextElement(_tmpl$28), _el$112 = _el$111.firstChild, _el$115 = _el$112.firstChild, [_el$116, _co$23] = getNextMarker(_el$115.nextSibling), _el$113 = _el$116.nextSibling, _el$117 = _el$113.nextSibling, [_el$118, _co$24] = getNextMarker(_el$117.nextSibling);
+        _el$118.nextSibling;
+        insert(_el$112, (() => {
           var _c$ = memo(() => metricParams.trend.direction === "up");
           return () => _c$() ? "�" : metricParams.trend.direction === "down" ? "�" : "�";
-        })(), _el$114, _co$22);
-        insert(_el$110, () => Math.abs(metricParams.trend.value), _el$116, _co$23);
-        effect(() => className(_el$110, `text-sm font-medium ${metricParams.trend.direction === "up" ? "text-green-600 dark:text-green-400" : metricParams.trend.direction === "down" ? "text-red-600 dark:text-red-400" : "text-gray-600 dark:text-gray-400"}`));
-        return _el$109;
+        })(), _el$116, _co$23);
+        insert(_el$112, () => Math.abs(metricParams.trend.value), _el$118, _co$24);
+        effect(() => className(_el$112, `text-sm font-medium ${metricParams.trend.direction === "up" ? "text-[color:var(--mcp-ui-success,var(--color-green-600))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]" : metricParams.trend.direction === "down" ? "text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]" : "text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"}`));
+        return _el$111;
       }
-    }), _el$119, _co$24);
-    insert(_el$101, createComponent(Show, {
+    }), _el$121, _co$25);
+    insert(_el$103, createComponent(Show, {
       get when() {
         return metricParams.subtitle;
       },
       get children() {
-        var _el$117 = getNextElement(_tmpl$29);
-        insert(_el$117, () => metricParams.subtitle);
-        return _el$117;
+        var _el$119 = getNextElement(_tmpl$29);
+        insert(_el$119, () => metricParams.subtitle);
+        return _el$119;
       }
-    }), _el$121, _co$25);
-    return _el$100;
+    }), _el$123, _co$26);
+    return _el$102;
   })();
 }
 function extractImageFromMarkdown(content, fallbackAlt) {
@@ -1169,40 +1207,40 @@ function TextRenderer(props) {
     },
     get fallback() {
       return (() => {
-        var _el$124 = getNextElement(_tmpl$31), _el$125 = _el$124.firstChild, [_el$126, _co$27] = getNextMarker(_el$125.nextSibling), _el$127 = _el$126.nextSibling, [_el$128, _co$28] = getNextMarker(_el$127.nextSibling);
-        insert(_el$124, createComponent(CopyButton, {
+        var _el$126 = getNextElement(_tmpl$31), _el$127 = _el$126.firstChild, [_el$128, _co$28] = getNextMarker(_el$127.nextSibling), _el$129 = _el$128.nextSibling, [_el$130, _co$29] = getNextMarker(_el$129.nextSibling);
+        insert(_el$126, createComponent(CopyButton, {
           getText: getTextContent,
           get title() {
             return strings.copyText;
           },
           position: "top-right"
-        }), _el$126, _co$27);
-        insert(_el$124, createComponent(SafeHtml, {
+        }), _el$128, _co$28);
+        insert(_el$126, createComponent(SafeHtml, {
           get ["class"]() {
             return `prose prose-sm dark:prose-invert max-w-none ${textParams.className || ""}`;
           },
           html: htmlContent
-        }), _el$128, _co$28);
-        return _el$124;
+        }), _el$130, _co$29);
+        return _el$126;
       })();
     },
     children: (data) => {
       const image = () => (() => {
-        var _el$129 = getNextElement(_tmpl$32);
+        var _el$131 = getNextElement(_tmpl$32);
         effect((_p$) => {
           var _v$23 = data().imageUrl, _v$24 = data().alt;
-          _v$23 !== _p$.e && setAttribute(_el$129, "src", _p$.e = _v$23);
-          _v$24 !== _p$.t && setAttribute(_el$129, "alt", _p$.t = _v$24);
+          _v$23 !== _p$.e && setAttribute(_el$131, "src", _p$.e = _v$23);
+          _v$24 !== _p$.t && setAttribute(_el$131, "alt", _p$.t = _v$24);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$129;
+        return _el$131;
       })();
       return (() => {
-        var _el$130 = getNextElement(_tmpl$33), _el$131 = _el$130.firstChild, _el$132 = _el$131.nextSibling, _el$133 = _el$132.firstChild;
-        insert(_el$131, createComponent(Show, {
+        var _el$132 = getNextElement(_tmpl$33), _el$133 = _el$132.firstChild, _el$134 = _el$133.nextSibling, _el$135 = _el$134.firstChild;
+        insert(_el$133, createComponent(Show, {
           get when() {
             return data().linkUrl;
           },
@@ -1210,14 +1248,14 @@ function TextRenderer(props) {
             return image();
           },
           children: (href) => (() => {
-            var _el$134 = getNextElement(_tmpl$34);
-            insert(_el$134, image);
-            effect(() => setAttribute(_el$134, "href", href()));
-            return _el$134;
+            var _el$136 = getNextElement(_tmpl$34);
+            insert(_el$136, image);
+            effect(() => setAttribute(_el$136, "href", href()));
+            return _el$136;
           })()
         }));
-        insert(_el$133, () => data().credit);
-        return _el$130;
+        insert(_el$135, () => data().credit);
+        return _el$132;
       })();
     }
   });
@@ -1230,34 +1268,34 @@ function IframeRenderer(props) {
     customTrustedDomains: config.customTrustedIframeDomains
   });
   return (() => {
-    var _el$135 = getNextElement(_tmpl$36), _el$139 = _el$135.firstChild, [_el$140, _co$29] = getNextMarker(_el$139.nextSibling), _el$138 = _el$140.nextSibling, _el$141 = _el$138.nextSibling, [_el$142, _co$30] = getNextMarker(_el$141.nextSibling);
-    insert(_el$135, createComponent(Show, {
+    var _el$137 = getNextElement(_tmpl$36), _el$141 = _el$137.firstChild, [_el$142, _co$30] = getNextMarker(_el$141.nextSibling), _el$140 = _el$142.nextSibling, _el$143 = _el$140.nextSibling, [_el$144, _co$31] = getNextMarker(_el$143.nextSibling);
+    insert(_el$137, createComponent(Show, {
       get when() {
         return params.title;
       },
       get children() {
-        var _el$136 = getNextElement(_tmpl$35), _el$137 = _el$136.firstChild;
-        insert(_el$137, () => params.title);
-        return _el$136;
+        var _el$138 = getNextElement(_tmpl$35), _el$139 = _el$138.firstChild;
+        insert(_el$139, () => params.title);
+        return _el$138;
       }
-    }), _el$140, _co$29);
-    insert(_el$135, createComponent(IframeFallbackLink, {
+    }), _el$142, _co$30);
+    insert(_el$137, createComponent(IframeFallbackLink, {
       get url() {
         return params.url;
       },
-      "class": "border-t border-gray-200 dark:border-gray-700"
-    }), _el$142, _co$30);
+      "class": "border-t border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]"
+    }), _el$144, _co$31);
     effect((_p$) => {
       var _v$25 = params.url, _v$26 = params.title || strings.iframeTitle, _v$27 = `height: ${params.height || "400px"}; min-height: 300px;`, _v$28 = getIframeSandbox(params.url, trustOptions()), _v$29 = shouldSetCredentialless(params.url, config, {
         // This iframe's sandbox never carries `allow-same-origin` for an
         // untrusted host, so it already runs without cookies.
         sandboxedWithoutSameOrigin: !isTrustedIframeDomain(params.url, trustOptions())
       }) || void 0;
-      _v$25 !== _p$.e && setAttribute(_el$138, "src", _p$.e = _v$25);
-      _v$26 !== _p$.t && setAttribute(_el$138, "title", _p$.t = _v$26);
-      _p$.a = style(_el$138, _v$27, _p$.a);
-      _v$28 !== _p$.o && setAttribute(_el$138, "sandbox", _p$.o = _v$28);
-      _v$29 !== _p$.i && setAttribute(_el$138, "credentialless", _p$.i = _v$29);
+      _v$25 !== _p$.e && setAttribute(_el$140, "src", _p$.e = _v$25);
+      _v$26 !== _p$.t && setAttribute(_el$140, "title", _p$.t = _v$26);
+      _p$.a = style(_el$140, _v$27, _p$.a);
+      _v$28 !== _p$.o && setAttribute(_el$140, "sandbox", _p$.o = _v$28);
+      _v$29 !== _p$.i && setAttribute(_el$140, "credentialless", _p$.i = _v$29);
       return _p$;
     }, {
       e: void 0,
@@ -1266,35 +1304,35 @@ function IframeRenderer(props) {
       o: void 0,
       i: void 0
     });
-    return _el$135;
+    return _el$137;
   })();
 }
 function ImageRenderer(props) {
   const strings = useMCPUIStrings();
   const params = props.component.params;
   return (() => {
-    var _el$143 = getNextElement(_tmpl$38), _el$144 = _el$143.firstChild, _el$145 = _el$144.firstChild, _el$146 = _el$145.firstChild, _el$149 = _el$144.nextSibling, [_el$150, _co$31] = getNextMarker(_el$149.nextSibling);
-    insert(_el$143, createComponent(Show, {
+    var _el$145 = getNextElement(_tmpl$38), _el$146 = _el$145.firstChild, _el$147 = _el$146.firstChild, _el$148 = _el$147.firstChild, _el$151 = _el$146.nextSibling, [_el$152, _co$32] = getNextMarker(_el$151.nextSibling);
+    insert(_el$145, createComponent(Show, {
       get when() {
         return params.caption;
       },
       get children() {
-        var _el$147 = getNextElement(_tmpl$37), _el$148 = _el$147.firstChild;
-        insert(_el$148, () => params.caption);
-        return _el$147;
+        var _el$149 = getNextElement(_tmpl$37), _el$150 = _el$149.firstChild;
+        insert(_el$150, () => params.caption);
+        return _el$149;
       }
-    }), _el$150, _co$31);
+    }), _el$152, _co$32);
     effect((_p$) => {
-      var _v$30 = `w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col ${params.className || ""}`, _v$31 = safeUrl(params.url), _v$32 = formatMCPUIString(strings.imageViewFullSize, {
+      var _v$30 = `w-full h-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] overflow-hidden flex flex-col ${params.className || ""}`, _v$31 = safeUrl(params.url), _v$32 = formatMCPUIString(strings.imageViewFullSize, {
         alt: params.alt || strings.imageAltFallback
       }), _v$33 = safeUrl(params.url, {
         allowDataImage: true
       }), _v$34 = params.alt || strings.imageAlt;
-      _v$30 !== _p$.e && className(_el$143, _p$.e = _v$30);
-      _v$31 !== _p$.t && setAttribute(_el$145, "href", _p$.t = _v$31);
-      _v$32 !== _p$.a && setAttribute(_el$145, "aria-label", _p$.a = _v$32);
-      _v$33 !== _p$.o && setAttribute(_el$146, "src", _p$.o = _v$33);
-      _v$34 !== _p$.i && setAttribute(_el$146, "alt", _p$.i = _v$34);
+      _v$30 !== _p$.e && className(_el$145, _p$.e = _v$30);
+      _v$31 !== _p$.t && setAttribute(_el$147, "href", _p$.t = _v$31);
+      _v$32 !== _p$.a && setAttribute(_el$147, "aria-label", _p$.a = _v$32);
+      _v$33 !== _p$.o && setAttribute(_el$148, "src", _p$.o = _v$33);
+      _v$34 !== _p$.i && setAttribute(_el$148, "alt", _p$.i = _v$34);
       return _p$;
     }, {
       e: void 0,
@@ -1303,34 +1341,34 @@ function ImageRenderer(props) {
       o: void 0,
       i: void 0
     });
-    return _el$143;
+    return _el$145;
   })();
 }
 function LinkRenderer(props) {
   const strings = useMCPUIStrings();
   const params = props.component.params;
   return (() => {
-    var _el$151 = getNextElement(_tmpl$40), _el$152 = _el$151.firstChild, _el$153 = _el$152.nextSibling, _el$154 = _el$153.firstChild, _el$156 = _el$154.nextSibling, [_el$157, _co$32] = getNextMarker(_el$156.nextSibling);
-    _el$151.$$click = (e) => e.stopPropagation();
-    insert(_el$154, () => params.label || params.url);
-    insert(_el$153, createComponent(Show, {
+    var _el$153 = getNextElement(_tmpl$40), _el$154 = _el$153.firstChild, _el$155 = _el$154.nextSibling, _el$156 = _el$155.firstChild, _el$158 = _el$156.nextSibling, [_el$159, _co$33] = getNextMarker(_el$158.nextSibling);
+    _el$153.$$click = (e) => e.stopPropagation();
+    insert(_el$156, () => params.label || params.url);
+    insert(_el$155, createComponent(Show, {
       get when() {
         return params.description;
       },
       get children() {
-        var _el$155 = getNextElement(_tmpl$39);
-        insert(_el$155, () => params.description);
-        return _el$155;
+        var _el$157 = getNextElement(_tmpl$39);
+        insert(_el$157, () => params.description);
+        return _el$157;
       }
-    }), _el$157, _co$32);
+    }), _el$159, _co$33);
     effect((_p$) => {
       var _v$35 = safeUrl(params.url), _v$36 = formatMCPUIString(strings.linkOpensInNewTab, {
         label: params.label || strings.linkLabel,
         description: params.description || params.url
-      }), _v$37 = `flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group h-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${params.className || ""}`;
-      _v$35 !== _p$.e && setAttribute(_el$151, "href", _p$.e = _v$35);
-      _v$36 !== _p$.t && setAttribute(_el$151, "aria-label", _p$.t = _v$36);
-      _v$37 !== _p$.a && className(_el$151, _p$.a = _v$37);
+      }), _v$37 = `flex items-center gap-3 p-4 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-colors group h-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))] ${params.className || ""}`;
+      _v$35 !== _p$.e && setAttribute(_el$153, "href", _p$.e = _v$35);
+      _v$36 !== _p$.t && setAttribute(_el$153, "aria-label", _p$.t = _v$36);
+      _v$37 !== _p$.a && className(_el$153, _p$.a = _v$37);
       return _p$;
     }, {
       e: void 0,
@@ -1338,7 +1376,7 @@ function LinkRenderer(props) {
       a: void 0
     });
     runHydrationEvents();
-    return _el$151;
+    return _el$153;
   })();
 }
 function ComponentRenderer(props) {
@@ -1417,20 +1455,20 @@ function ComponentRenderer(props) {
     }
     if (mode === "inline-warn") {
       return (() => {
-        var _el$158 = getNextElement(_tmpl$41), _el$159 = _el$158.firstChild, _el$160 = _el$159.nextSibling;
-        setAttribute(_el$158, "title", firstError);
-        insert(_el$160, () => formatMCPUIString(strings.invalidComponent, {
+        var _el$160 = getNextElement(_tmpl$41), _el$161 = _el$160.firstChild, _el$162 = _el$161.nextSibling;
+        setAttribute(_el$160, "title", firstError);
+        insert(_el$162, () => formatMCPUIString(strings.invalidComponent, {
           type: props.component.type
         }));
-        effect(() => setAttribute(_el$158, "aria-label", strings.validationWarning));
-        return _el$158;
+        effect(() => setAttribute(_el$160, "aria-label", strings.validationWarning));
+        return _el$160;
       })();
     }
     return (() => {
-      var _el$161 = getNextElement(_tmpl$42), _el$162 = _el$161.firstChild, _el$163 = _el$162.nextSibling;
-      insert(_el$162, () => strings.validationError);
-      insert(_el$163, firstError);
-      return _el$161;
+      var _el$163 = getNextElement(_tmpl$42), _el$164 = _el$163.firstChild, _el$165 = _el$164.nextSibling;
+      insert(_el$164, () => strings.validationError);
+      insert(_el$165, firstError);
+      return _el$163;
     })();
   }
   return createComponent(GenerativeUIErrorBoundary, {
@@ -1724,10 +1762,10 @@ function ComponentRenderer(props) {
 function UnsupportedComponentFallback(props) {
   const strings = useMCPUIStrings();
   return (() => {
-    var _el$164 = getNextElement(_tmpl$43), _el$167 = _el$164.firstChild, [_el$168, _co$33] = getNextMarker(_el$167.nextSibling), _el$165 = _el$168.nextSibling, _el$166 = _el$165.nextSibling;
-    insert(_el$164, () => strings.unsupportedComponentType, _el$168, _co$33);
-    insert(_el$166, () => props.component.type);
-    return _el$164;
+    var _el$166 = getNextElement(_tmpl$43), _el$169 = _el$166.firstChild, [_el$170, _co$34] = getNextMarker(_el$169.nextSibling), _el$167 = _el$170.nextSibling, _el$168 = _el$167.nextSibling;
+    insert(_el$166, () => strings.unsupportedComponentType, _el$170, _co$34);
+    insert(_el$168, () => props.component.type);
+    return _el$166;
   })();
 }
 function ActionRenderer(props) {
@@ -1767,27 +1805,27 @@ function ActionRenderer(props) {
   const isDisabled = () => params.disabled || isExecutable() && isExecuting();
   if (params.type === "link" || params.action === "link") {
     return (() => {
-      var _el$169 = getNextElement(_tmpl$45), _el$171 = _el$169.firstChild, [_el$172, _co$34] = getNextMarker(_el$171.nextSibling), _el$173 = _el$172.nextSibling, [_el$174, _co$35] = getNextMarker(_el$173.nextSibling);
-      _el$169.$$click = handleClick;
-      insert(_el$169, createComponent(Show, {
+      var _el$171 = getNextElement(_tmpl$45), _el$173 = _el$171.firstChild, [_el$174, _co$35] = getNextMarker(_el$173.nextSibling), _el$175 = _el$174.nextSibling, [_el$176, _co$36] = getNextMarker(_el$175.nextSibling);
+      _el$171.$$click = handleClick;
+      insert(_el$171, createComponent(Show, {
         get when() {
           return params.icon;
         },
         get children() {
-          var _el$170 = getNextElement(_tmpl$44);
-          insert(_el$170, () => params.icon);
-          return _el$170;
+          var _el$172 = getNextElement(_tmpl$44);
+          insert(_el$172, () => params.icon);
+          return _el$172;
         }
-      }), _el$172, _co$34);
-      insert(_el$169, () => params.label, _el$174, _co$35);
+      }), _el$174, _co$35);
+      insert(_el$171, () => params.label, _el$176, _co$36);
       effect((_p$) => {
-        var _v$38 = safeUrl(params.url) ?? "#", _v$39 = safeUrl(params.url) ? "_blank" : void 0, _v$40 = params.ariaLabel || params.label, _v$41 = `inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
-          ${params.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : params.variant === "outline" ? "border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800" : "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"}
+        var _v$38 = safeUrl(params.url) ?? "#", _v$39 = safeUrl(params.url) ? "_blank" : void 0, _v$40 = params.ariaLabel || params.label, _v$41 = `inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]
+          ${params.variant === "primary" ? "bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))]" : params.variant === "outline" ? "border border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-800,#1f2937))]" : "text-[color:var(--mcp-ui-accent,var(--color-blue-600))] hover:text-[color:var(--mcp-ui-accent,var(--color-blue-800))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] dark:hover:text-[color:var(--mcp-ui-accent,var(--color-blue-300))]"}
           ${params.className || ""}`;
-        _v$38 !== _p$.e && setAttribute(_el$169, "href", _p$.e = _v$38);
-        _v$39 !== _p$.t && setAttribute(_el$169, "target", _p$.t = _v$39);
-        _v$40 !== _p$.a && setAttribute(_el$169, "aria-label", _p$.a = _v$40);
-        _v$41 !== _p$.o && className(_el$169, _p$.o = _v$41);
+        _v$38 !== _p$.e && setAttribute(_el$171, "href", _p$.e = _v$38);
+        _v$39 !== _p$.t && setAttribute(_el$171, "target", _p$.t = _v$39);
+        _v$40 !== _p$.a && setAttribute(_el$171, "aria-label", _p$.a = _v$40);
+        _v$41 !== _p$.o && className(_el$171, _p$.o = _v$41);
         return _p$;
       }, {
         e: void 0,
@@ -1796,41 +1834,41 @@ function ActionRenderer(props) {
         o: void 0
       });
       runHydrationEvents();
-      return _el$169;
+      return _el$171;
     })();
   }
   return (() => {
-    var _el$175 = getNextElement(_tmpl$47), _el$178 = _el$175.firstChild, [_el$179, _co$36] = getNextMarker(_el$178.nextSibling), _el$180 = _el$179.nextSibling, [_el$181, _co$37] = getNextMarker(_el$180.nextSibling), _el$182 = _el$181.nextSibling, [_el$183, _co$38] = getNextMarker(_el$182.nextSibling);
-    _el$175.$$click = handleClick;
-    insert(_el$175, createComponent(Show, {
+    var _el$177 = getNextElement(_tmpl$47), _el$180 = _el$177.firstChild, [_el$181, _co$37] = getNextMarker(_el$180.nextSibling), _el$182 = _el$181.nextSibling, [_el$183, _co$38] = getNextMarker(_el$182.nextSibling), _el$184 = _el$183.nextSibling, [_el$185, _co$39] = getNextMarker(_el$184.nextSibling);
+    _el$177.$$click = handleClick;
+    insert(_el$177, createComponent(Show, {
       get when() {
         return memo(() => !!isExecuting())() && isExecutable();
       },
       get children() {
         return getNextElement(_tmpl$46);
       }
-    }), _el$179, _co$36);
-    insert(_el$175, createComponent(Show, {
+    }), _el$181, _co$37);
+    insert(_el$177, createComponent(Show, {
       get when() {
         return memo(() => !!params.icon)() && !(isExecuting() && isExecutable());
       },
       get children() {
-        var _el$177 = getNextElement(_tmpl$44);
-        insert(_el$177, () => params.icon);
-        return _el$177;
+        var _el$179 = getNextElement(_tmpl$44);
+        insert(_el$179, () => params.icon);
+        return _el$179;
       }
-    }), _el$181, _co$37);
-    insert(_el$175, () => params.label, _el$183, _co$38);
+    }), _el$183, _co$38);
+    insert(_el$177, () => params.label, _el$185, _co$39);
     effect((_p$) => {
-      var _v$42 = isDisabled(), _v$43 = isExecuting() && isExecutable(), _v$44 = params.ariaLabel || params.label, _v$45 = `inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
-        ${params.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700 shadow-sm" : params.variant === "secondary" ? "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" : params.variant === "outline" ? "border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800" : params.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"}
+      var _v$42 = isDisabled(), _v$43 = isExecuting() && isExecutable(), _v$44 = params.ariaLabel || params.label, _v$45 = `inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]
+        ${params.variant === "primary" ? "bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]" : params.variant === "secondary" ? "bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-100,#f3f4f6))] text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-200,#e5e7eb))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-600,#4b5563))]" : params.variant === "outline" ? "border border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-800,#1f2937))]" : params.variant === "danger" ? "bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))]" : "bg-transparent text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-800,#1f2937))]"}
         ${isDisabled() ? "opacity-50 cursor-not-allowed" : ""}
         ${params.size === "sm" ? "px-3 py-1.5 text-xs" : params.size === "lg" ? "px-6 py-3 text-base" : ""}
         ${params.className || ""}`;
-      _v$42 !== _p$.e && setProperty(_el$175, "disabled", _p$.e = _v$42);
-      _v$43 !== _p$.t && setAttribute(_el$175, "aria-busy", _p$.t = _v$43);
-      _v$44 !== _p$.a && setAttribute(_el$175, "aria-label", _p$.a = _v$44);
-      _v$45 !== _p$.o && className(_el$175, _p$.o = _v$45);
+      _v$42 !== _p$.e && setProperty(_el$177, "disabled", _p$.e = _v$42);
+      _v$43 !== _p$.t && setAttribute(_el$177, "aria-busy", _p$.t = _v$43);
+      _v$44 !== _p$.a && setAttribute(_el$177, "aria-label", _p$.a = _v$44);
+      _v$45 !== _p$.o && className(_el$177, _p$.o = _v$45);
       return _p$;
     }, {
       e: void 0,
@@ -1839,7 +1877,7 @@ function ActionRenderer(props) {
       o: void 0
     });
     runHydrationEvents();
-    return _el$175;
+    return _el$177;
   })();
 }
 function ErrorCardRenderer(props) {
@@ -1853,62 +1891,62 @@ function ErrorCardRenderer(props) {
     });
   };
   return (() => {
-    var _el$184 = getNextElement(_tmpl$51), _el$201 = _el$184.firstChild, [_el$202, _co$42] = getNextMarker(_el$201.nextSibling), _el$185 = _el$202.nextSibling, _el$186 = _el$185.firstChild, _el$187 = _el$186.nextSibling, _el$188 = _el$187.firstChild, _el$189 = _el$188.nextSibling, _el$195 = _el$189.nextSibling, [_el$196, _co$39] = getNextMarker(_el$195.nextSibling), _el$197 = _el$196.nextSibling, [_el$198, _co$40] = getNextMarker(_el$197.nextSibling), _el$199 = _el$198.nextSibling, [_el$200, _co$41] = getNextMarker(_el$199.nextSibling);
-    insert(_el$184, createComponent(CopyButton, {
+    var _el$186 = getNextElement(_tmpl$51), _el$203 = _el$186.firstChild, [_el$204, _co$43] = getNextMarker(_el$203.nextSibling), _el$187 = _el$204.nextSibling, _el$188 = _el$187.firstChild, _el$189 = _el$188.nextSibling, _el$190 = _el$189.firstChild, _el$191 = _el$190.nextSibling, _el$197 = _el$191.nextSibling, [_el$198, _co$40] = getNextMarker(_el$197.nextSibling), _el$199 = _el$198.nextSibling, [_el$200, _co$41] = getNextMarker(_el$199.nextSibling), _el$201 = _el$200.nextSibling, [_el$202, _co$42] = getNextMarker(_el$201.nextSibling);
+    insert(_el$186, createComponent(CopyButton, {
       getText: getErrorText,
       get title() {
         return strings.copyErrorDetails;
       },
       position: "top-right"
-    }), _el$202, _co$42);
-    insert(_el$188, () => formatMCPUIString(strings.toolErrorTitle, {
+    }), _el$204, _co$43);
+    insert(_el$190, () => formatMCPUIString(strings.toolErrorTitle, {
       tool: props.error.tool || strings.errorUnknownToolName
     }));
-    insert(_el$189, () => props.error.message || strings.errorToolExecution);
-    insert(_el$187, createComponent(Show, {
+    insert(_el$191, () => props.error.message || strings.errorToolExecution);
+    insert(_el$189, createComponent(Show, {
       get when() {
         return props.error.type;
       },
       get children() {
-        var _el$190 = getNextElement(_tmpl$48);
-        insert(_el$190, () => formatMCPUIString(strings.errorTypeLabel, {
+        var _el$192 = getNextElement(_tmpl$48);
+        insert(_el$192, () => formatMCPUIString(strings.errorTypeLabel, {
           type: props.error.type
         }));
-        return _el$190;
+        return _el$192;
       }
-    }), _el$196, _co$39);
-    insert(_el$187, createComponent(Show, {
+    }), _el$198, _co$40);
+    insert(_el$189, createComponent(Show, {
       get when() {
         var _a;
         return (_a = props.error.suggestions) == null ? void 0 : _a.length;
       },
       get children() {
-        var _el$191 = getNextElement(_tmpl$49), _el$192 = _el$191.firstChild, _el$193 = _el$192.nextSibling;
-        insert(_el$192, () => strings.errorSuggestions);
-        insert(_el$193, createComponent(For, {
+        var _el$193 = getNextElement(_tmpl$49), _el$194 = _el$193.firstChild, _el$195 = _el$194.nextSibling;
+        insert(_el$194, () => strings.errorSuggestions);
+        insert(_el$195, createComponent(For, {
           get each() {
             return props.error.suggestions;
           },
           children: (suggestion) => (() => {
-            var _el$203 = getNextElement(_tmpl$52);
-            insert(_el$203, suggestion);
-            return _el$203;
+            var _el$205 = getNextElement(_tmpl$52);
+            insert(_el$205, suggestion);
+            return _el$205;
           })()
         }));
-        return _el$191;
+        return _el$193;
       }
-    }), _el$198, _co$40);
-    insert(_el$187, createComponent(Show, {
+    }), _el$200, _co$41);
+    insert(_el$189, createComponent(Show, {
       get when() {
         return memo(() => !!mounted())() && props.error.timestamp;
       },
       get children() {
-        var _el$194 = getNextElement(_tmpl$50);
-        insert(_el$194, () => new Date(props.error.timestamp).toLocaleString(strings.locale));
-        return _el$194;
+        var _el$196 = getNextElement(_tmpl$50);
+        insert(_el$196, () => new Date(props.error.timestamp).toLocaleString(strings.locale));
+        return _el$196;
       }
-    }), _el$200, _co$41);
-    return _el$184;
+    }), _el$202, _co$42);
+    return _el$186;
   })();
 }
 function isErrorResponse(content) {
@@ -1932,23 +1970,23 @@ function UIResourceHtmlRenderer(props) {
     return ((_a = props.resource.metadata) == null ? void 0 : _a.title) || ((_b = props.resource.uri) == null ? void 0 : _b.replace("ui://deposium/", "")) || strings.resourceTitle;
   };
   return (() => {
-    var _el$204 = getNextElement(_tmpl$54), _el$207 = _el$204.firstChild, [_el$208, _co$43] = getNextMarker(_el$207.nextSibling), _el$209 = _el$208.nextSibling, [_el$210, _co$44] = getNextMarker(_el$209.nextSibling);
-    insert(_el$204, createComponent(Show, {
+    var _el$206 = getNextElement(_tmpl$54), _el$209 = _el$206.firstChild, [_el$210, _co$44] = getNextMarker(_el$209.nextSibling), _el$211 = _el$210.nextSibling, [_el$212, _co$45] = getNextMarker(_el$211.nextSibling);
+    insert(_el$206, createComponent(Show, {
       get when() {
         var _a;
         return ((_a = props.resource.metadata) == null ? void 0 : _a.title) || props.resource.uri;
       },
       get children() {
-        var _el$205 = getNextElement(_tmpl$53), _el$206 = _el$205.firstChild;
-        insert(_el$206, resourceTitle);
-        return _el$205;
+        var _el$207 = getNextElement(_tmpl$53), _el$208 = _el$207.firstChild;
+        insert(_el$208, resourceTitle);
+        return _el$207;
       }
-    }), _el$208, _co$43);
-    insert(_el$204, createComponent(SafeHtml, {
+    }), _el$210, _co$44);
+    insert(_el$206, createComponent(SafeHtml, {
       "class": "p-4 prose prose-sm dark:prose-invert max-w-none",
       html: htmlContent
-    }), _el$210, _co$44);
-    return _el$204;
+    }), _el$212, _co$45);
+    return _el$206;
   })();
 }
 const UIResourceRenderer = (props) => {
@@ -2054,10 +2092,10 @@ const UIResourceRenderer = (props) => {
   return createComponent(RenderProvider, {
     renderComponent,
     get children() {
-      var _el$211 = getNextElement(_tmpl$55), _el$212 = _el$211.firstChild, _el$213 = _el$212.nextSibling, [_el$214, _co$45] = getNextMarker(_el$213.nextSibling);
-      spread(_el$211, mergeProps({
+      var _el$213 = getNextElement(_tmpl$55), _el$214 = _el$213.firstChild, _el$215 = _el$214.nextSibling, [_el$216, _co$46] = getNextMarker(_el$215.nextSibling);
+      spread(_el$213, mergeProps({
         get ["class"]() {
-          return `w-full ${props.class || ""}`;
+          return `mcp-ui-root [background-color:var(--mcp-ui-bg)] w-full ${props.class || ""}`;
         }
       }, () => isLayoutContent ? {
         "data-mcp-ui-layout-id": outerKey()
@@ -2065,14 +2103,14 @@ const UIResourceRenderer = (props) => {
         "data-mcp-ui-component-id": outerKey()
       }), false, true);
       var _ref$3 = responsiveGrid.ref;
-      typeof _ref$3 === "function" ? use(_ref$3, _el$212) : responsiveGrid.ref = _el$212;
-      insert(_el$212, createComponent(For, {
+      typeof _ref$3 === "function" ? use(_ref$3, _el$214) : responsiveGrid.ref = _el$214;
+      insert(_el$214, createComponent(For, {
         get each() {
           return layout().components;
         },
         children: (component) => (() => {
-          var _el$215 = getNextElement(_tmpl$56);
-          insert(_el$215, createComponent(ComponentRenderer, {
+          var _el$217 = getNextElement(_tmpl$56);
+          insert(_el$217, createComponent(ComponentRenderer, {
             component,
             get onError() {
               return props.onError;
@@ -2089,17 +2127,17 @@ const UIResourceRenderer = (props) => {
           }));
           effect((_p$) => {
             var _v$48 = getGridStyleString(component), _v$49 = getUiResourceStableKey(component);
-            _p$.e = style(_el$215, _v$48, _p$.e);
-            _v$49 !== _p$.t && setAttribute(_el$215, "data-mcp-ui-component-id", _p$.t = _v$49);
+            _p$.e = style(_el$217, _v$48, _p$.e);
+            _v$49 !== _p$.t && setAttribute(_el$217, "data-mcp-ui-component-id", _p$.t = _v$49);
             return _p$;
           }, {
             e: void 0,
             t: void 0
           });
-          return _el$215;
+          return _el$217;
         })()
       }));
-      insert(_el$211, createComponent(Show, {
+      insert(_el$213, createComponent(Show, {
         get when() {
           return shouldShowAutoFooter();
         },
@@ -2110,18 +2148,18 @@ const UIResourceRenderer = (props) => {
             }
           });
         }
-      }), _el$214, _co$45);
+      }), _el$216, _co$46);
       effect((_p$) => {
         var _v$46 = gridContainerStyle(), _v$47 = responsiveGrid.stacked();
-        _p$.e = style(_el$212, _v$46, _p$.e);
-        _v$47 !== _p$.t && setAttribute(_el$212, "data-mcp-ui-stacked", _p$.t = _v$47);
+        _p$.e = style(_el$214, _v$46, _p$.e);
+        _v$47 !== _p$.t && setAttribute(_el$214, "data-mcp-ui-stacked", _p$.t = _v$47);
         return _p$;
       }, {
         e: void 0,
         t: void 0
       });
       runHydrationEvents();
-      return _el$211;
+      return _el$213;
     }
   });
 };