@datalayer/agent-runtimes 1.0.10 → 1.0.17

package/lib/collaboration/DatalayerCollaboration.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Fetch the session ID of a collaborative document from Datalayer.
+ */
+export async function requestDatalayerCollaborationSessionId({ url, token, fetchFn = fetch, }) {
+    const headers = {
+        Accept: 'application/json',
+    };
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+    const response = await fetchFn(url, {
+        method: 'GET',
+        headers,
+        credentials: token ? 'include' : 'omit',
+        mode: 'cors',
+        cache: 'no-store',
+    });
+    if (response.ok) {
+        const content = await response.json();
+        return content['sessionId'];
+    }
+    console.error('Failed to fetch session ID.', response);
+    throw new Error('Failed to fetch session ID.');
+}

package/lib/collaboration/DatalayerCollaborationProvider.d.ts

@@ -0,0 +1,58 @@
+import type { ICollaborationProvider, ICollaborationProviderEvents } from '@datalayer/jupyter-react';
+import { WebsocketProvider } from 'y-websocket';
+export declare enum CollaborationStatus {
+    Disconnected = "disconnected",
+    Connecting = "connecting",
+    Connected = "connected",
+    Error = "error"
+}
+type SharedModel = Parameters<ICollaborationProvider['connect']>[0];
+type ConnectOptions = Parameters<ICollaborationProvider['connect']>[2];
+/**
+ * Configuration for Datalayer collaboration provider.
+ */
+export interface IDatalayerCollaborationConfig {
+    /**
+     * Base URL for the Datalayer server (optional, uses config from store if not provided).
+     */
+    datalayerUrl?: string;
+    /**
+     * Authentication token (optional, uses config from store if not provided).
+     */
+    token?: string;
+    /**
+     * Custom fetch function to use for HTTP requests.
+     * Useful for proxying requests in environments with CORS restrictions (e.g., VS Code webviews).
+     */
+    fetchFn?: typeof fetch;
+}
+/**
+ * Datalayer collaboration provider.
+ */
+export declare class DatalayerCollaborationProvider implements ICollaborationProvider {
+    readonly type = "datalayer";
+    private _status;
+    private _provider;
+    private _sharedModel;
+    private _statusChanged;
+    private _errorOccurred;
+    private _syncStateChanged;
+    private _isDisposed;
+    private _config;
+    private _onSync;
+    private _onConnectionClose;
+    constructor(config: IDatalayerCollaborationConfig);
+    get status(): CollaborationStatus;
+    get isConnected(): boolean;
+    get isDisposed(): boolean;
+    get events(): ICollaborationProviderEvents;
+    private setStatus;
+    connect(sharedModel: SharedModel, documentId: string, options?: ConnectOptions): Promise<void>;
+    disconnect(): void;
+    getProvider(): WebsocketProvider | null;
+    getSharedModel(): SharedModel | null;
+    handleConnectionClose(event: CloseEvent): void;
+    handleSync(isSynced: boolean): void;
+    dispose(): void;
+}
+export default DatalayerCollaborationProvider;

package/lib/collaboration/DatalayerCollaborationProvider.js

