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

package/dist/react-renderer/components/layout/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","names":["useA2UIComponent","classMapToString","stylesToObject","mergeClassMaps","ComponentNode"],"sources":["../../../../src/react-renderer/components/layout/Tabs.tsx"],"sourcesContent":["import { useState, memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport {\n  classMapToString,\n  stylesToObject,\n  mergeClassMaps,\n} from \"../../lib/utils\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Tabs component - displays content in switchable tabs.\n */\nexport const Tabs = memo(function Tabs({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.TabsNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const tabItems = props.tabItems ?? [];\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-tabs\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.Tabs.container)}\n        style={stylesToObject(theme.additionalStyles?.Tabs)}\n      >\n        {/* Tab buttons - uses Tabs.element for the container */}\n        <div\n          id=\"buttons\"\n          className={classMapToString(theme.components.Tabs.element)}\n        >\n          {tabItems.map((tab, index) => {\n            const title = resolveString(tab.title);\n            const isSelected = index === selectedIndex;\n\n            // Lit merges all + selected classes when selected\n            const classes = isSelected\n              ? mergeClassMaps(\n                  theme.components.Tabs.controls.all,\n                  theme.components.Tabs.controls.selected,\n                )\n              : theme.components.Tabs.controls.all;\n\n            return (\n              <button\n                key={index}\n                disabled={isSelected}\n                className={classMapToString(classes)}\n                onClick={() => setSelectedIndex(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Tab content */}\n        {tabItems[selectedIndex] && (\n          <ComponentNode\n            node={tabItems[selectedIndex].child}\n            surfaceId={surfaceId}\n          />\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,uBAAY,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,OAAO,kBAAkBA,0CAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,CAAC,eAAe,wCAA6B,EAAE;CAErD,MAAM,WAAW,MAAM,YAAY,EAAE;AAQrC,QACE,2CAAC;EAAI,WAAU;EAAY,OAL3B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,4CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,KAAK,UAAU;GAC5D,OAAOC,6BAAe,MAAM,kBAAkB,KAAK;cAGnD,2CAAC;IACC,IAAG;IACH,WAAWD,+BAAiB,MAAM,WAAW,KAAK,QAAQ;cAEzD,SAAS,KAAK,KAAK,UAAU;KAC5B,MAAM,QAAQ,cAAc,IAAI,MAAM;KACtC,MAAM,aAAa,UAAU;AAU7B,YACE,2CAAC;MAEC,UAAU;MACV,WAAWA,+BAXC,aACZE,+BACE,MAAM,WAAW,KAAK,SAAS,KAC/B,MAAM,WAAW,KAAK,SAAS,SAChC,GACD,MAAM,WAAW,KAAK,SAAS,IAMK;MACpC,eAAe,iBAAiB,MAAM;gBAErC;QALI,MAME;MAEX;KACE,EAGL,SAAS,kBACR,2CAACC;IACC,MAAM,SAAS,eAAe;IACnB;KACX;IAEI;GACN;EAER"}

package/dist/react-renderer/components/layout/Tabs.mjs

@@ -0,0 +1,46 @@
+import ComponentNode from "../../core/ComponentNode.mjs";
+import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
+import { mergeClassMaps } from "../../lib/utils.mjs";
+import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-renderer/components/layout/Tabs.tsx
+/**
+* Tabs component - displays content in switchable tabs.
+*/
+const Tabs = memo(function Tabs({ node, surfaceId }) {
+	const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const tabItems = props.tabItems ?? [];
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-tabs",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ jsxs("section", {
+			className: classMapToString(theme.components.Tabs.container),
+			style: stylesToObject(theme.additionalStyles?.Tabs),
+			children: [/* @__PURE__ */ jsx("div", {
+				id: "buttons",
+				className: classMapToString(theme.components.Tabs.element),
+				children: tabItems.map((tab, index) => {
+					const title = resolveString(tab.title);
+					const isSelected = index === selectedIndex;
+					return /* @__PURE__ */ jsx("button", {
+						disabled: isSelected,
+						className: classMapToString(isSelected ? mergeClassMaps(theme.components.Tabs.controls.all, theme.components.Tabs.controls.selected) : theme.components.Tabs.controls.all),
+						onClick: () => setSelectedIndex(index),
+						children: title
+					}, index);
+				})
+			}), tabItems[selectedIndex] && /* @__PURE__ */ jsx(ComponentNode, {
+				node: tabItems[selectedIndex].child,
+				surfaceId
+			})]
+		})
+	});
+});
+
+//#endregion
+export { Tabs as default };
+//# sourceMappingURL=Tabs.mjs.map

