@copilotkit/a2ui-renderer 1.51.5-next.0 → 1.51.5-next.2

package/dist/A2UIMessageRenderer.cjs

@@ -0,0 +1,135 @@
+const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
+const require_A2UIProvider = require('./react-renderer/core/A2UIProvider.cjs');
+const require_A2UIRenderer = require('./react-renderer/core/A2UIRenderer.cjs');
+const require_defaultCatalog = require('./react-renderer/registry/defaultCatalog.cjs');
+const require_index = require('./react-renderer/styles/index.cjs');
+let _copilotkit_react_core_v2 = require("@copilotkit/react-core/v2");
+let _a2ui_lit = require("@a2ui/lit");
+let react = require("react");
+let zod = require("zod");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/A2UIMessageRenderer.tsx
+let initialized = false;
+function ensureInitialized() {
+	if (!initialized) {
+		require_defaultCatalog.initializeDefaultCatalog();
+		require_index.injectStyles();
+		initialized = true;
+	}
+}
+function createA2UIMessageRenderer(options) {
+	const { theme } = options;
+	return {
+		activityType: "a2ui-surface",
+		content: zod.z.any(),
+		render: ({ content, agent }) => {
+			ensureInitialized();
+			const [operations, setOperations] = (0, react.useState)([]);
+			const lastSignatureRef = (0, react.useRef)(null);
+			const { copilotkit } = (0, _copilotkit_react_core_v2.useCopilotKit)();
+			(0, react.useEffect)(() => {
+				if (!content || !Array.isArray(content.operations)) {
+					lastSignatureRef.current = null;
+					setOperations([]);
+					return;
+				}
+				const incoming = content.operations;
+				const signature = stringifyOperations(incoming);
+				if (signature && signature === lastSignatureRef.current) return;
+				lastSignatureRef.current = signature;
+				setOperations(incoming);
+			}, [content]);
+			const groupedOperations = (0, react.useMemo)(() => {
+				const groups = /* @__PURE__ */ new Map();
+				for (const operation of operations) {
+					const surfaceId = getOperationSurfaceId(operation) ?? _a2ui_lit.v0_8.Data.A2uiMessageProcessor.DEFAULT_SURFACE_ID;
+					if (!groups.has(surfaceId)) groups.set(surfaceId, []);
+					groups.get(surfaceId).push(operation);
+				}
+				return groups;
+			}, [operations]);
+			if (!groupedOperations.size) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex min-h-0 flex-1 flex-col gap-6 overflow-auto py-6",
+				children: Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactSurfaceHost, {
+					surfaceId,
+					operations: ops,
+					theme,
+					agent,
+					copilotkit
+				}, surfaceId))
+			});
+		}
+	};
+}
+/**
+* Renders a single A2UI surface using the React renderer.
+* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
+*/
+function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex w-full flex-none overflow-hidden rounded-lg bg-white/5 p-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_A2UIProvider.A2UIProvider, {
+			onAction: (0, react.useCallback)(async (message) => {
+				if (!agent) return;
+				try {
+					console.info("[A2UI] Action dispatched", message.userAction);
+					copilotkit.setProperties({
+						...copilotkit.properties ?? {},
+						a2uiAction: message
+					});
+					await copilotkit.runAgent({ agent });
+				} finally {
+					if (copilotkit.properties) {
+						const { a2uiAction, ...rest } = copilotkit.properties;
+						copilotkit.setProperties(rest);
+					}
+				}
+			}, [agent, copilotkit]),
+			theme,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SurfaceMessageProcessor, {
+				surfaceId,
+				operations
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_A2UIRenderer.default, {
+				surfaceId,
+				className: "flex flex-1"
+			})]
+		})
+	});
+}
+/**
+* Processes A2UI operations into the provider's message processor.
+* Must be a child of A2UIProvider to access the actions context.
+*/
+function SurfaceMessageProcessor({ surfaceId, operations }) {
+	const { processMessages } = require_A2UIProvider.useA2UIActions();
+	const lastProcessedRef = (0, react.useRef)("");
+	(0, react.useEffect)(() => {
+		const key = `${surfaceId}-${JSON.stringify(operations)}`;
+		if (key === lastProcessedRef.current) return;
+		lastProcessedRef.current = key;
+		processMessages(operations);
+	}, [
+		processMessages,
+		surfaceId,
+		operations
+	]);
+	return null;
+}
+function getOperationSurfaceId(operation) {
+	if (!operation || typeof operation !== "object") return null;
+	if (typeof operation.surfaceId === "string") return operation.surfaceId;
+	return operation?.beginRendering?.surfaceId ?? operation?.surfaceUpdate?.surfaceId ?? operation?.dataModelUpdate?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? null;
+}
+function stringifyOperations(ops) {
+	try {
+		return JSON.stringify(ops);
+	} catch (error) {
+		return null;
+	}
+}
+
+//#endregion
+exports.createA2UIMessageRenderer = createA2UIMessageRenderer;
+//# sourceMappingURL=A2UIMessageRenderer.cjs.map

