@seed-ship/mcp-ui-solid 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -5,6 +5,47 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2025-11-25
+
+### Added - Phase 5.0 Quick Wins
+
+#### GridRenderer (NEW)
+- **Nested CSS Grid layouts** for complex template builder layouts
+- Supports `columns`, `gap`, `minRowHeight`, and `areas` configuration
+- Recursive rendering of child components via `UIResourceRenderer`
+- Enables sidebar + main + footer dashboard layouts
+
+#### MCPActionContext + useAction() (NEW)
+- **Context Provider pattern** replaces CustomEvent for action dispatch
+- `MCPActionProvider` wrapper for orchestration (Mastra integration ready)
+- `useAction()` hook with execute, isExecuting state, and error handling
+- `useMCPActionSafe()` for components outside provider (fallback to CustomEvent)
+- `useToolAction()` for binding to specific tool names
+- Typed `ActionRequest` and `ActionResult` interfaces
+- Support for audit callbacks (`onAction`) and webhook events (`onWebhook`)
+
+#### FooterRenderer Auto-Injection (NEW)
+- Automatically inject footer when layout has metadata (executionTime, sourceCount, llmModel)
+- Opt-out via `layout.metadata.hideFooter: true`
+- Respects explicit footer components if already present
+- Shows "Powered by Deposium" with execution metrics
+
+### Changed
+- **ActionRenderer refactored** to use `useAction()` hook internally
+- Added loading spinner state during tool-call execution
+- Button auto-disables while action is executing
+
+### Types
+- Added `GridComponentParams` interface for grid configuration
+- Added `footer`, `carousel`, `artifact` to `ComponentType` union
+- Extended `UILayout.metadata` with `executionTime`, `sourceCount`, `hideFooter`
+- New exports: `MCPActionProvider`, `MCPActionContext`, `useMCPAction`, `useAction`, `useToolAction`
+
+### Technical
+- New directories: `src/context/`, `src/hooks/useAction.ts`
+- Full TypeScript support with strict types
+- SSR-compatible with `isServer` guards
+
 ## [1.1.0] - 2025-11-25
 
 ### Documentation

package/README.md

