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

package/src/components/TableRenderer.pagination.test.tsx

@@ -0,0 +1,31 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, fireEvent, render } from '@solidjs/testing-library'
+import { createSignal } from 'solid-js'
+import { UIResourceRenderer } from './UIResourceRenderer'
+import type { UIComponent } from '../types'
+
+afterEach(cleanup)
+
+describe('table page bounds', () => {
+  it('clamps an oversized initial page and remains navigable after data shrinks', () => {
+    const [count, setCount] = createSignal(30)
+    const component: UIComponent = {
+      id: 'paged-table', type: 'table', position: { colStart: 1, colSpan: 12 },
+      params: {
+        columns: [{ key: 'name', label: 'Name' }],
+        get rows() { return Array.from({ length: count() }, (_, i) => ({ name: `row-${i}` })) },
+        initialPage: 99, chatPageSize: 10, className: 'custom-table',
+      },
+    }
+    const { container, getByText } = render(() => <UIResourceRenderer content={component} />)
+    expect(container.querySelector('.custom-table')).not.toBeNull()
+    expect(container.querySelector('tbody')?.textContent).toContain('row-29')
+    expect(getByText('3 / 3')).toBeTruthy()
+    setCount(15)
+    expect(container.querySelector('tbody')?.textContent).toContain('row-14')
+    expect(getByText('2 / 2')).toBeTruthy()
+    fireEvent.click(getByText('◀'))
+    expect(getByText('1 / 2')).toBeTruthy()
+    expect(container.querySelector('tbody')?.textContent).toContain('row-0')
+  })
+})

package/src/components/UIResourceRenderer.tsx

@@ -54,6 +54,7 @@ import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 import { PortalDropdownMenu } from './PortalDropdownMenu'
 import { RenderProvider } from './RenderContext'
 import { useAction } from '../hooks/useAction'
