@seed-ship/mcp-ui-solid 5.3.1 → 5.5.0

package/dist/components/UIResourceRenderer.d.ts

@@ -4,6 +4,21 @@
  */
 import { Component } from 'solid-js';
 import type { UIComponent, UILayout, RendererError } from '../types';
+/**
+ * How `<UIResourceRenderer>` reacts when `validateComponent()` rejects a
+ * component (v5.4.0).
+ *
+ * - `'block'`  : full-slot red error card (default — backward compatible)
+ * - `'inline-warn'` : compact yellow chip in the slot, tooltip carries the
+ *                    error message — keeps the surrounding layout clean
+ *                    (e.g. inside a chat message)
+ * - `'silent'` : render nothing in the slot; `onError` still fires so the
+ *                consumer can log/alert
+ *
+ * Runtime errors caught by `<GenerativeUIErrorBoundary>` are NOT affected by
+ * this prop — they always show the boundary's fallback UI.
+ */
+export type ValidationErrorMode = 'block' | 'inline-warn' | 'silent';
 /**
  * Props for UIResourceRenderer
  */
@@ -24,6 +39,14 @@ export interface UIResourceRendererProps {
      * Custom CSS class
      */
     class?: string;
+    /**
+     * How to react when a component fails `validateComponent()` (v5.4.0).
+     * Defaults to `'block'` (replaces the slot with a red error card —
+     * the pre-v5.4.0 behavior).
+     *
+     * @see ValidationErrorMode
+     */
+    errorMode?: ValidationErrorMode;
 }
 /**
  * Smart cell value renderer that handles markdown links and other formats

package/dist/components/UIResourceRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UIResourceRenderer.d.ts","sourceRoot":"","sources":["../../src/components/UIResourceRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,SAAS,EAAqD,MAAM,UAAU,CAAA;AAEvF,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAA0B,MAAM,UAAU,CAAA;AAgE5F;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,OAAO,EAAE,WAAW,GAAG,QAAQ,CAAA;IAE/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAExC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAiJD;;GAEG;AACH;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CA4ElD;AAigCD;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS,CAAC,uBAAuB,CA6GjE,CAAA"}
+{"version":3,"file":"UIResourceRenderer.d.ts","sourceRoot":"","sources":["../../src/components/UIResourceRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,SAAS,EAA8D,MAAM,UAAU,CAAA;AAEhG,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAA0B,MAAM,UAAU,CAAA;AAK5F;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAA;AA8DpE;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,OAAO,EAAE,WAAW,GAAG,QAAQ,CAAA;IAE/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAExC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAA;CAChC;AAiJD;;GAEG;AACH;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CA4ElD;AA2iCD;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS,CAAC,uBAAuB,CA6GjE,CAAA"}

package/dist/components/UIResourceRenderer.js

@@ -1,8 +1,9 @@
 import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, effect, style, className, setProperty, setAttribute, runHydrationEvents, memo, isServer, use, addEventListener, classList, setStyleProperty } from "solid-js/web";
 import purify from "../node_modules/.pnpm/dompurify@3.4.1/node_modules/dompurify/dist/purify.es.js";
-import { createMemo, For, Show, createSignal, createEffect } from "solid-js";
+import { createMemo, For, Show, onMount, createSignal, createEffect } from "solid-js";
 import { validateComponent, getIframeSandbox, DEFAULT_RESOURCE_LIMITS } from "../services/validation.js";
 import { GenerativeUIErrorBoundary } from "./GenerativeUIErrorBoundary.js";
+import { markRenderStart, markRenderEnd } from "../utils/perf.js";
 import { GridRenderer } from "./GridRenderer.js";
 import { FooterRenderer } from "./FooterRenderer.js";
 import { CarouselRenderer } from "./CarouselRenderer.js";
@@ -19,7 +20,7 @@ import { useExpanded, ExpandableWrapper } from "./ExpandableWrapper.js";
 import { RenderProvider } from "./RenderContext.js";
 import { useAction } from "../hooks/useAction.js";
 import { marked as k } from "../node_modules/.pnpm/marked@16.4.2/node_modules/marked/lib/marked.esm.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>`), _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">Invalid chart data: missing data.datasets`), _tmpl$5 = /* @__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$6 = /* @__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">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1">`), _tmpl$7 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$8 = /* @__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$9 = /* @__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$0 = /* @__PURE__ */ template(`<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">`), _tmpl$1 = /* @__PURE__ */ template(`<tr>`), _tmpl$10 = /* @__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"><div>`), _tmpl$11 = /* @__PURE__ */ template(`<tbody class="bg-white dark:bg-gray-800 relative">`), _tmpl$12 = /* @__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">Copy TSV`), _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">Download CSV`), _tmpl$14 = /* @__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">Download JSON`), _tmpl$15 = /* @__PURE__ */ template(`<div class="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 text-sm"><!$><!/><!$><!/><!$><!/>`), _tmpl$16 = /* @__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"title="Export table"aria-label="Export table"><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$17 = /* @__PURE__ */ template(`<span class="ml-2 text-xs font-normal text-gray-400">(virtualized: <!$><!/> rows)`), _tmpl$18 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><!$><!/><!$><!/>`), _tmpl$19 = /* @__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"aria-label="Clear search">&times;`), _tmpl$20 = /* @__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$21 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 mb-2"><!$><!/> result<!$><!/> on <!$><!/>`), _tmpl$22 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Showing <!$><!/> - <!$><!/> of <!$><!/>`), _tmpl$23 = /* @__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">`), _tmpl$24 = /* @__PURE__ */ template(`<span class=text-gray-400>/ page`), _tmpl$25 = /* @__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 class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">&#x25C0;</button><span><!$><!/> / <!$><!/></span><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">&#x25B6;</button><!$><!/>`), _tmpl$26 = /* @__PURE__ */ template(`<div><!$><!/><div class=p-4><!$><!/><!$><!/><div class=overflow-x-auto 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$27 = /* @__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$28 = /* @__PURE__ */ template(`<option>`), _tmpl$29 = /* @__PURE__ */ template(`<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">`), _tmpl$30 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$31 = /* @__PURE__ */ template(`<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">`), _tmpl$32 = /* @__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$33 = /* @__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>`), _tmpl$34 = /* @__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]"><a target=_blank rel="noopener noreferrer"class=cursor-zoom-in><img class="max-w-full max-h-[400px] object-contain rounded shadow-sm hover:opacity-90 transition-opacity"loading=lazy></a></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">`, true, false, false), _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>`, 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="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">Validation Error</p><p class="text-xs text-red-700 dark:text-red-300 mt-1">`), _tmpl$42 = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$43 = /* @__PURE__ */ template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$44 = /* @__PURE__ */ template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full"aria-hidden=true>`), _tmpl$45 = /* @__PURE__ */ template(`<button><!$><!/><!$><!/><!$><!/>`), _tmpl$46 = /* @__PURE__ */ template(`<p class="text-xs text-red-600 dark:text-red-400 mt-1">Type: <!$><!/>`), _tmpl$47 = /* @__PURE__ */ template(`<div class=mt-3><p class="text-xs font-medium text-red-700 dark:text-red-300">Suggestions:</p><ul class="mt-1 text-xs text-red-600 dark:text-red-400 list-disc list-inside">`), _tmpl$48 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-2">`), _tmpl$49 = /* @__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">Tool Error: <!$><!/></h4><p class="text-sm text-red-700 dark:text-red-300 mt-1"></p><!$><!/><!$><!/><!$><!/>`), _tmpl$50 = /* @__PURE__ */ template(`<li>`), _tmpl$51 = /* @__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$52 = /* @__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"><!$><!/><div class="p-4 prose prose-sm dark:prose-invert max-w-none">`), _tmpl$53 = /* @__PURE__ */ template(`<div><div class="grid gap-4"></div><!$><!/>`), _tmpl$54 = /* @__PURE__ */ template(`<div>`);
