@seed-ship/mcp-ui-solid 1.0.28 → 1.0.31

package/dist/types.d.ts

@@ -0,0 +1,265 @@
+/**
+ * Generative MCP UI - Type Definitions
+ * Phase 0-3 Implementation
+ *
+ * Defines the contract for LLM-generated UI components
+ */
+/**
+ * Component types supported by the renderer
+ */
+export type ComponentType = 'chart' | 'table' | 'metric' | 'text' | 'grid' | 'iframe' | 'image' | 'link' | 'action';
+/**
+ * Chart types (powered by Quickchart)
+ */
+export type ChartType = 'bar' | 'line' | 'pie' | 'doughnut' | 'radar' | 'scatter';
+/**
+ * Grid layout specification (12-column system)
+ */
+export interface GridPosition {
+    /**
+     * Column start (1-12)
+     */
+    colStart: number;
+    /**
+     * Column span (1-12)
+     */
+    colSpan: number;
+    /**
+     * Row start (1-based, auto-increment if not specified)
+     */
+    rowStart?: number;
+    /**
+     * Row span (default: 1)
+     */
+    rowSpan?: number;
+}
+/**
+ * Component resource limits (SECURITY)
+ */
+export interface ResourceLimits {
+    /**
+     * Max data points per chart (default: 1000)
+     */
+    maxDataPoints: number;
+    /**
+     * Max table rows (default: 100, pagination required)
+     */
+    maxTableRows: number;
+    /**
+     * Max payload size in bytes (default: 50KB)
+     */
+    maxPayloadSize: number;
+    /**
+     * Iframe render timeout in ms (default: 5000ms)
+     */
+    renderTimeout: number;
+}
+/**
+ * Chart component parameters
+ */
+export interface ChartComponentParams {
+    type: ChartType;
+    title?: string;
+    data: {
+        labels: string[];
+        datasets: Array<{
+            label: string;
+            data: number[];
+            backgroundColor?: string | string[];
+            borderColor?: string | string[];
+            borderWidth?: number;
+        }>;
+    };
+    options?: {
+        responsive?: boolean;
+        maintainAspectRatio?: boolean;
+        tension?: number;
+        scales?: any;
+        plugins?: any;
+    };
+}
+/**
+ * Table component parameters
+ */
+export interface TableComponentParams {
+    title?: string;
+    columns: Array<{
+        key: string;
+        label: string;
+        sortable?: boolean;
+        width?: string;
+    }>;
+    rows: Array<Record<string, any>>;
+    pagination?: {
+        currentPage: number;
+        pageSize: number;
+        totalRows: number;
+    };
+}
+/**
+ * Metric card component parameters
+ */
+export interface MetricComponentParams {
+    title: string;
+    value: string | number;
+    unit?: string;
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'neutral';
+    };
+    subtitle?: string;
+    icon?: string;
+}
+/**
+ * Text component parameters
+ */
+export interface TextComponentParams {
+    content: string;
+    markdown?: boolean;
+    className?: string;
+}
+/**
+ * Action component parameters
+ */
+export interface ActionComponentParams {
+    label: string;
+    type: 'button' | 'link';
+    action: 'tool-call' | 'link' | 'submit';
+    toolName?: string;
+    params?: Record<string, any>;
+    url?: string;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    icon?: string;
+    disabled?: boolean;
+}
+/**
+ * UI Component definition (generated by LLM)
+ */
+export interface UIComponent {
+    /**
+     * Unique component ID
+     */
+    id: string;
+    /**
+     * Component type
+     */
+    type: ComponentType;
+    /**
+     * Grid position
+     */
+    position: GridPosition;
+    /**
+     * Component parameters (type-specific)
+     */
+    params: ChartComponentParams | TableComponentParams | MetricComponentParams | TextComponentParams | ActionComponentParams;
+    /**
+     * Metadata for observability
+     */
+    metadata?: {
+        generatedAt: string;
+        llmModel?: string;
+        confidence?: number;
+        toolsUsed?: string[];
+    };
+}
+/**
+ * UI Layout (collection of components)
+ */
+export interface UILayout {
+    /**
+     * Layout ID
+     */
+    id: string;
+    /**
+     * Components in the layout
+     */
+    components: UIComponent[];
+    /**
+     * Grid configuration
+     */
+    grid: {
+        columns: number;
+        gap: string;
+        minRowHeight?: string;
+    };
+    /**
+     * Layout metadata
+     */
+    metadata?: {
+        query: string;
+        generatedAt: string;
+        llmModel?: string;
+        totalComponents: number;
+    };
+}
+/**
+ * Component registry entry
+ */
+export interface ComponentRegistryEntry {
+    /**
+     * Component type identifier
+     */
+    type: ComponentType;
+    /**
+     * Component name
+     */
+    name: string;
+    /**
+     * Component description (for LLM context)
+     */
+    description: string;
+    /**
+     * JSON schema for validation
+     */
+    schema: any;
+    /**
+     * Example usage (for LLM few-shot prompting)
+     */
+    examples: Array<{
+        query: string;
+        component: UIComponent;
+    }>;
+    /**
+     * Resource limits
+     */
+    limits: ResourceLimits;
+}
+/**
+ * Component validation result
+ */
+export interface ValidationResult {
+    valid: boolean;
+    errors?: Array<{
+        path: string;
+        message: string;
+        code: string;
+    }>;
+}
+/**
+ * Renderer error types
+ */
+export type RendererErrorType = 'validation' | 'render' | 'timeout' | 'resource_limit' | 'network' | 'security';
+/**
+ * Renderer error
+ */
+export interface RendererError {
+    type: RendererErrorType;
+    message: string;
+    componentId?: string;
+    details?: any;
+}
+/**
+ * Streaming event types (Phase 2)
+ */
+export type StreamEventType = 'status' | 'component-start' | 'component' | 'component-complete' | 'error' | 'complete';
+/**
+ * Streaming event (Phase 2)
+ */
+export interface StreamEvent {
+    event: StreamEventType;
+    data: any;
+    sequenceId?: number;
+    timestamp: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/logger.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.cjs","sources":["../../src/utils/logger.ts"],"sourcesContent":["/**\n * Simple internal logger utility\n *\n * Provides basic logging functionality for the package.\n * Consumers can disable logging by setting NODE_ENV=production\n * or by implementing their own logging solution.\n */\n\nconst isDev = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'\n\nexport interface Logger {\n  info(message: string, context?: Record<string, unknown>): void\n  warn(message: string, context?: Record<string, unknown>): void\n  error(message: string, context?: Record<string, unknown>): void\n  debug(message: string, context?: Record<string, unknown>): void\n}\n\nfunction formatLogMessage(\n  feature: string,\n  message: string,\n  context?: Record<string, unknown>\n): string {\n  const contextStr = context ? ` ${JSON.stringify(context)}` : ''\n  return `[@seed-ship/mcp-ui-solid:${feature}] ${message}${contextStr}`\n}\n\n/**\n * Creates a feature-scoped logger\n *\n * @param feature - Feature name for log prefixing\n * @returns Logger instance\n *\n * @example\n * ```typescript\n * const logger = createLogger('my-component')\n * logger.info('Component mounted', { componentId: '123' })\n * ```\n */\nexport function createLogger(feature: string): Logger {\n  return {\n    info(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.info(formatLogMessage(feature, message, context))\n      }\n    },\n\n    warn(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.warn(formatLogMessage(feature, message, context))\n      }\n    },\n\n    error(message: string, context?: Record<string, unknown>) {\n      // Always log errors, even in production\n      console.error(formatLogMessage(feature, message, context))\n    },\n\n    debug(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.debug(formatLogMessage(feature, message, context))\n      }\n    },\n  }\n}\n\n/**\n * No-op logger for testing or when logging is disabled\n */\nexport const noopLogger: Logger = {\n  info: () => {},\n  warn: () => {},\n  error: () => {},\n  debug: () => {},\n}\n"],"names":[],"mappings":";;AAQA,MAAM,QAAQ,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa;AASzE,SAAS,iBACP,SACA,SACA,SACQ;AACR,QAAM,aAAa,UAAU,IAAI,KAAK,UAAU,OAAO,CAAC,KAAK;AAC7D,SAAO,4BAA4B,OAAO,KAAK,OAAO,GAAG,UAAU;AACrE;AAcO,SAAS,aAAa,SAAyB;AACpD,SAAO;AAAA,IACL,KAAK,SAAiB,SAAmC;AACvD,UAAI,OAAO;AACT,gBAAQ,KAAK,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,KAAK,SAAiB,SAAmC;AACvD,UAAI,OAAO;AACT,gBAAQ,KAAK,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,MAAM,SAAiB,SAAmC;AAExD,cAAQ,MAAM,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,IAC3D;AAAA,IAEA,MAAM,SAAiB,SAAmC;AACxD,UAAI,OAAO;AACT,gBAAQ,MAAM,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC3D;AAAA,IACF;AAAA,EAAA;AAEJ;;"}

package/dist/utils/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","sources":["../../src/utils/logger.ts"],"sourcesContent":["/**\n * Simple internal logger utility\n *\n * Provides basic logging functionality for the package.\n * Consumers can disable logging by setting NODE_ENV=production\n * or by implementing their own logging solution.\n */\n\nconst isDev = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'\n\nexport interface Logger {\n  info(message: string, context?: Record<string, unknown>): void\n  warn(message: string, context?: Record<string, unknown>): void\n  error(message: string, context?: Record<string, unknown>): void\n  debug(message: string, context?: Record<string, unknown>): void\n}\n\nfunction formatLogMessage(\n  feature: string,\n  message: string,\n  context?: Record<string, unknown>\n): string {\n  const contextStr = context ? ` ${JSON.stringify(context)}` : ''\n  return `[@seed-ship/mcp-ui-solid:${feature}] ${message}${contextStr}`\n}\n\n/**\n * Creates a feature-scoped logger\n *\n * @param feature - Feature name for log prefixing\n * @returns Logger instance\n *\n * @example\n * ```typescript\n * const logger = createLogger('my-component')\n * logger.info('Component mounted', { componentId: '123' })\n * ```\n */\nexport function createLogger(feature: string): Logger {\n  return {\n    info(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.info(formatLogMessage(feature, message, context))\n      }\n    },\n\n    warn(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.warn(formatLogMessage(feature, message, context))\n      }\n    },\n\n    error(message: string, context?: Record<string, unknown>) {\n      // Always log errors, even in production\n      console.error(formatLogMessage(feature, message, context))\n    },\n\n    debug(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.debug(formatLogMessage(feature, message, context))\n      }\n    },\n  }\n}\n\n/**\n * No-op logger for testing or when logging is disabled\n */\nexport const noopLogger: Logger = {\n  info: () => {},\n  warn: () => {},\n  error: () => {},\n  debug: () => {},\n}\n"],"names":[],"mappings":"AAQA,MAAM,QAAQ,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa;AASzE,SAAS,iBACP,SACA,SACA,SACQ;AACR,QAAM,aAAa,UAAU,IAAI,KAAK,UAAU,OAAO,CAAC,KAAK;AAC7D,SAAO,4BAA4B,OAAO,KAAK,OAAO,GAAG,UAAU;AACrE;AAcO,SAAS,aAAa,SAAyB;AACpD,SAAO;AAAA,IACL,KAAK,SAAiB,SAAmC;AACvD,UAAI,OAAO;AACT,gBAAQ,KAAK,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,KAAK,SAAiB,SAAmC;AACvD,UAAI,OAAO;AACT,gBAAQ,KAAK,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,MAAM,SAAiB,SAAmC;AAExD,cAAQ,MAAM,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,IAC3D;AAAA,IAEA,MAAM,SAAiB,SAAmC;AACxD,UAAI,OAAO;AACT,gBAAQ,MAAM,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC3D;AAAA,IACF;AAAA,EAAA;AAEJ;"}

package/dist/validation.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const validation = require("./mcp-ui-solid/src/services/validation.cjs");
+const validation = require("./services/validation.cjs");
 exports.DEFAULT_RESOURCE_LIMITS = validation.DEFAULT_RESOURCE_LIMITS;
 exports.sanitizeString = validation.sanitizeString;
 exports.validateChartComponent = validation.validateChartComponent;

package/dist/validation.js

@@ -1,4 +1,4 @@
-import { DEFAULT_RESOURCE_LIMITS, sanitizeString, validateChartComponent, validateComponent, validateGridPosition, validateIframeDomain, validateLayout, validatePayloadSize, validateTableComponent } from "./mcp-ui-solid/src/services/validation.js";
+import { DEFAULT_RESOURCE_LIMITS, sanitizeString, validateChartComponent, validateComponent, validateGridPosition, validateIframeDomain, validateLayout, validatePayloadSize, validateTableComponent } from "./services/validation.js";
 export {
   DEFAULT_RESOURCE_LIMITS,
   sanitizeString,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "1.0.28",
+  "version": "1.0.31",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,45 +8,47 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "solid": "./dist/index.js",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     },
     "./components": {
-      "solid": "./dist/components/index.js",
-      "import": "./dist/components/index.js",
-      "require": "./dist/components/index.cjs",
-      "types": "./dist/components/index.d.ts"
+      "types": "./dist/components.d.ts",
+      "solid": "./dist/components.js",
+      "import": "./dist/components.js",
+      "require": "./dist/components.cjs"
     },
     "./hooks": {
-      "solid": "./dist/hooks/index.js",
-      "import": "./dist/hooks/index.js",
-      "require": "./dist/hooks/index.cjs",
-      "types": "./dist/hooks/index.d.ts"
+      "types": "./dist/hooks.d.ts",
+      "solid": "./dist/hooks.js",
+      "import": "./dist/hooks.js",
+      "require": "./dist/hooks.cjs"
     },
     "./types": {
-      "solid": "./dist/types/index.js",
-      "import": "./dist/types/index.js",
-      "require": "./dist/types/index.cjs",
-      "types": "./dist/types/index.d.ts"
+      "types": "./dist/types.d.ts",
+      "solid": "./dist/types.js",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
     },
     "./validation": {
+      "types": "./dist/validation.d.ts",
       "solid": "./dist/validation.js",
       "import": "./dist/validation.js",
-      "require": "./dist/validation.cjs",
-      "types": "./dist/validation.d.ts"
+      "require": "./dist/validation.cjs"
+    },
+    "./types-only": {
+      "types": "./dist/types-export.d.ts",
+      "import": "./dist/types-export.js",
+      "require": "./dist/types-export.cjs"
     }
   },
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md"
-  ],
   "peerDependencies": {
     "solid-js": "^1.9.0"
   },
   "dependencies": {
+    "@types/dompurify": "^3.0.5",
+    "dompurify": "^3.3.0",
     "marked": "^16.3.0",
     "zod": "^3.22.4"
   },
