cortena-ui 1.3.0 → 1.4.0

package/dist/a2ui/views.js

@@ -0,0 +1,596 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Alert, AlertDescription, AlertIcon, AlertTitle } from "../components/alert.js";
+import { Badge } from "../components/badge.js";
+import { Button } from "../components/button.js";
+import { ButtonLink } from "../components/button-link.js";
+import { Card, CardContent } from "../components/card.js";
+import { Checkbox } from "../components/checkbox.js";
+import { Input } from "../components/input.js";
+import { EmptyState } from "../components/empty-state.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../components/field.js";
+import { Progress, ProgressLabel, ProgressValue } from "../components/progress.js";
+import { RadioGroup, RadioGroupItem } from "../components/radio-group.js";
+import { SectionCard } from "../components/section-card.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/select.js";
+import { Separator } from "../components/separator.js";
+import { StatusDot } from "../components/status-dot.js";
+import { Switch } from "../components/switch.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/tabs.js";
+import { Textarea } from "../components/textarea.js";
+import { DateField, formatDateISO, parseDateISO } from "../components/date-field.js";
+import { DataTable } from "../components/data-table/data-table.js";
+import { Chart } from "../components/chart/chart.js";
+import { Markdown } from "../components/markdown.js";
+import { AlertTriangle, CheckCircle2, Info, OctagonAlert, Terminal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/a2ui/views.tsx
+/**
+* The cortena-ui side of the A2UI catalogue.
+*
+* One React view per catalogue entry. Each is a real component, not a render
+* function, so an interactive entry can hold hooks (draft input state, the
+* debounce timer) without the renderer having to care which entries are
+* stateful.
+*
+* Views receive already-resolved props: the renderer has read the data
+* bindings, validated against the entry's zod schema and normalised actions
+* before any of this runs. A view therefore never parses A2UI, and never sees
+* an unvalidated value.
+*
+* Every visual value is a cortena-design token, as everywhere else in the
+* package. The Tailwind scale maps below exist because Tailwind only emits a
+* class it can see in the source, so `gap-${n}` would silently produce nothing.
+*/
+/** Tailwind spacing steps an agent may pick. Written out so Tailwind emits them. */
+const GAP = {
+	0: "gap-0",
+	1: "gap-1",
+	2: "gap-2",
+	3: "gap-3",
+	4: "gap-4",
+	6: "gap-6",
+	8: "gap-8"
+};
+const PADDING = {
+	0: "p-0",
+	1: "p-1",
+	2: "p-2",
+	3: "p-3",
+	4: "p-4",
+	6: "p-6",
+	8: "p-8"
+};
+const HEIGHT = {
+	0: "h-0",
+	1: "h-1",
+	2: "h-2",
+	3: "h-3",
+	4: "h-4",
+	6: "h-6",
+	8: "h-8"
+};
+const ALIGN = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch",
+	baseline: "items-baseline"
+};
+const JUSTIFY = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between"
+};
+const TEXT_ALIGN = {
+	start: "text-left",
+	center: "text-center",
+	end: "text-right"
+};
+const TEXT_ROLE = {
+	heading: "font-display text-[length:var(--ds-text-h3)] leading-[var(--ds-text-h3--line-height)] font-semibold",
+	subheading: "text-[length:var(--ds-text-body-md)] leading-[var(--ds-text-body-md--line-height)] font-semibold",
+	body: "text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]",
+	caption: "text-[length:var(--ds-text-caption)] leading-[var(--ds-text-caption--line-height)]",
+	eyebrow: "text-[length:var(--ds-text-eyebrow)] leading-[var(--ds-text-eyebrow--line-height)] font-medium uppercase tracking-[var(--ds-text-eyebrow--letter-spacing)]"
+};
+const TEXT_TONE = {
+	default: "text-[color:var(--ds-foreground)]",
+	muted: "text-[color:var(--ds-muted-foreground)]",
+	success: "text-[color:var(--ds-success)]",
+	warning: "text-[color:var(--ds-warning)]",
+	danger: "text-[color:var(--ds-destructive)]",
+	info: "text-[color:var(--ds-info)]"
+};
+/**
+* Components that are inline by nature.
+*
+* A Column stretches its children on the cross axis, which is right for a field
+* or a table and wrong for a badge — one would span the whole surface. `w-fit`
+* gives the item an explicit cross size, which is what disables the stretch,
+* without overriding a Row's own alignment.
+*/
+const INLINE = "w-fit";
+const ALERT_ICON = {
+	default: /* @__PURE__ */ jsx(Terminal, {}),
+	success: /* @__PURE__ */ jsx(CheckCircle2, {}),
+	warn: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	danger: /* @__PURE__ */ jsx(OctagonAlert, {}),
+	info: /* @__PURE__ */ jsx(Info, {})
+};
+/**
+* Debounce a value. Used for continuous inputs so an agent receives one action
+* per pause rather than one per keystroke; the visible input stays immediate.
+*/
+function useDebouncedEmit(emit, delay) {
+	const latest = React.useRef(emit);
+	latest.current = emit;
+	const timer = React.useRef(void 0);
+	React.useEffect(() => () => {
+		if (timer.current !== void 0) clearTimeout(timer.current);
+	}, []);
+	return React.useCallback((value) => {
+		if (timer.current !== void 0) clearTimeout(timer.current);
+		timer.current = setTimeout(() => latest.current(value), delay);
+	}, [delay]);
+}
+/**
+* A value that follows the data model but can be typed over.
+*
+* The bound value wins whenever the agent changes it; between agent updates the
+* local draft wins, so typing is not swallowed by a re-render.
+*
+* `key` is what identity is judged on, and defaults to the value itself. It
+* matters for a value the renderer rebuilds each pass — a Date parsed from an
+* ISO string is a new object every render, so comparing the objects would reset
+* the draft forever. Compare the string instead.
+*/
+function useDraft(bound, key = bound) {
+	const [draft, setDraft] = React.useState(bound);
+	const previous = React.useRef(key);
+	if (!Object.is(previous.current, key)) {
+		previous.current = key;
+		setDraft(bound);
+	}
+	return [draft, setDraft];
+}
+const ColumnView = ({ props, children }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "a2ui-column",
+	className: cn("flex min-w-0 flex-col", GAP[props.gap ?? 3], props.padding !== void 0 ? PADDING[props.padding] : void 0, props.align ? ALIGN[props.align] : void 0, props.justify ? JUSTIFY[props.justify] : void 0),
+	children
+});
+const RowView = ({ props, children }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "a2ui-row",
+	className: cn("flex min-w-0 flex-row", props.wrap === false ? "flex-nowrap" : "flex-wrap", GAP[props.gap ?? 2], props.padding !== void 0 ? PADDING[props.padding] : void 0, ALIGN[props.align ?? "center"], props.justify ? JUSTIFY[props.justify] : void 0),
+	children
+});
+const CardView = ({ props, children }) => /* @__PURE__ */ jsx(Card, {
+	"data-slot": "a2ui-card",
+	accent: props.accent,
+	children: props.flush ? /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children
+	}) : /* @__PURE__ */ jsx(CardContent, {
+		className: "flex flex-col gap-3 p-5",
+		children
+	})
+});
+const SectionCardView = ({ props, children }) => /* @__PURE__ */ jsx(SectionCard, {
+	"data-slot": "a2ui-section-card",
+	title: props.title,
+	description: props.description,
+	flush: props.flush,
+	children: /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children
+	})
+});
+const DividerView = ({ props }) => /* @__PURE__ */ jsx(Separator, {
+	"data-slot": "a2ui-divider",
+	orientation: props.orientation ?? "horizontal"
+});
+const SpacerView = ({ props }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "a2ui-spacer",
+	"aria-hidden": true,
+	className: cn("w-full", HEIGHT[props.size ?? 4])
+});
+const TextView = ({ props }) => /* @__PURE__ */ jsx("p", {
+	"data-slot": "a2ui-text",
+	"data-role": props.role ?? "body",
+	className: cn("min-w-0 break-words", TEXT_ROLE[props.role ?? "body"], TEXT_TONE[props.tone ?? "default"], props.align ? TEXT_ALIGN[props.align] : void 0, props.mono ? "font-[family-name:var(--ds-font-mono)]" : void 0),
+	children: props.text
+});
+const MarkdownView = ({ props }) => /* @__PURE__ */ jsx(Markdown, {
+	"data-slot": "a2ui-markdown",
+	compact: props.compact,
+	children: props.text
+});
+function FieldShell({ label, description, error, children, slot, orientation, controlId }) {
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-slot": slot,
+		orientation: orientation ?? "vertical",
+		invalid: Boolean(error),
+		children: [
+			label ? /* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: controlId,
+				children: label
+			}) : null,
+			children,
+			description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+			error ? /* @__PURE__ */ jsx(FieldError, { children: error }) : null
+		]
+	});
+}
+const TextFieldView = ({ props, emit, writeBack, debounceMs }) => {
+	const id = React.useId();
+	const [draft, setDraft] = useDraft(props.value ?? "");
+	const send = useDebouncedEmit((value) => emit(props.onChange, "change", { value }), debounceMs);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		slot: "a2ui-text-field",
+		label: props.label,
+		description: props.description,
+		error: props.error,
+		controlId: id,
+		children: /* @__PURE__ */ jsx(Input, {
+			id,
+			type: props.type ?? "text",
+			value: draft,
+			placeholder: props.placeholder,
+			disabled: props.disabled,
+			required: props.required,
+			"aria-label": props.label ? void 0 : props.placeholder ?? "Text field",
+			onChange: (event) => {
+				const next = event.target.value;
+				setDraft(next);
+				writeBack("value", next);
+				send(next);
+			}
+		})
+	});
+};
+const TextAreaView = ({ props, emit, writeBack, debounceMs }) => {
+	const id = React.useId();
+	const [draft, setDraft] = useDraft(props.value ?? "");
+	const send = useDebouncedEmit((value) => emit(props.onChange, "change", { value }), debounceMs);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		slot: "a2ui-text-area",
+		label: props.label,
+		description: props.description,
+		error: props.error,
+		controlId: id,
+		children: /* @__PURE__ */ jsx(Textarea, {
+			id,
+			value: draft,
+			rows: props.rows ?? 4,
+			placeholder: props.placeholder,
+			disabled: props.disabled,
+			autoGrow: props.autoGrow,
+			"aria-label": props.label ? void 0 : props.placeholder ?? "Text area",
+			onChange: (event) => {
+				const next = event.target.value;
+				setDraft(next);
+				writeBack("value", next);
+				send(next);
+			}
+		})
+	});
+};
+const SelectView = ({ props, emit, writeBack }) => {
+	const [draft, setDraft] = useDraft(props.value ?? null);
+	const items = React.useMemo(() => props.options.map((option) => ({
+		value: option.value,
+		label: option.label ?? option.value
+	})), [props.options]);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		slot: "a2ui-select",
+		label: props.label,
+		description: props.description,
+		error: props.error,
+		children: /* @__PURE__ */ jsxs(Select, {
+			items,
+			value: draft,
+			disabled: props.disabled,
+			onValueChange: (next) => {
+				const value = next === null ? "" : String(next);
+				setDraft(value);
+				writeBack("value", value);
+				emit(props.onChange, "change", { value });
+			},
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				"aria-label": props.label ?? props.placeholder ?? "Select",
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select…" })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: props.options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				disabled: option.disabled,
+				children: option.label ?? option.value
+			}, option.value)) })]
+		})
+	});
+};
+const CheckboxView = ({ props, emit, writeBack }) => {
+	const [draft, setDraft] = useDraft(props.checked ?? false);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		slot: "a2ui-checkbox",
+		description: props.description,
+		orientation: "horizontal",
+		children: /* @__PURE__ */ jsxs("label", {
+			className: "flex items-start gap-3 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex h-5 items-center",
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					checked: draft,
+					disabled: props.disabled,
+					"aria-label": props.label ?? "Checkbox",
+					onCheckedChange: (checked) => {
+						setDraft(checked);
+						writeBack("checked", checked);
+						emit(props.onChange, "change", { checked });
+					}
+				})
+			}), /* @__PURE__ */ jsx("span", { children: props.label })]
+		})
+	});
+};
+const SwitchView = ({ props, emit, writeBack }) => {
+	const [draft, setDraft] = useDraft(props.checked ?? false);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		slot: "a2ui-switch",
+		description: props.description,
+		orientation: "horizontal",
+		children: /* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-3 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]",
+			children: [/* @__PURE__ */ jsx(Switch, {
+				checked: draft,
+				disabled: props.disabled,
+				"aria-label": props.label ?? "Switch",
+				onCheckedChange: (checked) => {
+					setDraft(checked);
+					writeBack("checked", checked);
+					emit(props.onChange, "change", { checked });
+				}
+			}), /* @__PURE__ */ jsx("span", { children: props.label })]
+		})
+	});
+};
+const RadioGroupView = ({ props, emit, writeBack }) => {
+	const [draft, setDraft] = useDraft(props.value ?? "");
+	return /* @__PURE__ */ jsx(FieldShell, {
+		slot: "a2ui-radio-group",
+		label: props.label,
+		description: props.description,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			"aria-label": props.label ?? "Options",
+			value: draft,
+			disabled: props.disabled,
+			onValueChange: (next) => {
+				const value = String(next);
+				setDraft(value);
+				writeBack("value", value);
+				emit(props.onChange, "change", { value });
+			},
+			children: props.options.map((option) => /* @__PURE__ */ jsxs("label", {
+				className: "flex items-start gap-3 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex h-5 items-center",
+					children: /* @__PURE__ */ jsx(RadioGroupItem, {
+						value: option.value,
+						disabled: option.disabled
+					})
+				}), /* @__PURE__ */ jsx("span", { children: option.label ?? option.value })]
+			}, option.value))
+		})
+	});
+};
+const DateFieldView = ({ props, emit, writeBack }) => {
+	const id = React.useId();
+	const [draft, setDraft] = useDraft(props.value ? parseDateISO(props.value) : void 0, props.value ?? "");
+	return /* @__PURE__ */ jsx(FieldShell, {
+		slot: "a2ui-date-field",
+		label: props.label,
+		description: props.description,
+		error: props.error,
+		controlId: id,
+		children: /* @__PURE__ */ jsx(DateField, {
+			id,
+			value: draft,
+			min: props.min ? parseDateISO(props.min) : void 0,
+			max: props.max ? parseDateISO(props.max) : void 0,
+			disabled: props.disabled,
+			invalid: Boolean(props.error),
+			"aria-label": props.label ?? "Date",
+			onValueChange: (date) => {
+				setDraft(date);
+				const value = date ? formatDateISO(date) : "";
+				writeBack("value", value);
+				emit(props.onChange, "change", { value });
+			}
+		})
+	});
+};
+const ButtonView = ({ props, emit, dataModel }) => /* @__PURE__ */ jsx(Button, {
+	"data-slot": "a2ui-button",
+	className: INLINE,
+	variant: props.variant ?? "primary",
+	size: props.size ?? "md",
+	disabled: props.disabled,
+	onClick: () => emit(props.onPress, props.submit ? "submit" : "press", props.submit ? { data: dataModel } : {}),
+	children: props.label
+});
+const ButtonLinkView = ({ props }) => /* @__PURE__ */ jsx("span", {
+	"data-slot": "a2ui-button-link",
+	className: cn("inline-flex", INLINE),
+	children: /* @__PURE__ */ jsx(ButtonLink, {
+		variant: props.variant ?? "secondary",
+		size: props.size ?? "md",
+		href: props.href,
+		target: props.target,
+		rel: props.target === "_blank" ? "noopener noreferrer" : void 0,
+		children: props.label
+	})
+});
+const LinkView = ({ props }) => /* @__PURE__ */ jsx("a", {
+	"data-slot": "a2ui-link",
+	href: props.href,
+	target: props.target,
+	rel: props.target === "_blank" ? "noopener noreferrer" : void 0,
+	className: cn(INLINE, "text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-primary)] underline underline-offset-4", "hover:text-[color:var(--ds-primary-hover)]"),
+	children: props.label
+});
+const BadgeView = ({ props }) => /* @__PURE__ */ jsx(Badge, {
+	"data-slot": "a2ui-badge",
+	className: INLINE,
+	variant: props.variant ?? "default",
+	children: props.label
+});
+const AlertView = ({ props }) => {
+	const variant = props.variant ?? "default";
+	return /* @__PURE__ */ jsxs(Alert, {
+		"data-slot": "a2ui-alert",
+		variant,
+		children: [/* @__PURE__ */ jsx(AlertIcon, { children: ALERT_ICON[variant] }), /* @__PURE__ */ jsxs("div", { children: [props.title ? /* @__PURE__ */ jsx(AlertTitle, { children: props.title }) : null, props.description ? /* @__PURE__ */ jsx(AlertDescription, { children: props.description }) : null] })]
+	});
+};
+const ProgressViewComponent = ({ props }) => /* @__PURE__ */ jsxs(Progress, {
+	"data-slot": "a2ui-progress",
+	value: props.value === void 0 ? null : props.value,
+	max: props.max,
+	"aria-label": props.label ?? "Progress",
+	children: [props.label ? /* @__PURE__ */ jsx(ProgressLabel, { children: props.label }) : null, props.showValue === false ? null : /* @__PURE__ */ jsx(ProgressValue, {})]
+});
+const StatusDotView = ({ props }) => /* @__PURE__ */ jsx(StatusDot, {
+	"data-slot": "a2ui-status-dot",
+	className: INLINE,
+	tone: props.tone ?? "accent",
+	live: props.live,
+	label: props.label
+});
+const EmptyStateView = ({ props, children }) => /* @__PURE__ */ jsx(EmptyState, {
+	"data-slot": "a2ui-empty-state",
+	title: props.title,
+	description: props.description,
+	size: props.size ?? "compact",
+	action: children.length > 0 ? /* @__PURE__ */ jsx("div", {
+		className: "flex gap-2",
+		children
+	}) : void 0
+});
+const DataTableView = ({ props, emit, resolveDataSource }) => {
+	const columns = React.useMemo(() => props.columns.map((column) => ({
+		id: column.id,
+		accessorKey: column.id,
+		header: column.label ?? column.id,
+		size: column.width,
+		meta: {
+			align: column.align,
+			filter: column.filter,
+			label: column.label ?? column.id
+		}
+	})), [props.columns]);
+	const source = props.dataSource;
+	const resolved = source.kind === "client" ? {
+		kind: "client",
+		rows: source.rows
+	} : resolveDataSource(source.sourceId);
+	if (!resolved) return /* @__PURE__ */ jsx(A2UIErrorCard, {
+		title: "Unknown data source",
+		detail: `No data source is registered for "${source.sourceId}". The host resolves a server table through resolveDataSource.`
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "a2ui-data-table",
+		children: /* @__PURE__ */ jsx(DataTable, {
+			columns,
+			dataSource: resolved,
+			pageSize: props.pageSize ?? 10,
+			density: props.density ?? "compact",
+			maxHeight: props.maxHeight,
+			searchPlaceholder: props.searchPlaceholder,
+			emptyMessage: props.emptyMessage,
+			onRowClick: (row) => emit(props.onRowClick, "rowClick", { row })
+		})
+	});
+};
+const ChartView = ({ props }) => /* @__PURE__ */ jsxs("div", {
+	"data-slot": "a2ui-chart",
+	className: "flex flex-col gap-2",
+	children: [props.title ? /* @__PURE__ */ jsx("p", {
+		className: "text-[length:var(--ds-text-caption-lg)] font-medium text-[color:var(--ds-foreground)]",
+		children: props.title
+	}) : null, /* @__PURE__ */ jsx(Chart, {
+		type: props.type,
+		data: props.data,
+		height: props.height ?? 260,
+		stacked: props.stacked,
+		legend: props.legend,
+		grid: props.grid,
+		scale: props.scale,
+		indexBy: props.indexBy,
+		keys: props.keys,
+		from: props.from,
+		to: props.to,
+		emptyMessage: props.emptyMessage
+	})]
+});
+const TabsView = ({ props, children, emit, writeBack }) => {
+	const first = props.tabs[0]?.value ?? "";
+	const [draft, setDraft] = useDraft(props.value ?? first);
+	return /* @__PURE__ */ jsxs(Tabs, {
+		"data-slot": "a2ui-tabs",
+		value: draft,
+		onValueChange: (next) => {
+			const value = String(next);
+			setDraft(value);
+			writeBack("value", value);
+			emit(props.onChange, "tabChange", { value });
+		},
+		children: [/* @__PURE__ */ jsx(TabsList, { children: props.tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, {
+			value: tab.value,
+			children: tab.label
+		}, tab.value)) }), props.tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsContent, {
+			value: tab.value,
+			children: children[index] ?? null
+		}, tab.value))]
+	});
+};
+const ImageView = ({ props }) => /* @__PURE__ */ jsx("img", {
+	"data-slot": "a2ui-image",
+	src: props.src,
+	alt: props.alt,
+	width: props.width,
+	height: props.height,
+	className: cn(INLINE, "max-w-full", props.fit === "cover" ? "object-cover" : "object-contain", props.rounded === false ? void 0 : "rounded-[var(--ds-radius-md)]", "border border-[var(--ds-border-subtle)]")
+});
+/**
+* What the renderer draws instead of a component it cannot draw.
+*
+* Never raw markup and never the offending payload as HTML: the detail is set
+* as text, so a malformed message cannot inject anything. This is the
+* "fallback: an error card on malformed payloads" of `05-agent-ui.md`.
+*/
+function A2UIErrorCard({ title, detail, componentId }) {
+	return /* @__PURE__ */ jsxs(Alert, {
+		"data-slot": "a2ui-error",
+		variant: "danger",
+		role: "alert",
+		children: [/* @__PURE__ */ jsx(AlertIcon, { children: /* @__PURE__ */ jsx(OctagonAlert, {}) }), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ jsx(AlertTitle, { children: title }),
+				detail ? /* @__PURE__ */ jsx(AlertDescription, {
+					className: "font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption)] break-words",
+					children: detail
+				}) : null,
+				componentId ? /* @__PURE__ */ jsxs(AlertDescription, {
+					className: "text-[length:var(--ds-text-caption-sm)] text-[color:var(--ds-muted-foreground)]",
+					children: ["Component id: ", componentId]
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { A2UIErrorCard, AlertView, BadgeView, ButtonLinkView, ButtonView, CardView, ChartView, CheckboxView, ColumnView, DataTableView, DateFieldView, DividerView, EmptyStateView, ImageView, LinkView, MarkdownView, ProgressViewComponent, RadioGroupView, RowView, SectionCardView, SelectView, SpacerView, StatusDotView, SwitchView, TabsView, TextAreaView, TextFieldView, TextView };
+
+//# sourceMappingURL=views.js.map