@a2ui/angular 0.8.1 → 0.8.3

package/src/lib/catalog/text.ts

@@ -1,137 +0,0 @@
-/*
- 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 { Component, computed, inject, input, ViewEncapsulation } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Primitives, Styles, Types } from '@a2ui/lit/0.8';
-import { MarkdownRenderer } from '../data/markdown';
-
-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>;
-}
-
-@Component({
-  selector: 'a2ui-text',
-  template: `
-    <section
-      [class]="classes()"
-      [style]="additionalStyles()"
-      [innerHTML]="resolvedText()"
-    ></section>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  styles: `
-    a2ui-text {
-      display: block;
-      flex: var(--weight);
-    }
-
-    a2ui-text h1,
-    a2ui-text h2,
-    a2ui-text h3,
-    a2ui-text h4,
-    a2ui-text h5 {
-      line-height: inherit;
-      font: inherit;
-    }
-  `,
-})
-export class Text extends DynamicComponent {
-  private markdownRenderer = inject(MarkdownRenderer);
-  readonly text = input.required<Primitives.StringValue | null>();
-  readonly usageHint = input.required<Types.ResolvedText['usageHint'] | null>();
-
-  protected resolvedText = computed(() => {
-    const usageHint = this.usageHint();
-    let value = super.resolvePrimitive(this.text());
-
-    if (value == null) {
-      return '(empty)';
-    }
-
-    switch (usageHint) {
-      case 'h1':
-        value = `# ${value}`;
-        break;
-      case 'h2':
-        value = `## ${value}`;
-        break;
-      case 'h3':
-        value = `### ${value}`;
-        break;
-      case 'h4':
-        value = `#### ${value}`;
-        break;
-      case 'h5':
-        value = `##### ${value}`;
-        break;
-      case 'caption':
-        value = `*${value}*`;
-        break;
-      default:
-        value = String(value);
-        break;
-    }
-
-    return this.markdownRenderer.render(
-      value,
-      Styles.appendToAll(this.theme.markdown, ['ol', 'ul', 'li'], {}),
-    );
-  });
-
-  protected classes = computed(() => {
-    const usageHint = this.usageHint();
-
-    return Styles.merge(
-      this.theme.components.Text.all,
-      usageHint ? this.theme.components.Text[usageHint] : {},
-    );
-  });
-
-  protected additionalStyles = computed(() => {
-    const usageHint = this.usageHint();
-    const styles = this.theme.additionalStyles?.Text;
-
-    if (!styles) {
-      return null;
-    }
-
-    let additionalStyles: Record<string, string> = {};
-
-    if (this.areHintedStyles(styles)) {
-      additionalStyles = styles[usageHint ?? 'body'];
-    } else {
-      additionalStyles = styles;
-    }
-
-    return additionalStyles;
-  });
-
-  private areHintedStyles(styles: unknown): styles is HintedStyles {
-    if (typeof styles !== 'object' || !styles || Array.isArray(styles)) {
-      return false;
-    }
-
-    const expected = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'caption', 'body'];
-    return expected.every((v) => v in styles);
-  }
-}

package/src/lib/catalog/video.ts

@@ -1,50 +0,0 @@
-/*
- 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 { Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Primitives } from '@a2ui/lit/0.8';
-
-@Component({
-  selector: 'a2ui-video',
-  template: `
-    @let resolvedUrl = this.resolvedUrl();
-
-    @if (resolvedUrl) {
-      <section [class]="theme.components.Video" [style]="theme.additionalStyles?.Video">
-        <video controls [src]="resolvedUrl"></video>
-      </section>
-    }
-  `,
-  styles: `
-    :host {
-      display: block;
-      flex: var(--weight);
-      min-height: 0;
-      overflow: auto;
-    }
-
-    video {
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-    }
-  `,
-})
-export class Video extends DynamicComponent {
-  readonly url = input.required<Primitives.StringValue | null>();
-  protected readonly resolvedUrl = computed(() => this.resolvePrimitive(this.url()));
-}

package/src/lib/config.ts

@@ -1,25 +0,0 @@
-/*
- 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 { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
-import { Catalog, Theme } from './rendering';
-
-export function provideA2UI(config: { catalog: Catalog; theme: Theme }): EnvironmentProviders {
-  return makeEnvironmentProviders([
-    { provide: Catalog, useValue: config.catalog },
-    { provide: Theme, useValue: config.theme },
-  ]);
-}

package/src/lib/data/index.ts

@@ -1,18 +0,0 @@
-/*
- 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 './processor';
-export * from './types';

package/src/lib/data/markdown.ts

@@ -1,114 +0,0 @@
-/*
- 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 { inject, Injectable, SecurityContext } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import MarkdownIt from 'markdown-it';
-
-@Injectable({ providedIn: 'root' })
-export class MarkdownRenderer {
-  private originalClassMap = new Map<string, any>();
-  private sanitizer = inject(DomSanitizer);
-
-  private markdownIt = MarkdownIt({
-    highlight: (str, lang) => {
-      if (lang === 'html') {
-        const iframe = document.createElement('iframe');
-        iframe.classList.add('html-view');
-        iframe.srcdoc = str;
-        iframe.sandbox = '';
-        return iframe.innerHTML;
-      }
-
-      return str;
-    },
-  });
-
-  render(value: string, tagClassMap?: Record<string, string[]>) {
-    if (tagClassMap) {
-      this.applyTagClassMap(tagClassMap);
-    }
-    const htmlString = this.markdownIt.render(value);
-    this.unapplyTagClassMap();
-    return this.sanitizer.sanitize(SecurityContext.HTML, htmlString);
-  }
-
-  private applyTagClassMap(tagClassMap: Record<string, string[]>) {
-    Object.entries(tagClassMap).forEach(([tag, classes]) => {
-      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`;
-      const original = this.markdownIt.renderer.rules[key];
-      this.originalClassMap.set(key, original);
-
-      this.markdownIt.renderer.rules[key] = (tokens, idx, options, env, self) => {
-        const token = tokens[idx];
-        for (const clazz of classes) {
-          token.attrJoin('class', clazz);
-        }
-
-        if (original) {
-          return original.call(this, tokens, idx, options, env, self);
-        } else {
-          return self.renderToken(tokens, idx, options);
-        }
-      };
-    });
-  }
-
-  private unapplyTagClassMap() {
-    for (const [key, original] of this.originalClassMap) {
-      this.markdownIt.renderer.rules[key] = original;
-    }
-
-    this.originalClassMap.clear();
-  }
-}

package/src/lib/data/processor.ts

@@ -1,47 +0,0 @@
-/*
- 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 { Data, Types } from '@a2ui/lit/0.8';
-import { Injectable } from '@angular/core';
-import { firstValueFrom, Subject } from 'rxjs';
-
-export interface DispatchedEvent {
-  message: Types.A2UIClientEventMessage;
-  completion: Subject<Types.ServerToClientMessage[]>;
-}
-
-@Injectable({ providedIn: 'root' })
-export class MessageProcessor extends Data.A2uiMessageProcessor {
-  readonly events = new Subject<DispatchedEvent>();
-
-  override setData(
-    node: Types.AnyComponentNode,
-    relativePath: string,
-    value: Types.DataValue,
-    surfaceId?: Types.SurfaceID | null,
-  ) {
-    // Override setData to convert from optional inputs (which can be null)
-    // to undefined so that this correctly falls back to the default value for
-    // surfaceId.
-    return super.setData(node, relativePath, value, surfaceId ?? undefined);
-  }
-
-  dispatch(message: Types.A2UIClientEventMessage): Promise<Types.ServerToClientMessage[]> {
-    const completion = new Subject<Types.ServerToClientMessage[]>();
-    this.events.next({ message, completion });
-    return firstValueFrom(completion);
-  }
-}

package/src/lib/data/types.ts

@@ -1,29 +0,0 @@
-/*
- 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 { Types } from '@a2ui/lit/0.8';
-
-export interface A2TextPayload {
-  kind: 'text';
-  text: string;
-}
-
-export interface A2DataPayload {
-  kind: 'data';
-  data: Types.ServerToClientMessage;
-}
-
-export type A2AServerPayload = Array<A2DataPayload | A2TextPayload> | { error: string };

package/src/lib/rendering/catalog.ts

@@ -1,36 +0,0 @@
-/*
- 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 { Binding, InjectionToken, Type } from '@angular/core';
-import { DynamicComponent } from './dynamic-component';
-import { Types } from '@a2ui/lit/0.8';
-
-export type CatalogLoader = () =>
-  | Promise<Type<DynamicComponent<any>>>
-  | Type<DynamicComponent<any>>;
-
-export type CatalogEntry<T extends Types.AnyComponentNode> =
-  | CatalogLoader
-  | {
-    type: CatalogLoader;
-    bindings: (data: T) => Binding[];
-  };
-
-export interface Catalog {
-  [key: string]: CatalogEntry<Types.AnyComponentNode>;
-}
-
-export const Catalog = new InjectionToken<Catalog>('Catalog');

package/src/lib/rendering/dynamic-component.ts

@@ -1,100 +0,0 @@
-/*
- 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 { Types, Primitives } from '@a2ui/lit/0.8';
-import { Directive, inject, input } from '@angular/core';
-import { MessageProcessor } from '../data';
-import { Theme } from './theming';
-
-let idCounter = 0;
-
-@Directive({
-  host: {
-    '[style.--weight]': 'weight()',
-  },
-})
-export abstract class DynamicComponent<T extends Types.AnyComponentNode = Types.AnyComponentNode> {
-  protected readonly processor = inject(MessageProcessor);
-  protected readonly theme = inject(Theme);
-
-  readonly surfaceId = input.required<Types.SurfaceID | null>();
-  readonly component = input.required<T>();
-  readonly weight = input.required<string | number>();
-
-  protected sendAction(action: Types.Action): Promise<Types.ServerToClientMessage[]> {
-    const component = this.component();
-    const surfaceId = this.surfaceId() ?? undefined;
-    const context: Record<string, unknown> = {};
-
-    if (action.context) {
-      for (const item of action.context) {
-        if (item.value.literalBoolean) {
-          context[item.key] = item.value.literalBoolean;
-        } else if (item.value.literalNumber) {
-          context[item.key] = item.value.literalNumber;
-        } else if (item.value.literalString) {
-          context[item.key] = item.value.literalString;
-        } else if (item.value.path) {
-          const path = this.processor.resolvePath(item.value.path, component.dataContextPath);
-          const value = this.processor.getData(component, path, surfaceId);
-          context[item.key] = value;
-        }
-      }
-    }
-
-    const message: Types.A2UIClientEventMessage = {
-      userAction: {
-        name: action.name,
-        sourceComponentId: component.id,
-        surfaceId: surfaceId!,
-        timestamp: new Date().toISOString(),
-        context,
-      },
-    };
-
-    return this.processor.dispatch(message);
-  }
-
-  protected resolvePrimitive(value: Primitives.StringValue | null): string | null;
-  protected resolvePrimitive(value: Primitives.BooleanValue | null): boolean | null;
-  protected resolvePrimitive(value: Primitives.NumberValue | null): number | null;
-  protected resolvePrimitive(
-    value: Primitives.StringValue | Primitives.BooleanValue | Primitives.NumberValue | null,
-  ) {
-    const component = this.component();
-    const surfaceId = this.surfaceId();
-
-    if (!value || typeof value !== 'object') {
-      return null;
-    } else if (value.literal != null) {
-      return value.literal;
-    } else if (value.path) {
-      return this.processor.getData(component, value.path, surfaceId ?? undefined);
-    } else if ('literalString' in value) {
-      return value.literalString;
-    } else if ('literalNumber' in value) {
-      return value.literalNumber;
-    } else if ('literalBoolean' in value) {
-      return value.literalBoolean;
-    }
-
-    return null;
-  }
-
-  protected getUniqueId(prefix: string) {
-    return `${prefix}-${idCounter++}`;
-  }
-}

package/src/lib/rendering/index.ts

@@ -1,20 +0,0 @@
-/*
- 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 './catalog';
-export * from './dynamic-component';
-export * from './renderer';
-export * from './theming';

package/src/lib/rendering/renderer.ts

@@ -1,109 +0,0 @@
-/*
- 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 {
-  Binding,
-  ComponentRef,
-  Directive,
-  DOCUMENT,
-  effect,
-  inject,
-  input,
-  inputBinding,
-  OnDestroy,
-  PLATFORM_ID,
-  Type,
-  untracked,
-  ViewContainerRef,
-} from '@angular/core';
-import { Types, Styles } from '@a2ui/lit/0.8';
-import { Catalog } from './catalog';
-import { isPlatformBrowser } from '@angular/common';
-
-@Directive({
-  selector: 'ng-container[a2ui-renderer]',
-})
-export class Renderer implements OnDestroy {
-  private viewContainerRef = inject(ViewContainerRef);
-  private catalog = inject(Catalog);
-  private static hasInsertedStyles = false;
-
-  private currentRef: ComponentRef<unknown> | null = null;
-  private isDestroyed = false;
-
-  readonly surfaceId = input.required<Types.SurfaceID>();
-  readonly component = input.required<Types.AnyComponentNode>();
-
-  constructor() {
-    effect(() => {
-      const surfaceId = this.surfaceId();
-      const component = this.component();
-      untracked(() => this.render(surfaceId, component));
-    });
-
-    const platformId = inject(PLATFORM_ID);
-    const document = inject(DOCUMENT);
-
-    if (!Renderer.hasInsertedStyles && isPlatformBrowser(platformId)) {
-      const styles = document.createElement('style');
-      styles.textContent = Styles.structuralStyles;
-      document.head.appendChild(styles);
-      Renderer.hasInsertedStyles = true;
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.isDestroyed = true;
-    this.clear();
-  }
-
-  private async render(surfaceId: Types.SurfaceID, component: Types.AnyComponentNode) {
-    const config = this.catalog[component.type];
-    let newComponent: Type<unknown> | null = null;
-    let componentBindings: Binding[] | null = null;
-
-    if (typeof config === 'function') {
-      newComponent = await config();
-    } else if (typeof config === 'object') {
-      newComponent = await config.type();
-      componentBindings = config.bindings(component as any);
-    }
-
-    this.clear();
-
-    if (newComponent && !this.isDestroyed) {
-      const bindings = [
-        inputBinding('surfaceId', () => surfaceId),
-        inputBinding('component', () => component),
-        inputBinding('weight', () => component.weight ?? 'initial'),
-      ];
-
-      if (componentBindings) {
-        bindings.push(...componentBindings);
-      }
-
-      this.currentRef = this.viewContainerRef.createComponent(newComponent, {
-        bindings,
-        injector: this.viewContainerRef.injector,
-      });
-    }
-  }
-
-  private clear() {
-    this.currentRef?.destroy();
-    this.currentRef = null;
-  }
-}