@a2ui/angular 0.8.2 → 0.9.0-alpha.0

package/fesm2022/a2ui-angular.mjs

@@ -1,133 +1,274 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, input, Directive, ViewContainerRef, effect, untracked, PLATFORM_ID, DOCUMENT, inputBinding, makeEnvironmentProviders, computed, Component, SecurityContext, ViewEncapsulation } from '@angular/core';
-import { Data, Styles } from '@a2ui/lit/0.8';
-import { Subject, firstValueFrom } from 'rxjs';
-import { isPlatformBrowser } from '@angular/common';
-import { DomSanitizer } from '@angular/platform-browser';
-import MarkdownIt from 'markdown-it';
+import { signal, Injectable, inject, input, Directive, computed, ChangeDetectionStrategy, Component, InjectionToken, ViewContainerRef, PLATFORM_ID, effect, ViewEncapsulation, makeEnvironmentProviders } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as WebCore from '@a2ui/web_core/v0_8';
+import { DOCUMENT, isPlatformBrowser, AsyncPipe } from '@angular/common';
+import * as Styles from '@a2ui/web_core/styles/index';
+import { structuralStyles } from '@a2ui/web_core/styles/index';
 
 /*
- 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 Catalog = new InjectionToken('Catalog');
-
-/*
- 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.
+ * 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.
  */
