@copilotkit/a2ui-renderer 1.51.4-next.5 → 1.51.4-next.7

package/dist/react-renderer/theme/litTheme.js

@@ -0,0 +1,401 @@
+/**
+ * Default theme for A2UI React components.
+ *
+ * This theme uses the same CSS class conventions as the Lit renderer,
+ * ensuring visual consistency between React and Lit implementations.
+ *
+ * IMPORTANT: This theme must be kept in sync with the Lit renderer's internal
+ * styling. If Lit components change their class maps, this file must be updated
+ * to match. Ideally, Lit would export its default theme for direct import.
+ *
+ * Requires the structural styles to be injected:
+ * @example
+ * ```tsx
+ * import { A2UIProvider } from '@a2ui/react';
+ * import { injectStyles } from '@a2ui/react/styles';
+ *
+ * // Inject structural CSS at app startup
+ * injectStyles();
+ *
+ * function App() {
+ *   return (
+ *     <A2UIProvider>
+ *       <A2UIRenderer surfaceId="main" />
+ *     </A2UIProvider>
+ *   );
+ * }
+ * ```
+ */
+// =============================================================================
+// Element Styles (used for markdown rendering and form elements)
+// =============================================================================
+const elementA = {
+    'typography-f-sf': true,
+    'typography-fs-n': true,
+    'typography-w-500': true,
+    'layout-as-n': true,
+    'layout-dis-iflx': true,
+    'layout-al-c': true,
+    'typography-td-none': true,
+    'color-c-p40': true,
+};
+const elementAudio = {
+    'layout-w-100': true,
+};
+const elementBody = {
+    'typography-f-s': true,
+    'typography-fs-n': true,
+    'typography-w-400': true,
+    'layout-mt-0': true,
+    'layout-mb-2': true,
+    'typography-sz-bm': true,
+    'color-c-n10': true,
+};
+const elementButton = {
+    'typography-f-sf': true,
+    'typography-fs-n': true,
+    'typography-w-500': true,
+    'layout-pt-3': true,
+    'layout-pb-3': true,
+    'layout-pl-5': true,
+    'layout-pr-5': true,
+    'layout-mb-1': true,
+    'border-br-16': true,
+    'border-bw-0': true,
+    'border-c-n70': true,
+    'border-bs-s': true,
+    'color-bgc-s30': true,
+    'behavior-ho-80': true,
+};
+const elementHeading = {
+    'typography-f-sf': true,
+    'typography-fs-n': true,
+    'typography-w-500': true,
+    'layout-mt-0': true,
+    'layout-mb-2': true,
+};
+const elementIframe = {
+    'behavior-sw-n': true,
+};
+const elementInput = {
+    'typography-f-sf': true,
+    'typography-fs-n': true,
+    'typography-w-400': true,
+    'layout-pl-4': true,
+    'layout-pr-4': true,
+    'layout-pt-2': true,
+    'layout-pb-2': true,
+    'border-br-6': true,
+    'border-bw-1': true,
+    'color-bc-s70': true,
+    'border-bs-s': true,
+    'layout-as-n': true,
+    'color-c-n10': true,
+};
+const elementP = {
+    'typography-f-s': true,
+    'typography-fs-n': true,
+    'typography-w-400': true,
+    'layout-m-0': true,
+    'typography-sz-bm': true,
+    'layout-as-n': true,
+    'color-c-n10': true,
+};
+const elementList = {
+    'typography-f-s': true,
+    'typography-fs-n': true,
+    'typography-w-400': true,
+    'layout-m-0': true,
+    'typography-sz-bm': true,
+    'layout-as-n': true,
+    'color-c-n10': true,
+};
+const elementPre = {
+    'typography-f-c': true,
+    'typography-fs-n': true,
+    'typography-w-400': true,
+    'typography-sz-bm': true,
+    'typography-ws-p': true,
+    'layout-as-n': true,
+};
+const elementTextarea = {
+    ...elementInput,
+    'layout-r-none': true,
+    'layout-fs-c': true,
+};
+const elementVideo = {
+    'layout-el-cv': true,
+};
+// =============================================================================
+// Theme Export
+// =============================================================================
+export const litTheme = {
+    // ===========================================================================
+    // Additional Styles (inline CSS properties)
+    // ===========================================================================
+    // additionalStyles is optional - only define if custom styling is needed
+    // The default Lit theme does not apply any additional inline styles
+    components: {
+        // =========================================================================
+        // Content Components
+        // =========================================================================
+        AudioPlayer: {},
+        Divider: {},
+        Icon: {},
+        Image: {
+            all: {
+                'border-br-5': true,
+                'layout-el-cv': true,
+                'layout-w-100': true,
+                'layout-h-100': true,
+            },
+            avatar: { 'is-avatar': true },
+            header: {},
+            icon: {},
+            largeFeature: {},
+            mediumFeature: {},
+            smallFeature: {},
+        },
+        Text: {
+            all: {
+                'layout-w-100': true,
+                'layout-g-2': true,
+            },
+            h1: {
+                'typography-f-sf': true,
+                'typography-v-r': true,
+                'typography-w-400': true,
+                'layout-m-0': true,
+                'layout-p-0': true,
+                'typography-sz-hs': true,
+            },
+            h2: {
+                'typography-f-sf': true,
+                'typography-v-r': true,
+                'typography-w-400': true,
+                'layout-m-0': true,
+                'layout-p-0': true,
+                'typography-sz-tl': true,
+            },
+            h3: {
+                'typography-f-sf': true,
+                'typography-v-r': true,
+                'typography-w-400': true,
+                'layout-m-0': true,
+                'layout-p-0': true,
+                'typography-sz-tl': true,
+            },
+            h4: {
+                'typography-f-sf': true,
+                'typography-v-r': true,
+                'typography-w-400': true,
+                'layout-m-0': true,
+                'layout-p-0': true,
+                'typography-sz-bl': true,
+            },
+            h5: {
+                'typography-f-sf': true,
+                'typography-v-r': true,
+                'typography-w-400': true,
+                'layout-m-0': true,
+                'layout-p-0': true,
+                'typography-sz-bm': true,
+            },
+            body: {},
+            caption: {},
+        },
+        Video: {
+            'border-br-5': true,
+            'layout-el-cv': true,
+        },
+        // =========================================================================
+        // Layout Components
+        // =========================================================================
+        Card: {
+            'border-br-9': true,
+            'layout-p-4': true,
+            'color-bgc-n100': true,
+        },
+        Column: {
+            'layout-g-2': true,
+        },
+        List: {
+            'layout-g-4': true,
+            'layout-p-2': true,
+        },
+        Modal: {
+            backdrop: {
+                'color-bbgc-p60_20': true,
+            },
+            element: {
+                'border-br-2': true,
+                'color-bgc-p100': true,
+                'layout-p-4': true,
+                'border-bw-1': true,
+                'border-bs-s': true,
+                'color-bc-p80': true,
+            },
+        },
+        Row: {
+            'layout-g-4': true,
+        },
+        Tabs: {
+            container: {},
+            controls: {
+                all: {},
+                selected: {},
+            },
+            element: {},
+        },
+        // =========================================================================
+        // Interactive Components
+        // =========================================================================
+        Button: {
+            'layout-pt-2': true,
+            'layout-pb-2': true,
+            'layout-pl-3': true,
+            'layout-pr-3': true,
+            'border-br-12': true,
+            'border-bw-0': true,
+            'border-bs-s': true,
+            'color-bgc-p30': true,
+            'color-c-p100': true, // White text on dark purple background
+            'behavior-ho-70': true,
+            'typography-w-400': true,
+        },
+        CheckBox: {
+            container: {
+                'layout-dsp-iflex': true,
+                'layout-al-c': true,
+            },
+            element: {
+                'layout-m-0': true,
+                'layout-mr-2': true,
+                'layout-p-2': true,
+                'border-br-12': true,
+                'border-bw-1': true,
+                'border-bs-s': true,
+                'color-bgc-p100': true,
+                'color-bc-p60': true,
+                'color-c-n30': true,
+                'color-c-p30': true,
+            },
+            label: {
+                'color-c-p30': true,
+                'typography-f-sf': true,
+                'typography-v-r': true,
+                'typography-w-400': true,
+                'layout-flx-1': true,
+                'typography-sz-ll': true,
+            },
+        },
+        DateTimeInput: {
+            container: {
+                'typography-sz-bm': true,
+                'layout-w-100': true,
+                'layout-g-2': true,
+                'layout-dsp-flexhor': true,
+                'layout-al-c': true,
+                'typography-ws-nw': true,
+            },
+            label: {
+                'color-c-p30': true,
+                'typography-sz-bm': true,
+            },
+            element: {
+                'layout-pt-2': true,
+                'layout-pb-2': true,
+                'layout-pl-3': true,
+                'layout-pr-3': true,
+                'border-br-2': true,
+                'border-bw-1': true,
+                'border-bs-s': true,
+                'color-bgc-p100': true,
+                'color-bc-p60': true,
+                'color-c-n30': true,
+                'color-c-p30': true,
+            },
+        },
+        MultipleChoice: {
+            container: {},
+            label: {},
+            element: {},
+        },
+        Slider: {
+            container: {},
+            label: {},
+            element: {},
+        },
+        TextField: {
+            container: {
+                'typography-sz-bm': true,
+                'layout-w-100': true,
+                'layout-g-2': true,
+                'layout-dsp-flexhor': true,
+                'layout-al-c': true,
+                'typography-ws-nw': true,
+            },
+            label: {
+                'layout-flx-0': true,
+                'color-c-p30': true,
+            },
+            element: {
+                'typography-sz-bm': true,
+                'layout-pt-2': true,
+                'layout-pb-2': true,
+                'layout-pl-3': true,
+                'layout-pr-3': true,
+                'border-br-2': true,
+                'border-bw-1': true,
+                'border-bs-s': true,
+                'color-bgc-p100': true,
+                'color-bc-p60': true,
+                'color-c-n30': true,
+                'color-c-p30': true,
+            },
+        },
+    },
+    // ===========================================================================
+    // HTML Elements (used for markdown rendering and raw HTML)
+    // ===========================================================================
+    elements: {
+        a: elementA,
+        audio: elementAudio,
+        body: elementBody,
+        button: elementButton,
+        h1: elementHeading,
+        h2: elementHeading,
+        h3: elementHeading,
+        h4: elementHeading,
+        h5: elementHeading,
+        iframe: elementIframe,
+        input: elementInput,
+        p: elementP,
+        pre: elementPre,
+        textarea: elementTextarea,
+        video: elementVideo,
+    },
+    // ===========================================================================
+    // Markdown (class arrays for markdown-it renderer)
+    // ===========================================================================
+    markdown: {
+        p: Object.keys(elementP),
+        h1: Object.keys(elementHeading),
+        h2: Object.keys(elementHeading),
+        h3: Object.keys(elementHeading),
+        h4: Object.keys(elementHeading),
+        h5: Object.keys(elementHeading),
+        ul: Object.keys(elementList),
+        ol: Object.keys(elementList),
+        li: Object.keys(elementList),
+        a: Object.keys(elementA),
+        strong: [],
+        em: [],
+    },
+};
+/**
+ * Alias for litTheme - the default theme for A2UI React components.
+ * @see litTheme
+ */
+export const defaultTheme = litTheme;
+//# sourceMappingURL=litTheme.js.map

