@datalayer/agent-runtimes 1.3.34 → 1.3.36

package/lib/components/a2ui/datalayer/Evidence.js

@@ -0,0 +1,73 @@
+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.
+ */
+/**
+ * Evidence (LOOP C-18): what an answer rests on — the sources it opened,
+ * each with its link and the passage cited from it. A source is
+ * `{title, url, passage}` (a title or a link at least); the first
+ * `max_items` show, the rest behind *more*. Opening a source opens its link
+ * in a new tab and dispatches the block's action (its `open` event), when it
+ * has one.
+ *
+ * @module components/a2ui/datalayer/Evidence
+ */
+import { useMemo, useState } from 'react';
+import { Button, Link, Text } from '@primer/react';
+import { LinkExternalIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { BlockFrame, Problem, Quiet, asWords, isRecord } from './parts';
+import { ownImplementation } from './implementation';
+/** The defaults the catalog gives. */
+const TITLE = 'Sources';
+const MAX_ITEMS = 5;
+/** The sources a block can show, or why it cannot. */
+export function evidenceSources(sources) {
+    if (sources === undefined || sources === null) {
+        return { sources: [] };
+    }
+    if (!Array.isArray(sources)) {
+        return { problem: 'What it shows is not a list of sources.' };
+    }
+    const read = [];
+    for (const [index, source] of sources.entries()) {
+        if (!isRecord(source) || (!source.title && !source.url)) {
+            return {
+                problem: `Source ${index + 1} has neither a title nor a link.`,
+            };
+        }
+        read.push({
+            title: asWords(source.title) || asWords(source.url),
+            url: asWords(source.url),
+            passage: asWords(source.passage),
+        });
+    }
+    return { sources: read };
+}
+export function EvidenceView({ props }) {
+    const { show_passages: showPassages = true, action } = props;
+    const title = props.title ?? TITLE;
+    const maxItems = props.max_items ?? MAX_ITEMS;
+    const read = useMemo(() => evidenceSources(props.sources), [props.sources]);
+    const [all, setAll] = useState(false);
+    const sources = 'sources' in read ? read.sources : [];
+    const shown = all ? sources : sources.slice(0, maxItems);
+    const hidden = sources.length - shown.length;
+    return (_jsxs(BlockFrame, { title: title, label: "Evidence", weight: props.weight, testId: "a2ui-evidence", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : sources.length === 0 ? (_jsx(Quiet, { children: "Nothing cited yet." })) : (_jsx(Box, { as: "ol", sx: {
+                    m: 0,
+                    pl: 3,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2,
+                }, children: shown.map((source, index) => (_jsxs("li", { children: [source.url ? (_jsxs(Link, { href: source.url, target: "_blank", rel: "noreferrer noopener", onClick: () => action?.(), sx: { fontWeight: 'semibold' }, children: [source.title, ' ', _jsx(LinkExternalIcon, { size: 12, "aria-label": "opens in a new tab" })] })) : (_jsx(Text, { sx: { fontWeight: 'semibold' }, children: source.title })), showPassages && source.passage ? (_jsx(Box, { as: "blockquote", sx: {
+                                m: 0,
+                                mt: 1,
+                                pl: 2,
+                                borderLeft: '3px solid',
+                                borderColor: 'border.default',
+                                color: 'fg.muted',
+                                fontSize: 1,
+                            }, children: source.passage })) : null] }, `${source.url}-${index}`))) })), hidden > 0 ? (_jsx(Box, { children: _jsxs(Button, { size: "small", variant: "invisible", onClick: () => setAll(true), children: [hidden, " more"] }) })) : null] }));
+}
+export const Evidence = ownImplementation('Evidence', EvidenceView);

package/lib/components/a2ui/datalayer/FileUpload.d.ts