@@ -0,0 +1,148 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { URLExt } from '@jupyterlab/coreutils';
+import { Signal } from '@lumino/signaling';
+import { WebsocketProvider } from 'y-websocket';
+import { requestDatalayerCollaborationSessionId } from './DatalayerCollaboration';
+export var CollaborationStatus;
+(function (CollaborationStatus) {
+    CollaborationStatus["Disconnected"] = "disconnected";
+    CollaborationStatus["Connecting"] = "connecting";
+    CollaborationStatus["Connected"] = "connected";
+    CollaborationStatus["Error"] = "error";
+})(CollaborationStatus || (CollaborationStatus = {}));
+/**
+ * Datalayer collaboration provider.
+ */
+export class DatalayerCollaborationProvider {
+    type = 'datalayer';
+    _status = CollaborationStatus.Disconnected;
+    _provider = null;
+    _sharedModel = null;
+    _statusChanged = new Signal(this);
+    _errorOccurred = new Signal(this);
+    _syncStateChanged = new Signal(this);
+    _isDisposed = false;
+    _config;
+    _onSync = null;
+    _onConnectionClose = null;
+    constructor(config) {
+        this._config = config;
+    }
+    get status() {
+        return this._status;
+    }
+    get isConnected() {
+        return this._status === CollaborationStatus.Connected;
+    }
+    get isDisposed() {
+        return this._isDisposed;
+    }
+    get events() {
+        return {
+            statusChanged: this._statusChanged,
+            errorOccurred: this._errorOccurred,
+            syncStateChanged: this._syncStateChanged,
+        };
+    }
+    setStatus(status) {
+        if (this._status !== status) {
+            this._status = status;
+            this._statusChanged.emit(status);
+        }
+    }
+    async connect(sharedModel, documentId, options) {
+        if (this.isConnected) {
+            console.warn('Already connected to Datalayer collaboration service');
+            return;
+        }
+        this.setStatus(CollaborationStatus.Connecting);
+        try {
+            const datalayerUrl = this._config.datalayerUrl;
+            const token = this._config.token;
+            if (!datalayerUrl) {
+                throw new Error('Datalayer datalayerUrl is not configured - must be explicitly provided in DatalayerCollaborationProvider config');
+            }
+            if (!token) {
+                throw new Error('Datalayer token is not configured - must be explicitly provided in DatalayerCollaborationProvider config');
+            }
+            const { ydoc, awareness } = sharedModel;
+            const documentURL = URLExt.join(datalayerUrl, '/api/spacer/v1/documents');
+            const wsUrl = URLExt.join(datalayerUrl, '/api/spacer/v1/documents/ws').replace(/^http/, 'ws');
+            const sessionId = await requestDatalayerCollaborationSessionId({
+                url: URLExt.join(documentURL, documentId),
+                token,
+                fetchFn: this._config.fetchFn,
+            });
+            this._provider = new WebsocketProvider(wsUrl, documentId, ydoc, {
+                disableBc: true,
+                params: {
+                    sessionId,
+                    token,
+                },
+                awareness,
+                ...options,
+            });
+            this._sharedModel = sharedModel;
+            this._onSync = (isSynced) => {
+                this.handleSync(isSynced);
+            };
+            this._onConnectionClose = (event) => {
+                if (event) {
+                    this.handleConnectionClose(event);
+                }
+            };
+            this._provider.on('sync', this._onSync);
+            this._provider.on('connection-close', this._onConnectionClose);
+            console.log('Connected to Datalayer collaboration service');
+        }
+        catch (error) {
+            this.setStatus(CollaborationStatus.Error);
+            this._errorOccurred.emit(error);
+            throw error;
+        }
+    }
+    disconnect() {
+        if (this._provider) {
+            if (this._onSync) {
+                this._provider.off('sync', this._onSync);
+            }
+            if (this._onConnectionClose) {
+                this._provider.off('connection-close', this._onConnectionClose);
+            }
+            this._provider.disconnect();
+            this._provider = null;
+        }
+        this._sharedModel = null;
+        this.setStatus(CollaborationStatus.Disconnected);
+    }
+    getProvider() {
+        return this._provider;
+    }
+    getSharedModel() {
+        return this._sharedModel;
+    }
+    handleConnectionClose(event) {
+        console.warn('Collaboration connection closed:', event);
+        this.setStatus(CollaborationStatus.Disconnected);
+        if (event.code === 4002) {
+            console.warn('Datalayer collaboration session expired');
+        }
+    }
+    handleSync(isSynced) {
+        this._syncStateChanged.emit(isSynced);
+        if (isSynced) {
+            this.setStatus(CollaborationStatus.Connected);
+        }
+    }
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this.disconnect();
+        this._isDisposed = true;
+    }
+}
+export default DatalayerCollaborationProvider;

package/lib/collaboration/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatalayerCollaboration';
+export * from './DatalayerCollaborationProvider';

package/lib/collaboration/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './DatalayerCollaboration';
+export * from './DatalayerCollaborationProvider';

package/lib/components/AgentSummary.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface AgentSummaryData {
+    agentName: string;
+    location: string;
+    specId?: string;
+    status?: string;
+    baseUrl?: string;
+    agentId?: string;
+    isReady?: boolean;
+    error?: string;
+}
+export interface AgentSummaryProps {
+    summary: AgentSummaryData | null;
+    title?: string;
+}
+/**
+ * Compact agent summary badge with a hover overlay for details.
+ */
+export declare const AgentSummary: React.FC<AgentSummaryProps>;

