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

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

@@ -0,0 +1,52 @@
+import { ComponentRegistry } from "../registry/ComponentRegistry.mjs";
+import { Suspense, memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-renderer/core/ComponentNode.tsx
+/** Memoized loading fallback to avoid recreating on each render */
+const LoadingFallback = memo(function LoadingFallback() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-loading",
+		style: {
+			padding: "8px",
+			opacity: .5
+		},
+		children: "Loading..."
+	});
+});
+/**
+* ComponentNode - dynamically renders an A2UI component based on its type.
+*
+* Looks up the component in the registry and renders it with the appropriate props.
+* Supports lazy-loaded components via React.Suspense.
+*
+* No wrapper div is rendered - the component's root div (e.g., .a2ui-image) is the
+* direct flex child, exactly matching Lit's structure where the :host element IS
+* the flex item. Each component handles --weight CSS variable on its root div.
+*
+* Memoized to prevent unnecessary re-renders when parent updates but node hasn't changed.
+*/
+const ComponentNode = memo(function ComponentNode({ node, surfaceId, registry }) {
+	const actualRegistry = registry ?? ComponentRegistry.getInstance();
+	const nodeType = node && typeof node === "object" && "type" in node ? node.type : null;
+	const Component = useMemo(() => nodeType ? actualRegistry.get(nodeType) : null, [actualRegistry, nodeType]);
+	if (!nodeType) {
+		if (node) console.warn("[A2UI] Invalid component node (not resolved?):", node);
+		return null;
+	}
+	if (!Component) {
+		console.warn(`[A2UI] Unknown component type: ${nodeType}`);
+		return null;
+	}
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+		children: /* @__PURE__ */ jsx(Component, {
+			node,
+			surfaceId
+		})
+	});
+});
+
+//#endregion
+export { ComponentNode as default };
+//# sourceMappingURL=ComponentNode.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentNode.mjs","names":[],"sources":["../../../src/react-renderer/core/ComponentNode.tsx"],"sourcesContent":["import { Suspense, useMemo, memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport { ComponentRegistry } from \"../registry/ComponentRegistry\";\n\n/** Memoized loading fallback to avoid recreating on each render */\nconst LoadingFallback = memo(function LoadingFallback() {\n  return (\n    <div className=\"a2ui-loading\" style={{ padding: \"8px\", opacity: 0.5 }}>\n      Loading...\n    </div>\n  );\n});\n\ninterface ComponentNodeProps {\n  /** The component node to render (can be null/undefined for safety) */\n  node: Types.AnyComponentNode | null | undefined;\n  /** The surface ID this component belongs to */\n  surfaceId: string;\n  /** Optional custom registry. Falls back to singleton. */\n  registry?: ComponentRegistry;\n}\n\n/**\n * ComponentNode - dynamically renders an A2UI component based on its type.\n *\n * Looks up the component in the registry and renders it with the appropriate props.\n * Supports lazy-loaded components via React.Suspense.\n *\n * No wrapper div is rendered - the component's root div (e.g., .a2ui-image) is the\n * direct flex child, exactly matching Lit's structure where the :host element IS\n * the flex item. Each component handles --weight CSS variable on its root div.\n *\n * Memoized to prevent unnecessary re-renders when parent updates but node hasn't changed.\n */\nexport const ComponentNode = memo(function ComponentNode({\n  node,\n  surfaceId,\n  registry,\n}: ComponentNodeProps) {\n  const actualRegistry = registry ?? ComponentRegistry.getInstance();\n\n  // useMemo must be called unconditionally (Rules of Hooks)\n  // We handle invalid nodes by returning null component type\n  const nodeType =\n    node && typeof node === \"object\" && \"type\" in node ? node.type : null;\n\n  const Component = useMemo(\n    () => (nodeType ? actualRegistry.get(nodeType) : null),\n    [actualRegistry, nodeType],\n  );\n\n  // Handle null/undefined/invalid nodes gracefully\n  if (!nodeType) {\n    if (node) {\n      console.warn(\"[A2UI] Invalid component node (not resolved?):\", node);\n    }\n    return null;\n  }\n\n  if (!Component) {\n    console.warn(`[A2UI] Unknown component type: ${nodeType}`);\n    return null;\n  }\n\n  // No wrapper div - component's root div is the :host equivalent\n  // Suspense doesn't add DOM elements, preserving the correct hierarchy\n  // Type assertion is safe: we've already validated node is valid (nodeType check above)\n  return (\n    <Suspense fallback={<LoadingFallback />}>\n      <Component node={node as Types.AnyComponentNode} surfaceId={surfaceId} />\n    </Suspense>\n  );\n});\n\nexport default ComponentNode;\n"],"mappings":";;;;;;AAKA,MAAM,kBAAkB,KAAK,SAAS,kBAAkB;AACtD,QACE,oBAAC;EAAI,WAAU;EAAe,OAAO;GAAE,SAAS;GAAO,SAAS;GAAK;YAAE;GAEjE;EAER;;;;;;;;;;;;;AAuBF,MAAa,gBAAgB,KAAK,SAAS,cAAc,EACvD,MACA,WACA,YACqB;CACrB,MAAM,iBAAiB,YAAY,kBAAkB,aAAa;CAIlE,MAAM,WACJ,QAAQ,OAAO,SAAS,YAAY,UAAU,OAAO,KAAK,OAAO;CAEnE,MAAM,YAAY,cACT,WAAW,eAAe,IAAI,SAAS,GAAG,MACjD,CAAC,gBAAgB,SAAS,CAC3B;AAGD,KAAI,CAAC,UAAU;AACb,MAAI,KACF,SAAQ,KAAK,kDAAkD,KAAK;AAEtE,SAAO;;AAGT,KAAI,CAAC,WAAW;AACd,UAAQ,KAAK,kCAAkC,WAAW;AAC1D,SAAO;;AAMT,QACE,oBAAC;EAAS,UAAU,oBAAC,oBAAkB;YACrC,oBAAC;GAAgB;GAA2C;IAAa;GAChE;EAEb"}

package/dist/react-renderer/hooks/useA2UI.cjs