@@ -86,7 +88,7 @@
   },
   "scripts": {
     "build": "vite build && pnpm build:types",
-    "build:types": "tsc --emitDeclarationOnly --outDir dist --skipLibCheck",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist --composite false && cp dist/components/index.d.ts dist/components.d.ts 2>/dev/null || true && cp dist/hooks/index.d.ts dist/hooks.d.ts 2>/dev/null || true && cp dist/types/index.d.ts dist/types.d.ts 2>/dev/null || true",
     "dev": "vite build --watch",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/components/ActionRenderer.tsx

@@ -0,0 +1,33 @@
+import { Component, Show } from 'solid-js'
+// import type { ActionSpec } from '@seed-ship/mcp-ui-spec'
+type ActionSpec = any
+
+export interface ActionRendererProps {
+    action: ActionSpec
+    onExecute: (toolName: string, params: any) => Promise<any>
+    disabled?: boolean
+}
+
+export const ActionRenderer: Component<ActionRendererProps> = (props) => {
+    const handleClick = async () => {
+        if (props.disabled) return
+        await props.onExecute(props.action.toolName, props.action.params)
+    }
+
+    const variantClasses: Record<string, string> = {
+        primary: 'bg-blue-600 hover:bg-blue-700 text-white',
+        secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white',
+        danger: 'bg-red-600 hover:bg-red-700 text-white'
+    }
+
+    return (
+        <button
+            onClick={handleClick}
+            disabled={props.disabled}
+            class={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${variantClasses[props.action.variant || 'primary']
+                } ${props.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+        >
+            {props.action.label}
+        </button>
+    )
+}

package/src/components/ArtifactRenderer.tsx

@@ -0,0 +1,54 @@
+import { Component } from 'solid-js'
+
+export interface ArtifactComponentParams {
+    url: string
+    filename: string
+    mimeType: string
+    size?: number
+    description?: string
+}
+
+export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> = (props) => {
+    const getIcon = () => {
+        if (props.params.mimeType.includes('csv')) return '📊'
+        if (props.params.mimeType.includes('json')) return '{}'
+        if (props.params.mimeType.includes('pdf')) return '📄'
+        return '📁'
+    }
+
+    const formatSize = (bytes?: number) => {
+        if (!bytes) return ''
+        if (bytes < 1024) return `${bytes} B`
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+    }
+
+    return (
+        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl">
+                    {getIcon()}
+                </div>
+                <div>
+                    <h4 class="text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]">
+                        {props.params.filename}
+                    </h4>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">
+                        {formatSize(props.params.size)} • {props.params.description || 'Generated artifact'}
+                    </p>
+                </div>
+            </div>
+
+            <a
+                href={props.params.url}
+                download={props.params.filename}
+                class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1"
+            >
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                Download
+            </a>
+        </div>
+    )
+}

package/src/components/CarouselRenderer.tsx

@@ -0,0 +1,77 @@
+import { Component, For, createSignal, onMount } from 'solid-js'
+import { isServer } from 'solid-js/web'
+import { UIResourceRenderer } from './UIResourceRenderer'
+
+// Local definition to avoid missing module error
+type UIComponent = any
+
+export interface CarouselRendererProps {
+    items: UIComponent[]
+    height?: string
+}
+
+export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
+    let scrollContainer: HTMLDivElement | undefined
+    const [canScrollLeft, setCanScrollLeft] = createSignal(false)
+    const [canScrollRight, setCanScrollRight] = createSignal(true)
+
+    const checkScroll = () => {
+        if (isServer || !scrollContainer) return
+        setCanScrollLeft(scrollContainer.scrollLeft > 0)
+        setCanScrollRight(
+            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10
+        )
+    }
+
+    const scroll = (direction: 'left' | 'right') => {
+        if (isServer || !scrollContainer) return
+        const scrollAmount = scrollContainer.clientWidth * 0.8
+        scrollContainer.scrollBy({
+            left: direction === 'left' ? -scrollAmount : scrollAmount,
+            behavior: 'smooth'
+        })
+    }
+
+    return (
+        <div class="relative group">
+            {/* Navigation Buttons */}
+            <button
+                onClick={() => scroll('left')}
+                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'
+                    }`}
+            >
+                <svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                </svg>
+            </button>
+
+            <button
+                onClick={() => scroll('right')}
+                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'
+                    }`}
+            >
+                <svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </button>
+
+            {/* Scroll Container */}
+            <div
+                ref={scrollContainer}
+                onScroll={checkScroll}
+                class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide"
+                style={{ "scroll-behavior": "smooth" }}
+            >
+                <For each={props.items}>
+                    {(item) => (
+                        <div class="flex-none w-[85%] sm:w-[45%] snap-center">
+                            <div class="h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800">
+                                <UIResourceRenderer content={item} />
+                            </div>
+                        </div>
+                    )}
+                </For>
+            </div>
+        </div>
+    )
+}

