From 4b2842b81cdad207787a9b0d2940149079eeff1b Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 9 May 2026 21:09:00 -0700
Subject: [PATCH 1/3] fix(chat): a2ui catalog layout polish via
 component-scoped CSS

Replace inert Tailwind utility class strings with Angular component-scoped
styles: blocks on all 18 a2ui catalog components. No Tailwind compiler is
configured in this workspace so those class names were silently ignored,
causing visible layout breakage (label+input running together, headings
rendering inline at body size, Column/Row/List/Card having no flex gap, etc.).

Each component now carries its own BEM-style CSS that faithfully reproduces
the original layout intent: flex-column wrappers with 4px gap on TextField,
DateTimeInput, Slider, MultipleChoice; flex-row on Row; flex-column on Column
and List; padding/border/radius on all input-like elements; block-level
display and correct font-size/weight hierarchy on Text h1-h5/caption/body;
visible padding and hover states on Button; border+padding on Card and Modal.
Column and Row convert the numeric `gap` and `alignment` inputs to real CSS
via inline [style] bindings rather than gap-N Tailwind shorthand.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../a2ui/catalog/audio-player.component.ts    |  8 ++-
 .../src/lib/a2ui/catalog/button.component.ts  | 31 ++++++++--
 .../src/lib/a2ui/catalog/card.component.ts    | 13 +++-
 .../lib/a2ui/catalog/check-box.component.ts   | 20 ++++++-
 .../src/lib/a2ui/catalog/column.component.ts  | 21 ++++---
 .../a2ui/catalog/date-time-input.component.ts | 27 +++++++--
 .../src/lib/a2ui/catalog/divider.component.ts | 20 ++++++-
 .../src/lib/a2ui/catalog/icon.component.ts    | 10 +++-
 .../src/lib/a2ui/catalog/image.component.ts   |  9 ++-
 .../src/lib/a2ui/catalog/list.component.ts    | 19 +++++-
 .../src/lib/a2ui/catalog/modal.component.ts   | 40 +++++++++++--
 .../a2ui/catalog/multiple-choice.component.ts | 48 +++++++++++----
 .../src/lib/a2ui/catalog/row.component.ts     | 37 ++++++++----
 .../src/lib/a2ui/catalog/slider.component.ts  | 18 +++++-
 .../src/lib/a2ui/catalog/tabs.component.ts    | 34 +++++++++--
 .../lib/a2ui/catalog/text-field.component.ts  | 33 ++++++----
 .../src/lib/a2ui/catalog/text.component.ts    | 60 +++++++++++++++----
 .../src/lib/a2ui/catalog/video.component.ts   |  9 ++-
 18 files changed, 373 insertions(+), 84 deletions(-)

diff --git a/libs/chat/src/lib/a2ui/catalog/audio-player.component.ts b/libs/chat/src/lib/a2ui/catalog/audio-player.component.ts
index 2ae249206..9c1ab5ae7 100644
--- a/libs/chat/src/lib/a2ui/catalog/audio-player.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/audio-player.component.ts
@@ -7,12 +7,18 @@ import type { Spec } from '@json-render/core';
   standalone: true,
   template: `
     <audio
-      class="w-full"
+      class="a2ui-audio"
       [src]="url()"
       [autoplay]="autoPlay()"
       [controls]="controls()"
     ></audio>
   `,
