@seed-ship/mcp-ui-solid 6.3.1 → 6.5.0

package/src/components/GraphRenderer.tsx

@@ -22,6 +22,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, useExpanded } from './ExpandableWrapper'
+import { PortalDropdownMenu } from './PortalDropdownMenu'
 
 // Module-scoped lazy import promise — first call triggers the dynamic
 // import, subsequent calls reuse the resolved module.
@@ -153,6 +154,8 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
   const [error, setError] = createSignal<string | undefined>()
   const [exportMenuOpen, setExportMenuOpen] = createSignal(false)
   let containerRef: HTMLDivElement | undefined
+  // v6.4.0 — trigger ref consumed by <PortalDropdownMenu> for positioning
+  let exportTriggerRef: HTMLButtonElement | undefined
   // Loosely typed because G6 is a peer-optional — we don't pull its
   // types into the bundle just to type a transient local handle.
   let graphInstance: any | undefined
@@ -281,35 +284,41 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
           {/* Export menu — top-right, mirrors TableRenderer's pattern */}
           <div class="absolute right-2 top-2 z-10">
             <button
+              ref={exportTriggerRef}
               type="button"
               onClick={() => setExportMenuOpen((v) => !v)}
               class="px-2 py-1 text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
               title="Export graph"
               aria-label="Export graph"
+              aria-haspopup="menu"
               aria-expanded={exportMenuOpen()}
             >
               Export ▾
             </button>
-            <Show when={exportMenuOpen()}>
-              <div class="absolute right-0 mt-1 w-44 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded shadow-lg text-xs">
-                <For each={[
-                  { label: 'Download PNG', onClick: handleExportPNG, hint: 'visual snapshot' },
-                  { label: 'Download Mermaid', onClick: handleExportMermaid, hint: 'markdown / GitHub' },
-                  { label: 'Download JSON', onClick: handleExportJSON, hint: 'raw data' },
-                ]}>
-                  {(item) => (
-                    <button
-                      type="button"
-                      onClick={item.onClick}
-                      class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700 last:border-b-0"
-                    >
-                      <div class="font-medium">{item.label}</div>
-                      <div class="text-[10px] text-gray-500 dark:text-gray-400">{item.hint}</div>
-                    </button>
-                  )}
-                </For>
-              </div>
-            </Show>
+            <PortalDropdownMenu
+              open={exportMenuOpen()}
+              onClose={() => setExportMenuOpen(false)}
+              trigger={exportTriggerRef}
+              width={176}
+              class="text-xs"
+            >
+              <For each={[
+                { label: 'Download PNG', onClick: handleExportPNG, hint: 'visual snapshot' },
+                { label: 'Download Mermaid', onClick: handleExportMermaid, hint: 'markdown / GitHub' },
+                { label: 'Download JSON', onClick: handleExportJSON, hint: 'raw data' },
+              ]}>
+                {(item) => (
+                  <button
+                    type="button"
+                    onClick={item.onClick}
+                    class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700 last:border-b-0"
+                  >
+                    <div class="font-medium">{item.label}</div>
+                    <div class="text-[10px] text-gray-500 dark:text-gray-400">{item.hint}</div>
+                  </button>
+                )}
+              </For>
+            </PortalDropdownMenu>
           </div>
 
           <div

package/src/components/PortalDropdownMenu.test.tsx