package/dist/react-renderer/theme/litTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"litTheme.js","sourceRoot":"","sources":["../../../src/react-renderer/theme/litTheme.ts"],"names":[],"mappings":"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"}

package/dist/react-renderer/theme/utils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Converts a theme class map (Record<string, boolean>) to a className string.
+ *
+ * @param classMap - An object where keys are class names and values are booleans
+ * @returns A space-separated string of class names where the value is true
+ *
+ * @example
+ * classMapToString({ 'a2ui-button': true, 'a2ui-button--primary': true, 'disabled': false })
+ * // Returns: 'a2ui-button a2ui-button--primary'
+ */
+export declare function classMapToString(classMap: Record<string, boolean> | undefined): string;
+/**
+ * Converts an additional styles object (Record<string, string>) to a React style object.
+ *
+ * @param styles - An object with CSS property names as keys and values as strings
+ * @returns A React-compatible style object, or undefined if no styles
+ *
+ * @example
+ * stylesToObject({ 'background-color': 'red', 'font-size': '16px', '--custom-var': 'blue' })
+ * // Returns: { backgroundColor: 'red', fontSize: '16px', '--custom-var': 'blue' }
+ */
+export declare function stylesToObject(styles: Record<string, string> | undefined): React.CSSProperties | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/dist/react-renderer/theme/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/react-renderer/theme/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,CAMtF;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,GACzC,KAAK,CAAC,aAAa,GAAG,SAAS,CAejC"}

