feat: separate html and remote-dom props

examples/remote-dom-demo/src/App.tsx

@@ -146,8 +146,10 @@ function App() {
           <UIResourceRenderer
             key={`basic-${scriptContent}`}
             resource={mockResourceReact}
-            library={basicComponentLibrary}
-            remoteElements={remoteElements}
+            remoteDomProps={{
+              library: basicComponentLibrary,
+              remoteElements: remoteElements,
+            }}
           />
         </div>
 
@@ -163,8 +165,10 @@ function App() {
           <UIResourceRenderer
             key={`radix-${scriptContent}`}
             resource={mockResourceReact}
-            library={radixComponentLibrary}
-            remoteElements={remoteElements}
+            remoteDomProps={{
+              library: radixComponentLibrary,
+              remoteElements: remoteElements,
+            }}
           />
         </div>
 
@@ -180,8 +184,10 @@ function App() {
           <UIResourceRenderer
             key={`webcomponents-${scriptContent}`}
             resource={mockResourceWebComponents}
-            library={basicComponentLibrary}
-            remoteElements={remoteElements}
+            remoteDomProps={{
+              library: basicComponentLibrary,
+              remoteElements: remoteElements,
+            }}
           />
         </div>
       </div>

packages/client/src/components/UIResourceRenderer.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import type { Resource } from '@modelcontextprotocol/sdk/types.js';
-import { ResourceContentType } from '../types';
+import { ResourceContentType, UIActionResult } from '../types';
 import { HTMLResourceRenderer, HTMLResourceRendererProps } from './HTMLResourceRenderer';
 import { RemoteDOMResourceProps, RemoteDOMResourceRenderer } from './RemoteDOMResourceRenderer';
 import { basicComponentLibrary } from '../remote-dom/component-libraries/basic';
 
-type UIResourceRendererProps = Omit<
-  HTMLResourceRendererProps & RemoteDOMResourceProps,
-  'resource'
-> & {
+type UIResourceRendererProps = {
   resource: Partial<Resource>;
+  onUIAction?: (result: UIActionResult) => Promise<unknown>;
   supportedContentTypes?: ResourceContentType[];
+  htmlProps?: Omit<HTMLResourceRendererProps, 'resource' | 'onUIAction'>;
+  remoteDomProps?: Omit<RemoteDOMResourceProps, 'resource' | 'onUIAction'>;
 };
 
 function getContentType(
@@ -35,11 +35,9 @@ export const UIResourceRenderer: React.FC<UIResourceRendererProps> = (props) =>
   const {
     resource,
     onUIAction,
-    style,
-    iframeProps,
     supportedContentTypes,
-    library,
-    remoteElements,
+    htmlProps,
+    remoteDomProps,
   } = props;
   const contentType = getContentType(resource);
 
@@ -60,17 +58,16 @@ export const UIResourceRenderer: React.FC<UIResourceRendererProps> = (props) =>
         <HTMLResourceRenderer
           resource={resource}
           onUIAction={onUIAction}
-          style={style}
-          iframeProps={iframeProps}
+          {...htmlProps}
         />
       );
     case 'remoteDom':
       return (
         <RemoteDOMResourceRenderer
           resource={resource}
           onUIAction={onUIAction}
-          library={library || basicComponentLibrary}
-          remoteElements={remoteElements}
+          library={remoteDomProps?.library || basicComponentLibrary}
+          {...remoteDomProps}
         />
       );
     default: