@seed-ship/mcp-ui-solid 1.2.2 → 2.0.0

package/dist/components/UIResourceRenderer.js

@@ -1,13 +1,24 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, style, className, setAttribute, memo, setProperty, runHydrationEvents } from "solid-js/web";
+import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, effect, style, className, setProperty, setAttribute, runHydrationEvents, memo, isServer, use, setStyleProperty } from "solid-js/web";
 import purify from "../node_modules/.pnpm/dompurify@3.3.0/node_modules/dompurify/dist/purify.es.js";
 import { createMemo, For, Show, createSignal, createEffect } from "solid-js";
 import { validateComponent, DEFAULT_RESOURCE_LIMITS } from "../services/validation.js";
 import { GenerativeUIErrorBoundary } from "./GenerativeUIErrorBoundary.js";
 import { GridRenderer } from "./GridRenderer.js";
 import { FooterRenderer } from "./FooterRenderer.js";
+import { CarouselRenderer } from "./CarouselRenderer.js";
+import { ArtifactRenderer } from "./ArtifactRenderer.js";
+import { FormRenderer } from "./FormRenderer.js";
+import { ModalRenderer } from "./ModalRenderer.js";
+import { ActionGroupRenderer } from "./ActionGroupRenderer.js";
+import { isChartJSAvailable, ChartJSRenderer } from "./ChartJSRenderer.js";
+import { ImageGalleryRenderer } from "./ImageGalleryRenderer.js";
+import { VideoRenderer } from "./VideoRenderer.js";
+import { CodeBlockRenderer } from "./CodeBlockRenderer.js";
+import { MapRenderer } from "./MapRenderer.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="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$5 = /* @__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$6 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$7 = /* @__PURE__ */ template(`<div class="w-full h-full p-4"><!$><!/><div class="w-full h-full"><img alt="Chart visualization"class="w-full h-auto max-h-[300px] object-contain">`), _tmpl$8 = /* @__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$9 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Showing <!$><!/> - <!$><!/> of <!$><!/>`), _tmpl$0 = /* @__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 overflow-hidden group"><!$><!/><div class=p-4><!$><!/><div class=overflow-x-auto><table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border-separate border-spacing-0"><thead class="bg-gray-50 dark:bg-gray-900/50"><tr></tr></thead><tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"></tbody></table></div><!$><!/>`), _tmpl$1 = /* @__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">`), _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"><div>`), _tmpl$12 = /* @__PURE__ */ template(`<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">`), _tmpl$13 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$14 = /* @__PURE__ */ template(`<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">`), _tmpl$15 = /* @__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$16 = /* @__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$17 = /* @__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$18 = /* @__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$19 = /* @__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"sandbox="allow-scripts allow-same-origin allow-popups allow-forms"loading=lazy>`, true, false, false), _tmpl$20 = /* @__PURE__ */ template(`<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">`), _tmpl$21 = /* @__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-[500px] object-contain rounded shadow-sm hover:opacity-95 transition-opacity"loading=lazy></a></div><!$><!/>`, true, false, false), _tmpl$22 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 truncate">`), _tmpl$23 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"class="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"><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"><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><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$24 = /* @__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$25 = /* @__PURE__ */ template(`<span>`), _tmpl$26 = /* @__PURE__ */ template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$27 = /* @__PURE__ */ template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full">`), _tmpl$28 = /* @__PURE__ */ template(`<button><!$><!/><!$><!/><!$><!/>`), _tmpl$29 = /* @__PURE__ */ template(`<div><div class="grid gap-4"></div><!$><!/>`), _tmpl$30 = /* @__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="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$5 = /* @__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$6 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$7 = /* @__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$8 = /* @__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$9 = /* @__PURE__ */ template(`<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">`), _tmpl$0 = /* @__PURE__ */ template(`<tr>`), _tmpl$1 = /* @__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$10 = /* @__PURE__ */ template(`<tbody class="bg-white dark:bg-gray-800 relative">`), _tmpl$11 = /* @__PURE__ */ template(`<span class="ml-2 text-xs font-normal text-gray-400">(virtualized: <!$><!/> rows)`), _tmpl$12 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><!$><!/><!$><!/>`), _tmpl$13 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Showing <!$><!/> - <!$><!/> of <!$><!/>`), _tmpl$14 = /* @__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 overflow-hidden group"><!$><!/><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-50 dark:bg-gray-900/50 sticky top-0 z-10"><tr></tr></thead><!$><!/></table></div><!$><!/>`), _tmpl$15 = /* @__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-50 dark:bg-gray-900/50">`), _tmpl$16 = /* @__PURE__ */ template(`<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">`), _tmpl$17 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$18 = /* @__PURE__ */ template(`<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">`), _tmpl$19 = /* @__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$20 = /* @__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$21 = /* @__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$22 = /* @__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$23 = /* @__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"sandbox="allow-scripts allow-same-origin allow-popups allow-forms"loading=lazy>`, true, false, false), _tmpl$24 = /* @__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$25 = /* @__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$26 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 truncate">`), _tmpl$27 = /* @__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$28 = /* @__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$29 = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$30 = /* @__PURE__ */ template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$31 = /* @__PURE__ */ template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full"aria-hidden=true>`), _tmpl$32 = /* @__PURE__ */ template(`<button><!$><!/><!$><!/><!$><!/>`), _tmpl$33 = /* @__PURE__ */ template(`<p class="text-xs text-red-600 dark:text-red-400 mt-1">Type: <!$><!/>`), _tmpl$34 = /* @__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$35 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-2">`), _tmpl$36 = /* @__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$37 = /* @__PURE__ */ template(`<li>`), _tmpl$38 = /* @__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$39 = /* @__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$40 = /* @__PURE__ */ template(`<div><div class="grid gap-4"></div><!$><!/>`), _tmpl$41 = /* @__PURE__ */ template(`<div>`);
 function CopyButton(props) {
   const [copied, setCopied] = createSignal(false);
   const handleCopy = async () => {
@@ -50,11 +61,42 @@ function CopyButton(props) {
   })();
 }
 function ChartRenderer(props) {
+  const [useNative, setUseNative] = createSignal(false);
   const [iframeUrl, setIframeUrl] = createSignal();
   const [isLoading, setIsLoading] = createSignal(true);
   const [error, setError] = createSignal();
-  createEffect(() => {
-    const chartParams = props.component.params;
+  const params = () => props.component.params;
+  const rendererPref = () => {
+    var _a;
+    return ((_a = params()) == null ? void 0 : _a.renderer) || "auto";
+  };
+  createEffect(async () => {
+    const pref = rendererPref();
+    if (pref === "iframe") {
+      setUseNative(false);
+      buildIframeUrl();
+    } else if (pref === "native") {
+      const available = await isChartJSAvailable();
+      if (available) {
+        setUseNative(true);
+        setIsLoading(false);
+      } else {
+        setError("Chart.js is not available. Install chart.js peer dependency.");
+        setIsLoading(false);
+      }
+    } else {
+      const available = await isChartJSAvailable();
+      if (available) {
+        setUseNative(true);
+        setIsLoading(false);
+      } else {
+        setUseNative(false);
+        buildIframeUrl();
+      }
+    }
+  });
+  const buildIframeUrl = () => {
+    const chartParams = params();
     if (!chartParams) return;
     const chartConfig = {
       type: chartParams.type,
@@ -69,7 +111,22 @@ function ChartRenderer(props) {
     const url = `https://quickchart.io/chart?c=${configStr}&width=500&height=300&devicePixelRatio=2`;
     setIframeUrl(url);
     setIsLoading(false);
