@seed-ship/mcp-ui-solid 6.17.0 → 6.18.0

package/src/components/ChartJSRenderer.tsx

@@ -8,12 +8,23 @@
  * ```
  */
 
-import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js';
+import {
+  Component,
+  For,
+  createEffect,
+  createMemo,
+  createUniqueId,
+  onCleanup,
+  createSignal,
+  Show,
+} from 'solid-js';
+import type { Accessor, JSX } from 'solid-js';
 import type { UIComponent, ChartComponentParams } from '../types';
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { DegradedFallback } from './DegradedFallback';
-import { chartToDegradedTable } from '../utils/degraded-projections';
+import { chartToDataTable } from './chart-data-table';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
+import { useMCPUIStrings } from '../context/MCPUIStringsContext';
 
 // Lazy load Chart.js to avoid bundling if not used
 let ChartJS: any = null;
@@ -67,6 +78,10 @@ export interface ChartJSRendererProps {
   toolbarVariant?: 'hover' | 'always-visible';
 }
 
+const ContextAwareChartLayout: Component<{
+  render: (isExpanded: Accessor<boolean>) => JSX.Element;
+}> = (props) => props.render(useExpanded());
+
 /**
  * Native Chart.js renderer component
  *
@@ -92,12 +107,17 @@ export interface ChartJSRendererProps {
 export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
   const [isLoading, setIsLoading] = createSignal(true);
   const [error, setError] = createSignal<string>();
+  const [activeView, setActiveView] = createSignal<'chart' | 'data'>('chart');
   let canvasRef: HTMLCanvasElement | undefined;
   let chartInstance: any;
+  let renderVersion = 0;
 
   const params = () => props.component.params as ChartComponentParams;
-  const isExpanded = useExpanded();
+  const tableData = createMemo(() => chartToDataTable(params()));
   const telemetry = useTelemetry();
+  const strings = useMCPUIStrings();
+  const descriptionId = createUniqueId();
+  const title = () => params().title || strings.chartView;
 
   // v6.1.0 — export visibility :
   //   - undefined / true  → button shown (new default, was opt-in)
@@ -124,6 +144,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
 
     // Access params to track dependencies
     const chartParams = params();
+    const version = ++renderVersion;
 
     setIsLoading(true);
     setError(undefined);
@@ -131,6 +152,9 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
     try {
       const Chart = await loadChartJS();
 
+      // A newer prop update or an unmount superseded this async render.
+      if (version !== renderVersion || !canvasRef) return;
+
       // Destroy previous instance
       if (chartInstance) {
         chartInstance.destroy();
@@ -180,6 +204,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
 
       setIsLoading(false);
     } catch (err) {
+      if (version !== renderVersion) return;
       const error = err instanceof Error ? err : new Error('Chart rendering failed');
       setError(error.message);
       setIsLoading(false);
@@ -196,8 +221,16 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
     }
   });
 
+  // Chart.js may measure a zero-sized canvas while the data view is visible.
+  // Resize once Solid has revealed it again.
+  createEffect(() => {
+    if (activeView() !== 'chart' || !chartInstance) return;
+    queueMicrotask(() => chartInstance?.resize?.());
+  });
+
   // Cleanup on unmount
   onCleanup(() => {
+    renderVersion += 1;
     if (chartInstance) {
       chartInstance.destroy();
       chartInstance = null;
@@ -206,25 +239,61 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
 
   return (
     <ExpandableWrapper
-      title={params().title || 'Chart'}
+      title={title()}
       copyData={copyDataJSON()}
       copyLabel="Copy chart data (JSON)"
       toolbarVariant={props.toolbarVariant}
     >
-      <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">
+      <ContextAwareChartLayout
+        render={(isExpanded) => (
+          <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' : ''
+            } ${params().className || ''}`}
+          >
+        <div class="flex items-center justify-between gap-3 mb-3 flex-shrink-0">
+          <div class="min-w-0">
             <Show when={params().title}>
               <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{params().title}</h3>
             </Show>
