@seed-ship/mcp-ui-solid 6.1.0 → 6.2.0

package/src/components/CodeBlockRenderer.tsx

@@ -7,7 +7,18 @@
 import { Component, createEffect, onCleanup, createSignal, Show, For } from 'solid-js'
 import { isServer } from 'solid-js/web'
 import type { UIComponent, CodeComponentParams } from '../types'
-import { ExpandableWrapper } from './ExpandableWrapper'
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
+import { highlightQuery } from './UIResourceRenderer'
+
+/** Map of `params.language` → file extension for the v6.2.0 download button. */
+const LANGUAGE_EXTENSIONS: Record<string, string> = {
+  typescript: 'ts', tsx: 'tsx', javascript: 'js', jsx: 'jsx',
+  python: 'py', ruby: 'rb', go: 'go', rust: 'rs', java: 'java',
+  kotlin: 'kt', swift: 'swift', php: 'php', csharp: 'cs', cpp: 'cpp',
+  c: 'c', sql: 'sql', json: 'json', yaml: 'yml', toml: 'toml',
+  bash: 'sh', shell: 'sh', html: 'html', css: 'css', scss: 'scss',
+  markdown: 'md', xml: 'xml', graphql: 'graphql',
+}
 
 // Lazy load highlight.js
 let hljs: any = null
@@ -34,6 +45,35 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
     const [wordWrap, setWordWrap] = createSignal(false)
 
     const params = () => props.params || (props.component?.params as CodeComponentParams)
