@copilotkit/a2ui-renderer 1.51.4 → 1.51.5-next.1

package/dist/A2UIViewer.mjs

@@ -0,0 +1,152 @@
+"use client";
+
+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 { theme } from "./theme/viewer-theme.mjs";
+import React, { useEffect, useId, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/A2UIViewer.tsx
+let initialized = false;
+function ensureInitialized() {
+	if (!initialized) {
+		initializeDefaultCatalog();
+		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 = useId();
+	const surfaceId = 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 = 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__ */ jsx("div", {
+		className,
+		style: {
+			padding: 16,
+			color: "#666",
+			fontFamily: "system-ui"
+		},
+		children: "No content to display"
+	});
+	return /* @__PURE__ */ jsx(A2UIProvider, {
+		onAction: handleAction,
+		theme,
+		children: /* @__PURE__ */ 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 } = useA2UIActions();
+	const lastProcessedRef = useRef("");
+	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__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(A2UIRenderer, { 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
+export { A2UIViewer };
+//# sourceMappingURL=A2UIViewer.mjs.map

package/dist/A2UIViewer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIViewer.mjs","names":["viewerTheme"],"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/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,29 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;

package/dist/index.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_A2UIMessageRenderer = require('./A2UIMessageRenderer.cjs');
+const require_viewer_theme = require('./theme/viewer-theme.cjs');
+const require_A2UIViewer = require('./A2UIViewer.cjs');
+
+exports.A2UIViewer = require_A2UIViewer.A2UIViewer;
+exports.createA2UIMessageRenderer = require_A2UIMessageRenderer.createA2UIMessageRenderer;
+exports.viewerTheme = require_viewer_theme.theme;

package/dist/index.d.cts

@@ -0,0 +1,15 @@
+import { A2UIMessageRendererOptions, createA2UIMessageRenderer } from "./A2UIMessageRenderer.cjs";
+import { A2UIViewer, A2UIViewerProps } from "./A2UIViewer.cjs";
+import { theme } from "./theme/viewer-theme.cjs";
+import { v0_8 } from "@a2ui/lit";
+
+//#region src/index.d.ts
+type ComponentInstance = v0_8.Types.ComponentInstance;
+type UserAction = v0_8.Types.UserAction;
+type Action = v0_8.Types.Action;
+type ServerToClientMessage = v0_8.Types.ServerToClientMessage;
+type Surface = v0_8.Types.Surface;
+type AnyComponentNode = v0_8.Types.AnyComponentNode;
+//#endregion
+export { type A2UIMessageRendererOptions, A2UIViewer, type A2UIViewerProps, Action, AnyComponentNode, ComponentInstance, ServerToClientMessage, Surface, UserAction, createA2UIMessageRenderer, theme as viewerTheme };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;KAwBY,iBAAA,GAAoB,IAAA,CAAK,KAAA,CAAM,iBAAA;AAAA,KAC/B,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,UAAA;AAAA,KACxB,MAAA,GAAS,IAAA,CAAK,KAAA,CAAM,MAAA;AAAA,KACpB,qBAAA,GAAwB,IAAA,CAAK,KAAA,CAAM,qBAAA;AAAA,KACnC,OAAA,GAAU,IAAA,CAAK,KAAA,CAAM,OAAA;AAAA,KACrB,gBAAA,GAAmB,IAAA,CAAK,KAAA,CAAM,gBAAA"}

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+import { A2UIMessageRendererOptions, createA2UIMessageRenderer } from "./A2UIMessageRenderer.mjs";
+import { A2UIViewer, A2UIViewerProps } from "./A2UIViewer.mjs";
+import { theme } from "./theme/viewer-theme.mjs";
+import { v0_8 } from "@a2ui/lit";
+
+//#region src/index.d.ts
+type ComponentInstance = v0_8.Types.ComponentInstance;
+type UserAction = v0_8.Types.UserAction;
+type Action = v0_8.Types.Action;
+type ServerToClientMessage = v0_8.Types.ServerToClientMessage;
+type Surface = v0_8.Types.Surface;
+type AnyComponentNode = v0_8.Types.AnyComponentNode;
+//#endregion
+export { type A2UIMessageRendererOptions, A2UIViewer, type A2UIViewerProps, Action, AnyComponentNode, ComponentInstance, ServerToClientMessage, Surface, UserAction, createA2UIMessageRenderer, theme as viewerTheme };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;KAwBY,iBAAA,GAAoB,IAAA,CAAK,KAAA,CAAM,iBAAA;AAAA,KAC/B,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,UAAA;AAAA,KACxB,MAAA,GAAS,IAAA,CAAK,KAAA,CAAM,MAAA;AAAA,KACpB,qBAAA,GAAwB,IAAA,CAAK,KAAA,CAAM,qBAAA;AAAA,KACnC,OAAA,GAAU,IAAA,CAAK,KAAA,CAAM,OAAA;AAAA,KACrB,gBAAA,GAAmB,IAAA,CAAK,KAAA,CAAM,gBAAA"}

package/dist/index.mjs

@@ -0,0 +1,5 @@
+import { createA2UIMessageRenderer } from "./A2UIMessageRenderer.mjs";
+import { theme } from "./theme/viewer-theme.mjs";
+import { A2UIViewer } from "./A2UIViewer.mjs";
+
+export { A2UIViewer, createA2UIMessageRenderer, theme as viewerTheme };