@@ -0,0 +1,113 @@
+/**
+ * v6.4.0 — Portal-mounted dropdown for table + graph Export menus.
+ *
+ * Coverage targets :
+ *   1. Menu mounts via <Portal> on document.body (not in trigger's parent)
+ *   2. Menu position is computed from the trigger's getBoundingClientRect
+ *   3. Click outside the menu closes it
+ *   4. Escape key closes it
+ *   5. Click on the trigger itself does not close (parent owns toggle)
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, fireEvent, cleanup } from '@solidjs/testing-library'
+import { createSignal } from 'solid-js'
+import { PortalDropdownMenu } from './PortalDropdownMenu'
+
+describe('PortalDropdownMenu (v6.4.0)', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  function harness(initiallyOpen = true) {
+    const [open, setOpen] = createSignal(initiallyOpen)
+    let triggerRef: HTMLButtonElement | undefined
+    const result = render(() => (
+      <div id="harness-root">
+        <button ref={triggerRef} onClick={() => setOpen((v) => !v)}>
+          Open
+        </button>
+        <PortalDropdownMenu
+          open={open()}
+          onClose={() => setOpen(false)}
+          trigger={triggerRef}
+          width={144}
+        >
+          <button data-testid="menu-item">Item 1</button>
+        </PortalDropdownMenu>
+      </div>
+    ))
+    return { ...result, getOpen: open, setOpen, getTrigger: () => triggerRef }
+  }
+
+  it('mounts the menu on document.body, NOT inside the trigger parent', () => {
+    const { container } = harness(true)
+    // Menu should NOT be inside the harness root (it's portaled to body)
+    const harnessRoot = container.querySelector('#harness-root')
+    expect(harnessRoot).toBeTruthy()
+    expect(harnessRoot!.querySelector('[data-testid="menu-item"]')).toBeNull()
+    // But it IS in document.body
+    const menuItem = document.body.querySelector('[data-testid="menu-item"]')
+    expect(menuItem).toBeTruthy()
+  })
+
+  it('does not render the menu when open=false', () => {
+    harness(false)
+    expect(document.body.querySelector('[data-testid="menu-item"]')).toBeNull()
+  })
+
+  it('positions the menu using the trigger getBoundingClientRect (right-aligned, 4px below)', () => {
+    // Stub the trigger rect so we get deterministic coords in jsdom
+    const fakeRect = {
+      top: 100, bottom: 130, left: 200, right: 350,
+      width: 150, height: 30, x: 200, y: 100, toJSON: () => ({}),
+    } as DOMRect
+    // Patch getBoundingClientRect on HTMLElement.prototype just for this test
+    const orig = HTMLElement.prototype.getBoundingClientRect
+    HTMLElement.prototype.getBoundingClientRect = vi.fn(() => fakeRect)
+    try {
+      harness(true)
+      const menu = document.body.querySelector('[role="menu"]') as HTMLElement
+      expect(menu).toBeTruthy()
+      // Position: top = bottom + 4 = 134, left = right - width = 350 - 144 = 206
+      expect(menu.style.top).toBe('134px')
+      expect(menu.style.left).toBe('206px')
+      expect(menu.style.position).toBe('fixed')
+    } finally {
+      HTMLElement.prototype.getBoundingClientRect = orig
+    }
+  })
+
+  it('closes on outside click (mousedown on document.body outside menu)', () => {
+    const { getOpen } = harness(true)
+    expect(getOpen()).toBe(true)
+    // Click on a brand-new element appended to body, outside the menu
+    const stranger = document.createElement('div')
+    document.body.appendChild(stranger)
+    fireEvent.mouseDown(stranger)
+    expect(getOpen()).toBe(false)
+    document.body.removeChild(stranger)
+  })
+
+  it('closes on Escape', () => {
+    const { getOpen } = harness(true)
+    expect(getOpen()).toBe(true)
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(getOpen()).toBe(false)
+  })
+
+  it('does not close when mousedown lands on the trigger (parent owns toggle)', () => {
+    const { getOpen, getTrigger } = harness(true)
+    expect(getOpen()).toBe(true)
+    fireEvent.mouseDown(getTrigger()!)
+    // Menu should still be open — trigger toggle is parent's responsibility
+    expect(getOpen()).toBe(true)
+  })
+
+  it('does not close when mousedown lands inside the menu', () => {
+    const { getOpen } = harness(true)
+    const item = document.body.querySelector('[data-testid="menu-item"]') as HTMLElement
+    fireEvent.mouseDown(item)
+    expect(getOpen()).toBe(true)
+  })
+})

package/src/components/PortalDropdownMenu.tsx

@@ -0,0 +1,130 @@
+/**
+ * PortalDropdownMenu (v6.4.0) — generic dropdown that mounts via
+ * `<Portal>` on `document.body` instead of an in-tree `position: absolute`
+ * sibling. Eliminates two pain points around the legacy in-tree pattern :
+ *
+ *   1. **`overflow: hidden` clipping** — when the trigger lives inside a
+ *      chat bubble or a card with `overflow: hidden`, an absolutely
+ *      positioned menu sibling gets clipped at the ancestor's boundary.
+ *      Mounting on `document.body` escapes the clip stack entirely.
+ *   2. **`z-index` wars** — chat surfaces stack composer / message rails
+ *      above the message list, and ancestor `z-index` creates a new
+ *      stacking context that captures the in-tree menu. A portal is a
+ *      sibling of the document, so a single `z-index: 9999` wins.
+ *
+ * The menu is positioned with `position: fixed` from the trigger's
+ * `getBoundingClientRect()`. We re-measure on `scroll` (capture phase, so
+ * nested scrollables also fire) and `resize` to keep the menu pinned
+ * while the user interacts with surrounding chrome.
+ *
+ * Close affordances : click outside, Escape, programmatic via `onClose`.
+ */
+
+import { Component, JSX, Show, createSignal, createEffect, onCleanup } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+export interface PortalDropdownMenuProps {
+  /**
+   * Whether the menu is currently open. Controlled by the parent.
+   */
+  open: boolean
+
+  /**
+   * Called when the menu wants to close (outside click / Escape / item
+   * click — it's the parent's job to actually flip `open` to false).
+   */
+  onClose: () => void
+
+  /**
+   * Trigger element used as the positioning anchor. The menu's right
+   * edge is aligned to the trigger's right edge, top to its bottom + 4px.
+   */
+  trigger: HTMLElement | undefined
+
+  /**
+   * Menu width in pixels. Used to compute the left coordinate so the menu's
+   * right edge aligns with the trigger's right edge. Default : `144` (the
+   * legacy table menu width — `w-36`).
+   */
+  width?: number
+
+  /**
+   * Menu content. Wrapped in the rounded / shadowed container — keep
+   * children minimal (just the items).
+   */
+  children: JSX.Element
+
+  /**
+   * Optional additional class names for the menu container, appended after
+   * the default Tailwind classes. Useful to override width or padding.
+   */
+  class?: string
+}
+
+export const PortalDropdownMenu: Component<PortalDropdownMenuProps> = (props) => {
+  const [position, setPosition] = createSignal({ top: 0, left: 0 })
+  let menuRef: HTMLDivElement | undefined
+
+  const updatePosition = () => {
+    const t = props.trigger
+    if (!t) return
+    const rect = t.getBoundingClientRect()
+    const w = props.width ?? 144
+    setPosition({
+      top: rect.bottom + 4,
+      left: rect.right - w,
+    })
+  }
+
+  // Measure once when the menu opens, then react to viewport changes.
+  createEffect(() => {
+    if (!props.open) return
+    updatePosition()
+
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as Node
+      if (menuRef?.contains(target) || props.trigger?.contains(target)) return
+      props.onClose()
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') props.onClose()
+    }
+    const onScrollOrResize = () => updatePosition()
+
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    // Capture phase so scrolls inside nested containers (e.g. chat virtual
+    // list) also re-position the menu. `passive: true` because we never
+    // preventDefault here.
+    window.addEventListener('scroll', onScrollOrResize, { capture: true, passive: true })
+    window.addEventListener('resize', onScrollOrResize)
+
+    onCleanup(() => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+      window.removeEventListener('scroll', onScrollOrResize, { capture: true })
+      window.removeEventListener('resize', onScrollOrResize)
+    })
+  })
+
+  return (
+    <Show when={props.open}>
+      <Portal>
+        <div
+          ref={menuRef}
+          role="menu"
+          style={{
+            position: 'fixed',
+            top: `${position().top}px`,
+            left: `${position().left}px`,
+            'z-index': 9999,
+            width: `${props.width ?? 144}px`,
+          }}
+          class={`bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 text-sm ${props.class ?? ''}`}
+        >
+          {props.children}
+        </div>
+      </Portal>
+    </Show>
+  )
+}