@@ -0,0 +1,22 @@
+import { type OwnCommon } from './implementation';
+export type FileUploadProps = OwnCommon & {
+    label: string;
+    accept?: string[];
+    multiple?: boolean;
+    max_mb?: number;
+    files?: unknown;
+    setFiles: (files: GivenFile[]) => void;
+};
+/** A file as the application receives it. */
+export type GivenFile = {
+    name: string;
+    type: string;
+    size: number;
+    data_url: string;
+};
+/** Why a file is refused, or `null` when it is taken. */
+export declare function refusal(file: Pick<File, 'name' | 'size'>, accept: string[] | undefined, maxMb: number): string | null;
+export declare function FileUploadView({ props }: {
+    props: FileUploadProps;
+}): import("react").JSX.Element;
+export declare const FileUpload: import("@a2ui/react/v0_9").ReactComponentImplementation;

package/lib/components/a2ui/datalayer/FileUpload.js

@@ -0,0 +1,107 @@
+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.
+ */
+/**
+ * File upload (LOOP C-18): a file a person gives the application — chosen
+ * with *Choose a file*, or dropped on the block. One of a kind it does not
+ * accept, or larger than it takes, is refused in words and never sent. What
+ * it takes is read and written where its `files` binding points, as a list
+ * of `{name, type, size, data_url}` — the content as a data URL, which any
+ * transport carries — and then its action is dispatched, so the action's
+ * context reads the files just given, as a basic input's action reads its
+ * value.
+ *
+ * @module components/a2ui/datalayer/FileUpload
+ */
+import { useId, useRef, useState } from 'react';
+import { Button, Text } from '@primer/react';
+import { UploadIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { BlockFrame, CARD_RADIUS, Problem, Quiet, isRecord } from './parts';
+import { ownImplementation } from './implementation';
+/** The default the catalog gives `max_mb`. */
+const MAX_MB = 25;
+/** Why a file is refused, or `null` when it is taken. */
+export function refusal(file, accept, maxMb) {
+    if (accept?.length) {
+        const lower = file.name.toLowerCase();
+        if (!accept.some(extension => lower.endsWith(extension.toLowerCase()))) {
+            return `${file.name} is not one it takes (${accept.join(', ')}).`;
+        }
+    }
+    if (file.size > maxMb * 1024 * 1024) {
+        return `${file.name} is larger than ${maxMb} MB.`;
+    }
+    return null;
+}
+const readFile = (file) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve({
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        data_url: String(reader.result),
+    });
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+});
+export function FileUploadView({ props }) {
+    const { label, accept, multiple = false, setFiles, action } = props;
+    const maxMb = props.max_mb ?? MAX_MB;
+    const input = useRef(null);
+    const hintId = useId();
+    const [over, setOver] = useState(false);
+    const [problems, setProblems] = useState([]);
+    const given = Array.isArray(props.files)
+        ? props.files.filter(isRecord).map(file => String(file.name ?? ''))
+        : [];
+    const give = async (list) => {
+        const files = Array.from(list);
+        const chosen = multiple ? files : files.slice(0, 1);
+        const refused = chosen
+            .map(file => refusal(file, accept, maxMb))
+            .filter((reason) => reason !== null);
+        if (!multiple && files.length > 1) {
+            refused.push('It takes one file at a time.');
+        }
+        setProblems(refused);
+        if (refused.length) {
+            return;
+        }
+        setFiles(await Promise.all(chosen.map(readFile)));
+        action?.();
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        setOver(false);
+        void give(event.dataTransfer.files);
+    };
+    const hint = [
+        accept?.length ? `Takes ${accept.join(', ')}` : 'Takes any file',
+        `up to ${maxMb} MB`,
+        multiple ? 'several at once' : 'one at a time',
+    ].join(', ');
+    return (_jsxs(BlockFrame, { label: label, weight: props.weight, testId: "a2ui-fileupload", children: [_jsxs(Box, { onDragOver: (event) => {
+                    event.preventDefault();
+                    setOver(true);
+                }, onDragLeave: () => setOver(false), onDrop: onDrop, "data-testid": "a2ui-fileupload-drop", sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 2,
+                    p: 3,
+                    border: '1px dashed',
+                    borderColor: over ? 'accent.fg' : 'border.default',
+                    borderRadius: CARD_RADIUS,
+                    bg: over ? 'accent.subtle' : 'canvas.subtle',
+                    textAlign: 'center',
+                }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: label }), _jsx(Button, { leadingVisual: UploadIcon, "aria-describedby": hintId, onClick: () => input.current?.click(), children: multiple ? 'Choose files' : 'Choose a file' }), _jsxs(Text, { id: hintId, sx: { fontSize: 0, color: 'fg.muted' }, children: ["or drop ", multiple ? 'them' : 'it', " here. ", hint, "."] }), _jsx("input", { ref: input, type: "file", hidden: true, "aria-label": label, accept: accept?.join(','), multiple: multiple, onChange: event => {
+                            if (event.target.files) {
+                                void give(event.target.files);
+                            }
+                            event.target.value = '';
+                        } })] }), problems.map(problem => (_jsx(Problem, { children: problem }, problem))), given.length ? _jsxs(Quiet, { children: ["Given: ", given.join(', ')] }) : null] }));
+}
+export const FileUpload = ownImplementation('FileUpload', FileUploadView);