package/dist/react-renderer/components/layout/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.mjs","names":[],"sources":["../../../../src/react-renderer/components/layout/Tabs.tsx"],"sourcesContent":["import { useState, memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport {\n  classMapToString,\n  stylesToObject,\n  mergeClassMaps,\n} from \"../../lib/utils\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Tabs component - displays content in switchable tabs.\n */\nexport const Tabs = memo(function Tabs({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.TabsNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const tabItems = props.tabItems ?? [];\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-tabs\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.Tabs.container)}\n        style={stylesToObject(theme.additionalStyles?.Tabs)}\n      >\n        {/* Tab buttons - uses Tabs.element for the container */}\n        <div\n          id=\"buttons\"\n          className={classMapToString(theme.components.Tabs.element)}\n        >\n          {tabItems.map((tab, index) => {\n            const title = resolveString(tab.title);\n            const isSelected = index === selectedIndex;\n\n            // Lit merges all + selected classes when selected\n            const classes = isSelected\n              ? mergeClassMaps(\n                  theme.components.Tabs.controls.all,\n                  theme.components.Tabs.controls.selected,\n                )\n              : theme.components.Tabs.controls.all;\n\n            return (\n              <button\n                key={index}\n                disabled={isSelected}\n                className={classMapToString(classes)}\n                onClick={() => setSelectedIndex(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Tab content */}\n        {tabItems[selectedIndex] && (\n          <ComponentNode\n            node={tabItems[selectedIndex].child}\n            surfaceId={surfaceId}\n          />\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,OAAO,KAAK,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,OAAO,kBAAkB,iBAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CAErD,MAAM,WAAW,MAAM,YAAY,EAAE;AAQrC,QACE,oBAAC;EAAI,WAAU;EAAY,OAL3B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,qBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,KAAK,UAAU;GAC5D,OAAO,eAAe,MAAM,kBAAkB,KAAK;cAGnD,oBAAC;IACC,IAAG;IACH,WAAW,iBAAiB,MAAM,WAAW,KAAK,QAAQ;cAEzD,SAAS,KAAK,KAAK,UAAU;KAC5B,MAAM,QAAQ,cAAc,IAAI,MAAM;KACtC,MAAM,aAAa,UAAU;AAU7B,YACE,oBAAC;MAEC,UAAU;MACV,WAAW,iBAXC,aACZ,eACE,MAAM,WAAW,KAAK,SAAS,KAC/B,MAAM,WAAW,KAAK,SAAS,SAChC,GACD,MAAM,WAAW,KAAK,SAAS,IAMK;MACpC,eAAe,iBAAiB,MAAM;gBAErC;QALI,MAME;MAEX;KACE,EAGL,SAAS,kBACR,oBAAC;IACC,MAAM,SAAS,eAAe;IACnB;KACX;IAEI;GACN;EAER"}

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

