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

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.0.43",
+  "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

package/src/components/UIResourceRenderer.tsx

@@ -9,6 +9,9 @@ import { isServer } from 'solid-js/web'
 import type { UIComponent, UILayout, RendererError, ComponentType } from '../types'
 import { validateComponent, DEFAULT_RESOURCE_LIMITS } from '../services/validation'
 import { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'
+import { GridRenderer } from './GridRenderer'
+import { FooterRenderer } from './FooterRenderer'
+import { useAction } from '../hooks/useAction'
 import { marked } from 'marked'
 
 /**
@@ -554,43 +557,32 @@ function ComponentRenderer(props: {
       <Show when={props.component.type === 'action'}>
         <ActionRenderer component={props.component} />
       </Show>
+      <Show when={props.component.type === 'grid'}>
+        <GridRenderer component={props.component} onError={props.onError} />
+      </Show>
     </GenerativeUIErrorBoundary>
   )
 }
 
 /**
  * Render an action component (button or link)
+ * Refactored in Phase 5.0 to use useAction hook for Context-based execution
  */
 function ActionRenderer(props: { component: UIComponent }) {
   const params = props.component.params as any
-  let dispatchAction: ((toolName: string, toolParams: any) => void) | null = null
-
-  // Initialize CustomEvent dispatcher only on client-side
-  // Use createEffect instead of onMount for SSR compatibility
-  createEffect(() => {
-    if (typeof window !== 'undefined') {
-      dispatchAction = (toolName: string, toolParams: any) => {
-        const event = new CustomEvent('mcp-action', {
-          detail: {
-            toolName,
-            params: toolParams,
-          },
-          bubbles: true,
-        })
-        window.dispatchEvent(event)
-      }
-    }
-  })
+  const { execute, isExecuting } = useAction()
 
-  // Handle click to execute tool via window event
-  const handleClick = (e: MouseEvent) => {
+  // Handle click to execute tool via Context (falls back to CustomEvent if no provider)
+  const handleClick = async (e: MouseEvent) => {
     if (params.action === 'tool-call' && params.toolName) {
       e.preventDefault()
-      // SSR-safe: Only call if dispatcher was initialized client-side
-      dispatchAction?.(params.toolName, params.params || {})
+      await execute(params.toolName, params.params || {})
     }
   }
 
+  // Determine if button should be disabled (explicit disable or currently executing)
+  const isDisabled = () => params.disabled || (params.action === 'tool-call' && isExecuting())
+
   if (params.type === 'link' || params.action === 'link') {
     return (
       <a
@@ -614,18 +606,21 @@ function ActionRenderer(props: { component: UIComponent }) {
   return (
     <button
       type={params.action === 'submit' ? 'submit' : 'button'}
-      disabled={params.disabled}
+      disabled={isDisabled()}
       class={`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'}
-        ${params.disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        ${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' : ''}`}
       onClick={handleClick}
     >
-      <Show when={params.icon}>
+      <Show when={isExecuting() && params.action === 'tool-call'}>
+        <span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
+      </Show>
+      <Show when={params.icon && !(isExecuting() && params.action === 'tool-call')}>
         <span>{params.icon}</span>
       </Show>
       {params.label}
@@ -668,6 +663,46 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
     return `grid-column: ${colStart} / span ${colSpan}; grid-row: ${rowStart ? `${rowStart} / span ${rowSpan}` : 'auto'}`
   }
 
+  // Auto-footer logic (Phase 5.0)
+  // Automatically inject footer when metadata is present and no explicit footer exists
+  const shouldShowAutoFooter = createMemo(() => {
+    const layoutData = layout()
+
+    // Don't show if explicitly hidden
+    if (layoutData.metadata?.hideFooter) {
+      return false
+    }
+
+    // Don't show if no metadata (nothing to display)
+    if (!layoutData.metadata) {
+      return false
+    }
+
+    // Don't show if explicit footer component exists
+    const hasExplicitFooter = layoutData.components.some((c) => c.type === 'footer')
+    if (hasExplicitFooter) {
+      return false
+    }
+
+    // Show auto-footer if metadata has relevant info
+    return !!(
+      layoutData.metadata.executionTime ||
+      layoutData.metadata.sourceCount ||
+      layoutData.metadata.llmModel
+    )
+  })
+
+  // Build auto-footer params from metadata
+  const autoFooterParams = createMemo(() => {
+    const layoutData = layout()
+    return {
+      poweredBy: 'Deposium',
+      executionTime: layoutData.metadata?.executionTime,
+      model: layoutData.metadata?.llmModel,
+      sourceCount: layoutData.metadata?.sourceCount,
+    }
+  })
+
   const layoutData = layout()
 
   return (
@@ -681,6 +716,11 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
           )}
         </For>
       </div>
+
+      {/* Auto-injected footer (Phase 5.0) */}
+      <Show when={shouldShowAutoFooter()}>
+        <FooterRenderer params={autoFooterParams()} />
+      </Show>
     </div>
   )
 }