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

package/src/components/ActionRenderer.tsx

@@ -1,4 +1,4 @@
-import { Component, Show } from 'solid-js'
+import { Component } from 'solid-js'
 // import type { ActionSpec } from '@seed-ship/mcp-ui-spec'
 type ActionSpec = any
 

package/src/components/CarouselRenderer.tsx

@@ -1,9 +1,7 @@
-import { Component, For, createSignal, onMount } from 'solid-js'
+import { Component, For, createSignal } from 'solid-js'
 import { isServer } from 'solid-js/web'
-import { UIResourceRenderer } from './UIResourceRenderer'
-
-// Local definition to avoid missing module error
-type UIComponent = any
+import { useRenderContext } from './RenderContext'
+import type { UIComponent } from '../types'
 
 export interface CarouselRendererProps {
     items: UIComponent[]
@@ -15,6 +13,9 @@ export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
     const [canScrollLeft, setCanScrollLeft] = createSignal(false)
     const [canScrollRight, setCanScrollRight] = createSignal(true)
 
+    // Use render context to avoid circular dependency
+    const { renderComponent } = useRenderContext()
+
     const checkScroll = () => {
         if (isServer || !scrollContainer) return
         setCanScrollLeft(scrollContainer.scrollLeft > 0)
@@ -66,7 +67,7 @@ export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
                     {(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} />
+                                {renderComponent(item)}
                             </div>
                         </div>
                     )}

package/src/components/ChartJSRenderer.tsx

@@ -0,0 +1,194 @@
+/**
+ * ChartJSRenderer - Native Chart.js rendering
+ * Sprint 4: State & Charts
+ *
+ * Requires chart.js peer dependency:
+ * ```
+ * pnpm add chart.js
+ * ```
+ */
+
+import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'
+import type { UIComponent, ChartComponentParams } from '../types'
+
+// Lazy load Chart.js to avoid bundling if not used
+let ChartJS: any = null
+let chartJSLoadPromise: Promise<any> | null = null
+
+const loadChartJS = async () => {
+  if (ChartJS) return ChartJS
+
+  if (!chartJSLoadPromise) {
+    chartJSLoadPromise = import('chart.js/auto')
+      .then((module) => {
+        ChartJS = module.default || module.Chart
+        return ChartJS
+      })
+      .catch((err) => {
+        chartJSLoadPromise = null
+        throw err
+      })
+  }
+
+  return chartJSLoadPromise
+}
+
+/**
+ * Check if Chart.js is available
+ */
+export async function isChartJSAvailable(): Promise<boolean> {
+  try {
+    await loadChartJS()
+    return true
+  } catch {
+    return false
+  }
+}
+
+export interface ChartJSRendererProps {
+  /**
+   * UIComponent with chart params
+   */
+  component: UIComponent
+
+  /**
+   * Error callback
+   */
+  onError?: (error: Error) => void
+}
+
+/**
+ * Native Chart.js renderer component
+ *
+ * @example
+ * ```tsx
+ * const chartComponent: UIComponent = {
+ *   id: 'revenue-chart',
+ *   type: 'chart',
+ *   position: { colStart: 1, colSpan: 6 },
+ *   params: {
+ *     type: 'bar',
+ *     title: 'Monthly Revenue',
+ *     data: {
+ *       labels: ['Jan', 'Feb', 'Mar'],
+ *       datasets: [{ label: 'Revenue', data: [100, 200, 150] }]
+ *     },
+ *     renderer: 'native',
+ *   },
+ * }
+ * <ChartJSRenderer component={chartComponent} />
+ * ```
+ */
+export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
+  const [isLoading, setIsLoading] = createSignal(true)
+  const [error, setError] = createSignal<string>()
+  let canvasRef: HTMLCanvasElement | undefined
+  let chartInstance: any
+
+  const params = () => props.component.params as ChartComponentParams
+
+  // Create/update chart when params change
+  createEffect(async () => {
+    if (!canvasRef) return
+
+    // Access params to track dependencies
+    const chartParams = params()
+
+    setIsLoading(true)
+    setError(undefined)
+
+    try {
+      const Chart = await loadChartJS()
+
+      // Destroy previous instance
+      if (chartInstance) {
+        chartInstance.destroy()
+        chartInstance = null
+      }
+
+      // Create new chart
+      chartInstance = new Chart(canvasRef, {
+        type: chartParams.type,
+        data: chartParams.data,
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          ...chartParams.options,
+          plugins: {
+            ...chartParams.options?.plugins,
+            legend: {
+              display: true,
+              position: 'bottom',
+              ...chartParams.options?.plugins?.legend,
+            },
+          },
+        },
+      })
+
+      setIsLoading(false)
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Chart rendering failed')
+      setError(error.message)
+      setIsLoading(false)
+      props.onError?.(error)
+    }
+  })
+
+  // Cleanup on unmount
+  onCleanup(() => {
+    if (chartInstance) {
+      chartInstance.destroy()
+      chartInstance = null
+    }
+  })
+
+  return (
+    <div class="relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4">
+      <Show when={params().title}>
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
+          {params().title}
+        </h3>
+      </Show>
+
+      <Show when={isLoading()}>
+        <div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80">
+          <div class="flex flex-col items-center gap-2">
+            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+            <span class="text-sm text-gray-500 dark:text-gray-400">Loading chart...</span>
+          </div>
+        </div>
+      </Show>
+
+      <Show when={error()}>
+        <div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800">
+          <div class="text-center">
+            <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3">
+              <svg
+                class="w-6 h-6 text-red-600 dark:text-red-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+            </div>
+            <p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p>
+            <p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">{error()}</p>
+          </div>
+        </div>
+      </Show>
+
+      <div
+        class="w-full h-[250px]"
+        style={{ display: error() ? 'none' : 'block' }}
+      >
+        <canvas ref={canvasRef} />
+      </div>
+    </div>
+  )
+}

