+ {description &&
+ );
+});
+
+export default AudioPlayer;
diff --git a/renderers/react/src/components/content/Divider.tsx b/renderers/react/src/components/content/Divider.tsx
new file mode 100644
index 000000000..962b94c86
--- /dev/null
+++ b/renderers/react/src/components/content/Divider.tsx
@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+
+/**
+ * Divider component - renders a visual separator line.
+ */
+export const Divider = memo(function Divider({ node, surfaceId }: A2UIComponentProps{description}
} + ++ ); +}); + +export default Divider; diff --git a/renderers/react/src/components/content/Icon.tsx b/renderers/react/src/components/content/Icon.tsx new file mode 100644 index 000000000..62253c9a8 --- /dev/null +++ b/renderers/react/src/components/content/Icon.tsx @@ -0,0 +1,51 @@ +import { memo } from 'react'; +import type { Types } from '@a2ui/lit/0.8'; +import type { A2UIComponentProps } from '../../types'; +import { useA2UIComponent } from '../../hooks/useA2UIComponent'; +import { classMapToString, stylesToObject } from '../../lib/utils'; + +/** + * Convert camelCase to snake_case for Material Symbols font. + * e.g., "shoppingCart" -> "shopping_cart" + * This matches the Lit renderer's approach. + */ +function toSnakeCase(str: string): string { + return str.replace(/([A-Z])/g, '_$1').toLowerCase(); +} + +/** + * Icon component - renders an icon using Material Symbols Outlined font. + * + * This matches the Lit renderer's approach using the g-icon class with + * Material Symbols Outlined font. + * + * @example Add Material Symbols font to your HTML: + * ```html + * + * ``` + */ +export const Icon = memo(function Icon({ node, surfaceId }: A2UIComponentProps
+ linkify: true, // Auto-convert URLs to links + typographer: true, // Smart quotes, dashes, etc. +}); + +/** + * Apply theme classes to markdown HTML elements. + * Replaces default element tags with themed versions. + */ +function applyMarkdownTheme(html: string, markdownTheme: Types.Theme['markdown']): string { + if (!markdownTheme) return html; + + // Map of element -> classes + const replacements: Array<[RegExp, string]> = []; + + for (const [element, classes] of Object.entries(markdownTheme)) { + if (!classes || (Array.isArray(classes) && classes.length === 0)) continue; + + const classString = Array.isArray(classes) ? classes.join(' ') : classMapToString(classes); + if (!classString) continue; + + // Create regex to match opening tags (handles self-closing and regular) + const tagRegex = new RegExp(`<${element}(?=\\s|>|/>)`, 'gi'); + replacements.push([tagRegex, `<${element} class="${classString}"`]); + } + + let result = html; + for (const [regex, replacement] of replacements) { + result = result.replace(regex, replacement); + } + + return result; +} + +/** + * Text component - renders text content with markdown support. + * + * Text is parsed as markdown and rendered as HTML (matches Lit renderer behavior). + * Supports usageHint values: h1, h2, h3, h4, h5, caption, body + * + * Markdown features supported: + * - **Bold** and *italic* text + * - Lists (ordered and unordered) + * - `inline code` and code blocks + * - [Links](url) (auto-linkified URLs too) + * - Blockquotes + * - Horizontal rules + * + * Note: Raw HTML is disabled for security. + */ +export const Text = memo(function Text({ node, surfaceId }: A2UIComponentProps
+
+
+ );
+ }
+
+ return (
+
+ );
+});
+
+export default Video;
diff --git a/renderers/react/src/components/content/index.ts b/renderers/react/src/components/content/index.ts
new file mode 100644
index 000000000..4f8989e24
--- /dev/null
+++ b/renderers/react/src/components/content/index.ts
@@ -0,0 +1,6 @@
+export { Text } from './Text';
+export { Image } from './Image';
+export { Icon } from './Icon';
+export { Divider } from './Divider';
+export { Video } from './Video';
+export { AudioPlayer } from './AudioPlayer';
diff --git a/renderers/react/src/components/interactive/Button.tsx b/renderers/react/src/components/interactive/Button.tsx
new file mode 100644
index 000000000..32c4fc07d
--- /dev/null
+++ b/renderers/react/src/components/interactive/Button.tsx
@@ -0,0 +1,35 @@
+import { useCallback, memo } from 'react';
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+import { ComponentNode } from '../../core/ComponentNode';
+
+/**
+ * Button component - a clickable element that triggers an action.
+ *
+ * Contains a child component (usually Text or Icon) and dispatches
+ * a user action when clicked.
+ */
+export const Button = memo(function Button({ node, surfaceId }: A2UIComponentProps
+
+
+ {/* Modal dialog - rendered in portal */}
+ {isOpen && createPortal(dialogContent, document.body)}
+
+ );
+});
+
+export default Modal;
diff --git a/renderers/react/src/components/layout/Row.tsx b/renderers/react/src/components/layout/Row.tsx
new file mode 100644
index 000000000..51b9320e1
--- /dev/null
+++ b/renderers/react/src/components/layout/Row.tsx
@@ -0,0 +1,70 @@
+import { memo } from 'react';
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+import { ComponentNode } from '../../core/ComponentNode';
+
+type Distribution = 'start' | 'center' | 'end' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
+type Alignment = 'start' | 'center' | 'end' | 'stretch';
+
+const distributionMap: Record
+ Loading...
+
+ );
+});
+
+export interface A2UIRendererProps {
+ /** The surface ID to render */
+ surfaceId: string;
+ /** Additional CSS classes for the surface container */
+ className?: string;
+ /** Fallback content when surface is not yet available */
+ fallback?: ReactNode;
+ /** Loading fallback for lazy-loaded components */
+ loadingFallback?: ReactNode;
+ /** Optional custom component registry */
+ registry?: ComponentRegistry;
+}
+
+/**
+ * A2UIRenderer - renders an A2UI surface.
+ *
+ * This is the main entry point for rendering A2UI content in your React app.
+ * It reads the surface state from the A2UI store and renders the component tree.
+ *
+ * Memoized to prevent unnecessary re-renders when props haven't changed.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ * return (
+ *
+
+
+
+ );
+});
+
+export default A2UIRenderer;
diff --git a/renderers/react/src/core/A2UIViewer.tsx b/renderers/react/src/core/A2UIViewer.tsx
new file mode 100644
index 000000000..34a624a27
--- /dev/null
+++ b/renderers/react/src/core/A2UIViewer.tsx
@@ -0,0 +1,217 @@
+'use client';
+
+import React, { useId, useMemo, useEffect, useRef } from 'react';
+import type { Types } from '@a2ui/lit/0.8';
+import { A2UIProvider, useA2UIActions } from './A2UIProvider';
+import { A2UIRenderer } from './A2UIRenderer';
+import { initializeDefaultCatalog } from '../registry/defaultCatalog';
+import { litTheme } from '../theme/litTheme';
+import { injectStyles } from '../styles';
+import type { OnActionCallback } from '../types';
+
+/**
+ * Component instance format for static A2UI definitions.
+ */
+export interface ComponentInstance {
+ id: string;
+ component: Record
+
+ );
+}
+
+/**
+ * Converts a nested JavaScript object to the ValueMap[] format
+ * expected by A2UI's dataModelUpdate message.
+ */
+function objectToValueMaps(obj: Record
+ Loading...
+
+ );
+});
+
+interface ComponentNodeProps {
+ /** The component node to render (can be null/undefined for safety) */
+ node: Types.AnyComponentNode | null | undefined;
+ /** The surface ID this component belongs to */
+ surfaceId: string;
+ /** Optional custom registry. Falls back to singleton. */
+ registry?: ComponentRegistry;
+}
+
+/**
+ * ComponentNode - dynamically renders an A2UI component based on its type.
+ *
+ * Looks up the component in the registry and renders it with the appropriate props.
+ * Supports lazy-loaded components via React.Suspense.
+ *
+ * Memoized to prevent unnecessary re-renders when parent updates but node hasn't changed.
+ */
+export const ComponentNode = memo(function ComponentNode({
+ node,
+ surfaceId,
+ registry,
+}: ComponentNodeProps) {
+ // Handle null/undefined/invalid nodes gracefully
+ if (!node || typeof node !== 'object' || !('type' in node)) {
+ if (node) {
+ console.warn('[A2UI] Invalid component node (not resolved?):', node);
+ }
+ return null;
+ }
+
+ const actualRegistry = registry ?? ComponentRegistry.getInstance();
+
+ const Component = useMemo(
+ () => actualRegistry.get(node.type),
+ [actualRegistry, node.type]
+ );
+
+ // Memoize wrapper style to mimic Lit's :host { display: block; flex: var(--weight); }
+ // Every component needs a block wrapper for proper containment in flex layouts
+ const wrapperStyle = useMemo
+
+ );
+});
+
+/** Memoized unknown component fallback */
+const UnknownComponent = memo(function UnknownComponent({ type }: { type: string }) {
+ return (
+
+ Unknown component: {type}
+
+ );
+});
+
+export default ComponentNode;
diff --git a/renderers/react/src/core/store.ts b/renderers/react/src/core/store.ts
new file mode 100644
index 000000000..30c206ab5
--- /dev/null
+++ b/renderers/react/src/core/store.ts
@@ -0,0 +1,56 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { OnActionCallback } from '../types';
+
+/**
+ * Stable actions that never change (won't cause re-renders).
+ * These are stored in a ref and exposed via A2UIActionsContext.
+ */
+export interface A2UIActions {
+ /** Process incoming server messages */
+ processMessages: (messages: Types.ServerToClientMessage[]) => void;
+
+ /** Update data in the data model (for two-way binding) */
+ setData: (
+ node: Types.AnyComponentNode | null,
+ path: string,
+ value: Types.DataValue,
+ surfaceId: string
+ ) => void;
+
+ /** Dispatch a user action to the server */
+ dispatch: (message: Types.A2UIClientEventMessage) => void;
+
+ /** Clear all surfaces */
+ clearSurfaces: () => void;
+
+ /** Get a surface by ID */
+ getSurface: (surfaceId: string) => Types.Surface | undefined;
+
+ /** Get all surfaces */
+ getSurfaces: () => ReadonlyMap
+ *
+ * setValue(node.properties.text?.path!, e.target.value)}
+ * />
+ *
+ * );
+ * }
+ * ```
+ */
+export function useA2UIComponent', async () => { + const messages = createSimpleMessages('text-1', 'Text', { + text: { literalString: 'Line 1\nLine 2' }, + }); + + const { container } = render( +