@threadplane/chat 0.0.57 → 0.0.59

package/fesm2022/threadplane-chat.mjs

@@ -10,8 +10,8 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationEnd } from '@angular/router';
 import { filter, map, startWith } from 'rxjs/operators';
 import { toJSONSchema } from 'zod/v4';
-import { resolveDynamic, getByPointer, isPathRef, setByPointer, createA2uiMessageParser } from '@threadplane/a2ui';
-export { isLiteralBoolean, isLiteralNumber, isLiteralString, isPathRef } from '@threadplane/a2ui';
+import { createA2uiFunctionRegistry, isPathRef, resolveDynamic, getByPointer, isFunctionCall, A2UI_WIRE_VERSION, deleteByPointer, setByPointer, createA2uiMessageParser, A2UI_BASIC_CATALOG_ID } from '@threadplane/a2ui';
+export { A2UI_BASIC_CATALOG_ID, A2UI_MIME_TYPE, A2UI_WIRE_VERSION, isFunctionCall, isPathRef } from '@threadplane/a2ui';
 import { materialize as materialize$1, createPartialJsonParser } from '@cacheplane/partial-json';
 import { fromEvent, EMPTY } from 'rxjs';
 
@@ -9106,23 +9106,49 @@ function createClientToolsCoordinator(registry, options = {}) {
     };
 }
 
