@copilotkit/a2ui-renderer 1.55.0-next.8 → 1.55.0

package/dist/react-renderer/core/A2UIProvider.d.cts

@@ -1,8 +1,8 @@
+import { Theme } from "../../a2ui-types.cjs";
 import { OnActionCallback } from "../types.cjs";
 import { A2UIActions, A2UIContextValue } from "./store.cjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
-import { Types } from "@a2ui/lit/0.8";
 
 //#region src/react-renderer/core/A2UIProvider.d.ts
 /**
@@ -11,81 +11,47 @@ import { Types } from "@a2ui/lit/0.8";
 interface A2UIProviderProps {
   /** Callback invoked when a user action is dispatched (button click, etc.) */
   onAction?: OnActionCallback;
-  /** Theme configuration. Falls back to default theme if not provided. */
-  theme?: Types.Theme;
+  /** Theme configuration */
+  theme?: Theme;
+  /** Optional component catalog to use instead of the default basicCatalog */
+  catalog?: any;
   /** Child components */
   children: ReactNode;
 }
 /**
- * Provider component that sets up the A2UI context for descendant components.
- *
- * This provider uses a two-context architecture for performance:
+ * Provider component that sets up the A2UI v0.9 context for descendant components.
+ * Uses a two-context architecture for performance:
  * - A2UIActionsContext: Stable actions that never change (no re-renders)
  * - A2UIStateContext: Reactive state that triggers re-renders when needed
- *
- * @example
- * ```tsx
- * function App() {
- *   const handleAction = async (message) => {
- *     const response = await fetch('/api/a2ui', {
- *       method: 'POST',
- *       body: JSON.stringify(message)
- *     });
- *     const newMessages = await response.json();
- *   };
- *
- *   return (
- *     <A2UIProvider onAction={handleAction}>
- *       <A2UIRenderer surfaceId="main" />
- *     </A2UIProvider>
- *   );
- * }
- * ```
  */
 declare function A2UIProvider({
   onAction,
   theme,
+  catalog,
   children
 }: A2UIProviderProps): react_jsx_runtime0.JSX.Element;
 /**
  * Hook to access stable A2UI actions (won't cause re-renders).
- * Use this when you only need to dispatch actions or read data.
- *
- * @returns Stable actions object
- * @throws If used outside of an A2UIProvider
  */
 declare function useA2UIActions(): A2UIActions;
 /**
  * Hook to subscribe to A2UI state changes.
- * Components using this will re-render when state changes.
- *
- * @returns Current version number
- * @throws If used outside of an A2UIProvider
  */
 declare function useA2UIState(): {
   version: number;
 };
 /**
  * Hook to access the full A2UI context (actions + state).
- * Components using this will re-render when state changes.
- *
- * @returns The A2UI context value
- * @throws If used outside of an A2UIProvider
  */
 declare function useA2UIContext(): A2UIContextValue;
-/**
- * @deprecated Use useA2UIContext instead. This alias exists for backward compatibility only.
- */
+/** @deprecated Use useA2UIContext instead. */
 declare const useA2UIStore: typeof useA2UIContext;
 /**
- * @deprecated This selector pattern does not provide performance benefits with React Context.
- * Components will re-render on any context change regardless of what you select.
- * Use useA2UIContext() or useA2UI() directly instead.
- *
- * @param selector - Function to select a slice of state
- * @returns The selected state
+ * Hook to access the current A2UI error state.
  */
+declare function useA2UIError(): string | null;
+/** @deprecated Use useA2UIContext() or useA2UI() directly instead. */
 declare function useA2UIStoreSelector<T>(selector: (state: A2UIContextValue) => T): T;
 //#endregion
-export { A2UIProvider, A2UIProviderProps, useA2UIActions, useA2UIContext, useA2UIState, useA2UIStore, useA2UIStoreSelector };
+export { A2UIProvider, A2UIProviderProps, useA2UIActions, useA2UIContext, useA2UIError, useA2UIState, useA2UIStore, useA2UIStoreSelector };
 //# sourceMappingURL=A2UIProvider.d.cts.map

package/dist/react-renderer/core/A2UIProvider.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"A2UIProvider.d.cts","names":[],"sources":["../../../src/react-renderer/core/A2UIProvider.tsx"],"mappings":";;;;;;;;;;UA4BiB,iBAAA;EAAiB;EAEhC,QAAA,GAAW,gBAAA;EAAA;EAEX,KAAA,GAAQ,KAAA,CAAM,KAAA;EAEJ;EAAV,QAAA,EAAU,SAAA;AAAA;;;;;;;;;;AA6BZ;;;;;;;;;;;;;;;;;iBAAgB,YAAA,CAAA;EAAe,QAAA;EAAU,KAAA;EAAO;AAAA,GAAY,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;AAuF7E;;;;iBAAgB,cAAA,CAAA,GAAkB,WAAA;AAelC;;;;;AAeA;;AAfA,iBAAgB,YAAA,CAAA;EAAkB,OAAA;AAAA;AAmClC;;;;;AAUA;;AAVA,iBApBgB,cAAA,CAAA,GAAkB,gBAAA;;;;cAoBrB,YAAA,SAAY,cAAA;;;;;;;;;iBAUT,oBAAA,GAAA,CACd,QAAA,GAAW,KAAA,EAAO,gBAAA,KAAqB,CAAA,GACtC,CAAA"}
+{"version":3,"file":"A2UIProvider.d.cts","names":[],"sources":["../../../src/react-renderer/core/A2UIProvider.tsx"],"mappings":";;;;;;;;;;UA+BiB,iBAAA;EAAiB;EAEhC,QAAA,GAAW,gBAAA;EAAA;EAEX,KAAA,GAAQ,KAAA;EAIE;EAFV,OAAA;EAEmB;EAAnB,QAAA,EAAU,SAAA;AAAA;;;;;;;iBASI,YAAA,CAAA;EACd,QAAA;EACA,KAAA;EACA,OAAA;EACA;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AALpB;;;AAAA,iBA+FgB,cAAA,CAAA,GAAkB,WAAA;;;;iBAWlB,YAAA,CAAA;EAAkB,OAAA;AAAA;;;;iBAWlB,cAAA,CAAA,GAAkB,gBAAA;;cAerB,YAAA,SAAY,cAAA;;;;iBAKT,YAAA,CAAA;;iBAMA,oBAAA,GAAA,CACd,QAAA,GAAW,KAAA,EAAO,gBAAA,KAAqB,CAAA,GACtC,CAAA"}

package/dist/react-renderer/core/A2UIProvider.d.mts

@@ -1,7 +1,7 @@
+import { Theme } from "../../a2ui-types.mjs";
 import { OnActionCallback } from "../types.mjs";
 import { A2UIActions, A2UIContextValue } from "./store.mjs";
 import { ReactNode } from "react";