package/src/components/UIResourceRenderer.identity.test.tsx

@@ -0,0 +1,161 @@
+/**
+ * v6.5.0 — Identity stability + opt-in observability for <UIResourceRenderer>.
+ *
+ * Coverage targets :
+ *   1. Layout content gets `data-mcp-ui-layout-id` from layout.id
+ *   2. Layout content without id falls back to a content hash
+ *   3. Single-component content gets `data-mcp-ui-component-id` (no layout id)
+ *   4. Each rendered child carries `data-mcp-ui-component-id`
+ *   5. `onMountDuplicate` callback fires on the 2nd concurrent mount
+ *   6. Module-level reporter (`setDuplicateMountReporter`) fires on duplicate
+ *   7. Single mount fires no duplicate notification
+ *   8. Cleanup on unmount allows the same key to be re-mounted without warn
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, cleanup } from '@solidjs/testing-library'
+import { UIResourceRenderer } from './UIResourceRenderer'
+import {
+  setDuplicateMountReporter,
+  _resetRegistry,
+  _getMountCount,
+} from '../utils/duplicate-mount-registry'
+import { getUiResourceStableKey } from '../utils/stable-key'
+
+const SIMPLE_TEXT_COMPONENT = {
+  id: 'text-comp-1',
+  type: 'text' as const,
+  position: { colStart: 1, colSpan: 12 },
+  params: { content: 'Hello' },
+}
+
+const SIMPLE_LAYOUT = {
+  id: 'layout-1',
+  components: [SIMPLE_TEXT_COMPONENT],
+  grid: { columns: 12, gap: '1rem' },
+}
+
+describe('UIResourceRenderer identity (v6.5.0)', () => {
+  beforeEach(() => {
+    cleanup()
+    _resetRegistry()
+  })
+
+  it('layout content emits data-mcp-ui-layout-id from layout.id', () => {
+    const { container } = render(() => <UIResourceRenderer content={SIMPLE_LAYOUT} />)
+    const wrapper = container.querySelector('[data-mcp-ui-layout-id="layout-1"]')
+    expect(wrapper).toBeTruthy()
+  })
+
+  it('layout without id falls back to a content hash', () => {
+    const bareLayout = {
+      components: [SIMPLE_TEXT_COMPONENT],
+      grid: { columns: 12, gap: '1rem' },
+    } as any
+    const expectedKey = getUiResourceStableKey(bareLayout)
+    const { container } = render(() => <UIResourceRenderer content={bareLayout} />)
+    const wrapper = container.querySelector(`[data-mcp-ui-layout-id="${expectedKey}"]`)
+    expect(wrapper).toBeTruthy()
+    // Hash form (FNV-1a base36) is 7 chars
+    expect(expectedKey).toMatch(/^[a-z0-9]{7}$/)
+  })
+
+  it('single-component content emits data-mcp-ui-component-id (no layout id)', () => {
+    const { container } = render(() => <UIResourceRenderer content={SIMPLE_TEXT_COMPONENT} />)
+    expect(container.querySelector('[data-mcp-ui-layout-id]')).toBeNull()
+    const wrappers = container.querySelectorAll('[data-mcp-ui-component-id="text-comp-1"]')
+    // Outer wrapper + inner per-component wrapper both carry the id
+    expect(wrappers.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('each child component wrapper inside a layout carries data-mcp-ui-component-id', () => {
+    const layout = {
+      id: 'multi',
+      components: [
+        { id: 'comp-a', type: 'text', position: { colStart: 1, colSpan: 6 }, params: { content: 'A' } },
+        { id: 'comp-b', type: 'text', position: { colStart: 7, colSpan: 6 }, params: { content: 'B' } },
+      ],
+      grid: { columns: 12, gap: '1rem' },
+    } as any
+    const { container } = render(() => <UIResourceRenderer content={layout} />)
+    expect(container.querySelector('[data-mcp-ui-component-id="comp-a"]')).toBeTruthy()
+    expect(container.querySelector('[data-mcp-ui-component-id="comp-b"]')).toBeTruthy()
+  })
+
+  it('fires onMountDuplicate on the 2nd concurrent mount of the same key', () => {
+    const onDup = vi.fn()
+    render(() => (
+      <>
+        <UIResourceRenderer content={SIMPLE_LAYOUT} onMountDuplicate={onDup} />
+        <UIResourceRenderer content={SIMPLE_LAYOUT} onMountDuplicate={onDup} />
+      </>
+    ))
+    // Only the 2nd mount triggers the callback (count crosses 2)
+    expect(onDup).toHaveBeenCalledTimes(1)
+    expect(onDup).toHaveBeenCalledWith(
+      expect.objectContaining({ key: 'layout-1', count: 2 })
+    )
+  })
+
+  it('does NOT fire onMountDuplicate on a single mount', () => {
+    const onDup = vi.fn()
+    render(() => <UIResourceRenderer content={SIMPLE_LAYOUT} onMountDuplicate={onDup} />)
+    expect(onDup).not.toHaveBeenCalled()
+  })
+
+  it('module-level setDuplicateMountReporter fires on the 2nd mount', () => {
+    const reporter = vi.fn()
+    setDuplicateMountReporter(reporter)
+    render(() => (
+      <>
+        <UIResourceRenderer content={SIMPLE_LAYOUT} />
+        <UIResourceRenderer content={SIMPLE_LAYOUT} />
+      </>
+    ))
+    expect(reporter).toHaveBeenCalledTimes(1)
+    expect(reporter).toHaveBeenCalledWith(
+      expect.objectContaining({ key: 'layout-1', count: 2 })
+    )
+  })
+
+  it('mounts unique-key payloads independently (no false positives)', () => {
+    const onDup = vi.fn()
+    const reporter = vi.fn()
+    setDuplicateMountReporter(reporter)
+    const a = { ...SIMPLE_LAYOUT, id: 'layout-A' }
+    const b = { ...SIMPLE_LAYOUT, id: 'layout-B' }
+    render(() => (
+      <>
+        <UIResourceRenderer content={a} onMountDuplicate={onDup} />
+        <UIResourceRenderer content={b} onMountDuplicate={onDup} />
+      </>
+    ))
+    expect(onDup).not.toHaveBeenCalled()
+    expect(reporter).not.toHaveBeenCalled()
+  })
+
+  it('cleanup unregisters the mount so the registry never leaks', () => {
+    const { unmount } = render(() => <UIResourceRenderer content={SIMPLE_LAYOUT} />)
+    expect(_getMountCount('layout-1')).toBe(1)
+    unmount()
+    expect(_getMountCount('layout-1')).toBe(0)
+  })
+
+  it('debugDuplicateMounts prop forces a console.warn even when global debug off', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    try {
+      render(() => (
+        <>
+          <UIResourceRenderer content={SIMPLE_LAYOUT} debugDuplicateMounts />
+          <UIResourceRenderer content={SIMPLE_LAYOUT} debugDuplicateMounts />
+        </>
+      ))
+      expect(warnSpy).toHaveBeenCalledWith(
+        '[mcp-ui] duplicate UIResourceRenderer mount',
+        expect.objectContaining({ key: 'layout-1', count: 2 })
+      )
+    } finally {
+      warnSpy.mockRestore()
+    }
+  })
+})

package/src/components/UIResourceRenderer.tsx

@@ -10,6 +10,14 @@ import type { UIComponent, UILayout, RendererError, TableVirtualizeOptions } fro
 import { validateComponent, DEFAULT_RESOURCE_LIMITS, getIframeSandbox } from '../services/validation'
 import { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'
 import { markRenderStart, markRenderEnd, PERF_PREFIX } from '../utils/perf'
+import { isDebugEnabled } from '../utils/logger'
+import { getUiResourceStableKey } from '../utils/stable-key'
+import {
+  _registerMount,
+  _unregisterMount,
+  getDuplicateMountReporter,
+  type DuplicateMountInfo,
+} from '../utils/duplicate-mount-registry'
 import { useTelemetry } from '../context/MCPUITelemetryContext'
 
 /**
@@ -41,6 +49,7 @@ import { CodeBlockRenderer } from './CodeBlockRenderer'
 import { MapRenderer } from './MapRenderer'
 import { GraphRenderer } from './GraphRenderer'
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
+import { PortalDropdownMenu } from './PortalDropdownMenu'
 import { RenderProvider } from './RenderContext'
 import { useAction } from '../hooks/useAction'
 import { marked } from 'marked'
@@ -134,6 +143,27 @@ export interface UIResourceRendererProps {
    * graph, map, video, carousel, image-gallery, code.
    */
   toolbarVariant?: 'hover' | 'always-visible'