@@ -0,0 +1,123 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_ThemeContext = require('../theme/ThemeContext.cjs');
+let react = require("react");
+let _a2ui_lit_0_8 = require("@a2ui/lit/0.8");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/react-renderer/core/A2UIProvider.tsx
+/**
+* Context for stable actions (never changes reference, prevents re-renders).
+* Components that only need to dispatch actions or read data won't re-render.
+*/
+const A2UIActionsContext = (0, react.createContext)(null);
+/**
+* Context for reactive state (changes trigger re-renders).
+* Only components that need to react to state changes subscribe to this.
+*/
+const A2UIStateContext = (0, react.createContext)(null);
+/**
+* Provider component that sets up the A2UI context for descendant components.
+*
+* This provider uses a two-context architecture for performance:
+* - A2UIActionsContext: Stable actions that never change (no re-renders)
+* - A2UIStateContext: Reactive state that triggers re-renders when needed
+*
+* @example
+* ```tsx
+* function App() {
+*   const handleAction = async (message) => {
+*     const response = await fetch('/api/a2ui', {
+*       method: 'POST',
+*       body: JSON.stringify(message)
+*     });
+*     const newMessages = await response.json();
+*   };
+*
+*   return (
+*     <A2UIProvider onAction={handleAction}>
+*       <A2UIRenderer surfaceId="main" />
+*     </A2UIProvider>
+*   );
+* }
+* ```
+*/
+function A2UIProvider({ onAction, theme, children }) {
+	const processorRef = (0, react.useRef)(null);
+	if (!processorRef.current) processorRef.current = _a2ui_lit_0_8.Data.createSignalA2uiMessageProcessor();
+	const processor = processorRef.current;
+	const [version, setVersion] = (0, react.useState)(0);
+	const onActionRef = (0, react.useRef)(onAction ?? null);
+	onActionRef.current = onAction ?? null;
+	const actionsRef = (0, react.useRef)(null);
+	if (!actionsRef.current) actionsRef.current = {
+		processMessages: (messages) => {
+			processor.processMessages(messages);
+			setVersion((v) => v + 1);
+		},
+		setData: (node, path, value, surfaceId) => {
+			processor.setData(node, path, value, surfaceId);
+			setVersion((v) => v + 1);
+		},
+		dispatch: (message) => {
+			if (onActionRef.current) onActionRef.current(message);
+		},
+		clearSurfaces: () => {
+			processor.clearSurfaces();
+			setVersion((v) => v + 1);
+		},
+		getSurface: (surfaceId) => {
+			return processor.getSurfaces().get(surfaceId);
+		},
+		getSurfaces: () => {
+			return processor.getSurfaces();
+		},
+		getData: (node, path, surfaceId) => {
+			return processor.getData(node, path, surfaceId);
+		},
+		resolvePath: (path, dataContextPath) => {
+			return processor.resolvePath(path, dataContextPath);
+		}
+	};
+	const actions = actionsRef.current;
+	const stateValue = (0, react.useMemo)(() => ({ version }), [version]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIActionsContext.Provider, {
+		value: actions,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIStateContext.Provider, {
+			value: stateValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThemeContext.ThemeProvider, {
+				theme,
+				children
+			})
+		})
+	});
+}
+/**
+* Hook to access stable A2UI actions (won't cause re-renders).
+* Use this when you only need to dispatch actions or read data.
+*
+* @returns Stable actions object
+* @throws If used outside of an A2UIProvider
+*/
+function useA2UIActions() {
+	const actions = (0, react.useContext)(A2UIActionsContext);
+	if (!actions) throw new Error("useA2UIActions must be used within an A2UIProvider");
+	return actions;
+}
+/**
+* Hook to subscribe to A2UI state changes.
+* Components using this will re-render when state changes.
+*
+* @returns Current version number
+* @throws If used outside of an A2UIProvider
+*/
+function useA2UIState() {
+	const state = (0, react.useContext)(A2UIStateContext);
+	if (!state) throw new Error("useA2UIState must be used within an A2UIProvider");
+	return state;
+}
+
+//#endregion
+exports.A2UIProvider = A2UIProvider;
+exports.useA2UIActions = useA2UIActions;
+exports.useA2UIState = useA2UIState;
+//# sourceMappingURL=A2UIProvider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIProvider.cjs","names":["Data","ThemeProvider"],"sources":["../../../src/react-renderer/core/A2UIProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  useState,\n  useMemo,\n  type ReactNode,\n} from \"react\";\nimport { Data, type Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIContextValue, A2UIActions } from \"./store\";\nimport { ThemeProvider } from \"../theme/ThemeContext\";\nimport type { OnActionCallback } from \"../types\";\n\n/**\n * Context for stable actions (never changes reference, prevents re-renders).\n * Components that only need to dispatch actions or read data won't re-render.\n */\nconst A2UIActionsContext = createContext<A2UIActions | null>(null);\n\n/**\n * Context for reactive state (changes trigger re-renders).\n * Only components that need to react to state changes subscribe to this.\n */\nconst A2UIStateContext = createContext<{ version: number } | null>(null);\n\n/**\n * Props for the A2UIProvider component.\n */\nexport interface A2UIProviderProps {\n  /** Callback invoked when a user action is dispatched (button click, etc.) */\n  onAction?: OnActionCallback;\n  /** Theme configuration. Falls back to default theme if not provided. */\n  theme?: Types.Theme;\n  /** Child components */\n  children: ReactNode;\n}\n\n/**\n * Provider component that sets up the A2UI context for descendant components.\n *\n * This provider uses a two-context architecture for performance:\n * - A2UIActionsContext: Stable actions that never change (no re-renders)\n * - A2UIStateContext: Reactive state that triggers re-renders when needed\n *\n * @example\n * ```tsx\n * function App() {\n *   const handleAction = async (message) => {\n *     const response = await fetch('/api/a2ui', {\n *       method: 'POST',\n *       body: JSON.stringify(message)\n *     });\n *     const newMessages = await response.json();\n *   };\n *\n *   return (\n *     <A2UIProvider onAction={handleAction}>\n *       <A2UIRenderer surfaceId=\"main\" />\n *     </A2UIProvider>\n *   );\n * }\n * ```\n */\nexport function A2UIProvider({ onAction, theme, children }: A2UIProviderProps) {\n  // Create message processor only once using ref\n  const processorRef = useRef<Types.MessageProcessor | null>(null);\n  if (!processorRef.current) {\n    processorRef.current = Data.createSignalA2uiMessageProcessor();\n  }\n  const processor = processorRef.current;\n\n  // Version counter for triggering re-renders\n  const [version, setVersion] = useState(0);\n\n  // Store onAction in a ref so callbacks always have the latest value\n  const onActionRef = useRef<OnActionCallback | null>(onAction ?? null);\n  onActionRef.current = onAction ?? null;\n\n  // Create stable actions object once - stored in ref, never changes\n  const actionsRef = useRef<A2UIActions | null>(null);\n  if (!actionsRef.current) {\n    actionsRef.current = {\n      processMessages: (messages: Types.ServerToClientMessage[]) => {\n        processor.processMessages(messages);\n        setVersion((v) => v + 1);\n      },\n\n      setData: (\n        node: Types.AnyComponentNode | null,\n        path: string,\n        value: Types.DataValue,\n        surfaceId: string,\n      ) => {\n        processor.setData(node, path, value, surfaceId);\n        setVersion((v) => v + 1);\n      },\n\n      dispatch: (message: Types.A2UIClientEventMessage) => {\n        if (onActionRef.current) {\n          onActionRef.current(message);\n        }\n      },\n\n      clearSurfaces: () => {\n        processor.clearSurfaces();\n        setVersion((v) => v + 1);\n      },\n\n      getSurface: (surfaceId: string) => {\n        return processor.getSurfaces().get(surfaceId);\n      },\n\n      getSurfaces: () => {\n        return processor.getSurfaces();\n      },\n\n      getData: (\n        node: Types.AnyComponentNode,\n        path: string,\n        surfaceId: string,\n      ) => {\n        return processor.getData(node, path, surfaceId);\n      },\n\n      resolvePath: (path: string, dataContextPath?: string) => {\n        return processor.resolvePath(path, dataContextPath);\n      },\n    };\n  }\n  const actions = actionsRef.current;\n\n  // State context value - only changes when version changes\n  const stateValue = useMemo(() => ({ version }), [version]);\n\n  return (\n    <A2UIActionsContext.Provider value={actions}>\n      <A2UIStateContext.Provider value={stateValue}>\n        <ThemeProvider theme={theme}>{children}</ThemeProvider>\n      </A2UIStateContext.Provider>\n    </A2UIActionsContext.Provider>\n  );\n}\n\n/**\n * Hook to access stable A2UI actions (won't cause re-renders).\n * Use this when you only need to dispatch actions or read data.\n *\n * @returns Stable actions object\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIActions(): A2UIActions {\n  const actions = useContext(A2UIActionsContext);\n  if (!actions) {\n    throw new Error(\"useA2UIActions must be used within an A2UIProvider\");\n  }\n  return actions;\n}\n\n/**\n * Hook to subscribe to A2UI state changes.\n * Components using this will re-render when state changes.\n *\n * @returns Current version number\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIState(): { version: number } {\n  const state = useContext(A2UIStateContext);\n  if (!state) {\n    throw new Error(\"useA2UIState must be used within an A2UIProvider\");\n  }\n  return state;\n}\n\n/**\n * Hook to access the full A2UI context (actions + state).\n * Components using this will re-render when state changes.\n *\n * @returns The A2UI context value\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIContext(): A2UIContextValue {\n  const actions = useA2UIActions();\n  const state = useA2UIState();\n\n  // Memoize combined value - only changes when state changes\n  // Actions are stable, so this only re-creates when version changes\n  return useMemo(\n    () => ({\n      ...actions,\n      processor: null as unknown as Types.MessageProcessor, // Not exposed directly\n      version: state.version,\n      onAction: null, // Use dispatch instead\n    }),\n    [actions, state.version],\n  );\n}\n\n/**\n * @deprecated Use useA2UIContext instead. This alias exists for backward compatibility only.\n */\nexport const useA2UIStore = useA2UIContext;\n\n/**\n * @deprecated This selector pattern does not provide performance benefits with React Context.\n * Components will re-render on any context change regardless of what you select.\n * Use useA2UIContext() or useA2UI() directly instead.\n *\n * @param selector - Function to select a slice of state\n * @returns The selected state\n */\nexport function useA2UIStoreSelector<T>(\n  selector: (state: A2UIContextValue) => T,\n): T {\n  const context = useA2UIContext();\n  return selector(context);\n}\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,8CAAuD,KAAK;;;;;AAMlE,MAAM,4CAA6D,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCxE,SAAgB,aAAa,EAAE,UAAU,OAAO,YAA+B;CAE7E,MAAM,iCAAqD,KAAK;AAChE,KAAI,CAAC,aAAa,QAChB,cAAa,UAAUA,mBAAK,kCAAkC;CAEhE,MAAM,YAAY,aAAa;CAG/B,MAAM,CAAC,SAAS,kCAAuB,EAAE;CAGzC,MAAM,gCAA8C,YAAY,KAAK;AACrE,aAAY,UAAU,YAAY;CAGlC,MAAM,+BAAwC,KAAK;AACnD,KAAI,CAAC,WAAW,QACd,YAAW,UAAU;EACnB,kBAAkB,aAA4C;AAC5D,aAAU,gBAAgB,SAAS;AACnC,eAAY,MAAM,IAAI,EAAE;;EAG1B,UACE,MACA,MACA,OACA,cACG;AACH,aAAU,QAAQ,MAAM,MAAM,OAAO,UAAU;AAC/C,eAAY,MAAM,IAAI,EAAE;;EAG1B,WAAW,YAA0C;AACnD,OAAI,YAAY,QACd,aAAY,QAAQ,QAAQ;;EAIhC,qBAAqB;AACnB,aAAU,eAAe;AACzB,eAAY,MAAM,IAAI,EAAE;;EAG1B,aAAa,cAAsB;AACjC,UAAO,UAAU,aAAa,CAAC,IAAI,UAAU;;EAG/C,mBAAmB;AACjB,UAAO,UAAU,aAAa;;EAGhC,UACE,MACA,MACA,cACG;AACH,UAAO,UAAU,QAAQ,MAAM,MAAM,UAAU;;EAGjD,cAAc,MAAc,oBAA6B;AACvD,UAAO,UAAU,YAAY,MAAM,gBAAgB;;EAEtD;CAEH,MAAM,UAAU,WAAW;CAG3B,MAAM,uCAA4B,EAAE,SAAS,GAAG,CAAC,QAAQ,CAAC;AAE1D,QACE,2CAAC,mBAAmB;EAAS,OAAO;YAClC,2CAAC,iBAAiB;GAAS,OAAO;aAChC,2CAACC;IAAqB;IAAQ;KAAyB;IAC7B;GACA;;;;;;;;;AAWlC,SAAgB,iBAA8B;CAC5C,MAAM,gCAAqB,mBAAmB;AAC9C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,qDAAqD;AAEvE,QAAO;;;;;;;;;AAUT,SAAgB,eAAoC;CAClD,MAAM,8BAAmB,iBAAiB;AAC1C,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,mDAAmD;AAErE,QAAO"}

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

