@datalayer/agent-runtimes 0.0.2

package/lib/renderers/a2ui/components/layout/Row.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types/index.js';
+interface RowProps extends A2UIComponentProps {
+    node: Types.AnyComponentNode & {
+        type: 'Row';
+    };
+    children?: ReactNode;
+}
+export declare function Row({ node, children }: RowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/renderers/a2ui/components/layout/Row.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+import { useMemo } from 'react';
+import { useTheme } from '../../context/ThemeContext.js';
+import { cn, classMapToString } from '../../lib/utils.js';
+export function Row({ node, children }) {
+    const theme = useTheme();
+    const properties = node.properties;
+    const alignment = properties.alignment ?? 'stretch';
+    const distribution = properties.distribution ?? 'start';
+    const themeClasses = useMemo(() => {
+        return classMapToString(theme.components.Row);
+    }, [theme]);
+    const alignmentClass = useMemo(() => {
+        switch (alignment) {
+            case 'start':
+                return 'items-start';
+            case 'center':
+                return 'items-center';
+            case 'end':
+                return 'items-end';
+            case 'stretch':
+                return 'items-stretch';
+            default:
+                return 'items-stretch';
+        }
+    }, [alignment]);
+    const distributionClass = useMemo(() => {
+        switch (distribution) {
+            case 'start':
+                return 'justify-start';
+            case 'center':
+                return 'justify-center';
+            case 'end':
+                return 'justify-end';
+            case 'spaceBetween':
+                return 'justify-between';
+            case 'spaceAround':
+                return 'justify-around';
+            case 'spaceEvenly':
+                return 'justify-evenly';
+            default:
+                return 'justify-start';
+        }
+    }, [distribution]);
+    return (_jsx("div", { className: cn(themeClasses, alignmentClass, distributionClass), children: children }));
+}

package/lib/renderers/a2ui/components/layout/Tabs.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types/index.js';
+interface TabsProps extends A2UIComponentProps {
+    node: Types.AnyComponentNode & {
+        type: 'Tabs';
+    };
+    renderChild?: (node: Types.AnyComponentNode) => ReactNode;
+}
+export declare function Tabs({ node, renderChild }: TabsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/renderers/a2ui/components/layout/Tabs.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+import { useState, useMemo } from 'react';
+import { useTheme } from '../../context/ThemeContext.js';
+import { cn, classMapToString } from '../../lib/utils.js';
+export function Tabs({ node, renderChild }) {
+    const theme = useTheme();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const properties = node.properties;
+    const tabItems = properties.tabItems ?? [];
+    const containerClasses = useMemo(() => {
+        return classMapToString(theme.components.Tabs.container);
+    }, [theme]);
+    const controlsClasses = useMemo(() => {
+        return classMapToString(theme.components.Tabs.controls.all);
+    }, [theme]);
+    const selectedClasses = useMemo(() => {
+        return classMapToString(theme.components.Tabs.controls.selected);
+    }, [theme]);
+    if (tabItems.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn(containerClasses), children: [_jsx("div", { className: cn(controlsClasses), role: "tablist", children: tabItems.map((item, index) => {
+                    const title = item.title?.literalString ?? `Tab ${index + 1}`;
+                    const isSelected = index === activeIndex;
+                    return (_jsx("button", { role: "tab", "aria-selected": isSelected, onClick: () => setActiveIndex(index), className: cn('inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', isSelected && selectedClasses), children: title }, index));
+                }) }), _jsx("div", { className: "mt-2", role: "tabpanel", children: tabItems[activeIndex]?.child && renderChild
+                    ? renderChild(tabItems[activeIndex].child)
+                    : null })] }));
+}

package/lib/renderers/a2ui/components/layout/index.d.ts

@@ -0,0 +1,6 @@
+export { Row } from './Row.js';
+export { Column } from './Column.js';
+export { List } from './List.js';
+export { Card } from './Card.js';
+export { Tabs } from './Tabs.js';
+export { Modal } from './Modal.js';

package/lib/renderers/a2ui/components/layout/index.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+export { Row } from './Row.js';
+export { Column } from './Column.js';
+export { List } from './List.js';
+export { Card } from './Card.js';
+export { Tabs } from './Tabs.js';
+export { Modal } from './Modal.js';