-class MessageProcessor extends Data.A2uiMessageProcessor {
-    events = new Subject();
-    setData(node, relativePath, value, surfaceId) {
-        // 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);
+class MessageProcessor {
+    baseProcessor;
+    eventsSubject = new Subject();
+    events = this.eventsSubject.asObservable();
+    // Signal to track the version of the data in the MessageProcessor. Since the base processor updates 
+    // surfaces in-place (mutating the Map), we use this to force Angular's change detection to 
+    // re-evaluate any components or effects that depend on getSurfaces().
+    versionSignal = signal(0, ...(ngDevMode ? [{ debugName: "versionSignal" }] : /* istanbul ignore next */ []));
+    version = this.versionSignal.asReadonly();
+    constructor() {
+        this.baseProcessor = new WebCore.A2uiMessageProcessor();
+    }
+    /**
+     * Increments the version signal to notify Angular that the data model has changed.
+     * This should be called after any update to the underlying base processor's surfaces.
+     */
+    notify() {
+        this.versionSignal.update((v) => v + 1);
+    }
+    processMessages(messages) {
+        this.baseProcessor.processMessages(messages);
+        this.notify();
     }
     dispatch(message) {
         const completion = new Subject();
-        this.events.next({ message, completion });
-        return firstValueFrom(completion);
+        const promise = new Promise((resolve, reject) => {
+            completion.subscribe({
+                next: (msgs) => resolve(msgs),
+                error: (err) => reject(err),
+            });
+        });
+        this.eventsSubject.next({ message, completion });
+        return promise;
+    }
+    getData(node, path, surfaceId) {
+        return this.baseProcessor.getData(node, path, surfaceId ?? undefined);
+    }
+    setData(node, path, value, surfaceId) {
+        this.baseProcessor.setData(node, path, value, surfaceId);
+        this.notify();
+    }
+    resolvePath(path, dataContextPath) {
+        return this.baseProcessor.resolvePath(path, dataContextPath);
+    }
+    getSurfaces() {
+        this.versionSignal(); // Track dependency
+        const allSurfaces = this.baseProcessor.getSurfaces();
+        const readySurfaces = new Map();
+        for (const [id, surface] of allSurfaces.entries()) {
+            if (surface.rootComponentId != null) {
+                readySurfaces.set(id, surface);
+            }
+        }
+        return readySurfaces;
+    }
+    clearSurfaces() {
+        this.baseProcessor.clearSurfaces();
+        this.notify();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MessageProcessor, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MessageProcessor, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageProcessor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageProcessor, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MessageProcessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageProcessor, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
 /*
- 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.
+ * 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.
  */
 
 /*
- 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.
+ * 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.
  */
+class MarkdownRenderer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MarkdownRenderer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MarkdownRenderer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MarkdownRenderer, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+class DefaultMarkdownRenderer extends MarkdownRenderer {
+    static warningLogged = false;
+    async render(markdown, options) {
+        try {
+            // @ts-ignore - optional peer dependency
+            const { renderMarkdown } = await import('@a2ui/markdown-it');
+            return await renderMarkdown(markdown, options);
+        }
+        catch (e) {
+            if (!DefaultMarkdownRenderer.warningLogged) {
+                console.warn("[DefaultMarkdownRenderer] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback regex.");
+                DefaultMarkdownRenderer.warningLogged = true;
+            }
+            // Basic implementation for v0.8
+            return markdown;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefaultMarkdownRenderer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefaultMarkdownRenderer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefaultMarkdownRenderer, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+function provideMarkdownRenderer(renderFn) {
+    if (renderFn) {
+        return {
+            provide: MarkdownRenderer,
+            useValue: {
+                render: renderFn,
+            },
+        };
+    }
+    return { provide: MarkdownRenderer, useClass: DefaultMarkdownRenderer };
+}
 
 /*
- 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
+ * 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.
+ */
 
- 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.
+/*
+ * 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 Theme = new InjectionToken('Theme');
+class Theme {
+    components = {};
+    elements = {};
+    markdown = {
+        p: [],
+        h1: [],
+        h2: [],
+        h3: [],
+        h4: [],
+        h5: [],
+        ul: [],
+        ol: [],
+        li: [],
+        a: [],
+        strong: [],
+        em: [],
+    };
+    additionalStyles;
+    update(theme) {
+        this.components = theme.components;
+        this.elements = theme.elements;
+        this.markdown = theme.markdown;
+        this.additionalStyles = theme.additionalStyles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Theme, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Theme, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Theme, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+/*
+ * 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.
+ */
 let idCounter = 0;
 class DynamicComponent {
     processor = inject(MessageProcessor);
     theme = inject(Theme);
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : []));
-    component = input.required(...(ngDevMode ? [{ debugName: "component" }] : []));
-    weight = input.required(...(ngDevMode ? [{ debugName: "weight" }] : []));
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    component = input.required(...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    weight = input.required(...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
     sendAction(action) {
         const component = this.component();
         const surfaceId = this.surfaceId() ?? undefined;
         const context = {};
         if (action.context) {
             for (const item of action.context) {
-                if (item.value.literalBoolean) {
+                if (item.value.literalBoolean !== undefined) {
                     context[item.key] = item.value.literalBoolean;
                 }
-                else if (item.value.literalNumber) {
+                else if (item.value.literalNumber !== undefined) {
                     context[item.key] = item.value.literalNumber;
                 }
-                else if (item.value.literalString) {
+                else if (item.value.literalString !== undefined) {
                     context[item.key] = item.value.literalString;
                 }
                 else if (item.value.path) {
@@ -154,7 +295,7 @@ class DynamicComponent {
         if (!value || typeof value !== 'object') {
             return null;
         }
-        else if (value.literal != null) {
+        else if ('literal' in value && value.literal != null) {
             return value.literal;
         }
         else if (value.path) {
@@ -174,10 +315,10 @@ class DynamicComponent {
     getUniqueId(prefix) {
         return `${prefix}-${idCounter++}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: DynamicComponent, isStandalone: true, inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--weight": "weight()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: DynamicComponent, isStandalone: true, inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--weight": "weight()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DynamicComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -187,345 +328,1097 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
         }], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: true }] }] } });
 
 /*
- 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
+ * 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.
+ */
+class AudioPlayer extends DynamicComponent {
+    url = input.required(...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    resolvedUrl = computed(() => this.resolvePrimitive(this.url()), ...(ngDevMode ? [{ debugName: "resolvedUrl" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioPlayer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: AudioPlayer, isStandalone: true, selector: "a2ui-audio", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <audio controls [src]="resolvedUrl()" [style]="theme.additionalStyles?.AudioPlayer"></audio>
+  `, isInline: true, styles: [":host{display:flex}audio{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioPlayer, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-audio', template: `
+    <audio controls [src]="resolvedUrl()" [style]="theme.additionalStyles?.AudioPlayer"></audio>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex}audio{width:100%}\n"] }]
+        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: true }] }] } });
 
-      https://www.apache.org/licenses/LICENSE-2.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.
+ */
+const Catalog = new InjectionToken('Catalog');
 
- 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.
+/*
+ * 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.
  */
 class Renderer {
-    viewContainerRef = inject(ViewContainerRef);
-    catalog = inject(Catalog);
     static hasInsertedStyles = false;
-    currentRef = null;
-    isDestroyed = false;
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : []));
-    component = input.required(...(ngDevMode ? [{ debugName: "component" }] : []));
+    catalog = inject(Catalog);
+    container = inject(ViewContainerRef);
+    processor = inject(MessageProcessor);
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    component = input.required(...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    currentId = null;
+    currentType = null;
+    currentComponentRef = null;
     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);
+            const styleElement = document.createElement('style');
+            styleElement.textContent = structuralStyles;
+            document.head.appendChild(styleElement);
             Renderer.hasInsertedStyles = true;
         }
+        effect(() => {
+            // Explicitly depend on the MessageProcessor's version signal. This ensures that the effect re-runs 
+            // whenever data model changes occur, even if the node's object reference remains identical 
+            // (as in the case of in-place mutations from local updates).
+            this.processor.version();
+            let node = this.component();
+            const surfaceId = this.surfaceId();
+            // Handle v0.8 wrapped component format
+            if (!node.type && node.component) {
+                const wrapped = node.component;
+                const type = Object.keys(wrapped)[0];
+                if (type) {
+                    node = {
+                        ...node,
+                        type: type,
+                        properties: wrapped[type],
+                    };
+                }
+            }
+            const id = node.id;
+            const type = node.type;
+            // Focus Loss Prevention:
+            // If we have an existing component and its unique identity (ID and Type) hasn't changed,
+            // we update its @Input() values in-place. This preserves the underlying DOM element, 
+            // maintaining focus, text selection, and cursor position.
+            if (this.currentComponentRef && this.currentId === id && this.currentType === type) {
+                this.updateInputs(this.currentComponentRef, node, surfaceId);
+                return;
+            }
+            // Otherwise, clear and re-create the component because its identity has changed.
+            const container = this.container;
+            container.clear();
+            this.currentComponentRef = null;
+            this.currentId = id;
+            this.currentType = type;
+            const config = this.catalog[node.type];
+            if (!config) {
+                console.error(`Unknown component type: ${node.type}`);
+                return;
+            }
+            this.render(container, node, surfaceId, config);
+        });
     }
-    ngOnDestroy() {
-        this.isDestroyed = true;
-        this.clear();
+    render(container, node, surfaceId, config) {
+        const componentTypeOrPromise = this.resolveComponentType(config);
+        if (componentTypeOrPromise instanceof Promise) {
+            componentTypeOrPromise.then((componentType) => {
+                // Ensure we are still supposed to render this component
+                if (this.currentId === node.id && this.currentType === node.type) {
+                    const componentRef = container.createComponent(componentType);
+                    this.currentComponentRef = componentRef;
+                    this.updateInputs(componentRef, node, surfaceId);
+                }
+            });
+        }
+        else if (componentTypeOrPromise) {
+            const componentRef = container.createComponent(componentTypeOrPromise);
+            this.currentComponentRef = componentRef;
+            this.updateInputs(componentRef, node, surfaceId);
+        }
     }
-    async render(surfaceId, component) {
-        const config = this.catalog[component.type];
-        let newComponent = null;
-        let componentBindings = null;
+    resolveComponentType(config) {
         if (typeof config === 'function') {
-            newComponent = await config();
-        }
-        else if (typeof config === 'object') {
-            newComponent = await config.type();
-            componentBindings = config.bindings(component);
-        }
-        this.clear();
-        if (newComponent && !this.isDestroyed) {
-            const bindings = [
-                inputBinding('surfaceId', () => surfaceId),
-                inputBinding('component', () => component),
-                inputBinding('weight', () => component.weight ?? 'initial'),
-            ];
-            if (componentBindings) {
-                bindings.push(...componentBindings);
+            return config();
+        }
+        else if (typeof config === 'object' && config !== null) {
+            if (typeof config.type === 'function') {
+                return config.type();
+            }
+            else {
+                return config.type;
             }
-            this.currentRef = this.viewContainerRef.createComponent(newComponent, {
-                bindings,
-                injector: this.viewContainerRef.injector,
-            });
         }
+        return null;
     }
-    clear() {
-        this.currentRef?.destroy();
-        this.currentRef = null;
+    /**
+     * Updates the inputs of an existing component instance with the latest data from the node.
+     * This is called during component reuse to keep the UI in sync without losing DOM state (like focus).
+     */
+    updateInputs(componentRef, node, surfaceId) {
+        componentRef.setInput('surfaceId', surfaceId);
+        componentRef.setInput('component', node);
+        componentRef.setInput('weight', node.weight ?? 0);
+        const props = node.properties;
+        for (const [key, value] of Object.entries(props)) {
+            try {
+                componentRef.setInput(key, value);
+            }
+            catch (e) {
+                console.warn(`[Renderer] Property "${key}" could not be set on component ${node.type}. If this property is required by the specification, ensure the component declares it as an input.`);
+            }
+        }
+        componentRef.changeDetectorRef.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Renderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: Renderer, isStandalone: true, selector: "ng-container[a2ui-renderer]", inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Renderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: Renderer, isStandalone: true, selector: "[a2ui-renderer]", inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Renderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Renderer, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-container[a2ui-renderer]',
+                    selector: '[a2ui-renderer]',
+                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }] } });
 
 /*
- Copyright 2025 Google LLC
+ * 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.
+ */
+class Button extends DynamicComponent {
+    action = input(null, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    child = input(null, ...(ngDevMode ? [{ debugName: "child" }] : /* istanbul ignore next */ []));
+    // This is currently not handled by the template.
+    primary = input(false, ...(ngDevMode ? [{ debugName: "primary" }] : /* istanbul ignore next */ []));
+    handleClick() {
+        const action = this.action();
+        if (action) {
+            super.sendAction(action);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Button, isStandalone: true, selector: "a2ui-button", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, child: { classPropertyName: "child", publicName: "child", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <button
+      [class]="theme.components.Button"
+      [style]="theme.additionalStyles?.Button"
+      (click)="handleClick()"
+    >
+      @if (child()) {
+        <ng-container
+          a2ui-renderer
+          [surfaceId]="surfaceId()!"
+          [component]="child() ?? component().properties.child"
+        />
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:block;flex:var(--weight);min-height:0}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "[a2ui-renderer]", inputs: ["surfaceId", "component"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-button', imports: [Renderer], changeDetection: ChangeDetectionStrategy.Eager, template: `
+    <button
+      [class]="theme.components.Button"
+      [style]="theme.additionalStyles?.Button"
+      (click)="handleClick()"
+    >
+      @if (child()) {
+        <ng-container
+          a2ui-renderer
+          [surfaceId]="surfaceId()!"
+          [component]="child() ?? component().properties.child"
+        />
+      }
+    </button>
+  `, styles: [":host{display:block;flex:var(--weight);min-height:0}\n"] }]
+        }], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], child: [{ type: i0.Input, args: [{ isSignal: true, alias: "child", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }] } });
 
- 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
+/*
+ * 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.
+ */
+class Card extends DynamicComponent {
+    child = input(null, ...(ngDevMode ? [{ debugName: "child" }] : /* istanbul ignore next */ []));
+    children = input([], ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Card, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Card, isStandalone: true, selector: "a2ui-card", inputs: { child: { classPropertyName: "child", publicName: "child", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div [class]="theme.components.Card" [style]="theme.additionalStyles?.Card">
+      @if (child()) {
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child()!" />
+      }
 
-      https://www.apache.org/licenses/LICENSE-2.0
+      @for (comp of children(); track comp.id) {
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="comp" />
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "[a2ui-renderer]", inputs: ["surfaceId", "component"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Card, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-card', imports: [Renderer], template: `
+    <div [class]="theme.components.Card" [style]="theme.additionalStyles?.Card">
+      @if (child()) {
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child()!" />
+      }
+
+      @for (comp of children(); track comp.id) {
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="comp" />
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { child: [{ type: i0.Input, args: [{ isSignal: true, alias: "child", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }] } });
 
- 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.
+/*
+ * 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.
  */
+class Checkbox extends DynamicComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    checked = input.required(...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    inputChecked = computed(() => super.resolvePrimitive(this.checked()) ?? false, ...(ngDevMode ? [{ debugName: "inputChecked" }] : /* istanbul ignore next */ []));
+    resolvedLabel = computed(() => super.resolvePrimitive(this.label()), ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    inputId = super.getUniqueId('a2ui-checkbox');
+    onToggle(event) {
+        const checked = event.target.checked;
+        const checkedNode = this.checked();
+        if (checkedNode && typeof checkedNode === 'object' && 'path' in checkedNode && checkedNode.path) {
+            // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
+            this.processor.processMessages([{
+                    dataModelUpdate: {
+                        surfaceId: this.surfaceId(),
+                        path: this.processor.resolvePath(checkedNode.path, this.component().dataContextPath),
+                        contents: [{ key: '.', valueBoolean: checked }],
+                    },
+                }]);
+        }
+        else {
+            this.sendAction({
+                name: 'toggle',
+                context: [{ key: 'checked', value: { literalBoolean: checked } }],
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Checkbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: Checkbox, isStandalone: true, selector: "a2ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <label>
+      <input
+        type="checkbox"
+        [id]="inputId"
+        [checked]="inputChecked()"
+        (change)="onToggle($event)"
+      />
+      {{ resolvedLabel() }}
+    </label>
+  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Checkbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-checkbox', template: `
+    <label>
+      <input
+        type="checkbox"
+        [id]="inputId"
+        [checked]="inputChecked()"
+        (change)="onToggle($event)"
+      />
+      {{ resolvedLabel() }}
+    </label>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center;gap:.5rem}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: true }] }] } });
 
 /*
- Copyright 2025 Google LLC
+ * 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.
+ */
+class Column extends DynamicComponent {
+    alignment = input('stretch', ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+    distribution = input('start', ...(ngDevMode ? [{ debugName: "distribution" }] : /* istanbul ignore next */ []));
+    children = input(...(ngDevMode ? [undefined, { debugName: "children" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ({
+        ...this.theme.components.Column,
+        [`align-${this.alignment()}`]: true,
+        [`distribute-${this.distribution()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Column, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Column, isStandalone: true, selector: "a2ui-column", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <section [class]="classes()" [style]="theme.additionalStyles?.Column">
+      @for (child of children() ?? component().properties.children; track child?.id ?? child) {
+        @if (child) {
+          <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+        }
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:flex;flex:var(--weight)}section{display:flex;flex-direction:column;min-width:100%;height:100%;box-sizing:border-box}.align-start{align-items:start}.align-center{align-items:center}.align-end{align-items:end}.align-stretch{align-items:stretch}.distribute-start{justify-content:start}.distribute-center{justify-content:center}.distribute-end{justify-content:end}.distribute-spaceBetween{justify-content:space-between}.distribute-spaceAround{justify-content:space-around}.distribute-spaceEvenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "[a2ui-renderer]", inputs: ["surfaceId", "component"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Column, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-column', imports: [Renderer], changeDetection: ChangeDetectionStrategy.Eager, template: `
+    <section [class]="classes()" [style]="theme.additionalStyles?.Column">
+      @for (child of children() ?? component().properties.children; track child?.id ?? child) {
+        @if (child) {
+          <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+        }
+      }
+    </section>
+  `, styles: [":host{display:flex;flex:var(--weight)}section{display:flex;flex-direction:column;min-width:100%;height:100%;box-sizing:border-box}.align-start{align-items:start}.align-center{align-items:center}.align-end{align-items:end}.align-stretch{align-items:stretch}.distribute-start{justify-content:start}.distribute-center{justify-content:center}.distribute-end{justify-content:end}.distribute-spaceBetween{justify-content:space-between}.distribute-spaceAround{justify-content:space-around}.distribute-spaceEvenly{justify-content:space-evenly}\n"] }]
+        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }] } });
 
- 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
+/*
+ * 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.
+ */
+class DateTimeInput extends DynamicComponent {
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    enableDate = input(true, ...(ngDevMode ? [{ debugName: "enableDate" }] : /* istanbul ignore next */ []));
+    enableTime = input(false, ...(ngDevMode ? [{ debugName: "enableTime" }] : /* istanbul ignore next */ []));
+    inputId = super.getUniqueId('a2ui-datetime-input');
+    inputType = computed(() => {
+        if (this.enableDate() && this.enableTime())
+            return 'datetime-local';
+        if (this.enableTime())
+            return 'time';
+        return 'date';
+    }, ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    resolvedLabel = computed(() => super.resolvePrimitive(this.label()), ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedValue = computed(() => super.resolvePrimitive(this.value()), ...(ngDevMode ? [{ debugName: "resolvedValue" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        const value = event.target.value;
+        const valueNode = this.value();
+        if (valueNode && typeof valueNode === 'object' && 'path' in valueNode && valueNode.path) {
+            // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
+            this.processor.processMessages([{
+                    dataModelUpdate: {
+                        surfaceId: this.surfaceId(),
+                        path: this.processor.resolvePath(valueNode.path, this.component().dataContextPath),
+                        contents: [{ key: '.', valueString: value }],
+                    },
+                }]);
+        }
+        else {
+            this.handleAction('change', { value });
+        }
+    }
+    handleAction(name, context) {
+        super.sendAction({
+            name,
+            context: Object.entries(context).map(([key, val]) => ({
+                key,
+                value: typeof val === 'number' ? { literalNumber: val } : { literalString: String(val) },
+            })),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateTimeInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: DateTimeInput, isStandalone: true, selector: "a2ui-datetime-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, enableDate: { classPropertyName: "enableDate", publicName: "enableDate", isSignal: true, isRequired: false, transformFunction: null }, enableTime: { classPropertyName: "enableTime", publicName: "enableTime", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div
+      [class]="theme.components.DateTimeInput.container"
+      [style]="theme.additionalStyles?.DateTimeInput"
+    >
+      <label [class]="theme.components.DateTimeInput.label" [for]="inputId">
+        {{ resolvedLabel() }}
+      </label>
+      <input
+        [type]="inputType()"
+        [class]="theme.components.DateTimeInput.element"
+        [id]="inputId"
+        [value]="resolvedValue() ?? ''"
+        (change)="onChange($event)"
+      />
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateTimeInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-datetime-input', template: `
+    <div
+      [class]="theme.components.DateTimeInput.container"
+      [style]="theme.additionalStyles?.DateTimeInput"
+    >
+      <label [class]="theme.components.DateTimeInput.label" [for]="inputId">
+        {{ resolvedLabel() }}
+      </label>
+      <input
+        [type]="inputType()"
+        [class]="theme.components.DateTimeInput.element"
+        [id]="inputId"
+        [value]="resolvedValue() ?? ''"
+        (change)="onChange($event)"
+      />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], enableDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDate", required: false }] }], enableTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTime", required: false }] }] } });
 
-      https://www.apache.org/licenses/LICENSE-2.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.
+ */
+class Divider extends DynamicComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Divider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: Divider, isStandalone: true, selector: "a2ui-divider", usesInheritance: true, ngImport: i0, template: '<hr [class]="theme.components.Divider" [style]="theme.additionalStyles?.Divider"/>', isInline: true, styles: [":host{display:block;min-height:0;overflow:auto}hr{height:1px;background:#ccc;border:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Divider, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: '<hr [class]="theme.components.Divider" [style]="theme.additionalStyles?.Divider"/>', styles: [":host{display:block;min-height:0;overflow:auto}hr{height:1px;background:#ccc;border:none}\n"] }]
+        }] });
 
- 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.
+/*
+ * 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.
  */
-function provideA2UI(config) {
-    return makeEnvironmentProviders([
-        { provide: Catalog, useValue: config.catalog },
-        { provide: Theme, useValue: config.theme },
-    ]);
+class Icon extends DynamicComponent {
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    resolvedName = computed(() => this.resolvePrimitive(this.name()), ...(ngDevMode ? [{ debugName: "resolvedName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Icon, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Icon, isStandalone: true, selector: "a2ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "tabindex": "-1" } }, usesInheritance: true, ngImport: i0, template: `
+    @let resolvedName = this.resolvedName();
+
+    @if (resolvedName) {
+      <section [class]="theme.components.Icon" [style]="theme.additionalStyles?.Icon">
+        <span class="g-icon">{{ resolvedName }}</span>
+      </section>
+    }
+  `, isInline: true, styles: [":host{display:block;flex:var(--weight);min-height:0;overflow:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Icon, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-icon', host: {
+                        'aria-hidden': 'true',
+                        tabindex: '-1',
+                    }, changeDetection: ChangeDetectionStrategy.Eager, template: `
+    @let resolvedName = this.resolvedName();
+
+    @if (resolvedName) {
+      <section [class]="theme.components.Icon" [style]="theme.additionalStyles?.Icon">
+        <span class="g-icon">{{ resolvedName }}</span>
+      </section>
+    }
+  `, styles: [":host{display:block;flex:var(--weight);min-height:0;overflow:auto}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
 
 /*
- Copyright 2025 Google LLC
+ * 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.
+ */
+class Image extends DynamicComponent {
+    url = input(null, ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    usageHint = input(null, ...(ngDevMode ? [{ debugName: "usageHint" }] : /* istanbul ignore next */ []));
+    fit = input(null, ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
+    altText = input(null, ...(ngDevMode ? [{ debugName: "altText" }] : /* istanbul ignore next */ []));
+    resolvedUrl = computed(() => this.resolvePrimitive(this.url()), ...(ngDevMode ? [{ debugName: "resolvedUrl" }] : /* istanbul ignore next */ []));
+    resolvedAltText = computed(() => this.resolvePrimitive(this.altText()) || '', ...(ngDevMode ? [{ debugName: "resolvedAltText" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const usageHint = this.usageHint();
+        return Styles.merge(this.theme.components.Image.all, usageHint ? this.theme.components.Image[usageHint] : {});
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Image, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Image, isStandalone: true, selector: "a2ui-image", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, usageHint: { classPropertyName: "usageHint", publicName: "usageHint", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, altText: { classPropertyName: "altText", publicName: "altText", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    @let resolvedUrl = this.resolvedUrl();
+    @let resolvedAltText = this.resolvedAltText();
+
+    @if (resolvedUrl) {
+      <section [class]="classes()" [style]="theme.additionalStyles?.Image">
+        <img [src]="resolvedUrl" [alt]="resolvedAltText" />
+      </section>
+    }
+  `, isInline: true, styles: [":host{display:block;flex:var(--weight);min-height:0;overflow:auto}img{display:block;width:100%;height:100%;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Image, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-image', changeDetection: ChangeDetectionStrategy.Eager, template: `
+    @let resolvedUrl = this.resolvedUrl();
+    @let resolvedAltText = this.resolvedAltText();
+
+    @if (resolvedUrl) {
+      <section [class]="classes()" [style]="theme.additionalStyles?.Image">
+        <img [src]="resolvedUrl" [alt]="resolvedAltText" />
+      </section>
+    }
+  `, styles: [":host{display:block;flex:var(--weight);min-height:0;overflow:auto}img{display:block;width:100%;height:100%;box-sizing:border-box}\n"] }]
+        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], usageHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "usageHint", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], altText: [{ type: i0.Input, args: [{ isSignal: true, alias: "altText", required: false }] }] } });
 
- 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
+/*
+ * 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.
+ */
+class List extends DynamicComponent {
+    alignment = input('stretch', ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+    direction = input('vertical', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    children = input(null, ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: List, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: List, isStandalone: true, selector: "a2ui-list", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.direction": "direction()" } }, usesInheritance: true, ngImport: i0, template: `
+    <section [class]="theme.components.List" [style]="theme.additionalStyles?.List">
+      @for (child of children() ?? component().properties.children; track child?.id ?? child) {
+        @if (child) {
+          <div class="a2ui-list-item">
+            <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+          </div>
+        }
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block;flex:var(--weight);min-height:0}:host([direction=\"vertical\"]) section{display:flex;flex-direction:column;max-height:100%;overflow-y:auto}:host([direction=\"horizontal\"]) section{display:flex;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.a2ui-list-item{display:flex;cursor:pointer;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "[a2ui-renderer]", inputs: ["surfaceId", "component"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: List, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-list', imports: [Renderer], changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        '[attr.direction]': 'direction()',
+                    }, template: `
+    <section [class]="theme.components.List" [style]="theme.additionalStyles?.List">
+      @for (child of children() ?? component().properties.children; track child?.id ?? child) {
+        @if (child) {
+          <div class="a2ui-list-item">
+            <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+          </div>
+        }
+      }
+    </section>
+  `, styles: [":host{display:block;flex:var(--weight);min-height:0}:host([direction=\"vertical\"]) section{display:flex;flex-direction:column;max-height:100%;overflow-y:auto}:host([direction=\"horizontal\"]) section{display:flex;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.a2ui-list-item{display:flex;cursor:pointer;box-sizing:border-box}\n"] }]
+        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }] } });
 
-      https://www.apache.org/licenses/LICENSE-2.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.
+ */
+class Modal extends DynamicComponent {
+    entryPointChild = input.required(...(ngDevMode ? [{ debugName: "entryPointChild" }] : /* istanbul ignore next */ []));
+    contentChild = input.required(...(ngDevMode ? [{ debugName: "contentChild" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    openModal() {
+        this.isOpen.set(true);
+    }
+    closeModal() {
+        this.isOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Modal, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Modal, isStandalone: true, selector: "a2ui-modal", inputs: { entryPointChild: { classPropertyName: "entryPointChild", publicName: "entryPointChild", isSignal: true, isRequired: true, transformFunction: null }, contentChild: { classPropertyName: "contentChild", publicName: "contentChild", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="a2ui-modal-entry-point" (click)="openModal()">
+      @if (entryPointChild()) {
+        <ng-container
+          a2ui-renderer
+          [surfaceId]="surfaceId()!"
+          [component]="entryPointChild()!"
+        />
+      }
+    </div>
+
+    @if (isOpen()) {
+      <div [class]="theme.components.Modal.backdrop" (click)="closeModal()">
+        <div [class]="theme.components.Modal.element" (click)="$event.stopPropagation()">
+          @if (contentChild()) {
+            <ng-container
+              a2ui-renderer
+              [surfaceId]="surfaceId()!"
+              [component]="contentChild()!"
+            />
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}.a2ui-modal-entry-point{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "[a2ui-renderer]", inputs: ["surfaceId", "component"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Modal, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-modal', imports: [Renderer], template: `
+    <div class="a2ui-modal-entry-point" (click)="openModal()">
+      @if (entryPointChild()) {
+        <ng-container
+          a2ui-renderer
+          [surfaceId]="surfaceId()!"
+          [component]="entryPointChild()!"
+        />
+      }
+    </div>
+
+    @if (isOpen()) {
+      <div [class]="theme.components.Modal.backdrop" (click)="closeModal()">
+        <div [class]="theme.components.Modal.element" (click)="$event.stopPropagation()">
+          @if (contentChild()) {
+            <ng-container
+              a2ui-renderer
+              [surfaceId]="surfaceId()!"
+              [component]="contentChild()!"
+            />
+          }
+        </div>
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.a2ui-modal-entry-point{cursor:pointer}\n"] }]
+        }], propDecorators: { entryPointChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "entryPointChild", required: true }] }], contentChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentChild", required: true }] }] } });
 
- 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.
+/*
+ * 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.
+ */
+class MultipleChoice extends DynamicComponent {
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    selections = input.required(...(ngDevMode ? [{ debugName: "selections" }] : /* istanbul ignore next */ []));
+    selectId = super.getUniqueId('a2ui-multiple-choice');
+    resolvedLabel = computed(() => this.resolvePrimitive(this.label()), ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedOptions = computed(() => this.options().map((opt) => ({
+        label: this.resolvePrimitive(opt.label),
+        value: opt.value,
+    })), ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : /* istanbul ignore next */ []));
+    resolvedSelections = computed(() => {
+        const s = this.selections();
+        if (s && typeof s === 'object' && 'literalArray' in s) {
+            return s.literalArray;
+        }
+        return [];
+    }, ...(ngDevMode ? [{ debugName: "resolvedSelections" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        const value = event.target.value;
+        const selectionsNode = this.selections();
+        if (selectionsNode && typeof selectionsNode === 'object' && 'path' in selectionsNode && selectionsNode.path) {
+            // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
+            this.processor.processMessages([{
+                    dataModelUpdate: {
+                        surfaceId: this.surfaceId(),
+                        path: this.processor.resolvePath(selectionsNode.path, this.component().dataContextPath),
+                        contents: [{ key: '.', valueString: JSON.stringify({ literalArray: [value] }) }],
+                    },
+                }]);
+        }
+        else {
+            this.handleAction('change', { value });
+        }
+    }
+    handleAction(name, context) {
+        super.sendAction({
+            name,
+            context: Object.entries(context).map(([key, val]) => ({
+                key,
+                value: typeof val === 'number' ? { literalNumber: val } : { literalString: String(val) },
+            })),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MultipleChoice, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MultipleChoice, isStandalone: true, selector: "a2ui-multiple-choice", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div
+      [class]="theme.components.MultipleChoice.container"
+      [style]="theme.additionalStyles?.MultipleChoice"
+    >
+      <label [class]="theme.components.MultipleChoice.label" [for]="selectId">
+        {{ resolvedLabel() }}
+      </label>
+      <select
+        [class]="theme.components.MultipleChoice.element"
+        [id]="selectId"
+        [value]="resolvedSelections()[0] || ''"
+        (change)="onChange($event)"
+      >
+        @for (option of resolvedOptions(); track option.value) {
+          <option [value]="option.value">{{ option.label }}</option>
+        }
+      </select>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MultipleChoice, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-multiple-choice', template: `
+    <div
+      [class]="theme.components.MultipleChoice.container"
+      [style]="theme.additionalStyles?.MultipleChoice"
+    >
+      <label [class]="theme.components.MultipleChoice.label" [for]="selectId">
+        {{ resolvedLabel() }}
+      </label>
+      <select
+        [class]="theme.components.MultipleChoice.element"
+        [id]="selectId"
+        [value]="resolvedSelections()[0] || ''"
+        (change)="onChange($event)"
+      >
+        @for (option of resolvedOptions(); track option.value) {
+          <option [value]="option.value">{{ option.label }}</option>
+        }
+      </select>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selections: [{ type: i0.Input, args: [{ isSignal: true, alias: "selections", required: true }] }] } });
+
+/*
+ * 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.
  */
 class Row extends DynamicComponent {
-    alignment = input('stretch', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
-    distribution = input('start', ...(ngDevMode ? [{ debugName: "distribution" }] : []));
+    alignment = input('stretch', ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+    distribution = input('start', ...(ngDevMode ? [{ debugName: "distribution" }] : /* istanbul ignore next */ []));
+    children = input(...(ngDevMode ? [undefined, { debugName: "children" }] : /* istanbul ignore next */ []));
     classes = computed(() => ({
         ...this.theme.components.Row,
         [`align-${this.alignment()}`]: true,
         [`distribute-${this.distribution()}`]: true,
-    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Row, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Row, isStandalone: true, selector: "a2ui-row", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.alignment": "alignment()", "attr.distribution": "distribution()" } }, usesInheritance: true, ngImport: i0, template: `
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Row, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Row, isStandalone: true, selector: "a2ui-row", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.alignment": "alignment()", "attr.distribution": "distribution()" } }, usesInheritance: true, ngImport: i0, template: `
     <section [class]="classes()" [style]="theme.additionalStyles?.Row">
-      @for (child of component().properties.children; track child) {
-        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+      @for (child of children() ?? component().properties.children; track child?.id ?? child) {
+        @if (child) {
+          <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+        }
       }
     </section>
-  `, isInline: true, styles: [":host{display:flex;flex:var(--weight)}section{display:flex;flex-direction:row;width:100%;min-height:100%;box-sizing:border-box}.align-start{align-items:start}.align-center{align-items:center}.align-end{align-items:end}.align-stretch{align-items:stretch}.distribute-start{justify-content:start}.distribute-center{justify-content:center}.distribute-end{justify-content:end}.distribute-spaceBetween{justify-content:space-between}.distribute-spaceAround{justify-content:space-around}.distribute-spaceEvenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "ng-container[a2ui-renderer]", inputs: ["surfaceId", "component"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex:var(--weight)}section{display:flex;flex-direction:row;width:100%;min-height:100%;box-sizing:border-box}.align-start{align-items:start}.align-center{align-items:center}.align-end{align-items:end}.align-stretch{align-items:stretch}.distribute-start{justify-content:start}.distribute-center{justify-content:center}.distribute-end{justify-content:end}.distribute-spaceBetween{justify-content:space-between}.distribute-spaceAround{justify-content:space-around}.distribute-spaceEvenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "[a2ui-renderer]", inputs: ["surfaceId", "component"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Row, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Row, decorators: [{
             type: Component,
-            args: [{ selector: 'a2ui-row', imports: [Renderer], host: {
+            args: [{ selector: 'a2ui-row', imports: [Renderer], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[attr.alignment]': 'alignment()',
                         '[attr.distribution]': 'distribution()',
                     }, template: `
     <section [class]="classes()" [style]="theme.additionalStyles?.Row">
-      @for (child of component().properties.children; track child) {
-        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+      @for (child of children() ?? component().properties.children; track child?.id ?? child) {
+        @if (child) {
+          <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+        }
       }
     </section>
   `, styles: [":host{display:flex;flex:var(--weight)}section{display:flex;flex-direction:row;width:100%;min-height:100%;box-sizing:border-box}.align-start{align-items:start}.align-center{align-items:center}.align-end{align-items:end}.align-stretch{align-items:stretch}.distribute-start{justify-content:start}.distribute-center{justify-content:center}.distribute-end{justify-content:end}.distribute-spaceBetween{justify-content:space-between}.distribute-spaceAround{justify-content:space-around}.distribute-spaceEvenly{justify-content:space-evenly}\n"] }]
-        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }] } });
+        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }] } });
 
 /*
- 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.
+ * 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.
  */
-class Column extends DynamicComponent {
-    alignment = input('stretch', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
-    distribution = input('start', ...(ngDevMode ? [{ debugName: "distribution" }] : []));
-    classes = computed(() => ({
-        ...this.theme.components.Column,
-        [`align-${this.alignment()}`]: true,
-        [`distribute-${this.distribution()}`]: true,
-    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Column, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Column, isStandalone: true, selector: "a2ui-column", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <section [class]="classes()" [style]="theme.additionalStyles?.Column">
-      @for (child of component().properties.children; track child) {
-        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+class Slider extends DynamicComponent {
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    minValue = input(0, ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+    maxValue = input(100, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    inputId = super.getUniqueId('a2ui-slider-input');
+    labelId = super.getUniqueId('a2ui-slider-label');
+    resolvedLabel = computed(() => super.resolvePrimitive(this.label()), ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedValue = computed(() => super.resolvePrimitive(this.value()), ...(ngDevMode ? [{ debugName: "resolvedValue" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        const value = Number(event.target.value);
+        const valueNode = this.value();
+        if (valueNode && typeof valueNode === 'object' && 'path' in valueNode && valueNode.path) {
+            // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
+            this.processor.processMessages([{
+                    dataModelUpdate: {
+                        surfaceId: this.surfaceId(),
+                        path: this.processor.resolvePath(valueNode.path, this.component().dataContextPath),
+                        contents: [{ key: '.', valueNumber: value }],
+                    },
+                }]);
+        }
+        else {
+            this.handleAction('change', { value });
+        }
+    }
+    handleAction(name, context) {
+        super.sendAction({
+            name,
+            context: Object.entries(context).map(([key, val]) => ({
+                key,
+                value: typeof val === 'number' ? { literalNumber: val } : { literalString: String(val) },
+            })),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Slider, isStandalone: true, selector: "a2ui-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div [class]="theme.components.Slider.container" [style]="theme.additionalStyles?.Slider">
+      @if (resolvedLabel()) {
+        <label [class]="theme.components.Slider.label" [id]="labelId">{{ resolvedLabel() }}</label>
       }
-    </section>
-  `, isInline: true, styles: [":host{display:flex;flex:var(--weight)}section{display:flex;flex-direction:column;min-width:100%;height:100%;box-sizing:border-box}.align-start{align-items:start}.align-center{align-items:center}.align-end{align-items:end}.align-stretch{align-items:stretch}.distribute-start{justify-content:start}.distribute-center{justify-content:center}.distribute-end{justify-content:end}.distribute-spaceBetween{justify-content:space-between}.distribute-spaceAround{justify-content:space-around}.distribute-spaceEvenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "ng-container[a2ui-renderer]", inputs: ["surfaceId", "component"] }] });
+      <input
+        type="range"
+        [class]="theme.components.Slider.element"
+        [id]="inputId"
+        [attr.aria-labelledby]="labelId"
+        [min]="minValue()"
+        [max]="maxValue()"
+        [value]="resolvedValue() ?? 0"
+        (input)="onInput($event)"
+      />
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Column, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Slider, decorators: [{
             type: Component,
-            args: [{ selector: 'a2ui-column', imports: [Renderer], template: `
-    <section [class]="classes()" [style]="theme.additionalStyles?.Column">
-      @for (child of component().properties.children; track child) {
-        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+            args: [{ selector: 'a2ui-slider', template: `
+    <div [class]="theme.components.Slider.container" [style]="theme.additionalStyles?.Slider">
+      @if (resolvedLabel()) {
+        <label [class]="theme.components.Slider.label" [id]="labelId">{{ resolvedLabel() }}</label>
       }
-    </section>
-  `, styles: [":host{display:flex;flex:var(--weight)}section{display:flex;flex-direction:column;min-width:100%;height:100%;box-sizing:border-box}.align-start{align-items:start}.align-center{align-items:center}.align-end{align-items:end}.align-stretch{align-items:stretch}.distribute-start{justify-content:start}.distribute-center{justify-content:center}.distribute-end{justify-content:end}.distribute-spaceBetween{justify-content:space-between}.distribute-spaceAround{justify-content:space-around}.distribute-spaceEvenly{justify-content:space-evenly}\n"] }]
-        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }] } });
+      <input
+        type="range"
+        [class]="theme.components.Slider.element"
+        [id]="inputId"
+        [attr.aria-labelledby]="labelId"
+        [min]="minValue()"
+        [max]="maxValue()"
+        [value]="resolvedValue() ?? 0"
+        (input)="onInput($event)"
+      />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }] } });
 
 /*
- 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.
+ * 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.
  */
-class MarkdownRenderer {
-    originalClassMap = new Map();
-    sanitizer = inject(DomSanitizer);
-    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, tagClassMap) {
-        if (tagClassMap) {
-            this.applyTagClassMap(tagClassMap);
-        }
-        const htmlString = this.markdownIt.render(value);
-        this.unapplyTagClassMap();
-        return this.sanitizer.sanitize(SecurityContext.HTML, htmlString);
-    }
-    applyTagClassMap(tagClassMap) {
-        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);
-                }
-            };
-        });
+class Tabs extends DynamicComponent {
+    tabItems = input.required(...(ngDevMode ? [{ debugName: "tabItems" }] : /* istanbul ignore next */ []));
+    selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    selectTab(index) {
+        this.selectedIndex.set(index);
     }
-    unapplyTagClassMap() {
-        for (const [key, original] of this.originalClassMap) {
-            this.markdownIt.renderer.rules[key] = original;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Tabs, isStandalone: true, selector: "a2ui-tabs", inputs: { tabItems: { classPropertyName: "tabItems", publicName: "tabItems", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div [class]="theme.components.Tabs.container" [style]="theme.additionalStyles?.Tabs">
+      <div [class]="theme.components.Tabs.controls.all">
+        @for (item of tabItems(); track item.child; let i = $index) {
+          <button
+            [class]="selectedIndex() === i ? theme.components.Tabs.controls.selected : {}"
+            (click)="selectTab(i)"
+          >
+            {{ resolvePrimitive(item.title) }}
+          </button>
         }
-        this.originalClassMap.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MarkdownRenderer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MarkdownRenderer, providedIn: 'root' });
+      </div>
+      <div class="a2ui-tabs-content">
+        @if (tabItems()[selectedIndex()]; as selectedTab) {
+          <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="selectedTab.child" />
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.a2ui-tabs-content{flex:1;min-height:0}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "[a2ui-renderer]", inputs: ["surfaceId", "component"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MarkdownRenderer, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-tabs', imports: [Renderer], template: `
+    <div [class]="theme.components.Tabs.container" [style]="theme.additionalStyles?.Tabs">
+      <div [class]="theme.components.Tabs.controls.all">
+        @for (item of tabItems(); track item.child; let i = $index) {
+          <button
+            [class]="selectedIndex() === i ? theme.components.Tabs.controls.selected : {}"
+            (click)="selectTab(i)"
+          >
+            {{ resolvePrimitive(item.title) }}
+          </button>
+        }
+      </div>
+      <div class="a2ui-tabs-content">
+        @if (tabItems()[selectedIndex()]; as selectedTab) {
+          <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="selectedTab.child" />
+        }
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.a2ui-tabs-content{flex:1;min-height:0}\n"] }]
+        }], propDecorators: { tabItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabItems", required: true }] }] } });
 
 /*
- 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.
+ * 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.
  */
 class Text extends DynamicComponent {
     markdownRenderer = inject(MarkdownRenderer);
-    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
-    usageHint = input.required(...(ngDevMode ? [{ debugName: "usageHint" }] : []));
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    usageHint = input(null, ...(ngDevMode ? [{ debugName: "usageHint" }] : /* istanbul ignore next */ []));
     resolvedText = computed(() => {
         const usageHint = this.usageHint();
         let value = super.resolvePrimitive(this.text());
         if (value == null) {
-            return '(empty)';
+            return Promise.resolve('');
         }
         switch (usageHint) {
             case 'h1':
@@ -550,12 +1443,14 @@ class Text extends DynamicComponent {
                 value = String(value);
                 break;
         }
-        return this.markdownRenderer.render(value, Styles.appendToAll(this.theme.markdown, ['ol', 'ul', 'li'], {}));
-    }, ...(ngDevMode ? [{ debugName: "resolvedText" }] : []));
+        return this.markdownRenderer.render(value, {
+            tagClassMap: Styles.appendToAll(this.theme.markdown, ['ol', 'ul', 'li'], {}),
+        });
+    }, ...(ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const usageHint = this.usageHint();
         return Styles.merge(this.theme.components.Text.all, usageHint ? this.theme.components.Text[usageHint] : {});
-    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     additionalStyles = computed(() => {
         const usageHint = this.usageHint();
         const styles = this.theme.additionalStyles?.Text;
@@ -564,13 +1459,13 @@ class Text extends DynamicComponent {
         }
         let additionalStyles = {};
         if (this.areHintedStyles(styles)) {
-            additionalStyles = styles[usageHint ?? 'body'];
+            additionalStyles = styles[usageHint ?? 'body'] || {};
         }
-        else {
+        else if (typeof styles === 'object' && styles !== null) {
             additionalStyles = styles;
         }
         return additionalStyles;
-    }, ...(ngDevMode ? [{ debugName: "additionalStyles" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "additionalStyles" }] : /* istanbul ignore next */ []));
     areHintedStyles(styles) {
         if (typeof styles !== 'object' || !styles || Array.isArray(styles)) {
             return false;
@@ -578,295 +1473,342 @@ class Text extends DynamicComponent {
         const expected = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'caption', 'body'];
         return expected.every((v) => v in styles);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Text, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: Text, isStandalone: true, selector: "a2ui-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, usageHint: { classPropertyName: "usageHint", publicName: "usageHint", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Text, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: Text, isStandalone: true, selector: "a2ui-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, usageHint: { classPropertyName: "usageHint", publicName: "usageHint", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <section
       [class]="classes()"
       [style]="additionalStyles()"
-      [innerHTML]="resolvedText()"
+      [innerHTML]="resolvedText() | async"
     ></section>
-  `, isInline: true, 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}\n"], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, 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}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Text, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Text, decorators: [{
             type: Component,
-            args: [{ selector: 'a2ui-text', template: `
+            args: [{ selector: 'a2ui-text', changeDetection: ChangeDetectionStrategy.Eager, template: `
     <section
       [class]="classes()"
       [style]="additionalStyles()"
-      [innerHTML]="resolvedText()"
+      [innerHTML]="resolvedText() | async"
     ></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}\n"] }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], usageHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "usageHint", required: true }] }] } });
+  `, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe], 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}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], usageHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "usageHint", required: false }] }] } });
 
 /*
- Copyright 2025 Google LLC
+ * 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.
+ */
+class TextField extends DynamicComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    text = input(null, ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    textFieldType = input('shortText', ...(ngDevMode ? [{ debugName: "textFieldType" }] : /* istanbul ignore next */ []));
+    inputId = super.getUniqueId('a2ui-text-field');
+    resolvedLabel = computed(() => super.resolvePrimitive(this.label()), ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedText = computed(() => super.resolvePrimitive(this.text()), ...(ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []));
+    htmlInputType = computed(() => {
+        switch (this.textFieldType()) {
+            case 'number':
+                return 'number';
+            case 'date':
+                return 'date';
+            default:
+                return 'text';
+        }
+    }, ...(ngDevMode ? [{ debugName: "htmlInputType" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        const value = event.target.value;
+        const textNode = this.text();
+        if (textNode && typeof textNode === 'object' && 'path' in textNode && textNode.path) {
+            // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
+            this.processor.processMessages([{
+                    dataModelUpdate: {
+                        surfaceId: this.surfaceId(),
+                        path: this.processor.resolvePath(textNode.path, this.component().dataContextPath),
+                        contents: [{ key: '.', valueString: value }],
+                    },
+                }]);
+        }
+        else {
+            this.handleAction('input', { value });
+        }
+    }
+    handleAction(name, context) {
+        super.sendAction({
+            name,
+            context: Object.entries(context).map(([key, val]) => ({
+                key,
+                value: typeof val === 'number' ? { literalNumber: val } : { literalString: String(val) },
+            })),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: TextField, isStandalone: true, selector: "a2ui-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, textFieldType: { classPropertyName: "textFieldType", publicName: "textFieldType", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div [class]="theme.components.TextField.container" [style]="theme.additionalStyles?.TextField">
+      <label [class]="theme.components.TextField.label" [for]="inputId">
+        {{ resolvedLabel() }}
+      </label>
+      <input
+        [type]="htmlInputType()"
+        [class]="theme.components.TextField.element"
+        [id]="inputId"
+        [value]="resolvedText() ?? ''"
+        (input)="onInput($event)"
+      />
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextField, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-text-field', template: `
+    <div [class]="theme.components.TextField.container" [style]="theme.additionalStyles?.TextField">
+      <label [class]="theme.components.TextField.label" [for]="inputId">
+        {{ resolvedLabel() }}
+      </label>
+      <input
+        [type]="htmlInputType()"
+        [class]="theme.components.TextField.element"
+        [id]="inputId"
+        [value]="resolvedText() ?? ''"
+        (input)="onInput($event)"
+      />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], textFieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "textFieldType", required: false }] }] } });
 
- 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
+/*
+ * 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.
+ */
+class Video extends DynamicComponent {
+    url = input.required(...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    resolvedUrl = computed(() => this.resolvePrimitive(this.url()), ...(ngDevMode ? [{ debugName: "resolvedUrl" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Video, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Video, isStandalone: true, selector: "a2ui-video", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    @let resolvedUrl = this.resolvedUrl();
+
+    @if (resolvedUrl) {
+      <section [class]="theme.components.Video" [style]="theme.additionalStyles?.Video">
+        <video controls [src]="resolvedUrl"></video>
+      </section>
+    }
+  `, isInline: true, styles: [":host{display:block;flex:var(--weight);min-height:0;overflow:auto}video{display:block;width:100%;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Video, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-video', changeDetection: ChangeDetectionStrategy.Eager, template: `
+    @let resolvedUrl = this.resolvedUrl();
 
-      https://www.apache.org/licenses/LICENSE-2.0
+    @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}\n"] }]
+        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: true }] }] } });
 
- 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.
+/*
+ * 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.
  */
+// Components
 const DEFAULT_CATALOG = {
-    Row: {
-        type: () => Row,
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('alignment', () => properties.alignment ?? 'stretch'),
-                inputBinding('distribution', () => properties.distribution ?? 'start'),
-            ];
-        },
-    },
-    Column: {
-        type: () => Column,
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('alignment', () => properties.alignment ?? 'stretch'),
-                inputBinding('distribution', () => properties.distribution ?? 'start'),
-            ];
-        },
-    },
-    List: {
-        type: () => import('./a2ui-angular-list-nEeT59V3.mjs').then((r) => r.List),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [inputBinding('direction', () => properties.direction ?? 'vertical')];
-        },
-    },
-    Card: () => import('./a2ui-angular-card-Ix6OIdUv.mjs').then((r) => r.Card),
-    Image: {
-        type: () => import('./a2ui-angular-image-BWzAw0rh.mjs').then((r) => r.Image),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('url', () => properties.url),
-                inputBinding('usageHint', () => properties.usageHint),
-            ];
-        },
-    },
-    Icon: {
-        type: () => import('./a2ui-angular-icon-BE9Hj9V6.mjs').then((r) => r.Icon),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [inputBinding('name', () => properties.name)];
-        },
-    },
-    Video: {
-        type: () => import('./a2ui-angular-video-DuFTfN0B.mjs').then((r) => r.Video),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [inputBinding('url', () => properties.url)];
-        },
-    },
-    AudioPlayer: {
-        type: () => import('./a2ui-angular-audio-DoZb9mn_.mjs').then((r) => r.Audio),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [inputBinding('url', () => properties.url)];
-        },
-    },
-    Text: {
-        type: () => Text,
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('text', () => properties.text),
-                inputBinding('usageHint', () => properties.usageHint || null),
-            ];
-        },
-    },
-    Button: {
-        type: () => import('./a2ui-angular-button-CvH0kAtN.mjs').then((r) => r.Button),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [inputBinding('action', () => properties.action)];
-        },
-    },
-    Divider: () => import('./a2ui-angular-divider-BizPl3qL.mjs').then((r) => r.Divider),
-    MultipleChoice: {
-        type: () => import('./a2ui-angular-multiple-choice-Bry7X74i.mjs').then((r) => r.MultipleChoice),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('options', () => properties.options || []),
-                inputBinding('value', () => properties.selections),
-                inputBinding('description', () => 'Select an item'), // TODO: this should be defined in the properties
-            ];
-        },
-    },
-    TextField: {
-        type: () => import('./a2ui-angular-text-field-Deokh07j.mjs').then((r) => r.TextField),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('text', () => properties.text ?? null),
-                inputBinding('label', () => properties.label),
-                inputBinding('inputType', () => properties.type),
-            ];
-        },
-    },
-    DateTimeInput: {
-        type: () => import('./a2ui-angular-datetime-input-dmZAjvrF.mjs').then((r) => r.DatetimeInput),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('enableDate', () => properties.enableDate),
-                inputBinding('enableTime', () => properties.enableTime),
-                inputBinding('value', () => properties.value),
-            ];
-        },
-    },
-    CheckBox: {
-        type: () => import('./a2ui-angular-checkbox-BN4EF2Ci.mjs').then((r) => r.Checkbox),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('label', () => properties.label),
-                inputBinding('value', () => properties.value),
-            ];
-        },
-    },
-    Slider: {
-        type: () => import('./a2ui-angular-slider-BgseUbN2.mjs').then((r) => r.Slider),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [
-                inputBinding('value', () => properties.value),
-                inputBinding('minValue', () => properties.minValue),
-                inputBinding('maxValue', () => properties.maxValue),
-                inputBinding('label', () => ''), // TODO: this should be defined in the properties
-            ];
-        },
-    },
-    Tabs: {
-        type: () => import('./a2ui-angular-tabs-q5Mn9vgq.mjs').then((r) => r.Tabs),
-        bindings: (node) => {
-            const properties = node.properties;
-            return [inputBinding('tabs', () => properties.tabItems)];
-        },
-    },
-    Modal: {
-        type: () => import('./a2ui-angular-modal-mr9LmczA.mjs').then((r) => r.Modal),
-        bindings: () => [],
-    },
+    AudioPlayer: () => AudioPlayer,
+    Button: () => Button,
+    Card: () => Card,
+    CheckBox: () => Checkbox,
+    Column: () => Column,
+    DateTimeInput: () => DateTimeInput,
+    Divider: () => Divider,
+    Icon: () => Icon,
+    Image: () => Image,
+    List: () => List,
+    Modal: () => Modal,
+    MultipleChoice: () => MultipleChoice,
+    Row: () => Row,
+    Slider: () => Slider,
+    Tabs: () => Tabs,
+    Text: () => Text,
+    TextField: () => TextField,
+    Video: () => Video,
 };
+function registerStandardComponents(catalog) {
+    for (const [key, value] of Object.entries(DEFAULT_CATALOG)) {
+        catalog[key] = value;
+    }
+}
 
 /*
- 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.
+ * 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.
  */
 class Surface {
-    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : []));
-    surface = input.required(...(ngDevMode ? [{ debugName: "surface" }] : []));
-    styles = computed(() => {
-        const surface = this.surface();
-        const styles = {};
-        if (surface?.styles) {
-            for (const [key, value] of Object.entries(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 styles;
-    }, ...(ngDevMode ? [{ debugName: "styles" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Surface, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Surface, isStandalone: true, selector: "a2ui-surface", inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style": "styles()" } }, ngImport: i0, template: `
-    @let surfaceId = this.surfaceId();
-    @let surface = this.surface();
-
-    @if (surfaceId && surface) {
-      <ng-container a2ui-renderer [surfaceId]="surfaceId" [component]="surface.componentTree!" />
+    processor = inject(MessageProcessor);
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    surfaceInput = input(null, { ...(ngDevMode ? { debugName: "surfaceInput" } : /* istanbul ignore next */ {}), alias: 'surface' });
+    surface = computed(() => {
+        this.processor.version(); // Track dependency on in-place mutations
+        return this.surfaceInput() ?? this.processor.getSurfaces().get(this.surfaceId()) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    rootComponent = computed(() => {
+        this.processor.version(); // Track dependency on in-place mutations
+        return this.surface()?.componentTree ?? null;
+    }, ...(ngDevMode ? [{ debugName: "rootComponent" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Surface, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Surface, isStandalone: true, selector: "a2ui-surface", inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, surfaceInput: { classPropertyName: "surfaceInput", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (rootComponent()) {
+      <ng-container a2ui-renderer [surfaceId]="surfaceId()" [component]="rootComponent()!" />
     }
-  `, isInline: true, styles: [":host{display:flex;min-height:0;max-height:100%;flex-direction:column;gap:16px}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "ng-container[a2ui-renderer]", inputs: ["surfaceId", "component"] }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "[a2ui-renderer]", inputs: ["surfaceId", "component"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Surface, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Surface, decorators: [{
             type: Component,
             args: [{ 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!" />
+    @if (rootComponent()) {
+      <ng-container a2ui-renderer [surfaceId]="surfaceId()" [component]="rootComponent()!" />
     }
-  `, host: {
-                        '[style]': 'styles()',
-                    }, styles: [":host{display:flex;min-height:0;max-height:100%;flex-direction:column;gap:16px}\n"] }]
-        }], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: true }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], surfaceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }] } });
 
 /*
- Copyright 2025 Google LLC
+ * 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.
+ */
 
- 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
+/*
+ * 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.
+ */
+function provideA2UI(config) {
+    return makeEnvironmentProviders([
+        { provide: Catalog, useValue: config.catalog },
+        {
+            provide: Theme,
+            useFactory: () => {
+                const theme = new Theme();
+                theme.update(config.theme);
+                return theme;
+            },
+        },
+    ]);
+}
 
-      https://www.apache.org/licenses/LICENSE-2.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.
+ */
 
- 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.
+/**
+ * Copyright 2026 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
+ *
+ *     http://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.
+ */
+
+/**
+ * Copyright 2026 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
+ *
+ *     http://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 A2UI_ANGULAR_VERSION = '0.9.0';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Catalog, DEFAULT_CATALOG, DynamicComponent, MessageProcessor, Renderer, Surface, Theme, provideA2UI };
+export { A2UI_ANGULAR_VERSION, AudioPlayer, Button, Card, Catalog, Checkbox, Column, DEFAULT_CATALOG, DateTimeInput, Divider, DynamicComponent, Icon, Image, List, MessageProcessor, Modal, MultipleChoice, Renderer, Row, Slider, Surface, Tabs, Text, TextField, Theme, Video, provideA2UI, provideMarkdownRenderer, registerStandardComponents };
 //# sourceMappingURL=a2ui-angular.mjs.map