@@ -111,14 +111,20 @@ function StreamingDashboard() {
 | `LinkRenderer` | `link` | External links with security attributes |
 | `IframeRenderer` | `iframe` | Secure iframe embedding (sandboxed) |
 
+### Layout Renderers
+
+| Component | Type | Description |
+|-----------|------|-------------|
+| `GridRenderer` | `grid` | **NEW v1.2.0** - Nested CSS Grid layouts for complex dashboards |
+
 ### Interactive Renderers
 
 | Component | Type | Description |
 |-----------|------|-------------|
-| `ActionRenderer` | `action` | Interactive buttons with callbacks |
+| `ActionRenderer` | `action` | Interactive buttons with MCP tool calls |
 | `ArtifactRenderer` | `artifact` | File download/preview |
 | `CarouselRenderer` | `carousel` | Image/content carousel |
-| `FooterRenderer` | `footer` | Metadata and attribution display |
+| `FooterRenderer` | `footer` | Metadata and attribution display (auto-injected)
 
 ## Exports
 
@@ -142,12 +148,55 @@ import {
 ### Hooks
 
 ```typescript
-import { useStreamingUI } from '@seed-ship/mcp-ui-solid/hooks'
+import { useStreamingUI, useAction, useToolAction } from '@seed-ship/mcp-ui-solid'
 
+// Streaming hook
 const { components, isComplete, error, metadata } = useStreamingUI({
   query: 'Show revenue data',
   spaceIds: ['space-1']
 })
+
+// Action hooks (NEW v1.2.0)
+const { execute, isExecuting, lastError } = useAction()
+await execute('search.hub', { query: 'revenue Q4' })
+
+// Bound to specific tool
+const { execute: searchExecute } = useToolAction('search.hub')
+await searchExecute({ query: 'test' })
+```
+
+### Context Provider (NEW v1.2.0)
+
+```typescript
+import { MCPActionProvider, useMCPAction } from '@seed-ship/mcp-ui-solid'
+
+// Wrap your app to enable typed action dispatch
+function App() {
+  return (
+    <MCPActionProvider
+      spaceIds={['space-123']}
+      macroId="dashboard_template"
+      onAction={(req, res) => auditLog(req, res)}
+      onWebhook={(event) => triggerN8n(event)}
+    >
+      <UIResourceRenderer content={layout} />
+    </MCPActionProvider>
+  )
+}
+
+// Inside any component
+function ActionButton() {
+  const { executeAction, isExecuting } = useMCPAction()
+
+  return (
+    <button
+      onClick={() => executeAction({ toolName: 'search.hub', params: { query: 'test' } })}
+      disabled={isExecuting()}
+    >
+      Search
+    </button>
+  )
+}
 ```
 
 ### Validation (SSR-Safe)
@@ -231,6 +280,48 @@ interface GridPosition {
 
 ## Advanced Usage
 
+### Nested Grid Layouts (NEW v1.2.0)
+
+Use `GridRenderer` for complex dashboard layouts:
+
+```typescript
+const dashboardLayout = {
+  id: 'dashboard',
+  type: 'grid',
+  params: {
+    columns: 12,
+    gap: '1rem',
+    areas: [
+      ['header', 'header', 'header'],
+      ['sidebar', 'main', 'main'],
+      ['footer', 'footer', 'footer']
+    ],
+    children: [
+      { id: 'nav', type: 'text', params: { content: 'Navigation' }, position: { colStart: 1, colSpan: 3 } },
+      { id: 'content', type: 'chart', params: { /* ... */ }, position: { colStart: 4, colSpan: 9 } }
+    ]
+  }
+}
+```
+
+### Auto-Footer (NEW v1.2.0)
+
+Footers are automatically injected when `layout.metadata` contains execution info:
+
+```typescript
+const layout = {
+  id: 'report',
+  components: [/* ... */],
+  metadata: {
+    executionTime: 1234,      // Shows "1234ms"
+    sourceCount: 5,           // Shows "5 sources"
+    llmModel: 'gpt-4',        // Shows model name
+    // hideFooter: true       // Opt-out of auto-footer
+  }
+}
+// Footer automatically added showing "Powered by Deposium | 1234ms | gpt-4 | 5 sources"
+```
+
 ### Custom Component Registry
 
 ```typescript

package/dist/components/FooterRenderer.cjs

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<span class=font-medium>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><!$><!/>ms`), _tmpl$3 = /* @__PURE__ */ web.template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 12h6m-6 4h6m2 5H7a2 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><!$><!/> sources`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="flex gap-3">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-4"><!$><!/><!$><!/><!$><!/><!$><!/><div class=flex-grow></div><!$><!/>`), _tmpl$7 = /* @__PURE__ */ web.template(`<a target=_blank rel="noopener noreferrer"class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">`);
+const FooterRenderer = (props) => {
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$6), _el$17 = _el$.firstChild, [_el$18, _co$4] = web.getNextMarker(_el$17.nextSibling), _el$19 = _el$18.nextSibling, [_el$20, _co$5] = web.getNextMarker(_el$19.nextSibling), _el$21 = _el$20.nextSibling, [_el$22, _co$6] = web.getNextMarker(_el$21.nextSibling), _el$23 = _el$22.nextSibling, [_el$24, _co$7] = web.getNextMarker(_el$23.nextSibling), _el$15 = _el$24.nextSibling, _el$25 = _el$15.nextSibling, [_el$26, _co$8] = web.getNextMarker(_el$25.nextSibling);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.params.poweredBy;
+      },
+      get children() {
+        var _el$2 = web.getNextElement(_tmpl$);
+        web.insert(_el$2, () => props.params.poweredBy);
+        return _el$2;
+      }
+    }), _el$18, _co$4);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.params.executionTime;
+      },
+      get children() {
+        var _el$3 = web.getNextElement(_tmpl$2), _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling, [_el$7, _co$] = web.getNextMarker(_el$6.nextSibling);
+        _el$7.nextSibling;
+        web.insert(_el$3, () => props.params.executionTime, _el$7, _co$);
+        return _el$3;
+      }
+    }), _el$20, _co$5);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.params.model;
+      },
+      get children() {
+        var _el$8 = web.getNextElement(_tmpl$3), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, [_el$1, _co$2] = web.getNextMarker(_el$0.nextSibling);
+        web.insert(_el$8, () => props.params.model, _el$1, _co$2);
+        return _el$8;
+      }
+    }), _el$22, _co$6);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.params.sourceCount;
+      },
+      get children() {
+        var _el$10 = web.getNextElement(_tmpl$4), _el$11 = _el$10.firstChild, _el$13 = _el$11.nextSibling, [_el$14, _co$3] = web.getNextMarker(_el$13.nextSibling);
+        _el$14.nextSibling;
+        web.insert(_el$10, () => props.params.sourceCount, _el$14, _co$3);
+        return _el$10;
+      }
+    }), _el$24, _co$7);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.params.links;
+      },
+      get children() {
+        var _el$16 = web.getNextElement(_tmpl$5);
+        web.insert(_el$16, web.createComponent(solidJs.For, {
+          get each() {
+            return props.params.links;
+          },
+          children: (link) => (() => {
+            var _el$27 = web.getNextElement(_tmpl$7);
+            web.insert(_el$27, () => link.label);
+            web.effect(() => web.setAttribute(_el$27, "href", link.url));
+            return _el$27;
+          })()
+        }));
+        return _el$16;
+      }
+    }), _el$26, _co$8);
+    return _el$;
+  })();
+};
+exports.FooterRenderer = FooterRenderer;
+//# sourceMappingURL=FooterRenderer.cjs.map