-  });
+  };
+  if (useNative()) {
+    return createComponent(ChartJSRenderer, {
+      get component() {
+        return props.component;
+      },
+      onError: (err) => {
+        var _a;
+        return (_a = props.onError) == null ? void 0 : _a.call(props, {
+          type: "render",
+          message: err.message,
+          componentId: props.component.id
+        });
+      }
+    });
+  }
   return (() => {
     var _el$4 = getNextElement(_tmpl$8), _el$14 = _el$4.firstChild, [_el$15, _co$2] = getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$3] = getNextMarker(_el$16.nextSibling), _el$18 = _el$17.nextSibling, [_el$19, _co$4] = getNextMarker(_el$18.nextSibling);
     insert(_el$4, createComponent(Show, {
@@ -98,11 +155,15 @@ function ChartRenderer(props) {
         var _el$0 = getNextElement(_tmpl$7), _el$12 = _el$0.firstChild, [_el$13, _co$] = getNextMarker(_el$12.nextSibling), _el$10 = _el$13.nextSibling, _el$11 = _el$10.firstChild;
         insert(_el$0, createComponent(Show, {
           get when() {
-            return props.component.params.title;
+            var _a;
+            return (_a = params()) == null ? void 0 : _a.title;
           },
           get children() {
             var _el$1 = getNextElement(_tmpl$6);
-            insert(_el$1, () => props.component.params.title);
+            insert(_el$1, () => {
+              var _a;
+              return (_a = params()) == null ? void 0 : _a.title;
+            });
             return _el$1;
           }
         }), _el$13, _co$);
@@ -115,7 +176,18 @@ function ChartRenderer(props) {
             componentId: props.component.id
           });
         });
-        effect(() => setAttribute(_el$11, "src", iframeUrl()));
+        effect((_p$) => {
+          var _a, _b, _c, _d;
+          var _v$3 = ((_a = params()) == null ? void 0 : _a.title) ? `Chart: ${(_b = params()) == null ? void 0 : _b.title}` : "Chart visualization", _v$4 = iframeUrl(), _v$5 = ((_c = params()) == null ? void 0 : _c.title) ? `Chart: ${(_d = params()) == null ? void 0 : _d.title}` : "Chart visualization";
+          _v$3 !== _p$.e && setAttribute(_el$10, "aria-label", _p$.e = _v$3);
+          _v$4 !== _p$.t && setAttribute(_el$11, "src", _p$.t = _v$4);
+          _v$5 !== _p$.a && setAttribute(_el$11, "alt", _p$.a = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
         return _el$0;
       }
     }), _el$19, _co$4);
@@ -158,7 +230,7 @@ function renderCellValue(value) {
       ADD_ATTR: ["target", "rel"]
     });
   }