package/dist/react-renderer/theme/utils.js

@@ -0,0 +1,46 @@
+/**
+ * Converts a theme class map (Record<string, boolean>) to a className string.
+ *
+ * @param classMap - An object where keys are class names and values are booleans
+ * @returns A space-separated string of class names where the value is true
+ *
+ * @example
+ * classMapToString({ 'a2ui-button': true, 'a2ui-button--primary': true, 'disabled': false })
+ * // Returns: 'a2ui-button a2ui-button--primary'
+ */
+export function classMapToString(classMap) {
+    if (!classMap)
+        return '';
+    return Object.entries(classMap)
+        .filter(([, enabled]) => enabled)
+        .map(([className]) => className)
+        .join(' ');
+}
+/**
+ * Converts an additional styles object (Record<string, string>) to a React style object.
+ *
+ * @param styles - An object with CSS property names as keys and values as strings
+ * @returns A React-compatible style object, or undefined if no styles
+ *
+ * @example
+ * stylesToObject({ 'background-color': 'red', 'font-size': '16px', '--custom-var': 'blue' })
+ * // Returns: { backgroundColor: 'red', fontSize: '16px', '--custom-var': 'blue' }
+ */
+export function stylesToObject(styles) {
+    if (!styles || Object.keys(styles).length === 0)
+        return undefined;
+    const result = {};
+    for (const [key, value] of Object.entries(styles)) {
+        // Preserve CSS custom properties (--var-name) as-is
+        if (key.startsWith('--')) {
+            result[key] = value;
+        }
+        else {
+            // Convert kebab-case to camelCase for React
+            const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+            result[camelKey] = value;
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=utils.js.map

package/dist/react-renderer/theme/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/react-renderer/theme/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,QAA6C;IAC5E,IAAI,CAAC,QAAQ;QAAE,OAAO,EAAE,CAAC;IACzB,OAAO,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC;SAC5B,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC;SAChC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC;SAC/B,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,cAAc,CAC5B,MAA0C;IAE1C,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,SAAS,CAAC;IAElE,MAAM,MAAM,GAA2B,EAAE,CAAC;IAC1C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAClD,oDAAoD;QACpD,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,4CAA4C;YAC5C,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;YAC/E,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;QAC3B,CAAC;IACH,CAAC;IACD,OAAO,MAA6B,CAAC;AACvC,CAAC"}

package/dist/react-renderer/types.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentType } from 'react';
+import type { Types, Primitives } from '@a2ui/lit/0.8';
+export type { Types, Primitives };
+export type AnyComponentNode = Types.AnyComponentNode;
+export type Surface = Types.Surface;
+export type SurfaceID = Types.SurfaceID;
+export type Theme = Types.Theme;
+export type ServerToClientMessage = Types.ServerToClientMessage;
+export type A2UIClientEventMessage = Types.A2UIClientEventMessage;
+export type Action = Types.Action;
+export type DataValue = Types.DataValue;
+export type MessageProcessor = Types.MessageProcessor;
+export type StringValue = Primitives.StringValue;
+export type NumberValue = Primitives.NumberValue;
+export type BooleanValue = Primitives.BooleanValue;
+/**
+ * Props passed to all A2UI React components.
+ */
+export interface A2UIComponentProps<T extends Types.AnyComponentNode = Types.AnyComponentNode> {
+    /** The resolved component node from the A2UI message processor */
+    node: T;
+    /** The surface ID this component belongs to */
+    surfaceId: string;
+}
+/**
+ * A function that loads a React component asynchronously.
+ */
+export type ComponentLoader<T extends Types.AnyComponentNode = Types.AnyComponentNode> = () => Promise<{
+    default: ComponentType<A2UIComponentProps<T>>;
+}>;
+/**
+ * Registration entry for a component in the registry.
+ */
+export interface ComponentRegistration<T extends Types.AnyComponentNode = Types.AnyComponentNode> {
+    /** The React component or a loader function for lazy loading */
+    component: ComponentType<A2UIComponentProps<T>> | ComponentLoader<T>;
+    /** If true, the component will be lazy loaded */
+    lazy?: boolean;
+}
+/**
+ * Callback for when a user action is dispatched.
+ */
+export type OnActionCallback = (message: Types.A2UIClientEventMessage) => void | Promise<void>;
+/**
+ * Configuration options for the A2UI provider.
+ */
+export interface A2UIProviderConfig {
+    /** Callback invoked when a user action is dispatched (button click, etc.) */
+    onAction?: OnActionCallback;
+    /** Initial theme configuration */
+    theme?: Types.Theme;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/react-renderer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/react-renderer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGvD,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;AAGlC,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,CAAC;AACtD,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AACpC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;AACxC,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AAChC,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,sBAAsB,CAAC;AAClE,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;AAClC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;AACxC,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,CAAC;AAGtD,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC;AACjD,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAAC,gBAAgB,GAAG,KAAK,CAAC,gBAAgB;IAC3F,kEAAkE;IAClE,IAAI,EAAE,CAAC,CAAC;IACR,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,IAAI,MAAM,OAAO,CAAC;IACrG,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;CAC/C,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,gBAAgB,GAAG,KAAK,CAAC,gBAAgB;IAC9F,gEAAgE;IAChE,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IACrE,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,kCAAkC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC;CACrB"}

package/dist/react-renderer/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/react-renderer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/react-renderer/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@copilotkit/a2ui-renderer",
   "private": false,
-  "version": "1.51.4-next.5",
+  "version": "1.51.4-next.7",
   "description": "A2UI Renderer for CopilotKit - render A2UI surfaces in React applications",
   "homepage": "https://github.com/CopilotKit/CopilotKit",
   "repository": {
@@ -37,18 +37,18 @@
   ],
   "dependencies": {
     "@a2ui/lit": "^0.8.1",
-    "@lit-labs/signals": "^0.1.3",
-    "@lit/context": "^1.1.4",
-    "lit": "^3.2.1",
-    "zod": "^3.25.75",
-    "@copilotkit/react-core": "1.51.4-next.5"
+    "clsx": "^2.1.1",
+    "markdown-it": "^14.1.0",
+    "zod": "^3.25.75"
   },
   "peerDependencies": {
+    "@copilotkit/react-core": ">=1.51.4-next.7",
     "react": "^18 || ^19 || ^19.0.0-rc",
     "react-dom": "^18 || ^19 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",
+    "@types/markdown-it": "^14.1.2",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^26.1.0",

package/dist/styles/components.d.ts

@@ -1,7 +0,0 @@
-/**
- * Component-level styles distributed via ThemeManager.
- * These use :host() selectors to target specific A2UI components
- * from within their shadow roots.
- */
-export declare const componentStyles = "";
-//# sourceMappingURL=components.d.ts.map

package/dist/styles/components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/styles/components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,eAAe,KAAK,CAAC"}

package/dist/styles/components.js

@@ -1,7 +0,0 @@
-/**
- * Component-level styles distributed via ThemeManager.
- * These use :host() selectors to target specific A2UI components
- * from within their shadow roots.
- */
-export const componentStyles = ``;
-//# sourceMappingURL=components.js.map

package/dist/styles/components.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/styles/components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,CAAC"}

package/dist/styles/global.d.ts

@@ -1,2 +0,0 @@
-export declare const globalStyles = "\n  :host {\n    --n-100: #ffffff;\n    --n-99: #fcfcfc;\n    --n-98: #f9f9f9;\n    --n-95: #f1f1f1;\n    --n-90: #e2e2e2;\n    --n-80: #c6c6c6;\n    --n-70: #ababab;\n    --n-60: #919191;\n    --n-50: #777777;\n    --n-40: #5e5e5e;\n    --n-35: #525252;\n    --n-30: #474747;\n    --n-25: #3b3b3b;\n    --n-20: #303030;\n    --n-15: #262626;\n    --n-10: #1b1b1b;\n    --n-5: #111111;\n    --n-0: #000000;\n\n    --p-100: var(--a2ui-card-bg, #ffffff);\n    --p-99: #fffbff;\n    --p-98: #fcf8ff;\n    --p-95: #f2efff;\n    --p-90: #e1e0ff;\n    --p-80: #c0c1ff;\n    --p-70: #a0a3ff;\n    --p-60: #8487ea;\n    --p-50: #6a6dcd;\n    --p-40: #5154b3;\n    --p-35: #4447a6;\n    --p-30: #383b99;\n    --p-25: #2c2e8d;\n    --p-20: #202182;\n    --p-15: #131178;\n    --p-10: #06006c;\n    --p-5: #03004d;\n    --p-0: #000000;\n\n    --s-100: #ffffff;\n    --s-99: #fffbff;\n    --s-98: #fcf8ff;\n    --s-95: #f2efff;\n    --s-90: #e2e0f9;\n    --s-80: #c6c4dd;\n    --s-70: #aaa9c1;\n    --s-60: #8f8fa5;\n    --s-50: #75758b;\n    --s-40: #5d5c72;\n    --s-35: #515165;\n    --s-30: #454559;\n    --s-25: #393a4d;\n    --s-20: #2e2f42;\n    --s-15: #242437;\n    --s-10: #191a2c;\n    --s-5: #0f0f21;\n    --s-0: #000000;\n\n    --t-100: #ffffff;\n    --t-99: #fffbff;\n    --t-98: #fff8f9;\n    --t-95: #ffecf4;\n    --t-90: #ffd8ec;\n    --t-80: #e9b9d3;\n    --t-70: #cc9eb8;\n    --t-60: #af849d;\n    --t-50: #946b83;\n    --t-40: #79536a;\n    --t-35: #6c475d;\n    --t-30: #5f3c51;\n    --t-25: #523146;\n    --t-20: #46263a;\n    --t-15: #3a1b2f;\n    --t-10: #2e1125;\n    --t-5: #22071a;\n    --t-0: #000000;\n\n    --nv-100: #ffffff;\n    --nv-99: #fffbff;\n    --nv-98: #fcf8ff;\n    --nv-95: #f2effa;\n    --nv-90: #e4e1ec;\n    --nv-80: #c8c5d0;\n    --nv-70: #acaab4;\n    --nv-60: #918f9a;\n    --nv-50: #777680;\n    --nv-40: #5e5d67;\n    --nv-35: #52515b;\n    --nv-30: #46464f;\n    --nv-25: #3b3b43;\n    --nv-20: #303038;\n    --nv-15: #25252d;\n    --nv-10: #1b1b23;\n    --nv-5: #101018;\n    --nv-0: #000000;\n\n    --e-100: #ffffff;\n    --e-99: #fffbff;\n    --e-98: #fff8f7;\n    --e-95: #ffedea;\n    --e-90: #ffdad6;\n    --e-80: #ffb4ab;\n    --e-70: #ff897d;\n    --e-60: #ff5449;\n    --e-50: #de3730;\n    --e-40: #ba1a1a;\n    --e-35: #a80710;\n    --e-30: #93000a;\n    --e-25: #7e0007;\n    --e-20: #690005;\n    --e-15: #540003;\n    --e-10: #410002;\n    --e-5: #2d0001;\n    --e-0: #000000;\n\n    --primary: #137fec;\n    --text-color: #fff;\n    --background-light: #f6f7f8;\n    --background-dark: #101922;\n    --border-color: oklch(from var(--background-light) l c h / calc(alpha * 0.15));\n    --elevated-background-light: oklch(\n      from var(--background-light) l c h / calc(alpha * 0.05)\n    );\n    --bb-grid-size: 4px;\n    --bb-grid-size-2: calc(var(--bb-grid-size) * 2);\n    --bb-grid-size-3: calc(var(--bb-grid-size) * 3);\n    --bb-grid-size-4: calc(var(--bb-grid-size) * 4);\n    --bb-grid-size-5: calc(var(--bb-grid-size) * 5);\n    --bb-grid-size-6: calc(var(--bb-grid-size) * 6);\n    --bb-grid-size-7: calc(var(--bb-grid-size) * 7);\n    --bb-grid-size-8: calc(var(--bb-grid-size) * 8);\n    --bb-grid-size-9: calc(var(--bb-grid-size) * 9);\n    --bb-grid-size-10: calc(var(--bb-grid-size) * 10);\n    --bb-grid-size-11: calc(var(--bb-grid-size) * 11);\n    --bb-grid-size-12: calc(var(--bb-grid-size) * 12);\n    --bb-grid-size-13: calc(var(--bb-grid-size) * 13);\n    --bb-grid-size-14: calc(var(--bb-grid-size) * 14);\n    --bb-grid-size-15: calc(var(--bb-grid-size) * 15);\n    --bb-grid-size-16: calc(var(--bb-grid-size) * 16);\n\n    font-family: \"Google Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  }\n";
-//# sourceMappingURL=global.d.ts.map

package/dist/styles/global.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/styles/global.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,+mHA+IxB,CAAC"}