feat(react): Add React implementations for v0.9 Basic Catalog components and tests

.gitignore

@@ -24,3 +24,4 @@ a2a_agents/python/a2ui_agent/src/a2ui/assets/**/*.json
 agent_sdks/python/src/a2ui/assets/**/*.json
 ## Generated JS file from the strictly-typed `sandbox.ts`. 
 samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/sandbox.js
+*.tsbuildinfo

renderers/react/a2ui_explorer/src/App.tsx

@@ -16,7 +16,7 @@
 
 import {useState, useEffect, useSyncExternalStore, useCallback} from 'react';
 import {MessageProcessor, SurfaceModel, type A2uiMessage} from '@a2ui/web_core/v0_9';
-import {minimalCatalog, A2uiSurface, type ReactComponentImplementation} from '@a2ui/react/v0_9';
+import {minimalCatalog, basicCatalog, A2uiSurface, type ReactComponentImplementation} from '@a2ui/react/v0_9';
 
 // Import Minimal examples
 import min1 from '../../../../specification/v0_9/json/catalogs/minimal/examples/1_simple_text.json';
@@ -27,6 +27,37 @@ import min5 from '../../../../specification/v0_9/json/catalogs/minimal/examples/
 import min6 from '../../../../specification/v0_9/json/catalogs/minimal/examples/6_capitalized_text.json';
 import min7 from '../../../../specification/v0_9/json/catalogs/minimal/examples/7_incremental.json';
 