@@ -0,0 +1,120 @@
+import { ThemeProvider } from "../theme/ThemeContext.mjs";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { Data } from "@a2ui/lit/0.8";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-renderer/core/A2UIProvider.tsx
+/**
+* Context for stable actions (never changes reference, prevents re-renders).
+* Components that only need to dispatch actions or read data won't re-render.
+*/
+const A2UIActionsContext = createContext(null);
+/**
+* Context for reactive state (changes trigger re-renders).
+* Only components that need to react to state changes subscribe to this.
+*/
+const A2UIStateContext = createContext(null);
+/**
+* Provider component that sets up the A2UI context for descendant components.
+*
+* This provider uses a two-context architecture for performance:
+* - A2UIActionsContext: Stable actions that never change (no re-renders)
+* - A2UIStateContext: Reactive state that triggers re-renders when needed
+*
+* @example
+* ```tsx
+* function App() {
+*   const handleAction = async (message) => {
+*     const response = await fetch('/api/a2ui', {
+*       method: 'POST',
+*       body: JSON.stringify(message)
+*     });
+*     const newMessages = await response.json();
+*   };
+*
+*   return (
+*     <A2UIProvider onAction={handleAction}>
+*       <A2UIRenderer surfaceId="main" />
+*     </A2UIProvider>
+*   );
+* }
+* ```
+*/
+function A2UIProvider({ onAction, theme, children }) {
+	const processorRef = useRef(null);
+	if (!processorRef.current) processorRef.current = Data.createSignalA2uiMessageProcessor();
+	const processor = processorRef.current;
+	const [version, setVersion] = useState(0);
+	const onActionRef = useRef(onAction ?? null);
+	onActionRef.current = onAction ?? null;
+	const actionsRef = useRef(null);
+	if (!actionsRef.current) actionsRef.current = {
+		processMessages: (messages) => {
+			processor.processMessages(messages);
+			setVersion((v) => v + 1);
+		},
+		setData: (node, path, value, surfaceId) => {
+			processor.setData(node, path, value, surfaceId);
+			setVersion((v) => v + 1);
+		},
+		dispatch: (message) => {
+			if (onActionRef.current) onActionRef.current(message);
+		},
+		clearSurfaces: () => {
+			processor.clearSurfaces();
+			setVersion((v) => v + 1);
+		},
+		getSurface: (surfaceId) => {
+			return processor.getSurfaces().get(surfaceId);
+		},
+		getSurfaces: () => {
+			return processor.getSurfaces();
+		},
+		getData: (node, path, surfaceId) => {
+			return processor.getData(node, path, surfaceId);
+		},
+		resolvePath: (path, dataContextPath) => {
+			return processor.resolvePath(path, dataContextPath);
+		}
+	};
+	const actions = actionsRef.current;
+	const stateValue = useMemo(() => ({ version }), [version]);
+	return /* @__PURE__ */ jsx(A2UIActionsContext.Provider, {
+		value: actions,
+		children: /* @__PURE__ */ jsx(A2UIStateContext.Provider, {
+			value: stateValue,
+			children: /* @__PURE__ */ jsx(ThemeProvider, {
+				theme,
+				children
+			})
+		})
+	});
+}
+/**
+* Hook to access stable A2UI actions (won't cause re-renders).
+* Use this when you only need to dispatch actions or read data.
+*
+* @returns Stable actions object
+* @throws If used outside of an A2UIProvider
+*/
+function useA2UIActions() {
+	const actions = useContext(A2UIActionsContext);
+	if (!actions) throw new Error("useA2UIActions must be used within an A2UIProvider");
+	return actions;
+}
+/**
+* Hook to subscribe to A2UI state changes.
+* Components using this will re-render when state changes.
+*
+* @returns Current version number
+* @throws If used outside of an A2UIProvider
+*/
+function useA2UIState() {
+	const state = useContext(A2UIStateContext);
+	if (!state) throw new Error("useA2UIState must be used within an A2UIProvider");
+	return state;
+}
+
+//#endregion
+export { A2UIProvider, useA2UIActions, useA2UIState };
+//# sourceMappingURL=A2UIProvider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"A2UIProvider.mjs","names":[],"sources":["../../../src/react-renderer/core/A2UIProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  useState,\n  useMemo,\n  type ReactNode,\n} from \"react\";\nimport { Data, type Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIContextValue, A2UIActions } from \"./store\";\nimport { ThemeProvider } from \"../theme/ThemeContext\";\nimport type { OnActionCallback } from \"../types\";\n\n/**\n * Context for stable actions (never changes reference, prevents re-renders).\n * Components that only need to dispatch actions or read data won't re-render.\n */\nconst A2UIActionsContext = createContext<A2UIActions | null>(null);\n\n/**\n * Context for reactive state (changes trigger re-renders).\n * Only components that need to react to state changes subscribe to this.\n */\nconst A2UIStateContext = createContext<{ version: number } | null>(null);\n\n/**\n * Props for the A2UIProvider component.\n */\nexport interface A2UIProviderProps {\n  /** Callback invoked when a user action is dispatched (button click, etc.) */\n  onAction?: OnActionCallback;\n  /** Theme configuration. Falls back to default theme if not provided. */\n  theme?: Types.Theme;\n  /** Child components */\n  children: ReactNode;\n}\n\n/**\n * Provider component that sets up the A2UI context for descendant components.\n *\n * This provider uses a two-context architecture for performance:\n * - A2UIActionsContext: Stable actions that never change (no re-renders)\n * - A2UIStateContext: Reactive state that triggers re-renders when needed\n *\n * @example\n * ```tsx\n * function App() {\n *   const handleAction = async (message) => {\n *     const response = await fetch('/api/a2ui', {\n *       method: 'POST',\n *       body: JSON.stringify(message)\n *     });\n *     const newMessages = await response.json();\n *   };\n *\n *   return (\n *     <A2UIProvider onAction={handleAction}>\n *       <A2UIRenderer surfaceId=\"main\" />\n *     </A2UIProvider>\n *   );\n * }\n * ```\n */\nexport function A2UIProvider({ onAction, theme, children }: A2UIProviderProps) {\n  // Create message processor only once using ref\n  const processorRef = useRef<Types.MessageProcessor | null>(null);\n  if (!processorRef.current) {\n    processorRef.current = Data.createSignalA2uiMessageProcessor();\n  }\n  const processor = processorRef.current;\n\n  // Version counter for triggering re-renders\n  const [version, setVersion] = useState(0);\n\n  // Store onAction in a ref so callbacks always have the latest value\n  const onActionRef = useRef<OnActionCallback | null>(onAction ?? null);\n  onActionRef.current = onAction ?? null;\n\n  // Create stable actions object once - stored in ref, never changes\n  const actionsRef = useRef<A2UIActions | null>(null);\n  if (!actionsRef.current) {\n    actionsRef.current = {\n      processMessages: (messages: Types.ServerToClientMessage[]) => {\n        processor.processMessages(messages);\n        setVersion((v) => v + 1);\n      },\n\n      setData: (\n        node: Types.AnyComponentNode | null,\n        path: string,\n        value: Types.DataValue,\n        surfaceId: string,\n      ) => {\n        processor.setData(node, path, value, surfaceId);\n        setVersion((v) => v + 1);\n      },\n\n      dispatch: (message: Types.A2UIClientEventMessage) => {\n        if (onActionRef.current) {\n          onActionRef.current(message);\n        }\n      },\n\n      clearSurfaces: () => {\n        processor.clearSurfaces();\n        setVersion((v) => v + 1);\n      },\n\n      getSurface: (surfaceId: string) => {\n        return processor.getSurfaces().get(surfaceId);\n      },\n\n      getSurfaces: () => {\n        return processor.getSurfaces();\n      },\n\n      getData: (\n        node: Types.AnyComponentNode,\n        path: string,\n        surfaceId: string,\n      ) => {\n        return processor.getData(node, path, surfaceId);\n      },\n\n      resolvePath: (path: string, dataContextPath?: string) => {\n        return processor.resolvePath(path, dataContextPath);\n      },\n    };\n  }\n  const actions = actionsRef.current;\n\n  // State context value - only changes when version changes\n  const stateValue = useMemo(() => ({ version }), [version]);\n\n  return (\n    <A2UIActionsContext.Provider value={actions}>\n      <A2UIStateContext.Provider value={stateValue}>\n        <ThemeProvider theme={theme}>{children}</ThemeProvider>\n      </A2UIStateContext.Provider>\n    </A2UIActionsContext.Provider>\n  );\n}\n\n/**\n * Hook to access stable A2UI actions (won't cause re-renders).\n * Use this when you only need to dispatch actions or read data.\n *\n * @returns Stable actions object\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIActions(): A2UIActions {\n  const actions = useContext(A2UIActionsContext);\n  if (!actions) {\n    throw new Error(\"useA2UIActions must be used within an A2UIProvider\");\n  }\n  return actions;\n}\n\n/**\n * Hook to subscribe to A2UI state changes.\n * Components using this will re-render when state changes.\n *\n * @returns Current version number\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIState(): { version: number } {\n  const state = useContext(A2UIStateContext);\n  if (!state) {\n    throw new Error(\"useA2UIState must be used within an A2UIProvider\");\n  }\n  return state;\n}\n\n/**\n * Hook to access the full A2UI context (actions + state).\n * Components using this will re-render when state changes.\n *\n * @returns The A2UI context value\n * @throws If used outside of an A2UIProvider\n */\nexport function useA2UIContext(): A2UIContextValue {\n  const actions = useA2UIActions();\n  const state = useA2UIState();\n\n  // Memoize combined value - only changes when state changes\n  // Actions are stable, so this only re-creates when version changes\n  return useMemo(\n    () => ({\n      ...actions,\n      processor: null as unknown as Types.MessageProcessor, // Not exposed directly\n      version: state.version,\n      onAction: null, // Use dispatch instead\n    }),\n    [actions, state.version],\n  );\n}\n\n/**\n * @deprecated Use useA2UIContext instead. This alias exists for backward compatibility only.\n */\nexport const useA2UIStore = useA2UIContext;\n\n/**\n * @deprecated This selector pattern does not provide performance benefits with React Context.\n * Components will re-render on any context change regardless of what you select.\n * Use useA2UIContext() or useA2UI() directly instead.\n *\n * @param selector - Function to select a slice of state\n * @returns The selected state\n */\nexport function useA2UIStoreSelector<T>(\n  selector: (state: A2UIContextValue) => T,\n): T {\n  const context = useA2UIContext();\n  return selector(context);\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,qBAAqB,cAAkC,KAAK;;;;;AAMlE,MAAM,mBAAmB,cAA0C,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCxE,SAAgB,aAAa,EAAE,UAAU,OAAO,YAA+B;CAE7E,MAAM,eAAe,OAAsC,KAAK;AAChE,KAAI,CAAC,aAAa,QAChB,cAAa,UAAU,KAAK,kCAAkC;CAEhE,MAAM,YAAY,aAAa;CAG/B,MAAM,CAAC,SAAS,cAAc,SAAS,EAAE;CAGzC,MAAM,cAAc,OAAgC,YAAY,KAAK;AACrE,aAAY,UAAU,YAAY;CAGlC,MAAM,aAAa,OAA2B,KAAK;AACnD,KAAI,CAAC,WAAW,QACd,YAAW,UAAU;EACnB,kBAAkB,aAA4C;AAC5D,aAAU,gBAAgB,SAAS;AACnC,eAAY,MAAM,IAAI,EAAE;;EAG1B,UACE,MACA,MACA,OACA,cACG;AACH,aAAU,QAAQ,MAAM,MAAM,OAAO,UAAU;AAC/C,eAAY,MAAM,IAAI,EAAE;;EAG1B,WAAW,YAA0C;AACnD,OAAI,YAAY,QACd,aAAY,QAAQ,QAAQ;;EAIhC,qBAAqB;AACnB,aAAU,eAAe;AACzB,eAAY,MAAM,IAAI,EAAE;;EAG1B,aAAa,cAAsB;AACjC,UAAO,UAAU,aAAa,CAAC,IAAI,UAAU;;EAG/C,mBAAmB;AACjB,UAAO,UAAU,aAAa;;EAGhC,UACE,MACA,MACA,cACG;AACH,UAAO,UAAU,QAAQ,MAAM,MAAM,UAAU;;EAGjD,cAAc,MAAc,oBAA6B;AACvD,UAAO,UAAU,YAAY,MAAM,gBAAgB;;EAEtD;CAEH,MAAM,UAAU,WAAW;CAG3B,MAAM,aAAa,eAAe,EAAE,SAAS,GAAG,CAAC,QAAQ,CAAC;AAE1D,QACE,oBAAC,mBAAmB;EAAS,OAAO;YAClC,oBAAC,iBAAiB;GAAS,OAAO;aAChC,oBAAC;IAAqB;IAAQ;KAAyB;IAC7B;GACA;;;;;;;;;AAWlC,SAAgB,iBAA8B;CAC5C,MAAM,UAAU,WAAW,mBAAmB;AAC9C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,qDAAqD;AAEvE,QAAO;;;;;;;;;AAUT,SAAgB,eAAoC;CAClD,MAAM,QAAQ,WAAW,iBAAiB;AAC1C,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,mDAAmD;AAErE,QAAO"}

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