+import { createResponsiveGrid } from '../hooks/createResponsiveGrid'
 import { marked } from 'marked'
 
 /**
@@ -711,8 +712,12 @@ function TableRenderer(props: {
   const hasServerPagination = () => !!tableParams.pagination
   const needsClientPagination = () =>
     !hasServerPagination() && !showAll() && clientPageSize() > 0 && filteredRows().length > clientPageSize()
-  const [clientPage, setClientPage] = createSignal(tableParams.initialPage ?? 0)
+  const [requestedClientPage, setClientPage] = createSignal(tableParams.initialPage ?? 0)
   const clientTotalPages = () => needsClientPagination() ? Math.ceil(filteredRows().length / clientPageSize()) : 1
+  const clientPage = createMemo(() => Math.max(0, Math.min(requestedClientPage(), clientTotalPages() - 1)))
+  createEffect(() => {
+    if (requestedClientPage() !== clientPage()) setClientPage(clientPage())
+  })
   const clientVisibleRows = createMemo(() => {
     if (showAll() || !needsClientPagination()) return filteredRows()
     const start = clientPage() * clientPageSize()
@@ -939,7 +944,7 @@ function TableRenderer(props: {
     <ExpandableWrapper title={tableParams.title || 'Table'} copyData={getTableCSV()} copyLabel="Copy table (CSV)" 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 group ${
         isExpanded() ? 'flex-1 min-h-0 flex flex-col' : 'h-full'
-      }`}>
+      } ${tableParams.className || ''}`}>
         <Show when={exportable} fallback={<CopyButton getText={getTableCSV} title="Copy table (CSV)" position="top-right" />}>
           <div class="absolute right-10 top-2 z-10">
             <button
@@ -1866,16 +1871,17 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
   }
 
   // Convert grid styles to CSS string
+  const responsiveGrid = createResponsiveGrid()
   const gridContainerStyle = () => {
     const layoutData = layout()
-    return `grid-template-columns: repeat(${layoutData.grid.columns}, 1fr); gap: ${layoutData.grid.gap}`
+    return `display: grid; grid-template-columns: repeat(${responsiveGrid.stacked() ? 1 : layoutData.grid.columns}, minmax(0, 1fr)); gap: ${layoutData.grid.gap}`
   }
 
   // Convert component grid styles to CSS string
   const getGridStyleString = (component: UIComponent) => {
     // Defensive check for position field - default to full width
-    if (!component.position) {
-      return 'grid-column: 1 / span 12; grid-row: auto'
+    if (responsiveGrid.stacked() || !component.position) {
+      return 'grid-column: 1 / -1; grid-row: auto'
     }
     const { colStart, colSpan, rowStart, rowSpan = 1 } = component.position
     return `grid-column: ${colStart} / span ${colSpan}; grid-row: ${rowStart ? `${rowStart} / span ${rowSpan}` : 'auto'}`
@@ -1921,8 +1927,6 @@ 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
@@ -1960,10 +1964,11 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
           ? { 'data-mcp-ui-layout-id': outerKey() }
           : { 'data-mcp-ui-component-id': outerKey() })}
       >
-        <div class="grid gap-4" style={gridContainerStyle()}>
-          <For each={layoutData.components}>
+        <div ref={responsiveGrid.ref} class="grid gap-4" style={gridContainerStyle()} data-mcp-ui-grid data-mcp-ui-stacked={responsiveGrid.stacked()}>
+          <For each={layout().components}>
             {(component) => (
               <div
+                class="min-w-0"
                 style={getGridStyleString(component)}
                 data-mcp-ui-component-id={getUiResourceStableKey(component)}
               >

package/src/components/VerifiedText.tsx

@@ -46,11 +46,6 @@ function buildAnnotatedSegments(text: string, validation: DataValidation): TextS
     }
   }
 
-  // Build all number positions sorted
-  const allPositions = validation.llmNumbers
-    .map(n => ({ position: n.position, length: n.context.length - 20 })) // approximate original match length
-    .sort((a, b) => a.position - b.position)
-
   // Re-extract number lengths from text for precise splitting
   const numberRegex = /\d[\d\s,.]*\d|\d+/g
   const matches: Array<{ start: number; end: number }> = []

package/src/components/chart-data-table.ts

@@ -0,0 +1,97 @@
+export interface ChartDataTable {
+  columns: string[];
+  rows: Array<Array<string | number>>;
+}
+
+interface ChartDatasetLike {
+  label?: string;
+  data?: unknown[];
+}
+
+export interface ChartDataLike {
+  type?: string;
+  data?: {
+    labels?: Array<string | number>;
+    datasets?: ChartDatasetLike[];
+  };
+}
+
+function tableCell(value: unknown): string | number {
+  if (value == null) return '';
+  if (typeof value === 'string' || typeof value === 'number') return value;
+  if (typeof value === 'boolean') return String(value);
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function isPoint(value: unknown): value is Record<string, unknown> {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    ('x' in value || 'y' in value || 'r' in value)
+  );
+}
+
+/**
+ * Project Chart.js data into an accessible table without flattening point
+ * coordinates. Categorical charts use a compact wide table; scatter, bubble,
+ * and object-valued line charts use one row per point so x/y/r remain distinct.
+ */
+export function chartToDataTable(params: ChartDataLike): ChartDataTable {
+  const datasets = params.data?.datasets ?? [];
+  const labels = params.data?.labels ?? [];
+  const pointData =
+    params.type === 'scatter' ||
+    params.type === 'bubble' ||
+    datasets.some((dataset) => dataset.data?.some(isPoint));
+
+  if (pointData) {
+    const hasLabels = labels.length > 0;
+    const hasRadius =
+      params.type === 'bubble' ||
+      datasets.some((dataset) => dataset.data?.some((value) => isPoint(value) && 'r' in value));
+    const columns = [
+      'Series',
+      'Point',
+      ...(hasLabels ? ['Label'] : []),
+      'x',
+      'y',
+      ...(hasRadius ? ['r'] : []),
+    ];
+    const rows: Array<Array<string | number>> = [];
+
+    datasets.forEach((dataset, datasetIndex) => {
+      const series = dataset.label || `Series ${datasetIndex + 1}`;
+      (dataset.data ?? []).forEach((value, pointIndex) => {
+        const point = isPoint(value) ? value : { y: value };
+        rows.push([
+          series,
+          pointIndex + 1,
+          ...(hasLabels ? [tableCell(labels[pointIndex])] : []),
+          tableCell(point.x),
+          tableCell(point.y),
+          ...(hasRadius ? [tableCell(point.r)] : []),
+        ]);
+      });
+    });
+
+    return { columns, rows };
+  }
+
+  const rowCount = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length ?? 0), 0);
+  const columns = ['Label', ...datasets.map((dataset, index) => dataset.label || `Series ${index + 1}`)];
+  const rows: Array<Array<string | number>> = [];
+
+  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+    rows.push([
+      tableCell(labels[rowIndex] ?? rowIndex + 1),
+      ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),
+    ]);
+  }
+
+  return { columns, rows };
+}