-import { Types } from "@a2ui/lit/0.8";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/react-renderer/core/A2UIProvider.d.ts
@@ -11,81 +11,47 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 interface A2UIProviderProps {
   /** Callback invoked when a user action is dispatched (button click, etc.) */
   onAction?: OnActionCallback;
-  /** Theme configuration. Falls back to default theme if not provided. */
-  theme?: Types.Theme;
+  /** Theme configuration */
+  theme?: Theme;
+  /** Optional component catalog to use instead of the default basicCatalog */
+  catalog?: any;
   /** Child components */
   children: ReactNode;
 }
 /**
- * Provider component that sets up the A2UI context for descendant components.
- *
- * This provider uses a two-context architecture for performance:
+ * Provider component that sets up the A2UI v0.9 context for descendant components.
+ * Uses a two-context architecture for performance:
  * - A2UIActionsContext: Stable actions that never change (no re-renders)
  * - A2UIStateContext: Reactive state that triggers re-renders when needed
- *
- * @example
- * ```tsx
- * function App() {
- *   const handleAction = async (message) => {
- *     const response = await fetch('/api/a2ui', {
- *       method: 'POST',
- *       body: JSON.stringify(message)
- *     });
- *     const newMessages = await response.json();
- *   };
- *
- *   return (
- *     <A2UIProvider onAction={handleAction}>
- *       <A2UIRenderer surfaceId="main" />
- *     </A2UIProvider>
- *   );
- * }
- * ```
  */
 declare function A2UIProvider({
   onAction,
   theme,
+  catalog,
   children
 }: A2UIProviderProps): react_jsx_runtime0.JSX.Element;
 /**
  * Hook to access stable A2UI actions (won't cause re-renders).
- * Use this when you only need to dispatch actions or read data.
- *
- * @returns Stable actions object
- * @throws If used outside of an A2UIProvider
  */
 declare function useA2UIActions(): A2UIActions;
 /**
  * Hook to subscribe to A2UI state changes.
- * Components using this will re-render when state changes.
- *
- * @returns Current version number
- * @throws If used outside of an A2UIProvider
  */
 declare function useA2UIState(): {
   version: number;
 };
 /**
  * Hook to access the full A2UI context (actions + state).
- * Components using this will re-render when state changes.
- *
- * @returns The A2UI context value
- * @throws If used outside of an A2UIProvider
  */
 declare function useA2UIContext(): A2UIContextValue;
-/**
- * @deprecated Use useA2UIContext instead. This alias exists for backward compatibility only.
- */
+/** @deprecated Use useA2UIContext instead. */
 declare const useA2UIStore: typeof useA2UIContext;
 /**
- * @deprecated This selector pattern does not provide performance benefits with React Context.
- * Components will re-render on any context change regardless of what you select.
- * Use useA2UIContext() or useA2UI() directly instead.
- *
- * @param selector - Function to select a slice of state
- * @returns The selected state
+ * Hook to access the current A2UI error state.
  */
+declare function useA2UIError(): string | null;
+/** @deprecated Use useA2UIContext() or useA2UI() directly instead. */
 declare function useA2UIStoreSelector<T>(selector: (state: A2UIContextValue) => T): T;
 //#endregion
-export { A2UIProvider, A2UIProviderProps, useA2UIActions, useA2UIContext, useA2UIState, useA2UIStore, useA2UIStoreSelector };
+export { A2UIProvider, A2UIProviderProps, useA2UIActions, useA2UIContext, useA2UIError, useA2UIState, useA2UIStore, useA2UIStoreSelector };
 //# sourceMappingURL=A2UIProvider.d.mts.map

package/dist/react-renderer/core/A2UIProvider.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"A2UIProvider.d.mts","names":[],"sources":["../../../src/react-renderer/core/A2UIProvider.tsx"],"mappings":";;;;;;;;;;UA4BiB,iBAAA;EAAiB;EAEhC,QAAA,GAAW,gBAAA;EAAA;EAEX,KAAA,GAAQ,KAAA,CAAM,KAAA;EAEJ;EAAV,QAAA,EAAU,SAAA;AAAA;;;;;;;;;;AA6BZ;;;;;;;;;;;;;;;;;iBAAgB,YAAA,CAAA;EAAe,QAAA;EAAU,KAAA;EAAO;AAAA,GAAY,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;AAuF7E;;;;iBAAgB,cAAA,CAAA,GAAkB,WAAA;AAelC;;;;;AAeA;;AAfA,iBAAgB,YAAA,CAAA;EAAkB,OAAA;AAAA;AAmClC;;;;;AAUA;;AAVA,iBApBgB,cAAA,CAAA,GAAkB,gBAAA;;;;cAoBrB,YAAA,SAAY,cAAA;;;;;;;;;iBAUT,oBAAA,GAAA,CACd,QAAA,GAAW,KAAA,EAAO,gBAAA,KAAqB,CAAA,GACtC,CAAA"}
+{"version":3,"file":"A2UIProvider.d.mts","names":[],"sources":["../../../src/react-renderer/core/A2UIProvider.tsx"],"mappings":";;;;;;;;;;UA+BiB,iBAAA;EAAiB;EAEhC,QAAA,GAAW,gBAAA;EAAA;EAEX,KAAA,GAAQ,KAAA;EAIE;EAFV,OAAA;EAEmB;EAAnB,QAAA,EAAU,SAAA;AAAA;;;;;;;iBASI,YAAA,CAAA;EACd,QAAA;EACA,KAAA;EACA,OAAA;EACA;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AALpB;;;AAAA,iBA+FgB,cAAA,CAAA,GAAkB,WAAA;;;;iBAWlB,YAAA,CAAA;EAAkB,OAAA;AAAA;;;;iBAWlB,cAAA,CAAA,GAAkB,gBAAA;;cAerB,YAAA,SAAY,cAAA;;;;iBAKT,YAAA,CAAA;;iBAMA,oBAAA,GAAA,CACd,QAAA,GAAW,KAAA,EAAO,gBAAA,KAAqB,CAAA,GACtC,CAAA"}

package/dist/react-renderer/core/A2UIProvider.mjs

@@ -1,84 +1,77 @@
+import { basicCatalog } from "../a2ui-react/catalog/basic/index.mjs";
+import "../a2ui-react/index.mjs";
 import { ThemeProvider } from "../theme/ThemeContext.mjs";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
-import { Data } from "@a2ui/lit/0.8";
+import { MessageProcessor } from "@a2ui/web_core/v0_9";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/react-renderer/core/A2UIProvider.tsx
 /**
 * Context for stable actions (never changes reference, prevents re-renders).
-* Components that only need to dispatch actions or read data won't re-render.
 */
 const A2UIActionsContext = createContext(null);
 /**
 * Context for reactive state (changes trigger re-renders).
-* Only components that need to react to state changes subscribe to this.
 */
 const A2UIStateContext = createContext(null);
 /**
-* Provider component that sets up the A2UI context for descendant components.
-*
-* This provider uses a two-context architecture for performance:
+* Provider component that sets up the A2UI v0.9 context for descendant components.
+* Uses a two-context architecture for performance:
 * - A2UIActionsContext: Stable actions that never change (no re-renders)
 * - A2UIStateContext: Reactive state that triggers re-renders when needed
-*
-* @example
-* ```tsx
-* function App() {
-*   const handleAction = async (message) => {
-*     const response = await fetch('/api/a2ui', {
-*       method: 'POST',
-*       body: JSON.stringify(message)
-*     });
-*     const newMessages = await response.json();
-*   };
-*
-*   return (
-*     <A2UIProvider onAction={handleAction}>
-*       <A2UIRenderer surfaceId="main" />
-*     </A2UIProvider>
-*   );
-* }
-* ```
 */