@@ -0,0 +1,93 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useA2UI = require('../hooks/useA2UI.cjs');
+const require_ComponentNode = require('./ComponentNode.cjs');
+const require_utils = require('../lib/utils.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/react-renderer/core/A2UIRenderer.tsx
+/** Default loading fallback - memoized to prevent recreation */
+const DefaultLoadingFallback = (0, react.memo)(function DefaultLoadingFallback() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-loading",
+		style: {
+			padding: "16px",
+			opacity: .5
+		},
+		children: "Loading..."
+	});
+});
+/**
+* A2UIRenderer - renders an A2UI surface.
+*
+* This is the main entry point for rendering A2UI content in your React app.
+* It reads the surface state from the A2UI store and renders the component tree.
+*
+* Memoized to prevent unnecessary re-renders when props haven't changed.
+*
+* @example
+* ```tsx
+* function App() {
+*   return (
+*     <A2UIProvider onAction={handleAction}>
+*       <A2UIRenderer surfaceId="main" />
+*     </A2UIProvider>
+*   );
+* }
+* ```
+*/
+const A2UIRenderer = (0, react.memo)(function A2UIRenderer({ surfaceId, className, fallback = null, loadingFallback, registry }) {
+	const { getSurface, version } = require_useA2UI.useA2UI();
+	const surface = getSurface(surfaceId);
+	const surfaceStyles = (0, react.useMemo)(() => {
+		if (!surface?.styles) return {};
+		const styles = {};
+		for (const [key, value] of Object.entries(surface.styles)) switch (key) {
+			case "primaryColor":
+				styles["--p-100"] = "#ffffff";
+				styles["--p-99"] = `color-mix(in srgb, ${value} 2%, white 98%)`;
+				styles["--p-98"] = `color-mix(in srgb, ${value} 4%, white 96%)`;
+				styles["--p-95"] = `color-mix(in srgb, ${value} 10%, white 90%)`;
+				styles["--p-90"] = `color-mix(in srgb, ${value} 20%, white 80%)`;
+				styles["--p-80"] = `color-mix(in srgb, ${value} 40%, white 60%)`;
+				styles["--p-70"] = `color-mix(in srgb, ${value} 60%, white 40%)`;
+				styles["--p-60"] = `color-mix(in srgb, ${value} 80%, white 20%)`;
+				styles["--p-50"] = String(value);
+				styles["--p-40"] = `color-mix(in srgb, ${value} 80%, black 20%)`;
+				styles["--p-35"] = `color-mix(in srgb, ${value} 70%, black 30%)`;
+				styles["--p-30"] = `color-mix(in srgb, ${value} 60%, black 40%)`;
+				styles["--p-25"] = `color-mix(in srgb, ${value} 50%, black 50%)`;
+				styles["--p-20"] = `color-mix(in srgb, ${value} 40%, black 60%)`;
+				styles["--p-15"] = `color-mix(in srgb, ${value} 30%, black 70%)`;
+				styles["--p-10"] = `color-mix(in srgb, ${value} 20%, black 80%)`;
+				styles["--p-5"] = `color-mix(in srgb, ${value} 10%, black 90%)`;
+				styles["--p-0"] = "#000000";
+				break;
+			case "font":
+				styles["--font-family"] = String(value);
+				styles["--font-family-flex"] = String(value);
+				break;
+		}
+		return styles;
+	}, [surface?.styles]);
+	if (!surface || !surface.componentTree) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	const actualLoadingFallback = loadingFallback ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultLoadingFallback, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("a2ui-surface", className),
+		style: surfaceStyles,
+		"data-surface-id": surfaceId,
+		"data-version": version,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+			fallback: actualLoadingFallback,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
+				node: surface.componentTree,
+				surfaceId,
+				registry
+			})
+		})
+	});
+});
+
+//#endregion
+exports.default = A2UIRenderer;
+//# sourceMappingURL=A2UIRenderer.cjs.map

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

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

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

