@datalayer/agent-runtimes 0.0.2

package/lib/renderers/a2ui/components/SurfaceRenderer.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment } 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 { cn } from '../lib/utils.js';
+import { Text, Image, Icon, Video, AudioPlayer, Divider, } from './content/index.js';
+import { Row, Column, List, Card, Tabs, Modal } from './layout/index.js';
+import { Button, CheckBox, TextField, DateTimeInput, MultipleChoice, Slider, } from './interactive/index.js';
+export function SurfaceRenderer({ surfaceId, surface, className, }) {
+    const componentTree = surface?.componentTree;
+    if (!componentTree) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('a2ui-surface', className), children: _jsx(ComponentRenderer, { node: componentTree, surfaceId: surfaceId }) }));
+}
+function ComponentRenderer({ node, surfaceId }) {
+    const renderChild = useMemo(() => (childNode) => (_jsx(ComponentRenderer, { node: childNode, surfaceId: surfaceId }, childNode.id)), [surfaceId]);
+    const children = useMemo(() => {
+        const props = node.properties;
+        if (props.children && Array.isArray(props.children)) {
+            return props.children.map(child => child ? (_jsx(ComponentWrapper, { node: child, children: _jsx(ComponentRenderer, { node: child, surfaceId: surfaceId }) }, child.id)) : null);
+        }
+        if (props.child) {
+            return (_jsx(ComponentWrapper, { node: props.child, children: _jsx(ComponentRenderer, { node: props.child, surfaceId: surfaceId }) }, props.child.id));
+        }
+        return null;
+    }, [node.properties, surfaceId]);
+    switch (node.type) {
+        case 'Text':
+            return (_jsx(Text, { node: node, surfaceId: surfaceId }));
+        case 'Heading':
+            return (_jsx(Text, { node: node, surfaceId: surfaceId }));
+        case 'Image':
+            return (_jsx(Image, { node: node, surfaceId: surfaceId }));
+        case 'Icon':
+            return (_jsx(Icon, { node: node, surfaceId: surfaceId }));
+        case 'Video':
+            return (_jsx(Video, { node: node, surfaceId: surfaceId }));
+        case 'AudioPlayer':
+            return (_jsx(AudioPlayer, { node: node, surfaceId: surfaceId }));
+        case 'Divider':
+            return (_jsx(Divider, { node: node, surfaceId: surfaceId }));
+        case 'Row':
+            return (_jsx(Row, { node: node, surfaceId: surfaceId, children: children }));
+        case 'Column':
+            return (_jsx(Column, { node: node, surfaceId: surfaceId, children: children }));
+        case 'List':
+            return (_jsx(List, { node: node, surfaceId: surfaceId, children: children }));
+        case 'Card':
+            return (_jsx(Card, { node: node, surfaceId: surfaceId, children: children }));
+        case 'Tabs':
+            return (_jsx(Tabs, { node: node, surfaceId: surfaceId, renderChild: renderChild }));
+        case 'Modal':
+            return (_jsx(Modal, { node: node, surfaceId: surfaceId, renderChild: renderChild }));
+        case 'Button':
+            return (_jsx(Button, { node: node, surfaceId: surfaceId, children: children }));
+        case 'CheckBox':
+            return (_jsx(CheckBox, { node: node, surfaceId: surfaceId }));
+        case 'TextField':
+            return (_jsx(TextField, { node: node, surfaceId: surfaceId }));
+        case 'DateTimeInput':
+            return (_jsx(DateTimeInput, { node: node, surfaceId: surfaceId }));
+        case 'MultipleChoice':
+            return (_jsx(MultipleChoice, { node: node, surfaceId: surfaceId }));
+        case 'Slider':
+            return (_jsx(Slider, { node: node, surfaceId: surfaceId }));
+        default:
+            console.warn(`Unknown component type: ${node.type}`);
+            return null;
+    }
+}
+function ComponentWrapper({ node, children, }) {
+    const style = useMemo(() => {
+        const weight = node.weight;
+        if (typeof weight !== 'number') {
+            return undefined;
+        }
+        return { flex: weight };
+    }, [node.weight]);
+    if (!style) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx("div", { style: style, children: children });
+}

package/lib/renderers/a2ui/components/content/AudioPlayer.d.ts