package/dist/A2UIMessageRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIMessageRenderer.cjs","names":["z","v0_8","A2UIProvider","A2UIRenderer","useA2UIActions"],"sources":["../src/A2UIMessageRenderer.tsx"],"sourcesContent":["import {\n  useCopilotKit,\n  type ReactActivityMessageRenderer,\n} from \"@copilotkit/react-core/v2\";\nimport { v0_8 } from \"@a2ui/lit\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport {\n  A2UIProvider,\n  useA2UIActions,\n} from \"./react-renderer/core/A2UIProvider\";\nimport { A2UIRenderer } from \"./react-renderer/core/A2UIRenderer\";\nimport { initializeDefaultCatalog } from \"./react-renderer/registry/defaultCatalog\";\nimport { injectStyles } from \"./react-renderer/styles\";\nimport type { Types } from \"@a2ui/lit/0.8\";\n\n// Initialize the React renderer's component catalog and styles once\nlet initialized = false;\nfunction ensureInitialized() {\n  if (!initialized) {\n    initializeDefaultCatalog();\n    injectStyles();\n    initialized = true;\n  }\n}\n\nexport type A2UIMessageRendererOptions = {\n  theme: v0_8.Types.Theme;\n};\n\nexport function createA2UIMessageRenderer(\n  options: A2UIMessageRendererOptions,\n): ReactActivityMessageRenderer<any> {\n  const { theme } = options;\n\n  return {\n    activityType: \"a2ui-surface\",\n    content: z.any(),\n    render: ({ content, agent }) => {\n      ensureInitialized();\n\n      const [operations, setOperations] = useState<any[]>([]);\n      const lastSignatureRef = useRef<string | null>(null);\n      const { copilotkit } = useCopilotKit();\n\n      useEffect(() => {\n        if (!content || !Array.isArray(content.operations)) {\n          lastSignatureRef.current = null;\n          setOperations([]);\n          return;\n        }\n\n        const incoming = content.operations as any[];\n        const signature = stringifyOperations(incoming);\n\n        if (signature && signature === lastSignatureRef.current) {\n          return;\n        }\n\n        lastSignatureRef.current = signature;\n        setOperations(incoming);\n      }, [content]);\n\n      // Group operations by surface ID\n      const groupedOperations = useMemo(() => {\n        const groups = new Map<string, any[]>();\n\n        for (const operation of operations) {\n          const surfaceId =\n            getOperationSurfaceId(operation) ??\n            v0_8.Data.A2uiMessageProcessor.DEFAULT_SURFACE_ID;\n\n          if (!groups.has(surfaceId)) {\n            groups.set(surfaceId, []);\n          }\n          groups.get(surfaceId)!.push(operation);\n        }\n\n        return groups;\n      }, [operations]);\n\n      if (!groupedOperations.size) {\n        return null;\n      }\n\n      return (\n        <div className=\"flex min-h-0 flex-1 flex-col gap-6 overflow-auto py-6\">\n          {Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => (\n            <ReactSurfaceHost\n              key={surfaceId}\n              surfaceId={surfaceId}\n              operations={ops}\n              theme={theme}\n              agent={agent}\n              copilotkit={copilotkit}\n            />\n          ))}\n        </div>\n      );\n    },\n  };\n}\n\ntype ReactSurfaceHostProps = {\n  surfaceId: string;\n  operations: any[];\n  theme: v0_8.Types.Theme;\n  agent: any;\n  copilotkit: any;\n};\n\n/**\n * Renders a single A2UI surface using the React renderer.\n * Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.\n */\nfunction ReactSurfaceHost({\n  surfaceId,\n  operations,\n  theme,\n  agent,\n  copilotkit,\n}: ReactSurfaceHostProps) {\n  // Bridge: when the React renderer dispatches an action, send it to CopilotKit\n  const handleAction = useCallback(\n    async (message: Types.A2UIClientEventMessage) => {\n      if (!agent) return;\n\n      try {\n        console.info(\"[A2UI] Action dispatched\", message.userAction);\n\n        copilotkit.setProperties({\n          ...(copilotkit.properties ?? {}),\n          a2uiAction: message,\n        });\n\n        await copilotkit.runAgent({ agent });\n      } finally {\n        if (copilotkit.properties) {\n          const { a2uiAction, ...rest } = copilotkit.properties;\n          copilotkit.setProperties(rest);\n        }\n      }\n    },\n    [agent, copilotkit],\n  );\n\n  return (\n    <div className=\"flex w-full flex-none overflow-hidden rounded-lg bg-white/5 p-4\">\n      <A2UIProvider onAction={handleAction} theme={theme}>\n        <SurfaceMessageProcessor\n          surfaceId={surfaceId}\n          operations={operations}\n        />\n        <A2UIRenderer surfaceId={surfaceId} className=\"flex flex-1\" />\n      </A2UIProvider>\n    </div>\n  );\n}\n\n/**\n * Processes A2UI operations into the provider's message processor.\n * Must be a child of A2UIProvider to access the actions context.\n */\nfunction SurfaceMessageProcessor({\n  surfaceId,\n  operations,\n}: {\n  surfaceId: string;\n  operations: any[];\n}) {\n  const { processMessages } = useA2UIActions();\n  const lastProcessedRef = useRef<string>(\"\");\n\n  useEffect(() => {\n    const key = `${surfaceId}-${JSON.stringify(operations)}`;\n    if (key === lastProcessedRef.current) return;\n    lastProcessedRef.current = key;\n\n    processMessages(operations);\n  }, [processMessages, surfaceId, operations]);\n\n  return null;\n}\n\nfunction getOperationSurfaceId(operation: any): string | null {\n  if (!operation || typeof operation !== \"object\") {\n    return null;\n  }\n\n  if (typeof operation.surfaceId === \"string\") {\n    return operation.surfaceId;\n  }\n\n  return (\n    operation?.beginRendering?.surfaceId ??\n    operation?.surfaceUpdate?.surfaceId ??\n    operation?.dataModelUpdate?.surfaceId ??\n    operation?.deleteSurface?.surfaceId ??\n    null\n  );\n}\n\nfunction stringifyOperations(ops: any[]): string | null {\n  try {\n    return JSON.stringify(ops);\n  } catch (error) {\n    return null;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAI,cAAc;AAClB,SAAS,oBAAoB;AAC3B,KAAI,CAAC,aAAa;AAChB,mDAA0B;AAC1B,8BAAc;AACd,gBAAc;;;AAQlB,SAAgB,0BACd,SACmC;CACnC,MAAM,EAAE,UAAU;AAElB,QAAO;EACL,cAAc;EACd,SAASA,MAAE,KAAK;EAChB,SAAS,EAAE,SAAS,YAAY;AAC9B,sBAAmB;GAEnB,MAAM,CAAC,YAAY,qCAAiC,EAAE,CAAC;GACvD,MAAM,qCAAyC,KAAK;GACpD,MAAM,EAAE,6DAA8B;AAEtC,8BAAgB;AACd,QAAI,CAAC,WAAW,CAAC,MAAM,QAAQ,QAAQ,WAAW,EAAE;AAClD,sBAAiB,UAAU;AAC3B,mBAAc,EAAE,CAAC;AACjB;;IAGF,MAAM,WAAW,QAAQ;IACzB,MAAM,YAAY,oBAAoB,SAAS;AAE/C,QAAI,aAAa,cAAc,iBAAiB,QAC9C;AAGF,qBAAiB,UAAU;AAC3B,kBAAc,SAAS;MACtB,CAAC,QAAQ,CAAC;GAGb,MAAM,6CAAkC;IACtC,MAAM,yBAAS,IAAI,KAAoB;AAEvC,SAAK,MAAM,aAAa,YAAY;KAClC,MAAM,YACJ,sBAAsB,UAAU,IAChCC,eAAK,KAAK,qBAAqB;AAEjC,SAAI,CAAC,OAAO,IAAI,UAAU,CACxB,QAAO,IAAI,WAAW,EAAE,CAAC;AAE3B,YAAO,IAAI,UAAU,CAAE,KAAK,UAAU;;AAGxC,WAAO;MACN,CAAC,WAAW,CAAC;AAEhB,OAAI,CAAC,kBAAkB,KACrB,QAAO;AAGT,UACE,2CAAC;IAAI,WAAU;cACZ,MAAM,KAAK,kBAAkB,SAAS,CAAC,CAAC,KAAK,CAAC,WAAW,SACxD,2CAAC;KAEY;KACX,YAAY;KACL;KACA;KACK;OALP,UAML,CACF;KACE;;EAGX;;;;;;AAeH,SAAS,iBAAiB,EACxB,WACA,YACA,OACA,OACA,cACwB;AAyBxB,QACE,2CAAC;EAAI,WAAU;YACb,4CAACC;GAAa,iCAxBhB,OAAO,YAA0C;AAC/C,QAAI,CAAC,MAAO;AAEZ,QAAI;AACF,aAAQ,KAAK,4BAA4B,QAAQ,WAAW;AAE5D,gBAAW,cAAc;MACvB,GAAI,WAAW,cAAc,EAAE;MAC/B,YAAY;MACb,CAAC;AAEF,WAAM,WAAW,SAAS,EAAE,OAAO,CAAC;cAC5B;AACR,SAAI,WAAW,YAAY;MACzB,MAAM,EAAE,YAAY,GAAG,SAAS,WAAW;AAC3C,iBAAW,cAAc,KAAK;;;MAIpC,CAAC,OAAO,WAAW,CACpB;GAIgD;cAC3C,2CAAC;IACY;IACC;KACZ,EACF,2CAACC;IAAwB;IAAW,WAAU;KAAgB;IACjD;GACX;;;;;;AAQV,SAAS,wBAAwB,EAC/B,WACA,cAIC;CACD,MAAM,EAAE,oBAAoBC,qCAAgB;CAC5C,MAAM,qCAAkC,GAAG;AAE3C,4BAAgB;EACd,MAAM,MAAM,GAAG,UAAU,GAAG,KAAK,UAAU,WAAW;AACtD,MAAI,QAAQ,iBAAiB,QAAS;AACtC,mBAAiB,UAAU;AAE3B,kBAAgB,WAAW;IAC1B;EAAC;EAAiB;EAAW;EAAW,CAAC;AAE5C,QAAO;;AAGT,SAAS,sBAAsB,WAA+B;AAC5D,KAAI,CAAC,aAAa,OAAO,cAAc,SACrC,QAAO;AAGT,KAAI,OAAO,UAAU,cAAc,SACjC,QAAO,UAAU;AAGnB,QACE,WAAW,gBAAgB,aAC3B,WAAW,eAAe,aAC1B,WAAW,iBAAiB,aAC5B,WAAW,eAAe,aAC1B;;AAIJ,SAAS,oBAAoB,KAA2B;AACtD,KAAI;AACF,SAAO,KAAK,UAAU,IAAI;UACnB,OAAO;AACd,SAAO"}

