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

package/dist/hooks/useAction.d.ts

@@ -0,0 +1,79 @@
+/**
+ * useAction - Hook for executing MCP actions from components
+ * Phase 5.0: Quick Wins - Simplified API for ActionRenderer and custom components
+ */
+import { Accessor } from 'solid-js';
+import { ActionRequest, ActionResult } from '../context/MCPActionContext';
+/**
+ * Return type for useAction hook
+ */
+export interface UseActionReturn {
+    /**
+     * Execute a tool action
+     */
+    execute: (toolName: string, params?: Record<string, any>) => Promise<ActionResult>;
+    /**
+     * Full execute with ActionRequest
+     */
+    executeAction: (request: ActionRequest) => Promise<ActionResult>;
+    /**
+     * Whether an action is currently executing
+     */
+    isExecuting: Accessor<boolean>;
+    /**
+     * Last result from action execution
+     */
+    lastResult: Accessor<ActionResult | undefined>;
+    /**
+     * Last error (if any)
+     */
+    lastError: Accessor<string | undefined>;
+}
+/**
+ * Hook for executing MCP actions
+ *
+ * @example
+ * ```tsx
+ * function MyButton() {
+ *   const { execute, isExecuting, lastError } = useAction()
+ *
+ *   const handleClick = async () => {
+ *     const result = await execute('search.hub', { query: 'test' })
+ *     if (result.success) {
+ *       console.log('Data:', result.data)
+ *     }
+ *   }
+ *
+ *   return (
+ *     <button onClick={handleClick} disabled={isExecuting()}>
+ *       {isExecuting() ? 'Loading...' : 'Search'}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export declare function useAction(): UseActionReturn;
+/**
+ * Hook for binding action to a specific tool
+ *
+ * @example
+ * ```tsx
+ * function SearchButton() {
+ *   const { execute, isExecuting } = useToolAction('search.hub')
+ *
+ *   return (
+ *     <button onClick={() => execute({ query: 'test' })} disabled={isExecuting()}>
+ *       Search
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export declare function useToolAction(toolName: string): {
+    execute: (params?: Record<string, any>) => Promise<ActionResult>;
+    isExecuting: Accessor<boolean>;
+    lastResult: Accessor<ActionResult | undefined>;
+    lastError: Accessor<string | undefined>;
+};
+export type { ActionRequest, ActionResult };
+//# sourceMappingURL=useAction.d.ts.map

package/dist/hooks/useAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAction.d.ts","sourceRoot":"","sources":["../../src/hooks/useAction.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAgB,QAAQ,EAAE,MAAM,UAAU,CAAA;AACjD,OAAO,EAAoB,aAAa,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAE3F;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,YAAY,CAAC,CAAA;IAElF;;OAEG;IACH,aAAa,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,YAAY,CAAC,CAAA;IAEhE;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAE9B;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC,YAAY,GAAG,SAAS,CAAC,CAAA;IAE9C;;OAEG;IACH,SAAS,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,IAAI,eAAe,CAsC3C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG;IAC/C,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,YAAY,CAAC,CAAA;IAChE,WAAW,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC9B,UAAU,EAAE,QAAQ,CAAC,YAAY,GAAG,SAAS,CAAC,CAAA;IAC9C,SAAS,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CACxC,CAaA;AAED,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

package/dist/hooks/useAction.js

@@ -0,0 +1,49 @@
+import { createSignal } from "solid-js";
+import { useMCPActionSafe } from "../context/MCPActionContext.js";
+function useAction() {
+  const context = useMCPActionSafe();
+  const [lastError, setLastError] = createSignal();
+  const execute = async (toolName, params) => {
+    setLastError(void 0);
+    const result = await context.executeAction({
+      toolName,
+      params
+    });
+    if (!result.success && result.error) {
+      setLastError(result.error);
+    }
+    return result;
+  };
+  const executeAction = async (request) => {
+    setLastError(void 0);
+    const result = await context.executeAction(request);
+    if (!result.success && result.error) {
+      setLastError(result.error);
+    }
+    return result;
+  };
+  return {
+    execute,
+    executeAction,
+    isExecuting: context.isExecuting,
+    lastResult: context.lastResult,
+    lastError
+  };
+}
+function useToolAction(toolName) {
+  const { execute: baseExecute, isExecuting, lastResult, lastError } = useAction();
+  const execute = async (params) => {
+    return baseExecute(toolName, params);
+  };
+  return {
+    execute,
+    isExecuting,
+    lastResult,
+    lastError
+  };
+}
+export {
+  useAction,
+  useToolAction
+};
+//# sourceMappingURL=useAction.js.map

package/dist/hooks/useAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAction.js","sources":["../../src/hooks/useAction.ts"],"sourcesContent":["/**\n * useAction - Hook for executing MCP actions from components\n * Phase 5.0: Quick Wins - Simplified API for ActionRenderer and custom components\n */\n\nimport { createSignal, Accessor } from 'solid-js'\nimport { useMCPActionSafe, ActionRequest, ActionResult } from '../context/MCPActionContext'\n\n/**\n * Return type for useAction hook\n */\nexport interface UseActionReturn {\n  /**\n   * Execute a tool action\n   */\n  execute: (toolName: string, params?: Record<string, any>) => Promise<ActionResult>\n\n  /**\n   * Full execute with ActionRequest\n   */\n  executeAction: (request: ActionRequest) => Promise<ActionResult>\n\n  /**\n   * Whether an action is currently executing\n   */\n  isExecuting: Accessor<boolean>\n\n  /**\n   * Last result from action execution\n   */\n  lastResult: Accessor<ActionResult | undefined>\n\n  /**\n   * Last error (if any)\n   */\n  lastError: Accessor<string | undefined>\n}\n\n/**\n * Hook for executing MCP actions\n *\n * @example\n * ```tsx\n * function MyButton() {\n *   const { execute, isExecuting, lastError } = useAction()\n *\n *   const handleClick = async () => {\n *     const result = await execute('search.hub', { query: 'test' })\n *     if (result.success) {\n *       console.log('Data:', result.data)\n *     }\n *   }\n *\n *   return (\n *     <button onClick={handleClick} disabled={isExecuting()}>\n *       {isExecuting() ? 'Loading...' : 'Search'}\n *     </button>\n *   )\n * }\n * ```\n */\nexport function useAction(): UseActionReturn {\n  const context = useMCPActionSafe()\n  const [lastError, setLastError] = createSignal<string>()\n\n  const execute = async (toolName: string, params?: Record<string, any>): Promise<ActionResult> => {\n    setLastError(undefined)\n\n    const result = await context.executeAction({\n      toolName,\n      params,\n    })\n\n    if (!result.success && result.error) {\n      setLastError(result.error)\n    }\n\n    return result\n  }\n\n  const executeAction = async (request: ActionRequest): Promise<ActionResult> => {\n    setLastError(undefined)\n\n    const result = await context.executeAction(request)\n\n    if (!result.success && result.error) {\n      setLastError(result.error)\n    }\n\n    return result\n  }\n\n  return {\n    execute,\n    executeAction,\n    isExecuting: context.isExecuting,\n    lastResult: context.lastResult,\n    lastError,\n  }\n}\n\n/**\n * Hook for binding action to a specific tool\n *\n * @example\n * ```tsx\n * function SearchButton() {\n *   const { execute, isExecuting } = useToolAction('search.hub')\n *\n *   return (\n *     <button onClick={() => execute({ query: 'test' })} disabled={isExecuting()}>\n *       Search\n *     </button>\n *   )\n * }\n * ```\n */\nexport function useToolAction(toolName: string): {\n  execute: (params?: Record<string, any>) => Promise<ActionResult>\n  isExecuting: Accessor<boolean>\n  lastResult: Accessor<ActionResult | undefined>\n  lastError: Accessor<string | undefined>\n} {\n  const { execute: baseExecute, isExecuting, lastResult, lastError } = useAction()\n\n  const execute = async (params?: Record<string, any>): Promise<ActionResult> => {\n    return baseExecute(toolName, params)\n  }\n\n  return {\n    execute,\n    isExecuting,\n    lastResult,\n    lastError,\n  }\n}\n\nexport type { ActionRequest, ActionResult }\n"],"names":[],"mappings":";;AA6DO,SAAS,YAA6B;AAC3C,QAAM,UAAU,iBAAA;AAChB,QAAM,CAAC,WAAW,YAAY,IAAI,aAAA;AAElC,QAAM,UAAU,OAAO,UAAkB,WAAwD;AAC/F,iBAAa,MAAS;AAEtB,UAAM,SAAS,MAAM,QAAQ,cAAc;AAAA,MACzC;AAAA,MACA;AAAA,IAAA,CACD;AAED,QAAI,CAAC,OAAO,WAAW,OAAO,OAAO;AACnC,mBAAa,OAAO,KAAK;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,OAAO,YAAkD;AAC7E,iBAAa,MAAS;AAEtB,UAAM,SAAS,MAAM,QAAQ,cAAc,OAAO;AAElD,QAAI,CAAC,OAAO,WAAW,OAAO,OAAO;AACnC,mBAAa,OAAO,KAAK;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,aAAa,QAAQ;AAAA,IACrB,YAAY,QAAQ;AAAA,IACpB;AAAA,EAAA;AAEJ;AAkBO,SAAS,cAAc,UAK5B;AACA,QAAM,EAAE,SAAS,aAAa,aAAa,YAAY,UAAA,IAAc,UAAA;AAErE,QAAM,UAAU,OAAO,WAAwD;AAC7E,WAAO,YAAY,UAAU,MAAM;AAAA,EACrC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/hooks.cjs

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const useStreamingUI = require("./hooks/useStreamingUI.cjs");
+const useAction = require("./hooks/useAction.cjs");
 exports.useStreamingUI = useStreamingUI.useStreamingUI;
