Revisit Gen UI SDK Catalog definition design

[jacobsimionato]

Given the progress on v0.9 web renderers, I think it is worth revisiting the Flutter API surface design before implementing changes, to see if there is an opportunity to create alignment between Flutter and web.

See:

• React renderer prototype (Add initial React Renderer v0.9 google/A2UI#827)
• Angular renderer prototype (Implement v0.9 Angular Renderer google/A2UI#855)
• Lit renderer prototype (feat(lit): Initial Draft of v0.9 Lit Renderer and Local Gallery google/A2UI#869)

Here is an example of defining a react component:

// 1. Define the API
const MyCustomApi = {
  name: 'CustomCard',
  schema: z.object({
    title: CommonSchemas.DynamicString,
    content: CommonSchemas.ComponentId
  })
};

// 2. Implement the implementation
export const ReactCustomCard = createReactComponent(
  MyCustomApi,
  ({ props, buildChild }) => {
    return (
      <div className="custom-card">
        <h3>{props.title}</h3>
        <div className="card-body">
          {props.content && buildChild(props.content)}
        </div>
      </div>
    );
  }
);

Some nice properties of the above are:

• There is separation of API and implementation (existing Flutter design already covers this)
• There is a type-safe interface for reimplementing components in the basic catalog (Flutter design already covers this, though may differ slightly in structure, and it's necessarily more manual because Dart is less dynamic than TS)
• The framework automatically subscribes to all dynamic values (I think we should try to copy this for Flutter - see https://github.com/google/A2UI/blob/main/renderers/web_core/src/v0_9/rendering/generic-binder.ts

Also see Vercel's json-render API which is super neat and similar to the above:

• https://json-render.dev/docs/catalog
• https://json-render.dev/docs/registry