package/dist/A2UIMessageRenderer.d.cts

@@ -0,0 +1,11 @@
+import { ReactActivityMessageRenderer } from "@copilotkit/react-core/v2";
+import { v0_8 } from "@a2ui/lit";
+
+//#region src/A2UIMessageRenderer.d.ts
+type A2UIMessageRendererOptions = {
+  theme: v0_8.Types.Theme;
+};
+declare function createA2UIMessageRenderer(options: A2UIMessageRendererOptions): ReactActivityMessageRenderer<any>;
+//#endregion
+export { A2UIMessageRendererOptions, createA2UIMessageRenderer };
+//# sourceMappingURL=A2UIMessageRenderer.d.cts.map

package/dist/A2UIMessageRenderer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIMessageRenderer.d.cts","names":[],"sources":["../src/A2UIMessageRenderer.tsx"],"mappings":";;;;KA0BY,0BAAA;EACV,KAAA,EAAO,IAAA,CAAK,KAAA,CAAM,KAAA;AAAA;AAAA,iBAGJ,yBAAA,CACd,OAAA,EAAS,0BAAA,GACR,4BAAA"}

package/dist/A2UIMessageRenderer.d.mts

@@ -0,0 +1,11 @@
+import { ReactActivityMessageRenderer } from "@copilotkit/react-core/v2";
+import { v0_8 } from "@a2ui/lit";
+
+//#region src/A2UIMessageRenderer.d.ts
+type A2UIMessageRendererOptions = {
+  theme: v0_8.Types.Theme;
+};
+declare function createA2UIMessageRenderer(options: A2UIMessageRendererOptions): ReactActivityMessageRenderer<any>;
+//#endregion
+export { A2UIMessageRendererOptions, createA2UIMessageRenderer };
+//# sourceMappingURL=A2UIMessageRenderer.d.mts.map