package/src/context/MCPUIStringsContext.test.tsx

@@ -11,10 +11,13 @@
 
 import { describe, it, expect, beforeEach } from 'vitest'
 import { render, cleanup, fireEvent } from '@solidjs/testing-library'
+import { createSignal } from 'solid-js'
 import {
+  MCPUIStringsContext,
   MCPUIStringsProvider,
   useMCPUIStrings,
   DEFAULT_MCPUI_STRINGS,
+  type MCPUIStrings,
 } from './MCPUIStringsContext'
 import { FeedbackInline } from '../components/FeedbackInline'
 import { ExpandableWrapper } from '../components/ExpandableWrapper'
@@ -27,6 +30,8 @@ describe('MCPUIStringsContext (v6.6.0)', () => {
     expect(DEFAULT_MCPUI_STRINGS.feedbackUseful).toBe('Useful')
     expect(DEFAULT_MCPUI_STRINGS.feedbackPositiveAck).toBe('Thanks!')
     expect(DEFAULT_MCPUI_STRINGS.retry).toBe('Retry')
+    expect(DEFAULT_MCPUI_STRINGS.chartView).toBe('Chart')
+    expect(DEFAULT_MCPUI_STRINGS.chartDataView).toBe('Data')
   })
 
   it('useMCPUIStrings returns the EN defaults with no provider mounted', () => {
@@ -58,6 +63,61 @@ describe('MCPUIStringsContext (v6.6.0)', () => {
     expect(captured!.closeExpandedView).toBe('Close expanded view')
   })
 
+  it('accepts a legacy typed dictionary and resolves chart defaults through the direct context', () => {
+    const legacyStrings: MCPUIStrings = {
+      expand: 'Legacy expand',
+      expandedView: 'Legacy expanded view',
+      copyToClipboard: 'Legacy copy',
+      closeExpandedView: 'Legacy close',
+      feedbackUseful: 'Legacy useful',
+      feedbackNotUseful: 'Legacy not useful',
+      feedbackPositiveAck: 'Legacy positive',
+      feedbackNegativeAck: 'Legacy negative',
+      retry: 'Legacy retry',
+    }
+    let captured: ReturnType<typeof useMCPUIStrings> | undefined
+    const Probe = () => {
+      captured = useMCPUIStrings()
+      return <span>probe</span>
+    }
+
+    render(() => (
+      <MCPUIStringsContext.Provider value={legacyStrings}>
+        <Probe />
+      </MCPUIStringsContext.Provider>
+    ))
+
+    expect(captured!.expand).toBe('Legacy expand')
+    expect(captured!.chartView).toBe('Chart')
+    expect(captured!.chartDataView).toBe('Data')
+    expect(captured!.chartViewSelector).toBe('Chart or data view')
+  })
+
+  it('keeps replacement provider overrides reactive while resolving omitted defaults', () => {
+    const [overrides, setOverrides] = createSignal<Partial<MCPUIStrings>>({
+      chartView: 'Diagram',
+    })
+    const Probe = () => {
+      const strings = useMCPUIStrings()
+      return (
+        <button type="button" onClick={() => setOverrides({ chartView: 'Graphique' })}>
+          {strings.chartView}|{strings.chartDataView}
+        </button>
+      )
+    }
+
+    const { getByRole } = render(() => (
+      <MCPUIStringsProvider strings={overrides()}>
+        <Probe />
+      </MCPUIStringsProvider>
+    ))
+    const button = getByRole('button')
+
+    expect(button.textContent).toBe('Diagram|Data')
+    fireEvent.click(button)
+    expect(button.textContent).toBe('Graphique|Data')
+  })
+
   it('FeedbackInline reads its ack from the provider (FR override)', () => {
     const { getByText, container } = render(() => (
       <MCPUIStringsProvider

package/src/context/MCPUIStringsContext.tsx

@@ -39,14 +39,14 @@
  * ```
  */
 
-import { createContext, useContext, type JSX } from 'solid-js'
+import { createContext, mergeProps, useContext, type JSX } from 'solid-js'
 
 /**
  * The library's own chrome strings. Flat map, no interpolation.
  *
- * Marked exhaustive as of v6.6.0 ; new chrome strings added by later
- * renderers extend this interface (the `MCPUIStringsProvider` merge keeps
- * older consumers working — any unset key falls back to the EN default).
+ * The original chrome keys remain required. Later additions are optional
+ * so existing typed dictionaries remain valid across minor releases.
+ * `useMCPUIStrings` resolves omitted keys to their English defaults.
  */
 export interface MCPUIStrings {
   // ── ExpandableWrapper toolbar ──────────────────────────────
@@ -72,13 +72,27 @@ export interface MCPUIStrings {
   // ── Generic chrome ────────────────────────────────────────
   /** Label of the streaming retry button. */
   retry: string
+
+  // ── Chart data access ─────────────────────────────────────
+  /** Label of the native chart view button. */
+  chartView?: string
+  /** Label of the exact-data table view button. */
+  chartDataView?: string
+  /** Accessible name of the chart/data view selector. */
+  chartViewSelector?: string
+  /** Caption and accessible name for the chart's data table. */
+  chartDataTable?: string
+  /** Screen-reader description associated with the chart canvas. */
+  chartDataSummary?: string
+  /** Empty state shown when a chart has no data points. */
+  chartNoData?: string
 }
 
 /**
  * English defaults. A published library ships no hardcoded non-English
  * chrome — consumers localize via `<MCPUIStringsProvider>`.
  */
-export const DEFAULT_MCPUI_STRINGS: MCPUIStrings = {
+export const DEFAULT_MCPUI_STRINGS: Required<MCPUIStrings> = {
   expand: 'Expand',
   expandedView: 'Expanded view',
   copyToClipboard: 'Copy to clipboard',
@@ -88,6 +102,12 @@ export const DEFAULT_MCPUI_STRINGS: MCPUIStrings = {
   feedbackPositiveAck: 'Thanks!',
   feedbackNegativeAck: "Noted — we'll improve",
   retry: 'Retry',
+  chartView: 'Chart',
+  chartDataView: 'Data',
+  chartViewSelector: 'Chart or data view',
+  chartDataTable: 'Chart data',
+  chartDataSummary: 'Exact values are available in the data view.',
+  chartNoData: 'No chart data',
 }
 
 export const MCPUIStringsContext = createContext<MCPUIStrings>(DEFAULT_MCPUI_STRINGS)
@@ -97,8 +117,8 @@ export const MCPUIStringsContext = createContext<MCPUIStrings>(DEFAULT_MCPUI_STR
  * `<MCPUIStringsProvider>` is mounted above — every renderer works
  * standalone with English chrome.
  */
-export function useMCPUIStrings(): MCPUIStrings {
-  return useContext(MCPUIStringsContext)
+export function useMCPUIStrings(): Required<MCPUIStrings> {
+  return mergeProps(DEFAULT_MCPUI_STRINGS, useContext(MCPUIStringsContext))
 }
 
 export interface MCPUIStringsProviderProps {
@@ -116,12 +136,11 @@ export interface MCPUIStringsProviderProps {
  * Merges the partial `strings` override over the English defaults.
  */
 export function MCPUIStringsProvider(props: MCPUIStringsProviderProps): JSX.Element {
-  // `props.strings` is read inside the getter so a reactive override
-  // (signal-backed) re-propagates ; for the common static case it is read
-  // once at mount.
-  const value = (): MCPUIStrings => ({ ...DEFAULT_MCPUI_STRINGS, ...props.strings })
+  // The function source keeps replacement `strings` objects reactive while
+  // mergeProps fills any omitted key without taking a one-time snapshot.
+  const value = mergeProps(DEFAULT_MCPUI_STRINGS, () => props.strings)
   return (
-    <MCPUIStringsContext.Provider value={value()}>
+    <MCPUIStringsContext.Provider value={value}>
       {props.children}
     </MCPUIStringsContext.Provider>
   )

package/src/hooks/createResponsiveGrid.ts

@@ -0,0 +1,41 @@
+import { createSignal, onCleanup, onMount } from 'solid-js'
+import { useEditableLayoutPositions } from '../components/EditableLayoutContext'
+
+/** Stack read-only layouts in narrow containers, including desktop chat panels. */
+export function createResponsiveGrid(breakpoint = 640) {
+  const [stacked, setStacked] = createSignal(false)
+  const preserveEditablePositions = useEditableLayoutPositions()
+  let container: HTMLElement | undefined
+
+  const ref = (element: HTMLElement) => { container = element }
+
+  // Editor canvases preserve authored coordinates at every width. This is a
+  // context-only opt-out, so ordinary/read-only renderers retain responsiveness.
+  if (preserveEditablePositions) return { stacked: () => false, ref }
+
+  onMount(() => {
+    if (!container) return
+    const element = container
+    const updateWidth = (width: number) => {
+      // Hidden/unmeasured containers retain their last layout until measurable.
+      if (Number.isFinite(width) && width > 0) setStacked(width < breakpoint)
+    }
+    const measure = () => updateWidth(element.getBoundingClientRect().width)
+    measure()
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.target === element) updateWidth(entry.contentRect.width)
+        }
+      })
+      observer.observe(element)
+      onCleanup(() => observer.disconnect())
+    } else if (typeof window !== 'undefined') {
+      window.addEventListener('resize', measure)
+      onCleanup(() => window.removeEventListener('resize', measure))
+    }
+  })
+
+  return { stacked, ref }
+}

package/src/services/chat-bus.test.ts

@@ -4,7 +4,7 @@
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { createEventEmitter, createCommandHandler, createChatBus, clarificationToPromptConfig, elicitationToPromptConfig } from './chat-bus'
-import type { ChatEvents, ChatCommands, ClarificationEvent, ElicitationEvent } from '../types/chat-bus'
+import type { ClarificationEvent, ElicitationEvent } from '../types/chat-bus'
 
 describe('createEventEmitter', () => {
   it('emits events to subscribed listeners', () => {

package/src/services/chat-bus.ts

@@ -6,8 +6,6 @@
  */
 
 import type {
-  ChatEvents,
-  ChatCommands,
   ChatEventEmitter,
   ChatCommandHandler,
   ChatBus,

package/src/services/chat-prompt-controller.ts

@@ -124,14 +124,6 @@ export function createChatPromptController(): ChatPromptController {
     }
   }
 
-  function clearPending(): void {
-    if (pending) {
-      cleanupAbort(pending)
-      pending = null
-    }
-    setActivePrompt(null)
-  }
-
   function handle(
     config: ChatPromptConfig,
     signal?: AbortSignal

package/src/services/component-registry.test.ts

@@ -1,5 +1,5 @@
 /**
- * Tests for ComponentRegistry — all 19 component types registered
+ * Tests for ComponentRegistry — all 20 component types registered
  */
 
 import { describe, it, expect } from 'vitest'
@@ -7,13 +7,28 @@ import {
   validateAgainstRegistry,
   getComponentEntry,
   ComponentRegistry,
+  QuickchartRegistry,
+  TableRegistry,
   MapRegistry,
+  GraphRegistry,
 } from './component-registry'
 import type { ComponentType } from '../types'
-import { ComponentTypeSchema, MapComponentParamsSchema } from '@seed-ship/mcp-ui-spec'
+import {
+  ChartComponentParamsSchema,
+  ChartTimeAxisSchema,
+  ChartTypeSchema,
+  ComponentTypeSchema,
+  GraphComponentParamsSchema,
+  GraphEdgeSchema,
+  GraphLayoutNameSchema,
+  GraphNodeSchema,
+  MapComponentParamsSchema,
+  TableComponentParamsSchema,
+} from '@seed-ship/mcp-ui-spec'
 
 interface RegistrySchemaNode {
   type?: string
+  description?: string
   enum?: string[]
   oneOf?: RegistrySchemaNode[]
   anyOf?: RegistrySchemaNode[]
@@ -24,6 +39,7 @@ interface RegistrySchemaNode {
   minItems?: number
   maxItems?: number
   minLength?: number
+  minimum?: number
 }
 
 /** All 20 component types in the registry */
@@ -143,6 +159,69 @@ describe('MapRegistry ↔ map spec parity (UI-MAP-0a)', () => {
   })
 })
 
+describe('visualization registry ↔ runtime spec parity', () => {
+  it('keeps the historical QuickchartRegistry export but describes the native renderer', () => {
+    expect(QuickchartRegistry.name).toBe('Chart.js')
+    expect(QuickchartRegistry.description).toContain('locally with Chart.js')
+    expect(QuickchartRegistry.description).toContain('host explicitly opts in')
+  })
+
+  it('advertises the complete chart params surface and all supported chart types', () => {
+    const properties = QuickchartRegistry.schema.properties as Record<string, RegistrySchemaNode>
+    expect(Object.keys(properties).sort()).toEqual(Object.keys(ChartComponentParamsSchema.shape).sort())
+    expect(properties.type.enum).toEqual(ChartTypeSchema.options)
+
+    const dataProperties = properties.data.properties!
+    const dataset = dataProperties.datasets.items as RegistrySchemaNode
+    const datasetProperties = dataset.properties!
+    expect(datasetProperties.data).not.toHaveProperty('oneOf')
+    expect(datasetProperties.data.anyOf).toHaveLength(2)
+    expect(ChartComponentParamsSchema.safeParse({
+      type: 'bar', data: { labels: [], datasets: [{ label: 'Empty series', data: [] }] },
+    }).success).toBe(true)
+    const pointBranch = datasetProperties.data.anyOf?.[1].items as RegistrySchemaNode
+    expect(pointBranch.required).toEqual(['x', 'y'])
+    expect(Object.keys(pointBranch.properties!).sort()).toEqual(['r', 'x', 'y'])
+    expect(pointBranch.properties?.r.minimum).toBe(0)
+
+    expect(Object.keys(properties.timeAxis.properties!).sort()).toEqual(
+      Object.keys(ChartTimeAxisSchema.shape).sort()
+    )
+    expect(properties.timeAxis.properties?.unit.enum).toEqual([
+      'day', 'week', 'month', 'quarter', 'year',
+    ])
+    expect(properties.timeAxis.description).toContain('date adapter')
+  })
+
+  it('advertises the complete table surface including search and client paging controls', () => {
+    const properties = TableRegistry.schema.properties as Record<string, RegistrySchemaNode>
+    expect(Object.keys(properties).sort()).toEqual(Object.keys(TableComponentParamsSchema.shape).sort())
+    expect(properties.searchable.type).toBe('boolean')
+    expect(properties.searchPlaceholder.type).toBe('string')
+    expect(properties.pageSize).toMatchObject({ type: 'integer', minimum: 0 })
+    expect(properties.chatPageSize).toMatchObject({ type: 'integer', minimum: 0 })
+    expect(properties.initialPage).toMatchObject({ type: 'integer', minimum: 0 })
+  })
+
+  it('advertises only the seven canonical graph layouts, including object options', () => {
+    const properties = GraphRegistry.schema.properties as Record<string, RegistrySchemaNode>
+    expect(Object.keys(properties).sort()).toEqual(Object.keys(GraphComponentParamsSchema.shape).sort())
+    expect(properties).not.toHaveProperty('directed')
+
+    const [shorthand, objectForm] = properties.layout.oneOf!
+    expect(shorthand.enum).toEqual(GraphLayoutNameSchema.options)
+    expect(objectForm.properties?.type.enum).toEqual(GraphLayoutNameSchema.options)
+    expect(objectForm.properties).toHaveProperty('options')
+
+    const node = properties.nodes.items as RegistrySchemaNode
+    const edge = properties.edges.items as RegistrySchemaNode
+    expect(Object.keys(node.properties!).sort()).toEqual(Object.keys(GraphNodeSchema.shape).sort())
+    expect(Object.keys(edge.properties!).sort()).toEqual(Object.keys(GraphEdgeSchema.shape).sort())
+    expect(GraphRegistry.description).not.toContain('Degrades to an edge table')
+    expect(GraphRegistry.examples[0].component.params).not.toHaveProperty('directed')
+  })
+})
+
 describe('ComponentRegistry', () => {
   describe('registry completeness', () => {
     it('has exactly 20 registered types', () => {