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

package/src/components/ChartJSRenderer.tsx

@@ -10,7 +10,7 @@
 
 import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'
 import type { UIComponent, ChartComponentParams } from '../types'
-import { ExpandableWrapper } from './ExpandableWrapper'
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 
 // Lazy load Chart.js to avoid bundling if not used
 let ChartJS: any = null
@@ -87,6 +87,16 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
   let chartInstance: any
 
   const params = () => props.component.params as ChartComponentParams
+  const isExpanded = useExpanded()
+
+  // v6.1.0 — export visibility :
+  //   - undefined / true  → button shown (new default, was opt-in)
+  //   - false             → button hidden (explicit opt-out, unchanged)
+  const exportEnabled = () => params().exportable !== false
+
+  // v6.1.0 — copy data for the ExpandableWrapper modal-header copy button.
+  // Lazy-stringified each time the button is clicked.
+  const copyDataJSON = () => JSON.stringify({ type: params().type, data: params().data }, null, 2)
 
   // Chart PNG export
   const handleExportPNG = () => {
@@ -176,16 +186,22 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
   })
 
   return (
-    <ExpandableWrapper title={params().title || 'Chart'}>
-      <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 group">
-        <Show when={params().title || params().exportable}>
-          <div class="flex items-center justify-between mb-3">
+    <ExpandableWrapper
+      title={params().title || 'Chart'}
+      copyData={copyDataJSON()}
+      copyLabel="Copy chart data (JSON)"
+    >
+      <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 group ${
+        isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
+      }`}>
+        <Show when={params().title || exportEnabled()}>
+          <div class="flex items-center justify-between mb-3 flex-shrink-0">
             <Show when={params().title}>
               <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {params().title}
               </h3>
             </Show>
-            <Show when={params().exportable}>
+            <Show when={exportEnabled()}>
               <button
                 onClick={handleExportPNG}
                 class="opacity-0 group-hover:opacity-60 hover:!opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"
@@ -234,8 +250,14 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
         </Show>
 
         <div
-          class="w-full"
-          style={{ height: params().height || '250px', display: error() ? 'none' : 'block' }}
+          class={`w-full ${isExpanded() ? 'flex-1 min-h-0' : ''}`}
+          style={
+            error()
+              ? { display: 'none' }
+              : isExpanded()
+                ? { height: '100%', display: 'block' }
+                : { height: params().height || '250px', display: 'block' }
+          }
         >
           <canvas ref={canvasRef} />
         </div>

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/ExpandableWrapper.tsx

@@ -187,8 +187,13 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
                 </div>
               </div>
 
-              {/* Modal slot — content is reparented here when expanded */}
-              <div class="flex-1 overflow-auto p-4" ref={modalSlotRef} />
+              {/* Modal slot — content is reparented here when expanded.
+                  v6.1.0 : `flex flex-col` lets aware children opt into
+                  `flex-1 min-h-0` to fill the modal vertically (chart,
+                  table, map, graph). Unaware children keep working
+                  thanks to `overflow-auto` (their natural height
+                  scrolls if it overflows the slot). */}
+              <div class="flex-1 min-h-0 overflow-auto p-4 flex flex-col" ref={modalSlotRef} />
             </div>
           </div>
 

package/src/components/GraphRenderer.tsx

@@ -21,7 +21,7 @@
 import { Component, createSignal, onCleanup, onMount, Show, For } from 'solid-js'
 import type { UIComponent } from '../types'
 import type { GraphComponentParams, GraphLayout, GraphNode, GraphEdge } from '@seed-ship/mcp-ui-spec'
-import { ExpandableWrapper } from './ExpandableWrapper'
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 
 // Module-scoped lazy import promise — first call triggers the dynamic
 // import, subsequent calls reuse the resolved module.
@@ -139,6 +139,7 @@ function downloadBlob(content: string | Blob, filename: string, mimeType?: strin
 
 export const GraphRenderer: Component<{ component: UIComponent }> = (props) => {
   const params = () => props.component.params as GraphComponentParams
+  const isExpanded = useExpanded()
   const [available, setAvailable] = createSignal<boolean | null>(null)
   const [error, setError] = createSignal<string | undefined>()
   const [exportMenuOpen, setExportMenuOpen] = createSignal(false)
@@ -264,7 +265,9 @@ export const GraphRenderer: Component<{ component: UIComponent }> = (props) => {
         copyData={toJSON(params())}
         copyLabel="Copy graph (JSON)"
       >
-        <div class={`relative w-full ${params().className ?? ''}`}>
+        <div class={`relative w-full ${params().className ?? ''} ${
+          isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
+        }`}>
           {/* Export menu — top-right, mirrors TableRenderer's pattern */}
           <div class="absolute right-2 top-2 z-10">
             <button
@@ -301,8 +304,14 @@ export const GraphRenderer: Component<{ component: UIComponent }> = (props) => {
 
           <div
             ref={containerRef}
-            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
-            style={`height: ${params().height ?? '400px'}; width: ${params().width ?? '100%'};`}
+            class={`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' : ''
+            }`}
+            style={
+              isExpanded()
+                ? `height: 100%; width: ${params().width ?? '100%'};`
+                : `height: ${params().height ?? '400px'}; width: ${params().width ?? '100%'};`
+            }
           />
           <Show when={error()}>
             <p class="text-xs text-red-600 dark:text-red-400 mt-1">Render error: {error()}</p>

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/UIResourceRenderer.fluidity.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * v6.1.0 fluidity defaults tests :
+ *   - Table search input visible by default (was opt-in via searchable: true
+ *     OR auto when rows > 10).
+ *   - Table search hidden when explicitly opted out (searchable: false).
+ *   - Chart export button visible by default (was opt-in via
+ *     exportable: true).
+ *   - Chart export button hidden when explicitly opted out
+ *     (exportable: false).
+ *
+ * Responsive expanded-mode tests are NOT here — they require simulating a
+ * click on the expand button + asserting on the modal Portal subtree,
+ * which the existing harness handles less cleanly. Manual verification
+ * confirmed via the dev playground.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, cleanup } from '@solidjs/testing-library'
+import { UIResourceRenderer } from './UIResourceRenderer'
+import type { UIComponent } from '../types'
+
+describe('Table — search input default-on (v6.1.0)', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  function tableComponent(rows: Array<Record<string, unknown>>, params: Record<string, unknown> = {}): UIComponent {
+    return {
+      id: 'tbl',
+      type: 'table',
+      position: { colStart: 1, colSpan: 12 },
+      params: {
+        columns: [
+          { key: 'name', label: 'Name' },
+          { key: 'value', label: 'Value' },
+        ],
+        rows,
+        ...params,
+      } as any,
+    }
+  }
+
+  it('shows the search input by default on a SMALL table (was hidden before v6.1.0 unless > 10 rows)', () => {
+    const rows = Array.from({ length: 3 }, (_, i) => ({ name: `n${i}`, value: i }))
+    const { container } = render(() => <UIResourceRenderer content={tableComponent(rows)} />)
+    const input = container.querySelector('input[placeholder*="Recherche"]')
+    expect(input).toBeTruthy()
+  })
+
+  it('still shows the search input on a LARGE table', () => {
+    const rows = Array.from({ length: 50 }, (_, i) => ({ name: `n${i}`, value: i }))
+    const { container } = render(() => <UIResourceRenderer content={tableComponent(rows)} />)
+    expect(container.querySelector('input[placeholder*="Recherche"]')).toBeTruthy()
+  })
+
+  it('hides the search input when searchable: false is explicit (backward-compat opt-out)', () => {
+    const rows = Array.from({ length: 50 }, (_, i) => ({ name: `n${i}`, value: i }))
+    const { container } = render(() => (
+      <UIResourceRenderer content={tableComponent(rows, { searchable: false })} />
+    ))
+    expect(container.querySelector('input[placeholder*="Recherche"]')).toBeNull()
+  })
+})
+
+describe('Chart (iframe path) — exportable default (v6.1.0)', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  // Note : the native ChartJSRenderer path can't be tested here because
+  // chart.js is a peer-optional and even when it loads in vitest, the
+  // canvas API isn't supported in jsdom. We exercise the iframe-fallback
+  // path instead, which is also gated by the same `exportable` prop in
+  // its own renderer (UIResourceRenderer's ChartRenderer iframe branch).
+  // The export-button gating is uniform across both paths.
+
+  function chartComponent(params: Record<string, unknown> = {}): UIComponent {
+    return {
+      id: 'cht',
+      type: 'chart',
+      position: { colStart: 1, colSpan: 12 },
+      params: {
+        type: 'bar',
+        title: 'Sales',
+        data: { labels: ['A'], datasets: [{ label: 'X', data: [1] }] },
+        renderer: 'iframe', // force iframe path so we don't hit chart.js peer
+        ...params,
+      } as any,
+    }
+  }
+
+  it('renders chart without throwing when exportable is undefined', () => {
+    expect(() => render(() => <UIResourceRenderer content={chartComponent()} />)).not.toThrow()
+  })
+
+  it('renders chart without throwing when exportable: false', () => {
+    expect(() =>
+      render(() => <UIResourceRenderer content={chartComponent({ exportable: false })} />)
+    ).not.toThrow()
+  })
+})

package/src/components/UIResourceRenderer.tsx

@@ -547,7 +547,13 @@ function TableRenderer(props: {
   const [debouncedQuery, setDebouncedQuery] = createSignal('')
   let searchTimer: ReturnType<typeof setTimeout> | null = null
 
-  const isSearchable = () => tableParams.searchable === true || (tableParams.searchable !== false && allRows().length > 10)
+  // v6.1.0 — search visibility :
+  //   - undefined / true → always shown (new default, was conditional on >10 rows)
+  //   - false            → hidden (explicit opt-out, unchanged)
+  // Rationale: even small tables benefit from search in a chat / dashboard
+  // context where users scan many tables across messages. Backward-compat
+  // for anyone who explicitly disabled.
+  const isSearchable = () => tableParams.searchable !== false
   const searchPlaceholder = () => tableParams.searchPlaceholder || 'Rechercher dans le tableau...'
 
   const handleSearch = (value: string) => {
@@ -813,7 +819,9 @@ function TableRenderer(props: {
 
   return (
     <ExpandableWrapper title={tableParams.title || 'Table'} copyData={getTableCSV()} copyLabel="Copy table (CSV)">
-      <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 group ${isExpanded() ? '' : 'h-full'}`}>
+      <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 group ${
+        isExpanded() ? 'flex-1 min-h-0 flex flex-col' : 'h-full'
+      }`}>
         <Show when={exportable} fallback={<CopyButton getText={getTableCSV} title="Copy table (CSV)" position="top-right" />}>
           <div class="absolute right-10 top-2 z-10">
             <button
@@ -841,9 +849,9 @@ function TableRenderer(props: {
             </Show>
           </div>
         </Show>
-        <div class="p-4">
+        <div class={`p-4 ${isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''}`}>
           <Show when={tableParams.title}>
-            <h3 id={`${tableId}-title`} class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
+            <h3 id={`${tableId}-title`} class="text-sm font-semibold text-gray-900 dark:text-white mb-3 flex-shrink-0">
               {tableParams.title}
               <Show when={isVirtualizing()}>
                 <span class="ml-2 text-xs font-normal text-gray-400">(virtualized: {tableParams.rows?.length} rows)</span>
@@ -880,12 +888,18 @@ function TableRenderer(props: {
 
           <div
             ref={scrollContainerRef}
-            class="overflow-x-auto"
+            class={`overflow-x-auto ${isExpanded() ? 'flex-1 min-h-0' : ''}`}
             style={
-              isVirtualizing()
-                ? { 'max-height': '500px', 'overflow-y': 'auto' }
-                : !isExpanded() && clientVisibleRows().length > 8
-                  ? { 'max-height': '400px', 'overflow-y': 'auto' }
+              // v6.1.0 — when expanded, the scroll container fills the
+              // remaining vertical space (flex-1 + min-h-0 above) and
+              // scrolls internally instead of the modal scrolling. Inline
+              // mode keeps the previous max-height heuristic.
+              isExpanded()
+                ? { 'overflow-y': 'auto' }
+                : isVirtualizing()
+                  ? { 'max-height': '500px', 'overflow-y': 'auto' }
+                  : clientVisibleRows().length > 8
+                    ? { 'max-height': '400px', 'overflow-y': 'auto' }
                   : {}
             }
             role="region"