+exports.useAction = useAction.useAction;
+exports.useToolAction = useAction.useToolAction;
 //# sourceMappingURL=hooks.cjs.map

package/dist/hooks.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"hooks.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/hooks.d.ts

@@ -5,4 +5,6 @@
  */
 export { useStreamingUI } from './useStreamingUI';
 export type { UseStreamingUIOptions, StreamingUIState, StreamProgress, StreamError, CompleteMetadata, } from './useStreamingUI';
+export { useAction, useToolAction } from './useAction';
+export type { UseActionReturn, ActionRequest, ActionResult } from './useAction';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks.js

@@ -1,5 +1,8 @@
 import { useStreamingUI } from "./hooks/useStreamingUI.js";
+import { useAction, useToolAction } from "./hooks/useAction.js";
 export {
-  useStreamingUI
+  useAction,
+  useStreamingUI,
+  useToolAction
 };
 //# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"hooks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/index.cjs

@@ -4,12 +4,20 @@ const UIResourceRenderer = require("./components/UIResourceRenderer.cjs");
 const StreamingUIRenderer = require("./components/StreamingUIRenderer.cjs");
 const GenerativeUIErrorBoundary = require("./components/GenerativeUIErrorBoundary.cjs");
 const useStreamingUI = require("./hooks/useStreamingUI.cjs");