package/src/components/FooterRenderer.tsx

@@ -0,0 +1,66 @@
+import { Component, Show, For } from 'solid-js'
+
+export interface FooterComponentParams {
+    poweredBy?: string
+    executionTime?: number
+    model?: string
+    sourceCount?: number
+    customText?: string
+    links?: { label: string; url: string }[]
+}
+
+export const FooterRenderer: Component<{ params: FooterComponentParams }> = (props) => {
+    return (
+        <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">
+            <Show when={props.params.poweredBy}>
+                <span class="font-medium">{props.params.poweredBy}</span>
+            </Show>
+
+            <Show when={props.params.executionTime}>
+                <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" />
+                    </svg>
+                    {props.params.executionTime}ms
+                </span>
+            </Show>
+
+            <Show when={props.params.model}>
+                <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" />
+                    </svg>
+                    {props.params.model}
+                </span>
+            </Show>
+
+            <Show when={props.params.sourceCount}>
+                <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" />
+                    </svg>
+                    {props.params.sourceCount} sources
+                </span>
+            </Show>
+
+            <div class="flex-grow" />
+
+            <Show when={props.params.links}>
+                <div class="flex gap-3">
+                    <For each={props.params.links}>
+                        {(link) => (
+                            <a
+                                href={link.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                            >
+                                {link.label}
+                            </a>
+                        )}
+                    </For>
+                </div>
+            </Show>
+        </div>
+    )
+}