feat(macos): add Canvas A2UI renderer

vendor/a2ui/renderers/lit/src/0.8/core.ts

@@ -0,0 +1,35 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export * as Events from "./events/events.js";
+export * as Types from "./types/types.js";
+export * as Primitives from "./types/primitives.js";
+export * as Styles from "./styles/index.js";
+import * as Guards from "./data/guards.js";
+
+import { create as createSignalA2uiMessageProcessor } from "./data/signal-model-processor.js";
+import { A2uiMessageProcessor } from "./data/model-processor.js";
+import A2UIClientEventMessage from "./schemas/server_to_client_with_standard_catalog.json" with { type: "json" };
+
+export const Data = {
+  createSignalA2uiMessageProcessor,
+  A2uiMessageProcessor,
+  Guards,
+};
+
+export const Schemas = {
+  A2UIClientEventMessage,
+};

vendor/a2ui/renderers/lit/src/0.8/data/guards.ts

@@ -0,0 +1,236 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { BooleanValue, NumberValue, StringValue } from "../types/primitives";
+import {
+  AnyComponentNode,
+  ComponentArrayReference,
+  ResolvedAudioPlayer,
+  ResolvedButton,
+  ResolvedCard,
+  ResolvedCheckbox,
+  ResolvedColumn,
+  ResolvedDateTimeInput,
+  ResolvedDivider,
+  ResolvedIcon,
+  ResolvedImage,
+  ResolvedList,
+  ResolvedModal,
+  ResolvedMultipleChoice,
+  ResolvedRow,
+  ResolvedSlider,
+  ResolvedTabItem,
+  ResolvedTabs,
+  ResolvedText,
+  ResolvedTextField,
+  ResolvedVideo,
+  ValueMap,
+} from "../types/types";
+
+export function isValueMap(value: unknown): value is ValueMap {
+  return isObject(value) && "key" in value;
+}
+
+export function isPath(key: string, value: unknown): value is string {
+  return key === "path" && typeof value === "string";
+}
+
+export function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function isComponentArrayReference(
+  value: unknown
+): value is ComponentArrayReference {
+  if (!isObject(value)) return false;
+  return "explicitList" in value || "template" in value;
+}
+
+function isStringValue(value: unknown): value is StringValue {
+  return (
+    isObject(value) &&
+    ("path" in value ||
+      ("literal" in value && typeof value.literal === "string") ||
+      "literalString" in value)
+  );
+}
+
+function isNumberValue(value: unknown): value is NumberValue {
+  return (
+    isObject(value) &&
+    ("path" in value ||
+      ("literal" in value && typeof value.literal === "number") ||
+      "literalNumber" in value)
+  );
+}
+
+function isBooleanValue(value: unknown): value is BooleanValue {
+  return (
+    isObject(value) &&
+    ("path" in value ||
+      ("literal" in value && typeof value.literal === "boolean") ||
+      "literalBoolean" in value)
+  );
+}
+
+function isAnyComponentNode(value: unknown): value is AnyComponentNode {
+  if (!isObject(value)) return false;
+  const hasBaseKeys = "id" in value && "type" in value && "properties" in value;
+  if (!hasBaseKeys) return false;
+
+  return true;
+}
+
+export function isResolvedAudioPlayer(
+  props: unknown
+): props is ResolvedAudioPlayer {
+  return isObject(props) && "url" in props && isStringValue(props.url);
+}
+
+export function isResolvedButton(props: unknown): props is ResolvedButton {
+  return (
+    isObject(props) &&
+    "child" in props &&
+    isAnyComponentNode(props.child) &&
+    "action" in props
+  );
+}
+
+export function isResolvedCard(props: unknown): props is ResolvedCard {
+  if (!isObject(props)) return false;
+  if (!("child" in props)) {
+    if (!("children" in props)) {
+      return false;
+    } else {
+      return (
+        Array.isArray(props.children) &&
+        props.children.every(isAnyComponentNode)
+      );
+    }
+  }
+
+  return isAnyComponentNode(props.child);
+}
+
+export function isResolvedCheckbox(props: unknown): props is ResolvedCheckbox {
+  return (
+    isObject(props) &&
+    "label" in props &&
+    isStringValue(props.label) &&
+    "value" in props &&
+    isBooleanValue(props.value)
+  );
+}
+
+export function isResolvedColumn(props: unknown): props is ResolvedColumn {
+  return (
+    isObject(props) &&
+    "children" in props &&
+    Array.isArray(props.children) &&
+    props.children.every(isAnyComponentNode)
+  );
+}
+
+export function isResolvedDateTimeInput(
+  props: unknown
+): props is ResolvedDateTimeInput {
+  return isObject(props) && "value" in props && isStringValue(props.value);
+}
+
+export function isResolvedDivider(props: unknown): props is ResolvedDivider {
+  // Dividers can have all optional properties, so just checking if
+  // it's an object is enough.
+  return isObject(props);
+}
+
+export function isResolvedImage(props: unknown): props is ResolvedImage {
+  return isObject(props) && "url" in props && isStringValue(props.url);
+}
+
+export function isResolvedIcon(props: unknown): props is ResolvedIcon {
+  return isObject(props) && "name" in props && isStringValue(props.name);
+}
+
+export function isResolvedList(props: unknown): props is ResolvedList {
+  return (
+    isObject(props) &&
+    "children" in props &&
+    Array.isArray(props.children) &&
+    props.children.every(isAnyComponentNode)
+  );
+}
+
+export function isResolvedModal(props: unknown): props is ResolvedModal {
+  return (
+    isObject(props) &&
+    "entryPointChild" in props &&
+    isAnyComponentNode(props.entryPointChild) &&
+    "contentChild" in props &&
+    isAnyComponentNode(props.contentChild)
+  );
+}
+
+export function isResolvedMultipleChoice(
+  props: unknown
+): props is ResolvedMultipleChoice {
+  return isObject(props) && "selections" in props;
+}
+
+export function isResolvedRow(props: unknown): props is ResolvedRow {
+  return (
+    isObject(props) &&
+    "children" in props &&
+    Array.isArray(props.children) &&
+    props.children.every(isAnyComponentNode)
+  );
+}
+
+export function isResolvedSlider(props: unknown): props is ResolvedSlider {
+  return isObject(props) && "value" in props && isNumberValue(props.value);
+}
+
+function isResolvedTabItem(item: unknown): item is ResolvedTabItem {
+  return (
+    isObject(item) &&
+    "title" in item &&
+    isStringValue(item.title) &&
+    "child" in item &&
+    isAnyComponentNode(item.child)
+  );
+}
+
+export function isResolvedTabs(props: unknown): props is ResolvedTabs {
+  return (
+    isObject(props) &&
+    "tabItems" in props &&
+    Array.isArray(props.tabItems) &&
+    props.tabItems.every(isResolvedTabItem)
+  );
+}
+
+export function isResolvedText(props: unknown): props is ResolvedText {
+  return isObject(props) && "text" in props && isStringValue(props.text);
+}
+
+export function isResolvedTextField(
+  props: unknown
+): props is ResolvedTextField {
+  return isObject(props) && "label" in props && isStringValue(props.label);
+}
+
+export function isResolvedVideo(props: unknown): props is ResolvedVideo {
+  return isObject(props) && "url" in props && isStringValue(props.url);
+}

vendor/a2ui/renderers/lit/src/0.8/data/model-processor.ts