package/lib/components/a2ui/datalayer/Form.d.ts

@@ -0,0 +1,12 @@
+import { type OwnCommon } from './implementation';
+export type FormProps = OwnCommon & {
+    title?: string;
+    schema: Record<string, unknown>;
+    submit_label?: string;
+    values?: unknown;
+    setValues: (values: Record<string, unknown>) => void;
+};
+export declare function FormView({ props }: {
+    props: FormProps;
+}): import("react").JSX.Element;
+export declare const Form: import("@a2ui/react/v0_9").ReactComponentImplementation;

package/lib/components/a2ui/datalayer/Form.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Form (LOOP C-18, C-16): several fields asked at once, generated from the
+ * JSON Schema the builder gave it by `@datalayer/primer-rjsf` — the form the
+ * properties panels are drawn with — checked as they are filled. It starts
+ * from the values its `values` binding shows; a form the schema accepts is
+ * sent with its button: the values are written where `values` points, then
+ * its action is dispatched, so the action's context reads them. A form the
+ * schema refuses says why beside each field and sends nothing.
+ *
+ * @module components/a2ui/datalayer/Form
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Form as SchemaForm } from '@datalayer/primer-rjsf';
+import validator from '@rjsf/validator-ajv8';
+import { BlockFrame, Problem, isRecord } from './parts';
+import { ownImplementation } from './implementation';
+/** The default the catalog gives `submit_label`. */
+const SUBMIT_LABEL = 'Send';
+export function FormView({ props }) {
+    const { title, schema, setValues, action } = props;
+    const submitLabel = props.submit_label ?? SUBMIT_LABEL;
+    const shown = isRecord(props.values) ? props.values : {};
+    const [values, setLocal] = useState(shown);
+    // Checked as it is filled once a field is left or a send is tried: an
+    // untouched form does not open with every required field in red.
+    const [touched, setTouched] = useState(false);
+    // What the application publishes anew is what the form shows.
+    const shownKey = JSON.stringify(shown);
+    useEffect(() => {
+        setLocal(JSON.parse(shownKey));
+    }, [shownKey]);
+    const uiSchema = useMemo(() => ({ 'ui:submitButtonOptions': { submitText: submitLabel } }), [submitLabel]);
+    const problem = schema.type !== undefined && schema.type !== 'object'
+        ? 'Its fields are not an object schema: a form asks for several named values.'
+        : null;
+    return (_jsx(BlockFrame, { title: title, label: "Form", weight: props.weight, testId: "a2ui-form", children: problem ? (_jsx(Problem, { children: problem })) : (_jsx(SchemaForm, { schema: schema, uiSchema: uiSchema, formData: values, validator: validator, liveValidate: touched, onBlur: () => setTouched(true), onError: () => setTouched(true), showErrorList: false, onChange: event => setLocal((event.formData ?? {})), onSubmit: event => {
+                setValues((event.formData ?? {}));
+                action?.();
+            } })) }));
+}
+export const Form = ownImplementation('Form', FormView);

