build: update attribution id, add npm badges and keywords

client/web/README.md

@@ -1,6 +1,14 @@
 # Maps Agentic UI Toolkit Web Client Library
 
-This package provides the Web (Lit-based) client library for the Maps Agentic UI Toolkit (MAUI). It includes components and utilities to render A2UI surfaces and communicate with an A2A agent server.
+![Alpha](https://img.shields.io/badge/release-alpha-orange)
+[![Python CI](https://github.com/googlemaps/a2ui/actions/workflows/python-ci.yml/badge.svg)](https://github.com/googlemaps/a2ui/actions/workflows/python-ci.yml)
+[![Web CI](https://github.com/googlemaps/a2ui/actions/workflows/web-ci.yml/badge.svg)](https://github.com/googlemaps/a2ui/actions/workflows/web-ci.yml)
+[![GitHub License](https://img.shields.io/github/license/googlemaps/a2ui?color=blue&v=1)](https://github.com/googlemaps/a2ui/blob/main/LICENSE)
+[![npm](https://img.shields.io/npm/v/@googlemaps/a2ui)](https://npmjs.com/package/@googlemaps/a2ui)
+
+This package provides the Web (Lit-based) client library for the Maps Agentic UI
+Toolkit (MAUI). It includes components and utilities to render A2UI surfaces and
+communicate with an A2A agent server.
 
 Note: This library only works when paired with an Agent that can generate A2UI. See [Agentic UI Toolkit samples](https://github.com/googlemaps-samples/a2ui) for a reference implementation of an A2A Agent.
 

client/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@googlemaps/a2ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Maps Agentic UI Toolkit Library",
   "main": "./dist/src/lit/index.js",
   "types": "./dist/src/lit/index.d.ts",
@@ -56,7 +56,15 @@
   "files": [
     "dist/src"
   ],
-  "keywords": [],
+  "keywords": [
+    "google",
+    "maps",
+    "agentic",
+    "ui",
+    "a2ui",
+    "visualization",
+    "grounding"
+  ],
   "author": "Google",
   "license": "Apache-2.0",
   "repository": {

client/web/src/lit/custom-components/google_map.ts

@@ -14,14 +14,13 @@
  limitations under the License.
  */
 
-import { html, css, nothing, PropertyValues, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "@a2ui/web_core";
-import { z } from 'zod';
-import { ComponentApi, DynamicNumberSchema, DynamicStringSchema } from "@a2ui/web_core/v0_9";
-import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";
+import {A2uiController, A2uiLitElement} from '@a2ui/lit/v0_9';
+import {structuralStyles} from '@a2ui/web_core';
+import {ComponentApi, DynamicNumberSchema, DynamicStringSchema} from '@a2ui/web_core/v0_9';
+import {css, html, nothing, PropertyValues, unsafeCSS} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {z} from 'zod';
 
 const LatLngSchema = z.object({
   lat: DynamicNumberSchema,
@@ -40,6 +39,7 @@ const MapPinSchema = z.object({
   placeId: DynamicStringSchema.optional(),
 }).strict();
 
+/** A2UI GoogleMap interface. */
 export const GoogleMapApi = {
   name: 'GoogleMap',
   schema: z
@@ -91,41 +91,18 @@ declare global {
   }
 }
 
-type A2UIParam<T> = LiteralOrPath<T> | null;
-
-interface LiteralOrPath<T> {
-  path?: string;
-  literal?: T;
-}
-
-// Marker interface for A2UI data
-interface MarkerValue {
-  lat: Primitives.NumberValue;
-  lng: Primitives.NumberValue;
-  label: Primitives.StringValue;
-  placeId: Primitives.StringValue;
-}
-
-// Translated marker interface for use in UI
-interface Marker {
-  lat: number;
-  lng: number;
-  label: string | null;
-}
-
+/** A2UI Custom Component for GoogleMap */
 @customElement("a2ui-googlemap")
 export class GoogleMap extends A2uiLitElement<typeof GoogleMapApi> {
-  @property()
-  accessor heading: Primitives.NumberValue | null = null;
-
-  @query("gmp-map-3d")
-  accessor map3dElement!: HTMLElement & Map3DElement;
+  get map3dElement(): HTMLElement&Map3DElement {
+    return this.renderRoot.querySelector('gmp-map-3d') as HTMLElement &
+        Map3DElement;
+  }
 
   protected createController() {
     return new A2uiController(this, GoogleMapApi);
   }
 
-  #geocoder: google.maps.Geocoder | null = null;
   #markers: HTMLElement[] = [];
   #prevCenter: { lat: number; lng: number } | null = null;
   #prevMarkers: any = null;
@@ -342,7 +319,7 @@ export class GoogleMap extends A2uiLitElement<typeof GoogleMapApi> {
           center="${lat},${lng},0"
           tilt="${tilt}"
           mode="${mode}"
-          max-tilt=${mode === "roadmap" ? "0" : nothing}
+          max-tilt=${mode === 'roadmap' ? '0' : nothing}
           heading="${heading}"
           map-id="2d6e1a27a57efe3c9479f6fc"
           internal-usage-attribution-ids="gmp_web_a2ui_v0.0.2_exp"
@@ -351,13 +328,15 @@ export class GoogleMap extends A2uiLitElement<typeof GoogleMapApi> {
             origin="${route.origin.lat},${route.origin.lng}"
             destination="${route.destination.lat},${route.destination.lng}"
             autofits-camera
+            internal-usage-attribution-ids="gmp_web_a2ui_v0.0.2_exp"
           ></gmp-route-3d>`)}
         </gmp-map-3d>
       </section>
     `;
   }
 }
 
+/** A2UI Definition for GoogleMap component */
 export const A2uiGoogleMap = {
   ...GoogleMapApi,
   tagName: "a2ui-googlemap",

client/web/src/lit/custom-components/place_card.ts

@@ -14,15 +14,13 @@
  limitations under the License.
  */
 
-import { html, css, nothing, unsafeCSS } from "lit";
-import { z } from 'zod'
-import { customElement, property } from "lit/decorators.js";
-
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "@a2ui/web_core";
-import { A2uiController, A2uiLitElement } from "@a2ui/lit/v0_9";
-import { ComponentApi, DynamicStringSchema } from "@a2ui/web_core/v0_9";
+import {A2uiController, A2uiLitElement} from '@a2ui/lit/v0_9';
+import {structuralStyles} from '@a2ui/web_core';
+import {ComponentApi, DynamicStringSchema} from '@a2ui/web_core/v0_9';
+import {css, html, nothing, unsafeCSS} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {z} from 'zod'
 
 
 export const PlaceCardApi = {
@@ -42,11 +40,9 @@ declare global {
   }
 }
 
-@customElement("a2ui-placecard")
+/** A2UI Custom Component for PlaceCard */
+@customElement('a2ui-placecard')
 export class PlaceCard extends A2uiLitElement<typeof PlaceCardApi> {
-
-
-
   protected createController() {
     return new A2uiController(this, PlaceCardApi);
   }
@@ -81,8 +77,11 @@ export class PlaceCard extends A2uiLitElement<typeof PlaceCardApi> {
 
     return html`
       <section style=${styleMap(style)}>
-        <gmp-place-details-compact orientation="horizontal" place="${placeId}">
-          <gmp-place-details-place-request place="${placeId}"></gmp-place-details-place-request>
+        <gmp-place-details-compact orientation="horizontal"
+            place="${placeId}"
+            internal-usage-attribution-ids="gmp_web_a2ui_v0.0.2_exp">
+          <gmp-place-details-place-request place="${placeId}">
+          </gmp-place-details-place-request>
             <gmp-place-content-config>
               <gmp-place-media lightbox-preferred></gmp-place-media>
               <gmp-place-rating></gmp-place-rating>
@@ -99,7 +98,8 @@ export class PlaceCard extends A2uiLitElement<typeof PlaceCardApi> {
   }
 }
 
+/** A2UI Definition for PlaceCard component */
 export const A2uiPlaceCard = {
   ...PlaceCardApi,
   tagName: "a2ui-placecard",
-};
+};