@@ -0,0 +1,46 @@
+const require_A2UIProvider = require('../core/A2UIProvider.cjs');
+
+//#region src/react-renderer/hooks/useA2UI.ts
+/**
+* Main API hook for A2UI. Provides methods to process messages
+* and access surface state.
+*
+* Note: This hook subscribes to state changes. Components using this
+* will re-render when the A2UI state changes. For action-only usage
+* (no re-renders), use useA2UIActions() instead.
+*
+* @returns Object with message processing and surface access methods
+*
+* @example
+* ```tsx
+* function ChatApp() {
+*   const { processMessages, getSurface } = useA2UI();
+*
+*   useEffect(() => {
+*     const ws = new WebSocket('wss://agent.example.com');
+*     ws.onmessage = (event) => {
+*       const messages = JSON.parse(event.data);
+*       processMessages(messages);
+*     };
+*     return () => ws.close();
+*   }, [processMessages]);
+*
+*   return <A2UIRenderer surfaceId="main" />;
+* }
+* ```
+*/
+function useA2UI() {
+	const actions = require_A2UIProvider.useA2UIActions();
+	const state = require_A2UIProvider.useA2UIState();
+	return {
+		processMessages: actions.processMessages,
+		getSurface: actions.getSurface,
+		getSurfaces: actions.getSurfaces,
+		clearSurfaces: actions.clearSurfaces,
+		version: state.version
+	};
+}
+
+//#endregion
+exports.useA2UI = useA2UI;
+//# sourceMappingURL=useA2UI.cjs.map

package/dist/react-renderer/hooks/useA2UI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useA2UI.cjs","names":["useA2UIActions","useA2UIState"],"sources":["../../../src/react-renderer/hooks/useA2UI.ts"],"sourcesContent":["import type { Types } from \"@a2ui/lit/0.8\";\nimport { useA2UIActions, useA2UIState } from \"../core/A2UIProvider\";\n\n/**\n * Result returned by the useA2UI hook.\n */\nexport interface UseA2UIResult {\n  /** Process incoming server messages */\n  processMessages: (messages: Types.ServerToClientMessage[]) => void;\n\n  /** Get a surface by ID */\n  getSurface: (surfaceId: string) => Types.Surface | undefined;\n\n  /** Get all surfaces */\n  getSurfaces: () => ReadonlyMap<string, Types.Surface>;\n\n  /** Clear all surfaces */\n  clearSurfaces: () => void;\n\n  /** The current version number (increments on state changes) */\n  version: number;\n}\n\n/**\n * Main API hook for A2UI. Provides methods to process messages\n * and access surface state.\n *\n * Note: This hook subscribes to state changes. Components using this\n * will re-render when the A2UI state changes. For action-only usage\n * (no re-renders), use useA2UIActions() instead.\n *\n * @returns Object with message processing and surface access methods\n *\n * @example\n * ```tsx\n * function ChatApp() {\n *   const { processMessages, getSurface } = useA2UI();\n *\n *   useEffect(() => {\n *     const ws = new WebSocket('wss://agent.example.com');\n *     ws.onmessage = (event) => {\n *       const messages = JSON.parse(event.data);\n *       processMessages(messages);\n *     };\n *     return () => ws.close();\n *   }, [processMessages]);\n *\n *   return <A2UIRenderer surfaceId=\"main\" />;\n * }\n * ```\n */\nexport function useA2UI(): UseA2UIResult {\n  const actions = useA2UIActions();\n  const state = useA2UIState();\n\n  return {\n    processMessages: actions.processMessages,\n    getSurface: actions.getSurface,\n    getSurfaces: actions.getSurfaces,\n    clearSurfaces: actions.clearSurfaces,\n    version: state.version,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,SAAgB,UAAyB;CACvC,MAAM,UAAUA,qCAAgB;CAChC,MAAM,QAAQC,mCAAc;AAE5B,QAAO;EACL,iBAAiB,QAAQ;EACzB,YAAY,QAAQ;EACpB,aAAa,QAAQ;EACrB,eAAe,QAAQ;EACvB,SAAS,MAAM;EAChB"}

package/dist/react-renderer/hooks/useA2UI.mjs

@@ -0,0 +1,46 @@
+import { useA2UIActions, useA2UIState } from "../core/A2UIProvider.mjs";
+
+//#region src/react-renderer/hooks/useA2UI.ts
+/**
+* Main API hook for A2UI. Provides methods to process messages
+* and access surface state.
+*
+* Note: This hook subscribes to state changes. Components using this
+* will re-render when the A2UI state changes. For action-only usage
+* (no re-renders), use useA2UIActions() instead.
+*
+* @returns Object with message processing and surface access methods
+*
+* @example
+* ```tsx
+* function ChatApp() {
+*   const { processMessages, getSurface } = useA2UI();
+*
+*   useEffect(() => {
+*     const ws = new WebSocket('wss://agent.example.com');
+*     ws.onmessage = (event) => {
+*       const messages = JSON.parse(event.data);
+*       processMessages(messages);
+*     };
+*     return () => ws.close();
+*   }, [processMessages]);
+*
+*   return <A2UIRenderer surfaceId="main" />;
+* }
+* ```
+*/
+function useA2UI() {
+	const actions = useA2UIActions();
+	const state = useA2UIState();
+	return {
+		processMessages: actions.processMessages,
+		getSurface: actions.getSurface,
+		getSurfaces: actions.getSurfaces,
+		clearSurfaces: actions.clearSurfaces,
+		version: state.version
+	};
+}
+
+//#endregion
+export { useA2UI };
+//# sourceMappingURL=useA2UI.mjs.map

