@a2ui/angular 0.0.1

package/src/lib/catalog/slider.ts

@@ -0,0 +1,73 @@
+/*
+ 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 { Primitives } from '@a2ui/lit/0.8';
+import { DynamicComponent } from '../rendering/dynamic-component';
+
+@Component({
+  selector: '[a2ui-slider]',
+  template: `
+    <section [class]="theme.components.Slider.container">
+      <label [class]="theme.components.Slider.label" [for]="inputId">
+        {{ label() }}
+      </label>
+
+      <input
+        autocomplete="off"
+        type="range"
+        [value]="resolvedValue()"
+        [min]="minValue()"
+        [max]="maxValue()"
+        [id]="inputId"
+        (input)="handleInput($event)"
+        [class]="theme.components.Slider.element"
+        [style]="theme.additionalStyles?.Slider"
+      />
+    </section>
+  `,
+  styles: `
+    :host {
+      display: block;
+      flex: var(--weight);
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+  `,
+})
+export class Slider extends DynamicComponent {
+  readonly value = input.required<Primitives.NumberValue | null>();
+  readonly label = input('');
+  readonly minValue = input.required<number | undefined>();
+  readonly maxValue = input.required<number | undefined>();
+
+  protected readonly inputId = super.getUniqueId('a2ui-slider');
+  protected resolvedValue = computed(() => super.resolvePrimitive(this.value()) ?? 0);
+
+  protected handleInput(event: Event) {
+    const path = this.value()?.path;
+
+    if (!(event.target instanceof HTMLInputElement) || !path) {
+      return;
+    }
+
+    this.processor.setData(this.component(), path, event.target.valueAsNumber, this.surfaceId());
+  }
+}

package/src/lib/catalog/surface.ts

@@ -0,0 +1,82 @@
+/*
+ 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 { Types } from '@a2ui/lit/0.8';
+import { Renderer } from '../rendering/renderer';
+
+@Component({
+  selector: 'a2ui-surface',
+  imports: [Renderer],
+  template: `
+    @let surfaceId = this.surfaceId();
+    @let surface = this.surface();
+
+    @if (surfaceId && surface) {
+      <ng-container a2ui-renderer [surfaceId]="surfaceId" [component]="surface.componentTree!" />
+    }
+  `,
+  styles: `
+    :host {
+      display: flex;
+      min-height: 0;
+      max-height: 100%;
+      flex-direction: column;
+      gap: 16px;
+    }
+  `,
+  host: {
+    '[style]': 'styles()',
+  },
+})
+export class Surface {
+  readonly surfaceId = input.required<Types.SurfaceID | null>();
+  readonly surface = input.required<Types.Surface | null>();
+
+  protected readonly styles = computed(() => {
+    const surface = this.surface();
+    const styles: Record<string, string> = {};
+
+    if (surface?.styles) {
+      for (const [key, value] of Object.entries(surface.styles)) {
+        switch (key) {
+          case 'primaryColor': {
+            // Ignored for now. This is due to the fact that the sample agents
+            // produce values for these and if they are used here then they will
+            // override the values at the app level.
+            //
+            // for (let i = 0; i <= 100; i++) {
+            //   styles[`--p-${i}`] = `color-mix(in srgb, ${value} ${100 - i}%, #fff ${i}%)`;
+            // }
+            break;
+          }
+
+          case 'font': {
+            // Ignored for now. This is due to the fact that the sample agents
+            // produce values for these and if they are used here then they will
+            // override the values at the app level.
+            //
+            // styles['--font-family'] = value;
+            // styles['--font-family-flex'] = value;
+            break;
+          }
+        }
+      }
+    }
+
+    return styles;
+  });
+}

package/src/lib/catalog/tabs.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 { Component, computed, input, signal } from '@angular/core';
+import { DynamicComponent } from '../rendering/dynamic-component';
+import { Renderer } from '../rendering/renderer';
+import { Styles, Types } from '@a2ui/lit/0.8';
+
+@Component({
+  selector: 'a2ui-tabs',
+  imports: [Renderer],
+  template: `
+    @let tabs = this.tabs();
+    @let selectedIndex = this.selectedIndex();
+
+    <section [class]="theme.components.Tabs.container" [style]="theme.additionalStyles?.Tabs">
+      <div [class]="theme.components.Tabs.element">
+        @for (tab of tabs; track tab) {
+          <button
+            (click)="this.selectedIndex.set($index)"
+            [disabled]="selectedIndex === $index"
+            [class]="buttonClasses()[selectedIndex]"
+          >
+            {{ resolvePrimitive(tab.title) }}
+          </button>
+        }
+      </div>
+
+      <ng-container
+        a2ui-renderer
+        [surfaceId]="surfaceId()!"
+        [component]="tabs[selectedIndex].child"
+      />
+    </section>
+  `,
+  styles: `
+    :host {
+      display: block;
+      flex: var(--weight);
+    }
+  `,
+})
+export class Tabs extends DynamicComponent {
+  protected selectedIndex = signal(0);
+  readonly tabs = input.required<Types.ResolvedTabItem[]>();
+
+  protected readonly buttonClasses = computed(() => {
+    const selectedIndex = this.selectedIndex();
+
+    return this.tabs().map((_, index) => {
+      return index === selectedIndex
+        ? Styles.merge(
+          this.theme.components.Tabs.controls.all,
+          this.theme.components.Tabs.controls.selected,
+        )
+        : this.theme.components.Tabs.controls.all;
+    });
+  });
+}

package/src/lib/catalog/text-field.ts

@@ -0,0 +1,86 @@
+/*
+ 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 { computed, Component, input } from '@angular/core';
+import { Primitives, Types } from '@a2ui/lit/0.8';
+import { DynamicComponent } from '../rendering/dynamic-component';
+
+@Component({
+  selector: 'a2ui-text-field',
+  styles: `
+    :host {
+      display: flex;
+      flex: var(--weight);
+    }
+
+    section,
+    input,
+    label {
+      box-sizing: border-box;
+    }
+
+    input {
+      display: block;
+      width: 100%;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 4px;
+    }
+  `,
+  template: `
+    @let resolvedLabel = this.resolvedLabel();
+
+    <section [class]="theme.components.TextField.container">
+      @if (resolvedLabel) {
+        <label [for]="inputId" [class]="theme.components.TextField.label">{{
+          resolvedLabel
+        }}</label>
+      }
+
+      <input
+        autocomplete="off"
+        [class]="theme.components.TextField.element"
+        [style]="theme.additionalStyles?.TextField"
+        (input)="handleInput($event)"
+        [id]="inputId"
+        [value]="inputValue()"
+        placeholder="Please enter a value"
+        [type]="inputType() === 'number' ? 'number' : 'text'"
+      />
+    </section>
+  `,
+})
+export class TextField extends DynamicComponent {
+  readonly text = input.required<Primitives.StringValue | null>();
+  readonly label = input.required<Primitives.StringValue | null>();
+  readonly inputType = input.required<Types.ResolvedTextField['type'] | null>();
+
+  protected inputValue = computed(() => super.resolvePrimitive(this.text()) || '');
+  protected resolvedLabel = computed(() => super.resolvePrimitive(this.label()));
+  protected inputId = super.getUniqueId('a2ui-input');
+
+  protected handleInput(event: Event) {
+    const path = this.text()?.path;
+
+    if (!(event.target instanceof HTMLInputElement) || !path) {
+      return;
+    }
+
+    this.processor.setData(this.component(), path, event.target.value, this.surfaceId());
+  }
+}

package/src/lib/catalog/text.ts

@@ -0,0 +1,137 @@
+/*
+ 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

@@ -0,0 +1,50 @@
+/*
+ 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

@@ -0,0 +1,25 @@
+/*
+ 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

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

package/src/lib/data/markdown.ts

@@ -0,0 +1,114 @@
+/*
+ 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();
+  }
+}