package/dist/A2UIMessageRenderer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIMessageRenderer.d.mts","names":[],"sources":["../src/A2UIMessageRenderer.tsx"],"mappings":";;;;KA0BY,0BAAA;EACV,KAAA,EAAO,IAAA,CAAK,KAAA,CAAM,KAAA;AAAA;AAAA,iBAGJ,yBAAA,CACd,OAAA,EAAS,0BAAA,GACR,4BAAA"}

package/dist/A2UIMessageRenderer.mjs

@@ -0,0 +1,134 @@
+import { A2UIProvider, useA2UIActions } from "./react-renderer/core/A2UIProvider.mjs";
+import A2UIRenderer from "./react-renderer/core/A2UIRenderer.mjs";
+import { initializeDefaultCatalog } from "./react-renderer/registry/defaultCatalog.mjs";
+import { injectStyles } from "./react-renderer/styles/index.mjs";
+import { useCopilotKit } from "@copilotkit/react-core/v2";
+import { v0_8 } from "@a2ui/lit";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/A2UIMessageRenderer.tsx
+let initialized = false;
+function ensureInitialized() {
+	if (!initialized) {
+		initializeDefaultCatalog();
+		injectStyles();
+		initialized = true;
+	}
+}
+function createA2UIMessageRenderer(options) {
+	const { theme } = options;
+	return {
+		activityType: "a2ui-surface",
+		content: z.any(),
+		render: ({ content, agent }) => {
+			ensureInitialized();
+			const [operations, setOperations] = useState([]);
+			const lastSignatureRef = useRef(null);
+			const { copilotkit } = useCopilotKit();
+			useEffect(() => {
+				if (!content || !Array.isArray(content.operations)) {
+					lastSignatureRef.current = null;
+					setOperations([]);
+					return;
+				}
+				const incoming = content.operations;
+				const signature = stringifyOperations(incoming);
+				if (signature && signature === lastSignatureRef.current) return;
+				lastSignatureRef.current = signature;
+				setOperations(incoming);
+			}, [content]);
+			const groupedOperations = useMemo(() => {
+				const groups = /* @__PURE__ */ new Map();
+				for (const operation of operations) {
+					const surfaceId = getOperationSurfaceId(operation) ?? v0_8.Data.A2uiMessageProcessor.DEFAULT_SURFACE_ID;
+					if (!groups.has(surfaceId)) groups.set(surfaceId, []);
+					groups.get(surfaceId).push(operation);
+				}
+				return groups;
+			}, [operations]);
+			if (!groupedOperations.size) return null;
+			return /* @__PURE__ */ jsx("div", {
+				className: "flex min-h-0 flex-1 flex-col gap-6 overflow-auto py-6",
+				children: Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => /* @__PURE__ */ jsx(ReactSurfaceHost, {
+					surfaceId,
+					operations: ops,
+					theme,
+					agent,
+					copilotkit
+				}, surfaceId))
+			});
+		}
+	};
+}
+/**
+* Renders a single A2UI surface using the React renderer.
+* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
+*/
+function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full flex-none overflow-hidden rounded-lg bg-white/5 p-4",
+		children: /* @__PURE__ */ jsxs(A2UIProvider, {
+			onAction: useCallback(async (message) => {
+				if (!agent) return;
+				try {
+					console.info("[A2UI] Action dispatched", message.userAction);
+					copilotkit.setProperties({
+						...copilotkit.properties ?? {},
+						a2uiAction: message
+					});
+					await copilotkit.runAgent({ agent });
+				} finally {
+					if (copilotkit.properties) {
+						const { a2uiAction, ...rest } = copilotkit.properties;
+						copilotkit.setProperties(rest);
+					}
+				}
+			}, [agent, copilotkit]),
+			theme,
+			children: [/* @__PURE__ */ jsx(SurfaceMessageProcessor, {
+				surfaceId,
+				operations
+			}), /* @__PURE__ */ jsx(A2UIRenderer, {
+				surfaceId,
+				className: "flex flex-1"
+			})]
+		})
+	});
+}
+/**
+* Processes A2UI operations into the provider's message processor.
+* Must be a child of A2UIProvider to access the actions context.
+*/
+function SurfaceMessageProcessor({ surfaceId, operations }) {
+	const { processMessages } = useA2UIActions();
+	const lastProcessedRef = useRef("");
+	useEffect(() => {
+		const key = `${surfaceId}-${JSON.stringify(operations)}`;
+		if (key === lastProcessedRef.current) return;
+		lastProcessedRef.current = key;
+		processMessages(operations);
+	}, [
+		processMessages,
+		surfaceId,
+		operations
+	]);
+	return null;
+}
+function getOperationSurfaceId(operation) {
+	if (!operation || typeof operation !== "object") return null;
+	if (typeof operation.surfaceId === "string") return operation.surfaceId;
+	return operation?.beginRendering?.surfaceId ?? operation?.surfaceUpdate?.surfaceId ?? operation?.dataModelUpdate?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? null;
+}
+function stringifyOperations(ops) {
+	try {
+		return JSON.stringify(ops);
+	} catch (error) {
+		return null;
+	}
+}
+
+//#endregion
+export { createA2UIMessageRenderer };
+//# sourceMappingURL=A2UIMessageRenderer.mjs.map