package/src/components/CodeBlockRenderer.test.tsx

@@ -0,0 +1,85 @@
+/**
+ * CodeBlockRenderer Tests
+ * Sprint 6 Refinement
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@solidjs/testing-library'
+import { CodeBlockRenderer } from './CodeBlockRenderer'
+import type { CodeComponentParams } from '../types'
+
+// Mock highlight.js
+vi.mock('highlight.js', () => ({
+    default: {
+        highlight: vi.fn((code, _options) => ({ value: `<span class="hljs-keyword">mocked</span> ${code}` })),
+        highlightAuto: vi.fn((code) => ({ value: `<span class="hljs-keyword">auto</span> ${code}` })),
+        getLanguage: vi.fn(() => true),
+    }
+}))
+
+describe('CodeBlockRenderer', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+
+        // Mock clipboard
+        Object.assign(navigator, {
+            clipboard: {
+                writeText: vi.fn().mockImplementation(() => Promise.resolve()),
+            },
+        })
+    })
+
+    const defaultParams: CodeComponentParams = {
+        code: 'console.log("Hello")',
+        language: 'javascript',
+    }
+
+    it('renders code content', async () => {
+        render(() => <CodeBlockRenderer params={defaultParams} />)
+
+        // Check if code is rendered (handling potential highlighting delay)
+        const codeElement = await screen.findByText((_content, element) => {
+            return element?.tagName.toLowerCase() === 'code'
+        })
+        expect(codeElement).toBeTruthy()
+    })
+
+    it('renders filename when provided', () => {
+        render(() => <CodeBlockRenderer params={{ ...defaultParams, filename: 'example.js' }} />)
+        expect(screen.getByText('example.js')).toBeTruthy()
+    })
+
+    it('copies code to clipboard', async () => {
+        render(() => <CodeBlockRenderer params={defaultParams} />)
+
+        const copyButton = screen.getByTitle('Copy code')
+        fireEvent.click(copyButton)
+
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith('console.log("Hello")')
+    })
+
+    it('renders line numbers by default', () => {
+        render(() => <CodeBlockRenderer params={{ ...defaultParams, code: 'line 1\nline 2' }} />)
+        // Should find "1" and "2" in line number column
+        expect(screen.getByText('1')).toBeTruthy()
+        expect(screen.getByText('2')).toBeTruthy()
+    })
+
+    it('hides line numbers when disabled', () => {
+        render(() => <CodeBlockRenderer params={{ ...defaultParams, code: 'line 1', showLineNumbers: false }} />)
+        // Should NOT find "1"
+        expect(screen.queryByText('1')).toBeNull()
+    })
+
+    it('respects start offset', () => {
+        render(() => <CodeBlockRenderer params={{ ...defaultParams, code: 'line 1\nline 2', startLine: 10 }} />)
+        expect(screen.getByText('10')).toBeTruthy()
+        expect(screen.getByText('11')).toBeTruthy()
+    })
+
+    it('handles styling class', () => {
+        const { container } = render(() => <CodeBlockRenderer params={defaultParams} />)
+        const code = container.querySelector('code')
+        expect(code?.className).toContain('language-javascript')
+    })
+})

package/src/components/CodeBlockRenderer.tsx

@@ -0,0 +1,197 @@
+/**
+ * CodeBlockRenderer - Syntax highlighted code block
+ * Sprint 6: Code & Maps
+ * Sprint Ultimate: Theme Synchronization (U.1)
+ */
+
+import { Component, createEffect, onCleanup, createSignal, Show, For } from 'solid-js'
+import { isServer } from 'solid-js/web'
+import type { UIComponent, CodeComponentParams } from '../types'
+
+// Lazy load highlight.js
+let hljs: any = null
+// Track if styles have been loaded globally
+let stylesLoaded = false
+
+export interface CodeBlockRendererProps {
+    /**
+     * UIComponent containing code params
+     */
+    component?: UIComponent
+
+    /**
+     * Direct code params
+     */
+    params?: CodeComponentParams
+}
+
+export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
+    const [highlightedCode, setHighlightedCode] = createSignal<string>('')
+    const [isCopied, setIsCopied] = createSignal(false)
+    const [isHljsLoaded, setIsHljsLoaded] = createSignal(false)
+    const [activeTheme, setActiveTheme] = createSignal<'light' | 'dark'>('dark')
+
+    const params = () => props.params || (props.component?.params as CodeComponentParams)
+
+    // Load highlight.js on mount
+    createEffect(async () => {
+        if (!hljs) {
+            try {
+                // Use the full highlight.js bundle with all languages for simplicity
+                const module = await import('highlight.js')
+                hljs = module.default || module
+                setIsHljsLoaded(true)
+            } catch (e) {
+                console.warn('Failed to load highlight.js', e)
+                // Continue without highlighting - fallback to plain text
+                setIsHljsLoaded(true)
+            }
+        } else {
+            setIsHljsLoaded(true)
+        }
+    })
+
+    // Theme management - Sprint Ultimate U.1: Reactive theme synchronization
+    // Load both theme stylesheets once, then toggle via data-attribute
+    createEffect(async () => {
+        if (isServer || stylesLoaded) return
+
+        // Load both themes upfront for instant switching
+        try {
+            await Promise.all([
+                import('highlight.js/styles/github.css'),
+                import('highlight.js/styles/github-dark.css')
+            ])
+            stylesLoaded = true
+        } catch (e) {
+            console.warn('Failed to load highlight.js themes', e)
+        }
+    })
+
+    // Reactive theme detection - listens to system preference changes
+    createEffect(() => {
+        if (isServer) return
+
+        // Priority 1: Explicit theme from params
+        const paramTheme = params()?.theme
+        if (paramTheme) {
+            setActiveTheme(paramTheme)
+            return
+        }
+
+        // Priority 2: System preference with live updates
+        // Check if matchMedia is available (not in all test environments)
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+            setActiveTheme(mediaQuery.matches ? 'dark' : 'light')
+
+            const handleChange = (e: MediaQueryListEvent) => {
+                // Only update if no explicit theme in params
+                if (!params()?.theme) {
+                    setActiveTheme(e.matches ? 'dark' : 'light')
+                }
+            }
+
+            mediaQuery.addEventListener('change', handleChange)
+            onCleanup(() => mediaQuery.removeEventListener('change', handleChange))
+        }
+    })
+
+    // Apply highlighting
+    createEffect(() => {
+        const code = params()?.code || ''
+        const language = params()?.language || ''
+
+        if (hljs && isHljsLoaded()) {
+            try {
+                let result
+                if (language && hljs.getLanguage(language)) {
+                    result = hljs.highlight(code, { language }).value
+                } else {
+                    result = hljs.highlightAuto(code).value
+                }
+                setHighlightedCode(result)
+            } catch (e) {
+                setHighlightedCode(code.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
+            }
+        } else {
+            // Fallback: simple escaping
+            setHighlightedCode(code.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
+        }
+    })
+
+    // Line numbers generation
+    const lineNumbers = () => {
+        if (params()?.showLineNumbers === false) return []
+        const code = params()?.code || ''
+        const lines = code.split('\n')
+        const start = params()?.startLine || 1
+        return lines.map((_, i) => start + i)
+    }
+
+    const handleCopy = async () => {
+        const code = params()?.code
+        if (code) {
+            try {
+                await navigator.clipboard.writeText(code)
+                setIsCopied(true)
+                setTimeout(() => setIsCopied(false), 2000)
+            } catch (e) {
+                console.error('Failed to copy code', e)
+            }
+        }
+    }
+
+    return (
+        <div class="w-full bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden text-sm flex flex-col">
+            {/* Header */}
+            <div class="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shrink-0">
+                <div class="font-mono text-xs text-gray-600 dark:text-gray-400">
+                    {params()?.filename || params()?.language || 'Code'}
+                </div>
+                <button
+                    onClick={handleCopy}
+                    class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none transition-colors"
+                    aria-label="Copy code"
+                    title="Copy code"
+                >
+                    <Show when={isCopied()} fallback={
+                        <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                        </svg>
+                    }>
+                        <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                        </svg>
+                    </Show>
+                </button>
+            </div>
+
+            {/* Code Area */}
+            <div
+                class="relative overflow-auto flex"
+                style={params()?.maxHeight ? { 'max-height': params()?.maxHeight } : {}}
+            >
+                {/* Line Numbers */}
+                <Show when={params()?.showLineNumbers !== false}>
+                    <div class="flex-none text-right select-none bg-gray-100 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 py-4 px-2 text-gray-400 font-mono text-xs leading-5">
+                        <For each={lineNumbers()}>
+                            {(num) => <div class="px-2">{num}</div>}
+                        </For>
+                    </div>
+                </Show>
+
+                {/* Code Content - Sprint Ultimate U.1: data-theme for reactive theming */}
+                <pre
+                    class="flex-1 m-0 p-4 font-mono text-gray-800 dark:text-gray-100 bg-transparent leading-5"
+                    data-theme={activeTheme()}
+                >
+                    <code
+                        class={`hljs ${params()?.language ? `language-${params()?.language}` : ''}`}
+                        innerHTML={highlightedCode()}
+                    />
+                </pre>
+            </div>
+        </div>
+    )
+}