@@ -0,0 +1,855 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import {
+  ServerToClientMessage,
+  AnyComponentNode,
+  BeginRenderingMessage,
+  DataArray,
+  DataMap,
+  DataModelUpdate,
+  DataValue,
+  DeleteSurfaceMessage,
+  ResolvedMap,
+  ResolvedValue,
+  Surface,
+  SurfaceID,
+  SurfaceUpdateMessage,
+  MessageProcessor,
+  ValueMap,
+  DataObject,
+} from "../types/types";
+import {
+  isComponentArrayReference,
+  isObject,
+  isPath,
+  isResolvedAudioPlayer,
+  isResolvedButton,
+  isResolvedCard,
+  isResolvedCheckbox,
+  isResolvedColumn,
+  isResolvedDateTimeInput,
+  isResolvedDivider,
+  isResolvedIcon,
+  isResolvedImage,
+  isResolvedList,
+  isResolvedModal,
+  isResolvedMultipleChoice,
+  isResolvedRow,
+  isResolvedSlider,
+  isResolvedTabs,
+  isResolvedText,
+  isResolvedTextField,
+  isResolvedVideo,
+  isValueMap,
+} from "./guards.js";
+
+/**
+ * Processes and consolidates A2UIProtocolMessage objects into a structured,
+ * hierarchical model of UI surfaces.
+ */
+export class A2uiMessageProcessor implements MessageProcessor {
+  static readonly DEFAULT_SURFACE_ID = "@default";
+
+  #mapCtor: MapConstructor = Map;
+  #arrayCtor: ArrayConstructor = Array;
+  #setCtor: SetConstructor = Set;
+  #objCtor: ObjectConstructor = Object;
+  #surfaces: Map<SurfaceID, Surface>;
+
+  constructor(
+    readonly opts: {
+      mapCtor: MapConstructor;
+      arrayCtor: ArrayConstructor;
+      setCtor: SetConstructor;
+      objCtor: ObjectConstructor;
+    } = { mapCtor: Map, arrayCtor: Array, setCtor: Set, objCtor: Object }
+  ) {
+    this.#arrayCtor = opts.arrayCtor;
+    this.#mapCtor = opts.mapCtor;
+    this.#setCtor = opts.setCtor;
+    this.#objCtor = opts.objCtor;
+
+    this.#surfaces = new opts.mapCtor();
+  }
+
+  getSurfaces(): ReadonlyMap<string, Surface> {
+    return this.#surfaces;
+  }
+
+  clearSurfaces() {
+    this.#surfaces.clear();
+  }
+
+  processMessages(messages: ServerToClientMessage[]): void {
+    for (const message of messages) {
+      if (message.beginRendering) {
+        this.#handleBeginRendering(
+          message.beginRendering,
+          message.beginRendering.surfaceId
+        );
+      }
+
+      if (message.surfaceUpdate) {
+        this.#handleSurfaceUpdate(
+          message.surfaceUpdate,
+          message.surfaceUpdate.surfaceId
+        );
+      }
+
+      if (message.dataModelUpdate) {
+        this.#handleDataModelUpdate(
+          message.dataModelUpdate,
+          message.dataModelUpdate.surfaceId
+        );
+      }
+
+      if (message.deleteSurface) {
+        this.#handleDeleteSurface(message.deleteSurface);
+      }
+    }
+  }
+
+  /**
+   * Retrieves the data for a given component node and a relative path string.
+   * This correctly handles the special `.` path, which refers to the node's
+   * own data context.
+   */
+  getData(
+    node: AnyComponentNode,
+    relativePath: string,
+    surfaceId = A2uiMessageProcessor.DEFAULT_SURFACE_ID
+  ): DataValue | null {
+    const surface = this.#getOrCreateSurface(surfaceId);
+    if (!surface) return null;
+
+    let finalPath: string;
+
+    // The special `.` path means the final path is the node's data context
+    // path and so we return the dataContextPath as-is.
+    if (relativePath === "." || relativePath === "") {
+      finalPath = node.dataContextPath ?? "/";
+    } else {
+      // For all other paths, resolve them against the node's context.
+      finalPath = this.resolvePath(relativePath, node.dataContextPath);
+    }
+
+    return this.#getDataByPath(surface.dataModel, finalPath);
+  }
+
+  setData(
+    node: AnyComponentNode | null,
+    relativePath: string,
+    value: DataValue,
+    surfaceId = A2uiMessageProcessor.DEFAULT_SURFACE_ID
+  ): void {
+    if (!node) {
+      console.warn("No component node set");
+      return;
+    }
+
+    const surface = this.#getOrCreateSurface(surfaceId);
+    if (!surface) return;
+
+    let finalPath: string;
+
+    // The special `.` path means the final path is the node's data context
+    // path and so we return the dataContextPath as-is.
+    if (relativePath === "." || relativePath === "") {
+      finalPath = node.dataContextPath ?? "/";
+    } else {
+      // For all other paths, resolve them against the node's context.
+      finalPath = this.resolvePath(relativePath, node.dataContextPath);
+    }
+
+    this.#setDataByPath(surface.dataModel, finalPath, value);
+  }
+
+  resolvePath(path: string, dataContextPath?: string): string {
+    // If the path is absolute, it overrides any context.
+    if (path.startsWith("/")) {
+      return path;
+    }
+
+    if (dataContextPath && dataContextPath !== "/") {
+      // Ensure there's exactly one slash between the context and the path.
+      return dataContextPath.endsWith("/")
+        ? `${dataContextPath}${path}`
+        : `${dataContextPath}/${path}`;
+    }
+
+    // Fallback for no context or root context: make it an absolute path.
+    return `/${path}`;
+  }
+
+  #parseIfJsonString(value: DataValue): DataValue {
+    if (typeof value !== "string") {
+      return value;
+    }
+
+    const trimmedValue = value.trim();
+    if (
+      (trimmedValue.startsWith("{") && trimmedValue.endsWith("}")) ||
+      (trimmedValue.startsWith("[") && trimmedValue.endsWith("]"))
+    ) {
+      try {
+        // It looks like JSON, attempt to parse it.
+        return JSON.parse(value);
+      } catch (e) {
+        // It looked like JSON but wasn't. Keep the original string.
+        console.warn(
+          `Failed to parse potential JSON string: "${value.substring(
+            0,
+            50
+          )}..."`,
+          e
+        );
+        return value; // Return original string
+      }
+    }
+
+    // It's a string, but not JSON-like.
+    return value;
+  }
+
+  /**
+   * Converts a specific array format [{key: "...", value_string: "..."}, ...]
+   * into a standard Map. It also attempts to parse any string values that
+   * appear to be stringified JSON.
+   */
+  #convertKeyValueArrayToMap(arr: DataArray): DataMap {
+    const map = new this.#mapCtor<string, DataValue>();
+    for (const item of arr) {
+      if (!isObject(item) || !("key" in item)) continue;
+
+      const key = item.key as string;
+
+      // Find the value, which is in a property prefixed with "value".
+      const valueKey = this.#findValueKey(item);
+      if (!valueKey) continue;
+
+      let value: DataValue = item[valueKey];
+      // It's a valueMap. We must recursively convert it.
+      if (valueKey === "valueMap" && Array.isArray(value)) {
+        value = this.#convertKeyValueArrayToMap(value);
+      } else if (typeof value === "string") {
+        value = this.#parseIfJsonString(value);
+      }
+
+      this.#setDataByPath(map, key, value);
+    }
+    return map;
+  }
+
+  #setDataByPath(root: DataMap, path: string, value: DataValue): void {
+    // Check if the incoming value is the special key-value array format.
+    if (
+      Array.isArray(value) &&
+      (value.length === 0 || (isObject(value[0]) && "key" in value[0]))
+    ) {
+      // Check for "set primitive at path" convention:
+      // path: "/messages/123", contents: [{ key: ".", valueString: "hi" }]
+      if (value.length === 1 && isObject(value[0]) && value[0].key === ".") {
+        const item = value[0];
+        const valueKey = this.#findValueKey(item);
+
+        if (valueKey) {
+          // Extract the primitive value
+          value = item[valueKey];
+
+          // We must still process this value in case it's a valueMap or
+          // a JSON string.
+          if (valueKey === "valueMap" && Array.isArray(value)) {
+            value = this.#convertKeyValueArrayToMap(value);
+          } else if (typeof value === "string") {
+            value = this.#parseIfJsonString(value);
+          }
+          // Now, `value` is the primitive (e.g., "hi"), and we continue
+          // the function.
+        } else {
+          // Malformed, but fall back to existing behavior.
+          value = this.#convertKeyValueArrayToMap(value);
+        }
+      } else {
+        value = this.#convertKeyValueArrayToMap(value);
+      }
+    }
+
+    const segments = this.#normalizePath(path)
+      .split("/")
+      .filter((s) => s);
+    if (segments.length === 0) {
+      // Root data can either be a Map or an Object. If we receive an Object,
+      // however, we will normalize it to a proper Map.
+      if (value instanceof Map || isObject(value)) {
+        // Normalize an Object to a Map.
+        if (!(value instanceof Map) && isObject(value)) {
+          value = new this.#mapCtor(Object.entries(value));
+        }
+
+        root.clear();
+        for (const [key, v] of value.entries()) {
+          root.set(key, v);
+        }
+      } else {
+        console.error("Cannot set root of DataModel to a non-Map value.");
+      }
+      return;
+    }
+
+    let current: DataMap | DataArray = root;
+    for (let i = 0; i < segments.length - 1; i++) {
+      const segment = segments[i];
+      let target: DataValue | undefined;
+
+      if (current instanceof Map) {
+        target = current.get(segment);
+      } else if (Array.isArray(current) && /^\d+$/.test(segment)) {
+        target = current[parseInt(segment, 10)];
+      }
+
+      if (
+        target === undefined ||
+        typeof target !== "object" ||
+        target === null
+      ) {
+        target = new this.#mapCtor();
+        if (current instanceof this.#mapCtor) {
+          current.set(segment, target);
+        } else if (Array.isArray(current)) {
+          current[parseInt(segment, 10)] = target;
+        }
+      }
+      current = target as DataMap | DataArray;
+    }
+
+    const finalSegment = segments[segments.length - 1];
+    const storedValue = value;
+    if (current instanceof this.#mapCtor) {
+      current.set(finalSegment, storedValue);
+    } else if (Array.isArray(current) && /^\d+$/.test(finalSegment)) {
+      current[parseInt(finalSegment, 10)] = storedValue;
+    }
+  }
+
+  /**
+   * Normalizes a path string into a consistent, slash-delimited format.
+   * Converts bracket notation and dot notation in a two-pass.
+   * e.g., "bookRecommendations[0].title" -> "/bookRecommendations/0/title"
+   * e.g., "book.0.title" -> "/book/0/title"
+   */
+  #normalizePath(path: string): string {
+    // 1. Replace all bracket accessors `[index]` with dot accessors `.index`
+    const dotPath = path.replace(/\[(\d+)\]/g, ".$1");
+
+    // 2. Split by dots
+    const segments = dotPath.split(".");
+
+    // 3. Join with slashes and ensure it starts with a slash
+    return "/" + segments.filter((s) => s.length > 0).join("/");
+  }
+
+  #getDataByPath(root: DataMap, path: string): DataValue | null {
+    const segments = this.#normalizePath(path)
+      .split("/")
+      .filter((s) => s);
+
+    let current: DataValue = root;
+    for (const segment of segments) {
+      if (current === undefined || current === null) return null;
+
+      if (current instanceof Map) {
+        current = current.get(segment) as DataMap;
+      } else if (Array.isArray(current) && /^\d+$/.test(segment)) {
+        current = current[parseInt(segment, 10)];
+      } else if (isObject(current)) {
+        current = current[segment];
+      } else {
+        // If we need to traverse deeper but `current` is a primitive, the path is invalid.
+        return null;
+      }
+    }
+    return current;
+  }
+
+  #getOrCreateSurface(surfaceId: string): Surface {
+    let surface: Surface | undefined = this.#surfaces.get(surfaceId);
+    if (!surface) {
+      surface = new this.#objCtor({
+        rootComponentId: null,
+        componentTree: null,
+        dataModel: new this.#mapCtor(),
+        components: new this.#mapCtor(),
+        styles: new this.#objCtor(),
+      }) as Surface;
+
+      this.#surfaces.set(surfaceId, surface);
+    }
+
+    return surface;
+  }
+
+  #handleBeginRendering(
+    message: BeginRenderingMessage,
+    surfaceId: SurfaceID
+  ): void {
+    const surface = this.#getOrCreateSurface(surfaceId);
+    surface.rootComponentId = message.root;
+    surface.styles = message.styles ?? {};
+    this.#rebuildComponentTree(surface);
+  }
+
+  #handleSurfaceUpdate(
+    message: SurfaceUpdateMessage,
+    surfaceId: SurfaceID
+  ): void {
+    const surface = this.#getOrCreateSurface(surfaceId);
+    for (const component of message.components) {
+      surface.components.set(component.id, component);
+    }
+    this.#rebuildComponentTree(surface);
+  }
+
+  #handleDataModelUpdate(message: DataModelUpdate, surfaceId: SurfaceID): void {
+    const surface = this.#getOrCreateSurface(surfaceId);
+    const path = message.path ?? "/";
+    this.#setDataByPath(
+      surface.dataModel,
+      path,
+      message.contents
+    );
+    this.#rebuildComponentTree(surface);
+  }
+
+  #handleDeleteSurface(message: DeleteSurfaceMessage): void {
+    this.#surfaces.delete(message.surfaceId);
+  }
+
+  /**
+   * Starts at the root component of the surface and builds out the tree
+   * recursively. This process involves resolving all properties of the child
+   * components, and expanding on any explicit children lists or templates
+   * found in the structure.
+   *
+   * @param surface The surface to be built.
+   */
+  #rebuildComponentTree(surface: Surface): void {
+    if (!surface.rootComponentId) {
+      surface.componentTree = null;
+      return;
+    }
+
+    // Track visited nodes to avoid circular references.
+    const visited = new this.#setCtor<string>();
+    surface.componentTree = this.#buildNodeRecursive(
+      surface.rootComponentId,
+      surface,
+      visited,
+      "/",
+      "" // Initial idSuffix.
+    );
+  }
+
+  /** Finds a value key in a map. */
+  #findValueKey(value: Record<string, unknown>): string | undefined {
+    return Object.keys(value).find((k) => k.startsWith("value"));
+  }
+
+  /**
+   * Builds out the nodes recursively.
+   */
+  #buildNodeRecursive(
+    baseComponentId: string,
+    surface: Surface,
+    visited: Set<string>,
+    dataContextPath: string,
+    idSuffix = ""
+  ): AnyComponentNode | null {
+    const fullId = `${baseComponentId}${idSuffix}`; // Construct the full ID
+    const { components } = surface;
+
+    if (!components.has(baseComponentId)) {
+      return null;
+    }
+
+    if (visited.has(fullId)) {
+      throw new Error(`Circular dependency for component "${fullId}".`);
+    }
+
+    visited.add(fullId);
+
+    const componentData = components.get(baseComponentId)!;
+    const componentProps = componentData.component ?? {};
+    const componentType = Object.keys(componentProps)[0];
+    const unresolvedProperties =
+      componentProps[componentType as keyof typeof componentProps];
+
+    // Manually build the resolvedProperties object by resolving each value in
+    // the component's properties.
+    const resolvedProperties: ResolvedMap = new this.#objCtor() as ResolvedMap;
+    if (isObject(unresolvedProperties)) {
+      for (const [key, value] of Object.entries(unresolvedProperties)) {
+        resolvedProperties[key] = this.#resolvePropertyValue(
+          value,
+          surface,
+          visited,
+          dataContextPath,
+          idSuffix
+        );
+      }
+    }
+
+    visited.delete(fullId);
+
+    // Now that we have the resolved properties in place we can go ahead and
+    // ensure that they meet expectations in terms of types and so forth,
+    // casting them into the specific shape for usage.
+    const baseNode = {
+      id: fullId,
+      dataContextPath,
+      weight: componentData.weight ?? "initial",
+    };
+    switch (componentType) {
+      case "Text":
+        if (!isResolvedText(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Text",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Image":
+        if (!isResolvedImage(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Image",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Icon":
+        if (!isResolvedIcon(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Icon",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Video":
+        if (!isResolvedVideo(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Video",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "AudioPlayer":
+        if (!isResolvedAudioPlayer(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "AudioPlayer",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Row":
+        if (!isResolvedRow(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Row",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Column":
+        if (!isResolvedColumn(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Column",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "List":
+        if (!isResolvedList(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "List",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Card":
+        if (!isResolvedCard(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Card",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Tabs":
+        if (!isResolvedTabs(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Tabs",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Divider":
+        if (!isResolvedDivider(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Divider",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Modal":
+        if (!isResolvedModal(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Modal",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Button":
+        if (!isResolvedButton(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Button",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "CheckBox":
+        if (!isResolvedCheckbox(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "CheckBox",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "TextField":
+        if (!isResolvedTextField(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "TextField",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "DateTimeInput":
+        if (!isResolvedDateTimeInput(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "DateTimeInput",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "MultipleChoice":
+        if (!isResolvedMultipleChoice(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "MultipleChoice",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      case "Slider":
+        if (!isResolvedSlider(resolvedProperties)) {
+          throw new Error(`Invalid data; expected ${componentType}`);
+        }
+        return new this.#objCtor({
+          ...baseNode,
+          type: "Slider",
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+
+      default:
+        // Catch-all for other custom component types.
+        return new this.#objCtor({
+          ...baseNode,
+          type: componentType,
+          properties: resolvedProperties,
+        }) as AnyComponentNode;
+    }
+  }
+
+  /**
+   * Recursively resolves an individual property value. If a property indicates
+   * a child node (a string that matches a component ID), an explicitList of
+   * children, or a template, these will be built out here.
+   */
+  #resolvePropertyValue(
+    value: unknown,
+    surface: Surface,
+    visited: Set<string>,
+    dataContextPath: string,
+    idSuffix = ""
+  ): ResolvedValue {
+    // 1. If it's a string that matches a component ID, build that node.
+    if (typeof value === "string" && surface.components.has(value)) {
+      return this.#buildNodeRecursive(
+        value,
+        surface,
+        visited,
+        dataContextPath,
+        idSuffix
+      );
+    }
+
+    // 2. If it's a ComponentArrayReference (e.g., a `children` property),
+    //    resolve the list and return an array of nodes.
+    if (isComponentArrayReference(value)) {
+      if (value.explicitList) {
+        return value.explicitList.map((id) =>
+          this.#buildNodeRecursive(
+            id,
+            surface,
+            visited,
+            dataContextPath,
+            idSuffix
+          )
+        );
+      }
+
+      if (value.template) {
+        const fullDataPath = this.resolvePath(
+          value.template.dataBinding,
+          dataContextPath
+        );
+        const data = this.#getDataByPath(surface.dataModel, fullDataPath);
+
+        const template = value.template;
+        // Handle Array data.
+        if (Array.isArray(data)) {
+          return data.map((_, index) => {
+            // Create a synthetic ID based on the template ID and the
+            // full index path of the data (e.g., template-id:0:1)
+            const parentIndices = dataContextPath
+              .split("/")
+              .filter((segment) => /^\d+$/.test(segment));
+
+            const newIndices = [...parentIndices, index];
+            const newSuffix = `:${newIndices.join(":")}`;
+            const childDataContextPath = `${fullDataPath}/${index}`;
+
+            return this.#buildNodeRecursive(
+              template.componentId, // baseId
+              surface,
+              visited,
+              childDataContextPath,
+              newSuffix // new suffix
+            );
+          });
+        }
+
+        // Handle Map data.
+        const mapCtor = this.#mapCtor;
+        if (data instanceof mapCtor) {
+          return Array.from(data.keys(), (key) => {
+            const newSuffix = `:${key}`;
+            const childDataContextPath = `${fullDataPath}/${key}`;
+
+            return this.#buildNodeRecursive(
+              template.componentId, // baseId
+              surface,
+              visited,
+              childDataContextPath,
+              newSuffix // new suffix
+            );
+          });
+        }
+
+        // Return empty array if the data is not ready yet.
+        return new this.#arrayCtor();
+      }
+    }
+
+    // 3. If it's a plain array, resolve each of its items.
+    if (Array.isArray(value)) {
+      return value.map((item) =>
+        this.#resolvePropertyValue(
+          item,
+          surface,
+          visited,
+          dataContextPath,
+          idSuffix
+        )
+      );
+    }
+
+    // 4. If it's a plain object, resolve each of its properties.
+    if (isObject(value)) {
+      const newObj: ResolvedMap = new this.#objCtor() as ResolvedMap;
+      for (const [key, propValue] of Object.entries(value)) {
+        // Special case for paths. Here we might get /item/ or ./ on the front
+        // of the path which isn't what we want. In this case we check the
+        // dataContextPath and if 1) it's not the default and 2) we also see the
+        // path beginning with /item/ or ./we trim it.
+        let propertyValue = propValue;
+        if (isPath(key, propValue) && dataContextPath !== "/") {
+          propertyValue = propValue
+            .replace(/^\.?\/item/, "")
+            .replace(/^\.?\/text/, "")
+            .replace(/^\.?\/label/, "")
+            .replace(/^\.?\//, "");
+          newObj[key] = propertyValue as ResolvedValue;
+          continue;
+        }
+
+        newObj[key] = this.#resolvePropertyValue(
+          propertyValue,
+          surface,
+          visited,
+          dataContextPath,
+          idSuffix
+        );
+      }
+      return newObj;
+    }
+
+    // 5. Otherwise, it's a primitive value.
+    return value as ResolvedValue;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/data/signal-model-processor.ts

@@ -0,0 +1,31 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { A2uiMessageProcessor } from "./model-processor.js";
+
+import { SignalArray } from "signal-utils/array";
+import { SignalMap } from "signal-utils/map";
+import { SignalObject } from "signal-utils/object";
+import { SignalSet } from "signal-utils/set";
+
+export function create() {
+  return new A2uiMessageProcessor({
+    arrayCtor: SignalArray as unknown as ArrayConstructor,
+    mapCtor: SignalMap as unknown as MapConstructor,
+    objCtor: SignalObject as unknown as ObjectConstructor,
+    setCtor: SignalSet as unknown as SetConstructor,
+  });
+}

vendor/a2ui/renderers/lit/src/0.8/events/a2ui.ts

@@ -0,0 +1,28 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Action } from "../types/components.js";
+import { AnyComponentNode } from "../types/types.js";
+import { BaseEventDetail } from "./base.js";
+
+type Namespace = "a2ui";
+
+export interface A2UIAction extends BaseEventDetail<`${Namespace}.action`> {
+  readonly action: Action;
+  readonly dataContextPath: string;
+  readonly sourceComponentId: string;
+  readonly sourceComponent: AnyComponentNode | null;
+}

vendor/a2ui/renderers/lit/src/0.8/events/base.ts

@@ -0,0 +1,19 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export interface BaseEventDetail<EventType extends string> {
+  readonly eventType: EventType;
+}

vendor/a2ui/renderers/lit/src/0.8/events/events.ts

@@ -0,0 +1,53 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import type * as A2UI from "./a2ui.js";
+import { BaseEventDetail } from "./base.js";
+
+const eventInit = {
+  bubbles: true,
+  cancelable: true,
+  composed: true,
+};
+
+type EnforceEventTypeMatch<T extends Record<string, BaseEventDetail<string>>> =
+  {
+    [K in keyof T]: T[K] extends BaseEventDetail<infer EventType>
+      ? EventType extends K
+        ? T[K]
+        : never
+      : never;
+  };
+
+export type StateEventDetailMap = EnforceEventTypeMatch<{
+  "a2ui.action": A2UI.A2UIAction;
+}>;
+
+export class StateEvent<
+  T extends keyof StateEventDetailMap
+> extends CustomEvent<StateEventDetailMap[T]> {
+  static eventName = "a2uiaction";
+
+  constructor(readonly payload: StateEventDetailMap[T]) {
+    super(StateEvent.eventName, { detail: payload, ...eventInit });
+  }
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    a2uiaction: StateEvent<"a2ui.action">;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/index.ts

@@ -0,0 +1,18 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export * from "./core.js";
+export * as UI from "./ui/ui.js";

vendor/a2ui/renderers/lit/src/0.8/schemas/.gitignore

@@ -0,0 +1,4 @@
+# Copied schema files
+# (needed for the build but otherwise redundant)
+*.json
+!server_to_client_with_standard_catalog.json

vendor/a2ui/renderers/lit/src/0.8/schemas/server_to_client_with_standard_catalog.json

@@ -0,0 +1,827 @@
+{
+  "title": "A2UI Message Schema",
+  "description": "Describes a JSON payload for an A2UI (Agent to UI) message, which is used to dynamically construct and update user interfaces. A message MUST contain exactly ONE of the action properties: 'beginRendering', 'surfaceUpdate', 'dataModelUpdate', or 'deleteSurface'.",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "beginRendering": {
+      "type": "object",
+      "description": "Signals the client to begin rendering a surface with a root component and specific styles.",
+      "additionalProperties": false,
+      "properties": {
+        "surfaceId": {
+          "type": "string",
+          "description": "The unique identifier for the UI surface to be rendered."
+        },
+        "root": {
+          "type": "string",
+          "description": "The ID of the root component to render."
+        },
+        "styles": {
+          "type": "object",
+          "description": "Styling information for the UI.",
+          "additionalProperties": false,
+          "properties": {
+            "font": {
+              "type": "string",
+              "description": "The primary font for the UI."
+            },
+            "primaryColor": {
+              "type": "string",
+              "description": "The primary UI color as a hexadecimal code (e.g., '#00BFFF').",
+              "pattern": "^#[0-9a-fA-F]{6}$"
+            }
+          }
+        }
+      },
+      "required": ["root", "surfaceId"]
+    },
+    "surfaceUpdate": {
+      "type": "object",
+      "description": "Updates a surface with a new set of components.",
+      "additionalProperties": false,
+      "properties": {
+        "surfaceId": {
+          "type": "string",
+          "description": "The unique identifier for the UI surface to be updated. If you are adding a new surface this *must* be a new, unique identified that has never been used for any existing surfaces shown."
+        },
+        "components": {
+          "type": "array",
+          "description": "A list containing all UI components for the surface.",
+          "minItems": 1,
+          "items": {
+            "type": "object",
+            "description": "Represents a *single* component in a UI widget tree. This component could be one of many supported types.",
+            "additionalProperties": false,
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "The unique identifier for this component."
+              },
+              "weight": {
+                "type": "number",
+                "description": "The relative weight of this component within a Row or Column. This corresponds to the CSS 'flex-grow' property. Note: this may ONLY be set when the component is a direct descendant of a Row or Column."
+              },
+              "component": {
+                "type": "object",
+                "description": "A wrapper object that MUST contain exactly one key, which is the name of the component type (e.g., 'Heading'). The value is an object containing the properties for that specific component.",
+                "additionalProperties": false,
+                "properties": {
+                  "Text": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "text": {
+                        "type": "object",
+                        "description": "The text content to display. This can be a literal string or a reference to a value in the data model ('path', e.g., '/doc/title'). While simple Markdown formatting is supported (i.e. without HTML, images, or links), utilizing dedicated UI components is generally preferred for a richer and more structured presentation.",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "usageHint": {
+                        "type": "string",
+                        "description": "A hint for the base text style. One of:\n- `h1`: Largest heading.\n- `h2`: Second largest heading.\n- `h3`: Third largest heading.\n- `h4`: Fourth largest heading.\n- `h5`: Fifth largest heading.\n- `caption`: Small text for captions.\n- `body`: Standard body text.",
+                        "enum": [
+                          "h1",
+                          "h2",
+                          "h3",
+                          "h4",
+                          "h5",
+                          "caption",
+                          "body"
+                        ]
+                      }
+                    },
+                    "required": ["text"]
+                  },
+                  "Image": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "url": {
+                        "type": "object",
+                        "description": "The URL of the image to display. This can be a literal string ('literal') or a reference to a value in the data model ('path', e.g. '/thumbnail/url').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "fit": {
+                        "type": "string",
+                        "description": "Specifies how the image should be resized to fit its container. This corresponds to the CSS 'object-fit' property.",
+                        "enum": [
+                          "contain",
+                          "cover",
+                          "fill",
+                          "none",
+                          "scale-down"
+                        ]
+                      },
+                      "usageHint": {
+                        "type": "string",
+                        "description": "A hint for the image size and style. One of:\n- `icon`: Small square icon.\n- `avatar`: Circular avatar image.\n- `smallFeature`: Small feature image.\n- `mediumFeature`: Medium feature image.\n- `largeFeature`: Large feature image.\n- `header`: Full-width, full bleed, header image.",
+                        "enum": [
+                          "icon",
+                          "avatar",
+                          "smallFeature",
+                          "mediumFeature",
+                          "largeFeature",
+                          "header"
+                        ]
+                      }
+                    },
+                    "required": ["url"]
+                  },
+                  "Icon": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "name": {
+                        "type": "object",
+                        "description": "The name of the icon to display. This can be a literal string or a reference to a value in the data model ('path', e.g. '/form/submit').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string",
+                            "enum": [
+                              "accountCircle",
+                              "add",
+                              "arrowBack",
+                              "arrowForward",
+                              "attachFile",
+                              "calendarToday",
+                              "call",
+                              "camera",
+                              "check",
+                              "close",
+                              "delete",
+                              "download",
+                              "edit",
+                              "event",
+                              "error",
+                              "favorite",
+                              "favoriteOff",
+                              "folder",
+                              "help",
+                              "home",
+                              "info",
+                              "locationOn",
+                              "lock",
+                              "lockOpen",
+                              "mail",
+                              "menu",
+                              "moreVert",
+                              "moreHoriz",
+                              "notificationsOff",
+                              "notifications",
+                              "payment",
+                              "person",
+                              "phone",
+                              "photo",
+                              "print",
+                              "refresh",
+                              "search",
+                              "send",
+                              "settings",
+                              "share",
+                              "shoppingCart",
+                              "star",
+                              "starHalf",
+                              "starOff",
+                              "upload",
+                              "visibility",
+                              "visibilityOff",
+                              "warning"
+                            ]
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      }
+                    },
+                    "required": ["name"]
+                  },
+                  "Video": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "url": {
+                        "type": "object",
+                        "description": "The URL of the video to display. This can be a literal string or a reference to a value in the data model ('path', e.g. '/video/url').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      }
+                    },
+                    "required": ["url"]
+                  },
+                  "AudioPlayer": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "url": {
+                        "type": "object",
+                        "description": "The URL of the audio to be played. This can be a literal string ('literal') or a reference to a value in the data model ('path', e.g. '/song/url').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "description": {
+                        "type": "object",
+                        "description": "A description of the audio, such as a title or summary. This can be a literal string or a reference to a value in the data model ('path', e.g. '/song/title').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      }
+                    },
+                    "required": ["url"]
+                  },
+                  "Row": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "children": {
+                        "type": "object",
+                        "description": "Defines the children. Use 'explicitList' for a fixed set of children, or 'template' to generate children from a data list.",
+                        "additionalProperties": false,
+                        "properties": {
+                          "explicitList": {
+                            "type": "array",
+                            "items": {
+                              "type": "string"
+                            }
+                          },
+                          "template": {
+                            "type": "object",
+                            "description": "A template for generating a dynamic list of children from a data model list. `componentId` is the component to use as a template, and `dataBinding` is the path to the map of components in the data model. Values in the map will define the list of children.",
+                            "additionalProperties": false,
+                            "properties": {
+                              "componentId": {
+                                "type": "string"
+                              },
+                              "dataBinding": {
+                                "type": "string"
+                              }
+                            },
+                            "required": ["componentId", "dataBinding"]
+                          }
+                        }
+                      },
+                      "distribution": {
+                        "type": "string",
+                        "description": "Defines the arrangement of children along the main axis (horizontally). This corresponds to the CSS 'justify-content' property.",
+                        "enum": [
+                          "center",
+                          "end",
+                          "spaceAround",
+                          "spaceBetween",
+                          "spaceEvenly",
+                          "start"
+                        ]
+                      },
+                      "alignment": {
+                        "type": "string",
+                        "description": "Defines the alignment of children along the cross axis (vertically). This corresponds to the CSS 'align-items' property.",
+                        "enum": ["start", "center", "end", "stretch"]
+                      }
+                    },
+                    "required": ["children"]
+                  },
+                  "Column": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "children": {
+                        "type": "object",
+                        "description": "Defines the children. Use 'explicitList' for a fixed set of children, or 'template' to generate children from a data list.",
+                        "additionalProperties": false,
+                        "properties": {
+                          "explicitList": {
+                            "type": "array",
+                            "items": {
+                              "type": "string"
+                            }
+                          },
+                          "template": {
+                            "type": "object",
+                            "description": "A template for generating a dynamic list of children from a data model list. `componentId` is the component to use as a template, and `dataBinding` is the path to the map of components in the data model. Values in the map will define the list of children.",
+                            "additionalProperties": false,
+                            "properties": {
+                              "componentId": {
+                                "type": "string"
+                              },
+                              "dataBinding": {
+                                "type": "string"
+                              }
+                            },
+                            "required": ["componentId", "dataBinding"]
+                          }
+                        }
+                      },
+                      "distribution": {
+                        "type": "string",
+                        "description": "Defines the arrangement of children along the main axis (vertically). This corresponds to the CSS 'justify-content' property.",
+                        "enum": [
+                          "start",
+                          "center",
+                          "end",
+                          "spaceBetween",
+                          "spaceAround",
+                          "spaceEvenly"
+                        ]
+                      },
+                      "alignment": {
+                        "type": "string",
+                        "description": "Defines the alignment of children along the cross axis (horizontally). This corresponds to the CSS 'align-items' property.",
+                        "enum": ["center", "end", "start", "stretch"]
+                      }
+                    },
+                    "required": ["children"]
+                  },
+                  "List": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "children": {
+                        "type": "object",
+                        "description": "Defines the children. Use 'explicitList' for a fixed set of children, or 'template' to generate children from a data list.",
+                        "additionalProperties": false,
+                        "properties": {
+                          "explicitList": {
+                            "type": "array",
+                            "items": {
+                              "type": "string"
+                            }
+                          },
+                          "template": {
+                            "type": "object",
+                            "description": "A template for generating a dynamic list of children from a data model list. `componentId` is the component to use as a template, and `dataBinding` is the path to the map of components in the data model. Values in the map will define the list of children.",
+                            "additionalProperties": false,
+                            "properties": {
+                              "componentId": {
+                                "type": "string"
+                              },
+                              "dataBinding": {
+                                "type": "string"
+                              }
+                            },
+                            "required": ["componentId", "dataBinding"]
+                          }
+                        }
+                      },
+                      "direction": {
+                        "type": "string",
+                        "description": "The direction in which the list items are laid out.",
+                        "enum": ["vertical", "horizontal"]
+                      },
+                      "alignment": {
+                        "type": "string",
+                        "description": "Defines the alignment of children along the cross axis.",
+                        "enum": ["start", "center", "end", "stretch"]
+                      }
+                    },
+                    "required": ["children"]
+                  },
+                  "Card": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "child": {
+                        "type": "string",
+                        "description": "The ID of the component to be rendered inside the card."
+                      }
+                    },
+                    "required": ["child"]
+                  },
+                  "Tabs": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "tabItems": {
+                        "type": "array",
+                        "description": "An array of objects, where each object defines a tab with a title and a child component.",
+                        "items": {
+                          "type": "object",
+                          "additionalProperties": false,
+                          "properties": {
+                            "title": {
+                              "type": "object",
+                              "description": "The tab title. Defines the value as either a literal value or a path to data model value (e.g. '/options/title').",
+                              "additionalProperties": false,
+                              "properties": {
+                                "literalString": {
+                                  "type": "string"
+                                },
+                                "path": {
+                                  "type": "string"
+                                }
+                              }
+                            },
+                            "child": {
+                              "type": "string"
+                            }
+                          },
+                          "required": ["title", "child"]
+                        }
+                      }
+                    },
+                    "required": ["tabItems"]
+                  },
+                  "Divider": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "axis": {
+                        "type": "string",
+                        "description": "The orientation of the divider.",
+                        "enum": ["horizontal", "vertical"]
+                      }
+                    }
+                  },
+                  "Modal": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "entryPointChild": {
+                        "type": "string",
+                        "description": "The ID of the component that opens the modal when interacted with (e.g., a button)."
+                      },
+                      "contentChild": {
+                        "type": "string",
+                        "description": "The ID of the component to be displayed inside the modal."
+                      }
+                    },
+                    "required": ["entryPointChild", "contentChild"]
+                  },
+                  "Button": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "child": {
+                        "type": "string",
+                        "description": "The ID of the component to display in the button, typically a Text component."
+                      },
+                      "primary": {
+                        "type": "boolean",
+                        "description": "Indicates if this button should be styled as the primary action."
+                      },
+                      "action": {
+                        "type": "object",
+                        "description": "The client-side action to be dispatched when the button is clicked. It includes the action's name and an optional context payload.",
+                        "additionalProperties": false,
+                        "properties": {
+                          "name": {
+                            "type": "string"
+                          },
+                          "context": {
+                            "type": "array",
+                            "items": {
+                              "type": "object",
+                              "additionalProperties": false,
+                              "properties": {
+                                "key": {
+                                  "type": "string"
+                                },
+                                "value": {
+                                  "type": "object",
+                                  "description": "Defines the value to be included in the context as either a literal value or a path to a data model value (e.g. '/user/name').",
+                                  "additionalProperties": false,
+                                  "properties": {
+                                    "path": {
+                                      "type": "string"
+                                    },
+                                    "literalString": {
+                                      "type": "string"
+                                    },
+                                    "literalNumber": {
+                                      "type": "number"
+                                    },
+                                    "literalBoolean": {
+                                      "type": "boolean"
+                                    }
+                                  }
+                                }
+                              },
+                              "required": ["key", "value"]
+                            }
+                          }
+                        },
+                        "required": ["name"]
+                      }
+                    },
+                    "required": ["child", "action"]
+                  },
+                  "CheckBox": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "label": {
+                        "type": "object",
+                        "description": "The text to display next to the checkbox. Defines the value as either a literal value or a path to data model ('path', e.g. '/option/label').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "value": {
+                        "type": "object",
+                        "description": "The current state of the checkbox (true for checked, false for unchecked). This can be a literal boolean ('literalBoolean') or a reference to a value in the data model ('path', e.g. '/filter/open').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalBoolean": {
+                            "type": "boolean"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      }
+                    },
+                    "required": ["label", "value"]
+                  },
+                  "TextField": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "label": {
+                        "type": "object",
+                        "description": "The text label for the input field. This can be a literal string or a reference to a value in the data model ('path, e.g. '/user/name').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "text": {
+                        "type": "object",
+                        "description": "The value of the text field. This can be a literal string or a reference to a value in the data model ('path', e.g. '/user/name').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "textFieldType": {
+                        "type": "string",
+                        "description": "The type of input field to display.",
+                        "enum": [
+                          "date",
+                          "longText",
+                          "number",
+                          "shortText",
+                          "obscured"
+                        ]
+                      },
+                      "validationRegexp": {
+                        "type": "string",
+                        "description": "A regular expression used for client-side validation of the input."
+                      }
+                    },
+                    "required": ["label"]
+                  },
+                  "DateTimeInput": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "value": {
+                        "type": "object",
+                        "description": "The selected date and/or time value. This can be a literal string ('literalString') or a reference to a value in the data model ('path', e.g. '/user/dob').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalString": {
+                            "type": "string"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "enableDate": {
+                        "type": "boolean",
+                        "description": "If true, allows the user to select a date."
+                      },
+                      "enableTime": {
+                        "type": "boolean",
+                        "description": "If true, allows the user to select a time."
+                      },
+                      "outputFormat": {
+                        "type": "string",
+                        "description": "The desired format for the output string after a date or time is selected."
+                      }
+                    },
+                    "required": ["value"]
+                  },
+                  "MultipleChoice": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "selections": {
+                        "type": "object",
+                        "description": "The currently selected values for the component. This can be a literal array of strings or a path to an array in the data model('path', e.g. '/hotel/options').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalArray": {
+                            "type": "array",
+                            "items": {
+                              "type": "string"
+                            }
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "options": {
+                        "type": "array",
+                        "description": "An array of available options for the user to choose from.",
+                        "items": {
+                          "type": "object",
+                          "additionalProperties": false,
+                          "properties": {
+                            "label": {
+                              "type": "object",
+                              "description": "The text to display for this option. This can be a literal string or a reference to a value in the data model (e.g. '/option/label').",
+                              "additionalProperties": false,
+                              "properties": {
+                                "literalString": {
+                                  "type": "string"
+                                },
+                                "path": {
+                                  "type": "string"
+                                }
+                              }
+                            },
+                            "value": {
+                              "type": "string",
+                              "description": "The value to be associated with this option when selected."
+                            }
+                          },
+                          "required": ["label", "value"]
+                        }
+                      },
+                      "maxAllowedSelections": {
+                        "type": "integer",
+                        "description": "The maximum number of options that the user is allowed to select."
+                      }
+                    },
+                    "required": ["selections", "options"]
+                  },
+                  "Slider": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "value": {
+                        "type": "object",
+                        "description": "The current value of the slider. This can be a literal number ('literalNumber') or a reference to a value in the data model ('path', e.g. '/restaurant/cost').",
+                        "additionalProperties": false,
+                        "properties": {
+                          "literalNumber": {
+                            "type": "number"
+                          },
+                          "path": {
+                            "type": "string"
+                          }
+                        }
+                      },
+                      "minValue": {
+                        "type": "number",
+                        "description": "The minimum value of the slider."
+                      },
+                      "maxValue": {
+                        "type": "number",
+                        "description": "The maximum value of the slider."
+                      }
+                    },
+                    "required": ["value"]
+                  }
+                }
+              }
+            },
+            "required": ["id", "component"]
+          }
+        }
+      },
+      "required": ["surfaceId", "components"]
+    },
+    "dataModelUpdate": {
+      "type": "object",
+      "description": "Updates the data model for a surface.",
+      "additionalProperties": false,
+      "properties": {
+        "surfaceId": {
+          "type": "string",
+          "description": "The unique identifier for the UI surface this data model update applies to."
+        },
+        "path": {
+          "type": "string",
+          "description": "An optional path to a location within the data model (e.g., '/user/name'). If omitted, or set to '/', the entire data model will be replaced."
+        },
+        "contents": {
+          "type": "array",
+          "description": "An array of data entries. Each entry must contain a 'key' and exactly one corresponding typed 'value*' property.",
+          "items": {
+            "type": "object",
+            "description": "A single data entry. Exactly one 'value*' property should be provided alongside the key.",
+            "additionalProperties": false,
+            "properties": {
+              "key": {
+                "type": "string",
+                "description": "The key for this data entry."
+              },
+              "valueString": {
+                "type": "string"
+              },
+              "valueNumber": {
+                "type": "number"
+              },
+              "valueBoolean": {
+                "type": "boolean"
+              },
+              "valueMap": {
+                "description": "Represents a map as an adjacency list.",
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "description": "One entry in the map. Exactly one 'value*' property should be provided alongside the key.",
+                  "additionalProperties": false,
+                  "properties": {
+                    "key": {
+                      "type": "string"
+                    },
+                    "valueString": {
+                      "type": "string"
+                    },
+                    "valueNumber": {
+                      "type": "number"
+                    },
+                    "valueBoolean": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": ["key"]
+                }
+              }
+            },
+            "required": ["key"]
+          }
+        }
+      },
+      "required": ["contents", "surfaceId"]
+    },
+    "deleteSurface": {
+      "type": "object",
+      "description": "Signals the client to delete the surface identified by 'surfaceId'.",
+      "additionalProperties": false,
+      "properties": {
+        "surfaceId": {
+          "type": "string",
+          "description": "The unique identifier for the UI surface to be deleted."
+        }
+      },
+      "required": ["surfaceId"]
+    }
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/styles/behavior.ts