package/dist/A2UIMessageRenderer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIMessageRenderer.mjs","names":[],"sources":["../src/A2UIMessageRenderer.tsx"],"sourcesContent":["import {\n  useCopilotKit,\n  type ReactActivityMessageRenderer,\n} from \"@copilotkit/react-core/v2\";\nimport { v0_8 } from \"@a2ui/lit\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport {\n  A2UIProvider,\n  useA2UIActions,\n} from \"./react-renderer/core/A2UIProvider\";\nimport { A2UIRenderer } from \"./react-renderer/core/A2UIRenderer\";\nimport { initializeDefaultCatalog } from \"./react-renderer/registry/defaultCatalog\";\nimport { injectStyles } from \"./react-renderer/styles\";\nimport type { Types } from \"@a2ui/lit/0.8\";\n\n// Initialize the React renderer's component catalog and styles once\nlet initialized = false;\nfunction ensureInitialized() {\n  if (!initialized) {\n    initializeDefaultCatalog();\n    injectStyles();\n    initialized = true;\n  }\n}\n\nexport type A2UIMessageRendererOptions = {\n  theme: v0_8.Types.Theme;\n};\n\nexport function createA2UIMessageRenderer(\n  options: A2UIMessageRendererOptions,\n): ReactActivityMessageRenderer<any> {\n  const { theme } = options;\n\n  return {\n    activityType: \"a2ui-surface\",\n    content: z.any(),\n    render: ({ content, agent }) => {\n      ensureInitialized();\n\n      const [operations, setOperations] = useState<any[]>([]);\n      const lastSignatureRef = useRef<string | null>(null);\n      const { copilotkit } = useCopilotKit();\n\n      useEffect(() => {\n        if (!content || !Array.isArray(content.operations)) {\n          lastSignatureRef.current = null;\n          setOperations([]);\n          return;\n        }\n\n        const incoming = content.operations as any[];\n        const signature = stringifyOperations(incoming);\n\n        if (signature && signature === lastSignatureRef.current) {\n          return;\n        }\n\n        lastSignatureRef.current = signature;\n        setOperations(incoming);\n      }, [content]);\n\n      // Group operations by surface ID\n      const groupedOperations = useMemo(() => {\n        const groups = new Map<string, any[]>();\n\n        for (const operation of operations) {\n          const surfaceId =\n            getOperationSurfaceId(operation) ??\n            v0_8.Data.A2uiMessageProcessor.DEFAULT_SURFACE_ID;\n\n          if (!groups.has(surfaceId)) {\n            groups.set(surfaceId, []);\n          }\n          groups.get(surfaceId)!.push(operation);\n        }\n\n        return groups;\n      }, [operations]);\n\n      if (!groupedOperations.size) {\n        return null;\n      }\n\n      return (\n        <div className=\"flex min-h-0 flex-1 flex-col gap-6 overflow-auto py-6\">\n          {Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => (\n            <ReactSurfaceHost\n              key={surfaceId}\n              surfaceId={surfaceId}\n              operations={ops}\n              theme={theme}\n              agent={agent}\n              copilotkit={copilotkit}\n            />\n          ))}\n        </div>\n      );\n    },\n  };\n}\n\ntype ReactSurfaceHostProps = {\n  surfaceId: string;\n  operations: any[];\n  theme: v0_8.Types.Theme;\n  agent: any;\n  copilotkit: any;\n};\n\n/**\n * Renders a single A2UI surface using the React renderer.\n * Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.\n */\nfunction ReactSurfaceHost({\n  surfaceId,\n  operations,\n  theme,\n  agent,\n  copilotkit,\n}: ReactSurfaceHostProps) {\n  // Bridge: when the React renderer dispatches an action, send it to CopilotKit\n  const handleAction = useCallback(\n    async (message: Types.A2UIClientEventMessage) => {\n      if (!agent) return;\n\n      try {\n        console.info(\"[A2UI] Action dispatched\", message.userAction);\n\n        copilotkit.setProperties({\n          ...(copilotkit.properties ?? {}),\n          a2uiAction: message,\n        });\n\n        await copilotkit.runAgent({ agent });\n      } finally {\n        if (copilotkit.properties) {\n          const { a2uiAction, ...rest } = copilotkit.properties;\n          copilotkit.setProperties(rest);\n        }\n      }\n    },\n    [agent, copilotkit],\n  );\n\n  return (\n    <div className=\"flex w-full flex-none overflow-hidden rounded-lg bg-white/5 p-4\">\n      <A2UIProvider onAction={handleAction} theme={theme}>\n        <SurfaceMessageProcessor\n          surfaceId={surfaceId}\n          operations={operations}\n        />\n        <A2UIRenderer surfaceId={surfaceId} className=\"flex flex-1\" />\n      </A2UIProvider>\n    </div>\n  );\n}\n\n/**\n * Processes A2UI operations into the provider's message processor.\n * Must be a child of A2UIProvider to access the actions context.\n */\nfunction SurfaceMessageProcessor({\n  surfaceId,\n  operations,\n}: {\n  surfaceId: string;\n  operations: any[];\n}) {\n  const { processMessages } = useA2UIActions();\n  const lastProcessedRef = useRef<string>(\"\");\n\n  useEffect(() => {\n    const key = `${surfaceId}-${JSON.stringify(operations)}`;\n    if (key === lastProcessedRef.current) return;\n    lastProcessedRef.current = key;\n\n    processMessages(operations);\n  }, [processMessages, surfaceId, operations]);\n\n  return null;\n}\n\nfunction getOperationSurfaceId(operation: any): string | null {\n  if (!operation || typeof operation !== \"object\") {\n    return null;\n  }\n\n  if (typeof operation.surfaceId === \"string\") {\n    return operation.surfaceId;\n  }\n\n  return (\n    operation?.beginRendering?.surfaceId ??\n    operation?.surfaceUpdate?.surfaceId ??\n    operation?.dataModelUpdate?.surfaceId ??\n    operation?.deleteSurface?.surfaceId ??\n    null\n  );\n}\n\nfunction stringifyOperations(ops: any[]): string | null {\n  try {\n    return JSON.stringify(ops);\n  } catch (error) {\n    return null;\n  }\n}\n"],"mappings":"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"}