package/lib/renderers/a2ui/context/A2UIContext.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import { Types } from '@a2ui/lit/0.8';
+import type { SendActionCallback } from '../types/index.js';
+interface A2UIContextValue {
+    processor: Types.MessageProcessor;
+    surfaces: ReadonlyMap<string, Types.Surface>;
+    processMessages: (messages: Types.ServerToClientMessage[]) => void;
+    sendAction: SendActionCallback;
+    refresh: () => void;
+}
+export interface A2UIProviderProps {
+    children: ReactNode;
+    onAction?: SendActionCallback;
+}
+export declare function A2UIProvider({ children, onAction }: A2UIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useA2UIContext(): A2UIContextValue;
+export {};

package/lib/renderers/a2ui/context/A2UIContext.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+import { createContext, useContext, useState, useCallback, useMemo, } from 'react';
+import { Data } from '@a2ui/lit/0.8';
+const A2UIContext = createContext(null);
+export function A2UIProvider({ children, onAction }) {
+    const [processor] = useState(() => new Data.A2uiMessageProcessor());
+    const [version, setVersion] = useState(0);
+    const processMessages = useCallback((messages) => {
+        processor.processMessages(messages);
+        setVersion(v => v + 1);
+    }, [processor]);
+    const sendAction = useCallback((action) => {
+        onAction?.(action);
+    }, [onAction]);
+    const refresh = useCallback(() => {
+        setVersion(v => v + 1);
+    }, []);
+    const value = useMemo(() => ({
+        processor,
+        surfaces: processor.getSurfaces(),
+        processMessages,
+        sendAction,
+        refresh,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [processor, processMessages, sendAction, refresh, version]);
+    return _jsx(A2UIContext.Provider, { value: value, children: children });
+}
+export function useA2UIContext() {
+    const context = useContext(A2UIContext);
+    if (!context) {
+        throw new Error('useA2UIContext must be used within an A2UIProvider');
+    }
+    return context;
+}

package/lib/renderers/a2ui/context/ThemeContext.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { Types } from '@a2ui/lit/0.8';
+/**
+ * Default theme with Tailwind CSS classes for ShadCN-style components.
+ */
+export declare const defaultTheme: Types.Theme;
+export interface ThemeProviderProps {
+    children: ReactNode;
+    theme?: Types.Theme;
+}
+/**
+ * Theme Provider for A2UI components.
+ * Provides CSS class mappings for all components.
+ */
+export declare function ThemeProvider({ children, theme, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the theme context.
+ * Returns the default theme if no provider is found.
+ */
+export declare function useTheme(): Types.Theme;

package/lib/renderers/a2ui/context/ThemeContext.js

@@ -0,0 +1,333 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+import { createContext, useContext } from 'react';
+const ThemeContext = createContext(null);
+/**
+ * Default theme with Tailwind CSS classes for ShadCN-style components.
+ */
+export const defaultTheme = {
+    components: {
+        AudioPlayer: {},
+        Button: {
+            'inline-flex': true,
+            'items-center': true,
+            'justify-center': true,
+            'whitespace-nowrap': true,
+            'rounded-md': true,
+            'text-sm': true,
+            'font-medium': true,
+            'transition-colors': true,
+            'focus-visible:outline-none': true,
+            'focus-visible:ring-2': true,
+            'focus-visible:ring-indigo-500': true,
+            'focus-visible:ring-offset-2': true,
+            'disabled:pointer-events-none': true,
+            'disabled:opacity-50': true,
+            'bg-indigo-500': true,
+            'text-white': true,
+            'hover:bg-indigo-600': true,
+            'h-9': true,
+            'px-4': true,
+            'py-2': true,
+            'gap-2': true,
+        },
+        Card: {
+            'rounded-lg': true,
+            border: true,
+            'bg-card': true,
+            'text-card-foreground': true,
+            'shadow-sm': true,
+            'p-4': true,
+        },
+        Column: {
+            flex: true,
+            'flex-col': true,
+            'gap-1': true,
+        },
+        CheckBox: {
+            container: { flex: true, 'items-center': true, 'space-x-2': true },
+            element: {
+                'h-4': true,
+                'w-4': true,
+                'rounded-sm': true,
+                border: true,
+                'border-primary': true,
+                'ring-offset-background': true,
+                'focus-visible:outline-none': true,
+                'focus-visible:ring-2': true,
+                'focus-visible:ring-ring': true,
+                'focus-visible:ring-offset-2': true,
+                'disabled:cursor-not-allowed': true,
+                'disabled:opacity-50': true,
+            },
+            label: { 'text-sm': true, 'font-medium': true, 'leading-none': true },
+        },
+        DateTimeInput: {
+            container: { grid: true, 'gap-2': true },
+            element: {
+                flex: true,
+                'h-10': true,
+                'w-full': true,
+                'rounded-md': true,
+                border: true,
+                'border-input': true,
+                'bg-background': true,
+                'px-3': true,
+                'py-2': true,
+                'text-sm': true,
+                'ring-offset-background': true,
+                'focus-visible:outline-none': true,
+                'focus-visible:ring-2': true,
+                'focus-visible:ring-ring': true,
+                'focus-visible:ring-offset-2': true,
+            },
+            label: { 'text-sm': true, 'font-medium': true },
+        },
+        Divider: {
+            'shrink-0': true,
+            'bg-border': true,
+        },
+        Image: {
+            all: { 'max-w-full': true, 'h-auto': true },
+            icon: { 'w-5': true, 'h-5': true },
+            avatar: {
+                'w-24': true,
+                'h-24': true,
+                'rounded-full': true,
+                'object-cover': true,
+                'mx-auto': true,
+            },
+            smallFeature: { 'w-24': true, 'h-auto': true, 'rounded-md': true },
+            mediumFeature: { 'w-48': true, 'h-auto': true, 'rounded-md': true },
+            largeFeature: { 'w-96': true, 'h-auto': true, 'rounded-md': true },
+            header: { 'w-full': true, 'h-auto': true, 'rounded-md': true },
+        },
+        Icon: {
+            container: {
+                flex: true,
+                'items-center': true,
+                'justify-center': true,
+                'w-10': true,
+                'h-10': true,
+                'rounded-lg': true,
+                'bg-gray-100': true,
+                'shrink-0': true,
+            },
+            element: {
+                'w-5': true,
+                'h-5': true,
+                'text-gray-600': true,
+            },
+        },
+        List: {
+            flex: true,
+            'overflow-auto': true,
+        },
+        Modal: {
+            backdrop: {
+                fixed: true,
+                inset: true,
+                'z-50': true,
+                'bg-black/80': true,
+            },
+            element: {
+                fixed: true,
+                'left-[50%]': true,
+                'top-[50%]': true,
+                'z-50': true,
+                'w-full': true,
+                'max-w-lg': true,
+                'translate-x-[-50%]': true,
+                'translate-y-[-50%]': true,
+                'rounded-lg': true,
+                border: true,
+                'bg-background': true,
+                'p-6': true,
+                shadow: true,
+            },
+        },
+        MultipleChoice: {
+            container: { grid: true, 'gap-2': true },
+            element: {
+                flex: true,
+                'h-10': true,
+                'w-full': true,
+                'items-center': true,
+                'justify-between': true,
+                'rounded-md': true,
+                border: true,
+                'border-input': true,
+                'bg-background': true,
+                'px-3': true,
+                'py-2': true,
+                'text-sm': true,
+                'ring-offset-background': true,
+                'focus:outline-none': true,
+                'focus:ring-2': true,
+                'focus:ring-ring': true,
+                'focus:ring-offset-2': true,
+            },
+            label: { 'text-sm': true, 'font-medium': true },
+        },
+        Row: {
+            flex: true,
+            'flex-row': true,
+            'gap-2': true,
+        },
+        Slider: {
+            container: { grid: true, 'gap-2': true },
+            element: {
+                'w-full': true,
+                'cursor-pointer': true,
+            },
+            label: { 'text-sm': true, 'font-medium': true },
+        },
+        Tabs: {
+            container: {},
+            element: {},
+            controls: {
+                all: {
+                    'inline-flex': true,
+                    'h-10': true,
+                    'items-center': true,
+                    'justify-center': true,
+                    'rounded-md': true,
+                    'bg-muted': true,
+                    'p-1': true,
+                    'text-muted-foreground': true,
+                },
+                selected: {
+                    'bg-background': true,
+                    'text-foreground': true,
+                    shadow: true,
+                },
+            },
+        },
+        Text: {
+            all: { 'leading-normal': true },
+            h1: {
+                'text-2xl': true,
+                'font-semibold': true,
+                'tracking-tight': true,
+                'text-gray-800': true,
+            },
+            h2: {
+                'text-xl': true,
+                'font-semibold': true,
+                'tracking-tight': true,
+                'text-gray-800': true,
+            },
+            h3: {
+                'text-lg': true,
+                'font-semibold': true,
+                'tracking-tight': true,
+                'text-gray-800': true,
+            },
+            h4: { 'text-base': true, 'font-medium': true, 'text-gray-700': true },
+            h5: { 'text-sm': true, 'font-medium': true, 'text-gray-600': true },
+            caption: { 'text-xs': true, 'text-gray-400': true },
+            body: { 'text-sm': true, 'leading-normal': true, 'text-gray-500': true },
+        },
+        TextField: {
+            container: { grid: true, 'gap-2': true },
+            element: {
+                flex: true,
+                'h-10': true,
+                'w-full': true,
+                'rounded-md': true,
+                border: true,
+                'border-input': true,
+                'bg-background': true,
+                'px-3': true,
+                'py-2': true,
+                'text-sm': true,
+                'ring-offset-background': true,
+                'file:border-0': true,
+                'file:bg-transparent': true,
+                'file:text-sm': true,
+                'file:font-medium': true,
+                'placeholder:text-muted-foreground': true,
+                'focus-visible:outline-none': true,
+                'focus-visible:ring-2': true,
+                'focus-visible:ring-ring': true,
+                'focus-visible:ring-offset-2': true,
+                'disabled:cursor-not-allowed': true,
+                'disabled:opacity-50': true,
+            },
+            label: { 'text-sm': true, 'font-medium': true, 'leading-none': true },
+        },
+        Video: {
+            'w-full': true,
+            'rounded-md': true,
+        },
+    },
+    elements: {
+        a: { 'text-primary': true, underline: true, 'underline-offset-4': true },
+        audio: { 'w-full': true },
+        body: {},
+        button: {},
+        h1: { 'text-4xl': true, 'font-extrabold': true },
+        h2: { 'text-3xl': true, 'font-semibold': true },
+        h3: { 'text-2xl': true, 'font-semibold': true },
+        h4: { 'text-xl': true, 'font-semibold': true },
+        h5: { 'text-lg': true, 'font-semibold': true },
+        iframe: { 'w-full': true, border: true, 'rounded-md': true },
+        input: {},
+        p: { 'leading-7': true },
+        pre: {
+            'bg-muted': true,
+            'p-4': true,
+            'rounded-lg': true,
+            'overflow-x-auto': true,
+        },
+        textarea: {},
+        video: { 'w-full': true, 'rounded-md': true },
+    },
+    markdown: {
+        p: [],
+        h1: [],
+        h2: [],
+        h3: [],
+        h4: [],
+        h5: [],
+        ul: [],
+        ol: [],
+        li: [],
+        a: [],
+        strong: [],
+        em: [],
+    },
+};
+/**
+ * Theme Provider for A2UI components.
+ * Provides CSS class mappings for all components.
+ */
+export function ThemeProvider({ children, theme = defaultTheme, }) {
+    return (_jsx(ThemeContext.Provider, { value: theme, children: children }));
+}
+/**
+ * Hook to access the theme context.
+ * Returns the default theme if no provider is found.
+ */
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    return context ?? defaultTheme;
+}

package/lib/renderers/a2ui/hooks/useA2UI.d.ts

@@ -0,0 +1,36 @@
+import { Types } from '@a2ui/lit/0.8';
+import type { A2UIActionEvent } from '../types/index.js';
+export interface UseA2UIReturn {
+    /** Map of all surfaces */
+    surfaces: ReadonlyMap<string, Types.Surface>;
+    /** Get a specific surface by ID */
+    getSurface: (surfaceId: string) => Types.Surface | undefined;
+    /** Process incoming A2UI messages from the server */
+    processMessages: (messages: Types.ServerToClientMessage[]) => void;
+    /** Send an action event to the server */
+    sendAction: (action: A2UIActionEvent) => void;
+    /** Get the root component tree for a surface */
+    getComponentTree: (surfaceId: string) => Types.AnyComponentNode | null;
+    /** Clear all surfaces */
+    clearSurfaces: () => void;
+}
+/**
+ * Main hook for interacting with A2UI.
+ * Provides access to surfaces, message processing, and action sending.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { surfaces, processMessages, sendAction } = useA2UI();
+ *
+ *   // Process messages from server
+ *   useEffect(() => {
+ *     fetch('/api/a2ui').then(res => res.json()).then(processMessages);
+ *   }, []);
+ *
+ *   // Render surfaces
+ *   return <A2UIRenderer surfaceId="main" />;
+ * }
+ * ```
+ */
+export declare function useA2UI(): UseA2UIReturn;