@@ -0,0 +1,55 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+const opacityBehavior = `
+  &:not([disabled]) {
+    cursor: pointer;
+    opacity: var(--opacity, 0);
+    transition: opacity var(--speed, 0.2s) cubic-bezier(0, 0, 0.3, 1);
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }`;
+
+export const behavior = `
+  ${new Array(21)
+    .fill(0)
+    .map((_, idx) => {
+      return `.behavior-ho-${idx * 5} {
+          --opacity: ${idx / 20};
+          ${opacityBehavior}
+        }`;
+    })
+    .join("\n")}
+
+  .behavior-o-s {
+    overflow: scroll;
+  }
+
+  .behavior-o-a {
+    overflow: auto;
+  }
+
+  .behavior-o-h {
+    overflow: hidden;
+  }
+
+  .behavior-sw-n {
+    scrollbar-width: none;
+  }
+`;

vendor/a2ui/renderers/lit/src/0.8/styles/border.ts

@@ -0,0 +1,42 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { grid } from "./shared.js";
+
+export const border = `
+  ${new Array(25)
+    .fill(0)
+    .map((_, idx) => {
+      return `
+        .border-bw-${idx} { border-width: ${idx}px; }
+        .border-btw-${idx} { border-top-width: ${idx}px; }
+        .border-bbw-${idx} { border-bottom-width: ${idx}px; }
+        .border-blw-${idx} { border-left-width: ${idx}px; }
+        .border-brw-${idx} { border-right-width: ${idx}px; }
+
+        .border-ow-${idx} { outline-width: ${idx}px; }
+        .border-br-${idx} { border-radius: ${idx * grid}px; overflow: hidden;}`;
+    })
+    .join("\n")}
+
+  .border-br-50pc {
+    border-radius: 50%;
+  }
+
+  .border-bs-s {
+    border-style: solid;
+  }
+`;

vendor/a2ui/renderers/lit/src/0.8/styles/colors.ts

@@ -0,0 +1,100 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { PaletteKey, PaletteKeyVals, shades } from "../types/colors.js";
+import { toProp } from "./utils.js";
+
+const color = <C extends PaletteKeyVals>(src: PaletteKey<C>) =>
+  `
+    ${src
+      .map((key: string) => {
+        const inverseKey = getInverseKey(key);
+        return `.color-bc-${key} { border-color: light-dark(var(${toProp(
+          key
+        )}), var(${toProp(inverseKey)})); }`;
+      })
+      .join("\n")}
+
+    ${src
+      .map((key: string) => {
+        const inverseKey = getInverseKey(key);
+        const vals = [
+          `.color-bgc-${key} { background-color: light-dark(var(${toProp(
+            key
+          )}), var(${toProp(inverseKey)})); }`,
+          `.color-bbgc-${key}::backdrop { background-color: light-dark(var(${toProp(
+            key
+          )}), var(${toProp(inverseKey)})); }`,
+        ];
+
+        for (let o = 0.1; o < 1; o += 0.1) {
+          vals.push(`.color-bbgc-${key}_${(o * 100).toFixed(0)}::backdrop {
+            background-color: light-dark(oklch(from var(${toProp(
+              key
+            )}) l c h / calc(alpha * ${o.toFixed(1)})), oklch(from var(${toProp(
+            inverseKey
+          )}) l c h / calc(alpha * ${o.toFixed(1)})) );
+          }
+        `);
+        }
+
+        return vals.join("\n");
+      })
+      .join("\n")}
+
+  ${src
+    .map((key: string) => {
+      const inverseKey = getInverseKey(key);
+      return `.color-c-${key} { color: light-dark(var(${toProp(
+        key
+      )}), var(${toProp(inverseKey)})); }`;
+    })
+    .join("\n")}
+  `;
+
+const getInverseKey = (key: string): string => {
+  const match = key.match(/^([a-z]+)(\d+)$/);
+  if (!match) return key;
+  const [, prefix, shadeStr] = match;
+  const shade = parseInt(shadeStr, 10);
+  const target = 100 - shade;
+  const inverseShade = shades.reduce((prev, curr) =>
+    Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev
+  );
+  return `${prefix}${inverseShade}`;
+};
+
+const keyFactory = <K extends PaletteKeyVals>(prefix: K) => {
+  return shades.map((v) => `${prefix}${v}`) as PaletteKey<K>;
+};
+
+export const colors = [
+  color(keyFactory("p")),
+  color(keyFactory("s")),
+  color(keyFactory("t")),
+  color(keyFactory("n")),
+  color(keyFactory("nv")),
+  color(keyFactory("e")),
+  `
+    .color-bgc-transparent {
+      background-color: transparent;
+    }
+
+    :host {
+      color-scheme: var(--color-scheme);
+    }
+  `,
+];

vendor/a2ui/renderers/lit/src/0.8/styles/icons.ts

@@ -0,0 +1,60 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+/**
+ * CSS classes for Google Symbols.
+ *
+ * Usage:
+ *
+ * ```html
+ * <span class="g-icon">pen_spark</span>
+ * ```
+ */
+export const icons = `
+  .g-icon {
+    font-family: "Material Symbols Outlined", "Google Symbols";
+    font-weight: normal;
+    font-style: normal;
+    font-display: optional;
+    font-size: 20px;
+    width: 1em;
+    height: 1em;
+    user-select: none;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+    overflow: hidden;
+
+    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48,
+      "ROND" 100;
+
+    &.filled {
+      font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48,
+        "ROND" 100;
+    }
+
+    &.filled-heavy {
+      font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48,
+        "ROND" 100;
+    }
+  }
+`;

vendor/a2ui/renderers/lit/src/0.8/styles/index.ts

@@ -0,0 +1,37 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { behavior } from "./behavior.js";
+import { border } from "./border.js";
+import { colors } from "./colors.js";
+import { icons } from "./icons.js";
+import { layout } from "./layout.js";
+import { opacity } from "./opacity.js";
+import { type } from "./type.js";
+
+export * from "./utils.js";
+
+export const structuralStyles: string = [
+  behavior,
+  border,
+  colors,
+  icons,
+  layout,
+  opacity,
+  type,
+]
+  .flat(Infinity)
+  .join("\n");

vendor/a2ui/renderers/lit/src/0.8/styles/layout.ts