+          </div>
+          <div class="flex items-center gap-2">
+            <div
+              class="inline-flex rounded-md border border-gray-200 p-0.5 dark:border-gray-600"
+              role="group"
+              aria-label={strings.chartViewSelector}
+            >
+              <button
+                type="button"
+                aria-pressed={activeView() === 'chart'}
+                class={`rounded px-2 py-1 text-xs font-medium transition-colors ${
+                  activeView() === 'chart'
+                    ? 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900'
+                    : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+                }`}
+                onClick={() => setActiveView('chart')}
+              >
+                {strings.chartView}
+              </button>
+              <button
+                type="button"
+                aria-pressed={activeView() === 'data'}
+                class={`rounded px-2 py-1 text-xs font-medium transition-colors ${
+                  activeView() === 'data'
+                    ? 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900'
+                    : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+                }`}
+                onClick={() => setActiveView('data')}
+              >
+                {strings.chartDataView}
+              </button>
+            </div>
             <Show when={exportEnabled()}>
               <button
+                type="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"
+                disabled={activeView() !== 'chart' || isLoading() || Boolean(error())}
+                class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed 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"
               >
@@ -244,40 +313,106 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
               </button>
             </Show>
           </div>
-        </Show>
+        </div>
 
-        <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>
+        <p id={descriptionId} class="sr-only">
+          {title()}. {strings.chartDataSummary}
+        </p>
 
         {/* Fallback ladder (P2.5): degrade to a series table on render error
             instead of a bare "Chart Error" message. */}
-        <Show when={error()}>
+        <Show when={error() && activeView() === 'chart'}>
           <DegradedFallback
             message={`Chart rendering failed: ${error()}`}
             caption="Showing the chart data as a table — the interactive chart is unavailable."
-            {...chartToDegradedTable(params() ?? {})}
+            {...tableData()}
           />
         </Show>
 
+        <Show when={activeView() === 'data'}>
+          <div
+            class={`w-full overflow-auto rounded border border-gray-200 dark:border-gray-700 ${
+              isExpanded() ? 'flex-1 min-h-0' : ''
+            }`}
+            style={
+              isExpanded()
+                ? undefined
+                : { height: params().height || '250px', 'max-height': '70vh' }
+            }
+          >
+            <table class="w-full border-collapse text-left text-sm">
+              <caption class="sr-only">
+                {title()} — {strings.chartDataTable}
+              </caption>
+              <thead class="bg-gray-50 dark:bg-gray-900/40">
+                <tr>
+                  <For each={tableData().columns}>
+                    {(column) => (
+                      <th scope="col" class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">
+                        {column}
+                      </th>
+                    )}
+                  </For>
+                </tr>
+              </thead>
+              <tbody>
+                <For each={tableData().rows}>
+                  {(row) => (
+                    <tr class="border-t border-gray-100 dark:border-gray-700">
+                      <For each={tableData().columns}>
+                        {(_column, index) => (
+                          <td class="px-3 py-2 text-gray-700 dark:text-gray-300">
+                            {String(row[index()] ?? '')}
+                          </td>
+                        )}
+                      </For>
+                    </tr>
+                  )}
+                </For>
+                <Show when={tableData().rows.length === 0}>
+                  <tr>
+                    <td
+                      colSpan={Math.max(1, tableData().columns.length)}
+                      class="px-3 py-6 text-center text-gray-500 dark:text-gray-400"
+                    >
+                      {strings.chartNoData}
+                    </td>
+                  </tr>
+                </Show>
+              </tbody>
+            </table>
+          </div>
+        </Show>
+
         <div
-          class={`w-full ${isExpanded() ? 'flex-1 min-h-0' : ''}`}
+          class={`relative w-full ${isExpanded() ? 'flex-1 min-h-0' : ''}`}
           style={
-            error()
+            error() || activeView() === 'data'
               ? { display: 'none' }
               : isExpanded()
                 ? { height: '100%', display: 'block' }
                 : { height: params().height || '250px', display: 'block' }
           }
         >
-          <canvas ref={canvasRef} />
+          <canvas
+            ref={canvasRef}
+            role="img"
+            aria-label={title()}
+            aria-describedby={descriptionId}
+            aria-hidden={activeView() !== 'chart' || Boolean(error())}
+          />
+          <Show when={isLoading() && activeView() === 'chart'}>
+            <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>
         </div>
