Avac web core generic signals

renderers/react/a2ui_explorer/README.md

@@ -25,35 +25,40 @@ npm run build
 
 ## Setup and Development
 
-Once the dependencies are built, you can start the gallery app:
+Once the dependencies are built, you can start the gallery app from the parent directory:
 
 ```bash
-# Navigate to this directory
-cd renderers/react/a2ui_explorer
+# Navigate to the React renderer directory
+cd renderers/react
 
-# Install dependencies
-npm install
-
-# Start the development server
-npm run dev
+# Start the gallery app (Vite)
+npm run demo
 ```
 
+
 ## Building for Production
 
-To create a production build of the gallery app:
+To create a production build of the gallery app, run the following from the parent directory:
 
 ```bash
-npm run build
+# Navigate to the React renderer directory
+cd renderers/react
+
+npm run build:demo
 ```
 
 ## Running Tests
 
-To run the integration tests:
+To run the integration tests for the gallery app, run the following from the parent directory:
 
 ```bash
-npm test
+# Navigate to the React renderer directory
+cd renderers/react
+
+npm run test:demo
 ```
 
+
 ## Gallery Features
 
 - **3-Column Layout**: Left (Sample selection), Center (Live preview & Message stepper), Right (Data model & Action logs).

renderers/react/a2ui_explorer/src/App.tsx

@@ -16,10 +16,10 @@
 
 import {useState, useEffect, useSyncExternalStore, useCallback} from 'react';
 import {MessageProcessor, SurfaceModel} from '@a2ui/web_core/v0_9';
-import {minimalCatalog, basicCatalog, A2uiSurface, type ReactComponentImplementation} from '@a2ui/react/v0_9';
+import {minimalCatalog, basicCatalog, A2uiSurface, reactSignal, type ReactComponentImplementation} from '@a2ui/react/v0_9';
 import {exampleFiles, getMessages} from './examples';
 
-const DataModelViewer = ({surface}: {surface: SurfaceModel<any>}) => {
+const DataModelViewer = ({surface}: {surface: SurfaceModel<any, 'react'>;}) => {
   const subscribeHook = useCallback(
     (callback: () => void) => {
       const bound = surface.dataModel.subscribe('/', callback);
@@ -47,7 +47,7 @@ export default function App() {
   const selectedExample = exampleFiles.find((e) => e.key === selectedExampleKey)?.data as any;
 
   const [logs, setLogs] = useState<any[]>([]);
-  const [processor, setProcessor] = useState<MessageProcessor<ReactComponentImplementation> | null>(null);
+  const [processor, setProcessor] = useState<MessageProcessor<ReactComponentImplementation, 'react'> | null>(null);
   const [surfaces, setSurfaces] = useState<string[]>([]);
   const [currentMessageIndex, setCurrentMessageIndex] = useState(-1);
 
@@ -58,7 +58,7 @@ export default function App() {
         if (prevProcessor) {
           prevProcessor.model.dispose();
         }
-        const newProcessor = new MessageProcessor<ReactComponentImplementation>([minimalCatalog, basicCatalog], async (action: any) => {
+        const newProcessor = new MessageProcessor<ReactComponentImplementation, 'react'>([minimalCatalog, basicCatalog], reactSignal, async (action: any) => {
           setLogs((l) => [...l, {time: new Date().toISOString(), action}]);
         });
 

renderers/react/a2ui_explorer/src/integration.test.tsx

@@ -18,15 +18,15 @@ 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 {A2uiSurface, minimalCatalog, reactSignal} 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 () => {});
+    const processor = new MessageProcessor([minimalCatalog as any], reactSignal, async () => {});
     processor.processMessages(ex1.messages as any[]);
 
     const surface = processor.model.getSurface('example_1');
@@ -42,7 +42,7 @@ describe('Gallery Integration Tests', () => {
   });
 
   it('renders Row layout -> content visibility', async () => {
-    const processor = new MessageProcessor([minimalCatalog as any], async () => {});
+    const processor = new MessageProcessor([minimalCatalog as any], reactSignal, async () => {});
     processor.processMessages(ex2.messages as any[]);
 
     const surface = processor.model.getSurface('example_2');
@@ -59,7 +59,7 @@ describe('Gallery Integration Tests', () => {
   });
 
   it('handles Login form -> input updates data model', async () => {
-    const processor = new MessageProcessor([minimalCatalog as any], async () => {});
+    const processor = new MessageProcessor([minimalCatalog as any], reactSignal, async () => {});
     processor.processMessages(ex4.messages as any[]);
 
     const surface = processor.model.getSurface('example_4');