@@ -0,0 +1,235 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { grid } from "./shared.js";
+
+export const layout = `
+  :host {
+    ${new Array(16)
+      .fill(0)
+      .map((_, idx) => {
+        return `--g-${idx + 1}: ${(idx + 1) * grid}px;`;
+      })
+      .join("\n")}
+  }
+
+  ${new Array(49)
+    .fill(0)
+    .map((_, index) => {
+      const idx = index - 24;
+      const lbl = idx < 0 ? `n${Math.abs(idx)}` : idx.toString();
+      return `
+        .layout-p-${lbl} { --padding: ${
+        idx * grid
+      }px; padding: var(--padding); }
+        .layout-pt-${lbl} { padding-top: ${idx * grid}px; }
+        .layout-pr-${lbl} { padding-right: ${idx * grid}px; }
+        .layout-pb-${lbl} { padding-bottom: ${idx * grid}px; }
+        .layout-pl-${lbl} { padding-left: ${idx * grid}px; }
+
+        .layout-m-${lbl} { --margin: ${idx * grid}px; margin: var(--margin); }
+        .layout-mt-${lbl} { margin-top: ${idx * grid}px; }
+        .layout-mr-${lbl} { margin-right: ${idx * grid}px; }
+        .layout-mb-${lbl} { margin-bottom: ${idx * grid}px; }
+        .layout-ml-${lbl} { margin-left: ${idx * grid}px; }
+
+        .layout-t-${lbl} { top: ${idx * grid}px; }
+        .layout-r-${lbl} { right: ${idx * grid}px; }
+        .layout-b-${lbl} { bottom: ${idx * grid}px; }
+        .layout-l-${lbl} { left: ${idx * grid}px; }`;
+    })
+    .join("\n")}
+
+  ${new Array(25)
+    .fill(0)
+    .map((_, idx) => {
+      return `
+        .layout-g-${idx} { gap: ${idx * grid}px; }`;
+    })
+    .join("\n")}
+
+  ${new Array(8)
+    .fill(0)
+    .map((_, idx) => {
+      return `
+        .layout-grd-col${idx + 1} { grid-template-columns: ${"1fr "
+        .repeat(idx + 1)
+        .trim()}; }`;
+    })
+    .join("\n")}
+
+  .layout-pos-a {
+    position: absolute;
+  }
+
+  .layout-pos-rel {
+    position: relative;
+  }
+
+  .layout-dsp-none {
+    display: none;
+  }
+
+  .layout-dsp-block {
+    display: block;
+  }
+
+  .layout-dsp-grid {
+    display: grid;
+  }
+
+  .layout-dsp-iflex {
+    display: inline-flex;
+  }
+
+  .layout-dsp-flexvert {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .layout-dsp-flexhor {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .layout-fw-w {
+    flex-wrap: wrap;
+  }
+
+  .layout-al-fs {
+    align-items: start;
+  }
+
+  .layout-al-fe {
+    align-items: end;
+  }
+
+  .layout-al-c {
+    align-items: center;
+  }
+
+  .layout-as-n {
+    align-self: normal;
+  }
+
+  .layout-js-c {
+    justify-self: center;
+  }
+
+  .layout-sp-c {
+    justify-content: center;
+  }
+
+  .layout-sp-ev {
+    justify-content: space-evenly;
+  }
+
+  .layout-sp-bt {
+    justify-content: space-between;
+  }
+
+  .layout-sp-s {
+    justify-content: start;
+  }
+
+  .layout-sp-e {
+    justify-content: end;
+  }
+
+  .layout-ji-e {
+    justify-items: end;
+  }
+
+  .layout-r-none {
+    resize: none;
+  }
+
+  .layout-fs-c {
+    field-sizing: content;
+  }
+
+  .layout-fs-n {
+    field-sizing: none;
+  }
+
+  .layout-flx-0 {
+    flex: 0 0 auto;
+  }
+
+  .layout-flx-1 {
+    flex: 1 0 auto;
+  }
+
+  .layout-c-s {
+    contain: strict;
+  }
+
+  /** Widths **/
+
+  ${new Array(10)
+    .fill(0)
+    .map((_, idx) => {
+      const weight = (idx + 1) * 10;
+      return `.layout-w-${weight} { width: ${weight}%; max-width: ${weight}%; }`;
+    })
+    .join("\n")}
+
+  ${new Array(16)
+    .fill(0)
+    .map((_, idx) => {
+      const weight = idx * grid;
+      return `.layout-wp-${idx} { width: ${weight}px; }`;
+    })
+    .join("\n")}
+
+  /** Heights **/
+
+  ${new Array(10)
+    .fill(0)
+    .map((_, idx) => {
+      const height = (idx + 1) * 10;
+      return `.layout-h-${height} { height: ${height}%; }`;
+    })
+    .join("\n")}
+
+  ${new Array(16)
+    .fill(0)
+    .map((_, idx) => {
+      const height = idx * grid;
+      return `.layout-hp-${idx} { height: ${height}px; }`;
+    })
+    .join("\n")}
+
+  .layout-el-cv {
+    & img,
+    & video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      margin: 0;
+    }
+  }
+
+  .layout-ar-sq {
+    aspect-ratio: 1 / 1;
+  }
+
+  .layout-ex-fb {
+    margin: calc(var(--padding) * -1) 0 0 calc(var(--padding) * -1);
+    width: calc(100% + var(--padding) * 2);
+    height: calc(100% + var(--padding) * 2);
+  }
+`;

vendor/a2ui/renderers/lit/src/0.8/styles/opacity.ts

@@ -0,0 +1,24 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export const opacity = `
+  ${new Array(21)
+    .fill(0)
+    .map((_, idx) => {
+      return `.opacity-el-${idx * 5} { opacity: ${idx / 20}; }`;
+    })
+    .join("\n")}
+`;

vendor/a2ui/renderers/lit/src/0.8/styles/shared.ts

@@ -0,0 +1,17 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export const grid = 4;

vendor/a2ui/renderers/lit/src/0.8/styles/type.ts

@@ -0,0 +1,156 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export const type = `
+  :host {
+    --default-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --default-font-family-mono: "Courier New", Courier, monospace;
+  }
+
+  .typography-f-s {
+    font-family: var(--font-family, var(--default-font-family));
+    font-optical-sizing: auto;
+    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0;
+  }
+
+  .typography-f-sf {
+    font-family: var(--font-family-flex, var(--default-font-family));
+    font-optical-sizing: auto;
+  }
+
+  .typography-f-c {
+    font-family: var(--font-family-mono, var(--default-font-family));
+    font-optical-sizing: auto;
+    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0;
+  }
+
+  .typography-v-r {
+    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "ROND" 100;
+  }
+
+  .typography-ta-s {
+    text-align: start;
+  }
+
+  .typography-ta-c {
+    text-align: center;
+  }
+
+  .typography-fs-n {
+    font-style: normal;
+  }
+
+  .typography-fs-i {
+    font-style: italic;
+  }
+
+  .typography-sz-ls {
+    font-size: 11px;
+    line-height: 16px;
+  }
+
+  .typography-sz-lm {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .typography-sz-ll {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .typography-sz-bs {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .typography-sz-bm {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .typography-sz-bl {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .typography-sz-ts {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .typography-sz-tm {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .typography-sz-tl {
+    font-size: 22px;
+    line-height: 28px;
+  }
+
+  .typography-sz-hs {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .typography-sz-hm {
+    font-size: 28px;
+    line-height: 36px;
+  }
+
+  .typography-sz-hl {
+    font-size: 32px;
+    line-height: 40px;
+  }
+
+  .typography-sz-ds {
+    font-size: 36px;
+    line-height: 44px;
+  }
+
+  .typography-sz-dm {
+    font-size: 45px;
+    line-height: 52px;
+  }
+
+  .typography-sz-dl {
+    font-size: 57px;
+    line-height: 64px;
+  }
+
+  .typography-ws-p {
+    white-space: pre-line;
+  }
+
+  .typography-ws-nw {
+    white-space: nowrap;
+  }
+
+  .typography-td-none {
+    text-decoration: none;
+  }
+
+  /** Weights **/
+
+  ${new Array(9)
+    .fill(0)
+    .map((_, idx) => {
+      const weight = (idx + 1) * 100;
+      return `.typography-w-${weight} { font-weight: ${weight}; }`;
+    })
+    .join("\n")}
+`;

vendor/a2ui/renderers/lit/src/0.8/styles/utils.ts

@@ -0,0 +1,104 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { ColorPalettes } from "../types/colors.js";
+
+export function merge(...classes: Array<Record<string, boolean>>) {
+  const styles: Record<string, boolean> = {};
+  for (const clazz of classes) {
+    for (const [key, val] of Object.entries(clazz)) {
+      const prefix = key.split("-").with(-1, "").join("-");
+      const existingKeys = Object.keys(styles).filter((key) =>
+        key.startsWith(prefix)
+      );
+
+      for (const existingKey of existingKeys) {
+        delete styles[existingKey];
+      }
+
+      styles[key] = val;
+    }
+  }
+
+  return styles;
+}
+
+export function appendToAll(
+  target: Record<string, string[]>,
+  exclusions: string[],
+  ...classes: Array<Record<string, boolean>>
+) {
+  const updatedTarget: Record<string, string[]> = structuredClone(target);
+  // Step through each of the new blocks we've been handed.
+  for (const clazz of classes) {
+    // For each of the items in the list, create the prefix value, e.g., for
+    // typography-f-s reduce to typography-f-. This will allow us to find any
+    // and all matches across the target that have the same prefix and swap them
+    // out for the updated item.
+    for (const key of Object.keys(clazz)) {
+      const prefix = key.split("-").with(-1, "").join("-");
+
+      // Now we have the prefix step through all iteme in the target, and
+      // replace the value in the array when we find it.
+      for (const [tagName, classesToAdd] of Object.entries(updatedTarget)) {
+        if (exclusions.includes(tagName)) {
+          continue;
+        }
+
+        let found = false;
+        for (let t = 0; t < classesToAdd.length; t++) {
+          if (classesToAdd[t].startsWith(prefix)) {
+            found = true;
+
+            // In theory we should be able to break after finding a single
+            // entry here because we shouldn't have items with the same prefix
+            // in the array, but for safety we'll run to the end of the array
+            // and ensure we've captured all possible items with the prefix.
+            classesToAdd[t] = key;
+          }
+        }
+
+        if (!found) {
+          classesToAdd.push(key);
+        }
+      }
+    }
+  }
+
+  return updatedTarget;
+}
+
+export function createThemeStyles(
+  palettes: ColorPalettes
+): Record<string, string> {
+  const styles: Record<string, string> = {};
+  for (const palette of Object.values(palettes)) {
+    for (const [key, val] of Object.entries(palette)) {
+      const prop = toProp(key);
+      styles[prop] = val;
+    }
+  }
+
+  return styles;
+}
+
+export function toProp(key: string) {
+  if (key.startsWith("nv")) {
+    return `--nv-${key.slice(2)}`;
+  }
+
+  return `--${key[0]}-${key.slice(1)}`;
+}

vendor/a2ui/renderers/lit/src/0.8/types/client-event.ts

@@ -0,0 +1,80 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+/**
+ * A message from the client describing its capabilities, such as the component
+ * catalog it supports. Exactly ONE of the properties in this object must be
+ * set.
+ */
+
+export type ClientCapabilitiesUri = string;
+export type ClientCapabilitiesDynamic = {
+  components: { [key: string]: unknown };
+  styles: { [key: string]: unknown };
+};
+
+export type ClientCapabilities =
+  | { catalogUri: ClientCapabilitiesUri }
+  | { dynamicCatalog: ClientCapabilitiesDynamic };
+
+/**
+ * A message sent from the client to the server. Exactly ONE of the properties
+ * in this object must be set.
+ */
+export interface ClientToServerMessage {
+  userAction?: UserAction;
+  clientUiCapabilities?: ClientCapabilities;
+  error?: ClientError;
+  /** Demo content */
+  request?: unknown;
+}
+
+/**
+ * Represents a user-initiated action, sent from the client to the server.
+ */
+export interface UserAction {
+  /**
+   * The name of the action.
+   */
+  name: string;
+  /**
+   * The ID of the surface.
+   */
+  surfaceId: string;
+  /**
+   * The ID of the component that triggered the event.
+   */
+  sourceComponentId: string;
+  /**
+   * An ISO timestamp of when the event occurred.
+   */
+  timestamp: string;
+  /**
+   * A JSON object containing the key-value pairs from the component's
+   * `action.context`, after resolving all data bindings.
+   */
+  context?: {
+    [k: string]: unknown;
+  };
+}
+
+/**
+ * A message from the client indicating an error occurred, for example,
+ * during UI rendering.
+ */
+export interface ClientError {
+  [k: string]: unknown;
+}

vendor/a2ui/renderers/lit/src/0.8/types/colors.ts

@@ -0,0 +1,66 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+type ColorShade =
+  | 0
+  | 5
+  | 10
+  | 15
+  | 20
+  | 25
+  | 30
+  | 35
+  | 40
+  | 50
+  | 60
+  | 70
+  | 80
+  | 90
+  | 95
+  | 98
+  | 99
+  | 100;
+
+export type PaletteKeyVals = "n" | "nv" | "p" | "s" | "t" | "e";
+export const shades: ColorShade[] = [
+  0, 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,
+];
+
+type CreatePalette<Prefix extends PaletteKeyVals> = {
+  [Key in `${Prefix}${ColorShade}`]: string;
+};
+
+export type PaletteKey<Prefix extends PaletteKeyVals> = Array<
+  keyof CreatePalette<Prefix>
+>;
+
+export type PaletteKeys = {
+  neutral: PaletteKey<"n">;
+  neutralVariant: PaletteKey<"nv">;
+  primary: PaletteKey<"p">;
+  secondary: PaletteKey<"s">;
+  tertiary: PaletteKey<"t">;
+  error: PaletteKey<"e">;
+};
+
+export type ColorPalettes = {
+  neutral: CreatePalette<"n">;
+  neutralVariant: CreatePalette<"nv">;
+  primary: CreatePalette<"p">;
+  secondary: CreatePalette<"s">;
+  tertiary: CreatePalette<"t">;
+  error: CreatePalette<"e">;
+};

vendor/a2ui/renderers/lit/src/0.8/types/components.ts

@@ -0,0 +1,211 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { StringValue } from "./primitives";
+
+export interface Action {
+  /**
+   * A unique name identifying the action (e.g., 'submitForm').
+   */
+  name: string;
+  /**
+   * A key-value map of data bindings to be resolved when the action is triggered.
+   */
+  context?: {
+    key: string;
+    /**
+     * The dynamic value. Define EXACTLY ONE of the nested properties.
+     */
+    value: {
+      /**
+       * A data binding reference to a location in the data model (e.g., '/user/name').
+       */
+      path?: string;
+      /**
+       * A fixed, hardcoded string value.
+       */
+      literalString?: string;
+      literalNumber?: number;
+      literalBoolean?: boolean;
+    };
+  }[];
+}
+
+export interface Text {
+  text: StringValue;
+  usageHint: "h1" | "h2" | "h3" | "h4" | "h5" | "caption" | "body";
+}
+
+export interface Image {
+  url: StringValue;
+  usageHint:
+    | "icon"
+    | "avatar"
+    | "smallFeature"
+    | "mediumFeature"
+    | "largeFeature"
+    | "header";
+  fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+}
+
+export interface Icon {
+  name: StringValue;
+}
+
+export interface Video {
+  url: StringValue;
+}
+
+export interface AudioPlayer {
+  url: StringValue;
+  /**
+   * A label, title, or placeholder text.
+   */
+  description?: StringValue;
+}
+
+export interface Tabs {
+  /**
+   * A list of tabs, each with a title and a child component ID.
+   */
+  tabItems: {
+    /**
+     * The title of the tab.
+     */
+    title: {
+      /**
+       * A data binding reference to a location in the data model (e.g., '/user/name').
+       */
+      path?: string;
+      /**
+       * A fixed, hardcoded string value.
+       */
+      literalString?: string;
+    };
+    /**
+     * A reference to a component instance by its unique ID.
+     */
+    child: string;
+  }[];
+}
+
+export interface Divider {
+  /**
+   * The orientation.
+   */
+  axis?: "horizontal" | "vertical";
+  /**
+   * The color of the divider (e.g., hex code or semantic name).
+   */
+  color?: string;
+  /**
+   * The thickness of the divider.
+   */
+  thickness?: number;
+}
+
+export interface Modal {
+  /**
+   * The ID of the component (e.g., a button) that triggers the modal.
+   */
+  entryPointChild: string;
+  /**
+   * The ID of the component to display as the modal's content.
+   */
+  contentChild: string;
+}
+
+export interface Button {
+  /**
+   * The ID of the component to display as the button's content.
+   */
+  child: string;
+
+  /**
+   * Represents a user-initiated action.
+   */
+  action: Action;
+}
+
+export interface Checkbox {
+  label: StringValue;
+  value: {
+    /**
+     * A data binding reference to a location in the data model (e.g., '/user/name').
+     */
+    path?: string;
+    literalBoolean?: boolean;
+  };
+}
+
+export interface TextField {
+  text?: StringValue;
+  /**
+   * A label, title, or placeholder text.
+   */
+  label: StringValue;
+  type?: "shortText" | "number" | "date" | "longText";
+  /**
+   * A regex string to validate the input.
+   */
+  validationRegexp?: string;
+}
+
+export interface DateTimeInput {
+  value: StringValue;
+  enableDate?: boolean;
+  enableTime?: boolean;
+  /**
+   * The string format for the output (e.g., 'YYYY-MM-DD').
+   */
+  outputFormat?: string;
+}
+
+export interface MultipleChoice {
+  selections: {
+    /**
+     * A data binding reference to a location in the data model (e.g., '/user/name').
+     */
+    path?: string;
+    literalArray?: string[];
+  };
+  options?: {
+    label: {
+      /**
+       * A data binding reference to a location in the data model (e.g., '/user/name').
+       */
+      path?: string;
+      /**
+       * A fixed, hardcoded string value.
+       */
+      literalString?: string;
+    };
+    value: string;
+  }[];
+  maxAllowedSelections?: number;
+}
+
+export interface Slider {
+  value: {
+    /**
+     * A data binding reference to a location in the data model (e.g., '/user/name').
+     */
+    path?: string;
+    literalNumber?: number;
+  };
+  minValue?: number;
+  maxValue?: number;
+}

vendor/a2ui/renderers/lit/src/0.8/types/primitives.ts

@@ -0,0 +1,60 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export interface StringValue {
+  /**
+   * A data binding reference to a location in the data model (e.g., '/user/name').
+   */
+  path?: string;
+  /**
+   * A fixed, hardcoded string value.
+   */
+  literalString?: string;
+  /**
+   * A fixed, hardcoded string value.
+   */
+  literal?: string;
+}
+
+export interface NumberValue {
+  /**
+   * A data binding reference to a location in the data model (e.g., '/user/name').
+   */
+  path?: string;
+  /**
+   * A fixed, hardcoded number value.
+   */
+  literalNumber?: number;
+  /**
+   * A fixed, hardcoded number value.
+   */
+  literal?: number;
+}
+
+export interface BooleanValue {
+  /**
+   * A data binding reference to a location in the data model (e.g., '/user/name').
+   */
+  path?: string;
+  /**
+   * A fixed, hardcoded boolean value.
+   */
+  literalBoolean?: boolean;
+  /**
+   * A fixed, hardcoded boolean value.
+   */
+  literal?: boolean;
+}

vendor/a2ui/renderers/lit/src/0.8/types/types.ts