+const useAction = require("./hooks/useAction.cjs");
+const MCPActionContext = require("./context/MCPActionContext.cjs");
 const validation = require("./services/validation.cjs");
 const componentRegistry = require("./services/component-registry.cjs");
 exports.UIResourceRenderer = UIResourceRenderer.UIResourceRenderer;
 exports.StreamingUIRenderer = StreamingUIRenderer.StreamingUIRenderer;
 exports.GenerativeUIErrorBoundary = GenerativeUIErrorBoundary.GenerativeUIErrorBoundary;
 exports.useStreamingUI = useStreamingUI.useStreamingUI;
+exports.useAction = useAction.useAction;
+exports.useToolAction = useAction.useToolAction;
+exports.MCPActionContext = MCPActionContext.MCPActionContext;
+exports.MCPActionProvider = MCPActionContext.MCPActionProvider;
+exports.useMCPAction = MCPActionContext.useMCPAction;
+exports.useMCPActionSafe = MCPActionContext.useMCPActionSafe;
 exports.DEFAULT_RESOURCE_LIMITS = validation.DEFAULT_RESOURCE_LIMITS;
 exports.validateComponent = validation.validateComponent;
 exports.validateLayout = validation.validateLayout;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -29,8 +29,10 @@
  */
 export { UIResourceRenderer, StreamingUIRenderer, GenerativeUIErrorBoundary } from './components';
 export type { UIResourceRendererProps, StreamingUIRendererProps, GenerativeUIErrorBoundaryProps, } from './components';
