add guide on authoring components

[wrenj]

No description provided.

[gemini-code-assist]

Code Review

This pull request introduces a new comprehensive guide for authoring custom A2UI components, focusing on Angular implementation, schema definition, client-side registration, and agent invocation. The guide has been integrated into the documentation navigation. Feedback includes making the JSON schema example a valid, complete JSON object and correcting a link to point to the client-side rizzcharts example for consistency.

[gemini-code-assist]

The JSON snippet for the Chart component is not a valid JSON object on its own, as it's a fragment (a key-value pair) rather than a complete object. This can be confusing for readers trying to understand or validate the schema. To make it a valid and self-contained example, it should be wrapped in curly braces {}.

{
  "Chart": {
    "type": "object",
    "description": "An interactive chart that uses a hierarchical list of objects for its data.",
    "properties": {
      "type": {
        "type": "string",
        "description": "The type of chart to render.",
        "enum": [
          "doughnut",
          "pie"
        ]
      },
      "title": {
        "type": "object",
        "description": "The title of the chart. Can be a literal string or a data model path.",
        "properties": {
          "literalString": {
            "type": "string"
          },
          "path": {
            "type": "string"
          }
        }
      },
      "chartData": {
        "type": "object",
        "description": "The data for the chart, provided as a list of items. Can be a literal array or a data model path.",
        "properties": {
          "literalArray": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "label": {
                  "type": "string"
                },
                "value": {
                  "type": "number"
                },
                "drillDown": {
                  "type": "array",
                  "description": "An optional list of items for the next level of data.",
                  "items": {
                    "type": "object",
                    "properties": {
                      "label": {
                        "type": "string"
                      },
                      "value": {
                        "type": "number"
                      }
                    },
                    "required": [
                      "label",
                      "value"
                    ]
                  }
                }
              },
              "required": [
                "label",
                "value"
              ]
            }
          },
          "path": {
            "type": "string"
          }
        }
      }
    },
    "required": [
      "type",
      "chartData"
    ]
  }
}

[gemini-code-assist]

The link to the rizzcharts example points to the agent-side README, but the catalog.ts file being discussed is part of the client-side implementation. For consistency and to avoid confusion, it's better to link to the client-side rizzcharts README, similar to the link on line 111.

Suggested change

	In the [`rizzcharts`](../../samples/agent/adk/rizzcharts/README.md) example, this is done in [`catalog.ts`](../../samples/client/angular/projects/rizzcharts/src/a2ui-catalog/catalog.ts).
	In the [`rizzcharts`](../../samples/client/angular/projects/rizzcharts/README.md) example, this is done in [`catalog.ts`](../../samples/client/angular/projects/rizzcharts/src/a2ui-catalog/catalog.ts).