+    const isExpanded = useExpanded()
+    const [searchQuery, setSearchQuery] = createSignal('')
+
+    // v6.2.0 — search highlight: re-wraps `<mark>` around matches in the
+    // already-highlighted (hljs) HTML output. `highlightQuery` is the same
+    // helper TableRenderer uses (only wraps text outside of HTML tags so
+    // syntax span colors stay intact).
+    const displayedHTML = () => {
+      const q = searchQuery().trim()
+      return q ? highlightQuery(highlightedCode(), q) : highlightedCode()
+    }
+
+    const handleDownload = () => {
+      const code = params()?.code
+      if (!code) return
+      const lang = (params()?.language || '').toLowerCase()
+      const ext = LANGUAGE_EXTENSIONS[lang] || 'txt'
+      const stem = (params()?.filename || `code-${Date.now()}`).replace(/\.[^.]+$/, '')
+      const filename = stem.endsWith(`.${ext}`) ? stem : `${stem}.${ext}`
+      const blob = new Blob([code], { type: 'text/plain' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    }
 
     // Load highlight.js on mount
     createEffect(async () => {
@@ -152,13 +192,33 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
 
     return (
         <ExpandableWrapper title={params()?.filename || params()?.language || 'Code'} copyData={params()?.code} copyLabel="Copy code">
-        <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">
+        <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 ${isExpanded() ? 'flex-1 min-h-0' : ''}`}>
             {/* 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>
                 <div class="flex items-center gap-2">
+                    {/* Search input (v6.2.0) */}
+                    <input
+                        type="text"
+                        value={searchQuery()}
+                        onInput={(e) => setSearchQuery(e.currentTarget.value)}
+                        placeholder="Search…"
+                        class="px-2 py-0.5 text-xs border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 outline-none w-32"
+                        aria-label="Search in code"
+                    />
+                    {/* Download button (v6.2.0) */}
+                    <button
+                        onClick={handleDownload}
+                        class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none transition-colors"
+                        aria-label="Download code as file"
+                        title="Download code"
+                    >
+                        <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
+                    </button>
                     {/* Word wrap toggle */}
                     <button
                         onClick={() => setWordWrap(!wordWrap())}
@@ -192,8 +252,8 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
 
             {/* Code Area */}
             <div
-                class="relative overflow-auto flex"
-                style={params()?.maxHeight ? { 'max-height': params()?.maxHeight } : {}}
+                class={`relative overflow-auto flex ${isExpanded() ? 'flex-1 min-h-0' : ''}`}
+                style={!isExpanded() && params()?.maxHeight ? { 'max-height': params()?.maxHeight } : {}}
             >
                 {/* Line Numbers */}
                 <Show when={params()?.showLineNumbers !== false}>
@@ -212,7 +272,7 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                 >
                     <code
                         class={`hljs ${params()?.language ? `language-${params()?.language}` : ''}`}
-                        innerHTML={highlightedCode()}
+                        innerHTML={displayedHTML()}
                     />
                 </pre>
             </div>

package/src/components/ImageGalleryRenderer.test.tsx

@@ -120,10 +120,16 @@ describe('ImageGalleryRenderer', () => {
   })
 
   it('renders buttons for images when lightbox is enabled', () => {
-    render(() => <ImageGalleryRenderer params={defaultParams} />)
-
-    const buttons = screen.getAllByRole('button')
-    // Should have one button per image (for opening lightbox)
+    const { container } = render(() => <ImageGalleryRenderer params={defaultParams} />)
+
+    // Filter to image-trigger buttons (have aria-label "View image …"). The
+    // ExpandableWrapper expand button (added in v6.2.0) is excluded.
+    // Image-trigger buttons have a tailwind `relative overflow-hidden` group
+    // class. The ExpandableWrapper expand button (added v6.2.0) has a
+    // different `absolute top-2 right-2` class — this filter excludes it.
+    const buttons = Array.from(container.querySelectorAll('button')).filter(
+      (b) => b.className.includes('relative overflow-hidden')
+    )
     expect(buttons.length).toBe(3)
   })
 
@@ -133,10 +139,15 @@ describe('ImageGalleryRenderer', () => {
       lightbox: false,
     }
 
-    render(() => <ImageGalleryRenderer params={paramsNoLightbox} />)
+    const { container } = render(() => <ImageGalleryRenderer params={paramsNoLightbox} />)
 
-    // Should still render buttons (for accessibility) but not open lightbox
-    const buttons = screen.getAllByRole('button')
+    // Same filter as above — ignore the ExpandableWrapper expand button (v6.2.0).
+    // Image-trigger buttons have a tailwind `relative overflow-hidden` group
+    // class. The ExpandableWrapper expand button (added v6.2.0) has a
+    // different `absolute top-2 right-2` class — this filter excludes it.
+    const buttons = Array.from(container.querySelectorAll('button')).filter(
+      (b) => b.className.includes('relative overflow-hidden')
+    )
     expect(buttons.length).toBe(3)
   })
 

package/src/components/ImageGalleryRenderer.tsx

@@ -6,6 +6,7 @@
 import { Component, createSignal, For, Show } from 'solid-js'
 import type { UIComponent, ImageGalleryParams } from '../types'
 import { LightboxOverlay } from './LightboxOverlay'
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 
 export interface ImageGalleryRendererProps {
   /**
@@ -19,8 +20,18 @@ export interface ImageGalleryRendererProps {
   params?: ImageGalleryParams
 }
 
+/** Build a newline-separated list of image URLs (with captions when present)
+ * for the ExpandableWrapper copy button. v6.2.0. */
+function imagesToTextList(p: ImageGalleryParams | undefined): string {
+  if (!p) return ''
+  return (p.images ?? [])
+    .map((img) => (img.caption ? `${img.url}\t${img.caption}` : img.url))
+    .join('\n')
+}
+
 export const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {
   const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)
+  const isExpanded = useExpanded()
 
   const params = () => props.params || (props.component?.params as ImageGalleryParams)
 
@@ -72,16 +83,23 @@ export const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props
   }
 
   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">
+    <ExpandableWrapper
+      title={params()?.title || 'Gallery'}
+      copyData={imagesToTextList(params())}
+      copyLabel="Copy image URLs"
+    >
+    <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${
+      isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
+    }`}>
       {/* Title */}
       <Show when={params()?.title}>
-        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
           <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{params()!.title}</h3>
         </div>
       </Show>
 
       {/* Gallery Grid */}
-      <div class={`grid ${columnsClass()} ${gapClass()} p-4`}>
+      <div class={`grid ${columnsClass()} ${gapClass()} p-4 ${isExpanded() ? 'flex-1 min-h-0 overflow-auto' : ''}`}>
         <For each={params()?.images}>
           {(image, index) => (
             <button
@@ -142,5 +160,6 @@ export const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props
         onNavigate={setSelectedIndex}
       />
     </div>
+    </ExpandableWrapper>
   )
 }

package/src/components/MapRenderer.tsx

@@ -7,6 +7,7 @@
 import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'
 import { isServer } from 'solid-js/web'
 import type { UIComponent, MapComponentParams, MapClusterOptions, MapGeoJSONStyle, MapPopupConfig, MapLayer, MapPMTilesConfig } from '../types'
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 
 // Lazy load leaflet (it doesn't support SSR well)
 let L: any = null
@@ -165,14 +166,55 @@ function addGeoJSONLayer(
 
 // ─── Component ──────────────────────────────────────────────
 
+/**
+ * Build a GeoJSON FeatureCollection from the map's `markers` (and any
+ * inlined GeoJSON layers, when present). Used by the "Copy data" button
+ * shipped via `<ExpandableWrapper>` (v6.2.0). Best-effort — clusters,
+ * tile layers, and choropleth-only data don't get round-tripped.
+ */
+function mapToGeoJSON(p: MapComponentParams | undefined): string {
+    if (!p) return '{"type":"FeatureCollection","features":[]}'
+    const features: any[] = []
+    for (const marker of p.markers ?? []) {
+        const pos: any = marker.position as any
+        // Accept both [lat, lng] tuple and {lat, lng} object shapes (v5.0.2 spec)
+        const lat = Array.isArray(pos) ? pos[0] : pos?.lat
+        const lng = Array.isArray(pos) ? pos[1] : pos?.lng
+        if (typeof lat !== 'number' || typeof lng !== 'number') continue
+        features.push({
+            type: 'Feature',
+            geometry: { type: 'Point', coordinates: [lng, lat] },
+            properties: {
+                ...(marker.tooltip ? { tooltip: marker.tooltip } : {}),
+                ...(marker.popup ? { popup: marker.popup } : {}),
+            },
+        })
+    }
+    return JSON.stringify({ type: 'FeatureCollection', features }, null, 2)
+}
+
 export const MapRenderer: Component<MapRendererProps> = (props) => {
     let mapContainer: HTMLDivElement | undefined
     let mapInstance: any = null
     const [isLeafletLoaded, setIsLeafletLoaded] = createSignal(false)
     const [error, setError] = createSignal<string | null>(null)
+    const isExpanded = useExpanded()
 
     const params = () => props.params || (props.component?.params as MapComponentParams)
 
+    // v6.2.0 — Leaflet has to be told to re-measure when its container
+    // resizes (e.g. transitioning to fullscreen via ExpandableWrapper).
+    // We give the DOM a tick to settle the new dimensions, then ask
+    // Leaflet to reflow tiles.
+    createEffect(() => {
+        const expanded = isExpanded()
+        if (!mapInstance) return
+        // Read the signal so the effect re-runs on toggle ; the value is
+        // observed for its side effects on layout.
+        void expanded
+        setTimeout(() => mapInstance?.invalidateSize?.(), 100)
+    })
+
     // Initialize Map
     createEffect(async () => {
         if (isServer) return // Don't run on server
@@ -384,19 +426,31 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
     })
 
     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 ${params()?.className || ''}`}>
-            <Show when={error()}>
-                <div class="p-4 text-red-500 bg-red-50 dark:bg-red-900/20 text-center">
-                    {error()}
-                </div>
-            </Show>
-            <Show when={!error()}>
-                <div
-                    ref={mapContainer}
-                    style={{ height: params()?.height || '400px', width: '100%', "z-index": 0 }}
-                    class="relative z-0"
-                />
-            </Show>
-        </div>
+        <ExpandableWrapper
+            title={'Map'}
+            copyData={mapToGeoJSON(params())}
+            copyLabel="Copy markers as GeoJSON"
+        >
+            <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${params()?.className || ''} ${
+                isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
+            }`}>
+                <Show when={error()}>
+                    <div class="p-4 text-red-500 bg-red-50 dark:bg-red-900/20 text-center">
+                        {error()}
+                    </div>
+                </Show>
+                <Show when={!error()}>
+                    <div
+                        ref={mapContainer}
+                        style={
+                            isExpanded()
+                                ? { height: '100%', width: '100%', 'z-index': 0 }
+                                : { height: params()?.height || '400px', width: '100%', 'z-index': 0 }
+                        }
+                        class={`relative z-0 ${isExpanded() ? 'flex-1 min-h-0' : ''}`}
+                    />
+                </Show>
+            </div>
+        </ExpandableWrapper>
     )
 }

package/src/components/VideoRenderer.tsx

@@ -7,6 +7,7 @@
 
 import { Component, createMemo, Show } from 'solid-js'
 import type { UIComponent, VideoComponentParams } from '../types'
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 
 export interface VideoRendererProps {
   /**
@@ -68,6 +69,7 @@ function parseVideoUrl(url: string): VideoInfo {
 
 export const VideoRenderer: Component<VideoRendererProps> = (props) => {
   const params = () => props.params || (props.component?.params as VideoComponentParams)
+  const isExpanded = useExpanded()
 
   const videoInfo = createMemo(() => parseVideoUrl(params()?.url || ''))
 
@@ -126,7 +128,14 @@ export const VideoRenderer: Component<VideoRendererProps> = (props) => {
   }
 
   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">
+    <ExpandableWrapper
+      title={params()?.title || 'Video'}
+      copyData={params()?.url || ''}
+      copyLabel="Copy video URL"
+    >
+    <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${
+      isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
+    }`}>
       {/* Title */}
       <Show when={params()?.title}>
         <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
@@ -134,8 +143,8 @@ export const VideoRenderer: Component<VideoRendererProps> = (props) => {
         </div>
       </Show>
 
-      {/* Video Container */}
-      <div class={`relative ${aspectClass()} bg-black`}>
+      {/* Video Container — when expanded, fill remaining space (override aspect ratio) */}
+      <div class={`relative bg-black ${isExpanded() ? 'flex-1 min-h-0' : aspectClass()}`}>
         <Show
           when={embedUrl()}
           fallback={
@@ -170,11 +179,12 @@ export const VideoRenderer: Component<VideoRendererProps> = (props) => {
 
       {/* Caption */}
       <Show when={params()?.caption}>
-        <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
+        <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
           <p class="text-sm text-gray-600 dark:text-gray-400">{params()!.caption}</p>
         </div>
       </Show>
     </div>
+    </ExpandableWrapper>
   )
 }