@seed-ship/mcp-ui-solid 2.1.2 → 2.2.3

package/src/components/ChartJSRenderer.tsx

@@ -10,6 +10,7 @@
 
 import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'
 import type { UIComponent, ChartComponentParams } from '../types'
+import { ExpandableWrapper } from './ExpandableWrapper'
 
 // Lazy load Chart.js to avoid bundling if not used
 let ChartJS: any = null
@@ -87,6 +88,16 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
 
   const params = () => props.component.params as ChartComponentParams
 
+  // Chart PNG export
+  const handleExportPNG = () => {
+    if (!canvasRef) return
+    const url = canvasRef.toDataURL('image/png')
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${(params().title || 'chart').replace(/\s+/g, '-').toLowerCase()}.png`
+    a.click()
+  }
+
   // Create/update chart when params change
   createEffect(async () => {
     if (!canvasRef) return
@@ -143,52 +154,70 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
   })
 
   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"
+    <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">
+            <Show when={params().title}>
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
+                {params().title}
+              </h3>
+            </Show>
+            <Show when={params().exportable}>
+              <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"
+                title="Download PNG"
+                aria-label="Download chart as PNG"
               >
-                <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>
+                <svg class="w-3 h-3 text-gray-500 dark:text-gray-400" 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>
+            </Show>
+          </div>
+        </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>
-            <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>
+        </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
+          class="w-full"
+          style={{ height: params().height || '250px', display: error() ? 'none' : 'block' }}
+        >
+          <canvas ref={canvasRef} />
+        </div>
       </div>
-    </div>
+    </ExpandableWrapper>
   )
 }

package/src/components/CodeBlockRenderer.tsx

@@ -7,6 +7,7 @@
 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'
 
 // Lazy load highlight.js
 let hljs: any = null
@@ -30,6 +31,7 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
     const [isCopied, setIsCopied] = createSignal(false)
     const [isHljsLoaded, setIsHljsLoaded] = createSignal(false)
     const [activeTheme, setActiveTheme] = createSignal<'light' | 'dark'>('dark')
+    const [wordWrap, setWordWrap] = createSignal(false)
 
     const params = () => props.params || (props.component?.params as CodeComponentParams)
 
@@ -143,28 +145,43 @@ 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">
             {/* 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={
+                <div class="flex items-center gap-2">
+                    {/* Word wrap toggle */}
+                    <button
+                        onClick={() => setWordWrap(!wordWrap())}
+                        class={`focus:outline-none transition-colors ${wordWrap() ? 'text-blue-500 dark:text-blue-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
+                        aria-label="Toggle word wrap"
+                        title={wordWrap() ? 'Disable word wrap' : 'Enable word wrap'}
+                    >
                         <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" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4" />
                         </svg>
-                    </Show>
-                </button>
+                    </button>
+                    {/* Copy button */}
+                    <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>
             </div>
 
             {/* Code Area */}
@@ -184,6 +201,7 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                 {/* 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"
+                    style={wordWrap() ? { 'white-space': 'pre-wrap', 'word-break': 'break-all' } : {}}
                     data-theme={activeTheme()}
                 >
                     <code
@@ -193,5 +211,6 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                 </pre>
             </div>
         </div>
+        </ExpandableWrapper>
     )
 }

package/src/components/ExpandableWrapper.test.tsx

@@ -0,0 +1,229 @@
+/**
+ * Tests for ExpandableWrapper component
+ * P1: Expand/fullscreen for tables, charts, code
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, fireEvent, cleanup } from '@solidjs/testing-library'
+import { ExpandableWrapper } from './ExpandableWrapper'
+
+// Mock Portal to render inline for testing
+vi.mock('solid-js/web', async () => {
+  const actual = await vi.importActual('solid-js/web') as any
+  return {
+    ...actual,
+    Portal: (props: any) => props.children,
+  }
+})
+
+describe('ExpandableWrapper', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  it('renders children inline', () => {
+    const { getByText } = render(() => (
+      <ExpandableWrapper title="Test">
+        <div>Hello World</div>
+      </ExpandableWrapper>
+    ))
+
+    expect(getByText('Hello World')).toBeDefined()
+  })
+
+  it('shows expand button on render', () => {
+    const { getByLabelText } = render(() => (
+      <ExpandableWrapper title="Test">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    expect(getByLabelText('Expand to fullscreen')).toBeDefined()
+  })
+
+  it('opens modal when expand button is clicked', async () => {
+    const { getByLabelText, getByRole } = render(() => (
+      <ExpandableWrapper title="Test Title">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    const expandBtn = getByLabelText('Expand to fullscreen')
+    fireEvent.click(expandBtn)
+
+    // Modal dialog should appear
+    const dialog = getByRole('dialog')
+    expect(dialog).toBeDefined()
+  })
+
+  it('displays title in expanded modal header', async () => {
+    const { getByLabelText, getByText } = render(() => (
+      <ExpandableWrapper title="Sales Data">
+        <div>Table content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+
+    // Title should be visible in the modal header
+    expect(getByText('Sales Data')).toBeDefined()
+  })
+
+  it('closes modal when close button is clicked', async () => {
+    const { getByLabelText, queryByRole } = render(() => (
+      <ExpandableWrapper title="Test">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    // Open
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+    expect(queryByRole('dialog')).not.toBeNull()
+
+    // Close
+    fireEvent.click(getByLabelText('Close expanded view'))
+
+    // Dialog should be gone
+    expect(queryByRole('dialog')).toBeNull()
+  })
+
+  it('closes modal on Escape key', async () => {
+    const { getByLabelText, queryByRole } = render(() => (
+      <ExpandableWrapper title="Test">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+    expect(queryByRole('dialog')).not.toBeNull()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(queryByRole('dialog')).toBeNull()
+  })
+
+  it('shows copy button when copyData is provided', async () => {
+    const { getByLabelText } = render(() => (
+      <ExpandableWrapper title="Test" copyData="some data" copyLabel="Copy TSV">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+
+    expect(getByLabelText('Copy TSV')).toBeDefined()
+  })
+
+  it('does not show copy button when no copyData', async () => {
+    const { getByLabelText, queryByLabelText } = render(() => (
+      <ExpandableWrapper title="Test">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+
+    expect(queryByLabelText('Copy to clipboard')).toBeNull()
+  })
+
+  it('copies data to clipboard when copy button is clicked', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.assign(navigator, { clipboard: { writeText } })
+
+    const testData = `col1\tcol2\nval1\tval2`
+    const { getByLabelText } = render(() => (
+      <ExpandableWrapper title="Test" copyData={testData}>
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+    fireEvent.click(getByLabelText('Copy to clipboard'))
+
+    expect(writeText).toHaveBeenCalledWith(testData)
+  })
+
+  it('uses default title "Expanded View" when no title provided', async () => {
+    const { getByLabelText, getByText } = render(() => (
+      <ExpandableWrapper>
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+
+    expect(getByText('Expanded View')).toBeDefined()
+  })
+
+  it('expanded content area is scrollable (overflow-auto)', async () => {
+    const { getByLabelText, getByRole } = render(() => (
+      <ExpandableWrapper title="Scrollable Table">
+        <div style={{ height: '2000px' }}>Tall content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+
+    const dialog = getByRole('dialog')
+    // Content area inside the modal panel should have overflow-auto
+    const contentArea = dialog.querySelector('.overflow-auto')
+    expect(contentArea).not.toBeNull()
+    expect(contentArea!.classList.contains('overflow-auto')).toBe(true)
+  })
+
+  it('closes modal on backdrop click', async () => {
+    const { getByLabelText, getByRole, queryByRole } = render(() => (
+      <ExpandableWrapper title="Test">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+    const dialog = getByRole('dialog')
+    expect(dialog).toBeDefined()
+
+    // Click directly on the backdrop (the dialog element itself, not the inner panel)
+    fireEvent.click(dialog)
+
+    expect(queryByRole('dialog')).toBeNull()
+  })
+
+  it('has dark theme classes on modal elements', async () => {
+    const { getByLabelText, getByRole } = render(() => (
+      <ExpandableWrapper title="Dark Theme Test">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+
+    const dialog = getByRole('dialog')
+    // Modal panel should have dark mode background class
+    const panel = dialog.querySelector('.dark\\:bg-gray-800')
+    expect(panel).not.toBeNull()
+
+    // Header title should have dark mode text class
+    const title = dialog.querySelector('.dark\\:text-white')
+    expect(title).not.toBeNull()
+
+    // Header border should have dark mode class
+    const header = dialog.querySelector('.dark\\:border-gray-700')
+    expect(header).not.toBeNull()
+  })
+
+  it('prevents body scroll when expanded', async () => {
+    const { getByLabelText } = render(() => (
+      <ExpandableWrapper title="Test">
+        <div>Content</div>
+      </ExpandableWrapper>
+    ))
+
+    const originalOverflow = document.body.style.overflow
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'))
+    expect(document.body.style.overflow).toBe('hidden')
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(document.body.style.overflow).toBe(originalOverflow)
+  })
+})

package/src/components/ExpandableWrapper.tsx

@@ -0,0 +1,201 @@
+/**
+ * ExpandableWrapper - Generic expand/fullscreen wrapper for components
+ * v2.2.0: Reusable wrapper that adds expand button + fullscreen modal
+ *
+ * Uses DOM reparenting to avoid rendering children twice — critical for
+ * imperative components like ChartJS that bind instances to DOM nodes.
+ */
+
+import { Component, Show, createSignal, createEffect, onCleanup, JSX } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+export interface ExpandableWrapperProps {
+  /** Content to render inline (and in expanded view) */
+  children: JSX.Element
+  /** Title shown in the expanded modal header */
+  title?: string
+  /** Data string for copy-to-clipboard in expanded view */
+  copyData?: string
+  /** Label for copy button tooltip */
+  copyLabel?: string
+}
+
+/**
+ * Wraps any component with an expand button (top-right corner).
+ * Opens a fullscreen Portal modal. The children's DOM is physically
+ * reparented into the modal (not duplicated), so imperative bindings
+ * like Chart.js canvas refs stay intact.
+ *
+ * @example
+ * <ExpandableWrapper title="Sales Data" copyData={tsvData}>
+ *   <TableRenderer ... />
+ * </ExpandableWrapper>
+ */
+export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
+  const [isExpanded, setIsExpanded] = createSignal(false)
+  const [copied, setCopied] = createSignal(false)
+  let dialogRef: HTMLDivElement | undefined
+  let contentRef: HTMLDivElement | undefined
+  let inlineSlotRef: HTMLDivElement | undefined
+  let modalSlotRef: HTMLDivElement | undefined
+
+  const handleOpen = () => setIsExpanded(true)
+  const handleClose = () => setIsExpanded(false)
+
+  // Reparent content DOM between inline and modal slots
+  createEffect(() => {
+    if (!contentRef) return
+
+    if (isExpanded()) {
+      // Move content into modal
+      modalSlotRef?.appendChild(contentRef)
+    } else {
+      // Move content back to inline
+      inlineSlotRef?.appendChild(contentRef)
+    }
+  })
+
+  // Keyboard: Escape to close
+  createEffect(() => {
+    if (!isExpanded()) return
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        handleClose()
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown)
+    onCleanup(() => document.removeEventListener('keydown', onKeyDown))
+  })
+
+  // Prevent body scroll when expanded
+  createEffect(() => {
+    if (isExpanded()) {
+      const prev = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+      // Focus the dialog
+      setTimeout(() => dialogRef?.focus(), 10)
+      onCleanup(() => {
+        document.body.style.overflow = prev
+      })
+    }
+  })
+
+  const handleBackdropClick = (e: MouseEvent) => {
+    if (e.target === e.currentTarget) handleClose()
+  }
+
+  const handleCopy = async () => {
+    if (!props.copyData) return
+    try {
+      await navigator.clipboard.writeText(props.copyData)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  return (
+    <div class="relative group">
+      {/* Inline slot — content lives here when not expanded */}
+      <div ref={inlineSlotRef}>
+        <div ref={contentRef}>
+          {props.children}
+        </div>
+      </div>
+
+      {/* Expand button — visible on hover */}
+      <button
+        onClick={handleOpen}
+        class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-70 hover:!opacity-100 p-1.5 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"
+        title="Expand"
+        aria-label="Expand to fullscreen"
+      >
+        <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+        </svg>
+      </button>
+
+      {/* Fullscreen modal via Portal */}
+      <Show when={isExpanded()}>
+        <Portal>
+          <div
+            class="fixed inset-0 z-50 flex flex-col bg-black/50 backdrop-blur-sm"
+            style={{ animation: 'expandable-fade-in 0.15s ease-out' }}
+            onClick={handleBackdropClick}
+            role="dialog"
+            aria-modal="true"
+            aria-label={props.title || 'Expanded view'}
+            tabIndex={-1}
+            ref={dialogRef}
+          >
+            {/* Modal panel */}
+            <div
+              class="relative flex flex-col m-4 flex-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden"
+              style={{ animation: 'expandable-scale-in 0.15s ease-out' }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Header */}
+              <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white truncate">
+                  {props.title || 'Expanded View'}
+                </h2>
+                <div class="flex items-center gap-2">
+                  {/* Copy button */}
+                  <Show when={props.copyData}>
+                    <button
+                      onClick={handleCopy}
+                      class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                      title={props.copyLabel || 'Copy to clipboard'}
+                      aria-label={props.copyLabel || 'Copy to clipboard'}
+                    >
+                      <Show
+                        when={!copied()}
+                        fallback={
+                          <svg class="w-5 h-5 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>
+                        }
+                      >
+                        <svg class="w-5 h-5" 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>
+                      </Show>
+                    </button>
+                  </Show>
+                  {/* Close button */}
+                  <button
+                    onClick={handleClose}
+                    class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                    aria-label="Close expanded view"
+                  >
+                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              {/* Modal slot — content is reparented here when expanded */}
+              <div class="flex-1 overflow-auto p-4" ref={modalSlotRef} />
+            </div>
+          </div>
+
+          <style>{`
+            @keyframes expandable-fade-in {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }
+            @keyframes expandable-scale-in {
+              from { opacity: 0; transform: scale(0.97); }
+              to { opacity: 1; transform: scale(1); }
+            }
+          `}</style>
+        </Portal>
+      </Show>
+    </div>
+  )
+}