@@ -0,0 +1,532 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export {
+  type ClientToServerMessage as A2UIClientEventMessage,
+  type ClientCapabilitiesDynamic,
+} from "./client-event.js";
+export { type Action } from "./components.js";
+
+import {
+  AudioPlayer,
+  Button,
+  Checkbox,
+  DateTimeInput,
+  Divider,
+  Icon,
+  Image,
+  MultipleChoice,
+  Slider,
+  Text,
+  TextField,
+  Video,
+} from "./components";
+import { StringValue } from "./primitives";
+
+export type MessageProcessor = {
+  getSurfaces(): ReadonlyMap<string, Surface>;
+  clearSurfaces(): void;
+  processMessages(messages: ServerToClientMessage[]): void;
+
+  /**
+   * Retrieves the data for a given component node and a relative path string.
+   * This correctly handles the special `.` path, which refers to the node's
+   * own data context.
+   */
+  getData(
+    node: AnyComponentNode,
+    relativePath: string,
+    surfaceId: string
+  ): DataValue | null;
+
+  setData(
+    node: AnyComponentNode | null,
+    relativePath: string,
+    value: DataValue,
+    surfaceId: string
+  ): void;
+
+  resolvePath(path: string, dataContextPath?: string): string;
+};
+
+export type Theme = {
+  components: {
+    AudioPlayer: Record<string, boolean>;
+    Button: Record<string, boolean>;
+    Card: Record<string, boolean>;
+    Column: Record<string, boolean>;
+    CheckBox: {
+      container: Record<string, boolean>;
+      element: Record<string, boolean>;
+      label: Record<string, boolean>;
+    };
+    DateTimeInput: {
+      container: Record<string, boolean>;
+      element: Record<string, boolean>;
+      label: Record<string, boolean>;
+    };
+    Divider: Record<string, boolean>;
+    Image: {
+      all: Record<string, boolean>;
+      icon: Record<string, boolean>;
+      avatar: Record<string, boolean>;
+      smallFeature: Record<string, boolean>;
+      mediumFeature: Record<string, boolean>;
+      largeFeature: Record<string, boolean>;
+      header: Record<string, boolean>;
+    };
+    Icon: Record<string, boolean>;
+    List: Record<string, boolean>;
+    Modal: {
+      backdrop: Record<string, boolean>;
+      element: Record<string, boolean>;
+    };
+    MultipleChoice: {
+      container: Record<string, boolean>;
+      element: Record<string, boolean>;
+      label: Record<string, boolean>;
+    };
+    Row: Record<string, boolean>;
+    Slider: {
+      container: Record<string, boolean>;
+      element: Record<string, boolean>;
+      label: Record<string, boolean>;
+    };
+    Tabs: {
+      container: Record<string, boolean>;
+      element: Record<string, boolean>;
+      controls: {
+        all: Record<string, boolean>;
+        selected: Record<string, boolean>;
+      };
+    };
+    Text: {
+      all: Record<string, boolean>;
+      h1: Record<string, boolean>;
+      h2: Record<string, boolean>;
+      h3: Record<string, boolean>;
+      h4: Record<string, boolean>;
+      h5: Record<string, boolean>;
+      caption: Record<string, boolean>;
+      body: Record<string, boolean>;
+    };
+    TextField: {
+      container: Record<string, boolean>;
+      element: Record<string, boolean>;
+      label: Record<string, boolean>;
+    };
+    Video: Record<string, boolean>;
+  };
+  elements: {
+    a: Record<string, boolean>;
+    audio: Record<string, boolean>;
+    body: Record<string, boolean>;
+    button: Record<string, boolean>;
+    h1: Record<string, boolean>;
+    h2: Record<string, boolean>;
+    h3: Record<string, boolean>;
+    h4: Record<string, boolean>;
+    h5: Record<string, boolean>;
+    iframe: Record<string, boolean>;
+    input: Record<string, boolean>;
+    p: Record<string, boolean>;
+    pre: Record<string, boolean>;
+    textarea: Record<string, boolean>;
+    video: Record<string, boolean>;
+  };
+  markdown: {
+    p: string[];
+    h1: string[];
+    h2: string[];
+    h3: string[];
+    h4: string[];
+    h5: string[];
+    ul: string[];
+    ol: string[];
+    li: string[];
+    a: string[];
+    strong: string[];
+    em: string[];
+  };
+  additionalStyles?: {
+    AudioPlayer?: Record<string, string>;
+    Button?: Record<string, string>;
+    Card?: Record<string, string>;
+    Column?: Record<string, string>;
+    CheckBox?: Record<string, string>;
+    DateTimeInput?: Record<string, string>;
+    Divider?: Record<string, string>;
+    Heading?: Record<string, string>;
+    Icon?: Record<string, string>;
+    Image?: Record<string, string>;
+    List?: Record<string, string>;
+    Modal?: Record<string, string>;
+    MultipleChoice?: Record<string, string>;
+    Row?: Record<string, string>;
+    Slider?: Record<string, string>;
+    Tabs?: Record<string, string>;
+    Text?:
+      | Record<string, string>
+      | {
+          h1: Record<string, string>;
+          h2: Record<string, string>;
+          h3: Record<string, string>;
+          h4: Record<string, string>;
+          h5: Record<string, string>;
+          body: Record<string, string>;
+          caption: Record<string, string>;
+        };
+    TextField?: Record<string, string>;
+    Video?: Record<string, string>;
+  };
+};
+
+/**
+ * Represents a user-initiated action, sent from the client to the server.
+ */
+export interface UserAction {
+  /**
+   * The name of the action, taken from the component's `action.action`
+   * property.
+   */
+  actionName: string;
+  /**
+   * The `id` of the component that triggered the event.
+   */
+  sourceComponentId: string;
+  /**
+   * An ISO 8601 timestamp of when the event occurred.
+   */
+  timestamp: string;
+  /**
+   * A JSON object containing the key-value pairs from the component's
+   * `action.context`, after resolving all data bindings.
+   */
+  context?: {
+    [k: string]: unknown;
+  };
+}
+
+/** A recursive type for any valid JSON-like value in the data model. */
+export type DataValue =
+  | string
+  | number
+  | boolean
+  | null
+  | DataMap
+  | DataObject
+  | DataArray;
+export type DataObject = { [key: string]: DataValue };
+export type DataMap = Map<string, DataValue>;
+export type DataArray = DataValue[];
+
+/** A template for creating components from a list in the data model. */
+export interface ComponentArrayTemplate {
+  componentId: string;
+  dataBinding: string;
+}
+
+/** Defines a list of child components, either explicitly or via a template. */
+export interface ComponentArrayReference {
+  explicitList?: string[];
+  template?: ComponentArrayTemplate;
+}
+
+/** Represents the general shape of a component's properties. */
+export type ComponentProperties = {
+  // Allow any property, but define known structural ones for type safety.
+  children?: ComponentArrayReference;
+  child?: string;
+  [k: string]: unknown;
+};
+
+/** A raw component instance from a SurfaceUpdate message. */
+export interface ComponentInstance {
+  id: string;
+  weight?: number;
+  component?: ComponentProperties;
+}
+
+export interface BeginRenderingMessage {
+  surfaceId: string;
+  root: string;
+  styles?: Record<string, string>;
+}
+
+export interface SurfaceUpdateMessage {
+  surfaceId: string;
+  components: ComponentInstance[];
+}
+
+export interface DataModelUpdate {
+  surfaceId: string;
+  path?: string;
+  contents: ValueMap[];
+}
+
+// ValueMap is a type of DataObject for passing to the data model.
+export type ValueMap = DataObject & {
+  key: string;
+  /** May be JSON */
+  valueString?: string;
+  valueNumber?: number;
+  valueBoolean?: boolean;
+  valueMap?: ValueMap[];
+};
+
+export interface DeleteSurfaceMessage {
+  surfaceId: string;
+}
+
+export interface ServerToClientMessage {
+  beginRendering?: BeginRenderingMessage;
+  surfaceUpdate?: SurfaceUpdateMessage;
+  dataModelUpdate?: DataModelUpdate;
+  deleteSurface?: DeleteSurfaceMessage;
+}
+
+/**
+ * A recursive type for any value that can appear within a resolved component
+ * tree. This is the main type that makes the recursive resolution possible.
+ */
+export type ResolvedValue =
+  | string
+  | number
+  | boolean
+  | null
+  | AnyComponentNode
+  | ResolvedMap
+  | ResolvedArray;
+
+/** A generic map where each value has been recursively resolved. */
+export type ResolvedMap = { [key: string]: ResolvedValue };
+
+/** A generic array where each item has been recursively resolved. */
+export type ResolvedArray = ResolvedValue[];
+
+/**
+ * A base interface that all component nodes share.
+ */
+interface BaseComponentNode {
+  id: string;
+  weight?: number;
+  dataContextPath?: string;
+  slotName?: string;
+}
+
+export interface TextNode extends BaseComponentNode {
+  type: "Text";
+  properties: ResolvedText;
+}
+
+export interface ImageNode extends BaseComponentNode {
+  type: "Image";
+  properties: ResolvedImage;
+}
+
+export interface IconNode extends BaseComponentNode {
+  type: "Icon";
+  properties: ResolvedIcon;
+}
+
+export interface VideoNode extends BaseComponentNode {
+  type: "Video";
+  properties: ResolvedVideo;
+}
+
+export interface AudioPlayerNode extends BaseComponentNode {
+  type: "AudioPlayer";
+  properties: ResolvedAudioPlayer;
+}
+
+export interface RowNode extends BaseComponentNode {
+  type: "Row";
+  properties: ResolvedRow;
+}
+
+export interface ColumnNode extends BaseComponentNode {
+  type: "Column";
+  properties: ResolvedColumn;
+}
+
+export interface ListNode extends BaseComponentNode {
+  type: "List";
+  properties: ResolvedList;
+}
+
+export interface CardNode extends BaseComponentNode {
+  type: "Card";
+  properties: ResolvedCard;
+}
+
+export interface TabsNode extends BaseComponentNode {
+  type: "Tabs";
+  properties: ResolvedTabs;
+}
+
+export interface DividerNode extends BaseComponentNode {
+  type: "Divider";
+  properties: ResolvedDivider;
+}
+
+export interface ModalNode extends BaseComponentNode {
+  type: "Modal";
+  properties: ResolvedModal;
+}
+
+export interface ButtonNode extends BaseComponentNode {
+  type: "Button";
+  properties: ResolvedButton;
+}
+
+export interface CheckboxNode extends BaseComponentNode {
+  type: "CheckBox";
+  properties: ResolvedCheckbox;
+}
+
+export interface TextFieldNode extends BaseComponentNode {
+  type: "TextField";
+  properties: ResolvedTextField;
+}
+
+export interface DateTimeInputNode extends BaseComponentNode {
+  type: "DateTimeInput";
+  properties: ResolvedDateTimeInput;
+}
+
+export interface MultipleChoiceNode extends BaseComponentNode {
+  type: "MultipleChoice";
+  properties: ResolvedMultipleChoice;
+}
+
+export interface SliderNode extends BaseComponentNode {
+  type: "Slider";
+  properties: ResolvedSlider;
+}
+
+export interface CustomNode extends BaseComponentNode {
+  type: string;
+  // For custom nodes, properties are just a map of string keys to any resolved value.
+  properties: CustomNodeProperties;
+}
+
+/**
+ * The complete discriminated union of all possible resolved component nodes.
+ * A renderer would use this type for any given node in the component tree.
+ */
+export type AnyComponentNode =
+  | TextNode
+  | IconNode
+  | ImageNode
+  | VideoNode
+  | AudioPlayerNode
+  | RowNode
+  | ColumnNode
+  | ListNode
+  | CardNode
+  | TabsNode
+  | DividerNode
+  | ModalNode
+  | ButtonNode
+  | CheckboxNode
+  | TextFieldNode
+  | DateTimeInputNode
+  | MultipleChoiceNode
+  | SliderNode
+  | CustomNode;
+
+// These components do not contain other components can reuse their
+// original interfaces.
+export type ResolvedText = Text;
+export type ResolvedIcon = Icon;
+export type ResolvedImage = Image;
+export type ResolvedVideo = Video;
+export type ResolvedAudioPlayer = AudioPlayer;
+export type ResolvedDivider = Divider;
+export type ResolvedCheckbox = Checkbox;
+export type ResolvedTextField = TextField;
+export type ResolvedDateTimeInput = DateTimeInput;
+export type ResolvedMultipleChoice = MultipleChoice;
+export type ResolvedSlider = Slider;
+
+export interface ResolvedRow {
+  children: AnyComponentNode[];
+  distribution?:
+  | "start"
+  | "center"
+  | "end"
+  | "spaceBetween"
+  | "spaceAround"
+  | "spaceEvenly";
+  alignment?: "start" | "center" | "end" | "stretch";
+}
+
+export interface ResolvedColumn {
+  children: AnyComponentNode[];
+  distribution?:
+  | "start"
+  | "center"
+  | "end"
+  | "spaceBetween"
+  | "spaceAround"
+  | "spaceEvenly";
+  alignment?: "start" | "center" | "end" | "stretch";
+}
+
+export interface ResolvedButton {
+  child: AnyComponentNode;
+  action: Button["action"];
+}
+
+export interface ResolvedList {
+  children: AnyComponentNode[];
+  direction?: "vertical" | "horizontal";
+  alignment?: "start" | "center" | "end" | "stretch";
+}
+
+export interface ResolvedCard {
+  child: AnyComponentNode;
+  children: AnyComponentNode[];
+}
+
+export interface ResolvedTabItem {
+  title: StringValue;
+  child: AnyComponentNode;
+}
+
+export interface ResolvedTabs {
+  tabItems: ResolvedTabItem[];
+}
+
+export interface ResolvedModal {
+  entryPointChild: AnyComponentNode;
+  contentChild: AnyComponentNode;
+}
+
+export interface CustomNodeProperties {
+  [k: string]: ResolvedValue;
+}
+
+export type SurfaceID = string;
+
+/** The complete state of a single UI surface. */
+export interface Surface {
+  rootComponentId: string | null;
+  componentTree: AnyComponentNode | null;
+  dataModel: DataMap;
+  components: Map<string, ComponentInstance>;
+  styles: Record<string, string>;
+}

vendor/a2ui/renderers/lit/src/0.8/ui/audio.ts