+
+  /**
+   * Per-instance hook fired when this renderer mounts a content key that
+   * is already mounted elsewhere in the document (v6.5.0 — closes Demande 2
+   * of `BRIEF-MCPUI-2026-05-10.md`).
+   *
+   * The key comes from `getUiResourceStableKey(content)` — `content.id` if
+   * provided, else a content hash. The reporter fires every time the
+   * concurrent mount count crosses 2+ ; consumers decide what to do
+   * (`console.warn`, telemetry beacon, debug overlay, …). The renderer
+   * never deduplicates visually on its own.
+   */
+  onMountDuplicate?: (info: DuplicateMountInfo) => void
+
+  /**
+   * When `true`, log duplicate mounts to `console.warn` from this instance
+   * even when the global `isDebugEnabled()` flag is off. Use to opt-in to
+   * console noise on a single suspect surface without flipping the global
+   * debug switch (v6.5.0).
+   */
+  debugDuplicateMounts?: boolean
 }
 
 /**
@@ -755,6 +785,8 @@ function TableRenderer(props: {
 
   // Export dropdown state
   const [showExportMenu, setShowExportMenu] = createSignal(false)
+  // v6.4.0 — trigger ref consumed by <PortalDropdownMenu> for positioning
+  let exportTriggerRef: HTMLButtonElement | undefined
 
   const handleExport = (format: string) => {
     setShowExportMenu(false)
@@ -841,28 +873,34 @@ function TableRenderer(props: {
         <Show when={exportable} fallback={<CopyButton getText={getTableCSV} title="Copy table (CSV)" position="top-right" />}>
           <div class="absolute right-10 top-2 z-10">
             <button
+              ref={exportTriggerRef}
               onClick={() => setShowExportMenu(!showExportMenu())}
               class="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="Export table"
               aria-label="Export table"
+              aria-haspopup="menu"
+              aria-expanded={showExportMenu()}
             >
               <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 when={showExportMenu()}>
-              <div class="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 text-sm">
-                <Show when={(exportFormats as string[]).includes('tsv')}>
-                  <button onClick={() => handleExport('tsv')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Copy TSV</button>
-                </Show>
-                <Show when={(exportFormats as string[]).includes('csv')}>
-                  <button onClick={() => handleExport('csv')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Download CSV</button>
-                </Show>
-                <Show when={(exportFormats as string[]).includes('json')}>
-                  <button onClick={() => handleExport('json')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Download JSON</button>
-                </Show>
-              </div>
-            </Show>
+            <PortalDropdownMenu
+              open={showExportMenu()}
+              onClose={() => setShowExportMenu(false)}
+              trigger={exportTriggerRef}
+              width={144}
+            >
+              <Show when={(exportFormats as string[]).includes('tsv')}>
+                <button onClick={() => handleExport('tsv')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Copy TSV</button>
+              </Show>
+              <Show when={(exportFormats as string[]).includes('csv')}>
+                <button onClick={() => handleExport('csv')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Download CSV</button>
+              </Show>
+              <Show when={(exportFormats as string[]).includes('json')}>
+                <button onClick={() => handleExport('json')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Download JSON</button>
+              </Show>
+            </PortalDropdownMenu>
           </div>
         </Show>
         <div class={`p-4 ${isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''}`}>
@@ -1757,6 +1795,30 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
 
   const layoutData = layout()
 
+  // ── Identity + duplicate-mount detection (v6.5.0) ─────────────
+  // `isLayoutContent` distinguishes a real composite/layout payload from
+  // the synthetic single-component wrapping above. Drives whether the
+  // outer wrapper carries `data-mcp-ui-layout-id` or `data-mcp-ui-component-id`.
+  const isLayoutContent =
+    !('type' in props.content) || (props.content as { type?: string }).type === 'composite'
+  const outerKey = createMemo(() => getUiResourceStableKey(props.content))
+
+  onMount(() => {
+    const key = outerKey()
+    const info = _registerMount(key)
+    if (info.count > 1) {
+      props.onMountDuplicate?.(info)
+      getDuplicateMountReporter()?.(info)
+      if (isDebugEnabled() || props.debugDuplicateMounts) {
+        // eslint-disable-next-line no-console
+        console.warn('[mcp-ui] duplicate UIResourceRenderer mount', info)
+      }
+    }
+  })
+  onCleanup(() => {
+    _unregisterMount(outerKey())
+  })
+
   // Wrapper function for RenderContext (breaks circular dependency)
   const renderComponent = (component: UIComponent, onError?: (error: RendererError) => void) => (
     <ComponentRenderer component={component} onError={onError} errorMode={props.errorMode} toolbarVariant={props.toolbarVariant} />
@@ -1764,11 +1826,19 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
 
   return (
     <RenderProvider renderComponent={renderComponent}>
-      <div class={`w-full ${props.class || ''}`}>
+      <div
+        class={`w-full ${props.class || ''}`}
+        {...(isLayoutContent
+          ? { 'data-mcp-ui-layout-id': outerKey() }
+          : { 'data-mcp-ui-component-id': outerKey() })}
+      >
         <div class="grid gap-4" style={gridContainerStyle()}>
           <For each={layoutData.components}>
             {(component) => (
-              <div style={getGridStyleString(component)}>
+              <div
+                style={getGridStyleString(component)}
+                data-mcp-ui-component-id={getUiResourceStableKey(component)}
+              >
                 <ComponentRenderer component={component} onError={props.onError} errorMode={props.errorMode} toolbarVariant={props.toolbarVariant} />
               </div>
             )}

package/src/components/index.ts

@@ -92,5 +92,9 @@ export type { RenderContextValue, RenderComponentFn } from './RenderContext'
 export { ElicitationForm } from './ElicitationForm'
 export type { ElicitationFormProps } from './ElicitationForm'
 
+// v6.4.0 — Portal-mounted dropdown (used by table + graph Export menus)
+export { PortalDropdownMenu } from './PortalDropdownMenu'
+export type { PortalDropdownMenuProps } from './PortalDropdownMenu'
+
 // Default exports for lazy loading compatibility
 export { UIResourceRenderer as default } from './UIResourceRenderer'