package/dist/A2UIViewer.cjs

@@ -0,0 +1,154 @@
+"use client";
+
+const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
+const require_A2UIProvider = require('./react-renderer/core/A2UIProvider.cjs');
+const require_A2UIRenderer = require('./react-renderer/core/A2UIRenderer.cjs');
+const require_defaultCatalog = require('./react-renderer/registry/defaultCatalog.cjs');
+const require_index = require('./react-renderer/styles/index.cjs');
+const require_viewer_theme = require('./theme/viewer-theme.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/A2UIViewer.tsx
+let initialized = false;
+function ensureInitialized() {
+	if (!initialized) {
+		require_defaultCatalog.initializeDefaultCatalog();
+		require_index.injectStyles();
+		initialized = true;
+	}
+}
+/**
+* A2UIViewer renders an A2UI component tree from a JSON definition and data.
+* It re-renders cleanly when props change, discarding previous state.
+*/
+function A2UIViewer({ root, components, data, onAction, styles, className }) {
+	ensureInitialized();
+	const baseId = (0, react.useId)();
+	const surfaceId = (0, react.useMemo)(() => {
+		const definitionKey = `${root}-${JSON.stringify(components)}`;
+		let hash = 0;
+		for (let i = 0; i < definitionKey.length; i++) {
+			const char = definitionKey.charCodeAt(i);
+			hash = (hash << 5) - hash + char;
+			hash = hash & hash;
+		}
+		return `surface${baseId.replace(/:/g, "-")}${hash}`;
+	}, [
+		baseId,
+		root,
+		components
+	]);
+	const handleAction = (0, react.useMemo)(() => {
+		if (!onAction) return void 0;
+		return (message) => {
+			const userAction = message.userAction;
+			if (userAction) onAction({
+				actionName: userAction.name,
+				sourceComponentId: userAction.sourceComponentId,
+				timestamp: userAction.timestamp,
+				context: userAction.context ?? {}
+			});
+		};
+	}, [onAction]);
+	if (!components || components.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			padding: 16,
+			color: "#666",
+			fontFamily: "system-ui"
+		},
+		children: "No content to display"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_A2UIProvider.A2UIProvider, {
+		onAction: handleAction,
+		theme: require_viewer_theme.theme,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIViewerInner, {
+			surfaceId,
+			root,
+			components,
+			data: data ?? {},
+			styles,
+			className
+		})
+	});
+}
+/**
+* Inner component that processes messages within the provider context.
+*/
+function A2UIViewerInner({ surfaceId, root, components, data, styles, className }) {
+	const { processMessages } = require_A2UIProvider.useA2UIActions();
+	const lastProcessedRef = (0, react.useRef)("");
+	(0, react.useEffect)(() => {
+		const key = `${surfaceId}-${JSON.stringify(components)}-${JSON.stringify(data)}`;
+		if (key === lastProcessedRef.current) return;
+		lastProcessedRef.current = key;
+		const messages = [{ beginRendering: {
+			surfaceId,
+			root,
+			styles: styles ?? {}
+		} }, { surfaceUpdate: {
+			surfaceId,
+			components
+		} }];
+		if (data && Object.keys(data).length > 0) {
+			const contents = objectToValueMaps(data);
+			if (contents.length > 0) messages.push({ dataModelUpdate: {
+				surfaceId,
+				path: "/",
+				contents
+			} });
+		}
+		processMessages(messages);
+	}, [
+		processMessages,
+		surfaceId,
+		root,
+		components,
+		data,
+		styles
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_A2UIRenderer.default, { surfaceId })
+	});
+}
+/**
+* Converts a nested JavaScript object to the ValueMap[] format
+* expected by A2UI's dataModelUpdate message.
+*/
+function objectToValueMaps(obj) {
+	return Object.entries(obj).map(([key, value]) => valueToValueMap(key, value));
+}
+/**
+* Converts a single key-value pair to a ValueMap.
+*/
+function valueToValueMap(key, value) {
+	if (typeof value === "string") return {
+		key,
+		valueString: value
+	};
+	if (typeof value === "number") return {
+		key,
+		valueNumber: value
+	};
+	if (typeof value === "boolean") return {
+		key,
+		valueBoolean: value
+	};
+	if (value === null || value === void 0) return { key };
+	if (Array.isArray(value)) return {
+		key,
+		valueMap: value.map((item, index) => valueToValueMap(String(index), item))
+	};
+	if (typeof value === "object") return {
+		key,
+		valueMap: objectToValueMaps(value)
+	};
+	return { key };
+}
+
+//#endregion
+exports.A2UIViewer = A2UIViewer;
+//# sourceMappingURL=A2UIViewer.cjs.map

