feat: Catalog Reference route (native @a2ui/angular)

[jerelvelarde]

A per-component reference for the custom A2UI catalog: live native preview, A2UI usage snippet, and props for every component — plus Definitions and Renderers views that show the catalog's own source.

Depends on #121 (Custom Catalog). This branch is stacked on #121, so the foundation commits (the @a2ui/angular build + the 11-component catalog) appear in this diff until #121 merges. The Catalog-Reference-specific changes are the last 4 commits: custom-catalog/reference/**, the /catalog-reference route + nav entry, and a codegen script that bundles the catalog source.

What

• /catalog-reference route with a component index grouped by category (Layout / Content / Data Display / Interactive).
• Per component: a live native preview, copyable A2UI usage (v0.9 createSurface / updateComponents), and a props table.
• Definitions and Renderers views render the catalog's own source, bundled at build time via shell/scripts/generate-catalog-source.mjs.

Why

Gives contributors a browsable, always-in-sync reference for what the native catalog offers and exactly how to author each component in A2UI.

Testing

ng build (lint + AOT) green on a clean build; catalog-reference + composer-shell unit tests pass (24 specs).

---

Contributed by CopilotKit.

Screenshots

/catalog-reference — live native preview + A2UI usage + props (PieChart shown):

Light	Dark

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[gemini-code-assist]

Code Review

This pull request introduces a custom 11-component dashboard catalog, a code-generation script to bundle source files, and integrates 'Custom Catalog' and 'Catalog Reference' views into the shell routes and sidebar navigation, complete with unit tests. Feedback focuses on improving robustness: clamping negative values to zero in BarChart and PieChart to prevent invalid SVG rendering, and adding a safety guard in DataTable to prevent runtime errors if a row is null or undefined.

[gemini-code-assist]

If any data item contains a negative value, Number(d.value) will be negative, resulting in a negative height for the SVG <rect>. Negative heights are invalid in SVG and can cause rendering issues or browser warnings.

Consider clamping the values to 0 or greater to ensure robust rendering.

Suggested change

	protected readonly bars = computed<Bar[]>(() => {
	const data = this.data();
	const max = data.reduce((m, d) => Math.max(m, Number(d.value) || 0), 0);
	return data.map((d, i) => {
	const value = Number(d.value) || 0;
	protected readonly bars = computed<Bar[]>(() => {
	const data = this.data();
	const max = data.reduce((m, d) => Math.max(m, Math.max(0, Number(d.value) || 0)), 0);
	return data.map((d, i) => {
	const value = Math.max(0, Number(d.value) || 0);

[gemini-code-assist]

If any data item contains a negative value, it can corrupt the total and cursor calculations, leading to incorrect or overlapping slices and invalid SVG arc paths.

Consider clamping the values to 0 or greater to ensure robust rendering.

Suggested change

	protected readonly slices = computed<PieSlice[]>(() => {
	const data = this.data();
	const innerR = this.innerRadius();
	const total = data.reduce((sum, d) => sum + (Number(d.value) || 0), 0);
	if (total <= 0) return [];
	const slices: PieSlice[] = [];
	let cursor = 0;
	data.forEach((d, i) => {
	const value = Number(d.value) || 0;
	protected readonly slices = computed<PieSlice[]>(() => {
	const data = this.data();
	const innerR = this.innerRadius();
	const total = data.reduce((sum, d) => sum + Math.max(0, Number(d.value) || 0), 0);
	if (total <= 0) return [];
	const slices: PieSlice[] = [];
	let cursor = 0;
	data.forEach((d, i) => {
	const value = Math.max(0, Number(d.value) || 0);

[gemini-code-assist]

If row is null or undefined at runtime (due to unexpected or malformed data model), accessing row[key] will throw a TypeError.

Consider adding a guard to safely handle null or undefined rows.

Suggested change

	protected cell(row: Record<string, unknown>, key: string): string {
	return String(row[key] ?? '');
	}
	protected cell(row: Record<string, unknown> | null | undefined, key: string): string {
	return row ? String(row[key] ?? '') : '';
	}