+  styles: [`
+    .a2ui-audio {
+      display: block;
+      width: 100%;
+    }
+  `],
 })
 export class A2uiAudioPlayerComponent {
   readonly url = input<string>('');
diff --git a/libs/chat/src/lib/a2ui/catalog/button.component.ts b/libs/chat/src/lib/a2ui/catalog/button.component.ts
index a226da22c..f18515876 100644
--- a/libs/chat/src/lib/a2ui/catalog/button.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/button.component.ts
@@ -10,10 +10,7 @@ import { RenderElementComponent } from '@ngaf/render';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <button
-      class="px-4 py-2 rounded-lg text-sm font-medium transition-colors inline-flex items-center justify-center"
-      [class]="primary()
-        ? 'bg-blue-600 hover:bg-blue-700 text-white'
-        : 'bg-transparent border border-white/20 hover:bg-white/10 text-white/80'"
+      [class]="primary() ? 'a2ui-btn a2ui-btn--primary' : 'a2ui-btn a2ui-btn--secondary'"
       [disabled]="disabled()"
       (click)="handleClick()"
     >
@@ -22,6 +19,32 @@ import { RenderElementComponent } from '@ngaf/render';
       }
     </button>
   `,
+  styles: [`
+    .a2ui-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px 16px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 120ms, opacity 120ms;
+      border: none;
+    }
+    .a2ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .a2ui-btn--primary {
+      background: var(--a2ui-primary, #2563eb);
+      color: #fff;
+    }
+    .a2ui-btn--primary:hover:not(:disabled) { background: var(--a2ui-primary-hover, #1d4ed8); }
+    .a2ui-btn--secondary {
+      background: transparent;
+      color: var(--a2ui-input-text, rgba(255,255,255,0.8));
+      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.2));
+    }
+    .a2ui-btn--secondary:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
+  `],
 })
 export class A2uiButtonComponent {
   /** v1: child Text component is rendered inside the button via childKeys. */
diff --git a/libs/chat/src/lib/a2ui/catalog/card.component.ts b/libs/chat/src/lib/a2ui/catalog/card.component.ts
index 4563c836f..5783beeee 100644
--- a/libs/chat/src/lib/a2ui/catalog/card.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/card.component.ts
@@ -8,12 +8,23 @@ import { RenderElementComponent } from '@ngaf/render';
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm">
+    <div class="a2ui-card">
       @for (key of childKeys(); track key) {
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </div>
   `,
+  styles: [`
+    .a2ui-card {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      border-radius: 12px;
+      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      background: var(--a2ui-card-bg, rgba(255,255,255,0.05));
+      padding: 16px;
+    }
+  `],
 })
 export class A2uiCardComponent {
   /** v1: a single child key, delivered via childKeys[0] from the render framework. */
diff --git a/libs/chat/src/lib/a2ui/catalog/check-box.component.ts b/libs/chat/src/lib/a2ui/catalog/check-box.component.ts
index 3eb086c63..e63de547e 100644
--- a/libs/chat/src/lib/a2ui/catalog/check-box.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/check-box.component.ts
@@ -8,11 +8,27 @@ import { emitBinding } from './emit-binding';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <label class="flex items-center gap-2 text-sm cursor-pointer">
-      <input type="checkbox" [checked]="checked()" (change)="onChange($event)" class="rounded" />
+    <label class="a2ui-cb">
+      <input type="checkbox" [checked]="checked()" (change)="onChange($event)" class="a2ui-cb__input" />
       {{ label() }}
     </label>
   `,
+  styles: [`
+    .a2ui-cb {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .a2ui-cb__input {
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      accent-color: var(--a2ui-primary, #2563eb);
+    }
+  `],
 })
 export class A2uiCheckBoxComponent {
   readonly label = input<string>('');
diff --git a/libs/chat/src/lib/a2ui/catalog/column.component.ts b/libs/chat/src/lib/a2ui/catalog/column.component.ts
index b08c17c48..db9c893c7 100644
--- a/libs/chat/src/lib/a2ui/catalog/column.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/column.component.ts
@@ -5,17 +5,27 @@ import { RenderElementComponent } from '@ngaf/render';
 
 type ColumnAlignment = 'start' | 'center' | 'end' | 'stretch';
 
+const ALIGN_MAP: Record<ColumnAlignment, string> = {
+  start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch',
+};
+
 @Component({
   selector: 'a2ui-column',
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div [class]="colClass()">
+    <div class="a2ui-col" [style.align-items]="alignItems()" [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;
+    }
+  `],
 })
 export class A2uiColumnComponent {
   readonly childKeys = input<string[]>([]);
@@ -28,10 +38,7 @@ export class A2uiColumnComponent {
   readonly emit = input<(event: string) => void>(() => { /* noop */ });
   readonly loading = input<boolean>(false);
 
-  protected readonly colClass = computed(() => {
-    const alignMap: Record<ColumnAlignment, string> = {
-      start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch',
-    };
-    return `flex flex-col gap-${this.gap()} ${alignMap[this.alignment()]}`;
-  });
+  protected readonly alignItems = computed(() => ALIGN_MAP[this.alignment()] ?? 'flex-start');
+  /** Convert the Tailwind gap unit (multiples of 4px) to pixels. */
+  protected readonly gapPx = computed(() => this.gap() * 4);
 }
diff --git a/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts b/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
index 5a807860e..c875bc769 100644
--- a/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
@@ -8,22 +8,37 @@ import { emitBinding } from './emit-binding';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="flex flex-col gap-1">
+    <div class="a2ui-dti">
       @if (label()) {
-        <label [htmlFor]="_inputId" class="text-xs" style="color: var(--a2ui-label, rgba(255,255,255,0.6));">{{ label() }}</label>
+        <label [htmlFor]="_inputId" class="a2ui-dti__label">{{ label() }}</label>
       }
       <input
         [id]="_inputId"
         [type]="htmlInputType()"
         [value]="value()"
-        class="rounded-lg px-3 py-2 text-sm"
-        [style.background]="'var(--a2ui-input-bg, rgba(255,255,255,0.05))'"
-        [style.color]="'var(--a2ui-input-text, white)'"
-        [style.border]="'1px solid var(--a2ui-border, rgba(255,255,255,0.1))'"
+        class="a2ui-dti__input"
         (change)="onChange($event)"
       />
     </div>
   `,
+  styles: [`
+    .a2ui-dti { display: flex; flex-direction: column; gap: 4px; }
+    .a2ui-dti__label {
+      font-size: 12px;
+      color: var(--a2ui-label, rgba(255,255,255,0.6));
+    }
+    .a2ui-dti__input {
+      padding: 8px 12px;
+      font-size: 14px;
+      border-radius: 8px;
+      background: var(--a2ui-input-bg, rgba(255,255,255,0.05));
+      color: var(--a2ui-input-text, white);
+      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      outline: none;
+      transition: border-color 120ms;
+    }
+    .a2ui-dti__input:focus { border-color: var(--a2ui-primary, #4f8df5); }
+  `],
 })
 export class A2uiDateTimeInputComponent {
   private static _idCounter = 0;
diff --git a/libs/chat/src/lib/a2ui/catalog/divider.component.ts b/libs/chat/src/lib/a2ui/catalog/divider.component.ts
index 697bfc7ed..25416c911 100644
--- a/libs/chat/src/lib/a2ui/catalog/divider.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/divider.component.ts
@@ -7,11 +7,27 @@ import type { Spec } from '@json-render/core';
   standalone: true,
   template: `
     @if (orientation() === 'vertical') {
-      <div class="inline-block self-stretch border-l border-white/10 mx-2"></div>
+      <div class="a2ui-divider a2ui-divider--vertical"></div>
     } @else {
-      <hr class="border-white/10 my-2" />
+      <hr class="a2ui-divider a2ui-divider--horizontal" />
     }
   `,
+  styles: [`
+    .a2ui-divider--horizontal {
+      display: block;
+      width: 100%;
+      border: none;
+      border-top: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      margin: 8px 0;
+    }
+    .a2ui-divider--vertical {
+      display: inline-block;
+      align-self: stretch;
+      width: 1px;
+      background: var(--a2ui-border, rgba(255,255,255,0.1));
+      margin: 0 8px;
+    }
+  `],
 })
 export class A2uiDividerComponent {
   /** Canonical v1 spec name. The LLM emits this. */
diff --git a/libs/chat/src/lib/a2ui/catalog/icon.component.ts b/libs/chat/src/lib/a2ui/catalog/icon.component.ts
index 5e62814f9..0a1b5e263 100644
--- a/libs/chat/src/lib/a2ui/catalog/icon.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/icon.component.ts
@@ -7,10 +7,18 @@ import type { Spec } from '@json-render/core';
   standalone: true,
   template: `
     <span
-      class="inline-flex items-center justify-center select-none"
+      class="a2ui-icon"
       [style.font-size]="size() ? size() + 'px' : '1.125rem'"
     >{{ icon() }}</span>
   `,
+  styles: [`
+    .a2ui-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+    }
+  `],
 })
 export class A2uiIconComponent {
   /** v1 prop name: icon (resolved string, e.g. a Unicode symbol or ligature name). */
diff --git a/libs/chat/src/lib/a2ui/catalog/image.component.ts b/libs/chat/src/lib/a2ui/catalog/image.component.ts
index 065f701d4..fb7b38ab1 100644
--- a/libs/chat/src/lib/a2ui/catalog/image.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/image.component.ts
@@ -7,13 +7,20 @@ import type { Spec } from '@json-render/core';
   standalone: true,
   template: `
     <img
+      class="a2ui-img"
       [src]="url()"
       [alt]="alt()"
       [style.width]="width() ? width() + 'px' : null"
       [style.height]="height() ? height() + 'px' : null"
-      class="max-w-full rounded"
     />
   `,
+  styles: [`
+    .a2ui-img {
+      display: block;
+      max-width: 100%;
+      border-radius: 4px;
+    }
+  `],
 })
 export class A2uiImageComponent {
   readonly url = input<string>('');
diff --git a/libs/chat/src/lib/a2ui/catalog/list.component.ts b/libs/chat/src/lib/a2ui/catalog/list.component.ts
index 625ec3fb6..bac85947b 100644
--- a/libs/chat/src/lib/a2ui/catalog/list.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/list.component.ts
@@ -14,6 +14,21 @@ import { RenderElementComponent } from '@ngaf/render';
       }
     </div>
   `,
+  styles: [`
+    .a2ui-list--vertical {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      overflow-y: auto;
+      max-height: 384px;
+    }
+    .a2ui-list--horizontal {
+      display: flex;
+      flex-direction: row;
+      gap: 4px;
+      overflow-x: auto;
+    }
+  `],
 })
 export class A2uiListComponent {
   readonly childKeys = input<string[]>([]);
@@ -26,7 +41,7 @@ export class A2uiListComponent {
 
   protected readonly listClass = computed(() => {
     return this.direction() === 'horizontal'
-      ? 'flex flex-row gap-1 overflow-x-auto'
-      : 'flex flex-col gap-1 overflow-y-auto max-h-96';
+      ? 'a2ui-list--horizontal'
+      : 'a2ui-list--vertical';
   });
 }
diff --git a/libs/chat/src/lib/a2ui/catalog/modal.component.ts b/libs/chat/src/lib/a2ui/catalog/modal.component.ts
index 858167c70..29e16e832 100644
--- a/libs/chat/src/lib/a2ui/catalog/modal.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/modal.component.ts
@@ -19,12 +19,12 @@ import { RenderElementComponent } from '@ngaf/render';
     <!-- Modal overlay: shown when open. -->
     @if (open()) {
       <div
-        class="fixed inset-0 z-50 flex items-center justify-center"
+        class="a2ui-modal__overlay"
         role="dialog"
         aria-modal="true"
       >
         <div
-          class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+          class="a2ui-modal__backdrop"
           role="button"
           tabindex="0"
           aria-label="Dismiss dialog"
@@ -32,9 +32,9 @@ import { RenderElementComponent } from '@ngaf/render';
           (keydown.enter)="open.set(false)"
           (keydown.space)="open.set(false)"
         ></div>
-        <div class="relative bg-gray-900 border border-white/10 rounded-xl p-6 max-w-lg w-full mx-4 shadow-2xl">
+        <div class="a2ui-modal__panel">
           @if (title()) {
-            <h2 class="text-lg font-semibold mb-4">{{ title() }}</h2>
+            <h2 class="a2ui-modal__title">{{ title() }}</h2>
           }
           @if (contentKey(); as cKey) {
             <render-element [elementKey]="cKey" [spec]="spec()" />
@@ -43,6 +43,38 @@ import { RenderElementComponent } from '@ngaf/render';
       </div>
     }
   `,
+  styles: [`
+    .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: rgba(0,0,0,0.6);
+      backdrop-filter: blur(4px);
+    }
+    .a2ui-modal__panel {
+      position: relative;
+      background: var(--a2ui-card-bg, #111827);
+      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      border-radius: 12px;
+      padding: 24px;
+      max-width: 512px;
+      width: 100%;
+      margin: 0 16px;
+      box-shadow: 0 25px 50px rgba(0,0,0,0.5);
+    }
+    .a2ui-modal__title {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0 0 16px;
+    }
+  `],
 })
 export class A2uiModalComponent {
   /**
diff --git a/libs/chat/src/lib/a2ui/catalog/multiple-choice.component.ts b/libs/chat/src/lib/a2ui/catalog/multiple-choice.component.ts
index f2c4c7283..5dc2e74be 100644
--- a/libs/chat/src/lib/a2ui/catalog/multiple-choice.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/multiple-choice.component.ts
@@ -14,34 +14,28 @@ interface ResolvedOption {
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="flex flex-col gap-1">
+    <div class="a2ui-mc">
       @if (label()) {
-        <span class="text-xs" style="color: var(--a2ui-label, rgba(255,255,255,0.6));">{{ label() }}</span>
+        <span class="a2ui-mc__label">{{ label() }}</span>
       }
 
       @if (isSingleSelect()) {
         <!-- Single-select: HTML <select> -->
-        <select
-          class="rounded-lg px-3 py-2 text-sm"
-          [style.background]="'var(--a2ui-input-bg, rgba(255,255,255,0.05))'"
-          [style.color]="'var(--a2ui-input-text, white)'"
-          [style.border]="'1px solid var(--a2ui-border, rgba(255,255,255,0.1))'"
-          (change)="onSelectChange($event)"
-        >
+        <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="flex flex-col gap-2">
+        <div class="a2ui-mc__checks">
           @for (opt of options(); track opt.value) {
-            <label class="flex items-center gap-2 text-sm cursor-pointer">
+            <label class="a2ui-mc__check-row">
               <input
                 type="checkbox"
+                class="a2ui-mc__checkbox"
                 [checked]="isSelected(opt.value)"
                 (change)="onCheckChange(opt.value, $event)"
-                class="rounded"
               />
               {{ opt.label }}
             </label>
@@ -50,6 +44,36 @@ interface ResolvedOption {
       }
     </div>
   `,
+  styles: [`
+    .a2ui-mc { display: flex; flex-direction: column; gap: 4px; }
+    .a2ui-mc__label { font-size: 12px; color: var(--a2ui-label, rgba(255,255,255,0.6)); }
+    .a2ui-mc__select {
+      padding: 8px 12px;
+      font-size: 14px;
+      border-radius: 8px;
+      background: var(--a2ui-input-bg, rgba(255,255,255,0.05));
+      color: var(--a2ui-input-text, white);
+      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      outline: none;
+      transition: border-color 120ms;
+    }
+    .a2ui-mc__select:focus { border-color: var(--a2ui-primary, #4f8df5); }
+    .a2ui-mc__checks { display: flex; flex-direction: column; gap: 8px; }
+    .a2ui-mc__check-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .a2ui-mc__checkbox {
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      accent-color: var(--a2ui-primary, #2563eb);
+    }
+  `],
 })
 export class A2uiMultipleChoiceComponent {
   readonly label = input<string>('');
diff --git a/libs/chat/src/lib/a2ui/catalog/row.component.ts b/libs/chat/src/lib/a2ui/catalog/row.component.ts
index 594f7e70d..92d570a20 100644
--- a/libs/chat/src/lib/a2ui/catalog/row.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/row.component.ts
@@ -6,17 +6,38 @@ import { RenderElementComponent } from '@ngaf/render';
 type RowAlignment = 'start' | 'center' | 'end' | 'stretch';
 type RowDistribution = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
 
+const ROW_ALIGN_MAP: Record<RowAlignment, string> = {
+  start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch',
+};
+
+const ROW_JUSTIFY_MAP: Record<RowDistribution, string> = {
+  start: 'flex-start', center: 'center', end: 'flex-end',
+  'space-between': 'space-between', 'space-around': 'space-around',
+};
+
 @Component({
   selector: 'a2ui-row',
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div [class]="rowClass()">
+    <div
+      class="a2ui-row"
+      [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-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `],
 })
 export class A2uiRowComponent {
   readonly childKeys = input<string[]>([]);
@@ -29,14 +50,8 @@ export class A2uiRowComponent {
   readonly emit = input<(event: string) => void>(() => { /* noop */ });
   readonly loading = input<boolean>(false);
 
-  protected readonly rowClass = computed(() => {
-    const alignMap: Record<RowAlignment, string> = {
-      start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch',
-    };
-    const justifyMap: Record<RowDistribution, string> = {
-      start: 'justify-start', center: 'justify-center', end: 'justify-end',
-      'space-between': 'justify-between', 'space-around': 'justify-around',
-    };
-    return `flex flex-row gap-${this.gap()} ${alignMap[this.alignment()]} ${justifyMap[this.distribution()]}`;
-  });
+  protected readonly alignItems = computed(() => ROW_ALIGN_MAP[this.alignment()] ?? 'flex-start');
+  protected readonly justifyContent = computed(() => ROW_JUSTIFY_MAP[this.distribution()] ?? 'flex-start');
+  /** Convert the gap unit (multiples of 4px) to pixels. */
+  protected readonly gapPx = computed(() => this.gap() * 4);
 }
diff --git a/libs/chat/src/lib/a2ui/catalog/slider.component.ts b/libs/chat/src/lib/a2ui/catalog/slider.component.ts
index efe23e8dc..5458c9081 100644
--- a/libs/chat/src/lib/a2ui/catalog/slider.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/slider.component.ts
@@ -8,22 +8,34 @@ import { emitBinding } from './emit-binding';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="flex flex-col gap-1">
+    <div class="a2ui-slider">
       @if (label()) {
-        <label [htmlFor]="_inputId" class="text-xs" style="color: var(--a2ui-label, rgba(255,255,255,0.6));">{{ label() }}: {{ value() }}</label>
+        <label [htmlFor]="_inputId" class="a2ui-slider__label">{{ label() }}: {{ value() }}</label>
       }
       <input
         [id]="_inputId"
         type="range"
+        class="a2ui-slider__input"
         [min]="minValue()"
         [max]="maxValue()"
         [step]="step()"
         [value]="value()"
-        class="w-full"
         (input)="onInput($event)"
       />
     </div>
   `,
+  styles: [`
+    .a2ui-slider { display: flex; flex-direction: column; gap: 4px; }
+    .a2ui-slider__label {
+      font-size: 12px;
+      color: var(--a2ui-label, rgba(255,255,255,0.6));
+    }
+    .a2ui-slider__input {
+      width: 100%;
+      cursor: pointer;
+      accent-color: var(--a2ui-primary, #2563eb);
+    }
+  `],
 })
 export class A2uiSliderComponent {
   private static _idCounter = 0;
diff --git a/libs/chat/src/lib/a2ui/catalog/tabs.component.ts b/libs/chat/src/lib/a2ui/catalog/tabs.component.ts
index ded8cb2dc..17c2c6a6e 100644
--- a/libs/chat/src/lib/a2ui/catalog/tabs.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/tabs.component.ts
@@ -8,25 +8,49 @@ import { RenderElementComponent } from '@ngaf/render';
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="flex flex-col gap-0">
-      <div class="flex border-b border-white/10" role="tablist">
+    <div class="a2ui-tabs">
+      <div class="a2ui-tabs__tablist" role="tablist">
         @for (title of tabTitles(); track $index) {
           <button
             role="tab"
-            class="px-4 py-2 text-sm font-medium transition-colors border-b-2"
-            [class]="$index === activeIndex() ? 'border-blue-500 text-white' : 'border-transparent text-white/50 hover:text-white/80'"
+            [class]="$index === activeIndex() ? 'a2ui-tabs__tab a2ui-tabs__tab--active' : 'a2ui-tabs__tab'"
             [attr.aria-selected]="$index === activeIndex()"
             (click)="selectTab($index)"
           >{{ title }}</button>
         }
       </div>
-      <div class="pt-3" role="tabpanel">
+      <div class="a2ui-tabs__panel" role="tabpanel">
         @if (activeChildKey(); as key) {
           <render-element [elementKey]="key" [spec]="spec()" />
         }
       </div>
     </div>
   `,
+  styles: [`
+    .a2ui-tabs { display: flex; flex-direction: column; }
+    .a2ui-tabs__tablist {
+      display: flex;
+      border-bottom: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+    }
+    .a2ui-tabs__tab {
+      padding: 8px 16px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      border-bottom: 2px solid transparent;
+      color: var(--a2ui-label, rgba(255,255,255,0.5));
+      transition: color 120ms, border-color 120ms;
+      margin-bottom: -1px;
+    }
+    .a2ui-tabs__tab:hover { color: var(--a2ui-input-text, rgba(255,255,255,0.8)); }
+    .a2ui-tabs__tab--active {
+      border-bottom-color: var(--a2ui-primary, #3b82f6);
+      color: var(--a2ui-input-text, white);
+    }
+    .a2ui-tabs__panel { padding-top: 12px; }
+  `],
 })
 export class A2uiTabsComponent {
   /** Resolved tab titles from tabItems[*].title — produced by surface-to-spec. */
diff --git a/libs/chat/src/lib/a2ui/catalog/text-field.component.ts b/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
index aed1b67c0..de0066320 100644
--- a/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
@@ -20,9 +20,9 @@ const TYPE_MAP: Record<TextFieldType, string> = {
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="flex flex-col gap-1">
+    <div class="a2ui-tf">
       @if (label()) {
-        <label [htmlFor]="_inputId" class="text-xs" style="color: var(--a2ui-label, rgba(255,255,255,0.6));">{{ label() }}</label>
+        <label [htmlFor]="_inputId" class="a2ui-tf__label">{{ label() }}</label>
       }
       @if (textFieldType() === 'longText') {
         <textarea
@@ -30,10 +30,7 @@ const TYPE_MAP: Record<TextFieldType, string> = {
           [value]="value()"
           [placeholder]="placeholder()"
           rows="4"
-          class="rounded-lg px-3 py-2 text-sm resize-y"
-          [style.background]="'var(--a2ui-input-bg, rgba(255,255,255,0.05))'"
-          [style.color]="'var(--a2ui-input-text, white)'"
-          [style.border]="'1px solid var(--a2ui-border, rgba(255,255,255,0.1))'"
+          class="a2ui-tf__input"
           (input)="onInput($event)"
         ></textarea>
       } @else {
@@ -43,15 +40,31 @@ const TYPE_MAP: Record<TextFieldType, string> = {
           [value]="value()"
           [placeholder]="placeholder()"
           [pattern]="validationRegexp() || ''"
-          class="rounded-lg px-3 py-2 text-sm"
-          [style.background]="'var(--a2ui-input-bg, rgba(255,255,255,0.05))'"
-          [style.color]="'var(--a2ui-input-text, white)'"
-          [style.border]="'1px solid var(--a2ui-border, rgba(255,255,255,0.1))'"
+          class="a2ui-tf__input"
           (input)="onInput($event)"
         />
       }
     </div>
   `,
+  styles: [`
+    .a2ui-tf { display: flex; flex-direction: column; gap: 4px; }
+    .a2ui-tf__label {
+      font-size: 12px;
+      color: var(--a2ui-label, rgba(255,255,255,0.6));
+    }
+    .a2ui-tf__input {
+      padding: 8px 12px;
+      font-size: 14px;
+      border-radius: 8px;
+      background: var(--a2ui-input-bg, rgba(255,255,255,0.05));
+      color: var(--a2ui-input-text, white);
+      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      outline: none;
+      transition: border-color 120ms;
+      resize: vertical;
+    }
+    .a2ui-tf__input:focus { border-color: var(--a2ui-primary, #4f8df5); }
+  `],
 })
 export class A2uiTextFieldComponent {
   private static _idCounter = 0;
diff --git a/libs/chat/src/lib/a2ui/catalog/text.component.ts b/libs/chat/src/lib/a2ui/catalog/text.component.ts
index 847e566fd..a9d1f03a5 100644
--- a/libs/chat/src/lib/a2ui/catalog/text.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/text.component.ts
@@ -4,20 +4,58 @@ import type { Spec } from '@json-render/core';
 
 type UsageHint = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'caption' | 'body';
 
-const HINT_CLASS: Record<UsageHint, string> = {
-  h1: 'text-3xl font-bold',
-  h2: 'text-2xl font-semibold',
-  h3: 'text-xl font-semibold',
-  h4: 'text-lg font-medium',
-  h5: 'text-base font-medium',
-  caption: 'text-xs text-white/50',
-  body: 'text-sm text-current',
-};
-
 @Component({
   selector: 'a2ui-text',
   standalone: true,
   template: `<span [class]="cssClass()">{{ text() }}</span>`,
+  styles: [`
+    .a2ui-text-h1 {
+      display: block;
+      font-size: 2rem;
+      font-weight: 700;
+      line-height: 1.2;
+      margin: 0;
+    }
+    .a2ui-text-h2 {
+      display: block;
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.3;
+      margin: 0;
+    }
+    .a2ui-text-h3 {
+      display: block;
+      font-size: 1.25rem;
+      font-weight: 600;
+      line-height: 1.4;
+      margin: 0;
+    }
+    .a2ui-text-h4 {
+      display: block;
+      font-size: 1.125rem;
+      font-weight: 500;
+      line-height: 1.4;
+      margin: 0;
+    }
+    .a2ui-text-h5 {
+      display: block;
+      font-size: 1rem;
+      font-weight: 500;
+      line-height: 1.5;
+      margin: 0;
+    }
+    .a2ui-text-caption {
+      display: block;
+      font-size: 0.75rem;
+      color: var(--a2ui-caption, rgba(255,255,255,0.5));
+      line-height: 1.4;
+    }
+    .a2ui-text-body {
+      display: block;
+      font-size: 0.875rem;
+      line-height: 1.6;
+    }
+  `],
 })
 export class A2uiTextComponent {
   readonly text = input<string>('');
@@ -30,6 +68,6 @@ export class A2uiTextComponent {
   readonly spec = input<Spec | undefined>(undefined);
 
   protected cssClass(): string {
-    return HINT_CLASS[this.usageHint()] ?? HINT_CLASS.body;
+    return `a2ui-text-${this.usageHint()}`;
   }
 }
diff --git a/libs/chat/src/lib/a2ui/catalog/video.component.ts b/libs/chat/src/lib/a2ui/catalog/video.component.ts
index 4cb9946c0..1a0f6be5e 100644
--- a/libs/chat/src/lib/a2ui/catalog/video.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/video.component.ts
@@ -7,12 +7,19 @@ import type { Spec } from '@json-render/core';
   standalone: true,
   template: `
     <video
-      class="w-full rounded-lg"
+      class="a2ui-video"
       [src]="url()"
       [autoplay]="autoPlay()"
       [controls]="controls()"
     ></video>
   `,
+  styles: [`
+    .a2ui-video {
+      display: block;
+      width: 100%;
+      border-radius: 8px;
+    }
+  `],
 })
 export class A2uiVideoComponent {
   readonly url = input<string>('');

From bd256a83d734ce843b2bac51755e8d69582e12d3 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 9 May 2026 21:11:54 -0700
Subject: [PATCH 2/3] fix(chat): TextField coerces undefined value to empty
 string

---
 libs/chat/src/lib/a2ui/catalog/text-field.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/chat/src/lib/a2ui/catalog/text-field.component.ts b/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
index de0066320..836aef42e 100644
--- a/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
@@ -74,7 +74,7 @@ export class A2uiTextFieldComponent {
   /** v1 prop: text (resolved string value). */
   readonly text = input<string>('');
   /** Back-compat alias: value. surface-to-spec resolves DynamicString → plain string. */
-  readonly value = computed(() => this.text());
+  readonly value = computed(() => this.text() ?? '');
   readonly placeholder = input<string>('');
   readonly textFieldType = input<TextFieldType>('shortText');
   readonly validationRegexp = input<string>('');

From ae0b89f339636d62e7497e8a2385ed76c2f61375 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 9 May 2026 21:29:43 -0700
Subject: [PATCH 3/3] docs(chat): regenerate API docs after layout polish
 styles additions

---
 .../content/docs/chat/api/api-docs.json       | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/apps/website/content/docs/chat/api/api-docs.json b/apps/website/content/docs/chat/api/api-docs.json
index 5fbc1572a..c643bda05 100644
--- a/apps/website/content/docs/chat/api/api-docs.json
+++ b/apps/website/content/docs/chat/api/api-docs.json
@@ -235,6 +235,12 @@
     "params": [],
     "examples": [],
     "properties": [
+      {
+        "name": "alignItems",
+        "type": "Signal<string>",
+        "description": "",
+        "optional": false
+      },
       {
         "name": "alignment",
         "type": "InputSignal<ColumnAlignment>",
@@ -253,12 +259,6 @@
         "description": "",
         "optional": false
       },
-      {
-        "name": "colClass",
-        "type": "Signal<string>",
-        "description": "",
-        "optional": false
-      },
       {
         "name": "distribution",
         "type": "InputSignal<\"center\" | \"start\" | \"end\" | \"spaceBetween\" | \"spaceAround\" | \"spaceEvenly\">",
@@ -277,6 +277,12 @@
         "description": "",
         "optional": false
       },
+      {
+        "name": "gapPx",
+        "type": "Signal<number>",
+        "description": "Convert the Tailwind gap unit (multiples of 4px) to pixels.",
+        "optional": false
+      },
       {
         "name": "loading",
         "type": "InputSignal<boolean>",
@@ -595,7 +601,7 @@
       },
       {
         "name": "listClass",
-        "type": "Signal<\"flex flex-row gap-1 overflow-x-auto\" | \"flex flex-col gap-1 overflow-y-auto max-h-96\">",
+        "type": "Signal<\"a2ui-list--horizontal\" | \"a2ui-list--vertical\">",
         "description": "",
         "optional": false
       },
@@ -813,6 +819,12 @@
     "params": [],
     "examples": [],
     "properties": [
+      {
+        "name": "alignItems",
+        "type": "Signal<string>",
+        "description": "",
+        "optional": false
+      },
       {
         "name": "alignment",
         "type": "InputSignal<RowAlignment>",
@@ -850,17 +862,23 @@
         "optional": false
       },
       {
-        "name": "loading",
-        "type": "InputSignal<boolean>",
-        "description": "",
+        "name": "gapPx",
+        "type": "Signal<number>",
+        "description": "Convert the gap unit (multiples of 4px) to pixels.",
         "optional": false
       },
       {
-        "name": "rowClass",
+        "name": "justifyContent",
         "type": "Signal<string>",
         "description": "",
         "optional": false
       },
+      {
+        "name": "loading",
+        "type": "InputSignal<boolean>",
+        "description": "",
+        "optional": false
+      },
       {
         "name": "spec",
         "type": "InputSignal<Spec>",