@@ -0,0 +1,96 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StringValue } from "../types/primitives.js";
+import { classMap } from "lit/directives/class-map.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-audioplayer")
+export class Audio extends Root {
+  @property()
+  accessor url: StringValue | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+
+      audio {
+        display: block;
+        width: 100%;
+      }
+    `,
+  ];
+
+  #renderAudio() {
+    if (!this.url) {
+      return nothing;
+    }
+
+    if (this.url && typeof this.url === "object") {
+      if ("literalString" in this.url) {
+        return html`<audio controls src=${this.url.literalString} />`;
+      } else if ("literal" in this.url) {
+        return html`<audio controls src=${this.url.literal} />`;
+      } else if (this.url && "path" in this.url && this.url.path) {
+        if (!this.processor || !this.component) {
+          return html`(no processor)`;
+        }
+
+        const audioUrl = this.processor.getData(
+          this.component,
+          this.url.path,
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        );
+        if (!audioUrl) {
+          return html`Invalid audio URL`;
+        }
+
+        if (typeof audioUrl !== "string") {
+          return html`Invalid audio URL`;
+        }
+        return html`<audio controls src=${audioUrl} />`;
+      }
+    }
+
+    return html`(empty)`;
+  }
+
+  render() {
+    return html`<section
+      class=${classMap(this.theme.components.AudioPlayer)}
+      style=${this.theme.additionalStyles?.AudioPlayer
+        ? styleMap(this.theme.additionalStyles?.AudioPlayer)
+        : nothing}
+    >
+      ${this.#renderAudio()}
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/button.ts

@@ -0,0 +1,65 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StateEvent } from "../events/events.js";
+import { classMap } from "lit/directives/class-map.js";
+import { Action } from "../types/components.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-button")
+export class Button extends Root {
+  @property()
+  accessor action: Action | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<button
+      class=${classMap(this.theme.components.Button)}
+      style=${this.theme.additionalStyles?.Button
+        ? styleMap(this.theme.additionalStyles?.Button)
+        : nothing}
+      @click=${() => {
+        if (!this.action) {
+          return;
+        }
+        const evt = new StateEvent<"a2ui.action">({
+          eventType: "a2ui.action",
+          action: this.action,
+          dataContextPath: this.dataContextPath,
+          sourceComponentId: this.id,
+          sourceComponent: this.component,
+        });
+        this.dispatchEvent(evt);
+      }}
+    >
+      <slot></slot>
+    </button>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/card.ts

@@ -0,0 +1,64 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-card")
+export class Card extends Root {
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+
+      section {
+        height: 100%;
+        width: 100%;
+        min-height: 0;
+        overflow: auto;
+
+        ::slotted(*) {
+          height: 100%;
+          width: 100%;
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html` <section
+      class=${classMap(this.theme.components.Card)}
+      style=${this.theme.additionalStyles?.Card
+        ? styleMap(this.theme.additionalStyles?.Card)
+        : nothing}
+    >
+      <slot></slot>
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/checkbox.ts

@@ -0,0 +1,139 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StringValue, BooleanValue } from "../types/primitives";
+import { classMap } from "lit/directives/class-map.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-checkbox")
+export class Checkbox extends Root {
+  @property()
+  accessor value: BooleanValue | null = null;
+
+  @property()
+  accessor label: StringValue | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+
+      input {
+        display: block;
+        width: 100%;
+      }
+
+      .description {
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+    `,
+  ];
+
+  #setBoundValue(value: string) {
+    if (!this.value || !this.processor) {
+      return;
+    }
+
+    if (!("path" in this.value)) {
+      return;
+    }
+
+    if (!this.value.path) {
+      return;
+    }
+
+    this.processor.setData(
+      this.component,
+      this.value.path,
+      value,
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+    );
+  }
+
+  #renderField(value: boolean | number) {
+    return html` <section
+      class=${classMap(this.theme.components.CheckBox.container)}
+      style=${this.theme.additionalStyles?.CheckBox
+        ? styleMap(this.theme.additionalStyles?.CheckBox)
+        : nothing}
+    >
+      <input
+        class=${classMap(this.theme.components.CheckBox.element)}
+        autocomplete="off"
+        @input=${(evt: Event) => {
+          if (!(evt.target instanceof HTMLInputElement)) {
+            return;
+          }
+
+          this.#setBoundValue(evt.target.value);
+        }}
+        id="data"
+        type="checkbox"
+        .value=${value}
+      />
+      <label class=${classMap(this.theme.components.CheckBox.label)} for="data"
+        >${this.label?.literalString}</label
+      >
+    </section>`;
+  }
+
+  render() {
+    if (this.value && typeof this.value === "object") {
+      if ("literalBoolean" in this.value && this.value.literalBoolean) {
+        return this.#renderField(this.value.literalBoolean);
+      } else if ("literal" in this.value && this.value.literal !== undefined) {
+        return this.#renderField(this.value.literal);
+      } else if (this.value && "path" in this.value && this.value.path) {
+        if (!this.processor || !this.component) {
+          return html`(no model)`;
+        }
+
+        const textValue = this.processor.getData(
+          this.component,
+          this.value.path,
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        );
+
+        if (textValue === null) {
+          return html`Invalid label`;
+        }
+
+        if (typeof textValue !== "boolean") {
+          return html`Invalid label`;
+        }
+
+        return this.#renderField(textValue);
+      }
+    }
+
+    return nothing;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/column.ts

@@ -0,0 +1,104 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ResolvedColumn } from "../types/types";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-column")
+export class Column extends Root {
+  @property({ reflect: true, type: String })
+  accessor alignment: ResolvedColumn["alignment"] = "stretch";
+
+  @property({ reflect: true, type: String })
+  accessor distribution: ResolvedColumn["distribution"] = "start";
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: flex;
+        flex: var(--weight);
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        min-width: 100%;
+        height: 100%;
+      }
+
+      :host([alignment="start"]) section {
+        align-items: start;
+      }
+
+      :host([alignment="center"]) section {
+        align-items: center;
+      }
+
+      :host([alignment="end"]) section {
+        align-items: end;
+      }
+
+      :host([alignment="stretch"]) section {
+        align-items: stretch;
+      }
+
+      :host([distribution="start"]) section {
+        justify-content: start;
+      }
+
+      :host([distribution="center"]) section {
+        justify-content: center;
+      }
+
+      :host([distribution="end"]) section {
+        justify-content: end;
+      }
+
+      :host([distribution="spaceBetween"]) section {
+        justify-content: space-between;
+      }
+
+      :host([distribution="spaceAround"]) section {
+        justify-content: space-around;
+      }
+
+      :host([distribution="spaceEvenly"]) section {
+        justify-content: space-evenly;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<section
+      class=${classMap(this.theme.components.Column)}
+      style=${this.theme.additionalStyles?.Column
+        ? styleMap(this.theme.additionalStyles?.Column)
+        : nothing}
+    >
+      <slot></slot>
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/component-registry.ts

@@ -0,0 +1,58 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { CustomElementConstructorOf } from "./ui.js";
+
+export class ComponentRegistry {
+  private registry: Map<string, CustomElementConstructorOf<HTMLElement>> =
+    new Map();
+
+  register(
+    typeName: string,
+    constructor: CustomElementConstructorOf<HTMLElement>,
+    tagName?: string
+  ) {
+    if (!/^[a-zA-Z0-9]+$/.test(typeName)) {
+      throw new Error(
+        `[Registry] Invalid typeName '${typeName}'. Must be alphanumeric.`
+      );
+    }
+
+    this.registry.set(typeName, constructor);
+    const actualTagName = tagName || `a2ui-custom-${typeName.toLowerCase()}`;
+
+    const existingName = customElements.getName(constructor);
+    if (existingName) {
+      // Constructor is already registered.
+      if (existingName !== actualTagName) {
+        throw new Error(
+          `Component ${typeName} is already registered as ${existingName}, but requested as ${actualTagName}.`
+        );
+      }
+      return;
+    }
+
+    if (!customElements.get(actualTagName)) {
+      customElements.define(actualTagName, constructor);
+    }
+  }
+
+  get(typeName: string): CustomElementConstructorOf<HTMLElement> | undefined {
+    return this.registry.get(typeName);
+  }
+}
+
+export const componentRegistry = new ComponentRegistry();

vendor/a2ui/renderers/lit/src/0.8/ui/context/theme.ts

@@ -0,0 +1,20 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { createContext } from "@lit/context";
+import { type Theme } from "../../types/types.js";
+
+export const themeContext = createContext<Theme | undefined>("A2UITheme");

vendor/a2ui/renderers/lit/src/0.8/ui/custom-components/index.ts

@@ -0,0 +1,22 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { ComponentRegistry } from '../component-registry.js';
+
+export function registerCustomComponents() {
+  // No default custom components in the core library.
+  // Applications should register their own components.
+}

vendor/a2ui/renderers/lit/src/0.8/ui/datetime-input.ts

@@ -0,0 +1,197 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StringValue } from "../types/primitives.js";
+import { classMap } from "lit/directives/class-map.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-datetimeinput")
+export class DateTimeInput extends Root {
+  @property()
+  accessor value: StringValue | null = null;
+
+  @property()
+  accessor label: StringValue | null = null;
+
+  @property({ reflect: false, type: Boolean })
+  accessor enableDate = true;
+
+  @property({ reflect: false, type: Boolean })
+  accessor enableTime = true;
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+
+      input {
+        display: block;
+        border-radius: 8px;
+        padding: 8px;
+        border: 1px solid #ccc;
+        width: 100%;
+      }
+    `,
+  ];
+
+  #setBoundValue(value: string) {
+    if (!this.value || !this.processor) {
+      return;
+    }
+
+    if (!("path" in this.value)) {
+      return;
+    }
+
+    if (!this.value.path) {
+      return;
+    }
+
+    this.processor.setData(
+      this.component,
+      this.value.path,
+      value,
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+    );
+  }
+
+  #renderField(value: string) {
+    return html`<section
+      class=${classMap(this.theme.components.DateTimeInput.container)}
+    >
+      <label
+        for="data"
+        class=${classMap(this.theme.components.DateTimeInput.label)}
+        >${this.#getPlaceholderText()}</label
+      >
+      <input
+        autocomplete="off"
+        class=${classMap(this.theme.components.DateTimeInput.element)}
+        style=${this.theme.additionalStyles?.DateTimeInput
+          ? styleMap(this.theme.additionalStyles?.DateTimeInput)
+          : nothing}
+        @input=${(evt: Event) => {
+          if (!(evt.target instanceof HTMLInputElement)) {
+            return;
+          }
+
+          this.#setBoundValue(evt.target.value);
+        }}
+        id="data"
+        name="data"
+        .value=${this.#formatInputValue(value)}
+        .placeholder=${this.#getPlaceholderText()}
+        .type=${this.#getInputType()}
+      />
+    </section>`;
+  }
+
+  #getInputType() {
+    if (this.enableDate && this.enableTime) {
+      return "datetime-local";
+    } else if (this.enableDate) {
+      return "date";
+    } else if (this.enableTime) {
+      return "time";
+    }
+
+    return "datetime-local";
+  }
+
+  #formatInputValue(value: string) {
+    const inputType = this.#getInputType();
+    const date = value ? new Date(value) : null;
+
+    if (!date || isNaN(date.getTime())) {
+      return "";
+    }
+
+    const year = this.#padNumber(date.getFullYear());
+    const month = this.#padNumber(date.getMonth());
+    const day = this.#padNumber(date.getDate());
+    const hours = this.#padNumber(date.getHours());
+    const minutes = this.#padNumber(date.getMinutes());
+
+    // Browsers are picky with what format they allow for the `value` attribute of date/time inputs.
+    // We need to parse it out of the provided value. Note that we don't use `toISOString`,
+    // because the resulting value is relative to UTC.
+    if (inputType === "date") {
+      return `${year}-${month}-${day}`;
+    } else if (inputType === "time") {
+      return `${hours}:${minutes}`;
+    }
+
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+  }
+
+  #padNumber(value: number) {
+    return value.toString().padStart(2, "0");
+  }
+
+  #getPlaceholderText() {
+    // TODO: this should likely be passed from the model.
+    const inputType = this.#getInputType();
+
+    if (inputType === "date") {
+      return "Date";
+    } else if (inputType === "time") {
+      return "Time";
+    }
+
+    return "Date & Time";
+  }
+
+  render() {
+    if (this.value && typeof this.value === "object") {
+      if ("literalString" in this.value && this.value.literalString) {
+        return this.#renderField(this.value.literalString);
+      } else if ("literal" in this.value && this.value.literal !== undefined) {
+        return this.#renderField(this.value.literal);
+      } else if (this.value && "path" in this.value && this.value.path) {
+        if (!this.processor || !this.component) {
+          return html`(no model)`;
+        }
+
+        const textValue = this.processor.getData(
+          this.component,
+          this.value.path,
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        );
+        if (typeof textValue !== "string") {
+          return html`(invalid)`;
+        }
+
+        return this.#renderField(textValue);
+      }
+    }
+
+    return nothing;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/directives/directives.ts

@@ -0,0 +1,17 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export { markdown } from "./markdown.js";

vendor/a2ui/renderers/lit/src/0.8/ui/directives/markdown.ts

@@ -0,0 +1,152 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { noChange } from "lit";
+import {
+  Directive,
+  DirectiveParameters,
+  Part,
+  directive,
+} from "lit/directive.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import MarkdownIt from "markdown-it";
+import { RenderRule } from "markdown-it/lib/renderer.mjs";
+import * as Sanitizer from "./sanitizer.js";
+
+class MarkdownDirective extends Directive {
+  #markdownIt = MarkdownIt({
+    highlight: (str, lang) => {
+      switch (lang) {
+        case "html": {
+          const iframe = document.createElement("iframe");
+          iframe.classList.add("html-view");
+          iframe.srcdoc = str;
+          iframe.sandbox = "";
+          return iframe.innerHTML;
+        }
+
+        default:
+          return Sanitizer.escapeNodeText(str);
+      }
+    },
+  });
+  #lastValue: string | null = null;
+  #lastTagClassMap: string | null = null;
+
+  update(_part: Part, [value, tagClassMap]: DirectiveParameters<this>) {
+    if (
+      this.#lastValue === value &&
+      JSON.stringify(tagClassMap) === this.#lastTagClassMap
+    ) {
+      return noChange;
+    }
+
+    this.#lastValue = value;
+    this.#lastTagClassMap = JSON.stringify(tagClassMap);
+    return this.render(value, tagClassMap);
+  }
+
+  #originalClassMap = new Map<string, RenderRule | undefined>();
+  #applyTagClassMap(tagClassMap: Record<string, string[]>) {
+    Object.entries(tagClassMap).forEach(([tag]) => {
+      let tokenName;
+      switch (tag) {
+        case "p":
+          tokenName = "paragraph";
+          break;
+        case "h1":
+        case "h2":
+        case "h3":
+        case "h4":
+        case "h5":
+        case "h6":
+          tokenName = "heading";
+          break;
+        case "ul":
+          tokenName = "bullet_list";
+          break;
+        case "ol":
+          tokenName = "ordered_list";
+          break;
+        case "li":
+          tokenName = "list_item";
+          break;
+        case "a":
+          tokenName = "link";
+          break;
+        case "strong":
+          tokenName = "strong";
+          break;
+        case "em":
+          tokenName = "em";
+          break;
+      }
+
+      if (!tokenName) {
+        return;
+      }
+
+      const key = `${tokenName}_open`;
+      this.#markdownIt.renderer.rules[key] = (
+        tokens,
+        idx,
+        options,
+        _env,
+        self
+      ) => {
+        const token = tokens[idx];
+        const tokenClasses = tagClassMap[token.tag] ?? [];
+        for (const clazz of tokenClasses) {
+          token.attrJoin("class", clazz);
+        }
+
+        return self.renderToken(tokens, idx, options);
+      };
+    });
+  }
+
+  #unapplyTagClassMap() {
+    for (const [key] of this.#originalClassMap) {
+      delete this.#markdownIt.renderer.rules[key];
+    }
+
+    this.#originalClassMap.clear();
+  }
+
+  /**
+   * Renders the markdown string to HTML using MarkdownIt.
+   *
+   * Note: MarkdownIt doesn't enable HTML in its output, so we render the
+   * value directly without further sanitization.
+   * @see https://github.com/markdown-it/markdown-it/blob/master/docs/security.md
+   */
+  render(value: string, tagClassMap?: Record<string, string[]>) {
+    if (tagClassMap) {
+      this.#applyTagClassMap(tagClassMap);
+    }
+    const htmlString = this.#markdownIt.render(value);
+    this.#unapplyTagClassMap();
+
+    return unsafeHTML(htmlString);
+  }
+}
+
+export const markdown = directive(MarkdownDirective);
+
+const markdownItStandalone = MarkdownIt();
+export function renderMarkdownToHtmlString(value: string): string {
+  return markdownItStandalone.render(value);
+}

vendor/a2ui/renderers/lit/src/0.8/ui/directives/sanitizer.ts

@@ -0,0 +1,40 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, render } from "lit";
+
+/**
+ * This is only safe for (and intended to be used for) text node positions. If
+ * you are using attribute position, then this is only safe if the attribute
+ * value is surrounded by double-quotes, and is unsafe otherwise (because the
+ * value could break out of the attribute value and e.g. add another attribute).
+ */
+export function escapeNodeText(str: string | null | undefined) {
+  const frag = document.createElement("div");
+  render(html`${str}`, frag);
+
+  return frag.innerHTML.replaceAll(/<!--([^-]*)-->/gim, "");
+}
+
+export function unescapeNodeText(str: string | null | undefined) {
+  if (!str) {
+    return "";
+  }
+
+  const frag = document.createElement("textarea");
+  frag.innerHTML = str;
+  return frag.value;
+}

vendor/a2ui/renderers/lit/src/0.8/ui/divider.ts

@@ -0,0 +1,51 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-divider")
+export class Divider extends Root {
+  static styles = [
+    structuralStyles,
+    css`
+      :host {
+        display: block;
+        min-height: 0;
+        overflow: auto;
+      }
+
+      hr {
+        height: 1px;
+        background: #ccc;
+        border: none;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<hr
+      class=${classMap(this.theme.components.Divider)}
+      style=${this.theme.additionalStyles?.Divider
+        ? styleMap(this.theme.additionalStyles?.Divider)
+        : nothing}
+    />`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/icon.ts

@@ -0,0 +1,98 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StringValue } from "../types/primitives.js";
+import { classMap } from "lit/directives/class-map.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-icon")
+export class Icon extends Root {
+  @property()
+  accessor name: StringValue | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+    `,
+  ];
+
+  #renderIcon() {
+    if (!this.name) {
+      return nothing;
+    }
+
+    const render = (url: string) => {
+      url = url.replace(/([A-Z])/gm, "_$1").toLocaleLowerCase();
+      return html`<span class="g-icon">${url}</span>`;
+    };
+
+    if (this.name && typeof this.name === "object") {
+      if ("literalString" in this.name) {
+        const iconName = this.name.literalString ?? "";
+        return render(iconName);
+      } else if ("literal" in this.name) {
+        const iconName = this.name.literal ?? "";
+        return render(iconName);
+      } else if (this.name && "path" in this.name && this.name.path) {
+        if (!this.processor || !this.component) {
+          return html`(no model)`;
+        }
+
+        const iconName = this.processor.getData(
+          this.component,
+          this.name.path,
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        );
+        if (!iconName) {
+          return html`Invalid icon name`;
+        }
+
+        if (typeof iconName !== "string") {
+          return html`Invalid icon name`;
+        }
+        return render(iconName);
+      }
+    }
+
+    return html`(empty)`;
+  }
+
+  render() {
+    return html`<section
+      class=${classMap(this.theme.components.Icon)}
+      style=${this.theme.additionalStyles?.Icon
+        ? styleMap(this.theme.additionalStyles?.Icon)
+        : nothing}
+    >
+      ${this.#renderIcon()}
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/image.ts

@@ -0,0 +1,118 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StringValue } from "../types/primitives.js";
+import { classMap } from "lit/directives/class-map.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+import { ResolvedImage } from "../types/types.js";
+import { Styles } from "../index.js";
+
+@customElement("a2ui-image")
+export class Image extends Root {
+  @property()
+  accessor url: StringValue | null = null;
+
+  @property()
+  accessor usageHint: ResolvedImage["usageHint"] | null = null;
+
+  @property()
+  accessor fit: "contain" | "cover" | "fill" | "none" | "scale-down" | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: var(--object-fit, fill);
+      }
+    `,
+  ];
+
+  #renderImage() {
+    if (!this.url) {
+      return nothing;
+    }
+
+    const render = (url: string) => {
+      return html`<img src=${url} />`;
+    };
+
+    if (this.url && typeof this.url === "object") {
+      if ("literalString" in this.url) {
+        const imageUrl = this.url.literalString ?? "";
+        return render(imageUrl);
+      } else if ("literal" in this.url) {
+        const imageUrl = this.url.literal ?? "";
+        return render(imageUrl);
+      } else if (this.url && "path" in this.url && this.url.path) {
+        if (!this.processor || !this.component) {
+          return html`(no model)`;
+        }
+
+        const imageUrl = this.processor.getData(
+          this.component,
+          this.url.path,
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        );
+        if (!imageUrl) {
+          return html`Invalid image URL`;
+        }
+
+        if (typeof imageUrl !== "string") {
+          return html`Invalid image URL`;
+        }
+        return render(imageUrl);
+      }
+    }
+
+    return html`(empty)`;
+  }
+
+  render() {
+    const classes = Styles.merge(
+      this.theme.components.Image.all,
+      this.usageHint ? this.theme.components.Image[this.usageHint] : {}
+    );
+
+    return html`<section
+      class=${classMap(classes)}
+      style=${styleMap({
+        ...(this.theme.additionalStyles?.Image ?? {}),
+        "--object-fit": this.fit ?? "fill",
+      })}
+    >
+      ${this.#renderImage()}
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/list.ts

@@ -0,0 +1,72 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-list")
+export class List extends Root {
+  @property({ reflect: true, type: String })
+  accessor direction: "vertical" | "horizontal" = "vertical";
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+
+      :host([direction="vertical"]) section {
+        display: grid;
+      }
+
+      :host([direction="horizontal"]) section {
+        display: flex;
+        max-width: 100%;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        scrollbar-width: none;
+
+        > ::slotted(*) {
+          flex: 1 0 fit-content;
+          max-width: min(80%, 400px);
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html`<section
+      class=${classMap(this.theme.components.List)}
+      style=${this.theme.additionalStyles?.List
+        ? styleMap(this.theme.additionalStyles?.List)
+        : nothing}
+    >
+      <slot></slot>
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/modal.ts

@@ -0,0 +1,131 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, query, state } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+import { ref } from "lit/directives/ref.js";
+
+@customElement("a2ui-modal")
+export class Modal extends Root {
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      dialog {
+        padding: 0 0 0 0;
+        border: none;
+        background: none;
+
+        & section {
+          & #controls {
+            display: flex;
+            justify-content: end;
+            margin-bottom: 4px;
+
+            & button {
+              padding: 0;
+              background: none;
+              width: 20px;
+              height: 20px;
+              pointer: cursor;
+              border: none;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    `,
+  ];
+
+  @state()
+  accessor #showModal = false;
+
+  @query("dialog")
+  accessor #modalRef: HTMLDialogElement | null = null;
+
+  #closeModal() {
+    if (!this.#modalRef) {
+      return;
+    }
+
+    if (this.#modalRef.open) {
+      this.#modalRef.close();
+    }
+
+    this.#showModal = false;
+  }
+
+  render() {
+    if (!this.#showModal) {
+      return html`<section
+        @click=${() => {
+          this.#showModal = true;
+        }}
+      >
+        <slot name="entry"></slot>
+      </section>`;
+    }
+
+    return html`<dialog
+      class=${classMap(this.theme.components.Modal.backdrop)}
+      @click=${(evt: Event) => {
+        // Only clicks on the background close the dialog.
+        const [top] = evt.composedPath();
+        if (!(top instanceof HTMLDialogElement)) {
+          return;
+        }
+
+        this.#closeModal();
+      }}
+      ${ref((el?: Element) => {
+        const showModalIfNeeded = () => {
+          const validElement = el && el instanceof HTMLDialogElement;
+          if (!validElement || el.open) {
+            return;
+          }
+
+          el.showModal();
+        };
+        requestAnimationFrame(showModalIfNeeded);
+      })}
+    >
+      <section
+        class=${classMap(this.theme.components.Modal.element)}
+        style=${this.theme.additionalStyles?.Modal
+        ? styleMap(this.theme.additionalStyles?.Modal)
+        : nothing}
+      >
+        <div id="controls">
+          <button
+            @click=${() => {
+        this.#closeModal();
+      }}
+          >
+            <span class="g-icon">close</span>
+          </button>
+        </div>
+        <slot></slot>
+      </section>
+    </dialog>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/multiple-choice.ts

@@ -0,0 +1,142 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, PropertyValues, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StringValue } from "../types/primitives.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+import { extractStringValue } from "./utils/utils.js";
+
+@customElement("a2ui-multiplechoice")
+export class MultipleChoice extends Root {
+  @property()
+  accessor description: string | null = null;
+
+  @property()
+  accessor options: { label: StringValue; value: string }[] = [];
+
+  @property()
+  accessor selections: StringValue | string[] = [];
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+
+      select {
+        width: 100%;
+      }
+
+      .description {
+      }
+    `,
+  ];
+
+  #setBoundValue(value: string[]) {
+    console.log(value);
+    if (!this.selections || !this.processor) {
+      return;
+    }
+    if (!("path" in this.selections)) {
+      return;
+    }
+    if (!this.selections.path) {
+      return;
+    }
+
+    this.processor.setData(
+      this.component,
+      this.selections.path,
+      value,
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+    );
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    const shouldUpdate = changedProperties.has("options");
+    if (!shouldUpdate) {
+      return;
+    }
+
+    if (!this.processor || !this.component || Array.isArray(this.selections)) {
+      return;
+    }
+
+    this.selections;
+
+    const selectionValue = this.processor.getData(
+      this.component,
+      this.selections.path!,
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+    );
+
+    if (!Array.isArray(selectionValue)) {
+      return;
+    }
+
+    this.#setBoundValue(selectionValue as string[]);
+  }
+
+  render() {
+    return html`<section class=${classMap(
+      this.theme.components.MultipleChoice.container
+    )}>
+      <label class=${classMap(
+        this.theme.components.MultipleChoice.label
+      )} for="data">${this.description ?? "Select an item"}</div>
+      <select
+        name="data"
+        id="data"
+        class=${classMap(this.theme.components.MultipleChoice.element)}
+        style=${
+          this.theme.additionalStyles?.MultipleChoice
+            ? styleMap(this.theme.additionalStyles?.MultipleChoice)
+            : nothing
+        }
+        @change=${(evt: Event) => {
+          if (!(evt.target instanceof HTMLSelectElement)) {
+            return;
+          }
+
+          this.#setBoundValue([evt.target.value]);
+        }}
+      >
+        ${this.options.map((option) => {
+          const label = extractStringValue(
+            option.label,
+            this.component,
+            this.processor,
+            this.surfaceId
+          );
+          return html`<option ${option.value}>${label}</option>`;
+        })}
+      </select>
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/root.ts

@@ -0,0 +1,532 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { SignalWatcher } from "@lit-labs/signals";
+import { consume } from "@lit/context";
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+  render,
+  TemplateResult,
+} from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+import { effect } from "signal-utils/subtle/microtask-effect";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { StringValue } from "../types/primitives.js";
+import { Theme, AnyComponentNode, SurfaceID } from "../types/types.js";
+import { themeContext } from "./context/theme.js";
+import { structuralStyles } from "./styles.js";
+import { componentRegistry } from "./component-registry.js";
+
+type NodeOfType<T extends AnyComponentNode["type"]> = Extract<
+  AnyComponentNode,
+  { type: T }
+>;
+
+// This is the base class all the components will inherit
+@customElement("a2ui-root")
+export class Root extends SignalWatcher(LitElement) {
+  @property()
+  accessor surfaceId: SurfaceID | null = null;
+
+  @property()
+  accessor component: AnyComponentNode | null = null;
+
+  @consume({ context: themeContext })
+  accessor theme!: Theme;
+
+  @property({ attribute: false })
+  accessor childComponents: AnyComponentNode[] | null = null;
+
+  @property({ attribute: false })
+  accessor processor: A2uiMessageProcessor | null = null;
+
+  @property()
+  accessor dataContextPath: string = "";
+
+  @property()
+  accessor enableCustomElements = false;
+
+  @property()
+  set weight(weight: string | number) {
+    this.#weight = weight;
+    this.style.setProperty("--weight", `${weight}`);
+  }
+
+  get weight() {
+    return this.#weight;
+  }
+
+  #weight: string | number = 1;
+
+  static styles = [
+    structuralStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        max-height: 80%;
+      }
+    `,
+  ];
+
+  /**
+   * Holds the cleanup function for our effect.
+   * We need this to stop the effect when the component is disconnected.
+   */
+  #lightDomEffectDisposer: null | (() => void) = null;
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("childComponents")) {
+      if (this.#lightDomEffectDisposer) {
+        this.#lightDomEffectDisposer();
+      }
+
+      // This effect watches the A2UI Children signal and updates the Light DOM.
+      this.#lightDomEffectDisposer = effect(() => {
+        // 1. Read the signal to create the subscription.
+        const allChildren = this.childComponents ?? null;
+
+        // 2. Generate the template for the children.
+        const lightDomTemplate = this.renderComponentTree(allChildren);
+
+        // 3. Imperatively render that template into the component itself.
+        render(lightDomTemplate, this, { host: this });
+      });
+    }
+  }
+
+  /**
+   * Clean up the effect when the component is removed from the DOM.
+   */
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    if (this.#lightDomEffectDisposer) {
+      this.#lightDomEffectDisposer();
+    }
+  }
+
+  /**
+   * Turns the SignalMap into a renderable TemplateResult for Lit.
+   */
+  private renderComponentTree(
+    components: AnyComponentNode[] | null
+  ): TemplateResult | typeof nothing {
+    if (!components) {
+      return nothing;
+    }
+
+    if (!Array.isArray(components)) {
+      return nothing;
+    }
+
+    return html` ${map(components, (component) => {
+      // 1. Check if there is a registered custom component or override.
+      if (this.enableCustomElements) {
+        const registeredCtor = componentRegistry.get(component.type);
+        // We also check customElements.get for non-registered but defined elements
+        const elCtor = registeredCtor || customElements.get(component.type);
+
+        if (elCtor) {
+          const node = component as AnyComponentNode;
+          const el = new elCtor() as Root;
+          el.id = node.id;
+          if (node.slotName) {
+            el.slot = node.slotName;
+          }
+          el.component = node;
+          el.weight = node.weight ?? "initial";
+          el.processor = this.processor;
+          el.surfaceId = this.surfaceId;
+          el.dataContextPath = node.dataContextPath ?? "/";
+
+          for (const [prop, val] of Object.entries(component.properties)) {
+            // @ts-expect-error We're off the books.
+            el[prop] = val;
+          }
+          return html`${el}`;
+        }
+      }
+
+      // 2. Fallback to standard components.
+      switch (component.type) {
+        case "List": {
+          const node = component as NodeOfType<"List">;
+          const childComponents = node.properties.children;
+          return html`<a2ui-list
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .direction=${node.properties.direction ?? "vertical"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .childComponents=${childComponents}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-list>`;
+        }
+
+        case "Card": {
+          const node = component as NodeOfType<"Card">;
+          let childComponents: AnyComponentNode[] | null =
+            node.properties.children;
+          if (!childComponents && node.properties.child) {
+            childComponents = [node.properties.child];
+          }
+
+          return html`<a2ui-card
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .childComponents=${childComponents}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-card>`;
+        }
+
+        case "Column": {
+          const node = component as NodeOfType<"Column">;
+          return html`<a2ui-column
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .childComponents=${node.properties.children ?? null}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .alignment=${node.properties.alignment ?? "stretch"}
+            .distribution=${node.properties.distribution ?? "start"}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-column>`;
+        }
+
+        case "Row": {
+          const node = component as NodeOfType<"Row">;
+          return html`<a2ui-row
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .childComponents=${node.properties.children ?? null}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .alignment=${node.properties.alignment ?? "stretch"}
+            .distribution=${node.properties.distribution ?? "start"}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-row>`;
+        }
+
+        case "Image": {
+          const node = component as NodeOfType<"Image">;
+          return html`<a2ui-image
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .url=${node.properties.url ?? null}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .usageHint=${node.properties.usageHint}
+            .fit=${node.properties.fit}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-image>`;
+        }
+
+        case "Icon": {
+          const node = component as NodeOfType<"Icon">;
+          return html`<a2ui-icon
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .name=${node.properties.name ?? null}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-icon>`;
+        }
+
+        case "AudioPlayer": {
+          const node = component as NodeOfType<"AudioPlayer">;
+          return html`<a2ui-audioplayer
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .url=${node.properties.url ?? null}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-audioplayer>`;
+        }
+
+        case "Button": {
+          const node = component as NodeOfType<"Button">;
+          return html`<a2ui-button
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .action=${node.properties.action}
+            .childComponents=${[node.properties.child]}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-button>`;
+        }
+
+        case "Text": {
+          const node = component as NodeOfType<"Text">;
+          return html`<a2ui-text
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .model=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .processor=${this.processor}
+            .dataContextPath=${node.dataContextPath}
+            .text=${node.properties.text}
+            .usageHint=${node.properties.usageHint}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-text>`;
+        }
+
+        case "CheckBox": {
+          const node = component as NodeOfType<"CheckBox">;
+          return html`<a2ui-checkbox
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .label=${node.properties.label}
+            .value=${node.properties.value}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-checkbox>`;
+        }
+
+        case "DateTimeInput": {
+          const node = component as NodeOfType<"DateTimeInput">;
+          return html`<a2ui-datetimeinput
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath ?? ""}
+            .enableDate=${node.properties.enableDate ?? true}
+            .enableTime=${node.properties.enableTime ?? true}
+            .outputFormat=${node.properties.outputFormat}
+            .value=${node.properties.value}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-datetimeinput>`;
+        }
+
+        case "Divider": {
+          // TODO: thickness, axis and color.
+          const node = component as NodeOfType<"Divider">;
+          return html`<a2ui-divider
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath}
+            .thickness=${node.properties.thickness}
+            .axis=${node.properties.axis}
+            .color=${node.properties.color}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-divider>`;
+        }
+
+        case "MultipleChoice": {
+          // TODO: maxAllowedSelections and selections.
+          const node = component as NodeOfType<"MultipleChoice">;
+          return html`<a2ui-multiplechoice
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath}
+            .options=${node.properties.options}
+            .maxAllowedSelections=${node.properties.maxAllowedSelections}
+            .selections=${node.properties.selections}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-multiplechoice>`;
+        }
+
+        case "Slider": {
+          const node = component as NodeOfType<"Slider">;
+          return html`<a2ui-slider
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath}
+            .value=${node.properties.value}
+            .minValue=${node.properties.minValue}
+            .maxValue=${node.properties.maxValue}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-slider>`;
+        }
+
+        case "TextField": {
+          // TODO: type and validationRegexp.
+          const node = component as NodeOfType<"TextField">;
+          return html`<a2ui-textfield
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath}
+            .label=${node.properties.label}
+            .text=${node.properties.text}
+            .type=${node.properties.type}
+            .validationRegexp=${node.properties.validationRegexp}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-textfield>`;
+        }
+
+        case "Video": {
+          const node = component as NodeOfType<"Video">;
+          return html`<a2ui-video
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath}
+            .url=${node.properties.url}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-video>`;
+        }
+
+        case "Tabs": {
+          const node = component as NodeOfType<"Tabs">;
+          const titles: StringValue[] = [];
+          const childComponents: AnyComponentNode[] = [];
+          if (node.properties.tabItems) {
+            for (const item of node.properties.tabItems) {
+              titles.push(item.title);
+              childComponents.push(item.child);
+            }
+          }
+
+          return html`<a2ui-tabs
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath}
+            .titles=${titles}
+            .childComponents=${childComponents}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-tabs>`;
+        }
+
+        case "Modal": {
+          const node = component as NodeOfType<"Modal">;
+          const childComponents: AnyComponentNode[] = [
+            node.properties.entryPointChild,
+            node.properties.contentChild,
+          ];
+
+          node.properties.entryPointChild.slotName = "entry";
+
+          return html`<a2ui-modal
+            id=${node.id}
+            slot=${node.slotName ? node.slotName : nothing}
+            .component=${node}
+            .weight=${node.weight ?? "initial"}
+            .processor=${this.processor}
+            .surfaceId=${this.surfaceId}
+            .dataContextPath=${node.dataContextPath}
+            .childComponents=${childComponents}
+            .enableCustomElements=${this.enableCustomElements}
+          ></a2ui-modal>`;
+        }
+
+        default: {
+          return this.renderCustomComponent(component);
+        }
+      }
+    })}`;
+  }
+
+  private renderCustomComponent(component: AnyComponentNode) {
+    if (!this.enableCustomElements) {
+      return;
+    }
+
+    const node = component as AnyComponentNode;
+    const registeredCtor = componentRegistry.get(component.type);
+    const elCtor = registeredCtor || customElements.get(component.type);
+
+    if (!elCtor) {
+      return html`Unknown element ${component.type}`;
+    }
+
+    const el = new elCtor() as Root;
+    el.id = node.id;
+    if (node.slotName) {
+      el.slot = node.slotName;
+    }
+    el.component = node;
+    el.weight = node.weight ?? "initial";
+    el.processor = this.processor;
+    el.surfaceId = this.surfaceId;
+    el.dataContextPath = node.dataContextPath ?? "/";
+
+    for (const [prop, val] of Object.entries(component.properties)) {
+      // @ts-expect-error We're off the books.
+      el[prop] = val;
+    }
+    return html`${el}`;
+  }
+
+  render(): TemplateResult | typeof nothing {
+    return html`<slot></slot>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/row.ts

@@ -0,0 +1,104 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ResolvedRow } from "../types/types";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-row")
+export class Row extends Root {
+  @property({ reflect: true, type: String })
+  accessor alignment: ResolvedRow["alignment"] = "stretch";
+
+  @property({ reflect: true, type: String })
+  accessor distribution: ResolvedRow["distribution"] = "start";
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: flex;
+        flex: var(--weight);
+      }
+
+      section {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        min-height: 100%;
+      }
+
+      :host([alignment="start"]) section {
+        align-items: start;
+      }
+
+      :host([alignment="center"]) section {
+        align-items: center;
+      }
+
+      :host([alignment="end"]) section {
+        align-items: end;
+      }
+
+      :host([alignment="stretch"]) section {
+        align-items: stretch;
+      }
+
+      :host([distribution="start"]) section {
+        justify-content: start;
+      }
+
+      :host([distribution="center"]) section {
+        justify-content: center;
+      }
+
+      :host([distribution="end"]) section {
+        justify-content: end;
+      }
+
+      :host([distribution="spaceBetween"]) section {
+        justify-content: space-between;
+      }
+
+      :host([distribution="spaceAround"]) section {
+        justify-content: space-around;
+      }
+
+      :host([distribution="spaceEvenly"]) section {
+        justify-content: space-evenly;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<section
+      class=${classMap(this.theme.components.Row)}
+      style=${this.theme.additionalStyles?.Row
+        ? styleMap(this.theme.additionalStyles?.Row)
+        : nothing}
+    >
+      <slot></slot>
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/slider.ts

@@ -0,0 +1,159 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { NumberValue, StringValue } from "../types/primitives";
+import { ResolvedTextField } from "../types/types.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+import { extractNumberValue, extractStringValue } from "./utils/utils.js";
+
+@customElement("a2ui-slider")
+export class Slider extends Root {
+  @property()
+  accessor value: NumberValue | null = null;
+
+  @property()
+  accessor minValue = 0;
+
+  @property()
+  accessor maxValue = 0;
+
+  @property()
+  accessor label: StringValue | null = null;
+
+  @property()
+  accessor inputType: ResolvedTextField["type"] | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+      }
+
+      input {
+        display: block;
+        width: 100%;
+      }
+
+      .description {
+      }
+    `,
+  ];
+
+  #setBoundValue(value: string) {
+    if (!this.value || !this.processor) {
+      return;
+    }
+
+    if (!("path" in this.value)) {
+      return;
+    }
+
+    if (!this.value.path) {
+      return;
+    }
+
+    this.processor.setData(
+      this.component,
+      this.value.path,
+      value,
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+    );
+  }
+
+  #renderField(value: string | number) {
+    return html`<section
+      class=${classMap(this.theme.components.Slider.container)}
+    >
+      <label class=${classMap(this.theme.components.Slider.label)} for="data">
+        ${this.label?.literalString ?? ""}
+      </label>
+      <input
+        autocomplete="off"
+        class=${classMap(this.theme.components.Slider.element)}
+        style=${this.theme.additionalStyles?.Slider
+          ? styleMap(this.theme.additionalStyles?.Slider)
+          : nothing}
+        @input=${(evt: Event) => {
+          if (!(evt.target instanceof HTMLInputElement)) {
+            return;
+          }
+
+          this.#setBoundValue(evt.target.value);
+        }}
+        id="data"
+        name="data"
+        .value=${value}
+        type="range"
+        min=${this.minValue ?? "0"}
+        max=${this.maxValue ?? "0"}
+      />
+      <span class=${classMap(this.theme.components.Slider.label)}
+        >${this.value
+          ? extractNumberValue(
+              this.value,
+              this.component,
+              this.processor,
+              this.surfaceId
+            )
+          : "0"}</span
+      >
+    </section>`;
+  }
+
+  render() {
+    if (this.value && typeof this.value === "object") {
+      if ("literalNumber" in this.value && this.value.literalNumber) {
+        return this.#renderField(this.value.literalNumber);
+      } else if ("literal" in this.value && this.value.literal !== undefined) {
+        return this.#renderField(this.value.literal);
+      } else if (this.value && "path" in this.value && this.value.path) {
+        if (!this.processor || !this.component) {
+          return html`(no processor)`;
+        }
+
+        const textValue = this.processor.getData(
+          this.component,
+          this.value.path,
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        );
+
+        if (textValue === null) {
+          return html`Invalid value`;
+        }
+
+        if (typeof textValue !== "string" && typeof textValue !== "number") {
+          return html`Invalid value`;
+        }
+
+        return this.#renderField(textValue);
+      }
+    }
+
+    return nothing;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/styles.ts

@@ -0,0 +1,20 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { unsafeCSS } from "lit";
+import { structuralStyles as unsafeStructuralStyles } from "../styles/index.js";
+
+export const structuralStyles = unsafeCSS(unsafeStructuralStyles);

vendor/a2ui/renderers/lit/src/0.8/ui/surface.ts

@@ -0,0 +1,134 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SurfaceID, Surface as SurfaceState } from "../types/types";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { Root } from "./root.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+@customElement("a2ui-surface")
+export class Surface extends Root {
+  @property()
+  accessor surfaceId: SurfaceID | null = null;
+
+  @property()
+  accessor surface: SurfaceState | null = null;
+
+  @property()
+  accessor processor: A2uiMessageProcessor | null = null;
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        min-height: 0;
+        max-height: 100%;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      #surface-logo {
+        display: flex;
+        justify-content: center;
+
+        & img {
+          width: 50%;
+          max-width: 220px;
+        }
+      }
+
+      a2ui-root {
+        flex: 1;
+      }
+    `,
+  ];
+
+  #renderLogo() {
+    if (!this.surface?.styles.logoUrl) {
+      return nothing;
+    }
+
+    return html`<div id="surface-logo">
+      <img src=${this.surface.styles.logoUrl} />
+    </div>`;
+  }
+
+  #renderSurface() {
+    const styles: Record<string, string> = {};
+    if (this.surface?.styles) {
+      for (const [key, value] of Object.entries(this.surface.styles)) {
+        switch (key) {
+          // Here we generate a palette from the singular primary color received
+          // from the surface data. We will want the values to range from
+          // 0 <= x <= 100, where 0 = back, 100 = white, and 50 = the primary
+          // color itself. As such we use a color-mix to create the intermediate
+          // values.
+          //
+          // Note: since we use half the range for black to the primary color,
+          // and half the range for primary color to white the mixed values have
+          // to go up double the amount, i.e., a range from black to primary
+          // color needs to fit in 0 -> 50 rather than 0 -> 100.
+          case "primaryColor": {
+            styles["--p-100"] = "#ffffff";
+            styles["--p-99"] = `color-mix(in srgb, ${value} 2%, white 98%)`;
+            styles["--p-98"] = `color-mix(in srgb, ${value} 4%, white 96%)`;
+            styles["--p-95"] = `color-mix(in srgb, ${value} 10%, white 90%)`;
+            styles["--p-90"] = `color-mix(in srgb, ${value} 20%, white 80%)`;
+            styles["--p-80"] = `color-mix(in srgb, ${value} 40%, white 60%)`;
+            styles["--p-70"] = `color-mix(in srgb, ${value} 60%, white 40%)`;
+            styles["--p-60"] = `color-mix(in srgb, ${value} 80%, white 20%)`;
+            styles["--p-50"] = value;
+            styles["--p-40"] = `color-mix(in srgb, ${value} 80%, black 20%)`;
+            styles["--p-35"] = `color-mix(in srgb, ${value} 70%, black 30%)`;
+            styles["--p-30"] = `color-mix(in srgb, ${value} 60%, black 40%)`;
+            styles["--p-25"] = `color-mix(in srgb, ${value} 50%, black 50%)`;
+            styles["--p-20"] = `color-mix(in srgb, ${value} 40%, black 60%)`;
+            styles["--p-15"] = `color-mix(in srgb, ${value} 30%, black 70%)`;
+            styles["--p-10"] = `color-mix(in srgb, ${value} 20%, black 80%)`;
+            styles["--p-5"] = `color-mix(in srgb, ${value} 10%, black 90%)`;
+            styles["--0"] = "#00000";
+            break;
+          }
+
+          case "font": {
+            styles["--font-family"] = value;
+            styles["--font-family-flex"] = value;
+            break;
+          }
+        }
+      }
+    }
+
+    return html`<a2ui-root
+      style=${styleMap(styles)}
+      .surfaceId=${this.surfaceId}
+      .processor=${this.processor}
+      .childComponents=${this.surface?.componentTree
+        ? [this.surface.componentTree]
+        : null}
+    ></a2ui-root>`;
+  }
+
+  render() {
+    if (!this.surface) {
+      return nothing;
+    }
+
+    return html`${[this.#renderLogo(), this.#renderSurface()]}`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/tabs.ts

@@ -0,0 +1,132 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, PropertyValues, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { repeat } from "lit/directives/repeat.js";
+import { StringValue } from "../types/primitives.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+import { Styles } from "../index.js";
+
+@customElement("a2ui-tabs")
+export class Tabs extends Root {
+  @property()
+  accessor titles: StringValue[] | null = null;
+
+  @property()
+  accessor selected = 0;
+
+  static styles = [
+    structuralStyles,
+    css`
+      :host {
+        display: block;
+        flex: var(--weight);
+      }
+    `,
+  ];
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has("selected")) {
+      for (const child of this.children) {
+        child.removeAttribute("slot");
+      }
+      const selectedChild = this.children[this.selected];
+      if (!selectedChild) {
+        return;
+      }
+
+      selectedChild.slot = "current";
+    }
+  }
+
+  #renderTabs() {
+    if (!this.titles) {
+      return nothing;
+    }
+
+    return html`<div
+      id="buttons"
+      class=${classMap(this.theme.components.Tabs.element)}
+    >
+      ${repeat(this.titles, (title, idx) => {
+        let titleString = "";
+        if ("literalString" in title && title.literalString) {
+          titleString = title.literalString;
+        } else if ("literal" in title && title.literal !== undefined) {
+          titleString = title.literal;
+        } else if (title && "path" in title && title.path) {
+          if (!this.processor || !this.component) {
+            return html`(no model)`;
+          }
+
+          const textValue = this.processor.getData(
+            this.component,
+            title.path,
+            this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          );
+
+          if (typeof textValue !== "string") {
+            return html`(invalid)`;
+          }
+
+          titleString = textValue;
+        }
+
+        let classes;
+        if (this.selected === idx) {
+          classes = Styles.merge(
+            this.theme.components.Tabs.controls.all,
+            this.theme.components.Tabs.controls.selected
+          );
+        } else {
+          classes = { ...this.theme.components.Tabs.controls.all };
+        }
+
+        return html`<button
+          ?disabled=${this.selected === idx}
+          class=${classMap(classes)}
+          @click=${() => {
+            this.selected = idx;
+          }}
+        >
+          ${titleString}
+        </button>`;
+      })}
+    </div>`;
+  }
+
+  #renderSlot() {
+    return html`<slot name="current"></slot>`;
+  }
+
+  render() {
+    return html`<section
+      class=${classMap(this.theme.components.Tabs.container)}
+      style=${this.theme.additionalStyles?.Tabs
+        ? styleMap(this.theme.additionalStyles?.Tabs)
+        : nothing}
+    >
+      ${[this.#renderTabs(), this.#renderSlot()]}
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/text-field.ts

@@ -0,0 +1,131 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StringValue } from "../types/primitives.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ResolvedTextField } from "../types/types";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { extractStringValue } from "./utils/utils.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-textfield")
+export class TextField extends Root {
+  @property()
+  accessor text: StringValue | null = null;
+
+  @property()
+  accessor label: StringValue | null = null;
+
+  @property()
+  accessor inputType: ResolvedTextField["type"] | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: flex;
+        flex: var(--weight);
+      }
+
+      input {
+        display: block;
+        width: 100%;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 4px;
+      }
+    `,
+  ];
+
+  #setBoundValue(value: string) {
+    if (!this.text || !this.processor) {
+      return;
+    }
+    if (!("path" in this.text)) {
+      return;
+    }
+    if (!this.text.path) {
+      return;
+    }
+
+    this.processor.setData(
+      this.component,
+      this.text.path,
+      value,
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+    );
+  }
+
+  #renderField(value: string | number, label: string) {
+    return html` <section
+      class=${classMap(this.theme.components.TextField.container)}
+    >
+      ${label && label !== ""
+        ? html`<label
+            class=${classMap(this.theme.components.TextField.label)}
+            for="data"
+            >${label}</label
+          >`
+        : nothing}
+      <input
+        autocomplete="off"
+        class=${classMap(this.theme.components.TextField.element)}
+        style=${this.theme.additionalStyles?.TextField
+          ? styleMap(this.theme.additionalStyles?.TextField)
+          : nothing}
+        @input=${(evt: Event) => {
+          if (!(evt.target instanceof HTMLInputElement)) {
+            return;
+          }
+
+          this.#setBoundValue(evt.target.value);
+        }}
+        name="data"
+        id="data"
+        .value=${value}
+        .placeholder=${"Please enter a value"}
+        type=${this.inputType === "number" ? "number" : "text"}
+      />
+    </section>`;
+  }
+
+  render() {
+    const label = extractStringValue(
+      this.label,
+      this.component,
+      this.processor,
+      this.surfaceId
+    );
+    const value = extractStringValue(
+      this.text,
+      this.component,
+      this.processor,
+      this.surfaceId
+    );
+
+    return this.#renderField(value, label);
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/text.ts

@@ -0,0 +1,164 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { markdown } from "./directives/directives.js";
+import { Root } from "./root.js";
+import { StringValue } from "../types/primitives.js";
+import { classMap } from "lit/directives/class-map.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+import { Styles } from "../index.js";
+import { ResolvedText, Theme } from "../types/types.js";
+
+interface HintedStyles {
+  h1: Record<string, string>;
+  h2: Record<string, string>;
+  h3: Record<string, string>;
+  h4: Record<string, string>;
+  h5: Record<string, string>;
+  body: Record<string, string>;
+  caption: Record<string, string>;
+}
+
+@customElement("a2ui-text")
+export class Text extends Root {
+  @property()
+  accessor text: StringValue | null = null;
+
+  @property({ reflect: true, attribute: "usage-hint" })
+  accessor usageHint: ResolvedText["usageHint"] | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      :host {
+        display: block;
+        flex: var(--weight);
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5 {
+        line-height: inherit;
+        font: inherit;
+      }
+    `,
+  ];
+
+  #renderText() {
+    let textValue: string | null | undefined = null;
+
+    if (this.text && typeof this.text === "object") {
+      if ("literalString" in this.text && this.text.literalString) {
+        textValue = this.text.literalString;
+      } else if ("literal" in this.text && this.text.literal !== undefined) {
+        textValue = this.text.literal;
+      } else if (this.text && "path" in this.text && this.text.path) {
+        if (!this.processor || !this.component) {
+          return html`(no model)`;
+        }
+
+        const value = this.processor.getData(
+          this.component,
+          this.text.path,
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        );
+
+        if (value !== null && value !== undefined) {
+          textValue = value.toString();
+        }
+      }
+    }
+
+    if (textValue === null || textValue === undefined) {
+      return html`(empty)`;
+    }
+
+    let markdownText = textValue;
+    switch (this.usageHint) {
+      case "h1":
+        markdownText = `# ${markdownText}`;
+        break;
+      case "h2":
+        markdownText = `## ${markdownText}`;
+        break;
+      case "h3":
+        markdownText = `### ${markdownText}`;
+        break;
+      case "h4":
+        markdownText = `#### ${markdownText}`;
+        break;
+      case "h5":
+        markdownText = `##### ${markdownText}`;
+        break;
+      case "caption":
+        markdownText = `*${markdownText}*`;
+        break;
+      default:
+        break; // Body.
+    }
+
+    return html`${markdown(
+      markdownText,
+      Styles.appendToAll(this.theme.markdown, ["ol", "ul", "li"], {})
+    )}`;
+  }
+
+  #areHintedStyles(styles: unknown): styles is HintedStyles {
+    if (typeof styles !== "object") return false;
+    if (Array.isArray(styles)) return false;
+    if (!styles) return false;
+
+    const expected = ["h1", "h2", "h3", "h4", "h5", "h6", "caption", "body"];
+    return expected.every((v) => v in styles);
+  }
+
+  #getAdditionalStyles() {
+    let additionalStyles: Record<string, string> = {};
+    const styles = this.theme.additionalStyles?.Text;
+    if (!styles) return additionalStyles;
+
+    if (this.#areHintedStyles(styles)) {
+      const hint = this.usageHint ?? "body";
+      additionalStyles = styles[hint] as Record<string, string>;
+    } else {
+      additionalStyles = styles;
+    }
+
+    return additionalStyles;
+  }
+
+  render() {
+    const classes = Styles.merge(
+      this.theme.components.Text.all,
+      this.usageHint ? this.theme.components.Text[this.usageHint] : {}
+    );
+
+    return html`<section
+      class=${classMap(classes)}
+      style=${this.theme.additionalStyles?.Text
+        ? styleMap(this.#getAdditionalStyles())
+        : nothing}
+    >
+      ${this.#renderText()}
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/0.8/ui/ui.ts

@@ -0,0 +1,119 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export type TagName = keyof A2UITagNameMap;
+
+// A type that describes a constructor function which returns an instance of T
+export type CustomElementConstructorOf<T extends HTMLElement> = {
+  // The 'new' signature ensures it can be instantiated
+  new (): T;
+} & typeof HTMLElement;
+
+import { Audio } from "./audio.js";
+import { Button } from "./button.js";
+import { Card } from "./card.js";
+import { Checkbox } from "./checkbox.js";
+import { Column } from "./column.js";
+import { DateTimeInput } from "./datetime-input.js";
+import { Divider } from "./divider.js";
+import { Icon } from "./icon.js";
+import { Image } from "./image.js";
+import { List } from "./list.js";
+import { MultipleChoice } from "./multiple-choice.js";
+import { Modal } from "./modal.js";
+import { Root } from "./root.js";
+import { Row } from "./row.js";
+import { Slider } from "./slider.js";
+import { Surface } from "./surface.js";
+import { Tabs } from "./tabs.js";
+import { TextField } from "./text-field.js";
+import { Text } from "./text.js";
+import { Video } from "./video.js";
+
+export * as Context from "./context/theme.js";
+export * as Utils from "./utils/utils.js";
+export { ComponentRegistry, componentRegistry } from "./component-registry.js";
+export { registerCustomComponents } from "./custom-components/index.js";
+
+export {
+  Audio,
+  Button,
+  Card,
+  Column,
+  Checkbox,
+  DateTimeInput,
+  Divider,
+  Icon,
+  Image,
+  List,
+  MultipleChoice,
+  Modal,
+  Row,
+  Slider,
+  Root,
+  Surface,
+  Tabs,
+  Text,
+  TextField,
+  Video,
+};
+
+interface A2UITagNameMap {
+  "a2ui-audioplayer": Audio;
+  "a2ui-button": Button;
+  "a2ui-card": Card;
+  "a2ui-checkbox": Checkbox;
+  "a2ui-column": Column;
+  "a2ui-datetimeinput": DateTimeInput;
+  "a2ui-divider": Divider;
+  "a2ui-icon": Icon;
+  "a2ui-image": Image;
+  "a2ui-list": List;
+  "a2ui-modal": Modal;
+  "a2ui-multiplechoice": MultipleChoice;
+  "a2ui-root": Root;
+  "a2ui-row": Row;
+  "a2ui-slider": Slider;
+  "a2ui-surface": Surface;
+  "a2ui-tabs": Tabs;
+  "a2ui-text": Text;
+  "a2ui-textfield": TextField;
+  "a2ui-video": Video;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface HTMLElementTagNameMap extends A2UITagNameMap {}
+}
+
+/**
+ * Type-safely retrieves a custom element constructor using the tagName map.
+ * @param tagName The tag name to look up (must exist in HTMLElementTagNameMap).
+ * @returns The specific constructor type or undefined.
+ */
+export function instanceOf<T extends keyof A2UITagNameMap>(tagName: T) {
+  // Use a type assertion: we tell TypeScript to trust that the value returned
+  // by customElements.get(tagName) matches the type defined in our map.
+  const ctor = customElements.get(tagName) as
+    | CustomElementConstructorOf<A2UITagNameMap[T]>
+    | undefined;
+  if (!ctor) {
+    console.warn("No element definition for", tagName);
+    return;
+  }
+
+  return new ctor();
+}

vendor/a2ui/renderers/lit/src/0.8/ui/utils/utils.ts

@@ -0,0 +1,92 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { A2uiMessageProcessor } from "../../data/model-processor.js";
+import { NumberValue, type StringValue } from "../../types/primitives.js";
+import { type AnyComponentNode } from "../../types/types.js";
+
+export function extractStringValue(
+  val: StringValue | null,
+  component: AnyComponentNode | null,
+  processor: A2uiMessageProcessor | null,
+  surfaceId: string | null
+): string {
+  if (val !== null && typeof val === "object") {
+    if ("literalString" in val) {
+      return val.literalString ?? "";
+    } else if ("literal" in val && val.literal !== undefined) {
+      return val.literal ?? "";
+    } else if (val && "path" in val && val.path) {
+      if (!processor || !component) {
+        return "(no model)";
+      }
+
+      const textValue = processor.getData(
+        component,
+        val.path,
+        surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      );
+
+      if (textValue === null || typeof textValue !== "string") {
+        return "";
+      }
+
+      return textValue;
+    }
+  }
+
+  return "";
+}
+
+export function extractNumberValue(
+  val: NumberValue | null,
+  component: AnyComponentNode | null,
+  processor: A2uiMessageProcessor | null,
+  surfaceId: string | null
+): number {
+  if (val !== null && typeof val === "object") {
+    if ("literalNumber" in val) {
+      return val.literalNumber ?? 0;
+    } else if ("literal" in val && val.literal !== undefined) {
+      return val.literal ?? 0;
+    } else if (val && "path" in val && val.path) {
+      if (!processor || !component) {
+        return -1;
+      }
+
+      let numberValue = processor.getData(
+        component,
+        val.path,
+        surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      );
+
+      if (typeof numberValue === "string") {
+        numberValue = Number.parseInt(numberValue, 10);
+        if (Number.isNaN(numberValue)) {
+          numberValue = null;
+        }
+      }
+
+      if (numberValue === null || typeof numberValue !== "number") {
+        return -1;
+      }
+
+      return numberValue;
+    }
+  }
+
+  return 0;
+}

vendor/a2ui/renderers/lit/src/0.8/ui/utils/youtube.ts

@@ -0,0 +1,77 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export function isEmbedUri(uri: string | null): boolean {
+  if (!uri) {
+    return false;
+  }
+
+  return /^https:\/\/www\.youtube\.com\/embed\//.test(uri);
+}
+
+export function isShareUri(uri: string | null): boolean {
+  if (!uri) {
+    return false;
+  }
+
+  return /^https:\/\/youtu\.be\//.test(uri);
+}
+
+export function isWatchUri(uri: string): boolean {
+  return /^https:\/\/www\.youtube\.com\/watch\?v=/.test(uri);
+}
+
+export function isShortsUri(uri: string): boolean {
+  return /^https:\/\/www\.youtube\.com\/shorts\//.test(uri);
+}
+
+export function convertShareUriToEmbedUri(uri: string) {
+  const regex = /^https:\/\/youtu\.be\/(.*?)(?:[&\\?]|$)/;
+  const matches = regex.exec(uri);
+  if (!matches) {
+    return null;
+  }
+
+  const embedId = matches[1];
+  return `https://www.youtube.com/embed/${embedId}`;
+}
+
+export function convertWatchOrShortsUriToEmbedUri(uri: string) {
+  const regex =
+    /^https:\/\/www\.youtube\.com\/(?:shorts\/|embed\/|watch\?v=)(.*?)(?:[&\\?]|$)/;
+  const matches = regex.exec(uri);
+  if (!matches) {
+    return null;
+  }
+
+  const embedId = matches[1];
+  return `https://www.youtube.com/embed/${embedId}`;
+}
+
+export function videoIdFromWatchOrShortsOrEmbedUri(uri: string) {
+  const regex =
+    /^https:\/\/www\.youtube\.com\/(?:shorts\/|embed\/|watch\?v=)(.*?)(?:[&\\?]|$)/;
+  const matches = regex.exec(uri);
+  if (!matches) {
+    return null;
+  }
+
+  return matches[1];
+}
+
+export function createWatchUriFromVideoId(id: string) {
+  return `https://www.youtube.com/watch?v=${id}`;
+}