package/lib/components/a2ui/datalayer/Table.d.ts

@@ -0,0 +1,20 @@
+import { type OwnCommon } from './implementation';
+export type TableProps = OwnCommon & {
+    title?: string;
+    columns: string[];
+    page_size?: number;
+    selectable?: boolean;
+    rows?: unknown;
+    selected?: unknown;
+    setSelected: (row: unknown) => void;
+};
+/** The rows a table can draw, or why it cannot. */
+export declare function tableRows(rows: unknown): {
+    rows: Record<string, unknown>[];
+} | {
+    problem: string;
+};
+export declare function TableView({ props }: {
+    props: TableProps;
+}): import("react").JSX.Element;
+export declare const Table: import("@a2ui/react/v0_9").ReactComponentImplementation;

package/lib/components/a2ui/datalayer/Table.js

@@ -0,0 +1,103 @@
+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.
+ */
+/**
+ * Table (LOOP C-18): the rows an application publishes, under the columns
+ * the builder chose, a page at a time. A selectable table lets a person
+ * choose a row — by pointer, or by Tab and Enter or Space — which is written
+ * where its `selected` binding points, and then its action is dispatched,
+ * so the action's context reads the row just chosen.
+ *
+ * @module components/a2ui/datalayer/Table
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { BlockFrame, Problem, Quiet, asWords, isRecord } from './parts';
+import { ownImplementation } from './implementation';
+/** The default the catalog gives `page_size`. */
+const PAGE_SIZE = 20;
+const sameRow = (a, b) => a !== undefined && JSON.stringify(a) === JSON.stringify(b);
+/** The rows a table can draw, or why it cannot. */
+export function tableRows(rows) {
+    if (rows === undefined || rows === null) {
+        return { rows: [] };
+    }
+    if (!Array.isArray(rows)) {
+        return { problem: 'What it shows is not a list of rows.' };
+    }
+    const bad = rows.findIndex(row => !isRecord(row));
+    if (bad >= 0) {
+        return {
+            problem: `Row ${bad + 1} is not a record of the columns' values.`,
+        };
+    }
+    return { rows: rows };
+}
+export function TableView({ props }) {
+    const { title, columns, selectable = false, selected, setSelected, action, } = props;
+    const pageSize = props.page_size ?? PAGE_SIZE;
+    const read = useMemo(() => tableRows(props.rows), [props.rows]);
+    const all = 'rows' in read ? read.rows : [];
+    const pages = Math.max(1, Math.ceil(all.length / pageSize));
+    const [page, setPage] = useState(0);
+    // Fewer rows than before: the page shown is one that still exists.
+    useEffect(() => {
+        if (page >= pages) {
+            setPage(pages - 1);
+        }
+    }, [page, pages]);
+    const shown = all.slice(page * pageSize, (page + 1) * pageSize);
+    // The row chosen here, shown as chosen whether or not `selected` is bound;
+    // what the application publishes at `selected` wins when it is.
+    const [chosen, setChosen] = useState(undefined);
+    const current = selected !== undefined && selected !== null ? selected : chosen;
+    const choose = (row) => {
+        setChosen(row);
+        setSelected(row);
+        action?.();
+    };
+    const onKey = (event, row) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            choose(row);
+        }
+    };
+    return (_jsxs(BlockFrame, { title: title, label: "Table", weight: props.weight, testId: "a2ui-table", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : (_jsxs(Box, { sx: { overflowX: 'auto' }, children: [_jsxs(Box, { as: "table", role: selectable ? 'grid' : undefined, "aria-label": title || 'Table', sx: {
+                            width: '100%',
+                            borderCollapse: 'collapse',
+                            fontSize: 1,
+                            '& th, & td': {
+                                textAlign: 'left',
+                                px: 2,
+                                py: 1,
+                                borderBottom: '1px solid',
+                                borderColor: 'border.muted',
+                            },
+                            '& th': { color: 'fg.muted', fontWeight: 'semibold' },
+                        }, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(column => (_jsx("th", { scope: "col", children: column }, column))) }) }), _jsx("tbody", { children: shown.map((row, index) => {
+                                    const isSelected = selectable && sameRow(current, row);
+                                    return (_jsx(Box, { as: "tr", ...(selectable
+                                            ? {
+                                                tabIndex: 0,
+                                                'aria-selected': isSelected,
+                                                onClick: () => choose(row),
+                                                onKeyDown: (event) => onKey(event, row),
+                                            }
+                                            : null), sx: {
+                                            cursor: selectable ? 'pointer' : undefined,
+                                            bg: isSelected ? 'accent.subtle' : undefined,
+                                            '&:hover': selectable
+                                                ? { bg: isSelected ? 'accent.subtle' : 'canvas.subtle' }
+                                                : undefined,
+                                            '&:focus-visible': {
+                                                outline: '2px solid',
+                                                outlineColor: 'accent.fg',
+                                                outlineOffset: '-2px',
+                                            },
+                                        }, children: columns.map(column => (_jsx("td", { children: asWords(row[column]) }, column))) }, page * pageSize + index));
+                                }) })] }), all.length === 0 ? _jsx(Quiet, { children: "No rows yet." }) : null] })), pages > 1 ? (_jsxs(Box, { as: "nav", "aria-label": "Pages", sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Button, { size: "small", disabled: page === 0, onClick: () => setPage(page - 1), children: "Previous" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, "aria-live": "polite", children: ["Page ", page + 1, " of ", pages] }), _jsx(Button, { size: "small", disabled: page >= pages - 1, onClick: () => setPage(page + 1), children: "Next" })] })) : null] }));
+}
+export const Table = ownImplementation('Table', TableView);