package/lib/components/AgentSummary.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState } from 'react';
+import { Spinner } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+/**
+ * Statuses that represent an agent actively being created/started. The spinner
+ * only shows for these; app-navigation states ("selected", "switching") and
+ * settled states ("ready", "running", ...) never spin.
+ */
+const CREATING_STATUSES = new Set([
+    'creating',
+    'starting',
+    'launching',
+    'connecting',
+    'pending',
+    'resuming',
+]);
+/**
+ * Compact agent summary badge with a hover overlay for details.
+ */
+export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
+    const [isHovering, setIsHovering] = useState(false);
+    const runtimeStatusUrl = summary?.baseUrl
+        ? (() => {
+            const normalized = summary.baseUrl.replace(/\/$/, '');
+            if (normalized.endsWith('/api/v1')) {
+                return `${normalized}/runtime/status`;
+            }
+            return `${normalized}/api/v1/runtime/status`;
+        })()
+        : undefined;
+    if (!summary) {
+        return null;
+    }
+    const normalizedStatus = (summary.status || '').toLowerCase();
+    // Only show the spinner while the agent is genuinely being created: it is not
+    // ready, has no id yet, and its status is an active creation/startup state.
+    const isCreating = !summary.isReady &&
+        !summary.agentId &&
+        CREATING_STATUSES.has(normalizedStatus);
+    const hasError = Boolean(summary.error);
+    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: [_jsxs(Box, { as: "button", type: "button", sx: {
+                    px: 2,
+                    py: '6px',
+                    border: '1px solid',
+                    borderColor: hasError ? 'danger.emphasis' : 'border.default',
+                    borderRadius: 2,
+                    bg: hasError ? 'danger.subtle' : 'canvas.default',
+                    color: hasError ? 'danger.fg' : 'fg.default',
+                    fontSize: 0,
+                    cursor: 'default',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                }, children: [isCreating && _jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), hasError && _jsx("span", { "aria-hidden": true, children: "\u26A0" }), summary.agentName, " \u00B7 ", summary.location] }), isHovering && (_jsxs(Box, { sx: {
+                    position: 'absolute',
+                    top: 'calc(100% + 8px)',
+                    right: 0,
+                    width: 360,
+                    p: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.overlay',
+                    boxShadow: 'shadow.large',
+                    zIndex: 120,
+                    fontSize: 0,
+                    color: 'fg.default',
+                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600 }, children: title }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Name: ", summary.agentName] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Location: ", summary.location] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Spec: ", summary.specId || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Status: ", isCreating ? 'creating' : summary.status || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Base URL: ", summary.baseUrl || '—'] }), _jsxs(Box, { sx: {
+                            color: 'fg.muted',
+                            wordBreak: 'break-all',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                        }, children: ["Agent ID:", ' ', summary.agentId ? (summary.agentId) : isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), "Creating\u2026"] })) : ('—')] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Runtime status:", ' ', runtimeStatusUrl ? (_jsx(Box, { as: "a", href: runtimeStatusUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: runtimeStatusUrl })) : ('n/a')] }), hasError && (_jsxs(Box, { sx: {
+                            mt: 1,
+                            p: 1,
+                            border: '1px solid',
+                            borderColor: 'danger.muted',
+                            borderRadius: 2,
+                            bg: 'danger.subtle',
+                            color: 'danger.fg',
+                            wordBreak: 'break-word',
+                        }, children: ["Error: ", summary.error] }))] }))] }));
+};

package/lib/components/a2ui/A2uiSurfaceComposed.d.ts