+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>`), _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">Invalid chart data: missing data.datasets`), _tmpl$5 = /* @__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$6 = /* @__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">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1">`), _tmpl$7 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$8 = /* @__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$9 = /* @__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$0 = /* @__PURE__ */ template(`<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">`), _tmpl$1 = /* @__PURE__ */ template(`<tr>`), _tmpl$10 = /* @__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"><div>`), _tmpl$11 = /* @__PURE__ */ template(`<tbody class="bg-white dark:bg-gray-800 relative">`), _tmpl$12 = /* @__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">Copy TSV`), _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">Download CSV`), _tmpl$14 = /* @__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">Download JSON`), _tmpl$15 = /* @__PURE__ */ template(`<div class="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 text-sm"><!$><!/><!$><!/><!$><!/>`), _tmpl$16 = /* @__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"title="Export table"aria-label="Export table"><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$17 = /* @__PURE__ */ template(`<span class="ml-2 text-xs font-normal text-gray-400">(virtualized: <!$><!/> rows)`), _tmpl$18 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><!$><!/><!$><!/>`), _tmpl$19 = /* @__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"aria-label="Clear search">&times;`), _tmpl$20 = /* @__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$21 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 mb-2"><!$><!/> result<!$><!/> on <!$><!/>`), _tmpl$22 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Showing <!$><!/> - <!$><!/> of <!$><!/>`), _tmpl$23 = /* @__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">`), _tmpl$24 = /* @__PURE__ */ template(`<span class=text-gray-400>/ page`), _tmpl$25 = /* @__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 class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">&#x25C0;</button><span><!$><!/> / <!$><!/></span><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">&#x25B6;</button><!$><!/>`), _tmpl$26 = /* @__PURE__ */ template(`<div><!$><!/><div class=p-4><!$><!/><!$><!/><div class=overflow-x-auto 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$27 = /* @__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$28 = /* @__PURE__ */ template(`<option>`), _tmpl$29 = /* @__PURE__ */ template(`<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">`), _tmpl$30 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$31 = /* @__PURE__ */ template(`<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">`), _tmpl$32 = /* @__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$33 = /* @__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>`), _tmpl$34 = /* @__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]"><a target=_blank rel="noopener noreferrer"class=cursor-zoom-in><img class="max-w-full max-h-[400px] object-contain rounded shadow-sm hover:opacity-90 transition-opacity"loading=lazy></a></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">`, true, false, false), _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>`, 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 aria-label="Component validation warning"><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>Invalid <!$><!/>`), _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">Validation Error</p><p class="text-xs text-red-700 dark:text-red-300 mt-1">`), _tmpl$43 = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$44 = /* @__PURE__ */ template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$45 = /* @__PURE__ */ template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full"aria-hidden=true>`), _tmpl$46 = /* @__PURE__ */ template(`<button><!$><!/><!$><!/><!$><!/>`), _tmpl$47 = /* @__PURE__ */ template(`<p class="text-xs text-red-600 dark:text-red-400 mt-1">Type: <!$><!/>`), _tmpl$48 = /* @__PURE__ */ template(`<div class=mt-3><p class="text-xs font-medium text-red-700 dark:text-red-300">Suggestions:</p><ul class="mt-1 text-xs text-red-600 dark:text-red-400 list-disc list-inside">`), _tmpl$49 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-2">`), _tmpl$50 = /* @__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">Tool Error: <!$><!/></h4><p class="text-sm text-red-700 dark:text-red-300 mt-1"></p><!$><!/><!$><!/><!$><!/>`), _tmpl$51 = /* @__PURE__ */ template(`<li>`), _tmpl$52 = /* @__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$53 = /* @__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"><!$><!/><div class="p-4 prose prose-sm dark:prose-invert max-w-none">`), _tmpl$54 = /* @__PURE__ */ template(`<div><div class="grid gap-4"></div><!$><!/>`), _tmpl$55 = /* @__PURE__ */ template(`<div>`);
 function CopyButton(props) {
   const [copied, setCopied] = createSignal(false);
   const handleCopy = async () => {
@@ -1052,7 +1053,9 @@ function LinkRenderer(props) {
   })();
 }
 function ComponentRenderer(props) {
-  var _a;
+  var _a, _b, _c;
+  markRenderStart(props.component.id);
+  onMount(() => markRenderEnd(props.component.id));
   const validation = validateComponent(props.component);
   if (!validation.valid) {
     (_a = props.onError) == null ? void 0 : _a.call(props, {
@@ -1061,13 +1064,23 @@ function ComponentRenderer(props) {
       componentId: props.component.id,
       details: validation.errors
     });
+    const mode = props.errorMode ?? "block";
+    const firstError = ((_c = (_b = validation.errors) == null ? void 0 : _b[0]) == null ? void 0 : _c.message) || "Unknown validation error";
+    if (mode === "silent") {
+      return null;
+    }
+    if (mode === "inline-warn") {
+      return (() => {
+        var _el$183 = getNextElement(_tmpl$41), _el$184 = _el$183.firstChild, _el$185 = _el$184.nextSibling, _el$186 = _el$185.firstChild, _el$187 = _el$186.nextSibling, [_el$188, _co$40] = getNextMarker(_el$187.nextSibling);
+        setAttribute(_el$183, "title", firstError);
+        insert(_el$185, () => props.component.type, _el$188, _co$40);
+        return _el$183;
+      })();
+    }
     return (() => {
-      var _el$183 = getNextElement(_tmpl$41), _el$184 = _el$183.firstChild, _el$185 = _el$184.nextSibling;
-      insert(_el$185, () => {
-        var _a2, _b;
-        return ((_b = (_a2 = validation.errors) == null ? void 0 : _a2[0]) == null ? void 0 : _b.message) || "Unknown validation error";
-      });
-      return _el$183;
+      var _el$189 = getNextElement(_tmpl$42), _el$190 = _el$189.firstChild, _el$191 = _el$190.nextSibling;
+      insert(_el$191, firstError);
+      return _el$189;
     })();
   }
   return createComponent(GenerativeUIErrorBoundary, {
@@ -1313,27 +1326,27 @@ function ActionRenderer(props) {
   const isDisabled = () => params.disabled || params.action === "tool-call" && isExecuting();
   if (params.type === "link" || params.action === "link") {
     return (() => {
-      var _el$186 = getNextElement(_tmpl$43), _el$188 = _el$186.firstChild, [_el$189, _co$40] = getNextMarker(_el$188.nextSibling), _el$190 = _el$189.nextSibling, [_el$191, _co$41] = getNextMarker(_el$190.nextSibling);
-      _el$186.$$click = handleClick;
-      insert(_el$186, createComponent(Show, {
+      var _el$192 = getNextElement(_tmpl$44), _el$194 = _el$192.firstChild, [_el$195, _co$41] = getNextMarker(_el$194.nextSibling), _el$196 = _el$195.nextSibling, [_el$197, _co$42] = getNextMarker(_el$196.nextSibling);
+      _el$192.$$click = handleClick;
+      insert(_el$192, createComponent(Show, {
         get when() {
           return params.icon;
         },
         get children() {
-          var _el$187 = getNextElement(_tmpl$42);
-          insert(_el$187, () => params.icon);
-          return _el$187;
+          var _el$193 = getNextElement(_tmpl$43);
+          insert(_el$193, () => params.icon);
+          return _el$193;
         }
-      }), _el$189, _co$40);
-      insert(_el$186, () => params.label, _el$191, _co$41);
+      }), _el$195, _co$41);
+      insert(_el$192, () => params.label, _el$197, _co$42);
       effect((_p$) => {
         var _v$32 = params.url || "#", _v$33 = params.url ? "_blank" : void 0, _v$34 = params.ariaLabel || params.label, _v$35 = `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"}
           ${params.className || ""}`;
-        _v$32 !== _p$.e && setAttribute(_el$186, "href", _p$.e = _v$32);
-        _v$33 !== _p$.t && setAttribute(_el$186, "target", _p$.t = _v$33);
-        _v$34 !== _p$.a && setAttribute(_el$186, "aria-label", _p$.a = _v$34);
-        _v$35 !== _p$.o && className(_el$186, _p$.o = _v$35);
+        _v$32 !== _p$.e && setAttribute(_el$192, "href", _p$.e = _v$32);
+        _v$33 !== _p$.t && setAttribute(_el$192, "target", _p$.t = _v$33);
+        _v$34 !== _p$.a && setAttribute(_el$192, "aria-label", _p$.a = _v$34);
+        _v$35 !== _p$.o && className(_el$192, _p$.o = _v$35);
         return _p$;
       }, {
         e: void 0,
@@ -1342,42 +1355,42 @@ function ActionRenderer(props) {
         o: void 0
       });
       runHydrationEvents();
-      return _el$186;
+      return _el$192;
     })();
   }
   return (() => {
-    var _el$192 = getNextElement(_tmpl$45), _el$195 = _el$192.firstChild, [_el$196, _co$42] = getNextMarker(_el$195.nextSibling), _el$197 = _el$196.nextSibling, [_el$198, _co$43] = getNextMarker(_el$197.nextSibling), _el$199 = _el$198.nextSibling, [_el$200, _co$44] = getNextMarker(_el$199.nextSibling);
-    _el$192.$$click = handleClick;
-    insert(_el$192, createComponent(Show, {
+    var _el$198 = getNextElement(_tmpl$46), _el$201 = _el$198.firstChild, [_el$202, _co$43] = getNextMarker(_el$201.nextSibling), _el$203 = _el$202.nextSibling, [_el$204, _co$44] = getNextMarker(_el$203.nextSibling), _el$205 = _el$204.nextSibling, [_el$206, _co$45] = getNextMarker(_el$205.nextSibling);
+    _el$198.$$click = handleClick;
+    insert(_el$198, createComponent(Show, {
       get when() {
         return memo(() => !!isExecuting())() && params.action === "tool-call";
       },
       get children() {
-        return getNextElement(_tmpl$44);
+        return getNextElement(_tmpl$45);
       }
-    }), _el$196, _co$42);
-    insert(_el$192, createComponent(Show, {
+    }), _el$202, _co$43);
+    insert(_el$198, createComponent(Show, {
       get when() {
         return memo(() => !!params.icon)() && !(isExecuting() && params.action === "tool-call");
       },
       get children() {
-        var _el$194 = getNextElement(_tmpl$42);
-        insert(_el$194, () => params.icon);
-        return _el$194;
+        var _el$200 = getNextElement(_tmpl$43);
+        insert(_el$200, () => params.icon);
+        return _el$200;
       }
-    }), _el$198, _co$43);
-    insert(_el$192, () => params.label, _el$200, _co$44);
+    }), _el$204, _co$44);
+    insert(_el$198, () => params.label, _el$206, _co$45);
     effect((_p$) => {
       var _v$36 = params.action === "submit" ? "submit" : "button", _v$37 = isDisabled(), _v$38 = isExecuting() && params.action === "tool-call", _v$39 = params.ariaLabel || params.label, _v$40 = `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"}
         ${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$36 !== _p$.e && setAttribute(_el$192, "type", _p$.e = _v$36);
-      _v$37 !== _p$.t && setProperty(_el$192, "disabled", _p$.t = _v$37);
-      _v$38 !== _p$.a && setAttribute(_el$192, "aria-busy", _p$.a = _v$38);
-      _v$39 !== _p$.o && setAttribute(_el$192, "aria-label", _p$.o = _v$39);
-      _v$40 !== _p$.i && className(_el$192, _p$.i = _v$40);
+      _v$36 !== _p$.e && setAttribute(_el$198, "type", _p$.e = _v$36);
+      _v$37 !== _p$.t && setProperty(_el$198, "disabled", _p$.t = _v$37);
+      _v$38 !== _p$.a && setAttribute(_el$198, "aria-busy", _p$.a = _v$38);
+      _v$39 !== _p$.o && setAttribute(_el$198, "aria-label", _p$.o = _v$39);
+      _v$40 !== _p$.i && className(_el$198, _p$.i = _v$40);
       return _p$;
     }, {
       e: void 0,
@@ -1387,7 +1400,7 @@ function ActionRenderer(props) {
       i: void 0
     });
     runHydrationEvents();
-    return _el$192;
+    return _el$198;
   })();
 }
 function ErrorCardRenderer(props) {
@@ -1395,55 +1408,55 @@ function ErrorCardRenderer(props) {
     return `Error in ${props.error.tool || "unknown tool"}: ${props.error.message || "Unknown error"}`;
   };
   return (() => {
-    var _el$201 = getNextElement(_tmpl$49), _el$224 = _el$201.firstChild, [_el$225, _co$50] = getNextMarker(_el$224.nextSibling), _el$202 = _el$225.nextSibling, _el$203 = _el$202.firstChild, _el$204 = _el$203.nextSibling, _el$205 = _el$204.firstChild, _el$206 = _el$205.firstChild, _el$207 = _el$206.nextSibling, [_el$208, _co$45] = getNextMarker(_el$207.nextSibling), _el$209 = _el$205.nextSibling, _el$218 = _el$209.nextSibling, [_el$219, _co$47] = getNextMarker(_el$218.nextSibling), _el$220 = _el$219.nextSibling, [_el$221, _co$48] = getNextMarker(_el$220.nextSibling), _el$222 = _el$221.nextSibling, [_el$223, _co$49] = getNextMarker(_el$222.nextSibling);
-    insert(_el$201, createComponent(CopyButton, {
+    var _el$207 = getNextElement(_tmpl$50), _el$230 = _el$207.firstChild, [_el$231, _co$51] = getNextMarker(_el$230.nextSibling), _el$208 = _el$231.nextSibling, _el$209 = _el$208.firstChild, _el$210 = _el$209.nextSibling, _el$211 = _el$210.firstChild, _el$212 = _el$211.firstChild, _el$213 = _el$212.nextSibling, [_el$214, _co$46] = getNextMarker(_el$213.nextSibling), _el$215 = _el$211.nextSibling, _el$224 = _el$215.nextSibling, [_el$225, _co$48] = getNextMarker(_el$224.nextSibling), _el$226 = _el$225.nextSibling, [_el$227, _co$49] = getNextMarker(_el$226.nextSibling), _el$228 = _el$227.nextSibling, [_el$229, _co$50] = getNextMarker(_el$228.nextSibling);
+    insert(_el$207, createComponent(CopyButton, {
       getText: getErrorText,
       title: "Copy error details",
       position: "top-right"
-    }), _el$225, _co$50);
-    insert(_el$205, () => props.error.tool || "Unknown", _el$208, _co$45);
-    insert(_el$209, () => props.error.message || "An error occurred during tool execution");
-    insert(_el$204, createComponent(Show, {
+    }), _el$231, _co$51);
+    insert(_el$211, () => props.error.tool || "Unknown", _el$214, _co$46);
+    insert(_el$215, () => props.error.message || "An error occurred during tool execution");
+    insert(_el$210, createComponent(Show, {
       get when() {
         return props.error.type;
       },
       get children() {
-        var _el$210 = getNextElement(_tmpl$46), _el$211 = _el$210.firstChild, _el$212 = _el$211.nextSibling, [_el$213, _co$46] = getNextMarker(_el$212.nextSibling);
-        insert(_el$210, () => props.error.type, _el$213, _co$46);
-        return _el$210;
+        var _el$216 = getNextElement(_tmpl$47), _el$217 = _el$216.firstChild, _el$218 = _el$217.nextSibling, [_el$219, _co$47] = getNextMarker(_el$218.nextSibling);
+        insert(_el$216, () => props.error.type, _el$219, _co$47);
+        return _el$216;
       }
-    }), _el$219, _co$47);
-    insert(_el$204, createComponent(Show, {
+    }), _el$225, _co$48);
+    insert(_el$210, createComponent(Show, {
       get when() {
         var _a;
         return (_a = props.error.suggestions) == null ? void 0 : _a.length;
       },
       get children() {
-        var _el$214 = getNextElement(_tmpl$47), _el$215 = _el$214.firstChild, _el$216 = _el$215.nextSibling;
-        insert(_el$216, createComponent(For, {
+        var _el$220 = getNextElement(_tmpl$48), _el$221 = _el$220.firstChild, _el$222 = _el$221.nextSibling;
+        insert(_el$222, createComponent(For, {
           get each() {
             return props.error.suggestions;
           },
           children: (suggestion) => (() => {
-            var _el$226 = getNextElement(_tmpl$50);
-            insert(_el$226, suggestion);
-            return _el$226;
+            var _el$232 = getNextElement(_tmpl$51);
+            insert(_el$232, suggestion);
+            return _el$232;
           })()
         }));
-        return _el$214;
+        return _el$220;
       }
-    }), _el$221, _co$48);
-    insert(_el$204, createComponent(Show, {
+    }), _el$227, _co$49);
+    insert(_el$210, createComponent(Show, {
       get when() {
         return props.error.timestamp;
       },
       get children() {
-        var _el$217 = getNextElement(_tmpl$48);
-        insert(_el$217, () => new Date(props.error.timestamp).toLocaleString());
-        return _el$217;
+        var _el$223 = getNextElement(_tmpl$49);
+        insert(_el$223, () => new Date(props.error.timestamp).toLocaleString());
+        return _el$223;
       }
-    }), _el$223, _co$49);
-    return _el$201;
+    }), _el$229, _co$50);
+    return _el$207;
   })();
 }
 function isErrorResponse(content) {
@@ -1466,20 +1479,20 @@ function UIResourceHtmlRenderer(props) {
     return ((_a = props.resource.metadata) == null ? void 0 : _a.title) || ((_b = props.resource.uri) == null ? void 0 : _b.replace("ui://deposium/", "")) || "Resource";
   };
   return (() => {
-    var _el$227 = getNextElement(_tmpl$52), _el$231 = _el$227.firstChild, [_el$232, _co$51] = getNextMarker(_el$231.nextSibling), _el$230 = _el$232.nextSibling;
-    insert(_el$227, createComponent(Show, {
+    var _el$233 = getNextElement(_tmpl$53), _el$237 = _el$233.firstChild, [_el$238, _co$52] = getNextMarker(_el$237.nextSibling), _el$236 = _el$238.nextSibling;
+    insert(_el$233, createComponent(Show, {
       get when() {
         var _a;
         return ((_a = props.resource.metadata) == null ? void 0 : _a.title) || props.resource.uri;
       },
       get children() {
-        var _el$228 = getNextElement(_tmpl$51), _el$229 = _el$228.firstChild;
-        insert(_el$229, resourceTitle);
-        return _el$228;
+        var _el$234 = getNextElement(_tmpl$52), _el$235 = _el$234.firstChild;
+        insert(_el$235, resourceTitle);
+        return _el$234;
       }
-    }), _el$232, _co$51);
-    effect(() => setProperty(_el$230, "innerHTML", htmlContent()));
-    return _el$227;
+    }), _el$238, _co$52);
+    effect(() => setProperty(_el$236, "innerHTML", htmlContent()));
+    return _el$233;
   })();
 }
 const UIResourceRenderer = (props) => {
@@ -1554,29 +1567,35 @@ const UIResourceRenderer = (props) => {
   const layoutData = layout();
   const renderComponent = (component, onError) => createComponent(ComponentRenderer, {
     component,
-    onError
+    onError,
+    get errorMode() {
+      return props.errorMode;
+    }
   });
   return createComponent(RenderProvider, {
     renderComponent,
     get children() {
-      var _el$233 = getNextElement(_tmpl$53), _el$234 = _el$233.firstChild, _el$235 = _el$234.nextSibling, [_el$236, _co$52] = getNextMarker(_el$235.nextSibling);
-      insert(_el$234, createComponent(For, {
+      var _el$239 = getNextElement(_tmpl$54), _el$240 = _el$239.firstChild, _el$241 = _el$240.nextSibling, [_el$242, _co$53] = getNextMarker(_el$241.nextSibling);
+      insert(_el$240, createComponent(For, {
         get each() {
           return layoutData.components;
         },
         children: (component) => (() => {
-          var _el$237 = getNextElement(_tmpl$54);
-          insert(_el$237, createComponent(ComponentRenderer, {
+          var _el$243 = getNextElement(_tmpl$55);
+          insert(_el$243, createComponent(ComponentRenderer, {
             component,
             get onError() {
               return props.onError;
+            },
+            get errorMode() {
+              return props.errorMode;
             }
           }));
-          effect((_$p) => style(_el$237, getGridStyleString(component), _$p));
-          return _el$237;
+          effect((_$p) => style(_el$243, getGridStyleString(component), _$p));
+          return _el$243;
         })()
       }));
-      insert(_el$233, createComponent(Show, {
+      insert(_el$239, createComponent(Show, {
         get when() {
           return shouldShowAutoFooter();
         },
@@ -1587,17 +1606,17 @@ const UIResourceRenderer = (props) => {
             }
           });
         }
-      }), _el$236, _co$52);
+      }), _el$242, _co$53);
       effect((_p$) => {
         var _v$41 = `w-full ${props.class || ""}`, _v$42 = gridContainerStyle();
-        _v$41 !== _p$.e && className(_el$233, _p$.e = _v$41);
-        _p$.t = style(_el$234, _v$42, _p$.t);
+        _v$41 !== _p$.e && className(_el$239, _p$.e = _v$41);
+        _p$.t = style(_el$240, _v$42, _p$.t);
         return _p$;
       }, {
         e: void 0,
         t: void 0
       });
-      return _el$233;
+      return _el$239;
     }
   });
 };