package/lib/components/a2ui/datalayer/drawn.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The components of Datalayer's own a renderer draws (LOOP C-18), without
+ * the renderers: what a host that does not draw — the Studio's tests, a
+ * checker — reads to know that a component of the catalog is drawn. The
+ * renderers' module refuses to load when it and the catalog disagree.
+ *
+ * @module components/a2ui/datalayer/drawn
+ */
+export declare const DRAWN_OWN_COMPONENTS: readonly ["Table", "Chart", "FileUpload", "Chat", "Evidence", "Form"];
+export type DrawnOwnComponent = (typeof DRAWN_OWN_COMPONENTS)[number];

package/lib/components/a2ui/datalayer/drawn.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The components of Datalayer's own a renderer draws (LOOP C-18), without
+ * the renderers: what a host that does not draw — the Studio's tests, a
+ * checker — reads to know that a component of the catalog is drawn. The
+ * renderers' module refuses to load when it and the catalog disagree.
+ *
+ * @module components/a2ui/datalayer/drawn
+ */
+export const DRAWN_OWN_COMPONENTS = [
+    'Table',
+    'Chart',
+    'FileUpload',
+    'Chat',
+    'Evidence',
+    'Form',
+];

package/lib/components/a2ui/datalayer/implementation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A component of Datalayer's own as A2UI's React renderer registers one: its
+ * schema from the catalog, its view made by A2UI's own factory — the one
+ * every basic component is made by — so its bindings resolve, its setters
+ * write back and its action dispatches exactly as a basic component's do.
+ *
+ * @module components/a2ui/datalayer/implementation
+ */
+import type { FC } from 'react';
+import { type ReactA2uiComponentProps, type ReactComponentImplementation } from '@a2ui/react/v0_9';
+/** What every component of Datalayer's own receives besides its own properties. */
+export type OwnCommon = {
+    /** Dispatches its action, its context resolved at that moment; absent when it has none. */
+    action?: () => void;
+    weight?: number;
+};
+export declare function ownImplementation<P>(id: string, Render: FC<ReactA2uiComponentProps<P>>): ReactComponentImplementation;