package/dist/A2UIViewer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIViewer.cjs","names":["A2UIProvider","viewerTheme","useA2UIActions","A2UIRenderer"],"sources":["../src/A2UIViewer.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useMemo, useEffect, useRef } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport { v0_8 } from \"@a2ui/lit\";\nimport {\n  A2UIProvider,\n  useA2UIActions,\n} from \"./react-renderer/core/A2UIProvider\";\nimport { A2UIRenderer } from \"./react-renderer/core/A2UIRenderer\";\nimport { initializeDefaultCatalog } from \"./react-renderer/registry/defaultCatalog\";\nimport { litTheme } from \"./react-renderer/theme/litTheme\";\nimport { injectStyles } from \"./react-renderer/styles\";\nimport { theme as viewerTheme } from \"./theme/viewer-theme.js\";\n\n// Re-export types that consumers may need\nexport interface ComponentInstance {\n  id: string;\n  component: Record<string, unknown>;\n}\n\nexport interface A2UIActionEvent {\n  actionName: string;\n  sourceComponentId: string;\n  timestamp: string;\n  context: Record<string, unknown>;\n}\n\nexport interface A2UIViewerProps {\n  /** ID of the root component to render */\n  root: string;\n  /** Component definitions - array of ComponentInstance */\n  components: v0_8.Types.ComponentInstance[];\n  /** Data model - nested object, e.g. { user: { name: \"John\" }, items: [\"a\", \"b\"] } */\n  data?: Record<string, unknown>;\n  /** Called when user triggers an action (button click, etc.) */\n  onAction?: (action: A2UIActionEvent) => void;\n  /** Surface styles (primaryColor, font, logoUrl) */\n  styles?: Record<string, string>;\n  /** Optional className for the container */\n  className?: string;\n}\n\n// Initialize the React renderer's component catalog and styles once\nlet initialized = false;\nfunction ensureInitialized() {\n  if (!initialized) {\n    initializeDefaultCatalog();\n    injectStyles();\n    initialized = true;\n  }\n}\n\n/**\n * A2UIViewer renders an A2UI component tree from a JSON definition and data.\n * It re-renders cleanly when props change, discarding previous state.\n */\nexport function A2UIViewer({\n  root,\n  components,\n  data,\n  onAction,\n  styles,\n  className,\n}: A2UIViewerProps): React.JSX.Element {\n  ensureInitialized();\n\n  // Use React's useId for SSR-safe base ID\n  const baseId = useId();\n\n  // Generate a stable surfaceId that changes when definition changes\n  const surfaceId = useMemo(() => {\n    const definitionKey = `${root}-${JSON.stringify(components)}`;\n    let hash = 0;\n    for (let i = 0; i < definitionKey.length; i++) {\n      const char = definitionKey.charCodeAt(i);\n      hash = (hash << 5) - hash + char;\n      hash = hash & hash;\n    }\n    return `surface${baseId.replace(/:/g, \"-\")}${hash}`;\n  }, [baseId, root, components]);\n\n  // Convert onAction callback to internal format\n  const handleAction = useMemo(() => {\n    if (!onAction) return undefined;\n\n    return (message: Types.A2UIClientEventMessage) => {\n      const userAction = message.userAction;\n      if (userAction) {\n        onAction({\n          actionName: userAction.name,\n          sourceComponentId: userAction.sourceComponentId,\n          timestamp: userAction.timestamp,\n          context: userAction.context ?? {},\n        });\n      }\n    };\n  }, [onAction]);\n\n  // Show placeholder if no components provided\n  if (!components || components.length === 0) {\n    return (\n      <div\n        className={className}\n        style={{ padding: 16, color: \"#666\", fontFamily: \"system-ui\" }}\n      >\n        No content to display\n      </div>\n    );\n  }\n\n  return (\n    <A2UIProvider onAction={handleAction} theme={viewerTheme}>\n      <A2UIViewerInner\n        surfaceId={surfaceId}\n        root={root}\n        components={components}\n        data={data ?? {}}\n        styles={styles}\n        className={className}\n      />\n    </A2UIProvider>\n  );\n}\n\n/**\n * Inner component that processes messages within the provider context.\n */\nfunction A2UIViewerInner({\n  surfaceId,\n  root,\n  components,\n  data,\n  styles,\n  className,\n}: {\n  surfaceId: string;\n  root: string;\n  components: v0_8.Types.ComponentInstance[];\n  data: Record<string, unknown>;\n  styles?: Record<string, string>;\n  className?: string;\n}) {\n  const { processMessages } = useA2UIActions();\n  const lastProcessedRef = useRef<string>(\"\");\n\n  // Process messages when props change\n  useEffect(() => {\n    const key = `${surfaceId}-${JSON.stringify(components)}-${JSON.stringify(data)}`;\n    if (key === lastProcessedRef.current) return;\n    lastProcessedRef.current = key;\n\n    const messages: Types.ServerToClientMessage[] = [\n      { beginRendering: { surfaceId, root, styles: styles ?? {} } },\n      { surfaceUpdate: { surfaceId, components } },\n    ];\n\n    // Add data model updates\n    if (data && Object.keys(data).length > 0) {\n      const contents = objectToValueMaps(data);\n      if (contents.length > 0) {\n        messages.push({\n          dataModelUpdate: { surfaceId, path: \"/\", contents },\n        });\n      }\n    }\n\n    processMessages(messages);\n  }, [processMessages, surfaceId, root, components, data, styles]);\n\n  return (\n    <div className={className}>\n      <A2UIRenderer surfaceId={surfaceId} />\n    </div>\n  );\n}\n\n/**\n * Converts a nested JavaScript object to the ValueMap[] format\n * expected by A2UI's dataModelUpdate message.\n */\nfunction objectToValueMaps(obj: Record<string, unknown>): Types.ValueMap[] {\n  return Object.entries(obj).map(([key, value]) => valueToValueMap(key, value));\n}\n\n/**\n * Converts a single key-value pair to a ValueMap.\n */\nfunction valueToValueMap(key: string, value: unknown): Types.ValueMap {\n  if (typeof value === \"string\") {\n    return { key, valueString: value };\n  }\n  if (typeof value === \"number\") {\n    return { key, valueNumber: value };\n  }\n  if (typeof value === \"boolean\") {\n    return { key, valueBoolean: value };\n  }\n  if (value === null || value === undefined) {\n    return { key };\n  }\n  if (Array.isArray(value)) {\n    const valueMap = value.map((item, index) =>\n      valueToValueMap(String(index), item),\n    );\n    return { key, valueMap };\n  }\n  if (typeof value === \"object\") {\n    const valueMap = objectToValueMaps(value as Record<string, unknown>);\n    return { key, valueMap };\n  }\n  return { key };\n}\n"],"mappings":"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"}