@@ -0,0 +1,9 @@
+import { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types/index.js';
+interface AudioPlayerProps extends A2UIComponentProps {
+    node: Types.AnyComponentNode & {
+        type: 'AudioPlayer';
+    };
+}
+export declare function AudioPlayer({ node, surfaceId }: AudioPlayerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/renderers/a2ui/components/content/AudioPlayer.js

@@ -0,0 +1,38 @@
+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 { useMemo } from 'react';
+import { useDataBinding } from '../../hooks/useDataBinding.js';
+import { useTheme } from '../../context/ThemeContext.js';
+import { cn, classMapToString } from '../../lib/utils.js';
+export function AudioPlayer({ node, surfaceId }) {
+    const theme = useTheme();
+    const { resolveString } = useDataBinding(node, surfaceId);
+    const properties = node.properties;
+    const url = resolveString(properties.url ?? null) ?? '';
+    const description = resolveString(properties.description ?? null);
+    const themeClasses = useMemo(() => {
+        return classMapToString(theme.components.AudioPlayer);
+    }, [theme]);
+    if (!url) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn('flex flex-col gap-2', themeClasses), children: [description && (_jsx("p", { className: "text-sm text-muted-foreground", children: description })), _jsx("audio", { src: url, controls: true, className: "w-full", preload: "metadata" })] }));
+}

package/lib/renderers/a2ui/components/content/Divider.d.ts

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

package/lib/renderers/a2ui/components/content/Divider.js

@@ -0,0 +1,35 @@
+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 Divider({ node }) {
+    const theme = useTheme();
+    const properties = node.properties;
+    const axis = properties.axis ?? 'horizontal';
+    const themeClasses = useMemo(() => {
+        return classMapToString(theme.components.Divider);
+    }, [theme]);
+    const orientationClasses = useMemo(() => {
+        return axis === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]';
+    }, [axis]);
+    return (_jsx("div", { role: "separator", "aria-orientation": axis, className: cn(themeClasses, orientationClasses) }));
+}

package/lib/renderers/a2ui/components/content/Icon.d.ts

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

package/lib/renderers/a2ui/components/content/Icon.js

@@ -0,0 +1,110 @@
+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 * as LucideIcons from 'lucide-react';
+import { useDataBinding } from '../../hooks/useDataBinding.js';
+import { useTheme } from '../../context/ThemeContext.js';
+import { cn, classMapToString } from '../../lib/utils.js';
+const iconMap = {
+    accountCircle: 'UserCircle',
+    add: 'Plus',
+    arrowBack: 'ArrowLeft',
+    arrowForward: 'ArrowRight',
+    attachFile: 'Paperclip',
+    calendarToday: 'Calendar',
+    call: 'Phone',
+    camera: 'Camera',
+    check: 'Check',
+    close: 'X',
+    delete: 'Trash2',
+    download: 'Download',
+    edit: 'Pencil',
+    event: 'CalendarDays',
+    error: 'AlertCircle',
+    favorite: 'Heart',
+    favoriteOff: 'HeartOff',
+    folder: 'Folder',
+    help: 'HelpCircle',
+    home: 'Home',
+    info: 'Info',
+    locationOn: 'MapPin',
+    lock: 'Lock',
+    lockOpen: 'Unlock',
+    mail: 'Mail',
+    menu: 'Menu',
+    moreVert: 'MoreVertical',
+    moreHoriz: 'MoreHorizontal',
+    notificationsOff: 'BellOff',
+    notifications: 'Bell',
+    payment: 'CreditCard',
+    person: 'User',
+    phone: 'Phone',
+    photo: 'Image',
+    print: 'Printer',
+    refresh: 'RefreshCw',
+    search: 'Search',
+    send: 'Send',
+    settings: 'Settings',
+    share: 'Share2',
+    shoppingCart: 'ShoppingCart',
+    star: 'Star',
+    starHalf: 'StarHalf',
+    starOff: 'StarOff',
+    thumbUp: 'ThumbsUp',
+    thumbDown: 'ThumbsDown',
+    upload: 'Upload',
+    visibility: 'Eye',
+    visibilityOff: 'EyeOff',
+    warning: 'AlertTriangle',
+};
+export function Icon({ node, surfaceId }) {
+    const theme = useTheme();
+    const { resolveString } = useDataBinding(node, surfaceId);
+    const properties = node.properties;
+    const iconName = resolveString(properties.name ?? null) ?? '';
+    const themeClasses = useMemo(() => {
+        const iconTheme = theme.components.Icon;
+        if (iconTheme && typeof iconTheme === 'object' && 'element' in iconTheme) {
+            return classMapToString(iconTheme.element);
+        }
+        return classMapToString(theme.components.Icon);
+    }, [theme]);
+    const containerClasses = useMemo(() => {
+        const iconTheme = theme.components.Icon;
+        if (iconTheme &&
+            typeof iconTheme === 'object' &&
+            'container' in iconTheme) {
+            return classMapToString(iconTheme.container);
+        }
+        return '';
+    }, [theme]);
+    const IconComponent = useMemo(() => {
+        const lucideIconName = iconMap[iconName];
+        if (lucideIconName && lucideIconName in LucideIcons) {
+            return LucideIcons[lucideIconName];
+        }
+        return LucideIcons.HelpCircle;
+    }, [iconName]);
+    if (containerClasses) {
+        return (_jsx("div", { className: cn(containerClasses), children: _jsx(IconComponent, { className: cn(themeClasses) }) }));
+    }
+    return _jsx(IconComponent, { className: cn(themeClasses) });
+}