vendor/a2ui/renderers/lit/src/0.8/ui/video.ts

@@ -0,0 +1,96 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { StringValue } from "../types/primitives.js";
+import { A2uiMessageProcessor } from "../data/model-processor.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-video")
+export class Video extends Root {
+  @property()
+  accessor url: StringValue | null = null;
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 0;
+        overflow: auto;
+      }
+
+      video {
+        display: block;
+        width: 100%;
+      }
+    `,
+  ];
+
+  #renderVideo() {
+    if (!this.url) {
+      return nothing;
+    }
+
+    if (this.url && typeof this.url === "object") {
+      if ("literalString" in this.url) {
+        return html`<video controls src=${this.url.literalString} />`;
+      } else if ("literal" in this.url) {
+        return html`<video controls src=${this.url.literal} />`;
+      } else if (this.url && "path" in this.url && this.url.path) {
+        if (!this.processor || !this.component) {
+          return html`(no processor)`;
+        }
+
+        const videoUrl = this.processor.getData(
+          this.component,
+          this.url.path,
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        );
+        if (!videoUrl) {
+          return html`Invalid video URL`;
+        }
+
+        if (typeof videoUrl !== "string") {
+          return html`Invalid video URL`;
+        }
+        return html`<video controls src=${videoUrl} />`;
+      }
+    }
+
+    return html`(empty)`;
+  }
+
+  render() {
+    return html`<section
+      class=${classMap(this.theme.components.Video)}
+      style=${this.theme.additionalStyles?.Video
+        ? styleMap(this.theme.additionalStyles?.Video)
+        : nothing}
+    >
+      ${this.#renderVideo()}
+    </section>`;
+  }
+}

vendor/a2ui/renderers/lit/src/index.ts

@@ -0,0 +1,17 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export * as v0_8 from "./0.8/index.js";