-const RESERVED_PROP_KEYS = new Set(['child', 'children', 'action', 'tabItems', 'entryPointChild', 'contentChild']);
-/** Pull the (single) component-type key + its props from a v1 ComponentDef wrapper. */
-function unwrapComponentDef(def) {
-    const entries = Object.entries(def);
-    if (entries.length !== 1) {
-        return { type: 'Text', props: {} };
-    }
-    const [type, props] = entries[0];
-    return { type, props: (props ?? {}) };
-}
+/** Shared standard-function registry (formatString, formatters, logic). */
+const A2UI_FUNCTIONS = createA2uiFunctionRegistry();
+/** Keys that are protocol structure (base fields + child/action wiring),
+ * not renderable props. */
+const RESERVED_PROP_KEYS = new Set([
+    'id', 'component', 'catalogId', 'weight', 'accessibility', 'checks',
+    'child', 'children', 'action', 'tabs', 'trigger', 'content',
+]);
 function resolveAction(action, surface, sourceComponentId) {
-    if (!action)
+    if (!action || typeof action !== 'object')
+        return undefined;
+    if (!('event' in action)) {
+        // Local client-side function action — routed to the surface component's
+        // built-in `a2ui:localAction` handler (openUrl et al.).
+        if ('functionCall' in action && action.functionCall
+            && typeof action.functionCall.call === 'string') {
+            return {
+                click: {
+                    action: 'a2ui:localAction',
+                    params: {
+                        call: action.functionCall.call,
+                        args: action.functionCall.args ?? {},
+                    },
+                },
+            };
+        }
+        return undefined;
+    }
+    const event = action.event;
+    if (!event || typeof event.name !== 'string')
         return undefined;
     const resolvedContext = {};
-    if (Array.isArray(action.context)) {
-        for (const entry of action.context) {
-            resolvedContext[entry.key] = resolveDynamic(entry.value, surface.dataModel);
+    if (event.context && typeof event.context === 'object') {
+        for (const [key, value] of Object.entries(event.context)) {
+            if (isPathRef(value)) {
+                // Live marker: the surface component substitutes the CURRENT value
+                // (user edits included) from its state store at dispatch time —
+                // build-time resolution would freeze the agent-seeded snapshot.
+                resolvedContext[key] = { $bindState: value.path };
+            }
+            else {
+                resolvedContext[key] = resolveDynamic(value, surface.dataModel, undefined, A2UI_FUNCTIONS);
+            }
         }
     }
     return {
@@ -9131,7 +9157,7 @@ function resolveAction(action, surface, sourceComponentId) {
             params: {
                 surfaceId: surface.surfaceId,
                 sourceComponentId,
-                name: action.name,
+                name: event.name,
                 context: resolvedContext,
             },
         },
@@ -9140,16 +9166,15 @@ function resolveAction(action, surface, sourceComponentId) {
 function childrenToList(children, surface) {
     if (!children)
         return undefined;
-    if ('explicitList' in children) {
-        return { ids: children.explicitList };
+    if (Array.isArray(children)) {
+        return { ids: children };
     }
-    if ('template' in children) {
-        const t = children.template;
-        const arr = getByPointer(surface.dataModel, t.dataBinding);
+    if (typeof children === 'object' && 'componentId' in children && 'path' in children) {
+        const arr = getByPointer(surface.dataModel, children.path);
         if (!Array.isArray(arr))
             return { ids: [] };
-        const ids = arr.map((_, i) => `${t.componentId}__${i}`);
-        return { ids, templateExpand: { componentId: t.componentId, arrPath: t.dataBinding, arr } };
+        const ids = arr.map((_, i) => `${children.componentId}__${i}`);
+        return { ids, templateExpand: { componentId: children.componentId, arrPath: children.path, arr } };
     }
     return undefined;
 }
@@ -9158,7 +9183,8 @@ function surfaceToSpec(surface) {
         return null;
     const elements = {};
     for (const [id, comp] of surface.components) {
-        const { type, props: rawProps } = unwrapComponentDef(comp.component);
+        const type = typeof comp.component === 'string' ? comp.component : 'Text';
+        const rawProps = comp;
         const resolvedProps = {};
         const bindings = {};
         for (const [key, value] of Object.entries(rawProps)) {
@@ -9177,62 +9203,73 @@ function surfaceToSpec(surface) {
                 bindings[key] = path;
                 resolvedProps[key] = { $bindState: path };
             }
+            else if (isFunctionCall(value)) {
+                const resolved = resolveDynamic(value, surface.dataModel, undefined, A2UI_FUNCTIONS);
+                if (resolved !== undefined)
+                    resolvedProps[key] = resolved;
+            }
             else {
-                resolvedProps[key] = resolveDynamic(value, surface.dataModel);
+                resolvedProps[key] = resolveDynamic(value, surface.dataModel, undefined, A2UI_FUNCTIONS);
             }
         }
         if (Object.keys(bindings).length > 0) {
             resolvedProps['_bindings'] = bindings;
         }
+        // Checkable components surface their live validation message through a
+        // reserved store path the surface component writes on failed submits.
+        if (componentHasChecks(rawProps)) {
+            resolvedProps['errorText'] = { $bindState: `/_a2uiChecks/${id}` };
+        }
         const action = rawProps.action;
         const on = resolveAction(action, surface, id);
-        // Map children — handle Card single child / Button single child / Modal entryPointChild+contentChild / Tabs tabItems
+        // Map children — Card/Button single child, Modal trigger+content, Tabs tabs[].
         let children;
-        if (type === 'Card' && typeof rawProps.child === 'string') {
-            children = [rawProps.child];
-        }
-        else if (type === 'Button' && typeof rawProps.child === 'string') {
-            children = [rawProps.child];
+        if ((type === 'Card' || type === 'Button') && typeof rawProps['child'] === 'string') {
+            children = [rawProps['child']];
         }
         else if (type === 'Modal') {
-            const m = rawProps;
             const ids = [];
-            if (m.entryPointChild)
-                ids.push(m.entryPointChild);
-            if (m.contentChild)
-                ids.push(m.contentChild);
+            if (typeof rawProps['trigger'] === 'string')
+                ids.push(rawProps['trigger']);
+            if (typeof rawProps['content'] === 'string')
+                ids.push(rawProps['content']);
             children = ids;
         }
         else if (type === 'Tabs') {
-            const items = rawProps.tabItems ?? [];
+            const items = rawProps.tabs ?? [];
             children = items.map(t => t.child);
             // Resolve tab titles and pass them as a plain string array for the Tabs component's tab bar.
-            resolvedProps['tabTitles'] = items.map(t => t.title !== undefined ? String(resolveDynamic(t.title, surface.dataModel)) : '');
+            resolvedProps['tabTitles'] = items.map(t => t.title !== undefined
+                ? String(resolveDynamic(t.title, surface.dataModel, undefined, A2UI_FUNCTIONS))
+                : '');
         }
-        else if (type === 'MultipleChoice') {
+        else if (type === 'ChoicePicker') {
             // Resolve options[*].label (DynamicString) so the component receives plain strings.
             const opts = rawProps.options ?? [];
             resolvedProps['options'] = opts.map(o => ({
-                label: o.label !== undefined ? String(resolveDynamic(o.label, surface.dataModel)) : '',
+                label: o.label !== undefined
+                    ? String(resolveDynamic(o.label, surface.dataModel, undefined, A2UI_FUNCTIONS))
+                    : '',
                 value: o.value,
             }));
         }
         else {
-            const childInfo = childrenToList(rawProps.children, surface);
+            const childInfo = childrenToList(rawProps['children'], surface);
             if (childInfo) {
                 children = childInfo.ids;
                 if (childInfo.templateExpand) {
                     const t = childInfo.templateExpand;
                     const templateComp = surface.components.get(t.componentId);
                     if (templateComp) {
-                        const { type: tType, props: tRaw } = unwrapComponentDef(templateComp.component);
+                        const tType = typeof templateComp.component === 'string' ? templateComp.component : 'Text';
+                        const tRaw = templateComp;
                         for (let i = 0; i < t.arr.length; i++) {
                             const scope = { basePath: `${t.arrPath}/${i}`, item: t.arr[i] };
                             const itemProps = {};
                             for (const [k, v] of Object.entries(tRaw)) {
                                 if (RESERVED_PROP_KEYS.has(k))
                                     continue;
-                                itemProps[k] = resolveDynamic(v, surface.dataModel, scope);
+                                itemProps[k] = resolveDynamic(v, surface.dataModel, scope, A2UI_FUNCTIONS);
                             }
                             elements[`${t.componentId}__${i}`] = { type: tType, props: itemProps };
                         }
@@ -9251,24 +9288,35 @@ function surfaceToSpec(surface) {
     const root = surface.components.has('root')
         ? 'root'
         : surface.components.keys().next().value;
-    return { root, elements, state: surface.dataModel };
+    // Seed empty check messages so errorText $bindState bindings resolve
+    // (render-element defers mounting while any bound prop is undefined).
+    const checkSeeds = {};
+    for (const [id, comp] of surface.components) {
+        if (componentHasChecks(comp))
+            checkSeeds[id] = '';
+    }
+    const state = Object.keys(checkSeeds).length > 0
+        ? { ...surface.dataModel, _a2uiChecks: { ...checkSeeds, ...(surface.dataModel['_a2uiChecks'] ?? {}) } }
+        : surface.dataModel;
+    return { root, elements, state };
+}
+/** True when the component carries validation rules the renderer enforces:
+ * explicit `checks`, or a TextField `validationRegexp` with a bound value. */
+function componentHasChecks(raw) {
+    if (Array.isArray(raw['checks']) && raw['checks'].length > 0)
+        return true;
+    return typeof raw['validationRegexp'] === 'string'
+        && raw['validationRegexp'].length > 0
+        && isPathRef(raw['value']);
 }
 
-function toDynamicValue(v) {
-    if (typeof v === 'string')
-        return { literalString: v };
-    if (typeof v === 'number')
-        return { literalNumber: v };
-    if (typeof v === 'boolean')
-        return { literalBoolean: v };
-    return { literalString: String(v) };
-}
+// SPDX-License-Identifier: MIT
 /**
  * Derive a human-readable label for an outgoing action by walking from
  * the source component to its authored visible text. Today supported:
- * Button → child Text → literalString. Returns null for other component
- * types or when the linkage isn't well-formed; callers fall back to a
- * camelCase humanization of `action.name`.
+ * Button → child Text → text. Returns null for other component types or
+ * when the linkage isn't well-formed; callers fall back to a camelCase
+ * humanization of `action.name`.
  *
  * Why: the chat-lib used to ship a hardcoded `KNOWN_LABELS` map
  * (bookingSubmit → 'Search flights') that embedded app-specific
@@ -9278,49 +9326,38 @@ function toDynamicValue(v) {
  */
 function deriveActionLabel(surface, sourceId) {
     const source = surface.components.get(sourceId);
-    if (!source)
+    if (!source || source.component !== 'Button')
         return null;
-    const buttonProps = source.component.Button;
-    if (!buttonProps?.child)
+    const childId = source.child;
+    if (typeof childId !== 'string')
         return null;
-    const labelText = surface.components.get(buttonProps.child);
-    if (!labelText)
+    const labelText = surface.components.get(childId);
+    if (!labelText || labelText.component !== 'Text')
         return null;
-    const textProps = labelText.component.Text;
-    if (!textProps)
-        return null;
-    // `text` may be either a raw string (LLM-author ergonomic shorthand) or
-    // a wrapped DynamicString `{ literalString: "..." }` (canonical v1 shape).
-    // Accept both so the label survives whichever form the LLM happens to emit.
-    const text = textProps.text;
+    // v0.9 dynamic strings are bare literals or `{ path }` bindings; only a
+    // bare literal is a usable authored label.
+    const text = labelText.text;
     if (typeof text === 'string') {
         return text.length > 0 ? text : null;
     }
-    if (text && typeof text === 'object' && typeof text.literalString === 'string') {
-        const literal = text.literalString;
-        return literal.length > 0 ? literal : null;
-    }
     return null;
 }
-/** Builds an A2uiActionMessage from handler params and the current surface.
- *  The action.context is serialized as v1 DynamicValue-wrapped entries.
- *  Sets action.label when the source component is a Button with a Text
- *  child whose literalString is non-empty. */
+/** Builds a v0.9 A2uiActionMessage from handler params and the current
+ *  surface. The action.context is the resolved plain object the renderer
+ *  produced from the component's `action.event.context`. Sets action.label
+ *  when the source component is a Button with a Text child whose text is a
+ *  non-empty bare literal. */
 function buildA2uiActionMessage(params, surface) {
-    const rawContext = params['context'] ?? {};
-    const wrappedContext = {};
-    for (const [k, v] of Object.entries(rawContext)) {
-        wrappedContext[k] = toDynamicValue(v);
-    }
+    const context = params['context'] ?? {};
     const sourceComponentId = params['sourceComponentId'];
     const message = {
-        version: 'v1',
+        version: A2UI_WIRE_VERSION,
         action: {
             name: params['name'],
             surfaceId: surface.surfaceId,
             sourceComponentId,
             timestamp: new Date().toISOString(),
-            context: wrappedContext,
+            context,
         },
     };
     const label = deriveActionLabel(surface, sourceComponentId);
@@ -9329,7 +9366,6 @@ function buildA2uiActionMessage(params, surface) {
     if (surface.sendDataModel) {
         message.metadata = {
             a2uiClientDataModel: {
-                version: 'v1',
                 surfaces: { [surface.surfaceId]: surface.dataModel },
             },
         };
@@ -9396,22 +9432,55 @@ class A2uiSurfaceComponent {
     surfaceFallback = input(undefined, ...(ngDevMode ? [{ debugName: "surfaceFallback" }] : []));
     events = output();
     action = output();
-    /** Agent-set primary color from `beginRendering.styles.primaryColor`.
+    /** Emitted when a submit is blocked by failing validation checks —
+     * the spec client → agent error message (code VALIDATION_FAILED). */
+    validationError = output();
+    /** Surface-owned live state store: `$bindState` props read it and input
+     * components write user edits into it, so event-time logic (checks,
+     * action context) sees CURRENT values instead of the agent-seeded
+     * snapshot. Seeded from spec.state with user edits preserved. Public so
+     * hosts (and tests) can read the live values of a rendered surface. */
+    liveStore = signalStateStore({});
+    /** Last value this component seeded per state path (see chat-generative-ui:
+     * distinguishes "still our seed — safe to overwrite" from "user edited"). */
+    seeded = new Map();
+    constructor() {
+        effect(() => {
+            const s = this.spec();
+            const state = s?.state;
+            if (!state)
+                return;
+            untracked(() => {
+                for (const [key, value] of Object.entries(state)) {
+                    const path = key.startsWith('/') ? key : `/${key}`;
+                    const current = this.liveStore.get(path);
+                    const untouched = current === undefined ||
+                        (this.seeded.has(path) && current === this.seeded.get(path));
+                    if (untouched) {
+                        if (current !== value)
+                            this.liveStore.set(path, value);
+                        this.seeded.set(path, value);
+                    }
+                }
+            });
+        });
+    }
+    /** Agent-set primary color from `createSurface.theme.primaryColor`.
      * Returns null when unset so the host binding doesn't override the
      * consumer's `:root`-level `--a2ui-primary` default. */
-    primaryColor = computed(() => (this.state()?.surface ?? this.surface())?.styles?.primaryColor ?? null, ...(ngDevMode ? [{ debugName: "primaryColor" }] : []));
-    /** Agent-set font family from `beginRendering.styles.font`. Returns
-     * null when unset so the host doesn't override consumer fonts. */
-    fontFamily = computed(() => (this.state()?.surface ?? this.surface())?.styles?.font ?? null, ...(ngDevMode ? [{ debugName: "fontFamily" }] : []));
-    /** Roots from the surface state — components whose ids appear as
-     * children of no other component. The wire spec includes
-     * `beginRendering.root` as the single root; that path stays usable
-     * but we keep the renderer permissive in case future surfaces emit
-     * multiple top-level components.
+    primaryColor = computed(() => (this.state()?.surface ?? this.surface())?.theme?.primaryColor ?? null, ...(ngDevMode ? [{ debugName: "primaryColor" }] : []));
+    /** Agent identity chrome from `createSurface.theme`. When neither
+     * `agentDisplayName` nor `iconUrl` is set, no header renders at all
+     * (zero layout impact for themeless surfaces — the common case). */
+    agentDisplayName = computed(() => (this.state()?.surface ?? this.surface())?.theme?.agentDisplayName ?? null, ...(ngDevMode ? [{ debugName: "agentDisplayName" }] : []));
+    iconUrl = computed(() => (this.state()?.surface ?? this.surface())?.theme?.iconUrl ?? null, ...(ngDevMode ? [{ debugName: "iconUrl" }] : []));
+    /** Roots from the surface state. The v0.9 wire contract reserves the
+     * component id `root` as the single tree root; we keep the renderer
+     * permissive in case future surfaces emit multiple top-level
+     * components.
      *
      * Conservative: returns only the first key from componentViews
-     * insertion order. The wire format's beginRendering.root carries the
-     * true root id; plumbing it through A2uiSurfaceState is a follow-up. */
+     * insertion order. */
     rootIds = computed(() => {
         const st = this.state();
         if (!st)
@@ -9421,7 +9490,7 @@ class A2uiSurfaceComponent {
     /** Convert the A2UI surface to a json-render Spec for rendering.
      *  Prefers `state().surface` (the progressively-built wire surface)
      *  over the legacy `surface` input. surfaceToSpec handles
-     *  children.explicitList → spec.children translation + reserved-key
+     *  children-id-list → spec.children translation + reserved-key
      *  filtering + path-ref → $bindState rewriting; the rendered tree
      *  then uses render-element's standard input-mapping
      *  (`childKeys: el.children`) so catalog components receive the
@@ -9447,7 +9516,50 @@ class A2uiSurfaceComponent {
                 const surf = this.state()?.surface ?? this.surface();
                 if (!surf)
                     return undefined;
-                const message = buildA2uiActionMessage(params, surf);
+                // Live model: user edits in the store overlay the agent-seeded model.
+                const liveModel = this.mergedLiveModel(surf);
+                // Validation gate: every check rule on the surface must pass before
+                // an event action dispatches (spec CheckRule semantics).
+                const failures = evaluateSurfaceChecks(surf, liveModel);
+                if (failures.length > 0) {
+                    for (const f of failures) {
+                        this.liveStore.set(`/_a2uiChecks/${f.componentId}`, f.message);
+                    }
+                    const first = failures[0];
+                    this.validationError.emit({
+                        version: A2UI_WIRE_VERSION,
+                        error: {
+                            code: 'VALIDATION_FAILED',
+                            surfaceId: surf.surfaceId,
+                            ...(first.path ? { path: first.path } : {}),
+                            message: first.message,
+                        },
+                    });
+                    return undefined;
+                }
+                // Clear any stale messages from a previous failed submit.
+                for (const [id, comp] of surf.components) {
+                    if (componentHasChecks(comp)) {
+                        this.liveStore.set(`/_a2uiChecks/${id}`, '');
+                    }
+                }
+                // Substitute live-context markers with current values.
+                const rawContext = params['context'] ?? {};
+                const context = {};
+                for (const [k, v] of Object.entries(rawContext)) {
+                    if (v != null && typeof v === 'object' && '$bindState' in v) {
+                        const path = String(v['$bindState']);
+                        context[k] = getByPointer(liveModel, path);
+                    }
+                    else {
+                        context[k] = v;
+                    }
+                }
+                // sendDataModel metadata must carry the LIVE model (user edits
+                // included), minus renderer-internal keys.
+                const { _a2uiChecks, ...publicModel } = liveModel;
+                void _a2uiChecks;
+                const message = buildA2uiActionMessage({ ...params, context }, { ...surf, dataModel: publicModel });
                 this.action.emit(message);
                 return message;
             },
@@ -9460,7 +9572,7 @@ class A2uiSurfaceComponent {
                 }
                 // Built-in fallback
                 if (call === 'openUrl' && typeof globalThis.window !== 'undefined') {
-                    globalThis.window.open(String(args['url'] ?? ''), '_blank');
+                    globalThis.window.open(String(args['url'] ?? ''), '_blank', 'noopener');
                 }
                 return undefined;
             },
@@ -9469,12 +9581,30 @@ class A2uiSurfaceComponent {
     onRenderEvent(event) {
         this.events.emit(event);
     }
+    /** Agent-seeded data model overlaid with the store's current state
+     * (user edits + check messages). Shallow per-key merge is sufficient:
+     * store snapshots hold whole top-level values written via pointers. */
+    mergedLiveModel(surf) {
+        const snapshot = this.liveStore.getSnapshot();
+        return deepOverlay(surf.dataModel, snapshot);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiSurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiSurfaceComponent, isStandalone: true, selector: "a2ui-surface", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: true, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null }, surfaceFallback: { classPropertyName: "surfaceFallback", publicName: "surfaceFallback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { events: "events", action: "action" }, host: { properties: { "style.--a2ui-primary": "primaryColor()", "style.font-family": "fontFamily()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiSurfaceComponent, isStandalone: true, selector: "a2ui-surface", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: true, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null }, surfaceFallback: { classPropertyName: "surfaceFallback", publicName: "surfaceFallback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { events: "events", action: "action", validationError: "validationError" }, host: { properties: { "style.--a2ui-primary": "primaryColor()" } }, ngImport: i0, template: `
+    @if (agentDisplayName() || iconUrl()) {
+      <div class="a2ui-surface-chrome">
+        @if (iconUrl(); as icon) {
+          <img [src]="icon" alt="" referrerpolicy="no-referrer" />
+        }
+        @if (agentDisplayName(); as name) {
+          <span>{{ name }}</span>
+        }
+      </div>
+    }
     @if (spec(); as s) {
       <render-spec
         [spec]="s"
         [registry]="registry()"
+        [store]="liveStore"
         [handlers]="internalHandlers()"
         (events)="onRenderEvent($event)"
       />
@@ -9485,32 +9615,32 @@ class A2uiSurfaceComponent {
         <a2ui-default-fallback />
       }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: RenderSpecComponent, selector: "render-spec", inputs: ["spec", "registry", "store", "functions", "handlers", "loading"], outputs: ["events"] }, { kind: "component", type: A2uiDefaultFallbackComponent, selector: "a2ui-default-fallback" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-surface-chrome{display:flex;align-items:center;gap:var(--a2ui-spacing-2);margin-bottom:var(--a2ui-spacing-2);color:var(--a2ui-label);font-size:var(--a2ui-typography-label-size)}.a2ui-surface-chrome img{width:16px;height:16px;border-radius:50%;object-fit:cover}\n"], dependencies: [{ kind: "component", type: RenderSpecComponent, selector: "render-spec", inputs: ["spec", "registry", "store", "functions", "handlers", "loading"], outputs: ["events"] }, { kind: "component", type: A2uiDefaultFallbackComponent, selector: "a2ui-default-fallback" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiSurfaceComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'a2ui-surface',
-                    standalone: true,
-                    imports: [
+            args: [{ selector: 'a2ui-surface', standalone: true, imports: [
                         RenderSpecComponent,
                         A2uiDefaultFallbackComponent,
                         NgComponentOutlet,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    // The host applies the agent-set v1 styles (`beginRendering.styles`)
-                    // as inline CSS custom properties + font-family. Catalog components
-                    // consume `--a2ui-primary` for accents (buttons, sliders, focus,
-                    // etc.); `font-family` cascades naturally from the host.
-                    host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--a2ui-primary]': 'primaryColor()',
-                        '[style.font-family]': 'fontFamily()',
-                    },
-                    template: `
+                    }, template: `
+    @if (agentDisplayName() || iconUrl()) {
+      <div class="a2ui-surface-chrome">
+        @if (iconUrl(); as icon) {
+          <img [src]="icon" alt="" referrerpolicy="no-referrer" />
+        }
+        @if (agentDisplayName(); as name) {
+          <span>{{ name }}</span>
+        }
+      </div>
+    }
     @if (spec(); as s) {
       <render-spec
         [spec]="s"
         [registry]="registry()"
+        [store]="liveStore"
         [handlers]="internalHandlers()"
         (events)="onRenderEvent($event)"
       />
@@ -9521,9 +9651,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         <a2ui-default-fallback />
       }
     }
-  `,
-                }]
-        }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: true }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], surfaceFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceFallback", required: false }] }], events: [{ type: i0.Output, args: ["events"] }], action: [{ type: i0.Output, args: ["action"] }] } });
+  `, styles: [".a2ui-surface-chrome{display:flex;align-items:center;gap:var(--a2ui-spacing-2);margin-bottom:var(--a2ui-spacing-2);color:var(--a2ui-label);font-size:var(--a2ui-typography-label-size)}.a2ui-surface-chrome img{width:16px;height:16px;border-radius:50%;object-fit:cover}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: true }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], surfaceFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceFallback", required: false }] }], events: [{ type: i0.Output, args: ["events"] }], action: [{ type: i0.Output, args: ["action"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
+/** Recursively overlay `top` onto `base` (plain objects merge; anything
+ * else in `top` wins). */
+function deepOverlay(base, top) {
+    const out = { ...base };
+    for (const [k, v] of Object.entries(top)) {
+        const prev = out[k];
+        if (v != null && typeof v === 'object' && !Array.isArray(v)
+            && prev != null && typeof prev === 'object' && !Array.isArray(prev)) {
+            out[k] = deepOverlay(prev, v);
+        }
+        else {
+            out[k] = v;
+        }
+    }
+    return out;
+}
+const CHECK_FUNCTIONS = createA2uiFunctionRegistry();
+/** Evaluate every check rule on the surface against the live model.
+ * A rule passes when its condition resolves to exactly `true`. TextField
+ * `validationRegexp` (with a bound value) contributes an implicit rule. */
+function evaluateSurfaceChecks(surf, liveModel) {
+    const failures = [];
+    for (const [id, comp] of surf.components) {
+        const raw = comp;
+        const boundPath = isPathRef(raw['value']) ? raw['value'].path : undefined;
+        const rules = Array.isArray(raw['checks']) ? [...raw['checks']] : [];
+        if (typeof raw['validationRegexp'] === 'string' && raw['validationRegexp'].length > 0 && boundPath) {
+            rules.push({
+                condition: { call: 'regex', args: { value: { path: boundPath }, pattern: raw['validationRegexp'] } },
+                message: 'Invalid format',
+            });
+        }
+        for (const rule of rules) {
+            if (!rule || typeof rule.message !== 'string')
+                continue;
+            const passed = resolveDynamic(rule.condition, liveModel, undefined, CHECK_FUNCTIONS) === true;
+            if (!passed) {
+                failures.push({ componentId: id, message: rule.message, ...(boundPath ? { path: boundPath } : {}) });
+                break; // first failing rule per component
+            }
+        }
+    }
+    return failures;
+}
 
 // SPDX-License-Identifier: MIT
 /**
@@ -9586,7 +9759,9 @@ function createParseTreeStore(parser) {
     };
 }
 
-const REF_PATTERN = /\{(\$\.[^}]+)\}/g;
+// `[^{}]` (no nested braces) + a length bound keep the scan linear on
+// adversarial LLM-authored strings (CodeQL js/polynomial-redos).
+const REF_PATTERN = /\{(\$\.[^{}]{1,512})\}/g;
 function walk(value, into) {
     if (typeof value === 'string') {
         let m;
@@ -9606,29 +9781,19 @@ function walk(value, into) {
     }
 }
 /** Extracts the set of data-model paths (e.g. `$.form.name`) referenced
- * by `{$.path}` expressions inside a component's prop bag. Result is
+ * by `{$.path}` expressions inside a component's props. Result is
  * deduplicated and sorted for stable signal identity. */
-function extractBindings(def) {
+function extractBindings(component) {
     const out = new Set();
-    walk(def, out);
+    walk(component, out);
     return [...out].sort();
 }
 
 // SPDX-License-Identifier: MIT
-function entriesToObject(entries) {
-    const out = {};
-    for (const e of entries) {
-        if ('valueString' in e && e.valueString !== undefined)
-            out[e.key] = e.valueString;
-        else if ('valueNumber' in e && e.valueNumber !== undefined)
-            out[e.key] = e.valueNumber;
-        else if ('valueBoolean' in e && e.valueBoolean !== undefined)
-            out[e.key] = e.valueBoolean;
-        else if ('valueMap' in e && Array.isArray(e.valueMap))
-            out[e.key] = entriesToObject(e.valueMap);
-    }
-    return out;
-}
+/** Component-envelope keys that are protocol structure, not renderable props. */
+const RESERVED_VIEW_PROP_KEYS = new Set([
+    'id', 'component', 'catalogId', 'weight', 'accessibility', 'checks',
+]);
 /** Returns true if `path` (in `$.a.b.c` form) resolves to a defined,
  * non-null value inside `dataModel`. Used to decide per-component
  * readiness. */
@@ -9648,7 +9813,7 @@ function isResolved(dataModel, path) {
  * nested objects/arrays are recursed. */
 function resolveProps(value, dataModel) {
     if (typeof value === 'string') {
-        const full = value.match(/^\{(\$\.[^}]+)\}$/);
+        const full = value.match(/^\{(\$\.[^{}]{1,512})\}$/);
         if (full) {
             const segs = full[1].slice(2).split('.');
             let cur = dataModel;
@@ -9659,7 +9824,9 @@ function resolveProps(value, dataModel) {
             }
             return cur;
         }
-        return value.replace(/\{(\$\.[^}]+)\}/g, (_, path) => {
+        // Bounded, brace-free class keeps the scan linear on adversarial
+        // LLM-authored strings (CodeQL js/polynomial-redos).
+        return value.replace(/\{(\$\.[^{}]{1,512})\}/g, (_, path) => {
             const segs = path.slice(2).split('.');
             let cur = dataModel;
             for (const s of segs) {
@@ -9681,12 +9848,50 @@ function resolveProps(value, dataModel) {
     }
     return value;
 }
+/** Resolve a flat v0.9 component into the renderable prop bag: reserved
+ * protocol keys stripped, `{$.path}` references substituted. */
+function resolveViewProps(component, dataModel) {
+    const out = {};
+    for (const [k, v] of Object.entries(component)) {
+        if (RESERVED_VIEW_PROP_KEYS.has(k))
+            continue;
+        out[k] = resolveProps(v, dataModel);
+    }
+    return out;
+}
+function projectView(component) {
+    return {
+        id: component.id,
+        type: typeof component.component === 'string' ? component.component : 'Unknown',
+        bindings: extractBindings(component),
+        ready: false,
+        props: {},
+        def: component,
+    };
+}
+/** Apply one v0.9 data-model mutation (set at path, whole-model replace,
+ * or delete-at-path when `value` is omitted). */
+function applyDataModelDelta(dataModel, delta) {
+    const path = delta.path && delta.path !== '/' ? delta.path : undefined;
+    if (delta.del) {
+        return path ? deleteByPointer(dataModel, path) : {};
+    }
+    if (!path) {
+        return (delta.value ?? {});
+    }
+    return setByPointer(dataModel, path, delta.value);
+}
 /**
  * Create an {@link A2uiSurfaceStore} — the per-conversation store that buffers
- * streamed A2UI surface updates, tracks each surface's data model + lifecycle
+ * streamed A2UI v0.9 envelopes, tracks each surface's data model + lifecycle
  * state, and exposes them as signals for rendering. One store backs a chat
  * thread's A2UI surfaces.
  *
+ * A surface becomes visible once its `createSurface` envelope has arrived AND
+ * a component with id `root` has been defined (the v0.9 progressive-rendering
+ * rule). Everything received earlier is buffered; afterwards, components merge
+ * incrementally by id and data-model updates apply immediately.
+ *
  * @returns A fresh, empty {@link A2uiSurfaceStore}.
  * @example
  * ```ts
@@ -9701,145 +9906,115 @@ function createA2uiSurfaceStore() {
     function bufferOf(surfaceId) {
         let b = buffers.get(surfaceId);
         if (!b) {
-            b = { dataModelDeltas: [] };
+            b = { components: new Map(), componentViews: new Map(), dataModelDeltas: [] };
             buffers.set(surfaceId, b);
         }
         return b;
     }
+    function publish(surface, views) {
+        const nextSurfaces = new Map(surfacesSignal());
+        nextSurfaces.set(surface.surfaceId, surface);
+        surfacesSignal.set(nextSurfaces);
+        const nextStates = new Map(surfaceStatesSignal());
+        nextStates.set(surface.surfaceId, { surface, componentViews: views });
+        surfaceStatesSignal.set(nextStates);
+    }
+    /** Recompute readiness/props for every view against `dataModel`,
+     * honoring the monotonic ready rule. */
+    function refreshViews(views, dataModel) {
+        const next = new Map();
+        for (const [id, v] of views) {
+            const allResolved = v.bindings.every((p) => isResolved(dataModel, p));
+            // Monotonic: once ready=true, stays true even if a later update
+            // clears a referenced path.
+            const nextReady = v.ready || allResolved;
+            next.set(id, {
+                ...v,
+                ready: nextReady,
+                props: nextReady ? resolveViewProps(v.def, dataModel) : v.props,
+            });
+        }
+        return next;
+    }
+    /** Commit the buffer to a live surface if the v0.9 render condition holds:
+     * createSurface seen AND a `root` component defined. */
+    function tryCommit(surfaceId) {
+        const b = buffers.get(surfaceId);
+        if (!b || !b.create || !b.components.has('root'))
+            return;
+        let dataModel = {};
+        for (const d of b.dataModelDeltas) {
+            dataModel = applyDataModelDelta(dataModel, d);
+        }
+        const surface = {
+            surfaceId,
+            catalogId: b.create.catalogId,
+            ...(b.create.theme ? { theme: b.create.theme } : {}),
+            ...(b.create.sendDataModel !== undefined ? { sendDataModel: b.create.sendDataModel } : {}),
+            components: new Map(b.components),
+            dataModel,
+        };
+        publish(surface, refreshViews(b.componentViews, dataModel));
+        buffers.delete(surfaceId);
+    }
     function apply(message) {
-        if ('surfaceUpdate' in message) {
-            const upd = message.surfaceUpdate;
-            const b = bufferOf(upd.surfaceId);
-            const map = new Map();
-            for (const c of upd.components)
-                map.set(c.id, c);
-            b.components = map;
-            // Project per-component views with bindings extracted from prop
-            // expressions. ready starts false; props starts empty.
-            const views = new Map();
-            for (const c of upd.components) {
-                const def = c.component;
-                const typeKey = (def && typeof def === 'object')
-                    ? (Object.keys(def)[0] ?? 'Unknown')
-                    : 'Unknown';
-                views.set(c.id, {
-                    id: c.id,
-                    type: typeKey,
-                    bindings: extractBindings(def),
-                    ready: false,
-                    props: {},
-                    def,
-                });
+        if ('createSurface' in message) {
+            const create = message.createSurface;
+            const live = surfacesSignal().get(create.surfaceId);
+            if (live) {
+                // v0.9 calls createSurface-on-existing an agent error; tolerate it
+                // as an idempotent refresh of the surface's create-time fields.
+                const state = surfaceStatesSignal().get(create.surfaceId);
+                const surface = {
+                    ...live,
+                    catalogId: create.catalogId,
+                    ...(create.theme !== undefined ? { theme: create.theme } : {}),
+                    ...(create.sendDataModel !== undefined ? { sendDataModel: create.sendDataModel } : {}),
+                };
+                publish(surface, new Map(state?.componentViews ?? []));
+                return;
             }
-            b.componentViews = views;
+            bufferOf(create.surfaceId).create = create;
+            tryCommit(create.surfaceId);
             return;
         }
-        if ('dataModelUpdate' in message) {
-            const upd = message.dataModelUpdate;
-            const surface = surfacesSignal().get(upd.surfaceId);
-            if (surface) {
-                // Already-rendered surface: apply incrementally.
-                let dataModel = surface.dataModel;
-                const obj = entriesToObject(upd.contents);
-                if (upd.path && upd.path !== '/') {
-                    for (const [k, v] of Object.entries(obj)) {
-                        dataModel = setByPointer(dataModel, `${upd.path}/${k}`, v);
-                    }
-                }
-                else {
-                    dataModel = { ...dataModel, ...obj };
-                }
-                const next = new Map(surfacesSignal());
-                const nextSurface = { ...surface, dataModel };
-                next.set(upd.surfaceId, nextSurface);
-                surfacesSignal.set(next);
-                // Recompute per-component readiness with the monotonic rule.
-                const prevState = surfaceStatesSignal().get(upd.surfaceId);
-                if (prevState) {
-                    const nextViews = new Map();
-                    for (const [id, v] of prevState.componentViews) {
-                        const allResolved = v.bindings.every((p) => isResolved(dataModel, p));
-                        // Monotonic: once ready=true, stays true even if a later
-                        // update clears a referenced path.
-                        const nextReady = v.ready || allResolved;
-                        nextViews.set(id, {
-                            ...v,
-                            ready: nextReady,
-                            props: nextReady
-                                ? resolveProps(v.def, dataModel)
-                                : v.props,
-                        });
-                    }
-                    const nextStatesMap = new Map(surfaceStatesSignal());
-                    nextStatesMap.set(upd.surfaceId, { surface: nextSurface, componentViews: nextViews });
-                    surfaceStatesSignal.set(nextStatesMap);
+        if ('updateComponents' in message) {
+            const upd = message.updateComponents;
+            const live = surfacesSignal().get(upd.surfaceId);
+            if (live) {
+                // Incremental merge by id into the live surface.
+                const components = new Map(live.components);
+                const state = surfaceStatesSignal().get(upd.surfaceId);
+                const views = new Map(state?.componentViews ?? []);
+                for (const c of upd.components) {
+                    components.set(c.id, c);
+                    views.set(c.id, projectView(c));
                 }
+                const surface = { ...live, components };
+                publish(surface, refreshViews(views, surface.dataModel));
+                return;
             }
-            else {
-                // Pre-render: buffer the delta.
-                const b = bufferOf(upd.surfaceId);
-                b.dataModelDeltas.push({ path: upd.path, contents: upd.contents });
+            const b = bufferOf(upd.surfaceId);
+            for (const c of upd.components) {
+                b.components.set(c.id, c);
+                b.componentViews.set(c.id, projectView(c));
             }
+            tryCommit(upd.surfaceId);
             return;
         }
-        if ('beginRendering' in message) {
-            const begin = message.beginRendering;
-            const b = buffers.get(begin.surfaceId);
-            if (!b || !b.components)
-                return; // no surfaceUpdate yet — no-op
-            // Build initial data model from buffered deltas.
-            let dataModel = {};
-            for (const d of b.dataModelDeltas) {
-                const obj = entriesToObject(d.contents);
-                if (d.path && d.path !== '/') {
-                    for (const [k, v] of Object.entries(obj)) {
-                        dataModel = setByPointer(dataModel, `${d.path}/${k}`, v);
-                    }
-                }
-                else {
-                    dataModel = { ...dataModel, ...obj };
-                }
+        if ('updateDataModel' in message) {
+            const upd = message.updateDataModel;
+            const delta = { path: upd.path, value: upd.value, del: !('value' in upd) || upd.value === undefined };
+            const live = surfacesSignal().get(upd.surfaceId);
+            if (live) {
+                const dataModel = applyDataModelDelta(live.dataModel, delta);
+                const surface = { ...live, dataModel };
+                const state = surfaceStatesSignal().get(upd.surfaceId);
+                publish(surface, refreshViews(state?.componentViews ?? new Map(), dataModel));
             }
-            // Merge with any existing surface's dataModel if this is a re-render.
-            const existing = surfacesSignal().get(begin.surfaceId);
-            if (existing) {
-                dataModel = { ...existing.dataModel, ...dataModel };
-            }
-            // Capture v1 styles (font, primaryColor) from beginRendering. A
-            // re-render keeps any prior styles unless the new beginRendering
-            // explicitly overrides them — this matches the agent's likely
-            // intent ("change the data, keep the look").
-            const nextStyles = begin.styles
-                ?? existing?.styles;
-            const surface = {
-                surfaceId: begin.surfaceId,
-                catalogId: 'basic',
-                components: b.components,
-                dataModel,
-                ...(nextStyles ? { styles: nextStyles } : {}),
-            };
-            const next = new Map(surfacesSignal());
-            next.set(begin.surfaceId, surface);
-            surfacesSignal.set(next);
-            // Project per-component views with initial readiness based on the
-            // accumulated data model.
-            const baseViews = b.componentViews ?? new Map();
-            const initialViews = new Map();
-            for (const [id, v] of baseViews) {
-                const allResolved = v.bindings.every((p) => isResolved(dataModel, p));
-                initialViews.set(id, {
-                    ...v,
-                    ready: allResolved,
-                    props: allResolved
-                        ? resolveProps(v.def, dataModel)
-                        : {},
-                });
+            else {
+                bufferOf(upd.surfaceId).dataModelDeltas.push(delta);
             }
-            const nextStates = new Map(surfaceStatesSignal());
-            nextStates.set(begin.surfaceId, { surface, componentViews: initialViews });
-            surfaceStatesSignal.set(nextStates);
-            // Reset buffer so subsequent surfaceUpdate is the next round.
-            buffers.set(begin.surfaceId, { dataModelDeltas: [] });
             return;
         }
         if ('deleteSurface' in message) {
@@ -10151,7 +10326,7 @@ function createContentClassifier() {
 
 // libs/chat/src/lib/a2ui/envelope-normalizer.ts
 // SPDX-License-Identifier: MIT
-const ENVELOPE_KEYS = ['surfaceUpdate', 'beginRendering', 'dataModelUpdate', 'deleteSurface'];
+const ENVELOPE_KEYS = ['createSurface', 'updateComponents', 'updateDataModel', 'deleteSurface'];
 /**
  * The parent LLM may emit envelope-tool arguments in four shapes (observed in
  * the spike across gpt-5-mini and gpt-5): the canonical {envelopes: [...]},
@@ -10183,7 +10358,7 @@ function normalizeEnvelopeArgs(args) {
             .sort((a, b) => a - b)
             .map((k) => args[String(k)]);
     }
-    // (d) flat single envelope: { surfaceUpdate: {...} } | { beginRendering: ... } | etc
+    // (d) flat single envelope: { createSurface: {...} } | { updateComponents: ... } | etc
     if (ENVELOPE_KEYS.some((k) => k in args)) {
         return [args];
     }
@@ -10374,17 +10549,15 @@ function isValidJsonPrefix(s) {
  * tool_call.arguments JSON. Uses @cacheplane/partial-json to extract
  * structurally-complete envelope objects from the growing args string.
  *
- * Synthesis safety net: if the first complete surfaceUpdate arrives and
- * no beginRendering has been extracted yet, the bridge synthesises one
- * targeted at the surfaceUpdate's first component (preferring id='root'
- * if present). This makes the surface mount IMMEDIATELY after the first
- * surfaceUpdate parses — without waiting for the LLM to emit beginRendering
- * at the end of its envelope list — so the render-element fallback gate
- * (PR #252) actually fires while dataModelUpdates flow in.
+ * Synthesis safety net: v0.9 requires a `createSurface` envelope before
+ * any `updateComponents`. If a complete `updateComponents` arrives for a
+ * surface with no `createSurface` seen yet this turn, the bridge
+ * synthesises one (basic catalog) so the surface can mount as soon as its
+ * `root` component is defined — the store gates rendering on
+ * createSurface + root, and fills the tree in progressively after that.
  *
- * The store's apply() already treats repeated beginRendering for the same
- * surfaceId as idempotent (just re-applies styles), so the LLM's eventual
- * beginRendering (if any) is a no-op rather than a conflict.
+ * The store treats a later "real" createSurface for the same surface as an
+ * idempotent refresh, so LLMs that emit one out of order are harmless.
  */
 function createPartialArgsBridge(store) {
     const states = new Map();
@@ -10394,20 +10567,13 @@ function createPartialArgsBridge(store) {
             s = {
                 parser: createPartialJsonParser(),
                 dispatchedCount: 0,
-                surfacePairDispatched: false,
-                synthesisedSurfaceId: null,
+                createDispatched: new Set(),
                 poisoned: false,
             };
             states.set(toolCallId, s);
         }
         return s;
     }
-    function pickRoot(components) {
-        if (components.length === 0)
-            return null;
-        const explicitRoot = components.find((c) => c.id === 'root');
-        return explicitRoot ? explicitRoot.id : components[0].id;
-    }
     function push(toolCallId, argsSoFar) {
         const state = stateOf(toolCallId);
         if (state.poisoned)
@@ -10437,32 +10603,8 @@ function createPartialArgsBridge(store) {
         const envelopes = normalizeEnvelopeArgs(materialised);
         if (!envelopes)
             return;
-        // Phase 1: defer initial dispatch until the first envelope is a complete
-        // surfaceUpdate whose components include at least one entry with an `id`
-        // — otherwise pickRoot returns null and synthesis silently no-ops, leaving
-        // the surface unmounted forever. Once we have a pickable root, dispatch
-        // the surfaceUpdate AND a synthesised beginRendering as an atomic pair.
-        if (!state.surfacePairDispatched) {
-            const firstEnv = envelopes[0];
-            if (!firstEnv || !('surfaceUpdate' in firstEnv))
-                return;
-            if (!isStructurallyComplete(firstEnv))
-                return;
-            const upd = firstEnv.surfaceUpdate;
-            if (upd.components.length === 0)
-                return;
-            const root = pickRoot(upd.components);
-            if (!root)
-                return;
-            state.surfacePairDispatched = true;
-            state.dispatchedCount = 1; // index 0 = the surfaceUpdate we just sent
-            state.synthesisedSurfaceId = upd.surfaceId;
-            store.applyPartialArgs(toolCallId, [
-                firstEnv,
-                { beginRendering: { surfaceId: upd.surfaceId, root } },
-            ]);
-        }
-        // Phase 2: dispatch any newly-complete envelopes beyond the initial pair.
+        // Dispatch newly-complete envelopes in order, synthesising the missing
+        // createSurface when the stream leads with components.
         const newEnvelopes = [];
         for (let i = state.dispatchedCount; i < envelopes.length; i++) {
             const env = envelopes[i];
@@ -10471,14 +10613,18 @@ function createPartialArgsBridge(store) {
                 // exist before earlier ones complete (envelopes are an ordered list).
                 break;
             }
-            // Skip a "real" beginRendering for the synthesised surface — the store
-            // already treats it as idempotent (just re-applies styles), but we
-            // advance past it so dispatchedCount stays in sync with the index.
-            if ('beginRendering' in env &&
-                env.beginRendering.surfaceId ===
-                    state.synthesisedSurfaceId) {
-                state.dispatchedCount = i + 1;
-                continue;
+            if ('createSurface' in env) {
+                state.createDispatched.add(env.createSurface.surfaceId);
+            }
+            else if ('updateComponents' in env) {
+                const surfaceId = env.updateComponents.surfaceId;
+                if (!state.createDispatched.has(surfaceId)) {
+                    state.createDispatched.add(surfaceId);
+                    newEnvelopes.push({
+                        version: A2UI_WIRE_VERSION,
+                        createSurface: { surfaceId, catalogId: A2UI_BASIC_CATALOG_ID },
+                    });
+                }
             }
             newEnvelopes.push(env);
             state.dispatchedCount = i + 1;
@@ -10497,12 +10643,27 @@ function isStructurallyComplete(env) {
     if (!env || typeof env !== 'object' || Array.isArray(env))
         return false;
     const obj = env;
-    for (const k of ['surfaceUpdate', 'beginRendering', 'dataModelUpdate', 'deleteSurface']) {
+    for (const k of ['createSurface', 'updateComponents', 'updateDataModel', 'deleteSurface']) {
         if (k in obj && typeof obj[k] === 'object' && obj[k] !== null) {
-            // For surfaceUpdate, also require non-undefined surfaceId + components.
-            if (k === 'surfaceUpdate') {
-                const su = obj[k];
-                return typeof su.surfaceId === 'string' && Array.isArray(su.components);
+            // For updateComponents, require surfaceId + components where every
+            // component has at least parsed its `id` and `component` fields —
+            // a half-streamed component object materialises as `{}` and must not
+            // dispatch (it would consume the envelope index and drop the real
+            // components forever, since re-parses skip dispatched indices).
+            if (k === 'updateComponents') {
+                const uc = obj[k];
+                return typeof uc.surfaceId === 'string'
+                    && Array.isArray(uc.components)
+                    && uc.components.length > 0
+                    && uc.components.every((c) => c != null && typeof c === 'object'
+                        && typeof c.id === 'string'
+                        && typeof c.component === 'string');
+            }
+            // For createSurface, require both ids so a half-streamed envelope
+            // doesn't commit with an undefined catalogId.
+            if (k === 'createSurface') {
+                const cs = obj[k];
+                return typeof cs.surfaceId === 'string' && typeof cs.catalogId === 'string';
             }
             return true;
         }
@@ -10514,7 +10675,7 @@ function isStructurallyComplete(env) {
 /**
  * Synthesize a short human-readable label for a serialized A2UI action
  * message, so the chat composition can render "Search flights" instead
- * of a raw `{"version":"v1","action":...}` JSON dump as a user bubble.
+ * of a raw `{"version":"v0.9","action":...}` JSON dump as a user bubble.
  *
  * Per the A2UI spec, action messages flow on the client → agent
  * return channel and are framed as typed events (closer to tool calls
@@ -10531,7 +10692,7 @@ function isStructurallyComplete(env) {
  *      "Booking submit"). Used when no label was stamped — typically
  *      because the source component isn't a Button-with-Text-child.
  *
- * Returns null for any content that isn't a v1 A2UI action message;
+ * Returns null for any content that isn't an A2UI action message;
  * callers should fall back to the original content in that case.
  *
  * Design context: a previous iteration shipped a hardcoded
@@ -10560,7 +10721,8 @@ function a2uiActionLabel(content) {
     }
     if (!isRecord$1(parsed))
         return null;
-    if (parsed['version'] !== 'v1')
+    const version = parsed['version'];
+    if (typeof version !== 'string' || !version.startsWith('v'))
         return null;
     const action = parsed['action'];
     if (!isRecord$1(action))
@@ -11256,10 +11418,10 @@ class ChatComponent {
         // A2UI/json-render markers in the content string.
         const projectedContent = m.content;
         if (typeof projectedContent === 'string' && projectedContent.length > 0) {
-            // A2UI v1 envelope keys (canonical Google shape).
-            if (projectedContent.includes('"surfaceUpdate"')
-                || projectedContent.includes('"beginRendering"')
-                || projectedContent.includes('"dataModelUpdate"')) {
+            // A2UI v0.9 envelope keys (canonical Google shape).
+            if (projectedContent.includes('"createSurface"')
+                || projectedContent.includes('"updateComponents"')
+                || projectedContent.includes('"updateDataModel"')) {
                 return true;
             }
             // json-render spec shape — looks like `{ "root": "...", "elements": ... }`.
@@ -11548,7 +11710,7 @@ class ChatComponent {
       </div>
     </div>
     }
-  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;max-height:100%;overflow:hidden;background:var(--tplane-chat-bg)}:host>chat-welcome{display:flex;flex:1 1 auto;width:100%}.chat-shell{display:flex;flex:1;min-height:0;overflow:hidden}.chat-shell__sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--tplane-chat-separator);background:var(--tplane-chat-surface-alt);overflow-y:auto;display:none}@media(min-width:768px){.chat-shell__sidebar{display:block}}.chat-shell__main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--tplane-chat-text-muted);text-align:center;flex:1;min-height:0}.chat-empty[hidden]{display:none}.chat-empty__title{font-size:1.125rem;font-weight:500;color:var(--tplane-chat-text);margin:0}.chat-empty__sub{margin:0;font-size:var(--tplane-chat-font-size-sm)}.chat-scroll{flex:1;min-height:0;overflow-y:auto;padding-top:var(--tplane-chat-edge-pad)}.chat-scroll::-webkit-scrollbar{width:6px}.chat-scroll::-webkit-scrollbar-thumb{background:var(--tplane-chat-separator);border-radius:10px}[chatFooter]{padding-bottom:var(--tplane-chat-edge-pad)}.chat-footer-wrap{position:relative}\n"], dependencies: [{ kind: "component", type: ChatWindowComponent, selector: "chat-window" }, { kind: "component", type: ChatMessageListComponent, selector: "chat-message-list", inputs: ["agent"] }, { kind: "directive", type: MessageTemplateDirective, selector: "ng-template[chatMessageTemplate]", inputs: ["chatMessageTemplate"] }, { kind: "component", type: ChatMessageComponent, selector: "chat-message", inputs: ["role", "current", "streaming", "prevRole", "message"] }, { kind: "component", type: ChatInputComponent, selector: "chat-input", inputs: ["agent", "submitOnEnter", "placeholder", "showStopButton"], outputs: ["submitted", "stopped"] }, { kind: "component", type: ChatTypingIndicatorComponent, selector: "chat-typing-indicator", inputs: ["agent"] }, { kind: "component", type: ChatErrorComponent, selector: "chat-error", inputs: ["agent"] }, { kind: "component", type: ChatThreadListComponent, selector: "chat-thread-list", inputs: ["threads", "activeThreadId", "showNewThreadButton", "actions", "mode", "projects"], outputs: ["threadSelected", "newThreadRequested"] }, { kind: "component", type: ChatGenerativeUiComponent, selector: "chat-generative-ui", inputs: ["spec", "registry", "store", "handlers", "loading"], outputs: ["events"] }, { kind: "component", type: ChatStreamingMdComponent, selector: "chat-streaming-md", inputs: ["document", "viewRegistry"] }, { kind: "component", type: ChatToolCallsComponent, selector: "chat-tool-calls", inputs: ["agent", "message", "grouping", "groupSummary", "excludeToolNames"] }, { kind: "component", type: ChatToolViewsComponent, selector: "chat-tool-views", inputs: ["agent", "message", "views", "store", "handlers"], outputs: ["events"] }, { kind: "component", type: A2uiSurfaceComponent, selector: "a2ui-surface", inputs: ["surface", "state", "catalog", "handlers", "surfaceFallback"], outputs: ["events", "action"] }, { kind: "component", type: ChatMessageActionsComponent, selector: "chat-message-actions", inputs: ["content", "disabled"], outputs: ["regenerate", "rate", "contentCopied"] }, { kind: "component", type: ChatWelcomeComponent, selector: "chat-welcome" }, { kind: "component", type: ChatSelectComponent, selector: "chat-select", inputs: ["options", "value", "placeholder", "disabled", "menuLabel", "panelClass"], outputs: ["valueChange"] }, { kind: "component", type: ChatReasoningComponent, selector: "chat-reasoning", inputs: ["content", "delivery", "durationMs", "label", "defaultExpanded"] }, { kind: "component", type: ChatScrollBubbleComponent, selector: "chat-scroll-bubble", inputs: ["mode"], outputs: ["clicked"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;max-height:100%;overflow:hidden;background:var(--tplane-chat-bg)}:host>chat-welcome{display:flex;flex:1 1 auto;width:100%}.chat-shell{display:flex;flex:1;min-height:0;overflow:hidden}.chat-shell__sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--tplane-chat-separator);background:var(--tplane-chat-surface-alt);overflow-y:auto;display:none}@media(min-width:768px){.chat-shell__sidebar{display:block}}.chat-shell__main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--tplane-chat-text-muted);text-align:center;flex:1;min-height:0}.chat-empty[hidden]{display:none}.chat-empty__title{font-size:1.125rem;font-weight:500;color:var(--tplane-chat-text);margin:0}.chat-empty__sub{margin:0;font-size:var(--tplane-chat-font-size-sm)}.chat-scroll{flex:1;min-height:0;overflow-y:auto;padding-top:var(--tplane-chat-edge-pad)}.chat-scroll::-webkit-scrollbar{width:6px}.chat-scroll::-webkit-scrollbar-thumb{background:var(--tplane-chat-separator);border-radius:10px}[chatFooter]{padding-bottom:var(--tplane-chat-edge-pad)}.chat-footer-wrap{position:relative}\n"], dependencies: [{ kind: "component", type: ChatWindowComponent, selector: "chat-window" }, { kind: "component", type: ChatMessageListComponent, selector: "chat-message-list", inputs: ["agent"] }, { kind: "directive", type: MessageTemplateDirective, selector: "ng-template[chatMessageTemplate]", inputs: ["chatMessageTemplate"] }, { kind: "component", type: ChatMessageComponent, selector: "chat-message", inputs: ["role", "current", "streaming", "prevRole", "message"] }, { kind: "component", type: ChatInputComponent, selector: "chat-input", inputs: ["agent", "submitOnEnter", "placeholder", "showStopButton"], outputs: ["submitted", "stopped"] }, { kind: "component", type: ChatTypingIndicatorComponent, selector: "chat-typing-indicator", inputs: ["agent"] }, { kind: "component", type: ChatErrorComponent, selector: "chat-error", inputs: ["agent"] }, { kind: "component", type: ChatThreadListComponent, selector: "chat-thread-list", inputs: ["threads", "activeThreadId", "showNewThreadButton", "actions", "mode", "projects"], outputs: ["threadSelected", "newThreadRequested"] }, { kind: "component", type: ChatGenerativeUiComponent, selector: "chat-generative-ui", inputs: ["spec", "registry", "store", "handlers", "loading"], outputs: ["events"] }, { kind: "component", type: ChatStreamingMdComponent, selector: "chat-streaming-md", inputs: ["document", "viewRegistry"] }, { kind: "component", type: ChatToolCallsComponent, selector: "chat-tool-calls", inputs: ["agent", "message", "grouping", "groupSummary", "excludeToolNames"] }, { kind: "component", type: ChatToolViewsComponent, selector: "chat-tool-views", inputs: ["agent", "message", "views", "store", "handlers"], outputs: ["events"] }, { kind: "component", type: A2uiSurfaceComponent, selector: "a2ui-surface", inputs: ["surface", "state", "catalog", "handlers", "surfaceFallback"], outputs: ["events", "action", "validationError"] }, { kind: "component", type: ChatMessageActionsComponent, selector: "chat-message-actions", inputs: ["content", "disabled"], outputs: ["regenerate", "rate", "contentCopied"] }, { kind: "component", type: ChatWelcomeComponent, selector: "chat-welcome" }, { kind: "component", type: ChatSelectComponent, selector: "chat-select", inputs: ["options", "value", "placeholder", "disabled", "menuLabel", "panelClass"], outputs: ["valueChange"] }, { kind: "component", type: ChatReasoningComponent, selector: "chat-reasoning", inputs: ["content", "delivery", "durationMs", "label", "defaultExpanded"] }, { kind: "component", type: ChatScrollBubbleComponent, selector: "chat-scroll-bubble", inputs: ["mode"], outputs: ["clicked"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -12493,6 +12655,37 @@ const CHAT_DEBUG_INCLUDED = ngDevMode ||
 
 // libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts
 // SPDX-License-Identifier: MIT
+/**
+ * The conversation sidebar: thread list, projects, search, and the new-chat
+ * action. Pair it with a runtime's thread store (e.g. `LangGraphThreadsAdapter`)
+ * and a {@link ThreadActionAdapter} for the per-row rename/delete/archive menu.
+ *
+ * **This component renders the sidebar only — it is not a layout wrapper.** Its
+ * `<ng-content>` slots are all named (`sidenavHeader`, `sidenavPrimary`,
+ * `sidenavSections`, `sidenavFooterLeft`, `sidenavFooterRight`,
+ * `sidenavAccount`) and target regions *inside* the sidebar. There is no default
+ * slot, so a `<chat>` placed between the tags is silently dropped. Render the
+ * chat as a sibling and lay the two out yourself:
+ *
+ * @example
+ * ```html
+ * <chat-sidenav
+ *   [threads]="threads.threads()"
+ *   [activeThreadId]="activeThread()"
+ *   [actions]="threadActions"
+ *   [agent]="agent"
+ *   (newChat)="activeThread.set(null)"
+ *   (threadSelected)="activeThread.set($event)"
+ * />
+ * <main class="chat-pane">
+ *   <chat [agent]="agent" />
+ * </main>
+ * ```
+ * ```css
+ * :host { display: flex; height: 100dvh; }
+ * .chat-pane { flex: 1; min-width: 0; }
+ * ```
+ */
 class ChatSidenavComponent {
     mode = input('expanded', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
@@ -13430,11 +13623,8 @@ function normalizeViewEntry(entry) {
 // SPDX-License-Identifier: MIT
 class A2uiAudioPlayerComponent {
     url = input('', ...(ngDevMode ? [{ debugName: "url" }] : []));
-    /** v1 canonical prop: short description / title rendered above the player. */
+    /** v0.9 prop: short description / title rendered above the player. */
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
-    /** v1 prop name: autoPlay (camelCase). */
-    autoPlay = input(false, ...(ngDevMode ? [{ debugName: "autoPlay" }] : []));
-    controls = input(true, ...(ngDevMode ? [{ debugName: "controls" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
@@ -13442,7 +13632,7 @@ class A2uiAudioPlayerComponent {
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiAudioPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiAudioPlayerComponent, isStandalone: true, selector: "a2ui-audio-player", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiAudioPlayerComponent, isStandalone: true, selector: "a2ui-audio-player", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="a2ui-audio-wrap">
       @if (description()) {
         <span class="a2ui-audio-description">{{ description() }}</span>
@@ -13450,8 +13640,7 @@ class A2uiAudioPlayerComponent {
       <audio
         class="a2ui-audio"
         [src]="url()"
-        [autoplay]="autoPlay()"
-        [controls]="controls()"
+        controls
       ></audio>
     </div>
   `, isInline: true, styles: [".a2ui-audio-wrap{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-audio-description{font-size:var(--a2ui-typography-caption-size);color:var(--a2ui-on-surface-variant)}.a2ui-audio{display:block;width:100%}\n"] });
@@ -13466,31 +13655,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       <audio
         class="a2ui-audio"
         [src]="url()"
-        [autoplay]="autoPlay()"
-        [controls]="controls()"
+        controls
       ></audio>
     </div>
   `, styles: [".a2ui-audio-wrap{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-audio-description{font-size:var(--a2ui-typography-caption-size);color:var(--a2ui-on-surface-variant)}.a2ui-audio{display:block;width:100%}\n"] }]
-        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
+const VARIANT_CLASS = {
+    default: 'a2ui-btn a2ui-btn--default',
+    primary: 'a2ui-btn a2ui-btn--primary',
+    borderless: 'a2ui-btn a2ui-btn--borderless',
+};
 class A2uiButtonComponent {
-    /** v1: child Text component is rendered inside the button via childKeys. */
+    /** v0.9: child Text component is rendered inside the button via childKeys. */
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : []));
-    primary = input(true, ...(ngDevMode ? [{ debugName: "primary" }] : []));
+    /** v0.9 prop: visual style (default 'default'). */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    cssClass() {
+        return VARIANT_CLASS[this.variant()] ?? VARIANT_CLASS['default'];
+    }
     handleClick() {
         this.emit()('click');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiButtonComponent, isStandalone: true, selector: "a2ui-button", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiButtonComponent, isStandalone: true, selector: "a2ui-button", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <button
-      [class]="primary() ? 'a2ui-btn a2ui-btn--primary' : 'a2ui-btn a2ui-btn--secondary'"
+      [class]="cssClass()"
       [disabled]="disabled()"
       (click)="handleClick()"
     >
@@ -13498,13 +13695,13 @@ class A2uiButtonComponent {
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </button>
-  `, isInline: true, styles: [".a2ui-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--a2ui-spacing-2) var(--a2ui-spacing-4);border-radius:var(--a2ui-shape-small);font-size:var(--a2ui-typography-body-size);font-weight:500;cursor:pointer;transition:background var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard),opacity var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);border:none}.a2ui-btn:disabled{opacity:.5;cursor:not-allowed}.a2ui-btn--primary{background:var(--a2ui-primary);color:var(--a2ui-on-primary)}.a2ui-btn--primary:hover:not(:disabled){background:var(--a2ui-primary-hover)}.a2ui-btn--secondary{background:var(--a2ui-surface-variant);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline)}.a2ui-btn--secondary:hover:not(:disabled){background:var(--a2ui-outline)}\n"], dependencies: [{ kind: "component", type: RenderElementComponent, selector: "render-element", inputs: ["elementKey", "spec"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--a2ui-spacing-2) var(--a2ui-spacing-4);border-radius:var(--a2ui-shape-small);font-size:var(--a2ui-typography-body-size);font-weight:500;cursor:pointer;transition:background var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard),opacity var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);border:none}.a2ui-btn:disabled{opacity:.5;cursor:not-allowed}.a2ui-btn--primary{background:var(--a2ui-primary);color:var(--a2ui-on-primary)}.a2ui-btn--primary:hover:not(:disabled){background:var(--a2ui-primary-hover)}.a2ui-btn--default{background:var(--a2ui-surface-variant);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline)}.a2ui-btn--default:hover:not(:disabled){background:var(--a2ui-outline)}.a2ui-btn--borderless{background:transparent;color:var(--a2ui-on-surface);border:none}.a2ui-btn--borderless:hover:not(:disabled){background:var(--a2ui-surface-variant)}\n"], dependencies: [{ kind: "component", type: RenderElementComponent, selector: "render-element", inputs: ["elementKey", "spec"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-button', standalone: true, imports: [RenderElementComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <button
-      [class]="primary() ? 'a2ui-btn a2ui-btn--primary' : 'a2ui-btn a2ui-btn--secondary'"
+      [class]="cssClass()"
       [disabled]="disabled()"
       (click)="handleClick()"
     >
@@ -13512,8 +13709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </button>
-  `, styles: [".a2ui-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--a2ui-spacing-2) var(--a2ui-spacing-4);border-radius:var(--a2ui-shape-small);font-size:var(--a2ui-typography-body-size);font-weight:500;cursor:pointer;transition:background var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard),opacity var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);border:none}.a2ui-btn:disabled{opacity:.5;cursor:not-allowed}.a2ui-btn--primary{background:var(--a2ui-primary);color:var(--a2ui-on-primary)}.a2ui-btn--primary:hover:not(:disabled){background:var(--a2ui-primary-hover)}.a2ui-btn--secondary{background:var(--a2ui-surface-variant);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline)}.a2ui-btn--secondary:hover:not(:disabled){background:var(--a2ui-outline)}\n"] }]
-        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+  `, styles: [".a2ui-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--a2ui-spacing-2) var(--a2ui-spacing-4);border-radius:var(--a2ui-shape-small);font-size:var(--a2ui-typography-body-size);font-weight:500;cursor:pointer;transition:background var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard),opacity var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);border:none}.a2ui-btn:disabled{opacity:.5;cursor:not-allowed}.a2ui-btn--primary{background:var(--a2ui-primary);color:var(--a2ui-on-primary)}.a2ui-btn--primary:hover:not(:disabled){background:var(--a2ui-primary-hover)}.a2ui-btn--default{background:var(--a2ui-surface-variant);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline)}.a2ui-btn--default:hover:not(:disabled){background:var(--a2ui-outline)}.a2ui-btn--borderless{background:transparent;color:var(--a2ui-on-surface);border:none}.a2ui-btn--borderless:hover:not(:disabled){background:var(--a2ui-surface-variant)}\n"] }]
+        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiCardComponent {
@@ -13556,83 +13753,302 @@ function emitBinding(host, bindings, prop, value) {
 class A2uiCheckBoxComponent {
     host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** v1 canonical prop: boolean checked state. */
-    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /** Pre-v1 alias retained for back-compat. */
-    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    /** v0.9 prop: boolean checked state. */
+    value = input(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Live validation message written by the surface's check gate
+     * (bound to /_a2uiChecks/<id>); empty when valid. */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
-    effectiveValue = computed(() => this.value() ?? this.checked(), ...(ngDevMode ? [{ debugName: "effectiveValue" }] : []));
     onChange(event) {
         const val = event.target.checked;
-        // Emit on whichever binding the surface declared. v1 surfaces use
-        // `value`; pre-v1 used `checked`.
-        const bound = this._bindings();
-        if (bound['value']) {
-            emitBinding(this.host, bound, 'value', val);
-        }
-        else {
-            emitBinding(this.host, bound, 'checked', val);
-        }
+        emitBinding(this.host, this._bindings(), 'value', val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiCheckBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiCheckBoxComponent, isStandalone: true, selector: "a2ui-check-box", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiCheckBoxComponent, isStandalone: true, selector: "a2ui-check-box", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <label class="a2ui-cb">
-      <input type="checkbox" [checked]="effectiveValue()" (change)="onChange($event)" class="a2ui-cb__input" />
+      <input type="checkbox" [checked]="value()" (change)="onChange($event)" class="a2ui-cb__input" />
       {{ label() }}
     </label>
-  `, isInline: true, styles: [".a2ui-cb{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-cb__input{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    @if (errorText()) {
+      <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+    }
+  `, isInline: true, styles: [".a2ui-cb{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-cb__input{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiCheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-check-box', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <label class="a2ui-cb">
-      <input type="checkbox" [checked]="effectiveValue()" (change)="onChange($event)" class="a2ui-cb__input" />
+      <input type="checkbox" [checked]="value()" (change)="onChange($event)" class="a2ui-cb__input" />
       {{ label() }}
     </label>
-  `, styles: [".a2ui-cb{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-cb__input{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+    @if (errorText()) {
+      <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+    }
+  `, styles: [".a2ui-cb{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-cb__input{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
-const ALIGN_MAP = {
+class A2uiChoicePickerComponent {
+    static _idCounter = 0;
+    /** Groups the radio inputs of this instance (mutuallyExclusive mode). */
+    _groupName = `a2ui-choice-picker-${++A2uiChoicePickerComponent._idCounter}`;
+    host = injectRenderHost();
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** v0.9 prop: current selection (string[]). Normalized in `valueArray`
+     * because LLMs sometimes seed the data model with a scalar (e.g. `"5"`)
+     * instead of an array (`["5"]`); we coerce so .includes() works either way. */
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Resolved options with plain string labels (surface-to-spec resolves DynamicString). */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** v0.9 prop: 'mutuallyExclusive' (single-select, default) or 'multipleSelection'. */
+    variant = input('mutuallyExclusive', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** v0.9 prop: render as 'checkbox' rows (default) or 'chips'. */
+    displayStyle = input('checkbox', ...(ngDevMode ? [{ debugName: "displayStyle" }] : []));
+    /** v0.9 prop: when true, show a client-side option filter input. */
+    filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
+    /** Live validation message written by the surface's check gate
+     * (bound to /_a2uiChecks/<id>); empty when valid. */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
+    _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
+    // Framework inputs required by the render harness.
+    bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
+    spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
+    valueArray = computed(() => {
+        const v = this.value();
+        if (Array.isArray(v))
+            return v;
+        if (v == null || v === '')
+            return [];
+        return [String(v)];
+    }, ...(ngDevMode ? [{ debugName: "valueArray" }] : []));
+    isSingleSelect = computed(() => this.variant() !== 'multipleSelection', ...(ngDevMode ? [{ debugName: "isSingleSelect" }] : []));
+    /** Local, client-side option filter (only rendered when filterable). */
+    filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
+    visibleOptions = computed(() => {
+        const f = this.filterText().trim().toLowerCase();
+        const opts = this.options();
+        return f ? opts.filter(o => o.label.toLowerCase().includes(f)) : opts;
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
+    isSelected(value) {
+        return this.valueArray().includes(value);
+    }
+    onFilterInput(event) {
+        this.filterText.set(event.target.value);
+    }
+    onCheckChange(value, event) {
+        const checked = event.target.checked;
+        if (this.isSingleSelect()) {
+            // Radio semantics: the chosen option replaces the selection. `value` is
+            // a string list on the wire, so write a one-element array.
+            if (checked)
+                emitBinding(this.host, this._bindings(), 'value', [value]);
+            return;
+        }
+        emitBinding(this.host, this._bindings(), 'value', this.toggled(value, checked));
+    }
+    onChipToggle(value) {
+        if (this.isSingleSelect()) {
+            emitBinding(this.host, this._bindings(), 'value', [value]);
+            return;
+        }
+        const checked = !this.isSelected(value);
+        emitBinding(this.host, this._bindings(), 'value', this.toggled(value, checked));
+    }
+    toggled(value, checked) {
+        const current = [...this.valueArray()];
+        const idx = current.indexOf(value);
+        if (checked && idx === -1) {
+            current.push(value);
+        }
+        else if (!checked && idx !== -1) {
+            current.splice(idx, 1);
+        }
+        // Pass the updated array directly (typed value, no JSON stringification needed).
+        return current;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiChoicePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiChoicePickerComponent, isStandalone: true, selector: "a2ui-choice-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, displayStyle: { classPropertyName: "displayStyle", publicName: "displayStyle", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="a2ui-cp">
+      @if (label()) {
+        <span class="a2ui-cp__label">{{ label() }}</span>
+      }
+
+      @if (filterable()) {
+        <input
+          type="text"
+          class="a2ui-cp__filter"
+          placeholder="Filter options"
+          [value]="filterText()"
+          (input)="onFilterInput($event)"
+        />
+      }
+
+      @if (displayStyle() === 'chips') {
+        <!-- Chips: toggle buttons. -->
+        <div class="a2ui-cp__chips">
+          @for (opt of visibleOptions(); track opt.value) {
+            <button
+              type="button"
+              [class]="isSelected(opt.value) ? 'a2ui-cp__chip a2ui-cp__chip--selected' : 'a2ui-cp__chip'"
+              [attr.aria-pressed]="isSelected(opt.value)"
+              (click)="onChipToggle(opt.value)"
+            >{{ opt.label }}</button>
+          }
+        </div>
+      } @else {
+        <!-- Checkbox style: radio rows (mutuallyExclusive) or checkbox rows (multipleSelection). -->
+        <div class="a2ui-cp__checks">
+          @for (opt of visibleOptions(); track opt.value) {
+            <label class="a2ui-cp__check-row">
+              <input
+                [type]="isSingleSelect() ? 'radio' : 'checkbox'"
+                class="a2ui-cp__checkbox"
+                [attr.name]="isSingleSelect() ? _groupName : null"
+                [checked]="isSelected(opt.value)"
+                (change)="onCheckChange(opt.value, $event)"
+              />
+              {{ opt.label }}
+            </label>
+          }
+        </div>
+      }
+      @if (errorText()) {
+      <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+    }
+    </div>
+  `, isInline: true, styles: [".a2ui-cp{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-cp__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-cp__filter{padding:var(--a2ui-spacing-1) var(--a2ui-spacing-2);font-size:var(--a2ui-typography-caption-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-cp__filter:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-cp__checks{display:flex;flex-direction:column;gap:var(--a2ui-spacing-2)}.a2ui-cp__check-row{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-cp__checkbox{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}.a2ui-cp__chips{display:flex;flex-wrap:wrap;gap:var(--a2ui-spacing-2)}.a2ui-cp__chip{padding:var(--a2ui-spacing-1) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-large, 9999px);background:var(--a2ui-surface-variant);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);cursor:pointer;transition:background var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard),border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-cp__chip--selected{background:var(--a2ui-primary);color:var(--a2ui-on-primary);border-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiChoicePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-choice-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="a2ui-cp">
+      @if (label()) {
+        <span class="a2ui-cp__label">{{ label() }}</span>
+      }
+
+      @if (filterable()) {
+        <input
+          type="text"
+          class="a2ui-cp__filter"
+          placeholder="Filter options"
+          [value]="filterText()"
+          (input)="onFilterInput($event)"
+        />
+      }
+
+      @if (displayStyle() === 'chips') {
+        <!-- Chips: toggle buttons. -->
+        <div class="a2ui-cp__chips">
+          @for (opt of visibleOptions(); track opt.value) {
+            <button
+              type="button"
+              [class]="isSelected(opt.value) ? 'a2ui-cp__chip a2ui-cp__chip--selected' : 'a2ui-cp__chip'"
+              [attr.aria-pressed]="isSelected(opt.value)"
+              (click)="onChipToggle(opt.value)"
+            >{{ opt.label }}</button>
+          }
+        </div>
+      } @else {
+        <!-- Checkbox style: radio rows (mutuallyExclusive) or checkbox rows (multipleSelection). -->
+        <div class="a2ui-cp__checks">
+          @for (opt of visibleOptions(); track opt.value) {
+            <label class="a2ui-cp__check-row">
+              <input
+                [type]="isSingleSelect() ? 'radio' : 'checkbox'"
+                class="a2ui-cp__checkbox"
+                [attr.name]="isSingleSelect() ? _groupName : null"
+                [checked]="isSelected(opt.value)"
+                (change)="onCheckChange(opt.value, $event)"
+              />
+              {{ opt.label }}
+            </label>
+          }
+        </div>
+      }
+      @if (errorText()) {
+      <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+    }
+    </div>
+  `, styles: [".a2ui-cp{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-cp__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-cp__filter{padding:var(--a2ui-spacing-1) var(--a2ui-spacing-2);font-size:var(--a2ui-typography-caption-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-cp__filter:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-cp__checks{display:flex;flex-direction:column;gap:var(--a2ui-spacing-2)}.a2ui-cp__check-row{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-cp__checkbox{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}.a2ui-cp__chips{display:flex;flex-wrap:wrap;gap:var(--a2ui-spacing-2)}.a2ui-cp__chip{padding:var(--a2ui-spacing-1) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-large, 9999px);background:var(--a2ui-surface-variant);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);cursor:pointer;transition:background var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard),border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-cp__chip--selected{background:var(--a2ui-primary);color:var(--a2ui-on-primary);border-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], displayStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayStyle", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+
+// SPDX-License-Identifier: MIT
+const ALIGN_MAP$1 = {
     start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch',
 };
+/** justify 'stretch' has no justify-content equivalent — children grow instead
+ * (see the --justify-stretch class below). */
+const JUSTIFY_MAP$1 = {
+    start: 'flex-start', center: 'center', end: 'flex-end',
+    spaceAround: 'space-around', spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly', stretch: 'normal',
+};
 class A2uiColumnComponent {
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : []));
-    gap = input(3, ...(ngDevMode ? [{ debugName: "gap" }] : []));
-    alignment = input('start', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
-    distribution = input('start', ...(ngDevMode ? [{ debugName: "distribution" }] : []));
+    /** v0.9 prop: cross-axis alignment (default 'stretch'). */
+    align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** v0.9 prop: main-axis distribution (default 'start'). */
+    justify = input('start', ...(ngDevMode ? [{ debugName: "justify" }] : []));
+    /** Not part of the v0.9 catalog — kept for json-render generative-ui
+     * specs, which may set a numeric spacing unit (multiples of 4px) or a
+     * named size. Unset falls back to the CSS default gap. */
+    gap = input(undefined, ...(ngDevMode ? [{ debugName: "gap" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    alignItems = computed(() => ALIGN_MAP[this.alignment()] ?? 'flex-start', ...(ngDevMode ? [{ debugName: "alignItems" }] : []));
-    /** Convert the Tailwind gap unit (multiples of 4px) to pixels. */
-    gapPx = computed(() => this.gap() * 4, ...(ngDevMode ? [{ debugName: "gapPx" }] : []));
+    alignItems = computed(() => ALIGN_MAP$1[this.align()] ?? 'stretch', ...(ngDevMode ? [{ debugName: "alignItems" }] : []));
+    justifyContent = computed(() => JUSTIFY_MAP$1[this.justify()] ?? 'flex-start', ...(ngDevMode ? [{ debugName: "justifyContent" }] : []));
+    cssClass = computed(() => this.justify() === 'stretch' ? 'a2ui-col a2ui-col--justify-stretch' : 'a2ui-col', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
+    gapPx = computed(() => {
+        const g = this.gap();
+        if (typeof g === 'number' && Number.isFinite(g))
+            return g * 4;
+        if (g === 'small')
+            return 8;
+        if (g === 'medium')
+            return 12;
+        if (g === 'large')
+            return 16;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "gapPx" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiColumnComponent, isStandalone: true, selector: "a2ui-column", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="a2ui-col" [style.align-items]="alignItems()" [style.gap.px]="gapPx()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiColumnComponent, isStandalone: true, selector: "a2ui-column", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      [class]="cssClass()"
+      [style.align-items]="alignItems()"
+      [style.justify-content]="justifyContent()"
+      [style.gap.px]="gapPx()"
+    >
       @for (key of childKeys(); track key) {
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </div>
-  `, isInline: true, styles: [".a2ui-col{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: RenderElementComponent, selector: "render-element", inputs: ["elementKey", "spec"] }] });
+  `, isInline: true, styles: [".a2ui-col{display:flex;flex-direction:column;gap:var(--a2ui-spacing-3)}.a2ui-col--justify-stretch>render-element{flex:1}\n"], dependencies: [{ kind: "component", type: RenderElementComponent, selector: "render-element", inputs: ["elementKey", "spec"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-column', standalone: true, imports: [RenderElementComponent], template: `
-    <div class="a2ui-col" [style.align-items]="alignItems()" [style.gap.px]="gapPx()">
+    <div
+      [class]="cssClass()"
+      [style.align-items]="alignItems()"
+      [style.justify-content]="justifyContent()"
+      [style.gap.px]="gapPx()"
+    >
       @for (key of childKeys(); track key) {
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </div>
-  `, styles: [".a2ui-col{display:flex;flex-direction:column}\n"] }]
-        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+  `, styles: [".a2ui-col{display:flex;flex-direction:column;gap:var(--a2ui-spacing-3)}.a2ui-col--justify-stretch>render-element{flex:1}\n"] }]
+        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiDateTimeInputComponent {
@@ -13640,12 +14056,19 @@ class A2uiDateTimeInputComponent {
     _inputId = `a2ui-date-time-input-${++A2uiDateTimeInputComponent._idCounter}`;
     host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** v1 prop: value (resolved DynamicString). */
+    /** v0.9 prop: ISO 8601 value (resolved DynamicString). Still renders when absent. */
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /** v1 prop: enableDate — include date portion. */
+    /** v0.9 prop: enableDate — include date portion. */
     enableDate = input(true, ...(ngDevMode ? [{ debugName: "enableDate" }] : []));
-    /** v1 prop: enableTime — include time portion. */
+    /** v0.9 prop: enableTime — include time portion. */
     enableTime = input(false, ...(ngDevMode ? [{ debugName: "enableTime" }] : []));
+    /** v0.9 prop: ISO lower bound mapped to the native input's min. */
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    /** v0.9 prop: ISO upper bound mapped to the native input's max. */
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Live validation message written by the surface's check gate
+     * (bound to /_a2uiChecks/<id>); empty when valid. */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
@@ -13667,7 +14090,7 @@ class A2uiDateTimeInputComponent {
         emitBinding(this.host, this._bindings(), 'value', val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiDateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiDateTimeInputComponent, isStandalone: true, selector: "a2ui-date-time-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enableDate: { classPropertyName: "enableDate", publicName: "enableDate", isSignal: true, isRequired: false, transformFunction: null }, enableTime: { classPropertyName: "enableTime", publicName: "enableTime", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiDateTimeInputComponent, isStandalone: true, selector: "a2ui-date-time-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enableDate: { classPropertyName: "enableDate", publicName: "enableDate", isSignal: true, isRequired: false, transformFunction: null }, enableTime: { classPropertyName: "enableTime", publicName: "enableTime", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="a2ui-dti">
       @if (label()) {
         <label [htmlFor]="_inputId" class="a2ui-dti__label">{{ label() }}</label>
@@ -13676,11 +14099,16 @@ class A2uiDateTimeInputComponent {
         [id]="_inputId"
         [type]="htmlInputType()"
         [value]="value()"
+        [attr.min]="min() || null"
+        [attr.max]="max() || null"
         class="a2ui-dti__input"
         (change)="onChange($event)"
       />
+      @if (errorText()) {
+      <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+    }
     </div>
-  `, isInline: true, styles: [".a2ui-dti{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-dti__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-dti__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-dti__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-dti{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-dti__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-dti__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-dti__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiDateTimeInputComponent, decorators: [{
             type: Component,
@@ -13693,21 +14121,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         [id]="_inputId"
         [type]="htmlInputType()"
         [value]="value()"
+        [attr.min]="min() || null"
+        [attr.max]="max() || null"
         class="a2ui-dti__input"
         (change)="onChange($event)"
       />
+      @if (errorText()) {
+      <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+    }
     </div>
-  `, styles: [".a2ui-dti{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-dti__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-dti__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-dti__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], enableDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDate", required: false }] }], enableTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTime", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+  `, styles: [".a2ui-dti{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-dti__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-dti__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-dti__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], enableDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDate", required: false }] }], enableTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTime", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiDividerComponent {
-    /** Canonical v1 spec name. The LLM emits this. */
-    axis = input(undefined, ...(ngDevMode ? [{ debugName: "axis" }] : []));
-    /** Older alias retained for json-render usage and back-compat. */
-    direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    /** Effective axis — `axis` wins if provided, otherwise fall back to `direction`. */
-    orientation = computed(() => this.axis() ?? this.direction(), ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /** v0.9 prop: divider axis (default 'horizontal'). */
+    axis = input('horizontal', ...(ngDevMode ? [{ debugName: "axis" }] : []));
+    orientation = computed(() => this.axis(), ...(ngDevMode ? [{ debugName: "orientation" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
@@ -13715,7 +14145,7 @@ class A2uiDividerComponent {
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiDividerComponent, isStandalone: true, selector: "a2ui-divider", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiDividerComponent, isStandalone: true, selector: "a2ui-divider", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (orientation() === 'vertical') {
       <div class="a2ui-divider a2ui-divider--vertical"></div>
     } @else {
@@ -13732,7 +14162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       <hr class="a2ui-divider a2ui-divider--horizontal" />
     }
   `, styles: [".a2ui-divider--horizontal{display:block;width:100%;border:none;border-top:1px solid var(--a2ui-outline);margin:var(--a2ui-spacing-2) 0}.a2ui-divider--vertical{display:inline-block;align-self:stretch;width:1px;background:var(--a2ui-outline);margin:0 var(--a2ui-spacing-2)}\n"] }]
-        }], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 /**
@@ -13749,119 +14179,118 @@ function toMaterialSymbolName(name) {
     return name.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
 }
 class A2uiIconComponent {
-    /** v1 canonical prop. */
+    /** v0.9 prop: a Material Symbols name (string) or an inline `{ svgPath }`. */
     name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    /** Pre-v1 alias retained for back-compat. */
-    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
-    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
-    effectiveName = computed(() => this.name() ?? this.icon(), ...(ngDevMode ? [{ debugName: "effectiveName" }] : []));
+    /** Inline SVG path when `name` is the `{ svgPath }` object form. */
+    svgPath = computed(() => {
+        const n = this.name();
+        return typeof n === 'object' && n !== null && typeof n.svgPath === 'string'
+            ? n.svgPath
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "svgPath" }] : []));
+    /** The string ligature name when `name` is a string. */
+    ligatureName = computed(() => typeof this.name() === 'string' ? this.name() : '', ...(ngDevMode ? [{ debugName: "ligatureName" }] : []));
     /** The effective name as a Material Symbols ligature (camelCase → snake_case). */
-    glyphName = computed(() => toMaterialSymbolName(this.effectiveName()), ...(ngDevMode ? [{ debugName: "glyphName" }] : []));
+    glyphName = computed(() => toMaterialSymbolName(this.ligatureName()), ...(ngDevMode ? [{ debugName: "glyphName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiIconComponent, isStandalone: true, selector: "a2ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (effectiveName(); as name) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiIconComponent, isStandalone: true, selector: "a2ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (svgPath(); as path) {
+      <svg
+        class="a2ui-icon a2ui-icon--svg"
+        viewBox="0 -960 960 960"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+      ><path [attr.d]="path" /></svg>
+    } @else if (ligatureName(); as name) {
       <span
         class="a2ui-icon material-symbols-outlined"
-        [style.font-size]="size() ? size() + 'px' : '1.125rem'"
         [attr.aria-label]="name"
         role="img"
       >{{ glyphName() }}</span>
     }
-  `, isInline: true, styles: [".a2ui-icon{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}\n"] });
+  `, isInline: true, styles: [".a2ui-icon{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.125rem;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.a2ui-icon--svg{width:1.125rem;height:1.125rem}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-icon', standalone: true, template: `
-    @if (effectiveName(); as name) {
+    @if (svgPath(); as path) {
+      <svg
+        class="a2ui-icon a2ui-icon--svg"
+        viewBox="0 -960 960 960"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+      ><path [attr.d]="path" /></svg>
+    } @else if (ligatureName(); as name) {
       <span
         class="a2ui-icon material-symbols-outlined"
-        [style.font-size]="size() ? size() + 'px' : '1.125rem'"
         [attr.aria-label]="name"
         role="img"
       >{{ glyphName() }}</span>
     }
-  `, styles: [".a2ui-icon{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+  `, styles: [".a2ui-icon{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.125rem;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.a2ui-icon--svg{width:1.125rem;height:1.125rem}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
-const USAGE_HINT_STYLE = {
-    icon: { maxWidth: '24px', aspectRatio: '1 / 1' },
-    avatar: { maxWidth: '48px', aspectRatio: '1 / 1', borderRadius: '50%' },
-    smallFeature: { maxWidth: '160px' },
-    mediumFeature: { maxWidth: '320px' },
-    largeFeature: { maxWidth: '480px' },
-    header: { maxWidth: '100%', aspectRatio: '16 / 5' },
+const FIT_MAP = {
+    contain: 'contain',
+    cover: 'cover',
+    fill: 'fill',
+    none: 'none',
+    scaleDown: 'scale-down',
 };
 class A2uiImageComponent {
     url = input('', ...(ngDevMode ? [{ debugName: "url" }] : []));
-    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
-    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : []));
-    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : []));
-    /** v1 prop: CSS object-fit equivalent. */
-    fit = input(undefined, ...(ngDevMode ? [{ debugName: "fit" }] : []));
-    /** v1 prop: sizing preset. */
-    usageHint = input(undefined, ...(ngDevMode ? [{ debugName: "usageHint" }] : []));
+    /** v0.9 prop: alt text / accessible description. */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    /** v0.9 prop: CSS object-fit equivalent ('scaleDown' → 'scale-down'). */
+    fit = input('fill', ...(ngDevMode ? [{ debugName: "fit" }] : []));
+    /** v0.9 prop: sizing preset. */
+    variant = input('mediumFeature', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
-    explicitWidth() {
-        return this.width() != null ? this.width() + 'px' : null;
-    }
-    explicitHeight() {
-        return this.height() != null ? this.height() + 'px' : null;
-    }
-    hintStyle() {
-        const h = this.usageHint();
-        return h ? USAGE_HINT_STYLE[h] : null;
-    }
+    objectFit = computed(() => FIT_MAP[this.fit()] ?? 'fill', ...(ngDevMode ? [{ debugName: "objectFit" }] : []));
+    cssClass = computed(() => `a2ui-img a2ui-img--${this.variant()}`, ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiImageComponent, isStandalone: true, selector: "a2ui-image", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, usageHint: { classPropertyName: "usageHint", publicName: "usageHint", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiImageComponent, isStandalone: true, selector: "a2ui-image", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <img
-      class="a2ui-img"
+      [class]="cssClass()"
       [src]="url()"
-      [alt]="alt()"
-      [style.width]="explicitWidth()"
-      [style.height]="explicitHeight()"
-      [style.object-fit]="fit()"
-      [style.max-width]="hintStyle()?.maxWidth"
-      [style.aspect-ratio]="hintStyle()?.aspectRatio || null"
-      [style.border-radius]="hintStyle()?.borderRadius || null"
+      [alt]="description()"
+      [style.object-fit]="objectFit()"
     />
-  `, isInline: true, styles: [".a2ui-img{display:block;max-width:100%;border-radius:var(--a2ui-shape-extra-small)}\n"] });
+  `, isInline: true, styles: [".a2ui-img{display:block;max-width:100%;border-radius:var(--a2ui-shape-extra-small)}.a2ui-img--icon{width:24px;height:24px}.a2ui-img--avatar{width:40px;height:40px;border-radius:50%}.a2ui-img--smallFeature{width:120px}.a2ui-img--mediumFeature{width:240px}.a2ui-img--largeFeature{width:400px}.a2ui-img--header{width:100%;aspect-ratio:16 / 5}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-image', standalone: true, template: `
     <img
-      class="a2ui-img"
+      [class]="cssClass()"
       [src]="url()"
-      [alt]="alt()"
-      [style.width]="explicitWidth()"
-      [style.height]="explicitHeight()"
-      [style.object-fit]="fit()"
-      [style.max-width]="hintStyle()?.maxWidth"
-      [style.aspect-ratio]="hintStyle()?.aspectRatio || null"
-      [style.border-radius]="hintStyle()?.borderRadius || null"
+      [alt]="description()"
+      [style.object-fit]="objectFit()"
     />
-  `, styles: [".a2ui-img{display:block;max-width:100%;border-radius:var(--a2ui-shape-extra-small)}\n"] }]
-        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], usageHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "usageHint", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+  `, styles: [".a2ui-img{display:block;max-width:100%;border-radius:var(--a2ui-shape-extra-small)}.a2ui-img--icon{width:24px;height:24px}.a2ui-img--avatar{width:40px;height:40px;border-radius:50%}.a2ui-img--smallFeature{width:120px}.a2ui-img--mediumFeature{width:240px}.a2ui-img--largeFeature{width:400px}.a2ui-img--header{width:100%;aspect-ratio:16 / 5}\n"] }]
+        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiListComponent {
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : []));
     direction = input('vertical', ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    /** v1 canonical prop: cross-axis alignment. */
-    alignment = input(undefined, ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    /** v0.9 prop: cross-axis alignment (default 'stretch'). */
+    align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
@@ -13872,15 +14301,13 @@ class A2uiListComponent {
             : 'a2ui-list--vertical';
     }, ...(ngDevMode ? [{ debugName: "listClass" }] : []));
     alignmentCss = computed(() => {
-        const a = this.alignment();
-        if (!a)
-            return null;
+        const a = this.align();
         return a === 'start' ? 'flex-start'
             : a === 'end' ? 'flex-end'
                 : a; // center / stretch are valid CSS values as-is
     }, ...(ngDevMode ? [{ debugName: "alignmentCss" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiListComponent, isStandalone: true, selector: "a2ui-list", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiListComponent, isStandalone: true, selector: "a2ui-list", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div [class]="listClass()" [style.align-items]="alignmentCss()">
       @for (key of childKeys(); track key) {
         <render-element [elementKey]="key" [spec]="spec()" />
@@ -13897,18 +14324,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       }
     </div>
   `, styles: [".a2ui-list--vertical{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1);overflow-y:auto;max-height:384px}.a2ui-list--horizontal{display:flex;flex-direction:row;gap:var(--a2ui-spacing-1);overflow-x:auto}\n"] }]
-        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiModalComponent {
     /**
-     * v1: childKeys[0] = entryPointChild (inline trigger),
-     *     childKeys[1] = contentChild (modal body).
+     * v0.9: childKeys[0] = trigger (inline entry point),
+     *       childKeys[1] = content (modal body).
      */
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : []));
-    /** Resolved title string (from optional title DynamicString). */
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
@@ -13917,7 +14342,7 @@ class A2uiModalComponent {
     entryPointKey = computed(() => this.childKeys()[0] ?? null, ...(ngDevMode ? [{ debugName: "entryPointKey" }] : []));
     contentKey = computed(() => this.childKeys()[1] ?? null, ...(ngDevMode ? [{ debugName: "contentKey" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiModalComponent, isStandalone: true, selector: "a2ui-modal", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiModalComponent, isStandalone: true, selector: "a2ui-modal", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <!-- Entry point (trigger): always rendered inline, e.g. a button. -->
     @if (entryPointKey(); as epKey) {
       <div
@@ -13950,16 +14375,13 @@ class A2uiModalComponent {
           (keydown.space)="open.set(false)"
         ></div>
         <div class="a2ui-modal__panel">
-          @if (title()) {
-            <h2 class="a2ui-modal__title">{{ title() }}</h2>
-          }
           @if (contentKey(); as cKey) {
             <render-element [elementKey]="cKey" [spec]="spec()" />
           }
         </div>
       </div>
     }
-  `, isInline: true, styles: [".a2ui-modal__trigger{display:contents}.a2ui-modal__overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}.a2ui-modal__backdrop{position:absolute;inset:0;background:var(--a2ui-scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.a2ui-modal__panel{position:relative;background:var(--a2ui-surface);border:1px solid var(--a2ui-outline);border-radius:var(--a2ui-shape-medium);padding:var(--a2ui-spacing-5);max-width:512px;width:100%;margin:0 var(--a2ui-spacing-4);box-shadow:var(--a2ui-elevation-4)}.a2ui-modal__title{font-size:var(--a2ui-typography-h4-size);font-weight:var(--a2ui-typography-h4-weight);margin:0 0 var(--a2ui-spacing-4)}\n"], dependencies: [{ kind: "component", type: RenderElementComponent, selector: "render-element", inputs: ["elementKey", "spec"] }] });
+  `, isInline: true, styles: [".a2ui-modal__trigger{display:contents}.a2ui-modal__overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}.a2ui-modal__backdrop{position:absolute;inset:0;background:var(--a2ui-scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.a2ui-modal__panel{position:relative;background:var(--a2ui-surface);border:1px solid var(--a2ui-outline);border-radius:var(--a2ui-shape-medium);padding:var(--a2ui-spacing-5);max-width:512px;width:100%;margin:0 var(--a2ui-spacing-4);box-shadow:var(--a2ui-elevation-4)}\n"], dependencies: [{ kind: "component", type: RenderElementComponent, selector: "render-element", inputs: ["elementKey", "spec"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiModalComponent, decorators: [{
             type: Component,
@@ -13996,160 +14418,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
           (keydown.space)="open.set(false)"
         ></div>
         <div class="a2ui-modal__panel">
-          @if (title()) {
-            <h2 class="a2ui-modal__title">{{ title() }}</h2>
-          }
           @if (contentKey(); as cKey) {
             <render-element [elementKey]="cKey" [spec]="spec()" />
           }
         </div>
       </div>
     }
-  `, styles: [".a2ui-modal__trigger{display:contents}.a2ui-modal__overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}.a2ui-modal__backdrop{position:absolute;inset:0;background:var(--a2ui-scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.a2ui-modal__panel{position:relative;background:var(--a2ui-surface);border:1px solid var(--a2ui-outline);border-radius:var(--a2ui-shape-medium);padding:var(--a2ui-spacing-5);max-width:512px;width:100%;margin:0 var(--a2ui-spacing-4);box-shadow:var(--a2ui-elevation-4)}.a2ui-modal__title{font-size:var(--a2ui-typography-h4-size);font-weight:var(--a2ui-typography-h4-weight);margin:0 0 var(--a2ui-spacing-4)}\n"] }]
-        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
-
-// SPDX-License-Identifier: MIT
-class A2uiMultipleChoiceComponent {
-    host = injectRenderHost();
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** Resolved current selections from surface-to-spec. Normalized in
-     * `selectionsArray` because LLMs sometimes seed the data model with a
-     * scalar (e.g. `"5"`) instead of an array (`["5"]`); we coerce so
-     * .includes() works either way. */
-    selections = input(undefined, ...(ngDevMode ? [{ debugName: "selections" }] : []));
-    selectionsArray = computed(() => {
-        const v = this.selections();
-        if (Array.isArray(v))
-            return v;
-        if (v == null || v === '')
-            return [];
-        return [String(v)];
-    }, ...(ngDevMode ? [{ debugName: "selectionsArray" }] : []));
-    /** Resolved options with plain string labels (surface-to-spec resolves DynamicString). */
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /** When ≤ 1 — render as single-select <select>; otherwise multi-select checkboxes. */
-    maxAllowedSelections = input(1, ...(ngDevMode ? [{ debugName: "maxAllowedSelections" }] : []));
-    _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
-    // Framework inputs required by the render harness.
-    bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
-    spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
-    isSingleSelect = computed(() => this.maxAllowedSelections() <= 1, ...(ngDevMode ? [{ debugName: "isSingleSelect" }] : []));
-    isSelected(value) {
-        return this.selectionsArray().includes(value);
-    }
-    onSelectChange(event) {
-        const val = event.target.value;
-        emitBinding(this.host, this._bindings(), 'selections', val);
-    }
-    onCheckChange(value, event) {
-        const checked = event.target.checked;
-        const current = [...this.selectionsArray()];
-        const idx = current.indexOf(value);
-        if (checked && idx === -1) {
-            current.push(value);
-        }
-        else if (!checked && idx !== -1) {
-            current.splice(idx, 1);
-        }
-        // Pass the updated selections array directly (typed value, no JSON stringification needed).
-        emitBinding(this.host, this._bindings(), 'selections', current);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiMultipleChoiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiMultipleChoiceComponent, isStandalone: true, selector: "a2ui-multiple-choice", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxAllowedSelections: { classPropertyName: "maxAllowedSelections", publicName: "maxAllowedSelections", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="a2ui-mc">
-      @if (label()) {
-        <span class="a2ui-mc__label">{{ label() }}</span>
-      }
-
-      @if (isSingleSelect()) {
-        <!-- Single-select: HTML <select> -->
-        <select class="a2ui-mc__select" (change)="onSelectChange($event)">
-          @for (opt of options(); track opt.value) {
-            <option [value]="opt.value" [selected]="isSelected(opt.value)">{{ opt.label }}</option>
-          }
-        </select>
-      } @else {
-        <!-- Multi-select: checkbox list -->
-        <div class="a2ui-mc__checks">
-          @for (opt of options(); track opt.value) {
-            <label class="a2ui-mc__check-row">
-              <input
-                type="checkbox"
-                class="a2ui-mc__checkbox"
-                [checked]="isSelected(opt.value)"
-                (change)="onCheckChange(opt.value, $event)"
-              />
-              {{ opt.label }}
-            </label>
-          }
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [".a2ui-mc{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-mc__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-mc__select{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-mc__select:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-mc__checks{display:flex;flex-direction:column;gap:var(--a2ui-spacing-2)}.a2ui-mc__check-row{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-mc__checkbox{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiMultipleChoiceComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'a2ui-multiple-choice', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="a2ui-mc">
-      @if (label()) {
-        <span class="a2ui-mc__label">{{ label() }}</span>
-      }
-
-      @if (isSingleSelect()) {
-        <!-- Single-select: HTML <select> -->
-        <select class="a2ui-mc__select" (change)="onSelectChange($event)">
-          @for (opt of options(); track opt.value) {
-            <option [value]="opt.value" [selected]="isSelected(opt.value)">{{ opt.label }}</option>
-          }
-        </select>
-      } @else {
-        <!-- Multi-select: checkbox list -->
-        <div class="a2ui-mc__checks">
-          @for (opt of options(); track opt.value) {
-            <label class="a2ui-mc__check-row">
-              <input
-                type="checkbox"
-                class="a2ui-mc__checkbox"
-                [checked]="isSelected(opt.value)"
-                (change)="onCheckChange(opt.value, $event)"
-              />
-              {{ opt.label }}
-            </label>
-          }
-        </div>
-      }
-    </div>
-  `, styles: [".a2ui-mc{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-mc__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-mc__select{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-mc__select:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-mc__checks{display:flex;flex-direction:column;gap:var(--a2ui-spacing-2)}.a2ui-mc__check-row{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-mc__checkbox{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], selections: [{ type: i0.Input, args: [{ isSignal: true, alias: "selections", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxAllowedSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAllowedSelections", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+  `, styles: [".a2ui-modal__trigger{display:contents}.a2ui-modal__overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}.a2ui-modal__backdrop{position:absolute;inset:0;background:var(--a2ui-scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.a2ui-modal__panel{position:relative;background:var(--a2ui-surface);border:1px solid var(--a2ui-outline);border-radius:var(--a2ui-shape-medium);padding:var(--a2ui-spacing-5);max-width:512px;width:100%;margin:0 var(--a2ui-spacing-4);box-shadow:var(--a2ui-elevation-4)}\n"] }]
+        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
-const ROW_ALIGN_MAP = {
+const ALIGN_MAP = {
     start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch',
 };
-const ROW_JUSTIFY_MAP = {
+/** justify 'stretch' has no justify-content equivalent — children grow instead
+ * (see the --justify-stretch class below). */
+const JUSTIFY_MAP = {
     start: 'flex-start', center: 'center', end: 'flex-end',
-    'space-between': 'space-between', 'space-around': 'space-around',
+    spaceAround: 'space-around', spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly', stretch: 'normal',
 };
 class A2uiRowComponent {
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : []));
-    gap = input(3, ...(ngDevMode ? [{ debugName: "gap" }] : []));
-    alignment = input('start', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
-    distribution = input('start', ...(ngDevMode ? [{ debugName: "distribution" }] : []));
+    /** v0.9 prop: cross-axis alignment (default 'stretch'). */
+    align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** v0.9 prop: main-axis distribution (default 'start'). */
+    justify = input('start', ...(ngDevMode ? [{ debugName: "justify" }] : []));
+    /** Not part of the v0.9 catalog — kept for json-render generative-ui
+     * specs, which may set a numeric spacing unit (multiples of 4px) or a
+     * named size. Unset falls back to the CSS default gap. */
+    gap = input(undefined, ...(ngDevMode ? [{ debugName: "gap" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    alignItems = computed(() => ROW_ALIGN_MAP[this.alignment()] ?? 'flex-start', ...(ngDevMode ? [{ debugName: "alignItems" }] : []));
-    justifyContent = computed(() => ROW_JUSTIFY_MAP[this.distribution()] ?? 'flex-start', ...(ngDevMode ? [{ debugName: "justifyContent" }] : []));
-    /** Convert the gap unit (multiples of 4px) to pixels. */
-    gapPx = computed(() => this.gap() * 4, ...(ngDevMode ? [{ debugName: "gapPx" }] : []));
+    alignItems = computed(() => ALIGN_MAP[this.align()] ?? 'stretch', ...(ngDevMode ? [{ debugName: "alignItems" }] : []));
+    justifyContent = computed(() => JUSTIFY_MAP[this.justify()] ?? 'flex-start', ...(ngDevMode ? [{ debugName: "justifyContent" }] : []));
+    cssClass = computed(() => this.justify() === 'stretch' ? 'a2ui-row a2ui-row--justify-stretch' : 'a2ui-row', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
+    gapPx = computed(() => {
+        const g = this.gap();
+        if (typeof g === 'number' && Number.isFinite(g))
+            return g * 4;
+        if (g === 'small')
+            return 8;
+        if (g === 'medium')
+            return 12;
+        if (g === 'large')
+            return 16;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "gapPx" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiRowComponent, isStandalone: true, selector: "a2ui-row", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiRowComponent, isStandalone: true, selector: "a2ui-row", inputs: { childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
-      class="a2ui-row"
+      [class]="cssClass()"
       [style.align-items]="alignItems()"
       [style.justify-content]="justifyContent()"
       [style.gap.px]="gapPx()"
@@ -14158,13 +14480,13 @@ class A2uiRowComponent {
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </div>
-  `, isInline: true, styles: [".a2ui-row{display:flex;flex-direction:row;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: RenderElementComponent, selector: "render-element", inputs: ["elementKey", "spec"] }] });
+  `, isInline: true, styles: [".a2ui-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--a2ui-spacing-3)}.a2ui-row--justify-stretch>render-element{flex:1}\n"], dependencies: [{ kind: "component", type: RenderElementComponent, selector: "render-element", inputs: ["elementKey", "spec"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-row', standalone: true, imports: [RenderElementComponent], template: `
     <div
-      class="a2ui-row"
+      [class]="cssClass()"
       [style.align-items]="alignItems()"
       [style.justify-content]="justifyContent()"
       [style.gap.px]="gapPx()"
@@ -14173,8 +14495,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </div>
-  `, styles: [".a2ui-row{display:flex;flex-direction:row;flex-wrap:wrap}\n"] }]
-        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+  `, styles: [".a2ui-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--a2ui-spacing-3)}.a2ui-row--justify-stretch>render-element{flex:1}\n"] }]
+        }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiSliderComponent {
@@ -14182,13 +14504,15 @@ class A2uiSliderComponent {
     _inputId = `a2ui-slider-${++A2uiSliderComponent._idCounter}`;
     host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** v1 prop: value (resolved DynamicNumber). */
+    /** v0.9 prop: value (resolved DynamicNumber). */
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /** v1 prop: minValue. */
-    minValue = input(0, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
-    /** v1 prop: maxValue. */
-    maxValue = input(100, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
-    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    /** v0.9 prop: lower bound (default 0). */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    /** v0.9 prop: upper bound. */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Live validation message written by the surface's check gate
+     * (bound to /_a2uiChecks/<id>); empty when valid. */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
@@ -14200,7 +14524,7 @@ class A2uiSliderComponent {
         emitBinding(this.host, this._bindings(), 'value', val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiSliderComponent, 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: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiSliderComponent, 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: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="a2ui-slider">
       @if (label()) {
         <label [htmlFor]="_inputId" class="a2ui-slider__label">{{ label() }}: {{ value() }}</label>
@@ -14209,14 +14533,16 @@ class A2uiSliderComponent {
         [id]="_inputId"
         type="range"
         class="a2ui-slider__input"
-        [min]="minValue()"
-        [max]="maxValue()"
-        [step]="step()"
+        [min]="min()"
+        [max]="max()"
         [value]="value()"
         (input)="onInput($event)"
       />
+      @if (errorText()) {
+      <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+    }
     </div>
-  `, isInline: true, styles: [".a2ui-slider{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-slider__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-slider__input{width:100%;cursor:pointer;accent-color:var(--a2ui-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-slider{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-slider__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-slider__input{width:100%;cursor:pointer;accent-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiSliderComponent, decorators: [{
             type: Component,
@@ -14229,21 +14555,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         [id]="_inputId"
         type="range"
         class="a2ui-slider__input"
-        [min]="minValue()"
-        [max]="maxValue()"
-        [step]="step()"
+        [min]="min()"
+        [max]="max()"
         [value]="value()"
         (input)="onInput($event)"
       />
+      @if (errorText()) {
+      <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+    }
     </div>
-  `, styles: [".a2ui-slider{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-slider__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-slider__input{width:100%;cursor:pointer;accent-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+  `, styles: [".a2ui-slider{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-slider__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-slider__input{width:100%;cursor:pointer;accent-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiTabsComponent {
-    /** Resolved tab titles from tabItems[*].title — produced by surface-to-spec. */
+    /** Resolved tab titles from tabs[*].title — produced by surface-to-spec. */
     tabTitles = input([], ...(ngDevMode ? [{ debugName: "tabTitles" }] : []));
-    /** v1: each child key corresponds to a tab's contentChild (childKeys[i] ↔ tabTitles[i]). */
+    /** v0.9: each child key corresponds to a tab's child (childKeys[i] ↔ tabTitles[i]). */
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : []));
     // Framework inputs required by the render harness.
@@ -14314,7 +14642,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 // SPDX-License-Identifier: MIT
 class A2uiTextComponent {
     text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
-    usageHint = input('body', ...(ngDevMode ? [{ debugName: "usageHint" }] : []));
+    /** v0.9 prop: typography variant. */
+    variant = input('body', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     // Framework-mandated inputs the render harness passes to every element.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
@@ -14322,62 +14651,57 @@ class A2uiTextComponent {
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
     cssClass() {
-        return `a2ui-text-${this.usageHint()}`;
+        return `a2ui-text-${this.variant()}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiTextComponent, isStandalone: true, selector: "a2ui-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, usageHint: { classPropertyName: "usageHint", publicName: "usageHint", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span [class]="cssClass()">{{ text() }}</span>`, isInline: true, styles: [".a2ui-text-h1{display:block;font-size:var(--a2ui-typography-h1-size);font-weight:var(--a2ui-typography-h1-weight);line-height:var(--a2ui-typography-h1-line-height);margin:0}.a2ui-text-h2{display:block;font-size:var(--a2ui-typography-h2-size);font-weight:var(--a2ui-typography-h2-weight);line-height:var(--a2ui-typography-h2-line-height);margin:0}.a2ui-text-h3{display:block;font-size:var(--a2ui-typography-h3-size);font-weight:var(--a2ui-typography-h3-weight);line-height:var(--a2ui-typography-h3-line-height);margin:0}.a2ui-text-h4{display:block;font-size:var(--a2ui-typography-h4-size);font-weight:var(--a2ui-typography-h4-weight);line-height:var(--a2ui-typography-h4-line-height);margin:0}.a2ui-text-h5{display:block;font-size:var(--a2ui-typography-h5-size);font-weight:var(--a2ui-typography-h5-weight);line-height:var(--a2ui-typography-h5-line-height);margin:0}.a2ui-text-caption{display:block;font-size:var(--a2ui-typography-caption-size);font-weight:var(--a2ui-typography-caption-weight);color:var(--a2ui-caption);line-height:var(--a2ui-typography-caption-line-height)}.a2ui-text-body{display:block;font-size:var(--a2ui-typography-body-size);font-weight:var(--a2ui-typography-body-weight);line-height:var(--a2ui-typography-body-line-height)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiTextComponent, isStandalone: true, selector: "a2ui-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span [class]="cssClass()">{{ text() }}</span>`, isInline: true, styles: [".a2ui-text-h1{display:block;font-size:var(--a2ui-typography-h1-size);font-weight:var(--a2ui-typography-h1-weight);line-height:var(--a2ui-typography-h1-line-height);margin:0}.a2ui-text-h2{display:block;font-size:var(--a2ui-typography-h2-size);font-weight:var(--a2ui-typography-h2-weight);line-height:var(--a2ui-typography-h2-line-height);margin:0}.a2ui-text-h3{display:block;font-size:var(--a2ui-typography-h3-size);font-weight:var(--a2ui-typography-h3-weight);line-height:var(--a2ui-typography-h3-line-height);margin:0}.a2ui-text-h4{display:block;font-size:var(--a2ui-typography-h4-size);font-weight:var(--a2ui-typography-h4-weight);line-height:var(--a2ui-typography-h4-line-height);margin:0}.a2ui-text-h5{display:block;font-size:var(--a2ui-typography-h5-size);font-weight:var(--a2ui-typography-h5-weight);line-height:var(--a2ui-typography-h5-line-height);margin:0}.a2ui-text-caption{display:block;font-size:var(--a2ui-typography-caption-size);font-weight:var(--a2ui-typography-caption-weight);color:var(--a2ui-caption);line-height:var(--a2ui-typography-caption-line-height)}.a2ui-text-body{display:block;font-size:var(--a2ui-typography-body-size);font-weight:var(--a2ui-typography-body-weight);line-height:var(--a2ui-typography-body-line-height)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-text', standalone: true, template: `<span [class]="cssClass()">{{ text() }}</span>`, styles: [".a2ui-text-h1{display:block;font-size:var(--a2ui-typography-h1-size);font-weight:var(--a2ui-typography-h1-weight);line-height:var(--a2ui-typography-h1-line-height);margin:0}.a2ui-text-h2{display:block;font-size:var(--a2ui-typography-h2-size);font-weight:var(--a2ui-typography-h2-weight);line-height:var(--a2ui-typography-h2-line-height);margin:0}.a2ui-text-h3{display:block;font-size:var(--a2ui-typography-h3-size);font-weight:var(--a2ui-typography-h3-weight);line-height:var(--a2ui-typography-h3-line-height);margin:0}.a2ui-text-h4{display:block;font-size:var(--a2ui-typography-h4-size);font-weight:var(--a2ui-typography-h4-weight);line-height:var(--a2ui-typography-h4-line-height);margin:0}.a2ui-text-h5{display:block;font-size:var(--a2ui-typography-h5-size);font-weight:var(--a2ui-typography-h5-weight);line-height:var(--a2ui-typography-h5-line-height);margin:0}.a2ui-text-caption{display:block;font-size:var(--a2ui-typography-caption-size);font-weight:var(--a2ui-typography-caption-weight);color:var(--a2ui-caption);line-height:var(--a2ui-typography-caption-line-height)}.a2ui-text-body{display:block;font-size:var(--a2ui-typography-body-size);font-weight:var(--a2ui-typography-body-weight);line-height:var(--a2ui-typography-body-line-height)}\n"] }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], usageHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "usageHint", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
-/** Maps v1 textFieldType to HTML input[type] or textarea. */
+/** Maps v0.9 variant to HTML input[type] or textarea. */
 const TYPE_MAP = {
     shortText: 'text',
     longText: 'text', // handled by textarea below
     number: 'number',
     obscured: 'password',
-    date: 'date',
 };
 class A2uiTextFieldComponent {
     static _idCounter = 0;
     _inputId = `a2ui-text-field-${++A2uiTextFieldComponent._idCounter}`;
     host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** v1 prop: text (resolved string value). */
-    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
-    /** Back-compat alias: value. surface-to-spec resolves DynamicString → plain string. */
-    value = computed(() => this.text() ?? '', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** v0.9 prop: resolved string value. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    textFieldType = input('shortText', ...(ngDevMode ? [{ debugName: "textFieldType" }] : []));
+    /** v0.9 prop: input variant (default 'shortText'). */
+    variant = input('shortText', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Enforced by the surface's check gate as an implicit regex rule (plus the native pattern attribute). */
     validationRegexp = input('', ...(ngDevMode ? [{ debugName: "validationRegexp" }] : []));
+    /** Live validation message written by the surface's check gate
+     * (bound to /_a2uiChecks/<id>); empty when valid. */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
-    htmlInputType = computed(() => TYPE_MAP[this.textFieldType()] ?? 'text', ...(ngDevMode ? [{ debugName: "htmlInputType" }] : []));
+    htmlInputType = computed(() => TYPE_MAP[this.variant()] ?? 'text', ...(ngDevMode ? [{ debugName: "htmlInputType" }] : []));
     onInput(event) {
         const val = event.target.value;
-        // Emit on 'text' binding (v1 prop name); also try 'value' for compat.
-        const bound = this._bindings();
-        if (bound['text']) {
-            emitBinding(this.host, bound, 'text', val);
-        }
-        else {
-            emitBinding(this.host, bound, 'value', val);
-        }
+        emitBinding(this.host, this._bindings(), 'value', val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiTextFieldComponent, isStandalone: true, selector: "a2ui-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textFieldType: { classPropertyName: "textFieldType", publicName: "textFieldType", isSignal: true, isRequired: false, transformFunction: null }, validationRegexp: { classPropertyName: "validationRegexp", publicName: "validationRegexp", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiTextFieldComponent, isStandalone: true, selector: "a2ui-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, validationRegexp: { classPropertyName: "validationRegexp", publicName: "validationRegexp", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="a2ui-tf">
       @if (label()) {
         <label [htmlFor]="_inputId" class="a2ui-tf__label">{{ label() }}</label>
       }
-      @if (textFieldType() === 'longText') {
+      @if (variant() === 'longText') {
         <textarea
           [id]="_inputId"
           [value]="value()"
@@ -14397,8 +14721,11 @@ class A2uiTextFieldComponent {
           (input)="onInput($event)"
         />
       }
+      @if (errorText()) {
+        <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+      }
     </div>
-  `, isInline: true, styles: [".a2ui-tf{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-tf__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-tf__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);resize:vertical}.a2ui-tf__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".a2ui-tf{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-tf__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-tf__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);resize:vertical}.a2ui-tf__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiTextFieldComponent, decorators: [{
             type: Component,
@@ -14407,7 +14734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       @if (label()) {
         <label [htmlFor]="_inputId" class="a2ui-tf__label">{{ label() }}</label>
       }
-      @if (textFieldType() === 'longText') {
+      @if (variant() === 'longText') {
         <textarea
           [id]="_inputId"
           [value]="value()"
@@ -14427,16 +14754,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
           (input)="onInput($event)"
         />
       }
+      @if (errorText()) {
+        <div class="a2ui-check-error" role="alert">{{ errorText() }}</div>
+      }
     </div>
-  `, styles: [".a2ui-tf{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-tf__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-tf__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);resize:vertical}.a2ui-tf__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], textFieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "textFieldType", required: false }] }], validationRegexp: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationRegexp", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+  `, styles: [".a2ui-tf{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-tf__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-tf__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);resize:vertical}.a2ui-tf__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-check-error{font-size:var(--a2ui-typography-label-size);color:var(--a2ui-error, #d33d55)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], validationRegexp: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationRegexp", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiVideoComponent {
     url = input('', ...(ngDevMode ? [{ debugName: "url" }] : []));
-    /** v1 prop name: autoPlay (camelCase). */
-    autoPlay = input(false, ...(ngDevMode ? [{ debugName: "autoPlay" }] : []));
-    controls = input(true, ...(ngDevMode ? [{ debugName: "controls" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
@@ -14444,12 +14771,11 @@ class A2uiVideoComponent {
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiVideoComponent, isStandalone: true, selector: "a2ui-video", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiVideoComponent, isStandalone: true, selector: "a2ui-video", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <video
       class="a2ui-video"
       [src]="url()"
-      [autoplay]="autoPlay()"
-      [controls]="controls()"
+      controls
     ></video>
   `, isInline: true, styles: [".a2ui-video{display:block;width:100%;border-radius:var(--a2ui-shape-small)}\n"] });
 }
@@ -14459,11 +14785,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
     <video
       class="a2ui-video"
       [src]="url()"
-      [autoplay]="autoPlay()"
-      [controls]="controls()"
+      controls
     ></video>
   `, styles: [".a2ui-video{display:block;width:100%;border-radius:var(--a2ui-shape-small)}\n"] }]
-        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 /**
@@ -14484,6 +14809,7 @@ function a2uiBasicCatalog() {
         Button: A2uiButtonComponent,
         Card: A2uiCardComponent,
         CheckBox: A2uiCheckBoxComponent,
+        ChoicePicker: A2uiChoicePickerComponent,
         Column: A2uiColumnComponent,
         DateTimeInput: A2uiDateTimeInputComponent,
         Divider: A2uiDividerComponent,
@@ -14491,7 +14817,6 @@ function a2uiBasicCatalog() {
         Image: A2uiImageComponent,
         List: A2uiListComponent,
         Modal: A2uiModalComponent,
-        MultipleChoice: A2uiMultipleChoiceComponent,
         Row: A2uiRowComponent,
         Slider: A2uiSliderComponent,
         Tabs: A2uiTabsComponent,
@@ -14501,6 +14826,22 @@ function a2uiBasicCatalog() {
     });
 }
 
+// SPDX-License-Identifier: MIT
+/**
+ * The A2UI client capabilities this renderer supports — the typed
+ * `a2uiClientCapabilities` metadata a host attaches to agent requests so
+ * the agent knows which component catalogs it may target
+ * (catalog negotiation, A2UI v0.9 transport metadata).
+ *
+ * @example
+ * ```ts
+ * const metadata = { a2uiClientCapabilities: a2uiClientCapabilities() };
+ * ```
+ */
+function a2uiClientCapabilities() {
+    return { supportedCatalogIds: [A2UI_BASIC_CATALOG_ID] };
+}
+
 /**
  * Declare an async function tool the model can call; its resolved return value
  * becomes the tool result shipped back to the model.
@@ -14695,5 +15036,5 @@ function mockAgent(opts = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { A2uiAudioPlayerComponent, A2uiButtonComponent, A2uiCardComponent, A2uiCheckBoxComponent, A2uiColumnComponent, A2uiDateTimeInputComponent, A2uiDividerComponent, A2uiIconComponent, A2uiImageComponent, A2uiListComponent, A2uiModalComponent, A2uiMultipleChoiceComponent, A2uiRowComponent, A2uiSliderComponent, A2uiSurfaceComponent, A2uiTabsComponent, A2uiTextComponent, A2uiTextFieldComponent, A2uiVideoComponent, AGENT_ERROR_MESSAGES, AgentError, CHAT_CONFIG, CHAT_LIFECYCLE, ChatApprovalCardComponent, ChatCitationCardTemplateDirective, ChatCitationPreviewComponent, ChatCitationsCardComponent, ChatCitationsComponent, ChatComponent, ChatConfirmDialogComponent, ChatConnectedOverlayDirective, ChatErrorComponent, ChatGenerativeUiComponent, ChatGenuiSkeletonComponent, ChatHistorySearchPaletteComponent, ChatInputComponent, ChatInterruptComponent, ChatInterruptPanelComponent, ChatLauncherButtonComponent, ChatMessageActionsComponent, ChatMessageComponent, ChatMessageListComponent, ChatOverflowMenuComponent, ChatOverlayOriginDirective, ChatPopupComponent, ChatProjectListComponent, ChatReasoningComponent, ChatScrollBubbleComponent, ChatSelectComponent, ChatSidebarComponent, ChatSidenavComponent, ChatSidenavScrimComponent, ChatStreamingMdComponent, ChatSubagentCardComponent, ChatSubagentsComponent, ChatSuggestionsComponent, ChatThreadListComponent, ChatTimelineComponent, ChatTimelineSliderComponent, ChatToolCallCardComponent, ChatToolCallTemplateDirective, ChatToolCallsComponent, ChatToolViewsComponent, ChatTraceComponent, ChatTypingIndicatorComponent, ChatWelcomeComponent, ChatWelcomeSuggestionComponent, ChatWindowComponent, CitationsResolverService, IS_HEADER_ROW, MARKDOWN_VIEW_REGISTRY, MarkdownAutolinkComponent, MarkdownBlockquoteComponent, MarkdownChildrenComponent, MarkdownCitationReferenceComponent, MarkdownCodeBlockComponent, MarkdownDocumentComponent, MarkdownEmphasisComponent, MarkdownHardBreakComponent, MarkdownHeadingComponent, MarkdownHtmlComponent, MarkdownImageComponent, MarkdownInlineCodeComponent, MarkdownLinkComponent, MarkdownListComponent, MarkdownListItemComponent, MarkdownMathComponent, MarkdownParagraphComponent, MarkdownSoftBreakComponent, MarkdownStrikethroughComponent, MarkdownStrongComponent, MarkdownTableCellComponent, MarkdownTableComponent, MarkdownTableRowComponent, MarkdownTextComponent, MarkdownThematicBreakComponent, MessageTemplateDirective, STREAMING_MARKDOWN_CONTRACT_VIOLATION_POLICY, a2uiBasicCatalog, action, ask, buildA2uiActionMessage, cacheplaneMarkdownViews, cancelledClientToolResult, citationSourceVisual, citationTypeLabel, citationTypeMeta, clientToolGuardFailureResult, completeDelivery, createA2uiSurfaceStore, createAgentRef, createContentClassifier, createParseTreeStore, createPartialArgsBridge, defaultInterruptedClientToolResult, deriveDomain, deriveJsonSchema, deriveMonogram, deriveSourceType, emitBinding, executeFunctionTool, extractErrorMessage, formatDuration, formatPublished, getInterrupt, getMessageType, injectThreadRouting, isAbortError, isAssistantMessage, isSystemMessage, isToolMessage, isTyping, isUserMessage, markdownDocument, messageContent, mockAgent, monogramColor, monogramHue, normalizeEnvelopeArgs, normalizeViewEntry, provideChat, renderMarkdown, selectPendingClientToolCalls, shouldClaimBeforeExecute, startClientToolExecutor, staticDelivery, statusColor, streamingDelivery, submitMessage, toAgentError, toClientToolSpecs, tools, validateArgs, view };
+export { A2uiAudioPlayerComponent, A2uiButtonComponent, A2uiCardComponent, A2uiCheckBoxComponent, A2uiChoicePickerComponent, A2uiColumnComponent, A2uiDateTimeInputComponent, A2uiDividerComponent, A2uiIconComponent, A2uiImageComponent, A2uiListComponent, A2uiModalComponent, A2uiRowComponent, A2uiSliderComponent, A2uiSurfaceComponent, A2uiTabsComponent, A2uiTextComponent, A2uiTextFieldComponent, A2uiVideoComponent, AGENT_ERROR_MESSAGES, AgentError, CHAT_CONFIG, CHAT_LIFECYCLE, ChatApprovalCardComponent, ChatCitationCardTemplateDirective, ChatCitationPreviewComponent, ChatCitationsCardComponent, ChatCitationsComponent, ChatComponent, ChatConfirmDialogComponent, ChatConnectedOverlayDirective, ChatErrorComponent, ChatGenerativeUiComponent, ChatGenuiSkeletonComponent, ChatHistorySearchPaletteComponent, ChatInputComponent, ChatInterruptComponent, ChatInterruptPanelComponent, ChatLauncherButtonComponent, ChatMessageActionsComponent, ChatMessageComponent, ChatMessageListComponent, ChatOverflowMenuComponent, ChatOverlayOriginDirective, ChatPopupComponent, ChatProjectListComponent, ChatReasoningComponent, ChatScrollBubbleComponent, ChatSelectComponent, ChatSidebarComponent, ChatSidenavComponent, ChatSidenavScrimComponent, ChatStreamingMdComponent, ChatSubagentCardComponent, ChatSubagentsComponent, ChatSuggestionsComponent, ChatThreadListComponent, ChatTimelineComponent, ChatTimelineSliderComponent, ChatToolCallCardComponent, ChatToolCallTemplateDirective, ChatToolCallsComponent, ChatToolViewsComponent, ChatTraceComponent, ChatTypingIndicatorComponent, ChatWelcomeComponent, ChatWelcomeSuggestionComponent, ChatWindowComponent, CitationsResolverService, IS_HEADER_ROW, MARKDOWN_VIEW_REGISTRY, MarkdownAutolinkComponent, MarkdownBlockquoteComponent, MarkdownChildrenComponent, MarkdownCitationReferenceComponent, MarkdownCodeBlockComponent, MarkdownDocumentComponent, MarkdownEmphasisComponent, MarkdownHardBreakComponent, MarkdownHeadingComponent, MarkdownHtmlComponent, MarkdownImageComponent, MarkdownInlineCodeComponent, MarkdownLinkComponent, MarkdownListComponent, MarkdownListItemComponent, MarkdownMathComponent, MarkdownParagraphComponent, MarkdownSoftBreakComponent, MarkdownStrikethroughComponent, MarkdownStrongComponent, MarkdownTableCellComponent, MarkdownTableComponent, MarkdownTableRowComponent, MarkdownTextComponent, MarkdownThematicBreakComponent, MessageTemplateDirective, STREAMING_MARKDOWN_CONTRACT_VIOLATION_POLICY, a2uiBasicCatalog, a2uiClientCapabilities, action, ask, buildA2uiActionMessage, cacheplaneMarkdownViews, cancelledClientToolResult, citationSourceVisual, citationTypeLabel, citationTypeMeta, clientToolGuardFailureResult, completeDelivery, createA2uiSurfaceStore, createAgentRef, createContentClassifier, createParseTreeStore, createPartialArgsBridge, defaultInterruptedClientToolResult, deriveDomain, deriveJsonSchema, deriveMonogram, deriveSourceType, emitBinding, executeFunctionTool, extractErrorMessage, formatDuration, formatPublished, getInterrupt, getMessageType, injectThreadRouting, isAbortError, isAssistantMessage, isSystemMessage, isToolMessage, isTyping, isUserMessage, markdownDocument, messageContent, mockAgent, monogramColor, monogramHue, normalizeEnvelopeArgs, normalizeViewEntry, provideChat, renderMarkdown, selectPendingClientToolCalls, shouldClaimBeforeExecute, startClientToolExecutor, staticDelivery, statusColor, streamingDelivery, submitMessage, toAgentError, toClientToolSpecs, tools, validateArgs, view };
 //# sourceMappingURL=threadplane-chat.mjs.map