-export { useStreamingUI } from './hooks';
-export type { UseStreamingUIOptions, StreamingUIState, StreamProgress, StreamError, CompleteMetadata, } from './hooks';
-export type { UIComponent, UILayout, GridPosition, ComponentType, RendererError, ChartComponentParams, TableComponentParams, MetricComponentParams, TextComponentParams, } from './types';
+export { useStreamingUI, useAction, useToolAction } from './hooks';
+export type { UseStreamingUIOptions, StreamingUIState, StreamProgress, StreamError, CompleteMetadata, UseActionReturn, } from './hooks';
+export { MCPActionProvider, MCPActionContext, useMCPAction, useMCPActionSafe } from './context';
+export type { MCPActionContextValue, MCPActionProviderProps, ActionRequest, ActionResult, } from './context';
+export type { UIComponent, UILayout, GridPosition, ComponentType, RendererError, ChartComponentParams, TableComponentParams, MetricComponentParams, TextComponentParams, ActionComponentParams, GridComponentParams, } from './types';
 export { validateComponent, validateLayout, DEFAULT_RESOURCE_LIMITS, ComponentRegistry, } from './services';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AAEjG,YAAY,EACV,uBAAuB,EACvB,wBAAwB,EACxB,8BAA8B,GAC/B,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAExC,YAAY,EACV,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,gBAAgB,GACjB,MAAM,SAAS,CAAA;AAGhB,YAAY,EACV,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,SAAS,CAAA;AAGhB,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AAEjG,YAAY,EACV,uBAAuB,EACvB,wBAAwB,EACxB,8BAA8B,GAC/B,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAElE,YAAY,EACV,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,MAAM,SAAS,CAAA;AAGhB,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAE/F,YAAY,EACV,qBAAqB,EACrB,sBAAsB,EACtB,aAAa,EACb,YAAY,GACb,MAAM,WAAW,CAAA;AAGlB,YAAY,EACV,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,SAAS,CAAA;AAGhB,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -2,15 +2,23 @@ import { UIResourceRenderer } from "./components/UIResourceRenderer.js";
 import { StreamingUIRenderer } from "./components/StreamingUIRenderer.js";
 import { GenerativeUIErrorBoundary } from "./components/GenerativeUIErrorBoundary.js";
 import { useStreamingUI } from "./hooks/useStreamingUI.js";
+import { useAction, useToolAction } from "./hooks/useAction.js";
+import { MCPActionContext, MCPActionProvider, useMCPAction, useMCPActionSafe } from "./context/MCPActionContext.js";
 import { DEFAULT_RESOURCE_LIMITS, validateComponent, validateLayout } from "./services/validation.js";
 import { ComponentRegistry } from "./services/component-registry.js";
 export {
   ComponentRegistry,
   DEFAULT_RESOURCE_LIMITS,
   GenerativeUIErrorBoundary,
+  MCPActionContext,
+  MCPActionProvider,
   StreamingUIRenderer,
   UIResourceRenderer,
+  useAction,
+  useMCPAction,
+  useMCPActionSafe,
   useStreamingUI,
+  useToolAction,
   validateComponent,
   validateLayout
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/types/index.d.ts

@@ -7,7 +7,7 @@
 /**
  * Component types supported by the renderer
  */
-export type ComponentType = 'chart' | 'table' | 'metric' | 'text' | 'grid' | 'iframe' | 'image' | 'link' | 'action';
+export type ComponentType = 'chart' | 'table' | 'metric' | 'text' | 'grid' | 'iframe' | 'image' | 'link' | 'action' | 'footer' | 'carousel' | 'artifact';
 /**
  * Chart types (powered by Quickchart)
  */
@@ -133,6 +133,33 @@ export interface ActionComponentParams {
     icon?: string;
     disabled?: boolean;
 }
+/**
+ * Grid component parameters (Phase 5.0)
+ * Enables nested CSS Grid layouts for template builder
+ */
+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[];
+}
 /**
  * UI Component definition (generated by LLM)
  */
@@ -152,7 +179,7 @@ export interface UIComponent {
     /**
      * Component parameters (type-specific)
      */
-    params: ChartComponentParams | TableComponentParams | MetricComponentParams | TextComponentParams | ActionComponentParams;
+    params: ChartComponentParams | TableComponentParams | MetricComponentParams | TextComponentParams | ActionComponentParams | GridComponentParams;
     /**
      * Metadata for observability
      */
@@ -191,6 +218,18 @@ export interface UILayout {
         generatedAt: string;
         llmModel?: string;
         totalComponents: number;
+        /**
+         * Execution time in milliseconds (Phase 5.0)
+         */
+        executionTime?: number;
+        /**
+         * Number of sources used (Phase 5.0)
+         */
+        sourceCount?: number;
+        /**
+         * Hide auto-injected footer (Phase 5.0)
+         */
+        hideFooter?: boolean;
     };
 }
 /**

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -7,7 +7,7 @@
 /**
  * Component types supported by the renderer
  */