-function A2UIProvider({ onAction, theme, children }) {
+function A2UIProvider({ onAction, theme, catalog, children }) {
+	const onActionRef = useRef(onAction ?? null);
+	onActionRef.current = onAction ?? null;
 	const processorRef = useRef(null);
-	if (!processorRef.current) processorRef.current = Data.createSignalA2uiMessageProcessor();
+	if (!processorRef.current) processorRef.current = new MessageProcessor([catalog ?? basicCatalog], (action) => {
+		if (onActionRef.current) {
+			const message = { userAction: {
+				name: action?.name ?? "unknown",
+				surfaceId: action?.surfaceId ?? "default",
+				sourceComponentId: action?.sourceComponentId,
+				context: action?.context,
+				timestamp: action?.timestamp ?? (/* @__PURE__ */ new Date()).toISOString()
+			} };
+			onActionRef.current(message);
+		}
+	});
 	const processor = processorRef.current;
 	const [version, setVersion] = useState(0);
-	const onActionRef = useRef(onAction ?? null);
-	onActionRef.current = onAction ?? null;
+	const [error, setError] = useState(null);
 	const actionsRef = useRef(null);
 	if (!actionsRef.current) actionsRef.current = {
 		processMessages: (messages) => {
-			processor.processMessages(messages);
-			setVersion((v) => v + 1);
-		},
-		setData: (node, path, value, surfaceId) => {
-			processor.setData(node, path, value, surfaceId);
+			try {
+				processor.processMessages(messages);
+			} catch (err) {
+				console.warn("[A2UI] processMessages error:", err);
+				setError(err instanceof Error ? err.message : String(err));
+				return;
+			}
+			setError(null);
 			setVersion((v) => v + 1);
 		},
 		dispatch: (message) => {
 			if (onActionRef.current) onActionRef.current(message);
 		},
-		clearSurfaces: () => {
-			processor.clearSurfaces();
-			setVersion((v) => v + 1);
-		},
 		getSurface: (surfaceId) => {
-			return processor.getSurfaces().get(surfaceId);
-		},
-		getSurfaces: () => {
-			return processor.getSurfaces();
+			return processor.model.getSurface(surfaceId);
 		},
-		getData: (node, path, surfaceId) => {
-			return processor.getData(node, path, surfaceId);
-		},
-		resolvePath: (path, dataContextPath) => {
-			return processor.resolvePath(path, dataContextPath);
+		clearSurfaces: () => {
+			const surfaces = processor.model.surfacesMap;
+			for (const [id] of surfaces) processor.processMessages([{
+				version: "v0.9",
+				deleteSurface: { surfaceId: id }
+			}]);
+			setVersion((v) => v + 1);
 		}
 	};
 	const actions = actionsRef.current;
-	const stateValue = useMemo(() => ({ version }), [version]);
+	const stateValue = useMemo(() => ({
+		version,
+		error
+	}), [version, error]);
 	return /* @__PURE__ */ jsx(A2UIActionsContext.Provider, {
 		value: actions,
 		children: /* @__PURE__ */ jsx(A2UIStateContext.Provider, {
@@ -92,10 +85,6 @@ function A2UIProvider({ onAction, theme, children }) {
 }
 /**
 * Hook to access stable A2UI actions (won't cause re-renders).
-* Use this when you only need to dispatch actions or read data.
-*
-* @returns Stable actions object
-* @throws If used outside of an A2UIProvider
 */
 function useA2UIActions() {
 	const actions = useContext(A2UIActionsContext);
@@ -104,10 +93,6 @@ function useA2UIActions() {
 }
 /**
 * Hook to subscribe to A2UI state changes.
-* Components using this will re-render when state changes.
-*
-* @returns Current version number
-* @throws If used outside of an A2UIProvider
 */
 function useA2UIState() {
 	const state = useContext(A2UIStateContext);
@@ -116,37 +101,29 @@ function useA2UIState() {
 }
 /**
 * Hook to access the full A2UI context (actions + state).
-* Components using this will re-render when state changes.
-*
-* @returns The A2UI context value
-* @throws If used outside of an A2UIProvider
 */
 function useA2UIContext() {
 	const actions = useA2UIActions();
 	const state = useA2UIState();
 	return useMemo(() => ({
 		...actions,
-		processor: null,
 		version: state.version,
 		onAction: null
 	}), [actions, state.version]);
 }
-/**
-* @deprecated Use useA2UIContext instead. This alias exists for backward compatibility only.
-*/
+/** @deprecated Use useA2UIContext instead. */
 const useA2UIStore = useA2UIContext;
 /**
-* @deprecated This selector pattern does not provide performance benefits with React Context.
-* Components will re-render on any context change regardless of what you select.
-* Use useA2UIContext() or useA2UI() directly instead.
-*
-* @param selector - Function to select a slice of state
-* @returns The selected state
+* Hook to access the current A2UI error state.
 */
+function useA2UIError() {
+	return useContext(A2UIStateContext)?.error ?? null;
+}
+/** @deprecated Use useA2UIContext() or useA2UI() directly instead. */
 function useA2UIStoreSelector(selector) {
 	return selector(useA2UIContext());
 }
 
 //#endregion
-export { A2UIProvider, useA2UIActions, useA2UIContext, useA2UIState, useA2UIStore, useA2UIStoreSelector };
+export { A2UIProvider, useA2UIActions, useA2UIContext, useA2UIError, useA2UIState, useA2UIStore, useA2UIStoreSelector };
 //# sourceMappingURL=A2UIProvider.mjs.map

package/dist/react-renderer/core/A2UIProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"A2UIProvider.mjs","names":[],"sources":["../../../src/react-renderer/core/A2UIProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  useState,\n  useMemo,\n  type ReactNode,\n} from \"react\";\nimport { Data, type Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIContextValue, A2UIActions } from \"./store\";\nimport { ThemeProvider } from \"../theme/ThemeContext\";\nimport type { OnActionCallback } from \"../types\";\n\n/**\n * Context for stable actions (never changes reference, prevents re-renders).\n * Components that only need to dispatch actions or read data won't re-render.\n */\nconst A2UIActionsContext = createContext<A2UIActions | null>(null);\n\n/**\n * Context for reactive state (changes trigger re-renders).\n * Only components that need to react to state changes subscribe to this.\n */\nconst A2UIStateContext = createContext<{ version: number } | null>(null);\n\n/**\n * Props for the A2UIProvider component.\n */\nexport interface A2UIProviderProps {\n  /** Callback invoked when a user action is dispatched (button click, etc.) */\n  onAction?: OnActionCallback;\n  /** Theme configuration. Falls back to default theme if not provided. */\n  theme?: Types.Theme;\n  /** Child components */\n  children: ReactNode;\n}\n\n/**\n * Provider component that sets up the A2UI context for descendant components.\n *\n * This provider uses a two-context architecture for performance:\n * - A2UIActionsContext: Stable actions that never change (no re-renders)\n * - A2UIStateContext: Reactive state that triggers re-renders when needed\n *\n * @example\n * ```tsx\n * function App() {\n *   const handleAction = async (message) => {\n *     const response = await fetch('/api/a2ui', {\n *       method: 'POST',\n *       body: JSON.stringify(message)\n *     });\n *     const newMessages = await response.json();\n *   };\n *\n *   return (\n *     <A2UIProvider onAction={handleAction}>\n *       <A2UIRenderer surfaceId=\"main\" />\n *     </A2UIProvider>\n *   );\n * }\n * ```\n */\nexport function A2UIProvider({ onAction, theme, children }: A2UIProviderProps) {\n  // Create message processor only once using ref\n  const processorRef = useRef<Types.MessageProcessor | null>(null);\n  if (!processorRef.current) {\n    processorRef.current = Data.createSignalA2uiMessageProcessor();\n  }\n  const processor = processorRef.current;\n\n  // Version counter for triggering re-renders\n  const [version, setVersion] = useState(0);\n\n  // Store onAction in a ref so callbacks always have the latest value\n  const onActionRef = useRef<OnActionCallback | null>(onAction ?? null);\n  onActionRef.current = onAction ?? null;\n\n  // Create stable actions object once - stored in ref, never changes\n  const actionsRef = useRef<A2UIActions | null>(null);\n  if (!actionsRef.current) {\n    actionsRef.current = {\n      processMessages: (messages: Types.ServerToClientMessage[]) => {\n        processor.processMessages(messages);\n        setVersion((v) => v + 1);\n      },\n\n      setData: (\n        node: Types.AnyComponentNode | null,\n        path: string,\n        value: Types.DataValue,\n        surfaceId: string,\n      ) => {\n        processor.setData(node, path, value, surfaceId);\n        setVersion((v) => v + 1);\n      },\n\n      dispatch: (message: Types.A2UIClientEventMessage) => {\n        if (onActionRef.current) {\n          onActionRef.current(message);\n        }\n      },\n\n      clearSurfaces: () => {\n        processor.clearSurfaces();\n        setVersion((v) => v + 1);\n      },\n\n      getSurface: (surfaceId: string) => {\n        return processor.getSurfaces().get(surfaceId);\n      },\n\n      getSurfaces: () => {\n        return processor.getSurfaces();\n      },\n\n      getData: (\n        node: Types.AnyComponentNode,\n        path: string,\n        surfaceId: string,\n      ) => {\n        return processor.getData(node, path, surfaceId);\n      },\n\n      resolvePath: (path: string, dataContextPath?: string) => {\n        return processor.resolvePath(path, dataContextPath);\n      },\n    };\n  }\n  const actions = actionsRef.current;\n\n  // State context value - only changes when version changes\n  const stateValue = useMemo(() => ({ version }), [version]);\n\n  return (\n    <A2UIActionsContext.Provider value={actions}>\n      <A2UIStateContext.Provider value={stateValue}>\n        <ThemeProvider theme={theme}>{children}</ThemeProvider>\n      </A2UIStateContext.Provider>\n    </A2UIActionsContext.Provider>\n  );\n}\n\n/**\n * Hook to access stable A2UI actions (won't cause re-renders).\n * Use this when you only need to dispatch actions or read data.\n *\n * @returns Stable actions object\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIActions(): A2UIActions {\n  const actions = useContext(A2UIActionsContext);\n  if (!actions) {\n    throw new Error(\"useA2UIActions must be used within an A2UIProvider\");\n  }\n  return actions;\n}\n\n/**\n * Hook to subscribe to A2UI state changes.\n * Components using this will re-render when state changes.\n *\n * @returns Current version number\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIState(): { version: number } {\n  const state = useContext(A2UIStateContext);\n  if (!state) {\n    throw new Error(\"useA2UIState must be used within an A2UIProvider\");\n  }\n  return state;\n}\n\n/**\n * Hook to access the full A2UI context (actions + state).\n * Components using this will re-render when state changes.\n *\n * @returns The A2UI context value\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIContext(): A2UIContextValue {\n  const actions = useA2UIActions();\n  const state = useA2UIState();\n\n  // Memoize combined value - only changes when state changes\n  // Actions are stable, so this only re-creates when version changes\n  return useMemo(\n    () => ({\n      ...actions,\n      processor: null as unknown as Types.MessageProcessor, // Not exposed directly\n      version: state.version,\n      onAction: null, // Use dispatch instead\n    }),\n    [actions, state.version],\n  );\n}\n\n/**\n * @deprecated Use useA2UIContext instead. This alias exists for backward compatibility only.\n */\nexport const useA2UIStore = useA2UIContext;\n\n/**\n * @deprecated This selector pattern does not provide performance benefits with React Context.\n * Components will re-render on any context change regardless of what you select.\n * Use useA2UIContext() or useA2UI() directly instead.\n *\n * @param selector - Function to select a slice of state\n * @returns The selected state\n */\nexport function useA2UIStoreSelector<T>(\n  selector: (state: A2UIContextValue) => T,\n): T {\n  const context = useA2UIContext();\n  return selector(context);\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,qBAAqB,cAAkC,KAAK;;;;;AAMlE,MAAM,mBAAmB,cAA0C,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCxE,SAAgB,aAAa,EAAE,UAAU,OAAO,YAA+B;CAE7E,MAAM,eAAe,OAAsC,KAAK;AAChE,KAAI,CAAC,aAAa,QAChB,cAAa,UAAU,KAAK,kCAAkC;CAEhE,MAAM,YAAY,aAAa;CAG/B,MAAM,CAAC,SAAS,cAAc,SAAS,EAAE;CAGzC,MAAM,cAAc,OAAgC,YAAY,KAAK;AACrE,aAAY,UAAU,YAAY;CAGlC,MAAM,aAAa,OAA2B,KAAK;AACnD,KAAI,CAAC,WAAW,QACd,YAAW,UAAU;EACnB,kBAAkB,aAA4C;AAC5D,aAAU,gBAAgB,SAAS;AACnC,eAAY,MAAM,IAAI,EAAE;;EAG1B,UACE,MACA,MACA,OACA,cACG;AACH,aAAU,QAAQ,MAAM,MAAM,OAAO,UAAU;AAC/C,eAAY,MAAM,IAAI,EAAE;;EAG1B,WAAW,YAA0C;AACnD,OAAI,YAAY,QACd,aAAY,QAAQ,QAAQ;;EAIhC,qBAAqB;AACnB,aAAU,eAAe;AACzB,eAAY,MAAM,IAAI,EAAE;;EAG1B,aAAa,cAAsB;AACjC,UAAO,UAAU,aAAa,CAAC,IAAI,UAAU;;EAG/C,mBAAmB;AACjB,UAAO,UAAU,aAAa;;EAGhC,UACE,MACA,MACA,cACG;AACH,UAAO,UAAU,QAAQ,MAAM,MAAM,UAAU;;EAGjD,cAAc,MAAc,oBAA6B;AACvD,UAAO,UAAU,YAAY,MAAM,gBAAgB;;EAEtD;CAEH,MAAM,UAAU,WAAW;CAG3B,MAAM,aAAa,eAAe,EAAE,SAAS,GAAG,CAAC,QAAQ,CAAC;AAE1D,QACE,oBAAC,mBAAmB;EAAS,OAAO;YAClC,oBAAC,iBAAiB;GAAS,OAAO;aAChC,oBAAC;IAAqB;IAAQ;KAAyB;IAC7B;GACA;;;;;;;;;AAWlC,SAAgB,iBAA8B;CAC5C,MAAM,UAAU,WAAW,mBAAmB;AAC9C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,qDAAqD;AAEvE,QAAO;;;;;;;;;AAUT,SAAgB,eAAoC;CAClD,MAAM,QAAQ,WAAW,iBAAiB;AAC1C,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,mDAAmD;AAErE,QAAO;;;;;;;;;AAUT,SAAgB,iBAAmC;CACjD,MAAM,UAAU,gBAAgB;CAChC,MAAM,QAAQ,cAAc;AAI5B,QAAO,eACE;EACL,GAAG;EACH,WAAW;EACX,SAAS,MAAM;EACf,UAAU;EACX,GACD,CAAC,SAAS,MAAM,QAAQ,CACzB;;;;;AAMH,MAAa,eAAe;;;;;;;;;AAU5B,SAAgB,qBACd,UACG;AAEH,QAAO,SADS,gBAAgB,CACR"}
+{"version":3,"file":"A2UIProvider.mjs","names":[],"sources":["../../../src/react-renderer/core/A2UIProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  useState,\n  useMemo,\n  type ReactNode,\n} from \"react\";\nimport { MessageProcessor } from \"@a2ui/web_core/v0_9\";\nimport { basicCatalog } from \"../a2ui-react\";\nimport type { A2UIContextValue, A2UIActions } from \"./store\";\nimport { ThemeProvider } from \"../theme/ThemeContext\";\nimport type { OnActionCallback } from \"../types\";\nimport type { A2UIClientEventMessage, Theme } from \"../../a2ui-types\";\n\n/**\n * Context for stable actions (never changes reference, prevents re-renders).\n */\nconst A2UIActionsContext = createContext<A2UIActions | null>(null);\n\n/**\n * Context for reactive state (changes trigger re-renders).\n */\nconst A2UIStateContext = createContext<{\n  version: number;\n  error: string | null;\n} | null>(null);\n\n/**\n * Props for the A2UIProvider component.\n */\nexport interface A2UIProviderProps {\n  /** Callback invoked when a user action is dispatched (button click, etc.) */\n  onAction?: OnActionCallback;\n  /** Theme configuration */\n  theme?: Theme;\n  /** Optional component catalog to use instead of the default basicCatalog */\n  catalog?: any;\n  /** Child components */\n  children: ReactNode;\n}\n\n/**\n * Provider component that sets up the A2UI v0.9 context for descendant components.\n * Uses a two-context architecture for performance:\n * - A2UIActionsContext: Stable actions that never change (no re-renders)\n * - A2UIStateContext: Reactive state that triggers re-renders when needed\n */\nexport function A2UIProvider({\n  onAction,\n  theme,\n  catalog,\n  children,\n}: A2UIProviderProps) {\n  // Store onAction in a ref so callbacks always have the latest value\n  const onActionRef = useRef<OnActionCallback | null>(onAction ?? null);\n  onActionRef.current = onAction ?? null;\n\n  // Create v0.9 MessageProcessor only once using ref\n  const processorRef = useRef<MessageProcessor<any> | null>(null);\n  if (!processorRef.current) {\n    processorRef.current = new MessageProcessor(\n      [catalog ?? basicCatalog],\n      // Action handler: convert v0.9 Action to A2UIClientEventMessage format\n      (action: any) => {\n        if (onActionRef.current) {\n          const message: A2UIClientEventMessage = {\n            userAction: {\n              name: action?.name ?? \"unknown\",\n              surfaceId: action?.surfaceId ?? \"default\",\n              sourceComponentId: action?.sourceComponentId,\n              context: action?.context,\n              timestamp: action?.timestamp ?? new Date().toISOString(),\n            },\n          };\n          onActionRef.current(message);\n        }\n      },\n    );\n  }\n  const processor = processorRef.current;\n\n  // Version counter for triggering re-renders\n  const [version, setVersion] = useState(0);\n\n  // Error state for graceful error handling\n  const [error, setError] = useState<string | null>(null);\n\n  // Create stable actions object once - stored in ref, never changes\n  const actionsRef = useRef<A2UIActions | null>(null);\n  if (!actionsRef.current) {\n    actionsRef.current = {\n      processMessages: (messages: Array<Record<string, unknown>>) => {\n        try {\n          processor.processMessages(messages as any[]);\n        } catch (err) {\n          console.warn(\"[A2UI] processMessages error:\", err);\n          setError(err instanceof Error ? err.message : String(err));\n          return;\n        }\n        setError(null);\n        setVersion((v) => v + 1);\n      },\n\n      dispatch: (message: any) => {\n        if (onActionRef.current) {\n          onActionRef.current(message);\n        }\n      },\n\n      getSurface: (surfaceId: string) => {\n        return processor.model.getSurface(surfaceId);\n      },\n\n      clearSurfaces: () => {\n        // Process a deleteSurface for all known surfaces\n        const surfaces = processor.model.surfacesMap;\n        for (const [id] of surfaces) {\n          processor.processMessages([\n            { version: \"v0.9\", deleteSurface: { surfaceId: id } } as any,\n          ]);\n        }\n        setVersion((v) => v + 1);\n      },\n    };\n  }\n  const actions = actionsRef.current;\n\n  // State context value - changes when version or error changes\n  const stateValue = useMemo(() => ({ version, error }), [version, error]);\n\n  return (\n    <A2UIActionsContext.Provider value={actions}>\n      <A2UIStateContext.Provider value={stateValue}>\n        <ThemeProvider theme={theme}>{children}</ThemeProvider>\n      </A2UIStateContext.Provider>\n    </A2UIActionsContext.Provider>\n  );\n}\n\n/**\n * Hook to access stable A2UI actions (won't cause re-renders).\n */\nexport function useA2UIActions(): A2UIActions {\n  const actions = useContext(A2UIActionsContext);\n  if (!actions) {\n    throw new Error(\"useA2UIActions must be used within an A2UIProvider\");\n  }\n  return actions;\n}\n\n/**\n * Hook to subscribe to A2UI state changes.\n */\nexport function useA2UIState(): { version: number } {\n  const state = useContext(A2UIStateContext);\n  if (!state) {\n    throw new Error(\"useA2UIState must be used within an A2UIProvider\");\n  }\n  return state;\n}\n\n/**\n * Hook to access the full A2UI context (actions + state).\n */\nexport function useA2UIContext(): A2UIContextValue {\n  const actions = useA2UIActions();\n  const state = useA2UIState();\n\n  return useMemo(\n    () => ({\n      ...actions,\n      version: state.version,\n      onAction: null,\n    }),\n    [actions, state.version],\n  );\n}\n\n/** @deprecated Use useA2UIContext instead. */\nexport const useA2UIStore = useA2UIContext;\n\n/**\n * Hook to access the current A2UI error state.\n */\nexport function useA2UIError(): string | null {\n  const state = useContext(A2UIStateContext);\n  return state?.error ?? null;\n}\n\n/** @deprecated Use useA2UIContext() or useA2UI() directly instead. */\nexport function useA2UIStoreSelector<T>(\n  selector: (state: A2UIContextValue) => T,\n): T {\n  const context = useA2UIContext();\n  return selector(context);\n}\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,qBAAqB,cAAkC,KAAK;;;;AAKlE,MAAM,mBAAmB,cAGf,KAAK;;;;;;;AAsBf,SAAgB,aAAa,EAC3B,UACA,OACA,SACA,YACoB;CAEpB,MAAM,cAAc,OAAgC,YAAY,KAAK;AACrE,aAAY,UAAU,YAAY;CAGlC,MAAM,eAAe,OAAqC,KAAK;AAC/D,KAAI,CAAC,aAAa,QAChB,cAAa,UAAU,IAAI,iBACzB,CAAC,WAAW,aAAa,GAExB,WAAgB;AACf,MAAI,YAAY,SAAS;GACvB,MAAM,UAAkC,EACtC,YAAY;IACV,MAAM,QAAQ,QAAQ;IACtB,WAAW,QAAQ,aAAa;IAChC,mBAAmB,QAAQ;IAC3B,SAAS,QAAQ;IACjB,WAAW,QAAQ,8BAAa,IAAI,MAAM,EAAC,aAAa;IACzD,EACF;AACD,eAAY,QAAQ,QAAQ;;GAGjC;CAEH,MAAM,YAAY,aAAa;CAG/B,MAAM,CAAC,SAAS,cAAc,SAAS,EAAE;CAGzC,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CAGvD,MAAM,aAAa,OAA2B,KAAK;AACnD,KAAI,CAAC,WAAW,QACd,YAAW,UAAU;EACnB,kBAAkB,aAA6C;AAC7D,OAAI;AACF,cAAU,gBAAgB,SAAkB;YACrC,KAAK;AACZ,YAAQ,KAAK,iCAAiC,IAAI;AAClD,aAAS,eAAe,QAAQ,IAAI,UAAU,OAAO,IAAI,CAAC;AAC1D;;AAEF,YAAS,KAAK;AACd,eAAY,MAAM,IAAI,EAAE;;EAG1B,WAAW,YAAiB;AAC1B,OAAI,YAAY,QACd,aAAY,QAAQ,QAAQ;;EAIhC,aAAa,cAAsB;AACjC,UAAO,UAAU,MAAM,WAAW,UAAU;;EAG9C,qBAAqB;GAEnB,MAAM,WAAW,UAAU,MAAM;AACjC,QAAK,MAAM,CAAC,OAAO,SACjB,WAAU,gBAAgB,CACxB;IAAE,SAAS;IAAQ,eAAe,EAAE,WAAW,IAAI;IAAE,CACtD,CAAC;AAEJ,eAAY,MAAM,IAAI,EAAE;;EAE3B;CAEH,MAAM,UAAU,WAAW;CAG3B,MAAM,aAAa,eAAe;EAAE;EAAS;EAAO,GAAG,CAAC,SAAS,MAAM,CAAC;AAExE,QACE,oBAAC,mBAAmB;EAAS,OAAO;YAClC,oBAAC,iBAAiB;GAAS,OAAO;aAChC,oBAAC;IAAqB;IAAQ;KAAyB;IAC7B;GACA;;;;;AAOlC,SAAgB,iBAA8B;CAC5C,MAAM,UAAU,WAAW,mBAAmB;AAC9C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,qDAAqD;AAEvE,QAAO;;;;;AAMT,SAAgB,eAAoC;CAClD,MAAM,QAAQ,WAAW,iBAAiB;AAC1C,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,mDAAmD;AAErE,QAAO;;;;;AAMT,SAAgB,iBAAmC;CACjD,MAAM,UAAU,gBAAgB;CAChC,MAAM,QAAQ,cAAc;AAE5B,QAAO,eACE;EACL,GAAG;EACH,SAAS,MAAM;EACf,UAAU;EACX,GACD,CAAC,SAAS,MAAM,QAAQ,CACzB;;;AAIH,MAAa,eAAe;;;;AAK5B,SAAgB,eAA8B;AAE5C,QADc,WAAW,iBAAiB,EAC5B,SAAS;;;AAIzB,SAAgB,qBACd,UACG;AAEH,QAAO,SADS,gBAAgB,CACR"}

package/dist/react-renderer/core/A2UIRenderer.cjs

@@ -1,6 +1,7 @@
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_A2uiSurface = require('../a2ui-react/A2uiSurface.cjs');
+require('../a2ui-react/index.cjs');
 const require_useA2UI = require('../hooks/useA2UI.cjs');
-const require_ComponentNode = require('./ComponentNode.cjs');
 const require_utils = require('../lib/utils.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -18,72 +19,23 @@ const DefaultLoadingFallback = (0, react.memo)(function DefaultLoadingFallback()
 	});
 });
 /**
-* A2UIRenderer - renders an A2UI surface.
+* A2UIRenderer - renders an A2UI surface using the v0.9 renderer.
 *
-* 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 (
-*     <A2UIProvider onAction={handleAction}>
-*       <A2UIRenderer surfaceId="main" />
-*     </A2UIProvider>
-*   );
-* }
-* ```
+* Uses A2uiSurface from a2ui-react which handles all component
+* rendering internally via the catalog system.
 */
-const A2UIRenderer = (0, react.memo)(function A2UIRenderer({ surfaceId, className, fallback = null, loadingFallback, registry }) {
+const A2UIRenderer = (0, react.memo)(function A2UIRenderer({ surfaceId, className, fallback = null, loadingFallback }) {
 	const { getSurface, version } = require_useA2UI.useA2UI();
 	const surface = getSurface(surfaceId);
-	const surfaceStyles = (0, react.useMemo)(() => {
-		if (!surface?.styles) return {};
-		const styles = {};
-		for (const [key, value] of Object.entries(surface.styles)) switch (key) {
-			case "primaryColor":
-				styles["--p-100"] = "#ffffff";
-				styles["--p-99"] = `color-mix(in srgb, ${value} 2%, white 98%)`;
-				styles["--p-98"] = `color-mix(in srgb, ${value} 4%, white 96%)`;
-				styles["--p-95"] = `color-mix(in srgb, ${value} 10%, white 90%)`;
-				styles["--p-90"] = `color-mix(in srgb, ${value} 20%, white 80%)`;
-				styles["--p-80"] = `color-mix(in srgb, ${value} 40%, white 60%)`;
-				styles["--p-70"] = `color-mix(in srgb, ${value} 60%, white 40%)`;
-				styles["--p-60"] = `color-mix(in srgb, ${value} 80%, white 20%)`;
-				styles["--p-50"] = String(value);
-				styles["--p-40"] = `color-mix(in srgb, ${value} 80%, black 20%)`;
-				styles["--p-35"] = `color-mix(in srgb, ${value} 70%, black 30%)`;
-				styles["--p-30"] = `color-mix(in srgb, ${value} 60%, black 40%)`;
-				styles["--p-25"] = `color-mix(in srgb, ${value} 50%, black 50%)`;
-				styles["--p-20"] = `color-mix(in srgb, ${value} 40%, black 60%)`;
-				styles["--p-15"] = `color-mix(in srgb, ${value} 30%, black 70%)`;
-				styles["--p-10"] = `color-mix(in srgb, ${value} 20%, black 80%)`;
-				styles["--p-5"] = `color-mix(in srgb, ${value} 10%, black 90%)`;
-				styles["--p-0"] = "#000000";
-				break;
-			case "font":
-				styles["--font-family"] = String(value);
-				styles["--font-family-flex"] = String(value);
-				break;
-		}
-		return styles;
-	}, [surface?.styles]);
-	if (!surface || !surface.componentTree) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	if (!surface) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
 	const actualLoadingFallback = loadingFallback ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultLoadingFallback, {});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_utils.cn("a2ui-surface", className),
-		style: surfaceStyles,
 		"data-surface-id": surfaceId,
 		"data-version": version,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
 			fallback: actualLoadingFallback,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
-				node: surface.componentTree,
-				surfaceId,
-				registry
-			})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_A2uiSurface.A2uiSurface, { surface })
 		})
 	});
 });

package/dist/react-renderer/core/A2UIRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"A2UIRenderer.cjs","names":["useA2UI","cn","Suspense","ComponentNode"],"sources":["../../../src/react-renderer/core/A2UIRenderer.tsx"],"sourcesContent":["import { Suspense, useMemo, memo, type ReactNode } from \"react\";\nimport { useA2UI } from \"../hooks/useA2UI\";\nimport { ComponentNode } from \"./ComponentNode\";\nimport { type ComponentRegistry } from \"../registry/ComponentRegistry\";\nimport { cn } from \"../lib/utils\";\n\n/** Default loading fallback - memoized to prevent recreation */\nconst DefaultLoadingFallback = memo(function DefaultLoadingFallback() {\n  return (\n    <div className=\"a2ui-loading\" style={{ padding: \"16px\", opacity: 0.5 }}>\n      Loading...\n    </div>\n  );\n});\n\nexport interface A2UIRendererProps {\n  /** The surface ID to render */\n  surfaceId: string;\n  /** Additional CSS classes for the surface container */\n  className?: string;\n  /** Fallback content when surface is not yet available */\n  fallback?: ReactNode;\n  /** Loading fallback for lazy-loaded components */\n  loadingFallback?: ReactNode;\n  /** Optional custom component registry */\n  registry?: ComponentRegistry;\n}\n\n/**\n * A2UIRenderer - renders an A2UI surface.\n *\n * This is the main entry point for rendering A2UI content in your React app.\n * It reads the surface state from the A2UI store and renders the component tree.\n *\n * Memoized to prevent unnecessary re-renders when props haven't changed.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <A2UIProvider onAction={handleAction}>\n *       <A2UIRenderer surfaceId=\"main\" />\n *     </A2UIProvider>\n *   );\n * }\n * ```\n */\nexport const A2UIRenderer = memo(function A2UIRenderer({\n  surfaceId,\n  className,\n  fallback = null,\n  loadingFallback,\n  registry,\n}: A2UIRendererProps) {\n  const { getSurface, version } = useA2UI();\n\n  // Get surface - this will re-render when version changes\n  const surface = getSurface(surfaceId);\n\n  // Memoize surface styles to prevent object recreation\n  // Matches Lit renderer's transformation logic in surface.ts\n  const surfaceStyles = useMemo<React.CSSProperties>(() => {\n    if (!surface?.styles) return {};\n\n    const styles: React.CSSProperties & Record<string, string> = {};\n\n    for (const [key, value] of Object.entries(surface.styles)) {\n      switch (key) {\n        // Generate a color palette from the primary color.\n        // Values range from 0-100 where 0=black, 100=white, 50=primary color.\n        // Uses color-mix to create intermediate values.\n        case \"primaryColor\": {\n          styles[\"--p-100\"] = \"#ffffff\";\n          styles[\"--p-99\"] = `color-mix(in srgb, ${value} 2%, white 98%)`;\n          styles[\"--p-98\"] = `color-mix(in srgb, ${value} 4%, white 96%)`;\n          styles[\"--p-95\"] = `color-mix(in srgb, ${value} 10%, white 90%)`;\n          styles[\"--p-90\"] = `color-mix(in srgb, ${value} 20%, white 80%)`;\n          styles[\"--p-80\"] = `color-mix(in srgb, ${value} 40%, white 60%)`;\n          styles[\"--p-70\"] = `color-mix(in srgb, ${value} 60%, white 40%)`;\n          styles[\"--p-60\"] = `color-mix(in srgb, ${value} 80%, white 20%)`;\n          styles[\"--p-50\"] = String(value);\n          styles[\"--p-40\"] = `color-mix(in srgb, ${value} 80%, black 20%)`;\n          styles[\"--p-35\"] = `color-mix(in srgb, ${value} 70%, black 30%)`;\n          styles[\"--p-30\"] = `color-mix(in srgb, ${value} 60%, black 40%)`;\n          styles[\"--p-25\"] = `color-mix(in srgb, ${value} 50%, black 50%)`;\n          styles[\"--p-20\"] = `color-mix(in srgb, ${value} 40%, black 60%)`;\n          styles[\"--p-15\"] = `color-mix(in srgb, ${value} 30%, black 70%)`;\n          styles[\"--p-10\"] = `color-mix(in srgb, ${value} 20%, black 80%)`;\n          styles[\"--p-5\"] = `color-mix(in srgb, ${value} 10%, black 90%)`;\n          styles[\"--p-0\"] = \"#000000\";\n          break;\n        }\n\n        case \"font\": {\n          styles[\"--font-family\"] = String(value);\n          styles[\"--font-family-flex\"] = String(value);\n          break;\n        }\n      }\n    }\n    return styles;\n  }, [surface?.styles]);\n\n  // No surface yet\n  if (!surface || !surface.componentTree) {\n    return <>{fallback}</>;\n  }\n\n  // Use provided fallback or default memoized component\n  const actualLoadingFallback = loadingFallback ?? <DefaultLoadingFallback />;\n\n  return (\n    <div\n      className={cn(\"a2ui-surface\", className)}\n      style={surfaceStyles}\n      data-surface-id={surfaceId}\n      data-version={version}\n    >\n      <Suspense fallback={actualLoadingFallback}>\n        <ComponentNode\n          node={surface.componentTree}\n          surfaceId={surfaceId}\n          registry={registry}\n        />\n      </Suspense>\n    </div>\n  );\n});\n\nexport default A2UIRenderer;\n"],"mappings":";;;;;;;;;AAOA,MAAM,yCAA8B,SAAS,yBAAyB;AACpE,QACE,2CAAC;EAAI,WAAU;EAAe,OAAO;GAAE,SAAS;GAAQ,SAAS;GAAK;YAAE;GAElE;EAER;;;;;;;;;;;;;;;;;;;;AAkCF,MAAa,+BAAoB,SAAS,aAAa,EACrD,WACA,WACA,WAAW,MACX,iBACA,YACoB;CACpB,MAAM,EAAE,YAAY,YAAYA,yBAAS;CAGzC,MAAM,UAAU,WAAW,UAAU;CAIrC,MAAM,yCAAmD;AACvD,MAAI,CAAC,SAAS,OAAQ,QAAO,EAAE;EAE/B,MAAM,SAAuD,EAAE;AAE/D,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,QAAQ,OAAO,CACvD,SAAQ,KAAR;GAIE,KAAK;AACH,WAAO,aAAa;AACpB,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,OAAO,MAAM;AAChC,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,YAAY,sBAAsB,MAAM;AAC/C,WAAO,WAAW,sBAAsB,MAAM;AAC9C,WAAO,WAAW;AAClB;GAGF,KAAK;AACH,WAAO,mBAAmB,OAAO,MAAM;AACvC,WAAO,wBAAwB,OAAO,MAAM;AAC5C;;AAIN,SAAO;IACN,CAAC,SAAS,OAAO,CAAC;AAGrB,KAAI,CAAC,WAAW,CAAC,QAAQ,cACvB,QAAO,mFAAG,WAAY;CAIxB,MAAM,wBAAwB,mBAAmB,2CAAC,2BAAyB;AAE3E,QACE,2CAAC;EACC,WAAWC,iBAAG,gBAAgB,UAAU;EACxC,OAAO;EACP,mBAAiB;EACjB,gBAAc;YAEd,2CAACC;GAAS,UAAU;aAClB,2CAACC;IACC,MAAM,QAAQ;IACH;IACD;KACV;IACO;GACP;EAER"}
+{"version":3,"file":"A2UIRenderer.cjs","names":["useA2UI","cn","Suspense","A2uiSurface"],"sources":["../../../src/react-renderer/core/A2UIRenderer.tsx"],"sourcesContent":["import { Suspense, memo, type ReactNode } from \"react\";\nimport { useA2UI } from \"../hooks/useA2UI\";\nimport { A2uiSurface } from \"../a2ui-react\";\nimport { cn } from \"../lib/utils\";\n\n/** Default loading fallback - memoized to prevent recreation */\nconst DefaultLoadingFallback = memo(function DefaultLoadingFallback() {\n  return (\n    <div className=\"a2ui-loading\" style={{ padding: \"16px\", opacity: 0.5 }}>\n      Loading...\n    </div>\n  );\n});\n\nexport interface A2UIRendererProps {\n  /** The surface ID to render */\n  surfaceId: string;\n  /** Additional CSS classes for the surface container */\n  className?: string;\n  /** Fallback content when surface is not yet available */\n  fallback?: ReactNode;\n  /** Loading fallback for lazy-loaded components */\n  loadingFallback?: ReactNode;\n  /** @deprecated - No longer needed in v0.9, components come from catalog */\n  registry?: any;\n}\n\n/**\n * A2UIRenderer - renders an A2UI surface using the v0.9 renderer.\n *\n * Uses A2uiSurface from a2ui-react which handles all component\n * rendering internally via the catalog system.\n */\nexport const A2UIRenderer = memo(function A2UIRenderer({\n  surfaceId,\n  className,\n  fallback = null,\n  loadingFallback,\n}: A2UIRendererProps) {\n  const { getSurface, version } = useA2UI();\n\n  // Get v0.9 SurfaceModel - this will re-render when version changes\n  const surface = getSurface(surfaceId);\n\n  // No surface yet\n  if (!surface) {\n    return <>{fallback}</>;\n  }\n\n  // Use provided fallback or default memoized component\n  const actualLoadingFallback = loadingFallback ?? <DefaultLoadingFallback />;\n\n  return (\n    <div\n      className={cn(\"a2ui-surface\", className)}\n      data-surface-id={surfaceId}\n      data-version={version}\n    >\n      <Suspense fallback={actualLoadingFallback}>\n        <A2uiSurface surface={surface} />\n      </Suspense>\n    </div>\n  );\n});\n\nexport default A2UIRenderer;\n"],"mappings":";;;;;;;;;;AAMA,MAAM,yCAA8B,SAAS,yBAAyB;AACpE,QACE,2CAAC;EAAI,WAAU;EAAe,OAAO;GAAE,SAAS;GAAQ,SAAS;GAAK;YAAE;GAElE;EAER;;;;;;;AAqBF,MAAa,+BAAoB,SAAS,aAAa,EACrD,WACA,WACA,WAAW,MACX,mBACoB;CACpB,MAAM,EAAE,YAAY,YAAYA,yBAAS;CAGzC,MAAM,UAAU,WAAW,UAAU;AAGrC,KAAI,CAAC,QACH,QAAO,mFAAG,WAAY;CAIxB,MAAM,wBAAwB,mBAAmB,2CAAC,2BAAyB;AAE3E,QACE,2CAAC;EACC,WAAWC,iBAAG,gBAAgB,UAAU;EACxC,mBAAiB;EACjB,gBAAc;YAEd,2CAACC;GAAS,UAAU;aAClB,2CAACC,mCAAqB,UAAW;IACxB;GACP;EAER"}