@@ -0,0 +1,92 @@
+import { useA2UI } from "../hooks/useA2UI.mjs";
+import ComponentNode from "./ComponentNode.mjs";
+import { cn } from "../lib/utils.mjs";
+import { Suspense, memo, useMemo } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/react-renderer/core/A2UIRenderer.tsx
+/** Default loading fallback - memoized to prevent recreation */
+const DefaultLoadingFallback = memo(function DefaultLoadingFallback() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-loading",
+		style: {
+			padding: "16px",
+			opacity: .5
+		},
+		children: "Loading..."
+	});
+});
+/**
+* A2UIRenderer - renders an A2UI surface.
+*
+* This is the main entry point for rendering A2UI content in your React app.
+* It reads the surface state from the A2UI store and renders the component tree.
+*
+* Memoized to prevent unnecessary re-renders when props haven't changed.
+*
+* @example
+* ```tsx
+* function App() {
+*   return (
+*     <A2UIProvider onAction={handleAction}>
+*       <A2UIRenderer surfaceId="main" />
+*     </A2UIProvider>
+*   );
+* }
+* ```
+*/
+const A2UIRenderer = memo(function A2UIRenderer({ surfaceId, className, fallback = null, loadingFallback, registry }) {
+	const { getSurface, version } = useA2UI();
+	const surface = getSurface(surfaceId);
+	const surfaceStyles = useMemo(() => {
+		if (!surface?.styles) return {};
+		const styles = {};
+		for (const [key, value] of Object.entries(surface.styles)) switch (key) {
+			case "primaryColor":
+				styles["--p-100"] = "#ffffff";
+				styles["--p-99"] = `color-mix(in srgb, ${value} 2%, white 98%)`;
+				styles["--p-98"] = `color-mix(in srgb, ${value} 4%, white 96%)`;
+				styles["--p-95"] = `color-mix(in srgb, ${value} 10%, white 90%)`;
+				styles["--p-90"] = `color-mix(in srgb, ${value} 20%, white 80%)`;
+				styles["--p-80"] = `color-mix(in srgb, ${value} 40%, white 60%)`;
+				styles["--p-70"] = `color-mix(in srgb, ${value} 60%, white 40%)`;
+				styles["--p-60"] = `color-mix(in srgb, ${value} 80%, white 20%)`;
+				styles["--p-50"] = String(value);
+				styles["--p-40"] = `color-mix(in srgb, ${value} 80%, black 20%)`;
+				styles["--p-35"] = `color-mix(in srgb, ${value} 70%, black 30%)`;
+				styles["--p-30"] = `color-mix(in srgb, ${value} 60%, black 40%)`;
+				styles["--p-25"] = `color-mix(in srgb, ${value} 50%, black 50%)`;
+				styles["--p-20"] = `color-mix(in srgb, ${value} 40%, black 60%)`;
+				styles["--p-15"] = `color-mix(in srgb, ${value} 30%, black 70%)`;
+				styles["--p-10"] = `color-mix(in srgb, ${value} 20%, black 80%)`;
+				styles["--p-5"] = `color-mix(in srgb, ${value} 10%, black 90%)`;
+				styles["--p-0"] = "#000000";
+				break;
+			case "font":
+				styles["--font-family"] = String(value);
+				styles["--font-family-flex"] = String(value);
+				break;
+		}
+		return styles;
+	}, [surface?.styles]);
+	if (!surface || !surface.componentTree) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	const actualLoadingFallback = loadingFallback ?? /* @__PURE__ */ jsx(DefaultLoadingFallback, {});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("a2ui-surface", className),
+		style: surfaceStyles,
+		"data-surface-id": surfaceId,
+		"data-version": version,
+		children: /* @__PURE__ */ jsx(Suspense, {
+			fallback: actualLoadingFallback,
+			children: /* @__PURE__ */ jsx(ComponentNode, {
+				node: surface.componentTree,
+				surfaceId,
+				registry
+			})
+		})
+	});
+});
+
+//#endregion
+export { A2UIRenderer as default };
+//# sourceMappingURL=A2UIRenderer.mjs.map

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

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

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