+// Import Basic examples
+import b01 from "../../../../specification/v0_9/json/catalogs/basic/examples/01_flight-status.json";
+import b02 from "../../../../specification/v0_9/json/catalogs/basic/examples/02_email-compose.json";
+import b03 from "../../../../specification/v0_9/json/catalogs/basic/examples/03_calendar-day.json";
+import b04 from "../../../../specification/v0_9/json/catalogs/basic/examples/04_weather-current.json";
+import b05 from "../../../../specification/v0_9/json/catalogs/basic/examples/05_product-card.json";
+import b06 from "../../../../specification/v0_9/json/catalogs/basic/examples/06_music-player.json";
+import b07 from "../../../../specification/v0_9/json/catalogs/basic/examples/07_task-card.json";
+import b08 from "../../../../specification/v0_9/json/catalogs/basic/examples/08_user-profile.json";
+import b09 from "../../../../specification/v0_9/json/catalogs/basic/examples/09_login-form.json";
+import b10 from "../../../../specification/v0_9/json/catalogs/basic/examples/10_notification-permission.json";
+import b11 from "../../../../specification/v0_9/json/catalogs/basic/examples/11_purchase-complete.json";
+import b12 from "../../../../specification/v0_9/json/catalogs/basic/examples/12_chat-message.json";
+import b13 from "../../../../specification/v0_9/json/catalogs/basic/examples/13_coffee-order.json";
+import b14 from "../../../../specification/v0_9/json/catalogs/basic/examples/14_sports-player.json";
+import b15 from "../../../../specification/v0_9/json/catalogs/basic/examples/15_account-balance.json";
+import b16 from "../../../../specification/v0_9/json/catalogs/basic/examples/16_workout-summary.json";
+import b17 from "../../../../specification/v0_9/json/catalogs/basic/examples/17_event-detail.json";
+import b18 from "../../../../specification/v0_9/json/catalogs/basic/examples/18_track-list.json";
+import b19 from "../../../../specification/v0_9/json/catalogs/basic/examples/19_software-purchase.json";
+import b20 from "../../../../specification/v0_9/json/catalogs/basic/examples/20_restaurant-card.json";
+import b21 from "../../../../specification/v0_9/json/catalogs/basic/examples/21_shipping-status.json";
+import b22 from "../../../../specification/v0_9/json/catalogs/basic/examples/22_credit-card.json";
+import b23 from "../../../../specification/v0_9/json/catalogs/basic/examples/23_step-counter.json";
+import b24 from "../../../../specification/v0_9/json/catalogs/basic/examples/24_recipe-card.json";
+import b25 from "../../../../specification/v0_9/json/catalogs/basic/examples/25_contact-card.json";
+import b26 from "../../../../specification/v0_9/json/catalogs/basic/examples/26_podcast-episode.json";
+import b27 from "../../../../specification/v0_9/json/catalogs/basic/examples/27_stats-card.json";
+import b28 from "../../../../specification/v0_9/json/catalogs/basic/examples/28_countdown-timer.json";
+import b29 from "../../../../specification/v0_9/json/catalogs/basic/examples/29_movie-card.json";
+
 const exampleFiles = [
   {key: 'min1', data: min1, catalog: 'Minimal'},
   {key: 'min2', data: min2, catalog: 'Minimal'},
@@ -35,6 +66,35 @@ const exampleFiles = [
   {key: 'min5', data: min5, catalog: 'Minimal'},
   {key: 'min6', data: min6, catalog: 'Minimal'},
   {key: 'min7', data: min7, catalog: 'Minimal'},
+  { key: 'b01', data: b01, catalog: 'Basic' },
+  { key: 'b02', data: b02, catalog: 'Basic' },
+  { key: 'b03', data: b03, catalog: 'Basic' },
+  { key: 'b04', data: b04, catalog: 'Basic' },
+  { key: 'b05', data: b05, catalog: 'Basic' },
+  { key: 'b06', data: b06, catalog: 'Basic' },
+  { key: 'b07', data: b07, catalog: 'Basic' },
+  { key: 'b08', data: b08, catalog: 'Basic' },
+  { key: 'b09', data: b09, catalog: 'Basic' },
+  { key: 'b10', data: b10, catalog: 'Basic' },
+  { key: 'b11', data: b11, catalog: 'Basic' },
+  { key: 'b12', data: b12, catalog: 'Basic' },
+  { key: 'b13', data: b13, catalog: 'Basic' },
+  { key: 'b14', data: b14, catalog: 'Basic' },
+  { key: 'b15', data: b15, catalog: 'Basic' },
+  { key: 'b16', data: b16, catalog: 'Basic' },
+  { key: 'b17', data: b17, catalog: 'Basic' },
+  { key: 'b18', data: b18, catalog: 'Basic' },
+  { key: 'b19', data: b19, catalog: 'Basic' },
+  { key: 'b20', data: b20, catalog: 'Basic' },
+  { key: 'b21', data: b21, catalog: 'Basic' },
+  { key: 'b22', data: b22, catalog: 'Basic' },
+  { key: 'b23', data: b23, catalog: 'Basic' },
+  { key: 'b24', data: b24, catalog: 'Basic' },
+  { key: 'b25', data: b25, catalog: 'Basic' },
+  { key: 'b26', data: b26, catalog: 'Basic' },
+  { key: 'b27', data: b27, catalog: 'Basic' },
+  { key: 'b28', data: b28, catalog: 'Basic' },
+  { key: 'b29', data: b29, catalog: 'Basic' },
 ];
 
 const getMessages = (ex: { messages: A2uiMessage[] } | A2uiMessage[] | undefined) => (Array.isArray(ex) ? ex : ex?.messages);
@@ -78,7 +138,7 @@ export default function App() {
         if (prevProcessor) {
           prevProcessor.model.dispose();
         }
-        const newProcessor = new MessageProcessor([minimalCatalog], async (action: any) => {
+        const newProcessor = new MessageProcessor<ReactComponentImplementation>([minimalCatalog, basicCatalog], async (action: any) => {
           setLogs((l) => [...l, {time: new Date().toISOString(), action}]);
         });
 

renderers/react/package.json

@@ -73,7 +73,9 @@
   "dependencies": {
     "@a2ui/web_core": "file:../web_core",
     "clsx": "^2.1.0",
-    "markdown-it": "^14.0.0"
+    "markdown-it": "^14.0.0",
+    "zod": "^3.23.8",
+    "rxjs": "^7.8.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

renderers/react/src/v0_9/catalog/basic/components/AudioPlayer.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {createReactComponent} from '../../../adapter';
+import {AudioPlayerApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {getBaseLeafStyle} from '../utils';
+
+export const AudioPlayer = createReactComponent(AudioPlayerApi, ({props}) => {
+  const style: React.CSSProperties = {
+    ...getBaseLeafStyle(),
+    width: '100%',
+  };
+
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '4px', width: '100%'}}>
+      {props.description && (
+        <span style={{fontSize: '12px', color: '#666'}}>{props.description}</span>
+      )}
+      <audio src={props.url} controls style={style} />
+    </div>
+  );
+});

renderers/react/src/v0_9/catalog/basic/components/Button.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {createReactComponent} from '../../../adapter';
+import {ButtonApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {LEAF_MARGIN} from '../utils';
+
+export const Button = createReactComponent(ButtonApi, ({props, buildChild}) => {
+  const style: React.CSSProperties = {
+    margin: LEAF_MARGIN,
+    padding: '8px 16px',
+    cursor: 'pointer',
+    border: props.variant === 'borderless' ? 'none' : '1px solid #ccc',
+    backgroundColor:
+      props.variant === 'primary'
+        ? 'var(--a2ui-primary-color, #007bff)'
+        : props.variant === 'borderless'
+          ? 'transparent'
+          : '#fff',
+    color: props.variant === 'primary' ? '#fff' : 'inherit',
+    borderRadius: '4px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+  };
+
+  return (
+    <button style={style} onClick={props.action} disabled={props.isValid === false}>
+      {props.child ? buildChild(props.child) : null}
+    </button>
+  );
+});

renderers/react/src/v0_9/catalog/basic/components/Card.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {createReactComponent} from '../../../adapter';
+import {CardApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {getBaseContainerStyle} from '../utils';
+
+export const Card = createReactComponent(CardApi, ({props, buildChild}) => {
+  const style: React.CSSProperties = {
+    ...getBaseContainerStyle(),
+    backgroundColor: '#fff',
+    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+    width: '100%',
+  };
+
+  return <div style={style}>{props.child ? buildChild(props.child) : null}</div>;
+});

renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {createReactComponent} from '../../../adapter';
+import {CheckBoxApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {LEAF_MARGIN} from '../utils';
+
+export const CheckBox = createReactComponent(CheckBoxApi, ({props}) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    props.setValue(e.target.checked);
+  };
+
+  const uniqueId = React.useId();
+
+  const hasError = props.validationErrors && props.validationErrors.length > 0;
+
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', margin: LEAF_MARGIN}}>
+      <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
+        <input
+          id={uniqueId}
+          type="checkbox"
+          checked={!!props.value}
+          onChange={onChange}
+          style={{cursor: 'pointer', outline: hasError ? '1px solid red' : 'none'}}
+        />
+        {props.label && (
+          <label
+            htmlFor={uniqueId}
+            style={{cursor: 'pointer', color: hasError ? 'red' : 'inherit'}}
+          >
+            {props.label}
+          </label>
+        )}
+      </div>
+      {hasError && (
+        <span style={{fontSize: '12px', color: 'red', marginTop: '4px'}}>
+          {props.validationErrors[0]}
+        </span>
+      )}
+    </div>
+  );
+});

renderers/react/src/v0_9/catalog/basic/components/ChildList.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {type ComponentContext} from '@a2ui/web_core/v0_9';
+
+export const ChildList: React.FC<{
+  childList: unknown;
+  context: ComponentContext;
+  buildChild: (id: string, basePath?: string) => React.ReactNode;
+}> = ({childList, buildChild}) => {
+  if (Array.isArray(childList)) {
+    return (
+      <>
+        {childList.map((item: unknown, i: number) => {
+          // The new binder outputs objects like { id: string, basePath: string } for arrays of structural nodes
+          if (item && typeof item === 'object' && 'id' in item) {
+            const node = item as {id: string; basePath?: string};
+            return (
+              <React.Fragment key={`${node.id}-${i}`}>
+                {buildChild(node.id, node.basePath)}
+              </React.Fragment>
+            );
+          }
+          // Fallback for static string lists
+          if (typeof item === 'string') {
+            return <React.Fragment key={`${item}-${i}`}>{buildChild(item)}</React.Fragment>;
+          }
+          return null;
+        })}
+      </>
+    );
+  }
+
+  return null;
+};