@@ -0,0 +1,13 @@
+import { type ReactComponentImplementation } from '@a2ui/react/v0_9';
+import type { SurfaceModel } from '@a2ui/web_core/v0_9';
+export interface A2uiSurfaceComposedProps {
+    surface: SurfaceModel<ReactComponentImplementation>;
+}
+/**
+ * Composed surface wrapper for all A2UI v0.9 consumers.
+ *
+ * This normalizes class names when upstream CSS modules are absent and applies
+ * basic semantic classes so application-level styles can consistently target
+ * rendered A2UI HTML.
+ */
+export declare function A2uiSurfaceComposed({ surface }: A2uiSurfaceComposedProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/a2ui/A2uiSurfaceComposed.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.
+ */
+import { useEffect, useRef } from 'react';
+import { A2uiSurface, } from '@a2ui/react/v0_9';
+function applyA2uiClassFallbacks(root) {
+    root.querySelectorAll('button').forEach(el => {
+        el.classList.remove('undefined');
+        const btn = el;
+        // Tab headers are not regular primary buttons: they need to convey which
+        // one is selected. Leave them to the `.a2ui-tab-button` scope styles and
+        // clear inline declarations so the class-driven active state can apply.
+        if (btn.classList.contains('a2ui-tab-button')) {
+            btn.style.removeProperty('background');
+            btn.style.removeProperty('border');
+            btn.style.removeProperty('color');
+            btn.style.removeProperty('border-radius');
+            return;
+        }
+        // Choice-picker chips are toggle buttons whose selected/unselected state is
+        // driven by React (class `selected` + `aria-pressed`). Do NOT coerce them
+        // into primary buttons: React rewrites their className on every toggle,
+        // which would drop injected classes, and the observer does not watch
+        // attribute mutations. Let the `.chip` scope styles handle both states.
+        if (btn.classList.contains('chip')) {
+            btn.style.removeProperty('background');
+            btn.style.removeProperty('background-color');
+            btn.style.removeProperty('border');
+            btn.style.removeProperty('color');
+            return;
+        }
+        if (!el.classList.contains('a2ui-button')) {
+            el.classList.add('a2ui-button');
+        }
+        if (!el.classList.contains('a2ui-button-primary')) {
+            el.classList.add('a2ui-button-primary');
+        }
+        // Ensure class-driven theming can react live to CSS variable changes by
+        // clearing any stale inline declarations from previous renders.
+        btn.style.removeProperty('background');
+        btn.style.removeProperty('border');
+        btn.style.removeProperty('color');
+        btn.style.removeProperty('border-radius');
+        btn.style.removeProperty('padding');
+        btn.style.removeProperty('font-weight');
+        btn.style.removeProperty('cursor');
+    });
+    root
+        .querySelectorAll("input[type='text'], input[type='number'], input[type='password'], input[type='datetime-local'], textarea")
+        .forEach(el => {
+        el.classList.remove('undefined');
+        if (!el.classList.contains('a2ui-textfield-input')) {
+            el.classList.add('a2ui-textfield-input');
+        }
+    });
+    root.querySelectorAll('label').forEach(el => {
+        el.classList.remove('undefined');
+        if (!el.classList.contains('a2ui-textfield-label')) {
+            el.classList.add('a2ui-textfield-label');
+        }
+    });
+    root.querySelectorAll('span').forEach(el => {
+        if (el.textContent && /invalid|required|error/i.test(el.textContent)) {
+            if (!el.classList.contains('a2ui-textfield-error')) {
+                el.classList.add('a2ui-textfield-error');
+            }
+        }
+    });
+    root.querySelectorAll('.body, .caption').forEach(el => {
+        el.classList.remove('undefined');
+        if (!el.classList.contains('a2ui-text')) {
+            el.classList.add('a2ui-text');
+        }
+        if (el.classList.contains('caption') &&
+            !el.classList.contains('a2ui-caption')) {
+            el.classList.add('a2ui-caption');
+        }
+    });
+}
+/**
+ * Composed surface wrapper for all A2UI v0.9 consumers.
+ *
+ * This normalizes class names when upstream CSS modules are absent and applies
+ * basic semantic classes so application-level styles can consistently target
+ * rendered A2UI HTML.
+ */
+export function A2uiSurfaceComposed({ surface }) {
+    const rootRef = useRef(null);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const apply = () => applyA2uiClassFallbacks(root);
+        apply();
+        const observer = new MutationObserver(() => {
+            apply();
+        });
+        observer.observe(root, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [surface]);
+    return (_jsx("div", { ref: rootRef, children: _jsx(A2uiSurface, { surface: surface }) }));
+}

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

@@ -0,0 +1,2 @@
+export * from './A2uiSurfaceComposed';
+export * from './styles';

package/lib/components/a2ui/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './A2uiSurfaceComposed';
+export * from './styles';

package/lib/components/a2ui/styles.d.ts

@@ -0,0 +1,14 @@
+import type { BetterSystemStyleObject } from '@primer/react';
+/**
+ * Shared style scope for A2UI-rendered HTML.
+ *
+ * Uses A2UI CSS custom properties so consumers can drive visuals from their
+ * own theme system (Primer tokens, app-level variables, etc.).
+ *
+ * NOTE: This must be a plain style object (not the result of
+ * `@styled-system/css`), because it is consumed by spreading into a Primer
+ * `sx` prop (`sx={{ ...A2UI_RENDER_SCOPE_SX }}`). `css()` returns a *function*,
+ * which spreads to `{}` and silently drops every rule — leaving A2UI surfaces
+ * unthemed (browser-default grey, ignoring color mode).
+ */
+export declare const A2UI_RENDER_SCOPE_SX: BetterSystemStyleObject;

package/lib/components/a2ui/styles.js

@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+const A2UI_INPUT_SELECTOR = '& .a2ui-textfield-input';
+const A2UI_INPUT_FOCUS_SELECTOR = '& .a2ui-textfield-input:focus';
+const A2UI_INPUT_HOVER_SELECTOR = '& .a2ui-textfield-input:hover';
+/**
+ * Shared style scope for A2UI-rendered HTML.
+ *
+ * Uses A2UI CSS custom properties so consumers can drive visuals from their
+ * own theme system (Primer tokens, app-level variables, etc.).
+ *
+ * NOTE: This must be a plain style object (not the result of
+ * `@styled-system/css`), because it is consumed by spreading into a Primer
+ * `sx` prop (`sx={{ ...A2UI_RENDER_SCOPE_SX }}`). `css()` returns a *function*,
+ * which spreads to `{}` and silently drops every rule — leaving A2UI surfaces
+ * unthemed (browser-default grey, ignoring color mode).
+ */
+export const A2UI_RENDER_SCOPE_SX = {
+    // Icons render via `font-size: var(--a2ui-icon-size, …xl 24px)`. When the
+    // Material Symbols font is not loaded the raw name (e.g. "phone") shows as
+    // text; the 24px fallback makes those labels look larger than the adjacent
+    // values. Pin the icon size to the surrounding text size so they align.
+    '--a2ui-icon-size': '1em',
+    '& .a2ui-card': {
+        background: 'var(--a2ui-card-background, var(--a2ui-color-surface, #f6f8fa))',
+        border: '1px solid var(--a2ui-color-border, #d0d7de)',
+        borderRadius: 'var(--a2ui-card-border-radius, 12px)',
+        boxShadow: 'var(--a2ui-card-box-shadow, none)',
+    },
+    '& .a2ui-text': {
+        color: 'var(--a2ui-color-on-surface, var(--a2ui-color-on-background, #1f2328))',
+        margin: 0,
+    },
+    '& .a2ui-caption': {
+        color: 'var(--a2ui-text-caption-color, var(--a2ui-color-on-surface, #656d76))',
+    },
+    '& .a2ui-button': {
+        appearance: 'none',
+        cursor: 'pointer',
+        border: '1px solid var(--a2ui-color-primary, #1f883d)',
+        background: 'var(--a2ui-color-primary, #1f883d)',
+        color: 'var(--a2ui-color-on-primary, #ffffff)',
+        borderRadius: 'var(--a2ui-button-border-radius, 6px)',
+        padding: 'var(--a2ui-button-padding, 5px 16px)',
+        fontWeight: 'var(--a2ui-button-font-weight, 500)',
+        boxShadow: 'var(--a2ui-button-box-shadow, none)',
+        transition: 'background-color 0.15s ease, border-color 0.15s ease',
+    },
+    '& .a2ui-button:hover': {
+        background: 'var(--a2ui-color-primary-hover, #1a7f37)',
+        borderColor: 'var(--a2ui-color-primary-hover, #1a7f37)',
+    },
+    '& .a2ui-button:disabled': {
+        opacity: 0.6,
+        cursor: 'not-allowed',
+    },
+    '& .a2ui-tab-button': {
+        appearance: 'none',
+        background: 'transparent',
+        border: 'none',
+        borderBottom: '2px solid transparent',
+        borderRadius: 0,
+        marginBottom: '-1px',
+        padding: 'var(--a2ui-tab-padding, 8px 16px)',
+        color: 'var(--a2ui-tab-color, var(--a2ui-color-on-surface, #656d76))',
+        cursor: 'pointer',
+        fontFamily: 'inherit',
+        fontSize: 'var(--a2ui-font-size-sm, 14px)',
+        fontWeight: 500,
+        boxShadow: 'none',
+        transition: 'color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease',
+    },
+    '& .a2ui-tab-button:hover': {
+        color: 'var(--a2ui-tab-color-hover, var(--a2ui-color-primary, #1f883d))',
+        background: 'var(--a2ui-tab-background-hover, var(--a2ui-color-surface, #f6f8fa))',
+    },
+    '& .a2ui-tab-button.active': {
+        color: 'var(--a2ui-tab-color-active, var(--a2ui-color-primary, #1f883d))',
+        borderBottomColor: 'var(--a2ui-tab-border-active, var(--a2ui-color-primary, #1f883d))',
+        fontWeight: 600,
+    },
+    '& .chip': {
+        appearance: 'none',
+        padding: 'var(--a2ui-choicepicker-chip-padding, 4px 12px)',
+        borderRadius: 'var(--a2ui-choicepicker-chip-border-radius, 999px)',
+        border: '1px solid var(--a2ui-color-border, #d0d7de)',
+        background: 'var(--a2ui-color-surface, #f6f8fa)',
+        color: 'var(--a2ui-color-on-surface, #1f2328)',
+        cursor: 'pointer',
+        fontFamily: 'inherit',
+        fontSize: 'var(--a2ui-font-size-sm, 14px)',
+        fontWeight: 500,
+        boxShadow: 'none',
+        transition: 'background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease',
+    },
+    '& .chip:hover': {
+        borderColor: 'var(--a2ui-color-border-hover, var(--a2ui-color-primary, #1f883d))',
+    },
+    '& .chip.selected, & .chip[aria-pressed="true"]': {
+        background: 'var(--a2ui-color-primary, #1f883d)',
+        borderColor: 'var(--a2ui-color-primary, #1f883d)',
+        color: 'var(--a2ui-color-on-primary, #ffffff)',
+    },
+    [A2UI_INPUT_SELECTOR]: {
+        width: '100%',
+        minHeight: 'var(--a2ui-control-height, 32px)',
+        boxSizing: 'border-box',
+        background: 'var(--a2ui-textfield-background, var(--a2ui-color-input, var(--a2ui-color-background, #ffffff)))',
+        color: 'var(--a2ui-textfield-color, var(--a2ui-color-on-input, var(--a2ui-color-on-background, #1f2328)))',
+        border: 'var(--a2ui-textfield-border, 1px solid var(--a2ui-color-border, #d0d7de))',
+        borderRadius: 'var(--a2ui-textfield-border-radius, 6px)',
+        padding: 'var(--a2ui-textfield-padding, 5px 12px)',
+        fontSize: 'var(--a2ui-font-size-sm, 14px)',
+        lineHeight: '20px',
+        transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+    },
+    [A2UI_INPUT_HOVER_SELECTOR]: {
+        borderColor: 'var(--a2ui-textfield-color-border-hover, var(--a2ui-color-border-hover, #8c959f))',
+    },
+    [A2UI_INPUT_FOCUS_SELECTOR]: {
+        outline: 'none',
+        borderColor: 'var(--a2ui-textfield-color-border-focus, var(--a2ui-color-primary, #1f883d))',
+        boxShadow: '0 0 0 3px color-mix(in srgb, var(--a2ui-color-primary, #1f883d) 25%, transparent)',
+    },
+    '& .a2ui-textfield-label': {
+        color: 'var(--a2ui-textfield-label-color, var(--a2ui-color-on-surface, var(--a2ui-color-on-background, #1f2328)))',
+        fontWeight: 600,
+        fontSize: 'var(--a2ui-font-size-xs, 12px)',
+        marginBottom: 'var(--a2ui-spacing-xxs, 4px)',
+        display: 'inline-block',
+    },
+    '& .a2ui-textfield-error': {
+        color: 'var(--a2ui-textfield-color-error, #d1242f)',
+        fontSize: 'var(--a2ui-font-size-xs, 12px)',
+        marginTop: 'var(--a2ui-spacing-xs, 4px)',
+    },
+    '& input[type="checkbox"]': {
+        accentColor: 'var(--a2ui-color-primary, #1f883d)',
+    },
+};

package/lib/components/context/SpaceSelect.d.ts

@@ -0,0 +1,2 @@
+export declare const SpaceSelect: () => import("react/jsx-runtime").JSX.Element;
+export default SpaceSelect;