package/dist/react-renderer/core/A2UIRenderer.d.cts

@@ -1,4 +1,3 @@
-import { ComponentRegistry } from "../registry/ComponentRegistry.cjs";
 import * as react from "react";
 import { ReactNode } from "react";
 
@@ -12,27 +11,14 @@ interface A2UIRendererProps {
   fallback?: ReactNode;
   /** Loading fallback for lazy-loaded components */
   loadingFallback?: ReactNode;
-  /** Optional custom component registry */
-  registry?: ComponentRegistry;
+  /** @deprecated - No longer needed in v0.9, components come from catalog */
+  registry?: any;
 }
 /**
- * A2UIRenderer - renders an A2UI surface.
+ * A2UIRenderer - renders an A2UI surface using the v0.9 renderer.
  *
- * 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 (
- *     <A2UIProvider onAction={handleAction}>
- *       <A2UIRenderer surfaceId="main" />
- *     </A2UIProvider>
- *   );
- * }
- * ```
+ * Uses A2uiSurface from a2ui-react which handles all component
+ * rendering internally via the catalog system.
  */
 declare const A2UIRenderer: react.NamedExoticComponent<A2UIRendererProps>;
 //#endregion

package/dist/react-renderer/core/A2UIRenderer.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"A2UIRenderer.d.cts","names":[],"sources":["../../../src/react-renderer/core/A2UIRenderer.tsx"],"mappings":";;;;;UAeiB,iBAAA;;EAEf,SAAA;EAFe;EAIf,SAAA;;EAEA,QAAA,GAAW,SAAA;EAEO;EAAlB,eAAA,GAAkB,SAAA;EAEU;EAA5B,QAAA,GAAW,iBAAA;AAAA;;;;;;;;;;AAsBb;;;;;;;;;;cAAa,YAAA,EAAY,KAAA,CAAA,oBAAA,CAAA,iBAAA"}
+{"version":3,"file":"A2UIRenderer.d.cts","names":[],"sources":["../../../src/react-renderer/core/A2UIRenderer.tsx"],"mappings":";;;;UAciB,iBAAA;;EAEf,SAAA;EAFe;EAIf,SAAA;;EAEA,QAAA,GAAW,SAAA;EAJX;EAMA,eAAA,GAAkB,SAAA;EAFlB;EAIA,QAAA;AAAA;;;;;AASF;;cAAa,YAAA,EAAY,KAAA,CAAA,oBAAA,CAAA,iBAAA"}