package/lib/components/a2ui/datalayer/implementation.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createComponentImplementation, } from '@a2ui/react/v0_9';
+import { ownComponentSchema } from './schema';
+export function ownImplementation(id, Render) {
+    const api = { name: id, schema: ownComponentSchema(id) };
+    return createComponentImplementation(api, Render);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Datalayer's own components, drawn (LOOP C-18): a renderer for each the
+ * catalog has beside A2UI's basic ones — Table, Chart, File upload, Chat,
+ * Evidence and Form — made as A2UI makes its own, so that the decision
+ * surface, an application's page, the Surface view and the components page
+ * draw them as they draw a Button.
+ *
+ * @module components/a2ui/datalayer
+ */
+import type { ReactComponentImplementation } from '@a2ui/react/v0_9';
+/**
+ * A renderer for every component of Datalayer's own the catalog has, in the
+ * catalog's order. A component the catalog adds without a renderer here, or
+ * a renderer for one it no longer has, fails at once.
+ */
+export declare const OWN_COMPONENTS: ReactComponentImplementation[];
+export { OWN_COMPONENT_IDS, ownComponentSchema } from './schema';
+export { DRAWN_OWN_COMPONENTS, type DrawnOwnComponent } from './drawn';
+export { chartOption, chartPoints, chartSeries } from './Chart';
+export { chatItems } from './Chat';
+export { evidenceSources } from './Evidence';
+export { refusal as fileRefusal, type GivenFile } from './FileUpload';
+export { tableRows } from './Table';

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

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { OWN_COMPONENT_IDS } from './schema';
+import { DRAWN_OWN_COMPONENTS } from './drawn';
+import { Table } from './Table';
+import { Chart } from './Chart';
+import { FileUpload } from './FileUpload';
+import { Chat } from './Chat';
+import { Evidence } from './Evidence';
+import { Form } from './Form';
+const RENDERERS = {
+    Table,
+    Chart,
+    FileUpload,
+    Chat,
+    Evidence,
+    Form,
+};
+/**
+ * A renderer for every component of Datalayer's own the catalog has, in the
+ * catalog's order. A component the catalog adds without a renderer here, or
+ * a renderer for one it no longer has, fails at once.
+ */
+export const OWN_COMPONENTS = (() => {
+    const drawn = DRAWN_OWN_COMPONENTS;
+    const missing = OWN_COMPONENT_IDS.filter(id => !drawn.includes(id));
+    if (missing.length) {
+        throw new Error(`The catalog has ${missing.join(', ')}, which no renderer draws.`);
+    }
+    const stray = drawn.filter(id => !OWN_COMPONENT_IDS.includes(id));
+    if (stray.length) {
+        throw new Error(`A renderer draws ${stray.join(', ')}, which the catalog does not have.`);
+    }
+    return OWN_COMPONENT_IDS.map(id => RENDERERS[id]);
+})();
+export { OWN_COMPONENT_IDS, ownComponentSchema } from './schema';
+export { DRAWN_OWN_COMPONENTS } from './drawn';
+export { chartOption, chartPoints, chartSeries } from './Chart';
+export { chatItems } from './Chat';
+export { evidenceSources } from './Evidence';
+export { refusal as fileRefusal } from './FileUpload';
+export { tableRows } from './Table';

package/lib/components/a2ui/datalayer/parts.d.ts

@@ -0,0 +1,32 @@
+/**
+ * What the components of Datalayer's own share: the frame a block is drawn
+ * in — the `loop` theme's card radius and Primer's colours, so a block reads
+ * as part of the page it is on in either colour mode — its title, and the
+ * sentence it says when what it was given cannot be drawn.
+ *
+ * @module components/a2ui/datalayer/parts
+ */
+import type { ReactNode } from 'react';
+/** The theme's card radius, Primer's 6px where no theme sets it. */
+export declare const CARD_RADIUS = "var(--theme-radius-card, 6px)";
+/** A block's frame: its title above, what it draws inside. */
+export declare function BlockFrame({ title, label, weight, children, testId, }: {
+    title?: string;
+    /** What assistive technologies call it when it has no title. */
+    label: string;
+    weight?: number;
+    children: ReactNode;
+    testId: string;
+}): import("react").JSX.Element;
+/** What a block says instead of what it was given, when that cannot be drawn. */
+export declare function Problem({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A quiet sentence: nothing to show yet. */
+export declare function Quiet({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Whether a value is a record — an item of a list a block shows. */
+export declare const isRecord: (value: unknown) => value is Record<string, unknown>;
+/** A value as words in a cell, a point, a passage. */
+export declare function asWords(value: unknown): string;

package/lib/components/a2ui/datalayer/parts.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+/** The theme's card radius, Primer's 6px where no theme sets it. */
+export const CARD_RADIUS = 'var(--theme-radius-card, 6px)';
+/** A block's frame: its title above, what it draws inside. */
+export function BlockFrame({ title, label, weight, children, testId, }) {
+    return (_jsxs(Box, { as: "section", "aria-label": title || label, "data-testid": testId, sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            minWidth: 0,
+            boxSizing: 'border-box',
+            p: 3,
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: CARD_RADIUS,
+            bg: 'canvas.default',
+            color: 'fg.default',
+            ...(typeof weight === 'number'
+                ? { flex: `${weight}`, minHeight: 0 }
+                : null),
+        }, children: [title ? (_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title })) : null, children] }));
+}
+/** What a block says instead of what it was given, when that cannot be drawn. */
+export function Problem({ children }) {
+    return (_jsx(Text, { as: "p", role: "status", sx: { m: 0, color: 'danger.fg', fontSize: 1 }, children: children }));
+}
+/** A quiet sentence: nothing to show yet. */
+export function Quiet({ children }) {
+    return (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 1 }, children: children }));
+}
+/** Whether a value is a record — an item of a list a block shows. */
+export const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/** A value as words in a cell, a point, a passage. */
+export function asWords(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+    return String(value);
+}

