@seed-ship/mcp-ui-solid 6.12.0 → 6.13.0

package/src/services/component-registry.ts

@@ -679,12 +679,25 @@ export const GraphRegistry: ComponentRegistryEntry = {
     },
     required: ['nodes'],
   },
-  // No typed example yet: the registry `ComponentExample` `params` type is a
-  // union of the legacy component params that does not (yet) include graph
-  // (`nodes` / `edges`). The `schema` above fully documents graph params; a
-  // typed example can be added once `GraphComponentParams` joins the
-  // `UIComponent` params union (a separate solid-types task).
-  examples: [],
+  examples: [
+    {
+      query: 'Show how this figure was derived',
+      component: {
+        id: 'example-graph-1',
+        type: 'graph',
+        position: { colStart: 1, colSpan: 12 },
+        params: {
+          directed: true,
+          layout: 'dagre',
+          nodes: [
+            { id: 'claim', label: 'Population = 522 250', group: 'claim' },
+            { id: 'source', label: 'INSEE 2021', group: 'source' },
+          ],
+          edges: [{ source: 'claim', target: 'source', label: 'derived from' }],
+        },
+      },
+    },
+  ],
   limits: DEFAULT_RESOURCE_LIMITS,
 }
 

package/src/types/graph-types.test.ts

@@ -0,0 +1,42 @@
+/**
+ * v6.13.0 — graph is now first-class in the `UIComponent` params union
+ * (audit follow-up to P1.4/P1.5).
+ *
+ * Compile-time: a `graph` component with `nodes`/`edges` params must be
+ * assignable to `UIComponent` (it was not before — the union ended at
+ * `MapComponentParams`). Runtime asserts keep the shape visible in reports.
+ */
+import { describe, it, expect } from 'vitest'
+import type { UIComponent, GraphComponentParams, GraphNode, GraphEdge } from './index'
+
+describe('GraphComponentParams in the UIComponent union (P1.4/P1.5 follow-up)', () => {
+  it('accepts a graph component with nodes/edges/layout/directed', () => {
+    const nodes: GraphNode[] = [
+      { id: 'a', label: 'A', group: 'g1' },
+      { id: 'b', label: 'B' },
+    ]
+    const edges: GraphEdge[] = [{ source: 'a', target: 'b', label: 'rel', weight: 1 }]
+    const params: GraphComponentParams = { nodes, edges, layout: 'dagre', directed: true }
+
+    const component: UIComponent = {
+      id: 'g1',
+      type: 'graph',
+      position: { colStart: 1, colSpan: 12 },
+      params,
+    }
+
+    expect(component.type).toBe('graph')
+    expect((component.params as GraphComponentParams).nodes).toHaveLength(2)
+    expect((component.params as GraphComponentParams).edges).toHaveLength(1)
+    expect((component.params as GraphComponentParams).layout).toBe('dagre')
+  })
+
+  it('requires nodes (edges optional) and tolerates passthrough props', () => {
+    const minimal: GraphComponentParams = { nodes: [{ id: 'only' }] }
+    expect(minimal.edges).toBeUndefined()
+
+    const extra: GraphComponentParams = { nodes: [{ id: 'x', custom: 42 }], theme: 'dark' }
+    expect((extra.nodes[0] as Record<string, unknown>).custom).toBe(42)
+    expect((extra as Record<string, unknown>).theme).toBe('dark')
+  })
+})

package/src/types/index.ts

@@ -1021,6 +1021,63 @@ export interface MapPMTilesConfig {
   minZoom?: number
 }
 
+/**
+ * Node-link graph params (v6.13.0 — audit follow-up to P1.4/P1.5).
+ *
+ * Mirrors `GraphComponentParamsSchema` in `@seed-ship/mcp-ui-spec`. The
+ * `<GraphRenderer>` reads these loosely (and the spec schema accepts
+ * passthrough node/edge props), so an index signature keeps the type
+ * permissive — matching the runtime behaviour without over-constraining.
+ */
+export interface GraphNode {
+  /** Stable node id — referenced by edges. */
+  id: string
+  label?: string
+  /** Optional grouping/category key (drives default coloring). */
+  group?: string
+  /** Generic ranking/importance signal (opaque to the lib). */
+  weight?: number
+  /** Passthrough G6 node props (type, size, style, data, …). */
+  [key: string]: unknown
+}
+
+export interface GraphEdge {
+  /** Must match a `GraphNode.id`. */
+  source: string
+  /** Must match a `GraphNode.id`. */
+  target: string
+  label?: string
+  weight?: number
+  /** Passthrough G6 edge props (style, data, …). */
+  [key: string]: unknown
+}
+
+export type GraphLayout = 'force' | 'radial' | 'grid' | 'dagre' | 'circular' | 'concentric'
+
+/**
+ * Generic node-link graph component params. Domain-neutral by design — the
+ * meaning of `weight`/`group` is decided by the consumer.
+ */
+export interface GraphComponentParams {
+  /** Nodes (at least one expected at runtime). */
+  nodes: GraphNode[]
+  edges?: GraphEdge[]
+  layout?: GraphLayout
+  /** Render edges as directed (arrows). */
+  directed?: boolean
+  /**
+   * Rendering hint only — NOT wired; the renderer always uses the G6 canvas
+   * default (cf. audit P0). Kept for forward-compat with the spec.
+   */
+  rendererPref?: 'canvas' | 'svg'
+  height?: number
+  width?: number
+  /** Custom CSS class. */
+  className?: string
+  /** Passthrough for forward-compat graph options. */
+  [key: string]: unknown
+}
+
 /**
  * Grid component parameters (Phase 5.0)
  * Enables nested CSS Grid layouts for template builder
@@ -1079,7 +1136,7 @@ export interface UIComponent {
   /**
    * Component parameters (type-specific)
    */
-  params: ChartComponentParams | TableComponentParams | MetricComponentParams | TextComponentParams | ActionComponentParams | GridComponentParams | FormComponentParams | ModalComponentParams | ActionGroupParams | ImageGalleryParams | VideoComponentParams | CodeComponentParams | MapComponentParams
+  params: ChartComponentParams | TableComponentParams | MetricComponentParams | TextComponentParams | ActionComponentParams | GridComponentParams | FormComponentParams | ModalComponentParams | ActionGroupParams | ImageGalleryParams | VideoComponentParams | CodeComponentParams | MapComponentParams | GraphComponentParams
 
   /**
    * Metadata for observability