-      </div>
+          </div>
+        )}
+      />
     </ExpandableWrapper>
   );
 };

package/src/components/ChatPrompt.test.tsx

@@ -6,7 +6,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, fireEvent, cleanup } from '@solidjs/testing-library'
 import { ChatPrompt } from './ChatPrompt'
-import type { ChatPromptConfig, ChatPromptResponse } from '../types/chat-bus'
+import type { ChatPromptConfig } from '../types/chat-bus'
 
 describe('ChatPrompt', () => {
   beforeEach(() => cleanup())

package/src/components/ComponentToolbar.tsx

@@ -3,7 +3,7 @@
  * v2.2.5: Consistent icon set, position, and hover behavior across all components
  */
 
-import { Component, For, Show, createSignal } from 'solid-js'
+import { Component, For, createSignal } from 'solid-js'
 
 /** SVG icon paths for toolbar actions */
 const ICONS = {

package/src/components/EditableLayoutContext.tsx

@@ -0,0 +1,12 @@
+/** Private context: editor canvases must keep authored grid positions. */
+import { createContext, useContext, type ParentComponent } from 'solid-js'
+
+const EditableLayoutContext = createContext(false)
+
+export const EditableLayoutProvider: ParentComponent = (props) => (
+  <EditableLayoutContext.Provider value={true}>{props.children}</EditableLayoutContext.Provider>
+)
+
+export function useEditableLayoutPositions(): boolean {
+  return useContext(EditableLayoutContext)
+}

package/src/components/EditableUIResourceRenderer.tsx

@@ -26,6 +26,7 @@ import { useDragDrop } from '../hooks/useDragDrop'
 import { useResize, ResizeEdge } from '../hooks/useResize'
 import { DraggableGridItem } from './DraggableGridItem'
 import { UIResourceRenderer } from './UIResourceRenderer'
+import { EditableLayoutProvider } from './EditableLayoutContext'
 
 /**
  * Props for EditableUIResourceRenderer
@@ -204,13 +205,14 @@ export const EditableUIResourceRenderer: Component<EditableUIResourceRendererPro
   }
 
   return (
-    <div class={`w-full editable-ui-renderer ${props.class || ''}`}>
-      <div
-        ref={setGridContainerRef}
-        class="grid relative"
-        style={gridContainerStyle()}
-        data-grid-container
-      >
+    <EditableLayoutProvider>
+      <div class={`w-full editable-ui-renderer ${props.class || ''}`}>
+        <div
+          ref={setGridContainerRef}
+          class="grid relative"
+          style={gridContainerStyle()}
+          data-grid-container
+        >
         {/* Grid overlay */}
         <GridOverlay
           columns={props.layout.grid.columns}
@@ -260,8 +262,9 @@ export const EditableUIResourceRenderer: Component<EditableUIResourceRendererPro
             )
           }}
         </For>
+        </div>
       </div>
-    </div>
+    </EditableLayoutProvider>
   )
 }
 

package/src/components/ElicitationForm.tsx