package/dist/react-renderer/hooks/useA2UI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useA2UI.mjs","names":[],"sources":["../../../src/react-renderer/hooks/useA2UI.ts"],"sourcesContent":["import type { Types } from \"@a2ui/lit/0.8\";\nimport { useA2UIActions, useA2UIState } from \"../core/A2UIProvider\";\n\n/**\n * Result returned by the useA2UI hook.\n */\nexport interface UseA2UIResult {\n  /** Process incoming server messages */\n  processMessages: (messages: Types.ServerToClientMessage[]) => void;\n\n  /** Get a surface by ID */\n  getSurface: (surfaceId: string) => Types.Surface | undefined;\n\n  /** Get all surfaces */\n  getSurfaces: () => ReadonlyMap<string, Types.Surface>;\n\n  /** Clear all surfaces */\n  clearSurfaces: () => void;\n\n  /** The current version number (increments on state changes) */\n  version: number;\n}\n\n/**\n * Main API hook for A2UI. Provides methods to process messages\n * and access surface state.\n *\n * Note: This hook subscribes to state changes. Components using this\n * will re-render when the A2UI state changes. For action-only usage\n * (no re-renders), use useA2UIActions() instead.\n *\n * @returns Object with message processing and surface access methods\n *\n * @example\n * ```tsx\n * function ChatApp() {\n *   const { processMessages, getSurface } = useA2UI();\n *\n *   useEffect(() => {\n *     const ws = new WebSocket('wss://agent.example.com');\n *     ws.onmessage = (event) => {\n *       const messages = JSON.parse(event.data);\n *       processMessages(messages);\n *     };\n *     return () => ws.close();\n *   }, [processMessages]);\n *\n *   return <A2UIRenderer surfaceId=\"main\" />;\n * }\n * ```\n */\nexport function useA2UI(): UseA2UIResult {\n  const actions = useA2UIActions();\n  const state = useA2UIState();\n\n  return {\n    processMessages: actions.processMessages,\n    getSurface: actions.getSurface,\n    getSurfaces: actions.getSurfaces,\n    clearSurfaces: actions.clearSurfaces,\n    version: state.version,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,SAAgB,UAAyB;CACvC,MAAM,UAAU,gBAAgB;CAChC,MAAM,QAAQ,cAAc;AAE5B,QAAO;EACL,iBAAiB,QAAQ;EACzB,YAAY,QAAQ;EACpB,aAAa,QAAQ;EACrB,eAAe,QAAQ;EACvB,SAAS,MAAM;EAChB"}

package/dist/react-renderer/hooks/useA2UIComponent.cjs