-export type ComponentType = 'chart' | 'table' | 'metric' | 'text' | 'grid' | 'iframe' | 'image' | 'link' | 'action';
+export type ComponentType = 'chart' | 'table' | 'metric' | 'text' | 'grid' | 'iframe' | 'image' | 'link' | 'action' | 'footer' | 'carousel' | 'artifact';
 /**
  * Chart types (powered by Quickchart)
  */
@@ -133,6 +133,33 @@ export interface ActionComponentParams {
     icon?: string;
     disabled?: boolean;
 }
+/**
+ * Grid component parameters (Phase 5.0)
+ * Enables nested CSS Grid layouts for template builder
+ */
+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[];
+}
 /**
  * UI Component definition (generated by LLM)
  */
@@ -152,7 +179,7 @@ export interface UIComponent {
     /**
      * Component parameters (type-specific)
      */
-    params: ChartComponentParams | TableComponentParams | MetricComponentParams | TextComponentParams | ActionComponentParams;
+    params: ChartComponentParams | TableComponentParams | MetricComponentParams | TextComponentParams | ActionComponentParams | GridComponentParams;
     /**
      * Metadata for observability
      */
@@ -191,6 +218,18 @@ export interface UILayout {
         generatedAt: string;
         llmModel?: string;
         totalComponents: number;
+        /**
+         * Execution time in milliseconds (Phase 5.0)
+         */
+        executionTime?: number;
+        /**
+         * Number of sources used (Phase 5.0)
+         */
+        sourceCount?: number;
+        /**
+         * Hide auto-injected footer (Phase 5.0)
+         */
+        hideFooter?: boolean;
     };
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/GridRenderer.tsx

@@ -0,0 +1,140 @@
+/**
+ * GridRenderer - CSS Grid layout component for nested layouts
+ * Phase 5.0: Quick Wins - Enables template builder layouts
+ */
+
+import { Component, For, createMemo } from 'solid-js'
+import type { UIComponent, GridPosition } from '../types'
+import { UIResourceRenderer } from './UIResourceRenderer'
+
+/**
+ * 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
+}
+
+/**
+ * Convert grid position to CSS style string
+ */
+function getGridItemStyle(position: GridPosition | undefined, areas?: string[][]): string {
+  // Default to full width if no position specified
+  if (!position) {
+    return 'grid-column: 1 / -1; grid-row: auto'
+  }
+
+  const { colStart, colSpan, rowStart, rowSpan = 1 } = position
+
+  // If using named areas and component has area name, use grid-area
+  // Otherwise use explicit grid-column/grid-row
+  let style = `grid-column: ${colStart} / span ${colSpan}`
+
+  if (rowStart) {
+    style += `; grid-row: ${rowStart} / span ${rowSpan}`
+  } else {
+    style += '; grid-row: auto'
+  }
+
+  return style
+}
+
+/**
+ * Build CSS grid-template-areas string from areas array
+ */
+function buildGridTemplateAreas(areas: string[][]): string {
+  return areas.map((row) => `"${row.join(' ')}"`).join(' ')
+}
+
+/**
+ * GridRenderer Component
+ * Renders a CSS Grid container with nested UIComponents
+ */
+export const GridRenderer: Component<GridRendererProps> = (props) => {
+  // Extract params with defaults
+  const params = createMemo(() => {
+    const p = props.component.params as GridComponentParams
+    return {
+      columns: p.columns ?? 12,
+      gap: p.gap ?? '1rem',
+      minRowHeight: p.minRowHeight,
+      areas: p.areas,
+      children: p.children ?? [],
+    }
+  })
+
+  // Build grid container style
+  const gridContainerStyle = 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 (
+    <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"
+      data-component-id={props.component.id}
+    >
+      <div class="p-4 h-full" style={gridContainerStyle()}>
+        <For each={params().children}>
+          {(child) => (
+            <div
+              style={getGridItemStyle(child.position, params().areas)}
+              class="min-w-0 h-full"
+            >
+              {/* Use UIResourceRenderer for recursive rendering */}
+              <UIResourceRenderer content={child} onError={props.onError} />
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}
+
+export default GridRenderer