package/dist/components/FooterRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterRenderer.cjs","sources":["../../src/components/FooterRenderer.tsx"],"sourcesContent":["import { Component, Show, For } from 'solid-js'\n\nexport interface FooterComponentParams {\n    poweredBy?: string\n    executionTime?: number\n    model?: string\n    sourceCount?: number\n    customText?: string\n    links?: { label: string; url: string }[]\n}\n\nexport const FooterRenderer: Component<{ params: FooterComponentParams }> = (props) => {\n    return (\n        <div class=\"mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-4\">\n            <Show when={props.params.poweredBy}>\n                <span class=\"font-medium\">{props.params.poweredBy}</span>\n            </Show>\n\n            <Show when={props.params.executionTime}>\n                <span class=\"flex items-center gap-1\">\n                    <svg class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                    </svg>\n                    {props.params.executionTime}ms\n                </span>\n            </Show>\n\n            <Show when={props.params.model}>\n                <span class=\"flex items-center gap-1\">\n                    <svg class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\" />\n                    </svg>\n                    {props.params.model}\n                </span>\n            </Show>\n\n            <Show when={props.params.sourceCount}>\n                <span class=\"flex items-center gap-1\">\n                    <svg class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 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\" />\n                    </svg>\n                    {props.params.sourceCount} sources\n                </span>\n            </Show>\n\n            <div class=\"flex-grow\" />\n\n            <Show when={props.params.links}>\n                <div class=\"flex gap-3\">\n                    <For each={props.params.links}>\n                        {(link) => (\n                            <a\n                                href={link.url}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                class=\"hover:text-blue-600 dark:hover:text-blue-400 transition-colors\"\n                            >\n                                {link.label}\n                            </a>\n                        )}\n                    </For>\n                </div>\n            </Show>\n        </div>\n    )\n}\n"],"names":["FooterRenderer","props","_el$","_$getNextElement","_tmpl$6","_el$17","firstChild","_el$18","_co$4","_$getNextMarker","nextSibling","_el$19","_el$20","_co$5","_el$21","_el$22","_co$6","_el$23","_el$24","_co$7","_el$15","_el$25","_el$26","_co$8","_$insert","_$createComponent","Show","when","params","poweredBy","children","_el$2","_tmpl$","executionTime","_el$3","_tmpl$2","_el$4","_el$6","_el$7","_co$","model","_el$8","_tmpl$3","_el$9","_el$0","_el$1","_co$2","sourceCount","_el$10","_tmpl$4","_el$11","_el$13","_el$14","_co$3","links","_el$16","_tmpl$5","For","each","link","_el$27","_tmpl$7","label","_$effect","_$setAttribute","url"],"mappings":"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"}

package/dist/components/FooterRenderer.js