@@ -0,0 +1,53 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_ComponentRegistry = require('../registry/ComponentRegistry.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/react-renderer/core/ComponentNode.tsx
+/** Memoized loading fallback to avoid recreating on each render */
+const LoadingFallback = (0, react.memo)(function LoadingFallback() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.memo)(function ComponentNode({ node, surfaceId, registry }) {
+	const actualRegistry = registry ?? require_ComponentRegistry.ComponentRegistry.getInstance();
+	const nodeType = node && typeof node === "object" && "type" in node ? node.type : null;
+	const Component = (0, react.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__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingFallback, {}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			node,
+			surfaceId
+		})
+	});
+});
+
+//#endregion
+exports.default = ComponentNode;
+//# sourceMappingURL=ComponentNode.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentNode.cjs","names":["ComponentRegistry","Suspense"],"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,kCAAuB,SAAS,kBAAkB;AACtD,QACE,2CAAC;EAAI,WAAU;EAAe,OAAO;GAAE,SAAS;GAAO,SAAS;GAAK;YAAE;GAEjE;EAER;;;;;;;;;;;;;AAuBF,MAAa,gCAAqB,SAAS,cAAc,EACvD,MACA,WACA,YACqB;CACrB,MAAM,iBAAiB,YAAYA,4CAAkB,aAAa;CAIlE,MAAM,WACJ,QAAQ,OAAO,SAAS,YAAY,UAAU,OAAO,KAAK,OAAO;CAEnE,MAAM,qCACG,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,2CAACC;EAAS,UAAU,2CAAC,oBAAkB;YACrC,2CAAC;GAAgB;GAA2C;IAAa;GAChE;EAEb"}