+ Surface: {surface.id}
+
+ );
+};
+
+export default function App() {
+ const [selectedExampleKey, setSelectedExampleKey] = useState(exampleFiles[0].key);
+ const selectedExample = exampleFiles.find((e) => e.key === selectedExampleKey)?.data as any;
+
+ const [logs, setLogs] = useState
+ {dataString}
+
+
+
+ {/* Left Column: Sample List */}
+
+ );
+}
diff --git a/renderers/react/a2ui_explorer/src/assets/react.svg b/renderers/react/a2ui_explorer/src/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/renderers/react/a2ui_explorer/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/renderers/react/a2ui_explorer/src/index.css b/renderers/react/a2ui_explorer/src/index.css
new file mode 100644
index 000000000..f1e01cfe6
--- /dev/null
+++ b/renderers/react/a2ui_explorer/src/index.css
@@ -0,0 +1,84 @@
+/**
+ * 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.
+ */
+
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/renderers/react/a2ui_explorer/src/integration.test.tsx b/renderers/react/a2ui_explorer/src/integration.test.tsx
new file mode 100644
index 000000000..e93ab0ca1
--- /dev/null
+++ b/renderers/react/a2ui_explorer/src/integration.test.tsx
@@ -0,0 +1,84 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { MessageProcessor } from '@a2ui/web_core/v0_9';
+import { A2uiSurface, minimalCatalog } from '@a2ui/react/v0_9';
+
+import ex1 from "../../../../specification/v0_9/json/catalogs/minimal/examples/1_simple_text.json";
+import ex2 from "../../../../specification/v0_9/json/catalogs/minimal/examples/2_row_layout.json";
+import ex4 from "../../../../specification/v0_9/json/catalogs/minimal/examples/4_login_form.json";
+
+describe('Gallery Integration Tests', () => {
+ it('renders Simple Text -> "Hello Minimal Catalog"', async () => {
+ const processor = new MessageProcessor([minimalCatalog as any], async () => {});
+ processor.processMessages(ex1.messages as any[]);
+
+ const surface = processor.model.getSurface("example_1");
+ expect(surface).toBeDefined();
+
+ render(
+
+
+
+ {/* Center Column: Preview & JSON Stepper */}
+ Samples
+-
+ {exampleFiles.map((ex) => (
+
- + + + ))} +
+
+
+ {/* Right Column: Live DataModelViewer & Action Logs */}
+
+
+
+ Preview
+ {surfaces.length === 0 &&No surfaces loaded. Advance the stepper to create one.
} + {surfaces.map((surfaceId) => { + const surface = processor?.model.getSurface(surfaceId); + if (!surface) return null; + return ( +
+
+ );
+ })}
+
+
+
+
+
+
+
+ Messages
+ +
+ {messages.map((msg: any, i: number) => {
+ const isActive = i <= currentMessageIndex;
+ return (
+
+
+
+ );
+ })}
+
+ Message {i + 1}
+ {!isActive && (
+
+ )}
+
+
+ {JSON.stringify(msg, null, 2)}
+
+
+
+
+
+
+
+ Data Model
+
+ {surfaces.length === 0 ?
+ Empty Data Model
: null} + {surfaces.map((surfaceId) => { + const surface = processor?.model.getSurface(surfaceId); + if (!surface) return null; + return
+
+ Action Logs
+
+ {logs.length === 0 ?
+ No actions logged yet.
: null} + {logs.map((log, i) => ( +
+ {log.time}
+
+ ))}
+ {JSON.stringify(log.action, null, 2)}
+
+ [Loading {id}...]
+
+ );
+ }
+
+ const compImpl = surface.catalog.components.get(componentModel.type);
+
+ if (!compImpl) {
+ return (
+
+ Unknown component: {componentModel.type}
+
+ );
+ }
+
+ const ComponentToRender = compImpl.render;
+ const context = new ComponentContext(surface, id, currentBasePath);
+
+ const buildChild = (childId: string, specificPath?: string) => {
+ return renderComponent(childId, specificPath || context.dataContext.path);
+ };
+
+ return (
+
+ Error rendering {id}: {e.message}
+
+ );
+ }
+ };
+
+ const hasRoot = surface.componentsModel.get('root') !== undefined;
+
+ if (!hasRoot) {
+ return Waiting for root component...
;
+ }
+
+ return <>{renderComponent('root', '/')};
+};
diff --git a/renderers/react/src/v0_9/adapter.tsx b/renderers/react/src/v0_9/adapter.tsx
new file mode 100644
index 000000000..5b2c31588
--- /dev/null
+++ b/renderers/react/src/v0_9/adapter.tsx
@@ -0,0 +1,96 @@
+/**
+ * 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, {useRef, useSyncExternalStore, useCallback} from 'react';
+import {type z} from 'zod';
+import {type ComponentContext, GenericBinder} from '@a2ui/web_core/v0_9';
+import type {ComponentApi, ResolveA2uiProps} from '@a2ui/web_core/v0_9';
+
+export interface ReactComponentImplementation extends ComponentApi {
+ /** The framework-specific rendering wrapper. */
+ render: React.FC<{
+ context: ComponentContext;
+ buildChild: (id: string, basePath?: string) => React.ReactNode;
+ }>;
+}
+
+export type ReactA2uiComponentProps
+ {props.description && (
+ {props.description}
+ )}
+
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactButton.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactButton.tsx
new file mode 100644
index 000000000..cd8e332e2
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactButton.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 ReactButton = 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 (
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactCard.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactCard.tsx
new file mode 100644
index 000000000..a945f3213
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactCard.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 ReactCard = createReactComponent(CardApi, ({props, buildChild}) => {
+ const style: React.CSSProperties = {
+ ...getBaseContainerStyle(),
+ backgroundColor: '#fff',
+ boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+ width: '100%',
+ };
+
+ return {props.child ? buildChild(props.child) : null}
;
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactCheckBox.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactCheckBox.tsx
new file mode 100644
index 000000000..6410f70d2
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactCheckBox.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 ReactCheckBox = createReactComponent(CheckBoxApi, ({props}) => {
+ const onChange = (e: React.ChangeEvent
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactChildList.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactChildList.tsx
new file mode 100644
index 000000000..a331304c4
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactChildList.tsx
@@ -0,0 +1,48 @@
+/**
+ * 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 ReactChildList: React.FC<{
+ childList: any;
+ context: ComponentContext;
+ buildChild: (id: string, basePath?: string) => React.ReactNode;
+}> = ({childList, buildChild}) => {
+ if (Array.isArray(childList)) {
+ return (
+ <>
+ {childList.map((item: any, i: number) => {
+ // The new binder outputs objects like { id: string, basePath: string } for arrays of structural nodes
+ if (item && typeof item === 'object' && item.id) {
+ return (
+
+
+ {props.label && (
+
+ )}
+
+ {hasError && (
+
+ {props.validationErrors![0]}
+
+ )}
+
+ {props.label && {props.label}}
+ {props.filterable && (
+ setFilter(e.target.value)}
+ style={{padding: '4px 8px', border: STANDARD_BORDER, borderRadius: STANDARD_RADIUS}}
+ />
+ )}
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactColumn.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactColumn.tsx
new file mode 100644
index 000000000..20c74f855
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactColumn.tsx
@@ -0,0 +1,38 @@
+/**
+ * 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 {createReactComponent} from '../../../adapter';
+import {ColumnApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {ReactChildList} from './ReactChildList';
+import {mapJustify, mapAlign} from '../utils';
+
+export const ReactColumn = createReactComponent(ColumnApi, ({props, buildChild, context}) => {
+ return (
+
+ {options.map((opt: any, i: number) => {
+ const isSelected = values.includes(opt.value);
+ if (props.displayStyle === 'chips') {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ })}
+
+
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactDateTimeInput.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactDateTimeInput.tsx
new file mode 100644
index 000000000..cbab5f52f
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactDateTimeInput.tsx
@@ -0,0 +1,68 @@
+/**
+ * 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 {DateTimeInputApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
+
+export const ReactDateTimeInput = createReactComponent(DateTimeInputApi, ({props}) => {
+ const onChange = (e: React.ChangeEvent
+ {props.label && (
+
+ )}
+
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactDivider.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactDivider.tsx
new file mode 100644
index 000000000..d0aa2e88b
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactDivider.tsx
@@ -0,0 +1,39 @@
+/**
+ * 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 {DividerApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {LEAF_MARGIN} from '../utils';
+
+export const ReactDivider = createReactComponent(DividerApi, ({props}) => {
+ const isVertical = props.axis === 'vertical';
+ const style: React.CSSProperties = {
+ margin: LEAF_MARGIN,
+ border: 'none',
+ backgroundColor: '#ccc',
+ };
+
+ if (isVertical) {
+ style.width = '1px';
+ style.height = '100%';
+ } else {
+ style.width = '100%';
+ style.height = '1px';
+ }
+
+ return ;
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactIcon.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactIcon.tsx
new file mode 100644
index 000000000..748c5579b
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactIcon.tsx
@@ -0,0 +1,39 @@
+/**
+ * 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 {IconApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {getBaseLeafStyle} from '../utils';
+
+export const ReactIcon = createReactComponent(IconApi, ({props}) => {
+ const iconName = typeof props.name === 'string' ? props.name : (props.name as any)?.path;
+ const style: React.CSSProperties = {
+ ...getBaseLeafStyle(),
+ fontSize: '24px',
+ width: '24px',
+ height: '24px',
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ };
+
+ return (
+
+ {iconName}
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactImage.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactImage.tsx
new file mode 100644
index 000000000..cb9e427f3
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactImage.tsx
@@ -0,0 +1,48 @@
+/**
+ * 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 {ImageApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {getBaseLeafStyle} from '../utils';
+
+export const ReactImage = createReactComponent(ImageApi, ({props}) => {
+ const style: React.CSSProperties = {
+ ...getBaseLeafStyle(),
+ objectFit: props.fit as any,
+ width: '100%',
+ height: 'auto',
+ display: 'block',
+ };
+
+ if (props.variant === 'icon') {
+ style.width = '24px';
+ style.height = '24px';
+ } else if (props.variant === 'avatar') {
+ style.width = '40px';
+ style.height = '40px';
+ style.borderRadius = '50%';
+ } else if (props.variant === 'smallFeature') {
+ style.maxWidth = '100px';
+ } else if (props.variant === 'largeFeature') {
+ style.maxHeight = '400px';
+ } else if (props.variant === 'header') {
+ style.height = '200px';
+ style.objectFit = 'cover';
+ }
+
+ return
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactModal.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactModal.tsx
new file mode 100644
index 000000000..70bb51b2f
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactModal.tsx
@@ -0,0 +1,77 @@
+/**
+ * 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 {useState} from 'react';
+import {createReactComponent} from '../../../adapter';
+import {ModalApi} from '@a2ui/web_core/v0_9/basic_catalog';
+
+export const ReactModal = createReactComponent(ModalApi, ({props, buildChild}) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ setIsOpen(true)} style={{display: 'inline-block'}}>
+ {props.trigger ? buildChild(props.trigger) : null}
+
+ {isOpen && (
+ setIsOpen(false)}
+ >
+
+ )}
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactRow.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactRow.tsx
new file mode 100644
index 000000000..900c6fb2c
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactRow.tsx
@@ -0,0 +1,38 @@
+/**
+ * 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 {createReactComponent} from '../../../adapter';
+import {RowApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {ReactChildList} from './ReactChildList';
+import {mapJustify, mapAlign} from '../utils';
+
+export const ReactRow = createReactComponent(RowApi, ({props, buildChild, context}) => {
+ return (
+ e.stopPropagation()}
+ >
+
+ {props.content ? buildChild(props.content) : null}
+
+
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactSlider.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactSlider.tsx
new file mode 100644
index 000000000..9b4f02c00
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactSlider.tsx
@@ -0,0 +1,58 @@
+/**
+ * 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 {SliderApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {LEAF_MARGIN} from '../utils';
+
+export const ReactSlider = createReactComponent(SliderApi, ({props}) => {
+ const onChange = (e: React.ChangeEvent
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactTabs.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactTabs.tsx
new file mode 100644
index 000000000..10ed1a4a0
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactTabs.tsx
@@ -0,0 +1,53 @@
+/**
+ * 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 {useState} from 'react';
+import {createReactComponent} from '../../../adapter';
+import {TabsApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {LEAF_MARGIN} from '../utils';
+
+export const ReactTabs = createReactComponent(TabsApi, ({props, buildChild}) => {
+ const [selectedIndex, setSelectedIndex] = useState(0);
+
+ const tabs = props.tabs || [];
+ const activeTab = tabs[selectedIndex];
+
+ return (
+
+ {props.label && (
+
+ )}
+ {props.value}
+
+
+
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactText.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactText.tsx
new file mode 100644
index 000000000..a4c5d631a
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactText.tsx
@@ -0,0 +1,46 @@
+/**
+ * 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 {TextApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {getBaseLeafStyle} from '../utils';
+
+export const ReactText = createReactComponent(TextApi, ({props}) => {
+ const text = props.text ?? '';
+ const style: React.CSSProperties = {
+ ...getBaseLeafStyle(),
+ display: 'inline-block',
+ };
+
+ switch (props.variant) {
+ case 'h1':
+ return
+ {tabs.map((tab: any, i: number) => (
+
+ ))}
+
+ {activeTab ? buildChild(activeTab.child) : null}
+ {text}
; + case 'h2': + return{text}
; + case 'h3': + return{text}
; + case 'h4': + return{text}
; + case 'h5': + return{text}
; + case 'caption': + return {text}; + case 'body': + default: + return {text}; + } +}); diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactTextField.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactTextField.tsx new file mode 100644 index 000000000..1c2b17ce9 --- /dev/null +++ b/renderers/react/src/v0_9/catalog/basic/components/ReactTextField.tsx @@ -0,0 +1,82 @@ +/** + * 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 {TextFieldApi} from '@a2ui/web_core/v0_9/basic_catalog'; +import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils'; + +export const ReactTextField = createReactComponent(TextFieldApi, ({props}) => { + const onChange = (e: React.ChangeEvent
+ {props.label && (
+
+ )}
+ {isLong ? (
+
+ ) : (
+
+ )}
+ {hasError && (
+ {props.validationErrors![0]}
+ )}
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ReactVideo.tsx b/renderers/react/src/v0_9/catalog/basic/components/ReactVideo.tsx
new file mode 100644
index 000000000..4e42dd0d6
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/components/ReactVideo.tsx
@@ -0,0 +1,30 @@
+/**
+ * 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 {VideoApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {getBaseLeafStyle} from '../utils';
+
+export const ReactVideo = createReactComponent(VideoApi, ({props}) => {
+ const style: React.CSSProperties = {
+ ...getBaseLeafStyle(),
+ width: '100%',
+ aspectRatio: '16/9',
+ };
+
+ return ;
+});
diff --git a/renderers/react/src/v0_9/catalog/basic/index.ts b/renderers/react/src/v0_9/catalog/basic/index.ts
new file mode 100644
index 000000000..cf63a72ee
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/basic/index.ts
@@ -0,0 +1,86 @@
+/**
+ * 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 {Catalog} from '@a2ui/web_core/v0_9';
+import {BASIC_FUNCTIONS} from '@a2ui/web_core/v0_9/basic_catalog';
+import type {ReactComponentImplementation} from '../../adapter';
+
+import {ReactText} from './components/ReactText';
+import {ReactImage} from './components/ReactImage';
+import {ReactIcon} from './components/ReactIcon';
+import {ReactVideo} from './components/ReactVideo';
+import {ReactAudioPlayer} from './components/ReactAudioPlayer';
+import {ReactRow} from './components/ReactRow';
+import {ReactColumn} from './components/ReactColumn';
+import {ReactList} from './components/ReactList';
+import {ReactCard} from './components/ReactCard';
+import {ReactTabs} from './components/ReactTabs';
+import {ReactDivider} from './components/ReactDivider';
+import {ReactModal} from './components/ReactModal';
+import {ReactButton} from './components/ReactButton';
+import {ReactTextField} from './components/ReactTextField';
+import {ReactCheckBox} from './components/ReactCheckBox';
+import {ReactChoicePicker} from './components/ReactChoicePicker';
+import {ReactSlider} from './components/ReactSlider';
+import {ReactDateTimeInput} from './components/ReactDateTimeInput';
+
+const basicComponents: ReactComponentImplementation[] = [
+ ReactText,
+ ReactImage,
+ ReactIcon,
+ ReactVideo,
+ ReactAudioPlayer,
+ ReactRow,
+ ReactColumn,
+ ReactList,
+ ReactCard,
+ ReactTabs,
+ ReactDivider,
+ ReactModal,
+ ReactButton,
+ ReactTextField,
+ ReactCheckBox,
+ ReactChoicePicker,
+ ReactSlider,
+ ReactDateTimeInput,
+];
+
+export const basicCatalog = new Catalog
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/minimal/components/ReactRow.tsx b/renderers/react/src/v0_9/catalog/minimal/components/ReactRow.tsx
new file mode 100644
index 000000000..831bb8bee
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/minimal/components/ReactRow.tsx
@@ -0,0 +1,84 @@
+/**
+ * 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 {createReactComponent} from '../../../adapter';
+import {z} from 'zod';
+import {CommonSchemas} from '@a2ui/web_core/v0_9';
+import {ReactChildList} from './ReactChildList';
+
+export const RowSchema = z.object({
+ children: CommonSchemas.ChildList,
+ justify: z
+ .enum(['center', 'end', 'spaceAround', 'spaceBetween', 'spaceEvenly', 'start', 'stretch'])
+ .optional(),
+ align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
+});
+
+const mapJustify = (j?: string) => {
+ switch (j) {
+ case 'center':
+ return 'center';
+ case 'end':
+ return 'flex-end';
+ case 'spaceAround':
+ return 'space-around';
+ case 'spaceBetween':
+ return 'space-between';
+ case 'spaceEvenly':
+ return 'space-evenly';
+ case 'start':
+ return 'flex-start';
+ case 'stretch':
+ return 'stretch';
+ default:
+ return 'flex-start';
+ }
+};
+
+const mapAlign = (a?: string) => {
+ switch (a) {
+ case 'start':
+ return 'flex-start';
+ case 'center':
+ return 'center';
+ case 'end':
+ return 'flex-end';
+ case 'stretch':
+ return 'stretch';
+ default:
+ return 'stretch';
+ }
+};
+
+export const RowApiDef = {
+ name: 'Row',
+ schema: RowSchema,
+};
+
+export const ReactRow = createReactComponent(RowApiDef, ({props, buildChild, context}) => {
+ return (
+
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/minimal/components/ReactText.tsx b/renderers/react/src/v0_9/catalog/minimal/components/ReactText.tsx
new file mode 100644
index 000000000..e9ca57bac
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/minimal/components/ReactText.tsx
@@ -0,0 +1,50 @@
+/**
+ * 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 {createReactComponent} from '../../../adapter';
+import {z} from 'zod';
+import {CommonSchemas} from '@a2ui/web_core/v0_9';
+
+export const TextSchema = z.object({
+ text: CommonSchemas.DynamicString,
+ variant: z.enum(['h1', 'h2', 'h3', 'h4', 'h5', 'caption', 'body']).optional(),
+});
+
+export const TextApiDef = {
+ name: 'Text',
+ schema: TextSchema,
+};
+
+export const ReactText = createReactComponent(TextApiDef, ({props}) => {
+ const text = props.text ?? '';
+ switch (props.variant) {
+ case 'h1':
+ return {text}
; + case 'h2': + return{text}
; + case 'h3': + return{text}
; + case 'h4': + return{text}
; + case 'h5': + return{text}
; + case 'caption': + return {text}; + case 'body': + default: + return {text}; + } +}); diff --git a/renderers/react/src/v0_9/catalog/minimal/components/ReactTextField.tsx b/renderers/react/src/v0_9/catalog/minimal/components/ReactTextField.tsx new file mode 100644 index 000000000..a53828fd1 --- /dev/null +++ b/renderers/react/src/v0_9/catalog/minimal/components/ReactTextField.tsx @@ -0,0 +1,72 @@ +/** + * 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 {z} from 'zod'; +import {CommonSchemas} from '@a2ui/web_core/v0_9'; + +export const TextFieldSchema = z.object({ + label: CommonSchemas.DynamicString, + value: CommonSchemas.DynamicString, + variant: z.enum(['longText', 'number', 'shortText', 'obscured']).optional(), + validationRegexp: z.string().optional(), +}); + +export const TextFieldApiDef = { + name: 'TextField', + schema: TextFieldSchema, +}; + +export const ReactTextField = createReactComponent(TextFieldApiDef, ({props, context}) => { + const onChange = (e: React.ChangeEvent
+ {props.label && (
+
+ )}
+ {isLong ? (
+
+ ) : (
+
+ )}
+
+ );
+});
diff --git a/renderers/react/src/v0_9/catalog/minimal/index.ts b/renderers/react/src/v0_9/catalog/minimal/index.ts
new file mode 100644
index 000000000..ba98e9dde
--- /dev/null
+++ b/renderers/react/src/v0_9/catalog/minimal/index.ts
@@ -0,0 +1,63 @@
+/**
+ * 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 {Catalog, createFunctionImplementation} from '@a2ui/web_core/v0_9';
+import {ReactText} from './components/ReactText';
+import {ReactButton} from './components/ReactButton';
+import {ReactRow} from './components/ReactRow';
+import {ReactColumn} from './components/ReactColumn';
+import {ReactTextField} from './components/ReactTextField';
+import type {ReactComponentImplementation} from '../../adapter';
+import {z} from 'zod';
+
+const minimalComponents: ReactComponentImplementation[] = [
+ ReactText,
+ ReactButton,
+ ReactRow,
+ ReactColumn,
+ ReactTextField,
+];
+
+export const minimalCatalog = new Catalog
+ {props.text}
+ {props.child && buildChild(props.child)}
+
;
+ }
+ );
+
+ const buildChild = vi.fn().mockImplementation((id) => Child
);
+
+ render({props.text}
;
+ }
+ );
+
+ const { getByTestId } = render({props.text}
;
+ }
+ );
+
+ const { unmount } = render(