package/lib/renderers/a2ui/components/content/Image.d.ts

@@ -0,0 +1,9 @@
+import { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types/index.js';
+interface ImageProps extends A2UIComponentProps {
+    node: Types.AnyComponentNode & {
+        type: 'Image';
+    };
+}
+export declare function Image({ node, surfaceId }: ImageProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/renderers/a2ui/components/content/Image.js

@@ -0,0 +1,61 @@
+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 { useDataBinding } from '../../hooks/useDataBinding.js';
+import { useTheme } from '../../context/ThemeContext.js';
+import { cn, classMapToString } from '../../lib/utils.js';
+export function Image({ node, surfaceId }) {
+    const theme = useTheme();
+    const { resolveString } = useDataBinding(node, surfaceId);
+    const properties = node.properties;
+    const url = resolveString(properties.url ?? null) ?? '';
+    const alt = resolveString(properties.alt ?? null) ?? '';
+    const fit = properties.fit ?? 'cover';
+    const usageHint = properties.usageHint;
+    const themeClasses = useMemo(() => {
+        const baseClasses = classMapToString(theme.components.Image.all);
+        if (usageHint && theme.components.Image[usageHint]) {
+            const hintClasses = classMapToString(theme.components.Image[usageHint]);
+            return cn(baseClasses, hintClasses);
+        }
+        return baseClasses;
+    }, [theme, usageHint]);
+    const fitClass = useMemo(() => {
+        switch (fit) {
+            case 'contain':
+                return 'object-contain';
+            case 'cover':
+                return 'object-cover';
+            case 'fill':
+                return 'object-fill';
+            case 'none':
+                return 'object-none';
+            case 'scale-down':
+                return 'object-scale-down';
+            default:
+                return 'object-cover';
+        }
+    }, [fit]);
+    if (!url) {
+        return null;
+    }
+    return (_jsx("img", { src: url, alt: alt, className: cn(themeClasses, fitClass), loading: "lazy" }));
+}

package/lib/renderers/a2ui/components/content/Text.d.ts

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

package/lib/renderers/a2ui/components/content/Text.js

@@ -0,0 +1,64 @@
+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 MarkdownIt from 'markdown-it';
+import { useDataBinding } from '../../hooks/useDataBinding.js';
+import { useTheme } from '../../context/ThemeContext.js';
+import { cn, classMapToString } from '../../lib/utils.js';
+const md = new MarkdownIt({
+    html: false, // Disable HTML for security
+    breaks: true,
+    linkify: true,
+});
+export function Text({ node, surfaceId }) {
+    const theme = useTheme();
+    const { resolveString } = useDataBinding(node, surfaceId);
+    const properties = node.properties;
+    const text = resolveString(properties.text ?? null) ?? '';
+    const usageHint = properties.usageHint ?? 'body';
+    const themeClasses = useMemo(() => {
+        const baseClasses = classMapToString(theme.components.Text.all);
+        const hintClasses = classMapToString(theme.components.Text[usageHint] ?? theme.components.Text.body);
+        return cn(baseClasses, hintClasses);
+    }, [theme, usageHint]);
+    const htmlContent = useMemo(() => {
+        return md.render(text);
+    }, [text]);
+    const Element = useMemo(() => {
+        switch (usageHint) {
+            case 'h1':
+                return 'h1';
+            case 'h2':
+                return 'h2';
+            case 'h3':
+                return 'h3';
+            case 'h4':
+                return 'h4';
+            case 'h5':
+                return 'h5';
+            case 'caption':
+                return 'span';
+            default:
+                return 'div';
+        }
+    }, [usageHint]);
+    return (_jsx(Element, { className: themeClasses, dangerouslySetInnerHTML: { __html: htmlContent } }));
+}

package/lib/renderers/a2ui/components/content/Video.d.ts

@@ -0,0 +1,9 @@
+import { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types/index.js';
+interface VideoProps extends A2UIComponentProps {
+    node: Types.AnyComponentNode & {
+        type: 'Video';
+    };
+}
+export declare function Video({ node, surfaceId }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/renderers/a2ui/components/content/Video.js

@@ -0,0 +1,37 @@
+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 { useDataBinding } from '../../hooks/useDataBinding.js';
+import { useTheme } from '../../context/ThemeContext.js';
+import { cn, classMapToString } from '../../lib/utils.js';
+export function Video({ node, surfaceId }) {
+    const theme = useTheme();
+    const { resolveString } = useDataBinding(node, surfaceId);
+    const properties = node.properties;
+    const url = resolveString(properties.url ?? null) ?? '';
+    const themeClasses = useMemo(() => {
+        return classMapToString(theme.components.Video);
+    }, [theme]);
+    if (!url) {
+        return null;
+    }
+    return (_jsx("video", { src: url, controls: true, className: cn(themeClasses), preload: "metadata" }));
+}

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

@@ -0,0 +1,6 @@
+export { Text } from './Text.js';
+export { Image } from './Image.js';
+export { Icon } from './Icon.js';
+export { Video } from './Video.js';
+export { AudioPlayer } from './AudioPlayer.js';
+export { Divider } from './Divider.js';

package/lib/renderers/a2ui/components/content/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 { Text } from './Text.js';
+export { Image } from './Image.js';
+export { Icon } from './Icon.js';
+export { Video } from './Video.js';
+export { AudioPlayer } from './AudioPlayer.js';
+export { Divider } from './Divider.js';

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

@@ -0,0 +1,5 @@
+export { A2UIRenderer } from './A2UIRenderer.js';
+export { SurfaceRenderer } from './SurfaceRenderer.js';
+export * from './content/index.js';
+export * from './layout/index.js';
+export * from './interactive/index.js';

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

@@ -0,0 +1,24 @@
+/*
+ * 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 { A2UIRenderer } from './A2UIRenderer.js';
+export { SurfaceRenderer } from './SurfaceRenderer.js';
+export * from './content/index.js';
+export * from './layout/index.js';
+export * from './interactive/index.js';

package/lib/renderers/a2ui/components/interactive/Button.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 ButtonProps extends A2UIComponentProps {
+    node: Types.AnyComponentNode & {
+        type: 'Button';
+    };
+    children?: ReactNode;
+}
+export declare function Button({ node, surfaceId, children }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/renderers/a2ui/components/interactive/Button.js

@@ -0,0 +1,71 @@
+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, useCallback } from 'react';
+import { useTheme } from '../../context/ThemeContext.js';
+import { useA2UIContext } from '../../context/A2UIContext.js';
+import { cn, classMapToString } from '../../lib/utils.js';
+export function Button({ node, surfaceId, children }) {
+    const theme = useTheme();
+    const { sendAction, processor } = useA2UIContext();
+    const properties = node.properties;
+    const action = properties.action;
+    const isPrimary = properties.primary ?? true;
+    const themeClasses = useMemo(() => {
+        return classMapToString(theme.components.Button);
+    }, [theme]);
+    const variantClasses = useMemo(() => {
+        if (isPrimary) {
+            return 'bg-primary text-primary-foreground hover:bg-primary/90';
+        }
+        return 'border border-input bg-background hover:bg-accent hover:text-accent-foreground';
+    }, [isPrimary]);
+    const handleClick = useCallback(() => {
+        if (!action?.name)
+            return;
+        const resolvedContext = {};
+        if (action.context && Array.isArray(action.context)) {
+            for (const item of action.context) {
+                const value = item.value;
+                if (typeof value === 'object' &&
+                    value !== null &&
+                    'path' in value &&
+                    typeof value.path === 'string') {
+                    const resolvedValue = processor.getData(node, value.path, surfaceId);
+                    resolvedContext[item.key] = resolvedValue;
+                }
+                else if (typeof value === 'object' &&
+                    value !== null &&
+                    'literalString' in value) {
+                    resolvedContext[item.key] = value.literalString;
+                }
+                else {
+                    resolvedContext[item.key] = value;
+                }
+            }
+        }
+        sendAction({
+            type: 'a2ui.action',
+            actionId: action.name,
+            context: resolvedContext,
+        });
+    }, [action, processor, node, surfaceId, sendAction]);
+    return (_jsx("button", { type: "button", onClick: handleClick, className: cn(themeClasses, variantClasses), children: children }));
+}