package/dist/A2UIViewer.d.cts

@@ -0,0 +1,39 @@
+import { v0_8 } from "@a2ui/lit";
+import React from "react";
+
+//#region src/A2UIViewer.d.ts
+interface A2UIActionEvent {
+  actionName: string;
+  sourceComponentId: string;
+  timestamp: string;
+  context: Record<string, unknown>;
+}
+interface A2UIViewerProps {
+  /** ID of the root component to render */
+  root: string;
+  /** Component definitions - array of ComponentInstance */
+  components: v0_8.Types.ComponentInstance[];
+  /** Data model - nested object, e.g. { user: { name: "John" }, items: ["a", "b"] } */
+  data?: Record<string, unknown>;
+  /** Called when user triggers an action (button click, etc.) */
+  onAction?: (action: A2UIActionEvent) => void;
+  /** Surface styles (primaryColor, font, logoUrl) */
+  styles?: Record<string, string>;
+  /** Optional className for the container */
+  className?: string;
+}
+/**
+ * A2UIViewer renders an A2UI component tree from a JSON definition and data.
+ * It re-renders cleanly when props change, discarding previous state.
+ */
+declare function A2UIViewer({
+  root,
+  components,
+  data,
+  onAction,
+  styles,
+  className
+}: A2UIViewerProps): React.JSX.Element;
+//#endregion
+export { A2UIViewer, A2UIViewerProps };
+//# sourceMappingURL=A2UIViewer.d.cts.map

package/dist/A2UIViewer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIViewer.d.cts","names":[],"sources":["../src/A2UIViewer.tsx"],"mappings":";;;;UAqBiB,eAAA;EACf,UAAA;EACA,iBAAA;EACA,SAAA;EACA,OAAA,EAAS,MAAA;AAAA;AAAA,UAGM,eAAA;EAHA;EAKf,IAAA;EAFe;EAIf,UAAA,EAAY,IAAA,CAAK,KAAA,CAAM,iBAAA;;EAEvB,IAAA,GAAO,MAAA;EAAA;EAEP,QAAA,IAAY,MAAA,EAAQ,eAAA;EAEX;EAAT,MAAA,GAAS,MAAA;EAAM;EAEf,SAAA;AAAA;;;;;iBAiBc,UAAA,CAAA;EACd,IAAA;EACA,UAAA;EACA,IAAA;EACA,QAAA;EACA,MAAA;EACA;AAAA,GACC,eAAA,GAAkB,KAAA,CAAM,GAAA,CAAI,OAAA"}

package/dist/A2UIViewer.d.mts

@@ -0,0 +1,39 @@
+import { v0_8 } from "@a2ui/lit";
+import React from "react";
+
+//#region src/A2UIViewer.d.ts
+interface A2UIActionEvent {
+  actionName: string;
+  sourceComponentId: string;
+  timestamp: string;
+  context: Record<string, unknown>;
+}
+interface A2UIViewerProps {
+  /** ID of the root component to render */
+  root: string;
+  /** Component definitions - array of ComponentInstance */
+  components: v0_8.Types.ComponentInstance[];
+  /** Data model - nested object, e.g. { user: { name: "John" }, items: ["a", "b"] } */
+  data?: Record<string, unknown>;
+  /** Called when user triggers an action (button click, etc.) */
+  onAction?: (action: A2UIActionEvent) => void;
+  /** Surface styles (primaryColor, font, logoUrl) */
+  styles?: Record<string, string>;
+  /** Optional className for the container */
+  className?: string;
+}
+/**
+ * A2UIViewer renders an A2UI component tree from a JSON definition and data.
+ * It re-renders cleanly when props change, discarding previous state.
+ */
+declare function A2UIViewer({
+  root,
+  components,
+  data,
+  onAction,
+  styles,
+  className
+}: A2UIViewerProps): React.JSX.Element;
+//#endregion
+export { A2UIViewer, A2UIViewerProps };
+//# sourceMappingURL=A2UIViewer.d.mts.map

package/dist/A2UIViewer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIViewer.d.mts","names":[],"sources":["../src/A2UIViewer.tsx"],"mappings":";;;;UAqBiB,eAAA;EACf,UAAA;EACA,iBAAA;EACA,SAAA;EACA,OAAA,EAAS,MAAA;AAAA;AAAA,UAGM,eAAA;EAHA;EAKf,IAAA;EAFe;EAIf,UAAA,EAAY,IAAA,CAAK,KAAA,CAAM,iBAAA;;EAEvB,IAAA,GAAO,MAAA;EAAA;EAEP,QAAA,IAAY,MAAA,EAAQ,eAAA;EAEX;EAAT,MAAA,GAAS,MAAA;EAAM;EAEf,SAAA;AAAA;;;;;iBAiBc,UAAA,CAAA;EACd,IAAA;EACA,UAAA;EACA,IAAA;EACA,QAAA;EACA,MAAA;EACA;AAAA,GACC,eAAA,GAAkB,KAAA,CAAM,GAAA,CAAI,OAAA"}