@@ -78,7 +78,7 @@ export const ElicitationForm: Component<ElicitationFormProps> = (props) => {
 
   const handleSubmit = (response: ChatPromptResponse): void => {
     if (response.dismissed) {
-      ;(props.onDecline ?? props.onCancel)?.()
+      (props.onDecline ?? props.onCancel)?.()
       return
     }
     props.onAccept(extractContent(response, props.event))

package/src/components/FeedbackInline.tsx

@@ -84,7 +84,7 @@ export const FeedbackInline: Component<FeedbackInlineProps> = (props) => {
       // swallow it — feedback is best-effort by design.
       const result = props.onSubmit(value, props.context)
       if (result && typeof (result as Promise<void>).catch === 'function') {
-        ;(result as Promise<void>).catch(() => {
+        (result as Promise<void>).catch(() => {
           /* non-blocking */
         })
       }

package/src/components/GraphRenderer.test.tsx

@@ -16,14 +16,13 @@
  */
 
 import { describe, it, expect, beforeEach } from 'vitest'
-import { render, cleanup, waitFor } from '@solidjs/testing-library'
+import { cleanup, waitFor } from '@solidjs/testing-library'
 import {
   graphToMermaid,
   graphToJSON,
   isG6Available,
   GraphRenderer,
 } from './GraphRenderer'
-import { UIResourceRenderer } from './UIResourceRenderer'
 import { validateComponent } from '../services/validation'
 import type { GraphComponentParams } from '@seed-ship/mcp-ui-spec'
 import type { UIComponent } from '../types'

package/src/components/GraphRenderer.tsx

@@ -23,8 +23,6 @@ import type { UIComponent } from '../types';
 import type {
   GraphComponentParams,
   GraphLayout,
-  GraphNode,
-  GraphEdge,
 } from '@seed-ship/mcp-ui-spec';
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { PortalDropdownMenu } from './PortalDropdownMenu';

package/src/components/GridRenderer.tsx

@@ -7,6 +7,7 @@
 import { Component, For, createMemo } from 'solid-js'
 import type { UIComponent, GridPosition } from '../types'
 import { useRenderContext } from './RenderContext'
+import { createResponsiveGrid } from '../hooks/createResponsiveGrid'
 
 /**
  * Parameters for GridRenderer component
@@ -87,6 +88,7 @@ function buildGridTemplateAreas(areas: string[][]): string {
  * Renders a CSS Grid container with nested UIComponents
  */
 export const GridRenderer: Component<GridRendererProps> = (props) => {
+  const responsiveGrid = createResponsiveGrid()
   // Use render context to avoid circular dependency
   const { renderComponent } = useRenderContext()
 
@@ -105,13 +107,13 @@ export const GridRenderer: Component<GridRendererProps> = (props) => {
   // Build grid container style
   const gridContainerStyle = createMemo(() => {
     const p = params()
-    let style = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`
+    let style = `display: grid; grid-template-columns: repeat(${responsiveGrid.stacked() ? 1 : p.columns}, minmax(0, 1fr)); gap: ${p.gap}`
 
     if (p.minRowHeight) {
       style += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`
     }
 
-    if (p.areas && p.areas.length > 0) {
+    if (!responsiveGrid.stacked() && p.areas && p.areas.length > 0) {
       style += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`
     }
 
@@ -124,11 +126,11 @@ export const GridRenderer: Component<GridRendererProps> = (props) => {
       data-component-type="grid"
       data-component-id={props.component.id}
     >
-      <div class="p-4 h-full" style={gridContainerStyle()}>
+      <div ref={responsiveGrid.ref} class="p-4 h-full" style={gridContainerStyle()} data-mcp-ui-grid data-mcp-ui-stacked={responsiveGrid.stacked()}>
         <For each={params().children}>
           {(child) => (
             <div
-              style={getGridItemStyle(child.position, params().areas)}
+              style={responsiveGrid.stacked() ? 'grid-column: 1 / -1; grid-row: auto' : getGridItemStyle(child.position, params().areas)}
               class="min-w-0 h-full"
             >
               {/* Use RenderContext for recursive rendering (avoids circular dependency) */}

package/src/components/MapRenderer.tsx

@@ -12,8 +12,6 @@ import type {
   MapClusterOptions,
   MapGeoJSONStyle,
   MapPopupConfig,
-  MapLayer,
-  MapPMTilesConfig,
 } from '../types';
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { DegradedFallback } from './DegradedFallback';
@@ -458,7 +456,6 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
         setPmtilesError(null);
         if (p?.pmtiles) {
           try {
-            // @ts-ignore — optional peer dependency, may not be installed
             const protomaps = await import(/* @vite-ignore */ 'protomaps-leaflet');
             const pmConfig = p.pmtiles;
 

package/src/components/PresentationFeedback.tsx

@@ -170,7 +170,7 @@ export const PresentationFeedback: Component<PresentationFeedbackProps> = (props
       // break the UI (mirrors FeedbackInline).
       const result = props.onSubmit(feedback)
       if (result && typeof (result as Promise<void>).catch === 'function') {
-        ;(result as Promise<void>).catch(() => {
+        (result as Promise<void>).catch(() => {
           /* non-blocking */
         })
       }

package/src/components/ResponsiveGrid.test.tsx

@@ -0,0 +1,166 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render } from '@solidjs/testing-library'
+import { createSignal } from 'solid-js'
+import { UIResourceRenderer } from './UIResourceRenderer'
+import { EditableUIResourceRenderer } from './EditableUIResourceRenderer'
+import { GridRenderer } from './GridRenderer'
+import { RenderProvider } from './RenderContext'
+import type { UIComponent, UILayout } from '../types'
+
+const observers: Array<{
+  callback: ResizeObserverCallback
+  element?: Element
+  disconnect: ReturnType<typeof vi.fn>
+}> = []
+
+function resize(element: Element, width: number) {
+  const observer = observers.find((item) => item.element === element)
+  expect(observer).toBeDefined()
+  observer!.callback([{ target: element, contentRect: { width } } as ResizeObserverEntry], {} as ResizeObserver)
+}
+
+function textComponent(id: string, colStart = 1, colSpan = 6): UIComponent {
+  return { id, type: 'text', position: { colStart, colSpan, rowStart: 2, rowSpan: 2 }, params: { content: id } }
+}
+
+function layout(): UILayout {
+  return { id: 'responsive-test', grid: { columns: 12, gap: '1rem' }, components: [textComponent('first'), textComponent('second', 7)] }
+}
+
+beforeEach(() => {
+  observers.length = 0
+  vi.stubGlobal('ResizeObserver', class {
+    item: typeof observers[number]
+    constructor(callback: ResizeObserverCallback) {
+      this.item = { callback, disconnect: vi.fn() }
+      observers.push(this.item)
+    }
+    observe(element: Element) { this.item.element = element }
+    disconnect() { this.item.disconnect() }
+  })
+})
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+})
+
+describe('responsive read-only grids', () => {
+  it('stacks inside a narrow container and restores explicit desktop positions without mutating input', () => {
+    const input = layout()
+    const original = JSON.stringify(input)
+    const { container } = render(() => <UIResourceRenderer content={input} />)
+    const grid = container.querySelector<HTMLElement>('[data-mcp-ui-grid]')!
+    const first = grid.children[0] as HTMLElement
+    const second = grid.children[1] as HTMLElement
+    expect(grid.style.gridTemplateColumns).toBe('repeat(12, minmax(0, 1fr))')
+    resize(grid, 420)
+    expect(grid.dataset.mcpUiStacked).toBe('true')
+    expect(grid.style.gridTemplateColumns).toBe('repeat(1, minmax(0, 1fr))')
+    expect(first.style.gridColumn).toBe('1 / -1')
+    expect(second.style.gridRow).toBe('auto')
+    expect(grid.textContent!.indexOf('first')).toBeLessThan(grid.textContent!.indexOf('second'))
+    resize(grid, 640)
+    expect(grid.dataset.mcpUiStacked).toBe('false')
+    expect(second.style.gridColumn).toBe('7 / span 6')
+    expect(second.style.gridRow).toBe('2 / span 2')
+    expect(JSON.stringify(input)).toBe(original)
+  })
+
+  it('uses the container width on initial mount, independently of the viewport', () => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({ width: 360 } as DOMRect)
+    const { container } = render(() => <UIResourceRenderer content={layout()} />)
+    expect(window.innerWidth).toBeGreaterThan(640)
+    expect(container.querySelector<HTMLElement>('[data-mcp-ui-grid]')!.dataset.mcpUiStacked).toBe('true')
+  })
+
+  it('does not switch on hidden or invalid observer measurements and disconnects on unmount', () => {
+    const { container, unmount } = render(() => <UIResourceRenderer content={layout()} />)
+    const grid = container.querySelector<HTMLElement>('[data-mcp-ui-grid]')!
+    resize(grid, 320)
+    for (const width of [0, -1, Number.NaN]) resize(grid, width)
+    expect(grid.dataset.mcpUiStacked).toBe('true')
+    const observer = observers.find((item) => item.element === grid)!
+    unmount()
+    expect(observer.disconnect).toHaveBeenCalledOnce()
+  })
+
+  it('keeps components without a position inside the configured column count', () => {
+    const input = layout()
+    input.grid.columns = 2
+    input.components = [{ id: 'unpositioned', type: 'text', params: { content: 'Full width' } } as UIComponent]
+    const { container } = render(() => <UIResourceRenderer content={input} />)
+    const grid = container.querySelector<HTMLElement>('[data-mcp-ui-grid]')!
+    expect((grid.children[0] as HTMLElement).style.gridColumn).toBe('1 / -1')
+  })
+
+  it('measures nested grids independently and removes named areas only while stacked', () => {
+    const input: UIComponent = {
+      id: 'nested', type: 'grid', position: { colStart: 1, colSpan: 12 },
+      params: { columns: 2, areas: [['left', 'right']], children: [textComponent('left', 1, 1), textComponent('right', 2, 1)] },
+    }
+    const { container } = render(() => (
+      <RenderProvider renderComponent={(component) => <span>{component.id}</span>}>
+        <GridRenderer component={input} />
+      </RenderProvider>
+    ))
+    const grid = container.querySelector<HTMLElement>('[data-mcp-ui-grid]')!
+    expect(grid.style.gridTemplateAreas).toBe('"left right"')
+    resize(grid, 500)
+    expect(grid.style.gridTemplateAreas).toBe('')
+    expect((grid.children[1] as HTMLElement).style.gridColumn).toBe('1 / -1')
+    resize(grid, 800)
+    expect(grid.style.gridTemplateAreas).toBe('"left right"')
+    expect((grid.children[1] as HTMLElement).style.gridColumn).toBe('2 / span 1')
+  })
+
+  it('updates layout components while retaining the narrow-container presentation', () => {
+    const [input, setInput] = createSignal(layout())
+    const { container } = render(() => <UIResourceRenderer content={input()} />)
+    const grid = container.querySelector<HTMLElement>('[data-mcp-ui-grid]')!
+    resize(grid, 400)
+    setInput({ ...layout(), components: [textComponent('replacement')] })
+    expect(grid.children.length).toBe(1)
+    expect(grid.textContent).toContain('replacement')
+    expect((grid.children[0] as HTMLElement).style.gridColumn).toBe('1 / -1')
+  })
+
+  it('falls back to window resize when ResizeObserver is unavailable and cleans up', () => {
+    vi.stubGlobal('ResizeObserver', undefined)
+    let width = 900
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({ width }) as DOMRect)
+    const removeListener = vi.spyOn(window, 'removeEventListener')
+    const { container, unmount } = render(() => <UIResourceRenderer content={layout()} />)
+    const grid = container.querySelector<HTMLElement>('[data-mcp-ui-grid]')!
+    width = 400
+    window.dispatchEvent(new Event('resize'))
+    expect(grid.dataset.mcpUiStacked).toBe('true')
+    unmount()
+    expect(removeListener).toHaveBeenCalledWith('resize', expect.any(Function))
+  })
+
+  it('keeps nested editor-grid coordinates below 640px while editing', () => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({ width: 420 } as DOMRect)
+    const nested: UIComponent = {
+      id: 'editor-nested', type: 'grid', position: { colStart: 1, colSpan: 12 },
+      params: { columns: 2, children: [textComponent('editor-left', 1, 1), textComponent('editor-right', 2, 1)] },
+    }
+    const editableLayout: UILayout = {
+      id: 'editor-layout', grid: { columns: 12, gap: '1rem' }, components: [nested],
+    }
+    const { container } = render(() => <EditableUIResourceRenderer layout={editableLayout} dragDrop={{ enabled: true }} />)
+    const nestedGrid = container.querySelector<HTMLElement>(
+      '[data-component-type="grid"][data-component-id="editor-nested"] > [data-mcp-ui-grid]'
+    )!
+    expect(nestedGrid.dataset.mcpUiStacked).toBe('false')
+    expect(nestedGrid.style.gridTemplateColumns).toBe('repeat(2, minmax(0, 1fr))')
+    expect((nestedGrid.children[1] as HTMLElement).style.gridColumn).toBe('2 / span 1')
+  })
+
+  it('keeps the disabled editor fallback responsive', () => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({ width: 420 } as DOMRect)
+    const { container } = render(() => <EditableUIResourceRenderer layout={layout()} />)
+    expect(container.querySelector<HTMLElement>('[data-mcp-ui-grid]')?.dataset.mcpUiStacked).toBe('true')
+  })
+})