@@ -0,0 +1,75 @@
+import { getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute } from "solid-js/web";
+import { Show, For } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<span class=font-medium>`), _tmpl$2 = /* @__PURE__ */ template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><!$><!/>ms`), _tmpl$3 = /* @__PURE__ */ template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<span class="flex items-center gap-1"><svg class="w-3 h-3"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 12h6m-6 4h6m2 5H7a2 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><!$><!/> sources`), _tmpl$5 = /* @__PURE__ */ template(`<div class="flex gap-3">`), _tmpl$6 = /* @__PURE__ */ template(`<div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-4"><!$><!/><!$><!/><!$><!/><!$><!/><div class=flex-grow></div><!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">`);
+const FooterRenderer = (props) => {
+  return (() => {
+    var _el$ = getNextElement(_tmpl$6), _el$17 = _el$.firstChild, [_el$18, _co$4] = getNextMarker(_el$17.nextSibling), _el$19 = _el$18.nextSibling, [_el$20, _co$5] = getNextMarker(_el$19.nextSibling), _el$21 = _el$20.nextSibling, [_el$22, _co$6] = getNextMarker(_el$21.nextSibling), _el$23 = _el$22.nextSibling, [_el$24, _co$7] = getNextMarker(_el$23.nextSibling), _el$15 = _el$24.nextSibling, _el$25 = _el$15.nextSibling, [_el$26, _co$8] = getNextMarker(_el$25.nextSibling);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.params.poweredBy;
+      },
+      get children() {
+        var _el$2 = getNextElement(_tmpl$);
+        insert(_el$2, () => props.params.poweredBy);
+        return _el$2;
+      }
+    }), _el$18, _co$4);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.params.executionTime;
+      },
+      get children() {
+        var _el$3 = getNextElement(_tmpl$2), _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling, [_el$7, _co$] = getNextMarker(_el$6.nextSibling);
+        _el$7.nextSibling;
+        insert(_el$3, () => props.params.executionTime, _el$7, _co$);
+        return _el$3;
+      }
+    }), _el$20, _co$5);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.params.model;
+      },
+      get children() {
+        var _el$8 = getNextElement(_tmpl$3), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, [_el$1, _co$2] = getNextMarker(_el$0.nextSibling);
+        insert(_el$8, () => props.params.model, _el$1, _co$2);
+        return _el$8;
+      }
+    }), _el$22, _co$6);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.params.sourceCount;
+      },
+      get children() {
+        var _el$10 = getNextElement(_tmpl$4), _el$11 = _el$10.firstChild, _el$13 = _el$11.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling);
+        _el$14.nextSibling;
+        insert(_el$10, () => props.params.sourceCount, _el$14, _co$3);
+        return _el$10;
+      }
+    }), _el$24, _co$7);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.params.links;
+      },
+      get children() {
+        var _el$16 = getNextElement(_tmpl$5);
+        insert(_el$16, createComponent(For, {
+          get each() {
+            return props.params.links;
+          },
+          children: (link) => (() => {
+            var _el$27 = getNextElement(_tmpl$7);
+            insert(_el$27, () => link.label);
+            effect(() => setAttribute(_el$27, "href", link.url));
+            return _el$27;
+          })()
+        }));
+        return _el$16;
+      }
+    }), _el$26, _co$8);
+    return _el$;
+  })();
+};
+export {
+  FooterRenderer
+};
+//# sourceMappingURL=FooterRenderer.js.map

package/dist/components/FooterRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterRenderer.js","sources":["../../src/components/FooterRenderer.tsx"],"sourcesContent":["import { Component, Show, For } from 'solid-js'\n\nexport interface FooterComponentParams {\n    poweredBy?: string\n    executionTime?: number\n    model?: string\n    sourceCount?: number\n    customText?: string\n    links?: { label: string; url: string }[]\n}\n\nexport const FooterRenderer: Component<{ params: FooterComponentParams }> = (props) => {\n    return (\n        <div class=\"mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-4\">\n            <Show when={props.params.poweredBy}>\n                <span class=\"font-medium\">{props.params.poweredBy}</span>\n            </Show>\n\n            <Show when={props.params.executionTime}>\n                <span class=\"flex items-center gap-1\">\n                    <svg class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                    </svg>\n                    {props.params.executionTime}ms\n                </span>\n            </Show>\n\n            <Show when={props.params.model}>\n                <span class=\"flex items-center gap-1\">\n                    <svg class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\" />\n                    </svg>\n                    {props.params.model}\n                </span>\n            </Show>\n\n            <Show when={props.params.sourceCount}>\n                <span class=\"flex items-center gap-1\">\n                    <svg class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 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\" />\n                    </svg>\n                    {props.params.sourceCount} sources\n                </span>\n            </Show>\n\n            <div class=\"flex-grow\" />\n\n            <Show when={props.params.links}>\n                <div class=\"flex gap-3\">\n                    <For each={props.params.links}>\n                        {(link) => (\n                            <a\n                                href={link.url}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                class=\"hover:text-blue-600 dark:hover:text-blue-400 transition-colors\"\n                            >\n                                {link.label}\n                            </a>\n                        )}\n                    </For>\n                </div>\n            </Show>\n        </div>\n    )\n}\n"],"names":["FooterRenderer","props","_el$","_$getNextElement","_tmpl$6","_el$17","firstChild","_el$18","_co$4","_$getNextMarker","nextSibling","_el$19","_el$20","_co$5","_el$21","_el$22","_co$6","_el$23","_el$24","_co$7","_el$15","_el$25","_el$26","_co$8","_$insert","_$createComponent","Show","when","params","poweredBy","children","_el$2","_tmpl$","executionTime","_el$3","_tmpl$2","_el$4","_el$6","_el$7","_co$","model","_el$8","_tmpl$3","_el$9","_el$0","_el$1","_co$2","sourceCount","_el$10","_tmpl$4","_el$11","_el$13","_el$14","_co$3","links","_el$16","_tmpl$5","For","each","link","_el$27","_tmpl$7","label","_$effect","_$setAttribute","url"],"mappings":"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"}

package/dist/components/GridRenderer.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+const UIResourceRenderer = require("./UIResourceRenderer.cjs");
+var _tmpl$ = /* @__PURE__ */ web.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"data-component-type=grid><div class="p-4 h-full">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="min-w-0 h-full">`);
+function getGridItemStyle(position, areas) {
+  if (!position) {
+    return "grid-column: 1 / -1; grid-row: auto";
+  }
+  const {
+    colStart,
+    colSpan,
+    rowStart,
+    rowSpan = 1
+  } = position;
+  let style = `grid-column: ${colStart} / span ${colSpan}`;
+  if (rowStart) {
+    style += `; grid-row: ${rowStart} / span ${rowSpan}`;
+  } else {
+    style += "; grid-row: auto";
+  }
+  return style;
+}
+function buildGridTemplateAreas(areas) {
+  return areas.map((row) => `"${row.join(" ")}"`).join(" ");
+}
+const GridRenderer = (props) => {
+  const params = solidJs.createMemo(() => {
+    const p = props.component.params;
+    return {
+      columns: p.columns ?? 12,
+      gap: p.gap ?? "1rem",
+      minRowHeight: p.minRowHeight,
+      areas: p.areas,
+      children: p.children ?? []
+    };
+  });
+  const gridContainerStyle = solidJs.createMemo(() => {
+    const p = params();
+    let style = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`;
+    if (p.minRowHeight) {
+      style += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`;
+    }
+    if (p.areas && p.areas.length > 0) {
+      style += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`;
+    }
+    return style;
+  });
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild;
+    web.insert(_el$2, web.createComponent(solidJs.For, {
+      get each() {
+        return params().children;
+      },
+      children: (child) => (() => {
+        var _el$3 = web.getNextElement(_tmpl$2);
+        web.insert(_el$3, web.createComponent(UIResourceRenderer.UIResourceRenderer, {
+          content: child,
+          get onError() {
+            return props.onError;
+          }
+        }));
+        web.effect((_$p) => web.style(_el$3, getGridItemStyle(child.position, params().areas), _$p));
+        return _el$3;
+      })()
+    }));
+    web.effect((_p$) => {
+      var _v$ = props.component.id, _v$2 = gridContainerStyle();
+      _v$ !== _p$.e && web.setAttribute(_el$, "data-component-id", _p$.e = _v$);
+      _p$.t = web.style(_el$2, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+exports.GridRenderer = GridRenderer;
+exports.default = GridRenderer;
+//# sourceMappingURL=GridRenderer.cjs.map

package/dist/components/GridRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridRenderer.cjs","sources":["../../src/components/GridRenderer.tsx"],"sourcesContent":["/**\n * GridRenderer - CSS Grid layout component for nested layouts\n * Phase 5.0: Quick Wins - Enables template builder layouts\n */\n\nimport { Component, For, createMemo } from 'solid-js'\nimport type { UIComponent, GridPosition } from '../types'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Parameters for GridRenderer component\n */\nexport interface GridComponentParams {\n  /**\n   * Number of columns (default: 12)\n   */\n  columns?: number\n\n  /**\n   * Gap between grid items (default: '1rem')\n   */\n  gap?: string\n\n  /**\n   * Minimum row height (optional)\n   */\n  minRowHeight?: string\n\n  /**\n   * CSS Grid template areas for named regions\n   * Example: [['header', 'header'], ['sidebar', 'main'], ['footer', 'footer']]\n   */\n  areas?: string[][]\n\n  /**\n   * Child components to render within the grid\n   */\n  children: UIComponent[]\n}\n\nexport interface GridRendererProps {\n  /**\n   * Grid component with params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: any) => void\n}\n\n/**\n * Convert grid position to CSS style string\n */\nfunction getGridItemStyle(position: GridPosition | undefined, areas?: string[][]): string {\n  // Default to full width if no position specified\n  if (!position) {\n    return 'grid-column: 1 / -1; grid-row: auto'\n  }\n\n  const { colStart, colSpan, rowStart, rowSpan = 1 } = position\n\n  // If using named areas and component has area name, use grid-area\n  // Otherwise use explicit grid-column/grid-row\n  let style = `grid-column: ${colStart} / span ${colSpan}`\n\n  if (rowStart) {\n    style += `; grid-row: ${rowStart} / span ${rowSpan}`\n  } else {\n    style += '; grid-row: auto'\n  }\n\n  return style\n}\n\n/**\n * Build CSS grid-template-areas string from areas array\n */\nfunction buildGridTemplateAreas(areas: string[][]): string {\n  return areas.map((row) => `\"${row.join(' ')}\"`).join(' ')\n}\n\n/**\n * GridRenderer Component\n * Renders a CSS Grid container with nested UIComponents\n */\nexport const GridRenderer: Component<GridRendererProps> = (props) => {\n  // Extract params with defaults\n  const params = createMemo(() => {\n    const p = props.component.params as GridComponentParams\n    return {\n      columns: p.columns ?? 12,\n      gap: p.gap ?? '1rem',\n      minRowHeight: p.minRowHeight,\n      areas: p.areas,\n      children: p.children ?? [],\n    }\n  })\n\n  // Build grid container style\n  const gridContainerStyle = createMemo(() => {\n    const p = params()\n    let style = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`\n\n    if (p.minRowHeight) {\n      style += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`\n    }\n\n    if (p.areas && p.areas.length > 0) {\n      style += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`\n    }\n\n    return style\n  })\n\n  return (\n    <div\n      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\"\n      data-component-type=\"grid\"\n      data-component-id={props.component.id}\n    >\n      <div class=\"p-4 h-full\" style={gridContainerStyle()}>\n        <For each={params().children}>\n          {(child) => (\n            <div\n              style={getGridItemStyle(child.position, params().areas)}\n              class=\"min-w-0 h-full\"\n            >\n              {/* Use UIResourceRenderer for recursive rendering */}\n              <UIResourceRenderer content={child} onError={props.onError} />\n            </div>\n          )}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default GridRenderer\n"],"names":["getGridItemStyle","position","areas","colStart","colSpan","rowStart","rowSpan","style","buildGridTemplateAreas","map","row","join","GridRenderer","props","params","createMemo","p","component","columns","gap","minRowHeight","children","gridContainerStyle","length","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","child","_el$3","_tmpl$2","UIResourceRenderer","content","onError","_$effect","_$p","_$style","_p$","_v$","id","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;;;AAuDA,SAASA,iBAAiBC,UAAoCC,OAA4B;AAExF,MAAI,CAACD,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IAAEE;AAAAA,IAAUC;AAAAA,IAASC;AAAAA,IAAUC,UAAU;AAAA,EAAA,IAAML;AAIrD,MAAIM,QAAQ,gBAAgBJ,QAAQ,WAAWC,OAAO;AAEtD,MAAIC,UAAU;AACZE,aAAS,eAAeF,QAAQ,WAAWC,OAAO;AAAA,EACpD,OAAO;AACLC,aAAS;AAAA,EACX;AAEA,SAAOA;AACT;AAKA,SAASC,uBAAuBN,OAA2B;AACzD,SAAOA,MAAMO,IAAKC,CAAAA,QAAQ,IAAIA,IAAIC,KAAK,GAAG,CAAC,GAAG,EAAEA,KAAK,GAAG;AAC1D;AAMO,MAAMC,eAA8CC,CAAAA,UAAU;AAEnE,QAAMC,SAASC,QAAAA,WAAW,MAAM;AAC9B,UAAMC,IAAIH,MAAMI,UAAUH;AAC1B,WAAO;AAAA,MACLI,SAASF,EAAEE,WAAW;AAAA,MACtBC,KAAKH,EAAEG,OAAO;AAAA,MACdC,cAAcJ,EAAEI;AAAAA,MAChBlB,OAAOc,EAAEd;AAAAA,MACTmB,UAAUL,EAAEK,YAAY,CAAA;AAAA,IAAA;AAAA,EAE5B,CAAC;AAGD,QAAMC,qBAAqBP,QAAAA,WAAW,MAAM;AAC1C,UAAMC,IAAIF,OAAAA;AACV,QAAIP,QAAQ,gDAAgDS,EAAEE,OAAO,gBAAgBF,EAAEG,GAAG;AAE1F,QAAIH,EAAEI,cAAc;AAClBb,eAAS,4BAA4BS,EAAEI,YAAY;AAAA,IACrD;AAEA,QAAIJ,EAAEd,SAASc,EAAEd,MAAMqB,SAAS,GAAG;AACjChB,eAAS,0BAA0BC,uBAAuBQ,EAAEd,KAAK,CAAC;AAAA,IACpE;AAEA,WAAOK;AAAAA,EACT,CAAC;AAED,UAAA,MAAA;AAAA,QAAAiB,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI;AAAAC,eAAAF,OAAAG,IAAAA,gBAOOC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAASO;AAAAA,MAAQ;AAAA,MAAAA,UACxBY,YAAK,MAAA;AAAA,YAAAC,QAAAT,IAAAA,eAAAU,OAAA;AAAAN,mBAAAK,OAAAJ,IAAAA,gBAMFM,uCAAkB;AAAA,UAACC,SAASJ;AAAAA,UAAK,IAAEK,UAAO;AAAA,mBAAEzB,MAAMyB;AAAAA,UAAO;AAAA,QAAA,CAAA,CAAA;AAAAC,YAAAA,OAAAC,CAAAA,QAAAC,IAAAA,MAAAP,OAJnDlC,iBAAiBiC,MAAMhC,UAAUa,OAAAA,EAASZ,KAAK,GAACsC,GAAA,CAAA;AAAA,eAAAN;AAAAA,MAAA,GAAA;AAAA,IAAA,CAM1D,CAAA;AAAAK,QAAAA,OAAAG,CAAAA,QAAA;AAAA,UAAAC,MAZc9B,MAAMI,UAAU2B,IAAEC,OAENvB,mBAAAA;AAAoBqB,cAAAD,IAAAI,KAAAC,IAAAA,aAAAvB,MAAA,qBAAAkB,IAAAI,IAAAH,GAAA;AAAAD,UAAAM,IAAAP,IAAAA,MAAAd,OAAAkB,MAAAH,IAAAM,CAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAzB;AAAAA,EAAA,GAAA;AAezD;;;"}

package/dist/components/GridRenderer.d.ts

@@ -0,0 +1,49 @@
+/**
+ * GridRenderer - CSS Grid layout component for nested layouts
+ * Phase 5.0: Quick Wins - Enables template builder layouts
+ */
+import { Component } from 'solid-js';
+import type { UIComponent } from '../types';
+/**
+ * Parameters for GridRenderer component
+ */
+export interface GridComponentParams {
+    /**
+     * Number of columns (default: 12)
+     */
+    columns?: number;
+    /**
+     * Gap between grid items (default: '1rem')
+     */
+    gap?: string;
+    /**
+     * Minimum row height (optional)
+     */
+    minRowHeight?: string;
+    /**
+     * CSS Grid template areas for named regions
+     * Example: [['header', 'header'], ['sidebar', 'main'], ['footer', 'footer']]
+     */
+    areas?: string[][];
+    /**
+     * Child components to render within the grid
+     */
+    children: UIComponent[];
+}
+export interface GridRendererProps {
+    /**
+     * Grid component with params
+     */
+    component: UIComponent;
+    /**
+     * Error callback
+     */
+    onError?: (error: any) => void;
+}
+/**
+ * GridRenderer Component
+ * Renders a CSS Grid container with nested UIComponents
+ */
+export declare const GridRenderer: Component<GridRendererProps>;
+export default GridRenderer;
+//# sourceMappingURL=GridRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GridRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAmB,MAAM,UAAU,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAA;AAGzD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE,CAAA;IAElB;;OAEG;IACH,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,SAAS,EAAE,WAAW,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAiCD;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,iBAAiB,CAkDrD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/GridRenderer.js

@@ -0,0 +1,82 @@
+import { getNextElement, template, insert, createComponent, effect, style, setAttribute } from "solid-js/web";
+import { createMemo, For } from "solid-js";
+import { UIResourceRenderer } from "./UIResourceRenderer.js";
+var _tmpl$ = /* @__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"data-component-type=grid><div class="p-4 h-full">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="min-w-0 h-full">`);
+function getGridItemStyle(position, areas) {
+  if (!position) {
+    return "grid-column: 1 / -1; grid-row: auto";
+  }
+  const {
+    colStart,
+    colSpan,
+    rowStart,
+    rowSpan = 1
+  } = position;
+  let style2 = `grid-column: ${colStart} / span ${colSpan}`;
+  if (rowStart) {
+    style2 += `; grid-row: ${rowStart} / span ${rowSpan}`;
+  } else {
+    style2 += "; grid-row: auto";
+  }
+  return style2;
+}
+function buildGridTemplateAreas(areas) {
+  return areas.map((row) => `"${row.join(" ")}"`).join(" ");
+}
+const GridRenderer = (props) => {
+  const params = createMemo(() => {
+    const p = props.component.params;
+    return {
+      columns: p.columns ?? 12,
+      gap: p.gap ?? "1rem",
+      minRowHeight: p.minRowHeight,
+      areas: p.areas,
+      children: p.children ?? []
+    };
+  });
+  const gridContainerStyle = createMemo(() => {
+    const p = params();
+    let style2 = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`;
+    if (p.minRowHeight) {
+      style2 += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`;
+    }
+    if (p.areas && p.areas.length > 0) {
+      style2 += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`;
+    }
+    return style2;
+  });
+  return (() => {
+    var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild;
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return params().children;
+      },
+      children: (child) => (() => {
+        var _el$3 = getNextElement(_tmpl$2);
+        insert(_el$3, createComponent(UIResourceRenderer, {
+          content: child,
+          get onError() {
+            return props.onError;
+          }
+        }));
+        effect((_$p) => style(_el$3, getGridItemStyle(child.position, params().areas), _$p));
+        return _el$3;
+      })()
+    }));
+    effect((_p$) => {
+      var _v$ = props.component.id, _v$2 = gridContainerStyle();
+      _v$ !== _p$.e && setAttribute(_el$, "data-component-id", _p$.e = _v$);
+      _p$.t = style(_el$2, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+export {
+  GridRenderer,
+  GridRenderer as default
+};
+//# sourceMappingURL=GridRenderer.js.map

package/dist/components/GridRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridRenderer.js","sources":["../../src/components/GridRenderer.tsx"],"sourcesContent":["/**\n * GridRenderer - CSS Grid layout component for nested layouts\n * Phase 5.0: Quick Wins - Enables template builder layouts\n */\n\nimport { Component, For, createMemo } from 'solid-js'\nimport type { UIComponent, GridPosition } from '../types'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Parameters for GridRenderer component\n */\nexport interface GridComponentParams {\n  /**\n   * Number of columns (default: 12)\n   */\n  columns?: number\n\n  /**\n   * Gap between grid items (default: '1rem')\n   */\n  gap?: string\n\n  /**\n   * Minimum row height (optional)\n   */\n  minRowHeight?: string\n\n  /**\n   * CSS Grid template areas for named regions\n   * Example: [['header', 'header'], ['sidebar', 'main'], ['footer', 'footer']]\n   */\n  areas?: string[][]\n\n  /**\n   * Child components to render within the grid\n   */\n  children: UIComponent[]\n}\n\nexport interface GridRendererProps {\n  /**\n   * Grid component with params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: any) => void\n}\n\n/**\n * Convert grid position to CSS style string\n */\nfunction getGridItemStyle(position: GridPosition | undefined, areas?: string[][]): string {\n  // Default to full width if no position specified\n  if (!position) {\n    return 'grid-column: 1 / -1; grid-row: auto'\n  }\n\n  const { colStart, colSpan, rowStart, rowSpan = 1 } = position\n\n  // If using named areas and component has area name, use grid-area\n  // Otherwise use explicit grid-column/grid-row\n  let style = `grid-column: ${colStart} / span ${colSpan}`\n\n  if (rowStart) {\n    style += `; grid-row: ${rowStart} / span ${rowSpan}`\n  } else {\n    style += '; grid-row: auto'\n  }\n\n  return style\n}\n\n/**\n * Build CSS grid-template-areas string from areas array\n */\nfunction buildGridTemplateAreas(areas: string[][]): string {\n  return areas.map((row) => `\"${row.join(' ')}\"`).join(' ')\n}\n\n/**\n * GridRenderer Component\n * Renders a CSS Grid container with nested UIComponents\n */\nexport const GridRenderer: Component<GridRendererProps> = (props) => {\n  // Extract params with defaults\n  const params = createMemo(() => {\n    const p = props.component.params as GridComponentParams\n    return {\n      columns: p.columns ?? 12,\n      gap: p.gap ?? '1rem',\n      minRowHeight: p.minRowHeight,\n      areas: p.areas,\n      children: p.children ?? [],\n    }\n  })\n\n  // Build grid container style\n  const gridContainerStyle = createMemo(() => {\n    const p = params()\n    let style = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`\n\n    if (p.minRowHeight) {\n      style += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`\n    }\n\n    if (p.areas && p.areas.length > 0) {\n      style += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`\n    }\n\n    return style\n  })\n\n  return (\n    <div\n      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\"\n      data-component-type=\"grid\"\n      data-component-id={props.component.id}\n    >\n      <div class=\"p-4 h-full\" style={gridContainerStyle()}>\n        <For each={params().children}>\n          {(child) => (\n            <div\n              style={getGridItemStyle(child.position, params().areas)}\n              class=\"min-w-0 h-full\"\n            >\n              {/* Use UIResourceRenderer for recursive rendering */}\n              <UIResourceRenderer content={child} onError={props.onError} />\n            </div>\n          )}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default GridRenderer\n"],"names":["getGridItemStyle","position","areas","colStart","colSpan","rowStart","rowSpan","style","buildGridTemplateAreas","map","row","join","GridRenderer","props","params","createMemo","p","component","columns","gap","minRowHeight","children","gridContainerStyle","length","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","child","_el$3","_tmpl$2","UIResourceRenderer","content","onError","_$effect","_$p","_$style","_p$","_v$","id","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;AAuDA,SAASA,iBAAiBC,UAAoCC,OAA4B;AAExF,MAAI,CAACD,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IAAEE;AAAAA,IAAUC;AAAAA,IAASC;AAAAA,IAAUC,UAAU;AAAA,EAAA,IAAML;AAIrD,MAAIM,SAAQ,gBAAgBJ,QAAQ,WAAWC,OAAO;AAEtD,MAAIC,UAAU;AACZE,IAAAA,UAAS,eAAeF,QAAQ,WAAWC,OAAO;AAAA,EACpD,OAAO;AACLC,IAAAA,UAAS;AAAA,EACX;AAEA,SAAOA;AACT;AAKA,SAASC,uBAAuBN,OAA2B;AACzD,SAAOA,MAAMO,IAAKC,CAAAA,QAAQ,IAAIA,IAAIC,KAAK,GAAG,CAAC,GAAG,EAAEA,KAAK,GAAG;AAC1D;AAMO,MAAMC,eAA8CC,CAAAA,UAAU;AAEnE,QAAMC,SAASC,WAAW,MAAM;AAC9B,UAAMC,IAAIH,MAAMI,UAAUH;AAC1B,WAAO;AAAA,MACLI,SAASF,EAAEE,WAAW;AAAA,MACtBC,KAAKH,EAAEG,OAAO;AAAA,MACdC,cAAcJ,EAAEI;AAAAA,MAChBlB,OAAOc,EAAEd;AAAAA,MACTmB,UAAUL,EAAEK,YAAY,CAAA;AAAA,IAAA;AAAA,EAE5B,CAAC;AAGD,QAAMC,qBAAqBP,WAAW,MAAM;AAC1C,UAAMC,IAAIF,OAAAA;AACV,QAAIP,SAAQ,gDAAgDS,EAAEE,OAAO,gBAAgBF,EAAEG,GAAG;AAE1F,QAAIH,EAAEI,cAAc;AAClBb,MAAAA,UAAS,4BAA4BS,EAAEI,YAAY;AAAA,IACrD;AAEA,QAAIJ,EAAEd,SAASc,EAAEd,MAAMqB,SAAS,GAAG;AACjChB,MAAAA,UAAS,0BAA0BC,uBAAuBQ,EAAEd,KAAK,CAAC;AAAA,IACpE;AAEA,WAAOK;AAAAA,EACT,CAAC;AAED,UAAA,MAAA;AAAA,QAAAiB,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI;AAAAC,WAAAF,OAAAG,gBAOOC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAASO;AAAAA,MAAQ;AAAA,MAAAA,UACxBY,YAAK,MAAA;AAAA,YAAAC,QAAAT,eAAAU,OAAA;AAAAN,eAAAK,OAAAJ,gBAMFM,oBAAkB;AAAA,UAACC,SAASJ;AAAAA,UAAK,IAAEK,UAAO;AAAA,mBAAEzB,MAAMyB;AAAAA,UAAO;AAAA,QAAA,CAAA,CAAA;AAAAC,eAAAC,CAAAA,QAAAC,MAAAP,OAJnDlC,iBAAiBiC,MAAMhC,UAAUa,OAAAA,EAASZ,KAAK,GAACsC,GAAA,CAAA;AAAA,eAAAN;AAAAA,MAAA,GAAA;AAAA,IAAA,CAM1D,CAAA;AAAAK,WAAAG,CAAAA,QAAA;AAAA,UAAAC,MAZc9B,MAAMI,UAAU2B,IAAEC,OAENvB,mBAAAA;AAAoBqB,cAAAD,IAAAI,KAAAC,aAAAvB,MAAA,qBAAAkB,IAAAI,IAAAH,GAAA;AAAAD,UAAAM,IAAAP,MAAAd,OAAAkB,MAAAH,IAAAM,CAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAzB;AAAAA,EAAA,GAAA;AAezD;"}