package/lib/components/a2ui/datalayer/schema.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The A2UI schema of a component of Datalayer's own, read from the catalog
+ * (LOOP C-13, C-18): each property its JSON Schema declares, typed as it
+ * says; each thing it shows or sends a binding into the data model — a path
+ * the application publishes, or a value given in place; its `action`, what
+ * it dispatches when a person acts on it, written as A2UI writes a Button's.
+ *
+ * A2UI's renderer reads a component's schema to tell its properties apart —
+ * a binding it resolves and writes back through, an action it dispatches, a
+ * plain value it hands over — so the schema is built with the zod A2UI reads
+ * (v3), from the catalog, and cannot drift from what the Canvas, the YAML
+ * and Python check a component against.
+ *
+ * @module components/a2ui/datalayer/schema
+ */
+import { z } from 'zod/v3';
+import type { ComponentSpec } from '../../../types/agentspecs';
+/** The components of Datalayer's own the catalog has, by id. */
+export declare const OWN_COMPONENT_IDS: string[];
+/** A component of Datalayer's own, from the catalog; it throws for any other. */
+export declare function ownComponent(id: string): ComponentSpec;
+/** The names a component shows and sends through, each once. */
+export declare function bindingNames(component: ComponentSpec): string[];
+/**
+ * The A2UI schema of a component of Datalayer's own: its properties as its
+ * JSON Schema has them, its bindings, its `action`, and the `weight` every
+ * basic component takes inside a Row or a Column. Strict, as the basic
+ * catalog's are: a key it does not declare refuses the tree.
+ */
+export declare function ownComponentSchema(id: string): z.ZodObject<Record<string, z.ZodTypeAny>, "strict", z.ZodTypeAny, {
+    [x: string]: any;
+}, {
+    [x: string]: any;
+}>;