-  const hasMarkdown = /[*_`\[\]#]/.test(strValue);
+  const hasMarkdown = /[*_`[\]#]/.test(strValue);
   if (hasMarkdown) {
     const parsed = k.parse(strValue, {
       async: false
@@ -171,6 +243,54 @@ function renderCellValue(value) {
 }
 function TableRenderer(props) {
   const tableParams = props.component.params;
+  let scrollContainerRef;
+  const [virtualizer, setVirtualizer] = createSignal(null);
+  const [isVirtualizing, setIsVirtualizing] = createSignal(false);
+  const shouldVirtualize = createMemo(() => {
+    var _a, _b;
+    const opts = tableParams.virtualize;
+    if (opts === false) return false;
+    if (opts === true) return true;
+    if (typeof opts === "object") {
+      if (opts.enabled !== void 0) return opts.enabled;
+      const threshold = opts.threshold ?? 100;
+      return (((_a = tableParams.rows) == null ? void 0 : _a.length) ?? 0) > threshold;
+    }
+    return (((_b = tableParams.rows) == null ? void 0 : _b.length) ?? 0) > 100;
+  });
+  const virtualizeOpts = createMemo(() => {
+    const opts = tableParams.virtualize;
+    if (typeof opts === "object") return opts;
+    return {};
+  });
+  createEffect(async () => {
+    if (isServer || !shouldVirtualize()) {
+      setIsVirtualizing(false);
+      return;
+    }
+    try {
+      const {
+        createVirtualizer
+      } = await import("../node_modules/.pnpm/@tanstack_solid-virtual@3.13.18_solid-js@1.9.10/node_modules/@tanstack/solid-virtual/dist/esm/index.js");
+      const opts = virtualizeOpts();
+      const rowHeight = opts.rowHeight ?? 48;
+      const overscan = opts.overscan ?? 5;
+      const v = createVirtualizer({
+        get count() {
+          var _a;
+          return ((_a = tableParams.rows) == null ? void 0 : _a.length) ?? 0;
+        },
+        getScrollElement: () => scrollContainerRef ?? null,
+        estimateSize: () => rowHeight,
+        overscan
+      });
+      setVirtualizer(v);
+      setIsVirtualizing(true);
+    } catch (e) {
+      console.warn("Failed to load @tanstack/solid-virtual, falling back to regular table", e);
+      setIsVirtualizing(false);
+    }
+  });
   const getTableText = () => {
     const columns = tableParams.columns || [];
     const rows = tableParams.rows || [];
@@ -184,69 +304,159 @@ function TableRenderer(props) {
     return `${header}
 ${dataRows}`;
   };
+  const tableId = `table-${Math.random().toString(36).slice(2, 9)}`;
+  const StandardTableBody = () => (() => {
+    var _el$20 = getNextElement(_tmpl$9);
+    insert(_el$20, createComponent(For, {
+      get each() {
+        return tableParams.rows.slice(0, DEFAULT_RESOURCE_LIMITS.maxTableRows);
+      },
+      children: (row, i) => (() => {
+        var _el$21 = getNextElement(_tmpl$0);
+        insert(_el$21, createComponent(For, {
+          get each() {
+            return tableParams.columns;
+          },
+          children: (column) => (() => {
+            var _el$22 = getNextElement(_tmpl$1), _el$23 = _el$22.firstChild;
+            effect(() => setProperty(_el$23, "innerHTML", renderCellValue(row[column.key])));
+            return _el$22;
+          })()
+        }));
+        effect(() => className(_el$21, `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"}`));
+        return _el$21;
+      })()
+    }));
+    return _el$20;
+  })();
+  const VirtualizedTableBody = () => {
+    const v = virtualizer();
+    if (!v) return null;
+    const items = v.getVirtualItems();
+    const totalSize = v.getTotalSize();
+    const opts = virtualizeOpts();
+    const rowHeight = opts.rowHeight ?? 48;
+    return (() => {
+      var _el$24 = getNextElement(_tmpl$10);
+      setStyleProperty(_el$24, "height", `${totalSize}px`);
+      insert(_el$24, createComponent(For, {
+        each: items,
+        children: (virtualRow) => {
+          const row = tableParams.rows[virtualRow.index];
+          return (() => {
+            var _el$25 = getNextElement(_tmpl$0);
+            setStyleProperty(_el$25, "height", `${rowHeight}px`);
+            insert(_el$25, createComponent(For, {
+              get each() {
+                return tableParams.columns;
+              },
+              children: (column) => (() => {
+                var _el$26 = getNextElement(_tmpl$1), _el$27 = _el$26.firstChild;
+                effect(() => setProperty(_el$27, "innerHTML", renderCellValue(row[column.key])));
+                return _el$26;
+              })()
+            }));
+            effect((_p$) => {
+              var _v$6 = `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$7 = `translateY(${virtualRow.start}px)`;
+              _v$6 !== _p$.e && className(_el$25, _p$.e = _v$6);
+              _v$7 !== _p$.t && setStyleProperty(_el$25, "transform", _p$.t = _v$7);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$25;
+          })();
+        }
+      }));
+      return _el$24;
+    })();
+  };
   return (() => {
-    var _el$20 = getNextElement(_tmpl$0), _el$45 = _el$20.firstChild, [_el$46, _co$0] = getNextMarker(_el$45.nextSibling), _el$21 = _el$46.nextSibling, _el$41 = _el$21.firstChild, [_el$42, _co$8] = getNextMarker(_el$41.nextSibling), _el$23 = _el$42.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling, _el$43 = _el$23.nextSibling, [_el$44, _co$9] = getNextMarker(_el$43.nextSibling);
-    insert(_el$20, createComponent(CopyButton, {
+    var _el$28 = getNextElement(_tmpl$14), _el$63 = _el$28.firstChild, [_el$64, _co$12] = getNextMarker(_el$63.nextSibling), _el$29 = _el$64.nextSibling, _el$59 = _el$29.firstChild, [_el$60, _co$10] = getNextMarker(_el$59.nextSibling), _el$40 = _el$60.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.firstChild, _el$43 = _el$42.firstChild, _el$44 = _el$42.nextSibling, [_el$45, _co$8] = getNextMarker(_el$44.nextSibling), _el$61 = _el$40.nextSibling, [_el$62, _co$11] = getNextMarker(_el$61.nextSibling);
+    insert(_el$28, createComponent(CopyButton, {
       getText: getTableText,
       title: "Copy table data",
       position: "top-right"
-    }), _el$46, _co$0);
-    insert(_el$21, createComponent(Show, {
+    }), _el$64, _co$12);
+    insert(_el$29, createComponent(Show, {
       get when() {
         return tableParams.title;
       },
       get children() {
-        var _el$22 = getNextElement(_tmpl$6);
-        insert(_el$22, () => tableParams.title);
-        return _el$22;
+        var _el$30 = getNextElement(_tmpl$12), _el$36 = _el$30.firstChild, [_el$37, _co$6] = getNextMarker(_el$36.nextSibling), _el$38 = _el$37.nextSibling, [_el$39, _co$7] = getNextMarker(_el$38.nextSibling);
+        setAttribute(_el$30, "id", `${tableId}-title`);
+        insert(_el$30, () => tableParams.title, _el$37, _co$6);
+        insert(_el$30, createComponent(Show, {
+          get when() {
+            return isVirtualizing();
+          },
+          get children() {
+            var _el$31 = getNextElement(_tmpl$11), _el$32 = _el$31.firstChild, _el$34 = _el$32.nextSibling, [_el$35, _co$5] = getNextMarker(_el$34.nextSibling);
+            _el$35.nextSibling;
+            insert(_el$31, () => {
+              var _a;
+              return (_a = tableParams.rows) == null ? void 0 : _a.length;
+            }, _el$35, _co$5);
+            return _el$31;
+          }
+        }), _el$39, _co$7);
+        return _el$30;
       }
-    }), _el$42, _co$8);
-    insert(_el$26, createComponent(For, {
+    }), _el$60, _co$10);
+    var _ref$ = scrollContainerRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$40) : scrollContainerRef = _el$40;
+    insert(_el$43, createComponent(For, {
       get each() {
         return tableParams.columns;
       },
       children: (column) => (() => {
-        var _el$47 = getNextElement(_tmpl$1);
-        insert(_el$47, () => column.label);
-        effect((_$p) => style(_el$47, column.width ? {
+        var _el$65 = getNextElement(_tmpl$15);
+        insert(_el$65, () => column.label);
+        effect((_$p) => style(_el$65, column.width ? {
           width: column.width
         } : {}, _$p));
-        return _el$47;
+        return _el$65;
       })()
     }));
-    insert(_el$27, createComponent(For, {
-      get each() {
-        return tableParams.rows.slice(0, DEFAULT_RESOURCE_LIMITS.maxTableRows);
+    insert(_el$41, createComponent(Show, {
+      get when() {
+        return isVirtualizing();
       },
-      children: (row, i) => (() => {
-        var _el$48 = getNextElement(_tmpl$10);
-        insert(_el$48, createComponent(For, {
-          get each() {
-            return tableParams.columns;
-          },
-          children: (column) => (() => {
-            var _el$49 = getNextElement(_tmpl$11), _el$50 = _el$49.firstChild;
-            effect(() => setProperty(_el$50, "innerHTML", renderCellValue(row[column.key])));
-            return _el$49;
-          })()
-        }));
-        effect(() => className(_el$48, `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"}`));
-        return _el$48;
-      })()
-    }));
-    insert(_el$21, createComponent(Show, {
+      get fallback() {
+        return createComponent(StandardTableBody, {});
+      },
+      get children() {
+        return createComponent(VirtualizedTableBody, {});
+      }
+    }), _el$45, _co$8);
+    insert(_el$29, createComponent(Show, {
       get when() {
         return tableParams.pagination;
       },
       get children() {
-        var _el$28 = getNextElement(_tmpl$9), _el$29 = _el$28.firstChild, _el$30 = _el$29.firstChild, _el$35 = _el$30.nextSibling, [_el$36, _co$5] = getNextMarker(_el$35.nextSibling), _el$31 = _el$36.nextSibling, _el$37 = _el$31.nextSibling, [_el$38, _co$6] = getNextMarker(_el$37.nextSibling), _el$33 = _el$38.nextSibling, _el$39 = _el$33.nextSibling, [_el$40, _co$7] = getNextMarker(_el$39.nextSibling);
-        insert(_el$29, () => tableParams.pagination.currentPage * tableParams.pagination.pageSize + 1, _el$36, _co$5);
-        insert(_el$29, () => Math.min((tableParams.pagination.currentPage + 1) * tableParams.pagination.pageSize, tableParams.pagination.totalRows), _el$38, _co$6);
-        insert(_el$29, () => tableParams.pagination.totalRows, _el$40, _co$7);
-        return _el$28;
+        var _el$46 = getNextElement(_tmpl$13), _el$47 = _el$46.firstChild, _el$48 = _el$47.firstChild, _el$53 = _el$48.nextSibling, [_el$54, _co$9] = getNextMarker(_el$53.nextSibling), _el$49 = _el$54.nextSibling, _el$55 = _el$49.nextSibling, [_el$56, _co$0] = getNextMarker(_el$55.nextSibling), _el$51 = _el$56.nextSibling, _el$57 = _el$51.nextSibling, [_el$58, _co$1] = getNextMarker(_el$57.nextSibling);
+        insert(_el$47, () => tableParams.pagination.currentPage * tableParams.pagination.pageSize + 1, _el$54, _co$9);
+        insert(_el$47, () => Math.min((tableParams.pagination.currentPage + 1) * tableParams.pagination.pageSize, tableParams.pagination.totalRows), _el$56, _co$0);
+        insert(_el$47, () => tableParams.pagination.totalRows, _el$58, _co$1);
+        return _el$46;
       }
-    }), _el$44, _co$9);
-    return _el$20;
+    }), _el$62, _co$11);
+    effect((_p$) => {
+      var _v$8 = isVirtualizing() ? {
+        "max-height": "500px",
+        "overflow-y": "auto"
+      } : {}, _v$9 = tableParams.title || "Data table", _v$0 = tableParams.title ? `${tableId}-title` : void 0;
+      _p$.e = style(_el$40, _v$8, _p$.e);
+      _v$9 !== _p$.t && setAttribute(_el$40, "aria-label", _p$.t = _v$9);
+      _v$0 !== _p$.a && setAttribute(_el$41, "aria-labelledby", _p$.a = _v$0);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$28;
   })();
 }
 function MetricRenderer(props) {
@@ -258,51 +468,51 @@ function MetricRenderer(props) {
     return `${title}: ${value}${unit ? " " + unit : ""}`;
   };
   return (() => {
-    var _el$51 = getNextElement(_tmpl$15), _el$73 = _el$51.firstChild, [_el$74, _co$14] = getNextMarker(_el$73.nextSibling), _el$52 = _el$74.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$55.firstChild, _el$58 = _el$56.nextSibling, [_el$59, _co$1] = getNextMarker(_el$58.nextSibling), _el$69 = _el$53.nextSibling, [_el$70, _co$12] = getNextMarker(_el$69.nextSibling), _el$71 = _el$70.nextSibling, [_el$72, _co$13] = getNextMarker(_el$71.nextSibling);
-    insert(_el$51, createComponent(CopyButton, {
+    var _el$66 = getNextElement(_tmpl$19), _el$88 = _el$66.firstChild, [_el$89, _co$18] = getNextMarker(_el$88.nextSibling), _el$67 = _el$89.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling, _el$71 = _el$70.firstChild, _el$73 = _el$71.nextSibling, [_el$74, _co$13] = getNextMarker(_el$73.nextSibling), _el$84 = _el$68.nextSibling, [_el$85, _co$16] = getNextMarker(_el$84.nextSibling), _el$86 = _el$85.nextSibling, [_el$87, _co$17] = getNextMarker(_el$86.nextSibling);
+    insert(_el$66, createComponent(CopyButton, {
       getText: getMetricText,
       title: "Copy metric",
       position: "top-right"
-    }), _el$74, _co$14);
-    insert(_el$54, () => metricParams.title);
-    insert(_el$56, () => metricParams.value);
-    insert(_el$55, createComponent(Show, {
+    }), _el$89, _co$18);
+    insert(_el$69, () => metricParams.title);
+    insert(_el$71, () => metricParams.value);
+    insert(_el$70, createComponent(Show, {
       get when() {
         return metricParams.unit;
       },
       get children() {
-        var _el$57 = getNextElement(_tmpl$12);
-        insert(_el$57, () => metricParams.unit);
-        return _el$57;
+        var _el$72 = getNextElement(_tmpl$16);
+        insert(_el$72, () => metricParams.unit);
+        return _el$72;
       }
-    }), _el$59, _co$1);
-    insert(_el$52, createComponent(Show, {
+    }), _el$74, _co$13);
+    insert(_el$67, createComponent(Show, {
       get when() {
         return metricParams.trend;
       },
       get children() {
-        var _el$60 = getNextElement(_tmpl$13), _el$61 = _el$60.firstChild, _el$64 = _el$61.firstChild, [_el$65, _co$10] = getNextMarker(_el$64.nextSibling), _el$62 = _el$65.nextSibling, _el$66 = _el$62.nextSibling, [_el$67, _co$11] = getNextMarker(_el$66.nextSibling);
-        _el$67.nextSibling;
-        insert(_el$61, (() => {
+        var _el$75 = getNextElement(_tmpl$17), _el$76 = _el$75.firstChild, _el$79 = _el$76.firstChild, [_el$80, _co$14] = getNextMarker(_el$79.nextSibling), _el$77 = _el$80.nextSibling, _el$81 = _el$77.nextSibling, [_el$82, _co$15] = getNextMarker(_el$81.nextSibling);
+        _el$82.nextSibling;
+        insert(_el$76, (() => {
           var _c$ = memo(() => metricParams.trend.direction === "up");
           return () => _c$() ? "�" : metricParams.trend.direction === "down" ? "�" : "�";
-        })(), _el$65, _co$10);
-        insert(_el$61, () => Math.abs(metricParams.trend.value), _el$67, _co$11);
-        effect(() => className(_el$61, `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$60;
+        })(), _el$80, _co$14);
+        insert(_el$76, () => Math.abs(metricParams.trend.value), _el$82, _co$15);
+        effect(() => className(_el$76, `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$75;
       }
-    }), _el$70, _co$12);
-    insert(_el$52, createComponent(Show, {
+    }), _el$85, _co$16);
+    insert(_el$67, createComponent(Show, {
       get when() {
         return metricParams.subtitle;
       },
       get children() {
-        var _el$68 = getNextElement(_tmpl$14);
-        insert(_el$68, () => metricParams.subtitle);
-        return _el$68;
+        var _el$83 = getNextElement(_tmpl$18);
+        insert(_el$83, () => metricParams.subtitle);
+        return _el$83;
       }
-    }), _el$72, _co$13);
-    return _el$51;
+    }), _el$87, _co$17);
+    return _el$66;
   })();
 }
 function extractImageFromMarkdown(content) {
@@ -343,117 +553,131 @@ function TextRenderer(props) {
     },
     get fallback() {
       return (() => {
-        var _el$75 = getNextElement(_tmpl$16), _el$77 = _el$75.firstChild, [_el$78, _co$15] = getNextMarker(_el$77.nextSibling), _el$76 = _el$78.nextSibling;
-        insert(_el$75, createComponent(CopyButton, {
+        var _el$90 = getNextElement(_tmpl$20), _el$92 = _el$90.firstChild, [_el$93, _co$19] = getNextMarker(_el$92.nextSibling), _el$91 = _el$93.nextSibling;
+        insert(_el$90, createComponent(CopyButton, {
           getText: getTextContent,
           title: "Copy text",
           position: "top-right"
-        }), _el$78, _co$15);
+        }), _el$93, _co$19);
         effect((_p$) => {
-          var _v$3 = `prose prose-sm dark:prose-invert max-w-none ${textParams.className || ""}`, _v$4 = htmlContent();
-          _v$3 !== _p$.e && className(_el$76, _p$.e = _v$3);
-          _v$4 !== _p$.t && setProperty(_el$76, "innerHTML", _p$.t = _v$4);
+          var _v$1 = `prose prose-sm dark:prose-invert max-w-none ${textParams.className || ""}`, _v$10 = htmlContent();
+          _v$1 !== _p$.e && className(_el$91, _p$.e = _v$1);
+          _v$10 !== _p$.t && setProperty(_el$91, "innerHTML", _p$.t = _v$10);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$75;
+        return _el$90;
       })();
     },
     children: (data) => (() => {
-      var _el$79 = getNextElement(_tmpl$17), _el$80 = _el$79.firstChild, _el$81 = _el$80.firstChild, _el$82 = _el$81.firstChild, _el$83 = _el$80.nextSibling, _el$84 = _el$83.firstChild;
-      insert(_el$84, () => data().credit);
+      var _el$94 = getNextElement(_tmpl$21), _el$95 = _el$94.firstChild, _el$96 = _el$95.firstChild, _el$97 = _el$96.firstChild, _el$98 = _el$95.nextSibling, _el$99 = _el$98.firstChild;
+      insert(_el$99, () => data().credit);
       effect((_p$) => {
-        var _v$5 = data().linkUrl, _v$6 = data().imageUrl, _v$7 = data().alt;
-        _v$5 !== _p$.e && setAttribute(_el$81, "href", _p$.e = _v$5);
-        _v$6 !== _p$.t && setAttribute(_el$82, "src", _p$.t = _v$6);
-        _v$7 !== _p$.a && setAttribute(_el$82, "alt", _p$.a = _v$7);
+        var _v$11 = data().linkUrl, _v$12 = data().imageUrl, _v$13 = data().alt;
+        _v$11 !== _p$.e && setAttribute(_el$96, "href", _p$.e = _v$11);
+        _v$12 !== _p$.t && setAttribute(_el$97, "src", _p$.t = _v$12);
+        _v$13 !== _p$.a && setAttribute(_el$97, "alt", _p$.a = _v$13);
         return _p$;
       }, {
         e: void 0,
         t: void 0,
         a: void 0
       });
-      return _el$79;
+      return _el$94;
     })()
   });
 }
 function IframeRenderer(props) {
   const params = props.component.params;
   return (() => {
-    var _el$85 = getNextElement(_tmpl$19), _el$89 = _el$85.firstChild, [_el$90, _co$16] = getNextMarker(_el$89.nextSibling), _el$88 = _el$90.nextSibling;
-    insert(_el$85, createComponent(Show, {
+    var _el$100 = getNextElement(_tmpl$23), _el$104 = _el$100.firstChild, [_el$105, _co$20] = getNextMarker(_el$104.nextSibling), _el$103 = _el$105.nextSibling;
+    insert(_el$100, createComponent(Show, {
       get when() {
         return params.title;
       },
       get children() {
-        var _el$86 = getNextElement(_tmpl$18), _el$87 = _el$86.firstChild;
-        insert(_el$87, () => params.title);
-        return _el$86;
+        var _el$101 = getNextElement(_tmpl$22), _el$102 = _el$101.firstChild;
+        insert(_el$102, () => params.title);
+        return _el$101;
       }
-    }), _el$90, _co$16);
+    }), _el$105, _co$20);
     effect((_p$) => {
-      var _v$8 = params.url, _v$9 = params.title || "Embedded content", _v$0 = `height: ${params.height || "400px"}; min-height: 300px;`;
-      _v$8 !== _p$.e && setAttribute(_el$88, "src", _p$.e = _v$8);
-      _v$9 !== _p$.t && setAttribute(_el$88, "title", _p$.t = _v$9);
-      _p$.a = style(_el$88, _v$0, _p$.a);
+      var _v$14 = params.url, _v$15 = params.title || "Embedded content", _v$16 = `height: ${params.height || "400px"}; min-height: 300px;`;
+      _v$14 !== _p$.e && setAttribute(_el$103, "src", _p$.e = _v$14);
+      _v$15 !== _p$.t && setAttribute(_el$103, "title", _p$.t = _v$15);
+      _p$.a = style(_el$103, _v$16, _p$.a);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    return _el$85;
+    return _el$100;
   })();
 }
 function ImageRenderer(props) {
   const params = props.component.params;
   return (() => {
-    var _el$91 = getNextElement(_tmpl$21), _el$92 = _el$91.firstChild, _el$93 = _el$92.firstChild, _el$94 = _el$93.firstChild, _el$97 = _el$92.nextSibling, [_el$98, _co$17] = getNextMarker(_el$97.nextSibling);
-    insert(_el$91, createComponent(Show, {
+    var _el$106 = getNextElement(_tmpl$25), _el$107 = _el$106.firstChild, _el$108 = _el$107.firstChild, _el$109 = _el$108.firstChild, _el$112 = _el$107.nextSibling, [_el$113, _co$21] = getNextMarker(_el$112.nextSibling);
+    insert(_el$106, createComponent(Show, {
       get when() {
         return params.caption;
       },
       get children() {
-        var _el$95 = getNextElement(_tmpl$20), _el$96 = _el$95.firstChild;
-        insert(_el$96, () => params.caption);
-        return _el$95;
+        var _el$110 = getNextElement(_tmpl$24), _el$111 = _el$110.firstChild;
+        insert(_el$111, () => params.caption);
+        return _el$110;
       }
-    }), _el$98, _co$17);
+    }), _el$113, _co$21);
     effect((_p$) => {
-      var _v$1 = params.url, _v$10 = params.url, _v$11 = params.alt || "Image";
-      _v$1 !== _p$.e && setAttribute(_el$93, "href", _p$.e = _v$1);
-      _v$10 !== _p$.t && setAttribute(_el$94, "src", _p$.t = _v$10);
-      _v$11 !== _p$.a && setAttribute(_el$94, "alt", _p$.a = _v$11);
+      var _v$17 = `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$18 = params.url, _v$19 = `View full size: ${params.alt || "image"}`, _v$20 = params.url, _v$21 = params.alt || "Image";
+      _v$17 !== _p$.e && className(_el$106, _p$.e = _v$17);
+      _v$18 !== _p$.t && setAttribute(_el$108, "href", _p$.t = _v$18);
+      _v$19 !== _p$.a && setAttribute(_el$108, "aria-label", _p$.a = _v$19);
+      _v$20 !== _p$.o && setAttribute(_el$109, "src", _p$.o = _v$20);
+      _v$21 !== _p$.i && setAttribute(_el$109, "alt", _p$.i = _v$21);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
+      a: void 0,
+      o: void 0,
+      i: void 0
     });
-    return _el$91;
+    return _el$106;
   })();
 }
 function LinkRenderer(props) {
   const params = props.component.params;
   return (() => {
-    var _el$99 = getNextElement(_tmpl$23), _el$100 = _el$99.firstChild, _el$101 = _el$100.nextSibling, _el$102 = _el$101.firstChild, _el$104 = _el$102.nextSibling, [_el$105, _co$18] = getNextMarker(_el$104.nextSibling);
-    _el$99.$$click = (e) => e.stopPropagation();
-    insert(_el$102, () => params.label || params.url);
-    insert(_el$101, createComponent(Show, {
+    var _el$114 = getNextElement(_tmpl$27), _el$115 = _el$114.firstChild, _el$116 = _el$115.nextSibling, _el$117 = _el$116.firstChild, _el$119 = _el$117.nextSibling, [_el$120, _co$22] = getNextMarker(_el$119.nextSibling);
+    _el$114.$$click = (e) => e.stopPropagation();
+    insert(_el$117, () => params.label || params.url);
+    insert(_el$116, createComponent(Show, {
       get when() {
         return params.description;
       },
       get children() {
-        var _el$103 = getNextElement(_tmpl$22);
-        insert(_el$103, () => params.description);
-        return _el$103;
+        var _el$118 = getNextElement(_tmpl$26);
+        insert(_el$118, () => params.description);
+        return _el$118;
       }
-    }), _el$105, _co$18);
-    effect(() => setAttribute(_el$99, "href", params.url));
+    }), _el$120, _co$22);
+    effect((_p$) => {
+      var _v$22 = params.url, _v$23 = `${params.label || "Link"}: ${params.description || params.url} (opens in new tab)`, _v$24 = `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$22 !== _p$.e && setAttribute(_el$114, "href", _p$.e = _v$22);
+      _v$23 !== _p$.t && setAttribute(_el$114, "aria-label", _p$.t = _v$23);
+      _v$24 !== _p$.a && className(_el$114, _p$.a = _v$24);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
     runHydrationEvents();
-    return _el$99;
+    return _el$114;
   })();
 }
 function ComponentRenderer(props) {
@@ -467,12 +691,12 @@ function ComponentRenderer(props) {
       details: validation.errors
     });
     return (() => {
-      var _el$106 = getNextElement(_tmpl$24), _el$107 = _el$106.firstChild, _el$108 = _el$107.nextSibling;
-      insert(_el$108, () => {
+      var _el$121 = getNextElement(_tmpl$28), _el$122 = _el$121.firstChild, _el$123 = _el$122.nextSibling;
+      insert(_el$123, () => {
         var _a2, _b;
         return ((_b = (_a2 = validation.errors) == null ? void 0 : _a2[0]) == null ? void 0 : _b.message) || "Unknown validation error";
       });
-      return _el$106;
+      return _el$121;
     })();
   }
   return createComponent(GenerativeUIErrorBoundary, {
@@ -595,6 +819,110 @@ function ComponentRenderer(props) {
             }
           });
         }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "carousel";
+        },
+        get children() {
+          return createComponent(CarouselRenderer, {
+            get items() {
+              var _a2;
+              return ((_a2 = props.component.params) == null ? void 0 : _a2.items) || [];
+            },
+            get height() {
+              var _a2;
+              return (_a2 = props.component.params) == null ? void 0 : _a2.height;
+            }
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "artifact";
+        },
+        get children() {
+          return createComponent(ArtifactRenderer, {
+            get params() {
+              return props.component.params;
+            }
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "form";
+        },
+        get children() {
+          return createComponent(FormRenderer, {
+            get component() {
+              return props.component;
+            }
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "modal";
+        },
+        get children() {
+          return createComponent(ModalRenderer, {
+            get component() {
+              return props.component;
+            }
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "action-group";
+        },
+        get children() {
+          return createComponent(ActionGroupRenderer, {
+            get component() {
+              return props.component;
+            }
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "image-gallery";
+        },
+        get children() {
+          return createComponent(ImageGalleryRenderer, {
+            get component() {
+              return props.component;
+            }
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "video";
+        },
+        get children() {
+          return createComponent(VideoRenderer, {
+            get component() {
+              return props.component;
+            }
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "code";
+        },
+        get children() {
+          return createComponent(CodeBlockRenderer, {
+            get component() {
+              return props.component;
+            }
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.component.type === "map";
+        },
+        get children() {
+          return createComponent(MapRenderer, {
+            get component() {
+              return props.component;
+            }
+          });
+        }
       })];
     }
   });
@@ -614,76 +942,190 @@ function ActionRenderer(props) {
   const isDisabled = () => params.disabled || params.action === "tool-call" && isExecuting();
   if (params.type === "link" || params.action === "link") {
     return (() => {
-      var _el$109 = getNextElement(_tmpl$26), _el$111 = _el$109.firstChild, [_el$112, _co$19] = getNextMarker(_el$111.nextSibling), _el$113 = _el$112.nextSibling, [_el$114, _co$20] = getNextMarker(_el$113.nextSibling);
-      _el$109.$$click = handleClick;
-      insert(_el$109, createComponent(Show, {
+      var _el$124 = getNextElement(_tmpl$30), _el$126 = _el$124.firstChild, [_el$127, _co$23] = getNextMarker(_el$126.nextSibling), _el$128 = _el$127.nextSibling, [_el$129, _co$24] = getNextMarker(_el$128.nextSibling);
+      _el$124.$$click = handleClick;
+      insert(_el$124, createComponent(Show, {
         get when() {
           return params.icon;
         },
         get children() {
-          var _el$110 = getNextElement(_tmpl$25);
-          insert(_el$110, () => params.icon);
-          return _el$110;
+          var _el$125 = getNextElement(_tmpl$29);
+          insert(_el$125, () => params.icon);
+          return _el$125;
         }
-      }), _el$112, _co$19);
-      insert(_el$109, () => params.label, _el$114, _co$20);
+      }), _el$127, _co$23);
+      insert(_el$124, () => params.label, _el$129, _co$24);
       effect((_p$) => {
-        var _v$12 = params.url || "#", _v$13 = params.url ? "_blank" : void 0, _v$14 = `inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors
-          ${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"}`;
-        _v$12 !== _p$.e && setAttribute(_el$109, "href", _p$.e = _v$12);
-        _v$13 !== _p$.t && setAttribute(_el$109, "target", _p$.t = _v$13);
-        _v$14 !== _p$.a && className(_el$109, _p$.a = _v$14);
+        var _v$25 = params.url || "#", _v$26 = params.url ? "_blank" : void 0, _v$27 = params.ariaLabel || params.label, _v$28 = `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$25 !== _p$.e && setAttribute(_el$124, "href", _p$.e = _v$25);
+        _v$26 !== _p$.t && setAttribute(_el$124, "target", _p$.t = _v$26);
+        _v$27 !== _p$.a && setAttribute(_el$124, "aria-label", _p$.a = _v$27);
+        _v$28 !== _p$.o && className(_el$124, _p$.o = _v$28);
         return _p$;
       }, {
         e: void 0,
         t: void 0,
-        a: void 0
+        a: void 0,
+        o: void 0
       });
       runHydrationEvents();
-      return _el$109;
+      return _el$124;
     })();
   }
   return (() => {
-    var _el$115 = getNextElement(_tmpl$28), _el$118 = _el$115.firstChild, [_el$119, _co$21] = getNextMarker(_el$118.nextSibling), _el$120 = _el$119.nextSibling, [_el$121, _co$22] = getNextMarker(_el$120.nextSibling), _el$122 = _el$121.nextSibling, [_el$123, _co$23] = getNextMarker(_el$122.nextSibling);
-    _el$115.$$click = handleClick;
-    insert(_el$115, createComponent(Show, {
+    var _el$130 = getNextElement(_tmpl$32), _el$133 = _el$130.firstChild, [_el$134, _co$25] = getNextMarker(_el$133.nextSibling), _el$135 = _el$134.nextSibling, [_el$136, _co$26] = getNextMarker(_el$135.nextSibling), _el$137 = _el$136.nextSibling, [_el$138, _co$27] = getNextMarker(_el$137.nextSibling);
+    _el$130.$$click = handleClick;
+    insert(_el$130, createComponent(Show, {
       get when() {
         return memo(() => !!isExecuting())() && params.action === "tool-call";
       },
       get children() {
-        return getNextElement(_tmpl$27);
+        return getNextElement(_tmpl$31);
       }
-    }), _el$119, _co$21);
-    insert(_el$115, createComponent(Show, {
+    }), _el$134, _co$25);
+    insert(_el$130, createComponent(Show, {
       get when() {
         return memo(() => !!params.icon)() && !(isExecuting() && params.action === "tool-call");
       },
       get children() {
-        var _el$117 = getNextElement(_tmpl$25);
-        insert(_el$117, () => params.icon);
-        return _el$117;
+        var _el$132 = getNextElement(_tmpl$29);
+        insert(_el$132, () => params.icon);
+        return _el$132;
       }
-    }), _el$121, _co$22);
-    insert(_el$115, () => params.label, _el$123, _co$23);
+    }), _el$136, _co$26);
+    insert(_el$130, () => params.label, _el$138, _co$27);
     effect((_p$) => {
-      var _v$15 = params.action === "submit" ? "submit" : "button", _v$16 = isDisabled(), _v$17 = `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
+      var _v$29 = params.action === "submit" ? "submit" : "button", _v$30 = isDisabled(), _v$31 = isExecuting() && params.action === "tool-call", _v$32 = params.ariaLabel || params.label, _v$33 = `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" : ""}`;
-      _v$15 !== _p$.e && setAttribute(_el$115, "type", _p$.e = _v$15);
-      _v$16 !== _p$.t && setProperty(_el$115, "disabled", _p$.t = _v$16);
-      _v$17 !== _p$.a && className(_el$115, _p$.a = _v$17);
+        ${params.size === "sm" ? "px-3 py-1.5 text-xs" : params.size === "lg" ? "px-6 py-3 text-base" : ""}
+        ${params.className || ""}`;
+      _v$29 !== _p$.e && setAttribute(_el$130, "type", _p$.e = _v$29);
+      _v$30 !== _p$.t && setProperty(_el$130, "disabled", _p$.t = _v$30);
+      _v$31 !== _p$.a && setAttribute(_el$130, "aria-busy", _p$.a = _v$31);
+      _v$32 !== _p$.o && setAttribute(_el$130, "aria-label", _p$.o = _v$32);
+      _v$33 !== _p$.i && className(_el$130, _p$.i = _v$33);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
+      a: void 0,
+      o: void 0,
+      i: void 0
     });
     runHydrationEvents();
-    return _el$115;
+    return _el$130;
+  })();
+}
+function ErrorCardRenderer(props) {
+  const getErrorText = () => {
+    return `Error in ${props.error.tool || "unknown tool"}: ${props.error.message || "Unknown error"}`;
+  };
+  return (() => {
+    var _el$139 = getNextElement(_tmpl$36), _el$162 = _el$139.firstChild, [_el$163, _co$33] = getNextMarker(_el$162.nextSibling), _el$140 = _el$163.nextSibling, _el$141 = _el$140.firstChild, _el$142 = _el$141.nextSibling, _el$143 = _el$142.firstChild, _el$144 = _el$143.firstChild, _el$145 = _el$144.nextSibling, [_el$146, _co$28] = getNextMarker(_el$145.nextSibling), _el$147 = _el$143.nextSibling, _el$156 = _el$147.nextSibling, [_el$157, _co$30] = getNextMarker(_el$156.nextSibling), _el$158 = _el$157.nextSibling, [_el$159, _co$31] = getNextMarker(_el$158.nextSibling), _el$160 = _el$159.nextSibling, [_el$161, _co$32] = getNextMarker(_el$160.nextSibling);
+    insert(_el$139, createComponent(CopyButton, {
+      getText: getErrorText,
+      title: "Copy error details",
+      position: "top-right"
+    }), _el$163, _co$33);
+    insert(_el$143, () => props.error.tool || "Unknown", _el$146, _co$28);
+    insert(_el$147, () => props.error.message || "An error occurred during tool execution");
+    insert(_el$142, createComponent(Show, {
+      get when() {
+        return props.error.type;
+      },
+      get children() {
+        var _el$148 = getNextElement(_tmpl$33), _el$149 = _el$148.firstChild, _el$150 = _el$149.nextSibling, [_el$151, _co$29] = getNextMarker(_el$150.nextSibling);
+        insert(_el$148, () => props.error.type, _el$151, _co$29);
+        return _el$148;
+      }
+    }), _el$157, _co$30);
+    insert(_el$142, createComponent(Show, {
+      get when() {
+        var _a;
+        return (_a = props.error.suggestions) == null ? void 0 : _a.length;
+      },
+      get children() {
+        var _el$152 = getNextElement(_tmpl$34), _el$153 = _el$152.firstChild, _el$154 = _el$153.nextSibling;
+        insert(_el$154, createComponent(For, {
+          get each() {
+            return props.error.suggestions;
+          },
+          children: (suggestion) => (() => {
+            var _el$164 = getNextElement(_tmpl$37);
+            insert(_el$164, suggestion);
+            return _el$164;
+          })()
+        }));
+        return _el$152;
+      }
+    }), _el$159, _co$31);
+    insert(_el$142, createComponent(Show, {
+      get when() {
+        return props.error.timestamp;
+      },
+      get children() {
+        var _el$155 = getNextElement(_tmpl$35);
+        insert(_el$155, () => new Date(props.error.timestamp).toLocaleString());
+        return _el$155;
+      }
+    }), _el$161, _co$32);
+    return _el$139;
+  })();
+}
+function isErrorResponse(content) {
+  return content && typeof content === "object" && content.error === true;
+}
+function isUIResource(content) {
+  var _a, _b, _c;
+  return content && typeof content === "object" && (((_a = content.uri) == null ? void 0 : _a.startsWith("ui://")) || ((_b = content.content) == null ? void 0 : _b.type) === "rawHtml" || ((_c = content.content) == null ? void 0 : _c.htmlString));
+}
+function UIResourceHtmlRenderer(props) {
+  const htmlContent = () => {
+    var _a;
+    if ((_a = props.resource.content) == null ? void 0 : _a.htmlString) {
+      return purify.sanitize(props.resource.content.htmlString);
+    }
+    return "";
+  };
+  const resourceTitle = () => {
+    var _a, _b;
+    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$165 = getNextElement(_tmpl$39), _el$169 = _el$165.firstChild, [_el$170, _co$34] = getNextMarker(_el$169.nextSibling), _el$168 = _el$170.nextSibling;
+    insert(_el$165, createComponent(Show, {
+      get when() {
+        var _a;
+        return ((_a = props.resource.metadata) == null ? void 0 : _a.title) || props.resource.uri;
+      },
+      get children() {
+        var _el$166 = getNextElement(_tmpl$38), _el$167 = _el$166.firstChild;
+        insert(_el$167, resourceTitle);
+        return _el$166;
+      }
+    }), _el$170, _co$34);
+    effect(() => setProperty(_el$168, "innerHTML", htmlContent()));
+    return _el$165;
   })();
 }
 const UIResourceRenderer = (props) => {
+  if (isErrorResponse(props.content)) {
+    return createComponent(ErrorCardRenderer, {
+      get error() {
+        return props.content;
+      }
+    });
+  }
+  if (isUIResource(props.content)) {
+    return createComponent(UIResourceHtmlRenderer, {
+      get resource() {
+        return props.content;
+      }
+    });
+  }
   const layout = () => {
     if ("type" in props.content && props.content.type !== "composite") {
       return {
@@ -739,47 +1181,54 @@ const UIResourceRenderer = (props) => {
     };
   });
   const layoutData = layout();
-  return (() => {
-    var _el$124 = getNextElement(_tmpl$29), _el$125 = _el$124.firstChild, _el$126 = _el$125.nextSibling, [_el$127, _co$24] = getNextMarker(_el$126.nextSibling);
-    insert(_el$125, createComponent(For, {
-      get each() {
-        return layoutData.components;
-      },
-      children: (component) => (() => {
-        var _el$128 = getNextElement(_tmpl$30);
-        insert(_el$128, createComponent(ComponentRenderer, {
-          component,
-          get onError() {
-            return props.onError;
-          }
-        }));
-        effect((_$p) => style(_el$128, getGridStyleString(component), _$p));
-        return _el$128;
-      })()
-    }));
-    insert(_el$124, createComponent(Show, {
-      get when() {
-        return shouldShowAutoFooter();
-      },
-      get children() {
-        return createComponent(FooterRenderer, {
-          get params() {
-            return autoFooterParams();
-          }
-        });
-      }
-    }), _el$127, _co$24);
-    effect((_p$) => {
-      var _v$18 = `w-full ${props.class || ""}`, _v$19 = gridContainerStyle();
-      _v$18 !== _p$.e && className(_el$124, _p$.e = _v$18);
-      _p$.t = style(_el$125, _v$19, _p$.t);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$124;
-  })();
+  const renderComponent = (component, onError) => createComponent(ComponentRenderer, {
+    component,
+    onError
+  });
+  return createComponent(RenderProvider, {
+    renderComponent,
+    get children() {
+      var _el$171 = getNextElement(_tmpl$40), _el$172 = _el$171.firstChild, _el$173 = _el$172.nextSibling, [_el$174, _co$35] = getNextMarker(_el$173.nextSibling);
+      insert(_el$172, createComponent(For, {
+        get each() {
+          return layoutData.components;
+        },
+        children: (component) => (() => {
+          var _el$175 = getNextElement(_tmpl$41);
+          insert(_el$175, createComponent(ComponentRenderer, {
+            component,
+            get onError() {
+              return props.onError;
+            }
+          }));
+          effect((_$p) => style(_el$175, getGridStyleString(component), _$p));
+          return _el$175;
+        })()
+      }));
+      insert(_el$171, createComponent(Show, {
+        get when() {
+          return shouldShowAutoFooter();
+        },
+        get children() {
+          return createComponent(FooterRenderer, {
+            get params() {
+              return autoFooterParams();
+            }
+          });
+        }
+      }), _el$174, _co$35);
+      effect((_p$) => {
+        var _v$34 = `w-full ${props.class || ""}`, _v$35 = gridContainerStyle();
+        _v$34 !== _p$.e && className(_el$171, _p$.e = _v$34);
+        _p$.t = style(_el$172, _v$35, _p$.t);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$171;
+    }
+  });
 };
 delegateEvents(["click"]);
 export {