@@ -0,0 +1,173 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_ThemeContext = require('../theme/ThemeContext.cjs');
+const require_A2UIProvider = require('../core/A2UIProvider.cjs');
+let react = require("react");
+
+//#region src/react-renderer/hooks/useA2UIComponent.ts
+/**
+* Base hook for A2UI components. Provides data binding, theme access,
+* and action dispatching.
+*
+* @param node - The component node from the A2UI message processor
+* @param surfaceId - The surface ID this component belongs to
+* @returns Object with theme, data binding helpers, and action dispatcher
+*
+* @example
+* ```tsx
+* function TextField({ node, surfaceId }: A2UIComponentProps<Types.TextFieldNode>) {
+*   const { theme, resolveString, setValue } = useA2UIComponent(node, surfaceId);
+*
+*   const label = resolveString(node.properties.label);
+*   const value = resolveString(node.properties.text) ?? '';
+*
+*   return (
+*     <div className={classMapToString(theme.components.TextField.container)}>
+*       <label>{label}</label>
+*       <input
+*         value={value}
+*         onChange={(e) => setValue(node.properties.text?.path!, e.target.value)}
+*       />
+*     </div>
+*   );
+* }
+* ```
+*/
+function useA2UIComponent(node, surfaceId) {
+	const actions = require_A2UIProvider.useA2UIActions();
+	const theme = require_ThemeContext.useTheme();
+	const baseId = (0, react.useId)();
+	require_A2UIProvider.useA2UIState();
+	/**
+	* Resolve a StringValue to its actual string value.
+	* Checks literalString, literal, then path in that order.
+	* Note: This reads from data model via stable actions reference.
+	*/
+	const resolveString = (0, react.useCallback)((value) => {
+		if (!value) return null;
+		if (typeof value !== "object") return null;
+		if (value.literalString !== void 0) return value.literalString;
+		if (value.literal !== void 0) return String(value.literal);
+		if (value.path) {
+			const data = actions.getData(node, value.path, surfaceId);
+			return data !== null ? String(data) : null;
+		}
+		return null;
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Resolve a NumberValue to its actual number value.
+	*/
+	const resolveNumber = (0, react.useCallback)((value) => {
+		if (!value) return null;
+		if (typeof value !== "object") return null;
+		if (value.literalNumber !== void 0) return value.literalNumber;
+		if (value.literal !== void 0) return Number(value.literal);
+		if (value.path) {
+			const data = actions.getData(node, value.path, surfaceId);
+			return data !== null ? Number(data) : null;
+		}
+		return null;
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Resolve a BooleanValue to its actual boolean value.
+	*/
+	const resolveBoolean = (0, react.useCallback)((value) => {
+		if (!value) return null;
+		if (typeof value !== "object") return null;
+		if (value.literalBoolean !== void 0) return value.literalBoolean;
+		if (value.literal !== void 0) return Boolean(value.literal);
+		if (value.path) {
+			const data = actions.getData(node, value.path, surfaceId);
+			return data !== null ? Boolean(data) : null;
+		}
+		return null;
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Set a value in the data model for two-way binding.
+	*/
+	const setValue = (0, react.useCallback)((path, value) => {
+		actions.setData(node, path, value, surfaceId);
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Get a value from the data model.
+	*/
+	const getValue = (0, react.useCallback)((path) => {
+		return actions.getData(node, path, surfaceId);
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Dispatch a user action to the server.
+	* Resolves all context bindings before dispatching.
+	*/
+	const sendAction = (0, react.useCallback)((action) => {
+		const actionContext = {};
+		if (action.context) {
+			for (const item of action.context) if (item.value.literalString !== void 0) actionContext[item.key] = item.value.literalString;
+			else if (item.value.literalNumber !== void 0) actionContext[item.key] = item.value.literalNumber;
+			else if (item.value.literalBoolean !== void 0) actionContext[item.key] = item.value.literalBoolean;
+			else if (item.value.path) {
+				const resolvedPath = actions.resolvePath(item.value.path, node.dataContextPath);
+				actionContext[item.key] = actions.getData(node, resolvedPath, surfaceId);
+			}
+		}
+		actions.dispatch({ userAction: {
+			name: action.name,
+			sourceComponentId: node.id,
+			surfaceId,
+			timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+			context: actionContext
+		} });
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Generate a unique ID for accessibility purposes.
+	* Uses React's useId() for SSR and Concurrent Mode compatibility.
+	*/
+	const getUniqueId = (0, react.useCallback)((prefix) => {
+		return `${prefix}${baseId}`;
+	}, [baseId]);
+	return (0, react.useMemo)(() => ({
+		theme,
+		resolveString,
+		resolveNumber,
+		resolveBoolean,
+		setValue,
+		getValue,
+		sendAction,
+		getUniqueId
+	}), [
+		theme,
+		resolveString,
+		resolveNumber,
+		resolveBoolean,
+		setValue,
+		getValue,
+		sendAction,
+		getUniqueId
+	]);
+}
+
+//#endregion
+exports.useA2UIComponent = useA2UIComponent;
+//# sourceMappingURL=useA2UIComponent.cjs.map

package/dist/react-renderer/hooks/useA2UIComponent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useA2UIComponent.cjs","names":["useA2UIActions","useTheme"],"sources":["../../../src/react-renderer/hooks/useA2UIComponent.ts"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { Types, Primitives } from \"@a2ui/lit/0.8\";\nimport { useA2UIActions, useA2UIState } from \"../core/A2UIProvider\";\nimport { useTheme } from \"../theme/ThemeContext\";\n\n/**\n * Result returned by the useA2UIComponent hook.\n */\nexport interface UseA2UIComponentResult {\n  /** The current theme */\n  theme: Types.Theme;\n\n  /** Resolve a StringValue to its actual string value */\n  resolveString: (\n    value: Primitives.StringValue | null | undefined,\n  ) => string | null;\n\n  /** Resolve a NumberValue to its actual number value */\n  resolveNumber: (\n    value: Primitives.NumberValue | null | undefined,\n  ) => number | null;\n\n  /** Resolve a BooleanValue to its actual boolean value */\n  resolveBoolean: (\n    value: Primitives.BooleanValue | null | undefined,\n  ) => boolean | null;\n\n  /** Set a value in the data model (for two-way binding) */\n  setValue: (path: string, value: Types.DataValue) => void;\n\n  /** Get a value from the data model */\n  getValue: (path: string) => Types.DataValue | null;\n\n  /** Dispatch a user action */\n  sendAction: (action: Types.Action) => void;\n\n  /** Generate a unique ID for accessibility */\n  getUniqueId: (prefix: string) => string;\n}\n\n/**\n * Base hook for A2UI components. Provides data binding, theme access,\n * and action dispatching.\n *\n * @param node - The component node from the A2UI message processor\n * @param surfaceId - The surface ID this component belongs to\n * @returns Object with theme, data binding helpers, and action dispatcher\n *\n * @example\n * ```tsx\n * function TextField({ node, surfaceId }: A2UIComponentProps<Types.TextFieldNode>) {\n *   const { theme, resolveString, setValue } = useA2UIComponent(node, surfaceId);\n *\n *   const label = resolveString(node.properties.label);\n *   const value = resolveString(node.properties.text) ?? '';\n *\n *   return (\n *     <div className={classMapToString(theme.components.TextField.container)}>\n *       <label>{label}</label>\n *       <input\n *         value={value}\n *         onChange={(e) => setValue(node.properties.text?.path!, e.target.value)}\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useA2UIComponent<T extends Types.AnyComponentNode>(\n  node: T,\n  surfaceId: string,\n): UseA2UIComponentResult {\n  // Use stable actions - won't cause re-renders when version changes\n  const actions = useA2UIActions();\n  const theme = useTheme();\n  const baseId = useId();\n\n  // Subscribe to data model version - triggers re-render when data changes via setData.\n  // This ensures components with path bindings see updated values.\n  // memo() doesn't block context-triggered re-renders.\n  useA2UIState();\n\n  /**\n   * Resolve a StringValue to its actual string value.\n   * Checks literalString, literal, then path in that order.\n   * Note: This reads from data model via stable actions reference.\n   */\n  const resolveString = useCallback(\n    (value: Primitives.StringValue | null | undefined): string | null => {\n      if (!value) return null;\n      if (typeof value !== \"object\") return null;\n\n      if (value.literalString !== undefined) {\n        return value.literalString;\n      }\n      if (value.literal !== undefined) {\n        return String(value.literal);\n      }\n      if (value.path) {\n        const data = actions.getData(node, value.path, surfaceId);\n        return data !== null ? String(data) : null;\n      }\n      return null;\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Resolve a NumberValue to its actual number value.\n   */\n  const resolveNumber = useCallback(\n    (value: Primitives.NumberValue | null | undefined): number | null => {\n      if (!value) return null;\n      if (typeof value !== \"object\") return null;\n\n      if (value.literalNumber !== undefined) {\n        return value.literalNumber;\n      }\n      if (value.literal !== undefined) {\n        return Number(value.literal);\n      }\n      if (value.path) {\n        const data = actions.getData(node, value.path, surfaceId);\n        return data !== null ? Number(data) : null;\n      }\n      return null;\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Resolve a BooleanValue to its actual boolean value.\n   */\n  const resolveBoolean = useCallback(\n    (value: Primitives.BooleanValue | null | undefined): boolean | null => {\n      if (!value) return null;\n      if (typeof value !== \"object\") return null;\n\n      if (value.literalBoolean !== undefined) {\n        return value.literalBoolean;\n      }\n      if (value.literal !== undefined) {\n        return Boolean(value.literal);\n      }\n      if (value.path) {\n        const data = actions.getData(node, value.path, surfaceId);\n        return data !== null ? Boolean(data) : null;\n      }\n      return null;\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Set a value in the data model for two-way binding.\n   */\n  const setValue = useCallback(\n    (path: string, value: Types.DataValue) => {\n      actions.setData(node, path, value, surfaceId);\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Get a value from the data model.\n   */\n  const getValue = useCallback(\n    (path: string): Types.DataValue | null => {\n      return actions.getData(node, path, surfaceId);\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Dispatch a user action to the server.\n   * Resolves all context bindings before dispatching.\n   */\n  const sendAction = useCallback(\n    (action: Types.Action) => {\n      const actionContext: Record<string, unknown> = {};\n\n      if (action.context) {\n        for (const item of action.context) {\n          if (item.value.literalString !== undefined) {\n            actionContext[item.key] = item.value.literalString;\n          } else if (item.value.literalNumber !== undefined) {\n            actionContext[item.key] = item.value.literalNumber;\n          } else if (item.value.literalBoolean !== undefined) {\n            actionContext[item.key] = item.value.literalBoolean;\n          } else if (item.value.path) {\n            const resolvedPath = actions.resolvePath(\n              item.value.path,\n              node.dataContextPath,\n            );\n            actionContext[item.key] = actions.getData(\n              node,\n              resolvedPath,\n              surfaceId,\n            );\n          }\n        }\n      }\n\n      actions.dispatch({\n        userAction: {\n          name: action.name,\n          sourceComponentId: node.id,\n          surfaceId,\n          timestamp: new Date().toISOString(),\n          context: actionContext,\n        },\n      });\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Generate a unique ID for accessibility purposes.\n   * Uses React's useId() for SSR and Concurrent Mode compatibility.\n   */\n  const getUniqueId = useCallback(\n    (prefix: string) => {\n      return `${prefix}${baseId}`;\n    },\n    [baseId],\n  );\n\n  return useMemo(\n    () => ({\n      theme,\n      resolveString,\n      resolveNumber,\n      resolveBoolean,\n      setValue,\n      getValue,\n      sendAction,\n      getUniqueId,\n    }),\n    [\n      theme,\n      resolveString,\n      resolveNumber,\n      resolveBoolean,\n      setValue,\n      getValue,\n      sendAction,\n      getUniqueId,\n    ],\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,SAAgB,iBACd,MACA,WACwB;CAExB,MAAM,UAAUA,qCAAgB;CAChC,MAAM,QAAQC,+BAAU;CACxB,MAAM,2BAAgB;AAKtB,oCAAc;;;;;;CAOd,MAAM,wCACH,UAAoE;AACnE,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,OAAO,UAAU,SAAU,QAAO;AAEtC,MAAI,MAAM,kBAAkB,OAC1B,QAAO,MAAM;AAEf,MAAI,MAAM,YAAY,OACpB,QAAO,OAAO,MAAM,QAAQ;AAE9B,MAAI,MAAM,MAAM;GACd,MAAM,OAAO,QAAQ,QAAQ,MAAM,MAAM,MAAM,UAAU;AACzD,UAAO,SAAS,OAAO,OAAO,KAAK,GAAG;;AAExC,SAAO;IAET;EAAC;EAAS;EAAM;EAAU,CAC3B;;;;CAKD,MAAM,wCACH,UAAoE;AACnE,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,OAAO,UAAU,SAAU,QAAO;AAEtC,MAAI,MAAM,kBAAkB,OAC1B,QAAO,MAAM;AAEf,MAAI,MAAM,YAAY,OACpB,QAAO,OAAO,MAAM,QAAQ;AAE9B,MAAI,MAAM,MAAM;GACd,MAAM,OAAO,QAAQ,QAAQ,MAAM,MAAM,MAAM,UAAU;AACzD,UAAO,SAAS,OAAO,OAAO,KAAK,GAAG;;AAExC,SAAO;IAET;EAAC;EAAS;EAAM;EAAU,CAC3B;;;;CAKD,MAAM,yCACH,UAAsE;AACrE,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,OAAO,UAAU,SAAU,QAAO;AAEtC,MAAI,MAAM,mBAAmB,OAC3B,QAAO,MAAM;AAEf,MAAI,MAAM,YAAY,OACpB,QAAO,QAAQ,MAAM,QAAQ;AAE/B,MAAI,MAAM,MAAM;GACd,MAAM,OAAO,QAAQ,QAAQ,MAAM,MAAM,MAAM,UAAU;AACzD,UAAO,SAAS,OAAO,QAAQ,KAAK,GAAG;;AAEzC,SAAO;IAET;EAAC;EAAS;EAAM;EAAU,CAC3B;;;;CAKD,MAAM,mCACH,MAAc,UAA2B;AACxC,UAAQ,QAAQ,MAAM,MAAM,OAAO,UAAU;IAE/C;EAAC;EAAS;EAAM;EAAU,CAC3B;;;;CAKD,MAAM,mCACH,SAAyC;AACxC,SAAO,QAAQ,QAAQ,MAAM,MAAM,UAAU;IAE/C;EAAC;EAAS;EAAM;EAAU,CAC3B;;;;;CAMD,MAAM,qCACH,WAAyB;EACxB,MAAM,gBAAyC,EAAE;AAEjD,MAAI,OAAO,SACT;QAAK,MAAM,QAAQ,OAAO,QACxB,KAAI,KAAK,MAAM,kBAAkB,OAC/B,eAAc,KAAK,OAAO,KAAK,MAAM;YAC5B,KAAK,MAAM,kBAAkB,OACtC,eAAc,KAAK,OAAO,KAAK,MAAM;YAC5B,KAAK,MAAM,mBAAmB,OACvC,eAAc,KAAK,OAAO,KAAK,MAAM;YAC5B,KAAK,MAAM,MAAM;IAC1B,MAAM,eAAe,QAAQ,YAC3B,KAAK,MAAM,MACX,KAAK,gBACN;AACD,kBAAc,KAAK,OAAO,QAAQ,QAChC,MACA,cACA,UACD;;;AAKP,UAAQ,SAAS,EACf,YAAY;GACV,MAAM,OAAO;GACb,mBAAmB,KAAK;GACxB;GACA,4BAAW,IAAI,MAAM,EAAC,aAAa;GACnC,SAAS;GACV,EACF,CAAC;IAEJ;EAAC;EAAS;EAAM;EAAU,CAC3B;;;;;CAMD,MAAM,sCACH,WAAmB;AAClB,SAAO,GAAG,SAAS;IAErB,CAAC,OAAO,CACT;AAED,kCACS;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}

package/dist/react-renderer/hooks/useA2UIComponent.mjs

@@ -0,0 +1,172 @@
+import { useTheme } from "../theme/ThemeContext.mjs";
+import { useA2UIActions, useA2UIState } from "../core/A2UIProvider.mjs";
+import { useCallback, useId, useMemo } from "react";
+
+//#region src/react-renderer/hooks/useA2UIComponent.ts
+/**
+* Base hook for A2UI components. Provides data binding, theme access,
+* and action dispatching.
+*
+* @param node - The component node from the A2UI message processor
+* @param surfaceId - The surface ID this component belongs to
+* @returns Object with theme, data binding helpers, and action dispatcher
+*
+* @example
+* ```tsx
+* function TextField({ node, surfaceId }: A2UIComponentProps<Types.TextFieldNode>) {
+*   const { theme, resolveString, setValue } = useA2UIComponent(node, surfaceId);
+*
+*   const label = resolveString(node.properties.label);
+*   const value = resolveString(node.properties.text) ?? '';
+*
+*   return (
+*     <div className={classMapToString(theme.components.TextField.container)}>
+*       <label>{label}</label>
+*       <input
+*         value={value}
+*         onChange={(e) => setValue(node.properties.text?.path!, e.target.value)}
+*       />
+*     </div>
+*   );
+* }
+* ```
+*/
+function useA2UIComponent(node, surfaceId) {
+	const actions = useA2UIActions();
+	const theme = useTheme();
+	const baseId = useId();
+	useA2UIState();
+	/**
+	* Resolve a StringValue to its actual string value.
+	* Checks literalString, literal, then path in that order.
+	* Note: This reads from data model via stable actions reference.
+	*/
+	const resolveString = useCallback((value) => {
+		if (!value) return null;
+		if (typeof value !== "object") return null;
+		if (value.literalString !== void 0) return value.literalString;
+		if (value.literal !== void 0) return String(value.literal);
+		if (value.path) {
+			const data = actions.getData(node, value.path, surfaceId);
+			return data !== null ? String(data) : null;
+		}
+		return null;
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Resolve a NumberValue to its actual number value.
+	*/
+	const resolveNumber = useCallback((value) => {
+		if (!value) return null;
+		if (typeof value !== "object") return null;
+		if (value.literalNumber !== void 0) return value.literalNumber;
+		if (value.literal !== void 0) return Number(value.literal);
+		if (value.path) {
+			const data = actions.getData(node, value.path, surfaceId);
+			return data !== null ? Number(data) : null;
+		}
+		return null;
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Resolve a BooleanValue to its actual boolean value.
+	*/
+	const resolveBoolean = useCallback((value) => {
+		if (!value) return null;
+		if (typeof value !== "object") return null;
+		if (value.literalBoolean !== void 0) return value.literalBoolean;
+		if (value.literal !== void 0) return Boolean(value.literal);
+		if (value.path) {
+			const data = actions.getData(node, value.path, surfaceId);
+			return data !== null ? Boolean(data) : null;
+		}
+		return null;
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Set a value in the data model for two-way binding.
+	*/
+	const setValue = useCallback((path, value) => {
+		actions.setData(node, path, value, surfaceId);
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Get a value from the data model.
+	*/
+	const getValue = useCallback((path) => {
+		return actions.getData(node, path, surfaceId);
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Dispatch a user action to the server.
+	* Resolves all context bindings before dispatching.
+	*/
+	const sendAction = useCallback((action) => {
+		const actionContext = {};
+		if (action.context) {
+			for (const item of action.context) if (item.value.literalString !== void 0) actionContext[item.key] = item.value.literalString;
+			else if (item.value.literalNumber !== void 0) actionContext[item.key] = item.value.literalNumber;
+			else if (item.value.literalBoolean !== void 0) actionContext[item.key] = item.value.literalBoolean;
+			else if (item.value.path) {
+				const resolvedPath = actions.resolvePath(item.value.path, node.dataContextPath);
+				actionContext[item.key] = actions.getData(node, resolvedPath, surfaceId);
+			}
+		}
+		actions.dispatch({ userAction: {
+			name: action.name,
+			sourceComponentId: node.id,
+			surfaceId,
+			timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+			context: actionContext
+		} });
+	}, [
+		actions,
+		node,
+		surfaceId
+	]);
+	/**
+	* Generate a unique ID for accessibility purposes.
+	* Uses React's useId() for SSR and Concurrent Mode compatibility.
+	*/
+	const getUniqueId = useCallback((prefix) => {
+		return `${prefix}${baseId}`;
+	}, [baseId]);
+	return useMemo(() => ({
+		theme,
+		resolveString,
+		resolveNumber,
+		resolveBoolean,
+		setValue,
+		getValue,
+		sendAction,
+		getUniqueId
+	}), [
+		theme,
+		resolveString,
+		resolveNumber,
+		resolveBoolean,
+		setValue,
+		getValue,
+		sendAction,
+		getUniqueId
+	]);
+}
+
+//#endregion
+export { useA2UIComponent };
+//# sourceMappingURL=useA2UIComponent.mjs.map

package/dist/react-renderer/hooks/useA2UIComponent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useA2UIComponent.mjs","names":[],"sources":["../../../src/react-renderer/hooks/useA2UIComponent.ts"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { Types, Primitives } from \"@a2ui/lit/0.8\";\nimport { useA2UIActions, useA2UIState } from \"../core/A2UIProvider\";\nimport { useTheme } from \"../theme/ThemeContext\";\n\n/**\n * Result returned by the useA2UIComponent hook.\n */\nexport interface UseA2UIComponentResult {\n  /** The current theme */\n  theme: Types.Theme;\n\n  /** Resolve a StringValue to its actual string value */\n  resolveString: (\n    value: Primitives.StringValue | null | undefined,\n  ) => string | null;\n\n  /** Resolve a NumberValue to its actual number value */\n  resolveNumber: (\n    value: Primitives.NumberValue | null | undefined,\n  ) => number | null;\n\n  /** Resolve a BooleanValue to its actual boolean value */\n  resolveBoolean: (\n    value: Primitives.BooleanValue | null | undefined,\n  ) => boolean | null;\n\n  /** Set a value in the data model (for two-way binding) */\n  setValue: (path: string, value: Types.DataValue) => void;\n\n  /** Get a value from the data model */\n  getValue: (path: string) => Types.DataValue | null;\n\n  /** Dispatch a user action */\n  sendAction: (action: Types.Action) => void;\n\n  /** Generate a unique ID for accessibility */\n  getUniqueId: (prefix: string) => string;\n}\n\n/**\n * Base hook for A2UI components. Provides data binding, theme access,\n * and action dispatching.\n *\n * @param node - The component node from the A2UI message processor\n * @param surfaceId - The surface ID this component belongs to\n * @returns Object with theme, data binding helpers, and action dispatcher\n *\n * @example\n * ```tsx\n * function TextField({ node, surfaceId }: A2UIComponentProps<Types.TextFieldNode>) {\n *   const { theme, resolveString, setValue } = useA2UIComponent(node, surfaceId);\n *\n *   const label = resolveString(node.properties.label);\n *   const value = resolveString(node.properties.text) ?? '';\n *\n *   return (\n *     <div className={classMapToString(theme.components.TextField.container)}>\n *       <label>{label}</label>\n *       <input\n *         value={value}\n *         onChange={(e) => setValue(node.properties.text?.path!, e.target.value)}\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useA2UIComponent<T extends Types.AnyComponentNode>(\n  node: T,\n  surfaceId: string,\n): UseA2UIComponentResult {\n  // Use stable actions - won't cause re-renders when version changes\n  const actions = useA2UIActions();\n  const theme = useTheme();\n  const baseId = useId();\n\n  // Subscribe to data model version - triggers re-render when data changes via setData.\n  // This ensures components with path bindings see updated values.\n  // memo() doesn't block context-triggered re-renders.\n  useA2UIState();\n\n  /**\n   * Resolve a StringValue to its actual string value.\n   * Checks literalString, literal, then path in that order.\n   * Note: This reads from data model via stable actions reference.\n   */\n  const resolveString = useCallback(\n    (value: Primitives.StringValue | null | undefined): string | null => {\n      if (!value) return null;\n      if (typeof value !== \"object\") return null;\n\n      if (value.literalString !== undefined) {\n        return value.literalString;\n      }\n      if (value.literal !== undefined) {\n        return String(value.literal);\n      }\n      if (value.path) {\n        const data = actions.getData(node, value.path, surfaceId);\n        return data !== null ? String(data) : null;\n      }\n      return null;\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Resolve a NumberValue to its actual number value.\n   */\n  const resolveNumber = useCallback(\n    (value: Primitives.NumberValue | null | undefined): number | null => {\n      if (!value) return null;\n      if (typeof value !== \"object\") return null;\n\n      if (value.literalNumber !== undefined) {\n        return value.literalNumber;\n      }\n      if (value.literal !== undefined) {\n        return Number(value.literal);\n      }\n      if (value.path) {\n        const data = actions.getData(node, value.path, surfaceId);\n        return data !== null ? Number(data) : null;\n      }\n      return null;\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Resolve a BooleanValue to its actual boolean value.\n   */\n  const resolveBoolean = useCallback(\n    (value: Primitives.BooleanValue | null | undefined): boolean | null => {\n      if (!value) return null;\n      if (typeof value !== \"object\") return null;\n\n      if (value.literalBoolean !== undefined) {\n        return value.literalBoolean;\n      }\n      if (value.literal !== undefined) {\n        return Boolean(value.literal);\n      }\n      if (value.path) {\n        const data = actions.getData(node, value.path, surfaceId);\n        return data !== null ? Boolean(data) : null;\n      }\n      return null;\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Set a value in the data model for two-way binding.\n   */\n  const setValue = useCallback(\n    (path: string, value: Types.DataValue) => {\n      actions.setData(node, path, value, surfaceId);\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Get a value from the data model.\n   */\n  const getValue = useCallback(\n    (path: string): Types.DataValue | null => {\n      return actions.getData(node, path, surfaceId);\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Dispatch a user action to the server.\n   * Resolves all context bindings before dispatching.\n   */\n  const sendAction = useCallback(\n    (action: Types.Action) => {\n      const actionContext: Record<string, unknown> = {};\n\n      if (action.context) {\n        for (const item of action.context) {\n          if (item.value.literalString !== undefined) {\n            actionContext[item.key] = item.value.literalString;\n          } else if (item.value.literalNumber !== undefined) {\n            actionContext[item.key] = item.value.literalNumber;\n          } else if (item.value.literalBoolean !== undefined) {\n            actionContext[item.key] = item.value.literalBoolean;\n          } else if (item.value.path) {\n            const resolvedPath = actions.resolvePath(\n              item.value.path,\n              node.dataContextPath,\n            );\n            actionContext[item.key] = actions.getData(\n              node,\n              resolvedPath,\n              surfaceId,\n            );\n          }\n        }\n      }\n\n      actions.dispatch({\n        userAction: {\n          name: action.name,\n          sourceComponentId: node.id,\n          surfaceId,\n          timestamp: new Date().toISOString(),\n          context: actionContext,\n        },\n      });\n    },\n    [actions, node, surfaceId],\n  );\n\n  /**\n   * Generate a unique ID for accessibility purposes.\n   * Uses React's useId() for SSR and Concurrent Mode compatibility.\n   */\n  const getUniqueId = useCallback(\n    (prefix: string) => {\n      return `${prefix}${baseId}`;\n    },\n    [baseId],\n  );\n\n  return useMemo(\n    () => ({\n      theme,\n      resolveString,\n      resolveNumber,\n      resolveBoolean,\n      setValue,\n      getValue,\n      sendAction,\n      getUniqueId,\n    }),\n    [\n      theme,\n      resolveString,\n      resolveNumber,\n      resolveBoolean,\n      setValue,\n      getValue,\n      sendAction,\n      getUniqueId,\n    ],\n  );\n}\n"],"mappings":"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"}

package/dist/react-renderer/lib/utils.cjs

@@ -0,0 +1,39 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_utils = require('../theme/utils.cjs');
+let _a2ui_lit_0_8 = require("@a2ui/lit/0.8");
+let clsx = require("clsx");
+
+//#region src/react-renderer/lib/utils.ts
+/**
+* Utility function to merge class names.
+* Combines clsx for conditional classes.
+*
+* @param inputs - Class values to merge
+* @returns Merged class name string
+*
+* @example
+* cn('base-class', condition && 'conditional-class', { 'object-class': true })
+*/
+function cn(...inputs) {
+	return (0, clsx.clsx)(inputs);
+}
+/**
+* Merges multiple class maps into a single class map.
+* Uses Lit's Styles.merge() function directly for consistency.
+*
+* Lit's merge handles prefix conflicts: if you have 'layout-p-2' and 'layout-p-4',
+* only the latter is kept (same prefix 'layout-p-' means they conflict).
+*
+* @param maps - Class maps to merge
+* @returns A merged class map
+*/
+function mergeClassMaps(...maps) {
+	const validMaps = maps.filter((m) => m !== void 0);
+	if (validMaps.length === 0) return {};
+	return _a2ui_lit_0_8.Styles.merge(...validMaps);
+}
+
+//#endregion
+exports.cn = cn;
+exports.mergeClassMaps = mergeClassMaps;
+//# sourceMappingURL=utils.cjs.map

package/dist/react-renderer/lib/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","names":["Styles"],"sources":["../../../src/react-renderer/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { Styles } from \"@a2ui/lit/0.8\";\n\n/**\n * Utility function to merge class names.\n * Combines clsx for conditional classes.\n *\n * @param inputs - Class values to merge\n * @returns Merged class name string\n *\n * @example\n * cn('base-class', condition && 'conditional-class', { 'object-class': true })\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return clsx(inputs);\n}\n\n/**\n * Converts a theme class map (Record<string, boolean>) to a className string.\n * Re-exported from theme/utils for convenience.\n *\n * @param classMap - An object where keys are class names and values are booleans\n * @returns A space-separated string of class names where the value is true\n */\nexport { classMapToString, stylesToObject } from \"../theme/utils\";\n\n/**\n * Merges multiple class maps into a single class map.\n * Uses Lit's Styles.merge() function directly for consistency.\n *\n * Lit's merge handles prefix conflicts: if you have 'layout-p-2' and 'layout-p-4',\n * only the latter is kept (same prefix 'layout-p-' means they conflict).\n *\n * @param maps - Class maps to merge\n * @returns A merged class map\n */\nexport function mergeClassMaps(\n  ...maps: (Record<string, boolean> | undefined)[]\n): Record<string, boolean> {\n  // Filter out undefined maps and use Lit's merge function\n  const validMaps = maps.filter(\n    (m): m is Record<string, boolean> => m !== undefined,\n  );\n  if (validMaps.length === 0) return {};\n  return Styles.merge(...validMaps);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAaA,SAAgB,GAAG,GAAG,QAA8B;AAClD,uBAAY,OAAO;;;;;;;;;;;;AAsBrB,SAAgB,eACd,GAAG,MACsB;CAEzB,MAAM,YAAY,KAAK,QACpB,MAAoC,MAAM,OAC5C;AACD,KAAI,UAAU,WAAW,EAAG,QAAO,EAAE;AACrC,QAAOA,qBAAO,MAAM,GAAG,UAAU"}

package/dist/react-renderer/lib/utils.mjs

@@ -0,0 +1,37 @@
+import { classMapToString, stylesToObject } from "../theme/utils.mjs";
+import { Styles } from "@a2ui/lit/0.8";
+import { clsx } from "clsx";
+
+//#region src/react-renderer/lib/utils.ts
+/**
+* Utility function to merge class names.
+* Combines clsx for conditional classes.
+*
+* @param inputs - Class values to merge
+* @returns Merged class name string
+*
+* @example
+* cn('base-class', condition && 'conditional-class', { 'object-class': true })
+*/
+function cn(...inputs) {
+	return clsx(inputs);
+}
+/**
+* Merges multiple class maps into a single class map.
+* Uses Lit's Styles.merge() function directly for consistency.
+*
+* Lit's merge handles prefix conflicts: if you have 'layout-p-2' and 'layout-p-4',
+* only the latter is kept (same prefix 'layout-p-' means they conflict).
+*
+* @param maps - Class maps to merge
+* @returns A merged class map
+*/
+function mergeClassMaps(...maps) {
+	const validMaps = maps.filter((m) => m !== void 0);
+	if (validMaps.length === 0) return {};
+	return Styles.merge(...validMaps);
+}
+
+//#endregion
+export { cn, mergeClassMaps };
+//# sourceMappingURL=utils.mjs.map

package/dist/react-renderer/lib/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/react-renderer/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { Styles } from \"@a2ui/lit/0.8\";\n\n/**\n * Utility function to merge class names.\n * Combines clsx for conditional classes.\n *\n * @param inputs - Class values to merge\n * @returns Merged class name string\n *\n * @example\n * cn('base-class', condition && 'conditional-class', { 'object-class': true })\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return clsx(inputs);\n}\n\n/**\n * Converts a theme class map (Record<string, boolean>) to a className string.\n * Re-exported from theme/utils for convenience.\n *\n * @param classMap - An object where keys are class names and values are booleans\n * @returns A space-separated string of class names where the value is true\n */\nexport { classMapToString, stylesToObject } from \"../theme/utils\";\n\n/**\n * Merges multiple class maps into a single class map.\n * Uses Lit's Styles.merge() function directly for consistency.\n *\n * Lit's merge handles prefix conflicts: if you have 'layout-p-2' and 'layout-p-4',\n * only the latter is kept (same prefix 'layout-p-' means they conflict).\n *\n * @param maps - Class maps to merge\n * @returns A merged class map\n */\nexport function mergeClassMaps(\n  ...maps: (Record<string, boolean> | undefined)[]\n): Record<string, boolean> {\n  // Filter out undefined maps and use Lit's merge function\n  const validMaps = maps.filter(\n    (m): m is Record<string, boolean> => m !== undefined,\n  );\n  if (validMaps.length === 0) return {};\n  return Styles.merge(...validMaps);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,SAAgB,GAAG,GAAG,QAA8B;AAClD,QAAO,KAAK,OAAO;;;;;;;;;;;;AAsBrB,SAAgB,eACd,GAAG,MACsB;CAEzB,MAAM,YAAY,KAAK,QACpB,MAAoC,MAAM,OAC5C;AACD,KAAI,UAAU,WAAW,EAAG,QAAO,EAAE;AACrC,QAAO,OAAO,MAAM,GAAG,UAAU"}