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

package/src/components/VideoRenderer.test.tsx

@@ -0,0 +1,223 @@
+/**
+ * VideoRenderer Tests
+ * Sprint 5: Media Components
+ */
+
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@solidjs/testing-library'
+import { VideoRenderer, isSupportedVideoUrl, getVideoProvider } from './VideoRenderer'
+import type { VideoComponentParams } from '../types'
+
+describe('VideoRenderer', () => {
+  describe('Component Rendering', () => {
+    it('renders YouTube video embed', () => {
+      const params: VideoComponentParams = {
+        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        title: 'Test Video',
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      const iframe = document.querySelector('iframe') as HTMLIFrameElement
+      expect(iframe).toBeTruthy()
+      expect(iframe?.src).toContain('youtube-nocookie.com')
+      expect(iframe?.src).toContain('dQw4w9WgXcQ')
+    })
+
+    it('renders Vimeo video embed', () => {
+      const params: VideoComponentParams = {
+        url: 'https://vimeo.com/123456789',
+        title: 'Vimeo Test',
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      const iframe = document.querySelector('iframe') as HTMLIFrameElement
+      expect(iframe).toBeTruthy()
+      expect(iframe?.src).toContain('player.vimeo.com')
+      expect(iframe?.src).toContain('123456789')
+    })
+
+    it('renders direct video file', () => {
+      const params: VideoComponentParams = {
+        url: 'https://example.com/video.mp4',
+        title: 'Direct Video',
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      const video = document.querySelector('video') as HTMLVideoElement
+      expect(video).toBeTruthy()
+      expect(video?.src).toBe('https://example.com/video.mp4')
+    })
+
+    it('renders title when provided', () => {
+      const params: VideoComponentParams = {
+        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        title: 'My Video Title',
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      expect(screen.getByText('My Video Title')).toBeTruthy()
+    })
+
+    it('renders caption when provided', () => {
+      const params: VideoComponentParams = {
+        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        caption: 'This is a video caption',
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      expect(screen.getByText('This is a video caption')).toBeTruthy()
+    })
+
+    it('applies correct aspect ratio', () => {
+      const { container, unmount } = render(() => (
+        <VideoRenderer params={{ url: 'https://youtube.com/watch?v=dQw4w9WgXcQ', aspectRatio: '4:3' }} />
+      ))
+
+      expect(container.querySelector('.aspect-\\[4\\/3\\]')).toBeTruthy()
+
+      unmount()
+
+      const { container: container2 } = render(() => (
+        <VideoRenderer params={{ url: 'https://youtube.com/watch?v=dQw4w9WgXcQ', aspectRatio: '21:9' }} />
+      ))
+
+      expect(container2.querySelector('.aspect-\\[21\\/9\\]')).toBeTruthy()
+    })
+
+    it('sets YouTube embed parameters correctly', () => {
+      const params: VideoComponentParams = {
+        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        autoplay: true,
+        muted: true,
+        loop: true,
+        startTime: 30,
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      const iframe = document.querySelector('iframe') as HTMLIFrameElement
+      expect(iframe?.src).toContain('autoplay=1')
+      expect(iframe?.src).toContain('mute=1')
+      expect(iframe?.src).toContain('loop=1')
+      expect(iframe?.src).toContain('start=30')
+    })
+
+    it('sets Vimeo embed parameters correctly', () => {
+      const params: VideoComponentParams = {
+        url: 'https://vimeo.com/123456',
+        autoplay: true,
+        muted: true,
+        loop: true,
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      const iframe = document.querySelector('iframe') as HTMLIFrameElement
+      expect(iframe?.src).toContain('autoplay=1')
+      expect(iframe?.src).toContain('muted=1')
+      expect(iframe?.src).toContain('loop=1')
+    })
+
+    it('sets direct video attributes correctly', () => {
+      const params: VideoComponentParams = {
+        url: 'https://example.com/video.mp4',
+        poster: 'https://example.com/poster.jpg',
+        autoplay: true,
+        controls: true,
+        loop: true,
+        muted: true,
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      const video = document.querySelector('video') as HTMLVideoElement
+      expect(video.getAttribute('poster')).toBe('https://example.com/poster.jpg')
+      expect(video.hasAttribute('autoplay')).toBe(true)
+      expect(video.hasAttribute('controls')).toBe(true)
+      expect(video.hasAttribute('loop')).toBe(true)
+      // SolidJS sets muted as a property, not attribute in some cases
+      expect(video.muted || video.hasAttribute('muted')).toBe(true)
+    })
+
+    it('enables controls by default for direct video', () => {
+      const params: VideoComponentParams = {
+        url: 'https://example.com/video.mp4',
+      }
+
+      render(() => <VideoRenderer params={params} />)
+
+      const video = document.querySelector('video') as HTMLVideoElement
+      expect(video.hasAttribute('controls')).toBe(true)
+    })
+
+    it('accepts component prop', () => {
+      const component = {
+        id: 'test-video',
+        type: 'video' as const,
+        position: { colStart: 1, colSpan: 12 },
+        params: {
+          url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+          title: 'Test',
+        },
+      }
+
+      render(() => <VideoRenderer component={component} />)
+
+      const iframe = document.querySelector('iframe')
+      expect(iframe).toBeTruthy()
+    })
+  })
+
+  describe('URL Parsing', () => {
+    it('parses youtube.com/watch URLs', () => {
+      expect(getVideoProvider('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toBe('youtube')
+    })
+
+    it('parses youtube.com/embed URLs', () => {
+      expect(getVideoProvider('https://www.youtube.com/embed/dQw4w9WgXcQ')).toBe('youtube')
+    })
+
+    it('parses youtu.be URLs', () => {
+      expect(getVideoProvider('https://youtu.be/dQw4w9WgXcQ')).toBe('youtube')
+    })
+
+    it('parses vimeo.com URLs', () => {
+      expect(getVideoProvider('https://vimeo.com/123456789')).toBe('vimeo')
+    })
+
+    it('parses player.vimeo.com URLs', () => {
+      expect(getVideoProvider('https://player.vimeo.com/video/123456789')).toBe('vimeo')
+    })
+
+    it('returns direct for other URLs', () => {
+      expect(getVideoProvider('https://example.com/video.mp4')).toBe('direct')
+    })
+  })
+
+  describe('isSupportedVideoUrl', () => {
+    it('returns true for YouTube URLs', () => {
+      expect(isSupportedVideoUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toBe(true)
+    })
+
+    it('returns true for Vimeo URLs', () => {
+      expect(isSupportedVideoUrl('https://vimeo.com/123456')).toBe(true)
+    })
+
+    it('returns true for video file extensions', () => {
+      expect(isSupportedVideoUrl('https://example.com/video.mp4')).toBe(true)
+      expect(isSupportedVideoUrl('https://example.com/video.webm')).toBe(true)
+      expect(isSupportedVideoUrl('https://example.com/video.ogg')).toBe(true)
+      expect(isSupportedVideoUrl('https://example.com/video.mov')).toBe(true)
+    })
+
+    it('returns false for unsupported URLs', () => {
+      expect(isSupportedVideoUrl('https://example.com/image.jpg')).toBe(false)
+      expect(isSupportedVideoUrl('https://example.com/page')).toBe(false)
+    })
+  })
+})

package/src/components/VideoRenderer.tsx

@@ -0,0 +1,194 @@
+/**
+ * VideoRenderer - Video embed component
+ * Sprint 5: Media Components
+ *
+ * Supports YouTube, Vimeo, and direct video files
+ */
+
+import { Component, createMemo, Show } from 'solid-js'
+import type { UIComponent, VideoComponentParams } from '../types'
+
+export interface VideoRendererProps {
+  /**
+   * UIComponent containing video params
+   */
+  component?: UIComponent
+
+  /**
+   * Direct video params (alternative to component)
+   */
+  params?: VideoComponentParams
+
+  /**
+   * Error callback
+   */
+  onError?: (error: Error) => void
+}
+
+/**
+ * Video provider type
+ */
+type VideoProvider = 'youtube' | 'vimeo' | 'direct'
+
+/**
+ * Parsed video info
+ */
+interface VideoInfo {
+  provider: VideoProvider
+  videoId?: string
+}
+
+/**
+ * Extract video ID and provider from URL
+ */
+function parseVideoUrl(url: string): VideoInfo {
+  // YouTube patterns:
+  // - youtube.com/watch?v=VIDEO_ID
+  // - youtube.com/embed/VIDEO_ID
+  // - youtube.com/v/VIDEO_ID
+  // - youtu.be/VIDEO_ID
+  const youtubeMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  )
+  if (youtubeMatch) {
+    return { provider: 'youtube', videoId: youtubeMatch[1] }
+  }
+
+  // Vimeo patterns:
+  // - vimeo.com/VIDEO_ID
+  // - player.vimeo.com/video/VIDEO_ID
+  const vimeoMatch = url.match(/(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(\d+)/)
+  if (vimeoMatch) {
+    return { provider: 'vimeo', videoId: vimeoMatch[1] }
+  }
+
+  // Direct video file
+  return { provider: 'direct' }
+}
+
+export const VideoRenderer: Component<VideoRendererProps> = (props) => {
+  const params = () => props.params || (props.component?.params as VideoComponentParams)
+
+  const videoInfo = createMemo(() => parseVideoUrl(params()?.url || ''))
+
+  const embedUrl = createMemo(() => {
+    const info = videoInfo()
+    const p = params()
+
+    if (!p?.url) return null
+
+    switch (info.provider) {
+      case 'youtube': {
+        const ytParams = new URLSearchParams({
+          autoplay: p.autoplay ? '1' : '0',
+          controls: p.controls !== false ? '1' : '0',
+          loop: p.loop ? '1' : '0',
+          mute: p.muted ? '1' : '0',
+        })
+        if (p.startTime) {
+          ytParams.set('start', String(p.startTime))
+        }
+        // Use youtube-nocookie.com for privacy
+        return `https://www.youtube-nocookie.com/embed/${info.videoId}?${ytParams}`
+      }
+
+      case 'vimeo': {
+        const vParams = new URLSearchParams({
+          autoplay: p.autoplay ? '1' : '0',
+          loop: p.loop ? '1' : '0',
+          muted: p.muted ? '1' : '0',
+        })
+        return `https://player.vimeo.com/video/${info.videoId}?${vParams}`
+      }
+
+      default:
+        return null
+    }
+  })
+
+  const aspectClass = () => {
+    switch (params()?.aspectRatio) {
+      case '1:1':
+        return 'aspect-square'
+      case '4:3':
+        return 'aspect-[4/3]'
+      case '21:9':
+        return 'aspect-[21/9]'
+      default:
+        return 'aspect-video' // 16:9
+    }
+  }
+
+  const handleVideoError = (e: Event) => {
+    const error = new Error('Video failed to load')
+    console.error('Video error:', e)
+    props.onError?.(error)
+  }
+
+  return (
+    <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Title */}
+      <Show when={params()?.title}>
+        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{params()!.title}</h3>
+        </div>
+      </Show>
+
+      {/* Video Container */}
+      <div class={`relative ${aspectClass()} bg-black`}>
+        <Show
+          when={embedUrl()}
+          fallback={
+            // Direct video file
+            <video
+              src={params()?.url}
+              poster={params()?.poster}
+              autoplay={params()?.autoplay}
+              controls={params()?.controls !== false}
+              loop={params()?.loop}
+              muted={params()?.muted}
+              playsinline
+              class="absolute inset-0 w-full h-full object-contain"
+              onError={handleVideoError}
+            >
+              <track kind="captions" />
+              Your browser does not support the video tag.
+            </video>
+          }
+        >
+          {/* YouTube/Vimeo embed */}
+          <iframe
+            src={embedUrl()!}
+            title={params()?.title || 'Video'}
+            class="absolute inset-0 w-full h-full"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen
+            loading="lazy"
+          />
+        </Show>
+      </div>
+
+      {/* Caption */}
+      <Show when={params()?.caption}>
+        <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
+          <p class="text-sm text-gray-600 dark:text-gray-400">{params()!.caption}</p>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * Check if a URL is from a supported video provider
+ */
+export function isSupportedVideoUrl(url: string): boolean {
+  const info = parseVideoUrl(url)
+  return info.provider !== 'direct' || url.match(/\.(mp4|webm|ogg|mov)$/i) !== null
+}
+
+/**
+ * Get video provider from URL
+ */
+export function getVideoProvider(url: string): VideoProvider {
+  return parseVideoUrl(url).provider
+}

package/src/components/index.ts

@@ -29,5 +29,44 @@ export type { CarouselRendererProps } from './CarouselRenderer'
 export { GridRenderer } from './GridRenderer'
 export type { GridRendererProps, GridComponentParams } from './GridRenderer'
 
+// Sprint 1: Form components
+export { FormRenderer } from './FormRenderer'
+export type { FormRendererProps } from './FormRenderer'
+
+export { FormFieldRenderer } from './FormFieldRenderer'
+export type { FormFieldRendererProps } from './FormFieldRenderer'
+
+// Sprint 3: UX Improvements
+export { ModalRenderer } from './ModalRenderer'
+export type { ModalRendererProps } from './ModalRenderer'
+
+export { ActionGroupRenderer } from './ActionGroupRenderer'
+export type { ActionGroupRendererProps } from './ActionGroupRenderer'
+
+// Sprint 4: State & Charts
+export { ChartJSRenderer, isChartJSAvailable } from './ChartJSRenderer'
+export type { ChartJSRendererProps } from './ChartJSRenderer'
+
+// Sprint 5: Media Components
+export { LightboxOverlay } from './LightboxOverlay'
+export type { LightboxOverlayProps } from './LightboxOverlay'
+
+export { ImageGalleryRenderer } from './ImageGalleryRenderer'
+export type { ImageGalleryRendererProps } from './ImageGalleryRenderer'
+
+export { VideoRenderer, isSupportedVideoUrl, getVideoProvider } from './VideoRenderer'
+export type { VideoRendererProps } from './VideoRenderer'
+
+// Sprint 6: Code & Maps
+export { CodeBlockRenderer } from './CodeBlockRenderer'
+export type { CodeBlockRendererProps } from './CodeBlockRenderer'
+
+export { MapRenderer } from './MapRenderer'
+export type { MapRendererProps } from './MapRenderer'
+
+// Sprint Ultimate: RenderContext for circular dependency resolution
+export { RenderContext, RenderProvider, useRenderContext } from './RenderContext'
+export type { RenderContextValue, RenderComponentFn } from './RenderContext'
+
 // Default exports for lazy loading compatibility
 export { UIResourceRenderer as default } from './UIResourceRenderer'

package/src/context/MCPActionContext.tsx

@@ -209,9 +209,12 @@ const defaultExecutor = async (request: ActionRequest): Promise<ActionResult> =>
 export const MCPActionProvider: ParentComponent<MCPActionProviderProps> = (props) => {
   const [isExecuting, setIsExecuting] = createSignal(false)
   const [lastResult, setLastResult] = createSignal<ActionResult>()
-  const [spaceIds, setSpaceIds] = createSignal<string[]>(props.spaceIds || [])
-  const [macroId, setMacroId] = createSignal<string | undefined>(props.macroId)
-  const [availableTools, setAvailableTools] = createSignal<string[]>(props.availableTools || [])
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [spaceIds, _setSpaceIds] = createSignal<string[]>(props.spaceIds || [])
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [macroId, _setMacroId] = createSignal<string | undefined>(props.macroId)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [availableTools, _setAvailableTools] = createSignal<string[]>(props.availableTools || [])
 
   // Update signals when props change
   // Note: This is a simple approach; for more complex scenarios, consider createEffect

package/src/hooks/index.ts

@@ -13,6 +13,24 @@ export type {
   CompleteMetadata,
 } from './useStreamingUI'
 
-// Action hooks (Phase 5.0)
+// Action hooks (Phase 5.0 + Sprint 2)
 export { useAction, useToolAction } from './useAction'
-export type { UseActionReturn, ActionRequest, ActionResult } from './useAction'
+export type {
+  UseActionReturn,
+  UseActionOptions,
+  UseToolActionReturn,
+  ActionRequest,
+  ActionResult,
+} from './useAction'
+
+// Conditional field hooks (Sprint 2)
+export { useConditionalField, evaluateCondition } from './useConditionalField'
+export type { UseConditionalFieldOptions } from './useConditionalField'
+
+// Modal hooks (Sprint 3)
+export { useModal, useConfirmModal } from './useModal'
+export type { UseModalReturn, UseConfirmModalReturn } from './useModal'
+
+// Form persistence hooks (Sprint 4)
+export { useFormPersistence } from './useFormPersistence'
+export type { UseFormPersistenceOptions, UseFormPersistenceReturn } from './useFormPersistence'